:root{
    --rail-width:4.25rem;
    /* Issue #196: where the rail starts, the bottom edge of the header as the viewport sees it. The
       client script keeps it current on scroll and resize; this is the header's own minimum height plus
       its border, so the first paint already puts the rail below the header. */
    --rail-top:69px;
    /* ---- surfaces (sign-in page's own values) -------------------------------------------- */
    --canvas:#06111F;    /* the page itself */
    --bg-deep:#071625;   /* deepest inset: transcript/code blocks, provenance strip */
    --bg:#0B1D30;        /* raised: header, cards, footer band */
    --bg-2:#0E243A;      /* second surface: tiles, table header band */
    --bg-3:#15314C;      /* neutral pill fill, bar track (ink-2 on it: 6.32:1) */
    /* ---- text ---------------------------------------------------------------------------- */
    --ink:#F5F8FC;       /* 17.80:1 on canvas, 15.99:1 on --bg */
    --ink-2:#A5B4C7;     /*  8.99:1 on canvas,  8.07:1 on --bg,  7.47:1 on --bg-2 */
    --ink-3:#7A8BA0;     /*  5.44:1 on canvas,  4.89:1 on --bg,  4.53:1 on --bg-2 -- still AA */
    /* ---- accent -------------------------------------------------------------------------- */
    --blue:#168BFF;      /* brand blue: borders/bars/dots/icon strokes only (5.01:1 on --bg) */
    --cyan:#20D6EA;      /* second accent + focus ring (9.63:1 on --bg) */
    --accent:#4FA3FF;    /* accent as TEXT: links, active nav (7.24:1 canvas, 6.50:1 --bg) */
    --accent-soft:rgba(22,139,255,.14);  /* --accent on it: 5.40:1 */
    --btn-a:#0D5FBF; --btn-b:#0A4894;    /* primary button gradient; #fff on it 6.17:1 / 8.87:1 */
    /* ---- lines: three weights, because a hairline and a control boundary are not the same -- */
    --line:rgba(100,180,255,.20);        /* hairlines, card/table separation */
    --line-2:rgba(100,180,255,.34);      /* dividers, pill/chip edges */
    --line-strong:rgba(100,180,255,.55); /* interactive boundaries -- 3.27:1 on --bg, clears 3:1 */
    --zebra:rgba(100,180,255,.045);      /* table row banding */
    --hover:rgba(100,180,255,.09);       /* row/nav hover */
    /* ---- state ----------------------------------------------------------------------------
       Each *-soft is an alpha wash, so it composites over whichever surface it lands on rather
       than being a second flat hex that only looks right on one of them. Ratios quoted against
       the LIGHTEST surface it can sit on (--bg-2), i.e. the worst case. */
    --ok:#3DD68C;        --ok-soft:rgba(61,214,140,.13);   /* 6.43:1 */
    --warn:#FFB84D;      --warn-soft:rgba(255,184,77,.13); /* 7.09:1 */
    --stop:#FF5A65;      --stop-soft:rgba(255,90,101,.10); /* 4.70:1 */
    /* Provenance, and nothing else. A fourth family on purpose (ADR-0011 D7): never --warn/--stop,
       so the banner cannot be read as a health signal that might one day turn green, and never
       --ok/--blue either. Lavender is the only hue left that is not already spoken for. */
    --synthetic:#C4A6FF; --synthetic-soft:rgba(155,107,255,.16); /* 6.27:1 */
    /* ---- type ------------------------------------------------------------------------------ */
    --ui:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
    /* ---- type scale (#592) ------------------------------------------------------------------
       FIVE sizes, and every size in this stylesheet is one of them (display numbers, glyph sizes, em-relative sizes
       and the phone-width wordmark tagline excepted). A page's own styles use the same five; a sixth needs a reason.
         xs  .72rem  labels, cues, pills, table column heads, the strip's Details and link
         sm  .78rem  meta text: the header, the strips, secondary lines, small controls
         md  .86rem  body text in tables, empty states, buttons, dialogs
         lg  .94rem  section headings (h2)
         xl  1.4rem  the page title (h1) */
    --fs-xs:.72rem; --fs-sm:.78rem; --fs-md:.86rem; --fs-lg:.94rem; --fs-xl:1.4rem;
    /* ---- scale ----------------------------------------------------------------------------- */
    --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
    --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem;
    --radius-sm:6px; --radius-md:12px; --radius-lg:18px;
    /* Depth on a dark surface is a long, soft, nearly-black drop plus a 1px top highlight -- a
       light theme's grey box-shadow just muddies the card into the page here. */
    --shadow-card:0 10px 26px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.035);
    --shadow-modal:0 26px 60px -22px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.045);
  }
  /* No prefers-color-scheme block any more. There used to be a light :root and a dark override;
     the console is one theme now, and a media query that silently produced a second palette is
     precisely what let the sign-in page and the console disagree. */
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;background:var(--canvas)}
  body{
    margin:0;min-height:100vh;background:var(--canvas);color:var(--ink);
    font:16px/1.6 var(--ui);-webkit-font-smoothing:antialiased;
    /* The sign-in page's atmosphere at about half strength: enough that signing in does not feel
       like arriving at a different product, quiet enough that a dense table on top of it stays a
       dense table. Fixed, so it does not slide under scrolling content. */
    background-image:
      radial-gradient(1100px 620px at 82% -8%, rgba(22,139,255,.10), transparent 60%),
      radial-gradient(760px 520px at 2% 96%, rgba(32,214,234,.05), transparent 62%);
    background-attachment:fixed;
  }
  /* Signed-out/auth-gate state: the shell chrome (header, provenance strip, nav rail, footer) has
     no job on a page whose only content is "sign in" -- toggled by showGate()/hideGate() in the
     client script below, never by a second HTML document. */
  body.gate-active .topbar, body.gate-active .banner-strip, body.gate-active .banner-synthetic, body.gate-active .shell{display:none}
  /* One ring, everywhere, on the keyboard path only. Cyan rather than blue: it is the one accent
     that clears 3:1 against every surface in this file (9.63:1 on --bg). */
  a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,
  input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

  /* ---------- header ---------- */
  /* Issue #196: the header is the first row and spans the whole window; the rail starts below it
     (--rail-top) instead of running the full height and cutting the header off. */
  .topbar{background:var(--bg);border-bottom:1px solid var(--line)}
  /* Full-bleed bar, 78rem of content inside it. A max-width on the bar itself (what this was)
     leaves the dark header floating in the middle of a dark page with its edges unexplained. */
  /* Vertical padding (#350): .header-actions wraps now, and without it the first wrapped row sat flush against the
     top of the page. min-height is border-box, so a one-row header is still 68px and centred exactly as before. */
  .topbar-inner{max-width:none;margin:0;padding:var(--space-3) var(--space-5);min-height:68px;display:flex;
    flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;justify-content:space-between}
  .brand{display:flex;align-items:center;gap:.6rem;color:inherit;text-decoration:none}
  a.brand:hover{text-decoration:none}
  a.brand:hover .brand-word,a.brand:hover .brand-tagline{color:var(--accent)}
  /* Letter-spacing and weight are the sign-in wordmark's, so the same word does not change shape
     when you cross the login. */
  .brand-word{font-size:var(--fs-lg);font-weight:700;letter-spacing:.20em;color:var(--ink)}
  .brand-divider{width:1px;height:1.1rem;background:var(--line-strong);flex:0 0 auto}
  .brand-tagline{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;color:var(--ink-2);white-space:nowrap}
  .tenant-chip{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);border:1px solid var(--line-strong);border-radius:999px;padding:.1rem .55rem;margin-left:.6rem;white-space:nowrap;max-width:16rem;overflow:hidden;text-overflow:ellipsis}
  .tenant-chip[hidden]{display:none}
  /* #954: the top bar search. Its own flex basis (the header-right group takes what is left with a zero basis), wide enough to read
     a reference and a name, capped so the account controls keep their room. The list hangs under the box like the account menu's. */
  .gsearch{position:relative;flex:1 1 22rem;max-width:38rem;min-width:12rem}
  .gsearch[hidden]{display:none}
  .gsearch-open{display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;background:none;
    border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink-2);cursor:pointer}
  .gsearch-open:hover{color:var(--ink);background:var(--hover)}
  .gsearch-open .icon{width:1.1rem;height:1.1rem}
  .gsearch-box{position:relative;display:flex;align-items:center;width:100%}
  .gsearch-icon{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);display:inline-flex;color:var(--ink-3);pointer-events:none}
  .gsearch-icon .icon{width:1rem;height:1rem}
  .gsearch.busy .gsearch-icon{color:var(--cyan)}
  .gsearch-input{width:100%;height:2.4rem;padding:0 2.2rem 0 2.15rem;background:var(--bg-2);color:var(--ink);font:inherit;font-size:var(--fs-md);
    border:1px solid var(--line-strong);border-radius:var(--radius-sm)}
  .gsearch-input::placeholder{color:var(--ink-3)}
  .gsearch-input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 1px var(--cyan)}
  .gsearch-kbd{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);font:600 var(--fs-xs)/1 var(--mono);color:var(--ink-3);
    border:1px solid var(--line-2);border-radius:4px;padding:.15rem .35rem;pointer-events:none}
  .gsearch-input:focus ~ .gsearch-kbd{display:none}
  .gsearch-pop{position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:60;min-width:min(26rem,calc(100vw - 2rem));
    max-height:min(70vh,34rem);overflow-y:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
    padding:var(--space-2);box-shadow:0 8px 24px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:var(--space-2)}
  .gsearch-pop[hidden]{display:none}
  .gsearch-state{font-size:var(--fs-sm);color:var(--ink-2);padding:.3rem .5rem}
  .gsearch-state[hidden]{display:none}
  .gsearch-state.gsearch-error{color:var(--stop)}
  .gsearch-list{display:flex;flex-direction:column;gap:var(--space-2)}
  .gsearch-list:empty{display:none}
  .gsearch-group{display:flex;flex-direction:column;gap:.1rem}
  .gsearch-head{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 .5rem .15rem}
  .gsearch-option{display:flex;align-items:flex-start;gap:var(--space-2);padding:.4rem .5rem;border:1px solid transparent;
    border-radius:var(--radius-sm);color:var(--ink);text-decoration:none;min-width:0}
  .gsearch-option:hover,.gsearch-option.active{background:var(--hover);border-color:var(--line-2);text-decoration:none}
  .gsearch-option.active{box-shadow:inset 2px 0 0 var(--cyan)}
  .gsearch-kind{display:inline-flex;flex:0 0 auto;color:var(--accent);margin-top:.15rem}
  .gsearch-kind .icon{width:1rem;height:1rem}
  .gsearch-text{display:flex;flex-direction:column;min-width:0}
  .gsearch-label{font-size:var(--fs-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gsearch-sub{font-size:var(--fs-xs);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gsearch-option mark{background:rgba(32,214,234,.20);color:var(--ink);border-radius:2px;padding:0 1px}
  .gsearch-more .gsearch-label{font-weight:500;color:var(--accent)}
  .gsearch-pair{display:flex;align-items:stretch;gap:.1rem;min-width:0}
  .gsearch-pair>.gsearch-option:first-child{flex:1 1 auto}
  .gsearch-target{flex:0 0 auto;align-items:center}
  .gsearch-target .gsearch-label{font-size:var(--fs-xs);font-weight:500;color:var(--accent)}
  .gsearch-events{font-size:var(--fs-sm);padding:.35rem .5rem;border-top:1px solid var(--line)}
  .gsearch-events[hidden]{display:none}
  /* flex:1 1 0, not the default auto basis: the group's natural width (health chip + elevated pill + account
     chip) is what pushed it onto its own line under the logo, flush left, whenever it did not fit beside the
     logo at its full width. With a zero basis it always shares the logo's row, takes what is left, and lets
     .header-actions wrap inside it instead.
     #350: ONE row, vertically centred -- the health chip, the "Updated HH:MM:SS" text beside it, then the
     account chip. The row wraps rather than clips: a long "Refresh failing (...)" message drops to its own
     line at any width, so the red text is always whole. */
  .header-right{display:flex;align-items:center;justify-content:flex-end;min-width:0;max-width:100%;flex:1 1 0}
  .header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-2) var(--space-4);min-width:0;max-width:100%}
  .refresh{font-size:var(--fs-sm);color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
  .refresh.stale{color:var(--warn)}
  .refresh b{color:var(--ink-2);font-weight:600}
  #refresh-indicator{min-width:0;text-align:left;overflow-wrap:anywhere}
  /* The health chip's own pieces (SOC-9805; #542 moved the note and Check now into the chip's disclosure panel). */
  .health-age{font-size:var(--fs-sm)}
  .health-check{min-height:1.5rem;padding:.2rem .3rem}
  .link-btn[aria-disabled="true"]{color:var(--ink-3);cursor:progress;text-decoration:none}
  .auth-status{font-size:var(--fs-sm);color:var(--ink-3);text-align:right;display:flex;align-items:center;gap:var(--space-2)}
  /* Identity chip: renderAuthStatus() fills this from exactly the same inputs it always has
     (callerLabel/roleLabel/isOperator) -- only the surface it lands on changed. */
  .id-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:.22rem .5rem .22rem .22rem;
    border:1px solid var(--line);border-radius:999px;background:rgba(14,36,58,.7)}
  .id-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
    border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;
    font-size:var(--fs-xs);font-weight:700;flex:0 0 auto}
  .id-name{color:var(--ink);font-weight:600}
  .role-operator{background:var(--accent-soft);color:var(--accent);border-color:var(--line-2)}
  .role-viewer{background:var(--bg-3);color:var(--ink-2);border-color:var(--line)}
  .role-admin{background:var(--warn-soft);color:var(--warn);border-color:rgba(255,184,77,.30)}
  /* Role switcher (ADR-0016): shown only to an account that holds more than one role. The pill next to
     the name says which role is IN FORCE; the select changes it; the amber pill appears only while the
     person is acting above their default, with the time left on it. */
  .role-elevated{background:var(--warn-soft);color:var(--warn);border-color:rgba(255,184,77,.30)}
  .role-error{color:var(--stop);font-size:var(--fs-xs);text-align:left;margin:0}
  .role-error:empty{display:none}
  /* Account menu (#452, with #350's Sign out): ONE control for identity, role switch and Sign out. The
     <summary> is the identity chip plus a caret; the list holds Profile, Acting as (accounts with more than
     one role) and Sign out. The elevated pill is NOT inside it: elevation is a security state and stays
     visible with the menu closed. */
  .user-menu{position:relative;min-width:0;max-width:100%}
  .user-menu>summary{list-style:none;cursor:pointer}
  .user-menu>summary::-webkit-details-marker{display:none}
  .user-menu>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .user-menu>summary .id-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .user-menu-caret{width:.42rem;height:.42rem;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
    transform:rotate(45deg) translate(-1px,-1px);flex:0 0 auto;margin:0 .15rem 0 .1rem}
  .user-menu[open] .user-menu-caret{transform:rotate(-135deg) translate(-1px,-1px)}
  .user-menu-list{position:absolute;top:calc(100% + .35rem);right:0;z-index:60;min-width:15rem;max-width:min(22rem,calc(100vw - 2rem));
    background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:var(--space-2);
    box-shadow:0 8px 24px rgba(0,0,0,.45);text-align:left;display:flex;flex-direction:column;gap:var(--space-2)}
  .user-menu-section{display:flex;flex-direction:column;gap:.2rem;padding-bottom:var(--space-2);border-bottom:1px solid var(--line);margin:0}
  .user-menu-heading{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0}
  .user-menu-who{margin:0;font-size:var(--fs-sm);color:var(--ink-2);overflow-wrap:anywhere}
  .user-menu-who b{color:var(--ink);font-weight:600}
  .user-menu-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background:none;
    border:1px solid transparent;border-radius:var(--radius-sm);color:var(--ink);font:inherit;font-size:var(--fs-sm);
    padding:.4rem .5rem;text-align:left;cursor:pointer}
  .user-menu-item:hover,.user-menu-item:focus-visible{background:var(--hover);border-color:var(--line-2)}
  .user-menu-item:disabled{opacity:.6;cursor:progress}
  .user-menu-item[aria-checked="true"]{color:var(--accent);font-weight:600}
  .user-menu-item[aria-checked="true"]::after{content:"✓"}
  /* The rail leaves less room for the header controls at tablet widths: tighten the gap so more of the row
     fits before it wraps (it wraps at every width now, #350), rather than forcing a one-pixel document overflow. */
  @media (max-width:72rem){.header-actions{gap:var(--space-2) var(--space-3)}}
  /* PHONE WIDTHS. .topbar-inner wraps, but .header-actions did not, and its contents are a
     health pill, a full email address, a role pill, a sign-out link and an icon button -- about
     480px of unbreakable row (the sign-out link and the icon button are gone since #350; the wrap stays). At 390px
     that did not overflow the header, it overflowed the DOCUMENT: every page came out 477-543px wide in a 390px viewport, so the whole console
     scrolled sideways, the body's background gradient stopped at 390 and left a mismatched strip
     down the right of every screen, and Sign out and the About button sat off the edge. The fix is
     to let that row wrap and to let the one genuinely elastic thing in it -- the email -- shrink.
     Nothing here changes the wide layout, and nothing here hides a control. */
  @media (max-width:36rem){
    .topbar-inner{padding:var(--space-3) var(--space-4);gap:var(--space-2)}
    .brand{flex-wrap:wrap;min-width:0}
    .brand-tagline{font-size:.62rem;letter-spacing:.12em}
    .header-right{width:100%;flex:0 0 auto}
    .header-actions{gap:var(--space-2) var(--space-3);width:100%;min-width:0}
    .auth-status{flex:1 1 12rem;min-width:0;max-width:100%;text-align:left}
    .id-chip{min-width:0;max-width:100%}
    /* The list is anchored to the actions row, not the chip: with the elevated pill beside it the chip starts
       mid-row, and a list that hangs from the chip's left edge runs off the right of a 390px screen. */
    .header-actions{position:relative}
    .user-menu{flex:1 1 10rem;position:static}
    .user-menu>summary{display:flex}
    .user-menu-list{left:0;right:auto;min-width:0;width:min(20rem,calc(100vw - 2rem))}
    /* The email is the only part that can give: the avatar, the role pill and the chip's own
       padding are all fixed, so this is what absorbs a narrow screen. Ellipsised, never clipped. */
    .id-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .refresh{text-align:left}
    /* #954: the search is a magnifier button beside the brand; it expands into a full-width row under it. */
    .gsearch{flex:0 0 auto;min-width:0;max-width:none;margin-left:auto}
    .gsearch-open{display:inline-flex}
    .gsearch-box{display:none}
    .gsearch.expanded{flex:1 0 100%;margin-left:0}
    .gsearch.expanded .gsearch-open{display:none}
    .gsearch.expanded .gsearch-box{display:flex}
    .gsearch-kbd{display:none}
    .gsearch-pop{min-width:0}
  }

  /* ---------- provenance strip (SOC_DATA_MODE) ----------
     Still server-rendered from opts.dataModeBanner, still undismissable, still worded by
     data-mode.ts -- dashboard.controller.test.ts asserts all three. What changed is the tone: it
     was a full-width coloured stripe that read as an alarm about a fact that is merely true. It is
     now the quietest line on the page: deep inset surface, secondary text, one lavender dot for the
     colour family that means provenance. Honest, permanent, and not shouting. */
  .banner-synthetic{background:var(--bg-deep);border-bottom:1px solid var(--line);color:var(--ink-2);margin-left:var(--rail-width);
    font-size:var(--fs-sm);font-weight:400;letter-spacing:.01em}
  /* #592: ONE strip, not two rows. The provenance line and the automatic-dispatch line sit side by side in
     .banner-strip, each still its own status region with its own Details disclosure (nothing about either
     line's words, roles or disclosure changed). The two halves wrap onto two lines only where they cannot
     share one (below about 48rem of content width), with no media query: flex-basis does it. The hairline
     between them is a 1px shadow on each half's left and top edge, clipped by the strip where a half starts
     a line or sits on the first line, so side by side it is a divider and stacked it is the old rule. */
  .banner-strip{display:flex;flex-wrap:wrap;align-items:flex-start;margin-left:var(--rail-width);background:var(--bg-deep);
    border-bottom:1px solid var(--line);overflow:hidden}
  .banner-strip>.banner-synthetic{margin-left:0;border-bottom:0;min-width:0;flex:2 1 28rem;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
  .banner-strip>.banner-dispatch{flex:1 1 26rem}
  .banner-inner{max-width:none;margin:0;padding:.45rem var(--space-5);display:flex;align-items:center;gap:.55rem}
  .banner-dot{width:7px;height:7px;border-radius:50%;background:var(--synthetic);
    box-shadow:0 0 0 3px rgba(155,107,255,.15);flex:0 0 auto}
  /* The banner's own <details>, rendered by renderBanner() below. min-width:0 lets the <summary>
     text ellipsis-truncate on a narrow viewport instead of forcing the whole strip to wrap; the
     detail body drops onto its own line, still inside the same quiet strip rather than a popover,
     because this is a fact about the page, not a transient notification. */
  .banner-detail{min-width:0;flex:1 1 auto}
  .banner-detail>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:.5rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .banner-detail>summary::-webkit-details-marker{display:none}
  /* The provenance summary sentence, in its own element (renderBanner()). It has to be one: text-overflow
     does nothing on a flex container, and a bare text node in the summary's flex row is an anonymous flex
     item that cannot shrink below its whole sentence, so the summary's overflow:hidden cut it MID-WORD with
     no ellipsis and pushed the Details cue out of sight. As a real item with min-width:0 it is the one thing
     that gives way on a narrow screen: it ends in an ellipsis, and the Details cue stays on the line after
     it (the .banner-link beside the <details> is flex:0 0 auto and never moves). At the widths where the
     whole sentence fits this lays out exactly as the bare text did. */
  .banner-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .banner-more{flex:0 0 auto;color:var(--ink-3);font-size:var(--fs-xs);text-decoration:underline;
    text-underline-offset:2px}
  /* The one write control on the quiet strip: soc.ciso only (rendered, not just guarded server-
     side -- loadAutoDispatchBanner() leaves it [hidden] for everyone else), so it has to look like
     part of the sentence it sits at the end of, not a page action. Text-button, no border, no fill. */
  /* A 24px target (WCAG 2.5.8): the padding is what gives it height, the look is unchanged. */
  .banner-dispatch-toggle{flex:0 0 auto;margin-left:auto;background:none;border:0;padding:.2rem .4rem;
    min-height:1.5rem;font:inherit;font-size:var(--fs-sm);font-weight:650;color:var(--accent);
    text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .banner-dispatch-toggle:hover{color:var(--ink)}
  /* SOC-9970: "Edit limits" sits just before "Turn off", so only the first of the two takes the auto margin. */
  .banner-dispatch-limits+.banner-dispatch-toggle{margin-left:0}
  .banner-dispatch-raise{background:none;border:0;padding:0 0 0 .35rem;font:inherit;color:var(--accent);font-weight:650;
    text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .banner-dispatch-raise:hover{color:var(--ink)}
  .dl-form{display:grid;gap:.85rem;min-width:min(26rem,100%)}
  .dl-field{display:grid;gap:.3rem}
  .dl-field label{font-weight:650;color:var(--ink)}
  .dl-hint{color:var(--ink-2);font-size:var(--fs-xs);line-height:1.4}
  .dl-req{color:var(--ink-2);font-weight:400}
  /* SOC-10136 DEC-164: the "Managed by Digital Disruptors" lock chip on every platform-owned setting the tenant sees. */
  .managed-chip{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--fs-2xs,.72rem);font-weight:650;letter-spacing:.02em;
    color:var(--ink-2);border:1px dashed var(--line-2,currentColor);border-radius:999px;padding:.1em .55em;white-space:nowrap}
  .managed-chip::before{content:"";width:.6em;height:.7em;border:1.5px solid currentColor;border-radius:2px 2px 1px 1px;
    box-shadow:inset 0 -.32em 0 0 currentColor;flex:none}
  .dl-managed{margin:0;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
  .dl-status{margin:0;min-height:1.2em;font-size:var(--fs-sm);color:var(--ink-2)}
  .dl-status[data-tone="error"]{color:var(--danger,var(--warn))}
  .dl-status[data-tone="ok"]{color:var(--ok,var(--accent))}
  .dl-form [aria-invalid="true"]{border-color:var(--danger,var(--warn))}
  /* The dispatch headline is filled in by loadAutoDispatchBanner() as the text of the span inside the
     strip's details/summary (the same disclosure the provenance strip uses). It is a short line while
     dispatch is ON, but for OFF, UNKNOWN, a failed read and an older gateway it is the FULL sentence,
     which must WRAP, because the OFF reason is the point of the line (ADR-0015 D4): so, unlike the
     provenance strip's summary, this one never ellipsis-truncates. min-width:0 is what lets the span,
     a flex item, shrink and wrap. */
  /* QA 2026-10-30 (#990): break-word, not anywhere: "anywhere" also lets the browser size the column by single letters, so beside the
     Edit limits and Turn off buttons the line was squeezed to 86 px and broke mid-word ("Autom / atic"). The sentence keeps at least
     14rem; the buttons drop under it when the half is narrower than that (the row wraps), and a word longer than the line still breaks. */
  .banner-dispatch #auto-dispatch-banner{min-width:0;overflow-wrap:break-word}
  .banner-dispatch .banner-inner{flex-wrap:wrap}
  .banner-dispatch .banner-detail{flex:1 1 14rem}
  .banner-dispatch .banner-detail>summary{white-space:normal;overflow:visible;text-overflow:clip}
  .banner-detail[open]>summary{white-space:normal;text-overflow:clip}
  .banner-detail[open]>summary .banner-text{white-space:normal;overflow:visible;text-overflow:clip}
  .banner-detail[open]>summary .banner-more{display:none}
  .banner-detail-body{padding-top:.3rem;color:var(--ink-3);font-size:var(--fs-sm);line-height:1.5}
  /* The provenance strip's one action: where to check the freshness it summarises. An <a> beside the
     <details>, never inside the <summary> (interactive content in a summary fights the toggle), and
     never a <button> (dashboard.controller.test.ts keeps buttons off this strip). */
  .banner-link{flex:0 0 auto;display:inline-flex;align-items:center;min-height:1.5rem;color:var(--accent);
    font-size:var(--fs-xs);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
  .banner-link:hover{color:var(--ink)}

  /* ---------- frame ---------- */
  .shell{margin:0 0 0 var(--rail-width);padding:0 var(--space-5) var(--space-9)}
  /* The six destinations remain at the viewport's left edge at every width, including 400% zoom.
     Icons are decorative; each link's name is its visible label. At 72rem and wider the label is
     drawn beside the icon (below); narrower, it is drawn under the icon (SOC-10184, ds-styles.ts). */
  .rail{position:fixed;z-index:30;inset:var(--rail-top) auto 0 0;width:var(--rail-width);
    overflow-y:auto;overscroll-behavior:contain;background:var(--bg-deep);
    border-right:1px solid var(--line-strong);padding:.75rem .45rem}
  .rail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
  .rail-list>li{margin:0;padding:0}
  .rail a{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:2.75rem;
    border:1px solid transparent;border-left:3px solid transparent;border-radius:var(--radius-sm);
    color:var(--ink-2);text-decoration:none}
  .rail a .icon{font-size:18px}
  .rail a:hover,.rail a:focus-visible{background:var(--hover);color:var(--ink)}
  .rail a.active{background:var(--accent-soft);color:var(--accent);border-left-color:var(--blue)}
  .rail a:focus-visible{outline-offset:-2px}
  .rail a:hover::after,.rail a:focus-visible::after{content:attr(data-label);position:fixed;left:calc(var(--rail-width) + .35rem);
    z-index:40;top:calc(var(--tooltip-top, var(--rail-top)) + .25rem);background:var(--bg-2);color:var(--ink);border:1px solid var(--line-strong);
    border-radius:var(--radius-sm);padding:.45rem .65rem;white-space:nowrap;box-shadow:var(--shadow-card);pointer-events:none}
  /* Issue #122: no per-item offset. The tooltip is fixed (the rail scrolls, so an absolute one would be
     clipped by it), and its top is ONE variable on the rail, --tooltip-top, which the shell script sets to
     the top edge of the link being hovered or focused. The .25rem centres the tooltip on a 2.75rem link,
     the offset the per-item values used to encode. Before any hover it sits at the top of the rail. */
  .rail-label{display:none}
  /* Issue #122: wide screens show the label beside the icon, so nothing needs a hover to be found. The
     rail widens to fit the longest label and the hover/focus tooltip, now redundant, is not drawn. */
  @media (min-width:72rem){:root{--rail-width:11rem}
    .rail a{justify-content:flex-start;gap:.65rem;padding:0 .6rem}
    .rail-label{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-md)}
    .rail a:hover::after,.rail a:focus-visible::after{content:none}}
  /* #571 THE NAVIGATION AT THREE WIDTHS: labels beside the icons from 72rem (above), an icon rail between 36rem and 72rem,
     and on a phone (36rem and below) no rail at all: a menu button in the header opens the same <nav> as a slide-over with
     its labels. Closed, the slide-over is visibility:hidden, so none of its links is in the tab order. The script (navToggle)
     keeps aria-expanded true to the state, moves focus to the first link on open and back to the button on Escape, and
     closes it on a click outside, on focus leaving it, and when the window grows past the phone width. */
  .nav-toggle{display:none}
  @media (max-width:36rem){:root{--rail-width:0rem}
    .nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.75rem;height:2.75rem;
      padding:0;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:transparent;color:var(--ink);cursor:pointer;font-size:20px}
    .nav-toggle:hover{background:var(--hover)}
    .nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .topbar-inner{justify-content:flex-start}
    /* The menu button and the wordmark share the first row; the tagline gives way (the brand link's name still says it). */
    .brand-divider,.brand-tagline{display:none}
    .rail{width:min(16rem,82vw);padding:.65rem .5rem;border-right:0;transform:translateX(-105%);visibility:hidden;
      transition:transform .18s ease,visibility 0s linear .18s}
    body.nav-open .rail{transform:none;visibility:visible;transition:transform .18s ease;
      border-right:1px solid var(--line-strong);box-shadow:8px 0 24px rgba(0,0,0,.5)}
    .rail a{justify-content:flex-start;gap:.65rem;padding:0 .75rem}
    .rail-label{display:inline;white-space:nowrap;font-size:var(--fs-lg)}
    .rail a:hover::after,.rail a:focus-visible::after{content:none}
    .shell{padding-left:var(--space-3);padding-right:var(--space-3)}
    .topbar-inner,.banner-inner{padding-left:var(--space-3);padding-right:var(--space-3)}}
  @media (prefers-reduced-motion:reduce){.rail{transition:none!important}}
  /* #959: a destination's waiting count on its rail item (Playbooks: the approvals waiting for a decision). Beside the label from
     72rem, on the icon's corner in the icon rail, beside the label again in the phone slide-over. Hidden at zero. */
  .rail-count{margin-left:auto;min-width:1.5rem;padding:0 .4rem;border-radius:999px;background:var(--warn-soft);color:var(--warn);
    border:1px solid rgba(255,184,77,.35);font-size:var(--fs-xs);font-weight:700;text-align:center;line-height:1.45;font-variant-numeric:tabular-nums}
  .rail-count[hidden]{display:none}
  @media (min-width:36.01rem) and (max-width:71.99rem){.rail-count{position:absolute;top:2px;right:2px;min-width:1.2rem;font-size:.62rem;padding:0 .25rem}}
  /* #959: the shell's toast (S.toast): bottom centre, one line, an optional Undo with the time left drawn as a draining bar. */
  .soc-toasts{position:fixed;z-index:120;left:50%;bottom:1.25rem;transform:translateX(-50%);display:flex;flex-direction:column;gap:.5rem;align-items:center;
    pointer-events:none;width:max-content;max-width:calc(100vw - 2rem)}
  .soc-toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem .7rem .8rem;background:#10283F;
    border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-modal);font-size:var(--fs-md);color:var(--ink);animation:soc-toast-in .22s cubic-bezier(.2,.7,.2,1)}
  .soc-toast.out{opacity:0;transform:translateY(10px);transition:opacity .22s,transform .22s}
  @keyframes soc-toast-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  .soc-toast-ico{width:1.7rem;height:1.7rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
  .soc-toast-ico.approve{background:var(--ok-soft);color:var(--ok)}
  .soc-toast-ico.reject{background:var(--stop-soft);color:var(--stop)}
  .soc-toast-ico.changes{background:var(--warn-soft);color:var(--warn)}
  .soc-toast-ico.info{background:var(--accent-soft);color:var(--accent)}
  .soc-toast-undo{border:0;background:none;font:inherit;cursor:pointer;color:var(--accent);font-weight:650;padding:.1rem .35rem;border-radius:5px;margin-left:.3rem}
  .soc-toast-undo:hover{text-decoration:underline}
  .soc-toast-undo:focus-visible{outline:2px solid var(--cyan)}
  .soc-toast-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--cyan);width:100%;transform-origin:left;animation:soc-toast-drain linear forwards}
  @keyframes soc-toast-drain{to{transform:scaleX(0)}}
  @media (prefers-reduced-motion:reduce){.soc-toast,.soc-toast.out{animation:none;transition:none}.soc-toast-bar{animation:none}}
  /* Descriptive copy is available on hover, focus and tap, but does not consume the work area. */
  .info-wrap{display:inline-flex;position:relative;vertical-align:middle;margin-left:.4rem}
  .info-button{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;
    border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:help;padding:0}
  .info-button .icon{font-size:1rem}
  .info-button:hover,.info-button:focus-visible{color:var(--cyan);background:var(--hover)}
  .info-popover{position:absolute;z-index:45;left:calc(100% + .4rem);top:0;width:max-content;max-width:min(22rem,calc(100vw - 7rem));
    padding:.6rem .75rem;background:var(--bg-2);color:var(--ink);border:1px solid var(--line-strong);
    border-radius:var(--radius-sm);box-shadow:var(--shadow-card);font-size:var(--fs-sm);line-height:1.45;
    font-weight:400;white-space:normal;display:none;pointer-events:none}
  .info-wrap:hover .info-popover,.info-wrap:focus-within .info-popover{display:block}
  @media (max-width:36rem){.info-popover{position:fixed;left:calc(var(--rail-width) + .5rem)!important;
    right:.5rem!important;top:auto;bottom:1rem;width:auto;max-width:none}}
  /* Issue #315: Health's five tabs do not fit a phone, so a tab row too narrow for its tabs scrolls sideways on its own instead
     of widening the page (the prototype's rule), and the current tab is scrolled into it (revealCurrentTab in the client
     script). The focus ring is drawn inside the link, as on the rail: a scroll container clips what lies outside its box. */
  .health-tabs{display:flex;gap:.4rem;margin:0 0 var(--space-5);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .health-tabs a{display:inline-block;flex:0 0 auto;white-space:nowrap;padding:.6rem .8rem;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent}
  .health-tabs a:focus-visible{outline-offset:-2px}
  .health-tabs a:hover{color:var(--ink)}
  .health-tabs a[aria-current=page]{color:var(--accent);border-bottom-color:var(--blue);font-weight:650}
  /* #324: at 320px the main column is 240px and SOC's three tabs, at the padding above, were 276px: the row ended at 345px. On a phone the
     links take less padding, so the three fit; a longer row (Health's five) still scrolls inside itself, as it did. */
  @media (max-width:36rem){.health-tabs{gap:.1rem}.health-tabs a{padding:.6rem .4rem}}
  /* The snapshot's container query context on the main column, kept beside #17's nav. */
  .main-col{min-width:0;padding-top:var(--space-5);container-type:inline-size;container-name:console}
  /* #542: ONE compact chip -- a dot, the short words, and a disclosure whose summary is the small muted stale
     marker and a caret. Everything on the row is .78rem and centred; the chip never wraps. The container's
     .stale class stays (it says the verdict is old) but no longer turns the chip amber: the marker says it. */
  #health-summary{position:relative;display:inline-flex;align-items:center;gap:.3rem;max-width:none;
    font-size:var(--fs-sm);line-height:1.2;white-space:nowrap;color:var(--ink-2)}
  #health-summary.stale{color:var(--ink-2)}
  .health-face{display:inline-flex;align-items:center;gap:.4rem;min-width:0}
  .health-short{min-width:0;max-width:22rem;overflow:hidden;text-overflow:ellipsis}
  .health-dot{width:.5rem;height:.5rem;border-radius:50%;flex:0 0 auto;background:var(--ink-3)}
  .health-dot.p-ok{background:var(--ok)}
  .health-dot.p-warn{background:var(--warn)}
  .health-dot.p-stop{background:var(--stop)}
  .health-dot.p-neutral{background:var(--ink-3)}
  .health-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;
    min-height:1.5rem;padding:0 .25rem;border-radius:var(--radius-sm)}
  .health-more>summary::-webkit-details-marker{display:none}
  .health-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .health-tag{font-size:var(--fs-xs);color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:0 .4rem;line-height:1.5}
  .health-caret{width:.38rem;height:.38rem;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
    transform:rotate(45deg) translate(-1px,-1px);flex:0 0 auto}
  .health-more[open] .health-caret{transform:rotate(-135deg) translate(-1px,-1px)}
  .health-pop{position:absolute;top:calc(100% + .35rem);right:0;z-index:60;width:max-content;max-width:min(22rem,calc(100vw - 2rem));
    background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);
    box-shadow:0 8px 24px rgba(0,0,0,.45);text-align:left;white-space:normal;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.4}
  .health-pop p{margin:0 0 .3rem}
  .health-pop p:last-child{margin-bottom:0}
  .health-pop-head{color:var(--ink);font-weight:600}
  .health-pop .link-btn{margin-left:0}
  /* The routine Updated time is short and muted and never wraps; a stale or failing message keeps its colour and wraps. */
  #refresh-indicator:not(.stale){white-space:nowrap}
  /* Below 64rem the routine Updated time leaves the row (it stays for a screen reader); a stale or failing
     message never does. On a phone the chip takes its own row above the account chip, its words ellipsise
     before anything else gives, and the panel hangs from the left. */
  @media (max-width:64rem){
    #refresh-indicator:not(.stale){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
  }
  @media (max-width:36rem){
    #health-summary{flex:1 1 100%}
    .health-short{max-width:14rem}
    /* #571: on a phone the panel spans the screen under the chip instead of hanging past its right edge. */
    .health-pop{position:fixed;top:auto;left:.75rem;right:.75rem;width:auto;max-width:none}
  }
  /* Forced colours drop the fills, so the active marker must survive on its border. */
  @media (forced-colors:active){
    .rail a.active{border-left-color:Highlight;border-left-width:4px}
  }

  /* ---------- landmarks and utilities (SOC-9805) ----------
     .sr-only: text for assistive technology only. There was none before, which is why a live region
     or a hint had nowhere to go that did not also show. */
  .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  /* The skip link is the first thing in the document and appears only when it is focused. With eight
     nav links on every page it is not optional (WCAG 2.4.1 Bypass Blocks). It is hidden with the rest
     of the chrome while the sign-in gate is up. */
  .skip-link{position:absolute;left:-999px;top:var(--space-2)}
  .skip-link:focus{left:var(--space-3);z-index:60;background:var(--bg);color:var(--ink);padding:.5rem .8rem;
    border:1px solid var(--line-strong);border-radius:var(--radius-sm)}
  body.gate-active .skip-link{display:none}
  /* main is a programmatic focus target for the skip link, not a control: the whole page is not ringed. */
  #main-content:focus{outline:none}
  .breadcrumb{font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:var(--space-2)}
  .breadcrumb a{color:var(--accent);text-decoration:none}
  .breadcrumb a:hover{text-decoration:underline}
  h1.page-title{font-size:var(--fs-xl);line-height:1.2;margin:0 0 var(--space-4);letter-spacing:-.022em;color:var(--ink)}
  /* Compactness pass, 2026-09-21: 1.02rem/700-weight/var(--space-3) read fine for one section but
     added up across seven, seven, and this console got "hard to focus on anything" as the direct
     complaint. Weight down (700 -> 650, still clearly a heading against --ink-2 body text at
     4.5:1+), size down a hair, margin-bottom down one step -- nothing here removes information,
     it only gives back the vertical space seven headings and their bottom margins were spending. */
  h2{font-size:var(--fs-lg);font-weight:650;margin:0 0 var(--space-2);letter-spacing:-.005em;color:var(--ink);
    display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
  h3{font-size:var(--fs-lg);margin:0 0 var(--space-2);color:var(--ink-2)}
  /* var(--space-6), down from --space-7: same reasoning as the heading above, applied to the gap
     between one section and the next rather than inside one. */
  section{margin:0 0 var(--space-6)}

  /* ---------- collapsible panels ----------
     THE MECHANISM, ONCE. Every <section id="..."> with a direct <h2> child becomes collapsible
     with zero markup changes from the page that owns it -- see initCollapsibles() in
     SHARED_CLIENT_JS. This is the CSS half: a header that is a full-width, keyboard-reachable
     <button> (a div-with-onclick is not "keyboard reachable" or "announces itself", the owner's
     own bar for the tile primitive below, and the same bar applies here) and a chevron that rotates
     rather than a fifth pill/dot vocabulary this console does not need. */
  h2.panel-head{cursor:default}
  .panel-toggle{background:none;border:0;padding:.2rem .25rem;margin:-.2rem -.25rem 0;font:inherit;
    font-weight:inherit;letter-spacing:inherit;color:inherit;display:flex;align-items:center;
    gap:.5rem;flex-wrap:wrap;cursor:pointer;text-align:left;width:100%;border-radius:var(--radius-sm)}
  .panel-toggle:hover{color:var(--accent)}
  .panel-toggle:hover .chevron{color:var(--accent)}
  .chevron{display:inline-block;flex:0 0 auto;width:.7em;color:var(--ink-3);font-size:.85em;
    transition:transform .15s ease}
  /* Pointing right when collapsed, down when open -- one glyph, rotated, rather than swapping
     characters (which would need its own DOM write on every toggle). */
  .panel-toggle[aria-expanded="false"] .chevron{transform:rotate(-90deg)}
  .panel-body[hidden]{display:none}
  /* The collapsed state itself: the section keeps its id, its margin and its place in the page --
     only the body goes away -- so a #anchor link or a saved scroll position still lands somewhere
     sane, and re-expanding does not reflow anything above it. */

  /* ---------- tiles ---------- */
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:var(--space-3);margin-bottom:var(--space-5)}
  .tile{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4);
    background:linear-gradient(168deg,rgba(14,36,58,.94),rgba(11,29,48,.97));box-shadow:var(--shadow-card)}
  .tile .label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);margin-bottom:.35rem}
  .tile .value{font-size:1.75rem;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
  .tile .sub{font-size:var(--fs-sm);color:var(--ink-3);margin-top:.3rem}
  .tile.ok .value{color:var(--ok)}
  .tile.warn .value{color:var(--warn)}
  .tile.stop .value{color:var(--stop)}
  .tile.unknown .value{color:var(--ink-3)}
  /* ---------- clickable tiles ----------
     A real <button> (setTile() below only renders one when the caller passes an onClick — a tile
     with nothing behind it stays a plain, unhoverable <div>, per the owner's own rule that a
     dead-looking control is worse than no affordance at all). The border brightening on hover/focus
     is the ENTIRE visual difference from a static tile: same surface, same shadow, same numbers —
     this is a drill-through, not a different kind of fact. */
  .tile-btn{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;
    transition:border-color .15s,transform .15s}
  .tile-btn:hover{border-color:var(--line-strong);transform:translateY(-1px)}
  .tile-btn:active{transform:translateY(0)}
  .tile-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

  /* ---------- tables: the main thing on these pages ----------
     A header band that is a band (filled, uppercase, its own surface), hairline row separation plus
     faint zebra banding, and rows tall enough to scan -- .62rem of vertical padding on a 1.5
     line-height is ~40px a row. tabular-nums sits on every cell rather than on a .num class the
     call sites have to remember: these are data tables, the columns that hold counts, ages, seq
     numbers and timestamps outnumber the prose ones, and an un-aligned digit column is the single
     most obvious way a dark table stops reading as a table. .num stays for anything outside one. */
  /* #571 THE ONE TABLE PATTERN for every console table (incidents, events, agents, health, case page, every S.table()):
     a data table lives in a .table-wrap box that scrolls sideways on its own, never the page, and no column is squeezed
     below a readable width -- the first column (the row's name: an event title, a case, a source) keeps at least
     --table-first-col, every other cell --table-cell-min. When those floors do not fit, the BOX scrolls. A two-column
     label/value table (table.kv) is the one exception, and it has its own rule: on a phone each row stacks, label over value.
     responsive.test.ts fails on a table outside .table-wrap that is not table.kv. */
  :root{--table-first-col:11rem;--table-cell-min:5.5rem}
  /* position:relative makes the box the containing block of the .sr-only text inside its cells: an absolutely positioned
     "No case" in the last column otherwise escaped the scroll box and widened the whole Events page by 219px at 1024px. */
  .table-wrap{display:block;position:relative;max-width:100%;min-width:0;overflow-x:auto}
  /* A fieldset's default min-width is min-content, so a wide group of options widened the playbook page on a phone. */
  fieldset{min-width:0}
  .table-wrap > table > thead > tr > th,.table-wrap > table > tbody > tr > td{min-width:var(--table-cell-min)}
  .table-wrap > table > thead > tr > th:first-child,.table-wrap > table > tbody > tr > td:first-child{min-width:var(--table-first-col)}
  .table-wrap > table > tbody > tr > td[colspan]{min-width:0}
  /* #990 fix (owner 2026-10-30): when the box scrolls, the first column (the row's name) stays in place, painted over what slides under
     it (the console card's colour; the redesigned pages paint their own, ds-styles.ts), and a pill or chip in a cell never wraps. */
  .table-wrap > table > thead > tr > th:first-child,.table-wrap > table > tbody > tr > td:first-child{position:sticky;left:0}
  .table-wrap > table > thead > tr > th:first-child{z-index:3}
  .table-wrap > table > tbody > tr > td:first-child{z-index:1;background:var(--table-sticky-bg,#0c2034)}
  .table-wrap td .pill,.table-wrap td .chip,.table-wrap td .badge{white-space:nowrap}
  table.kv td{overflow-wrap:anywhere}
  @media (max-width:36rem){
    table.kv,table.kv > tbody,table.kv > tbody > tr,table.kv > tbody > tr > th,table.kv > tbody > tr > td{display:block;width:auto}
    table.kv > tbody > tr{padding:.4rem 0;border-bottom:1px solid var(--line)}
    table.kv > tbody > tr > th,table.kv > tbody > tr > td{padding:.1rem 0;border:0;text-align:left}
  }
  table{border-collapse:collapse;width:100%;font-size:var(--fs-md)}
  /* Bare th first: case-workspace.page.ts builds key/value tables whose row LABEL is a <th> inside
     tbody, not a column head. Without this they fall back to the browser default (bold, centred),
     which on a dark key/value list reads as a mistake. */
  th{text-align:left;font-weight:600;color:var(--ink-3);padding:.62rem .7rem;vertical-align:top;
    white-space:nowrap;line-height:1.5}
  tbody th{border-bottom:1px solid var(--line);width:1%}
  tbody tr:last-child th{border-bottom:0}
  thead th{position:relative;text-align:left;font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;
    letter-spacing:.09em;color:var(--ink-2);background:var(--bg-2);padding:.6rem .7rem;vertical-align:bottom;
    white-space:nowrap;border-bottom:1px solid var(--line-2)}
  thead th:first-child{border-top-left-radius:var(--radius-sm)}
  thead th:last-child{border-top-right-radius:var(--radius-sm)}
  td{border-bottom:1px solid var(--line);padding:.62rem .7rem;vertical-align:top;color:var(--ink-2);
    font-variant-numeric:tabular-nums;line-height:1.5}
  td:first-child{color:var(--ink)}
  tbody tr:nth-child(even){background:var(--zebra)}
  tbody tr:hover{background:var(--hover)}
  tbody tr:last-child td{border-bottom:0}
  .num{font-variant-numeric:tabular-nums}
  /* Monospace is for content that IS a code: ids, hashes, source keys, JSON. Never for prose, and
     never for a plain number -- tabular-nums already lines those up in the UI face. */
  .mono{font-family:var(--mono);font-size:.82em;color:var(--ink-2)}
  /* #565: THE one sizing rule for every UI icon (icons.ts, Phosphor Regular): a 1em square in the text's colour. A context
     that wants a different size sets font-size on the icon (the rail: 18px), never width and height of its own. */
  .icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.125em;fill:currentColor}
  .muted{color:var(--ink-3)}

  
/* ---------- pills: labels, never controls (#1064) ---------- */
.pill,.chip,.banner-chip{cursor:default}
.pill{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.18em .5em;border-radius:var(--radius-sm);border:1px solid transparent;white-space:nowrap;
  margin:0 .2em .2em 0;line-height:1.55}
.p-ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(61,214,140,.30)}
.p-warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(255,184,77,.30)}
.p-stop{background:var(--stop-soft);color:var(--stop);border-color:rgba(255,90,101,.32)}
/* Critical is NOT high. They were one class until 2026-09-20, which meant the console could not
   show the difference between the worst thing on the board and the second worst -- the exact
   distinction an operator triages on. The dot is deliberate redundancy: severity must not be
   carried by hue alone, or a colourblind operator reads a flat list of red. Both survive the
   move to dark unchanged in meaning; only the reds are the dark palette's. */
.p-critical{background:var(--stop-soft);color:var(--stop);border:1.5px solid var(--stop);padding:.11em .45em}
.p-critical::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--stop);margin-right:.4em;vertical-align:middle}
.p-neutral{background:var(--bg-3);color:var(--ink-2);border-color:var(--line)}
.p-synthetic{background:var(--synthetic-soft);color:var(--synthetic);border-color:rgba(155,107,255,.34)}
.chip,.banner-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);font-weight:var(--fw-b);padding:.14rem .55rem;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--ink-2);background:var(--bg-2);white-space:nowrap;line-height:1.5}
.chip.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.chip.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.chip.stop{color:var(--stop);border-color:var(--stop-line);background:var(--stop-soft)}
.chip.crit{color:var(--crit);border-color:var(--crit-line);background:var(--crit-soft)}
.chip.info{color:var(--info);border-color:var(--info-line);background:var(--info-soft)}
.chip.ai{color:var(--ai);border-color:var(--ai-line);background:var(--ai-soft)}
.chip.idle{color:var(--ink-3);border-color:var(--idle-line);background:var(--idle-soft)}
.chip.square{border-radius:var(--r-sm)} .chip.mono{font-family:var(--mono);font-weight:500}
.chip.dashed{border-style:dashed;background:transparent}


  /* ---------- bars ---------- */
  .bar-row{display:grid;grid-template-columns:9rem 1fr 2.5rem;align-items:center;gap:var(--space-2);
    margin:.4rem 0;font-size:var(--fs-md)}
  .bar-row .name{color:var(--ink-2)}
  .bar{position:relative;height:.5rem;background:var(--bg-3);border-radius:999px;overflow:hidden}
  .bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--cyan),var(--blue));
    border-radius:999px;display:block}
  .bar-row .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
  /* BASE LINK COLOUR, and it is a bug fix, not a preference. Until now only the components that
     remembered to set one had one -- .rail a, .breadcrumb a, a.nav-link. An <a> dropped into an
     ordinary paragraph (the cross-page pointers in Engineering's panel notes are the first) got
     the user agent's #0000EE, which is 2.02:1 on this canvas: legible as "something is there",
     not as text. --accent is 7.24:1 on the canvas and 6.50:1 on --bg, and every component that
     wants something else still overrides it on specificity. */
  a{color:var(--accent)}
  a.nav-link{color:var(--accent);text-decoration:none;cursor:pointer}
  a.nav-link:hover{text-decoration:underline}

  /* ---------- the four panel states ----------
     ok-with-data is a table or a tile, and needs no class. The other three must stay visibly
     different from each other and from data, because "nothing to show", "the query failed" and
     "the query cannot say" are three different facts and collapsing any two of them is how a
     console starts lying. Shape carries the difference as well as hue: dashed box / red left bar /
     grey left bar. */
  .panel-error{border-left:3px solid var(--stop);background:var(--stop-soft);color:var(--stop);
    padding:.75rem .95rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-md)}
  .panel-unknown{border-left:3px solid var(--ink-3);background:rgba(122,139,160,.10);color:var(--ink-2);
    padding:.75rem .95rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-md)}
  /* EMPTY IS THE PRIMARY STATE TODAY. The case store was purged on 2026-09-20 and no connector has
     ever authenticated against a live platform, so nearly every panel on every page renders this
     and nothing else. It therefore gets a real, calm treatment -- a dashed outline that reads as a
     deliberately reserved space rather than a failed one, secondary (not muted-to-invisible) text,
     and room for the page to say WHY it is empty in .empty-why. No red, no icon, no apology. */
  .empty{margin:0;padding:.85rem 1rem;color:var(--ink-2);font-size:var(--fs-md);line-height:1.55;
    background:rgba(7,22,37,.55);border:1px dashed var(--line-2);border-radius:var(--radius-md)}
  /* Zero rows IS the good answer here (nothing waiting on a human, nothing overdue) -- said in the
     ok colour so it is never mistaken for a panel that failed to fill. */
  .empty.ok{color:var(--ok);background:rgba(61,214,140,.06);border-color:rgba(61,214,140,.28)}
  .empty strong,.empty b{color:var(--ink);font-weight:650}
  /* The second line of an empty state: the reason, quieter than the statement above it. Available
     for the page renderers to use; harmless where they do not. */
  .empty-why{display:block;margin-top:.3rem;color:var(--ink-3);font-size:var(--fs-sm)}

  /* ---------- surfaces ---------- */
  .card,.panel{border:1px solid var(--line);border-radius:var(--radius-md);padding:1.15rem 1.25rem;
    background:linear-gradient(168deg,rgba(14,36,58,.94),rgba(11,29,48,.97));box-shadow:var(--shadow-card)}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
  .three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
  @media (max-width:52rem){ .two-col,.three-col{grid-template-columns:1fr} }

  /* ---------- footer ---------- */
  footer{margin-top:var(--space-7);padding-top:var(--space-4);border-top:1px solid var(--line);
    color:var(--ink-3);font-size:var(--fs-sm);text-align:right}
  .footer-note{color:var(--ink-3)}
  .vendor-line{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
  /* The nowrap keeps the vendor mark beside its sentence, which is right down to about 360px and
     wrong below it: at 320px this one line was 39px wider than the viewport and pushed every page
     into a sideways scroll on its own. Below that width the sentence may wrap; the mark stays
     attached to the first line of it. */
  @media (max-width:23rem){
    footer{text-align:left}
    .vendor-line{white-space:normal}
  }

  /* ---------- controls ---------- */
  .hidden{display:none !important}
  /* nowrap: this is a two-word control ("Sign out"), and on a phone the header let it break across
     two lines with the underline running under each half. A button label is one thing. */
  .link-btn{background:none;border:none;padding:0;margin-left:.4em;font:inherit;font-size:var(--fs-sm);font-weight:650;
    color:var(--accent);cursor:pointer;text-decoration:underline;white-space:nowrap}
  .link-btn:hover{color:var(--ink)}
  /* #592: the console's TWO kinds of button, defined here so every page has both whatever else it loads.
     1. The text button: accent text, no box, a 36px target, for an action that is not the row's point (Clear,
        Show more, Retry). .tb-text is its toolbar name (toolbar.ts textButton() emits it), .btn-text the same
        rule for anywhere else. The shell's own inline controls are this kind: .link-btn (Sign out, Check now) and
        the dispatch strip's toggle take its colour and weight and keep an underline because they end a sentence.
     2. The boxed button: .btn (or .btn-primary) is the primary action on the gradient, .btn.ghost (or
        .btn.btn-ghost) the secondary one, an outline on no fill; .btn.stop the destructive one. The account
        menu's items and the dialog's Close are menu chrome, not buttons of either kind, and are left as they are.
     A page's own one-off button classes map onto one of these two as its owner next touches it. */
  .tb-text,.btn-text{border:0;background:none;color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:650;min-height:2.25rem;padding:0 .35rem;cursor:pointer}
  .tb-text:hover,.btn-text:hover{text-decoration:underline}
  .tb-text:disabled,.btn-text:disabled{color:var(--ink-3);cursor:not-allowed;text-decoration:none}
  /* The sign-in button's gradient, for the same reason it exists there: white on the brand blue is
     3.40:1 and fails, white on this is 6.17:1 -> 8.87:1. Do not "restore" #168BFF behind white. */
  .btn,.btn-primary{font:inherit;font-size:var(--fs-md);font-weight:650;padding:.58rem 1.15rem;border-radius:10px;border:0;
    background:linear-gradient(94deg,var(--btn-a),var(--btn-b));color:#fff;cursor:pointer;
    box-shadow:0 8px 22px -12px rgba(13,95,191,.8);transition:filter .15s,transform .15s}
  .btn:hover,.btn-primary:hover{filter:brightness(1.09)}
  .btn:active,.btn-primary:active{transform:translateY(1px)}
  .btn:disabled,.btn-primary:disabled{opacity:.55;cursor:default;filter:none;transform:none}
  .btn.ghost,.btn.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--ink);box-shadow:none}
  .btn.ghost:hover,.btn.btn-ghost:hover{background:var(--accent-soft);filter:none}
  .btn.stop{background:rgba(255,90,101,.13);border:1px solid rgba(255,90,101,.55);color:var(--stop);box-shadow:none}
  .btn.stop:hover{background:rgba(255,90,101,.22);filter:none}
  .btn-row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin:var(--space-3) 0}
  .action-note{font-size:var(--fs-sm);color:var(--ink-3)}

  /* ---------- the shared info modal ----------
     One <dialog>, reused by every page for "open this for more detail" (tile drill-throughs, a
     row that wants a paragraph rather than a column). A real <dialog> opened with .showModal()
     rather than a hand-rolled fixed div: the browser gives Escape-to-close and a
     focus trap for free, is exposed to a screen reader as a dialog with no extra ARIA to maintain,
     and needs only the backdrop-click-to-close wired by hand (SHARED_CLIENT_JS's openModal, ~12
     lines) -- which is the whole reason this exists as one shared element instead of a per-page
     copy. ::backdrop gets the console's one scrim colour.
     #1018: the dialog is sized from the viewport ONCE (max-height) and is a flex column: the head stays, the body is the one
     thing that scrolls. A body cap of its own (it was 70vh) and a content cap inside it (the payload <pre>) stacked two scroll
     containers, so a short screen drew two scrollbars. Flex only while open, or the closed dialog would be displayed. */
  dialog.modal{border:0;padding:0;max-width:32rem;width:calc(100% - 2rem);max-height:calc(100vh - 2rem);overflow:hidden;color:var(--ink);
    background:linear-gradient(168deg,rgba(14,36,58,.98),rgba(11,29,48,.99));
    border-radius:var(--radius-lg);box-shadow:var(--shadow-modal)}
  dialog.modal[open]{display:flex;flex-direction:column}
  dialog.modal.modal-wide{max-width:min(56rem,calc(100vw - 2rem))}
  dialog.modal::backdrop{background:rgba(3,10,18,.72);backdrop-filter:blur(3px)}
  .modal-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
    padding:var(--space-5) var(--space-5) 0}
  .modal-head h2{margin:0;font-size:var(--fs-lg)}
  .modal-close{flex:0 0 auto;width:28px;height:28px;padding:0;border:none;border-radius:50%;
    background:transparent;color:var(--ink-3);font-size:1.2rem;line-height:1;cursor:pointer}
  .modal-close:hover{background:var(--hover);color:var(--ink)}
  .modal-body{padding:var(--space-4) var(--space-5) var(--space-5);font-size:var(--fs-md);
    color:var(--ink-2);line-height:1.6;flex:1 1 auto;min-height:0;overflow-y:auto}
  .modal-body p{margin:0 0 var(--space-3)}
  .modal-body p:last-child{margin-bottom:0}
  .modal-body dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem var(--space-3)}
  .modal-body dt{color:var(--ink-3)}
  .modal-body dd{margin:0;color:var(--ink)}

  /* ---------- live-session transcript ---------- */
  .stream{background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-2);
    max-height:32rem;overflow-y:auto;white-space:pre-wrap;word-break:break-word}
  .stream-line{padding:.18rem 0;border-bottom:1px solid var(--line)}
  .stream-line:last-child{border-bottom:none}
  .stream-line .k{color:var(--cyan);font-weight:600}

  /* The console's own reduced-motion rule. The sign-in page has one already, scoped to .auth-page;
     this is its counterpart for everything else, rather than a global that would restate it. */
  @media (prefers-reduced-motion:reduce){
    body:not(.gate-active) *,body:not(.gate-active) *::before,body:not(.gate-active) *::after{
      animation:none!important;transition:none!important;scroll-behavior:auto!important}
  }


  body.gate-active{
    /* Aliases onto the :root palette, not a second set of values. Each line below resolved to the
       identical hex before this change (checked token by token against the approved preview);
       --auth-line-strong maps onto --line-2 because both are rgba(100,180,255,.34). */
    --auth-bg:var(--canvas); --auth-bg-2:var(--bg-deep); --auth-raised:var(--bg); --auth-surface-2:var(--bg-2);
    --auth-blue:var(--blue); --auth-cyan:var(--cyan); --auth-ink:var(--ink); --auth-ink-2:var(--ink-2); --auth-ink-3:var(--ink-3);
    --auth-line:var(--line); --auth-line-strong:var(--line-2); --auth-error:var(--stop);
    --auth-ok:var(--ok); --auth-warn:var(--warn);
    /* The spacing steps stay px here rather than aliasing the rem-based --space-* scale: the two
       are equal at the default 16px root size, but not for a reader who has raised it, and this
       page's proportions are the ones in reports/auth-states/*.png. */
    --auth-sp1:4px;--auth-sp2:8px;--auth-sp3:12px;--auth-sp4:16px;--auth-sp5:24px;--auth-sp6:32px;
    --auth-sp7:40px;--auth-sp8:48px;--auth-sp9:64px;
    /* --ui is the preview's stack character for character. --mono is the preview's list plus
       "SF Mono", which resolves to the same face as SFMono-Regular on macOS and is simply absent
       everywhere else -- the one deliberate, non-visual difference in this alias block. */
    --auth-ui:var(--ui);
    --auth-mono:var(--mono);
    background:var(--auth-bg); color:var(--auth-ink); font-family:var(--auth-ui);
    /* line-height:normal, undoing the console body's 16px/1.6 shorthand: the approved screenshots
       were taken against a document with no body line-height, and the wordmark, the principles
       row, the attribution and the footer all rely on that tighter default. */
    line-height:normal; -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(900px 600px at 78% 28%, rgba(22,139,255,.16), transparent 62%),
      radial-gradient(700px 520px at 10% 82%, rgba(32,214,234,.09), transparent 60%),
      radial-gradient(1000px 700px at 50% -10%, rgba(22,139,255,.07), transparent 55%);
    background-attachment:fixed;
  }
  /* Reset: the console's bare element selectors would otherwise style this page's headings,
     sections and footer. Listed once here instead of adding four defensive declarations to each
     rule below. */
  .auth-page h1,.auth-page h2,.auth-page h3{display:block;margin:0;font-weight:inherit}
  .auth-page section{margin:0}
  .auth-page footer{margin:0;padding:0;border:0;color:inherit;font-size:inherit;text-align:left}
  .auth-page a{color:inherit}
  .auth-page{min-height:100vh;display:flex;flex-direction:column;color:var(--auth-ink);font-family:var(--auth-ui)}

  /* ---------- header ---------- */
  .auth-page .auth-topbar{max-width:1400px;width:100%;margin:0 auto;padding:var(--auth-sp5) var(--auth-sp7);
    display:flex;align-items:center;justify-content:space-between;gap:var(--auth-sp4)}
  .auth-page .wordmark{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.20em;font-size:.95rem}
  .auth-page .principles{display:flex;gap:var(--auth-sp4);font-size:.68rem;letter-spacing:.20em;color:var(--auth-ink-3);text-transform:uppercase}
  .auth-page .principles span:not(:last-child)::after{content:" /";margin-left:var(--auth-sp4);color:rgba(165,180,199,.35)}

  /* ---------- main grid ---------- */
  .auth-page .auth-main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:var(--auth-sp5) var(--auth-sp7) var(--auth-sp7);
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:var(--auth-sp9);align-items:center}

  /* ---------- left ---------- */
  .auth-page{position:relative;overflow-x:hidden}
  .auth-page .lede,.auth-page .authcol{position:relative;z-index:1}
  .auth-page .lede h1{margin:0;font-size:clamp(2.1rem,3.4vw,3.05rem);line-height:1.06;letter-spacing:-.022em;font-weight:700}
  .auth-page .lede h1 .accent{display:block;background:linear-gradient(95deg,var(--auth-cyan),var(--auth-blue));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .auth-page .rule{width:56px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--auth-cyan),var(--auth-blue));margin:var(--auth-sp5) 0}
  .auth-page .lede p.sub{margin:0;max-width:34rem;color:var(--auth-ink-2);font-size:1.02rem;line-height:1.55}
  .auth-page .caps{margin:var(--auth-sp7) 0 0;padding:0;list-style:none;display:grid;gap:var(--auth-sp5);max-width:33rem}
  .auth-page .cap{display:flex;gap:var(--auth-sp4);align-items:flex-start}
  .auth-page .cap .ico{flex:0 0 38px;height:38px;border-radius:10px;display:grid;place-items:center;
    background:rgba(22,139,255,.10);border:1px solid var(--auth-line)}
  .auth-page .cap .ico .icon{font-size:19px;color:var(--auth-cyan)}
  .auth-page .cap h3{margin:0 0 3px;font-size:.93rem;font-weight:650;letter-spacing:-.005em}
  .auth-page .cap p{margin:0;font-size:.85rem;color:var(--auth-ink-2);line-height:1.45}
  .auth-page .tagline{margin-top:var(--auth-sp8);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--auth-ink-3)}

  /* ---------- svg visual ---------- */

  .soc-globe{position:absolute;left:-110px;bottom:-400px;width:min(68vw,980px);
    opacity:.55;pointer-events:none;overflow:visible;z-index:0}
  .soc-globe svg{display:block;width:100%;height:auto}
  .globe-outline{fill:none;stroke:rgba(70,170,255,.12);stroke-width:1}
  .globe-grid path{fill:none;stroke:rgba(74,163,220,.07);stroke-width:.8}
  .landmasses path{fill:rgba(19,73,112,.20);stroke:rgba(37,153,210,.22);stroke-width:.8;stroke-linejoin:round}
  .routes path{fill:none}
  .route{stroke:url(#arcGrad);stroke-width:1.4;stroke-dasharray:4 9;stroke-linecap:round;
    animation:globe-flow 9s linear infinite}
  .route-2{animation-delay:-3s;opacity:.75}
  .route-3{animation-delay:-6s;opacity:.55}
  .nodes circle{fill:#25d7ef;filter:url(#nodeGlow);transform-box:fill-box;transform-origin:center;
    animation:globe-pulse 3.4s ease-in-out infinite}
  .nodes circle:nth-child(2n){animation-delay:-1.4s}
  .nodes circle:nth-child(3n){animation-delay:-2.3s}
  @keyframes globe-flow{to{stroke-dashoffset:-104}}
  @keyframes globe-pulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

  /* Below 900px the globe is dropped outright rather than shrunk: at phone width it would sit
     behind the auth card and reduce contrast on the one thing the page exists for. */
  @media (max-width:900px){ .soc-globe{display:none} }

  @media (prefers-reduced-motion:reduce){
    .route,.nodes circle{animation:none}
    .route{stroke-dasharray:4 9}
  }

  .auth-page .grid-line{stroke:rgba(100,180,255,.13);stroke-width:.6;fill:none}
  .auth-page .map-path{stroke:rgba(100,180,255,.24);stroke-width:.9;fill:rgba(22,139,255,.045)}
  .auth-page .arc{stroke:url(#authArcGrad);stroke-width:1.15;fill:none;stroke-linecap:round}
  .auth-page .arc-dash{stroke-dasharray:3 7;animation:authFlow 9s linear infinite}
  .auth-page .node{fill:var(--auth-cyan)}
  .auth-page .node-pulse{animation:authPulse 4.5s ease-in-out infinite}
  /* Keyframe and gradient ids are document-global, not scoped by the .auth-page prefix -- hence
     the auth* names, so a future console animation cannot silently redefine them. */
  @keyframes authFlow{to{stroke-dashoffset:-100}}
  @keyframes authPulse{0%,100%{opacity:.45;r:2}50%{opacity:1;r:3.1}}

  /* ---------- auth card ---------- */
  .auth-page .authcol{display:flex;flex-direction:column;align-items:stretch;gap:var(--auth-sp4);
    width:100%;max-width:470px;margin-inline:auto}
  .auth-page .auth-card{
    background:linear-gradient(168deg,rgba(14,36,58,.94),rgba(11,29,48,.97));
    border:1px solid var(--auth-line); border-radius:22px; padding:var(--auth-sp8) var(--auth-sp7);
    box-shadow:0 26px 60px -22px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(9px); position:relative; overflow:hidden; min-width:0;
  }
  .auth-page .auth-card::before{content:"";position:absolute;inset:-1px -1px auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(32,214,234,.55),transparent)}
  .auth-page .status-ico{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto var(--auth-sp5);
    border:1px solid var(--auth-line)}
  .auth-page .status-ico .icon{font-size:27px}
  .auth-page .ico-neutral{background:rgba(22,139,255,.10)} .auth-page .ico-neutral .icon{color:var(--auth-blue)}
  .auth-page .ico-error{background:rgba(255,90,101,.11);border-color:rgba(255,90,101,.42)} .auth-page .ico-error .icon{color:var(--auth-error)}
  .auth-page .ico-warn{background:rgba(255,184,77,.11);border-color:rgba(255,184,77,.40)} .auth-page .ico-warn .icon{color:var(--auth-warn)}
  .auth-page .ico-ok{background:rgba(61,214,140,.11);border-color:rgba(61,214,140,.40)} .auth-page .ico-ok .icon{color:var(--auth-ok)}

  .auth-page .auth-card h2{margin:0 0 var(--auth-sp3);text-align:center;font-size:1.36rem;letter-spacing:-.016em;font-weight:680}
  .auth-page .auth-card .body{margin:0;text-align:center;color:var(--auth-ink-2);font-size:.93rem;line-height:1.55}
  /* overflow-wrap:anywhere is not in the preview, which only ever showed "user-01@tenant.example".
     This line is the one place the card prints a value it did not write -- preferred_username off
     the token -- and an email has no space to break at, so a long service-principal or federated
     name pushes the whole card past the right edge of a 390px viewport (measured: +30px). Same
     class of defect as the redirect-URI chip the preview's own comment documents, and invisible
     at any realistic desktop width or for any short address. */
  .auth-page .signed-as{margin:var(--auth-sp4) 0 0;text-align:center;font-size:.82rem;color:var(--auth-ink-3);overflow-wrap:anywhere}
  .auth-page .signed-as strong{color:var(--auth-ink-2);font-weight:600}

  .auth-page .auth-btn{margin-top:var(--auth-sp6);width:100%;min-height:50px;border-radius:11px;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:11px;
    font-family:inherit;font-size:.96rem;font-weight:650;color:#fff;
    /* NOT --auth-blue (#168BFF): white on it is 3.40:1, below the 4.5:1 AA needs for text this
       size. #0D5FBF -> #0A4894 measures 6.17:1 and 8.87:1. --auth-blue stays the accent for
       borders, glows and the icon tint, where the 3:1 non-text threshold applies instead. */
    background:linear-gradient(94deg,#0D5FBF,#0A4894);
    box-shadow:0 8px 22px -8px rgba(13,95,191,.7);transition:filter .15s,transform .15s;
    /* The arrow is taken OUT of the flex flow and pinned to the right edge. With margin-left:auto
       it was a flex sibling, so it consumed the free space and pushed the icon+label group off
       centre -- the label read as left-aligned even though the button was justify-content:center. */
    position:relative;padding:0 var(--auth-sp6)}
  .auth-page .auth-btn:hover{filter:brightness(1.09)}
  .auth-page .auth-btn:active{transform:translateY(1px)}
  /* Disabled state is not in the preview: showGate() disables a button on click so a double tap
     cannot start two sign-ins, and an un-styled disabled button looks like a dead control. */
  .auth-page .auth-btn:disabled{opacity:.6;cursor:default;filter:none}
  .auth-page .auth-btn .arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);opacity:.75;display:inline-flex;font-size:16px}
  .auth-page .auth-btn > span{text-align:center}
  .auth-page .auth-btn-ghost{margin-top:var(--auth-sp3);background:transparent;border:1px solid var(--auth-line-strong);
    color:var(--auth-ink);box-shadow:none;font-weight:600}
  .auth-page .auth-btn-ghost:hover{background:rgba(22,139,255,.09);filter:none}
  .auth-page .auth-btn:focus-visible,.auth-page summary:focus-visible{outline:2px solid var(--auth-cyan);outline-offset:3px}

  .auth-page .notice{margin-top:var(--auth-sp5);border:1px solid var(--auth-line);border-radius:13px;
    background:rgba(9,24,40,.7);padding:var(--auth-sp4) var(--auth-sp5)}
  /* Centred, which the approved preview's notice was not. The owner's review of that page was
     "this part works well buuuut these should be centered", and the notice blocks are the only
     thing in the card that sits off its axis: the status icon, the headline, the body, the
     "Signed in as" line, the button label, the help line and the disclosure are all centred, and
     these two -- "This address" on the configuration card and "Access required" on the no-access
     card -- were flush left inside them. A deliberate, owner-requested divergence from
     reports/auth-states/*.png; everything else in this stylesheet is still the preview's. */
  .auth-page .notice .nhead{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.82rem;font-weight:650;margin-bottom:6px}
  .auth-page .notice .nhead .icon{font-size:16px;color:var(--auth-ink-2)}
  .auth-page .notice p{margin:0;text-align:center;font-size:.845rem;color:var(--auth-ink-2);line-height:1.5}
  /* nowrap is right for a short role name like soc.viewer -- breaking "soc.viewer" across two lines
     would be worse than a little overflow. It is wrong for a URL: at 390px the callback address
     pushed the card 54px past the viewport edge. So long values get their own modifier that breaks
     anywhere rather than a shared rule that is wrong for one of the two uses. */
  .auth-page .chip{display:inline-block;font-family:var(--auth-mono);font-size:.78rem;padding:1px 7px;border-radius:5px;
    background:rgba(22,139,255,.16);border:1px solid var(--auth-line-strong);color:#BFE0FF;white-space:nowrap;
    max-width:100%;vertical-align:bottom}
  .auth-page .chip-long{white-space:normal;overflow-wrap:anywhere;word-break:break-all;line-height:1.5}
  .auth-page .helptext{margin-top:var(--auth-sp4);text-align:center;font-size:.8rem;color:var(--auth-ink-3);line-height:1.5}

  .auth-page details.tech{margin-top:var(--auth-sp4)}
  .auth-page details.tech summary{cursor:pointer;font-size:.78rem;color:var(--auth-ink-3);text-align:center;list-style:none}
  .auth-page details.tech summary::-webkit-details-marker{display:none}
  .auth-page details.tech summary:hover{color:var(--auth-ink-2)}
  .auth-page details.tech pre{margin:var(--auth-sp3) 0 0;font-family:var(--auth-mono);font-size:.74rem;color:var(--auth-ink-3);
    background:rgba(4,12,22,.75);border:1px solid var(--auth-line);border-radius:9px;padding:10px 12px;
    white-space:pre-wrap;word-break:break-word;text-align:left}

  .auth-page .spinner{width:27px;height:27px;border-radius:50%;border:2.5px solid rgba(22,139,255,.22);
    border-top-color:var(--auth-blue);animation:authSpin .85s linear infinite}
  @keyframes authSpin{to{transform:rotate(360deg)}}

  .auth-page .attrib{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.76rem;color:var(--auth-ink-3)}
  .auth-page .attrib strong{font-weight:600;color:var(--auth-ink-2)}
  .auth-page .dd{width:19px;height:19px;flex:0 0 19px}

  /* ---------- footer ---------- */
  .auth-page .foot{border-top:1px solid rgba(100,180,255,.10);margin-top:auto}
  .auth-page .foot .inner{max-width:1400px;margin:0 auto;padding:var(--auth-sp4) var(--auth-sp7);
    display:flex;justify-content:space-between;gap:var(--auth-sp4);
    font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--auth-ink-3)}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    /* justify-items:center rather than relying on the card's own margins: with one grid column the
       track is the full content box, so a card narrower than the track would otherwise sit at the
       start edge and read as left-aligned. */
    .auth-page .auth-main{grid-template-columns:1fr;gap:var(--auth-sp7);padding:var(--auth-sp5) var(--auth-sp5) var(--auth-sp9);
      align-items:start;justify-items:center}
    .auth-page .lede{max-width:470px;width:100%}
    .auth-page .auth-topbar{padding:var(--auth-sp4) var(--auth-sp5)}
    .auth-page .principles{display:none}
    .auth-page .soc-globe,.auth-page .tagline{display:none}
    .auth-page .caps{margin-top:var(--auth-sp5)}
    .auth-page .authcol{order:-1}
    /* The wide letter-spacing that makes this read as a footer on desktop is what breaks
       "SECURITY OPERATIONS COMMAND CENTER" across two lines on a phone. Tighten it here rather
       than shortening the wording, which is doing real work. */
    .auth-page .foot .inner{padding:var(--auth-sp4) var(--auth-sp5);flex-direction:column;align-items:center;gap:6px;
      text-align:center;letter-spacing:.11em;font-size:.6rem}
  }
  @media (max-width:520px){
    .auth-page .auth-main{padding:var(--auth-sp4) 20px var(--auth-sp9)}
    .auth-page .auth-topbar{padding:var(--auth-sp4) 20px}
    .auth-page .auth-card{padding:var(--auth-sp6) var(--auth-sp5);border-radius:18px}
    .auth-page .lede h1{font-size:1.95rem}
    .auth-page .caps{gap:var(--auth-sp4)}
  }
  /* Scoped to this page rather than left global: stopping all motion here is the approved page's
     own rule, but silently disabling transitions across the signed-in console would be a change
     nobody asked for. */
  @media (prefers-reduced-motion:reduce){
    .auth-page *,.auth-page *::before,.auth-page *::after{animation:none!important;transition:none!important}
    .auth-page .arc-dash{stroke-dasharray:none}
    .auth-page .spinner{border-top-color:var(--auth-blue);opacity:.8}
  }

/* #990 redesign: tokens */
:root{--top-h:60px;--content-max:80rem;--canvas:#06111F;--bg-deep:#071625;--bg:#0B1D30;--bg-2:#0E243A;--bg-3:#15314C;--bg-raised:#10283F;--ink:#F5F8FC;--ink-2:#A5B4C7;--ink-3:#7A8BA0;--ink-inverse:#06111F;--blue:#168BFF;--cyan:#20D6EA;--accent:#4FA3FF;--accent-soft:rgba(22,139,255,.14);--cyan-soft:rgba(32,214,234,.12);--btn-a:#0D5FBF;--btn-b:#0A4894;--line:rgba(100,180,255,.20);--line-2:rgba(100,180,255,.34);--line-strong:rgba(100,180,255,.55);--hover:rgba(100,180,255,.09);--ok:#3DD68C;--ok-soft:rgba(61,214,140,.13);--ok-line:rgba(61,214,140,.40);--ok-ink:#8ff0bf;--warn:#FFB84D;--warn-soft:rgba(255,184,77,.13);--warn-line:rgba(255,184,77,.40);--warn-ink:#ffd08a;--stop:#FF5A65;--stop-line:rgba(255,90,101,.45);--stop-ink:#ff9aa1;--info:#4FA3FF;--info-soft:rgba(79,163,255,.14);--info-line:rgba(79,163,255,.42);--crit:#FF3B6B;--crit-soft:rgba(255,59,107,.16);--crit-line:rgba(255,59,107,.55);--idle:#7A8BA0;--idle-soft:rgba(122,139,160,.14);--idle-line:rgba(122,139,160,.40);--ai:#C4A6FF;--ai-soft:rgba(155,107,255,.16);--ai-line:rgba(196,166,255,.45);--ui:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--fs-2xs:.66rem;--fs-xs:.72rem;--fs-sm:.78rem;--fs-md:.86rem;--fs-lg:.94rem;--fs-2xl:1.4rem;--fs-3xl:1.75rem;--fw-n:500;--fw-b:650;--fw-xb:700;--s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:2.5rem;--r-xs:4px;--r-sm:6px;--r-md:12px;--r-lg:18px;--r-pill:999px;--shadow-card:0 10px 26px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.035);--shadow-pop:0 16px 40px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);--shadow-modal:0 26px 60px -22px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.045);--focus:0 0 0 2px var(--canvas), 0 0 0 4px var(--cyan);--t-fast:150ms;--t-med:200ms;--t-slow:250ms;--ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--z-nav:50;--z-fab:59;--z-top:60;--z-banner:80;--z-scrim:90;--z-drawer:95;--z-modal:100;--z-toast:120;--z-tip:130}
.ds{--fs-xl:1.15rem;--stop-soft:rgba(255,90,101,.11)}
/* #990 redesign: components (scoped to .ds) */
p:where(.ds,.ds *){margin:0}
.mono:where(.ds,.ds *){font-family:var(--mono);font-size:.92em}
.num:where(.ds,.ds *){font-variant-numeric:tabular-nums}
.muted:where(.ds,.ds *){color:var(--ink-3)}
.dim:where(.ds,.ds *){color:var(--ink-2)}
.ok-t:where(.ds,.ds *){color:var(--ok)}
.warn-t:where(.ds,.ds *){color:var(--warn)}
.stop-t:where(.ds,.ds *){color:var(--stop)}
.info-t:where(.ds,.ds *){color:var(--info)}
.ai-t:where(.ds,.ds *){color:var(--ai)}
.row-flex:where(.ds,.ds *){display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.grow:where(.ds,.ds *){flex:1;min-width:0}
.stack:where(.ds,.ds *){display:flex;flex-direction:column;gap:var(--s-3)}
.grid-2:where(.ds,.ds *){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);align-items:start}
.grid-3:where(.ds,.ds *){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.grid-auto:where(.ds,.ds *){display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:var(--s-4)}
kbd:where(.ds,.ds *){font:600 .68rem/1 var(--mono);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:.14rem .32rem;color:var(--ink-2);background:var(--bg-2)}
hr.sep:where(.ds,.ds *){border:0;border-top:1px solid var(--line);margin:var(--s-4) 0}
.page-head:where(.ds,.ds *){display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4)}
.page-title:where(.ds,.ds *){font-size:var(--fs-2xl);font-weight:var(--fw-xb);letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem}
.page-title:where(.ds,.ds *) .icon{color:var(--cyan);font-size:1.3rem}
.page-lede:where(.ds,.ds *){margin-top:.2rem;color:var(--ink-2);font-size:var(--fs-md)}
.page-actions:where(.ds,.ds *){display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.sec-head:where(.ds,.ds *){display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:var(--s-5) 0 var(--s-3);flex-wrap:wrap}
.sec-head:where(.ds,.ds *) h2{font-size:var(--fs-lg);font-weight:var(--fw-xb);display:flex;align-items:center;gap:.5rem}
.sec-head:where(.ds,.ds *) h2 .icon{color:var(--ink-3)}
.tabs:where(.ds,.ds *){display:flex;gap:.2rem;margin:var(--s-3) 0 var(--s-5);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tab:where(.ds,.ds *){all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .9rem;margin-bottom:-1px;font-size:var(--fs-md);font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;border-radius:6px 6px 0 0;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.tab:where(.ds,.ds *){transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast)}}
.tab:hover:where(.ds,.ds *){color:var(--ink);background:var(--hover)}
.tab[aria-selected="true"]:where(.ds,.ds *){color:var(--accent);border-bottom-color:var(--cyan)}
.tab:focus-visible:where(.ds,.ds *){outline:2px solid var(--cyan);outline-offset:-2px}
.tab:where(.ds,.ds *) .icon{font-size:1.05rem}
.badge:where(.ds,.ds *){display:inline-block;min-width:1.35rem;padding:0 .4rem;border-radius:var(--r-pill);background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line-2);font-size:var(--fs-2xs);font-weight:var(--fw-xb);text-align:center;line-height:1.6;font-variant-numeric:tabular-nums}
.badge.warn:where(.ds,.ds *){background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.badge.stop:where(.ds,.ds *){background:var(--stop-soft);color:var(--stop);border-color:var(--stop-line)}
.badge.ok:where(.ds,.ds *){background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.badge.info:where(.ds,.ds *){background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.tabpanel[hidden]:where(.ds,.ds *){display:none}
@media (prefers-reduced-motion:no-preference){.tabpanel:where(.ds,.ds *){animation:nw-rise var(--t-med) var(--ease)}}
.seg:where(.ds,.ds *){display:inline-flex;padding:3px;gap:2px;background:var(--bg-deep);border:1px solid var(--line);border-radius:10px}
.seg:where(.ds,.ds *) button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:7px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.seg:where(.ds,.ds *) button{transition:background var(--t-fast),color var(--t-fast)}}
.seg:where(.ds,.ds *) button:hover{color:var(--ink)}
.seg:where(.ds,.ds *) button[aria-pressed="true"]{background:var(--bg-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.seg:where(.ds,.ds *) button:focus-visible{outline:2px solid var(--cyan)}
.tiles:where(.ds,.ds *){display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:var(--s-3);margin:var(--s-4) 0 var(--s-5)}
.tile:where(.ds,.ds *){position:relative;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);color:var(--ink);text-align:left;font:inherit}
@media (prefers-reduced-motion:no-preference){.tile:where(.ds,.ds *){transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}}
button.tile:where(.ds,.ds *),a.tile:where(.ds,.ds *){cursor:pointer}
button.tile:hover:where(.ds,.ds *),a.tile:hover:where(.ds,.ds *){border-color:var(--line-2);transform:translateY(-1px);text-decoration:none}
.tile[aria-pressed="true"]:where(.ds,.ds *),.tile[aria-selected="true"]:where(.ds,.ds *){border-color:var(--blue);background:linear-gradient(180deg,rgba(22,139,255,.10),rgba(22,139,255,.02)),var(--bg)}
.tile[aria-pressed="true"]:where(.ds,.ds *)::after,.tile[aria-selected="true"]:where(.ds,.ds *)::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--cyan)}
.tile-ico:where(.ds,.ds *),.ico-box:where(.ds,.ds *){width:2.5rem;height:2.5rem;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;flex:none;background:var(--accent-soft);color:var(--accent)}
.ico-box.sm:where(.ds,.ds *){width:2rem;height:2rem;font-size:1rem;border-radius:9px}
.tone-ok:where(.ds,.ds *){background:var(--ok-soft);color:var(--ok)}
.tone-warn:where(.ds,.ds *){background:var(--warn-soft);color:var(--warn)}
.tone-stop:where(.ds,.ds *){background:var(--stop-soft);color:var(--stop)}
.tone-info:where(.ds,.ds *){background:var(--accent-soft);color:var(--accent)}
.tone-cyan:where(.ds,.ds *){background:var(--cyan-soft);color:var(--cyan)}
.tone-ai:where(.ds,.ds *){background:var(--ai-soft);color:var(--ai)}
.tone-idle:where(.ds,.ds *){background:var(--idle-soft);color:var(--ink-2)}
.tone-crit:where(.ds,.ds *){background:var(--crit-soft);color:var(--crit)}
.tile-text:where(.ds,.ds *){display:flex;flex-direction:column;min-width:0;flex:1}
.tile-label:where(.ds,.ds *){font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}
.tile-value:where(.ds,.ds *){font-size:1.6rem;font-weight:var(--fw-xb);line-height:1.15;font-variant-numeric:tabular-nums}
.tile-value:where(.ds,.ds *) small{font-size:var(--fs-sm);color:var(--ink-3);font-weight:600;margin-left:.2rem}
.tile-hint:where(.ds,.ds *){font-size:var(--fs-xs);color:var(--ink-3);display:flex;align-items:center;gap:.3rem}
.delta:where(.ds,.ds *){display:inline-flex;align-items:center;gap:.15rem;font-size:var(--fs-xs);font-weight:var(--fw-b)}
.delta.up:where(.ds,.ds *){color:var(--stop)}
.delta.down:where(.ds,.ds *){color:var(--ok)}
.delta.good-up:where(.ds,.ds *){color:var(--ok)}
.delta.flat:where(.ds,.ds *){color:var(--ink-3)}
.tile:where(.ds,.ds *) .spark{position:absolute;right:14px;top:14px;opacity:.85;pointer-events:none}
.tile-hint:where(.ds,.ds *){white-space:normal;flex-wrap:wrap;min-width:0;overflow-wrap:break-word}
.card:where(.ds,.ds *){background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
@media (prefers-reduced-motion:no-preference){.card:where(.ds,.ds *){transition:border-color var(--t-fast),transform var(--t-fast)}}
.card.interactive:where(.ds,.ds *){cursor:pointer}
.card.interactive:hover:where(.ds,.ds *){border-color:var(--line-2)}
.card.selected:where(.ds,.ds *){border-color:var(--blue)}
.card-pad:where(.ds,.ds *){padding:var(--s-5)}
.card.compact:where(.ds,.ds *) .card-pad{padding:var(--s-4)}
.card-head:where(.ds,.ds *){display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.card-head:where(.ds,.ds *) h3{font-size:var(--fs-lg);font-weight:var(--fw-xb);display:flex;align-items:center;gap:.5rem}
.card-head:where(.ds,.ds *) h3 .icon{color:var(--ink-3)}
.card-head:where(.ds,.ds *) .card-tools{margin-left:auto;display:flex;gap:.25rem;align-items:center}
.card-body:where(.ds,.ds *){padding:var(--s-4) var(--s-5)}
.card-foot:where(.ds,.ds *){display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);background:rgba(7,22,37,.5);border-radius:0 0 var(--r-lg) var(--r-lg);flex-wrap:wrap}
.card-title:where(.ds,.ds *){font-size:1rem;font-weight:var(--fw-b);line-height:1.4;color:var(--ink)}
.card-sub:where(.ds,.ds *){margin-top:.15rem;font-size:var(--fs-sm);color:var(--ink-3)}
.card-sub:where(.ds,.ds *) b{color:var(--ink-2);font-weight:600}
.facts:where(.ds,.ds *){display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:.7rem 0 0;padding:0;list-style:none;font-size:var(--fs-sm);color:var(--ink-2)}
.facts:where(.ds,.ds *) li{display:inline-flex;align-items:center;gap:.4rem}
.facts:where(.ds,.ds *) .icon{color:var(--ink-3);font-size:1rem}
.facts:where(.ds,.ds *) b{color:var(--ink);font-weight:var(--fw-b);font-variant-numeric:tabular-nums}
.kv:where(.ds,.ds *){display:grid;grid-template-columns:minmax(7rem,max-content) 1fr;gap:.4rem 1rem;margin:0;font-size:var(--fs-sm)}
.kv:where(.ds,.ds *) dt{color:var(--ink-3)}
.kv:where(.ds,.ds *) dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.chip:where(.ds,.ds *) .icon{font-size:.9rem}
.sev:where(.ds,.ds *){display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-2xs);font-weight:var(--fw-xb);letter-spacing:.04em;text-transform:uppercase;padding:.1rem .45rem;border-radius:5px;white-space:nowrap}
.sev:where(.ds,.ds *)::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sev.critical:where(.ds,.ds *){color:var(--crit);background:var(--crit-soft)}
.sev.high:where(.ds,.ds *){color:var(--stop);background:var(--stop-soft)}
.sev.medium:where(.ds,.ds *){color:var(--warn);background:var(--warn-soft)}
.sev.low:where(.ds,.ds *){color:var(--info);background:var(--info-soft)}
.sev.info:where(.ds,.ds *){color:var(--ink-2);background:var(--bg-3)}
.dot:where(.ds,.ds *){display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--idle);flex:none;position:relative}
.dot.ok:where(.ds,.ds *){background:var(--ok)}
.dot.warn:where(.ds,.ds *){background:var(--warn)}
.dot.stop:where(.ds,.ds *){background:var(--stop)}
.dot.info:where(.ds,.ds *){background:var(--info)}
.dot.ai:where(.ds,.ds *){background:var(--ai)}
.dot.live:where(.ds,.ds *)::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit}
@media (prefers-reduced-motion:no-preference){.dot.live:where(.ds,.ds *)::after{animation:nw-pulse 1.8s var(--ease) infinite}}
.filters:where(.ds,.ds *){display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.fchip:where(.ds,.ds *){all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);font-weight:600;padding:.25rem .65rem;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--ink-2);background:transparent}
@media (prefers-reduced-motion:no-preference){.fchip:where(.ds,.ds *){transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}}
.fchip:hover:where(.ds,.ds *){background:var(--hover);color:var(--ink)}
.fchip[aria-pressed="true"]:where(.ds,.ds *){background:var(--accent-soft);border-color:var(--blue);color:var(--ink)}
.fchip[aria-pressed="true"]:where(.ds,.ds *) .fx{display:inline}
.fchip:where(.ds,.ds *) .fx{display:none;font-size:.8rem;color:var(--ink-3)}
.fchip:where(.ds,.ds *) .count{color:var(--ink-3);font-variant-numeric:tabular-nums}
.fchip:focus-visible:where(.ds,.ds *){outline:2px solid var(--cyan);outline-offset:2px}
.btn:where(.ds,.ds *){display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:var(--fs-md);font-weight:var(--fw-b);padding:.5rem 1rem;border-radius:10px;border:1px solid transparent;cursor:pointer;white-space:nowrap;position:relative;text-decoration:none;line-height:1.3;background:linear-gradient(94deg,var(--btn-a),var(--btn-b));color:#fff;box-shadow:0 8px 22px -12px rgba(13,95,191,.8)}
@media (prefers-reduced-motion:no-preference){.btn:where(.ds,.ds *){transition:filter var(--t-fast),transform var(--t-fast),background var(--t-fast),border-color var(--t-fast)}}
.btn:hover:where(.ds,.ds *){filter:brightness(1.1);text-decoration:none}
.btn:active:where(.ds,.ds *){transform:translateY(1px)}
.btn:where(.ds,.ds *) .icon{font-size:1rem}
.btn.secondary:where(.ds,.ds *){background:var(--bg-2);border-color:var(--line-strong);color:var(--ink);box-shadow:none}
.btn.secondary:hover:where(.ds,.ds *){background:var(--bg-3);filter:none}
.btn.ghost:where(.ds,.ds *){background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none}
.btn.ghost:hover:where(.ds,.ds *){background:var(--hover);color:var(--ink);filter:none}
.btn.danger:where(.ds,.ds *){background:var(--stop-soft);border-color:var(--stop-line);color:var(--stop);box-shadow:none}
.btn.danger:hover:where(.ds,.ds *){background:rgba(255,90,101,.22);filter:none}
.btn.danger.solid:where(.ds,.ds *){background:#D93A47;border-color:#D93A47;color:#fff}
.btn.ok:where(.ds,.ds *){background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok);box-shadow:none}
.btn.sm:where(.ds,.ds *){font-size:var(--fs-sm);padding:.32rem .7rem;border-radius:8px}
.btn.lg:where(.ds,.ds *){font-size:var(--fs-lg);padding:.65rem 1.25rem}
.btn.icon-only:where(.ds,.ds *){padding:.45rem;aspect-ratio:1}
.btn.sm.icon-only:where(.ds,.ds *){padding:.32rem}
.btn[disabled]:where(.ds,.ds *),.btn[aria-disabled="true"]:where(.ds,.ds *){opacity:.45;cursor:not-allowed;filter:none;transform:none}
.btn.loading:where(.ds,.ds *){color:transparent!important;pointer-events:none}
.btn.loading:where(.ds,.ds *)::after{content:"";position:absolute;width:1rem;height:1rem;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff}
@media (prefers-reduced-motion:no-preference){.btn.loading:where(.ds,.ds *)::after{animation:nw-spin .7s linear infinite}}
.btn-group:where(.ds,.ds *){display:inline-flex;gap:var(--s-2);flex-wrap:wrap}
.field:where(.ds,.ds *){display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field:where(.ds,.ds *) label,.label:where(.ds,.ds *){font-size:var(--fs-xs);font-weight:var(--fw-b);color:var(--ink-2);letter-spacing:.02em}
.field:where(.ds,.ds *) .help{font-size:var(--fs-xs);color:var(--ink-3)}
.field:where(.ds,.ds *) .err{font-size:var(--fs-xs);color:var(--stop);display:flex;align-items:center;gap:.3rem}
.input:where(.ds,.ds *),.select:where(.ds,.ds *),.textarea:where(.ds,.ds *){width:100%;background:var(--bg-2);color:var(--ink);font-size:var(--fs-md);border:1px solid var(--line-strong);border-radius:8px;padding:.5rem .65rem}
@media (prefers-reduced-motion:no-preference){.input:where(.ds,.ds *),.select:where(.ds,.ds *),.textarea:where(.ds,.ds *){transition:border-color var(--t-fast),box-shadow var(--t-fast)}}
.input:where(.ds,.ds *)::placeholder,.textarea:where(.ds,.ds *)::placeholder{color:var(--ink-3)}
.input:focus:where(.ds,.ds *),.select:focus:where(.ds,.ds *),.textarea:focus:where(.ds,.ds *){outline:none;border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.input.invalid:where(.ds,.ds *),.textarea.invalid:where(.ds,.ds *){border-color:var(--stop);box-shadow:0 0 0 1px var(--stop)}
@media (prefers-reduced-motion:no-preference){.input.invalid:where(.ds,.ds *),.textarea.invalid:where(.ds,.ds *){animation:nw-nudge .2s}}
.textarea:where(.ds,.ds *){min-height:4.5rem;resize:vertical}
.select:where(.ds,.ds *){appearance:none;-webkit-appearance:none;padding-right:2rem;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.input-wrap:where(.ds,.ds *){position:relative;display:flex;align-items:center}
.input-wrap:where(.ds,.ds *) > .icon{position:absolute;left:.6rem;color:var(--ink-3)}
.input-wrap:where(.ds,.ds *) .input{padding-left:2rem}
.check:where(.ds,.ds *){display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-md);cursor:pointer}
.cb:where(.ds,.ds *){appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;border:1.5px solid var(--line-strong);border-radius:5px;background:var(--bg-2);display:inline-grid;place-content:center;cursor:pointer;flex:none;margin:0}
@media (prefers-reduced-motion:no-preference){.cb:where(.ds,.ds *){transition:background var(--t-fast),border-color var(--t-fast)}}
.cb:where(.ds,.ds *)::after{content:"";width:.55rem;height:.3rem;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);margin-top:-2px}
@media (prefers-reduced-motion:no-preference){.cb:where(.ds,.ds *)::after{transition:transform var(--t-fast) var(--ease)}}
.cb:checked:where(.ds,.ds *){background:var(--blue);border-color:var(--blue)}
.cb:checked:where(.ds,.ds *)::after{transform:rotate(-45deg) scale(1)}
.switch:where(.ds,.ds *){appearance:none;-webkit-appearance:none;width:2.3rem;height:1.3rem;border-radius:var(--r-pill);background:var(--bg-3);border:1px solid var(--line-2);position:relative;cursor:pointer;flex:none;margin:0}
@media (prefers-reduced-motion:no-preference){.switch:where(.ds,.ds *){transition:background var(--t-fast),border-color var(--t-fast)}}
.switch:where(.ds,.ds *)::after{content:"";position:absolute;top:2px;left:2px;width:.95rem;height:.95rem;border-radius:50%;background:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.switch:where(.ds,.ds *)::after{transition:transform var(--t-med) var(--ease),background var(--t-fast)}}
.switch:checked:where(.ds,.ds *){background:var(--ok-soft);border-color:var(--ok-line)}
.switch:checked:where(.ds,.ds *)::after{transform:translateX(1rem);background:var(--ok)}
.switch.danger:checked:where(.ds,.ds *){background:var(--stop-soft);border-color:var(--stop-line)}
.switch.danger:checked:where(.ds,.ds *)::after{background:var(--stop)}
.table-wrap:where(.ds,.ds *){background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:auto;max-height:var(--table-max,none)}
.table:where(.ds,.ds *){width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.table:where(.ds,.ds *) th{position:sticky;top:0;z-index:1;text-align:left;font-size:var(--fs-2xs);font-weight:var(--fw-xb);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);background:var(--bg-2);padding:.55rem .8rem;white-space:nowrap;border-bottom:1px solid var(--line)}
.table:where(.ds,.ds *) th.sortable{cursor:pointer}
.table:where(.ds,.ds *) th.sortable:hover{color:var(--ink)}
.table:where(.ds,.ds *) th .icon{font-size:.75rem;vertical-align:-.1em}
.table:where(.ds,.ds *) td{padding:.55rem .8rem;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.table:where(.ds,.ds *) tr:last-child td{border-bottom:0}
@media (prefers-reduced-motion:no-preference){.table:where(.ds,.ds *) tbody tr{transition:background var(--t-fast)}}
.table:where(.ds,.ds *) tbody tr:hover{background:var(--hover)}
.table:where(.ds,.ds *) tbody tr.clickable{cursor:pointer}
.table:where(.ds,.ds *) tbody tr.selected{background:rgba(22,139,255,.08);box-shadow:inset 3px 0 0 var(--blue)}
.table-wrap:where(.ds,.ds *) > table > thead > tr > th:first-child,.table-wrap:where(.ds,.ds *) > table > tbody > tr > td:first-child{position:sticky;left:0}
.table-wrap:where(.ds,.ds *) > table > thead > tr > th:first-child{z-index:3}
.table-wrap:where(.ds,.ds *) > table > tbody > tr > td:first-child{z-index:1;background:var(--bg)}
.table-wrap:where(.ds,.ds *) > table > tbody > tr:hover > td:first-child{background:linear-gradient(var(--hover),var(--hover)),var(--bg)}
.table-wrap:where(.ds,.ds *) > table > tbody > tr.selected > td:first-child{background:linear-gradient(rgba(22,139,255,.08),rgba(22,139,255,.08)),var(--bg)}
.table-wrap:where(.ds,.ds *) td .pill,.table-wrap:where(.ds,.ds *) td .chip,.table-wrap:where(.ds,.ds *) td .badge,.table-wrap:where(.ds,.ds *) td .vchip{white-space:nowrap;max-width:none}
.table-wrap:where(.ds,.ds *)::-webkit-scrollbar{height:10px;width:10px}
.table-wrap:where(.ds,.ds *)::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px;border:2px solid var(--bg)}
.table-wrap:where(.ds,.ds *)::-webkit-scrollbar-track{background:var(--bg)}
.table:where(.ds,.ds *) td.primary{color:var(--ink);font-weight:600}
.table:where(.ds,.ds *) td.num,.table:where(.ds,.ds *) th.num{text-align:right;font-variant-numeric:tabular-nums}
.table:where(.ds,.ds *) td.actions{text-align:right;white-space:nowrap}
.table:where(.ds,.ds *) tr .row-actions{opacity:0}
@media (prefers-reduced-motion:no-preference){.table:where(.ds,.ds *) tr .row-actions{transition:opacity var(--t-fast)}}
.table:where(.ds,.ds *) tr:hover .row-actions,.table:where(.ds,.ds *) tr:focus-within .row-actions{opacity:1}
.table-toolbar:where(.ds,.ds *){display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}
.pager:where(.ds,.ds *){display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--ink-3)}
.rows:where(.ds,.ds *){background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.lrow:where(.ds,.ds *){display:flex;align-items:center;gap:var(--s-3);padding:.75rem var(--s-4);border-bottom:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){.lrow:where(.ds,.ds *){transition:background var(--t-fast)}}
.lrow:last-child:where(.ds,.ds *){border-bottom:0}
.lrow:hover:where(.ds,.ds *){background:var(--hover)}
.lrow.clickable:where(.ds,.ds *){cursor:pointer}
.lrow-main:where(.ds,.ds *){flex:1;min-width:0}
.lrow-title:where(.ds,.ds *){font-weight:600;font-size:var(--fs-md);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow-meta:where(.ds,.ds *){display:flex;flex-wrap:wrap;gap:.15rem .9rem;font-size:var(--fs-xs);color:var(--ink-3);margin-top:.1rem}
.lrow-meta:where(.ds,.ds *) b{color:var(--ink-2);font-weight:600}
.fold:where(.ds,.ds *){border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-deep)}
.fold:where(.ds,.ds *) + .fold{margin-top:.5rem}
.fold-btn:where(.ds,.ds *){all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;gap:.55rem;padding:.65rem .8rem;font-size:var(--fs-md);font-weight:600;border-radius:var(--r-md)}
.fold-btn:hover:where(.ds,.ds *){background:var(--hover)}
.fold-btn:focus-visible:where(.ds,.ds *){outline:2px solid var(--cyan);outline-offset:-2px}
.fold-btn:where(.ds,.ds *) > .icon:first-child{color:var(--ink-3)}
.fold-btn:where(.ds,.ds *) .sum{font-weight:500;color:var(--ink-3);font-size:var(--fs-sm)}
.fold-btn:where(.ds,.ds *) .caret{margin-left:auto;color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){.fold-btn:where(.ds,.ds *) .caret{transition:transform var(--t-med) var(--ease)}}
.fold-btn[aria-expanded="true"]:where(.ds,.ds *) .caret{transform:rotate(90deg)}
.collapse:where(.ds,.ds *){display:grid;grid-template-rows:0fr;opacity:0}
@media (prefers-reduced-motion:no-preference){.collapse:where(.ds,.ds *){transition:grid-template-rows var(--t-med) var(--ease),opacity var(--t-med) var(--ease)}}
.collapse:where(.ds,.ds *) > .collapse-inner{overflow:hidden;min-height:0}
.collapse.open:where(.ds,.ds *){grid-template-rows:1fr;opacity:1}
.fold:where(.ds,.ds *) .collapse-inner > div{padding:0 .9rem .8rem 2.3rem;font-size:var(--fs-sm);color:var(--ink-2)}
.more-link:where(.ds,.ds *){all:unset;cursor:pointer;color:var(--accent);font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:.25rem}
.more-link:hover:where(.ds,.ds *){text-decoration:underline}
.scrim:where(.ds,.ds *){position:fixed;inset:0;z-index:var(--z-scrim);background:rgba(3,9,18,.58);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.scrim:where(.ds,.ds *){transition:opacity var(--t-med) var(--ease)}}
.scrim.show:where(.ds,.ds *){opacity:1;pointer-events:auto}
.drawer:where(.ds,.ds *){position:fixed;z-index:var(--z-drawer);top:0;right:0;bottom:0;width:min(36rem,100vw);background:var(--bg);border-left:1px solid var(--line-strong);box-shadow:var(--shadow-modal);transform:translateX(102%);visibility:hidden;display:flex;flex-direction:column}
@media (prefers-reduced-motion:no-preference){.drawer:where(.ds,.ds *){transition:transform var(--t-slow) var(--ease-out),visibility 0s linear var(--t-slow)}}
.drawer.wide:where(.ds,.ds *){width:min(52rem,100vw)}
.drawer.show:where(.ds,.ds *){transform:none;visibility:visible}
@media (prefers-reduced-motion:no-preference){.drawer.show:where(.ds,.ds *){transition:transform var(--t-slow) var(--ease-out)}}
.drawer-head:where(.ds,.ds *){display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-5) var(--s-5) var(--s-4);border-bottom:1px solid var(--line)}
.drawer-head:where(.ds,.ds *) h2{font-size:1.05rem;line-height:1.4}
.drawer-body:where(.ds,.ds *){flex:1;overflow-y:auto;padding:var(--s-4) var(--s-5) var(--s-5)}
.drawer-foot:where(.ds,.ds *){border-top:1px solid var(--line);padding:var(--s-3) var(--s-5);background:var(--bg-deep);display:flex;gap:var(--s-2);justify-content:flex-end;flex-wrap:wrap}
.dsec:where(.ds,.ds *){margin-top:var(--s-5)}
.dsec:first-child:where(.ds,.ds *){margin-top:0}
.dsec:where(.ds,.ds *) h3{margin:0 0 .5rem;font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:.4rem}
.close-x:where(.ds,.ds *){margin-left:auto;flex:none;width:2.1rem;height:2.1rem;border-radius:8px;border:1px solid var(--line-2);background:none;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem}
@media (prefers-reduced-motion:no-preference){.close-x:where(.ds,.ds *){transition:background var(--t-fast),color var(--t-fast)}}
.close-x:hover:where(.ds,.ds *){background:var(--hover);color:var(--ink)}
.modal:where(.ds,.ds *){position:fixed;z-index:var(--z-modal);left:50%;top:50%;width:min(30rem,calc(100vw - 2rem));max-height:calc(100vh - 4rem);overflow:auto;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-modal);transform:translate(-50%,-46%) scale(.98);opacity:0;visibility:hidden}
@media (prefers-reduced-motion:no-preference){.modal:where(.ds,.ds *){transition:transform var(--t-med) var(--ease-out),opacity var(--t-med) var(--ease),visibility 0s linear var(--t-med)}}
.modal.show:where(.ds,.ds *){transform:translate(-50%,-50%);opacity:1;visibility:visible}
@media (prefers-reduced-motion:no-preference){.modal.show:where(.ds,.ds *){transition:transform var(--t-med) var(--ease-out),opacity var(--t-med) var(--ease)}}
.modal-head:where(.ds,.ds *){display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-5) var(--s-5) 0}
.modal-head:where(.ds,.ds *) h2{font-size:var(--fs-xl)}
.modal-body:where(.ds,.ds *){padding:var(--s-3) var(--s-5) var(--s-4);color:var(--ink-2);font-size:var(--fs-md)}
.modal-foot:where(.ds,.ds *){display:flex;gap:var(--s-2);justify-content:flex-end;padding:var(--s-3) var(--s-5) var(--s-5);flex-wrap:wrap}
.modal.danger:where(.ds,.ds *) .modal-head .ico-box{background:var(--stop-soft);color:var(--stop)}
.toasts:where(.ds,.ds *){position:fixed;z-index:var(--z-toast);left:50%;bottom:1.25rem;transform:translateX(-50%);display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 2rem)}
.toast:where(.ds,.ds *){pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:.7rem;padding:.65rem .85rem .65rem .75rem;background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-modal);font-size:var(--fs-md)}
@media (prefers-reduced-motion:no-preference){.toast:where(.ds,.ds *){animation:nw-toast-in var(--t-med) var(--ease-out)}}
.toast.out:where(.ds,.ds *){opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion:no-preference){.toast.out:where(.ds,.ds *){transition:opacity var(--t-med),transform var(--t-med)}}
.toast:where(.ds,.ds *) .ti{width:1.7rem;height:1.7rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--accent-soft);color:var(--accent)}
.toast.ok:where(.ds,.ds *) .ti{background:var(--ok-soft);color:var(--ok)}
.toast.warn:where(.ds,.ds *) .ti{background:var(--warn-soft);color:var(--warn)}
.toast.stop:where(.ds,.ds *) .ti{background:var(--stop-soft);color:var(--stop)}
.toast:where(.ds,.ds *) .t-act{all:unset;cursor:pointer;color:var(--accent);font-weight:var(--fw-b);padding:.1rem .35rem;border-radius:5px;margin-left:.2rem}
.toast:where(.ds,.ds *) .t-act:hover{text-decoration:underline}
.toast:where(.ds,.ds *) .t-act:focus-visible{outline:2px solid var(--cyan)}
.toast:where(.ds,.ds *) .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--cyan);width:100%;transform-origin:left}
@media (prefers-reduced-motion:no-preference){.toast:where(.ds,.ds *) .bar{animation:nw-drain var(--toast-ms,5000ms) linear forwards}}
[data-tip]:where(.ds,.ds *){position:relative}
[data-tip]:hover:where(.ds,.ds *)::after,[data-tip]:focus-visible:where(.ds,.ds *)::after{content:attr(data-tip);position:absolute;z-index:var(--z-tip);bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:16rem;white-space:normal;text-align:left;background:var(--bg-raised);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.4rem .6rem;font-size:var(--fs-xs);font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none;box-shadow:var(--shadow-pop);pointer-events:none}
@media (prefers-reduced-motion:no-preference){[data-tip]:hover:where(.ds,.ds *)::after,[data-tip]:focus-visible:where(.ds,.ds *)::after{animation:nw-fade var(--t-fast) var(--ease)}}
[data-tip-pos="end"]:hover:where(.ds,.ds *)::after,[data-tip-pos="end"]:focus-visible:where(.ds,.ds *)::after{left:auto;right:0;transform:none}
[data-tip-pos="below"]:hover:where(.ds,.ds *)::after,[data-tip-pos="below"]:focus-visible:where(.ds,.ds *)::after{bottom:auto;top:calc(100% + 8px)}
.empty:where(.ds,.ds *){display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s-7) var(--s-4);border:1px dashed var(--line-2);border-radius:var(--r-lg);background:rgba(11,29,48,.5)}
@media (prefers-reduced-motion:no-preference){.empty:where(.ds,.ds *){animation:nw-rise var(--t-slow) var(--ease)}}
.empty:where(.ds,.ds *) .ico-box{width:3.25rem;height:3.25rem;font-size:1.6rem;border-radius:16px;margin-bottom:var(--s-3)}
.empty:where(.ds,.ds *) h3{font-size:var(--fs-xl)}
.empty:where(.ds,.ds *) p{margin-top:.3rem;color:var(--ink-2);font-size:var(--fs-md);max-width:28rem}
.empty:where(.ds,.ds *) .btn-group{margin-top:var(--s-4)}
.skel:where(.ds,.ds *){position:relative;overflow:hidden;background:var(--bg-2);border-radius:var(--r-sm);min-height:.8rem}
.skel:where(.ds,.ds *)::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(100,180,255,.08),transparent)}
@media (prefers-reduced-motion:no-preference){.skel:where(.ds,.ds *)::after{animation:nw-shimmer 1.4s infinite}}
.skel.line:where(.ds,.ds *){height:.75rem;margin:.4rem 0}
.skel.line.short:where(.ds,.ds *){width:40%}
.skel.line.mid:where(.ds,.ds *){width:70%}
.skel.circle:where(.ds,.ds *){border-radius:50%;width:2.5rem;height:2.5rem}
.skel.block:where(.ds,.ds *){height:5rem;border-radius:var(--r-md)}
.spinner:where(.ds,.ds *){display:inline-block;width:1rem;height:1rem;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--cyan);vertical-align:-.15em}
@media (prefers-reduced-motion:no-preference){.spinner:where(.ds,.ds *){animation:nw-spin .7s linear infinite}}
.meter:where(.ds,.ds *){display:flex;flex-direction:column;gap:.3rem}
.meter-top:where(.ds,.ds *){display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-xs);color:var(--ink-2)}
.meter-top:where(.ds,.ds *) b{color:var(--ink);font-variant-numeric:tabular-nums}
.bar-track:where(.ds,.ds *){height:6px;border-radius:var(--r-pill);background:var(--bg-3);overflow:hidden}
.bar-track.thin:where(.ds,.ds *){height:4px}
.bar-track.thick:where(.ds,.ds *){height:10px}
.bar-fill:where(.ds,.ds *){height:100%;width:var(--v,0%);border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan))}
@media (prefers-reduced-motion:no-preference){.bar-fill:where(.ds,.ds *){transition:width var(--t-slow) var(--ease-out)}}
.bar-fill.ok:where(.ds,.ds *){background:var(--ok)}
.bar-fill.warn:where(.ds,.ds *){background:var(--warn)}
.bar-fill.stop:where(.ds,.ds *){background:var(--stop)}
.bar-track.indeterminate:where(.ds,.ds *) .bar-fill{width:35%}
@media (prefers-reduced-motion:no-preference){.bar-track.indeterminate:where(.ds,.ds *) .bar-fill{animation:nw-indet 1.2s var(--ease) infinite}}
.stacked:where(.ds,.ds *){display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--bg-3);gap:2px}
.stacked:where(.ds,.ds *) > span{height:100%;width:var(--v)}
.ring:where(.ds,.ds *){--v:0;width:3rem;height:3rem;border-radius:50%;display:inline-grid;place-items:center;background:conic-gradient(var(--ring-c,var(--cyan)) calc(var(--v)*1%),var(--bg-3) 0);font-size:var(--fs-xs);font-weight:var(--fw-xb);font-variant-numeric:tabular-nums;position:relative}
.ring:where(.ds,.ds *)::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg)}
.ring:where(.ds,.ds *) > span{position:relative}
.steps:where(.ds,.ds *){display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;font-size:var(--fs-xs)}
.steps:where(.ds,.ds *) li{display:flex;align-items:center;gap:.35rem;color:var(--ink-3)}
.steps:where(.ds,.ds *) li + li::before{content:"";width:1.4rem;height:2px;background:var(--line-2);margin:0 .35rem}
.steps:where(.ds,.ds *) li.done{color:var(--ok)}
.steps:where(.ds,.ds *) li.done + li::before{background:var(--ok-line)}
.steps:where(.ds,.ds *) li.now{color:var(--accent);font-weight:var(--fw-b)}
.spark:where(.ds,.ds *){display:inline-block;width:var(--w,96px);height:var(--h,28px);overflow:visible}
.spark:where(.ds,.ds *) path.line{fill:none;stroke:var(--spark-c,var(--cyan));stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.spark:where(.ds,.ds *) path.area{fill:var(--spark-c,var(--cyan));opacity:.12;stroke:none}
.spark:where(.ds,.ds *) circle{fill:var(--spark-c,var(--cyan))}
.spark.draw:where(.ds,.ds *) path.line{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
@media (prefers-reduced-motion:no-preference){.spark.draw:where(.ds,.ds *) path.line{animation:nw-draw var(--t-slow) var(--ease-out) forwards}}
.bars-mini:where(.ds,.ds *){display:inline-flex;align-items:flex-end;gap:2px;height:28px}
.bars-mini:where(.ds,.ds *) > i{width:5px;border-radius:2px 2px 0 0;background:var(--accent);opacity:.75;height:var(--v)}
.timeline:where(.ds,.ds *){list-style:none;margin:0;padding:0;position:relative}
.timeline:where(.ds,.ds *)::before{content:"";position:absolute;left:.95rem;top:.5rem;bottom:.5rem;width:2px;background:var(--line)}
.tl-item:where(.ds,.ds *){position:relative;display:flex;gap:var(--s-3);padding:.35rem 0 .85rem}
.tl-ico:where(.ds,.ds *){position:relative;z-index:1;width:1.9rem;height:1.9rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;flex:none;background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line-2);box-shadow:0 0 0 3px var(--bg)}
.tl-item.ok:where(.ds,.ds *) .tl-ico{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.tl-item.warn:where(.ds,.ds *) .tl-ico{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.tl-item.stop:where(.ds,.ds *) .tl-ico{background:var(--stop-soft);color:var(--stop);border-color:var(--stop-line)}
.tl-item.ai:where(.ds,.ds *) .tl-ico{background:var(--ai-soft);color:var(--ai);border-color:var(--ai-line)}
.tl-item.info:where(.ds,.ds *) .tl-ico{background:var(--accent-soft);color:var(--accent);border-color:var(--line-2)}
.tl-body:where(.ds,.ds *){flex:1;min-width:0;padding-top:.2rem}
.tl-title:where(.ds,.ds *){font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.tl-title:where(.ds,.ds *) b{color:var(--accent);font-weight:600}
.tl-meta:where(.ds,.ds *){font-size:var(--fs-xs);color:var(--ink-3);display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.05rem}
@media (prefers-reduced-motion:no-preference){.tl-item.new:where(.ds,.ds *){animation:nw-rise var(--t-slow) var(--ease-out)}}
.callout:where(.ds,.ds *){display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .8rem;border-radius:10px;font-size:var(--fs-sm);background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink-2)}
.callout:where(.ds,.ds *) > .icon{font-size:1.05rem;flex:none;margin-top:.1rem;color:var(--accent)}
.callout.ok:where(.ds,.ds *){background:var(--ok-soft);border-color:var(--ok-line)}
.callout.ok:where(.ds,.ds *) > .icon{color:var(--ok)}
.callout.warn:where(.ds,.ds *){background:var(--warn-soft);border-color:var(--warn-line)}
.callout.warn:where(.ds,.ds *) > .icon{color:var(--warn)}
.callout.stop:where(.ds,.ds *){background:var(--stop-soft);border-color:var(--stop-line)}
.callout.stop:where(.ds,.ds *) > .icon{color:var(--stop)}
.callout.ai:where(.ds,.ds *){background:rgba(155,107,255,.09);border:1px dashed var(--ai-line)}
.callout.ai:where(.ds,.ds *) > .icon{color:var(--ai)}
.callout:where(.ds,.ds *) b{color:var(--ink)}
.ai-tag:where(.ds,.ds *){font-size:.6rem;font-weight:var(--fw-xb);letter-spacing:.07em;text-transform:uppercase;color:var(--ai);background:var(--ai-soft);border-radius:var(--r-pill);padding:.05rem .45rem}
.menu:where(.ds,.ds *){position:absolute;z-index:var(--z-tip);min-width:12rem;padding:.3rem;background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow-pop)}
@media (prefers-reduced-motion:no-preference){.menu:where(.ds,.ds *){animation:nw-pop var(--t-fast) var(--ease-out)}}
.menu[hidden]:where(.ds,.ds *){display:none}
.menu:where(.ds,.ds *) button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:.55rem;padding:.45rem .6rem;border-radius:6px;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.menu:where(.ds,.ds *) button:hover,.menu:where(.ds,.ds *) button:focus-visible{background:var(--hover);color:var(--ink);outline:none}
.menu:where(.ds,.ds *) button.danger{color:var(--stop)}
.menu:where(.ds,.ds *) hr{border:0;border-top:1px solid var(--line);margin:.3rem 0}
@media (prefers-reduced-motion:no-preference){.anim-fade:where(.ds,.ds *){animation:nw-fade var(--t-med) var(--ease) both}}
@media (prefers-reduced-motion:no-preference){.anim-rise:where(.ds,.ds *){animation:nw-rise var(--t-med) var(--ease-out) both}}
@media (prefers-reduced-motion:no-preference){.anim-slide-r:where(.ds,.ds *){animation:nw-slide-r var(--t-med) var(--ease-out) both}}
@media (prefers-reduced-motion:no-preference){.anim-pop:where(.ds,.ds *){animation:nw-pop var(--t-fast) var(--ease-out) both}}
@media (prefers-reduced-motion:no-preference){.stagger:where(.ds,.ds *) > *{animation:nw-rise var(--t-med) var(--ease-out) both}}
@media (prefers-reduced-motion:no-preference){.stagger:where(.ds,.ds *) > *:nth-child(2){animation-delay:30ms}}
@media (prefers-reduced-motion:no-preference){.stagger:where(.ds,.ds *) > *:nth-child(3){animation-delay:60ms}}
@media (prefers-reduced-motion:no-preference){.stagger:where(.ds,.ds *) > *:nth-child(4){animation-delay:90ms}}
@media (prefers-reduced-motion:no-preference){.stagger:where(.ds,.ds *) > *:nth-child(5){animation-delay:120ms}}
@media (prefers-reduced-motion:no-preference){.stagger:where(.ds,.ds *) > *:nth-child(6){animation-delay:150ms}}
@media (prefers-reduced-motion:no-preference){.stagger:where(.ds,.ds *) > *:nth-child(n+7){animation-delay:180ms}}
.leaving:where(.ds,.ds *){opacity:0!important;transform:translateX(24px)!important}
@media (prefers-reduced-motion:no-preference){.leaving:where(.ds,.ds *){transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)!important}}
@media (prefers-reduced-motion:no-preference){.flash:where(.ds,.ds *){animation:nw-flash var(--t-slow) var(--ease)}}
.tick-up:where(.ds,.ds *){display:inline-block}
@media (prefers-reduced-motion:no-preference){.tick-up:where(.ds,.ds *){animation:nw-tick-up var(--t-med) var(--ease)}}
.tick-down:where(.ds,.ds *){display:inline-block}
@media (prefers-reduced-motion:no-preference){.tick-down:where(.ds,.ds *){animation:nw-tick-down var(--t-med) var(--ease)}}
.pulse-ring:where(.ds,.ds *){position:relative}
.pulse-ring:where(.ds,.ds *)::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--stop)}
@media (prefers-reduced-motion:no-preference){.pulse-ring:where(.ds,.ds *)::after{animation:nw-ring 1.8s var(--ease) infinite}}
@media (prefers-reduced-motion:no-preference){.hover-lift:where(.ds,.ds *){transition:transform var(--t-fast),border-color var(--t-fast)}}
.hover-lift:hover:where(.ds,.ds *){transform:translateY(-1px)}
@keyframes nw-fade{from{opacity:0}to{opacity:1}}
@keyframes nw-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes nw-slide-r{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes nw-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes nw-toast-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes nw-drain{to{transform:scaleX(0)}}
@keyframes nw-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes nw-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@keyframes nw-spin{to{transform:rotate(360deg)}}
@keyframes nw-shimmer{to{transform:translateX(100%)}}
@keyframes nw-indet{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes nw-nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes nw-flash{0%{background:rgba(32,214,234,.18)}100%{background:transparent}}
@keyframes nw-tick-up{from{transform:translateY(35%);opacity:0}to{transform:none;opacity:1}}
@keyframes nw-tick-down{from{transform:translateY(-35%);opacity:0}to{transform:none;opacity:1}}
@keyframes nw-draw{to{stroke-dashoffset:0}}
@media (max-width:52rem){
.grid-2:where(.ds,.ds *),.grid-3:where(.ds,.ds *){grid-template-columns:1fr}
.card-pad:where(.ds,.ds *){padding:var(--s-4)}
.card-head:where(.ds,.ds *),.card-body:where(.ds,.ds *){padding-left:var(--s-4);padding-right:var(--s-4)}
}
@media (max-width:36rem){
.tiles:where(.ds,.ds *){grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.tile:where(.ds,.ds *){padding:var(--s-3);min-width:0}
.tile-hint:where(.ds,.ds *){white-space:normal}
.tile-value:where(.ds,.ds *){font-size:1.3rem}
.tile:where(.ds,.ds *) .spark{display:none}
.drawer:where(.ds,.ds *),.drawer.wide:where(.ds,.ds *){width:100vw;border-left:0}
.page-actions:where(.ds,.ds *){width:100%}
.page-actions:where(.ds,.ds *) .btn{flex:1}
.page-actions:where(.ds,.ds *) .btn.icon-only{flex:0 0 auto}
.seg:where(.ds,.ds *){max-width:100%;overflow-x:auto;scrollbar-width:none}
.table:where(.ds,.ds *) .hide-sm{display:none}
}
/* #990 redesign: the frame */
.ctl{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-b);line-height:1.5;padding:.18rem .5rem .18rem .6rem;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--bg-2);color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none}
.ctl:hover,.ctl[aria-expanded=true]{border-color:var(--blue);background:var(--bg-3);color:var(--ink);text-decoration:none}
.ctl:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ctl .icon{font-size:.9rem}
.ctl.ok .icon{color:var(--ok)}
.ctl.warn .icon{color:var(--warn)}
.ctl.stop .icon{color:var(--stop)}
.ctl.crit .icon{color:var(--crit)}
.ctl.info .icon{color:var(--info)}
.ctl.ai .icon{color:var(--ai)}
.ctl-dot{width:.5rem;height:.5rem;border-radius:50%;flex:none;background:var(--ink-3)}
.ctl-dot.ok{background:var(--ok)}
.ctl-dot.warn{background:var(--warn)}
.ctl-dot.stop{background:var(--stop)}
.ctl-dot.crit{background:var(--crit)}
.ctl-dot.info{background:var(--info)}
.ctl-dot.ai{background:var(--ai)}
.ctl-dot.idle{background:var(--ink-3)}
.ctl-caret{display:inline-block;width:0;height:0;flex:none;border-left:.25rem solid transparent;border-right:.25rem solid transparent;border-top:.3rem solid currentColor}
.topbar{position:sticky;top:0;z-index:var(--z-top);background:rgba(11,29,48,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar-inner.ds{min-height:var(--top-h);padding:.45rem var(--s-5);display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:var(--s-3) var(--s-4)}
.topbar .brand{flex:none;display:flex;align-items:center;gap:.6rem;color:inherit;text-decoration:none;min-width:0}
.topbar .brand-mark{width:24px;height:24px;flex:none}
.topbar .brand-word{font-size:var(--fs-lg);font-weight:var(--fw-xb);letter-spacing:.2em;color:var(--ink)}
.topbar .brand-divider{width:1px;height:1.1rem;background:var(--line-strong);flex:none}
.topbar .brand-tagline{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;color:var(--ink-2);white-space:nowrap}
.topbar .tenant-chip{display:inline-flex;align-items:center;gap:.35rem;margin-left:0}
.topbar .tenant-chip{flex:none}
.gsearch-btn{min-width:9rem}
.gsearch-btn kbd{flex:none;white-space:nowrap}
@media (max-width:90rem){
.topbar .brand-divider,.topbar .brand-tagline{display:none}
}
@media (max-width:80rem){
.gsearch-btn kbd{display:none}
}
.topbar .tenant-chip[hidden]{display:none}
.rail-btn{flex:none}
.top-actions{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;flex:none;min-width:0}
@media (max-width:90rem){
.topbar .brand-divider,.topbar .brand-tagline{display:none}
.topbar .tenant-chip{max-width:10rem;overflow:hidden;text-overflow:ellipsis}
}
.top-actions[hidden]{display:none}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;padding:0;border-radius:9px;border:1px solid transparent;background:none;color:var(--ink-2);cursor:pointer;font-size:1.1rem}
@media (prefers-reduced-motion:no-preference){.icon-btn{transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}}
.icon-btn:hover{background:var(--hover);color:var(--ink);border-color:var(--line)}
.icon-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.icon-btn .dot-badge{position:absolute;top:4px;right:3px;min-width:1rem;height:1rem;padding:0 .25rem;border-radius:999px;background:var(--stop);color:var(--ink-inverse);font:700 .58rem/1rem var(--ui);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.icon-btn .dot-badge[hidden]{display:none}
.gsearch-btn{flex:1 1 20rem;max-width:34rem;min-width:9rem;margin:0 auto;height:2.3rem;display:flex;align-items:center;gap:.55rem;padding:0 .55rem 0 .75rem;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;color:var(--ink-3);font:inherit;font-size:var(--fs-md);cursor:text;text-align:left}
@media (prefers-reduced-motion:no-preference){.gsearch-btn{transition:border-color var(--t-fast),background var(--t-fast)}}
.gsearch-btn[hidden]{display:none}
.gsearch-btn:hover{border-color:var(--line-2);color:var(--ink-2)}
.gsearch-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.gsearch-btn .icon{font-size:1rem;flex:none}
.gsearch-btn .ph{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gsearch-btn kbd{flex:none;white-space:nowrap}
@media (max-width:90rem){
.gsearch-btn kbd{display:none}
}
@media (max-width:82rem){
.gsearch-btn{flex:0 0 2.3rem;width:2.3rem;min-width:2.3rem;justify-content:center;padding:0;margin:0}
.gsearch-btn .ph{display:none}
}
@media (max-width:100rem){
.topbar .user-menu>summary .id-name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (max-width:100rem){
.topbar .health-short{max-width:9rem}
}
.topbar #health-summary{display:inline-flex;align-items:center;gap:0;height:2.05rem;padding:0 .2rem 0 .7rem;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--bg-2);color:var(--ink);font-size:var(--fs-xs);font-weight:650;white-space:nowrap}
.topbar #health-summary:hover,.topbar #health-summary:focus-within,.topbar #health-summary:has(.health-more[open]){border-color:var(--blue);background:var(--bg-3)}
.topbar #health-summary:empty{display:none}
.topbar .health-face{color:inherit;text-decoration:none;gap:.45rem}
.topbar .health-face:hover{text-decoration:underline}
.topbar .health-dot{position:relative;width:8px;height:8px}
.topbar .health-dot.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit}
@media (prefers-reduced-motion:no-preference){.topbar .health-dot.live::after{animation:nw-pulse 1.8s var(--ease) infinite}}
.topbar .health-more>summary{min-height:2rem;padding:0 .35rem;border-radius:999px;color:inherit}
.topbar .health-pop{right:0;min-width:17rem;background:var(--bg-raised);border-color:var(--line-strong);border-radius:12px;box-shadow:var(--shadow-pop);padding:.75rem .85rem}
.topbar .health-pop a{color:var(--accent)}
.topbar .health-open{display:inline-flex;align-items:center;gap:.35rem;font-weight:650}
.nw-bell{position:relative}
.nw-bell[hidden]{display:none}
.nw-pop{position:absolute;top:calc(100% + .4rem);right:0;z-index:var(--z-tip);width:min(22rem,calc(100vw - 1.5rem));padding:.4rem;background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-pop)}
.nw-pop[hidden]{display:none}
.nw-pop .m-sec{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .6rem .3rem;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.nw-pop .need{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem .6rem;border-radius:8px;color:var(--ink-2);text-decoration:none}
.nw-pop .need:hover,.nw-pop .need:focus-visible{background:var(--hover);color:var(--ink);text-decoration:none}
.nw-pop .need .t{display:block;color:var(--ink);font-weight:600;font-size:var(--fs-sm)}
.nw-pop .need .s{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.nw-pop .m-note{padding:.4rem .6rem .55rem;font-size:var(--fs-xs);color:var(--ink-2);margin:0}
.topbar .auth-status{gap:var(--s-2);font-size:var(--fs-sm)}
.topbar .user-menu>summary.id-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.15rem .6rem .15rem .15rem;border:1px solid var(--line);border-radius:999px;background:rgba(14,36,58,.7);white-space:nowrap}
.topbar .user-menu>summary.id-chip:hover{border-color:var(--line-2)}
.topbar .user-menu.elevated>summary.id-chip{border-color:var(--warn-line)}
.av-ring{--p:0;position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;background:transparent}
.user-menu.elevated .av-ring{background:conic-gradient(var(--warn) calc(var(--p) * 1%),var(--line) 0)}
.user-menu.ending .av-ring{background:conic-gradient(var(--stop) calc(var(--p) * 1%),var(--line) 0)}
.av-ring .id-avatar{width:26px;height:26px;font-size:var(--fs-2xs)}
.topbar .role-pill-chip{font-size:var(--fs-2xs);font-weight:var(--fw-xb);letter-spacing:.05em;text-transform:uppercase;padding:.08rem .5rem;border-radius:999px;margin:0;line-height:1.6}
.elev-time{font:700 var(--fs-2xs)/1 var(--mono);color:var(--warn);letter-spacing:.02em}
.user-menu.ending .elev-time{color:var(--stop)}
.topbar .user-menu-list{background:var(--bg-raised);border-color:var(--line-strong);border-radius:12px;box-shadow:var(--shadow-pop);min-width:18rem}
.user-menu-head{display:flex;gap:.65rem;align-items:center;padding:.3rem .2rem .5rem}
.user-menu-head .id-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;font-size:var(--fs-sm)}
.user-menu-head b{display:block;color:var(--ink);font-size:var(--fs-md)}
.user-menu-head span{display:block;font-size:var(--fs-xs);color:var(--ink-3);overflow-wrap:anywhere}
.user-menu-item.danger{color:var(--stop)}
.user-menu-item .icon{flex:none}
.user-menu-item.with-icon{justify-content:flex-start;gap:.55rem}
.rail{display:flex;flex-direction:column;padding:.6rem .5rem .75rem}
.rail .rail-list{gap:.1rem}
.rail .rail-sec{margin:0}
.rail .rail-group{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-xb);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:.85rem .7rem .3rem}
.rail .rail-sec:first-child .rail-group{padding-top:.35rem}
.rail .rail-sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.rail .rail-sub>li{margin:0;padding:0}
.rail a{min-height:2.45rem}
@media (prefers-reduced-motion:no-preference){.rail a{transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}}
@media (prefers-reduced-motion:no-preference){.rail a .icon{transition:transform var(--t-fast)}}
.rail a:hover .icon{transform:scale(1.08)}
.rail-badge{margin-left:auto;min-width:1.4rem;padding:0 .4rem;border-radius:999px;background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line);font-size:var(--fs-2xs);font-weight:var(--fw-xb);text-align:center;line-height:1.55;font-variant-numeric:tabular-nums}
.rail-badge.stop{background:var(--stop-soft);color:var(--stop);border-color:var(--stop-line)}
.rail-badge[hidden]{display:none}
.rail .rail-count{font-size:var(--fs-2xs);min-width:1.4rem;line-height:1.55}
@media (prefers-reduced-motion:no-preference){.rail-badge.bump{animation:nw-pop var(--t-slow) var(--ease-out)}}
.rail-foot.ds{margin-top:auto;padding:.75rem .65rem 0;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-3);display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0}
.rail-foot .rf-row{display:flex;align-items:center;gap:.45rem;min-width:0;max-width:100%}
.rail-foot #refresh-indicator{min-width:0;overflow-wrap:anywhere;text-align:left;font-size:var(--fs-xs)}
.rail-foot #refresh-indicator.stale{color:var(--warn)}
.rail-foot .rf-frozen{color:var(--ink-3)}
.refresh-alert{display:none;margin:0 0 var(--s-3);padding:.4rem .7rem;border:1px solid var(--warn-line);border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:var(--fs-xs);overflow-wrap:anywhere}
.refresh-alert[hidden]{display:none!important}
@media (max-width:72rem){
.refresh-alert{display:block}
}
@media (min-width:72rem){
body.rail-min .refresh-alert{display:block}
}
.rail-sep{display:none;height:1px;background:var(--line);margin:.5rem .4rem}
.rail-short{display:none}
@media (min-width:72rem){
:root{--rail-width:13rem}
.rail a{gap:.65rem;padding:0 .65rem}
body.rail-min{--rail-width:5.5rem}
body.rail-min .rail{padding-left:.2rem;padding-right:.2rem}
body.rail-min .rail .rail-sec+.rail-sec{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.35rem}
body.rail-min .rail a{flex-direction:column;justify-content:center;gap:.2rem;padding:.4rem 0;min-height:3.35rem}
body.rail-min .rail-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:var(--fs-2xs);font-weight:650;line-height:1.15}
body.rail-min .rail-label.has-short{display:none}
body.rail-min .rail-short{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:var(--fs-2xs);font-weight:650;line-height:1.15}
body.rail-min .rail .rail-group,body.rail-min .rail-foot .rf-text{display:none}
body.rail-min .rail-badge,body.rail-min .rail-count{position:absolute;top:.2rem;left:calc(50% + .3rem);right:auto;margin:0;min-width:1.1rem;font-size:.58rem;padding:0 .2rem}
body.rail-min .rail-sep{display:block}
body.rail-min .rail-foot.ds{align-items:center}
}
@media (max-width:72rem) and (min-width:36.0625rem){
.rail .rail-group{display:none}
.rail .rail-sec+.rail-sec{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.35rem}
:root{--rail-width:5.5rem}
.rail{padding-left:.2rem;padding-right:.2rem}
.rail a{flex-direction:column;justify-content:center;gap:.2rem;padding:.4rem 0;min-height:3.35rem}
.rail-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:var(--fs-2xs);font-weight:650;line-height:1.15}
.rail-label.has-short{display:none}
.rail-short{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:var(--fs-2xs);font-weight:650;line-height:1.15}
.rail a:hover::after,.rail a:focus-visible::after{content:none}
.rail-badge,.rail .rail-count{position:absolute;top:.2rem;left:calc(50% + .3rem);right:auto;margin:0;min-width:1.1rem;font-size:.58rem;padding:0 .2rem}
.rail-foot .rf-text{display:none}
.rail-foot.ds{align-items:center;padding-left:0;padding-right:0}
.rail-btn{display:none}
.topbar .brand-divider,.topbar .brand-tagline{display:none}
}
@media (max-width:80rem){
.topbar .tenant-chip{display:none}
}
@media (max-width:64rem){
.topbar .health-short{display:none}
}
@media (max-width:36rem){
.topbar-inner.ds{padding:.4rem var(--s-3);gap:var(--s-2)}
.topbar .brand-word,.rail-btn,#keys-btn{display:none}
.gsearch-btn kbd{display:none}
.top-actions{gap:.15rem}
.topbar .user-menu>summary .id-name,.topbar .user-menu>summary .role-pill-chip{display:none}
.btabbar.ds{display:grid}
.shell{padding-bottom:4.4rem}
.rail .rail-group{display:block}
.rail-badge{position:static}
}
.btabbar.ds{display:none;grid-template-columns:repeat(5,1fr);position:fixed;z-index:var(--z-nav);left:0;right:0;bottom:0;height:3.6rem;background:var(--bg-deep);border-top:1px solid var(--line-2);padding-bottom:env(safe-area-inset-bottom)}
.btabbar a,.btabbar button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;font-size:.62rem;font-weight:650;color:var(--ink-3);position:relative;text-align:center}
.btabbar .icon{font-size:1.25rem}
.btabbar [aria-current="page"],.btabbar [aria-current="true"]{color:var(--accent)}
.btabbar [aria-current="page"]::before,.btabbar [aria-current="true"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;background:var(--cyan);border-radius:2px}
.btabbar a:focus-visible,.btabbar button:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.btabbar .bb{position:absolute;top:.3rem;left:calc(50% + .35rem);min-width:1rem;padding:0 .25rem;border-radius:999px;font-size:.55rem;line-height:1.45;text-align:center;background:var(--stop-soft);color:var(--stop);border:1px solid var(--stop-line)}
.btabbar .bb.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.btabbar .bb[hidden]{display:none}
.main-col{max-width:none}
.banner-strip.ds{margin:0 0 var(--s-3);border:1px solid var(--line);border-radius:12px;background:var(--bg-deep);overflow:visible;align-items:center}
.banner-strip.ds>.banner-synthetic{background:none;border:0;box-shadow:none;color:var(--ink-2);font-size:var(--fs-xs)}
.banner-strip.ds>.banner-dispatch{border-left:1px solid var(--line)}
.banner-strip.ds>.banner-dispatch{flex:1 1 32rem;min-width:min(32rem,100%)}
.banner-strip.ds .banner-dispatch #auto-dispatch-banner{overflow-wrap:break-word;word-break:normal}
.banner-strip.ds .banner-inner{padding:.35rem .6rem;gap:.5rem}
.banner-strip.ds>.banner-dispatch .banner-inner{flex-wrap:wrap}
.banner-strip.ds>.banner-dispatch .banner-detail{flex:1 1 12rem}
.banner-strip.ds>.banner-dispatch #auto-dispatch-banner{overflow-wrap:break-word}
.banner-chip{flex:none;padding:.12rem .55rem}
.banner-chip.mode{color:var(--synthetic);border-color:rgba(196,166,255,.45);background:var(--synthetic-soft)}
.banner-chip.dispatch[data-tone="ok"]{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.banner-chip.dispatch[data-tone="warn"]{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.banner-chip.dispatch[data-tone="unknown"]{color:var(--ink-2)}
.banner-chip .banner-dot{width:7px;height:7px;box-shadow:none}
.banner-chip.dispatch .banner-dot{background:currentColor}
.banner-strip.ds .banner-detail-body{padding:.4rem 0 .2rem;color:var(--ink-2);font-size:var(--fs-xs);line-height:1.6}
.breadcrumb.ds{display:flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:.35rem}
.breadcrumb.ds .icon{font-size:.8rem}
main.ds>.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;font-size:var(--fs-xs);color:var(--ink-3)}
main.ds>.breadcrumb .icon{font-size:.8rem}
.page-head.ds{margin-bottom:var(--s-3)}
.page-head.ds .page-head-main{min-width:0}
.page-head.ds .page-title-row{display:flex;align-items:center;gap:.6rem}
.page-head.ds .page-title-icon{display:inline-flex;color:var(--cyan);font-size:1.3rem}
.page-head.ds h1.page-title{margin:0;font-size:var(--fs-2xl);font-weight:var(--fw-xb);letter-spacing:-.01em}
.page-head.ds .page-lede{margin:.2rem 0 0;color:var(--ink-2);font-size:var(--fs-md)}
.page-head.ds .page-lede:empty{display:none}
.page-head.ds .page-actions:empty{display:none}
.health-tabs{position:relative}
.health-tabs a{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:var(--fs-md);border-radius:6px 6px 0 0}
@media (prefers-reduced-motion:no-preference){.health-tabs a{transition:color var(--t-fast),background var(--t-fast)}}
.health-tabs a:hover{background:var(--hover)}
.health-tabs.inked a[aria-current=page]{border-bottom-color:transparent}
.health-tabs .tab-ink{position:absolute;bottom:0;left:0;height:2px;width:0;background:var(--cyan);border-radius:2px;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.health-tabs .tab-ink{transition:transform var(--t-med) var(--ease),width var(--t-med) var(--ease)}}
.wc.ds{position:relative;z-index:var(--z-fab);display:inline-flex;flex-direction:column;align-items:flex-end;flex:none}
.wc.ds[hidden]{display:none}
.page-actions .wc.ds{margin-left:auto}
.page-actions .wc .btn{flex:none}
.fab{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;background:var(--bg-raised);border:1px solid var(--line-strong);font-size:var(--fs-sm);font-weight:650;color:var(--ink);white-space:nowrap}
.fab:hover{border-color:var(--cyan)}
.fab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.fab .caret{transition:transform var(--t-med) var(--ease)}}
.fab[aria-expanded="true"] .caret{transform:rotate(180deg)}
.pop-panel{position:absolute;top:calc(100% + .5rem);right:0;width:min(23rem,calc(100vw - 2rem));background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--shadow-modal);padding:1rem;text-align:left}
.pop-panel[hidden]{display:none}
.pop-panel h3{font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:.15rem 0 .45rem}
.pop-panel .wc-body{font-size:var(--fs-sm);color:var(--ink-2);max-height:60vh;overflow:auto;line-height:1.5}
.pop-panel .wc-foot{display:flex;justify-content:flex-end;margin-top:.6rem}
.gsearch.palette{position:fixed;z-index:var(--z-modal);left:50%;top:10px;transform:translateX(-50%);width:min(44rem,calc(100vw - 1.5rem));max-width:none;max-height:min(38rem,calc(100vh - 2rem));display:flex;flex-direction:column;overflow:hidden;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-modal)}
@media (prefers-reduced-motion:no-preference){.gsearch.palette{animation:nw-pop var(--t-fast) var(--ease-out)}}
.gsearch.palette[hidden],.gsearch.palette:not(.expanded){display:none}
.gsearch.palette .gsearch-box{display:flex;flex-direction:column;align-items:stretch;min-height:0;flex:1}
.gsearch.palette .pal-in{flex:none;position:relative;display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.gsearch.palette .gsearch-icon{position:static;transform:none;color:var(--cyan);font-size:1.15rem}
.gsearch.palette .gsearch-input{flex:1;min-width:0;height:auto;padding:0;background:none;border:0;outline:none;box-shadow:none;font-size:1.02rem;color:var(--ink)}
.gsearch.palette .gsearch-input:focus{box-shadow:none;border:0}
.gsearch.palette .gsearch-kbd{position:static;transform:none;pointer-events:auto;cursor:pointer;background:var(--bg-2)}
.gsearch.palette .gsearch-input:focus~.gsearch-kbd{display:inline-block}
.gsearch.palette .gsearch-pop{position:static;min-width:0;max-height:none;flex:1;overflow-y:auto;background:none;border:0;border-radius:0;box-shadow:none;padding:.35rem .4rem .5rem;min-height:8rem}
.gsearch.palette .gsearch-pop[hidden]{display:flex}
.pal-scopes{flex:none;display:flex;gap:.35rem;padding:.55rem 1rem;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pal-scopes:empty{display:none}
.scope{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);font-weight:600;padding:.25rem .65rem;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.scope{transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}}
.scope:hover{background:var(--hover);color:var(--ink)}
.scope[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--blue);color:var(--ink)}
.scope:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.scope .n{color:var(--ink-3);font-variant-numeric:tabular-nums}
.gsearch.palette .gsearch-head{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;color:var(--ink-3);padding:.65rem .6rem .25rem}
.gsearch.palette .gsearch-option{align-items:center;gap:.7rem;padding:.45rem .6rem;border-radius:9px;border:0;color:var(--ink-2)}
.gsearch.palette .gsearch-option.active{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--cyan)}
.gsearch.palette .gsearch-kind{width:2rem;height:2rem;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);margin:0;font-size:.95rem}
.gsearch.palette .gsearch-kind .icon{width:1em;height:1em}
.gsearch.palette .gsearch-option[data-kind="action"] .gsearch-kind{background:var(--cyan-soft);color:var(--cyan)}
.gsearch.palette .gsearch-option[data-kind="page"] .gsearch-kind{background:var(--idle-soft);color:var(--ink-2)}
.gsearch.palette .gsearch-label{color:var(--ink);font-size:var(--fs-md)}
.gsearch.palette .gsearch-state{padding:1.2rem 1rem;text-align:center}
.gsearch.palette .gsearch-events{display:flex;align-items:center;gap:.5rem;margin:.3rem .2rem 0;padding:.5rem .6rem;border-top:1px dashed var(--line)}
.pal-foot{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:.55rem 1rem;border-top:1px solid var(--line);background:var(--bg-deep);font-size:var(--fs-xs);color:var(--ink-3)}
.pal-foot span{display:inline-flex;gap:.3rem;align-items:center}
.pal-foot .r{margin-left:auto}
@media (max-width:36rem){
.pal-foot .opt{display:none}
}
.nw-scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:rgba(3,9,18,.58)}
.nw-scrim[hidden]{display:none}
.keys-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem 1.5rem}
.keys-grid h3{font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .4rem}
.keys-grid dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.35rem .75rem;font-size:var(--fs-sm)}
.keys-grid dt{color:var(--ink-2)}
.keys-grid dd{margin:0;text-align:right;white-space:nowrap}
.keys-grid kbd+kbd{margin-left:.2rem}
.modal.keys{width:min(46rem,calc(100vw - 1.5rem))}
body.session-frozen .main-col{filter:saturate(.75)}
.auth-page .si-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:var(--auth-sp5);list-style:none;padding:0}
.auth-page .ck{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .4rem;border:1px solid var(--line);border-radius:12px;background:var(--bg-deep);font-size:var(--fs-xs);color:var(--ink-2);text-align:center;line-height:1.3}
.auth-page .ck .ck-ico{width:1.9rem;height:1.9rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--idle-soft);color:var(--ink-3);font-size:1rem}
.auth-page .ck.ok .ck-ico{background:var(--ok-soft);color:var(--ok)}
.auth-page .ck.fail{border-color:var(--stop-line);background:linear-gradient(180deg,var(--stop-soft),transparent)}
.auth-page .ck.fail .ck-ico{background:var(--stop-soft);color:var(--stop)}
.auth-page .ck.fail b{color:var(--stop-ink)}
.auth-page .ck.skip{opacity:.6}
.auth-page .ck b{color:var(--ink);font-size:var(--fs-sm)}
.auth-page .si-points{list-style:none;margin:var(--auth-sp6) 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem;max-width:33rem}
.auth-page .si-points li{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--auth-ink-2)}
.auth-page .si-points .ico-box{width:2rem;height:2rem;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:1rem}
.auth-page .si-points .tone-stop{background:var(--stop-soft);color:var(--stop)}
.auth-page .si-points .tone-ai{background:var(--ai-soft);color:var(--ai)}
.auth-page .si-points .tone-warn{background:var(--warn-soft);color:var(--warn)}
.auth-page .si-points .tone-ok{background:var(--ok-soft);color:var(--ok)}
.auth-page .si-or{display:flex;align-items:center;gap:.6rem;color:var(--auth-ink-3);font-size:.72rem;margin-top:var(--auth-sp4)}
.auth-page .si-or::before,.auth-page .si-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-page .si-or+.auth-btn{margin-top:var(--auth-sp3)}
body.gate-active .btabbar,body.gate-active .wc,body.gate-active #nw-overlays>:not(#nw-toasts){display:none}
.gsearch.palette .gsearch-events[hidden]{display:none}
@media (max-width:36rem){
.gsearch-btn{flex:0 0 2.3rem;width:2.3rem;min-width:2.3rem;padding:0;justify-content:center;margin:0}
.gsearch-btn .ph{display:none}
.topbar .auth-status{min-width:0}
.topbar .pill.role-elevated{max-width:5.2rem;white-space:normal;line-height:1.15;text-align:center;font-size:.58rem;letter-spacing:.02em;padding:.15em .4em}
}