/* Sonear v8 shell: design tokens + the chrome every app shares (top bar, account menu, sign-in
   gate, auth form, dialogs, contact form, dock). Paired with /shared/shell.js, which adds the
   `snr-v8` class to <html> while the head is still parsing - every rule here is scoped under it,
   so a page that does not load shell.js (Nicole, generated elsewhere) keeps its own look.

   Why the `:root.snr-v8` prefix everywhere: the shared modules (supabase.js, dialog.js,
   contact.js, applauncher.js) inject their own <style> at the END of <head>, after this file.
   Equal specificity would lose to them on source order; the prefix wins on specificity instead,
   so load order never matters. App-specific styles stay in each page. */

/* ── Display face ─────────────────────────────────────────────────────────
   Century Gothic for the wordmark and app names. It is a commercial font we cannot serve, so
   it is used where it is already installed (local(): most Windows PCs with Office), and
   everywhere else the browser downloads a 13 KB free lookalike (public/fonts/README.md).
   Bold only: the display face is never used for body text. */
@font-face{font-family:'Sonear Display';font-weight:700;font-style:normal;font-display:swap;
  src:local('Century Gothic Bold'),local('CenturyGothic-Bold'),url('/fonts/sonear-display-bold.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+20AC}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root.snr-v8{
  --v8-bg:#09090e;
  --v8-surface:#111119;
  --v8-surface-2:#171722;
  --v8-surface-3:#1f1f2c;
  --v8-line:#20202e;
  --v8-line-strong:#2d2d40;
  --v8-text:#ececf2;
  --v8-text-2:#a6a6bb;
  --v8-text-3:#80809a;            /* 5.3:1 on --v8-bg: the old #6a6a80 was 3.6:1, under WCAG AA */
  --v8-brand:#ff1a1a;             /* the .xyz red, for marks and accents */
  --v8-brand-strong:#e0101c;      /* filled buttons: white text on it is 4.9:1 (pure #ff0000 was 4.0) */
  --v8-danger:#ff4d6a;
  --v8-ok:#22c58b;
  --v8-r-sm:10px;
  --v8-r:14px;
  --v8-r-lg:20px;
  --v8-ease:cubic-bezier(.2,.8,.2,1);
  --v8-shadow-pop:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);
  --v8-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --v8-font-display:'Sonear Display','Century Gothic',var(--v8-font);
  /* Lift every app's own --dim to a readable grey. html.snr-v8 (0,1,1) beats each page's :root. */
  /* Faint washes for hovers and empty slots: white on dark, ink on light (see the light block). */
  --v8-tint:rgba(255,255,255,.045);
  --v8-tint-2:rgba(255,255,255,.08);
  --v8-tint-3:rgba(255,255,255,.12);
  color-scheme:dark;
}
html.snr-v8:root{--dim:#8b8ba3}

/* ── Light theme ─────────────────────────────────────────────────────────
   shell.js sets data-theme="light" on <html> (only on pages that declare data-themeable). The v8
   tokens flip here, and so do the five palette names every app uses for itself (--bg, --card,
   --border, --text, --dim) - html.snr-v8[...]:root outranks each page's own :root block. Each
   app then darkens its accent for light (a pale cyan or yellow fails contrast on white) and fixes
   the few colours it hard-codes, in its own stylesheet. Text greys are picked for AA on white. */
:root.snr-v8[data-theme="light"]{
  --v8-bg:#f5f5f8;
  --v8-surface:#ffffff;
  --v8-surface-2:#f1f1f6;
  --v8-surface-3:#e8e8f0;
  --v8-line:#e2e2ea;
  --v8-line-strong:#cfcfdb;
  --v8-text:#15151c;
  --v8-text-2:#45455a;            /* 9.4:1 on white */
  --v8-text-3:#5f5f75;            /* 6.1:1 on white */
  --v8-brand:#e0101c;
  --v8-brand-strong:#d00d18;
  --v8-danger:#d1243f;
  --v8-ok:#047857;
  --v8-shadow-pop:0 18px 50px rgba(20,20,40,.16),0 0 0 1px rgba(20,20,40,.04);
  --v8-tint:rgba(20,20,40,.04);
  --v8-tint-2:rgba(20,20,40,.07);
  --v8-tint-3:rgba(20,20,40,.11);
  color-scheme:light;
}
html.snr-v8[data-theme="light"]:root{--bg:#f5f5f8;--card:#ffffff;--card-2:#f1f1f6;--border:#e2e2ea;--text:#15151c;--dim:#5f5f75}
:root.snr-v8[data-theme="light"] ::selection{background:color-mix(in srgb,var(--accent,#e0101c) 22%,transparent)}

/* Smooth cross-page navigation (hub <-> apps) where the browser supports it; a plain load
   everywhere else. Only same-origin pages that also opt in take part. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

:root.snr-v8 body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:root.snr-v8 ::selection{background:color-mix(in srgb,var(--accent,#ff1a1a) 35%,transparent)}

/* ── Top bar ────────────────────────────────────────────────────────────── */
:root.snr-v8 .sub-header{min-height:58px;padding-top:9px;padding-bottom:9px;gap:10px;
  background:color-mix(in srgb,var(--bg,#0a0a0f) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--border,#1e1e30) 85%,transparent)}
:root.snr-v8 .sub-header .home-btn,:root.snr-v8 .sub-header .back-btn{width:38px;height:38px;border-radius:11px;
  background:var(--v8-surface-2);border-color:var(--v8-line);color:var(--v8-text-2);transition:color .15s,border-color .15s,background .15s}
:root.snr-v8 .sub-header .home-btn:hover,:root.snr-v8 .sub-header .back-btn:hover{color:var(--v8-text);border-color:var(--v8-line-strong);background:var(--v8-surface-3)}
:root.snr-v8 .sub-header .home-btn:focus-visible,:root.snr-v8 .sub-header .back-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* App identity, rebuilt by shell.js from the registry: [icon] Name. */
:root.snr-v8 .logo.v8-logo{display:inline-flex;align-items:center;gap:9px;min-width:0;font-family:var(--v8-font-display);font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--v8-text);text-transform:none}
:root.snr-v8 .logo.v8-logo .v8-logo-icon{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:block}
:root.snr-v8 .logo.v8-logo .v8-logo-name{color:var(--v8-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Beta tag next to the app name (beta hosts only). A button: it opens the feedback form. */
.v8-beta{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;height:24px;padding:0 9px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--v8-brand,#ff1a1a) 45%,transparent);background:color-mix(in srgb,var(--v8-brand,#ff1a1a) 12%,transparent);
  color:#ff8f8f;font:700 11px/1 var(--v8-font,sans-serif);letter-spacing:.4px;text-transform:uppercase;cursor:pointer;position:relative}
.v8-beta::after{content:'';position:absolute;inset:-9px -4px}
.v8-beta:hover{background:color-mix(in srgb,var(--v8-brand,#ff1a1a) 22%,transparent);color:#ffc2c2}
:root[data-theme="light"] .v8-beta,:root[data-theme="light"] .v8-beta:hover{color:#b00d16}
.v8-beta:focus-visible{outline:2px solid var(--v8-brand,#ff1a1a);outline-offset:2px}
/* Phones: the bar has no room to spare, and the tag was truncating app names ("FairS...").
   Feedback stays one tap away in the account menu, and the hub wordmark keeps its tag. */
@media (max-width:640px){.logo.v8-logo+.v8-beta{display:none}}
@media (max-width:420px){.v8-beta{height:22px;padding:0 7px;font-size:10px}}

/* ── Account control (rendered by shell.js through sbUpdateAuthButton) ─────── */
.v8-acct{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:3px 10px 3px 3px;border-radius:999px;
  border:1px solid var(--v8-line,#20202e);background:var(--v8-surface-2,#171722);color:var(--v8-text,#ececf2);cursor:pointer;font:600 13px var(--v8-font,sans-serif);transition:border-color .15s,background .15s;max-width:200px}
.v8-acct:hover,.v8-acct[aria-expanded="true"]{border-color:var(--v8-line-strong,#2d2d40);background:var(--v8-surface-3,#1f1f2c)}
.v8-acct:focus-visible{outline:2px solid var(--accent,#ff1a1a);outline-offset:2px}
.v8-acct-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--v8-text-2,#a6a6bb)}
.v8-acct svg{flex-shrink:0;color:var(--v8-text-3,#80809a)}
.v8-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  /* --v8-av is derived from the account name in shell.js: the same colour in every app, rather
     than taking each app's accent and changing identity from one page to the next. */
  background:linear-gradient(135deg,var(--v8-av,#6366f1),color-mix(in srgb,var(--v8-av,#6366f1) 45%,#000));
  color:#fff;font:800 14px/1 var(--v8-font,sans-serif);text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.35)}
@media (max-width:640px){.v8-acct{padding:3px}.v8-acct-name,.v8-acct>svg{display:none}}
.v8-signin{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--v8-line,#20202e);
  background:var(--v8-surface-2,#171722);color:var(--v8-text,#ececf2);font:650 13px var(--v8-font,sans-serif);cursor:pointer;white-space:nowrap}
.v8-signin:hover{border-color:var(--v8-line-strong,#2d2d40)}
.v8-signin:focus-visible{outline:2px solid var(--accent,#ff1a1a);outline-offset:2px}

.v8-menu{position:fixed;z-index:10001;min-width:240px;max-width:calc(100vw - 24px);padding:6px;border-radius:16px;
  background:color-mix(in srgb,var(--v8-surface,#111119) 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--v8-line-strong,#2d2d40);box-shadow:var(--v8-shadow-pop);font-family:var(--v8-font,sans-serif);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .14s ease,transform .16s var(--v8-ease)}
.v8-menu.show{opacity:1;transform:none;pointer-events:auto}
.v8-menu-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;margin-bottom:4px;border-bottom:1px solid var(--v8-line,#20202e)}
.v8-avatar{position:relative;overflow:hidden}
.v8-avatar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.v8-menu-head .v8-avatar{width:38px;height:38px;font-size:15px}
.v8-menu-id{min-width:0}
.v8-menu-id b{display:block;color:var(--v8-text,#ececf2);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v8-menu-id span{display:block;color:var(--v8-text-3,#80809a);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.v8-mi{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:10px;background:none;
  color:var(--v8-text,#ececf2);font:550 14px var(--v8-font,sans-serif);text-decoration:none;cursor:pointer;text-align:left}
.v8-mi svg{color:var(--v8-text-3,#80809a);flex-shrink:0}
.v8-mi:hover,.v8-mi:focus-visible{background:var(--v8-surface-3,#1f1f2c);outline:none}
.v8-mi:focus-visible{box-shadow:inset 0 0 0 2px var(--accent,#ff1a1a)}
.v8-mi.danger{color:var(--v8-danger,#ff4d6a)}
.v8-mi.danger svg{color:currentColor}
.v8-mi-sep{height:1px;background:var(--v8-line,#20202e);margin:4px 6px}
.v8-theme{display:flex;gap:4px;padding:4px 2px}
.v8-mi.v8-th{flex:1;justify-content:center;gap:6px;min-height:40px;padding:0 6px;font-size:12.5px;border:1px solid transparent}
.v8-mi.v8-th svg{color:currentColor}
.v8-mi.v8-th[aria-checked="true"]{background:var(--v8-surface-3,#1f1f2c);border-color:var(--v8-line-strong,#2d2d40);font-weight:700}

/* The contact form moved into the account menu: no more "Contact me" in the middle of every bar.
   The footer copy stays for anyone who cannot open the menu - signed out, or stopped at the
   sign-in / access-denied gate, where asking for access is the whole point. */
:root.snr-v8 .sc-contact.sc-in-bar{display:none}
:root.snr-v8.snr-signed-in .sc-footer{display:none}
:root.snr-v8:not(.snr-signed-in) .sc-footer,:root.snr-v8.sc-gated .sc-footer{display:flex}

/* ── Sign-in gate + access denied ──────────────────────────────────────── */
:root.snr-v8 .sb-gate-inner{min-height:72vh;max-width:420px;margin:0 auto;padding:32px 24px}
:root.snr-v8 .sb-gate-inner h2{font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--v8-text)}
:root.snr-v8 .sb-gate-inner p{color:var(--v8-text-2);font-size:15px;line-height:1.5}
:root.snr-v8 .sb-gate-btn{min-height:46px;padding:0 28px;border-radius:12px;background:var(--v8-brand-strong);font-size:15px}
:root.snr-v8 .sb-gate-btn:focus-visible{outline:2px solid var(--v8-brand);outline-offset:2px}
:root.snr-v8 .sb-gate-home{width:44px;height:44px;border-radius:13px;background:var(--v8-surface-2);border-color:var(--v8-line);color:var(--v8-text-2);margin-bottom:22px}
:root.snr-v8 .v8-gate-icon{width:64px;height:64px;border-radius:18px;margin-bottom:18px;box-shadow:0 12px 30px rgba(0,0,0,.45)}

/* ── Auth form (modal on app pages, inline on the hub) ───────────────────── */
:root.snr-v8 .sb-auth-overlay{background:rgba(4,4,8,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root.snr-v8 .sb-auth-modal{background:var(--v8-surface);border-color:var(--v8-line);border-radius:var(--v8-r-lg);box-shadow:var(--v8-shadow-pop);max-width:380px;padding:26px 22px}
:root.snr-v8 .sb-auth-inline{background:transparent;border:0;box-shadow:none;padding:0;max-width:none}
:root.snr-v8 .sb-auth-tabs{background:var(--v8-bg);border-color:var(--v8-line);border-radius:13px}
:root.snr-v8 .sb-auth-tab{color:var(--v8-text-3);min-height:42px;border-radius:10px}
:root.snr-v8 .sb-auth-tab:hover{color:var(--v8-text)}
:root.snr-v8 .sb-auth-tab.active{background:var(--v8-surface-3);color:var(--v8-text);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 2px 8px rgba(0,0,0,.3)}
:root.snr-v8 .sb-auth-tab:focus-visible{outline-color:var(--v8-brand)}
:root.snr-v8 .sb-oauth-btn{min-height:46px;border-radius:12px;background:var(--v8-surface-2);border-color:var(--v8-line);color:var(--v8-text)}
:root.snr-v8 .sb-oauth-btn:hover{border-color:var(--v8-line-strong);background:var(--v8-surface-3)}
:root.snr-v8 .sb-oauth-btn:focus-visible{outline:2px solid var(--v8-brand);outline-offset:2px}
:root.snr-v8 .sb-auth-divider{color:var(--v8-text-3)}
:root.snr-v8 .sb-auth-divider::before,:root.snr-v8 .sb-auth-divider::after{background:var(--v8-line)}
:root.snr-v8 .sb-auth-modal input{min-height:48px;border-radius:12px;background:var(--v8-bg);border-color:var(--v8-line);color:var(--v8-text)}
:root.snr-v8 .sb-auth-modal input::placeholder{color:var(--v8-text-3)}
:root.snr-v8 .sb-auth-modal input:focus{border-color:var(--v8-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--v8-brand) 22%,transparent)}
:root.snr-v8 .sb-auth-submit{min-height:48px;border-radius:12px;background:var(--v8-brand-strong);font-size:15px}
:root.snr-v8 .sb-auth-submit:focus-visible{outline:2px solid var(--v8-brand);outline-offset:2px}
:root.snr-v8 .sb-auth-links a{color:var(--v8-text-3)}
:root.snr-v8 .sb-auth-links a:hover{color:var(--v8-text)}
:root.snr-v8 .sb-auth-error{color:var(--v8-danger)}
:root.snr-v8 .sb-auth-error:empty{min-height:0;margin:0}   /* no blank line reserved above the buttons until there is an error */

/* ── Shared dialogs (dialog.js) ─────────────────────────────────────────── */
:root.snr-v8 .ui-dialog-overlay{background:rgba(4,4,8,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root.snr-v8 .ui-dialog-overlay.show .ui-dialog{animation:v8-pop .18s var(--v8-ease)}
:root.snr-v8 .ui-dialog{background:var(--v8-surface);border-color:var(--v8-line-strong);border-radius:var(--v8-r-lg);box-shadow:var(--v8-shadow-pop);padding:22px;max-width:400px}
:root.snr-v8 .ui-dialog h2{font-size:17px;font-weight:750;color:var(--v8-text)}
:root.snr-v8 .ui-dialog p{color:var(--v8-text-2)}
:root.snr-v8 .ui-dialog input{min-height:46px;border-radius:12px;background:var(--v8-bg);border-color:var(--v8-line);color:var(--v8-text)}
:root.snr-v8 .ui-dialog-actions button{border-radius:12px;border-color:var(--v8-line-strong);color:var(--v8-text)}
:root.snr-v8 .ui-dialog-actions .primary{color:var(--accent-fg,#04221a)}
:root.snr-v8 .ui-dialog-actions .danger{color:#fff}
:root.snr-v8 .ui-dialog-actions button:hover{background:var(--v8-surface-3)}
:root.snr-v8 .ui-dialog-actions .primary:hover{background:var(--accent);filter:brightness(1.08)}
:root.snr-v8 .ui-dialog-actions .danger{background:var(--v8-danger);border-color:var(--v8-danger)}
@keyframes v8-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){:root.snr-v8 .ui-dialog-overlay.show .ui-dialog{animation:none}}

/* ── Contact form (contact.js) ──────────────────────────────────────────── */
:root.snr-v8 .sc-ov{background:rgba(4,4,8,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root.snr-v8 .sc-card{background:var(--v8-surface);border-color:var(--v8-line-strong);border-radius:var(--v8-r-lg);box-shadow:var(--v8-shadow-pop)}
:root.snr-v8 .sc-input{min-height:46px;border-radius:12px;background:var(--v8-bg);border-color:var(--v8-line)}
:root.snr-v8 .sc-btn{border-radius:12px;min-height:44px}
:root.snr-v8 .sc-label{color:var(--v8-text-3)}
:root.snr-v8 .sc-contact{border-radius:12px;min-height:42px;color:var(--v8-text-2)}

/* ── PC dock (applauncher.js) ───────────────────────────────────────────── */
:root.snr-v8 .snr-dock{background:color-mix(in srgb,var(--v8-surface) 80%,transparent);border-color:var(--v8-line);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
:root.snr-v8 .snr-tip{background:var(--v8-surface-3);border-color:var(--v8-line-strong);border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
:root.snr-v8 .snr-item[aria-current="page"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--snr-accent) 25%,transparent)}
:root.snr-v8 .snr-item,:root.snr-v8 .snr-home{background:var(--v8-bg)}
:root.snr-v8 .snr-home{border-color:var(--v8-line);color:var(--v8-text-2)}
:root.snr-v8 .snr-home:hover{color:var(--v8-text)}
:root.snr-v8 .snr-sep{background:var(--v8-line)}
:root.snr-v8 .snr-arch{background:color-mix(in srgb,var(--v8-surface) 92%,transparent);border-color:var(--v8-line)}
:root.snr-v8 .snr-tip{color:var(--v8-text)}
/* On a light page shell.js swaps in the white-tile icons (icon-light.svg), so the dock item is
   white behind them too. */
:root.snr-v8[data-theme="light"] .snr-item{background:#ffffff}

/* ── Session-lost banner (supabase.js) ──────────────────────────────────── */
:root.snr-v8 .sb-lost{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(58,36,16,.92)}
:root.snr-v8[data-theme="light"] .sb-lost{background:rgba(255,243,224,.96);border-bottom-color:#f0c98a;color:#5a3a0a}

/* ── Utilities any page can use ─────────────────────────────────────────── */
.v8-skel{position:relative;overflow:hidden;background:var(--v8-surface-2,#171722);border-radius:12px}
.v8-skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);animation:v8-shimmer 1.3s infinite}
:root[data-theme="light"] .v8-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
@keyframes v8-shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.v8-skel::after{animation:none}}