/* =============================================================================================
   Mist (27 Oct 2026), the Luxe Reception Hub. Linked LAST, over the Desk's own sheets.
   After the Neka health dashboard Eli chose: a cream field, a misty object, thin airy numbers,
   photographic colour washes for the tiles, hairlines, the lime dot for live / now, almost no
   chrome. Readable first: every text colour on a wash was measured against the real pixels.

   ⚠ THE CALL BAR (#dock) KEEPS ITS GEOMETRY. Nothing in here changes a font, size, weight,
   padding, margin, border width, gap or display inside #dock, #dk-pad or the status menu: only
   colours, corner radius and shadows. The softphone is live; its controls must stay exactly where
   the receptionist's hands know them. Inter is applied to the regions OUTSIDE the bar only.

   Never: glass, blur, CSS gradients (the washes are real images), icon chips, pills, glow,
   decorative strokes. No em or en dashes in anything added. Motion: 200 ms ease-out only.
   ============================================================================================= */

:root {
  --m-cream: #F3F1EC; --m-cream-2: #EBE8E1; --m-paper: #FDFCF9;
  --m-line: rgba(30, 31, 26, .12); --m-line-2: rgba(30, 31, 26, .2); --m-field: #8E8F89;
  --m-hover: rgba(30, 31, 26, .05);
  --m-ink: #1E1F1A; --m-ink-2: #4E4F48; --m-mute: #63645D;
  --m-forest: #1B4D47; --m-forest-2: #23605A; --m-link: #1B4D47;
  --m-lime: #D7F43A; --m-lime-ring: rgba(157, 184, 0, .35);
  --m-good: #1C6B2E; --m-warn: #8A5A00; --m-bad: #A62A1E; --m-vm: #5B3FA8;
  --m-good-t: #E3EEE3; --m-warn-t: #F4E8C9; --m-bad-t: #F7E3DF; --m-info-t: #E6E9EC;
  --m-on-wash: #1E1F1A; --m-on-forest: #FFFFFF;
  --m-amj: #1B4D47; --m-amj-t: #E1EBE6; --m-wet: #7A3E5C; --m-wet-t: #F2E5EB;
  --m-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='1.5' cy='1.5' r='.9' fill='%231E1F1A' fill-opacity='.07'/%3E%3C/svg%3E");
  --pjs: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --inter: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --w-forest: url("mist/wash-forest-1080.webp?v=20261027mist");
  --w-ochre: url("mist/wash-ochre-1080.webp?v=20261027mist");
  --w-sage: url("mist/wash-sage-1080.webp?v=20261027mist");
  --w-peach: url("mist/wash-peach-1080.webp?v=20261027mist");
  --w-slate: url("mist/wash-slate-720.webp?v=20261027mist");
  --w-coral: url("mist/wash-coral-slate-1080.webp?v=20261027mist");
  --w-obj: url("mist/obj-telephone-1200.webp?v=20261027mist");
  --w-obj-dark: url("mist/obj-telephone-dark-1200.webp?v=20261027mist");

  /* the hub's own tokens, remapped so every existing rule picks up the Mist palette */
  --canvas: var(--m-cream); --canvas-2: var(--m-cream-2); --panel: var(--m-paper); --panel-2: var(--m-paper);
  --line: var(--m-line); --line-2: var(--m-line-2); --ink: var(--m-ink); --ink-dim: var(--m-ink-2);
  --mute: var(--m-mute); --faint: rgba(30, 31, 26, .24);
  --glass: rgba(30, 31, 26, .035); --glass-2: rgba(30, 31, 26, .06);
  --teal: var(--m-forest); --teal-hi: var(--m-forest); --teal-deep: var(--m-forest); --teal-soft: rgba(27, 77, 71, .08);
  --accent: var(--m-forest); --accent-hi: var(--m-forest); --accent-soft: rgba(27, 77, 71, .1);
  --green-900: #173F3A; --green-700: var(--m-forest); --green-500: #2E6E64; --green-300: #8DB2A8; --green-100: #E1EBE6;
  --green-soft: rgba(27, 77, 71, .08);
  --gold-soft: var(--m-warn-t); --gold-ink: var(--m-warn);
  --good-soft: var(--m-good-t); --warn-soft: var(--m-warn-t); --bad-soft: var(--m-bad-t); --info-soft: var(--m-info-t);
  --bg-page: var(--m-cream); --bg-card: var(--m-paper); --bg-soft: var(--m-cream-2); --bg-hover: var(--m-hover);
  --hero-grad: none; --canvas-glow: none; --sh: none; --sh-pop: none; --sh-sm: none; --sh-md: none;
  --gd-mute: var(--m-mute);
  color-scheme: light;
}
html[data-theme="dark"] {
  --m-cream: #141511; --m-cream-2: #22231E; --m-paper: #1B1C17;
  --m-line: rgba(242, 241, 236, .12); --m-line-2: rgba(242, 241, 236, .22); --m-field: rgba(242, 241, 236, .42);
  --m-hover: rgba(242, 241, 236, .06);
  --m-ink: #F2F1EC; --m-ink-2: #CFCEC6; --m-mute: #A9A9A1;
  --m-forest: #2C6B60; --m-forest-2: #357A6E; --m-link: #93CBBE;
  --m-good: #86CF96; --m-warn: #E6B657; --m-bad: #F29A8E; --m-vm: #C3B1F2;
  --m-good-t: #1D2E21; --m-warn-t: #352C17; --m-bad-t: #3A1F1B; --m-info-t: #23262A;
  --m-amj: #93CBBE; --m-amj-t: #1C2C29; --m-wet: #E7AFCB; --m-wet-t: #33222B;
  --m-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='1.5' cy='1.5' r='.9' fill='%23F2F1EC' fill-opacity='.06'/%3E%3C/svg%3E");
  --faint: rgba(242, 241, 236, .26); --glass: rgba(242, 241, 236, .04); --glass-2: rgba(242, 241, 236, .07);
  --teal-soft: rgba(147, 203, 190, .1); --accent-soft: rgba(147, 203, 190, .14); --green-soft: rgba(147, 203, 190, .1);
  --green-900: #CFE6DF; --green-300: #5E8F84; --green-100: #1C2C29;
  color-scheme: dark;
}

/* -- ground and type ----------------------------------------------------------------------- */
html, body, body.desk, .dk-act-page { background: var(--m-cream); }
body { color: var(--m-ink); background-attachment: scroll; }
.dk-side, .dk-view, .dk-panel, .gd, .gd-new, .gd-pop, .notepad, .auth-body { font-family: var(--inter); letter-spacing: 0; }
a { color: var(--m-link); }
:focus-visible { outline: 2px solid var(--m-ink); outline-offset: 2px; }
::selection { background: rgba(215, 244, 58, .55); color: #1E1F1A; }
*::-webkit-scrollbar-thumb { background: var(--m-line-2); border-color: var(--m-cream); }
body.desk { --dk-bg: var(--m-cream); --dk-card: var(--m-paper); --dk-soft: var(--m-cream-2); --dk-hover: var(--m-hover);
  --dk-line: var(--m-line); --dk-line-2: var(--m-line-2); --dk-mute: var(--m-mute); --dk-amber: var(--m-warn);
  --amj: var(--m-amj); --amj-soft: var(--m-amj-t); --wet: var(--m-wet); --wet-soft: var(--m-wet-t);
  --vm: var(--m-vm); --vm-soft: var(--m-info-t); }

/* -- buttons: forest solid, square-ish, no gradient, no shadow (sizes untouched) -------------- */
.btn { background: var(--m-forest); color: #fff; box-shadow: none; border-radius: 6px;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out; }
.btn:hover { filter: none; background: var(--m-forest-2); }
.btn.secondary { background: var(--m-paper); color: var(--m-ink); border-color: var(--m-line-2); }
.btn.secondary:hover { background: var(--m-cream-2); border-color: var(--m-line-2); }
.btn.ghost { background: transparent; color: var(--m-ink-2); border-color: var(--m-line-2); }
.btn.ghost:hover { background: var(--m-hover); }
.btn.danger, .btn.danger:hover { background: #B42318; color: #fff; }
.btn.danger:hover { background: #9E1F15; }
.btn.sm { border-radius: 5px; }
.btn[disabled] { opacity: .5; }

/* -- form fields --------------------------------------------------------------------------- */
input[type=text], input[type=email], input[type=search], input[type=tel], input[type=time], select, textarea {
  background-color: var(--m-paper); color: var(--m-ink); border-color: var(--m-field); border-radius: 6px; }
input::placeholder, textarea::placeholder { color: var(--m-mute); }
input:focus, select:focus, textarea:focus { border-color: var(--m-ink); box-shadow: 0 0 0 1px var(--m-ink); }
option { background: var(--m-paper); color: var(--m-ink); }
html[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* =============================================================================================
   SIDEBAR: a cream rail. Square tabs; the current one is a paper tile with the lime dot.
   ============================================================================================= */
.dk-side.sidebar { background: var(--m-cream); border-right: 1px solid var(--m-line); }
.dk-logo { border-radius: 4px; background: #FDFCF9; border-color: var(--m-line-2); }
.dk-brand-t { font-family: var(--pjs); font-weight: 500; font-size: 15px; letter-spacing: -.01em; color: var(--m-ink); }
.dk-brand-t small { font-family: var(--inter); font-weight: 500; font-size: 12px; color: var(--m-mute); }
.dk-search input { background: var(--m-paper); border-color: var(--m-field); border-radius: 6px; font-size: 14px; }
.dk-nav .nav-item { font-size: 14.5px; font-weight: 500; color: var(--m-ink-2); border-radius: 6px; position: relative;
  transition: background-color .2s ease-out, color .2s ease-out; }
.dk-nav .nav-item:hover { background: var(--m-hover); color: var(--m-ink); }
.dk-nav .nav-item.active { background: var(--m-paper); color: var(--m-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--m-line); }
.dk-nav .nav-item.active::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--m-lime);
  box-shadow: 0 0 0 3px var(--m-lime-ring); margin-left: 10px; flex: none; }
.dk-nav-low { border-top-color: var(--m-line); }
.dk-badge { background: transparent; color: var(--m-ink); font-size: 13px; font-weight: 600; padding: 0; min-width: 0; border-radius: 0; }
.dk-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--m-ink-2); margin-right: 5px; vertical-align: 2px; }
.dk-badge.late { background: transparent; color: var(--m-bad); }
.dk-badge.late::before { background: var(--m-bad); }
.dk-user { border-top: 1px solid var(--m-line); margin-top: 8px; padding: 12px 8px 0; }
.dk-user-n { font-weight: 600; font-size: 14px; }
.dk-link { color: var(--m-link); font-weight: 600; font-size: 13.5px; }

/* the Light / Dark / System switch (sidebar foot, outside #view) */
.mist-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 10px 4px 0; padding: 2px;
  border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-cream-2); }
.mist-theme-b { font: 500 13px/1 var(--inter); color: var(--m-ink-2); background: transparent; border: 0; border-radius: 4px;
  min-height: 32px; padding: 0 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color .2s ease-out, color .2s ease-out; }
.mist-theme-b:hover { color: var(--m-ink); background: var(--m-hover); }
.mist-theme-b[aria-pressed="true"] { background: var(--m-paper); color: var(--m-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--m-line); }
.mist-theme-b[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-lime); box-shadow: 0 0 0 2px var(--m-lime-ring); }

/* =============================================================================================
   THE CALL BAR (#dock). Colour, radius and shadow only; see the note at the top.
   ============================================================================================= */
.dk-bar { background: var(--m-cream); border-bottom-color: var(--m-line); }
.dk-menu { background: var(--m-paper); border-color: var(--m-line-2); border-radius: 6px; color: var(--m-ink); }
.dk-status-t b { color: var(--m-ink); }
.dk-status-t small { color: var(--m-ink-2); }
body.desk .dock-dot { background: var(--m-line-2); box-shadow: none; }
body.desk .dock-dot.good { background: var(--m-lime); box-shadow: 0 0 0 4px var(--m-lime-ring); }
body.desk .dock-dot.warn { background: #C98A00; box-shadow: 0 0 0 4px rgba(201, 138, 0, .22); }
body.desk .dock-dot.bad { background: #C2382B; box-shadow: 0 0 0 4px rgba(194, 56, 43, .2); }
.dk-aux-btn { background: var(--m-paper); border-color: var(--m-line-2); border-radius: 6px; }
.dk-aux-btn:hover { background: var(--m-cream-2); }
/* the state as a word with its dot (the dot sits inside the existing left padding) */
body.desk .aux-pill { position: relative; background: transparent; color: var(--m-ink); border-radius: 4px; }
body.desk .aux-pill::before { content: ""; position: absolute; left: 1px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--m-lime); box-shadow: 0 0 0 2px var(--m-lime-ring); }
body.desk .aux-pill[data-aux="acw"] { background: transparent; color: var(--m-ink); }
body.desk .aux-pill[data-aux="acw"]::before { background: var(--m-ink-2); box-shadow: none; }
body.desk .aux-pill[data-aux="break"], body.desk .aux-pill[data-aux="lunch"], body.desk .aux-pill[data-aux="coaching"],
body.desk .aux-pill[data-aux="training"], body.desk .aux-pill[data-aux="offshift"] { background: transparent; color: var(--m-warn); }
body.desk .aux-pill[data-aux="break"]::before, body.desk .aux-pill[data-aux="lunch"]::before, body.desk .aux-pill[data-aux="coaching"]::before,
body.desk .aux-pill[data-aux="training"]::before { background: #C98A00; box-shadow: none; }
body.desk .aux-pill[data-aux="offshift"]::before { background: var(--m-line-2); box-shadow: none; }
body.desk .aux-pill[data-aux="tech_issue"] { background: transparent; color: var(--m-bad); }
body.desk .aux-pill[data-aux="tech_issue"]::before { background: #C2382B; box-shadow: none; }
body.desk .aux-pill.over { background: #B42318; color: #fff; }
body.desk .aux-pill.over::before { background: #fff; box-shadow: none; }
body.desk .aux-timer { color: var(--m-ink-2); }
.dk-caret { color: var(--m-ink-2); }
.dk-aux-menu { background: var(--m-paper); border-color: var(--m-line-2); border-radius: 4px; box-shadow: none; }
.dk-aux-menu .aux-btn { border-radius: 4px; color: var(--m-ink); }
.dk-aux-menu .aux-btn:hover { background: var(--m-hover); }
.dk-aux-menu .aux-btn.on { background: var(--m-cream-2); color: var(--m-ink); box-shadow: inset 2px 0 0 var(--m-forest); }
.dk-aux-menu .aux-hint { color: var(--m-ink-2); border-top-color: var(--m-line); }
body.desk .dk-shift { background: transparent; color: var(--m-ink-2); border-radius: 4px; }
body.desk .dk-shift[data-phase="closing"] { background: var(--m-warn-t); color: var(--m-warn); }
.dk-owed { position: relative; background: transparent; color: var(--m-warn); border-radius: 4px; }
.dk-owed::before { content: ""; position: absolute; left: 1px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: currentColor; }
.dk-owed.late { background: transparent; color: var(--m-bad); }
.dk-owed:hover { filter: none; background: var(--m-hover); }
.dk-dial input { background: var(--m-paper); border-color: var(--m-field); border-radius: 6px; color: var(--m-ink); }
.dk-dial .btn { border-radius: 6px; }
.dk-as .pad-as-btn { background: var(--m-paper); border-color: var(--m-line-2); color: var(--m-ink-2); border-radius: 6px; }
.dk-as .pad-as-btn:hover { background: var(--m-cream-2); }
.dk-as .pad-as-btn.on { background: #1B4D47; border-color: #1B4D47; color: #fff; }
.dk-as .pad-as-btn[data-callas="wetton"].on { background: #7A3E5C; border-color: #7A3E5C; }
.dk-as.need .pad-as-btn:not(.on) { border-color: #C98A00; background: var(--m-warn-t); }
.dk-as .pad-as-btn:focus-visible { outline-color: var(--m-ink); }
.dk-clock { border-left-color: var(--m-line); }
.dk-clock .ck-l { color: var(--m-mute); }
.dk-clock .ck-t { color: var(--m-ink); }
body.desk .dk-disconnect .btn { border-radius: 6px; }
.dk-note { background: var(--m-paper); color: var(--m-ink-2); border-bottom-color: var(--m-line); }
.dk-live { background: var(--m-paper); border-bottom-color: var(--m-line); }
.dk-live-card { background: var(--m-cream); border-color: var(--m-line-2); border-radius: 4px; }
.dk-live-l.caller b { color: var(--m-ink); }

/* -- the live call: the forest wash. White on its dark end (measured >= 9:1 behind every word). -- */
body.desk #sp-callcard { background: #16281C var(--w-forest) left top / cover no-repeat; border-color: rgba(255, 255, 255, .16);
  border-radius: 4px; color: var(--m-on-forest); }
body.desk #sp-callcard .dk-num, body.desk #sp-callcard .dk-timer { color: #fff; }
body.desk #sp-callcard .dk-state { color: rgba(255, 255, 255, .92); }
body.desk #sp-callcard.ringing { background: #16281C var(--w-forest) left top / cover no-repeat; border-color: var(--m-lime);
  animation: mist-ring 1.2s ease-out infinite; }
body.desk #sp-callcard.ringing .dk-state, body.desk #sp-callcard.active .dk-state, body.desk #sp-callcard.held .dk-state { color: #fff; }
body.desk #sp-callcard.held { background: #16281C var(--w-forest) left top / cover no-repeat; border-color: rgba(255, 255, 255, .7); border-style: dashed; }
@keyframes mist-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(215, 244, 58, .0); } 50% { box-shadow: 0 0 0 5px rgba(215, 244, 58, .55); } }
/* the practice, on a cream tag in its own colour, so the greeting is never the wrong doctor */
body.desk #sp-call-line.dk-prac { background: #F3F1EC; color: #4E4F48; border-radius: 4px; }
body.desk #sp-call-line.dk-prac[data-key="amjadi"] { background: #F3F1EC; color: #1B4D47; }
body.desk #sp-call-line.dk-prac[data-key="wetton"] { background: #F3F1EC; color: #7A3E5C; }
body.desk #sp-callcard .dk-act .btn.secondary { background: #F3F1EC; color: #1E1F1A; border-color: rgba(255, 255, 255, .5); }
body.desk #sp-callcard .dk-act .btn.secondary:hover { background: #FFFFFF; }
/* Answer stays green and Hang up stays red, solid. These two shades carry white labels at 5:1 and
   6.5:1; the old #16A34A / #E5484D were 3.3:1 and 4.7:1 (the Guide's call-card picture already
   used them for that reason). */
body.desk .dk-answer.btn, body.desk #sp-callcard .dk-answer.btn:hover { background: #15803D; color: #fff; }
body.desk #sp-callcard .btn.danger { background: #B42318; color: #fff; }
body.desk #sp-callcard .btn.danger:hover { background: #9E1F15; }
/* call waiting / a held caller (softphone.js builds #sp-cw beside the card) */
body.desk .cw { background: var(--m-paper); border-color: var(--m-line-2); border-radius: 4px; color: var(--m-ink); }
body.desk .cw.waiting { background: var(--m-paper); border-color: var(--m-lime); animation: mist-ring 1.2s ease-out infinite; }
body.desk .cw.held { border-color: var(--m-ink-2); }
body.desk .cw-state, body.desk .cw-timer, body.desk .cw-from, body.desk .cw-hint { color: var(--m-ink-2); }
body.desk .cw.waiting .cw-state { color: var(--m-ink); }
body.desk .cw-line { color: var(--m-ink); }
body.desk .cw .btn.cc-answer { background: #15803D; color: #fff; }
body.desk .cw .btn.danger { background: #B42318; }

/* -- the keypad, a cream panel with hairlines (solid) ------------------------------------------- */
.dk-pad { background: var(--m-paper); border-color: var(--m-line-2); border-radius: 4px; box-shadow: none; }
.dk-pad .pad-key { background: var(--m-cream); border-color: var(--m-line); border-radius: 4px; color: var(--m-ink); }
.dk-pad .pad-key:hover { background: var(--m-cream-2); }
.dk-pad .pk { color: var(--m-ink); }
.dk-pad .ps { color: var(--m-mute); }
.dk-pad-foot .dock-hint { color: var(--m-ink-2); }
.dk-pad-foot .dock-hint.need { color: var(--m-warn); }
.pad-back.btn.ghost { color: var(--m-ink-2); }

/* =============================================================================================
   THE RIGHT PANEL: caller, outcome, notes, Hoot
   ============================================================================================= */
.dk-panel { background: var(--m-paper); border-left-color: var(--m-line); }
.dk-tabs { border-bottom-color: var(--m-line); }
.dk-tab { font-size: 14px; font-weight: 500; color: var(--m-ink-2); }
.dk-tab:hover { color: var(--m-ink); }
.dk-tab[aria-selected="true"] { color: var(--m-ink); font-weight: 600; border-bottom-color: var(--m-ink); }
.dk-tab .log-flag { background: transparent; color: var(--m-bad); font-size: 13px; min-width: 0; padding: 0; }
.dk-tab .np-dot { background: var(--m-lime); box-shadow: 0 0 0 2px var(--m-lime-ring); }
.dk-panel-x { color: var(--m-ink-2); }
.dk-h3 { font-family: var(--pjs); font-weight: 500; font-size: 17px; letter-spacing: -.01em; color: var(--m-ink); }
.dk-h4 { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }
.dk-sub { font-size: 13.5px; color: var(--m-ink-2); }
.dk-empty { font-size: 14.5px; color: var(--m-ink-2); }
.dk-msg { font-size: 13.5px; color: var(--m-ink-2); }
.dk-ok { color: var(--m-good); font-weight: 600; }
.dk-warn-t { color: var(--m-warn); font-weight: 600; }
.dk-idle-t { font-family: var(--pjs); font-weight: 400; font-size: 20px; letter-spacing: -.01em; }
.dk-idle { border-bottom-color: var(--m-line); }
.dk-docline { font-size: 14px; }
/* the caller brief */
.dk-band { border-radius: 4px; background: var(--m-cream-2); border-left-width: 3px; }
.dk-band[data-key="amjadi"] { background: var(--m-amj-t); }
.dk-band[data-key="wetton"] { background: var(--m-wet-t); }
.dk-band-l, .dk-say-l { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }
.dk-band-n { font-family: var(--pjs); font-weight: 500; font-size: 22px; letter-spacing: -.015em; }
.dk-say { font-size: 16px; font-weight: 500; line-height: 1.5; }
.dk-reason { background: var(--m-warn-t); border: 0; border-radius: 4px; box-shadow: inset 2px 0 0 #C98A00; }
.dk-reason q { font-size: 16px; font-weight: 500; }
.dk-who .dk-num { font-size: 16px; }
.dk-open { background: var(--m-bad-t); border: 0; border-radius: 4px; }
.dk-open li { border-left-color: var(--m-bad); font-size: 14px; }
.dk-open li.o-vm { border-left-color: var(--m-vm); }
.dk-open li.o-relay { border-left-color: var(--m-ink-2); }
.dk-open q { color: var(--m-ink-2); }
.dk-last p { font-size: 14px; }
.dk-sum { color: var(--m-ink-2); }
.dk-docnow { border-radius: 4px; background: var(--m-cream-2); font-size: 14px; }
.dk-docnow.s-available { background: var(--m-good-t); }
.dk-docnow.s-surgery, .dk-docnow.s-consulting { background: var(--m-warn-t); }
.dk-docnow.s-away { background: var(--m-bad-t); }
.dk-docnow.unset { background: transparent; border-color: var(--m-line-2); }
.dk-sugg-i { border-color: var(--m-line); border-radius: 4px; background: var(--m-paper); }
.dk-sugg-i:hover { border-color: var(--m-ink-2); background: var(--m-cream); }
.dk-sugg-i b { font-size: 14px; }
.dk-sugg-i span { font-size: 13.5px; color: var(--m-ink-2); }
.dk-hist summary { color: var(--m-link); font-weight: 600; }
.dk-hist li small { color: var(--m-ink-2); }
.dk-recent { border-top-color: var(--m-line); }
body.desk .dock-recent .ev { font-size: 13.5px; color: var(--m-ink-2); }
body.desk .dock-recent .ev .t { color: var(--m-mute); }

/* the Price finder: the slate wash, ink in its light top band; the list sits on paper */
.dk-prices { position: relative; margin: 0 -18px; padding: 16px 18px 14px; background: var(--m-paper); }
.dk-prices::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 104px; z-index: 0;
  background: #D6D7D2 var(--w-slate) 80% 0 / 180% auto no-repeat; }
.dk-prices > * { position: relative; z-index: 1; }
.dk-prices .dk-h4 { color: var(--m-on-wash); font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.dk-prices .dk-pr-q { background: #FDFCF9; color: #1E1F1A; border-color: rgba(30, 31, 26, .45); border-radius: 6px; }
.dk-prices .dk-pr-q::placeholder { color: #63645D; }
.dk-pr { margin-top: 14px; }
.dk-pr li { border-bottom-color: var(--m-line); font-size: 14px; }
.dk-pr-n small { font-size: 12.5px; color: var(--m-mute); }
.dk-pr-p { font-size: 13.5px; color: var(--m-ink); }
.dk-prices .dk-sub { font-size: 13px; }

/* the outcome */
.dk-out-head { background: var(--m-cream-2); border-radius: 4px; font-size: 14px; font-weight: 600; }
.dk-f { font-size: 13px; font-weight: 500; color: var(--m-ink-2); }
.dk-f select, .dk-f input { background: var(--m-paper); border-color: var(--m-field); border-radius: 6px; font-size: 14.5px; }
.dk-chips legend { font-family: var(--pjs); font-weight: 500; font-size: 15px; color: var(--m-ink); }
.dk-chiplab { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }
.dk-chip { border-radius: 6px; border-color: var(--m-line-2); background: var(--m-paper); color: var(--m-ink); font-weight: 500; font-size: 13.5px;
  transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out; }
.dk-chip:hover { border-color: var(--m-ink-2); }
.dk-chip[aria-pressed="true"] { background: var(--m-forest); border-color: var(--m-forest); color: #fff; }
.dk-relay { background: var(--m-cream-2); border: 0; border-radius: 4px; box-shadow: inset 2px 0 0 var(--m-ink-2); }
.dk-relay-t { font-size: 14px; }

/* notes + Hoot inside the panel */
.notepad { background: var(--m-paper); border-left-color: var(--m-line); box-shadow: none; }
.np-head { border-bottom-color: var(--m-line); }
.np-title b { font-family: var(--pjs); font-weight: 500; font-size: 15px; }
.np-title small, .np-when, .np-msg, .np-foot, .np-empty, .np-item .nm small { font-size: 12.5px; color: var(--m-mute); }
.np-when.live { color: var(--m-ink); font-weight: 600; }
.np-chip, .np-mini, .np-use { border-radius: 5px; background: var(--m-paper); border-color: var(--m-line-2); color: var(--m-ink-2); font-size: 13px; font-weight: 500; }
.np-chip:hover, .np-mini:hover { background: var(--m-cream-2); color: var(--m-ink); }
.np-asklab, .np-saved summary { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-mute); }
#np-text { background: var(--m-paper); border-color: var(--m-field); border-radius: 4px; font-size: 15px; color: var(--m-ink); }
#np-text::placeholder { color: var(--m-mute); font-size: 14px; }
#np-text:focus { background: var(--m-paper); border-color: var(--m-ink); box-shadow: 0 0 0 1px var(--m-ink); }
.np-msg.good { color: var(--m-good); }
.np-msg.warn { color: var(--m-warn); }
.np-item { border-top-color: var(--m-line); }
.np-item .nm b { font-size: 13px; }
.np-saved, .np-foot { border-top-color: var(--m-line); }
.chat-panel { background: var(--m-paper); border-color: var(--m-line); }
.chat-head { background: var(--m-cream-2); border-bottom-color: var(--m-line); }
.chat-head strong { font-family: var(--pjs); font-weight: 500; font-size: 15px; }
.chat-head small { font-size: 12.5px; color: var(--m-mute); }
.chat-msg { font-size: 14.5px; border-radius: 4px; }
.chat-msg.user { background: var(--m-forest); color: #fff; }
.chat-msg.bot { background: var(--m-cream-2); color: var(--m-ink); }
.chat-msg.bot b, .chat-msg.bot strong { color: var(--m-ink); }
.chat-msg.bot.err { background: var(--m-bad-t); color: var(--m-bad); }
.chat-input { border-top-color: var(--m-line); }
.chat-close { color: var(--m-ink-2); }
body.desk.dk-split .dk-pane[data-pane="notes"] { background: var(--m-cream); border-left-color: var(--m-line); }

/* =============================================================================================
   PAGE AREA (#view): cream reading column, hairline lists, thin titles
   ============================================================================================= */
.dk-view { color: var(--m-ink); }
.dk-head h1 { font-family: var(--pjs); font-weight: 300; font-size: 34px; letter-spacing: -.02em; line-height: 1.1; }
.gd-btn { border-radius: 6px; background: var(--m-paper); border-color: var(--m-line-2); color: var(--m-ink-2); font-family: var(--inter); font-weight: 500; font-size: 13.5px; }
.gd-btn:hover { background: var(--m-cream-2); color: var(--m-ink); }
.gd-btn[aria-expanded="true"] { background: var(--m-forest); border-color: var(--m-forest); color: #fff; }
.gd-dot { background: var(--m-lime); box-shadow: 0 0 0 3px var(--m-lime-ring); }
.mono, .num, td .mono { font-variant-numeric: tabular-nums; }
body.desk .dk-view .mono, body.desk .dk-panel .mono { font-family: var(--inter); letter-spacing: .01em; color: inherit; }
.card, .dk-card { background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 0; box-shadow: none; }
.card-label { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }
.hero { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 18px !important; margin-bottom: 14px; }
.hero::before { display: none; }
.hero h2 { font-family: var(--pjs); font-weight: 300; font-size: 30px !important; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 6px; }
.hero p { font-size: 15px; color: var(--m-ink-2); max-width: 66ch; }
.eyebrow, .sec-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }
.sec-eyebrow { margin: 28px 0 10px; }
.grid { gap: 2px; }
.emptyval { color: var(--m-mute); }
.statnum, .qs-value { font-family: var(--pjs); }

/* status words, not badges: plain text with its dot */
.pill, .dk-pill, .vm-age, .dk-age, .gd-new-pill {
  background: transparent !important; border: 0 !important; border-radius: 0; padding: 0; box-shadow: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); white-space: nowrap; }
.pill::before, .dk-pill::before, .vm-age::before, .dk-age::before, .gd-new-pill::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.pill.good { color: var(--m-good); } .pill.done { color: var(--m-forest); } .pill.bad { color: var(--m-bad); }
.pill.warn, .pill.gold { color: var(--m-warn); } .pill.mute { color: var(--m-mute); } .pill.info { color: var(--m-ink-2); }
.pill.vm, .dk-pill.vm { color: var(--m-vm); }
html[data-theme="dark"] .pill.done { color: var(--m-link); }
.dk-pill.info { color: var(--m-ink-2); } .dk-pill.warn { color: var(--m-bad); }
.dk-age { color: var(--m-ink-2); } .dk-age.late { color: var(--m-bad); }
.vm-age.soon { color: var(--m-warn); } .vm-age.late { color: var(--m-bad); }
.gd-new-pill { color: var(--m-ink); margin-left: 8px; }
.gd-new-pill::before { background: var(--m-lime); box-shadow: 0 0 0 2px var(--m-lime-ring); }
.dk-count { background: transparent; font-weight: 500; padding: 0; margin-left: 8px; color: var(--m-ink-2); }

/* the practice tags: the practice's colour and a dot, no fill */
.dk-prac:not(#sp-call-line) { background: transparent; border-radius: 0; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--m-ink-2); }
.dk-prac[data-key="amjadi"]:not(#sp-call-line) { background: transparent; color: var(--m-amj); }
.dk-prac[data-key="wetton"]:not(#sp-call-line) { background: transparent; color: var(--m-wet); }

/* tables: hairlines, sentence-case heads */
.tbl th, th { background: transparent; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2);
  border-bottom: 1px solid var(--m-line-2); }
.tbl td, td { border-top-color: var(--m-line); font-size: 14px; color: var(--m-ink); }
.tbl tr:hover td, tbody tr:hover { background: var(--m-hover); }

/* alerts and the failed-save banner: solid tints, a rule on the left */
.alert { border-radius: 4px; border: 0; box-shadow: inset 3px 0 0 currentColor; font-size: 14px; font-weight: 500; }
.alert.good { background: var(--m-good-t); color: var(--m-good); }
.alert.bad { background: var(--m-bad-t); color: var(--m-bad); }
.alert.warn { background: var(--m-warn-t); color: var(--m-warn); }
.alert.info { background: var(--m-info-t); color: var(--m-ink); }
.luxe-flash { background: var(--m-bad-t); color: var(--m-bad); border-color: var(--m-bad); border-radius: 4px; }
.banner { display: block; padding: 11px 14px; border-radius: 4px; font-size: 14px; box-shadow: inset 3px 0 0 currentColor; }
.banner.good { background: var(--m-good-t); color: var(--m-good); }
.banner.bad { background: var(--m-bad-t); color: var(--m-bad); }
.kcap { font-size: 13.5px; color: var(--m-ink-2); line-height: 1.55; }
.empty { color: var(--m-mute); font-size: 14px; }

/* =============================================================================================
   THE DESK PAGE: the reading zone (cream field, the misty telephone, pinned readings, the day's
   calls on a strip), then the mosaic of washes and cream lists.
   ============================================================================================= */
.dk-view:has([data-mist-hero]) { position: relative; }
.dk-view:has([data-mist-hero]) .dk-head { position: absolute; right: 26px; top: 22px; z-index: 3; margin: 0; }
.dk-view:has([data-mist-hero]) .dk-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 22px;
  min-height: 330px; margin: -22px -26px 0; padding: 30px 26px 20px; background: var(--m-cream) var(--m-dots); overflow: hidden; }
/* The telephone fills the hero's height and fades out inside it (bottom and left), so no edge of the
   picture ever shows against the field, in either theme. Dark uses a graded copy, not an overlay. */
.mh-obj { position: absolute; right: 0; top: 0; bottom: 0; width: min(46%, 430px); pointer-events: none;
  background: var(--w-obj) 50% 26% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 100%), linear-gradient(to right, transparent 0, #000 40%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 38%, transparent 100%), linear-gradient(to right, transparent 0, #000 40%);
  mask-composite: intersect; }
html[data-theme="dark"] .mh-obj { background-image: var(--w-obj-dark); }
.mh-title { position: relative; font-family: var(--pjs); font-weight: 300; font-size: 54px; line-height: 1.02; letter-spacing: -.025em;
  color: var(--m-ink); margin: 0; max-width: 60%; }
.mh-pins { position: relative; display: flex; flex-wrap: wrap; gap: 14px 34px; max-width: 76%; }
.mh-pin { display: grid; gap: 3px; min-width: 120px; }
.mh-n { display: flex; align-items: center; gap: 10px; min-height: 48px; font-family: var(--pjs); font-weight: 300; font-size: 46px;
  line-height: 1; letter-spacing: -.02em; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.mh-dot { display: none; width: 9px; height: 9px; border-radius: 50%; background: var(--m-lime); box-shadow: 0 0 0 5px var(--m-lime-ring); flex: none; }
.mh-pin.is-now .mh-dot { display: inline-block; }
.mh-l { font-size: 14px; font-weight: 500; color: var(--m-ink); }
.mh-s { font-size: 13px; color: var(--m-ink-2); }
.mh-pin.is-late .mh-s { color: var(--m-bad); font-weight: 600; }
.mh-pin.is-below .mh-s { color: var(--m-warn); font-weight: 600; }
.mh-strip { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 16px; background: var(--m-paper); border: 1px solid var(--m-line); margin-top: 6px; }
.mh-strip-l { font-size: 13.5px; font-weight: 500; color: var(--m-ink); white-space: nowrap; }
.mh-tl { height: 56px; min-width: 0; --m-tl-ink: var(--m-ink-2); --m-tl-band: #9FBF8E; --m-tl-mark: var(--m-ink); }
html[data-theme="dark"] .mh-tl { --m-tl-band: #7FA36E; }
.mh-key { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 13px; color: var(--m-ink-2); white-space: nowrap; }
.mh-key i { display: inline-block; flex: none; }
.mh-key .k-band { width: 14px; height: 10px; background: #9FBF8E; }
.mh-key .k-ring { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px var(--m-ink); margin-left: 6px; }
.mh-key .k-now { width: 9px; height: 9px; border-radius: 50%; background: var(--m-lime); margin-left: 6px; }

/* the mosaic: 2px cream gutters, square corners, no shadows */
.dk-desk { gap: 2px; margin-top: 2px; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); }
.dk-col > .dk-card + .dk-card { margin-top: 2px; }
.dk-queue { background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 0; padding: 0 0 6px; }
.dk-queue > .dk-seg, .dk-queue > .dk-list, .dk-queue > .dk-foot { margin-left: 20px; margin-right: 20px; }

/* Today: the ochre wash. Ink on its light half; the arcs are the share of today's list that is done. */
.mt { position: relative; display: flex; flex-direction: column; min-height: 214px; padding: 18px 20px 16px; margin: -1px -1px 14px;
  color: var(--m-on-wash); overflow: hidden; }
.mt-ochre { background: #DAC7AC var(--w-ochre) 0 0 / 100% auto no-repeat; }
.mt .dk-col-head { position: relative; z-index: 1; margin: 0; align-items: baseline; }
.mt .dk-col-head h2 { font-family: var(--inter); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--m-on-wash); }
.mt .dk-col-head .dk-sub { font-size: 13px; font-weight: 500; color: var(--m-on-wash); }
.mt-read { position: relative; z-index: 1; margin: 8px 0 0; display: flex; align-items: baseline; gap: 10px;
  font-family: var(--pjs); color: var(--m-on-wash); font-variant-numeric: tabular-nums; }
.mt-big { font-weight: 300; font-size: 66px; line-height: 1; letter-spacing: -.03em; }
.mt-of { font-family: var(--inter); font-weight: 500; font-size: 18px; }
.mt-unit { position: relative; z-index: 1; margin: 6px 0 0; font-size: 15px; font-weight: 500; color: var(--m-on-wash); }
.mt-foot { position: relative; z-index: 1; margin: auto 0 0; padding-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--m-on-wash); text-align: right; }
.mt-art { position: absolute; right: 16px; bottom: 40px; width: 54%; max-width: 330px; height: 70%; --m-stroke: rgba(30, 31, 26, .6); }

.dk-col-head h2 { font-family: var(--pjs); font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.dk-seg { background: var(--m-cream-2); border: 0; border-radius: 6px; padding: 2px; gap: 2px; }
.dk-seg-b { font-size: 14px; font-weight: 500; color: var(--m-ink-2); border-radius: 4px; }
.dk-seg-b b { font-weight: 600; color: var(--m-ink); }
.dk-seg-b[aria-selected="true"] { background: var(--m-paper); color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-line); }
.dk-item { border-bottom-color: var(--m-line); }
.dk-kind { font-size: 15px; font-weight: 600; color: var(--m-ink); }
.dk-item.t-voicemail .dk-kind { color: var(--m-vm); }
.dk-item-mid .dk-num { font-size: 15px; font-weight: 500; }
.dk-quote { font-size: 14px; color: var(--m-ink-2); border-left-color: var(--m-line-2); }
.dk-item-act .btn.sm { font-size: 13px; }
.dk-item.done { opacity: 1; }
.dk-item.done .dk-kind { color: var(--m-ink-2); }
.dk-foot { font-size: 13px; color: var(--m-mute); border-top-color: var(--m-line); }

/* start of shift + focus: cream lists */
.dk-checks li { font-size: 14.5px; }
.dk-tick { border-color: var(--m-line-2); }
.dk-checks li.ok .dk-tick { background: var(--m-forest); border-color: var(--m-forest); }
.dk-checks li.ok { color: var(--m-ink-2); }
.dk-focus-list li { background: transparent; border: 0; border-top: 1px solid var(--m-line); border-radius: 0; padding: 9px 0; }
.dk-focus-list li:first-child { border-top: 0; }
.dk-focus-t { font-size: 14.5px; font-weight: 600; }
.dk-focus-p { font-size: 13.5px; color: var(--m-ink-2); }
.dk-focus-p.up { color: var(--m-good); } .dk-focus-p.flat { color: var(--m-warn); }

/* Doctors today: the sage wash; the two forms are paper panels on it */
.dk-today .dk-card:has(#dk-docs) { background: #CCCEB7 var(--w-sage) 0 0 / cover no-repeat; border-color: transparent; color: var(--m-on-wash); }
.dk-today .dk-card:has(#dk-docs) .dk-h3, .dk-today .dk-card:has(#dk-docs) > .dk-sub,
.dk-today .dk-card:has(#dk-docs) .dk-card-head .dk-sub { color: var(--m-on-wash); }
.dk-today .dk-card:has(#dk-docs) > .dk-sub { font-weight: 500; }
.dk-docs { gap: 2px; }
.dk-doc { background: var(--m-paper); border: 0; border-radius: 0; color: var(--m-ink); }
.dk-doc-state { font-size: 13.5px; color: var(--m-ink-2); }
.dk-doc .dk-f input { font-size: 14.5px; }

/* Numbers you need mid-call: the peach wash, ink, hairline cells */
.dk-today .dk-card:has(.dk-quick) { background: #E7BB97 var(--w-peach) 0 0 / cover no-repeat; border-color: transparent; color: var(--m-on-wash); }
.dk-today .dk-card:has(.dk-quick) .dk-h3 { color: var(--m-on-wash); }
.dk-today .dk-card:has(.dk-quick) .dk-link { color: var(--m-on-wash); text-decoration: underline; text-underline-offset: 3px; }
.dk-quick { gap: 0; border-top: 1px solid rgba(30, 31, 26, .2); }
.dk-q { border: 0; border-radius: 0; border-bottom: 1px solid rgba(30, 31, 26, .2); padding: 10px 12px 10px 0; background: transparent; }
.dk-q:nth-child(odd) { padding-right: 14px; }
.dk-q:nth-child(even) { padding-left: 14px; border-left: 1px solid rgba(30, 31, 26, .2); }
.dk-q dt { font-size: 13px; font-weight: 500; color: var(--m-on-wash); }
.dk-q dd b, .dk-q dd b.mono { font-family: var(--pjs); font-weight: 500; font-size: 20px; letter-spacing: -.01em; color: var(--m-on-wash); }
.dk-q dd span { font-size: 13px; color: var(--m-on-wash); }

/* Callbacks page */
.dk-cb { gap: 2px; }
.dk-cb .dk-card-head .dk-h3 { font-size: 18px; }

/* Activity page */
.dk-act-page { gap: 2px; }
.dk-act-day { font-family: var(--pjs); font-weight: 300; font-size: 26px; letter-spacing: -.02em; }
.dk-act-stats { gap: 2px; }
.dk-act-stats > div { border: 0; border-radius: 0; background: var(--m-cream); padding: 12px 14px; }
.dk-act-stats dt { font-size: 13px; font-weight: 500; color: var(--m-ink-2); }
.dk-act-stats dd b { font-family: var(--pjs); font-weight: 300; font-size: 32px; letter-spacing: -.02em; }
.dk-tl-i { border-bottom-color: var(--m-line); font-size: 14px; }
.dk-tl-t { color: var(--m-ink-2); font-size: 13px; }
.dk-tl-k { font-weight: 600; }
.dk-tl-i.k-missed .dk-tl-k { color: var(--m-bad); }
.dk-tl-i.k-voicemail .dk-tl-k { color: var(--m-vm); }
.dk-tl-i.k-answered .dk-tl-k, .dk-tl-i.k-outbound .dk-tl-k { color: var(--m-good); }
.dk-tl-i.k-aux .dk-tl-k { color: var(--m-warn); }
.dk-tl-i.k-aux, .dk-tl-i.k-phone { color: var(--m-ink-2); }

/* =============================================================================================
   KNOWLEDGE BASE, CALL FLOWS, HISTORY, VOICEMAILS, CONTACTS, TICKETS, USERS
   ============================================================================================= */
.qs-grid { gap: 2px; }
.qs-tile { background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 0; box-shadow: none; padding: 16px 18px; transition: background-color .2s ease-out; }
.qs-tile:hover { transform: none; box-shadow: none; background: var(--m-cream); }
.qs-value { font-weight: 300; font-size: 32px; letter-spacing: -.02em; color: var(--m-ink); }
.qs-label { font-size: 14.5px; font-weight: 600; }
.qs-detail { font-size: 13.5px; color: var(--m-ink-2); }
.sec-card .sec-title { font-size: 15.5px; font-weight: 600; }
.sec-card .sec-count { font-size: 13.5px; color: var(--m-ink-2); }
.sec-card:hover { transform: none; box-shadow: none; background: var(--m-cream); }
.fact { border-bottom-color: var(--m-line); }
.fact .f-fact, .fact.big .f-fact { font-size: 16.5px; font-weight: 600; line-height: 1.45; }
.fact .f-detail, .fact.big .f-detail { font-size: 15px; color: var(--m-ink-2); }
/* NEVER SAY: the coral wash, ink on its light top band (>= 7:1). SAY INSTEAD: the sage wash, ink. */
.f-block { border: 0; border-radius: 0; padding: 12px 14px 13px; margin: 0 0 2px; }
.f-block-h { font-size: 13px; font-weight: 600; letter-spacing: .06em; margin-bottom: 6px; }
.f-mark { width: auto; height: auto; border-radius: 0; background: transparent !important; color: inherit; font-size: 13px; }
.f-block p { font-size: 15.5px; font-weight: 500; line-height: 1.5; }
.f-block.never { background: #FDBC99 var(--w-coral) 50% 0 / 100% auto no-repeat; }
.f-block.say { background: #CCCEB7 var(--w-sage) 0 0 / cover no-repeat; }
.f-block.never .f-block-h, .f-block.never p, .f-block.never .f-mark,
.f-block.say .f-block-h, .f-block.say p, .f-block.say .f-mark { color: #1E1F1A; }
/* call flows: the three kinds of line keep their colours (the page names them), as solid tints */
.sc-legend { font-size: 13px; color: var(--m-ink-2); }
.sc-legend .dot { border-radius: 2px; }
.sc-legend .dot.say { background: var(--m-forest); } .sc-legend .dot.branch { background: #C98A00; } .sc-legend .dot.note { background: var(--m-mute); }
.sc-block { border-radius: 0; font-size: 15px; border-left-width: 3px; }
.sc-block.say { background: var(--m-amj-t); border-left-color: var(--m-forest); color: var(--m-ink); }
.sc-block.branch { background: var(--m-warn-t); border-left-color: #C98A00; color: var(--m-ink); }
.sc-block.note { background: var(--m-cream-2); border-left-color: var(--m-mute); color: var(--m-ink); font-size: 14.5px; }
.sc-block .blank, .sc-legend .blank { background: var(--m-paper); border-bottom: 2px solid var(--m-ink-2); border-radius: 0; }
.script-flow { gap: 2px; }
.sc-layout .card .nav-item { font-size: 14.5px; font-weight: 500; color: var(--m-ink-2); border-radius: 4px; }
.sc-layout .card .nav-item:hover { background: var(--m-hover); color: var(--m-ink); }
.sc-layout .card .nav-item.active { background: var(--m-cream-2); color: var(--m-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--m-forest); }
/* history + voicemails */
.wr-note { font-size: 13px; color: var(--m-ink-2); }
.wr-follow { font-size: 13px; }
.wr-follow.good { color: var(--m-good); } .wr-follow.bad { color: var(--m-bad); }
tr.wr-owed td:first-child { box-shadow: inset 3px 0 0 var(--m-bad); }
.vm-card { margin-bottom: 2px; }
.vm-head { font-size: 14px; }
.vm-when { font-size: 13px; color: var(--m-ink-2); }
.vm-transcript { background: var(--m-cream); border-radius: 0; font-size: 15px; }
.vm-note { font-size: 13.5px; color: var(--m-ink-2); }
.vm-done-row { border-top-color: var(--m-line); font-size: 14px; }
/* contacts */
.ct-row { border-top-color: var(--m-line); font-size: 14.5px; }
.ct-k { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }
/* tickets */
.fl { font-size: 13px; font-weight: 500; color: var(--m-ink-2); }
.fl input[type=text], .fl textarea { background: var(--m-paper); border-color: var(--m-field); border-radius: 6px; font-size: 14.5px; }
.tk-pri legend { font-size: 13px; font-weight: 500; color: var(--m-ink-2); }
.tk-opt { background: var(--m-paper); border-color: var(--m-line-2); border-radius: 6px; font-size: 14px; }
.tk-opt:has(input:checked) { background: var(--m-cream-2); border-color: var(--m-ink); }
.tk-opt input { accent-color: var(--m-forest); }
.shot { background: var(--m-cream); border-color: var(--m-line-2); border-radius: 4px; }
.shot-head { font-size: 13px; font-weight: 600; color: var(--m-ink-2); }
.shot-hint { font-size: 13px; color: var(--m-ink-2); }
.shot-hint.bad { color: var(--m-bad); }
.tk-row { border-top-color: var(--m-line); }
.tk-when, .tk-meta { font-size: 12.5px; color: var(--m-mute); }
.tk-title { font-size: 14.5px; font-weight: 600; }
.tk-body { font-size: 13.5px; color: var(--m-ink-2); }
.tk-add summary { color: var(--m-link); font-size: 13px; }
.tk-add textarea { background: var(--m-paper); border-color: var(--m-field); border-radius: 6px; color: var(--m-ink); }
/* users */
label.f { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }
label.f input, label.f select { background: var(--m-paper); border-color: var(--m-field); border-radius: 6px; color: var(--m-ink); }

/* =============================================================================================
   THE GUIDE: a paper drawer with hairlines
   ============================================================================================= */
.gd { background: var(--m-paper); border-right-color: var(--m-line); box-shadow: none; transition: transform .2s ease-out, visibility .2s; }
.gd-head, .gd-foot { border-color: var(--m-line); }
.gd-title b { font-family: var(--pjs); font-weight: 500; font-size: 18px; }
.gd-title small, .gd-upd, .gd-news .gd-nd { font-size: 12.5px; color: var(--m-mute); }
.gd-search input { background: var(--m-paper); border-color: var(--m-field); border-radius: 6px; }
.gd-lab { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }
.gd-news li, .gd-new li { border-bottom-color: var(--m-line); }
.gd-news .gd-nt, .gd-new li b { font-size: 14px; font-weight: 600; }
.gd-news .gd-nl, .gd-new li span, .gd-sec-s { font-size: 13.5px; color: var(--m-ink-2); }
.gd-sec { border-color: var(--m-line); border-radius: 0; background: var(--m-paper); }
.gd-secs { gap: 2px; }
.gd-sec[open] { border-color: var(--m-line-2); box-shadow: none; }
.gd-sec > summary { border-radius: 0; }
.gd-sec > summary:hover { background: var(--m-hover); }
.gd-sec-t { font-size: 14.5px; font-weight: 600; }
.gd-sec-t::after { border-color: var(--m-ink-2); }
.gd-sec-b p, .gd-sec-b ol li { font-size: 14px; }
.gd-sec-b ol li::before { background: var(--m-cream-2); color: var(--m-ink); border-radius: 50%; }
.gd-tip { background: var(--m-good-t); color: var(--m-ink); border-radius: 4px; }
.gd-dont { background: var(--m-bad-t); color: var(--m-ink); border-radius: 4px; }
.gd-tip::before { color: var(--m-good); font-size: 12.5px; } .gd-dont::before { color: var(--m-bad); font-size: 12.5px; }
.gd-note { background: var(--m-warn-t); color: var(--m-warn); border-radius: 4px; font-size: 13px; }
.gd-more, .gd-new li button, .gd-foot a { color: var(--m-link); }
.gd-x { color: var(--m-ink-2); border-radius: 4px; }
.gd-x:hover { background: var(--m-hover); }
.gd-new { background: var(--m-paper); border-color: var(--m-line-2); border-radius: 4px; box-shadow: none; }
.gd-new-h b { font-family: var(--pjs); font-weight: 500; font-size: 16px; }
.gd-new-h span, .gd-new-more { font-size: 13px; color: var(--m-mute); }
.gd-pop { background: var(--m-paper); border-color: var(--m-line-2); border-radius: 4px; box-shadow: none; }
.gd-pop-k { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-mute); }
.gd-pop h3 { font-family: var(--pjs); font-weight: 500; font-size: 17px; }
.gd-pop p { font-size: 14px; }
.gd-ring { box-shadow: 0 0 0 3px var(--m-lime), 0 0 0 9999px rgba(20, 21, 17, .45); border-radius: 4px; }
.gd-dots i { background: var(--m-line-2); } .gd-dots i.on { background: var(--m-ink); }
@keyframes gd-hl { 0% { box-shadow: 0 0 0 3px var(--m-lime); } 100% { box-shadow: 0 0 0 3px transparent; } }
.gd-mock { background: var(--m-cream); border-color: var(--m-line); border-radius: 4px; }
.gd-mock.gd-m-ringing { background: var(--m-cream); border-color: var(--m-lime); }
.gd-m-st { font-size: 12px; color: var(--m-ink-2); }
.gd-m-ringing .gd-m-st { color: var(--m-warn); }
.gd-m-live .gd-m-st { color: var(--m-good); }
.gd-m-ex { border-radius: 4px; background: var(--m-paper); color: var(--m-mute); font-size: 11.5px; }
.gd-m-pr { border-radius: 4px; background: var(--m-amj-t); color: var(--m-amj); }
.gd-m-pr.gd-m-wet { background: var(--m-wet-t); color: var(--m-wet); }
.gd-m-sd { background: var(--m-warn-t); border: 0; border-radius: 4px; }
.gd-m-bt span { border-radius: 5px; background: var(--m-paper); border-color: var(--m-line-2); color: var(--m-ink); }

/* =============================================================================================
   SIGN-IN: the reading zone alone. The misty telephone on cream, the name at 300, one panel.
   Nothing here may name the practices or their numbers (the page is reachable by anyone).
   ============================================================================================= */
/* One cream field for the whole page; the telephone floats where the two halves meet and fades out
   on every side, so no panel edge ever cuts it. The sign-in card is the one solid panel. */
.auth-body { position: relative; background: var(--m-cream) var(--m-dots); }
.auth-body::before { content: ""; position: absolute; z-index: 0; pointer-events: none; left: 34%; bottom: 0; top: auto;
  width: min(40vw, 600px); aspect-ratio: 3 / 4; max-height: 100%;
  background: var(--w-obj) 50% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 62%, transparent 100%), linear-gradient(to right, transparent 0, #000 28%, #000 66%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 62%, transparent 100%), linear-gradient(to right, transparent 0, #000 28%, #000 66%, transparent 100%);
  mask-composite: intersect; }
html[data-theme="dark"] .auth-body::before { background-image: var(--w-obj-dark); }
.auth { position: relative; z-index: 1; }
.auth-brand { background: transparent; color: var(--m-ink); align-items: flex-start; padding: 56px 5vw 48px; }
.auth-brand::after { display: none; }
.auth-brand-in { max-width: 460px; }
.auth-owl { width: 46px; height: 46px; border-radius: 4px; background: #FDFCF9; box-shadow: inset 0 0 0 1px var(--m-line-2); margin-bottom: 40px; }
.auth-owl img { width: 28px; height: 28px; }
.auth-brand h1 { font-family: var(--pjs); font-weight: 300; font-size: 56px; line-height: 1.02; letter-spacing: -.03em; color: var(--m-ink); margin: 0 0 18px; }
.auth-tag { font-size: 16.5px; line-height: 1.55; color: var(--m-ink-2); margin: 0 0 34px; max-width: 34ch; }
.auth-list { gap: 0; max-width: 340px; border-top: 1px solid var(--m-line); }
.auth-list li { gap: 0; padding: 11px 0; border-bottom: 1px solid var(--m-line); }
.auth-list .ai { display: none; }
.auth-list b { color: var(--m-ink); font-size: 14.5px; font-weight: 600; }
.auth-list span span, .auth-list li > span:last-child { color: var(--m-ink-2); font-size: 14px; }
.auth-foot { color: var(--m-mute); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; margin-top: 30px; }
.auth-panel { background: transparent; padding: 56px 40px; }
.auth-card { max-width: 380px; background: var(--m-paper); border: 1px solid var(--m-line); padding: 32px 30px 28px; }
.auth-card h2 { font-family: var(--pjs); font-weight: 300; font-size: 32px; letter-spacing: -.02em; color: var(--m-ink); }
.auth-sub { font-size: 15px; color: var(--m-ink-2); }
.btn.gsi { background: #FFFFFF; color: #1F1F1F; border: 1px solid #8E8F89; border-radius: 6px; box-shadow: none; font-family: var(--inter); font-weight: 600; font-size: 15px; }
.btn.gsi:hover { background: #F6F5F1; border-color: #63645D; }
.auth-alt { border-top-color: var(--m-line); }
.auth-alt summary { font-size: 14px; font-weight: 500; color: var(--m-ink-2); }
.auth-alt summary:hover { color: var(--m-ink); }
.auth-f { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }
.auth-alt input[type=email] { background: var(--m-paper); border-color: var(--m-field); border-radius: 6px; color: var(--m-ink); }
.auth-alt input[type=email]:focus { border-color: var(--m-ink); box-shadow: 0 0 0 1px var(--m-ink); }
.auth-card .btn.secondary { border-radius: 6px; }

/* =============================================================================================
   DARK (Light / Dark / System in the sidebar; cream -> #141511, ink -> #F2F1EC). The washes are
   unchanged, so the words on them keep their measured colours.
   ============================================================================================= */
html[data-theme="dark"] .dk-logo, html[data-theme="dark"] .auth-owl { background: #F3F1EC; }
html[data-theme="dark"] .btn.gsi { background: #FFFFFF; color: #1F1F1F; }
html[data-theme="dark"] body.desk .dock-dot { background: rgba(242, 241, 236, .3); }
html[data-theme="dark"] body.desk .dock-dot.good { background: var(--m-lime); }
html[data-theme="dark"] body.desk .aux-pill[data-aux="offshift"]::before { background: rgba(242, 241, 236, .35); }
html[data-theme="dark"] .dk-as .pad-as-btn.on { background: #2C6B60; border-color: #2C6B60; }
html[data-theme="dark"] .dk-as .pad-as-btn[data-callas="wetton"].on { background: #8C4A6B; border-color: #8C4A6B; }
html[data-theme="dark"] .dk-as.need .pad-as-btn:not(.on) { border-color: #E6B657; background: #352C17; }
html[data-theme="dark"] .gd-new-pill::before, html[data-theme="dark"] .mist-theme-b[aria-pressed="true"]::before { box-shadow: none; }
html[data-theme="dark"] .mh-key .k-band { background: #7FA36E; }
html[data-theme="dark"] .dk-docnow.unset { border-color: var(--m-line-2); }
html[data-theme="dark"] .chat-head-avatar, html[data-theme="dark"] .chat-avatar { background: #F3F1EC; }
html[data-theme="dark"] .gd-tour.nohole { background: rgba(0, 0, 0, .55); }
html[data-theme="dark"] .gd-ring { box-shadow: 0 0 0 3px var(--m-lime), 0 0 0 9999px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .alert.info { color: var(--m-ink); }

/* =============================================================================================
   RESPONSIVE. Phones follow the kit: pins become a 2-column cream grid, tiles use crops anchored
   to their light end for ink, 44px targets.
   ============================================================================================= */
@media (max-width: 1280px) {
  .dk-side.sidebar { transition: transform .2s ease-out; }
  .dk-side.sidebar.open { box-shadow: none; border-right: 1px solid var(--m-line-2); }
}
@media (max-width: 1100px) {
  .dk-panel { transition: transform .2s ease-out; box-shadow: none; border-left: 1px solid var(--m-line-2); }
  .dk-panel-open:not([hidden]) { background: var(--m-forest); border-radius: 6px; box-shadow: none; font-family: var(--inter); font-weight: 600; }
}
@media (max-width: 900px) {
  .mh-title { font-size: 46px; }
  .mh-pins { max-width: 74%; gap: 12px 30px; }
  .mh-n { font-size: 40px; min-height: 42px; }
}
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-body::before { left: auto; right: 0; top: 0; bottom: auto; width: min(58%, 340px); }
}
@media (max-width: 760px) {
  .dk-head h1 { font-size: 28px; }
  .dk-view:has([data-mist-hero]) .dk-head { right: 14px; top: 16px; }
  .mh { margin: -16px -14px 0; padding: 22px 14px 14px; min-height: 0; gap: 16px; }
  .mh-obj { right: -4%; top: 0; bottom: auto; height: 236px; width: 60%; }
  .mh-title { font-size: 40px; max-width: 64%; margin-top: 28px; }
  .mh-pins { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: none; margin-top: 70px; }
  .mh-pin { background: var(--m-paper); outline: 1px solid var(--m-line); padding: 13px 14px 12px; min-width: 0; }
  .mh-pin[data-pin="owed"] { grid-column: 1 / -1; }
  .mh-n { font-size: 36px; min-height: 38px; }
  .mh-strip { grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; }
  .mh-tl { height: 54px; }
  .dk-desk { grid-template-columns: minmax(0, 1fr); }
  .dk-queue > .dk-seg, .dk-queue > .dk-list, .dk-queue > .dk-foot { margin-left: 14px; margin-right: 14px; }
  .mt { min-height: 196px; padding: 16px; }
  .mt-big { font-size: 56px; }
  .mt-art { width: 52%; right: 10px; }
  .dk-today .dk-card:has(.dk-quick), .dk-today .dk-card:has(#dk-docs) { background-size: 200% auto; background-position: 0 0; }
  .dk-q, .dk-q:nth-child(odd), .dk-q:nth-child(even) { padding: 10px 0; border-left: 0; }
  .f-block.never { background-size: 220% auto; background-position: 50% 0; }
  .dk-seg-b, .mist-theme-b, .dk-chip, .np-chip { min-height: 44px; }
  .dk-item-act .btn.sm, .vm-actions .btn.sm { min-height: 44px; }
  .auth-brand { padding: 30px 22px 26px; }
  .auth-brand h1 { font-size: 40px; max-width: 62%; }
  .auth-tag { max-width: 26ch; }
  .auth-owl { margin-bottom: 22px; }
  .auth-panel { padding: 18px 16px 40px; }
  .auth-card { padding: 24px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  body.desk #sp-callcard.ringing, body.desk .cw.waiting { animation: none; box-shadow: 0 0 0 3px rgba(215, 244, 58, .7); }
  .btn, .dk-chip, .dk-nav .nav-item, .mist-theme-b, .qs-tile, .gd, .dk-panel, .dk-side.sidebar { transition: none; }
}