/*
  Youco Ops — brand stylesheet
  Source: docs/brand/youco-cleaning-brand-guidelines.md
  Cream backgrounds (~60%), heritage green blocks (~30%), brass for fine lines only (~10%).
  Square or barely rounded corners. No gradients, no drop shadows.
  Playfair Display for headings, Jost for everything else.
*/

:root {
  /* Brand palette */
  --heritage-green: #2A4B3D;
  --cream: #F4EFE3;
  --brass: #B8925A;
  --sage: #A7B8A0;
  --ink-brand: #1B1F1C;
  --panel-white: #FBF8F1;
  --hairline: #D9D0BE;
  --muted-text: #5C625D;

  /* Semantic tokens */
  --bg: var(--cream);
  --surface: var(--panel-white);
  --surface-2: #EFE8D9;
  --ink: var(--ink-brand);
  --muted: var(--muted-text);
  --line: var(--hairline);
  --rule: var(--brass);
  --accent: var(--heritage-green);
  --accent-ink: var(--cream);
  --accent-soft: #DDE5D8;
  --rail-bg: var(--heritage-green);
  --rail-ink: var(--cream);
  --rail-muted: #C9D3C4;
  --rail-hover: rgba(244, 239, 227, .08);
  --rail-active: rgba(244, 239, 227, .14);

  /* Status (functional, muted to sit with the palette) */
  --good: #2D6A47;
  --good-soft: #DCEAE0;
  --warn: #94551A;
  --warn-soft: #F3E3CF;
  --bad: #A23131;
  --bad-soft: #F3DADA;


  /* Colour-coded cloths */
  --c-red: #C4433A;
  --c-blue: #356AA3;
  --c-green: #3B8A56;
  --c-yellow: #C9A21F;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Jost", Arial, sans-serif;
  --r: 2px;
  --gutter: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151916;
    --surface: #1D231F;
    --surface-2: #262D28;
    --ink: #EDE7DA;
    --muted: #A2AA9F;
    --line: #343C36;
    --accent: var(--sage);
    --accent-ink: #151916;
    --accent-soft: #26372E;
    --rail-bg: #1D231F;
    --rail-ink: #EDE7DA;
    --rail-muted: #A2AA9F;
    --good: #7DC796;
    --good-soft: #1B3325;
    --warn: #E3A15F;
    --warn-soft: #3A2916;
    --bad: #E57D7D;
    --bad-soft: #3B1D1D;
    --c-red: #E0675E;
    --c-blue: #6E9FD6;
    --c-green: #6CC08A;
    --c-yellow: #E8C651;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #151916;
  --surface: #1D231F;
  --surface-2: #262D28;
  --ink: #EDE7DA;
  --muted: #A2AA9F;
  --line: #343C36;
  --accent: var(--sage);
  --accent-ink: #151916;
  --accent-soft: #26372E;
  --rail-bg: #1D231F;
  --rail-ink: #EDE7DA;
  --rail-muted: #A2AA9F;
  --good: #7DC796;
  --good-soft: #1B3325;
  --warn: #E3A15F;
  --warn-soft: #3A2916;
  --bad: #E57D7D;
  --bad-soft: #3B1D1D;
  --c-red: #E0675E;
  --c-blue: #6E9FD6;
  --c-green: #6CC08A;
  --c-yellow: #E8C651;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: 1.85rem; line-height: 1.15; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num, .time-txt { font-variant-numeric: lining-nums tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.xsmall { font-size: .76rem; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-tight { display: flex; flex-direction: column; gap: 6px; }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spread { justify-content: space-between; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Labels and descriptors: Jost Medium caps, letter-spaced */
.eyebrow {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
}

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100%; }

.rail {
  background: var(--rail-bg);
  color: var(--rail-ink);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 14px 16px max(14px, env(safe-area-inset-left, 0px));
  /* Brass inset border: the signature detail on green panels */
  box-shadow: inset -1px 0 0 var(--rule);
  overflow-y: auto;
}
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 8px 14px; border-bottom: 1px solid rgba(184, 146, 90, .55); }
.brand-lockup img { height: 38px; width: auto; display: block; }
.descriptor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rail-ink);
  white-space: nowrap;
}
.descriptor::before, .descriptor::after { content: ""; width: 10px; height: 1px; background: var(--rule); flex: none; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r);
  color: var(--rail-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: .93rem;
  border-left: 2px solid transparent;
}
.nav a:hover { background: var(--rail-hover); color: var(--rail-ink); }
.nav a.active { background: var(--rail-active); color: var(--rail-ink); border-left-color: var(--rule); }
.nav-badge {
  font-size: .68rem;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--cream);
  color: var(--heritage-green);
}
.rail-user { margin-top: auto; border-top: 1px solid rgba(184, 146, 90, .55); padding: 12px 8px 0; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.rail-user b { font-weight: 600; }
.rail-user .role { color: var(--rail-muted); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.rail-user form { margin: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--rail-muted); text-decoration: underline; text-underline-offset: 2px; font-size: .84rem; }
.link-btn:hover { color: var(--rail-ink); }

main.page {
  padding: 26px 32px 56px;
  min-width: 0;
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Page header with brass hairline rule */
.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.head > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.head p { color: var(--muted); }
.subhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- Panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-width: 0; }
.panel > h2, .panel > h3 { margin-bottom: 12px; }
.panel.green {
  background: var(--heritage-green);
  color: var(--cream);
  border-color: var(--heritage-green);
  box-shadow: inset 0 0 0 4px var(--heritage-green), inset 0 0 0 5px var(--brass);
}
.grid { display: grid; gap: 16px; }
.g-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.g-2-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .v { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; line-height: 1.2; }
.kpi .v small { font-family: var(--font-body); font-size: .9rem; font-weight: 400; color: var(--muted); }
.kpi .s { font-size: .82rem; color: var(--muted); }

.meter { height: 5px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter i.over { background: var(--warn); }

/* ---------- Lists ---------- */
.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-weight: 500; }
.row .d { font-size: .84rem; color: var(--muted); }
.time { font-variant-numeric: lining-nums tabular-nums; font-size: .88rem; color: var(--muted); width: 48px; flex: none; font-weight: 500; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 2px 9px;
  border-radius: 99px;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.45;
}
.p-good { background: var(--good-soft); color: var(--good); }
.p-warn { background: var(--warn-soft); color: var(--warn); }
.p-bad { background: var(--bad-soft); color: var(--bad); }
.p-muted { background: var(--surface-2); color: var(--muted); }
.p-accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 7px 14px;
  border-radius: var(--r);
  font-weight: 500;
  font-size: .88rem;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.3;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); color: var(--accent-ink); }
.btn.small { padding: 4px 10px; font-size: .8rem; }
.btn.danger { color: var(--bad); }
.btn.block { width: 100%; }

/* Segmented control: selected state uses a hairline, not a shadow */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--r); }
.seg button {
  border: 1px solid transparent;
  background: transparent;
  padding: 5px 12px;
  border-radius: var(--r);
  font-weight: 500;
  font-size: .85rem;
  color: var(--muted);
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--line); }
.seg.compact button { padding: 3px 8px; font-size: .78rem; }

/* ---------- Alerts ---------- */
.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--warn-soft);
  color: var(--ink);
  font-size: .9rem;
  border-left: 3px solid var(--warn);
}
.alert > b { color: var(--warn); flex: none; max-width: 42%; font-weight: 600; }
.alert a { margin-left: .3em; }
.alert.bad { background: var(--bad-soft); border-left-color: var(--bad); }
.alert.bad > b { color: var(--bad); }
.alert.good { background: var(--good-soft); border-left-color: var(--good); }
.alert.good > b { color: var(--good); }
.alert.accent { background: var(--accent-soft); border-left-color: var(--accent); }
.alert.accent > b { color: var(--accent); }

/* ---------- Forms ---------- */
input:not([type]), input[type=text], input[type=number], input[type=email], input[type=tel], input[type=date], input[type=time], select, textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 7px 10px;
  width: 100%;
  min-height: 38px;
}
input[type=time], input[type=date] { font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
textarea { min-height: 72px; resize: vertical; }
label.f { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.check { display: flex; align-items: center; gap: 9px; font-size: .92rem; padding: 4px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.addrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 12px; }
.addrow > * { flex: 1 1 140px; }
.addrow > .btn { flex: 0 0 auto; }

/* ---------- Tables ---------- */
.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.r, th.r { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
tr.sum td { font-weight: 600; border-top: 2px solid var(--ink); }
td input[type=time] { max-width: 116px; min-height: 34px; padding: 4px 8px; }
td input[type=number] { max-width: 80px; text-align: right; min-height: 34px; padding: 4px 8px; }

/* ---------- Cloth colour code ---------- */
.cloth { width: 10px; height: 10px; flex: none; display: inline-block; }
.cl-red { background: var(--c-red); }
.cl-blue { background: var(--c-blue); }
.cl-green { background: var(--c-green); }
.cl-yellow { background: var(--c-yellow); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Clients ---------- */
.clients { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cl-item { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; border: 0; background: transparent; padding: 10px 12px; border-radius: var(--r); text-decoration: none; color: inherit; border-left: 2px solid transparent; }
.cl-item:hover { background: var(--surface-2); }
.cl-item.current { background: var(--accent-soft); border-left-color: var(--accent); }
.cl-item .top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.cl-item .top b { font-weight: 500; }
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; font-size: .9rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.task { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: .92rem; }
.task:first-child { border-top: 0; }
.task .grow { flex: 1; min-width: 0; }
.room-h { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-top: 14px; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.icon-btn { border: 0; background: transparent; color: var(--muted); padding: 2px 8px; border-radius: var(--r); font-size: 1.05rem; line-height: 1; }
.icon-btn:hover { color: var(--bad); background: var(--bad-soft); }

/* ---------- Quotes ---------- */
.counter { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.counter:first-child { border-top: 0; }
.counter .ctl { display: flex; align-items: center; gap: 8px; }
.counter .ctl button { width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 1rem; }
.counter .ctl span { width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.total { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .94rem; }
.total span:last-child { font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.total.big { font-size: 1.05rem; font-weight: 600; border-top: 2px solid var(--ink); }
details.panel > summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
details > summary { cursor: pointer; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

.room-list { margin-top: 6px; }
.room-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.room-row:first-child { border-top: 0; }
.room-row .grow { flex: 1; min-width: 0; }
.room-row b { font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { border: 1px dashed var(--line); background: transparent; color: var(--ink); padding: 5px 10px; border-radius: var(--r); font-size: .82rem; }
.chip:hover { border-color: var(--accent); border-style: solid; color: var(--accent); }
.team-seg button b { font-weight: 600; }
.extra-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.extra-row:first-child { border-top: 0; }
.extra-row .grow { flex: 1 1 200px; min-width: 0; align-self: center; }
.extra-row b { font-weight: 500; }
.extra-row .icon-btn { align-self: center; }
tr.has-extra td { background: var(--accent-soft); }
.team-tag { color: var(--muted); }
.team-change { border-top: 1px solid var(--line); padding-top: 12px; }
tr.current td { background: var(--accent-soft); }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.room-tpl h3 { font-size: 1.05rem; margin: 0; }
@media (min-width: 1081px) {
  .estimate { position: sticky; top: 16px; align-self: start; }
}

/* Dialog: brass hairline, no shadow (brand rule). Full-screen sheet on phones. */
.modal-back { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink-brand) 45%, transparent); z-index: 40; }
.modal {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--rule); border-radius: var(--r);
}
.modal:focus { outline: none; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 10px; }
.modal-head h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
.modal-body { overflow-y: auto; padding: 4px 18px 14px; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ---------- Schedule ---------- */
.sched-wrap { overflow-x: auto; }
.sched {
  display: grid;
  grid-template-columns: 150px repeat(7, minmax(112px, 1fr)) 70px;
  min-width: 1010px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.sched > div { border-left: 1px solid var(--line); border-top: 1px solid var(--line); padding: 8px; min-height: 66px; display: flex; flex-direction: column; gap: 6px; }
.sched .hd { min-height: 0; font-size: .68rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; border-top: 0; }
.sched .hd.today { color: var(--accent); font-weight: 600; }
.sched .who { border-left: 0; font-weight: 500; font-size: .9rem; }
.sched .who small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; }
.sched .tot { font-variant-numeric: tabular-nums; font-weight: 600; align-items: flex-end; justify-content: center; }
.sched > div.drop { background: var(--accent-soft); }
.sched .off-cell { background: var(--surface-2); }
.blk { padding: 5px 7px; font-size: .76rem; line-height: 1.3; background: var(--accent-soft); border-left: 3px solid var(--accent); cursor: grab; }
.blk b { display: block; font-weight: 600; }
.blk.cover { background: var(--bad-soft); border-left-color: var(--bad); }
.blk.lead { background: var(--warn-soft); border-left-color: var(--warn); }
.blk.dom { background: var(--surface-2); border-left-color: var(--c-blue); }
.blk.moved { outline: 1px dashed var(--accent); outline-offset: -1px; }
.blk .acts { display: flex; gap: 4px; margin-top: 4px; }
.blk .acts button { font-size: .68rem; padding: 1px 7px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-weight: 500; }
.mv { border: 1px solid var(--accent); background: var(--accent-soft); }
.weeknav { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Cleaner app ---------- */
.phone-wrap { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 24px; align-items: start; }
.phone { border: 10px solid var(--ink-brand); border-radius: 34px; background: var(--bg); overflow: hidden; max-width: 390px; width: 100%; }
.phone-top {
  background: var(--heritage-green);
  color: var(--cream);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: inset 0 -1px 0 var(--brass);
}
.phone-top b { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.phone-top span { font-size: .8rem; opacity: .9; }
.phone-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 540px; }
.job-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
.job-card:hover { border-color: var(--accent); }
.job-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.job-card .top b { font-weight: 600; }
.bigtick { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); width: 100%; text-align: left; font-size: .95rem; min-height: 48px; }
.bigtick .box { width: 24px; height: 24px; border: 2px solid var(--line); flex: none; display: grid; place-items: center; font-weight: 700; color: var(--accent-ink); border-radius: var(--r); }
.bigtick[aria-pressed="true"] { background: var(--good-soft); border-color: var(--good); }
.bigtick[aria-pressed="true"] .box { background: var(--good); border-color: var(--good); color: #fff; }
.bigtick[aria-pressed="true"] .lbl { text-decoration: line-through; color: var(--muted); }
.bigtick.warn[aria-pressed="true"] { background: var(--warn-soft); border-color: var(--warn); }
.bigtick.warn[aria-pressed="true"] .box { background: var(--warn); border-color: var(--warn); }
.bigtick.warn[aria-pressed="true"] .lbl { text-decoration: none; color: var(--ink); }
.progress { height: 6px; background: var(--surface-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--good); }
.note-box { font-size: .86rem; background: var(--warn-soft); border-radius: var(--r); padding: 10px 12px; }
.note-box.hazard { background: var(--bad-soft); }
.rams-box { font-size: .86rem; background: var(--accent-soft); border-radius: var(--r); padding: 10px 12px; }
.rams-box ol, .rams-box ul { margin: 4px 0 0; padding-left: 18px; }
.rams-box.warn { background: var(--warn-soft); }
.rams-box.bad { background: var(--bad-soft); }
.phone .btn, .cleaner-shell .btn { padding: 12px; font-size: .95rem; }
.phone .btn.small, .cleaner-shell .btn.small { padding: 5px 10px; font-size: .8rem; }
.photo-strip { display: flex; flex-wrap: wrap; gap: 6px; font-size: .78rem; }

/* Cleaner's own phone view (no frame) */
.cleaner-shell { min-height: 100%; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; background: var(--bg); }
.cleaner-shell .phone-top { padding-top: max(16px, env(safe-area-inset-top, 0px)); flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 10px; }
.cleaner-shell .phone-top img { height: 22px; width: auto; }
.cleaner-shell .phone-body { padding: 14px max(14px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); min-height: 0; }
.cleaner-shell form { margin: 0; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.team .panel { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--r);
  font-weight: 500;
  font-size: .9rem;
  z-index: 50;
  max-width: calc(100vw - 32px);
}
.toast.bad { background: var(--bad); color: #fff; }

/* ---------- Centred states ---------- */
.center-card { max-width: 460px; margin: 10vh auto; padding: 0 var(--gutter); }
.loading { color: var(--muted); padding: 20px 0; }

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--bad-soft);
  color: var(--ink);
  border-top: 1px solid var(--bad);
}
#blazor-error-ui .reload { margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2, .g-2-even, .g-3, .clients, .phone-wrap { grid-template-columns: minmax(0, 1fr); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: sticky;
    top: 0;
    height: auto;
    z-index: 20;
    gap: 10px;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
    box-shadow: inset 0 -1px 0 var(--rule);
    overflow: visible;
  }
  .brand-lockup { flex-direction: row; align-items: center; justify-content: space-between; padding: 0; border-bottom: 0; }
  .brand-lockup img { height: 22px; }
  .nav { flex-direction: row; overflow-x: auto; gap: 2px; margin: 0 -6px; padding: 0 6px 4px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 6px 10px; border-left: 0; border-bottom: 2px solid transparent; }
  .nav a.active { border-bottom-color: var(--rule); }
  .rail-user { display: none; }
  .rail .mobile-user { display: flex; }
  main.page { padding: 18px var(--gutter) 44px; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  h1 { font-size: 1.5rem; }
    .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dt { margin-top: 8px; }
  .g-4 { grid-template-columns: minmax(0, 1fr); }
  .alert { flex-direction: column; gap: 2px; }
  .alert > b { max-width: none; }
  .phone { border: 0; border-radius: 0; max-width: none; }
  .modal { left: 0; top: 0; transform: none; width: 100vw; max-height: none; height: 100dvh; border: 0; border-top: 2px solid var(--rule); }
  .modal-body { padding-left: var(--gutter); padding-right: var(--gutter); }
  .modal-head, .modal-foot { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .room-row { flex-wrap: wrap; }
  .room-row .grow { flex-basis: calc(100% - 40px); }
}

.mobile-user { display: none; align-items: center; gap: 8px; font-size: .78rem; color: var(--rail-muted); }
.mobile-user form { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a, .chip, .bigtick, .cl-item { transition: background-color .15s, border-color .15s, color .15s; }
  .progress i, .meter i { transition: width .3s; }
}

/* FocusOnNavigate moves focus to the h1 for screen readers; no visible ring needed on a heading */
h1:focus, h1:focus-visible { outline: none; }

/* ---------- Messages ---------- */
.email-preview { width: 100%; height: 720px; border: 1px solid var(--line); border-radius: var(--r); background: #F4EFE3; }
.plain-preview { white-space: pre-wrap; font-size: .85rem; background: var(--surface-2); padding: 14px; border-radius: var(--r); max-height: 640px; overflow: auto; margin: 0; }
.sms-bubble { max-width: 360px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px 14px 14px 2px; padding: 10px 14px; font-size: .92rem; white-space: pre-wrap; }

/* ---------- Addresses and travel ---------- */
.address-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: .92rem; }
.address-row .grow { flex: 1; min-width: 0; }
.travel-flag { color: var(--warn); font-weight: 500; }
.flag-bad { color: var(--bad); font-weight: 500; }

/* ---------- Public pages (quote acceptance) ---------- */
.public { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.public-head {
  background: var(--rail-bg); color: var(--rail-ink); border-bottom: 2px solid var(--rule);
  padding: 18px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.public-head img { height: 30px; width: auto; }
.public-head .descriptor { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--rail-muted); }
.public-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-left, 0px)) 40px; display: flex; flex-direction: column; gap: 18px; }
.public-card h1 { font-size: 1.7rem; }
.public-card h2 { font-size: 1.2rem; margin-top: 8px; }
.public-foot { text-align: center; font-size: .8rem; color: var(--muted); padding: 18px 16px 28px; }
.f-legend { font-size: .78rem; font-weight: 500; color: var(--muted); margin-bottom: 4px; padding: 0; }

/* ---------- Privacy notice ---------- */
.privacy h2 { margin-top: 14px; }
.privacy td, .privacy th { vertical-align: top; font-size: .88rem; }
.privacy ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }