/* ============================================================================
 * default.css — the default theme. Designer palette: blackcurrant accent over
 * charcoal (dark) and vanilla (light) neutrals.
 *
 * A theme is one .css plus one folder. Everything this theme needs — typeface,
 * logo, AI activity artwork — is a real file under ./default/ or ./shared/.
 * public/ is copied verbatim by Vite, so relative url() and @import resolve the
 * same in dev and in production. See public/themes/README.md.
 *
 * Three parts, in order:
 *   1. @import shared      the app's screen layout, from the content down. MUST BE FIRST:
 *                          CSS drops an @import that follows any other rule, silently.
 *   2. @font-face          this theme's typeface, self-hosted
 *   3. :root + shell       tokens, artwork, and THIS THEME'S OWN NAVIGATION
 *
 * The shell is deliberately NOT in the shared layer: Default lays the navigation
 * out as a collapsible left rail and Sapphire as a horizontal top bar, from the
 * same DOM, and neither should have to fight the other's rules.
 * ========================================================================== */


/* The shared screen layout.
 *
 * MUST BE THE FIRST RULE IN THE FILE. CSS requires @import to precede every other rule
 * except @charset and @layer; putting @font-face above it makes the @import invalid and
 * the entire shared layer is dropped — silently, with no console error.
 *
 * @import is serial, so a cold load fetches this file then shared/layout.css. Accepted:
 * two <link>s would require theme.ts to know which themes want the shared layer, putting
 * theme knowledge back into JavaScript. It also means the theme's own rules come AFTER the
 * shared ones, so a theme always wins a tie — which is what we want.
 */
@import url("./shared/layout.css");

/* A typeface is a theme asset, so it lives in the theme folder — nothing outside this
 * file and ./default/ changes to add a theme. Same-origin under public/, so this is not
 * a cross-origin Google Fonts round trip, and font-display: swap bounds the fallback
 * render to the first switch into this theme. */
@font-face {
  font-family: "Manrope";
  src: url("./default/fonts/manrope-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
 * Colour ramps
 * Ported from the new design's design-system/tokens.css 1-196 — 9 ramps x 19 steps.
 * An authoring convenience of THIS theme, not part of the contract: Sapphire
 * declares its semantic tokens directly with light-dark() and ships no ramp.
 * ========================================================================== */

/*
 * SYNCPitch — Design tokens (Onepoint brand)
 * Single source for the app. Edit this file directly.
 */

:root {
  /* ── Brand colors ───────────────────────────────────────────────────────── */
  --color-charcoal: #07000D;
  --color-vanilla: #FAFFFE;
  --color-black-currant: #8F00FF;
  --color-mint: #00D3BA;
  --color-bubblegum: #08B4FF;
  --color-papaya: #F64740;
  --color-cherry: #D90368;
  --color-lemon: #FBF429;
  --color-lime: #9EE812;

  --color-black-currant-50: #F3E5FF;
  --color-black-currant-100: #E8CCFF;
  --color-black-currant-150: #DDB2FF;
  --color-black-currant-200: #D299FF;
  --color-black-currant-250: #C77FFF;
  --color-black-currant-300: #BB66FF;
  --color-black-currant-350: #B04CFF;
  --color-black-currant-400: #A533FF;
  --color-black-currant-450: #9A19FF;
  --color-black-currant-500: #8F00FF;
  --color-black-currant-550: #8000E5;
  --color-black-currant-600: #7200CC;
  --color-black-currant-650: #6400B2;
  --color-black-currant-700: #550099;
  --color-black-currant-750: #47007F;
  --color-black-currant-800: #390065;
  --color-black-currant-850: #2A004C;
  --color-black-currant-900: #1C0032;
  --color-black-currant-950: #0E0019;

  --color-mint-50: #E5FAF8;
  --color-mint-100: #CCF6F1;
  --color-mint-150: #B2F1EA;
  --color-mint-200: #99EDE3;
  --color-mint-250: #7FE9DC;
  --color-mint-300: #66E4D5;
  --color-mint-350: #4CE0CE;
  --color-mint-400: #33DBC7;
  --color-mint-450: #19D7C0;
  --color-mint-500: #00D3BA;
  --color-mint-550: #00BDA7;
  --color-mint-600: #00A894;
  --color-mint-650: #009382;
  --color-mint-700: #007E6F;
  --color-mint-750: #00695D;
  --color-mint-800: #00544A;
  --color-mint-850: #003F37;
  --color-mint-900: #002A25;
  --color-mint-950: #001512;

  --color-bubblegum-50: #E6F7FF;
  --color-bubblegum-100: #CDF0FF;
  --color-bubblegum-150: #B4E8FF;
  --color-bubblegum-200: #9CE1FF;
  --color-bubblegum-250: #83D9FF;
  --color-bubblegum-300: #6AD2FF;
  --color-bubblegum-350: #52CAFF;
  --color-bubblegum-400: #39C3FF;
  --color-bubblegum-450: #20BBFF;
  --color-bubblegum-500: #08B4FF;
  --color-bubblegum-550: #07A2E5;
  --color-bubblegum-600: #0690CC;
  --color-bubblegum-650: #057DB2;
  --color-bubblegum-700: #046C99;
  --color-bubblegum-750: #045A7F;
  --color-bubblegum-800: #034765;
  --color-bubblegum-850: #02354C;
  --color-bubblegum-900: #012332;
  --color-bubblegum-950: #001119;

  --color-cherry-50: #FBE5EF;
  --color-cherry-100: #F7CCE0;
  --color-cherry-150: #F3B3D1;
  --color-cherry-200: #EF9AC2;
  --color-cherry-250: #EC81B3;
  --color-cherry-300: #E867A4;
  --color-cherry-350: #E44E95;
  --color-cherry-400: #E03586;
  --color-cherry-450: #DC1C77;
  --color-cherry-500: #D90368;
  --color-cherry-550: #C3025D;
  --color-cherry-600: #AD0253;
  --color-cherry-650: #970248;
  --color-cherry-700: #82013E;
  --color-cherry-750: #6C0134;
  --color-cherry-800: #560129;
  --color-cherry-850: #41001F;
  --color-cherry-900: #2B0014;
  --color-cherry-950: #15000A;

  --color-papaya-50: #FEECEB;
  --color-papaya-100: #FDDAD8;
  --color-papaya-150: #FCC7C5;
  --color-papaya-200: #FBB5B2;
  --color-papaya-250: #FAA39F;
  --color-papaya-300: #F9908C;
  --color-papaya-350: #F87E79;
  --color-papaya-400: #F76B66;
  --color-papaya-450: #F65953;
  --color-papaya-500: #F64740;
  --color-papaya-550: #DD3F39;
  --color-papaya-600: #C43833;
  --color-papaya-650: #AC312C;
  --color-papaya-700: #932A26;
  --color-papaya-750: #7B2320;
  --color-papaya-800: #621C19;
  --color-papaya-850: #491513;
  --color-papaya-900: #310E0C;
  --color-papaya-950: #180706;

  --color-lemon-50: #FEFDE9;
  --color-lemon-100: #FEFCD4;
  --color-lemon-150: #FDFBBE;
  --color-lemon-200: #FDFAA9;
  --color-lemon-250: #FDF994;
  --color-lemon-300: #FCF87E;
  --color-lemon-350: #FCF769;
  --color-lemon-400: #FBF653;
  --color-lemon-450: #FBF53E;
  --color-lemon-500: #FBF429;
  --color-lemon-550: #E1DB24;
  --color-lemon-600: #C8C320;
  --color-lemon-650: #AFAA1C;
  --color-lemon-700: #969218;
  --color-lemon-750: #7D7A14;
  --color-lemon-800: #646110;
  --color-lemon-850: #4B490C;
  --color-lemon-900: #323008;
  --color-lemon-950: #191804;

  --color-lime-50: #F5FCE7;
  --color-lime-100: #EBFACF;
  --color-lime-150: #E1F8B7;
  --color-lime-200: #D8F5A0;
  --color-lime-250: #CEF388;
  --color-lime-300: #C4F170;
  --color-lime-350: #BBEE59;
  --color-lime-400: #B1EC41;
  --color-lime-450: #A7EA29;
  --color-lime-500: #9EE812;
  --color-lime-550: #8ED010;
  --color-lime-600: #7EB90E;
  --color-lime-650: #6EA20C;
  --color-lime-700: #5E8B0A;
  --color-lime-750: #4F7409;
  --color-lime-800: #3F5C07;
  --color-lime-850: #2F4505;
  --color-lime-900: #1F2E03;
  --color-lime-950: #0F1701;

  --color-charcoal-50: #E6E5E6;
  --color-charcoal-100: #CDCCCE;
  --color-charcoal-150: #B4B2B6;
  --color-charcoal-200: #9B999E;
  --color-charcoal-250: #837F86;
  --color-charcoal-300: #6A666D;
  --color-charcoal-350: #514C55;
  --color-charcoal-400: #38333D;
  --color-charcoal-450: #1F1925;
  --color-charcoal-500: #07000D;
  --color-charcoal-550: #06000B;
  --color-charcoal-600: #05000A;
  --color-charcoal-650: #040009;
  --color-charcoal-700: #040007;
  --color-charcoal-750: #030006;
  --color-charcoal-800: #020005;
  --color-charcoal-850: #020003;
  --color-charcoal-900: #010002;
  --color-charcoal-950: #000001;

  --color-vanilla-50: #FEFFFE;
  --color-vanilla-100: #FEFFFE;
  --color-vanilla-150: #FDFFFE;
  --color-vanilla-200: #FDFFFE;
  --color-vanilla-250: #FCFFFE;
  --color-vanilla-300: #FCFFFE;
  --color-vanilla-350: #FBFFFE;
  --color-vanilla-400: #FBFFFE;
  --color-vanilla-450: #FAFFFE;
  --color-vanilla-500: #FAFFFE;
  --color-vanilla-550: #E1E5E4;
  --color-vanilla-600: #C8CCCB;
  --color-vanilla-650: #AFB2B1;
  --color-vanilla-700: #969998;
  --color-vanilla-750: #7D7F7F;
  --color-vanilla-800: #636565;
  --color-vanilla-850: #4A4C4C;
  --color-vanilla-900: #313232;
  --color-vanilla-950: #181919;

/* ==========================================================================
 * Scale: weights, sizes, leading, space, radius, transition, shadow
 * new design tokens.css 197-269
 * ========================================================================== */


  /* ── Typography ───────────────────────────────────────────────────────────
   * Accessible defaults (WCAG 2.2 AA oriented):
   * - Body floor >= 1rem; secondary UI text >= 0.875rem
   * - Body/paragraph line-height >= 1.5 (--leading-normal)
   * - Display headings may be tighter (1.2-1.3); layout must
   *   still survive user text-spacing overrides (1.4.12)
   */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: var(--font-display);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Modular-ish rem scale (~1.2 major second from base) */
  --size-xs: 0.75rem;    /* 12px @ 16 — captions only */
  --size-sm: 0.875rem;   /* 14px — secondary labels floor */
  --size-base: 1rem;     /* 16px — body */
  --size-md: 1.125rem;   /* 18px */
  --size-lg: 1.25rem;    /* 20px */
  --size-xl: 1.5rem;     /* 24px — large text threshold */
  --size-2xl: 1.75rem;   /* 28px */
  --size-3xl: 2rem;      /* 32px */
  --size-4xl: 2.25rem;   /* 36px */
  --size-5xl: 2.5rem;    /* 40px */
  --size-6xl: 3rem;      /* 48px */
  --size-7xl: 3.25rem;
  --size-8xl: 3.75rem;
  --size-9xl: 4.5rem;
  --size-10xl: 5rem;

  --leading-none: 1;
  --leading-tight: 1.2;     /* display headings */
  --leading-snug: 1.25;     /* large headings */
  --leading-semi: 1.4;      /* small headings / compact UI */
  --leading-normal: 1.5;    /* body / WCAG text-spacing baseline */
  --leading-relaxed: 1.65;  /* long-form reading */
  --leading-loose: 1.75;

  /* ── Space / radius / motion ─────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  --border-w: 1px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.23, 1, 0.32, 1);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-card: none;


/* ==========================================================================
 * Semantic colours
 * new design tokens.css 270-326 — the layer shared/layout.css resolves against
 * ========================================================================== */

  /* Semantic tokens — light-dark(light, dark); follows color-scheme */
  /* Text */
  --color-fg: light-dark(var(--color-charcoal), var(--color-vanilla));
  --text-secondary: light-dark(var(--color-charcoal-400), var(--color-charcoal-200));
  --color-muted: light-dark(var(--color-charcoal-300), var(--color-charcoal-150));
  --color-muted-2: light-dark(var(--color-charcoal-250), var(--color-charcoal-300));
  --text-on-accent: var(--color-vanilla);

  /* Surfaces / chrome — 3 fills + 2 lines + 1 soft wash */
  --color-surface: light-dark(
    var(--color-vanilla),
    var(--color-charcoal)
  );
  --color-bg: light-dark(
    color-mix(in srgb, var(--color-charcoal-50) 15%, transparent),    
    color-mix(in srgb, var(--color-charcoal) 45%, transparent)
  );
  --color-surface-2: light-dark(color-mix(in srgb, var(--color-charcoal-50) 50%, transparent), var(--color-charcoal-450));
  --color-line: light-dark(var(--color-charcoal-100), var(--color-charcoal-350));
  --color-line-2: light-dark(var(--color-charcoal-50), var(--color-charcoal-450));
  --color-muted-bg: color-mix(in srgb, var(--color-muted) 9%, transparent);

  /* Accent — fill, AA text, soft wash */
  --color-accent: light-dark(var(--color-black-currant), var(--color-black-currant-450));
  --color-accent-text: light-dark(var(--color-black-currant-500), var(--color-black-currant-300));
  --color-accent-bg: light-dark(
    var(--color-black-currant-100),
    color-mix(in srgb, var(--color-black-currant) 18%, var(--color-surface))
  );
  --color-accent-soft: light-dark(
    color-mix(in srgb, var(--color-cherry) 15%, transparent),
    color-mix(in srgb, var(--color-cherry) 22%, transparent)
  );

  /* Status: ink + wash */
  --color-ok: light-dark(var(--color-mint-550), var(--color-mint-400));
  --color-ok-bg: light-dark(
    var(--color-mint-100),
    color-mix(in srgb, var(--color-mint) 18%, var(--color-surface))
  );
  --color-warn: light-dark(var(--color-papaya-500), var(--color-papaya-400));
  --color-warn-bg: light-dark(
    var(--color-papaya-100),
    color-mix(in srgb, var(--color-papaya) 18%, var(--color-surface))
  );
  --color-danger: light-dark(var(--color-cherry), var(--color-cherry-350));
  --color-crit: light-dark(var(--color-cherry-500), var(--color-cherry-400));
  --color-crit-bg: light-dark(
    var(--color-cherry-100),
    color-mix(in srgb, var(--color-cherry) 16%, transparent)
  );
  --color-danger-text: light-dark(var(--color-cherry-650), var(--color-cherry-400));
  --color-info: light-dark(var(--color-bubblegum-500), var(--color-bubblegum-400));
  --color-info-bg: light-dark(
    color-mix(in srgb, var(--color-bubblegum) 10%, transparent),
    color-mix(in srgb, var(--color-bubblegum) 14%, transparent)
  );

/* ==========================================================================
 * Login block + colour-scheme
 * new design tokens.css 327-349
 * ========================================================================== */


  /* Login — mesh + layout */
  --login-grad-a: light-dark(var(--color-black-currant-100), var(--color-black-currant-650));
  --login-grad-b: light-dark(var(--color-black-currant-300), var(--color-black-currant-900));
  --login-shell-max: 56rem;
  --login-card-max: 23.75rem; /* 380px */
  --login-card-max-sm: 26.25rem; /* 420px */
  --login-logo-height: var(--space-16);
  --login-brand-max: 22em;
  --login-lede-max: 28em;
  --login-rule-width: var(--space-8);
  --login-grad-swap-duration: 4s;
  --login-grad-rise-duration: 8s;
  --login-grad-reduced-opacity: 0.45;
}
/* App theme drives light-dark() via color-scheme (not OS alone).
   Canonical attribute: data-theme on <html> (light | dark). */
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ==========================================================================
 * Artwork. The markup emits names; this theme supplies the files.
 * ========================================================================== */
:root {
  --icon-edit: url("./icons/edit.svg");
  --icon-folder: url("./icons/folder.svg");
  --icon-file: url("./icons/file.svg");
  --icon-search: url("./icons/search.svg");
  --icon-chevron: url("./icons/chevron.svg");
  --icon-folder-plus: url("./icons/folder-plus.svg");
  --icon-upload: url("./icons/upload.svg");
  --icon-download: url("./icons/download.svg");
  --icon-download-original: url("./icons/download-original.svg");
  --icon-trash: url("./icons/trash.svg");
  --icon-file-md: url("./icons/file-md.svg");
  --icon-eye: url("./icons/eye.svg");
  --icon-google: url("./icons/google.svg");
  --icon-fingerprint: url("./icons/fingerprint.svg");
  --icon-plus: url("./icons/plus.svg");
  --icon-save: url("./icons/save.svg");
  --icon-x: url("./icons/x.svg");
  --icon-check: url("./icons/check.svg");
  --icon-ban: url("./icons/ban.svg");
  --icon-rotate-ccw: url("./icons/rotate-ccw.svg");
  --icon-sparkles: url("./icons/sparkles.svg");
  --icon-send: url("./icons/send.svg");
  --icon-refresh: url("./icons/refresh.svg");
  --icon-arrow-left: url("./icons/arrow-left.svg");
  --icon-arrow-right: url("./icons/arrow-right.svg");
  --icon-log-out: url("./icons/log-out.svg");
  --icon-brain: url("./icons/brain.svg");
  --icon-file-pdf: url("./icons/file-pdf.svg");
  --icon-file-doc: url("./icons/file-doc.svg");
  --icon-archive: url("./icons/archive.svg");
  --icon-itt: url("./icons/itt.svg");
  --icon-client: url("./icons/client.svg");
  --icon-competitor: url("./icons/competitor.svg");
  --icon-market: url("./icons/market.svg");
  --icon-capture: url("./icons/capture.svg");
  --icon-proposal: url("./icons/proposal.svg");
  --icon-strategy: url("./icons/strategy.svg");
  --icon-solution: url("./icons/solution.svg");
  --icon-response: url("./icons/response.svg");
  --icon-chevron-left: url("./icons/chevron-left.svg");
  --icon-chevron-up: url("./icons/chevron-up.svg");
  --icon-chevrons-right: url("./icons/chevrons-right.svg");
  --icon-clock: url("./icons/clock.svg");
  --icon-dots-vertical: url("./icons/dots-vertical.svg");
  --icon-grid-2x2: url("./icons/grid-2x2.svg");
  --icon-layers: url("./icons/layers.svg");
  --icon-list: url("./icons/list.svg");
  --icon-lock: url("./icons/lock.svg");
  --icon-mode-dark: url("./icons/mode-dark.svg");
  --icon-mode-light: url("./icons/mode-light.svg");
  --icon-mode-system: url("./icons/mode-system.svg");

/* Brand artwork. The markup emits .brand-mark and nothing else — no component
     resolves an image path. */
  /* Two assets, the pair new design's own updateLogo() swapped between: the full lockup (ring
     + "onepoint SYNCPitch" lettering) for the expanded rail and the login card, and the
     ring-only mark for the collapsed rail. The lockup CONTAINS the wordmark, which is
     why the markup has no separate text element. */
  --brand-logo: url("./default/logo.png");
  --brand-logo-mono: url("./default/logo-mono.png");
  --brand-icon: url("./default/icon.png");
  --brand-icon-mono: url("./default/icon-mono.png");
/* Was a hard-coded rgba(242, 98, 46, 0.34) — a brand orange matching neither
     palette. Derived from the accent so it is right in every theme. */
  --shadow-accent-glow: 0 18px 44px color-mix(in srgb, var(--color-accent) 34%, transparent);
  /* new design's .btn-primary-icon hard-coded `transform 0.45s cubic-bezier(0.22,1,0.36,1)`.
     These tokens hold it, so .btn-icon stays a marker rather than a look. */
  --motion-icon-dur: 0.45s;
  --motion-icon-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Two-colour artwork, so background-image rather than a mask — a mask would
     flatten the accent out of it. */
  --ai-anim-thinking: url("../default/ai-thinking.svg");
  --ai-anim-tools: url("../default/ai-tools.svg");
  --ai-anim-idle: url("../default/ai-idle.svg");
  /* The AI-assisted badge (.author-ai / .audit-ai in shared/layout.css). Same mark as
     --brand-icon but declared with the ../ prefix the shared sheet needs: a url() in a
     custom property resolves against the sheet that USES it, so --brand-icon's "./"
     (correct inside this file) would resolve to themes/shared/default/… from there and
     silently fall through to Vite's SPA handler as text/html. */
  --ai-badge: url("../default/icon.png");
}
/* light-dark() is a <color> function and cannot wrap url(), so the dark variants are
   re-declared rather than expressed inline. */
:root[data-theme="dark"] {
  --ai-anim-thinking: url("../default/ai-thinking-dark.svg");
  --ai-anim-tools: url("../default/ai-tools-dark.svg");
  --ai-anim-idle: url("../default/ai-idle-dark.svg");
  /* Dark ink on a dark ground disappears — take the reversed cut, exactly as
     .brand-mark does below. */
  --ai-badge: url("../default/icon-mono.png");
}

/* ---- brand mark ---- */
/* Ported from new design's `.sidebar-logo img { width: 100%; height: auto }`: the lockup is drawn
   at the FULL WIDTH of the rail, so its height follows from the asset's own 6251x1635
   ratio. The markup emits a <span>, not an <img>, so aspect-ratio does the job height:auto
   did. The lockup carries the wordmark, so there is no text element beside it. */
.brand-mark {
  display: block;
  width: 100%;
  aspect-ratio: 6251 / 1635;
  background: var(--brand-logo) left center / contain no-repeat;
}
/* The lettering is dark ink, so dark mode needs the reversed cut — new design's script swapped
   the file by mode for exactly this reason. */
:root[data-theme="dark"] .brand-mark {
  background-image: var(--brand-logo-mono);
}

/* Collapsed, the rail shows the ring only — there the circle IS the whole image, so full
   width still centres on the same axis. */
.app-nav.is-collapsed .brand-mark {
  aspect-ratio: 1 / 1;
  background-image: var(--brand-icon);
  background-position: center;
}
:root[data-theme="dark"] .app-nav.is-collapsed .brand-mark {
  background-image: var(--brand-icon-mono);
}

/* The login art panel is coloured in both modes, so its mark is always the reversed cut.
   new design sizes it by HEIGHT there (--login-logo-height), with the width following. */
.brand-mark--mono {
  width: auto;
  height: var(--login-logo-height);
  background-image: var(--brand-logo-mono);
}

/* ==========================================================================
 * Default's own shell — a collapsible LEFT RAIL
 * new design styles.css 1291-1314 + 1315-1830, minus the button vocabulary (1455-1538)
 * and the screen frame (1699-1717), both of which are shared.
 *
 * new design's .app-nav* names are renamed to orientation-neutral .app-nav*: a horizontal
 * bar built from elements called "sidebar" is a contradiction, and Sapphire lays
 * this same DOM out horizontally. The rename changes no pixel here.
 * ========================================================================== */

/* ── Reset & Body Layout ───────────────────────────────────────────────── */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-bg);
  /* The inherited ink for the whole document. Without it this block set a background but
     left `color` at the UA default, which follows `color-scheme` — so any text no rule
     targets rendered PURE white in dark and PURE black in light instead of the theme's
     #FAFFFE / #07000D. Found by diffing computed styles against the new design baseline: it was
     ~730 of 742 remaining differences, inherited down whole subtrees. */
  color: var(--color-fg);
}

/* This theme's shell axis: the navigation is a LEFT RAIL, so the shell is a row.
   Sapphire makes the same DOM a column with the nav across the top. */
.app-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

body.login-screen .app-nav {
  display: none;
}

body.login-screen .app-main {
  width: 100%;
}

/* ═════════════════════════════════════════════════════════════════════════════
   SIDEBAR & NAVIGATION
   ═════════════════════════════════════════════════════════════════════════ */

.app-nav {
  flex: none;
  width: 15vw;
  min-width: 200px;
  max-width: 280px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5);
  position: relative;
  min-height: 0;
  overflow-y: auto;
  overflow: visible;
  z-index: 100;
  transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
}

.app-nav-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-width: 0;
  min-height: 0;
}

/* Collapsed, every label goes — but NOT the version: new design keeps it and shrinks it,
   because it is part of the lockup rather than a row of its own. */
.app-nav.is-collapsed .nav-label,
.app-nav.is-collapsed .app-nav-actions-label,
.app-nav.is-collapsed .btn-primary-label,
.app-nav.is-collapsed .account-info {
  display: none;
}

.app-nav-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.app-nav-actions .btn-primary {
  width: fit-content;
  max-width: 100%;
  flex: none;
}

.app-nav-foot {
  flex: none;
  min-width: 0;
  position: relative;
}

/* new design's .sidebar-logo verbatim: full width, so the lockup inside it fills the rail. */
.app-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  border-radius: 11px;
}

/* Centred under the CIRCLE, not under the whole lockup and not ranged left.
   The circle is part of the logo image, so there is no element to align to —
   but the asset's own ratio gives it away. The lockup is drawn at full width,
   so its rendered height is `width * 1635/6251`, and the circle is a
   full-height disc at the left end. A box of exactly that height, used as a
   width, therefore spans the circle and nothing else; centring the text inside
   it lands on the circle's axis at any rail width.
   The negative margin cancels `.app-nav-head`'s 40px gap back to 8px, so the
   version reads as part of the lockup rather than as a row of its own. */
.app-nav-version {
  width: calc(100% * 1635 / 6251);
  margin-top: calc(var(--space-2) - var(--space-10));
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Collapsed, the ring IS the whole image, so full width centres on the same axis. */
.app-nav.is-collapsed .app-nav-version {
  width: 100%;
  font-size: 11px;
}

/* Collapsed, the script swaps the lockup for the ring-only mark — the circle IS
   the whole image there, so full width centres on the same axis. */
.app-nav.is-collapsed .app-nav-version {
  width: 100%;
  font-size: 11px;
}

.app-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--color-muted);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.2s ease;
  min-width: 0;
}

.nav-item:hover {
  background: var(--color-accent-bg);
  text-decoration: none;
}

.nav-item.active {
  background: var(--color-accent-bg);
  color: var(--color-accent-text);
  text-decoration: none;
}

.nav-item.active .nav-label {
  color: var(--color-accent-text);
}

.nav-item .icon {
  font-size: 21px;
  flex: none;
  align-self: center;
}

.app-nav-actions-label {
  color: var(--color-muted-2);
}


.app-nav-account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--color-line-2);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-width: 0;
}

.account-expand-arrow {
  display: inline-block;
  color: var(--color-muted-2);
  margin-left: auto;
  transition: color 0.2s ease, transform 0.2s ease;
}

.app-nav-account[aria-expanded="true"] .account-expand-arrow {
  color: var(--color-accent-text);
  transform: rotate(180deg);
}

.account-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.account-info {
  min-width: 0;
  flex: 1;
}

.account-name {
  color: var(--color-fg);
  display: block;
}

.account-popover {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 48px;
  width: max-content;
  min-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: var(--space-4) var(--space-4) 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom left;
  transition:
    opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.account-popover.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.popover-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-3) var(--space-4);
}

.popover-header h6,
.popover-header .popover-email {
  white-space: nowrap;
}

.popover-section {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
  padding: var(--space-4) var(--space-3);
}

.popover-section > h6,
.popover-section > .popover-section-label {
  margin: 0 0 var(--space-4);
}

.appearance-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface-2);
  border-radius: 999px;
  padding: var(--space-1);
  gap: var(--space-1);
}

.segment-btn {
  width: 100%;
  min-width: 0;
  text-align: center;
  color: var(--color-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  border: none;
  background: none;
  cursor: pointer;
}

.segment-btn.active {
  color: var(--color-fg);
  background: var(--color-surface);
}

.popover-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  border-radius: 9px;
  color: var(--color-fg);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.popover-item:hover {
  background: color-mix(in srgb, var(--color-fg) 4%, transparent);
}

.popover-item.signout {
  color: var(--color-danger-text);
}

.account-popover .segment-btn p,
.account-popover .popover-item p {
  color: inherit;
}

.popover-item svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

@media (max-width: 768px) {
  body { flex-direction: column; }
  .app-nav {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-5);
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .app-nav-links, .app-nav-actions { display: none;}
}

.app-nav.is-collapsed {
  width: 6vw;
  min-width: 84px;
  max-width: 100px;
  overflow: visible;
}

.app-nav.is-collapsed .app-nav-brand {
  justify-content: center;
  overflow: visible;
}

.app-nav.is-collapsed .app-nav-brand img {
  width: 51px;
  height: 51px;
  object-fit: contain;
}

.app-nav.is-collapsed .nav-item {
  justify-content: center;
  padding: var(--space-3) 0;
  width: 100%;
}

.app-nav.is-collapsed .nav-label,
.app-nav.is-collapsed .app-nav-actions-label,
.app-nav.is-collapsed .btn-primary-label,
.app-nav.is-collapsed .account-info,
.app-nav.is-collapsed .account-expand-arrow {
  display: none;
}

.app-nav.is-collapsed .btn-primary {
  width: 100%;
  max-width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  margin-inline: auto;
  flex-shrink: 0;
}

.app-nav.is-collapsed .app-nav-account {
  justify-content: center;
  padding: var(--space-3) 0;
}

.app-nav.is-collapsed .app-nav-brand,
.app-nav.is-collapsed .nav-item,
.app-nav.is-collapsed .btn-primary,
.app-nav.is-collapsed .app-nav-account {
  position: relative;
}

.app-nav.is-collapsed [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--color-fg);
  color: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s;
  z-index: 400;
}

.app-nav.is-collapsed [data-tooltip]:hover::after,
.app-nav.is-collapsed [data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.app-nav.is-collapsed .account-popover {
  left: calc(100% + 8px);
  right: auto;
  bottom: 20px;
  width: max-content;
  min-width: 240px;
  transform-origin: bottom left;
}

.app-nav.is-collapsed .account-popover:not(.open) {
  transform: translateX(-6px) scale(0.98);
}

.app-nav.is-collapsed .account-popover.open {
  transform: translateX(0) scale(1);
}