/* ==========================================================================
   MINIMAL GLASS. Loaded last. The same ombre and glass, with an editorial type scale (Inter Display titles, Geist
   interface, Geist Mono for subtitles, reading text, chat and nav labels), crisper shapes, one solid control
   colour, quieter structure and a single motion language. Colours and curves come from :root in index.html.
   ========================================================================== */

/* ---- Type ---- */
body{font-size:14.5px;line-height:1.55;font-variant-numeric:tabular-nums}
h1,h2,h3{font-weight:600;letter-spacing:-.015em;text-wrap:balance}
p,.note,.card p,.glist-row small{text-wrap:pretty}
/* Titles in Inter Display (opsz 32): big, regular weight, tight. */
.screen>.title h2,.panel>h2,.setup-head h2,.pitch-slide b{font-family:var(--display);font-variation-settings:"opsz" 32;font-weight:400;letter-spacing:-.02em;line-height:1.05}
.screen>.title h2{font-size:34px}
#homeTitle{font-size:38px}
.panel>h2{font-size:28px}
.setup-head h2{font-size:32px}
.pitch-slide b{font-size:34px}
/* Numbers that matter read as figures on a page, not as bold UI text. */
.metric{font-family:var(--font);font-weight:400;letter-spacing:-.01em}
#homeKpis>.card .metric{font-size:40px;font-weight:400;line-height:1}
/* Eyebrows are small metadata, not a banner. */
.k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--eyebrow)}
/* The nav labels are in Geist Mono. */
.tab{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0}
.btn,.side-item,.seg-tab,.role-chip{font-weight:500}
.btn.primary,.btn.hot{font-weight:600}

/* ---- Shape: controls are crisp, containers are soft, chips stay round. ---- */
.btn{border-radius:var(--r-btn);box-shadow:none}
.btn.block,.btn.block:not(.primary):not(.hot){border-radius:var(--r-btn)}
span.btn,.btn.icon-btn{border-radius:var(--r-pill)}
.field,.login-form .field,.setup-add .btn{border-radius:var(--r-btn)}
.toast{border-radius:var(--r-inner)}
.card[aria-pressed=true]{border-color:rgba(255,255,255,.55);background:var(--fill-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}

/* ---- Grain: a still layer of fine noise over the ombre, under everything else, so the backdrop reads as a
   surface rather than a flat render. ---- */
html::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Motion. Presses answer at once on a strong ease-out; hover lives only where there is a pointer. ---- */
/* Only the press moves; colours change at once, so a state (a listening mic, a picked chip) never shows half-way.
   :where() keeps this a default: a control's own transition (a like or follow easing in) always wins. */
:where(.btn,button.card,.tab,.seg-tab,button.glist-row,.side-item,.profile-btn,.hub-chip){transition:transform .16s var(--ease-out),opacity .12s ease}
:is(.btn,button.card,.tab,.seg-tab,.profile-btn,.hub-chip):active:not(:disabled):not([aria-disabled="true"]){transform:scale(.97)}
/* Wide rows move less, or the press reads as a wobble. */
:is(button.glist-row,.side-item):active:not(:disabled){transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  /* Hover lays a faint light over whatever the control's own colour is, so it never hides a state. */
  :is(.btn:not(.primary):not(.hot),.role-chip,.seg-tab,.side-item,button.glist-row,button.card):not(:disabled):not(:active):hover{box-shadow:inset 0 0 0 100px rgba(255,255,255,.06)}
  .btn.primary:not(:disabled):hover{background:var(--primary-hover)}
  .tab:not(.active):not(:disabled):not([aria-disabled="true"]):hover{opacity:.8}
}
/* A screen settles in as it opens: its top blocks rise 6px and fade, a beat apart. Short, because tabs are
   switched many times a day. The Live stage and sign in keep their own motion. */
.screen.active:not(#liveScreen):not(#loginScreen):not(#orgSetupScreen)>:is(.title,.panel,.glist,.card,.seg,.home-head,.list,.cards,.toolbar,.wizard-card,.row2){animation:mg-in .28s var(--ease-out) backwards}
.screen.active>:nth-child(2){animation-delay:30ms}
.screen.active>:nth-child(3){animation-delay:60ms}
.screen.active>:nth-child(4){animation-delay:90ms}
.screen.active>:nth-child(n+5){animation-delay:120ms}
@keyframes mg-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){
  .screen.active>*{animation:mg-fade .2s ease backwards!important}
  :is(.btn,button.card,.tab,.seg-tab,button.glist-row,.side-item,.profile-btn,.hub-chip):active{transform:none}
}
@keyframes mg-fade{from{opacity:0}}