/* The staff app, redesign approved by Isaac on Nov 2, 2026. Black and true gold. Gold is the brand and the one main action
   on a screen; status always uses color, an icon and a word. Schibsted Grotesk for words, Geist Mono for times, phone
   numbers and counts. Both self-hosted. Light and dark, one token set per theme. */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono/geist-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono/geist-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  /* Light */
  --bg: #F6F5F1; --panel: #FFFFFF; --raised: #FBFAF7; --line: #E1DDD3; --line2: #ECE9E2;
  --text: #141413; --muted: #57534B; --faint: #6B675F;
  --gold: #D4AF37; --gold-text: #8A6A1F; --on-gold: #141413; --gold-soft: rgba(212, 175, 55, .16);
  --rail: #EFEDE7; --selected: #FBF5E2;
  --blue: #1F56C7; --blue-bg: #E8EFFD; --orange: #A84F06; --orange-bg: #FDF0E1; --green: #1B7A4B; --green-bg: #E4F4EA;
  --red: #B42318; --red-bg: #FDECEA; --teal: #0E6E74; --teal-bg: #E1F3F4; --violet: #5B3FC4; --violet-bg: #EEEAFD;
  --gray: #57534B; --gray-bg: #EFEDE8;
  --shadow: 0 1px 2px rgba(20, 20, 19, .05), 0 6px 20px rgba(20, 20, 19, .06);
  --scrim: rgba(11, 11, 12, .4);
  /* Panels 14 px, buttons 10 px, chips fully round. */
  --radius: 14px; --radius-btn: 10px; --radius-sm: 8px;
  --side-w: 232px; --top-h: 64px;
  --pad: 24px; --gap: 16px; --chair-min: 150px;
  /* Compact (desktop): rows 48 to 52 px, buttons 40 px. Comfortable (iPad): rows 60 to 64 px, buttons 44 px. */
  --row: 52px; --tap: 40px;
  /* Press 100 ms to 98%; list in and out 150 ms; a 1.6 s pulse only on a live call. All off under reduced motion. */
  --press: 100ms; --press-scale: .98; --speed: 150ms; --ease: ease;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The safe area (notch, home bar) and the real visible height on tablets (100dvh where supported). */
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
  --vh: 100vh;
  color-scheme: light;
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
@media (max-width: 1279px) { :root { --chair-min: 128px; } }
:root[data-density="comfortable"] { --row: 64px; --tap: 44px; }
:root[data-density="compact"] { --row: 52px; --tap: 40px; }
:root[data-theme="dark"] {
  --bg: #0B0B0C; --panel: #131315; --raised: #1A1A1D; --line: #2C2C31; --line2: #222226;
  --text: #F3F1EC; --muted: #A9A59D; --faint: #8A867E;
  --gold: #D4AF37; --gold-text: #D4AF37; --on-gold: #141413; --gold-soft: rgba(212, 175, 55, .12);
  --rail: #0E0E10; --selected: #1F1D17;
  --blue: #8DB4FF; --blue-bg: rgba(141, 180, 255, .12); --orange: #F2A65A; --orange-bg: rgba(242, 166, 90, .13);
  --green: #6FD3A0; --green-bg: rgba(111, 211, 160, .12); --red: #FF8A80; --red-bg: rgba(255, 138, 128, .13);
  --teal: #5ED0D6; --teal-bg: rgba(94, 208, 214, .12); --violet: #B9A6FF; --violet-bg: rgba(185, 166, 255, .12);
  --gray: #B5B1AA; --gray-bg: rgba(181, 177, 170, .10);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}
:root[data-motion="reduce"] { --speed: 0ms; --press: 0ms; --press-scale: 1; }
@media (prefers-reduced-motion: reduce) { :root { --speed: 0ms; --press: 0ms; --press-scale: 1; } }

* { box-sizing: border-box; }
/* An icon with no size of its own and no sizing rule where it sits stays text-sized (zero specificity: any rule wins). */
:where(svg[aria-hidden="true"]:not([width])) { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body { font: 14px/1.45 "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
/* Times and counts line up in columns. */
/* Tabular figures only where digits stack in a column and no colon appears; this face spaces a tabular colon wide (9 : 00). */
/* Geist Mono for times, phone numbers and counts, so columns line up. */
.mono, .timeh, .kpi b, .count, .chart-x, .when { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mono { font-size: .93em; letter-spacing: -.01em; }
.nowrap { white-space: nowrap; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--gold-text); }
a:hover { color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--faint); }
.boot { display: grid; place-items: center; height: var(--vh); color: var(--muted); }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; border-radius: 4px; }

/* Layout */
.shell { display: grid; grid-template-columns: calc(var(--side-w) + var(--safe-l)) 1fr; height: var(--vh); }
.side { background: var(--rail); border-right: 1px solid var(--line2); display: flex; flex-direction: column; min-height: 0; padding-left: var(--safe-l); padding-top: var(--safe-t); }
.brand { min-height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 22px; }
.brand .mark { width: 26px; height: 26px; flex: none; display: block; }
.brand b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.brand .role { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--on-gold); background: var(--gold); border-radius: 6px; padding: 1px 6px; }
.office { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 12px 6px; padding: 6px 10px; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--panel); }
.office .who { flex: 1; min-width: 0; }
.office svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.office b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.office .who span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.office select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.office.many:focus-within { outline: 2px solid var(--gold-text); outline-offset: 1px; }
.nav { overflow-y: auto; padding: 2px 12px 12px; flex: 1; }
.nav h6 { margin: 10px 10px 3px; font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.nav button { width: 100%; min-height: calc(var(--tap) - 6px); display: flex; align-items: center; gap: 10px; padding: 2px 10px; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-sm); text-align: left; font-weight: 500; cursor: pointer; transition: background var(--speed) var(--ease), transform var(--press) var(--ease); }
.nav button:hover { background: var(--selected); color: var(--text); }
.nav button:active { transform: scale(var(--press-scale)); }
.nav button.on { background: var(--selected); color: var(--text); font-weight: 600; }
.nav button svg { width: 18px; height: 18px; flex: none; color: currentColor; }
.nav button.on svg { color: var(--gold-text); }
.nav .count { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 500; min-width: 20px; text-align: center; padding: 0 7px; border-radius: 999px; background: var(--raised); color: var(--text); border: 1px solid var(--line); }
.nav .count.urgent { background: var(--red); color: var(--bg); }
.side-foot { border-top: 1px solid var(--line2); margin: 0 12px; padding: 12px 8px calc(12px + var(--safe-b)); font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.side-foot .me { flex: 1; min-width: 0; }
.side-foot .me > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .strong { color: var(--text); }
.icon-btn.bare { border: 0; background: transparent; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--raised); color: var(--text); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { min-height: calc(var(--top-h) + var(--safe-t)); display: flex; align-items: center; gap: 12px; padding: var(--safe-t) calc(var(--pad) + var(--safe-r)) 0 var(--pad); border-bottom: 1px solid var(--line2); background: var(--bg); }
.page-title { margin: 0 0 12px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pill { font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.top .spacer { flex: 1; }
.search { position: relative; }
.search input { width: 260px; padding: 7px 12px 7px 32px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--panel); min-height: var(--tap); }
.top-search { flex: 1 1 280px; max-width: 520px; }
.top-search input { width: 100%; padding-right: 64px; }
.kbd-hint { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; background: var(--panel); cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.search .results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-btn); box-shadow: var(--shadow); z-index: 30; max-height: 360px; overflow: auto; animation: enter var(--speed) var(--ease); }
.search .results button { display: flex; gap: 8px; align-items: baseline; width: 100%; min-height: var(--tap); text-align: left; border: 0; background: none; padding: 8px 12px; cursor: pointer; }
.search .results button:hover { background: var(--selected); }
.sarah { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 20px; min-height: var(--tap); }
.sarah .pref { font-weight: 650; }
.sarah .run { color: var(--muted); }
.sarah .run::before { content: "·"; margin-right: 8px; color: var(--faint); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; display: inline-block; }
.dot.off { background: var(--faint); }
.dot.live { background: var(--teal); animation: pulse 1.6s ease-in-out infinite; }
.content { flex: 1; overflow: auto; padding: var(--pad) calc(var(--pad) + var(--safe-r)) calc(var(--pad) + var(--safe-b)) var(--pad); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.screen { animation: enter var(--speed) var(--ease); max-width: 1680px; }

/* Building blocks */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); border: 1px solid var(--line); background: var(--raised); border-radius: var(--radius-btn); padding: 7px 14px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: transform var(--press) var(--ease), background var(--speed) var(--ease), opacity var(--speed); }
a.btn { color: var(--text); text-decoration: none; }
.btn:hover { background: var(--selected); color: var(--text); }
.btn:active { transform: scale(var(--press-scale)); }
.btn[disabled] { opacity: 1; color: var(--muted); background: transparent; border: 1px dashed var(--line); cursor: not-allowed; transform: none; }
/* The one gold button on a screen is .gold. A primary button elsewhere is a strong neutral, and the main action in a dialog is gold. */
.btn.primary { background: var(--raised); border-color: var(--muted); color: var(--text); font-weight: 700; }
.btn.gold, .modal footer .btn.primary, .auth .btn.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; padding: 7px 16px; }
.btn.gold:hover, .modal footer .btn.primary:hover, .auth .btn.primary:hover { background: var(--gold); filter: brightness(.95); }
.btn.gold[disabled], .modal footer .btn.primary[disabled], .auth .btn.primary[disabled] { background: transparent; border: 1px dashed var(--line); color: var(--muted); filter: none; }
.btn.quiet { background: transparent; color: var(--muted); }
.btn.primary:hover { background: var(--selected); }
.btn.danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn.danger:hover { background: var(--red-bg); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--selected); }
.btn.sm { padding: 4px 10px; font-size: 13px; min-height: calc(var(--tap) - 6px); border-radius: var(--radius-sm); }
.btn svg { width: 15px; height: 15px; }
.icon-btn { width: var(--tap); height: var(--tap); flex: none; display: grid; place-items: center; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; transition: transform var(--press) var(--ease), background var(--speed); }
.icon-btn:active { transform: scale(var(--press-scale)); }
.icon-btn svg { width: 17px; height: 17px; }

.card { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); }
.card > header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line2); }
.card > header h2 { font-size: 16px; margin: 0; font-weight: 700; }
.card > header small { color: var(--muted); font-size: 13px; }
.card > header .spacer { flex: 1; }
.card .body { padding: 16px; }
.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-main { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.strong { font-weight: 600; }
.hint { font-size: 13px; color: var(--muted); }
h3.section { font-size: 16px; margin: 4px 0 8px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
h3.section small { font-weight: 500; color: var(--muted); font-size: 13px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); }
/* One strip of figures: the number, then what it counts, aligned left, divided by hairlines (no separate cards). */
.kpi { padding: 12px 16px; cursor: default; border-left: 1px solid var(--line2); transition: background var(--speed); text-align: left; }
.kpi:first-child { border-left: 0; }
.kpi.click { cursor: pointer; }
.kpi.click:hover { background: var(--raised); }
.kpi b { display: block; font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.kpi span { font-size: 13px; color: var(--muted); }

.list { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; }
.item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--line2); transition: background var(--speed); animation: enter var(--speed) var(--ease) backwards; }
.item:first-child { border-top: 0; }
.item.click { cursor: pointer; }
.item.click:hover { background: var(--raised); }
.item.sel { background: var(--selected); }
.item.urgent { background: transparent; }
.item .when { font-size: 13px; color: var(--muted); min-width: 64px; padding-top: 2px; }
.item .who { font-weight: 600; }
.item .who small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.item .why { margin-top: 1px; }
.item .said { margin-top: 4px; font-size: 14px; color: var(--muted); max-width: 70ch; white-space: pre-line; }
.item .acts { display: flex; gap: 6px; align-items: center; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }

.tag { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin-right: 6px; vertical-align: 1px; background: var(--gray-bg); color: var(--gray); }
.tag.urgent, .tag.failed, .tag.missed_transfer, .tag.emergency, .tag.cancelled, .tag.no_show, .tag.suspended { background: var(--red-bg); color: var(--red); }
.tag.wait, .tag.requested, .tag.pending, .tag.not_sent, .tag.offered { background: var(--orange-bg); color: var(--orange); }
.tag.new { background: var(--blue-bg); color: var(--blue); }
.tag.ok, .tag.booked, .tag.confirmed, .tag.delivered, .tag.approved, .tag.completed, .tag.reviewed, .tag.transferred { background: var(--green-bg); color: var(--green); }
.tag.checked_in, .tag.live, .tag.received, .tag.message, .tag.info, .tag.demo { background: var(--blue-bg); color: var(--blue); }

table.t { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; }
table.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 9px 12px; height: 40px; border-bottom: 1px solid var(--line2); background: var(--panel); position: sticky; top: 0; }
table.t td { padding: 0 12px; height: var(--row); border-top: 1px solid var(--line2); font-size: 14px; }
table.t tr.click { cursor: pointer; transition: background var(--speed); }
table.t tr.click:hover td { background: var(--raised); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; min-height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--speed), transform var(--press) var(--ease); }
.chip:active { transform: scale(var(--press-scale)); }
.chip.on { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea, input.in, select.in { border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 8px 12px; background: var(--raised); width: 100%; min-height: var(--tap); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 0; border-color: var(--gold-text); }
.field .error, .inline-error { color: var(--red); font-size: 13px; font-weight: 600; }
.field textarea { min-height: 90px; resize: vertical; }
.switch { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--line); border: 0; cursor: pointer; transition: background var(--speed); flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--speed) var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.switch.on { background: var(--gold); }
.switch.on::after { transform: translateX(16px); background: var(--on-gold); }
.switch[disabled] { opacity: .5; cursor: not-allowed; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--rail); }
.seg button { border: 0; background: transparent; color: var(--muted); border-radius: 9px; padding: 0 12px; min-height: calc(var(--tap) - 8px); cursor: pointer; font-weight: 500; font-size: 14px; transition: background var(--speed); }
.seg button.on { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.banner { padding: 10px 14px; border-radius: var(--radius-btn); background: var(--orange-bg); color: var(--text); font-size: 13px; display: flex; gap: 10px; align-items: center; }
.banner.info { background: var(--raised); border: 1px dashed var(--line); color: var(--muted); }

/* Settings: a section list beside the form */
.settings { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.settings .toc { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
.settings .toc button { text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; color: var(--muted); transition: background var(--speed), color var(--speed); }
.settings .toc button:hover { background: var(--selected); color: var(--text); }
.settings .card { scroll-margin-top: 12px; }
@media (max-width: 960px) { .settings { grid-template-columns: 1fr; } .settings .toc { position: static; flex-direction: row; flex-wrap: wrap; } }

/* Live call (design option 2) */
.live-panel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; animation: enter var(--speed) var(--ease); }
.live-panel .call { padding: 18px 20px; border-right: 1px solid var(--line); min-width: 0; }
.live-panel .caller { font-size: 20px; font-weight: 650; }
.live-panel .caller small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.lines { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; }
.line { display: grid; grid-template-columns: 70px 1fr; gap: 10px; font-size: 14.5px; animation: enter var(--speed) var(--ease); }
.line .s { color: var(--faint); font-weight: 600; }
.line.by-sarah .s { color: var(--gold-text); }
.knows { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.kv span { display: block; color: var(--muted); font-size: 12.5px; }
.bar { height: 6px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--teal); }

/* Schedule grid */
.sched { display: grid; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); overflow: auto; max-height: calc(var(--vh) - 300px - var(--safe-b)); position: relative; -webkit-overflow-scrolling: touch; }
.sched .colh { position: sticky; top: 0; z-index: 3; background: var(--raised); border-bottom: 1px solid var(--line); padding: 8px 10px; font-weight: 600; font-size: 13px; }
.sched .timeh { position: sticky; left: 0; z-index: 2; background: var(--panel); font-size: 12px; color: var(--muted); text-align: right; padding: 0 8px; border-right: 1px solid var(--line); }
.sched .cell { border-top: 1px solid var(--line2); border-left: 1px solid var(--line2); cursor: pointer; transition: background var(--speed); }
.sched .cell:hover { background: var(--selected); }
.sched .cell.closed { background: repeating-linear-gradient(135deg, var(--gray-bg) 0 6px, transparent 6px 12px); cursor: not-allowed; }
.appt { position: absolute; border-radius: var(--radius-sm); padding: 4px 8px; font-size: 13px; line-height: 1.3; overflow: hidden; cursor: pointer; border: 1px solid transparent; background: color-mix(in srgb, currentColor 16%, var(--panel)); transition: transform var(--press) var(--ease); animation: enter var(--speed) var(--ease) backwards; }
.appt:hover { z-index: 5; }
.appt:active { transform: scale(var(--press-scale)); }
.appt b { display: block; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt span { color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 3); line-clamp: var(--lines, 3); overflow: hidden; }
.appt.tiny { padding-top: 1px; padding-bottom: 1px; }
.appt.tiny span { display: none; }
.appt.cancelled, .appt.no_show { opacity: .45; text-decoration: line-through; }
.appt.requested { background: var(--orange-bg); border: 1px dashed var(--orange); }
.blockbox.lunch { background: repeating-linear-gradient(135deg, var(--gray-bg) 0 6px, transparent 6px 12px); border: 1px solid var(--line2); color: var(--muted); border-radius: var(--radius-sm); }
.blockbox { position: absolute; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--red-bg), var(--red-bg) 6px, transparent 6px, transparent 12px); border: 1px dashed var(--red); font-size: 12px; color: var(--red); padding: 4px 6px; pointer-events: none; }

/* Inbox */
.inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(var(--vh) - var(--top-h) - 110px - var(--pad) * 2 - var(--safe-t) - var(--safe-b)); min-height: 420px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; }
.inbox .threads { border-right: 1px solid var(--line); overflow: auto; }
.inbox .convo { display: flex; flex-direction: column; min-height: 0; }
.msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 70%; padding: 8px 12px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line2); animation: pop var(--speed) var(--ease); }
.msg.out { align-self: flex-end; background: var(--selected); border-color: transparent; }
.msg small { display: block; font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.composer { border-top: 1px solid var(--line); padding: 10px; display: flex; gap: 8px; }
.composer textarea { flex: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; resize: none; height: 44px; background: var(--panel); }
.composer select { flex: 1; min-width: 0; height: 44px; }
.composer .btn { flex: none; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); display: inline-block; }

/* Overlays */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; animation: fade var(--speed) var(--ease); }
.modal { position: fixed; z-index: 41; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(var(--vh) - 64px - var(--safe-t) - var(--safe-b)); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); animation: modal var(--speed) var(--ease); }
.modal header { padding: 16px 20px; border-bottom: 1px solid var(--line2); display: flex; align-items: center; }
.modal header h2 { margin: 0; font-size: 17px; flex: 1; }
.modal .body { padding: 16px 20px; }
.modal footer { padding: 12px 20px; border-top: 1px solid var(--line2); display: flex; justify-content: flex-end; gap: 8px; }
.drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); padding: var(--safe-t) var(--safe-r) var(--safe-b) 0; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: slide var(--speed) var(--ease); }
.drawer header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.drawer header h2 { margin: 0; font-size: 18px; flex: 1; }
.drawer .body { padding: 16px 20px; overflow: auto; flex: 1; }
.quote { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 10px 12px; white-space: pre-wrap; font-size: 14px; }
/* Never more than two, off to the side of the work, and clicks go through them: a toast never covers a Save button. */
.toasts { position: fixed; bottom: calc(16px + var(--safe-b)); left: calc(var(--side-w) + var(--safe-l) + 24px); display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 820px) { .toasts { left: 16px; } }
.toast { background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--radius-btn); font-size: 13px; box-shadow: var(--shadow); animation: toast var(--speed) var(--ease); }
.toast.bad { background: var(--red); color: var(--bg); }

/* Charts */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; }
.chart .b { flex: 1; background: var(--blue); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.chart .b.after { background: var(--orange); }
.chart-x { display: flex; gap: 6px; font-size: 11px; color: var(--faint); }
.chart-x span { flex: 1; text-align: center; }
.hbar { display: grid; grid-template-columns: 150px 1fr 40px; gap: 10px; align-items: center; margin: 6px 0; font-size: 14px; }
.hbar .track { height: 10px; border-radius: 5px; background: var(--line2); overflow: hidden; }
.hbar .track i { display: block; height: 100%; background: var(--teal); border-radius: 5px; }

/* Sign-in */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth .card { width: min(420px, 100%); padding: 28px; box-shadow: var(--shadow); animation: modal var(--speed) var(--ease); }
.auth h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.qr { background: #fff; padding: 10px; border-radius: 8px; display: inline-block; }
.qr img { display: block; width: 180px; height: 180px; image-rendering: pixelated; }
.code { font-family: var(--mono); letter-spacing: .08em; font-size: 14px; word-break: break-all; }

@keyframes enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal { from { opacity: 0; transform: translate(-50%, -49%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes slide { from { transform: translateX(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* A week being replaced by the next one: it stays on screen and dims only if the new week is slow to arrive, so a
   quick answer never flickers. It snaps back the moment the new week is here. */
.stale { opacity: .55; transition: opacity 120ms ease 300ms; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }

@media (max-width: 1100px) { .cols-main, .cols-3 { grid-template-columns: 1fr; } .live-panel { grid-template-columns: 1fr; } .live-panel .call { border-right: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  /* The menu: a labelled panel over the page, opened by the Menu button (shell.js: Escape closes it, focus goes back). */
  .side { position: fixed; z-index: 45; inset: 0 auto 0 0; width: min(calc(var(--side-w) + var(--safe-l)), 86vw); transform: translateX(-100%); visibility: hidden; transition: transform var(--speed) var(--ease), visibility 0s linear var(--speed); }
  .side.open { transform: none; visibility: visible; box-shadow: var(--shadow); transition: transform var(--speed) var(--ease), visibility 0s; }
  .shell > .nav-scrim { display: block; position: fixed; inset: 0; z-index: 44; background: var(--scrim); animation: fade var(--speed) var(--ease); }
  .cols-2 { grid-template-columns: 1fr; }
  .inbox { grid-template-columns: 1fr; }
}
.menu-btn { display: none; }
.nav-scrim { display: none; }
@media (max-width: 600px) { .top .sarah { display: none; } .top .pill { display: none; } .page-title { font-size: 22px; } :root { --pad: 14px; } }
@media (max-width: 820px) { .menu-btn { display: grid; } }

/* ---------- Schedule and staff handoff (work order verra-visual-20261029) ---------- */
/* The schedule is the main surface; the panel beside it holds the selected visit, request or task, else the handoff
   list. Tablets keep both side by side down to 960 px wide; narrower, the panel follows the schedule. */
.sched-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap); align-items: start; }
@media (max-width: 1279px) { .sched-layout { grid-template-columns: minmax(0, 1fr) 312px; } }
@media (max-width: 959px) { .sched-layout { grid-template-columns: 1fr; } .ctx { position: static; max-height: none; } }
.ctx { position: sticky; top: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); max-height: calc(var(--vh) - var(--top-h) - var(--pad) * 2 - var(--safe-t) - var(--safe-b)); display: flex; flex-direction: column; min-height: 0; }
.ctx > header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line2); }
.ctx > header h2 { margin: 0; font-size: 15px; font-weight: 700; flex: 1; }
.ctx .ctx-body { overflow: auto; padding: 4px 0; flex: 1; min-height: 0; }
.ctx .kvs { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; padding: 12px 14px; font-size: 14px; }
.ctx .kvs dt { color: var(--muted); }
.ctx .kvs dd { margin: 0; }
.ctx .acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
/* A handoff row: what it is, who it is for, who owns it, its state, and the next thing to do. */
.handoff { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 14px; border-top: 1px solid var(--line2); }
.handoff:first-child { border-top: 0; }
.handoff .what { font-weight: 650; }
.handoff .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); align-items: center; }
.handoff .owner[data-owner="none"] { color: var(--orange); font-weight: 650; }
.handoff .next { align-self: start; }
.handoff.sel { background: var(--selected); }
/* States that must never be confused: a confirmed booking, a saved unconfirmed request, a notification not sent,
   and a save that failed. Shape and words differ, not only color. */
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.st.confirmed { background: var(--green-bg); color: var(--green); }
.st.confirmed::before { background: var(--green); }
.st.unconfirmed { background: var(--orange-bg); color: var(--orange); }
.st.unconfirmed::before { background: transparent; border: 1.5px dashed var(--orange); }
.st.notsent { background: var(--blue-bg); color: var(--blue); }
.st.notsent::before { background: transparent; border: 1.5px solid var(--blue); border-radius: 1px; }
.st.failed { background: var(--red-bg); color: var(--red); }
.st.failed::before { background: var(--red); border-radius: 1px; transform: rotate(45deg); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.appt.requested { background: var(--orange-bg); border: 1px dashed var(--orange); }
.appt.sel { box-shadow: 0 0 0 2px var(--gold-text); z-index: 6; }
.appt:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 1px; }
.move { border-top: 1px solid var(--line2); padding: 12px 14px; }
.move .grid { gap: 8px 10px; }
.sched-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sched-toolbar .title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; min-width: 0; }
@media (max-width: 959px) { .sched-toolbar .title { flex-basis: 100%; order: -1; } }
/* A button that reads as text (a task title, a patient's name). */
.linkish { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: currentColor; }
.linkish.small { font-size: 13px; color: var(--gold-text); font-weight: 600; }
/* Fingers: small buttons, chips and segments are full touch size too (after their own rules, so this wins). */
@media (pointer: coarse), (any-pointer: coarse) { .btn.sm, .chip, .seg button { min-height: var(--tap); } .chip { display: inline-flex; align-items: center; } }

/* ---------- Status chips: a fixed set with an icon and a word. Never gold. ---------- */
.schip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.schip svg { width: 12px; height: 12px; flex: none; }
.schip.blue { color: var(--blue); background: var(--blue-bg); }
.schip.violet { color: var(--violet); background: var(--violet-bg); }
.schip.orange { color: var(--orange); background: var(--orange-bg); }
.schip.teal { color: var(--teal); background: var(--teal-bg); }
.schip.green { color: var(--green); background: var(--green-bg); }
.schip.gray { color: var(--gray); background: var(--gray-bg); }
.schip.red { color: var(--red); background: var(--red-bg); }

/* ---------- Today ---------- */
.strip { display: flex; flex-wrap: wrap; align-items: center; padding: 0 calc(var(--pad) + var(--safe-r)) 0 var(--pad); min-height: 48px; border-bottom: 1px solid var(--line2); background: var(--panel); font-size: 13px; }
.strip .cell { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; white-space: nowrap; border-left: 1px solid var(--line); }
.strip .cell:first-child { padding-left: 0; border-left: 0; }
.strip b { font-weight: 600; }
.t-text { color: var(--text); } .t-red { color: var(--red); font-weight: 600; } .t-orange { color: var(--orange); font-weight: 600; } .t-teal { color: var(--teal); font-weight: 600; }
.today-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: -8px; }
.today-head .sub { margin: 0; flex: 1 1 320px; }
.health { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: var(--radius-btn); background: var(--panel); }
.health .ico { display: inline-flex; flex: none; }
.health.green .ico { color: var(--green); } .health.red .ico { color: var(--red); } .health.orange .ico { color: var(--orange); }
.health .what { flex: 1 1 320px; min-width: 0; }
.health .work { flex: 0 1 auto; padding-left: 12px; border-left: 1px solid var(--line); color: var(--text); font-weight: 600; }
.live-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--teal-bg); color: var(--text); text-decoration: none; transition: transform var(--press) var(--ease); }
.live-banner:active { transform: scale(var(--press-scale)); }
.live-banner .dot.live { width: 10px; height: 10px; }
.views { margin-bottom: 0; }
.chip .mono { color: inherit; opacity: .75; }
.queue-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.queue { min-width: 0; overflow: hidden; }
.queue > header { flex-wrap: wrap; }
.qrow { display: grid; grid-template-columns: minmax(120px, 140px) minmax(0, 1.3fr) minmax(0, 1fr) 56px 76px 96px; gap: 12px; align-items: center; min-height: var(--row); padding: 0 16px; border-top: 1px solid var(--line2); cursor: pointer; transition: background var(--speed), transform var(--press) var(--ease); animation: enter var(--speed) var(--ease) backwards; }
.qrow:hover { background: var(--raised); }
.qrow.on { background: var(--selected); }
.qrow:active:not(.qhead) { transform: scale(var(--press-scale)); }
.qrow.qhead { min-height: 40px; border-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); cursor: default; background: transparent; animation: none; }
.qrow .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .row-open { all: unset; cursor: pointer; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: inherit; color: inherit; }
.qrow .row-open:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; border-radius: 4px; }
.qrow .clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .via { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.qcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 12px; }
.qcard { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line2); border-radius: 12px; cursor: pointer; background: var(--raised); transition: transform var(--press) var(--ease); }
.qcard.on { background: var(--selected); border-color: var(--line); }
.qcard:active { transform: scale(var(--press-scale)); }
.qdetail { padding: 20px; min-width: 0; }
.detail { display: flex; flex-direction: column; gap: 14px; }
.detail .top-row { align-items: flex-start; gap: 12px; }
.detail .grow { flex: 1; min-width: 0; }
.detail h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.detail .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail .avatar { width: 44px; height: 44px; font-size: 14px; }
.detail .assign select { width: auto; flex: 1; }
.claimed-pill { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: var(--radius-btn); background: var(--violet-bg); color: var(--violet); font-weight: 600; }
.fields { margin: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 12px; border-top: 1px solid var(--line2); padding-top: 14px; }
.fields dt { color: var(--muted); }
.fields dd { margin: 0; min-width: 0; }
.dash { color: var(--muted); }
.locked-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radius-btn); border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.locked-row svg { width: 16px; height: 16px; flex: none; }
.label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.log { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line2); }
.log:last-child { border-bottom: 0; }
.log .mono { font-size: 12px; }
.detail .said { font-size: 13px; color: var(--muted); }
@media (max-width: 1180px) { .queue-layout { grid-template-columns: minmax(0, 1fr) 340px; } .qrow { grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) minmax(0, 1fr) 70px 90px; } .qrow > :nth-child(4) { display: none; } }
@media (max-width: 959px) { .queue-layout { grid-template-columns: minmax(0, 1fr); } .strip .cell { border-left: 0; padding-left: 0; } }

/* ---------- Who holds a request, who else is looking ---------- */
.presence { display: flex; align-items: center; }
.peer { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; background: var(--violet-bg); color: var(--violet); box-shadow: 0 0 0 1px var(--violet); border: 2px solid var(--bg); font-size: 11px; font-weight: 700; }
.presence .peer + .peer { margin-left: -6px; }
.viewer { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; color: var(--violet); border: 1px solid var(--violet); }
.held { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-btn); background: var(--violet-bg); font-size: 13px; }
.held .grow { flex: 1 1 160px; min-width: 0; }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px var(--pad); background: var(--violet-bg); border-bottom: 1px solid var(--line2); font-size: 13px; }

/* ---------- Inbox ---------- */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--rail); }
.tabs button { min-height: calc(var(--tap) - 4px); padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 500; cursor: pointer; }
.tabs button.on { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.tabs .mono { font-size: 12px; }
.inbox3 { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr) minmax(250px, 1fr); gap: 16px; align-items: start; }
.pane { overflow: hidden; }
.pane h3.section { flex-wrap: wrap; margin: 0; padding: 14px; border-bottom: 1px solid var(--line2); }
.pane > div > .item:first-child { border-top: 0; }
.tlist { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; cursor: pointer; }
.tlist:hover { background: var(--raised); }
.tlist .clip { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlist [data-owner="none"] { color: var(--orange); font-weight: 600; }
.card.pad { padding: 16px; }
.card.pad p { margin: 4px 0 0; }
.progress-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.progress-steps li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.progress-steps li span { height: 4px; border-radius: 999px; background: var(--line); }
.progress-steps li.on { font-weight: 600; }
.progress-steps li.blue { color: var(--blue); } .progress-steps li.blue span { background: var(--blue); }
.progress-steps li.violet { color: var(--violet); } .progress-steps li.violet span { background: var(--violet); }
.progress-steps li.teal { color: var(--teal); } .progress-steps li.teal span { background: var(--teal); }
.progress-steps li.green { color: var(--green); } .progress-steps li.green span { background: var(--green); }
.progress-steps li.gray { color: var(--gray); } .progress-steps li.gray span { background: var(--gray); }
.notes p { margin: 0 0 8px; }
.notes textarea { display: block; width: 100%; min-height: 64px; margin: 6px 0 8px; resize: none; color: var(--muted); }
@media (max-width: 1279px) { .inbox3 { grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); } .inbox3 > aside { grid-column: 1 / -1; } }
@media (max-width: 899px) { .inbox3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Live call ---------- */
.h2 { margin: 0; font-size: 16px; font-weight: 700; }
.h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.live-screen { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.live-head .grow { flex: 1 1 280px; min-width: 0; }
.live-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--teal-bg); color: var(--teal); font-weight: 600; font-size: 13px; }
.live-chip.ring { background: var(--red-bg); color: var(--red); }
.live-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cardrow { display: grid; grid-template-columns: 22px 110px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; border-top: 1px solid var(--line2); }
.cardrow:first-child { border-top: 0; }
.tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--muted); }
.tick.on { background: var(--green-bg); color: var(--green); }
.tight { border-top: 0; padding-top: 0; margin-bottom: 10px; gap: 6px 10px; grid-template-columns: 96px minmax(0, 1fr); }
.statline { padding: 5px 0; border-top: 1px solid var(--line2); }
.card.pad .log { grid-template-columns: 62px minmax(0, 1fr); }
@media (max-width: 1279px) { .live-layout { grid-template-columns: minmax(0, 1fr); } .live-screen { grid-template-columns: minmax(0, 1fr) 260px; } }
@media (max-width: 899px) { .live-screen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Schedule ---------- */
.open-slot { position: absolute; border: 1.5px dashed var(--gold); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 12px; color: var(--gold-text); pointer-events: none; overflow: hidden; }
.open-slot b { font-weight: 600; }
.colh .who { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-hint { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--line2); }
.open-today { border-top: 1px solid var(--line2); padding: 12px 14px; }
.open-today .log { grid-template-columns: 76px minmax(0, 1fr); }

/* ---------- Patients ---------- */
.patients-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.title20 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
table.t tr.on td { background: var(--selected); }
table.t tr:first-child td { border-top: 0; }
.patient-side .btn { flex: 1 1 auto; }
@media (max-width: 1100px) { .patients-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reports ---------- */
.grow { flex: 1 1 280px; min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); }
.tile.click { cursor: pointer; transition: transform var(--press) var(--ease); }
.tile.click:active { transform: scale(var(--press-scale)); }
.tile b { font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.tile b small { font-size: 14px; color: var(--muted); letter-spacing: 0; }
.src { font-size: 12px; color: var(--faint); margin: 0; }
.reports-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
.key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.key i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.key i.blue { background: var(--blue); } .key i.orange { background: var(--orange); }
.hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; align-items: end; height: 180px; margin-top: 14px; border-bottom: 1px solid var(--line2); }
.hours .col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 1px; }
.hours i { display: block; min-height: 2px; }
.hours i:first-child { border-radius: 4px 4px 0 0; }
.hours i.in { background: var(--blue); } .hours i.after { background: var(--orange); }
.hours-x { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; margin: 6px 0 10px; font-size: 10px; color: var(--faint); text-align: center; }
.bar i.green { background: var(--green); } .bar i.teal { background: var(--teal); } .bar i.blue { background: var(--blue); } .bar i.gray { background: var(--gray); } .bar i.orange { background: var(--orange); }
.reports .bar { height: 8px; margin-top: 4px; }
@media (max-width: 1100px) { .reports-two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Get started ---------- */
.setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.setup-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.setup-bar i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.step > header { border-bottom: 0; min-height: 56px; padding: 8px 16px; }
.step > header h2 { font-size: 14px; font-weight: 600; }
.step.current > header h2, .step.phone > header h2 { font-size: 17px; font-weight: 700; }
.step .grow { display: block; flex: 1; min-width: 0; }
.step .grow small { display: block; }
.step .body { border-top: 1px solid var(--line2); }
.step.current { border: 1.5px solid var(--gold); }
.num { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 500; }
.num svg { width: 14px; height: 14px; }
.num.done { background: var(--green-bg); color: var(--green); border-color: transparent; }
.num.now { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.step fieldset { border: 0; margin: 0; padding: 0; }
.step legend { margin-bottom: 8px; padding: 0; }
.carriers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.carrier { min-height: 48px; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--panel); font-weight: 600; cursor: pointer; transition: transform var(--press) var(--ease); }
.carrier:active { transform: scale(var(--press-scale)); }
.carrier.on { border: 1.5px solid var(--gold); background: var(--gold-soft); }
.whenrow { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; margin-top: 4px; border-radius: var(--radius-btn); background: var(--raised); cursor: pointer; }
.whenrow input { width: 18px; height: 18px; accent-color: #D4AF37; flex: none; }
.forward { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line2); }
.forward .grow > * { display: block; }
.forward .big { font-size: 22px; }
.gate { display: flex; align-items: center; gap: 10px; font-size: 14px; }
@media (max-width: 1100px) { .setup-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Admin: offices ---------- */
.admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.otable { overflow-x: auto; }
.orow { display: grid; grid-template-columns: minmax(170px, 1.5fr) 110px 56px 56px 62px 44px 66px 50px; gap: 10px; align-items: center; min-height: 56px; padding: 0 16px; border-top: 1px solid var(--line2); cursor: pointer; font-size: 13px; transition: background var(--speed), transform var(--press) var(--ease); }
.orow:hover { background: var(--raised); }
.orow.on { background: var(--selected); }
.orow.ohead { min-height: 40px; border-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); cursor: default; background: transparent; }
.office-name { display: flex; flex-direction: column; min-width: 0; }
.office-name > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofoot { padding: 10px 16px; border-top: 1px solid var(--line2); }
.chip[disabled] { color: var(--muted); border-style: dashed; cursor: not-allowed; }
@media (max-width: 1180px) { .admin-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Command menu ---------- */
.command { position: fixed; z-index: 41; top: 12vh; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; animation: fade var(--speed) var(--ease); }
.cmd-input { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line2); color: var(--muted); }
.cmd-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; }
.command kbd { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.cmd-rows { overflow: auto; padding: 8px; }
.cmd-group { padding: 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cmd-row { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer; }
.cmd-row .grow { flex: 1; min-width: 0; }
.cmd-row .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cmd-row.on { background: var(--selected); font-weight: 600; }
.cmd-note { padding: 10px; }

/* ---------- QA ---------- */
button.kpi { background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-radius: var(--radius-btn); font: inherit; }
button.kpi.on { background: var(--selected); }
table.t td.mono { white-space: nowrap; }
.patients-layout > div:first-child { overflow-x: auto; }