/* =====================================================================
   CONTROWARE KPI Cockpit — design system
   Tokens → base → shell (rail, topbar) → components → pages → RTL/print
   ===================================================================== */
/* Tokens live in tokens.css, loaded before this file. */
/* Arabic (Figma page 02): Cairo carries the headings, Noto Sans Arabic the
   body. Arabic needs more leading than Latin at the same size — the file sets
   H1 26/38 and body 14/24 against 26/32 and 14/20 — so the line heights are
   relaxed here rather than inherited. */
html[lang="ar"] body{line-height:24px}
html[lang="ar"] h1{line-height:38px;letter-spacing:0}
html[lang="ar"] h2{line-height:30px;letter-spacing:0}
html[lang="ar"] h3,html[lang="ar"] h4{line-height:24px}
html[lang="ar"] .small{line-height:20px}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/20px var(--font-body);-webkit-font-smoothing:antialiased;overflow:hidden}
/* Type ramp — the 25 styles on Figma page 02 (node 5:199). Headings 1-2 are
   Titillium; from H3 down the design switches to Plex Sans, so a card title
   and the body under it share a face. Letter-spacing is a percentage in the
   file, hence the em values. */
h1,h2,h3,h4{margin:0}
h1{font:600 var(--fs-h1)/32px var(--font-ui);letter-spacing:-.01em}
h2{font:600 var(--fs-h2)/26px var(--font-ui);letter-spacing:-.005em}
h3{font:600 var(--fs-h3)/22px var(--font-body);letter-spacing:0}
h4{font:600 var(--fs-body)/20px var(--font-body);letter-spacing:0}
p{margin:0}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed;opacity:.55}
svg{display:block}
[hidden]{display:none!important}
/* One visible keyboard-focus ring, everywhere. Only ~90% of interactive
   elements had none at all before this — text inputs were the sole
   exception, and already carry their own focus treatment (below), so they
   opt out here rather than show two rings at once. Suppressed for a
   mouse/touch click (:focus-visible already does this natively) so it never
   appears as a click artifact. */
/* Figma's accessibility floor: 2px accent ring, 2px offset, on every
   interactive element. Brand red is reserved for the primary button and the
   active nav item, so it is not the focus colour. */
:focus-visible:not(.inp):not(.sel):not(textarea){outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
.chip:focus-visible,.tabs button:focus-visible,.seg button:focus-visible{outline-offset:-2px}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}
.sp{flex:1}
.muted{color:var(--muted)}.ink2{color:var(--ink-2)}
.gt{color:var(--good-text)}.wt{color:var(--warn-text)}.ct{color:var(--crit-text)}
.small{font:400 var(--fs-label)/16px var(--font-body)}.xs{font:400 var(--fs-caption)/14px var(--font-body)}
/* Number/* — every figure in the product is Plex Mono with tabular figures, so
   columns of them line up. Medium down to Number/M, Regular below it. */
.t-num-display{font:500 var(--fs-display)/48px var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.t-num-xl{font:500 var(--fs-display-l)/36px var(--font-mono);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.t-num-l{font:500 24px/28px var(--font-mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.t-num-m{font:500 var(--fs-h3)/20px var(--font-mono);font-variant-numeric:tabular-nums}
.t-num-s{font:400 13px/18px var(--font-mono);font-variant-numeric:tabular-nums}
.t-num-xs{font:400 var(--fs-caption)/14px var(--font-mono);font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:8px}
.wrap{flex-wrap:wrap}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
/* mb12, mb8 and mt4 were in use on five elements and defined nowhere, so those
   five simply had no margin. Found by cross-checking emitted classes against
   the stylesheet, not by looking at the page. */
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.txt-end{text-align:end}
/* Heading/Section — Plex Sans SemiBold 11/16 at +8% tracking. */
.eyebrow{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--muted)}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:var(--fs-label)}
::selection{background:var(--accent-soft)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}

/* ---------- app shell (family: light rail, logo + wordmark, brand-red active nav) ---------- */
#app{display:grid;grid-template-columns:var(--rail-w) 1fr;grid-template-rows:100vh;height:100vh}
#app.rail-collapsed{--rail-w:64px}
/* Sidebar (Figma 16:653). 240 expanded, 64 collapsed, --rail fill, one
   hairline on the trailing edge. */
.rail{background:var(--rail);border-inline-end:1px solid var(--line);color:var(--ink);display:flex;flex-direction:column;overflow:hidden auto;position:relative;padding:16px;gap:16px}
/* The CONTROWARE logotype has left the rail: at 240 it set the width of
   everything below it, and at 64 there was nothing it could shrink to. The
   mark carries the brand in both widths, and the wordmark says what the
   product is. The full logo opens the sign-in screen, where it has the room.
   Brand rule: the mark alone where it is small, the logo where there is room,
   and neither on a working surface (tables, cards, charts). */
.brandmark{display:flex;align-items:center;gap:10px;padding:0 2px}
.brandmark .mark{display:block;width:28px;height:28px;object-fit:contain;flex:none}
:root[data-theme="dark"] .brandmark .mark{filter:brightness(1.3)}
/* The logo on a surface that follows the theme: one image for each. */
.brand-logo img{display:block;height:36px;width:auto}
.brand-logo .for-dark,:root[data-theme="dark"] .brand-logo .for-light{display:none}
:root[data-theme="dark"] .brand-logo .for-dark{display:block}
/* Before the first screen: the mark, faded in late enough that a fast load
   never shows it. The sign-in screen or the app appearing removes it. */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);pointer-events:none}
.boot img{width:56px;height:56px;animation:bootIn var(--dur-micro) var(--ease-out) .2s both}
#login:not([hidden])~.boot,#app:not([hidden])~.boot,body.embed .boot{display:none}
@keyframes bootIn{from{opacity:0}to{opacity:1}}
.print-brand{display:none}
/* Inside every screen: the mark beside its title, the logo closing its scroll. */
.tb-mark{display:block;width:24px;height:24px;object-fit:contain;flex:none;margin-inline-end:-6px}
:root[data-theme="dark"] .tb-mark{filter:brightness(1.3)}
.content::after{content:"";display:block;height:24px;margin-top:40px;background:url(../assets/controware-logo.png) center/contain no-repeat}
:root[data-theme="dark"] .content::after{background-image:url(../assets/controware-logo-light.png)}
body.embed .tb-mark,body.embed .content::after{display:none}
.brandname{min-width:0;display:flex;flex-direction:column}
.brandname .bn-a{font:600 var(--fs-caption)/14px var(--font-body);letter-spacing:0;color:var(--muted)}
.brandname .bn-b{font:600 var(--fs-h3)/22px var(--font-ui);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-sel{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--muted)}
.site-box{margin-top:6px;display:flex;align-items:center;gap:10px;min-height:40px;padding:5px 8px 5px 5px;border-radius:var(--r-sm);border:0;background:var(--surface-2);font:600 var(--fs-label)/16px var(--font-body);color:var(--ink);min-width:0;cursor:default}
.site-box svg{box-sizing:content-box;width:16px;height:16px;padding:6px;border-radius:var(--r-xs);background:var(--accent-soft);stroke:var(--accent);fill:none;stroke-width:1.8;flex:none}
html[dir="rtl"] .site-box{padding:5px 5px 5px 8px}
.site-box span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail nav{flex:1;display:flex;flex-direction:column;gap:2px}
.nav-sec{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--muted);margin:14px 10px 6px}
.nav-sec:first-child{margin-top:0}
html[lang="ar"] .nav-sec,html[lang="ar"] .site-sel{letter-spacing:0;font-size:var(--fs-label)}
/* Nav/Item (Figma 16:508). 36px, radius 6, a plain 18px icon. The icon used
   to sit in its own bordered 29px chip and the active item grew a glowing red
   bar in the gutter — eight chips and a glow competing with the one thing the
   rail has to say, which is where you are. Active is the solid brand fill;
   that and the primary button are the only places brand red is a fill. */
.nav-item{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;
  border-radius:var(--r-sm);color:var(--ink);font:500 var(--fs-body)/20px var(--font-body);text-align:start;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nav-item svg{width:18px;height:18px;stroke:var(--ink-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav-item:hover{background:var(--surface-3)}
.nav-item.on{background:var(--brand);color:var(--brand-ink)}
.nav-item.on svg{stroke:var(--brand-ink)}
.nav-item .nav-lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Count Badge (Figma 11:241). Critical — the brand fill — only for what needs
   a decision; everything else is neutral. */
/* Every rail count is the same pill; the colour says what it asks of you:
   red to act on (decisions, entries due), accent to review (insights). */
.nav-item .badge{min-width:20px;height:18px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent-2);
  font:600 var(--fs-caption)/14px var(--font-body);font-variant-numeric:tabular-nums}
.nav-item .badge.crit{background:var(--brand);color:var(--brand-ink)}
.nav-item.on .badge{background:var(--brand-ink);color:var(--brand)}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.rail-foot .user{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:start;border-radius:var(--r-sm);padding:4px}
.rail-foot .user:hover{background:var(--surface-3)}
.avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:500 11px var(--font-mono);flex:none}
.rail-foot .meta{min-width:0;flex:1;display:flex;flex-direction:column}
.rail-foot .meta b{font:600 13px/18px var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-foot .meta span{font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The caret is the only thing that says this row opens a menu rather than
   navigating somewhere; without it the row reads as a label. */
.rail-foot .um-caret{width:16px;height:16px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail-foot .user.open{background:var(--surface-3)}
.rail-foot .user.open .um-caret{stroke:var(--ink)}
.rail-foot .user:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rail-collapsed .rail-foot .um-caret{display:none}
/* Collapsed: 64 wide, so everything but the icon goes. A count cannot be read
   at this width, so a badge becomes a dot in the icon's top-trailing corner —
   still the same "something here needs you", just without the number. */
.rail-collapsed .rail{padding:16px 12px;align-items:center}
.rail-collapsed .rail .brandname,.rail-collapsed .rail .nav-lbl,.rail-collapsed .rail .nav-sec,.rail-collapsed .rail .site-block,.rail-collapsed .rail .rail-foot .meta{display:none}
.rail-collapsed .rail .brandmark{justify-content:center;padding:0;cursor:pointer}
.rail-collapsed .rail-toggle{position:static;margin:-8px auto 0;width:28px;height:22px;border-inline-end:1px solid var(--line);border-radius:var(--r-xs)}
.rail-collapsed .rail nav{width:100%;align-items:center}
.rail-collapsed .nav-item{width:40px;justify-content:center;padding:0}
.rail-collapsed .nav-item .badge{position:absolute;top:2px;inset-inline-end:2px;min-width:7px;width:7px;height:7px;padding:0;font-size:0;background:var(--brand)}
.rail-collapsed .nav-item .badge:not(.crit){background:var(--accent)}
.rail-collapsed .rail-foot{justify-content:center;border-top:0}
.rail-collapsed .rail-foot{justify-content:center}
.rail-toggle{position:absolute;top:26px;inset-inline-end:0;width:18px;height:22px;background:var(--surface);border:1px solid var(--line);border-inline-end:0;border-radius:6px 0 0 6px;display:grid;place-items:center;color:var(--muted);z-index:2}
html[dir="rtl"] .rail-toggle{border-radius:0 6px 6px 0}
.rail-toggle svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.rail-collapsed .rail-toggle svg{transform:rotate(180deg)}
html[dir="rtl"] .rail-toggle svg{transform:rotate(180deg)}
html[dir="rtl"] .rail-collapsed .rail-toggle svg{transform:none}

.main{display:flex;flex-direction:column;min-width:0;height:100vh}
/* Header (Figma 16:684). A flat surface with one hairline — the 2px brand
   gradient along the top edge is gone. It read as a progress bar, which the
   page directly below it also has. */
.topbar{min-height:var(--top-h);display:flex;align-items:center;gap:16px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--line);flex:none;z-index:5;position:relative}
.tb-title{min-width:0;flex:1}
.tb-title h1{font:600 var(--fs-h2)/26px var(--font-ui);letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title .sub{font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.tb-title .sub button{color:var(--ink-2)}.tb-title .sub button:hover{color:var(--ink)}.tb-title .sub .sep{color:var(--line-2)}
.tb-group{display:flex;align-items:center;gap:8px}
/* Between the phone layout and a wide desktop the bar holds the title, the period and the tools
   on one row only from about 1240 px; narrower, it wraps to a second row instead of pushing the
   bell, language and theme off the screen. */
@media (min-width:821px) and (max-width:1240px){.topbar{flex-wrap:wrap;row-gap:8px;padding-block:8px}.topbar .tb-title{flex:1 1 160px;min-width:140px}.topbar .tb-group:last-child{margin-inline-start:auto}}
.tb-group + .tb-group{gap:2px}
/* Icon Button (Figma 8:244). Ghost in toolbars and headers — which is nearly
   everywhere it is used — and .sec where it stands alone and needs an edge. */
.iconbtn{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid transparent;background:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);position:relative;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn.sec{border-color:var(--line-2);background:var(--surface)}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconbtn .mono{font-size:var(--fs-caption);font-weight:600}
.content{flex:1;overflow:auto;padding:26px 28px 64px;scroll-behavior:smooth;position:relative;background:var(--bg)}
.page{max-width:1480px;margin:0 auto;animation:fade var(--dur-page) var(--ease-out) both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-h h1{font-size:23px}
.page-h .sub{color:var(--ink-2);margin-top:4px;max-width:70ch;font-size:13px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:500;font-size:var(--fs-body);line-height:1;
  white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
/* Hover is a background change only — no lift, no shadow. A button that moves
   under the pointer was the tactile system's idea; the flat one does not. */
.btn:hover{background:var(--surface-2)}
.btn:active{background:var(--surface-3)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.primary:active{background:var(--brand-2);filter:brightness(.94)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.accent:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
/* Danger reads as a warning at rest and commits to solid red on hover. */
.btn.danger{background:var(--crit-bg);border-color:transparent;color:var(--crit-text)}
.btn.danger:hover{background:var(--crit);border-color:var(--crit);color:#fff}
.btn.good{background:var(--good-bg);border-color:transparent;color:var(--good-text)}
.btn.good:hover{background:var(--good);border-color:var(--good);color:#fff}
.btn.sm{height:28px;padding:0 10px;font-size:var(--fs-label)}
.btn.xs{height:24px;padding:0 8px;font-size:var(--fs-caption);border-radius:var(--r-xs)}
.btn.icon{width:36px;height:36px;padding:0}
.btn.icon.sm{width:28px;height:28px}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover,.btn[disabled]:hover{background:var(--surface)}
/* Loading: the label is replaced by the caller, the spinner is ours. */
.btn.is-loading{pointer-events:none}
.btn.is-loading::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;animation:btnspin .7s linear infinite}
@keyframes btnspin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::before{animation:none}}
.link{color:var(--accent);font-weight:500}.link:hover{text-decoration:underline}
/* Segmented (Figma 11:73 / 11:75). Track surface-3 with 2px padding; the
   selected item is a raised white pill. */
.seg{display:inline-flex;background:var(--surface-3);border:0;border-radius:var(--r-sm);padding:2px;gap:2px}
.seg button{height:28px;padding:0 12px;border-radius:var(--r-xs);color:var(--ink-2);font:500 var(--fs-label)/16px var(--font-body);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.seg button .n{font:400 var(--fs-caption)/14px var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.seg.sm button{height:24px;padding:0 9px}
/* A field is a plain surface with a hairline, not a recessed well — the well
   belonged to the tactile system. Focus is carried by the border plus a soft
   ring, so a focused field reads at a glance in a dense grid. */
.inp,.sel,textarea.inp{height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  font-size:var(--fs-body);outline:none;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.inp:hover,.sel:hover,textarea.inp:hover{border-color:var(--ink-2)}
textarea.inp{height:auto;padding:8px 11px;resize:vertical;min-height:70px}
.inp:focus,.sel:focus,textarea.inp:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.inp:disabled,.sel:disabled,textarea.inp:disabled{opacity:.5;cursor:not-allowed}
.inp.sm,.sel.sm{height:28px;padding:0 8px;font-size:var(--fs-label)}
/* Error: the border states it, the message says what to do. */
.field.has-error .inp,.field.has-error .sel,.field.has-error textarea.inp,.inp.is-error{border-color:var(--crit)}
.field.has-error .inp:focus,.inp.is-error:focus{box-shadow:0 0 0 2px var(--crit-bg)}
.field .err-msg{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:var(--fs-caption);color:var(--crit-text)}
.inp.num{text-align:end;font-variant-numeric:tabular-nums}
.sel{appearance:none;padding-inline-end:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A95A3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
html[dir="rtl"] .sel{background-position:left 10px center}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:var(--fs-label);font-weight:600;color:var(--ink-2)}
.field .help{font-size:var(--fs-caption);color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.toggle input{appearance:none;width:34px;height:24px;border-radius:99px;background:var(--line-2);position:relative;transition:background .15s;flex:none;margin:0}
.toggle input::after{content:"";position:absolute;top:4px;inset-inline-start:4px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.toggle input:checked{background:var(--accent)}
.toggle input:checked::after{transform:translateX(14px)}
html[dir="rtl"] .toggle input:checked::after{transform:translateX(-14px)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:var(--fs-label);font-weight:600;line-height:1.3;white-space:nowrap;background:var(--none-bg);color:var(--ink-2)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.good{background:var(--good-bg);color:var(--good-text)}
.chip.warn{background:var(--warn-bg);color:var(--warn-text)}
.chip.crit{background:var(--crit-bg);color:var(--crit-text)}
.chip.acc{background:var(--accent-soft);color:var(--accent)}
.chip.brand{background:var(--brand-soft);color:var(--brand)}
.chip.s3{background:rgba(124,58,237,.12);color:var(--s3)}
.chip.sm{padding:2px 7px;font-size:var(--fs-caption)}
.chip.btn-chip{cursor:pointer;border:1px solid transparent}
.chip.btn-chip:hover{border-color:currentColor}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips .chip{cursor:pointer;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.chips .chip:hover{border-color:var(--line-2);color:var(--ink)}
.chips .chip.on{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent)}
:root[data-theme="dark"] .chips .chip.on{color:var(--accent)}
.dot-st{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.dot-st.good{background:var(--good)}.dot-st.warn{background:var(--warn)}.dot-st.crit{background:var(--crit)}
.pill-dq{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--font-ui);padding:2px 7px;border-radius:6px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface)}
.pill-dq svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}
.pill-dq.warn{color:var(--warn-text);border-color:var(--warn-bg)}.pill-dq.crit{color:var(--crit-text);border-color:var(--crit-bg)}
.kbd{font:600 11px var(--font-mono);padding:2px 6px;border-radius:5px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--muted)}
/* Tabs (Figma 11:59). The strip scrolls when it must, but never shows a
   scrollbar: Safari with "Show scroll bars: Always" reserves a track inside
   the scroll container, which lifted the buttons off the hairline and buried
   the 2px active underline beneath the track. */
/* Plain tab rows (Overview, KPI page): the chosen tab is a soft brand pill
   with its badge in brand, under one 3 px ink (motion.js .ind; a box-shadow
   underline where motion is reduced). The small action buttons at the end
   of a row (.btn) are not tabs and keep their own look. */
.tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:4px 0 6px}
.tabs::-webkit-scrollbar{display:none}
.tabs>button:not(.btn){padding:8px 12px;color:var(--ink-2);font-weight:500;border-radius:var(--r);white-space:nowrap;display:flex;align-items:center;gap:8px;
  position:relative;transition:color var(--dur-tab) var(--ease),background var(--dur-tab) var(--ease)}
.tabs>button:not(.btn):hover{color:var(--ink);background:var(--surface-2)}
.tabs>button:not(.btn).on{color:var(--ink);font-weight:600;background:var(--brand-soft)}
/* The ink: the chosen tab's own ::after, so it is exactly the tab's width with
   nothing to measure; it sits on the row's baseline and grows in from the start. */
.tabs>button:not(.btn).on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px 3px 0 0;background:var(--brand);transform-origin:left;animation:tabInk var(--dur-tab) var(--ease-out) both}
html[dir="rtl"] .tabs>button:not(.btn).on::after{transform-origin:right}
@keyframes tabInk{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.tabs>button:not(.btn).on::after{animation:none}}
.tabs>button:not(.btn)>svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;opacity:.75}
.tabs>button:not(.btn).on>svg{opacity:1;color:var(--brand)}
.tabs button .n{font:500 var(--fs-caption)/1 var(--font-mono);background:var(--surface-3);padding:3px 7px;border-radius:var(--r-full);color:var(--ink-2);font-variant-numeric:tabular-nums}
/* The badge on the chosen tab: brand on the page's own light (light theme:
   white on #C00000, 5.9:1; dark theme: the near-black --bg on #FF5C52,
   above 6:1), so an 11px mono count stays AA in both. */
.tabs button.on .n{background:var(--brand);color:var(--surface)}
:root[data-theme="dark"] .tabs button.on .n{color:var(--bg)}
@media (prefers-reduced-motion:reduce){.tabs button{transition:none}}
/* The tabbed pages' strip (Customize.strip): icons, a soft pill on hover and
   on the open tab, and one ink bar that slides between tabs. */
.tabs-x{position:relative;gap:4px;padding:4px 0 6px;border-bottom:1px solid var(--line)}
.tabs-x button[role="tab"]{position:relative;padding:8px 12px;border-bottom:0;margin-bottom:0;border-radius:var(--r);gap:8px;
  transition:color var(--dur-tab) var(--ease),background var(--dur-tab) var(--ease),transform var(--dur-micro) var(--ease-out)}
.tabs-x button[role="tab"]>svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;opacity:.75;transition:opacity var(--dur-tab) var(--ease),transform var(--dur-tab) var(--ease-out)}
.tabs-x button[role="tab"]:hover{background:var(--surface-2);color:var(--ink);border-bottom-color:transparent}
.tabs-x button[role="tab"]:hover>svg{opacity:1}
.tabs-x button[role="tab"].on{background:var(--brand-soft);color:var(--ink);border-bottom-color:transparent}
.tabs-x button[role="tab"].on>svg{opacity:1;color:var(--brand)}
.tabs-x button[role="tab"]:active{transform:scale(.97)}
.tabs-x button .n{min-width:20px;text-align:center}
.tabs-x button.on .n{background:var(--brand);color:var(--surface)}
:root[data-theme="dark"] .tabs-x button.on .n{color:var(--bg)}
@media (prefers-reduced-motion:reduce){.tabs-x button[role="tab"],.tabs-x button[role="tab"]>svg{transition:none}.tabs-x button[role="tab"]:hover>svg{transform:none}}

/* ---------- cards & panels ---------- */
/* Card (Figma 13:179). A flat container: surface, one hairline, radius 8.
   Hovering a clickable one lifts it to Elevation 1 and firms the border —
   it no longer translates, because a card that moves under the cursor drags
   every number printed on it along with it. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--dur-card) var(--ease),box-shadow var(--dur-card) var(--ease)}
.card.pad{padding:16px}
.card.click{cursor:pointer}
.card.stat:hover,.card.click:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
/* Plain: the narrative blocks, which want the rhythm of a card and none of
   its chrome. */
.card.plain{background:none;border-color:transparent;box-shadow:none}

/* The header is a title, an optional (i), a hint and an action — no rule
   beneath it and no uppercase. The divider and the brand tick are gone
   because the design draws the card as one surface; two hairlines 14px
   apart (the card's own and the header's) read as a seam. */
.ph{display:flex;align-items:center;gap:8px;padding:14px 16px}
.ph h2{font:600 var(--fs-body)/20px var(--font-body);letter-spacing:0;text-transform:none;
  color:var(--ink);display:flex;align-items:center;gap:8px}
.sec-h h2::before{content:"";width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--brand),var(--accent));flex:none}
.ph .hint{font:400 var(--fs-label)/16px var(--font-body);color:var(--muted)}
.pb{padding:16px}
/* A header followed by a body owns the gap between them: 14 + 2 = the 16 the
   design specifies, while a .pb that stands alone keeps its full 16 top. */
.ph + .pb{padding-top:2px}
.pb .hint{font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2);margin:0 0 14px}
.pb.tight{padding:8px 10px}
.sec-h{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px;flex-wrap:wrap}
.sec-h:first-child{margin-top:0}
.sec-h h2{font-size:var(--fs-h3);display:flex;align-items:center;gap:10px}
.sec-h .hint{font-size:12.5px;color:var(--muted)}
/* A sort control that names what it is sorting by, rather than a bare select
   the reader has to open to find out. */
.sortby{display:inline-flex;align-items:center;gap:8px;font:400 var(--fs-label)/16px var(--font-body);color:var(--muted)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.g-auto-lg{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.two.sc-two{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)} /* What-if: the case beside its effect */
.two.kpi-two-glance{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)} /* KPI page: the glance beside its facts */
.two.kpi-two-detail{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}}
@media (max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}.content{padding:16px}}
.empty{padding:32px;text-align:center;color:var(--muted);font:400 var(--fs-label)/16px var(--font-body)}
.empty svg{width:32px;height:32px;stroke:var(--line-2);fill:none;stroke-width:1.5;margin:0 auto 8px}

/* State (Figma 12:370) — the component behind UI.emptyState/errorState.
   An empty state says what is missing and what to do about it; an error says
   what went wrong and offers the way back. Neither apologises and neither is
   vague, which is why the title and body are separate slots: a single grey
   line saying "No data" is the thing this replaces. */
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:40px 32px;text-align:center}
.state .ring{width:48px;height:48px;border-radius:var(--r-full);background:var(--surface-3);
  display:grid;place-items:center;margin-bottom:8px}
.state .ring svg{width:22px;height:22px;stroke:var(--ink-2);fill:none;stroke-width:1.9}
.state h3{font:600 var(--fs-h3)/22px var(--font-body);color:var(--ink);margin:0}
.state p{font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2);max-width:360px;margin:0}
.state .btn{margin-top:10px}
.state.err .ring{background:var(--crit-bg)}.state.err .ring svg{stroke:var(--crit)}
.state.warn .ring{background:var(--warn-bg)}.state.warn .ring svg{stroke:var(--warn)}

/* Skeleton (Figma 12:390). Four shapes, because a loading placeholder that is
   not the shape of what arrives makes the page jump when it does. */
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:var(--r-sm);min-height:14px}
.skeleton.line{height:12px;border-radius:var(--r-xs)}
.skeleton.num{height:46px;width:140px}
.skeleton.card{height:140px;border-radius:var(--r)}
.skeleton.row{height:36px}
.sk-stack{display:flex;flex-direction:column;gap:8px}
/* Skeleton on the band, and the ring's placeholder. */
.sk-band{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:40px;align-items:center}
.sk-dark{background:linear-gradient(90deg,rgba(255,255,255,.10) 25%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.10) 75%);background-size:200% 100%}
.sk-ring{width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08)}
/* Login: the callout is the Callout, and the fields say where the fault is. */
.login-card .err{display:none;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--crit-bg);color:var(--ink);position:relative;overflow:hidden;font:400 var(--fs-body)/20px var(--font-body);margin-bottom:14px}
.login-card .err::before{content:"";width:3px;flex:none;border-radius:2px;background:var(--crit);align-self:stretch}
.login-card .err svg{width:18px;height:18px;flex:none;stroke:var(--crit);fill:none;stroke-width:1.9;margin-top:1px}
.login-card .err>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.login-card .err b{font-weight:500}
.login-card .err .d{font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2)}
.login-card .err.show{display:flex}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}
.note{font-size:var(--fs-label);color:var(--muted)}
/* Callout (Figma 12:134). A 3px leading edge and the icon carry the kind, so
   the message reads at a glance without depending on the fill alone. The body
   is ink, not the status colour — the words are the message, the colour is
   the classification. */
.callout{display:flex;gap:12px;align-items:stretch;padding:12px 14px;border-radius:var(--r);
  background:var(--surface-2);border:0;font:400 var(--fs-body)/20px var(--font-body);color:var(--ink);position:relative;overflow:hidden}
.callout::before{content:"";width:3px;flex:none;border-radius:2px;background:var(--accent);align-self:stretch}
.callout svg{width:18px;height:18px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.9;margin-top:1px}
.callout > span,.callout > div{flex:1;min-width:0;display:block}
/* The title and the detail are blocks; anything inline (an <abbr>, a link)
   flows. A column flex box here put every inline child on its own line, so
   "test for a KPI in a month" broke around the abbreviation. */
.callout b{display:block}
.callout .d{display:block;margin-top:4px}
.callout b{font-weight:500}
.callout small,.callout .d{font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2)}
.callout.warn{background:var(--warn-bg)}.callout.warn::before{background:var(--warn)}.callout.warn svg{stroke:var(--warn)}
.callout.crit{background:var(--crit-bg)}.callout.crit::before{background:var(--crit)}.callout.crit svg{stroke:var(--crit)}
.callout.good{background:var(--good-bg)}.callout.good::before{background:var(--good)}.callout.good svg{stroke:var(--good)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);background:radial-gradient(120% 140% at 100% 0%,var(--hero-b),transparent 55%),linear-gradient(135deg,var(--hero-a),#132B45);color:var(--hero-ink);padding:26px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;box-shadow:var(--shadow-2)}
.hero::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 60h120M60 0v120' stroke='rgba(255,255,255,.035)' stroke-width='1'/%3E%3C/svg%3E");pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero .eyebrow{color:var(--hero-ink-2)}
.hero h1{font-size:30px;margin:6px 0 8px;color:#fff}
.hero .sum{color:var(--hero-ink-2);max-width:78ch;font-size:13.5px}
.hero .sum b{color:#fff;font-weight:600}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hstat{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--hero-line);min-width:150px;text-align:start;color:#fff;transition:background .12s}
button.hstat:hover{background:rgba(255,255,255,.13)}
.hstat .rn{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;font:600 15px var(--font-ui)}
.hstat .rn.good{background:var(--good);color:#fff}.hstat .rn.warn{background:var(--warn);color:#fff}.hstat .rn.crit{background:var(--crit);color:#fff}.hstat .rn.acc{background:var(--accent);color:#fff}.hstat .rn.neutral{background:rgba(255,255,255,.14)}
.hstat .rn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hstat .n{font:600 22px/1 var(--font-mono)}
.hstat .l{font-size:11.5px;color:var(--hero-ink-2);margin-top:3px;white-space:nowrap}
.hero-gauge{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:6px 10px;border-radius:16px;transition:background .12s}
.hero-gauge:hover{background:rgba(255,255,255,.06)}
.hero-gauge .d{font-size:var(--fs-label);color:var(--hero-ink-2)}
.hero-gauge .d b{color:#fff}
.hero.compact{padding:20px 24px}
.hero.compact h1{font-size:24px}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-gauge{align-items:flex-start}}

/* ---------- KPI tiles ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
/* KPI Card (Figma 13:601). One KPI in context: value and unit, the target,
   the signed gap, the change since last month, an 8-month sparkline against a
   dashed target, the status word, a trend sentence and the DQ pill. The 3px
   leading edge repeats the status — it is a stripe, not a border, so it runs
   the full height of the card rather than stopping at the padding.
   Full 264 wide; Mini 200, which drops the sparkline, the delta and the
   trend sentence and keeps the status word. */
.tile{position:relative;display:flex;align-items:stretch;padding:0;text-align:start;width:100%;overflow:hidden}
.tile .t-edge{width:3px;flex:none;align-self:stretch;background:var(--line-2)}
.tile.good .t-edge{background:var(--good)}
.tile.warn .t-edge{background:var(--warn)}
.tile.crit .t-edge{background:var(--crit)}
.tile.none .t-edge{background:var(--line-2)}
.tile .t-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding:14px;padding-inline-start:13px}
.tile .t-top{display:flex;align-items:flex-start;gap:8px}
.tile .t-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  font:600 var(--fs-body)/20px var(--font-body);color:var(--ink)}
.tile .t-name small{font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted)}
.tile .t-val{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap}
.tile .t-val .v{font:500 24px/28px var(--font-mono);letter-spacing:-.24px;font-variant-numeric:tabular-nums}
.tile .t-val .u{font:400 var(--fs-label)/16px var(--font-body);color:var(--muted)}
.tile .t-ctx{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tile .t-tgt{font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2);white-space:nowrap}
.tile .t-tgt b{font-weight:400}
.tile .t-delta{font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted);white-space:nowrap}
/* The gap pill is mono so a column of cards lines its digits up, and 4px
   rather than a pill so it does not compete with the status chip below it. */
.tile .t-gap{font:400 var(--fs-caption)/14px var(--font-mono);padding:1px 6px;border-radius:var(--r-xs);font-variant-numeric:tabular-nums}
.tile .t-gap.good{background:var(--good-bg);color:var(--good-text)}.tile .t-gap.warn{background:var(--warn-bg);color:var(--warn-text)}.tile .t-gap.crit{background:var(--crit-bg);color:var(--crit-text)}
.tile .t-gap.none{background:var(--surface-3);color:var(--muted)}
.tile .spark{display:block;height:36px}
.tile .spark svg{width:100%;height:100%}
.tile .t-foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.tile .t-trend{flex:1;min-width:0;font:400 var(--fs-caption)/14px var(--font-body);color:var(--ink-2)}
.tile .t-go{width:14px;height:14px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.9}
/* The glyph can stay small; the hit area can't — negative margin reclaims
   the extra box so neighbouring content doesn't shift. Both usages (the
   tile's own and the KPI hero's larger inline-styled one) inherit this. */
.star{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-5px;flex:none;cursor:pointer}
.tile .star{color:var(--muted);font-size:var(--fs-body);line-height:1}
.tile .star.on{color:var(--warn)}
.tile .star:hover{color:var(--warn)}
.tile.mini .t-body{gap:6px;padding:10px 12px;padding-inline-start:11px}
.tile.mini .t-val .v{font:500 var(--fs-h3)/20px var(--font-mono);letter-spacing:0}

/* area cards */

/* ---------- tables ---------- */
/* Table. Header 36px on surface-2, rows 44px — sentence case, not the
   uppercase micro-type it used to be, because a header that has to be
   deciphered is worse than one that is simply read. */
.tbl-wrap{overflow:auto;border-radius:var(--r)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font:400 var(--fs-body)/20px var(--font-body)}
/* Heights, not vertical padding. A table cell treats `height` as a minimum, so
   36 and 44 hold for a one-line cell and for the two-line KPI cell alike, and
   a cell that genuinely needs more room (an expander, an input) still grows.
   Padding alone gave 39 and 59 — the sort chevron inflated the header's line
   box, and the KPI cell's sub-line pushed the row 15px past the design. */
.tbl th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:start;
  font:500 var(--fs-label)/16px var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink-2);
  height:36px;padding:0 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{height:44px;padding:0 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl tbody tr.sel>td{background:var(--accent-soft)}
.tbl tr.click{cursor:pointer}
/* Sortable headers. The chevron is drawn from two borders rather than an icon
   so it inherits colour and direction for free, and it is keyed off aria-sort
   — the attribute a screen reader already reads — so the two can never say
   different things. */
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable::after{content:"";display:inline-block;width:5px;height:5px;margin-inline-start:6px;
  vertical-align:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.tbl th.sortable:hover::after{opacity:.45}
.tbl th[aria-sort]{color:var(--ink)}
.tbl th[aria-sort]::after{opacity:1}
.tbl th[aria-sort="ascending"]::after{transform:rotate(-135deg);vertical-align:-1px}
@media (prefers-reduced-motion:reduce){.tbl th.sortable::after{transition:none}}
/* A 3px leading edge that repeats a row's KPI status (the Decide-now table). */
.tbl td.edge{position:relative;padding-inline-start:15px}
/* A cell that wraps to several lines needs its own breathing room back; the
   row grows with it. */
.tbl td.tall{height:auto;padding:12px}
.tbl td.edge::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--line-2)}
.tbl tr.good td.edge::before{background:var(--good)}
.tbl tr.warn td.edge::before{background:var(--warn)}
.tbl tr.crit td.edge::before{background:var(--crit)}
.tbl tr.sel td.edge::before{background:var(--accent)}
.tbl .num{text-align:end;font:400 13px/18px var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.name{font:500 var(--fs-body)/20px var(--font-body)}
.tbl td.name small{display:block;font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted)}
.tbl.dense td{height:34px;padding:0 10px}.tbl.dense th{height:30px;padding:0 10px}
.tbl .in-cell{width:96px}
/* The entry grid (Figma 29:2). A group band names the area a run of rows
   belongs to, and an input with nothing in it is tinted: an empty box among
   full ones is easy to scroll past, and those empties are the entire reason
   this page exists. */
.tbl tr.grp td{background:var(--surface-2);font:600 var(--fs-caption)/14px var(--font-body);letter-spacing:0;color:var(--muted);height:28px;padding:0 12px}
html[lang="ar"] .tbl tr.grp td{letter-spacing:0}
.tbl tr.grp:hover td{background:var(--surface-2)}
.inp.is-missing{background:var(--warn-bg);border-color:var(--warn)}
.inp.is-missing:focus{background:var(--surface)}
/* A row that just changed state. The wash starts at the accent and clears,
   so the eye lands on the row the click acted on and then lets go of it —
   it confirms the write, it does not decorate the table. */
@keyframes rowChanged{from{background-color:var(--accent-soft)}to{background-color:transparent}}
.tbl tbody tr.row-changed>td{animation:rowChanged 1.1s var(--ease)}
@media (prefers-reduced-motion:reduce){.tbl tbody tr.row-changed>td{animation:none}}
.bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.bar i.good{background:var(--good)}.bar i.warn{background:var(--warn)}.bar i.crit{background:var(--crit)}

/* ---------- charts ---------- */
.chart{width:100%}
.chart svg{width:100%;height:auto;display:block;font-family:var(--font-body)}
.chart text{fill:var(--muted);font-size:var(--fs-caption)}
.chart .grid line{stroke:var(--grid)}
.chart .axis{stroke:var(--axis)}
.chart .tgt{stroke:var(--ink-2);stroke-dasharray:4 4;stroke-width:1.4}
.chart .act{stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart .fc{stroke:var(--s3);stroke-width:2.2;fill:none;stroke-dasharray:6 4;stroke-linecap:round}
.chart .band95{fill:var(--s3);opacity:.09}.chart .band80{fill:var(--s3);opacity:.16}
.chart .area-good{fill:var(--good);opacity:.14}.chart .area-bad{fill:var(--crit);opacity:.14}
.chart .pt{fill:var(--surface);stroke-width:2.2}
.chart .pt.good{stroke:var(--good)}.chart .pt.warn{stroke:var(--warn)}.chart .pt.crit{stroke:var(--crit)}.chart .pt.none{stroke:var(--muted)}
.chart .bar-good{fill:var(--good)}.chart .bar-warn{fill:var(--warn)}.chart .bar-crit{fill:var(--crit)}
.chart .end-lbl{fill:var(--surface);font-weight:600;font-size:var(--fs-caption)}
.chart .hit{fill:transparent}
.chart .cur-line{stroke:var(--brand);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-label);color:var(--ink-2)}
.chart-legend i{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-inline-end:6px;background:var(--accent)}
.chart-legend i.t{background:repeating-linear-gradient(90deg,var(--ink-2) 0 4px,transparent 4px 8px)}
.chart-legend i.f{background:repeating-linear-gradient(90deg,var(--s3) 0 6px,transparent 6px 10px)}
.chart-legend i.b{height:10px;background:var(--s3);opacity:.2}
.sparkline svg{width:100%;height:100%;overflow:visible}
.gauge-wrap{position:relative;width:150px;height:150px}
.gauge-wrap svg{width:100%;height:100%}
.gauge-wrap .gv{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.gauge-wrap .gv b{font:600 40px/1 var(--font-mono);color:var(--band-ink);letter-spacing:-.03em}
.gauge-wrap .gv span{font-size:var(--fs-caption);color:var(--band-ink-2);display:block;margin-top:2px}
.gauge-wrap.ink .gv b{color:var(--ink)}.gauge-wrap.ink .gv span{color:var(--muted)}
.heat-wrap{overflow:auto}
.heat{display:grid;gap:2px;min-width:640px}
.heat .hc{aspect-ratio:1;min-width:22px;border-radius:3px;display:grid;place-items:center;font:600 9px var(--font-mono);color:var(--ink);cursor:default}
.heat .hl{font-size:10px;color:var(--muted);display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-inline-end:6px;justify-content:flex-end}
.heat .ht{font-size:9px;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);text-align:start;overflow:hidden;height:56px}
html[dir="rtl"] .heat .ht{transform:none}
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--band);color:var(--band-ink);padding:8px 10px;border-radius:var(--r-sm);font:400 var(--fs-label)/16px var(--font-body);box-shadow:var(--shadow-2);max-width:320px;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.tip.on{opacity:1}
.tip b{font-family:var(--font-ui);display:block;margin-bottom:2px}

/* ---------- insights ---------- */
.ins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ins-grid.wide{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.ins{padding:14px 16px;display:flex;flex-direction:column;gap:8px;border-inline-start:3px solid var(--line-2)}
.ins.High{border-inline-start-color:var(--crit)}.ins.Medium{border-inline-start-color:var(--warn)}.ins.Info{border-inline-start-color:var(--accent)}
.ins-top{display:flex;align-items:center;gap:8px;font-size:var(--fs-label)}
.ins-kind{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--font-ui);letter-spacing:0}
html[lang="ar"] .ins-kind{letter-spacing:0}
.ins-kind svg{width:14px;height:14px}
.ins-pri{font:600 11px var(--font-mono);background:var(--surface-3);padding:2px 7px;border-radius:6px;color:var(--ink-2)}
.ins-title{font:600 14px/1.3 var(--font-ui);text-align:start;color:var(--ink)}
.ins-title:hover{color:var(--accent)}
.ins-body{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.ins-sug{font-size:12.5px;padding:8px 10px;border-radius:9px;background:var(--accent-soft);color:var(--ink)}
.ins-sug b{color:var(--accent);font-family:var(--font-ui);margin-inline-end:4px}
.ins-foot{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);flex-wrap:wrap;margin-top:auto}
.conf{display:inline-block;width:56px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.conf i{display:block;height:100%;background:var(--accent);border-radius:3px}
.ins-spark{width:120px;height:26px;margin-inline-start:auto}
.sug-list{display:flex;flex-direction:column}
.sug{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start;padding:12px 18px;border-bottom:1px solid var(--line);text-align:start;font-size:13px;line-height:1.45}
.sug:last-child{border-bottom:0}
.sug:hover{background:var(--surface-2)}
.sug-n{width:26px;height:26px;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font:600 12px var(--font-ui)}
.sug b{font-family:var(--font-ui)}

/* ---------- close / readiness ---------- */
/* Readiness steps (Figma 20:688, and the Overview's month-close block). A 2x2
   of separate cards rather than one fused four-across strip: the four steps
   are a sequence with two deadlines in the middle, and a 2x2 shows that shape
   at any width the card is given. The step that needs attention is tinted, so
   the block answers "where are we stuck" before it is read. */
/* Width-driven, not a modifier: the Data page gives this block the full
   content width and Figma lays it out four across; the Overview gives it half
   a card and Figma folds it to 2x2. auto-fit produces both from one rule, and
   from the same block at any width in between. */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:s}
/* Inside the Overview's two-column block the card is half the width, and
   Figma folds the strip to 2x2 there. Explicit, not auto-fit: auto-fit chose
   two columns on a 1250px page once and nobody could say why. */
.two .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps,.two .steps{grid-template-columns:minmax(0,1fr)}}
/* The fifth step, Certified, spans the row wherever the strip folds to two columns. */
.two .steps .step-cert{grid-column:1/-1}
@media (max-width:1100px){.steps .step-cert{grid-column:1/-1}}
@media (max-width:520px){.steps .step-cert{grid-column:auto}}
.step{position:relative;padding-block:12px;padding-inline:42px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font:400 var(--fs-label)/16px var(--font-body)}
.step::before{counter-increment:s;content:counter(s);position:absolute;inset-inline-start:12px;top:12px;width:20px;height:20px;
  border-radius:50%;background:var(--surface-3);color:var(--ink-2);display:grid;place-items:center;
  font:500 var(--fs-caption)/1 var(--font-mono)}
.step.done::before{content:"✓";background:var(--good);color:#fff}
.step.now::before{background:var(--warn);color:#fff}
.step.late::before{background:var(--crit);color:#fff}
.step.now{background:var(--warn-bg);border-color:transparent}
.step.late{background:var(--crit-bg);border-color:transparent}
.step b{display:block;font:500 var(--fs-label)/16px var(--font-body)}
.step .n{font:500 var(--fs-h2)/26px var(--font-mono);margin-top:4px;font-variant-numeric:tabular-nums}
.step .d{color:var(--muted);font:400 var(--fs-caption)/14px var(--font-body)}

.warnbox{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.warnbox div{font-size:var(--fs-caption);padding:4px 8px;border-radius:7px;background:var(--warn-bg);color:var(--warn-text)}
.warnbox div.High{background:var(--crit-bg);color:var(--crit-text)}
.warnbox div.Info{background:var(--accent-soft);color:var(--ink-2)}
.st-badge{font:600 11px var(--font-ui);letter-spacing:0;padding:2px 7px;border-radius:5px}
html[lang="ar"] .st-badge{letter-spacing:0;font-size:var(--fs-caption)}
.st-badge.DRAFT{background:var(--none-bg);color:var(--ink-2)}.st-badge.VALIDATED{background:var(--accent-soft);color:var(--accent)}.st-badge.APPROVED{background:var(--good-bg);color:var(--good-text)}.st-badge.REJECTED{background:var(--crit-bg);color:var(--crit-text)}.st-badge.MISSING{background:transparent;border:1px dashed var(--line-2);color:var(--muted)}
.st-badge.OPEN{background:var(--warn-bg);color:var(--warn-text)}.st-badge.DONE{background:var(--good-bg);color:var(--good-text)}.st-badge.DROPPED{background:var(--none-bg);color:var(--muted)}

/* ---------- drawer / modal / toast / palette ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,16,24,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:65;display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .15s}
/* Modal (Figma 12:284). Small 440 confirm · Medium 640 · Large 880.
   Header, scrolling body, footer with Cancel and exactly one primary. */
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  width:min(640px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-3);overflow:hidden}
.modal.lg{width:min(880px,100%)}
.modal.sm{width:min(440px,100%)}
.modal .mh{display:flex;align-items:center;gap:12px;padding:16px;padding-inline-start:24px;border-bottom:1px solid var(--line)}
.modal .mh h2{font:600 var(--fs-h3)/22px var(--font-body);letter-spacing:0}
.modal .mb{padding:24px;overflow:auto}
.modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
/* Drawer (Figma 12:300). 520 wide, Elevation 3. Its header, body and footer
   are the modal's — they used to be written inline in UI.drawer(), which meant
   the two overlays could drift apart without anything saying so, and did: the
   modal's footer lost its surface-2 fill here and kept it there. */
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(520px,100%);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-3);z-index:45;display:flex;flex-direction:column;animation:slide var(--dur-overlay) var(--ease)}
.drawer .mh{display:flex;align-items:center;gap:12px;padding:16px;padding-inline-start:24px;border-bottom:1px solid var(--line)}
.drawer .mh h2{font:600 var(--fs-h3)/22px var(--font-body);letter-spacing:0}
.drawer .mb{padding:24px;overflow:auto;flex:1}
.drawer .mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideOut{to{transform:translateX(30px);opacity:0}}
@keyframes slideOut-rtl{to{transform:translateX(-30px);opacity:0}}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
html[dir="rtl"] .drawer{animation-name:slide-rtl}
@keyframes slide-rtl{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.toasts{position:fixed;bottom:20px;inset-inline-end:20px;display:flex;flex-direction:column;gap:8px;z-index:70}
/* Toast (Figma 12:164). One surface for every outcome — the dark band — with
   the icon carrying the kind. A red rectangle for an error and a green one for
   a success made the two look like different components and put white text on
   --crit, which is the one pairing in the palette that does not clear 4.5:1. */
.toast{background:var(--band);color:var(--band-ink);padding:10px 14px 10px 12px;border-radius:var(--r);
  font:400 var(--fs-body)/20px var(--font-body);box-shadow:var(--shadow-2);display:flex;align-items:center;gap:10px;
  animation:fade var(--dur-tab) var(--ease);max-width:360px}
.toast svg{width:18px;height:18px;flex:none;stroke:var(--band-ink-2);fill:none;stroke-width:1.9}
.toast.err svg{stroke:var(--crit)}.toast.ok svg{stroke:var(--good)}
.palette{position:fixed;inset:0;background:rgba(10,16,24,.34);z-index:50;display:flex;justify-content:center;padding-top:12vh;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.palette .box{width:min(620px,92%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-3);overflow:hidden;align-self:flex-start;animation:fade .12s}
.palette input{width:100%;height:52px;border:0;padding:0 18px;font-size:var(--fs-h3);background:transparent;outline:none;border-bottom:1px solid var(--line)}
.palette .list{max-height:52vh;overflow:auto;padding:6px}
.palette .it{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;width:100%;text-align:start}
.palette .it.on,.palette .it:hover{background:var(--surface-2)}
.palette .it .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2);flex:none}
.palette .it .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.palette .it .t{flex:1;min-width:0}.palette .it .t b{font-family:var(--font-ui);display:block}.palette .it .t span{font-size:11.5px;color:var(--muted)}
.palette .grp{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--muted);padding:10px 12px 4px}
html[lang="ar"] .palette .grp{letter-spacing:0}

/* ---------- login (family card) ---------- */
/* Login (Figma 30:2). A split: the band says what the product is, the pane
   does the one job the page exists for. They used to share a 360px centred
   card, where the product statement and the password field fought for the
   same column. */
.login{position:fixed;inset:0;display:grid;grid-template-columns:600fr 840fr;background:var(--bg)}
.lg-band{background:var(--band);color:var(--band-ink);padding:64px;display:flex;flex-direction:column;overflow:hidden}
.lg-lockup{display:flex;align-items:center;gap:16px}
.lg-lockup img{display:block;height:44px;width:auto}
.lg-lockup span{padding-inline-start:16px;border-inline-start:1px solid var(--band-line);font:600 var(--fs-h3)/28px var(--font-ui);letter-spacing:-.01em;color:var(--band-ink);white-space:nowrap}
.lg-say{margin:auto 0;max-width:472px}
.lg-say h1{font:600 var(--fs-display)/48px var(--font-ui);letter-spacing:-2px;color:var(--band-ink);margin:0 0 16px}
.lg-say p{font:400 var(--fs-label)/20px var(--font-body);color:var(--band-ink-2);max-width:440px;margin:0}
.lg-foot{display:flex;flex-direction:column;gap:14px}
.lg-spine{display:flex;gap:2px;width:254px;height:6px}
.lg-spine i{height:6px;border-radius:3px}
.lg-spine i.good{flex:120;background:var(--good)}
.lg-spine i.warn{flex:40;background:var(--warn)}
.lg-spine i.crit{flex:90;background:var(--crit)}
.lg-pane{display:grid;place-items:center;align-content:center;gap:24px;padding:24px;min-width:0}
.lg-pane-logo{display:none}
.login-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:33px;text-align:start}
.lg-head{margin-bottom:20px}
.lg-head h2{font:600 var(--fs-h2)/26px var(--font-ui);letter-spacing:-.5px;margin:0}
.lg-head p{font:400 var(--fs-body)/20px var(--font-body);color:var(--ink-2);margin:4px 0 0}
.login-card .field{margin-bottom:18px}
.login-card .btn{width:100%;justify-content:center;margin-top:2px}
.login-hint{margin-top:20px;font:400 var(--fs-caption)/1.5 var(--font-body);color:var(--muted)}
.login-hint code{font-family:var(--font-mono);background:var(--surface-2);padding:1px 5px;border-radius:var(--r-xs);color:var(--ink-2)}
.login-lang{margin-top:20px}
.login-lang .seg{display:flex;width:100%}
.login-lang .seg button{flex:1}
/* Below the point where the band stops earning its 600px, it goes and the
   card takes the screen. */
@media (max-width:900px){
  .login{grid-template-columns:minmax(0,1fr)}
  .lg-band{display:none}
  .lg-pane-logo{display:block}
}
/* Single sign-on (app.js ssoButton): the company-account button first, a
   ruled "or" under it, then the password form. */
.lg-sso{margin-bottom:18px}
.lg-sso-wait{margin:10px 0 0;font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2)}
.lg-or{display:flex;align-items:center;gap:10px;margin-top:18px;font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted)}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* Inside the ERP (?embed=1): the ERP's own chrome says where you are, so the
   product band goes and the rail stays an icon strip with no way to widen it. */
body.embed .login{grid-template-columns:minmax(0,1fr)}
body.embed .lg-band,body.embed .lg-pane-logo{display:none}
body.embed .rail-toggle{display:none}
/* The pop-up's last page (sso-done.html): one card, centred. */
body.sso-done{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
body.sso-done.failed .lg-head h2{color:var(--crit)}
.sso-card .brand-logo{margin-bottom:24px}

/* ---------- settings shell (family) ---------- */
.settings-shell{display:grid;grid-template-columns:216px 1fr;gap:22px;align-items:start}
.settings-nav{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;position:sticky;top:0}
.settings-navbtn{display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--ink);font-size:13px;font-weight:500;text-align:start;transition:background .12s,color .12s}
.settings-navbtn svg{width:17px;height:17px;stroke:var(--ink-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:stroke .12s}
.settings-navbtn:hover{background:var(--surface-2)}
/* Active = brand-soft tint with brand text (Figma 30:108). The solid brand
   fill is the rail's, and a second solid red block beside it read as two
   "you are here"s. */
.settings-navbtn{border-radius:var(--r-sm);font:500 var(--fs-body)/20px var(--font-body)}
.settings-navbtn.on{background:var(--brand-soft);color:var(--brand)}
.settings-navbtn.on svg{stroke:var(--brand)}
.settings-navbtn .chip{margin-inline-start:auto}
.settings-content{min-width:0;display:grid;gap:22px}
.settings-panel{padding:22px 24px}
.settings-panel>h2{font:600 var(--fs-body)/20px var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink);display:flex;align-items:center;gap:10px;margin-bottom:6px}
/* Section labels inside a panel are eyebrows, as the design sets them. */
.settings-panel h3{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--muted);margin:22px 0 8px}
.settings-panel .field .help{display:block;font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted);margin-top:4px}
.settings-panel .hint{font-size:var(--fs-label);color:var(--ink-2);margin:0 0 16px;line-height:1.55}
.wa-code{font:600 var(--fs-h2)/1.2 var(--font-mono);letter-spacing:.14em;padding:14px 18px;border-radius:var(--r);background:var(--surface-3);color:var(--ink);text-align:center;user-select:all}
.settings-panel .tbl-wrap{margin:0 -24px -22px;border-radius:0 0 18px 18px}
@media (max-width:900px){.settings-shell{grid-template-columns:1fr}.settings-nav{flex-direction:row;flex-wrap:wrap;position:static}}

/* ---------- misc pages ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
/* Stat Tile (13:726): a sentence-case label, the number, one line under it.
   Every tile the same — the first one is not bigger and the rest are not grey. */
.stat{padding:16px}
.stat .l{font:400 var(--fs-label)/16px var(--font-body);color:var(--muted);letter-spacing:0;text-transform:none}
html[lang="ar"] .stat .l{letter-spacing:0}
.stat .v{font:500 var(--fs-display-l)/36px var(--font-mono);margin-top:4px;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.stat .d{font:400 var(--fs-label)/16px var(--font-body);color:var(--muted);margin-top:2px}
.finding{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-label)}
.finding:last-child{border-bottom:0}
.finding .rule{font:600 var(--fs-caption) var(--font-mono);padding:3px 6px;border-radius:6px;height:fit-content;background:var(--surface-3);color:var(--ink-2)}
.finding .rule.High{background:var(--crit-bg);color:var(--crit-text)}.finding .rule.Medium{background:var(--warn-bg);color:var(--warn-text)}
.finding .rec{color:var(--muted);margin-top:2px}
.finding .rec b{color:var(--ink-2);font-weight:600}
/* Dropzone (29:1086): its own dashed accent frame on the page, an icon in a
   ring, the instruction, the limit, and the chosen file as a link-coloured
   line beneath — not a card inside a card. */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px dashed var(--accent);border-radius:var(--r);padding:32px 24px;background:var(--surface);text-align:center;color:var(--muted);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.dropzone.over,.dropzone:hover{background:var(--accent-soft)}
.dropzone .dz-ic{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:8px}
.dropzone .dz-ic svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.9}
.dropzone b{font:500 var(--fs-body)/20px var(--font-body);color:var(--ink)}
.dropzone .dz-hint{font:400 var(--fs-label)/16px var(--font-body);color:var(--muted)}
.dropzone .dz-file{margin-top:4px;font:500 var(--fs-label)/16px var(--font-body);color:var(--accent)}
.def-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.def-item{padding:12px 14px;border-radius:12px;background:var(--surface-2)}
.def-item .l{font:600 11px var(--font-ui);letter-spacing:0;color:var(--muted);margin-bottom:4px}
html[lang="ar"] .def-item .l{letter-spacing:0;font-size:11.5px}
.def-item .v{font-size:13px;color:var(--ink)}
.formula{font-family:var(--font-mono);font-size:var(--fs-label);padding:10px 12px;border-radius:10px;background:var(--surface-3);white-space:pre-wrap}
.act-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px}
.act-row:last-child{border-bottom:0}
.act-row .chk{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);display:grid;place-items:center;margin-top:1px}
.act-row .chk:hover{border-color:var(--good)}
.act-row .chk svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3}
.act-row.DONE .chk{background:var(--good);border-color:var(--good)}
.act-row.DONE .t{text-decoration:line-through;color:var(--muted)}
.act-row .t{font-weight:500}
.act-row .m{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.act-row .m .over{color:var(--crit-text);font-weight:600}
.mini-legend{display:flex;gap:12px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.mini-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
.timeline{display:flex;gap:4px}
.timeline i{flex:1;height:22px;border-radius:5px;background:var(--none-bg);display:grid;place-items:center;font:600 9.5px var(--font-ui);color:var(--ink-2)}
.timeline i.good{background:var(--good-bg);color:var(--good-text)}.timeline i.warn{background:var(--warn-bg);color:var(--warn-text)}.timeline i.crit{background:var(--crit-bg);color:var(--crit-text)}
.period-ctl{display:flex;align-items:center;gap:6px}
.period-ctl .mstep{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;height:34px;overflow:hidden}
.period-ctl .mstep button{width:30px;height:100%;display:grid;place-items:center;color:var(--muted)}
.period-ctl .mstep button:hover{background:var(--surface-2);color:var(--ink)}
.period-ctl .mstep button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.period-ctl .mstep .lbl{padding:0 6px;font:600 13px var(--font-ui);min-width:110px;text-align:center;white-space:nowrap}
.bench-bar{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--good-bg),var(--warn-bg),var(--crit-bg))}
.bench-bar i{position:absolute;top:-4px;width:3px;height:16px;border-radius:2px;background:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12.5px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.progress-ring{transform:rotate(-90deg)}
html[dir="rtl"] .progress-ring{transform:rotate(-90deg) scaleY(-1)}
@media print{.rail,.topbar,.mtop,.mobar,.kpai-ball,.toasts,.boot{display:none!important}#app{grid-template-columns:1fr}.content{overflow:visible;padding:0}.content::after{display:none}.print-brand{display:block;padding:12px 14px;margin-bottom:16px;border-bottom:1px solid var(--line)}.print-brand img{display:block;height:28px;width:auto}}

/* numbers keep left-to-right order inside Arabic text */
html[dir="rtl"] .t-gap,html[dir="rtl"] .num,html[dir="rtl"] .tile .t-val,html[dir="rtl"] .stat .v,html[dir="rtl"] .hstat .n,html[dir="rtl"] .kv dd b,html[dir="rtl"] .formula,html[dir="rtl"] .ins-pri{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .tbl .num{text-align:left}
.tbl select.sel.sm{min-width:118px}

/* ---------- explain layer ---------- */
.expl{width:18px;height:18px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font:600 11px/1 var(--font-mono);display:inline-grid;place-items:center;vertical-align:middle;margin-inline-start:6px;flex:none;transition:background .12s,color .12s,border-color .12s}
.expl:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.expl.light{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff}
.expl.light:hover{background:#fff;color:var(--hero-a)}
.expl-cap{display:none;gap:8px;align-items:flex-start;padding:8px 12px;margin:-4px 0 12px;border-radius:10px;background:var(--accent-soft);color:var(--ink-2);font-size:12.5px;line-height:1.5}
.expl-cap svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2;flex:none;margin-top:2px}
body.explain .expl-cap{display:flex}
.iconbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.expl-body p{font-size:13.5px;line-height:1.6;color:var(--ink);margin-top:4px}
.expl-sec{padding:12px 0;border-bottom:1px solid var(--line)}
.expl-sec:first-child{padding-top:0}
.toggle.small{font-size:var(--fs-label);color:var(--ink-2)}
dl.gl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px;margin:10px 0 0}
dl.gl dt{color:var(--muted);font-weight:600}dl.gl dd{margin:0;color:var(--ink-2);line-height:1.5}
.finding-rule{font:600 var(--fs-caption) var(--font-mono);padding:3px 6px;border-radius:6px;background:var(--surface-3);color:var(--ink-2);flex:none}
/* plain words + reasons */
.plain{padding:18px 20px;font-size:14.5px;line-height:1.65}
.plain b{font-weight:600}
.plain .lead{font:600 11px var(--font-ui);letter-spacing:0;color:var(--accent);margin-bottom:6px;display:flex;align-items:center;gap:8px}
html[lang="ar"] .plain .lead{letter-spacing:0;font-size:var(--fs-label)}
.reasons{display:grid;gap:8px}
/* Reason Row (Figma 20:972). Icon, title, detail, chevron — the chevron
   matters because every one of these rows goes somewhere, and without it the
   row reads as a statement rather than a door. */
.reason{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);text-align:start;width:100%;cursor:pointer;
  transition:background var(--dur-fast) var(--ease)}
.reason:hover{background:var(--surface-3)}
.reason .r-go{width:14px;height:14px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.9;align-self:center}
.reason .ri{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--none-bg);color:var(--ink-2);align-self:start}
.reason .ri svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.reason .ri.good{background:var(--good-bg);color:var(--good-text)}.reason .ri.warn{background:var(--warn-bg);color:var(--warn-text)}.reason .ri.crit{background:var(--crit-bg);color:var(--crit-text)}.reason .ri.acc{background:var(--accent-soft);color:var(--accent)}
.reason b{font:500 var(--fs-label)/16px var(--font-body);display:block}
.reason>span>span{font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2)}

/* Breadcrumb (Figma 11:89). Where this KPI sits, one click per level. */
/* New action drawer (32:2): the assign choice is a tinted panel with a real
   checkbox and its consequence spelled out beneath it. */
.assign-box{background:var(--accent-soft);border-radius:var(--r);padding:12px 12px 12px 14px}
.assign-box .d{font:400 var(--fs-caption)/14px var(--font-body);color:var(--ink-2);margin:4px 0 0 24px}
.assign-box .d[hidden]{display:none}
.check{display:flex;align-items:center;gap:8px;font:500 var(--fs-body)/20px var(--font-body);color:var(--ink);cursor:pointer}
.check input{width:16px;height:16px;margin:0;accent-color:var(--accent);flex:none}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi-compact{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.kpi-compact .kc-sum{font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2)}
.kpi-ph-compact{padding-bottom:0}
.kpi-compact-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.kpi-compact-row h1{margin:0}
.kpi-compact-row .kpi-compact{margin-top:0}
.crumbs{display:flex;align-items:center;gap:6px;font:400 var(--fs-label)/16px var(--font-body);color:var(--muted);min-width:0;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;color:var(--line-2)}
.crumbs span{color:var(--ink-2)}
/* In plain words, as tiles (kpi.glance) */
.card.glance{padding:16px 18px 18px;min-width:0}
.glance .lead{font:600 11px var(--font-ui);letter-spacing:0;color:var(--accent-2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.glance .lead svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
html[lang="ar"] .glance .lead{letter-spacing:0;font-size:var(--fs-label)}
.gl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:1500px){.gl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gl-tile{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);color:var(--ink);font:inherit;text-align:start;cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.gl-tile:hover{box-shadow:var(--shadow-2);border-color:var(--line-2)}
.gl-tile:active{transform:translateY(0)}
.gl-tile:focus-visible,.gl-data:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gl-l{font:600 var(--fs-caption)/14px var(--font-body);letter-spacing:0;color:var(--muted)}
html[lang="ar"] .gl-l{letter-spacing:0}
.gl-v{font:600 18px/22px var(--font-ui);color:var(--ink)}
.gl-v.good,.gl-gv.good,.gl-data b.good{color:var(--good)}
.gl-v.warn,.gl-gv.warn,.gl-data b.warn{color:var(--warn-text)}
.gl-v.crit,.gl-gv.crit,.gl-data b.crit{color:var(--crit-text)}
.gl-v.none,.gl-gv.none{color:var(--ink-2)}
.gl-d{font-size:var(--fs-label);line-height:1.4;color:var(--ink-2);margin-top:auto}
.gl-d b{font-family:var(--font-mono);font-weight:500;color:var(--ink)}
.gl-bullet{position:relative;display:block;height:10px;margin:6px 0 4px;border-radius:5px;background:var(--surface-3)}
.gl-bar{display:block;height:100%;border-radius:5px;transform-origin:left center}
.gl-tgt{position:absolute;top:-4px;bottom:-4px;width:2px;margin-inline-start:-1px;border-radius:1px;background:var(--ink)}
.gl-bar.good,.gl-months i.good,.gl-meter i.good{background:var(--good)}
.gl-bar.warn,.gl-months i.warn,.gl-meter i.warn{background:var(--warn)}
.gl-bar.crit,.gl-months i.crit,.gl-meter i.crit{background:var(--crit)}
.gl-bar.none,.gl-months i.none,.gl-meter i.none{background:var(--line-2)}
.gl-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;align-items:end;height:22px;margin-top:4px}
.gl-months i{display:block;height:12px;border-radius:3px;transform-origin:bottom center}
.gl-months i.run{height:22px}
.gl-months i.fut{height:12px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.gl-mlbl{display:flex;justify-content:space-between;font-size:10px;line-height:12px;color:var(--muted)}
.gl-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--none-bg);color:var(--ink-2)}
.gl-arrow.good{background:var(--good-bg);color:var(--good)}
.gl-arrow.crit{background:var(--crit-bg);color:var(--crit)}
.gl-arrow span{display:grid;transform:rotate(var(--rot))}
[dir="rtl"] .gl-arrow span{transform:scaleX(-1) rotate(var(--rot))}
.gl-arrow svg{width:22px;height:22px}
.gl-gw{position:relative;display:block;width:112px;max-width:100%}
.gl-gauge{display:block;width:100%;height:auto}
.gl-gauge path{fill:none;stroke-width:9;stroke-linecap:round}
.gl-gauge .trk{stroke:var(--surface-3)}
.gl-gauge .arc{stroke-dasharray:var(--p) 100}
.gl-gauge .arc.good{stroke:var(--good)}.gl-gauge .arc.warn{stroke:var(--warn)}.gl-gauge .arc.crit{stroke:var(--crit)}
.gl-gv{position:absolute;inset-inline:0;bottom:-2px;text-align:center;font:600 16px/20px var(--font-mono)}
.gl-data{display:grid;grid-template-columns:auto minmax(60px,1fr) auto auto;align-items:center;gap:12px;width:100%;margin-top:10px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.gl-data:hover{background:var(--surface-2);border-color:var(--line-2)}
.gl-data .gl-d{margin:0}
.gl-data b{font:600 14px/18px var(--font-mono)}
.gl-meter{display:block;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.gl-meter i{display:block;height:100%;border-radius:3px;transform-origin:left center}
[dir="rtl"] .gl-bar,[dir="rtl"] .gl-meter i{transform-origin:right center}
.gl-next{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 14px;border-radius:var(--r);background:var(--brand-soft)}
.gl-next svg{width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2;flex:none;margin-top:2px}
.gl-next b{display:block;font:600 var(--fs-caption)/14px var(--font-ui);letter-spacing:0;color:var(--brand);margin-bottom:2px}
.gl-next span{font-size:13px;line-height:1.5;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .content:not(.no-anim) .gl-tile{animation:riseIn 320ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
  .content:not(.no-anim) .gl-bar,.content:not(.no-anim) .gl-meter i{animation:growX 700ms var(--ease-out) 200ms both}
  .content:not(.no-anim) .gl-months i:not(.fut){animation:glCell 360ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 40ms + 180ms)}
  .content:not(.no-anim) .gl-gauge .arc{animation:glArc 900ms var(--ease-out) 260ms both}
  .content:not(.no-anim) .gl-arrow span{animation:glArrow 520ms var(--ease-out) 300ms both}
  @keyframes glCell{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
  @keyframes glArc{from{stroke-dashoffset:var(--p)}to{stroke-dashoffset:0}}
  @keyframes glArrow{from{opacity:0;transform:rotate(var(--rot)) translateX(-10px)}to{opacity:1;transform:rotate(var(--rot))}}
}
.next-step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--brand-soft);border:1px solid transparent}
.next-step svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:2;flex:none;margin-top:2px}
.next-step b{font-family:var(--font-ui);color:var(--brand);display:block;font-size:var(--fs-label);letter-spacing:0;margin-bottom:2px}
html[lang="ar"] .next-step b{letter-spacing:0}
/* legend */
.legend{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-label);color:var(--ink-2);padding:6px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.legend:hover{border-color:var(--line-2)}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-inline-end:5px;vertical-align:-1px}
/* home */
.greet h1{font-size:var(--fs-h1)}
.lens-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.lens-grid{grid-template-columns:repeat(2,1fr)}}
.lens{padding:18px;display:flex;flex-direction:column;gap:8px;text-align:start;width:100%;min-height:150px}
.lens .li{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.lens .li svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lens b{font:600 15px var(--font-ui)}
.lens span{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.lens .go{margin-top:auto;color:var(--accent);font-weight:600;font-size:12.5px}
.lens.brand .li{background:var(--brand-soft);color:var(--brand)}
.big3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.big3{grid-template-columns:1fr}}
.big{padding:18px 20px;display:flex;align-items:center;gap:16px;text-align:start;width:100%}
.big .bn{font:600 38px/1 var(--font-mono);letter-spacing:-.03em}
.big .bl{font:600 12px var(--font-ui);letter-spacing:0;color:var(--ink-2)}
html[lang="ar"] .big .bl{letter-spacing:0}
.big .bd{font-size:12.5px;color:var(--ink-2);margin-top:4px}
.mover{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.mover:last-child{border-bottom:0}
.mover .arrow{font-size:var(--fs-body)}
.todo{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.todo:last-child{border-bottom:0}
.todo .n{width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font:600 13px var(--font-ui)}
.todo .t{font:600 13.5px var(--font-ui)}
.todo .d{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.45}
/* data explorer */
.dx{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media (max-width:1000px){.dx{grid-template-columns:1fr}}
.dx-list{max-height:70vh;overflow:auto;padding:6px 10px}
.dx-list .grp{font:600 11px var(--font-ui);letter-spacing:0;color:var(--muted);padding:10px 6px 4px}
.dx-list label{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:8px;font-size:13px;cursor:pointer}
.dx-list label:hover{background:var(--surface-2)}
.dx-list input{accent-color:var(--accent)}
.dx-sel{display:flex;flex-wrap:wrap;gap:6px}
.dx-sel .chip{cursor:pointer}
/* tour */
.tour{position:fixed;inset:0;z-index:80}
.tour .spot{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(10,16,24,.55),0 0 0 3px var(--accent);transition:all .2s}
.tour .tcard{position:absolute;width:340px;background:var(--surface);border-radius:16px;padding:18px;box-shadow:var(--shadow-3);animation:fade .2s}
.tour .tcard h3{margin:4px 0 6px;font-size:var(--fs-h3)}
.tour .tcard p{font-size:13px;color:var(--ink-2);line-height:1.5}
.big svg.ring{width:72px;height:72px;flex:none}
.big .bn .muted{font-family:var(--font-body);font-weight:500}

/* ---------- the simplified map: overview / explore ---------- */
.page.wide{max-width:none}
.sub{animation:fade .18s ease-out}
.helpwrap{position:relative}
/* Report picker (Figma 33:2): one card per report, the format as a badge. */
.rep-types{display:flex;flex-direction:column;gap:8px}
.rep-type{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;text-align:start;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.rep-type:hover{border-color:var(--line-2)}
.rep-type input{appearance:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;margin:0;display:grid;place-items:center}
.rep-type input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform var(--dur-fast) var(--ease)}
.rep-type input:checked{border-color:var(--accent)}
.rep-type input:checked::after{transform:scale(1)}
.rep-type.on{background:var(--accent-soft);border-color:var(--accent)}
.rep-type.on b{color:var(--accent)}
.rep-type>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rep-type b{font:500 var(--fs-body)/20px var(--font-body)}
.rep-type small{font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2)}
.rep-type .fmt{flex:none;font:400 var(--fs-caption)/18px var(--font-mono);padding:0 8px;border-radius:var(--r-xs);background:var(--surface-3);color:var(--ink-2)}
.rep-type.on .fmt{background:var(--surface);color:var(--accent)}
/* Forecast & drivers (31:1775): forecast beside what-if, then three across,
   then two across. */
.an-row2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
@media (max-width:1100px){.an-row2{grid-template-columns:minmax(0,1fr)}}
.an-row2>.card,.grid>.card{margin-top:0}
.kv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;font:400 var(--fs-label)/16px var(--font-body)}
.kv2>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.kv2>div span{color:var(--ink-2)}
.kv2>div b{font:500 13px/18px var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.wi-head{display:flex;align-items:center;gap:20px;margin-bottom:14px}
.wi-head .l{font:400 var(--fs-label)/16px var(--font-body);color:var(--ink-2)}
.wi-head .v{font:500 var(--fs-h3)/22px var(--font-mono);color:var(--good)}
.wi-head .v b{color:var(--ink)}
.wi-list{display:grid;gap:4px;max-height:340px;overflow:auto}
.wi-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);font:400 var(--fs-label)/16px var(--font-body)}
.wi-row.on{background:var(--accent-soft)}
.wi-row .up{margin-inline-start:auto;font:400 var(--fs-caption)/14px var(--font-mono);color:var(--accent)}
.wi-row input{accent-color:var(--accent);width:14px;height:14px;margin:0}
/* Scenarios (31:2540) */
.sc-run{width:100%;justify-content:center}
.sc-fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sc-fx .eyebrow{margin-bottom:10px}
.sc-rings{display:flex;align-items:center;gap:10px}
.sc-rings .arr{color:var(--muted);font-size:18px}
.sc-rings .dl{font:500 var(--fs-body)/20px var(--font-mono)}
.sc-areas{display:flex;flex-direction:column;gap:6px;font:400 var(--fs-label)/16px var(--font-body)}
.sc-areas>div{display:flex;align-items:center;gap:8px}
.sc-areas .nm{flex:1;color:var(--ink-2)}
.sc-areas .mono{font-variant-numeric:tabular-nums}
@media (max-width:900px){.sc-fx{grid-template-columns:minmax(0,1fr)}}
/* User menu (Figma 19:349): opens up from the rail foot. */
.helpmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:280px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);padding:6px;z-index:30;display:flex;flex-direction:column;gap:2px}
.helpmenu button,.helpmenu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;font-size:13px;color:var(--ink);text-align:start;width:100%}
.helpmenu button:hover,.helpmenu a:hover{background:var(--surface-2)}
/* Account menu (Figma User Menu 16:780). Two classes on purpose. It shares
   .helpmenu's item styling, and .helpmenu — declared after it, at the same
   specificity — used to win on position, top and width: with top and bottom
   both set the box collapsed to an empty 12px pill, its contents spilled out
   underneath with no card behind them, and at 280px wide inside a 240px rail
   the names were clipped and the rail grew a scrollbar. The compound selector
   outranks .helpmenu wherever either rule sits, and every placement property
   .helpmenu sets is reset here. JS supplies bottom and left/right on open. */
.helpmenu.usermenu{position:fixed;top:auto;bottom:auto;left:auto;right:auto;inset-inline-end:auto;
  width:240px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;
  padding:6px;gap:2px;border-radius:var(--r);box-shadow:var(--shadow-3);z-index:80}
.usermenu .um-h{display:flex;align-items:center;gap:12px;padding:8px 8px 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.usermenu .avatar.lg{width:40px;height:40px;font-size:13px}
.usermenu .um-id{min-width:0;display:flex;flex-direction:column}
.usermenu .um-id b{font:600 var(--fs-body)/20px var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usermenu .um-id small{font:400 var(--fs-caption)/16px var(--font-body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.helpmenu.usermenu button{justify-content:flex-start;gap:10px;height:36px;padding:0 10px;border-radius:var(--r-sm);font:500 var(--fs-body)/20px var(--font-body)}
.usermenu button svg{width:16px;height:16px;stroke:var(--ink-2);fill:none;stroke-width:1.8;flex:none}
.usermenu button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.usermenu .um-sep{height:1px;background:var(--line);margin:4px 6px}
/* Signing out is the one item that ends the session, so it sits below a
   divider and turns red on hover — noticed before it is clicked, not after. */
.helpmenu.usermenu .um-out:hover{background:var(--crit-bg);color:var(--crit-text)}
.usermenu .um-out:hover svg{stroke:var(--crit-text)}
.iconbtn .dot-badge{position:absolute;top:0;inset-inline-end:0;min-width:18px;height:18px;padding:0 6px;border-radius:var(--r-full);background:var(--brand);color:var(--brand-ink);font:400 var(--fs-caption)/18px var(--font-mono);text-align:center;font-variant-numeric:tabular-nums}
.notifmenu{width:340px;max-height:min(70vh,480px);overflow-y:auto;padding:0}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.notif-head b{font-size:13px}
.notif-empty{padding:22px 16px;text-align:center;font-size:12.5px;color:var(--ink-2)}
.notif-list{display:flex;flex-direction:column}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);width:100%;text-align:start}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--surface-2)}
.notif-mark{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:none;background:transparent}
.notif-item.unread .notif-mark{background:var(--brand)}
.notif-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.notif-body b{font-size:12.5px;font-weight:600;color:var(--ink)}
.notif-item:not(.unread) .notif-body b{font-weight:500;color:var(--ink-2)}
.notif-body span{font-size:var(--fs-label);color:var(--ink-2)}
.notif-body time{font:400 11px var(--font-mono);color:var(--muted)}
.decide tr.crit td:first-child{box-shadow:inset 3px 0 0 var(--crit)}.decide tr.warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}.decide tr.good td:first-child{box-shadow:inset 3px 0 0 var(--good)}
html[dir="rtl"] .decide tr.crit td:first-child{box-shadow:inset -3px 0 0 var(--crit)}html[dir="rtl"] .decide tr.warn td:first-child{box-shadow:inset -3px 0 0 var(--warn)}html[dir="rtl"] .decide tr.good td:first-child{box-shadow:inset -3px 0 0 var(--good)}
.decide td{vertical-align:top;padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.explore{display:grid;grid-template-columns:292px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1000px){.explore{grid-template-columns:1fr}}
.tree-card{position:sticky;top:0;max-height:calc(100vh - var(--top-h) - 52px);overflow:auto;padding:10px}
.tree{display:flex;flex-direction:column;gap:2px}
.tree-search{position:relative;margin-bottom:6px}
.tree-search>svg{position:absolute;inset-inline-start:10px;top:50%;width:14px;height:14px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.tree-search .inp{width:100%;padding-inline:30px}
.tree-clear{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.tree-clear svg{width:12px;height:12px}
.tree-clear:hover{background:var(--surface-3);color:var(--ink)}
.tree-empty{padding:18px 8px;font-size:var(--fs-label);color:var(--muted);text-align:center}
.tnode{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r);color:var(--ink);font-size:13px;min-width:0;transition:background-color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
.tnode:hover{background:var(--surface-2)}
.tnode:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Neutral, not brand. Figma 26:2 draws the current tree row as a plain
   surface-2 fill: the tree already shows where you are by what is expanded and
   by the breadcrumb beside it, and painting the row red made it compete with
   the rail's active item, which is the one place brand red means "you are
   here". This also retires the inset stripe. */
.tnode.on{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.tnode.on b{color:var(--ink)}
.tnode>span{min-width:0}
.tnode b{display:block;font-family:var(--font-ui);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnode small{display:block;font-size:var(--fs-caption);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnode svg.ring{flex:none}
.tnode.plant{padding:9px 8px;margin-bottom:4px;border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.tnode.plant svg.ring{width:30px;height:30px}
.tnode.area svg.ring{width:26px;height:26px}
.tw{width:22px;height:22px;border:0;background:transparent;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--muted);flex:none;cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.tw:hover{background:var(--surface-3);color:var(--ink)}
.tw svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform 220ms var(--ease-out)}
[dir="rtl"] .tw svg{transform:rotate(180deg)}
.tw.open svg{transform:rotate(90deg)}
/* An area's KPIs hang from a guide line under its chevron. */
.tkpis{display:grid;grid-template-rows:1fr;margin:2px 0 6px;margin-inline-start:15px;padding-inline-start:8px;border-inline-start:1px solid var(--line);
  transition:grid-template-rows 240ms var(--ease-out),opacity 240ms var(--ease-out)}
.tkpis-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:1px}
.tkpis.opening,.tkpis.closing{grid-template-rows:0fr;opacity:0}
.tkpis.closing{transition-duration:180ms;transition-timing-function:var(--ease-in)}
.tnode.kpi{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:9px;padding:6px 8px;font-size:12.5px}
.t-kn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12.5px/16px var(--font-body);color:var(--ink-2);transition:color var(--dur-micro) var(--ease-out)}
.tnode.kpi:hover .t-kn,.tnode.kpi.on .t-kn{color:var(--ink)}
.tnode.kpi.on .t-kn{font-weight:600}
.t-kn mark{background:var(--accent-soft);color:var(--accent-2);border-radius:3px;padding:0 1px}
.t-kv{display:flex;flex-direction:column;align-items:flex-end;min-width:52px;max-width:104px;text-align:end}
.tnode.kpi .t-kv b{font:500 12.5px/16px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.t-kv small{max-width:104px;font-size:10.5px;line-height:13px}
.t-kv.none{color:var(--muted)}
.tnode .dot-st{transition:transform var(--dur-micro) var(--ease-out)}
.tnode.kpi:hover .dot-st,.tnode.kpi.on .dot-st{transform:scale(1.3)}
.excontent{min-width:0}
.exbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.excrumb{display:flex;align-items:center;gap:8px;font:600 14px var(--font-ui)}
.excrumb svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.8}
.excrumb a{color:var(--ink-2)}.excrumb a:hover{color:var(--ink)}
.excrumb .cur{color:var(--ink)}.excrumb .sep{color:var(--line-2)}
.hstat.click{cursor:pointer}.hstat.click:hover{background:rgba(255,255,255,.13)}
.content{overflow-x:hidden}
/* two-way intake + scenarios */
.intake{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
@media (max-width:900px){.intake{grid-template-columns:1fr}}
/* Intake cards (Figma 29:2): title with its (i), one sentence, buttons. */
.intake-card{display:flex;flex-direction:column;gap:6px}
.intake-card h3{display:flex;align-items:center;gap:6px;font:600 var(--fs-body)/20px var(--font-body);margin:0}
.intake-card .note{font:400 var(--fs-label)/16px var(--font-body);color:var(--muted);max-width:70ch}
.intake-card .row{margin-top:8px}
.mnav{display:flex;gap:4px;align-self:flex-start}
/* Grid cells. The KPI name is ink, not link-blue — every name in the column is
   a link, so colouring them all says nothing. The value input reads as a plain
   cell until it is touched; it is computed from the two beside it. */
.tbl td.name a{color:var(--ink)}
.tbl td.name a:hover{color:var(--accent)}
#cl-table td.val{font-weight:600}
.in-cell.val{border-color:transparent;background:transparent;font-weight:600}
.in-cell.val:hover{border-color:var(--line-2);background:var(--surface)}
.in-cell.val:focus{background:var(--surface)}
.in-cell.val.is-missing{border-color:var(--warn);background:var(--warn-bg)}
.wf{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wf-due{font:400 var(--fs-caption)/14px var(--font-body);color:var(--crit-text);white-space:nowrap}
.live-check{margin-top:14px}
.btn.accent svg{stroke:currentColor}
/* abbreviations, progress, no-flicker */
abbr.ab{text-decoration:none;border-bottom:1px dotted var(--accent);cursor:help}
abbr.ab:hover{background:var(--accent-soft);border-radius:3px}
.progress{position:absolute;top:0;inset-inline-start:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform;background:linear-gradient(90deg,var(--brand),var(--accent));z-index:20;transition:transform .3s var(--ease)}
html[dir="rtl"] .progress{transform-origin:right}
.main{position:relative}
.content.no-anim .page{animation:none}
.card.stat.click{cursor:pointer}
.finding.click{cursor:pointer;border-radius:8px;padding-inline:6px}
.finding.click:hover{background:var(--surface-2)}
/* level switcher */
/* The three levels are a choice of one thing, so they are a segmented control,
   not three full-width cards. They used to occupy ~100px of vertical space and
   compete with the content they switch between. */
/* The level strip (Figma 26:2). Three cards across the content width, not an
   inline pill group: each one names a level and says what that level shows,
   which is a sentence, not a tab label. The level you are on is the dark band
   — the same device the Overview and the login use to say "this is the frame
   you are inside". */
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.lvl{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);color:var(--ink-2);text-align:start;min-width:0;
  transition:border-color var(--dur-card) var(--ease),background var(--dur-card) var(--ease)}
.lvl:hover{border-color:var(--line-2)}
.lvl .ln{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface-3);
  color:var(--muted);font:500 var(--fs-body)/1 var(--font-mono);flex:none}
.lvl b{display:block;font:600 var(--fs-body)/20px var(--font-body);color:var(--ink)}
.lvl small{display:block;font:400 var(--fs-label)/16px var(--font-body);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvl.on{background:var(--band);border-color:transparent}
.lvl.on b{color:var(--band-ink)}
.lvl.on small{color:var(--band-ink-2)}
.lvl.on .ln{background:rgba(255,255,255,.14);color:var(--band-ink)}
@media (max-width:900px){.levels{grid-template-columns:minmax(0,1fr)}}
.tlvl{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--muted);padding:8px 8px 2px}
html[lang="ar"] .tlvl{letter-spacing:0;font-size:var(--fs-caption)}
.tbl tr.refused td{background:var(--crit-bg)}
.tbl tr.refused td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
html[dir="rtl"] .tbl tr.refused td:first-child{box-shadow:inset -3px 0 0 var(--crit)}
/* audit timeline */
.timeline-v{position:relative;padding-inline-start:18px}
.timeline-v::before{content:"";position:absolute;inset-inline-start:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 14px}
.tl-dot{position:absolute;inset-inline-start:-18px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.tl-dot.g{border-color:var(--good)}.tl-dot.r{border-color:var(--crit)}.tl-dot.w{border-color:var(--warn)}.tl-dot.a{border-color:var(--accent)}.tl-dot.b{border-color:var(--band)}.tl-dot.s{border-color:var(--line-2)}
.tl-body{border:1px solid var(--line);border-radius:11px;padding:9px 12px;background:var(--surface)}
.tl-item.refused .tl-body{background:var(--crit-bg);border-color:transparent}
.tl-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.tl-detail{font-size:12.5px;color:var(--ink);line-height:1.45}
.tl-change{margin-top:5px;font-size:13px}
.tl-foot{margin-top:5px;font-size:var(--fs-caption);color:var(--muted)}
.btn.hist svg{stroke:currentColor}
.hist-inline{opacity:.45;transition:opacity .12s}
tr:hover .hist-inline,.hist-inline:hover{opacity:1}
.tabs{align-items:center}
.tabs .btn.hist,.tabs .btn.tcz{margin-bottom:4px;flex:none}
.tabs .btn.tcz{align-self:center}
.drawer .mh h2,.modal .mh h2{display:flex;align-items:center;gap:8px;min-width:0}
.drawer .mh h2 svg,.modal .mh h2 svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.drawer .mh h2 span,.modal .mh h2 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================================
   Phone layout. Below 820px the rail becomes a drawer, the five places move to
   a bottom bar the thumb can reach, the top bar folds onto two rows, and every
   table scrolls inside its own card rather than stretching the page.
   ========================================================================== */
.mobar,.mtop{display:none}
@media (max-width:820px){
  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100dvh;overflow:hidden}
  .main,.content{min-width:0}
  .main{height:auto;min-height:0}
  /* Explore: the tree is a sidebar on a desk; on a phone it is a section that scrolls with the page,
     not a pinned card the area cards slide under. */
  .tree-card{position:static;max-height:none;overflow:visible}
  .explore{gap:12px}
  /* Analyse: the insights filter bar stays within reach while the long list scrolls, but as one slim
     row that scrolls sideways, not a 200px block the cards slide under. */
  main .ix-bar{top:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 8px;gap:8px;margin-inline:0}
  main .ix-bar::-webkit-scrollbar{display:none}
  main .ix-bar>*{flex:0 0 auto;width:auto;min-width:0}
  main .ix-bar .ix-search{width:200px}
  main .ix-bar .sp{display:none}
  main .ix-bar::before{display:none}
  .content>*,.page>*,.two>*,.card{min-width:0}
  /* A select sizes itself to its longest option; on a phone it takes the column it is given instead. */
  .sel,.inp{max-width:100%}
  #app.rail-collapsed{--rail-w:0}

  /* the rail, as a drawer */
  .rail{position:fixed;inset-block:0;inset-inline-start:0;width:min(84vw,300px);z-index:65;
        transform:translateX(-101%);transition:transform .22s ease;box-shadow:var(--shadow-3);padding-bottom:22px}
  html[dir="rtl"] .rail{transform:translateX(101%)}
  body.drawer-open .rail{transform:none}
  .rail-toggle{display:none}
  .mscrim{position:fixed;inset:0;background:rgba(10,16,24,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .22s}
  body.drawer-open .mscrim{opacity:1;pointer-events:auto}

  /* Anchored to the bell button, a fixed-width dropdown runs off-screen once
     the topbar wraps and the button is no longer near the trailing edge, and
     the topbar's own wrapped height is not a fixed number to anchor below.
     A bottom sheet sidesteps both: always fully on-screen regardless of where
     the button ended up or how many rows the topbar wrapped to. */
  .notifmenu{position:fixed;top:auto;bottom:12px;inset-inline:12px;width:auto;max-width:none;max-height:min(60vh,420px)}

  /* a compact bar with the drawer button, the page name and the site */
  .topbar .tb-mark{display:none}
  .mtop{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);
        border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;min-height:52px}
  .mtop .mt-title{flex:1;min-width:0}
  .mtop .mt-title b{display:block;font:600 15px/1.2 var(--font-ui);color:var(--ink);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mtop .mt-title span{display:block;font-size:11.5px;color:var(--muted);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mtop .iconbtn{width:44px;height:44px;flex:none}

  /* the desktop top bar keeps the period and the tools, on its own scrolling row */
  .topbar{padding:6px 14px;gap:8px;min-height:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;position:sticky;top:52px;z-index:25}
  .topbar::-webkit-scrollbar{display:none}
  /* It scrolls sideways: the far edge fades so the cut-off tools read as more to swipe to,
     and the end padding lets the last tool scroll clear of the fade. */
  .topbar{padding-inline-end:40px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  html[dir=rtl] .topbar{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent)}
  .topbar .tb-title{display:none}
  .topbar .sp{display:none}
  .topbar .tb-group{flex:0 0 auto;max-width:100%}
  /* The period group is as wide as its content: capped at the screen, its
     nowrap row ran past its box and the year select drew over "August 2026". */
  #period-ctl{flex:0 0 auto;max-width:none}
  .period-ctl{flex-wrap:nowrap}
  /* The bell is in the compact bar above (#m-notif); one bell per screen. */
  .topbar #btn-notif{display:none}

  .content{padding:16px 14px calc(78px + env(safe-area-inset-bottom))}

  /* five places within thumb reach */
  /* Mobile/Tab Bar (Figma 16:825). Five items, 64px, a top hairline and a flat
     surface — the upward drop shadow it used to cast was the only shadow in
     the app pointing that way, and it read as the bar floating over a page
     that had already ended. */
  .mobar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;
         inset-inline:0;bottom:0;z-index:55;background:var(--surface);border-top:1px solid var(--line);
         min-height:64px;padding-bottom:env(safe-area-inset-bottom)}
  .mobar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
           color:var(--ink-2);font:500 var(--fs-caption)/14px var(--font-body);text-align:center;position:relative}
  .mobar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mobar a.on{color:var(--brand)}
  .mobar a .badge{position:absolute;top:8px;inset-inline-end:calc(50% - 22px);min-width:18px;height:18px;padding:0 6px;
           border-radius:var(--r-full);background:var(--brand);color:var(--brand-ink);
           font:400 var(--fs-caption)/18px var(--font-mono);font-variant-numeric:tabular-nums}

  /* nothing stretches the page: a wide table scrolls inside its own card */
  .card,.panel{overflow-x:auto}
  .tbl{min-width:600px}

  /* ---- Phone scale: read at arm's length, hit with a thumb. Same tokens,
     phone values; colours and motion untouched. ---- */
  :root{--fs-body:16px;--fs-label:14px;--fs-caption:12.5px;--fs-h1:24px;--fs-h2:19px;--fs-h3:17px;--fs-value:26px}
  body{font-size:var(--fs-body);line-height:24px}
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  .iconbtn{width:44px;height:44px}
  .nav-item{height:48px}
  .seg button{height:40px;padding:0 14px}
  .tabs button{padding:12px 14px}
  .chip{padding:5px 11px}
  .inp,.inp.sm,.in-cell,.sel{min-height:44px;font-size:16px}
  .sel.sm{min-height:40px}
  .toggle{min-height:32px}
  .mstep button{min-width:40px;min-height:40px}
  .tbl td{height:auto;min-height:48px;padding:10px 12px}

  /* ---- The three working tables become stacked cards. A cell shows its
     column name from data-l; the name cell and long text run full width. ---- */
  .m-cards{min-width:0}
  .m-cards thead{display:none}
  .m-cards tbody{display:block}
  .m-cards tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;padding:14px 2px;border-bottom:1px solid var(--line)}
  .m-cards td.num{text-align:start;white-space:normal;font-size:15px;line-height:20px}
  #cl-table td:nth-child(2),#cl-table td:nth-child(3),.decide-tbl td:nth-child(2),.decide-tbl td:nth-child(3){grid-column:span 2}
  .m-cards tr.grp{display:block;padding:20px 2px 6px;border:0}
  .m-cards tr.grp td{display:block;height:auto;min-height:0;padding:0;background:none;border:0}
  .m-cards td{display:block;height:auto;min-height:0;padding:0;border:0;text-align:start}
  .m-cards td.name{grid-column:1/-1}
  .m-cards td[data-l]::before{content:attr(data-l);display:block;font:500 var(--fs-caption)/16px var(--font-body);color:var(--muted);margin-bottom:3px}
  .m-cards td:empty{display:none}
  .m-cards .inp{width:100%}
  #cl-table td.cl-wf,#cl-table td.cl-act{grid-column:1/-1}
  #cl-table td.cl-act .wf{flex-wrap:wrap;gap:8px}
  .decide-tbl td.dwhy,.decide-tbl td.ddo,.decide-tbl td.dact{grid-column:1/-1}
  .decide-tbl td.dact{display:flex;gap:8px;flex-wrap:wrap}
  .dept-tbl td:first-child,.dept-tbl td:last-child{display:none}
  .hero{padding:18px 16px;grid-template-columns:minmax(0,1fr)!important;gap:16px}
  .hero>*{min-width:0}
  .hero h1{font-size:21px}
  .hero-gauge{align-items:flex-start;padding-inline:0}
  .g2,.g3,.g4,.big3,.two,.two.sc-two,.two.kpi-two-glance,.two.kpi-two-detail,.levels,.dx,.explore,.intake,.lens-grid,.settings-shell{grid-template-columns:1fr}
  .seg.sm button{height:40px;padding:0 12px}
  /* A filter bar wider than the phone scrolls sideways, like the tables, instead of being clipped. */
  .seg.sm{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .seg.sm::-webkit-scrollbar{display:none}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom));inset-inline:14px;align-items:stretch}
  .drawer{width:100%}
  .tour-pop{max-width:calc(100vw - 28px)}
}
/* The two grids people type into are the one place a horizontal scroll
   actually breaks the task: below ~820px the month-close grid is a fixed
   975px wide whatever the viewport, and the KPI name — the only thing saying
   which row you are editing — scrolled out of view with everything else.
   The columns all earn their place (target and last month's value are what an
   entrant checks against), so nothing is dropped; the name is pinned instead
   so it stays put while the numbers scroll under it. */
@media (max-width:820px){
  #rd-table td:first-child{
    position:sticky;inset-inline-start:0;z-index:2;background:var(--surface);
    box-shadow:1px 0 0 var(--line)}
  #rd-table th:first-child{
    position:sticky;inset-inline-start:0;z-index:3;box-shadow:1px 0 0 var(--line)}
  #rd-table tbody tr:hover td:first-child{background:var(--surface-2)}
}
@media (max-width:420px){
  .mobar a{font-size:10px}
  .content{padding-inline:11px}
}

/* Work saved on the phone because the network was gone. Sits above the bottom
   bar so it is the last thing in view until it clears. */
.offline-badge{position:fixed;inset-inline:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:58;
  display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 14px;border-radius:14px;
  border:1px solid var(--warn,#B7791F);background:var(--surface);color:var(--ink);
  font:600 12.5px/1 var(--font-ui);box-shadow:var(--shadow-2)}
.offline-badge .dot{width:9px;height:9px;border-radius:50%;background:#B7791F;flex:none}
.offline-badge.on .dot{background:#1E874B;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.35}}
@media (min-width:821px){.offline-badge{inset-inline:auto 20px;bottom:20px;width:max-content}}

/* Analyse — the summary strip and the folded insight groups.
   The page used to render every insight at once: 59 cards over eight screens.
   Nothing is removed here; the groups carry their counts and open on a click. */
.ins-sum{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 26px;margin-bottom:14px}
.ins-sum-t{flex:1;min-width:280px}
/* --font-display is not a token either, and this was the one call site whose
   fallback was `inherit` rather than --font-ui — so Analyse's heading was the
   only heading in the app set in the body face. */
.ins-sum-t h1{font-family:var(--font-ui);font-size:var(--fs-h2);font-weight:600;margin:0 0 3px}
.ins-sum-t p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.ins-sum-n{display:flex;gap:6px;flex-wrap:wrap}
.ins-num{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 16px;border:1px solid transparent;border-radius:10px;background:transparent;cursor:pointer;font:inherit}
.ins-num:hover{background:var(--surface-2)}
.ins-num.on{background:var(--surface-2);border-color:var(--line)}
.ins-num .v{font-family:var(--font-mono);font-size:var(--fs-h2);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ins-num .l{font-size:var(--fs-caption);color:var(--muted)}
.ins-filters{margin-bottom:14px}

.insgrp{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.insgrp-h{display:flex;align-items:center;gap:12px;width:100%;padding:15px 22px;background:transparent;border:0;cursor:pointer;font:inherit;text-align:start;color:var(--ink)}
.insgrp-h:hover{background:var(--surface-2)}
.insgrp-car{display:inline-flex;color:var(--muted);transition:transform 220ms var(--ease-out)}
.insgrp-car svg{width:15px;height:15px}
html[dir="rtl"] .insgrp-car{transform:rotate(180deg)}
.insgrp-car.on,html[dir="rtl"] .insgrp-car.on{transform:rotate(90deg)}
.insgrp-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.insgrp-t{flex:1;font-size:15px;font-weight:600}
.insgrp-n{font-family:var(--font-mono);font-size:var(--fs-caption);font-variant-numeric:tabular-nums;color:var(--ink-2);background:var(--surface-2);border-radius:10px;padding:3px 10px}
.insgrp-b{padding:4px 22px 20px;border-top:1px solid var(--line)}
.insgrp-more{margin-top:12px}
/* ---- Forecast outlook table (analytics.js) ---- */
.fo-wrap{border-top:1px solid var(--line)}
.fo-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:12px 16px}
.fo-sum{font-size:var(--fs-label);color:var(--ink-2);margin-inline-end:4px}
.fo-sum b{font:600 18px var(--font-mono);color:var(--ink);margin-inline-end:4px}
.fo-search{flex:0 1 220px}
.fo-search .inp{height:32px;font-size:var(--fs-label)}
.fo-tbl td{vertical-align:middle}
.fo-tbl td.name{min-width:170px}
.fo-grp td{display:table-cell}
.fo-grp td>span:first-of-type{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--ink-2)}
html[lang="ar"] .fo-grp td>span:first-of-type{letter-spacing:0}
.fo-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:8px;vertical-align:1px}
.fo-dot.crit{background:var(--crit)}.fo-dot.warn{background:var(--warn)}.fo-dot.good{background:var(--good)}.fo-dot.none{background:var(--line-2)}
.fo-ye{min-width:240px}
.fo-track{position:relative;display:inline-block;vertical-align:middle;width:130px;height:8px;border-radius:4px;background:var(--surface-3);margin-inline-end:10px}
.fo-track i{display:block;height:100%;border-radius:4px;transform-origin:left center}
[dir="rtl"] .fo-track i{transform-origin:right center}
.fo-track i.crit{background:var(--crit)}.fo-track i.warn{background:var(--warn)}.fo-track i.good{background:var(--good)}.fo-track i.none{background:var(--line-2)}
.fo-track em{position:absolute;top:-3px;bottom:-3px;width:2px;margin-inline-start:-1px;border-radius:1px;background:var(--ink)}
.fo-v{font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.fo-v b{font:600 13px var(--font-mono);color:var(--ink)}
.fo-v span{color:var(--muted)}
.fo-p{white-space:nowrap;font:500 var(--fs-label) var(--font-mono);color:var(--ink-2)}
.fo-pie{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:-3px;margin-inline-end:8px;background:conic-gradient(var(--pc,var(--accent)) var(--c),var(--surface-3) 0)}
.fo-pie.crit{--pc:var(--crit)}.fo-pie.warn{--pc:var(--warn)}.fo-pie.good{--pc:var(--good)}
.fo-t{white-space:nowrap;font:500 var(--fs-label) var(--font-mono);color:var(--ink-2)}
.fo-t span{display:inline-grid;place-items:center;width:20px;height:20px;margin-inline-end:6px;border-radius:50%;font:600 12px/1 var(--font-body)}
.fo-t.good span{background:var(--good-bg);color:var(--good)}.fo-t.bad span{background:var(--crit-bg);color:var(--crit-text)}.fo-t.flat span{background:var(--surface-3);color:var(--ink-2)}
.fo-row.on td{background:var(--surface-2)}
@media (prefers-reduced-motion:no-preference){
  .fo-tbl.anim .fo-row{animation:riseIn 280ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 22ms)}
  .content:not(.no-anim) .fo-track i{animation:growX 700ms var(--ease-out) 200ms both}
}
/* ---- Definitions & targets, made to be read (catalogue.js) ---- */
.cat-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat-tile{--tc:var(--accent);display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out)}
.cat-tile.good{--tc:var(--good)}.cat-tile.warn{--tc:var(--warn)}.cat-tile.crit{--tc:var(--crit)}
.cat-tile:hover{box-shadow:var(--shadow-2);border-color:var(--line-2)}
.cat-tile.on{border-color:var(--tc);box-shadow:inset 0 0 0 1px var(--tc);background:color-mix(in srgb,var(--tc) 7%,var(--surface))}
.cat-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cat-tile-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);color:var(--ink-2)}
.cat-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent)}
.cat-ic svg{width:14px;height:14px}
.cat-tile b{font:600 28px/32px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.cat-tile.crit b{color:var(--crit-text)}.cat-tile.warn b{color:var(--warn-text)}
.cat-meter{display:block;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.cat-meter i{display:block;height:100%;border-radius:2px;background:var(--tc);transform-origin:left center}
[dir="rtl"] .cat-meter i{transform-origin:right center}
.cat-sub{font-size:var(--fs-caption);color:var(--muted)}
.cat-mix{display:flex;align-items:center;gap:14px;margin:14px 0 4px}
.cat-mix-l{font:600 var(--fs-caption)/14px var(--font-body);letter-spacing:0;color:var(--muted);white-space:nowrap}
html[lang="ar"] .cat-mix-l{letter-spacing:0}
.cat-mix .ix-sevbar{flex:1;margin:0;height:26px}
.ix-sevbar .good{background:var(--good-bg);color:var(--good)}
.cat-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:5px;vertical-align:1px}
.cat-dot.acc,.cat-st.acc i,.cat-dot.good,.cat-st.good i{background:var(--line-2)}.cat-dot.warn,.cat-st.warn i{background:var(--warn)}.cat-dot.crit,.cat-st.crit i{background:var(--crit)}
#cat-st .n,#cat-kind .n{font:500 var(--fs-caption) var(--font-mono);color:var(--muted);margin-inline-start:4px}
#cat-st .on .n,#cat-kind .on .n{color:inherit}
/* Table */
.cat-st{display:inline-flex;align-items:center;gap:5px;font:600 var(--fs-caption)/14px var(--font-body);white-space:nowrap}
.cat-st i{width:7px;height:7px;border-radius:50%}
.cat-st.acc,.cat-st.good{color:var(--muted);font-weight:500}.cat-st.warn{color:var(--warn-text)}.cat-st.crit{color:var(--crit-text)}
.cat-kind{display:inline-flex;padding:2px 8px;border-radius:99px;background:var(--surface-3);font:600 var(--fs-caption)/16px var(--font-body);color:var(--ink-2);white-space:nowrap}
.cat-kind.lead{background:var(--accent-soft);color:var(--accent-2)}
.cat-dir{display:inline-grid;place-items:center;width:18px;height:18px;margin-inline-start:4px;border-radius:50%;font:600 11px/1 var(--font-body);vertical-align:1px}
.cat-dir.up,.cat-dir.down{background:var(--surface-3);color:var(--ink-2)}
.cat-unit{white-space:nowrap}
.cat-tbl td.name{min-width:200px}
.cat-tbl td.name small{white-space:nowrap}
.cat-own{max-width:200px;color:var(--ink-2)}
.cat-card-sub{font-size:var(--fs-caption);color:var(--muted);margin-top:-4px}
/* One quiet summary line, then only the problems as pills. */
.cat-sum{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:12px 16px;margin-bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.cat-sum-n{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:baseline;padding:4px 8px;margin:-4px -8px;border:0;border-radius:var(--r);background:transparent;color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out)}
.cat-sum-n:hover{background:var(--surface-2)}
.cat-sum-n b{grid-row:1 / 3;font:600 26px/30px var(--font-mono);font-variant-numeric:tabular-nums}
.cat-sum-n>span:not(.cat-sum-m){font:600 13px/16px var(--font-ui)}
.cat-sum-m{display:block;width:120px;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;align-self:center}
.cat-sum-m i{display:block;height:100%;border-radius:2px;background:var(--accent);transform-origin:left center}
.cat-sum-n small{grid-column:2;font-size:var(--fs-caption);color:var(--muted)}
.cat-sum-n.dim{opacity:.7}
.cat-sum-sep{width:1px;align-self:stretch;background:var(--line);margin-inline:6px}
.cat-sum-l{font:600 var(--fs-caption)/14px var(--font-body);letter-spacing:0;color:var(--muted)}
html[lang="ar"] .cat-sum-l{letter-spacing:0}
.cat-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid transparent;border-radius:99px;font:500 var(--fs-label) var(--font-body);cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out)}
.cat-pill b{font:600 13px var(--font-mono)}
.cat-pill.crit{background:var(--crit-bg);color:var(--crit-text)}.cat-pill.warn{background:var(--warn-bg);color:var(--warn-text)}.cat-pill.none{background:var(--surface-2);color:var(--ink-2)}
.cat-pill.on{box-shadow:inset 0 0 0 1.5px currentColor}
.cat-pill:focus-visible,.cat-sum-n:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cat-sum-ok{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--good)}
.cat-sum-ok svg{width:14px;height:14px}
.cat-tbl .name mark,.cat-f mark,.cat-card mark,.cat-tbl td mark{background:var(--accent-soft);color:var(--accent-2);border-radius:3px;padding:0 1px}
.cat-f{max-width:420px}
.cat-f span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.45;color:var(--ink-2)}
.cat-row:hover .cat-f span{color:var(--ink)}
.cat-ed .btn{opacity:.45;transition:opacity var(--dur-micro) var(--ease-out)}
.cat-row:hover .cat-ed .btn,.cat-ed .btn:focus-visible{opacity:1}
.cat-grp td{display:table-cell}
.cat-grp td>span:first-child{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--ink-2)}
html[lang="ar"] .cat-grp td>span:first-child{letter-spacing:0}
.cat-grp-n{margin-inline:8px 10px;padding:0 7px;border-radius:99px;background:var(--surface-3);font:600 var(--fs-caption)/16px var(--font-mono);color:var(--ink-2)}
/* Cards */
.cat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cat-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 16px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.cat-card:hover{box-shadow:var(--shadow-2);border-color:var(--line-2)}
.cat-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cat-card-t{min-width:0}
.cat-card-t a{display:block;font:600 15px/20px var(--font-ui);color:var(--ink);text-decoration:none}
.cat-card-t a:hover{color:var(--accent-2)}
.cat-card-t small{font:500 var(--fs-caption) var(--font-mono);color:var(--muted)}
.cat-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.cat-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;border:1px solid var(--line);font-size:var(--fs-caption);color:var(--ink-2);white-space:nowrap}
.cat-tag .cat-dir{width:16px;height:16px;font-size:10px}
.cat-formula{padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);font:500 12.5px/1.55 var(--font-mono);color:var(--ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cat-card footer{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line);font-size:var(--fs-caption);color:var(--ink-2)}
.cat-owner{display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-owner svg{width:13px;height:13px;flex:none;color:var(--muted)}
.cat-now{display:inline-flex;align-items:center;gap:5px;margin-inline-start:auto;font:600 12.5px var(--font-mono);color:var(--ink);white-space:nowrap}
.cat-now small{font:400 10.5px var(--font-body);color:var(--muted)}
.cat-now.none{font:400 var(--fs-caption) var(--font-body);color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .cat-cards.anim>*,.cat-tbl.anim .cat-row{animation:riseIn 300ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 25ms)}
  .content:not(.no-anim) .cat-pill{animation:riseIn 300ms var(--ease-out) both}
  .content:not(.no-anim) .cat-pill:nth-of-type(2){animation-delay:60ms}
  .content:not(.no-anim) .cat-pill:nth-of-type(3){animation-delay:120ms}
  .content:not(.no-anim) .cat-sum-m i{animation:growX 700ms var(--ease-out) 200ms both}
}
/* ---- Insights, made to be read (insights.js) ---- */
.ix-sum{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.8fr) auto;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;margin-bottom:12px}
@media (max-width:1280px){.ix-sum{grid-template-columns:minmax(0,1fr) auto}.ix-tiles{grid-column:1 / -1;grid-row:2}}
.ix-sum-t h1{font:600 var(--fs-h2)/26px var(--font-ui);margin:0 0 4px}
.ix-sum-t p{margin:0;font-size:13px;color:var(--muted)}
.ix-sevbar{display:flex;gap:3px;height:28px;margin-top:14px}
.ix-sevbar button{min-width:64px;border:0;border-radius:var(--r-sm);font:600 var(--fs-caption)/1 var(--font-body);white-space:nowrap;overflow:hidden;cursor:pointer;transform-origin:left center;
  transition:filter var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
[dir="rtl"] .ix-sevbar button{transform-origin:right center}
.ix-sevbar button b{font-family:var(--font-mono)}
.ix-sevbar .crit{background:var(--crit-bg);color:var(--crit-text)}.ix-sevbar .warn{background:var(--warn-bg);color:var(--warn-text)}.ix-sevbar .acc{background:var(--accent-soft);color:var(--accent-2)}
.ix-sevbar button:hover{filter:brightness(.97)}
.ix-sevbar button.on{box-shadow:inset 0 0 0 2px currentColor}
.ix-none{font-size:var(--fs-label);color:var(--muted)}
.ix-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.ix-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out),opacity var(--dur-micro) var(--ease-out)}
.ix-tile b{font:600 20px/24px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--kc)}
.ix-tile>span:last-child{font-size:var(--fs-caption);line-height:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ix-tile:hover{border-color:var(--line-2)}
.ix-tile.on{border-color:var(--kc);background:color-mix(in srgb,var(--kc) 9%,var(--surface));box-shadow:inset 0 0 0 1px var(--kc)}
.ix-tile.zero{opacity:.45}
.ix-tile:focus-visible,.ix-sevbar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ix-kind{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;color:var(--kc);background:color-mix(in srgb,var(--kc) 14%,transparent)}
.ix-kind svg{width:14px;height:14px}
.ix-tile .ix-kind{width:24px;height:24px}
/* The toolbar stays in reach while the results scroll under it. */
.ix-sentinel{height:1px;margin-bottom:-1px}
/* The toolbar: a floating bar that sticks 10px below the top edge. Its
   ::before covers the scroller's padding above it, so nothing shows through;
   once stuck it lifts with a shadow. */
.ix-bar{position:sticky;top:10px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px;margin-bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.ix-bar::before{content:"";position:absolute;inset-inline:-12px;bottom:100%;height:40px;background:var(--bg);pointer-events:none;opacity:0}
.ix-bar.stuck::before{opacity:1}
.ix-bar.stuck{box-shadow:var(--shadow-2);border-color:var(--line-2)}
.ix-search{position:relative;flex:1 1 280px;max-width:440px}
.ix-search>svg{position:absolute;inset-inline-start:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:color var(--dur-micro) var(--ease-out)}
.ix-search:focus-within>svg{color:var(--accent-2)}
.ix-search .inp{width:100%;height:38px;padding-inline:36px 74px;font-size:13.5px;background:var(--surface-2);border-color:transparent;transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
.ix-search .inp:hover{border-color:var(--line-2)}
.ix-search .inp:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ix-kbd{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--surface);font:600 11px var(--font-mono);color:var(--muted);pointer-events:none}
.ix-search:focus-within .ix-kbd{opacity:0}
.ix-qn{position:absolute;inset-inline-end:36px;top:50%;transform:translateY(-50%);padding:1px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent-2);font:600 var(--fs-caption)/16px var(--font-mono);pointer-events:none}
.ix-x{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
/* Suggestions: open while the search has focus. */
.ix-sug{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:20;max-height:360px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out),visibility 0s linear var(--dur-micro)}
.ix-search.open .ix-sug,.ix-search:focus-within .ix-sug{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ix-sug-h{padding:8px 8px 4px;font:600 var(--fs-caption)/14px var(--font-body);letter-spacing:0;color:var(--muted)}
html[lang="ar"] .ix-sug-h{letter-spacing:0}
.ix-sug-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.ix-sug-i:hover,.ix-sug-i.on{background:var(--surface-2)}
.ix-sug-i.on{box-shadow:inset 0 0 0 1px var(--line-2)}
.ix-sug-i .t{font:500 13px/18px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-sug-i .t mark{background:var(--accent-soft);color:var(--accent-2);border-radius:3px;padding:0 1px}
.ix-sug-i .m{font-size:var(--fs-caption);color:var(--muted);white-space:nowrap}
.ix-sug-i .n{min-width:22px;padding:1px 7px;border-radius:99px;background:var(--surface-3);font:600 var(--fs-caption)/16px var(--font-mono);color:var(--ink-2);text-align:center}
.ix-sug-i .ix-kind{width:22px;height:22px}
.ix-sug-i .dot-st{margin-inline:6px}
.ix-sug-none{padding:12px 8px;font-size:var(--fs-label);color:var(--ink-2);line-height:1.5}
.ix-sug-f{display:flex;gap:14px;padding:8px 8px 4px;margin-top:4px;border-top:1px solid var(--line);font-size:var(--fs-caption);color:var(--muted)}
.ix-sug-f kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin-inline-end:2px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface-2);font:600 10.5px var(--font-mono);color:var(--ink-2)}
.ix-x svg{width:12px;height:12px}.ix-x:hover{background:var(--surface-3);color:var(--ink)}
#ins-sev .n{font:500 var(--fs-caption) var(--font-mono);color:var(--muted);margin-inline-start:4px}
#ins-sev .on .n{color:inherit}
.ix-view svg{width:15px;height:15px}
.ix-active{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.ix-count{font-size:var(--fs-label);color:var(--muted);margin-inline-end:4px}
.ix-count b{font:600 14px var(--font-mono);color:var(--ink)}
.ix-fchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px 0 10px;border:0;border-radius:99px;background:var(--accent-soft);color:var(--accent-2);font:600 var(--fs-label) var(--font-body);cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out)}
.ix-fchip svg{width:12px;height:12px}
.ix-fchip:hover{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.ix-clearall{border:0;background:none;color:var(--ink-2);font:600 var(--fs-label) var(--font-body);cursor:pointer;padding:4px 6px;border-radius:var(--r-sm)}
.ix-clearall:hover{color:var(--ink);background:var(--surface-3)}
.ix-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 16px;color:var(--ink-2);background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.ix-empty>svg{width:22px;height:22px;color:var(--muted)}
/* Severity and priority, quiet on purpose: every card on this page is a finding. */
.ix-sev{display:inline-flex;align-items:center;gap:5px;font:600 var(--fs-caption)/14px var(--font-body);white-space:nowrap}
.ix-sev i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ix-sev.crit{color:var(--crit-text)}.ix-sev.warn{color:var(--warn-text)}.ix-sev.acc{color:var(--accent-2)}
.ix-pri{font:500 var(--fs-caption)/14px var(--font-mono);color:var(--muted);margin-inline-start:auto;white-space:nowrap}
.ix-conf{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-caption) var(--font-mono);color:var(--ink-2);white-space:nowrap}
.ix-meter{display:inline-block;width:44px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.ix-meter i{display:block;height:100%;border-radius:3px;background:var(--accent);transform-origin:left center}
[dir="rtl"] .ix-meter i{transform-origin:right center}
.ix-spark{display:inline-flex;margin-inline-start:auto}
.ix-spark svg{display:block;width:96px;height:24px;overflow:visible}
.irow .ix-spark{margin:0}
.irow .ix-spark svg{width:80px;height:22px}
/* Cards: four things and room around them */
.ix-results.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.icard{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px 18px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.icard:hover{box-shadow:var(--shadow-2);border-color:var(--line-2)}
.icard-h{display:flex;align-items:center;gap:10px}
.icard-h .ix-kind{width:32px;height:32px}
.icard-h .ix-kind svg{width:16px;height:16px}
.icard-who{flex:1;min-width:0}
.icard-kpi{display:block;font:600 14px/18px var(--font-ui);color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icard-kpi:hover{color:var(--accent-2)}
.icard-who small{display:block;font-size:var(--fs-caption);color:var(--muted);line-height:14px}
.ix-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ix-dot.crit{background:var(--crit);box-shadow:0 0 0 3px var(--crit-bg)}.ix-dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}.ix-dot.acc{background:var(--line-2)}
.icard-t{margin:0;font:600 15px/21px var(--font-ui);color:var(--ink)}
.icard-spark{height:40px;margin:2px -2px 0}
.icard-spark svg{display:block;width:100%;height:40px;overflow:visible}
.icard-d{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 240ms var(--ease-out),opacity 240ms var(--ease-out)}
.icard-d>div{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.icard.more .icard-d{grid-template-rows:1fr;opacity:1}
.icard-b{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.icard-do{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-sm);background:var(--accent-soft);font-size:12.5px;line-height:1.45;color:var(--ink)}
.icard-do svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--accent-2)}
.icard-f{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.icard-conf{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-caption) var(--font-body);color:var(--muted);white-space:nowrap}
.icard-conf i{width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--accent) var(--c),var(--surface-3) 0)}
.icard-more{display:inline-flex;align-items:center;gap:3px;margin-inline-start:auto;padding:4px 6px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);font:500 var(--fs-caption) var(--font-body);cursor:pointer}
.icard-more:hover{background:var(--surface-2);color:var(--ink)}
.icard-more svg{width:12px;height:12px;transition:transform 220ms var(--ease-out)}
[dir="rtl"] .icard-more svg{transform:rotate(180deg)}
.icard.more .icard-more svg{transform:rotate(90deg)}
.icard-f .btn{opacity:.7;transition:opacity var(--dur-micro) var(--ease-out)}
.icard:hover .icard-f .btn,.icard-f .btn:focus-visible{opacity:1}
/* The same card, smaller, in a KPI's, an area's or the plant's side panel. */
.icard.mini{gap:8px;padding:12px 14px 10px;border-radius:var(--r)}
.icard.mini .icard-h{align-items:flex-start}
.icard.mini .ix-kind{width:28px;height:28px}
.icard.mini .ix-kind svg{width:14px;height:14px}
.icard.mini .ix-dot{margin-top:6px}
.icard-f1{display:block;font:600 14px/19px var(--font-ui);color:var(--ink)}
.icard.mini .icard-t{font-size:14px;line-height:19px}
.icard.mini .icard-f{padding-top:8px}
/* A suggestion the whole group shares, said once above it. */
.ix-shared{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;padding:10px 14px;border-radius:var(--r);background:var(--accent-soft);font-size:13px;line-height:1.5;color:var(--ink)}
.ix-shared svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent-2)}
.ix-shared b{display:block;font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--accent-2)}
html[lang="ar"] .ix-shared b{letter-spacing:0}
/* List */
.ix-results.list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.irow{display:grid;grid-template-columns:28px minmax(0,1fr) auto 104px 84px auto;column-gap:14px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);transition:background-color var(--dur-micro) var(--ease-out)}
.irow:last-child{border-bottom:0}
.irow:hover,.irow.more{background:var(--surface-2)}
.irow-m{min-width:0}
.irow-t{display:block;font:600 13.5px/18px var(--font-ui);color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.irow-t:hover{color:var(--accent-2)}
.irow-k{font-size:var(--fs-caption);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.irow-a{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.ix-exp{width:26px;height:26px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ix-exp svg{width:13px;height:13px;transition:transform 220ms var(--ease-out)}
[dir="rtl"] .ix-exp svg{transform:rotate(180deg)}
.irow.more .ix-exp svg{transform:rotate(90deg)}
.ix-exp:hover{background:var(--surface-3);color:var(--ink)}
.irow-d{grid-column:2 / -1;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 240ms var(--ease-out),opacity 240ms var(--ease-out)}
.irow-d>div{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.irow.more .irow-d{grid-template-rows:1fr;opacity:1}
.irow.more .irow-d>div{padding-top:8px}
.irow .icard-b{display:block}
@media (max-width:1180px){.irow{grid-template-columns:28px minmax(0,1fr) auto auto}.irow>.ix-conf,.irow>.ix-spark{display:none}}
@media (max-width:900px){.irow{grid-template-columns:28px minmax(0,1fr) auto}.irow>.irow-tags{display:none}}
/* Needs a decision */
.ix-decide{display:flex;flex-direction:column}
.ix-dec{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line)}
.ix-dec:last-child{border-bottom:0}
.ix-rank{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font:600 12px var(--font-ui)}
.ix-dec:nth-child(-n+3) .ix-rank{background:var(--brand);color:var(--brand-ink)}
.ix-dec-k{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 14px/20px var(--font-ui)}
.ix-dec-k a{color:var(--ink);text-decoration:none}.ix-dec-k a:hover{color:var(--accent-2)}
.ix-kchip{display:inline-flex;align-items:center;gap:4px;font:600 var(--fs-caption)/14px var(--font-ui);letter-spacing:0;color:var(--kc)}
.ix-kchip svg{width:12px;height:12px}
.ix-dec p{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.ix-dec .ix-pri{margin:0}
/* Group folds: a preview of what is inside while folded, a slide when opened. */
.insgrp-pv{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;margin-inline-start:4px}
.ix-pvk{padding:2px 8px;border-radius:99px;background:var(--surface-2);font-size:var(--fs-caption);color:var(--ink-2);white-space:nowrap}
.ix-pvk.more{color:var(--muted)}
.insgrp-w{display:grid;grid-template-rows:1fr;transition:grid-template-rows 260ms var(--ease-out),opacity 260ms var(--ease-out)}
.insgrp-w>div{min-height:0;overflow:hidden}
.insgrp-w.opening,.insgrp-w.closing{grid-template-rows:0fr;opacity:0}
.insgrp-w.closing{transition-duration:190ms;transition-timing-function:var(--ease-in)}
@media (prefers-reduced-motion:no-preference){
  .ix-results.anim>*{animation:riseIn 300ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 32ms)}
  .content:not(.no-anim) .ix-dec{animation:riseIn 320ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms + 120ms)}
  .content:not(.no-anim) .ix-sevbar button{animation:growX 600ms var(--ease-out) 150ms both}
  .content:not(.no-anim) .ix-tile{animation:riseIn 300ms var(--ease-out) both}
  .content:not(.no-anim) .ix-tile:nth-child(2){animation-delay:40ms}
  .content:not(.no-anim) .ix-tile:nth-child(3){animation-delay:80ms}
  .content:not(.no-anim) .ix-tile:nth-child(4){animation-delay:120ms}
  .content:not(.no-anim) .ix-tile:nth-child(5){animation-delay:160ms}
  .content:not(.no-anim) .ix-tile:nth-child(n+6){animation-delay:200ms}
  .content:not(.no-anim) .ix-meter i{animation:growX 600ms var(--ease-out) 250ms both}
}
@media (prefers-reduced-motion:reduce){.insgrp-w,.irow-d{transition:none}}
@media (max-width:820px){
  .ins-sum{padding:16px 18px;gap:14px}
  .ins-sum-n{width:100%;justify-content:space-between}
  .ins-num{flex:1;padding:8px 6px;min-height:44px}
  .insgrp-h{padding:14px 16px;min-height:44px}
  .insgrp-b{padding:4px 16px 16px}
}

/* Arabic runs longer than English for the same sentence, so four area cards to
   a row pushes "4 مؤشرات · 2 ضمن الهدف · 4 خارج" onto a second line. Three
   wider cards keep it on one, and the grid is unchanged in English. */
html[lang="ar"] .grid.g4{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){html[lang="ar"] .grid.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){html[lang="ar"] .grid.g4{grid-template-columns:1fr}}

/* KPI page — hierarchy.
   The page opened with four or five stat cards of identical weight, so the
   number the page is actually about did not lead. The first card is the KPI's
   value for the period on screen; it leads, and the rest support it. */
@media (max-width:900px){.stat-row .stat:first-child{grid-column:span 1}}

/* Seven reasons at equal weight is a wall. Three lead, the rest unfold. */
.reason-hidden{display:none}
.reason-more{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;background:transparent;border:1px dashed var(--line-2);color:var(--brand);font:600 12.5px var(--font-ui);cursor:pointer;width:100%;justify-content:center}
.reason-more:hover{background:var(--surface-2);border-style:solid}

/* Decide now — the table is the page's purpose, but sixteen rows at once is a
   wall. Six lead; the count and the rest sit one click below. */
.decide-foot{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.decide-foot span{flex:1}

/* The report archive carried two coloured chips on every row — 82 of them
   across 41 rows, all shouting the same two facts. Format and language are
   metadata, not status, so they read as quiet monospace beside the name. */
.rep-fmt{font:500 11px var(--font-mono);color:var(--muted);letter-spacing:.02em;white-space:nowrap}

/* The year-end forecast ring, back in the summary strip. It was a 140px gauge
   in a hero band three times this tall; at 92px it keeps the reading without
   rebuilding the congestion the strip removed. */
.ins-sum-gauge{display:flex;flex-direction:column;align-items:center;gap:2px;padding-inline-start:22px;border-inline-start:1px solid var(--line);cursor:pointer}
.ins-sum-gauge .d{font-size:11.5px;color:var(--muted);white-space:nowrap;text-align:center;line-height:1.5;margin-top:2px}
.ins-sum-gauge:hover{opacity:.88}
@media (max-width:820px){.ins-sum-gauge{border-inline-start:0;padding-inline-start:0;width:100%}}

/* Overview, matched to the Figma direction.
   The five hero numbers were five bordered tiles, each repeating its value
   twice — once inside a coloured badge and once beside it. They read as five
   competing cards above a table that is the actual subject of the page. They
   are now one inline row: a status dot, the number, the label. Same five
   numbers, a quarter of the weight. */
.hero.compact .hero-stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:16px}
.hero.compact .hstat{background:transparent;border:0;box-shadow:none;padding:0;display:flex;align-items:center;gap:9px;min-width:0}
.hero.compact .hstat:hover{background:transparent}
.hero.compact .hstat .rn{width:9px;height:9px;min-width:9px;border-radius:50%;font-size:0;line-height:0;padding:0;flex:none;display:block}
.hero.compact .hstat .rn svg{display:none}
.hero.compact .hstat>div{display:flex;align-items:baseline;gap:8px}
.hero.compact .hstat .n{font:600 21px var(--font-mono);color:#fff;font-variant-numeric:tabular-nums}
.hero.compact .hstat .l{font-size:12.5px;color:rgba(255,255,255,.66);white-space:nowrap}

/* The section heading and its filters belong to the table, so they sit in the
   card with it rather than floating above as separate page furniture. */
.decide-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 18px 14px}
.decide-title{flex:1;min-width:220px}
.decide-title h2{margin:0;font:600 19px var(--font-ui);display:flex;align-items:center;gap:6px}
.decide-title .hint{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.decide-head .chips{gap:6px}
@media (max-width:820px){.decide-head{padding:16px 14px 12px}.hero.compact .hero-stats{gap:16px}}

/* KPI page: the number the page is about leads, the narrative explains it. */
.stat-row-lead{margin-bottom:16px}

/* A sized icon. icon() emits class="" when no class is passed, and an SVG with
   no width or height fills whatever box it lands in — which is how a 16px tick
   became a checkmark the size of a report card. */
.ic{width:18px;height:18px;flex:none}
.rep-pick{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;flex:none}
.rep-pick .ic{width:14px;height:14px;stroke-width:2.6}

/* KPI hero — one band instead of four cards of equal weight.
   The value the page is about leads with its status edge; the year's shape sits
   beside it; the forecast closes the row. Last month, YTD and the industry
   range keep their numbers but move to a quiet strip beneath, where they read
   as support rather than as four competing headlines. */
.kpi-hero{display:grid;grid-template-columns:minmax(230px,auto) 1fr auto;gap:28px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:22px 26px;position:relative;overflow:hidden}
.kpi-hero::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--st)}
.kh-lead{text-align:start;background:transparent;border:0;padding:0;cursor:pointer}
.kh-top{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.kh-per{font-size:var(--fs-caption);color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.kh-v{font:600 var(--fs-display)/1.05 var(--font-ui);color:var(--ink);display:flex;align-items:baseline;gap:9px;font-variant-numeric:tabular-nums}
.kh-u{font:500 14px var(--font-ui);color:var(--muted)}
.kh-sub{margin-top:6px;font-size:13px;color:var(--muted)}
.kh-spark{min-width:0;background:transparent;border:0;padding:0;cursor:pointer;text-align:start}
.kh-spark svg{width:100%;height:54px}
.kh-l{display:flex;align-items:center;gap:4px;font:600 var(--fs-caption) var(--font-ui);letter-spacing:0;color:var(--muted);margin-bottom:5px}
.kh-fc{text-align:start;background:transparent;border:0;padding:0 0 0 24px;border-inline-start:1px solid var(--line);cursor:pointer;flex:none}
.kh-fv{font:600 26px/1.1 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.kh-d{display:block;margin-top:4px;font-size:var(--fs-label);color:var(--muted)}
/* flex, not auto-fit grid: with two or three cells the repeat(auto-fit,...)
   tracks did not collapse, so the cells sat at a fixed width and left half the
   strip empty. */
.kh-strip{display:flex;flex-wrap:wrap;margin-top:10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kh-cell{flex:1 1 190px;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:start;
  padding:13px 18px;background:transparent;border:0;border-inline-start:1px solid var(--line);cursor:pointer}
.kh-cell:first-child{border-inline-start:0}
.kh-cell:hover{background:var(--surface-3)}
.kh-cv{font:600 var(--fs-h2) var(--font-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
@media (max-width:1000px){
  .kpi-hero{grid-template-columns:1fr;gap:18px}
  .kh-fc{padding-inline-start:0;border-inline-start:0;padding-top:16px;border-top:1px solid var(--line)}
}
@media (max-width:820px){.kh-v{font-size:36px}.kh-cell{min-height:44px}}

/* Overview hero and Decide table, matched to the agreed design. */
.ov-stack{display:flex;flex-direction:column;gap:var(--sp-6)}
.ov-sec{min-width:0}
.ov-sec>.sec-h:first-child{margin-top:0}
/* Overview decision band (Figma 23:2). The month in one breath on the left —
   headline, the paragraph that qualifies it, the status spine and what moved —
   and the scoreboard on the right: plant health as a ring, then the three
   numbers a manager checks before acting on any of it. */
/* The band. Built for the Overview, now the one dark card every level-
   summary uses — Area (26:724) and Data quality (29:685) draw the same
   object: eyebrow, heading, a paragraph, then a ring at the right. */
.ov-hero,.band,.pv,.r2g{background:var(--band);border:1px solid var(--band-line);border-radius:var(--r-lg);color:var(--band-ink)}
.band{padding:28px 30px}
.band .ovh-lead{font:600 var(--fs-h1)/32px var(--font-ui);letter-spacing:-1px;max-width:none}
.band .ovh-body{font:400 var(--fs-body)/20px var(--font-body);max-width:72ch}
.band-row{margin-top:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* The decision band follows the theme. In light mode it is a light card —
   surfaces, ink and hairlines from the page — with its status colours as
   they are; in dark mode it keeps the dark band. The login, the tooltip, the
   toast and the KPI map stage still use --band directly and stay dark. */
:root:not([data-theme="dark"]) .ov-hero,:root:not([data-theme="dark"]) .band{--band:var(--surface);--band-2:var(--surface-2);--band-ink:var(--ink);--band-ink-2:var(--ink-2);--band-line:var(--line);
  --band-glass:rgba(17,24,32,.04);--band-glass-2:rgba(17,24,32,.08);--band-track:var(--surface-3)}
:root:not([data-theme="dark"]) .band .ovh-delta.up{background:var(--good-bg)}
:root:not([data-theme="dark"]) .band .ovh-delta.down{background:var(--crit-bg)}
/* The Overview's decision card: the page's main view, floating on a red
   shadow in both themes. Light mode is a soft grey card with a white top
   edge; dark mode keeps the dark band colour with a same-tone gradient. Both
   carry a large faint ring behind the content, a 36px headline, and the
   plant-health ring and stat tiles as raised cards on it. */
.ov-hero{position:relative;overflow:hidden;isolation:isolate;padding:32px 34px}
.ov-hero::after,.pv::after,.r2g::after{content:"";position:absolute;z-index:-1;width:560px;height:560px;inset-inline-end:-150px;top:-210px;border-radius:50%;border:64px solid var(--ov-motif,rgba(255,255,255,.035));pointer-events:none}
.ov-hero .ovh-lead{font-size:36px;line-height:42px;letter-spacing:-1.6px;max-width:20ch}
.ov-hero .ovh-ring,.ov-hero .ovh-tile{transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
:root:not([data-theme="dark"]) .ov-hero,:root:not([data-theme="dark"]) .pv,:root:not([data-theme="dark"]) .r2g{--band:#EEF1F4;--band-2:rgba(255,255,255,.7);--band-ink:var(--ink);--band-ink-2:var(--ink-2);--band-line:rgba(17,24,32,.10);
  --band-glass:rgba(255,255,255,.65);--band-glass-2:rgba(255,255,255,.9);--band-track:var(--surface-3);--ov-motif:rgba(17,24,32,.035);
  border:1px solid rgba(255,255,255,.9);border-bottom-color:rgba(17,24,32,.06);
  background:linear-gradient(155deg,#F8F9FB 0%,#EDF0F3 55%,#E2E7EC 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(17,24,32,.06),0 10px 20px -10px rgba(17,24,32,.10),0 12px 32px -6px rgba(17,24,32,.12),0 40px 90px -16px rgba(17,24,32,.26)}
:root:not([data-theme="dark"]) .ov-hero .ovh-ring,:root:not([data-theme="dark"]) .ov-hero .ovh-tile{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(17,24,32,.06),0 12px 28px -16px rgba(17,24,32,.35)}
:root:not([data-theme="dark"]) .ov-hero .ovh-ring:hover,:root:not([data-theme="dark"]) .ov-hero .ovh-tile:hover{background:var(--surface);box-shadow:0 1px 2px rgba(17,24,32,.06),0 18px 34px -16px rgba(17,24,32,.42)}
:root:not([data-theme="dark"]) .ov-hero .ovh-delta.up{color:var(--good);background:var(--good-bg)}
:root:not([data-theme="dark"]) .ov-hero .ovh-delta.down{color:var(--crit-text);background:var(--crit-bg)}
:root:not([data-theme="dark"]) .ov-hero .kpai-sum{border-color:rgba(17,24,32,.08);box-shadow:0 1px 2px rgba(17,24,32,.04)}
:root[data-theme="dark"] .ov-hero,:root[data-theme="dark"] .pv,:root[data-theme="dark"] .r2g{border-color:rgba(255,255,255,.08);background:linear-gradient(155deg,#18242F 0%,#0F1720 58%,#0B1118 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 20px -10px rgba(0,0,0,.55),0 12px 32px -6px rgba(255,255,255,.10),0 40px 90px -16px rgba(255,255,255,.16)}
:root[data-theme="dark"] .ov-hero .ovh-ring,:root[data-theme="dark"] .ov-hero .ovh-tile{box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 28px -16px rgba(0,0,0,.7)}
:root[data-theme="dark"] .ov-hero .ovh-ring:hover,:root[data-theme="dark"] .ov-hero .ovh-tile:hover{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 34px -16px rgba(0,0,0,.8)}
.band .btn{background:var(--band-glass);border-color:var(--band-line);color:var(--band-ink)}
.band .btn:hover{background:var(--band-glass-2)}
.band-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:var(--r-sm);color:var(--band-ink-2);font:400 var(--fs-label)/16px var(--font-body);border:0;background:none;cursor:pointer}
.band-chip:hover{background:var(--band-glass);color:var(--band-ink)}
.band-chip svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.ovh-tiles.row{flex-direction:row;margin-top:20px}
.ovh-tiles.row .ovh-tile{flex:1 1 0;min-width:0}
.ovh-tile .v.good{color:var(--good)}.ovh-tile .v.warn{color:var(--warn)}.ovh-tile .v.crit{color:var(--crit)}
@media (max-width:760px){.ovh-tiles.row{flex-wrap:wrap}.ovh-tiles.row .ovh-tile{flex-basis:calc(50% - 6px)}}
.ovh-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start}
.ovh-main{min-width:0}
.ovh-eyebrow{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--band-ink-2)}
/* The one hero number this screen spends --fs-display-l on is the sentence,
   not a figure: the counts are in the spine directly beneath it. */
.ovh-lead{margin:10px 0 0;font:600 var(--fs-display-l)/38px var(--font-ui);letter-spacing:-1.5px;color:var(--band-ink);max-width:22ch}
.ovh-body{margin:14px 0 0;font:400 var(--fs-label)/20px var(--font-body);color:var(--band-ink-2);max-width:62ch}

/* What moved since last month. Each chip is a link to that KPI, because the
   next question after "Scrap moved" is always "by how much". */
.ovh-moved{margin-top:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ovh-moved-l{font:400 var(--fs-caption)/14px var(--font-body);color:var(--band-ink-2);margin-inline-end:2px}
.ovh-mv{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--r-full);
  background:var(--band-glass);color:var(--band-ink);font:400 var(--fs-caption)/14px var(--font-body);cursor:pointer;border:0}
.ovh-mv:hover{background:var(--band-glass-2)}
.ovh-mv i{font-style:normal;font-size:9px}
.ovh-mv.up i{color:var(--good)}
.ovh-mv.down i{color:var(--crit)}

/* The scoreboard: ring beside a column of three. */
.ovh-side{display:grid;grid-template-columns:auto 200px;gap:12px;align-items:stretch}
.ovh-ring{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 22px;border-radius:var(--r);
  background:var(--band-2);border:0;cursor:pointer;color:inherit}
.ovh-ring-l{font:600 var(--fs-caption)/14px var(--font-body);letter-spacing:0;color:var(--band-ink-2)}
.ovh-ring-d{font:400 var(--fs-caption)/14px var(--font-body);color:var(--band-ink-2)}
.ovh-tiles{display:flex;flex-direction:column;gap:12px}
.ovh-tile{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  padding:14px 16px;border-radius:var(--r);background:var(--band-2);border:0;cursor:pointer;text-align:start;color:inherit}
.ovh-tile:hover{background:var(--band-glass-2)}
.ovh-tile .l{font:400 var(--fs-caption)/14px var(--font-body);color:var(--band-ink-2)}
.ovh-tile .v{font:500 var(--fs-display-l)/36px var(--font-mono);color:var(--band-ink);font-variant-numeric:tabular-nums}
.ovh-tile .d{font:400 var(--fs-caption)/14px var(--font-body);color:var(--band-ink-2);opacity:.8}
.ovh-delta{font:400 var(--fs-caption)/14px var(--font-mono);padding:2px 8px;border-radius:var(--r-full);white-space:nowrap}
.ovh-delta.up{color:var(--good);background:rgba(26,143,90,.18)}
.ovh-delta.down{color:var(--crit);background:rgba(217,48,37,.20)}
.ovh-spine{margin-top:22px;padding-top:18px;border-top:1px solid var(--band-line)}
.ovh-bar{display:flex;gap:3px;height:12px}
.ovh-bar i{display:block;border-radius:2px}
.ovh-bar i.good{background:var(--good)}
.ovh-bar i.warn{background:var(--warn)}
.ovh-bar i.crit{background:var(--crit)}
.ovh-legend{display:grid;gap:3px;margin-top:10px}
.ovh-c{display:flex;align-items:baseline;gap:7px;font:400 var(--fs-label)/16px var(--font-body);color:var(--band-ink-2);min-width:0}
.ovh-c b{font:500 var(--fs-h3)/20px var(--font-mono);color:var(--band-ink);font-variant-numeric:tabular-nums}
.ovh-c>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.decide .name b{font:600 var(--fs-body) var(--font-ui)}
.decide .name small{display:block;margin-top:1px;font-size:var(--fs-caption);color:var(--muted)}
.decide .dv{font-family:var(--font-mono);font-size:var(--fs-h3);font-weight:600}
.decide .dg{font-family:var(--font-mono);font-size:13px;font-weight:600}
.decide .dg.crit{color:var(--crit-text)}.decide .dg.warn{color:var(--warn-text)}.decide .dg.good{color:var(--good-text)}
.decide .dwhy{max-width:260px;font-size:var(--fs-label);color:var(--ink-2)}
.decide .ddo{max-width:260px;font-size:var(--fs-label);color:var(--ink)}
.decide .dact{width:1%;white-space:nowrap}
/* The Decide table refilling after a filter change. Fading the body in makes
   it read as the same table being narrowed rather than a different one
   arriving. It is opacity only: transform on a table-row-group is not
   reliably honoured. Runs on a filter change, not on every re-render. */
@keyframes decideRefilter{from{opacity:0}to{opacity:1}}
.decide tbody.is-refiltered{animation:decideRefilter .18s var(--ease)}
@media (prefers-reduced-motion:reduce){.decide tbody.is-refiltered{animation:none}}
/* 1024 (36:899): the scoreboard drops under the sentence — ring at the left,
   the three tiles in a row beside it. */
@media (max-width:1100px){.ovh-grid{grid-template-columns:minmax(0,1fr);gap:24px}.ovh-side{grid-template-columns:auto minmax(0,1fr)}.ovh-tiles{flex-direction:row}}
@media (max-width:900px){.ov-hero{padding:20px}.ovh-lead{font-size:var(--fs-h1);line-height:32px;letter-spacing:-1px}.ovh-side{grid-template-columns:minmax(0,1fr)}.ovh-tiles{flex-direction:row}.ovh-spine{margin-top:16px;padding-top:14px}}
/* Below this the segments are too narrow to hang a label under, so the
   legend stops tracking them and simply wraps. */
@media (max-width:760px){.ovh-legend{display:flex;flex-wrap:wrap;gap:var(--sp-5)}}

/* Explore — area cards and tree rows as the design draws them. */
.area-card{display:block;padding:20px;text-align:start;width:100%}
.area-card .a-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.area-card .a-name{font:600 var(--fs-body)/20px var(--font-body);display:flex;align-items:center;gap:8px;min-width:0;padding:0}
.area-card .a-name svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.area-card .a-st{width:9px;height:9px;border-radius:50%;flex:none}
.area-card .a-st.good{background:var(--good)}.area-card .a-st.warn{background:var(--warn)}.area-card .a-st.crit{background:var(--crit)}
/* The score with its own label beside it, so the number is never a bare
   figure the reader has to infer the meaning of. */
.area-card .a-score{display:flex;align-items:baseline;gap:8px;margin-top:12px;
  font:500 var(--fs-display-l)/36px var(--font-mono);color:var(--ink);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.area-card .a-score span{font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted);letter-spacing:0}
.area-card .a-bar{height:4px;border-radius:2px;background:var(--surface-3);margin-top:10px;overflow:hidden}
.area-card .a-bar i{display:block;height:100%;border-radius:2px}
.area-card .a-bar i.good{background:var(--good)}.area-card .a-bar i.warn{background:var(--warn)}.area-card .a-bar i.crit{background:var(--crit)}
/* One dot per KPI, in area order. The counts below say how many are off;
   this says whether that is one bad KPI or an evenly mediocre area. */
.area-card .a-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.area-card .a-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);flex:none}
.area-card .a-dots i.good{background:var(--good)}
.area-card .a-dots i.warn{background:var(--warn)}
.area-card .a-dots i.crit{background:var(--crit)}
.area-card .a-meta{margin-top:10px;font:400 var(--fs-label)/16px var(--font-body);color:var(--muted);border:0;padding:0}
/* Overview's variant. The ring already states the score, so the card carries
   the name and what is still off and nothing else — it used to say the same
   thing four times over (ring, a dash per KPI, "0/4 on target", "4 off"). */
/* .a-compact — the ring-and-two-lines variant the Overview used to draw —
   is gone: both pages show the same Area Card now, which is what the design
   file has and one fewer thing to keep in step. */
.t-st{width:8px;height:8px;border-radius:50%;flex:none}
.t-st.good{background:var(--good)}.t-st.warn{background:var(--warn)}.t-st.crit{background:var(--crit)}
.tnode.area{gap:8px;padding-inline-start:4px}
.t-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.t-nm{min-width:0;font:500 13px/16px var(--font-ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The area's KPIs by status, in proportion: red first, so a glance down the tree reads as a ranking. */
.t-mix{display:flex;gap:2px;height:3px;max-width:112px;border-radius:2px;overflow:hidden;transform-origin:left center}
[dir="rtl"] .t-mix{transform-origin:right center}
.t-mix i{display:block;height:100%;border-radius:2px}
.t-mix .good{background:var(--good)}.t-mix .warn{background:var(--warn)}.t-mix .crit{background:var(--crit)}.t-mix .none{background:var(--line-2)}
.t-ok{font-size:var(--fs-caption);color:var(--muted);white-space:nowrap}
.t-ct{font:500 11.5px var(--font-mono);white-space:nowrap}

/* Reports — a form beside the archive, as the design has it. The five
   selectable type cards became one select: choosing among five things is a
   choice, not five pieces of content, and it left the page ragged. */
.rep-two{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start}
.rep-gen{padding:24px 26px;display:flex;flex-direction:column;gap:16px}
.rep-gen h2{margin:0;font:600 var(--fs-h2) var(--font-ui)}
.rep-f{display:flex;flex-direction:column;gap:6px}
.rep-f>span{font:600 11px var(--font-ui);letter-spacing:0;color:var(--muted)}
.rep-f .sel{width:100%;height:40px;padding-block:0;padding-inline:12px 32px;font-size:var(--fs-body);line-height:20px}
.rep-f .seg{width:100%}
.rep-f .seg button{flex:1;padding:9px 0}
.rep-go{width:100%;justify-content:center;padding:12px 0;font-size:var(--fs-body)}
.rep-note{margin:0;font-size:var(--fs-label);color:var(--muted);line-height:1.5;border-top:1px solid var(--line);padding-top:14px}
.rep-arch{padding:0;overflow:hidden}
.rep-ah{display:flex;align-items:center;gap:10px;padding:20px 22px 12px}
.rep-ah h2{margin:0;font:600 var(--fs-h2) var(--font-ui);flex:1}
.rep-list{max-height:62vh;overflow:auto}
/* Import history (29:1086): a list, not a table — a file icon, the name, one
   line of what happened to it. */
.imp-list{display:flex;flex-direction:column}
.imp-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line)}
.imp-ic{width:28px;height:28px;border-radius:var(--r-sm);background:var(--surface-3);display:grid;place-items:center;flex:none}
.imp-ic svg{width:15px;height:15px;stroke:var(--ink-2);fill:none;stroke-width:1.8}
.imp-nm{flex:1;min-width:0}
.imp-nm b{display:block;font:500 var(--fs-body)/20px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-nm small{display:block;font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-row{display:flex;align-items:center;gap:14px;padding:12px 22px;border-top:1px solid var(--line)}
.rep-row:hover{background:var(--surface-2)}
.rep-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
  font:600 12px var(--font-mono);background:var(--surface-3);color:var(--ink-2)}
.rep-ic.pdf{background:var(--crit-bg);color:var(--crit-text)}
.rep-ic.xls{background:var(--good-bg);color:var(--good-text)}
.rep-ic.doc{background:var(--accent-soft);color:var(--accent)}
.rep-nm{flex:1;min-width:0}
.rep-nm b{display:block;font:600 13.5px var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-nm small{display:block;margin-top:1px;font-size:var(--fs-caption);color:var(--muted)}
.rep-acts{display:flex;gap:6px;flex:none}
@media (max-width:1000px){.rep-two{grid-template-columns:1fr}}

/* An assignment is an action with a deadline and a reporting line behind it;
   the chip says which, so a reader can tell a commitment from a note. */
.chip.assigned{background:var(--accent-soft);color:var(--accent)}
.act-row .m .chip{margin-inline-end:4px}

/* ---- Departments: the scorecard table, and the correlation list ---- */
.dept-tbl td{vertical-align:middle}
.dept-tbl tr.click{cursor:pointer}
.dept-tbl tr.click:hover{background:var(--surface-2)}
.dept-tbl tr.on{background:var(--surface-2)}
.dept-tbl .chev{width:14px;height:14px;transition:transform .15s;color:var(--muted)}
.dept-tbl .chev.down{transform:rotate(90deg)}
.ds-cell{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:74px}
.ds-v{font:400 13px/18px var(--font-mono);font-variant-numeric:tabular-nums}
.ds-cell .bar{width:100%;min-width:64px}
/* A healthy sub-score doesn't need to say so twice — the number and its bar
   were both painted green for the same "good" band, on top of the row's own
   Overall chip a third time. Only the two states that actually need a look
   (warn/crit) keep the colour here; the same principle the KPI grid uses. */
.ds-none{font-size:10px;color:var(--muted)}
.dept-tbl tr.det td{background:var(--surface-2);padding:16px 14px}
.dept-det{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.6fr);gap:24px;align-items:start}
.dept-det h4{font-size:var(--fs-caption);letter-spacing:0;color:var(--muted);margin:0 0 10px}
.kpi-mini{display:flex;flex-direction:column;gap:2px}
.kmini{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;text-decoration:none;color:var(--ink)}
.kmini:hover{background:var(--surface-3)}
.kmini .knm{flex:1;font-size:12.5px}
.kmini .kdq{font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:860px){.dept-det{grid-template-columns:1fr}}

/* ===================================================================
   GLASS LAYER
   -------------------------------------------------------------------
   Extends the existing token system; it does not replace it. Every
   value below is derived from tokens already defined above.

   The rule this layer obeys: transparency falls as information density
   rises. Backdrop blur is spent only where something actually sits
   behind the surface — overlays, sticky bars, floating controls. A card
   on a flat page background gains nothing from a blur but still pays
   the GPU for it, so cards get depth from gradient, border and shadow
   instead. Tables, inputs and long text stay fully opaque, because
   transparency behind a column of numbers is a readability bug.
   =================================================================== */

/* ---- Elevated: things that float over the page ----
   The modal, drawer, scrim and palette now carry the glass treatment in their
   own rule up in their section, rather than having it reapplied here over a
   base value that never rendered. */

/* ---- Raised: sticky chrome ---- the topbar and rail carry their glass
   treatment in their own rule now, for the same reason the overlays above do. */

/* ---- Cards, buttons, the segmented control and nav items all now carry
   their full rule (base + this layer's extension) in one place, up in
   §controls/§cards/§shell — this block used to redeclare each of them a
   second time here, same selector, later in the cascade, which is what
   made the primary-button fill vanish once already (see git history on
   .btn.primary below). Nothing rendered here changes; it just no longer
   depends on two rules for the same selector agreeing by accident. ---- */
/* The sheen-over-gradient rule that used to sit here is gone: the primary
   button is a flat --brand fill now, set once in §controls. It is the last
   piece of the glass layer, and the one that twice made the fill vanish by
   disagreeing with that rule — a `background-image` here over a `background`
   shorthand there. One rule owns the fill. */
.nav-item:hover:not(.on){transform:translateX(2px)}

/* Anyone who has asked for less motion gets none of it. */
@media (prefers-reduced-motion:reduce){
  .card,.btn,.nav-item,.chips .chip,.seg button{transition:none}
  .card.stat:hover,.card.click:hover,.nav-item:hover:not(.on){transform:none}
}
/* A browser without backdrop-filter gets solid surfaces, not see-through ones. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal,.drawer,.palette .box{background:var(--surface)}
  .topbar{background:var(--surface)}
  .rail{background:var(--rail)}
  .seg{background:var(--surface-3)}
}

/* ---- Department leaderboard: rank, podium, movement ---- */
.rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  font-size:var(--fs-label);font-weight:600;background:var(--line-2);color:var(--ink);font-variant-numeric:tabular-nums}
/* Flat metal, not gradients (28:1021): gold, silver, bronze as three solid
   circles. */
.rank.r1{background:#E8B84A;color:#4A3608}
.rank.r2{background:#DDE3E9;color:#333A44}
.rank.r3{background:#D9925A;color:#3E2510}
.trend{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.trend.up{color:var(--good-text)}
.trend.down{color:var(--crit-text)}
.trend.flat{color:var(--muted)}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
/* Podium (28:1021). Three flat cards; the winner's card stands a little
   taller. The rank is a solid circle, the score a mono number, the meta line
   says how much of the score is evidence and which way it moved. */
.pod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:border-color var(--dur-card) var(--ease),box-shadow var(--dur-card) var(--ease)}
.pod:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.pod-r{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:#DDE3E9;color:#333A44;font:500 var(--fs-label)/1 var(--font-mono);margin-bottom:6px}
.pod-n{font:600 var(--fs-body)/20px var(--font-body);color:var(--ink)}
.pod-v{font:500 var(--fs-h1)/32px var(--font-mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.pod-m{font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted)}
.pod-m .up{color:var(--good)}.pod-m .down{color:var(--crit)}
.pod.p1{padding-top:26px;padding-bottom:26px}
.pod.p1 .pod-r{background:#E8B84A;color:#4A3608;width:32px;height:32px}
.pod.p1 .pod-v{font:500 var(--fs-display-l)/36px var(--font-mono)}
.pod.p3 .pod-r{background:#D9925A;color:#3E2510}
@media (max-width:700px){.podium{grid-template-columns:1fr}.pod.p1{padding-top:16px}}

/* ---- Correlation explorer ----
   .mp-row is shared with the KPI Mapping node panel, which never gave it a
   layout — the label and value only ever separated here because this file
   used to have a second, since-lost rule. Fixing the shared selector fixes
   both call sites instead of only papering over this one. */
.mp-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:4px 0}
.corr-grid{display:grid;grid-template-columns:minmax(320px,1.6fr) minmax(260px,1fr);gap:24px;align-items:start}
.corr-plot svg{width:100%;height:auto;display:block}
.corr-read .mp-row{border-top:1px solid var(--line);color:var(--ink);padding:9px 0}
.corr-read .mp-row span{color:var(--ink-2)}
.corr-read .mp-row b{color:var(--ink);text-align:end}
.corr-pair{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:24px;align-items:start}
.corr-pair>.card{margin-top:0}
@media (max-width:1100px){.corr-pair{grid-template-columns:minmax(0,1fr)}}
.cr-hero{display:none}
.cr-big{font-size:var(--fs-display);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.cr-lbl{font-size:11px;font-weight:600;letter-spacing:0;color:var(--muted);margin-bottom:8px}
.cr-hero .cr-lbl{margin-bottom:0;margin-top:4px}
.cr-meas{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cr-meas .mono{color:var(--ink-2);word-break:break-word}
@media (max-width:820px){.corr-grid{grid-template-columns:1fr}}

/* ---- "How the KPIs move together" table: not dense — this is a page
   people scan for the strongest links, not a spreadsheet, so rows get more
   room than a regular .tbl, plus a magnitude bar so strength reads at a
   glance instead of requiring someone to parse three decimal columns. ---- */
.tbl.corr-tbl td{padding:16px 14px}
.tbl.corr-tbl th{padding:12px 14px}
.corr-cell{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.corr-bar{width:56px;height:3px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.corr-bar i{display:block;height:100%;border-radius:99px;background:var(--line-2)}
.corr-bar i.on{background:var(--brand)}

/* ---- Customize dashboard ---- */
.dash-list{display:flex;flex-direction:column;gap:6px}
.dash-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);
  transition:opacity .16s var(--ease),background .16s var(--ease)}
.dash-row.off{opacity:.5}
.dash-row .dash-n{flex:1;font-size:13px;font-weight:500}
.dash-row .btn{padding:3px 8px;min-width:26px;justify-content:center}
/* The chosen tab's chip. Its own colours rather than .btn.primary, which the
   glass pass left with a transparent background and white text. */
.dash-row .btn.dash-first{background:var(--brand-soft);border-color:transparent;color:var(--brand);font-weight:600;min-width:0}
.dash-row .btn[data-dfirst]{font-size:var(--fs-caption)}
.dash-row .btn[data-dfirst]:disabled:not(.dash-first){opacity:.35}

/* ---- KPI Mapping v2: a rail to choose with, five planes to read ----
   The previous map drew every node at once and could not be followed. This
   one shows one department, which is the whole reason it is legible. Text
   that matters for accessibility lives in the rail and the panel, both real
   HTML; the canvas carries the drawing. */
.map2{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:start}
.map2-rail{display:flex;flex-direction:column;gap:5px;padding:14px 12px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line)}
.m2-lbl{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--muted);margin-bottom:6px;padding:0 4px}
.m2-dept{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;border:1px solid transparent;
  background:var(--surface-2);color:var(--ink);cursor:pointer;text-align:start;width:100%;
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .12s var(--ease)}
.m2-dept:hover:not(.on){background:var(--surface-3)}
.m2-dept.on{background:var(--brand);color:var(--brand-ink)}
.m2-dept .m2-n{flex:1;font:500 var(--fs-body)/20px var(--font-body)}
.m2-dept .m2-c{font:400 var(--fs-label)/16px var(--font-mono);opacity:.7;font-variant-numeric:tabular-nums}
/* The stage is the band, flat (28:1696) — not a vignette. */
.map2-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;height:min(70vh,660px);background:var(--band)}
.kmap2{position:absolute;inset:0;width:100%;height:100%;display:block}
.map2-legend{position:absolute;inset-inline-start:16px;bottom:14px;display:flex;gap:14px;
  font:400 var(--fs-caption)/14px var(--font-body);color:var(--band-ink-2)}
.map2-legend .lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.map2-legend .lg i{width:8px;height:8px;border-radius:50%;display:inline-block}
/* Flat, not frosted (Figma 28:1696). The panel sits over a canvas of thin
   lines and small labels, and a 24px blur of that canvas is visual noise
   directly behind text you have to read. A solid panel with one hairline
   reads at a glance and costs nothing to composite. */
.map2-panel{position:absolute;inset-inline-end:14px;top:14px;width:min(310px,calc(100% - 28px));
  max-height:calc(100% - 28px);overflow:auto;padding:16px;border-radius:var(--r);color:var(--band-ink);
  background:var(--band-2);border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-3)}
/* The tier this node belongs to, in that tier's own colour — the same five
   --map-* colours the canvas draws the planes with, so the panel and the
   stage agree without the reader having to match them up. The colour is set
   inline from JS; the type belongs here. */
.map2-panel .mp-tier{font:600 var(--fs-caption)/14px var(--font-body);letter-spacing:0}
.map2-panel h3{margin:4px 0 10px;font:600 var(--fs-h3)/22px var(--font-body);color:var(--band-ink)}
/* A label introducing a note further down the panel. */
.map2-panel .mp-sec{margin-top:12px;font:600 var(--fs-caption)/14px var(--font-body);letter-spacing:0;color:var(--band-ink-2)}
.map2-panel .note{color:var(--band-ink-2);font:400 var(--fs-label)/18px var(--font-body)}
.map2-panel .mono{color:var(--band-ink)}
.map2-panel .btn{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:var(--band-ink)}
.map2-panel .btn:hover{background:rgba(255,255,255,.18)}
.map2-panel .mp-h .btn{background:none;border-color:transparent;padding:4px}
.map2-panel .mp-h .btn:hover{background:rgba(255,255,255,.12)}
@media (max-width:900px){
  .map2{grid-template-columns:1fr}
  .map2-rail{flex-direction:row;flex-wrap:wrap;gap:6px}
  .map2-rail .m2-lbl,.map2-rail .inp{display:none}
  .m2-dept{width:auto}
  .map2-stage{height:60vh}
  .map2-legend{inset-inline-end:16px;flex-wrap:wrap;gap:4px 12px}
  .map2-panel{inset-inline-end:8px;top:auto;bottom:56px;width:calc(100% - 16px);max-height:46%}
}

/* ---- The opening ---- */
.intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:radial-gradient(120% 120% at 50% 42%,#121826 0%,#080B12 62%,#140A0D 100%);
  transition:opacity .48s cubic-bezier(.4,0,.2,1),transform .48s cubic-bezier(.4,0,.2,1)}
.intro.out{opacity:0;transform:scale(1.04);pointer-events:none}
.intro-core{position:relative;width:120px;height:120px}
.intro-ring{position:absolute;inset:0;width:120px;height:120px;transform:rotate(-90deg)}
.intro-ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.ir-track{stroke:rgba(255,255,255,.10)}
.ir-arc{stroke:#C00000;stroke-dasharray:327;stroke-dashoffset:327;
  filter:drop-shadow(0 0 10px rgba(192,0,0,.6));
  animation:ir-draw .72s cubic-bezier(.4,0,.2,1) .12s forwards}
@keyframes ir-draw{to{stroke-dashoffset:0}}
.intro-mark{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;background:#C00000;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  animation:im-in .5s var(--ease) .62s forwards}
@keyframes im-in{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.intro-word{margin-top:26px;font-size:15px;font-weight:600;color:#fff;letter-spacing:.42em;opacity:0;
  animation:iw-in .6s cubic-bezier(.4,0,.2,1) .92s forwards}
@keyframes iw-in{from{opacity:0;letter-spacing:.42em}to{opacity:1;letter-spacing:.14em}}
.intro-sub{margin-top:9px;font-size:9px;font-weight:600;color:#8A95A3;letter-spacing:.3em;opacity:0;
  animation:is-in .5s cubic-bezier(.4,0,.2,1) 1.12s forwards}
@keyframes is-in{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ---- Ask: the navigator inside the command palette ---- */
.palette .box input{font-size:15px}
.palette .it .t .nt{display:block;font-size:10.5px;color:var(--accent);margin-top:2px}
.palette .grp{position:sticky;top:0;background:inherit;z-index:1}
.pal-foot{padding:8px 14px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);
  display:flex;gap:10px;justify-content:flex-end}
@media (max-width:600px){.pal-foot{display:none}}

/* KP-AI wordmark in the palette footer */
.pal-brand{font-weight:600;letter-spacing:.06em;color:var(--brand);font-size:10.5px}

/* KP-AI computed answer, above the destinations */
.pal-ans{padding:14px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--accent-soft),transparent)}
.pa-t{font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink)}
.pa-d{margin-top:5px;font-size:var(--fs-label);color:var(--ink-2);line-height:1.5}

/* ---- The KP-AI ball: a standing offer of help ----
   The Controware mark on a surface disc, an AI tag, and a dot that is green
   while the local language model is loaded. It drops in once, then floats;
   it can be dragged, and it remembers where it was left. Neutral elevation
   only, a static dot, and every motion on transform or opacity. */
.kpai-ball{position:fixed;inset-inline-end:22px;bottom:22px;z-index:60;
  width:58px;height:58px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--brand);
  box-shadow:var(--shadow-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
.kpai-ball:hover{box-shadow:var(--shadow-3)}
.kpai-ball:active{transform:translateY(0) scale(.98)}
.kb-mark{width:34px;height:34px;display:block}
.kb-mark img{width:100%;height:100%;object-fit:contain;display:block}
.kb-ai{position:absolute;bottom:-4px;inset-inline-end:-4px;padding:3px 6px;border-radius:99px;
  font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.08em;line-height:1;
  background:var(--brand);color:var(--brand-ink);border:2px solid var(--surface)}
.kb-dot{position:absolute;top:1px;inset-inline-end:1px;width:12px;height:12px;border-radius:50%;
  background:var(--line-2);border:2px solid var(--surface)}
.kpai-ball.online .kb-dot{background:var(--good)}
.kpai-ball.dragging{transform:scale(1.1);cursor:grabbing;box-shadow:var(--shadow-3);transition:none}
.kpai-ball.dragging .kb-tip{opacity:0}
.kpai-ball.at-start .kb-tip{inset-inline-end:auto;inset-inline-start:62px;transform:translateX(-8px)}
[dir="rtl"] .kpai-ball.at-start .kb-tip{transform:translateX(8px)}
.kpai-ball.at-start:hover .kb-tip,.kpai-ball.at-start:focus-visible .kb-tip{transform:translateX(0)}
.kb-tip{position:absolute;inset-inline-end:62px;bottom:4px;min-width:210px;max-width:250px;
  padding:10px 13px;border-radius:12px;text-align:start;pointer-events:none;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);color:var(--ink);
  opacity:0;transform:translateX(8px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
[dir="rtl"] .kb-tip{transform:translateX(-8px)}
.kb-tip b{display:block;font-size:12.5px;margin-bottom:2px}
.kb-tip span{display:block;font-size:var(--fs-caption);color:var(--ink-2);line-height:1.45}
.kpai-ball:hover .kb-tip,.kpai-ball:focus-visible .kb-tip{opacity:1;transform:translateX(0)}
/* The greeting: one bubble after the ball lands, once per session. */
.kb-greet{position:fixed;z-index:61;max-width:260px;padding:11px 14px;border-radius:var(--r-lg);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-3);color:var(--ink);
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.kb-greet.show{opacity:1;transform:translateY(0) scale(1)}
.kb-greet b{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.kb-greet span{display:block;font-size:var(--fs-caption);color:var(--ink-2);line-height:1.45}
.kb-greet::after{content:"";position:absolute;bottom:-6px;inset-inline-end:22px;width:12px;height:12px;background:inherit;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
@media (max-width:760px){.kpai-ball{bottom:76px;inset-inline-end:14px;width:46px;height:46px}.kb-mark{width:26px;height:26px}.kb-tip{display:none}}
@media (prefers-reduced-motion:no-preference){
    .kpai-ball.arrive{animation:kb-arrive .6s var(--ease-out) both}
  @keyframes kb-arrive{0%{transform:translateY(-48px) scale(.9);opacity:0}70%{transform:translateY(0) scale(1.03,.97);opacity:1}100%{transform:none;opacity:1}}
  .kpai-ball.idle:hover,.kpai-ball.dragging{animation:none}
  .kpc-dots i{animation:kpc-dot 1.2s infinite}
  .kpc-dots i:nth-child(2){animation-delay:.2s}.kpc-dots i:nth-child(3){animation-delay:.4s}
  @keyframes kpc-dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
}
@media (prefers-reduced-motion:reduce){.kpai-ball,.kb-tip,.kb-greet,.kpc{transition:none}.kpai-ball:hover{transform:none}}

/* KP-AI written summary on the band: under the computed sentences, only when
   the local model wrote one and every number in it checked out. */
.ov-hero .kpai-sum{margin-top:16px;padding:14px 16px 12px;border:1px solid var(--band-line);border-radius:var(--r-lg);background:var(--band-glass);max-width:80ch}
.ov-hero .kpai-sum-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:10px}
.ov-hero .kpai-sum-h b{font:600 13px/18px var(--font-ui);color:var(--band-ink)}
.ks-mark{width:20px;height:20px;object-fit:contain}
.ks-per{font-size:var(--fs-caption);color:var(--band-ink-2)}
.ks-ok{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:99px;background:var(--good-bg);color:var(--good);font:600 var(--fs-caption)/16px var(--font-body)}
.ks-ok svg{width:11px;height:11px}
.ks-ask{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border:1px solid var(--band-line);border-radius:99px;background:transparent;color:var(--band-ink);font:600 var(--fs-caption) var(--font-body);cursor:pointer;
  transition:background-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.ks-ask svg{width:12px;height:12px;transition:transform var(--dur-micro) var(--ease-out)}
.ks-ask:hover{background:var(--band-glass-2)}
.ks-ask:hover svg{transform:translateX(2px)}
[dir="rtl"] .ks-ask svg{transform:scaleX(-1)}
.ks-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ks-list li{position:relative;padding-inline-start:16px;font-size:14px;line-height:21px;color:var(--band-ink)}
.ks-list li::before{content:"";position:absolute;inset-inline-start:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--band-ink-2);opacity:.6}
.ks-list b{font-weight:600;font-family:var(--font-mono);font-size:13px}
.ks-k{color:inherit;font-weight:600;text-decoration:none;border-bottom:1px dotted currentColor}
.ks-k:hover{color:var(--accent-2);border-bottom-style:solid}
.ks-foot{margin-top:10px;padding-top:8px;border-top:1px solid var(--band-line);font-size:var(--fs-caption);color:var(--band-ink-2)}
.ks-wait{display:flex;flex-direction:column;gap:8px;padding:2px 0 4px}
.ks-wait i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--band-glass) 25%,var(--band-glass-2) 50%,var(--band-glass) 75%);background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){
  .ks-wait i{animation:shimmer 1.2s linear infinite}
  .ks-list li{animation:riseIn 360ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms)}
}

/* ---- KP-AI chat panel: the conversation window the ball opens ----
   A dialog on the surface with the modal's radius and elevation. The person's
   question is a brand bubble at the end; KP-AI's answer is a full-width card
   under its name, with the checks and sources beneath it. */
.kpc{position:fixed;z-index:62;inset-inline-end:22px;bottom:92px;width:min(440px,calc(100vw - 32px));height:min(640px,calc(100vh - 120px));
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.96);transform-origin:bottom right;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
[dir="rtl"] .kpc{transform-origin:bottom left}
.kpc.show{opacity:1;transform:none}
/* Closing: the panel folds back towards the ball it came from, softening
   into a blur on the way out. Faster than the entrance, on ease-in. */
.kpc.closing{opacity:0;transform:translateY(12px) scale(.9);filter:blur(4px);
  transition:opacity 200ms var(--ease-in),transform 200ms var(--ease-in),filter 200ms var(--ease-in)}
.kpc.wide{width:min(760px,calc(100vw - 32px));height:min(82vh,calc(100vh - 120px))}
.kpc-h{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.kpc-h>img{width:26px;height:26px;object-fit:contain}
.kpc-t{flex:1;min-width:0;line-height:1.2}
.kpc-t b{display:block;font-size:14px;font-weight:600}
.kpc-st{display:block;font-size:var(--fs-caption);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpc-st.on::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-inline-end:5px;vertical-align:1px}
.kpc-ib{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.kpc-ib svg{width:17px;height:17px}
.kpc-ib:hover{background:var(--surface-3);color:var(--ink)}
.kpc-ib.sm{width:26px;height:26px}.kpc-ib.sm svg{width:14px;height:14px}
.kpc-m{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
/* Empty state */
.kpc-intro{padding:6px 2px}
.kpc-intro h3{margin:0;font-family:var(--font-body);font-size:16px;line-height:22px;font-weight:600}
.kpc-intro p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.kpc-cards{display:grid;gap:8px;margin-top:14px}
.kpc.wide .kpc-cards{grid-template-columns:1fr 1fr}
.kpc-card{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);text-align:start;cursor:pointer;font:inherit;transition:border-color var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out)}
.kpc-card:hover{border-color:var(--brand);background:var(--surface-2)}
.kpc-card>svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--brand)}
.kpc-card b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.kpc-card span span{display:block;font-size:var(--fs-label);color:var(--ink-2);margin-top:2px;line-height:1.4}
/* Messages */
.kpc-msg{display:flex;flex-direction:column;gap:6px;max-width:100%}
.kpc-msg.me{align-self:flex-end;align-items:flex-end;max-width:85%}
.kpc-who{display:flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-weight:600;letter-spacing:0;color:var(--ink-2)}
.kpc-who img{width:16px;height:16px;object-fit:contain}
.kpc-b{padding:10px 12px;border-radius:var(--r-lg);font-size:13px;line-height:1.55;color:var(--ink)}
.kpc-msg.me .kpc-b{background:var(--brand);color:var(--brand-ink);border-end-end-radius:4px;white-space:pre-wrap}
.kpc-msg.ai .kpc-b{background:var(--surface-2);border:1px solid var(--line);border-start-start-radius:4px}
.kpc-b p{margin:0 0 6px}.kpc-b p:last-child{margin:0}
.kpc-b h4{margin:8px 0 4px;font-size:13px}.kpc-b h4:first-child{margin-top:0}
.kpc-b ul,.kpc-b ol{margin:2px 0 8px;padding-inline-start:20px}.kpc-b li{margin:3px 0}.kpc-b li>ul,.kpc-b li>ol{margin-bottom:2px}
.kpc-b code{font-family:var(--font-mono);font-size:12px;background:var(--surface-3);padding:1px 4px;border-radius:4px}
.kpc-b table{border-collapse:collapse;margin:6px 0;font-size:12px;width:100%}.kpc-b th,.kpc-b td{border:1px solid var(--line);padding:4px 8px;text-align:start}.kpc-b th{background:var(--surface-3);font-weight:600}.kpc-b td{font-variant-numeric:tabular-nums}
.kpc-b a{color:var(--accent-2);font-weight:600;text-decoration:none;border-bottom:1px dotted currentColor}
/* A plan back to green, one card per KPI: the KPI and its gap on top, then
   label and value side by side; data notes quieter, an interim proposal set off. */
.kpc-plan{margin:8px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.kpc-plan[hidden]{display:none}
.kpc-plan-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:7px 10px;font-weight:600;background:var(--surface-3);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.kpc-plan-b{padding:2px 10px}
.kpc-row{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:2px 10px;padding:6px 0;border-top:1px solid var(--line)}
.kpc-row:first-child{border-top:0}
.kpc-k{font-size:var(--fs-caption);font-weight:600;color:var(--ink-2);line-height:1.5}
.kpc-k small{display:block;font-size:var(--fs-caption);font-weight:400;color:var(--muted);line-height:1.35}
.kpc-v{min-width:0;overflow-wrap:anywhere}
.kpc-row.muted .kpc-v{color:var(--ink-2);font-size:12px}
.kpc-row.tip{margin:0 -10px;padding:7px 10px;background:var(--accent-soft);border-top-color:transparent}
.kpc-row.tip .kpc-k{color:var(--accent-2)}
.kpc-gap{display:inline-block;padding:0 6px;border-radius:var(--r-full);font-size:11px;font-weight:600;line-height:1.6;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpc-gap.bad{background:var(--crit-bg);color:var(--crit-text)}
.kpc-gap.good{background:var(--good-bg);color:var(--good-text)}
.kpc-more{display:block;width:100%;margin:2px 0 8px;padding:7px 10px;border:1px dashed var(--line-2);border-radius:var(--r);background:transparent;color:var(--accent-2);font:inherit;font-size:var(--fs-label);font-weight:600;cursor:pointer}
.kpc-more:hover{background:var(--accent-soft)}
@media (max-width:480px){.kpc-row{grid-template-columns:minmax(0,1fr);gap:0}}
.kpc-note{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-label);line-height:1.45;color:var(--warn-text);background:var(--warn-bg)}
.kpc-note svg{width:15px;height:15px;flex:none;margin-top:1px}
.kpc-src{display:flex;flex-wrap:wrap;gap:5px}
.kpc-src a{font-size:var(--fs-caption);font-weight:600;padding:3px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent-2);text-decoration:none}
.kpc-from{font-size:var(--fs-caption);color:var(--ink-2)}
.kpc-from a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.kpc-foot{display:flex;align-items:center;gap:10px}
.kpc-foot .kpc-ib{margin-inline-start:auto}
.kpc-meta{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-caption);color:var(--ink-2)}
.kpc-meta.ok{color:var(--good)}.kpc-meta svg{width:13px;height:13px}
/* Waiting and failing */
.kpc-msg.typing .kpc-b{display:flex;align-items:center;gap:10px;color:var(--ink-2)}
.kpc-dots{display:inline-flex;gap:4px}.kpc-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-2);opacity:.5}
/* The answer as it is written: a blinking caret at its end. */
.kpc-msg.live .kpc-b>:last-child::after,.kpc-msg.live .kpc-b:empty::after{content:"";display:inline-block;width:7px;height:14px;margin-inline-start:3px;vertical-align:-2px;border-radius:1px;background:var(--accent)}
@media (prefers-reduced-motion:no-preference){.kpc-msg.live .kpc-b>:last-child::after,.kpc-msg.live .kpc-b:empty::after{animation:kpcCaret 1s steps(2,start) infinite}@keyframes kpcCaret{to{visibility:hidden}}}
.kpc-msg.err .kpc-b{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-start;background:var(--crit-bg);border-color:transparent}
.kpc-msg.err .kpc-b>svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--crit)}
.kpc-msg.err .kpc-b>span{flex:1;min-width:0}.kpc-msg.err .kpc-b b{display:block;font-weight:600}.kpc-msg.err .d{display:block;font-size:var(--fs-label);color:var(--ink-2);margin-top:2px}
.kpc-msg.err .kpc-b>span{flex-basis:calc(100% - 26px)}
.kpc-msg.err .btn{flex:0 0 auto;margin-inline-start:26px}
/* Follow-ups and the composer */
.kpc-sug{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.kpc-sug:empty{display:none}
.kpc-chip{font-size:var(--fs-label);font-weight:600;padding:5px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-align:start;font-family:inherit;transition:border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.kpc-chip:hover{border-color:var(--brand);color:var(--brand)}
.kpc-f{display:flex;gap:8px;align-items:flex-end;padding:10px 14px 6px;border-top:1px solid var(--line);background:var(--surface-2)}
.kpc-f textarea{flex:1;resize:none;min-height:36px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 11px;font:inherit;font-size:13px;line-height:18px;background:var(--surface);color:var(--ink);max-height:120px}
.kpc-f textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.kpc-f button{width:36px;height:36px;flex:none;border-radius:var(--r-sm);border:0;background:var(--brand);color:var(--brand-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.kpc-f button svg{width:18px;height:18px}
.kpc-f button:hover{background:var(--brand-2)}
.kpc-f button[disabled],.kpc.busy .kpc-f button{opacity:.45;pointer-events:none}
.kpc-hint{padding:0 14px 8px;font-size:var(--fs-caption);color:var(--ink-2);background:var(--surface-2)}
@media (prefers-reduced-motion:no-preference){
  .kpc-msg{animation:kpc-in var(--dur-micro) var(--ease-out) both}
  @keyframes kpc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
/* Phone: the chat is a full-screen sheet, not a floating card. Solid surface,
   the tab bar covered rather than peeking through, the composer above the
   home indicator, 16px in the box so the phone does not zoom into it. */
@media (max-width:760px){
  .kpc,.kpc.wide{inset:0;width:auto;height:auto;max-height:none;border-radius:0;border:0;z-index:64;
    background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;
    padding-top:env(safe-area-inset-top)}
  .kpc.show{opacity:1;transform:none}
  .kpc-h{padding:8px 8px 8px 14px;min-height:56px}
  .kpc-ib{width:40px;height:40px}
  .kpc-ib[aria-label^="Wider"],.kpc-ib[title^="Wider"]{display:none}
  .kpc-m{padding:14px 14px 18px;gap:16px}
  .kpc-b{font-size:15px;line-height:1.55;padding:11px 13px}
  .kpc-sug{padding:0 12px 10px}
  .kpc-chip{padding:8px 12px;font-size:14px}
  .kpc-f{padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .kpc-f textarea{min-height:44px;font-size:16px;line-height:22px;padding:10px 12px}
  .kpc-f button{width:44px;height:44px}
  .kpc-hint{display:none}
}

/* ---------------------------------------------------------------------------
   Reduced motion, the rest of it.

   Eleven blocks already honoured prefers-reduced-motion, but ten animated
   selectors had slipped past them — including .page, which runs on every
   single navigation, and the scrim and toast, which run on every modal and
   every save. Someone who has asked the system for less motion was still
   getting the most frequent animations in the app.

   These are the ones that were missed. Placed last so they win at equal
   specificity regardless of where the animation itself is declared.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .page,.scrim,.toast,.sub,
  .tour .tcard,
  .intro-mark,.intro-sub,.intro-word,.ir-arc,
  .offline-badge.on .dot{animation:none}
}


/* ============================================================================
   Motion. Every rule here is inside prefers-reduced-motion: no-preference,
   animates transform and opacity only, and is keyed off `.content:not(.no-anim)`
   where it is a draw-in — so it runs on a real navigation and never on the
   re-render a filter click causes. Curves: --ease-out to enter, --ease-in to
   leave, --ease-toggle for anything continuous. (.claudecode/skills/animation.md)
   ========================================================================== */
/* Theme switch: the old theme dissolves into a blur while the new one
   sharpens into place, with a breath of scale. Both snapshots animate at
   once, so there is no grey midpoint. */
@media (prefers-reduced-motion:no-preference){
  html.theming::view-transition-old(root){animation:vt-blur-out 420ms var(--ease-in) both;mix-blend-mode:normal}
  html.theming::view-transition-new(root){animation:vt-blur-in 560ms var(--ease-out) both;mix-blend-mode:normal}
  @keyframes vt-blur-out{from{opacity:1;filter:blur(0);transform:scale(1)}to{opacity:0;filter:blur(14px);transform:scale(1.03)}}
  @keyframes vt-blur-in{from{opacity:0;filter:blur(18px);transform:scale(.985)}60%{filter:blur(4px)}to{opacity:1;filter:blur(0);transform:scale(1)}}
  html.theming::view-transition-group(root){animation-duration:560ms}
  #btn-theme svg{transition:transform var(--dur-micro) var(--ease-out)}
  #btn-theme:hover svg{transform:rotate(20deg)}
}
@media (prefers-reduced-motion:no-preference){
  .tkpis.fresh .tnode.kpi{animation:treeIn 260ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 28ms)}
  @keyframes treeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .content:not(.no-anim) .t-mix{animation:growX 420ms var(--ease-out) both}
}
@media (prefers-reduced-motion:reduce){.tkpis,.tw svg{transition:none}}
@media (prefers-reduced-motion:no-preference){
  /* --- buttons: press settles, hover colours already transition --- */
  .btn,.iconbtn,.nav-item,.chip,.tabs button,.seg button,.rep-type,.lvl,.m2-dept,.pod,.area-card,.tile,.card.click,.act-row,.reason,.kmini{will-change:transform}
  .btn,.iconbtn{transition:background var(--dur-micro) var(--ease-toggle),border-color var(--dur-micro) var(--ease-toggle),color var(--dur-micro) var(--ease-toggle),transform 150ms var(--ease-toggle)}
  .btn:active:not(:disabled),.iconbtn:active{transform:scale(.97)}
  .nav-item:active,.m2-dept:active,.lvl:active,.rep-type:active{transform:scale(.985)}

  /* --- cards: a 2px lift on transform, settling on press --- */
  .card.click,.card.stat,.pod,.lvl,.rep-type{transition:transform var(--dur-card) var(--ease-toggle),border-color var(--dur-card) var(--ease-toggle),box-shadow var(--dur-card) var(--ease-toggle)}
  .card.click:active,.pod:active{transform:translateY(0) scale(.995)}

  /* --- tabs and segmented: one indicator that travels --- */
  .tabs,.seg{position:relative}
  .seg .ind{position:absolute;top:2px;bottom:2px;left:0;width:var(--w,0);background:var(--surface);border-radius:var(--r-xs);box-shadow:var(--shadow-1);pointer-events:none;opacity:0;
    transform:translateX(var(--x,0));transition:transform var(--dur-tab) var(--ease-toggle),opacity var(--dur-micro) var(--ease-out)}
  .seg .ind.is-visible{opacity:1}
  .seg:has(> .ind.is-visible) button.on{background:transparent;box-shadow:none}
  .seg button{position:relative;z-index:1}
  .ind.no-anim{transition:none!important}

  /* --- overlays: enter on ease-out, leave on ease-in, reversible --- */
  .scrim{animation:scrimIn var(--dur-micro) var(--ease-out) both}
  .modal{animation:modalIn var(--dur-page) var(--ease-out) both;will-change:transform,opacity}
  .scrim.is-leaving{animation:scrimOut 200ms var(--ease-in) forwards}
  .scrim.is-leaving .modal{animation:modalOut 200ms var(--ease-in) forwards}
  .drawer{animation:slide var(--dur-page) var(--ease-out) both;will-change:transform,opacity}
  html[dir="rtl"] .drawer{animation-name:slide-rtl}
  .scrim.is-leaving .drawer{animation:slideOut 200ms var(--ease-in) forwards}
  html[dir="rtl"] .scrim.is-leaving .drawer{animation-name:slideOut-rtl}
  .helpmenu:not([hidden]){animation:popIn 150ms var(--ease-out) both;transform-origin:top right}
  .usermenu:not([hidden]){animation:popIn 150ms var(--ease-out) both;transform-origin:bottom left}
  html[dir="rtl"] .usermenu:not([hidden]){transform-origin:bottom right}   /* anchored on the right in Arabic */
  html[dir="rtl"] .helpmenu:not([hidden]){transform-origin:top left}
  .toast{animation:toastIn 200ms var(--ease-out) both;will-change:transform,opacity}
  .toast.is-leaving{animation:toastOut 180ms var(--ease-in) forwards}
  .progress{transition:transform 300ms var(--ease-out)}
  .progress.is-busy{transform:scaleX(.35)}
  .progress.is-done{transform:scaleX(1)}

  /* --- fields: an error state shakes once --- */
  .field.has-error .inp,.field.has-error .sel{animation:shake 320ms var(--ease-out)}

  /* --- draw-ins, on a real navigation only --- */
  .content:not(.no-anim) .progress-ring{animation:ringIn 600ms var(--ease-out) both}
  .content:not(.no-anim) .bar i,.content:not(.no-anim) .ovh-bar i,.content:not(.no-anim) .a-bar i,.content:not(.no-anim) .corr-bar i,.content:not(.no-anim) .conf i,.content:not(.no-anim) .lg-spine i{transform-origin:left;animation:growX 500ms var(--ease-out) both}
  html[dir="rtl"] .content:not(.no-anim) .bar i,html[dir="rtl"] .content:not(.no-anim) .ovh-bar i,html[dir="rtl"] .content:not(.no-anim) .a-bar i{transform-origin:right}
  .content:not(.no-anim) .ovh-bar i{animation-delay:calc(var(--i,0) * 60ms)}
  .content:not(.no-anim) .sparkline .act,.content:not(.no-anim) .tile .spark .act,.content:not(.no-anim) .kh-spark .act,.content:not(.no-anim) .chart .act{stroke-dasharray:1;stroke-dashoffset:1;animation:drawIn 700ms var(--ease-out) forwards}
  .content:not(.no-anim) .kpi-grid>*,.content:not(.no-anim) .grid.g4>*,.content:not(.no-anim) .grid.g3>*,.content:not(.no-anim) .ins-grid>*,.content:not(.no-anim) .ovh-moved>.ovh-mv,.content:not(.no-anim) .podium>*,.content:not(.no-anim) .sc-fx>*,.content:not(.no-anim) .sc-areas>*,.content:not(.no-anim) .tkpis>*,.content:not(.no-anim) .stat-row>*,.content:not(.no-anim) .steps>*,.content:not(.no-anim) .rep-types>*,.content:not(.no-anim) .rep-list>*,.content:not(.no-anim) .levels>*,.content:not(.no-anim) .ovh-tiles>*,.content:not(.no-anim) .reasons>*,.content:not(.no-anim) [data-stagger]>*{animation:riseFrom 480ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}
  .content:not(.no-anim) .ov-hero>*,.content:not(.no-anim) .band>*,.content:not(.no-anim) .pv>*{animation:riseFrom 480ms var(--ease-out) both}
  .content:not(.no-anim) .ovh-main>*{animation:riseFrom 480ms var(--ease-out) both}
  .content:not(.no-anim) .ovh-main>*:nth-child(2){animation-delay:90ms}.content:not(.no-anim) .ovh-main>*:nth-child(3){animation-delay:180ms}.content:not(.no-anim) .ovh-main>*:nth-child(4){animation-delay:270ms}.content:not(.no-anim) .ovh-main>*:nth-child(5){animation-delay:360ms}
  .content:not(.no-anim) .ovh-side{--dx:32px;animation:riseFrom 480ms var(--ease-out) both;animation-delay:260ms}   /* the side column comes in from the right */
  .content:not(.no-anim) .live-check:not([hidden]),.content:not(.no-anim) .callout,.content:not(.no-anim) .map2-panel,.content:not(.no-anim) .dept-tbl tr.det>td>*{animation:riseFrom 480ms var(--ease-out) both}
  .content:not(.no-anim) .step.late::before,.content:not(.no-anim) .step.now::before{animation:pulseOnce 900ms var(--ease-out) 400ms 1}
  .tbl tbody tr.row-changed>td{animation-timing-function:var(--ease-out)}
  .rail .nav-lbl,.rail .brandname,.rail .site-block,.rail .nav-sec,.rail .rail-foot .meta{transition:opacity var(--dur-micro) var(--ease-toggle)}
}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes scrimOut{to{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
@keyframes modalOut{to{opacity:0;transform:scale(.97) translateY(6px)}}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes ringIn{from{stroke-dashoffset:var(--c,0)}to{stroke-dashoffset:0}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawIn{to{stroke-dashoffset:0}}
@keyframes pulseOnce{0%,100%{transform:scale(1)}40%{transform:scale(1.25)}}

/* ---- The reel pass (2026-11-08): the whole screen builds itself ----------
   Every screen's cards rise in reading order, bar charts grow from their
   baseline, the points on a line pop in after the line is drawn, heat-map
   cells and table rows fade in by index, the rail's active pill glides to the
   chosen item, a navigation cross-fades the content area (View Transitions),
   a refresh glides bars from their previous length, and a press ripples out
   from the pointer. js/motion.js hands the stylesheet the indices (--i), the
   geometry (--x/--y/--w/--h/--from) and the classes (.rise, .morph-x, .rip,
   html.paging); the curves and durations live here. Transform and opacity
   only; nothing runs under prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  /* The whole-screen entrance, bolder than the 8 px riseIn the pages were
     written with: 26 px of travel and a touch of scale, 560 ms, 70 ms apart
     (the page-level staggers above use the same riseFrom and pace). */
  .content:not(.no-anim) .rise{animation:riseFrom 480ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}
  .content:not(.no-anim) .page{animation-duration:420ms}
  /* charts take their time: a line draws for 1.1 s, bars grow one by one */
  .content:not(.no-anim) :is(.sparkline,.tile .spark,.kh-spark,.chart) .act{animation-duration:1100ms;animation-delay:200ms}
  .content:not(.no-anim) :is(.bar,.ovh-bar,.a-bar,.corr-bar,.conf,.lg-spine) i,.content:not(.no-anim) .t-mix{animation-duration:800ms;animation-delay:calc(var(--i,0) * 70ms + 200ms)}
  .content:not(.no-anim) .progress-ring{animation-duration:1000ms;animation-delay:200ms}
  .content:not(.no-anim) .chart rect[class^="bar-"]{transform-box:fill-box;transform-origin:bottom;animation:growY 700ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms + 200ms)}
  .content:not(.no-anim) .chart .pt{transform-box:fill-box;transform-origin:center;animation:popPt 360ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms + 500ms)}
  .content:not(.no-anim) .heat .hc{animation:riseIn 320ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 16ms + 100ms)}
  .content:not(.no-anim) .tbl tbody>tr{animation:riseIn 360ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 36ms + 120ms)}
  /* A tab switch inside a page (.content.quick, App.navigate): the page does
     not fade, cards take 300 ms and 28 ms apart, charts and bars half their
     time, so the new tab is fully there within about 600 ms of the click.
     After the rules above, at equal specificity, so these win. */
  .content.quick .page{animation:none}
  .content.quick .rise,.content.quick .kpi-grid>*,.content.quick .grid.g4>*,.content.quick .grid.g3>*,.content.quick .ins-grid>*,.content.quick .podium>*,.content.quick .sc-fx>*,.content.quick .sc-areas>*,.content.quick .tkpis>*,.content.quick .stat-row>*,.content.quick .steps>*,.content.quick .rep-types>*,.content.quick .rep-list>*,.content.quick .levels>*,.content.quick .ovh-tiles>*,.content.quick .reasons>*,.content.quick [data-stagger]>*,.content.quick .ovh-moved>.ovh-mv{animation-duration:300ms;animation-delay:calc(var(--i,0) * 28ms)}
  .content.quick .ov-hero>*,.content.quick .band>*,.content.quick .pv>*,.content.quick .ovh-main>*,.content.quick .ovh-side,.content.quick .live-check:not([hidden]),.content.quick .callout,.content.quick .map2-panel{animation-duration:300ms}
  .content.quick .sparkline .act,.content.quick .tile .spark .act,.content.quick .kh-spark .act,.content.quick .chart .act{animation-duration:600ms;animation-delay:60ms}
  .content.quick .bar i,.content.quick .ovh-bar i,.content.quick .a-bar i,.content.quick .corr-bar i,.content.quick .conf i,.content.quick .lg-spine i,.content.quick .t-mix{animation-duration:450ms;animation-delay:calc(var(--i,0) * 30ms + 60ms)}
  .content.quick .progress-ring{animation-duration:600ms;animation-delay:60ms}
  .content.quick .chart rect[class^="bar-"]{animation-duration:400ms;animation-delay:calc(var(--i,0) * 25ms + 60ms)}
  .content.quick .chart .pt{animation-delay:calc(var(--i,0) * 35ms + 260ms)}
  .content.quick .heat .hc{animation-delay:calc(var(--i,0) * 8ms + 40ms)}
  .content.quick .tbl tbody>tr{animation-duration:260ms;animation-delay:calc(var(--i,0) * 18ms + 40ms)}

  /* the rail: one brand pill that travels, the item underneath goes clear */
  .rail nav{position:relative}
  .rail .nav-item{z-index:1}
  .rail .nav-ink{position:absolute;top:0;left:0;width:var(--w,0);height:var(--h,36px);border-radius:var(--r-sm);background:var(--brand);opacity:0;pointer-events:none;
    transform:translate(var(--x,0),var(--y,0));transition:transform 480ms var(--ease-out),opacity var(--dur-micro) var(--ease-out);will-change:transform}
  .rail .nav-ink.is-visible{opacity:1}
  .rail .nav-ink.no-anim{transition:none!important}
  .rail nav:has(> .nav-ink.is-visible) .nav-item.on{background:transparent}

  /* a bar whose length changed on a refresh glides from the old length */
  .morph-x{transform-origin:left;animation:morphX 480ms var(--ease-out) both}
  html[dir="rtl"] .morph-x{transform-origin:right}

  /* the press ripple */
  .has-rip{position:relative;overflow:hidden}
  .rip{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--d,40px);height:var(--d,40px);margin:calc(var(--d,40px) / -2) 0 0 calc(var(--d,40px) / -2);border-radius:50%;background:currentColor;opacity:.16;pointer-events:none;
    transform:scale(0);animation:rip 520ms var(--ease-out) forwards}

  /* navigation: only the content area cross-fades; the rail and the top bar stay put */
  html.paging .content{view-transition-name:kc-content}
  /* The root pair must not cross-fade: the browser blends old and new with
     plus-lighter, and two full-opacity copies of the rail wash the whole
     screen out for the length of the transition. The old root is hidden; the
     new one is the live page. */
  html.paging::view-transition-old(root){animation:none;opacity:0}
  html.paging::view-transition-new(root){animation:none}
  /* Direction-aware: going down the rail the new page comes up from below and
     the old one leaves upward; going up, the reverse; the same page (a KPI
     inside Explore) only breathes. --pd is set by Motion.page from the rail
     order. The group is held for the full entrance so the two never cut. */
  html.paging{--pd:1}
  html.paging[data-pdir="-1"]{--pd:-1}
  html.paging[data-pdir="0"]{--pd:.3}
  html.paging::view-transition-group(kc-content){animation-duration:560ms}
  html.paging::view-transition-old(kc-content){animation:pageOut 260ms var(--ease-in) both}
  html.paging::view-transition-new(kc-content){animation:pageIn 560ms var(--ease-out) both}
  /* an in-page re-render (a tab, a filter, a period) settles in softly instead of cutting */
  .content.swap .page{animation:softIn 240ms var(--ease-out) both}
  .content:not(.no-anim) .rise,.content:not(.no-anim) :is(.kpi-grid,.grid.g4,.grid.g3,.ins-grid,.ovh-tiles,.stat-row)>*{will-change:transform,opacity}
}
@keyframes softIn{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes riseFrom{from{opacity:0;transform:translate(var(--dx,0),12px)}to{opacity:1;transform:none}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes popPt{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes morphX{from{transform:scaleX(var(--from,1))}to{transform:scaleX(1)}}
@keyframes rip{to{transform:scale(1);opacity:0}}
@keyframes pageOut{to{opacity:0;transform:translateY(calc(var(--pd,1) * -18px)) scale(.985)}}
@keyframes pageIn{from{opacity:0;transform:translateY(calc(var(--pd,1) * 36px)) scale(.98)}}


/* ---- Dark mode: "selected" has to be seen against a dark ground ----
   Light expresses the current thing with the dark band or a soft tint; on a
   #0B0F14 page both merge into it. Dark answers with an edge or a lift. */
:root[data-theme="dark"] .btn{background:var(--surface-2)}
:root[data-theme="dark"] .btn:hover{background:var(--surface-3)}
:root[data-theme="dark"] .btn.ghost{background:transparent}
:root[data-theme="dark"] .btn.ghost:hover{background:var(--surface-3)}
:root[data-theme="dark"] .btn.primary{background:var(--brand)}
:root[data-theme="dark"] .btn.primary:hover{background:var(--brand-2)}
:root[data-theme="dark"] .seg button.on,:root[data-theme="dark"] .seg .ind{background:var(--line-2)}
:root[data-theme="dark"] .lvl.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
:root[data-theme="dark"] .lvl.on .ln{background:var(--brand);color:var(--brand-ink)}
:root[data-theme="dark"] .tnode.on{background:var(--surface-3)}
:root[data-theme="dark"] .tbl tbody tr.sel>td{background:var(--accent-soft);box-shadow:inset 0 1px 0 var(--accent),inset 0 -1px 0 var(--accent)}
:root[data-theme="dark"] .rep-type.on,:root[data-theme="dark"] .wi-row.on{box-shadow:inset 0 0 0 1px var(--accent)}
:root[data-theme="dark"] .settings-navbtn.on{box-shadow:inset 0 0 0 1px var(--brand)}
:root[data-theme="dark"] .card.click:hover,:root[data-theme="dark"] .pod:hover,:root[data-theme="dark"] .lvl:hover{border-color:var(--line-2);box-shadow:0 0 0 1px var(--line-2)}
:root[data-theme="dark"] .step.now,:root[data-theme="dark"] .step.late{border-color:var(--band-line)}
:root[data-theme="dark"] .iconbtn.on{background:var(--accent);color:var(--accent-ink)}

/* Account setup on the sign-in pane: a temporary password to replace, or the
   second factor to enrol (App.completeSetup). The key is set in mono, grouped
   by four, so it can be read aloud or typed into a phone without losing place. */
.su-steps { margin: 4px 0 4px; padding-inline-start: 18px; display: grid; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.su-key { display: block; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; word-break: break-all; user-select: all; color: var(--ink); }


/* ---- Plant view (Overview): the site in 3D ------------------------------
   PlantView (js/plantview.js) renders the scene on a canvas and keeps the
   callouts, the area rail and the controls as HTML. The card wears the hero
   card's surface in both themes (see .ov-hero,.band,.pv above); the stage
   inside it is always the night scene. The renderer reads its palette from
   these tokens, so they stay hex (the rgba ones are read as written). */
:root{
  --pv-stage-1:#0E1828;--pv-stage-2:#060B13;--pv-stage-line:rgba(255,255,255,.07);
  --pv-wall:#2E415B;--pv-roof:#3C516D;--pv-unit:#1E2C40;--pv-glass:#1F3656;--pv-silo:#DCE4EE;--pv-silo-top:#F4F7FB;
  --pv-truck:#DCE4EE;--pv-cab:#3D8FB3;--pv-solar:#1C4170;--pv-car:#B8C4D2;
  --pv-slab-l:#0C1624;--pv-slab-r:#08101B;--pv-road:#0B131E;--pv-pad:#0E1826;
  --pv-grid:rgba(56,212,240,.07);--pv-lane:rgba(226,236,245,.26);--pv-stroke:rgba(170,210,240,.15);
  --pv-warm:#FFD58F;--pv-cool:#8FE8FF;--pv-violet:#B7A2FF;--pv-off:#0C1522;--pv-edge:#2FD4F0;--pv-lamp:#FFD27A;--pv-flare:#FF8A2B;
  --pv-good:#34D399;--pv-warn:#FBBF24;--pv-crit:#F87171;--pv-none:#8A97A8;
  --pv-good-line:rgba(52,211,153,.55);--pv-warn-line:rgba(251,191,36,.55);--pv-crit-line:rgba(248,113,113,.6);--pv-none-line:rgba(138,151,168,.4);
  --pv-ink:#F2F5F8;--pv-ink-2:#A8B3BF;--pv-tag-bg:rgba(9,16,26,.86);--pv-tag-shadow:0 8px 22px rgba(0,0,0,.45);
  --pv-tile-shadow:0 1px 2px rgba(17,24,32,.06),0 12px 28px -16px rgba(17,24,32,.35);
  /* materials, one per kind of building, and the things around them */
  --pv-roof-in:#26374D;--pv-fire:#4A3036;--pv-lab:#4B5D74;--pv-steel:#33485F;--pv-ware:#2B3645;--pv-util:#3A4758;--pv-hq:#34465E;
  --pv-car1:#E5E9EF;--pv-car2:#B8343C;--pv-car3:#3F6FB5;--pv-car4:#4A525E;--pv-tail:#FF4D4D;
  --pv-tree:#173A2E;--pv-tree-hi:#3F8E66;--pv-trunk:#3A2E26;--pv-pole:#5B6B7E;
  --pv-mark:rgba(230,238,246,.42);--pv-rim:rgba(190,225,250,.3);
  /* the night: sky, stars, the far skyline, and the dark at the edges */
  --pv-sky-1:#0B1730;--pv-sky-2:#0A1322;--pv-sky-glow:rgba(47,212,240,.10);--pv-star:#DCE8FF;--pv-skyline:#101D30;--pv-vignette:rgba(2,5,10,.72);
}
.pv{position:relative;overflow:hidden;isolation:isolate;padding:28px 30px 26px;container-type:inline-size}
.pv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:18px}
.pv-hl{min-width:0}
.pv-lead{margin:8px 0 0;font:600 26px/32px var(--font-ui);letter-spacing:-1px;color:var(--band-ink);max-width:26ch;text-wrap:balance}
.pv-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.pv-live{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;border:1px solid var(--band-line);
    color:var(--band-ink-2);font:600 12px/16px var(--font-body);letter-spacing:0}
.pv-live i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--none)}
.pv-live.is-live{color:var(--good-text);background:var(--good-bg);border-color:transparent}
.pv-live.is-live i{background:var(--good)}
.pv-live.is-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--good);animation:pv-ping 2s var(--ease-out) infinite}
.pv-chip{display:inline-flex;align-items:baseline;gap:5px;padding:7px 12px;border-radius:10px;border:1px solid var(--band-line);background:var(--band-glass);
    color:var(--band-ink-2);font:500 13px/18px var(--font-body);text-decoration:none;transition:transform var(--dur-micro) var(--ease-out)}
.pv-chip b{color:var(--band-ink);font-weight:600;font-variant-numeric:tabular-nums}
.pv-chip.accent b{color:var(--accent)}
.pv-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;align-items:start}

/* the stage: always night, whichever theme the card is in */
.pv-stage{position:relative;aspect-ratio:3/2;min-height:360px;max-height:640px;border-radius:14px;overflow:hidden;color:var(--pv-ink);
    background:radial-gradient(90% 55% at 50% 78%,var(--pv-sky-glow),transparent 70%),linear-gradient(180deg,var(--pv-sky-1) 0%,var(--pv-sky-2) 42%,var(--pv-stage-2) 100%);
    box-shadow:inset 0 0 0 1px var(--pv-stage-line)}
.pv-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
    background:radial-gradient(120% 95% at 50% 55%,transparent 58%,var(--pv-vignette) 100%)}
.pv-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y}
.pv-tags{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.pv-tag{--st:var(--pv-none);--stl:var(--pv-none-line);position:absolute;left:0;top:0;transform:translate(var(--tx,-999px),var(--ty,-999px)) translate(-50%,-100%);
    pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;border:1px solid var(--stl);
    background:var(--pv-tag-bg);box-shadow:var(--pv-tag-shadow),0 0 14px var(--stl);color:var(--pv-ink);font:600 13px/18px var(--font-body);
    white-space:nowrap;text-decoration:none;transition:opacity var(--dur-micro) var(--ease-out)}
.pv-tag em{font:600 14px/18px var(--font-ui);font-style:normal;color:var(--st);font-variant-numeric:tabular-nums}
.pv-tag.st-good{--st:var(--pv-good);--stl:var(--pv-good-line)}
.pv-tag.st-warn{--st:var(--pv-warn);--stl:var(--pv-warn-line)}
.pv-tag.st-crit{--st:var(--pv-crit);--stl:var(--pv-crit-line)}
.pv-tag:focus-visible{outline:2px solid var(--pv-edge);outline-offset:2px}
.pv-tag.is-hot{transform:translate(var(--tx),var(--ty)) translate(-50%,calc(-100% - 4px)) scale(1.05);z-index:99!important}
.pv[data-hot] .pv-tag:not(.is-hot){opacity:.4}
.pv-tag-d{position:absolute;left:50%;top:calc(100% + 6px);transform:translate(-50%,-4px);opacity:0;pointer-events:none;padding:4px 9px;border-radius:6px;
    background:var(--pv-tag-bg);box-shadow:var(--pv-tag-shadow);color:var(--pv-ink-2);font:500 12px/16px var(--font-body);white-space:nowrap;
    transition:transform var(--dur-micro) var(--ease-out),opacity var(--dur-micro) var(--ease-out)}
.pv-tag.is-hot .pv-tag-d{opacity:1;transform:translate(-50%,0)}
.pv-ctl{position:absolute;top:10px;right:10px;z-index:120;display:flex;gap:6px}
.pv-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--pv-stage-line);
    background:var(--pv-tag-bg);color:var(--pv-ink);cursor:pointer;transition:transform var(--dur-micro) var(--ease-out)}
.pv-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv-btn:focus-visible{outline:2px solid var(--pv-edge);outline-offset:2px}
.pv-hint{position:absolute;left:12px;bottom:10px;z-index:120;font:500 11.5px/16px var(--font-body);color:var(--pv-ink-2);pointer-events:none}

/* the rail: the areas, worst first, each a door into Explore */
.pv-rail{display:flex;flex-direction:column;gap:6px;min-width:0}
.pv-li{--st:var(--none);--st-t:var(--ink-2);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:10px 12px;border-radius:12px;
    border:1px solid var(--band-line);background:var(--band-glass);color:var(--band-ink);text-decoration:none;
    transition:transform var(--dur-micro) var(--ease-out),opacity var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.pv-li.st-good{--st:var(--good);--st-t:var(--good-text)}
.pv-li.st-warn{--st:var(--warn);--st-t:var(--warn-text)}
.pv-li.st-crit{--st:var(--crit);--st-t:var(--crit-text)}
.pv-li-n{display:flex;align-items:center;gap:8px;min-width:0;font:600 13.5px/18px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-li-n i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--st)}
.pv-li em{font:600 17px/20px var(--font-ui);font-style:normal;color:var(--st-t);font-variant-numeric:tabular-nums}
.pv-li-bar{grid-column:1/-1;height:4px;border-radius:99px;background:var(--band-track);overflow:hidden}
.pv-li-bar span{display:block;height:100%;border-radius:inherit;background:var(--st)}
.pv-li small{grid-column:1/-1;font:400 12px/16px var(--font-body);color:var(--band-ink-2)}
.pv-li.is-hot{border-color:var(--st)}
.pv[data-hot] .pv-li:not(.is-hot){opacity:.5}
.pv-li:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root:not([data-theme="dark"]) .pv-li{background:var(--surface);box-shadow:var(--pv-tile-shadow)}

.pv-enter .pv-tag{animation:pv-fade 480ms var(--ease-out) backwards;animation-delay:900ms}
@keyframes pv-fade{from{opacity:0}to{opacity:1}}
@keyframes pv-ping{0%{transform:scale(.7);opacity:.85}100%{transform:scale(2.6);opacity:0}}

/* narrower cards: the rail goes under the stage; a phone: badges on the plant, a two-column list */
@container (max-width:900px){
  .pv-body{grid-template-columns:minmax(0,1fr)}
  .pv-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:600px){
  .pv{padding:18px 14px 16px}
  .pv-lead{font-size:20px;line-height:26px;letter-spacing:-.6px}
  .pv-stage{aspect-ratio:1/1;min-height:0}
  .pv-tag{padding:2px 7px;gap:0;border-radius:99px;font-size:12px}
  .pv-tag b,.pv-tag-d,.pv-hint{display:none}
  .pv-li{padding:8px 10px;min-height:44px}
  .pv-li small{display:none}
  .pv-li-bar{height:3px}
}
@media (prefers-reduced-motion:reduce){
  .pv *,.pv *::after{animation:none!important;transition:none!important}
}

/* ============================================================
   Red-to-Green, the AI plan (js/r2g.js). The card wears the Overview hero's
   chrome (shared rules above); the diagrams sit on the plant view's night
   stage, so the route and the network read the same in both themes. Each
   action kind has one colour, used on every surface it appears on.
   ============================================================ */
:root{
  --r2g-data:var(--pv-warn);--r2g-lever:var(--pv-edge);--r2g-guide:var(--pv-violet);--r2g-proc:var(--pv-ink-2);
  --r2g-gloss:rgba(255,255,255,.28);--r2g-orb-hi:#2A3B55;--r2g-orb-glow:rgba(248,113,113,.28);
  --r2g-good-ink:var(--good);--r2g-crit-ink:var(--crit);
}
:root[data-theme="dark"]{--r2g-good-ink:var(--pv-good);--r2g-crit-ink:var(--pv-crit)}
.k-data{--kc:var(--r2g-data)}.k-lever{--kc:var(--r2g-lever)}.k-guide{--kc:var(--r2g-guide)}.k-process{--kc:var(--r2g-proc)}

.r2g{position:relative;overflow:hidden;isolation:isolate;padding:26px 28px 24px;margin-bottom:20px;container-type:inline-size;animation:r2gRise 420ms var(--ease-out) backwards}
.r2g-head{display:flex;gap:16px 20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.r2g-head-t{flex:1 1 420px;min-width:0}
.r2g-head-s{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.r2g-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 11px/16px var(--font-ui);letter-spacing:0;color:var(--band-ink-2)}
.r2g-eyebrow svg{width:14px;height:14px;fill:none;stroke:var(--accent);stroke-width:2.2}
.r2g-lead{margin:8px 0 6px;font:600 30px/36px var(--font-ui);letter-spacing:-1.2px;color:var(--band-ink)}
.r2g-lead em{font-style:normal;color:var(--r2g-good-ink)}
.r2g-sub{margin:0;max-width:80ch;font:400 14px/21px var(--font-body);color:var(--band-ink-2)}
.r2g-st{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-full);font:600 10px/20px var(--font-ui);letter-spacing:.6px;background:var(--none-bg);color:var(--ink-2)}
.r2g-st.DRAFT{background:var(--warn-bg);color:var(--warn-text)}
.r2g-st.ACTIVE,.r2g-st.ACHIEVED{background:var(--good-bg);color:var(--good-text)}
.r2g-src{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:var(--r-full);font:600 13px/32px var(--font-ui);white-space:nowrap}
.r2g-src svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.r2g-src.ai{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);box-shadow:none}
.r2g-src.eng{background:var(--band-glass-2);color:var(--band-ink);border:1px solid var(--band-line)}
.r2g-src small{font:400 12px var(--font-body);color:var(--band-ink-2)}
.r2g-appr{display:inline-flex;align-items:center;gap:5px;font:12px/16px var(--font-body);color:var(--r2g-good-ink)}
.r2g-appr svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4}
.r2g-badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;margin-inline-start:6px;vertical-align:3px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent-2);font:600 10px/20px var(--font-ui);letter-spacing:.4px}
.r2g-badge svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4}

.r2g-checkrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.r2g-chk{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--r-full);font:600 12px/26px var(--font-ui);background:var(--good-bg);color:var(--good-text);animation:r2gPop 380ms var(--ease-out) backwards;animation-delay:var(--d,0ms)}
.r2g-chk svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6}
.r2g-chk.no{background:var(--crit-bg);color:var(--crit-text)}
.r2g-chk.fx{background:var(--warn-bg);color:var(--warn-text)}
.r2g-chk small{font:400 11px var(--font-body);opacity:.85}
.r2g-chk.note{background:var(--band-glass-2);color:var(--band-ink-2)}

.r2g-diag{margin:16px 0 0;display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--band-glass);border:1px solid var(--band-line)}
.r2g-diag img{width:24px;height:24px;flex:none;margin-top:2px}
.r2g-diag small{display:block;font:600 11px/14px var(--font-ui);letter-spacing:0;color:var(--band-ink-2)}
.r2g-diag p{margin:3px 0 0;font:500 15px/23px var(--font-body);color:var(--band-ink)}

.r2g-grid{display:grid;gap:14px;margin-top:16px}
.r2g-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px}
.r2g-stage{position:relative;overflow:hidden;padding:14px 14px 6px;border-radius:var(--r-lg);color:var(--pv-ink);border:1px solid var(--pv-stage-line);
  background:radial-gradient(120% 90% at 50% 0%,var(--pv-stage-1) 0%,var(--pv-stage-2) 100%);box-shadow:var(--pv-tile-shadow)}
.r2g-cap{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin-bottom:6px}
.r2g-cap b{font:600 14px/20px var(--font-ui);color:inherit}
.r2g-bridge .r2g-cap b{color:var(--band-ink)}
.r2g-leg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:12px/16px var(--font-body);color:var(--pv-ink-2)}
.r2g-leg>span{display:inline-flex;align-items:center;white-space:nowrap}
.r2g-leg .lg{display:inline-block;width:14px;height:3px;border-radius:2px;margin-inline-end:6px}
.lg.act{background:var(--pv-ink)}
.lg.tgt{background:repeating-linear-gradient(90deg,var(--pv-ink-2) 0 4px,transparent 4px 7px)}
.lg.plan{height:4px;background:linear-gradient(90deg,var(--pv-crit),var(--pv-warn),var(--pv-good))}
.lg.fc{height:9px;background:var(--pv-violet);opacity:.45}
.lg.zone{height:9px;background:var(--pv-good);opacity:.35}
.lg.k-data,.lg.k-lever,.lg.k-guide,.lg.k-process{width:9px;height:9px;border-radius:50%;background:var(--kc)}
.r2g-traj,.r2g-net{position:relative;min-height:200px}
/* The diagrams are drawn left to right in both languages: months run that
   way on every chart in the product, and text anchors are computed for it. */
.r2g-svg{display:block;width:100%;height:auto;overflow:visible;direction:ltr}

/* the route */
.r2g-hz{stroke:var(--pv-stage-line)}
.r2g-yl{fill:var(--pv-ink-2);font:11px var(--font-mono);text-anchor:end}
.r2g-xl{fill:var(--pv-ink-2);font:11px var(--font-ui);text-anchor:middle}
.r2g-xl.now{fill:var(--pv-ink);font-weight:600}
.r2g-xl.goal{fill:var(--pv-good);font-weight:600}
.r2g-s-zone0{stop-color:var(--pv-good);stop-opacity:.22}
.r2g-s-zone1{stop-color:var(--pv-good);stop-opacity:.03}
.r2g-s-crit{stop-color:var(--pv-crit)}.r2g-s-warn{stop-color:var(--pv-warn)}.r2g-s-good{stop-color:var(--pv-good)}
.r2g-s-halo0{stop-color:var(--pv-crit);stop-opacity:.34}.r2g-s-halo1{stop-color:var(--pv-crit);stop-opacity:0}
.r2g-tgt{fill:none;stroke:var(--pv-ink-2);stroke-width:1.5;stroke-dasharray:5 5;opacity:.85}
.r2g-tl{fill:var(--pv-ink-2);font:600 11px var(--font-ui);letter-spacing:0;text-anchor:start}
.r2g-now{stroke:var(--pv-ink);stroke-opacity:.4;stroke-dasharray:2 4}
.r2g-nowl{fill:var(--pv-ink);font:600 11px var(--font-ui);letter-spacing:0;text-anchor:middle}
.r2g-fcb{fill:var(--pv-violet);fill-opacity:.15}
.r2g-fcl{fill:none;stroke:var(--pv-violet);stroke-width:1.6;stroke-dasharray:4 4}
.r2g-actual{fill:none;stroke:var(--pv-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.r2g-hd{fill:var(--pv-stage-2);stroke:var(--pv-ink);stroke-width:2}
.r2g-hd.good{stroke:var(--pv-good)}.r2g-hd.crit{stroke:var(--pv-crit)}
.r2g-plan-l{fill:none;stroke-width:3.4;stroke-linecap:round}
.r2g-plan-glow{fill:none;stroke-width:13;stroke-linecap:round;opacity:.2}
.r2g-md{fill:var(--pv-stage-2);stroke:var(--pv-ink);stroke-width:2.2}
.r2g-ms.goal .r2g-md{fill:var(--pv-good);stroke:var(--pv-stage-2)}
.r2g-mv{fill:var(--pv-ink);font:600 11px var(--font-mono);text-anchor:middle}
.r2g-ms.goal .r2g-mv{fill:var(--pv-good);font-weight:600}
.r2g-pulse{fill:none;stroke:var(--pv-good);stroke-width:2;transform-box:fill-box;transform-origin:center}
.r2g-am{cursor:pointer}
.r2g-am circle{fill:var(--kc);stroke:var(--pv-stage-2);stroke-width:2;transition:opacity var(--dur-micro) var(--ease-out)}
.r2g-am text{fill:var(--pv-stage-2);font:600 10px var(--font-ui);text-anchor:middle}
.r2g.play .r2g-reveal{transform-box:fill-box;transform-origin:left center;animation:r2gReveal 1600ms var(--ease-out) 150ms backwards}

/* the network */
.r2g-orbit-l{fill:none;stroke:var(--pv-stroke);stroke-dasharray:2 6}
.r2g-edge{fill:none;stroke:var(--kc);stroke-opacity:.38;stroke-width:1.7;transition:opacity var(--dur-micro) var(--ease-out)}
.r2g-edge.k-data{stroke-dasharray:5 4}
.r2g-edge.on{stroke-opacity:.95;stroke-width:2.6}
.r2g-pt{fill:var(--kc)}
.r2g-core-r{fill:none;stroke:var(--pv-crit);stroke-width:2;stroke-dasharray:3 5;transform-box:fill-box;transform-origin:center}
.r2g-core-i{fill:var(--pv-stage-2);stroke:var(--pv-crit-line);stroke-width:1.5}
.r2g-core-n{fill:var(--pv-ink);font:600 11px var(--font-ui);text-anchor:middle}
.r2g-core-v{fill:var(--pv-crit);font:600 11px var(--font-mono);text-anchor:middle}
.r2g-node{cursor:pointer;outline:none;transition:opacity var(--dur-micro) var(--ease-out)}
.r2g.play .r2g-node{animation:r2gFade 600ms var(--ease-out) 500ms backwards}
.r2g-node-in{transition:transform var(--dur-micro) var(--ease-out)}
.r2g-node:hover .r2g-node-in,.r2g-node.on .r2g-node-in,.r2g-node:focus-visible .r2g-node-in{transform:scale(1.12)}
.r2g-nh{fill:var(--kc);opacity:.18}
.r2g-nc{fill:var(--pv-stage-2);stroke:var(--kc);stroke-width:2.2}
.r2g-nn{fill:var(--kc);font:600 13px var(--font-ui);text-anchor:middle}
.r2g-na{fill:var(--pv-ink);stroke:var(--pv-stage-2);stroke-width:1.5}
.r2g-nat{fill:var(--pv-stage-2);font:600 8px var(--font-ui);text-anchor:middle}
.r2g-nl{fill:var(--pv-ink);font:600 12px var(--font-ui)}
.r2g-nm{fill:var(--pv-ink-2);font:11px var(--font-body)}
.r2g-node:focus-visible .r2g-nc{stroke-width:3.4}
.r2g.hl .r2g-node:not(.on),.r2g.hl .r2g-am:not(.on){opacity:.35}
.r2g.hl .r2g-edge:not(.on){opacity:.3}

/* why red, and what it takes */
.r2g-bridge{padding:14px 16px 16px;border-radius:var(--r-lg);background:var(--band-glass);border:1px solid var(--band-line);min-width:0}
.r2g-trio{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap;margin:8px 0 14px}
.r2g-trio>div{display:flex;flex-direction:column;min-width:0}
.r2g-trio small,.r2g-tile small,.r2g-parts>small{font:600 11px/14px var(--font-ui);letter-spacing:0;color:var(--band-ink-2)}
.r2g-trio b{font:600 28px/32px var(--font-ui);letter-spacing:-1px;color:var(--band-ink)}
.r2g-trio b em,.r2g-tile b em{font-style:normal;font-size:13px;font-weight:500;letter-spacing:0;color:var(--band-ink-2);margin-inline-start:3px}
.r2g-trio b.crit{color:var(--r2g-crit-ink)}.r2g-trio b.good{color:var(--r2g-good-ink)}
.r2g-trio .arr{padding-bottom:6px;color:var(--band-ink-2)}
.r2g-trio .arr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
[dir="rtl"] .r2g-trio .arr svg{transform:scaleX(-1)}
.r2g-trio .gap{margin-inline-start:auto;padding:6px 12px;border-radius:var(--r);background:var(--band-glass-2);border:1px solid var(--band-line)}
.r2g-split{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--band-track)}
.r2g-split .seg{flex:none;width:calc(var(--w,0) * 100%);height:100%;transform-origin:left center}
[dir="rtl"] .r2g-split .seg{transform-origin:right center}
.r2g-split .seg.tr{background:var(--accent)}
.r2g-split .seg.ac{background:linear-gradient(90deg,var(--pv-crit),var(--pv-warn))}
.r2g.play .r2g-split .seg.tr{animation:r2gGrow 800ms var(--ease-out) 300ms backwards}
.r2g.play .r2g-split .seg.ac{animation:r2gGrow 900ms var(--ease-out) 900ms backwards}
.r2g-split-l{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font:12.5px/18px var(--font-body);color:var(--band-ink-2)}
.r2g-split-l b{color:var(--band-ink);font-weight:600}
.r2g-split-l .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.sw.tr{background:var(--accent)}.sw.ac{background:var(--pv-crit)}
.r2g-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.r2g-tile{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px;border-radius:var(--r);background:var(--band-glass-2);border:1px solid var(--band-line)}
.r2g-tile b{font:600 22px/26px var(--font-ui);letter-spacing:-.6px;color:var(--band-ink)}
.r2g-tile b.crit{color:var(--r2g-crit-ink)}
.r2g-tile>span{font:12px/16px var(--font-body);color:var(--band-ink-2)}
.r2g-tile.trust.crit{--rc:var(--crit)}.r2g-tile.trust.warn{--rc:var(--warn)}.r2g-tile.trust.good{--rc:var(--good)}
.r2g-ring{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:2px 0}
.r2g-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--rc,var(--accent)) calc(var(--p,0) * 1%),var(--band-track) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.r2g-ring b{position:relative;font:600 14px/1 var(--font-ui);letter-spacing:0}
.r2g-parts{display:grid;gap:6px;margin-top:14px}
.r2g-part{display:grid;grid-template-columns:minmax(0,1fr) 110px 64px;gap:10px;align-items:center;font:12.5px/18px var(--font-body);color:var(--band-ink-2)}
.r2g-part .l{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.r2g-part b{text-align:end;font:600 12px var(--font-mono);color:var(--band-ink)}
.r2g-pbar{height:8px;border-radius:4px;overflow:hidden;background:var(--band-track)}
.r2g-pbar i{display:block;height:100%;width:calc(var(--w,0) * 100%);background:var(--accent);transform-origin:left center}
.r2g-pbar i.dn{background:var(--pv-warn)}
.r2g.play .r2g-pbar i{animation:r2gGrow 800ms var(--ease-out) 1200ms backwards}

/* the timeline */
.r2g-gantt{position:relative;display:grid;grid-template-columns:minmax(150px,1.4fr) repeat(var(--n,4),minmax(0,1fr));row-gap:8px;margin-top:16px;padding:14px 16px;border-radius:var(--r-lg);background:var(--band-glass);border:1px solid var(--band-line)}
.r2g-gh{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 0 10px;border-bottom:1px solid var(--band-line);font:12px/16px var(--font-ui);color:var(--band-ink-2)}
.r2g-gh b{color:var(--band-ink);font-weight:600}
.r2g-gh small{font:11px/14px var(--font-mono);color:var(--band-ink-2)}
.r2g-gh .rv{position:absolute;bottom:-5px;width:9px;height:9px;transform:rotate(45deg);background:var(--band);border:1.5px solid var(--accent)}
.r2g-gh.now{border-radius:var(--r) var(--r) 0 0;background:var(--band-glass-2)}
.r2g-gh.r2g-gl{align-items:flex-start;justify-content:flex-end;font-weight:600;letter-spacing:0;font-size:11px}
.r2g-grow{display:flex;align-items:center;gap:8px;min-width:0;padding-inline-end:12px;font:13px/18px var(--font-body);color:var(--band-ink);cursor:default}
.r2g-grow .t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.r2g-num{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--kc);color:var(--pv-stage-2);font:600 12px/1 var(--font-ui)}
.r2g-av{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--band-ink);color:var(--band);font:600 10px/1 var(--font-ui)}
.r2g-bar{position:relative;align-self:center;height:26px;margin:0 3px;border-radius:13px;background:var(--kc);overflow:hidden;transform-origin:left center;transition:opacity var(--dur-micro) var(--ease-out)}
[dir="rtl"] .r2g-bar{transform-origin:right center}
.r2g-bar::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--r2g-gloss))}
.r2g-bar span{position:relative;display:block;padding-inline-start:10px;font:600 11px/26px var(--font-ui);color:var(--pv-stage-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:22px}
.r2g-bar i{position:absolute;inset-inline-end:8px;top:8px;width:10px;height:10px;transform:rotate(45deg);background:var(--pv-stage-2)}
.r2g.play .r2g-bar{animation:r2gGrow 700ms var(--ease-out) backwards;animation-delay:calc(700ms + var(--d,0ms))}
.r2g.hl .r2g-bar:not(.on),.r2g.hl .r2g-grow:not(.on){opacity:.35}

/* the actions */
.r2g-acts{display:grid;gap:10px;margin-top:16px}
.r2g-act{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 16px;border-radius:var(--r-lg);background:var(--band-glass);border:1px solid var(--band-line);border-inline-start:3px solid var(--kc);
  animation:r2gRise 420ms var(--ease-out) backwards;animation-delay:var(--d,0ms);transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.r2g-act.on{transform:translateX(2px)}
[dir="rtl"] .r2g-act.on{transform:translateX(-2px)}
.r2g-act.off{opacity:.45}
.r2g-act.flash{box-shadow:0 0 0 2px var(--kc)}
.r2g-act .r2g-num{margin-top:1px}
.r2g-act-t{font:600 15px/22px var(--font-ui);color:var(--band-ink)}
.r2g-kind{display:inline-block;margin-inline-end:8px;padding:0 8px;border-radius:var(--r-full);vertical-align:2px;background:var(--kc);color:var(--pv-stage-2);font:600 11px/18px var(--font-ui);letter-spacing:0}
.r2g-act-m{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px;font:12.5px/18px var(--font-body);color:var(--band-ink-2)}
.r2g-act-m>span{display:inline-flex;align-items:flex-start;gap:5px}
.r2g-act-m svg{width:13px;height:13px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2}
.r2g-act-m b{color:var(--band-ink);font-weight:600}
.r2g-why{display:flex;gap:7px;margin-top:8px;font:italic 13px/19px var(--font-body);color:var(--band-ink)}
.r2g-why svg{width:13px;height:13px;flex:none;margin-top:3px;fill:none;stroke:var(--s3);stroke-width:2.2}
.r2g-act-f{display:flex;flex-direction:column;gap:6px;min-width:190px}
.r2g-act-f label{display:flex;align-items:center;justify-content:space-between;gap:8px;font:12px/16px var(--font-ui);color:var(--band-ink-2)}
.r2g-act-f .sel{width:136px}
.r2g-act-f .r2g-keep{justify-content:flex-start;cursor:pointer}
.r2g-own{display:inline-flex;align-items:center;gap:8px;font:600 13px/18px var(--font-ui);color:var(--band-ink)}
.r2g-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--band-line)}
.r2g-foot>.muted{flex:1 1 300px}

/* drafting */
.r2g-gen-body{display:grid;grid-template-columns:minmax(230px,.9fr) minmax(0,1.1fr);grid-template-areas:"steps orbit" "term term" "checks checks";gap:16px 22px;margin-top:18px}
.r2g-steps{grid-area:steps;display:grid;align-content:start;gap:4px;margin:0;padding:0;list-style:none}
.r2g-steps li{display:flex;align-items:flex-start;gap:12px;padding:9px 10px;border-radius:var(--r);transition:opacity var(--dur-micro) var(--ease-out)}
.r2g-steps li[data-state="wait"]{opacity:.42}
.r2g-steps li[data-state="run"]{background:var(--band-glass-2)}
.r2g-steps b{display:block;font:600 14px/20px var(--font-ui);color:var(--band-ink)}
.r2g-step-d{display:block;font:12.5px/18px var(--font-body);color:var(--band-ink-2)}
.r2g-dot{position:relative;display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:-1px;border-radius:50%;border:2px solid var(--band-line);color:var(--ink-inverse)}
.r2g-dot svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;opacity:0;transform:scale(.4);transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
[data-state="ok"] .r2g-dot{background:var(--good);border-color:var(--good)}
[data-state="ok"] .r2g-dot svg{opacity:1;transform:none}
[data-state="run"] .r2g-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);border-right-color:var(--accent);animation:r2gSpin 800ms linear infinite}
[data-state="skip"] .r2g-dot,[data-state="fail"] .r2g-dot{border-color:var(--warn);background:var(--warn-bg)}
.r2g-orbit{grid-area:orbit;position:relative;min-height:300px;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--pv-stage-line);
  background:radial-gradient(90% 90% at 50% 50%,var(--pv-stage-1) 0%,var(--pv-stage-2) 100%)}
.r2g-orl{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed var(--pv-stroke)}
.r2g-orl.r1{width:130px;height:130px;margin:-65px 0 0 -65px;border:1px solid var(--pv-crit-line)}
.r2g-orl.r2{width:236px;height:236px;margin:-118px 0 0 -118px;animation-duration:70s}
.r2g-orl.r3{width:340px;height:340px;margin:-170px 0 0 -170px;animation-direction:reverse;animation-duration:90s}
.r2g-orb{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;color:var(--pv-ink);
  background:radial-gradient(circle at 35% 30%,var(--r2g-orb-hi),var(--pv-stage-2) 72%);box-shadow:0 0 0 1px var(--pv-crit-line),0 0 44px var(--r2g-orb-glow);animation:r2gBreathe 2.6s var(--ease-out) infinite alternate}
.r2g-orb span{max-width:92px;font:600 11px/14px var(--font-ui);color:var(--pv-ink-2)}
.r2g-orb b{font:600 13px/16px var(--font-mono);color:var(--pv-crit)}
.r2g-sats{position:absolute;left:50%;top:50%;width:0;height:0}
.r2g-sat{position:absolute;left:0;top:0;transform:rotate(var(--a,0deg)) translateX(var(--rad,118px)) rotate(calc(-1 * var(--a,0deg)));animation:r2gFade 500ms var(--ease-out) backwards;animation-delay:var(--d,0ms)}
.r2g-sat-in{padding:5px 10px;border-radius:10px;text-align:center;white-space:nowrap;background:var(--pv-tag-bg);border:1px solid var(--pv-stroke);box-shadow:var(--pv-tag-shadow)}
.r2g-sat-in small{display:block;font:600 9px/12px var(--font-ui);letter-spacing:0;color:var(--pv-ink-2)}
.r2g-sat-in b{font:600 13px/16px var(--font-mono);color:var(--pv-ink)}
.r2g-term{grid-area:term;overflow:hidden;border-radius:var(--r-lg);background:var(--pv-stage-2);border:1px solid var(--pv-stage-line)}
.r2g-term-h{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--pv-stage-line);font:600 12px/16px var(--font-ui);color:var(--pv-ink)}
.r2g-term-h img{width:16px;height:16px}
.r2g-term-h span{margin-inline-start:auto;font-weight:400;color:var(--pv-ink-2)}
.r2g-term pre{margin:0;padding:12px 14px;min-height:92px;max-height:180px;overflow:auto;font:12px/18px var(--font-mono);color:var(--pv-cool);white-space:pre-wrap;word-break:break-word;text-align:left}
.r2g-term pre::after{content:"\258D";color:var(--pv-edge);animation:r2gBlink 1s steps(2,start) infinite}
.r2g-gen .r2g-checkrow{grid-area:checks;margin-top:0}
.r2g-err{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;padding:12px 14px;border-radius:var(--r);background:var(--crit-bg);color:var(--crit-text);font:13px/18px var(--font-body)}
.r2g-err>span{flex:1 1 220px}
.r2g-err svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* the invitation, and the red KPI's own call to action */
.r2g.cta{padding:22px 26px}
.r2g.sum .r2g-lead{font-size:24px;line-height:30px;letter-spacing:-.8px}
.r2g.sum .r2g-head-s .btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;margin-inline-start:4px}
[dir="rtl"] .r2g.sum .r2g-head-s .btn svg{transform:scaleX(-1)}
.r2g.cta .r2g-head{align-items:center}
.r2g-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
.r2g-cta{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:14px 0;padding:14px 16px;border-radius:var(--r-lg);background:var(--crit-bg);border:1px solid var(--line)}
.r2g-cta-t{flex:1 1 320px;display:flex;flex-direction:column;gap:2px;font:13px/19px var(--font-body);color:var(--ink-2)}
.r2g-cta-t b{font:600 14px/20px var(--font-ui);color:var(--crit-text)}

@container (max-width:860px){.r2g-two{grid-template-columns:minmax(0,1fr)}}
@container (max-width:720px){
  .r2g-gen-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"orbit" "steps" "term" "checks"}
  .r2g-lead{font-size:24px;line-height:30px;letter-spacing:-.8px}
  .r2g-head-s{align-items:flex-start}
}
@container (max-width:460px){
  .r2g-sat{--rad:96px}
  .r2g-sat-in{padding:4px 8px}
  .r2g-sat-in b{font-size:12px}
  .r2g-orl.r3{display:none}
}
@container (max-width:640px){
  .r2g-act{grid-template-columns:auto minmax(0,1fr)}
  .r2g-act-f{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;min-width:0}
  .r2g-act-f label{flex:1 1 140px}
  .r2g-act-f .sel{width:auto;flex:1}
  .r2g-gantt{grid-template-columns:minmax(96px,1fr) repeat(var(--n,4),minmax(0,1fr));padding:12px 10px}
  .r2g-grow .t{display:none}
  .r2g-gh small .u{display:none}
  .r2g-bar span{font-size:0;padding:0}
  .r2g-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r2g-part{grid-template-columns:minmax(0,1fr) 70px 56px}
}
@media (max-width:820px){.r2g{padding:18px 14px 16px}.r2g-orbit{min-height:280px}}

@keyframes r2gRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes r2gFade{from{opacity:0}to{opacity:1}}
@keyframes r2gPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes r2gGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes r2gReveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes r2gSpin{to{transform:rotate(360deg)}}
@keyframes r2gSpinC{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes r2gPulse{from{transform:scale(.6);opacity:.9}to{transform:scale(2.6);opacity:0}}
@keyframes r2gBreathe{from{transform:scale(.96)}to{transform:scale(1.04)}}
@keyframes r2gBlink{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .r2g,.r2g *,.r2g *::before,.r2g *::after{animation:none!important;transition:none!important}
}

/* ============================================================
   What is connected to this KPI (Pages.plan.mapBlock). The Red-to-Green card
   and night stage (.r2g, .r2g-stage) with the map beside a detail panel. A
   link's colour is what it means for the red KPI — green a lever that helps,
   amber a lever against the grain, red a contradiction, grey a relationship
   that is not a lever — and its style is the evidence behind it.
   ============================================================ */
.rel .r2g-lead em{font-style:normal;color:var(--r2g-good-ink)}
.rel .r2g-eyebrow .expl{margin-inline-start:2px}
.rel-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:14px;margin-top:16px;align-items:start}
@container (max-width:900px){.rel-body{grid-template-columns:minmax(0,1fr)}}
.rel-stage{padding-bottom:10px}
.rel-map{position:relative;min-height:300px}
.rel-svg.stack .rel-sub{font-size:10px}
.rel-cap{justify-content:flex-start;gap:6px 22px}
.rel-leg .lg.rl{width:18px;height:0;border-top:2px solid var(--pv-ink);border-radius:0;margin-inline-end:6px}
.rel-leg .lg.rl.dash{border-top-style:dashed}
.rel-leg .lg.rl.dot{border-top-style:dotted;border-top-color:var(--pv-ink-2)}
.rel-leg .lg.rc{width:8px;height:8px;border-radius:50%;margin-inline-end:6px;background:var(--pv-ink-2)}
.rel-leg .lg.rc.good{background:var(--pv-good)}.rel-leg .lg.rc.warn{background:var(--pv-warn)}.rel-leg .lg.rc.crit{background:var(--pv-crit)}
.rel-leg>span{cursor:default;transition:opacity var(--dur-micro) var(--ease-out)}
.rel-leg:hover>span:not(:hover){opacity:.45}

.rel-edge{fill:none;stroke:var(--pv-ink-2);opacity:.32;stroke-linecap:round;transition:opacity var(--dur-micro) var(--ease-out)}
.rel-edge.good{stroke:var(--pv-good)}.rel-edge.warn{stroke:var(--pv-warn)}.rel-edge.crit{stroke:var(--pv-crit)}
.rel-edge.rec{opacity:.8}
.rel-edge.t-statistical{stroke-dasharray:6 4}
.rel-edge.t-indicative{stroke-dasharray:2 5}
.rel-edge.t-contradiction{stroke-dasharray:6 4;opacity:.7}
.rel-edge.chain{stroke-dasharray:4 4;opacity:.6}
.rel-edge.sel,.rel-edge.hl{opacity:1}
.rel-pt{fill:var(--pv-good)}.rel-pt.warn{fill:var(--pv-warn)}

.rel-node{cursor:pointer;outline:none;transition:opacity var(--dur-micro) var(--ease-out)}
.rel-node-in{transition:transform var(--dur-micro) var(--ease-out);animation:r2gFade 500ms var(--ease-out) backwards;animation-delay:var(--d,0ms)}
.rel-node:hover .rel-node-in,.rel-node:focus-visible .rel-node-in,.rel-node.sel .rel-node-in{transform:scale(1.06)}
.rel-box{fill:var(--pv-tag-bg);stroke:var(--pv-stroke);stroke-width:1.2}
.rel-box.good{stroke:var(--pv-good-line)}.rel-box.warn{stroke:var(--pv-warn-line)}.rel-box.crit{stroke:var(--pv-crit-line)}.rel-box.none{stroke:var(--pv-none-line)}
.rel-node.rec .rel-box{stroke-width:1.8}
.rel-node.none .rel-box{fill:var(--pv-stage-2)}
.rel-node.none .rel-lbl{fill:var(--pv-ink-2)}
.rel-glow{fill:none;stroke-width:2;opacity:0;transition:opacity var(--dur-micro) var(--ease-out)}
.rel-glow.good{stroke:var(--pv-good)}.rel-glow.warn{stroke:var(--pv-warn)}.rel-glow.crit{stroke:var(--pv-crit)}.rel-glow.none{stroke:var(--pv-ink-2)}
.rel-node.sel .rel-glow{opacity:.9}
.rel-node:focus-visible .rel-glow{opacity:.9;stroke:var(--pv-edge)}
.rel-dot{fill:var(--pv-ink-2)}.rel-dot.good{fill:var(--pv-good)}.rel-dot.warn{fill:var(--pv-warn)}.rel-dot.crit{fill:var(--pv-crit)}
.rel-lbl{fill:var(--pv-ink);font:600 13px var(--font-ui)}
.rel-lbl.sm{font-size:11.5px;text-anchor:middle}
.rel-sub{fill:var(--pv-ink-2);font:11px var(--font-mono)}
.rel-fold{cursor:pointer;outline:none}
.rel-fold rect{fill:transparent;stroke:var(--pv-stroke);stroke-dasharray:3 3;transition:opacity var(--dur-micro) var(--ease-out)}
.rel-fold text{fill:var(--pv-ink-2);font:600 11.5px var(--font-ui);text-anchor:middle}
.rel-fold:hover text,.rel-fold:focus-visible text{fill:var(--pv-ink)}
.rel-svg.has-hl .rel-node:not(.hl):not(.sel){opacity:.4}
.rel-svg.has-hl .rel-edge:not(.hl):not(.sel){opacity:.12}
.rel-svg.f-physical .rel-edge:not([data-tier="physical"]):not(.chain),.rel-svg.f-physical .rel-node:not([data-tier="physical"]):not(.chain),
.rel-svg.f-statistical .rel-edge:not([data-tier="statistical"]):not(.chain),.rel-svg.f-statistical .rel-node:not([data-tier="statistical"]):not(.chain),
.rel-svg.f-indicative .rel-edge:not([data-tier="indicative"]):not(.chain),.rel-svg.f-indicative .rel-node:not([data-tier="indicative"]):not(.chain),
.rel-svg.f-contradiction .rel-edge:not([data-tier="contradiction"]):not(.chain),.rel-svg.f-contradiction .rel-node:not([data-tier="contradiction"]):not(.chain){opacity:.08}

/* the panel */
.rel-panel{border-radius:var(--r-lg);background:var(--band-glass);border:1px solid var(--band-line);padding:16px;min-width:0}
.rel-panel-in{display:flex;flex-direction:column;gap:12px;animation:r2gRise 320ms var(--ease-out) backwards}
.rel-pick{padding:24px 8px;text-align:center;font:13px/19px var(--font-body);color:var(--band-ink-2)}
.rel-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rel-pt-t{font:600 18px/24px var(--font-ui);letter-spacing:-.3px;color:var(--band-ink)}
.rel-pt-s{font:12px/16px var(--font-body);color:var(--band-ink-2);text-transform:capitalize}
.rel-verdict{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);border:1px solid var(--band-line);background:var(--band-glass-2)}
.rel-verdict>svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2.2}
.rel-verdict small{display:block;font:600 11px/14px var(--font-ui);letter-spacing:0;color:var(--band-ink-2)}
.rel-verdict b{display:block;margin-top:2px;font:600 15px/21px var(--font-ui);color:var(--band-ink)}
.rel-verdict span{display:block;font:12.5px/18px var(--font-body);color:var(--band-ink-2)}
.rel-verdict.good{border-color:var(--good);color:var(--r2g-good-ink)}
.rel-verdict.crit{border-color:var(--crit);color:var(--r2g-crit-ink)}
.rel-verdict.none{color:var(--band-ink-2)}
.rel-meters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rel-m{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 12px;border-radius:var(--r);background:var(--band-glass-2);border:1px solid var(--band-line)}
.rel-m small{font:600 11px/14px var(--font-ui);letter-spacing:0;color:var(--band-ink-2)}
.rel-m b{font:600 20px/24px var(--font-mono);letter-spacing:-.4px;color:var(--band-ink)}
.rel-m>span:last-child{font:12px/16px var(--font-body);color:var(--band-ink-2)}
/* strength on a -1 … +1 scale, zero in the middle */
.rel-bi{position:relative;display:block;height:8px;border-radius:4px;background:var(--band-track);overflow:hidden}
.rel-bi .z{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--band-ink-2);opacity:.5}
.rel-bi .v{position:absolute;top:0;bottom:0;width:calc(var(--w,0) * 50%);animation:r2gGrow 700ms var(--ease-out) 150ms backwards}
.rel-bi .v.pos{left:50%;background:var(--accent);transform-origin:left center}
.rel-bi .v.neg{right:50%;background:var(--s3);transform-origin:right center}
/* p against the 0.05 line: short and green is unlikely noise */
.rel-np{position:relative;display:block;height:8px;border-radius:4px;background:var(--band-track);overflow:hidden}
.rel-np i{display:block;height:100%;width:calc(var(--w,0) * 100%);transform-origin:left center;animation:r2gGrow 700ms var(--ease-out) 250ms backwards}
.rel-np i.good{background:var(--good)}.rel-np i.warn{background:var(--warn)}
.rel-np em{position:absolute;left:25%;top:-2px;bottom:-2px;width:2px;background:var(--band-ink-2);opacity:.6}
[dir="rtl"] .rel-np i{transform-origin:right center}
[dir="rtl"] .rel-np em{left:auto;right:25%}
.rel-line{display:flex;gap:10px;align-items:flex-start}
.rel-line svg{flex:none;width:15px;height:15px;margin-top:3px;fill:none;stroke:var(--band-ink-2);stroke-width:2}
.rel-line p{margin:0;font:13.5px/20px var(--font-body);color:var(--band-ink)}
.rel-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rel-chain span{padding:3px 10px;border-radius:var(--r-full);border:1px solid var(--band-line);background:var(--band-glass-2);font:600 12px/18px var(--font-ui);color:var(--band-ink)}
.rel-chain span.c{border-color:var(--crit);color:var(--r2g-crit-ink)}
.rel-chain svg{width:13px;height:13px;fill:none;stroke:var(--band-ink-2);stroke-width:2}
[dir="rtl"] .rel-chain svg,[dir="rtl"] .rel-open svg{transform:scaleX(-1)}
.rel-caveat{padding:10px 12px;border-radius:var(--r);border-inline-start:3px solid var(--warn);background:var(--warn-bg);color:var(--warn-text);font:12.5px/18px var(--font-body)}
.rel-caveat.crit{border-inline-start-color:var(--crit);background:var(--crit-bg);color:var(--crit-text)}
.rel-open{align-self:flex-start}
.rel-open svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;margin-inline-start:4px}

/* waiting and empty */
.rel-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:260px;margin-top:16px}
.rel-wait p{margin:0;font:13px var(--font-body);color:var(--pv-ink-2)}
.rel-none{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 16px 22px;text-align:center}
.rel-none-orb{position:relative;display:grid;place-items:center;width:84px;height:84px}
.rel-none-orb i{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--pv-stroke)}
.rel-none-orb i+i{inset:14px;border:1px solid var(--pv-crit-line)}
.rel-none-orb b{font:600 20px var(--font-mono);color:var(--pv-ink)}
.rel-none-t{margin:0;font:600 17px/24px var(--font-ui);color:var(--pv-ink)}
.rel-none-b{margin:0;max-width:60ch;font:13px/20px var(--font-body);color:var(--pv-ink-2)}
.rel .r2g-stage{margin-top:0}
.rel>.r2g-stage{margin-top:16px}
@media (prefers-reduced-motion:reduce){.rel-edge,.rel-node,.rel-node-in,.rel-glow{transition:none}}

/* Password fields: the eye button that shows or hides what was typed (ui.js PwEye). */
.pw-wrap{position:relative;display:block}
.pw-wrap>.inp{width:100%;padding-inline-end:44px}
.pw-eye{position:absolute;inset-inline-end:4px;top:50%;display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer;transform:translateY(-50%);opacity:.8;transition:opacity var(--dur-micro) var(--ease-out)}
.pw-eye:hover,.pw-eye[aria-pressed="true"]{opacity:1;color:var(--ink)}
.pw-eye:focus-visible{outline:2px solid var(--focus);outline-offset:1px;opacity:1}
.pw-eye svg{width:18px;height:18px}
.pw-wrap>input::-ms-reveal{display:none}
@media (max-width:820px){.pw-eye{width:44px;height:44px;inset-inline-end:0}}
@media (prefers-reduced-motion:reduce){.pw-eye{transition:none}}

/* ============================ Certified close ============================
   public/js/certify.js. The seal is the one authored moment: it presses onto
   the page (scale + a few degrees of turn, settling), its lettering turns
   once into place and an ink ring spreads from it. Everything else explains
   state and stays quiet. Transform and opacity only; reduced motion keeps
   every state and drops the movement. */
:root{--dur-seal:680ms;--dur-step:190ms;--seal:var(--good)}

/* The seal itself (SVG) */
.seal{display:block;overflow:visible;color:var(--seal)}
.seal .s-out{fill:none;stroke:currentColor;stroke-width:3}
.seal .s-in{fill:none;stroke:currentColor;stroke-width:1;opacity:.75}
.seal .s-text{transform-box:view-box;transform-origin:60px 60px}
.seal .s-text text{fill:currentColor;font:600 8.6px/1 var(--font-mono);letter-spacing:0}
html[dir="rtl"] .seal .s-text text{font-family:var(--font-body);letter-spacing:0;font-size:9px}
.seal .s-tick{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;transform-box:view-box;transform-origin:60px 60px}
.seal .s-mon{fill:currentColor;font:600 8px/1 var(--font-mono);letter-spacing:.8px}
.seal.is-ghost{color:var(--muted);opacity:.55}
.seal.is-ghost .s-tick{opacity:.35}
.seal.is-stamping{animation:seal-press var(--dur-seal) var(--ease-out) both}
.seal.is-stamping .s-text{animation:seal-turn calc(var(--dur-seal) * 1.7) var(--ease-out) both}
.seal.is-stamping .s-tick{animation:seal-tick var(--dur-micro) var(--ease-out) calc(var(--dur-seal) * .55) both}
@keyframes seal-press{0%{opacity:0;transform:scale(1.55) rotate(-11deg)}55%{opacity:1;transform:scale(.95) rotate(1.5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes seal-turn{from{transform:rotate(-70deg)}to{transform:rotate(0)}}
@keyframes seal-tick{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.seal-ink{position:absolute;inset:0;margin:auto;width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--seal);pointer-events:none;
  opacity:0;animation:seal-ink 900ms var(--ease-out) calc(var(--dur-seal) * .45) both}
@keyframes seal-ink{from{opacity:.5;transform:scale(.8)}to{opacity:0;transform:scale(1.75)}}

/* OFFICIAL / PROVISIONAL stamp (Overview header) */
.off-stamp{display:inline-flex;align-items:center;gap:6px;margin-inline-start:10px;padding:3px 9px 3px 7px;border-radius:var(--r-full);
  font:600 var(--fs-caption)/1.2 var(--font-body);letter-spacing:0;text-decoration:none;vertical-align:middle;
  transition:background var(--dur-micro) var(--ease-out)}
.off-stamp svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.off-stamp code{font:500 var(--fs-caption)/1 var(--font-mono);letter-spacing:0;text-transform:none;opacity:.85}
.off-stamp.is-official{background:var(--good-bg);color:var(--good-text)}
.off-stamp.is-provisional{background:var(--warn-bg);color:var(--warn-text)}
.off-stamp:hover{filter:brightness(.97)}
.off-stamp:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Readiness: the Certified step */
.step-cert .cert-n{display:flex;align-items:center;gap:6px;font:600 var(--fs-h3)/26px var(--font-body);color:var(--good-text)}
.step-cert .cert-n svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* The band on Month close: certified … */
.sealed-band,.certify-cta{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;
  margin-top:16px;padding:18px 22px;border-radius:var(--r-lg);border:1px solid var(--line)}
.sealed-band{background:linear-gradient(0deg,var(--good-bg),var(--good-bg)),var(--surface);border-color:transparent;color:var(--ink)}
.sb-seal{position:relative;display:grid;place-items:center}
.sealed-band h2,.certify-cta h2{font:600 var(--fs-h2)/1.25 var(--font-body);margin:0 0 4px}
.sealed-band p,.certify-cta p{margin:0;color:var(--ink-2);max-width:68ch;font-size:var(--fs-body);line-height:1.5}
.sb-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.sb-fact{font-size:var(--fs-label);color:var(--ink-2)}
.sb-fact b{font:600 var(--fs-label)/1 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.sb-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.fp-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-full);border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);cursor:pointer;font-size:var(--fs-caption);transition:border-color var(--dur-micro) var(--ease-out)}
.fp-chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fp-chip .fp-copy{opacity:.5;transition:opacity var(--dur-micro) var(--ease-out)}
.fp-chip:hover{border-color:var(--good)}
.fp-chip:hover .fp-copy{opacity:1}
.fp-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fp-chip.is-copied .fp-copy{animation:fp-copied 420ms var(--ease-out)}
@keyframes fp-copied{40%{transform:scale(1.35)}100%{transform:scale(1)}}
.danger-ink{color:var(--crit-text)}
.danger-ink:hover{background:var(--crit-bg);color:var(--crit-text)}
/* … and not yet */
.certify-cta.is-ready{border-color:var(--good)}
.cc-seal{display:grid;place-items:center}
.certify-cta .callout{max-width:68ch}
@media (max-width:820px){
  .sealed-band,.certify-cta{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .sb-actions,.certify-cta > .btn,.certify-cta > .note{grid-column:1/-1;align-items:stretch;flex-direction:row;flex-wrap:wrap}
  .sb-actions .btn{flex:1 1 auto}
}
.wf-sealed{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-caption);color:var(--good-text)}
.wf-sealed svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* The ceremony (modal) */
.cert-modal .mb{padding:20px 24px}
.cert-intro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-bottom:16px}
.cert-intro p{margin:0;color:var(--ink-2);line-height:1.5;max-width:66ch}
.pf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pf{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:var(--r);
  background:var(--surface-2);transition:background var(--dur-step) var(--ease-out)}
.pf-ic{position:relative;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.pf-ic svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pf-spin{position:absolute;inset:3px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink-2);animation:pf-spin 700ms linear infinite}
.pf-done{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;opacity:0;transform:scale(.4)}
.pf-skel{display:block;height:12px;width:60%;margin-top:6px;border-radius:6px;background:var(--surface-3)}
.pf-body b{display:block;font:500 var(--fs-body)/1.45 var(--font-body);color:var(--ink)}
.pf.is-pending .pf-body b,.pf.is-pending .pf-items,.pf.is-pending .pf-reason{opacity:0}
.pf:not(.is-pending) .pf-spin{display:none}
.pf:not(.is-pending) .pf-done{opacity:1;transform:scale(1);transition:opacity var(--dur-step) var(--ease-out),transform var(--dur-step) var(--ease-out)}
.pf.is-in .pf-body > *{animation:pf-in var(--dur-step) var(--ease-out) both}
@keyframes pf-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pf-spin{to{transform:rotate(360deg)}}
/* A row keeps its neutral colour until it resolves: the answer is not given away early. */
.pf[data-level="ok"] .pf-done{background:var(--good)}
.pf[data-level="ack"]:not(.is-pending){background:var(--warn-bg)}
.pf[data-level="ack"] .pf-done{background:var(--warn)}
.pf[data-level="block"]:not(.is-pending){background:var(--crit-bg)}
.pf[data-level="block"] .pf-done{background:var(--crit)}
.pf.is-pending .pf-items,.pf.is-pending .pf-reason{display:none}
/* While something blocks, reasons cannot be used yet, so they are not asked for. */
.pf-list.has-block .pf-reason{display:none}
.pf-items{margin-top:4px;font-size:var(--fs-caption);color:var(--ink-2);line-height:1.5}
.pf-reason{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.pf-reason span{font-size:var(--fs-caption);color:var(--warn-text);font-weight:500}
.pf-reason .inp{background:var(--surface)}
.pf.is-shake{animation:pf-shake 360ms var(--ease-out)}
@keyframes pf-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.pf-summary{flex:1;display:flex;align-items:center;gap:8px;min-height:22px;padding:0 8px;font-size:var(--fs-label);line-height:1.35;color:var(--ink-2)}
.pf-summary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pf-summary.is-ok{color:var(--good-text)}.pf-summary.is-ack{color:var(--warn-text)}.pf-summary.is-block{color:var(--crit-text)}

/* Press-and-hold: the fill is a scaled layer under the label. */
.btn.hold{position:relative;overflow:hidden;isolation:isolate;min-width:190px;--hold:0}
.btn.hold .hold-fill{position:absolute;inset:0;z-index:-1;background:var(--good);transform-origin:left center;transform:scaleX(var(--hold))}
html[dir="rtl"] .btn.hold .hold-fill{transform-origin:right center}
.btn.hold:not(.is-holding) .hold-fill{transition:transform var(--dur-page) var(--ease-out)}
.btn.hold .hold-l{display:inline-flex;align-items:center;gap:7px}
.btn.hold.is-holding,.btn.hold.is-loading{border-color:var(--good);background:var(--brand)}
.btn.hold.is-loading .hold-fill{transform:scaleX(1)}
.btn.hold:disabled{opacity:.5;cursor:not-allowed}
.btn.hold.needs-hold{animation:pf-shake 360ms var(--ease-out)}

/* Sealed: the moment itself */
.cert-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 0 4px}
.cd-seal{position:relative;display:grid;place-items:center;margin-bottom:14px}
.cert-done h3{font:600 var(--fs-h1)/1.2 var(--font-body);margin:0 0 6px;text-wrap:balance}
.cert-done p{margin:0;color:var(--ink-2);max-width:56ch;line-height:1.5}
.cd-fp{display:block;margin-top:14px;padding:6px 10px;border-radius:var(--r-sm);background:var(--surface-2);font:500 var(--fs-caption)/1.4 var(--font-mono);color:var(--ink-2);word-break:break-all;max-width:100%}
.cert-done > *:not(.cd-seal){animation:pf-in var(--dur-page) var(--ease-out) calc(var(--dur-seal) * .8) both}

/* Verify: a beam walks the list; each KPI is ticked as it is read. */
.vf .note{margin:0 0 12px}
.vf-scan{position:relative;max-height:min(52vh,460px);overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.vf-beam{position:absolute;inset-inline:0;top:0;height:34px;pointer-events:none;opacity:0;z-index:1;
  background:linear-gradient(90deg,transparent,var(--good-bg) 18%,var(--good-bg) 82%,transparent);transform:translateY(var(--y,0px));transition:transform 60ms linear}
.vf-scan.is-scanning .vf-beam{opacity:1}
.vf-list{list-style:none;margin:0;padding:0}
.vf-list li{position:relative;z-index:2;display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 10px;align-items:center;min-height:34px;padding:6px 12px;border-bottom:1px solid var(--line)}
.vf-list li:last-child{border-bottom:0}
.vf-ic{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--surface-3);opacity:.5;transform:scale(.7);
  transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out)}
.vf-ic svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vf-list li.is-read .vf-ic{opacity:1;transform:scale(1);background:var(--good)}
.vf-list li.is-changed{background:var(--crit-bg)}
.vf-list li.is-changed .vf-ic{background:var(--crit)}
.vf-n{font-size:var(--fs-label);color:var(--ink)}
.vf-d{grid-column:2;font:500 var(--fs-caption)/1.4 var(--font-mono);color:var(--crit-text)}
.vf-d:empty{display:none}
.vf-result{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:var(--r);font-size:var(--fs-body);line-height:1.5}
.vf-result:empty{display:none}
.vf-result svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vf-result code{display:block;margin-top:6px;font:500 var(--fs-caption)/1.4 var(--font-mono);word-break:break-all;opacity:.85}
.vf-result.is-good{background:var(--good-bg);color:var(--good-text);animation:pf-in var(--dur-page) var(--ease-out) both}
.vf-result.is-bad{background:var(--crit-bg);color:var(--crit-text);animation:pf-in var(--dur-page) var(--ease-out) both}

@media (prefers-reduced-motion:reduce){
  .seal.is-stamping,.seal.is-stamping .s-text,.seal.is-stamping .s-tick,.seal-ink,.pf.is-in .pf-body > *,.pf.is-shake,.btn.hold.needs-hold,
  .cert-done > *,.vf-result.is-good,.vf-result.is-bad,.fp-chip.is-copied .fp-copy{animation:none}
  .pf-spin{animation-duration:2s}
  .pf .pf-done,.vf-ic,.vf-beam,.btn.hold .hold-fill{transition:none}
}

/* ============================ Action calendar ============================
   public/js/actcal.js. The month shows where every dated action stands on
   the deadline ladder; one action opens as its ladder (reminder, due,
   manager, director). Motion explains state: the month slides in from the
   side you moved to, cards settle in one after another, a moved card lands
   with a ring, the ladder fills to today. Transform and opacity only. */
.act-view button{display:inline-flex;align-items:center;gap:6px}
.act-view svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.acal{position:relative}
.acal-h{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:12px}
.acal-title h2{font:600 var(--fs-h1)/1.15 var(--font-body);margin:0;letter-spacing:-.01em}
.acal-title p{margin:4px 0 0;color:var(--ink-2);font-size:var(--fs-label)}
.acal-nav{display:flex;align-items:center;gap:4px}
.acal-nav .icon svg{width:18px;height:18px}
html[dir="rtl"] .acal-nav .icon svg{transform:scaleX(-1)}
.acal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px}
.acal-key{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--ink-2)}
.acal-key b{font:600 var(--fs-caption)/1 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.acal-key .dot,.acal-pill .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--none)}
.st-ok .dot{background:var(--good)} .st-due_soon .dot{background:var(--warn)}
.st-overdue .dot,.st-escalated_manager .dot{background:var(--crit)}
.st-escalated_director .dot{background:var(--crit);box-shadow:0 0 0 2px var(--crit-bg)}
.st-closed .dot{background:var(--muted)}

.acal-body{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start}
.acal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.acal-grid.in-next{animation:acal-next var(--dur-page) var(--ease-out) both}
.acal-grid.in-prev{animation:acal-prev var(--dur-page) var(--ease-out) both}
html[dir="rtl"] .acal-grid.in-next{animation-name:acal-prev}
html[dir="rtl"] .acal-grid.in-prev{animation-name:acal-next}
@keyframes acal-next{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes acal-prev{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.acal-wd{background:var(--surface-2);padding:8px 10px;font:600 var(--fs-caption)/1 var(--font-body);color:var(--muted);letter-spacing:0}
.acal-wd.is-weekend{color:var(--none)}
.acal-day{position:relative;min-height:116px;padding:6px 6px 8px;background:var(--surface);display:flex;flex-direction:column;gap:4px;transition:background var(--dur-micro) var(--ease-out)}
.acal-day.is-weekend{background:var(--surface-2)}
.acal-day.is-out{background:var(--bg)}
.acal-day.is-out .acal-dn{color:var(--none)}
.acal-dn{align-self:flex-start;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-full);display:grid;place-items:center;font:500 var(--fs-label)/1 var(--font-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.acal-day.is-today .acal-dn{background:var(--brand);color:var(--brand-ink);font-weight:600}
.acal-day.is-drop,.acal-tray.is-drop{background:var(--accent-soft)}
.acal.is-dragging .acal-day:not(.is-drop){background:var(--surface)}
.acal-pills{display:flex;flex-direction:column;gap:3px;min-width:0}
.acal-pill{display:flex;align-items:flex-start;gap:6px;width:100%;min-width:0;border:0;border-radius:6px;padding:4px 6px;background:var(--surface-2);color:var(--ink);
  font:500 12px/1.25 var(--font-body);text-align:start;cursor:pointer;position:relative;
  transition:transform var(--dur-micro) var(--ease-out),opacity var(--dur-micro) var(--ease-out)}
/* backwards, not both: the entrance only owns the start state during its
   delay; a filled end state would pin transform and hide hover/drag feedback. */
.content:not(.no-anim) .acal-pill{animation:acal-pill var(--dur-micro) var(--ease-out) calc(var(--i,0) * 22ms) backwards}
@keyframes acal-pill{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.acal-pill .dot{margin-top:4px}
/* Two lines of title: one line cut every action to its first word. */
.acal-pill .t{flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.acal-tray .acal-pill .t,.acal-dayl .acal-pill .t{-webkit-line-clamp:3}
.acal-pill .who{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink-2);font:600 9px/1 var(--font-body);letter-spacing:.02em}
.acal-pill .rung{flex:none;font:600 10px/1 var(--font-mono);padding:3px 5px;border-radius:4px;background:var(--crit);color:var(--ink-inverse)}
.acal-pill.st-ok{background:var(--good-bg)}
.acal-pill.st-due_soon{background:var(--warn-bg)}
.acal-pill.st-overdue,.acal-pill.st-escalated_manager{background:var(--crit-bg);color:var(--crit-text)}
/* Text on the solid red uses the inverse ink: white on light (4.6:1), near-black on the brighter dark-theme red (6:1). */
.acal-pill.st-escalated_director{background:var(--crit);color:var(--ink-inverse)}
.acal-pill.st-escalated_director .rung{background:var(--ink-inverse);color:var(--crit)}
.acal-pill.st-escalated_director .who{background:color-mix(in srgb,var(--ink-inverse) 22%,transparent);color:var(--ink-inverse)}
.acal-pill.st-closed{background:var(--surface-2);color:var(--muted)}
.acal-pill.is-dropped .t{text-decoration:line-through}
.acal-pill:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.acal-pill[draggable="true"]{cursor:grab}
.acal-pill.is-dragging{opacity:.35;transform:scale(.97)}
.acal-pill.is-landed{animation:acal-land 520ms var(--ease-out) both}
.acal-pill.is-landed::after{content:"";position:absolute;inset:-3px;border-radius:9px;border:2px solid var(--accent);pointer-events:none;animation:acal-ring 700ms var(--ease-out) both}
@keyframes acal-land{0%{transform:scale(1.12)}100%{transform:none}}
@keyframes acal-ring{from{opacity:.9;transform:scale(.92)}to{opacity:0;transform:scale(1.18)}}
.acal-more{align-self:flex-start;border:0;background:none;padding:2px 4px;color:var(--link);font:500 var(--fs-caption)/1.2 var(--font-body);cursor:pointer;border-radius:4px}
.acal-more:hover{text-decoration:underline}
.acal-more:focus-visible{outline:2px solid var(--focus)}
.acal-tray{position:sticky;top:calc(var(--top-h) + 12px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;transition:background var(--dur-micro) var(--ease-out)}
.acal-tray h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:600 var(--fs-body)/1.3 var(--font-body)}
.acal-tray h3 b{font:600 var(--fs-caption)/1 var(--font-mono);background:var(--surface-2);border-radius:var(--r-full);padding:3px 8px;color:var(--ink-2)}
.acal-tray p{margin:0 0 10px;color:var(--muted);font-size:var(--fs-caption);line-height:1.45}
.acal-tray .acal-pills{gap:5px;max-height:60vh;overflow:auto}
.acal-undo{position:fixed;inset-inline:0;bottom:24px;margin:0 auto;width:max-content;max-width:calc(100vw - 32px);z-index:70;display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 14px;border-radius:var(--r);background:var(--ink);color:var(--ink-inverse);box-shadow:var(--shadow-3);font-size:var(--fs-label)}
.acal-undo svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.acal-undo .btn{background:transparent;color:var(--ink-inverse);border-color:color-mix(in srgb,var(--ink-inverse) 40%,transparent)}
.acal-undo kbd{margin-inline-start:6px;font:500 10px/1 var(--font-mono);opacity:.7}
.acal-undo.is-in{animation:acal-undo-in var(--dur-page) var(--ease-out) both}
.acal-undo.is-out{opacity:0;transform:translateY(12px);transition:opacity var(--dur-micro) var(--ease-in),transform var(--dur-micro) var(--ease-in)}
@keyframes acal-undo-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.acal-dayl{display:flex;flex-direction:column;gap:6px}
.acal-dayl .acal-pill{padding:8px 10px;font-size:var(--fs-body)}

/* The ladder of one action */
.acal-detail h3{font:600 var(--fs-body)/1.3 var(--font-body);margin:0}
.lad{position:relative;margin:14px 0 6px;padding-top:30px}
.lad-track{position:relative;height:6px;margin:0 9px;border-radius:var(--r-full);background:var(--surface-3)}
.lad-fill{position:absolute;inset:0;border-radius:inherit;background:var(--good);transform-origin:left center;transform:scaleX(var(--now));animation:lad-fill 760ms var(--ease-out) both}
html[dir="rtl"] .lad-fill{transform-origin:right center}
.lad.st-due_soon .lad-fill{background:var(--warn)}
.lad.st-overdue .lad-fill,.lad.st-escalated_manager .lad-fill,.lad.st-escalated_director .lad-fill{background:var(--crit)}
.lad.st-closed .lad-fill{background:var(--none)}
@keyframes lad-fill{from{transform:scaleX(0)}}
.lad-now{position:absolute;top:-26px;inset-inline-start:calc(var(--now) * 100%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;animation:lad-now 760ms var(--ease-out) both}
html[dir="rtl"] .lad-now{transform:translateX(50%)}
.lad-now b{font:600 11px/1 var(--font-body);letter-spacing:0;color:var(--ink);background:var(--surface);padding:2px 5px;border-radius:4px;box-shadow:var(--shadow-1)}
.lad-now::after{content:"";width:2px;height:12px;margin-top:2px;background:var(--ink);border-radius:1px}
@keyframes lad-now{from{opacity:0}to{opacity:1}}
.lad-stops{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--stops,4),minmax(0,1fr));gap:8px}
.acal-move{display:flex;align-items:flex-end;gap:8px}
.acal-move .field{flex:1}
.lad-stops li{display:flex;flex-direction:column;gap:2px;padding:8px 9px;border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--fs-caption);line-height:1.35;
  animation:pf-in var(--dur-micro) var(--ease-out) calc(var(--i) * 70ms + 200ms) both}
.lad-stops li b{font:600 var(--fs-label)/1.2 var(--font-body);color:var(--ink)}
.lad-stops li small{color:var(--muted);font-variant-numeric:tabular-nums}
.lad-who{color:var(--ink-2)}
.lad-who i{color:var(--warn-text);font-style:normal}
.lad-told{align-self:flex-start;margin-top:2px;font:600 11px/1 var(--font-body);letter-spacing:0;padding:3px 6px;border-radius:4px;background:var(--crit-bg);color:var(--crit-text)}
.lad.is-capped .lad-fill{background:var(--warn)}
.lad-stops li.is-due{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2)}
.lad-pin{position:absolute;top:-6px;inset-inline-start:calc(var(--x) * 100%);margin-inline-start:-9px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);box-shadow:0 0 0 2px var(--line-2);animation:acal-pill var(--dur-micro) var(--ease-out) calc(var(--i) * 70ms + 260ms) both}
.lad-pin svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lad-pin.is-past{background:var(--surface-3)}
.lad-pin.is-told{background:var(--crit);box-shadow:0 0 0 2px var(--crit-bg)}
.acal-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:16px 0 0;font-size:var(--fs-label)}
.acal-facts dt{color:var(--muted)}
.acal-facts dd{margin:0;color:var(--ink)}
.drawer.is-done{position:relative}
.drawer.is-done::after{content:"✓";position:absolute;inset:0;margin:auto;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:var(--good);color:#fff;font:600 48px/1 var(--font-body);box-shadow:var(--shadow-3);animation:acal-done 520ms var(--ease-out) both}
@keyframes acal-done{from{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:none}}

@media (max-width:1100px){.acal-body{grid-template-columns:minmax(0,1fr)}.acal-tray{position:static}}
/* Phones: the month folds into an agenda of the days that hold something. */
@media (max-width:760px){
  .acal-grid{display:flex;flex-direction:column;background:transparent;border:0;gap:8px;overflow:visible}
  .acal-wd,.acal-day:not(.has-items){display:none}
  .acal-day{min-height:0;border:1px solid var(--line);border-radius:var(--r);padding:10px}
  .acal-day.is-out{background:var(--surface)}
  .acal-day::before{content:attr(data-label);font:600 var(--fs-label)/1.2 var(--font-body);color:var(--ink)}
  .acal-day.is-today::before{color:var(--brand)}
  .acal-dn{display:none}
  .acal-pill{padding:8px 10px;font-size:var(--fs-body)}
  .lad-stops{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .acal-grid.in-next,.acal-grid.in-prev,.content:not(.no-anim) .acal-pill,.acal-pill.is-landed,.acal-pill.is-landed::after,.acal-undo.is-in,
  .lad-fill,.lad-now,.lad-stops li,.lad-pin,.drawer.is-done::after{animation:none}
  .acal-pill,.acal-undo.is-out{transition:none}
  .acal-pill:hover{transform:none}
}

/* ---- State screens: loading and failed-with-a-way-back (2026-10-12) ---- */
.state-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:min(70vh,640px);padding:48px 24px;max-width:560px;margin:0 auto;animation:fade var(--dur-page) var(--ease-out) both}
.state-screen.compact{min-height:min(52vh,460px);padding:32px 20px}
.state-screen h1{margin:8px 0 0;font:600 22px/28px var(--font-ui);color:var(--ink);letter-spacing:-.01em}
.state-screen.compact h1{font-size:19px;line-height:24px}
.state-screen .st-d{margin:0;max-width:46ch;font-size:var(--fs-body);line-height:1.55;color:var(--ink-2)}
.state-screen .st-last{margin:2px 0 0;font-size:var(--fs-caption);color:var(--muted)}
.state-screen .st-last b{color:var(--ink-2);font-weight:600}
.st-ic{position:relative;width:96px;height:96px;display:grid;place-items:center;color:var(--ink-2)}
.st-ic>svg{width:40px;height:40px;position:relative;z-index:1}
.st-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--line-2)}
.state-screen.err .st-ic{color:var(--crit-text)}
.state-screen.err .st-ring{border-color:var(--crit-bg);background:var(--crit-bg);animation:st-breathe 2.4s var(--ease-toggle) infinite}
.state-screen.err.offline .st-ic{color:var(--warn-text)}.state-screen.err.offline .st-ring{border-color:var(--warn-bg);background:var(--warn-bg)}
.state-screen.err.forbidden .st-ic{color:var(--ink-2)}.state-screen.err.forbidden .st-ring{border-color:var(--surface-3);background:var(--surface-3);animation:none}
.state-screen.err.database .st-ic{color:var(--s3)}.state-screen.err.database .st-ring{border-color:var(--s3-soft);background:var(--s3-soft)}
@keyframes st-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.75}}
.st-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.st-retry svg{width:16px;height:16px;transition:transform 420ms var(--ease-out)}
.st-retry:hover svg{transform:rotate(-70deg)}
.st-retry.is-busy svg{animation:st-spin 900ms linear infinite}
@keyframes st-spin{to{transform:rotate(360deg)}}
.st-count{margin:4px 0 0;font-size:var(--fs-caption);color:var(--muted)}
.st-count b{display:inline-block;min-width:18px;font-family:var(--font-mono);color:var(--ink-2)}
.st-tech{margin-top:10px;max-width:100%;font-size:var(--fs-caption);color:var(--muted)}
.st-tech summary{cursor:pointer}
.st-tech code{display:block;margin-top:8px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface-2);font:11px/1.5 var(--font-mono);color:var(--ink-2);text-align:start;word-break:break-word;direction:ltr}
/* Loading: two rings turning at different speeds round the breathing mark. */
.state-screen.load .st-ic{color:var(--brand)}
.st-ring.spin{border-color:transparent;border-top-color:var(--brand);border-right-color:color-mix(in srgb,var(--brand) 35%,transparent);animation:st-spin 1.1s linear infinite}
.st-ring.spin.two{inset:9px;border-top-color:color-mix(in srgb,var(--accent) 80%,transparent);border-right-color:transparent;animation:st-spin 1.7s linear infinite reverse}
.st-mark{position:relative;z-index:1;width:40px;height:40px;object-fit:contain;animation:st-breathe 1.8s var(--ease-toggle) infinite}
.state-screen.load .st-d{transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.state-screen.load .st-d.swap{opacity:0;transform:translateY(4px)}
.st-bar{width:min(240px,70%);height:3px;margin-top:6px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.st-bar i{display:block;width:40%;height:100%;border-radius:2px;background:var(--brand);animation:st-slide 1.4s var(--ease-toggle) infinite}
@keyframes st-slide{from{transform:translateX(-120%)}to{transform:translateX(280%)}}
[dir="rtl"] .st-bar i{animation-name:st-slide-rtl}
@keyframes st-slide-rtl{from{transform:translateX(120%)}to{transform:translateX(-280%)}}
@media (prefers-reduced-motion:reduce){.state-screen,.state-screen.err .st-ring,.st-ring.spin,.st-mark,.st-bar i,.st-retry.is-busy svg{animation:none}.st-retry svg,.state-screen.load .st-d{transition:none}.st-retry:hover svg{transform:none}}

/* ---- Signal ("is it real?") and Relationships (2026-10-12) ---- */
.sig{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px;border-radius:99px;font:600 var(--fs-caption)/16px var(--font-ui);white-space:nowrap;
  background:var(--surface-3);color:var(--ink-2);border:1px solid transparent}
.sig svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2}
.sig.good{background:var(--good-bg);color:var(--good-text)}.sig.warn{background:var(--warn-bg);color:var(--warn-text)}.sig.crit{background:var(--crit-bg);color:var(--crit-text)}
.sig.acc{background:var(--accent-soft);color:var(--accent)}.sig.s3{background:var(--s3-soft);color:var(--s3)}
.sig.lg{padding:4px 12px 4px 9px;font-size:var(--fs-label);line-height:18px}.sig.lg svg{width:13px;height:13px}
.sig.sm{padding:0 6px;font-size:10px;line-height:14px}
.icard-h .sig{flex:none}
.sig-card{position:relative;overflow:hidden}
.sig-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--line-2)}
.sig-card.good::before{background:var(--good)}.sig-card.warn::before{background:var(--warn)}.sig-card.crit::before{background:var(--crit)}
.sig-note{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--ink)}
.sig-kv{margin-top:10px}
.xmr{display:block;width:100%;height:auto;overflow:visible}
.xmr .band{fill:var(--accent);fill-opacity:.06}
.xmr .centre{stroke:var(--line-2);stroke-width:1;stroke-dasharray:4 4}
.xmr .line{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
.xmr .step{fill:none;stroke:var(--s2);stroke-width:1.4;stroke-dasharray:2 3}
.xmr circle{fill:var(--accent);stroke:var(--surface);stroke-width:1.5}
.xmr circle.flag{fill:var(--warn);stroke:var(--warn-bg);stroke-width:3}
.xmr .lim{font:500 9px var(--font-mono);fill:var(--muted)}
.xmr .ax{font:500 9px var(--font-ui);fill:var(--muted)}

.rel-intro{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.rel-intro>div:first-child{flex:1 1 420px;min-width:0}
.rel-page .rel-intro h1{margin:2px 0 4px}
.rel-page .rel-intro .sub{max-width:72ch;margin:0}
.rel-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:22px}
.rel-focus{position:relative;display:inline-flex;align-items:center}
.rel-focus>span{position:absolute;inset-inline-start:9px;display:grid;place-items:center;pointer-events:none;color:var(--muted)}
.rel-focus>span svg{width:13px;height:13px}
.rel-focus .sel{padding-inline-start:28px;min-width:200px}
.rel-all{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-caption) var(--font-body);color:var(--ink-2);cursor:pointer}
.rel-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 12px;font-size:var(--fs-caption)}
.rel-chips .chip svg{width:11px;height:11px}
.rel-tile:disabled{opacity:.35;cursor:default;transform:none}
.rel-tiles{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
/* The story bar: every pair checked, split by verdict; segments filter. */
.rel-story{margin:16px 0 14px}
.rel-bar{display:flex;gap:3px;height:14px;border-radius:99px;overflow:hidden;background:var(--surface-3)}
.rel-seg{flex:0 0 var(--w);min-width:6px;border:0;padding:0;background:none;cursor:pointer;position:relative}
.rel-seg i{display:block;height:100%;border-radius:2px;transform-origin:left;animation:rel-grow 600ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms);transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
[dir="rtl"] .rel-seg i{transform-origin:right}
.rel-seg.good i{background:var(--good)}.rel-seg.acc i{background:var(--accent)}.rel-seg.warn i{background:var(--warn)}.rel-seg.s3 i{background:var(--s3)}.rel-seg.crit i{background:var(--crit)}.rel-seg.none i{background:var(--line-2);opacity:.6;animation:none}
.rel-seg.none{cursor:default}
.rel-seg:hover i,.rel-seg.on i{transform:scaleY(1.35)}
.rel-bar:hover .rel-seg:not(:hover) i{opacity:.45}
@keyframes rel-grow{from{transform:scaleX(0)}to{transform:none}}
.rel-keys{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.rel-key{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:4px 0;color:var(--ink-2);cursor:pointer;font:500 var(--fs-label) var(--font-body);border-bottom:2px solid transparent;transition:color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.rel-key i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.rel-key.good i{background:var(--good)}.rel-key.acc i{background:var(--accent)}.rel-key.warn i{background:var(--warn)}.rel-key.s3 i{background:var(--s3)}.rel-key.crit i{background:var(--crit)}
.rel-key b{font:600 14px var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.rel-key:hover{color:var(--ink)}
.rel-key.on{color:var(--ink);border-bottom-color:currentColor}
.rel-key.good.on{color:var(--good-text)}.rel-key.acc.on{color:var(--accent)}.rel-key.warn.on{color:var(--warn-text)}.rel-key.s3.on{color:var(--s3)}.rel-key.crit.on{color:var(--crit-text)}
.rel-key.none{cursor:default}
/* Groups of cards, one per verdict. */
.rp-sec+.rp-sec{margin-top:22px}
.rp-sec-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.rp-sec-h i{align-self:center;width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.rp-sec.good .rp-sec-h i{background:var(--good)}.rp-sec.acc .rp-sec-h i{background:var(--accent)}.rp-sec.warn .rp-sec-h i{background:var(--warn)}.rp-sec.s3 .rp-sec-h i{background:var(--s3)}.rp-sec.crit .rp-sec-h i{background:var(--crit)}
.rp-sec-h h2{margin:0;font:600 15px/20px var(--font-ui);color:var(--ink)}
.rp-sec-h .n{font:600 var(--fs-caption) var(--font-mono);color:var(--muted);padding:1px 7px;border-radius:99px;background:var(--surface-3)}
.rp-sec-h small{font-size:var(--fs-caption);color:var(--muted)}
/* Pair cards: the findings, ranked, each one a button that opens the pair. */
.rp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;align-content:start}
.rp-mid{display:flex;align-items:center;gap:10px}
.rp-mid .rp-mini{flex:1;min-width:0;height:48px}
.rp-rb{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.05;flex:none}
.rp-rb b{font:600 15px var(--font-mono);font-variant-numeric:tabular-nums}
.rp-rb small{font:500 10px var(--font-mono);color:var(--muted)}
.rp-rb.pos b{color:var(--good-text)}.rp-rb.neg b{color:var(--crit-text)}
.rp-x.pos{color:var(--good-text)}.rp-x.neg{color:var(--crit-text)}
.rp-go{position:absolute;top:12px;inset-inline-end:10px;width:18px;height:18px;color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.rp-go svg{width:14px;height:14px}
.rp-card:hover .rp-go,.rp-card.on .rp-go{opacity:1;transform:none}
[dir="rtl"] .rp-go svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.rel-seg i{animation:none;transition:none}.rel-seg:hover i,.rel-seg.on i{transform:none}.rp-go{transition:none}}
.rp-card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 14px 12px 16px;text-align:start;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);cursor:pointer;
  animation:rp-in 420ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 28ms);
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.rp-card::before{content:"";position:absolute;inset-inline-start:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--line-2)}
.rp-card.good::before{background:var(--good)}.rp-card.warn::before{background:var(--warn)}.rp-card.crit::before{background:var(--crit)}.rp-card.acc::before{background:var(--accent)}.rp-card.s3::before{background:var(--s3)}
.rp-card:hover,.rp-card:focus-visible{box-shadow:var(--shadow-2);border-color:var(--line-2);outline:none}
/* The open card: lifted, tinted and ringed in its verdict's colour, with a
   ring that expands once (transform + opacity only) when it is chosen. */
.rp-card{--rc:var(--line-2)}
.rp-card.good{--rc:var(--good)}.rp-card.warn{--rc:var(--warn)}.rp-card.crit{--rc:var(--crit)}.rp-card.acc{--rc:var(--accent)}.rp-card.s3{--rc:var(--s3)}
.rp-card.on{border-color:var(--rc);box-shadow:0 0 0 1px var(--rc),0 14px 30px -14px var(--rc);transform:translateY(-3px);background:color-mix(in srgb,var(--rc) 8%,var(--surface))}
.rp-card.on::before{width:5px}
.rp-card.on::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--rc);pointer-events:none;animation:rp-ping 640ms var(--ease-out) both}
@keyframes rp-ping{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.07)}}
.rp-card.on .rp-mini path.a{stroke-width:2.4}.rp-card.on .rp-mini path.b{stroke-width:2.2}
.rp-card.on .rp-names b{color:var(--ink)}
.rp-card.on .rp-go{opacity:1;transform:none;background:var(--rc);color:#fff;border-radius:50%;display:grid;place-items:center}
.rp-card.on .rp-go svg{width:11px;height:11px;stroke-width:3}
.rp-sel{position:absolute;top:11px;inset-inline-end:34px;font:600 11px/18px var(--font-ui);letter-spacing:0;color:var(--rc);animation:fade 300ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.rp-card.on::after,.rp-sel{animation:none}.rp-card.on,.rp-card.on:hover{transform:none}}
.rp-top{display:flex;align-items:center;gap:8px}
.rp-r{margin-inline-start:auto;font:500 var(--fs-caption) var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-names{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:600 13px/17px var(--font-ui)}
.rp-names b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rp-x{font:600 11px var(--font-mono);color:var(--muted)}
.rp-arrow{display:inline-block;padding:1px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font:600 10px/14px var(--font-mono);white-space:nowrap}
.rp-mini{display:block;width:100%;height:44px;overflow:visible}
.rp-mini path.a{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
.rp-mini path.b{fill:none;stroke:var(--s2);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:4 3}
.rp-line{margin:0;font-size:var(--fs-caption);line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@keyframes rp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rel-side{position:sticky;top:72px}
.rel-title{min-width:0}.rel-title h2{margin:0}.rel-title small{display:block;font-size:var(--fs-caption);color:var(--muted);margin-top:2px}
.rel-detail.crit{border-color:color-mix(in srgb,var(--crit) 40%,var(--line))}
.rel-ov-wrap{animation:fade 320ms var(--ease-out) both}
.rel-checks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}
.rel-checks li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:var(--fs-label)}
.rel-checks li .l{display:block;color:var(--ink)}
.rel-checks li small{display:block;font-size:var(--fs-caption);color:var(--muted);line-height:1.3}
.rel-checks li b{font:500 12.5px var(--font-mono);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.rel-ok{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:600 11px/1 var(--font-ui);font-style:normal}
.rel-ok.y{background:var(--good-bg);color:var(--good-text)}.rel-ok.n{background:var(--crit-bg);color:var(--crit-text)}
.rel-legend-v{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 16px 12px;font-size:var(--fs-caption);color:var(--ink-2)}
.rel-legend-v i{display:inline-block;vertical-align:middle;margin-inline-end:6px}
.rel-legend-v i.d{width:8px;height:8px;border-radius:50%}
.rel-legend-v i.d.good{background:var(--good)}.rel-legend-v i.d.acc{background:var(--accent)}.rel-legend-v i.d.warn{background:var(--warn)}.rel-legend-v i.d.s3{background:var(--s3)}.rel-legend-v i.d.crit{background:var(--crit)}
.rel-legend-v i.sw{width:14px;height:10px;border-radius:2px}
.rel-legend-v i.sw.pos{background:color-mix(in srgb,var(--good) 60%,transparent)}.rel-legend-v i.sw.neg{background:color-mix(in srgb,var(--crit) 60%,transparent)}
.rel-heat .hc.rc.faint{opacity:.35}
.rel-heat .hi{outline:1px solid color-mix(in srgb,var(--ink) 35%,transparent);outline-offset:-1px}
.rel-heat .hl.hi,.rel-heat .ht.hi{color:var(--ink);font-weight:600;outline:none}
.rel-heat .hc.rc.faint.hi{opacity:.8}
/* CorrMap — the correlation map (lower triangle, bubbles sized by |r|). */
.cm-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-wrap{position:relative;overflow:auto;padding-bottom:4px;--cm-cell:32px}
.cm{display:grid;gap:3px;width:max-content;max-width:100%;align-items:stretch}
/* The strongest links, laid over the empty half of the triangle. */
.cm-top{position:absolute;top:100px;inset-inline-end:12px;width:min(44%,400px);padding:12px 14px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);box-shadow:var(--shadow-1);backdrop-filter:blur(6px)}
.cm-top-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:600 13px var(--font-ui);color:var(--ink)}
.cm-top-h svg{width:14px;height:14px;color:var(--accent)}
.cm-top-h span{font:500 var(--fs-caption) var(--font-body);color:var(--muted)}
.cm-tl{display:grid;grid-template-columns:22px minmax(0,1fr) auto 10px;align-items:center;gap:8px;width:100%;padding:5px 6px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);cursor:pointer;text-align:start;
  animation:fade 320ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 40ms);transition:background var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.cm-tl:hover{background:var(--surface-2);transform:translateX(2px)}
[dir="rtl"] .cm-tl:hover{transform:translateX(-2px)}
.cm-tl .bub{display:block;width:calc(var(--s,.6) * 22px);height:calc(var(--s,.6) * 22px);border-radius:50%;margin:auto}
.cm-tl .n{display:flex;align-items:center;gap:5px;min-width:0;font:500 12px/16px var(--font-ui)}
.cm-tl .n b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-tl .n em{font:600 10px var(--font-mono);font-style:normal;color:var(--muted)}
.cm-tl .r{font:600 11.5px var(--font-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.cm-tl i.d{width:7px;height:7px;border-radius:50%}
.cm-tl i.d.good{background:var(--good)}.cm-tl i.d.acc{background:var(--accent)}.cm-tl i.d.warn{background:var(--warn)}.cm-tl i.d.s3{background:var(--s3)}.cm-tl i.d.crit{background:var(--crit)}
@media (max-width:1180px){.cm-top{display:none}}
.cm-corner{grid-column:1}
.cm-ch{position:relative;height:88px;display:flex;align-items:flex-end;justify-content:center;border:0;background:none;padding:0 0 4px;cursor:pointer;border-radius:var(--r-xs)}
.cm-ch.empty{cursor:default}
.cm-ch span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font:500 10.5px/1 var(--font-ui);color:var(--muted);white-space:nowrap;max-height:84px;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur-micro) var(--ease-out)}
.cm-ch.hi span,.cm-ch:hover span,.cm-ch.on span{color:var(--ink);font-weight:600}
.cm-rl{display:flex;align-items:center;gap:8px;min-width:0;padding:0 8px 0 0;border:0;background:none;text-align:start;cursor:pointer;border-radius:var(--r-xs);font:500 11px/1.2 var(--font-ui);color:var(--ink-2);transition:color var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out)}
.cm-rl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-rl:hover,.cm-rl.hi{color:var(--ink);background:var(--surface-2)}
.cm-rl.hi{font-weight:600}
.cm-rl.on{color:var(--ink);font-weight:600;background:var(--accent-soft)}
.cm-band{flex:none;width:3px;align-self:stretch;border-radius:2px;background:var(--a);opacity:.9}
.cm-arow{display:flex;align-items:center;gap:8px;height:16px;margin-top:6px;font:600 var(--fs-caption)/1 var(--font-ui);letter-spacing:0;color:var(--muted)}
.cm-arow::before{content:"";width:10px;height:3px;border-radius:2px;background:var(--a)}
.cm-gap,.cm-void{pointer-events:none}
.cm-c{position:relative;width:var(--cm-cell,32px);height:var(--cm-cell,32px);border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer;border-radius:50%;
  transition:opacity 260ms var(--ease-out)}
.cm-c .bub{display:block;width:calc(var(--s,.5) * 100%);height:calc(var(--s,.5) * 100%);border-radius:50%;
  animation:cm-pop 460ms var(--ease-out) both;animation-delay:calc(var(--d,0) * 14ms);
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
.cm-c em{position:absolute;inset:0;display:grid;place-items:center;font:600 9.5px var(--font-mono);font-style:normal;color:var(--ink);pointer-events:none}
.cm-c.faint .bub{opacity:.3}
.cm-c.faint:hover .bub{opacity:.85}
.cm-c.none{cursor:default}
.cm-c.none::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--line)}
.cm-c.dim{opacity:.12}
.cm-c.hi{opacity:1}
.cm-c:hover .bub,.cm-c:focus-visible .bub{transform:scale(1.25);box-shadow:var(--shadow-2)}
.cm-c:focus-visible{outline:none}
.cm-c.on .bub{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.cm-c[class*=" v-"]::after{content:"";position:absolute;top:1px;inset-inline-end:1px;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1.5px var(--surface)}
.cm-c.faint::after{display:none}
.cm-c.v-robust::after{background:var(--good)}.cm-c.v-lagged::after{background:var(--accent)}.cm-c.v-fragile::after{background:var(--warn)}.cm-c.v-volume::after{background:var(--s3)}.cm-c.v-contradicts::after{background:var(--crit)}
.cm.focus .cm-c:not(.dim) .bub{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent)}
@keyframes cm-pop{from{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:none}}
.cm-legend{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-caption);color:var(--ink-2)}
.cm-scale{display:inline-flex;align-items:center;gap:6px;font:500 10px var(--font-mono);color:var(--muted)}
.cm-scale b{width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--crit),color-mix(in srgb,var(--crit) 15%,transparent) 45%,color-mix(in srgb,var(--good) 15%,transparent) 55%,var(--good))}
.cm-lv{display:inline-flex;align-items:center;gap:4px 10px;flex-wrap:wrap}
.cm-lv i.d,.cm-fp i.d{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:2px}
.cm-lv i.d.good,.cm-fp i.d.good{background:var(--good)}.cm-lv i.d.acc,.cm-fp i.d.acc{background:var(--accent)}.cm-lv i.d.warn,.cm-fp i.d.warn{background:var(--warn)}.cm-lv i.d.s3,.cm-fp i.d.s3{background:var(--s3)}.cm-lv i.d.crit,.cm-fp i.d.crit{background:var(--crit)}
.cm-cap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:40px;margin-top:10px;padding:9px 12px;border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--fs-label);color:var(--ink)}
.cm-cap.muted{color:var(--muted);font-size:var(--fs-caption)}
.cm-cap.focus{background:var(--accent-soft);animation:fade 300ms var(--ease-out) both}
.cm-ft{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.cm-ft svg{width:14px;height:14px;color:var(--accent)}
.cm-fp{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);cursor:pointer;font:500 var(--fs-caption) var(--font-body);
  transition:transform var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.cm-fp:hover{border-color:var(--line-2)}
.cm-fp span{font:600 11px var(--font-mono)}
.cm-fp.pos span{color:var(--good-text)}.cm-fp.neg span{color:var(--crit-text)}
.cm-detail{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows 320ms var(--ease-out),opacity 260ms var(--ease-out),margin-top 320ms var(--ease-out)}
.cm-detail>div{min-height:0;overflow:hidden}
.cm-detail.open{grid-template-rows:1fr;opacity:1;margin-top:12px}
.cm-detail .rel-detail{margin:0;animation:none}
.cm-close{margin-inline-start:6px}
.cm-tip{position:fixed;top:0;left:0;z-index:60;width:272px;padding:10px 12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-3);pointer-events:none;opacity:0;transform:translate(-9999px,-9999px);
  transition:opacity 140ms var(--ease-out)}
.cm-tip.show{opacity:1}
.cm-tip-h{display:flex;align-items:center;gap:6px;font:600 12.5px/16px var(--font-ui);color:var(--ink);margin-bottom:4px}
.cm-tip-h b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-tip .rp-mini{height:48px}
.cm-tip-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.cm-tip-f .mono{font:500 11px var(--font-mono);color:var(--ink-2)}
.cm-tip-k{margin-top:6px;font-size:10px;color:var(--muted)}
.cm-th button{font-family:var(--font-mono)}
@media (prefers-reduced-motion:reduce){.cm-c,.cm-rl,.cm-ch span,.cm-c .bub,.cm-fp,.cm-detail,.cm-tip{transition:none}.cm-c .bub,.cm-cap.focus{animation:none}.cm-c:hover .bub,.cm-fp:hover{transform:none}}
/* Forecast tab: the checked relationships as diverging bars. */
.cr-list{display:grid;gap:4px}
.cr-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(90px,1fr) 46px auto;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;
  animation:fade 300ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 40ms);transition:background var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.cr-row:hover{background:var(--surface-2);transform:translateX(2px)}
[dir="rtl"] .cr-row:hover{transform:translateX(-2px)}
.cr-names{display:flex;align-items:center;gap:6px;min-width:0;font:600 12.5px/16px var(--font-ui)}
.cr-names b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-names em{flex:none;font:600 10px/14px var(--font-mono);font-style:normal;color:var(--accent);padding:0 6px;border-radius:99px;background:var(--accent-soft)}
.cr-bar{position:relative;height:8px;border-radius:4px;background:var(--surface-3)}
.cr-bar::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line-2)}
.cr-bar i{position:absolute;top:0;bottom:0;width:var(--w);border-radius:4px;transform-origin:left;animation:cr-grow 500ms var(--ease-out) both}
.cr-bar i.pos{left:50%;background:var(--good)}
.cr-bar i.neg{right:50%;background:var(--crit);transform-origin:right}
@keyframes cr-grow{from{transform:scaleX(0)}to{transform:none}}
.cr-r{font:500 12px var(--font-mono);color:var(--ink-2);text-align:end;font-variant-numeric:tabular-nums}
.cr-foot{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 16px 12px;border-top:1px solid var(--line);font-size:var(--fs-caption);color:var(--ink-2)}
.cr-sum b{font-family:var(--font-ui)}
.cr-sum.good b{color:var(--good-text)}.cr-sum.acc b{color:var(--accent)}.cr-sum.warn b{color:var(--warn-text)}.cr-sum.s3 b{color:var(--s3)}.cr-sum.crit b{color:var(--crit-text)}
.bench-tbl td.name small,.bench-tbl td.num small{display:block;font-size:var(--fs-caption);color:var(--muted);white-space:normal;line-height:1.3;max-width:220px}
@media (max-width:1100px){.rel-side{position:static}}
@media (prefers-reduced-motion:reduce){.cr-row,.cr-bar i{animation:none}.cr-row{transition:none}.cr-row:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.rp-card,.rel-ov-wrap{animation:none}.rp-card{transition:none}.rp-card:hover{transform:none}}
.rel-tile{display:inline-flex;align-items:baseline;gap:7px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink-2);cursor:pointer;
  font:500 var(--fs-label)/1 var(--font-body);transition:transform var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),opacity var(--dur-micro) var(--ease-out)}
.rel-tile b{font:600 15px/1 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.rel-tile:hover{border-color:var(--line-2)}
.rel-tile.on{border-color:currentColor}
.rel-tile.good{color:var(--good-text)}.rel-tile.warn{color:var(--warn-text)}.rel-tile.crit{color:var(--crit-text)}.rel-tile.acc{color:var(--accent)}.rel-tile.s3{color:var(--s3)}
.rel-tile.good.on{background:var(--good-bg)}.rel-tile.warn.on{background:var(--warn-bg)}.rel-tile.crit.on{background:var(--crit-bg)}.rel-tile.acc.on{background:var(--accent-soft)}.rel-tile.s3.on{background:var(--s3-soft)}.rel-tile.none.on{background:var(--surface-3)}
.rel-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr);gap:16px;align-items:start}
.rel-main>.card{margin-top:0}
.rel-heat .hc.rc{position:relative;border:0;padding:0;font:600 9px var(--font-mono);color:var(--ink);cursor:pointer;
  animation:rel-in 360ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 14ms);
  transition:transform var(--dur-micro) var(--ease-out),opacity 240ms var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
.rel-heat .hc.rc:hover,.rel-heat .hc.rc:focus-visible{transform:scale(1.18);z-index:2;box-shadow:var(--shadow-2);outline:none}
.rel-heat .hc.rc.on{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--surface);z-index:1}
.rel-heat .hc.rc.dim{opacity:.14}
.rel-heat .hc.rc::after{content:"";position:absolute;top:2px;inset-inline-end:2px;width:6px;height:6px;border-radius:50%;opacity:0;transform:scale(.4);transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.rel-heat .hc.rc-robust::after{background:var(--good);opacity:1;transform:none}
.rel-heat .hc.rc-lagged::after{background:var(--accent);opacity:1;transform:none}
.rel-heat .hc.rc-fragile::after{background:var(--warn);opacity:1;transform:none}
.rel-heat .hc.rc-volume::after{background:var(--s3);opacity:1;transform:none}
.rel-heat .hc.rc-contradicts::after{background:var(--crit);opacity:1;transform:none;box-shadow:0 0 0 2px var(--crit-bg)}
.rel-heat .hc.self{background:var(--surface-3)}
.rel-heat .hc.none{background:transparent}
@keyframes rel-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.rel-detail{animation:fade var(--dur-page) var(--ease-out) both}
.rel-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--ink-2);margin-bottom:6px}
.rel-legend i{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-inline-end:6px;background:var(--accent)}
.rel-legend i.b{background:var(--s2)}
.rel-overlay{display:block;width:100%;height:auto;overflow:visible}
.rel-overlay .g{stroke:var(--grid);stroke-width:1}
.rel-overlay .ax{font:500 9px var(--font-ui);fill:var(--muted)}
.rel-overlay path.a{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.rel-overlay path.b{fill:none;stroke:var(--s2);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 4}
.rel-overlay circle.a{fill:var(--accent);stroke:var(--surface);stroke-width:1.5}
.rel-overlay circle.b{fill:var(--s2);stroke:var(--surface);stroke-width:1.5}
.rel-lagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px;font-size:var(--fs-caption);color:var(--ink-2)}
.rel-lags button{display:inline-flex;flex-direction:column;align-items:center;gap:1px;height:auto;padding:4px 9px;line-height:1.1}
.rel-lags button span{font-size:10px;color:var(--muted)}
.rel-lags button b{font:600 11px var(--font-mono);color:var(--ink-2)}
.rel-lags button.sig b{color:var(--accent)}
.rel-lags button.on b{color:var(--ink)}
.rel-leadtxt{font-weight:600;color:var(--accent)}
.rel-scatter{margin-top:10px}
.rel-scatter summary{cursor:pointer;font:500 var(--fs-caption) var(--font-body);color:var(--ink-2)}
.rel-scatter .chart{margin-top:8px}
.rel-leads td.name small{display:block;font-size:var(--fs-caption);color:var(--muted)}
.rel-leads .rel-arrow span{display:inline-block;padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font:600 var(--fs-caption) var(--font-mono);white-space:nowrap}
.rel-leads tr.click{cursor:pointer;animation:fade 300ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 30ms)}
.rel-leads tr.on td{background:var(--accent-soft)}
@media (max-width:1100px){.rel-main{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .rel-heat .hc.rc,.rel-detail,.rel-leads tr.click{animation:none}
  .rel-heat .hc.rc,.rel-heat .hc.rc::after,.rel-tile{transition:none}
  .rel-heat .hc.rc:hover,.rel-tile:hover{transform:none}
}

/* ---------- UI notes pass (2026-10-18): tooltips, icon actions, less text ----------
   Workflow buttons are icons with a tooltip; counters say what they count and
   go quiet at zero; tables get a real footer; the Explore tree folds away. */
/* Reading workflow: validate / approve / reject / reopen as icons */
.wfbtn{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);display:inline-grid;place-items:center;color:var(--ink-2);cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-micro) var(--ease-out)}
.wfbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wfbtn:active{transform:scale(.94)}
.wfbtn.ok:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.wfbtn.go{background:var(--good-bg);color:var(--good-text);border-color:transparent}
.wfbtn.go:hover{background:var(--good);color:#fff}
.wfbtn.no{color:var(--crit-text)}
.wfbtn.no:hover{background:var(--crit);color:#fff;border-color:var(--crit)}
.wfbtn.undo:hover{background:var(--surface-2);color:var(--ink)}
.wfbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.iconbtn.sm{width:28px;height:28px}
.iconbtn.sm svg{width:15px;height:15px}
.state.good .ring{background:var(--good-bg)}.state.good .ring svg{stroke:var(--good)}

/* Decisions & actions: the five counters */
.act-stat{font:inherit;color:inherit;width:100%;text-align:start;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-micro) var(--ease-out)}
.act-stat:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.act-stat:active{transform:translateY(1px)}
.act-stat:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.act-stat.is-zero .v{color:var(--muted);font-weight:400}
.act-stat .none{color:var(--muted)}
.act-owners{cursor:default}
.act-owners .owners{margin-top:6px;display:grid;gap:2px}
.act-owners .owners .row{display:flex;align-items:center;gap:8px}
.act-owners .owners .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.act-owners .owners b{font:500 13px var(--font-mono);color:var(--ink)}

/* Decide now: filter chips with counts, a firmer header, numbers at the start */
.decide-filter{padding:0 18px 14px}
.decide-filter .chip .n{margin-inline-start:4px;font:500 var(--fs-caption)/1 var(--font-mono);background:var(--surface-3);padding:2px 6px;border-radius:var(--r-full);color:var(--ink-2);font-variant-numeric:tabular-nums}
.decide-filter .chip.on .n{background:var(--accent);color:#fff}
.decide-tbl th{height:40px;font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--ink-2);border-top:1px solid var(--line)}
html[lang="ar"] .decide-tbl th{letter-spacing:0;text-transform:none;font-size:var(--fs-label)}
.decide-tbl td.dval,.decide-tbl td.dgap{text-align:start;white-space:nowrap}
.decide-tbl .dv{display:block;font:600 15px/20px var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.decide-tbl .du{display:block;font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted);max-width:110px;white-space:normal}
.decide-tbl td.dgap .dg{line-height:20px}

/* Explore: the tree folds away */
/* The KPI tree minimises into a strip at the edge (the button sits in the
   tree's own head, beside the search); the strip holds the button that brings
   it back. A narrow screen never hides the tree, so the button is not shown. */
.explore.tree-hidden{grid-template-columns:44px minmax(0,1fr)}
.tree-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.tree-head .tree-search{flex:1;min-width:0;margin-bottom:0}
.extree{width:32px;height:32px;flex:none;color:var(--muted)}
.extree svg{width:16px;height:16px;transition:transform var(--dur-micro) var(--ease-out)}
.extree:hover{color:var(--accent)}
.extree:hover svg{transform:translateX(-1.5px)}
.tree-card.is-min{padding:6px;display:flex;justify-content:center}
.tree-card.is-min .extree:hover svg{transform:translateX(1.5px)}
html[dir="rtl"] .extree svg{transform:scaleX(-1)}
html[dir="rtl"] .extree:hover svg{transform:scaleX(-1) translateX(-1.5px)}
html[dir="rtl"] .tree-card.is-min .extree:hover svg{transform:scaleX(-1) translateX(1.5px)}
@media (max-width:1000px){.extree{display:none}}

/* Explore: the data table. Sticky KPI column, one value per cell with its
   status as an edge, target and fraction small beneath, period column set apart */
.dx>div{min-width:0}
.dx-wrap{max-height:70vh}
/* Data table (Pages.data.table): a heat map of status tints, a sparkline per
   KPI, the gap under every number, a reach bar in the Period column, and a
   crosshair (row + column) under the pointer. */
.dx-tbl th{height:38px;font-weight:600;color:var(--ink);background:var(--surface-2);transition:color var(--dur-micro) var(--ease-out)}
.dx-tbl th.is-last,.dx-tbl th.hl{color:var(--accent)}
.dx-tbl th.dx-p small{display:block;font:400 var(--fs-caption)/12px var(--font-body);color:var(--muted)}
.dx-tbl th.dx-k,.dx-tbl td.dx-k{position:sticky;inset-inline-start:0;min-width:200px;box-shadow:inset -1px 0 0 var(--line)}
.dx-tbl td.dx-k{background:var(--surface)}
html[dir="rtl"] .dx-tbl th.dx-k,html[dir="rtl"] .dx-tbl td.dx-k{box-shadow:inset 1px 0 0 var(--line)}
.dx-tbl th.dx-k{z-index:3;background:var(--surface-2)}
.dx-tbl td.dx-k{z-index:2;height:auto;padding:8px 12px}
.dx-tbl td.dx-k .dxs,.dx-tbl td.dx-k .dxs svg{display:block;width:96px;height:22px}
.dx-tbl td.dx-k .dxs{margin-top:5px;opacity:.85}
.dx-tbl td.dx-c{height:auto;padding:8px 10px 8px 12px;vertical-align:top;position:relative;min-width:84px;transition:background var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
.dx-tbl td.dx-c .dxv{display:block;font:600 13px/18px var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.dx-tbl td.dx-c .dxt{display:block;font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted);white-space:nowrap}
.dx-tbl td.dx-c .dxt.nd{font-family:var(--font-mono)}
.dx-tbl td.dx-c .dxg{display:block;font:600 10.5px/14px var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dx-tbl td.dx-c.good .dxg{color:var(--good-text)}
.dx-tbl td.dx-c.warn .dxg{color:var(--warn-text)}
.dx-tbl td.dx-c.crit .dxg{color:var(--crit-text)}
.dx-tbl td.dx-c.is-none .dxv{color:var(--line-2);font-weight:400}
.dx-tbl.has-st td.dx-c::before{content:"";position:absolute;inset-inline-start:4px;top:9px;bottom:9px;width:3px;border-radius:2px;background:transparent}
.dx-tbl.has-st td.dx-c.good::before{background:var(--good)}
.dx-tbl.has-st td.dx-c.warn::before{background:var(--warn)}
.dx-tbl.has-st td.dx-c.crit::before{background:var(--crit)}
.dx-tbl.has-st td.dx-c.good{background:color-mix(in srgb,var(--good-bg) 55%,transparent)}
.dx-tbl.has-st td.dx-c.warn{background:color-mix(in srgb,var(--warn-bg) 60%,transparent)}
.dx-tbl.has-st td.dx-c.crit{background:color-mix(in srgb,var(--crit-bg) 60%,transparent)}
.dx-tbl.has-st tbody tr:hover td.dx-c.good{background:var(--good-bg)}
.dx-tbl.has-st tbody tr:hover td.dx-c.warn{background:var(--warn-bg)}
.dx-tbl.has-st tbody tr:hover td.dx-c.crit{background:var(--crit-bg)}
/* The sticky Period column stays opaque: a solid tint, not a see-through one. */
.dx-tbl.has-st td.dx-p.good{background:var(--good-bg)}
.dx-tbl.has-st td.dx-p.warn{background:var(--warn-bg)}
.dx-tbl.has-st td.dx-p.crit{background:var(--crit-bg)}
.dx-tbl tr.dx-r>td.hl{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.dx-tbl tr.dx-r>td.dx-c.hl:not(.good):not(.warn):not(.crit){background:var(--accent-soft)}
.dx-tbl td.dx-p,.dx-tbl th.dx-p{position:sticky;inset-inline-end:0;z-index:2;background:var(--surface-2);box-shadow:inset 1px 0 0 var(--line);min-width:116px}
html[dir="rtl"] .dx-tbl td.dx-p,html[dir="rtl"] .dx-tbl th.dx-p{box-shadow:inset -1px 0 0 var(--line)}
.dx-tbl td.dx-p .dxv{font-size:15px;line-height:20px}
.dx-tbl td.dx-p .dxbar{display:block;height:4px;margin:6px 0 2px;border-radius:2px;background:var(--line);overflow:hidden}
.dx-tbl td.dx-p .dxbar i{display:block;height:100%;border-radius:2px;background:var(--muted);transform-origin:0 50%;animation:dxGrow .6s var(--ease-out) both}
html[dir="rtl"] .dx-tbl td.dx-p .dxbar i{transform-origin:100% 50%}
.dx-tbl td.dx-p.good .dxbar i{background:var(--good)}
.dx-tbl td.dx-p.warn .dxbar i{background:var(--warn)}
.dx-tbl td.dx-p.crit .dxbar i{background:var(--crit)}
.dx-tbl td.dx-p .chip{margin-top:5px}
.dx-tbl tbody tr:hover td.dx-k,.dx-tbl tbody tr:hover td.dx-p{background:var(--surface-3)}
.dx-tbl tr.grp td.dx-k{height:30px;padding:0 12px;white-space:nowrap}
.dx-tbl tr.grp .dx-gn{margin-inline-start:10px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.dx-tbl tr.grp .dx-gn b{color:var(--crit-text);font-weight:600}
.dx-tbl tbody tr.dx-r{animation:dxRise .32s var(--ease-out) both;animation-delay:calc(var(--i,0) * 22ms)}
@keyframes dxRise{from{opacity:0;transform:translateY(6px)}}
@keyframes dxGrow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.dx-tbl tbody tr.dx-r,.dx-tbl td.dx-p .dxbar i{animation:none}}

/* Insight rows: the tags share one cell, the action never leaves the row */
.irow-tags{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.irow-a{flex:none;white-space:nowrap}

/* Correlation analysis: the plot and the reading stack when the card is narrow */
.corr-pair>.card{container-type:inline-size;min-width:0}
.corr-plot,.corr-read{min-width:0}
.corr-read .mp-row b{min-width:0;overflow-wrap:anywhere}
@container (max-width:680px){.corr-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1280px){.corr-pair{grid-template-columns:minmax(0,1fr)}}

/* Certified close: three steps, the current one lit */
.certify-cta{background:linear-gradient(135deg,var(--surface),var(--surface-2))}
.certify-cta.is-ready{background:linear-gradient(135deg,var(--surface),var(--good-bg))}
.cc-eyebrow{font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--muted);margin-bottom:2px}
html[lang="ar"] .cc-eyebrow{letter-spacing:0}
.cc-steps{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.cc-step{position:relative;display:flex;align-items:center;gap:8px;min-width:132px;padding:8px 12px 8px 8px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--muted);overflow:hidden;cursor:help}
.cc-step .cc-ic{width:28px;height:28px;border-radius:var(--r-full);display:grid;place-items:center;background:var(--surface-3);flex:none}
.cc-step .cc-ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cc-step .cc-txt{display:flex;flex-direction:column;min-width:0}
.cc-step .cc-txt b{font:600 var(--fs-label)/16px var(--font-body);color:var(--ink-2)}
.cc-step .cc-txt small{font:400 var(--fs-caption)/14px var(--font-mono);color:var(--muted)}
.cc-step.is-cur{border-color:var(--accent);color:var(--accent)}
.cc-step.is-cur .cc-ic{background:var(--accent-soft);color:var(--accent)}
.cc-step.is-cur .cc-txt b{color:var(--ink)}
.cc-step.is-on{border-color:var(--good);color:var(--good-text)}
.cc-step.is-on .cc-ic{background:var(--good);color:#fff}
.cc-step.is-on .cc-txt b{color:var(--good-text)}
.cc-bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--surface-3)}
.cc-bar i{display:block;height:100%;background:var(--accent)}
.cc-go{white-space:nowrap}
.certify-cta .callout{margin-top:12px}

/* History drawer: a strip of facts, entries under their day */
.hist-facts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border-radius:var(--r-sm);background:var(--surface-2)}
.hf{display:flex;flex-direction:column;gap:1px;font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted)}
.hf b{font:600 14px/18px var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.hf.ct b{color:var(--crit-text)}
.tl-day{display:inline-block;margin:2px 0 10px;padding-inline-end:6px;background:var(--surface);font:600 var(--fs-caption)/16px var(--font-body);letter-spacing:0;color:var(--muted)}
html[lang="ar"] .tl-day{letter-spacing:0}
.hist-tl:empty{display:none}

/* Team & permissions: one line per person, the role's grants folded into a pill */
.users-tbl td{height:52px}
.users-tbl td.name{white-space:nowrap}
.users-tbl td.name .avatar{display:inline-grid;vertical-align:middle;margin-inline-end:10px}
.users-tbl td.name .who{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1.2}
.users-tbl td.name .who b{font-weight:500}
.users-tbl td.name .who small{display:block;font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted)}
.avatar.sm{width:28px;height:28px;font-size:10px}
.users-tbl tr.is-off td>*{opacity:.55}
.users-tbl tr.is-off td .toggle,.users-tbl tr.is-off td .row{opacity:1}
.users-tbl td.dact .row{justify-content:flex-end}
.perm-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:460px;padding:4px 0}
.perm-role{display:inline-flex;align-items:center;gap:4px;font:500 var(--fs-caption)/14px var(--font-body);color:var(--muted);padding:3px 8px;border-radius:var(--r-full);background:var(--surface-3);white-space:nowrap;cursor:help}
.perm-role svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}
.perm-chip{cursor:pointer;gap:4px;border:1px dashed var(--line-2);background:var(--surface);color:var(--ink-2);transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.perm-chip svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2}
.perm-chip:hover{border-color:var(--accent);color:var(--accent)}
.perm-chip.on{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}

/* Table footer (paging): its own bar, never over the rows */
.tbl-foot{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2);font-size:var(--fs-label);color:var(--muted)}
.settings-panel .tbl-foot{margin:0 -24px -22px;border-radius:0 0 18px 18px}
.settings-panel .tbl-wrap:has(+.tbl-foot){margin-bottom:0;border-radius:0}

/* Settings › My account › Connect a phone: the pairing code beside the address
   the app would otherwise be given by hand. The code is always black on white
   (a camera reads it best that way), so the card frames it rather than tints it. */
.pair{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-top:12px}
.pair-qr{width:200px;height:200px;flex:none;padding:6px;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.pair-text{flex:1;min-width:220px}
.pair-text code{display:block;margin-top:6px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);word-break:break-all}

/* Data chart (Pages.data.lines / tiles): up to six KPIs on one % axis with
   the tolerances as bands, names at the line ends and hover-to-focus; more
   KPIs as small multiples by area. Motion: a reveal by transform, rise-ins. */
.dxc .dxc-good{fill:var(--good);opacity:.07}
.dxc .dxc-warn{fill:var(--warn);opacity:.09}
.dxc .dxc-tl{fill:var(--ink-2);font-size:var(--fs-caption)}
.dxc text.dxc-end{font-size:11px;font-weight:600}
.dxc .s{transition:opacity var(--dur-micro) var(--ease-out)}
.dxc[data-focus] .s:not(.is-focus){opacity:.15}
.dxc .dxc-reveal{transform-box:fill-box;transform-origin:left;animation:dxReveal .9s var(--ease-out) both}
@keyframes dxReveal{from{transform:scaleX(0)}}
.dxc-legend button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px}
.dxc-legend button:hover,.dxc-legend button.is-focus{background:var(--surface-2)}
.dxc-legend i.b{background:var(--good);opacity:.35}
.dx-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.dx-tiles-grp{grid-column:1/-1;font:600 11px var(--font-ui);letter-spacing:0;color:var(--muted);padding:8px 2px 0}
.dx-tiles-grp span{margin-inline-start:8px;font-weight:500;letter-spacing:0;text-transform:none}
.dx-tile{display:block;padding:10px 12px 8px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:inset 3px 0 0 var(--line-2);transition:transform var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out);animation:dxRise .32s var(--ease-out) both;animation-delay:calc(var(--i,0) * 18ms)}
.dx-tile.good{box-shadow:inset 3px 0 0 var(--good)}
.dx-tile.warn{box-shadow:inset 3px 0 0 var(--warn)}
.dx-tile.crit{box-shadow:inset 3px 0 0 var(--crit)}
.dx-tile:hover{border-color:var(--line-2)}
.dx-tile-h{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:6px}
.dx-tile-n{min-width:0}
.dx-tile-n b{display:block;font:600 13px/17px var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-tile-n small,.dx-tile-v small{display:block;font:400 var(--fs-caption)/14px var(--font-body);color:var(--muted)}
.dx-tile-v{text-align:end;flex:none}
.dx-tile-v b{display:block;font:600 15px/18px var(--font-mono);font-variant-numeric:tabular-nums}
.dx-tile-v small{font-family:var(--font-mono);font-weight:600}
.dx-tile.good .dx-tile-v small{color:var(--good-text)}
.dx-tile.warn .dx-tile-v small{color:var(--warn-text)}
.dx-tile.crit .dx-tile-v small{color:var(--crit-text)}
.dx-tile svg{display:block;width:100%;height:auto;overflow:visible}
.dx-tile .dx-tile-a{fill:var(--accent);opacity:.1}
.dx-tile.good .dx-tile-a{fill:var(--good)}
.dx-tile.warn .dx-tile-a{fill:var(--warn)}
.dx-tile.crit .dx-tile-a{fill:var(--crit)}
.dx-tile .dx-tile-l{fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dx-tile .dx-tile-t{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:4 3}
.dx-tile .pt{fill:var(--surface);stroke-width:1.8}
.dx-tile .pt.good{stroke:var(--good)}
.dx-tile .pt.warn{stroke:var(--warn)}
.dx-tile .pt.crit{stroke:var(--crit)}
.dx-tile .pt.none{stroke:var(--muted)}
.dx-tile-x{display:flex;justify-content:space-between;font:400 10.5px/14px var(--font-body);color:var(--muted);margin-top:2px}
@media (prefers-reduced-motion:reduce){.dx-tile,.dxc .dxc-reveal{animation:none}.dx-tile:hover{transform:none}}
.dxc-legend button.is-off{opacity:.55}
.dxc-legend button.is-off i{background:var(--line-2)!important}
.dxc-legend button small{color:var(--muted);font-size:var(--fs-caption)}


/* ============================================================================
   Glass (2026-11-08, html.glass, on in index.html). The reel's look, kept
   quiet enough for a plant's management screen: every surface is the same
   translucent pane — the rail, the top bar, every card, tile, callout and
   pop-over — with the same 12 px radius, the same hairline edge, the same
   top highlight and the same blur, over a ground with three slow colour
   orbs that give the blur something to work on. Symmetric by construction:
   one token set, one selector list. Nested cards drop the blur (a pane
   inside a pane needs none). Solid again under prefers-reduced-transparency,
   and the orbs stand still under prefers-reduced-motion.
   ========================================================================== */
html.glass{
  --glass-bg:rgba(255,255,255,.64); --glass-bg-2:rgba(255,255,255,.80); --glass-rail:rgba(245,247,249,.72);
  --glass-edge:rgba(17,24,32,.08); --glass-hi:rgba(255,255,255,.85);
  --glass-shadow:0 10px 30px rgba(17,24,32,.07),0 1px 2px rgba(17,24,32,.04);
  --glass-blur:blur(18px) saturate(1.35);
  --orb-1:rgba(184,13,19,.08); --orb-2:rgba(37,99,235,.07); --orb-3:rgba(16,185,129,.06);
}
html.glass[data-theme="dark"]{
  --glass-bg:rgba(19,26,34,.56); --glass-bg-2:rgba(26,34,44,.72); --glass-rail:rgba(11,15,20,.62);
  --glass-edge:rgba(255,255,255,.07); --glass-hi:rgba(255,255,255,.07);
  --glass-shadow:0 12px 34px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
  --orb-1:rgba(220,38,38,.14); --orb-2:rgba(59,130,246,.13); --orb-3:rgba(45,212,191,.10);
}
/* the ground: three orbs, fixed behind everything, drifting over 40 s */
html.glass #app{background:var(--bg);isolation:isolate}
html.glass #app::before,html.glass #app::after{content:"";position:fixed;z-index:-1;pointer-events:none;will-change:transform}
html.glass #app::before{inset:0;background:radial-gradient(560px 560px at 88% -6%,var(--orb-1),transparent 70%),radial-gradient(480px 480px at 62% 58%,var(--orb-3),transparent 70%)}   /* two orbs on one layer: .content::after is the brand logo at the end of every page */
html.glass #app::after{border-radius:50%;width:760px;height:760px;bottom:-300px;inset-inline-start:var(--rail-w);background:radial-gradient(closest-side,var(--orb-2),transparent)}
html.glass .content{background:transparent}
/* The orbs stay still: a drifting background is motion that explains nothing (unslop pass, 2026-11-09). */
/* the panes */
html.glass .rail,html.glass .topbar{background:var(--glass-rail);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
html.glass .rail{border-inline-end-color:var(--glass-edge)}
html.glass .topbar{border-bottom-color:var(--glass-edge)}
html.glass .card,html.glass .tile,html.glass .callout,html.glass .icard,html.glass .ix-tile,html.glass .gl-tile,html.glass .cat-tile,html.glass .area-card,html.glass .pod,html.glass .kmini,html.glass .insgrp,html.glass .act-row,html.glass .reason,html.glass .state,html.glass .panel{
  background:var(--glass-bg);border:1px solid var(--glass-edge);border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
html.glass .callout{border-radius:var(--r-lg)}
html.glass .card .card,html.glass .card .tile,html.glass .card .callout,html.glass .card .pod,html.glass .card .kmini,html.glass .card .act-row,html.glass .card .reason{background:var(--glass-bg-2);box-shadow:inset 0 1px 0 var(--glass-hi);-webkit-backdrop-filter:none;backdrop-filter:none}
html.glass .card.stat:hover,html.glass .card.click:hover,html.glass .pod:hover{border-color:var(--glass-edge);box-shadow:0 14px 36px rgba(17,24,32,.11),0 1px 2px rgba(17,24,32,.05),inset 0 1px 0 var(--glass-hi)}
html.glass[data-theme="dark"] .card.stat:hover,html.glass[data-theme="dark"] .card.click:hover,html.glass[data-theme="dark"] .pod:hover{box-shadow:0 16px 40px rgba(0,0,0,.55),inset 0 1px 0 var(--glass-hi)}
html.glass .seg{background:rgba(17,24,32,.06)}
html.glass[data-theme="dark"] .seg{background:rgba(255,255,255,.06)}
/* the hero band keeps its dark ground; it gets the same edge and highlight */
html.glass .ov-hero,html.glass .band,html.glass .pv,html.glass .r2g{box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.10)}
/* pop-overs: a denser pane, so text stays readable over anything */
html.glass .modal,html.glass .drawer,html.glass .palette .box,html.glass .tour .tcard,html.glass .toast{background:var(--glass-bg-2);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi)}
/* Menus are lists of words over a busy page: nearly solid, with the same edge and blur. */
html.glass .helpmenu,html.glass .usermenu{background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi)}
/* The toast was a dark band with light text; on glass it is light, so its words take the ink. */
html.glass .toast{color:var(--ink)}html.glass .toast:not(.err):not(.ok) svg{stroke:var(--ink-2)}
/* the rail's active pill and the badges stay solid brand red */
html.glass .nav-ink{box-shadow:0 6px 16px rgba(184,13,19,.28)}
@media (prefers-reduced-transparency:reduce){
  html.glass .rail,html.glass .topbar{background:var(--rail);-webkit-backdrop-filter:none;backdrop-filter:none}
  html.glass .card,html.glass .tile,html.glass .callout,html.glass .icard,html.glass .ix-tile,html.glass .gl-tile,html.glass .cat-tile,html.glass .area-card,html.glass .pod,html.glass .kmini,html.glass .insgrp,html.glass .act-row,html.glass .reason,html.glass .state,html.glass .panel,html.glass .modal,html.glass .drawer,html.glass .helpmenu,html.glass .usermenu,html.glass .palette .box,html.glass .tour .tcard,html.glass .toast{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
  html.glass #app::before,html.glass #app::after{display:none}
}

/* ---- The rail, premium (2026-11-08, html.glass) ---------------------------
   After the reel's sidebar: a 40 px item with its icon on a small rounded
   tile, the active item one gradient pill with a glow (the gliding .nav-ink),
   the brand mark lit the same way, the site and the account as glass tiles,
   and on a fresh shell the whole column slides in from the edge, 40 ms apart
   (Motion.railIn hands out --i). Hover lifts the tile, not the row. */
html.glass{--rail-tile:rgba(17,24,32,.05);--rail-hover:rgba(17,24,32,.045);--rail-pill:var(--brand);--rail-glow:0 1px 2px rgba(17,24,32,.14);--rail-tile-on:rgba(255,255,255,.20)}
html.glass[data-theme="dark"]{--rail-tile:rgba(255,255,255,.055);--rail-hover:rgba(255,255,255,.05);--rail-pill:#E5261F;--rail-glow:0 1px 2px rgba(0,0,0,.35);--rail-tile-on:rgba(255,255,255,.22)}
html.glass .rail{padding:18px 14px 14px;gap:18px;background-image:linear-gradient(180deg,var(--glass-rail),transparent 60%)}   /* colour comes from the glass rule above */
html.glass .brandmark .mark{width:32px;height:32px;border-radius:9px;box-shadow:var(--rail-glow)}   /* the mark is the brand image now; it keeps the pill's glow */
html.glass .site-box{background:var(--glass-bg-2);border:1px solid var(--glass-edge);border-radius:10px;box-shadow:inset 0 1px 0 var(--glass-hi);transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
html.glass .site-box:hover{box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi)}
html.glass .site-box svg{border-radius:8px}
html.glass .nav-sec{font-size:10.5px;letter-spacing:.12em;margin:16px 12px 8px}
html.glass .rail nav{gap:4px}
html.glass .nav-item{height:40px;gap:12px;padding:0 9px;border-radius:10px;font-weight:500;letter-spacing:.005em;transition:color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
html.glass .nav-item svg{box-sizing:border-box;width:30px;height:30px;padding:6px;border-radius:9px;background:var(--rail-tile);stroke:var(--ink-2);transition:background var(--dur-micro) var(--ease-out),stroke var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
html.glass .nav-item:hover{background:var(--rail-hover)}
html.glass .nav-item:hover svg{transform:scale(1.06)}
html.glass .nav-item.on{font-weight:600}
html.glass .nav-item.on svg{background:var(--rail-tile-on);stroke:#fff;transform:none}
html.glass .rail .nav-ink{border-radius:10px;background:var(--rail-pill);box-shadow:var(--rail-glow),inset 0 1px 0 rgba(255,255,255,.28)}
html.glass .nav-item .badge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
html.glass .nav-item .badge.crit{box-shadow:0 4px 12px rgba(184,13,19,.30)}
html.glass .nav-item.on .badge{background:rgba(255,255,255,.92);color:var(--brand);box-shadow:none}
html.glass .rail-foot{padding-top:12px;border-top:1px solid var(--glass-edge)}
html.glass .rail-foot .user{border-radius:10px;padding:6px;transition:background var(--dur-micro) var(--ease-out)}
html.glass .rail-foot .user:hover,html.glass .rail-foot .user.open{background:var(--glass-bg-2);box-shadow:inset 0 0 0 1px var(--glass-edge),inset 0 1px 0 var(--glass-hi)}
html.glass .avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@media (prefers-reduced-motion:no-preference){
  html.glass .rail .brandmark,html.glass .rail .site-block,html.glass .rail .nav-sec,html.glass .rail .nav-item,html.glass .rail .rail-foot{animation:railIn 520ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 40ms)}
  html[dir="rtl"].glass .rail .brandmark,html[dir="rtl"].glass .rail .site-block,html[dir="rtl"].glass .rail .nav-sec,html[dir="rtl"].glass .rail .nav-item,html[dir="rtl"].glass .rail .rail-foot{animation-name:railIn-rtl}
  @keyframes railIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  @keyframes railIn-rtl{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
}

/* ---- The second reel (2026-11-08): a greeting, cards that lift, glass controls
   Every glass card lifts 3 px with a deeper shadow under the pointer (the
   entrance lets go of its transform when it ends: Motion.release). The
   Overview greets the person by the time of day, word by word (.ovh-greet,
   overview.js). Top-bar controls are glass pills. */
@media (prefers-reduced-motion:no-preference){
  html.glass .card,html.glass .tile,html.glass .ovh-tile,html.glass .pod,html.glass .area-card,html.glass .kmini{transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out),border-color 260ms var(--ease-out)}
  html.glass .content .card:hover,html.glass .content .tile:hover,html.glass .content .area-card:hover,html.glass .content .kmini:hover{box-shadow:var(--shadow-2)}
  html.glass[data-theme="dark"] .content .card:hover,html.glass[data-theme="dark"] .content .tile:hover,html.glass[data-theme="dark"] .content .area-card:hover,html.glass[data-theme="dark"] .content .kmini:hover{box-shadow:0 20px 44px rgba(0,0,0,.55),inset 0 1px 0 var(--glass-hi)}
  html.glass .content .card .card:hover,html.glass .content .card .tile:hover{transform:none;box-shadow:inset 0 1px 0 var(--glass-hi)}
  .ovh-greet span{display:inline-block;animation:greetIn 640ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
  @keyframes greetIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .content.no-anim .ovh-greet span{animation:none}
}
.ovh-greet{font:500 15px/20px var(--font-body);color:var(--band-ink-2);margin-bottom:10px;letter-spacing:.005em}
.ovh-greet b{font-weight:600;color:var(--band-ink)}
html.glass .topbar .seg,html.glass .topbar .iconbtn:not(.on),html.glass .topbar .btn:not(.primary),html.glass .topbar .mstep,html.glass .topbar .sel{background:var(--glass-bg-2);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi)}
html.glass .topbar .iconbtn{border-radius:10px}
html.glass .topbar .iconbtn:not(.on):hover{background:var(--glass-bg)}
/* The hash-chain mark in audit trails: a small line icon in the text colour. */
.chain-mark svg{width:13px;height:13px;vertical-align:-2px}