/* ============================================================================
herd.css — the ONE herdtest design system
----------------------------------------------------------------------------
Extracted + formalized from the marketing homepage (index.ejs #hd-root) and
unified with the app shell (header.ejs). This single file is meant to replace
BOTH divergent inline systems so the marketing site and the logged-in app
share one language: same tokens, same components, same personality.
Load order in a real page:
Fonts (add to ):
Schibsted Grotesk (400–800) + Space Mono (400,700) via Google Fonts.
========================================================================== */
/* ---------- TOKENS ---------- */
:root{
/* color — graphite-pine base with a chartreuse highlight (the homepage system) */
--bg:#f3f4ee; /* warm off-white page */
--surface:#ffffff; /* cards, nav, inputs */
--surface-2:#eef0e8; /* subtly raised inner panels */
--ink:#16221b; /* near-black pine text */
--soft:#525c53; /* secondary / muted text */
--faint:#8b9389; /* tertiary text, placeholders */
--line:#d8dad0; /* hairline borders */
--line-2:#e6e8df; /* even fainter dividers */
--accent:#12241c; /* pine — primary actions, links, focus */
--accent-press:#0b1812;
--accent-ink:#f3f4ee; /* text on accent */
--accent-wash:#e7edd7; /* pale chartreuse-green tint */
--accent2:#4c7a5c; /* moss — secondary accent (badges, live text) */
--chart:#e9fc6d; /* chartreuse — highlight background */
--chart-ink:#12241c; /* text on chartreuse */
--hot:#d8492f; /* red — notification badge, popular */
--good:#3e7a52; /* success / accepted */
--warn:#8a6a1f; /* pending / draft */
--danger:#b23a2c; /* destructive / declined */
--tint:#eef0e8; /* chip + tag fills */
--dot:#d8dad0; /* dotgrid texture */
/* shape */
--radius:12px; /* base */
--radius-card:14px; /* cards */
--radius-btn:8px; /* rounded-rect buttons (homepage signature) */
--radius-chip:6px; /* tags / badges */
--radius-pill:999px;
/* elevation — ONE shadow scale */
--shadow-sm:0 1px 2px rgba(17,19,26,.04);
--shadow:0 1px 2px rgba(17,19,26,.04), 0 10px 28px -8px rgba(17,19,26,.10);
--shadow-lg:0 2px 4px rgba(17,19,26,.06), 0 24px 60px -16px rgba(17,19,26,.22);
/* rhythm */
--frame:1320px; /* marketing width */
--frame-app:1100px; /* app width (denser) */
--pad-x:32px;
--gap:20px;
/* type */
--font:'Schibsted Grotesk',-apple-system,system-ui,sans-serif;
--head:'Archivo',var(--font); /* display / headings / brand */
--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}
/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box;}
html,body{margin:0;}
body{
background:var(--bg);color:var(--ink);
font-family:var(--font);font-size:15px;line-height:1.5;
-webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--accent-ink);}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.mono{font-family:var(--mono);}
.muted{color:var(--soft);}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
/* ---------- LAYOUT ---------- */
.frame{max-width:var(--frame);margin:0 auto;padding:0 var(--pad-x);}
.frame-app{max-width:var(--frame-app);margin:0 auto;padding:0 24px;}
.section{padding:84px 0;}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.wrap{flex-wrap:wrap;}
.grow{flex:1;}
/* ---------- TYPE SCALE ---------- */
h1{font-family:var(--head);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 6px;}
h2{font-family:var(--head);font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0;}
h3{font-family:var(--head);font-size:17px;font-weight:700;line-height:1.3;margin:0;}
.display{font-family:var(--head);font-size:54px;font-weight:700;letter-spacing:-.03em;line-height:1.05;}
.eyebrow{font-family:var(--mono);color:var(--accent);font-size:12px;letter-spacing:.08em;
text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;}
.subhead{color:var(--soft);font-size:17px;line-height:1.5;}
.lede{color:var(--soft);font-size:15px;line-height:1.55;}
/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--surface);
border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);}
.nav-inner{display:flex;align-items:center;gap:24px;padding:14px var(--pad-x);
max-width:var(--frame);margin:0 auto;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:21px;
letter-spacing:-.03em;color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand .t{color:var(--accent2);}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:14px;}
.nav-link{color:var(--ink);font-size:15px;}
.nav-link:hover{color:var(--accent);text-decoration:none;}
.nav-link.active{color:var(--accent);font-weight:600;}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px;}
/* ---------- BUTTONS — two components + a size token ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
border-radius:var(--radius-btn);font-weight:700;font-size:15px;line-height:1;
padding:12px 22px;border:1px solid transparent;cursor:pointer;text-decoration:none;
transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
font-family:var(--font);}
.btn:hover{transform:translateY(-1px);text-decoration:none;}
.btn:active{transform:translateY(0);}
.btn-sm{padding:8px 16px;font-size:13.5px;}
.btn-lg{padding:15px 28px;font-size:16px;}
.btn-block{width:100%;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-press);color:#fff;}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line);}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}
.btn-ghost{background:transparent;color:var(--soft);}
.btn-ghost:hover{color:var(--accent);background:var(--tint);}
.btn-danger{background:var(--surface);color:var(--danger);border-color:var(--line);}
.btn-danger:hover{border-color:var(--danger);}
.btn-on-accent{background:#fff;color:var(--accent);}
.btn-on-accent-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-on-accent-ghost:hover{background:rgba(255,255,255,.12);}
/* ---------- CARDS ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
box-shadow:var(--shadow);padding:24px;}
.card-tint{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-card);
box-shadow:var(--shadow);padding:24px;}
.card-flat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.card-pad-sm{padding:18px 20px;}
/* ---------- GIG CARD (the marketplace unit) ---------- */
.gig{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:14px;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;color:inherit;}
.gig:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent);text-decoration:none;}
.gig--featured{border:1.5px solid var(--accent);}
.gig__thumb{height:128px;border-radius:var(--radius);overflow:hidden;position:relative;
margin:-22px -22px 2px;border-bottom:1px solid var(--line);
border-top-left-radius:var(--radius-card);border-top-right-radius:var(--radius-card);}
.gig__byline{display:flex;align-items:center;gap:10px;}
.gig__title{font-size:17px;font-weight:700;margin:0;line-height:1.3;color:var(--ink);}
.gig__desc{margin:0;font-size:13.5px;color:var(--soft);line-height:1.45;}
.gig__tags{display:flex;flex-wrap:wrap;gap:6px;}
.gig__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px;}
/* faux product-UI thumbnail (placeholder until real R2 screenshots exist) */
.thumb-ui{position:absolute;inset:18px 18px -1px;background:var(--surface);border:1px solid var(--line);
border-bottom:none;border-top-left-radius:9px;border-top-right-radius:9px;overflow:hidden;
box-shadow:0 6px 18px -10px rgba(17,19,26,.28);}
.thumb-bar{height:22px;background:var(--tint);border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:5px;padding:0 9px;}
.thumb-dot{width:6px;height:6px;border-radius:50%;background:var(--line);}
.thumb-body{padding:11px 12px;display:flex;flex-direction:column;gap:7px;}
.thumb-line{height:7px;border-radius:4px;background:var(--tint);}
/* ---------- AVATAR ---------- */
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-weight:700;color:#fff;flex:none;}
.avatar-sm{width:34px;height:34px;font-size:12px;}
.avatar-md{width:40px;height:40px;font-size:13px;}
.avatar-lg{width:64px;height:64px;font-size:20px;}
.avatar-a{background:var(--accent);}
.avatar-a2{background:var(--accent2);}
.avatar-ink{background:var(--ink);}
/* ---------- TAGS / CHIPS / BADGES ---------- */
.tag{font-family:var(--font);font-size:11.5px;font-weight:600;background:var(--tint);color:var(--soft);
border-radius:var(--radius-chip);padding:4px 10px;line-height:1.4;display:inline-flex;gap:4px;align-items:center;}
.tag--accent{background:var(--accent);color:var(--accent-ink);}
.chip{font-family:var(--mono);font-size:13px;border:1px solid var(--line);background:var(--surface);
color:var(--soft);border-radius:var(--radius-pill);padding:8px 16px;min-height:38px;
display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
transition:border-color .15s,color .15s,background .15s;}
.chip:hover{border-color:var(--accent);color:var(--ink);}
.chip--active{background:var(--chart);color:var(--chart-ink);border-color:var(--chart);font-weight:700;}
.badge{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;border-radius:var(--radius-chip);padding:3px 8px;
display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;}
.badge--new{color:var(--accent2);background:color-mix(in oklch,var(--accent2) 14%,var(--surface));
border-color:color-mix(in oklch,var(--accent2) 40%,transparent);}
.badge--popular{color:var(--hot);background:color-mix(in srgb,var(--hot) 12%,var(--surface));
border-color:color-mix(in srgb,var(--hot) 35%,transparent);}
.badge--nda{color:var(--soft);background:var(--surface);border-color:var(--line);}
.badge--muted{color:var(--soft);background:var(--tint);border-color:var(--line);}
/* status pills for application/session lifecycle */
.status{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
border-radius:var(--radius-pill);padding:4px 11px;display:inline-flex;align-items:center;gap:6px;}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8;}
.status--open,.status--accepted,.status--completed{color:var(--good);background:color-mix(in oklch,var(--good) 12%,var(--surface));}
.status--applied,.status--draft{color:var(--warn);background:color-mix(in oklch,var(--warn) 14%,var(--surface));}
.status--invited{color:var(--accent);background:var(--accent-wash);}
.status--closed,.status--declined,.status--withdrawn{color:var(--soft);background:var(--tint);}
/* ---------- LIVE CTA (canonical hot action — e.g. Join a live session) ---------- */
/* --hot is reserved for LIVE. This is the ONE allowed hot *button*; use sparingly,
never more than one per view, and never next to a competing hot pill. */
.btn-live{background:var(--chart);color:var(--chart-ink);}
.btn-live:hover{background:var(--chart);filter:brightness(.95);color:var(--chart-ink);}
/* ---------- MUTED ROW (declined / inactive) — color, never opacity ---------- */
/* Dimming a row with opacity stacks on already-muted text and breaks AA contrast.
Use this instead: a calm background + AA-legible muted text, full-contrast on the
reason so the user can still act on it. */
.row-muted{background:var(--surface-2);}
.text-muted-aa{color:#4f584f;} /* green-grey, ~5:1 on white — passes AA for body */
/* ---------- TOGGLE CHIP (selectable on/off — devices, etc.) ---------- */
/* On-state must NOT be color-only: a check glyph carries the state non-visually too. */
.toggle{font-family:var(--font);font-size:12.5px;font-weight:600;background:var(--surface);
color:var(--soft);border:1px solid var(--line);border-radius:var(--radius-pill);
padding:7px 14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
transition:background .15s,color .15s,border-color .15s;}
.toggle:hover{border-color:var(--accent);color:var(--ink);}
.toggle[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.toggle[aria-pressed="true"]::before{content:"✓";font-weight:700;font-size:11px;}
/* ---------- RATING ---------- */
:root{--star:#e0a419;}
.stars{color:var(--star);}
.rating{display:inline-flex;align-items:center;gap:4px;font-size:13px;white-space:nowrap;}
.rating__star{color:var(--star);font-size:14px;line-height:1;}
.rating__num{font-weight:700;color:var(--ink);}
.rating__count{color:var(--faint);font-family:var(--mono);font-size:12px;}
.rating--none{color:var(--faint);font-size:12.5px;}
/* star input — CSS-only radio group (DOM order 5→1 + row-reverse so hovering /
checking a star fills it and everything to its left) */
.starpick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;border:none;padding:0;margin:0;gap:2px;}
.starpick input{position:absolute;width:1px;height:1px;opacity:0;}
.starpick label{font-size:28px;line-height:1;color:var(--line);cursor:pointer;transition:color .12s;}
.starpick label:hover,.starpick label:hover ~ label,.starpick input:checked ~ label{color:var(--star);}
.starpick input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
/* review form + a submitted review card */
.review-dd summary{cursor:pointer;}
.review-dd summary::-webkit-details-marker{display:none;}
.review-dd summary::marker{content:"";}
.reviewform{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.review{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);padding:14px 16px;}
.review__head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.review__stars{color:var(--star);letter-spacing:1px;}
.review__by{font-size:12.5px;color:var(--soft);font-family:var(--mono);}
.review__body{font-size:14px;color:var(--ink);line-height:1.5;margin:0;}
/* ---------- TOUCH TARGETS — small controls grow to 44px on touch devices ---------- */
@media (pointer:coarse){
.btn-sm,.chip,.toggle,.roleswitch__seg{min-height:44px;}
}
/* ---------- PRICE ---------- */
.price{font-family:var(--font);font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink);}
.price-lg{font-size:26px;}
.price-unit{color:var(--soft);font-size:13px;font-weight:400;}
/* ---------- LIVE INDICATORS ---------- */
.livedot{width:8px;height:8px;border-radius:50%;background:var(--accent2);display:inline-block;}
.livepill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;
font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--chart-ink);
background:var(--chart);border:1px solid var(--chart);border-radius:var(--radius-pill);padding:4px 10px;}
.livepill .d{width:7px;height:7px;border-radius:50%;background:var(--chart-ink);display:inline-block;}
/* ---------- FILTER BAR ---------- */
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* ---------- SKIP LINK (a11y) ---------- */
.skip-link{position:absolute;left:8px;top:-48px;z-index:1000;background:var(--accent);color:var(--accent-ink,#fff);
padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;transition:top .15s;}
.skip-link:focus{top:8px;outline:2px solid var(--chart,#e9fc6d);outline-offset:2px;text-decoration:none;}
/* ---------- FORMS ---------- */
label{display:block;font-size:14px;font-weight:600;margin:0 0 6px;color:var(--ink);}
.hint{color:var(--soft);font-size:12.5px;margin-top:5px;}
.field-error{color:var(--danger,#b23a2c);font-size:12.5px;font-weight:500;margin-top:6px;display:flex;align-items:flex-start;gap:5px;}
.field-error::before{content:"!";flex:none;width:15px;height:15px;border-radius:50%;background:var(--danger,#b23a2c);color:#fff;font-size:10px;font-weight:700;line-height:15px;text-align:center;}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--danger,#b23a2c);}
input[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{outline-color:color-mix(in oklch,var(--danger,#b23a2c) 45%,transparent);border-color:var(--danger,#b23a2c);}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
textarea,select{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--line);
border-radius:10px;background:var(--surface);color:var(--ink);}
/* 16px minimum keeps iOS Safari from auto-zooming the viewport on input focus. */
input:focus,textarea:focus,select:focus{outline:2px solid color-mix(in oklch,var(--accent) 45%,transparent);
outline-offset:1px;border-color:var(--accent);}
textarea{min-height:110px;resize:vertical;line-height:1.5;}
.field{margin-bottom:18px;}
.field-row{display:flex;gap:14px;flex-wrap:wrap;}
.field-row > .field{flex:1;min-width:140px;}
/* ---------- EMPTY STATE ---------- */
.empty{text-align:center;padding:56px 28px;border:1px dashed var(--line);border-radius:var(--radius-card);
background:var(--surface-2);}
.empty__art{margin:0 auto 18px;color:var(--accent2);opacity:.8;}
.empty__title{font-size:18px;font-weight:700;margin:0 0 6px;}
.empty__body{color:var(--soft);font-size:14.5px;max-width:380px;margin:0 auto 20px;line-height:1.5;}
/* ---------- FLASH / ALERTS ---------- */
.flash{display:flex;flex-direction:column;gap:8px;margin:16px 0 0;}
.flash .msg{padding:11px 16px;border-radius:10px;font-size:14.5px;border:1px solid var(--line);}
.flash .success{background:color-mix(in oklch,var(--accent2) 16%,#fff);
border-color:color-mix(in oklch,var(--accent2) 40%,var(--line));}
.flash .error{background:#fdecea;border-color:#f5c6c2;color:#a3231a;}
.errors{background:#fdecea;border:1px solid #f5c6c2;color:#a3231a;border-radius:10px;
padding:12px 16px;margin-bottom:18px;font-size:14px;}
.errors ul{margin:0;padding-left:18px;}
/* ---------- ROLE SWITCHER (nav: flip between Testing / Building) ---------- */
.nbell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
border-radius:50%;color:var(--muted,#6a7186);text-decoration:none;}
.nbell:hover{color:var(--ink);background:var(--tint);}
.nbell__badge{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
background:var(--hot);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;line-height:16px;text-align:center;}
.roleswitch{display:inline-flex;align-items:center;gap:2px;background:var(--tint);
border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px;}
.roleswitch__seg{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.03em;
color:var(--soft);border-radius:var(--radius-pill);padding:6px 14px;line-height:1;
display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;
transition:background .15s,color .15s,box-shadow .15s;}
.roleswitch__seg:hover{color:var(--ink);text-decoration:none;}
.roleswitch__seg--on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
.roleswitch__seg .ic{width:14px;height:14px;}
/* a not-yet-enabled side reads as an invitation, not a current mode */
.roleswitch__seg--add{color:var(--accent);}
.roleswitch__seg--add::before{content:"+";font-weight:700;}
/* per-side accent cue: builder pages stay blue; tester pages lean teal.
Set on a page wrapper: / data-side="builder">. */
[data-side="tester"]{--role:var(--accent2);}
[data-side="builder"]{--role:var(--accent);}
.role-eyebrow{color:var(--role);}
/* ---------- ACCOUNT MENU (avatar dropdown — pure , no JS) ---------- */
.acct{position:relative;}
.acct > summary{list-style:none;cursor:pointer;}
.acct > summary::-webkit-details-marker{display:none;}
.acct > summary::marker{content:"";}
.acct__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;z-index:50;
display:flex;flex-direction:column;gap:1px;}
.acct__name{font-size:13px;color:var(--soft);padding:8px 11px;border-bottom:1px solid var(--line-2);margin-bottom:4px;}
.acct__item{font-family:var(--font);font-size:13.5px;color:var(--ink);text-align:left;background:transparent;
border:none;border-radius:8px;padding:9px 11px;text-decoration:none;cursor:pointer;display:block;width:100%;}
.acct__item:hover{background:var(--tint);text-decoration:none;color:var(--ink);}
.acct__item--danger{color:var(--danger);}
.acct__menu form{margin:0;}
/* section links duplicated into the menu only appear where the top nav hides them */
/* Top-nav duplicates: hidden on desktop (they're already in the bar), shown on
mobile where the bar collapses. Account-management items (Settings, Company
profile, Admin) have NO --nav class, so they are ALWAYS visible in the menu. */
.acct__item--nav{display:none;}
@media (max-width:900px){ .acct__item--nav{display:block;} }
.acct__sep{height:1px;background:var(--line-2);margin:6px 0;}
/* ---------- STAT BAND (dashboard headers) ---------- */
.statband{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);
border-bottom:1px solid var(--line);}
.statband__cell{flex:1;min-width:140px;padding:18px 22px;}
.statband__cell + .statband__cell{border-left:1px solid var(--line);}
.statband__num{font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.statband__label{font-size:13px;color:var(--soft);margin-top:2px;}
/* ---------- DOTGRID TEXTURE ---------- */
.dotgrid{background-image:radial-gradient(var(--dot) 1px,transparent 1px);
background-size:24px 24px;background-position:-2px -2px;}
/* ---------- MOTION ---------- */
@keyframes livedot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.65);}}
.anim-livedot{animation:livedot 1.3s ease-in-out infinite;}
/* ---------- LOADING (spinner + skeleton shimmer) ---------- */
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;
border-radius:50%;vertical-align:-2px;margin-right:7px;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.skeleton{position:relative;overflow:hidden;background:var(--tint);border-radius:8px;}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,color-mix(in oklch,#fff 55%,transparent),transparent);
animation:shimmer 1.4s infinite;}
@keyframes shimmer{100%{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}
/* ---------- RESPONSIVE GRID HELPERS ---------- */
.grid{display:grid;gap:var(--gap);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr;}.nav-links{display:none;}}
@media (max-width:600px){.grid-3,.grid-2{grid-template-columns:1fr;}.display{font-size:38px;}}
/* ── Onboarding checklist (welcome page + dismissible dashboard card) ───────── */
.onb{border:1.5px solid color-mix(in oklch,var(--accent) 22%,var(--line));border-radius:var(--radius-card);
background:linear-gradient(180deg,var(--accent-wash),var(--surface));padding:22px 22px 18px;box-shadow:var(--shadow);}
.onb--compact{padding:16px 18px 12px;}
.onb__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px;}
.onb__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0;font-weight:700;}
.onb__h2{font-size:20px;margin:4px 0 0;letter-spacing:-.01em;}
.onb__progress{display:flex;align-items:center;gap:10px;}
.onb__count{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap;}
.onb__bar{width:96px;height:7px;border-radius:99px;background:color-mix(in oklch,var(--accent) 16%,var(--surface));overflow:hidden;}
.onb__bar-fill{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s ease;}
.onb__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.onb__step{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
border-radius:12px;padding:13px 15px;}
.onb__step--done{background:color-mix(in oklch,var(--good) 8%,var(--surface));border-color:color-mix(in oklch,var(--good) 30%,var(--line));}
.onb__check{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:13px;font-weight:700;background:color-mix(in oklch,var(--accent) 14%,var(--surface));
color:var(--accent);border:1px solid color-mix(in oklch,var(--accent) 30%,transparent);}
.onb__step--done .onb__check{background:var(--good);color:#fff;border-color:var(--good);}
.onb__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.onb__step-title{font-weight:700;font-size:14.5px;color:var(--ink);}
.onb__desc{font-size:13px;color:var(--soft);line-height:1.45;}
.onb__cta{flex:none;}
.onb__tag{flex:none;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--good);text-transform:uppercase;letter-spacing:.04em;}
.onb__dismiss{margin:12px 0 0;text-align:right;}
.onb__dismiss-btn{background:none;border:none;padding:2px 4px;font:inherit;font-size:12.5px;color:var(--soft);cursor:pointer;text-decoration:underline;}
.onb__dismiss-btn:hover{color:var(--ink);}
@media (max-width:520px){ .onb__step{flex-wrap:wrap;} .onb__cta,.onb__tag{margin-left:40px;} }
/* ============================================================================
UNIVERSAL SHELL — the homepage's marketing header + footer, used on every
page (only the standalone live room opts out). Introduced when the header/
footer were unified across the whole app. The older .nav/.nav-* rules above
are retained for any legacy reference but the shell now uses .sitehead/.sitefoot.
============================================================================ */
:root{ --sage:#9ab3a0; --pine:#12241c; --pine-2:#0b1812; --panel-ink:#eef1e7; }
/* buttons the marketing shell needs (pine + chartreuse) */
.btn-ink{background:var(--accent);color:var(--accent-ink);}
.btn-ink:hover{background:var(--accent-press);color:var(--accent-ink);}
.btn-chart{background:var(--chart);color:var(--chart-ink);}
.btn-chart:hover{background:var(--chart);filter:brightness(.96);color:var(--chart-ink);}
.btn-outline-ink{border-color:var(--line);color:var(--ink);background:var(--surface);}
.btn-outline-ink:hover{border-color:var(--accent);color:var(--accent);}
/* header */
.sitehead{position:sticky;top:0;z-index:40;background:color-mix(in oklch,var(--bg) 88%,transparent);
backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);
border-bottom:1px solid var(--line-2);}
.sitenav{display:flex;align-items:center;justify-content:space-between;gap:20px;
max-width:var(--frame);margin:0 auto;padding:16px 32px;}
.sitenav .brand{display:flex;align-items:baseline;gap:9px;color:var(--ink);}
.brand b{font-family:var(--head);font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--ink);}
.brand__tag{font-family:var(--mono);font-size:11px;color:var(--accent2);}
.sitenav__links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500;}
.sitenav__link{color:var(--soft);}
.sitenav__link:hover{color:var(--ink);text-decoration:none;}
.sitenav__link.is-active{color:var(--accent);font-weight:600;}
.sitenav__right{display:flex;align-items:center;gap:14px;}
@media (max-width:720px){
.sitenav{flex-wrap:wrap;gap:12px;padding:12px 18px;}
.sitenav__links{order:3;width:100%;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
}
/* footer — tall, dark, multi-column (matches the homepage) */
.sitefoot{background:var(--pine);color:var(--sage);margin-top:48px;padding:64px 32px 34px;}
.sitefoot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;align-items:start;
max-width:var(--frame);margin:0 auto;}
.sitefoot__brand b{font-family:var(--head);font-size:22px;font-weight:700;color:var(--panel-ink);letter-spacing:-.03em;}
.sitefoot__brand .brand__tag{margin-left:8px;}
.sitefoot__brand p{font-size:14px;line-height:1.6;color:var(--sage);max-width:34ch;margin:15px 0 20px;}
.sitefoot__col h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--chart);margin:0 0 15px;}
.sitefoot__col a,.sitefoot__linkbtn{display:block;font-size:14px;color:var(--sage);margin-bottom:11px;
background:none;border:none;padding:0;font-family:inherit;text-align:left;cursor:pointer;}
.sitefoot__col a:hover,.sitefoot__linkbtn:hover{color:var(--panel-ink);text-decoration:none;}
.sitefoot__bottom{max-width:var(--frame);margin:48px auto 0;padding-top:22px;border-top:1px solid #2c4636;
display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--faint);}
.sitefoot__legal{display:flex;gap:20px;flex-wrap:wrap;}
.sitefoot__legal a{color:var(--faint);}
.sitefoot__legal a:hover{color:var(--sage);text-decoration:none;}
.sitefoot__ver{font-family:var(--mono);font-size:11.5px;color:var(--faint);opacity:.65;letter-spacing:.02em;}
@media (max-width:820px){ .sitefoot__grid{grid-template-columns:1fr 1fr;gap:28px 24px;} }
@media (max-width:520px){ .sitefoot{padding:48px 20px 30px;} .sitefoot__grid{grid-template-columns:1fr 1fr;gap:26px 18px;} }
/* Safety net against accidental horizontal scroll. `clip` on BODY only (not html)
prevents sideways scroll without turning the root into a scroll container — so
the sticky header keeps working. Real overflows are fixed at their source. */
body{overflow-x:clip;}
/* Smooth-scroll in-page anchor links (homepage sections), offset under the
sticky header; disabled for reduced-motion users. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
:target{scroll-margin-top:84px;}
/* Social-login buttons (login / signup) */
.oauth{display:flex;flex-direction:column;gap:10px;margin:0 0 20px;}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 18px;
border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--surface);color:var(--ink);
font-family:var(--font);font-size:14.5px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s;text-decoration:none;}
.oauth-btn:hover{border-color:var(--accent);background:var(--surface-2);text-decoration:none;}
.oauth-btn__icon{display:inline-flex;align-items:center;color:var(--ink);}
.oauth-sep{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px;font-family:var(--mono);margin:6px 0 2px;}
.oauth-sep::before,.oauth-sep::after{content:"";flex:1;height:1px;background:var(--line);}
/* ---------- AUTH PANEL (two-step signup/login card; pages + homepage modal) ---------- */
.authp{display:grid;grid-template-columns:0.9fr 1.1fr;background:var(--surface);
border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;
max-width:880px;margin:0 auto;}
.authp__brand{background:var(--accent);color:#eef1e7;padding:44px 38px;display:flex;flex-direction:column;gap:18px;}
.authp__brandtop{font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:-.02em;}
.authp__brandtop span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#9ab3a0;margin-top:2px;}
.authp__tag{font-family:var(--head);font-size:26px;line-height:1.2;letter-spacing:-.02em;font-weight:700;margin:8px 0 0;}
.authp__points{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.authp__points li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#c9d4c5;}
.authp__points li::before{content:"✓";color:var(--chart);font-weight:700;}
.authp__body{padding:40px 42px;min-height:430px;display:flex;flex-direction:column;justify-content:center;}
.ac-title{font-family:var(--head);font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;outline:none;}
.ac-sub{color:var(--soft);font-size:14.5px;margin:0 0 22px;}
.ac-methods{display:flex;flex-direction:column;gap:10px;}
.ac-roles{display:flex;flex-direction:column;gap:12px;}
.ac-role{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;
text-align:left;cursor:pointer;background:var(--surface);border:1.5px solid var(--line);
border-radius:var(--radius-card);padding:16px 18px;font-family:var(--font);
transition:border-color .15s ease,background .15s ease,transform .15s ease;}
.ac-role:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--accent-wash);}
.ac-role__glyph{grid-row:1/3;align-self:center;width:42px;height:42px;border-radius:12px;
display:flex;align-items:center;justify-content:center;color:var(--accent);
background:var(--accent-wash);border:1px solid var(--line-2);}
.ac-role--tester .ac-role__glyph{color:var(--accent2);}
.ac-role__title{font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.ac-role__body{font-size:13.5px;color:var(--soft);line-height:1.45;}
.ac-back{background:none;border:none;cursor:pointer;color:var(--soft);font-family:var(--font);
font-size:13.5px;padding:0;margin:0 0 14px;}
.ac-back:hover{color:var(--accent);}
.ac-alt{text-align:center;color:var(--soft);font-size:13.5px;margin:18px 0 0;}
.ac-fine{text-align:center;color:var(--faint);font-size:12px;line-height:1.5;margin:14px 0 0;}
.ac-fine a{color:var(--soft);}
/* modal wrapper (homepage) */
.authmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
padding:24px;background:rgba(10,18,14,.55);backdrop-filter:blur(2px);}
.authmodal[hidden]{display:none;}
.authmodal__inner{position:relative;width:100%;max-width:880px;max-height:calc(100vh - 48px);overflow:auto;border-radius:18px;}
.authmodal__close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;
border:none;cursor:pointer;background:rgba(255,255,255,.85);color:var(--ink);font-size:19px;line-height:1;
display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.authmodal__close:hover{background:#fff;}
@media (max-width:760px){
.authp{grid-template-columns:1fr;}
.authp__brand{display:none;}
.authp__body{padding:30px 24px;min-height:0;}
}