/* SiteOps — design tokens from docs/07-ui-reference.md §3 */
:root {
  --paper: #EEF0EF; --ink: #1C2321; --vis: #F2C230; --plan: #2F5D8A; --ok: #2E7D4F;
  --amber: #8F5614; --rebar: #B83A2B; --line: #C9CFCC; --chip: #E6E9E7; --mute: #5E6A66; --white: #fff;
  --calm-bg: #F7F7F5; --calm-ink: #23302C; --calm-soft: #E3EAF1; --calm-line: #DADFDC; --calm-mute: #5B6662;
  --radius: 8px; --gap: 12px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --condensed: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --calm-font: "Source Sans 3", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.45 var(--font); }
h1, h2, h3 { font-family: var(--condensed); font-weight: 700; line-height: 1.15; margin: 0 0 8px; }
h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; }
p { margin: 0 0 8px; }
a { color: var(--plan); }
:focus-visible { outline: 3px solid var(--plan); outline-offset: 2px; }
.mute { color: var(--mute); } .small { font-size: 14px; } .tiny { font-size: 12px; }
.ok-text { color: var(--ok); } .bad-text { color: var(--rebar); } .amber-text { color: var(--amber); }
.stack > * + * { margin-top: var(--gap); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; } .grow { flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
pre.message { white-space: pre-wrap; font: 14px/1.45 var(--font); margin: 0; }

/* ---------- app shell ---------- */
.app { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: 84px; }
.main { padding: 16px; }
.banner { padding: 8px 16px; text-align: center; font-size: 14px; }
.banner.support { background: var(--rebar); color: #fff; font-weight: 600; }
.banner.maintenance { background: var(--amber); color: #fff; }
.banner.overdue { background: #f3e7d9; color: var(--amber); }
.hi-vis { background: var(--vis); padding: 24px 16px 16px; }
.hi-vis .day { font-family: var(--condensed); font-size: 18px; }
.page-head { padding: 16px 16px 0; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; text-decoration: none; margin-bottom: 8px; }

.tabs-bottom { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); z-index: 20; }
.tabs-bottom ul { display: flex; max-width: 560px; margin: 0 auto; padding: 0; list-style: none; }
.tabs-bottom li { flex: 1; }
.tabs-bottom a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 8px;
  color: var(--mute); text-decoration: none; font-size: 12px; min-height: 56px; }
.tabs-bottom a::before { content: ""; width: 32px; height: 4px; border-radius: 4px; background: transparent; }
.tabs-bottom a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tabs-bottom a[aria-current="page"]::before { background: var(--vis); }
.tabs-bottom svg { width: 22px; height: 22px; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--rebar);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

/* ---------- cards ---------- */
.card { background: #fff; border-radius: var(--radius); padding: 16px; }
.card.edge { border-left: 6px solid var(--line); }
.edge-plan { border-left-color: var(--plan) !important; } .edge-ok { border-left-color: var(--ok) !important; }
.edge-amber { border-left-color: var(--amber) !important; } .edge-rebar { border-left-color: var(--rebar) !important; }
a.card { display: block; color: inherit; text-decoration: none; }
.list { list-style: none; margin: 0; padding: 0; } .list > li + li { margin-top: 8px; }
.empty { background: #fff; border-radius: var(--radius); padding: 16px; text-align: center; }
.empty p { margin: 0; } .empty .mute { margin-top: 4px; font-size: 14px; }
.big-number { font-family: var(--condensed); font-size: 24px; font-weight: 700; }
dl.facts { margin: 0; } dl.facts div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
dl.facts dt { color: var(--mute); } dl.facts dd { margin: 0; text-align: right; }

/* ---------- buttons, chips, alerts ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px;
  border-radius: var(--radius); border: 2px solid transparent; background: var(--plan); color: #fff;
  font: 500 16px var(--font); text-decoration: none; cursor: pointer; }
.btn.small { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.btn.block { width: 100%; }
.btn.ok { background: var(--ok); } .btn.rebar { background: var(--rebar); } .btn.amber { background: var(--amber); }
.btn.outline { background: #fff; color: var(--plan); border-color: var(--plan); }
.btn.outline.mute { color: var(--ink); border-color: var(--line); }
.btn.outline.rebar { color: var(--rebar); border-color: var(--rebar); }
.btn.outline.ok { color: var(--ok); border-color: var(--ok); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--plan); font: inherit; cursor: pointer; text-decoration: underline; min-height: 0; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; background: var(--chip); color: var(--mute); white-space: nowrap; }
.chip.plan { background: #e2eaf2; color: var(--plan); } .chip.ok { background: #e1efe6; color: var(--ok); }
.chip.amber { background: #f3e7d9; color: var(--amber); } .chip.rebar { background: #f5e1de; color: var(--rebar); }
.warn { display: flex; gap: 8px; padding: 12px; border-radius: var(--radius); font-size: 14px; background: #f5e1de; color: var(--rebar); }
.warn.amber { background: #f3e7d9; color: var(--amber); }
.warn::before { content: "⚠"; font-weight: 700; }
.flash { margin: 12px 16px 0; padding: 12px 16px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 15px; }
.flash.bad { background: var(--rebar); }

/* ---------- forms ---------- */
label, .label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--mute); }
.field { margin-bottom: 12px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=tel], input[type=url], input[type=search], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); font: 16px var(--font); }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--plan); outline: none; }
.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 16px; color: var(--ink); font-weight: 400; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; }
.hint { margin-top: 4px; font-size: 13px; color: var(--mute); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { margin: 0; }
.pills input { position: absolute; opacity: 0; }
.pills span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border-radius: var(--radius);
  background: var(--chip); color: var(--ink); font-size: 14px; cursor: pointer; }
.pills input:checked + span { background: var(--ink); color: #fff; }
.pills input:focus-visible + span { outline: 3px solid var(--plan); outline-offset: 2px; }
details.expand { background: #fff; border-radius: var(--radius); }
details.expand > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 500; }
details.expand > summary::-webkit-details-marker { display: none; }
details.expand > summary::after { content: "＋"; float: right; color: var(--mute); }
details.expand[open] > summary::after { content: "－"; }
details.expand > div { padding: 0 16px 16px; }

/* ---------- tabs & filters ---------- */
.tabbar { display: flex; gap: 4px; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--line); padding: 0 8px; }
.tabbar a { padding: 12px; white-space: nowrap; font-size: 14px; color: var(--mute); text-decoration: none; border-bottom: 2px solid transparent; }
.tabbar a[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.filters a { padding: 8px 12px; border-radius: 20px; background: var(--chip); color: var(--ink); text-decoration: none; font-size: 14px; }
.filters a[aria-current="true"] { background: var(--ink); color: #fff; }

/* ---------- progress, schedule ---------- */
.bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--plan); border-radius: 4px; }
.bar.done > span { background: var(--ok); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0; }
.days .day { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 2px; border-radius: var(--radius); background: #fff; }
.days .day-link { display: block; padding: 4px 2px; border-radius: 6px; color: var(--ink);
  text-align: center; text-decoration: none; font-size: 12px; }
.days .day-link[aria-current="true"] { background: var(--ink); color: #fff; }
.days .day-job { display: block; padding: 2px 4px; border-radius: 4px; background: var(--sky, #EAF2FB); color: var(--plan-deep, #234E86);
  font-size: 10px; line-height: 1.3; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.days .day-job:hover, .days .day-job:focus { background: var(--plan-deep, #234E86); color: #fff; }
.days .day-more { display: block; font-size: 10px; color: var(--mute); text-align: center; text-decoration: none; }
.days .num { display: block; font-family: var(--condensed); font-size: 18px; font-weight: 700; }
.days .load { display: block; height: 6px; margin: 4px 3px 0; border-radius: 3px; background: var(--line); overflow: hidden; }
.days .load span { display: block; height: 100%; }
.days .weekday { color: var(--mute); } .days .day-link[aria-current="true"] .weekday { color: #ddd; }
.time { font-family: var(--condensed); font-size: 20px; font-weight: 700; }

/* ---------- sign-in / bare pages ---------- */
.bare { max-width: 440px; margin: 0 auto; min-height: 100vh; padding: 24px 16px; display: flex; flex-direction: column; justify-content: center; }
.brand { text-align: center; margin-bottom: 20px; }
.brand .logo { display: inline-block; width: 52px; height: 52px; border-radius: 10px; background: var(--ink); margin-bottom: 8px; }

/* ---------- customer & supplier pages (calm palette) ---------- */
.calm { background: var(--calm-bg); color: var(--calm-ink); font-family: var(--calm-font); min-height: 100vh; }
.calm .wrap { max-width: 520px; margin: 0 auto; padding: 24px 16px 40px; }
.calm h1, .calm h2 { font-family: var(--calm-font); font-weight: 600; }
.calm .panel { background: #fff; border: 1px solid var(--calm-line); border-radius: 10px; padding: 16px; }
.calm .stage { background: #fff; border: 1px solid var(--calm-line); border-radius: 8px; padding: 12px; }
.calm .stage.current { background: var(--calm-soft); }
.calm .mute { color: var(--calm-mute); }
.calm .brand-bar { width: 64px; height: 8px; border-radius: 4px; margin-bottom: 12px; }
.calm .bar { background: var(--calm-soft); }
.calm .photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.calm .photos img { width: 100%; border-radius: 6px; }

/* ---------- console (desktop first) ---------- */
.console { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }
.console-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.console .tabbar { border-radius: var(--radius); margin-bottom: 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
table.data { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; font-size: 14px; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--chip); vertical-align: top; }
table.data th { background: #f6f7f6; color: var(--mute); font-weight: 600; }
.table-wrap { overflow-x: auto; }

@media (min-width: 720px) { .grid-2-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- installer ---------- */
.install { max-width: 560px; margin: 0 auto; min-height: 100vh; padding: 24px 16px 48px; }
.install-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.install-head .logo { background: var(--ink); border-radius: 10px; padding: 4px; display: inline-flex; }
.install-head h1 { margin: 0; font: 700 28px/1.1 var(--font-condensed, "Barlow Condensed", "Arial Narrow", sans-serif); }
.install-kicker { margin: 0; font-size: 13px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.install-steps { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0 0 20px; }
.install-steps li { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mute); border-top: 4px solid var(--line); padding-top: 6px; }
.install-steps li span { font-weight: 600; }
.install-steps li.done { border-top-color: var(--ok); color: var(--ok); }
.install-steps li.now { border-top-color: var(--vis); color: var(--ink); font-weight: 600; }
.install fieldset { border: 0; min-width: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; }
.install legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; font-weight: 600; font-size: 18px; }
.install legend + * { clear: both; }
.install details > summary { cursor: pointer; min-height: 28px; }
.install .how { padding-left: 20px; margin: 8px 0; }
.install .how li + li { margin-top: 6px; }
.install code, pre.code { font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--chip); border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere; }
pre.code { white-space: pre-wrap; padding: 10px 12px; margin: 8px 0; }
.checklist { list-style: none; margin: 0; padding: 8px 16px; }
.checklist li { display: flex; gap: 10px; padding: 8px 0; font-size: 15px; }
.checklist li + li { border-top: 1px solid var(--chip); }
.checklist .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: var(--ok); }
.checklist li.bad .mark { background: var(--rebar); }
.checklist .hint { margin: 4px 0 0; }

/* Company brand bar at the top of the staff app */
.brandbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #fff;
  border-bottom: 1px solid var(--line);
  border-top: 4px solid var(--brand, #2F5D8A);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.brandbar-logo-wrap {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 4px 8px; background: #fff; border-radius: 8px;
}
.brandbar-logo {
  display: block; height: 36px !important; max-height: 36px;
  width: auto !important; max-width: 180px; object-fit: contain;
}
.brandbar-name {
  font-family: var(--condensed); font-weight: 700; font-size: 22px;
  color: var(--ink); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* When there's a logo, the name sits quietly beside it as a secondary label */
.brandbar-logo-wrap + .brandbar-name { font-size: 16px; font-weight: 600; color: var(--mute); }

/* ---------- dashboards (analytics) ---------- */
.chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 12px; }
.chart-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.chart-bars .col > .fill { width: 100%; max-width: 42px; background: var(--plan); border-radius: 4px 4px 0 0; min-height: 2px; }
.chart-bars .col > .n { font-family: var(--condensed); font-weight: 700; font-size: 15px; }
.chart-bars .col > .k { font-size: 11px; color: var(--mute); }
.hbar-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 6px 0; }
.hbar { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.hbar > span { display: block; height: 100%; background: var(--amber); border-radius: 5px; }
.stat-good { color: var(--ok); } .stat-bad { color: var(--rebar); } .stat-warn { color: var(--amber); }

/* ============================================================
   UI polish pass (1.4.2) — depth, rhythm and finish
   ============================================================ */

/* Softer page canvas */
body { background: #eceeed; }

/* Cards get a gentle lift and hairline, so they read as surfaces */
.card, .empty, details.expand {
  box-shadow: 0 1px 2px rgba(28,35,33,.05), 0 1px 3px rgba(28,35,33,.04);
  border: 1px solid rgba(28,35,33,.05);
}
a.card { transition: box-shadow .15s ease, transform .15s ease; }
a.card:active { transform: scale(.995); }
a.card:hover { box-shadow: 0 2px 6px rgba(28,35,33,.10); }

/* Hi-vis header: a touch more presence and a clean edge */
.hi-vis { padding: 26px 16px 20px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06); }
.hi-vis h1 { font-size: 34px; margin: 2px 0 6px; }
.hi-vis .day { text-transform: uppercase; letter-spacing: .04em; font-size: 15px; opacity: .8; }

/* Section headings breathe a little more */
.main > h2 { margin-top: 20px; }
.page-head h1 { font-size: 30px; }

/* Buttons: subtle depth + press feedback */
.btn { box-shadow: 0 1px 2px rgba(28,35,33,.10); transition: filter .12s ease, transform .06s ease; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn.outline { box-shadow: none; }

/* Chips: pill shape reads cleaner */
.chip { border-radius: 999px; padding: 3px 10px; }

/* Inputs: warmer focus ring */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(47,93,138,.15); }

/* Bottom tab bar: lift it off the page */
.tabs-bottom { box-shadow: 0 -1px 3px rgba(28,35,33,.06); }

/* Empty states feel intentional, not blank */
.empty { padding: 28px 16px; color: var(--mute); }

/* Bars a bit rounder to match pills */
.bar, .hbar { border-radius: 999px; } .bar > span, .hbar > span { border-radius: 999px; }

/* Chart bars: rounded tops, brand-tinted */
.chart-bars .col > .fill { border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--plan), #3f6d9c); }

/* Dashboard number tiles: label above, big value, clear hierarchy */
.tiles .card { padding: 14px 16px; }
.tiles .big-number { font-size: 30px; margin-top: 2px; }

/* Company profile logo preview sits on a checkerboard-free white tile */
.logo-preview { display:inline-flex; align-items:center; justify-content:center; height:64px; padding:8px 12px;
  background:#fff; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; }
.logo-preview img { max-height:48px; max-width:220px; width:auto; object-fit:contain; display:block; }

/* ============================================================
   Lively pass (1.7.0) — warmth, colour and friendliness
   Layered on top; overrides earlier flat styles.
   ============================================================ */
:root {
  --plan: #2E6BB8;          /* brighter, friendlier blue */
  --plan-deep: #234E86;
  --ok: #1F9D57;            /* fresher green */
  --sky: #EAF2FB;           /* soft blue tint for surfaces */
  --sun: #FFD23F;           /* warmer hi-vis */
  --shadow: 22 40 66;       /* rgb for coloured shadows */
}

body { background: linear-gradient(180deg, #eef1f4 0%, #e9edf0 100%); }

/* Hi-vis header: sunny gradient with a soft base shadow */
.hi-vis {
  background: linear-gradient(135deg, #FFDE59 0%, #F2C230 100%);
  padding: 28px 18px 22px;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 4px 14px rgba(242,194,48,.35);
}
.hi-vis h1 { font-size: 36px; letter-spacing: -0.5px; }
.hi-vis .day { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; opacity: .75; }

/* Cards: rounder, soft blue-grey shadow, gentle hover lift */
.card, .empty, details.expand {
  border-radius: 14px;
  border: 1px solid rgba(var(--shadow), .06);
  box-shadow: 0 2px 8px rgba(var(--shadow), .06);
}
a.card { transition: transform .14s ease, box-shadow .14s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--shadow), .12); }
a.card:active { transform: translateY(0); }

/* Colour-coded left edges, brighter */
.card.edge { border-left: 5px solid var(--plan); }
.card.edge-rebar { border-left-color: var(--rebar); }
.card.edge-ok { border-left-color: var(--ok); }
.card.edge-amber { border-left-color: var(--amber); }

/* Buttons: gradient primary, springy press, pill shape */
.btn {
  border-radius: 12px; font-weight: 600;
  background: linear-gradient(180deg, var(--plan) 0%, var(--plan-deep) 100%);
  box-shadow: 0 2px 6px rgba(46,107,184,.30);
  transition: transform .08s ease, box-shadow .15s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 4px 12px rgba(46,107,184,.38); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.ok { background: linear-gradient(180deg, #1A8F4E 0%, #15803D 100%); box-shadow: 0 2px 6px rgba(21,128,61,.3); }
.btn.rebar { background: linear-gradient(180deg, #D24634 0%, #B83A2B 100%); box-shadow: 0 2px 6px rgba(184,58,43,.3); }
.btn.amber { background: linear-gradient(180deg, #B06A18 0%, #8F5614 100%); }
.btn.outline {
  background: #fff; box-shadow: none; border: 1.5px solid var(--line);
}
.btn.outline:hover { border-color: var(--plan); color: var(--plan); filter: none; }

/* Chips: tinted pills by tone */
.chip { border-radius: 999px; padding: 3px 11px; font-weight: 600; font-size: 12px; background: var(--sky); color: var(--plan-deep); }
.chip.ok { background: #E1F5EA; color: #146B3A; }
.chip.rebar { background: #FBE4E0; color: #92271B; }
.chip.amber { background: #F8ECD9; color: #7A4A11; }
.chip.plan { background: var(--sky); color: var(--plan-deep); }

/* The paste-a-supplier-date prompt: make it inviting, not a plain box */
a.card.dashed, .prompt-card {
  border: 2px dashed var(--plan); background: var(--sky); color: var(--plan-deep);
  border-radius: 14px; font-weight: 600; text-align: center;
}

/* Section headings get a small accent bar */
.main > h2 { position: relative; padding-left: 12px; margin-top: 22px; }
.main > h2::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px;
  border-radius: 2px; background: var(--plan);
}

/* Bottom tab bar: rounded top, active tab in brand blue with a dot */
.tabbar, .tabs-bottom, nav.tabs {
  box-shadow: 0 -2px 12px rgba(var(--shadow), .08);
  border-radius: 16px 16px 0 0;
}
nav.tabs a[aria-selected="true"], .tabs-bottom a.active { color: var(--plan); }

/* Progress + load bars: rounded and gradient-filled */
.bar, .hbar { border-radius: 999px; height: 9px; }
.bar > span { border-radius: 999px; background: linear-gradient(90deg, var(--plan), #4E8BD6); }
.bar.done > span { background: linear-gradient(90deg, #24B366, #1F9D57); }

/* Empty states: friendlier, with breathing room */
.empty { padding: 32px 18px; text-align: center; color: var(--mute); background: #fff; }
.empty::before { content: "🔨"; display: block; font-size: 30px; margin-bottom: 6px; opacity: .5; }

/* Inputs: rounder, clear focus */
input, select, textarea { border-radius: 10px; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(46,107,184,.18); border-color: var(--plan); }

/* Flash messages: rounded, coloured */
.flash { border-radius: 12px; box-shadow: 0 2px 8px rgba(var(--shadow), .1); }

/* Number tiles on dashboards pop a little */
.tiles .card { background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); }
.tiles .big-number { color: var(--plan-deep); }

/* Brand bar: a touch more polish */
.brandbar { box-shadow: 0 2px 10px rgba(var(--shadow), .06); }

/* Team schedule grid */
.team-grid { width: 100%; border-collapse: separate; border-spacing: 4px; }
.team-grid th { font-size: 12px; color: var(--mute); font-weight: 600; padding: 4px; text-align: center; }
.team-grid th.today { color: var(--plan-deep); }
.team-grid th .today-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--plan-deep); margin-top: 2px; }
.team-grid td { text-align: center; padding: 10px 4px; border-radius: 10px; min-width: 48px; vertical-align: middle; transition: transform .12s ease; }
.team-grid td.today-col { box-shadow: inset 0 0 0 2px rgba(46,107,184,.35); }
.team-grid td a, .team-grid a { color: var(--plan-deep); font-weight: 600; text-decoration: none; }
.team-grid .cell-jobs { display: block; font-family: var(--condensed); font-weight: 700; font-size: 19px; color: var(--ink); }
.team-grid .cell-icon { font-size: 13px; }
.team-person-row { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.team-avatar { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; flex: 0 0 auto; box-shadow: 0 2px 4px rgba(0,0,0,.18); }
.team-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.team-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--paper); }
.team-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }


/* ---------- 1.32: one-tap photo capture ---------- */
.js .js-hide { display: none !important; }
.capture-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.btn.big-tap { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; font-size: 17px; }
details.expand-inline { display: inline-block; }
details.expand-inline > summary, details > summary.btn { list-style: none; cursor: pointer; }
details.expand-inline > summary::-webkit-details-marker, details > summary.btn::-webkit-details-marker { display: none; }

/* ---------- 1.32: desktop layout (office, PM, owner) ----------
   Phones and tablets are unchanged. From 1024px the tabs become a left
   sidebar and the portfolio screens (Sites, Schedule, dashboard/More) use
   the width; Today and Inbox stay a readable column. */
:root { --gantt-label: 180px; }
@media (min-width: 1024px) {
  :root { --gantt-label: 260px; }
  .app { max-width: 1180px; margin: 0 0 0 220px; padding-bottom: 32px; }
  /* 1. Today and Inbox: a readable column, centred in the space beside the sidebar */
  body.tab-today .app, body.tab-inbox .app { max-width: 760px; margin-left: max(220px, calc(110px + 50vw - 380px)); }
  .tabs-bottom { top: 0; bottom: 0; right: auto; width: 220px; border-top: 0; border-right: 1px solid var(--line); padding: 16px 0 0;
    border-radius: 0; box-shadow: none; }
  /* 3. Search boxes and pickers don't stretch across a wide screen */
  body.tab-sites .main input[type=search], body.tab-sites .main select, body.tab-schedule .main select { max-width: 420px; }
  /* 5. Month calendar: room for the project chips */
  .days .day { min-height: 92px; }
  .days .day-job { font-size: 11px; }
  .tabs-bottom ul { flex-direction: column; max-width: none; }
  .tabs-bottom li { flex: 0 0 auto; }
  .tabs-bottom a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 20px; font-size: 15px; min-height: 44px; }
  .tabs-bottom a::before { width: 4px; height: 24px; }
  body.tab-sites .site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
  body.tab-sites .site-cards > li { margin: 0; }
}

/* 4. Dashboard: space between the rows of two-column cards, and money that fits its tile */
.grid-2-wide { margin-bottom: 16px; }
.tiles .big-number { overflow-wrap: anywhere; }
@media (min-width: 1024px) { .tiles .big-number { font-size: clamp(18px, 1.9vw, 30px); white-space: nowrap; } }

/* Saved on the phone with no signal (replaces the form it came from). */
.saved-offline { margin: 8px 0; padding: 12px 14px; border-radius: var(--radius); background: #E7F4EC; color: #1E5B38; font-weight: 600; font-size: 15px; }