/* ─────────────────────────────────────────────────────────────────────────────
   Zen Core — "Graphite & Ember"
   Scoped entirely to `body.theme-zen`. Shared by every dashboard page.

   Every rule here is prefixed with `body.theme-zen`, which outranks both
   main.css (`body .card`) and any per-page inline <style> block on
   specificity alone — so load order never matters and removing the class
   from <body> reverts the page completely.

   What belongs here: tokens, chrome, and components that appear on more than
   one page. Page-specific components live in their own layer (see
   zen-dashboard.css). If a selector exists on exactly one page, it does not
   belong in this file.
   ──────────────────────────────────────────────────────────────────────────── */

body.theme-zen {
  /* Neutral graphite — a true achromatic near-black, no green cast. The ground
     carries no hue at all, so the accent is the only warm thing on the page and
     reads warmer for it. */
  --bg:        #121212;
  --surface:   #171717;
  --surface2:  #1F1F1F;
  /* Hairlines, not rules. The tiles separate by surface and air; the border is
     only there to catch the edge. */
  --border:    rgba(255,255,255,.055);
  --border-lit: rgba(255,255,255,.11);
  --text:      #F2F2F2;
  --muted:     #999999;

  /* Amber — brass at full chroma. Same hue as the brass it replaces (36°); only
     the saturation moves (51% → 96%). This is deliberately NOT the orange that
     was rejected twice before (#E4703C, #C4603D), which sat at 16–19° — a
     different hue, not a different intensity.
     4.95:1 on --bg = WCAG AA for normal text (brass was 6.06:1). Body copy must
     not use --accent; it's chrome, selection, and fills only. */
  --accent:    #BA7308;
  --accent-dim: rgba(186,115,8,.13);
  --on-accent: #17120A;  /* text on top of --accent — 4.92:1 */
  --green:     #4FA97F;  /* jade — gains */
  --green-dim: rgba(79,169,127,.13);
  --red:       #D65A4E;
  --red-dim:   rgba(214,90,78,.13);
  --yellow:    #D9A441;

  /* Crisp, not pill-soft. Big radii on every surface is a template tell. */
  --radius:    6px;
  --radius-sm: 4px;

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Archivo', 'Outfit', sans-serif;
}

/* ── Page ground ───────────────────────────────────────────────────────────── */
/* Flat. Kills any amber radial wash a page's inline block paints on. Ambient
   colour blooms behind a dashboard are decoration that dims the data sitting
   on top. */
body.theme-zen {
  background-color: var(--bg);
  background-image: none;
}

/* ── Chrome: header + sidebar ──────────────────────────────────────────────── */
body.theme-zen header {
  background: rgba(18,18,18,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  /* main.css lays a 1px old-amber line along this edge (`0 1px 0
     rgba(200,133,58,.18)`) on top of the hairline above, so the header read as
     separated by an orange rule. The border is the separator; the only shadow
     kept is the dark one, which earns its place under a translucent fixed bar
     that scrolling content passes beneath. */
  box-shadow: 0 4px 28px rgba(0,0,0,.55);
}
body.theme-zen .nav-link.active { border-bottom-color: var(--accent); }

body.theme-zen .sidebar {
  background: var(--surface);
  box-shadow: none;
  border-right: 1px solid var(--border);
}
body.theme-zen .sidebar-link { border-radius: var(--radius-sm); }
body.theme-zen .sidebar-link:hover { background: rgba(255,255,255,.035); }
body.theme-zen .sidebar-link.active {
  color: var(--accent);
  background: var(--accent-dim);
}
body.theme-zen .sidebar-section-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
}
/* Trial block reads as sidebar chrome, so it takes the same mono eyebrow as the
   section labels; the rail numeral is mono too, where digits belong. */
body.theme-zen .sidebar-plan-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
}
body.theme-zen .sidebar-plan-rail { font-family: var(--mono); }
body.theme-zen .nav-search-item.active { background: var(--accent-dim); }
body.theme-zen .user-avatar-btn:hover { border-color: var(--accent); background: var(--accent-dim); box-shadow: none; }
body.theme-zen .user-dropdown-item:hover { background: var(--accent-dim); color: var(--accent); }
body.theme-zen .user-dropdown-cur-toggle:hover { background: rgba(186,115,8,.06); }

/* ── Page header ───────────────────────────────────────────────────────────── */
body.theme-zen .page-title {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.035em;
  font-size: 30px;
  color: var(--text);
}
body.theme-zen .page-subtitle {
  color: var(--muted);
  font-size: 13px;
}

/* ── The tile: one shared bento surface ───────────────────────────────────── */
body.theme-zen .chart-card,
body.theme-zen .table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}

/* Headings sit on the display face, not Lora. */
body.theme-zen .chart-card h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.015em;
  color: var(--text);
}

/* ── Filter pills ──────────────────────────────────────────────────────────── */
body.theme-zen .filter-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 5px 9px;
  transition: color .15s, background .15s;
}
body.theme-zen .filter-btn:hover { color: var(--text); background: rgba(255,255,255,.05); border-color: transparent; }
body.theme-zen .filter-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: transparent;
  font-weight: 600;
}

/* ── Data tables ───────────────────────────────────────────────────────────── */
body.theme-zen .table-card thead th,
body.theme-zen .chart-card thead th {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
body.theme-zen .table-card tbody td,
body.theme-zen .chart-card tbody td {
  font-variant-numeric: tabular-nums;
}
body.theme-zen .table-card tbody tr:hover,
body.theme-zen .chart-card tbody tr:hover { background: rgba(255,255,255,.022); }

/* ── Shared analytics components ──────────────────────────────────────────────
   Income, Exposure & Overlap, and Rebalancing all render off the same tab
   markup in analytics.js (income.html, exposure.html, rebalancing.html each
   carry a copy of the tab-income/tab-concentration/tab-rebalancing panels —
   only one is visible per page). These rules style that shared markup once,
   rather than tripling them across three page layers. */
body.theme-zen .section-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 20px;
  padding: 2px 9px;
}
body.theme-zen .filter-group {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
body.theme-zen .filter-group .filter-btn { padding: 5px 10px; }

body.theme-zen .bar-inner { opacity: .85; }

body.theme-zen .exp-label,
body.theme-zen .conc-label,
body.theme-zen .sector-group-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
body.theme-zen .conc-label,
body.theme-zen .sector-group-name { color: var(--text); font-weight: 500; }
body.theme-zen .exp-bar-wrap,
body.theme-zen .conc-bar-wrap,
body.theme-zen .sector-bar-wrap { background: var(--surface2); }
body.theme-zen .exp-pct,
body.theme-zen .conc-pct,
body.theme-zen .sector-group-pct {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
body.theme-zen .sector-group-pct { color: var(--accent); font-weight: 600; }
body.theme-zen .sector-ticker-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
}
body.theme-zen .sector-ticker-name { color: var(--text); }

/* ── Stat strip (page-summary tiles: exposure + rebalancing) ─────────────────
   DOM-derived from content analytics.js already renders — read once the shared
   load() flips document.body.style.visibility to 'visible'. */
body.theme-zen .stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .18s;
}
body.theme-zen .stat-tile:hover { border-color: var(--border-lit); }
body.theme-zen .stat-tile-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
body.theme-zen .stat-tile-value {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.2;
}
body.theme-zen .stat-tile-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 6px;
}
@media (max-width: 640px) {
  body.theme-zen .stat-tile-value { font-size: 16px; }
}

/* Ticker symbol reads as text, not a link — a column of forty ember links is
   noise, so it only lights on hover. Shared by the dashboard's holdings table
   and the watchlist, hence living here rather than in one page's layer. */
body.theme-zen .ticker-cell a {
  color: var(--text);
  font-weight: 600;
  transition: color .12s;
}
body.theme-zen .ticker-cell a:hover { color: var(--accent); }

/* ── Column-picker (dashboard + watchlist) ─────────────────────────────────── */
/* Same component, two markups: the dashboard hooks it by class, the watchlist by
   id. Both are listed here rather than restated in a page layer — it's one
   component whose markup drifted, not two. The id selectors also have to be
   here to outrank the watchlist's own `#col-toggle-btn` rule, which no number
   of classes can beat. */
body.theme-zen .col-toggle-btn,
body.theme-zen #col-toggle-btn {
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 11px;
}
body.theme-zen .col-panel,
body.theme-zen #col-panel { border-radius: 10px; }
body.theme-zen .col-check input[type="checkbox"] { accent-color: var(--accent); }

/* ── Status pill ───────────────────────────────────────────────────────────── */
body.theme-zen #status.loading { background: var(--accent-dim); color: var(--accent); }
body.theme-zen #status.error { background: var(--red-dim); color: var(--red); }

/* ── Empty / onboarding states ─────────────────────────────────────────────── */
body.theme-zen #holdings-empty-state h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.03em;
}
body.theme-zen .empty-option { border-radius: var(--radius); }
body.theme-zen .empty-option.recommended { border-color: var(--accent); }
body.theme-zen .empty-option-badge { background: var(--accent); color: var(--on-accent); }
body.theme-zen .empty-option-btn {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
body.theme-zen .empty-option-btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-lit);
}

/* ── Old-palette leaks from main.css ───────────────────────────────────────── */
/* main.css paints a handful of glows in the warm-amber accent it was written
   against — rgba(200,133,58,…), a hue this theme no longer uses anywhere. They
   were never overridden here, so a zen page renders an OLD amber halo around a
   NEW ember control. That's not a taste call, it's two palettes on one element.
   Killed rather than recoloured: this theme's whole argument is that ambient
   colour behind a control dims the data next to it.
   These reach every zen page, the dashboard included. */
body.theme-zen .filter-btn.active { box-shadow: none; }

/* The amber ring doubled up with the focus-visible outline below, which is the
   accessible one — it's on :focus-visible, so it doesn't fire on mouse clicks. */
body.theme-zen input:focus,
body.theme-zen select:focus,
body.theme-zen textarea:focus { box-shadow: none; }

/* main.css marks this !important, which outranks the row-hover rule above on
   force rather than specificity — so the tint has to answer in kind. */
body.theme-zen .table-card tbody tr:hover {
  background: rgba(255,255,255,.022) !important;
}

/* The bar stays (it's the only thing marking the active page) and recolours to
   ember on its own via --accent; both of its halos are dropped — main.css glows
   this link twice, once as a box-shadow on the ::before bar and again as a
   text-shadow on the label, so killing only the first leaves the text glowing. */
body.theme-zen .sidebar-link.active::before { box-shadow: none; }
body.theme-zen .sidebar-link.active { text-shadow: none; }

/* main.css's "Bloom" section (~L1138) is the mother lode: six rules whose only
   job is to paint old-amber light around chrome. The whole idea is what this
   theme rejects — the glow is decoration, and the accent should mark selection,
   not radiate. The header's is handled up in the chrome section, since that one
   is a 1px line masquerading as a separator rather than a bloom. */
body.theme-zen .empty-option-btn:not(.secondary),
body.theme-zen .empty-option-btn:not(.secondary):hover { box-shadow: none; }
body.theme-zen .page-title span { text-shadow: none; }
body.theme-zen .zdlg-btn-confirm:hover,
body.theme-zen .zdlg-box.zdlg-danger .zdlg-btn-confirm:hover { box-shadow: none; }
body.theme-zen .zt-btn-primary { box-shadow: none; }

/* ── Loading splash ────────────────────────────────────────────────────────── */
/* The loader (built by auth.js on every page) is the first thing a zen page
   shows, and it was showing a warm-amber wash before handing over to a graphite
   page — the ground changed hue on load. `background: var(--bg)` underneath is
   already graphite; only the two ambient blooms painted over it had to go.
   Same argument as the page ground above: flat, no wash. */
body.theme-zen #page-loader { background-image: none; }

/* ── AI review: headline + disclosure ──────────────────────────────────────── */
/* Shared "cool amber highlight" for AI-generated content — used by the
   dashboard's AI Portfolio Review, the ticker page's Bull/Bear case folds, and
   the rebalance/optimize page's AI Suggested Improvements card. One
   definition so the accent treatment reads identically everywhere it appears. */
/* Every AI-generated analysis card (dashboard review, ticker AI Analysis,
   rebalance/optimize suggestions) carries the same amber glow so it reads as
   AI-generated at a glance — matches the Market Recap card on /overview. */
body.theme-zen #ai-portfolio-card,
body.theme-zen #ai-section {
  border: 1px solid rgba(200,133,58,.4);
  box-shadow: 0 0 0 1px rgba(200,133,58,.08), 0 0 34px -8px rgba(200,133,58,.4);
}
body.theme-zen .ai-card-mark { color: var(--accent); }
body.theme-zen .ai-card-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.015em;
  color: var(--text);
}
body.theme-zen .ai-review-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
/* The one finding worth acting on, stated before any scrolling is required. */
body.theme-zen .ai-headline {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 14px;
  margin-bottom: 16px;
}
body.theme-zen .ai-headline-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}
body.theme-zen .ai-headline-issue {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.35;
}
body.theme-zen .ai-headline-action {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 6px;
}
body.theme-zen .ai-more { border-top: 1px solid var(--border); padding-top: 14px; }
/* Reuses the filter-pill's accent-dim/accent pairing — already the system's
   language for "the emphasised option here" — so a fold control reads as a
   real control instead of a caption. */
body.theme-zen .ai-more-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  transition: background .15s, color .15s;
}
body.theme-zen .ai-more-summary::-webkit-details-marker { display: none; }
/* Down-pointing chevron (CSS-drawn, not a glyph, for crisp rendering at any
   DPI) rather than a +/– swap — reads unambiguously as "this expands", where
   +/– could be misread as an add/remove control. Rotates to point up when open. */
body.theme-zen .ai-more-summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
  flex-shrink: 0;
}
body.theme-zen .ai-more[open] .ai-more-summary::before { transform: rotate(225deg); }
body.theme-zen .ai-more-summary:hover { background: var(--accent); color: var(--on-accent); }
body.theme-zen .ai-more-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.theme-zen .ai-more-body { padding-top: 16px; }

/* ── Motion ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.theme-zen *, body.theme-zen *::before, body.theme-zen *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ── Focus: one visible ring everywhere (WCAG 2.2 AA) ─────────────────────── */
body.theme-zen a:focus-visible,
body.theme-zen button:focus-visible,
body.theme-zen input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.theme-zen .page-title { font-size: 24px; }
  /* Period pills must stay comfortably tappable on touch. */
  body.theme-zen .filter-btn { padding: 7px 10px; font-size: 11px; }
}
