/* Solcara Health CRM.
   Direction: a quiet, exact front-office tool. White working surface, warm hairlines, one leaf green
   for action and selection, Solcara's orange only for things that need attention, and the sunrise
   kept for the mark itself. Cormorant Garamond appears twice: the page title and a person's name.
   Everything else is Jost, set small and tight, with tabular numbers. No shadows at rest, no
   pill-shaped everything, no tinted cards stacked in rows. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/jost.woff2) format('woff2'); }

:root {
  --canvas: #FFFFFF;
  --side: #FAF8F4;
  --wash: #F6F3EC;
  --line: #ECE6DA;
  --line-strong: #DCD3C1;
  --ink: #1F1A12;
  --ink-2: #5C5548;
  --ink-3: #8D8473;
  --leaf: #4F6B1F;
  --leaf-hover: #425A19;
  --leaf-tint: #EEF2E4;
  --orange: #C65F10;
  --orange-tint: #FBEEE2;
  --gold-tint: #FAF1DC;
  --gold-ink: #7A5A0B;
  --rust: #A8460C;
  --blue-tint: #EAF0F5;
  --blue-ink: #2F5674;
  --plum-tint: #F2ECF3;
  --plum-ink: #6A3F6E;
  --focus: #C65F10;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs: 11.5px; --t-sm: 12.5px; --t-base: 13.5px; --t-md: 15px; --t-lg: 18px; --t-title: 28px; --t-name: 34px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px; --s7: 40px;
  --r: 6px; --r-lg: 10px;
  --side-w: 232px;
  --pop: 0 1px 2px rgba(31,26,18,.06), 0 10px 30px rgba(31,26,18,.10);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 var(--t-base)/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1, 'lnum' 1; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* ── sign-in ─────────────────────────────────────────────────────────────── */
.signin { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.signin-panel { display: grid; place-items: center; padding: var(--s7) max(24px, env(safe-area-inset-left, 0px)); }
.signin-card { width: min(360px, 100%); }
.signin-logo { height: 44px; width: auto; display: block; margin-bottom: var(--s7); }
.signin-card h1 { font: 600 34px/1.1 var(--serif); margin: 0 0 var(--s2); letter-spacing: -.01em; }
.signin-card p { margin: 0 0 var(--s6); color: var(--ink-2); }
.signin-art { position: relative; background: #2A1C08 url(/sign-in.webp) center / cover no-repeat; }
.signin-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,10,0) 45%, rgba(20,16,10,.78)); }
.signin-quote { position: absolute; left: var(--s7); right: var(--s7); bottom: var(--s7); z-index: 1; color: #fff; font: 500 22px/1.3 var(--serif); max-width: 30ch; }
.signin-quote span { display: block; margin-top: var(--s2); font: 400 var(--t-sm)/1.4 var(--sans); color: rgba(255,255,255,.8); }

/* ── shell ───────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--s4) var(--s3); }
.brand { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2) var(--s5); }
.brand img { height: 30px; width: auto; display: block; }
.side-label { font-size: var(--t-xs); color: var(--ink-3); padding: var(--s4) var(--s2) var(--s1); }
.nav { display: grid; gap: 1px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 6px var(--s2); border-radius: var(--r); text-decoration: none; color: var(--ink-2); font-weight: 450; }
.nav a svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover { background: var(--wash); color: var(--ink); }
.nav a.on { background: var(--canvas); color: var(--ink); font-weight: 550; box-shadow: inset 0 0 0 1px var(--line); }
.nav a.on svg { color: var(--leaf); }
.nav .count { margin-left: auto; font-size: var(--t-xs); color: var(--ink-3); }
.nav a.on .count { color: var(--ink-2); }
.side-foot { margin-top: auto; padding: var(--s3) var(--s2) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s2); font-size: var(--t-xs); color: var(--ink-3); }
.me { display: flex; align-items: center; gap: var(--s2); color: var(--ink-2); font-size: var(--t-sm); }
.me span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me button { margin-left: auto; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s6); height: 56px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: saturate(1.2) blur(6px); }
.top h1 { font: 600 22px/1 var(--serif); margin: 0; letter-spacing: -.005em; white-space: nowrap; }
.top .crumb { color: var(--ink-3); font-size: var(--t-sm); white-space: nowrap; }
.search { margin-left: auto; position: relative; width: min(320px, 34vw); }
.search input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--side); padding: 0 34px 0 30px; font-size: var(--t-sm); }
.search input:focus { background: var(--canvas); border-color: var(--line-strong); outline: none; }
.search svg { position: absolute; left: 9px; top: 9px; width: 14px; height: 14px; stroke: var(--ink-3); fill: none; stroke-width: 1.8; }
.search kbd { position: absolute; right: 8px; top: 7px; font: 500 10.5px/16px var(--sans); color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; background: var(--canvas); }
.search-out { position: absolute; top: 38px; left: 0; right: 0; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--pop); padding: var(--s1); max-height: 360px; overflow: auto; }
.search-out button { display: flex; width: 100%; gap: var(--s2); align-items: center; text-align: left; padding: 7px var(--s2); border: 0; background: none; border-radius: var(--r); cursor: pointer; }
.search-out button:hover, .search-out button.on { background: var(--wash); }
.icon-btn { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); cursor: pointer; color: var(--ink-2); }
.icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; background: var(--orange); color: #fff; font: 600 10.5px/17px var(--sans); text-align: center; }
.page { padding: var(--s6); min-width: 0; }

/* ── controls ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--leaf); background: var(--leaf); color: #fff; font-weight: 500; font-size: var(--t-sm); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--leaf-hover); border-color: var(--leaf-hover); }
.btn.secondary { background: var(--canvas); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--wash); }
.btn.quiet { background: none; border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--wash); color: var(--ink); }
.btn.sm { height: 26px; padding: 0 9px; font-size: var(--t-xs); }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.btn:disabled { opacity: .5; cursor: default; }
.link { border: 0; background: none; padding: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: inherit; }
.link:hover { color: var(--ink); }
.field { display: grid; gap: 5px; font-size: var(--t-sm); color: var(--ink-2); }
.field input, .field select, .field textarea, .inp { width: 100%; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--canvas); padding: 0 10px; font-size: var(--t-base); }
.field textarea, textarea.inp { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .inp:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-tint); }
.form-error { color: var(--rust); font-size: var(--t-sm); margin: 0; min-height: 1.2em; }
.hint { font-size: var(--t-xs); color: var(--ink-3); margin: 0; }
.stack { display: grid; gap: var(--s3); }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
select.inp { padding-right: 26px; }

/* ── chips: state, said once ─────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 5px; font-size: var(--t-xs); font-weight: 500; white-space: nowrap; background: var(--wash); color: var(--ink-2); }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.chip.lc-subscriber { background: var(--blue-tint); color: var(--blue-ink); }
.chip.lc-lead { background: var(--gold-tint); color: var(--gold-ink); }
.chip.lc-booked { background: var(--leaf-tint); color: var(--leaf); }
.chip.lc-patient { background: var(--leaf); color: #fff; }
.chip.lc-existing_patient { background: var(--plum-tint); color: var(--plum-ink); }
.chip.lc-lost, .chip.lc-not_a_lead { background: var(--wash); color: var(--ink-3); }
.chip.src { background: none; border: 1px solid var(--line); color: var(--ink-2); }
.chip.src i { display: none; }
.signin-foot { margin-top: var(--s5); }
.chip.new { background: var(--orange-tint); color: var(--orange); }

/* ── tables ──────────────────────────────────────────────────────────────── */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); padding: 9px var(--s3); border-bottom: 1px solid var(--line); background: var(--side); white-space: nowrap; position: sticky; top: 0; }
td { padding: 10px var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: #FCFBF8; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.person b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person small { display: block; font-size: var(--t-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── segmented tabs ──────────────────────────────────────────────────────── */
.seg { display: flex; gap: var(--s1); margin-bottom: var(--s4); flex-wrap: wrap; }
.seg button { height: 30px; padding: 0 10px; border-radius: var(--r); border: 1px solid transparent; background: none; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover { background: var(--wash); }
.seg button.on { background: var(--canvas); border-color: var(--line-strong); color: var(--ink); font-weight: 500; }
.seg .n { font-size: var(--t-xs); color: var(--ink-3); }

/* ── pipeline ────────────────────────────────────────────────────────────── */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); min-height: calc(100vh - 160px); }
.lane { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.lane:last-child { border-right: 0; }
.lane-h { display: flex; align-items: center; gap: var(--s2); padding: 12px var(--s3); border-bottom: 1px solid var(--line); background: var(--side); position: sticky; top: 0; }
.lane-h b { font-weight: 550; }
.lane-h .n { color: var(--ink-3); font-size: var(--t-xs); }
.lane-h .dot { width: 8px; height: 8px; border-radius: 2px; }
.lane-body { padding: var(--s2); display: grid; gap: var(--s2); align-content: start; flex: 1; }
.lane.drop .lane-body { background: var(--leaf-tint); }
.lane-empty { color: var(--ink-3); font-size: var(--t-xs); padding: var(--s2); }
.card { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 11px; display: grid; gap: 8px; cursor: pointer; }
.card:hover { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(31,26,18,.05); }
.card.dragging { opacity: .45; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.card-name { font-weight: 500; line-height: 1.3; }
.card-sub { font-size: var(--t-xs); color: var(--ink-3); }
.card-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.age { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.age.stale { color: var(--orange); font-weight: 500; }

/* ── person record ───────────────────────────────────────────────────────── */
.rec { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.rec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.rec-head h2 { font: 600 var(--t-name)/1.05 var(--serif); margin: 0 0 var(--s2); letter-spacing: -.01em; }
.facts { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); }
.facts section { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.facts section:last-child { border-bottom: 0; }
.facts h3 { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); margin: 0 0 var(--s2); }
.kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px var(--s3); margin: 0; font-size: var(--t-sm); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-size: var(--t-sm); padding: 4px 0; }
.boundary { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; }
.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.tabs button { border: 0; background: none; padding: 0 0 10px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }

/* journey */
.journey { list-style: none; margin: 0; padding: 0; position: relative; }
.journey::before { content: ''; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.journey li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s3); padding: 0 0 var(--s4); }
.jicon { position: relative; z-index: 1; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
.jicon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jicon.form { color: var(--orange); box-shadow: inset 0 0 0 1px #EBC9AD; background: var(--orange-tint); }
.jicon.stage { color: var(--leaf); box-shadow: inset 0 0 0 1px #CFDBB5; background: var(--leaf-tint); }
.jicon.won { color: #fff; background: var(--leaf); box-shadow: none; }
.jicon.message, .jicon.message_event { color: var(--blue-ink); box-shadow: inset 0 0 0 1px #C9D7E3; background: var(--blue-tint); }
.jtext { padding-top: 4px; min-width: 0; }
.jtext b { font-weight: 500; }
.jtext p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--t-sm); }
.jtime { padding-top: 5px; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.inquiry { margin-top: var(--s2); white-space: pre-wrap; background: var(--side); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); font-size: var(--t-sm); color: var(--ink); }
.composer { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3); margin-bottom: var(--s5); display: grid; gap: var(--s2); }
.composer textarea { border: 0; padding: 0; min-height: 44px; resize: vertical; outline: none; font-size: var(--t-base); width: 100%; }
.composer .row { justify-content: space-between; }

/* ── reports ─────────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--s6); }
.stat { padding: var(--s4) var(--s5); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .l { font-size: var(--t-xs); color: var(--ink-3); }
.stat .v { font-size: 28px; font-weight: 500; letter-spacing: -.01em; margin-top: 2px; }
.stat .d { font-size: var(--t-xs); color: var(--ink-3); }
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.panel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.panel h3 { font-size: var(--t-md); font-weight: 550; margin: 0 0 var(--s1); }
.panel .hint { margin-bottom: var(--s4); }
.funnel { display: grid; gap: var(--s2); }
.frow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: var(--s3); align-items: center; font-size: var(--t-sm); }
.ftrack { height: 22px; background: var(--side); border-radius: 4px; overflow: hidden; }
.ffill { height: 100%; background: var(--leaf); border-radius: 4px; opacity: .9; }
.ffill.alt { background: #B9C79A; }
.frow .pct { color: var(--ink-3); text-align: right; font-size: var(--t-xs); }

/* ── empty, toast, drawer, modal, popover ────────────────────────────────── */
.empty { padding: var(--s7) var(--s5); text-align: center; color: var(--ink-3); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--r); font-size: var(--t-sm); z-index: 90; box-shadow: var(--pop); }
.modal-wrap { position: fixed; inset: 0; background: rgba(31,26,18,.28); z-index: 60; display: grid; place-items: center; padding: var(--s4); }
.modal { width: min(440px, 100%); background: var(--canvas); border-radius: var(--r-lg); box-shadow: var(--pop); padding: var(--s5); }
.modal h2 { font: 600 24px/1.15 var(--serif); margin: 0 0 var(--s3); }
.pop { position: absolute; right: var(--s6); top: 52px; width: 360px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--pop); z-index: 40; overflow: hidden; }
.pop-h { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--s4); border-bottom: 1px solid var(--line); font-weight: 500; }
.pop ul { list-style: none; margin: 0; padding: var(--s1); max-height: 380px; overflow: auto; }
.pop li button { display: grid; grid-template-columns: 8px 1fr; gap: var(--s2); width: 100%; text-align: left; border: 0; background: none; padding: 8px var(--s2); border-radius: var(--r); cursor: pointer; }
.pop li button:hover { background: var(--wash); }
.pop li i { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: transparent; }
.pop li.unread i { background: var(--orange); }
.pop li small { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.notice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--side); margin-bottom: var(--s5); font-size: var(--t-sm); color: var(--ink-2); }
.notice b { color: var(--ink); font-weight: 500; }

@media (max-width: 980px) {
  .rec { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { grid-auto-flow: column; overflow-x: auto; }
  .side-label, .side-foot { display: none; }
  .top { padding: 0 max(16px, env(safe-area-inset-left, 0px)); }
  .page { padding: var(--s4) max(16px, env(safe-area-inset-left, 0px)); }
  .search { width: auto; flex: 1; }
  .signin { grid-template-columns: 1fr; }
  .signin-art { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 110px minmax(0, 1fr) 54px; }
}
@media (prefers-reduced-motion: no-preference) {
  .card, .btn, .nav a, tbody tr.click td { transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; }
}

/* ── front desk ──────────────────────────────────────────────────────────── */
body:not(.is-manager) .mgr { display: none !important; }
.desk { max-width: 980px; }
.desk-group { margin-bottom: var(--s6); }
.desk-group h2 { font: 600 var(--t-md)/1.3 var(--sans); margin: 0 0 var(--s3); display: flex; align-items: center; gap: var(--s2); }
.desk-group h2 .n { font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; }
.desk-group > p.hint { margin: -6px 0 var(--s3); }
.call-list { display: grid; gap: var(--s2); }
.call-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: 14px var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); cursor: pointer; text-align: left; width: 100%; }
.call-row:hover { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(31,26,18,.05); }
.call-row .who b { display: block; font-size: var(--t-md); font-weight: 550; }
.call-row .who small { display: block; color: var(--ink-3); font-size: var(--t-sm); }
.call-row .tel { font-size: var(--t-md); font-variant-numeric: tabular-nums; color: var(--ink); }
.call-row .wait { font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; text-align: right; }
.call-row .wait.late { color: var(--orange); font-weight: 550; }
.call-row .try { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.big-empty { padding: var(--s6); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-2); text-align: center; }
.big-empty b { display: block; font: 600 22px/1.2 var(--serif); color: var(--ink); margin-bottom: 4px; }

.p-wrap { max-width: 860px; display: grid; gap: var(--s5); }
.p-head h2 { font: 600 var(--t-name)/1.05 var(--serif); margin: 0 0 6px; letter-spacing: -.01em; }
.p-head .muted { font-size: var(--t-sm); }
.reach { display: flex; flex-wrap: wrap; gap: var(--s3); }
.reach a, .reach button.copy { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); text-decoration: none; font-size: var(--t-md); background: var(--canvas); color: var(--ink); cursor: pointer; }
.reach a.call { background: var(--leaf); border-color: var(--leaf); color: #fff; font-weight: 550; }
.reach a.call:hover { background: var(--leaf-hover); }
.reach svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.box { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.box h3 { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); margin: 0 0 var(--s2); }
.asked { white-space: pre-wrap; font-size: var(--t-md); line-height: 1.55; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); gap: var(--s2); }
.choice { display: grid; gap: 2px; text-align: left; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--canvas); cursor: pointer; font-size: var(--t-md); font-weight: 550; color: var(--ink); }
.choice small { font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); }
.choice:hover { border-color: var(--ink-2); }
.choice.good { border-color: #BFD09A; background: var(--leaf-tint); }
.choice.good:hover { border-color: var(--leaf); }
.choice.quiet { color: var(--ink-2); }
.subchoice { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); display: grid; gap: var(--s2); }
.status-line { font-size: var(--t-md); padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--side); border: 1px solid var(--line); }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-sm); }
.history li { display: flex; justify-content: space-between; gap: var(--s3); padding: 6px 0; border-bottom: 1px solid var(--line); }
.history li:last-child { border-bottom: 0; }
.history time { color: var(--ink-3); white-space: nowrap; }
@media (max-width: 760px) { .call-row { grid-template-columns: 1fr; gap: 4px; } .call-row .wait { text-align: left; } }

/* ── dispatch board ── */
.today .notice { margin-bottom: var(--s3); }
.dboard { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: var(--s4); align-items: start; }
.dcol { background: var(--side); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3); min-width: 0; }
.dcol-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.dcol-h b { font-size: var(--t-md); font-weight: 550; }
.dcol-h .n { font-size: var(--t-xs); color: var(--ink-3); min-width: 20px; text-align: center; border-radius: 10px; padding: 1px 6px; background: var(--canvas); border: 1px solid var(--line); }
.dcol-h .n.hot { color: var(--orange); border-color: var(--orange); }
.dcol > .hint { margin: 2px 0 var(--s3); }
.dlist { display: grid; gap: var(--s2); }
.dcard { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; cursor: pointer; text-align: left; }
.dcard:hover { border-color: var(--line-strong); }
.dcard.late { box-shadow: inset 3px 0 0 var(--orange); }
.dcard.due { box-shadow: inset 3px 0 0 var(--orange); }
.dcard.later { opacity: .72; }
.dtop { display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; }
.dtop b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dloc { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.dline { font-size: var(--t-sm); color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dwhy { font-size: var(--t-xs); color: var(--ink-3); margin: 4px 0 0; }
.dwhy.strong { color: var(--orange); font-weight: 500; }
.dtags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; align-items: center; }
.dtags .try { font-size: var(--t-xs); color: var(--ink-3); }
.dact { display: flex; gap: 6px; margin-top: 8px; }
.chip.ads { background: var(--gold-tint); color: var(--gold-ink); }
.ticks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.tick { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--canvas); font-size: var(--t-xs); color: var(--ink-2); cursor: pointer; }
.tick i { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid currentColor; }
.tick.due { border-color: var(--orange); color: var(--orange); }
.tick.done { background: var(--leaf-tint); border-color: transparent; color: var(--leaf); cursor: default; }
.tick.done i { background: var(--leaf); border-color: var(--leaf); }
.appt-title { font-weight: 550; }
@media (max-width: 1180px) { .dboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dboard { grid-template-columns: 1fr; } }

/* ── intro call hours ── */
.hours-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s4); }
.hrow { display: grid; grid-template-columns: 80px auto 20px auto; gap: var(--s2); align-items: center; padding: 4px 0; }
.hrow label { gap: 6px; }
.linkrow { display: grid; grid-template-columns: minmax(160px, 240px) 1fr auto; gap: var(--s3); align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.linkrow code { font-size: var(--t-xs); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .linkrow { grid-template-columns: 1fr auto; } .linkrow span { grid-column: 1 / -1; } }
.hours .opts { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); }
.hours .opts label { display: grid; gap: 4px; font-size: var(--t-xs); color: var(--ink-2); }