/* ============================================================
   Floom ,  Space Design System (Steel)
   One stylesheet, applied to every page. The proto is token-driven,
   so refining tokens lifts every card/surface uniformly. Layered on
   top of app.css; proto markup/content untouched.
   ============================================================ */

/* ================================================================
   TOKEN SYSTEM ,  one source of truth for all polish/*.css to import.
   Radius, spacing, type scale, surface tints, hairline, shadow tiers.
   (app.css supplies the base palette; this block layers steel-tuned
   overrides + any tokens that space-ds.css owns.)
   ================================================================ */
:root{
  /* -- radius tokens (mirrors app.css; re-declared here so polish/*.css
        can rely on them without coupling to app.css directly) -- */
  /* L12: tighter, squarer radius scale (Langdock / Growth GPT v2
     register). Small elements stay crisp; the large containers
     (--r-xl / --r-2xl) drop hard so nothing reads pill-soft. */
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   7px;   /* cards: squarer than the old 8/10 */
  --r-lg:   9px;
  --r-xl:  11px;   /* was 14 ,  large panels no longer round */
  --r-2xl: 12px;   /* was 18 ,  hero shot / modals capped tight */
  --r-pill:999px;

  /* -- spacing rhythm (4-base grid) -- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* -- type scale -- */
  --fs-xs:  10.5px;
  --fs-sm:  12px;
  --fs-base:13.5px;
  --fs-md:  15px;
  --fs-lg:  18px;

  /* -- surface tints: glass hierarchy -- */
  --surface-1: color-mix(in srgb,var(--paper) 88%,transparent); /* modal / drawer */
  --surface-2: color-mix(in srgb,var(--paper) 54%,transparent); /* cards */
  --surface-3: color-mix(in srgb,var(--paper) 38%,transparent); /* auth cards / hero tint */

  /* -- hairline (border-only shadow ring) -- */
  --hair: 0 0 0 1px var(--line);

  /* -- accent tokens ,  steel light mode -- */
  --accent:#3a6ea5;
  --accent-soft:color-mix(in srgb,#3a6ea5 11%,transparent);
  --accent-line:color-mix(in srgb,#3a6ea5 22%,transparent);
  --positive:#3a6ea5;
  --ink-on-accent:#0c1a30;
  --overlay:rgba(10,16,28,.34);
  --shadow-drawer:-40px 0 80px -32px rgba(10,16,28,.5);

  /* -- refined LIGHT depth: crisp hairline + soft inner highlight -- */
  --edge: inset 0 1px 0 rgba(255,255,255,.72);
  --shadow-sm: 0 1px 2px rgba(20,32,60,.05), 0 0 0 1px rgba(28,42,74,.07), var(--edge);
  --shadow-md: 0 8px 24px -12px rgba(20,32,60,.18), 0 0 0 1px rgba(28,42,74,.07), var(--edge);
  --shadow-pop:0 28px 60px -22px rgba(20,32,60,.26), 0 0 0 1px rgba(28,42,74,.08), var(--edge);
}
html.dark{
  --accent:#7fb0e0;
  --accent-soft:color-mix(in srgb,#7fb0e0 16%,transparent);
  --accent-line:color-mix(in srgb,#7fb0e0 30%,transparent);
  --positive:#7fb0e0;
  --line: rgba(160,185,255,.13);
  --line-strong: rgba(160,185,255,.22);

  /* -- surface tints: dark glass -- */
  --surface-1: color-mix(in srgb,var(--paper) 90%,transparent);
  --surface-2: color-mix(in srgb,var(--paper) 56%,transparent);
  --surface-3: color-mix(in srgb,var(--paper) 40%,transparent);

  --edge: inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(150,180,255,.06), var(--edge);
  --shadow-md: 0 10px 26px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(150,180,255,.07), var(--edge);
  --shadow-pop:0 30px 60px -20px rgba(0,0,0,.68), 0 0 0 1px rgba(150,180,255,.08), var(--edge);
}
.sa-ws i{ background:var(--accent)!important; }
/* kill every old forest-green workspace-avatar variant (5 pages leaked
   via class variants + an inline style attr the prior override missed) */
.ws-m,.ws-m.a,.ws-m.b,.ws-m.c,.side .sws .m,
[style*="#3f6e57"],[style*="background:#3f6e57"],
[style*="#3f8e6a"],[style*="background:#3f8e6a"]{
  background:var(--accent)!important; color:#fff!important; }
html.dark .ws-m,html.dark .ws-m.a,html.dark .ws-m.b,html.dark .ws-m.c,
html.dark .side .sws .m,html.dark [style*="#3f6e57"],
html.dark [style*="#3f8e6a"]{ color:var(--ink-on-accent)!important; }

/* ---- B4: reserve the scrollbar gutter always, so page/content width
   is constant regardless of how many cards a filter/tab shows (the
   auto-fill grid was reflowing when the scrollbar appeared/vanished) ---- */
html{ scrollbar-gutter: stable; }

/* ---- discreet space ground (soft clouds), behind everything ---- */
html{ background:var(--bg); }
body{ position:relative; background:transparent!important; }
.spacebg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.spacebg .c{ position:absolute; border-radius:999px; filter:blur(76px); }
.spacebg .c1{ width:760px;height:280px; left:-130px; top:40px;
  background:color-mix(in srgb,var(--accent) 32%,#ffffff); opacity:.72; }
.spacebg .c2{ width:560px;height:230px; right:-110px; top:300px;
  background:color-mix(in srgb,var(--accent) 24%,#ffffff); opacity:.56; }
.spacebg .c3{ width:600px;height:240px; left:34%; top:640px;
  background:color-mix(in srgb,var(--accent) 26%,#ffffff); opacity:.5; }
html.dark .spacebg .c{ mix-blend-mode:screen; opacity:.22; }

/* ---- corner-frame brackets: frame the CONTENT COLUMN, aligned to the
   inset nav band so the corners read as attached to the page rectangle
   (not a detached outer box). The floating nav (top ~28-34px, max 1180)
   lives just inside this frame. Earlier values were wrong: nav-level top
   read "too low", top:2px read "too high / detached". top:20px sits the
   top arm a hair above the nav so it visibly frames it; the horizontal
   band (~1200, 24px min gutter) hugs the 1180 nav/content column. ---- */
.spaceframe{ position:absolute; top:20px; bottom:16px;
  left:22px; right:22px;
  pointer-events:none; z-index:1; }
.spaceframe i{ position:absolute; width:24px; height:24px;
  border:0 solid color-mix(in srgb,var(--accent) 64%,var(--ink-faint)); opacity:.72; }
.spaceframe .tl{ top:0;left:0; border-left-width:1.5px; border-top-width:1.5px; }
.spaceframe .tr{ top:0;right:0; border-right-width:1.5px; border-top-width:1.5px; }
.spaceframe .bl{ bottom:0;left:0; border-left-width:1.5px; border-bottom-width:1.5px; }
.spaceframe .br{ bottom:0;right:0; border-right-width:1.5px; border-bottom-width:1.5px; }
html.dark .spaceframe i{ opacity:.8; }

/* GAP-B: the decorative corner brackets are pointless / broken at phone
   widths -- the 24x24 L-marks collide with the floating nav pill at the
   top and the bottom pair land ~4500px down a long scroll, so the
   "frame" reads as a glitch, not a frame. Hide the whole decorative
   frame on mobile (covers app pages AND landing-v2, which both use this
   shared .spaceframe from space-ds.css). The soft ambient .spacebg
   ground is intentionally KEPT: at 390 it is already shrunk by the
   <=680 cloud rules below and reads as a clean faint tint, not muddy,
   so killing it would only flatten mobile for no gain. */
@media (max-width:640px){
  .spaceframe{ display:none!important; }
}

/* ---- hide the dev prototype bar everywhere ---- */
.proto-bar{ display:none!important; }

/* ---- nav rule:
   default (app + every non-landing page) = full-width docked bar that
   is PERMANENTLY PINNED to the top of the viewport. F1 root cause: the
   proto gives .nav `position:relative` and .topbar no position at all,
   so `top:0` did nothing and the bar scrolled away with the content
   ("buggy scroll"). The app header must ALWAYS be visible -> pin it
   sticky at top:0 with a high z-index so it never scrolls off and never
   hides. There is NO hide-on-scroll on any app page (the Revolut
   hide/reveal lives EXCLUSIVELY on landing-v2's own .ln-nav + its own
   JS; app polish/*.js carry zero scroll-transform code, grep-proven).
   landing.html proto (marked by the landing-only .spaceframe) keeps its
   inset glass pill at the hero; once scrolled it docks full-width. ---- */
.topbar,.nav{ position:sticky!important; top:0!important; z-index:300!important;
  width:100%!important; max-width:none!important; margin:0!important;
  height:58px!important;
  /* G-glass: app header = the same translucent card glass as login /
     library cards so the cloud ground reads through it (was an opaque
     ~82% white slab that flattened the backdrop). paper 70% + a
     stronger saturate(1.5) blur(20px) + the accent 12% hairline. */
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,var(--line))!important;
  border-radius:0!important;
  background:var(--surface-3)!important;
  -webkit-backdrop-filter:saturate(1.5) blur(20px)!important;
  backdrop-filter:saturate(1.5) blur(20px)!important;
  box-shadow:var(--shadow-sm);
  transition:background .25s,box-shadow .25s,max-width .25s,border-radius .25s,margin .25s,top .25s; }
body:has(.spaceframe) .topbar{ max-width:1180px!important; margin:34px auto 0!important;
  top:34px!important; border:1px solid var(--line)!important; border-radius:var(--r-xl)!important;
  background:var(--surface-3)!important; }
body:has(.spaceframe) .topbar.scrolled{ max-width:none!important; margin:0!important;
  top:0!important; border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,var(--line))!important;
  border-radius:0!important;
  background:var(--surface-3)!important; box-shadow:var(--shadow-md); }
.topbar .brand{ gap:6px!important; }
/* Keep the REAL Floom mark: app.css renders a masked chevron via
   background:var(--ink). Do NOT repaint it with the accent (that
   clobbered the proto logo on every page). Only neutralise spacing. */
.topbar .brand .mark{ margin-right:0!important; }
/* readable primary button (not inverted, not invisible) */
.topbar .nav-right a.btn.btn-primary{ background:var(--solid)!important;
  color:var(--solid-fg)!important; border-color:transparent!important; }
.topbar .nav-right a.btn.btn-primary:hover{ background:var(--solid-2)!important; }

/* ---- CARD POLISH ,  glass only on true card surfaces (not list rows).
        surface-3 token (paper 38%) per CANON sec 1: ONE glass for every translucent
        surface. Restraint: .panel (sidebar) gets the same glass. ---- */
.fib,.cpchip,.sa-card,.ft-vis,.shareC,.vis,.shot,.card{
  background:var(--surface-3)!important;
  -webkit-backdrop-filter:saturate(1.5) blur(20px); backdrop-filter:saturate(1.5) blur(20px);
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line))!important;
  box-shadow:var(--shadow-sm)!important;
}
/* panel sidebar: lighter tint only ,  no heavy glass on structural chrome */
.panel{
  background:var(--surface-3)!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow-sm)!important;
}
.ft-vis,.vis,.shot{ box-shadow:var(--shadow-pop)!important; }
.fib{ box-shadow:var(--shadow-sm)!important; }
.lgrid{ background:var(--surface-3);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* ---- product mock chrome = THE accent colour itself (same blue) ---- */
.shot-bar,.ftv-bar{ background:var(--accent)!important;
  border-bottom:1px solid color-mix(in srgb,#000 16%,var(--accent))!important; }
.shot-tl i,.ftv-bar i{ background:rgba(255,255,255,.5)!important; }
.shot-url{ background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.28)!important; color:#fff!important; }
.shot-url svg{ color:rgba(255,255,255,.9)!important; }
/* dark accent is light ,  flip the on-bar UI to dark for contrast */
html.dark .shot-tl i,html.dark .ftv-bar i{ background:rgba(12,22,40,.42)!important; }
html.dark .shot-url{ background:rgba(12,22,40,.16)!important;
  border-color:rgba(12,22,40,.26)!important; color:#0c1a30!important; }
html.dark .shot-url svg{ color:#0c1a30!important; }

/* ---- hero mock internals ,  polish the activity / system-instructions /
        skill cards so the demo doesn't look unfinished ---- */
.sa-card{ padding:16px!important; border-radius:var(--r-lg)!important;
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s; }
.sa-card:hover{ transform:translateY(-1px);
  border-color:var(--accent-line)!important; box-shadow:var(--shadow-md)!important; }
.sa-card .ci{ border-radius:var(--r-md)!important; }
.sa-card .cm .pd i{ background:var(--accent)!important; box-shadow:0 0 0 3px var(--accent-soft)!important; }
.sa-act .ar{ padding:12px 2px!important; align-items:center;
  border-bottom:1px solid var(--line-soft)!important; }
.sa-act .ar:last-child{ border-bottom:none!important; }
.sa-act .ae{ color:var(--accent)!important; min-width:160px; }
.sa-sysi b{ color:var(--ink)!important; margin:14px 0 4px!important; }
.sa-sysi .badge2{ background:var(--accent-soft)!important;
  border-color:var(--accent-line)!important; color:var(--accent)!important; }
.sa-chip.on{ background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; }
html.dark .sa-chip.on{ color:#0c1a30!important; }
.sa-nav.on{ box-shadow:var(--shadow-sm)!important; }
.sa-detail{ box-shadow:-22px 0 50px -28px rgba(20,32,60,.4)!important; }

/* ---- inline subtitle logos ---- */
.flogo{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.flogo svg{ width:15px; height:15px; vertical-align:-2px; color:var(--ink); opacity:.9; }

/* ---- centered landing hero (only affects pages that have .hero) ---- */
.hero{ max-width:920px; margin-left:auto; margin-right:auto; text-align:center; }
.hero .fib,.hero .sub{ margin-left:auto; margin-right:auto; }
.hero .ctas{ justify-content:center; }
.hero h1{ letter-spacing:-.035em; line-height:1.08; }
.hero h1 em{ font-style:normal; color:var(--accent); }

/* ============================================================
   COMPONENT POLISH ,  every visual, consistent rhythm & finish
   ============================================================ */

/* eyebrows: small steel rule + tracked label, used everywhere */
.ft-eye,.sa-lbl,.lf .col h5{ display:inline-flex; align-items:center; gap:8px;
  letter-spacing:.04em; }
.ft-eye{ color:var(--accent)!important; font-weight:600; }
.ft-eye::before{ content:""; width:18px; height:1.5px; border-radius:1px;
  background:var(--accent); flex:none; }

/* feature-row visuals: refined rows */
.ftv-bar span{ letter-spacing:.02em; }
.vr{ padding:13px 15px!important; border-radius:var(--r-lg)!important;
  border-color:color-mix(in srgb,var(--accent) 12%,var(--line))!important;
  background:var(--surface-3)!important;
  transition:border-color .2s,transform .2s var(--ease); }
.vr:hover{ transform:translateX(2px); border-color:var(--accent-line)!important; }
.vr svg{ color:var(--accent)!important; opacity:.9; }
.vr .vn{ font-weight:560!important; }
.vr .vb{ background:var(--accent-soft)!important; border-color:var(--accent-line)!important;
  color:var(--accent)!important; font-weight:600; letter-spacing:.02em; }
.ft-cli{ line-height:2.05!important; letter-spacing:.01em; }
.ft-cli .pr{ color:var(--accent)!important; font-weight:600; }
.ft-cli .cm{ color:var(--ink-mute)!important; }

/* share card */
.shareC .sh-hd{ background:var(--surface-3)!important; }
.shareC .sh-hd .av{ background:var(--accent-soft)!important;
  color:var(--accent)!important; font-weight:680; }
.shareC .sh-sk .si{ border-color:var(--accent-line)!important;
  background:var(--accent-soft)!important; color:var(--accent)!important; }
.shareC .sh-ax b{ height:38px!important; border-radius:var(--r-md)!important; font-weight:600; }
.shareC .sh-ax .p{ background:var(--solid)!important; color:var(--solid-fg)!important; }
.shareC .sh-ax .s{ border-color:var(--line-strong)!important; }
.shareC .sh-ax .s:hover{ border-color:var(--accent-line)!important; color:var(--accent)!important; }

/* logo grid: gentle hover, aligned */
.lcell{ transition:background .2s,color .2s; }
.lcell:hover{ background:var(--accent-soft); color:var(--ink); }
.lcell svg{ opacity:.85; }

/* hero mock internals ,  full pass */
.sa-h{ letter-spacing:-.02em; }
.sa-sub{ color:var(--ink-mute)!important; }
.sa-filt{ gap:10px 14px!important; }
.sa-chip{ border-radius:999px!important; font-weight:550;
  border-color:color-mix(in srgb,var(--accent) 14%,var(--line))!important; }
.sa-card .cn{ letter-spacing:-.01em; }
.sa-card .cd{ color:var(--ink-soft)!important; line-height:1.5!important; }
.sa-card .cm{ color:var(--ink-mute)!important; }
.sa-detail .dt{ letter-spacing:-.02em; }
.sa-detail .dbody{ background:color-mix(in srgb,var(--accent) 6%,var(--bg-2))!important;
  border-color:var(--accent-line)!important; line-height:1.7!important; }
.sa-ws{ background:var(--surface-3)!important;
  border-color:color-mix(in srgb,var(--accent) 14%,var(--line))!important; }
.sa-cur svg{ fill:var(--ink); }

/* buttons: consistent finish + accent focus ring */
.btn{ letter-spacing:.01em; }
.btn-primary{ box-shadow:var(--shadow-sm); }

/* system-instructions Edit affordance (Federico 2026-05-19): the proto
   .panel .panel-head holds the file path label + version chip. Inject
   an Edit button in line with them so mobile + desktop both have a
   clear edit path. v2 (Federico 2026-05-19 screenshot 17.23.59):
   button looked like it was sticking out of the panel header --
   tightened to a transparent ghost style with subtle border so it
   blends with the panel-head gradient, and ensured flex-shrink:0 so
   it never collapses to 0 width. */
.panel > .panel-head .flm-edit-grp{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  flex-shrink:0;
}
.panel > .panel-head{ display:flex; align-items:center; gap:8px; }
.flm-edit{
  display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 10px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper) 60%,transparent);
  color:var(--ink-soft);
  font:inherit; font-size:11.5px; font-weight:540; letter-spacing:-.005em;
  cursor:pointer;
  flex-shrink:0;
  transition:color .15s, border-color .15s, background .15s;
}
.flm-edit:hover{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.flm-edit svg{ width:12px; height:12px; }
.flm-edit.flm-edit-on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.flm-edit.flm-edit-on:hover{ background:var(--accent); }
/* visual feedback when the panel is in editing mode -- accent ring +
   slight bg tint */
.panel.flm-editing{
  box-shadow:0 0 0 2px var(--accent-line), 0 0 0 4px color-mix(in srgb,var(--accent) 5%,transparent);
  background:color-mix(in srgb,var(--accent-soft) 60%,var(--paper))!important;
}

/* skill-detail mobile: lift the right aside (About / Pull / Versions)
   ABOVE the tabbed panel content (Federico 2026-05-19 -- "sidebar of
   a card on mobile" was scrolled below all tab content, hard to
   discover). At <=980 the .body 2-col stacks; reverse so aside is
   first. */
@media (max-width:980px){
  body:has(.repo) .body{ display:flex!important; flex-direction:column!important; }
  body:has(.repo) .body > aside{ order:-1; }
  body:has(.repo) .body > .panels-col{ order:1; }
}

/* Rail "+ New skill" button shrink (Federico 2026-05-19):
   The library / skill-detail / skill-new protos all carry a primary
   button at the top of the .side rail (.new in library, .snew in
   skill-detail + skill-new). With the canonical .btn-primary 46h that
   button dominated the rail. Trim every rail-scoped variant to 34h /
   13px / smaller icon, keeping width:100% so the affordance still
   anchors the rail visually. The .flm-rail injected variant
   (settings / ws-settings / approvals) is normalised below in the
   _apply.py rail injection block. */
.shell .side .new.btn.btn-primary,
.shell .side .snew.btn.btn-primary{
  height:34px!important;
  padding:0 14px!important;
  font-size:13px!important;
  letter-spacing:-.01em!important;
  margin-bottom:16px!important;
  gap:7px!important;
}
.shell .side .new.btn.btn-primary svg,
.shell .side .snew.btn.btn-primary svg{
  width:14px!important; height:14px!important;
}
.lnk{ color:var(--accent)!important; font-weight:560; }
.lnk svg{ transition:transform var(--t-fast); }
.lnk:hover svg{ transform:translateX(3px); }
:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)!important; border-radius:var(--r-sm); }

/* app pages: search, tabs, side-nav active, account chip */
input,.search,[class*="search"] input{ border-radius:var(--r-lg); }
/* CANON sec 13 / R10  -  tab active = solid bg/fg/border, not accent underline. */
.tab.on,.tabs .on,[role="tab"][aria-selected="true"]{
  color:var(--solid-fg)!important; background:var(--solid)!important;
  border-color:var(--solid)!important; }
.side a.on,.sa-nav.on,.cb-nav.on,nav a.active{
  background:var(--paper)!important;
  box-shadow:var(--shadow-sm)!important; }
.side a.on::before{ content:""; }
.acct,[class*="account"],[class*="workspace"] .ws{ border-radius:var(--r-lg); }

/* D6 injected theme control: keep a comfortable mobile tap target
   (the labelled pill is 32px tall on desktop; reach >=40px <=640px). */
@media (max-width:640px){
  #floomTheme{ min-height:40px!important; }
}

/* final CTA + footer rhythm */
.fcta h2{ letter-spacing:-.04em; }
.fcta .fn{ color:var(--ink-mute)!important; letter-spacing:.02em; }
.lf .col a:hover{ color:var(--accent)!important; }
.lf .bn .cp{ color:var(--ink-mute)!important; }

/* ---- respect reduced motion for ambient layers ---- */
@media (prefers-reduced-motion:reduce){
  .spacebg{ display:none!important; }
  .shotwrap::before{ display:none!important; }
}

/* ============================================================
   AUDIT FIXES ,  consolidated from 3 parallel page reviews
   (high-confidence, systemic; per-page + content items tracked
   in ISSUES.md, not silently dropped)
   ============================================================ */

/* auth / design-system pages use <nav class="nav"> ,  give them the
   same glass pill + steel mark so they match every .topbar page */
.nav{ max-width:1180px; margin:34px auto 0!important; height:58px!important;
  /* G-glass: same translucent card material as login / library cards */
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line))!important; border-radius:var(--r-xl);
  background:var(--surface-3)!important;
  -webkit-backdrop-filter:saturate(1.5) blur(20px)!important;
  backdrop-filter:saturate(1.5) blur(20px)!important;
  box-shadow:var(--shadow-sm); padding-left:18px; padding-right:18px; }
.nav .brand{ gap:6px!important; }
/* same: keep the real masked-chevron mark, only neutralise spacing */
.nav .brand .mark{ margin-right:0!important; }
.nav .nav-right a.btn.btn-primary,.nav a.btn.btn-primary{
  background:var(--solid)!important; color:var(--solid-fg)!important; border-color:transparent!important; }

/* form inputs: visible on light cards + steel focus (settings/ws-settings) */
input,textarea,select,.input{ border:1px solid var(--line-strong)!important;
  border-radius:var(--r-lg)!important; background:var(--paper)!important; color:var(--ink)!important; }
input::placeholder,textarea::placeholder{ color:var(--ink-mute)!important; }
input:focus,textarea:focus,select:focus,.input:focus,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none!important; border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-soft)!important; }
input[type=date]{ font-family:var(--font); }

/* code surfaces readable in dark (bg-2 ~= paper in dark) */
code,pre,.cb,.ft-cli,.sa-detail .dbody,.dbody,[class*="code"]{
  background:var(--bg-3)!important; border:1px solid var(--line)!important; }
code,pre{ border-radius:var(--r-sm); }

/* sticky TOC slid under the floating nav on docs/privacy/terms */
.toc{ top:80px!important; }
.doc h2,.doc h3,h2[id],h3[id]{ scroll-margin-top:84px!important; }

/* discreet clouds shouldn't bleed/overflow on mobile */
@media (max-width:680px){
  .spacebg .c1{ width:90vw!important;height:200px!important;left:-10vw!important;top:36px!important; }
  .spacebg .c2{ width:80vw!important;height:170px!important;right:-12vw!important;top:280px!important; }
  .spacebg .c3{ width:84vw!important;height:170px!important;left:8vw!important;top:560px!important; }
  /* mobile: same intent ,  frame just above the inset nav, hug the
     content gutter (nav is width:calc(100% - 64px), so ~16px sides) */
  .spaceframe{ top:18px!important;bottom:14px!important;
    left:16px!important;right:16px!important; }
  .hero h1{ letter-spacing:-.025em!important; }
  .btn-sm,.sa-chip,.tab,[role="tab"]{ min-height:40px; }
  /* batch-8 gate: remaining sub-40px functional controls at <=680
     (TOC nav links, library list/grid toggle, skill-detail role
     segmented control + copy button) brought to a 40px tap target */
  .toc a,.lib-view-seg button,.roleseg button,.roleband button,
  .seg button,.segctl button,.cp,.copy,.copybtn{
    min-height:40px!important; display:flex!important;
    align-items:center!important; box-sizing:border-box; }
  .toc a{ justify-content:flex-start; }
  /* closeout P1: app/auth header brand link/mark (~70x23) + secondary
     nav links (login GitHub icon 32x32, Docs 53x34) -> 40px tap area */
  .topbar .brand,.nav .brand,
  .topbar .nav-right a,.nav .nav-right a,
  .topbar .ghost-icon,.nav .ghost-icon{
    min-height:40px!important; display:inline-flex!important;
    align-items:center!important; box-sizing:border-box; }
  .topbar .ghost-icon,.nav .ghost-icon{ min-width:40px!important;
    justify-content:center!important; }
}

/* skill-detail has reversed @media/.side rule order in proto HTML ,  the base
   .side{display:flex} appears after the @media{display:none} so the base wins.
   Override here (space-ds.css loads last) to ensure sidebar hides on mobile.
   Also constrain .wrap and .shell to viewport width to prevent horizontal scroll.
   Extended to 980 (was 760): at the tablet range the .shell collapses to
   single-column but the .side stayed visible as a full-height flex column
   with margin-top:auto on the workspace chip - that ballooned the sidebar
   to viewport height and produced a ~600px white void with the chip stuck
   at the bottom and the main content pushed off-screen. Top nav handles
   navigation at &lt;=980; the sidebar only makes sense in the 3-col
   desktop layout at &gt;=981. */
@media (max-width:980px){
  /* CANON sec 12 / R3 (revised): tablet+below repositions BOTH rail systems
     (.side proto rail AND .flm-rail injected rail) as an OFF-CANVAS DRAWER
     instead of hiding them outright (which left mobile users with no way to
     navigate between app sections - Federico flagged this). The rail stays
     in the DOM, slides in from the left when the hamburger button (#flm-burger)
     is toggled, and a backdrop dims the rest. */
  .shell{ display:block!important; width:100%!important; }
  .wrap{ width:100%!important; min-width:0!important; overflow-x:hidden!important; box-sizing:border-box!important; }
  body.flm-railed .lay{ grid-template-columns:1fr!important; }
  .flm-aprshell{ grid-template-columns:1fr!important; }

  /* drawer position: fixed left edge, full viewport height, slid off by default */
  .side,.flm-rail{
    position:fixed!important;
    left:0!important; top:0!important;
    width:min(280px,82vw)!important;
    height:100vh!important; max-height:100vh!important;
    z-index:1200!important;
    transform:translateX(-101%)!important;
    transition:transform .28s var(--ease,cubic-bezier(.2,.7,.2,1))!important;
    overflow-y:auto!important;
    background:var(--paper)!important; /* solid for legibility over content */
    border-right:1px solid var(--line)!important;
    box-shadow:0 24px 60px -16px rgba(20,32,60,.35)!important;
    -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
  }
  /* when body has the open class, the drawer slides in */
  body.flm-drawer-open .side,
  body.flm-drawer-open .flm-rail{ transform:translateX(0)!important; }

  /* backdrop */
  .flm-drawer-bd{
    position:fixed; inset:0; z-index:1100;
    background:color-mix(in srgb,#0d121a 56%,transparent);
    opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease,cubic-bezier(.2,.7,.2,1));
  }
  body.flm-drawer-open .flm-drawer-bd{ opacity:1; pointer-events:auto; }

  /* hamburger button - rendered by _apply.py inside the top nav */
  #flm-burger{
    display:inline-flex!important;
    align-items:center;justify-content:center;
    width:44px;height:44px;
    margin-right:6px;
    border:1px solid var(--line);
    border-radius:var(--r-md);
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    flex-shrink:0;
    transition:background .15s,border-color .15s;
  }
  #flm-burger:hover{ background:var(--accent-soft); border-color:var(--accent-line); }
  #flm-burger svg{ width:18px;height:18px; }
  body.flm-drawer-open{ overflow:hidden; }
  /* the proto .lay grid carries position:relative + z-index:1 inline
     (settings/skill-detail/onboarding etc), which creates a stacking
     context that traps the nested rail (z:1200) below the backdrop
     (z:1100) at root paint-order. When the drawer is open we neutralise
     that stacking context so the rail escapes to root z-order. Scoped
     to body.flm-drawer-open so the layout is unchanged in any other
     state. The grid is still position:relative + z-index:auto, which is
     the same paint-order as the default for grid children. */
  body.flm-drawer-open .lay{ z-index:auto!important; }
  body.flm-drawer-open .flm-aprshell{ z-index:auto!important; }
}
@media (min-width:981px){
  #flm-burger{ display:none!important; }
  .flm-drawer-bd{ display:none!important; }
}

/* ============================================================
   Skill tags + folder tree (additive design for v2-folders).
   Federico is adding folders + tags as real features. These styles
   land the visual treatment now so the wireframes show what folders
   + tag chips look like; the DOM is injected per-page by _apply.py
   (.flm-sk-tags inside library cards, .flm-folders nested under the
   Skills rail item, .flm-bc breadcrumb on skill-detail).
   ============================================================ */
/* tag pill row inside a skill card */
.flm-sk-tags{
  display:flex; flex-wrap:wrap; gap:5px;
  margin:4px 0 8px;
}
.flm-sk-tag{
  display:inline-flex; align-items:center;
  height:22px; padding:0 9px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:10.5px; font-weight:500;
  letter-spacing:0;
  line-height:1;
  transition:border-color .15s, color .15s, background .15s;
}
.flm-sk-tag:hover{ border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); }
.flm-sk-tag.flm-sk-tag-more{ color:var(--ink-mute); }
a.flm-sk-tag{ text-decoration:none; cursor:pointer; }
.flm-sk-tag.on{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:600;
}

/* folder sub-tree expanded under the Skills rail item */
.flm-folders{
  display:flex; flex-direction:column;
  gap:1px;
  margin:2px 0 6px 0;
  padding:2px 0 4px 0;
  border-left:1px solid var(--line);
  margin-left:16px;
}
.flm-folders .flm-folder{
  display:flex; align-items:center;
  height:26px;
  padding:0 9px 0 14px;
  font-size:12px; font-weight:500;
  color:var(--ink-soft);
  text-decoration:none;
  border-radius:var(--r-sm);
  transition:background .15s, color .15s;
  position:relative;
}
.flm-folders .flm-folder:hover{ background:color-mix(in srgb,var(--paper) 60%,transparent); color:var(--ink); }
.flm-folders .flm-folder.on{ background:var(--accent-soft); color:var(--ink); font-weight:560; }
.flm-folders .flm-folder .flm-folder-ct{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--ink-mute);
  font-weight:500;
}
.flm-folders .flm-folder.on .flm-folder-ct{ color:var(--accent); }
.flm-folders .flm-folder svg{
  width:13px; height:13px;
  margin-right:7px;
  color:var(--ink-mute);
  flex-shrink:0;
}
.flm-folders .flm-folder.on svg{ color:var(--accent); }

/* per-folder hover menu (3-dot button on the right) */
.flm-folders .flm-folder{ overflow:visible; }
.flm-folder-menu{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:22px; height:22px;
  display:none; align-items:center; justify-content:center;
  border:0; padding:0; margin:0;
  background:transparent; color:var(--ink-mute);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background .12s, color .12s;
}
.flm-folder-menu svg{ width:14px; height:14px; }
.flm-folder:hover .flm-folder-menu,
.flm-folder:focus-within .flm-folder-menu,
.flm-folder.flm-folder-menu-open .flm-folder-menu{ display:inline-flex; }
.flm-folder-menu:hover{ background:color-mix(in srgb,var(--paper) 70%,transparent); color:var(--ink); }
.flm-folder-menu:focus{ outline:2px solid var(--accent-line); outline-offset:1px; }
/* hide the trailing count chip when the menu is visible (hover or focus)
   so the row doesn't shuffle width */
.flm-folder:hover .flm-folder-ct,
.flm-folder:focus-within .flm-folder-ct,
.flm-folder.flm-folder-menu-open .flm-folder-ct{ visibility:hidden; }
.flm-folder-pop{
  position:absolute;
  right:6px; top:calc(100% + 4px);
  z-index:50;
  display:flex; flex-direction:column;
  min-width:138px; padding:4px;
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  box-shadow:0 14px 36px -10px rgba(20,32,60,.25);
}
.flm-folder-act{
  display:flex; align-items:center;
  height:30px; padding:0 10px;
  border:0; background:transparent;
  font:inherit; font-size:12.5px; color:var(--ink);
  text-align:left; cursor:pointer;
  border-radius:var(--r-sm);
  transition:background .12s;
}
.flm-folder-act:hover{ background:var(--accent-soft); }
.flm-folder-act.flm-folder-act-danger{ color:#a94442; }
.flm-folder-act.flm-folder-act-danger:hover{ background:color-mix(in srgb,#a94442 12%,transparent); }

/* + New folder ghost row */
.flm-folder.flm-folder-new{
  width:100%;
  border:0; background:transparent;
  color:var(--ink-mute);
  text-align:left;
  font-family:inherit;
  margin-top:2px;
}
.flm-folder.flm-folder-new:hover{ color:var(--ink); background:color-mix(in srgb,var(--paper) 60%,transparent); }
.flm-folder.flm-folder-new svg{ color:var(--ink-mute); }
.flm-folder.flm-folder-new:hover svg{ color:var(--accent); }

/* inline rename / new-folder input row */
.flm-folder.flm-folder-input{
  height:30px;
}
.flm-folder.flm-folder-input input{
  flex:1; min-width:0;
  height:22px;
  margin-left:0;
  padding:0 6px;
  border:1px solid var(--accent-line);
  border-radius:var(--r-sm);
  background:var(--paper);
  font:inherit; font-size:12px; color:var(--ink);
  outline:none;
}
.flm-folder.flm-folder-input input:focus{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }

/* clear filter chip in the filter row */
.flm-clear-filter{
  display:inline-flex; align-items:center;
  gap:6px;
  height:24px;
  padding:0 10px 0 8px;
  margin-right:auto; margin-left:0;
  border:1px solid var(--accent-line);
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.flm-clear-filter svg{ width:11px; height:11px; }
.flm-clear-filter:hover{ background:color-mix(in srgb,var(--accent) 18%,transparent); border-color:var(--accent); }

/* expand/collapse chevron on the parent Skills rail item (only when
   folders are nested under it) */
.flm-skills-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  margin-left:auto;
  margin-right:4px;
  border:0; background:transparent; padding:0;
  color:var(--ink-mute);
  cursor:pointer;
  border-radius:var(--r-sm);
  transition:background .15s, transform .2s;
}
.flm-skills-toggle:hover{ background:color-mix(in srgb,var(--paper) 60%,transparent); color:var(--ink); }
.flm-skills-toggle svg{ width:11px; height:11px; }
.flm-skills-collapsed .flm-folders{ display:none; }
.flm-skills-collapsed .flm-skills-toggle{ transform:rotate(-90deg); }
/* when the tree is collapsed, the Skills item should once again show
   the count chip on the right (the count is hidden while the tree is
   visible because All skills carries it). reverse the inline-style
   display:none set by the JS injection. */
.flm-skills-collapsed > .si .ct{ display:inline-flex!important; }

/* breadcrumb on skill-detail above the page h1 */
.flm-bc{
  display:flex; align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-mute);
  margin:0 0 12px 0;
  text-transform:none;
  letter-spacing:0;
}
.flm-bc a{
  color:var(--ink-soft); text-decoration:none;
  transition:color .15s;
}
.flm-bc a:hover{ color:var(--accent); }
.flm-bc .flm-bc-sep{ color:var(--ink-faint); }
.flm-bc .flm-bc-cur{ color:var(--ink); font-weight:500; }

/* ============================================================
   Harness sync indicator (v2-HARNESS-SYNC).
   Two surfaces: compact one-liner on library cards (.flm-sync-row)
   and a full "Synced to" card in the skill-detail aside (.flm-sync-card).
   ============================================================ */
/* Harness sync indicator on library cards */
.flm-sync-row{
  display:flex; align-items:center;
  gap:8px;
  margin:0 0 4px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--ink-mute);
}
.flm-sync-stack{
  display:inline-flex; align-items:center;
}
.flm-sync-stack .flm-sync-ic{
  width:16px; height:16px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
  margin-left:-4px;
}
.flm-sync-stack .flm-sync-ic:first-child{ margin-left:0; }
.flm-sync-stack .flm-sync-ic svg{ width:9px; height:9px; }
.flm-sync-more{
  margin-left:-4px;
  display:inline-flex; align-items:center; justify-content:center;
  height:16px; min-width:16px; padding:0 4px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  font-family:var(--font-mono); font-size:9px; font-weight:600;
  color:var(--ink-soft);
}
.flm-sync-row .flm-sync-sep{ color:var(--ink-faint); }
.flm-sync-row .flm-sync-when{ color:var(--ink-mute); }
.flm-sync-row .flm-sync-dot{
  width:5px; height:5px; border-radius:50%; background:var(--positive);
  flex-shrink:0;
}

/* Skill-detail aside "Synced to" card */
.flm-sync-card .flm-sync-head{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-mute);
  margin:0 0 12px;
}
.flm-sync-card .flm-sync-head em{
  font-style:normal; color:var(--ink); font-weight:600;
}
.flm-sync-card .flm-sync-list{ display:flex; flex-direction:column; gap:2px; }
.flm-sync-card .flm-sync-item{
  display:flex; align-items:center;
  gap:10px;
  padding:7px 8px;
  border-radius:var(--r-sm);
  transition:background .15s;
}
.flm-sync-card .flm-sync-item:hover{ background:color-mix(in srgb,var(--paper) 60%,transparent); }
.flm-sync-card .flm-sync-item svg{ width:13px; height:13px; color:var(--ink); flex-shrink:0; }
.flm-sync-card .flm-sync-nm{ font-size:13px; color:var(--ink); font-weight:540; flex:1; }
.flm-sync-card .flm-sync-when{ font-family:var(--font-mono); font-size:11px; color:var(--ink-mute); }
.flm-sync-card .flm-sync-foot{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:6px;
}
.flm-sync-card .flm-sync-foot .flm-sync-dot{ background:var(--positive); }

/* neutralise leftover green / amber utility chips into the steel system
   (one-accent rule) without touching semantics-by-shape.
   Federico 2026-05-19: `.tab.on` was incorrectly in this list -- it
   was lumped with the green-chip cleanup and ended up overriding the
   canonical tab active state (line 392 .tab.on -> solid bg + solid-fg
   text) so tabs rendered with ink bg + accent text (blue-on-dark).
   Removed .tab.on from both lists so the canonical rule wins. */
.badge.green,.badge.success,.tag.green,.pill.green,
[class*="badge"].is-green,.chip.green,.status.live,.status.active,
.sa-chip.on,[data-variant="success"]{
  background:var(--accent-soft)!important; border-color:var(--accent-line)!important;
  color:var(--accent)!important; }
html.dark .sa-chip.on{ color:#0c1a30!important;
  background:var(--accent)!important; }

/* share-link uses .face (not .card) ,  bring it into the glass system */
.face,.sndr{ background:var(--surface-3)!important;
  -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px); }
/* auth cards (login / cli-login) clearly translucent over the sky */
.auth .card,.authcard,main .card{ background:var(--surface-3)!important;
  -webkit-backdrop-filter:saturate(1.5) blur(20px)!important; backdrop-filter:saturate(1.5) blur(20px)!important; }

/* ============================================================
   C4 - APP PAGES CARRY THE LANDING GLASS + SPACE GROUND
   Previously app pages were painted a flat opaque canvas (#fcfcfd /
   #14161a) which covered the injected `.spacebg`, so they "kind of
   sucked" vs the landing/login. Now: the page chrome (body, shell,
   main, content wrap, scroll containers) is transparent so the
   discreet space ground shows through, the sidebar gets the same
   light translucent glass as the landing/login surfaces, and cards/
   panels use the glass token (handled by the .card/.panel block
   above). Subtle in light (the ground is faint there by design) but
   present, so pages no longer read as dead opaque white.
   Excludes landing (.spaceframe = landing-only product demo shell).
   ============================================================ */
body:has(.side):not(:has(.spaceframe)),
body:has(.sa-side):not(:has(.spaceframe)){ background:transparent!important; }
/* the shell + its content/scroll containers must be transparent so
   the fixed .spacebg (z-index:-1) is visible behind the whole page */
body:not(:has(.spaceframe)) .shell,
body:not(:has(.spaceframe)) .shell > .wrap,
body:not(:has(.spaceframe)) .shell .main,
body:not(:has(.spaceframe)) main.main,
body:not(:has(.spaceframe)) .lay,
body:not(:has(.spaceframe)) .lay .doc,
body:not(:has(.spaceframe)) .content,
body:not(:has(.spaceframe)) .page{ background:transparent!important; }
/* sidebar = the same light translucent glass as landing/login (not a
   heavy grey slab). .sa-side inside the landing hero mock is excluded
   by the :not(.spaceframe) guard above. */
body:not(:has(.spaceframe)) .side,
body:not(:has(.spaceframe)) .side-scroll,
body:not(:has(.spaceframe)) .sa-side{
  background:var(--surface-3)!important;
  -webkit-backdrop-filter:saturate(1.3) blur(14px)!important;
  backdrop-filter:saturate(1.3) blur(14px)!important;
  border-right:1px solid var(--line)!important; }
body:not(:has(.spaceframe)) .side-scroll{
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
  border-right:0!important; }
html.dark body:not(:has(.spaceframe)) .side,
html.dark body:not(:has(.spaceframe)) .side-scroll,
html.dark body:not(:has(.spaceframe)) .sa-side{
  background:var(--surface-3)!important; }

/* === nav goes full-width on true app pages (sidebar present, not landing demo) === */
body:has(.side):not(:has(.spaceframe)) .topbar,
body:has(.side):not(:has(.spaceframe)) .nav,
body:has(.sa-side):not(:has(.spaceframe)) .topbar,
body:has(.sa-side):not(:has(.spaceframe)) .nav{
  max-width:none!important; margin:0!important; top:0!important;
  border-radius:0!important; border-left:0!important; border-right:0!important; border-top:0!important;
  /* G-glass: full-width app header on sidebar pages = same translucent
     card glass (was 86% opaque white, flattened the cloud ground) */
  border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,var(--line))!important;
  background:var(--surface-3)!important; }
.safe{ background:var(--accent-soft)!important; border-color:var(--accent-line)!important; }

/* activity: event-type reads as a tag, not a raw class string */
.sa-act .ae,[class*="event"] .type,.ev-type{
  display:inline-block; padding:2px 8px; border-radius:var(--r-sm);
  background:var(--accent-soft)!important; color:var(--accent)!important; }

/* contact emails should be links visually even where proto left them bare */
.contact strong,address strong{ color:var(--accent); }

/* ============================================================
   BATCH 5 - Federico review (D1-D4, systemic)
   Loaded last; wins over app.css + per-page inline <style> +
   earlier space-ds rules. Excludes the landing demo shell
   (:not(:has(.spaceframe))) so landing-v2 keeps its own register.
   ============================================================ */

/* -- D1: app-page CONTENT CARDS = the same translucent glass as the
   landing / login surfaces (the page canvas is already transparent
   from C4, so the discreet space ground reads through them). The
   prior pass left skill-detail's .panel at ~70% white and the rail
   .rcard at ~54% with no accent hairline -> "opaque white". Match
   login (surface-3, ~38% paper) + a soft accent hairline + a real
   blur so every inner card on every app page is one coherent glass. */
body:not(:has(.spaceframe)) .panel,
body:not(:has(.spaceframe)) .rcard,
body:not(:has(.spaceframe)) .card.card-sm,
body:not(:has(.spaceframe)) .card.card-pad,
body:not(:has(.spaceframe)) .panels-col > .card,
body:not(:has(.spaceframe)) .rail > .card{
  background:var(--surface-3)!important;
  -webkit-backdrop-filter:saturate(1.5) blur(20px)!important;
  backdrop-filter:saturate(1.5) blur(20px)!important;
  border:1px solid color-mix(in srgb,var(--accent) 13%,var(--line))!important;
  box-shadow:var(--shadow-sm)!important;
}
/* table header / panel-head sit on the glass: keep them readable but
   not a second opaque slab */
body:not(:has(.spaceframe)) .panel-head{
  background:color-mix(in srgb,var(--accent) 5%,transparent)!important;
  border-bottom:1px solid var(--line)!important; }

/* -- D2: ICON CONTAINER - kill the boring flat grey box behind skill
   glyphs. One refined treatment everywhere (skill-detail repo header,
   library grid card, drawer header): accent-tinted glass + a hairline
   accent ring, no heavy grey fill, glyph in the steel accent. -- */
body:not(:has(.spaceframe)) .repo-ic,
.shell .main .grid .sk .sk-ic,
.sk-drawer-bd .repo-ic{
  background:color-mix(in srgb,var(--accent) 14%,transparent)!important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent)!important;
  color:var(--accent)!important; }
body:not(:has(.spaceframe)) .repo-ic svg,
.shell .main .grid .sk .sk-ic svg,
.sk-drawer-bd .repo-ic svg{ color:var(--accent)!important; opacity:1!important; }

/* -- D3: VISIBILITY CHIP - no boxed grey background anywhere. Clean
   dot + label, steel system. Covers skill-detail repo header chip,
   the library grid card .vis, and the drawer chip. -- */
.repo-name .vis,.repo-name .chip.vis,
.shell .main .grid .sk .mt .vis,
.sk-drawer-bd .repo-name .vis,.sk-drawer-bd .repo-name .chip{
  background:none!important; border:0!important; box-shadow:none!important;
  padding:0!important; display:inline-flex!important; align-items:center;
  gap:6px!important; font-family:var(--font-mono); font-size:10.5px;
  font-weight:600; letter-spacing:.02em; color:var(--ink-mute)!important;
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
.repo-name .vis .dot,.shell .main .grid .sk .vis .dot,
.sk-drawer-bd .repo-name .vis .dot,.sk-drawer-bd .repo-name .chip .dot{
  width:6px!important; height:6px!important; border-radius:50%;
  background:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-soft)!important;
  border:0!important; flex:none; }
.repo-name .vis .dot-mute,.shell .main .grid .sk .vis .dot-mute,
.sk-drawer-bd .repo-name .vis .dot-mute,.sk-drawer-bd .repo-name .chip .dot-mute{
  width:6px!important; height:6px!important; border-radius:50%;
  background:transparent!important;
  border:1.5px solid var(--ink-faint)!important;
  box-shadow:none!important; flex:none; }

/* -- D4: ONE consistent restrained sidebar active state across every
   app page + every state (Skills / Activity / System instructions).
   The prior pass had three different treatments (library = soft tint,
   activity + system-instructions = a loud accent left-border). This
   single canonical rule (loaded last, wins source-order over the
   proto inline .si.on and any polish/*.css) makes them identical:
   a quiet accent-tinted fill + hairline ring, glyph in accent, NO
   left bar, NO drop shadow. Mirrors landing-v2 .ln-sb-item.on. -- */
.shell .side .si.on,
.shell .side .sgrp .si.on,
.shell .side .grp .si.on,
.shell .side-scroll .si.on{
  color:var(--ink)!important;
  font-weight:560!important;
  background:color-mix(in srgb,var(--accent) 10%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)!important;
  border-left:1px solid color-mix(in srgb,var(--accent) 18%,transparent)!important;
  border-radius:var(--r-md)!important;
  padding-left:8px!important;
  box-shadow:none!important; }
.shell .side .si.on svg,
.shell .side-scroll .si.on svg{
  color:var(--accent)!important; opacity:1!important; }

/* ============================================================
   BATCH 6 - Federico review (E1-E4, systemic)
   Loaded last; wins over app.css + per-page inline <style>.
   Excludes the landing demo shell (:not(:has(.spaceframe))) so
   landing-v2 keeps its own register.
   ============================================================ */

/* -- E1 + E2: ONE consistent app-nav layout on EVERY proto page.
   Root cause: the proto mixes nav structures ,  some pages put the
   account in a `.dd#ddMe` wrapper, others in `.nav-right`; the bar is
   `display:flex; justify-content:space-between`. With only brand +
   account that reads correctly, but the injected #floomTheme control
   becomes a THIRD flex child, so space-between drops the account chip
   dead-centre. Fix: on app pages neutralise space-between and push the
   brand hard left (margin-right:auto). Everything after it (account
   wrapper/.nav-right + the injected theme pill) then packs into ONE
   tight right-aligned cluster ,  never centred ,  regardless of which
   structure the page uses or whether 2 or 3 children are present. -- */
body:has(.side):not(:has(.spaceframe)) .topbar,
body:has(.side):not(:has(.spaceframe)) .nav,
body:has(.sa-side):not(:has(.spaceframe)) .topbar,
body:has(.sa-side):not(:has(.spaceframe)) .nav{
  display:flex!important; align-items:center!important;
  justify-content:flex-start!important; gap:10px!important;
  flex-wrap:nowrap!important; }
/* brand pinned far LEFT, pushes the rest to the right edge */
body:has(.side):not(:has(.spaceframe)) .topbar > .brand,
body:has(.side):not(:has(.spaceframe)) .nav > .brand,
body:has(.sa-side):not(:has(.spaceframe)) .topbar > .brand,
body:has(.sa-side):not(:has(.spaceframe)) .nav > .brand{
  margin-right:auto!important; flex:none!important; }
/* the account wrapper (.dd / .nav-right) sits in the right cluster,
   never grows, never centres its own contents */
body:has(.side):not(:has(.spaceframe)) .topbar > .dd,
body:has(.side):not(:has(.spaceframe)) .topbar > .nav-right,
body:has(.side):not(:has(.spaceframe)) .nav > .dd,
body:has(.side):not(:has(.spaceframe)) .nav > .nav-right,
body:has(.sa-side):not(:has(.spaceframe)) .topbar > .dd,
body:has(.sa-side):not(:has(.spaceframe)) .topbar > .nav-right,
body:has(.sa-side):not(:has(.spaceframe)) .nav > .dd,
body:has(.sa-side):not(:has(.spaceframe)) .nav > .nav-right{
  flex:none!important; margin-left:0!important; }
/* the injected theme pill: order it just AFTER the account, keep it in
   the same right cluster (it falls back to appending on .topbar when
   there is no .nav-right, which is exactly where centring used to bite) */
body:has(.side):not(:has(.spaceframe)) #floomTheme,
body:has(.sa-side):not(:has(.spaceframe)) #floomTheme{
  order:0!important; margin-left:0!important; margin-right:0!important;
  flex:none!important; }

/* -- E3: sidebar workspace switcher STICKY-pinned to the bottom of the
   sidebar viewport. The proto sidebar is already a flex column with a
   scrollable nav (.side-scroll) + a footer switcher (.ws-foot / .sfoot),
   BUT the proto sticky offsets assume the OLD inset-pill nav:
     library/activity/sysinst -> top:calc(38px+56px); height:calc(100vh-94px)
     skill-detail            -> top:0;                height:100vh
   space-ds docks the real nav full-width at top:0/height:58px, so the
   first set leaves a 36px dead gap + ends 36px short, and skill-detail's
   sidebar slides UNDER the fixed nav and is 58px too tall -> the footer
   switcher is pushed off-screen (the regression). Normalise every app
   sidebar to the real nav metric so the switcher is always visible. -- */
/* desktop-only sidebar normalization. This block was NO-media before
   and its `display:flex !important` (specificity 0,3,1) won over the
   @media (max-width:980) `.side{display:none!important}` at 768,
   leaving the sidebar visible at tablet and producing a ~600px white
   void (flex-column + margin-top:auto chip pushed to the bottom).
   Scope to &gt;=981 so the side genuinely hides on tablet/mobile. */
@media (min-width:981px){
body:not(:has(.spaceframe)) .shell > .side{
  position:sticky!important;
  top:58px!important;
  /* Federico 2026-05-19: let the rail be natural-height (just tall
     enough for its actual content), capped to the viewport so it
     scrolls if it ever exceeds it. The proto pages set an inline
     `.side { height: calc(100vh - 38px - 56px) }` that forced full-
     viewport rails on every page; this in turn made .shell as tall
     as the rail and pushed the footer below short main content with
     a visible void. height:auto + max-height keeps the rail natural-
     sized; the workspace footer just sits below the nav rather than
     pinned to a fixed-height bottom. */
  height:auto!important;
  max-height:calc(100vh - 58px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-self:start!important; }
/* only the nav list scrolls */
body:not(:has(.spaceframe)) .shell > .side > .side-scroll{
  flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; }
/* the switcher footer is pinned to the bottom, never scrolls away */
body:not(:has(.spaceframe)) .shell > .side > .ws-foot,
body:not(:has(.spaceframe)) .shell > .side > .sfoot{
  flex:0 0 auto!important;
  margin-top:auto!important;
  position:sticky!important;
  bottom:0!important;
  background:var(--surface-3)!important;
  -webkit-backdrop-filter:saturate(1.3) blur(14px)!important;
  backdrop-filter:saturate(1.3) blur(14px)!important;
  border-top:1px solid var(--line)!important;
  z-index:2!important; }
} /* end @media (min-width:981px) desktop-only sidebar block */

/* ============================================================
   E4 - COMPREHENSIVE MOBILE (<= 760px) for every app proto page.
   Genuine mobile layout, not merely no-overflow: the sidebar goes
   off-canvas (it is hidden < 760 already via the skill-detail rule;
   here we make that uniform for ALL app pages + give a real top
   account/nav fit), content goes single-column, dense panels and
   tables reflow to readable stacked blocks, controls are >= 40px.
   ============================================================ */
@media (max-width:760px){
  /* sidebar repositioned off-canvas by the @media(max-width:980) drawer
     block above; here we MUST NOT re-hide it via display:none because that
     wipes the drawer panel (zero width / zero height) when the burger opens
     it. Override the desktop-only `display:flex !important` rule (lines
     741-749) without killing layout by re-asserting `display:flex` -- the
     drawer's `transform:translateX(-101%)` is what hides the rail until
     body.flm-drawer-open flips it back. */
  body:not(:has(.spaceframe)) .shell > .side{ display:flex!important; }
  /* the grid shell collapses to one readable column */
  body:not(:has(.spaceframe)) .shell{
    display:block!important; grid-template-columns:1fr!important; }
  body:not(:has(.spaceframe)) .shell > .wrap,
  body:not(:has(.spaceframe)) .shell > .main,
  body:not(:has(.spaceframe)) main.main,
  body:not(:has(.spaceframe)) .lay{
    width:100%!important; min-width:0!important; max-width:100%!important;
    box-sizing:border-box!important; overflow-x:hidden!important; }
  /* app header fits: brand left, account + toggle right, nothing
     centred, comfortable tap heights, no overlap */
  body:not(:has(.spaceframe)) .topbar,
  body:not(:has(.spaceframe)) .nav{
    padding-left:16px!important; padding-right:14px!important;
    gap:8px!important; }
  body:not(:has(.spaceframe)) .topbar .me-btn,
  body:not(:has(.spaceframe)) .nav .me-btn{ min-height:40px!important; }
  body:not(:has(.spaceframe)) .topbar .me-btn .nm,
  body:not(:has(.spaceframe)) .nav .me-btn .nm{
    max-width:84px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
  /* the account dropdown menu must not overflow the small viewport */
  body:not(:has(.spaceframe)) .menu.to-right{
    right:0!important; left:auto!important;
    max-width:calc(100vw - 24px)!important; }
  /* single-column cards / grids everywhere */
  body:not(:has(.spaceframe)) .grid,
  body:not(:has(.spaceframe)) [class*="grid"],
  body:not(:has(.spaceframe)) .cols,
  body:not(:has(.spaceframe)) .body,
  body:not(:has(.spaceframe)) .panels-col,
  body:not(:has(.spaceframe)) .rail{
    grid-template-columns:1fr!important; display:grid!important;
    gap:14px!important; }
  /* dense data tables -> stacked readable blocks (workspace-settings
     folders/policies, skill-detail file/version tables, approvals).
     Rows become cards; header rows collapse out of the way. */
  body:not(:has(.spaceframe)) table,
  body:not(:has(.spaceframe)) thead,
  body:not(:has(.spaceframe)) tbody,
  body:not(:has(.spaceframe)) tr,
  body:not(:has(.spaceframe)) th,
  body:not(:has(.spaceframe)) td{
    display:block!important; width:auto!important;
    box-sizing:border-box!important; }
  body:not(:has(.spaceframe)) thead tr{
    position:absolute!important; left:-9999px!important; }
  body:not(:has(.spaceframe)) tr{
    border:1px solid var(--line)!important;
    border-radius:var(--r-md)!important;
    padding:10px 12px!important; margin-bottom:10px!important;
    background:var(--surface-3)!important; }
  body:not(:has(.spaceframe)) td{
    padding:5px 0!important; border:0!important;
    display:flex!important; justify-content:space-between!important;
    gap:14px!important; text-align:right!important; }
  body:not(:has(.spaceframe)) td[data-l]::before{
    content:attr(data-l); color:var(--ink-mute);
    font-weight:560; text-align:left; flex:none; }
  /* filters / tab strips / chip rows wrap instead of clipping */
  body:not(:has(.spaceframe)) .filt,
  body:not(:has(.spaceframe)) [class*="filt"],
  body:not(:has(.spaceframe)) .tabs,
  body:not(:has(.spaceframe)) .chips,
  body:not(:has(.spaceframe)) .seg{
    flex-wrap:wrap!important; overflow-x:visible!important; }
  /* comfortable touch targets across the app surface (incl. form
     controls: proto inputs were a cramped 35-36px on settings) */
  body:not(:has(.spaceframe)) .btn,
  body:not(:has(.spaceframe)) .btn-sm,
  body:not(:has(.spaceframe)) .si,
  body:not(:has(.spaceframe)) .tab,
  body:not(:has(.spaceframe)) [role="tab"],
  body:not(:has(.spaceframe)) .chip,
  body:not(:has(.spaceframe)) .seg > *,
  body:not(:has(.spaceframe)) input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  body:not(:has(.spaceframe)) select,
  body:not(:has(.spaceframe)) textarea,
  body:not(:has(.spaceframe)) .db{
    min-height:40px!important; }
  /* readable type rhythm on small screens */
  body:not(:has(.spaceframe)) h1{ font-size:24px!important; line-height:1.18!important; }
  body:not(:has(.spaceframe)) h2{ font-size:19px!important; }
}

/* ============================================================
   PHASE 1 - COMPREHENSIVE SHARED MOBILE SHELL ( <= 640px )
   The E4 block above (<=760) collapses the .shell/.side app pages.
   This canonical 640 layer is the coherent app-wide shell pass the
   diagnosis asked for: it covers EVERY built page's common chrome
   (nav, every layout container, page padding, ambient space frame,
   type scale, every row/table/grid/chip pattern, the auth-card
   pages that have no .side at all). Loaded last, additive, scoped;
   nothing here is a bare global selector. Reversible: removing this
   block restores the prior cascade exactly.
   ============================================================ */
@media (max-width:640px){
  /* ---- 1.3  page container side padding: comfortable 16-18px,
        never the desktop 24-52px. Covers every top-level container
        across the proto taxonomy (.page/.wrap/.lay/.shell/.main/
        .mn/.ds/.ob/.signin/.c/.e/.s). Scoped to non-landing. ---- */
  body:not(:has(.spaceframe)) .page,
  body:not(:has(.spaceframe)) .wrap,
  body:not(:has(.spaceframe)) .lay,
  body:not(:has(.spaceframe)) main.main,
  body:not(:has(.spaceframe)) .shell > .main,
  body:not(:has(.spaceframe)) .mn,
  body:not(:has(.spaceframe)) main.ds,
  body:not(:has(.spaceframe)) main.ob,
  body:not(:has(.spaceframe)) main.signin,
  body:not(:has(.spaceframe)) main.c,
  body:not(:has(.spaceframe)) main.e,
  body:not(:has(.spaceframe)) main.s{
    padding-left:16px!important; padding-right:16px!important;
    max-width:100%!important; box-sizing:border-box!important; }
  /* keep generous vertical breathing but trim the huge desktop tops */
  body:not(:has(.spaceframe)) .page,
  body:not(:has(.spaceframe)) .wrap,
  body:not(:has(.spaceframe)) .lay{
    padding-top:28px!important; padding-bottom:64px!important; }

  /* ---- 1.2  collapse EVERY multi-column layout container to one
        full-width column (not only .shell which E4 handles). The
        proto media also does most of this at 820-980; this is the
        coherent safety net so nothing stays 2-col at 390 and there
        is never a dead/blank grid gutter. ---- */
  body:not(:has(.spaceframe)) .shell,
  body:not(:has(.spaceframe)) .lay,
  body:not(:has(.spaceframe)) .wrap > .body,
  body:not(:has(.spaceframe)) .wrap .body{
    grid-template-columns:1fr!important; display:block!important;
    width:100%!important; max-width:100%!important;
    box-sizing:border-box!important; }
  /* multi-col content blocks -> one column. .hero/.feat stay grid so
     the proto's deliberate collapsed mobile arrangement (e.g.
     owner-profile .hero 72px 1fr) is preserved; we only guarantee
     they are never wider than 1 effective column + never overflow. */
  body:not(:has(.spaceframe)) .lay,
  body:not(:has(.spaceframe)) .feat{
    grid-template-columns:1fr!important;
    display:grid!important; gap:18px!important;
    width:100%!important; max-width:100%!important;
    box-sizing:border-box!important; }
  body:not(:has(.spaceframe)) .hero{
    max-width:100%!important; box-sizing:border-box!important; }

  /* ---- 1.1  app nav fits 390: brand left, controls cluster right,
        no wrap to a 2nd line, nothing centred, >=40px taps. (E4 set
        padding; this guarantees the no-overflow contract at 640 and
        condenses long secondary links.) ---- */
  body:not(:has(.spaceframe)) .topbar,
  body:not(:has(.spaceframe)) .nav{
    padding-left:14px!important; padding-right:12px!important;
    gap:6px!important; overflow:visible!important;
    max-width:100vw!important; box-sizing:border-box!important; }
  body:not(:has(.spaceframe)) .topbar > .brand,
  body:not(:has(.spaceframe)) .nav > .brand{
    font-size:14px!important; min-width:0!important; }
  /* secondary text links in the nav condense so brand + account +
     theme pill never push past the viewport edge */
  body:not(:has(.spaceframe)) .topbar .nav-right a:not(.btn),
  body:not(:has(.spaceframe)) .nav .nav-right a:not(.btn){
    padding-left:8px!important; padding-right:8px!important;
    font-size:12.5px!important; }
  body:not(:has(.spaceframe)) .topbar .nav-right,
  body:not(:has(.spaceframe)) .nav .nav-right{
    gap:2px!important; flex-wrap:nowrap!important; min-width:0!important; }
  /* the account name can ellipsis instead of forcing overflow */
  body:not(:has(.spaceframe)) .me-btn .nm{
    max-width:72px!important; overflow:hidden!important;
    text-overflow:ellipsis!important; white-space:nowrap!important; }

  /* ---- 1.4  ambient space frame must never cause horizontal
        overflow nor sit unusably over content at 390. The .spacebg
        clouds already inset via the @680 block; reinforce the
        non-landing .spaceframe guard (defensive: only landing gets
        brackets, but if any future page does, keep it inset and
        non-interactive). ---- */
  .spaceframe{ left:12px!important; right:12px!important;
    top:14px!important; bottom:12px!important;
    pointer-events:none!important; }
  .spacebg{ overflow:hidden!important; }
  .spacebg .c{ max-width:96vw!important; }

  /* ---- 1.5  type scale: every oversized desktop heading/hero scales
        to a mobile-appropriate size; nothing overflows its box. Covers
        the auth/centred pages (login/cli-login/404/onboarding) that
        are NOT under the E4 :not(.spaceframe) h1 rule because E4 only
        sized h1/h2 -> here we also catch the page-specific hero
        classes the proto uses with 26-42px sizes. ---- */
  body:not(:has(.spaceframe)) h1,
  body:not(:has(.spaceframe)) .display,
  body:not(:has(.spaceframe)) .ob-card h1,
  body:not(:has(.spaceframe)) .signin-card h1,
  body:not(:has(.spaceframe)) .e h1,
  body:not(:has(.spaceframe)) .e .big,
  body:not(:has(.spaceframe)) .ds-hero h1,
  body:not(:has(.spaceframe)) .hero h1{
    font-size:23px!important; line-height:1.18!important;
    letter-spacing:-.02em!important; word-break:break-word!important; }
  body:not(:has(.spaceframe)) h2{ font-size:18px!important; }
  body:not(:has(.spaceframe)) h3{ font-size:16px!important; }
  /* anything wide-set must not exceed its container */
  body:not(:has(.spaceframe)) p,
  body:not(:has(.spaceframe)) .sub,
  body:not(:has(.spaceframe)) .bio{ max-width:100%!important; }

  /* ---- 1.6  every wide row / key-value pattern stays within 390.
        E4 reflows real <table>; many proto "tables" are flex/grid
        rows (.fr field rows, .vr version rows, member/activity/
        approval rows). Make label/value rows stack at 390. ---- */
  body:not(:has(.spaceframe)) .fr{
    grid-template-columns:1fr!important; gap:6px!important;
    align-items:start!important; }
  body:not(:has(.spaceframe)) .vr{
    flex-wrap:wrap!important; gap:6px 10px!important; }
  /* any inline 2-col key/value style attr the proto hardcodes */
  body:not(:has(.spaceframe)) [style*="grid-template-columns"]{
    grid-template-columns:1fr!important; }
  /* generic wide flex rows: allow wrap so nothing clips off-screen */
  body:not(:has(.spaceframe)) .row,
  body:not(:has(.spaceframe)) .head,
  body:not(:has(.spaceframe)) .inv,
  body:not(:has(.spaceframe)) .da,
  body:not(:has(.spaceframe)) .acts,
  body:not(:has(.spaceframe)) .acts2{
    flex-wrap:wrap!important; }

  /* ---- 1.7  filter chip rows / segmented toggles / button groups
        wrap and keep >=40px taps (E4 set min-height; ensure the
        containers actually wrap rather than scroll/clip). ---- */
  body:not(:has(.spaceframe)) .filt,
  body:not(:has(.spaceframe)) [class*="filt"],
  body:not(:has(.spaceframe)) .chips,
  body:not(:has(.spaceframe)) .tabs,
  body:not(:has(.spaceframe)) .seg,
  body:not(:has(.spaceframe)) .roleseg,
  body:not(:has(.spaceframe)) .roleband,
  body:not(:has(.spaceframe)) .ctas-row{
    flex-wrap:wrap!important; overflow-x:visible!important;
    max-width:100%!important; }

  /* ---- 1.8  hard stop on horizontal page overflow: any code/pre or
        pre-formatted block scrolls WITHIN its card, never the page.
        (Proto sets overflow-x:auto on some; make it universal at
        mobile so a long token/URL can't widen the document.) ---- */
  body:not(:has(.spaceframe)) pre,
  body:not(:has(.spaceframe)) code,
  body:not(:has(.spaceframe)) .cb,
  body:not(:has(.spaceframe)) .code,
  body:not(:has(.spaceframe)) [class*="code"]{
    max-width:100%!important; box-sizing:border-box!important;
    overflow-x:auto!important; white-space:pre!important;
    word-break:normal!important; }
  /* the document must never scroll sideways. NOTE: deliberately NOT
     `overflow-x:hidden` on html/body -- that disables the sticky nav
     (position:sticky needs body to stay the scroll root). Instead the
     established E4 pattern is used: clip on the layout CHILDREN (every
     top-level container is already max-width:100% + box-sizing above)
     so no child can widen the document while the nav stays sticky. */
  body:not(:has(.spaceframe)) > *:not(.topbar):not(.nav):not(.spacebg):not(.spaceframe):not(#flmPrev):not(#flmFrameOv){
    max-width:100vw!important; overflow-x:clip!important; }
}

/* -- 1.x  tighter pass for very narrow / cramped cases only -- */
@media (max-width:480px){
  /* auth + onboarding cards: trim the wide desktop card padding so
     the content is not crushed against the rounded edge at 390 */
  body:not(:has(.spaceframe)) .ob-card,
  body:not(:has(.spaceframe)) .signin-card,
  body:not(:has(.spaceframe)) .auth .card,
  body:not(:has(.spaceframe)) main .card{
    padding-left:22px!important; padding-right:22px!important; }
  /* drop the desktop two-up button rows fully to a stack */
  body:not(:has(.spaceframe)) .ctas-row,
  body:not(:has(.spaceframe)) .acts2,
  body:not(:has(.spaceframe)) .sh-ax{
    flex-direction:column!important; }
  body:not(:has(.spaceframe)) .ctas-row > *,
  body:not(:has(.spaceframe)) .acts2 > *{ width:100%!important; }
  /* nav: hide a long secondary text link if both a text link AND a
     primary button are present, so the cluster never overruns 390
     (the button + account + theme pill are the priority controls) */
  body:not(:has(.spaceframe)) .nav-right:has(a.btn) a:not(.btn):not(.ghost-icon){
    display:none!important; }
}