/* ==========================================================================
   Trader Journal — CLAY V2
   Drop-in layer. Load AFTER styles.css, nothing else changes:

     <link rel="stylesheet" href="styles.css?v=..." />
     <link rel="stylesheet" href="clay-v2.css?v=20260806-clayv2" />

   Source: claude.ai/design project "Fable 5 trading redesign",
   handoff/clay-v2.css. Imported verbatim.

   What changes, and why:
     1. The palette moves off blue-graphite onto a warm bone ground with a
        violet accent. Clay depends on a mid-tone, warm-cast surface: on a
        near-black page the drop shadow is invisible and the whole style
        collapses into the hairline you were trying to delete.
     2. Light becomes the primary theme; dark is re-derived warm, not
        inverted.
     3. Depth becomes information. Raised = profit, pressed = loss, and the
        travel scales with size. Calendar days, metric cards and journal rows
        all read at a glance with your eyes out of focus.
     4. Radii go up one rung and the primary action gets physically bigger.

   Charts need no JS change: charts.js reads its colours off
   getComputedStyle(document.documentElement) and re-reads on 'themechange',
   so retoning the tokens retones every canvas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPE
   Sora → Space Grotesk. One token, and it lands everywhere --font-ui is
   spent. JetBrains Mono stays: it is the right numeral face and swapping it
   would move every column width in the journal.
   -------------------------------------------------------------------------- */
:root {
  --font-ui: "Space Grotesk", "Sora", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. GEOMETRY
   Clay stops reading as moulded below ~14px; V2 pushes the top of the scale
   so the big surfaces (hero, modal, sheet) read as objects rather than
   panels. Nested chips keep the small scale — 26 inside 26 is mush.
   -------------------------------------------------------------------------- */
:root {
  --radius-clay-sm: 18px;
  --radius-clay-md: 26px;
  --radius-clay-lg: 34px;
  --radius-clay-xl: 44px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: var(--radius-clay-sm);
  --radius-xl: var(--radius-clay-lg);
}

/* --------------------------------------------------------------------------
   3. LIGHT THEME — the primary surface now
   Warm bone ground, violet accent, money colours re-derived to hold 4.5:1 on
   bone (the old #0a6e46 / #c02a4f were tuned against #fbfbff).
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --surface-0: #e2dace;        /* page */
  --surface-1: #f5f0e8;        /* cards, panels */
  --surface-2: #fbf8f3;        /* nav, modal, raised */
  --surface-3: #efe9e1;        /* hover */
  --surface-inset: #e7dfd3;    /* wells, inputs, table heads */

  --line: #dcd3c6;
  --line-strong: #c9bfaf;
  --line-accent: rgba(107, 62, 216, 0.45);

  --text: #241f1a;
  --text-soft: #6b6259;
  /* Handoff shipped #6f6659, tuned against --surface-1. But --text-faint also
     lands on --surface-inset (table heads, wells), where it measured 4.27:1 —
     under the 4.5:1 body floor. Darkened one step: 4.61:1 on inset,
     5.36:1 on --surface-1, 5.05:1 on --surface-3. */
  --text-faint: #6a6154;
  --text-inverse: #ffffff;

  --accent: #6b3ed8;
  --accent-strong: #5730b5;
  --accent-muted: rgba(107, 62, 216, 0.10);

  --pnl-pos: #146b49;
  --pnl-pos-soft: rgba(20, 107, 73, 0.12);
  --pnl-pos-line: rgba(20, 107, 73, 0.38);
  --pnl-neg: #b32b4f;
  --pnl-neg-soft: rgba(179, 43, 79, 0.11);
  --pnl-neg-line: rgba(179, 43, 79, 0.38);

  --warn: #8a5a0c;
  --warn-soft: rgba(138, 90, 12, 0.12);
  --info: #0c6b8a;
  --info-soft: rgba(12, 107, 138, 0.11);

  --chart-grid: #dbd2c5;
  --chart-axis: #6f6659;

  /* Accent-derived chart tokens were hard-coded blue; re-derive on violet. */
  --chart-line-deep: #3d1f88;
  --chart-glow: rgba(107, 62, 216, 0.32);
  --chart-halo: rgba(107, 62, 216, 0.18);
  --chart-halo-fade: rgba(107, 62, 216, 0);
  --chart-area-top: rgba(107, 62, 216, 0.26);
  --chart-area-mid: rgba(107, 62, 216, 0.08);
  --chart-area-bottom: rgba(107, 62, 216, 0);
  --chart-canvas-glow: rgba(107, 62, 216, 0.05);
  --chart-pos-deep: #0d4a32;
  --chart-pos-glow: rgba(20, 107, 73, 0.32);
  --chart-neg-deep: #7d1c37;
  --chart-neg-glow: rgba(179, 43, 79, 0.32);
  --chart-halo-neg: rgba(179, 43, 79, 0.18);
  --chart-halo-neg-fade: rgba(179, 43, 79, 0);
  --chart-neg-area-top: rgba(179, 43, 79, 0.03);
  --chart-neg-area-bottom: rgba(179, 43, 79, 0.30);
  --chart-highlight: rgba(255, 255, 255, 0.6);
  --chart-shade: rgba(36, 31, 26, 0.2);
  --chart-shade-fade: rgba(36, 31, 26, 0);
  --chart-track: rgba(111, 102, 89, 0.12);
  --chart-crosshair: rgba(107, 98, 89, 0.55);
  --chart-tooltip-bg: rgba(251, 248, 243, 0.98);
  --chart-tooltip-line: #c9bfaf;
  --chart-tooltip-shadow: rgba(36, 31, 26, 0.2);
  --chart-ring-wash: rgba(111, 102, 89, 0.05);
  --chart-radar-core: rgba(12, 107, 138, 0.24);
  --chart-radar-edge: rgba(12, 107, 138, 0.03);
  --chart-radar-glow: rgba(12, 107, 138, 0.32);
  --chart-canvas-top: #ece4d8;
  --chart-canvas-bottom: #e5dccf;
  --chart-canvas-shadow: rgba(36, 31, 26, 0.14);
  --spark-pos-fade: rgba(20, 107, 73, 0);
  --spark-neg-fade: rgba(179, 43, 79, 0);

  /* Clay elevation, warm. The hue moves 245 → 35 so the drop belongs to the
     surface it falls from; a cool grey shadow under a warm card is the tell
     that kills the moulded read. */
  --clay-raised:
    0 18px 32px -18px hsl(35 30% 40% / 0.45),
    0 6px 12px -8px hsl(35 30% 40% / 0.30),
    inset 0 -8px 16px -8px hsl(35 35% 45% / 0.22),
    inset 0 8px 14px -8px hsl(40 60% 100% / 0.95);
  --clay-float:
    0 26px 44px -18px hsl(35 30% 38% / 0.50),
    0 8px 16px -8px hsl(35 30% 40% / 0.35),
    inset 0 -9px 18px -9px hsl(35 35% 45% / 0.26),
    inset 0 10px 16px -9px hsl(40 60% 100% / 1);
  --clay-soft: 0 12px 24px -16px hsl(35 30% 40% / 0.38);
  --clay-accent:
    0 20px 34px -16px hsl(265 60% 40% / 0.55),
    0 6px 14px -7px hsl(265 60% 35% / 0.40),
    inset 0 -7px 14px -7px hsl(265 70% 30% / 0.45),
    inset 0 8px 14px -7px hsl(0 0% 100% / 0.40);
  --clay-pressed:
    inset 0 5px 12px -3px hsl(35 35% 40% / 0.36),
    inset 0 -3px 6px -3px hsl(40 60% 100% / 0.90);

  --clay-edge: hsl(35 25% 25% / 0.06);
  --clay-edge-strong: hsl(35 25% 25% / 0.11);
  --control-edge: #a89a86;

  --shadow: var(--clay-raised);
  --shadow-modal:
    0 40px 70px -24px hsl(35 30% 35% / 0.45),
    0 12px 24px -10px hsl(35 30% 38% / 0.28),
    inset 0 -8px 16px -8px hsl(35 35% 45% / 0.20),
    inset 0 9px 15px -8px hsl(40 60% 100% / 1);
  --edge-highlight: inset 0 1px 0 hsl(40 60% 100% / 0.9);
  --focus-ring: 0 0 0 3px var(--surface-1), 0 0 0 6px var(--accent);

  --halo-accent: rgba(107, 62, 216, 0.28);
  --aurora-a: rgba(107, 62, 216, 0.15);
  --aurora-b: rgba(20, 107, 73, 0.10);
  --aurora-c: rgba(208, 138, 31, 0.12);
  --aurora-fade: rgba(107, 62, 216, 0);
  --landing-grid-line: rgba(107, 62, 216, 0.12);
  --floor-glow: rgba(107, 62, 216, 0.14);

  --glass-top: #fbf8f3;
  --glass-bottom: #f2ece2;
  --deck-top: #fbf8f3;
  --deck-bottom: #f2ece2;
  --deck-edge: hsl(40 60% 100% / 0.9);
  --deck-wash: rgba(107, 62, 216, 0.05);
  --deck-groove: hsl(35 35% 40% / 0.28);
}

/* --------------------------------------------------------------------------
   4. DARK THEME — re-derived warm, not inverted
   Same violet family, lifted for contrast on ink. Money colours brighten
   because the eye loses saturation on a dark ground.
   -------------------------------------------------------------------------- */
:root:not([data-theme="light"]) {
  --surface-0: #14110f;
  --surface-1: #1f1b18;
  --surface-2: #272220;
  --surface-3: #2f2926;
  --surface-inset: #171412;

  --line: #322c28;
  --line-strong: #443c36;
  --line-accent: rgba(158, 123, 240, 0.45);

  --text: #f2ede6;
  --text-soft: #a9a096;
  --text-faint: #a49b90;
  --text-inverse: #14110f;

  --accent: #9e7bf0;
  --accent-strong: #b69af5;
  --accent-muted: rgba(158, 123, 240, 0.14);

  --pnl-pos: #3dd08f;
  --pnl-pos-soft: rgba(61, 208, 143, 0.13);
  --pnl-pos-line: rgba(61, 208, 143, 0.38);
  --pnl-neg: #f5637f;
  --pnl-neg-soft: rgba(245, 99, 127, 0.13);
  --pnl-neg-line: rgba(245, 99, 127, 0.38);

  --chart-grid: #2b2521;
  --chart-axis: #a49b90;
  --chart-line-deep: #5a3aa0;
  --chart-glow: rgba(158, 123, 240, 0.5);
  --chart-halo: rgba(158, 123, 240, 0.24);
  --chart-halo-fade: rgba(158, 123, 240, 0);
  --chart-area-top: rgba(158, 123, 240, 0.4);
  --chart-area-mid: rgba(158, 123, 240, 0.12);
  --chart-area-bottom: rgba(158, 123, 240, 0);
  --chart-canvas-top: #1b1815;
  --chart-canvas-bottom: #161311;
  --chart-canvas-glow: rgba(158, 123, 240, 0.07);
  --chart-pos-deep: #1c8058;
  --chart-pos-glow: rgba(61, 208, 143, 0.5);
  --chart-neg-deep: #8f2a44;
  --chart-neg-glow: rgba(245, 99, 127, 0.5);
  --chart-halo-neg: rgba(245, 99, 127, 0.24);
  --chart-halo-neg-fade: rgba(245, 99, 127, 0);
  --chart-tooltip-bg: rgba(31, 27, 24, 0.96);
  --chart-tooltip-line: #443c36;
  --spark-pos-fade: rgba(61, 208, 143, 0);
  --spark-neg-fade: rgba(245, 99, 127, 0);

  --clay-raised:
    0 16px 30px -16px hsl(30 40% 3% / 0.80),
    0 5px 11px -6px hsl(30 40% 3% / 0.55),
    inset 0 -7px 14px -7px hsl(30 35% 3% / 0.55),
    inset 0 8px 13px -7px hsl(35 25% 78% / 0.11);
  --clay-float:
    0 24px 42px -16px hsl(30 40% 3% / 0.85),
    0 7px 15px -7px hsl(30 40% 3% / 0.60),
    inset 0 -8px 16px -8px hsl(30 35% 3% / 0.60),
    inset 0 9px 15px -8px hsl(35 25% 80% / 0.16);
  --clay-soft: 0 12px 26px -18px hsl(30 40% 3% / 0.70);
  --clay-accent:
    0 20px 34px -14px hsl(265 55% 14% / 0.90),
    0 6px 13px -6px hsl(265 55% 11% / 0.62),
    inset 0 -7px 14px -7px hsl(265 60% 10% / 0.50),
    inset 0 8px 14px -7px hsl(0 0% 100% / 0.24);
  --clay-pressed:
    inset 0 4px 9px -2px hsl(30 40% 3% / 0.70),
    inset 0 -2px 5px -3px hsl(35 25% 78% / 0.06);

  --clay-edge: hsl(35 25% 80% / 0.08);
  --clay-edge-strong: hsl(35 25% 82% / 0.13);
  --control-edge: #6a5f56;

  --halo-accent: rgba(158, 123, 240, 0.4);
  --aurora-a: rgba(158, 123, 240, 0.16);
  --aurora-b: rgba(61, 208, 143, 0.09);
  --aurora-c: rgba(240, 179, 78, 0.10);
  --aurora-fade: rgba(158, 123, 240, 0);
  --landing-grid-line: rgba(158, 123, 240, 0.13);
  --deck-groove: hsl(30 40% 3% / 0.7);
}

/* ==========================================================================
   5. DEPTH AS DATA — the one rule that carries the redesign
   Raised = you made money, pressed = you lost it, and the travel scales with
   how much. Never shadow alone: the money colour and the sign glyph still
   carry the state for anyone who cannot see the depth flip (WCAG 1.4.1).
   ========================================================================== */

/* --- 5a. Calendar ---------------------------------------------------------
   app.js already stamps .calendar-cell-positive / -negative and a clamped
   --day-intensity (0…1) per cell, so this is pure CSS. The 1px-gap hairline
   grid has to go: clay tiles need air between them or the shadows merge. */
.calendar-grid {
  gap: 10px;
  padding: 14px;
  background: var(--surface-inset);
  border-radius: var(--radius-clay-md);
  box-shadow: var(--clay-pressed);
}

.calendar-weekday {
  background: transparent;
  padding-bottom: 2px;
}

.calendar-cell {
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-out);
}

.calendar-cell-positive {
  box-shadow:
    0 calc(8px + var(--day-intensity, 0) * 14px) calc(16px + var(--day-intensity, 0) * 16px) -14px
      hsl(155 40% 25% / calc(0.3 + var(--day-intensity, 0) * 0.3)),
    inset 0 -6px 12px -6px hsl(35 35% 45% / 0.18),
    inset 0 7px 12px -7px hsl(40 60% 100% / 1);
}

.calendar-cell-negative {
  box-shadow:
    inset 0 calc(4px + var(--day-intensity, 0) * 6px) calc(10px + var(--day-intensity, 0) * 8px) -3px
      hsl(345 40% 35% / calc(0.22 + var(--day-intensity, 0) * 0.22)),
    inset 0 -3px 6px -3px hsl(40 60% 100% / 0.75);
}

.calendar-cell-flat,
.calendar-cell-empty {
  background: var(--surface-3);
  box-shadow: inset 0 3px 7px -3px hsl(35 35% 40% / 0.2);
}

.calendar-cell-empty {
  min-height: 0;
  background: transparent;
  box-shadow: none;
}

button.calendar-cell:hover {
  transform: translateY(-2px);
}

button.calendar-cell.calendar-cell-negative:hover {
  transform: translateY(1px);
}

/* Dark theme: the light-source insets have to be re-derived or the tiles
   look shrink-wrapped. */
:root:not([data-theme="light"]) .calendar-cell-positive {
  box-shadow:
    0 calc(8px + var(--day-intensity, 0) * 14px) calc(16px + var(--day-intensity, 0) * 16px) -14px
      hsl(155 60% 8% / calc(0.5 + var(--day-intensity, 0) * 0.3)),
    inset 0 -6px 12px -6px hsl(30 35% 3% / 0.5),
    inset 0 7px 12px -7px hsl(35 25% 78% / 0.12);
}

:root:not([data-theme="light"]) .calendar-cell-negative {
  box-shadow:
    inset 0 calc(4px + var(--day-intensity, 0) * 6px) calc(10px + var(--day-intensity, 0) * 8px) -3px
      hsl(345 50% 6% / calc(0.5 + var(--day-intensity, 0) * 0.25)),
    inset 0 -2px 5px -3px hsl(35 25% 78% / 0.05);
}

/* --- 5b. Metric cards -----------------------------------------------------
   .is-pos / .is-neg are already stamped by renderMetrics. A losing metric
   sinks instead of rising; the money rail stays, so the tone is never
   carried by depth alone. */
.metric-card:not(.dash-rail-item).is-neg {
  background: var(--surface-inset);
  box-shadow:
    inset var(--money-rail-w) 0 0 var(--money-rail),
    var(--clay-pressed);
}

/* --- 5c. Journal rows -----------------------------------------------------
   The table stays flat by default: clay on a repeating row is how this style
   ruins a data product. These two classes are the exception, and they only
   move shadow + background, never padding — row height is unchanged. */
#journal .table-wrap {
  padding: 10px;
  background: var(--surface-inset);
  border-radius: var(--radius-clay-md);
}

#journal table {
  border-collapse: separate;
  border-spacing: 0 7px;
}

#journal tbody td {
  border-bottom: 0;
}

#journal tbody tr.trade-row-win td {
  background: var(--surface-2);
}

#journal tbody tr.trade-row-loss td {
  background: var(--surface-inset);
}

#journal tbody tr td:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

#journal tbody tr td:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

#journal tbody tr.trade-row-win {
  box-shadow: var(--clay-raised);
}

#journal tbody tr.trade-row-loss {
  box-shadow: var(--clay-pressed);
}

/* ==========================================================================
   6. THE PRIMARY ACTION
   "Easy access to a new trade" is mostly a size and a position problem. The
   New Trade button was a 44px pill the same shape as Export sitting beside
   it; here it is physically the biggest control on the page and it is the
   only violet object in the command bar.
   ========================================================================== */
#journalNewTradeBtn {
  min-height: 60px;
  padding: 0 26px;
  gap: 11px;
  font-size: 15px;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

#journalNewTradeBtn .journal-action-icon,
#journalNewTradeBtn .journal-action-icon svg {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}

#journalNewTradeBtn .journal-action-icon svg {
  stroke-width: 2.4;
}

/* The ⌘K hint. */
.kbd-hint {
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.22);
  font: 600 10.5px/1 var(--font-mono);
}

/* Export drops to a quiet secondary — two equally-weighted buttons is why
   neither of them reads as the thing to press. */
#exportCsvBtn {
  background: transparent;
  box-shadow: none;
  color: var(--text-soft);
}

#exportCsvBtn:hover {
  background: var(--surface-3);
  box-shadow: var(--clay-raised);
}

/* Mobile FAB grows to match and keeps the accent clay. */
.tabbar-fab {
  width: 66px;
  height: 66px;
}

/* ==========================================================================
   7. SURFACE POLISH
   Radii went up, so padding follows — a 34px corner eats a 20px pad. Nothing
   here changes layout structure.
   ========================================================================== */
.panel,
.view-head {
  padding: var(--space-6) var(--space-6);
}

.dash-hero {
  border-radius: var(--radius-clay-xl);
}

.dash-hero-value {
  font-family: var(--font-mono);
  font-size: clamp(42px, 4.8vw, 66px);
  letter-spacing: -0.045em;
}

/* The equity sparkline reads as carved into the card rather than painted on
   top of it — same trick as the chart wells, applied to the hero. */
.dash-spark-wrap {
  height: 118px;
  border-radius: 0 0 var(--radius-clay-xl) var(--radius-clay-xl);
  background: color-mix(in srgb, var(--surface-inset) 70%, var(--surface-1));
  box-shadow: inset 0 8px 18px -6px hsl(35 35% 40% / 0.34);
  overflow: hidden;
}

:root:not([data-theme="light"]) .dash-spark-wrap {
  box-shadow: inset 0 8px 18px -6px hsl(30 40% 3% / 0.6);
}

/* Inputs sink a little deeper — the form is the one place the surface should
   invite you to put something into it. */
input,
select,
textarea {
  border-radius: var(--radius-clay-sm);
  padding: 14px 16px;
  min-height: 48px;
}

/* Nav: the six-item rail keeps working, but the active item becomes a
   properly moulded pill instead of a tint plus an underline. */
.desktop-nav {
  border: 0;
  border-radius: var(--radius-clay-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: inset 0 1px 0 var(--clay-edge), var(--clay-raised);
}

.desktop-nav-links .nav-btn.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--clay-raised);
}

.desktop-nav-links .nav-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* The sliding accent rail is redundant once the active item is a raised
   object, and two active affordances read as a bug. */
.desktop-nav-links::after {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   8. Reduced motion — the calendar hover travel is decoration.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  button.calendar-cell:hover,
  button.calendar-cell.calendar-cell-negative:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   9. Mobile reconciliation (added on import, not in the handoff)
   §7 grows .dash-spark-wrap from 74px to 118px. The mobile hero reserved only
   82px of padding-bottom for it (styles.css, tuned to the old height), so the
   delta and "Today" chips fell inside the carved well. Re-reserve to match.
   Specificity must beat `.metric-card:not(.dash-rail-item)` in styles.css.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .metric-card.dash-hero {
    padding-bottom: 126px;
  }
}

/* ==========================================================================
   10. DASHBOARD 1a — compact top bar, greeting, live ticker, balance/risk
   deck, playbook and the unjournalled queue.
   Source: docs/renovation/design-source/1a-dashboard.html.
   Every colour is a token, so both themes come for free; the only literals
   are the clay shadow recipes, which are theme-scoped like §3/§4 above.
   ========================================================================== */

/* --- 10a. Compact top bar -------------------------------------------------
   Replaces the six-item text nav. Desktop only: below 1025px the sidebar
   drawer + the bottom tab bar already own navigation, and stacking a third
   nav on a 375px screen is how you lose the content. */
.topnav {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-clay-lg);
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 var(--clay-edge), var(--clay-raised);
  position: sticky;
  top: 18px;
  z-index: var(--z-nav);
}

@media (min-width: 1025px) {
  .topnav {
    display: flex;
  }
}

/* Locked session: same contract the deleted .desktop-nav had. */
body.auth-locked .topnav {
  display: none !important;
}

.topnav-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--radius-clay-sm);
  background: var(--accent);
  color: #fff;
  font: 700 18px/1 var(--font-ui);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--clay-accent);
}

/* The mark carries .nav-btn for free routing + auth gating, so the generic
   .nav-btn.is-active fill has to be neutralised on it. */
.topnav-mark.is-active {
  background: var(--accent);
  border-radius: var(--radius-clay-sm);
  box-shadow: var(--clay-accent);
}

.topnav-rule {
  flex: 0 0 auto;
  width: 1px;
  height: 26px;
  background: var(--line);
}

.topnav-links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.topnav-btn {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  min-width: 62px;
  min-height: 52px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-clay-sm);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.topnav-btn:hover {
  color: var(--text);
  background: var(--surface-3);
}

.topnav-btn.is-active {
  background: var(--surface-3);
  color: var(--accent);
  box-shadow: var(--clay-pressed);
}

.topnav-icon svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topnav-label {
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.topnav-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--pnl-neg);
  color: #fff;
  font: 700 9.5px/17px var(--font-mono);
  text-align: center;
}

.topnav-badge[hidden] {
  display: none;
}

.topnav-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.topnav-icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text-soft);
  font: 600 16px/1 var(--font-ui);
  cursor: pointer;
  list-style: none;
  box-shadow: var(--clay-pressed);
}

.topnav-icon-btn::-webkit-details-marker {
  display: none;
}

.topnav-icon-btn:hover {
  color: var(--text);
}

.topnav-more {
  position: relative;
}

.topnav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 2;
  display: grid;
  gap: 2px;
  min-width: 210px;
  padding: var(--space-2);
  border-radius: var(--radius-clay-md);
  background: var(--surface-2);
  box-shadow: var(--clay-float);
}

.topnav-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: 600 var(--fs-body)/1.2 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
}

.topnav-menu-item.is-active {
  background: var(--surface-3);
  border-radius: var(--radius-md);
  color: var(--accent);
}

.topnav-menu-item:hover {
  background: var(--surface-3);
}

.topnav-menu-item-danger {
  color: var(--pnl-neg);
}

.topnav-menu-item[hidden] {
  display: none;
}

/* Mobile keeps the drawer; Export lost its home when the action bar went. */
.nav-export-mobile {
  width: 100%;
}

/* --- 10b. Dashboard header row ------------------------------------------- */
.dash-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-1) var(--space-3);
}

.dash-greeting {
  flex: 1 1 240px;
  min-width: 0;
}

.dash-clock {
  margin: 0;
  color: var(--text-faint);
  font: 600 10.5px/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dash-hello {
  margin: 6px 0 0;
  font: 700 clamp(21px, 2.4vw, 27px)/1.15 var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Inline LIVE ticker. Patched in place by the 5s poll — never rebuilt. */
.dash-live {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.dash-live[hidden] {
  display: none;
}

.dash-live-track {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.dash-live-pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 8px 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  box-shadow: var(--clay-raised);
}

.dash-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pnl-pos);
}

.dash-live-tag {
  color: var(--pnl-pos);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dash-live-symbol {
  font: 700 15px/1 var(--font-ui);
  color: var(--text);
}

.dash-live-price {
  font: 700 16px/1 var(--font-mono);
  color: var(--text);
}

.dash-live-move {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  font: 700 12px/1 var(--font-mono);
}

.dash-live-move.pnl-positive {
  background: var(--pnl-pos-soft);
  color: var(--pnl-pos);
}

.dash-live-move.pnl-negative {
  background: var(--pnl-neg-soft);
  color: var(--pnl-neg);
}

.dash-live-close {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-soft);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

.dash-live-close:hover {
  color: var(--text);
}

/* Primary action: the biggest, and the only violet, object in the row. */
.dash-log-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 60px;
  padding: 0 26px 0 22px;
  border-radius: var(--radius-pill);
  font: 700 15px/1 var(--font-ui);
  letter-spacing: -0.01em;
  text-transform: none;
}

.dash-log-btn .journal-action-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}

/* --- 10c. Balance card --------------------------------------------------- */
.dash-hero-top {
  justify-content: space-between;
}

.dash-range {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  box-shadow: var(--clay-pressed);
}

.dash-range-btn {
  min-height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-faint);
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.dash-range-btn.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--clay-soft);
}

.dash-hero-week,
.dash-hero-range {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-soft);
  font: 600 12px/1 var(--font-mono);
  box-shadow: var(--clay-pressed);
}

.dash-hero-week[hidden],
.dash-hero-range[hidden] {
  display: none;
}

.dash-hero-today {
  padding: 5px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  font-size: 12.5px;
}

.dash-hero-today.is-pos,
.dash-hero-week.is-pos,
.dash-hero-range.is-pos {
  background: var(--pnl-pos-soft);
  color: var(--pnl-pos);
}

.dash-hero-today.is-neg,
.dash-hero-week.is-neg,
.dash-hero-range.is-neg {
  background: var(--pnl-neg-soft);
  color: var(--pnl-neg);
}

/* The card reserves room for the carved sparkline well (§7 grew it to 118px). */
.metric-card.dash-hero {
  padding-bottom: 132px;
}

/* --- 10d. Risk left today ------------------------------------------------ */
/* Beats .risk-strip's auto-fit columns from styles.css — the card is now a
   single stacked column: head, dial + figures, consequence. */
.dash-risk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-5);
}

.dash-risk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.dash-risk-state {
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
}

.dash-risk-state.is-safe {
  color: var(--pnl-pos);
}

.dash-risk-state.is-warn {
  color: var(--warn);
}

.dash-risk-state.is-breach {
  color: var(--pnl-neg);
}

.dash-risk-body {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.dash-dial {
  position: relative;
  flex: 0 0 auto;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: var(--clay-pressed);
}

.dash-dial svg {
  position: absolute;
  inset: 0;
  width: 118px;
  height: 118px;
  transform: rotate(-90deg);
}

.dash-dial-track {
  fill: none;
  stroke: var(--surface-inset);
  stroke-width: 13;
}

.dash-dial-fill {
  fill: none;
  stroke: var(--pnl-pos);
  stroke-width: 13;
  stroke-linecap: round;
  transition: stroke-dasharray var(--dur-base) var(--ease-out);
}

.dash-dial.is-warn .dash-dial-fill {
  stroke: var(--warn);
}

.dash-dial.is-breach .dash-dial-fill {
  stroke: var(--pnl-neg);
}

.dash-dial-copy {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.dash-dial-value {
  font: 700 24px/1 var(--font-mono);
  color: var(--text);
}

.dash-dial-value span {
  font-size: 14px;
}

.dash-dial-label {
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.dash-risk-figures {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.dash-risk .risk-strip-label {
  letter-spacing: 0.1em;
}

.dash-risk .risk-strip-value {
  font: 700 18px/1 var(--font-mono);
}

.dash-risk-consequence {
  margin: 0;
  padding: 15px 17px;
  border-radius: var(--radius-clay-md);
  background: var(--surface-3);
  color: var(--text-soft);
  font: 500 13px/1.5 var(--font-ui);
  box-shadow: var(--clay-pressed);
}

.dash-risk-link {
  border: 0;
  padding: 0;
  margin-left: 4px;
  background: none;
  color: var(--accent);
  font: 600 13px/1.5 var(--font-ui);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 10e. Playbook + unjournalled boards ---------------------------------- */
.dash-boards {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.dash-board {
  padding: var(--space-6);
  border-radius: var(--radius-clay-lg);
  background: var(--surface-1);
  box-shadow: var(--clay-raised);
}

.dash-board[hidden] {
  display: none;
}

.dash-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.dash-board-head h3 {
  margin: 0;
  font: 700 17px/1.2 var(--font-ui);
  color: var(--text);
}

.dash-board-head p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font: 400 13px/1.4 var(--font-ui);
}

.dash-board-link {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.dash-playbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

/* Depth as data: a setup with positive expectancy is raised, a losing one is
   sunk. The money colour and the ▲/▼ glyph carry it too (WCAG 1.4.1). */
.dash-play-tile {
  display: grid;
  gap: 7px;
  padding: 18px;
  border-radius: var(--radius-clay-sm);
  background: var(--surface-2);
  box-shadow: var(--clay-raised);
}

.dash-play-tile.is-sunk {
  background: var(--surface-inset);
  box-shadow: var(--clay-pressed);
}

.dash-play-name {
  margin: 0;
  font: 600 13px/1.2 var(--font-ui);
  color: var(--text);
}

.dash-play-value {
  margin: 0;
  font: 700 22px/1 var(--font-mono);
  letter-spacing: -0.02em;
}

.dash-play-unit {
  margin-left: 3px;
  font: 500 11px/1 var(--font-mono);
  color: var(--text-faint);
}

.dash-play-meta {
  margin: 0;
  font: 500 11px/1.3 var(--font-mono);
  color: var(--text-faint);
}

.dash-play-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  box-shadow: var(--clay-pressed);
  overflow: hidden;
}

.dash-play-bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--pnl-pos);
}

.dash-play-tile.is-sunk .dash-play-bar span {
  background: var(--pnl-neg);
}

.dash-alert {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: var(--space-4);
  padding: 16px 18px;
  border-radius: var(--radius-clay-md);
  background: var(--pnl-neg-soft);
  box-shadow: var(--clay-pressed);
}

.dash-alert[hidden] {
  display: none;
}

.dash-alert-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pnl-neg);
  color: #fff;
  font: 700 15px/1 var(--font-ui);
}

.dash-alert p {
  margin: 0;
  font: 500 13px/1.45 var(--font-ui);
  color: var(--text);
}

/* Unjournalled: the one inverted card on the dashboard — it is a to-do list,
   not a metric, and it should not read as one. */
.dash-unjournalled {
  align-content: start;
  display: grid;
  gap: var(--space-3);
  background: var(--surface-inset);
}

.dash-unj-count {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--pnl-neg);
  color: #fff;
  font: 700 11px/1 var(--font-mono);
}

.dash-unj-lede {
  margin: 0;
  color: var(--text-soft);
  font: 400 13px/1.45 var(--font-ui);
}

.dash-unj-list {
  display: grid;
  gap: 10px;
}

.dash-unj-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 0;
  border-radius: var(--radius-clay-sm);
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--clay-raised);
}

.dash-unj-row:hover {
  background: var(--surface-3);
}

.dash-unj-symbol {
  flex: 1 1 auto;
  font: 700 13px/1 var(--font-ui);
}

.dash-unj-net {
  font: 600 12px/1 var(--font-mono);
}

.dash-unj-date {
  font: 600 10.5px/1 var(--font-mono);
  color: var(--text-faint);
}

.dash-unj-chevron {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font: 700 14px/1 var(--font-ui);
}

.dash-unj-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.dash-unj-streak-label {
  margin: 0;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.dash-unj-streak {
  margin: 5px 0 0;
  font: 700 27px/1 var(--font-mono);
  color: var(--text);
}

.dash-unj-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 26px;
}

.dash-unj-bar {
  display: block;
  width: 8px;
  border-radius: 3px;
  background: var(--pnl-pos);
}

.dash-unj-bar.is-missing {
  background: var(--pnl-neg);
}

/* --- 10f. Mobile --------------------------------------------------------- */
@media (max-width: 900px) {
  .dash-boards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .dash-head {
    align-items: stretch;
    gap: var(--space-3);
  }

  .dash-greeting {
    flex: 1 1 100%;
  }

  .dash-live {
    flex: 1 1 100%;
    margin: 0 calc(-1 * var(--space-1));
    padding-bottom: 4px;
  }

  .dash-log-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .dash-risk-body {
    gap: var(--space-4);
  }

  .dash-dial,
  .dash-dial svg {
    width: 96px;
    height: 96px;
  }

  .dash-board {
    padding: var(--space-4);
  }

  .dash-playbook-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .dash-unj-foot {
    flex-wrap: wrap;
  }
}

/* --- 10g. Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dash-dial-fill,
  .dash-live-move,
  .topnav-btn {
    transition: none;
  }
}

/* --- 10h. Focus + touch targets -------------------------------------------
   The clay box-shadows above out-specify the global button:focus-visible
   ring, so it is restored here (same trick the old nav rail used). */
.topnav-mark:focus-visible,
.topnav-btn:focus-visible,
.topnav-icon-btn:focus-visible,
.topnav-menu-item:focus-visible,
.dash-range-btn:focus-visible,
.dash-live-close:focus-visible,
.dash-board-link:focus-visible,
.dash-risk-link:focus-visible,
.dash-unj-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Touch pointers get 44px on the two controls the mockup draws small. */
@media (pointer: coarse) {
  .dash-range-btn {
    min-height: 44px;
    padding: 0 18px;
  }

  .dash-live-close {
    min-height: 44px;
    padding: 0 20px;
  }
}

/* All-clear state: nothing left to journal, so the count chip stops shouting
   and the card becomes the streak's home. */
.dash-unjournalled.is-clear .dash-unj-count {
  background: var(--pnl-pos-soft);
  color: var(--pnl-pos);
}

.dash-unjournalled.is-clear .dash-unj-list {
  display: none;
}

/* ==========================================================================
   11. 1b — QUICK CAPTURE
   design-source/1b-quick-capture.html. Three routes to logging a trade:
   the ⌘K command bar, the five-field sheet, and the mobile FAB that expands
   into that same sheet in place.

   Both surfaces are native <dialog>, so the focus trap, the inert background
   and Escape come from the platform and not from JS. The clay read is the
   mockup's: a floating --surface-1 slab, with every control pressed INTO it.
   ========================================================================== */

/* --- 11a. Shared dialog shell --------------------------------------------- */
.cmdk,
.sheet,
.cooldown-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  max-width: none;
  max-height: none;
  overflow: visible;
}

.cmdk::backdrop,
.sheet::backdrop,
.cooldown-dialog::backdrop {
  background: hsl(35 20% 12% / 0.42);
  backdrop-filter: blur(3px);
}

:root:not([data-theme="light"]) .cmdk::backdrop,
:root:not([data-theme="light"]) .sheet::backdrop,
:root:not([data-theme="light"]) .cooldown-dialog::backdrop {
  background: hsl(30 30% 3% / 0.68);
}

.cmdk[open],
.sheet[open],
.cooldown-dialog[open] {
  animation: captureRise var(--dur-base) var(--ease-out);
}

@keyframes captureRise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* --- 11b. Route 1 — the ⌘K command bar ------------------------------------ */
.cmdk {
  width: min(760px, calc(100vw - 32px));
  /* Sits high, the way a command palette does — not vertically centred. */
  margin: clamp(48px, 14vh, 160px) auto auto;
}

.cmdk-form {
  display: grid;
  gap: var(--space-3);
}

.cmdk-well {
  border-radius: var(--radius-clay-lg);
  background: var(--surface-1);
  padding: var(--space-2);
  box-shadow: var(--clay-float);
}

.cmdk-line {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 16px 20px;
  border-radius: var(--radius-clay-md);
  background: var(--surface-inset);
  box-shadow: var(--clay-pressed);
}

.cmdk-caret {
  color: var(--accent);
  font: 700 17px/1 var(--font-mono, "JetBrains Mono", monospace);
}

.cmdk-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 clamp(16px, 2.4vw, 19px)/1.2 var(--font-mono, "JetBrains Mono", monospace);
  padding: 0;
}

.cmdk-input:focus {
  outline: none;
}

.cmdk-input::placeholder {
  color: var(--text-faint);
}

.cmdk-well:focus-within {
  box-shadow: var(--clay-pressed), 0 0 0 2px var(--accent);
}

.cmdk-key {
  flex: none;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--line);
  color: var(--text-soft);
  font: 600 11px/1 var(--font-mono, "JetBrains Mono", monospace);
}

.cmdk-readout {
  padding: 16px 20px 4px;
}

.cmdk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.cmdk-chip {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text);
  font: 600 12px/1 var(--font-mono, "JetBrains Mono", monospace);
}

.cmdk-chip-accent { background: var(--accent-muted); color: var(--accent-strong); }
.cmdk-chip-pos    { background: var(--pnl-pos-soft); color: var(--pnl-pos); }
.cmdk-chip-neg    { background: var(--pnl-neg-soft); color: var(--pnl-neg); }
.cmdk-chip-warn   { background: var(--warn-soft); color: var(--warn); }

.cmdk-status,
.cmdk-empty {
  margin: 12px 0 0;
  font: 400 13px/1.45 var(--font-ui);
  color: var(--text-soft);
}

/* Never colour alone: the ✓ / ! glyph carries the same state (WCAG 1.4.1). */
.cmdk-status.is-ok { color: var(--pnl-pos); }
.cmdk-status.is-ok::before { content: "\2713\00a0"; font-weight: 700; }
.cmdk-status.is-error { color: var(--pnl-neg); }
.cmdk-status.is-error::before { content: "\0021\00a0"; font-weight: 700; }

.cmdk-note {
  margin: 0;
  padding: 8px 20px 14px;
  font: 400 12.5px/1.45 var(--font-ui);
  color: var(--text-faint);
}

.cmdk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 0 var(--space-2);
}

.cmdk-hint {
  margin: 0;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-faint);
}

.cmdk-hint kbd {
  font: 600 11px/1 var(--font-mono, "JetBrains Mono", monospace);
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-soft);
}

.cmdk-foot-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-soft);
  font: 600 13px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-soft);
}

.cmdk-foot-btn:hover { color: var(--text); }

/* --- 11c. Routes 2 & 3 — the sheet ---------------------------------------- */
.sheet {
  width: min(560px, calc(100vw - 32px));
  margin: auto;
}

.sheet-body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-clay-xl);
  background: var(--surface-1);
  box-shadow: var(--clay-float);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sheet-steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sheet-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: 600 15px/1 var(--font-ui);
  color: var(--text-faint);
}

/* Step 2 (Close & journal) is a later phase: it shows as the pending half of
   the indicator, and is not a control. */
.sheet-step + .sheet-step::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--line);
}

.sheet-step.is-current {
  color: var(--text);
  font-weight: 700;
}

.sheet-step-num {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-inset);
  color: var(--text-faint);
  font: 700 12px/1 var(--font-mono, "JetBrains Mono", monospace);
  box-shadow: var(--clay-pressed);
}

.sheet-step.is-current .sheet-step-num {
  background: var(--accent);
  color: var(--text-inverse);
  box-shadow: var(--clay-accent);
}

.sheet-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-inset);
  color: var(--text-soft);
  font: 400 22px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sheet-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sheet-field-wide {
  grid-column: span 2;
}

.sheet-label {
  font: 600 10.5px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sheet-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-clay-md);
  background: var(--surface-inset);
  color: var(--text);
  padding: 15px 18px;
  font: 600 17px/1 var(--font-mono, "JetBrains Mono", monospace);
  box-shadow: var(--clay-pressed);
}

.sheet-input-lg {
  padding: 16px 18px;
  font-size: 20px;
  font-weight: 700;
}

.sheet-input::placeholder { color: var(--text-faint); font-weight: 500; }

.sheet-input:focus-visible {
  outline: none;
  box-shadow: var(--clay-pressed), 0 0 0 2px var(--accent);
}

.sheet-seg,
.sheet-risk {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sheet-seg-btn {
  flex: 1;
  min-width: 120px;
  min-height: 58px;
  border: 0;
  border-radius: var(--radius-clay-md);
  background: var(--surface-inset);
  color: var(--text-faint);
  font: 600 17px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

/* Depth as data, direction edition: the chosen side lifts and takes its money
   colour. The aria-pressed state and the word carry it for everyone else. */
.sheet-seg-btn.is-long.is-active {
  background: var(--pnl-pos);
  color: #fff;
  font-weight: 700;
  box-shadow:
    0 18px 30px -14px hsl(155 60% 25% / 0.6),
    inset 0 -6px 12px -6px hsl(155 60% 18% / 0.5),
    inset 0 7px 12px -6px hsl(0 0% 100% / 0.35);
}

.sheet-seg-btn.is-short.is-active {
  background: var(--pnl-neg);
  color: #fff;
  font-weight: 700;
  box-shadow:
    0 18px 30px -14px hsl(345 60% 28% / 0.6),
    inset 0 -6px 12px -6px hsl(345 60% 20% / 0.5),
    inset 0 7px 12px -6px hsl(0 0% 100% / 0.35);
}

.sheet-risk-btn {
  flex: 1;
  min-width: 72px;
  min-height: 50px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  color: var(--text-faint);
  font: 600 14px/1 var(--font-mono, "JetBrains Mono", monospace);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

.sheet-risk-btn.is-active {
  background: var(--accent);
  color: var(--text-inverse);
  font-weight: 700;
  box-shadow: var(--clay-accent);
}

.sheet-risk-custom {
  flex: 1 0 100%;
  padding: 12px 16px;
  font-size: 15px;
}

.sheet-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: var(--radius-clay-md);
  background: var(--surface-inset);
  box-shadow: var(--clay-pressed);
}

.sheet-readout-key {
  margin: 0;
  font: 600 10px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

.sheet-readout-val {
  margin: 3px 0 0;
  font: 700 20px/1 var(--font-mono, "JetBrains Mono", monospace);
  color: var(--text);
}

.sheet-readout-val.is-pos { color: var(--pnl-pos); }
.sheet-readout-val.is-neg { color: var(--pnl-neg); }
.sheet-readout-val.is-muted { color: var(--text-faint); font-size: 15px; }

.sheet-rules {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 18px;
  border: 0;
  border-radius: var(--radius-clay-md);
  background: var(--accent-muted);
  box-shadow: inset 0 4px 10px -3px hsl(265 30% 45% / 0.2);
}

.sheet-rules-title {
  padding: 0;
  font: 600 10.5px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.sheet-rules-list {
  display: grid;
  gap: 4px;
}

.sheet-rule {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  font: 500 13.5px/1.3 var(--font-ui);
  color: var(--text-soft);
  cursor: pointer;
}

.sheet-rule-box {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sheet-rule-mark {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  background: var(--surface-inset);
  box-shadow: var(--clay-pressed);
  display: grid;
  place-items: center;
  color: transparent;
  font: 700 13px/1 var(--font-ui);
}

.sheet-rule-mark::after { content: "\2713"; }

.sheet-rule-box:checked ~ .sheet-rule-mark {
  background: var(--accent);
  color: var(--text-inverse);
  box-shadow: var(--clay-accent);
}

.sheet-rule-box:checked ~ .sheet-rule-text {
  color: var(--text);
}

.sheet-rule-box:focus-visible ~ .sheet-rule-mark {
  box-shadow: var(--focus-ring);
}

.sheet-rules-note {
  margin: 2px 0 0;
  font: 400 12px/1.45 var(--font-ui);
  color: var(--text-soft);
}

.sheet-message:empty { display: none; }

.sheet-message {
  margin: 0;
  font: 500 13px/1.45 var(--font-ui);
  color: var(--text-soft);
}

.sheet-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.sheet-submit {
  flex: 1;
  min-width: 180px;
  min-height: 60px;
  border: 0;
  border-radius: var(--radius-clay-md);
  background: var(--accent);
  color: var(--text-inverse);
  font: 700 17px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-accent);
}

.sheet-detail {
  flex: 0 0 auto;
  min-height: 60px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-clay-md);
  background: var(--surface-inset);
  color: var(--text-soft);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

/* --- 11d. Capture confirmation ------------------------------------------- */
.capture-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: var(--radius-clay-md);
  background: var(--surface-2);
  color: var(--text);
  font: 500 13.5px/1.4 var(--font-ui);
  box-shadow: var(--clay-float);
  animation: captureRise var(--dur-base) var(--ease-out);
}

.capture-toast[hidden] { display: none; }

/* --- 11e. Route 3 — thumb ------------------------------------------------- */
@media (max-width: 620px) {
  .sheet {
    width: 100vw;
    max-width: 100vw;
    margin: auto auto 0;
  }

  .sheet-body {
    /* Bottom sheet: it grows up out of the FAB rather than landing on top of
       the screen, and clears the home indicator. */
    border-radius: var(--radius-clay-xl) var(--radius-clay-xl) 0 0;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    max-height: 92dvh;
    transform-origin: bottom center;
  }

  .sheet[open] { animation: sheetExpand var(--dur-base) var(--ease-out); }

  .sheet-grid { gap: 12px; }
  .sheet-readout { justify-content: flex-start; gap: 18px; }
  .sheet-readout-val { font-size: 17px; }
  .sheet-actions { flex-direction: column; }
  .sheet-submit,
  .sheet-detail { width: 100%; }
  .sheet-step + .sheet-step::before { width: 18px; }
  .sheet-step { font-size: 13.5px; }

  .cmdk { width: 100vw; margin-top: 24px; }

  /* The tab bar owns the bottom edge on mobile. */
  .capture-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes sheetExpand {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* --- 11f. Focus rings + reduced motion ------------------------------------
   The clay box-shadows out-specify the global button:focus-visible ring, so
   it is restored explicitly on every control this section introduces. */
.cmdk-foot-btn:focus-visible,
.sheet-close:focus-visible,
.sheet-seg-btn:focus-visible,
.sheet-risk-btn:focus-visible,
.sheet-submit:focus-visible,
.sheet-detail:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .cmdk[open],
  .sheet[open],
  .capture-toast {
    animation: none;
  }

  .cmdk::backdrop,
  .sheet::backdrop {
    backdrop-filter: none;
  }
}

/* ==========================================================================
   12. 1c — CLOSE & JOURNAL
   design-source/1c-journaling.html. Step 2 of the same <dialog> as 1b, so
   "open → close → journal" stays one object and the focus trap, Escape and
   inert background still come from the platform.

   The read: printed facts on the left/top, one-tap inputs below. Unchosen
   controls are pressed INTO the sheet, the chosen one lifts out of it —
   which is the same depth-as-data rule the calendar and the metric cards
   use, never load-bearing on its own (colour, text and aria-pressed all
   carry the same state).
   ========================================================================== */

/* Two forms share the dialog; .sheet-body sets display:grid, which out-ranks
   the UA [hidden] rule, so it has to be restated. */
.sheet-body[hidden] { display: none; }

/* The journalling half is two columns wide where 1b is one. Guarded above the
   bottom-sheet breakpoint: below it the sheet is full-bleed and this must not
   out-specify §11e's width. */
@media (min-width: 621px) {
  .sheet:has(.journal-sheet:not([hidden])) {
    width: min(680px, calc(100vw - 32px));
  }
}

.sheet-step.is-done { color: var(--text-soft); }

/* The number becomes a tick: step 1 is behind you, not a destination. */
.sheet-step.is-done .sheet-step-num {
  background: var(--accent-muted);
  color: var(--accent-strong);
  box-shadow: none;
  font-size: 0;
}

.sheet-step.is-done .sheet-step-num::after {
  content: "\2713";
  font-size: 13px;
}

/* --- 12a. The printed header --------------------------------------------- */
.jrn-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.jrn-id { flex: 1 1 220px; min-width: 0; }

.jrn-kicker {
  margin: 0;
  font: 600 10.5px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.jrn-symbol {
  margin: 6px 0 0;
  font: 700 26px/1.1 var(--font-ui);
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.jrn-meta {
  font: 600 14px/1.2 var(--font-mono, "JetBrains Mono", monospace);
  color: var(--text-faint);
}

.jrn-result { text-align: right; margin-left: auto; }

.jrn-net {
  margin: 0;
  font: 700 32px/1 var(--font-mono, "JetBrains Mono", monospace);
  color: var(--text);
}

.jrn-net.is-pos { color: var(--pnl-pos); }
.jrn-net.is-neg { color: var(--pnl-neg); }

.jrn-sub {
  margin: 5px 0 0;
  font: 600 12px/1 var(--font-mono, "JetBrains Mono", monospace);
  color: var(--text-faint);
}

/* --- 12b. Blocks + labels ------------------------------------------------- */
.jrn-block {
  display: grid;
  gap: 11px;
  align-content: start;
  min-width: 0;
}

.jrn-label {
  margin: 0;
  font: 600 10.5px/1.2 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The mockup fades this; --text-faint is already at the 4.5:1 floor, so the
   distinction is carried by case and weight instead of by opacity. */
.jrn-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-faint);
}

.jrn-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jrn-split-note { grid-template-columns: minmax(0, 1fr) 232px; }

/* --- 12c. One-tap chips --------------------------------------------------- */
.jrn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jrn-chip {
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-soft);
  font: 600 14px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

.jrn-chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-inverse);
  font-weight: 700;
  box-shadow: var(--clay-accent);
}

.jrn-chips-sm { gap: 8px; }

.jrn-chips-sm .jrn-chip {
  padding: 11px 15px;
  font-size: 12.5px;
}

/* A ticked mistake is a loss marker, not a preference: it sinks, and it goes
   red. The check glyph is the third, non-colour signal. */
.jrn-chips-sm .jrn-chip[aria-pressed="true"] {
  background: var(--pnl-neg-soft);
  color: var(--pnl-neg);
  box-shadow: var(--clay-pressed);
}

.jrn-chips-sm .jrn-chip[aria-pressed="true"]::before {
  content: "\2713\00a0";
  font-weight: 700;
}

.jrn-chip-add {
  min-height: 44px;
  padding: 11px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  font: 600 12.5px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.jrn-new-tag {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-clay-sm);
  background: var(--surface-inset);
  color: var(--text);
  font: 500 13.5px/1 var(--font-ui);
  box-shadow: var(--clay-pressed);
}

.jrn-new-tag[hidden] { display: none; }

.jrn-grades {
  display: flex;
  gap: 8px;
}

.jrn-grade {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  color: var(--text-faint);
  font: 600 15px/1 var(--font-mono, "JetBrains Mono", monospace);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

.jrn-grade[aria-pressed="true"] {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--clay-raised);
}

/* --- 12d. Note + chart ---------------------------------------------------- */
.jrn-note {
  width: 100%;
  min-height: 132px;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius-clay-sm);
  background: var(--surface-inset);
  color: var(--text);
  font: 400 14px/1.55 var(--font-ui);
  resize: vertical;
  box-shadow: var(--clay-pressed);
}

.jrn-note::placeholder { color: var(--text-faint); }

.jrn-note-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.jrn-mini {
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-soft);
  font: 600 12.5px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-soft);
}

.jrn-mini[hidden] { display: none; }

.jrn-drop {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 132px;
  padding: 14px;
  border: 0;
  border-radius: var(--radius-clay-sm);
  background: repeating-linear-gradient(
    135deg,
    var(--surface-inset) 0 9px,
    var(--surface-3) 9px 18px
  );
  color: var(--text-faint);
  font: 500 11px/1.5 var(--font-mono, "JetBrains Mono", monospace);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--clay-pressed);
}

.jrn-drop.is-over {
  background: var(--accent-muted);
  color: var(--accent-strong);
}

.jrn-drop.is-filled { background: var(--surface-inset); padding: 0; }

.jrn-drop img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: cover;
}

/* --- 12e. Actions --------------------------------------------------------- */
.jrn-actions { align-items: center; }

.jrn-foot {
  flex: 1 1 180px;
  margin: 0;
  max-width: 26ch;
  font: 400 12.5px/1.4 var(--font-ui);
  color: var(--text-faint);
}

/* --- 12f. The mobile route in --------------------------------------------- */
.dash-unj-cta {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-clay-sm);
  background: var(--text);
  color: var(--surface-1);
  font: 600 12.5px/1.2 var(--font-ui);
  text-align: left;
  cursor: pointer;
}

.dash-unj-cta[hidden] { display: none; }

.dash-unj-cta-count {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pnl-neg);
  /* --text-inverse, not white: the dark theme's --pnl-neg is a bright rose
     that white sits at ~2.4:1 on. */
  color: var(--text-inverse);
  font: 700 12px/1 var(--font-mono, "JetBrains Mono", monospace);
}

.dash-unj-cta-label { flex: 1; }
.dash-unj-cta-chevron { font: 700 16px/1 var(--font-ui); }

@media (max-width: 620px) {
  .dash-unj-cta:not([hidden]) { display: flex; }
  .dash-unjournalled .dash-unj-list { display: none; }

  .jrn-split,
  .jrn-split-note { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .jrn-symbol { font-size: 22px; }
  .jrn-net { font-size: 26px; }
  .jrn-head { gap: var(--space-3); }
  .jrn-result { text-align: left; margin-left: 0; }
  .jrn-grade { min-height: 48px; }
  .jrn-actions { flex-direction: column; align-items: stretch; }
  .jrn-foot { max-width: none; text-align: center; }
}

/* --- 12g. Focus rings -----------------------------------------------------
   The clay box-shadows out-specify the global :focus-visible ring, so it is
   restored explicitly on every control this section introduces. Nothing here
   animates, so there is no reduced-motion branch to add. */
.jrn-chip:focus-visible,
.jrn-chip-add:focus-visible,
.jrn-grade:focus-visible,
.jrn-mini:focus-visible,
.jrn-drop:focus-visible,
.jrn-new-tag:focus-visible,
.jrn-note:focus-visible,
.dash-unj-cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   13. 1e — TRADE REVIEW + CALENDAR
   Source: docs/renovation/design-source/1e-review-calendar.html.
   The review header carries search and Export, the chip row is the primary
   filter, and the table drops to seven columns plus a chevron. The calendar
   loses its two summary cards to a MONTH NET figure in the header.
   Colours are tokens only, so both themes come for free; the literals are the
   clay shadow recipes, theme-scoped exactly like §3/§4.
   ========================================================================== */

/* --- 13a. Review header --------------------------------------------------- */
.rev-head,
.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.rev-head-copy h2,
.cal-head-copy h2 {
  margin: 0;
  font: 700 24px/1.1 var(--font-ui);
  letter-spacing: -0.02em;
  text-transform: none;
}

.rev-count,
.cal-meta {
  margin: 6px 0 0;
  color: var(--text-soft);
  font: 400 13.5px/1.4 var(--font-ui);
}

.rev-count strong,
.cal-meta strong {
  color: var(--text);
  font-weight: 600;
}

.rev-head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* The search well. The input is the real control; the pill is the affordance. */
.rev-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
  box-shadow: var(--clay-pressed);
}

.rev-search-icon {
  color: var(--text-faint);
  font: 600 15px/1 var(--font-mono);
}

.rev-search input {
  width: clamp(140px, 22vw, 230px);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: 500 13.5px/1 var(--font-ui);
}

.rev-search input::placeholder {
  color: var(--text-faint);
}

.rev-search input:focus,
.rev-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

.rev-search:focus-within {
  box-shadow: var(--clay-pressed), var(--focus-ring);
}

.rev-search-key {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-soft);
  font: 600 10.5px/1 var(--font-mono);
}

.rev-export {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text);
  font: 600 13px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-raised);
}

.rev-export:active {
  box-shadow: var(--clay-pressed);
}

/* --- 13b. Filter chips ---------------------------------------------------- */
.rev-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--space-3);
}

.rev-chip,
.rev-select select {
  min-height: 44px;
  padding: 0 17px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
  color: var(--text-soft);
  font: 600 12.5px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

.rev-chip.is-active {
  background: var(--accent);
  color: var(--text-inverse);
  box-shadow:
    0 14px 24px -14px hsl(265 60% 40% / 0.6),
    inset 0 -5px 10px -5px hsl(265 70% 30% / 0.45),
    inset 0 6px 11px -5px hsl(0 0% 100% / 0.4);
}

:root:not([data-theme="light"]) .rev-chip.is-active {
  box-shadow:
    0 14px 26px -16px hsl(265 60% 8% / 0.75),
    inset 0 -5px 10px -5px hsl(265 40% 12% / 0.5),
    inset 0 6px 11px -5px hsl(265 60% 88% / 0.28);
}

/* The unjournalled count is a nag, not a neutral facet. */
.rev-chip-alert:not(.is-active) {
  background: var(--pnl-neg-soft);
  color: var(--pnl-neg);
}

.rev-chip-sep {
  width: 1px;
  height: 30px;
  margin: 0 4px;
  background: var(--line-strong);
}

.rev-select {
  position: relative;
  display: inline-flex;
  margin: 0;
}

.rev-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  max-width: 190px;
  text-overflow: ellipsis;
}

.rev-select::after {
  content: "▾";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font: 600 11px/1 var(--font-ui);
  pointer-events: none;
}

/* --- 13c. The rest of the filters ---------------------------------------- */
.rev-more {
  margin-bottom: var(--space-3);
  border-radius: var(--radius-clay-sm);
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 var(--clay-edge), var(--clay-soft);
}

.rev-more-summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-radius: var(--radius-clay-sm);
  color: var(--text-soft);
  font: 600 12px/1 var(--font-ui);
  cursor: pointer;
  list-style: none;
}

.rev-more-summary::-webkit-details-marker {
  display: none;
}

.rev-more-summary::before {
  content: "+";
  margin-right: 9px;
  color: var(--text-faint);
  font: 700 14px/1 var(--font-mono);
}

.rev-more[open] .rev-more-summary::before {
  content: "−";
}

.rev-more-body {
  padding: 0 18px 18px;
}

/* --- 13d. The table ------------------------------------------------------- */
#journal table {
  min-width: 820px;
}

#journal thead th {
  /* Seamless with the well the table sits in (§5c), and it has to stay opaque:
     the header is position:sticky, so a transparent fill lets rows through. */
  background: var(--surface-inset);
  border-bottom: 0;
  padding-bottom: 12px;
  letter-spacing: 0.12em;
}

#journal thead th[data-sort] {
  cursor: pointer;
}

.rev-date {
  color: var(--text-soft);
  white-space: nowrap;
}

.rev-symbol {
  font: 700 14px/1 var(--font-ui);
  letter-spacing: -0.01em;
}

.rev-setup {
  color: var(--text-soft);
  font: 500 13px/1.3 var(--font-ui);
}

.rev-net {
  font-weight: 700;
}

.rev-mood {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-soft);
  font: 600 11px/1 var(--font-mono);
  white-space: nowrap;
}

.rev-mood.is-good {
  background: var(--pnl-pos-soft);
  color: var(--pnl-pos);
}

.rev-mood.is-warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.rev-mood.is-bad {
  background: var(--pnl-neg-soft);
  color: var(--pnl-neg);
}

.rev-chev-head,
.rev-chev-cell {
  width: 52px;
}

.rev-chev {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

.rev-chev-glyph {
  display: block;
  font: 700 17px/1 var(--font-ui);
  transition: transform var(--dur-fast) var(--ease-out);
}

.rev-chev[aria-expanded="true"] .rev-chev-glyph {
  transform: rotate(90deg);
}

.rev-chev:hover {
  color: var(--text);
  background: var(--surface-3);
}

/* Depth as data, scaled (§5c + the 1e ramp). --row-intensity is stamped per
   row by renderJournalTable from the biggest result on screen. */
#journal tbody tr.trade-row-win {
  box-shadow:
    0 calc(10px + var(--row-intensity, 0) * 8px) calc(20px + var(--row-intensity, 0) * 12px) -16px
      hsl(35 30% 40% / calc(0.4 + var(--row-intensity, 0) * 0.2)),
    inset 0 -6px 12px -6px hsl(35 35% 45% / 0.18),
    inset 0 7px 12px -7px hsl(40 60% 100% / 1);
}

#journal tbody tr.trade-row-loss {
  box-shadow:
    inset 0 calc(5px + var(--row-intensity, 0) * 5px) calc(12px + var(--row-intensity, 0) * 9px) -3px
      hsl(345 38% 36% / calc(0.22 + var(--row-intensity, 0) * 0.2)),
    inset 0 -3px 6px -3px hsl(40 60% 100% / 0.8);
}

:root:not([data-theme="light"]) #journal tbody tr.trade-row-win {
  box-shadow:
    0 calc(10px + var(--row-intensity, 0) * 8px) calc(20px + var(--row-intensity, 0) * 12px) -16px
      hsl(30 40% 3% / calc(0.6 + var(--row-intensity, 0) * 0.2)),
    inset 0 -6px 12px -6px hsl(30 35% 3% / 0.5),
    inset 0 7px 12px -7px hsl(35 25% 78% / 0.12);
}

:root:not([data-theme="light"]) #journal tbody tr.trade-row-loss {
  box-shadow:
    inset 0 calc(5px + var(--row-intensity, 0) * 5px) calc(12px + var(--row-intensity, 0) * 9px) -3px
      hsl(345 50% 6% / calc(0.45 + var(--row-intensity, 0) * 0.25)),
    inset 0 -2px 5px -3px hsl(35 25% 78% / 0.05);
}

/* An open trade has no outcome yet, so it gets no depth in either direction. */
#journal tbody tr.trade-row-open td {
  background: var(--surface-3);
}

/* --- 13e. Row detail ------------------------------------------------------
   Everything the 13→7 column cut dropped, plus the row actions. */
#journal tbody tr.trade-detail-row {
  box-shadow: none;
}

.trade-detail-row[hidden] {
  display: none;
}

.trade-detail-row td {
  padding: 0 0 10px;
  background: transparent;
}

.rev-detail {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-clay-sm);
  background: var(--surface-inset);
  box-shadow: var(--clay-pressed);
}

.rev-detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px 18px;
  margin: 0;
}

.rev-detail-facts dt {
  color: var(--text-faint);
  font: 600 9.5px/1.2 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rev-detail-facts dd {
  margin: 5px 0 0;
  color: var(--text);
  font: 600 13px/1.3 var(--font-mono);
}

.rev-flag {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--pnl-neg-soft);
  color: var(--pnl-neg);
  font: 600 10px/1.4 var(--font-mono);
}

.rev-detail-note {
  margin: 0;
  color: var(--text-soft);
  font: 400 13px/1.5 var(--font-ui);
}

.rev-detail-key {
  display: block;
  margin-bottom: 3px;
  color: var(--text-faint);
  font: 600 9.5px/1.2 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rev-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rev-detail-actions .mini-btn {
  min-height: 44px;
  padding: 0 15px;
  margin-left: 0;
}

/* --- 13f. Calendar header ------------------------------------------------- */
.cal-head-side {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cal-net {
  text-align: right;
}

.cal-net-label {
  margin: 0;
  color: var(--text-faint);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cal-net-value {
  margin: 6px 0 0;
  font: 700 30px/1 var(--font-mono);
  font-feature-settings: "tnum";
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-nav-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  color: var(--text-soft);
  font: 600 17px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

.cal-nav-btn:hover {
  color: var(--text);
}

.cal-jump {
  margin: 0;
}

.cal-jump input {
  min-height: 44px;
  width: 148px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  color: var(--text-soft);
  font: 600 12px/1 var(--font-mono);
  box-shadow: var(--clay-pressed);
}

.calendar-cell-pnl {
  font: 700 15px/1 var(--font-mono);
}

.calendar-cell-day {
  justify-self: start;
  font: 600 11px/1 var(--font-mono);
}

.calendar-cell {
  min-height: 92px;
  align-content: space-between;
}

.calendar-cell-meta {
  color: var(--text-faint);
  font: 500 10.5px/1.3 var(--font-mono);
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-soft);
  font: 400 12.5px/1.4 var(--font-ui);
}

.cal-legend li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.cal-legend-swatch {
  flex: none;
  width: 26px;
  height: 20px;
  border-radius: 8px;
  background: var(--surface-3);
}

.cal-legend-up {
  background: var(--surface-1);
  box-shadow: 0 8px 14px -8px hsl(155 40% 25% / 0.5), inset 0 5px 8px -4px hsl(40 60% 100% / 1);
}

.cal-legend-down {
  box-shadow: inset 0 5px 10px -2px hsl(345 40% 35% / 0.4);
}

:root:not([data-theme="light"]) .cal-legend-up {
  box-shadow: 0 8px 14px -8px hsl(155 60% 8% / 0.7), inset 0 5px 8px -4px hsl(35 25% 78% / 0.12);
}

:root:not([data-theme="light"]) .cal-legend-down {
  box-shadow: inset 0 5px 10px -2px hsl(345 50% 6% / 0.6);
}

/* --- 13g. Mobile ---------------------------------------------------------
   375px is the target, not the fallback. The header stacks, the chip row
   scrolls horizontally rather than wrapping into four ragged lines, and the
   card transform from styles.css keeps working because every visible cell
   still carries data-label. */
@media (max-width: 900px) {
  /* The chevron and the detail row have no label — an empty ::before would
     leave a dead 42% column in the card grid. */
  .rev-chev-cell::before,
  .trade-detail-row td::before {
    content: none;
  }

  .rev-chev-cell {
    width: auto;
    display: flex;
    justify-content: flex-end;
    padding-top: 6px;
    border-bottom: 0;
  }

  #journal tbody tr.trade-detail-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  .trade-detail-row td {
    padding: 0 0 8px;
  }
}

@media (max-width: 760px) {
  .rev-head,
  .cal-head {
    align-items: stretch;
    gap: var(--space-3);
  }

  .rev-head-tools {
    width: 100%;
  }

  .rev-search {
    flex: 1;
  }

  .rev-search input {
    width: 100%;
    min-width: 0;
  }

  .rev-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-inline: calc(var(--space-3) * -1);
    padding-inline: var(--space-3);
    scrollbar-width: none;
  }

  .rev-chips::-webkit-scrollbar {
    display: none;
  }

  .rev-chip,
  .rev-select,
  .rev-select select,
  .rev-chip-sep {
    flex: none;
  }

  .cal-head-side {
    justify-content: space-between;
    width: 100%;
  }

  .cal-net {
    text-align: left;
  }

  .cal-net-value {
    font-size: 26px;
  }

  .cal-jump input {
    width: 130px;
  }

  .cal-legend {
    gap: 10px 18px;
    font-size: 12px;
  }

  /* Agenda mode hides untraded days, so the tiles are full-width rows. */
  .calendar-cell {
    min-height: 0;
  }
}

/* --- 13h. Focus rings ----------------------------------------------------
   The clay box-shadows out-specify the global :focus-visible ring, so it is
   restored explicitly on every control this section introduces. */
.rev-chip:focus-visible,
.rev-select select:focus-visible,
.rev-export:focus-visible,
.rev-more-summary:focus-visible,
.rev-chev:focus-visible,
.cal-nav-btn:focus-visible,
.cal-jump input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .rev-chev-glyph {
    transition: none;
  }
}

/* ==========================================================================
   14. 1f — SYSTEM FEATURES
   design-source/1f-features.html #01–#03: "the top three are what turn the
   journal from a record into a system."

   #01 finishes the unjournalled queue (the streak rule, stated on screen).
   #02 is the pre-trade checklist editor plus the causal readout — the money
       difference between the trades where a rule was ticked and the ones
       where it was skipped.
   #03 is the cooldown lock: a speed bump on "Log a trade" that asks one
       question. Never a colour-only signal — the badge carries a word, the
       button carries a title, and the dialog states the breach in figures.
   ========================================================================== */

/* --- 14a. #01 the dock badge + the streak rule, stated --------------------
   Absolutely positioned so it does not become a third row in the tab's
   two-row grid. */
.tabbar-badge {
  position: absolute;
  top: 1px;
  right: calc(50% - 20px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--pnl-neg);
  color: #fff;
  font: 700 9.5px/17px var(--font-mono, "JetBrains Mono", monospace);
  text-align: center;
}

.tabbar-badge[hidden] { display: none; }

.dash-unj-rule {
  margin: 10px 0 0;
  font: 400 11.5px/1.5 var(--font-ui);
  color: var(--text-faint);
}

/* --- 14b. #02 the checklist editor ---------------------------------------- */
.rules-form {
  display: grid;
  gap: var(--space-4);
}

.rules-list {
  display: grid;
  gap: 10px;
}

.rules-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rules-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-clay-sm);
  background: var(--surface-inset);
  color: var(--text);
  font: 500 14.5px/1.3 var(--font-ui);
  box-shadow: var(--clay-pressed);
}

.rules-remove {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-inset);
  color: var(--text-soft);
  font: 400 20px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

.rules-remove:hover {
  color: var(--pnl-neg);
}

.rules-empty {
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--radius-clay-sm);
  background: var(--surface-inset);
  box-shadow: var(--clay-pressed);
  font: 400 13px/1.55 var(--font-ui);
  color: var(--text-soft);
}

/* --- 14c. #02 the causal readout ------------------------------------------ */
.rule-cost {
  margin-top: var(--space-4);
}

.rule-cost-title {
  margin: 0 0 8px;
  font: 600 10px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rule-cost-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rule-cost-item,
.rule-cost-note {
  padding: 12px 15px;
  border-radius: var(--radius-clay-sm);
  background: var(--surface-inset);
  box-shadow: var(--clay-pressed);
  font: 400 13px/1.55 var(--font-ui);
  color: var(--text-soft);
}

.rule-cost-item strong {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-weight: 700;
  color: var(--text);
}

/* Depth is never the only signal: the left rule and the figure's colour say
   the same thing the shadow does. */
.rule-cost-item.is-bad {
  border-left: 3px solid var(--pnl-neg);
  color: var(--text);
}

.rule-cost-item.is-bad strong {
  color: var(--pnl-neg);
}

.rule-cost-item.is-good {
  border-left: 3px solid var(--pnl-pos);
  color: var(--text);
}

.rule-cost-item.is-good strong {
  color: var(--pnl-pos);
}

/* Skipped rules / cooldown overrides in the review row detail. */
.rev-detail-note.is-warn .rev-detail-key {
  color: var(--warn);
}

/* --- 14d. #03 cooldown settings ------------------------------------------- */
.cooldown-fieldset {
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--radius-clay-md);
  background: var(--surface-inset);
  box-shadow: var(--clay-pressed);
}

.cooldown-fieldset legend {
  padding: 0 6px;
  font: 700 13px/1 var(--font-ui);
  color: var(--text);
}

.cooldown-fieldset-note {
  margin: 6px 0 14px;
  font: 400 12.5px/1.55 var(--font-ui);
  color: var(--text-soft);
}

.cooldown-fieldset-grid {
  display: grid;
  gap: 14px;
}

.cooldown-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 500 13.5px/1.35 var(--font-ui);
  color: var(--text);
  cursor: pointer;
}

.cooldown-toggle input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

/* --- 14e. #03 the button state --------------------------------------------
   The accent background is NOT swapped for the warn colour: --accent and
   --warn invert between themes (dark text on light violet in dark mode, white
   on deep violet in light) and a single override cannot carry a legible label
   in both. The state is a warn RING plus a warn-on-card badge — the badge
   also carries a word, so colour is never the only signal (WCAG 1.4.1). */
.dash-log-flag {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--warn);
  font: 700 9.5px/1.35 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-log-flag[hidden] { display: none; }

.dash-log-btn.is-cooldown,
.tabbar-fab.is-cooldown {
  box-shadow: var(--clay-accent), 0 0 0 3px var(--warn);
}

/* --- 14f. #03 the dialog -------------------------------------------------- */
.cooldown-dialog {
  width: min(500px, calc(100vw - 32px));
  margin: auto;
}

.cooldown-body {
  display: grid;
  gap: 14px;
  padding: var(--space-6);
  border-radius: var(--radius-clay-xl);
  background: var(--surface-1);
  box-shadow: var(--clay-float);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}

.cooldown-kicker {
  margin: 0;
  font: 700 10px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn);
}

.cooldown-headline {
  margin: 0;
  font: 700 24px/1.2 var(--font-ui);
  color: var(--text);
}

.cooldown-detail {
  margin: 0;
  font: 400 14px/1.55 var(--font-ui);
  color: var(--text-soft);
}

.cooldown-field {
  display: grid;
  gap: 8px;
}

.cooldown-question {
  font: 600 14.5px/1.4 var(--font-ui);
  color: var(--text);
}

.cooldown-answer {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-clay-sm);
  background: var(--surface-inset);
  color: var(--text);
  font: 400 14.5px/1.5 var(--font-ui);
  box-shadow: var(--clay-pressed);
  resize: vertical;
}

.cooldown-message:empty { display: none; }

.cooldown-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cooldown-proceed {
  flex: 1 1 200px;
  min-height: 56px;
  border: 0;
  border-radius: var(--radius-clay-md);
  background: var(--accent);
  color: var(--text-inverse);
  font: 700 16px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-accent);
}

.cooldown-away {
  flex: 0 0 auto;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-clay-md);
  background: var(--surface-inset);
  color: var(--text-soft);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--clay-pressed);
}

.cooldown-settings {
  justify-self: start;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 12.5px/1 var(--font-ui);
  cursor: pointer;
}

/* --- 14g. Mobile ---------------------------------------------------------- */
@media (max-width: 620px) {
  .cooldown-body { padding: var(--space-5); }
  .cooldown-headline { font-size: 20px; }
  .cooldown-proceed,
  .cooldown-away { width: 100%; }
  .rules-input { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .cooldown-dialog[open] { animation: none; }
  .cooldown-dialog::backdrop { backdrop-filter: none; }
}

/* --- 14h. Focus rings ------------------------------------------------------
   The clay box-shadows out-specify the global :focus-visible ring, so it is
   restored explicitly on every control this section introduces. */
.rules-input:focus-visible,
.rules-remove:focus-visible,
.cooldown-answer:focus-visible,
.cooldown-proceed:focus-visible,
.cooldown-away:focus-visible,
.cooldown-settings:focus-visible,
.cooldown-toggle input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}