/* Anon Studio shared styles: anon.inc's dark theme (the hero ground, warm rims, Space Mono labels, one orange).
   Every studio page (gallery, components, editor, connect) links this and shell.js (the top bar), then adds its own layout.

   Where the values come from. They are copied, never imported: the studio must work without ../kit checked out.
   - anon.inc, the home hero in its dark theme: frontend/home/src/app/(marketing)/_components/home-v2/MoneyHero.module.css
     (--hero-background #090504, --hero-flame #fd6131, --hero-flame-bright #ff8e6b, text #f6f0e3); the warm rims and the
     product-capture frame (#28221f, #2a201d) are the site's too.
   - @anon/shared, through the kit preset it builds on (frontend/kit/tailwind.config.js): primary / coral-800 #FD6131,
     Space Mono as the mono and header face (fontFamily.mono, .header), the status colours (anon.success / warning / error;
     the 400 steps, which read on a dark ground), and the dark surfaces (surface #100401, surface-2 #1a0d09) from
     frontend/kit/packages/shared/.storybook/theme-tokens.css, the extension's .dark block.
   - Buttons follow the kit's Button (frontend/kit/packages/shared/src/components/ui/Button.tsx): Space Mono, uppercase,
     one solid primary, and a focus ring in the primary colour.
   - Icons are the kit's small icons (frontend/kit/packages/icons/icons/sm), already in library/icons.json; shell.js draws them. */
@font-face{font-family:AnonDisplay;src:url(/library/fonts/AnonDisplay.ttf);font-display:swap}
@font-face{font-family:AnonBody;src:url(/library/fonts/AnonBody.ttf);font-display:swap}
@font-face{font-family:AnonMono;src:url(/library/fonts/AnonMono.ttf);font-display:swap}
@font-face{font-family:SpaceMono;src:url(/library/fonts/SpaceMono-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:SpaceMono;src:url(/library/fonts/SpaceMono-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:AnonSymbols;src:url(/library/fonts/DejaVuSans.ttf);font-display:swap}
@font-face{font-family:GeistMono;src:url(/library/fonts/GeistMono-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:GeistMono;src:url(/library/fonts/GeistMono-SemiBold.ttf);font-weight:600;font-display:swap}
@font-face{font-family:GeistMono;src:url(/library/fonts/GeistMono-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:GeistPixel;src:url(/library/fonts/GeistPixel-Regular.ttf);font-display:swap}
@font-face{font-family:AnonCondensed;src:url(/library/fonts/AnonCondensed.ttf);font-weight:900;font-display:swap}
:root{color-scheme:dark;
  /* ground and surfaces */
  --bg:#090504;--surface:#100401;--raise:#1a0d09;--rim:#2a201d;--frame:#28221f;--frame-edge:rgba(246,240,227,.12);
  --line:rgba(246,240,227,.1);--line-strong:rgba(246,240,227,.2);
  /* text */
  --text:#f6f0e3;--body:#d1ccc2;--muted:#aaa69f;
  /* one orange, and the status colours */
  --accent:#fd6131;--accent-2:#ff8e6b;--accent-wash:rgba(253,97,49,.1);--on-accent:#090504;
  --good:#34d399;--warn:#fbbf24;--bad:#f87171;
  /* type: Archivo (AnonDisplay / AnonBody) for words, JetBrains Mono (AnonMono) for data, Space Mono for labels */
  --display:AnonDisplay,sans-serif;--sans:AnonBody,system-ui,sans-serif;--mono:AnonMono,ui-monospace,monospace;
  --label:400 11px/1.5 SpaceMono,AnonMono,monospace;--data:500 12px/1.5 AnonMono,ui-monospace,monospace;
  --r:4px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.55 var(--sans)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:rgba(253,97,49,.35)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.label{font:var(--label);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.label.hot{color:var(--accent)}

/* top bar: brand, nav, then the page's tools on the right. shell.js renders the brand, the nav and the live dot. */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;padding:0 max(16px,3vw);min-height:60px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;flex:none;font:800 17px var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand svg{width:22px;height:22px;color:var(--accent)}
.brand i{font-style:normal;color:var(--accent)}
nav{display:flex;gap:4px}
nav a{font:var(--label);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:var(--r);white-space:nowrap}
nav a:hover{color:var(--text)}
nav a[aria-current=page]{color:var(--text);background:var(--raise)}
.tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.live{font:var(--label);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.live::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--muted)}
.live.on::before{background:var(--good);box-shadow:0 0 0 4px rgba(52,211,153,.14)}

/* buttons: .pill (outlined; .solid is the one primary action), .seg (a segmented choice), .chip (a filter).
   Icons sit in an <i data-icon="name"> that shell.js fills; the box keeps its size so nothing jumps when they arrive. */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);font:var(--label);letter-spacing:.04em;text-transform:uppercase;color:var(--body);white-space:nowrap;text-decoration:none}
.pill:hover{border-color:var(--accent);color:var(--text)}
.pill[aria-pressed=true]{border-color:var(--accent);color:var(--text);background:var(--accent-wash)}
.pill.sm{height:28px;padding:0 10px;gap:6px}
.pill.solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pill.solid:hover{background:var(--accent-2);border-color:var(--accent-2)}
.pill:disabled,.pill.solid:disabled{opacity:.4;cursor:default;border-color:var(--line-strong);color:var(--body);background:none}
.pill svg,.pill [data-icon]{width:16px;height:16px;flex:none}
[data-icon]{display:inline-block;font-style:normal;line-height:0}
[data-icon] svg{width:100%;height:100%}
/* a select that looks like a pill; the chevron is the kit's keyboard_arrow_down (icons/sm), in --muted */
select.pill{appearance:none;cursor:pointer;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23aaa69f' d='M10 13.4394L4.62317 8.0625L6.06254 6.62312L10 10.5606L13.9375 6.62312L15.3769 8.0625L10 13.4394Z'/%3E%3C/svg%3E") no-repeat right 8px center/16px;padding-right:30px;font:var(--data);text-transform:none;letter-spacing:0;max-width:100%;text-overflow:ellipsis}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.seg button{height:32px;padding:0 10px;font:var(--label);letter-spacing:.04em;color:var(--body)}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button:hover:not(:disabled,[aria-pressed=true]){color:var(--text);background:var(--raise)}
.seg button[aria-pressed=true]{background:var(--text);color:var(--bg)}
.seg button:disabled{opacity:.35;cursor:default}
.seg button:focus-visible{outline-offset:-3px}   /* inside, so the rounded box doesn't clip it */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:99px;font:var(--label);letter-spacing:.04em;text-transform:uppercase;color:var(--body);background:rgba(9,5,4,.6)}
.chip:hover{border-color:var(--accent)}
.chip b{font-weight:400;color:var(--muted);margin-left:6px}
.chip[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip[aria-pressed=true] b{color:var(--bg);opacity:.6}
.sep{flex:none;width:1px;height:22px;background:var(--line-strong)}

/* phones: the nav drops to its own row (scrolls sideways if it must), the live dot loses its word */
@media (max-width:700px){
  .top{flex-wrap:wrap;gap:6px 10px;padding-top:10px;padding-bottom:4px}
  .top nav{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;margin:0 -10px}
  .live{font-size:0;gap:0}
}
@media (max-width:420px){.brand span{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}