/* ============================================================================
   COMPONENTS — rules used by BOTH views. One copy, so they cannot drift.

   Third layer of the anti-drift structure:
     tokens.css      values      — shared
     shell.html      skeleton    — shared
     components.css  shared rules for things that live INSIDE the content area
     views/*.html    view-specific rules only

   Without this file, anything both pages need (the glyph face, the grid
   view-bar) would be hand-copied into each fragment — which is exactly the
   duplication that produced the 2026-08-22 shell drift. David, 2026-08-22.

   WHAT IS IN HERE, and why each is register-answered as SHARED:
     · glyph faces .............. one Material Symbols treatment app-wide
                                  (e64/e81b/e83/e85 — the 14-glyph wired set)
     · grid view-bar ............ e39: "a property of the hourly-grid viewport,
                                  shared by the dashboard AND the treatment
                                  sheet... Build it once; the treatment-sheet
                                  round reuses it."
     · now-line ................. David, 2026-08-22: "the rule should be
                                  identical in both."

   WHAT IS DELIBERATELY NOT IN HERE (register-answered as legitimately
   per-view, so it stays in the fragments):
     · legend ................... 6-item swatches on the sheet vs the 4-item
                                  dot legend on the dashboard (e73/e78)
     · Due-Today panel .......... sheet-only (86h)
     · patient bar .............. sheet-only
     · cell contents ............ inset chips on the sheet vs per-task dots on
                                  the dashboard (e73's Dashboard exception)
     · mode toggle, + Add to
       Treatment Sheet .......... sheet-only (e61/e70)
     · filter chips ............. dashboard-only (e41 §4)

   VALUES: taken from the approved `yeeba-sheet-fullmock.html`. Where my unbuilt
   dashboard draft had different numbers, the approved sheet wins — the draft
   was never ratified.

   THE BUILD ENFORCES THIS: a fragment may not redefine a selector this file
   owns. build.py fails the build if it does.
   ========================================================================== */

/* ---- glyph faces ---------------------------------------------------------
   UI glyphs are ALL Material Symbols by codepoint — no retired text glyphs
   anywhere. The weight rule stops a glyph inheriting 600/700/800 from its
   container, which the browser would synthesise as a fake bold that Iced
   cannot render (A13 / 86a-ii). */
.ms{font-family:'MSym';line-height:1}
.mico{font-family:'MSym';font-size:var(--g-small);line-height:1;vertical-align:var(--va-2);margin-right:var(--sp-3)}
.ms,.mico,.pen,.editpen,.nti,.dots{font-weight:var(--glyph-weight)}

/* ---- grid view-bar (e39: build once, both pages) -------------------------
   The bar itself, the day cluster and the Focus/24h segmented control. What
   sits in `.vright` alongside the segment differs per page — the sheet's mode
   toggle, the dashboard's filter chips — and those live in the fragments. */
.vbar{height:var(--h-vbar);display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-16);background:var(--surface);border-bottom:var(--bw-1) solid var(--vbar-border)}
.nav{display:flex;align-items:center;gap:var(--sp-8)}
.step{display:flex;border:var(--bw-1) solid var(--ctrl-border);border-radius:var(--ctrl-radius);overflow:hidden}
.step button{border:none;background:var(--surface);padding:var(--sp-6) var(--sp-10);font-size:var(--fs-13);color:var(--stepper-ink)}
.step .td{border-left:var(--bw-1) solid var(--ctrl-divider);border-right:var(--bw-1) solid var(--ctrl-divider);font-weight:var(--fw-600)}
.date{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-11);border:var(--bw-1) solid var(--ctrl-border);border-radius:var(--ctrl-radius);font-size:var(--fs-13);font-weight:var(--fw-600);color:var(--ink-body);background:var(--surface)}
.date .c{color:var(--ink-faint)}
.vright{display:flex;align-items:center;gap:var(--sp-10)}
.seg{display:flex;border:var(--bw-1) solid var(--ctrl-border);border-radius:var(--ctrl-radius);overflow:hidden;font-size:var(--fs-13)}
.seg span{padding:var(--sp-6) var(--sp-14);color:var(--ink-soft)}
.seg .on{background:var(--seg-on-bg);color:var(--ink-strong);font-weight:var(--fw-600)}

/* ---- now-line ------------------------------------------------------------
   Starts at the grid header strip's bottom edge (A14 / e86). Its `bottom:0`
   must mean "bottom of the last row" on BOTH pages — that is a property of the
   box it is positioned in, so each view must give it a positioned ancestor
   that hugs the rows. Same rule, same result. */
.nowline{position:absolute;top:var(--header-h);bottom:0;width:var(--bw-2);background:var(--nowline);z-index:2}

/* ---- ink on a status fill (86i.23) ---------------------------------------
   David, 2026-08-23: "B — black text and glyphs, including black tick in
   little green dots on dashboard focus view — so everything is consistent."

   SHARED because the whole value of the ruling is that ONE rule reaches every
   surface a status colour appears on: the sheet's 24H chips and Focus chips,
   the sheet legend's glyph swatches, the dashboard's Focus dots and their
   Done tick, and the dashboard legend. Put this in a view and the two pages
   drift the moment one is edited.

   Mechanism: --on-fill is inherited, so setting it on the element that carries
   the status class reaches whatever that element draws — glyph, text or the
   ::after tick — without this file naming any of them. Adding a status means
   adding one line here, not hunting through two fragments.

   `.due` is folded in for uniformity: it already used --ink-on-amber, but via
   a `color:` declaration on .bchip.due alone, so the amber 24H chip and the
   amber legend swatch were never covered by it. */
.overdue{--on-fill:var(--ink-on-overdue)}
.due{--on-fill:var(--ink-on-amber)}
.done{--on-fill:var(--ink-on-done)}
.skip,.miss,.cancel,.grey{--on-fill:var(--ink-on-grey)}

/* ---- Patient Alerts family headings (shell.html wardRail()) --------------
   M1 fix round 1 (David, 2026-08-26): every family is fixed and always
   open — no caret, no per-row background, no hover — so the heading must
   read as a plain sub-heading, not a control. One step below the rail's
   `.section` title (shell.html): same weight, smaller size, the muted ink
   already used elsewhere for plain/non-interactive labels (sheet.html
   `.ghead .pt2`). Shared here because wardRail() itself is shared. */
.ahead{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-11);font-weight:var(--fw-500);color:var(--ink-muted);margin:var(--rail-gap-heading) var(--sp-3)} /* M3 rail-spacing scale (tokens.css): one symmetric middle-tier value both above (arriving, incl. family-to-family) and below (to its own first row) — a heading now labels its whole group instead of binding to the first row */
.ahead .mico{font-size:var(--g-family);margin-right:0;flex:0 0 auto;width:var(--g-family);overflow:hidden}
.ahead .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Focus "+N more" disclosure popover -------------------------------
   v2 M1 delivery (sonnet-dispatch.md Change 1): an ActiveOverlay using the
   existing menu chrome and the picked, tokenized d1o fixture geometry. */
.discl{position:absolute;top:var(--discl-top);left:var(--discl-left);width:var(--discl-w);background:var(--menu-bg);border:var(--bw-1) solid var(--card-border);border-radius:var(--ctrl-radius);box-shadow:var(--menu-shadow-geom) var(--menu-shadow);padding:var(--sp-6) var(--sp-10);z-index:5}
.discl-item{padding:var(--sp-4) 0}