:root {
            /* V4 surface palette (docs/version 4/README.md). Three stacked
               darks, never one: --page is the ground, --surface is every card
               sitting on it, --inset is panels/inputs sitting inside a card.
               The old --black token is gone rather than redefined — it used to
               mean both "the page" and "text on gold", which is why the page
               was four shades too light. */
            --page: #0B0B0A; --surface: #131312; --inset: #191815;
            --white: #F5F1E8; --gray: #A8A296; --bronze: #C89B3C;
            --line: #201F1B; --shell: 1240px;
            --available: #8FB58F; --inuse: #D9A95C; --alert: #D08A72; --sky: #8AAFD4; --heather: #A99AD6;
            --gold-tint: #241F13;
            /* Every card-level frame. The card-glow switch trades it for a thin line plus the aura. */
            --frame: 3px solid var(--bronze);
            --surface-2: #181714; --chip: #191815; --line-soft: #1B1A17; --line-dash: #2C2A24; --box: #4A473A;
        }
        * { box-sizing: border-box; }
        body { margin: 0; background: var(--page); color: var(--white); font-family: 'Hanken Grotesk', sans-serif; }
        button, input, select, textarea { font-family: inherit; }
        /* Every action is a full page load: crossfade old page into new
           (native view transitions) so the old one stays up until the new
           one is ready, with no blank frame between. Browsers without
           support just swap instantly. Glide in-page anchor jumps too.
           Nothing moves under reduced motion. */
        @media (prefers-reduced-motion: no-preference) {
            html { scroll-behavior: smooth; }
            @view-transition { navigation: auto; }
            ::view-transition-group(root) { animation-duration: .18s; animation-timing-function: ease-out; }
        }
        /* One font everywhere: Hanken Grotesk, the face of the "Yardsmith
           Stables" brand mark (2026-09-24). .mono keeps its name only because it has ~330
           call sites across 34 templates — rebinding is a smaller diff than
           renaming. tabular-nums replaces the column alignment the monospace
           face used to give times and figures. */
        .mono { font-family: 'Hanken Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
        .heading { font-family: 'Hanken Grotesk', sans-serif; font-weight: 400; }

        .app { display: flex; flex-direction: column; flex: 1; min-height: 800px; }

        /* TOP BAR (DESKTOP) — utility row (brand/search/notices/user).
           Restyled to V4 (docs/version 4/README.md "Sticky header" /
           design tokens) — hardcoded hex here on purpose, matching how the
           V4 reference file itself is written: this block is only ever
           referenced from base.html, so there's no shared-var payoff, and
           inventing header-only custom properties now would just need
           renaming when the rest of the app migrates off Design 2's
           --black/--surface tokens later. */
        .top { display: block; background: #0F0F0E; border-bottom: 1px solid #201F1B; }
        /* Same box as .topbar-d, so the brand and profile line up with the page heading and content edges. */
        .top-in { max-width: calc(var(--shell) + 52px); margin: 0 auto; padding: 13px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
        .brand-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; }
        .brand-mark svg { width: 19px; height: 19px; flex: none; }
        .brand-mark span { font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
        .brand-divider { width: 1px; height: 20px; background: #26251F; }
        .brand-eyebrow { font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7A7468; }
        /* Fills the same gap the search box would occupy when it's hidden
           (Groom/Owner headers), so the bell/avatar stay pinned right either
           way — same spacer technique the V4 reference file itself uses. */
        .top-spacer { flex: 1; min-width: 60px; }
        .search { display: flex; align-items: center; gap: 9px; min-width: 180px; flex: 1; max-width: 320px; height: 38px; padding: 0 16px; background: #151513; border: 1px solid #26251F; border-radius: 999px; color: var(--gray); }
        .search svg, .top .iconbtn svg { flex: none; stroke: var(--bronze); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
        .search input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 13.5px; color: var(--white); outline: none; font-family: 'Hanken Grotesk', sans-serif; }
        .search input::placeholder { color: var(--gray); }
        .me-wrap { display: flex; align-items: center; gap: 12px; margin-left: auto; }
        .iconbtn { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface); border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; color: var(--gray); text-decoration: none; }
        .iconbtn:hover, .iconbtn:active { color: var(--white); }
        .me { display: flex; align-items: center; gap: 10px; }
        .me .mono span { font-family: 'Hanken Grotesk', sans-serif; }
        .av { border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: 'Hanken Grotesk', sans-serif; flex: none; background: var(--gold-tint); color: var(--bronze); width: 34px; height: 34px; font-size: 15px; object-fit: cover; }
        .av.plain { background: var(--surface-2); color: var(--gray); }
        .av.s38 { width: 38px; height: 38px; font-size: 16px; }
        .av.s56 { width: 56px; height: 56px; font-size: 22px; }
        /* .av and .iconbtn are shared classes used well beyond the header
           (horse/staff lists, calendar week-nav) — still on Design 2's
           palette there, so the V4 pill/border treatment is scoped to the
           header instance only, not the base rules above. */
        .top .iconbtn { width: 38px; height: 38px; border-radius: 999px; border-color: #26251F; background: #151513; }
        .top .av { background: #2C2517; border: 1px solid #453A22; }
        /* Groom/other plain-staff header avatar reads neutral, not gold —
           gold is reserved for Manager and Owner per the V4 role mockups. */
        .top .av.staff { background: #232220; border-color: #2F2E28; color: #D6D0C3; }

        /* Header bell drop-down — a <details>, so open/close is native;
           the keyframe is just the roll-down on open. */
        .notif { position: relative; }
        .notif summary { list-style: none; }
        .notif summary::-webkit-details-marker { display: none; }
        .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; width: 280px; max-width: calc(100vw - 32px); background: #151513; border: 1px solid #26251F; border-radius: 14px; box-shadow: 0 12px 28px rgba(0,0,0,.5); overflow: hidden; transform-origin: top; }
        .notif[open] .notif-panel { animation: notif-roll .18s ease-out; }
        @keyframes notif-roll { from { opacity: 0; transform: scaleY(.6) translateY(-6px); } to { opacity: 1; transform: none; } }
        .notif-item { display: block; text-decoration: none; padding: 10px 14px; border-bottom: 1px solid #201F1B; font-family: 'Hanken Grotesk', sans-serif; }
        .notif-item b { display: block; font-size: 13px; font-weight: 600; color: var(--white); }
        .notif-item span, .notif-empty { font-size: 12px; color: var(--gray); }
        .notif-empty { padding: 14px; font-family: 'Hanken Grotesk', sans-serif; }
        .notif-all { display: block; padding: 11px 14px; font-family: 'Hanken Grotesk', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--bronze); text-decoration: none; }

        /* NAV (DESKTOP) — one scrolling pill row, per V4's "Nav pill row"
           spec: flex-wrap:nowrap, horizontal scroll, hidden scrollbar,
           gold pill for the active item. Used to be split into a primary
           row plus a quieter .tabs-secondary row for the items that didn't
           fit V4's ~11-item sample nav (Tasks, Training Requests,
           Equipment, Contacts) — now merged into the one row the spec
           calls for, all items kept since the mockup's item count is
           illustrative, not a ceiling. */
        .tabs.desktop-only { max-width: var(--shell); margin: 0 auto; padding: 0 24px 13px; }
        .tabs-in { display: flex; flex-wrap: nowrap; gap: 2px; width: max-content; max-width: 100%; margin: 0 auto; overflow-x: auto; scrollbar-width: none; background: #151513; border: 1px solid #201F1B; border-radius: 999px; padding: 4px; }
        .tabs-in::-webkit-scrollbar { display: none; }
        .tab { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 14px; border: none; border-radius: 999px; background: transparent; color: #A8A296; font-family: 'Hanken Grotesk', sans-serif; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
        .tab:hover, .tab:active { color: var(--white); }
        .tab.on { background: var(--bronze); color: #0B0B0A; }
        .tab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

        /* Mobile nav (.mobile-navbar) keeps using .sb-item — unrelated to
           the desktop .tab rules above, unchanged by this pass. */
        .sb-item { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-left: 2px solid transparent; text-decoration: none; transition: background 0.15s; }
        .sb-item:hover, .sb-item:active { background: var(--surface); }
        .sb-item svg { width: 16px; height: 16px; stroke: var(--gray); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
        .sb-item span { font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--gray); }
        .sb-item.active { border-left-color: var(--bronze); background: var(--surface); }
        .sb-item.active svg { stroke: var(--bronze); }
        .sb-item.active span { color: var(--white); }

        /* MAIN SCREEN WORKSPACE */
        .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
        .topbar-d { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 26px 2px; gap: 16px; } /* 2px + .maincontent's 24px = .head's 26px gap */
        /* Topbar pages sit on the same centred shell as the .head pages, so every heading starts at the same x. */
        .topbar-d { width: 100%; max-width: calc(var(--shell) + 52px); margin: 0 auto; }
        .topbar-d + .maincontent > * { max-width: var(--shell); margin-left: auto; margin-right: auto; }
        .maincontent { flex: 1; padding: 24px 26px; overflow: auto; }

        /* TODAY PAGE — Design 2's page/head/two/card/row/detail rules, scoped
           under .today so they can't leak onto the other templates that
           still use the app's older, differently-shaped .card/.btn. The one
           page that opts in deliberately is the command center, whose
           wrapper carries `today mgr` — see the .mgr block below. Colors
           reuse the app's existing tokens (--available/--inuse/--alert are
           already this app's sage/amber/clay; --bronze is its gold). */
        .today { max-width: var(--shell); margin: 0 auto; }
        /* One page heading on every screen — the Overview's. Line-height matches
           the 44px buttons so a .head-actions row sits level with the h1. */
        .today .head, .week .head, .yard .head, .reqs .head, .horses .head, .team .head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
        .today .big, .week .head h1, .yard .head h1, .reqs .head h1, .horses .head h1, .team .head h1, .topbar-d h2 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 400; font-size: 32px; line-height: 44px; margin: 0; color: var(--white); }
        .today .lede, .week .lede, .yard .lede, .reqs .lede, .horses .lede, .team .lede, .topbar-d .sub { font-size: 15px; line-height: 1.6; color: var(--gray); margin: 8px 0 0; max-width: 58ch; font-family: 'Hanken Grotesk', sans-serif; }
        .today .head-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }

        .today .btn { height: 42px; padding: 0 18px; border-radius: 3px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border: 1px solid transparent; text-transform: none; letter-spacing: normal; font-weight: 500; font-family: 'Hanken Grotesk', sans-serif; }
        .today .btn.tall { height: 44px; padding: 0 20px; }
        .today .btn-primary { background: var(--bronze); color: var(--page); }
        .today .btn-ghost { background: var(--surface); border-color: var(--line); color: var(--white); }
        .today .btn-danger { background: transparent; color: var(--alert); }

        .today .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 26px; align-items: start; }
        .today .two + .two { margin-top: 26px; }
        .today .card { background: var(--surface); border: var(--frame); border-radius: 18px; margin: 0; }
        .today .card.clip { overflow: hidden; }
        .today .card-bar { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
        .today .card-bar .count { margin-left: auto; font-size: 13px; color: var(--gray); }
        .today .kicker { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
        .today .mini-btn { border: 1px solid var(--line); background: transparent; border-radius: 3px; padding: 6px 10px; font-size: 12px; color: var(--gray); cursor: pointer; white-space: nowrap; }

        .today .row { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); border-left: 2px solid transparent; cursor: pointer; color: var(--white); text-decoration: none; }
        .today .row:hover, .today .row:active { background: var(--surface-2); }
        .today .row.on { background: var(--gold-tint); border-left-color: var(--bronze); border-radius: 12px; }
        .today .box { width: 22px; height: 22px; flex: none; margin-top: 2px; border-radius: 999px; border: 1.25px solid var(--box); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--page); }
        .today .box.done { border-color: var(--available); background: var(--available); }
        .today .box svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }
        .today .row-body { flex: 1; min-width: 0; }
        .today .row-top { display: flex; align-items: baseline; gap: 10px; }
        .today .time { font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; color: var(--gray); font-variant-numeric: tabular-nums; }
        .today .state { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
        .today .row-title { display: block; font-size: 15.5px; line-height: 1.45; margin-top: 4px; }
        .today .row-meta { display: block; font-size: 13px; color: var(--gray); margin-top: 4px; }
        .today .done-text { color: var(--gray); text-decoration: line-through; }
        .today .s-sage { color: var(--available); }
        .today .s-clay { color: var(--alert); }
        .today .s-amber { color: var(--inuse); }
        .today .s-gold { color: var(--bronze); }
        .today .s-mute { color: var(--gray); }
        .today .btn-dashed { width: 100%; height: 42px; border: 1px dashed var(--line-dash); background: transparent; border-radius: 3px; color: var(--gray); font-size: 13.5px; cursor: pointer; }

        .today .detail-head { padding: 24px 26px 22px; border-bottom: 1px solid var(--line-soft); }
        .today .detail-head h2 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 400; font-size: 27px; line-height: 1.2; margin: 12px 0 0; color: var(--white); }
        .today .detail-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray); }
        .today .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
        .today .chip { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--gray); background: var(--chip); border-radius: 999px; padding: 6px 12px; }
        .today .chip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.25; }
        .today .card-sec { padding: 22px 26px; border-bottom: 1px solid var(--line-soft); }
        .today .card-sec:last-child { border-bottom: none; }
        /* Reassign picker. color-scheme darkens the OS-drawn dropdown list the CSS can't reach. */
        .today .card-sec select { color-scheme: dark; height: 46px; padding: 0 16px; background: var(--inset); border: 1px solid #26251F; border-radius: 999px; color: var(--white); font-size: 14px; }
        .today .card-sec select:focus { outline: none; border-color: var(--bronze); }
        .today .card-sec option { background: var(--inset); color: var(--white); }
        .today .sec-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
        .today .sec-bar .count { margin-left: auto; font-size: 13px; color: var(--gray); }
        .today .steps { display: flex; flex-direction: column; gap: 2px; }
        .today .step { display: flex; align-items: center; gap: 13px; padding: 11px 12px; margin: 0 -12px; border: none; background: transparent; border-radius: 3px; cursor: pointer; text-align: left; font-size: 14.5px; color: var(--white); text-decoration: none; }
        .today .step:hover, .today .step:active { background: var(--chip); }
        .today .tickbox { width: 20px; height: 20px; flex: none; border-radius: 999px; border: 1.25px solid var(--box); display: flex; align-items: center; justify-content: center; color: var(--page); }
        .today .tickbox svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }
        .today .step.on .tickbox { border-color: var(--bronze); background: var(--bronze); }
        .today .step.on span:last-child { color: var(--gray); text-decoration: line-through; }
        .today .note { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--gray); }
        .today .actions { padding: 20px 26px; display: flex; flex-wrap: wrap; gap: 10px; }
        .today .actions .right { margin-left: auto; }
        .today .empty { padding: 40px 26px; text-align: center; color: var(--gray); font-size: 14px; }
        .today .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
        .today .dot.sage { background: var(--available); }
        .today .dot.amber { background: var(--inuse); }
        .today .dot.clay { background: var(--alert); }
        .today .dot.mute { background: var(--gray); }
        .today .h-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
        .today .h-row:last-child { border-bottom: none; }
        .today .h-row img, .today .h-row .av { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; flex: none; }
        .today .h-name { font-size: 14.5px; color: var(--white); }
        .today .h-meta { font-size: 12.5px; color: var(--gray); margin-top: 2px; }

        /* LIVE FEED — who → did what → to which horse → where, as pills.
           Only the avatars echo (reusing pulse-echo-dot), and only on the
           newest rows (.live), so the feed pops without taking the screen. */
        .today .feed-row { flex-direction: column; align-items: stretch; gap: 6px; }
        .today .feed-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        .today .feed-pill { --pulse-color: 200, 155, 60; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid rgba(var(--pulse-color), .45); background: var(--inset); color: var(--white); font-size: 13.5px; font-weight: 600; max-width: 100%; }
        .today .feed-pill.horse, .today .feed-pill.place { --pulse-color: 143, 181, 143; }
        .today .feed-pill.place.walker { --pulse-color: 217, 169, 92; }
        .today .feed-pill img, .today .feed-pill .av { width: 26px; height: 26px; font-size: 12px; background: rgba(var(--pulse-color), .16); color: rgb(var(--pulse-color)); }
        .today .feed-row.live .feed-pill img, .today .feed-row.live .feed-pill .av { animation: feed-echo 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1); }
        .today .feed-verb { font-size: 12.5px; color: var(--gray); text-transform: lowercase; }
        .today .feed-arrow { color: var(--gray); }
        /* The row a bell notice jumped to. */
        .today .feed-row:target { background: var(--gold-tint); scroll-margin-top: 90px; }
        @keyframes feed-echo {
            0% { box-shadow: 0 0 0 0 rgba(var(--pulse-color), .8), 0 0 0 0 rgba(var(--pulse-color), .35); }
            60%, 100% { box-shadow: 0 0 0 4px rgba(var(--pulse-color), 0), 0 0 0 8px rgba(var(--pulse-color), 0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .today .feed-row.live .feed-pill img, .today .feed-row.live .feed-pill .av { animation: none; }
        }

        /* MY TASKS — filter pills and the day-grouped accordion (native
           <details>/<summary>, so no bespoke expand/collapse JS). Reuses
           .today's .card/.row/.steps/.note rules for the row itself; these
           are the pieces that page doesn't already have. */
        .today .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
        .today .filter-pill { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 8px 16px; font-size: 13px; color: var(--gray); text-decoration: none; }
        .today .filter-pill.on { background: var(--bronze); border-color: var(--bronze); color: var(--page); }
        .today .day-group { margin-bottom: 26px; }
        .today .day-group .kicker { margin-bottom: 12px; }
        .today .task-row { margin-bottom: 10px; }
        .today .task-row > summary { list-style: none; }
        .today .task-row > summary::-webkit-details-marker { display: none; }

        @media screen and (max-width: 768px) {
            .today .two { gap: 18px; }
            .today .two + .two { margin-top: 18px; }
            .today .big, .week .head h1, .yard .head h1, .reqs .head h1, .horses .head h1, .team .head h1, .topbar-d h2 { font-size: 27px; }
            .today .card-sec, .today .detail-head, .today .actions { padding-left: 18px; padding-right: 18px; }
            .today .row, .today .card-bar { padding-left: 16px; padding-right: 16px; }
        }

        /* WEEK PAGE — page/head/pager rules plus the .wk agenda rows, scoped
           under .week for the same reason .today is scoped above. The .wk
           rows now follow the V4 week mock (docs/version 4/Yardsmith V4
           Manager.dc.html:544-565,1282-1291) rather than Design 2; the
           surrounding card is the same .cal-card the month grid uses
           (calendar.html's own <style>), not this rule set. */
        .week { max-width: var(--shell); margin: 0 auto; }
        .week .pager { margin-left: auto; display: flex; gap: 8px; }
        .week .iconbtn { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; color: var(--gray); text-decoration: none; display: flex; align-items: center; justify-content: center; }
        .week .iconbtn:hover, .week .iconbtn:active { color: var(--white); }

        .week .wk { display: flex; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); border-left: 3px solid transparent; }
        .week .wk:last-child { border-bottom: none; }
        .week .wk.is-today { background: var(--gold-tint); border-left-color: var(--bronze); }
        .week .wk-date { width: 78px; flex: none; text-decoration: none; }
        /* Day pop-up (calendar.html, staff_list.html): the .card inside is the surface.
           Without JS it stays an open, non-modal dialog sitting in the page flow. */
        .day-dialog { width: min(560px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; padding: 0; background: transparent; border: none; color: var(--white); }
        .day-dialog::backdrop { background: rgba(0, 0, 0, .6); }
        .day-dialog:not(:modal) { position: static; width: auto; max-height: none; margin: 0; }
        .day-dialog:not(:modal) .day-close { display: none; }
        .day-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--inset); color: var(--white); font-size: 20px; cursor: pointer; }
        .week .wk-date .date { font-family: 'Hanken Grotesk', sans-serif; font-size: 26px; font-weight: 500; line-height: 1; color: var(--white); }
        .week .wk-date .day { font-size: 13px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; color: #7A7468; margin-top: 4px; }
        .week .wk.is-today .wk-date .day { color: var(--bronze); }
        .week .wk-items { flex: 1; min-width: 0; display: grid; gap: 9px; }
        .week .wk-item { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
        .week .wk-item .wt { font-size: 14px; color: var(--gray); font-variant-numeric: tabular-nums; flex: none; width: 44px; }
        .week .wk-item .wd { width: 7px; height: 7px; border-radius: 999px; flex: none; }
        .week .wk-item .wd.sage { background: var(--available); }
        .week .wk-item .wd.amber { background: var(--inuse); }
        .week .wk-item .wd.clay { background: var(--alert); }
        .week .wk-item .wd.mute { background: var(--gray); }
        .week .wk-item .wd.gold { background: var(--bronze); }
        .week .wk-item .wd.sky { background: var(--sky); }
        .week .wk-item .wd.heather { background: var(--heather); }
        .week .wk-item .wx { flex: 1; min-width: 120px; font-size: 16px; font-weight: 500; color: var(--white); }
        .week .wk-item .ww { font-size: 14px; color: #7A7468; }

        @media screen and (max-width: 768px) {
            .week .wk { flex-direction: column; gap: 12px; padding-left: 16px; padding-right: 16px; }
            .week .wk-date { width: auto; }
        }

        /* YARD PAGE — V4's Yard screen (docs/version 4/README.md and the
           Manager prototype's isYard block), scoped under .yard for the same
           reason .today is scoped above. The hexes spelled out here predate
           the V4 palette landing on dev; several now have tokens (--page,
           --surface, --line), and folding them in belongs with the sitewide
           sweep, not here.
           Every group card is one meter over one chip per space; the stalls
           card is the same shape even though a stall isn't a Facility (see
           models.py) — its spaces are the home_stall_label values in use,
           and a chip carries a third state Design 2 already had and V4
           spends on "out for repairs": away, the horse is elsewhere, so the
           nameplate is momentarily free but still has a name on it. */
        .yard { max-width: var(--shell); margin: 0 auto; }
        .yard .head-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
        .yard .btn { height: 40px; padding: 0 20px; border-radius: 999px; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border: 1px solid transparent; font-weight: 600; font-family: 'Hanken Grotesk', sans-serif; text-decoration: none; }
        .yard .btn.tall { height: 44px; }
        .yard .btn-primary { background: var(--bronze); color: var(--page); font-weight: 700; }
        .yard .btn-primary:hover, .yard .btn-primary:active { background: #DCAD4B; }

        .yard .cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
        .yard .area { background: #131312; border: var(--frame); border-radius: 18px; padding: 20px 22px; margin: 0; }
        .yard .area-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; }
        .yard .area-top .nm { font-family: 'Hanken Grotesk', sans-serif; font-weight: 500; font-size: 21px; color: var(--white); }
        .yard .area-top .ct { margin-left: auto; font-size: 12.5px; color: #7A7468; font-variant-numeric: tabular-nums; }
        .yard .meter { height: 5px; border-radius: 999px; background: #242320; margin: 0 0 16px; overflow: hidden; }
        .yard .meter i { display: block; height: 5px; border-radius: 999px; background: var(--bronze); }
        .yard .meter i.sage { background: var(--available); }
        .yard .spots { display: flex; flex-wrap: wrap; gap: 8px; }
        .yard .spot { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #241F13; border: 1px solid #3B3223; color: #EFE7D5; text-decoration: none; }
        .yard .spot b { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gray); }
        .yard .spot.free { background: #151513; border-color: #232220; color: #635E54; font-weight: 400; }
        .yard .spot.away { background: #2A1C17; border-color: #4A332A; color: var(--alert); }
        .yard .spot[href]:hover, .yard .spot[href]:active { border-color: #4A473C; }

        /* YARD PLAN — V4's site plan (docs/version 4/README.md, "Yard map").
           The prototype absolutely positions twelve stalls and four paddocks
           at hardcoded percentages; that's design reference only. Here the
           layout is flex + grid + multi-column fed by whatever
           home_stall_label values and Facility rows exist, so a yard of any
           size draws correctly. Horse chips are ordinary flow children of
           their zone rather than absolutely positioned elements, which is
           what removes the coordinate maths entirely. V4 hexes are spelled
           out for the same reason the .horses block below does it. */
        .yard .plan { background: #131312; border: var(--frame); border-radius: 18px; padding: 22px 24px 24px; margin: 0 0 18px; }
        .yard .plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
        .yard .plan-top .nm { font-family: 'Hanken Grotesk', sans-serif; font-size: 22px; color: var(--white); }
        .yard .plan .hint { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #7A7468; }
        .yard .plan .legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--gray); }
        .yard .plan .legend span { display: flex; align-items: center; gap: 8px; }
        .yard .plan .legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
        .yard .plan .legend i.k-stall { background: #1D1B16; border: 1.5px solid var(--box); }
        .yard .plan .legend i.k-field { background: #101A0E; border: 1.5px dashed #4F6B47; }
        .yard .plan .legend i.k-round { background: #111509; border: 1.5px solid #4F6B47; border-radius: 999px; }

        .yard .plan-scroll { overflow-x: auto; }
        .yard .plan-map { position: relative; display: flex; min-width: 680px; min-height: 520px; padding: 14px; background: #0E120C; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 5px, transparent 5px 11px); border: 1px solid #1B1A17; border-radius: 14px; }
        .yard .plan .ground { flex: 48 1 0; background: #15140F; border: 1px solid #23211A; border-radius: 14px; padding: 14px; }
        .yard .plan .drive { flex: 0 0 30px; margin: 0 10px; position: relative; background: #15140F; border-left: 1px solid #23211A; border-right: 1px solid #23211A; }
        .yard .plan .drive::after { content: ''; position: absolute; left: 50%; top: 6%; bottom: 6%; border-left: 2px dashed #2B2920; }
        .yard .plan .fields { flex: 44 1 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); grid-auto-rows: minmax(118px, auto); gap: 12px; align-content: start; }

        .yard .plan .eyebrow { font-size: 12px; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; color: #57524A; }
        .yard .plan .none { margin: 0; padding: 18px 4px; font-size: 13px; color: #57524A; }

        .yard .plan .block { position: relative; background: linear-gradient(90deg, #1D1B16, #151310 48%, #1D1B16); border: 1px solid #2C2923; border-radius: 8px; padding: 28px 12px 2px; }
        .yard .plan .block > .eyebrow { position: absolute; left: 14px; top: 10px; }
        /* Multi-column fills the first column before the second, which is how
           the prototype's 01-06 / 07-12 block reads -- and it needs no stall
           count to do it. */
        .yard .plan .stalls { columns: 2; column-gap: 10px; }
        .yard .plan .cell { break-inside: avoid; display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 10px; padding: 6px 10px; background: #1A1814; border: 1px solid #2C2925; border-radius: 4px; }
        .yard .plan .cell .code { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; letter-spacing: .1em; font-weight: 700; text-transform: uppercase; color: #56514A; }
        .yard .plan .cell.taken .code { color: #8A8375; }
        .yard .plan .cell .chip { margin: 0 auto; }
        .yard .plan .cell .code.short { display: none; }

        .yard .plan .chip { display: inline-flex; align-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 12px; background: #2A2418; border: 1px solid #463A22; border-radius: 999px; color: #F1E6CE; font-size: 12px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .9); }
        .yard .plan .chip.mute { background: #191815; border-color: #26251F; color: #A8A296; box-shadow: none; }

        .yard .plan .zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 10px 12px; text-decoration: none; }
        .yard .plan .zone .eyebrow { position: absolute; left: 10px; top: 10px; right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* Place names are what a worker scans the map for, so they match the
           "Yardsmith Stables" brand mark rather than a dim eyebrow. */
        .yard .plan .zone .eyebrow, .yard .plan .block > .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--white); }
        .yard .plan .zone .chips { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
        .yard .plan .zone.field { background: #101A0E; background-image: repeating-linear-gradient(120deg, rgba(143, 181, 143, .05) 0 3px, transparent 3px 14px); border: 1.5px dashed #2F4029; border-radius: 5px; }
        .yard .plan .zone.arena { background: #1B1813; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 11px); border: 2px solid #33302A; border-radius: 5px; }
        .yard .plan .zone.round { align-self: start; width: 100%; aspect-ratio: 1; padding: 30px 12px 12px; background: #111509; background-image: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .05) 0deg 2deg, transparent 2deg 45deg), radial-gradient(circle, #1A1E15 0 22%, transparent 23%); border: 1px solid #313E2D; border-radius: 999px; }
        .yard .plan .zone.round .eyebrow { text-align: center; }
        .yard .plan .zone.full .eyebrow { color: var(--inuse); }

        /* V4's compass badge and scale bar are dropped: they sit in a corner
           the prototype knows is empty, but our zones are laid out from live
           data, so any fixed corner eventually covers a facility label. */
        .yard .plan .unplaced { margin-top: 16px; padding-top: 16px; border-top: 1px solid #201F1B; }
        .yard .plan .unplaced .eyebrow { display: block; margin-bottom: 10px; }
        .yard .plan .unplaced .chips { display: flex; flex-wrap: wrap; gap: 8px; }

        /* Horse chips: a still aura while a horse is in its own stall, the
           Today feed's feed-echo pulse while it's out at a facility -- sage on
           grass, amber on the walker and arena, same as the feed's pills.
           touch-action: none lets a finger drag a chip instead of scrolling. */
        .yard .plan .chip.home { box-shadow: 0 0 12px 1px rgba(200, 155, 60, .35), 0 6px 16px -10px rgba(0, 0, 0, .9); }
        .yard .plan .chip.out { --pulse-color: 143, 181, 143; animation: feed-echo 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1); }
        .yard .plan .round .chip.out, .yard .plan .arena .chip.out { --pulse-color: 217, 169, 92; }
        .yard .plan [data-move] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
        .yard .plan .chip.lifted { opacity: .35; }
        .yard .plan .chip.ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%) scale(1.08); animation: none; }
        .yard .plan .drop-over { outline: 2px solid var(--bronze); outline-offset: 3px; }
        @media (prefers-reduced-motion: reduce) {
            .yard .plan .chip.out { animation: none; }
        }

        .yard .timer-dialog { width: min(340px, calc(100vw - 32px)); padding: 22px; background: var(--surface); border: var(--frame); border-radius: 18px; color: var(--white); }
        .yard .timer-dialog::backdrop { background: rgba(0, 0, 0, .6); }
        .yard .timer-dialog .nm { font-family: 'Hanken Grotesk', sans-serif; font-size: 22px; }
        .yard .timer-dialog input[type="number"] { box-sizing: border-box; width: 100%; height: 48px; margin: 14px 0 16px; padding: 0 14px; background: var(--inset); border: 1px solid var(--line); border-radius: 12px; color: var(--white); font-family: inherit; font-size: 16px; }
        .yard .timer-dialog .row { display: flex; justify-content: flex-end; gap: 10px; }
        .yard .btn-ghost { background: transparent; border-color: var(--line); color: var(--gray); }
        .yard .plan.selecting [data-move] { cursor: pointer; }
        /* Select mode dims the map under a scrim and lifts the horse chips
           above it, so it's obvious the taps now pick horses. */
        .yard .plan.selecting .plan-map::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(11, 11, 10, .6); pointer-events: none; z-index: 1; }
        .yard .plan.selecting .chip { position: relative; z-index: 2; }
        .yard .plan.selecting .legend, .yard .plan.selecting .unplaced .eyebrow, .yard .plan.selecting .unplaced .hint { opacity: .35; }
        .yard .plan.selecting .plan-top .hint { color: var(--bronze); }
        .yard .plan .chip.picked { outline: 2px solid var(--bronze); outline-offset: 2px; background: var(--gold-tint); }
        .yard .bring-in { margin-top: 12px; }

        /* Bulk move (_bulk_move_form.html): pinned to the bottom so it stays
           in reach while picking horses further up a long page. */
        .bulk-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 640px; margin: 0 auto; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: var(--frame); border-radius: 18px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .9); }
        .bulk-bar[hidden] { display: none; }
        .bulk-bar .ct { flex: none; font-size: 13.5px; color: var(--gray); font-variant-numeric: tabular-nums; }
        .bulk-bar select, .bulk-bar input[type="number"] { flex: 1; min-width: 120px; height: 44px; padding: 0 14px; background: var(--inset); border: 1px solid var(--line); border-radius: 12px; color: var(--white); font-family: inherit; font-size: 16px; }
        .bulk-bar input[type="number"] { flex: 0 1 110px; min-width: 90px; }
        .bulk-bar input[hidden] { display: none; }
        /* Room to scroll the last rows out from under the bar. */
        body:has(.bulk-bar:not([hidden])) .yard, body:has(.bulk-bar:not([hidden])) .horses { padding-bottom: 140px; }
        @media screen and (max-width: 768px) {
            .bulk-bar { bottom: 96px; }  /* clears .mobile-navbar */
        }

        @media screen and (max-width: 768px) {
            .yard .area { padding: 18px; }
            .yard .plan { padding: 18px 16px 20px; }
            /* Phones stack the plan instead of scrolling it sideways: stable
               block on top, the drive turned horizontal, fields below. */
            .yard .plan-map { flex-direction: column; min-width: 0; min-height: 0; padding: 10px; }
            .yard .plan .ground { flex: none; padding: 10px; }
            .yard .plan .drive { flex: 0 0 22px; margin: 10px 0; border: 0; border-top: 1px solid #23211A; border-bottom: 1px solid #23211A; }
            .yard .plan .drive::after { left: 4%; right: 4%; top: 50%; bottom: auto; border-left: 0; border-top: 2px dashed #2B2920; }
            .yard .plan .fields { flex: none; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
            /* A half-width stall cell left a name about 75px and clipped it,
               so phones stack the stalls in one column, show "#1" rather
               than "Stall 1", swap the colour dot for a frame glowing in the
               horse's colour, and let a very long name wrap, never clip. */
            .yard .plan .stalls { columns: 1; }
            .yard .plan .cell { gap: 8px; padding: 6px 8px; }
            .yard .plan .cell .code.full { display: none; }
            .yard .plan .cell .code.short { display: block; letter-spacing: .02em; }
            .yard .plan .cell .chip { display: block; white-space: normal; overflow-wrap: break-word; text-align: center; line-height: 1.3; padding: 5px 10px; font-size: 13px; }
            .yard .plan .cell .chip .ec { display: none; }
            .yard .plan .cell .chip.home { border-color: var(--hc); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--hc) 55%, transparent); }
        }

        /* OWNER REQUESTS PAGE — V4's manager "Owner requests" screen
           (docs/version 4/README.md and the Manager prototype's isRequests
           block). Unifies FeedChangeRequest, FieldChangeRequest and
           TrainingBooking (AppointmentRequest joins in a later step; see
           docs/superpowers/specs/2026-09-21-owner-requests-design.md). The
           clay "Urgent" chip reuses the app's existing --alert/clay tokens
           (see the .yard .spot.away rule above). */
        .reqs { max-width: var(--shell); margin: 0 auto; }
        .reqs .list { max-width: 880px; }
        .reqs .list { display: grid; gap: 14px; }
        .reqs .card { background: var(--surface); border: var(--frame); border-radius: 18px; padding: 20px 22px; }
        .reqs .card.urgent { border-color: var(--alert); box-shadow: 0 0 14px 1px rgba(208, 138, 114, .35); }
        .reqs .card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
        .reqs .tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--gold-tint); color: var(--bronze); }
        .reqs .tag.urgent { background: #2A1C17; color: var(--alert); }
        .reqs .horse { font-size: 15px; font-weight: 600; color: var(--white); }
        .reqs .meta { font-size: 13px; color: #7A7468; }
        .reqs .at { margin-left: auto; font-size: 12.5px; color: #7A7468; }
        .reqs .field-label { font-size: 12px; letter-spacing: .13em; color: #7A7468; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
        .reqs .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
        .reqs .panel { border-radius: 12px; padding: 13px 15px; }
        .reqs .panel.now { background: #181714; border: 1px solid #232220; }
        .reqs .panel.req { background: #221D12; border: 1px solid #4A3F20; }
        .reqs .panel .lbl { font-size: 12px; letter-spacing: .12em; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
        .reqs .panel.now .lbl { color: #6E685D; }
        .reqs .panel.req .lbl { color: #D3A548; }
        .reqs .panel .val { font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
        .reqs .panel.now .val { color: #A8A296; }
        .reqs .panel.req .val { color: #F1E6CE; }
        .reqs .note { font-size: 13.5px; line-height: 1.55; color: #C7C0B2; margin-bottom: 14px; text-wrap: pretty; }
        .reqs .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        .reqs .btn { height: auto; padding: 10px 18px; border-radius: 999px; font-size: 13px; cursor: pointer; border: 1px solid transparent; font-weight: 700; font-family: 'Hanken Grotesk', sans-serif; text-decoration: none; }
        .reqs .btn-primary { background: var(--bronze); color: var(--page); }
        .reqs .btn-ghost { background: transparent; border: 1px solid #2C2A24; color: var(--white); font-weight: 600; }
        .reqs .btn-ghost:hover, .reqs .btn-ghost:active { border-color: #4A473C; }
        .reqs .btn-ghost.muted { color: #A8A296; }
        .reqs select, .reqs input[type=date], .reqs input[type=time] { background: var(--inset); border: 1px solid var(--line); color: var(--white); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-family: inherit; }
        .reqs .empty { text-align: center; padding: 40px 0; color: #7A7468; font-size: 14px; }
        @media screen and (max-width: 768px) {
            .reqs .card { padding: 16px 18px; }
        }

        /* HORSES PAGE — V4's Horses screen (docs/version 4/README.md and the
           Manager prototype's isHorses block), scoped under .horses the same
           way the Today page is scoped under .today so it can't leak onto
           other templates. Hardcoded V4 hexes for the same reason the .team
           block above does it: the sitewide --black/--surface tokens are
           still Design 2's lighter values, so anything V4 has to name a tone
           for spells it out until the app-wide token swap happens.

           The structural change from Design 2 is the detail card: sections
           are no longer padded boxes holding padded k/v rows, they're a
           kicker followed by full-bleed rows separated by hairlines, which
           is what lets this page carry feed plan, notes, training and
           appointments in the same rhythm the prototype uses for its five. */
        .horses { max-width: var(--shell); margin: 0 auto; }
        .horses .head-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }

        .horses .btn { height: 40px; padding: 0 20px; border-radius: 999px; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border: 1px solid transparent; text-transform: none; letter-spacing: normal; font-weight: 600; font-family: 'Hanken Grotesk', sans-serif; text-decoration: none; }
        .horses .btn-primary { background: var(--bronze); color: #0B0B0A; font-weight: 700; }
        .horses .btn-primary:hover, .horses .btn-primary:active { background: #DCAD4B; }
        .horses .btn-ghost { background: transparent; border-color: #2C2A24; color: #F5F1E8; }
        .horses .btn-ghost:hover, .horses .btn-ghost:active { border-color: #4A473C; }
        .horses .btn-danger { background: transparent; border-color: #4A2F26; color: var(--alert); }
        .horses .btn-danger:hover, .horses .btn-danger:active { border-color: var(--alert); }

        .horses .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
        .horses .card { background: #131312; border: var(--frame); border-radius: 18px; margin: 0; }
        .horses .card.clip { overflow: hidden; }
        /* V4's 14px tail spacer sits under the detail card's last row only —
           the roster list ends flush on its last row. */
        .horses #horses-detail { padding-bottom: 14px; }
        .horses .empty { padding: 40px 26px; text-align: center; color: #7A7468; font-size: 14px; }

        .horses .filters { padding: 14px 20px; border-bottom: 1px solid #201F1B; display: flex; gap: 8px; flex-wrap: wrap; }
        .horses .filters a { font-size: 12.5px; padding: 7px 14px; border-radius: 999px; color: #7A7468; text-decoration: none; border: 1px solid transparent; }
        .horses .filters a:hover, .horses .filters a:active { border-color: #2C2A24; }
        .horses .filters a.on { background: var(--gold-tint); border-color: #5E5026; color: var(--bronze); }

        .horses .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
        .horses .dot.sage { background: var(--available); }
        .horses .dot.amber { background: var(--inuse); }
        .horses .dot.mute { background: #4A473C; }

        .horses .h-row { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid #1B1A17; border-left: 2px solid transparent; cursor: pointer; color: var(--white); text-decoration: none; }
        /* In active mode .filters is the first child, so :first-child never
           matches the first row and its hairline doubles up under the filter
           row's own border. Archived mode has no filters, hence both rules. */
        .horses .h-row:first-child, .horses .filters + .h-row { border-top: none; }
        .horses .h-row:hover, .horses .h-row:active { background: #181714; }
        .horses .h-row .pick { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -8px -8px -12px; cursor: pointer; }
        .horses .h-row .pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--bronze); cursor: pointer; }
        .horses .h-row.on { background: var(--gold-tint); border-left-color: var(--bronze); }
        .horses .h-row .av.s42 { width: 42px; height: 42px; font-size: 17px; border: 1px solid #2C2A24; }
        .horses .h-row .name { display: block; font-size: 15.5px; font-weight: 600; color: #F7F4EC; }
        .horses .h-row .breed { display: block; font-size: 12.5px; color: #8B8478; margin-top: 3px; }
        .horses .h-right { text-align: right; flex: none; }
        .horses .h-at { display: flex; align-items: center; gap: 7px; justify-content: flex-end; font-size: 12.5px; color: #D6D0C3; }
        .horses .h-stall { display: block; font-size: 12px; color: #7A7468; margin-top: 3px; }

        .horses .profile-head { padding: 22px 24px; border-bottom: 1px solid #201F1B; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
        .horses .av-lg { width: 76px; height: 76px; flex: none; border-radius: 18px; border: 1px solid #2C2A24; background: #1A1A17; object-fit: cover; display: flex; align-items: center; justify-content: center; font-family: 'Hanken Grotesk', sans-serif; font-size: 30px; color: #7A7468; }
        .horses .profile-head h2 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 500; font-size: 30px; line-height: 1.1; margin: 0 0 6px; color: #FAF7F0; }
        .horses .profile-head .line { font-size: 13px; line-height: 1.5; color: #8B8478; text-wrap: pretty; }
        .horses .now-strip { padding: 18px 24px; border-bottom: 1px solid #201F1B; background: #171714; }
        .horses .now-strip .t { font-size: 15px; font-weight: 600; color: var(--white); }
        .horses .now-strip .s { font-size: 12.5px; color: #7A7468; margin-top: 4px; }

        /* Section label. Sits directly on the card, so it carries the heavy
           rule that separates one section from the next; the rows under it
           carry only the soft one. */
        .horses .kicker { padding: 18px 24px 6px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #7A7468; border-top: 1px solid #201F1B; }
        .horses .profile-head + .kicker, .horses .now-strip + .kicker { border-top: none; }

        .horses .kv { display: flex; justify-content: space-between; gap: 18px; padding: 11px 24px; border-top: 1px solid #1B1A17; }
        .horses .kv span:first-child { font-size: 13.5px; color: #7A7468; }
        .horses .kv span:last-child { font-size: 13.5px; font-weight: 500; text-align: right; color: var(--white); }

        .horses .mv { display: flex; gap: 14px; align-items: baseline; padding: 10px 24px; }
        .horses .mv .mt { font-size: 12.5px; color: #7A7468; font-variant-numeric: tabular-nums; flex: none; width: 46px; }
        .horses .mv .mx { font-size: 13.5px; line-height: 1.55; color: #C7C0B2; }
        .horses .mv .dim { color: #7A7468; }

        .horses .pad { padding: 10px 24px 4px; }
        .horses .note { margin: 0; font-size: 13.5px; line-height: 1.65; color: #C7C0B2; }

        .horses .actions { padding: 18px 24px 4px; margin-top: 14px; border-top: 1px solid #201F1B; display: flex; flex-wrap: wrap; gap: 10px; }
        .horses .actions .right { margin-left: auto; }

        /* Inline edit form in the detail panel. HorseForm's widgets carry
           inline Design 2 sizes (11px, 8px padding) for the register page,
           hence !important to reach the 44px glove floor here. */
        .horses .ed-row { padding: 10px 24px; }
        .horses .ed-row label { display: block; font-size: 13px; color: #7A7468; margin-bottom: 6px; }
        .horses .ed-row input, .horses .ed-row select, .horses .ed-row textarea { box-sizing: border-box; width: 100% !important; min-height: 44px; padding: 10px 14px !important; font-size: 14px !important; font-family: inherit; border-radius: 12px; background: #191815 !important; border: 1px solid #2C2A24 !important; color: var(--white) !important; }
        .horses .ed-err { color: var(--alert); font-size: 12.5px; margin-top: 6px; }

        @media screen and (max-width: 768px) {
            .horses .profile-head, .horses .now-strip, .horses .kicker, .horses .kv,
            .horses .mv, .horses .pad, .horses .actions, .horses .ed-row { padding-left: 18px; padding-right: 18px; }
            .horses .h-row, .horses .filters { padding-left: 16px; padding-right: 16px; }
        }


        /* TEAM PAGE — V4's Roster and Team screens, which are one page here:
           the grid plans exactly the people the cards below describe, so
           splitting them into two tabs would only make a manager bounce
           between them. Scoped under .team for the same reason .today is
           scoped above. Card/pill radii follow V4 (18px cards, 999px pills),
           not Design 2's near-square 3-4px, and surfaces use V4's three
           stacked darks — #131312 cards on the #0B0B0A ground that
           body.v4-page sets, #191815 for insets.
           A planned roster now exists (ShiftAssignment.start_time/end_time),
           so the shift spans Design 2 had to fake are real data; the card
           foot shows hours worked this week (ShiftLog) against
           contract_hours_per_week, falling back to the live elapsed-shift
           timer for staff with no contract. .pill reuses the shared .pill
           class name but needs its own border/font reset since the shared
           one is a thin outlined chip, not a filled one — scoped so it
           can't leak. */
        .team { max-width: var(--shell); margin: 0 auto; }
        .team .head-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
        .team .btn { height: 42px; padding: 0 20px; border-radius: 999px; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border: 1px solid transparent; font-weight: 600; font-family: 'Hanken Grotesk', sans-serif; text-decoration: none; }
        .team .btn-primary { background: var(--bronze); color: #0B0B0A; font-weight: 700; }

        /* Week stepper and the whole-grid shift-time default. */
        .team .wk-nav { width: 44px; height: 44px; border-radius: 999px; background: #151513; border: 1px solid #26251F; color: #C7C0B2; display: inline-flex; align-items: center; justify-content: center; flex: none; }
        .team .wk-nav:hover, .team .wk-nav:active { border-color: #4A473C; }
        .team .wk-nav svg { width: 16px; height: 16px; }
        .team .shift-default { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #7A7468; }
        .team .shift-default input { color-scheme: dark; background: #191815; border: 1px solid #26251F; border-radius: 999px; padding: 7px 12px; color: var(--white); font-family: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; }
        /* Multi-day shift form — same pill as the shift default; color-scheme darkens the native dropdown and date popup. */
        .team .assign-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: #7A7468; }
        .team .assign-range select, .team .assign-range input { color-scheme: dark; height: 42px; background: #191815; border: 1px solid #26251F; border-radius: 999px; padding: 0 14px; color: var(--white); font-size: 13px; font-variant-numeric: tabular-nums; }
        .team .assign-range select:focus, .team .assign-range input:focus { outline: none; border-color: var(--bronze); }
        .team .assign-range option { background: #191815; color: var(--white); }
        /* ROSTER GRID — staff x day. The row is a 170px name column plus seven
           equal day columns; the card scrolls horizontally below ~920px
           rather than reflowing, since a week that wraps stops being a week. */
        .team .roster { background: #131312; border: var(--frame); border-radius: 18px; overflow: hidden; }
        .team .roster-scroll { overflow-x: auto; }
        .team .roster-grid { min-width: 920px; }
        .team .roster-row { display: grid; grid-template-columns: 170px repeat(7, 1fr); border-bottom: 1px solid #1B1A17; }
        .team .roster-row:last-child { border-bottom: none; }
        .team .roster-head { border-bottom-color: #201F1B; }
        .team .roster-person { padding: 13px 18px; display: flex; align-items: center; gap: 10px; min-width: 0; }
        .team .roster-person .nm { font-size: 13.5px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .team .roster-person .rl { font-size: 12px; color: #7A7468; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .team .roster-person.kicker { padding: 14px 18px; font-size: 12px; letter-spacing: .13em; color: #7A7468; font-weight: 700; }
        .team .roster-cell { border-left: 1px solid #1B1A17; padding: 7px; }
        .team .roster-day { padding: 14px 10px; text-align: center; }
        .team .roster-day .dow { font-size: 12px; letter-spacing: .1em; color: #7A7468; font-weight: 700; }
        .team .roster-day .dnum { font-size: 15px; font-weight: 600; margin-top: 3px; color: var(--white); font-variant-numeric: tabular-nums; }
        .team .roster-empty { padding: 30px 0; text-align: center; color: #7A7468; }

        .team .slot { display: block; width: 100%; border: 1px solid transparent; border-radius: 10px; padding: 9px 4px; font-family: inherit; font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: transparent; color: #3A3831; }
        .team .slot.covered { background: #1D2A1D; border-color: #31412F; color: #B7CDB7; }
        .team .slot.gap { background: #241F13; border-color: #5E5026; color: var(--bronze); }
        .team button.slot { cursor: pointer; }
        .team button.slot.off:hover, .team button.slot.off:active { border-color: #3A3831; color: #7A7468; }

        .team .roster-key { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: 12.5px; color: #7A7468; }
        .team .roster-key span { display: flex; align-items: center; gap: 7px; }
        .team .roster-key i { width: 9px; height: 9px; border-radius: 3px; }
        .team .roster-key .k-covered { background: #1D2A1D; border: 1px solid #3A4A3A; }
        .team .roster-key .k-gap { background: #241F13; border: 1px solid #5E5026; }
        .team .roster-key .k-off { background: #151513; border: 1px solid #26251F; }

        .team .cards-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
        .team .person { background: #131312; border: var(--frame); border-radius: 18px; padding: 20px 22px; margin: 0; cursor: pointer; transition: border-color 0.15s; }
        .team .person.open { border-color: var(--bronze); }
        .team .person-top { display: flex; align-items: center; gap: 14px; }
        .team .person-top .nm { font-size: 16px; color: var(--white); }
        .team .person-top .rl { font-size: 13px; color: var(--gray); margin-top: 3px; }

        .team .pill { flex: none; font-size: 12px; padding: 5px 11px; border: none; border-radius: 999px; background: var(--gold-tint); color: var(--bronze); font-family: 'Hanken Grotesk', sans-serif; cursor: pointer; }
        .team .pill.sage { background: rgba(143, 181, 143, .15); color: var(--available); }
        .team .pill.amber { background: rgba(217, 169, 92, .15); color: var(--inuse); }
        .team .pill.alert { background: rgba(208, 138, 114, .15); color: var(--alert); }
        .team .pill.mute { background: var(--surface-2); color: var(--gray); }

        .team .person-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
        /* The contract bar already separates the foot from the card head, so
           the divider rule would be a second one 9px below it. */
        .team .person-foot.tight { margin-top: 0; padding-top: 0; border-top: none; }
        .team .person-foot span:first-child { color: #A8A296; font-variant-numeric: tabular-nums; }
        .team .person-foot span:last-child { color: #7A7468; }

        .team .detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--gray); }
        .team .detail .alert-line { color: var(--alert); }
        .team .detail .actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
        .team .detail .btn.ghost { background: transparent; color: var(--white); border-color: var(--line); height: auto; padding: 8px 14px; font-size: 12.5px; }
        .team .detail .btn.danger { color: var(--alert); border-color: var(--alert); }

        @media screen and (max-width: 768px) {
            .team .person { padding: 18px; }
            .team .head-actions { margin-left: 0; }
        }

        /* COMMAND CENTER — Design 2 has no manager screen, so rather than
           invent a sixth component set this page reuses the Today port
           wholesale: its wrapper carries both `today` and `mgr`, so the head,
           cards, rows, states and buttons all come from the .today rules
           above. Only the dispatch form is genuinely new — that's Design 2's
           .field (its css/app.css:209-212), with --ys-field collapsed onto
           --black the way the earlier ports collapsed ink-2/3/4 onto --gray —
           plus the .horses filter chips, re-scoped here. */
        .mgr .col { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

        .mgr .form-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
        .mgr .field { display: block; }
        .mgr .field > span { display: block; font-size: 13.5px; color: var(--gray); margin-bottom: 8px; }
        .mgr .field input, .mgr .field select { width: 100%; height: 46px; padding: 0 14px; background: var(--inset); border: 1px solid var(--line); border-radius: 3px; font-size: 15px; color: var(--white); font-family: 'Hanken Grotesk', sans-serif; }
        .mgr .field input:focus, .mgr .field select:focus { outline: none; border-color: var(--bronze); }
        .mgr .field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px; }

        /* The sibling dispatch forms are hand-written, so nothing here styled
           validation output until the New task screen — it's the one .mgr form
           driven by a ModelForm. Django renders <ul class="errorlist">. */
        .mgr .field-errors { margin-top: 8px; font-size: 13px; color: var(--alert); }
        .mgr .field-errors ul { list-style: none; margin: 0; padding: 0; }

        /* The horse picker stays a checkbox list inside a <details>: two or
           more ticked horses fan the dispatch out into a TaskGroup, one task
           per horse (views.py), which a plain <select> would quietly kill. */
        .mgr .picker { background: var(--inset); border: 1px solid var(--line); border-radius: 3px; }
        .mgr .picker[open] { border-color: var(--bronze); }
        .mgr .picker > summary { height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font-size: 15px; color: var(--gray); }
        .mgr .picker-list { max-height: 152px; overflow-y: auto; border-top: 1px solid var(--line-soft); }
        .mgr .picker-list label { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 14px; color: var(--white); cursor: pointer; }
        .mgr .picker-list label:hover, .mgr .picker-list label:active { background: var(--surface-2); }
        .mgr .picker-list input[type=checkbox] { width: auto; height: auto; accent-color: var(--bronze); }

        /* Batch task screen: the same list, but standing on its own inside a
           card rather than folded into a <details>, so it loses the summary's
           border and gets the height the checklist deserves — it's the whole
           point of that page, not a secondary field. */
        .mgr .picker-list.tall { max-height: 360px; border-top: 0; }
        .mgr .picker-list.tall em { display: block; font-style: normal; font-size: 12px; color: var(--gray); margin-top: 2px; }
        .mgr .card-bar .kicker { text-transform: none; letter-spacing: normal; font-size: 13px; }
        .mgr .card-bar .all { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--gray); cursor: pointer; }
        .mgr .card-bar .all input[type=checkbox] { accent-color: var(--bronze); }

        .mgr .filters { padding: 12px 20px; border-bottom: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .mgr .filters form { margin: 0; }
        .mgr .filters a, .mgr .filters button { font-size: 12.5px; padding: 6px 12px; border: none; border-radius: 999px; background: transparent; color: var(--gray); text-decoration: none; cursor: pointer; font-family: 'Hanken Grotesk', sans-serif; }
        .mgr .filters a.on { background: var(--gold-tint); color: var(--bronze); }
        .mgr .filters a:hover, .mgr .filters button:hover, .mgr .filters a:active, .mgr .filters button:active { color: var(--white); }
        .mgr .filters .right { margin-left: auto; }
        .mgr .filters .danger { color: var(--alert); }

        /* Overdue marker: a clay left edge beside the clay state label, the
           same mechanism .today .row.on uses for the selected row. Replaces
           the old animated red frame (.card-pulse-red), which belongs to the
           pre-redesign look. */
        .mgr .row.late { border-left-color: var(--alert); }

        .mgr .scroll {
            max-height: 400px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--bronze) transparent;
        }
        .mgr .scroll::-webkit-scrollbar { width: 4px; }
        .mgr .scroll::-webkit-scrollbar-thumb { background: var(--bronze); }
        .mgr .scroll::-webkit-scrollbar-track { background: transparent; }
        /* Activity keeps the height its column gives it (level with Occupancy);
           contain: size stops a long feed from growing the card, so extra
           events scroll instead. min-height is the floor on a phone. */
        .mgr .v4-feed { display: flex; flex-direction: column; }
        .mgr .v4-feed .scroll { flex: 1; max-height: none; min-height: 400px; contain: size; }
        .mgr a.h-row { text-decoration: none; color: inherit; border-left: 2px solid transparent; }
        .mgr a.h-row:hover, .mgr a.h-row:active { background: var(--surface-2); }
        .mgr a.h-row.on { background: var(--gold-tint); border-left-color: var(--bronze); }
        .mgr .h-row .ft { font-family: 'Hanken Grotesk', sans-serif; font-size: 14px; color: var(--gray); font-variant-numeric: tabular-nums; flex: none; width: 42px; }
        .mgr .h-row .right { margin-left: auto; flex: none; text-align: right; }
        .mgr .pad-20 { padding: 14px 20px; }

        @media screen and (max-width: 768px) {
            .mgr .col { gap: 18px; }
            .mgr .form-body, .mgr .filters, .mgr .h-row, .mgr .pad-20 { padding-left: 16px; padding-right: 16px; }
            /* minmax(148px) would still fit two columns inside a ~326px card,
               leaving each field too narrow to hit with gloves on. */
            .mgr .field-pair { grid-template-columns: 1fr; }
        }

        /* V4 OVERVIEW — Command center's greeting/clock/metrics/panels
           block (docs/version 4/README.md, Manager role's Overview screen).
           Scoped under .mgr, same as the rest of that block above, so it
           can't leak onto worker_dashboard, which shares .today's Design 2
           rules but never carries .mgr. Raw hex, not --var tokens, for the
           same reason the header restyle used it (see app.css:29 comment):
           this is only ever referenced from desktop_dashboard_manager.html. */
        .mgr .v4-eyebrow { font-size: 12px; letter-spacing: .14em; color: #7A7468; font-weight: 700; text-transform: uppercase; }
        .mgr .v4-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
        .mgr .v4-pill.sage { background: rgba(143, 181, 143, .15); color: var(--available); }
        .mgr .v4-pill.mute { background: #232220; color: #7A7468; }
        /* Also used by the Team page's hours-against-contract bar — same
           component, so the selector widens rather than the rule being
           copied under .team. */
        .mgr .v4-bar, .team .v4-bar { height: 4px; border-radius: 999px; background: #242320; overflow: hidden; margin-bottom: 9px; }
        .mgr .v4-bar-fill, .team .v4-bar-fill { height: 100%; border-radius: 999px; }
        .mgr .v4-link { background: transparent; border: 0; color: #D3A548; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: none; }

        .mgr .v4-clockrow { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(300px, 2.1fr); gap: 16px; margin-bottom: 22px; align-items: stretch; }
        .mgr .v4-clock { background: #131312; border: var(--frame); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; }
        .mgr .v4-clock.on { background: linear-gradient(180deg, #171610 0%, #131312 62%); }
        .mgr .v4-clock-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
        .mgr .v4-clock-face { font-family: 'Hanken Grotesk', sans-serif; font-size: 46px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-bottom: 6px; color: #F5F1E8; }
        .mgr .v4-clock-sub { font-size: 12.5px; color: #7A7468; margin-bottom: 18px; }
        .mgr .v4-clock-btn { background: var(--bronze); color: #0B0B0A; border: 0; border-radius: 999px; padding: 11px 20px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; align-self: flex-start; }
        .mgr .v4-clock-btn.off { background: transparent; color: #F5F1E8; border: 1px solid #3E3A2C; }
        .mgr .v4-clock-stats { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #201F1B; }
        .mgr .v4-clock-stats > div { display: flex; flex-direction: column; gap: 5px; }
        .mgr .v4-clock-stat { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: #F5F1E8; }

        .mgr .v4-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
        .mgr .v4-metric { background: #131312; border: var(--frame); border-radius: 16px; padding: 18px 20px; }
        .mgr .v4-metric .v4-eyebrow { margin-bottom: 12px; display: block; }
        .mgr .v4-metric-value { font-family: 'Hanken Grotesk', sans-serif; font-size: 30px; line-height: 1; font-weight: 500; margin-bottom: 9px; color: #F5F1E8; }
        .mgr .v4-metric-sub { font-size: 12.5px; color: #A8A296; }

        .mgr .v4-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-bottom: 26px; }
        .mgr .v4-panel { background: #131312; border: var(--frame); border-radius: 18px; }
        .mgr .v4-panel .card-bar { padding: 17px 22px; border-bottom: 1px solid #201F1B; }
        .mgr .v4-panel .kicker { font-size: 12px; letter-spacing: .14em; color: #7A7468; font-weight: 700; }
        .mgr .v4-panel .count { color: #A8A296; }
        .mgr .v4-panel .empty { color: #7A7468; }
        /* Last card in each column takes the slack, so Occupancy's bottom lines up with Activity's. */
        .mgr .v4-stack { display: grid; gap: 18px; grid-template-rows: auto 1fr; }

        .mgr .v4-needs-row { display: flex; gap: 14px; padding: 16px 22px; border-bottom: 1px solid #1B1A17; align-items: flex-start; text-decoration: none; }
        .mgr .v4-needs-row:last-child { border-bottom: none; }
        .mgr .v4-needs-row:hover, .mgr .v4-needs-row:active { background: #171613; }
        .mgr .v4-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; margin-top: 7px; }
        .mgr .v4-needs-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
        .mgr .v4-needs-title { font-size: 15px; font-weight: 600; color: #F5F1E8; }
        .mgr .v4-needs-meta { font-size: 12.5px; color: #7A7468; line-height: 1.45; }
        .mgr .v4-needs-cta { flex: none; align-self: center; background: transparent; color: #D3A548; border: 1px solid #3B3223; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

        .mgr .v4-onnow-row { padding: 15px 22px; border-bottom: 1px solid #1B1A17; }
        .mgr .v4-onnow-row:last-child { border-bottom: none; }
        .mgr .v4-onnow-top { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
        .mgr .v4-onnow-top .av { width: 34px; height: 34px; }
        .mgr .v4-onnow-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .mgr .v4-onnow-name .h-name { font-size: 14.5px; font-weight: 600; color: #F5F1E8; }
        .mgr .v4-onnow-name .h-meta { font-size: 12px; color: #7A7468; margin-top: 0; }
        .mgr .v4-onnow-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #7A7468; margin-top: 8px; }

        @media screen and (max-width: 768px) {
            .mgr .v4-clockrow { grid-template-columns: 1fr; }
            .mgr .v4-clock-face { font-size: 36px; }
        }

        /* V4's three-stacked-darks rule (docs/version 4/README.md) needs the
           page ground darker than every card sitting on it. The sitewide
           --black token is still Design 2's #191714 -- lighter than this
           page's own #131312 cards, which is why they read as flat/washed
           out instead of lifted. A full --page/--surface/--inset migration
           is bigger than this page (see CLAUDE.md's design-system section);
           this scopes just the ground colour to the Overview page.
           ponytail: page-only patch, fold into a sitewide token swap
           when the rest of the app moves off Design 2. */
        body.v4-page { background: #0B0B0A !important; }

        /* .mgr also renders the dispatch form / task wall / activity feed
           below the V4 panels, styled through the shared .today .card /
           .field rules above -- those still use Design 2's --surface
           (#221F1B) and --black (#191714), which read lighter than the V4
           panels sitting right above them on the same now-darker page.
           Pulls just this page's cards and inputs onto the same three V4
           tones so the whole page reads as one system. */
        .mgr .card { background: #131312; }
        .mgr .field input, .mgr .field select, .mgr .picker { background: #191815; }

        /* HORIZONTAL SCROLL MENUS (CHIPS) */
        .scroll-menu {
            display: flex;
            overflow-x: auto;
            gap: 8px;
            padding-bottom: 4px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .scroll-menu::-webkit-scrollbar {
            display: none;
        }
        .scroll-chip {
            flex: none;
            padding: 8px 16px;
            border: 1px solid var(--line);
            background: var(--inset);
            color: var(--gray);
            font-size: 12px;
            letter-spacing: 0.05em;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .scroll-chip.active {
            background: rgba(200, 155, 60, 0.15);
            border-color: var(--bronze);
            color: var(--bronze);
            font-weight: 700;
        }

        /* SHARED COMPONENTS */
        .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
        .kpi { background: var(--surface); border: var(--frame); border-radius: 18px; padding: 16px 18px; }
        .kpi .metric-big { font-size: 28px; color: var(--white); line-height: 1; }
        .kpi .metric-cap { font-size: 12px; color: var(--gray); letter-spacing: .06em; margin-top: 6px; }

        .card { background: var(--surface); border: var(--frame); border-radius: 18px; padding: 16px 18px; }
        /* Settings' card-glow switch: the aura replaces the bronze frame, never both. */
        .glow { --frame: 1px solid var(--line); }
        .glow .card, .glow .kpi, .glow .cal-card, .glow .yard .area, .glow .yard .plan, .glow .yard .timer-dialog,
        .glow .team .roster, .glow .team .person, .glow .mgr .v4-clock, .glow .mgr .v4-metric, .glow .mgr .v4-panel { box-shadow: 0 0 22px 4px rgba(200, 155, 60, .65); }
        .card-title { font-size: 12px; letter-spacing: .08em; color: var(--gray); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }

        .row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
        .row:last-child { border-bottom: none; }
        .box { width: 16px; height: 16px; border: 1.4px solid var(--gray); border-radius: 50%; cursor: pointer; flex: none; transition: all 0.2s; position: relative; }
        .box:hover, .box:active { border-color: var(--bronze); background: rgba(200, 155, 60, 0.2); }
        .box.done { border-color: var(--available); background: var(--available); cursor: default; }
        .box.done::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--page); border-width: 0 2px 2px 0; transform: rotate(45deg); }
        .box.done:hover, .box.done:active { border-color: var(--available); background: var(--available); }
        .r-name { font-size: 12.5px; color: var(--white); flex: 1; }
        .r-meta { font-size: 12px; color: var(--gray); }

        .pill { font-size: 12px; letter-spacing: .05em; padding: 3px 8px; border: 1px solid; border-radius: 999px; white-space: nowrap; }
        .pill.bronze { color: var(--bronze); border-color: var(--bronze); }
        .pill.alert { color: var(--alert); border-color: var(--alert); }
        .pill.available { color: var(--available); border-color: var(--available); }

        .btn { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 9px 16px; border: 1px solid var(--bronze); border-radius: 3px; color: var(--page); background: var(--bronze); cursor: pointer; text-decoration: none; display: inline-block; font-weight: bold; text-align: center; }
        .btn.ghost { background: transparent; color: var(--white); border-color: var(--line); }
        /* Templates use .heading on buttons to mark the primary action, not to
           pick a font — which left a serif button sitting next to a sans one
           in the same row. Keep the marker, drop the font it drags along. */
        .btn.heading { font-family: inherit; }
        .btn.alertbtn { background: var(--alert); border-color: var(--alert); color: var(--white); }

        /* MESSAGES (V4) — chat list beside the open conversation. The list sits
           left; to put it on the right, swap the two columns and give
           .msg-rail `order: 2`. */
        .msg-layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 18px; align-items: start; }
        .msg-rail { padding: 0; overflow: hidden; }
        .msg-rail-head { padding: 16px 18px 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
        .msg-rail-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 18px; border: 0; border-top: 1px solid var(--line-soft); border-left: 3px solid transparent; background: transparent; text-align: left; text-decoration: none; color: inherit; cursor: pointer; font-family: inherit; }
        .msg-rail-item:hover, .msg-rail-item:active { background: var(--surface-2); }
        .msg-rail-item.active { background: var(--inset); border-left-color: var(--bronze); }
        .msg-av { width: 44px; height: 44px; font-size: 17px; }
        .msg-rail-body { flex: 1; min-width: 0; }
        .msg-rail-line { display: flex; align-items: center; gap: 8px; }
        .msg-rail-line + .msg-rail-line { margin-top: 3px; }
        .msg-rail-name { display: block; font-size: 14px; font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .msg-rail-time { margin-left: auto; flex: none; font-size: 12px; color: var(--gray); font-variant-numeric: tabular-nums; }
        .msg-rail-preview { display: block; flex: 1; min-width: 0; font-size: 12.5px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .msg-unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bronze); color: var(--page); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
        .msg-rail-empty { padding: 30px 18px; text-align: center; color: var(--gray); font-size: 13px; }
        .msg-pane { padding: 0; overflow: hidden; }
        .msg-pane-empty { display: flex; align-items: center; justify-content: center; min-height: 58vh; color: var(--gray); font-size: 14px; }
        .msg-pane-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
        .msg-back { display: none; font-size: 22px; color: var(--white); text-decoration: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: -10px; }
        .msg-thread { display: flex; flex-direction: column; gap: 12px; height: 58vh; overflow-y: auto; padding: 18px 20px; }
        .msg-bubble { position: relative; align-self: flex-start; max-width: 76%; padding: 10px 38px 10px 14px; font-size: 14px; line-height: 1.5; background: var(--inset); border: 1px solid #26251F; color: #C7C0B2; border-radius: 16px 16px 16px 4px; overflow-wrap: anywhere; }
        .msg-bubble.mine { align-self: flex-end; background: var(--gold-tint); border-color: #453A22; color: #F1E6CE; border-radius: 16px 16px 4px 16px; }
        .msg-meta { font-size: 12px; color: var(--gray); margin-bottom: 3px; }
        .msg-composer { display: flex; gap: 10px; align-items: center; padding: 14px 20px 16px; border-top: 1px solid var(--line); }

        @media screen and (max-width: 768px) {
            .msg-layout { grid-template-columns: 1fr; }
            /* One pane at a time on a phone: the inbox is just the chat list, the
               thread page drops the list and offers a back arrow instead. */
            .msg-layout:not(.with-thread) .msg-pane { display: none; }
            .msg-layout.with-thread .msg-rail { display: none; }
            .msg-back { display: inline-flex; }
            /* The back arrow already leads to the inbox, where new messages start. */
            .msg-new { display: none; }
            .msg-thread { height: 62vh; padding: 14px; }
            .msg-pane-head, .msg-composer { padding-left: 14px; padding-right: 14px; }
            .msg-bubble { max-width: 86%; }
        }

        /* DEVICE DISPLAY TOGGLES */
        .mobile-only { display: none !important; }
        .desktop-only { display: block; }


        /* MOBILE RESPONSIVE OVERRIDES (< 768px) */
        @media screen and (max-width: 768px) {
            body { background: var(--page) !important; }
            .desktop-only { display: none !important; }
            .mobile-only { display: flex !important; }
            .app { min-height: 100vh !important; flex-direction: column !important; }
            .topbar-d {
                height: auto !important;
                flex-direction: column !important;
                align-items: stretch !important;
                justify-content: flex-start !important;
                gap: 12px;
                padding: 16px !important;
            }
            .topbar-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }
            .topbar-actions .btn { flex: 1 1 auto; }
            .maincontent { padding: 16px 16px 86px !important; }
            .kpi-row, .card-grid, div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 12px !important; }

            /* MOBILE TOP BAR — reuses the desktop .top bar (brand/search/
               notifications/profile) instead of separate mobile markup.
               .top-in's existing flex-wrap already reflows brand-mark,
               search and .me-wrap onto their own lines as width shrinks;
               these overrides just trim what doesn't fit a phone (full
               brand text) and lift touch targets to the 44px floor
               (CLAUDE.md), including the 16px input floor iOS needs to
               not zoom the page on focus. Search and the notification
               bell stay manager-gated in the template, same as desktop. */
            .brand-mark span, .brand-divider, .brand-eyebrow { display: none; }
            /* Logo, search, bell and profile share one row (2026-09-23
               request): no wrap, search shrinks to fill what's left, name
               text drops a size and truncates rather than pushing a wrap. */
            .top-in { padding: 10px 16px; flex-wrap: nowrap; gap: 8px; }
            /* The bell sits left of the profile, so a 280px panel anchored
               to it overflowed the left edge. Anchor it to the bar instead
               and span the width between the bar's side padding. */
            .top-in { position: relative; }
            .notif { position: static; }
            .notif-panel { left: 16px; right: 16px; width: auto; max-width: none; }
            .top-spacer { min-width: 0; }
            .me-wrap, .me { gap: 6px; }
            .top .iconbtn { width: 44px; height: 44px; flex: none; }
            .search { height: 44px; min-width: 0; padding: 0 12px; }
            .search input { font-size: 16px; }
            .me .mono { min-width: 0; max-width: 72px; }
            .me .mono span { font-size: 13px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .me .mono span + span { font-size: 12px !important; }
            .me .btn { min-height: 44px; display: inline-flex; align-items: center; }

            /* SCROLLABLE BOTTOM NAVBAR — fixed to the bottom (thumb-reachable,
               2026-09-23 request). Height here, .mobile-navbar-fade's height,
               and .maincontent's 86px bottom padding above are all tied to
               the same 70px bar height, kept in sync by hand across three
               places — if the bar's height ever changes, update all three. */
            .mobile-navbar {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 70px;
                background: var(--page);
                border-top: 1px solid var(--line);
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 0 16px;
                z-index: 9999;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                scrollbar-color: var(--bronze) transparent;
            }
            .mobile-navbar::-webkit-scrollbar {
                height: 4px;
            }
            .mobile-navbar::-webkit-scrollbar-thumb {
                background: var(--bronze);
            }
            .mobile-navbar::-webkit-scrollbar-track {
                background: transparent;
            }
            /* Persistent hint that the navbar scrolls — the strip holds more
               items than fit on one screen, and iOS hides the scrollbar
               itself except during an active touch. */
            .mobile-navbar-fade {
                position: fixed;
                bottom: 0;
                right: 0;
                width: 28px;
                height: 70px;
                background: linear-gradient(to right, rgba(25,23,20,0) 0%, rgba(25,23,20,0.95) 75%);
                pointer-events: none;
                z-index: 10000;
            }
            .mobile-navbar-fade.mobile-only {
                display: block !important;
            }
            /* Touch target minimum (CLAUDE.md: 44px) — .sb-item's shared
               padding (9px 18px, ~33px tall with the icon) falls short,
               so the mobile strip gets its own floor. */
            .mobile-navbar .sb-item {
                padding: 15px 16px;
            }
        }

        /* STATUS PULSE ANIMATIONS (LIVE FEED & DASHBOARDS) */
        /* ==========================================
           DUAL-RING ECHO PULSE ANIMATIONS
           ========================================== */
        .pulse {
            background: rgb(var(--pulse-color));
            border-radius: 50%;
            height: 10px;
            width: 10px;
            display: inline-block;
            transform: scale(1);
            animation: pulse-echo-dot 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }

        @keyframes pulse-echo-dot {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.9), 0 0 0 0 rgba(var(--pulse-color), 0.4);
            }
            50% {
                transform: scale(1);
                box-shadow: 0 0 0 8px rgba(var(--pulse-color), 0), 0 0 0 16px rgba(var(--pulse-color), 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0), 0 0 0 0 rgba(var(--pulse-color), 0);
            }
        }

        .pulse.red {
            --pulse-color: 255, 20, 20;
            animation: pulse-stoplight 1.1s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }

        @keyframes pulse-stoplight {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 20, 20, 1), 0 0 0 0 rgba(255, 20, 20, 0.6);
            }
            50% {
                transform: scale(1.1);
                box-shadow: 0 0 0 10px rgba(255, 20, 20, 0), 0 0 0 20px rgba(255, 20, 20, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 20, 20, 0), 0 0 0 0 rgba(255, 20, 20, 0);
            }
        }

        /* Flashy Stoplight Red Frame / Card Border Pulsing */
        .card-pulse-red {
            border: 1px solid #ff1414 !important;
            animation: frame-stoplight-red 1.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
        @keyframes frame-stoplight-red {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 20, 20, 0.95), 0 0 0 0 rgba(255, 20, 20, 0.4);
            }
            50% {
                box-shadow: 0 0 0 10px rgba(255, 20, 20, 0), 0 0 0 22px rgba(255, 20, 20, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 20, 20, 0), 0 0 0 0 rgba(255, 20, 20, 0);
            }
        }
        .pulse.blue { --pulse-color: 64, 169, 255; }
        .pulse.green { --pulse-color: 92, 138, 107; }
        .pulse.yellow { --pulse-color: 200, 155, 60; }
        .pulse.purple { --pulse-color: 168, 85, 247; }

        /* Dual-Ring Echo Frame / Card Border Pulsing */
        .pulse.red {
            --pulse-color: 255, 20, 20;
            animation: pulse-stoplight 1.1s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }

        @keyframes pulse-stoplight {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 20, 20, 1), 0 0 0 0 rgba(255, 20, 20, 0.6);
            }
            50% {
                transform: scale(1.1);
                box-shadow: 0 0 0 10px rgba(255, 20, 20, 0), 0 0 0 20px rgba(255, 20, 20, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 20, 20, 0), 0 0 0 0 rgba(255, 20, 20, 0);
            }
        }

        /* Flashy Stoplight Red Frame / Card Border Pulsing */
        .card-pulse-red {
            border: 1px solid #ff1414 !important;
            animation: frame-stoplight-red 1.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
        @keyframes frame-stoplight-red {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 20, 20, 0.95), 0 0 0 0 rgba(255, 20, 20, 0.4);
            }
            50% {
                box-shadow: 0 0 0 10px rgba(255, 20, 20, 0), 0 0 0 22px rgba(255, 20, 20, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 20, 20, 0), 0 0 0 0 rgba(255, 20, 20, 0);
            }
        }

        .card-pulse-yellow {
            border: 1px solid var(--bronze) !important;
            animation: frame-echo-yellow 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
        @keyframes frame-echo-yellow {
            0% { box-shadow: 0 0 0 0 rgba(200, 155, 60, 0.7), 0 0 0 0 rgba(200, 155, 60, 0.25); }
            60% { box-shadow: 0 0 0 8px rgba(200, 155, 60, 0), 0 0 0 18px rgba(200, 155, 60, 0); }
            100% { box-shadow: 0 0 0 0 rgba(200, 155, 60, 0), 0 0 0 0 rgba(200, 155, 60, 0); }
        }

        .card-pulse-blue {
            border: 1px solid #40a9ff !important;
            animation: frame-echo-blue 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
        @keyframes frame-echo-blue {
            0% { box-shadow: 0 0 0 0 rgba(64, 169, 255, 0.7), 0 0 0 0 rgba(64, 169, 255, 0.25); }
            60% { box-shadow: 0 0 0 8px rgba(64, 169, 255, 0), 0 0 0 18px rgba(64, 169, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(64, 169, 255, 0), 0 0 0 0 rgba(64, 169, 255, 0); }
        }

        .card-pulse-green {
            border: 1px solid var(--available) !important;
            animation: frame-echo-green 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
        @keyframes frame-echo-green {
            0% { box-shadow: 0 0 0 0 rgba(92, 138, 107, 0.7), 0 0 0 0 rgba(92, 138, 107, 0.25); }
            60% { box-shadow: 0 0 0 8px rgba(92, 138, 107, 0), 0 0 0 18px rgba(92, 138, 107, 0); }
            100% { box-shadow: 0 0 0 0 rgba(92, 138, 107, 0), 0 0 0 0 rgba(92, 138, 107, 0); }
        }

        .pulse.orange { --pulse-color: 249, 115, 22; }

        .card-pulse-orange {
            border: 1px solid #f97316 !important;
            animation: frame-echo-orange 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
        @keyframes frame-echo-orange {
            0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7), 0 0 0 0 rgba(249, 115, 22, 0.25); }
            60% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0), 0 0 0 18px rgba(249, 115, 22, 0); }
            100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0), 0 0 0 0 rgba(249, 115, 22, 0); }
        }

        /* Not-actually-here marker: a home-stall card shown for a horse
           that's physically elsewhere. Deliberately static (no pulse) and
           dashed so it can never be mistaken for a real, present occupant. */
        .card-away {
            border: 1px dashed var(--gray) !important;
            opacity: 0.7;
        }

        /* Entity colour: a small dot before a horse or staff name, coloured
           by the model's `colour` property. Never used for text. */
        .ec { display: inline-block; width: 8px; height: 8px; border-radius: 999px; flex: none; margin-right: 7px; vertical-align: middle; position: relative; top: -1px; }
        .today .chip .ec, .yard .spot .ec { margin-right: 0; top: 0; } /* flex gap already spaces it */

        /* ONE BUTTON SIZE (2026-09-24): every .btn is a 44px pill — the glove
           touch floor — whatever screen rule or inline style set before.
           !important because ~60 buttons carry inline size overrides. */
        .btn, .mini-btn, .btn-dashed {
            min-height: 44px !important; height: auto !important;
            padding: 12px 20px !important; line-height: 18px !important;
            font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important;
            border-radius: 999px !important;
        }
        /* Same size for the pill controls outside the .btn family: the
           overview clock button and the calendar/staff pager chevrons. */
        .mgr .v4-clock-btn { min-height: 44px; font-weight: 500; }
        .week .pager .iconbtn { width: 44px; height: 44px; }
        .iconbtn { border-radius: 999px !important; }
        /* Pressed: plain buttons have no hover colour to borrow, so they dim
           while held instead. A brightness dip, not a scale or shift, so
           nothing jumps; the short ease is dropped under reduced motion. */
        .btn, .mini-btn, .btn-dashed { transition: filter .08s ease-out; }
        .btn:active:not(:disabled), .mini-btn:active:not(:disabled), .btn-dashed:active:not(:disabled) { filter: brightness(.78); }
        @media (prefers-reduced-motion: reduce) { .btn, .mini-btn, .btn-dashed { transition: none; } }

        /* ONE CHECKBOX (2026-09-24): the V4 step tick — a 22px ring that fills
           bronze with a --page tick when checked — replacing the browser's
           own box everywhere. Ring is #6E685D, not the prototype's #3A3831,
           to clear 3:1 against --surface. !important beats inline widths. */
        input[type=checkbox] {
            appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
            width: 22px !important; height: 22px !important; border-radius: 999px;
            border: 1.5px solid #6E685D; background: transparent center / 14px no-repeat;
            vertical-align: middle;
        }
        input[type=checkbox]:checked {
            border-color: var(--bronze); background-color: var(--bronze);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
        }
        input[type=checkbox]:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }