/* rd_ui.css - the Stage-1 redesign's shared layer: base, the app shell (top bar + context bar) and
 * the components every Stage-1 page builds from. Direction A, "Ledger": a precise instrument -
 * hairline RULES, not boxes; cool graphite; dense; Geist for words, Geist Mono for figures. Elevation
 * is reserved for things that genuinely float (menus, dialogs, the composer, toasts).
 *
 * 🔴 SCOPE. Every selector starts with `.rd` (the class on <html> of the four Stage-1 pages) and every
 * class it styles starts with `rd-`, so this file cannot reach another page or a legacy class. Nothing
 * here sets an inherited property on html/body: the Ask panel (#kbPanel) lives in the Documents body
 * and its isolated shots are asserted pixel-for-pixel. Type is set on the rd containers instead.
 * 🔴 NO literal size / weight / leading / tracking / family / colour, and spacing only from the 4px
 * tokens: tests/test_rd_tokens.py fails the build otherwise. Values live in rd_tokens.css.
 * 🔴 Never name a class `card`, `drow`, `shead`, `tile`, `topbar`, `btn`, `toolbar`, `row`, `panel`:
 * _premium.html hides/lifts/wraps those by name. Page CSS goes in its own rd_<page>.css.
 */

/* ============================================================================ base (scoped) */
/* THE LEGACY SIZE TOKENS ARE POINTED AT THE SCALE (Stage 6). bb_tokens.css still defines the old seven-step
   --fs-* ladder (11 / 12 / 13 / 15 / 19 / 24 / 32) and kb.css, kb_fm.css, kb_panel.css and _status_merge.html draw
   their sizes from it. An rd rule overrides most of them, but any element no rd rule names (the Ask panel's who
   picker, a status chip) fell through to a legacy size that is on no step of the platform scale. On an `html.rd`
   page each legacy step now reads the nearest rd step: small stays on caption (12, where it already was), and the
   rest move up one place. Only a value is re-pointed - no rule, selector or line-height changes. */
html.rd{
  --fs-caption:var(--rd-fs-caption); --fs-small:var(--rd-fs-caption); --fs-body:var(--rd-fs-body-sm);
  --fs-title:var(--rd-fs-body); --fs-heading:var(--rd-fs-title); --fs-display:var(--rd-fs-heading); --fs-hero:var(--rd-fs-display);
}

/* Geist's alternates (ss01, ss02, cv11), bound to the Geist faces BY NAME. A bare
   font-feature-settings applies the same tags to every face in the stack, and Windows Arial reads
   ss01 as unicase ("eXTRaBlack") wherever a page falls back to it (found-issues LG-SH XB-3,
   fixed 2026-10-10). Through @font-feature-values only Geist ever sees them. */
@font-feature-values Geist, "Geist Mono"{
  @styleset{rd-geist:1 2}
  @character-variant{rd-geist-cv11:11}
}
.rd .rd-ui,.rd .rd-chrome{
  font-family:var(--rd-font-sans);font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);
  letter-spacing:var(--rd-tr-body-sm);font-weight:var(--rd-fw-regular);color:var(--rd-ink-1);
  color-scheme:var(--rd-scheme);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-alternates:styleset(rd-geist) character-variant(rd-geist-cv11);
}
.rd .rd-ui *,.rd .rd-chrome *{box-sizing:border-box}
.rd .rd-sprite{position:absolute;width:0;height:0;overflow:hidden}
.rd .rd-i{width:var(--rd-icon);height:var(--rd-icon);flex:none;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.rd .rd-i-sm{width:var(--rd-icon-sm);height:var(--rd-icon-sm)}
.rd .rd-i-lg{width:var(--rd-icon-lg);height:var(--rd-icon-lg)}
.rd .rd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.rd .rd-mono,.rd .rd-num{font-family:var(--rd-font-mono);font-variant-numeric:tabular-nums}
.rd .rd-tnum{font-variant-numeric:tabular-nums}
.rd .rd-muted{color:var(--rd-ink-2)}
.rd .rd-faint{color:var(--rd-ink-3)}
/* ONE focus treatment: a 2px gold ring OUTSIDE the control (an outline, so it follows the corners
   and SH-13's "solid 2px" holds on the console's first Tab stop). Keyboard only. */
.rd [class*="rd-"]:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:2px;box-shadow:none}
.rd [class*="rd-"]:focus:not(:focus-visible){outline:none}

/* type utilities - a step is a SET (size + leading + tracking), never a size alone */
.rd .rd-t-caption{font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}
.rd .rd-t-body-sm{font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm)}
.rd .rd-t-body{font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body)}
.rd .rd-t-title{font-size:var(--rd-fs-title);line-height:var(--rd-lh-title);letter-spacing:var(--rd-tr-title);font-weight:var(--rd-fw-semi)}
.rd .rd-t-heading{font-size:var(--rd-fs-heading);line-height:var(--rd-lh-heading);letter-spacing:var(--rd-tr-heading);font-weight:var(--rd-fw-semi)}
.rd .rd-t-display{font-size:var(--rd-fs-display);line-height:var(--rd-lh-display);letter-spacing:var(--rd-tr-display);font-weight:var(--rd-fw-semi)}

/* ============================================================================ the shell
   <div.rd-chrome> is display:contents and holds three things (templates/_rd_shell.html, one markup for every
   redesigned staff page):
     .rd-side   the SIDEBAR - brand, sections, the scope note. Fixed to the left edge, full
                height; the body takes its width as padding, so a page's own layout is unchanged beside it.
                A laptop can fold it to an icon rail (html[data-rd-rail], rd_shell.js, remembered per browser);
                on a phone it is a drawer over the page, opened from the bar's menu button.
     .rd-top    the bar (Search or jump to, the avatar and its account menu), then the KB's context bar and the View-as bar. Sticky over the
                content; on the KB pages the body is a fixed flex column (kb.css) whose panes scroll, so it is
                simply the first, non-shrinking row there.
     .rd-viewas the View-as picker (fixed, placed by the script).
   Liquid Glass floats the top (--rd-bar-float insets it, --rd-chrome-radius rounds it) and the page scrolls under
   it. The other themes leave those roles undefined, so the fallbacks are 0. */
.rd .rd-chrome{display:contents}
.rd body:has(> .rd-chrome){padding-left:var(--rd-side-w)}
/* the page follows the rail on the spring only while it folds (rd_shell.js), never on load */
html.rd[data-rd-folding] body:has(> .rd-chrome){transition:padding-left var(--rd-dur-spring) var(--rd-ease-spring)}
.rd .rd-top{position:sticky;top:var(--rd-bar-float, 0);z-index:var(--rd-z-bar);flex:none;
  margin:var(--rd-bar-float, 0) var(--rd-bar-float, 0) 0;border-radius:var(--rd-chrome-radius, 0);
  transition:box-shadow var(--rd-dur-2) var(--rd-ease-out)}
.rd body.kb .rd-top{position:relative;top:0}
/* the scroll edge (apple-design: no hard rule where chrome meets content). Behind the bar, from the viewport's top
   edge to a little below the bar, the page ground fades in once the page has scrolled (html[data-rd-scrolled],
   rd_shell.js): content passing up under the chrome dissolves instead of meeting a line. It sits in the top's own
   stacking context (z -1), so the bar's material is drawn over it and samples it. */
.rd .rd-top::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * var(--rd-bar-float, 0px));left:calc(-1 * var(--rd-bar-float, 0px));right:calc(-1 * var(--rd-bar-float, 0px));
  bottom:calc(-1 * var(--rd-sp-8));
  background:linear-gradient(to bottom,color-mix(in oklab,var(--rd-bg) 92%,transparent),color-mix(in oklab,var(--rd-bg) 70%,transparent) 55%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  -webkit-mask-image:linear-gradient(to bottom,var(--rd-ink-1) 45%,transparent);mask-image:linear-gradient(to bottom,var(--rd-ink-1) 45%,transparent);
  opacity:0;transition:opacity var(--rd-dur-2) var(--rd-ease-out)}
html.rd[data-rd-scrolled] .rd-top::before{opacity:1}
/* no slab: the bar itself stays clear while scrolling (the knowledge base, with its context bar, keeps its block);
   the edge above dissolves the content, and the two controls carry their own glass so they stay legible on it */
html.rd .rd-chrome:not([data-rd-ctx]) .rd-top{box-shadow:none}
html.rd[data-rd-scrolled] .rd-chrome:not([data-rd-ctx]) .rd-jump,
html.rd[data-rd-scrolled] .rd-chrome:not([data-rd-ctx]) .rd-am-btn{background-color:var(--rd-bar-bg);
  -webkit-backdrop-filter:var(--rd-bar-blur, blur(12px));backdrop-filter:var(--rd-bar-blur, blur(12px));box-shadow:var(--rd-shadow-1)}
@media (prefers-reduced-transparency:reduce){
  .rd .rd-top::before{background:var(--rd-bg);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
}

/* --- the sidebar. ONE material with the bar (--rd-bar-bg through --rd-bar-blur): in Liquid Glass it floats as its
   flush, full-height panel in EVERY theme (2026-10-15: a floating, inset slab left a gap at the top and left that the
   page showed through while scrolling), with a hairline on its right in the rim colour. One column - the brand row (exactly the bar's height, so the logo and the bar's controls sit on one
   centre line), the sections, then the scope note at the foot. */
.rd .rd-side{position:fixed;top:0;left:0;bottom:0;z-index:var(--rd-z-dropdown);
  display:flex;flex-direction:column;width:var(--rd-side-w);padding:0 var(--rd-sp-3) var(--rd-sp-3);
  background:var(--rd-bar-bg);border:0;border-right:var(--rd-border);
  border-color:var(--rd-rim, var(--rd-line));border-radius:0;
  -webkit-backdrop-filter:var(--rd-bar-blur, none);backdrop-filter:var(--rd-bar-blur, none);
  font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm);
  transition:width var(--rd-dur-spring) var(--rd-ease-spring),translate var(--rd-dur-spring) var(--rd-ease-spring)}
.rd .rd-side-top{position:relative;display:flex;align-items:center;gap:var(--rd-sp-1);flex:none;height:var(--rd-bar-h);margin-bottom:var(--rd-sp-2)}
.rd .rd-brand{display:inline-flex;align-items:center;flex:none;color:var(--rd-logo)}
.rd .rd-brand svg{display:block;height:22px;width:auto;flex:none}
/* the shared logo.svg carries a white fill in its own <style>; in the shell it takes --rd-logo: the ink
   on Light and Dark (so it reads on both grounds), the brand navy itself on Bidbrain */
.rd .rd-brand svg .st0{fill:currentColor}
/* the logo's left edge on the icons' column (row padding), so brand and sections share one left line */
.rd .rd-side-brand{flex:1;min-width:0;height:var(--rd-h-md);padding:0 var(--rd-sp-3);border-radius:var(--rd-r-control);overflow:hidden;
  transition:opacity var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
.rd .rd-side-brand:active{scale:.97}
.rd .rd-side-brand:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:-2px}
/* fold to a rail (a laptop) / close the drawer (a phone): a quiet square button at the row's end */
.rd .rd-side-fold{display:inline-grid;place-items:center;flex:none;width:var(--rd-h-md);height:var(--rd-h-md);padding:0;border:0;
  border-radius:var(--rd-r-control);background:none;color:var(--rd-ink-3);cursor:pointer;
  transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease,opacity var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
.rd .rd-side-fold .rd-i{transition:rotate var(--rd-dur-spring) var(--rd-ease-spring)}
@media (hover:hover){.rd .rd-side-fold:hover{background:var(--rd-hover);color:var(--rd-ink-1)}}
.rd .rd-side-fold:active{scale:.94;background:var(--rd-press)}
.rd .rd-side-fold:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:-2px}
.rd .rd-side-close{display:none}

/* the sections: one column of rows, body-sm medium. The CURRENT section is not painted on its row: one indicator
   (.rd-nav-ind, rd_shell.js) - a soft accent-tinted fill with a short accent rail on the sidebar's inner edge -
   sits behind the rows and slides from the section you came from to the one you are on, on the house spring.
   Before the script places it (or without it) the current row paints the same fill itself. */
.rd .rd-nav{position:relative;display:flex;flex-direction:column;gap:2px;min-height:0;overscroll-behavior:contain}
.rd .rd-nav-item{position:relative;z-index:var(--rd-z-raised);display:flex;align-items:center;gap:var(--rd-sp-3);flex:none;
  height:var(--rd-h-md);padding:0 var(--rd-sp-2) 0 var(--rd-sp-3);
  border-radius:var(--rd-r-control);white-space:nowrap;text-decoration:none;color:var(--rd-ink-2);font-weight:var(--rd-fw-medium);
  -webkit-tap-highlight-color:transparent;
  transition:color var(--rd-dur-1) ease,background-color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
.rd .rd-nav-item .rd-i{flex:none;color:var(--rd-ink-3);transition:color var(--rd-dur-1) ease}
@media (hover:hover){
  .rd a.rd-nav-item:hover{color:var(--rd-ink-1);background:var(--rd-hover)}
  .rd a.rd-nav-item:hover .rd-i{color:var(--rd-ink-2)}
}
.rd a.rd-nav-item:active{scale:.98;background:var(--rd-press)}
.rd .rd-nav-item[aria-current]{color:var(--rd-ink-1)}
.rd .rd-nav-item[aria-current] .rd-i{color:var(--rd-accent-text)}
.rd .rd-nav-item[aria-current]:hover{background:none}
.rd .rd-nav:not([data-rd-ind]) .rd-nav-item[aria-current]{background:var(--rd-accent-soft)}
.rd .rd-nav-item:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:-2px}
.rd .rd-nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rd .rd-nav-ind{position:absolute;top:0;left:0;right:0;height:var(--rd-h-md);border-radius:var(--rd-r-control);
  background:var(--rd-accent-soft);pointer-events:none;opacity:0;
  transition:translate var(--rd-dur-spring) var(--rd-ease-spring),opacity var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-nav-ind::before{content:"";position:absolute;top:50%;left:calc(-1 * var(--rd-sp-3));width:3px;height:16px;translate:0 -50%;
  border-radius:0 var(--rd-r-full) var(--rd-r-full) 0;background:var(--rd-accent)}
.rd .rd-nav[data-rd-ind] .rd-nav-ind{opacity:1}
.rd .rd-nav[data-rd-ind-instant] .rd-nav-ind{transition:none}
/* a live count on a section (rd_shell.js <- /shell/counts.json): a quiet caption pill in tabular figures, hidden while
   there is nothing to count; it grows in on the spring the first time it shows (@starting-style) */
.rd .rd-nav-n{display:inline-grid;place-items:center;flex:none;min-width:20px;height:20px;padding:0 var(--rd-sp-1);border-radius:var(--rd-r-full);
  background:color-mix(in oklab,var(--rd-ink-1) 9%,transparent);color:var(--rd-ink-2);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-semi);
  font-variant-numeric:tabular-nums;opacity:1;scale:1;
  transition:opacity var(--rd-dur-2) var(--rd-ease-out),scale var(--rd-dur-spring) var(--rd-ease-spring),background-color var(--rd-dur-1) ease}
@starting-style{.rd .rd-nav-n{opacity:0;scale:.6}}
.rd .rd-nav-item[aria-current] .rd-nav-n{background:var(--rd-accent-soft);color:var(--rd-accent-text)}
.rd .rd-nav-n[hidden]{display:none}
.rd .rd-nav-ext{color:var(--rd-ink-3)}
.rd .rd-side-sep{display:block;flex:none;height:1px;margin:var(--rd-sp-2) var(--rd-sp-3);background:var(--rd-line)}
/* the scope note: quiet, never hidden, the lock on the icons' column and the line balanced into two even halves */
.rd .rd-side-note{position:relative;display:flex;align-items:flex-start;gap:var(--rd-sp-3);flex:none;margin:auto 0 0;padding:var(--rd-sp-2) var(--rd-sp-3);
  color:var(--rd-ink-3);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}
.rd .rd-side-note .rd-i{flex:none;margin-top:1px;color:var(--rd-ink-3)}
.rd .rd-side-note .rd-nav-label{white-space:normal;text-wrap:balance}

/* --- the bar: the drawer button (phones), then on the right Search or jump to (the palette) and the avatar.
   Nothing else lives in it, so it is never a slab: it stays clear and the two controls stand on the page by
   themselves. Once content scrolls under it, the scroll edge above (a progressive blur + ground fade) dissolves the
   content and the two controls take on their own glass so they stay legible. On the knowledge base the bar is
   the top half of a slab with the context bar, so it keeps its material there; under the preferences and in the
   solid tier it is simply solid. */
.rd .rd-bar{position:relative;z-index:var(--rd-z-raised);display:flex;align-items:center;gap:var(--rd-sp-3);height:var(--rd-bar-h);padding:0 var(--rd-sp-3) 0 var(--rd-sp-6);
  background-color:var(--rd-bar-bg);
  border:var(--rd-bar-border, none);border-bottom:var(--rd-bar-border, var(--rd-border));border-color:var(--rd-rim, var(--rd-line));
  border-radius:var(--rd-chrome-radius, 0) var(--rd-chrome-radius, 0) 0 0;
  -webkit-backdrop-filter:var(--rd-bar-blur, blur(12px) saturate(140%));backdrop-filter:var(--rd-bar-blur, blur(12px) saturate(140%));
  transition:background-color var(--rd-dur-2) var(--rd-ease-out),border-color var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-chrome:not([data-rd-ctx]) .rd-bar{border-bottom:var(--rd-bar-border, 0 solid)}
html.rd .rd-chrome[data-rd-side]:not([data-rd-ctx]) .rd-bar[data-rd-spec]{background-color:transparent;border-color:transparent;background-image:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.rd .rd-bar-spacer{flex:1;min-width:var(--rd-sp-2)}
.rd .rd-bar .rd-side-open{display:none}
.rd .rd-acct-link{display:inline-flex;align-items:center;gap:var(--rd-sp-2);height:var(--rd-h-sm);padding:0 var(--rd-sp-3);
  border-radius:var(--rd-r-control);color:var(--rd-ink-2);text-decoration:none;font-weight:var(--rd-fw-medium);white-space:nowrap;
  transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
.rd .rd-acct-link .rd-i{color:var(--rd-ink-3)}
.rd button.rd-acct-link{border:0;background:none;font:inherit;letter-spacing:inherit;cursor:pointer}   /* Log out / Back: POST forms */
@media (hover:hover){.rd .rd-acct-link:hover{background:var(--rd-hover);color:var(--rd-ink-1)}}
.rd .rd-acct-link:active{scale:.97;background:var(--rd-press)}
/* the account side: Search or jump to (the palette, rd_cmdk.js), then the avatar - both on the 36px control height,
   one centre line with the sidebar's brand. Back survives only for a session with no staff menu (staff inside an
   agency portal, on the knowledge base). */
.rd .rd-acct{display:flex;align-items:center;gap:var(--rd-sp-2);flex:none}
/* an agency login's own mark, top right, before the avatar (2026-10-15). main._bar_agency_logo turns an SVG's white
   into currentColor, so the wordmark is drawn in the theme's ink; a raster mark becomes an ink silhouette on the
   light themes, as on the old portal. */
.rd .rd-bar-agency{display:inline-flex;align-items:center;flex:none;height:var(--rd-h-sm);padding:0 var(--rd-sp-3);
  border-right:var(--rd-border);color:var(--rd-ink-1)}
.rd .rd-bar-agency svg,.rd .rd-bar-agency img{display:block;height:18px;width:auto;max-width:160px}
.rd[data-rd-theme="brand"] .rd-bar-agency.is-raster img,.rd[data-rd-theme="light"] .rd-bar-agency.is-raster img{filter:brightness(0) opacity(.88)}
.rd .rd-jump{display:inline-flex;align-items:center;gap:var(--rd-sp-2);width:288px;height:var(--rd-h-md);
  padding:0 var(--rd-sp-1) 0 var(--rd-sp-3);border:var(--rd-border);border-color:var(--rd-line);border-radius:var(--rd-r-full);
  background:color-mix(in oklab,var(--rd-ink-1) 5%,transparent);color:var(--rd-ink-3);font:inherit;letter-spacing:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--rd-dur-1) ease,border-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
.rd .rd-jump>.rd-i{flex:none;width:var(--rd-icon);height:var(--rd-icon)}
@media (hover:hover){.rd .rd-jump:hover{background:color-mix(in oklab,var(--rd-ink-1) 8%,transparent);border-color:var(--rd-line-strong);color:var(--rd-ink-2)}}
.rd .rd-jump:active{scale:.98;background:var(--rd-press)}
.rd .rd-jump:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:2px}
.rd .rd-jump-text{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm)}
/* the key cap inside the pill: the shared .rd-kbd, quieter - a hairline cap on the pill's own ground */
.rd .rd-jump .rd-jump-kbd{flex:none;height:24px;padding:0 var(--rd-sp-2);border-radius:var(--rd-r-full);border-color:var(--rd-line);
  background:color-mix(in oklab,var(--rd-ink-1) 6%,transparent);box-shadow:none;color:var(--rd-ink-3);
  font-family:var(--rd-font-sans);font-weight:var(--rd-fw-medium);font-variant-numeric:tabular-nums}

/* --- the rail (a laptop, folded by the person; never on a phone): icons only, the label kept for a screen
   reader (clipped, not removed), a count shrunk to a dot on its icon. The brand row shows the Bidbrain MARK alone,
   centred; pointing at it (or tabbing to it) swaps it for the expand button in place. Each row names itself in a
   tooltip to the right (data-rd-tip, set by rd_shell.js while folded): it waits a beat on the first hover and
   leaves at once, and it is never in the way of a click. */
@media (min-width:721px){
  html.rd[data-rd-rail] body:has(> .rd-chrome){padding-left:var(--rd-side-rail-w)}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side{width:var(--rd-side-rail-w);padding:0 var(--rd-sp-2) var(--rd-sp-3)}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-top{justify-content:center}
  /* the mark alone: logo.svg's brain is its first 175 of 950 units, so at 26px tall the box is exactly the mark's
     24px - the box crops the wordmark away and centres the mark on the icons below (no sliver of the "B") */
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-brand{flex:none;justify-content:flex-start;width:24px;height:var(--rd-h-md);padding:0;overflow:hidden;border-radius:0}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-brand svg{flex:none;height:26px;margin-left:-1px}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-fold[data-rd-rail]{position:absolute;inset:0;margin:auto}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-fold .rd-i{rotate:180deg}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side .rd-nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-nav-item,html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-note{justify-content:center;padding:0}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-note{padding:var(--rd-sp-2) 0}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-nav-ind::before{left:calc(-1 * var(--rd-sp-2))}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-nav-ext{display:none}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-nav-n{position:absolute;top:var(--rd-sp-1);right:var(--rd-sp-2);min-width:8px;width:8px;height:8px;padding:0;
    background:var(--rd-accent);color:transparent;overflow:hidden;box-shadow:0 0 0 2px var(--rd-bar-bg)}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-sep{margin:var(--rd-sp-2) var(--rd-sp-1)}
  /* the swap: the mark gives way to the expand button while the row is pointed at or the button has focus */
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-fold[data-rd-rail]{opacity:0}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-fold[data-rd-rail]:focus-visible{opacity:1}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-top:has(.rd-side-fold:focus-visible) .rd-side-brand{opacity:0}
  /* the tooltip */
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side [data-rd-tip]::after{content:attr(data-rd-tip) / "";position:absolute;z-index:var(--rd-z-dropdown);top:50%;
    left:calc(100% + var(--rd-sp-4));padding:var(--rd-sp-1) var(--rd-sp-2);border:var(--rd-border-strong);border-color:var(--rd-rim-strong, var(--rd-line-strong));
    border-radius:var(--rd-r-control);background:var(--rd-glass-solid, var(--rd-s1));box-shadow:var(--rd-shadow-2);color:var(--rd-ink-1);
    font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-medium);
    white-space:nowrap;pointer-events:none;opacity:0;translate:calc(var(--rd-m) * -4px) -50%;transform-origin:0 50%;
    transition:opacity var(--rd-dur-1) ease,translate var(--rd-dur-1) var(--rd-ease-out)}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side [data-rd-tip]:focus-visible::after{opacity:1;translate:0 -50%}
}
@media (min-width:721px) and (hover:hover){
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-top:hover .rd-side-fold[data-rd-rail]{opacity:1}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-top:hover .rd-side-brand{opacity:0}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side [data-rd-tip]:hover::after{opacity:1;translate:0 -50%;
    transition:opacity var(--rd-dur-2) var(--rd-ease-out) var(--rd-dur-3),translate var(--rd-dur-2) var(--rd-ease-out) var(--rd-dur-3)}
  /* once one tooltip is up, the next row's comes at once (macOS: moving along a toolbar reads every name) */
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-nav:hover [data-rd-tip]:hover::after{transition-delay:var(--rd-dur-1)}
}
/* PEEK (2026-10-15, the default on every page): the sidebar rests as the rail and opens over the page while the
   pointer rests on it or focus is inside it (rd_shell.js sets html[data-rd-peek] after a short intent delay), then
   folds back when the pointer leaves. The page never moves - the body keeps the rail's padding - so the full
   sidebar floats over the content with a deeper shadow. The fold button pins it open instead (remembered). */
@media (min-width:721px){
  html.rd[data-rd-rail][data-rd-peek] .rd-side{z-index:calc(var(--rd-z-toast) * 2);box-shadow:var(--rd-shadow-3);background:var(--rd-glass-solid, var(--rd-s1))}
  html.rd[data-rd-rail][data-rd-peek] .rd-side .rd-nav-label{animation:rdPeekIn var(--rd-dur-2) var(--rd-ease-out) both}
  html.rd[data-rd-rail][data-rd-peek] .rd-side-fold .rd-i{rotate:180deg}
}
@keyframes rdPeekIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ html.rd[data-rd-rail][data-rd-peek] .rd-side .rd-nav-label{animation:none} }
/* a laptop with no hover (a touch screen): the mark never hides the expand button, which stands in its place */
@media (min-width:721px) and (hover:none){
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-brand{display:none}
  html.rd[data-rd-rail]:not([data-rd-peek]) .rd-side-fold[data-rd-rail]{position:static;opacity:1}
}

/* --- the account menu: everything about "me" in one place, grown out of the avatar (apple-design: the menu
   grows from its trigger's corner, leaves the way it came, every transition starts from the live value - a
   reopen mid-close just reverses; rd_shell.js keeps it un-hidden until its exit ends). A menu INSIDE the
   blurred bar, so - like the Theme menu - it is a SOLID surface in every theme (a blur of its own could only see
   the bar, and the page would read through it unblurred): --rd-glass-solid in the glass themes, --rd-s1 in the
   rest, the strong rim (.rd-menu) and, in the glass themes, the materialize motion below. Every row is one height
   (36px), its icon on one column with the face above it, its value or hint right-aligned on one edge. */
.rd .rd-am{position:relative;display:flex}
.rd .rd-am-btn{position:relative;display:inline-flex;align-items:center;gap:var(--rd-sp-1);height:var(--rd-h-md);padding:2px var(--rd-sp-2) 2px 2px;
  border:0;border-radius:var(--rd-r-full);background:none;color:var(--rd-ink-1);font:inherit;letter-spacing:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
.rd .rd-am-btn .rd-av{transition:box-shadow var(--rd-dur-1) ease}
@media (hover:hover){
  .rd .rd-am-btn:hover{background:var(--rd-hover)}
  .rd .rd-am-btn:hover .rd-av{box-shadow:0 0 0 1px var(--rd-ink-3)}
  .rd .rd-am-btn:hover .rd-am-chev{color:var(--rd-ink-1)}
}
.rd .rd-am-btn:active{scale:.96;background:var(--rd-press)}
.rd .rd-am-btn:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:2px}
.rd .rd-am-btn[aria-expanded="true"]{background:var(--rd-hover)}
.rd .rd-am-chev{color:var(--rd-ink-3);transition:rotate var(--rd-dur-2) var(--rd-ease-out),color var(--rd-dur-1) ease}
.rd .rd-am-btn[aria-expanded="true"] .rd-am-chev{rotate:180deg;color:var(--rd-ink-1)}
/* a face: the roster photo, the initials, or (a password session) a person glyph */
.rd .rd-av{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--rd-r-full);overflow:hidden;
  background:var(--rd-s2);box-shadow:0 0 0 1px var(--rd-line-strong);color:var(--rd-ink-1);
  font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body);font-weight:var(--rd-fw-semi)}
.rd .rd-av img{display:block;width:100%;height:100%;object-fit:cover}
.rd .rd-av .rd-i{color:var(--rd-ink-3)}
.rd .rd-av-sm{width:32px;height:32px;font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}
/* viewing as someone: THEIR face, in an amber ring, with a small eye */
.rd .rd-am-btn-acting .rd-av,.rd .rd-am-btn-acting:hover .rd-av{box-shadow:0 0 0 2px var(--rd-warn)}
.rd .rd-am-eye{display:inline-grid;place-items:center;flex:none;width:14px;height:14px;margin:0 0 0 calc(-1 * var(--rd-sp-3));align-self:flex-end;
  translate:0 calc(-1 * var(--rd-sp-1));border-radius:var(--rd-r-full);background:var(--rd-warn);color:var(--rd-bg);box-shadow:0 0 0 2px var(--rd-bg)}
.rd .rd-am-eye .rd-i{width:10px;height:10px;stroke-width:2.5}
.rd .rd-am .rd-am-menu{position:absolute;top:calc(100% + var(--rd-sp-2));right:0;width:320px;padding:var(--rd-sp-1);
  border-radius:var(--rd-r-overlay);box-shadow:var(--rd-shadow-3);background:var(--rd-glass-solid, var(--rd-s1));
  font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm);
  transform-origin:calc(100% - var(--rd-sp-4)) 0;opacity:0;scale:.96;translate:0 calc(var(--rd-m) * -4px);pointer-events:none;
  transition:opacity var(--rd-dur-2) var(--rd-ease-out),scale var(--rd-dur-2) var(--rd-ease-out),translate var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-am .rd-am-menu.rd-open{opacity:1;scale:1;translate:0 0;pointer-events:auto}
.rd .rd-am .rd-am-menu .rd-menu-sep{margin:var(--rd-sp-1) var(--rd-sp-2)}
@media (prefers-reduced-transparency:reduce){
  .rd .rd-am .rd-am-menu{background:var(--rd-s1)}
}
.rd .rd-am-who{display:flex;align-items:center;gap:var(--rd-sp-3);padding:var(--rd-sp-3) var(--rd-sp-2) var(--rd-sp-3) var(--rd-sp-2)}
.rd .rd-am-who .rd-av{width:40px;height:40px}
.rd .rd-am-face{position:relative;display:inline-flex;flex:none;padding:0;border:0;border-radius:var(--rd-r-full);background:none;cursor:pointer;
  transition:scale var(--rd-dur-1) var(--rd-ease-out)}
.rd .rd-am-face:active{scale:.96}
.rd .rd-am-face:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:2px}
@media (hover:hover){.rd .rd-am-face:hover .rd-av{box-shadow:0 0 0 2px var(--rd-accent-ring)}}
.rd .rd-am-id{display:flex;flex-direction:column;min-width:0}
.rd .rd-am-name{font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body);font-weight:var(--rd-fw-semi);
  color:var(--rd-ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd .rd-am-sub{color:var(--rd-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}
.rd .rd-am-item{display:flex;align-items:center;gap:var(--rd-sp-3);width:100%;height:var(--rd-h-md);padding:0 var(--rd-sp-2) 0 var(--rd-sp-3);
  border:0;border-radius:var(--rd-r-control);background:none;color:var(--rd-ink-1);font:inherit;letter-spacing:inherit;
  font-weight:var(--rd-fw-medium);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
.rd .rd-am-item>.rd-i:first-child,.rd .rd-am-item>.rd-theme-i{flex:none;color:var(--rd-ink-3);transition:color var(--rd-dur-1) ease}
@media (hover:hover){
  .rd .rd-am-item:hover{background:var(--rd-hover)}
  .rd .rd-am-item:hover>.rd-i:first-child{color:var(--rd-ink-1)}
}
.rd .rd-am-item:active{background:var(--rd-press);scale:.98}
.rd .rd-am-item[aria-expanded="true"],.rd .rd-am-item[aria-current]{background:var(--rd-hover)}
.rd .rd-am-item:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:-2px}
.rd .rd-am-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rd .rd-am-item:has(.rd-am-hint) .rd-am-label{flex:none}
.rd .rd-am-value{flex:none;color:var(--rd-ink-3);font-weight:var(--rd-fw-regular)}
.rd .rd-am-value-acting{color:var(--rd-warn);font-weight:var(--rd-fw-medium)}
.rd .rd-am-hint{flex:0 1 auto;min-width:0;margin-left:auto;overflow:hidden;text-overflow:ellipsis;padding-right:var(--rd-sp-1);
  color:var(--rd-ink-3);font-weight:var(--rd-fw-regular);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caption)}
.rd .rd-am-go{flex:none;color:var(--rd-ink-3)}
/* Explainers: a row that folds open in place to the decks (_rd_shell.html; rd_shell.js 3b) */
.rd .rd-am-expl-chev{transition:rotate var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-am-expl[aria-expanded="true"] .rd-am-expl-chev{rotate:90deg}
.rd .rd-am-expl-list{display:flex;flex-direction:column}
.rd .rd-am-expl-list[hidden]{display:none}
.rd .rd-am-subitem{padding-left:calc(var(--rd-sp-3) + var(--rd-sp-6))}
@media (prefers-reduced-motion:reduce){.rd .rd-am-expl-chev{transition:none}}
/* Log out: an ordinary row (signing out loses nothing), its own group at the foot */
.rd .rd-am-out{color:var(--rd-ink-1)}
.rd .rd-am-err{margin:0;padding:var(--rd-sp-1) var(--rd-sp-3);color:var(--rd-danger);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}
.rd .rd-am-err:empty{display:none}
.rd .rd-am .rd-is-busy{opacity:.6;pointer-events:none}
.rd .rd-theme-menu .rd-theme-item{font-weight:var(--rd-fw-medium)}

/* --- Theme: Liquid Glass / Midnight Glass / Bidbrain Dark / Bidbrain Light / Classic Light / Classic Dark /
   System (templates/_rd_theme.html, static/rd_theme.js). A square icon button in the account row (staff bar,
   portal bar, Home) showing the CURRENT mode - drop, moon with a spark, filled palette, palette, sun, moon or
   monitor - and naming it ("Theme: Bidbrain Dark").
   Which icon shows is read off <html data-rd-theme> and data-rd-theme-system (System follows the OS
   within the Bidbrain pair, so the theme attribute alone cannot say "System") HERE, so it is right at the
   first paint, before any script. The menu has the Tools menu's motion,
   anchored to the button's corner (under reduced motion it appears and goes without moving), but a SOLID
   surface (.rd-menu: s1 + shadow-2): it opens inside a bar that is itself a blurred material, so its own
   backdrop-filter could only see the bar, and the page below would show through it unblurred (measured
   on the console: the page's Home button read through the menu). Two GROUPS come first, each under a
   quiet heading - Bidbrain (Liquid Glass, marked "Default", Midnight Glass, Dark and Light) and Classic (Light and
   Dark) - then a rule
   and System (it follows the OS, so it is a different kind of choice). The headings are not stops: the
   keyboard moves item to item. Choosing a mode cross-fades the page (rd_theme.js, a view transition):
   colour only, nothing here animates layout. */
.rd .rd-theme{position:relative;display:flex}
.rd .rd-theme-btn{border:0;background:none;font:inherit;letter-spacing:inherit;cursor:pointer}
.rd .rd-acct-link.rd-theme-btn{justify-content:center;aspect-ratio:1;padding:0}   /* square at every bar height */
.rd .rd-theme-btn .rd-theme-i{display:none;color:currentColor}
.rd:not([data-rd-theme]) .rd-theme-btn .rd-theme-i-system,
.rd[data-rd-theme-system] .rd-theme-btn .rd-theme-i-system,
.rd[data-rd-theme="brand"]:not([data-rd-theme-system]) .rd-theme-btn .rd-theme-i-brand,
.rd[data-rd-theme="brand-dark"]:not([data-rd-theme-system]) .rd-theme-btn .rd-theme-i-brand-dark,
.rd[data-rd-theme="glass-dark"]:not([data-rd-theme-system]) .rd-theme-btn .rd-theme-i-glass-dark,
.rd[data-rd-theme="midnight-dark"]:not([data-rd-theme-system]) .rd-theme-btn .rd-theme-i-midnight-dark,
.rd[data-rd-theme="light"] .rd-theme-btn .rd-theme-i-light,
.rd[data-rd-theme="dark"] .rd-theme-btn .rd-theme-i-dark{display:block}
.rd .rd-theme-btn[aria-expanded="true"]{background:var(--rd-hover);color:var(--rd-ink-1)}
.rd .rd-theme .rd-theme-menu{position:absolute;top:calc(100% + var(--rd-sp-2));right:0;min-width:208px;
  transform-origin:0 100%;opacity:0;scale:.96;translate:0 calc(var(--rd-m) * 4px);pointer-events:none;
  transition:opacity var(--rd-dur-2) var(--rd-ease-out),scale var(--rd-dur-2) var(--rd-ease-out),translate var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-theme .rd-theme-menu.rd-open{opacity:1;scale:1;translate:0 0;pointer-events:auto}
.rd .rd-theme-item{height:var(--rd-h-md);padding:0 var(--rd-sp-3);font-weight:var(--rd-fw-medium)}
.rd .rd-theme-item .rd-i{color:var(--rd-ink-3)}
/* a group's heading: the caption step in the quiet ink, on the items' left edge, never a stop */
.rd .rd-theme-head{padding:var(--rd-sp-2) var(--rd-sp-3) var(--rd-sp-1);color:var(--rd-ink-3);font-weight:var(--rd-fw-medium);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);cursor:default;user-select:none}
.rd .rd-theme-name{flex:1}
/* "Default", on the theme a first visit gets: a quiet caption, never a second name */
.rd .rd-theme-note{color:var(--rd-ink-3);font-weight:var(--rd-fw-regular);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}
.rd .rd-theme-item .rd-theme-check{color:var(--rd-ink-1);visibility:hidden}
.rd .rd-theme-item[aria-checked="true"] .rd-theme-check{visibility:visible}
.rd .rd-theme-item:focus-visible{outline-offset:-2px}
.rd .rd-theme-item:active{background:var(--rd-press)}
@media (prefers-reduced-motion:reduce){
  .rd .rd-theme .rd-theme-menu{transition:none;scale:1;translate:0 0}
}
@media (max-width:720px){
  .rd .rd-theme-item{height:var(--rd-h-lg)}
}
/* the glass themes' menus MATERIALIZE (Stage 6, apple-design): the Tools and Theme menus grow out of their
   trigger as above and come into focus as they do - their own filter blur runs to none - on the spring
   (--rd-dur-spring / --rd-ease-spring). They leave the way they came, on the 200ms ease-out, so the exit ends
   inside the 260ms rd_shell.js / rd_theme.js keep a closing menu un-hidden (the transition that runs is the
   one of the state being entered). Under reduced motion they only fade: no scale, no travel, no blur. The
   four other themes keep the motion above, unchanged. */
html.rd[data-rd-theme="glass-dark"] .rd-am .rd-am-menu,html.rd[data-rd-theme="midnight-dark"] .rd-am .rd-am-menu,
html.rd[data-rd-theme="glass-dark"] .rd-theme .rd-theme-menu,html.rd[data-rd-theme="midnight-dark"] .rd-theme .rd-theme-menu{
  filter:blur(8px);
  transition:opacity var(--rd-dur-2) var(--rd-ease-out),scale var(--rd-dur-2) var(--rd-ease-out),
    translate var(--rd-dur-2) var(--rd-ease-out),filter var(--rd-dur-2) var(--rd-ease-out)}
html.rd[data-rd-theme="glass-dark"] .rd-am .rd-am-menu.rd-open,html.rd[data-rd-theme="midnight-dark"] .rd-am .rd-am-menu.rd-open,
html.rd[data-rd-theme="glass-dark"] .rd-theme .rd-theme-menu.rd-open,html.rd[data-rd-theme="midnight-dark"] .rd-theme .rd-theme-menu.rd-open{
  filter:none;
  transition:opacity var(--rd-dur-2) var(--rd-ease-out),scale var(--rd-dur-spring) var(--rd-ease-spring),
    translate var(--rd-dur-spring) var(--rd-ease-spring),filter var(--rd-dur-spring) var(--rd-ease-spring)}
@media (prefers-reduced-motion:reduce){
  html.rd[data-rd-theme="glass-dark"] .rd-am .rd-am-menu,html.rd[data-rd-theme="midnight-dark"] .rd-am .rd-am-menu,
  html.rd[data-rd-theme="glass-dark"] .rd-theme .rd-theme-menu,html.rd[data-rd-theme="midnight-dark"] .rd-theme .rd-theme-menu,
  html.rd[data-rd-theme="glass-dark"] .rd-am .rd-am-menu.rd-open,html.rd[data-rd-theme="midnight-dark"] .rd-am .rd-am-menu.rd-open,
  html.rd[data-rd-theme="glass-dark"] .rd-theme .rd-theme-menu.rd-open,html.rd[data-rd-theme="midnight-dark"] .rd-theme .rd-theme-menu.rd-open{
    filter:none;scale:1;translate:0 0;transition:opacity var(--rd-dur-2) var(--rd-ease-out)}
}
/* --- the theme control as a ROW of the account menu (_rd_theme.html with rd_theme_row): "Theme  <current>  >",
   its seven-mode menu a flyout to the LEFT of the account menu, growing from its top-right corner. The current
   name is read off <html> like the icon, so it is right at the first paint. On a phone the flyout opens in
   place, under its row (the account menu is the full width there; there is no room beside it). */
.rd .rd-am .rd-theme{position:relative;display:block}
.rd .rd-theme-row .rd-theme-i{display:none}
.rd .rd-theme-cur{display:none}
.rd:not([data-rd-theme]) .rd-theme-cur-system,
.rd[data-rd-theme-system] .rd-theme-cur-system,
.rd[data-rd-theme="brand"]:not([data-rd-theme-system]) .rd-theme-cur-brand,
.rd[data-rd-theme="brand-dark"]:not([data-rd-theme-system]) .rd-theme-cur-brand-dark,
.rd[data-rd-theme="glass-dark"]:not([data-rd-theme-system]) .rd-theme-cur-glass-dark,
.rd[data-rd-theme="midnight-dark"]:not([data-rd-theme-system]) .rd-theme-cur-midnight-dark,
.rd[data-rd-theme="light"] .rd-theme-cur-light,
.rd[data-rd-theme="dark"] .rd-theme-cur-dark{display:inline}
.rd .rd-am .rd-theme .rd-theme-menu{top:calc(-1 * var(--rd-sp-2));right:calc(100% + var(--rd-sp-4));min-width:248px;transform-origin:100% 0;
  translate:calc(var(--rd-m) * 4px) 0}
.rd .rd-am .rd-theme .rd-theme-menu.rd-open{translate:0 0}

/* the chrome without a context bar (every page but the knowledge base): the bar IS the whole slab, so in Liquid
   Glass all four of its corners round (the other themes leave the radius at 0) */
.rd .rd-chrome:not([data-rd-ctx]) .rd-bar{border-radius:var(--rd-chrome-radius, 0)}

/* --- VIEWING AS: an amber bar under the top bar on every page while a super admin views as someone. Opaque (it
   sticks with the chrome over the page), the warn hue mixed into the ground so it reads in every theme; Back to
   me is the filled one, its ink the ground (dark on the dark themes' amber, light on the light themes' brown).
   In Liquid Glass it floats as its own rounded strip under the slab. */
.rd .rd-viewas-bar{display:flex;align-items:center;gap:var(--rd-sp-3);min-height:var(--rd-ctx-h);padding:var(--rd-sp-1) var(--rd-sp-6);
  background:color-mix(in oklab,var(--rd-warn) 14%,var(--rd-bg));border-bottom:var(--rd-bw) solid color-mix(in oklab,var(--rd-warn) 40%,transparent);
  color:var(--rd-ink-2)}
.rd .rd-viewas-bar>.rd-i{color:var(--rd-warn)}
.rd .rd-viewas-text{flex:1;min-width:0;margin:0}
.rd .rd-viewas-text b{color:var(--rd-ink-1);font-weight:var(--rd-fw-semi)}
.rd .rd-viewas-actions{display:inline-flex;gap:var(--rd-sp-2);flex:none}
.rd .rd-viewas-btn{display:inline-flex;align-items:center;height:var(--rd-h-sm);padding:0 var(--rd-sp-3);border:0;border-radius:var(--rd-r-control);
  background:color-mix(in oklab,var(--rd-warn) 22%,transparent);color:var(--rd-ink-1);font:inherit;letter-spacing:inherit;
  font-weight:var(--rd-fw-semi);white-space:nowrap;cursor:pointer;transition:background-color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
@media (hover:hover){.rd .rd-viewas-btn:hover{background:color-mix(in oklab,var(--rd-warn) 32%,transparent)}}
.rd .rd-viewas-btn:active{scale:.97}
.rd .rd-viewas-btn-main{background:var(--rd-warn);color:var(--rd-bg)}
@media (hover:hover){.rd .rd-viewas-btn-main:hover{background:color-mix(in oklab,var(--rd-warn) 88%,var(--rd-ink-1))}}
html.rd[data-rd-theme="glass-dark"] .rd-viewas-bar{margin-top:var(--rd-sp-2);border:var(--rd-bw) solid color-mix(in oklab,var(--rd-warn) 40%,transparent);
  border-radius:var(--rd-chrome-radius, 0)}

/* --- View as: the team picker (a dialog beside the account menu, or under Switch person). Placed by
   rd_shell.js (fixed to the viewport), growing from the side it opened from. */
.rd .rd-chrome .rd-viewas{position:fixed;top:0;left:0;z-index:var(--rd-z-dropdown);display:flex;flex-direction:column;
  width:380px;max-width:calc(100vw - 2 * var(--rd-sp-4));max-height:min(560px, calc(100dvh - 2 * var(--rd-sp-12)));padding:0;overflow:hidden;
  border-radius:var(--rd-r-overlay);box-shadow:var(--rd-shadow-3);background:var(--rd-glass-solid, var(--rd-s1));
  transform-origin:100% 0;opacity:0;scale:.96;pointer-events:none;
  transition:opacity var(--rd-dur-2) var(--rd-ease-out),scale var(--rd-dur-spring) var(--rd-ease-spring)}
.rd .rd-chrome .rd-viewas.rd-open{opacity:1;scale:1;pointer-events:auto}
.rd .rd-chrome .rd-viewas[hidden]{display:none}
.rd .rd-viewas-head{padding:var(--rd-sp-4) var(--rd-sp-4) var(--rd-sp-3)}
.rd .rd-viewas-title{margin:0 0 var(--rd-sp-1);color:var(--rd-ink-1);font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);
  letter-spacing:var(--rd-tr-body);font-weight:var(--rd-fw-semi)}
.rd .rd-viewas-note{margin:0 0 var(--rd-sp-3);color:var(--rd-ink-3)}
.rd .rd-viewas-search{display:flex;align-items:center;gap:var(--rd-sp-2);height:var(--rd-h-md);padding:0 var(--rd-sp-3);border-radius:var(--rd-r-control);
  background:var(--rd-sunk);box-shadow:inset 0 0 0 1px var(--rd-line-strong);color:var(--rd-ink-3)}
.rd .rd-viewas-search:focus-within{outline:2px solid var(--rd-accent-ring);outline-offset:1px}
.rd .rd-viewas-search input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;color:var(--rd-ink-1);
  font-family:var(--rd-font-sans);font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body)}
.rd .rd-viewas-search input::-webkit-search-cancel-button{display:none}
.rd .rd-viewas-list{display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto;padding:0 var(--rd-sp-2) var(--rd-sp-2);overscroll-behavior:contain}
.rd .rd-viewas-person{display:flex;align-items:center;gap:var(--rd-sp-3);width:100%;min-height:calc(var(--rd-h-lg) + var(--rd-sp-2));padding:0 var(--rd-sp-3);
  border:0;border-radius:var(--rd-r-control);background:none;color:var(--rd-ink-1);font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;
  transition:background-color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
@media (hover:hover){.rd .rd-viewas-person:hover{background:var(--rd-hover)}}
.rd .rd-viewas-person:active{scale:.98;background:var(--rd-press)}
.rd .rd-viewas-person:focus-visible{outline-offset:-2px}
.rd .rd-viewas-person[aria-current="true"]{background:var(--rd-accent-soft)}
.rd .rd-viewas-person .rd-av{width:32px;height:32px;font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}
.rd .rd-viewas-pt{display:flex;flex-direction:column;flex:1;min-width:0}
.rd .rd-viewas-pname{font-weight:var(--rd-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd .rd-viewas-psub{color:var(--rd-ink-3);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd .rd-viewas-tick{color:var(--rd-accent-text)}
.rd .rd-viewas-empty{margin:0;padding:var(--rd-sp-3);color:var(--rd-ink-3)}
@media (prefers-reduced-transparency:reduce){.rd .rd-chrome .rd-viewas{background:var(--rd-s1)}}
@media (prefers-reduced-motion:reduce){
  .rd .rd-am .rd-am-menu,.rd .rd-chrome .rd-viewas,.rd .rd-am .rd-theme .rd-theme-menu{scale:1;translate:0 0;transition:opacity var(--rd-dur-2) var(--rd-ease-out)}
  .rd .rd-am-btn:active,.rd .rd-am-item:active,.rd .rd-jump:active,.rd a.rd-nav-item:active,.rd .rd-viewas-person:active,.rd .rd-viewas-btn:active{scale:1}
}
@media print{ .rd .rd-viewas-bar,.rd .rd-chrome .rd-viewas{display:none} }

/* the whole-page cross-fade of a theme change, at the menu's own pace (the browser's default is 250ms) */
html.rd::view-transition-old(root),html.rd::view-transition-new(root){animation-duration:var(--rd-dur-2)}

/* the context bar: WHERE you are and in WHAT scope. A hatched band, because it marks a boundary
   (internal / god-mode) rather than holding content. The KB's "internal - never shown to a client"
   stays on screen at every width. In the glass themes it is the lower half of the same slab as the bar: its
   hatch over --rd-ctx-bg, through --rd-bar-blur, the rim on its sides and bottom (the bar's own bottom rule
   divides the two) and the bottom corners rounded. */
.rd .rd-ctx{display:flex;align-items:center;gap:var(--rd-sp-4);height:var(--rd-ctx-h);padding:0 var(--rd-sp-6);
  border:var(--rd-bar-border, none);border-top:0;border-bottom:var(--rd-bar-border, var(--rd-border));border-color:var(--rd-rim, var(--rd-line));
  border-radius:0 0 var(--rd-chrome-radius, 0) var(--rd-chrome-radius, 0);color:var(--rd-ink-2);
  background:repeating-linear-gradient(-45deg,transparent 0 6px,var(--rd-hatch) 6px 7px),var(--rd-ctx-bg, var(--rd-bg));
  -webkit-backdrop-filter:var(--rd-bar-blur, none);backdrop-filter:var(--rd-bar-blur, none);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);white-space:nowrap}
.rd .rd-ctx-scope{display:inline-flex;align-items:center;gap:var(--rd-sp-2);flex:none;min-width:0}
.rd .rd-ctx-scope .rd-i{color:var(--rd-accent-text);width:var(--rd-icon-sm);height:var(--rd-icon-sm)}
.rd .rd-ctx-name{color:var(--rd-ink-1);font-weight:var(--rd-fw-semi)}
.rd .rd-ctx-dot{width:3px;height:3px;border-radius:var(--rd-r-full);background:var(--rd-ink-3);flex:none}
.rd .rd-ctx-note{color:var(--rd-ink-2)}
.rd .rd-subnav{display:flex;align-items:center;gap:var(--rd-sp-1);margin-left:auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm)}
.rd .rd-subnav::-webkit-scrollbar{display:none}
.rd .rd-subnav a{display:inline-flex;align-items:center;flex:none;height:var(--rd-h-sm);padding:0 var(--rd-sp-3);
  border-radius:var(--rd-r-control);color:var(--rd-ink-2);text-decoration:none;font-weight:var(--rd-fw-medium);
  transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease}
@media (hover:hover){.rd .rd-subnav a:hover{color:var(--rd-ink-1);background:var(--rd-hover)}}
.rd .rd-subnav a[aria-current]{color:var(--rd-ink-1);background:var(--rd-s2);box-shadow:inset 0 0 0 1px var(--rd-line-strong)}
/* the subnav's two menus (Data, Tools; rd_shell.js [data-rd-submenu]): a button that reads like its links, a
   chevron that turns while open, and the current-page look when the page you are on is inside it */
.rd .rd-subgroup{display:inline-flex;flex:none}
.rd .rd-subnav-btn{display:inline-flex;align-items:center;gap:var(--rd-sp-1);height:var(--rd-h-sm);padding:0 var(--rd-sp-2) 0 var(--rd-sp-3);
  border:0;border-radius:var(--rd-r-control);background:none;color:var(--rd-ink-2);cursor:pointer;
  font:inherit;letter-spacing:inherit;font-weight:var(--rd-fw-medium);transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease}
@media (hover:hover){.rd .rd-subnav-btn:hover{color:var(--rd-ink-1);background:var(--rd-hover)}}
.rd .rd-subnav-btn[data-current],.rd .rd-subnav-btn[aria-expanded="true"]{color:var(--rd-ink-1);background:var(--rd-s2);box-shadow:inset 0 0 0 1px var(--rd-line-strong)}
.rd .rd-subnav-btn:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:-2px}
.rd .rd-subnav-chev{color:var(--rd-ink-3);transition:rotate var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-subnav-btn[aria-expanded="true"] .rd-subnav-chev{rotate:180deg}
/* the menu itself: fixed to the viewport while open (placed by the script), the Tools menu's material */
.rd .rd-submenu{position:fixed;top:0;left:0;min-width:208px;
  background:var(--rd-glass-solid, color-mix(in oklab,var(--rd-s1) 86%,transparent));
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  transform-origin:0 0;opacity:0;scale:.96;translate:0 calc(var(--rd-m) * -4px);
  transition:opacity var(--rd-dur-2) var(--rd-ease-out),scale var(--rd-dur-2) var(--rd-ease-out),translate var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-submenu.rd-open{opacity:1;scale:1;translate:0 0}
.rd .rd-submenu .rd-menu-item{font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm);
  font-weight:var(--rd-fw-medium);text-decoration:none}
.rd .rd-submenu .rd-menu-item[aria-current]{background:var(--rd-s2);box-shadow:inset 0 0 0 1px var(--rd-line-strong)}
.rd .rd-submenu .rd-menu-item:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:-2px}
.rd .rd-submenu-head{margin:0;padding:var(--rd-sp-2) var(--rd-sp-2) var(--rd-sp-1);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-medium);color:var(--rd-ink-3)}
@media (prefers-reduced-motion:reduce){.rd .rd-submenu,.rd .rd-subnav-chev{transition:none}}
@media (prefers-reduced-transparency:reduce){.rd .rd-submenu{background:var(--rd-s1);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* phone: the sidebar becomes a DRAWER - off the left edge until the bar's menu button opens it, sliding in on
   the house spring over a dimming scrim (rd_shell.js: Escape, the scrim, a link or the close button shut it; focus
   goes in and comes back). In Liquid Glass it floats like the sidebar does, inset and rounded. The bar keeps the
   menu button, Search (an icon) and the avatar, every one a 44px target; the context bar is one line (scope
   first, then the subnav, scrolling together). Nothing hides. */
@media (max-width:720px){
  .rd body:has(> .rd-chrome){padding-left:0}
  .rd .rd-top{position:relative;top:0}
  .rd .rd-top::before{display:none}
  .rd .rd-side{width:min(304px, calc(100vw - var(--rd-sp-16)));padding:0 var(--rd-sp-3) var(--rd-sp-4);translate:calc(-100% - var(--rd-sp-6)) 0;
    visibility:hidden;background:var(--rd-glass-solid, var(--rd-bg));box-shadow:var(--rd-shadow-3);
    transition:translate var(--rd-dur-spring) var(--rd-ease-spring),visibility 0s linear var(--rd-dur-spring)}
  .rd .rd-side[data-open]{translate:0 0;visibility:visible;transition:translate var(--rd-dur-spring) var(--rd-ease-spring),visibility 0s}
  .rd .rd-side-top{height:var(--rd-bar-h)}
  .rd .rd-side-fold[data-rd-rail]{display:none}
  .rd .rd-side-close{display:inline-grid;width:var(--rd-h-lg);height:var(--rd-h-lg)}
  .rd .rd-side-scrim{position:fixed;inset:0;z-index:calc(var(--rd-z-dropdown) - 1);background:var(--rd-scrim);
    opacity:0;transition:opacity var(--rd-dur-3) var(--rd-ease-out)}
  .rd .rd-side-scrim.rd-open{opacity:1}
  .rd .rd-side-scrim[hidden]{display:none}
  .rd body:has(.rd-side[data-open]) #kbFab{visibility:hidden}   /* the Ask button would sit on the drawer */
  .rd .rd-bar .rd-side-open{display:inline-grid;flex:none;width:var(--rd-h-lg);height:var(--rd-h-lg);margin-left:calc(-1 * var(--rd-sp-1))}
  .rd .rd-nav-item{height:var(--rd-h-lg)}
  .rd .rd-nav-ind{height:var(--rd-h-lg)}
  .rd .rd-side-note{padding:var(--rd-sp-3)}
  .rd .rd-bar{gap:var(--rd-sp-1);padding:0 var(--rd-sp-2)}
  .rd .rd-jump{width:var(--rd-h-lg);height:var(--rd-h-lg);padding:0;justify-content:center;border-color:transparent;background:none}
  .rd .rd-jump>.rd-i{width:var(--rd-icon-lg);height:var(--rd-icon-lg)}
  .rd .rd-jump .rd-jump-text,.rd .rd-jump .rd-jump-kbd{display:none}
  .rd .rd-acct{gap:0}
  .rd .rd-am-btn{height:var(--rd-h-lg);padding:var(--rd-sp-1) var(--rd-sp-2) var(--rd-sp-1) var(--rd-sp-1)}
  .rd .rd-acct-link{height:var(--rd-h-md);padding:0 var(--rd-sp-2)}
  .rd .rd-ctx{padding:0 var(--rd-sp-4);overflow-x:auto;scrollbar-width:none}
  .rd .rd-ctx::-webkit-scrollbar{display:none}
  .rd .rd-subnav{overflow:visible;margin-left:var(--rd-sp-2)}
  /* the subnav's links are touch targets at phone width (R25: every theme, >= 32px; the medium control step is 36px
     and fits the 40px context bar), and their focus ring sits INSIDE the link so the bar's clip (overflow on the
     bar or the scrolling subnav) can never cut it */
  .rd .rd-subnav a,.rd .rd-subnav-btn{height:var(--rd-h-md)}
  .rd .rd-subnav a:focus-visible{outline-offset:-2px}
  /* the account menu opens across the bar, under it (the bar is the containing block), as tall as the screen
     allows and scrolling inside itself; its Theme flyout opens in place, under its row */
  .rd .rd-bar .rd-am{position:static}
  .rd .rd-bar .rd-am .rd-am-menu{top:calc(100% + var(--rd-sp-1));left:var(--rd-sp-2);right:var(--rd-sp-2);width:auto;padding:var(--rd-sp-2);
    transform-origin:calc(100% - var(--rd-sp-6)) 0;max-height:calc(100dvh - var(--rd-sp-16) - var(--rd-sp-4));overflow-y:auto;overscroll-behavior:contain}
  .rd .rd-am .rd-theme .rd-theme-menu{position:static;min-width:0;margin:var(--rd-sp-1) 0 var(--rd-sp-2);box-shadow:none;translate:0 0;transform-origin:50% 0}
  .rd .rd-am-item,.rd .rd-viewas-person{min-height:var(--rd-h-lg)}
  .rd .rd-viewas-bar{flex-wrap:wrap;padding:var(--rd-sp-2) var(--rd-sp-4)}
  .rd .rd-viewas-text{flex-basis:calc(100% - var(--rd-sp-8))}
  .rd .rd-viewas-actions{width:100%}
  .rd .rd-viewas-btn{flex:1;justify-content:center;height:var(--rd-h-lg)}
  /* one line on a phone: in the KB the sidebar already says "Knowledge base", so the bar keeps the
     internal note (never hidden) */
  .rd .rd-ctx-kb .rd-ctx-name,.rd .rd-ctx-kb .rd-ctx-dot{display:none}
}
/* the drawer in Liquid Glass: a floating, rounded slab like the sidebar, its own blur over the dimmed page */
@media (max-width:720px){
  html.rd[data-rd-theme="glass-dark"] .rd-side{top:var(--rd-bar-float, 0px);bottom:var(--rd-bar-float, 0px);left:var(--rd-bar-float, 0px)}
}
/* reduced motion: the drawer and the indicator cross-fade, they never travel */
@media (prefers-reduced-motion:reduce){
  .rd .rd-nav-ind{transition:opacity var(--rd-dur-2) var(--rd-ease-out)}
  .rd .rd-nav-n{transition:opacity var(--rd-dur-2) var(--rd-ease-out)}
  .rd .rd-side-fold .rd-i{transition:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:720px){
  .rd .rd-side{translate:0 0;opacity:0;transition:opacity var(--rd-dur-2) var(--rd-ease-out),visibility 0s linear var(--rd-dur-2)}
  .rd .rd-side[data-open]{opacity:1;transition:opacity var(--rd-dur-2) var(--rd-ease-out),visibility 0s}
}
@media (prefers-reduced-transparency:reduce){
  .rd .rd-side{background:var(--rd-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .rd .rd-top::before{background:var(--rd-bg)}
}
@media (max-width:380px){ .rd .rd-acct-link .rd-i{display:none} }
/* a scroller says "there is more" with a fade at the edge that has more (rd_shell.js sets the classes);
   the mask reads only alpha, so the ink token here is just "opaque" */
.rd .rd-more-r{-webkit-mask-image:linear-gradient(to right,var(--rd-ink-1) calc(100% - var(--rd-sp-8)),transparent);
  mask-image:linear-gradient(to right,var(--rd-ink-1) calc(100% - var(--rd-sp-8)),transparent)}
.rd .rd-more-l{-webkit-mask-image:linear-gradient(to left,var(--rd-ink-1) calc(100% - var(--rd-sp-8)),transparent);
  mask-image:linear-gradient(to left,var(--rd-ink-1) calc(100% - var(--rd-sp-8)),transparent)}
.rd .rd-more-l.rd-more-r{-webkit-mask-image:linear-gradient(to right,transparent,var(--rd-ink-1) var(--rd-sp-8) calc(100% - var(--rd-sp-8)),transparent);
  mask-image:linear-gradient(to right,transparent,var(--rd-ink-1) var(--rd-sp-8) calc(100% - var(--rd-sp-8)),transparent)}
/* Liquid Glass: the context bar is the lower half of the floating slab - its rim, rounded corners and blur
   are the bar's own box, so a fade on the bar would erase them over its last 32px. The bar is never masked
   there; on a phone it stops scrolling and the KB subnav inside it scrolls instead, carrying the fade
   (rd_shell.js marks the subnav only while the bar is a rounded slab). Every other theme: exactly as above. */
html.rd[data-rd-theme="glass-dark"] .rd-ctx{-webkit-mask-image:none;mask-image:none}
@media (max-width:720px){
  html.rd[data-rd-theme="glass-dark"] .rd-ctx{overflow:hidden}
  /* with a subnav, the subnav is what scrolls; with none, a scope string longer than the phone scrolls inside the bar
     (hidden, with no scroller, would cut it off for good). The rounded clip stays either way. */
  html.rd[data-rd-theme="glass-dark"] .rd-ctx:not(:has(.rd-subnav)){overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  html.rd[data-rd-theme="glass-dark"] .rd-subnav{overflow-x:auto;overflow-y:hidden}
}

/* ============================================================================ components
   The vocabulary the page commits build from. Classes are the API - keep them; restyle here only. */

/* --- button: one height, one weight, three emphases (+ danger). The page's ONE primary is the accent (the
   house gold, the brand navy or sky). In the glass themes a button carries a rim (--rd-btn-rim, lit from the
   top left) and a lip of light (--rd-btn-shadow), no backdrop blur; Liquid Glass's primary is a sky gradient
   with its own lip and glow (--rd-btn-primary-bg / -shadow). Undefined elsewhere: today's flat buttons. */
.rd .rd-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--rd-sp-2);height:var(--rd-h-md);
  padding:0 var(--rd-sp-4);border:var(--rd-bw) solid transparent;border-radius:var(--rd-r-control);
  font-family:var(--rd-font-sans);font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm);
  font-weight:var(--rd-fw-medium);white-space:nowrap;text-decoration:none;cursor:pointer;
  background:var(--rd-s1);border-color:var(--rd-btn-rim, var(--rd-line-strong));color:var(--rd-ink-1);box-shadow:var(--rd-btn-shadow, none);
  transition:background-color var(--rd-dur-1) ease,border-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out),
    filter var(--rd-dur-1) ease}
@media (hover:hover){.rd .rd-btn:hover:not(:disabled){background:var(--rd-s2)}}
.rd .rd-btn:active:not(:disabled){scale:.97}
.rd .rd-btn:disabled,.rd .rd-btn[aria-disabled="true"]{opacity:.45;cursor:default}
.rd .rd-btn-primary{background:var(--rd-btn-primary-bg, var(--rd-accent));border-color:transparent;color:var(--rd-accent-ink);
  box-shadow:var(--rd-btn-primary-shadow, none)}
/* under the pointer: the accent lifted a step - or, where the primary is a gradient, the same gradient
   lifted, so it never flattens to a single colour on hover */
@media (hover:hover){
  .rd .rd-btn-primary:hover:not(:disabled){background:var(--rd-btn-primary-bg, var(--rd-accent-hover))}
  html.rd[data-rd-theme="glass-dark"] .rd-btn-primary:hover:not(:disabled){filter:brightness(1.08)}
}
.rd .rd-btn-ghost{background:transparent;border-color:transparent;color:var(--rd-ink-2);box-shadow:none}
@media (hover:hover){.rd .rd-btn-ghost:hover:not(:disabled){background:var(--rd-hover);color:var(--rd-ink-1)}}
.rd .rd-btn-danger{background:transparent;border-color:var(--rd-btn-rim, var(--rd-line-strong));color:var(--rd-danger)}
@media (hover:hover){.rd .rd-btn-danger:hover:not(:disabled){background:var(--rd-danger-soft)}}
.rd .rd-btn-sm{height:var(--rd-h-sm);padding:0 var(--rd-sp-3)}
.rd .rd-btn[aria-busy="true"]{cursor:progress}

/* --- icon button (always with an aria-label) */
.rd .rd-icon-btn{display:inline-grid;place-items:center;width:var(--rd-h-md);height:var(--rd-h-md);flex:none;
  border:0;border-radius:var(--rd-r-control);background:transparent;color:var(--rd-ink-2);cursor:pointer;
  transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
@media (hover:hover){.rd .rd-icon-btn:hover:not(:disabled){background:var(--rd-hover);color:var(--rd-ink-1)}}
.rd .rd-icon-btn:active:not(:disabled){scale:.94}
.rd .rd-icon-btn-sm{width:var(--rd-h-sm);height:var(--rd-h-sm)}

/* --- field: a label-less input wrapper (icon + input + count/kbd), and the bare controls. Every text entry
   is on the BODY step (16px) at every width (Stage 6, one type scale): iOS Safari zooms the page when a field
   under 16px takes focus, and does not zoom back. */
.rd .rd-field{display:inline-flex;align-items:center;gap:var(--rd-sp-2);height:var(--rd-h-md);min-width:0;
  padding:0 var(--rd-sp-2) 0 var(--rd-sp-3);border:var(--rd-border-strong);border-radius:var(--rd-r-control);
  background:var(--rd-sunk);color:var(--rd-ink-3);transition:border-color var(--rd-dur-1) ease,box-shadow var(--rd-dur-1) ease}
.rd .rd-field:focus-within{border-color:var(--rd-accent-ring);box-shadow:0 0 0 3px var(--rd-accent-line)}
.rd .rd-field input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;color:var(--rd-ink-1);
  font:inherit;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body)}
.rd .rd-field input::placeholder{color:var(--rd-ink-3);opacity:1}
.rd .rd-field-sm{height:var(--rd-h-sm)}
.rd .rd-input,.rd .rd-select,.rd .rd-textarea{width:100%;min-height:var(--rd-h-md);padding:0 var(--rd-sp-3);
  border:var(--rd-border-strong);border-radius:var(--rd-r-control);background:var(--rd-sunk);color:var(--rd-ink-1);
  font-family:var(--rd-font-sans);font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body);
  transition:border-color var(--rd-dur-1) ease,box-shadow var(--rd-dur-1) ease}
.rd .rd-select{background:var(--rd-s1)}  /* SOLID in every theme, glass too: Chrome paints the option list from it */
.rd .rd-textarea{padding:var(--rd-sp-2) var(--rd-sp-3);resize:vertical}
.rd .rd-input:focus,.rd .rd-select:focus,.rd .rd-textarea:focus{outline:none;border-color:var(--rd-accent-ring);box-shadow:0 0 0 3px var(--rd-accent-line)}
.rd .rd-label{display:block;margin-bottom:var(--rd-sp-1);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-medium);color:var(--rd-ink-2)}

/* --- segmented control (view toggles, small tab sets) */
.rd .rd-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;flex:none;border:var(--rd-border);
  border-radius:var(--rd-r-control);background:var(--rd-sunk)}
.rd .rd-seg button,.rd .rd-seg a{display:inline-flex;align-items:center;gap:var(--rd-sp-1);height:calc(var(--rd-h-sm) - 4px);
  padding:0 var(--rd-sp-3);border:0;border-radius:var(--rd-r-chip);background:none;color:var(--rd-ink-2);
  font:inherit;letter-spacing:inherit;font-weight:var(--rd-fw-medium);white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease}
.rd .rd-seg [aria-selected="true"],.rd .rd-seg [aria-pressed="true"],.rd .rd-seg [aria-current]{
  background:var(--rd-s2);color:var(--rd-ink-1);box-shadow:0 0 0 1px var(--rd-line-strong)}

/* --- badge (status) and tag (label) */
.rd .rd-badge{display:inline-flex;align-items:center;gap:var(--rd-sp-1);height:22px;padding:0 var(--rd-sp-2);
  border-radius:var(--rd-r-chip);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);
  font-weight:var(--rd-fw-medium);white-space:nowrap;color:var(--rd-ink-2);
  background:color-mix(in oklab,var(--rd-ink-3) 16%,transparent)}
.rd .rd-badge-ok{color:var(--rd-ok);background:var(--rd-ok-soft)}
.rd .rd-badge-warn{color:var(--rd-warn);background:var(--rd-warn-soft)}
.rd .rd-badge-danger{color:var(--rd-danger);background:var(--rd-danger-soft)}
.rd .rd-badge-info{color:var(--rd-info);background:var(--rd-info-soft)}
.rd .rd-badge-accent{color:var(--rd-accent-text);background:var(--rd-accent-soft)}
.rd .rd-dot{width:6px;height:6px;border-radius:var(--rd-r-full);background:currentColor;flex:none}
.rd .rd-tag{display:inline-flex;align-items:center;height:20px;padding:0 var(--rd-sp-2);border:var(--rd-border);
  border-radius:var(--rd-r-chip);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caps);text-transform:uppercase;font-weight:var(--rd-fw-semi);color:var(--rd-ink-2)}
.rd .rd-tag-accent{color:var(--rd-accent-text);border-color:var(--rd-accent-line)}
.rd .rd-chip{display:inline-flex;align-items:center;gap:var(--rd-sp-1);height:24px;padding:0 var(--rd-sp-2);
  border:var(--rd-border);border-radius:var(--rd-r-chip);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  font-weight:var(--rd-fw-medium);color:var(--rd-ink-2);white-space:nowrap}

/* --- key-cap */
.rd .rd-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 var(--rd-sp-1);
  border:var(--rd-border);border-radius:var(--rd-r-chip);background:var(--rd-s1);box-shadow:inset 0 -1px 0 var(--rd-line);
  font-family:var(--rd-font-mono);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);font-weight:var(--rd-fw-medium);color:var(--rd-ink-2)}

/* --- page frame + page head: title left, the page's actions right (one primary) */
.rd .rd-page{width:100%;max-width:1360px;margin:0 auto;padding:var(--rd-sp-8) var(--rd-sp-8) var(--rd-sp-12)}
/* ONE header for every redesigned page: the title on the heading step, then at most one plain sentence
   and one figures line, BOTH on body-sm (hierarchy from weight and ink, never a third size). No
   uppercase eyebrow, no slogan - the context bar above already names the page and its audience. */
.rd .rd-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--rd-sp-6);
  padding:var(--rd-sp-2) 0 var(--rd-sp-8)}
.rd .rd-pagehead-text{min-width:0}
.rd .rd-pagehead-title{margin:0;font-size:var(--rd-fs-heading);line-height:var(--rd-lh-heading);letter-spacing:var(--rd-tr-heading);
  font-weight:var(--rd-fw-semi);color:var(--rd-ink-1)}
.rd .rd-pagehead-sub{margin:var(--rd-sp-2) 0 0;max-width:96ch;font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);
  letter-spacing:var(--rd-tr-body-sm);color:var(--rd-ink-2);text-wrap:pretty}
.rd .rd-pagehead-actions{display:flex;align-items:center;gap:var(--rd-sp-2);flex:none}
/* ONE page header on every redesigned page (2026-10-10): title (heading step), at most one plain
   sentence under it (body step), then an optional figures line (body-sm step, tabular): items are
   <span>s separated by a middot drawn here, never typed. No uppercase eyebrow, no slogan. */
.rd .rd-pagehead-meta{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--rd-sp-2);row-gap:var(--rd-sp-1);
  margin:var(--rd-sp-2) 0 0;padding:0;list-style:none;font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);
  letter-spacing:var(--rd-tr-body-sm);color:var(--rd-ink-3);font-variant-numeric:tabular-nums}
.rd .rd-pagehead-meta > *{display:inline-flex;align-items:center;gap:var(--rd-sp-1)}
.rd .rd-pagehead-meta > * + *::before{content:"";width:3px;height:3px;margin-right:var(--rd-sp-1);border-radius:var(--rd-r-full);
  background:var(--rd-ink-3);opacity:.6}
.rd .rd-pagehead-meta b,.rd .rd-pagehead-meta strong{font-weight:var(--rd-fw-semi);color:var(--rd-ink-1)}
.rd .rd-pagehead-sub + .rd-pagehead-meta{margin-top:var(--rd-sp-1)}
@media (max-width:720px){
  .rd .rd-pagehead{flex-direction:column;align-items:stretch;gap:var(--rd-sp-4);padding:0 0 var(--rd-sp-6)}
  .rd .rd-pagehead-title{font-size:var(--rd-fs-title);line-height:var(--rd-lh-title);letter-spacing:var(--rd-tr-title)}
  .rd .rd-pagehead-actions{flex-wrap:wrap}
  .rd .rd-pagehead-actions .rd-btn{flex:1 1 auto;height:var(--rd-h-lg)}
  /* a wrapped figures line must never start with a separator: the gap does the separating */
  .rd .rd-pagehead-meta{column-gap:var(--rd-sp-4)}
  .rd .rd-pagehead-meta > * + *::before{display:none}
}
.rd .rd-eyebrow{margin:0 0 var(--rd-sp-2);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caps);text-transform:uppercase;font-weight:var(--rd-fw-semi);color:var(--rd-accent-text)}

/* --- section: no box - a title over a rule, its content under it */
.rd .rd-sec{margin-top:var(--rd-sp-12)}
.rd .rd-sec:first-child{margin-top:0}
.rd .rd-sec-head{display:flex;align-items:baseline;gap:var(--rd-sp-3);padding-bottom:var(--rd-sp-3);border-bottom:var(--rd-border-strong)}
.rd .rd-sec-title{margin:0;font-size:var(--rd-fs-title);line-height:var(--rd-lh-title);letter-spacing:var(--rd-tr-title);
  font-weight:var(--rd-fw-semi);color:var(--rd-ink-1)}
.rd .rd-sec-note{font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);color:var(--rd-ink-2)}
.rd .rd-sec-actions{margin-left:auto;display:flex;gap:var(--rd-sp-2);align-self:center}

/* --- KPI band: ONE ruled band, columns sharing their borders */
.rd .rd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-bottom:var(--rd-border)}
.rd .rd-kpi{position:relative;min-width:0;padding:var(--rd-sp-6) var(--rd-sp-6) var(--rd-sp-6) 0}
.rd .rd-kpi + .rd-kpi{padding-left:var(--rd-sp-6);border-left:var(--rd-border)}
.rd .rd-kpi-label{font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);
  font-weight:var(--rd-fw-medium);color:var(--rd-ink-2)}
.rd .rd-kpi-value{margin-top:var(--rd-sp-2);font-family:var(--rd-font-mono);font-size:var(--rd-fs-heading);line-height:var(--rd-lh-heading);
  letter-spacing:var(--rd-tr-heading);font-weight:var(--rd-fw-medium);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--rd-ink-1)}
.rd .rd-kpi-meta{margin-top:var(--rd-sp-1);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);color:var(--rd-ink-2)}
.rd .rd-kpi-alert .rd-kpi-value{color:var(--rd-warn)}

/* --- data table: no box, rows ruled, figures right-aligned in tabular mono */
.rd .rd-table-wrap{overflow-x:auto}
.rd .rd-dt{width:100%;border-collapse:separate;border-spacing:0}
.rd .rd-dt th{position:sticky;top:0;z-index:var(--rd-z-raised);height:36px;padding:0 var(--rd-sp-3);text-align:left;white-space:nowrap;
  background:var(--rd-bg);border-bottom:var(--rd-border-strong);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-medium);color:var(--rd-ink-2)}
.rd .rd-dt td{height:40px;padding:0 var(--rd-sp-3);border-bottom:var(--rd-border);vertical-align:middle;color:var(--rd-ink-1)}
.rd .rd-dt th:first-child,.rd .rd-dt td:first-child{padding-left:0}
.rd .rd-dt tbody tr{transition:background-color var(--rd-dur-1) ease}
@media (hover:hover){.rd .rd-dt tbody tr:hover{background:var(--rd-hover)}}
.rd .rd-dt .rd-c-num{text-align:right;font-family:var(--rd-font-mono);font-variant-numeric:tabular-nums}
.rd .rd-dt .rd-c-act{width:1%;white-space:nowrap}
.rd .rd-dt th[aria-sort]{color:var(--rd-ink-1)}
.rd .rd-dt .rd-is-sel,.rd .rd-dt [aria-selected="true"]{background:var(--rd-accent-soft)}
.rd .rd-empty-cell{color:var(--rd-ink-3)}

/* --- empty / error state: say what happened and what to do next */
.rd .rd-empty{display:flex;flex-direction:column;align-items:center;gap:var(--rd-sp-2);padding:var(--rd-sp-12) var(--rd-sp-4);text-align:center;color:var(--rd-ink-2)}
.rd .rd-empty-title{margin:0;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body);font-weight:var(--rd-fw-medium);color:var(--rd-ink-1)}
.rd .rd-empty .rd-i{width:var(--rd-icon-lg);height:var(--rd-icon-lg);color:var(--rd-ink-3)}
.rd .rd-error{color:var(--rd-danger)}

/* --- notice: an inline, full-width note (info / warn / danger). Content, not a control: in the glass themes
   the quiet translucent content fill (--rd-surface), never blurred. */
.rd .rd-notice{display:flex;gap:var(--rd-sp-3);align-items:flex-start;padding:var(--rd-sp-3) var(--rd-sp-4);
  border:var(--rd-border);border-left:2px solid var(--rd-info);border-radius:var(--rd-r-control);background:var(--rd-surface, var(--rd-s1));color:var(--rd-ink-2)}
.rd .rd-notice-warn{border-left-color:var(--rd-warn)}
.rd .rd-notice-danger{border-left-color:var(--rd-danger)}

/* --- overlays: scrim + dialog, menu, toast. Overlays open on .rd-open over opacity + scale (never
   display), dialogs scale from .96 and fade; under reduced motion the distance is 0.
   Glass (Stage 6): a dialog is the floating-control glass (--rd-glass-bg through --rd-float-blur) with the
   strong rim; a menu takes the strong rim on a near-opaque fill and no blur of its own (--rd-glass-solid: one
   that opens inside a blurred bar could only blur the bar); a toast is glass with the ordinary ink
   (--rd-toast-bg / -ink) instead of today's inverted chip. */
.rd .rd-scrim{position:fixed;inset:0;z-index:var(--rd-z-scrim);background:var(--rd-scrim);
  opacity:0;pointer-events:none;transition:opacity var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-scrim.rd-open{opacity:1;pointer-events:auto}
.rd .rd-dialog{width:min(480px,calc(100vw - 2 * var(--rd-sp-4)));max-height:calc(100dvh - 2 * var(--rd-sp-8));overflow:auto;
  padding:var(--rd-sp-6);border:var(--rd-border-strong);border-color:var(--rd-rim-strong, var(--rd-line-strong));border-radius:var(--rd-r-overlay);
  background:var(--rd-glass-bg, var(--rd-s1));box-shadow:var(--rd-shadow-3);
  -webkit-backdrop-filter:var(--rd-float-blur, none);backdrop-filter:var(--rd-float-blur, none);
  color:var(--rd-ink-1);scale:.96;opacity:0;transition:scale var(--rd-dur-3) var(--rd-ease-out),opacity var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-open .rd-dialog,.rd .rd-dialog.rd-open{scale:1;opacity:1}
.rd .rd-dialog-title{margin:0 0 var(--rd-sp-2);font-size:var(--rd-fs-title);line-height:var(--rd-lh-title);letter-spacing:var(--rd-tr-title);font-weight:var(--rd-fw-semi)}
.rd .rd-dialog-body{font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body);color:var(--rd-ink-2)}
.rd .rd-dialog-foot{display:flex;gap:var(--rd-sp-2);justify-content:flex-end;margin-top:var(--rd-sp-6)}
.rd .rd-dialog-foot .rd-left{margin-right:auto}
.rd .rd-menu{min-width:200px;padding:var(--rd-sp-1);border:var(--rd-border-strong);border-color:var(--rd-rim-strong, var(--rd-line-strong));
  border-radius:var(--rd-r-surface);background:var(--rd-glass-solid, var(--rd-s1));box-shadow:var(--rd-shadow-2);z-index:var(--rd-z-dropdown)}
.rd .rd-menu-item{display:flex;align-items:center;gap:var(--rd-sp-2);width:100%;height:var(--rd-h-sm);padding:0 var(--rd-sp-2);
  border:0;border-radius:var(--rd-r-chip);background:none;color:var(--rd-ink-1);font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
@media (hover:hover){.rd .rd-menu-item:hover:not(:disabled){background:var(--rd-hover)}}
.rd .rd-menu-item:disabled{color:var(--rd-ink-3);cursor:default}
.rd .rd-menu-item-danger{color:var(--rd-danger)}
.rd .rd-menu-sep{height:1px;margin:var(--rd-sp-1) 0;background:var(--rd-line)}
.rd .rd-toast{position:fixed;left:50%;bottom:var(--rd-sp-6);z-index:var(--rd-z-toast);translate:-50% calc(var(--rd-m) * 12px);opacity:0;
  padding:var(--rd-sp-2) var(--rd-sp-4);border-radius:var(--rd-r-control);background:var(--rd-toast-bg, var(--rd-ink-1));color:var(--rd-toast-ink, var(--rd-bg));
  box-shadow:var(--rd-shadow-2);-webkit-backdrop-filter:var(--rd-float-blur, none);backdrop-filter:var(--rd-float-blur, none);
  pointer-events:none;transition:opacity var(--rd-dur-2) var(--rd-ease-out),translate var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-toast.rd-open{opacity:1;translate:-50% 0;pointer-events:auto}

/* --- switch: a <button aria-pressed> drawn as a switch (keeps its role + text, e.g. "· On/Off") */
.rd .rd-switch{display:inline-flex;align-items:center;gap:var(--rd-sp-2);height:var(--rd-h-sm);padding:0 var(--rd-sp-2) 0 var(--rd-sp-1);
  border:0;border-radius:var(--rd-r-control);background:none;color:var(--rd-ink-2);font:inherit;letter-spacing:inherit;cursor:pointer}
.rd .rd-switch::before{content:"";width:26px;height:16px;flex:none;border-radius:var(--rd-r-full);background:var(--rd-line-strong);
  box-shadow:inset 0 0 0 1px var(--rd-line-strong);transition:background-color var(--rd-dur-2) var(--rd-ease-out)}
.rd .rd-switch[aria-pressed="true"]{color:var(--rd-ink-1)}
.rd .rd-switch[aria-pressed="true"]::before{background:var(--rd-accent)}

/* ============================================================================ preferences */
@media (prefers-reduced-motion:reduce){
  .rd .rd-btn:active,.rd .rd-icon-btn:active,.rd .rd-acct-link:active{scale:1}
  .rd .rd-nav-item::after{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .rd .rd-bar{background:var(--rd-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media print{
  .rd .rd-top{position:static;box-shadow:none}
  .rd .rd-side,.rd .rd-side-scrim,.rd .rd-bar,.rd .rd-subnav,.rd .rd-theme{display:none}
  .rd body:has(> .rd-chrome){padding-left:0}
}

/* Bidbrain theme (Christian, 2026-10-10): the shared premium layer (_premium.html) draws its focus
   ring and text selection from --bb-accent, which kb.css sets to the house gold - point it at the
   brand navy, and give selected text readable ink. Scoped to the brand theme: Light and Dark keep
   exactly what they had. */
.rd[data-rd-theme="brand"]{--bb-accent:var(--rd-accent)}
.rd[data-rd-theme="brand"] ::selection{background:var(--rd-accent-soft);color:var(--rd-ink-1)}
.rd[data-rd-theme="brand"] .rd-subnav a:focus-visible{outline-color:var(--rd-accent-ring)}
/* Bidbrain Dark (2026-10-11): the same three, so the premium layer's ring, glow and selection are the brand
   sky on the ink-navy and not the house gold. Selected text keeps the near-white ink on the sky tint (11.4:1). */
.rd[data-rd-theme="brand-dark"]{--bb-accent:var(--rd-accent)}
.rd[data-rd-theme="brand-dark"] ::selection{background:var(--rd-accent-soft);color:var(--rd-ink-1)}
.rd[data-rd-theme="brand-dark"] .rd-subnav a:focus-visible{outline-color:var(--rd-accent-ring)}
/* Liquid Glass and Midnight Glass (Stage 6): the same three - the brand sky for the premium layer's ring and
   glow, near-white ink on the sky tint for selected text, the sky ring on the subnav. */
.rd[data-rd-theme="glass-dark"],.rd[data-rd-theme="midnight-dark"]{--bb-accent:var(--rd-accent)}
.rd[data-rd-theme="glass-dark"] ::selection,.rd[data-rd-theme="midnight-dark"] ::selection{background:var(--rd-accent-soft);color:var(--rd-ink-1)}
.rd[data-rd-theme="glass-dark"] .rd-subnav a:focus-visible,.rd[data-rd-theme="midnight-dark"] .rd-subnav a:focus-visible{outline-color:var(--rd-accent-ring)}

/* --- glass (Stage 6) ---------------------------------------------------------------------------------
   Liquid Glass and Midnight Glass (rd_tokens.css). Everything here reads a material role that ONLY the two
   glass themes define, so in the four other themes it computes nothing (C1: parity by construction). */

/* the glow: three static radial lights of the brand sky, ONE fixed layer under the whole page, never
   animated. Behind everything (z -1 in the root's stacking context); a page ground that paints var(--rd-bg)
   reads var(--rd-ground, ...) instead, or it covers the light. --rd-glow is none in more contrast.
   Scoped to the two glass themes (controller ruling R15): unscoped, the layer generated a box in the four
   other themes too (html::before display inline -> block, a material-parity drift) even with no light in it. */
html.rd[data-rd-theme="glass-dark"]::before,html.rd[data-rd-theme="midnight-dark"]::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--rd-glow, none)}
@media print{ html.rd[data-rd-theme="glass-dark"]::before,html.rd[data-rd-theme="midnight-dark"]::before{display:none} }
/* ...and the ground UNDER the glow (ruling R22): the page grounds read --rd-ground (transparent) so the light
   shows, which leaves nothing painting the root - the browser's white canvas showed through. ONE rule paints
   the root with --rd-bg in the two glass themes. A colour only, so a page that draws its own root image (the
   sign-in's gradient) keeps it, and Home's html.rd[data-rd-page="home"]{background:var(--rd-bg)} computes the
   same ground. The four other themes are untouched. */
html.rd[data-rd-theme="glass-dark"],html.rd[data-rd-theme="midnight-dark"]{background-color:var(--rd-bg)}

/* the pointer highlight: a soft light on the glass under the pointer (Liquid Glass only). Elements that
   should catch it carry data-rd-spec - bars, composers, the Tools menu, dialogs - never the sign-in card.
   rd_glass.js writes --rd-mx / --rd-my on the hovered element; the solid tier and the preferences turn the
   colour transparent, and reduced transparency drops the layer outright. */
html.rd[data-rd-theme="glass-dark"]:not(.rd-tier-solid) [data-rd-spec]{
  background-image:radial-gradient(var(--rd-spec-size) at var(--rd-mx) var(--rd-my), var(--rd-spec-color), transparent 70%)}
@media (prefers-reduced-transparency:reduce){
  html.rd[data-rd-theme="glass-dark"] [data-rd-spec]{background-image:none}
}

/* the lens's SVG filter (#rdLens, templates/_rd_icons.html) lives in an off-screen 0x0 holder: an svg with
   display:none would take its filter with it */
.rd .rd-lens-defs{position:absolute;width:0;height:0;overflow:hidden}

/* The Ask launcher (#kbFab, _rd_ask_fab.html) floats bottom right on every staff page. Give the page room
   to scroll its last card clear of it, so it never sits on a figure at the end of a page (the brief's
   Numbers panel at 390px, the task sheet's Save) - same rule as the dashboards' pill (#bbx-room). */
.rd body:has(#kbFab):not(.kb){padding-bottom:calc(var(--rd-sp-16) + var(--rd-sp-6))}
/* the knowledge base is a fixed-height app whose panes scroll (kb.css): room under the page would only be a dead strip */

/* an agency's own lockup in the sidebar (rd.brand, 2026-10-19): its logo over "Powered by Bidbrain"; in the rail, the
   logo alone */
.rd .rd-brand-agency{display:flex;align-items:center;gap:var(--rd-sp-2);height:auto;min-height:var(--rd-h-md);padding:var(--rd-sp-1) var(--rd-sp-2)}
.rd .rd-brand-agency .rd-brand-mark{display:inline-grid;place-items:center;flex:none}
.rd .rd-brand-agency .rd-brand-mark img,.rd .rd-brand-agency .rd-brand-mark svg{display:block;height:34px;width:auto}
.rd .rd-brand-by{display:flex;flex-direction:column;min-width:0;color:var(--rd-ink-3);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);white-space:nowrap}
.rd .rd-brand-by b{color:var(--rd-ink-1);font-weight:var(--rd-fw-semi)}
html.rd[data-rd-rail]:not([data-rd-peek]) .rd-brand-agency{width:32px;padding:0}
html.rd[data-rd-rail]:not([data-rd-peek]) .rd-brand-agency .rd-brand-by{display:none}
html.rd[data-rd-rail]:not([data-rd-peek]) .rd-brand-agency .rd-brand-mark img{height:24px}
/* 100% Digital's Home picture (templates/_home_art.html): an animated lockup - the frame draws itself, the words
   rise in, a light sweeps the tile, the tile floats in a green halo. Reduced motion: the finished lockup, still. */
.rd .rd-hm-brandart{display:grid;place-items:center}
.rd .rd-hm-brandhalo{position:absolute;inset:-4% 6%;border-radius:var(--rd-r-full);
  background:radial-gradient(closest-side,color-mix(in oklab,var(--rd-x100-green) 45%,transparent),transparent);
  animation:rdX100Halo 5s ease-in-out infinite}
.rd .rd-x100{position:relative;display:block;width:86%;height:auto;overflow:visible;
  filter:drop-shadow(0 18px 30px var(--rd-x100-shadow))}
.rd .rd-x100-s1{stop-color:var(--rd-x100-green)}
.rd .rd-x100-s2{stop-color:var(--rd-x100-deep)}
.rd .rd-x100-sh0{stop-color:var(--rd-x100-clear)}
.rd .rd-x100-sh1{stop-color:var(--rd-x100-shine)}
.rd .rd-x100-float{transform-box:fill-box;transform-origin:center;animation:rdX100Float 8s ease-in-out 2s infinite}
.rd .rd-x100-frame{fill:none;stroke:var(--rd-x100-white);stroke-width:7;stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:rdX100Draw 1.6s cubic-bezier(.6,0,.2,1) .2s forwards}
.rd .rd-x100-big{fill:var(--rd-x100-white);font-family:var(--rd-font-sans);font-weight:var(--rd-fw-semi);
  opacity:0;animation:rdX100Rise .8s cubic-bezier(.2,.8,.2,1) .7s forwards}
.rd .rd-x100-word{fill:var(--rd-x100-white);font-family:var(--rd-font-sans);font-weight:var(--rd-fw-semi);
  opacity:0;animation:rdX100Rise .8s cubic-bezier(.2,.8,.2,1) 1s forwards}
.rd .rd-x100-by{opacity:0;animation:rdX100Fade .8s ease 1.6s forwards}
.rd .rd-x100-small{fill:var(--rd-x100-mist);font-family:var(--rd-font-sans)}
.rd .rd-x100-bb{fill:var(--rd-x100-white);font-weight:var(--rd-fw-semi)}
/* the Bidbrain mark beside "Powered by": white on the tile, glowing softly in turn */
.rd .rd-x100-mark{color:var(--rd-x100-white);overflow:visible;animation:rdX100Glow 3s ease-in-out 2.4s infinite}
@keyframes rdX100Glow{50%{opacity:.7}}
.rd .rd-x100-shine{animation:rdX100Shine 5.5s ease-in-out 1.8s infinite}
@keyframes rdX100Draw{to{stroke-dashoffset:0}}
@keyframes rdX100Rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes rdX100Fade{to{opacity:1}}
@keyframes rdX100Float{50%{translate:0 -7px}}
@keyframes rdX100Halo{50%{opacity:.55;scale:.94}}
@keyframes rdX100Pulse{50%{opacity:.35;scale:.7}}
@keyframes rdX100Shine{0%{translate:0 0}45%,100%{translate:820px 0}}
@media (prefers-reduced-motion:reduce){
  .rd .rd-hm-brandhalo,.rd .rd-x100-float,.rd .rd-x100-shine,.rd .rd-x100-mark{animation:none}
  .rd .rd-x100-frame{animation:none;stroke-dashoffset:0}
  .rd .rd-x100-big,.rd .rd-x100-word,.rd .rd-x100-by{animation:none;opacity:1}
}
/* the sidebar's "Powered by Bidbrain": the Bidbrain mark beside the name */
.rd .rd-brand-bb{display:inline-flex;align-items:center;gap:var(--rd-sp-1)}
.rd .rd-brand-bb .rd-brand-bbmark{display:block;width:14px;height:14px;flex:none;color:var(--rd-accent)}
.rd .rd-brand-agency,.rd .rd-brand-agency:hover{text-decoration:none}