/*
  R3FTO application stylesheet (Task 046).

  The visual authority is design-system/project (component READMEs win over screen previews); this file is
  the consolidation of the preview classes into one stylesheet for the Razor product. It consumes only the
  custom properties of tokens.css (a byte-for-byte copy of design-system/handoff/tokens.css) and adds no
  colour, size or motion value of its own beyond what the previews use. One dark theme, no theme switch.

  Component roots are the preview class names. Where two previews used one name for different things the
  rule is scoped under its component root (e.g. `.notif .ph`, `.pg .pgb`), never renamed silently.
  No inline style is used anywhere in the product: layout helpers at the end cover the few spacing needs
  the previews expressed inline. Breakpoints: phone <= 480px, tablet 768-1279px, desktop >= 1280px.
*/

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--canvas); }
body {
  background: var(--canvas);
  color: var(--text-primary);
  font: var(--type-body-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, svg { display: block; }
svg.ico, .ico { display: inline-block; }
a { color: var(--neon-crimson); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--space-16); top: -100px; z-index: 50; height: var(--control-height-compact);
  display: inline-flex; align-items: center; padding: 0 var(--space-16); border-radius: var(--radius-control);
  background: var(--neon-crimson); color: var(--on-crimson); font: 500 14px/20px var(--font-sans);
}
.skip:focus { top: var(--space-12); text-decoration: none; }

/* Standalone text links and icon actions keep a >= 24px target without moving layout (Accessibility). */
.ph a:not(.btn), td a:not(.btn), .crumbs a, .lnk a, .links a, footer a:not(.btn), .actions a:not(.btn),
.fin .r, .ai .a a, .menu a, .pf a, .df a, .banner .r a, .ft li a, .legal a, .go, .link-row a {
  display: inline-flex; align-items: center; min-height: 24px;
}

.ico {
  width: var(--icon-size); height: var(--icon-size); stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.ico.s16 { width: 16px; height: 16px; }
.ico.s14 { width: 14px; height: 14px; }
.ico.s32 { width: 32px; height: 32px; }

/* ---------------------------------------------------------------- type helpers (tokens.css owns .meta etc.) */
.muted { color: var(--text-muted); }
.secondary-text { color: var(--text-secondary); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.ok-text { color: var(--success-green); }
.warn-text { color: var(--warning-amber); }
.btn.danger-text { color: var(--neon-crimson); }
span.danger-text { color: var(--danger-critical); }
.badge.brand-outline { border-color: rgba(255, 51, 92, .6); color: var(--neon-crimson); background: transparent; }
.secret-in { border-color: var(--warning-amber); }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.key-text { font-weight: 700; letter-spacing: .1em; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------------------------------------------------------------- wordmark */
.wm {
  display: inline-flex; align-items: center; font-weight: 900; letter-spacing: -0.01em; line-height: 1;
  color: var(--wordmark-r3f); text-decoration: none; font-size: 22px; min-height: 40px;
}
.wm:hover { text-decoration: none; }
.wm .chip {
  display: inline-flex; align-items: center; margin-left: .10em; padding: 0 .14em; height: .86em;
  border-radius: .08em; background: var(--neon-crimson); color: var(--on-crimson); font-size: .78em;
}
.wm .node {
  display: inline-block; width: .24em; height: .24em; border: .07em solid currentColor; border-radius: 50%;
  margin-right: .05em; transform: translateY(.02em);
}
.wm.s20 { font-size: 20px; }
.wm.quiet { color: var(--wordmark-r3f); }
.wm.quiet .to { color: var(--wordmark-to); font-size: .78em; margin-left: .06em; display: inline-flex; align-items: center; }
.wm.quiet .node { color: var(--wordmark-node); }

/* ---------------------------------------------------------------- buttons */
.btn {
  height: var(--control-height); padding: 0 var(--space-24); border-radius: var(--radius-panel);
  font: 500 14px/20px var(--font-sans); display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-8); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--duration-ui) ease-out, border-color var(--duration-ui) ease-out, color var(--duration-ui) ease-out;
}
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--neon-crimson); color: var(--on-crimson); }
.btn.secondary { background: transparent; border-color: var(--border); color: var(--text-primary); }
.btn.secondary:hover { background: var(--surface-2); }
.btn.ghost { background: transparent; color: var(--text-primary); padding: 0 var(--space-12); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: transparent; border-color: var(--danger-critical); color: var(--danger-critical); }
.btn.compact { height: var(--control-height-compact); padding: 0 var(--space-16); }
.btn.small { height: 32px; padding: 0 var(--space-12); font-size: 13px; }
.btn.block { width: 100%; }
.btn:focus-visible { outline: none; border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn .spin { width: 16px; height: 16px; }
.btn.primary .spin { border-color: rgba(23, 10, 14, .3); border-top-color: var(--on-crimson); }

/* ---------------------------------------------------------------- status badge, tags */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); font: 500 12px/16px var(--font-sans);
  color: var(--text-secondary); white-space: nowrap; vertical-align: middle;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok, .badge.success { color: var(--success-green); }
.badge.warn, .badge.warning { color: var(--warning-amber); }
.badge.danger { color: var(--danger-critical); }
.badge.info { color: var(--info-cyan); }
.badge.brand { color: var(--neon-crimson); }
.badge.neutral::before { background: var(--text-muted); }
.badge.sm { height: 18px; padding: 0 6px; font-size: 11px; }
.badge.sm::before { width: 6px; height: 6px; }
.badge.plain::before { display: none; }
.tag-test {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-control);
  border: 1px solid var(--info-cyan); color: var(--info-cyan); background: rgba(53, 189, 245, .08);
  font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
}
.tag-internal {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-control);
  border: 1px solid var(--warning-amber); color: var(--warning-amber); background: rgba(243, 179, 64, .08);
  font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
}
.src {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-control);
  border: 1px solid var(--border); color: var(--text-secondary); font: 600 10px/14px var(--font-sans); letter-spacing: .04em;
}

.spill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); font: 600 11px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.spill.rv { color: var(--neon-crimson); border-color: rgba(255, 51, 92, .4); }
.spill.pv { color: var(--info-cyan); border-color: rgba(53, 189, 245, .4); }
.spill .ico { width: 14px; height: 14px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.sec-h h2 { font: var(--type-h3); margin: 0; display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.sec-h p { font: var(--type-meta); color: var(--text-muted); margin: 0; }
.linkbox { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--canvas); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; max-width: 100%; }
.linkbox b { color: var(--neon-crimson); font-weight: 600; }

details.more > summary { cursor: pointer; font: 500 13px/20px var(--font-sans); color: var(--text-secondary); padding: var(--space-4) 0; width: max-content; }
details.more[open] > summary { margin-bottom: var(--space-12); }

/* ---------------------------------------------------------------- top bar (TopBar) */
.top {
  position: sticky; top: 0; z-index: 10; height: var(--topbar-height); background: var(--surface-1);
  border-bottom: 1px solid var(--border); display: grid; align-items: center;
  /* the links stay centred while both sides fit; a wide right group (switcher + environment chip + account) pushes them
     left instead of overlapping them */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  gap: var(--space-16); padding: 0 var(--space-24);
}
.top.site { background: var(--canvas); }
.top * { white-space: nowrap; }
.top .l, .top .r { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.top .r { justify-content: flex-end; }
.links { display: flex; gap: var(--space-4); }
.links a {
  height: var(--control-height-compact); display: inline-flex; align-items: center; padding: 0 var(--space-12);
  border-radius: var(--radius-control); color: var(--text-secondary); font: 500 14px/20px var(--font-sans);
  text-decoration: none; position: relative;
}
.links a:hover { color: var(--text-primary); text-decoration: none; }
.links a[aria-current="page"] { color: var(--text-primary); }
.links a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-12); right: var(--space-12); bottom: -14px; height: 2px;
  background: var(--neon-crimson);
}
.ib {
  position: relative; width: var(--control-height-compact); height: var(--control-height-compact);
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-control);
  border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; flex: none;
}
.ib:hover, .ib[aria-expanded="true"] { color: var(--text-primary); background: var(--surface-2); }
.ib .dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--neon-crimson);
  border: 2px solid var(--surface-1);
}
.ib .cnt {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
  background: var(--neon-crimson); color: var(--on-crimson); font: 600 10px/16px var(--font-sans); text-align: center;
  border: 2px solid var(--canvas); box-sizing: content-box; /* NotificationPanel: the unread pill rings in canvas */
}
.dash {
  height: var(--control-height-compact); display: inline-flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-12);
  border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--text-primary);
  font: 500 14px/20px var(--font-sans); text-decoration: none;
}
.dash:hover { background: var(--surface-2); text-decoration: none; }
.dash .ico { color: var(--text-secondary); width: 16px; height: 16px; }
.ws {
  height: var(--control-height-compact); display: inline-flex; align-items: center; gap: var(--space-8);
  padding: 0 var(--space-8) 0 var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface-2); color: var(--text-primary); font: 500 14px/20px var(--font-sans); cursor: pointer; max-width: 320px;
}
.ws .k { font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ws .n { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ws .ico { color: var(--text-secondary); width: 16px; height: 16px; }
.ws[aria-expanded="true"] { border-color: var(--text-muted); }
.env {
  height: var(--control-height-compact); display: inline-flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-12);
  border-radius: var(--radius-control); font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; text-decoration: none;
}
.env:hover { text-decoration: none; }
.env::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success-green); }
.env.test { color: var(--info-cyan); border-color: var(--info-cyan); background: rgba(53, 189, 245, .08); }
.env.test::before { background: var(--info-cyan); }
.env[aria-disabled="true"] { cursor: default; }
.scope {
  height: var(--control-height-compact); display: inline-flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-12);
  border-radius: var(--radius-control); border: 1px solid var(--warning-amber); color: var(--warning-amber);
  background: rgba(243, 179, 64, .08); font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
}
.top .me {
  display: inline-flex; align-items: center; gap: var(--space-8); height: var(--control-height-compact);
  padding: 0 var(--space-8) 0 var(--space-4); border-radius: var(--radius-control); background: transparent; border: 0;
  color: var(--text-primary); font: 500 14px/20px var(--font-sans); cursor: pointer;
}
.top .me:hover, .top .me[aria-expanded="true"] { background: var(--surface-2); }
.top .me .me-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.av {
  width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; font: 700 11px/16px var(--font-sans);
  color: var(--text-secondary); flex: none; overflow: hidden;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--border); object-fit: cover; background: var(--surface-2); }
.avatar-lg.ph { display: inline-flex; align-items: center; justify-content: center; font: 700 28px/1 var(--font-sans); color: var(--text-secondary); }
.sep { width: 1px; height: 24px; background: var(--border); margin: 0 var(--space-4); }
.subbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 40px;
  padding: 0 var(--space-32); background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.crumbs { display: flex; align-items: center; gap: var(--space-8); font: 400 13px/20px var(--font-sans); color: var(--text-secondary); min-width: 0; flex-wrap: wrap; }
.crumbs a { color: var(--text-secondary); }
.crumbs a:hover { color: var(--text-primary); text-decoration: none; }
.crumbs .ico { width: 16px; height: 16px; color: var(--text-muted); }
.crumbs b { color: var(--text-primary); font-weight: 500; }
.subbar .meta-r { font: 400 12px/16px var(--font-sans); color: var(--text-muted); display: flex; gap: var(--space-12); align-items: center; flex-wrap: wrap; }
.envstrip {
  display: flex; align-items: center; gap: var(--space-12); min-height: 36px; padding: 0 var(--space-32);
  border-bottom: 1px solid var(--border); background: var(--surface-1); font: 400 12px/16px var(--font-sans); color: var(--text-secondary);
}
.envstrip.test { background: rgba(53, 189, 245, .08); border-bottom-color: var(--info-cyan); color: var(--text-primary); }
.envstrip a { font-weight: 500; min-height: 24px; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------- menus and popovers (surface-elevated) */
.popover-host { position: relative; display: inline-flex; }
.menu {
  position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); width: 300px; background: var(--surface-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); overflow: hidden;
  padding: var(--space-4) 0;
}
.menu.left { right: auto; left: 0; }
.menu .mh { padding: var(--space-8) var(--space-16) var(--space-4); font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.menu a, .menu button.mi {
  display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-12); align-items: center; min-height: 40px;
  padding: 4px var(--space-16); color: var(--text-primary); font: 500 14px/20px var(--font-sans); text-decoration: none;
  white-space: nowrap; width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer;
}
.menu a:hover, .menu button.mi:hover, .menu a:focus-visible, .menu button.mi:focus-visible { background: var(--surface-2); text-decoration: none; border-radius: 0; }
.menu a .ico, .menu button.mi .ico { color: var(--text-secondary); }
.menu small { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); display: block; }
.menu .chk { color: var(--neon-crimson); width: 16px; height: 16px; }
.menu .cur { background: var(--surface-2); font-weight: 600; }
.menu .cur .ico:first-child { color: var(--neon-crimson); }
.menu .div { height: 1px; background: var(--border); margin: var(--space-4) 0; }
.menu .id { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-16) var(--space-12); }
.menu .id .av { width: 36px; height: 36px; font-size: 12px; }
.menu .id b { display: block; font: 600 14px/20px var(--font-sans); color: var(--text-primary); }
.menu .id span { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); }
.menu form { margin: 0; }

/* ---------------------------------------------------------------- notification panel */
.notif { width: 380px; padding: 0; }
.notif .ph { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--space-8) 0 var(--space-16); border-bottom: 1px solid var(--border); background: transparent; }
.notif .ph h3 { font: 700 16px/24px var(--font-sans); display: flex; align-items: center; gap: var(--space-8); }
.notif .ph .n { display: inline-flex; align-items: center; height: 18px; font: 600 11px/1 var(--font-sans); color: var(--on-crimson); background: var(--neon-crimson); border-radius: var(--radius-pill); padding: 0 7px; }
.notif .list { max-height: 420px; overflow: auto; }
.notif .grp { height: 32px; display: flex; align-items: center; padding: 0 var(--space-16); font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-2); }
.notif .it {
  display: grid; grid-template-columns: 32px 1fr 8px; gap: var(--space-12); align-items: start; padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; cursor: pointer; width: 100%; background: transparent;
  border-left: 0; border-right: 0; border-top: 0; text-align: left;
}
.notif .it:hover { background: var(--surface-2); text-decoration: none; }
.notif .it .ic { width: 32px; height: 32px; border-radius: var(--radius-control); background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.notif .it .ic.warn { color: var(--warning-amber); } .notif .it .ic.ok { color: var(--success-green); }
.notif .it .ic.info { color: var(--info-cyan); } .notif .it .ic.danger { color: var(--danger-critical); }
.notif .it .t { display: block; font: 400 14px/20px var(--font-sans); color: var(--text-primary); white-space: normal; }
.notif .it.unread .t { font-weight: 600; }
.notif .it .m { display: block; font: 400 12px/16px var(--font-sans); color: var(--text-secondary); margin-top: 2px; white-space: normal; }
.notif .it .udot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-crimson); margin-top: 6px; visibility: hidden; }
.notif .it.unread .udot { visibility: visible; }
.notif .pf { height: 44px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--border); }
.notif .pf a { font: 500 13px/16px var(--font-sans); gap: 4px; }
.notif.page { width: auto; }
.notif.page .list { max-height: none; }

/* ---------------------------------------------------------------- application shell */
.app { display: flex; align-items: stretch; min-height: calc(100vh - var(--topbar-height)); }
/* the sidebar column stretches with the page (its surface and right border run the full height); only .side-in sticks */
.side { width: var(--sidebar-width); flex: none; background: var(--surface-1); border-right: 1px solid var(--border); }
.side-in { display: flex; flex-direction: column; position: sticky; top: var(--topbar-height); height: calc(100vh - var(--topbar-height)); }
.side .head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-8) var(--space-24); border-bottom: 1px solid var(--border); }
.side .wsh { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.side .wsh b { font: 600 14px/20px var(--font-sans); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .ctx { font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.side .ctx.admin { color: var(--warning-amber); }
.side nav { padding: var(--space-8) 0; overflow: auto; flex: 1; }
.side .sec { font: 700 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: var(--space-12) var(--space-24) var(--space-4); }
.nv {
  height: var(--nav-item-height); display: flex; align-items: center; gap: var(--space-12); padding: 0 var(--space-24);
  color: var(--text-secondary); font: 500 14px/20px var(--font-sans); text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-ui) ease-out, color var(--duration-ui) ease-out;
}
.nv:hover { color: var(--text-primary); text-decoration: none; }
.nv[aria-current="page"], .nv.active { background: var(--active-fill); color: var(--neon-crimson); font-weight: 600; }
.nv[aria-current="page"] .ico, .nv.active .ico { color: var(--neon-crimson); }
/* the selected game's sections, nested under the active Games item: indented, 36px rows, no icons, a hairline guide */
.nv-sub { display: flex; flex-direction: column; margin: 0 0 var(--space-4) 56px; padding-left: 0; border-left: 1px solid var(--border); }
.nv-sub .nv { height: 36px; padding: 0 var(--space-12) 0 var(--space-24); margin-right: var(--space-8); border-radius: 0 var(--radius-control) var(--radius-control) 0; font-size: 14px; }
.nv .n { margin-left: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--neon-crimson); color: var(--on-crimson); font: 600 11px/1 var(--font-sans); }
.nv .n.q { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }
.side .foot { padding: var(--space-12) var(--space-24); border-top: 1px solid var(--border); font: 400 12px/16px var(--font-sans); color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); }
.livedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); margin-right: 6px; flex: none; }
[data-realtime-status="live"] .livedot { background: var(--success-green); }
[data-realtime-status="reconnecting"] .livedot, [data-realtime-status="connecting"] .livedot { background: var(--warning-amber); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content {
  padding: var(--content-padding); display: flex; flex-direction: column; gap: var(--space-32); width: 100%;
  max-width: calc(var(--content-max-width) + 2 * var(--content-padding)); margin: 0 auto;
  background: radial-gradient(120% 60% at 50% -10%, rgba(255, 51, 92, .06), transparent 60%);
}
/* a wide table scrolls inside its .tbl-wrap; it never widens the page */
.content > *, .stack > *, .pnl, .pnl > .pb { min-width: 0; }
.content.form-page { max-width: calc(var(--form-max-width) + 2 * var(--content-padding) + 320px); }
.menu-btn { display: none; }

/* page header */
.hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; }
.hdr h1 { font: var(--type-h1-dashboard); display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.hdr h1.h2 { font: var(--type-h2); }
.hdr .sub { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-8); flex-wrap: wrap; color: var(--text-secondary); }
.hdr .sub > a { min-height: 24px; display: inline-flex; align-items: center; }
.chart details > summary { min-height: 24px; display: flex; align-items: center; width: max-content; cursor: pointer; }
.hdr .acts { display: flex; gap: var(--space-8); flex: none; flex-wrap: wrap; }
.keyline {
  display: inline-flex; align-items: center; gap: var(--space-8); height: 36px; padding: 0 var(--space-12);
  border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-1);
  font: 500 13px/1 var(--font-sans); color: var(--text-secondary); white-space: nowrap;
}
.keyline b { color: var(--text-primary); font-weight: 700; letter-spacing: .1em; font-size: 15px; }
.lnk { font: 400 13px/16px var(--font-sans); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lnk b { color: var(--text-primary); font-weight: 500; }
.lnk .ico { width: 14px; height: 14px; color: var(--text-muted); }

/* ---------------------------------------------------------------- panels (Panel) */
.pnl { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; min-width: 0; }
.pnl > .ph {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 14px var(--space-24);
  background: var(--surface-2); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.pnl > .ph h2, .pnl > .ph h3 { font: var(--type-panel-title); display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.pnl > .ph a { font: 500 13px/16px var(--font-sans); white-space: nowrap; }
.pnl > .ph .meta-r { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.pnl > .pb { padding: var(--space-24); }
.pnl > .pb.tight { padding: var(--space-16) var(--space-24) var(--space-24); }
.pnl > .pb.flush { padding: 0; }
.pnl > .tools { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--border); }
.pnl > .tools:empty { display: none; }
.pnl > .pf { padding: var(--space-16) var(--space-24); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--space-12); flex-wrap: wrap; }
.pnl > .pf:has(> .pg) { padding: 0; }
.pnl > .pf > .pg { width: 100%; border-top: 0; background: transparent; }
.ctl { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--space-12) var(--space-24); font: 400 14px/20px var(--font-sans); margin: 0; }
.kv dt { color: var(--text-secondary); margin: 0; }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.kv dd .m { color: var(--text-muted); }
.kv.end dd { text-align: right; }
.kv.compact { font-size: 13px; line-height: 18px; gap: var(--space-8) var(--space-16); }

/* grids */
.grid { display: grid; gap: var(--panel-gap); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-24); align-items: start; }
.two.wide-side { grid-template-columns: minmax(0, 1fr) 380px; }
.split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-24); align-items: start; }

/* ---------------------------------------------------------------- KPI cards (KpiCard) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-16); }
.kpis.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel);
  padding: var(--space-16) var(--space-16) var(--space-12); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; margin: 0;
}
.kpi.large { padding: var(--space-24); gap: var(--space-8); }
.kpi .eye { font: 600 12px/16px var(--font-sans); color: var(--text-secondary); margin: 0; min-height: 32px; display: flex; justify-content: space-between; gap: var(--space-8); }
.kpi.large .eye { font: var(--type-eyebrow); text-transform: uppercase; min-height: 0; }
.kpi .val { font: 700 28px/36px var(--font-sans); margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi.large .val { font: var(--type-kpi); }
.kpi .val.brand { color: var(--neon-crimson); }
.kpi .val.na { color: var(--text-muted); }
.kpi .sub { font: 400 12px/16px var(--font-sans); color: var(--text-muted); margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kpi .up { color: var(--success-green); }
.kpi .dn { color: var(--warning-amber); }
.kpi .info-btn { width: 24px; height: 24px; margin: -4px -4px 0 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer; flex: none; }
.kpi .info-btn .ico { width: 16px; height: 16px; }
.info-btn[aria-expanded="true"] { color: var(--text-primary); box-shadow: var(--focus-ring); }
/* one meta line: source tag, short finality and as-of; the full provenance is in the popover (KpiCard README) */
.kpi .sub .prov-line { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; flex-wrap: nowrap; }
.kpi .sub .prov-line .ellipsis { flex: 1 1 auto; }
.popover-host.prov { position: relative; display: inline-flex; flex: none; }
.popover-host.prov .pop { right: -8px; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 2 * var(--space-16)); font-weight: 400; text-transform: none; letter-spacing: 0; }
.kpi div.eye > h3 { font: inherit; margin: 0; }
.pop .pop-t { font: 600 14px/20px var(--font-sans); color: var(--text-primary); }
.pop .pop-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.pop .pop-h .ib { width: 32px; height: 32px; }
.pop .kv { grid-template-columns: 112px minmax(0, 1fr); }
.pop .kv dt { color: var(--text-secondary); }
.pop .kv dd { color: var(--text-primary); }
.live-pulse { transition: color var(--duration-live) ease-in-out; }

/* the money-state row (CreatorEarningsLedger): the first four states are a pipeline joined by chevrons */
.fas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-12); }
.fas.f6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fas .fa { padding: var(--space-16); gap: var(--space-4); height: 100%; }
.fas .fa .amt .v { font: 700 22px/30px var(--font-sans); }
.fas .fa .eye { font: var(--type-label); text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.fas .fa .meta-r { font: 400 12px/16px var(--font-sans); }
.fas .pipe { position: relative; min-width: 0; }
.fas .pipe > .ico { position: absolute; right: -14px; top: 50%; margin-top: -8px; color: var(--text-muted); z-index: 1; }

/* the operational status strip (PublisherOverview): one cell per fact family; colour only when it carries a state */
.opstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.opc { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-12); padding: var(--space-16); border-right: 1px solid var(--border); align-items: start; }
.opc:last-child { border-right: 0; }
.opc .ico { color: var(--text-muted); margin-top: 2px; }
.opc.warn .ico { color: var(--warning-amber); }
.opc .t { font: 600 14px/20px var(--font-sans); color: var(--text-primary); }
.opc .d { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); margin-top: 2px; }
.opc a { display: inline-flex; margin-top: var(--space-8); font: 500 13px/16px var(--font-sans); min-height: 24px; align-items: center; }

/* finance strip under KPIs */
.fin {
  display: flex; align-items: center; gap: var(--space-24); padding: var(--space-12) var(--space-16); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius-panel); font: 400 13px/18px var(--font-sans); color: var(--text-secondary); flex-wrap: wrap;
}
.fin .f { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.fin .f b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.fin .f small { color: var(--text-muted); }
.fin .r { margin-left: auto; font-weight: 500; white-space: nowrap; gap: 4px; }

/* finance amount block (FinanceAmountBlock) */
.fa { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.fa.raised { background: var(--surface-2); }
.fa .fa-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.fa .eye { font: var(--type-eyebrow); text-transform: uppercase; color: var(--text-secondary); margin: 0; }
.fa .amt { display: flex; align-items: baseline; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.fa .amt .cur { font: 600 14px/20px var(--font-sans); color: var(--text-secondary); }
.fa .amt .v { font: var(--type-kpi); color: var(--text-primary); }
.fa .amt .v.brand { color: var(--neon-crimson); }
.fa .amt .v.provisional { color: var(--text-secondary); }
.fa .ref { font: 400 13px/18px var(--font-sans); color: var(--text-secondary); margin: 0; }
.fa .meta-r { font: 400 12px/16px var(--font-sans); color: var(--text-muted); margin: 0; display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.fa .fa-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-top: var(--space-4); padding-top: var(--space-12); border-top: 1px solid var(--border); }
.fa .fa-split div { display: flex; flex-direction: column; }
.fa .fa-split .l { font: 400 11px/16px var(--font-sans); color: var(--text-muted); }
.fa .fa-split .n { font: 600 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; }

/* attention list (CreatorOverview) */
.att { display: flex; flex-direction: column; }
.ai { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--border); align-items: start; }
.ai:last-child { border-bottom: 0; }
.ai .ico { margin-top: 1px; color: var(--text-secondary); }
.ai.warn .ico { color: var(--warning-amber); } .ai.err .ico { color: var(--danger-critical); } .ai.ok .ico { color: var(--success-green); }
.ai .t { font: 500 14px/20px var(--font-sans); color: var(--text-primary); }
.ai .d { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); margin-top: 2px; }
.ai .a { display: inline-flex; margin-top: var(--space-8); gap: var(--space-8); flex-wrap: wrap; }
.ai .a a { font: 500 13px/16px var(--font-sans); }

/* checklist rows (readiness) */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-12); align-items: start; padding: var(--space-12) var(--space-24); border-bottom: 1px solid var(--border); }
.checklist li:last-child { border-bottom: 0; }
.checklist.status-end li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.grid.align-start { align-items: start; }
.checklist .ico.done { color: var(--success-green); } .checklist .ico.todo { color: var(--text-muted); } .checklist .ico.blocked { color: var(--warning-amber); }
.checklist .t { font: 500 14px/20px var(--font-sans); } .checklist .d { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); margin-top: 2px; }

/* platform capability rows (PlatformCapabilityRow) */
.caps { list-style: none; margin: 0; padding: 0; }
.cap { display: grid; grid-template-columns: minmax(160px, 220px) 1fr auto; gap: var(--space-16); align-items: center; padding: var(--space-12) var(--space-24); border-bottom: 1px solid var(--border); }
.cap:last-child { border-bottom: 0; }
.cap .pf-name { display: inline-flex; align-items: center; gap: var(--space-8); font-weight: 500; }
.cap .pf-name .ico { color: var(--text-secondary); }
.cap .states { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.cap .asof { font: 400 12px/16px var(--font-sans); color: var(--text-muted); white-space: nowrap; }

/* ---------------------------------------------------------------- tables (Table) */
/* position: relative keeps absolutely positioned descendants (the .sr-only reason of a dash cell) inside the scroller;
   otherwise they escape the clip and widen the whole page */
.tbl-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  height: var(--table-header-height); text-align: left; padding: 0 var(--space-16); font: 600 12px/16px var(--font-sans);
  color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2);
}
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td { height: var(--table-row-height); padding: 6px var(--space-16); border-bottom: 1px solid var(--border); font: 400 14px/20px var(--font-sans); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr[aria-selected="true"], .tbl tbody tr.sel { background: var(--active-fill); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl:not(.cards) td.primary-cell, .tbl.cards td.primary-cell { min-width: 180px; }
.tbl tbody tr.clickable:hover { background: var(--surface-2); }
.tbl td .meta-l { display: block; font: 400 12px/16px var(--font-sans); color: var(--text-secondary); }
.tbl td.act { width: 1%; white-space: nowrap; text-align: right; }
.tbl .g { display: inline-flex; align-items: center; gap: var(--space-12); }
.tbl .cov { width: 32px; height: 32px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); flex: none; object-fit: cover; }
.tbl .g b { font-weight: 500; }
.tbl .cov.round { border-radius: 50%; }
.tbl .g.nowrap { white-space: nowrap; }
.tbl .g small { display: block; font: 400 12px/16px var(--font-sans); color: var(--text-secondary); }
.tbl th button.sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
.tbl th[aria-sort="ascending"] button.sort, .tbl th[aria-sort="descending"] button.sort { color: var(--text-primary); }
.mv { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/16px var(--font-sans); }
.mv.up { color: var(--success-green); } .mv.dn { color: var(--warning-amber); }
.locked { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 12px; }

/* ---------------------------------------------------------------- forms (Input, FormField) */
.form { display: flex; flex-direction: column; gap: var(--space-24); max-width: var(--form-max-width); }
.form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }
.form legend { padding: 0; margin: 0 0 var(--space-16); font: var(--type-panel-title); color: var(--text-primary); display: flex; align-items: baseline; gap: var(--space-12); }
.form legend small { font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.f { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.lbl { font: 600 12px/16px var(--font-sans); color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.lbl .req { color: var(--neon-crimson); }
.lbl .opt { font-weight: 400; color: var(--text-muted); }
.in {
  height: var(--control-height); padding: 0 var(--space-16); border-radius: var(--radius-control); background: var(--canvas);
  border: 1px solid var(--border); color: var(--text-primary); font: 400 14px/20px var(--font-sans); width: 100%; outline: none;
  transition: border-color var(--duration-ui) ease-out, box-shadow var(--duration-ui) ease-out;
}
.in::placeholder { color: var(--text-muted); }
.in:focus { border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.in[aria-invalid="true"], .in.invalid { border-color: var(--danger-critical); }
.in[readonly] { color: var(--text-secondary); background: var(--surface-1); border-style: dashed; }
.in[disabled] { opacity: .45; cursor: not-allowed; }
.in.compact { height: var(--control-height-compact); padding: 0 var(--space-12); font-size: 13px; }
textarea.in { height: auto; min-height: 96px; padding: 12px var(--space-16); resize: vertical; line-height: 20px; }
select.in {
  appearance: none; padding-right: var(--space-40);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
input[type="file"].in { padding: 10px var(--space-16); height: auto; }
/* filePicker: the native input is visually hidden but focusable; its Button-styled label shows its focus */
.filepick { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; min-width: 0; }
.filepick .file-in { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; opacity: 0; }
.filepick .file-in:focus-visible + label { border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.filepick .file-in[aria-invalid="true"] + label { border-color: var(--danger-critical); }
.filepick .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.help { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.err { font: 400 12px/16px var(--font-sans); color: var(--danger-critical); display: flex; gap: 6px; align-items: center; }
.err .ico { width: 14px; height: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-24); }
.aff { display: flex; align-items: stretch; height: var(--control-height); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--canvas); overflow: hidden; }
.aff:focus-within { border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.aff .in { border: 0; box-shadow: none; height: 100%; flex: 1; min-width: 0; }
.aff .ad { display: flex; align-items: center; padding: 0 var(--space-12); font: 500 14px/20px var(--font-sans); color: var(--text-secondary); background: var(--surface-1); white-space: nowrap; }
.aff .ad.l { border-right: 1px solid var(--border); } .aff .ad.r { border-left: 1px solid var(--border); }
.choice { display: flex; flex-direction: column; gap: var(--space-12); }
.opt { display: flex; gap: var(--space-12); align-items: flex-start; cursor: pointer; }
.opt input[type="radio"], .opt input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--neon-crimson); flex: none; }
.opt .t { font: 400 14px/20px var(--font-sans); color: var(--text-primary); }
.opt .d { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); display: block; margin-top: 2px; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-12) 0; border-top: 1px solid var(--border); }
.sw-row:last-child { border-bottom: 1px solid var(--border); }
.sw-row .t, .sw-row .help { display: block; }
.form fieldset.toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-24); row-gap: 0; }
.form fieldset.toggles > legend { grid-column: 1 / -1; }
.form fieldset.toggles .sw-row { padding: var(--space-8) 0; }
.ctl .sw-row, .ctl .sw-row:last-child { border: 0; padding: 0; gap: var(--space-8); font-size: 13px; }
.tog { appearance: none; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); position: relative; flex: none; margin: 0; cursor: pointer; }
.tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-secondary); transition: left var(--duration-ui) ease-out; }
.tog:checked { background: var(--neon-crimson); border-color: transparent; }
.tog:checked::after { left: 19px; background: var(--on-crimson); }
.tog:focus-visible { box-shadow: var(--focus-ring); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-top: var(--space-24); border-top: 1px solid var(--border); flex-wrap: wrap; }
.form-foot .st { font: 400 12px/16px var(--font-sans); color: var(--text-muted); padding: 0; display: inline; text-align: left; } /* not the EmptyState .st */
.form-foot .acts { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.warnbox { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-12) var(--space-16); border: 1px solid var(--warning-amber); border-radius: var(--radius-panel); background: var(--surface-1); font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.warnbox .ico { color: var(--warning-amber); flex: none; margin-top: 1px; }
.warnbox b { color: var(--text-primary); font-weight: 500; display: block; }
.secret { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16); border: 1px dashed var(--border); border-radius: var(--radius-control); background: var(--canvas); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------------------------------------------------------------- filters (FilterBar, TimeWindow) */
.fb { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; height: var(--control-height-compact); }
.seg button, .seg a { padding: 0 var(--space-12); border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text-secondary); font: 500 13px/16px var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }
.seg button:last-child, .seg a:last-child { border-right: 0; }
.seg button[aria-pressed="true"], .seg a[aria-current="true"] { background: var(--surface-elevated); color: var(--text-primary); font-weight: 600; }
.seg button:focus-visible, .seg a:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 51, 92, .35); border-radius: 0; }
.fbtn { height: var(--control-height-compact); display: inline-flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-control); background: transparent; color: var(--text-primary); font: 500 14px/20px var(--font-sans); cursor: pointer; white-space: nowrap; }
.fbtn .ico { color: var(--text-secondary); }
.fbtn.on { border-color: var(--neon-crimson); }
.fbtn .n { display: inline-flex; align-items: center; justify-content: center; height: 18px; font: 600 11px/1 var(--font-sans); color: var(--on-crimson); background: var(--neon-crimson); border-radius: var(--radius-pill); padding: 0 6px; min-width: 18px; }
.q { height: var(--control-height-compact); display: inline-flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-12); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--text-muted); width: 260px; max-width: 100%; }
.q:focus-within { border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.q input { border: 0; background: transparent; color: var(--text-primary); font: 400 14px/20px var(--font-sans); flex: 1; min-width: 0; outline: none; align-self: stretch; }
.q .ico { color: var(--text-secondary); }
.fb select.in, .fb input.in { height: var(--control-height-compact); width: auto; font-size: 13px; padding: 0 var(--space-12); }
.fb select.in { padding-right: var(--space-32); }
.in.compact, .ctl select.in, .ctl input.in { height: var(--control-height-compact); width: auto; max-width: 100%; font-size: 13px; padding: 0 var(--space-12); }
select.in.compact, .ctl select.in { padding-right: var(--space-32); }
/* FilterBar select trigger: `Label · Value` + outline chevron around a native <select> (filterSelect) */
.fsel {
  position: relative; height: var(--control-height-compact); display: inline-flex; align-items: center; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-control); background: transparent; cursor: pointer;
}
.fsel:hover { background: var(--surface-2); }
.fsel:focus-within { border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.fsel .fsel-l { padding-left: var(--space-12); font: 500 13px/16px var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
.fsel .fsel-l::after { content: "\00a0·"; }
.fb .fsel select.in, .ctl .fsel select.in, .fsel select.in {
  height: 100%; border: 0; box-shadow: none; background-color: transparent; color: var(--text-primary); font: 500 13px/16px var(--font-sans);
  padding: 0 var(--space-32) 0 6px; min-width: 0; max-width: 260px; text-overflow: ellipsis; cursor: pointer;
  background-image: none;
}
.fsel select.in:focus { box-shadow: none; }
.fsel::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 1.75px solid var(--text-secondary); border-bottom: 1.75px solid var(--text-secondary); transform: rotate(45deg);
}
.fsel select.in option { background: var(--surface-elevated); color: var(--text-primary); }
.spacer { flex: 1; }
.count { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.applied { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.fchip { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-primary); font: 500 12px/16px var(--font-sans); }
.fchip small { color: var(--text-muted); font-weight: 400; }
.fchip button { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; padding: 0; }
.fchip button .ico { width: 12px; height: 12px; }
.clear { background: none; border: 0; color: var(--neon-crimson); font: 500 12px/16px var(--font-sans); cursor: pointer; padding: 0 var(--space-4); min-height: 24px; }

/* ---------------------------------------------------------------- pagination (Pagination) */
.pg { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 52px; padding: var(--space-8) var(--space-16); background: var(--surface-1); border-top: 1px solid var(--border); flex-wrap: wrap; }
.pg .range { font: 400 13px/16px var(--font-sans); color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg .range b { color: var(--text-primary); font-weight: 500; }
.pg .nav { display: inline-flex; align-items: center; gap: var(--space-8); }
.pg .pgb { height: var(--control-height-compact); padding: 0 var(--space-12); border-radius: var(--radius-control); border: 1px solid var(--border); background: transparent; color: var(--text-primary); font: 500 13px/16px var(--font-sans); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.pg .pgb .ico { width: 16px; height: 16px; }
.pg .pgb[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- states (EmptyState, Feedback, ScreenStates) */
.st { padding: var(--space-32) var(--space-24); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.st.boxed { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.st > .ico { width: 32px; height: 32px; color: var(--text-muted); }
.st.warn > .ico { color: var(--warning-amber); }
.st.err > .ico { color: var(--danger-critical); }
.st h3 { font: var(--type-panel-title); margin: var(--space-8) 0 0; }
.st p { font: 400 14px/20px var(--font-sans); color: var(--text-secondary); margin: 0; max-width: 420px; }
.st .btn { margin-top: var(--space-8); }
.banner { display: flex; align-items: center; gap: var(--space-12); min-height: 44px; padding: var(--space-8) var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-1); font: 400 13px/18px var(--font-sans); color: var(--text-secondary); flex-wrap: wrap; }
.banner b { color: var(--text-primary); font-weight: 500; }
.banner > span:not(.r) { flex: 1 1 240px; min-width: 0; }
.banner .ico { flex: none; color: var(--text-secondary); }
.banner.warn .ico { color: var(--warning-amber); }
.banner.err .ico { color: var(--danger-critical); }
.banner.ok .ico { color: var(--success-green); }
.banner.info .ico { color: var(--info-cyan); }
.banner .r { margin-left: auto; display: flex; align-items: center; gap: var(--space-8); white-space: nowrap; }
.banner .r a { font-weight: 500; font-size: 13px; }
.banners { display: flex; flex-direction: column; gap: var(--space-12); }
.realtime-banner { display: none; }
[data-realtime-stale="true"][data-realtime-status="reconnecting"] .realtime-banner { display: flex; }
.toasts { position: fixed; z-index: 50; right: var(--space-24); bottom: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); width: 420px; max-width: calc(100vw - 2 * var(--space-16)); }
.toast { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-12); align-items: start; padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16); background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); }
.toast .ico { margin-top: 2px; }
.toast.ok .ico { color: var(--success-green); } .toast.err .ico { color: var(--danger-critical); } .toast.info .ico { color: var(--text-secondary); }
.toast .t { font: 500 14px/20px var(--font-sans); color: var(--text-primary); }
.toast .m { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); margin-top: 2px; }
.toast .x { width: 32px; height: 32px; border-radius: var(--radius-control); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--neon-crimson); display: inline-block; flex: none; animation: r3fto-spin 800ms linear infinite; }
.bone { background: var(--surface-2); border-radius: 4px; position: relative; overflow: hidden; display: block; height: 14px; }
.bone.h28 { height: 28px; } .bone.w40 { width: 40%; } .bone.w60 { width: 60%; } .bone.w80 { width: 80%; }
.bone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 244, 247, .05), transparent); animation: r3fto-sheen 1.4s ease-in-out infinite; }
.skeleton { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24); }
@keyframes r3fto-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes r3fto-spin { to { transform: rotate(360deg); } }
progress.bar, meter.bar { appearance: none; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--surface-2); overflow: hidden; display: block; }
progress.bar::-webkit-progress-bar, meter.bar::-webkit-meter-bar { background: var(--surface-2); border-radius: 2px; border: 0; }
progress.bar::-webkit-progress-value { background: var(--neon-crimson); border-radius: 2px; }
progress.bar::-moz-progress-bar { background: var(--neon-crimson); border-radius: 2px; }
meter.bar::-webkit-meter-optimum-value { background: var(--neon-crimson); }
meter.bar::-moz-meter-bar { background: var(--neon-crimson); }

/* ---------------------------------------------------------------- overlays (Drawer, ConfirmModal, ProvenancePopover) */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(23, 10, 14, .72); }
dialog.modal { width: 480px; max-width: calc(100vw - 2 * var(--space-16)); padding: 0; background: var(--surface-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); }
dialog.modal.wide { width: 640px; }
dialog.modal::backdrop { background: rgba(23, 10, 14, .72); }
dialog.modal[open] { animation: r3fto-modal-in var(--duration-ui) ease-out; }
dialog.modal header { padding: 20px var(--space-24); display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); border-bottom: 1px solid var(--border); }
dialog.modal h2 { font: var(--type-panel-title); }
dialog.modal .body { padding: var(--space-24); font: 400 14px/20px var(--font-sans); color: var(--text-secondary); display: flex; flex-direction: column; gap: var(--space-16); }
dialog.modal .body strong { color: var(--text-primary); }
dialog.modal footer { padding: var(--space-16) var(--space-24); display: flex; justify-content: flex-end; gap: var(--space-12); border-top: 1px solid var(--border); flex-wrap: wrap; }
@keyframes r3fto-modal-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
dialog.drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: 480px; max-width: 100vw; padding: 0; background: var(--surface-elevated); color: var(--text-primary); border: 0; border-left: 1px solid var(--border); box-shadow: var(--shadow-overlay); }
dialog.drawer.left { margin: 0 auto 0 0; width: 300px; border-left: 0; border-right: 1px solid var(--border); background: var(--surface-1); }
dialog.drawer::backdrop { background: rgba(23, 10, 14, .72); }
dialog.drawer[open] { display: flex; flex-direction: column; animation: r3fto-drawer-in var(--duration-ui) ease-out; }
dialog.drawer.left[open] { animation-name: r3fto-drawer-in-left; }
@keyframes r3fto-drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes r3fto-drawer-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
dialog.drawer .dh { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-16) var(--space-8) var(--space-16) var(--space-24); border-bottom: 1px solid var(--border); }
dialog.drawer .dh .tt { flex: 1; min-width: 0; }
dialog.drawer .dh .eyebrow { text-transform: uppercase; color: var(--text-secondary); }
dialog.drawer .dh h2 { margin: 2px 0 0; font: var(--type-panel-title); display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
dialog.drawer .db { flex: 1; overflow: auto; padding: var(--space-16) var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); }
dialog.drawer .df { display: flex; gap: var(--space-8); align-items: center; padding: var(--space-16) var(--space-24); border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
dialog.drawer.left nav { padding: var(--space-8) 0; overflow: auto; flex: 1; }
.pop { position: absolute; z-index: 40; width: 320px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.pop h3 { font: 600 14px/20px var(--font-sans); color: var(--text-primary); }

/* ---------------------------------------------------------------- charts (Chart) */
figure.chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.ch-host { width: 100%; min-width: 0; }
svg.ch { width: 100%; height: auto; overflow: visible; }
svg.ch text { font: 400 12px var(--font-sans); fill: var(--text-muted); }
svg.ch .gl line { stroke: var(--border); stroke-width: 1; }
svg.ch .s1 { stroke: var(--neon-crimson); stroke-width: 2; fill: none; stroke-linejoin: round; }
svg.ch .s0 { stroke: var(--text-muted); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-dasharray: 4 4; }
svg.ch .s2 { stroke: var(--info-cyan); stroke-width: 2; fill: none; stroke-linejoin: round; }
svg.ch .bar1 { fill: var(--neon-crimson); }
svg.ch .dotp { fill: var(--neon-crimson); }
.leg { display: flex; gap: var(--space-16); font: 400 12px/16px var(--font-sans); color: var(--text-secondary); flex-wrap: wrap; }
.leg span { display: inline-flex; align-items: center; gap: 6px; }
.swl { display: inline-block; width: 14px; height: 2px; background: var(--neon-crimson); }
.swl.p { background: var(--text-muted); }
.swl.c { background: var(--info-cyan); }
figcaption.chart-summary { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }

/* ---------------------------------------------------------------- messaging (MessagingInbox, MessageBubble, Composer) */
.inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 560px; }
.inbox .list { border-right: 1px solid var(--border); overflow: auto; }
.crow { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; align-items: start; }
.crow:hover { background: var(--surface-2); text-decoration: none; }
.crow[aria-current="true"] { background: var(--active-fill); }
.crow[aria-current="true"] .nm { color: var(--neon-crimson); }
.thread .th .back { display: none; }
.crow .nm { font: 500 14px/20px var(--font-sans); color: var(--text-primary); display: flex; gap: var(--space-8); align-items: center; min-width: 0; }
.crow .pv { display: block; font: 400 12px/16px var(--font-sans); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow > .grow { min-width: 0; }
.crow .av { width: 32px; height: 32px; }
.crow .tm { font: 400 12px/16px var(--font-sans); color: var(--text-muted); white-space: nowrap; text-align: right; }
.crow .un { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--neon-crimson); color: var(--on-crimson); font: 600 11px/1 var(--font-sans); margin-top: 4px; }
.thread { display: flex; flex-direction: column; min-width: 0; }
.thread .th { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12) var(--space-24); border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.thread .msgs { flex: 1; overflow: auto; padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.msg { max-width: 70%; padding: var(--space-8) var(--space-12); border-radius: var(--radius-panel); background: var(--surface-1); border: 1px solid var(--border); font: 400 14px/20px var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--surface-2); }
.msg.system { align-self: center; max-width: 90%; background: transparent; border-style: dashed; color: var(--text-secondary); font-size: 12px; text-align: center; }
.msg { align-self: flex-start; display: flex; flex-direction: column; }
.msg.me { align-self: flex-end; }
.msg.system { align-self: center; }
.msg .tm { display: block; font: 400 11px/16px var(--font-sans); color: var(--text-muted); margin-top: 2px; }
.composer { display: flex; gap: var(--space-8); padding: var(--space-12) var(--space-16); border-top: 1px solid var(--border); align-items: flex-end; }
.composer textarea.in { min-height: 48px; max-height: 160px; flex: 1; }
/* Composer box: textarea and its footer (hint · count · Send) share one bordered field */
.composer .cbox { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--canvas); }
.composer .cbox:focus-within { border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.composer .cbox textarea.in { border: 0; background: transparent; box-shadow: none; resize: none; }
.composer .cfoot { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-4) var(--space-8) var(--space-8) var(--space-16); flex-wrap: wrap; }
.composer .cfoot .meta { color: var(--text-muted); }
.menu.narrow { width: 220px; }
.inbox > .list > .ph { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; padding: var(--space-16); border-bottom: 1px solid var(--border); background: var(--surface-1); }
.inbox > .list > .ph h1, .inbox > .list > .ph h2 { display: flex; align-items: center; gap: var(--space-8); margin: 0; font: var(--type-panel-title); }
.inbox .un { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--neon-crimson); color: var(--on-crimson); font: 600 11px/1 var(--font-sans); }
.inbox .sec { font: 700 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: var(--space-12) var(--space-16) var(--space-4); }
.inbox .list .banner { margin: var(--space-12); }
.inbox .list > .pf { padding: var(--space-12); display: flex; justify-content: center; }
.thread .msgs { background: var(--canvas); }
.thread .msgs > * { flex-shrink: 0; }
.av.sq { border-radius: 8px; }
.day-div { align-self: center; font: 500 12px/16px var(--font-sans); color: var(--text-muted); padding: var(--space-4) 0; }
.unread-div { display: flex; align-items: center; gap: var(--space-12); font: 600 12px/16px var(--font-sans); color: var(--neon-crimson); }
.unread-div::before, .unread-div::after { content: ""; flex: 1; height: 1px; background: var(--neon-crimson); opacity: .5; }
.thread > .banner { margin: var(--space-12) var(--space-24) 0; }

/* ---------------------------------------------------------------- version history (VersionHistory) */
.vh { list-style: none; margin: 0; padding: 0; }
.vh li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-12); align-items: center; padding: var(--space-12) var(--space-24); border-bottom: 1px solid var(--border); }
.vh li:last-child { border-bottom: 0; }
.vh .v { font: 700 14px/20px var(--font-sans); }
.vh .s { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); }
.diff { width: 100%; border-collapse: collapse; }
.diff td, .diff th { padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--border); text-align: left; font: 400 13px/18px var(--font-sans); vertical-align: top; }
.diff th { color: var(--text-secondary); font-weight: 600; }
.diff .before { color: var(--text-secondary); text-decoration: line-through; }
.diff .after { color: var(--text-primary); }

/* ---------------------------------------------------------------- marketing (Homepage, CreatorsPage, Footer, LeaderboardCard, CtaCard) */
.mkt { display: flex; flex-direction: column; }
.band { padding: var(--space-80) var(--space-24); }
.band.ink { background: var(--ink); }
.band .wrap { max-width: var(--marketing-max-width); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-40); }
.hero { padding: var(--space-80) var(--space-24) var(--space-64); background: radial-gradient(80% 70% at 30% 0%, rgba(255, 51, 92, .14), transparent 60%), var(--canvas); }
.hero .wrap { max-width: var(--marketing-max-width); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-48); align-items: center; }
.hero h1 { font: var(--type-h1-marketing); }
.hero p.lead { font: var(--type-body); color: var(--text-secondary); margin-top: var(--space-16); max-width: 560px; }
.hero .acts { display: flex; gap: var(--space-12); margin-top: var(--space-32); flex-wrap: wrap; }
.eyebrow-l { font: var(--type-eyebrow); text-transform: uppercase; color: var(--text-secondary); }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; }
.sec-h h2 { font: var(--type-h2); }
.sec-h p { color: var(--text-secondary); font: var(--type-body); margin-top: var(--space-8); max-width: 640px; }
.frame { position: relative; border-radius: var(--radius-panel); overflow: hidden; border: 1px solid var(--border); background: linear-gradient(160deg, var(--surface-2), var(--ink)); min-height: 320px; display: flex; align-items: flex-end; }
.frame img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .scrimtext { position: relative; width: 100%; padding: var(--space-24); background: linear-gradient(180deg, transparent, rgba(13, 5, 7, .92) 55%); }
.frame .scrimtext b { font: var(--type-h3); display: block; }
.frame .scrimtext span { color: var(--text-secondary); }
.lbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24); }
.lb { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; display: flex; flex-direction: column; }
.lb header { padding: var(--space-16) var(--space-24); background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: var(--space-8); align-items: baseline; }
.lb header h3 { font: var(--type-panel-title); }
.lb header span { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.lb ol { list-style: none; margin: 0; padding: var(--space-8) 0; flex: 1; }
.lb li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--space-12); align-items: center; padding: 6px var(--space-24); font-variant-numeric: tabular-nums; }
.lb li .rk { color: var(--text-muted); font-weight: 600; }
.lb li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb li .nm a { min-height: 32px; display: inline-flex; align-items: center; color: var(--text-primary); }
.lb li .mt { color: var(--text-secondary); }
.lb footer { padding: var(--space-12) var(--space-24); border-top: 1px solid var(--border); }
.lb footer a { font: 500 13px/16px var(--font-sans); }
.lb li.flash { animation: r3fto-flash 900ms ease-in-out 1; }
@keyframes r3fto-flash { 0% { background: var(--active-fill); } 100% { background: transparent; } }
.ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
.ctab { position: relative; border-radius: var(--radius-panel); overflow: hidden; border: 1px solid var(--border); min-height: 280px; display: flex; align-items: flex-end; color: var(--text-primary); text-decoration: none; background: linear-gradient(160deg, var(--surface-2), var(--ink)); }
.ctab:hover { text-decoration: none; border-color: var(--text-muted); }
.ctab .scrimtext { position: relative; width: 100%; padding: var(--space-24); background: linear-gradient(180deg, transparent, rgba(13, 5, 7, .92) 50%); display: flex; flex-direction: column; gap: var(--space-8); }
.ctab h3 { font: var(--type-h3); } .ctab p { color: var(--text-secondary); }
.ctab .btn { align-self: flex-start; margin-top: var(--space-8); }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.feature { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-8); }
.feature .ico { color: var(--neon-crimson); }
.feature h3 { font: var(--type-panel-title); } .feature p { color: var(--text-secondary); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); counter-reset: step; }
.steps li { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-8); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); font: var(--type-eyebrow); color: var(--neon-crimson); }
.steps h3 { font: var(--type-panel-title); } .steps p { color: var(--text-secondary); }
.prose { max-width: 760px; font: var(--type-body); color: var(--text-secondary); display: flex; flex-direction: column; gap: var(--space-16); }
.prose h2 { font: var(--type-h3); color: var(--text-primary); margin-top: var(--space-16); }
.ft { background: var(--ink); border-top: 1px solid var(--border); padding: var(--space-48) var(--space-24) var(--space-32); }
.ft .wrap { max-width: var(--marketing-max-width); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-32); }
.ft h3 { font: var(--type-label); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: var(--space-12); }
.ft ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ft li a { color: var(--text-secondary); }
.ft li a:hover { color: var(--text-primary); text-decoration: none; }
.ft .legal { max-width: var(--marketing-max-width); margin: var(--space-32) auto 0; padding-top: var(--space-16); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: var(--space-16); color: var(--text-muted); font: 400 12px/16px var(--font-sans); flex-wrap: wrap; }

/* homepage composition (Homepage README) */
.hero-c { padding: var(--space-80) var(--space-24) var(--space-64); background: radial-gradient(60% 50% at 50% 0%, rgba(141, 124, 255, .10), transparent 70%), radial-gradient(50% 40% at 50% 10%, rgba(255, 51, 92, .10), transparent 70%), var(--canvas); }
.wrap-c { max-width: var(--marketing-max-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.hero-title { font: 700 64px/72px var(--font-sans); letter-spacing: -0.01em; }
.hero-node { display: inline-block; width: .22em; height: .22em; border: .07em solid var(--wordmark-node); border-radius: 50%; margin: 0 .08em 0 .04em; }
.hero-c .lead { font: var(--type-body); color: var(--text-secondary); max-width: 640px; }
.frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); width: 100%; margin-top: var(--space-16); text-align: left; }
.frames .frame { min-height: 360px; margin: 0; background: radial-gradient(70% 60% at 30% 30%, rgba(255, 51, 92, .22), transparent 70%), radial-gradient(60% 60% at 80% 70%, rgba(53, 189, 245, .14), transparent 70%), linear-gradient(160deg, var(--surface-2), var(--ink)); }
.frames .frame:nth-child(2) { background: radial-gradient(70% 60% at 70% 30%, rgba(141, 124, 255, .22), transparent 70%), radial-gradient(60% 60% at 20% 70%, rgba(243, 179, 64, .12), transparent 70%), linear-gradient(200deg, var(--surface-2), var(--ink)); }
.how { list-style: none; margin: 0; padding: 0; }
.how li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-16); align-items: start; padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--border); }
.how li:last-child { border-bottom: 0; }
.how b { font: var(--type-panel-title); display: block; }
.how p { color: var(--text-secondary); margin-top: 2px; }
.tile { width: 44px; height: 44px; border-radius: var(--radius-panel); background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--neon-crimson); }
.stats > .ph .live-ind { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px var(--font-sans); color: var(--text-secondary); }
.stats .livedot { background: var(--success-green); }
.stats [data-stale="true"] .livedot { background: var(--warning-amber); }
.cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--ink); }
.cells .cell { padding: var(--space-24); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.cells .cell:last-child { border-right: 0; }
.cells.primary .v { font: 700 56px/64px var(--font-sans); color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cells.primary .v.brand { color: var(--neon-crimson); }
.cells .v.na, .cells.primary .v.brand.na { color: var(--text-muted); }
.cells .l { font: 600 12px/16px var(--font-sans); color: var(--text-secondary); }
.cells .m { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.cells.secondary { border-top: 1px solid var(--border); }
.cells.secondary .cell { padding: var(--space-16) var(--space-24); }
.cells.secondary .v { font: 700 22px/28px var(--font-sans); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cells .v.pulse { animation: r3fto-pulse var(--duration-live) ease-in-out 1; }
@keyframes r3fto-pulse { 0% { opacity: .4; } 100% { opacity: 1; } }
.ctab-s { display: grid; grid-template-columns: minmax(0, 1fr) 200px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; min-height: 240px; }
.ctab-s .ctab-body { padding: var(--space-32); display: flex; flex-direction: column; gap: var(--space-12); justify-content: center; }
.ctab-s h2 { font: var(--type-h3); }
.ctab-s p { color: var(--text-secondary); }
.ctab-s .ctab-art { background: radial-gradient(80% 60% at 40% 40%, rgba(255, 51, 92, .28), transparent 70%), linear-gradient(160deg, var(--surface-2), var(--ink)); border-left: 1px solid var(--border); }
.ctab-s .ctab-art.alt { background: radial-gradient(80% 60% at 60% 40%, rgba(141, 124, 255, .28), transparent 70%), linear-gradient(200deg, var(--surface-2), var(--ink)); }
.lbs.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lb li.top .rk { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); }
.lb li.top .nm, .lb li.top .nm a { font-weight: 700; }
.lb .anon { color: var(--text-secondary); }
.auth-status { max-width: var(--form-max-width); margin: var(--space-16) auto 0; padding: 0 var(--space-16); }

/* public profile header (ProfileHeader) */
.prof { display: flex; gap: var(--space-24); align-items: center; flex-wrap: wrap; }
.prof .pav { width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font: 700 28px/1 var(--font-sans); color: var(--text-secondary); overflow: hidden; flex: none; }
.prof .pav img { width: 100%; height: 100%; object-fit: cover; }
.prof .pav.sq { border-radius: var(--radius-panel); }
.prof h1 { font: var(--type-h1-dashboard); display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.prof .facts { display: flex; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-8); color: var(--text-secondary); }
.links-list { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.plink { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-primary); font: 500 13px/16px var(--font-sans); }
.plink:hover { text-decoration: none; background: var(--surface-2); }
.plink small { color: var(--text-muted); font-weight: 400; }

/* promotion landing (PromotionLanding) */
.landing { max-width: 960px; margin: 0 auto; padding: var(--space-48) var(--space-24); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-32); align-items: start; }
.landing .cover { aspect-ratio: 16 / 9; border-radius: var(--radius-panel); overflow: hidden; border: 1px solid var(--border); background: linear-gradient(160deg, var(--surface-2), var(--ink)); }
.landing .cover img { width: 100%; height: 100%; object-fit: cover; }
.storebtns { display: flex; flex-direction: column; gap: var(--space-12); }
.storebtns .btn { justify-content: flex-start; }
.qr-tile { background: #ffffff; border-radius: var(--radius-panel); padding: var(--space-16); display: inline-flex; }
.qr-tile svg { width: 180px; height: 180px; }

/* rankings, profiles, landing */
.rank-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-pill.top { background: var(--surface-elevated); font-weight: 700; }
.strong { font-weight: 700; }
.h1-marketing { font: var(--type-h1-marketing); }
.game-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-16); }
.game-tile { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-2); color: var(--text-primary); min-height: 72px; }
.game-tile:hover { text-decoration: none; border-color: var(--text-muted); }
.game-tile img, .game-tile .cov { width: 48px; height: 48px; border-radius: var(--radius-control); object-fit: cover; flex: none; background: var(--surface-1); border: 1px solid var(--border); }
.landing-cover { aspect-ratio: 16 / 9; border-radius: var(--radius-panel); overflow: hidden; border: 1px solid var(--border); background: radial-gradient(70% 60% at 30% 30%, rgba(255, 51, 92, .18), transparent 70%), linear-gradient(160deg, var(--surface-2), var(--ink)); }
.landing-cover img { width: 100%; height: 100%; object-fit: cover; }
svg.qr { width: 200px; height: 200px; }
.qr-tile { align-self: flex-start; }

/* auth (AuthScreens) */
.auth-wrap { min-height: calc(100vh - var(--topbar-height)); display: flex; align-items: flex-start; justify-content: center; padding: var(--space-64) var(--space-16); background: radial-gradient(120% 60% at 50% -10%, rgba(255, 51, 92, .06), transparent 60%); }
.auth { width: 440px; max-width: 100%; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: var(--space-32); display: flex; flex-direction: column; gap: var(--space-24); }
.auth h1 { font: var(--type-h2); }
.auth .lead { color: var(--text-secondary); margin-top: var(--space-8); }
.auth .alt { text-align: center; color: var(--text-secondary); font: 400 13px/18px var(--font-sans); }
.otp { letter-spacing: .4em; font-size: 20px; text-align: center; font-variant-numeric: tabular-nums; }

/* auth steps, key cells (AuthScreens, CreatorKeyPanel) */
.auth-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-8); counter-reset: s; }
.auth-steps li { counter-increment: s; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-sans); color: var(--text-muted); }
.auth-steps li::before { content: counter(s); width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; }
.auth-steps li[aria-current="step"] { color: var(--text-primary); }
.auth-steps li[aria-current="step"]::before { background: var(--neon-crimson); color: var(--on-crimson); border-color: transparent; }
.auth-steps li.done::before { content: "✓"; background: var(--surface-elevated); color: var(--text-primary); }
.auth-divider { display: flex; align-items: center; gap: var(--space-12); color: var(--text-muted); font: 400 12px/16px var(--font-sans); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.key-cells { font: 900 40px/48px var(--font-sans); letter-spacing: .18em; color: var(--text-primary); }
.key-input { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ok-text { color: var(--success-green); display: inline-flex; align-items: center; gap: 4px; }
.err .ico, .ok-text .ico { flex: none; }
.input-validation-error { border-color: var(--danger-critical); }

/* account sub-navigation (AccountSecurity, IdentityVerification) */
.subnav { display: flex; flex-direction: column; gap: var(--space-4); }
.subnav .sec { font: var(--type-eyebrow); text-transform: uppercase; color: var(--text-muted); padding: var(--space-12) var(--space-12) var(--space-4); }
.subnav a { height: 40px; display: flex; align-items: center; gap: var(--space-12); padding: 0 var(--space-12); border-radius: var(--radius-control); color: var(--text-secondary); font: 500 14px/20px var(--font-sans); }
.subnav a:hover { color: var(--text-primary); text-decoration: none; }
.split.nav-split { grid-template-columns: 240px minmax(0, 1fr); }
.subnav a .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subnav .help { display: flex; gap: 6px; align-items: flex-start; padding: 0 var(--space-12); }
.subnav a[aria-current="page"] { background: var(--active-fill); color: var(--neon-crimson); font-weight: 600; }

/* ---------------------------------------------------------------- layout helpers (replace the previews' inline spacing) */
.stack { display: flex; flex-direction: column; gap: var(--space-16); }
.stack.g8 { gap: var(--space-8); } .stack.g12 { gap: var(--space-12); } .stack.g24 { gap: var(--space-24); } .stack.g32 { gap: var(--space-32); }
.row { display: flex; gap: var(--space-16); align-items: center; flex-wrap: wrap; }
.row.g8 { gap: var(--space-8); } .row.g12 { gap: var(--space-12); } .row.g24 { gap: var(--space-24); }
.row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .row.top-align { align-items: flex-start; }
.row.nowrap { flex-wrap: nowrap; }
.grow { flex: 1; min-width: 0; }
.mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); } .mt-16 { margin-top: var(--space-16); } .mt-24 { margin-top: var(--space-24); }
.w-full { width: 100%; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.grid2 > *, .grid3 > *, .two > * { min-width: 0; }
.grid2.align-start { align-items: start; }
.ctile { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-2); }
.ctile b { font-weight: 700; letter-spacing: .1em; font-size: 18px; }
.ctile.em { border-color: var(--neon-crimson); }
.chain { align-items: center; }
.step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-elevated); font: 700 12px/1 var(--font-sans); }
.reset-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-16) var(--space-24); border: 1px solid var(--border); border-radius: var(--radius-panel); flex-wrap: wrap; }
.brand { color: var(--neon-crimson); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-12); align-items: center; }

a.opt { display: inline-flex; align-items: center; min-height: 24px; }

/* admin console helpers (Task 054) */
.pad { padding: var(--space-24); }
.pad-x { padding: var(--space-12) var(--space-24) 0; }
p.pad { margin: 0; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.codebox { margin: 0; padding: var(--space-12); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: 12px; line-height: 18px; max-height: 360px; overflow: auto; }
.q.wide { width: 480px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--neon-crimson); font: inherit; cursor: pointer; min-height: 24px; text-align: left; }
.msgs.ctx { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-12); background: var(--canvas); border-radius: var(--radius-control); border: 1px solid var(--border); }
.msgs.ctx .msg { max-width: 90%; }
.msg.anchor { border-color: var(--warning-amber); }
.doc-preview { max-width: 100%; border-radius: var(--radius-control); border: 1px solid var(--border); }
.opcard .go { margin-top: var(--space-8); display: inline-flex; align-items: center; gap: 4px; font: 500 13px/16px var(--font-sans); min-height: 24px; }
.opcard.attn .val { color: var(--warning-amber); }
.h2 { font: var(--type-h2); margin: 0; }

/* ---------------------------------------------------------------- reduced motion: drop every transform, keep colour/state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .bone::after { animation: none; }
  .spin { animation: none; border-top-color: var(--neon-crimson); }
  dialog.modal[open], dialog.drawer[open] { animation: none; }
}

/* ---------------------------------------------------------------- tablet: 768-1279px (TabletDashboard, TabletMarketing) */
@media (max-width: 1279px) {
  .links a { font-size: 13px; padding: 0 var(--space-8); }
  .side { display: none; }
  .menu-btn { display: inline-flex; }
  .subbar { padding: 0 var(--space-24); }
  .envstrip { padding: 0 var(--space-24); }
  .content { padding: var(--space-24); gap: var(--space-24); }
  .kpis.k6, .kpis.k4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fas, .fas.f6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fas .pipe:nth-child(3n) > .ico { display: none; }
  .two, .two.wide-side, .split { grid-template-columns: minmax(0, 1fr); }
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band { padding: 56px var(--space-24); }
  .band .wrap, .hero .wrap { max-width: 944px; }
  .lbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells .cell:nth-child(2n) { border-right: 0; }
  .cells .cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .hero-title { font: 700 48px/56px var(--font-sans); }
  .feature-list, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing { grid-template-columns: minmax(0, 1fr); }
  .inbox { grid-template-columns: 280px minmax(0, 1fr); }
}
/* TopBar on tablets (README "Navigation", TabletDashboard, TabletMarketing): the five site links stay in the bar at 13px
   on every surface; the dashboard drawer's menu button lives in the crumb bar, and the right group compacts (the account
   button keeps its avatar, the workspace switcher truncates its name) instead of dropping the links. */
@media (min-width: 768px) and (max-width: 1279px) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-12); padding: 0 var(--space-16); }
  .top .links { justify-content: center; gap: 0; }
  .top .me .me-name { display: none; }
  .top .ws { max-width: 200px; }
  .top .menu-btn { display: none; }
  .subbar .menu-btn { margin-left: calc(-1 * var(--space-8)); }
}
@media (min-width: 1280px) {
  .subbar .menu-btn { display: none; }
}
/* narrow tablets: three side-by-side breakdown tables would clip, so they stack */
@media (max-width: 1023px) {
  .grid.c3 { grid-template-columns: minmax(0, 1fr); }
}
.top .site-menu-btn { display: none; }
.subbar-l { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.env .env-s { display: none; }
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); margin-right: 6px; flex: none; }
.sdot.ok { background: var(--success-green); }
.sdot.admin { background: var(--warning-amber); }
.side .foot .foot-id { display: inline-flex; align-items: center; min-width: 0; }
.side .foot .foot-live { display: inline-flex; align-items: center; flex: none; }

/* ---------------------------------------------------------------- phone: <= 480px (MobilePages, DashboardMobile) */
@media (max-width: 767px) {
  /* 56px bar: menu button (40px) · wordmark 20px · compact controls; nothing pushes the menu button off-screen */
  .top { height: 56px; padding: 0 var(--space-12); gap: var(--space-8); grid-template-columns: auto minmax(0, 1fr); }
  .top .links { display: none; }
  .top.site .site-menu-btn { display: inline-flex; }
  .top .wm { font-size: 20px; }
  .top .l { gap: var(--space-4); }
  .top .r { gap: var(--space-4); min-width: 0; }
  .top .r > .popover-host { min-width: 0; }
  .top .ws { min-width: 0; max-width: 112px; padding: 0 var(--space-4) 0 var(--space-8); gap: var(--space-4); }
  .top .ws .n { text-overflow: ellipsis; overflow: hidden; }
  .top .env { padding: 0 var(--space-8); gap: 6px; }
  .top .env .env-l { display: none; }
  .top .env .env-s { display: inline; }
  .top .env .ico { display: none; }
  .top .me { padding: 0 var(--space-4); }
  .top .me > .ico { display: none; }
  .top .scope { padding: 0 var(--space-8); }
  .top.site .r .btn.ghost { display: none; }
  .subbar .menu-btn { display: none; }
  .top .ws .k, .top .me .me-name, .top .search-btn { display: none; }
  .app { min-height: calc(100vh - 56px); }
  .content { padding: var(--space-16); gap: var(--space-24); }
  .subbar, .envstrip { padding: var(--space-8) var(--space-16); }
  .hdr h1 { font: var(--type-h2); }
  .hdr .acts { flex: 1 1 100%; }
  .hdr .acts .btn { flex: 1 1 auto; justify-content: center; }
  .kpis, .kpis.k6, .kpis.k4, .kpis.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fas, .fas.f6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fas .pipe > .ico { display: none; }
  .grid.c2, .grid.c3, .grid.c4, .row2, .row3, .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .form fieldset.toggles { grid-template-columns: minmax(0, 1fr); }
  .split.nav-split { grid-template-columns: minmax(0, 1fr); }
  .prow { grid-template-columns: minmax(0, 1fr); }
  .pnl > .ph { padding: var(--space-12) var(--space-16); }
  .pnl > .pb { padding: var(--space-16); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px var(--space-16); }
  .kv dd { margin-bottom: var(--space-8); }
  .kv.end dd { text-align: left; }
  /* compact row cards (DashboardMobile): the primary cell heads the card, the other values fold into a two-column
     label/value grid, row actions sit on one line; every value stays (fold, never hide) */
  .tbl.cards thead { display: none; }
  .tbl.cards, .tbl.cards tbody { display: block; width: 100%; }
  .tbl.cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-16); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--border); }
  .tbl.cards tbody tr:last-child { border-bottom: 0; }
  .tbl.cards td, .tbl.cards td.num { display: block; height: auto; padding: 0; border: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .tbl.cards td::before { content: attr(data-label); display: block; color: var(--text-secondary); font: 400 11px/16px var(--font-sans); }
  .tbl.cards td.primary-cell { grid-column: 1 / -1; min-width: 0; }
  .tbl.cards td.primary-cell::before, .tbl.cards td.act::before { display: none; }
  .tbl.cards td.act { grid-column: 1 / -1; width: auto; display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
  .fb .q { width: 100%; }
  .band { padding: var(--space-40) var(--space-16); }
  .hero { padding: var(--space-40) var(--space-16); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .hero h1 { font: var(--type-h2); }
  .lbs, .lbs.two-up, .ctas, .feature-list, .steps, .frames { grid-template-columns: minmax(0, 1fr); }
  .frames .frame { min-height: 220px; }
  .hero-title { font: var(--type-h2); }
  .cells.primary .v { font: 700 32px/40px var(--font-sans); }
  .ctab-s { grid-template-columns: minmax(0, 1fr); }
  .ctab-s .ctab-art { display: none; }
  .lb li.top6 { display: none; }
  .ft .wrap { grid-template-columns: minmax(0, 1fr); }
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox.has-thread .list { display: none; }
  .thread .th .back { display: inline-flex; }
  .inbox:not(.has-thread) .thread { display: none; }
  .msg { max-width: 88%; }
  .menu, .notif:not(.page) { position: fixed; left: var(--space-8); right: var(--space-8); top: 64px; width: auto; }
  .popover-host.prov .pop { position: fixed; left: var(--space-8); right: var(--space-8); top: auto; bottom: var(--space-16); width: auto; max-width: none; }
  .ib, .menu-btn, .site-menu-btn { width: 40px; height: 40px; }
  .auth { padding: var(--space-24); }
  .toasts { left: var(--space-16); right: var(--space-16); bottom: var(--space-16); width: auto; }
  .landing { padding: var(--space-24) var(--space-16); }
  .cap { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .checklist li { grid-template-columns: 20px 1fr; }
  .checklist li > :last-child { grid-column: 2; }
  .checklist.status-end li { grid-template-columns: minmax(0, 1fr); }
  .checklist.status-end li > :last-child { grid-column: 1; }
  dialog.drawer { width: 100vw; }
}

/* ---------------------------------------------------------------- publisher console (slice 3) */
/* the 36px platform tile (PlatformCapabilityRow: device glyph on surface-2, no store logos) */
.ptile { width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); flex: none; }

/* PlatformCapabilityRow list: 36px surface-2 column header, >= 64px rows, one action right-aligned */
.pcr-head, .pcr-row { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1.2fr) minmax(0, 1.2fr) 130px minmax(96px, auto); gap: var(--space-16); align-items: center; padding: 0 var(--space-24); }
.pcr-head { height: 36px; background: var(--surface-2); border-bottom: 1px solid var(--border); font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.pcr-head span:last-child { text-align: right; }
.pcr-list { list-style: none; margin: 0; padding: 0; }
.pcr-row { min-height: 64px; padding-top: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border); }
.pcr-row:last-child { border-bottom: 0; }
.pcr-plat { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.pcr-plat b { display: block; font: 500 14px/20px var(--font-sans); }
.pcr-plat small { display: block; font: 400 12px/16px var(--font-sans); color: var(--text-muted); overflow-wrap: anywhere; }
.pcr-cap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pcr-v { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; min-width: 0; }
.pcr-v small { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); }
.pcr-l { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pcr-act { display: flex; justify-content: flex-end; }

/* capability health grouped by platform (the platform named once per group) */
.capgroup + .capgroup { border-top: 1px solid var(--border); }
.capgroup-h { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-24); font: 500 14px/20px var(--font-sans); background: var(--surface-1); border-bottom: 1px solid var(--border); }

/* game overview: readiness fix links, the 72px header cover, artwork previews */
.checklist .ico.err { color: var(--danger-critical); }
.checklist .fix-link { font: 500 13px/16px var(--font-sans); white-space: nowrap; display: inline-flex; align-items: center; min-height: 24px; }
.game-hdr { display: flex; align-items: flex-start; gap: var(--space-16); }
.game-hdr > .hdr { flex: 1 1 auto; min-width: 0; }
.game-cover { width: 72px; height: 72px; border-radius: var(--radius-panel); object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); flex: none; }
.art-icon { width: 96px; height: 96px; border-radius: var(--radius-panel); object-fit: cover; border: 1px solid var(--border); }
.art-cover { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; border-radius: var(--radius-panel); object-fit: cover; border: 1px solid var(--border); }
.art-ph { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: var(--radius-panel); background: var(--surface-2); color: var(--text-muted); font: 400 12px/16px var(--font-sans); }
.art-ph.icon { width: 96px; height: 96px; }
.art-ph.cover { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; }

@media (max-width: 1023px) {
  /* the row becomes a compact card: platform header, the two capabilities, status and action at the bottom */
  .pcr-head { display: none; }
  .pcr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-16); padding: var(--space-16) var(--space-24); }
  .pcr-plat, .pcr-act { grid-column: 1 / -1; }
  .pcr-act { justify-content: flex-start; }
  .pcr-l { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
}
@media (max-width: 767px) {
  .pcr-row { grid-template-columns: minmax(0, 1fr); padding: var(--space-16); }
  .capgroup-h { padding: var(--space-12) var(--space-16); }
  .game-cover { width: 56px; height: 56px; }
}
/* a secondary button with the danger label (Close game, Close organization): the Button stays secondary, the label
   carries danger-critical; the action still goes through ConfirmModal */
.btn.secondary.danger-text { color: var(--danger-critical); }

/* FormField affix: the unit sits in a surface-1 addon inside the same 48px frame; the frame takes the focus border */
.in-affix { display: flex; align-items: stretch; height: var(--control-height); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--canvas); overflow: hidden; min-width: 0; transition: border-color var(--duration-ui) ease-out, box-shadow var(--duration-ui) ease-out; }
.in-affix > .in { border: 0; border-radius: 0; height: 100%; min-width: 0; flex: 1 1 auto; box-shadow: none; }
.in-affix > .in:focus { box-shadow: none; }
.in-affix:focus-within { border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.in-affix:has(> .in[aria-invalid="true"]) { border-color: var(--danger-critical); }
.in-affix .affix { display: inline-flex; align-items: center; padding: 0 var(--space-12); background: var(--surface-1); border-left: 1px solid var(--border); color: var(--text-secondary); font: 500 13px/16px var(--font-sans); flex: none; }
.in-affix.pre .affix { order: -1; border-left: 0; border-right: 1px solid var(--border); }

/* Program Terms edit footer: status text left, Discard + Save right */
.terms-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; width: 100%; }
.terms-form { max-width: none; }
@media (max-width: 1279px) {
  /* README Spacing and layout: the form is a single column on tablet and phone */
  .terms-edit, .terms-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1279px) {
  /* four current-terms cells: 2 x 2 on tablet, never 3 + an orphan */
  .terms-current .kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Test console: the two steps side by side from 1280px, stacked below; the Test creator key-button group */
.test-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); align-items: start; }
@media (min-width: 1280px) {
  .test-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--space-8); }
.keyb { height: var(--control-height); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--canvas); color: var(--text-secondary); font: 700 16px/20px var(--font-sans); letter-spacing: .1em; cursor: pointer; transition: border-color var(--duration-ui) ease-out, background-color var(--duration-ui) ease-out; }
.keyb:hover { border-color: var(--text-muted); color: var(--text-primary); }
.keyb[aria-pressed="true"] { background: var(--surface-elevated); border-color: var(--text-secondary); color: var(--text-primary); }
.keyb:focus-visible { border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.in-affix .affix-in { width: 4.5em; height: 100%; border: 0; background: transparent; color: var(--text-primary); font: 500 13px/16px var(--font-sans); text-align: center; text-transform: uppercase; outline: none; padding: 0; }

/* Publisher overview: the Organization total row on surface-2; the operational status grid fills every row */
.tbl tfoot tr.total td { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 0; font-weight: 600; }
.opstrip.in-panel { border: 0; border-radius: 0; gap: 1px; background: var(--border); }
.opstrip.in-panel .opc { border-right: 0; background: var(--surface-1); }
.opstrip.in-panel.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opstrip.in-panel.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) {
  .opstrip.in-panel.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .opstrip.in-panel.n5 > :nth-child(-n+3) { grid-column: span 2; }
  .opstrip.in-panel.n5 > :nth-child(n+4) { grid-column: span 3; }
  .opstrip.in-panel.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .opstrip.in-panel.n5, .opstrip.in-panel.n4 { grid-template-columns: minmax(0, 1fr); }
  .opstrip.in-panel.n5 > * { grid-column: auto; }
  .tbl.cards tfoot { display: block; width: 100%; }
  .tbl.cards tfoot tr.total { background: var(--surface-2); }
  .tbl.cards tfoot tr.total td { background: transparent; border-top: 0; }
  .tbl.cards tfoot td:empty { display: none; }
}

/* Games list: platforms as readiness pills (dot colour + word for assistive tech; device glyph, no store logos) */
.ppill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); font: 500 12px/16px var(--font-sans); color: var(--text-primary); white-space: nowrap; }
.ppill > i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.ppill.ok > i { background: var(--success-green); }
.ppill.warn > i { background: var(--warning-amber); }
.ppill.danger > i { background: var(--danger-critical); }
.ppill .ico { color: var(--text-secondary); }
.pnl > .pf.start { justify-content: flex-start; }

/* the R3FTO Verified source line: pill + one inline sentence (PublisherOverview, Creator Performance) */
.rv-line { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin: 0; }

/* ---------------------------------------------------------------- admin console (slice 4) */
/* a reason already written on the screen, quoted inside its ConfirmModal */
.quote { padding: var(--space-12) var(--space-16); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-control); }
.quote .lbl { display: block; font: 600 12px/16px var(--font-sans); color: var(--text-secondary); margin-bottom: 4px; }
.quote p { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--text-primary); overflow-wrap: anywhere; white-space: pre-wrap; }

/* FilterBar text filter: `Label · value` in the filterSelect frame (no chevron) */
.fsel.ftext { cursor: text; }
.fsel.ftext::after { display: none; }
.fsel.ftext input.in, .fb .fsel.ftext input.in { height: 100%; border: 0; box-shadow: none; background: transparent; color: var(--text-primary); font: 500 13px/16px var(--font-sans); padding: 0 var(--space-12) 0 6px; width: 200px; max-width: 100%; min-width: 0; }
.fsel.ftext input.in:focus { box-shadow: none; }
.fsel.ftext input[type="datetime-local"].in { width: 210px; color-scheme: dark; }
.fb .opt { min-height: var(--control-height-compact); }

/* AdminComplianceReview: the 360px queue (age right, amber past the 20h mark, selected row on active-fill) */
.cq-list { list-style: none; margin: 0; padding: 0; }
.cq-list li + li { border-top: 1px solid var(--border); }
.cq-row { display: flex; align-items: flex-start; gap: var(--space-12); width: 100%; padding: var(--space-12) var(--space-24); background: transparent; border: 0; color: var(--text-primary); text-align: left; font: inherit; cursor: pointer; min-height: 60px; }
.cq-row:hover { background: var(--surface-2); }
.cq-row.on { background: var(--active-fill); }
.cq-row.on .cq-main b { color: var(--neon-crimson); }
.cq-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(255, 51, 92, .45); }
.cq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cq-main b { font: 600 14px/20px var(--font-sans); }
.cq-main small { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); overflow-wrap: anywhere; }
.cq-age { font: 500 12px/20px var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cq-age.late { color: var(--warning-amber); }
.cq-effect { margin: 0; }

/* AdminOperationsOverview: whole-card links, 32px icon tile in the severity colour only when the count needs attention */
.opgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-16); }
.opgrid > li { min-width: 0; display: flex; }
.opc { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-16); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); color: var(--text-primary); text-decoration: none; min-width: 0; min-height: 168px; }
a.opc { transition: border-color var(--duration-ui) ease-out, background-color var(--duration-ui) ease-out; }
a.opc:hover { border-color: var(--text-muted); background: var(--surface-2); }
a.opc:focus-visible { outline: none; border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.opc-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin-bottom: var(--space-8); }
.opc-tile { width: 32px; height: 32px; border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.opc-tile.warn { color: var(--warning-amber); border-color: rgba(243, 179, 64, .4); }
.opc-tile.danger { color: var(--danger-critical); border-color: rgba(255, 51, 92, .4); }
.opc-go { color: var(--text-muted); }
.opc-n { font: 700 28px/36px var(--font-sans); font-variant-numeric: tabular-nums; }
.opc-n.zero { font-weight: 500; color: var(--text-muted); }
.opc-n.na { color: var(--text-muted); }
.opc-l { font: 600 13px/18px var(--font-sans); }
.opc-m { margin-top: auto; padding-top: var(--space-8); font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.opc-m.danger { color: var(--danger-critical); }

/* capability groups: the platform R3FTO Ready state at the right of the group header */
.capgroup-r { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-8); }

/* AdminCashFlow: twelve summary cards (each a link to its rows), exceptions, receiving contract */
.cf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
.cf-cards > li { display: flex; min-width: 0; }
.cf-card { position: relative; flex: 1; display: flex; color: var(--text-primary); text-decoration: none; border-radius: var(--radius-panel); min-width: 0; }
.cf-card > .fa { flex: 1; padding: var(--space-16) var(--space-16) var(--space-32); gap: var(--space-4); transition: border-color var(--duration-ui) ease-out, background-color var(--duration-ui) ease-out; }
.cf-card .fa .eye { font: var(--type-label); text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.cf-card .fa .amt .v { font: 700 24px/32px var(--font-sans); }
.cf-card:hover > .fa { border-color: var(--text-muted); background: var(--surface-2); }
.cf-card:focus-visible { outline: none; }
.cf-card:focus-visible > .fa { border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.cf-go { position: absolute; right: var(--space-16); bottom: var(--space-12); display: inline-flex; align-items: center; gap: 2px; font: 500 12px/16px var(--font-sans); color: var(--neon-crimson); }
.meta-danger { color: var(--danger-critical); }
.cf-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); align-items: start; }
.cf-grid2 > * { min-width: 0; }
.cf-xs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
.cf-xs > li { display: flex; min-width: 0; }
.cf-x { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-1); color: var(--text-secondary); text-decoration: none; font: 400 12px/16px var(--font-sans); min-width: 0; }
.cf-x b { font: 700 22px/28px var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cf-x.attn b { color: var(--warning-amber); }
a.cf-x:hover { background: var(--surface-2); }
a.cf-x:focus-visible { outline: none; border-color: var(--neon-crimson); box-shadow: var(--focus-ring); }
.cf-queue { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cf-queue > .ico { color: var(--text-secondary); flex: none; }
.cf-queue b { font: 600 14px/20px var(--font-sans); }
.cf-queue .meta { margin: 2px 0 0; overflow-wrap: anywhere; }
.cf-contract { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-12) var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-1); }
.cf-contract > .ico { color: var(--text-secondary); margin-top: 2px; flex: none; }
.cf-contract b { font: 600 13px/18px var(--font-sans); }
.cf-contract p { margin: 2px 0 0; font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.cf-more summary { cursor: pointer; font: 500 13px/20px var(--font-sans); color: var(--text-secondary); min-height: 24px; }
.cf-more[open] summary { margin-bottom: var(--space-12); }
.pad-b { padding: 0 var(--space-24) var(--space-24); }

/* a segmented view strip that scrolls sideways when it does not fit; at phone width a fade on the clipped edge is the cue */
.tabscroll { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.tabscroll > .seg { min-width: max-content; }

/* VersionHistory table (commercial-risk terms timeline) */
.pill-cur { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-8); border-radius: var(--radius-pill); background: var(--neon-crimson); color: var(--on-crimson); font: 600 11px/16px var(--font-sans); }
.vh-val { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.vh-val .up { color: var(--success-green); }
.vh-val .dn { color: var(--warning-amber); }
.vh-val .meta-l { flex-basis: 100%; }

/* payout providers as PlatformCapabilityRow-style rows: provider tile, capability, contract checks, entity */
.prov-row { grid-template-columns: minmax(160px, 220px) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .8fr); }
.prov-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 400 12px/18px var(--font-sans); color: var(--text-secondary); }
.prov-checks li { display: flex; align-items: center; gap: var(--space-8); }
.prov-err { grid-column: 2 / -1; }

@media (max-width: 1279px) {
  .opgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-grid2 { grid-template-columns: minmax(0, 1fr); }
  .prov-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prov-err { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .opgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  .opc { min-height: 0; }
  .cf-cards { grid-template-columns: minmax(0, 1fr); }
  .cf-xs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cq-row { padding: var(--space-12) var(--space-16); }
  .prov-row { grid-template-columns: minmax(0, 1fr); }
  .fsel.ftext { width: 100%; }
  .fsel.ftext input.in, .fb .fsel.ftext input.in, .fsel.ftext input[type="datetime-local"].in { width: auto; flex: 1; }
  .tabscroll { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: var(--space-24); }
}
@media (prefers-reduced-motion: reduce) {
  a.opc, .cf-card > .fa { transition: none; }
}

/* public site (slice 5) */
/* public profiles (CreatorProfile, PublisherProfile, GameProfile): the ProfileHeader card spans the page, then a main
   column beside a 370px sidebar; the columns stack below 1024px */
.pub .wrap { gap: var(--space-32); }
.pub-cols { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: var(--space-24); align-items: start; }
.pub-main, .pub-side { display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }
.pub-h2 { font: var(--type-h2); }
.prof-card { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; }
.prof-top { display: grid; grid-template-columns: auto minmax(0, 1fr) 200px; gap: var(--space-24); align-items: start; padding: var(--space-32); }
.prof-top:not(:has(> .prof-acts)) { grid-template-columns: auto minmax(0, 1fr); }
.prof-card .pav { width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font: 700 28px/1 var(--font-sans); color: var(--text-secondary); overflow: hidden; flex: none; }
.prof-card .pav.sq { border-radius: 20px; }
.prof-card .pav.cover { width: 120px; height: 120px; border-radius: var(--radius-panel); }
.prof-card .pav img { width: 100%; height: 100%; object-fit: cover; }
.prof-id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); min-width: 0; }
.prof-id h1 { font: var(--type-h1-dashboard); display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; overflow-wrap: anywhere; }
.prof-id .eyebrow-l a { color: inherit; }
.prof-id .keyline .ico { width: 16px; height: 16px; color: var(--text-muted); }
.prof-meta { display: flex; gap: var(--space-8) var(--space-24); flex-wrap: wrap; color: var(--text-secondary); font: 400 14px/20px var(--font-sans); }
.prof-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.prof-meta .ico, .pf-pills .ico { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.prof-acts { display: flex; flex-direction: column; gap: var(--space-12); }
.prof-acts .btn { width: 100%; justify-content: center; }
.prof-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; background: var(--surface-1); border-top: 1px solid var(--border); }
.prof-facts > div { padding: var(--space-16) var(--space-24); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.prof-facts > div:last-child { border-right: 0; }
.prof-facts dt { font: 600 12px/16px var(--font-sans); color: var(--text-secondary); }
.prof-facts dd { margin: 0; font: 700 20px/28px var(--font-sans); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }
.prof-facts dd small { font: var(--type-meta); color: var(--text-muted); }
.prof-facts dd .na { color: var(--text-muted); }
.pf-pills { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-8); flex-wrap: wrap; }
.pf-pills li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-1); font: 500 13px/16px var(--font-sans); }

/* game tiles: 3:4 (creator promotes) or 16:10 (publisher games); a surface-2 slot carrying the name when no art exists */
.gtiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-16); }
.gtiles.wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gtile { position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-2); overflow: hidden; color: var(--text-primary); padding: var(--space-16); }
.gtile.wide { aspect-ratio: 16 / 10; }
.gtile:hover { text-decoration: none; border-color: var(--text-muted); }
.gtile .gt-icon { width: 48px; height: 48px; border-radius: var(--radius-control); object-fit: cover; border: 1px solid var(--border); }
.gtile .gt-cap { margin-top: auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gtile .gt-cap b { font: var(--type-panel-title); overflow-wrap: anywhere; }
.gtile .gt-cap span { font: var(--type-meta); color: var(--text-secondary); }

/* sidebar link rows (CreatorProfile Links): bordered rows, the proof state at the right */
.lrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.lrows li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; min-height: 44px; padding: 0 var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-control); }
.lrows li .ico { width: 16px; height: 16px; color: var(--text-muted); }
.lrows a { color: var(--text-primary); font-weight: 500; min-height: 24px; display: inline-flex; align-items: center; }
.lrows .lr-s { display: inline-flex; align-items: center; gap: 4px; font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.lrows .lr-s.ok, .lrows .lr-s.ok .ico { color: var(--success-green); }

/* GameProfile: the locked Game Intelligence note */
.locked-note { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-16) var(--space-24); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-1); color: var(--text-secondary); }
.locked-note > .ico { color: var(--text-muted); flex: none; margin-top: 2px; }
.locked-note b { color: var(--text-primary); font-weight: 600; }

/* PromotionLanding: brand header (badge mark + canonical URL) in place of the site TopBar — _Layout renders it instead of
   the TopBar when the page sets UiPage.BrandOnlyHeader; the footer stays */
.lp-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); height: var(--topbar-height); padding: 0 var(--space-24); border-bottom: 1px solid var(--border); background: var(--canvas); }
.lp-brand .meta { color: var(--text-muted); }
.lp-brand .meta b { color: var(--text-secondary); font-weight: 600; }
.shared-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 32px; padding: 0 var(--space-12) 0 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-1); font: 500 13px/16px var(--font-sans); color: var(--text-secondary); }
.shared-pill b { color: var(--text-primary); font-weight: 700; letter-spacing: .04em; }
.shared-pill .sp-av { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font: 700 9px/1 var(--font-sans); color: var(--text-secondary); overflow: hidden; }
.shared-pill .sp-av img { width: 100%; height: 100%; object-fit: cover; }
.landing-cover.empty { background: var(--surface-2); display: flex; align-items: flex-end; padding: var(--space-24); }
.landing-cover.empty span { font: var(--type-h3); color: var(--text-secondary); }
.lp-side .help .ico { color: var(--success-green); vertical-align: -2px; }
.lp-qr-close, .lp-qr-open { display: none; }

/* marketing pages: centred section heads, feature cards with a 44px icon tile, the About sale flow and hairline rows */
.sec-h.center { justify-content: center; text-align: center; }
.feature .tile { margin-bottom: var(--space-8); }
.feature .tile .ico { color: var(--text-primary); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24); }
.flow > li { position: relative; }
.flow .flow-chev { position: absolute; right: calc(-1 * var(--space-24) + 4px); top: 50%; transform: translateY(-50%); color: var(--text-muted); display: inline-flex; }
.flow .flow-chev .ico { width: 16px; height: 16px; }
.hrows { list-style: none; margin: 0; padding: var(--space-8) var(--space-24); }
.hrows li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); padding: var(--space-12) 0; border-bottom: 1px solid var(--border); font: 400 13px/18px var(--font-sans); }
.hrows li:last-child { border-bottom: 0; }
.hrows b { color: var(--text-primary); font-weight: 600; }
.hrows span { color: var(--text-muted); text-align: right; }
.hero-node { margin: 0 .28em 0 .06em; }

/* Footer README: no hairline above the footer; the badge mark at 32px */
.ft { border-top: 0; }
.wm.s32 { font-size: 32px; }

/* AuthScreens: Forgot? right-aligned on the label row; the password eye; date of birth as DD · MM · YYYY */
.lbl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.lbl-row a.opt { font: 500 12px/16px var(--font-sans); }
.pw { position: relative; display: flex; }
.pw .in { padding-right: 52px; }
.pw .pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
.pw .pw-eye[hidden] { display: none; }
.pw .pw-eye[aria-pressed="true"] { color: var(--text-primary); }
.form fieldset.f { border: 0; margin: 0; padding: 0; min-width: 0; gap: var(--space-8); }
.form fieldset.f > legend.lbl { padding: 0; margin: 0 0 var(--space-8); font: 600 12px/16px var(--font-sans); }
.dob-cells { display: grid; grid-template-columns: 1fr auto 1fr auto 1.6fr; gap: var(--space-8); align-items: center; color: var(--text-muted); }
.dob-cells[hidden] { display: none; }
.dob-cells .in { text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 1279px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow > li:nth-child(2n) .flow-chev { display: none; }
}
@media (max-width: 1023px) {
  .pub-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .prof-top, .prof-top:not(:has(> .prof-acts)) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: var(--space-24) var(--space-16); }
  .prof-id { align-items: center; }
  .prof-id h1, .prof-meta, .pf-pills { justify-content: center; }
  .prof-acts { width: 100%; }
  .prof-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prof-facts > div:nth-child(2n) { border-right: 0; }
  .prof-facts > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow .flow-chev { display: none; }
  .hrows { padding: var(--space-4) var(--space-16); }
  .lp-brand { height: 56px; padding: 0 var(--space-16); }
  /* MobilePages: the CTA cards put their art tile on top (120px), the text beneath */
  .ctab-s .ctab-art { display: block; order: -1; height: 120px; border-left: 0; border-bottom: 1px solid var(--border); }
}
/* PromotionLanding on the phone itself: the store button of the device is the primary action; the QR opens from
   "Show QR for another phone" as a surface-elevated sheet (landing.js toggles .sheet-open) */
@media (max-width: 480px) {
  .lp-side .lp-qr { display: none; }
  .lp-side .lp-qr.sheet-open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 90vh; overflow-y: auto; background: var(--surface-elevated); border-radius: var(--radius-panel) var(--radius-panel) 0 0; box-shadow: var(--shadow-overlay); }
  .lp-side .lp-qr.sheet-open .lp-qr-close { display: inline-flex; width: 40px; height: 40px; }
  .lp-side .lp-qr-open { display: inline-flex; justify-content: center; }
}

/* admin design-review corrections (shared components) */
/* TopBar account chip without an authorized display name: a person glyph in the avatar instead of initials */
.av > .ico { width: 16px; height: 16px; color: var(--text-secondary); }
.menu .id .av > .ico { width: 18px; height: 18px; }
/* a destructive entry inside an overlay menu carries the danger label (surface-elevated: 4.6:1) */
.menu button.mi.danger-text, .menu button.mi.danger-text .ico { color: var(--danger-critical); }
/* idText: a middle-truncated id (first 8 ... last 4) with its 24px copy target; the full value is in the title and the
   visually hidden text */
.idt { display: inline-flex; align-items: center; gap: var(--space-4); white-space: nowrap; max-width: 100%; vertical-align: middle; }
.idt-copy {
  width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-muted); cursor: pointer;
}
.idt-copy:hover { color: var(--text-primary); background: var(--surface-2); }
.idt-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); color: var(--text-primary); }
.idt-copy .ico { width: 16px; height: 16px; }
/* emptyNote: the in-panel empty state of admin panels (meta line, text-secondary, panel padding, muted outline glyph) */
.st-note { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-24); font: var(--type-meta); color: var(--text-secondary); flex-wrap: wrap; }
.st-note > .ico { color: var(--text-muted); flex: none; }
.st-note > p { margin: 0; flex: 1 1 200px; min-width: 0; }
.pnl > .pb:not(.flush) .st-note { padding: var(--space-8) 0; }
/* filterSheet (FilterBar, collapse at phone): labelled compact inputs; at <= 480px one `Filters · n` button opens the
   bottom Drawer sheet */
.fsheet-btn { display: none; }
.fsheet-bar { display: flex; align-items: flex-end; gap: var(--space-12); flex-wrap: wrap; }
.ff-row { display: flex; align-items: flex-end; gap: var(--space-12); flex-wrap: wrap; min-width: 0; }
.ff { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ff-l { font: var(--type-label); color: var(--text-secondary); }
.ff .in.compact { width: 180px; max-width: 100%; }
.fsheet-body .ff-row { flex-direction: column; align-items: stretch; gap: var(--space-16); }
.fsheet-body .ff .in.compact { width: 100%; height: var(--control-height); font-size: 14px; }
.fsheet-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; }
.fsheet-foot .btn.primary { flex: 1 1 auto; justify-content: center; }
.pill-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--neon-crimson); color: var(--on-crimson); font: 600 11px/1 var(--font-sans); }
/* Drawer B: the bottom sheet (grab handle, rounded top edge, slides up) */
dialog.drawer.bottom { margin: auto 0 0 0; width: 100vw; max-width: 100vw; height: auto; max-height: 90vh; border-left: 0; border-top: 1px solid var(--border); border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
dialog.drawer.bottom[open] { animation-name: r3fto-drawer-in-bottom; }
dialog.drawer.bottom .grab { display: block; width: 36px; height: 4px; margin: var(--space-8) auto 0; border-radius: var(--radius-pill); background: var(--border); flex: none; }
@keyframes r3fto-drawer-in-bottom { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .fsheet-bar { display: none; }
  .fsheet-btn { display: inline-flex; align-self: flex-start; }
}
@media (max-width: 767px) {
  .st-note { padding: var(--space-16); }
}