/* =========================================================================
 *  HOOFADE DESIGN SYSTEM
 *  Concept: "Ascend" — Ink + Mint, on Paper or in the dark.
 *
 *  Authored as a Principal-Designer-style system: tokens first, semantics
 *  second, components last. Touch the tokens to retheme the whole app.
 *
 *  Sections
 *  ────────
 *   1.  Font loading
 *   2.  Design tokens (color, type scale, spacing, radius, shadow, motion)
 *   3.  Reset + base
 *   4.  Typography classes (9 levels — display-1 → caption)
 *   5.  Layout — container, 12-column grid, section
 *   6.  Utilities — spacing, flex, grid, display, visibility
 *   7.  Components
 *       a.  Brand mark / wordmark
 *       b.  Top bar
 *       c.  Buttons
 *       d.  Form fields (text/select/checkbox)
 *       e.  Cards
 *       f.  Badges & chips
 *       g.  Tabs / segmented control
 *       h.  Empty / loading / skeleton
 *       i.  Code block / pre.content (trade messages)
 *       j.  Tables
 *       k.  Toast / inline notice
 *   8.  Theme toggle button
 *   9.  Reduced motion
 *  10.  Print
 * ========================================================================= */


/* ──────────────────────────────────────────────────────────────────────────
 *  1. Font loading — Sora (geometric sans, matches brand sheet) + JetBrains
 *     Mono for the tabular trade text where character alignment matters.
 * ──────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');


/* ──────────────────────────────────────────────────────────────────────────
 *  2. Design tokens
 *
 *  Color naming: SEMANTIC > literal. Component CSS only ever references
 *  the semantic layer (`--bg`, `--text`, `--accent`). The two `[data-theme]`
 *  blocks below map semantics to literals — that's the only place either
 *  the light/dark palette is mentioned.
 *
 *  Brand literals from the brand sheet:
 *    Ink   #0E2A30  — primary dark
 *    Mint  #1FD79B  — primary accent (gradient stop #2DE0A6 → #12B98C)
 *    Coral #FF7A59  — secondary accent (alerts, deltas)
 *    Paper #F5F2EC  — warm light-mode canvas
 * ──────────────────────────────────────────────────────────────────────── */
:root {
  /* —— Brand literals (do not reference directly in components) ————— */
  --ink:        #0E2A30;
  --ink-2:      #163740;
  --ink-3:      #1F4651;
  --mint:       #1FD79B;
  --mint-2:     #2DE0A6;
  --mint-3:     #12B98C;
  --mint-deep:  #0E8C6B;
  --coral:      #FF7A59;
  --coral-2:    #FF9577;
  --coral-deep: #E66143;
  --paper:      #F5F2EC;
  --paper-2:    #FAF7F1;
  --bone:       #F1ECE3;

  /* —— Type scale (9 Apple-HIG-inspired levels) ——————————————————— */
  --fs-display-1: 3.5rem;   /* 56px — hero headline                */
  --fs-display-2: 2.5rem;   /* 40px — page hero                    */
  --fs-title-1:   2rem;     /* 32px — page title                   */
  --fs-title-2:   1.5rem;   /* 24px — section title                */
  --fs-title-3:   1.25rem;  /* 20px — sub-section / large card     */
  --fs-headline:  1.0625rem;/* 17px — emphasised body              */
  --fs-body:      0.9375rem;/* 15px — base body                    */
  --fs-subhead:   0.8125rem;/* 13px — secondary text               */
  --fs-caption:   0.6875rem;/* 11px — overline / micro             */

  --lh-display-1: 1.05;
  --lh-display-2: 1.1;
  --lh-title-1:   1.15;
  --lh-title-2:   1.2;
  --lh-title-3:   1.25;
  --lh-headline:  1.4;
  --lh-body:      1.5;
  --lh-subhead:   1.45;
  --lh-caption:   1.4;

  --ls-display-1: -0.03em;
  --ls-display-2: -0.025em;
  --ls-title-1:   -0.02em;
  --ls-title-2:   -0.015em;
  --ls-title-3:   -0.01em;
  --ls-headline:  -0.005em;
  --ls-body:      0;
  --ls-subhead:   0;
  --ls-caption:   0.04em;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* —— Spacing scale (4px baseline, 9 steps) ———————————————————— */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* —— Radius ————————————————————————————————————————————————————— */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;   /* default control radius */
  --r-lg:   16px;   /* card */
  --r-xl:   24px;   /* large card / hero */
  --r-2xl:  32px;
  --r-full: 9999px; /* pill */

  /* —— Motion ————————————————————————————————————————————————————— */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant:  60ms;
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* —— Z scale ————————————————————————————————————————————————————— */
  --z-base:    1;
  --z-elevate: 10;
  --z-nav:     40;
  --z-popover: 60;
  --z-modal:   80;
  --z-toast:   100;

  /* —— Breakpoints (informational; queries below use raw values) ——— */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* —— Container ————————————————————————————————————————————————— */
  --container-max: 1200px;
  --container-pad: 24px;

  /* —— Font families ————————————————————————————————————————————— */
  --font-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ─── Dark theme (default) ─── */
:root,
:root[data-theme="dark"] {
  --bg:            #0a1014;
  --bg-elev:       #0E2A30;          /* Ink as the "raised" canvas      */
  --surface:       #131a20;
  --surface-2:     #1a2229;
  --surface-3:     #232c34;
  --surface-hover: #1f2830;

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-focus:  var(--mint);

  --text:           #e8eef0;
  --text-secondary: #9bb0b6;
  --text-tertiary:  #6b7e85;
  --text-quaternary:#4a5a60;
  --text-inverse:   var(--ink);

  --accent:         var(--mint);
  --accent-hover:   var(--mint-2);
  --accent-soft:    rgba(31, 215, 155, 0.12);
  --accent-strong:  var(--mint-3);
  --on-accent:      var(--ink);

  --success:        var(--mint);
  --success-soft:   rgba(31, 215, 155, 0.12);
  --danger:         #FF6B6B;
  --danger-soft:    rgba(255, 107, 107, 0.12);
  --warning:        var(--coral);
  --warning-soft:   rgba(255, 122, 89, 0.12);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(31, 215, 155, 0.25);

  --code-bg:        rgba(255, 255, 255, 0.04);
  --code-border:    rgba(255, 255, 255, 0.06);
  --selection-bg:   rgba(31, 215, 155, 0.28);

  color-scheme: dark;
}

/* ─── Light theme ─── */
:root[data-theme="light"] {
  --bg:            var(--paper);
  --bg-elev:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     var(--paper-2);
  --surface-3:     var(--bone);
  --surface-hover: #F8F4ED;

  --border:        rgba(14, 42, 48, 0.08);
  --border-strong: rgba(14, 42, 48, 0.16);
  --border-focus:  var(--mint-3);

  --text:           var(--ink);
  --text-secondary: #5A6B6F;
  --text-tertiary:  #8A989B;
  --text-quaternary:#B5BEBF;
  --text-inverse:   #FFFFFF;

  --accent:         var(--mint-3);   /* deeper mint for contrast on light */
  --accent-hover:   var(--mint-deep);
  --accent-soft:    rgba(18, 185, 140, 0.12);
  --accent-strong:  var(--mint-deep);
  --on-accent:      #FFFFFF;

  --success:        var(--mint-3);
  --success-soft:   rgba(18, 185, 140, 0.12);
  --danger:         #D03E3E;
  --danger-soft:    rgba(208, 62, 62, 0.10);
  --warning:        var(--coral-deep);
  --warning-soft:   rgba(230, 97, 67, 0.10);

  --shadow-1: 0 1px 2px rgba(14, 42, 48, 0.06);
  --shadow-2: 0 4px 16px rgba(14, 42, 48, 0.08);
  --shadow-3: 0 16px 40px rgba(14, 42, 48, 0.10);
  --shadow-focus: 0 0 0 3px rgba(18, 185, 140, 0.25);

  --code-bg:        rgba(14, 42, 48, 0.04);
  --code-border:    rgba(14, 42, 48, 0.06);
  --selection-bg:   rgba(18, 185, 140, 0.22);

  color-scheme: light;
}

/* Fallback for users with system preference set + no explicit toggle */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:            var(--paper);
    --bg-elev:       #FFFFFF;
    --surface:       #FFFFFF;
    --surface-2:     var(--paper-2);
    --surface-3:     var(--bone);
    --surface-hover: #F8F4ED;
    --border:        rgba(14, 42, 48, 0.08);
    --border-strong: rgba(14, 42, 48, 0.16);
    --border-focus:  var(--mint-3);
    --text:          var(--ink);
    --text-secondary:#5A6B6F;
    --text-tertiary: #8A989B;
    --text-quaternary:#B5BEBF;
    --text-inverse:  #FFFFFF;
    --accent:        var(--mint-3);
    --accent-hover:  var(--mint-deep);
    --accent-soft:   rgba(18, 185, 140, 0.12);
    --accent-strong: var(--mint-deep);
    --on-accent:     #FFFFFF;
    --success:       var(--mint-3);
    --success-soft:  rgba(18, 185, 140, 0.12);
    --danger:        #D03E3E;
    --danger-soft:   rgba(208, 62, 62, 0.10);
    --shadow-1: 0 1px 2px rgba(14, 42, 48, 0.06);
    --shadow-2: 0 4px 16px rgba(14, 42, 48, 0.08);
    --shadow-3: 0 16px 40px rgba(14, 42, 48, 0.10);
    --shadow-focus: 0 0 0 3px rgba(18, 185, 140, 0.25);
    --code-bg:       rgba(14, 42, 48, 0.04);
    --code-border:   rgba(14, 42, 48, 0.06);
    --selection-bg:  rgba(18, 185, 140, 0.22);
    color-scheme: light;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
 *  3. Reset + base
 * ──────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--surface-3) transparent;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt", "tnum";
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}
::selection { background: var(--selection-bg); color: var(--text); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; height: 1px; background: var(--border); margin: var(--s-5) 0; }

[hidden] { display: none !important; }


/* ──────────────────────────────────────────────────────────────────────────
 *  4. Typography classes
 *  Use semantic HTML (<h1>, <h2>, etc.) for structure; these classes set
 *  the SIZE — they're decoupled from heading levels by design.
 * ──────────────────────────────────────────────────────────────────────── */
.text-display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display-1); letter-spacing: var(--ls-display-1); font-weight: var(--fw-bold); }
.text-display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display-2); letter-spacing: var(--ls-display-2); font-weight: var(--fw-bold); }
.text-title-1   { font-size: var(--fs-title-1);   line-height: var(--lh-title-1);   letter-spacing: var(--ls-title-1);   font-weight: var(--fw-semibold); }
.text-title-2   { font-size: var(--fs-title-2);   line-height: var(--lh-title-2);   letter-spacing: var(--ls-title-2);   font-weight: var(--fw-semibold); }
.text-title-3   { font-size: var(--fs-title-3);   line-height: var(--lh-title-3);   letter-spacing: var(--ls-title-3);   font-weight: var(--fw-semibold); }
.text-headline  { font-size: var(--fs-headline);  line-height: var(--lh-headline);  letter-spacing: var(--ls-headline);  font-weight: var(--fw-semibold); }
.text-body      { font-size: var(--fs-body);      line-height: var(--lh-body);      letter-spacing: var(--ls-body);      font-weight: var(--fw-regular); }
.text-subhead   { font-size: var(--fs-subhead);   line-height: var(--lh-subhead);   letter-spacing: var(--ls-subhead);   font-weight: var(--fw-medium); }
.text-caption   { font-size: var(--fs-caption);   line-height: var(--lh-caption);   letter-spacing: var(--ls-caption);   font-weight: var(--fw-medium); text-transform: uppercase; }

.text-secondary  { color: var(--text-secondary); }
.text-tertiary   { color: var(--text-tertiary); }
.text-quaternary { color: var(--text-quaternary); }
.text-accent     { color: var(--accent); }
.text-success    { color: var(--success); }
.text-danger     { color: var(--danger); }
.text-warning    { color: var(--warning); }
.text-mono       { font-family: var(--font-mono); }
.text-tabular    { font-variant-numeric: tabular-nums; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Hero gradient text — for landing only. Mint→deep-mint over Ink/Paper. */
.text-gradient-mint {
  background: linear-gradient(135deg, var(--mint-2) 0%, var(--mint-3) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Responsive type tweaks. Display sizes scale down on small screens. */
@media (max-width: 768px) {
  :root {
    --fs-display-1: 2.5rem;
    --fs-display-2: 2rem;
    --fs-title-1:   1.625rem;
    --fs-title-2:   1.25rem;
    --fs-title-3:   1.125rem;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
 *  5. Layout — container, 12-column grid, section
 * ──────────────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-narrow { max-width: 760px; }
.container-wide   { max-width: 1440px; }

.section {
  padding-block: var(--s-8);
}
@media (max-width: 768px) {
  .section { padding-block: var(--s-7); }
}

/* 12-column grid. Mobile-first: every .col-N goes full-width below md,
   then snaps to its requested span at md+ unless a -sm- variant is used. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5);
}
.grid-tight { gap: var(--s-3); }
.grid-loose { gap: var(--s-7); }

/* Default: all cols full-width on phones. */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .col-md-1  { grid-column: span 1;  } .col-md-2  { grid-column: span 2;  }
  .col-md-3  { grid-column: span 3;  } .col-md-4  { grid-column: span 4;  }
  .col-md-5  { grid-column: span 5;  } .col-md-6  { grid-column: span 6;  }
  .col-md-7  { grid-column: span 7;  } .col-md-8  { grid-column: span 8;  }
  .col-md-9  { grid-column: span 9;  } .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; } .col-md-12 { grid-column: span 12; }
}
@media (min-width: 1024px) {
  .col-lg-1  { grid-column: span 1;  } .col-lg-2  { grid-column: span 2;  }
  .col-lg-3  { grid-column: span 3;  } .col-lg-4  { grid-column: span 4;  }
  .col-lg-5  { grid-column: span 5;  } .col-lg-6  { grid-column: span 6;  }
  .col-lg-7  { grid-column: span 7;  } .col-lg-8  { grid-column: span 8;  }
  .col-lg-9  { grid-column: span 9;  } .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; } .col-lg-12 { grid-column: span 12; }
}


/* ──────────────────────────────────────────────────────────────────────────
 *  6. Utilities
 * ──────────────────────────────────────────────────────────────────────── */
/* Spacing — `m` = margin, `p` = padding; x/y for axes; values map to scale. */
.m-0 { margin: 0; }       .p-0 { padding: 0; }
.m-1 { margin: var(--s-1); } .p-1 { padding: var(--s-1); }
.m-2 { margin: var(--s-2); } .p-2 { padding: var(--s-2); }
.m-3 { margin: var(--s-3); } .p-3 { padding: var(--s-3); }
.m-4 { margin: var(--s-4); } .p-4 { padding: var(--s-4); }
.m-5 { margin: var(--s-5); } .p-5 { padding: var(--s-5); }
.m-6 { margin: var(--s-6); } .p-6 { padding: var(--s-6); }
.m-7 { margin: var(--s-7); } .p-7 { padding: var(--s-7); }

.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); } .mb-8 { margin-bottom: var(--s-8); }
.mx-auto { margin-inline: auto; }

.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.gap-7 { gap: var(--s-7); }

/* Flex utilities */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-baseline{ align-items: baseline; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center{ justify-content: center; }
.justify-end   { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.flex-1        { flex: 1 1 0%; }
.flex-auto     { flex: 1 1 auto; }
.flex-none     { flex: none; }

/* Display utilities — `!important` so they reliably override component
   `display:` declarations regardless of source order. .hidden in
   particular has to beat `.loading {display:flex}`, `.btn {display:
   inline-flex}`, and friends when JS toggles visibility. */
.block        { display: block !important; }
.inline       { display: inline !important; }
.inline-block { display: inline-block !important; }
.hidden       { display: none !important; }
.grid-d       { display: grid !important; }

@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
}

.w-full     { width: 100%; }
.h-full     { height: 100%; }
.min-h-screen { min-height: 100vh; }

.rounded-sm   { border-radius: var(--r-sm); }
.rounded-md   { border-radius: var(--r-md); }
.rounded-lg   { border-radius: var(--r-lg); }
.rounded-xl   { border-radius: var(--r-xl); }
.rounded-full { border-radius: var(--r-full); }


/* ──────────────────────────────────────────────────────────────────────────
 *  7. Components
 * ──────────────────────────────────────────────────────────────────────── */

/* ── 7a. Brand mark / wordmark ──────────────────────────────────────── */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  font-size: var(--fs-headline);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.brand-link:hover { color: var(--text); opacity: 0.85; }
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--mint-2), var(--mint-3));
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-1);
}
.brand-mark svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-mark-lg { width: 40px; height: 40px; border-radius: var(--r-md); }
.brand-mark-lg svg { width: 24px; height: 24px; }

/* ── 7b. Top bar ─────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--s-3) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.topbar-nav a {
  color: var(--text-secondary);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-medium);
}
.topbar-nav a:hover { color: var(--text); }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ── 7c. Buttons ────────────────────────────────────────────────────── */
.btn {
  --btn-bg:      transparent;
  --btn-fg:      var(--text);
  --btn-border:  var(--border);
  --btn-bg-hov:  var(--surface-hover);
  --btn-pad-y:   10px;
  --btn-pad-x:   16px;
  --btn-fs:      var(--fs-body);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover   { background: var(--btn-bg-hov); }
.btn:active  { transform: translateY(1px) scale(0.99); }
.btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* aria-disabled on anchors (no native :disabled support). Keep
   pointer-events alive so the browser still shows the tooltip on
   hover — the JS click handler blocks navigation. */
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* — Primary (mint, the only "go" colour) */
.btn-primary {
  --btn-bg:     var(--accent);
  --btn-fg:     var(--on-accent);
  --btn-border: var(--accent);
  --btn-bg-hov: var(--accent-hover);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, var(--shadow-1);
}
.btn-primary:hover { color: var(--on-accent); border-color: var(--accent-hover); }

/* — Secondary (outlined, neutral) */
.btn-secondary {
  --btn-bg:     var(--surface);
  --btn-fg:     var(--text);
  --btn-border: var(--border-strong);
  --btn-bg-hov: var(--surface-2);
}

/* — Ghost (no chrome until hover) */
.btn-ghost {
  --btn-border: transparent;
  --btn-fg:     var(--text-secondary);
  --btn-bg-hov: var(--surface-2);
}
.btn-ghost:hover { color: var(--text); }

/* — Danger */
.btn-danger {
  --btn-bg:     var(--danger);
  --btn-fg:     #fff;
  --btn-border: var(--danger);
  --btn-bg-hov: color-mix(in srgb, var(--danger) 88%, black);
}

/* — Sizes */
.btn-sm { --btn-pad-y: 6px;  --btn-pad-x: 12px; --btn-fs: var(--fs-subhead); border-radius: var(--r-sm); }
.btn-lg { --btn-pad-y: 14px; --btn-pad-x: 22px; --btn-fs: var(--fs-headline); }
.btn-block { width: 100%; }
.btn-icon { padding: var(--btn-pad-y); aspect-ratio: 1; }

/* — Icon-only round, useful for theme toggle */
.btn-round { border-radius: var(--r-full); }

/* ── 7d. Form fields ────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: var(--fs-subhead);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.field-help { font-size: var(--fs-subhead); color: var(--text-tertiary); }
.input, .select, .textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--text)); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* — Perf-chart opt-in toggle. Lives above the chart on /home.
   Hidden when the admin global gate is off. Compact inline checkbox
   so the row doesn't draw attention to itself when off. */
.perf-chart-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.perf-chart-toggle input[type="checkbox"] {
  margin: 0;
}

/* — Performance chart (perf_chart.js). Sits above the portfolio
   card on /home and /<handle>. The SVG is responsive via
   preserveAspectRatio=none + a fluid wrapper. */
.perf-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.perf-chart__controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.perf-chart__chips {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.perf-chart__chip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 4px 10px;
  font: inherit;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.perf-chart__chip:last-child { border-right: 0; }
.perf-chart__chip:hover { background: var(--surface-hover, var(--surface)); color: var(--text); }
.perf-chart__chip.is-active {
  background: var(--accent-soft);
  color: var(--text);
}
.perf-chart__toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  padding: 3px 10px;
  font: inherit;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  cursor: pointer;
  margin-left: auto;
}
.perf-chart__toggle:hover { color: var(--text); border-color: var(--border-strong); }
.perf-chart__svg-wrap {
  position: relative;
  width: 100%;
  height: 220px;
}
.perf-chart__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.perf-chart__grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.perf-chart__baseline {
  stroke: var(--text-tertiary);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.5;
}
.perf-chart__ytick {
  fill: var(--text-tertiary);
  font-size: 11px;
  font-family: inherit;
}
.perf-chart__xtick {
  fill: var(--text-tertiary);
  font-size: 11px;
  font-family: inherit;
}
.perf-chart__xtick-line {
  stroke: var(--border);
  stroke-width: 1;
}
.perf-chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.perf-chart__line.is-up   { stroke: #2ea043; }
.perf-chart__line.is-down { stroke: #f85149; }
.perf-chart__tip-line {
  stroke: var(--text-tertiary);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  pointer-events: none;
  transition: opacity .12s;
}
.perf-chart__tip-dot {
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: 2;
  pointer-events: none;
  transition: opacity .12s;
}
.perf-chart__tip {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: var(--fs-footnote);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  z-index: 2;
}
.perf-chart__tip-date  { color: var(--text-tertiary); }
.perf-chart__tip-main  { color: var(--text); font-weight: var(--fw-semibold); }
.perf-chart__tip-sub   { color: var(--text-tertiary); font-size: 11px; }
.perf-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--fs-footnote);
  color: var(--text-secondary);
  min-height: 20px;
}
.perf-chart__range  { color: var(--text-tertiary); }
.perf-chart__delta  { font-weight: var(--fw-semibold); }
.perf-chart__delta.is-up   { color: #2ea043; }
.perf-chart__delta.is-down { color: #f85149; }
.perf-chart__abs    { color: var(--text); font-weight: var(--fw-medium); }
.perf-chart__from   { color: var(--text-tertiary); }
/* Currency footnote — visible only when the portfolio holds at
   least one non-base currency. Sits on its own line below the
   legend so the primary delta row stays scannable. */
.perf-chart__currency-note {
  width: 100%;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: italic;
}

/* — Connected-brokers list (settings_account.html). */
.connections-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.connection-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* — Manual-fetch list (same shape as connection rows, but with a
   per-row results line and two action buttons). */
.manual-fetch-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manual-fetch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  align-items: center;
}
.manual-fetch-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}
.manual-fetch-actions {
  display: flex;
  gap: 8px;
  grid-column: 2;
  grid-row: 1;
}
.manual-fetch-result {
  grid-column: 1 / span 2;
  grid-row: 2;
  min-height: 18px;
}

/* — Checkbox + switch */
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--fs-subhead);
  cursor: pointer;
  user-select: none;
}
.checkbox-row:hover { color: var(--text); }
.checkbox-row input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.checkbox-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox-row input[type="checkbox"]:checked::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg) translate(1px, -1px);
}

/* ── 7e. Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card-elevated { box-shadow: var(--shadow-2); border-color: transparent; }
.card-interactive { cursor: pointer; }
.card-interactive:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.card-tight { padding: var(--s-4); }
.card-loose { padding: var(--s-7); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.card-title {
  font-size: var(--fs-title-3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title-3);
  line-height: var(--lh-title-3);
}
.card-subtitle {
  font-size: var(--fs-subhead);
  color: var(--text-secondary);
}

/* ── 7f. Badges & chips ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--text-secondary);
  border-radius: var(--r-full);
}
.badge-accent  { background: var(--accent-soft);  color: var(--accent); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-medium);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── 7g. Tabs / segmented control ────────────────────────────────── */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  gap: 2px;
}
.segmented button {
  padding: 6px 14px;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-md) - 4px);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.segmented button:hover { color: var(--text); }
.segmented button.active,
.segmented button[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

/* ── 7h. Empty / loading / skeleton ──────────────────────────────── */
.empty {
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}
.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: var(--s-5) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── 7i. Code block / pre.content (trade messages) ────────────────── */
pre.content,
.code-block {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  overflow-x: auto;
  white-space: pre;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "calt";
  -webkit-overflow-scrolling: touch;
}
/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 2px 6px;
  background: var(--code-bg);
  border-radius: var(--r-xs);
}

/* ── 7j. Tables ───────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-subhead);
}
.table th,
.table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: var(--surface-2);
  text-transform: uppercase;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
}
.table tr:last-child td { border-bottom: 0; }
.table-hover tr:hover td { background: var(--surface-hover); }

/* ── 7k. Toast / inline notice ────────────────────────────────────── */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-subhead);
}
.notice-success { border-left-color: var(--success); background: var(--success-soft); }
.notice-danger  { border-left-color: var(--danger);  background: var(--danger-soft); }
.notice-warning { border-left-color: var(--warning); background: var(--warning-soft); }


/* ──────────────────────────────────────────────────────────────────────────
 *  8. Theme toggle button
 *  Hidden in HTML by default; topbar.js shows + wires it.
 * ──────────────────────────────────────────────────────────────────────── */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.theme-toggle svg { width: 16px; height: 16px; }
/* Show the sun-or-moon SVG matching the active theme. */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }


/* ──────────────────────────────────────────────────────────────────────────
 *  9. Reduced motion — respect users who opt out.
 * ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
 *  10. Print
 * ──────────────────────────────────────────────────────────────────────── */
@media print {
  body { background: white; color: black; }
  .topbar, .btn, .theme-toggle { display: none !important; }
}


/* =========================================================================
 *  PAGE-SPECIFIC ADJUSTMENTS
 *  Kept at the bottom so the component layer above is the source of truth.
 *  Anything below is a tweak for a particular surface, not a new component.
 * ========================================================================= */

/* ── /home — activity board ──────────────────────────────────────────── */
.home-header {
  padding-block: var(--s-6) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.home-header__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.home-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* Granularity segmented control — styled identically to .segmented */
.granularity-buttons {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  gap: 2px;
}
.granularity-btn {
  padding: 6px 14px;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-md) - 4px);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.granularity-btn:hover { color: var(--text); }
.granularity-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

/* Time-preset mini-buttons live inside .time-presets */
.time-presets {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.time-preset {
  padding: 4px 10px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-md) - 4px);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.time-preset:hover { color: var(--text); background: var(--surface); }
.time-preset.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.time-arrow { color: var(--text-quaternary); font-size: var(--fs-subhead); padding: 0 4px; }
.time-range { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.symbol-input { text-transform: uppercase; width: 9rem; }
.time-input   { width: 9.5rem; }
.message-select { min-width: 9rem; }

/* Symbol multi-select — `<details>` wrapper with chip-style summary,
   a typeahead input inside, and a filterable option list below. */
.symbol-dropdown {
  position: relative;
  font-size: var(--fs-subhead);
}
.symbol-summary {
  list-style: none;
  cursor: text;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 14rem;
  max-width: 28rem;
}
.symbol-summary::-webkit-details-marker { display: none; }
.symbol-dropdown[open] .symbol-summary {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.symbol-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.symbol-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px 1px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.symbol-chip__remove {
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
}
.symbol-chip__remove:hover { opacity: 1; }
.symbol-typeahead {
  flex: 1 1 4rem;
  min-width: 4rem;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-transform: uppercase;
  padding: 4px 0;
}
.symbol-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-popover);
  min-width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.symbol-option {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-subhead);
}
.symbol-option:hover, .symbol-option[aria-selected="true"] { background: var(--surface-2); }
.symbol-option[data-active="true"] { color: var(--accent); }
.symbol-option__empty { padding: 8px 10px; color: var(--text-tertiary); }

/* Account dropdown — <details> wrapper. */
.account-dropdown {
  position: relative;
  font-size: var(--fs-subhead);
}
.account-summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  font-weight: var(--fw-medium);
  user-select: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.account-summary::-webkit-details-marker { display: none; }
.account-dropdown[open] .account-summary { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.account-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-popover);
  min-width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-list .checkbox-row { padding: 6px 8px; border-radius: var(--r-xs); width: 100%; }
.account-list .checkbox-row:hover { background: var(--surface-2); }
.account-group-header {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--s-3) 8px var(--s-1);
}

/* Share button — slightly emphasised secondary */
.share-filter-btn,
#make-public-btn,
#share-filter-btn {
  /* Composes with .btn .btn-secondary in markup — kept here for back-compat
     against old class-only references. */
}

/* Messages feed container */
.messages-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

/* Message cards rendered by app.js. The outer card uses our system
   .card visuals; .message-card adds the share-button pinning + the
   gap-marker variant. */
.message-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out);
}
.message-card:hover { border-color: var(--border-strong); }
/* Stage 3 quote-freshness footer. Sits under the live portfolio
   card's content; intentionally muted so it reads as metadata, not
   primary content. */
.message-card .prices-as-of {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--border);
  color: var(--text-tertiary);
  font-size: var(--fs-footnote);
  letter-spacing: 0.02em;
}
.message-card.in-progress {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 40%), var(--surface);
}
.message-card .message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--fs-subhead);
  color: var(--text-secondary);
}
.message-card pre.content {
  margin: 0;
  white-space: pre-wrap;
}

/* app.js's createMessageElement renders the body into
   `<div class="message-content">` and pre-processes the text via
   formatContent() — newlines become <br>, $TICKER becomes <strong>,
   BUY/SELL becomes <span class="trade-side">. Default HTML collapses
   consecutive spaces, so the column alignment in the formatter output
   ($ABR  +  0.33% etc.) was getting destroyed. `pre-wrap` preserves
   the alignment spaces; <br> still drives the actual line breaks. */
.message-content {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "calt";
  overflow-wrap: anywhere;
}
.message-content strong {
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.message-content .trade-side { font-weight: var(--fw-semibold); }
/* Colour BUY green, SELL red — only when standalone (formatContent
   wraps the literal words BUY/SELL). */
.message-content .trade-side:is(*:where(*)) { /* no-op anchor for spec */ }
.message-content .trade-side[data-side="BUY"],
.message-content .trade-side[data-side="SELL"] { /* placeholders if app.js sets data-side later */ }

/* Header inside a message card */
.message-card .message-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  background: var(--surface-3);
  color: var(--text-secondary);
  border-radius: var(--r-full);
}
.message-card .message-type.trade { background: var(--accent-soft); color: var(--accent); }
.message-card .message-type.portfolio { background: var(--accent-soft); color: var(--accent); }
.message-card .message-timestamp {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.message-card .status-badge {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--warning);
  background: var(--warning-soft);
  padding: 2px 8px;
  border-radius: var(--r-full);
}

/* "Share" link tucked into the message-card header */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--dur-fast) var(--ease-out);
}
.share-btn:hover {
  color: var(--accent);
  border-color: var(--border);
  background: var(--accent-soft);
}

/* Gap-marker variant — different visual treatment so data-quality
   callouts don't blend with real trade cards. */
.message-card.gap-marker {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  border-left: 3px solid var(--warning);
}
.gap-toggle {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: var(--fs-subhead);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Portfolio card (consolidated current portfolio at the top of /home) */
.portfolio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}

/* Filter status strip — chips for active filters with a Clear-all link. */
.filter-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  font-size: var(--fs-subhead);
}
.filter-status[hidden] { display: none; }
.filter-status-label {
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-full);
  font-weight: var(--fw-medium);
}
.filter-chip-x {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.filter-chip-x:hover { opacity: 1; }
.filter-clear-all {
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-subhead);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.filter-clear-all:hover { color: var(--text); }

/* Account selector list rows (inside the .account-list popover). */
.account-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-size: var(--fs-subhead);
  color: var(--text);
}
.account-row:hover { background: var(--surface-2); }
.account-row input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.account-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.account-row input[type="checkbox"]:checked::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg) translate(1px, -1px);
}
.account-number { font-family: var(--font-mono); color: var(--text); }
.account-owner  { color: var(--text-secondary); font-size: var(--fs-caption); }
.account-owner.placeholder { color: var(--text-quaternary); font-style: italic; }
.account-type {
  color: var(--accent);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}
.account-type.placeholder { color: var(--text-quaternary); font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; }
.account-group { padding-top: var(--s-2); }
.account-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) 8px var(--s-1);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--fw-semibold);
}
.account-group-toggle {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-xs);
}
.account-group-toggle:hover { background: var(--accent-soft); }

/* "New messages" floating pill */
.new-messages-button {
  position: fixed;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  z-index: var(--z-toast);
}

/* Load-older feed footer */
.feed-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5) 0;
}
.load-older-btn {
  padding: 10px 18px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.load-older-btn:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }
.feed-end-marker { color: var(--text-tertiary); font-size: var(--fs-subhead); }

.loading { display: flex; justify-content: center; padding: var(--s-5); }

/* Filter container (legacy class kept; same visuals as .home-filters) */
.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}


/* ── Share / public profile page ────────────────────────────────────── */
.share-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-6) var(--container-pad) var(--s-9);
}
/* The share.html JS uses bare `.meta`, `.avatar`, `.who`, `.kind` for the
   user-meta strip; we style them globally (not nested) so the existing
   render code doesn't need to change. */
.meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-4);
  margin-bottom: var(--s-2);
}
.meta .avatar,
.share-meta .avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--mint-2), var(--mint-3));
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: var(--fw-bold);
  font-size: var(--fs-headline);
  flex-shrink: 0;
}
.meta .who,
.share-meta .who { font-size: var(--fs-title-3); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: var(--ls-title-3); line-height: var(--lh-title-3); }
.meta .sub,
.share-meta .sub { font-size: var(--fs-subhead); color: var(--text-secondary); margin-top: 2px; }
.meta .kind,
.share-meta .kind {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-full);
  margin-left: 6px;
}
/* Share-page card-stack spacing. The JS creates a stream of `.card`s;
   stack them with consistent rhythm without each card needing extra
   margin in its own definition. */
.share-page .card { margin-bottom: var(--s-4); }
.share-page .card:last-child { margin-bottom: 0; }
.share-page .card h2 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-title-3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title-3);
  line-height: var(--lh-title-3);
}
/* Action row at bottom of share page (Follow / Open in X / etc.) */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-top: var(--s-4);
}


/* ── Landing-page specifics ─────────────────────────────────────────── */
.hero {
  padding-block: var(--s-9) var(--s-8);
  text-align: center;
}
.hero h1 {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display-1);
  letter-spacing: var(--ls-display-1);
  font-weight: var(--fw-extrabold);
  margin-bottom: var(--s-4);
}
.hero p.lede {
  font-size: var(--fs-headline);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--s-6);
}
.hero-cta {
  display: inline-flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5);
}
.feature-card { grid-column: span 12; }
@media (min-width: 768px) { .feature-card { grid-column: span 4; } }
.feature-card .feature-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-3);
}

.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s-6);
  color: var(--text-tertiary);
  font-size: var(--fs-subhead);
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}


/* ── Auth pages (login / onboard) ───────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-5);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}


/* ── Misc legacy class fallbacks (keep existing JS selectors working) ── */
.message-select {
  padding: 8px 12px;
  font-family: inherit;
  font-size: var(--fs-subhead);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}
.sizes-toggle { /* legacy alias */ }