/* ============================================================ Shadow — canonical UI components (locked 2026-07-01) Single source for chips, labels, segmented controls. Pair with tokens.css. Load AFTER tokens.css. ⚠ FILTER is PINNED — needs review after form design. NEVER re-draw a locked component inside SVG (rect+text imitations drift — the 7/1 axis sweep caught one and broke the label spec). Overlay the real element on the plot instead (.pw wrapper pattern). Centering rule: symmetric padding + flex-center. NEVER add text-indent (Chrome trims trailing letter-spacing; text-indent over-corrects and makes them left-heavy). ============================================================ */ /* glyph — ✓ / ✕ on the behavior axis; inherits currentColor */ .tg{width:12px;height:12px;flex:none;display:inline-block;vertical-align:-1px} /* ---- LABEL — rounded-rect · UPPERCASE · neutral (data-range is the one color exception) ---- */ .label{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;white-space:nowrap;line-height:1;box-sizing:border-box} /* the .5px bottom pad in both sizes = TRUE OPTICAL CENTER (measured 7/2 at 8x: Inclusive caps sit 0.5px low of geometric center at both sizes — font metrics, NOT an odd-margin split; height changes just move the box, integer pads flip which side eats the half-pixel, .5px lands 0.00 exactly, verified both sizes). A deliberate, measured exception to the symmetric-padding rule. */ .label.reg{height:20px;padding:0 10px .5px;font-size:12px;letter-spacing:.05em;border-radius:3px} .label.sm{height:16px;padding:0 7px .5px;font-size:10px;letter-spacing:.04em;border-radius:2px} .label.ink{background:var(--g-3);color:#fff} .label.cream{background:var(--c-cream);color:var(--c-warmblack)} .label.line{background:#fff;border:1px solid rgba(63,19,7,.11);color:var(--c-warmblack)} .label.stone{background:var(--g-2);color:#fff} .label.rng-inr{background:var(--st-ok);color:#fff} /* data-range exception */ .label.rng-bord{background:var(--st-caut);color:#fff} .label.rng-high{background:var(--st-crit);color:#fff} .label.count{font-family:var(--font-num);letter-spacing:0;font-weight:700} /* ---- CHIP — pill · outline · Title case · grey-upcoming → ramp color + glyph ---- */ .chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 13px;box-sizing:border-box;border-radius:999px;font-family:var(--font-ui);font-size:13px;font-weight:600;line-height:1.05;white-space:nowrap;letter-spacing:.01em;background:transparent;border:1px solid currentColor} .chip.sm{height:20px;gap:5px;padding:0 9px;font-size:11.5px} .chip.up{color:var(--g-2)} /* upcoming — grey, no glyph */ .chip.ok{color:var(--st-ok)} /* on-track / taken / in-range */ .chip.caut{color:var(--st-caut)} /* missed · not critical / borderline */ .chip.crit{color:var(--st-crit)} /* missed · critical / out of range */ .chip .tg{width:12px;height:12px} .chip.sm .tg{width:10px;height:10px} /* ---- SEGMENTED CONTROL — pick-one (tabs / zoom / text-size) ---- */ .seg{display:inline-flex;gap:3px;background:var(--c-paper);border:1px solid rgba(63,19,7,.11);border-radius:10px;padding:3px} .seg>span{height:30px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--g-2);border-radius:7px;line-height:1;white-space:nowrap;cursor:pointer} .seg>span.on{background:#fff;color:var(--c-warmblack);box-shadow:0 1px 3px rgba(63,19,7,.1)} .seg.ts>span:nth-child(1){font-size:12px}.seg.ts>span:nth-child(2){font-size:14px}.seg.ts>span:nth-child(3){font-size:16px} /* ---- FILTER — LOCKED 2026-07-02 (unpinned; record → filter review on hover-context). The multi-toggle for data series. State grammar = the system's ink-on (the ck/tg2 logic): ON = ink fill, the swatch keeps its series color (charcoal marks flip white); OFF = white + hairline + dimmed swatch; hover-on-OFF = the INK WASH. Distinct from its neighbors: the SWATCH (buttons never carry one), sentence case (small buttons are caps), multi-select self-evident (several ink chips coexist). ---- */ .filt{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px;border:1px solid rgba(63,19,7,.16);background:#fff;color:var(--g-25);font-size:13px;font-weight:600;box-sizing:border-box;white-space:nowrap;cursor:pointer;transition:background .12s,color .12s,border-color .12s} .filt:hover:not(.on){background:rgba(63,19,7,.05)} .filt.on{background:var(--c-warmblack);border-color:var(--c-warmblack);color:#fff} .filt.on:hover{filter:brightness(1.15)} .filt:focus-visible{outline:2px solid var(--c-warmblack);outline-offset:2px} .filt .sw{width:18px;height:3px;border-radius:2px;background:var(--g-1);flex:none} .filt.adh .sw{background:repeating-linear-gradient(90deg,var(--s-adh) 0 6px,transparent 6px 11px)} .filt.bp .sw{background:var(--st-metric)} .filt.on.bp .sw{background:#fff} .filt .dia{width:11px;height:11px;background:var(--st-metric);transform:rotate(45deg);flex:none} .filt.on .dia{background:#fff} .filt:not(.on) .sw,.filt:not(.on) .dia{opacity:.45} /* ---- NUMBER — all numerals render mono w/ one disambiguated (slashed) zero ---- */ .num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1;letter-spacing:0} /* ---- CHART HEAD — the ruled masthead (locked 2026-07-01 · chart-anatomy F/H) ---- Row 1: serif title left · zoom/filters right. Then the BAND — hairline rules top + bottom, fused toward the plot: key (legend) left · units right. No timeframe readout: NOW anchored on the plot + the labeled x-axis carry time (the E law). No other legend home exists; the band never exceeds one wrapped row. */ .chd{display:flex;align-items:center;justify-content:space-between;gap:20px} .chd .ct{font-family:var(--font-display);font-size:var(--fs-headline);font-weight:450;line-height:var(--lh-display);color:var(--c-warmblack)} .chd-band{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:var(--rule);border-bottom:var(--rule);padding:11px 0;margin-top:14px} .chd-key{display:flex;gap:8px 18px;align-items:center;font-size:var(--fs-control);color:var(--g-25);flex-wrap:wrap} .chd-key span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .chd-key i{flex:none} .chd-key .k-line{width:16px;height:2.5px;border-radius:2px;background:var(--st-metric)} .chd-key .k-dot{width:9px;height:9px;border-radius:50%;background:var(--st-metric)} .chd-key .k-halo{width:13px;height:13px;border-radius:50%;border:1.6px solid var(--st-metric);background:radial-gradient(circle,var(--st-metric) 0 2.6px,#fff 2.7px)} .chd-key .k-dash{width:22px;height:2.5px;background:repeating-linear-gradient(90deg,var(--s-adh) 0 7px,transparent 7px 13px)} .chd-key .k-adot{width:12px;height:12px;border-radius:50%} .chd-key .k-adot.ok{background:var(--st-ok)} .chd-key .k-adot.caut{border:1.6px solid var(--st-caut);background:radial-gradient(circle,var(--st-caut) 0 2.6px,#fff 2.7px)} .chd-key .k-adot.crit{border:1.6px solid var(--st-crit);background:radial-gradient(circle,var(--st-crit) 0 2.6px,#fff 2.7px)} .chd-unit{font-size:var(--fs-control);color:var(--g-25);white-space:nowrap} .chd-band+svg:not(.tg),.chd-band+.pw{margin-top:10px} /* THE PLOT LAW (locked 7/1, chart-anatomy F/H) — a new chart drawn from scratch MUST use: metric line 2 · overlay/adherence line 2 · halo ring r8 stroke 1.6 · point core r4 · plain dots r3.25 · axis text 13 (values mono --ax-val · x-labels mono · units in the BAND, never in-SVG) · x-axis dates explicit (the month repeats on every label) · time marker = the sm ink knockout (NOW/TODAY, h16 rx2 fs10 ls.04em) · zone tags = REAL .label.sm.rng-* overlaid via .pw/.ztags · card padding 30/32 · band→plot 10 · zone-band fills = --band-* (never --f-* or raw rgba; see tokens.css). LINE SMOOTHING (chartered 7/2, chart-chrome — was live in F/H + MetricTrend.tsx type="monotone" but never written down): data lines are MONOTONE CUBIC (Fritsch–Carlson; d3/Recharts "monotone"), never straight polylines, never Catmull-Rom/plain Bézier. Why monotone: the curve NEVER overshoots a reading — no invented peaks, dips, or threshold crossings between real loggings. It is rule 02 ("plot the real loggings") as geometry. Tangents flatten at local extremes; an area fill under a line takes the SAME curve, closed to the baseline. Sparklines included — any line implying continuity smooths monotone. */ /* ---- AXIS TEXT — .axv / .axx (chartered 2026-07-02 · chart-chrome — absorbs queue #20) ---- THE one spec for chart axis text, replacing per-text inline styles. Both carry the full .num spec (tabular figures + SLASHED zero — converged with readouts/tables, Kristen 7/2; axes previously showed Plex Mono's dotted default) at axis 13. .axv = value labels (600) · .axx = x-labels (500). Fill defaults --ax-val; override inline for the adherence axis (--s-adh). Units NEVER in-SVG — they live in the .chd-band (--ax-unit colors band text, not axis text). */ .axv,.axx{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1;letter-spacing:0;font-size:13px;fill:var(--ax-val)} .axv{font-weight:600} .axx{font-weight:500} /* ---- GLASS TOOLTIP — .gtip (chartered 7/2 · REVISED same day, hover-highlight — Kristen's register) ---- The hover object for data points + calendar identities. Surface = the glass tokens; lift + radius are the DATA register (--glass-lift-data / --glass-radius-data — the hero values grey out over white). WIDTH per-instance. THE NO-COACHING LAW (Kristen 7/2, also in verbal/voice.md): a tooltip is a ZOOM — precise timestamp + value + state, NEVER commentary, interpretation, or advice ("not a trend yet" can contradict a doctor's standing instruction). Identity = full name ONLY, as entered at setup. Two registers: DATA (.gtip.data) .gtip-v readout (40, 500, takes the CHIP'S state color --t-*) + .gtip-u unit → full-size chip → .gtip-t: THE RULE, then the timestamp as a REAL .label.reg.ink — the NOW/TODAY time-marker species — words Inclusive, numerals .num at 600 (Plex 700 outweighs Inclusive 700 optically; the label's inline-flex needs the content in ONE wrapper span or spaces collapse). Rhythm (exact): pad 18 → readout → 8 → chip → 12 → rule → 10 → label → 16. IDENTITY (.gtip.idn) .gtip-nm — full name only, regular Inclusive 400, a quiet caption chip. Choreography = THE HOVER LAW below. */ .gtip{position:fixed;pointer-events:none;opacity:0;transform:translate(-50%,-112%);transition:opacity .12s ease; color:var(--g-3);border-radius:var(--glass-radius-data);border:1px solid var(--glass-edge); background:var(--glass-fill-light);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:var(--glass-lift-data), inset 0 1px 0 rgba(243,222,208,.2);font-family:var(--font-ui);line-height:var(--lh-body)} .gtip.on{opacity:1} .gtip>:last-child{margin-bottom:0} .gtip.data{padding:18px 17px 16px} .gtip.idn{padding:12px 17px} .gtip-v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1;letter-spacing:0;font-size:var(--fs-readout);font-weight:500;line-height:var(--lh-solid);margin:0 0 8px;color:var(--c-warmblack)} .gtip-u{font-family:var(--font-ui);font-size:12px;color:var(--g-25);font-weight:500;margin-left:5px} .gtip-t{border-top:var(--rule);margin-top:12px;padding-top:10px;line-height:1} .gtip-t .num{font-weight:600} .gtip-nm{font-family:var(--font-ui);font-size:1.05em;font-weight:400;line-height:var(--lh-title);margin:0;color:var(--c-warmblack)} /* ---- THE HOVER LAW (LOCKED 2026-07-02 · hover-highlight — settles queue #16 + #23's hover half) ---- 1 HIT TARGET ≥ 32 CSS px effective diameter per point (invisible circles over the plot; scale r up when a chart renders narrow). 2 SHOW immediately on enter — no delay; fade .12s ease; above the point (translate -50%,-112%). 3 EDGES: flip below the point when within a tooltip-height of the viewport top; clamp horizontally to a 12px gutter. 4 ONE tooltip, CONTENT-SWAP: moving point-to-point swaps content with no re-fade; only entry-from-nothing fades in. 5 DISMISS: leave, scroll, or Escape. 6 TOUCH: tap toggles; tap elsewhere dismisses. Hover washes are enhancement only — nothing informational hides behind hover on touch. POINT-HOVER MARK (B3, Kristen 7/2): the chart drops a dashed Smoke vertical (--g-15, 1px, dasharray 3 4) at the hovered point's timestamp — NOW's quieter cousin; it clears on leave. The halo stays reserved for out-of-range; hover never borrows the alarm mark. THE INTERACTION WASH (AMENDED 7/2 evening, hover-context review): hover = the INK WASH — rgba(63,19,7,.05) on chips/controls, .035 on table rows — NOT paper. Paper-as-hover failed in context: on a paper page, washing a white-card element with the page's own color melts it BACKWARD into the ground; hover must make a thing more present. The ink wash is ground-independent and matches the warm physics (surfaces deepen, buttons rise). */ .filt:hover:not(.on){background:var(--c-paper);color:var(--c-warmblack)} .seg>span:hover:not(.on){background:rgba(255,255,255,.65);color:var(--c-warmblack)} .calx .fam[data-nm]:hover{border-color:var(--g-2)} /* ---- ZONE-TAG OVERLAY — .pw / .ztags (promoted 2026-07-02 with the calendar grammar) ---- THE PLOT LAW's overlay pattern, finally canonical (was page-scoped in the charts tab while the law cited it): zone tags are REAL .label.sm.rng-* elements absolutely positioned over the plot — never rect+text imitations drawn in SVG. Horizontal position (left:%) is per-chart; vertical offsets ride inline top:%. */ .pw{position:relative} .pw .ztags span{position:absolute;white-space:nowrap} /* ============================================================ CALENDAR GRAMMAR — .calx context (promoted 2026-07-02 · queue #9) The Coordinator calendar's cell/lens/mark language. SCOPE DECISION (Kristen 7/2): the stable cross-lens GRAMMAR promotes; the day-BP chart's own design, single-vital chips, and week/month vitals wiring stay views-phase-fluid (see the 7/1 charts/calendar boundary + queue #14/#24). Demo furniture (legendbar, A/A/A control, insight/notif specimens) stays page-scoped in guide-ui. .calx is the CONTEXT ROOT: it defines --tsu (the A/A/A unit — host sets --ts; default 1) and the hairline vars. Everything below consumes --tsu, so patient-mode/text-scale is one var. ============================================================ */ .calx{--tsu:calc(16px * var(--ts, 1));--hair:rgba(63,19,7,.11);--hair2:rgba(63,19,7,.07)} /* -- shared marks: filled = happened · open = not yet · moss = done. circle=med, diamond=visit, square=lab -- */ .calx .cdot{width:calc(.62*var(--tsu));height:calc(.62*var(--tsu));border-radius:50%;display:inline-block;flex:none} .calx .cdot.t{background:var(--s-adh)} .calx .cdot.m{background:var(--st-crit)} .calx .cdot.warn{background:var(--st-caut)} .calx .cdot.f{width:calc(.66*var(--tsu));height:calc(.66*var(--tsu));background:#fff;border:1.5px solid var(--g-2)} /* .dia — :where() keeps class specificity so the FILTER's own diamond swatch still wins (cascade order) */ :where(.calx) .dia{width:calc(.62*var(--tsu));height:calc(.62*var(--tsu));background:var(--g-3);display:inline-block;flex:none;transform:rotate(45deg)} .calx .dia.done{background:var(--s-adh)} .calx .dia.up{background:transparent;border:2px solid var(--g-3)} .calx .sq{width:calc(.62*var(--tsu));height:calc(.62*var(--tsu));background:var(--g-3);display:inline-block;flex:none} .calx .sq.done{background:var(--s-adh)} .calx .sq.up{background:transparent;border:2px solid var(--g-3)} .calx .fam{display:inline-flex;align-items:center;justify-content:center;width:calc(1.45*var(--tsu));height:calc(1.45*var(--tsu));border-radius:50%;background:var(--c-cream);border:1px solid var(--hair);color:var(--c-warmblack);font-size:calc(.72*var(--tsu));font-weight:700;flex:none} .calx .fam.sm{width:calc(1.2*var(--tsu));height:calc(1.2*var(--tsu));font-size:calc(.66*var(--tsu))} .calx .fam[data-nm]{cursor:pointer} /* -- MONTH grid + cell anatomy -- */ .calx .mheadrow{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:4px} .calx .mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:7px;grid-auto-rows:calc(4.6*var(--tsu))} .calx .mhead{font-size:11px;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--g-2);font-weight:700;text-align:center;padding:2px 0 4px} .calx .mcell{border:1px solid var(--hair2);border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px;overflow:hidden} .calx .mcell.empty{border:none;background:transparent} .calx .dnum{font-family:var(--font-display);font-size:calc(1.12*var(--tsu));color:var(--c-warmblack);font-variant-numeric:tabular-nums;font-weight:450;line-height:1} .calx .mcell.fut{background:var(--c-paper)} .calx .mcell.fut .dnum{color:var(--g-2)} .calx .mtoprow{display:flex;align-items:center;gap:8px;margin-bottom:2px} /* .mchip — chartered DELIBERATE (Kristen 7/1): month cells are narrow; layout-only deltas on locked chip.sm (wrap + padding). Not drift. */ .calx .mchip{max-width:100%;white-space:normal;height:auto;min-height:20px;padding:5px 13px;justify-content:flex-start;text-align:left;border-radius:999px} .calx .mchip .tg{align-self:center;margin-top:0} .calx .mfam{margin-left:auto;display:flex;gap:4px;flex:none} .calx .mcell.today{outline:3px solid var(--c-warmblack);outline-offset:-2px} /* -- SCHEDULE lens: future is active (white + dark date); past sits on paper. Month scale = glyph + name + who; NO times (week/day own those) -- */ .calx .sgrid{grid-auto-rows:calc(8.4*var(--tsu))} .calx .sgrid .mcell.fut{background:transparent} .calx .sgrid .mcell.fut .dnum{color:var(--c-warmblack)} .calx .sgrid .mcell.past{background:var(--c-paper)} .calx .sappt{display:flex;align-items:center;gap:8px;font-size:15px;line-height:var(--lh-title);padding:5px 0} .calx .sappt + .sappt{border-top:1px solid var(--hair2)} .calx .sappt .st{display:none} .calx .sappt .nm{color:var(--c-warmblack);font-weight:600;flex:1;min-width:0} .calx .sappt .fam{margin-left:auto;flex:none} /* -- day-state fill treatment: saturated left edge + --f-* tint + label (the discrete-surface tier) -- */ .calx .st-ok{background:var(--f-ok);border-left:6px solid var(--st-ok)} .calx .st-caut{background:var(--f-caut);border-left:6px solid var(--st-caut)} .calx .st-crit{background:var(--f-crit);border-left:6px solid var(--st-crit)} .calx .st-high{background:var(--f-high);border-left:6px solid var(--st-high)} .calx .stlabel{margin-top:auto;font-size:calc(.86*var(--tsu));font-weight:700;line-height:var(--lh-title)} .calx .lab-ok{color:var(--t-ok)} .calx .lab-caut{color:var(--t-caut)} .calx .lab-crit{color:var(--t-crit)} .calx .lab-high{color:var(--t-high)} /* the state swatch (legends) */ .calx .swb{width:calc(1.3125*var(--tsu));height:calc(1.3125*var(--tsu));border-radius:5px;flex:none;border-left-width:6px;border-left-style:solid} .calx .swb.ok{background:var(--f-ok);border-left-color:var(--st-ok)} .calx .swb.caut{background:var(--f-caut);border-left-color:var(--st-caut)} .calx .swb.crit{background:var(--f-crit);border-left-color:var(--st-crit)} .calx .swb.high{background:var(--f-high);border-left-color:var(--st-high)} .calx .swb.tdy{background:#fff;border:3px solid var(--c-warmblack)} /* -- ADHERENCE lens: tint fill + one event glyph top-right (::after) -- */ .calx .gm-adh .mcell{position:relative} .calx .gm-adh .mcell::after{content:"";position:absolute;top:10px;right:11px;width:calc(.62*var(--tsu));height:calc(.62*var(--tsu));border-radius:50%} .calx .gm-adh .st-ok::after{background:var(--s-adh)} .calx .gm-adh .st-caut::after{background:var(--st-caut)} .calx .gm-adh .st-crit::after{background:var(--st-crit)} .calx .gm-adh .mcell.fut::after{background:#fff;border:1.5px solid var(--g-2);width:calc(.66*var(--tsu));height:calc(.66*var(--tsu))} .calx .gm-adh .mcell.empty::after{display:none} .calx .gm-adh .visit::after{border-radius:1px;transform:rotate(45deg)} .calx .gm-adh .lab::after{border-radius:1px} /* CLINICAL numerals → mono (tabular + slashed zero); calendar DATE numbers stay display serif; words stay Inclusive */ .calx .ttime,.calx .wappt .wt,.calx .gm-num .stlabel{font-family:var(--font-num);font-feature-settings:"zero" 1;font-variant-numeric:tabular-nums;letter-spacing:-.005em} /* -- METRICS lens: the reading is the star -- */ .calx .gm-num{grid-auto-rows:calc(5.9*var(--tsu))} .calx .gm-num .stlabel{font-size:calc(1.5625*var(--tsu));font-weight:600;line-height:1;letter-spacing:var(--ls-display);margin-top:auto} .calx .gm-num .bpd{font-size:.6em;color:var(--g-3);font-weight:600;letter-spacing:0} .calx .bpmeta{display:flex;align-items:center;gap:7px} .calx .gm-num .bpmeta{margin-bottom:auto} .calx .avglbl{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--g-2)} /* -- DAY · the timeline grammar: time rail · marker · entry · resolution -- */ .calx .dayhead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 2px 22px} .calx .dayhead .dline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .calx .dh-dow{font-family:var(--font-display);font-weight:450;font-size:calc(1.875*var(--tsu));line-height:1;color:var(--c-warmblack)} .calx .dh-date{font-family:var(--font-display);font-weight:450;font-size:calc(1.3125*var(--tsu));line-height:1;color:var(--g-2)} .calx .tl{position:relative;margin-top:2px} .calx .tl::before{content:"";position:absolute;left:81px;top:12px;bottom:12px;width:2px;background:var(--hair);border-radius:2px} .calx .drow{display:grid;grid-template-columns:58px 24px 1fr auto;column-gap:12px;align-items:start;padding:11px 0} .calx .drow.start{border-top:1px solid var(--hair2)} .calx .tl .drow:first-child{border-top:0} .calx .dt{font-family:var(--font-num);font-feature-settings:"zero" 1;font-variant-numeric:tabular-nums;text-align:right;color:var(--g-2);font-weight:600;font-size:calc(.9*var(--tsu));padding-top:3px;letter-spacing:var(--ls-display)} .calx .dm{display:flex;justify-content:center;align-items:flex-start;padding-top:3px;position:relative;z-index:1} .calx .mk{flex:none;display:inline-block} .calx .mk.taken{width:calc(.72*var(--tsu));height:calc(.72*var(--tsu));border-radius:50%;background:var(--s-adh)} .calx .mk.missed{width:calc(.72*var(--tsu));height:calc(.72*var(--tsu));border-radius:50%;background:var(--st-crit)} .calx .mk.misswarn{width:calc(.72*var(--tsu));height:calc(.72*var(--tsu));border-radius:50%;background:var(--st-caut)} .calx .mk.due{width:calc(.95*var(--tsu));height:calc(.95*var(--tsu));border-radius:50%;background:#fff;border:2.5px solid var(--g-2)} .calx .mk.vdone{width:calc(.74*var(--tsu));height:calc(.74*var(--tsu));background:var(--s-adh);transform:rotate(45deg);margin-top:1px} .calx .mk.vup{width:calc(.9*var(--tsu));height:calc(.9*var(--tsu));background:#fff;border:2.5px solid var(--g-3);transform:rotate(45deg)} .calx .mk.ldone{width:calc(.72*var(--tsu));height:calc(.72*var(--tsu));background:var(--s-adh);margin-top:1px} .calx .mk.lup{width:calc(.86*var(--tsu));height:calc(.86*var(--tsu));background:#fff;border:2.5px solid var(--g-3)} .calx .mk.task{width:calc(1.02*var(--tsu));height:calc(1.02*var(--tsu));border-radius:4px;background:#fff;border:2.5px solid var(--g-2)} .calx .mk.taskdone{width:calc(1.02*var(--tsu));height:calc(1.02*var(--tsu));border-radius:4px;background:var(--s-adh);position:relative} .calx .mk.taskdone::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .calx .dn{min-width:0} .calx .dn .nmline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .calx .dn .nm{font-weight:600;color:var(--c-warmblack);font-size:15px;line-height:var(--lh-title)} .calx .dn.taken .nm{color:var(--s-adh)} .calx .dn.missed .nm{color:var(--st-crit)} .calx .dn.misswarn .nm{color:var(--st-caut)} .calx .dn .meta{font-family:var(--font-num);font-feature-settings:"zero" 1;color:var(--c-warmblack);font-size:calc(.88*var(--tsu));font-weight:500} .calx .dn .meta2{color:var(--g-2);font-size:12px;line-height:var(--lh-title);margin-top:2px} .calx .dn .meta2 .who{color:var(--c-warmblack);font-weight:600} .calx .dr{display:flex;flex-direction:column;align-items:flex-end;padding-top:2px} .calx .notif{font-size:12px;color:var(--g-2);margin-top:6px;white-space:nowrap} .calx .notif b{color:var(--c-warmblack);font-weight:600} .calx .dtasks{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)} .calx .tasklabel{font-size:11px;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--g-2);font-weight:700;margin:0 0 2px 94px} .calx .doses{display:flex;gap:5px;flex-wrap:wrap} /* -- WEEK -- */ .calx .week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:4px;align-items:start} .calx .wday{border:1px solid var(--hair2);border-radius:12px;padding:12px;min-height:96px;display:flex;flex-direction:column;gap:9px} .calx .wday.fut{background:var(--c-paper)} .calx .wday.today{outline:3px solid var(--c-warmblack);outline-offset:-2px} .calx .wdtop{display:flex;flex-direction:column;gap:1px} .calx .wdname{font-size:11px;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--g-2);font-weight:700} .calx .wdnum{font-family:var(--font-display);font-size:calc(1.4*var(--tsu));color:var(--c-warmblack);font-variant-numeric:tabular-nums} .calx .wday.fut .wdnum{color:var(--g-2)} .calx .wappts{display:flex;flex-direction:column;margin-top:6px} .calx .wappt{padding:9px 0} .calx .wappt:first-child{padding-top:0} .calx .wappt + .wappt{border-top:1px solid var(--hair2)} .calx .wappt .wtop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px} .calx .wappt .wt{font-variant-numeric:tabular-nums;color:var(--g-2);font-weight:600;font-size:calc(.9*var(--tsu));letter-spacing:var(--ls-display)} .calx .wappt .wrow{display:flex;align-items:center;gap:8px;font-size:15px} .calx .wappt .nm{color:var(--c-warmblack);font-weight:600} /* -- DAY · BP chart CHROME only (head/sub/legend). The chart's own design — two-line BP, diastolic register, sizing — is views-phase-fluid (7/1 boundary; queue #14/#24). -- */ .calx .daybp{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)} .calx .dbp-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px} .calx .dbp-sub{font-size:15px;color:var(--g-2)} .calx .dbp-sub b{font-family:var(--font-num);color:var(--c-warmblack);font-weight:600;letter-spacing:var(--ls-display)} .calx .dbp-leg{margin-left:auto;display:flex;gap:15px;align-items:center;font-size:12px;color:var(--g-2)} .calx .dbp-leg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .calx .dbp-leg i{width:16px;height:3px;border-radius:2px;display:inline-block} .calx .dbp-leg .s i{background:var(--st-metric)} .calx .dbp-leg .d i{background:var(--g-2)} .calx .daybp svg{width:100%;height:auto;display:block;margin-top:10px} /* ---- LOGO LOCKUP — .lock / .slock (locked in guide-brand; CSS promoted 2026-07-02, closing #11) ---- Wordmark: Source Serif 4 · 450 · capital S · ls -.005em (the wordmark's own locked tracking — logo spec, not display type). Mark at .70 cap-scale (horizontal) / 1.0em (stacked, word .62em). One ink: Brick on light, Rust on dark, cream knockout on Brick (color follows the ground like headlines). THE MARK IS NEVER REDRAWN — source of truth: brand/agent/visual/assets/shadow-mark.svg (the capsule + orb, cheek-to-cheek seam). Reference it (//inline copy), never approximate. Studies: _archive/mark-concepts · mark-inset · mark-shadow-compare · primary-*. */ .lock{display:inline-flex;align-items:baseline;gap:.30em;color:var(--c-primary)} .lock .mark{fill:currentColor;height:.70em;width:auto;flex:none} .word{font-family:var(--font-display);font-weight:450;letter-spacing:-.005em;line-height:1;color:inherit} .slock{display:inline-flex;flex-direction:column;align-items:center;gap:.06em;color:var(--c-primary)} .slock .mark{fill:currentColor;height:1.0em;width:auto} .slock .word{font-family:var(--font-display);font-weight:450;font-size:.62em;line-height:1;color:inherit} /* ============================================================ TABLE GRAMMAR — .tbx context (promoted 2026-07-02 · queue #10) Coordinator tables: the medications register + day log. HEAD = the .chd masthead grammar (standardized, Kristen 7/2) — serif title only. NO META LINE, ever: "5 active · shared view" and "3 of 3 due taken" were interpretations, not data — a table shows RECORDS; counts/verdicts/context are the page's job (the no-conclusion law reaching tables; cousin of the chart E-law + the tooltip no-coaching law). Header row = microcap register. Row hover = the paper wash (THE HOVER LAW). Clinical numerals = .num (mono, slashed zero). Row actions (edit/delete) land with buttons (#2). Sortable headers = views phase. ============================================================ */ .tbx{--hair:rgba(63,19,7,.09);--hair2:rgba(63,19,7,.06)} .tbx .card{background:#fff;border:1px solid var(--hair);border-radius:18px;padding:10px 10px 12px;overflow:hidden} .tbx table{width:100%;border-collapse:collapse} /* header row stepped Stone→WARMBLACK (Kristen 7/4, coordinator-screens): column headers are INSTRUCTIONAL — they say what goes where; the grey got lost. Same reasoning as the 7/2 Stone→Bark cell step, taken to its conclusion for the header tier. Global to all tables. */ .tbx thead th{font-size:11px;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--c-warmblack);font-weight:700;text-align:left;padding:10px 20px;border-bottom:1px solid var(--hair)} .tbx thead th.cen{text-align:center} .tbx tbody td{padding:15px 20px;border-bottom:1px solid var(--hair2);font-size:var(--fs-body);vertical-align:middle} .tbx tbody tr:last-child td{border-bottom:0} .tbx tbody tr:hover td{background:rgba(63,19,7,.035)} /* the ink wash (hover law, amended 7/2) */ .tbx .med{font-weight:600;color:var(--c-warmblack);font-size:15px} .tbx td.sub{color:var(--g-25);font-size:15px} /* Bark — was Stone; clinical values are load-bearing at 15px (Kristen 7/2: "too light"; the ladder agrees — Stone is large-only) */ .tbx .cen{text-align:center} .tbx .sched{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1;letter-spacing:0;color:var(--g-25)} /* THE HISTORY STRIP (.dstrip/.dd) — LOCKED 7/2 · a UNIVERSAL table element (Kristen): the missed/counted marker for any counted history in a table view — doses, labs, appointments, visits. Filled moss = happened · OPEN brick ring = missed ("misses are the signal, not the fill": in a dense strip a hole reads as absence without N alarms) · ash = no data. CHARTERED as deliberately different from the calendar/timeline single-EVENT marks (.cdot.m/.mk.missed = filled brick) — a history strip and an event mark are different jobs (the --f-* / --band-* logic applied to glyphs). The trailing .dnote carries the count ("1 missed"). */ .tbx .dstrip{display:inline-flex;gap:5px;align-items:center;vertical-align:middle} .tbx .dd{width:8px;height:8px;border-radius:50%;flex:none} .tbx .dd.t{background:var(--st-ok)} .tbx .dd.m{background:#fff;border:1.5px solid var(--st-crit)} .tbx .dd.n{background:var(--g-1)} .tbx .dnote{margin-left:11px;font-size:12px;color:var(--g-2);white-space:nowrap} .tbx .dnote.miss{color:var(--st-crit)} /* ============================================================ THE FORMS REGISTER — .f-* / .inp / controls (LOCKED 2026-07-02 on the setup-page + form-contact-sheet settle records: _archive/audits/forms-buttons/) THE LAW: forms are PURE BLACK & WHITE — checked/on = ink, never moss (state color stays with DATA); color enters a form only as ERROR (brick; rust on dark). Required is UNMARKED; optional says so quietly — "(optional)", plain 13 Bark. Focus = the today-ring logic (2px warmblack — "you are here"). Time-of-day is a WINDOW select ("Morning 6–9am"), never a clock picker. Two label registers: the wizard QUESTION (conversational) and the compact edit label. The margin-rail CAPTION (.f-cap) is the instruction register. Dark register inversions at the end of this file. ============================================================ */ .f-q{font-size:17px;font-weight:600;color:var(--c-warmblack);line-height:var(--lh-title);margin:0 0 10px} .f-l{font-size:13px;font-weight:600;color:var(--c-warmblack);line-height:1;margin:0 0 8px;display:block} .f-opt{font-size:13px;font-weight:400;color:var(--g-25);margin-left:6px} /* "(optional)" — required is unmarked */ .f-help{font-size:13px;color:var(--g-25);margin:7px 0 0;line-height:1.45} .f-cap{font-size:13px;color:var(--g-25);line-height:1.55;margin:0} /* margin-rail instruction copy */ .f-cap b{color:var(--c-warmblack);font-weight:600} .f-kick{font-size:11px;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--g-2);font-weight:700;margin:34px 0 14px;display:flex;align-items:center;gap:14px} .f-kick::after{content:"";flex:1;height:1px;background:var(--rule-c)} /* THE SUB-HEAD — .f-sub (LOCKED 2026-07-04, settled live on the coordinator-screens design) The IN-CARD section break. Born because the microcap kicker vanished against table column headers (same register — "new topic" and "column label" were indistinguishable). Separates by FAMILY: display serif at the meta size, ACCENT-colored — the type law's own "headlines on light = Brick" applied at card scale — with the hairline trailing and real air below (36/24). Inherits the surface accent via --acc (setup pages run brick; an item page runs rust; dark grounds fall back to Rust per the type law). CHARTER SPLIT with .f-kick: .f-sub = in-card topic breaks · .f-kick = margin-rail/page-chrome kickers · microcaps in tables mean exactly one thing again — column labels. */ .f-sub{font-family:var(--font-display);font-weight:450;font-size:var(--fs-meta);color:var(--acc,var(--c-primary));letter-spacing:var(--ls-display);line-height:var(--lh-title);margin:36px 0 24px;display:flex;align-items:baseline;gap:16px} .f-sub::after{content:"";flex:1;height:1px;background:var(--rule-c);align-self:center} .f-sub:first-child{margin-top:0} .dark .f-sub{color:var(--acc,var(--c-secondary))} .dark .f-sub::after{background:var(--rule-c-dark)} .frow{display:flex;gap:18px}.frow>div{flex:1} .inp{display:block;width:100%;height:44px;padding:0 14px;box-sizing:border-box;font:400 15px var(--font-ui);color:var(--c-warmblack);background:transparent;border:1px solid rgba(63,19,7,.16);border-radius:9px;transition:border-color .12s ease} .inp::placeholder{color:var(--g-2)} .inp:hover:not(:disabled):not(:focus){border-color:var(--g-2)} .inp:focus{outline:2px solid var(--c-warmblack);outline-offset:1px;border-color:var(--c-warmblack)} .inp.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1;letter-spacing:0} .inp:disabled{background:rgba(63,19,7,.04);color:var(--g-2);border-color:rgba(63,19,7,.09)} .inp.err{border:1.5px solid var(--st-crit)} .f-err{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--t-crit);margin-top:7px} textarea.inp{height:auto;min-height:110px;padding:12px 14px;line-height:var(--lh-body);resize:vertical} .sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238B837A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer} .sel.sm{height:36px;font-size:14px;width:auto;display:inline-block} /* checkbox / radio / toggle — the task-mark SHAPE grammar as real controls, b/w register */ .ck{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:5px;background:transparent;border:2.5px solid var(--g-2);cursor:pointer;position:relative;flex:none;margin:0;transition:background .1s} .ck:checked{background:var(--c-warmblack);border-color:var(--c-warmblack)} .ck:checked::after{content:"";position:absolute;left:50%;top:46%;width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translate(-50%,-50%) rotate(45deg)} .rd{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:transparent;border:2.5px solid var(--g-2);cursor:pointer;position:relative;flex:none;margin:0} .rd:checked{border-color:var(--c-warmblack)} .rd:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--c-warmblack)} .tg2{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:999px;background:transparent;border:1px solid rgba(63,19,7,.16);cursor:pointer;position:relative;margin:0;transition:background .15s;flex:none} .tg2::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--g-2);box-sizing:border-box;transition:left .15s} .tg2:checked{background:var(--c-warmblack);border-color:var(--c-warmblack)} .tg2:checked::after{left:22px;border-color:transparent} .ck:focus-visible,.rd:focus-visible,.tg2:focus-visible{outline:2px solid var(--c-warmblack);outline-offset:2px} .opt{display:flex;align-items:center;gap:10px;font-size:15px;padding:7px 0;cursor:pointer;color:var(--c-warmblack)} /* remove-from-list — quiet ✕, destructive intent surfaces on hover */ .rm{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:9px;color:var(--g-2);cursor:pointer;transition:color .12s,background .12s} .rm:hover{color:var(--st-crit);background:rgba(63,19,7,.04)} .rm:focus-visible{outline:2px solid var(--c-warmblack);outline-offset:1px} .rm svg{width:14px;height:14px} /* ============================================================ THE BUTTON SYSTEM (LOCKED 2026-07-02, same records) THE PRIMARY IS THE CAPSULE — the mark's own geometry as the action object. Fields are crisp documents (9px); actions are capsules — two species, on purpose. HOVER = WARM ELEVATION (lift 1px on a warm-tinted shadow, never black-muddy; press = flat); disabled alone owns the flat grey wash. Registers: primary ink capsule (light-ground/forms) · cream knockout on dark secondary card capsule — white, raised, deliberate ink-alpha outline glass THE EXACT glass spec, verbatim tokens — the MARKETING primary; deep grounds/imagery where the law permits gblack black glass (the frosted shadow) — ink-family exactly, the fancier dark take; angled lit edge (light enters upper-left, matching the 150deg fills) text bare + underline hover; icon = .rm Sizes 48 / 40 (.md) / 25 (.sm — caps 12/700/.05em, the .label.reg type spec as a button; the TABLE/dense-chrome utility, rarely used). ARROWS: optional on ANY button — trailing → for forward/CTA, leading ← for back; ALWAYS weight 400 (a direction, not a word). Mixed-register law applies to counted labels everywhere: words Inclusive, numerals .num (never wholesale mono). ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border-radius:999px;border:0;background:var(--c-warmblack);color:#fff;font:600 15px var(--font-ui);cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease;text-decoration:none;white-space:nowrap} .btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(63,19,7,.20), 0 2px 6px rgba(63,19,7,.12)} .btn:active{transform:none;box-shadow:none} .btn:focus-visible{outline:2px solid var(--c-warmblack);outline-offset:2px} .btn:disabled{background:rgba(63,19,7,.04);color:var(--g-2);cursor:default;transform:none;box-shadow:none} .btn.md{height:40px;padding:0 20px;font-size:14px} .btn.sm{height:25px;padding:0 12px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;gap:5px} .btn.sec{background:#fff;color:var(--c-warmblack);border:1px solid rgba(63,19,7,.42);box-shadow:0 1px 3px rgba(63,19,7,.08)} .btn.sec:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(63,19,7,.14), 0 1px 4px rgba(63,19,7,.08);border-color:var(--g-2)} .btn.glass{background:var(--glass-fill-light);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);color:var(--c-cream);box-shadow:var(--glass-lift), inset 0 1px 0 rgba(243,222,208,.2)} .btn.glass:hover{transform:translateY(-1px)} .btn.gblack{background:linear-gradient(150deg, rgba(23,5,4,.92), rgba(16,3,2,.88));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:0;color:var(--c-cream);box-shadow:0 8px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3), inset 1.5px 1.5px 0 -0.5px rgba(243,222,208,.32), inset -1px -1.5px 0 -0.5px rgba(0,0,0,.4)} .btn.gblack:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.35), inset 1.5px 1.5px 0 -0.5px rgba(243,222,208,.42), inset -1px -1.5px 0 -0.5px rgba(0,0,0,.4)} .btn-txt{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--c-warmblack);font:600 14px var(--font-ui);cursor:pointer;padding:8px 4px;border-radius:6px} .btn-txt:hover{text-decoration:underline;text-underline-offset:3px} .btn-txt:focus-visible{outline:2px solid var(--c-warmblack);outline-offset:2px} .btn-txt .pl{font-size:17px;line-height:1;font-weight:400} /* ── DARK register inversions (forms + buttons) — approved on the setup-page dark mode. Scope: a `.dark` ancestor (the page sets it). Errors go rust; the knockout logic flips. ── */ .dark .f-q,.dark .f-l,.dark .opt{color:var(--c-cream)} .dark .f-opt,.dark .f-help,.dark .f-cap{color:var(--g-15)} .dark .f-cap b{color:var(--c-cream)} .dark .inp{color:var(--c-cream);border-color:rgba(243,222,208,.22)} .dark .inp:hover:not(:disabled):not(:focus){border-color:rgba(243,222,208,.45)} .dark .inp:focus{outline-color:var(--c-cream);border-color:var(--c-cream)} .dark .inp:disabled{background:rgba(243,222,208,.05);color:var(--g-2)} .dark .inp.err{border-color:var(--c-rust)} .dark .f-err{color:var(--c-rust)} .dark .ck:checked,.dark .tg2:checked{background:var(--c-cream);border-color:var(--c-cream)} .dark .ck:checked::after{border-color:var(--c-warmblack)} .dark .rd:checked{border-color:var(--c-cream)} .dark .rd:checked::after{background:var(--c-cream)} .dark .tg2:checked::after{background:var(--c-warmblack)} .dark .ck:focus-visible,.dark .rd:focus-visible,.dark .tg2:focus-visible,.dark .btn:focus-visible,.dark .btn-txt:focus-visible,.dark .rm:focus-visible{outline-color:var(--c-cream)} .dark .rm:hover{color:var(--c-rust);background:rgba(243,222,208,.05)} .dark .btn{background:var(--c-cream);color:var(--c-warmblack)} .dark .btn:hover{box-shadow:0 8px 22px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35)} .dark .btn:disabled{background:rgba(243,222,208,.05);color:var(--g-2)} .dark .btn.sec{background:rgba(20,10,6,.42);color:var(--c-cream);border-color:rgba(243,222,208,.42)} .dark .btn.sec:hover{box-shadow:0 6px 16px rgba(0,0,0,.4)} .dark .btn-txt{color:var(--c-cream)}