html{-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* iOS Safari inflates text per block unless this is pinned: mission rows rendered at different sizes (2026-10-08) */
*{box-sizing:border-box;margin:0;padding:0}
:root{--ra-z-sticky:8;--ra-z-sticky-raised:20;--ra-z-popover:100;--ra-z-nav:150;--ra-z-settings-scrim:199;--ra-z-panel:200;--ra-z-dock-menu:400;--ra-z-dock-hint:450;--ra-z-dock-drag:500;--ra-z-toast:calc(var(--ra-z-overlay) + 2);--ra-z-sheet:calc(var(--ra-z-overlay) + 1)} /* dashboard layer scale: in-flow < nav < panels/dock < modal (kit --ra-z-overlay) < sheets/consoles < toasts. Kit owns fab/overlay/max. */
:root{--fsc:1;--font-set:var(--ra-font-mono,'SF Mono',monospace);--font-body:var(--ra-font-body,'SF Mono',monospace)}
/* No page-level element should ever be able to drag the whole document
   sideways — content that's genuinely wider than the viewport (a grid with
   minmax() columns, a table, a strip of chips) should scroll INSIDE its own
   box, never expand html/body's scrollWidth. Without this, a single such
   element anywhere on any tab lets the entire page pan right into blank
   background, with the sticky topbar and fixed bottom nav going along for
   the ride since they're normal-flow horizontally (real bug, caught from a
   live-device screenshot 2026-08-18 on the Habits tab's day-column grid,
   width and had no scroll container of their own). */
html{overflow-x:hidden}
body{font-family:var(--font-body);background:var(--ra-backdrop,var(--ra-bg));color:var(--ra-text,var(--ra-text));font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));min-height:100vh;overflow-x:clip}
/* body must NOT be overflow:hidden (html above already clips the viewport): a non-visible overflow on body makes it the sticky
   containing scroll-container, which never scrolls, so #topbar (position:sticky) silently stopped freezing on scroll (user report 2026-10-05).
   `clip` clips the same way without creating a scroll container. */

/* ── topbar ── */
#topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:calc(8px * var(--ra-density,1)) calc(14px * var(--ra-density,1));background:var(--ra-surface-1,var(--ra-surface-1));border-bottom:1px solid var(--ra-border,var(--ra-border));position:sticky;top:0;z-index:10;gap:calc(6px * var(--ra-density,1))}
#topbar::before{content:"";position:absolute;top:0;bottom:0;width:55%;background:linear-gradient(115deg,transparent 15%,color-mix(in srgb,var(--ra-text-bright) 15%,transparent) 50%,transparent 85%);animation:sheen 6s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%{left:-20%}50%{left:65%}100%{left:-20%}}
.tb-left{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));flex-shrink:0}
.tb-title{color:var(--ra-accent,var(--ra-accent));font-weight:700;font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em}
.tb-age{color:var(--ra-text-faint);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}
.tb-right{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ra-ok-strong);flex-shrink:0;animation:blink 2s infinite}
.pulse.stale{background:var(--ra-warn-strong)}.pulse.dead{background:var(--ra-danger-strong)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── badges ── */
.badge{display:inline-block;padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-sm);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;letter-spacing:.04em;white-space:nowrap}
.b-green{background:var(--ra-ok-bg);color:var(--ra-ok);border:1px solid var(--ra-ok-border)}
.b-blue{background:var(--ra-accent-bg);color:var(--ra-accent);border:1px solid var(--ra-accent-border)}
.b-amber{background:var(--ra-warn-bg);color:var(--ra-warn);border:1px solid var(--ra-warn-border)}
.b-red{background:var(--ra-danger-bg);color:var(--ra-danger);border:1px solid var(--ra-danger-border)}
.b-gray{background:var(--ra-surface-2);color:var(--ra-text-dim);border:1px solid var(--ra-text-muted)}
.b-purple{background:var(--ra-purple-bg);color:var(--ra-purple);border:1px solid var(--ra-purple-border)}

/* Small inline action pills (Relationships: Apply/Dismiss/Snooze/Mark
   contacted/Alias→) are one-off hand-styled buttons scattered across a few
   tabs — semantic color varies per call-site but none had hover feedback
   at all (click felt dead). Shared utility so a new call-site gets
   consistent feedback instead of re-deriving it. */
.mini-btn{transition:filter var(--ra-motion) var(--ra-ease),transform var(--ra-motion) var(--ra-ease)}
.mini-btn:hover{filter:brightness(1.25);transform:translateY(-1px)}
.mini-btn:active{transform:translateY(0)}

/* Skills tab — Focus subtab (dashboard-ui-polish-plan.md Group A #4). Each
   entry was a bare bottom-border row (same gap as pre-pass Todos/Resources/
   Habits) — now a real card, laid out in a wrapping grid instead of one
   full-width column. Scoped to skills only since 2026-07-14 — personal-
   projects/work-projects moved to the dedicated Projects tab, which already
   covers every status (not just 🔥 Active), so showing them here too was
   pure duplication. .proj-sec-header kept for the shared .proj-card
   primitive other tabs (Ideas/Goals/Milestones/Projects) still use with
   real section headers — this panel just never emits one anymore. */
#projects-status-panel{display:block}  /* the Skills Focus panel hosts a cabView now (toolbar + #skills-list > .cab-grid); the grid lives in the controller */
#projects-status-panel .proj-sec-header{grid-column:1/-1;font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;color:var(--ra-text-faint);text-transform:uppercase;padding:calc(10px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1));margin-top:calc(4px * var(--ra-density,1))}
.proj-card{background:var(--ra-card-bg);border:1px solid var(--ra-border);border-left:3px solid var(--proj-accent,var(--ra-border-strong));border-radius:var(--ra-card-radius);padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1));box-sizing:border-box;height:100%;transition:border-color var(--ra-motion) var(--ra-ease),transform var(--ra-motion) var(--ra-ease),box-shadow var(--ra-motion) var(--ra-ease)}
.proj-card:hover{transform:translateY(-1px);box-shadow:var(--ra-shadow-1);border-left-color:var(--ra-accent)}
.proj-card-name{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-bright);font-weight:600}
.proj-card-item{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);padding:calc(2px * var(--ra-density,1)) 0 0 calc(14px * var(--ra-density,1));line-height:1.4}
.proj-card-empty{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);padding:calc(2px * var(--ra-density,1)) 0 0 calc(14px * var(--ra-density,1))}

/* Ideas tab — same .proj-card primitive as the Skills/Projects board, but it
   needs its own grid container: .proj-card has no layout of its own (no
   margin/gap), it only ever worked because #projects-status-panel supplied
   display:grid. Dropping the same cards into a plain block div (as the
   first cut of this tab did) collapsed them into a flat bottom-border list
   with no spacing, rounding, or accent bar visible at all. */
.idea-card-title{display:flex;align-items:baseline;gap:calc(6px * var(--ra-density,1))}
.idea-card-status{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.03em;text-transform:uppercase;padding:1px calc(6px * var(--ra-density,1));border-radius:var(--ra-radius-pill);white-space:nowrap;font-weight:600}
.idea-filter-pill{border-radius:var(--ra-radius-pill);padding:calc(5px * var(--ra-density,1)) calc(13px * var(--ra-density,1));cursor:pointer;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;border:1px solid var(--ra-border-strong);background:var(--ra-card-bg);color:var(--ra-text-mid);display:inline-flex;align-items:center;gap:calc(5px * var(--ra-density,1));transition:border-color var(--ra-motion) var(--ra-ease),background var(--ra-motion) var(--ra-ease)}
.idea-filter-pill:hover{border-color:var(--ra-accent)}
.idea-filter-pill .cnt{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));opacity:.75;background:var(--ra-bg);border-radius:var(--ra-radius-pill);padding:1px calc(6px * var(--ra-density,1))}
.idea-hero{border:1px solid var(--ra-border);border-left:4px solid var(--cab-accent,var(--ra-accent));background:linear-gradient(90deg,var(--ra-accent-bg),transparent 70%),var(--ra-card-bg);border-radius:var(--ra-card-radius);padding:calc(10px * var(--ra-density,1)) calc(14px * var(--ra-density,1))}
.idea-hero-kicker{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.1em;text-transform:uppercase;color:var(--ra-text-faint);font-weight:700}
.idea-hero-title{font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;color:var(--ra-text-bright);cursor:pointer;margin-top:calc(2px * var(--ra-density,1))}
.idea-hero-sum{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);margin-top:calc(3px * var(--ra-density,1))}

/* Goals tab — REBUILT 2026-07-26 (goals-spec.md Phase 6) off the .proj-card
   grid entirely. User verdict on Phase 5's version: "still not interesting,
   i cant click on the missions... should we change the whole layout (not
   goal card? since there only 5 of them)." With only ~5 goals ever, a dense
   auto-fill card grid was the wrong shape — reference points: Habitica's
   clickable quest checklist (a mission is a real checkbox, not a hover-only
   action), Apple Fitness's activity rings (one glanceable number per
   panel), Linear/Notion's full-width stacked panels for a small item count.
   One .goal-hero panel per goal, full width, stacked — real breathing
   room instead of a packed grid. */
#goals-panel{display:flex;flex-direction:column;gap:calc(14px * var(--ra-density,1));min-width:0;width:100%;overflow-x:hidden;box-sizing:border-box;padding:0 calc(10px * var(--ra-density,1)) calc(10px * var(--ra-density,1)) 0}/* padding leaves room for themes' offset card shadows (overflow clips them otherwise) */
.portfolio-overview{background:linear-gradient(135deg,color-mix(in srgb,var(--ra-accent) 12%,var(--ra-card-bg)),var(--ra-card-bg));border:1px solid var(--ra-accent-border);border-radius:var(--ra-radius-lg);padding:calc(12px * var(--ra-density,1)) calc(14px * var(--ra-density,1))}
.portfolio-overview summary{display:flex;align-items:center;gap:calc(10px * var(--ra-density,1));cursor:pointer;list-style:none}
.portfolio-overview summary::-webkit-details-marker{display:none}
.portfolio-title{font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:800;color:var(--ra-text-bright);letter-spacing:.02em}
.portfolio-state{margin-left:auto;color:var(--ra-accent);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;white-space:nowrap}
.portfolio-body{padding-top:calc(10px * var(--ra-density,1))}
.portfolio-copy{color:var(--ra-text-mid);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.45;margin-bottom:calc(9px * var(--ra-density,1))}
.portfolio-goals{display:flex;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap}
.portfolio-goal-chip{border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);padding:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1));color:var(--ra-text-mid);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));background:var(--ra-bg)}
.portfolio-goal-chip b{color:var(--ra-text-bright);margin-left:calc(3px * var(--ra-density,1))}
.portfolio-subhead{display:flex;gap:calc(5px * var(--ra-density,1));align-items:center;margin-top:calc(11px * var(--ra-density,1));margin-bottom:calc(4px * var(--ra-density,1));color:var(--ra-text-mid);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.portfolio-subhead span{color:var(--ra-accent)}
.portfolio-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:calc(4px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
.portfolio-row{display:flex;justify-content:space-between;gap:calc(8px * var(--ra-density,1));padding:calc(4px * var(--ra-density,1)) calc(7px * var(--ra-density,1));border-radius:var(--ra-radius-sm);background:color-mix(in srgb,var(--ra-bg) 70%,transparent);color:var(--ra-text-mid);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));min-width:0}
.portfolio-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portfolio-row small{color:var(--ra-text-faint);white-space:nowrap}
.portfolio-warning{margin-top:calc(9px * var(--ra-density,1));color:var(--ra-warn);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}
.life-architecture-launch{width:auto!important;padding-inline:calc(12px * var(--ra-density,1))!important;gap:calc(5px * var(--ra-density,1));border:2px solid var(--ra-accent-strong,var(--ra-accent))!important;background:color-mix(in srgb,var(--ra-accent) 24%,var(--ra-surface-1))!important;color:var(--ra-accent)!important;font-weight:800;box-shadow:0 0 0 3px color-mix(in srgb,var(--ra-accent) 22%,transparent)!important}.life-architecture-launch span{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.life-arch-shell{display:flex;flex-direction:column;gap:calc(18px * var(--ra-density,1));width:100%;min-width:0}.life-arch-hero,.life-arch-panel{padding:clamp(18px,2.4vw,30px);min-width:0;width:100%;overflow:hidden}.life-arch-panel h3{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1))}
.life-arch-hero{background:color-mix(in srgb,var(--ra-accent) 12%,var(--ra-card-bg));border-color:var(--ra-accent-border)}.life-arch-hero-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(12px * var(--ra-density,1))}.life-arch-hero-top>span,.life-engine .life-arch-heading span{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:800;letter-spacing:.14em;color:var(--ra-accent)}
.life-arch-hero h2{margin:calc(8px * var(--ra-density,1)) 0 calc(12px * var(--ra-density,1));font-size:calc(30px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-bright)}.life-arch-hero p,.life-arch-panel p{font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.65;color:var(--ra-text-mid);margin:calc(7px * var(--ra-density,1)) 0}.life-arch-panel h3{margin:0 0 calc(15px * var(--ra-density,1));color:var(--ra-text-bright);font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1))}
.life-arch-quickref{border-color:var(--ra-accent-border);background:color-mix(in srgb,var(--ra-accent) 6%,var(--ra-card-bg))}.life-arch-quickref p{max-width:none}
.life-arch-flow{display:flex;align-items:stretch;gap:calc(9px * var(--ra-density,1));overflow-x:auto}.life-arch-step{min-width:125px;flex:1;display:grid;grid-template-columns:auto 1fr;gap:calc(3px * var(--ra-density,1)) calc(9px * var(--ra-density,1));padding:calc(13px * var(--ra-density,1));background:var(--ra-surface-1)}.life-arch-step>span{grid-row:1/4;font-size:calc(24px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-step b{color:var(--ra-text-bright);font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-step strong{color:var(--ra-accent);font-size:calc(18px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-step small{color:var(--ra-text-faint);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-flow>i{align-self:center;color:var(--ra-text-faint);font-style:normal}
.life-arch-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(12px * var(--ra-density,1))}.life-arch-heading button{flex:0 0 auto}.life-arch-goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:calc(11px * var(--ra-density,1));overflow-x:auto}.life-arch-goal{text-align:left;background:var(--ra-surface-1);color:var(--ra-text);cursor:pointer;font-family:var(--ra-font-body)}.life-arch-goal:hover{border-color:var(--ra-accent-border)}.life-arch-goal-state{display:block;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));text-transform:uppercase;letter-spacing:.08em;color:var(--ra-text-faint);margin-bottom:calc(7px * var(--ra-density,1))}.life-arch-goal b{color:var(--ra-text-bright);font-size:calc(15px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-goal p{font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-goal small{color:var(--ra-text-faint);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}
.life-engine{border-color:var(--ra-accent-border)}.life-engine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(11px * var(--ra-density,1))}.life-engine-grid article{padding:calc(15px * var(--ra-density,1));border-radius:var(--ra-radius-md);background:color-mix(in srgb,var(--ra-accent) 8%,var(--ra-surface-1));border:var(--ra-border-w) solid var(--ra-accent-border)}.life-engine-grid article b{color:var(--ra-accent);font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-engine-grid article p{font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-engine-boundary{margin-top:calc(13px * var(--ra-density,1));padding:calc(14px * var(--ra-density,1));border-left:3px solid var(--ra-ok);background:var(--ra-bg);font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.6}.life-engine-boundary pre{white-space:pre-wrap}
.life-arch-tabs{display:flex;flex-wrap:wrap;gap:calc(7px * var(--ra-density,1));margin-bottom:calc(13px * var(--ra-density,1))}.life-arch-tab-btn{flex:0 0 auto;white-space:nowrap;min-height:0;padding:calc(6px * var(--ra-density,1)) calc(12px * var(--ra-density,1));font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1))}
.life-arch-tabpane{background:var(--ra-surface-1);padding:calc(14px * var(--ra-density,1)) calc(16px * var(--ra-density,1));overflow-wrap:anywhere}.life-arch-tabpane-title{margin:0 0 calc(12px * var(--ra-density,1));padding-bottom:calc(10px * var(--ra-density,1));border-bottom:1px solid var(--ra-border);color:var(--ra-accent);font-size:calc(16px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-tabpane h4{margin:0 0 calc(8px * var(--ra-density,1));color:var(--ra-text-bright);font-size:calc(15px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-tabpane h5{margin:calc(10px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1));color:var(--ra-text-bright);font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-tabpane p,.life-arch-tabpane li{font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.65;color:var(--ra-text-mid)}.life-arch-tabpane ul{padding-left:calc(22px * var(--ra-density,1))}.life-arch-tabpane li{margin:calc(3px * var(--ra-density,1)) 0}
.life-arch-hero pre,.life-arch-panel pre,.life-arch-tabpane pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:calc(8px * var(--ra-density,1)) 0;padding:calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1));border-radius:var(--ra-radius-md);background:var(--ra-bg-inset,var(--ra-bg));border:1px solid var(--ra-border);line-height:1.5}
.life-arch-hero code,.life-arch-panel code,.life-arch-tabpane code{background:var(--ra-bg-inset,var(--ra-bg));border-radius:var(--ra-radius-sm);padding:0 calc(4px * var(--ra-density,1));color:var(--ra-accent)}
.life-arch-hero em,.life-arch-panel em,.life-arch-tabpane em{color:var(--ra-text-faint);font-style:italic}
/* This dashboard docks panels beside fixed sidebars, so the viewport can stay
   wide while the actual pane content is narrow — @media keys off the former,
   which is why the two rules below never fired against the real docked layout
   (2026-08-23 incident: build deployed fine, breakpoint just never matched).
   .tab-panel already sets container-type:inline-size;container-name:pane
   (see that rule's own comment above) — use @container pane like every other
   panel in this file already does, not @media. */
@container pane (max-width:700px){.life-engine-grid{grid-template-columns:1fr}.life-arch-flow>i{display:none}.life-arch-flow{display:grid;grid-template-columns:repeat(2,1fr)}.life-arch-heading{flex-direction:column}.life-arch-goals{grid-template-columns:1fr}}
/* Mobile/narrow-pane typography — the desktop sizes above (14px body, 30/20px
   headings) are oversized on a phone-width container: a handful of words per
   line, excessive scrolling. Tighten body copy and headings together here
   rather than only touching the h2/padding like the previous pass did. */
@container pane (max-width:480px){.life-arch-shell{gap:calc(12px * var(--ra-density,1))}.life-arch-hero,.life-arch-panel{padding:calc(16px * var(--ra-density,1))}.life-arch-hero h2{font-size:calc(21px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-panel h3{font-size:calc(16px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-hero p,.life-arch-panel p{font-size:calc(12.5px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-flow{grid-template-columns:1fr}.life-arch-tab-btn{padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1));font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-tabpane{padding:calc(12px * var(--ra-density,1))}.life-arch-tabpane p,.life-arch-tabpane li{font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-tabpane-title{font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-tabpane h4{font-size:calc(13.5px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-goal b{font-size:calc(13.5px * var(--fsc,1) * var(--ra-fs-scale,1))}.life-arch-goal p{font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1))}}
.goal-contract{margin-top:calc(8px * var(--ra-density,1));padding:calc(7px * var(--ra-density,1)) calc(9px * var(--ra-density,1)) calc(7px * var(--ra-density,1)) calc(14px * var(--ra-density,1));position:relative;overflow:hidden;font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid)}
.goal-contract::before,.md-lite-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ra-accent)}
.goal-contract summary{cursor:pointer;color:var(--ra-accent);font-weight:700;letter-spacing:.02em}
.goal-contract summary span{color:var(--ra-text-faint);font-weight:400;margin-left:calc(5px * var(--ra-density,1))}
.goal-contract-line{display:flex;gap:calc(7px * var(--ra-density,1));margin-top:calc(6px * var(--ra-density,1));line-height:1.45}
.goal-contract-line b{flex:0 0 72px;color:var(--ra-text-bright);font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));text-transform:uppercase;letter-spacing:.05em}
.goal-contract-meta{display:flex;gap:calc(10px * var(--ra-density,1));flex-wrap:wrap;margin-top:calc(7px * var(--ra-density,1));padding-top:calc(6px * var(--ra-density,1));border-top:1px solid var(--ra-divider);color:var(--ra-text-faint);line-height:1.4}
.goal-contract-meta b{color:var(--ra-text-mid)}
.goal-evidence-state{display:inline-block;font-style:normal;border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);padding:1px calc(5px * var(--ra-density,1));margin:calc(2px * var(--ra-density,1)) calc(3px * var(--ra-density,1)) 0 0;color:var(--ra-text-faint)}
.goal-evidence-state.is-available{color:var(--ra-ok);border-color:var(--ra-ok-border)}
.goal-evidence-state.is-confirmation_required{color:var(--ra-warn);border-color:var(--ra-warn-border)}
.goal-evidence-state.is-missing,.goal-evidence-state.is-not_connected{color:var(--ra-text-faint)}
.goal-contract-status{border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);padding:1px calc(7px * var(--ra-density,1));font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;text-transform:capitalize}
.goal-contract-status.is-complete,.goal-contract-status.is-acceptable{color:var(--ra-ok);background:var(--ra-ok-bg)}
.goal-contract-status.is-in_progress{color:var(--ra-accent);background:var(--ra-accent-bg)}
.goal-contract-status.is-at_risk{color:var(--ra-warn);background:var(--ra-warn-bg)}
.goal-contract-status.is-blocked{color:var(--ra-danger);background:var(--ra-danger-bg)}
.goal-contract-status.is-unknown{color:var(--ra-text-faint);background:var(--ra-bg)}
/* 2026-10-04: card look (bg/border/radius/shadow) comes from the kit's .ra-card + each theme's .ra-card rules — markup carries `ra-card`; only layout lives here */
.goal-hero{padding:calc(16px * var(--ra-density,1)) calc(18px * var(--ra-density,1));display:flex;gap:calc(18px * var(--ra-density,1));align-items:flex-start;transition:box-shadow var(--ra-motion) var(--ra-ease),border-color var(--ra-motion) var(--ra-ease)}
.goal-hero:hover{box-shadow:0 8px 28px color-mix(in srgb, var(--proj-accent,var(--ra-accent)) 22%, transparent);border-color:color-mix(in srgb, var(--proj-accent,var(--ra-accent)) 50%, var(--ra-border))}
@container pane (max-width:640px){.goal-hero{flex-direction:column;align-items:stretch}}
.goal-ring-wrap{position:relative;width:76px;height:76px;flex:0 0 auto;cursor:pointer}
.goal-ring-wrap svg{transform:rotate(-90deg)}
.goal-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-weight:700;font-size:calc(15px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-bright)}
.goal-ring-pct small{font-weight:600;font-size:calc(7.5px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);text-transform:uppercase;letter-spacing:.04em}
/* chip = kit .ra-pill (theme look). Themes make ra-pill uppercase/heavy/letter-spaced, which is huge for
   long goal/mission names — keep it compact and contained (id scope beats the theme's body.t-x .ra-pill) */
.goal-topic-chip{margin:calc(2px * var(--ra-density,1)) calc(4px * var(--ra-density,1)) 0 0;cursor:pointer}
#goals-panel .goal-topic-chip,#backlinks-modal .goal-topic-chip,.goal-hero .goal-topic-chip{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.03em;font-weight:700;padding:1px calc(7px * var(--ra-density,1));max-width:100%;box-sizing:border-box;overflow:hidden;white-space:nowrap;display:inline-flex;align-items:center;gap:calc(5px * var(--ra-density,1));vertical-align:middle}
.goal-topic-chip .gtc-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.goal-topic-chip:hover{border-color:var(--ra-accent);color:var(--ra-accent)}
.goal-orphan-badge{background:var(--ra-danger-bg);color:var(--ra-danger);border-color:var(--ra-danger-border)}
.goal-quest-badge{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;background:color-mix(in srgb, var(--proj-accent,var(--ra-accent)) 16%, transparent);color:var(--proj-accent,var(--ra-accent));border-radius:var(--ra-radius-pill);padding:1px calc(8px * var(--ra-density,1));white-space:nowrap}
/* A mission is now a real checkbox row — click the circle to complete it
   (the literal "click to achieve" the user asked for), click the row text
   to reveal Abandon/✕. */
.goal-mission-row{display:flex;align-items:center;gap:calc(10px * var(--ra-density,1));padding:calc(7px * var(--ra-density,1)) calc(10px * var(--ra-density,1));margin:0 0 calc(6px * var(--ra-density,1));transition:background var(--ra-motion) var(--ra-ease)}
.goal-mission-row:hover{background:var(--ra-surface-2)}
.goal-mission-row.is-done{background:color-mix(in srgb, var(--ra-ok) 9%, transparent)}
.goal-mission-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--proj-accent,var(--ra-border-strong));flex:0 0 auto;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:transparent;transition:background var(--ra-motion) var(--ra-ease),transform .15s var(--ra-ease)}
.goal-mission-check:hover{transform:scale(1.15);background:color-mix(in srgb, var(--proj-accent,var(--ra-accent)) 20%, transparent)}
.goal-mission-check.is-done{background:var(--ra-ok);border-color:var(--ra-ok);color:var(--ra-bg)}
.goal-mission-body{flex:1;min-width:0;cursor:pointer}
/* border added 2026-07-26 (goals-spec.md Phase 27) — --ra-surface-2 (the
   empty track) sits almost indistinguishable from the .goal-hero card's own
   background in at least one theme (rgb(230,235,242) vs rgb(224,229,236)),
   so a genuinely-0%-progress mission's bar (e.g. a fresh manual-tally
   mission right after Phase 20's target_value retrofit) rendered fully
   invisible — only missions with substantial fill looked fine because the
   accent-colored fill dominated. The border keeps the track visible
   regardless of fill amount or theme. */
.goal-mission-bar{height:6px;background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);margin-top:calc(4px * var(--ra-density,1));overflow:hidden;box-sizing:border-box}
.goal-mission-fill{height:100%;border-radius:var(--ra-radius-pill);background:linear-gradient(90deg, color-mix(in srgb, var(--proj-accent,var(--ra-accent)) 70%, transparent), var(--proj-accent,var(--ra-accent)));transition:width .5s var(--ra-ease)}
.goal-mission-fill.is-done{background:var(--ra-ok)}
.goal-mission-deadline{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));margin-top:calc(3px * var(--ra-density,1));font-weight:600}
.goal-mission-deadline.is-normal{color:var(--ra-text-faint);font-weight:500}
.goal-mission-deadline.is-soon{color:var(--ra-warn)}
.goal-mission-deadline.is-overdue{color:var(--ra-danger)}
.goal-mission-actions{opacity:0;transition:opacity var(--ra-motion) var(--ra-ease);display:flex;gap:calc(4px * var(--ra-density,1));flex:0 0 auto}
.goal-mission-row:hover .goal-mission-actions{opacity:1}
.goal-add-mission-form{display:flex;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap;margin-top:calc(6px * var(--ra-density,1));padding-top:calc(6px * var(--ra-density,1));border-top:1px dashed var(--ra-border)}
.goal-add-mission-form input,.goal-add-mission-form select{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));background:var(--ra-bg);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);color:var(--ra-text-bright);padding:calc(3px * var(--ra-density,1)) calc(6px * var(--ra-density,1))}

/* #289 (ideas.md, 2026-07-28) — completion celebration pop, driven by the
   fixed-position element _celebrateMissionDone() appends/removes itself. */
@keyframes goalCelebratePop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}30%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(-50%,-120%) scale(1);opacity:0}}

/* #266 (ideas.md, 2026-07-28) — a deliberate type-weight scale so a mission
   title reads distinctly heavier than its meta facts (priority dot label,
   target number) — before this they shared near-identical weight/size and
   only color separated them, hurting scannability at a glance. */
.goal-mission-head{display:flex;justify-content:space-between;gap:calc(8px * var(--ra-density,1));align-items:center;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.35}
.goal-mission-line{display:flex;gap:calc(5px * var(--ra-density,1));align-items:center;flex:1;min-width:0;overflow:hidden}
.goal-mission-title{font-weight:600;color:var(--ra-text-bright);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit}
.goal-sugg-title{font-weight:500}
.goal-mission-meta{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1)) calc(6px * var(--ra-density,1));align-items:center}
.gm-meta-end{margin-left:auto;display:inline-flex;align-items:center;gap:calc(6px * var(--ra-density,1))}
.goal-mission-deadline{font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1))}
.goal-mission-more{display:none;flex:0 0 auto;min-width:0;line-height:1;padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1))}
/* Priority stripe + due pill (2026-10-08, "make the layout more interesting"): the row's urgency reads from the edge colour before any text. */
.goal-mission-row{position:relative;overflow:hidden;padding-left:calc(16px * var(--ra-density,1))}
.goal-mission-stripe{position:absolute;left:0;top:0;bottom:0;width:calc(5px * var(--ra-density,1));background:var(--ra-border-strong)}
.gms-now{background:var(--ra-danger)}
.gms-next{background:var(--ra-warn)}
.gms-later{background:var(--ra-border-strong)}
.gms-done{background:var(--ra-ok)}
.goal-mission-deadline.ra-badge{display:inline-block;margin-top:0;padding:0 calc(7px * var(--ra-density,1));font-weight:600}
.goal-mission-deadline.is-normal{background:transparent}
.goal-hero{position:relative;overflow:hidden}
.goal-hero-stripe{position:absolute;left:0;right:0;top:0;height:calc(4px * var(--ra-density,1));background:linear-gradient(90deg,var(--proj-accent,var(--ra-accent)),transparent)}
.goal-stat.gs-quests b{color:var(--ra-accent-strong)}
.goal-stat.gs-actions b{color:var(--ra-info)}
.goal-stat.gs-habits b{color:var(--ra-ok)}
.goal-stat.gs-wins b{color:var(--ra-warn)}
/* Goal header (2026-10-08): one meta line, topics collapsed, one stat strip */
.goal-meta{margin-top:calc(6px * var(--ra-density,1));display:flex;gap:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1));flex-wrap:wrap;align-items:center}
.goal-meta-note{font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint)}
.goal-topics{margin-top:calc(4px * var(--ra-density,1))}
.goal-topics>summary{cursor:pointer;font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.06em;color:var(--ra-text-faint);text-transform:uppercase;padding:calc(2px * var(--ra-density,1)) 0}
.goal-topics-list{display:flex;flex-wrap:wrap;margin-top:calc(2px * var(--ra-density,1))}
.goal-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(6px * var(--ra-density,1));margin-top:calc(8px * var(--ra-density,1))}
.goal-stat{display:flex!important;flex-direction:column;align-items:center;gap:0;padding:calc(3px * var(--ra-density,1)) calc(4px * var(--ra-density,1))!important;min-width:0;text-align:center;white-space:normal}
.goal-stat b{font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-bright);line-height:1.2}
.goal-stat small{font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.03em;text-transform:uppercase;color:var(--ra-text-faint);font-weight:600;line-height:1.3}

/* #291 (ideas.md, 2026-07-28) — print/offline-friendly pass: hide
   interactive chrome (buttons, filter bar, focus-mode toggle, add-mission
   form) that means nothing on paper, keep goal/mission content readable in
   plain ink, avoid splitting a goal card across a page break where possible. */
/* #281 (ideas.md, 2026-07-28) — mobile/small-screen pass for the Goals tab
   specifically: filter bar wraps and shrinks, mission action buttons stay
   visible instead of hover-only (no hover on touch), quick-capture input
   goes full width instead of a fixed 180px squeezed into a narrow toolbar. */
@container pane (max-width:480px){
  #goals-filter-bar{gap:calc(4px * var(--ra-density,1))!important}                    /* inline gap:calc(6px * var(--ra-density,1)) */
  #goals-filter-bar input{width:100%!important;order:10}   /* inline width:180px */
}
/* Phone-width goal card (2026-10-08, user: "improve the whole goal layout, especially in mobile view"): the status badge already
   carries the ring's state, so the ring goes; rows wrap their title instead of cutting it to 8 letters; the three row actions
   fold behind one ⋯ button (suggestion rows keep Approve/Decline visible, below the title); unrated chips are hidden. */
@container pane (max-width:560px){
  .goal-hero{padding:calc(14px * var(--ra-density,1)) calc(10px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
  .goal-ring-wrap{display:none}
  .goal-mission-row{flex-wrap:wrap;align-items:flex-start;gap:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1));padding-right:calc(8px * var(--ra-density,1))}
  .goal-mission-body{flex:1 1 0}
  /* title first, on its own full-width line; priority dot, chips, notes badge and due date wrap underneath it */
  .goal-mission-line{flex-wrap:wrap;overflow:visible;align-items:center;gap:calc(2px * var(--ra-density,1)) calc(6px * var(--ra-density,1))}
  .goal-mission-title{order:-1;flex:1 1 100%;white-space:normal;overflow:visible}
  .goal-sugg-title{order:0;flex:1 1 0}
  .gm-chip.is-unset{display:none}
  .goal-mission-meta{margin-top:calc(4px * var(--ra-density,1))}
  .goal-mission-row>.goal-mission-check{margin-top:calc(1px * var(--ra-density,1))}
  .goal-mission-more{display:inline-flex}
  .goal-mission-row:not(.is-suggestion) .goal-mission-actions{display:none}
  .goal-mission-row.show-actions .goal-mission-actions{display:flex}
  .goal-mission-actions{opacity:1!important;flex:0 0 100%;justify-content:flex-end;flex-wrap:wrap}
  .goal-mission-row.is-suggestion .goal-mission-actions{padding-left:calc(2px * var(--ra-density,1))}
}
}

@media print{
  #goals-filter-bar,.goal-mission-actions,.goal-add-mission-form,.pin-toggle-btn,#tabs-left,#tabs,#tabs-right,#topbar{display:none!important}
  .goal-hero{break-inside:avoid;page-break-inside:avoid;box-shadow:none!important;border:1px solid #999!important;background:#fff!important;color:#000!important}
  .goal-hero *{color:#000!important}
  .goal-mission-row:hover{background:none!important}
}

/* Milestones tab — same .proj-card primitive + grid-container fix as
   Ideas/Goals needed. */
@container pane (max-width:760px){#events-grid-list-row{flex-direction:column!important}}
.milestone-amount{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-ok);font-weight:600}
.milestone-content{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);padding:calc(4px * var(--ra-density,1)) 0 0;line-height:1.4}
.milestone-content code{background:var(--ra-bg);border-radius:var(--ra-radius-sm);padding:0 calc(3px * var(--ra-density,1));font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}

/* Projects tab — same .proj-card primitive + grid-container fix as
   Ideas/Goals/Milestones needed. */
#projects-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:calc(8px * var(--ra-density,1));align-items:start}
@container pane (max-width:760px){#projects-panel{grid-template-columns:1fr}}
.project-progress-track{background:var(--ra-bg);border-radius:var(--ra-radius-pill);height:5px;overflow:hidden;margin-top:calc(4px * var(--ra-density,1))}
.project-progress-fill{background:var(--ra-accent);height:100%;border-radius:var(--ra-radius-pill)}
.project-domain-chip{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));background:var(--ra-bg);border:1px solid var(--ra-border);color:var(--ra-text-mid);border-radius:var(--ra-radius-pill);padding:1px calc(7px * var(--ra-density,1))}

/* Things tab — same .proj-card primitive + grid-container fix as every
   other tab built on it (Ideas/Goals/Milestones/Projects). */
#things-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:calc(8px * var(--ra-density,1));align-items:start}
@container pane (max-width:760px){#things-panel{grid-template-columns:1fr}}

/* Tools tab — same .proj-card primitive + grid-container fix. */
#tools-active-panel,#tools-scouted-panel,#tools-backlog-panel,#activities-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:calc(8px * var(--ra-density,1));align-items:start}
@container pane (max-width:760px){#tools-active-panel,#tools-scouted-panel,#tools-backlog-panel,#activities-panel{grid-template-columns:1fr}}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:calc(8px * var(--ra-density,1));align-items:start;margin-bottom:calc(10px * var(--ra-density,1))}
@container pane (max-width:760px){.feat-grid{grid-template-columns:1fr}}

/* Profile tab (todo_0e0caab6, 2026-09-02) — short facts as a field grid,
   long schedule text as side-by-side boxes, instead of 9 stacked
   full-width textareas. */
.profile-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:calc(12px * var(--ra-density,1)) calc(16px * var(--ra-density,1))}
.profile-field{display:flex;flex-direction:column;gap:calc(5px * var(--ra-density,1));min-width:0}
.profile-field label{color:var(--ra-text-faint);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));text-transform:uppercase;letter-spacing:.04em}
.profile-field input,.profile-field textarea{background:var(--ra-bg);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);padding:calc(7px * var(--ra-density,1)) calc(10px * var(--ra-density,1));color:var(--ra-text-mid);font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));font-family:inherit}
.profile-schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:calc(16px * var(--ra-density,1))}
.profile-schedule-text{min-height:320px;resize:vertical;line-height:1.55;white-space:pre-wrap}
@container pane (max-width:640px){.profile-fields{grid-template-columns:1fr}.profile-schedule-grid{grid-template-columns:1fr}}
.feat-deps-sum{display:inline-block;cursor:pointer;color:var(--ra-text-dim);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));padding:1px calc(4px * var(--ra-density,1));border-radius:var(--ra-radius-sm);list-style:none}
.feat-deps-sum::-webkit-details-marker{display:none}
.feat-deps-sum::before{content:'▸ '}
details[open]>.feat-deps-sum{color:var(--ra-accent)}
details[open]>.feat-deps-sum::before{content:'▾ '}
.feat-deps-sum:hover{color:var(--ra-accent)}
.feat-degraded-badge{cursor:pointer;color:var(--ra-danger);border:1px solid var(--ra-danger);border-radius:var(--ra-radius-lg);padding:1px calc(8px * var(--ra-density,1));margin-left:calc(6px * var(--ra-density,1))}
.feat-degraded-badge.on{background:var(--ra-danger);color:var(--ra-bg)}

/* Money trends (Finances tab enrichment, 2026-07-14) */
/* finances-tab-ideas.md #64 (2026-07-30): 90px wrapped a real net figure
   ("+25,555,139 VND") to two lines on May/Jun/Jul — widened to 112px
   (measured against the real data, no wrap at any font-size-preference
   setting). On mobile the fixed column ate a third of a 297px-wide row
   while the bars got squeezed to 135px; the max-width:600px override below
   narrows the label column and caps net at 92px (still enough for the
   real amounts at the smaller mobile font) so bars keep most of the width. */
.money-trend-row{display:grid;grid-template-columns:56px 1fr 112px;gap:calc(8px * var(--ra-density,1));align-items:center;padding:calc(5px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-divider)}
.money-trend-row:last-child{border-bottom:none}
.money-trend-bars{display:flex;flex-direction:column;gap:calc(2px * var(--ra-density,1))}
.money-trend-bar-track{background:var(--ra-bg);border-radius:var(--ra-radius-sm);height:7px;overflow:hidden;position:relative}
.money-trend-bar-fill{height:100%;border-radius:var(--ra-radius-sm)}
@media(max-width:600px){
  .money-trend-row{grid-template-columns:40px 1fr 92px;gap:calc(6px * var(--ra-density,1))}
}
/* finances-tab-ideas.md #63 (2026-07-30): at 1280px a 7px-tall trend bar
   spanned ~1,300px with nothing else on the line — the Overview sub-tab's
   two .cell panels (Trends, the manual tracker) just stacked full-width.
   Step 3's own layout-pass prescription (repeat(auto-fill,minmax(Npx,1fr)))
   lets them sit side by side once there's room; collapses to one column
   under 420px×2+gap with no extra media query needed (that's what
   auto-fill is for). Only #finances-subtab-overview — Patterns/Transactions
   are single cell-span panels and stay full-width. align-items:start here
   is NOT the polish-plan gotcha about repeating card rows (that warning is
   about a card GRID losing its equal-height rhythm) — these two panels are
   structurally different one-offs (a chart vs. a manual tracker), not a
   repeating list, so letting each be its own content height is correct.
   CORRECTION (2026-08-19 mobile audit): "no extra media query needed" only
   holds once the viewport is AT LEAST 420px — auto-fill only collapses the
   COLUMN COUNT, it does not shrink a track below minmax()'s own floor. On
   any phone (~375px usable width after padding) the single remaining
   column still gets held to a 420px minimum, so the Trends panel overflows
   the viewport horizontally instead of ever reaching one full-width column.
   [id^="todo-list-"] and (formerly) #bookmarks-panel hit the exact same 420px value
   and already carry a `@container pane (max-width:860px){grid-template-
   columns:1fr}` fallback for it — this panel was the one 420px grid that
   never got the matching fallback. */
#finances-subtab-overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:calc(12px * var(--ra-density,1));align-items:start}
@container pane (max-width:860px){#finances-subtab-overview{grid-template-columns:1fr}}
.money-topic-row{display:flex;justify-content:space-between;align-items:center;padding:calc(5px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-divider);gap:calc(8px * var(--ra-density,1))}
.money-topic-row:last-child{border-bottom:none}
.money-vs-avg{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));padding:1px calc(6px * var(--ra-density,1));border-radius:var(--ra-radius-pill);flex-shrink:0}

/* Topics list (dashboard-ui-polish-plan.md Group A #7 — list view only,
   graph view is a separate paradigm and untouched). Each row already packs
   several inline chips (mirror/edge/things/hotness/age) that fit on one
   line at full width — a multi-column grid here would force the same
   chip-wrapping bug the Resources pass hit and had to fix, so this stays
   single-column full-width, same choice as .hab-record-card. Left-edge
   accent reuses the hotness color already computed for the badge. */
.rel-row-clickable:active{background:var(--ra-surface-1) !important}

/* ── meals strip ── */
#meals-strip{background:var(--ra-bg);border-bottom:1px solid var(--ra-border);padding:calc(5px * var(--ra-density,1)) calc(14px * var(--ra-density,1));display:flex;align-items:center;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1));min-height:28px}
.meal-pill{display:inline-flex;align-items:center;gap:calc(5px * var(--ra-density,1));background:var(--ra-surface-2);border:1px solid var(--ra-accent-border);border-radius:var(--ra-radius-lg);padding:calc(2px * var(--ra-density,1)) calc(9px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.meal-pill .meal-time{color:var(--ra-text-muted);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));flex-shrink:0}
.meal-pill .meal-name{color:var(--ra-text);overflow:hidden;text-overflow:ellipsis}
#meals-strip-label{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-muted);letter-spacing:.06em;flex-shrink:0}
#meals-kcal{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);margin-left:auto;flex-shrink:0}
/* ── hero strip (v37: more breathing room, values read as headline numbers
   instead of matching every other 12px line on the page) ── */
/* v37k: all 5 hero items were reading as visually different weights/sizes —
   h-mac-loc carried an inline font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1)) + opacity:.6 override that none
   of its siblings had, so it looked like a different, smaller UI element
   sitting in the same row as bold 14px text. Dropped that override (below,
   at the markup) and toned the shared .hero-val size/weight down a notch so
   the whole strip reads as one consistent, smaller-footprint line instead of
   oversized bold text competing with itself. */
#hero{display:flex;align-items:center;flex-wrap:wrap;gap:0;padding:calc(10px * var(--ra-density,1)) calc(18px * var(--ra-density,1));background:var(--ra-bg);border-bottom:2px solid var(--ra-border)}
.hero-item{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));padding:0 calc(16px * var(--ra-density,1));font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));border-right:1px solid var(--ra-border)}
.hero-item:first-child{padding-left:0}
.hero-item:last-child{border-right:none;flex:1;min-width:0}
/* 4 Claude-usage hero widgets (user request 2026-07-27) — outer ring=weekly,
   inner ring=session, same icons as the Claude Usage panel cards below;
   click opens the matching Claude Desktop instance (_cuOpenApp). */
.hero-cu-strip{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));padding-left:calc(14px * var(--ra-density,1));margin-left:auto;flex-shrink:0}
.hero-cu-widget{position:relative;width:34px;height:34px;cursor:pointer;flex-shrink:0}
.hero-cu-widget:hover{filter:brightness(1.2)}
.hero-cu-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero-cu-icon svg{margin:0!important;vertical-align:baseline!important;width:9px!important;height:9px!important}
.hero-lbl{color:var(--ra-text-muted);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));flex-shrink:0}
.hero-val{font-weight:600;font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ra-data-budget{position:relative;gap:calc(6px * var(--ra-density,1));flex-shrink:0}
.ra-data-saver-toggle,.ra-data-usage-meter{font-family:var(--font-body);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1;white-space:nowrap;cursor:pointer;min-height:25px;border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);background:var(--ra-surface-1);color:var(--ra-text-mid);padding:calc(5px * var(--ra-density,1)) calc(8px * var(--ra-density,1));transition:background var(--ra-motion) var(--ra-ease),border-color var(--ra-motion) var(--ra-ease),color var(--ra-motion) var(--ra-ease)}
.ra-data-saver-toggle:hover,.ra-data-usage-meter:hover{border-color:var(--ra-accent-strong);color:var(--ra-text-bright)}
.ra-data-saver-toggle[aria-pressed="true"]{border-color:var(--ra-ok);background:color-mix(in srgb,var(--ra-ok) 12%,var(--ra-surface-1));color:var(--ra-ok)}
.ra-data-usage-meter{display:inline-flex;align-items:baseline;gap:calc(4px * var(--ra-density,1));color:var(--ra-text-bright);font-variant-numeric:tabular-nums}
.ra-data-usage-caption{font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);text-transform:uppercase;letter-spacing:.04em}
#ra-data-usage-detail{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:230px;padding:calc(9px * var(--ra-density,1)) calc(11px * var(--ra-density,1));background:var(--ra-card-bg);border:1px solid var(--ra-border-strong,var(--ra-border));border-radius:var(--ra-radius-md);box-shadow:var(--ra-shadow-2);font-family:var(--font-body);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.5;color:var(--ra-text-mid)}
.mac-control-hero{padding:calc(16px * var(--ra-density,1)) calc(18px * var(--ra-density,1))}
.mac-control-data-controls{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));flex-wrap:wrap;padding:calc(10px * var(--ra-density,1)) calc(14px * var(--ra-density,1))}.mac-control-data-controls .sec-name{margin-right:auto}.mac-control-data-controls #ra-data-usage-detail{left:14px;right:auto;top:calc(100% + 8px)}.mac-control-pause-safe{margin-top:calc(8px * var(--ra-density,1));border-color:color-mix(in srgb,var(--ra-warn) 55%,var(--ra-border));color:var(--ra-warn-strong)}
.mac-control-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(12px * var(--ra-density,1))}
.mac-control-heading h3{margin:0;color:var(--ra-text-bright);font-size:calc(18px * var(--fsc,1) * var(--ra-fs-scale,1))}
.mac-control-subtitle,.mac-control-muted,.mac-control-note{color:var(--ra-text-faint);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.mac-control-state{border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);padding:calc(5px * var(--ra-density,1)) calc(9px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));white-space:nowrap}
.mac-control-state.is-running{color:var(--ra-ok);border-color:color-mix(in srgb,var(--ra-ok) 55%,var(--ra-border))}
.mac-control-state.is-paused{color:var(--ra-warn-strong);border-color:color-mix(in srgb,var(--ra-warn) 55%,var(--ra-border))}
.mac-control-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(8px * var(--ra-density,1));margin:calc(16px * var(--ra-density,1)) 0;border-top:1px solid var(--ra-border);border-bottom:1px solid var(--ra-border);padding:calc(11px * var(--ra-density,1)) 0}
.mac-control-stats div{display:flex;flex-direction:column;gap:calc(3px * var(--ra-density,1))}.mac-control-stats span{color:var(--ra-text-faint);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));text-transform:uppercase;letter-spacing:.05em}.mac-control-stats b{color:var(--ra-text-bright);font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1));font-variant-numeric:tabular-nums}
.mac-control-actions{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));flex-wrap:wrap}.mac-control-actions button:disabled{opacity:.4;cursor:not-allowed}.mac-control-pause{border-color:color-mix(in srgb,var(--ra-warn) 55%,var(--ra-border));color:var(--ra-warn-strong)}
.mac-control-services{min-height:120px}.mac-control-service{position:relative;padding:calc(11px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-border);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}.mac-control-service-main{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1))}.mac-control-service-main .mac-control-muted{margin-left:auto}.mac-control-purpose,.mac-control-impact{padding:calc(4px * var(--ra-density,1)) 0 0 calc(16px * var(--ra-density,1));color:var(--ra-text-faint);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.4}.mac-control-impact b{color:var(--ra-text-mid)}.mac-control-risk{position:absolute;right:0;bottom:10px;color:var(--ra-ok);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));text-transform:uppercase;letter-spacing:.05em}.mac-control-dot{width:8px;height:8px;border-radius:50%;background:var(--ra-text-faint);flex-shrink:0}.mac-control-dot.healthy{background:var(--ra-ok)}.mac-control-dot.paused{background:var(--ra-warn)}.mac-control-dot.missing{background:var(--ra-danger)}
.mac-control-table{border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);overflow:hidden}.mac-control-row{display:grid;grid-template-columns:minmax(180px,1fr) repeat(3,minmax(70px,110px));gap:calc(8px * var(--ra-density,1));padding:calc(7px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border-bottom:1px solid var(--ra-border);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));font-variant-numeric:tabular-nums}.mac-control-row:last-child{border-bottom:none}.mac-control-row span:not(:first-child),.mac-control-row b{text-align:right}.mac-control-head{color:var(--ra-text-faint);text-transform:uppercase;font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.05em;background:var(--ra-bg-inset,transparent)}
.mac-control-process-table{border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);overflow:auto;max-height:520px}.mac-control-process-row{display:grid;grid-template-columns:minmax(280px,1fr) 90px 70px 88px 150px;align-items:center;gap:calc(10px * var(--ra-density,1));padding:calc(9px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border-bottom:1px solid var(--ra-border);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}.mac-control-process-row:last-child{border-bottom:none}.mac-control-process-main{min-width:0;display:flex;flex-direction:column;gap:calc(3px * var(--ra-density,1))}.mac-control-process-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.mac-control-process-metric,.mac-control-process-state{font-variant-numeric:tabular-nums;color:var(--ra-text-faint)}.mac-control-process-state{color:var(--ra-ok)}.mac-control-process-state.is-paused{color:var(--ra-warn-strong)}.mac-control-process-row button:disabled{opacity:.45;cursor:not-allowed}
.mac-ram-advisor{padding:calc(18px * var(--ra-density,1));background:linear-gradient(135deg,color-mix(in srgb,var(--ra-warn) 10%,var(--ra-bg)),var(--ra-bg));border:1px solid color-mix(in srgb,var(--ra-warn) 35%,var(--ra-border));border-radius:var(--ra-radius-lg)}.mac-ram-advisor h3{margin:0;color:var(--ra-text-bright);font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1))}.mac-ram-advisor .mac-control-heading button{margin-top:0}.mac-ram-explainer{margin-top:calc(12px * var(--ra-density,1));padding:calc(9px * var(--ra-density,1)) calc(11px * var(--ra-density,1));border-left:3px solid var(--ra-warn);background:color-mix(in srgb,var(--ra-bg-inset) 65%,transparent);color:var(--ra-text-mid);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.4}.mac-ram-recommendations{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:calc(10px * var(--ra-density,1));margin-top:calc(12px * var(--ra-density,1))}.mac-ram-recommendation{min-width:0;padding:calc(12px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-lg);background:color-mix(in srgb,var(--ra-bg) 88%,var(--ra-bg-inset));box-shadow:0 2px 8px color-mix(in srgb,var(--ra-shadow,black) 10%,transparent)}.mac-ram-recommendation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(8px * var(--ra-density,1))}.mac-ram-app{color:var(--ra-text-bright);font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1))}.mac-ram-badge{flex:0 0 auto;padding:calc(3px * var(--ra-density,1)) calc(7px * var(--ra-density,1));border-radius:var(--ra-radius-pill);background:color-mix(in srgb,var(--ra-warn) 16%,transparent);color:var(--ra-warn-strong);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));font-variant-numeric:tabular-nums}.mac-ram-recommendation p{margin:calc(9px * var(--ra-density,1)) 0 0;color:var(--ra-text-mid);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.4}.mac-ram-recommendation p b{color:var(--ra-text-bright)}.mac-ram-recommendation details{margin-top:calc(10px * var(--ra-density,1));color:var(--ra-text-faint);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}.mac-ram-recommendation code{display:block;margin-top:calc(5px * var(--ra-density,1));white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.3}
.mac-ram-section-title{display:flex;align-items:end;justify-content:space-between;gap:calc(10px * var(--ra-density,1));margin-top:calc(16px * var(--ra-density,1));padding-bottom:calc(7px * var(--ra-density,1));border-bottom:1px solid var(--ra-border)}.mac-ram-section-title h4{margin:0;color:var(--ra-text-bright);font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1))}.mac-ram-section-title span{color:var(--ra-text-faint);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}.mac-ram-section-title>b{color:var(--ra-text-faint);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));white-space:nowrap}.mac-ram-protected{margin-top:calc(18px * var(--ra-density,1));padding-top:calc(2px * var(--ra-density,1));border-top:1px solid color-mix(in srgb,var(--ra-danger) 20%,var(--ra-border))}.mac-ram-protected-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:calc(7px * var(--ra-density,1));margin-top:calc(9px * var(--ra-density,1))}.mac-ram-protected-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(3px * var(--ra-density,1)) calc(8px * var(--ra-density,1));padding:calc(9px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);background:color-mix(in srgb,var(--ra-bg-inset) 45%,transparent);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}.mac-ram-protected-row strong{display:block;color:var(--ra-text-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mac-ram-protected-row small{grid-column:1/-1;color:var(--ra-text-faint);line-height:1.3}.mac-ram-protected-row details{grid-column:1/-1;color:var(--ra-text-faint);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}.mac-ram-protected-row code{display:block;margin-top:calc(4px * var(--ra-density,1));white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:640px){.mac-control-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.mac-control-row{grid-template-columns:minmax(120px,1fr) repeat(3,minmax(52px,1fr));font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}}
.hv-blue{color:var(--ra-accent)}.hv-green{color:var(--ra-ok)}.hv-amber{color:var(--ra-warn)}.hv-red{color:var(--ra-danger)}.hv-gray{color:var(--ra-text-dim)}

/* ── tab nav (position set by body.nav-left/right/top/bottom/hidden) ── */
.tab{background:none;border:none;color:var(--ra-text-faint);font-family:var(--font-body);cursor:pointer;transition:color .15s;display:flex;align-items:center;justify-content:center;position:relative}
.tab:hover{color:var(--ra-text-mid)}
.tab.active{color:var(--ra-accent,var(--ra-accent))}
/* Container queries — dock-layout-spec.md §8, WP4 (2026-07-30).
   The PANE is the query container, so panel content responds to its own width
   instead of the window's: a 400px-wide Todos pane in a 2000px window used to
   match "desktop" and render a 3-column grid.
   Declaring this on .tab-panel as well as .dock-body is what makes classic mode
   behave identically for free — a full-width panel's container width IS the
   viewport width, so every migrated breakpoint fires exactly where it did
   before. Nearest-container-wins means content inside a docked pane queries the
   .tab-panel (whose width is the .dock-body's content width), which is the same
   number either way.
   Safe here because an audit found ZERO position:fixed elements inside any
   .tab-panel — container-type applies layout containment, which would otherwise
   re-anchor fixed/absolute descendants (the §8.2 warning). The 6 sticky sub-tab
   bars and the 64 .sec-name / pin-toggle absolutes were re-verified after. */
.tab-panel,.dock-body{container-type:inline-size;container-name:pane}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:ra-rise calc(var(--ra-motion,.15s) * 2) var(--ra-ease,ease)}
@keyframes ra-tab-l{from{transform:translateX(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes ra-tab-r{from{transform:translateX(-18px);opacity:0}to{transform:none;opacity:1}}
.tab-panel.active.slide-l{animation:ra-tab-l calc(var(--ra-motion,.15s) * 2) var(--ra-ease,ease)}
.tab-panel.active.slide-r{animation:ra-tab-r calc(var(--ra-motion,.15s) * 2) var(--ra-ease,ease)}
/* ─── Crons tab + per-tab cron strips ─── */
.cron-summary{display:flex;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap;margin-bottom:calc(10px * var(--ra-density,1))}
.cron-group-h{margin:calc(14px * var(--ra-density,1)) 0 calc(6px * var(--ra-density,1));font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;color:var(--ra-text-dim)}
.cron-table{width:100%;border-collapse:collapse;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cron-table th{text-align:left;color:var(--ra-text-muted);font-weight:600;padding:calc(5px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-bottom:1px solid var(--ra-border);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cron-table td{padding:calc(7px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-bottom:1px solid var(--ra-divider);vertical-align:top}
/* Row hover as a pure scanning aid — Crons/Cost rows aren't clickable like
   Triggers' expander rows, but a wide multi-column table is easier to
   track by eye with a highlight, matching .trig-row-clickable's existing
   hover intent minus the pointer cursor (nothing to click here). */
.cron-table tbody tr:hover td{background:var(--ra-surface-1)}
.cron-row-off td{opacity:.55}
.cron-name{font-weight:600;color:var(--ra-text)}
.cron-desc{color:var(--ra-text-dim);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));margin-top:calc(2px * var(--ra-density,1));max-width:460px}
/* NFC sub-tab's multi-line description (2026-07-21) — rows_nfc.py's "\n"-
   joined labeled lines, one per <div>, instead of one dense cron-desc
   paragraph. Wider than .cron-desc (this table only has 4 columns, more
   room than the 5-6 column generic Triggers grid) and each line gets its
   own row with a bold label for scannability. */
.nfc-desc{margin-top:calc(4px * var(--ra-density,1));max-width:640px}
.nfc-desc-line{color:var(--ra-text-dim);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.5;margin-top:calc(3px * var(--ra-density,1))}
.nfc-desc-label{color:var(--ra-text-mid);font-weight:600}
.cron-warn{color:var(--ra-warn-strong);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));margin-top:calc(2px * var(--ra-density,1))}
.cron-err{color:var(--ra-danger-strong);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));margin-top:calc(2px * var(--ra-density,1))}
.cron-dim{color:var(--ra-text-muted);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cron-raw{color:var(--ra-text-faint);font-family:var(--ra-font-mono,monospace);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cron-mini-btn{background:none;border:1px solid var(--ra-text-muted);color:var(--ra-text-mid);border-radius:var(--ra-radius-sm);padding:1px calc(6px * var(--ra-density,1));cursor:pointer;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cron-sched-input{background:none;border:1px solid var(--ra-border);color:var(--ra-text);border-radius:var(--ra-radius-sm);padding:calc(2px * var(--ra-density,1)) calc(6px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));width:140px;font-family:var(--ra-font-mono,monospace)}
/* .cron-toggle-btn (2026-08-31, same audit that found the todo-icon-btn gap)
   — .cron-on-btn/.cron-off-btn were 2 separately-declared classes sharing
   identical pill geometry, and every one of the 28 theme files' shadow
   group listed only .cron-off-btn — meaning every ENABLED cron/trigger (on
   state, used in both System→Crons and System→Triggers) rendered flat and
   unthemed while disabled ones got the themed pill treatment. Same shared-
   base fix as todo-icon-btn: geometry lives on .cron-toggle-btn once, the
   2 state classes are color-only modifiers. */
.cron-toggle-btn{border-radius:var(--ra-radius-pill);padding:calc(2px * var(--ra-density,1)) calc(10px * var(--ra-density,1));cursor:pointer;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cron-on-btn{background:var(--ra-ok-bg);border:1px solid var(--ra-ok);color:var(--ra-ok)}
.cron-off-btn{background:none;border:1px solid var(--ra-text-muted);color:var(--ra-text-muted)}
.cron-confirm-btn{background:var(--ra-danger-bg);border:1px solid var(--ra-danger);color:var(--ra-danger);border-radius:var(--ra-radius-sm);padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));cursor:pointer;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));margin-right:calc(4px * var(--ra-density,1))}
.cron-cancel-btn{background:none;border:1px solid var(--ra-text-muted);color:var(--ra-text-mid);border-radius:var(--ra-radius-sm);padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));cursor:pointer;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cron-tab-chip{display:inline-block;padding:1px calc(8px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);cursor:pointer;white-space:nowrap;transition:transform var(--ra-motion,.15s) var(--ra-ease)}
.cron-strip{display:none;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));align-items:center;padding:calc(7px * var(--ra-density,1)) calc(12px * var(--ra-density,1));margin:0 0 calc(8px * var(--ra-density,1));border:1px dashed var(--ra-border);border-radius:var(--ra-radius-md)}
body.show-cronstrip .cron-strip{display:flex}
.cron-strip-label{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);text-transform:uppercase;letter-spacing:.5px}
.cron-chip{display:inline-flex;align-items:center;gap:calc(5px * var(--ra-density,1));padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);cursor:pointer;transition:transform var(--ra-motion,.15s) var(--ra-ease)}
.cron-tab-chip:active,.cron-chip:active{transform:scale(.92)}
.cron-chip-off{opacity:.5;text-decoration:line-through}
.cron-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.cron-dot-on{background:var(--ra-ok)}
.cron-dot-warn{background:var(--ra-warn)}
.cron-dot-off{background:var(--ra-text-dim)}
@container pane (max-width:640px){ .cron-desc{max-width:none} .cron-table th:nth-child(6),.cron-table td:nth-child(6),.cron-table th:nth-child(7),.cron-table td:nth-child(7){display:none} }
/* ─── Triggers tab (trigger-config-spec.md step 5) ─── */
.trig-row-clickable{cursor:pointer}
.trig-row-clickable:hover{background:var(--ra-surface-1)}
.trig-badge{display:inline-flex;align-items:center;gap:calc(4px * var(--ra-density,1));padding:calc(2px * var(--ra-density,1)) calc(7px * var(--ra-density,1));border-radius:var(--ra-radius-pill);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));white-space:nowrap}
.trig-badge-ready{background:var(--ra-ok-bg);color:var(--ra-ok)}
.trig-badge-cooling{background:var(--ra-warn-bg);color:var(--ra-warn)}
.trig-badge-window{background:color-mix(in srgb, var(--ra-text-dim) 20%, transparent);color:var(--ra-text-mid)}
.trig-badge-dnd{background:var(--ra-purple-bg);color:var(--ra-purple)}
.trig-badge-off{background:none;color:var(--ra-text-muted);border:1px solid var(--ra-text-muted)}
.trig-badge-dead{background:var(--ra-danger-bg);color:var(--ra-danger)}
.trig-runtime-line{margin-top:calc(4px * var(--ra-density,1))}
.trig-runtime-badge{display:inline-flex;align-items:center;padding:calc(2px * var(--ra-density,1)) calc(7px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));white-space:nowrap}
.trig-runtime-phone_vps{background:var(--ra-ok-bg);color:var(--ra-ok);border-color:color-mix(in srgb,var(--ra-ok) 40%,var(--ra-border))}
.trig-runtime-replicated{background:var(--ra-purple-bg);color:var(--ra-purple);border-color:color-mix(in srgb,var(--ra-purple) 40%,var(--ra-border))}
.trig-runtime-mac_live{background:var(--ra-warn-bg);color:var(--ra-warn);border-color:color-mix(in srgb,var(--ra-warn) 40%,var(--ra-border))}
.trig-runtime-module{background:var(--ra-info-bg);color:var(--ra-info);border-color:color-mix(in srgb,var(--ra-info) 40%,var(--ra-border))}
.trig-runtime-actuator{background:var(--ra-surface-2);color:var(--ra-text-mid)}
.trig-runtime-unknown{color:var(--ra-danger);border-color:var(--ra-danger)}
.trig-journal-card{margin:calc(10px * var(--ra-density,1)) 0;padding:calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1));background:var(--ra-surface-1);border:1px solid var(--ra-border);border-left:3px solid var(--ra-ok);border-radius:var(--ra-radius-md)}
.trig-journal-card.trig-journal-warn{border-left-color:var(--ra-warn)}
.trig-journal-card.trig-journal-danger{border-left-color:var(--ra-danger)}
.trig-journal-head{display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--ra-density,1));flex-wrap:wrap}
.trig-journal-state{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim)}
.trig-journal-stats{display:flex;gap:calc(14px * var(--ra-density,1));flex-wrap:wrap;margin:calc(8px * var(--ra-density,1)) 0;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid)}
.trig-sensor-row{display:flex;align-items:center;gap:calc(7px * var(--ra-density,1));flex-wrap:wrap;margin:calc(7px * var(--ra-density,1)) 0;padding-top:calc(7px * var(--ra-density,1));border-top:1px solid var(--ra-divider);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}
.trig-sensor-pill{padding:calc(2px * var(--ra-density,1)) calc(6px * var(--ra-density,1));border-radius:var(--ra-radius-pill);background:var(--ra-ok-bg);color:var(--ra-ok)}
.trig-sensor-pill.unavailable{background:var(--ra-warn-bg);color:var(--ra-warn)}
.trig-next{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);margin-top:calc(2px * var(--ra-density,1))}
.trig-expander{padding:calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1));background:var(--ra-surface-1);border-radius:var(--ra-radius-md);margin:calc(4px * var(--ra-density,1)) 0 calc(8px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));max-width:calc(100vw - 100px);box-sizing:border-box}
.trig-form-row{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));margin-bottom:calc(6px * var(--ra-density,1));flex-wrap:wrap}
.trig-form-label{width:110px;flex:none;color:var(--ra-text-dim)}
.trig-days-pills{display:flex;gap:calc(3px * var(--ra-density,1))}
.trig-day-pill{padding:calc(2px * var(--ra-density,1)) calc(6px * var(--ra-density,1));border-radius:var(--ra-radius-sm);border:1px solid var(--ra-border);cursor:pointer;font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);transition:transform var(--ra-motion,.15s) var(--ra-ease)}
.trig-day-pill:active{transform:scale(.9)}
.trig-day-pill.on{background:var(--ra-purple-bg);border-color:var(--ra-purple);color:var(--ra-purple)}
.trig-override-dot{width:5px;height:5px;border-radius:50%;background:var(--ra-warn);display:inline-block;margin-left:calc(3px * var(--ra-density,1))}
.trig-hist-bar-wrap{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));margin:calc(2px * var(--ra-density,1)) 0;font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}
.trig-hist-bar{height:6px;background:color-mix(in srgb, var(--ra-danger) 55%, transparent);border-radius:var(--ra-radius-sm)}
.trig-hist-label{width:150px;flex:none;color:var(--ra-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trig-eff-split{display:flex;gap:calc(4px * var(--ra-density,1));font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}
.trig-eff-chip{padding:1px calc(5px * var(--ra-density,1));border-radius:var(--ra-radius-sm);background:var(--ra-surface-2)}
.trig-dryrun-item{padding:calc(6px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-bottom:1px solid var(--ra-divider);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.trig-dryrun-preview{color:var(--ra-text-dim);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));margin-top:calc(2px * var(--ra-density,1))}
/* BUG FIX (user-reported, pre-existing, unrelated to the ambient-motion
   work): this was `display:flex` with no flex-direction, so it defaulted
   to `row` — the injected .cron-strip (compact, meant to sit ABOVE the
   module iframe) and the iframe ended up side by side instead of
   stacked, both stretched to height:80vh by the default align-items:
   stretch. That's what rendered as a giant broken box on the left
   swallowing the chat input. The mobile media query already had the
   correct `flex-direction:column` fix (line ~631) — desktop never got
   the same fix. Applying it here unconditionally, matching mobile. */
#tab-beeper.active{display:flex;flex-direction:column;gap:0;height:80vh;overflow:hidden}
.tab-icon{font-size:calc(18px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1;display:inline-block;animation:tab-idle 3s ease-in-out infinite}
@keyframes tab-idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.08)}}
.tab:nth-child(2) .tab-icon,.pin-slot:nth-child(2) .pin-icon{animation-delay:.15s}
.tab:nth-child(3) .tab-icon,.pin-slot:nth-child(3) .pin-icon{animation-delay:.3s}
.tab:nth-child(4) .tab-icon,.pin-slot:nth-child(4) .pin-icon{animation-delay:.45s}
.tab:nth-child(5) .tab-icon,.pin-slot:nth-child(5) .pin-icon{animation-delay:.6s}
.tab:nth-child(6) .tab-icon,.pin-slot:nth-child(6) .pin-icon{animation-delay:.75s}
.tab:nth-child(7) .tab-icon,.pin-slot:nth-child(7) .pin-icon{animation-delay:.9s}
.tab:nth-child(8) .tab-icon,.pin-slot:nth-child(8) .pin-icon{animation-delay:1.05s}
.tab:nth-child(9) .tab-icon,.pin-slot:nth-child(9) .pin-icon{animation-delay:1.2s}
.tab:nth-child(10) .tab-icon,.pin-slot:nth-child(10) .pin-icon{animation-delay:1.35s}
.tab:nth-child(11) .tab-icon,.pin-slot:nth-child(11) .pin-icon{animation-delay:1.5s}
.tab:nth-child(12) .tab-icon,.pin-slot:nth-child(12) .pin-icon{animation-delay:1.65s}
.tab:nth-child(13) .tab-icon,.pin-slot:nth-child(13) .pin-icon{animation-delay:1.8s}
.tab:nth-child(14) .tab-icon,.pin-slot:nth-child(14) .pin-icon{animation-delay:1.95s}
.tab:nth-child(15) .tab-icon,.pin-slot:nth-child(15) .pin-icon{animation-delay:2.1s}
.tab:nth-child(16) .tab-icon,.pin-slot:nth-child(16) .pin-icon{animation-delay:2.25s}
.pin-icon{display:inline-block;animation:tab-idle 3s ease-in-out infinite}
.tab-label{display:inline}
/* Notification badges nest inside .tab-icon-wrap (not as a plain sibling
   positioned against the whole button) so the badge is always anchored to
   the icon's own corner. Anchoring against the button instead breaks the
   moment icon+label stack vertically (nav-left/right/split/bottom all do
   this) — the button's absolute top/right no longer lines up with the icon
   glyph, which sits vertically centered rather than flush with the
   button's top edge (real bug, 2026-07-27: badges rendered floating above
   the icon instead of on its corner).
   These sidebar/bottom-bar tab buttons are large (48-56px) with plenty of
   margin around the centered icon, so a small negative overhang (sitting
   right at the icon's corner, not tucked fully inside it) never risks the
   overflow:hidden clipping that the much smaller pin-bar/topbar buttons hit
   (2026-07-27: reverted this rule back to the corner-overlap look once it
   was confirmed side/bottom bars were never actually clipped).
   pin-bar/topbar are a DIFFERENT structure (.pin-slot/.ibtn-slot below) —
   those buttons are too small for a same-box badge at any offset: "99+"
   either gets clipped (negative offset escapes the box) or, kept fully
   inside to avoid that, ends up covering the whole icon (real bug,
   2026-07-27 — a 32px button has no room for both a 3-digit badge and the
   icon beside it). Their badge is a sibling of the button instead, so it
   isn't subject to the button's own overflow:hidden at all. */
.tab-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
/* Solid fill (not the translucent --ra-danger-border used elsewhere for
   inline pills) + a background-colored ring for separation — a badge that
   overlaps blurred/busy nav chrome (glass theme's backdrop-filter, or any
   theme's icon glyph underneath it) reads as a barely-visible smudge with a
   low-alpha fill; --ra-danger-strong is a solid hex in every theme. */
/* 2026-08-05 — was background:var(--ra-danger-strong) (light/bright red in
   several themes -> unreadable white text), then a color-mix() attempt that
   turned out unsupported/silently-dropped in the actual app window's
   renderer -> background fell through to transparent -> white text on the
   page's own white/cream bg (real user report both times). Fixed hex now:
   a notification badge is conventionally theme-invariant (same as an iOS
   unread-count badge) and this removes any color-function support risk. */
.tab .badge,.pin-slot .badge,.ibtn-slot .badge{background:var(--ra-danger-strong,var(--ra-danger));color:var(--ra-btn-text);font-weight:700;box-shadow:0 0 0 2px var(--ra-bg),0 0 5px var(--ra-danger);animation:ra-badge-alert 2s ease-in-out infinite}
@keyframes ra-badge-alert{0%,100%{box-shadow:0 0 0 2px var(--ra-bg),0 0 5px var(--ra-danger)}50%{box-shadow:0 0 0 2px var(--ra-bg),0 0 8px 2px var(--ra-danger)}}
@media(prefers-reduced-motion:reduce){.tab .badge,.pin-slot .badge,.ibtn-slot .badge{animation:none}}
.tab .badge{position:absolute;top:-4px;right:-6px;padding:1px calc(5px * var(--ra-density,1));font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1))}
/* top */
body.nav-top #tabs{display:flex;border-bottom:2px solid var(--ra-border);background:var(--ra-bg);padding:0 calc(14px * var(--ra-density,1));overflow-x:auto;scrollbar-width:none}
body.nav-top #tabs::-webkit-scrollbar{display:none}
body.nav-top .tab{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.06em;padding:calc(9px * var(--ra-density,1)) calc(14px * var(--ra-density,1));border-bottom:2px solid transparent;margin-bottom:calc(-2px * var(--ra-density,1));gap:calc(5px * var(--ra-density,1));white-space:nowrap}
body.nav-top .tab.active{border-bottom-color:var(--ra-accent-strong)}
body.nav-top .tab-icon{display:none}
/* nav-top hides the icon glyph entirely (text-only tab bar) — the wrap
   still exists (now just holding the badge), reordered after the label so
   the badge reads "Todos [1]" like it did before badges moved inside the
   icon wrap, instead of "[1] Todos". */
body.nav-top .tab-icon-wrap{order:1}
body.nav-top .tab-label{order:0}
body.nav-top .tab .badge{position:static;margin-left:calc(4px * var(--ra-density,1))}
/* bottom */
/* --ra-module-iframe-bottom-reserve: how much of the viewport's bottom edge
   the fixed #tabs bar occupies in this nav mode — module iframes (data-module
   iframes below, all sized off 100vh) subtract it so nothing inside them
   (a module's own fixed/floating elements — e.g. a RAUI scroll-top FAB) ends
   up rendered in the strip the outer #tabs bar paints over. Real bug,
   2026-07-28: the Jira board's kit FAB sat at the bottom of its iframe's OWN
   viewport, which (nav-bottom active) extended past where #tabs is painted —
   an iframe's content can never win a paint-order fight against the parent
   document's own fixed chrome, no z-index inside the iframe can fix that;
   the iframe box itself has to stay out of that strip. 0px in nav-top/left/
   right/hidden — only nav-bottom and nav-split reserve bottom space. */
:root{--ra-module-iframe-bottom-reserve:0px}
body.nav-bottom{--ra-module-iframe-bottom-reserve:calc(56px + env(safe-area-inset-bottom));padding-bottom:calc(56px + env(safe-area-inset-bottom))}
body.nav-bottom #tabs{position:fixed;bottom:0;left:0;right:0;z-index:var(--ra-z-nav);display:flex;background:var(--ra-bg);border-top:2px solid var(--ra-border);overflow-x:auto;padding-bottom:env(safe-area-inset-bottom);scrollbar-width:none;-webkit-overflow-scrolling:touch}
body.nav-bottom #tabs::-webkit-scrollbar{display:none}
body.nav-bottom .tab{flex:1;min-width:54px;min-height:52px;flex-direction:column;gap:calc(3px * var(--ra-density,1));font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(4px * var(--ra-density,1)) calc(2px * var(--ra-density,1));border-top:2px solid transparent;white-space:nowrap}
body.nav-bottom .tab.active{border-top-color:var(--ra-accent-strong)}
body.nav-bottom .tab-icon{display:block;font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1))}
/* A long label (e.g. "Relationships") on a 7+-tab bottom bar had no overflow
   handling at all — .tab-label's base rule (display:inline, no width/
   overflow) let it spill past its flex item's edge, which the scrollable
   #tabs container then silently clipped mid-word with zero visual sign more
   text (or another tab) existed off-screen (real bug, live-device
   screenshot 2026-08-19: "elationship" instead of "Relationships"). Cap it
   to the tab's own width and ellipsize instead of slicing a word in half. */
body.nav-bottom .tab-label,body.nav-split #tabs .tab-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Scroll-snap so a mid-drag release always rests on a tab boundary — never
   a half-visible tab hanging off the edge with no hint it's scrollable
   (same incident). mask-image fades the trailing edge as a permanent
   "there's more" affordance, cheap and correct whether or not the bar is
   actually overflowing on a given device width. */
body.nav-bottom #tabs{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 18px),transparent 100%)}
body.nav-bottom .tab{scroll-snap-align:start}
/* left / right rails */
/* the rail is a fixed 52px wide; scaling its page padding by density let the page slide under it (found wiring the kit chrome strips, 2026-10-07) */
:root{--ra-rail-w:52px}
body.nav-left{padding-left:var(--ra-rail-w)}
body.nav-right{padding-right:var(--ra-rail-w)}
body.nav-left #tabs,body.nav-right #tabs{position:fixed;top:0;bottom:0;width:52px;z-index:var(--ra-z-nav);display:flex;flex-direction:column;background:var(--ra-bg);overflow-y:auto;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom);scrollbar-width:none}
body.nav-left #tabs::-webkit-scrollbar,body.nav-right #tabs::-webkit-scrollbar{display:none}
body.nav-left #tabs{left:0;border-right:2px solid var(--ra-border)}
body.nav-right #tabs{right:0;border-left:2px solid var(--ra-border)}
body.nav-left .tab,body.nav-right .tab{flex-direction:column;gap:calc(2px * var(--ra-density,1));min-height:50px;padding:calc(6px * var(--ra-density,1)) 1px;width:100%;flex-shrink:0}
body.nav-left .tab{border-left:2px solid transparent}
body.nav-left .tab.active{border-left-color:var(--ra-accent-strong);background:var(--ra-surface-1)}
body.nav-right .tab{border-right:2px solid transparent}
body.nav-right .tab.active{border-right-color:var(--ra-accent-strong);background:var(--ra-surface-1)}
body.nav-left .tab-icon,body.nav-right .tab-icon{display:block;font-size:calc(19px * var(--fsc,1) * var(--ra-fs-scale,1))}
body.nav-left .tab-label,body.nav-right .tab-label{font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:0;max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Mobile fallback: nav-left/nav-right/nav-top all cost a permanent 52px
   strip of a screen that only has ~375-430px to begin with (~13-27% of
   width, gone before any content renders) — fine on desktop, unusable on
   a phone. Below the same 880px breakpoint used everywhere else in this
   file for the desktop/mobile split (matches NAV_SPLIT_MIN_WIDTH in
   core-nav.js), degrade all three into the exact nav-bottom bar instead —
   same fixed full-width strip, same icon-over-label tab shape — so a
   user's saved desktop nav preference never costs them screen width on
   their phone. nav-bottom and nav-hidden are untouched (already mobile-
   shaped / intentionally empty). */
@media(max-width:880px){
  body.nav-left,body.nav-right,body.nav-top{padding-left:0;padding-right:0;--ra-module-iframe-bottom-reserve:calc(56px + env(safe-area-inset-bottom));padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  body.nav-left #tabs,body.nav-right #tabs,body.nav-top #tabs{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;height:auto;flex-direction:row;border-right:none;border-left:none;border-bottom:none;border-top:2px solid var(--ra-border);overflow-x:auto;overflow-y:hidden;padding-top:0;padding-bottom:env(safe-area-inset-bottom)}
  body.nav-left .tab,body.nav-right .tab,body.nav-top .tab{flex:1;flex-direction:column;gap:calc(3px * var(--ra-density,1));min-width:54px;min-height:52px;width:auto;flex-shrink:1;font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:0;padding:calc(4px * var(--ra-density,1)) calc(2px * var(--ra-density,1));margin-bottom:0;border-left:none;border-right:none;border-bottom:none;border-top:2px solid transparent;white-space:nowrap}
  body.nav-left .tab.active,body.nav-right .tab.active,body.nav-top .tab.active{border-left-color:transparent;border-right-color:transparent;border-top-color:var(--ra-accent-strong);background:transparent}
  body.nav-left .tab-icon,body.nav-right .tab-icon,body.nav-top .tab-icon{display:block;font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1))}
  body.nav-left .tab-label,body.nav-right .tab-label,body.nav-top .tab-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  body.nav-left #tabs,body.nav-right #tabs,body.nav-top #tabs{scroll-snap-type:x proximity}
  body.nav-left .tab,body.nav-right .tab,body.nav-top .tab{scroll-snap-align:start}
  body.nav-top .tab-icon-wrap,body.nav-top .tab-label{order:initial}
  body.nav-top .tab .badge{position:absolute;top:-4px;right:-6px;margin-left:0}
  body.nav-right #ra-toasts,body.nav-left #ra-toasts{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(56px + 16px + env(safe-area-inset-bottom,0px))}
  body.nav-right #ra-scrolltop-fab,body.nav-left #ra-scrolltop-fab{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(56px + 16px + env(safe-area-inset-bottom,0px))}
}
/* split (PC-only, user request 2026-07-27): #tabs-left + #tabs-right
   sidebars alongside the existing bottom #tabs bar, tabs divided across all
   three by each TAB_DEFS entry's navGroup. #tabs-right also carries
   #sidebar-right-widgets, an empty rail reserved for future status widgets
   (health, etc.) below its tab buttons. Below NAV_SPLIT_MIN_WIDTH (880px,
   core-nav.js) renderNav() itself falls back to rendering the full tab list
   into #tabs alone (mobile can't spare two 52px rails) — the media query
   below just matches that fallback visually, reusing the nav-bottom look. */
/* Outer gap (user request 2026-07-27, topbar treatment reverted same day —
   insetting the topbar itself with padding-top + border-radius broke sticky
   positioning: content scrolling underneath showed through the inset gap at
   the very top instead of being fully covered, "looks terrible when I
   scroll down"). Topbar stays exactly like every other nav mode: flush,
   full-width, sticky top:0, no radius. Only the two sidebars + bottom bar
   get inset from the viewport edge by --ra-gap, and the sidebar starts
   FLUSH under the topbar (no added gap there) so its first tab button
   lines up with the topbar's bottom edge instead of floating below it. */
:root{--ra-gap:10px;--ra-sidebar-top-extra:0px;--ra-bottom-extra:0px}
body.nav-split{--ra-module-iframe-bottom-reserve:calc(56px + var(--ra-gap) * 2 + env(safe-area-inset-bottom));padding-left:calc(52px + var(--ra-gap) * 2);padding-right:calc(52px + var(--ra-gap) * 2);padding-bottom:calc(56px + var(--ra-gap) * 2 + env(safe-area-inset-bottom))}
/* top: topbar-h + --ra-sidebar-top-extra (user-draggable, core-lookup.js
   _sidebarTopHandleMouseDown; default 0 = flush under topbar). bottom:
   --ra-gap + --ra-bottom-extra (user-draggable, same file), moves ONLY the
   sidebar — an earlier version also shifted the bottom #tabs bar to stay
   aligned, which the user didn't want ("why it also drag the bottom bar");
   the bottom bar now stays fixed at var(--ra-gap), unaffected. --ra-gap
   itself is a fixed constant, not draggable (dragging the corner brackets
   for it risked grabbing the browser window's own chrome — removed). */
body.nav-split #tabs-left,body.nav-split #tabs-right{position:fixed;top:calc(var(--topbar-h,54px) + var(--ra-sidebar-top-extra,0px));bottom:calc(var(--ra-gap) + var(--ra-bottom-extra,0px));width:52px;z-index:9;display:flex;flex-direction:column;background:var(--ra-bg);overflow-y:auto;padding-top:calc(6px * var(--ra-density,1));padding-bottom:env(safe-area-inset-bottom);border-radius:0 0 10px 10px;scrollbar-width:none}
body.nav-split #tabs-left::-webkit-scrollbar,body.nav-split #tabs-right::-webkit-scrollbar{display:none}
body.nav-split #tabs-left{left:var(--ra-gap);border-right:2px solid var(--ra-border)}
body.nav-split #tabs-right{right:var(--ra-gap);border-left:2px solid var(--ra-border)}
/* flex:1 (not flex-shrink:0) — tabs stretch to fill the rail's full height,
   same idea as the bottom bar's tabs stretching to fill its full width
   (user request 2026-07-27), instead of stacking at a fixed size and
   leaving empty rail below the last tab. */
body.nav-split #tabs-left .tab,body.nav-split #tabs-right .tab{flex:1;flex-direction:column;gap:calc(2px * var(--ra-density,1));min-height:50px;padding:calc(6px * var(--ra-density,1)) 1px;width:100%}
body.nav-split #tabs-left .tab{border-left:2px solid transparent}
body.nav-split #tabs-left .tab.active{border-left-color:var(--ra-accent-strong);background:var(--ra-surface-1)}
body.nav-split #tabs-right .tab{border-right:2px solid transparent}
body.nav-split #tabs-right .tab.active{border-right-color:var(--ra-accent-strong);background:var(--ra-surface-1)}
body.nav-split #tabs-left .tab-icon,body.nav-split #tabs-right .tab-icon{display:block;font-size:calc(19px * var(--fsc,1) * var(--ra-fs-scale,1))}
body.nav-split #tabs-left .tab-label,body.nav-split #tabs-right .tab-label{font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:0;max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* flex:0 0 auto (not flex:1) while empty, so it doesn't steal stretch space
   from the tab buttons above it (they now flex:1 to fill the rail's full
   height) — a future widget's own content will size this rail naturally. */
#sidebar-right-widgets{flex:0 0 auto;min-height:0}
body.nav-split #tabs{position:fixed;bottom:var(--ra-gap);left:calc(52px + var(--ra-gap) * 2);right:calc(52px + var(--ra-gap) * 2);z-index:var(--ra-z-nav);display:flex;background:var(--ra-bg);border-top:2px solid var(--ra-border);border-radius:var(--ra-radius-lg);overflow-x:auto;padding-bottom:env(safe-area-inset-bottom);scrollbar-width:none;-webkit-overflow-scrolling:touch}
body.nav-split #tabs::-webkit-scrollbar{display:none}
body.nav-split #tabs .tab{flex:1;min-width:54px;min-height:52px;flex-direction:column;gap:calc(3px * var(--ra-density,1));font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(4px * var(--ra-density,1)) calc(2px * var(--ra-density,1));border-top:2px solid transparent;white-space:nowrap}
body.nav-split #tabs .tab.active{border-top-color:var(--ra-accent-strong)}
body.nav-split #tabs .tab-icon{display:block;font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1))}
/* mobile fallback: renderNav() puts the full tab list back into #tabs alone
   below NAV_SPLIT_MIN_WIDTH — mirror that here so the sidebars collapse and
   the bottom bar spans full width, matching plain nav-bottom. */
@media(max-width:880px){
  body.nav-split{--ra-module-iframe-bottom-reserve:calc(56px + env(safe-area-inset-bottom));padding-left:0;padding-right:0;padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  body.nav-split #tabs-left,body.nav-split #tabs-right{display:none}
  body.nav-split #tabs{bottom:0;left:0;right:0;border-radius:0}
  .ra-corner,.ra-sidebar-drag{display:none!important}
}
/* Toast stack (kit default in ra-ui.css: right 16px, bottom 72px) sits
   under this dashboard's own right icon rail (#tabs-right) and/or floating
   bottom nav (#tabs) in nav-split/nav-right/nav-bottom — nudge left/up by
   exactly what those bars already reserve via their own padding above,
   so the stack clears them instead of overlapping (user request
   2026-07-27). */
body.nav-split #ra-toasts{right:calc(52px + var(--ra-gap) * 2 + 16px + env(safe-area-inset-right,0px));bottom:calc(56px + var(--ra-gap) * 2 + 16px + env(safe-area-inset-bottom,0px))}
body.nav-right #ra-toasts{right:calc(52px + 16px + env(safe-area-inset-right,0px))}
body.nav-bottom #ra-toasts{bottom:calc(56px + 16px + env(safe-area-inset-bottom,0px))}
@media(max-width:880px){
  body.nav-split #ra-toasts{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(56px + 16px + env(safe-area-inset-bottom,0px))}
}
/* Same reasoning, same fix, for the kit's scroll-to-top FAB (RAUI.
   initScrollTopFab, called in boot.js) — kit default is right/bottom 16px,
   which sits right inside where #tabs-right/#tabs (bottom) paint in
   nav-split/nav-right/nav-bottom. Real bug, 2026-07-28: this was caught on
   the embedded Jira board (module-iframe height, fixed separately above),
   but the SAME overlap exists for this top-level dashboard's own FAB in
   these nav modes — the iframe fix doesn't cover a fixed element in the
   OUTER document. */
body.nav-split #ra-scrolltop-fab{right:calc(52px + var(--ra-gap) * 2 + 16px + env(safe-area-inset-right,0px));bottom:calc(56px + var(--ra-gap) * 2 + 16px + env(safe-area-inset-bottom,0px))}
body.nav-right #ra-scrolltop-fab{right:calc(52px + 16px + env(safe-area-inset-right,0px))}
body.nav-bottom #ra-scrolltop-fab{bottom:calc(56px + 16px + env(safe-area-inset-bottom,0px))}
@media(max-width:880px){
  body.nav-split #ra-scrolltop-fab{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(56px + 16px + env(safe-area-inset-bottom,0px))}
}
/* Uniform toast width + smaller text (kit default: width auto up to 340px,
   font --ra-fs-md — reads as a ragged stack of different-sized pills with
   several stacked; user request 2026-07-27). Fixed width so every toast in
   the stack lines up; long titles wrap instead of stretching the pill. */
#ra-toasts .ra-toast{width:260px;max-width:min(260px,86vw);font-size:var(--ra-fs-sm)}
/* Pop in/out (kit default: plain 8px rise + fade in, 6px sink + fade out —
   flat, easy to miss; user request 2026-07-27). Entrance scales up from
   82% + slides in from the right + a touch of rotation, riding the kit's
   --ra-spring curve for a snappy overshoot "pop." Exit reverses direction
   (shrink + slide right + fade) so it reads as flying back off toward the
   corner it came from, instead of just sinking in place. No explicit
   reduced-motion guard needed — durations ride var(--ra-motion), which the
   kit's own global reduced-motion block (ra-ui.css) already zeroes to 0s,
   the same killswitch every other kit animation relies on. */
@keyframes ra-toast-pop-in{
  0%   {transform:translateX(36px) scale(.82) rotate(3deg);opacity:0}
  60%  {transform:translateX(-4px) scale(1.03) rotate(-.5deg);opacity:1}
  100% {transform:none;opacity:1}
}
#ra-toasts .ra-toast{
  animation:ra-toast-pop-in calc(var(--ra-motion) * 3.2) var(--ra-spring, var(--ra-ease));
  transform-origin:100% 100%;
}
#ra-toasts .ra-toast.out{
  transform:translateX(48px) scale(.8) rotate(4deg);
  opacity:0;
  transition:all calc(var(--ra-motion) * 2.4) var(--ra-ease);
}
/* Corner brackets — PURELY decorative accents for the 4 gap corners
   nav-split's outer-gap treatment leaves empty (user request 2026-07-27).
   HUD-style L brackets rather than a filled shape, so they read as an
   intentional frame instead of clutter; hidden outside nav-split. Reverted
   2026-07-27 from an earlier version that made these drag handles for
   --ra-gap — the top two sat at the literal viewport-corner pixel (2,2),
   which risked grabbing the browser window's own edge/chrome instead of
   the page ("resize the whole fucking page"). pointer-events:none so they
   can never intercept a click/drag meant for the page underneath. The
   actual drag control is now .ra-sidebar-drag below, positioned well
   inside the content area. */
/* Reworked 2026-07-27 ("the corner decor too boring") — plain flat L was a
   static two-line glyph; now a HUD scanner-reticle: the two lines get an
   accent glow (drop-shadow) plus a breathing pulse, and the div's own
   background draws a small glowing dot right at the corner vertex (radial-
   gradient, no extra element needed — ::before/::after are already spoken
   for by the two lines) so it reads like an active target lock, not a
   printed bracket. Same 2.4s pulse cycle as the topbar's other ambient fx
   (.pulse's blink) for visual consistency. */
.ra-corner{display:none;position:fixed;width:16px;height:16px;z-index:var(--ra-z-panel);pointer-events:none;filter:drop-shadow(0 0 3px var(--ra-accent-strong));animation:ra-corner-pulse 2.4s ease-in-out infinite}
body.nav-split .ra-corner{display:block}
@keyframes ra-corner-pulse{0%,100%{opacity:.45}50%{opacity:1}}
.ra-corner::before,.ra-corner::after{content:"";position:absolute;background:var(--ra-accent-strong);border-radius:1px}
.ra-corner::before{width:16px;height:2px}
.ra-corner::after{width:2px;height:16px}
.ra-corner-tl{top:2px;left:2px;background:radial-gradient(circle at 0 0,var(--ra-accent-strong) 0 3px,transparent 5px)}
.ra-corner-tl::before,.ra-corner-tl::after{top:0;left:0}
.ra-corner-tr{top:2px;right:2px;background:radial-gradient(circle at 100% 0,var(--ra-accent-strong) 0 3px,transparent 5px)}
.ra-corner-tr::before,.ra-corner-tr::after{top:0;right:0}
.ra-corner-bl{bottom:var(--ra-gap,10px);left:var(--ra-gap,10px);background:radial-gradient(circle at 0 100%,var(--ra-accent-strong) 0 3px,transparent 5px)}
.ra-corner-bl::before,.ra-corner-bl::after{bottom:0;left:0}
.ra-corner-br{bottom:var(--ra-gap,10px);right:var(--ra-gap,10px);background:radial-gradient(circle at 100% 100%,var(--ra-accent-strong) 0 3px,transparent 5px)}
.ra-corner-br::before,.ra-corner-br::after{bottom:0;right:0}
/* Sidebar-start drag handle (user request 2026-07-27, made obvious the
   same day — the first version was an 8px sliver at 50% opacity that blended
   straight into the border and was impossible to find/grab). Now a solid,
   full-width, colored bar with a visible "⋮⋮⋮" grip glyph, so it reads as
   an actual control rather than decoration. Sits INSIDE the content area
   (spans the sidebar's own 52px width, at its top edge), not at the
   viewport corner. Drag up/down to move --ra-sidebar-top-extra; both
   sidebars share the one var so they move together. */
.ra-sidebar-drag{display:none;position:fixed;top:calc(var(--topbar-h,54px) + var(--ra-sidebar-top-extra,0px));width:52px;height:16px;z-index:var(--ra-z-sticky-raised);cursor:ns-resize;background:var(--ra-accent-bg,var(--ra-surface-2));border:1px solid var(--ra-accent-strong);border-radius:var(--ra-radius-sm);box-shadow:var(--ra-shadow-1);align-items:center;justify-content:center;color:var(--ra-accent-strong);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1;letter-spacing:2px}
.ra-sidebar-drag::before{content:"⋮⋮⋮"}
.ra-sidebar-drag:hover{background:var(--ra-accent-strong);color:var(--ra-bg)}
body.nav-split .ra-sidebar-drag{display:flex}
#ra-sidebar-drag-left{left:var(--ra-gap,10px)}
#ra-sidebar-drag-right{right:var(--ra-gap,10px)}
/* Bottom handle — same idea, other end (user request 2026-07-27: "i cant
   drag from the bottom"). Positioned via `bottom` instead of `top`, moves
   --ra-bottom-extra which only the SIDEBAR reads — the bottom #tabs bar
   stays fixed (see note above; an earlier version moved both together,
   which the user didn't want). */
.ra-sidebar-drag-bottom{top:auto;bottom:calc(var(--ra-gap) + var(--ra-bottom-extra,0px))}
#ra-sidebar-drag-bottom-left{left:var(--ra-gap,10px)}
#ra-sidebar-drag-bottom-right{right:var(--ra-gap,10px)}
/* live px readout while dragging the sidebar-start handle (core-lookup.js) */
.ra-gap-drag-label{position:fixed;z-index:var(--ra-z-fab);background:var(--ra-surface-1);border:1px solid var(--ra-accent-strong);color:var(--ra-accent);border-radius:var(--ra-radius-sm);padding:calc(2px * var(--ra-density,1)) calc(6px * var(--ra-density,1));font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-family:var(--font-set);pointer-events:none}
/* hidden */
body.nav-hidden #tabs,body.nav-hidden #tabs-left,body.nav-hidden #tabs-right{display:none}
body.nav-hidden{padding-left:0!important;padding-right:0!important;padding-bottom:0!important}
/* ── pin-bar (pinned tab shortcuts in topbar) ── */
#pin-bar{display:flex;align-items:center;gap:calc(5px * var(--ra-density,1));position:relative}
/* .pin-slot wraps button+badge as SIBLINGS (core-nav.js renderPinBar) — the
   button alone carries .ra-ripple, so the badge sitting outside it entirely
   escapes that button's own overflow:hidden and can overhang the corner
   freely, instead of needing to fit inside a 32x30 box (see the long
   comment above .tab-icon-wrap for why that was a dead end at "99+"). This
   is now the flex item in #pin-bar (replaces .pin-btn for that role). */
.pin-slot{position:relative;display:inline-flex}
.pin-btn{border-radius:var(--ra-radius-md);cursor:pointer;font-size:calc(15px * var(--fsc,1) * var(--ra-fs-scale,1));min-width:32px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;line-height:1;background:transparent}
.pin-btn.active{box-shadow:inset 0 0 0 1px currentColor}
.pin-slot .badge{position:absolute;top:-4px;right:-4px;padding:1px calc(4px * var(--ra-density,1));font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));border:none}
/* Pinboard toggle (priority-features-spec.md §4) — generic pass injects one
   of these onto every [id$="-panel"]'s .cell (see _injectPinToggles). Not
   to be confused with .pin-btn above (that's the unrelated tab-pin-bar). */
.pin-toggle-btn{color:var(--ra-text-faint);transition:transform .12s}
.pin-toggle-btn:hover{transform:scale(1.15)}
.pin-toggle-btn.pinned{color:var(--ra-accent-strong)}
.pin-mirror-card{position:relative}
/* ── icon buttons (topbar) — each gets a distinct accent ── */
.ibtn{border-radius:var(--ra-radius-md);cursor:pointer;font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1));min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-family:var(--font-body)}
/* .ibtn-slot wraps #btn-events + its badge as SIBLINGS (index.html) — same
   fix as .pin-slot above: .ibtn carries .ra-ripple (overflow:hidden, to
   contain its click effect), and a 30x30 button has no room to hold both
   the 🔔 glyph and a "99+" badge in the same clipped box — either the
   badge got clipped (negative offset) or, kept inside to avoid that, ended
   up covering the whole glyph. The badge lives outside the button now, so
   it isn't subject to that overflow:hidden at all. */
.ibtn-slot{position:relative;display:inline-flex}
.ibtn-slot .badge{position:absolute;top:-4px;right:-4px;padding:1px calc(4px * var(--ra-density,1));font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));border:none}
#btn-settings{background:var(--ra-surface-2);border:1px solid var(--ra-text-muted);color:var(--ra-text-mid)}
/* ── section name tags ── */
.sec-name{display:none;position:absolute;top:1px;right:4px;font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-accent-strong);background:var(--ra-accent-bg);border:1px solid var(--ra-accent-border);border-radius:var(--ra-radius-sm);padding:0 calc(4px * var(--ra-density,1));letter-spacing:.05em;z-index:5;pointer-events:none;font-family:var(--font-set);white-space:nowrap;max-width:none}
body.show-secnames .sec-name{display:block}
#hero,#meals-strip,#tabs,.cell,.cell-span{position:relative}
.anl-btn{background:var(--ra-surface-3);border:1px solid var(--ra-accent-border);color:var(--ra-text-faint);font-family:var(--font-set);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(3px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border-radius:var(--ra-radius-sm);cursor:pointer}
.anl-btn.active{background:var(--ra-accent-bg);color:var(--ra-accent);border-color:var(--ra-accent-strong)}

/* ── main layout (v37: more breathing room between stacked sections) ──
   .cell/.cell-span are transparent so body's real backdrop (grid, gradient,
   ambient drift, whatever the active theme uses) shows through everywhere,
   not just the gaps between sections. This is RE-APPLIED after an earlier
   revert — that revert was overcautious: the illegible-text bug it was
   guarding against turned out to be a manual color override (fixed
   separately via RAUI.checkContrastSafety), not this transparency change.
   kit/scripts/check-tokens.py now proves this is safe: it checks --ra-text
   against the WORST color anywhere in each theme's body backdrop (every
   gradient stop included, not just the flat --ra-bg) and every one of the
   43 shipped themes clears 4.5:1 — meaning text sitting directly on the
   backdrop, worst case, stays legible everywhere. Re-run that lint before
   ever touching this again. */
.cell{background:transparent;padding:calc(16px * var(--ra-density,1))}
/* .cell is also used as a CSS Grid item (#triggers-body), which relies on
   .cell's own opaque background for its border-via-gap trick (parent grid
   has --ra-border fill, 1px gaps between opaque .cell children read as thin
   border lines) — that one spot needs to stay solid or the "lines" vanish */
#triggers-body .cell{background:var(--ra-bg,var(--ra-bg))}
/* .cell-span never got the same opaque-fill treatment as .cell above, AND it
   carries its own margin:calc(10px * var(--ra-density,1)) 0 (meant for normal page flow, where it exposes
   the true page backdrop between stacked sections — fine there). Inside this
   grid specifically, that combination meant a fully transparent cell PLUS a
   10px margin gap on top of the grid's own 1px gap, all showing the grid's
   flat background with nothing readable as a card boundary — reads as a
   thick black bar (2026-07-28 bug report). Give .cell-span the same solid
   fill + drop its margin/border-top here so it behaves like a plain .cell:
   one clean 1px seam from the grid gap, no double gap. */
#triggers-body .cell-span{background:var(--ra-bg,var(--ra-bg));margin:0;border-top:none}
/* finances-tab-ideas.md #67 (2026-07-30): Finances' Overview sub-tab uses
   plain .cell (16px padding, no margin/border); Patterns and Transactions
   used .cell.cell-span (16/18px padding PLUS margin:calc(10px * var(--ra-density,1)) 0 + border-top) —
   switching sub-tabs shifted the content's left/top edge and added a rule
   line with nothing to separate from. Same override idiom as #triggers-body
   above: neutralize cell-span's page-flow-only margin/border and match
   .cell's padding, so the FIRST panel in each sub-tab sits flush under the
   sticky finances-subtab-nav bar like Overview's .cell panels do. */
#finances-subtab-patterns .cell-span,
#finances-subtab-transactions .cell-span{margin:0;border-top:none;padding:calc(16px * var(--ra-density,1))}
/* Patterns gained a second stacked panel (#9, same day) — restore a gap
   between panels (but not above the first) now that "flush with the top"
   and "separated from each other" are both needed at once. */
#finances-subtab-patterns .cell-span + .cell-span{margin-top:calc(10px * var(--ra-density,1))}
/* .cell is also a plain stacked block sitting directly under the Todos tab's
   sticky subtab-nav with zero exposed backdrop between them */
#tab-todos .cell{margin-top:calc(10px * var(--ra-density,1))}

/* Cabinet layout polish: dense controls wrap predictably and repeated records
   use the same theme-aware surfaces, contrast, radius, and shadow contract. */
#tab-food .food-add-form{padding-block:calc(14px * var(--ra-density,1))}#tab-food #food-filter-bar{align-items:center;gap:calc(7px * var(--ra-density,1))}#tab-food #food-filter-bar>.idea-filter-pill{padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1));min-height:34px}
#tab-food #food-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:calc(10px * var(--ra-density,1));align-items:start}#tab-food #food-panel>.proj-card{height:auto;min-height:0;padding:calc(12px * var(--ra-density,1))}#tab-food #food-panel>.proj-card .idea-card-title{align-items:flex-start;line-height:1.3}#tab-food #food-panel>.proj-card>input[placeholder="Notes…"]{min-height:34px;background:var(--ra-input-bg)!important;color:var(--ra-input-text)!important}#tab-food #food-panel>.proj-card>div[style*="flex-wrap"]{gap:calc(5px * var(--ra-density,1))!important}
@container pane (max-width:700px){#tab-food #food-panel{grid-template-columns:1fr}}
#tab-todos #todos-subtab-nav{gap:calc(7px * var(--ra-density,1));padding:calc(10px * var(--ra-density,1)) calc(16px * var(--ra-density,1));align-items:center}#tab-todos #todos-subtab-nav .todos-subtab-btn{min-height:36px;padding:calc(7px * var(--ra-density,1)) calc(12px * var(--ra-density,1))!important;white-space:nowrap}#tab-todos #todos-subtab-nav .todo-controls{flex:1 1 100%;margin-left:0;display:flex;justify-content:flex-end;gap:calc(7px * var(--ra-density,1));flex-wrap:wrap;padding-top:calc(3px * var(--ra-density,1));border-top:1px solid var(--ra-divider)}#tab-todos #todos-subtab-nav .todo-controls #todo-filter{flex:1 1 220px;width:auto;min-width:180px;min-height:36px}#tab-todos #todo-rules-slot{max-width:960px}/* 2026-09-23, user report ("layout not look good on wide screen, too many
   empty space") — the single-column list (app.css's Todos redesign,
   `[id^="todo-list-"]{display:flex;flex-direction:column}`) has no width
   cap of its own, so on a wide monitor each row's actual content
   (checkbox + title + one line of meta) sits in a narrow left sliver
   while the rest of the row's divider line stretches into dead space.
   Reference apps (Things 3, Todoist desktop) all cap their list column
   to a comfortable reading width instead of stretching a single-column
   list edge-to-edge — matches the 1100px cap this tab's own quickadd/
   stats blocks already use, just above this rule.
   The old `[id^="todo-list-"] .todo-row{padding:calc(12px * var(--ra-density,1)) calc(14px * var(--ra-density,1))}` override
   here predates that redesign (from the v37b multi-column CARD grid,
   when each row needed generous card padding) and had higher specificity
   than the redesign's own `.todo-row{padding:calc(9px * var(--ra-density,1)) calc(4px * var(--ra-density,1))}` base rule (an ID
   selector beats a bare class regardless of source order) — silently
   overriding the new tighter row padding this whole time. Dropped along
   with the width fix rather than left to re-fight a future padding
   change the same way. */
#tab-todos [id^="todo-list-"]{max-width:1100px}
/* Narrow-pane .todo-controls: filter input + sort select stay full-width
   (typing/reading benefit from the space), but the 4 action buttons
   (compact/+Add/Export/Select) used to ALSO get flex:1 1 100% — four
   full-width stacked buttons ate ~280px of vertical space on a phone for
   what's fundamentally a row of small toggles. Pair them 2-per-row instead
   (real complaint, live-device screenshot 2026-08-18: "too much" chrome
   above the actual todo list). */
@container pane (max-width:700px){#tab-todos #todos-subtab-nav{padding-inline:calc(10px * var(--ra-density,1))}#tab-todos #todos-subtab-nav .todo-controls{justify-content:stretch}#tab-todos #todos-subtab-nav .todo-controls>input,#tab-todos #todos-subtab-nav .todo-controls>select{flex:1 1 100%}#tab-todos #todos-subtab-nav .todo-controls>button{flex:1 1 calc(50% - 4px)}}
#ideas-panel>.proj-card,#activities-panel>.proj-card{height:auto;min-height:0}#ideas-panel select,#ideas-panel input,#ideas-panel textarea,#activities-panel select,#activities-panel input,#activities-panel textarea,#bookmarks-panel select{background:var(--ra-input-bg)!important;color:var(--ra-input-text,var(--ra-text))!important;border-color:var(--ra-input-border,var(--ra-border-strong))!important}#ideas-panel .mini-btn,#activities-panel .mini-btn{background:var(--ra-surface-2)!important;border:1px solid var(--ra-border-strong)!important;box-shadow:var(--ra-control-shadow,none)}
#activities-filter-bar .idea-filter-pill[aria-pressed="true"]{background:var(--ra-accent-bg)!important;color:var(--ra-accent-strong,var(--ra-accent))!important;border-color:var(--ra-accent-strong)!important}#activities-filter-bar .idea-filter-pill{min-height:32px;padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}#activities-panel .proj-card{padding:calc(12px * var(--ra-density,1));min-height:0}
/* margin (not padding) so real gaps between stacked sections expose the
   true page backdrop underneath */
.cell-span{background:transparent;padding:calc(16px * var(--ra-density,1)) calc(18px * var(--ra-density,1));margin:calc(10px * var(--ra-density,1)) 0;border-top:1px solid var(--ra-surface-2,var(--ra-surface-2))}
/* Single column (2026-07-28) — used to be 2 cols to fit a "Context" sidebar
   cell alongside the trigger grid; that cell was removed per user request
   (System tab no longer needs it), leaving only channels+trigger-grid, both
   meant to be full-width. Keeping 2 cols here left the 2nd column of every
   row empty, showing the grid's own flat background as a solid black block
   next to the trigger table — a second, distinct instance of the same
   "gap" bug report as the .cell-span fix below. */
#triggers-body{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ra-surface-2)}
h4{font-family:var(--ra-font-display,inherit);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ra-text-dim);margin-bottom:calc(12px * var(--ra-density,1));padding-bottom:calc(6px * var(--ra-density,1));border-bottom:1px solid var(--ra-divider)}

/* ── attention panel ── */
.attn-section{margin-bottom:calc(14px * var(--ra-density,1))}
.attn-section:last-child{margin-bottom:0}
.attn-label{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));text-transform:uppercase;letter-spacing:.1em;color:var(--ra-text-muted);margin-bottom:calc(6px * var(--ra-density,1))}
.alert-card{display:flex;align-items:flex-start;gap:calc(8px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border-radius:var(--ra-radius-md);margin-bottom:calc(5px * var(--ra-density,1));border-left:3px solid}
.alert-card.warn{background:var(--ra-warn-bg);border-color:var(--ra-warn-strong)}
.alert-card.danger{background:var(--ra-danger-bg);border-color:var(--ra-danger-strong)}
.alert-card.info{background:var(--ra-info-bg);border-color:var(--ra-accent-strong)}
.alert-card.msg{background:var(--ra-purple-bg);border-color:var(--ra-purple)}
.alert-icon{font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1));flex-shrink:0;line-height:1}
.alert-body{min-width:0}
.alert-title{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;color:var(--ra-text-bright);margin-bottom:calc(2px * var(--ra-density,1))}
.alert-sub{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v37 hierarchy pass: hot-card is informational (already-fired / coming-soon),
   not a warning — it was borrowing .alert-card's warn-orange language and
   competing visually with genuinely urgent items. Neutral surface now, color
   reserved for things that actually need attention. */
.hot-card{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));padding:calc(6px * var(--ra-density,1)) calc(9px * var(--ra-density,1));border-radius:var(--ra-radius-sm);margin-bottom:calc(4px * var(--ra-density,1));background:var(--ra-surface-2);border:1px solid var(--ra-border)}
.hot-trigger{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);font-weight:600}
.hot-time{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);margin-left:auto;flex-shrink:0}
.todo-item{display:flex;gap:calc(7px * var(--ra-density,1));padding:calc(4px * var(--ra-density,1)) 0;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);border-bottom:1px solid var(--ra-divider);align-items:flex-start}
.todo-dot{color:var(--ra-danger-strong);flex-shrink:0;margin-top:calc(2px * var(--ra-density,1))}

/* ── Todos tab ── */
.todo-controls{display:flex;gap:calc(6px * var(--ra-density,1));align-items:center;margin-left:auto}
#todo-filter{background:var(--ra-surface-1);border:1px solid var(--ra-border);color:var(--ra-text);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-sm);font-family:var(--font-set);width:140px}
#todo-density-toggle{background:var(--ra-surface-3);border:1px solid var(--ra-accent-border);color:var(--ra-text-dim);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(3px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-sm);cursor:pointer}
#todo-density-toggle.active{color:var(--ra-text);border-color:var(--ra-accent-strong)}
/* 2026-09-21 fix — real bug, found by actually loading the page in a
   headless browser at a 390px mobile viewport and reading computed styles
   (not from tracing the CSS source): .todo-pick was a flex ROW with three
   children on one line — the label span, the embedded .todo-row (badge +
   title + 5 action buttons), and .todo-pick-reason. A first attempt just
   added flex-wrap + a flex-basis to give the row "more room to fight
   over", but computed styles showed the real problem: even alone against
   the label, the row's own badge + 136px-wide action-button cluster ate
   nearly all its available width, computing .todo-row-body to 0px and
   wrapping the title one word per line into the leftover sliver — no
   flex-basis tweak fixes that, the row plus label were never going to fit
   on one line at this width. Stacking the label ABOVE the card (column,
   not row) removes the competition entirely: the row always gets the
   card's full width regardless of viewport. Verified via a real
   before/after screenshot, not just re-reading the rule. */
.todo-pick{display:flex;flex-direction:column;gap:calc(4px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border-radius:var(--ra-radius-md);margin-bottom:calc(10px * var(--ra-density,1));background:var(--ra-surface-3);border:1px solid var(--ra-accent-strong)}
.todo-pick-label{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;text-transform:uppercase;color:var(--ra-accent)}
.todo-unparsed{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-warn);background:var(--ra-warn-bg);border:1px solid var(--ra-warn-border);border-radius:var(--ra-radius-sm);padding:calc(6px * var(--ra-density,1)) calc(9px * var(--ra-density,1));margin-bottom:calc(8px * var(--ra-density,1))}
.todo-parse-error{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-danger);background:var(--ra-danger-bg);border:1px solid var(--ra-danger-border);border-radius:var(--ra-radius-sm);padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
.todo-sec-count{color:var(--ra-text-muted);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;text-transform:uppercase}
/* ── 2026-09-23 redesign (user: "take reference on some app for a good
   design") ──
   The v37 multi-column card grid (each todo boxed in a bordered/shadowed/
   notch-cut "card", tiled 2-4 across) is gone. Reference: Things 3 /
   Linear / Todoist all render tasks as a single-column LIST — one row per
   task, a leading checkbox, quiet single-line metadata, no per-row card
   chrome competing with the content for attention. Rebuilt to that
   pattern rather than patching the card look further:
   - display:flex column, not a multi-column grid — rows read top-to-
     bottom in one scan line, the way every reference app does it.
   - .todo-row is a plain row with a bottom divider + left priority strip,
     not a bordered/shadowed/radius'd "card" — no hover lift, no corner-
     notch, no dog-ear, no dashed-border "torn paper" effect. Those were
     all decorative additions on top of the card metaphor; once the card
     metaphor itself is gone they have nothing to attach to.
   - the primary action (done / restore) leads the row in its own
     .todo-row-check slot instead of being buried in a 5-icon cluster —
     see render-todos.js's _todoRowHtml.
   - secondary actions (edit/cancel/archive/delete) don't render on the
     row at all — moved to the detail modal, see .todo-modal-actions below.
   - meta fields (due/category/etc) are quiet dot-separated text, not a
     row of background-filled pill chips (badges keep their pill treatment
     — they're real status signals, not incidental metadata). */
[id^="todo-list-"]{display:flex;flex-direction:column}
[id^="todo-list-"] .todo-sec-count,[id^="todo-list-"] .todo-cost-rollup,[id^="todo-list-"] .todo-no-match,[id^="todo-list-"] .todo-row-editing{margin-top:calc(4px * var(--ra-density,1))}
.todo-pick{
  --ra-notch:14px;
  clip-path:polygon(0 0,calc(100% - var(--ra-notch)) 0,100% var(--ra-notch),100% 100%,0 100%);
  background-image:linear-gradient(45deg,transparent calc(50% - 3px),var(--ra-notch-line,var(--ra-divider)) calc(50% - 3px),var(--ra-notch-line,var(--ra-divider)) 50%,transparent 50%);
  background-repeat:no-repeat;
  background-position:top right;
  background-size:var(--ra-notch) var(--ra-notch);
  background-origin:border-box;
  background-clip:border-box;
  --ra-notch-line:var(--ra-accent-strong);
}
.todos-subtab-btn{
  --ra-notch:7px;--ra-notch-line:var(--ra-text-muted);
  clip-path:polygon(0 0,calc(100% - var(--ra-notch)) 0,100% var(--ra-notch),100% 100%,0 100%);
  background-image:linear-gradient(45deg,transparent calc(50% - 2px),var(--ra-notch-line) calc(50% - 2px),var(--ra-notch-line) 50%,transparent 50%)!important;
  background-repeat:no-repeat!important;
  background-position:top right!important;
  background-size:var(--ra-notch) var(--ra-notch)!important;
  background-origin:border-box!important;
  background-clip:border-box!important;
}
/* soft-UI themes (Neumorph) have no border line — clip-path leaves a flat
   dead patch at the cut corner with neither border nor shadow. Opt out
   back to a normal rounded shape. */
body.t-neumorph .todo-pick,
body.t-neumorph .todos-subtab-btn{clip-path:none!important;background-image:none!important}
/* user-toggleable fx (Settings → Todos Card Style) — .todo-pick is the
   only element left in this file the notch/dogear/torn toggles still
   apply to; the plain list rows below never had them to begin with. */
body.ra-fx-notch-off .todo-pick,
body.ra-fx-notch-off .todos-subtab-btn{clip-path:none!important;background-image:none!important}
/* ── the list row itself ── flat, divided, no card chrome. */
.todo-row{
  display:flex;align-items:flex-start;gap:calc(6px * var(--ra-density,1));
  padding:calc(9px * var(--ra-density,1)) calc(4px * var(--ra-density,1));
  border-bottom:1px solid var(--ra-divider);
  border-left:3px solid transparent;
  transition:background var(--ra-motion,.15s) var(--ra-ease),border-left-color var(--ra-motion,.15s) var(--ra-ease);
}
.todo-row:hover{background:var(--ra-surface-2)}
/* priority strip colors — overdue uses the same calm amber as the badge
   below (Things 3's deliberate no-guilt-trip-red choice for overdue items),
   not alarm-red; blocked/nearby get their own family. A plain open task
   has no strip color at all (transparent above) — color is reserved for
   rows that actually need attention. */
.todo-row.todo-row-overdue{border-left-color:var(--ra-warn-strong)}
.todo-row.todo-row-blocked{border-left-color:var(--ra-purple)}
.todo-row.todo-row-nearby{border-left-color:var(--ra-ok-strong)}
/* leading checkbox slot — always visible, never hover-hidden, since it's
   the row's primary action. */
.todo-row-check{flex-shrink:0;padding-top:1px}
.todo-row-body{flex:1;min-width:0}
.todo-row-titleline{display:flex;align-items:baseline;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap}
.todo-row-badges{display:flex;gap:calc(4px * var(--ra-density,1));flex-shrink:0}
.todo-row-title{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;color:var(--ra-text);line-height:1.4;transition:opacity var(--ra-motion,.15s) var(--ra-ease)}
.todo-row-title:active{opacity:.6}
/* generic opt-in for small inline clickable icons/text/chips that don't
   warrant their own bespoke rule (motion-adoption backlog: :active gap) */
.ra-mini-clickable{transition:opacity var(--ra-motion,.15s) var(--ra-ease)}
.ra-mini-clickable:active{opacity:.5}
/* a long detail (multi-step plans, analysis notes) is clamped to 3 lines
   with an ellipsis — the full text still lives in the detail modal
   (showBacklinks); this stays a plain truncation (not a clip on
   data-todo-text) so filter/search still matches the full detail. */
.todo-row-detail{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);margin-top:calc(2px * var(--ra-density,1));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* meta as quiet dot-separated text, not a row of pill chips — a due
   date, category, or "manual"/Todoist-id tag is incidental context, not a
   status signal, so it shouldn't compete visually with the real badges
   above (OVERDUE/BLOCKED) which keep their pill treatment. */
.todo-row-meta{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);margin-top:calc(3px * var(--ra-density,1));display:flex;flex-wrap:wrap;align-items:center}
.todo-row-meta > *:not(:first-child)::before{content:"·";margin:0 calc(6px * var(--ra-density,1));color:var(--ra-text-muted)}
/* entity_tags chips stay pill-styled (same posture as the tools-tab chip
   styling) — these are real user-set labels, not incidental metadata. */
.todo-row-tags{margin-top:calc(4px * var(--ra-density,1));display:flex;gap:calc(4px * var(--ra-density,1));flex-wrap:wrap}
.todo-tag-chip{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);background:var(--ra-surface-2);border-radius:var(--ra-radius-pill,999px);padding:1px calc(7px * var(--ra-density,1))}
.todo-badge{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));padding:1px calc(6px * var(--ra-density,1));border-radius:var(--ra-radius-pill,999px);flex-shrink:0;border:1px solid transparent;font-weight:600}
/* bg/text/border from the same status family, kept visually distinct even
   in monochrome/limited-palette themes. Overdue uses --ra-warn (calm
   amber), not --ra-danger (alarm red) — Things 3's deliberate choice not
   to guilt-trip the user for an overdue item. */
.todo-badge-overdue{background:var(--ra-warn-bg);color:var(--ra-warn-strong);border-color:var(--ra-warn-border)}
.todo-badge-blocked{background:var(--ra-purple-bg);color:var(--ra-purple);border-color:var(--ra-purple-border)}
.todo-badge-mission-active{background:var(--ra-ok-bg);color:var(--ra-ok);border-color:var(--ra-ok-border)}
.todo-badge-mission-inactive{background:var(--ra-warn-bg);color:var(--ra-warn-strong);border-color:var(--ra-warn-border)}
.todo-badge-mission-dead{background:var(--ra-purple-bg);color:var(--ra-purple);border-color:var(--ra-purple-border)}
#tab-todos .tdb-pills{display:inline-flex;gap:var(--ra-space-1);flex-wrap:wrap}
#tab-todos .tdb-pill{cursor:pointer;font:inherit;font-size:var(--ra-fs-sm)}
#tab-todos .tdb-pill.on{background:var(--ra-accent-bg);border-color:var(--ra-accent-border);color:var(--ra-accent)}
#tab-todos [data-mission-state="inactive"]:not(.todo-editing){opacity:.72}
#tab-todos [data-mission-state="dead"]:not(.todo-editing){opacity:.55}
.todo-badge-nearby{background:var(--ra-ok-bg);color:var(--ra-ok);border-color:var(--ra-ok-border)}
.todo-row-subitems{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);margin-top:calc(2px * var(--ra-density,1));padding-left:calc(8px * var(--ra-density,1));border-left:2px solid var(--ra-border)}
.todo-cost-rollup{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);padding:calc(2px * var(--ra-density,1)) 0 calc(6px * var(--ra-density,1))}
.todo-no-match{color:var(--ra-text-faint);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(6px * var(--ra-density,1)) 0}
.todo-row-error{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-danger);margin-top:calc(2px * var(--ra-density,1))}
/* 2026-09-23 — secondary actions (edit/cancel/archive/delete) no longer
   render on the row at all, in any state. Two earlier attempts both
   failed live: always-visible ("too many space", user report), then
   press-and-hold-to-reveal (collided with iOS's native long-press text-
   selection menu, AND opacity:0 never actually reclaimed the reserved
   layout space the user was complaining about in the first place). They
   now live in the detail modal instead (core-audit-modal.js's
   showBacklinks('todo', id), using .ra-btn/.ra-blob-btn — the shared kit
   button classes, not this file's .todo-icon-btn family, since a modal
   footer button is a labeled text button, not a small row-inline icon).
   .todo-row-actions/.todo-delete-wrap/.todo-edit-btn/.todo-cancel-btn/
   .todo-archive-btn and their hover rules are gone with it — only the
   row's own checkbox (.todo-icon-btn family below) remains inline. */
.todo-done-wrap{flex-shrink:0;display:flex;gap:calc(4px * var(--ra-density,1))}
/* shrunk 24px→18px (2026-09-23, user: "the buttons taking too many
   space") — this is the leading checkbox on EVERY row, so its size sets
   the list's whole left-column width; Things 3's own checkbox reads
   closer to 16-18px against ~13px text, not the ~24px this had it at. */
.todo-icon-btn{width:18px;height:18px;flex-shrink:0;border-radius:50%;border:1px solid var(--ra-text-muted);background:none;color:var(--ra-text-faint);cursor:pointer;font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1;display:flex;align-items:center;justify-content:center;transition:transform var(--ra-motion,.15s) var(--ra-spring,var(--ra-ease)),border-color var(--ra-motion,.15s) var(--ra-ease),background var(--ra-motion,.15s) var(--ra-ease)}
.todo-icon-btn:hover{transform:scale(1.1)}
.todo-done-btn:hover{background:var(--ra-ok-bg);border-color:var(--ra-ok-strong);color:var(--ra-ok-strong)}
.todo-done-btn-loading{opacity:.5;cursor:wait}
.todo-done-confirm{background:var(--ra-ok-bg);border:1px solid var(--ra-ok-strong);color:var(--ra-ok-strong);border-radius:var(--ra-radius-sm);padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));cursor:pointer;white-space:nowrap}
.todo-done-confirm:hover{background:var(--ra-ok-strong);color:var(--ra-btn-text)}
.todo-done-cancel{width:16px;height:16px;border-radius:50%;border:1px solid var(--ra-text-muted);background:none;color:var(--ra-text-dim);cursor:pointer;font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1;display:flex;align-items:center;justify-content:center}
.todo-done-cancel:hover{background:var(--ra-text-muted);color:var(--ra-text)}
.todo-restore-btn{flex-shrink:0;background:none;border:1px solid var(--ra-text-muted);color:var(--ra-text-faint);border-radius:var(--ra-radius-sm);padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));cursor:pointer;white-space:nowrap;transition:border-color var(--ra-motion,.15s) var(--ra-ease),background var(--ra-motion,.15s) var(--ra-ease),color var(--ra-motion,.15s) var(--ra-ease)}
.todo-restore-btn:hover{background:var(--ra-accent-bg);border-color:var(--ra-accent);color:var(--ra-accent-strong)}
.todo-restore-btn:disabled{opacity:.5;cursor:wait}
/* modal footer action row (core-audit-modal.js, type==='todo') */
.todo-modal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8px * var(--ra-density,1));margin:0 0 calc(14px * var(--ra-density,1));padding-bottom:calc(14px * var(--ra-density,1));border-bottom:1px solid var(--ra-divider)}
.todo-modal-actions .ra-btn{min-height:0;padding:calc(6px * var(--ra-density,1)) calc(14px * var(--ra-density,1));font-size:var(--ra-fs-md)}
.todo-modal-actions .todo-modal-delete{margin-left:auto}
@media(max-width:600px){.todo-modal-actions .todo-modal-delete{margin-left:0}}
/* tag row + analyze header in the todo modal: same left edge, a divider between sections */
#entity-tag-row-bl{padding:calc(10px * var(--ra-density,1)) 0;border-top:1px solid var(--ra-divider)}
#entity-tag-input-bl{padding:calc(3px * var(--ra-density,1)) calc(10px * var(--ra-density,1));min-height:0}
/* .todo-row is display:flex (row) for the normal read-only card layout —
   the edit form's fields are plain stacked block children, not flex-row
   siblings, so without this override every field div gets squeezed into
   one horizontal row and shrinks to a tiny pill (real bug, 2026-09-02 user
   report: "still fucking terrible" screenshot showed exactly this). */
.todo-row-editing{display:block;border:1px solid var(--ra-accent-border);border-radius:var(--ra-radius-md);background:var(--ra-bg-alt,var(--ra-bg))}
.todo-row-editing input,.todo-row-editing textarea{background:var(--ra-bg);border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);color:var(--ra-text);padding:calc(5px * var(--ra-density,1)) calc(7px * var(--ra-density,1));font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1))}
.todo-add-form input,.todo-add-form select,.todo-add-form textarea{background:var(--ra-bg);border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);color:var(--ra-text);padding:calc(5px * var(--ra-density,1)) calc(7px * var(--ra-density,1));font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1))}
.todo-delete-confirm{background:var(--ra-danger-bg);border:1px solid var(--ra-danger-strong);color:var(--ra-danger-strong);border-radius:var(--ra-radius-sm);padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));cursor:pointer;white-space:nowrap}
.todo-delete-confirm:hover{background:var(--ra-danger-strong);color:var(--ra-btn-text)}
.todo-delete-cancel{width:16px;height:16px;border-radius:50%;border:1px solid var(--ra-text-muted);background:none;color:var(--ra-text-dim);cursor:pointer;font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1;display:flex;align-items:center;justify-content:center}
.todo-delete-cancel:hover{background:var(--ra-text-muted);color:var(--ra-text)}
body.todo-density-compact .todo-row-detail,body.todo-density-compact .todo-row-meta,body.todo-density-compact .todo-row-subitems{display:none}

/* ── Wins tab card density toggle (mirrors todo-density-compact above) ── */
#wins-density-toggle{background:var(--ra-surface-3);border:1px solid var(--ra-accent-border);color:var(--ra-text-dim);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(3px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-sm);cursor:pointer}
#wins-density-toggle.active{color:var(--ra-text);border-color:var(--ra-accent-strong)}
/* wins-tab-layout pass (2026-08-21, revised — live user report: "why dont
   see any category/tag/link badge anymore" — .win-row-meta also carries
   the category badge and the FK link chips, not just the source/repeat
   noise, so hiding the whole row in compact mode was hiding real
   identifying info, not just chrome). Compact now only drops the
   reflection text, the note thread disclosure, and any attached photo —
   .win-row-meta (category + FK chips) stays visible at every density. */
body.wins-density-compact .win-row-notes,
body.wins-density-compact .win-row-notelog,body.wins-density-compact .win-row-photo{display:none!important}
body.wins-density-compact .win-row-icon{font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1))!important}
/* ── Wins tab UI/layout pass (2026-08-19, revised 2026-08-21) ──────────
   .win-card gets a left accent stripe by Win type (set inline per-card via
   --win-accent, same "--hab-accent custom-prop feeding a fixed border-left"
   pattern as .hab-card) so the History list is scannable by kind without
   reading each badge. .wins-quickadd is the Wins-tab-local create bar
   (wins-tab-ideas.md follow-up — the create form previously only existed
   on the Dashboard tab's compact panel, not on the Wins tab itself). */
.win-card{border-left:3px solid var(--win-accent,var(--ra-border-strong))}
/* Subtab row (History / Review inbox / Insights) — kept on one line at
   every width instead of flex-wrap, mirroring #hero's own nowrap+scroll
   pattern; a narrow phone scrolls it sideways rather than dropping
   "Insights" onto its own row below the other two pills (2026-09-02). */
.wins-subtab-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wins-subtab-row::-webkit-scrollbar{display:none}
.wins-subtab-row .wins-subtab-btn{flex-shrink:0;white-space:nowrap}
.wins-quickadd{margin-bottom:calc(12px * var(--ra-density,1))}
.wins-quickadd input,.wins-quickadd select{min-height:34px}
.wins-quickadd-row{display:flex;gap:calc(6px * var(--ra-density,1));align-items:center}
.wins-quickadd-row input{flex:1;min-width:0}
.wins-quickadd-row .ra-btn{flex-shrink:0}
.wins-quickadd-options{display:flex;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap;margin-top:calc(6px * var(--ra-density,1))}
.wins-quickadd-options select,.wins-quickadd-options input{flex:1 1 130px;min-width:0}
.wins-insights-grid{display:flex;flex-wrap:wrap;gap:calc(10px * var(--ra-density,1))}
/* Toolbar (2026-08-21 layout pass, replaces the collapsed "More tools"
   disclosure — every control now lives in one grouped bar, sectioned by
   named ::before dividers rather than a details/summary toggle so nothing
   is hidden behind an extra click). */
.wins-toolbar{display:flex;flex-direction:column;gap:calc(8px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1));padding-bottom:calc(10px * var(--ra-density,1));border-bottom:1px solid var(--ra-border)}
.wins-toolbar-row{display:flex;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap;align-items:center}
.wins-toolbar-group{display:flex;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap;align-items:center;padding-right:calc(10px * var(--ra-density,1));border-right:1px solid var(--ra-border)}
.wins-toolbar-group:last-child{border-right:none;padding-right:0}
.wins-toolbar-label{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.06em;text-transform:uppercase;color:var(--ra-text-faint);margin-right:calc(2px * var(--ra-density,1))}
/* Date-grouped history list (2026-08-21, mirrors Timeline's date-header
   grouping) — cards for one date flow into a responsive grid instead of a
   single column, so a wide pane isn't mostly empty space either side. */
.wins-date-group{margin-bottom:calc(16px * var(--ra-density,1))}
.wins-date-hdr{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.06em;color:var(--ra-text-faint);text-transform:uppercase;padding-bottom:calc(4px * var(--ra-density,1));border-bottom:1px solid var(--ra-border);margin-bottom:calc(8px * var(--ra-density,1))}
.wins-grid{display:grid;grid-template-columns:1fr;gap:calc(8px * var(--ra-density,1));align-items:stretch}
.wins-grid .win-card{margin-bottom:0}
@container pane (min-width:820px){.wins-grid{grid-template-columns:repeat(2,1fr)}}
@container pane (min-width:1240px){.wins-grid{grid-template-columns:repeat(3,1fr)}}
/* FK link names visible on the card itself (2026-08-21) — was a bare
   "🔗 N" count badge that only resolved to real names once the backlinks
   modal was opened; these render inline with the resolved label. */
.win-fk-chip{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);cursor:pointer;background:var(--ra-surface-3);border-radius:var(--ra-radius-sm);padding:1px calc(6px * var(--ra-density,1))}
.win-fk-chip:hover{color:var(--ra-accent);background:var(--ra-accent-border)}
@container pane (max-width:640px){
  #todos-subtab-nav{gap:calc(4px * var(--ra-density,1))!important;padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1))!important}  /* inline gap:calc(6px * var(--ra-density,1)), padding:calc(8px * var(--ra-density,1)) calc(14px * var(--ra-density,1)) */
  .todos-subtab-btn{padding:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1))!important;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))!important}
  .todo-controls{flex-basis:100%;margin-left:0!important;margin-top:calc(6px * var(--ra-density,1))}
  #todo-filter{flex:1;width:auto}
}
.clear-msg{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-ok-border);padding:calc(10px * var(--ra-density,1));text-align:center;background:var(--ra-ok-bg);border-radius:var(--ra-radius-md);border:1px solid var(--ra-ok-border)}

/* ── fire log ── */
.fire{padding:calc(7px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-sm);margin-bottom:calc(5px * var(--ra-density,1));border-left:3px solid var(--ra-accent-border);background:var(--ra-surface-1)}
.fire.reactive{border-left-color:var(--ra-ok-strong);background:var(--ra-ok-bg)}
.fire.proactive{border-left-color:var(--ra-purple);background:var(--ra-purple-bg)}
.fire.test{border-left-color:var(--ra-text-muted);opacity:.55}
.fire-ts{color:var(--ra-text-muted);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}
.fire-trigger{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;margin:1px 0}
.fire.reactive .fire-trigger{color:var(--ra-ok)}
.fire.proactive .fire-trigger{color:var(--ra-purple)}
.fire:not(.reactive):not(.proactive) .fire-trigger{color:var(--ra-accent)}
.fire-type{font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-left:calc(5px * var(--ra-density,1));opacity:.6}
.fire.reactive .fire-type{color:var(--ra-ok)}
.fire.proactive .fire-type{color:var(--ra-purple)}
.fire-reason{color:var(--ra-text-faint);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));font-style:italic;margin:1px 0 calc(2px * var(--ra-density,1))}
.fire-msg{color:var(--ra-text-mid);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));white-space:pre-wrap;line-height:1.4}

/* ── context ── */
.ctx-row{display:flex;justify-content:space-between;align-items:center;padding:calc(3px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-divider);gap:calc(8px * var(--ra-density,1));min-width:0}
.ctx-lbl{color:var(--ra-text-dim);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));flex-shrink:0}
.ctx-val{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:500;color:var(--ra-text-bright);text-align:right;min-width:0}
.cv-green{color:var(--ra-ok)}.cv-amber{color:var(--ra-warn)}.cv-red{color:var(--ra-danger)}.cv-blue{color:var(--ra-accent)}.cv-gray{color:var(--ra-text-dim)}

.hab-cell-badge{width:24px;height:24px;border-radius:var(--ra-radius-md);display:flex;align-items:center;justify-content:center;font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1}
.hab-cell-badge.done{background:color-mix(in srgb, var(--ra-ok-strong) 16%, transparent);color:var(--ra-ok)}
.hab-cell-badge.missed{background:color-mix(in srgb, var(--ra-danger-strong) 14%, transparent);color:var(--ra-danger)}
.hab-cell-badge.skip{background:color-mix(in srgb,var(--ra-text-dim) 12%,transparent);color:var(--ra-text-dim);opacity:.6}
.hab-cell-badge.pending{background:color-mix(in srgb, var(--ra-warn-strong) 14%, transparent);color:var(--ra-warn)}
.hab-cell-badge.blank{color:var(--ra-text-muted)}
/* ── habits tab ── 2026-10-11 redesign: habit-per-ROW list (scales to hundreds), kit ra-tabs/ra-pill/ra-input/ra-select/ra-btn/ra-progress, tokens only */
.hab-pane{padding:calc(12px * var(--ra-density,1)) calc(14px * var(--ra-density,1))}
.hab-subnav{position:sticky;top:var(--topbar-h,54px);z-index:var(--ra-z-sticky);background:var(--ra-bg);border-bottom:1px solid var(--ra-border);padding:0 calc(14px * var(--ra-density,1))}
.hab-summary{display:flex;align-items:center;justify-content:space-between;gap:calc(14px * var(--ra-density,1));flex-wrap:wrap;margin-bottom:calc(12px * var(--ra-density,1))}
.hab-summary-prog{display:flex;align-items:center;gap:calc(10px * var(--ra-density,1));flex:1 1 260px;min-width:0}
.hab-summary-prog .ra-progress{flex:1;height:8px;min-width:80px}
.hab-summary-big{font-size:calc(22px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;color:var(--ra-text-bright);line-height:1}
.hab-summary-big small{font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);font-weight:400}
.hab-summary-chips{display:flex;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap}
.hab-pill-warn{color:var(--ra-warn);border-color:var(--ra-warn-border)}
.hab-group{margin:0 0 calc(10px * var(--ra-density,1))}
.hab-group>summary{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));cursor:pointer;list-style:none;padding:calc(6px * var(--ra-density,1)) calc(2px * var(--ra-density,1));font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ra-text-mid)}
.hab-group>summary::-webkit-details-marker{display:none}
.hab-group>summary::before{content:'▸';color:var(--ra-text-dim);transition:transform var(--ra-motion) var(--ra-ease)}
.hab-group[open]>summary::before{transform:rotate(90deg)}
.hab-list{display:flex;flex-direction:column;border:1px solid var(--ra-border);border-radius:var(--ra-radius-lg);background:var(--ra-card-bg);overflow:hidden}
.hab-item{display:grid;grid-template-columns:minmax(0,1fr) auto 112px 118px;align-items:center;gap:calc(14px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1)) calc(14px * var(--ra-density,1));border-bottom:1px solid var(--ra-divider);border-left:3px solid transparent;transition:background var(--ra-motion) var(--ra-ease)}
.hab-item:last-child{border-bottom:0}
.hab-item:hover{background:var(--ra-surface-1)}
.hab-item[data-rule="risk"]{border-left-color:var(--ra-warn-strong)}
.hab-item[data-rule="dead"]{border-left-color:var(--ra-danger-strong)}
.hab-item[data-st="done"] .hab-item-name{color:var(--ra-text-mid)}
.hab-item-main{display:flex;align-items:center;gap:calc(10px * var(--ra-density,1));min-width:0}
.hab-item-emoji{font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1));width:28px;text-align:center;flex-shrink:0;line-height:1}
.hab-item-text{min-width:0}
.hab-item-name{font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;color:var(--ra-text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:calc(6px * var(--ra-density,1))}
.hab-item-meta{font-size:calc(10.5px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:calc(1px * var(--ra-density,1))}
.hab-flag{flex-shrink:0;font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));text-transform:uppercase;letter-spacing:.04em}
.hab-flag.dead{color:var(--ra-danger);border-color:var(--ra-danger-border)}
.hab-flag.risk{color:var(--ra-warn);border-color:var(--ra-warn-border)}
.hab-strip{display:flex;align-items:center;gap:calc(3px * var(--ra-density,1))}
.hab-dot{width:9px;height:14px;border-radius:var(--ra-radius-sm);background:var(--ra-surface-2);display:block}
.hab-dot.done{background:var(--ra-ok-strong)}
.hab-dot.missed{background:var(--ra-danger-strong)}
.hab-dot.pending{background:var(--ra-warn-strong);opacity:.55}
.hab-dot.skip{background:var(--ra-text-faint);opacity:.45}
.hab-dot.blank{background:var(--ra-surface-2)}
.hab-dot.today{margin-left:calc(5px * var(--ra-density,1));outline:2px solid var(--ra-accent-strong);outline-offset:1px}
.hab-item-stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;white-space:nowrap}
.hab-streak-num{font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;color:var(--ra-text-mid)}
.hab-streak-num.hot{color:var(--ra-warn)}
.hab-streak-sub{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim)}
.hab-item-act{display:flex;align-items:center;justify-content:flex-end;gap:calc(6px * var(--ra-density,1))}
.hab-tick{background:var(--ra-ok-bg);border-color:var(--ra-ok-border);color:var(--ra-ok-strong);font-weight:600;min-width:72px}
.hab-untick{background:none;border:1px solid var(--ra-border);color:var(--ra-text-dim);border-radius:var(--ra-radius-md);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(2px * var(--ra-density,1)) calc(7px * var(--ra-density,1));cursor:pointer}
.hab-untick:hover{color:var(--ra-warn);border-color:var(--ra-warn-border);background:var(--ra-warn-bg)}
.hab-cell-badge{width:24px;height:24px;border-radius:var(--ra-radius-md);display:inline-flex;align-items:center;justify-content:center;font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1}
.hab-cell-badge.done{background:var(--ra-ok-bg);color:var(--ra-ok)}
.hab-cell-badge.missed{background:var(--ra-danger-bg);color:var(--ra-danger)}
.hab-cell-badge.skip{background:var(--ra-surface-2);color:var(--ra-text-dim)}
.hab-cell-badge.pending{background:var(--ra-warn-bg);color:var(--ra-warn)}
.hab-cell-badge.blank{color:var(--ra-text-muted)}
.hab-pct{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim)}
@media (max-width:760px){
  .hab-item{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main act" "strip stat";row-gap:calc(6px * var(--ra-density,1))}
  .hab-item-main{grid-area:main}.hab-item-act{grid-area:act}.hab-strip{grid-area:strip}.hab-item-stat{grid-area:stat;flex-direction:row;gap:calc(8px * var(--ra-density,1));align-items:baseline}
}
/* Habits on the shared cabView (2026-10-12): compat rows keep .hab-item; their body flows into the row grid, the today ✓ leads (desktop). */
.hab-item{position:relative}
.hab-item-body{display:contents}
.hab-item .cab-compat-sel{position:absolute;left:calc(6px * var(--ra-density,1));top:50%;transform:translateY(-50%);padding:0}
.cab-host[data-selecting="true"] .hab-item{padding-left:calc(34px * var(--ra-density,1))}
@media (min-width:761px){.hab-item{grid-template-columns:calc(96px * var(--ra-density,1)) minmax(0,1fr) auto calc(112px * var(--ra-density,1))}.hab-item-act{order:-1;justify-content:flex-start}}
#habits-cat-list .cab-grid{--cab-min-w:280px}
.hab-cat-card{position:relative;cursor:pointer}
.hab-cat-body{min-width:0}
.hab-cat-card .cab-compat-sel{position:absolute;top:calc(8px * var(--ra-density,1));left:calc(8px * var(--ra-density,1));padding:0}
.cab-host[data-selecting="true"] .hab-cat-card{padding-left:calc(34px * var(--ra-density,1))}
#hab-toolbar-wrap{margin-bottom:calc(10px * var(--ra-density,1))}
.hab-hfy-on{border-color:var(--ra-ok-border);color:var(--ra-ok)}
.hab-hfy-bar{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));flex-wrap:wrap;margin-bottom:calc(10px * var(--ra-density,1))}
.hab-hfy-bar .ra-input{flex:1 1 calc(220px * var(--ra-density,1));align-self:stretch;min-width:0}
.hab-hfy-note{font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.6;color:var(--ra-text-mid);margin-bottom:calc(10px * var(--ra-density,1))}
.hab-hfy-note code{background:var(--ra-surface-2);padding:0 calc(4px * var(--ra-density,1));border-radius:var(--ra-radius-sm)}
.hab-hfy-list{display:flex;flex-direction:column}
.hab-hfy-row{display:flex;flex-wrap:wrap;align-items:center;gap:calc(10px * var(--ra-density,1));padding:calc(6px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-divider)}
.hab-hfy-row:last-child{border-bottom:0}
.hab-hfy-name{flex:1 1 150px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-bright)}
.hab-hfy-row .ra-select{flex:0 1 220px;min-width:0}
.hab-misses>summary{margin-top:calc(4px * var(--ra-density,1))}
.hab-miss-item{border-left:2px solid var(--ra-danger-strong);background:var(--ra-danger-bg);padding:calc(5px * var(--ra-density,1)) calc(9px * var(--ra-density,1));margin-bottom:calc(4px * var(--ra-density,1));border-radius:0 var(--ra-radius-sm) var(--ra-radius-sm) 0;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid)}
.hab-miss-date{color:var(--ra-danger);font-weight:700;margin-right:calc(6px * var(--ra-density,1))}
/* insights: responsive card grid, wide cards span all columns */
.hab-insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:calc(12px * var(--ra-density,1));align-items:start}
.hab-insights>.hab-card{margin:0;align-self:stretch}
.hab-insights>.hab-card-wide{grid-column:1/-1}
.hab-more{margin-top:calc(8px * var(--ra-density,1))}
.hab-more>summary{cursor:pointer;color:var(--ra-accent);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}
.hab-fold>summary{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));cursor:pointer;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ra-text-mid)}
.hab-fold>summary>span:first-child{flex:0 1 auto}
.hab-fold .hab-card-hdr-actions{margin-left:auto}
.hab-goal-row{padding:calc(8px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-divider)}
.hab-goal-row:last-child{border-bottom:0}
.hab-goal-title{display:flex;align-items:center;gap:calc(10px * var(--ra-density,1));margin-bottom:calc(5px * var(--ra-density,1))}
.hab-goal-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;color:var(--ra-text-bright)}
.hab-goal-count{flex-shrink:0;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;color:var(--ra-accent)}
.hab-goal-chips{display:flex;gap:calc(5px * var(--ra-density,1));flex-wrap:wrap;margin-top:calc(6px * var(--ra-density,1))}
.hab-tbl-fixed{table-layout:fixed}
.hab-tbl-fixed th.hab-num,.hab-tbl-fixed td.hab-num{width:calc(58px * var(--ra-density,1));text-align:right;white-space:nowrap}
.hab-card{overflow-x:auto}
@media (max-width:760px){.hab-tbl-fixed .hab-wd-cell,.hab-tbl-fixed :is(th,td):nth-child(3){display:none}.hab-tbl-fixed th.hab-num,.hab-tbl-fixed td.hab-num{width:calc(48px * var(--ra-density,1))}}
.hab-tbl-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hab-wd-cell{width:calc(190px * var(--ra-density,1));text-align:right}
.hab-wd-bars{display:inline-flex;gap:calc(4px * var(--ra-density,1))}
.hab-wd-sq{display:block;width:20px;height:14px;border-radius:var(--ra-radius-sm);background:var(--ra-surface-2)}
.hab-wd-sq.ok{background:var(--ra-ok-strong)}.hab-wd-sq.mid{background:var(--ra-warn-strong)}.hab-wd-sq.bad{background:var(--ra-danger-strong)}
.hab-drift-h{font-weight:700;color:var(--ra-text-mid);margin-bottom:calc(3px * var(--ra-density,1))}
.hab-drift{margin-top:calc(8px * var(--ra-density,1));font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);line-height:1.6}
.hab-card-hdr-flat{border:0;margin:0;padding:0;text-transform:none;letter-spacing:0}
.hab-chip{display:inline-flex;align-items:center;gap:calc(4px * var(--ra-density,1));background:var(--ra-surface-1);border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);padding:calc(4px * var(--ra-density,1)) calc(11px * var(--ra-density,1));font-size:calc(10.5px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);line-height:1.2;cursor:default;transition:border-color var(--ra-motion) var(--ra-ease),filter var(--ra-motion) var(--ra-ease),transform var(--ra-motion) var(--ra-ease)}
.hab-chip.ok{color:var(--ra-ok);background:color-mix(in srgb, var(--ra-ok-strong) 10%, transparent);border-color:color-mix(in srgb, var(--ra-ok-strong) 32%, transparent)}
.hab-chip.warn{color:var(--ra-warn);background:color-mix(in srgb, var(--ra-warn-strong) 9%, transparent);border-color:color-mix(in srgb, var(--ra-warn-strong) 40%, transparent)}
.hab-chip.dim{color:var(--ra-text-dim);border-color:var(--ra-border);opacity:.65}
.hab-chip.click{cursor:pointer}
.hab-chip.click:hover{box-shadow:var(--ra-shadow-1)}
 .hab-chip:hover{filter:brightness(1.08);border-color:var(--ra-accent);transform:translateY(-1px)}

/* ── health bars ── */
.metric-row{display:flex;align-items:center;gap:calc(7px * var(--ra-density,1));margin:calc(5px * var(--ra-density,1)) 0}
.m-lbl{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);width:42px;flex-shrink:0}
.m-bar{flex:1;height:5px;background:var(--ra-surface-2);border-radius:var(--ra-radius-sm);overflow:hidden}
.m-fill{height:100%;border-radius:var(--ra-radius-sm);transition:width .4s}
.mf-good{background:var(--ra-ok-strong)}.mf-warn{background:var(--ra-warn-strong)}.mf-bad{background:var(--ra-danger-strong)}
.m-val{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));width:34px;text-align:right}

/* ── trigger groups ── */
.trig-group{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));text-transform:uppercase;letter-spacing:.1em;color:var(--ra-text-muted);padding:calc(6px * var(--ra-density,1)) 0 calc(2px * var(--ra-density,1));border-top:1px solid var(--ra-divider);margin-top:calc(2px * var(--ra-density,1))}
.trig-group:first-child{border-top:none;margin-top:0;padding-top:0}
.trig-section{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(5px * var(--ra-density,1));margin-bottom:calc(4px * var(--ra-density,1))}
.trig{border-radius:var(--ra-radius-sm);padding:calc(7px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border:1px solid var(--ra-surface-2);background:var(--ra-surface-1);cursor:default}
.trig.ready{background:var(--ra-ok-bg);border-color:var(--ra-ok-border)}.trig.hot{background:var(--ra-warn-bg);border-color:var(--ra-warn-border)}.trig.disabled{opacity:.4}
.alt-row{background:var(--ra-surface-1)}
.c-app-hi{color:var(--ra-text-bright)}
.c-app-lo{color:var(--ra-text-dim)}
.c-dim{color:var(--ra-text-faint)}
.c-muted{color:var(--ra-text-muted)}
.trig-name{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid);margin-bottom:calc(2px * var(--ra-density,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trig.ready .trig-name{color:var(--ra-ok)}.trig.hot .trig-name{color:var(--ra-warn)}
.trig-sub{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-muted)}
.trig.ready .trig-sub{color:var(--ra-ok-border)}.trig.hot .trig-sub{color:var(--ra-warn-border)}

/* ── habits tab UI pass (2026-08-03, user: "the ui of all the new features
   we built are very bad. improve them") ──────────────────────────────────
   The analytics panel was a vertical wall of identical proj-cards with 9px
   uppercase labels and nothing to scan. Now: a responsive grid of real
   cards with a consistent header bar, semantic status chips, a zebra'd +
   scrollable promotion list, class-based tables, and matching primitives
   for the catalog cards / filter+bulk chrome / detail modal. */
#habits-analytics-panel{margin-top:calc(10px * var(--ra-density,1))}
.hab-card{background:var(--ra-card-bg);border:1px solid var(--ra-border);border-left:3px solid var(--hab-accent,var(--ra-accent));border-radius:var(--ra-radius-lg);padding:calc(12px * var(--ra-density,1)) calc(14px * var(--ra-density,1));box-sizing:border-box;min-width:0;width:100%;margin:0 0 calc(10px * var(--ra-density,1));transition:border-color var(--ra-motion) var(--ra-ease),box-shadow var(--ra-motion) var(--ra-ease),transform var(--ra-motion) var(--ra-ease)}
.hab-card:hover{box-shadow:var(--ra-shadow-1)}
.hab-card-wide{width:100%}
.hab-card-hdr{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ra-text-mid);margin-bottom:calc(9px * var(--ra-density,1));padding-bottom:calc(7px * var(--ra-density,1));border-bottom:1px solid var(--ra-divider)}
.hab-hdr-count{color:var(--ra-accent);background:var(--ra-accent-bg);padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-pill);font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:0;text-transform:none}
/* Info convention (CLAUDE.md 🎨 Dashboard dev notes, 2026-08-03) — every
   feature/idea section header gets an ℹ️ info button (RAUI.infoBtn /
   .ra-info-btn, ../dynamic-ui-kit/kit/ra-ui.css v95+) whose tooltip
   explains the section. Extracted into the shared kit 2026-08-03 — the
   button/tooltip styling, the <span>-not-<button> ripple-clipping fix, and
   the left/right anchor modifiers (.ra-tip-start/.ra-tip-end) all live
   there now, not here. This file only owns layout: .hab-card-hdr's actions
   group sits at the header's right edge via margin-left:auto (paired with
   .ra-tip-end); the plain .hab-sec divider (Streaks/Active habits/Recent
   misses) puts it right after the label instead, near the LEFT of a
   full-width row (paired with .ra-tip-start). */
.hab-card-hdr-label{flex:1}
.hab-card-hdr-actions{display:flex;gap:calc(3px * var(--ra-density,1));margin-left:auto}
.hab-chip-row{display:flex;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap;align-items:center}
.hab-quiet{color:var(--ra-text-dim);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}
.hab-quiet.ok{color:var(--ra-ok);font-weight:600}
.hab-btn{border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);padding:calc(5px * var(--ra-density,1)) calc(11px * var(--ra-density,1));font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));cursor:pointer;white-space:nowrap;transition:border-color var(--ra-motion) var(--ra-ease),filter var(--ra-motion) var(--ra-ease),transform var(--ra-motion) var(--ra-ease)}
.hab-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.hab-btn.ok{background:var(--ra-ok-bg);border-color:var(--ra-ok-border,#0d9668);color:var(--ra-ok-strong)}
.hab-btn.accent{background:var(--ra-accent-border);color:var(--ra-accent);border-color:var(--ra-accent-strong)}
.hab-btn.danger{background:var(--ra-danger-bg);color:var(--ra-danger)}



.hab-tbl{width:100%;border-collapse:collapse;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}
.hab-tbl th{text-align:left;font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.05em;text-transform:uppercase;color:var(--ra-text-faint);font-weight:600;padding:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-bottom:1px solid var(--ra-border);white-space:nowrap}
.hab-tbl td{padding:calc(5px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-bottom:1px solid var(--ra-divider);color:var(--ra-text-mid)}
.hab-tbl tr:last-child td{border-bottom:none}
.hab-tbl tr:hover td{background:var(--ra-surface-1)}
.hab-tbl .hab-num{text-align:center}

/* catalog subtab — card grid + filter/bulk chrome (tabs-food-story.js) */
.hab-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:calc(10px * var(--ra-density,1))}
.hab-cat-card{background:var(--ra-card-bg);border:1px solid var(--ra-border);border-left:3px solid var(--ra-accent);border-radius:var(--ra-radius-lg);padding:calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1));box-sizing:border-box;transition:border-color var(--ra-motion) var(--ra-ease),transform var(--ra-motion) var(--ra-ease),box-shadow var(--ra-motion) var(--ra-ease)}
.hab-cat-card:hover{transform:translateY(-1px);box-shadow:var(--ra-shadow-1);border-left-color:var(--ra-accent)}
.hab-cat-title{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-bright);font-weight:600;margin-bottom:calc(5px * var(--ra-density,1))}
.hab-cat-meta{font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim);margin-bottom:calc(6px * var(--ra-density,1))}
.hab-cat-links{display:flex;gap:calc(10px * var(--ra-density,1));flex-wrap:wrap;font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));align-items:center}
.hab-status-badge{font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));border-radius:var(--ra-radius-pill);padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));font-weight:600;background:var(--ra-surface-2);color:var(--ra-text-mid);flex-shrink:0}
.hab-status-badge[data-status="ready"]{background:color-mix(in srgb, var(--ra-warn-strong) 14%, transparent);color:var(--ra-warn);border:1px solid color-mix(in srgb, var(--ra-warn-strong) 40%, transparent)}
.hab-status-badge[data-status="active"]{background:color-mix(in srgb, var(--ra-ok-strong) 12%, transparent);color:var(--ra-ok);border:1px solid color-mix(in srgb, var(--ra-ok-strong) 32%, transparent)}
.hab-status-badge[data-status="inert"]{background:color-mix(in srgb,var(--ra-text-dim) 12%,transparent);color:var(--ra-text-dim)}
.hab-status-badge[data-status="idea"]{background:var(--ra-accent-bg);color:var(--ra-accent);border:1px solid var(--ra-accent-border)}


.hab-detail-row{padding:calc(2px * var(--ra-density,1)) 0;margin-top:calc(7px * var(--ra-density,1))}
.hab-detail-lbl{font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;color:var(--ra-text-faint);text-transform:uppercase;font-weight:600;margin-bottom:calc(2px * var(--ra-density,1))}
.hab-detail-val{color:var(--ra-text-mid);white-space:pre-wrap;word-break:break-word}

/* ── footer ── */
.footer-row{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));flex-wrap:wrap}
.chip{padding:calc(3px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border-radius:var(--ra-radius-lg);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));display:flex;align-items:center;gap:calc(4px * var(--ra-density,1))}
.ch-green{background:var(--ra-ok-bg);border:1px solid var(--ra-ok-border);color:var(--ra-ok)}
.ch-blue{background:var(--ra-accent-bg);border:1px solid var(--ra-accent-border);color:var(--ra-accent)}
.ch-purple{background:var(--ra-purple-bg);border:1px solid var(--ra-purple-border);color:var(--ra-purple)}
/* ch-red/ch-amber added 2026-07-30 for the Health anomaly-flag chips (#8) —
   ch-red was already referenced by the crons chip row above (line ~498 in
   panels-misc.js) with no matching class, silently falling back to bare
   .chip styling; this fixes that gap too. */
.ch-red{background:var(--ra-danger-bg);border:1px solid var(--ra-danger-border);color:var(--ra-danger)}
.ch-amber{background:var(--ra-warn-bg);border:1px solid var(--ra-warn-border);color:var(--ra-warn)}
#eng-log{margin-top:calc(8px * var(--ra-density,1));background:var(--ra-bg);border:1px solid var(--ra-divider);border-radius:var(--ra-radius-sm);padding:calc(7px * var(--ra-density,1)) calc(9px * var(--ra-density,1));font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-muted);line-height:1.7;white-space:pre-wrap;max-height:180px;overflow-y:auto}
#btn-fetch.running{color:var(--ra-text-muted);border-color:var(--ra-border);cursor:default}
#err{display:none;background:var(--ra-danger-bg);border:1px solid var(--ra-danger-border);color:var(--ra-danger);padding:calc(6px * var(--ra-density,1)) calc(14px * var(--ra-density,1));font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));cursor:pointer}
#refresh-indicator{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-muted);margin-left:calc(6px * var(--ra-density,1))}
#filter-tests{cursor:pointer;user-select:none}
/* ── settings panel ── */
#settings-overlay{display:none;position:fixed;inset:0;z-index:var(--ra-z-settings-scrim);background:color-mix(in srgb,var(--ra-bg) 70%,transparent)}
#settings-panel{display:none;animation:ra-slide-up calc(var(--ra-motion,.15s) * 2) var(--ra-ease,ease);position:fixed;bottom:0;left:0;right:0;z-index:var(--ra-z-panel);background:var(--ra-surface-1,var(--ra-surface-1));border-top:2px solid var(--ra-accent-border,var(--ra-accent-border));border-radius:16px 16px 0 0;padding:calc(20px * var(--ra-density,1)) calc(18px * var(--ra-density,1));padding-bottom:calc(20px + env(safe-area-inset-bottom));max-height:82vh;overflow-y:auto}
.sp-tabrow{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));padding:calc(5px * var(--ra-density,1)) calc(2px * var(--ra-density,1));border-bottom:1px solid var(--ra-surface-2);font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid)}
.sp-tabrow .tr-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-mini{background:var(--ra-surface-2);border:1px solid var(--ra-border-strong);color:var(--ra-text-mid);border-radius:var(--ra-radius-sm);min-width:32px;min-height:30px;cursor:pointer;font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));font-family:var(--font-body)}
.sp-mini.on{color:var(--ra-accent);border-color:var(--ra-accent-strong);background:var(--ra-surface-3)}
.sp-mini:disabled{opacity:.3;cursor:default}
.sp-title{font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;color:var(--ra-accent);letter-spacing:.06em;margin-bottom:calc(18px * var(--ra-density,1));display:flex;align-items:center;justify-content:space-between}
.sp-close{background:none;border:none;color:var(--ra-text-faint);font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1));cursor:pointer;line-height:1;padding:0 calc(4px * var(--ra-density,1))}
.sp-close:hover{color:var(--ra-text-mid)}
/* Dashboard modal compound (kit tokens only; replaces the hand-styled inline overlay/box/header per modal).
   Overlay is toggled by JS via style.display, so it is NOT flex — the box centres itself. */
.ra-dash-modal{position:fixed;inset:0;z-index:var(--ra-z-overlay);background:color-mix(in srgb,var(--ra-bg) 68%,transparent);backdrop-filter:blur(2px)}
.ra-dash-modal-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--ra-card-bg,var(--ra-surface-1));color:var(--ra-text);border:var(--ra-border-w,1px) solid var(--ra-accent-border);border-radius:var(--ra-radius-lg);box-shadow:var(--ra-shadow-2);width:min(560px,96vw);font-family:var(--ra-font-body)}
.ra-dash-modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ra-space-3);padding:calc(14px * var(--ra-density,1)) calc(18px * var(--ra-density,1));border-bottom:var(--ra-border-w,1px) solid var(--ra-border)}
.ra-dash-modal-head.is-compact{padding:calc(12px * var(--ra-density,1)) calc(16px * var(--ra-density,1));flex-shrink:0}
.ra-dash-modal-title{font-weight:700;color:var(--ra-accent);font-size:var(--ra-fs-lg);letter-spacing:.05em;font-family:var(--ra-font-display,var(--ra-font-body))}
.ra-dash-modal-body{padding:calc(14px * var(--ra-density,1)) calc(18px * var(--ra-density,1));font-size:var(--ra-fs-md);line-height:1.7}
.ra-dash-modal .sp-close{font-size:var(--ra-fs-xl)}
.sp-row{display:flex;gap:calc(8px * var(--ra-density,1));flex-wrap:wrap}
.sp-btn{background:var(--ra-surface-2);border:1px solid var(--ra-border-strong);color:var(--ra-text-mid);font-family:var(--font-set);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(8px * var(--ra-density,1)) calc(16px * var(--ra-density,1));border-radius:var(--ra-radius-md);cursor:pointer;transition:all .15s;min-height:38px}
.sp-btn.active{background:var(--ra-surface-3);border-color:var(--ra-accent-strong);color:var(--ra-accent)}
.sp-btn:hover{border-color:var(--ra-text-faint);color:var(--ra-text)}
/* Per-theme override blocks moved to /ui/themes/*.css (RA-UI, 2026-07-10) */
/* ── tooltips ── */
[data-tip]{position:relative;cursor:help;text-decoration:underline dotted var(--ra-text-muted);text-underline-offset:2px}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--ra-surface-3);color:var(--ra-text);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.55;padding:calc(6px * var(--ra-density,1)) calc(9px * var(--ra-density,1));border-radius:var(--ra-radius-md);border:1px solid var(--ra-accent-border);white-space:normal;width:180px;z-index:var(--ra-z-panel);display:none;pointer-events:none;box-shadow:var(--ra-shadow-2)}
[data-tip]:hover::after{display:block}
[data-tip].tip-below::after{bottom:auto;top:calc(100% + 7px)}
#topbar [data-tip]::after,#hero [data-tip]::after{bottom:auto;top:calc(100% + 7px);left:0;transform:none}
#hero [data-tip]::after{white-space:pre-line;width:250px}

/* ── mobile portrait ── */
@media(max-width:600px){
  body{font-family:var(--font-body);font-size:calc(13px * var(--fsc))}
  body.nav-bottom{padding-bottom:calc(56px + env(safe-area-inset-bottom))}

  /* topbar: compact, wraps if needed */
  /* justify-content:space-between (base rule) is right for 2 items — pins
     flush left, tb-right flush right — but row 1 on mobile now holds 3
     separate groups (title / mode-select / pin-bar), and space-between
     scatters 3 items into 2 big, uneven gaps that read as random rather
     than composed. Pack them together instead; whatever room is left over
     trails at the row's end, which reads as normal breathing space rather
     than a layout that doesn't know where to put things (user complaint
     2026-08-18: "the topbar layout is messy"). */
  /* Single-line topbar (user directive 2026-08-18: "combine everything
     into 1 line, hide the title"). Everything that used to be split
     across a title line + 2 anchored control rows now rides one
     nowrap+scroll row instead — same "more chips than width, scroll
     sideways" pattern hero-strip/meals-strip already use below, applied
     to the topbar itself. .tb-left (the "RA" logo/title) is hidden
     outright rather than collapsed to a corner, since there's no row left
     for it to sit on its own anymore and a squeezed logo isn't worth a
     9th item fighting for scroll-row space. */
  #topbar{padding:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1));padding-top:max(4px,env(safe-area-inset-top));gap:calc(8px * var(--ra-density,1));flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #topbar::-webkit-scrollbar{display:none}
  #build-stamp,.tb-age{display:none}
  .tb-left{display:none}
  #pin-bar,#mode-select,.tb-right{flex-shrink:0}
  /* Rearranging an 11-control topbar (title, 3 pins, mode-select, search,
     5 icon buttons) was never going to stop reading as cramped — the fix
     is fewer controls, not tighter packing (user directive 2026-08-18:
     "still cramped/cluttered" after two rounds of spacing/alignment-only
     fixes). #btn-fetch (force an immediate data pull — auto-refresh
     already runs every 30s regardless) and #btn-hard-refresh (nuke the
     service worker cache — a dev/troubleshooting action, not a daily one)
     are the two least-needed-moment-to-moment of the five; both got a
     twin in the Settings panel's new "Actions" section (index.html) so
     nothing is lost, just one tap further away. Row 2 drops from 6 items
     (search + 5 icons) to 4 (search + 3: nav-toggle, events, settings). */
  /* #btn-nav-toggle duplicates the Settings panel's existing "Hide nav"
     button (Tab Nav Position section, id=snav-hide) — both call the exact
     same toggleNav(), so moving it off the topbar (user directive
     2026-08-18) loses nothing, there's no new button to add. */
  .tb-title .tb-full{display:none}
  .tb-title .tb-short{display:inline!important}
  .ibtn,.pin-btn{min-height:40px;min-width:40px;font-size:calc(16px * var(--fsc,1) * var(--ra-fs-scale,1))}
  #btn-settings{font-size:calc(16px * var(--fsc,1) * var(--ra-fs-scale,1))}
  .badge{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(4px * var(--ra-density,1)) calc(10px * var(--ra-density,1));min-height:30px;display:inline-flex;align-items:center}
  /* The min-height:30px/inline-flex/align-items above is meant for
     STANDALONE status badges (#badge-mood, #badge-dnd) so they're easy to
     tap — but .badge is also the base class every CORNER notification dot
     uses (.tab .badge / .pin-slot .badge / .ibtn-slot .badge, all
     position:absolute pills sized off an 8px font). Those already win the
     font-size/padding fight against the rule above on specificity (two
     classes beats one), but nothing there overrides min-height or display,
     so every corner badge was ALSO getting forced to 30px tall — a tiny
     "3" or "99+" dot rendered as a fat red rectangle smothering half the
     icon behind it (real bug, caught from a live-device screenshot
     2026-08-18). Reset those three back to their natural small size. */
  .tab .badge,.pin-slot .badge,.ibtn-slot .badge{min-height:0;display:block;align-items:normal}
  /* .tb-right (mood/search/mode-select/action icons) can't fit one row at
     phone width — badge+search+select alone measure ~260px, the 5 icon
     buttons another ~200px, against a ~360px budget. A prior pass made it
     scroll sideways instead of wrapping to 2 rows — technically one row,
     but "swipe to find the settings button" is still bad mobile UX (user
     directive 2026-08-18: no horizontal scroll on the topbar, period).
     #badge-mood (today's mood picker) stays hidden — it has a documented
     alternate path (its own tooltip: "Reply focus/recovery/easy/social to
     the morning briefing"), so hiding the tap-shortcut loses convenience,
     not the capability. #mode-select the user explicitly asked to keep
     reachable on mobile (2026-08-18) — it doesn't have a Settings-panel
     home yet, so instead of dropping it, it now lives as a direct #topbar
     child (moved in index.html, sits right after #pin-bar in DOM order)
     and joins row 1's own flex line via normal flow, landing in the gap
     #topbar's justify-content:space-between leaves between .tb-left and
     #pin-bar (title ends ~x78px, pin-bar starts ~x237px on a 375px phone
     — ~160px sitting empty, the exact "wasted space on the pin row" the
     user pointed at).
     FIRST attempt did this with position:absolute inside #topbar's
     position:sticky instead of moving the DOM node — Chromium (this
     repo's own test browser) renders that fine, but real Mobile Safari
     does not reliably treat sticky as a containing block for an absolute
     descendant, so the dropdown rendered pinned near the true top of the
     physical screen on a live device (real bug, live-device screenshot
     2026-08-18). Normal flex flow can't have that failure mode — never
     use position:absolute against a position:sticky ancestor for anything
     that has to work on an actual phone, only against position:relative/
     fixed ancestors, and verify layout-critical CSS on a real device (or
     at least a WebKit-based test path) before calling it done, not just
     this session's Chromium-backed browser pane.
     With mode-select out and the search field shortened (below), row 2
     (search + 5 icon buttons) fits with no scroll. */
  #mode-lock{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
  /* height:40px + border-radius:6px match .pin-btn/.ibtn's own sizing —
     a plain 32px-tall native <select> next to 40px bordered buttons read
     as "messy" when they shared a row. The margin-left:auto anchoring and
     .tb-right's own forced-full-width-line trick from the previous
     2-row layout are gone now that everything rides one scrollable row
     (#topbar itself owns the scroll) — anchoring left/right only made
     sense when each row needed to fill a fixed width on its own. */
  #mode-select{width:84px;min-height:0;height:40px;border-radius:var(--ra-radius-md);font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(2px * var(--ra-density,1)) calc(4px * var(--ra-density,1))}
  #global-lookup-input{height:40px}
  .tb-right{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));flex-shrink:0}
  /* nav-left/right's 52px sidebar is already fully converted to the
     bottom-bar layout by the max-width:880px rule above (which this
     600px block is nested inside the range of) — this block used to
     re-narrow it to a 50px stub instead of removing it, which silently
     overrode that fix back to a half-empty sidebar column on phones
     (real bug, caught from a live-device screenshot 2026-08-18: a 50px
     blank margin down the left edge with the nav icons crushed into a
     50x54 box in the bottom-left corner instead of spanning the bottom).
     Deleted — nothing left to override. */

  /* meals strip */
  #meals-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}
  #meals-strip::-webkit-scrollbar{display:none}
  .meal-pill{font-size:calc(11px * var(--fsc));padding:calc(4px * var(--ra-density,1)) calc(12px * var(--ra-density,1));border-radius:14px}
  .meal-pill .meal-time{font-size:calc(10px * var(--fsc))}
  #meals-strip-label{font-size:calc(10px * var(--fsc))}

  /* hero: horizontal scroll */
  #hero{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}
  #hero::-webkit-scrollbar{display:none}
  .hero-item{flex-shrink:0;padding:calc(6px * var(--ra-density,1)) calc(12px * var(--ra-density,1))}
  .hero-val{font-size:calc(13px * var(--fsc))}

  /* triggers: #triggers-body is already single-column at all widths now
     (2026-07-28, Context sidebar cell removed) — no mobile override needed */
  .trig-section{grid-template-columns:repeat(2,1fr)}

  /* beeper chats tab is a module iframe (Chat Phase B) — single-pane
     mobile layout lives inside the module now */
  #tab-beeper.active{flex-direction:column}

  /* card & section sizing */
  .cell{padding:calc(16px * var(--ra-density,1)) calc(14px * var(--ra-density,1))}
  h4{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));margin-bottom:calc(12px * var(--ra-density,1))}
  .attn-label{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));margin-bottom:calc(10px * var(--ra-density,1))}
  .alert-card{padding:calc(13px * var(--ra-density,1)) calc(14px * var(--ra-density,1));margin-bottom:calc(9px * var(--ra-density,1));border-radius:var(--ra-radius-lg)}
  .alert-icon{font-size:calc(22px * var(--fsc,1) * var(--ra-fs-scale,1))}
  .alert-title{font-size:calc(15px * var(--fsc));font-weight:600}
  .alert-sub{font-size:calc(12px * var(--fsc))}
  .alert-card.msg .alert-title{font-size:calc(16px * var(--fsc))}
  .hot-card{padding:calc(11px * var(--ra-density,1)) calc(12px * var(--ra-density,1));border-radius:var(--ra-radius-md);margin-bottom:calc(6px * var(--ra-density,1))}
  .hot-trigger{font-size:calc(13px * var(--fsc))}
  .hot-time{font-size:calc(11px * var(--fsc))}
  .todo-item{font-size:calc(13px * var(--fsc));padding:calc(7px * var(--ra-density,1)) 0}
  .todo-dot{font-size:calc(15px * var(--fsc,1) * var(--ra-fs-scale,1))}
  .fire{padding:calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1));margin-bottom:calc(7px * var(--ra-density,1));border-radius:var(--ra-radius-md)}
  .fire-msg{font-size:calc(12px * var(--fsc))}
  .fire-ts{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
  .fire-trigger{font-size:calc(12px * var(--fsc))}
  .ctx-val,.ctx-lbl{font-size:calc(13px * var(--fsc))}
  .ctx-row{padding:calc(6px * var(--ra-density,1)) 0}

  /* reply/send buttons */
  .btn-reply,.suggest-btn{min-height:44px;padding:0 calc(14px * var(--ra-density,1));display:inline-flex;align-items:center;justify-content:center;font-size:calc(12px * var(--fsc))}
  .send-btn{min-height:40px;padding:0 calc(16px * var(--ra-density,1));font-size:calc(12px * var(--fsc));border-radius:var(--ra-radius-md)}

  /* Wins tab (modules/wins/frontend/panels-dashboard-wins.js) — audited
     2026-08-19 from a live iPhone/portrait screenshot of the Wins tab: the
     filter bar's two <select> elements render at native intrinsic width
     (no min-height on the kit's base .ra-select, dynamic-ui-kit/kit/ra-ui.css)
     and the trailing count span's margin-left:auto pushed it onto its own
     near-empty line once the row wrapped — both read as cramped/disorganized
     at 375px. Give the selects an even, tap-friendly split of the row and
     let the count sit flush left with everything else once wrapped, instead
     of stranded by the auto-margin that only makes sense on a wide row.
     Deliberately scoped to this mobile block, not the shared kit — a kit
     change needs a VERSION bump + restart and would resize every consumer's
     selects, not just this one cramped mobile toolbar. */
  .wins-filter-bar{gap:calc(6px * var(--ra-density,1))}
  .wins-filter-select{flex:1 1 130px;min-width:0;min-height:40px}
  .wins-filter-count{margin-left:0!important;flex-basis:100%}
  /* Follow-up to the audit above, from a second live screenshot (still
     cramped after the first pass): the subtab pills, stat-strip badges,
     and quick-add row were each still full chunky desktop size, so five
     stacked full-width rows of chrome sat above the first Win on a phone
     screen. Tighten padding/gaps here rather than touching .idea-filter-
     pill or .ra-badge globally — same "scope to this cramped mobile
     toolbar, not the shared kit" reasoning as the rest of this block. */
  .wins-subtab-btn{padding:calc(4px * var(--ra-density,1)) calc(10px * var(--ra-density,1))!important;font-size:calc(11px * var(--fsc,1))!important}
  #wins-stat-strip>div{margin-bottom:calc(8px * var(--ra-density,1))!important;padding-bottom:calc(8px * var(--ra-density,1))!important}
  .wins-quickadd-row .ra-btn{padding:0 calc(10px * var(--ra-density,1))!important}
  .wins-filter-bar label{gap:calc(3px * var(--ra-density,1))!important}
  /* Third pass (2026-09-02, live iPhone screenshot again): the two prior
     passes tightened padding/font-size but never fixed the actual cause —
     .wins-toolbar-group-filter is flex-wrap with each <select> at
     flex:1 1 130px, so at 375px only ONE select fits per line and the
     Filter group alone (4 selects + Save filter button) unrolled into 5
     near-empty stacked rows before a single Win card appeared, exactly as
     the screenshot showed. The View group (2 checkboxes + density toggle)
     and Manage group (3 export/import buttons) already read fine at this
     width per the same screenshot — only Filter gets the fix, scoped by
     the class each group carries (added in panels-dashboard-wins.js
     alongside this pass) rather than widening the blanket
     .wins-toolbar-group rule and risking the two groups that already
     work. Desktop keeps the flex-wrap row from the 2026-08-21 layout pass
     unchanged — that was a deliberate "everything visible, nothing behind
     a click" decision, not reopened here.

     Fourth pass, same session — a live light-theme screenshot right after
     shipping the third pass showed the Save filter button stretched into
     a full-width flat bar (grid-column:1/-1 on the whole
     .wins-toolbar-group-filter made every grid item, button included,
     fill its cell) — it read as a mismatched, un-themed block sitting
     next to the compact pill-shaped CSV/JSON/Bulk-import chips just below
     it, not an actual color/token problem. Only the 4 <select>s need the
     2-up grid; the label and the Save filter button (wrapped separately
     in panels-dashboard-wins.js as .wins-filter-select-grid around just
     the selects) now stay normal flow children sized to content, same as
     every other chip/button in this toolbar. */
  .wins-toolbar-group-filter{display:flex;flex-direction:column;align-items:flex-start;gap:calc(6px * var(--ra-density,1));width:100%;border-right:none!important;padding-right:0!important}
  .wins-toolbar-group-filter .wins-filter-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(6px * var(--ra-density,1));width:100%}
  .wins-toolbar-group-view,.wins-toolbar-group-manage{width:100%;border-right:none!important;padding-right:0!important;padding-top:calc(8px * var(--ra-density,1));margin-top:calc(6px * var(--ra-density,1));border-top:1px dashed var(--ra-border)}
  .wins-toolbar-group-manage{margin-left:0!important}
  .wins-toolbar-group-manage .wins-filter-count{flex-basis:auto;margin-left:auto!important}
}

/* v53 "more animations everywhere" tuning — faster cycle for THIS instance
   of the shared .ra-aurora-bg primitive only (not touching the kit's base
   color-mix intensities, which other consumers rely on at their own pace).
   Set via --ra-aurora-dur (not animation-duration directly) — the bare
   longhand form used to win the cascade against ANY animation running on
   #tab-dashboard (ID beats the .tab-panel.active.slide-r class chain on
   animation-duration alone), so it hijacked the one-time tab-switch
   entrance fade and stretched it to 9s. The custom property only feeds
   ra-aurora's own duration (ra-ui.css), leaving the entrance animation's
   duration untouched. (user-reported, 2026-07-24 — dashboard tab fading
   in slowly on open.) */
#tab-dashboard.ra-aurora-bg { --ra-aurora-dur: calc(var(--ra-motion, .15s) * 60); }

/* per-effect settings toggles (Settings > Ambient Motion) — markup-based
   effects gate cleanest via display:none on their own element rather than
   fighting the class-based approach used for the class-only kit primitives */
body.ra-fx-hearth-off #ra-hearth { display: none; }
body.ra-fx-ekg-off #ra-ekg { display: none; }
body.ra-fx-freshness-bar-off #ra-freshness { display: none; }

/* Backlinks modal — two-pane body (left: full content of the item, right:
   the backlink list), added 2026-07-14 per direct user request. The modal
   box itself is fixed-size (width+height, not max-height — see the inline
   style on #backlinks-modal's child) so it never resizes as different
   views load; each pane scrolls independently instead. Views with nothing
   to put in the right pane (showLookupChooser, a todo/event's showDetail)
   leave #backlinks-links empty — :empty collapses it out and the content
   pane takes the full width, so those views still read as a single list
   rather than a lopsided two-column layout with a blank side. */
/* 2026-10-04: the modal box is a kit .ra-card (theme borders/shadows/fonts apply); this only pins
   the modal geometry the card's padding/margin/hover rules would otherwise disturb */
#backlinks-modal > .bl-box.ra-card { padding: 0 !important; margin: 0 !important; box-sizing: border-box; background: var(--ra-card-bg, var(--ra-surface-1)); box-shadow: var(--ra-shadow-2); }
.bl-body { display: flex; flex: 1; min-height: 0; }
.bl-pane { flex: 1; min-width: 0; overflow-y: auto; box-sizing: border-box;
           padding: calc(14px * var(--ra-density,1)) calc(18px * var(--ra-density,1)); font-size: calc(11px * var(--fsc,1) * var(--ra-fs-scale,1)); line-height: 1.7; }
/* 300px -> 340px (2026-07-26, Phase 20) — a mission can now carry 5 FK
   slots (serves goal, tracks record, reference todos/ideas/activities,
   Phases 7/12/17/18); long idea-title chips were wrapping mid-word inside
   300px's ~264px usable width. */
.bl-pane-links { flex: 0 0 340px; border-left: 1px solid var(--ra-border); }
.bl-pane-links:empty { display: none; }
/* Collapsible links pane + wide mission page (core-backlinks-layout.js, 2026-10-08) */
.bl-body.bl-links-collapsed .bl-pane-links { display: none; }
#backlinks-modal > .bl-box.bl-wide { width: min(1200px, 96vw) !important; height: min(780px, 90vh) !important; }
@media (max-width: 680px) {
  /* Narrow viewports: stack instead of side-by-side, each pane keeps its
     own scroll within half the fixed body height. */
  .bl-body { flex-direction: column; }
  .bl-pane-links { flex: 1 1 0; border-left: none; border-top: 1px solid var(--ra-border); }
}

/* ── generic panel-in-modal viewer (core-hotkeys.js openPanelModal) ── */
#panel-modal { opacity: 0; transition: opacity .16s ease; }
#panel-modal.pm-open { opacity: 1; }
#panel-modal .panel-modal-box { transform: translate(-50%,-50%) scale(.94); opacity: 0; transition: transform .16s ease, opacity .16s ease; }
#panel-modal.pm-open .panel-modal-box { transform: translate(-50%,-50%) scale(1); opacity: 1; }

/* ── claude-usage reminder effects (2026-07-17, reworked 07-18) ── */
@keyframes cuPulseIdle { 0%,100%{box-shadow:0 0 0 0 transparent} 50%{box-shadow:0 0 12px 2px color-mix(in srgb,var(--ra-ok) 35%,transparent)} }
@keyframes cuPulseBurn { 0%,100%{box-shadow:0 0 0 0 transparent} 50%{box-shadow:0 0 14px 3px color-mix(in srgb,var(--ra-warn) 45%,transparent)} }
.cu-idle-session { animation: cuPulseIdle 2.2s ease-in-out infinite; border-color: var(--ra-ok, #4ade80) !important; }
.cu-burn-weekly  { animation: cuPulseBurn 1.6s ease-in-out infinite; border-color: var(--ra-warn, #fb923c) !important; }
.cu-hint { font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1)); border-radius:var(--ra-radius-md); padding:calc(3px * var(--ra-density,1)) calc(6px * var(--ra-density,1)); margin-top:calc(5px * var(--ra-density,1)); line-height:1.35 }
.cu-hint.idle { color: var(--ra-ok); background: color-mix(in srgb,var(--ra-ok) 8%,transparent) }
.cu-hint.burn { color: var(--ra-warn); background: color-mix(in srgb,var(--ra-warn) 10%,transparent) }
.cu-account-grid,.codex-account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:calc(12px * var(--ra-density,1));align-items:stretch}
.cu-account-card,.codex-account-card{display:flex;flex-direction:column;gap:calc(10px * var(--ra-density,1));min-width:0;padding:calc(13px * var(--ra-density,1)) calc(14px * var(--ra-density,1));background:var(--ra-card-bg);border:1px solid var(--ra-border);border-radius:14px;box-shadow:var(--ra-shadow-0);transition:border-color var(--ra-motion) var(--ra-ease),box-shadow var(--ra-motion) var(--ra-ease),transform var(--ra-motion) var(--ra-ease)}
.cu-account-card:hover,.codex-account-card:hover{transform:translateY(-1px);box-shadow:var(--ra-shadow-1)}
.cu-account-card[data-cu-tone="ok"],.codex-account-card[data-cx-tone="ok"]{border-top:3px solid var(--ra-ok)}
.cu-account-card[data-cu-tone="warn"],.codex-account-card[data-cx-tone="warn"]{border-top:3px solid var(--ra-warn)}
.cu-account-card[data-cu-tone="danger"],.codex-account-card[data-cx-tone="danger"]{border-top:3px solid var(--ra-danger)}
.cu-account-card[data-cu-tone="muted"],.codex-account-card[data-cx-tone="muted"]{border-top:3px solid var(--ra-border-strong)}
.cu-card-head,.cx-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(12px * var(--ra-density,1));min-width:0}
.cu-card-ident,.cx-card-ident{display:flex;align-items:flex-start;gap:calc(8px * var(--ra-density,1));min-width:0;flex:1}
.cu-account-title,.cx-account-title{display:inline-flex;align-items:center;gap:calc(6px * var(--ra-density,1));padding:0;border:0;background:none;color:var(--ra-text-bright);font:700 calc(12px * var(--fsc,1) * var(--ra-fs-scale,1))/1.2 var(--font-body);text-align:left;cursor:pointer}
.cu-account-title:hover,.cx-account-title:hover{color:var(--ra-accent)}
.cu-account-email,.cx-account-email{margin-top:calc(2px * var(--ra-density,1));color:var(--ra-text-mid);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.35;overflow-wrap:anywhere}
.cu-card-meta,.cx-card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:calc(4px * var(--ra-density,1));min-width:0}
.cu-status-pill{display:inline-flex;align-items:center;gap:calc(5px * var(--ra-density,1));padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-pill);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;letter-spacing:.03em;white-space:nowrap;border:1px solid var(--ra-border);background:var(--ra-surface-2);color:var(--ra-text-mid)}
.cu-status-pill.is-ok{background:var(--ra-ok-bg);border-color:var(--ra-ok-border);color:var(--ra-ok)}
.cu-status-pill.is-warn{background:var(--ra-warn-bg);border-color:var(--ra-warn-border);color:var(--ra-warn)}
.cu-status-pill.is-danger{background:var(--ra-danger-bg);border-color:var(--ra-danger-border);color:var(--ra-danger)}
.cu-status-pill.is-muted{background:var(--ra-surface-2);color:var(--ra-text-muted)}
.cu-limit-stack{display:grid;gap:calc(8px * var(--ra-density,1))}
.cu-limit-row{padding:calc(9px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:11px;background:var(--ra-surface-1)}
.cu-limit-head{display:flex;justify-content:space-between;align-items:baseline;gap:calc(8px * var(--ra-density,1));min-width:0}
.cu-limit-label{color:var(--ra-text-faint);text-transform:uppercase;letter-spacing:.08em;font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700}
.cu-limit-value{display:inline-flex;align-items:center;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap;justify-content:flex-end;color:var(--ra-text-bright);font-size:calc(10.5px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;text-align:right}
.cu-limit-reset{color:var(--ra-text-muted);font-weight:500}
.cu-edit-toggle{padding:0;border:0;background:none;color:var(--ra-text-muted);cursor:pointer;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cu-limit-meter{height:6px;margin-top:calc(8px * var(--ra-density,1));background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-pill);overflow:hidden}
.cu-limit-meter > div{transition:width .25s ease}
.cu-limit-edit{display:none;gap:calc(6px * var(--ra-density,1));align-items:center;flex-wrap:wrap;margin-top:calc(7px * var(--ra-density,1))}
.cu-limit-edit input{background:var(--ra-bg);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);color:var(--ra-text-bright);padding:calc(4px * var(--ra-density,1)) calc(6px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cu-save-btn,.cu-open-btn,.cx-open-btn{background:var(--ra-surface-2);border:1px solid var(--ra-border);color:var(--ra-text-mid);border-radius:var(--ra-radius-pill);padding:calc(4px * var(--ra-density,1)) calc(9px * var(--ra-density,1));cursor:pointer;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));transition:border-color var(--ra-motion) var(--ra-ease),color var(--ra-motion) var(--ra-ease),background var(--ra-motion) var(--ra-ease)}
.cu-save-btn:hover,.cu-open-btn:hover,.cx-open-btn:hover{border-color:var(--ra-accent);color:var(--ra-text)}
.cu-updated{color:var(--ra-text-faint);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cu-card-footer,.cx-card-footer{display:flex;justify-content:space-between;align-items:center;gap:calc(8px * var(--ra-density,1));flex-wrap:wrap;margin-top:auto}
.cu-footer-text,.cx-footer-text{color:var(--ra-text-faint);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1))}
.cx-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8px * var(--ra-density,1))}
.cx-stat{padding:calc(9px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-lg);background:var(--ra-surface-1);min-width:0}
.cx-stat small{display:block;color:var(--ra-text-faint);font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;text-transform:uppercase}
.cx-stat strong{display:block;margin-top:calc(4px * var(--ra-density,1));font-size:calc(18px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-bright);line-height:1}
.cx-stat span{display:block;margin-top:calc(2px * var(--ra-density,1));color:var(--ra-text-muted);font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.35}
.cx-meter{height:7px;border:1px solid var(--ra-border);background:var(--ra-surface-2);border-radius:var(--ra-radius-pill);overflow:hidden}
.cx-meter-fill{height:100%;transition:width .25s ease}
.cx-note{font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.45;border-radius:var(--ra-radius-md);padding:calc(5px * var(--ra-density,1)) calc(7px * var(--ra-density,1))}
.cx-note.is-ok{background:color-mix(in srgb, var(--ra-ok) 10%, transparent);color:var(--ra-ok)}
.cx-note.is-warn{background:color-mix(in srgb, var(--ra-warn) 10%, transparent);color:var(--ra-warn)}
.cx-model-list{display:grid;gap:calc(4px * var(--ra-density,1))}
.cx-model-row{display:flex;justify-content:space-between;gap:calc(10px * var(--ra-density,1));align-items:baseline;padding:calc(4px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-divider)}
.cx-model-row:last-child{border-bottom:0}
.cx-model-name{color:var(--ra-text-mid);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;overflow-wrap:anywhere}
.cx-model-name small{font-weight:500;color:var(--ra-text-faint)}
.cx-model-value{color:var(--ra-text-bright);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));text-align:right;white-space:nowrap}
.cx-empty-note,.cx-login-hint,.cx-trial-callout{font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.4;border-radius:var(--ra-radius-md);padding:calc(6px * var(--ra-density,1)) calc(8px * var(--ra-density,1))}
.cx-empty-note{color:var(--ra-text-muted);background:var(--ra-surface-1);border:1px dashed var(--ra-border)}
.cx-login-hint{color:var(--ra-warn);background:var(--ra-warn-bg);border:1px solid var(--ra-warn-border)}
.cx-trial-callout{margin-top:calc(2px * var(--ra-density,1));background:var(--ra-surface-1);border:1px solid var(--ra-border);color:var(--ra-text-mid)}
.cx-trial-callout.is-danger{color:var(--ra-danger);border-color:var(--ra-danger-border);background:var(--ra-danger-bg)}
.cx-trial-callout.is-warn{color:var(--ra-warn);border-color:var(--ra-warn-border);background:var(--ra-warn-bg)}
.cx-link{color:var(--ra-accent);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));text-decoration:none;white-space:nowrap}
.cx-link:hover{text-decoration:underline}
@container pane (max-width:760px){.cu-account-grid,.codex-account-grid{grid-template-columns:1fr}.cx-stat-grid{grid-template-columns:1fr}.cu-card-head,.cx-card-head{flex-direction:column}.cu-card-meta,.cx-card-meta{align-items:flex-start}.cu-limit-value{justify-content:flex-start;text-align:left}.cu-card-footer,.cx-card-footer{justify-content:flex-start}}
/* Global cabinet graph (global-entity-graph-spec.md). */
.entity-graph-header,.entity-graph-actions,.entity-graph-layout,.entity-graph-viewbar,.entity-graph-view-actions{display:flex;gap:calc(10px * var(--ra-density,1))}
.entity-graph-header{justify-content:space-between;align-items:center;flex-wrap:wrap}
.entity-graph-actions{align-items:center;flex-wrap:wrap}
.entity-graph-actions input{min-width:220px;background:var(--ra-surface-2);color:var(--ra-text);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);padding:calc(6px * var(--ra-density,1)) calc(9px * var(--ra-density,1))}
.entity-graph-actions button,#entity-graph-filters button,.entity-graph-view-actions button{background:var(--ra-surface-2);color:var(--ra-text-mid);border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);padding:calc(4px * var(--ra-density,1)) calc(9px * var(--ra-density,1));cursor:pointer;font-weight:600}
.entity-graph-viewbar{justify-content:space-between;align-items:center;margin-top:calc(7px * var(--ra-density,1))}
.entity-graph-view-actions{gap:calc(4px * var(--ra-density,1))}.entity-graph-view-actions button.on{background:var(--ra-text);color:var(--ra-bg);border-color:var(--ra-text)}
.entity-graph-layout{align-items:stretch;margin-top:calc(8px * var(--ra-density,1))}
#entity-graph-panel{position:relative;min-width:0;flex:1;min-height:640px;border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);overflow:hidden;background:var(--ra-bg)}
#entity-graph-panel svg{display:block}
#entity-graph-inspector{width:280px;padding:calc(14px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);background:var(--ra-surface-1);overflow:auto}
#entity-graph-minimap{position:absolute;right:12px;bottom:12px;width:150px;height:92px;border:1px solid var(--ra-border);background:color-mix(in srgb,var(--ra-surface-1) 92%,transparent);border-radius:var(--ra-radius-sm);pointer-events:none}
.entity-graph-cluster-label{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700;letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
#entity-graph-filters{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1));margin-top:calc(8px * var(--ra-density,1))}
#entity-graph-filters button.off{opacity:.35}
.entity-graph-filter-more{display:inline-block}.entity-graph-filter-more>summary,.entity-graph-data-options>summary{cursor:pointer;color:var(--ra-text-faint);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));padding:calc(5px * var(--ra-density,1)) calc(7px * var(--ra-density,1))}
.entity-graph-filter-more-body{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1));margin-top:calc(5px * var(--ra-density,1));padding:calc(6px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm)}
.entity-graph-data-options{margin-top:calc(3px * var(--ra-density,1))}.entity-graph-data-options[open]{padding:calc(5px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm)}
.entity-graph-data-options input[type=date]{background:var(--ra-surface-2);color:var(--ra-text);border:1px solid var(--ra-border);padding:calc(3px * var(--ra-density,1))}
.entity-graph-muted{color:var(--ra-text-faint);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.entity-graph-candidate-toggle{display:inline-flex;gap:calc(5px * var(--ra-density,1));align-items:center;margin-top:calc(7px * var(--ra-density,1));color:var(--ra-text-mid);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.entity-graph-warning{color:var(--ra-warn)}
.entity-graph-inspector-row{padding:calc(5px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-border);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
#entity-graph-isolated details{margin-top:calc(8px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-md)}
#entity-graph-isolated button{margin:calc(2px * var(--ra-density,1));padding:calc(3px * var(--ra-density,1)) calc(7px * var(--ra-density,1));border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-surface-2);color:var(--ra-text-mid);cursor:pointer}
.entity-graph-accessible{margin-top:calc(8px * var(--ra-density,1))}.entity-graph-accessible ul{max-height:260px;overflow:auto}.entity-graph-accessible button{border:0;background:transparent;color:var(--ra-text-mid);text-align:left;cursor:pointer;padding:calc(3px * var(--ra-density,1))}
@media(prefers-reduced-motion:reduce){#entity-graph-panel *{transition:none!important}}
@container pane (max-width:760px){.entity-graph-layout{display:block}#entity-graph-inspector{width:auto;margin-top:calc(8px * var(--ra-density,1))}#entity-graph-panel{min-height:460px}}
.trig-logic-grid {
  display: grid;
  grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
  gap: calc(5px * var(--ra-density,1)) calc(12px * var(--ra-density,1));
  line-height: 1.4;
}
.trig-logic-label {
  color: var(--ra-text-muted);
  font-weight: 600;
}
.trig-logic-grid > div { min-width: 0; overflow-wrap: anywhere; }
.trig-now { min-width: 0; }
.trig-now-head { padding: calc(7px * var(--ra-density,1)) calc(9px * var(--ra-density,1)); border-radius: var(--ra-radius-sm); overflow-wrap: anywhere; }
.trig-now-pass { color: var(--ra-ok); background: color-mix(in srgb, var(--ra-ok) 10%, transparent); }
.trig-now-wait { color: var(--ra-warn); background: color-mix(in srgb, var(--ra-warn) 10%, transparent); }
.trig-now-block { color: var(--ra-danger); background: color-mix(in srgb, var(--ra-danger) 10%, transparent); }
.trig-now-context { margin: calc(7px * var(--ra-density,1)) 0; line-height: 1.5; overflow-wrap: anywhere; }
.trig-now-fresh { color: var(--ra-ok); }
.trig-now-stale { color: var(--ra-danger); font-weight: 700; }
.trig-now-gates { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: calc(4px * var(--ra-density,1)); margin: calc(6px * var(--ra-density,1)) 0; }
.trig-now-gate { display: grid; grid-template-columns: 14px minmax(80px, max-content) minmax(0, 1fr); gap: calc(6px * var(--ra-density,1)); padding: calc(4px * var(--ra-density,1)) calc(6px * var(--ra-density,1)); border: 1px solid var(--ra-border); border-radius: var(--ra-radius-sm); overflow-wrap: anywhere; }
.trig-now-gate.pass > span:first-child { color: var(--ra-ok); }
.trig-now-gate.fail { border-color: var(--ra-danger); }
.trig-now-gate.fail > span:first-child { color: var(--ra-danger); }
.trig-now-summary { padding: calc(6px * var(--ra-density,1)) calc(9px * var(--ra-density,1)); margin-bottom: calc(6px * var(--ra-density,1)); border-radius: var(--ra-radius-sm); font-size: calc(11px * var(--fsc,1) * var(--ra-fs-scale,1)); background: var(--ra-bg-inset, color-mix(in srgb, var(--ra-text) 5%, transparent)); border: 1px dashed var(--ra-border); overflow-wrap: anywhere; }
@container pane (max-width: 640px) {
  .trig-logic-grid { grid-template-columns: 1fr; gap: calc(2px * var(--ra-density,1)); }
  .trig-logic-label:not(:first-child) { margin-top: calc(6px * var(--ra-density,1)); }
  .trig-now-gates { grid-template-columns: 1fr; }
  .trig-now-gate { grid-template-columns: 14px 90px minmax(0, 1fr); }
}

/* ─── dock mode (dock-layout-spec.md §5, WP2) ──────────────────────────────
   Classic mode is untouched: every rule below is gated on body.dock-on or on
   #dock-root, so a dashboard without ?dock=1 renders exactly as before.
   Panels are moved into .dock-body by core-dock.js, never rebuilt. */

/* Unmounted panels live here (§5.2) — never destroyed, so nothing has to
   re-initialize on re-dock. */
#tab-parking { display: none; }

/* Left in the DOM but inert after dockDisable(). */
#dock-root { display: none; }

/* Scroll ownership (§5.6): each pane scrolls independently and the document
   must not, or the window gets a second scrollbar behind the panes. */
body.dock-on { overflow: hidden; }
/* The --dock-inset-* vars mirror the body padding each nav mode uses to
   reserve space for its fixed bars; core-dock.js's _dockSyncInsets() keeps them
   in sync. position:fixed ignores body padding, so without them nav-split's two
   52px side rails render on top of the panes. */
body.dock-on #dock-root {
  display: block; position: fixed;
  left: var(--dock-inset-l, 0px); right: var(--dock-inset-r, 0px);
  top: calc(var(--topbar-h, 54px) + var(--ra-sidebar-top-extra, 0px));
  bottom: var(--dock-inset-b, 0px); overflow: hidden; z-index: 1;
}

/* Only the outermost node pads away from the window edge; nested splits use the
   divider itself for separation, or the gutters compound at every level. */
.dock-split { display: flex; min-width: 0; min-height: 0; flex: 1 1 auto; }
.dock-split[data-axis="col"] { flex-direction: column; }
body.dock-on #dock-root > .dock-node { height: 100%; padding: calc(6px * var(--ra-density,1)); box-sizing: border-box; }
/* min-width/min-height:0 is load-bearing — without it a flex child refuses to
   shrink below its content's intrinsic size and the panes overflow the window
   instead of sharing it. */
.dock-node { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; }
.dock-group {
  display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0;
  border: 1px solid var(--ra-border); border-radius: var(--ra-radius-md);
  background: var(--ra-surface-1); overflow: hidden;
}

.dock-tabstrip {
  display: flex; gap: calc(4px * var(--ra-density,1)); flex: 0 0 auto; padding: calc(4px * var(--ra-density,1)) calc(6px * var(--ra-density,1));
  background: var(--ra-surface-2); border-bottom: 1px solid var(--ra-border);
  overflow-x: auto; scrollbar-width: none;
}
.dock-tab {
  font: inherit; font-size: calc(12px * var(--fsc,1) * var(--ra-fs-scale,1)); line-height: 1.4; white-space: nowrap;
  padding: calc(3px * var(--ra-density,1)) calc(9px * var(--ra-density,1)); border-radius: var(--ra-radius-md); cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--ra-text-muted);
}
.dock-tab:hover { color: var(--ra-text); background: var(--ra-surface-3); }
.dock-tab.active {
  color: var(--ra-text-bright); background: var(--ra-accent-bg);
  border-color: var(--ra-accent-border);
}

/* --topbar-h:0px is the whole fix for the six inline position:sticky sub-tab
   bars (§5.5). They resolve `top:var(--topbar-h,54px)` against the inherited
   custom property, so overriding the VARIABLE works even though the `top` is
   an inline style that no stylesheet rule could outrank. */
.dock-body { flex: 1 1 auto; min-height: 0; overflow: auto; --topbar-h: 0px; }

/* Visibility within a group (§5.4). Entrance animations are disabled in dock
   mode: slide-l/slide-r are computed from global tab order and read as jitter
   inside a pane. */
#dock-root .dock-body > .tab-panel { display: block; animation: none; }
#dock-root .dock-body > .tab-panel:not(.dock-active) { display: none; }

/* Dividers (§12.3): pointer-drag, dblclick to equalize, arrow keys when
   focused. The hit area is deliberately wider than the visible line — a 1px
   target is unusable, and the ::after rule paints the thin line inside it. */
.dock-divider {
  flex: 0 0 auto; position: relative; background: transparent;
  border: 0; padding: 0; align-self: stretch;
}
.dock-split[data-axis="row"] > .dock-divider { width: 8px; cursor: col-resize; }
.dock-split[data-axis="col"] > .dock-divider { height: 8px; cursor: row-resize; }
.dock-divider::after {
  content: ''; position: absolute; background: var(--ra-surface-2);
  border-radius: var(--ra-radius-sm); transition: background var(--ra-motion, .15s);
}
.dock-split[data-axis="row"] > .dock-divider::after { top: 0; bottom: 0; left: 3px; width: 2px; }
.dock-split[data-axis="col"] > .dock-divider::after { left: 0; right: 0; top: 3px; height: 2px; }
.dock-divider:hover::after,
.dock-divider:focus-visible::after,
.dock-divider.dragging::after { background: var(--ra-accent-strong); }
.dock-divider:focus-visible { outline: none; }

/* While a divider is being dragged, nothing else should react to the pointer —
   without this, crossing a pane selects its text, and crossing a module iframe
   hands the pointer to the iframe and the drag dies mid-gesture. */
body.dock-resizing { cursor: col-resize; user-select: none; }
body.dock-resizing .dock-body { pointer-events: none; }

/* ── WP5: tab-strip chrome, ⋮ menu, drag & drop ─────────────────────────────── */

.dock-tabstrip > .dock-tab { cursor: grab; }
body.dock-dragging .dock-tabstrip > .dock-tab { cursor: grabbing; }
.dock-menu-btn {
  flex: 0 0 auto; margin-left: auto; font: inherit; font-size: calc(13px * var(--fsc,1) * var(--ra-fs-scale,1)); line-height: 1;
  padding: calc(3px * var(--ra-density,1)) calc(7px * var(--ra-density,1)); border-radius: var(--ra-radius-md); cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--ra-text-muted);
}
.dock-menu-btn:hover { color: var(--ra-text-bright); background: var(--ra-surface-3); }

.dock-menu {
  position: fixed; z-index: var(--ra-z-dock-menu); min-width: 150px; padding: calc(4px * var(--ra-density,1));
  display: flex; flex-direction: column; gap: 1px;
  background: var(--ra-surface-2); border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md); box-shadow: var(--ra-shadow-2);
}
.dock-menu-item {
  font: inherit; font-size: calc(12px * var(--fsc,1) * var(--ra-fs-scale,1)); text-align: left; white-space: nowrap;
  padding: calc(5px * var(--ra-density,1)) calc(9px * var(--ra-density,1)); border-radius: var(--ra-radius-sm); cursor: pointer;
  background: transparent; border: 0; color: var(--ra-text);
}
.dock-menu-item:hover:not(.disabled) { background: var(--ra-accent-bg); color: var(--ra-text-bright); }
.dock-menu-item.disabled { color: var(--ra-text-faint); cursor: default; }

/* Same reason as body.dock-resizing: without pointer-events:none on the bodies,
   elementFromPoint returns panel content (or a module iframe swallows the move)
   and the drop target can never be resolved. */
body.dock-dragging { user-select: none; }
body.dock-dragging .dock-body { pointer-events: none; }

#dock-drag-label {
  position: fixed; z-index: var(--ra-z-dock-drag); pointer-events: none;
  font-size: calc(12px * var(--fsc,1) * var(--ra-fs-scale,1)); padding: calc(3px * var(--ra-density,1)) calc(9px * var(--ra-density,1)); border-radius: var(--ra-radius-md); opacity: .85;
  background: var(--ra-accent-bg); border: 1px solid var(--ra-accent-strong);
  color: var(--ra-text-bright); white-space: nowrap;
}
/* Sized to the region the drop would occupy, so it previews the resulting split
   rather than just marking a target (spec §12.2: no ghost beyond a label). */
#dock-drop-hint {
  position: fixed; z-index: var(--ra-z-dock-hint); pointer-events: none;
  background: var(--ra-accent-bg); opacity: .35;
  border: 2px solid var(--ra-accent-strong); border-radius: var(--ra-radius-md);
  transition: left .08s ease, top .08s ease, width .08s ease, height .08s ease;
}

/* ── WP5: module-iframe sizing in a pane (spec §7) ───────────────────────────
   The 6 module iframes carry an inline height:calc(100vh - 60px - reserve), which
   is right for classic mode and wrong in a pane — 100vh is the WINDOW. Inline
   styles beat any stylesheet rule (specificity 1000), so overriding needs
   !important; the spec's alternative was editing those inline styles in
   index.html, which is a shared-core lock file this session must not touch.
   Scoped to iframe[data-module], which is exactly those 6 and is a direct child
   of its panel — #loc-log-frame sits deeper inside the Logs panel alongside other
   content and must keep its own height, and the /graph iframe already uses flex:1. */
#dock-root .dock-body > .tab-panel:has(> iframe[data-module]) { height: 100%; }
#dock-root .dock-body > .tab-panel > iframe[data-module] { height: 100% !important; }

/* ── WP6: topbar layout switcher + mode-filter empty state ─────────────────── */
#dock-layout-wrap { display: inline-flex; align-items: center; gap: calc(2px * var(--ra-density,1)); }
#dock-layout-select {
  font: inherit; font-size: calc(11px * var(--fsc,1) * var(--ra-fs-scale,1)); max-width: 130px; padding: calc(2px * var(--ra-density,1)) calc(4px * var(--ra-density,1));
  border-radius: var(--ra-radius-md); background: var(--ra-input-bg);
  border: 1px solid var(--ra-input-border); color: var(--ra-input-text);
}
#dock-layout-menu-btn { padding: 0 calc(5px * var(--ra-density,1)); }
/* Dock (drag-to-split multi-pane) is a desktop power-user feature — the JS
   itself already refuses to start a drag-split below DOCK_MIN_WIDTH (880px,
   dock-ui-controls.js) unless dock mode is already on, so a phone screen has
   no real use for the layout selector taking up a whole row of the topbar.
   Hide it below that same 880px, but keep it reachable if dock mode DOES
   happen to be active (body.dock-on, set by dockEnable()) so there's still
   a way to switch back to classic from a phone that inherited a saved
   dock layout from desktop use. */
@media(max-width:880px){
  #dock-layout-wrap{display:none}
  body.dock-on #dock-layout-wrap{display:inline-flex}
}

/* Shown when the active mode hides every tab in the layout — §10.1 forbids
   rendering an empty pane labelled with a hidden tab's name, so there is nothing
   to draw and the reason has to be stated instead. */
.dock-empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; padding: calc(24px * var(--ra-density,1)); line-height: 1.6;
  font-size: calc(12px * var(--fsc,1) * var(--ra-fs-scale,1)); color: var(--ra-text-muted);
}
/* Cmd+1…9 / Cmd+Alt+arrows move focus between panes — without a visible pulse
   the keypress looks like it did nothing. */
.dock-group.dock-focus-flash { box-shadow: inset 0 0 0 2px var(--ra-accent-strong); }

/* ── pane window controls (2026-07-30): macOS traffic lights, right-aligned
   because the tab chips own the left of the strip. Close and Maximize moved out
   of the ⋮ menu into real buttons; the ⋮ (amber) is the third control. ───────── */
.dock-lights { display: inline-flex; align-items: center; gap: calc(6px * var(--ra-density,1)); margin-left: auto; flex: 0 0 auto; padding-left: calc(6px * var(--ra-density,1)); }
.dock-light {
  width: 12px; height: 12px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ra-border-strong); position: relative; line-height: 0;
  transition: filter var(--ra-motion, .15s);
}
.dock-light:hover { filter: brightness(1.18); }
.dock-light:active { filter: brightness(.85); }
.dock-light-close { background: var(--ra-danger); }
.dock-light-menu  { background: var(--ra-warn); }
.dock-light-max   { background: var(--ra-ok); }
/* Glyph on hover only, same as macOS. */
.dock-light::after {
  content: ''; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: calc(9px * var(--fsc,1) * var(--ra-fs-scale,1)); line-height: 1; color: var(--ra-btn-text); opacity: 0;
}
.dock-lights:hover .dock-light::after { opacity: 1; }
.dock-light-close::after { content: '✕'; }
.dock-light-menu::after  { content: '⋮'; }
.dock-light-max::after   { content: '⤢'; }

/* Per-chip close × (2026-07-30) — visible alternative to middle-click, which is
   both invisible and unavailable on a trackpad. */
.dock-tab { display: inline-flex; align-items: center; gap: calc(5px * var(--ra-density,1)); }
.dock-tab-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: var(--ra-radius-sm); font-size: calc(12px * var(--fsc,1) * var(--ra-fs-scale,1)); line-height: 1;
  color: var(--ra-text-faint); cursor: pointer;
}
.dock-tab-close:hover { background: var(--ra-danger-bg); color: var(--ra-danger); }
@container pane (max-width: 700px) { #agent-status { width:100%; margin-left:0; } .agent-hub-toolbar select { min-width:90px; } .agent-panes { grid-template-columns:1fr !important; grid-template-rows:repeat(auto-fit,minmax(280px,1fr)); overflow:auto; } }
@media(max-width:760px){#tab-ai .ai-route-form{grid-template-columns:1fr}#tab-ai .ai-route-form .ai-btn{width:100%}}
#tab-ai{--ai-surface:color-mix(in srgb,var(--ra-bg) 88%,var(--ra-info) 12%);--ai-raised:color-mix(in srgb,var(--ra-bg) 82%,var(--ra-text-bright) 18%);--ai-accent:var(--ra-info);--ai-violet:var(--ra-purple);color:var(--ra-text)}
@media(max-width:760px){.ai-hub-header{align-items:flex-start;padding-top:calc(18px * var(--ra-density,1))}.ai-hub-header p{max-width:230px}.ai-header-status{font-size:0;padding:calc(8px * var(--ra-density,1))}.ai-subtab-nav{top:var(--topbar-h,54px);padding-inline:calc(10px * var(--ra-density,1))}.ai-subtab-btn{padding:calc(8px * var(--ra-density,1))}.ai-stat-grid{grid-template-columns:repeat(2,1fr)}.ai-subtab-content{padding-top:calc(14px * var(--ra-density,1))}.ai-account-row{grid-template-columns:34px 1fr}.ai-account-actions{grid-column:2}.ai-account-facts{gap:calc(7px * var(--ra-density,1)) calc(11px * var(--ra-density,1))}.ai-list-row{grid-template-columns:27px 1fr auto}.ai-chevron{display:none}.ai-usage-list{grid-template-columns:1fr;padding:calc(8px * var(--ra-density,1))}.ai-section-head{align-items:flex-start}.ai-section-head p{max-width:230px}}
@media(max-width:600px){.ai-drawer{width:96vw;max-height:92vh}}

/* tools-tab-ideas.md #26 (2026-08-02) — skeleton loading placeholder for
   the Tools panels (replaces the old static "loading…" text). The renderers
   overwrite the placeholder on first load; the pulse gives a live-loading
   feel instead of a stale-looking label. */
.ra-skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:calc(8px * var(--ra-density,1));padding:calc(10px * var(--ra-density,1)) 0;color:var(--ra-text-faint);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.ra-skeleton-grid::before{content:"";grid-column:1/-1;height:2px;border-radius:var(--ra-radius-sm);background:linear-gradient(90deg,var(--ra-surface-2) 25%,var(--ra-accent-border) 50%,var(--ra-surface-2) 75%);background-size:200% 100%;animation:ra-skeleton-shimmer 1.4s linear infinite}
.ra-skeleton-grid::after{content:"… loading tool data";opacity:.7}
@keyframes ra-skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Feature Matrix / System navigation contract (2026-08-11). The System tab
   has grown past a single viewport row; preserve usable button widths and let
   the rail scroll instead of shrinking labels into unreadable slivers. */
#system-subtab-nav {
  overflow-x: auto;
  scrollbar-width: thin;
  flex-wrap: nowrap;
  overscroll-behavior-inline: contain;
}
#system-subtab-nav .system-subtab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 36px;
}
.matrix-summary {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * var(--ra-density,1)) calc(12px * var(--ra-density,1));
  margin-bottom: calc(8px * var(--ra-density,1));
  color: var(--ra-text-mid);
  font-size: var(--ra-fs-sm, 10px);
}
.matrix-summary-item { white-space: nowrap; }
.matrix-toolbar { display: flex; gap: calc(8px * var(--ra-density,1)); margin-bottom: calc(8px * var(--ra-density,1)); }
.matrix-toolbar input {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  background: var(--ra-bg-inset, transparent);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-sm, 6px);
  color: var(--ra-text);
  padding: calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1));
}
.matrix-legend { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ra-density,1)) calc(12px * var(--ra-density,1)); margin-bottom: calc(6px * var(--ra-density,1)); font-size: var(--ra-fs-sm, 10px); }
.matrix-table-hint { margin-bottom: calc(6px * var(--ra-density,1)); }
.matrix-table-scroll {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-sm, 6px);
}
.matrix-table-scroll table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: var(--ra-fs-md, 11px); }
.matrix-table-scroll th,
.matrix-table-scroll td { padding: calc(4px * var(--ra-density,1)) calc(6px * var(--ra-density,1)); border-bottom: 1px solid var(--ra-border); }
.matrix-table-scroll th:first-child,
.matrix-table-scroll td:first-child { position: sticky; left: 0; z-index: 1; background: var(--ra-bg); }
.matrix-row-disclosure,
.matrix-header-help,
.matrix-round-disclosure,
.matrix-text-disclosure {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.matrix-row-disclosure,
.matrix-header-help {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}
.matrix-row-disclosure { text-decoration: underline dotted; text-underline-offset: 2px; }
.matrix-header-help { text-decoration: underline dotted; text-underline-offset: 2px; }
.matrix-round-disclosure {
  width: 100%;
  border: 0;
  background: var(--ra-bg-inset, transparent);
  padding: calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1));
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}
.matrix-text-disclosure {
  display: block;
  width: 100%;
  max-height: 2.6em;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  font-size: var(--ra-fs-sm, 10px);
  line-height: 1.3;
}
.matrix-text-disclosure.is-open { max-height: none; }
.matrix-history-scroll {
  max-height: min(560px, 65vh);
  overflow: auto;
  padding-right: calc(4px * var(--ra-density,1));
}
.matrix-empty { padding: calc(16px * var(--ra-density,1)); color: var(--ra-text-muted); text-align: center; }

/* Dashboard Usage — compact read-only aggregate tables. */
.usage-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:calc(8px * var(--ra-density,1)); margin-bottom:calc(12px * var(--ra-density,1)); }
.usage-cards > div { background:var(--ra-bg-inset,transparent); border:1px solid var(--ra-border); border-radius:var(--ra-radius-md); padding:calc(10px * var(--ra-density,1)); }
.usage-cards b { display:block; font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1)); color:var(--ra-accent-strong); }
.usage-cards span { color:var(--ra-text-muted); font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1)); }
.usage-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:calc(12px * var(--ra-density,1)); margin-bottom:calc(12px * var(--ra-density,1)); }
.usage-detail-card { background:var(--ra-bg-inset,transparent); border:1px solid var(--ra-border); border-radius:var(--ra-radius-md); padding:calc(10px * var(--ra-density,1)); }
.usage-detail-card h4 { margin:0 0 calc(4px * var(--ra-density,1)); }
.usage-note { color:var(--ra-text-muted); font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1)); margin:0 0 calc(6px * var(--ra-density,1)); }
.usage-table { width:100%; border-collapse:collapse; font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1)); }
.usage-table th, .usage-table td { text-align:left; padding:calc(5px * var(--ra-density,1)) calc(7px * var(--ra-density,1)); border-bottom:1px solid var(--ra-border); }
.usage-table th { color:var(--ra-text-muted); font-weight:600; }
.mac-ram-profiles{display:flex;gap:calc(6px * var(--ra-density,1))}.mac-ram-profiles button.is-active{background:color-mix(in srgb,var(--ra-warn) 22%,transparent);color:var(--ra-warn-strong);border-color:color-mix(in srgb,var(--ra-warn) 55%,var(--ra-border))}

/* Rules Workbench — file navigator + reader. */
.ra-rules-toolbar{display:flex;gap:calc(6px * var(--ra-density,1));flex-wrap:wrap;align-items:center;margin:0 0 calc(10px * var(--ra-density,1))}
.ra-rules-toolbar input{flex:1 1 260px;min-width:180px;background:var(--ra-bg-inset,transparent);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);padding:calc(7px * var(--ra-density,1)) calc(9px * var(--ra-density,1));color:var(--ra-text)}
.ra-rules-toolbar select,.ra-rules-toolbar button,.ra-rule-actions button{background:var(--ra-bg-inset,transparent);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);padding:calc(6px * var(--ra-density,1)) calc(9px * var(--ra-density,1));color:var(--ra-text-mid);cursor:pointer}
.ra-rules-workbench{display:grid;grid-template-columns:minmax(190px,270px) minmax(0,1fr);gap:calc(10px * var(--ra-density,1));min-height:520px}
.ra-rules-sidebar,.ra-rule-reader{border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);background:var(--ra-surface-1,var(--ra-bg));min-width:0}
.ra-rules-sidebar{padding:calc(7px * var(--ra-density,1));overflow:auto;max-height:calc(100vh - 250px)}
.ra-rule-sidebar-head{display:flex;justify-content:space-between;padding:calc(5px * var(--ra-density,1)) calc(7px * var(--ra-density,1)) calc(8px * var(--ra-density,1));color:var(--ra-text)}
.ra-rule-sidebar-head span{color:var(--ra-text-muted)}
.ra-rule-file{display:block;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:var(--ra-radius-md);padding:calc(8px * var(--ra-density,1));cursor:pointer;color:var(--ra-text-mid);margin-bottom:calc(3px * var(--ra-density,1))}
.ra-rule-file:hover,.ra-rule-file.active{background:var(--ra-accent-border);border-color:var(--ra-accent-strong);color:var(--ra-text)}
.ra-rule-file-title,.ra-rule-file-path,.ra-rule-file-meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra-rule-file-title{font-weight:600;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}.ra-rule-file-path{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-muted);margin-top:calc(2px * var(--ra-density,1))}.ra-rule-file-meta{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);margin-top:calc(3px * var(--ra-density,1))}
.ra-rule-badge{display:inline-block;font-size:calc(8px * var(--fsc,1) * var(--ra-fs-scale,1));border-radius:var(--ra-radius-sm);padding:calc(2px * var(--ra-density,1)) calc(4px * var(--ra-density,1));margin-left:calc(3px * var(--ra-density,1));vertical-align:middle}.ra-rule-badge.modified{color:var(--ra-warn)}.ra-rule-badge.untracked{color:var(--ra-accent)}.ra-rule-badge.warn{color:var(--ra-danger)}.ra-rule-badge.pinned{color:var(--ra-warn)}
.ra-rule-reader{padding:calc(12px * var(--ra-density,1))}.ra-rule-reader-head{display:flex;justify-content:space-between;gap:calc(10px * var(--ra-density,1));align-items:flex-start}.ra-rule-reader-head h3{margin:0 0 calc(3px * var(--ra-density,1))}.ra-rule-actions{display:flex;gap:calc(5px * var(--ra-density,1));flex-wrap:wrap;justify-content:flex-end}
.ra-rule-history{margin:calc(8px * var(--ra-density,1)) 0;color:var(--ra-text-muted);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}.ra-rule-history summary{cursor:pointer;color:var(--ra-accent)}
.ra-rule-facts{display:grid;gap:calc(4px * var(--ra-density,1));margin:calc(10px * var(--ra-density,1)) 0;padding:calc(9px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);color:var(--ra-text-muted);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}.ra-rule-finding{margin-top:calc(3px * var(--ra-density,1))}.ra-rule-finding.error{color:var(--ra-danger)}.ra-rule-finding.warn{color:var(--ra-warn)}.ra-rule-finding.info{color:var(--ra-text-muted)}
.ra-rule-ref{display:inline-block;margin:calc(3px * var(--ra-density,1)) calc(4px * var(--ra-density,1)) 0 0;padding:calc(2px * var(--ra-density,1)) calc(4px * var(--ra-density,1));border-radius:var(--ra-radius-sm);background:var(--ra-bg-inset,transparent)}.ra-rule-ref.bad{color:var(--ra-danger)}.ra-rule-ref.ok{color:var(--ra-ok)}.ra-rule-ref.unknown{color:var(--ra-text-muted)}
.ra-rule-reader-grid{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:calc(12px * var(--ra-density,1))}.ra-rule-outline{border-right:1px solid var(--ra-border);padding-right:calc(8px * var(--ra-density,1));overflow:auto;max-height:calc(100vh - 430px)}.ra-rule-outline a{display:block;color:var(--ra-text-muted);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));text-decoration:none;padding:calc(3px * var(--ra-density,1)) 0}.ra-rule-outline a:hover{color:var(--ra-accent)}.ra-rule-outline-l2{padding-left:calc(8px * var(--ra-density,1))!important}.ra-rule-outline-l3{padding-left:calc(16px * var(--ra-density,1))!important}.ra-rule-outline-l4,.ra-rule-outline-l5,.ra-rule-outline-l6{padding-left:calc(24px * var(--ra-density,1))!important}
.ra-rule-reader-body{white-space:pre-wrap;overflow:auto;max-height:calc(100vh - 410px);padding:calc(12px * var(--ra-density,1));border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);font:inherit;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.5;color:var(--ra-text-mid);background:var(--ra-bg-inset,transparent)}.ra-rule-reader-body.rendered{white-space:normal}.ra-rule-reader-body h1,.ra-rule-reader-body h2,.ra-rule-reader-body h3,.ra-rule-reader-body h4,.ra-rule-reader-body h5,.ra-rule-reader-body h6{color:var(--ra-text);margin:calc(12px * var(--ra-density,1)) 0 calc(5px * var(--ra-density,1))}.ra-rule-reader-body code{color:var(--ra-accent);background:var(--ra-accent-border);padding:1px calc(3px * var(--ra-density,1));border-radius:var(--ra-radius-sm)}.ra-rule-diff{white-space:pre-wrap;overflow:auto;max-height:360px;margin-top:calc(8px * var(--ra-density,1));padding:calc(10px * var(--ra-density,1));border:1px solid var(--ra-border);font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-muted)}
.ra-rules-workbench.compact .ra-rule-reader-body{max-height:360px}.ra-rules-workbench.compact .ra-rule-outline{max-height:360px}
@container pane (max-width:760px){.ra-rules-workbench{grid-template-columns:1fr}.ra-rules-sidebar{max-height:240px}.ra-rule-reader-grid{grid-template-columns:1fr}.ra-rule-outline{border-right:0;border-bottom:1px solid var(--ra-border);padding:0 0 calc(8px * var(--ra-density,1));max-height:130px;display:flex;gap:calc(8px * var(--ra-density,1));flex-wrap:wrap}.ra-rule-outline a{padding:calc(2px * var(--ra-density,1))!important}}

/* Todos tab declutter (2026-09-30): secondary panels (pick/systems/rules/
   saved views) collapse behind one slim disclosure so the list starts
   right under the quick-add + stats instead of a screen lower. */
#tab-todos .todo-more{margin:calc(8px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1));max-width:1100px}
#tab-todos .todo-more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:calc(6px * var(--ra-density,1));padding:calc(4px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border-radius:var(--ra-radius-pill);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-faint);border:1px solid var(--ra-border);background:var(--ra-surface-3)}
#tab-todos .todo-more>summary::-webkit-details-marker{display:none}
#tab-todos .todo-more>summary::before{content:"▸";font-size:.9em}
#tab-todos .todo-more[open]>summary::before{content:"▾"}
#tab-todos .todo-more[open]>summary{margin-bottom:calc(8px * var(--ra-density,1))}
#tab-todos #todo-stats-slot{margin-bottom:calc(6px * var(--ra-density,1))}

/* Todos tab tidy pass 2 (2026-09-30) — the Buy-now "THING" rows still emit
   .todo-row-actions, whose rule was deleted in the 2026-09-23 row redesign,
   so edit/done/delete stacked into a tall column at the far right. Restore a
   compact horizontal cluster; also tighten the chrome above the list. */
#tab-todos .todo-row-actions{display:flex;flex-direction:row;align-items:center;gap:calc(6px * var(--ra-density,1));flex-shrink:0;margin-left:auto;align-self:center}
#tab-todos .todo-row>.todo-badge{align-self:center}
#tab-todos .cell>h4{display:none}
#tab-todos #todos-subtab-nav{padding:calc(6px * var(--ra-density,1)) calc(14px * var(--ra-density,1));gap:calc(5px * var(--ra-density,1))}
#tab-todos #todos-subtab-nav .todos-subtab-btn{min-height:28px;padding:calc(3px * var(--ra-density,1)) calc(10px * var(--ra-density,1))!important;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}
#tab-todos #todos-subtab-nav .todo-controls{padding-top:calc(6px * var(--ra-density,1));gap:calc(5px * var(--ra-density,1))}
#tab-todos #todos-subtab-nav .todo-controls #todo-filter,#tab-todos #todos-subtab-nav .todo-controls>*{min-height:30px}
#tab-todos #todo-stats-slot>*{padding-top:calc(6px * var(--ra-density,1))!important;padding-bottom:calc(6px * var(--ra-density,1))!important}
#tab-todos .todo-row{padding:calc(7px * var(--ra-density,1)) calc(4px * var(--ra-density,1))}

/* Todos tab pass 3 (2026-09-30) — user: components not full width and not
   matching the theme. (1) drop the 960/1100px caps so every block spans the
   pane like the chip/filter rows above; (2) the NL quick-add input had NO
   styling at all (native gray box) — give it the same token-based look as
   #todo-filter so it follows whichever theme is active. */
#tab-todos [id^="todo-list-"],#tab-todos #todo-rules-slot,#tab-todos #todo-stats-slot,#tab-todos .todo-more{max-width:none}
#tab-todos .cell,#tab-todos #todo-stats-slot>*,#tab-todos #todo-pick-slot>*{max-width:none;box-sizing:border-box}

/* Todos pass 5 (2026-09-30) — two stacked .cell blocks (controls, then list)
   each carried 16px padding + 10px margin, leaving a ~40px dead band between
   the collapsed "more" pill and the first row. Collapse it. */
#tab-todos .cell:has(#todo-stats-slot){padding-bottom:0}
#tab-todos .todos-subtab-content>.cell{margin-top:0;padding-top:calc(6px * var(--ra-density,1))}
#tab-todos .cell:has(#todo-stats-slot){padding-top:calc(8px * var(--ra-density,1));margin-top:0}

/* ═══ Todos tab redesign (2026-09-30) — quieter chrome, scannable rows ═══
   Goals: toolbar on ONE row when it fits; stats as an inline line, not a card;
   each row = check | title (left) ... meta pills (right, aligned across rows);
   section headers as small caps with a hairline. All kit tokens, no hex. */
#tab-todos #todos-subtab-nav .todo-controls{flex:1 1 460px;border-top:0;padding-top:0;margin-left:auto;justify-content:flex-end}
#tab-todos #todos-subtab-nav .todo-controls #todo-filter{flex:1 1 200px;max-width:340px}
#tab-todos .todo-stats-line{display:flex;flex-wrap:wrap;align-items:center;gap:calc(4px * var(--ra-density,1)) calc(18px * var(--ra-density,1));padding:calc(2px * var(--ra-density,1)) calc(4px * var(--ra-density,1)) calc(6px * var(--ra-density,1));font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-dim)}
#tab-todos .todo-stat b{color:var(--ra-text);font-weight:600;font-variant-numeric:tabular-nums}
#tab-todos .todo-stat.warn b{color:var(--ra-warn)}
#tab-todos .todo-stat.ok b{color:var(--ra-ok)}
#tab-todos .todo-stat.dim{opacity:.55}
#tab-todos .todo-row{padding:calc(11px * var(--ra-density,1)) calc(8px * var(--ra-density,1));gap:calc(12px * var(--ra-density,1));align-items:center}
#tab-todos .todo-row-body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:calc(16px * var(--ra-density,1));row-gap:calc(3px * var(--ra-density,1));align-items:center}
#tab-todos .todo-row-titleline{grid-column:1;min-width:0}
#tab-todos .todo-row-title{font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:500}
#tab-todos .todo-row-meta{grid-column:2;grid-row:1;margin:0;gap:calc(6px * var(--ra-density,1));justify-content:flex-end;flex-wrap:nowrap}
#tab-todos .todo-row-meta > *::before{content:none!important;margin:0!important}
#tab-todos .todo-row-meta > span{background:var(--ra-surface-2);border-radius:var(--ra-radius-pill,999px);padding:1px calc(9px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));white-space:nowrap;color:var(--ra-text-dim)}
#tab-todos .todo-row-meta > span:has(.todo-meta-sync){background:none;padding:0}
#tab-todos .todo-row-detail,#tab-todos .todo-row-subitems,#tab-todos .todo-row-tags{grid-column:1 / -1}
#tab-todos .todo-sec-count{margin-top:calc(16px * var(--ra-density,1));padding:0 calc(4px * var(--ra-density,1)) calc(6px * var(--ra-density,1))!important;border-top:0!important;border-bottom:1px solid var(--ra-divider);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.1em;color:var(--ra-text-dim)}
@container pane (max-width:700px){#tab-todos .todo-row-body{grid-template-columns:1fr}#tab-todos .todo-row-meta{grid-column:1;grid-row:auto;justify-content:flex-start;flex-wrap:wrap}}
@media (max-width:700px){#tab-todos #todos-subtab-nav .todo-controls{margin-left:0}#tab-todos #todos-subtab-nav .todo-controls #todo-filter{max-width:none}}
@container pane (max-width:700px){#tab-todos #todos-subtab-nav .todo-controls{margin-left:0}#tab-todos #todos-subtab-nav .todo-controls #todo-filter{max-width:none}}

/* ═══ Todos: section-coloured groups + card grid (2026-09-30, user: "still boring — multiple on the
   same line on wide screens, distinct style per section") ═══
   --g / --g-bg / --g-bd come from kit status tokens, so every theme recolours them. */
#tab-todos .todo-g-urgent,#tab-todos #todo-list-urgent{--g:var(--ra-danger);--g-bg:var(--ra-danger-bg);--g-bd:var(--ra-danger-border);--g-tint:11%}
#tab-todos .todo-g-high,#tab-todos #todo-list-high{--g:var(--ra-warn);--g-bg:var(--ra-warn-bg);--g-bd:var(--ra-warn-border);--g-tint:9%}
#tab-todos .todo-g-pending,#tab-todos #todo-list-pending{--g:var(--ra-purple);--g-bg:var(--ra-purple-bg);--g-bd:var(--ra-purple-border);--g-tint:7%}
#tab-todos .todo-g-normal,#tab-todos #todo-list-normal{--g:var(--ra-info);--g-bg:var(--ra-info-bg);--g-bd:var(--ra-info-border);--g-tint:5%}
#tab-todos .todo-g-active,#tab-todos #todo-list-active{--g:var(--ra-ok);--g-bg:var(--ra-ok-bg);--g-bd:var(--ra-ok-border);--g-tint:8%}
#tab-todos .todo-g-backlog,#tab-todos #todo-list-backlog{--g:var(--ra-text-dim);--g-bg:var(--ra-surface-2);--g-bd:var(--ra-border);--g-tint:0%}
#tab-todos .todo-g-buynow{--g:color-mix(in srgb,var(--ra-ok) 50%,var(--ra-info));--g-bg:color-mix(in srgb,var(--g) 16%,transparent);--g-bd:color-mix(in srgb,var(--g) 55%,transparent);--g-tint:8%}
#tab-todos .todo-group{margin-top:calc(22px * var(--ra-density,1))}
#tab-todos .todo-group:first-child{margin-top:calc(6px * var(--ra-density,1))}
#tab-todos .todo-group-head{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));margin:0 0 calc(10px * var(--ra-density,1));padding:0 calc(2px * var(--ra-density,1))}
#tab-todos .todo-group-icon{font-size:calc(15px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1}
#tab-todos .todo-group-name{font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--g)}
#tab-todos .todo-group-count{background:var(--g-bg);color:var(--g);border:1px solid var(--g-bd);border-radius:var(--ra-radius-pill,999px);padding:0 calc(9px * var(--ra-density,1));font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;font-variant-numeric:tabular-nums}
#tab-todos .todo-group-head::after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--g-bd),transparent)}
/* card grid: as many columns as fit (>= 400px each), on every list view */
#tab-todos .todo-group-body,#tab-todos .todo-cat-items,#tab-todos [id^="todo-list-"]{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--card-min,400px)),1fr));gap:var(--card-gap,10px);align-items:stretch}
#tab-todos [id^="todo-list-"] > .todo-group,#tab-todos [id^="todo-list-"] > .todo-sec-count,#tab-todos [id^="todo-list-"] > .todo-cost-rollup,
#tab-todos [id^="todo-list-"] > .hab-sec,#tab-todos [id^="todo-list-"] > .ra-empty,#tab-todos [id^="todo-list-"] > .todo-no-match,
#tab-todos [id^="todo-list-"] > .todo-cat-items,#tab-todos .todo-cat-items > .todo-sec-count{grid-column:1 / -1}
/* the row becomes a card */
/* 2026-09-30: cards take the kit's card tokens (and each theme's .ra-card rules — hard borders,
   double borders, neumorph) instead of a bespoke look; priority/state colour is a ::before strip that
   no theme border/shadow rule can fight. The row markup also carries the `ra-card` class. */
#tab-todos [id^="todo-list-"] .todo-row{position:relative;overflow:hidden;box-sizing:border-box;height:100%;align-items:flex-start;padding:calc(11px * var(--ra-density,1)) calc(13px * var(--ra-density,1)) calc(11px * var(--ra-density,1)) calc(17px * var(--ra-density,1));gap:calc(11px * var(--ra-density,1));
  border:var(--ra-border-w,1px) solid var(--ra-card-border,var(--ra-border));border-radius:var(--ra-card-radius,var(--ra-radius-md,8px));
  background:var(--ra-card-bg,var(--ra-surface-1))}
#tab-todos [id^="todo-list-"] .todo-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--g,transparent)}
#tab-todos [id^="todo-list-"] .todo-row:hover{background:var(--ra-surface-2)}
#tab-todos .todo-g-pending .todo-row,#tab-todos #todo-list-pending .todo-row{background-image:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--g) 7%,transparent) 9px 18px)}
#tab-todos .todo-g-backlog .todo-row,#tab-todos #todo-list-backlog .todo-row{border-style:dashed;border-left-style:solid}
#tab-todos .todo-g-urgent .todo-row-title,#tab-todos #todo-list-urgent .todo-row-title{font-weight:700}
#tab-todos [id^="todo-list-"] .todo-row.todo-row-overdue{--g:var(--ra-warn-strong)}
#tab-todos [id^="todo-list-"] .todo-row.todo-row-blocked{--g:var(--ra-purple)}
/* card content stacks: title on top (wraps), meta pills underneath */
#tab-todos [id^="todo-list-"] .todo-row-body{grid-template-columns:minmax(0,1fr)}
#tab-todos [id^="todo-list-"] .todo-row-meta{grid-column:1;grid-row:auto;justify-content:flex-start;flex-wrap:wrap;margin-top:calc(5px * var(--ra-density,1))}
#tab-todos [id^="todo-list-"] .todo-row-title{overflow-wrap:anywhere;line-height:1.35}
#tab-todos [id^="todo-list-"] .todo-row .todo-row-actions{align-self:center}
#tab-todos [id^="todo-list-"] .todo-row > .todo-badge{align-self:flex-start;margin-top:1px}

/* ═══ Todos: each section differs in SHAPE, not just colour (2026-09-30, user: "not only the title") ═══
   urgent = big loud cards · high = firm standard · pending = striped + hourglass · normal = compact
   active = live-dot glow · backlog = dense, dashed, dimmed · buy now = tiles */
#tab-todos .todo-g-urgent,#tab-todos #todo-list-urgent{--card-min:540px;--card-gap:12px}
#tab-todos .todo-g-urgent .todo-row,#tab-todos #todo-list-urgent .todo-row{border-left-width:7px;padding:calc(15px * var(--ra-density,1)) calc(18px * var(--ra-density,1));box-shadow:0 0 0 1px var(--g-bd),0 6px 18px color-mix(in srgb,var(--g) 22%,transparent)}
#tab-todos .todo-g-urgent .todo-row-title,#tab-todos #todo-list-urgent .todo-row-title{font-size:calc(16px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:800}
#tab-todos .todo-g-high,#tab-todos #todo-list-high{--card-min:430px}
#tab-todos .todo-g-high .todo-row,#tab-todos #todo-list-high .todo-row{border-top:3px solid var(--g);padding:calc(13px * var(--ra-density,1)) calc(15px * var(--ra-density,1))}
#tab-todos .todo-g-high .todo-row-title,#tab-todos #todo-list-high .todo-row-title{font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:650}
#tab-todos .todo-g-pending .todo-row,#tab-todos #todo-list-pending .todo-row{position:relative;padding-right:calc(34px * var(--ra-density,1))}
#tab-todos .todo-g-pending .todo-row::after,#tab-todos #todo-list-pending .todo-row::after{content:"⏳";position:absolute;top:8px;right:10px;opacity:.55;font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1))}
#tab-todos .todo-g-normal,#tab-todos #todo-list-normal{--card-min:340px;--card-gap:8px}
#tab-todos .todo-g-normal .todo-row,#tab-todos #todo-list-normal .todo-row{padding:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1));border-radius:var(--ra-radius-md)}
#tab-todos .todo-g-normal .todo-row-title,#tab-todos #todo-list-normal .todo-row-title{font-size:calc(12.5px * var(--fsc,1) * var(--ra-fs-scale,1))}
#tab-todos .todo-g-active .todo-row,#tab-todos #todo-list-active .todo-row{position:relative;border-radius:14px;box-shadow:inset 0 0 0 1px var(--g-bd),0 0 14px color-mix(in srgb,var(--g) 20%,transparent)}
#tab-todos .todo-g-active .todo-row::after,#tab-todos #todo-list-active .todo-row::after{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g)}
#tab-todos .todo-g-backlog,#tab-todos #todo-list-backlog{--card-min:280px;--card-gap:6px}
#tab-todos .todo-g-backlog .todo-row,#tab-todos #todo-list-backlog .todo-row{padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border-radius:var(--ra-radius-sm);opacity:.82}
#tab-todos .todo-g-backlog .todo-row-title,#tab-todos #todo-list-backlog .todo-row-title{font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:400}
#tab-todos .todo-g-backlog .todo-row-meta,#tab-todos #todo-list-backlog .todo-row-meta{display:none}
#tab-todos .todo-g-buynow{--card-min:380px}

/* Todos: props strip (cost · time · importance · due · age · goals) */
#tab-todos .todo-row-props{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1)) calc(14px * var(--ra-density,1));margin-top:calc(8px * var(--ra-density,1));padding-top:calc(7px * var(--ra-density,1));border-top:1px dashed var(--ra-divider);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-variant-numeric:tabular-nums}
#tab-todos .todo-prop{display:inline-flex;align-items:center;gap:calc(4px * var(--ra-density,1));color:var(--ra-text)}
#tab-todos .todo-prop i{font-style:normal;font-size:1em;opacity:.85}
#tab-todos .todo-prop b{font-weight:600}
#tab-todos .todo-prop.empty{color:var(--ra-text-faint);opacity:.45}
#tab-todos .todo-prop.empty b{font-weight:400}
#tab-todos .todo-prop.warn b{color:var(--ra-warn)}
#tab-todos .todo-prop.dim{opacity:.6}
#tab-todos .todo-g-backlog .todo-row-props{display:none}
#tab-todos .todo-g-buynow .todo-row-props{display:flex}
/* compact density hides detail/meta but keeps the props — slimmer, no divider */
body.todo-density-compact #tab-todos .todo-row-props{margin-top:calc(3px * var(--ra-density,1));padding-top:0;border-top:0;gap:calc(2px * var(--ra-density,1)) calc(12px * var(--ra-density,1))}
#tab-todos .todo-prop.editable{cursor:pointer;border-radius:var(--ra-radius-sm);padding:1px calc(4px * var(--ra-density,1));margin:-1px calc(-4px * var(--ra-density,1));transition:background var(--ra-motion,.15s)}
#tab-todos .todo-prop.editable:hover,#tab-todos .todo-prop.editable:focus-visible{background:var(--ra-surface-3);outline:1px solid var(--ra-accent-strong)}
#tab-todos .todo-prop.empty.editable:hover{opacity:1}

/* ═══ No animations (2026-09-30, user: "improve loading speed, remove the animation stuff") ═══
   Kills CSS animations/transitions everywhere except loading spinners, which convey state. */
*:not([class*="spin"]):not([class*="loading"]),*:not([class*="spin"]):not([class*="loading"])::before,*:not([class*="spin"]):not([class*="loading"])::after{transition:none!important;scroll-behavior:auto!important}
/* kit v120 (2026-10-03, user: "I need more animations, vfx, sfx"): CSS animations stay killed everywhere EXCEPT the kit's per-theme
   entrance/hover layer — exempted only while its Settings toggles are on, so turning them off restores exactly this kill rule.
   Transitions and the rest of the old animation set remain off (loading-speed decision above). */
/* v169 (2026-10-04, user: "background animation never happens"): the kill rule below also froze every theme ambient layer and the kit's Background effects, so the Background tab did nothing here. Exempt #ra-backdrop and the theme body::before/::after layers while the backdrop pack is on and not frozen / ambient-off (Settings > Background). Everything else stays killed.
   Theme-fit features (kit ideas #125-#160) mark their continuously running or event-driven layers [data-ra-live]; that attribute (or an ancestor carrying it) is exempt, and each feature has its own Settings switch. */
*:not([class*="spin"]):not([class*="loading"]):not(#ra-backdrop *):not([data-ra-live]):not([data-ra-live] *):not(body[data-ra-enter]:not(.ra-fx-enter-anim-off) :is(.tab-panel.active,.todo-row.ra-card,.proj-card,.win-card,.hab-card,.hab-cat-card,.topic-card,.goal-mission-row,.hot-card,.pin-mirror-card,.ra-enter)):not(body[data-ra-hover-anim]:not(.ra-fx-hover-anim-off) :is(.ra-btn,.ra-tab,.tab,.todos-subtab-btn,.idea-filter-pill,.mini-btn,.ra-pill,.dock-tab):hover),*:not([class*="spin"]):not([class*="loading"]):not(#ra-backdrop *):not([data-ra-live]):not([data-ra-live] *):not(html[data-ra-bd]:not([data-ra-bd~="freeze"]):not([data-ra-bd~="noamb"]) body)::before,*:not([class*="spin"]):not([class*="loading"]):not(#ra-backdrop *):not([data-ra-live]):not([data-ra-live] *):not(html[data-ra-bd]:not([data-ra-bd~="freeze"]):not([data-ra-bd~="noamb"]) body)::after{animation:none!important}

/* ═══ Todos toolbar rebuild (2026-09-30, user: "too messy") ═══
   One row: segmented tabs on the left, tools on the right. New class names (.tdb*) so none of the
   old chip/notch/control rules apply. Kit tokens only. */
#tab-todos .tdb{position:sticky;top:var(--topbar-h,54px);z-index:var(--ra-z-sticky);display:flex;flex-wrap:wrap;align-items:center;gap:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1)) calc(14px * var(--ra-density,1));background:var(--ra-bg);border-bottom:1px solid var(--ra-border)}
#tab-todos .tdb-tabs{display:inline-flex;align-items:stretch;border:1px solid var(--ra-border);border-radius:var(--ra-radius-md,8px);background:var(--ra-surface-1);overflow:hidden}
#tab-todos .tdb-tabs .todos-subtab-btn{all:unset;text-shadow:none;clip-path:none!important;background-image:none!important;box-sizing:border-box;display:inline-flex;align-items:center;gap:calc(6px * var(--ra-density,1));padding:calc(6px * var(--ra-density,1)) calc(14px * var(--ra-density,1));min-height:32px;cursor:pointer;font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:500;color:var(--ra-text-dim);white-space:nowrap}
#tab-todos .tdb-tabs .todos-subtab-btn:hover{background:var(--ra-surface-2);color:var(--ra-text)}
#tab-todos .tdb-tabs .todos-subtab-btn:focus-visible{outline:2px solid var(--ra-accent);outline-offset:-2px}
#tab-todos .tdb-tabs .todos-subtab-btn.active{background:var(--ra-surface-3)!important;background-image:none!important;color:var(--ra-text)!important;-webkit-text-fill-color:currentColor!important;font-weight:700;box-shadow:inset 0 -3px 0 var(--ra-accent-strong)!important;border:0!important;text-shadow:none!important}
#tab-todos .tdb-tabs .todos-subtab-count{font-variant-numeric:tabular-nums;font-size:.85em;opacity:.7;font-weight:400}
#tab-todos .tdb-tabs .todos-subtab-count:empty{display:none}
#tab-todos .tdb-tabs .todos-subtab-btn.active .todos-subtab-count{opacity:1}
#tab-todos .tdb-sep{width:1px;background:var(--ra-divider);margin:calc(6px * var(--ra-density,1)) 0}
#tab-todos .tdb-link{all:unset;cursor:pointer;font-size:calc(16px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1;padding:calc(6px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-md,8px)}
#tab-todos .tdb-link:hover{background:var(--ra-surface-2)}
#tab-todos .tdb-tools{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));margin-left:auto;flex-wrap:nowrap}
#tab-todos .tdb-tools .ra-input{flex:0 1 220px}
#tab-todos .tdb-tools #todo-filter{width:220px;min-width:120px}
#tab-todos .tdb-tools #todo-sort{width:auto}
#tab-todos .tdb-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:calc(4px * var(--ra-density,1));min-height:32px;padding:0 calc(12px * var(--ra-density,1));cursor:pointer;border-radius:var(--ra-radius-md,8px);border:1px solid var(--ra-border);background:var(--ra-surface-1);color:var(--ra-text-dim);font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));white-space:nowrap}
#tab-todos .tdb-btn:hover{background:var(--ra-surface-2);color:var(--ra-text);border-color:var(--ra-border-strong)}
#tab-todos .tdb-btn:focus-visible{outline:2px solid var(--ra-accent);outline-offset:1px}
#tab-todos .tdb-btn.active{color:var(--ra-accent);border-color:var(--ra-accent-strong)}
#tab-todos .tdb-btn.tdb-primary{background:var(--ra-surface-3);border-color:var(--ra-accent-strong);color:var(--ra-text);font-weight:700;box-shadow:inset 0 -2px 0 var(--ra-accent-strong)}
#tab-todos .tdb-btn.tdb-primary:hover{background:var(--ra-surface-2)}
@media (max-width:700px){#tab-todos .tdb{padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}#tab-todos .tdb-tabs{max-width:100%;overflow-x:auto}#tab-todos .tdb-tools{margin-left:0;width:100%}#tab-todos .tdb-tools #todo-filter{flex:1 1 100%;width:100%}}

/* ═══ Todos header compaction (2026-09-30, user: "less messy, more compact") ═══
   quick-add + stats + "more" share ONE row; info (i) buttons and the "systems reading this tracker"
   strip are hidden here; the pick panel is tight. */
#tab-todos .cell:has(#todo-stats-slot){display:flex;flex-wrap:wrap;align-items:center;gap:calc(6px * var(--ra-density,1)) calc(14px * var(--ra-density,1));padding:calc(10px * var(--ra-density,1)) calc(14px * var(--ra-density,1)) calc(4px * var(--ra-density,1));margin-top:0}
#tab-todos .cell:has(#todo-stats-slot)>.sec-name{display:none}
#tab-todos #todo-unparsed-slot,#tab-todos #todo-dup-slot,#tab-todos #todo-stale-banner-slot,#tab-todos #todo-add-form-slot{flex:1 1 100%}
#tab-todos #todo-stats-slot{flex:0 1 auto;margin:0}
#tab-todos .todo-stats-line{padding:0;flex-wrap:nowrap;white-space:nowrap;font-size:calc(11.5px * var(--fsc,1) * var(--ra-fs-scale,1))}
#tab-todos .todo-more{flex:0 0 auto;margin:0}
#tab-todos .todo-more[open]{flex-basis:100%}
#tab-todos .todo-more>summary{padding:calc(3px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
#tab-todos .cell:has(#todo-stats-slot) .ra-info-btn,#tab-todos .todo-stats-line .ra-info-btn{display:none}
#tab-todos #todo-systems-slot,#tab-todos .todo-more #todo-systems-slot{display:none}
#tab-todos .todo-pick{margin-bottom:calc(6px * var(--ra-density,1));padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
#tab-todos .todo-pick .todo-pick-label{display:inline}
#tab-todos .todo-pick .todo-row-props{margin-top:calc(4px * var(--ra-density,1));padding-top:0;border-top:0}
#tab-todos .todo-pick-reason{padding:calc(2px * var(--ra-density,1)) calc(10px * var(--ra-density,1))!important}
#tab-todos .todo-group{margin-top:calc(14px * var(--ra-density,1))}
#tab-todos .todo-group-head{margin-bottom:calc(8px * var(--ra-density,1))}
#tab-todos .todos-subtab-content>.cell{padding-top:0}

/* card compaction: meta pills + props share ONE line under the title; tighter padding/gaps */
#tab-todos [id^="todo-list-"] .todo-row-body{display:flex;flex-wrap:wrap;align-items:center;gap:calc(3px * var(--ra-density,1)) calc(12px * var(--ra-density,1))}
#tab-todos [id^="todo-list-"] .todo-row-titleline{flex:1 1 100%;min-width:0}
#tab-todos [id^="todo-list-"] .todo-row-meta{flex:0 0 auto;margin:0}
#tab-todos [id^="todo-list-"] .todo-row-props{flex:0 1 auto;margin:0;padding:0;border-top:0;gap:calc(2px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
#tab-todos [id^="todo-list-"] .todo-row-detail,#tab-todos [id^="todo-list-"] .todo-row-subitems,#tab-todos [id^="todo-list-"] .todo-row-tags{flex:1 1 100%}
#tab-todos .todo-g-high .todo-row,#tab-todos #todo-list-high .todo-row{padding:calc(9px * var(--ra-density,1)) calc(12px * var(--ra-density,1))}
#tab-todos .todo-g-pending .todo-row,#tab-todos #todo-list-pending .todo-row{padding-top:calc(9px * var(--ra-density,1));padding-bottom:calc(9px * var(--ra-density,1))}
#tab-todos .todo-g-normal .todo-row,#tab-todos #todo-list-normal .todo-row{padding:calc(7px * var(--ra-density,1)) calc(11px * var(--ra-density,1))}
#tab-todos [id^="todo-list-"] .todo-group-body{gap:calc(8px * var(--ra-density,1))}

/* toolbar: ALWAYS one line above 760px (user: "should be compact in one line") */
#tab-todos .tdb{flex-wrap:nowrap;gap:calc(8px * var(--ra-density,1));padding:calc(6px * var(--ra-density,1)) calc(12px * var(--ra-density,1))}
#tab-todos .tdb-tabs{flex:0 0 auto}
#tab-todos .tdb-tabs .todos-subtab-btn{padding:calc(5px * var(--ra-density,1)) calc(10px * var(--ra-density,1));min-height:30px}
#tab-todos .tdb-tools{flex:1 1 auto;min-width:0;flex-wrap:nowrap!important;justify-content:flex-end}
#tab-todos .tdb-tools #todo-filter{flex:1 1 110px;width:auto;min-width:80px;max-width:220px;min-height:30px}
#tab-todos .tdb-tools #todo-sort{flex:0 1 118px;width:118px;min-width:70px;min-height:30px;text-overflow:ellipsis}
@media (max-width:900px){#tab-todos .tdb{flex-wrap:wrap}#tab-todos .tdb-tools{flex-wrap:wrap!important;justify-content:flex-start;width:100%}#tab-todos .tdb-pills{flex:1 1 100%}}
#tab-todos .tdb-btn{min-height:30px;padding:0 calc(9px * var(--ra-density,1));flex:0 0 auto}
#tab-todos .tdb-link{flex:0 0 auto;padding:calc(4px * var(--ra-density,1)) calc(6px * var(--ra-density,1))}
#tab-todos #backlog-badge-todos{flex:0 0 auto;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));padding:1px calc(6px * var(--ra-density,1))}
@media (max-width:760px){#tab-todos .tdb{flex-wrap:wrap}#tab-todos .tdb-tools{flex:1 1 100%}#tab-todos .tdb-tools #todo-filter{max-width:none}}
#tab-todos .todo-budget{display:inline-flex;align-items:center;gap:calc(4px * var(--ra-density,1));padding:1px calc(10px * var(--ra-density,1));border-radius:var(--ra-radius-pill);border:1px solid var(--ra-border);background:var(--ra-surface-2);cursor:pointer;color:var(--ra-text)}
#tab-todos .todo-budget:hover{border-color:var(--ra-accent-strong)}
#tab-todos .todo-budget b{font-variant-numeric:tabular-nums}
#tab-todos .todo-budget em{font-style:normal;color:var(--ra-warn)}
#tab-todos .todo-budget i{font-style:normal;opacity:.5}
#tab-todos .todo-budget.empty{opacity:.65;border-style:dashed}

/* Todos All view (2026-09-30): Priority + Normal share one headerless group; priority is styled per card */
#tab-todos .todo-row.todo-p-high{--g:var(--ra-warn);--g-bg:var(--ra-warn-bg);--g-bd:var(--ra-warn-border);--g-tint:9%}
#tab-todos .todo-row.todo-p-normal{--g:var(--ra-info);--g-bg:var(--ra-info-bg);--g-bd:var(--ra-info-border);--g-tint:5%}
#tab-todos .todo-g-flat{--card-min:380px;--card-gap:8px}
#tab-todos .todo-g-flat .todo-row.todo-p-high{border-top:3px solid var(--g)}
#tab-todos .todo-g-flat .todo-row.todo-p-high .todo-row-title{font-weight:650}
#tab-todos .todo-g-pending{margin-top:calc(28px * var(--ra-density,1))}
#tab-todos .todo-row-blocker{margin-top:calc(3px * var(--ra-density,1));color:var(--ra-purple);font-size:calc(11.5px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:600;overflow-wrap:anywhere}
#tab-todos .todo-prop.costq b{color:var(--ra-warn);border-bottom:1px dashed var(--ra-warn-border)}

/* Todos group-by (2026-09-30): generic group colour + toolbar select sized like the sort select */
#tab-todos .todo-g-custom{--g:var(--ra-accent);--g-bg:color-mix(in srgb,var(--ra-accent) 14%,transparent);--g-bd:var(--ra-accent-border);--card-min:380px;--card-gap:8px}
#tab-todos .tdb-tools #todo-group{min-height:32px;width:auto;flex:0 1 118px;min-width:70px;text-overflow:ellipsis}
#tab-todos .todo-g-today{--g:var(--ra-warn);--g-bg:var(--ra-warn-bg);--g-bd:var(--ra-warn-border);--card-min:380px;--card-gap:8px}
#tab-todos .todo-prop.today-toggle{opacity:.7}
#tab-todos .todo-prop.today-toggle.on{opacity:1;color:var(--ra-warn)}
#tab-todos .todo-prop.today-toggle:hover{opacity:1}
#tab-todos .todo-prop.unknownq{opacity:.5}
#tab-todos .todo-row-fk{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1));margin-top:calc(5px * var(--ra-density,1))}
#tab-todos .todo-row-fk .win-fk-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tab-todos .todo-row .todo-edit-btn{position:absolute;top:6px;right:8px;min-height:auto;width:20px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));z-index:1}
#tab-todos [id^="todo-list-"] .todo-row:has(.todo-edit-btn){padding-right:calc(34px * var(--ra-density,1))}
#tab-todos .todo-g-pending .todo-row::after,#tab-todos #todo-list-pending .todo-row::after{right:34px}
#tab-todos .todo-row .todo-thing-del{right:32px}
#tab-todos [id^="todo-list-"] .todo-row:has(.todo-thing-del){padding-right:calc(58px * var(--ra-density,1))}

/* ═══ Todos table view (2026-10-01) — kit .ra-table, fixed columns, ONE frozen header, inset strip for priority/state ═══ */
#tab-todos .todo-group-tbl .todo-group-body,#tab-todos [id^="todo-list-"] > .todo-table-wrap{display:block}
#tab-todos [id^="todo-list-"] > .todo-table-wrap{grid-column:1 / -1}
#tab-todos .todo-group.collapsed .todo-group-body{display:none}
#tab-todos .todo-table{table-layout:fixed;width:100%}
#tab-todos .todo-table col.tc-check{width:34px}
#tab-todos .todo-table col.tc-prio{width:92px}
#tab-todos .todo-table col.tc-links{width:270px}
#tab-todos .todo-table col.tc-cost{width:74px}
#tab-todos .todo-table col.tc-time{width:62px}
#tab-todos .todo-table col.tc-due{width:104px}
#tab-todos .todo-table col.tc-act{width:98px}
/* frozen header: sits under the app topbar + the Todos toolbar (--todo-tdb-h is set from the toolbar's real height) */
#tab-todos .todo-table-head-wrap{position:sticky;top:calc(var(--topbar-h,54px) + var(--todo-tdb-h,48px));z-index:7;background:var(--ra-bg);box-shadow:0 1px 0 var(--ra-border)}
#tab-todos .todo-table-head th{background:var(--ra-bg);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none}
#tab-todos .todo-table th.sortable{cursor:pointer}
#tab-todos .todo-table th.sortable:hover,#tab-todos .todo-table th.sorted{color:var(--ra-accent)}
#tab-todos .todo-table td{vertical-align:middle;padding-top:calc(5px * var(--ra-density,1));padding-bottom:calc(5px * var(--ra-density,1))}
#tab-todos .todo-table td.tc-task{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#tab-todos .todo-table td.tc-task .todo-row-title{display:inline;cursor:pointer}
#tab-todos .todo-table td.tc-task .todo-badge{margin-right:calc(6px * var(--ra-density,1));vertical-align:middle}
#tab-todos .todo-table .todo-badge{display:inline-block;white-space:nowrap}
#tab-todos .todo-table .todo-links{display:flex;flex-wrap:wrap;gap:calc(3px * var(--ra-density,1));min-width:0}
#tab-todos .todo-table .todo-links .win-fk-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tab-todos .todo-table td.tc-due{white-space:nowrap}
#tab-todos .todo-table td.tc-due .todo-prop{display:inline-flex;margin-right:calc(6px * var(--ra-density,1))}
#tab-todos .todo-table td.tc-check{white-space:nowrap}
#tab-todos .todo-table td.tc-act{white-space:nowrap;text-align:right;overflow:visible}
#tab-todos .todo-table td.tc-act .todo-done-wrap{display:inline-flex;vertical-align:middle}
#tab-todos .todo-table .todo-tr-edit-btn{min-height:auto;width:26px;height:26px;padding:0;margin-left:calc(4px * var(--ra-density,1));font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1));display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
#tab-todos .todo-table .todo-tr-done-btn{color:var(--ra-ok);font-size:calc(15px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:700}
#tab-todos .todo-table th:first-child{padding-left:calc(12px * var(--ra-density,1))}
#tab-todos .todo-table .todo-tr-sub{color:var(--ra-text-faint);font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}
#tab-todos .todo-table .todo-row-blocker{margin-top:1px}
#tab-todos .todo-table .todo-prop.prio-high b{color:var(--ra-warn)}
#tab-todos .todo-table tr.todo-tr:hover td{background:var(--ra-surface-2)}
#tab-todos .todo-table tr.todo-tr td:first-child{box-shadow:inset 4px 0 0 var(--g,transparent);padding-left:calc(12px * var(--ra-density,1))}
#tab-todos .todo-table tr.todo-tr.todo-p-high{--g:var(--ra-warn)}
#tab-todos .todo-table tr.todo-tr.todo-p-normal{--g:var(--ra-info)}
#tab-todos .todo-table tr.todo-tr.todo-row-overdue{--g:var(--ra-warn-strong)}
#tab-todos .todo-table tr.todo-tr.todo-row-blocked{--g:var(--ra-purple)}
#tab-todos .todo-table tr.todo-tr-edit td{padding:calc(8px * var(--ra-density,1))}
/* the ☀️ toggle is noise on every row — show it on hover (or when the task is already today) on pointer devices */
@media (hover:hover){#tab-todos .todo-table .today-toggle:not(.on){visibility:hidden}#tab-todos .todo-table tr:hover .today-toggle{visibility:visible}}
@media (max-width:900px){#tab-todos .todo-table .tc-time{display:none}#tab-todos .todo-table col.tc-links{width:170px}}
@media (max-width:700px){
  /* phones: the table becomes a compact list — title on its own full-width line, a small meta line
     (priority · cost · time · due) and the buttons under it. No frozen header (sort lives in the toolbar). */
  #tab-todos [id^="todo-list-"] > .todo-table-head-wrap{display:none}
  #tab-todos .todo-table,#tab-todos .todo-table tbody{display:block}
  #tab-todos .todo-table colgroup{display:none}
  #tab-todos .todo-table tr.todo-tr{display:flex;flex-wrap:wrap;align-items:center;gap:calc(3px * var(--ra-density,1)) calc(12px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1)) calc(8px * var(--ra-density,1)) calc(8px * var(--ra-density,1)) calc(14px * var(--ra-density,1));box-shadow:inset 4px 0 0 var(--g,transparent);border-bottom:1px solid var(--ra-divider)}
  #tab-todos .todo-table tr.todo-tr td{display:block;padding:0;border:0;background:none;box-shadow:none;font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1))}
  #tab-todos .todo-table tr.todo-tr:hover td{background:none}
  #tab-todos .todo-table td.tc-task{flex:1 1 100%;white-space:normal;overflow:visible;font-size:calc(14px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.35}
  /* meta line = priority · cost · time · due, then the goal/project chips on the SAME line (they wrap if needed);
     buttons float top-right beside the title, so a task is just: title + one line */
  #tab-todos .todo-table tr.todo-tr td.tc-prio,#tab-todos .todo-table tr.todo-tr td.tc-cost,#tab-todos .todo-table tr.todo-tr td.tc-time,#tab-todos .todo-table tr.todo-tr td.tc-due{order:1;flex:0 0 auto;font-size:calc(11.5px * var(--fsc,1) * var(--ra-fs-scale,1))}
  #tab-todos .todo-table tr.todo-tr td.tc-links{order:2;flex:1 1 0;min-width:0}
  #tab-todos .todo-table tr.todo-tr td.tc-links:has(.todo-links:empty){display:none}
  #tab-todos .todo-table .todo-links{justify-content:flex-start}
  #tab-todos .todo-table td.tc-check{order:-1;flex:0 0 auto}
  #tab-todos .todo-table tr.todo-tr{position:relative;padding:calc(7px * var(--ra-density,1)) calc(10px * var(--ra-density,1)) calc(7px * var(--ra-density,1)) calc(14px * var(--ra-density,1))}
  #tab-todos .todo-table tr.todo-tr td.tc-act{position:absolute;top:6px;right:8px;margin:0;order:0}
  #tab-todos .todo-table tr.todo-tr td.tc-task{padding-right:calc(72px * var(--ra-density,1))}
  #tab-todos .todo-table tr.todo-tr td:first-child{box-shadow:none;padding-left:0}
  #tab-todos .todo-table .todo-tr-edit-btn{width:28px;height:28px;font-size:calc(13px * var(--fsc,1) * var(--ra-fs-scale,1));box-shadow:none!important}
  #tab-todos .todo-table tr.todo-tr-edit{display:block}
  #tab-todos .todo-table tr.todo-tr-edit td{padding:calc(6px * var(--ra-density,1)) 0}
}

/* ── Settings (2026-10-04): head stays pinned; the tab bar + sections are rendered by the kit's settings pack (.ra-set-*, packs/ra-settings.css) ── */
.sp-head{position:sticky;top:-20px;z-index:3;background:var(--ra-surface-1);margin:calc(-20px * var(--ra-density,1)) calc(-18px * var(--ra-density,1)) 0;padding:calc(20px * var(--ra-density,1)) calc(18px * var(--ra-density,1)) 0;border-radius:16px 16px 0 0}
.sp-head .sp-title{margin-bottom:calc(12px * var(--ra-density,1))}
/* wide screens: content column instead of a full-bleed sheet */
#settings-panel .sp-head>*,#settings-panel>#sp-body{max-width:1040px;margin-left:auto;margin-right:auto}
/* stable sheet height so switching tabs doesn't make the panel jump */
#settings-panel{height:min(82vh,760px)}
#sp-body{padding-top:calc(2px * var(--ra-density,1))}
.sp-lbl{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-text-mid)}

/* Habits → Weekly heat (kit RAUI.chart.heatmap + spark, tabs-habits-charts.js) */
.hab-heat-row { display: flex; align-items: center; gap: calc(12px * var(--ra-density,1)); padding: calc(6px * var(--ra-density,1)) 0; border-bottom: 1px solid var(--ra-divider); flex-wrap: wrap; }
.hab-heat-row:last-child { border-bottom: 0; }
.hab-heat-name { flex: 0 0 150px; min-width: 110px; color: var(--ra-text-mid); font-size: calc(11px * var(--fsc,1) * var(--ra-fs-scale,1)); }
.hab-heat-side { display: flex; align-items: center; gap: calc(8px * var(--ra-density,1)); color: var(--ra-text-dim); font-size: calc(10px * var(--fsc,1) * var(--ra-fs-scale,1)); font-variant-numeric: tabular-nums; }

/* Finances → chart strip (kit RAUI.chart.* via tabs-records-money-charts.js) and Claude usage gauge */
.money-chart-strip { display: flex; flex-wrap: wrap; gap: calc(14px * var(--ra-density,1)); padding: calc(8px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1)); align-items: flex-start; }
.money-chart-tile { display: grid; gap: calc(4px * var(--ra-density,1)); min-width: 110px; }
.money-chart-title { font-size: calc(9px * var(--fsc,1) * var(--ra-fs-scale,1)); letter-spacing: .08em; text-transform: uppercase; color: var(--ra-text-mid); }
.money-chart-val { font-size: calc(11px * var(--fsc,1) * var(--ra-fs-scale,1)); font-variant-numeric: tabular-nums; }
.money-chart-donut .ra-donut-wrap { gap: calc(10px * var(--ra-density,1)); }
.cu-card-meta .ra-gauge-wrap { margin-bottom: calc(2px * var(--ra-density,1)); }

/* generic chart strip / tile (Health weekly sparks, Goals gauges) — same look as the Finances strip */
.chart-strip { display: flex; flex-wrap: wrap; gap: calc(14px * var(--ra-density,1)); padding: calc(8px * var(--ra-density,1)) 0 calc(6px * var(--ra-density,1)); align-items: flex-start; }
.chart-tile { display: grid; gap: calc(4px * var(--ra-density,1)); min-width: 110px; }
.chart-title { font-size: calc(9px * var(--fsc,1) * var(--ra-fs-scale,1)); letter-spacing: .08em; text-transform: uppercase; color: var(--ra-text-mid); }
.chart-val { font-size: calc(11px * var(--fsc,1) * var(--ra-fs-scale,1)); font-variant-numeric: tabular-nums; color: var(--ra-text); }
.goals-gauges { gap: calc(18px * var(--ra-density,1)); padding-bottom: calc(10px * var(--ra-density,1)); }

/* 2026-10-04: popup notes sections are kit cards (theme borders) with an accent strip, like Todos rows */
.md-lite-card{position:relative;overflow:hidden;margin-bottom:calc(12px * var(--ra-density,1));padding:calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1)) calc(10px * var(--ra-density,1)) calc(16px * var(--ra-density,1))}
/* nested cards inside a goal: theme .ra-card adds big padding/margin (!important) — keep rows compact */
#goals-panel .goal-mission-row.ra-card{padding:calc(5px * var(--ra-density,1)) calc(10px * var(--ra-density,1))!important;margin:0 0 calc(6px * var(--ra-density,1))!important;min-height:0}
#goals-panel .goal-contract.ra-card{padding:calc(5px * var(--ra-density,1)) calc(10px * var(--ra-density,1)) calc(5px * var(--ra-density,1)) calc(14px * var(--ra-density,1))!important;margin:calc(8px * var(--ra-density,1)) 0 0!important}
#backlinks-modal .md-lite-card.ra-card{padding:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1)) calc(8px * var(--ra-density,1)) calc(16px * var(--ra-density,1))!important;margin:0 0 calc(10px * var(--ra-density,1))!important}
/* Detail popup: link/reference/property rows are dense list lines. Themes box every .ctx-row (hard border + offset
   shadow) which turns a 6-row references list into 6 stacked cards — flatten to divider rows here, keep theme colours */
#backlinks-modal .ctx-row{background:none!important;box-shadow:none!important;border:0!important;border-bottom:var(--ra-border-w,1px) solid var(--ra-divider)!important;border-radius:0!important;margin:0!important;padding:calc(5px * var(--ra-density,1)) 0!important;transform:none!important;filter:none!important}
#backlinks-modal .ctx-row::before,#backlinks-modal .ctx-row::after{content:none!important}
#goals-panel .goal-topic-chip,#backlinks-modal .goal-topic-chip,.goal-hero .goal-topic-chip{font-family:inherit}
/* Nested cards (mission/suggestion rows, definition-of-done, popup note sections): themes paint corner wedges, stripes and
   masks on every .ra-card via ::before/::after + background-image/clip-path — fine on the big goal card, but on small
   rows it covers the Approve/Decline buttons. Same suppression the Todos rows use; the accent strip is re-drawn below. */
#goals-panel :is(.goal-mission-row,.goal-contract).ra-card,#backlinks-modal .md-lite-card.ra-card{background-image:none!important;clip-path:none!important;-webkit-mask:none!important;mask:none!important;transform:none!important;filter:none!important;outline:0!important}
#goals-panel :is(.goal-mission-row,.goal-contract).ra-card::after,#backlinks-modal .md-lite-card.ra-card::after,#goals-panel .goal-mission-row.ra-card::before{content:none!important;display:none!important}
#goals-panel .goal-contract.ra-card::before,#backlinks-modal .md-lite-card.ra-card::before{content:""!important;display:block!important;position:absolute!important;inset:0 auto 0 0!important;width:4px!important;height:auto!important;border:0!important;transform:none!important;clip-path:none!important;background:var(--ra-accent)!important}
#backlinks-modal > .bl-box.ra-card::before,#backlinks-modal > .bl-box.ra-card::after{content:none!important;display:none!important} /* theme corner wedge sat over the popup's edit/close buttons */

/* Settings > Background > Panel transparency (kit v177): the dashboard's own opaque panels follow the slider (html[data-ra-pt] is set by packs/ra-backdrop.js only when it is above 0) */
html[data-ra-pt] body :is(.codex-account-card, .cx-stat, .cx-empty-note, .todo-row, .proj-card, .win-card, .hab-card, .topic-card, .goal-mission-row, .hot-card, .pin-mirror-card, #hero){background:var(--ra-pt-surface)!important;backdrop-filter:blur(var(--bd-ptb,0px))}
html[data-ra-pt] body :is(#topbar, #tabs){background:var(--ra-pt-bar)!important;backdrop-filter:blur(var(--bd-ptb,0px))}

/* kit v184: with the built-in serif default (a theme with no saved look) settings labels and buttons follow it; a theme with its own mono role keeps that mono */
html[data-ra-fdef]{--font-set:var(--ra-font-ui,var(--ra-font-body))}

/* ── topbar + status strip: theme-proof chrome (user report 2026-10-05: "top bar and status bar not looking good for every dynamic ui theme") ──
   240 themes restyle .hero-item as a boxed list ROW (border + hard offset shadow + margin, `!important`, selector body.t-x .hero-item) and
   most restyle .ibtn/.pin-btn/.badge with a heavy offset shadow, so the compact status strip turned into a row of unequal boxed cards
   (the moon / EKG / ring chips collapsed into black bars) and the topbar controls came out in mixed heights. Both are one-line chrome, not
   content, so they get a fixed rule here: an ID selector beats every `body.t-x .cls` rule even against their `!important`.
   Themes keep their colour/ink/border colour/radius; only the chrome-breaking parts (shadow offset, margin, filled card ground, mixed heights) are normalised. */
#hero .hero-item{background:transparent!important;border-width:0 1px 0 0!important;border-style:solid!important;border-color:var(--ra-border)!important;border-radius:0!important;box-shadow:none!important;margin:0!important;transform:none!important;min-height:calc(24px * var(--ra-density,1));filter:none}
#hero .hero-item:first-child{padding-left:0!important}
#hero .hero-item:last-child{border-right-width:0!important}
#hero .hero-item::before,#hero .hero-item::after{content:none!important}
#hero .hero-val{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;border-radius:0!important}
#topbar :is(.ibtn,.pin-btn,#btn-life-architecture,#dock-layout-menu-btn,#badge-mood,#mode-select,#dock-layout-select,#global-lookup-input){box-sizing:border-box;height:30px;min-height:30px;margin:0!important;box-shadow:none!important;transform:none!important}
#topbar :is(.ibtn,.pin-btn,#dock-layout-menu-btn){min-width:30px;width:auto}
#topbar :is(#mode-select,#dock-layout-select,#global-lookup-input,#badge-mood){display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
#topbar :is(#mode-select,#dock-layout-select){display:inline-block;max-width:130px}
/* search: icon-only until focused (2026-10-07 compact topbar) */
#topbar #global-lookup-input{width:34px!important;padding-inline:0!important;text-align:center;transition:width .15s}
#topbar #global-lookup-input::placeholder{opacity:1}
#topbar #global-lookup-input:focus{width:180px!important;padding-inline:calc(8px * var(--ra-density,1))!important;text-align:left}
#topbar .pin-slot .badge,#topbar .ibtn-slot .badge{box-shadow:none!important;min-width:14px;text-align:center;line-height:1.3}
/* Round 2 (2026-10-05): desktop topbar packs left-to-right (title · pins · layout · mode) with the tool cluster pinned right, instead of
   space-between flinging five groups across the bar with big dead gaps. Phones keep their own single-row layout (block above). */
@media(min-width:601px){
  #topbar{justify-content:flex-start;column-gap:calc(12px * var(--ra-density,1))}
  #topbar .tb-right{margin-left:auto;flex-wrap:nowrap;flex-shrink:0}
  #topbar>#pin-bar{margin-left:calc(8px * var(--ra-density,1))}
}
/* notification-count badges: invariant alert red + white ink in every theme (several themes' --ra-btn-text is dark -> unreadable count) */
#topbar .pin-slot .badge,#topbar .ibtn-slot .badge{background:var(--ra-danger)!important;color:var(--ra-on-danger,var(--ra-text-bright))!important;border:0!important;border-radius:999px!important;padding:1px calc(5px * var(--ra-density,1))!important;font-weight:700}
#hero{padding-left:calc(14px * var(--ra-density,1));padding-right:calc(14px * var(--ra-density,1))}

/* Round 3 (2026-10-05, "bars don't match the theme, layout messy, what is the glowing blob?"):
   - (The hearth dot was briefly hidden here on a wrong guess about the "blob"; restored — the real culprit was the topbar sheen, Round 4 below.)
   - Twelve separately boxed controls were the mess. The pin shortcuts and the five tool buttons are now ONE segmented cluster each, built
     only from theme tokens (--ra-border / --ra-radius-md / --ra-surface-2 / --ra-surface-3), so every theme draws its own frame, corner and ground. */
#topbar :is(#pin-bar,.tb-tools){display:inline-flex;align-items:center;gap:calc(2px * var(--ra-density,1));box-sizing:border-box;height:36px;padding:calc(2px * var(--ra-density,1));background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md)}
#topbar :is(#pin-bar,.tb-tools) :is(.ibtn,.pin-btn){background:transparent!important;border:0!important;border-radius:max(0px,calc(var(--ra-radius-md) - 2px))!important;height:30px;min-width:30px}
#topbar :is(#pin-bar,.tb-tools) :is(.ibtn,.pin-btn):hover{background:var(--ra-surface-3)!important}
#topbar :is(#pin-bar,.tb-tools) .pin-btn.active{background:var(--ra-accent-bg)!important;box-shadow:none!important}
#topbar #pin-bar:not(:has(.pin-slot)){display:none}
@media(min-width:601px){#topbar .tb-right{gap:calc(8px * var(--ra-density,1))}}

/* Round 4 (2026-10-05): the "shadow behind the version text" was #topbar::before — an animated 55%-wide light streak ("sheen", 15% white-ish
   gradient sweeping across the bar every 6s) painted on top of the bar, which read as a smudge/ghost glow around the build stamp and clashed
   with every theme's own ground. Removed; the bar is just the theme's surface. */
#topbar::before{content:none!important;animation:none!important}

/* Life Architecture (2026-10-06): foldable sections, jump nav, readable prose, tables, scrollable tab rows */
.life-arch-jump{position:sticky;top:0;z-index:5;background:var(--ra-bg);border-bottom:var(--ra-border-w) solid var(--ra-border);padding-top:calc(4px * var(--ra-density,1))}
.life-arch-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:calc(8px * var(--ra-density,1))}.life-arch-fold>summary::-webkit-details-marker{display:none}.life-arch-fold>summary::before{content:"▸";color:var(--ra-accent);transition:transform var(--ra-motion,.15s) var(--ra-ease,ease)}.life-arch-fold[open]>summary::before{transform:rotate(90deg)}.life-arch-fold>summary h3{margin:0}.life-arch-fold[open]>summary{margin-bottom:calc(15px * var(--ra-density,1))}
.life-arch-table-wrap{overflow-x:auto;margin:calc(8px * var(--ra-density,1)) 0}.life-arch-table-wrap .ra-table th,.life-arch-table-wrap .ra-table td{padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1));text-align:left;vertical-align:top;font-size:calc(12.5px * var(--fsc,1) * var(--ra-fs-scale,1))}
.life-arch-eyebrow{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))!important;font-weight:800;letter-spacing:.14em;color:var(--ra-accent)!important;margin:0 0 calc(8px * var(--ra-density,1))!important}
.life-arch-flow>i{font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1));color:var(--ra-accent)}
.life-arch-hero h2{margin-top:calc(18px * var(--ra-density,1))}
.life-engine-grid article{border-radius:var(--ra-radius-md)}
.life-arch-goal-state{margin-bottom:calc(7px * var(--ra-density,1))}
@container pane (max-width:700px){.life-arch-jump{overflow-x:auto}}
.life-arch-hero ul,.life-arch-panel ul{padding-left:calc(22px * var(--ra-density,1))}
.life-arch-goal-state.ra-badge{display:inline-flex;width:fit-content}

/* kit host (kit-host.js): the title cell's progress bar. The kit only sets --p (0..1) on [data-ra-rank-bar]; how the bar looks is the host's. */
[data-ra-rank-bar]{height:calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-pill);background:var(--ra-surface-2);overflow:hidden}
[data-ra-rank-bar]::before{content:"";display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--ra-accent);border-radius:inherit}

/* ── Mission plan (modules/goals/frontend/core-mission-plan.js, 2026-10-08): todos as a flow of stages joined by arrows ── */
.mplan{margin-bottom:calc(14px * var(--ra-density,1))}
.mplan-label{display:flex;justify-content:space-between;align-items:center;gap:calc(8px * var(--ra-density,1));font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;color:var(--ra-text-faint);text-transform:uppercase;padding-bottom:calc(6px * var(--ra-density,1))}
.mplan{position:relative}
.mplan-label .ra-tabs,.mplan-tools .ra-tabs{flex:0 0 auto;overflow:visible;text-transform:none;letter-spacing:0}
.mplan-label .ra-tab,.mplan-tools .ra-tab{padding:calc(1px * var(--ra-density,1)) calc(8px * var(--ra-density,1));font-size:var(--ra-fs-xs)}
.mplan-branch{display:flex;flex-wrap:wrap;align-items:center;gap:calc(4px * var(--ra-density,1)) calc(10px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1))}
.mplan-branch-label{font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;text-transform:uppercase;color:var(--ra-text-faint);font-weight:700}
.mplan-branch .ra-tabs{flex-wrap:wrap;overflow:visible}
.mplan-branch-note{flex:1 1 100%;font-size:var(--ra-fs-xs);color:var(--ra-text-faint)}
.mplan-summary{display:flex;align-items:center;gap:calc(10px * var(--ra-density,1));margin-bottom:calc(6px * var(--ra-density,1));font-size:var(--ra-fs-xs);color:var(--ra-text-dim)}
.mplan-summary .ra-progress{flex:0 0 38%}
.mplan-legend{display:flex;flex-wrap:wrap;gap:calc(14px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1));font-size:var(--ra-fs-xs);color:var(--ra-text-faint)}
.mplan-legend i{display:inline-block;width:calc(24px * var(--ra-density,1));border-top:2px solid color-mix(in srgb, var(--ra-accent) 45%, var(--ra-text-faint));vertical-align:middle;margin-right:calc(6px * var(--ra-density,1))}
.mplan-legend .mplan-lg-if{border-top-style:dashed;width:calc(10px * var(--ra-density,1));margin-right:calc(2px * var(--ra-density,1))}
.mplan-lg-if-0{border-top-color:var(--ra-purple)}
.mplan-lg-if-1{border-top-color:var(--ra-info)}
.mplan-lg-if-2{border-top-color:var(--ra-warn)}
.mplan-stage-area{position:relative;overflow:auto}
.mplan[data-zoomed="1"] .mplan-stage-area{max-height:70vh}
.mplan[data-dir="h"] .mplan-stage-area{cursor:grab}
.mplan-stage-area.mplan-panning{cursor:grabbing;user-select:none}
.mplan-pan{position:relative}
.mplan-zoom{transform-origin:0 0}
.mplan-stage-area .mplan-flow{padding:calc(3px * var(--ra-density,1)) calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1)) calc(3px * var(--ra-density,1));box-sizing:border-box}   /* room for theme shadows, which the scroll container would clip */
.mplan-edges{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}
.mplan-edge-text{display:none;margin-top:calc(3px * var(--ra-density,1));font-size:var(--ra-fs-xs);color:var(--ra-text-dim);overflow-wrap:anywhere}
.mplan-edge-text b{color:var(--ra-purple)}
.mplan[data-dir="v"] .mplan-edge-text{display:block}
.mplan[data-dir="v"] .mplan-edges{display:none}
.mplan-flow{position:relative;display:flex;align-items:flex-start;gap:calc(44px * var(--ra-density,1));min-width:calc(var(--mplan-cols,3) * 140px * var(--ra-density,1) + (var(--mplan-cols,3) - 1) * 44px * var(--ra-density,1))}
.mplan-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:calc(14px * var(--ra-density,1));flex:1 1 0;min-width:0}
.mplan-col-head{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;color:var(--ra-text-faint)}
.mplan-col-num{display:inline-grid;place-items:center;min-width:calc(20px * var(--ra-density,1));height:calc(20px * var(--ra-density,1));padding:0 calc(4px * var(--ra-density,1));font-size:var(--ra-fs-xs);letter-spacing:0;line-height:1}
.mplan[data-dir="v"] .mplan-flow{flex-direction:column;align-items:stretch;gap:calc(22px * var(--ra-density,1));min-width:0}
.mplan[data-dir="v"] .mplan-col{flex:none}
/* Phone: stages stack as an indented tree (each stage steps in a little), and a stage folds by tapping its heading. */
details.mplan-col{display:block}
.mplan-col-body{display:flex;flex-direction:column;gap:calc(14px * var(--ra-density,1));margin-top:calc(6px * var(--ra-density,1))}
.mplan[data-density="compact"] .mplan-col-body{gap:calc(10px * var(--ra-density,1))}
summary.mplan-col-head{list-style:none;cursor:pointer}
summary.mplan-col-head::-webkit-details-marker{display:none}
.mplan-col-count{margin-left:auto;color:var(--ra-text-faint)}
.mplan[data-dir="h"] details.mplan-col>summary{pointer-events:none}
.mplan[data-dir="h"] .mplan-col-count{display:none}
.mplan[data-dir="v"] summary.mplan-col-head::after{content:"▾";margin-left:calc(6px * var(--ra-density,1));color:var(--ra-text-faint)}
.mplan[data-dir="v"] details.mplan-col:not([open])>summary.mplan-col-head::after{content:"▸"}
#backlinks-modal .mplan[data-dir="v"] .mplan-node.ra-card{margin-left:calc(var(--mplan-lv,0) * 12px * var(--ra-density,1))!important}
/* The card and the chips are kit components (.ra-card / .ra-badge), so every theme's own material (borders, glow, corner shapes,
   fonts) applies to them. Only layout is set here; the geometry-breaking theme effects are neutralised the same way
   .md-lite-card does, and the state colour rides on a real child element because themes override borders/backgrounds. */
.mplan-node{position:relative;overflow:hidden;display:flex;gap:calc(8px * var(--ra-density,1));align-items:flex-start;padding:calc(7px * var(--ra-density,1)) calc(9px * var(--ra-density,1)) calc(7px * var(--ra-density,1)) calc(15px * var(--ra-density,1));cursor:pointer;min-width:0;--mplan-c:var(--ra-border-strong)}
#backlinks-modal .mplan-node.ra-card{transform:none!important;clip-path:none!important;-webkit-mask:none!important;mask:none!important;filter:none!important;backdrop-filter:none!important;outline:0!important;margin:0!important}
#backlinks-modal .mplan-node.ra-card::before,#backlinks-modal .mplan-node.ra-card::after{content:none!important;display:none!important}
.mplan-stripe{position:absolute;left:0;top:0;bottom:0;width:calc(4px * var(--ra-density,1));background:var(--mplan-c)}
.mplan-node:hover,.mplan-node:focus-visible{outline:none}
.mplan-more{font-weight:400}
/* Spacing fix (2026-10-09): themes pad and space every .ra-card with !important, which inflated the nodes (64-103px tall depending on the
   theme). The ID-scoped rule below wins over those, so a node is as tall as its content in every theme. */
#backlinks-modal .mplan-node.ra-card{padding:calc(6px * var(--ra-density,1)) calc(9px * var(--ra-density,1)) calc(6px * var(--ra-density,1)) calc(15px * var(--ra-density,1))!important;margin:0!important;min-height:0!important;height:auto!important}
/* Compact (default): state icon + title (2 lines max) + small chips; the state word is dropped (the icon and stripe already say it). */
.mplan[data-density="compact"] .mplan-col{gap:calc(10px * var(--ra-density,1))}
#backlinks-modal .mplan[data-density="compact"] .mplan-node.ra-card{padding:calc(4px * var(--ra-density,1)) calc(7px * var(--ra-density,1)) calc(4px * var(--ra-density,1)) calc(13px * var(--ra-density,1))!important;gap:calc(5px * var(--ra-density,1))}
.mplan[data-density="compact"] .mplan-title{font-size:calc(10.5px * var(--fsc,1) * var(--ra-fs-scale,1));line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mplan[data-density="compact"] .mplan-state,.mplan[data-density="compact"] .mplan-more{display:none}
.mplan[data-density="compact"] .mplan-meta{gap:calc(3px * var(--ra-density,1));margin-top:calc(2px * var(--ra-density,1))}
.mplan[data-density="compact"] .mplan-meta:empty{display:none}
.mplan[data-density="compact"] .mplan-chip{font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));padding:0 calc(5px * var(--ra-density,1));line-height:1.5}
.mplan[data-density="compact"] .mplan-dot{width:calc(14px * var(--ra-density,1));font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
.mplan[data-density="compact"] .mplan-edge-text{font-size:calc(8.5px * var(--fsc,1) * var(--ra-fs-scale,1));margin-top:calc(1px * var(--ra-density,1))}
.mplan-dot{flex:0 0 auto;width:calc(18px * var(--ra-density,1));text-align:center;font-size:var(--ra-fs-sm);line-height:1.4}
.mplan-body{min-width:0;flex:1}
.mplan-title{font-size:var(--ra-fs-sm);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.mplan-meta{display:flex;flex-wrap:wrap;align-items:center;gap:calc(4px * var(--ra-density,1));margin-top:calc(3px * var(--ra-density,1))}
.mplan-state{font-size:calc(9px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.06em;font-weight:700;color:var(--ra-text-faint)}
.mplan-chip{font-size:var(--ra-fs-xs);padding:0 calc(6px * var(--ra-density,1));line-height:1.55;white-space:normal;max-width:100%;overflow-wrap:anywhere}
.mplan-chip-if{border-style:dashed}
.mplan-ready{--mplan-c:var(--ra-accent-strong)}
.mplan-ready .mplan-state,.mplan-ready .mplan-dot{color:var(--ra-accent-strong)}
.mplan-blocked{--mplan-c:var(--ra-purple)}
.mplan-blocked .mplan-state{color:var(--ra-purple)}
.mplan-waiting{--mplan-c:var(--ra-warn)}
.mplan-waiting .mplan-state{color:var(--ra-warn)}
.mplan-done{--mplan-c:var(--ra-ok);opacity:.78}
.mplan-done .mplan-title,.mplan-skipped .mplan-title{text-decoration:line-through}
.mplan-done .mplan-state,.mplan-done .mplan-dot{color:var(--ra-ok)}
.mplan-skipped{--mplan-c:var(--ra-border-strong);opacity:.6}
.mplan-edge path{fill:none;stroke:color-mix(in srgb, var(--ra-accent) 45%, var(--ra-text-faint));stroke-width:1.8}
.mplan-edge-if0 path,.mplan-edge-if1 path,.mplan-edge-if2 path{stroke-dasharray:5 4}
.mplan-edge-if0 path{stroke:var(--ra-purple)}
.mplan-edge-if1 path{stroke:var(--ra-info)}
.mplan-edge-if2 path{stroke:var(--ra-warn)}
.mplan-edge-done path{stroke:var(--ra-ok)}
.mplan-edge-ready path{stroke:var(--ra-accent-strong)}
.mplan-ah-after{fill:color-mix(in srgb, var(--ra-accent) 45%, var(--ra-text-faint))}
.mplan-ah-if0{fill:var(--ra-purple)}
.mplan-ah-if1{fill:var(--ra-info)}
.mplan-ah-if2{fill:var(--ra-warn)}
.mplan-ah-done{fill:var(--ra-ok)}
.mplan-ah-ready{fill:var(--ra-accent-strong)}
.mplan-edge-tag{fill:var(--ra-surface-1);stroke:var(--ra-purple);stroke-width:1}
.mplan-edge-tagtxt{fill:var(--ra-purple);font-size:var(--ra-fs-xs);font-weight:700}
.mplan-edge-if1 .mplan-edge-tag{stroke:var(--ra-info)}
.mplan-edge-if1 .mplan-edge-tagtxt{fill:var(--ra-info)}
.mplan-edge-if2 .mplan-edge-tag{stroke:var(--ra-warn)}
.mplan-edge-if2 .mplan-edge-tagtxt{fill:var(--ra-warn)}
.mplan-focusing .mplan-edges{z-index:2}   /* the lit arrows run over the dimmed cards, so a skip-a-column arrow shows its whole route */
.mplan-focusing .mplan-edge{opacity:.15}
.mplan-focusing .mplan-edge-on{opacity:1}
.mplan-edge-on path{stroke-width:2.8}
.mplan-focusing .mplan-col .mplan-node{opacity:.4}
.mplan-focusing .mplan-col .mplan-node.mplan-related{opacity:1}
.mplan-history{margin-top:calc(10px * var(--ra-density,1))}
.mplan-history>summary{cursor:pointer;font-size:var(--ra-fs-xs);color:var(--ra-text-dim);padding:calc(4px * var(--ra-density,1)) 0}
.mplan-hist-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(230px * var(--ra-density,1)),1fr));gap:calc(6px * var(--ra-density,1));margin-top:calc(6px * var(--ra-density,1))}
@media (prefers-reduced-motion:no-preference){.mplan-node,.mplan-edge{transition:opacity var(--ra-motion-fast,.12s) var(--ra-ease,ease),border-color var(--ra-motion-fast,.12s) var(--ra-ease,ease)}}
/* Plan view upgrades (2026-10-09): Do next strip, tools row, in-diagram buttons, swim lanes, hover popover, hover-only arrows. */
.mplan-tools{display:flex;flex-wrap:wrap;align-items:center;gap:calc(4px * var(--ra-density,1)) calc(10px * var(--ra-density,1));margin-bottom:calc(8px * var(--ra-density,1))}
.mplan-zoom-ctl{display:inline-flex;align-items:center;gap:calc(2px * var(--ra-density,1))}
.mplan[data-dir="v"] .mplan-zoom-ctl{display:none}
/* Top-down layered chart (procedures, core-flow.js hooks.layout === 'td'): each stage is a ROW, a decision's branches sit side by side, arrows always shown. */
.mplan[data-dir="td"] .mplan-flow{flex-direction:column;align-items:stretch;gap:calc(42px * var(--ra-density,1));min-width:0}
.mplan[data-dir="td"] .mplan-col{flex:none}
.mplan[data-dir="td"] .mplan-col-head,.mplan[data-dir="td"] .mplan-zoom-ctl{display:none}
.mplan[data-dir="td"] .mplan-col-body{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:calc(22px * var(--ra-density,1));margin-top:0}
.mplan[data-dir="td"] .mplan-col-body>.mplan-node{flex:1 1 calc(260px * var(--ra-density,1));max-width:calc(560px * var(--ra-density,1))}
.mplan-edge-label{font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1));fill:var(--ra-text-dim);paint-order:stroke;stroke:var(--ra-bg);stroke-width:calc(4px * var(--ra-density,1));stroke-linejoin:round}
#backlinks-modal .mplan .ra-btn.mplan-zbtn{padding:0 calc(7px * var(--ra-density,1))!important;min-width:0!important;min-height:0!important;margin:0!important;font-size:var(--ra-fs-xs);line-height:1.6}
.mplan-next{margin-bottom:calc(10px * var(--ra-density,1));padding:calc(7px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border:1px solid var(--ra-border);border-left:calc(4px * var(--ra-density,1)) solid var(--ra-accent-strong);border-radius:var(--ra-radius-md);background:color-mix(in srgb, var(--ra-accent) 7%, transparent)}
.mplan-next-head{font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ra-accent-strong);margin-bottom:calc(4px * var(--ra-density,1))}
.mplan-next-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(5px * var(--ra-density,1))}
.mplan-next-item{display:flex;flex-wrap:wrap;align-items:center;gap:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));font-size:var(--ra-fs-sm)}
.mplan-next-rank{flex:0 0 auto;display:inline-grid;place-items:center;width:calc(16px * var(--ra-density,1));height:calc(16px * var(--ra-density,1));border-radius:var(--ra-radius-pill);background:var(--ra-accent-strong);color:var(--ra-bg);font-size:var(--ra-fs-xs);font-weight:700;line-height:1}
.mplan-next-title{flex:1 1 calc(160px * var(--ra-density,1));min-width:0;cursor:pointer;font-weight:600;overflow-wrap:anywhere}
.mplan-next-title:hover{text-decoration:underline}
.mplan-next-why{flex:0 0 auto;font-size:var(--ra-fs-xs);color:var(--ra-text-dim)}
.mplan-next-more{margin-top:calc(4px * var(--ra-density,1));font-size:var(--ra-fs-xs);color:var(--ra-text-faint)}
/* Buttons that write: a round tick on a card, or one button per answer on a decision. Themes pad .ra-btn with !important, hence the ID scope. */
#backlinks-modal .mplan .ra-btn.mplan-tick{flex:0 0 auto;align-self:flex-start;width:calc(20px * var(--ra-density,1));height:calc(20px * var(--ra-density,1));min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border-radius:var(--ra-radius-pill);display:inline-grid;place-items:center;font-size:var(--ra-fs-xs);line-height:1}
#backlinks-modal .mplan .ra-btn.mplan-tick:hover,#backlinks-modal .mplan .ra-btn.mplan-decide:hover{border-color:var(--ra-ok);color:var(--ra-ok)}
.mplan-decide-row{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1));margin-top:calc(4px * var(--ra-density,1))}
#backlinks-modal .mplan .ra-btn.mplan-decide{min-width:0!important;min-height:0!important;margin:0!important;padding:0 calc(8px * var(--ra-density,1))!important;font-size:var(--ra-fs-xs);line-height:1.6}
.mplan-chip-unblocks{font-weight:600}
.mplan-chip-wait{white-space:normal}
/* Longest chain: a thicker stripe on its cards and a heavier arrow, faint enough to stay out of the way. */
.mplan-crit .mplan-stripe{width:calc(7px * var(--ra-density,1))}
.mplan-edge-crit path{stroke-width:2.6}
.mplan-legend .mplan-lg-crit{border-top-width:4px;border-top-color:color-mix(in srgb, var(--ra-accent) 45%, var(--ra-text-faint));opacity:.8}
/* Arrows only for the card you point at (the longest chain stays faintly visible); the "all" switch draws everything. */
.mplan[data-arrows="hover"] .mplan-edge{opacity:0}
.mplan[data-arrows="hover"] .mplan-edge-crit{opacity:.4}
.mplan[data-arrows="hover"] .mplan-edge-on{opacity:1}
.mplan[data-filter="ready"] .mplan-node:not(.mplan-ready),.mplan[data-filter="waiting"] .mplan-node:not(.mplan-waiting),.mplan[data-filter="blocked"] .mplan-node:not(.mplan-blocked){opacity:.22}
/* Swim lanes: one row per path, the same stage columns across every row. */
.mplan[data-view="lanes"] .mplan-flow{flex-direction:column;align-items:stretch;gap:calc(10px * var(--ra-density,1))}
.mplan-stage-heads,.mplan-lane-row{display:grid;grid-template-columns:repeat(var(--mplan-cols,3),minmax(0,1fr));gap:calc(44px * var(--ra-density,1))}
.mplan-stage-heads .mplan-col-head{position:relative;z-index:1}
.mplan-lane{border-top:1px solid var(--ra-border);padding-top:calc(6px * var(--ra-density,1))}
.mplan-lane-head{margin:0 0 calc(6px * var(--ra-density,1));display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));font-size:calc(9.5px * var(--fsc,1) * var(--ra-fs-scale,1));letter-spacing:.08em;text-transform:uppercase;color:var(--ra-text-faint);font-weight:700}
.mplan-lane-n{font-weight:400;letter-spacing:0}
.mplan[data-dir="h"] .mplan-lane-row .mplan-col-head{display:none}
.mplan[data-dir="v"] .mplan-stage-heads{display:none}
.mplan[data-dir="v"] .mplan-lane-row{display:flex;flex-direction:column;gap:calc(14px * var(--ra-density,1))}
.mplan[data-dir="v"] .mplan-col-empty{display:none}
/* Hover popover: detail text without opening the modal. */
.mplan-pop{position:absolute;z-index:3;width:max-content;max-width:min(calc(320px * var(--ra-density,1)), 100%);padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border:1px solid var(--ra-border-strong);border-radius:var(--ra-radius-md);background:var(--ra-surface-1);color:var(--ra-text);box-shadow:0 calc(4px * var(--ra-density,1)) calc(14px * var(--ra-density,1)) color-mix(in srgb, var(--ra-bg) 60%, transparent);pointer-events:none;font-size:var(--ra-fs-xs)}
.mplan-pop[hidden]{display:none}
.mplan-pop-title{font-weight:700;font-size:var(--ra-fs-sm);margin-bottom:calc(3px * var(--ra-density,1))}
.mplan-pop-detail{white-space:pre-line;color:var(--ra-text-dim);margin-bottom:calc(4px * var(--ra-density,1))}
.mplan-pop-row{color:var(--ra-text-dim);margin-top:calc(2px * var(--ra-density,1))}
.mplan-pop-row b{color:var(--ra-text)}
/* Small action buttons: themes decorate .ra-btn (underlines, clipped corners, glow); these stay plain round/pill controls in every theme. */
#backlinks-modal .mplan .ra-btn.mplan-tick,#backlinks-modal .mplan .ra-btn.mplan-decide,#backlinks-modal .mplan .ra-btn.mplan-zbtn{background:var(--ra-surface-1)!important;border:1px solid var(--ra-border-strong)!important;box-shadow:none!important;transform:none!important;clip-path:none!important;filter:none!important;text-shadow:none!important}
#backlinks-modal .mplan .ra-btn.mplan-decide,#backlinks-modal .mplan .ra-btn.mplan-zbtn{border-radius:var(--ra-radius-sm)!important}
#backlinks-modal .mplan .ra-btn.mplan-tick::before,#backlinks-modal .mplan .ra-btn.mplan-tick::after,#backlinks-modal .mplan .ra-btn.mplan-decide::before,#backlinks-modal .mplan .ra-btn.mplan-decide::after,#backlinks-modal .mplan .ra-btn.mplan-zbtn::before,#backlinks-modal .mplan .ra-btn.mplan-zbtn::after{content:none!important;display:none!important}

/* Skills tab — overview cards (2026-10-10, modules/skills/frontend/skills-cards.js + skills-art.js).
   Same information order as a todo card (title, dim meta, summary, tag chips) but a vertical tile with a
   concept cover on top, so a skill is recognisable at a glance and doesn't read as another task row.
   Colour comes from two custom properties set inline: --cover-hue (category, cover art) and --skill-tone
   (status, pill). Both are built from kit tokens, so every theme recolours the whole card. Tokens only. */
/* The card is a real .ra-card: background, edge, radius and shadow come from the kit and are restyled per theme, so only layout is set here. */
#projects-status-panel .skill-card{position:relative;align-self:stretch;min-width:0;display:flex;flex-direction:column;padding:0;box-sizing:border-box;cursor:pointer;transition:transform var(--ra-motion) var(--ra-ease)}
#projects-status-panel .skill-card:hover,#projects-status-panel .skill-card:focus-visible{transform:translateY(-1px);outline:none}
/* A card whose menu is open rises above its neighbours — otherwise the next card paints over the menu. */
#projects-status-panel .skill-card.has-menu{z-index:var(--ra-z-sticky)}
/* Concept cover — shared by the Skills cards and the Goals heroes (core-art.js _conceptCoverHtml). The host class sets size/position. */
.concept-cover{position:relative;overflow:hidden;color:var(--cover-hue,var(--ra-accent));background:radial-gradient(color-mix(in srgb,var(--cover-hue,var(--ra-accent)) 26%,transparent) 1px,transparent calc(1.6px * var(--ra-density,1))) 0 0/calc(11px * var(--ra-density,1)) calc(11px * var(--ra-density,1)),linear-gradient(135deg,color-mix(in srgb,var(--cover-hue,var(--ra-accent)) 30%,var(--ra-surface-2)),color-mix(in srgb,var(--cover-hue,var(--ra-accent)) 9%,var(--ra-surface-1)))}
.concept-cover-art{position:absolute;right:calc(44px * var(--ra-density,1));top:50%;width:calc(74px * var(--ra-density,1));height:calc(74px * var(--ra-density,1));transform:translateY(-50%);filter:drop-shadow(0 calc(2px * var(--ra-density,1)) 0 color-mix(in srgb,var(--cover-hue,var(--ra-accent)) 35%,transparent))}
.concept-cover-echo{position:absolute;right:calc(104px * var(--ra-density,1));bottom:calc(-30px * var(--ra-density,1));width:calc(92px * var(--ra-density,1));height:calc(92px * var(--ra-density,1));opacity:.16;transform:rotate(-14deg)}
/* Wins — icon tile at the start of a Win row (2026-10-12, modules/wins/frontend/wins-art.js). The icon says what kind of work it was; the hue is the win type's accent. Tokens only. */
.win-icon-tile{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--win-icon-size,34px);height:var(--win-icon-size,34px);border-radius:var(--ra-radius-md);color:var(--win-hue,var(--ra-accent));background:radial-gradient(color-mix(in srgb,var(--win-hue,var(--ra-accent)) 26%,transparent) 1px,transparent calc(1.6px * var(--ra-density,1))) 0 0/calc(7px * var(--ra-density,1)) calc(7px * var(--ra-density,1)),linear-gradient(135deg,color-mix(in srgb,var(--win-hue,var(--ra-accent)) 26%,var(--ra-surface-2)),color-mix(in srgb,var(--win-hue,var(--ra-accent)) 8%,var(--ra-surface-1)));border:1px solid color-mix(in srgb,var(--win-hue,var(--ra-accent)) 35%,var(--ra-border))}
.win-icon-tile svg{width:62%;height:62%;display:block}
#projects-status-panel .skill-card-cover{height:calc(88px * var(--ra-density,1));border-radius:var(--ra-card-radius) var(--ra-card-radius) 0 0}
/* Goals tab — cover band behind the top of each hero (2026-10-10, goals-art.js). Fades out downward so the title and text stay legible. */
.goal-hero-cover{position:absolute;left:0;right:0;top:0;height:calc(124px * var(--ra-density,1));z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,currentColor 38%,transparent);mask-image:linear-gradient(to bottom,currentColor 38%,transparent)}
.goal-hero-cover .concept-cover-art{right:calc(36px * var(--ra-density,1));top:calc(14px * var(--ra-density,1));transform:none;width:calc(84px * var(--ra-density,1));height:calc(84px * var(--ra-density,1))}
.goal-hero-cover .concept-cover-echo{right:calc(128px * var(--ra-density,1));bottom:calc(-20px * var(--ra-density,1))}
/* The header lines stop short of the illustration; the missions/stats below keep the full width. */
.goal-hero-head{padding-right:calc(150px * var(--ra-density,1))}
@container pane (max-width:760px){.goal-hero-head{padding-right:0}.goal-hero-cover .concept-cover-art{right:calc(10px * var(--ra-density,1));opacity:.3}.goal-hero-cover .concept-cover-echo{display:none}}
@media (max-width:760px){.goal-hero-head{padding-right:0}.goal-hero-cover .concept-cover-art{right:calc(10px * var(--ra-density,1));opacity:.3}.goal-hero-cover .concept-cover-echo{display:none}}
.goal-hero>:not(.goal-hero-stripe):not(.goal-hero-cover){position:relative;z-index:1}
#projects-status-panel .skill-card-status{position:absolute;left:calc(10px * var(--ra-density,1));bottom:calc(8px * var(--ra-density,1));white-space:nowrap}
#projects-status-panel .skill-card-body{display:flex;flex-direction:column;gap:calc(5px * var(--ra-density,1));flex:1;min-width:0;padding:calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
#projects-status-panel .skill-card-titleline{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1));min-width:0}
#projects-status-panel .skill-card-title{font-family:var(--ra-font-display,var(--ra-font-body));font-size:var(--ra-fs-lg);font-weight:700;color:var(--ra-text-bright);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#projects-status-panel .skill-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6px * var(--ra-density,1));font-size:var(--ra-fs-xs);color:var(--ra-text-dim);text-transform:capitalize}
#projects-status-panel .skill-card-stale{flex:none;font-size:var(--ra-fs-sm);line-height:1}
#projects-status-panel .skill-card-summary{font-size:var(--ra-fs-sm);color:var(--ra-text-mid);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#projects-status-panel .skill-card-foot{display:flex;flex-wrap:wrap;gap:calc(5px * var(--ra-density,1));margin-top:auto;padding-top:calc(4px * var(--ra-density,1));min-height:calc(18px * var(--ra-density,1))}
#projects-status-panel .skill-card-foot .win-fk-chip{color:var(--ra-text-mid);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#projects-status-panel .skill-card-addgoal{background:transparent;border:1px dashed var(--ra-border)}
#projects-status-panel .skill-card-menu{position:absolute;top:calc(8px * var(--ra-density,1));right:calc(8px * var(--ra-density,1));z-index:1;display:flex;gap:calc(4px * var(--ra-density,1))}
#projects-status-panel .skill-card-kebab{font-family:inherit;width:calc(26px * var(--ra-density,1));height:calc(26px * var(--ra-density,1));padding:0;display:grid;place-items:center;font-size:var(--ra-fs-lg);line-height:1;color:var(--ra-text);background:color-mix(in srgb,var(--ra-surface-1) 72%,transparent);border:0;border-radius:var(--ra-radius-md);cursor:pointer}
#projects-status-panel .skill-card-kebab:hover,#projects-status-panel .skill-card-kebab[aria-expanded="true"]{background:var(--ra-surface-3)}
/* Skills on the shared cabView (2026-10-12): the grid comes from the controller; small cards (compact density / kanban) drop the cover; the select checkbox rides over the cover. */
#skills-list .cab-grid{--cab-min-w:300px}
#skills-list{padding-top:calc(10px * var(--ra-density,1))}
#skills-notes:not(:empty){margin-bottom:calc(6px * var(--ra-density,1))}
#projects-status-panel .skill-card .cab-compat-sel{position:absolute;top:calc(8px * var(--ra-density,1));left:calc(8px * var(--ra-density,1));z-index:2;padding:0}
#projects-status-panel .skill-card--small .skill-card-status{position:static}
#projects-status-panel .skill-card--small .skill-card-menu{top:calc(6px * var(--ra-density,1))}
#projects-status-panel .skill-card--small .skill-card-titleline{padding-right:calc(64px * var(--ra-density,1));flex-wrap:wrap}
.skill-glyph{width:calc(22px * var(--ra-density,1));height:calc(22px * var(--ra-density,1));flex:none}

/* ── Life Architecture tab (split from Goals 2026-10-10): Orient view + shared blocks. Tokens only. ── */
#tab-life-architecture .arch-orient{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(14px * var(--ra-density,1))}
@container pane (max-width:800px){#tab-life-architecture .arch-orient{grid-template-columns:minmax(0,1fr)}}
#tab-life-architecture .arch-wide,#tab-life-architecture .arch-north{grid-column:1/-1}
#tab-life-architecture .arch-block{margin:0;padding:calc(16px * var(--ra-density,1)) calc(18px * var(--ra-density,1))}
#tab-life-architecture .arch-block h3{margin:0 0 calc(10px * var(--ra-density,1));font-size:calc(16px * var(--fsc,1) * var(--ra-fs-scale,1))}
#tab-life-architecture .arch-block-head{display:flex;align-items:center;justify-content:space-between;gap:calc(10px * var(--ra-density,1));flex-wrap:wrap;margin-bottom:calc(8px * var(--ra-density,1))}
#tab-life-architecture .arch-block-head h3{margin:0}
#tab-life-architecture .arch-north{background:color-mix(in srgb,var(--ra-accent) 12%,var(--ra-card-bg));border-color:var(--ra-accent-border)}
#tab-life-architecture .arch-eyebrow{font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1));font-weight:800;letter-spacing:.14em;color:var(--ra-accent);text-transform:uppercase}
#tab-life-architecture .arch-north-text{font-size:calc(20px * var(--fsc,1) * var(--ra-fs-scale,1))!important;line-height:1.5!important;color:var(--ra-text-bright)!important;margin:calc(8px * var(--ra-density,1)) 0 0!important}
#tab-life-architecture .arch-muted{color:var(--ra-text-faint);font-size:calc(12px * var(--fsc,1) * var(--ra-fs-scale,1))}
#tab-life-architecture .arch-related{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6px * var(--ra-density,1));margin-top:calc(10px * var(--ra-density,1))}
#tab-life-architecture .arch-related small{color:var(--ra-text-faint);text-transform:uppercase;letter-spacing:.08em;font-size:calc(10px * var(--fsc,1) * var(--ra-fs-scale,1))}
#tab-life-architecture .arch-capacity{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));margin-top:calc(10px * var(--ra-density,1))}
#tab-life-architecture .arch-focus{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(6px * var(--ra-density,1))}
#tab-life-architecture .arch-focus small{display:block;color:var(--ra-text-faint)}
#tab-life-architecture .life-arch-goal b{display:block;padding-right:calc(36px * var(--ra-density,1));margin-bottom:calc(4px * var(--ra-density,1))}
#tab-life-architecture .life-arch-goal small{display:block}
#tab-life-architecture .arch-see{color:var(--ra-text-faint)}
#tab-life-architecture .arch-see a{color:var(--ra-accent)}
#tab-life-architecture .arch-excerpt{margin-bottom:calc(10px * var(--ra-density,1));max-height:calc(280px * var(--ra-density,1));overflow:hidden;-webkit-mask-image:linear-gradient(currentColor 80%,transparent);mask-image:linear-gradient(currentColor 80%,transparent)}
#tab-life-architecture .arch-close{background:var(--ra-surface-1)}
#tab-life-architecture .life-arch-goal{position:relative;display:block;padding:calc(13px * var(--ra-density,1))}
#tab-life-architecture .life-arch-goals.is-compact{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
#tab-life-architecture .arch-goal-edit{position:absolute;top:calc(8px * var(--ra-density,1));right:calc(8px * var(--ra-density,1));padding:calc(2px * var(--ra-density,1)) calc(6px * var(--ra-density,1));min-height:0}
#tab-life-architecture .life-arch-step{cursor:pointer;font-family:var(--ra-font-body);text-align:left;color:var(--ra-text)}
#tab-life-architecture .life-arch-tabpane ul ul,#tab-life-architecture .life-arch-panel ul ul{margin:calc(2px * var(--ra-density,1)) 0}
#tab-life-architecture .life-arch-tabpane ol,#tab-life-architecture .life-arch-panel ol{padding-left:calc(24px * var(--ra-density,1))}
#tab-life-architecture .life-arch-tabpane blockquote,#tab-life-architecture .life-arch-panel blockquote{margin:calc(8px * var(--ra-density,1)) 0;padding:calc(4px * var(--ra-density,1)) calc(12px * var(--ra-density,1));border-left:3px solid var(--ra-accent-border);color:var(--ra-text-mid)}
#tab-life-architecture details.arch-block>summary{cursor:pointer}
#tab-life-architecture details.arch-block>summary h3{display:inline;margin:0}
.goal-edit-modal .ra-dash-modal-body label b{color:var(--ra-text-bright)}
#tab-life-architecture .sg-chips{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1))}
#tab-life-architecture .sg-chip.active{background:var(--ra-accent-bg);border-color:var(--ra-accent-border);color:var(--ra-accent)}
#tab-life-architecture .sg-chip b{margin-left:calc(4px * var(--ra-density,1));opacity:.7}
#tab-life-architecture .sg-filters{display:flex;flex-wrap:wrap;gap:calc(10px * var(--ra-density,1));align-items:flex-end;margin-bottom:calc(10px * var(--ra-density,1))}
#tab-life-architecture .sg-filter{display:flex;flex-direction:column;gap:calc(3px * var(--ra-density,1));font-size:var(--ra-fs-sm);color:var(--ra-text-faint)}
#tab-life-architecture .sg-check-label{justify-content:flex-end}
#tab-life-architecture .sg-bulk{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1));align-items:center;padding:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1));margin-bottom:calc(8px * var(--ra-density,1));background:var(--ra-surface-2);border:var(--ra-border-w,1px) solid var(--ra-accent-border);border-radius:var(--ra-radius-md)}
#tab-life-architecture .sg-bulk[hidden]{display:none}
#tab-life-architecture .sg-group{margin-bottom:calc(8px * var(--ra-density,1));border:var(--ra-border-w,1px) solid var(--ra-border);border-radius:var(--ra-radius-md);background:var(--ra-surface-1)}
#tab-life-architecture .sg-group>summary{cursor:pointer;padding:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1));font-size:var(--ra-fs-md)}
#tab-life-architecture .sg-group[open]>summary{border-bottom:var(--ra-border-w,1px) solid var(--ra-border)}
#tab-life-architecture .sg-group>:not(summary){margin:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
#tab-life-architecture .sg-sub{margin:calc(10px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1))!important;font-size:var(--ra-fs-sm);color:var(--ra-text-faint);text-transform:uppercase;letter-spacing:.08em}
#tab-life-architecture .sg-sub small{opacity:.7}
#tab-life-architecture .sg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#tab-life-architecture .sg-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:calc(10px * var(--ra-density,1));align-items:center;padding:calc(5px * var(--ra-density,1)) calc(2px * var(--ra-density,1));border-bottom:1px solid var(--ra-border)}
#tab-life-architecture .sg-row:last-child{border-bottom:0}
#tab-life-architecture .sg-row.is-dismissed{opacity:.5}
#tab-life-architecture .sg-title{font-weight:600;color:var(--ra-text-bright)}
#tab-life-architecture .sg-star{color:var(--ra-warn);margin-right:calc(4px * var(--ra-density,1))}
#tab-life-architecture .sg-meta{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1)) calc(10px * var(--ra-density,1));align-items:center;font-size:var(--ra-fs-xs);color:var(--ra-text-faint)}
#tab-life-architecture .sg-effort{display:inline-block;min-width:1.4em;text-align:center;border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);color:var(--ra-text-mid);line-height:1.3}
#tab-life-architecture .sg-why{font-size:var(--ra-fs-xs);color:var(--ra-text-mid)}
#tab-life-architecture .sg-detail{margin-top:calc(4px * var(--ra-density,1));font-size:var(--ra-fs-xs);color:var(--ra-text-mid)}
#tab-life-architecture .sg-detail summary{cursor:pointer;color:var(--ra-accent)}
#tab-life-architecture .sg-detail p{font:inherit;margin:calc(4px * var(--ra-density,1)) 0}
#tab-life-architecture .sg-detail ol{margin:calc(4px * var(--ra-density,1)) 0;padding-left:calc(18px * var(--ra-density,1))}
#tab-life-architecture .sg-facts{display:grid;gap:calc(2px * var(--ra-density,1))}
#tab-life-architecture .sg-facts b{color:var(--ra-text)}
#tab-life-architecture .sg-watch{color:var(--ra-warn,var(--ra-text-mid))}
#tab-life-architecture .sg-actions{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1));justify-content:flex-end;align-items:center}
#tab-life-architecture .sg-actions .ra-btn,#tab-life-architecture .sg-bulk .ra-btn,#tab-life-architecture .sg-panel .sg-group .ra-btn{padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));min-height:0;font-size:var(--ra-fs-xs);box-shadow:none}
#tab-life-architecture .sg-sources{margin-top:calc(10px * var(--ra-density,1));font-size:var(--ra-fs-sm)}
#tab-life-architecture .sg-sources small{color:var(--ra-text-faint)}
@container pane (max-width:700px){#tab-life-architecture .sg-row{grid-template-columns:auto minmax(0,1fr)}#tab-life-architecture .sg-actions{grid-column:2;justify-content:flex-start}}

#tab-life-architecture .sg-picks{border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);padding:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1));margin:calc(8px * var(--ra-density,1)) 0}
#tab-life-architecture .sg-picks h4{margin:0 0 calc(4px * var(--ra-density,1))}
#tab-life-architecture .sg-picks small{color:var(--ra-text-mid);font-weight:400;font-size:var(--ra-fs-xs)}
#tab-life-architecture .arch-floors{width:100%;border-collapse:collapse;font-size:var(--ra-fs-sm)}
#tab-life-architecture .arch-floors th{text-align:left;color:var(--ra-text-mid);font-weight:500;padding:calc(4px * var(--ra-density,1))}
#tab-life-architecture .arch-floors td{padding:calc(6px * var(--ra-density,1)) calc(4px * var(--ra-density,1));border-top:1px solid var(--ra-border);vertical-align:top}
#tab-life-architecture .arch-floors .ra-btn{white-space:normal;text-align:left;height:auto}
#tab-life-architecture .sg-form{width:auto;min-width:0;padding:calc(2px * var(--ra-density,1)) calc(6px * var(--ra-density,1))}
#tab-life-architecture .sg-forms-help{margin:calc(8px * var(--ra-density,1)) 0;font-size:var(--ra-fs-sm)}
#tab-life-architecture .sg-forms-help summary{cursor:pointer;color:var(--ra-accent)}
#tab-life-architecture .sg-forms-help small{color:var(--ra-text-mid)}
#tab-life-architecture .sg-sets{display:flex;gap:calc(8px * var(--ra-density,1));margin:calc(8px * var(--ra-density,1)) 0}
#tab-life-architecture .sg-evidence ul{margin:calc(4px * var(--ra-density,1)) 0;padding-left:calc(18px * var(--ra-density,1))}
/* Todos board view: the list container is a card grid — the board spans it and scrolls sideways */
#tab-todos [id^="todo-list-"]>.todo-board{grid-column:1/-1;display:flex;max-width:none;overflow-x:auto;min-width:0}
#tab-todos [id^="todo-list-"]:has(>.todo-board){max-width:none}
#tab-todos .todo-board-col{flex:0 0 clamp(280px,26vw,380px);max-height:none;overflow:visible;display:flex;flex-direction:column;gap:calc(8px * var(--ra-density,1))}

/* Todos toolbar = the shared cab-bar: sticky row [tabs … bar], filters row below (group + mission pills) */
#tab-todos .tdb{flex-wrap:wrap}
#tab-todos .tdb-tools.cab-bar{flex-wrap:nowrap;margin-left:auto}
#tab-todos .tdb-tools #todo-filter{width:auto;flex:0 1 220px;min-width:110px}
#tab-todos .tdb-filters{flex:0 0 100%;padding-top:calc(2px * var(--ra-density,1))}
#tab-todos .tdb-filters .cab-fc.on{background:var(--ra-accent-bg);color:var(--ra-accent-strong,var(--ra-accent));border-color:var(--ra-accent-border)}
@media (max-width:900px){#tab-todos .tdb-tools.cab-bar{flex-wrap:wrap}}

/* Todos: the controller's bar fills the rest of the sticky row; it only wraps as a whole */
#tab-todos .tdb-tools{flex:1 1 auto;min-width:0}
#tab-todos .tdb-tools .cab-bar{flex-wrap:nowrap;justify-content:flex-end}
#tab-todos .tdb-tools .cab-bar-search{flex:0 1 220px;min-width:110px;width:auto}
#tab-todos .tdb-filters{flex:0 0 100%}
#tab-todos .tdb-filters .cab-count{margin-left:auto}
@media (max-width:900px){#tab-todos .tdb-tools .cab-bar{flex-wrap:wrap}}
/* ─── Cabinet suggestion panel (core-cab-suggest.js, 2026-10-11) — kit tokens only ─── */
.cabsug{margin-bottom:calc(10px * var(--ra-density,1))}
.cabsug-box{border:var(--ra-border-w,1px) dashed var(--ra-accent-border);border-radius:var(--ra-radius-md);background:var(--ra-surface-1)}
.cabsug-box>summary{cursor:pointer;padding:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1));font-size:var(--ra-fs-md)}
.cabsug-box>summary small{color:var(--ra-text-faint);font-size:var(--ra-fs-xs);margin-left:calc(6px * var(--ra-density,1))}
.cabsug-box[open]>summary{border-bottom:var(--ra-border-w,1px) solid var(--ra-border)}
.cabsug-box>:not(summary){margin:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1))}
.cabsug-filters{display:flex;flex-wrap:wrap;gap:calc(10px * var(--ra-density,1));align-items:flex-end}
.cabsug-filter{display:flex;flex-direction:column;gap:calc(3px * var(--ra-density,1));font-size:var(--ra-fs-sm);color:var(--ra-text-faint)}
.cabsug-check{justify-content:flex-end}
.cabsug-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cabsug-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(10px * var(--ra-density,1));align-items:start;padding:calc(8px * var(--ra-density,1)) calc(2px * var(--ra-density,1));border-bottom:1px solid var(--ra-border)}
.cabsug-row:last-child{border-bottom:0}
.cabsug-row.is-muted{opacity:.55}
.cabsug-title{font-weight:600;color:var(--ra-text-bright)}
.cabsug-star{color:var(--ra-warn);margin-right:calc(4px * var(--ra-density,1))}
.cabsug-meta{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1));align-items:center;font-size:var(--ra-fs-xs);color:var(--ra-text-faint);margin:calc(2px * var(--ra-density,1)) 0}
.cabsug-effort{display:inline-block;min-width:1.4em;text-align:center;border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);color:var(--ra-text-mid);line-height:1.3}
.cabsug-why{font-size:var(--ra-fs-sm);color:var(--ra-text-mid)}
.cabsug-detail{margin-top:calc(4px * var(--ra-density,1));font-size:var(--ra-fs-xs);color:var(--ra-text-mid)}
.cabsug-detail summary{cursor:pointer;color:var(--ra-accent)}
.cabsug-rec{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:calc(2px * var(--ra-density,1)) calc(10px * var(--ra-density,1));margin:calc(4px * var(--ra-density,1)) 0}
.cabsug-rec dt{color:var(--ra-text-faint);text-transform:capitalize}
.cabsug-rec dd{margin:0;color:var(--ra-text);white-space:pre-wrap;overflow-wrap:anywhere}
.cabsug-gap{color:var(--ra-warn)!important}
.cabsug-src{color:var(--ra-text-faint);font-size:var(--ra-fs-xs);margin:calc(4px * var(--ra-density,1)) 0}
.cabsug-watch{color:var(--ra-warn,var(--ra-text-mid))}
.cabsug-actions{display:flex;gap:calc(4px * var(--ra-density,1));align-items:center}
.cabsug-actions .ra-btn{padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));min-height:0;font-size:var(--ra-fs-xs);box-shadow:none}
.cabsug-detail ul{margin:calc(4px * var(--ra-density,1)) 0;padding-left:calc(18px * var(--ra-density,1))}
@container pane (max-width:700px){.cabsug-row{grid-template-columns:auto minmax(0,1fr)}.cabsug-actions{grid-column:2;justify-content:flex-start}}
.cabsug-facts{display:grid;gap:calc(2px * var(--ra-density,1));margin:calc(4px * var(--ra-density,1)) 0}
.cabsug-facts b{color:var(--ra-text)}
.cabsug-detail ol{margin:calc(4px * var(--ra-density,1)) 0;padding-left:calc(18px * var(--ra-density,1))}
.cabsug-detail p{margin:calc(4px * var(--ra-density,1)) 0}
.cabsug-row{grid-template-columns:auto minmax(0,1fr) auto}
.cabsug-pick{margin-top:calc(4px * var(--ra-density,1))}
.cabsug-bulk{position:sticky;top:0;z-index:var(--ra-z-sticky);display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1));align-items:center;padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1));background:var(--ra-surface-2);border:var(--ra-border-w,1px) solid var(--ra-accent-border);border-radius:var(--ra-radius-md)}
.cabsug-bulk[hidden]{display:none}
.cabsug-bulk .ra-btn{padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));min-height:0;font-size:var(--ra-fs-xs);box-shadow:none}

/* ─── ✨ Suggestions tab (tabs-suggestions.js, 2026-10-11) — reuses the .cabsug-* row styles; kit tokens only ─── */
#tab-suggestions .sgt-stats{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1)) calc(18px * var(--ra-density,1));margin:calc(6px * var(--ra-density,1)) 0 calc(10px * var(--ra-density,1));font-size:var(--ra-fs-md);color:var(--ra-text-dim)}
#tab-suggestions .sgt-stat b{color:var(--ra-text-bright)}
#tab-suggestions .sgt-cabs{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1))}
#tab-suggestions .sgt-cabs .ra-pill.active{background:var(--ra-accent-bg);border-color:var(--ra-accent-border);color:var(--ra-accent)}
#tab-suggestions .sgt-cabs .ra-pill b{margin-left:calc(4px * var(--ra-density,1));opacity:.7}
#tab-suggestions .sgt-filters{display:flex;flex-wrap:wrap;gap:calc(10px * var(--ra-density,1));align-items:flex-end;margin-bottom:calc(10px * var(--ra-density,1))}
#tab-suggestions .sgt-group,#tab-suggestions .sgt-attrs{margin-bottom:calc(8px * var(--ra-density,1))}
#tab-suggestions .sgt-group>summary b{font-size:var(--ra-fs-lg)}
#tab-suggestions .sgt-attrs{margin-top:calc(14px * var(--ra-density,1))}
#tab-suggestions .sgt-attrs .ra-table{width:100%}
/* ─── Suggestions tab rework (2026-10-11): modes, saved views, detail pane, triage, undo bar; kit tokens only ─── */
#tab-suggestions [hidden]{display:none!important}
#tab-suggestions .sgt-stat{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
#tab-suggestions .sgt-stat:disabled{cursor:default}
#tab-suggestions .sgt-stat:not(:disabled):hover b{color:var(--ra-accent)}
#tab-suggestions .sgt-progress{display:inline-flex;align-items:center;gap:calc(6px * var(--ra-density,1))}
#tab-suggestions .sgt-progress progress{width:calc(120px * var(--ra-density,1));accent-color:var(--ra-accent)}
#tab-suggestions .sgt-toolbar{display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1)) calc(16px * var(--ra-density,1));align-items:center;margin-bottom:calc(8px * var(--ra-density,1))}
#tab-suggestions .sgt-modes,#tab-suggestions .sgt-views{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));align-items:center}
#tab-suggestions .sgt-views .ra-pill.active,#tab-suggestions .sgt-modes .ra-pill.active{background:var(--ra-accent-bg);border-color:var(--ra-accent-border);color:var(--ra-accent)}
#tab-suggestions .sgt-views .ra-pill b{margin-left:calc(4px * var(--ra-density,1));opacity:.7}
#tab-suggestions .sgt-more{position:relative}
#tab-suggestions .sgt-more>summary{list-style:none;cursor:pointer}
#tab-suggestions .sgt-more[open]>.sgt-more-grid{position:absolute;z-index:var(--ra-z-sticky);top:100%;left:0;margin-top:calc(4px * var(--ra-density,1));padding:calc(10px * var(--ra-density,1));min-width:min(520px,90vw);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:calc(10px * var(--ra-density,1));background:var(--ra-surface-2);border:var(--ra-border-w,1px) solid var(--ra-accent-border);border-radius:var(--ra-radius-md)}
#tab-suggestions .sgt-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,38%);gap:calc(12px * var(--ra-density,1));align-items:start}
#tab-suggestions .sgt-detail{position:sticky;top:calc(8px * var(--ra-density,1));max-height:calc(100vh - 90px);overflow:auto;padding:calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1));background:var(--ra-surface-1);border:var(--ra-border-w,1px) solid var(--ra-border);border-radius:var(--ra-radius-md)}
#tab-suggestions .sgt-detail-head{display:flex;justify-content:space-between;gap:calc(8px * var(--ra-density,1));align-items:flex-start}
#tab-suggestions .sgt-detail-actions{flex-wrap:wrap;margin:calc(6px * var(--ra-density,1)) 0}
#tab-suggestions .sgt-detail-close{display:none}
#tab-suggestions .sgt-verify{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));align-items:center;padding:calc(6px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border:var(--ra-border-w,1px) solid var(--ra-warn);border-radius:var(--ra-radius-sm);margin:calc(6px * var(--ra-density,1)) 0}
#tab-suggestions .sgt-verify .ra-btn,#tab-suggestions .sgt-today .ra-btn,#tab-suggestions .sgt-triage-card .ra-btn{padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));min-height:0;font-size:var(--ra-fs-xs);box-shadow:none}
#tab-suggestions .sgt-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:calc(8px * var(--ra-density,1));margin-top:calc(6px * var(--ra-density,1))}
#tab-suggestions .sgt-today{padding:calc(10px * var(--ra-density,1)) calc(12px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1));background:var(--ra-accent-bg);border:var(--ra-border-w,1px) solid var(--ra-accent-border);border-radius:var(--ra-radius-md)}
#tab-suggestions .sgt-triage-card{max-width:760px;margin:0 auto;padding:calc(14px * var(--ra-density,1));background:var(--ra-surface-1);border:var(--ra-border-w,1px) solid var(--ra-accent-border);border-radius:var(--ra-radius-md)}
#tab-suggestions .sgt-keys{margin:calc(8px * var(--ra-density,1)) 0}
#tab-suggestions kbd{border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);padding:0 calc(4px * var(--ra-density,1));font-size:var(--ra-fs-xs)}
#tab-suggestions .cabsug-titlebtn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ra-text-bright);text-align:left;cursor:pointer}
#tab-suggestions .cabsug-titlebtn:hover,#tab-suggestions .cabsug-titlebtn:focus-visible{color:var(--ra-accent);text-decoration:underline}
#tab-suggestions .cabsug-row.is-selected{background:var(--ra-accent-bg);box-shadow:inset 3px 0 0 var(--ra-accent)}
#tab-suggestions.sgt-compact .cabsug-why,#tab-suggestions.sgt-compact .cabsug-meta{display:none}
#tab-suggestions.sgt-compact .cabsug-row{padding-top:calc(3px * var(--ra-density,1));padding-bottom:calc(3px * var(--ra-density,1))}
#tab-suggestions .sgt-density{margin-left:calc(8px * var(--ra-density,1))}
.cabsug-ask{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1));align-items:center;font-size:var(--ra-fs-xs);color:var(--ra-text-mid)}
.cabsug-undo{position:fixed;left:50%;bottom:calc(16px * var(--ra-density,1));transform:translateX(-50%);z-index:calc(var(--ra-z-overlay) + 2);display:flex;gap:calc(10px * var(--ra-density,1));align-items:center;padding:calc(8px * var(--ra-density,1)) calc(14px * var(--ra-density,1));background:var(--ra-surface-2);color:var(--ra-text-bright);border:var(--ra-border-w,1px) solid var(--ra-accent-border);border-radius:var(--ra-radius-md);box-shadow:var(--ra-shadow-2)}
.cabsug-undo[hidden]{display:none}
@container pane (max-width:900px){
  #tab-suggestions .sgt-body{grid-template-columns:minmax(0,1fr)}
  #tab-suggestions .sgt-detail{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:60vh;z-index:var(--ra-z-sticky);border-radius:var(--ra-radius-md) var(--ra-radius-md) 0 0}
  #tab-suggestions .sgt-detail.is-empty{display:none}
  #tab-suggestions .sgt-detail-close{display:inline-flex}
}

#tab-suggestions .sgt-filters .ra-btn,#tab-suggestions .cabsug-bulk .ra-btn{min-height:0;padding:calc(5px * var(--ra-density,1)) calc(12px * var(--ra-density,1));font-size:var(--ra-fs-sm);box-shadow:none}

/* ─── Wins tab: the /dd-win-generate skill card (2026-10-12); kit tokens only ─── */
.wins-skill-wrap{margin:calc(6px * var(--ra-density,1)) 0 calc(8px * var(--ra-density,1))}
.wins-skill{border:var(--ra-border-w,1px) dashed var(--ra-accent-border);border-radius:var(--ra-radius-md);background:var(--ra-surface-1)}
.wins-skill>summary{cursor:pointer;padding:calc(6px * var(--ra-density,1)) calc(12px * var(--ra-density,1));font-size:var(--ra-fs-md);display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1)) calc(8px * var(--ra-density,1));align-items:center}
.wins-skill[open]>summary{border-bottom:var(--ra-border-w,1px) solid var(--ra-border)}
.wins-skill .wins-skill-name{font-family:var(--ra-font-mono,monospace);color:var(--ra-accent)}
.wins-skill>:not(summary){margin:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1))}
.wins-skill-desc,.wins-skill-note{color:var(--ra-text-mid);font-size:var(--ra-fs-sm)}
.wins-skill-cmd{display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1));align-items:center;font-size:var(--ra-fs-sm);color:var(--ra-text-faint)}
.wins-skill-cmd code{padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);color:var(--ra-text-bright)}
.wins-skill-cmd .ra-btn{padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));min-height:0;font-size:var(--ra-fs-xs);box-shadow:none}

/* ─── Wins tab: 📖 About sub-tab (2026-10-12); kit tokens only ─── */
.wins-guide{display:flex;flex-direction:column;gap:calc(8px * var(--ra-density,1))}
.wins-guide-sec{border:var(--ra-border-w,1px) solid var(--ra-border);border-radius:var(--ra-radius-md);background:var(--ra-surface-1)}
.wins-guide-sec>summary{cursor:pointer;padding:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1));font-size:var(--ra-fs-lg);font-weight:600;color:var(--ra-text-bright)}
.wins-guide-sec[open]>summary{border-bottom:var(--ra-border-w,1px) solid var(--ra-border)}
.wins-guide-body{padding:calc(4px * var(--ra-density,1)) calc(14px * var(--ra-density,1)) calc(10px * var(--ra-density,1));color:var(--ra-text-mid);font-size:var(--ra-fs-md);line-height:1.55}
.wins-guide-body h5{margin:calc(10px * var(--ra-density,1)) 0 calc(2px * var(--ra-density,1));color:var(--ra-text-bright);font-size:var(--ra-fs-md)}
.wins-guide-body ul{margin:calc(4px * var(--ra-density,1)) 0;padding-left:calc(20px * var(--ra-density,1))}
.wins-guide-body code{padding:0 calc(5px * var(--ra-density,1));background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);color:var(--ra-text)}
.wins-guide-body .ra-table{width:100%;margin:calc(6px * var(--ra-density,1)) 0}
.wins-guide-note{color:var(--ra-text-faint);font-size:var(--ra-fs-sm)}

/* ─── Skill detail modal (2026-10-12): System > Skills cards and the Wins tab; kit tokens only ─── */
.skill-card{cursor:pointer}
.skill-card:hover,.skill-card:focus-visible{border-color:var(--ra-accent-border);box-shadow:0 0 0 1px var(--ra-accent-border)}
.skill-modal-box{width:min(900px,96vw);max-height:88vh;display:flex;flex-direction:column}
.skill-modal-box .ra-dash-modal-head{flex-shrink:0;align-items:flex-start}
.skill-modal-actions{display:flex;gap:calc(6px * var(--ra-density,1));align-items:center;flex-wrap:wrap;justify-content:flex-end}
.skill-modal-body{overflow:auto;min-height:0}
.skill-modal-menu{margin-bottom:calc(10px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1));background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);font-size:var(--ra-fs-sm);color:var(--ra-text-mid)}
.skill-modal-menu p{margin:0 0 calc(4px * var(--ra-density,1))}
.skill-modal-warn{color:var(--ra-danger-strong,var(--ra-warn))}
.skill-md-h{color:var(--ra-text-bright);font-weight:700;margin:calc(14px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1))}
.skill-md-h2{font-size:var(--ra-fs-xl,1.25em);border-bottom:1px solid var(--ra-border);padding-bottom:calc(3px * var(--ra-density,1))}
.skill-md-h3{font-size:var(--ra-fs-lg)}
.skill-md-h4,.skill-md-h5,.skill-md-h6{font-size:var(--ra-fs-md)}
.skill-md p,.skill-md li{color:var(--ra-text-mid);line-height:1.6}
.skill-md ul,.skill-md ol{padding-left:calc(22px * var(--ra-density,1));margin:calc(4px * var(--ra-density,1)) 0}
.skill-md code{padding:0 calc(5px * var(--ra-density,1));background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);color:var(--ra-text)}
.skill-md .ra-table{width:100%;margin:calc(6px * var(--ra-density,1)) 0}
.skill-md-code{margin:calc(6px * var(--ra-density,1)) 0;padding:calc(8px * var(--ra-density,1)) calc(12px * var(--ra-density,1));background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--ra-fs-sm);color:var(--ra-text);line-height:1.5}
.skill-md-front summary{cursor:pointer;color:var(--ra-text-faint);font-size:var(--ra-fs-sm)}

/* ─── Wins: AI session chip, detail and picker modal (2026-10-12); kit tokens only ─── */
.wins-ai-chip{background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-lg);color:var(--ra-text-mid);cursor:pointer;font:inherit;font-size:var(--ra-fs-xs);padding:0 calc(8px * var(--ra-density,1))}
.wins-ai-chip:hover,.wins-ai-chip:focus-visible{border-color:var(--ra-accent-border);color:var(--ra-accent)}
.win-ai-box{width:min(760px,96vw);max-height:86vh;display:flex;flex-direction:column}
.win-ai-box .ra-dash-modal-head{flex-shrink:0}
.win-ai-body{overflow:auto;min-height:0}
.win-ai-body h5{margin:calc(12px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1));color:var(--ra-text-bright)}
.win-ai-rows,.win-ai-linked{list-style:none;margin:0;padding:0}
.win-ai-rows li,.win-ai-linked li{display:flex;gap:calc(10px * var(--ra-density,1));align-items:center;justify-content:space-between;padding:calc(6px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-border)}
.win-ai-rows .ra-btn,.win-ai-linked .ra-btn{padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));min-height:0;font-size:var(--ra-fs-xs);box-shadow:none}
.win-ai-add{display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1));align-items:center}
.win-ai-add .ra-input{flex:1 1 240px}
.win-ai-transcript{max-height:300px;overflow:auto;border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);padding:calc(6px * var(--ra-density,1)) calc(10px * var(--ra-density,1));font-size:var(--ra-fs-sm)}
.win-ai-msg{padding:calc(3px * var(--ra-density,1)) 0;color:var(--ra-text-mid);white-space:pre-wrap;overflow-wrap:anywhere}
.win-ai-msg b{color:var(--ra-accent);margin-right:calc(6px * var(--ra-density,1))}
.win-ai-actions{display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1));align-items:center;margin-top:calc(10px * var(--ra-density,1))}
.win-ai-actions .ra-btn{padding:calc(3px * var(--ra-density,1)) calc(10px * var(--ra-density,1));min-height:0;font-size:var(--ra-fs-sm);box-shadow:none;text-decoration:none}
.win-ai-linked-btns{display:flex;gap:calc(6px * var(--ra-density,1))}
.win-ai-body .cabsug-check{display:flex;gap:calc(6px * var(--ra-density,1));align-items:center;margin:calc(6px * var(--ra-density,1)) 0;font-size:var(--ra-fs-sm);color:var(--ra-text-mid)}

/* ─── File / skill chips and the file viewer (2026-10-12): any file or skill name in the dashboard is a chip ─── */
.ra-ref{--ref-c:var(--ra-accent);display:inline;padding:0 calc(5px * var(--ra-density,1));border:1px dashed color-mix(in srgb,var(--ref-c) 55%,transparent);border-radius:var(--ra-radius-sm);background:color-mix(in srgb,var(--ref-c) 9%,transparent);color:var(--ref-c);cursor:pointer;font-family:var(--ra-font-mono,monospace);font-size:.92em;font-weight:500;text-decoration:none;overflow-wrap:anywhere;transition:background var(--ra-motion,.15s) var(--ra-ease,ease),border-color var(--ra-motion,.15s) var(--ra-ease,ease)}
.ra-ref::before{content:"📄";margin-right:.3em;font-size:.88em;filter:saturate(.85)}
.ra-ref:hover,.ra-ref:focus-visible{border-style:solid;background:color-mix(in srgb,var(--ref-c) 20%,transparent);outline:none}
.ra-ref:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ref-c) 45%,transparent)}
.ra-ref-skill{--ref-c:var(--ra-purple,var(--ra-accent))}
.ra-ref-skill::before{content:"🧩"}
.ra-ref-t-py,.ra-ref-t-js,.ra-ref-t-sh,.ra-ref-t-sql{--ref-c:var(--ra-ok,var(--ra-accent))}
.ra-ref-t-json,.ra-ref-t-yaml,.ra-ref-t-toml{--ref-c:var(--ra-warn,var(--ra-accent))}
.ra-ref-t-html,.ra-ref-t-css{--ref-c:var(--ra-info,var(--ra-accent))}
.ra-ref-t-py::before{content:"🐍"}.ra-ref-t-js::before{content:"🟨"}.ra-ref-t-json::before,.ra-ref-t-yaml::before,.ra-ref-t-toml::before{content:"🧾"}
.ra-ref-t-html::before{content:"🌐"}.ra-ref-t-css::before{content:"🎨"}.ra-ref-t-sh::before{content:"⌨️"}.ra-ref-t-sql::before{content:"🗄️"}
code.ra-ref{padding-inline:calc(6px * var(--ra-density,1))}
.fv-box{width:min(960px,96vw);max-height:90vh;display:flex;flex-direction:column}
.fv-box .ra-dash-modal-head{flex-shrink:0;align-items:flex-start}
.fv-head{min-width:0}
.fv-path{overflow-wrap:anywhere}
.fv-lines{margin:0;padding:calc(6px * var(--ra-density,1)) 0;background:var(--ra-surface-2);border:1px solid var(--ra-border);border-radius:var(--ra-radius-md);overflow:auto;font-family:var(--ra-font-mono,monospace);font-size:var(--ra-fs-sm);line-height:1.5}
.fv-line{display:flex;gap:calc(12px * var(--ra-density,1));padding:0 calc(10px * var(--ra-density,1))}
.fv-line.is-hit{background:color-mix(in srgb,var(--ra-warn) 22%,transparent)}
.fv-ln{flex:0 0 3.2em;text-align:right;color:var(--ra-text-faint);user-select:none}
.fv-lt{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ra-text);min-width:0}

/* ── Home tab (home-tab-rework-spec.md, 2026-10-12) ─────────────────────────
   Renderers: modules/system/frontend/panels-home.js. Kit classes (ra-card,
   ra-badge, ra-btn, ra-pill) carry the look; this block is layout + a per-panel
   accent (--home-accent) so each panel reads as its own kind of content. */
#tab-dashboard .home{display:flex;flex-direction:column;gap:calc(14px * var(--ra-density,1));padding:calc(14px * var(--ra-density,1)) calc(18px * var(--ra-density,1)) calc(24px * var(--ra-density,1))}
#tab-dashboard .home-strip{display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1));align-items:center}
#tab-dashboard .home-strip[hidden],#tab-dashboard .home-card[hidden]{display:none}
#tab-dashboard .home-now-item{display:inline-flex;align-items:center;gap:calc(8px * var(--ra-density,1));padding:calc(7px * var(--ra-density,1)) calc(12px * var(--ra-density,1));background:var(--ra-warn-bg);color:var(--ra-text);border:1px solid var(--ra-warn-border);border-radius:var(--ra-radius-md);font:inherit;font-size:var(--ra-fs-md)}
#tab-dashboard .home-chip{cursor:pointer;color:var(--ra-warn);border-color:var(--ra-warn-border);background:var(--ra-warn-bg);font:inherit;font-size:var(--ra-fs-sm)}
#tab-dashboard .home-grid{display:grid;gap:calc(14px * var(--ra-density,1));align-items:stretch}
#tab-dashboard .home-grid-top{grid-template-columns:repeat(2,minmax(0,1fr))}
#tab-dashboard .home-grid-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
/* panel shell: accent top edge + tinted header, per content type */
#tab-dashboard .home-card{--home-accent:var(--ra-accent);display:flex;flex-direction:column;gap:calc(10px * var(--ra-density,1));min-width:0;margin:0;border-top:3px solid var(--home-accent);background-image:linear-gradient(180deg,color-mix(in srgb,var(--home-accent) 7%,transparent),transparent 90px)}
#tab-dashboard .home-card--todos{--home-accent:var(--ra-accent)}
#tab-dashboard .home-card--habits{--home-accent:var(--ra-ok)}
#tab-dashboard .home-card--radar{--home-accent:var(--ra-purple,var(--ra-info))}
#tab-dashboard .home-card--attention{--home-accent:var(--ra-danger)}
#tab-dashboard .home-card--wins{--home-accent:var(--ra-warn)}
#tab-dashboard .home-card--claude{--home-accent:var(--ra-info)}
#tab-dashboard .home-card>h4{display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--ra-density,1));margin:0;color:var(--home-accent)}
#tab-dashboard .home-card>h4 .ra-badge[hidden]{display:none}
#tab-dashboard .home-body{display:flex;flex-direction:column;min-width:0;min-height:calc(72px * var(--ra-density,1))}
#tab-dashboard #home-radar-panel,#tab-dashboard #claude-usage-panel{min-height:0}
/* inner item cards: the kit's .ra-card, so each theme keeps drawing its own border / radius / corner style, but one
   step apart from the panel around it. Themes force .ra-card with !important, so the differences are !important too:
   a faint text-colour wash over whatever fill the theme paints (darker on light themes, lighter on dark ones), a hairline (1px) border in the
   theme's own colour/style/radius instead of its heavy panel border (the coloured left edge stays), no drop shadow, and none of the panel decorations (pins, tape, ornaments). */
#tab-dashboard :is(.home-habit,.home-radar-item,.home-attn,.home-win,.home-cu-card).ra-card{background-image:linear-gradient(color-mix(in srgb,var(--ra-text) 7%,transparent),color-mix(in srgb,var(--ra-text) 7%,transparent))!important;box-shadow:none!important;transform:none!important;border-top-width:1px!important;border-right-width:1px!important;border-bottom-width:1px!important;}
#tab-dashboard :is(.home-habit,.home-radar-item,.home-attn,.home-win,.home-cu-card).ra-card::before,#tab-dashboard :is(.home-habit,.home-radar-item,.home-attn,.home-win,.home-cu-card).ra-card::after{content:none!important;display:none!important}
/* clickable text that looks like text */
#tab-dashboard .home-link{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
#tab-dashboard .home-link:hover{color:var(--home-accent);text-decoration:underline}
/* todos + wins rows */
#tab-dashboard .home-row{flex:0 0 auto;display:flex;align-items:center;gap:calc(10px * var(--ra-density,1));padding:calc(7px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-border);min-height:calc(34px * var(--ra-density,1))}
#tab-dashboard .home-row:last-of-type:not(.home-win){border-bottom:0}
#tab-dashboard .home-row-title{flex:1;min-width:0;overflow-wrap:anywhere}
#tab-dashboard .home-check{flex:0 0 auto;width:calc(18px * var(--ra-density,1));height:calc(18px * var(--ra-density,1));padding:0;border:2px solid var(--home-accent);border-radius:var(--ra-radius-sm);background:transparent;cursor:pointer}
#tab-dashboard .home-check:hover,#tab-dashboard .home-check.is-done{background:var(--ra-ok-bg);border-color:var(--ra-ok)}
#tab-dashboard .home-win{padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1));margin-bottom:calc(6px * var(--ra-density,1));border-left:3px solid var(--home-accent)!important}
#tab-dashboard .home-win.ra-card{background-image:linear-gradient(90deg,color-mix(in srgb,var(--home-accent) 16%,transparent),color-mix(in srgb,var(--ra-text) 7%,transparent))!important}
#tab-dashboard .home-more{align-self:flex-start;margin-top:calc(6px * var(--ra-density,1));padding:0;border:0;background:none;color:var(--home-accent);font:inherit;font-size:var(--ra-fs-sm);cursor:pointer}
#tab-dashboard .home-more.is-static{color:var(--ra-text-faint);cursor:default}
#tab-dashboard .home-empty,#tab-dashboard .home-clear{display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--ra-density,1));flex:1;color:var(--ra-text-mid);font-size:var(--ra-fs-sm);text-align:center}
#tab-dashboard .home-clear{color:var(--ra-ok);font-size:var(--ra-fs-md)}
/* habits: tick box + label tiles */
#tab-dashboard .home-habits{display:grid;gap:calc(8px * var(--ra-density,1));grid-template-columns:repeat(auto-fill,minmax(calc(190px * var(--ra-density,1)),1fr))}
#tab-dashboard .home-habits-flex{margin-top:calc(8px * var(--ra-density,1))}
#tab-dashboard .home-habit{display:flex;align-items:center;gap:calc(10px * var(--ra-density,1));padding:calc(9px * var(--ra-density,1)) calc(12px * var(--ra-density,1));min-width:0}
#tab-dashboard .home-habit-tick{flex:0 0 auto;width:calc(26px * var(--ra-density,1));height:calc(26px * var(--ra-density,1));padding:0;border:2px solid var(--ra-ok);border-radius:var(--ra-radius-pill);background:transparent;color:var(--ra-bg);font-weight:700;cursor:pointer}
#tab-dashboard .home-habit-tick:hover{background:var(--ra-ok-bg)}
#tab-dashboard .home-habit-main{display:flex;flex-direction:column;gap:calc(2px * var(--ra-density,1));min-width:0;flex:1}
#tab-dashboard .home-habit-name{font-size:var(--ra-fs-md);font-weight:600;overflow-wrap:anywhere}
#tab-dashboard .home-habit-meta{font-size:var(--ra-fs-sm);color:var(--ra-text-mid)}
#tab-dashboard .home-habit.is-done.ra-card{background-image:linear-gradient(var(--ra-ok-bg),var(--ra-ok-bg))!important;border-color:var(--ra-ok-border)}
#tab-dashboard .home-habit.is-done .home-habit-tick{background:var(--ra-ok);border-color:var(--ra-ok)}
#tab-dashboard .home-habit.is-done .home-habit-name{text-decoration:line-through;opacity:.8}
#tab-dashboard .home-habit.is-missed.ra-card{background-image:linear-gradient(var(--ra-danger-bg),var(--ra-danger-bg))!important;border-color:var(--ra-danger-border)}
#tab-dashboard .home-habit.is-skipped{opacity:.65}
/* coming up: full text, wraps */
#tab-dashboard .home-radar{display:grid;gap:calc(8px * var(--ra-density,1));grid-template-columns:repeat(auto-fill,minmax(calc(260px * var(--ra-density,1)),1fr))}
#tab-dashboard .home-radar-item{display:flex;justify-content:space-between;gap:calc(10px * var(--ra-density,1));align-items:flex-start;padding:calc(9px * var(--ra-density,1)) calc(12px * var(--ra-density,1));border-left:3px solid var(--home-accent)!important;color:var(--ra-text);font:inherit;text-align:left;cursor:pointer;min-width:0}
#tab-dashboard .home-radar-item.is-event{border-left-color:var(--ra-info)!important}
#tab-dashboard .home-radar-item.is-goal{border-left-color:var(--ra-ok)!important}
#tab-dashboard .home-radar-item.is-today.ra-card{background-image:linear-gradient(var(--ra-warn-bg),var(--ra-warn-bg))!important}
#tab-dashboard .home-radar-item:hover{border-color:var(--home-accent)}
#tab-dashboard .home-radar-title{min-width:0;overflow-wrap:anywhere;white-space:normal}
#tab-dashboard .home-radar-when{flex:0 0 auto;color:var(--ra-text-mid);font-size:var(--ra-fs-sm);white-space:nowrap}
/* attention queue */
#tab-dashboard .home-attn{display:flex;align-items:center;gap:calc(10px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1));margin-bottom:calc(6px * var(--ra-density,1));border-left:3px solid var(--ra-info)!important}
#tab-dashboard .home-attn.sev-3{border-left-color:var(--ra-danger)!important}
#tab-dashboard .home-attn.sev-2{border-left-color:var(--ra-warn)!important}
#tab-dashboard .home-attn-icon{flex:0 0 auto}
#tab-dashboard .home-attn-body{flex:1;min-width:0}
#tab-dashboard .home-attn-title{font-weight:600;overflow-wrap:anywhere}
#tab-dashboard .home-attn-sub{color:var(--ra-text-mid);font-size:var(--ra-fs-sm);overflow-wrap:anywhere}
#tab-dashboard .home-card--attention .home-body{flex:1 1 0;min-height:0;overflow:hidden}
#tab-dashboard .home-attn{flex:0 0 auto}
#tab-dashboard .home-attn[hidden],#tab-dashboard .home-more[hidden]{display:none}
.home-attn-detail{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ra-text)}
.home-attn-modal-actions{display:flex;flex-wrap:wrap;gap:var(--ra-space-3);justify-content:flex-end;margin-top:calc(14px * var(--ra-density,1))}
#tab-dashboard .home-attn-actions{display:flex;gap:calc(6px * var(--ra-density,1));flex:0 0 auto}
#tab-dashboard .home-attn-actions .ra-btn{min-height:0;padding:calc(4px * var(--ra-density,1)) calc(10px * var(--ra-density,1));font-size:var(--ra-fs-sm)}
/* wins: the same icon tile / photo thumbnail as the Wins tab, title only */
#tab-dashboard .home-win-photo{flex:0 0 auto;width:calc(34px * var(--ra-density,1));height:calc(34px * var(--ra-density,1));object-fit:cover;border-radius:var(--ra-radius-md)}
/* Claude usage: one card per enabled account (AI Hub readings) — session + weekly limit, reset countdown */
#tab-dashboard .home-cu-grid{display:grid;gap:calc(12px * var(--ra-density,1));grid-template-columns:repeat(auto-fit,minmax(calc(280px * var(--ra-density,1)),1fr))}
#tab-dashboard .home-cu-card{display:flex;flex-direction:column;gap:calc(10px * var(--ra-density,1));padding:calc(12px * var(--ra-density,1)) calc(14px * var(--ra-density,1));width:100%;cursor:pointer}
#tab-dashboard .home-cu-title{display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--ra-density,1))}
#tab-dashboard .home-cu-row{display:flex;flex-direction:column;gap:calc(4px * var(--ra-density,1))}
#tab-dashboard .home-cu-head{display:flex;justify-content:space-between;gap:calc(8px * var(--ra-density,1));font-size:var(--ra-fs-sm);color:var(--ra-text-mid)}
#tab-dashboard .home-cu-val{color:var(--ra-text);font-weight:600;text-align:right}
#tab-dashboard #claude-usage-panel .cu-account-grid{grid-template-columns:repeat(auto-fit,minmax(calc(300px * var(--ra-density,1)),1fr))}
@media (max-width:900px){#tab-dashboard .home-grid-top,#tab-dashboard .home-grid-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  #tab-dashboard .home{padding:calc(10px * var(--ra-density,1)) calc(16px * var(--ra-density,1)) calc(20px * var(--ra-density,1))}
  #tab-dashboard .home-attn{flex-wrap:wrap}
  #tab-dashboard .home-attn-actions{width:100%;justify-content:flex-end}
}
/* Home hero (greeting + ring tiles) — the only part of the Round 10 layout refresh that was kept */
#tab-dashboard .home-hero{display:grid;gap:calc(14px * var(--ra-density,1));grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(0,1fr));align-items:stretch}
/* hero: greeting card + ring tiles (kit .ra-card so themes draw them; only layout here) */
#tab-dashboard .home-greet{display:flex;flex-direction:column;justify-content:center;gap:calc(4px * var(--ra-density,1));padding:calc(16px * var(--ra-density,1)) calc(18px * var(--ra-density,1));border-left:4px solid var(--ra-accent)!important}
#tab-dashboard .home-greet-hi{font-family:var(--ra-font-display,var(--ra-font-body));font-size:var(--ra-fs-xl);font-weight:700;color:var(--ra-text-bright,var(--ra-text));line-height:1.15}
#tab-dashboard .home-greet-date{color:var(--ra-text-mid);font-size:var(--ra-fs-md)}
#tab-dashboard .home-greet-sum{margin-top:calc(6px * var(--ra-density,1));font-size:var(--ra-fs-sm);color:var(--ra-text-mid)}
#tab-dashboard .home-stat{display:flex;align-items:center;gap:calc(12px * var(--ra-density,1));padding:calc(12px * var(--ra-density,1)) calc(14px * var(--ra-density,1));font:inherit;color:var(--ra-text);text-align:left;cursor:pointer;min-width:0}
#tab-dashboard .home-stat-txt{display:flex;flex-direction:column;gap:calc(2px * var(--ra-density,1));min-width:0}
#tab-dashboard .home-stat-txt b{font-size:var(--ra-fs-md)}
#tab-dashboard .home-stat-txt small{font-size:var(--ra-fs-sm);color:var(--ra-text-mid);overflow-wrap:anywhere}
/* ring gauge */
#tab-dashboard .home-ringwrap{position:relative;flex:0 0 auto;display:inline-grid;place-items:center;width:var(--s,56px);height:var(--s,56px)}
#tab-dashboard .home-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--c,var(--ra-accent)) calc(var(--p,0) * 1%),color-mix(in srgb,var(--ra-text) 14%,transparent) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),var(--ra-text) calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),var(--ra-text) calc(100% - 6px))}
#tab-dashboard .home-ring-ico{position:relative;width:calc(var(--s,56px) * .42);height:calc(var(--s,56px) * .42);color:var(--c,var(--ra-accent))}
@media (max-width:1100px){
  #tab-dashboard .home-hero{grid-template-columns:repeat(4,minmax(0,1fr))}
  #tab-dashboard .home-greet{grid-column:1/-1}
}
@media (max-width:900px){#tab-dashboard .home-hero{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Needs attention + Today's wins: a fixed window of about five cards; the rest scrolls (no "+N more"). */
#tab-dashboard :is(.home-card--attention,.home-card--wins) .home-body{height:calc(5 * 52px * var(--ra-density,1));min-height:0;flex:0 0 auto;overflow-y:auto;overflow-x:hidden;padding-right:calc(6px * var(--ra-density,1));scrollbar-width:thin;scrollbar-color:var(--home-accent) transparent}
#tab-dashboard :is(.home-card--attention,.home-card--wins) .home-body::-webkit-scrollbar{width:calc(8px * var(--ra-density,1))}
#tab-dashboard :is(.home-card--attention,.home-card--wins) .home-body::-webkit-scrollbar-track{background:color-mix(in srgb,var(--ra-text) 8%,transparent);border-radius:var(--ra-radius-pill)}
#tab-dashboard :is(.home-card--attention,.home-card--wins) .home-body::-webkit-scrollbar-thumb{background:var(--home-accent);border-radius:var(--ra-radius-pill)}

/* mission due-date calendar popover (tabs-goals-detail.js _missionPickDeadline) — kit tokens only */
.mission-dp{position:fixed;z-index:var(--ra-z-overlay);width:calc(236px * var(--ra-density,1));padding:calc(10px * var(--ra-density,1));background:var(--ra-surface-2);color:var(--ra-text);border:1px solid var(--ra-border-strong);border-radius:var(--ra-radius-md);box-shadow:var(--ra-shadow-2)}
.mission-dp-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;margin-bottom:calc(6px * var(--ra-density,1))}
.mission-dp-nav{background:none;border:1px solid var(--ra-border);border-radius:var(--ra-radius-sm);color:var(--ra-text);cursor:pointer;width:calc(26px * var(--ra-density,1));height:calc(26px * var(--ra-density,1))}
.mission-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(2px * var(--ra-density,1));text-align:center;font-size:calc(11px * var(--fsc,1) * var(--ra-fs-scale,1))}
.mission-dp-grid b{color:var(--ra-text-faint);font-weight:600;padding:calc(3px * var(--ra-density,1)) 0}
.mission-dp-day{background:none;border:1px solid transparent;border-radius:var(--ra-radius-sm);color:var(--ra-text);cursor:pointer;padding:calc(5px * var(--ra-density,1)) 0}
.mission-dp-day:hover,.mission-dp-nav:hover{background:var(--ra-accent-bg);border-color:var(--ra-accent-border)}
.mission-dp-day.is-today{border-color:var(--ra-accent)}
.mission-dp-day.is-selected{background:var(--ra-accent);color:var(--ra-bg);font-weight:700}
.mission-dp-foot{display:flex;justify-content:space-between;margin-top:calc(8px * var(--ra-density,1))}

/* ---- Procedures tab (procedures-spec.md §17). Kit classes for every control; this block is page layout + the flow chart's per-theme card reset ---- */
#tab-procedures .mplan[data-dir="v"] .mplan-node.ra-card{margin-left:calc(var(--mplan-lv,0) * 12px * var(--ra-density,1))!important}
#tab-procedures .mplan-node.ra-card{transform:none!important;clip-path:none!important;-webkit-mask:none!important;mask:none!important;filter:none!important;backdrop-filter:none!important;outline:0!important;margin:0!important}
#tab-procedures .mplan-node.ra-card::before,#tab-procedures .mplan-node.ra-card::after{content:none!important;display:none!important}
#tab-procedures .mplan-node.ra-card{padding:calc(6px * var(--ra-density,1)) calc(9px * var(--ra-density,1)) calc(6px * var(--ra-density,1)) calc(15px * var(--ra-density,1))!important;margin:0!important;min-height:0!important;height:auto!important}
#tab-procedures .mplan[data-density="compact"] .mplan-node.ra-card{padding:calc(4px * var(--ra-density,1)) calc(7px * var(--ra-density,1)) calc(4px * var(--ra-density,1)) calc(13px * var(--ra-density,1))!important;gap:calc(5px * var(--ra-density,1))}
.proc-split{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(14px * var(--ra-density,1));align-items:start}
.proc-split-detail{grid-template-columns:minmax(calc(280px * var(--ra-density,1)),34%) minmax(0,1fr)}
.proc-list,.proc-detail{min-width:0}
.proc-filters{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));margin-bottom:calc(8px * var(--ra-density,1))}
.proc-filters .ra-input{flex:1 1 100%}
.proc-filters .ra-select{flex:1 1 calc(30% - 6px);min-width:0}
.proc-split-detail .proc-list :is(.cab-kpis,.cab-kv,.cab-card-text,.cab-card-chips,.cab-card-foot){display:none}   /* beside an open detail the list is a slim navigator: title + badges only */
.proc-split-detail .proc-detail{position:sticky;top:calc(var(--topbar-h,54px) + 8px);align-self:start;max-height:calc(100vh - var(--topbar-h,54px) - 90px);overflow:auto;overscroll-behavior:contain}   /* two scrolls: the list moves, the chart stays */
.proc-cab-on{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-accent);outline-offset:calc(-1px * var(--ra-density,1))}
.proc-row-meta{font-size:var(--ra-fs-xs);color:var(--ra-text-dim)}
.proc-head{display:flex;justify-content:space-between;gap:calc(10px * var(--ra-density,1));flex-wrap:wrap;margin-bottom:calc(8px * var(--ra-density,1))}
.proc-head-main{min-width:0;flex:1 1 260px}
.proc-title{margin:0;font-size:var(--ra-fs-xl)}
.proc-sub{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1));margin-top:calc(4px * var(--ra-density,1))}
.proc-summary{color:var(--ra-text-dim);margin:calc(6px * var(--ra-density,1)) 0 0}
.proc-head-actions,.proc-live,.proc-ed-actions,.proc-run-foot,.proc-run-controls,.proc-sug-actions,.proc-choices{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));align-items:center}
.proc-live,.proc-run-foot{margin:calc(8px * var(--ra-density,1)) 0}
.proc-problems,.proc-banner{display:block;margin:calc(6px * var(--ra-density,1)) 0;white-space:normal}
.proc-views{margin:calc(8px * var(--ra-density,1)) 0}
.proc-view{min-width:0}
.proc-checklist-meta{font-size:var(--ra-fs-xs);color:var(--ra-text-dim);margin-bottom:calc(6px * var(--ra-density,1))}
.proc-steps,.proc-run-steps,.proc-group-steps,.proc-rungs,.proc-ladder,.proc-log,.proc-preview,.proc-reasons{list-style:none;margin:0;padding:0}
.proc-step,.proc-run-step{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8px * var(--ra-density,1));padding:calc(7px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-bottom:1px solid var(--ra-border);cursor:pointer}
.proc-run-step{cursor:default;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.proc-step-skipped{opacity:.55}
.proc-step-n,.proc-group-n,.proc-rung-n{flex:0 0 auto;min-width:calc(22px * var(--ra-density,1));text-align:center;font-size:var(--ra-fs-xs);color:var(--ra-text-faint)}
.proc-step-text{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.proc-step-badges,.proc-run-step-main{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1));align-items:center}
.proc-run-step-main .proc-step-text{flex:1 1 200px}
.proc-rs-done .proc-step-text{text-decoration:line-through;color:var(--ra-text-faint)}
.proc-rs-skipped{opacity:.55}
.proc-rs-active{border-left:3px solid var(--ra-accent)}
.proc-rs-waiting{border-left:3px solid var(--ra-warn)}
.proc-rs-failed{border-left:3px solid var(--ra-danger)}
.proc-run-note{font-size:var(--ra-fs-xs);color:var(--ra-text-dim)}
.proc-run-controls:empty{display:none}
.proc-rungs{display:flex;flex-direction:column;gap:calc(2px * var(--ra-density,1));font-size:var(--ra-fs-xs)}
.proc-rung-sub{margin-left:calc(8px * var(--ra-density,1));color:var(--ra-text-dim)}
.proc-rung-won,.proc-rung-won b{color:var(--ra-ok)}
.proc-flow-bar{display:flex;flex-wrap:wrap;gap:calc(10px * var(--ra-density,1));align-items:center;margin-bottom:calc(8px * var(--ra-density,1))}
.proc-diff-toggle{display:inline-flex;gap:calc(6px * var(--ra-density,1));align-items:center;font-size:var(--ra-fs-xs);color:var(--ra-text-dim)}
.proc-flow-host{min-width:0}
.proc-flow .mplan-edge-fail path{stroke:var(--ra-danger);stroke-dasharray:2 3}
.proc-flow .mplan-ah-fail{fill:var(--ra-danger)}
.proc-lg-loop{display:inline-block;width:calc(24px * var(--ra-density,1));border-top:2px dotted var(--ra-danger);vertical-align:middle;margin-right:calc(6px * var(--ra-density,1))}
.proc-inherited{opacity:.55}
.proc-diff{border-color:var(--ra-purple)!important}
.proc-ess{color:var(--ra-info)}
.proc-group{margin-top:calc(4px * var(--ra-density,1))}
.proc-group-toggle{font-size:var(--ra-fs-xs);padding:calc(1px * var(--ra-density,1)) calc(6px * var(--ra-density,1))}
.proc-group-steps{margin-top:calc(4px * var(--ra-density,1));display:flex;flex-direction:column;gap:calc(2px * var(--ra-density,1))}
.proc-group-step{display:flex;gap:calc(6px * var(--ra-density,1));align-items:center;font-size:var(--ra-fs-xs)}
.proc-group-step-skipped{opacity:.5}
.proc-ladder{display:flex;flex-direction:column;gap:calc(2px * var(--ra-density,1));margin-top:calc(4px * var(--ra-density,1));font-size:var(--ra-fs-xs)}
.proc-rung-failed{color:var(--ra-danger)}
.proc-vrow,.proc-run-row,.proc-sug{display:flex;justify-content:space-between;align-items:center;gap:calc(8px * var(--ra-density,1));margin-bottom:calc(6px * var(--ra-density,1));cursor:pointer}
.proc-sug{cursor:default;flex-wrap:wrap}
.proc-sug-text{flex:1 1 260px;min-width:0}
.proc-today-block{margin-bottom:calc(14px * var(--ra-density,1))}
.proc-h3{font-size:var(--ra-fs-sm);margin:calc(10px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1));color:var(--ra-text-dim);text-transform:uppercase;letter-spacing:.06em}
.proc-facts{display:grid;grid-template-columns:max-content 1fr;gap:calc(4px * var(--ra-density,1)) calc(12px * var(--ra-density,1));margin:0}
.proc-facts dt{color:var(--ra-text-dim)}
.proc-facts dd{margin:0;overflow-wrap:anywhere}
.proc-shared-badge{cursor:pointer;font:inherit}
.proc-cabinet{margin:calc(8px * var(--ra-density,1)) 0}
.proc-card-facts{margin-top:calc(8px * var(--ra-density,1))}
.proc-card-facts code{overflow-wrap:anywhere}
.proc-instruction{white-space:pre-wrap;overflow-wrap:anywhere;max-height:50vh;overflow:auto;font-family:var(--ra-font-mono,monospace);font-size:var(--ra-fs-xs);background:var(--ra-surface-2);padding:calc(8px * var(--ra-density,1));border-radius:var(--ra-radius-sm)}
.proc-field{display:flex;flex-direction:column;gap:calc(4px * var(--ra-density,1));margin-bottom:calc(8px * var(--ra-density,1));font-size:var(--ra-fs-xs);color:var(--ra-text-dim);flex:1 1 160px}
.proc-field .ra-input,.proc-field .ra-select,.proc-field textarea{width:100%;box-sizing:border-box}
.proc-field-row{display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1))}
.proc-json{font-family:var(--ra-font-mono,monospace);font-size:var(--ra-fs-xs);width:100%;box-sizing:border-box}
.proc-ed-step{margin-bottom:calc(6px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1))}
.proc-ed-step-main,.proc-ed-step-more{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));align-items:center}
.proc-ed-step-more{margin-top:calc(6px * var(--ra-density,1))}
.proc-ed-step-main>.ra-input[data-f="text"]{flex:1 1 220px;min-width:0}
.proc-ed-step-more>*{flex:1 1 200px;min-width:0}
.proc-ed-small{flex:0 1 calc(90px * var(--ra-density,1))!important}
.proc-step-desc{margin:0 0 calc(10px * var(--ra-density,1));color:var(--ra-text)}
.proc-ed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(220px * var(--ra-density,1)),1fr));gap:0 calc(10px * var(--ra-density,1))}
.proc-ed-grid .proc-field-wide{grid-column:1/-1}
.proc-ed-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(6px * var(--ra-density,1))}
.proc-ed-t{font-weight:600;color:var(--ra-text)}
.proc-ed-hint{color:var(--ra-text-dim);font-size:var(--ra-fs-xs);line-height:1.35}
.proc-ed-ess{display:flex;align-items:center;gap:calc(6px * var(--ra-density,1))}
.proc-ed-ess input{width:auto}
.proc-ed-move[hidden]{display:none}
.proc-ed-move{display:inline-flex;gap:calc(2px * var(--ra-density,1))}
.proc-ed-problems{margin:calc(8px * var(--ra-density,1)) 0;color:var(--ra-warn)}
.proc-adv{margin:calc(8px * var(--ra-density,1)) 0}
.proc-needs{margin:calc(8px * var(--ra-density,1)) 0;padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1));border:1px solid var(--ra-warn);border-radius:var(--ra-radius-md)}
.proc-needs ul{margin:calc(4px * var(--ra-density,1)) 0 0;padding-left:calc(18px * var(--ra-density,1))}
.proc-run-head{display:flex;gap:calc(10px * var(--ra-density,1));align-items:flex-start;flex-wrap:wrap}
.proc-run-title{flex:1 1 220px;min-width:0}
.proc-run-tools{display:flex;gap:calc(10px * var(--ra-density,1));align-items:center;flex-wrap:wrap}
.proc-ai-result pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:calc(4px * var(--ra-density,1)) 0}
.proc-light-card{padding:calc(18px * var(--ra-density,1));text-align:center}
.proc-light-text{font-size:var(--ra-fs-xl);margin-bottom:calc(10px * var(--ra-density,1));overflow-wrap:anywhere}
.proc-light-buttons{display:flex;gap:calc(10px * var(--ra-density,1));justify-content:center;flex-wrap:wrap}
.proc-light-buttons .ra-btn{min-height:calc(48px * var(--ra-density,1));min-width:calc(96px * var(--ra-density,1));font-size:var(--ra-fs-lg)}
.proc-preview li,.proc-log li,.proc-reasons li{padding:calc(4px * var(--ra-density,1)) 0;border-bottom:1px solid var(--ra-border);overflow-wrap:anywhere}
.proc-modal .ra-dash-modal-box{background:var(--ra-surface-1)}
@media (max-width:760px){.proc-split-detail{grid-template-columns:minmax(0,1fr)}.proc-split-detail .proc-list{display:none}.proc-split-detail .proc-detail{position:static;max-height:none;overflow:visible}.proc-facts{grid-template-columns:minmax(0,1fr)}}   /* phones: the list or the detail, never both — ✕ goes back */
.proc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(8px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1))}
.proc-bar .ra-tabs{flex:1 1 auto;min-width:0;flex-wrap:wrap}

/* Procedures flowchart (modules/procedures/frontend/procedures-flowchart.js): an SVG of arrows with every node drawn as a REAL themed component —
   steps and decisions are .ra-card, Start/End and branch labels are .ra-badge, in a foreignObject — so each theme's own card material, border,
   shadow, font and ornaments restyle the chart (nothing here hard-codes a look). Only geometry and the actor stripe are ours. */
.pfc{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:calc(4px * var(--ra-density,1)) 0}
.pfc-svg{display:block;margin:0 auto;font-family:var(--ra-font-body,inherit)}
.pfc-fo{overflow:visible}
.pfc-node{cursor:pointer;outline:0}
.pfc-node,.pfc-node:hover,.pfc-node:active,.pfc-node:focus-visible{transform:none!important;translate:none!important;scale:none!important;rotate:none!important;transition:none!important}
/* The nodes are SVG groups with role=button: a theme's hover / pressed effect (scale, lift) applied to a <g> moves it relative to the SVG origin, so a node far from the corner jumped tens of pixels between mouse-down and mouse-up and the click vanished (neumorph, claymorphism). Nodes never move; the click target of a step card is a still rectangle on top of it, so a theme's hover / pressed motion on the card can never move the card out from under the pointer between mouse-down and mouse-up (which made the click vanish). The card keeps its hover outline through .pfc-node:hover. */
.pfc-dim{opacity:.22}
.pfc-dim .pfc-hit{pointer-events:all}
.pfc-collapsed .pfc-card{border-style:dashed;font-weight:700}
.proc-sticky{position:sticky;top:0;z-index:6;display:grid;gap:calc(4px * var(--ra-density,1));padding:calc(6px * var(--ra-density,1)) calc(6px * var(--ra-density,1));margin-bottom:calc(6px * var(--ra-density,1));background:var(--ra-surface-1,var(--ra-bg));border-bottom:1px solid var(--ra-border)}
.proc-ctl-row{display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--ra-density,1));flex-wrap:nowrap;min-width:0}
.proc-ctl-main{display:flex;align-items:center;gap:calc(4px * var(--ra-density,1));flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:calc(1px * var(--ra-density,1))}
.proc-ctl-end{display:flex;align-items:center;gap:calc(4px * var(--ra-density,1));flex:0 0 auto}
.proc-filter-label{font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));text-transform:uppercase;letter-spacing:.06em;opacity:.7;flex:0 0 auto;min-width:calc(46px * var(--ra-density,1))}
.proc-chip{flex:0 0 auto;white-space:nowrap;min-height:0;padding:calc(2px * var(--ra-density,1)) calc(8px * var(--ra-density,1));font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));line-height:1.5;opacity:.85}
.proc-chip.is-on{opacity:1;font-weight:700}
.proc-chip.is-on::before{content:"\2713\00a0"}
.proc-chip[data-act=collapse].is-on::before,.proc-chip[data-act=clear]::before{content:none}
.proc-chip:disabled{opacity:.4}
.proc-seg{display:inline-flex;flex:0 0 auto}
.proc-seg>.proc-chip:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}
.proc-seg>.proc-chip:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.proc-chip:focus-visible{outline:2px solid var(--ra-accent);outline-offset:1px;position:relative;z-index:1}
@media (max-width:760px){.proc-sticky{top:var(--topbar-h,54px)}.proc-ctl-row{flex-wrap:wrap}.proc-ctl-main{flex-basis:100%}}
.proc-dim{opacity:.35}
.proc-phase-toggle{all:unset;cursor:pointer;display:flex;gap:calc(8px * var(--ra-density,1));align-items:baseline;width:100%}
.proc-phase-toggle:focus-visible{outline:2px solid var(--ra-accent);outline-offset:2px}
.proc-phase-n{opacity:.65;font-size:calc(11px * var(--ra-fs-scale,1))}
/* Handoffs view */
.pdg-handoffs{display:grid;gap:calc(18px * var(--ra-density,1))}
.ho-hint,.ho-desc,.ho-who,.ho-n,.ho-empty{font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));opacity:.7;margin:0}
.ho-matrix{border-collapse:separate;border-spacing:calc(3px * var(--ra-density,1));table-layout:fixed;width:100%;min-width:calc(520px * var(--ra-density,1))}
.ho-matrix th,.ho-matrix td{text-align:center;padding:calc(6px * var(--ra-density,1)) calc(4px * var(--ra-density,1));font-weight:600;border-radius:var(--ra-radius-sm,4px)}
.ho-corner{width:calc(116px * var(--ra-density,1));text-align:left!important;font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));opacity:.7;font-weight:400!important}
.ho-row{text-align:left!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ho-col{overflow:hidden}.ho-ic{display:block;font-size:1.15em;line-height:1.2}.ho-row .ho-ic{display:inline}
.ho-nm{display:block;font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ho-has{background:color-mix(in srgb,var(--ra-accent) var(--ho,30%),transparent);cursor:help}
.ho-has b{font-size:1.05em}
.ho-names{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(2px * var(--ra-density,1));align-items:stretch}
.ho-names .proc-art-link{color:inherit;font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));font-weight:500;line-height:1.25;text-align:left;width:100%}
.ho-matrix-sec:not(.ho-hide-names) .ho-has b,.ho-hide-names .ho-names{display:none}
.ho-matrix-sec:not(.ho-hide-names) .ho-has{cursor:default;text-align:left;vertical-align:top}
.ho-toggle{margin-left:calc(8px * var(--ra-density,1))}
.ho-none{background:color-mix(in srgb,var(--ra-border) 25%,transparent)}
.ho-self{background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--ra-border) 50%,transparent) 4px 5px)}
.ho-grid{column-width:calc(340px * var(--ra-density,1));column-gap:calc(10px * var(--ra-density,1))}    /* masonry: each card is as tall as its content and the next one sits right under it, no gaps */
.ho-card{padding:calc(10px * var(--ra-density,1));display:grid;gap:calc(8px * var(--ra-density,1));min-width:0;break-inside:avoid;margin:0 0 calc(10px * var(--ra-density,1));box-sizing:border-box}
.ho-card-head{display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--ra-density,1))}
.ho-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(10px * var(--ra-density,1))}
.ho-cols h4{margin:0 0 calc(4px * var(--ra-density,1));font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.ho-count{font-weight:400;opacity:.7}
.ho-list{list-style:none;margin:0;padding:0;display:grid;gap:calc(3px * var(--ra-density,1))}
.ho-list li{display:flex;flex-direction:column;min-width:0;padding-left:calc(6px * var(--ra-density,1));border-left:2px solid color-mix(in srgb,var(--ra-accent) 45%,transparent)}
.ho-table td,.ho-table th{vertical-align:top;text-align:left}
.ho-art{min-width:calc(150px * var(--ra-density,1))}
.ho-ph{white-space:nowrap;font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)))}
.ho-chip{margin:0 calc(2px * var(--ra-density,1)) calc(2px * var(--ra-density,1)) 0}
@media (max-width:560px){.ho-cols{grid-template-columns:minmax(0,1fr)}}
.proc-art-link{all:unset;cursor:pointer;color:var(--ra-accent);text-decoration:underline dotted}
.proc-art-link:focus-visible{outline:2px solid var(--ra-accent);outline-offset:2px}
.pfc-hit{fill:transparent;stroke:none;cursor:pointer;pointer-events:all}
.pfc-node .pfc-card{pointer-events:none}
.pfc-card{box-sizing:border-box;width:100%;height:100%;margin:0!important;position:relative;overflow:visible;cursor:pointer;font-size:calc(11.5px * var(--ra-fs-scale,1));line-height:1.25;color:var(--ra-text-bright)}
.pfc-body{position:absolute;inset:0;padding:0 calc(10px * var(--ra-density,1)) 0 calc(14px * var(--ra-density,1));display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none}   /* independent of the theme's own card padding */
.pfc-edge-data path{stroke-dasharray:4 3}
.pfc-edge-link path{opacity:.4}
.pfc-edge-link:hover path{opacity:1;stroke-width:2}
.proc-datalinks[aria-pressed=true]{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-accent)}
.pfc-group-box{fill:var(--ra-accent);fill-opacity:.07;stroke:var(--ra-accent);stroke-width:1.2;stroke-dasharray:6 4}
.proc-phase-head{list-style:none;margin:calc(14px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1));padding:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-left:calc(3px * var(--ra-density,1)) solid var(--ra-accent);background:color-mix(in srgb,var(--ra-accent) 8%,transparent);font-size:calc(12px * var(--ra-fs-scale,1))}
.pfc-group-phase .pfc-group-box{fill-opacity:.05;stroke-dasharray:none;stroke-width:1.6}
.pfc-group-label{font-size:calc(10px * var(--ra-fs-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%}
.pfc[data-mode=compact] .pfc-card-text{-webkit-line-clamp:2}
.pfc-body,.pfc-dtext{flex-direction:column}
.pfc-with{display:block;max-width:100%;margin-top:calc(2px * var(--ra-density,1));font-size:calc(9.5px * var(--ra-fs-scale,1));opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfc-card-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-width:0}
.pfc-dpoly{fill:var(--pfc-fill,var(--ra-surface-1));stroke:var(--pfc-stroke,var(--ra-border-strong));stroke-width:var(--pfc-sw,1.5px);stroke-linejoin:round;filter:var(--pfc-filter,none)}   /* the diamond wears the sampled theme card (pfcSkin) */
.pfc-dtext{box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--pfc-font,inherit);color:var(--pfc-color,var(--ra-text-bright));font-weight:var(--pfc-weight,400);text-transform:var(--pfc-case,none);letter-spacing:var(--pfc-ls,normal);font-size:calc(11px * var(--ra-fs-scale,1));line-height:1.2;pointer-events:none}
.pfc-dextra{fill:none}
.pfc-actor-badge{box-sizing:border-box;width:100%;height:100%;margin:0!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;font-size:calc(12px * var(--ra-fs-scale,1));line-height:1}
.pfc-lg-svg,.pfc-lg-step{vertical-align:middle;margin-right:calc(5px * var(--ra-density,1))}.pfc-lg-svg .pfc-dpoly,.pfc-lg-step .pfc-dpoly{filter:none}
.pfc-dstar{fill:var(--ra-accent);font-size:calc(11px * var(--ra-fs-scale,1));pointer-events:none}
.pfc-essential .pfc-dpoly{stroke:var(--ra-accent);stroke-width:calc(var(--pfc-sw,1.5px) + 1px)}
.pfc-node:hover .pfc-dpoly,.pfc-node:focus-visible .pfc-dpoly{stroke:var(--ra-accent-strong);stroke-width:calc(var(--pfc-sw,1.5px) + 1.5px)}
.pfc-star{position:absolute;top:calc(2px * var(--ra-density,1));right:calc(5px * var(--ra-density,1));font-size:calc(11px * var(--ra-fs-scale,1));color:var(--ra-accent)}
.pfc-essential .pfc-card{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-accent);outline-offset:calc(1px * var(--ra-density,1))}
.pfc-node:hover .pfc-card,.pfc-node:focus-visible .pfc-card{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-accent-strong);outline-offset:calc(1px * var(--ra-density,1))}
.pfc-pill,.pfc-lane-head,.pfc-edge-label{box-sizing:border-box;width:100%;height:100%;margin:0!important;display:flex!important;align-items:center;justify-content:center;white-space:nowrap;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:calc(10px * var(--ra-fs-scale,1));line-height:1}
.pfc-edge-label{font-size:calc(9.5px * var(--ra-fs-scale,1));padding:0!important;text-transform:none;letter-spacing:0}
.pfc-edge path{fill:none;stroke:var(--ra-text-mid);stroke-width:calc(var(--ra-border-w,1px) * .5 + 1.1px);stroke-linejoin:round}
.pfc-edge-fail path{stroke:var(--ra-danger);stroke-dasharray:6 4}
.pfc-edge-if0 path{stroke:var(--ra-purple)}.pfc-edge-if1 path{stroke:var(--ra-info)}.pfc-edge-if2 path{stroke:var(--ra-warn)}.pfc-edge-if3 path{stroke:var(--ra-ok)}
.pfc-head{stroke:none;fill:var(--ra-text-mid)}
.pfc-head-fail{fill:var(--ra-danger)}.pfc-head-if0{fill:var(--ra-purple)}.pfc-head-if1{fill:var(--ra-info)}.pfc-head-if2{fill:var(--ra-warn)}.pfc-head-if3{fill:var(--ra-ok)}
.pfc-lane-bg{fill:var(--ra-surface-2);opacity:.5}.pfc-lane-alt .pfc-lane-bg{fill:var(--ra-surface-3);opacity:.4}
.pfc-life{stroke:var(--ra-border-strong);stroke-width:1;stroke-dasharray:3 5;opacity:.7}
.pfc-legend{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1)) calc(14px * var(--ra-density,1));justify-content:center;font-size:var(--ra-fs-xs);color:var(--ra-text-dim);margin-top:calc(6px * var(--ra-density,1))}
.pfc-legend i{display:inline-block;width:14px;height:10px;margin-right:calc(5px * var(--ra-density,1));vertical-align:middle;border:1.5px solid var(--ra-border-strong);border-radius:var(--ra-radius-sm)}
.pfc-legend .pfc-lg-diamond{transform:rotate(45deg) scale(.8);border-radius:1px}
.pfc-legend .pfc-lg-doc{border-color:var(--ra-accent);background:var(--ra-accent-bg)}
.pfc-legend .pfc-lg-loop{border:0;border-top:2px dashed var(--ra-danger);border-radius:0;height:0}
.pfc-lg-star{color:var(--ra-accent);margin-right:calc(4px * var(--ra-density,1))}
.proc-diagrams{flex:1 1 auto;min-width:0;flex-wrap:wrap}

/* Procedures diagrams (procedures-diagrams.js): timeline, breakdown, matrix. Same tokens as the flowchart. */
.pdg{min-width:0}
.pdg-note{font-size:var(--ra-fs-xs);color:var(--ra-text-dim);margin-bottom:calc(6px * var(--ra-density,1))}
.pdg-svg{display:block;margin:0 auto;width:100%;height:auto;font-family:var(--ra-font-body,inherit)}
.pdg-row{cursor:pointer;outline:0}
.pdg-row-bg{fill:transparent}.pdg-row-alt{fill:var(--ra-surface-2);opacity:.5}
.pdg-row:hover .pdg-row-bg,.pdg-row:focus-visible .pdg-row-bg{fill:var(--ra-accent-bg);opacity:1}
.pdg-label{fill:var(--ra-text);font-size:calc(11px * var(--ra-fs-scale,1));dominant-baseline:middle}
.pdg-n{fill:var(--ra-text-faint);font-weight:700}
.pdg-tick{fill:var(--ra-text-dim);font-size:calc(10px * var(--ra-fs-scale,1))}
.pdg-grid{stroke:var(--ra-border);stroke-width:1;stroke-dasharray:2 4}
.pdg-bar-me{fill:var(--ra-ok);background:var(--ra-ok)}.pdg-bar-ai{fill:var(--ra-info);background:var(--ra-info)}
.pdg-bar-person{fill:var(--ra-warn);background:var(--ra-warn)}.pdg-bar-system{fill:var(--ra-purple);background:var(--ra-purple)}
.pdg-bar-fo{box-sizing:border-box;width:100%;height:100%;margin:0!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;white-space:nowrap;font-size:calc(10px * var(--ra-fs-scale,1));font-weight:700}
.pdg-guess{opacity:.55;border-style:dashed!important}.pdg-alt{border-style:dashed!important}.pdg-ess{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-accent);outline-offset:calc(1px * var(--ra-density,1))}
.pdg-bar-out{fill:var(--ra-text-mid);font-size:calc(10px * var(--ra-fs-scale,1));dominant-baseline:middle;pointer-events:none}
.pfc-legend i.pdg-lg{width:14px;height:10px}
.pdg-kpis{display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1))}
.pdg-kpi,.pdg-card{box-sizing:border-box}
.pdg-kpi{flex:1 1 calc(110px * var(--ra-density,1));padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1));display:flex;flex-direction:column;gap:calc(2px * var(--ra-density,1))}
.pdg-kpi b{font-size:var(--ra-fs-xl);color:var(--ra-text-bright)}.pdg-kpi span{font-size:var(--ra-fs-xs);color:var(--ra-text-dim)}
.pdg-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(250px * var(--ra-density,1)),1fr));gap:calc(10px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1))}
.pdg-card{padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1));min-width:0}
.pdg-card .proc-h3{margin-top:0}
.pdg-donut-row{display:flex;align-items:center;gap:calc(12px * var(--ra-density,1));flex-wrap:wrap}
.pdg-donut{width:calc(112px * var(--ra-density,1));height:calc(112px * var(--ra-density,1));flex:0 0 auto}
.pdg-arc{fill:none;stroke-width:16}.pdg-arc-track{fill:none;stroke:var(--ra-surface-2);stroke-width:16}
.pdg-arc-me{stroke:var(--ra-ok);background:var(--ra-ok)}.pdg-arc-ai{stroke:var(--ra-info);background:var(--ra-info)}
.pdg-arc-person{stroke:var(--ra-warn);background:var(--ra-warn)}.pdg-arc-system{stroke:var(--ra-purple);background:var(--ra-purple)}
.pdg-c0{stroke:var(--ra-accent);background:var(--ra-accent)}.pdg-c1{stroke:var(--ra-purple);background:var(--ra-purple)}.pdg-c2{stroke:var(--ra-info);background:var(--ra-info)}
.pdg-c3{stroke:var(--ra-warn);background:var(--ra-warn)}.pdg-c4{stroke:var(--ra-ok);background:var(--ra-ok)}.pdg-c5{stroke:var(--ra-danger);background:var(--ra-danger)}
.pdg-donut-n{fill:var(--ra-text-bright);font-weight:700;font-size:calc(15px * var(--ra-fs-scale,1));dominant-baseline:middle}
.pdg-legend{list-style:none;margin:0;padding:0;font-size:var(--ra-fs-sm);display:flex;flex-direction:column;gap:calc(3px * var(--ra-density,1))}
.pdg-legend i{display:inline-block;width:10px;height:10px;margin-right:calc(6px * var(--ra-density,1));border:1px solid var(--ra-border-strong);border-radius:var(--ra-radius-sm)}
.pdg-legend b{margin-left:calc(4px * var(--ra-density,1));color:var(--ra-text-bright)}
.pdg-hbar{display:grid;grid-template-columns:minmax(calc(100px * var(--ra-density,1)),32%) 1fr auto;align-items:center;gap:calc(8px * var(--ra-density,1));padding:calc(3px * var(--ra-density,1)) 0;cursor:pointer;font-size:var(--ra-fs-sm)}
.pdg-hbar:hover{background:var(--ra-accent-bg)}
.pdg-hbar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdg-hbar-track{display:block;height:calc(10px * var(--ra-density,1));background:var(--ra-surface-2);border-radius:var(--ra-radius-sm)}
.pdg-hbar-track i{display:block;height:100%;border-radius:var(--ra-radius-sm)}
.pdg-scroll{overflow-x:auto}
.pdg-table{border-collapse:collapse;width:100%;font-size:var(--ra-fs-md)}
.pdg-table th{position:sticky;top:0;text-align:left;background:var(--ra-surface-2);color:var(--ra-text-dim);font-size:var(--ra-fs-xs);text-transform:uppercase;letter-spacing:.05em;padding:calc(5px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-bottom:var(--ra-border-w,1px) solid var(--ra-border-strong)}
.pdg-table td{padding:calc(5px * var(--ra-density,1)) calc(8px * var(--ra-density,1));border-bottom:1px solid var(--ra-border);vertical-align:middle}
.pdg-mrow{cursor:pointer}.pdg-mrow:hover td{background:var(--ra-accent-bg)}.pdg-mrow-skip{opacity:.5}
.pdg-m-n{color:var(--ra-text-faint);width:calc(28px * var(--ra-density,1))}.pdg-m-cell{text-align:center!important;width:calc(54px * var(--ra-density,1))}
.pdg-m-text{min-width:calc(160px * var(--ra-density,1));overflow-wrap:anywhere}.pdg-m-more{color:var(--ra-text-dim);font-size:var(--ra-fs-xs)}
.pdg-m-min{white-space:nowrap;font-size:var(--ra-fs-xs)}
.pdg-m-bar{display:inline-block;width:calc(44px * var(--ra-density,1));height:calc(6px * var(--ra-density,1));margin-right:calc(6px * var(--ra-density,1));background:var(--ra-surface-2);vertical-align:middle;border-radius:var(--ra-radius-sm)}
.pdg-m-bar i{display:block;height:100%;background:var(--ra-accent);border-radius:var(--ra-radius-sm)}
.pdg-dot{display:inline-block;width:calc(11px * var(--ra-density,1));height:calc(11px * var(--ra-density,1));border-radius:50%;border:1px solid var(--ra-border-strong)}
.pdg-tm{display:flex;gap:calc(8px * var(--ra-density,1));height:calc(380px * var(--ra-density,1));min-width:0}
.pdg-tm-group{display:flex;flex-direction:column;gap:calc(4px * var(--ra-density,1));min-width:calc(90px * var(--ra-density,1))}
.pdg-tm-head{align-self:flex-start;margin:0!important}
.pdg-tm-tiles{flex:1;display:flex;flex-direction:column;gap:calc(4px * var(--ra-density,1));min-height:0;overflow:auto}
.pdg-tm-tile{flex-basis:0;min-height:calc(26px * var(--ra-density,1));margin:0!important;padding:calc(4px * var(--ra-density,1)) calc(8px * var(--ra-density,1))!important;display:flex!important;justify-content:space-between;align-items:center;gap:calc(6px * var(--ra-density,1));cursor:pointer;overflow:hidden;font-size:var(--ra-fs-md)}
.pdg-tm-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pdg-tm-tile b{flex:0 0 auto;font-size:var(--ra-fs-xs);color:var(--ra-text-dim)}
.pdg-pth{margin:0 0 calc(8px * var(--ra-density,1))!important;padding:calc(8px * var(--ra-density,1)) calc(10px * var(--ra-density,1))!important}
.pdg-pth header{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8px * var(--ra-density,1));margin-bottom:calc(6px * var(--ra-density,1))}
.pdg-pth-line{display:flex;flex-wrap:wrap;align-items:center;gap:calc(4px * var(--ra-density,1))}
.pdg-pth-chip{cursor:pointer;max-width:100%;white-space:nowrap}
.pdg-pth-ess{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-accent);outline-offset:calc(1px * var(--ra-density,1))}
.pdg-pth-arrow{color:var(--ra-text-dim);font-size:var(--ra-fs-sm)}
.pdg-rl-row{display:grid;grid-template-columns:minmax(120px,28%) 1fr auto minmax(60px,14%) auto;align-items:center;gap:calc(8px * var(--ra-density,1));padding:calc(4px * var(--ra-density,1)) 0;cursor:pointer;font-size:var(--ra-fs-sm);border-bottom:1px solid var(--ra-border)}
.pdg-rl-row:hover{background:var(--ra-accent-bg)}
.pdg-rl-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdg-rl-times{display:flex;flex-direction:column;gap:calc(2px * var(--ra-density,1))}
.pdg-rl-bar{display:block;height:calc(6px * var(--ra-density,1));border-radius:var(--ra-radius-sm)}
.pdg-rl-est{background:var(--ra-text-faint)}.pdg-rl-act{background:var(--ra-accent)}
.pdg-rl-nums{white-space:nowrap;color:var(--ra-text-dim);font-size:var(--ra-fs-xs)}
.pdg-rl-outcomes{display:flex;height:calc(8px * var(--ra-density,1));background:var(--ra-surface-2);border-radius:var(--ra-radius-sm);overflow:hidden}
.pdg-rl-outcomes i{display:block;height:100%}.pdg-rl-done{background:var(--ra-ok)}.pdg-rl-skip{background:var(--ra-warn)}.pdg-rl-fail{background:var(--ra-danger)}
.pdg-rl-seen{font-size:var(--ra-fs-xs);color:var(--ra-text-dim)}

.pdg-handoffs [hidden]{display:none!important}
.ho-has{cursor:pointer}.ho-matrix-sec:not(.ho-hide-names) .ho-has{cursor:pointer}
.ho-picked{outline:2px solid var(--ra-accent);outline-offset:1px}
.ho-pickbar{margin:calc(6px * var(--ra-density,1)) 0 0;font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));opacity:.85}
.ho-load{display:grid;gap:calc(6px * var(--ra-density,1))}
.ho-load-row{display:grid;grid-template-columns:minmax(calc(110px * var(--ra-density,1)),.8fr) repeat(4,minmax(0,1fr));gap:calc(8px * var(--ra-density,1));align-items:center}
.ho-bar{position:relative;height:calc(20px * var(--ra-density,1));border-radius:var(--ra-radius-sm,4px);background:color-mix(in srgb,var(--ra-border) 25%,transparent);overflow:hidden}
.ho-bar i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--ra-accent) 45%,transparent)}
.ho-bar-lb{position:relative;z-index:1;padding:0 calc(6px * var(--ra-density,1));font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));line-height:calc(20px * var(--ra-density,1));white-space:nowrap}
.ho-health{list-style:none;margin:0;padding:0;display:grid;gap:calc(6px * var(--ra-density,1))}
.ho-health li{padding-left:calc(8px * var(--ra-density,1));border-left:3px solid var(--ra-warn,var(--ra-accent))}
.ho-health div{font-size:var(--ra-fs-xs,calc(11px * var(--ra-fs-scale,1)));display:flex;flex-wrap:wrap;gap:calc(2px * var(--ra-density,1)) calc(6px * var(--ra-density,1))}
@media (max-width:700px){.ho-load-row{grid-template-columns:repeat(2,minmax(0,1fr))}.ho-load-who{grid-column:1/-1}}

/* Procedures extra views (procedures-views-*.js, procedures-trace.js): planning, people, risk, quality, comparison, communication, exploration. Kit components (ra-card / ra-badge /
   ra-btn / ra-input / ra-table / ra-tabs) wherever the kit has one; the pieces it has none of (gantt bars, heat cells, ring, playhead, minimap) are built here from --ra-* tokens only. */
.pvx-controls{display:flex;flex-wrap:wrap;gap:calc(8px * var(--ra-density,1));align-items:flex-end;margin-bottom:calc(8px * var(--ra-density,1))}
.pvx-controls .ra-input{width:auto;min-width:calc(110px * var(--ra-density,1))}
.pvx-controls .proc-field{flex:0 1 auto}
.pvx-picker{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ra-density,1))}
.pvx-num{width:calc(80px * var(--ra-density,1))}
.pvx-small{width:auto;justify-self:start;padding:calc(1px * var(--ra-density,1)) calc(8px * var(--ra-density,1));font-size:var(--ra-fs-xs)}
.pvx-verdict{margin:calc(4px * var(--ra-density,1)) 0 calc(10px * var(--ra-density,1))}
.pvx-line{margin:calc(4px * var(--ra-density,1)) 0;font-size:var(--ra-fs-sm)}
.pvx-gantt{display:grid;gap:calc(2px * var(--ra-density,1))}
.pvx-grow{display:grid;grid-template-columns:minmax(0,calc(260px * var(--ra-density,1))) minmax(0,1fr) calc(104px * var(--ra-density,1)) calc(96px * var(--ra-density,1));gap:calc(8px * var(--ra-density,1));align-items:center;padding:calc(2px * var(--ra-density,1)) calc(4px * var(--ra-density,1));border-radius:var(--ra-radius-sm);cursor:pointer;font-size:var(--ra-fs-xs)}
.pvx-grow:hover,.pvx-grow:focus-visible{background:var(--ra-accent-bg)}
.pvx-brow{grid-template-columns:minmax(0,calc(220px * var(--ra-density,1))) minmax(0,1fr) auto auto auto}
.pvx-glabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ra-text)}
.pvx-gdate{color:var(--ra-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvx-gslack{color:var(--ra-text-mid);white-space:nowrap;text-align:right}
.pvx-phase-row,.pvx-phase-tr td{font-weight:700;font-size:var(--ra-fs-xs);color:var(--ra-text-bright);background:var(--ra-surface-2);padding:calc(3px * var(--ra-density,1)) calc(6px * var(--ra-density,1));border-radius:var(--ra-radius-sm);margin-top:calc(6px * var(--ra-density,1))}
.pvx-track{position:relative;height:calc(14px * var(--ra-density,1));background:var(--ra-surface-2);border-radius:var(--ra-radius-pill);overflow:hidden}
.pvx-bar{position:absolute;top:calc(2px * var(--ra-density,1));bottom:calc(2px * var(--ra-density,1));border-radius:var(--ra-radius-pill);background:var(--ra-ok)}
.pvx-bar.pvx-early{top:auto;bottom:0;height:calc(3px * var(--ra-density,1));background:var(--ra-text-faint);border-radius:0}
.pvx-crit{background:var(--ra-danger)}.pvx-near{background:var(--ra-warn)}.pvx-ok{background:var(--ra-ok)}
.pvx-ghost{background:var(--ra-border-strong);opacity:.55}
.pvx-bar.pvx-ghost{top:calc(5px * var(--ra-density,1));bottom:calc(5px * var(--ra-density,1))}
.pvx-st-ok{background:var(--ra-ok)}.pvx-st-info{background:var(--ra-info)}.pvx-st-warn{background:var(--ra-warn)}.pvx-st-danger{background:var(--ra-danger)}.pvx-st-none{background:var(--ra-text-faint)}
.pvx-open{background-image:repeating-linear-gradient(135deg,transparent 0 calc(4px * var(--ra-density,1)),var(--ra-surface-1) calc(4px * var(--ra-density,1)) calc(7px * var(--ra-density,1)))}
.pvx-sw{display:inline-block;width:calc(14px * var(--ra-density,1));height:calc(10px * var(--ra-density,1));margin-right:calc(5px * var(--ra-density,1));vertical-align:middle;border-radius:var(--ra-radius-sm);border:var(--ra-border-w,1px) solid var(--ra-border-strong)}
.pvx-sw.pvx-strip-add{background:var(--ra-ok)}.pvx-sw.pvx-strip-chg{background:var(--ra-warn)}.pvx-sw.pvx-strip-same{background:var(--ra-surface-3)}
.pvx-sw.pvx-fine{background:var(--ra-ok-bg)}.pvx-sw.pvx-warn{background:var(--ra-warn-bg)}.pvx-sw.pvx-over{background:var(--ra-danger-bg)}
.pvx-sw.pvx-lvb1{background:var(--ra-info)}.pvx-sw.pvx-lvb2{background:var(--ra-warn)}.pvx-sw.pvx-lvb3{background:var(--ra-danger)}
.pvx-captable{border-collapse:separate;border-spacing:calc(3px * var(--ra-density,1));width:100%;font-size:var(--ra-fs-xs)}
.pvx-captable th{font-weight:600;color:var(--ra-text-dim);text-align:center;padding:calc(3px * var(--ra-density,1))}
.pvx-cell{text-align:center;padding:calc(6px * var(--ra-density,1)) calc(4px * var(--ra-density,1));border-radius:var(--ra-radius-sm);background:var(--ra-surface-2)}
.pvx-cell.pvx-c0{background:transparent}.pvx-fine{background:var(--ra-ok-bg)}.pvx-warn.pvx-cell{background:var(--ra-warn-bg)}.pvx-over.pvx-cell{background:var(--ra-danger-bg);color:var(--ra-danger)}
.pvx-peak{white-space:nowrap;color:var(--ra-text-dim)}
.pvx-list{list-style:none;margin:0;padding:0;display:grid;gap:calc(3px * var(--ra-density,1))}
ol.pvx-list{counter-reset:pvx}
.pvx-li{display:flex;flex-wrap:wrap;gap:calc(2px * var(--ra-density,1)) calc(10px * var(--ra-density,1));align-items:baseline;padding:calc(3px * var(--ra-density,1)) calc(6px * var(--ra-density,1));border-radius:var(--ra-radius-sm);border-left:calc(3px * var(--ra-density,1)) solid transparent;font-size:var(--ra-fs-sm)}
.pvx-li[role="button"],.pvx-li[onclick]{cursor:pointer}.pvx-li:hover{background:var(--ra-accent-bg)}
.pvx-li-main{color:var(--ra-text)}
.pvx-lv1{border-left-color:var(--ra-info)}.pvx-lv2{border-left-color:var(--ra-warn)}.pvx-lv3{border-left-color:var(--ra-danger)}
.pvx-heat .pfc-card,.pvx-heat .pfc-dpoly{outline-offset:calc(1px * var(--ra-density,1))}
.pvx-heat-1 .pfc-card{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-info)}.pvx-heat-2 .pfc-card{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-warn)}.pvx-heat-3 .pfc-card{outline:calc(var(--ra-border-w,1px) + 2px) solid var(--ra-danger)}
.pvx-heat-1 .pfc-dpoly{stroke:var(--ra-info)}.pvx-heat-2 .pfc-dpoly{stroke:var(--ra-warn)}.pvx-heat-3 .pfc-dpoly{stroke:var(--ra-danger)}
.pvx-mini-bar{display:inline-block;width:calc(80px * var(--ra-density,1));height:calc(6px * var(--ra-density,1));background:var(--ra-surface-2);border-radius:var(--ra-radius-pill);vertical-align:middle;overflow:hidden;margin-left:calc(6px * var(--ra-density,1))}
.pvx-mini-bar i{display:block;height:100%;background:var(--ra-accent)}
.pvx-loop header{margin-bottom:calc(6px * var(--ra-density,1))}
.pvx-loop-body{display:flex;gap:calc(10px * var(--ra-density,1));align-items:flex-start;flex-wrap:wrap;margin-bottom:calc(6px * var(--ra-density,1))}
.pvx-loop-body .pvx-list{flex:1 1 calc(180px * var(--ra-density,1))}
.pvx-ring{width:calc(96px * var(--ra-density,1));height:calc(96px * var(--ra-density,1));flex:0 0 auto}
.pvx-ring-track{fill:none;stroke:var(--ra-border-strong);stroke-dasharray:3 4}
.pvx-ring-dot{fill:var(--ra-accent)}.pvx-ring-n{fill:var(--ra-bg);font-size:calc(8px * var(--ra-fs-scale,1));font-weight:700;dominant-baseline:middle}
.pvx-nudge{width:100%;box-sizing:border-box}
.pvx-bandrow{cursor:default}.pvx-bands{background:transparent;height:calc(18px * var(--ra-density,1));overflow:visible}
.pvx-band{position:absolute;top:0;bottom:0;box-sizing:border-box;border:var(--ra-border-w,1px) solid var(--ra-border);border-radius:var(--ra-radius-sm);background:var(--ra-surface-2);font-style:normal;font-size:var(--ra-fs-xs);color:var(--ra-text-dim);overflow:hidden;white-space:nowrap;padding:0 calc(4px * var(--ra-density,1))}
.pvx-tick{position:absolute;top:calc(1px * var(--ra-density,1));bottom:calc(1px * var(--ra-density,1));width:calc(3px * var(--ra-density,1));background:var(--ra-info);border-radius:var(--ra-radius-sm)}
.pvx-birth{position:absolute;top:calc(2px * var(--ra-density,1));width:calc(10px * var(--ra-density,1));height:calc(10px * var(--ra-density,1));margin-left:calc(-5px * var(--ra-density,1));border-radius:var(--ra-radius-pill);background:var(--ra-bg);border:calc(3px * var(--ra-density,1)) solid var(--ra-accent);box-sizing:border-box}
.pvx-stripbar{display:flex;gap:calc(2px * var(--ra-density,1));margin:calc(4px * var(--ra-density,1)) 0}
.pvx-strip{flex:1 1 0;height:calc(12px * var(--ra-density,1));border-radius:var(--ra-radius-sm)}
.pvx-strip-add{background:var(--ra-ok)}.pvx-strip-chg{background:var(--ra-warn)}.pvx-strip-same{background:var(--ra-surface-3)}
.pvx-struck{text-decoration:line-through;color:var(--ra-text-dim)}
.pvx-row-add td{background:var(--ra-ok-bg)}.pvx-row-del td{background:var(--ra-danger-bg)}.pvx-row-chg td{background:var(--ra-warn-bg)}
.pvx-score{max-width:calc(520px * var(--ra-density,1));margin-bottom:calc(10px * var(--ra-density,1))}
.pvx-ptable th,.pvx-ptable td{vertical-align:top}.pvx-prow{cursor:pointer}.pvx-prow:hover td,.pvx-prow:hover th{background:var(--ra-accent-bg)}
.pvx-pcell{min-width:calc(110px * var(--ra-density,1));text-align:center}.pvx-pdone{color:var(--ra-ok)}.pvx-pcur{background:var(--ra-surface-2)}
.pvx-poster{padding:calc(14px * var(--ra-density,1));display:grid;gap:calc(10px * var(--ra-density,1));max-width:calc(900px * var(--ra-density,1));margin:0 auto}
.pvx-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(170px * var(--ra-density,1)),1fr));gap:calc(8px * var(--ra-density,1))}
.pvx-phasecard{display:grid;gap:calc(3px * var(--ra-density,1))}
.pvx-loadrow{display:flex;align-items:center;gap:calc(8px * var(--ra-density,1));margin-bottom:calc(4px * var(--ra-density,1))}
.pvx-page{margin-bottom:calc(14px * var(--ra-density,1))}
.pvx-cover{padding:calc(40px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
.pvx-brief-head{display:flex;gap:calc(10px * var(--ra-density,1));align-items:baseline;flex-wrap:wrap}
.pvx-wlanes{position:relative;display:grid;gap:calc(4px * var(--ra-density,1));margin-top:calc(6px * var(--ra-density,1))}
.pvx-wover{position:absolute;top:0;bottom:0;left:calc(110px * var(--ra-density,1));right:0;pointer-events:none;z-index:2}
.pvx-wlane{position:relative;display:grid;grid-template-columns:calc(110px * var(--ra-density,1)) minmax(0,1fr);min-height:calc(var(--rows,1) * 26px * var(--ra-density,1) + 4px * var(--ra-density,1));background:var(--ra-surface-2);border-radius:var(--ra-radius-sm)}
.pvx-wlane.pvx-w-active{background:var(--ra-accent-bg)}
.pvx-wlabel{padding:calc(4px * var(--ra-density,1)) calc(4px * var(--ra-density,1)) 0;font-size:var(--ra-fs-xs);color:var(--ra-text-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvx-wtrack{position:relative}
.pvx-wbar{position:absolute;top:calc(2px * var(--ra-density,1) + var(--r,0) * 26px * var(--ra-density,1));height:calc(22px * var(--ra-density,1));box-sizing:border-box;padding:0 calc(5px * var(--ra-density,1));display:flex;align-items:center;overflow:hidden;white-space:nowrap;font-size:var(--ra-fs-xs);border-radius:var(--ra-radius-sm);border:var(--ra-border-w,1px) solid var(--ra-border-strong);background:var(--ra-surface-1);color:var(--ra-text-dim);cursor:pointer;transition:background var(--ra-motion,.15s) var(--ra-ease,ease)}
.pvx-wbar.pvx-w-done{background:var(--ra-ok-bg);color:var(--ra-text-mid);border-color:var(--ra-ok-border,var(--ra-ok))}
.pvx-wbar.pvx-w-busy{background:var(--ra-accent);color:var(--ra-bg);border-color:var(--ra-accent-strong);font-weight:700}
.pvx-playhead{position:absolute;top:0;bottom:0;width:calc(2px * var(--ra-density,1));background:var(--ra-danger);pointer-events:none;z-index:2}
.pvx-scrub{width:100%;accent-color:var(--ra-accent)}
.pvx-clock{display:flex;gap:calc(8px * var(--ra-density,1));align-items:baseline;margin:calc(4px * var(--ra-density,1)) 0;font-size:var(--ra-fs-sm)}.pvx-clock b{font-size:var(--ra-fs-lg,var(--ra-fs-md));color:var(--ra-text-bright)}
.pvx-tree{list-style:none;margin:calc(2px * var(--ra-density,1)) 0 0;padding-left:calc(14px * var(--ra-density,1));border-left:var(--ra-border-w,1px) solid var(--ra-border);display:grid;gap:calc(3px * var(--ra-density,1))}
.pvx-calltree>.pdg-grid2>section>.pvx-tree{border-left:0;padding-left:0}
.pvx-search{min-width:calc(180px * var(--ra-density,1));max-width:calc(280px * var(--ra-density,1))}
.pfc-node.pvx-faded,.pfc-edge.pvx-faded{opacity:.15}
.pfc-node.pvx-hit .pfc-card,.pfc-node.pvx-hit .pfc-dpoly,.pfc-node.pvx-hit .pfc-sym{outline:calc(var(--ra-border-w,1px) + 2px) solid var(--ra-accent-strong);stroke:var(--ra-accent-strong)}
.pfc-node.pvx-sel .pfc-card,.pfc-node.pvx-sel .pfc-dpoly{outline:calc(var(--ra-border-w,1px) + 2px) solid var(--ra-text-bright);stroke:var(--ra-text-bright)}
.pfc-node.pvx-up .pfc-card,.pfc-node.pvx-up .pfc-dpoly{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-warn);stroke:var(--ra-warn)}
.pfc-node.pvx-down .pfc-card,.pfc-node.pvx-down .pfc-dpoly{outline:calc(var(--ra-border-w,1px) + 1px) solid var(--ra-info);stroke:var(--ra-info)}
.pvx-mini{position:sticky;top:calc(120px * var(--ra-density,1));float:right;z-index:5;margin:0 0 calc(6px * var(--ra-density,1)) calc(8px * var(--ra-density,1));padding:calc(4px * var(--ra-density,1));width:max-content;cursor:crosshair;touch-action:none}
.pvx-mini-svg{display:block;pointer-events:none}.pvx-mini-svg .pfc-edge path{stroke-width:calc(2px * var(--ra-density,1))}.pvx-mini-svg .pfc-node *{pointer-events:none}
.pvx-mini-view{position:absolute;box-sizing:border-box;border:calc(2px * var(--ra-density,1)) solid var(--ra-accent-strong);background:var(--ra-accent-bg);opacity:.7;pointer-events:none;left:calc(4px * var(--ra-density,1));top:calc(4px * var(--ra-density,1))}
@media (max-width:760px){.pvx-grow{grid-template-columns:minmax(0,1fr) minmax(0,calc(120px * var(--ra-density,1)));}.pvx-grow .pvx-gdate,.pvx-grow .pvx-gslack{display:none}.pvx-brow{grid-template-columns:minmax(0,1fr)}.pvx-brow .pvx-gdate,.pvx-brow .pvx-gslack{display:block;text-align:left}.pvx-mini{display:none}.pvx-wlane{grid-template-columns:minmax(0,1fr)}.pvx-wover{left:0}}
@media print{body *{visibility:hidden}.pvx-print,.pvx-print *,.pvx-summary,.pvx-summary *,.pvx-briefing,.pvx-briefing *{visibility:visible}.pvx-print,.pvx-summary,.pvx-briefing{position:absolute;left:0;top:0;width:100%}.pvx-page{break-after:page;break-inside:avoid-page}.pvx-noprint{display:none!important}}
.proc-explain{margin:calc(2px * var(--ra-density,1)) 0 calc(6px * var(--ra-density,1));font-size:var(--ra-fs-xs);color:var(--ra-text-dim);line-height:1.4}
.proc-explain-tab{color:var(--ra-text-mid);margin-top:calc(6px * var(--ra-density,1))}
.proc-explain-view{margin-top:calc(2px * var(--ra-density,1))}
.proc-explain:empty{display:none}
.proc-subrow{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ra-density,1));flex:1 1 auto;min-width:0;margin:calc(2px * var(--ra-density,1)) 0 calc(4px * var(--ra-density,1))}
.proc-subtab{cursor:pointer;font-size:var(--ra-fs-xs);padding:calc(3px * var(--ra-density,1)) calc(10px * var(--ra-density,1))}
.proc-subtab:hover{color:var(--ra-text);border-color:var(--ra-border-strong)}
.proc-subtab.active{background:var(--ra-accent-bg);border-color:var(--ra-accent-border);color:var(--ra-accent-strong);font-weight:700}
.proc-subtab:focus-visible{outline:calc(2px * var(--ra-density,1)) solid var(--ra-accent);outline-offset:calc(1px * var(--ra-density,1))}