/* Spotter: the dashboard's styles, shared by a customer's profile, a conversation, and Settings.
   The instrument panel of a grand tourer at night: a paddock ground, machined panels ruled by hairlines,
   stadium-shaped controls, Archivo in three widths (Expanded for the badge, Normal for sentences,
   Condensed for every number), and one signal call per view. The Spotter mark (i-spark) marks what
   Spotter wrote. Served from /dashboard/static; the page allows styles and fonts from here only. */

@font-face { font-family: "Archivo"; src: url("fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900;
  font-stretch: 62% 125%; font-display: swap; }

:root {
  --paddock: #F1F2EF;
  --paddock-raised: #FFFFFF;
  --paddock-sunken: #E7E9E4;
  --paddock-float: #FFFFFF;
  --hairline: #D3D8D1;
  --edge-lit: #D3D8D1;
  --ink: #0F1512;
  --ink-2: #34403A;
  --ink-muted: #58635C;
  --alloy: #78827C;
  --circuit: #133F31;
  --on-circuit: #F1F2EF;
  --signal: #8F5A2F;
  --signal-soft: #F1E6DA;
  --on-signal: #F1F2EF;
  --clear: #1F5E8C;
  --stop: #A8242E;
  --shadow-float: 0 24px 48px -16px rgba(15, 21, 18, .18);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wide: 125%;
  --narrow: 75%;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
  --r0: 0; --r-sm: 8px; --r-bubble: 12px; --r-control: 10px;
  color-scheme: light;
}
/* Night: chosen in the bar (<html data-theme="dark">), or System (no attribute) on a device set to dark.
   Day (data-theme="light") keeps the values above on any device (app/theme.py). The two blocks hold the
   same values (tests/test_theme.py checks), and every token above is a plain value: one built from another
   would keep its Day value under these unless it were declared again in both. */
:root[data-theme="dark"] {
  --paddock: #0A0F0D; --paddock-raised: #111814; --paddock-sunken: #060908; --paddock-float: #161F1A; --hairline: #223029;
  --edge-lit: #2E3F36; --ink: #EDEFEA; --ink-2: #C7CFCA; --ink-muted: #9AA59E; --alloy: #6E7872;
  --circuit: #194E3D; --on-circuit: #EDEFEA; --signal: #E8A55A; --signal-soft: #362614; --on-signal: #0A0F0D;
  --clear: #7FB2E0; --stop: #FF8A8A; --shadow-float: 0 24px 48px -12px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paddock: #0A0F0D; --paddock-raised: #111814; --paddock-sunken: #060908; --paddock-float: #161F1A; --hairline: #223029;
    --edge-lit: #2E3F36; --ink: #EDEFEA; --ink-2: #C7CFCA; --ink-muted: #9AA59E; --alloy: #6E7872;
    --circuit: #194E3D; --on-circuit: #EDEFEA; --signal: #E8A55A; --signal-soft: #362614; --on-signal: #0A0F0D;
    --clear: #7FB2E0; --stop: #FF8A8A; --shadow-float: 0 24px 48px -12px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

/* --- The paper: ground, type, links, focus ------------------------------------------------------- */
* { box-sizing: border-box; }
/* Touch: no gray tap flash. A fill under the pointer is for a pointer that hovers (@media (hover: hover)); it
   would stick after a tap on the service drive's iPads. A finger gets the same fill while it presses (:active). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px;
       scrollbar-color: var(--alloy) transparent; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--paddock); color: var(--ink); font-family: var(--font); font-size: 15px;
       line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       font-synthesis: none; }   /* Archivo has every weight; never a faked bold or slant */
strong { font-weight: 600; }
::selection { background: var(--signal-soft); color: var(--ink); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--alloy); text-decoration-thickness: 1px;
    text-underline-offset: 4px; transition: text-decoration-color .18s var(--ease); }
a:hover { text-decoration-color: var(--signal); }
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea { caret-color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
[hidden] { display: none !important; }
/* Prose never ends a paragraph on a lone word. */
.answer-sheet .a p, .note, .brief p, .why-now dd, .msg-body, .hist-line, .slot-help, .move-note { text-wrap: pretty; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }
.muted { color: var(--ink-muted); }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
/* The Spotter mark (i-spark): the line in the text's color, the call dot in signal. */
symbol .mark-line { fill: none; stroke: currentColor; }
symbol .mark-dot { fill: var(--mark-dot, currentColor); stroke: none; }   /* mono at icon sizes; amber only in the Ask field */
/* The mark is never drawn under 16px, the brand's smallest; the Ask field's stays larger. */
.ic:has(> use[href="#i-spark"]) { min-width: 16px; min-height: 16px; }

/* The three widths. Expanded, the badge: eyebrow labels, small capitals tracked wide. */
.move-tag, .move-day, .move-heat, .gauge-label, .cell-l, .day-title, .kind, .status, .heat, .why-tag, .brief-tag,
.block-tag, .board-table thead th, .answer-sheet th, .msg-who, .hist-tag, .heat-tag, .reply-form label,
.field label, .key-form label {
  font-stretch: var(--wide); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; font-feature-settings: "case";
}
/* Expanded capitals on the controls: buttons and segments. */
.ask-go, .seg a, .btn-send, .btn-ink, .move-open {
  font-stretch: var(--wide); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; font-feature-settings: "case";
}
/* Condensed, the instrument: every number read at a glance, in tabular figures. */
.rank-n, .move-time, .move-number, .gauge-num, .ledger-tiles .ld-v, .kpi-num, .time, .tab-n, .board-table td,
.scale-key b, .hist-when, .msg-when, .reply-count, .answer-sheet td.num {
  font-stretch: var(--narrow); font-variant-numeric: tabular-nums;
}
.scale-end, .bars text, .days text { font-family: var(--font); font-stretch: var(--narrow); font-weight: 500;
                                     font-variant-numeric: tabular-nums; }

/* --- Masthead: the greeting set on the paddock, and the Ask ------------------------------------------ */
.mast-in, .label { max-width: calc(1320px + 2 * var(--s8)); margin: 0 auto; padding-left: var(--s8); padding-right: var(--s8); }
.mast-in { padding-top: var(--s12); }
.mast-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.hello { margin: 0; font-stretch: var(--wide); font-size: clamp(30px, 4vw, 44px); line-height: 1.14; font-weight: 300;
         letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.who { margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: 2px 20px; font-size: 12px; line-height: 18px;
       color: var(--ink-muted); }
.who .role { color: var(--ink); font-weight: 600; }

.ask { margin-top: var(--s8); max-width: 960px; }
.ask-field { display: flex; align-items: center; gap: var(--s3); height: 56px; padding: 0 6px 0 20px;
             background: var(--paddock-sunken); border: 1px solid var(--alloy); border-radius: var(--r-control);
             transition: border-color .18s var(--ease); }
.ask-field:focus-within { border-color: var(--ink); }
.ask-field:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.ask-field input:focus-visible { outline: none; }
.ask-spark { width: 22px; height: 22px; color: var(--ink); --mark-dot: var(--signal); }
.ask-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink);
                   font-size: 16px; }
.ask-field input::placeholder { color: var(--ink-muted); opacity: 1; }
.ask-go { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 44px;
          padding: 0 20px 0 22px; border: 0; border-radius: var(--r-control); background: var(--ink); color: var(--paddock);
          cursor: pointer; transition: background-color .18s var(--ease); }
.ask-go .ic { width: 16px; height: 16px; }
@media (hover: hover) { .ask-go:hover { background: var(--ink-2); } }
.ask-go:active { background: var(--ink-2); }
.ask-go:disabled, .ask-field input:disabled { opacity: .45; cursor: not-allowed; }
.suggest { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.sug { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--hairline);
       border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: 13px; line-height: 18px;
       cursor: pointer; transition: border-color .18s var(--ease), color .18s var(--ease); }
@media (hover: hover) { .sug:hover { border-color: var(--ink); color: var(--ink); } }
.sug:active { border-color: var(--ink); color: var(--ink); }
.ask-off { margin: var(--s3) 0 0; color: var(--ink-muted); font-size: 13px; }

/* The answer: a sheet that floats over the page, the one thing besides menus that casts a shadow. */
.answer { position: relative; z-index: 2; margin-top: var(--s6); max-width: 960px; }   /* over the page while it makes room */
.answer-sheet { position: relative; padding: var(--s6) 28px; background: var(--paddock-float); color: var(--ink);
                border: 1px solid var(--hairline); box-shadow: var(--shadow-float); }
/* What's new on the sheet arrives; the question stays where it was. The hangtime row has its own fade. */
.answer-sheet > :not(.q, .thinking) { animation: land .28s var(--ease) both; }
@keyframes land { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.answer-sheet .q { margin: 0 0 var(--s3); display: flex; gap: var(--s2); align-items: flex-start; color: var(--ink-muted);
                   font-size: 14px; line-height: 21px; font-weight: 500; }
.answer-sheet .q .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--alloy); }
.answer-sheet .a { font-size: 15px; line-height: 1.6; }
.answer-sheet .a > :is(p, ul, ol, h4, pre) { max-width: 72ch; }   /* prose keeps its measure; a table takes the sheet */
.answer-sheet .a p, .answer-sheet .a ul, .answer-sheet .a ol { margin: 0 0 var(--s3); }
.answer-sheet .a ul, .answer-sheet .a ol { padding-left: 22px; }
.answer-sheet .a li + li { margin-top: 2px; }
.answer-sheet .a em { font-style: normal; font-weight: 500; }   /* emphasis by weight: Archivo here has no italic */
.answer-sheet .a h4 { margin: var(--s4) 0 6px; font-stretch: var(--wide); font-size: 15px; line-height: 22px; font-weight: 500; }
.answer-sheet .a code { padding: 1px 5px; background: var(--paddock-sunken); border-radius: var(--r-sm); font-size: 13.5px; }
.answer-sheet .a pre { padding: var(--s3); background: var(--paddock-sunken); border-radius: var(--r-sm); overflow-x: auto; }
.table-wrap { overflow-x: auto; margin: var(--s2) 0 var(--s3); }
.answer-sheet table { border-collapse: collapse; min-width: 50%; font-variant-numeric: tabular-nums; }
.answer-sheet th, .answer-sheet td { text-align: left; padding: var(--s2) var(--s6) var(--s2) 0; border-bottom: 1px solid var(--hairline);
                                    vertical-align: baseline; }
.answer-sheet tr > :last-child { padding-right: 0; }
.answer-sheet th { color: var(--ink-muted); white-space: nowrap; }
/* Words in a cell stay Normal. A column of figures (class num, when app/ask.py marks one) is set as an
   instrument, Condensed and to the right, its head over it. */
.answer-sheet td.num { font-size: 16px; font-weight: 500; white-space: nowrap; }
.answer-sheet .num { text-align: right; }
.answer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s6); margin-top: 20px;
               padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.answer-done { margin-left: auto; padding: 6px 0; font-size: 13px; font-weight: 500; }
.by { margin: 0; display: inline-flex; align-items: center; gap: var(--s2); font-size: 12px; line-height: 18px;
      color: var(--ink-muted); }
.by .ic { width: 16px; height: 16px; }
.by-local .ic { color: var(--clear); }
.by-cloud .ic { color: var(--alloy); }
.err { margin: 0; display: flex; gap: var(--s2); align-items: flex-start; color: var(--stop); font-weight: 500; }
.err .ic { margin-top: 2px; }

/* --- Hangtime: the Circuit S while Spotter works (DESIGN.md, Motion) -------------------------------- */
/* The mark stays drawn; its own dot, the car, settles onto its place, holds there as the logo, takes the
   racing line and leaves, a beat, then again. A disc the color of the ground runs under the car so it reads
   on the line. Only a wait someone started, shown after 300ms and kept at least 600ms (static/dashboard.js
   hangtime()); a held one keeps its box, so showing it moves nothing. Only stroke-dashoffset and opacity move. */
.hang { --hang-ground: var(--paddock-raised); width: 22px; height: 22px; flex: none; overflow: visible; }
.hang-line { fill: none; stroke: currentColor; }
.hang-gap { stroke: var(--hang-ground); animation: hang-drive 2.6s linear infinite, hang-show 2.6s linear infinite; }
.hang-car { stroke: var(--signal); animation: hang-drive 2.6s linear infinite, hang-show 2.6s linear infinite; }
.answer-sheet .hang { --hang-ground: var(--paddock-float); }
/* A form's own wait (templates/_macros.html hang_wait), beside the buttons that sent it: Spotter's lists, drafts and
   notes, the opt-outs, and every form in Settings. Its gap takes the ground under it: the paddock under a list's or
   Settings' row, the sunken well of a confirmation, the raised panel of the cloud sheet (the follow-up's, by
   default). A form that is one button and its wait sets them on one line. */
:is(.draft-form, .slot) .hang { --hang-ground: var(--paddock); }
.price .hang { --hang-ground: var(--paddock-raised); }
.confirm .hang { --hang-ground: var(--paddock-sunken); }
form:has(> .hang-wait):not(.draft-form) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.key-row > .hang-wait { align-self: center; }
.thinking { display: flex; align-items: flex-start; gap: var(--s3); margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 21px; }
.thinking .hang { margin-top: 0; }   /* its middle bar on the first line's x-height middle, however the words wrap */
.hang-wait { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.hang-wait .hang { width: 16px; height: 16px; margin-top: 2px; }
:is(.thinking, .hang-wait) { animation: hang-in .18s var(--ease) both; }
:is(.thinking, .hang-wait).is-held { visibility: hidden; animation: none; }
.is-held :is(.hang-car, .hang-gap) { animation: none; }
.ask.busy .ask-spark { --mark-dot: currentColor; }   /* the field's dot goes to work in the sheet */
/* Busy is not off: while Spotter works the plate stays lit; 45% is for an Ask box that isn't set up. */
.ask.busy .ask-go:disabled, .ask.busy .ask-field input:disabled { opacity: 1; cursor: progress; }
@keyframes hang-drive {
  0%    { stroke-dashoffset: 0;        animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  13.5% { stroke-dashoffset: -4;       animation-timing-function: linear; }
  34.5% { stroke-dashoffset: -4;       animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  88.5% { stroke-dashoffset: -146.549; }
  100%  { stroke-dashoffset: -146.549; }
}
@keyframes hang-show {
  0%    { opacity: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  11.5% { opacity: 1; }
  79%   { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  88.5% { opacity: 0; }
  100%  { opacity: 0; }
}
@keyframes hang-in { from { opacity: 0; } to { opacity: 1; } }

/* --- The page under the masthead ------------------------------------------------------------------ */
.label { padding-top: var(--s12); padding-bottom: var(--s16); }
.notice, .empty { color: var(--ink-2); }
.notice { display: flex; gap: var(--s3); align-items: center; font-size: 16px; }
.notice .ic { color: var(--stop); width: 22px; height: 22px; }
.empty { margin: var(--s4) 0; font-size: 14px; }

/* The call: the signature, once per view, at the top. A machined panel the content's full width: the call
   dot and what kind of call it is, then when, who and why, and the way to act. It rises in once, from a
   panel already in view: where a browser holds animations back, it still reads. */
.move { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "head head head" "when what act";
        align-items: center; gap: 20px var(--s8); margin: 0 0 var(--s8); padding: 28px;
        background: var(--paddock-raised); border: 1px solid var(--hairline); animation: rise .18s var(--ease) both; }
@keyframes rise { from { opacity: .6; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: .6; } to { opacity: 1; } }
.move-head { grid-area: head; display: flex; align-items: center; gap: var(--s3); margin: 0; color: var(--ink-muted); }
.move-dot { flex: none; width: 8px; height: 8px; margin: 0 var(--s1); border-radius: 50%; background: var(--signal);
            box-shadow: 0 0 0 4px var(--signal-soft); }
.move-when { grid-area: when; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px;
             min-width: 112px; padding-right: var(--s8); border-right: 1px solid var(--hairline); }
.move-day { color: var(--ink-muted); }
.move-time { font-size: 56px; line-height: 1; font-weight: 300; letter-spacing: -.01em; white-space: nowrap; }
.move-time small { margin-left: var(--s1); font-size: 18px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); }
@media (min-width: 1100px) {   /* the call is the largest figure on the page, above This month's 64px lead */
  .move-time { font-size: 72px; letter-spacing: -.015em; }
  .move-time small { font-size: 20px; }
}
/* Units (DESIGN.md, The Units Rule): the unit at half the figure's size in ink-muted, as AM and PM beside a time.
   The dollar sign stays in the text, set small here and raised to the figures' tops; %, /hr, hrs, M and K follow
   on the baseline. In a judged figure the unit keeps the figure's color. */
:is(.move-time, .gauge-num, .ledger-tiles .ld-v).is-money::first-letter, .cell-warn .kpi-num::first-letter {
  font-size: .5em; font-weight: 500; color: var(--ink-muted); vertical-align: .7em; margin-right: .06em; }
.u { margin-left: .08em; font-size: .5em; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); }
.is-good .ld-v.is-money::first-letter, .is-bad .ld-v.is-money::first-letter, .gauge-num.is-good.is-money::first-letter,
.gauge-num.is-bad.is-money::first-letter, :is(.is-good, .is-bad) .u { color: inherit; }
.move-what { grid-area: what; min-width: 0; }
.move-name { margin: 0; font-size: 24px; line-height: 32px; font-weight: 500; text-wrap: balance; overflow-wrap: anywhere; }
.move-note { margin: 6px 0 0; font-size: 14px; line-height: 22px; color: var(--ink-2); max-width: 72ch; }
.move .actions, .move-open { grid-area: act; }
.move .btn-icon { width: 44px; height: 44px; }
.move .btn-icon:first-child { background: var(--ink); border-color: var(--ink); color: var(--paddock); }
@media (hover: hover) { .move .btn-icon:first-child:hover { background: var(--ink-2); border-color: var(--ink-2); } }
.move .btn-icon:first-child:active { background: var(--ink-2); border-color: var(--ink-2); }
/* A phone call takes the call's place while it rings and while it's on (app/calls.py), then hands it back. */
.call-slot:empty, .move[hidden] { display: none; }
.move.still { animation: none; }   /* a live call updated in place, or the call back after one: no second rise */
.needle-still .mark-now { animation: none; }   /* the same reading as the last page: no second settle */
.texts-slot:empty { display: none; }
.move-call .move-day { display: inline-flex; gap: var(--s2); align-items: center; color: var(--ink); }
.move-call .move-day .ic { width: 14px; height: 14px; color: var(--alloy); }
.move-number { font-size: 28px; line-height: 1; font-weight: 500; white-space: nowrap; }
.move-heat { display: inline-flex; align-items: center; height: 22px; margin-left: var(--s2); padding: 0 6px 0 9px;
             border: 1px solid var(--ink); border-radius: var(--r-control); vertical-align: 4px; }
.move-say { display: flex; gap: var(--s2); align-items: baseline; margin: var(--s2) 0 0; font-size: 14px; line-height: 22px;
            font-weight: 500; max-width: 72ch; }
.move-say .ic { width: 14px; height: 14px; transform: translateY(2px); }
.move-open { display: inline-flex; gap: 6px; align-items: center; justify-self: end; height: 40px; padding: 0 14px 0 20px;
             border: 1px solid var(--alloy); border-radius: var(--r-control); color: var(--ink); text-decoration: none;
             white-space: nowrap; transition: border-color .18s var(--ease); }
.move-open .ic { width: 14px; height: 14px; }
@media (hover: hover) { .move-open:hover { border-color: var(--ink); } }
.move-open:active { border-color: var(--ink); }

/* Customer names open their profile: ink at rest, underlined under the pointer. */
.client-link, .move-name a, .hello-link, a.name { color: inherit; text-decoration: none; }
.client-link:hover, .move-name a:hover, .hello-link:hover, a.name:hover { text-decoration: underline;
  text-decoration-color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Views (Today, Team, Assistant), the month, and Mine or Whole store: a rounded-rectangle segmented control. */
.views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: 0 0 var(--s8); }
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--alloy);
       border-radius: var(--r-bubble); }   /* no overflow clip: it would cut the focus ring */
.seg a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px 0 16px; border-radius: var(--r-sm);
         color: var(--ink); text-decoration: none; white-space: nowrap;
         transition: background-color .18s var(--ease), color .18s var(--ease); }
@media (hover: hover) { .seg a:hover { background: var(--paddock-sunken); } }
.seg a:active { background: var(--paddock-sunken); }
.seg a.on { background: var(--ink); color: var(--paddock); }

/* Sections: a heading in Expanded, sentence case, over one hairline. */
.sec { margin-bottom: var(--s12); }
.sec-head { display: flex; align-items: baseline; gap: var(--s2) var(--s3); flex-wrap: wrap; padding-bottom: var(--s3);
            border-bottom: 1px solid var(--hairline); }
.sec-head h2 { margin: 0; font-stretch: var(--wide); font-size: 22px; line-height: 28px; font-weight: 400; text-wrap: balance; }
.sec-head .sub { font-size: 12px; line-height: 18px; color: var(--ink-muted); }

/* --- Ranked rows: hottest clients, leads to reach, new texts ---------------------------------------- */
.rank { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.rank-row { display: grid; grid-template-columns: 18px 40px minmax(0, 1fr) auto; gap: 0 var(--s4); align-items: start;
            padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
.rank-plain .rank-row { grid-template-columns: 40px minmax(0, 1fr) auto; }   /* no rank number */
.rank-n { font-size: 14px; line-height: 40px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); text-align: right; }
.rank-main { min-width: 0; padding-top: var(--s2); }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink);
          box-shadow: inset 0 0 0 1px var(--alloy); font-stretch: var(--wide); font-size: 12px; font-weight: 600;
          letter-spacing: .06em; text-indent: .06em; }
.heat-hot .avatar { background: var(--ink); color: var(--paddock); box-shadow: none; }
.heat-warm .avatar { box-shadow: inset 0 0 0 1.5px var(--ink); }
.avatar-quiet { color: var(--ink-2); }
.rank-top { display: flex; gap: 2px var(--s3); align-items: baseline; flex-wrap: wrap; }
.rank-row .name { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.rank-top .muted { font-size: 12px; }
.heat { color: var(--ink-muted); }
.heat-hot .heat { color: var(--ink); }
.heat-warm .heat { color: var(--ink-2); }
.reasons { display: flex; flex-wrap: wrap; gap: 4px var(--s4); margin-top: 6px; }
.reason { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 20px; color: var(--ink-2); }
.reason .ic { width: 14px; height: 14px; color: var(--alloy); }
.reason-muted { color: var(--ink-muted); }
.reasons .reason:first-child { color: var(--ink); font-weight: 600; }   /* the lead reason: why now */
/* "Appointment Thu 10:00 AM" opens that client's card. The padding gives a finger more to land on
   without moving the line. */
.reasons .reason.reason-link { padding: 6px 0; margin: -6px 0; text-decoration: underline; text-decoration-color: var(--alloy);
                               text-decoration-thickness: 1px; text-underline-offset: 4px; }
.reasons .reason.reason-link:hover { text-decoration-color: var(--signal); }
/* Why now and Say under a hot client: Spotter's words, so the mark, in a well sunk into the paddock. */
.why-now { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s3); margin: var(--s3) 0 0;
           padding: var(--s3) var(--s4); max-width: 75ch; background: var(--paddock-sunken); }
.why-now dd { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink); }
.why-now .say-line { text-indent: -.48em; }   /* the opening quote hangs, so the words line up with the line below */
.why-tag { display: flex; gap: 6px; align-items: center; justify-content: flex-end; height: 21px; color: var(--ink-muted); }
.why-tag .ic { width: 13px; height: 13px; color: var(--ink); }
/* Texts to send (templates/_drafts.html): Spotter's draft in the same well, on one line that ends in an
   ellipsis (Open to send shows it whole, in the box where Send is), then Open to send and Not today as quiet
   words at one size on one line under it; the text circle at the row's end opens the same draft. */
.why-now .draft-words { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s6); margin: var(--s3) 0 0; }
.draft-form .go-link { margin-top: 0; font-size: 14px; }
.draft-form .btn-text { padding-left: 10px; padding-right: 10px; margin: 0 -10px; }   /* more to land on, unmoved */
.meta { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rank-row p.meta { margin-bottom: 0; }   /* a list row's line (_agent_list.html): its action sits right under it */
.actions { display: inline-flex; gap: var(--s2); flex: none; }
.btn-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--alloy); border-radius: 50%;
            color: var(--ink); background: transparent;
            transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
@media (hover: hover) { .btn-icon:hover { background: var(--ink); border-color: var(--ink); color: var(--paddock); } }
.btn-icon:active { background: var(--ink); border-color: var(--ink); color: var(--paddock); }
.btn-icon .ic { width: 17px; height: 17px; }

/* Texts (app/texting.py): the New texts list, and each conversation on its own page. A log, theirs and
   yours, not bubbles. */
.avatar.avatar-text { color: var(--ink); }   /* no heat: a text isn't a judgment */
.avatar-text .ic { width: 17px; height: 17px; }
/* The newest text, on one line. It opens the conversation (the name opens the profile). The clip that
   keeps it to one line would cut the link's focus ring, so the line has 5px of padding for the ring,
   taken back by its margins, and the link itself cuts the words with an ellipsis. */
.text-latest { margin: 2px -5px -5px; padding: 5px; font-size: 14px; line-height: 20px; color: var(--ink-2);
               max-width: calc(60ch + 10px); overflow: hidden; white-space: nowrap; }
.text-latest a { display: block; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.text-latest a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); }

/* A list narrower than 840px (a phone, a tablet, or a column beside Coming up): the name and the buttons on
   top, the reasons and Why now across the width below. Wider, the main track outruns Why now's 75ch, so every
   well stops at that one edge, with buttons or without. */
@container (max-width: 840px) {
  .rank-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av top act" "av more more";
              row-gap: 6px; }
  .rank-main { display: contents; }
  .rank-row .avatar { grid-area: av; }
  .rank-top { grid-area: top; align-self: center; }
  .rank-row .reasons, .rank-row .meta { grid-area: more; margin-top: 0; }
  .rank-row .text-latest { grid-area: more; margin-top: -5px; }   /* its padding holds the focus ring */
  .rank-row .actions { grid-area: act; }
  .rank-row.has-why { grid-template-areas: "av top act" "av more more" "av note note"; }
  .rank-row .why-now { grid-area: note; margin-top: 4px; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .why-now .why-tag { justify-content: flex-start; }   /* the width goes to the words: labels above */
  .why-now dd + dt { margin-top: 6px; }
  .rank-row .draft-form { grid-row: 4; grid-column: 2 / -1; }   /* under the draft, whatever rows came before */
  /* No well: Not today or Done right under the row's lines, in its place among the row's own parts. */
  .rank-row:not(.has-why) .draft-form { grid-row: auto; }
  .rank-main > .btn-text { grid-column: 2 / -1; justify-self: start; }   /* a list's Copy and See them: under */
  .rank-main > .more { grid-column: 2 / -1; min-width: 0; }   /* the meta, never in the buttons' column */
  .rank-n { display: none; }
}
/* A ranked list keeps its rank numbers in their column beside the avatar until the list is truly narrow (a
   phone): "ranked by what's happening now" shows its ranks. To reach and New texts have none. */
@container (max-width: 840px) {
  .rank:not(.rank-plain) .rank-row { grid-template-columns: 18px 40px minmax(0, 1fr) auto;
                                     grid-template-areas: "n av top act" "n av more more"; }
  .rank:not(.rank-plain) .rank-row.has-why { grid-template-areas: "n av top act" "n av more more" "n av note note"; }
  .rank:not(.rank-plain) .rank-n { display: block; grid-area: n; }
}
@container (max-width: 480px) {
  .rank:not(.rank-plain) .rank-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av top act" "av more more"; }
  .rank:not(.rank-plain) .rank-row.has-why { grid-template-areas: "av top act" "av more more" "av note note"; }
  .rank:not(.rank-plain) .rank-n { display: none; }
}

/* --- Coming up: day tabs, then each appointment a machined card ------------------------------------- */
/* The day tabs take their own row under the heading, so they read from the left at every width. */
.tabs { display: flex; flex: 1 0 100%; gap: 6px; flex-wrap: wrap; order: 1; margin-top: var(--s1); }
.tabs[hidden] { display: none; }
.appts .sec-head .seg { margin-left: auto; align-self: center; }   /* Mine or Whole store, at the heading's end */
.tab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--hairline);
       border-radius: var(--r-control); color: var(--ink); text-decoration: none; font-size: 13px; line-height: 18px;
       font-weight: 500; white-space: nowrap; transition: border-color .18s var(--ease); }
@media (hover: hover) { .tab:hover { border-color: var(--ink); } }
.tab:active { border-color: var(--ink); }
.tab.on { background: var(--ink); border-color: var(--ink); color: var(--paddock); }
.tab-n { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); }   /* how many that day */
.tab.on .tab-n { color: var(--paddock); opacity: .72; }
.reach-more summary { margin-top: var(--s2); }
.reach-more > .rank { margin-top: var(--s2); border-top: 1px solid var(--hairline); }
.day-title { display: flex; gap: var(--s3); align-items: center; margin: var(--s6) 0 var(--s3); color: var(--ink-muted); }
.day-title .today { color: var(--ink); }
/* Coming up shows Up next, one day, or all: every card is on the page, the rest wait hidden. */
.day-group.is-hidden, .appt.is-hidden, .appts .empty.is-hidden, .show-more.is-hidden { display: none; }
.appt { margin-bottom: var(--s4); background: var(--paddock-raised); border: 1px solid var(--hairline); }
.anchor { display: block; }   /* #client-...: the hot list's and the call's way in to a client's card */
.appt:target, .appt:has(> .anchor:target) { outline: 2px solid var(--signal); outline-offset: 2px; }
/* Show more: a quiet text action, its chevron turned down. */
.show-more { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; font-weight: 500; }
.show-more .chev { width: 14px; height: 14px; color: var(--alloy); transform: rotate(90deg); }
.appt-head { display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; padding: var(--s3) var(--s6);
             border-bottom: 1px solid var(--hairline); }
.time { font-size: 28px; line-height: 32px; font-weight: 500; white-space: nowrap; }
.time small { margin-left: 3px; font-stretch: 100%; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); }
.kind { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-2); }
.kind .ic { width: 15px; height: 15px; color: var(--alloy); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-left: auto; padding: 0 8px 0 10px;
          border: 1px solid var(--hairline); border-radius: var(--r-control); color: var(--ink-2); white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--alloy); }
.status-confirmed .status, .status-arrived .status { color: var(--clear); }   /* good, with its word */
.status-confirmed .status::before, .status-arrived .status::before { background: var(--clear); }
.appt-body { padding: var(--s4) var(--s6) 20px; }
.appt-who { display: flex; align-items: center; gap: 2px var(--s4); flex-wrap: wrap; }
.client { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.client.unknown { color: var(--ink-muted); font-weight: 500; }
.contact { font-size: 12px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* A phone number is an instrument: Condensed, tabular, never broken at a hyphen; a size up in a 12px line. */
.tel { font-stretch: var(--narrow); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
:is(.who, .contact) .tel { font-size: 13px; }
.appt-who .actions { margin-left: auto; }
.note { margin: var(--s2) 0 0; font-size: 14px; line-height: 22px; color: var(--ink-2); max-width: 75ch; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.chip .ic { width: 14px; height: 14px; color: var(--alloy); }
.chip-flag, .chip-warn { padding: 3px 11px 3px 9px; border: 1px solid var(--ink); border-radius: var(--r-control);
                         color: var(--ink); font-weight: 500; }
.chip-flag .ic { color: var(--ink); }
.chip-warn { border-color: var(--signal); color: var(--signal); }   /* declined work: the money waiting */
.chip-warn .ic { color: var(--signal); }
.chip-quiet { color: var(--ink-muted); }
.chip-quiet .ic { color: var(--ink-muted); }
/* A narrow list of cards (a phone, or the column beside the people): the time and its status on top,
   what kind under them; the name and the number on the left, the buttons beside them. */
.appts { container-type: inline-size; }
@container (max-width: 480px) {
  .appt-head { padding: var(--s3) var(--s4); row-gap: 2px; }
  .kind { order: 1; flex-basis: 100%; }
  .appt-body { padding: var(--s3) var(--s4) var(--s4); }
  .appt-who { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); }
  .appt-who .client, .appt-who .contact { grid-column: 1; }
  .appt-who .actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .more .ld { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Coming up across a whole page (a manager with no hot list): the heading and the tabs run the width with
   the panels above, the cards keep to one column, so a name and its buttons stay in reach of each other. */
@container (min-width: 1000px) {
  .appts > :not(.sec-head) { max-width: 880px; }
}
/* Before they walk in: Spotter's summary, in a well with the mark. */
.brief { margin-top: var(--s4); padding: var(--s3) var(--s4) 14px; background: var(--paddock-sunken); }
.brief p { margin: 6px 0 0; font-size: 14px; line-height: 22px; max-width: 75ch; }
.brief-tag { display: flex; gap: var(--s2); align-items: center; color: var(--ink-muted); }
.brief-tag .ic { width: 13px; height: 13px; color: var(--ink); }
/* More: a quiet underlined disclosure, its chevron turning down when open. */
.more { margin-top: var(--s3); }
.more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none;
                color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: underline;
                text-decoration-color: var(--alloy); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.more summary:hover { text-decoration-color: var(--signal); }
.more summary::-webkit-details-marker { display: none; }
.more summary .chev { width: 14px; height: 14px; color: var(--alloy); transition: transform .18s var(--ease); }
.more[open] summary .chev { transform: rotate(90deg); }
.block { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.block p { margin: 4px 0 0; font-size: 14px; line-height: 22px; }
.block-tag { color: var(--ink-muted); }
.block-tag .ic { width: 13px; height: 13px; vertical-align: -2px; color: var(--alloy); }
.block-warn .block-tag { color: var(--signal); }
.block-flag .block-tag { color: var(--ink); }
.flag { margin: var(--s3) 0 0; display: flex; gap: var(--s2); align-items: center; font-size: 14px; font-weight: 600; }
.flag .ic { width: 15px; height: 15px; }
.notes { margin: 4px 0 0; padding-left: 18px; font-size: 14px; line-height: 22px; }
.outcomes li + li { margin-top: 4px; }
.outcome-note { display: block; color: var(--ink); }

/* Label and value on one ruled line: no dotted leaders. On a card's More, the value reads as a sentence. */
.ld { display: flex; align-items: baseline; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--hairline); }
.ld-l { flex: none; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ld-dots { display: none; }
.ld-v { margin-left: auto; text-align: right; color: var(--ink); }
.more .ledger { margin-top: var(--s2); }
.more .ld { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
.more .ld-v { margin: 0; text-align: left; font-size: 14px; line-height: 20px; }

/* --- The instruments: this month, the week, the service lane --------------------------------------- */
.price { container-type: inline-size; padding: var(--s6); background: var(--paddock-raised); border: 1px solid var(--hairline); }
.gauge { padding: 20px 0 var(--s6); border-bottom: 1px solid var(--hairline); }
.gauge-top { display: flex; flex-direction: column; gap: 6px; }
.gauge-label { color: var(--ink-muted); }
.gauge-num { font-size: 64px; line-height: 1; font-weight: 300; letter-spacing: -.01em; }
.is-good .ld-v, .gauge-num.is-good { color: var(--clear); }
.is-bad .ld-v, .gauge-num.is-bad { color: var(--stop); }
/* The scale, drawn as an instrument: 1px alloy rules whatever its size, the needle 2px of signal. */
.scale { display: block; width: 100%; max-width: 420px; height: auto; margin-top: var(--s4); overflow: visible; }
.scale line, .scale path { vector-effect: non-scaling-stroke; }
.scale-line, .scale-tick { stroke: var(--alloy); stroke-width: 1; }
.mark-now { stroke: var(--signal); stroke-width: 2; animation: settle .7s var(--ease) both; }
.mark-pace { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.mark-prev { stroke: var(--alloy); stroke-width: 1; stroke-dasharray: 3 3; }
.scale-end { font-size: 11px; fill: var(--ink-muted); }
/* The needle settles onto its mark from just above, on its own value the whole time: where a browser holds
   the motion back, it still reads true. */
@keyframes settle { from { transform: translateY(-6px); opacity: .6; } to { transform: none; opacity: 1; } }
/* The scale's key, as captions with the values set as instruments. */
.scale-key { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px;
             font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.scale-key li { display: inline-flex; align-items: center; gap: 6px; }
.scale-key b { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.scale-key i { position: relative; flex: none; width: 9px; height: 14px; }
.key-now i { width: 2px; margin: 0 3.5px; background: var(--signal); }
.key-pace i { border-top: 1.5px solid var(--ink); }
.key-pace i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3.75px; width: 1.5px; background: var(--ink); }
.key-prev i { width: 0; margin: 0 4px; border-left: 1px dashed var(--alloy); }
.gauge-notes { margin: var(--s2) 0 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
/* The other readouts: the label, the value as an instrument, the notes, and the months in small bars. */
.ledger-tiles .tile { padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
.ledger-tiles .tile:last-child { padding-bottom: 0; border-bottom: 0; }
.ledger-tiles .ld { padding: 0; border: 0; }
.ledger-tiles .ld-l { font-size: 14px; flex: 0 1 auto; }
.ledger-tiles .ld-v { font-size: 26px; line-height: 1; font-weight: 500; white-space: nowrap; }
.tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-top: 6px; }
.tile-notes { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
/* A line of facts (the Watch's, a readout's notes): each fact keeps together where it fits, a middle dot between
   them, never a dot or a lone word left at a line's end. The line starts a dot's width to the left and clip-path
   cuts the dot that would begin a line, with no overflow clip to cut a focus ring. The dots are unspoken. */
.dots { display: flex; flex-wrap: wrap; margin-left: -1.25em; clip-path: inset(-4px -4px -4px 1.25em); }
.dots > span { position: relative; min-width: 0; padding-left: 1.25em; }
.dots > span::before { content: "·"; content: "·" / ""; position: absolute; left: .45em; }
.tile.is-error .ld-v, .tile.is-empty .ld-v { font-stretch: 100%; font-size: 14px; line-height: 20px; font-weight: 400;
                                             color: var(--ink-muted); white-space: normal; }
.bars { flex: none; width: 96px; height: 38px; }
.bar { fill: var(--hairline); }
.bar-has { fill: var(--alloy); }
.bar-now { fill: var(--ink); }
.bars text { font-size: 11px; letter-spacing: .06em; fill: var(--ink-muted); }
.bars-base { stroke: var(--alloy); stroke-width: 1; vector-effect: non-scaling-stroke; }   /* the ticks stand on a rule */
.days { display: block; width: 100%; max-width: 150px; height: auto; margin-top: var(--s2); }
.days text { font-size: 9px; letter-spacing: .04em; fill: var(--ink-muted); }
.days text.today { fill: var(--ink); font-weight: 700; }
/* Wide enough (the managers' cluster), this month lays out across: the lead readout on the left, the
   others in a grid on the right. */
@container (min-width: 760px) {
  .month-body { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); column-gap: var(--s12); align-items: start; }
  .month-body.no-lead { grid-template-columns: minmax(0, 1fr); }
  .month-body .gauge { padding-bottom: var(--s2); border-bottom: 0; }
  .month-body .ledger-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: var(--s8); }
  .month-body .ledger-tiles .tile { padding: 20px 0 var(--s4); border-bottom: 0; }
  .month-body .ledger-tiles .ld { flex-direction: column; align-items: flex-start; gap: 6px; }
  .month-body .ledger-tiles .ld-l { font-stretch: var(--wide); font-size: 11px; line-height: 16px; font-weight: 600;
                                    letter-spacing: .2em; text-transform: uppercase; font-feature-settings: "case";
                                    color: var(--ink-muted); }
  .month-body .ledger-tiles .ld-v { margin: 0; text-align: left; font-size: 36px; font-weight: 400; }
  /* Two readouts beside the gauge read down in the lead's own grammar, an eyebrow over the figure, each with
     its notes and months at the row's end; the two share the gauge's height, so there's no hole under them.
     Where the row can't hold the eyebrow on one line beside them (a narrower panel), the notes and months drop
     under the figure, still at the right: nothing wraps the eyebrow or runs into the figure. */
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) { display: flex; flex-direction: column; align-self: stretch; }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .tile { flex: 1 1 0; display: flex; flex-wrap: wrap; align-content: flex-start;
    align-items: flex-end; gap: var(--s3) var(--s8); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .tile:first-child { padding-top: 20px; }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .tile:last-child { padding-bottom: var(--s2); border-bottom: 0; }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .ld { flex: none; max-width: 100%; flex-direction: column; align-items: flex-start;
                                                                   gap: 6px; }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .ld-l { font-stretch: var(--wide); font-size: 11px; line-height: 16px;
    font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-feature-settings: "case"; color: var(--ink-muted); }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .ld-v { margin: 0; text-align: left; font-size: 36px; }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .tile-foot { margin: 0 0 0 auto; gap: var(--s6); align-items: flex-end; }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .tile-notes { text-align: right; max-width: 44ch; text-wrap: balance; }
  /* Set to the right, beside the months: each fact's dot after it, so the one that would end a line is cut. */
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .tile-notes.dots { justify-content: flex-end; margin: 0 -1.25em 0 0;
    clip-path: inset(-4px 1.25em -4px -4px); }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .tile-notes.dots > span { padding: 0 1.25em 0 0; }
  .month-body .ledger-tiles:not(:has(> .tile:nth-child(3))) .tile-notes.dots > span::before { left: auto; right: .45em; }
}

/* Cells: the week's and the lane's numbers in a hairline grid, two across, four where the panel runs wide.
   Each cell shares the row's lines (a subgrid: label, number, caption, chart), so a label that wraps keeps
   every number in the row on one line. A panel stretched to its neighbor's height grows only its last row,
   at the bottom, so the words stay at the top and the hairline grid reaches the panel's foot. Four cells:
   two rows of four lines, two across; one row, four across. */
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto) 1fr; gap: 1px;
         margin-top: var(--s4); background: var(--hairline); }
.cell { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; gap: 4px; min-width: 0;
        padding: var(--s4); background: var(--paddock-raised); }
.cell:nth-child(odd) { padding-left: 0; }
.col-side > .price:has(> .cells) { display: flex; flex-direction: column; }
.col-side > .price > .cells { flex: 1 0 auto; }
.cell-l { color: var(--ink-muted); }
.cell .kpi-num { font-size: 36px; line-height: 1; font-weight: 400; margin-top: 2px; }
.cell-s { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.cell-warn .cell-l { color: var(--signal); }   /* declined work: the money waiting, its tag in signal as on the card */
@container (min-width: 720px) {
  .cells { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto) 1fr; }
  .cell:nth-child(odd) { padding-left: var(--s4); }
  .cell:first-child { padding-left: 0; }
}
/* Two across, the right cell runs to the panel's edge, and a narrow panel sets the labels tighter so the
   longest ("Appointments") never spills out of its cell. */
@container (max-width: 719px) {
  .cell:nth-child(even) { padding-right: 0; }
}
@container (max-width: 312px) {
  .cell-l { font-stretch: 100%; letter-spacing: .14em; }
}
@container (max-width: 272px) {
  .cell-l { font-stretch: 100%; letter-spacing: .12em; }
}
.cells.cells-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto) 1fr;
                 border: 1px solid var(--hairline); }   /* the Assistant view */
.cells-4 .cell:nth-child(n) { padding: var(--s4); }
/* Two connected source totals keep the same instruments without empty grid cells. */
.cells.cells-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto) 1fr; }
.cells-2 .cell:last-child { padding-right: 0; }

/* --- Breakdowns: the month by person, department, or lead source ----------------------------------- */
.board { margin-bottom: var(--s12); }
.board .table-wrap { margin: 0; }
.board-table { width: 100%; border-collapse: collapse; }
.board-table th, .board-table td { padding: var(--s3) 0 var(--s3) var(--s6); border-bottom: 1px solid var(--hairline);
                                   text-align: left; vertical-align: baseline; }   /* a row's name on its figures' line */
.board-table tr > :first-child { padding-left: 0; }
.board-table thead th { color: var(--ink-muted); white-space: nowrap; }
.board-table tbody th { font-size: 15px; line-height: 22px; font-weight: 600; }
.board-table td { font-size: 22px; line-height: 26px; font-weight: 500; white-space: nowrap; }
.board-table .num { text-align: right; }
.board-table .vs { display: block; margin-top: 2px; font-stretch: 100%; font-size: 12px; line-height: 18px; font-weight: 500;
                   color: var(--ink-muted); }
/* The judgment's color sits on its word ("ahead", "behind"), the amount beside it muted. */
.vs-word { font-weight: 600; }
.vs-word.is-good { color: var(--clear); }
.vs-word.is-bad { color: var(--stop); }
.board-table td.is-hidden { font-stretch: 100%; font-size: 13px; line-height: 26px; font-weight: 400; color: var(--ink-muted); }
.fineprint { margin: var(--s2) 0 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.board-table .txt { font-stretch: 100%; font-size: 14px; line-height: 21px; font-weight: 400; white-space: normal; }
.board-table tbody th.txt { font-weight: 600; white-space: nowrap; }
/* The GM's agent counts (Settings > Agents): seven columns in the 760px column. Off phones the heads and the
   role may wrap and the gutters close to 16px, so Held back never runs past the edge. */
@media (min-width: 641px) {
  .board-table.agent-counts thead th, .board-table.agent-counts tbody th.txt { white-space: normal; }
  .board-table.agent-counts tr > * + * { padding-left: var(--s4); }
}

/* --- How was your appointment? (templates/_followup.html) ------------------------------------------ */
/* A panel in the page's flow under the call. Not a dialog: it covers nothing and never holds the keyboard.
   The choices are touched, so they're stadiums: alloy at rest, ink under the pointer, filled ink once
   chosen. Save is the ink stadium; Later and Skip are quiet text. */
.followup { position: relative; z-index: 1; margin: 0 0 var(--s8); padding: var(--s6); background: var(--paddock-raised);
            border: 1px solid var(--hairline); }   /* over the page while it makes room */
.followup.is-arriving > * { animation: land .28s var(--ease) both; }   /* the next one, or the line, arrives */
.followup.is-done { padding: 0; background: none; border: 0; }
.followup-form { max-width: 760px; }
.followup-said { display: flex; gap: var(--s2); align-items: center; margin: 0 0 var(--s3); color: var(--ink); font-size: 14px;
                 font-weight: 600; }
.followup.is-done .followup-said { margin: 0; }
.followup-said .ic { width: 16px; height: 16px; color: var(--clear); }
.followup-said.is-note { color: var(--ink-2); }
.followup-said.is-note .ic { color: var(--alloy); }
.followup-q { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; overflow-wrap: anywhere; text-wrap: balance; }
.followup-q .client-link { text-decoration: underline; text-decoration-color: var(--alloy); text-decoration-thickness: 1px;
                           text-underline-offset: 4px; }
.followup-meta { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.followup-error { margin-top: var(--s3); }
.followup-error[hidden] { display: none; }   /* .reply-error's flex would show it */
.picks { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; margin: var(--s4) 0 0; padding: 0; border: 0; }
.pick { position: relative; display: inline-flex; }
/* The radio stays in the page (a keyboard reaches it, the browser's "pick one" lands on it), unseen over
   its label; the label draws the state. */
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--alloy);
             border-radius: var(--r-control); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500;
             transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
@media (hover: hover) { .pick:hover span { border-color: var(--ink); } }
.pick:active span { border-color: var(--ink); }
.pick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paddock); }
.pick input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.followup-note { margin-top: var(--s4); max-width: 520px; }
.followup-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s6); margin-top: 20px; }
/* Later and Skip: the words where they are, a wider target for a thumb. */
.followup-foot .btn-text { padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.btn-text:disabled { opacity: .45; cursor: progress; text-decoration: none; }
.followup .fineprint { margin-top: var(--s3); max-width: 75ch; }

/* --- Buttons and fields, on every page ------------------------------------------------------------- */
/* The primary: an ink stadium. */
.btn-send { display: inline-flex; gap: var(--s2); align-items: center; justify-content: center; height: 44px; padding: 0 22px 0 24px;
            border: 0; border-radius: var(--r-control); background: var(--ink); color: var(--paddock); cursor: pointer;
            transition: background-color .18s var(--ease); }
@media (hover: hover) { .btn-send:hover { background: var(--ink-2); } }
.btn-send:active { background: var(--ink-2); }
.btn-send:disabled { opacity: .45; cursor: progress; }
.btn-send .ic { width: 16px; height: 16px; }
/* The quiet one: underlined words. */
.btn-text { border: 0; background: none; padding: 6px 0; color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 500;
            text-decoration: underline; text-decoration-color: var(--alloy); text-decoration-thickness: 1px;
            text-underline-offset: 4px; transition: text-decoration-color .18s var(--ease); }
.btn-text:hover { text-decoration-color: var(--signal); }
a.btn-text { display: inline-flex; align-items: center; }   /* a link in its look (Keep CDK): centered as a button is */
/* The irreversible ones: an outline stadium. */
.btn-ink { display: inline-flex; align-items: center; height: 40px; padding: 0 18px 0 20px; border: 1px solid var(--ink);
           border-radius: var(--r-control); background: transparent; color: var(--ink); cursor: pointer;
           transition: background-color .18s var(--ease), color .18s var(--ease); }
@media (hover: hover) { .btn-ink:hover { background: var(--ink); color: var(--paddock); } }
.btn-ink:active { background: var(--ink); color: var(--paddock); }
.field { display: grid; gap: 6px; }
.field label, .key-form label { color: var(--ink-muted); }
/* "Optional" after a field's eyebrow, in plain words: lowercase is never tracked. */
.field .opt { margin-left: 6px; font-stretch: 100%; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none;
              color: var(--ink-muted); }
.secret-input, .plain-input { width: 100%; min-width: 0; padding: 11px 14px; border: 1px solid var(--alloy); border-radius: var(--r-sm);
                              background: var(--paddock-sunken); color: var(--ink); font-size: 15px; line-height: 20px;
                              caret-color: var(--ink); transition: border-color .18s var(--ease); }
.secret-input:focus, .plain-input:focus { border-color: var(--ink); }
.secret-input { -webkit-text-security: disc; height: 44px; resize: none; overflow: hidden; white-space: nowrap; }

/* --- The pages behind a back link: a customer, a conversation, Settings ------------------------------ */
/* The same masthead as the dashboard's, a step in: the way back, then the name (or Settings) in the
   greeting's Expanded light, its buttons at the row's end, and one caption row. A conversation and
   Settings keep to a 760px column, the masthead with them. */
.mast-thread .mast-in, .mast-profile .mast-in { padding-top: var(--s8); }
.mast-thread .mast-in { max-width: calc(760px + 2 * var(--s8)); }
/* The way back: a plain link in sentence case (the mirror of Open card), never a label over the name. */
.back { display: inline-flex; gap: 4px; align-items: center; min-height: 32px; margin-bottom: var(--s3); font-size: 13px;
        font-weight: 500; }
.back .ic { width: 14px; height: 14px; color: var(--alloy); }
.ic.flip { transform: rotate(180deg); }
.mast-thread .mast-row, .mast-profile .mast-row { align-items: center; row-gap: var(--s4); }
.mast-thread .hello, .mast-profile .hello { min-width: 0; overflow-wrap: anywhere; }   /* a long name wraps, never scrolls */
.mast-thread .mast-row > .actions, .mast-profile .mast-row > .actions { flex: none; }
.mast-thread .btn-icon, .mast-profile .actions .btn-icon { width: 44px; height: 44px; }
/* On a customer's page the call is the thing to do: the call button filled, as on the call panel. */
.mast-profile .actions .btn-icon:first-child { background: var(--ink); border-color: var(--ink); color: var(--paddock); }
@media (hover: hover) { .mast-profile .actions .btn-icon:first-child:hover { background: var(--ink-2); border-color: var(--ink-2); } }
.mast-profile .actions .btn-icon:first-child:active { background: var(--ink-2); border-color: var(--ink-2); }
/* Heat beside the name, marked the way the avatars are: hot filled ink, warm an ink ring, worth a call
   an alloy ring. */
.heat-tag { display: inline-flex; align-items: center; height: 24px; margin-left: 2px; padding: 0 8px 0 10px;
            border: 1px solid var(--ink); border-radius: var(--r-control); color: var(--ink); vertical-align: middle;
            white-space: nowrap; }
.heat-tag.heat-hot { background: var(--ink); color: var(--paddock); }
.heat-tag.heat-worth-a-call { border-color: var(--alloy); color: var(--ink-2); }

/* --- A conversation (templates/thread.html) -------------------------------------------------------- */
/* A log, theirs and yours, not bubbles: who in its own column as an eyebrow, when as an instrument, the
   words, and how a text of yours went, ruled by hairlines. The reply is a panel under it, its field sunk in. */
.thread-page { max-width: calc(760px + 2 * var(--s8)); }
.thread { list-style: none; margin: 0; padding: 0; }
.msg { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 2px var(--s4); padding: var(--s4) 0;
       border-bottom: 1px solid var(--hairline); }
.msg-who { grid-row: 1 / span 2; padding-top: 2px; color: var(--ink); overflow-wrap: anywhere; }
.msg-outbound .msg-who { color: var(--ink-muted); }
.msg-when { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); }
.msg-body { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 65ch; }
.msg-status { grid-column: 2; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.msg-failed .msg-status { color: var(--stop); font-weight: 600; }
.thread-new { margin: var(--s4) 0 0; font-size: 14px; font-weight: 600; }
.reply { margin-top: var(--s8); }
.reply-form { display: grid; gap: var(--s3); padding: var(--s6); background: var(--paddock-raised);
              border: 1px solid var(--hairline); }
.reply-form label { color: var(--ink-muted); }
.reply-form textarea, .why-now textarea { width: 100%; min-height: 104px; padding: var(--s3) 14px;
                       border: 1px solid var(--alloy); border-radius: var(--r-sm); background: var(--paddock-sunken);
                       color: var(--ink); font-size: 15px; line-height: 1.55; resize: vertical; caret-color: var(--ink);
                       transition: border-color .18s var(--ease); }
.reply-form textarea:focus, .why-now textarea:focus { border-color: var(--ink); }
.why-now textarea { display: block; }   /* a drafted note's words (_agent_note.html): the field alone in the well */
.reply-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s1); }
.reply-count { margin-left: auto; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); }
/* Use the Say line: Spotter wrote it, so the mark, on a hairline stadium. */
.say-chip { display: inline-flex; gap: var(--s2); align-items: center; height: 40px; padding: 0 16px 0 14px;
            border: 1px solid var(--hairline); border-radius: var(--r-control); background: transparent; color: var(--ink);
            font-size: 13px; line-height: 18px; font-weight: 500; cursor: pointer; transition: border-color .18s var(--ease); }
@media (hover: hover) { .say-chip:hover { border-color: var(--ink); } }
.say-chip:active { border-color: var(--ink); }
.say-chip .ic { width: 15px; height: 15px; }
.reply-note, .reply-error, .reply-blocked { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; font-size: 14px;
                                            line-height: 21px; }
.reply-note { color: var(--ink-2); }
.reply-error, .reply-blocked { color: var(--stop); font-weight: 600; }
.reply-note .ic, .reply-error .ic, .reply-blocked .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.reply-note .ic { color: var(--alloy); }
.reply-note .ic:has(> use[href="#i-spark"]) { color: inherit; }   /* Spotter's draft: the mark in the line's color */
.reply > .fineprint { margin-top: var(--s3); max-width: 75ch; }

/* --- A customer's profile (templates/profile.html) ------------------------------------------------- */
/* History reads as a log, like a conversation: the date set as an instrument in its own column, what
   happened, and how it stands, ruled by hairlines. No tables, so nothing scrolls sideways on a phone. */
.profile-hot .reasons { margin-top: var(--s4); }
.hist { list-style: none; margin: 0; padding: 0; }
.hist-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 2px var(--s6); align-items: baseline;
            padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
.hist-when { font-size: 18px; line-height: 22px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.hist-when small { display: block; margin-top: 2px; font-stretch: 100%; font-size: 12px; line-height: 16px; font-weight: 400;
                   color: var(--ink-muted); }
.hist-what { min-width: 0; }
.hist-line { margin: 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.hist-line + .hist-line { margin-top: 2px; }
.hist-note { max-width: 70ch; }
.hist-meta { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); max-width: 70ch; overflow-wrap: anywhere; }
.hist-tag { color: var(--ink-2); white-space: nowrap; }
/* An appointment's status (no answer yet): the dashboard card's small stadium, its dot clear once
   confirmed or arrived. */
.hist-appt .hist-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 10px;
                       border: 1px solid var(--hairline); border-radius: var(--r-control); }
.hist-appt .hist-tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--alloy); }
.hist-appt.is-clear .hist-tag { color: var(--clear); }
.hist-appt.is-clear .hist-tag::before { background: var(--clear); }
/* Text actions that go somewhere else: Open card, Open the conversation. Quiet words, the chevron forward. */
.hist-open, .go-link { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; font-size: 13px; font-weight: 500; }
.hist-open { grid-column: 2; justify-self: start; margin-top: var(--s1); }   /* under what it opens, never full width */
.go-link { margin-top: var(--s3); }
.hist-open .ic, .go-link .ic { width: 14px; height: 14px; color: var(--alloy); }
/* At a glance: each fact under its own eyebrow, like the notes after it (Declined, Shopping online), so
   the panel reads down in one rhythm, a hairline between. */
.glance .ledger .ld { display: block; padding: var(--s3) 0; }
.glance .ledger .ld:last-child { padding-bottom: 0; border-bottom: 0; }
.glance .ld-l { display: block; font-stretch: var(--wide); font-size: 11px; line-height: 16px; font-weight: 600;
                letter-spacing: .2em; text-transform: uppercase; font-feature-settings: "case"; color: var(--ink-muted); }
.glance .ld-v { display: block; margin: 4px 0 0; text-align: left; font-size: 14px; line-height: 21px;
                font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.price .sec-head + .block { margin-top: var(--s2); border-top: 0; }
/* On a tablet the profile's panels flow down two balanced columns (the glance on the left, the rest beside
   it), so a tall glance never leaves a hole beside a short one; a lone panel keeps the full width. */
@media (min-width: 700px) and (max-width: 1099px) {
  .profile-page .col-side { align-items: flex-start; }
  .profile-page .col-side:has(> :nth-child(2)) { display: block; columns: 2; column-gap: var(--s8); }
  .profile-page .col-side:has(> :nth-child(2)) > * { break-inside: avoid; margin-bottom: var(--s8); }
  .profile-page .col-side:has(> :nth-child(2)) > :last-child { margin-bottom: 0; }
}
/* Texts beside the profile: the conversation's log, narrower. */
.thread-short .msg { grid-template-columns: 56px minmax(0, 1fr); gap: 2px var(--s3); padding: var(--s3) 0; }
.thread-short .msg-when { font-size: 13px; line-height: 18px; }
.thread-short .msg-body { font-size: 14px; line-height: 21px; }

/* --- Settings (templates/settings.html) ------------------------------------------------------------ */
/* A key cabinet: the keys and the GM's cloud switch, one view at a time, each system's keys folded under
   its own row. Clear blue and stop red only on test results, always with their words. */
.settings-page { max-width: calc(760px + 2 * var(--s8)); }
.settings-page .views { margin-bottom: var(--s8); }
/* How the last change went: one line on a hairline panel. */
.flash { display: flex; gap: var(--s2); align-items: flex-start; margin: 0 0 var(--s6); padding: 14px var(--s4);
         background: var(--paddock-raised); border: 1px solid var(--hairline); font-size: 14px; line-height: 21px;
         font-weight: 600; }
.flash .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.flash.is-good { color: var(--clear); }
.flash.is-bad { color: var(--stop); }
/* After a floorplan or rooftop change the line sits in that article under its heading, where the page lands. */
.slot > .flash { margin: var(--s3) 0 var(--s2); }
/* Cloud routing: a machined panel, its label and value rows on hairlines. */
.cloud-sheet { margin-bottom: var(--s12); }
.cloud-sheet .sec-head h2 { display: inline-flex; gap: 10px; align-items: center; }
.cloud-sheet .sec-head .ic { width: 20px; height: 20px; color: var(--alloy); }
/* A value too long for the line (the approval, on a phone) drops under its label, at the line's end. */
.cloud-sheet .ld { flex-wrap: wrap; gap: 2px var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); }
.cloud-sheet .ld-l { line-height: 21px; }
.cloud-sheet .ld-v { min-width: 0; font-size: 14px; line-height: 21px; font-weight: 600; overflow-wrap: break-word; }
.shield-line, .cloud-note { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s4) 0 0; font-size: 14px;
                            line-height: 21px; color: var(--ink-2); max-width: 75ch; }
.cloud-note { margin-top: var(--s3); color: var(--ink); font-weight: 600; }
.shield-line .ic, .cloud-note .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--alloy); }
.cloud-gm { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--hairline); }
.approve-form { display: grid; gap: var(--s4); }
.approve-covers { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-2); }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: 14px; line-height: 21px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.approve-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s1); }
.slot-note { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.approve-foot .slot-note { font-size: 12px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums slashed-zero; }
.cloud-gm .slot-note { margin: 0; display: block; }
.cloud-gm .more { margin-top: var(--s3); }
.cloud-sheet > .fineprint { margin-top: var(--s4); }
.approve-form .field { max-width: 520px; }
/* A key's row: its name, and how it stands at the line's end ("Ends in 7QXA"). An empty one shows its
   field; a saved one folds Test, New key and Remove into one line of quiet words. A state too long for the
   line (an agent's waiting sentence in Settings > Agents) wraps on its own line under the name. */
.slot { padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.slot-head { display: flex; align-items: baseline; gap: 2px var(--s4); flex-wrap: wrap; }
.slot-name { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.slot-sm .slot-name { font-size: 15px; line-height: 22px; }
.slot-state { margin-left: auto; font-size: 13px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere;
              font-variant-numeric: tabular-nums slashed-zero; }   /* "Ends in 0O8B": a zero never reads as an O */
.slot-help { margin: var(--s1) 0 0; font-size: 13.5px; line-height: 20px; color: var(--ink-2); max-width: 75ch; }
.slot-meta { margin: var(--s1) 0 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.slot-meta .is-good { color: var(--clear); font-weight: 600; }
.slot-meta .is-bad { color: var(--stop); font-weight: 600; }
.slot-meta .is-strong { color: var(--ink); font-weight: 600; }
.key-form { display: grid; gap: var(--s2); margin-top: var(--s4); }
.key-row { display: flex; gap: var(--s3); align-items: stretch; }
.key-row .secret-input, .key-row .plain-input { flex: 1; }
.slot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s6); margin-top: var(--s3); }
.slot-actions form { margin: 0; }
.slot-actions .more { margin-top: 0; }
.slot-actions .more[open] { order: 1; flex-basis: 100%; }   /* an open one takes its own row, under the rest */
.slot-actions .key-form { margin-top: var(--s1); }
/* Every confirmation waits in a well under its More, the irreversible button an outline stadium. */
.confirm { margin: var(--s1) 0 2px; padding: var(--s4); background: var(--paddock-sunken); }
.confirm p { margin: 0 0 var(--s3); font-size: 14px; line-height: 21px; }
/* Data connections: one row per system, its keys a tap away. Its own summary only (>): the More inside a
   key's row keeps the quiet disclosure's look. */
.group-head { margin: var(--s12) 0 var(--s1); font-stretch: var(--wide); font-size: 16px; line-height: 22px; font-weight: 500; }
.group-note { margin: 0 0 var(--s3); font-size: 13.5px; line-height: 20px; color: var(--ink-2); max-width: 75ch; }
.group-head + .group-note { max-width: none; padding-bottom: var(--s3); border-bottom: 1px solid var(--hairline); }
.system { border-bottom: 1px solid var(--hairline); }
.system > summary { display: flex; align-items: baseline; gap: var(--s2) var(--s4); min-height: 56px; padding: var(--s4) 0;
                  cursor: pointer; list-style: none; }
.system > summary::-webkit-details-marker { display: none; }
.system-name { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; line-height: 24px; font-weight: 600; }
.system-name .chev { width: 16px; height: 16px; color: var(--alloy); transition: transform .18s var(--ease); }
.system[open] .system-name .chev { transform: rotate(90deg); }
.system > summary:hover .system-name { text-decoration: underline; text-decoration-color: var(--signal);
                                     text-decoration-thickness: 1px; text-underline-offset: 4px; }
.system-state { margin-left: auto; font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.system-body { padding: 0 0 var(--s4) 22px; }   /* in line with the system's name, past its chevron */
.system-body > .group-note { margin-top: 0; }
.system-body .slot:last-child { border-bottom: 0; }
/* Recent changes: the breakdown table, its when set as an instrument. */
.board-table.changes tbody th.txt { font-stretch: var(--narrow); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.board-table.changes { font-variant-numeric: tabular-nums slashed-zero; }   /* the keys' last 4s and fingerprints */

/* --- The lit edge (DESIGN.md, Elevation) --------------------------------------------------------- */
/* Each raised panel catches the light along its top edge, like a machined chamfer: the hairline by Day, a step
   above it at Night. A later rule of its own, so each panel's border stays as it is. */
.move, .price, .appt, .followup, .reply-form, .flash, .answer-sheet, .cells.cells-4 { border-top-color: var(--edge-lit); }

/* --- The footer ------------------------------------------------------------------------------------ */
.fine { max-width: 1320px; width: calc(100% - 2 * var(--s8)); margin: 0 auto; padding: var(--s4) 0 var(--s8); display: flex;
        flex-wrap: wrap; gap: 6px var(--s6); border-top: 1px solid var(--hairline); font-size: 12px; line-height: 18px;
        color: var(--ink-muted); }
.fine a { margin-left: auto; color: var(--ink); }   /* Settings, for key admins and the GM */
.fine .sample { color: var(--ink); font-weight: 600; }

/* --- The layout ------------------------------------------------------------------------------------ */
/* One column by default. The managers' cluster (numbers-first) comes first and runs across the page; the
   floor's instruments follow the lists and become a rail at 1100px. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s12); align-items: start; }
.col-main, .col-people, .boards { min-width: 0; }
.col-main > :last-child { margin-bottom: 0; }
.col-side { display: flex; flex-direction: column; gap: var(--s8); min-width: 0; }
.col-side > .empty { margin: 0; }
@media (min-width: 700px) {   /* tablets and up: the instruments two across */
  .col-side { flex-flow: row wrap; }
  .col-side > * { flex: 1 1 300px; min-width: 0; }
  .numbers-first .col-side > .month { flex-basis: 100%; }
}
@media (min-width: 1100px) {   /* the floor: the rail */
  .has-rail { grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--s12); }
  /* A profile's glance is its left rail, read first as it is on a phone: the order on screen is the order
     a keyboard and a screen reader take. */
  .profile-page .cols { grid-template-columns: 380px minmax(0, 1fr); column-gap: var(--s12); }
  .has-rail .col-side, .profile-page .col-side { flex-flow: column nowrap; }
  .has-rail .col-side > *, .profile-page .col-side > * { flex: none; }
  .profile-page .cols:not(:has(> .col-side)) { grid-template-columns: minmax(0, 1fr); }   /* nothing for the rail: no empty column */
}
@media (min-width: 1180px) {   /* managers: the people and Coming up side by side */
  .numbers-first .col-side { column-gap: var(--s12); }   /* the panels split on the same line as the lists under them */
  .numbers-first .col-main.is-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12);
                                      align-items: start; }
  .numbers-first .is-split .col-people > :last-child { margin-bottom: 0; }
}
@media (min-width: 1500px) {   /* the floor, wide: the main column splits too */
  .has-rail .col-main.is-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12);
                                 align-items: start; }
  .has-rail .is-split .col-people > :last-child { margin-bottom: 0; }
}

/* --- Phones ---------------------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mast-in, .label { padding-left: var(--s4); padding-right: var(--s4); }
  .mast-in { padding-top: var(--s8); }
  .label { padding-top: var(--s8); padding-bottom: var(--s12); }
  .fine { width: calc(100% - 2 * var(--s4)); padding: var(--s4) 0 var(--s6); }
  .fine a { margin-left: 0; }
  .ask { margin-top: var(--s6); }
  .ask-field { padding-left: 16px; }
  .ask-go { width: 44px; padding: 0; }   /* the icon alone */
  .ask-go span { display: none; }
  /* The suggestions scroll sideways, past the right gutter; 4px of room on the other sides holds a chip's
     focus ring (a scroller clips what overflows it), taken back by the margins. */
  .suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px var(--s4) 4px 4px;
             margin: calc(var(--s4) - 4px) calc(-1 * var(--s4)) -4px -4px; }
  .suggest::-webkit-scrollbar { display: none; }
  .sug { flex: none; height: 44px; }
  .answer-sheet { padding: 20px; }
  .thinking { min-height: 42px; }   /* room for the 8s line's two lines from the start: it never grows the sheet */
  /* The call stacks: what kind, when, who, then the buttons. */
  .move { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "when" "what" "act"; gap: var(--s3); padding: 20px; }
  .move:not(:has(> .actions, > .move-open)) { grid-template-areas: "head" "when" "what"; }   /* nothing to tap: no empty row */
  .move-when { min-width: 0; padding: 0; border: 0; }
  .move-time { font-size: 48px; }
  .move-name { font-size: 22px; line-height: 30px; }
  .move .actions, .move-open { justify-self: start; margin-top: var(--s1); }
  .move-number { font-size: 24px; }
  .views { margin-bottom: var(--s6); }
  .seg a { position: relative; height: 36px; }   /* 44px with the control's own edge */
  .seg a::before { content: ""; position: absolute; inset: -4px -1px; }   /* and a finger's 44px, out to that edge */
  /* The views, the month, and Mine or Whole store run the phone's width, their items sharing it. */
  .views .seg, .appts .sec-head .seg { flex: 1 1 100%; margin-left: 0; }
  .views .seg a, .appts .sec-head .seg a { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  .sec { margin-bottom: var(--s12); }
  .rank-row .text-latest { grid-area: more; margin-top: -5px; }   /* its padding holds the focus ring */
  .btn-icon { width: 44px; height: 44px; }
  /* A busy week's day tabs: one row that scrolls sideways (room for the focus ring, as the suggestions). It
     holds its tabs' screen-reader words too (position), so none of them widens the page. */
  .tabs { position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -4px;
          margin-right: calc(-1 * var(--s4)); padding: 4px var(--s4) 4px 4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; height: 44px; padding: 0 16px; }
  .show-more, .hist-open, .go-link, .more summary, .answer-done, .move-open, .btn-ink { min-height: 44px; }
  /* A finger's 44px on the small links, without moving a line: the appointment reason, a customer's name
     (up into the row's own top space), Settings' Test. */
  .reasons .reason.reason-link { position: relative; padding: 12px 0; margin: -12px 0; }
  a.name, .client .client-link { padding-top: 20px; margin-top: -20px; }
  .slot-actions .btn-text { min-height: 44px; padding: 0 10px; margin: 0 -10px; }
  .answer-done { display: inline-flex; align-items: center; }
  .followup { padding: 20px; }
  .pick span { min-height: 44px; }
  .followup-foot .btn-send, .followup-foot .btn-text { min-height: 44px; }
  .draft-form .btn-text { min-height: 44px; }
  .price { padding: 20px; }
  .gauge-num { font-size: 56px; }
  /* The pages behind a back link: the way back a thumb's height; a conversation's who column narrower,
     its reply panel tighter, its buttons 44px. */
  .back { min-height: 44px; margin-bottom: var(--s1); }
  .msg { grid-template-columns: 64px minmax(0, 1fr); gap: 2px var(--s3); }
  .thread-short .msg { grid-template-columns: 56px minmax(0, 1fr); }
  .reply-form { padding: 20px; }
  .say-chip, .reply-foot .btn-send { min-height: 44px; }
  .reply-foot .btn-send { margin-left: auto; }   /* wrapped under the Say line, Send keeps to the right */
  /* A profile on a phone: Why now and Say with their labels above the words (as under a hot client on
     the dashboard's narrow lists); in its history, the date, then the words, how it stands under them. */
  .profile-hot .why-now { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .profile-hot .why-tag { justify-content: flex-start; }
  .profile-hot .why-now dd + dt { margin-top: 6px; }
  .why-now:has(textarea) { grid-template-columns: minmax(0, 1fr); gap: 6px; }   /* a drafted note: Draft above */
  .why-now:has(textarea) .why-tag { justify-content: flex-start; }               /* its words, the width theirs */
  .hist-row { grid-template-columns: 72px minmax(0, 1fr); gap: 2px var(--s4); }
  .hist-tag { grid-column: 2; justify-self: start; margin-top: 6px; white-space: normal; }
  /* A breakdown row on a phone: the name, then each value under its own label, two across. */
  .board-table thead { display: none; }
  .board-table, .board-table tbody { display: block; }
  .board-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); padding: var(--s3) 0 14px;
                    border-bottom: 1px solid var(--hairline); }
  .board-table tbody th { grid-column: 1 / -1; padding: 0; border: 0; font-size: 16px; }
  .board-table td { padding: 0; border: 0; text-align: left; font-size: 22px; white-space: normal; }
  .board-table .num { text-align: left; }
  .board-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-stretch: var(--wide); font-size: 11px;
                            line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
                            font-feature-settings: "case"; color: var(--ink-muted); }
  .board-table td.is-hidden { line-height: 1.4; }
  .board-table td:empty { display: none; }   /* no value: no label either */
  .cells.cells-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto) 1fr; }
  /* Settings on a phone: its views run the width in Normal capitals (Expanded ones don't fit), and four of
     them (Agents with DASHBOARD_AGENTS) track tight to share one row (two by two under 351px); the key and
     Save stack full width; a system's keys use the full width. */
  .settings-page .seg-views { flex: 1 1 100%; }
  .settings-page .seg-views a { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-stretch: 100%; }
  .settings-page .seg-views:has(> a:nth-child(4)) a { padding: 0 4px; letter-spacing: .02em; }
  /* Six views (Lead response and Website chat with DASHBOARD_AGENTS): two by three, each label whole. */
  .settings-page .seg-views:has(> a:nth-child(5)) { display: grid; grid-template-columns: 1fr 1fr; row-gap: 8px;
                                                    border-radius: var(--r-control); }
  .settings-page .seg-views:has(> a:nth-child(5)) a { padding: 0 6px; letter-spacing: .06em; }
  .settings-page .views { margin-bottom: var(--s6); }
  .key-row { flex-wrap: wrap; }   /* the key across, then Save the width with its wait beside it */
  .key-row :is(.secret-input, .plain-input) { flex: 1 1 100%; }
  .key-row .btn-send { flex: 1 1 auto; justify-content: center; }
  .system-body { padding-left: 0; }
  .approve-foot .btn-send { width: 100%; }
}
@media (max-width: 400px) {   /* the follow-up's wait: the mark alone, so Save, Later and Skip keep one row; the status still speaks */
  .followup-foot .hang-wait > span { display: none; }
  :is(.draft-form, .key-row, .slot-actions, .approve-foot) .hang-wait > span,
  form:has(> .hang-wait) > .hang-wait > span { display: none; }   /* every other form's wait: the mark alone too */
}
@media (max-width: 360px) {   /* the narrowest phones: the views and Settings' views still fit, tracked tighter */
  .views .seg a { font-stretch: 100%; letter-spacing: .1em; }
  .settings-page .seg-views a { padding: 0 6px; letter-spacing: .06em; }
}
@media (max-width: 350px) {   /* four views on the narrowest phones: two by two */
  .settings-page .seg-views:has(> a:nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; row-gap: 8px; border-radius: var(--r-control); }
}

/* Where the system draws the colors (Windows' contrast themes), the chosen one keeps a fill, and the
   instruments' marks (which a browser leaves in the theme's colors) take the system's: the scale and its
   target and last month in its text color, the needle and its key in Highlight, this month's bars in text
   and the months before in gray. The ink buttons keep an edge. */
@media (forced-colors: active) {
  .pick input:checked + span, .seg a.on, .tab.on { forced-color-adjust: none; background: Highlight; border-color: Highlight;
                                                    color: HighlightText; }
  .move-dot { forced-color-adjust: none; }
  .scale-line, .scale-tick, .mark-pace, .mark-prev { stroke: CanvasText; }
  .mark-now { forced-color-adjust: none; stroke: Highlight; }
  .bar-has { fill: GrayText; }
  .bar-now, .days .bar-has { fill: CanvasText; }
  .scale-end, .bars text, .days text, .days text.today { fill: CanvasText; }
  .bars-base { stroke: CanvasText; }
  .key-now i { forced-color-adjust: none; background: Highlight; }
  .key-pace i::after { forced-color-adjust: none; background: CanvasText; }
  .ask-spark { color: CanvasText; }
  .ask-go, .btn-send { border: 1px solid ButtonText; }
  .hang-line { stroke: CanvasText; }
  .hang-car { forced-color-adjust: none; stroke: Highlight; }
  .hang-gap { forced-color-adjust: none; stroke: Canvas; }
}
/* Reduced motion: only fades, each from a visible start. The call fades in where it would rise; the needle
   fades where it would settle; the hangtime is the still mark, its dot at rest on its place. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .move { animation-name: fade; }
  .mark-now { animation-name: fade; }
  .answer-sheet > :not(.q, .thinking), .followup.is-arriving > * { animation-name: fade; }
  .hang-car { animation: none; }
  .hang-gap { display: none; }
}

/* --- The lot (app/lot.py, templates/_lot_aged.html): Aged units, on the list panels' tokens. Ink only: no signal, no
   red; the counts are words. A row: the stock number and the car, then what it is, its days at the line's end, and
   its money (when the person may see it) under the days. ------------------------------------------------------------ */
.lot-lines { display: grid; gap: 2px; margin: 0 0 var(--s2); }
.lot-lines p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lot-month { margin: 0 0 var(--s3); font-size: 14px; line-height: 21px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lot-rows { list-style: none; margin: 0; padding: 0; }
.lot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s4); align-items: baseline;
           padding: var(--s3) 0; border-top: 1px solid var(--hairline); }
.lot-row > p { margin: 0; }
.lot-row .lot-car { grid-column: 1; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.lot-row .meta { grid-column: 1; margin-top: 2px; }
.lot-row .lot-days { grid-column: 2; grid-row: 1; font-stretch: var(--narrow); font-variant-numeric: tabular-nums;
                     font-size: 15px; line-height: 22px; text-align: right; white-space: nowrap; color: var(--ink); }
.lot-row .lot-money { grid-column: 2; grid-row: 2; margin-top: 2px; font-stretch: var(--narrow); font-variant-numeric: tabular-nums;
                      font-size: 13px; line-height: 18px; text-align: right; white-space: nowrap; color: var(--ink-muted); }
.lot-panel .more .lot-rows { margin-top: var(--s2); }
/* Rows from two or more stores: each store a group under its day-title eyebrow, its first row's hairline right under. */
.lot-panel .day-title + .lot-rows { margin-top: 0; }
.lot-fine { max-width: 72ch; }

/* Settings > Tekion rooftops: one row a store under the article's line. */
.rooftop { padding: var(--s4) 0 0; }
.rooftop + .rooftop { margin-top: var(--s4); border-top: 1px solid var(--hairline); }
.rooftop .slot-name { font-size: 15px; line-height: 22px; }
.rooftop .key-form { margin-top: var(--s2); }

/* Settings > Floorplan: each store's line in one form. With Floored off its financing fields hide (CSS alone, no
   script), and Advance hides beside The amount floored. */
.fp-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4) var(--s3); margin-top: var(--s4);
           max-width: 640px; }
.fp-form > * { grid-column: 1 / -1; }
.fp-form > p { margin: 0; }
.fp-form > .fp-floored { grid-column: 1; width: 20px; height: 20px; margin: 0; align-self: center; accent-color: var(--ink);
                         cursor: pointer; }
.fp-form > .fp-floored-label { grid-column: 2; align-self: center; font-size: 14px; line-height: 21px; font-weight: 600;
                               cursor: pointer; }
.fp-floored:not(:checked) ~ .fp-financing { display: none; }
.fp-financing, .fp-assistance { display: grid; gap: var(--s4); padding-left: var(--s4); border-left: 1px solid var(--hairline); }
.fp-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s4); }
.fp-pair > label { grid-row: 1; }
.fp-pair > .plain-input { grid-row: 2; }
.fp-pair > .slot-help { grid-column: 1 / -1; }
.fp-choice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0; padding: 0; border: 0; min-width: 0; }
.fp-choice > legend { width: 100%; padding: 0; margin-bottom: 6px; font-stretch: var(--wide); font-size: 11px; line-height: 16px;
                      font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-feature-settings: "case";
                      color: var(--ink-muted); }
.fp-choice > input[type="radio"] { margin: 0; accent-color: var(--ink); }
.fp-choice > label { margin-left: -8px; font-size: 14px; line-height: 21px; }
.fp-choice > .field, .fp-choice > .slot-help { flex-basis: 100%; }
.fp-choice .field .plain-input { max-width: 160px; }
.fp-basis-floored_amount:checked ~ .fp-advance { display: none; }
/* A second label+input in one field starts a new field: the form's 16px, not the field's 6px. */
.fp-form .field:not(.fp-pair) > .plain-input + label { margin-top: calc(var(--s4) - 6px); }
@media (max-width: 560px) { .fp-pair { grid-template-columns: minmax(0, 1fr); } .fp-pair > label, .fp-pair > .plain-input { grid-row: auto; }
  .fp-pair > .plain-input + label { margin-top: calc(var(--s4) - 6px); } }
/* On a phone the floorplan's choices take one row each, the radio at 20px beside its words, each row a finger's 44px;
   Floored and Net of assistance too. */
@media (max-width: 640px) {
  .fp-choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 var(--s3); }
  .fp-choice > input[type="radio"] { grid-column: 1; width: 20px; height: 20px; align-self: center; }
  .fp-choice > label { grid-column: 2; display: flex; align-items: center; min-height: 44px; margin-left: 0; }
  .fp-choice > .field, .fp-choice > .slot-help { grid-column: 1 / -1; }
  .fp-choice > .field { margin-top: var(--s2); }
  .fp-form > .fp-floored-label { display: flex; align-items: center; min-height: 44px; }
  .fp-form .check { min-height: 44px; align-items: center; }
}

/* What's moving it (Telemetry, templates/_agent_moving.html): one ruled well, one label column for every number, so
   each line of words starts at the same place and the well runs the section's full width (the hot list's single
   Why now keeps its own measure). The words keep a reading measure inside it. A phone stacks each label above its
   words. CSS only: the template is inside Telemetry's signed fingerprint. */
#whats-moving .why-now { max-width: none; margin: 0; grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--s6);
                         padding: var(--s4) var(--s6); }
#whats-moving .sec-head + .why-now, #whats-moving .day-title + .why-now { margin-top: var(--s4); }
#whats-moving .why-now + .why-now { border-top: 1px solid var(--hairline); }
#whats-moving .why-tag { justify-content: flex-start; align-items: flex-start; height: auto; min-height: 21px; padding-top: 2px; }
#whats-moving .why-tag .ic { flex: none; margin-top: -1px; }
#whats-moving .why-now dd { max-width: 96ch; }   /* short lines of fact: a wider measure than prose */
#whats-moving .fineprint { margin-top: var(--s3); }
@media (max-width: 640px) {
  #whats-moving .why-now { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); padding: var(--s3) var(--s4); }
}

.ask-sources { margin-top:12px; color:var(--ink-muted); font-size:12px; }
.ask-sources summary { cursor:pointer; }
.ask-sources p { margin:8px 0; overflow-wrap:anywhere; }
/* Role workspaces and record drill-ins. Read-only, keyboard-first disclosures. */
.workspace-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; margin: 20px 0 28px; }
.workspace-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--hairline); border-top: 3px solid var(--circuit); background: var(--paddock-raised); color: var(--ink); text-decoration: none; border-radius: var(--r-sm); }
.workspace-card:hover { background: var(--paddock-sunken); }
.workspace-title { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 600; }
.workspace-note { color: var(--ink-muted); font-size: 13px; line-height: 1.5; }
.board-disclosure > summary { cursor: pointer; min-height: 56px; list-style: none; }
.board-disclosure > summary::-webkit-details-marker, .record-card > summary::-webkit-details-marker { display: none; }
.board-disclosure > summary .sub { display: flex; align-items: center; gap: 8px; }
.board-disclosure[open] > summary .chev, .record-card[open] .record-open .chev { transform: rotate(90deg); }
.board-disclosure:not([open]) { padding-bottom: 0; }
.board-disclosure > .table-wrap { margin-top: 16px; }
.record-back, .record-tile-link { display: inline-block; margin: 8px 0 12px; color: var(--clear); font-size: 13px; }
.record-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; padding: 20px; background: var(--paddock-raised); border: 1px solid var(--hairline); }
.record-filters label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); }
.record-search { flex: 1; min-width: min(100%, 240px); }
.record-filters input, .record-filters select { min-height: 44px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--paddock-sunken); color: var(--ink); font: inherit; width: 100%; }
.record-submit { min-height: 44px; padding: 10px 20px; border-radius: var(--r-control); border: 1px solid var(--ink); background: var(--ink); color: var(--paddock); font: inherit; cursor: pointer; }
.record-list { display: grid; gap: 10px; margin: 20px 0; }
.record-card { border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--paddock-raised); }
.record-card > summary { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 90px 100px; align-items: center; gap: 12px; padding: 18px 20px; list-style: none; cursor: pointer; }
.record-person { font-weight: 600; overflow-wrap: anywhere; }
.record-ref, .record-date { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: 13px; overflow-wrap: anywhere; }
.record-open { display: flex; align-items: center; gap: 8px; color: var(--clear); font-size: 13px; }
.record-detail { border-top: 1px solid var(--hairline); padding: 20px; }
.record-detail dl, dl.record-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; margin: 0; }
article.record-card { padding: 20px; }
article.record-card h4 { margin-top: 0; }
.record-detail dt { color: var(--ink-muted); font-size: 12px; margin-bottom: 6px; }
.record-detail dd { margin: 0; overflow-wrap: anywhere; }
.record-pages { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 24px 0; }
.record-pages a { padding: 12px; color: var(--clear); }
.workspace-card:focus-visible, .board-disclosure > summary:focus-visible, .record-card > summary:focus-visible, .record-filters :focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
@media (max-width: 640px) {
  .record-card > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 16px; }
  .record-person { grid-column: 1 / -1; }
  .record-date { grid-row: 2; grid-column: 2; }
  .record-open { grid-column: 1 / -1; }
  .board-disclosure > summary { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* Keep the existing Settings destinations, with a compact explanation of each. */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:10px; margin:0 0 24px; }
.settings-choice { position:relative; padding:14px 16px; border:1px solid var(--hairline); border-radius:var(--r-sm); }
.settings-choice a { display:flex; align-items:center; min-height:44px; font-weight:700; color:inherit; text-decoration:none; }
.settings-choice a::after { content:""; position:absolute; inset:0; border-radius:var(--r-sm); }
.settings-choice:focus-within { outline:2px solid currentColor; outline-offset:3px; }
.settings-choice.is-current { border-color:currentColor; border-width:2px; padding:13px 15px; }
.settings-choice p { margin:0; font-size:13px; line-height:1.5; color:var(--ink-muted); }

/* Cockpit uses Spotter's original call / instruments / people hierarchy. */
.cockpit-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4); }
.cockpit-people { border-top:1px solid var(--hairline); }
.cockpit-person { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:20px 0; border-bottom:1px solid var(--hairline); color:var(--ink); text-decoration:none; min-height:64px; }
.cockpit-person-main { display:grid; gap:6px; min-width:0; overflow-wrap:anywhere; }
.cockpit-person-main strong { font-size:18px; font-weight:600; }
.cockpit-person-main > span, .cockpit-person-ref { font-size:13px; color:var(--ink-muted); }
.cockpit-person-ref { display:flex; align-items:center; gap:var(--s2); }
.cockpit-person .ic { width:16px; height:16px; flex-shrink:0; }
.cockpit-shortcuts { display:flex; flex-wrap:wrap; gap:8px 28px; padding:24px 0; margin-top:24px; border-top:1px solid var(--hairline); }
.cockpit-shortcuts a, .cockpit-report-links a { color:var(--ink); display:flex; align-items:center; gap:8px; min-height:44px; text-decoration:none; }
.cockpit-report-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); column-gap:32px; padding:20px 0; }
.cockpit-report-links a { justify-content:space-between; border-bottom:1px solid var(--hairline); }
.cockpit-work > .boards { margin-top:32px; }
.cockpit-person:hover strong, .cockpit-shortcuts a:hover, .cockpit-report-links a:hover { text-decoration:underline; text-underline-offset:4px; }
.cockpit-person:focus-visible, .cockpit-shortcuts a:focus-visible, .cockpit-report-links a:focus-visible { outline:2px solid var(--signal); outline-offset:4px; }
@media (max-width:640px) { .cockpit-person { flex-wrap:wrap; gap:8px; } .cockpit-controls { align-items:flex-start; } }

/* Keep the test settings sections within reach on phones; details remain in the selected section. */
@media (max-width: 600px) {
  .cockpit-settings .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .cockpit-settings .settings-choice { padding:8px 10px; }
  .cockpit-settings .settings-choice.is-current { padding:7px 9px; }
  .cockpit-settings .settings-choice p { display:none; }
}

/* Read-only source cards use one label and an explicit detail affordance. */
.agent-source-card > summary { grid-template-columns: minmax(0, 1fr) auto; overflow-wrap: anywhere; }

/* Principal pulse follows the existing call, instruments and people hierarchy. */
.principal-pulse { margin-block: var(--s6); }
.principal-pulse h2 { margin: 0; }
.principal-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--s8); }
.principal-rank { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.principal-place { font-size: 28px; font-stretch: var(--narrow); color: var(--ink-muted); min-width: 30px; }
.principal-person { display: grid; flex: 1; min-width: 0; gap: 4px; }
.principal-person span, .principal-score span, .principal-gap span span { font-size: 12px; color: var(--ink-muted); }
.principal-person meter { width: 100%; height: 7px; accent-color: var(--signal); }
.principal-score { display: grid; text-align: right; }
.principal-score b { font-size: 28px; font-stretch: var(--narrow); line-height: 1.2; }
.principal-gap { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.principal-gap > span { display: grid; flex: 1; gap: 4px; }
.principal-gap b { font-size: 28px; font-stretch: var(--narrow); color: var(--signal); }
.principal-deals { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: var(--s4); }
.principal-deal { display: grid; gap: var(--s2); padding: var(--s4); background: var(--paddock-raised); border: 1px solid var(--hairline); border-radius: var(--r-sm); text-decoration: none; }
.principal-deal > strong { font-size: 32px; font-stretch: var(--narrow); }
.principal-deal small { color: var(--ink-muted); }
@media (max-width: 760px) { .principal-grid { grid-template-columns: 1fr; gap: var(--s4); } .principal-score span { max-width: 115px; } .cockpit-controls { flex-wrap: wrap; } }

.principal-stores { display: flex; flex-wrap: wrap; margin-top: var(--s6); gap: var(--s2); }
.principal-pulse .move-name { font-size: 48px; font-stretch: var(--narrow); line-height: 1.1; font-weight: 600; }
@media (max-width: 480px) {
  .cockpit-controls [aria-label="Workspace focus"] { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; }
  .cockpit-controls [aria-label="Workspace focus"] a { padding-inline: 8px; font-size: 10px; letter-spacing: .08em; text-align: center; }
}

.cockpit-store-switch { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--rule); }
.cockpit-store-switch form { margin:0; }
.cockpit-store-switch small { flex-basis:100%; }

.dealer-toggle{display:inline-flex;flex-wrap:wrap;gap:3px;padding:4px;border:1px solid var(--hairline);border-radius:var(--r-bubble);background:var(--paddock-raised)}
.dealer-toggle button{font:inherit;cursor:pointer;border:0;border-radius:var(--r-sm);padding:9px 18px;background:transparent;color:inherit}
.dealer-toggle button.on{background:var(--ink);color:var(--paddock)}
.dealer-toggle button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.portfolio-open{background:none;border:0;color:inherit;font:inherit;text-align:left;width:100%;cursor:pointer}
.portfolio-store{border-top:1px solid var(--hairline);padding:18px 0}
.record-brief dt{margin-top:12px;opacity:.7}.record-brief dd{margin:4px 0}

/* Work areas: short, aligned destinations; only authorized sections render. */
.work-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); margin-bottom: var(--s8); }
.work-nav-group { min-width: 0; }
.work-nav-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.work-nav-heading > span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.work-nav-heading small { font-size: 12px; color: var(--ink-muted); }
.work-nav-links { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); }
.work-nav-links a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s2); min-height: 96px; padding: var(--s3); border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--paddock-raised); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.3; }
.work-nav-links a .ic { color: var(--ink-muted); }
.work-nav-links a[aria-current="page"] { background: var(--ink); color: var(--paddock); border-color: var(--ink); }
.work-nav-links a[aria-current="page"] .ic { color: inherit; }
@media (hover: hover) { .work-nav-links a:not([aria-current]):hover { border-color: var(--alloy); background: var(--paddock-sunken); } }
.work-nav-links a:active { transform: translateY(1px); }
@media (max-width: 720px) { .work-nav { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }
@media (forced-colors: active) { .work-nav-links a[aria-current="page"] { border: 3px solid Highlight; } }

/* Cockpit work surfaces: a compact task path within Spotter's existing materials. */
.cockpit-ui .mast-in { padding-top: var(--s6); }
.cockpit-ui .hello { font-size: clamp(28px, 3vw, 36px); }
.cockpit-ui .who { margin-top: var(--s2); }
.cockpit-ui .ask { margin-top: var(--s4); }
.cockpit-ui .label { padding-top: var(--s6); }
.cockpit-ui .board { margin-bottom: var(--s8); }
.workday-page .mast-in { max-width: calc(760px + 2 * var(--s8)); }
.cockpit-ui .work-shortcuts { margin: 0 0 var(--s4); padding: 0; border: 0; gap: var(--s2) var(--s6); }
.cockpit-ui .record-back, .cockpit-ui details.fineprint > summary, .cockpit-ui .more > summary,
.recovery-actions a, .answer-foot .btn-text, .ask-stop { display: inline-flex; align-items: center; min-height: 44px; }
.cockpit-ui .workspace-card { border-top-width: 1px; border-color: var(--hairline); border-radius: var(--r-bubble); }
.cockpit-ui .workspace-card > :is(h2, h3, p) { margin: 0; }
.cockpit-ui .workspace-card > a { min-height: 44px; display: inline-flex; align-items: center; }
.cockpit-ui .record-detail dd { overflow-wrap: anywhere; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.cockpit-store-switch { border-bottom-color: var(--hairline); }
.dealer-toggle button { min-height: 44px; }
.work-nav-links a { min-height: 64px; flex-direction: row; align-items: center; justify-content: flex-start; }
@media (max-width: 640px) {
  .cockpit-ui .mast-in, .cockpit-ui .label { padding-left: var(--s4); padding-right: var(--s4); }
  .cockpit-store-switch { padding: var(--s3) var(--s4); }
  .cockpit-ui .record-back { margin: 0; }
  .cockpit-ui .dealer-toggle { display: flex; flex-wrap: nowrap; width: 100%; border-radius: var(--r-bubble); }
  .cockpit-ui .dealer-toggle form { flex: 1 1 0; min-width: 0; }
  .cockpit-ui .dealer-toggle form:has(input[value="all"]) { flex: 0 0 auto; }
  .cockpit-ui .dealer-toggle button { width: 100%; height: 100%; padding: var(--s2); white-space: normal; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
  .cockpit-ui .cockpit-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .cockpit-ui .cockpit-controls .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .cockpit-ui .cockpit-controls .seg a { min-width: 0; min-height: 44px; height: auto; padding: var(--s2) var(--s1); font-size: 12px; font-stretch: 100%; letter-spacing: .02em; white-space: normal; text-align: center; justify-content: center; }
  .work-nav { gap: var(--s4); margin-bottom: var(--s6); }
  .work-nav-links a { flex-direction: column; align-items: flex-start; min-height: 88px; }
  .cockpit-ui .record-filters input { font-size: 16px; }
}

/* Review and settings paths share the product's quiet task hierarchy. */
.review-jumps { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin:var(--s4) 0 var(--s8); }
.review-jumps a { display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; color:var(--clear); }
.review-jumps span { color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.review-group { scroll-margin-top:var(--s6); }
.agent-directory-card .workspace-title a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.agent-directory-card .workspace-title a:hover { text-decoration:underline; }
.cockpit-ui .record-pages a, .cockpit-ui .record-detail > a, .cockpit-settings .workspace-card nav a { display:inline-flex; align-items:center; min-height:44px; }
.cockpit-ui .record-card { overflow-wrap:anywhere; }
.cockpit-ui .record-card summary { min-height:44px; }
.cockpit-ui .agent-filters select { max-width:100%; }
.cockpit-ui .connection-notice { color:var(--ink-2); }
.cockpit-ui .recovery-page { max-width:760px; padding-top:var(--s8); }
@media (max-width:640px) { .cockpit-ui .record-filters select { font-size:16px; } .agent-filters { align-items:stretch; } }

.review-group .workspace-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }

/* Hosted inference preparation uses the existing Spotter controls and palette. */
.hosting-intro { max-width: 72ch; }
.hosting-state { color: var(--ink-2); font-size: 13px; }
.hosting-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 28px; margin: 24px 0; }
.hosting-field { min-width: 0; }
.hosting-field label { display: block; font-size: 14px; margin-bottom: 8px; }
.hosting-field :is(input,select) { box-sizing: border-box; min-height: 46px; width: 100%; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--paddock-sunken); color: var(--ink); font: inherit; font-size: 16px; }
.hosting-field .fineprint { margin: 8px 0 0; }
.hosting-field :is(input,select):focus-visible, .hosting-form button:focus-visible, .hosting-details > summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.hosting-field [aria-invalid=true] { border-color: var(--signal); }
.hosting-field .field-error:empty { display: none; }
.hosting-field .field-error { font-size: 14px; color: var(--ink); margin: 8px 0 0; }
.hosting-key { border-left: 2px solid var(--circuit); padding-left: 20px; max-width: 70ch; }
.hosting-key h4 { margin: 0 0 10px; }
.hosting-details > summary { cursor: pointer; min-height: 44px; padding: 12px 0; }
.hosting-details > summary span { display: inline-block; margin-left: 12px; }
.hosting-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hosting-test { min-height: 44px; padding: 10px 18px; color: var(--ink); background: transparent; border: 1px solid var(--hairline); border-radius: var(--r-control); font: inherit; cursor: pointer; }
.hosting-test:hover:not(:disabled) { background: var(--paddock-raised); }
.hosting-form button:disabled { cursor: not-allowed; opacity: .6; }
#hosting-feedback { min-height: 1.5em; max-width: 72ch; }
.hosting-handoff { max-width: 74ch; }
.hosting-handoff li { margin: 12px 0; }
.hosting-handoff code { overflow-wrap: anywhere; }
@media (max-width:640px) { .hosting-fields { grid-template-columns: minmax(0,1fr); gap: 18px; } .hosting-actions { flex-direction: column; align-items: stretch; } .hosting-details > summary span { display: block; margin-left: 0; } }

/* Settings scope belongs with the page title, inside its content width. */
.settings-mast .mast-in { max-width:calc(760px + 2 * var(--s8)); }
.settings-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s6); }
.settings-heading > div { min-width:0; }
.cockpit-store-switch.settings-rooftops { padding:0; border:0; max-width:100%; gap:var(--s2); }
.settings-rooftops .dealer-toggle { max-width:100%; }
.settings-rooftops .dealer-toggle form { min-width:0; }
.settings-rooftops .dealer-toggle button { min-height:44px; max-width:100%; overflow-wrap:anywhere; }
.settings-rooftops small { max-width:65ch; color:var(--ink-muted); }
@media (max-width:640px) {
  .settings-heading { gap:var(--s4); }
  .settings-rooftops { width:100%; }
  .settings-rooftops .dealer-toggle { width:100%; border-radius:var(--r-bubble); }
  .settings-rooftops .dealer-toggle form { flex:1 1 auto; }
  .settings-rooftops .dealer-toggle button { width:100%; padding:var(--s2) var(--s3); border-radius:var(--r-sm); }
}

/* Shared task surfaces and finger-sized controls match the native workspace. */
.cockpit-ui .record-filters,
.cockpit-ui .record-card,
.cockpit-ui .settings-choice { border-radius:var(--r-bubble); }
.cockpit-ui .settings-choice a::after { border-radius:inherit; }
.cockpit-ui .seg a { min-height:44px; height:auto; }
.cockpit-ui .record-submit:hover { filter:brightness(.94); }
.cockpit-ui .record-submit:focus-visible,
.cockpit-ui .record-filters :is(input,select):focus-visible {
  outline:2px solid var(--signal); outline-offset:3px;
}
@media (max-width:640px) {
  .cockpit-ui .record-filters { gap:12px; padding:16px; }
  .cockpit-ui .record-filters label,
  .cockpit-ui .record-filters .record-submit { width:100%; min-width:0; }
}