/* =========================================================================
   DEFA Cloud · S.A.N.I — Direction C, "Control Room"
   Round 2 · the whole product

   FOUR DEPTH PLANES
     1  background mesh + grain          .bg / .grain / .spot
     2  glass panels (budget: 4 max)     .glass  — rail, topbar, one per view
     3  solid data cards                 .card / .tile / .panel
     4  floating controls                .dock / .toast / dialog

   Every surface comes from the tokens below — --r-*, --sh-*, --e-* — so a new
   view is composed, never forked. New view styles go under a "VIEW —" banner.
   ========================================================================= */

:root{
  /* brand */
  --brand:#FF6600;
  --brand-action:#C84600;
  --brand-deep:#BD4100;
  --brand-soft:#FFF0E6;
  --brand-faint:#FFF8F3;

  /* neutrals */
  --canvas:#FFFFFF;
  --canvas-deep:#F3F1EC;
  --surface:#FFFFFF;
  --ink:#1D1C19;
  --ink-soft:#4F4B45;
  --muted:#68625A;
  --line:#E6E2DA;
  --line-strong:#D7D1C6;

  /* alert levels */
  --l1:#B42318; --l1-bg:#FFF0EE;
  --l2:#A63A19; --l2-bg:#FFF1EA;
  --l3:#A15C00; --l3-bg:#FFF7DC;
  --l4:#2368A2; --l4-bg:#EDF6FF;
  --l5:#28745A; --l5-bg:#EDF8F3;

  /* radii */
  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:28px;

  /* elevation — layered, multi-stop */
  --sh-1:none;
  --sh-2:none;
  --sh-3:0 1px 2px rgba(48,36,26,.05), 0 8px 20px -6px rgba(48,36,26,.09), 0 30px 60px -24px rgba(72,46,26,.20);
  --sh-4:0 2px 4px rgba(48,36,26,.05), 0 16px 34px -10px rgba(48,36,26,.12), 0 50px 90px -36px rgba(72,46,26,.26);
  --hairline:inset 0 1px 0 rgba(255,255,255,.92);

  /* glass */
  --glass-bg:rgba(255,255,255,.60);

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-spring:cubic-bezier(.34,1.42,.44,1);
  --e-inout:cubic-bezier(.65,0,.35,1);

  --rail-w:248px;
  --gutter:clamp(16px, 2.6vw, 34px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  background:var(--canvas);
  color:var(--ink);
  font-family:ui-sans-serif,-apple-system,"SF Pro Text",Inter,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  line-height:1.55;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%;display:block}
[hidden]{display:none !important}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--canvas-deep);padding:1px 5px;border-radius:5px;color:var(--ink-soft);letter-spacing:0}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- focus ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand-action);outline-offset:2px;border-radius:6px}
.orbit__ring:focus-visible,.orbit__node:focus-visible{outline:none}
.view:focus-visible,h1:focus-visible{outline:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  transform:translateY(-180%);
  display:inline-flex;align-items:center;min-height:44px;
  background:var(--ink);color:#fff;padding:0 20px;border-radius:999px;
  font-size:13px;font-weight:600;transition:transform .28s var(--e-out);
}
.skip:focus-visible{transform:none}

/* =========================================================================
   PLANE 1 — background mesh + grain
   ========================================================================= */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--canvas)}
.bg__par{position:absolute;inset:-14% -6%;will-change:transform}
.mesh{position:absolute;border-radius:50%;filter:blur(10px);display:none}
.mesh--a{
  left:-6%;top:-14%;width:76vw;height:76vw;
  background:radial-gradient(circle at 50% 50%, rgba(255,101,0,.055), rgba(255,140,60,.024) 42%, rgba(255,160,90,0) 68%);
  animation:drift-a 46s var(--e-inout) infinite alternate;
}
.mesh--b{
  right:-16%;top:6%;width:62vw;height:62vw;
  background:radial-gradient(circle at 50% 50%, rgba(255,131,40,.046), rgba(255,170,110,.02) 45%, rgba(255,190,140,0) 70%);
  animation:drift-b 62s var(--e-inout) infinite alternate;
}
.mesh--c{
  left:24%;bottom:-30%;width:88vw;height:70vw;
  background:radial-gradient(circle at 50% 50%, rgba(255,110,10,.04), rgba(255,190,150,.018) 46%, rgba(255,214,180,0) 72%);
  animation:drift-c 74s var(--e-inout) infinite alternate;
}
.mesh--d{
  left:-18%;bottom:4%;width:54vw;height:54vw;
  background:radial-gradient(circle at 50% 50%, rgba(120,150,170,.018), rgba(150,175,190,0) 66%);
  animation:drift-b 58s var(--e-inout) infinite alternate-reverse;
}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,5vh,0) scale(1.12)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-6vw,7vh,0) scale(.96)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8vw,-6vh,0) scale(1.1)}}

.spot{
  display:none;position:absolute;top:0;left:0;width:940px;height:940px;margin:-470px 0 0 -470px;
  background:radial-gradient(circle at 50% 50%, rgba(255,124,26,.046), rgba(255,150,70,.018) 38%, rgba(255,170,110,0) 66%);
  will-change:transform;opacity:0;transition:opacity .6s var(--e-out);
}
.spot.is-on{opacity:1}

.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;display:none;opacity:.016;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;mix-blend-mode:multiply;
}

/* =========================================================================
   PLANE 2 — glass. Budget: rail + topbar + at most two per view.
   ========================================================================= */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);
  backdrop-filter:blur(26px) saturate(1.4);
  border:1px solid rgba(17,20,26,.065);
  box-shadow:var(--hairline), var(--sh-2);
}

/* =========================================================================
   SHELL — persistent chrome. Never re-mounts.
   ========================================================================= */
.app{position:relative;z-index:2;display:flex;align-items:flex-start;min-height:100dvh}

.rail{
  position:sticky;top:0;flex:0 0 var(--rail-w);width:var(--rail-w);height:100dvh;
  display:flex;flex-direction:column;gap:22px;
  padding:20px 14px 16px;
  border:0;border-right:1px solid rgba(255,255,255,.6);
  box-shadow:inset -1px 0 0 rgba(214,206,192,.5), 1px 0 40px -22px rgba(72,46,26,.22);
}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 0;min-height:44px;border-radius:12px}
.brand:hover{background:rgba(255,255,255,.6)}
/* the supplied artwork is one raster: orange plate + knot + wordmark.
   The wordmark is illegible small, so the mark is cropped to the knot alone.
   Crop measured from the artwork: 740x740 at (283.5, 242) of 1309x1488. */
.mk{
  position:relative;display:inline-block;flex:0 0 auto;overflow:hidden;background:var(--brand);
  width:var(--mk);height:var(--mk);
  box-shadow:0 1px 2px rgba(120,52,10,.28), 0 6px 16px -6px rgba(200,70,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.mk img{
  position:absolute;max-width:none;height:auto;
  width:calc(var(--mk) * 1.76892);
  left:calc(var(--mk) * -0.383108);
  top:calc(var(--mk) * -0.327027);
}
/* =========================================================================
   SERVICE MARK — the provider logo chip. One primitive, five sizes.
   -------------------------------------------------------------------------
   A mark is a physical chip on glass, not a flat square: a white-to-warm
   plate, a hairline ring and a 1px inset top highlight, both painted by the
   ::after overlay so they still read over a full-bleed logo. Radius is one
   third of the box — the same ratio the register row (30/9) and the record
   hero (52/17) already used, so this drops in without shifting either.

   The artwork is `object-fit:contain` inside a fixed box, so it can never be
   stretched, and the chip clips, so it can never bleed past the radius.

   OPTICAL CORRECTION — logos do not arrive at the same weight, so --fill is
   tuned per brand rather than left at one number. Four of the nine are
   full-bleed app icons and take the whole chip; the rest are bare glyphs
   with their own intrinsic padding and get an inset measured against them.
   ========================================================================= */
.smark{
  position:relative;display:inline-grid;place-items:center;flex:0 0 auto;overflow:hidden;
  width:var(--sz);height:var(--sz);border-radius:var(--rad);
  background:var(--plate, linear-gradient(180deg,#fff,#FCFBF8));
  box-shadow:0 1px 1px rgba(48,36,26,.045), 0 2px 6px -2px rgba(48,36,26,.07);
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  vertical-align:middle;
}
/* ring + highlight sit ABOVE the artwork, so a full-bleed icon is still
   contained by the chip rather than covering its edge */
.smark::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--ring, rgba(41,38,32,.13)), inset 0 1px 0 rgba(255,255,255,.6);
}
/* The nine small local assets are preloaded by /portal and must be visible on
   their first painted frame. Failure still degrades to the record fallback
   through the CSP-safe delegated error listener in app.js. */
.smark__i{
  display:block;width:var(--fill,66%);height:var(--fill,66%);object-fit:contain;
  opacity:1;
}
/* a 1.6-stroke glyph carries less ink than a filled logo, so it is drawn a
   little larger to land on the same optical weight */
.smark__g{width:66%;height:66%;color:inherit}
/* two letters, always — see monogram() in app.js. The tracking is negative so
   a wide pair ("PL", "YS") sits on the same optical width as a narrow one. */
.smark__m{
  font-size:calc(var(--sz) * .34);font-weight:680;letter-spacing:-.012em;line-height:1;
  color:var(--ink-soft);
}

.smark--xs{--sz:20px;--rad:7px}
.smark--sm{--sz:24px;--rad:8px}
.smark--md{--sz:30px;--rad:10px}
.smark--lg{--sz:40px;--rad:13px}
.smark--xl{
  --sz:52px;--rad:17px;
  box-shadow:0 1px 2px rgba(48,36,26,.05), 0 6px 16px -6px rgba(48,36,26,.14);
}

/* ---- per-brand optical correction ---------------------------------------
   MEASURED, not eyeballed. Each asset was rasterised at 200x200 with the same
   object-fit:contain the chip uses, and its ink counted as
   `sum over pixels of alpha x (1 - luminance) / area` — so a pale wash counts
   for less than the same area of black. Ink on the chip is then
   `inkRatio x fill^2`. The nine assets fall into two families:

     app icons   cursor .252 · canva .362 · notta .411 · adobeCC .362 · capcut .216
     bare glyphs figma .207 · freepik .248 · powerBi .130 · gemini .130

   An app icon is a filled tile and *should* take the chip whole — insetting
   one leaves a white gutter that reads as a rendering fault. So the family is
   left at 100% and only the glyphs are corrected, to a common target of
   ~0.135 ink. Before this pass they sat at .064–.108 against the icons'
   .216–.411: in a row of fifteen, Figma and Power BI read as half-loaded. */
.smark--cursor,
.smark--canva,
.smark--notta,
.smark--capcut,
.smark--adobeCreativeCloud{--fill:100%;--plate:#fff}
/* the Figma glyph is 94% tall but only 63% wide inside its own box, so it is
   the one that loses most to a small fill — .207 x .80² = .132 */
.smark--figma{--fill:80%}
/* Freepik's mark fills its box in both directions, the heaviest of the four
   glyphs, so it needs the least — .248 x .76² = .143 */
.smark--freepik{--fill:76%}
/* Power BI is four full-height bars in a pale yellow — the least ink of any
   asset here. It takes the largest fill AND a warm plate with a warm ring
   under it, because size alone cannot buy contrast on white */
.smark--powerBi{--fill:88%;--plate:linear-gradient(180deg,#FFFDF3,#FFF6D9);--ring:rgba(120,95,10,.24)}
/* a four-point star is mostly negative space, so it is drawn largest */
.smark--googleGemini{--fill:92%}

/* ---- fallbacks — designed, not an afterthought --------------------------
   A domain still has to read as a domain and a certificate as a certificate
   at a glance, so the two glyph fallbacks carry a faint tint of their own
   while the plate itself stays in the Control Room's neutral language. */
.smark--domain{--plate:linear-gradient(180deg,#fff,#F3F8FC);--ring:rgba(35,104,162,.19);color:#2E6A9E}
.smark--cert{--plate:linear-gradient(180deg,#fff,#F2F9F5);--ring:rgba(40,116,90,.19);color:#2C7157}
.smark--mono{--plate:linear-gradient(180deg,#fff,#F4F2ED);--ring:rgba(41,38,32,.16)}

.brand__mark{--mk:38px;border-radius:12px}
.brand__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__name{font-size:14.5px;font-weight:640;letter-spacing:-.017em;color:var(--ink)}
.brand__sub{font-size:11.5px;color:var(--muted);letter-spacing:.01em}

.nav{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav + .nav{margin-top:14px}
.nav__label{
  font-size:10.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 7px;
}
.nav__item{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;
  min-height:40px;padding:0 12px;border-radius:12px;
  font-size:14px;font-weight:500;color:var(--ink-soft);
  transition:color .2s var(--e-out), background-color .2s var(--e-out), transform .32s var(--e-spring);
}
.nav__item svg{flex:0 0 auto;opacity:.72;transition:opacity .2s var(--e-out), transform .34s var(--e-spring)}
.nav__item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__item:hover{background:rgba(255,255,255,.68);color:var(--ink)}
.nav__item:hover svg{opacity:1;transform:translateX(1px)}
.nav__item:active{transform:scale(.985)}
.nav__item[aria-current="page"]{
  background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:var(--hairline), var(--sh-1);
}
.nav__item[aria-current="page"] svg{opacity:1;color:var(--brand-action)}
.nav__item[aria-current="page"]::before{
  content:"";position:absolute;left:-14px;top:50%;width:3px;height:20px;
  border-radius:0 3px 3px 0;background:var(--brand);transform:translateY(-50%);
}
.nav__badge{
  margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;
  background:var(--l1-bg);color:var(--l1);
  box-shadow:inset 0 0 0 1px rgba(180,35,24,.14);
}

.rail__foot{margin-top:auto;padding:13px 12px 0;border-top:1px solid rgba(214,206,192,.6);display:flex;flex-direction:column;gap:8px}
.status{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);letter-spacing:.005em}
.status__dot{position:relative;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#2E9E6B}
.status__dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(46,158,107,.4);
  animation:pulse 2.8s var(--e-out) infinite;
}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(1.25);opacity:0}}
.status strong{color:var(--ink-soft);font-weight:600}
.status--warn .status__dot{background:var(--l3)}
.status--warn .status__dot::after{border-color:rgba(161,92,0,.4)}

/* ---------- content column ---------- */
.col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:100dvh}

.topbar{
  position:sticky;top:0;z-index:40;flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  padding:9px var(--gutter);
  border:0;border-bottom:1px solid rgba(214,206,192,.55);
  box-shadow:var(--hairline), 0 1px 30px -18px rgba(72,46,26,.4);
}
.topbrand{display:none;align-items:center;gap:9px;flex:0 0 auto;min-height:44px;padding:0 4px;border-radius:12px}
.topbrand:hover{background:rgba(255,255,255,.7)}
.topbrand__m{--mk:30px;border-radius:10px}
.topbrand b{font-size:13.5px;font-weight:640;letter-spacing:-.018em}

.scope{position:relative;display:flex;align-items:center;min-width:0}
.scope > svg:first-child{position:absolute;left:11px;pointer-events:none;color:var(--muted)}
.scope > svg:last-child{position:absolute;right:9px;pointer-events:none;color:var(--muted)}
.scope select{
  appearance:none;-webkit-appearance:none;
  height:36px;padding:0 30px 0 34px;max-width:min(46vw,290px);
  border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  font-size:13.5px;font-weight:550;color:var(--ink);cursor:pointer;
  text-overflow:ellipsis;
  transition:border-color .2s var(--e-out), box-shadow .2s var(--e-out), background-color .2s var(--e-out);
}
.scope select:hover{border-color:var(--line-strong);background:#fff}
.scope select:focus-visible{outline:2px solid var(--brand-action);outline-offset:1px}
.scope--plain > svg:first-child{display:none}
.scope--plain select{padding-left:12px}

.topbar__meta{
  display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  padding:0 2px;white-space:nowrap;
}
.topbar__acts{display:flex;align-items:center;gap:8px;margin-left:auto}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:36px;padding:0 13px;border-radius:11px;
  font-size:13.5px;font-weight:600;letter-spacing:-.008em;white-space:nowrap;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.62);color:var(--ink);
  box-shadow:var(--hairline), var(--sh-1), inset 0 0 12px -8px rgba(255,101,0,.18);
  overflow:hidden;
  transition:transform .34s var(--e-spring), border-color .2s var(--e-out), background-color .2s var(--e-out), color .2s var(--e-out), box-shadow .2s var(--e-out);
}
.btn svg{flex:0 0 auto;opacity:.8}
.btn:hover{transform:translateY(-1px);border-color:var(--line-strong);background:#fff;box-shadow:var(--hairline), var(--sh-2)}
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn--primary{
  background:linear-gradient(180deg,#FF7A1F,#F05E00 62%,#E45700);
  border-color:#D64F00;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 1px 2px rgba(160,60,0,.3), 0 8px 20px -8px rgba(224,88,0,.6);
}
.btn--primary svg{opacity:.95}
.btn--primary:hover{background:linear-gradient(180deg,#FF8631,#F76400 62%,#EC5C00);box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(160,60,0,.28), 0 14px 28px -10px rgba(224,88,0,.66)}
.btn--ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-soft)}
.btn--ghost:hover{background:rgba(255,255,255,.8);border-color:var(--line);color:var(--ink)}
.btn--danger{color:var(--l1);border-color:rgba(180,35,24,.28);background:rgba(255,255,255,.85)}
.btn--danger:hover{background:var(--l1-bg);border-color:rgba(180,35,24,.45)}
.btn--sm{min-height:32px;padding:0 11px;font-size:12.5px;border-radius:9px}
.btn--icon{width:36px;padding:0}
.btn--icon.btn--sm{width:32px}
.btn--block{width:100%}
.btn__t--xs{display:none}

.sheen{
  position:absolute;top:0;left:0;width:280px;height:280px;margin:-140px 0 0 -140px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,.34) 40%, rgba(255,255,255,0) 68%);
  opacity:0;transition:opacity .3s var(--e-out);mix-blend-mode:overlay;
}
.btn:hover .sheen,.tile:hover .sheen,.qcard:hover .sheen,.next:hover .sheen,.briefcard:hover .sheen{opacity:.95}

/* =========================================================================
   VIEW MOUNT + ROUTE TRANSITIONS
   ========================================================================= */
.scroller{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}
.view{flex:1 1 auto;min-height:0;min-width:0;padding:18px var(--gutter) 30px}
.view:focus{outline:none}

/* fallback transition (no View Transition API / reduced motion off) */
@keyframes view-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.view.is-entering{animation:view-in .34s var(--e-out) both}

/* View Transition API — only the view region animates; the shell is untouched */
.vt-host{view-transition-name:appview}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  ::view-transition-group(appview){animation-duration:.3s}
  ::view-transition-old(appview){animation:vt-out .16s var(--e-inout) both}
  ::view-transition-new(appview){animation:vt-in .32s var(--e-out) both}
  @keyframes vt-out{to{opacity:0;transform:translate3d(0,-6px,0)}}
  @keyframes vt-in{from{opacity:0;transform:translate3d(0,12px,0)}}
}

/* app-shell mode: the document itself never scrolls, the view region does.
   This is what keeps the Overview inside one screen at 1512x950. */
@media (min-width:1200px){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;overflow:hidden}
  .col{height:100dvh;min-height:0}
  .topbar{position:relative}
  .scroller{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  .pagefoot{display:none}
}

/* ---------- page furniture ---------- */
.page__head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.page__head--tight{margin-bottom:12px}
.eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:660;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:6px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--line-strong);flex:0 0 auto}
.page__title{font-size:clamp(1.32rem,1.05rem + .8vw,1.85rem);font-weight:620;letter-spacing:-.032em;line-height:1.14;text-wrap:balance}
.page__note{font-size:13.5px;color:var(--muted);margin-top:6px;max-width:70ch;line-height:1.5}
.page__acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.crumbs{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:10px;flex-wrap:wrap}
.crumbs a{border-radius:6px;padding:2px 4px;margin:0 -4px}
.crumbs a:hover{color:var(--brand-action);background:var(--brand-faint)}
.crumbs svg{opacity:.5}

.sec__head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.sec__title{font-size:15px;font-weight:640;letter-spacing:-.022em;line-height:1.2}
.sec__note{font-size:12.5px;color:var(--muted);margin-top:4px;max-width:64ch;line-height:1.45}
.sec__tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.card{
  position:relative;border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.60));
  border:1px solid rgba(17,20,26,.075);
  box-shadow:var(--hairline), var(--sh-2);
}
.card--flat{box-shadow:var(--hairline), var(--sh-1)}
.card__pad{padding:clamp(14px,1.4vw,20px)}
.panel{
  position:relative;border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.60));
  border:1px solid rgba(17,20,26,.075);
  box-shadow:var(--hairline), var(--sh-1);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.panel__h{
  display:flex;align-items:center;gap:9px;padding:12px 15px 10px;flex:0 0 auto;
  border-bottom:1px solid var(--line);
}
.panel__h svg{color:var(--brand-action);flex:0 0 auto}
.panel__h h2,.panel__h h3{font-size:12.5px;font-weight:660;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.panel__h .panel__x{margin-left:auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.panel__b{flex:1 1 auto;min-height:0;padding:13px 15px 15px;display:flex;flex-direction:column}
.panel__b--flush{padding:0}

.chip{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:7px;
  font-size:11px;font-weight:640;letter-spacing:.01em;white-space:nowrap;
}
.chip svg{width:12px;height:12px}
.chip--l1{background:var(--l1-bg);color:var(--l1);box-shadow:inset 0 0 0 1px rgba(180,35,24,.15)}
.chip--l2{background:var(--l2-bg);color:var(--l2);box-shadow:inset 0 0 0 1px rgba(166,58,25,.15)}
.chip--l3{background:var(--l3-bg);color:var(--l3);box-shadow:inset 0 0 0 1px rgba(161,92,0,.16)}
.chip--l4{background:var(--l4-bg);color:var(--l4);box-shadow:inset 0 0 0 1px rgba(35,104,162,.15)}
.chip--l5{background:var(--l5-bg);color:var(--l5);box-shadow:inset 0 0 0 1px rgba(40,116,90,.15)}
.chip--none{background:var(--canvas-deep);color:var(--muted);box-shadow:inset 0 0 0 1px rgba(120,110,96,.14)}
.chip--brand{background:var(--brand-faint);color:var(--brand-deep);box-shadow:inset 0 0 0 1px rgba(200,70,0,.2)}
.chip--lg{height:26px;padding:0 10px;font-size:12px;border-radius:9px}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:40px 22px}
.empty__ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--canvas-deep);color:var(--muted);flex:0 0 auto}
.empty strong{font-size:15px;font-weight:620;letter-spacing:-.018em}
.empty span{font-size:13px;color:var(--muted);max-width:46ch;line-height:1.5}

.pagefoot{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px var(--gutter) 30px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);flex:0 0 auto;
}
.pagefoot b{color:var(--ink-soft);font-weight:600}
.pagefoot__sp{flex:1 1 auto}

/* ---------- mobile tabbar ---------- */
.tabbar{
  display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:60;
  border-radius:20px;padding:6px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
}
.tabbar ul{display:flex}
.tabbar li{flex:1 1 0;min-width:0}
.tabbar a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:50px;border-radius:14px;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.01em;
  transition:color .2s var(--e-out), background-color .2s var(--e-out);
}
.tabbar a[aria-current="page"]{color:var(--brand-action);background:var(--surface);box-shadow:var(--hairline), var(--sh-1)}
.tabbar__b{position:absolute;top:5px;right:calc(50% - 20px);min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--l1);color:#fff;font-size:9.5px;font-weight:680;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:120;
  display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:14px;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:550;max-width:min(92vw,460px);
  box-shadow:0 14px 40px -12px rgba(29,28,25,.7);
  transform:translate(-50%,140%);opacity:0;pointer-events:none;
  transition:transform .48s var(--e-spring), opacity .3s var(--e-out);
}
.toast.is-on{transform:translate(-50%,0);opacity:1}
.toast svg{color:#7ED0A6;flex:0 0 auto}
.toast--warn svg{color:#FFC48A}

/* ---------- boot / error ---------- */
/* An invisible full-screen sheet must never be able to swallow a click, so the
   boot layer only takes pointer events while it is actually being shown. */
.boot{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;background:var(--canvas);opacity:0;pointer-events:none;transition:opacity .35s var(--e-out)}
.boot.is-show,.boot--err{opacity:1;pointer-events:auto}
.boot.is-gone{opacity:0;pointer-events:none}
.boot__in{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px}
.boot__ring{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.boot__t{font-size:13.5px;font-weight:600;letter-spacing:-.012em}
.boot__s{font-size:12.5px;color:var(--muted)}
.boot--err .boot__ring{display:none}
.errbox{max-width:440px;text-align:left;padding:18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.errbox h2{font-size:16px;font-weight:640;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.errbox h2 svg{color:var(--l1)}
.errbox p{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.55}
.nojs{max-width:520px;margin:12vh auto;padding:0 24px;text-align:left}
.nojs h2{font-size:20px;font-weight:640;letter-spacing:-.024em}
.nojs p{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.6}

/* =========================================================================
   VIEW — Overview.  Hard constraint: no document scroll at 1512x950.
   The grid is height-driven; every child declares min-height:0 so nothing
   can push the page taller than the viewport.
   ========================================================================= */
.v-ov{display:grid;gap:13px;min-height:0}
@media (min-width:1200px){
  /* the rail already carries the environment/status footer at this width */
  .pagefoot{display:none}
  .view--fixed{height:100%;padding:16px var(--gutter) 16px;display:flex;flex-direction:column;min-height:0}
  .v-ov{
    flex:1 1 auto;min-height:0;
    grid-template-columns:292px minmax(0,1fr) 306px;
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:
      "posture posture posture"
      "figs    orbit   next"
      "expo    expo    brief";
  }
  .ov-posture{grid-area:posture}
  .ov-figs{grid-area:figs}
  .ov-orbit{grid-area:orbit}
  .ov-next{grid-area:next}
  .ov-expo{grid-area:expo}
  .ov-brief{grid-area:brief}
}

/* posture strip — the sentence, the date, the two counts that matter */
.ov-posture{
  position:relative;display:flex;align-items:center;gap:clamp(16px,2vw,32px);flex-wrap:wrap;
  padding:12px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.60));
  border:1px solid rgba(17,20,26,.075);
  box-shadow:inset 0 2px 0 rgba(255,255,255,1);
  overflow:hidden;
}
/* no edge accent — the material stays clean; urgency lives in the copy */
.ov-posture__main{min-width:0;flex:1 1 420px}
.ov-date{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:660;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-action);
  margin-bottom:7px;
}
.ov-date svg{opacity:.9}
.ov-h1{font-size:clamp(1.24rem,.95rem + .95vw,1.72rem);font-weight:600;line-height:1.14;letter-spacing:-.034em;text-wrap:balance}
.ov-h1 em{font-style:normal;color:var(--brand-action)}
.ov-lede{margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);max-width:96ch;text-wrap:pretty}
.ov-lede b{font-weight:620;color:var(--ink)}
.ov-posture__side{display:flex;align-items:stretch;gap:0;flex:0 0 auto}
.ov-mini{padding:0 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;min-width:96px}
.ov-mini:first-child{border-left:0}
.ov-mini b{font-size:24px;font-weight:600;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.ov-mini span{font-size:11px;color:var(--muted);line-height:1.3;margin-top:1px}
.ov-mini--warn b{color:var(--l1)}
.ov-mini--flag b{color:var(--brand-action)}

/* key figures — a vertical stack, weighted by the data, not four equal boxes */
.ov-figs{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:9px;min-height:0}
.tile{position:relative;text-align:left;min-height:0;perspective:900px}
.tile__in{
  position:relative;display:flex;flex-direction:column;justify-content:center;height:100%;
  padding:9px 13px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--hairline), var(--sh-1);
  overflow:hidden;transform-style:preserve-3d;
  transition:transform .5s var(--e-spring), border-color .22s var(--e-out), box-shadow .3s var(--e-out);
}
.tile:hover .tile__in{border-color:var(--line-strong);box-shadow:var(--hairline), var(--sh-3)}
.tile:active{transform:scale(.99)}
.tile__k{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile__arrow{margin-left:auto;color:var(--line-strong);transition:transform .34s var(--e-spring), color .22s var(--e-out)}
.tile:hover .tile__arrow{color:var(--brand-action);transform:translate(2px,-2px)}
.tile__row{display:flex;align-items:baseline;gap:10px;margin-top:3px;min-width:0}
.tile__n{font-size:26px;font-weight:600;letter-spacing:-.042em;line-height:1.08}
.tile__s{flex:1 1 auto;font-size:11.5px;color:var(--muted);line-height:1.3;min-width:0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__bar{display:none}
.tile__bar i{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);border-radius:2px;transition:transform .9s var(--e-out) .12s}
.tile--ok .tile__n{color:var(--l5)}
.tile--info .tile__n{color:var(--brand-action)}
/* the alarm tile carries its urgency in the number and label alone — the
   material never changes and no edge is coloured */

.tile--alarm .tile__k{color:var(--l1)}
.tile--alarm .tile__n{font-size:30px;letter-spacing:-.048em;color:var(--l1)}
.tile--alarm .tile__s{color:#8A3229}
.tile--quiet .tile__n{font-size:23px;color:var(--l5)}

/* ---------- THE ORBIT (signature) ---------- */
.console{
  position:relative;border-radius:var(--r-xl);padding:14px 16px 16px;
  border:1px solid rgba(17,20,26,.075);
  box-shadow:var(--hairline), var(--sh-4);
  display:flex;flex-direction:column;min-height:0;
}
.console::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(214,206,192,.42);
}
.console__h{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px;flex:0 0 auto}
.console__h .sec__title{font-size:14px}
.console__grid{
  flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) 220px;gap:18px;align-items:stretch;
}
.console__side{display:flex;flex-direction:column;min-width:0;min-height:0}
.orbit__wrap{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;margin:0}
.orbit{width:100%;height:100%;max-height:100%;touch-action:manipulation}
.orbit__ring{cursor:pointer}
.orbit__ringline{transition:stroke-opacity .3s var(--e-out)}
.orbit__ringfocus{opacity:0;transition:opacity .2s var(--e-out)}
.orbit__ring:focus-visible + .orbit__ringfocus,.orbit__ring[data-kb="1"] + .orbit__ringfocus{opacity:1}
.orbit__node{cursor:pointer;will-change:transform}
.orbit__lab{font-size:10px;font-weight:660;letter-spacing:.09em;fill:var(--muted);text-anchor:middle;pointer-events:none;transition:fill .3s var(--e-out)}
.orbit__lab.is-sel{fill:var(--brand-action)}
.orbit__ctr-n{font-size:44px;font-weight:600;letter-spacing:-.04em;fill:var(--ink);text-anchor:middle;font-variant-numeric:tabular-nums}
.orbit__ctr-l{font-size:10.5px;font-weight:640;letter-spacing:.13em;fill:var(--muted);text-anchor:middle}

.legend{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.lvl{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;
  width:100%;text-align:left;padding:3px 9px;border-radius:10px;
  border:1px solid transparent;
  transition:background-color .2s var(--e-out), border-color .2s var(--e-out), transform .32s var(--e-spring);
}
.lvl:hover{background:rgba(255,255,255,.78);border-color:var(--line)}
.lvl:active{transform:scale(.99)}
.lvl[aria-pressed="true"]{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--hairline), var(--sh-1)}
.lvl__dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 3px var(--dot-halo)}
.lvl__txt{min-width:0}
.lvl__t{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.012em;line-height:1.2}
.lvl__t b{font-weight:660;margin-right:5px}
.lvl__d{display:block;font-size:10.5px;color:var(--muted);line-height:1.25}
.lvl__n{font-size:14px;font-weight:620;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lvl--empty .lvl__t,.lvl--empty .lvl__n{color:var(--muted);font-weight:550}

.readout{
  margin-top:10px;padding:14px 16px 15px;border-radius:var(--r-md);flex:1 1 auto;min-height:0;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--hairline), var(--sh-1);
}
.readout__k{font-size:10px;font-weight:660;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.readout__name{margin-top:8px;font-size:14px;font-weight:620;letter-spacing:-.02em;line-height:1.28;overflow-wrap:anywhere}
.readout__name--mark{display:flex;align-items:center;gap:9px;min-width:0}
.readout__name--mark > span{min-width:0}
.readout__meta{margin-top:4px;font-size:11px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.readout__grid{display:grid;grid-template-columns:1fr;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.readout__f dt{font-size:9.5px;font-weight:620;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.readout__f dd{margin:1px 0 0;font-size:12.5px;font-weight:560;letter-spacing:-.012em;font-variant-numeric:tabular-nums}
.readout__hint{margin-top:9px;font-size:10.5px;color:var(--muted);line-height:1.5;padding-bottom:1px;overflow-wrap:anywhere}

@media (min-width:901px){
  .console{overflow:hidden}
  .console__side{overflow:hidden}
  .readout{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
}
@media (min-width:1200px){
  .view--fixed .console__grid{gap:14px}
  .view--fixed .legend{gap:2px}
  .view--fixed .lvl{padding:0 8px}
  .view--fixed .readout{margin-top:8px;padding:9px 14px}
  .view--fixed .readout__name{margin-top:6px}
  .view--fixed .readout__grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px;padding-top:8px}
  .view--fixed .readout__hint{margin-top:7px;line-height:1.35}
}
@media (min-width:1200px) and (max-height:960px){
  /* On short desktop canvases the ring names and counts remain visible while
     their secondary policy lines yield space to the complete node readout. */
  .view--fixed .lvl__d{display:none}
}

/* ---------- what is next ---------- */
.ov-next{display:flex;flex-direction:column;gap:11px;min-height:0}
/* basis 0 so both panels take an equal, content-independent share — this is
   what makes fitList() converge instead of oscillating */
.ov-next > .panel{flex:1 1 0;min-height:0}
.ov-next .panel__h{padding:10px 14px 8px}
.ov-next .panel__b{padding:8px 14px 10px}
.nextcard{position:relative;display:block;padding:13px 15px 12px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--hairline), var(--sh-2);
  overflow:hidden;flex:0 0 auto;
  transition:transform .34s var(--e-spring), box-shadow .3s var(--e-out), border-color .2s var(--e-out);
}
.nextcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg, rgba(255,101,0,.05), rgba(255,101,0,0) 46%);
}
.nextcard:hover{transform:translateY(-2px);box-shadow:var(--hairline), var(--sh-3);border-color:var(--line-strong)}
.nextcard__k{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:660;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nextcard__k svg{color:var(--brand-action)}
.nextcard__id{display:flex;align-items:center;gap:11px;margin-top:8px;min-width:0}
.nextcard__name{display:block;font-size:17px;font-weight:620;letter-spacing:-.024em;line-height:1.2;overflow-wrap:anywhere}
.nextcard__k + .nextcard__name{margin-top:8px}
.nextcard__meta{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nextcard__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.nextcard__days{font-size:28px;font-weight:600;letter-spacing:-.038em;line-height:1;font-variant-numeric:tabular-nums}
.nextcard__days span{font-size:12px;font-weight:550;letter-spacing:-.01em;color:var(--muted);margin-left:5px}
.nextcard__date{text-align:right;font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.nextcard__date strong{display:block;font-size:12.5px;font-weight:620;letter-spacing:-.012em;font-variant-numeric:tabular-nums}

.minilist{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.minirow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:6px 9px;margin:0 -9px;border-radius:10px;min-width:0;
  transition:background-color .18s var(--e-out), transform .3s var(--e-spring);
}
.minirow--mark{grid-template-columns:auto minmax(0,1fr) auto;gap:9px}
.minirow + .minirow{border-top:1px solid var(--line)}
.minirow:hover{background:var(--brand-faint)}
.minirow:active{transform:scale(.995)}
.minirow__n{display:block;font-size:12.5px;font-weight:560;letter-spacing:-.012em;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.minirow__m{display:block;font-size:11px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.minirow__v{font-size:12px;font-weight:620;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.minirow__v.is-late{color:var(--l1)}
.minirow__v.is-soon{color:var(--brand-action)}

/* ---------- exposure strip ---------- */
.ov-expo .panel__b{padding:14px 14px 12px}
/* 16px of the track is reserved above the columns, so the peak bar's value
   label always clears the panel's header rule instead of touching it */
.expo{display:flex;align-items:stretch;gap:4px;height:100px;min-height:0;padding-top:16px}
.expocol{
  position:relative;flex:1 1 0;min-width:0;border-radius:9px;
  transition:background-color .18s var(--e-out);
}
.expocol:hover{background:var(--brand-faint)}
.expocol[aria-pressed="true"]{background:var(--brand-soft)}
.bartrack{position:absolute;inset:0}
.bartrack i{
  position:absolute;left:50%;bottom:0;width:min(76%,26px);height:var(--h);
  margin-left:calc(min(76%,26px) / -2);
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#FF7A1F,#F05E00);
  transform-origin:bottom center;transform:scaleY(0);
  transition:transform .7s var(--e-out);
}
.bartrack b{
  position:absolute;left:0;right:0;bottom:var(--h);margin-bottom:5px;text-align:center;
  font-size:11px;font-weight:640;font-variant-numeric:tabular-nums;color:var(--ink-soft);line-height:1;
}
.expocol--zero .bartrack i{background:var(--canvas-deep)}
.expocol--zero .bartrack b{color:var(--muted);font-weight:560}
.expocol--peak .bartrack i{background:linear-gradient(180deg,#FF7A1F,#C84600)}
.expocol--peak .bartrack b{color:var(--brand-deep)}
.expoaxis{display:flex;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.expoaxis span{flex:1 1 0;min-width:0;text-align:center;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.01em;overflow:hidden}
.expofoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;color:var(--muted)}
.expofoot b{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}
.expofoot .backlogpill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:8px;
  background:repeating-linear-gradient(135deg, var(--l1-bg), var(--l1-bg) 7px, #fff6f4 7px, #fff6f4 14px);
  box-shadow:inset 0 0 0 1px rgba(180,35,24,.14);color:var(--l1);font-weight:600;
}

/* ---------- briefing entry ---------- */
.briefcard{
  position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--hairline), var(--sh-2);
  min-height:0;
  transition:transform .34s var(--e-spring), box-shadow .3s var(--e-out), border-color .2s var(--e-out);
}
.briefcard:hover{transform:translateY(-2px);box-shadow:var(--hairline), var(--sh-3);border-color:var(--line-strong)}
.briefstage{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;flex:0 0 auto;
  background:linear-gradient(168deg,#FFFFFF 0%,#FCFBF9 60%,#F7F4F0 100%);
  border-bottom:1px solid var(--line);contain:layout paint;
}
.briefstage__scale{position:absolute;top:0;left:0;width:1280px;height:720px;transform-origin:0 0;will-change:transform}
.briefstage__grain{position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");}
.briefcard__play{
  position:absolute;right:12px;top:12px;z-index:2;display:flex;align-items:center;gap:8px;
  height:32px;padding:0 12px 0 9px;border-radius:999px;background:rgba(29,28,25,.86);color:#fff;
  font-size:12px;font-weight:600;box-shadow:0 8px 22px -10px rgba(29,28,25,.8);
  transition:transform .3s var(--e-spring), background-color .2s var(--e-out);
}
.briefcard:hover .briefcard__play{transform:scale(1.04);background:var(--brand-action)}
.briefcard__foot{padding:10px 14px 12px;display:flex;align-items:center;gap:10px;min-width:0}
.briefcard__foot b{display:block;font-size:12.5px;font-weight:620;letter-spacing:-.014em}
.briefcard__foot span{display:block;font-size:11px;color:var(--muted);line-height:1.35;margin-top:1px}
.briefcard__foot svg{flex:0 0 auto;color:var(--line-strong);margin-left:auto}
.briefcard:hover .briefcard__foot svg{color:var(--brand-action)}
.livedot{
  display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:660;letter-spacing:.1em;
  text-transform:uppercase;color:var(--l5);
}
.livedot i{width:6px;height:6px;border-radius:50%;background:#2E9E6B;flex:0 0 auto}

/* composition typography (shared with #/briefing in stage 2) */
.sq{position:absolute;inset:0;will-change:transform,opacity}
.sq__pad{position:absolute;inset:64px 76px}
.bk{font-size:13px;font-weight:660;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-action);display:flex;align-items:center;gap:10px}
.bk::before{content:"";width:26px;height:1.5px;background:var(--brand)}
.bt{font-size:56px;font-weight:600;letter-spacing:-.042em;line-height:1.04;margin-top:18px;max-width:17ch;color:var(--ink)}
.bs{font-size:20px;line-height:1.5;color:var(--ink-soft);margin-top:14px;max-width:44ch}
.bnum{font-size:150px;font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--ink)}
.bnum--warn{color:var(--l1)}
.b1bars{position:absolute;right:0;bottom:0;width:470px;display:flex;flex-direction:column;gap:20px}
.b1bar__t{display:flex;justify-content:space-between;font-size:15px;font-weight:600;letter-spacing:-.012em;margin-bottom:7px}
.b1bar__t span:last-child{font-variant-numeric:tabular-nums;color:var(--muted)}
.b1bar__tr{height:9px;border-radius:5px;background:rgba(29,28,25,.07);overflow:hidden}
.b1bar__f{height:100%;border-radius:5px;transform-origin:left center;transform:scaleX(0)}
.b2dots{position:absolute;right:40px;top:50%;width:400px;height:400px;margin-top:-200px}
/* one mark per overdue record. The red collar stays: the logo says which
   service, the collar and the count say how bad it is. */
.b2dot{
  position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:13px;
  box-shadow:0 0 0 4px rgba(180,35,24,.16), 0 4px 12px -4px rgba(48,36,26,.22);
}
.b2dot .smark{display:grid;--ring:rgba(180,35,24,.34)}
.b2cap{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:20px;background:#fff;box-shadow:var(--sh-3);max-width:560px}
.b2cap__t{min-width:0}
.b2cap__t b{display:block;font-size:19px;font-weight:640;letter-spacing:-.02em}
.b2cap__t > span{display:block;font-size:14.5px;color:var(--muted);margin-top:3px}
.b3line{position:absolute;left:76px;right:76px;top:410px;height:2px;background:var(--line-strong);transform-origin:0 50%}
.b3mark{position:absolute;top:410px;transform:translateX(-50%)}
.b3mark i{display:block;width:14px;height:14px;border-radius:50%;background:var(--brand);margin:-6px auto 0;box-shadow:0 0 0 5px rgba(255,101,0,.16)}
/* the 16px gap under the dot is PADDING, not a child's margin: a margin here
   collapses out through .b3lab and the row offset then lands 16px short, which
   is exactly enough to make two rows of labels touch. */
.b3lab{position:relative;padding-top:16px}
/* the leader from the timeline dot down to a dropped label. Its length is set
   inline from the row the label landed on, so a third row still connects. */
.b3drop{position:absolute;left:50%;width:1px;background:var(--line-strong)}
/* mark + name on one line, centred on the timeline dot. The name clips at
   148px so a long record ("Google AI Pro (2 TB) · marketing.team")
   cannot push two neighbouring labels into each other — with the mark this
   label is still narrower than the 190px the bare name used to take. */
.b3lab__n{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.b3mark b{display:block;font-size:15px;font-weight:620;letter-spacing:-.014em;white-space:nowrap;text-align:center;
  max-width:148px;overflow:hidden;text-overflow:ellipsis}
.b3sub{display:block;font-size:13px;color:var(--muted);white-space:nowrap;text-align:center;margin-top:2px;font-variant-numeric:tabular-nums}
.b3head{position:absolute;left:0;top:340px;width:2px;height:150px;background:linear-gradient(180deg,rgba(200,70,0,0),rgba(200,70,0,.75),rgba(200,70,0,0));opacity:.5}
.b3band{
  position:absolute;top:344px;height:132px;border-radius:16px;transform-origin:0 50%;
  background:repeating-linear-gradient(135deg,#FFF0EE,#FFF0EE 7px,#FFF9F8 7px,#FFF9F8 14px);
  box-shadow:inset 0 0 0 1px rgba(180,35,24,.12);
}
.b3band span{position:absolute;left:18px;top:14px;font-size:12px;font-weight:660;letter-spacing:.15em;text-transform:uppercase;color:#B42318}
.b3today{position:absolute;top:330px;height:160px;border-left:1.5px dashed rgba(29,28,25,.42)}
.b3today b{position:absolute;left:-2px;top:-30px;font-size:12px;font-weight:680;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.b3today span{position:absolute;left:-2px;bottom:-26px;font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.b3foot{position:absolute;left:76px;right:76px;bottom:52px;display:flex;align-items:flex-end;gap:34px}
.b3foot p{font-size:15px;color:var(--muted);line-height:1.4}
.b3foot b{display:block;font-size:30px;font-weight:600;letter-spacing:-.032em;color:var(--ink);font-variant-numeric:tabular-nums}
.b3foot p:last-child{margin-left:auto;text-align:right;max-width:34ch}
.b4list{position:absolute;left:0;top:214px;width:660px;display:flex;flex-direction:column;gap:22px}
.b4side{position:absolute;right:0;top:214px;width:340px}
.b4side div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:19px 0;border-bottom:1px solid var(--line)}
.b4side div:first-child{border-top:1px solid var(--line)}
.b4side b{font-size:40px;font-weight:600;letter-spacing:-.042em;line-height:1;font-variant-numeric:tabular-nums}
.b4side span{font-size:15px;color:var(--muted);line-height:1.3}
.b4row{display:flex;align-items:flex-start;gap:20px}
.b4n{flex:0 0 auto;width:42px;height:42px;border-radius:14px;background:var(--brand-faint);color:var(--brand-action);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:660;box-shadow:inset 0 0 0 1px rgba(200,70,0,.18)}
.b4t b{display:block;font-size:24px;font-weight:620;letter-spacing:-.026em}
.b4t span{display:block;font-size:16px;color:var(--muted);margin-top:2px}
.b4end{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:14px}
.b4end__m{--mk:52px;border-radius:17px;box-shadow:0 8px 22px -10px rgba(200,70,0,.7)}
.b4end b{display:block;font-size:19px;font-weight:640;letter-spacing:-.02em}
.b4end span{display:block;font-size:14px;color:var(--muted)}

/* =========================================================================
   VIEW — Renewals register
   ========================================================================= */
.reg__tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.search{position:relative;display:flex;align-items:center;min-width:0}
.search svg{position:absolute;left:11px;color:var(--muted);pointer-events:none}
.search input{
  width:min(320px,60vw);height:36px;padding:0 34px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.82);
  font-size:13.5px;transition:border-color .2s var(--e-out), background-color .2s var(--e-out), box-shadow .2s var(--e-out);
}
.search input::placeholder{color:var(--muted)}
.search input:hover{border-color:var(--line-strong)}
.search input:focus{background:#fff;border-color:rgba(200,70,0,.4);box-shadow:0 0 0 3px rgba(255,101,0,.12);outline:none}
.search__x{position:absolute;right:5px;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.search__x:hover{background:var(--canvas-deep);color:var(--ink)}

.filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.fchip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 11px;border-radius:9px;
  background:var(--brand-faint);color:var(--brand-deep);
  box-shadow:inset 0 0 0 1px rgba(200,70,0,.2);
  font-size:12.5px;font-weight:580;white-space:nowrap;max-width:100%;
}
.fchip > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fchip button{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;color:var(--brand-deep);opacity:.62;flex:0 0 auto;transition:opacity .18s,background-color .18s}
.fchip button:hover{opacity:1;background:rgba(200,70,0,.12)}

.regcount{display:flex;align-items:baseline;gap:5px 12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:9px}
.regcount b{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}
.regcount__lead{font-size:14px;color:var(--ink)}
/* a rule rather than a middot, so a wrapped line never ends on a stray dot */
.regcount > span + span{padding-left:12px;border-left:1px solid var(--line-strong)}

/* ---------- the level dial — the orbit, compressed (signature) ---------- */
.reg__dial{
  position:relative;display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  padding:11px 16px 11px 15px;margin-bottom:11px;border-radius:var(--r-lg);
  background:linear-gradient(104deg,var(--surface) 0%,var(--surface) 58%,var(--brand-faint) 100%);
  border:1px solid var(--line);box-shadow:var(--hairline), var(--sh-1);
}
.reg__dialk{
  position:absolute;left:15px;top:-8px;display:inline-flex;align-items:center;gap:6px;
  padding:0 8px;height:16px;border-radius:8px;background:var(--canvas);
  font-size:9.5px;font-weight:660;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.reg__dialk svg{color:var(--brand-action)}
.ldial{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap;min-width:0}
.ldial__svg{width:88px;height:88px;flex:0 0 auto;overflow:visible}
.ldial__arc{transition:opacity .28s var(--e-out), stroke-dasharray .5s var(--e-out)}
.ldial__hit{cursor:pointer}
.ldial__hit:focus-visible{outline:2px solid var(--brand-action);outline-offset:2px}
.ldial__rows{display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;min-width:0}
.ldial__row{
  display:flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border-radius:11px;
  border:1px solid transparent;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;
  transition:background-color .18s var(--e-out), border-color .18s var(--e-out), transform .3s var(--e-spring), color .18s var(--e-out);
}
.ldial__row i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ldial__row b{font-weight:660;letter-spacing:-.01em;color:var(--ink)}
.ldial__row span{color:var(--muted)}
.ldial__row em{font-style:normal;font-weight:660;font-size:13px;letter-spacing:-.02em;color:var(--ink);margin-left:2px}
.ldial__row:hover{background:rgba(255,255,255,.9);border-color:var(--line)}
.ldial__row:active{transform:scale(.98)}
.ldial__row[aria-pressed="true"]{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--hairline), var(--sh-1)}
.ldial__row[aria-pressed="true"] span{color:var(--ink-soft)}
.ldial__row.is-empty b,.ldial__row.is-empty em{color:var(--muted);font-weight:560}
.ldial__row--all{margin-left:4px;border-left:1px solid var(--line);border-radius:0 11px 11px 0;padding-left:14px}
.ldial__row--all svg{color:var(--muted)}
@media (max-width:1080px){
  .ldial__svg{width:70px;height:70px}
  .ldial__row span{display:none}
}
@media (max-width:880px){
  .reg__dial{padding:12px 12px 12px 12px}
  .ldial__row{min-height:44px}
  .ldial__row--all{border-left:0;border-radius:11px;padding-left:11px;margin-left:0}
}

.tblwrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;min-width:900px}
/* between the phone card layout and a comfortable desktop the asset type is
   the column to lose first — the row icon already carries it, the filter above
   still selects on it, and the countdown must never be the thing that scrolls
   out of sight */
@media (min-width:881px) and (max-width:1200px){
  th[data-sk="type"],td[data-c="type"]{display:none}
  table{min-width:720px}
  tbody td{padding:9px 10px}
}
thead th{
  position:sticky;top:0;z-index:2;background:var(--surface);
  text-align:left;padding:0;border-bottom:1px solid var(--line);
  font-size:10.5px;font-weight:660;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
thead th .th{display:flex;align-items:center;gap:5px;width:100%;padding:10px 12px;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;transition:color .18s}
thead th .th:hover{color:var(--ink)}
thead th[aria-sort]:not([aria-sort="none"]) .th{color:var(--brand-action)}
thead th .th svg{opacity:.42;transition:opacity .18s, transform .28s var(--e-spring)}
thead th[aria-sort="ascending"] .th svg{opacity:1}
thead th[aria-sort="descending"] .th svg{opacity:1;transform:rotate(180deg)}
th.ta-r,td.ta-r{text-align:right}
th.ta-r .th{justify-content:flex-end}
tbody tr{border-bottom:1px solid var(--line);transition:background-color .16s var(--e-out)}
tbody tr:last-child{border-bottom:0}
tbody tr:hover{background:var(--brand-faint)}
tbody tr.is-archived{opacity:.55}
tbody td{padding:9px 12px;font-size:13.5px;vertical-align:middle}
/* the urgency spine — the orbit's ring colour, carried down the register so a
   scan of the left edge reads the same thing the rings do */
/* level colour never sits on a row edge — the chip carries it */
tbody tr[data-lv="1"] td:first-child::before{opacity:.95;width:4px}
tbody tr:hover td:first-child::before{opacity:1}
.rname{display:flex;align-items:center;gap:11px;min-width:0}
tbody tr:hover .rname .smark::after{box-shadow:inset 0 0 0 1px var(--ring-hover, rgba(41,38,32,.24)), inset 0 1px 0 rgba(255,255,255,.6)}
.rname__t{min-width:0}
.rname__t b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.014em;line-height:1.3;overflow-wrap:anywhere}
.rname__t b a{border-radius:5px}
.rname__t b a:hover{color:var(--brand-action);text-decoration:underline;text-underline-offset:2px}
.rname__t span{display:block;font-size:11.5px;color:var(--muted);line-height:1.3}
.cd{font-variant-numeric:tabular-nums;font-weight:620;letter-spacing:-.012em;white-space:nowrap}
.cd small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0}
.cd--over{color:var(--l1)}
.owner{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;color:var(--ink-soft);min-width:0}
.owner svg{flex:0 0 auto;opacity:.7;margin-top:1px}
.owner i{font-style:normal;display:block;min-width:0}
.owner em{display:block;font-style:normal;font-size:11px;line-height:1.35;color:var(--muted);letter-spacing:.005em}
.owner em.is-gap{color:var(--l3)}
.owner--none{color:var(--muted)}
.cpcell{font-size:12px;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.cpcell small{display:block;font-size:10.5px;color:var(--muted)}
.cpcell.is-late{color:var(--l1)}
.cpcell.is-none{color:var(--muted)}

/* =========================================================================
   VIEW — Renewal detail
   ========================================================================= */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:clamp(14px,1.6vw,22px);align-items:start}
.detail__id{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
}
.detail__id > .smark{margin-top:2px}
.detail__title{min-width:0;flex:1 1 300px}
.detail__title h1{font-size:clamp(1.4rem,1.05rem + 1.1vw,2rem);font-weight:620;letter-spacing:-.036em;line-height:1.1;overflow-wrap:anywhere}
.detail__sub{margin-top:6px;font-size:13px;color:var(--muted)}
.detail__badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}

.bignum{
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  padding:15px 18px;border-radius:var(--r-lg);margin-top:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--hairline), var(--sh-1);
}
.bignum--over{background:linear-gradient(180deg,#fff,#FFF7F5);border-color:rgba(180,35,24,.22)}
.bignum__n{font-size:46px;font-weight:600;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums}
.bignum--over .bignum__n{color:var(--l1)}
.bignum__u{font-size:13px;color:var(--muted);padding-bottom:5px}
.bignum__u b{display:block;font-size:14px;color:var(--ink);font-weight:620;letter-spacing:-.014em}
.bignum__side{margin-left:auto;text-align:right;font-size:12.5px;color:var(--muted);line-height:1.45}
.bignum__side b{display:block;font-size:14px;color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}

/* checkpoint timeline */
.cp{padding:15px 17px}
.cp__track{position:relative;height:58px;margin:20px 4px 6px}
.cp__rail{position:absolute;left:0;right:0;top:22px;height:2px;background:var(--line-strong);border-radius:2px}
.cp__span{position:absolute;top:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand),rgba(255,101,0,.25))}
.cp__pt{position:absolute;top:22px;transform:translate(-50%,-50%)}
.cp__pt i{display:block;width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid var(--brand-action)}
.cp__pt--renew i{border-color:var(--l4)}
.cp__pt--today i{border-color:var(--ink);background:var(--ink)}
.cp__pt--miss i{border-color:var(--l1);background:var(--l1)}
.cp__lab{position:absolute;top:16px;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center}
.cp__lab b{display:block;font-size:11px;font-weight:660;letter-spacing:.06em;text-transform:uppercase}
.cp__lab span{display:block;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px}
.cp__pt--start .cp__lab{top:-40px}
.cp__verdict{
  display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:13px;
  font-size:12.5px;line-height:1.45;font-weight:520;margin-top:8px;
}
.cp__verdict svg{flex:0 0 auto;margin-top:1px}
.cp__verdict--miss{background:var(--l1-bg);color:var(--l1);box-shadow:inset 0 0 0 1px rgba(180,35,24,.13)}
.cp__verdict--ok{background:var(--l5-bg);color:var(--l5);box-shadow:inset 0 0 0 1px rgba(40,116,90,.13)}
.cp__verdict--soon{background:var(--l4-bg);color:var(--l4);box-shadow:inset 0 0 0 1px rgba(35,104,162,.13)}
.cp__verdict--none{background:var(--canvas-deep);color:var(--ink-soft);box-shadow:inset 0 0 0 1px rgba(120,110,96,.13)}

/* playbook prose */
.playbook{padding:16px 18px 18px}
.playbook__p{font-size:14px;line-height:1.62;color:var(--ink-soft);max-width:70ch;text-wrap:pretty}
.playbook__p + .playbook__p{margin-top:11px}
.playbook__p b{color:var(--ink);font-weight:620}
.playbook ol{counter-reset:pb;margin:12px 0 0;max-width:70ch}
.playbook li{
  position:relative;counter-increment:pb;padding:0 0 0 34px;font-size:14px;line-height:1.6;color:var(--ink-soft);
}
.playbook li + li{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.playbook li::before{
  content:counter(pb);position:absolute;left:0;top:1px;
  width:23px;height:23px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-faint);color:var(--brand-action);font-size:11.5px;font-weight:680;
  box-shadow:inset 0 0 0 1px rgba(200,70,0,.18);font-variant-numeric:tabular-nums;
}
.playbook li + li::before{top:11px}
.playbook__warn{
  display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 13px;border-radius:13px;
  background:var(--l3-bg);color:#7A4600;font-size:13px;line-height:1.5;
  box-shadow:inset 0 0 0 1px rgba(161,92,0,.16);
}
.playbook__warn svg{flex:0 0 auto;margin-top:2px;color:var(--l3)}

.gapstate{display:flex;gap:13px;align-items:flex-start;padding:16px 18px}
.gapstate__ic{
  flex:0 0 auto;width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--canvas-deep),var(--canvas-deep) 6px,#F5F3EE 6px,#F5F3EE 12px);
  color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);
}
.gapstate__t{min-width:0}
.gapstate__t strong{display:block;font-size:14px;font-weight:620;letter-spacing:-.018em}
.gapstate__t p{font-size:13px;color:var(--muted);line-height:1.55;margin-top:4px;max-width:62ch}
.gapstate__t .btn{margin-top:11px}

/* fact list */
.facts{display:grid;grid-template-columns:1fr;gap:0}
.facts > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line);align-items:start}
.facts > div:last-child{border-bottom:0}
.facts dt{font-size:11px;font-weight:640;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.facts dd{font-size:13.5px;font-weight:540;letter-spacing:-.012em;overflow-wrap:anywhere}
.facts dd.num{font-variant-numeric:tabular-nums}
.facts dd small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px;letter-spacing:0}
.facts dd .unassigned{color:var(--muted);font-weight:500}

.acts{display:flex;flex-direction:column;gap:8px}
.acts .btn{justify-content:flex-start;min-height:40px}
.acts__row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acts__note{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:2px}

.remarks{font-size:13.5px;line-height:1.6;color:var(--ink-soft);overflow-wrap:anywhere;max-width:76ch}

/* =========================================================================
   VIEW — Form (add / edit)
   ========================================================================= */
.form{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(14px,1.6vw,22px);align-items:start}
.fieldset + .fieldset{margin-top:14px}
.fieldset__h{display:flex;align-items:baseline;gap:10px;padding:0 0 10px;border-bottom:1px solid var(--line);margin-bottom:14px}
.fieldset__h h2{font-size:12.5px;font-weight:660;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.fieldset__h p{font-size:12px;color:var(--muted);margin-left:auto;text-align:right}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field--wide{grid-column:1 / -1}
.field label{font-size:11px;font-weight:640;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.field label .req{color:var(--brand-action);font-size:12px;line-height:1}
.field input,.field select,.field textarea{
  width:100%;min-height:40px;padding:9px 11px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.9);
  font-size:14px;transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field textarea.field--tall{min-height:200px}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2368625A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px;cursor:pointer}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:rgba(200,70,0,.45);box-shadow:0 0 0 3px rgba(255,101,0,.12);outline:none}
.field__hint{font-size:11.5px;color:var(--muted);line-height:1.4}
.field__err{
  display:none;align-items:flex-start;gap:6px;font-size:12px;font-weight:560;color:var(--l1);line-height:1.4;
}
.field__err svg{flex:0 0 auto;margin-top:1px}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:rgba(180,35,24,.55);background:#FFFCFB}
.field.is-bad input:focus,.field.is-bad select:focus,.field.is-bad textarea:focus{box-shadow:0 0 0 3px rgba(180,35,24,.13)}
.field.is-bad .field__err{display:flex}
.field.is-good input,.field.is-good select{border-color:rgba(40,116,90,.4)}

.formsum{
  display:none;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);margin-bottom:16px;
  background:var(--l1-bg);color:var(--l1);box-shadow:inset 0 0 0 1px rgba(180,35,24,.18);font-size:13px;line-height:1.5;
}
.formsum.is-on{display:flex}
.formsum svg{flex:0 0 auto;margin-top:2px}
.formsum b{display:block;font-weight:660;margin-bottom:3px}
.formsum ul{margin-top:4px;display:flex;flex-direction:column;gap:3px}
.formsum a{text-decoration:underline;text-underline-offset:2px;font-weight:560}

.formfoot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.formfoot .formfoot__sp{flex:1 1 auto}
.formfoot p{font-size:12px;color:var(--muted)}

.previewcard{position:sticky;top:12px}
.preview__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.preview__row:last-child{border-bottom:0}
.preview__row dt{color:var(--muted);font-size:12px}
.preview__row dd{font-weight:600;letter-spacing:-.012em;text-align:right;overflow-wrap:anywhere;min-width:0}
.preview__row--mark{align-items:center}
.preview__mark{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.preview__mark span{font-size:12px;font-weight:550;color:var(--muted);letter-spacing:0}

/* =========================================================================
   VIEW — stubs + 404
   ========================================================================= */
.stub{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:640px;
  padding:clamp(22px,3vw,34px);border-radius:var(--r-xl);
  background:var(--surface);border:1px dashed var(--line-strong);box-shadow:var(--hairline), var(--sh-1);
  background-image:repeating-linear-gradient(135deg, rgba(255,101,0,.022), rgba(255,101,0,.022) 10px, transparent 10px, transparent 20px);
}
.stub__tag{
  display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:8px;
  background:var(--canvas-deep);color:var(--ink-soft);font-size:10.5px;font-weight:680;letter-spacing:.12em;text-transform:uppercase;
}
.stub h2{font-size:20px;font-weight:620;letter-spacing:-.028em}
.stub p{font-size:14px;color:var(--muted);line-height:1.6;max-width:58ch}
.stub ul{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.stub li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.stub li svg{flex:0 0 auto;margin-top:3px;color:var(--brand-action)}
.stub__acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}

.nf{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(30px,6vw,72px) 0;max-width:660px}
.nf__code{
  font-size:clamp(64px,12vw,120px);font-weight:600;letter-spacing:-.06em;line-height:.86;
  color:transparent;-webkit-text-stroke:1.5px var(--line-strong);font-variant-numeric:tabular-nums;
}
.nf h1{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);font-weight:620;letter-spacing:-.034em;line-height:1.12}
.nf p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:56ch}
.nf code{font-size:13px}
.nf__acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}

/* =========================================================================
   INSTRUMENTS — shared by the stage-2 pages: toolbars, segmented controls,
   switches, stat cards, charts. Nothing here forks the tokens.
   ========================================================================= */
.bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:13px}
.bar__sp{flex:1 1 auto;min-width:0}
.bar__lab{font-size:11px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* segmented control — window switches, month/list toggles */
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:var(--canvas-deep);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{
  min-height:30px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted);
  letter-spacing:-.008em;white-space:nowrap;
  transition:color .2s var(--e-out), background-color .2s var(--e-out), box-shadow .2s var(--e-out), transform .3s var(--e-spring);
}
.seg button:hover{color:var(--ink)}
.seg button:active{transform:scale(.97)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--hairline), var(--sh-1)}
.seg--sm button{min-height:26px;padding:0 9px;font-size:11.5px}

/* switch — the connected / not-configured toggles the brief asks for */
.swx{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 4px;border-radius:11px}
.swx:hover .swx__track{background:var(--line-strong)}
.swx[aria-checked="true"]:hover .swx__track{background:var(--brand-action)}
.swx__track{
  position:relative;flex:0 0 auto;width:40px;height:23px;border-radius:999px;background:#C9C3B8;
  box-shadow:inset 0 1px 2px rgba(48,36,26,.22);transition:background-color .26s var(--e-out);
}
.swx__knob{
  position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(48,36,26,.4), 0 2px 6px -2px rgba(48,36,26,.4);
  transition:transform .34s var(--e-spring);
}
.swx[aria-checked="true"] .swx__track{background:var(--brand)}
.swx[aria-checked="true"] .swx__knob{transform:translateX(17px)}
.swx__t{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-soft);white-space:nowrap}
.swx__t small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0}

/* connection strip — one glass panel per page, states the live truth */
.conn{
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;
  padding:11px 16px;border-radius:var(--r-lg);margin-bottom:14px;
  border:1px solid rgba(17,20,26,.075);box-shadow:var(--hairline), var(--sh-2);
}
.conn__ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--l5-bg);color:var(--l5);box-shadow:inset 0 0 0 1px rgba(40,116,90,.18);
}
.conn--off .conn__ic{background:var(--l3-bg);color:var(--l3);box-shadow:inset 0 0 0 1px rgba(161,92,0,.2)}
.conn__t{min-width:0;flex:1 1 280px}
.conn__t b{display:block;font-size:13.5px;font-weight:640;letter-spacing:-.016em}
.conn__t span{display:block;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:1px;overflow-wrap:anywhere}
.conn__meta{display:flex;gap:18px;flex-wrap:wrap}
.conn__meta div{min-width:0}
.conn__meta dt{font-size:9.5px;font-weight:660;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.conn__meta dd{margin:1px 0 0;font-size:12.5px;font-weight:580;letter-spacing:-.012em;font-variant-numeric:tabular-nums}
.conn__act{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* stat cards — plane 3, solid, weighted by meaning not by grid.
   Explicit column counts, because auto-fit leaves a ragged tail once the lead
   card is twice the width of the others. */
.stats{display:grid;gap:11px;grid-template-columns:repeat(6,minmax(0,1fr))}
.stats--n4{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat--lead{grid-column:span 2}
@media (max-width:1360px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats--n4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat--lead{grid-column:1 / -1}
}
@media (max-width:760px){
  .stats,.stats--n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats--n4 > .stat:last-child{grid-column:1 / -1}
}
.stat{
  position:relative;padding:12px 14px 11px;border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--hairline), var(--sh-1);
}
.stat--lead{background:linear-gradient(150deg,#fff 0%,#fff 58%,var(--brand-faint) 100%)}
.stat__k{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:660;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat__k svg{color:var(--brand-action);opacity:.85}
.stat__n{margin-top:5px;font-size:27px;font-weight:600;letter-spacing:-.044em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat--lead .stat__n{font-size:34px}
.stat__n small{font-size:14px;font-weight:560;letter-spacing:-.02em;color:var(--muted);margin-left:4px}
.stat__s{margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.stat__s b{color:var(--ink-soft);font-weight:600;font-variant-numeric:tabular-nums}
.stat__spark{margin-top:8px;display:block;width:100%;height:26px;overflow:visible}
.stat--warn .stat__n{color:var(--l1)}
.stat--ok .stat__n{color:var(--l5)}

/* chart — one instrument, reused by the portfolio and the zone page */
.chart{position:relative;display:flex;flex-direction:column;gap:9px;min-width:0}
.chart__read{
  display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap;min-height:38px;
  padding:7px 12px;border-radius:var(--r-sm);background:var(--canvas-deep);
  box-shadow:inset 0 0 0 1px var(--line);
}
.chart__read b{font-size:12.5px;font-weight:640;letter-spacing:-.014em;font-variant-numeric:tabular-nums;white-space:nowrap}
.chart__read .ck{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.chart__read .ck i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.chart__read .ck span{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}
.chart__read .ck--hint{margin-left:auto;color:var(--muted)}
.chart__svg{display:block;width:100%;height:auto;border-radius:var(--r-sm);touch-action:pan-y}
.chart__svg:focus-visible{outline:2px solid var(--brand-action);outline-offset:2px}
.cgrid{stroke:var(--line);stroke-width:1}
.cgrid--base{stroke:var(--line-strong)}
.clab{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.clab--y{text-anchor:end}
.ccur{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 4;opacity:.5}
.cdot{stroke:#fff;stroke-width:2}

/* =========================================================================
   VIEW — Domains: the portfolio
   ========================================================================= */
.v-domains .stats{margin-bottom:14px}
.dom__split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.zlist{display:flex;flex-direction:column}
.zrow{
  position:relative;display:grid;align-items:center;gap:10px 20px;
  /* the Record column now carries a mark as well as the level chip and the
     "+1" for the three domains that hold two renewals, so it is sized to the
     widest of those rather than to the chip alone */
  grid-template-columns:minmax(0,1fr) 88px 96px minmax(0,1.1fr) 140px;
  padding:9px 14px;border-bottom:1px solid var(--line);min-width:0;
  transition:background-color .16s var(--e-out);
}
.zrow:last-child{border-bottom:0}
.zrow:hover{background:var(--brand-faint)}
.zrow--head{
  background:var(--canvas-deep);border-bottom:1px solid var(--line-strong);padding-top:7px;padding-bottom:7px;
  font-size:10.5px;font-weight:660;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.zrow--head:hover{background:var(--canvas-deep)}
.zrow--head span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zrow__n{min-width:0;display:flex;align-items:center;gap:10px}
/* direct child only — a service mark in this cell keeps its own glyph colour */
.zrow__n > svg{flex:0 0 auto;color:var(--muted)}
.zrow:hover .zrow__n > svg{color:var(--brand-action)}
.zrow__n b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.014em;line-height:1.3;overflow-wrap:anywhere}
.zrow__n b a:hover{color:var(--brand-action);text-decoration:underline;text-underline-offset:2px}
.zrow__n em{display:block;font-style:normal;font-size:11px;color:var(--muted);line-height:1.3}
.zrow__v{font-size:13px;font-weight:600;letter-spacing:-.014em;font-variant-numeric:tabular-nums;white-space:nowrap}
.zrow__v small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);letter-spacing:0}
.zrow__meter{min-width:0}
.zmeter{position:relative;height:6px;border-radius:3px;background:var(--canvas-deep);overflow:hidden}
.zmeter i{position:absolute;inset:0;border-radius:3px;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,#FF7A1F,#C84600);transition:transform .8s var(--e-out)}
.zmeter--cache i{background:linear-gradient(90deg,#3E8FCC,#2368A2)}
/* the portfolio average, so a near-uniform column still says above or below */
.zmeter--cache::after{
  content:"";position:absolute;top:-3px;bottom:-3px;left:var(--avg,50%);width:1.5px;
  background:rgba(29,28,25,.34);border-radius:1px;
}
.zrow__meter span{display:block;margin-top:4px;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.zrow__link{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.zrow--sunset{background:repeating-linear-gradient(135deg,rgba(161,92,0,.045),rgba(161,92,0,.045) 8px,transparent 8px,transparent 16px)}
.zrow--sunset:hover{background:repeating-linear-gradient(135deg,rgba(161,92,0,.09),rgba(161,92,0,.09) 8px,var(--brand-faint) 8px,var(--brand-faint) 16px)}
.zrow--sunset .zrow__n b{color:var(--l3)}

.sunset{
  display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff,#FFFCF4);border:1px solid rgba(161,92,0,.24);
  box-shadow:var(--hairline), var(--sh-1);
}
.sunset__ic{flex:0 0 auto;width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--l3-bg);color:var(--l3);box-shadow:inset 0 0 0 1px rgba(161,92,0,.2)}
.sunset__t{min-width:0}
.sunset__t strong{display:block;font-size:14px;font-weight:640;letter-spacing:-.018em}
.sunset__t p{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin-top:4px;max-width:64ch}
.sunset__t .btn{margin-top:10px}

/* the not-configured state — designed, not an error */
.offstate{
  position:relative;padding:clamp(20px,3vw,30px);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--hairline), var(--sh-2);
}
.offstate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(120,110,96,.035), rgba(120,110,96,.035) 9px, transparent 9px, transparent 18px);
}
.offstate__in{position:relative;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.offstate__ic{flex:0 0 auto;width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--canvas-deep);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong)}
.offstate__t{min-width:0;flex:1 1 380px}
.offstate__t h2{font-size:18px;font-weight:620;letter-spacing:-.026em}
.offstate__t p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:7px;max-width:62ch}
.offstate__t p code{font-size:12.5px}
.offstate__acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.offlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:9px;margin-top:16px;position:relative}
.offlist > div{padding:11px 13px;border-radius:var(--r-md);background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.offlist dt{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:660;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.offlist dd{margin:5px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.offlist dd b{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}
.blurred{position:relative;filter:blur(3px);opacity:.5;pointer-events:none;user-select:none}

/* =========================================================================
   VIEW — Zone detail
   ========================================================================= */
.zone__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.zhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.zhead__ic{flex:0 0 auto;width:52px;height:52px;border-radius:17px;display:flex;align-items:center;justify-content:center;
  color:var(--brand-action);background:linear-gradient(180deg,#fff,var(--brand-faint));
  box-shadow:var(--hairline), inset 0 0 0 1px rgba(200,70,0,.16), var(--sh-1)}
.zhead__t{min-width:0;flex:1 1 280px}
.zhead__t h1{font-size:clamp(1.32rem,1rem + 1.1vw,1.9rem);font-weight:620;letter-spacing:-.034em;line-height:1.12;overflow-wrap:anywhere}
.zhead__t p{margin-top:6px;font-size:13px;color:var(--muted)}
.zhead__badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}

.arc{display:flex;align-items:center;gap:16px}
.arc__svg{flex:0 0 auto}
.arc__t{min-width:0}
.arc__t b{display:block;font-size:30px;font-weight:600;letter-spacing:-.044em;line-height:1;font-variant-numeric:tabular-nums}
.arc__t span{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:5px;max-width:34ch}
.linkrec{display:flex;flex-direction:column;gap:9px}
.linkrec__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px}
.linkrec__row dt{color:var(--muted)}
.linkrec__row dd{font-weight:600;letter-spacing:-.012em;font-variant-numeric:tabular-nums;text-align:right}

/* =========================================================================
   VIEW — Calendar
   ========================================================================= */
.leadfacts{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.leadfacts > div{padding:0 16px;border-left:1px solid var(--line);min-width:118px}
.leadfacts > div:first-child{border-left:0;padding-left:0}
.leadfacts dt{font-size:9.5px;font-weight:660;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.leadfacts dd{margin:3px 0 0;font-size:23px;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.leadfacts dd small{display:block;font-size:11px;font-weight:500;letter-spacing:0;color:var(--muted);line-height:1.3;margin-top:2px}
@media (max-width:880px){
  .leadfacts > div{flex:1 1 0;min-width:96px;padding:0 10px}
}

.calbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.calbar__m{font-size:clamp(1.05rem,.9rem + .5vw,1.32rem);font-weight:620;letter-spacing:-.028em;min-width:196px}
.calbar__m span{color:var(--muted);font-weight:500}
.yearnav{display:flex;align-items:center;gap:8px;flex:1 1 340px;min-width:0}
.yearstrip{display:flex;gap:3px;align-items:flex-end;flex:1 1 auto;min-width:0;height:44px}
.ycol{
  position:relative;flex:1 1 0;min-width:0;height:100%;border-radius:7px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:background-color .18s var(--e-out);
}
.ycol:hover{background:var(--brand-faint)}
.ycol[aria-pressed="true"]{background:var(--brand-soft)}
.ycol i{display:block;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#FFA463,#F05E00);min-height:2px}
.ycol[aria-pressed="true"] i{background:linear-gradient(180deg,#FF7A1F,#BD4100)}
.ycol--past i{background:linear-gradient(180deg,#E58C82,#B42318)}
.ycol--empty i{background:var(--line)}
.ycol b{display:block;font-size:9.5px;color:var(--muted);text-align:center;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.ycol[aria-pressed="true"] b{color:var(--brand-deep);font-weight:660}

.cal{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:14px;align-items:start}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.caldow{font-size:10px;font-weight:660;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:4px}
.calday{
  position:relative;aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-soft);background:var(--canvas);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color .18s var(--e-out), box-shadow .18s var(--e-out), transform .3s var(--e-spring);
}
.calday--out{color:var(--line-strong);background:transparent;box-shadow:none}
.calday--has{background:var(--surface);color:var(--ink);font-weight:620;box-shadow:var(--hairline), var(--sh-1);cursor:pointer}
.calday--has:hover{transform:translateY(-1px);box-shadow:var(--hairline), var(--sh-2)}
.calday--today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.calday--today::after{content:"";position:absolute;bottom:5px;width:14px;height:2px;border-radius:2px;background:var(--ink)}
.calday__d{line-height:1}
.calday__p{display:flex;gap:2px;align-items:center;height:6px}
.calday__p i{width:5px;height:5px;border-radius:50%}
.calday__p b{font-size:9px;font-weight:660;color:var(--muted);letter-spacing:0}
.calday--cp:not(.calday--has) .calday__p b{color:var(--brand-action)}
.calday--cp{box-shadow:inset 0 0 0 1px var(--line), inset 0 -3px 0 rgba(255,101,0,.5)}
.calday[aria-pressed="true"]{background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand-action)}

.spans{display:flex;flex-direction:column}
.spanrow{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:5px;
  padding:11px 14px;border-bottom:1px solid var(--line);min-width:0;
  transition:background-color .16s var(--e-out);
}
.spanrow:last-child{border-bottom:0}
.spanrow:hover{background:var(--brand-faint)}
.spanrow__h{display:flex;align-items:baseline;gap:10px;min-width:0}
.spanrow__h > .smark{align-self:center;margin-right:1px}
.spanrow__h b{font-size:13.5px;font-weight:600;letter-spacing:-.014em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spanrow__h b a:hover{color:var(--brand-action);text-decoration:underline;text-underline-offset:2px}
.spanrow__h em{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;margin-left:auto;font-variant-numeric:tabular-nums}
.spantrack{position:relative;height:30px;margin-top:2px}
.spantrack__rail{position:absolute;left:0;right:0;top:14px;height:2px;border-radius:2px;background:var(--canvas-deep)}
.spantrack__today{position:absolute;top:2px;bottom:2px;width:1px;background:rgba(29,28,25,.35)}
.spantrack__bar{
  position:absolute;top:11px;height:8px;border-radius:5px;
  background:linear-gradient(90deg,rgba(255,101,0,.85),rgba(255,101,0,.28));
  box-shadow:inset 0 0 0 1px rgba(200,70,0,.22);transform-origin:left center;
}
.spantrack__bar--miss{background:repeating-linear-gradient(135deg,#FFD9D3,#FFD9D3 5px,#FFECE9 5px,#FFECE9 10px);box-shadow:inset 0 0 0 1px rgba(180,35,24,.28)}
.spantrack__pt{position:absolute;top:15px;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--brand-action)}
.spantrack__pt--renew{border-color:var(--l4)}
.spantrack__pt--miss{border-color:var(--l1);background:var(--l1)}
.spantrack__lab{position:absolute;top:22px;font-size:10.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.spantrack__lab--r{right:0;text-align:right}
.spanrow__gap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.spanrow__gap b{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}
.spanrow--nocp .spantrack__rail{background:repeating-linear-gradient(90deg,var(--line),var(--line) 4px,transparent 4px,transparent 9px)}
.monthsum{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.monthsum b{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums;font-size:15px;margin-right:4px}

/* =========================================================================
   VIEW — Notifications
   ========================================================================= */
.xscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptbl{width:100%;border-collapse:collapse;min-width:660px}
.ptbl th{
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--canvas-deep);
  font-size:10.5px;font-weight:660;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.ptbl td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
.ptbl tbody tr:last-child td{border-bottom:0}
.ptbl tbody tr:hover{background:var(--brand-faint)}
.ptbl .pt-l{white-space:nowrap}
.ptbl .pt-c{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;font-weight:600}
.ptbl .pt-copy{color:var(--muted);font-size:12.5px;line-height:1.45;min-width:200px}
.ptbl .pt-n{text-align:right;font-variant-numeric:tabular-nums;font-weight:620;white-space:nowrap}
.ptbl .pt-n small{display:block;font-size:10.5px;font-weight:500;color:var(--muted)}
.ptbl tr.is-dormant td{opacity:.62}

.recips{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:11px}
.recip{
  position:relative;padding:13px 15px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--hairline), var(--sh-1);
  display:flex;flex-direction:column;gap:9px;min-width:0;
}
.recip--fail{border-color:rgba(180,35,24,.26);background:linear-gradient(180deg,#fff,#FFF8F7)}
.recip--paused{background:repeating-linear-gradient(135deg,rgba(120,110,96,.03),rgba(120,110,96,.03) 8px,#fff 8px,#fff 16px)}
.recip__h{display:flex;align-items:flex-start;gap:10px;min-width:0}
.recip__av{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-faint);color:var(--brand-deep);font-size:12.5px;font-weight:680;letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px rgba(200,70,0,.16);
}
.recip--paused .recip__av{background:var(--canvas-deep);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.recip--fail .recip__av{background:var(--l1-bg);color:var(--l1);box-shadow:inset 0 0 0 1px rgba(180,35,24,.18)}
.recip__t{min-width:0;flex:1 1 auto}
.recip__t b{display:block;font-size:13.5px;font-weight:620;letter-spacing:-.016em;line-height:1.25}
.recip__t span{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recip__lv{display:flex;gap:4px;flex-wrap:wrap}
.lvpip{
  min-width:30px;height:22px;padding:0 6px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:660;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  background:var(--canvas-deep);color:#A39C90;box-shadow:inset 0 0 0 1px var(--line);
}
.lvpip.is-on{background:var(--brand-faint);color:var(--brand-deep);box-shadow:inset 0 0 0 1px rgba(200,70,0,.22)}
.recip__f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);padding-top:9px;border-top:1px solid var(--line)}
.recip__actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.recip__edit{display:flex;flex-direction:column;gap:12px;padding:13px;border-radius:13px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.recip__edit-head{display:flex;align-items:flex-start;gap:12px}
.recip__edit-head>span{min-width:0;flex:1 1 auto}
.recip__edit-head b{display:block;font-size:12.5px;font-weight:650;letter-spacing:-.012em}
.recip__edit-head small{display:block;margin-top:2px;font-size:10.5px;line-height:1.4;color:var(--muted)}
.recip__edit-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.recip__level-option{position:relative;min-width:0;cursor:pointer;user-select:none}
.recip__level-option input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.recip__level-option span{display:flex;min-height:42px;flex-direction:column;align-items:center;justify-content:center;border-radius:9px;background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .18s var(--e-out),color .18s var(--e-out),box-shadow .18s var(--e-out),transform .18s var(--e-out)}
.recip__level-option b{font-size:11.5px;font-weight:680}.recip__level-option small{font-size:8.5px;line-height:1.2}
.recip__level-option:hover span{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(200,70,0,.28),var(--sh-1)}
.recip__level-option input:focus-visible+span{outline:3px solid rgba(255,101,0,.24);outline-offset:2px}
.recip__level-option input:checked+span{background:var(--brand-faint);color:var(--brand-deep);box-shadow:inset 0 0 0 1px rgba(200,70,0,.25)}
.recip__edit-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.recip__edit-actions .field__err{margin:0;flex:1 1 160px}
.failnote{
  display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border-radius:12px;
  background:var(--l1-bg);color:var(--l1);font-size:12px;line-height:1.45;box-shadow:inset 0 0 0 1px rgba(180,35,24,.15);
}
.failnote svg{flex:0 0 auto;margin-top:1px}

.runs{display:flex;gap:3px;align-items:flex-end;height:62px;margin-bottom:11px}
.runcol{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;border-radius:6px;
  transition:background-color .18s var(--e-out)}
.runcol:hover{background:var(--brand-faint)}
.runcol i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#5FBE93,#28745A)}
.runcol--fail i{background:linear-gradient(180deg,#E07C72,#B42318)}
.runcol[aria-pressed="true"]{background:var(--brand-soft)}
.runlist{display:flex;flex-direction:column}
.runrow{
  display:grid;grid-template-columns:auto minmax(0,1.1fr) repeat(3,minmax(0,.7fr));gap:10px 14px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line);font-size:12.5px;min-width:0;
}
.runrow:last-child{border-bottom:0}
.runrow:hover{background:var(--brand-faint)}
.runrow--fail{background:linear-gradient(90deg,#FFF6F5,transparent 62%)}
.runrow__dot{width:9px;height:9px;border-radius:50%;background:var(--l5);flex:0 0 auto}
.runrow--fail .runrow__dot{background:var(--l1)}
.runrow b{font-weight:600;letter-spacing:-.012em;font-variant-numeric:tabular-nums;white-space:nowrap}
.runrow b small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);letter-spacing:0}
.runrow span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runrow span i{font-style:normal;color:var(--ink-soft);font-weight:600}
.runrow__err{grid-column:2 / -1;color:var(--l1);font-size:11.5px;white-space:normal}

.dlvbar{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dlvbar__range{margin-left:auto;font-size:11.5px;font-weight:560;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dlvlist{display:flex;flex-direction:column;transition:opacity .16s var(--e-out)}
.dlvlist.is-loading{opacity:.42;pointer-events:none}
.dlvrow{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto auto;gap:10px 14px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line);font-size:12.5px;min-width:0;
}
.dlvrow:last-child{border-bottom:0}
.dlvrow:hover{background:var(--brand-faint)}
.dlvrow__t{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dlvrow__s{min-width:0}
.dlvrow__s b{display:block;font-size:12.5px;font-weight:580;letter-spacing:-.01em;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlvrow__s span{display:block;font-size:11px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlvrow__s em{font-style:normal;color:var(--l1)}
.dlvrow__lv{display:flex;gap:3px}
.dlvrow__lv i{font-style:normal;font-size:10px;font-weight:660;color:var(--muted);background:var(--canvas-deep);border-radius:5px;padding:2px 5px;font-variant-numeric:tabular-nums}
.dlvpager{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;padding:9px 14px;border-top:1px solid var(--line);background:rgba(255,255,255,.34)}
.dlvpager[hidden]{display:none}
.dlvpager__meta{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dlvpager__pages{display:flex;align-items:center;gap:5px}
.dlvpager button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:9px;color:var(--ink-soft);font-size:11.5px;font-weight:640;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);transition:transform .16s var(--e-out),background-color .16s var(--e-out),box-shadow .16s var(--e-out)}
.dlvpager button:hover:not(:disabled){transform:translateY(-1px);background:var(--brand-faint);box-shadow:inset 0 0 0 1px rgba(200,70,0,.24),var(--sh-1)}
.dlvpager button:focus-visible{outline:3px solid rgba(255,101,0,.24);outline-offset:2px}
.dlvpager button.is-current{color:var(--brand-deep);background:var(--brand-faint);box-shadow:inset 0 0 0 1px rgba(200,70,0,.28)}
.dlvpager button:disabled{opacity:.38;cursor:not-allowed}
.dlvpager__gap{display:inline-flex;align-items:center;justify-content:center;min-width:22px;color:var(--muted);font-size:12px}

/* =========================================================================
   VIEW — Briefing
   ========================================================================= */
.brief__grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.stagebox{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--hairline), var(--sh-3);
}
.stagebox .briefstage{border-bottom:0;border-radius:0}
.stage__badge{
  position:absolute;right:14px;top:14px;z-index:3;display:flex;align-items:center;gap:7px;
  height:28px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.86);
  box-shadow:var(--hairline), var(--sh-1);font-size:11px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}
.stage__badge i{width:6px;height:6px;border-radius:50%;background:#2E9E6B;flex:0 0 auto}
/* the cover sits low-right so it never lands on the poster's headline or
   its date line — frame 0 has to stay readable underneath it */
.stage__cover{
  position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:clamp(14px,2.4vw,26px);
  background:linear-gradient(300deg, rgba(255,247,240,.72), rgba(255,247,240,0) 42%);
  transition:opacity .3s var(--e-out);
}
.stage__cover[hidden]{display:none}
.stage__play{
  display:flex;align-items:center;gap:10px;height:52px;padding:0 24px 0 20px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:15px;font-weight:600;letter-spacing:-.014em;
  box-shadow:0 12px 34px -12px rgba(29,28,25,.8);
  transition:transform .34s var(--e-spring), background-color .2s var(--e-out);
}
.stage__play:hover{transform:scale(1.03);background:var(--brand-action)}

/* plane 4 — the floating transport */
.dock{
  position:relative;margin-top:-26px;z-index:5;margin-inline:clamp(10px,3vw,34px);
  padding:11px 14px 12px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(17,20,26,.075);
  box-shadow:var(--hairline), var(--sh-4);
}
.dock__row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.dock__t{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.dock__t b{color:var(--ink);font-weight:640}
.scrub{position:relative;flex:1 1 240px;min-width:0;padding:11px 0 4px}
.scrub__track{position:absolute;left:0;right:0;top:16px;height:5px;border-radius:3px;background:var(--canvas-deep);box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.scrub__fill{position:absolute;left:0;top:16px;height:5px;border-radius:3px;background:linear-gradient(90deg,#FF7A1F,#C84600);pointer-events:none}
.scrub__marks{position:absolute;left:0;right:0;top:16px;height:5px;pointer-events:none}
.scrub__marks i{position:absolute;top:-3px;width:1.5px;height:11px;border-radius:1px;background:rgba(29,28,25,.28)}
.scrub input[type="range"]{
  position:relative;z-index:2;width:100%;margin:0;background:transparent;appearance:none;-webkit-appearance:none;height:26px;cursor:pointer;
}
.scrub input[type="range"]::-webkit-slider-runnable-track{height:26px;background:transparent}
.scrub input[type="range"]::-moz-range-track{height:26px;background:transparent}
.scrub input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid var(--brand-action);
  box-shadow:0 1px 3px rgba(48,36,26,.4);margin-top:0.5px;transition:transform .2s var(--e-spring);
}
.scrub input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid var(--brand-action);
  box-shadow:0 1px 3px rgba(48,36,26,.4);
}
.scrub input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.scrub input[type="range"]:focus-visible{outline:none}
.scrub input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(255,101,0,.3)}
/* chapters on the left, playback speed on the right, one line when it fits */
.dock__foot{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.dock__foot .chapters{flex:1 1 auto;min-width:0}
.dock__speed{display:flex;align-items:center;gap:8px;margin-top:9px;flex:0 0 auto}
.dock__speed > span{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;letter-spacing:-.005em}
.chapters{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.chapters button{
  height:26px;padding:0 10px;border-radius:8px;font-size:11.5px;font-weight:600;color:var(--muted);
  background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--line);
  transition:color .18s var(--e-out), background-color .18s var(--e-out), box-shadow .18s var(--e-out);
}
.chapters button:hover{color:var(--ink);background:#fff}
.chapters button[aria-current="true"]{background:var(--surface);color:var(--brand-deep);box-shadow:inset 0 0 0 1px rgba(200,70,0,.3), var(--sh-1)}
.chapters button b{font-variant-numeric:tabular-nums;font-weight:660;margin-right:5px;opacity:.6}

.props{display:flex;flex-direction:column}
.props__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.props__row:last-child{border-bottom:0}
.props__row dt{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.props__row dd{font-weight:620;letter-spacing:-.012em;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.props__row dd.is-changed{color:var(--brand-action)}
.props__row dd.is-changed::after{content:" ↺";font-size:10px;opacity:.7}
.sched{display:flex;flex-direction:column;gap:9px}
.schedrow{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.schedrow svg{flex:0 0 auto;margin-top:2px;color:var(--brand-action)}
.schedrow b{font-weight:620;color:var(--ink)}

/* =========================================================================
   VIEW — Login. The brand moment.
   ========================================================================= */
/* the sign-in route sheds the authenticated chrome — you cannot be looking at
   the register's nav and counts before you are in */
html.is-bare .rail,
html.is-bare .topbar,
html.is-bare .tabbar,
html.is-bare .pagefoot{display:none !important}
html.is-bare .col{height:100dvh}
html.is-bare .scroller{padding-bottom:0}
html.is-bare .view{padding:0}

.v-login{position:relative;display:flex;align-items:center;justify-content:center;min-height:min(78vh,760px);padding:20px var(--gutter)}
.view--fixed .v-login{flex:1 1 auto;min-height:0;padding:20px var(--gutter)}
.loginback{
  position:absolute;left:var(--gutter);top:18px;display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:0 13px 0 10px;border-radius:11px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
  border:1px solid var(--line);background:rgba(255,255,255,.72);box-shadow:var(--hairline), var(--sh-1);
  transition:transform .3s var(--e-spring), background-color .2s var(--e-out), color .2s var(--e-out);
}
.loginback:hover{transform:translateX(-2px);background:#fff;color:var(--ink)}
.loginwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,380px);gap:clamp(20px,4vw,56px);align-items:center;width:100%;max-width:1020px}
.loginbrand{min-width:0}
.loginbrand__mk{--mk:74px;border-radius:24px;box-shadow:0 2px 6px rgba(120,52,10,.28), 0 20px 44px -18px rgba(200,70,0,.7), inset 0 1px 0 rgba(255,255,255,.4)}
.loginbrand h1{margin-top:26px;font-size:clamp(1.9rem,1.3rem + 2.2vw,3.1rem);font-weight:600;letter-spacing:-.042em;line-height:1.04;text-wrap:balance;max-width:14ch}
.loginbrand h1 em{font-style:normal;color:var(--brand-action)}
.loginbrand p{margin-top:14px;font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:44ch}
.loginfacts{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.loginfacts div{min-width:0}
.loginfacts b{display:block;font-size:26px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.loginfacts span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.loginfacts div:nth-child(2) b{color:var(--l1)}
.loginfacts div:nth-child(3) b{color:var(--brand-action)}
.logincard{
  padding:clamp(20px,2.4vw,28px);border-radius:var(--r-xl);
  border:1px solid rgba(17,20,26,.075);box-shadow:var(--hairline), var(--sh-4);
}
.logincard h2{font-size:17px;font-weight:640;letter-spacing:-.024em}
.logincard > p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.logincard form{margin-top:18px}
.pwwrap{position:relative;display:flex;align-items:center}
.pwwrap input{padding-right:44px}
.pweye{
  position:absolute;right:6px;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);
  transition:color .18s var(--e-out), background-color .18s var(--e-out);
}
.pweye:hover{background:var(--canvas-deep);color:var(--ink)}
.loginfoot{margin-top:16px;font-size:11.5px;color:var(--muted);line-height:1.5}
.loginfoot a{color:var(--brand-action);text-decoration:underline;text-underline-offset:2px}
.caps{display:none;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--l3);font-weight:560}
.caps.is-on{display:flex}

/* =========================================================================
   responsive
   ========================================================================= */
@media (max-width:1400px){
  @media (min-width:1200px){
    .v-ov{grid-template-columns:274px minmax(0,1fr) 300px}
  }
}
@media (max-width:1199px){
  .v-ov{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:none}
  .ov-posture{grid-column:1 / -1}
  .ov-figs{grid-column:1 / -1;grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr))}
  .ov-orbit{grid-column:1 / -1;min-height:440px;max-height:min(560px,70vh)}
  .ov-next{grid-column:1}
  .ov-brief{grid-column:2}
  .ov-expo{grid-column:1 / -1}
  .detail{grid-template-columns:minmax(0,1fr) 300px}
  .form{grid-template-columns:minmax(0,1fr) 280px}
}
@media (max-width:1080px){
  :root{--rail-w:72px}
  .rail{padding:16px 10px 14px;align-items:center;gap:16px}
  .brand{padding:0}
  .brand__txt,.nav__label,.nav__item span,.rail__foot .status span{display:none}
  .nav__item{justify-content:center;padding:0}
  .nav__item[aria-current="page"]::before{left:-10px}
  .nav__badge{position:absolute;top:2px;right:4px;margin:0;min-width:17px;height:17px;font-size:9.5px;padding:0 4px}
  .rail__foot{padding:12px 0 0;align-items:center}
  .status{justify-content:center}
  .detail{grid-template-columns:minmax(0,1fr)}
  .form{grid-template-columns:minmax(0,1fr)}
  .previewcard{position:static}
}
@media (max-width:900px){
  .v-ov{grid-template-columns:minmax(0,1fr)}
  .ov-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-next,.ov-brief{grid-column:1}
  .ov-orbit{min-height:400px;max-height:none}
  .console__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .orbit__wrap{min-height:320px}
  .legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
}
/* the register turns to cards before the table would ever need sideways scrolling */
@media (max-width:880px){
  .rail{display:none}
  .tabbar{display:block}
  .topbrand{display:flex}
  .scroller{padding-bottom:80px}
  .topbar{padding:8px 12px;gap:8px}
  .topbar__meta{display:none}
  .view{padding:14px 14px 24px}
  .ov-posture__side{width:100%;order:3}
  .ov-mini{flex:1 1 0;padding:0 10px}
  .ov-mini:first-child{padding-left:0}

  .tblwrap{overflow:visible}
  table,thead,tbody,tr,td{display:block;width:100%}
  table{min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  tbody tr{
    border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
    box-shadow:var(--hairline), var(--sh-1);padding:12px 13px;margin-bottom:9px;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;align-items:center;
  }
  tbody tr:hover{background:var(--surface)}
  tbody td{padding:0;font-size:13px}
  td[data-c="name"]{grid-column:1 / -1;grid-row:1}
  td[data-c="level"]{grid-column:1;grid-row:2}
  td[data-c="days"]{grid-column:2;grid-row:2;text-align:right}
  td[data-c="type"]{grid-column:1;grid-row:3;color:var(--muted);font-size:12px}
  td[data-c="date"]{grid-column:2;grid-row:3;text-align:right;font-size:12px}
  td[data-c="cp"]{grid-column:1 / -1;grid-row:4;padding-top:8px;border-top:1px solid var(--line)}
  td[data-c="owner"]{grid-column:1 / -1;grid-row:5}
  td[data-c="cp"]::before,td[data-c="owner"]::before{
    content:attr(data-label);display:block;margin-bottom:3px;
    font-size:10px;font-weight:660;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  }
  /* the card is a bigger surface than the row, so the mark grows with it */
  .rname .smark--md{--sz:34px;--rad:11px}
  /* in card mode the whole card is the tap target, not the 18px name link */
  tbody tr{position:relative}
  .rname__t b a::after{content:"";position:absolute;inset:0;border-radius:var(--r-md);z-index:1}
  .rname__t b a:focus-visible::after{outline:2px solid var(--brand-action);outline-offset:-3px}
  tbody tr:active{background:var(--brand-faint)}
  /* the spine becomes the card's left edge */

  /* level is carried by the chip, never by a coloured card edge */

  /* touch targets >= 44px */
  .btn{min-height:44px;padding:0 16px}
  .btn--sm{min-height:44px;padding:0 14px}
  .btn--icon,.btn--icon.btn--sm{width:44px}
  .scope select,.search input{height:44px}
  .field input,.field select{min-height:46px}
  .fchip{height:38px;padding:0 8px 0 12px}
  .fchip button{width:24px;height:24px}
  .nav__item,.tabbar a{min-height:48px}
  .minirow{padding:10px 9px}
  .lvl{padding:10px}
  /* twelve months across a phone: the column cannot reach 44px wide without
     either scrolling or losing a month, and losing a month loses the shape of
     the year — which is the whole point of the strip. It keeps its 86px of
     height and the gap tightens so every column clears 24px, the floor below
     which a bar in a chart stops being aimable. */
  .expo{gap:2px}
  .expocol{min-height:44px;min-width:24px}
  .facts > div{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (max-width:520px){
  .topbar{gap:6px;flex-wrap:nowrap}
  .topbar__acts{gap:6px;flex:0 0 auto;margin-left:auto}
  .scope{flex:1 1 auto;min-width:0}
  .scope select{max-width:none;width:100%}
  .topbrand b{display:none}
  .ov-figs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .search input{width:100%}
  .search{flex:1 1 180px;width:100%}
  .reg__tools > .scope{flex:1 1 140px}
  .reg__tools > .scope select{width:100%;max-width:none}
  .page__acts{margin-left:0;width:100%}
  .page__acts > *{flex:1 1 auto}
  .acts__row{grid-template-columns:1fr}
  .detail__id > .smark--xl{--sz:44px;--rad:14px}
  .expoaxis span{font-size:9px}
  .legend{grid-template-columns:minmax(0,1fr)}
  #btnAdd .btn__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #btnAdd .btn__t--xs{display:inline}
}

/* ---------- responsive · stage-2 views ---------- */
@media (max-width:1199px){
  .dom__split{grid-template-columns:minmax(0,1fr)}
  .zone__grid{grid-template-columns:minmax(0,1fr) 290px}
  .brief__grid{grid-template-columns:minmax(0,1fr) 300px}
  .cal{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
}
@media (max-width:1080px){
  .zone__grid,.brief__grid{grid-template-columns:minmax(0,1fr)}
  .loginwrap{grid-template-columns:minmax(0,1fr)}
  .v-login{min-height:0}
}
@media (max-width:960px){
  .cal{grid-template-columns:minmax(0,1fr)}
  .zrow{grid-template-columns:minmax(0,1.4fr) 84px minmax(0,1fr) 140px}
  .zrow > .zrow__plan{display:none}
}
@media (max-width:880px){
  /* the register's card mode is global; these tables opt back out of it */
  .ptbl{display:table}
  .ptbl thead{display:table-header-group;position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
  .ptbl tbody{display:table-row-group}
  .ptbl tr{
    display:table-row;border:0;border-radius:0;background:transparent;box-shadow:none;
    padding:0;margin:0;gap:0;
  }
  .ptbl th,.ptbl td{display:table-cell;padding:9px 12px;font-size:12.5px}
  .ptbl tbody tr:hover{background:var(--brand-faint)}

  .zrow{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:12px 13px;align-items:start}
  .zrow--head{display:none}
  .zrow__n{grid-column:1 / -1}
  .zrow__meter{grid-column:1 / -1}
  .zrow__link{grid-column:2;grid-row:1;align-self:center}
  .runrow{grid-template-columns:auto minmax(0,1fr) auto;padding:11px 13px}
  .runrow__recs{display:none}
  .dlvrow{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:11px 13px}
  .dlvrow__t{grid-column:1 / -1;order:-1}
  .dlvrow__lv{display:none}
  .dlvpager{align-items:flex-start;flex-direction:column}
  .dlvpager__pages{width:100%;overflow-x:auto;padding:2px 1px 4px}
  .calbar__m{min-width:0;flex:1 1 100%;order:-1}
  /* on a phone the transport sits under the stage rather than over it */
  .dock{margin-top:10px;margin-inline:0}
  .chapters button{min-height:38px}
  .seg button{min-height:40px;padding:0 14px}
  .swx{min-height:44px}
  .calday{border-radius:8px}
}
@media (max-width:520px){
  .stat__n{font-size:23px}
  .stat--lead .stat__n{font-size:29px}
  .conn__act{margin-left:0;width:100%}
  /* the strip takes its own full-width line so it keeps the shape of the year,
     with a fade on the trailing edge where the twelfth month sits */
  .yearnav{flex:1 1 100%;flex-wrap:wrap}
  .yearstrip{flex:1 1 100%;order:2;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .zrow{grid-template-columns:minmax(0,1fr)}
  .zrow__link{grid-column:1;grid-row:auto;justify-content:flex-start}
  .loginfacts{gap:16px}
  .calday__p b{font-size:8px}
}

/* =========================================================================
   reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .spot{display:none}
  .status__dot::after{display:none}
  .view.is-entering{animation:none}
}

/* ---- touch-target floor: every control clears 44px on coarse pointers ---- */
@media (max-width:880px){
  .seg > button,
  .seg--sm > button{min-height:44px}
  /* the chapter jumps sit in the same row as the speed control, so they take
     the same floor rather than reading as a shorter, different kind of button */
  .chapters > button{min-height:44px}
  /* the scrub is a 26px strip on a phone — the one control in the transport a
     thumb misses. Grow only the hit area: `display:block` takes the input off
     the line box so the negative margins can expand it symmetrically about its
     own centre and hand the height straight back to the layout. The runnable
     track stays 26px and centres itself inside the taller input, so the track,
     the fill and the thumb do not move by a pixel. */
  .scrub input[type="range"]{display:block;height:44px;margin-top:-9px;margin-bottom:-3px}

  /* --- the four the floor above still did not reach ---------------------
     `.btn{min-height:44px}` is one class deep, so anywhere a view sets its
     own button height with two classes the floor silently lost. The record
     page's action stack was the case that mattered: four 40px buttons, the
     primary path through the whole product on a phone. */
  .acts .btn{min-height:44px}
  /* an inline text link cannot grow without moving the type, so the hit area
     grows and the negative margin hands the space straight back — the crumb
     row, the eye toggle and the sign-in back-link all sit exactly where they
     sat, and all three are now 44px to a thumb */
  .crumbs a{padding:13px 6px;margin:-13px -2px}
  .pweye{width:44px;height:44px;right:2px}
  .loginback{min-height:44px}
  /* a chip that is a link is a control; a chip that is a span is a label */
  a.chip{min-height:44px}
  /* the calendar cell is square by construction, so 390px / 7 leaves it 1.6px
     short — the height is released from the aspect ratio rather than the grid
     being narrowed, which would cost a column */
  .calday{aspect-ratio:auto;min-height:44px}
  /* the span list's title link is 16px of type. Rather than pad the type, the
     whole row becomes the target — the same overlay the register's card mode
     already uses, so both lists behave identically under a thumb. */
  .spanrow__h b a::after{content:"";position:absolute;inset:0;z-index:1}
  .spanrow__h b a:focus-visible::after{outline:2px solid var(--brand-action);outline-offset:-3px;border-radius:8px}
  .spanrow:active{background:var(--brand-faint)}
  /* Twelve month columns cannot each be 44px inside 390px, and at 11px the
     only control that jumps a month was un-aimable. The columns take a 30px
     floor and still grow to fill a tablet; on the narrowest phone that is
     eleven of the twelve on screen with the last one a nudge away, behind a
     fade that says so. The strip scrolls inside its own box — the page still
     never scrolls sideways. */
  .yearstrip{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .yearstrip::-webkit-scrollbar{display:none}
  .ycol{flex:1 1 30px;min-width:30px}
}


/* =========================================================================
   SIGN-IN — one glass card over the atmosphere. No product data leaves the
   register before authentication.
   ========================================================================= */
/* ---------- sign-in aurora ------------------------------------------------
   A slow orange field behind the card, masked so it dissolves into white
   before it reaches the bottom of the page. Deliberately gradient-only: a
   large filter:blur() here stops Chromium repainting the static content
   behind it, which is the bug that ate the dashboard background once already.
   -------------------------------------------------------------------------- */
.aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:var(--canvas);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.aurora__b{position:absolute;border-radius:50%;will-change:transform}
.aurora__b--1{
  left:-12%;top:-20%;width:78vw;height:78vw;min-width:620px;min-height:620px;
  background:radial-gradient(circle at 50% 50%, rgba(255,102,0,.34), rgba(255,102,0,.11) 29%, rgba(255,102,0,0) 57%);
  animation:aur-a 38s var(--e-inout) infinite alternate;
}
.aurora__b--2{
  right:-16%;top:-6%;width:64vw;height:64vw;min-width:520px;min-height:520px;
  background:radial-gradient(circle at 50% 50%, rgba(255,102,0,.28), rgba(255,102,0,.09) 30%, rgba(255,102,0,0) 58%);
  animation:aur-b 52s var(--e-inout) infinite alternate;
}
.aurora__b--3{
  left:16%;top:22%;width:70vw;height:52vw;min-width:560px;min-height:420px;
  background:radial-gradient(circle at 50% 50%, rgba(255,102,0,.24), rgba(255,102,0,.07) 30%, rgba(255,102,0,0) 58%);
  animation:aur-c 46s var(--e-inout) infinite alternate;
}
.aurora__b--4{
  left:-8%;top:34%;width:46vw;height:46vw;min-width:380px;min-height:380px;
  background:radial-gradient(circle at 50% 50%, rgba(255,102,0,.26), rgba(255,102,0,0) 50%);
  animation:aur-b 44s var(--e-inout) infinite alternate-reverse;
}
@keyframes aur-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,5vh,0) scale(1.14)}}
@keyframes aur-b{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-8vw,4vh,0) scale(1)}}
@keyframes aur-c{from{transform:translate3d(-4vw,0,0) scale(1)}to{transform:translate3d(5vw,-5vh,0) scale(1.1)}}
.currounding{
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
@media (prefers-reduced-motion:reduce){
  .aurora__b{animation:none}
}

.loginpage{position:relative;z-index:1;display:grid;place-items:center;min-height:100dvh;padding:24px}
.logincard{width:min(400px,100%);padding:clamp(22px,4vw,30px)}
.logincard__brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.logincard__brand > span:last-child b{display:block;font-size:14.5px;font-weight:640;letter-spacing:-.017em}
.logincard__brand > span:last-child span{display:block;font-size:11.5px;color:var(--muted)}
.logincard__mk{--mk:38px;border-radius:12px}
.logincard h1{font-size:26px;font-weight:620;letter-spacing:-.03em;margin:0 0 8px}
.logincard__sub{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 18px}
.loginform{display:grid;gap:13px}
.loginform .field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.loginform .field input{
  width:100%;min-height:44px;padding:0 13px;border-radius:12px;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.85);
  font-size:14px;transition:border-color .2s var(--e-out), box-shadow .2s var(--e-out);
}
.loginform .field input:focus-visible{outline:2px solid var(--brand-action);outline-offset:1px}
.btn--block{width:100%;min-height:44px;justify-content:center}
.logincard__ms{
  min-height:46px;
  background:#fff;
  border:1.5px solid var(--line-strong);
  color:var(--ink);
  font-weight:600;
  box-shadow:0 1px 2px rgba(56,60,70,.08), 0 4px 12px -4px rgba(56,60,70,.16);
}
.logincard__ms:hover{border-color:#0067b8;box-shadow:0 2px 4px rgba(0,103,184,.12), 0 8px 20px -6px rgba(0,103,184,.25)}
.logincard__or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted);font-size:11.5px}
.logincard__or::before,.logincard__or::after{content:"";height:1px;flex:1;background:var(--line)}
.loginpage .field__err.is-on{display:flex;align-items:center;gap:7px;color:var(--l1);font-size:12.5px;font-weight:550}


/* =========================================================================
   GLASSMORPHISM — the one place the card material is defined.

   CLEAR glass, deliberately colourless: a frosted white pane with a crisp
   light ring, a cool neutral depth shadow and real backdrop blur where the
   hardware can afford it. No warm tint — the orange in this product belongs
   to signals and the primary action, never to the material.
   ========================================================================= */
.card,
.panel,
.tile__in,
.readout,
.nextcard,
.ov-brief,
.briefcard,
.conn,
.recip,
.zrow,
.b2cap,
.errbox{
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.60));
  border:1px solid rgba(17,20,26,.075);
  /* No drop shadow. The pane is defined by its hairline and its own light
     ring; anything cast onto the canvas reads as dirt on a white page. */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 2px 0 0 rgba(255,255,255,.35);
}

/* the register's white table body joins the family */
.regwrap,
.dl{
  background:linear-gradient(172deg, rgba(255,255,255,.86), rgba(255,255,255,.64));
}

/* secondary buttons: frosted but UNMISTAKABLE — a real border, real ink,
   a real shadow. Nobody should have to hunt for "Add recipient". */
.btn:not(.btn--primary):not(.btn--ghost){
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
  border:1px solid var(--line-strong);
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 2px rgba(56,60,70,.08),
    0 3px 9px -3px rgba(56,60,70,.14);
}
.btn:not(.btn--primary):not(.btn--ghost):hover{
  background:#fff;
  border-color:#B9B2A6;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px rgba(56,60,70,.1),
    0 8px 18px -6px rgba(56,60,70,.2);
}

/* real blur where it can be afforded */
@media (min-width:900px){
  .card,
  .panel,
  .tile__in,
  .readout,
  .nextcard,
  .ov-brief,
  .briefcard,
  .conn,
  .recip{
    -webkit-backdrop-filter:blur(30px) saturate(1.55) brightness(1.04);
    backdrop-filter:blur(30px) saturate(1.55) brightness(1.04);
  }
}

@media (prefers-reduced-transparency:reduce){
  .card,.panel,.tile__in,.readout,.nextcard,.ov-brief,.briefcard,.conn,.recip,.zrow,.b2cap,.errbox,
  .btn:not(.btn--primary){
    background:var(--surface);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* =========================================================================
   VIEW — CURSOR PROVIDER WORKSPACE
   -------------------------------------------------------------------------
   Warm-white, evidence-first administration. Cursor data never borrows the
   renewal register's level colours: freshness, provenance and availability
   are the visual hierarchy. All grids admit long provider values without
   increasing the page width.
   ========================================================================= */
.nav__logo{
  width:18px;height:18px;object-fit:contain;flex:0 0 auto;border-radius:4px;
}
.cursor-scope{
  min-width:0;min-height:36px;padding:0 12px;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:11px;
  background:rgba(255,255,255,.84);color:var(--ink);
  font-size:13px;font-weight:650;letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 #fff;
}
.cursor-scope img{width:16px;height:16px;object-fit:contain;flex:0 0 auto}

.v-cursor{
  --cur-green:#26785C;
  --cur-green-soft:#EAF7F1;
  --cur-amber:#9A6300;
  --cur-amber-soft:#FFF7DF;
  --cur-red:#B42318;
  --cur-red-soft:#FFF0EE;
  width:100%;
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
.v-cursor *{min-width:0}

/* ---------- hero ---------- */
.curhero{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,auto);
  align-items:center;gap:28px;padding:23px 26px;
  border:1px solid rgba(211,205,194,.88);border-radius:26px;
  background:
    radial-gradient(circle at 7% 0%,rgba(255,102,0,.12),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,252,248,.92));
  box-shadow:inset 0 1px 0 #fff,0 18px 52px -42px rgba(74,43,18,.5);
}
.curhero__brand{display:flex;align-items:center;gap:18px}
.curhero__logo{
  width:68px;height:68px;flex:0 0 68px;border-radius:21px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#fff,#F4F3F0);
  border:1px solid rgba(30,29,26,.09);
  box-shadow:inset 0 1px 0 #fff,0 12px 26px -19px rgba(31,29,25,.55);
}
.curhero__logo img{width:42px;height:42px;object-fit:contain}
.curhero h1{
  margin-top:3px;font-size:clamp(27px,2.8vw,40px);line-height:1.04;
  letter-spacing:-.045em;font-weight:735;
}
.curhero__brand > div > p:last-child{
  margin-top:7px;max-width:720px;color:var(--ink-soft);font-size:13.5px;
}
.curhero__health{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:12px 12px 12px 14px;border:1px solid rgba(211,205,194,.82);border-radius:16px;
  background:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 #fff;
}
.curhero__health > span:nth-child(2){display:flex;flex-direction:column;line-height:1.3}
.curhero__health b{font-size:13px;font-weight:690}
.curhero__health small{margin-top:3px;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.curpulse{
  position:relative;width:10px;height:10px;border-radius:50%;background:var(--muted);
  box-shadow:0 0 0 5px rgba(104,98,90,.08);
}
.curpulse::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid currentColor;
  opacity:.38;animation:cur-pulse 2.4s var(--e-out) infinite;
}
.curpulse--fresh{color:var(--cur-green);background:var(--cur-green);box-shadow:0 0 0 5px rgba(38,120,92,.1)}
.curpulse--stale{color:var(--cur-amber);background:var(--cur-amber);box-shadow:0 0 0 5px rgba(154,99,0,.1)}
.curpulse--critical{color:var(--cur-red);background:var(--cur-red);box-shadow:0 0 0 5px rgba(180,35,24,.1)}
@keyframes cur-pulse{0%{transform:scale(.65);opacity:.65}75%,100%{transform:scale(1.35);opacity:0}}

/* ---------- tabs / alerts ---------- */
.curtabs{
  width:max-content;max-width:100%;padding:4px;display:flex;align-items:center;gap:3px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.8);
  overflow-x:auto;scrollbar-width:none;
}
.curtabs::-webkit-scrollbar{display:none}
.curtabs button{
  min-height:40px;min-width:40px;padding:0 16px;border-radius:11px;white-space:nowrap;
  color:var(--muted);font-size:13px;font-weight:640;letter-spacing:-.01em;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}
.curtabs button:hover{color:var(--ink);background:#fff}
.curtabs button[aria-selected="true"]{
  color:#fff;background:var(--ink);box-shadow:0 8px 18px -10px rgba(29,28,25,.65);
}
.curalert{
  display:flex;gap:10px;padding:12px 15px;border:1px solid var(--line);border-radius:14px;
  background:#FFFDF9;color:var(--ink-soft);
}
.curalert > svg{margin-top:2px;flex:0 0 auto}
.curalert > div{display:flex;flex-direction:column;gap:2px}
.curalert b{font-size:13px;font-weight:700}
.curalert span{font-size:12px;color:inherit;opacity:.82}
.curalert--critical{border-color:rgba(180,35,24,.2);background:var(--cur-red-soft);color:var(--cur-red)}

/* ---------- stat cards ---------- */
.curoverview,.curusage,.curspend,.curpeople{display:flex;flex-direction:column;gap:14px;min-width:0}
.curstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-width:0}
.curstats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.curstat{
  position:relative;overflow:hidden;padding:18px 19px 16px;min-height:150px;
  display:flex;flex-direction:column;gap:9px;border-radius:20px;
  animation:cur-rise .5s var(--e-out) both;
  transition:transform .25s var(--e-out),box-shadow .25s var(--e-out);
}
.curstat:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.curstat:nth-child(2){animation-delay:.055s}
.curstat:nth-child(3){animation-delay:.11s}
.curstat:nth-child(4){animation-delay:.165s}
@keyframes cur-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.curstat__k{
  display:flex;align-items:center;gap:7px;color:var(--muted);
  font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
}
.curstat__num{
  font-size:clamp(28px,2.5vw,38px);line-height:1.04;letter-spacing:-.045em;
  font-weight:745;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.curstat__num--date{font-size:clamp(20px,1.85vw,27px);line-height:1.12}
.curstat__sub{color:var(--ink-soft);font-size:12.3px;line-height:1.5}
.curstat__note{
  margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);
  color:var(--muted);font-size:10.8px;line-height:1.45;
}
.curseatroles{display:flex;flex-wrap:wrap;gap:6px}
.curseatroles span{
  padding:3px 9px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.75);color:var(--muted);font-size:11px;font-weight:600;
}
.curseatroles b{color:var(--ink);font-weight:740;font-variant-numeric:tabular-nums}

/* ---------- charts ---------- */
.curchartcard{padding:20px 21px 15px;border-radius:21px;animation:cur-rise .5s var(--e-out) .12s both}
.curchartcard__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.curchartcard__head h2{font-size:20px;line-height:1.15;letter-spacing:-.025em}
.curchartcard__total{text-align:right}
.curchartcard__total b{display:block;font-size:clamp(22px,2vw,30px);line-height:1;letter-spacing:-.04em;font-weight:745;font-variant-numeric:tabular-nums}
.curchartcard__total small{display:block;margin-top:4px;color:var(--muted);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}


/* ---------- leaderboards / bars ---------- */
.curranks{display:flex;flex-direction:column}
.currank{
  display:grid;grid-template-columns:34px minmax(170px,1fr) minmax(0,1.4fr) auto 40px;
  align-items:center;gap:16px;padding:11px 20px;border-bottom:1px solid var(--line);
  transition:background .16s ease;
}
.currank:last-child{border-bottom:0}
.currank:hover{background:#FFFCF8}
.currank__pos{
  width:30px;height:30px;display:grid;place-items:center;border-radius:10px;
  background:#F4F2ED;color:var(--ink-soft);font-size:12.5px;font-weight:740;font-variant-numeric:tabular-nums;
}
.currank--1 .currank__pos{background:var(--brand);color:#fff;box-shadow:0 8px 16px -8px rgba(255,102,0,.55)}
.currank--2 .currank__pos{background:var(--brand-soft);color:var(--brand-deep)}
.currank--3 .currank__pos{background:var(--brand-faint);color:var(--brand-deep)}
.currank__id{display:flex;align-items:center;gap:10px}
.currank__id b{display:block;font-size:13px;letter-spacing:-.01em}
.currank__id small{display:block;margin-top:1px;color:var(--muted);font-size:10.5px;overflow-wrap:anywhere}
.currank__bar{display:block;height:10px;border-radius:999px;background:#F1EFEA;overflow:hidden}
.currank__bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),#FF8A3D);
  transform-origin:left center;transition:filter .16s ease;
}
.currank:hover .currank__bar i,.curtbl tbody tr:hover .currank__bar i{filter:brightness(1.08)}
.currank__val{text-align:right}
.currank__val b{display:block;font-size:14px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.currank__val small{display:block;margin-top:1px;color:var(--muted);font-size:10.5px;white-space:nowrap}
.curavatar{
  width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(145deg,var(--brand-soft),#FFE1CC);color:var(--brand-deep);
  font-size:10.5px;font-weight:770;letter-spacing:.02em;
}
.curid{display:flex;align-items:center;gap:10px}
.curid b{display:block;font-size:12.8px}
.curid small{display:block;margin-top:1px;color:var(--muted);font-size:10.5px;overflow-wrap:anywhere}
.curtop__hint{color:var(--muted);font-size:11px;font-weight:600;white-space:nowrap}
.currankskel{display:flex;flex-direction:column;gap:9px;padding:14px 20px}
.currankskel span{
  height:38px;border-radius:12px;
  background:linear-gradient(105deg,#F4F2ED 35%,#FFF 47%,#F4F2ED 60%);
  background-size:220% 100%;animation:cur-shimmer 1.4s ease-in-out infinite;
}
.curmodels{display:flex;flex-direction:column}
.curmodel{
  display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,1.4fr) auto;
  align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);
  transition:background .16s ease;
}
.curmodel:last-child{border-bottom:0}
.curmodel:hover{background:#FFFCF8}
.curmodel__id b{display:block;font-size:13px;letter-spacing:-.01em}
.curmodel__id small{display:block;margin-top:1px;color:var(--muted);font-size:10.5px}
.curmodel--other{background:#FCFBF8}
.curmodel--other .curmodel__id b{color:var(--muted);font-weight:640}
.curmodel--other .currank__bar i{background:#D8D2C8}
.curcell-tokens{display:flex;flex-direction:column;gap:5px;max-width:230px}
.curcell-tokens b{font-size:13px;font-variant-numeric:tabular-nums}
.curcell-tokens .currank__bar{height:8px}
/* Small muted share label beside a token figure. */
.curshare{margin-left:7px;color:var(--muted);font-size:10.5px;font-weight:620;font-variant-numeric:tabular-nums}

/* proportion-bar entrance */
@media (prefers-reduced-motion:no-preference){
  .currank__bar i{animation:cur-grow .8s var(--e-out) both}
  .currank:nth-child(2) .currank__bar i{animation-delay:.06s}
  .currank:nth-child(3) .currank__bar i{animation-delay:.12s}
  .currank:nth-child(4) .currank__bar i{animation-delay:.18s}
  .currank:nth-child(5) .currank__bar i{animation-delay:.24s}
  .curmodel:nth-child(2) .currank__bar i{animation-delay:.06s}
  .curmodel:nth-child(3) .currank__bar i{animation-delay:.12s}
  
}
@keyframes cur-grow{from{transform:scaleX(0)}}
@keyframes cur-draw{to{stroke-dashoffset:0}}
@keyframes cur-fadein{to{opacity:1}}

/* ---------- footer strip ---------- */
.curfoot{padding:13px 20px;border-radius:16px;display:flex;flex-direction:column;gap:4px}
.curfoot .curfresh{padding:0;border:0;background:none}
.curfoot__line{color:var(--muted);font-size:11px;line-height:1.5}
.curfoot__exact{
  margin-left:8px;display:inline-flex;align-items:center;gap:5px;vertical-align:-1px;
  color:var(--brand-action);font-size:11px;font-weight:680;
}
.curfoot__exact:hover{text-decoration:underline}
.curfoot .currounding{margin:0;font-size:10.5px}

/* ---------- tables ---------- */
.curtable{padding:0;overflow:hidden;border-radius:21px}
.curtable__head{
  padding:18px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  border-bottom:1px solid var(--line);background:rgba(255,253,250,.58);
}
.curtable h2{font-size:20px;line-height:1.15;letter-spacing:-.025em}
.curtable__head > div > p:last-child{margin-top:6px;color:var(--muted);font-size:12.5px}
.curfilters{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.curfilters label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;min-width:112px}
.curfilters input,.curfilters select,.curcutform input,.curcutform select,.curcutform textarea{
  width:100%;min-height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:9px;
  background:#fff;color:var(--ink);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;
  box-shadow:inset 0 1px 2px rgba(36,29,24,.035);
}
.curfilters [data-cur-filter-error][role="alert"],
.curfilters [data-cur-analytics-filter-error][role="alert"]{
  width:100%;color:var(--cur-red);font-size:11px;font-weight:650;text-align:right;
}
.curfresh{
  padding:9px 20px;border-bottom:1px solid var(--line);background:#FCFBF8;
  color:var(--muted);font-size:10.8px;overflow-wrap:anywhere;
}
.curfresh b{color:var(--ink-soft)}
.curtable__scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.curtbl{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed;background:transparent}
.curtbl th{
  padding:10px 13px;border-bottom:1px solid var(--line);background:#F8F7F4;
  color:var(--muted);font-size:10px;font-weight:710;letter-spacing:.06em;text-align:left;text-transform:uppercase;
}
.curtbl td{padding:11px 13px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:middle;overflow-wrap:anywhere}
/* Edge breathing room: the first and last columns keep the same inset as
   the card header (20px+), so row actions never hug the card edge. */
.curtbl th:first-child,.curtbl td:first-child{padding-left:20px}
.curtbl th:last-child,.curtbl td:last-child{padding-right:22px}
.curtbl tbody tr{transition:background .16s ease}
.curtbl tbody tr:last-child td{border-bottom:0}
.curtbl tbody tr:hover{background:#FFFCF8}
.curtbl td > b,.curtbl td > small{display:block;overflow-wrap:anywhere}
.curtbl td > small{margin-top:3px;color:var(--muted);font-size:10.5px;line-height:1.35}
.curtbl--members th:last-child,.curtbl--members td:last-child,
.curtbl--spend th:last-child,.curtbl--spend td:last-child{width:76px;text-align:right}
.curtbl--usage th:last-child,.curtbl--usage td:last-child{width:132px;text-align:right;white-space:nowrap}
.curtbl--people th:last-child,.curtbl--people td:last-child{width:140px;text-align:right;white-space:nowrap}
.curtbl--people td:last-child .btn{margin-left:6px}
.curtbl--people th:nth-child(1){width:28%}
.curtbl--usage th:nth-child(1){width:32%}.curtbl--usage th:nth-child(2){width:13%}.curtbl--usage th:nth-child(3){width:26%}.curtbl--usage th:nth-child(4){width:13%}
.curtbl--spend th:nth-child(1){width:32%}.curtbl--spend th:nth-child(2){width:13%}
.curtbl--spend th:nth-child(3){width:22%}.curtbl--spend th:nth-child(4){width:14%}.curtbl--spend th:nth-child(5){width:14%}
.curwrap{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.curstate{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap}
.curstate--active{color:var(--cur-green);background:var(--cur-green-soft);box-shadow:inset 0 0 0 1px rgba(38,120,92,.13)}
.curstate--removed{color:var(--muted);background:#F1EFEB;box-shadow:inset 0 0 0 1px rgba(104,98,90,.1)}
.curstate--unknown{color:var(--muted);background:#F6F4F1;box-shadow:inset 0 0 0 1px rgba(104,98,90,.16)}
.curlimit{
  display:inline-flex;align-items:center;margin:1px 4px 1px 0;padding:2px 8px;border-radius:999px;
  background:var(--cur-amber-soft);color:var(--cur-amber);font-size:10.5px;font-weight:700;white-space:nowrap;
}
.curpager{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);background:#FCFBF8}
.curpager p{color:var(--muted);font-size:11px}.curpager p b{color:var(--ink-soft)}
.curpager > div{display:flex;gap:7px}

/* ---------- analytics ---------- */
.curanalytics{display:flex;flex-direction:column;gap:14px;min-width:0}
.curanalytics__intro{
  position:relative;overflow:hidden;padding:20px 21px;display:grid;
  grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr);align-items:end;gap:24px;
  border-radius:21px;background:
    radial-gradient(circle at 8% 0%,rgba(255,102,0,.1),transparent 35%),
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,251,246,.9));
  animation:cur-rise .42s var(--e-out) both;
}
.curanalytics__intro h2{font-size:23px;line-height:1.12;letter-spacing:-.03em}
.curanalytics__intro > div > p:last-child{margin-top:7px;color:var(--muted);font-size:12.5px}
.curanalytics > .curtable{animation:cur-rise .42s var(--e-out) both}
.curanalytics > .curtable:nth-of-type(2){animation-delay:.05s}
.curanalytics > .curtable:nth-of-type(3){animation-delay:.1s}

/* ---------- reconciliation ---------- */
.currecon{display:flex;flex-direction:column;gap:14px}
.currecon__summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.currecon__stat{padding:15px 16px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.currecon__stat span{color:var(--muted);font-size:11px;font-weight:650}
.currecon__stat b{font-size:23px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---------- empty / skeleton ---------- */
.curempty{padding:42px 24px;text-align:center;border-radius:21px;display:flex;flex-direction:column;align-items:center}
.curempty > svg{color:var(--brand-action)}
.curempty h2,.curempty h3{margin-top:12px;font-size:20px;letter-spacing:-.025em}
.curempty p{margin-top:6px;max-width:560px;color:var(--muted);font-size:12.5px}
.curempty .btn{margin-top:17px}
.curempty--inline{border:0;border-radius:0;background:#FCFBF8;padding:30px 24px}
.curempty--inline h3{font-size:15px}
.curskeleton{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:hidden}
.curskeleton span{height:230px;border:1px solid var(--line);border-radius:21px;background:linear-gradient(105deg,#F4F2ED 35%,#FFF 47%,#F4F2ED 60%);background-size:220% 100%;animation:cur-shimmer 1.4s ease-in-out infinite}
.curskeleton span:last-child{grid-column:1/-1;height:118px}
@keyframes cur-shimmer{to{background-position-x:-220%}}

/* ---------- round-2: presets, feed, mix bars, adoption, profile ---------- */
.curstat__of{font-size:.52em;font-weight:640;color:var(--muted);letter-spacing:-.01em}
.curtable__tools{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0}
.curpresets{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.curquiet{padding:10px 20px;border-top:1px solid var(--line);background:#FCFBF8;color:var(--muted);font-size:11.5px}
.curfeed{display:flex;flex-direction:column}
.curfeed__row{
  display:grid;grid-template-columns:58px minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,.9fr);
  gap:12px;align-items:center;padding:9px 20px;border-bottom:1px solid var(--line);font-size:12.3px;
}
.curfeed__row:last-child{border-bottom:0}
.curfeed__row:hover{background:#FFFCF8}
.curfeed__row .curid b{font-size:12.3px}
.curfeed__date{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.curfeed__model{color:var(--ink-soft);font-size:11.5px}
.curfeed__meta{color:var(--ink-soft);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.curfeed__kind{color:var(--muted);font-size:11px;text-align:right;white-space:nowrap}
.curmix{display:flex;flex-direction:column;gap:7px;min-width:0}
.curmix__bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:#F1EFEA;min-width:70px}
.curmix__bar i{display:block;height:100%}
.curmix__legend{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:10.5px;font-weight:620}
.curmix__legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px}
.curmix__legend b{color:var(--ink);font-variant-numeric:tabular-nums}
.curtbl--outcomes th:nth-child(1){width:28%}
.curtbl--outcomes th:last-child,.curtbl--outcomes td:last-child{width:104px;text-align:right}
.curtbl--members th:nth-child(1){width:30%}
.curtrend{display:block}
.curtrend--up{color:var(--cur-green);font-weight:700}
.curtrend--down{color:var(--cur-amber);font-weight:700}
.curadopt{padding:14px 20px 8px}
.curadopt__k{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;margin-bottom:8px}
.curadopt__strip,.curspark{display:flex;align-items:flex-end;gap:2px;height:64px}
.curadopt__strip i,.curspark i{flex:1 1 0;min-width:2px;border-radius:3px 3px 0 0;background:#C2410C;opacity:.72}
.curadopt__strip i:hover,.curspark i:hover{opacity:1}
.curspark{height:82px}
.curdialog--profile{width:min(680px,calc(100vw - 28px));padding-bottom:18px}
.curprofile__meta{margin-top:5px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.curprofile__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:15px 18px 0}
.curprofile__stat{padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:#fff;display:flex;flex-direction:column;gap:4px}
.curprofile__stat small{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.045em;text-transform:uppercase}
.curprofile__stat b{font-size:16px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.curprofile__section{margin:15px 18px 0}
.curprofile__k{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;margin-bottom:8px}
.curmodels--dialog .curmodel{padding:9px 0;grid-template-columns:minmax(130px,1fr) minmax(0,1.2fr) auto}


/* ---------- dialogs ---------- */
.curdialog{
  width:min(760px,calc(100vw - 28px));max-height:min(88dvh,900px);padding:0;overflow:auto;
  border:1px solid var(--line-strong);border-radius:23px;background:#FFFDF9;color:var(--ink);
  box-shadow:0 28px 90px -30px rgba(37,28,20,.48);
}
.curdialog::backdrop{background:rgba(35,29,24,.34);backdrop-filter:blur(5px)}
.curdialog__head{position:sticky;top:0;z-index:2;padding:17px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);background:rgba(255,253,249,.94);backdrop-filter:blur(14px)}
.curdialog__head h2{font-size:21px;line-height:1.15;letter-spacing:-.03em}
.curdialog__lede{padding:17px 18px 0;color:var(--ink-soft);font-size:13px}
.curinspect{padding:17px 18px;display:grid;gap:9px}
.curinspect > div{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.curinspect dt{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.curinspect dd{margin-top:4px;max-height:180px;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.curcutform{padding:17px 18px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.curcutform > label{display:flex;flex-direction:column;gap:5px;color:var(--ink-soft);font-size:11px;font-weight:650}
.curcutform small{color:var(--muted);font-size:10px;font-weight:500;line-height:1.4}
.curcutform textarea{padding:9px 10px;resize:vertical;line-height:1.45}
.curcutform__wide{grid-column:1/-1}
.curcheck{flex-direction:row!important;align-items:flex-start;gap:9px!important;padding:11px;border:1px solid var(--line);border-radius:11px;background:#fff}
.curcheck input{width:17px;height:17px;min-height:0;padding:0;flex:0 0 auto}
.curdialog__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:3px}
.curconfirm{padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center}
.curconfirm__icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:var(--cur-green-soft);color:var(--cur-green)}
.curconfirm h3{margin-top:14px;font-size:22px;letter-spacing:-.03em}
.curconfirm p{margin-top:8px;max-width:590px;color:var(--ink-soft);font-size:12.5px;overflow-wrap:anywhere}
.curconfirm .curdialog__actions{margin-top:16px}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .curhero{grid-template-columns:minmax(0,1fr);gap:18px}
  .curhero__health{max-width:620px}
  .curstats,.curstats--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .curtable__head{align-items:flex-start;flex-direction:column}
  .curfilters{width:100%;justify-content:flex-start}
  .curanalytics__intro{grid-template-columns:minmax(0,1fr);gap:17px}
  .currank{grid-template-columns:34px minmax(150px,1fr) minmax(0,1fr) auto 40px;gap:12px}
}
@media (max-width:880px){
  .cursor-scope{min-height:44px}
  .v-cursor{gap:12px}
  .curhero{padding:20px;border-radius:21px}
  .curhero__logo{width:58px;height:58px;flex-basis:58px;border-radius:17px}
  .curhero__logo img{width:36px;height:36px}
  .curtabs{width:100%}.curtabs button{min-height:44px;flex:1 0 auto}
  .curstats,.curstats--3{gap:11px}
  .curstat{padding:16px;min-height:0;border-radius:18px}
  .curchartcard{padding:17px 15px 12px}
  .curechart{height:210px}
  .curechart--lg{height:250px}
  .curechart--landscape{height:320px}
  .currank{grid-template-columns:34px minmax(0,1fr) auto 40px;gap:10px;padding:11px 14px}
  .currank__bar{display:none}
  .curmodel{grid-template-columns:minmax(0,1fr) auto;padding:11px 14px}
  .curmodel .currank__bar{display:none}
  .curtable__scroll{overflow:visible}
  .curtbl,.curtbl tbody,.curtbl tr,.curtbl td{display:block;width:100%}
  .curtbl{min-width:0}
  .curtbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .curtbl tbody{padding:10px;display:grid;gap:9px}
  .curtbl tbody tr{
    margin:0;padding:12px 13px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px;
    border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:none;
  }
  .curtbl tbody td{padding:0;border:0;font-size:12px;text-align:left!important}
  .curtbl tbody td::before{
    display:block;margin-bottom:3px;color:var(--muted);font-size:9px;font-weight:720;letter-spacing:.065em;text-transform:uppercase;
  }
  /* Every cell carries its real column name via data-label; the
     reconciliation table has no data-labels, so it names its columns here. */
  .curtbl tbody td::before{content:attr(data-label)}
  .curtbl--reconciliation tbody td:nth-child(1)::before{content:"Case"}
  .curtbl--reconciliation tbody td:nth-child(2)::before{content:"Classification"}
  .curtbl--reconciliation tbody td:nth-child(3)::before{content:"Email evidence"}
  .curtbl--reconciliation tbody td:nth-child(4)::before{content:"Status"}
  .curtbl--members tbody td:last-child,.curtbl--usage tbody td:last-child,.curtbl--spend tbody td:last-child,.curtbl--people tbody td:last-child,.curtbl--outcomes tbody td:last-child{display:flex;align-items:flex-end;justify-content:flex-end}
  .curtbl--members tbody td:last-child::before,.curtbl--usage tbody td:last-child::before,.curtbl--spend tbody td:last-child::before,.curtbl--people tbody td:last-child::before,.curtbl--outcomes tbody td:last-child::before{content:none}
  .curpager{padding:12px 14px}
  .curfilters input,.curfilters select{min-height:44px}
  .currecon__summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .curdialog__head{padding:15px}
}
@media (max-width:620px){
  .cursor-scope{width:44px;padding:0;justify-content:center}.cursor-scope span{display:none}
  .curhero__brand{align-items:flex-start;gap:13px}.curhero h1{font-size:28px}
  .curhero__health{grid-template-columns:auto minmax(0,1fr)}
  .curhero__health .btn{grid-column:1/-1;width:100%}
  .curstats,.curstats--3{grid-template-columns:minmax(0,1fr)}
  .curstat__num{font-size:30px}
  .curchartcard__head{flex-direction:column;align-items:flex-start;gap:8px}
  .curchartcard__total{text-align:left}
  .curtable__head{padding:17px 14px}
  .curfilters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .curfilters label{min-width:0}
  .curfilters .btn{grid-column:1/-1;width:100%}
  .currank__val small{white-space:normal}
  .curtbl tbody tr{grid-template-columns:minmax(0,1fr)}
  .curtbl--members tbody td:last-child,.curtbl--usage tbody td:last-child,.curtbl--spend tbody td:last-child{justify-content:flex-start}
  .curpager{align-items:flex-start;flex-direction:column}.curpager > div{width:100%}.curpager .btn{flex:1 1 0}
  .curcutform{grid-template-columns:minmax(0,1fr)}.curcutform__wide{grid-column:1}
  .curdialog__actions{flex-direction:column-reverse}.curdialog__actions .btn{width:100%}
  .curskeleton{grid-template-columns:minmax(0,1fr)}.curskeleton span,.curskeleton span:last-child{grid-column:1;height:150px}
}
@media (prefers-reduced-motion:reduce){
  .curpulse::after,.curstat,.curchartcard,.curanalytics__intro,
  .curanalytics > .curtable,.curskeleton span,.currankskel span{animation:none!important}
  .curstat{transition:none}
  .curstat:hover{transform:none}
}

/* Round 3 additions ------------------------------------------------------- */
/* An unreported numeric cell is a quiet em dash, explained on hover. */
.curdash{color:var(--muted);font-weight:600;cursor:help}
/* Model identity dot: the same warm hue everywhere a model is named. */
.curdot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
/* Screenshot-safe number entrance: the true value is always in the DOM;
   only opacity and a small rise animate. */
@media (prefers-reduced-motion:no-preference){
  .currise{animation:curRise .55s cubic-bezier(.2,.7,.3,1) both}
  @keyframes curRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
}
.curprofile__note{display:block;margin-top:7px;color:var(--muted);font-size:10.5px;line-height:1.45}


/* ECharts containers (sani theme; runtime is self-hosted) ----------------- */
.curechart{width:100%;height:240px;min-width:0}
.curechart--lg{height:300px}
.curechart--landscape{height:440px;padding:0 10px}
.curechart--spark{height:86px}
.curechart .curfresh{padding:14px 0}
.curspark__last{margin-top:6px;color:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
/* Narrow-viewport chart heights must outrank the base sizes above. */
@media (max-width:640px){
  .curechart--landscape{height:320px;padding:0 2px}
}

/* ========================================================================
   AURORA, SANI EDITION — Orion layout language, SANI warmth, light glass.
   Scoped to the Cursor workspace (.v-cursor); the rest of S.A.N.I is
   untouched. Ink is for TEXT only: no dark tiles, pills or tooltips.
   Accents are flat — never gradients.
   ======================================================================== */
.v-cursor{
  --ink:#2B2118;
  --muted:#6F6455;
  position:relative;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* Ground: warm cream with three ambient washes so the glass reads. The
   wash paints the ENTIRE content region — it cancels the .view padding on
   every side, so no rectangle boundary or seam is ever visible and the
   glass cards float on the page itself. */
.v-cursor::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-18px calc(var(--gutter) * -1) -30px;
  background:
    radial-gradient(560px 420px at 12% 4%, rgba(234,88,12,.10), transparent 68%),
    radial-gradient(640px 460px at 88% 18%, rgba(245,158,11,.10), transparent 70%),
    radial-gradient(700px 520px at 45% 96%, rgba(13,148,136,.08), transparent 72%),
    #FBF7F2;
}
/* Glass cards, with a solid warm fallback. */
.v-cursor .card{
  background:#FFFDFA;
  border:1px solid rgba(255,255,255,.75);
  border-radius:22px;
  box-shadow:0 1px 2px rgba(120,72,28,.05),0 22px 48px -28px rgba(120,72,28,.28);
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .v-cursor .card{
    background:rgba(255,255,255,.6);
    backdrop-filter:blur(18px) saturate(1.15);
    -webkit-backdrop-filter:blur(18px) saturate(1.15);
  }
}
/* Type: Poppins for titles and hero numbers, DM Sans everywhere else. */
.v-cursor .curhero h1,
.v-cursor .curtable h2,.v-cursor .curchartcard__head h2,
.v-cursor .curpanehead h2,
.v-cursor .curstat__num,.v-cursor .curtile__num,
.v-cursor .curchartcard__total b,.v-cursor .curdonut__centre b{
  font-family:'Poppins','Avenir Next',system-ui,sans-serif;font-weight:600;
}
.v-cursor .curtable h2,.v-cursor .curchartcard__head h2{letter-spacing:-.015em}
.v-cursor .eyebrow{color:#A39684;font-size:11px;letter-spacing:.13em}
/* Flat tinted avatars, deterministic per member — never gradients. */
.v-cursor .curavatar{background:#FBE8DD;color:#C2410C}
.v-cursor .curavatar--t0{background:#FBE8DD;color:#C2410C}
.v-cursor .curavatar--t1{background:#D9F2EE;color:#0D7A6E}
.v-cursor .curavatar--t2{background:#FDF1E0;color:#B45309}
/* Tab chips: active is a glass white chip with a soft shadow — no ink pill. */
.v-cursor .curtabs{background:rgba(255,255,255,.45);border-color:rgba(255,255,255,.7)}
.v-cursor .curtabs button[aria-selected="true"]{
  color:#C2410C;background:rgba(255,255,255,.95);
  box-shadow:0 8px 20px -10px rgba(120,72,28,.4);
}
.v-cursor .curtabs button:hover{color:#C2410C;background:rgba(255,255,255,.8)}
/* Primary actions: solid flat ember. */
.v-cursor .btn--primary,
.v-cursor .curhero__health [data-cur-refresh]{
  background:#EA580C;border-color:#EA580C;color:#fff;
}
.v-cursor .curhero__health [data-cur-refresh]:hover,
.v-cursor .btn--primary:hover{background:#C2410C;border-color:#C2410C}
.v-cursor .curfoot__exact{color:#C2410C}
.v-cursor .curfoot__exact:hover{color:#9A3412}
.v-cursor .btn--glass{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.8)}
.v-cursor .btn--link{background:transparent;border:0;color:#C2410C;font-weight:650;padding:0 8px}
.v-cursor .btn--link:hover{text-decoration:underline}
/* Soft flat chips: statuses, deltas, limits. */
.v-cursor .curstate--active{color:#177245;background:#E8F9F1;box-shadow:inset 0 0 0 1px rgba(23,114,69,.14)}
.v-cursor .curtrend{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;margin-top:2px;font-weight:700}
.v-cursor .curtrend--up{color:#177245;background:#E8F9F1}
.v-cursor .curtrend--down{color:#B3264A;background:#FDEBF1}
.v-cursor .curlimit{background:#FDF1E0;color:#B45309}
/* Timeline presets: glass pill container, solid ember active segment. */
.v-cursor .curpresets{
  display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.78);
  box-shadow:0 8px 20px -14px rgba(120,72,28,.3);
}
.v-cursor .curpresets .btn{border:0;background:transparent;border-radius:999px;box-shadow:none;min-height:32px}
.v-cursor .curpresets .btn.is-active{background:#EA580C;color:#fff}
.v-cursor .curpresets .btn:hover{background:rgba(234,88,12,.12);color:#C2410C}
.v-cursor .curpresets .btn.is-active:hover{background:#C2410C;color:#fff}
/* Seat utilization meter (teal, flat). */
.curmeter{display:block;height:7px;border-radius:999px;background:#EFE7DB;overflow:hidden;margin:2px 0 1px}
.curmeter i{display:block;height:100%;border-radius:999px;background:#EA580C}
.curmeter--teal i{background:#0D9488}
/* Overview 2-column row: Token flow + Model share. */
.curovgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;min-width:0}
.curovgrid--solo{grid-template-columns:1fr}
.curovgrid > *{min-width:0}
/* Model share donut. */
.curdonut{display:flex;flex-direction:column;gap:4px;padding:6px 18px 8px}
.curdonut__stage{position:relative;margin:0 auto;width:100%;max-width:270px}
.curechart--donut{height:230px}
.curdonut__centre{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;text-align:center;
}
.curdonut__centre b{display:block;font-size:27px;letter-spacing:-.03em;color:var(--ink)}
.curdonut__centre small{margin-top:2px;color:#A39684;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.curdonut__legend{list-style:none;margin:2px 0 0;padding:0}
.curdonut__legend li{
  display:flex;align-items:center;gap:9px;padding:7px 2px;
  border-bottom:1px dashed var(--line);font-size:12.5px;
}
.curdonut__legend li:last-child{border-bottom:0}
.curdonut__legend i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.curdonut__legend b{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;letter-spacing:-.01em}
.curdonut__legend span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.curdonut__legend em{font-style:normal;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
/* Computed insight strip: soft ember, only when the data supports it. */
.curinsight{
  display:flex;align-items:flex-start;gap:8px;margin:0 18px 16px;padding:10px 13px;
  border-radius:14px;background:#FBE8DD;color:#7C3212;font-size:12.5px;line-height:1.5;
}
/* Usage pane header strip. */
.curpanehead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding:18px 20px;flex-wrap:wrap;
}
.curpanehead h2{font-size:22px;letter-spacing:-.02em;margin-top:4px}
.curpanehead__tools{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
/* Usage 2-column: chart + side tiles. */
.curusage__grid{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;min-width:0}
.curusage__grid > *{min-width:0}
.curusage__side{display:flex;flex-direction:column;gap:14px;min-width:0}
.curtile{padding:17px 19px 15px;display:flex;flex-direction:column;gap:8px}
.curtile__k{color:#A39684;font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.curtile__num{font-size:34px;line-height:1.02;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.curtile__sub{color:var(--muted);font-size:11.5px}
.curtile__rows{list-style:none;margin:4px 0 0;padding:0}
.curtile__rows li{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px dashed var(--line);color:var(--muted);font-size:12px;
}
.curtile__rows li:last-child{border-bottom:0}
.curtile__rows b{color:var(--ink);font-size:13.5px;font-variant-numeric:tabular-nums;font-weight:700}
.curtile__rows b small{color:var(--muted);font-weight:600}
.curtrendrows{list-style:none;margin:0;padding:0}
.curtrendrows li{
  display:flex;align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px dashed var(--line);font-size:12.5px;
}
.curtrendrows li:last-child{border-bottom:0}
.curtrendrows b{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;letter-spacing:-.01em}
.curtrendrows .curtrend{margin-top:0}
.currankskel--tile{padding:4px 0}
.currankskel--tile span{height:26px}
/* Member trend sparkline: one shared height and baseline for every row. */
.curspark2{width:96px;height:28px;display:block}
/* Flat ember proportion bars on a quiet warm track — no gradients. */
.v-cursor .currank__bar{background:#F4EDE3}
.v-cursor .currank__bar i{background:#EA580C}
.v-cursor .curmodel--other .currank__bar i{background:#D8D2C8}
.v-cursor .currank__bar--rate i{background:#0D9488}
/* Ring gauge (single-share headline, % in the centre). */
.curring{width:66px;height:66px;flex:0 0 auto}
.curring__pct{font:700 13.5px 'DM Sans',system-ui,sans-serif;fill:#2B2118;letter-spacing:-.02em}
.curstat__ringrow{display:flex;align-items:center;gap:14px;min-width:0}
.curstat__ringnum{display:block;font-size:clamp(22px,1.9vw,28px);line-height:1.05;letter-spacing:-.04em;font-weight:745;font-variant-numeric:tabular-nums}
.curstat--ring .curstat__sub{margin-top:4px}
/* Idle-member disclosure: the collapse line opens into a verifiable list. */
.curidle{border-top:1px solid var(--line);background:#FCFBF8}
.curidle summary{
  padding:10px 20px;color:var(--muted);font-size:11.5px;font-weight:640;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:7px;
}
.curidle summary::before{content:"";width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .16s ease}
.curidle[open] summary::before{transform:rotate(90deg)}
.curidle summary::-webkit-details-marker{display:none}
.curidle summary:hover{color:var(--ink-soft)}
.curidle__list{
  list-style:none;margin:0;padding:4px 20px 14px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:7px 18px;
}
.curidle__list li{display:flex;flex-direction:column;min-width:0}
.curidle__list b{color:var(--ink-soft);font-size:12px;font-weight:620;overflow-wrap:anywhere}
.curidle__list span{color:var(--muted);font-size:10.5px;overflow-wrap:anywhere}
/* Quiet role chip. */
.curchip{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.7);
  color:var(--muted);font-size:11px;font-weight:640;white-space:nowrap;
}
/* Magnitude bar under a week-over-week delta chip. */
.curmag{display:block;width:56px;height:4px;margin:6px 0 2px auto;border-radius:999px;background:#F4EDE3;overflow:hidden}
.curmag i{display:block;height:100%;border-radius:999px;margin-left:auto}
.curmag--up i{background:#177245}
.curmag--down i{background:#B3264A}
/* Rose share meter (on-demand share of cycle value). */
.curmeter--rose i{background:#B3264A}
@media (max-width:1080px){
  .curovgrid,.curusage__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .curpanehead{align-items:flex-start;flex-direction:column}
  .curdonut{padding:4px 12px 8px}
  .curtbl--usage td[data-label="Trend"] .curspark2{width:120px}
}

.curtbl--usage td:last-child .btn{vertical-align:middle}
.curtbl--usage td:last-child .btn--icon{margin-left:4px}