@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══ Design tokens ═══════════════════════════════════════
   The whole app is built on the --gray-* ramp + --black/--white:
   low grays = backgrounds/surfaces, mid = borders/decoration,
   high grays + white = text. Light mode simply REMAPS these same
   token values (paper + ink), so every component flips at once.
   Overlays that can't be a flat gray (glows, hairlines, shadows)
   are their own theme-aware tokens.                            */

:root {
  /* ── CLEAN FINTECH (2026-10-05, Daniel's choice of four directions) ─────────
     Deep charcoal, flat surfaces, ivory text, and gold kept for the one thing
     the eye should go to next — the primary action or the key insight. It
     replaces "cosmic obsidian" (a navy ground, metal gold, a lit-from-above
     card recipe and atmosphere glows), which the brief asked to calm down.

     The --gray-* ramp keeps its contract: low = grounds and surfaces, mid =
     borders, high = text, and light mode remaps the same names. It is a near-
     neutral charcoal now (a whisper cool at the dark end, a whisper warm at the
     text end, so the ivory reads as ivory and not as a tint).

     Verified against #101113: gray-300 7.0:1, gray-200 10.9:1, gray-100 13.6:1,
     white 16.4:1 — every text tier clears WCAG AA with room to spare.        */
  --black:      #101113;
  --gray-950:   #131416;
  --gray-900:   #16171a;
  --gray-850:   #1a1b1e;
  --gray-800:   #1e1f23;
  --gray-750:   #24252a;
  --gray-700:   #2c2d32;
  --gray-600:   #37393e;   /* borders */
  --gray-500:   #4a4c52;   /* borders / decoration */
  --gray-400:   #6b6d73;   /* decoration only — never text */
  --gray-300:   #9b9ca1;   /* placeholders / tiny labels */
  --gray-200:   #c4c2bc;   /* secondary text */
  --gray-100:   #d9d6cf;   /* instructional hints */
  --gray-50:    #e7e4dd;
  --white:      #f1eee7;   /* primary text — ivory */
  --pure-white: #faf8f3;   /* headings */

  /* Money colours: data, never decoration. */
  --win:        #4f9d76;
  --win-bg:     #10241a;
  --win-text:   #7fd3a3;
  --loss:       #b8615d;
  --loss-bg:    #2a1514;
  --loss-text:  #ec8f88;
  --be-bg:      #1a1b1e;
  --be-text:    #a6a7ad;

  /* ── GOLD, REFINED ─────────────────────────────────────────────────────────
     One flat, softer gold (#D8B460) where the old one was a saturated metal
     ramp. It marks the next action (the primary button, "New entry") and the
     one insight that matters on a screen — nothing else. --gold-metal is kept
     as a name so older rules still resolve, but it is a near-flat fill now:
     no highlight, no bronze shadow, no shine.                                */
  --moon:      #d8b460;
  --moon-soft: rgba(216, 180, 96, 0.12);
  --moon-glow: rgba(216, 180, 96, 0.20);
  --accent:    var(--moon);          /* Settings → accent overrides it inline */
  --on-accent: #17130a;              /* text on a gold fill */

  --gold-hi:   #e3c47d;
  --gold-mid:  #d8b460;
  --gold-low:  #b8964f;
  --gold-deep: #8c7036;
  --gold-metal: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-mid) 100%);

  /* The bull's teal belonged to the old atmosphere; it stays defined, quietly. */
  --bull:      #5b8fa6;
  --bull-soft: rgba(91, 143, 166, 0.06);
  --bull-glow: rgba(91, 143, 166, 0.12);

  /* ── Surfaces + edges ──────────────────────────────────────────────────────
     FLAT. A card is one clean fill above the ground with a 1px edge you can
     see — no top-lit gradient, no lip, no halo. --surface-top / --lit keep
     their names so older rules still resolve, but they now equal the flat
     surface. The rule that remains: --surface must sit clearly above --black. */
  --surface:      #18191c;
  --surface-top:  #18191c;
  --surface-shade:#151619;
  --surface-2:    #1f2024;   /* raised: hover, a selected tab, a popover */
  --surface-sunk: #0c0d0f;   /* recessed: inputs, calendar cells, a segmented track */
  --edge:         rgba(255,255,255,0.075);
  --edge-hi:      rgba(255,255,255,0.16);
  --shadow-tight: rgba(0,0,0,0.35);

  --lit:        rgba(255,255,255,0);
  --lit-soft:   rgba(255,255,255,0);
  --room:       rgba(255,255,255,0);

  /* ── Shape ─────────────────────────────────────────────────────────────────
     One card radius, one control shape (a pill), one field radius. */
  --radius-card:  16px;
  --radius-field: 12px;
  --radius-pill:  999px;

  /* theme-aware overlays (flip under light mode) */
  --tint:        rgba(255,255,255,0.035);
  --tint-strong: rgba(255,255,255,0.07);
  --hairline:    rgba(255,255,255,0.06);
  --shadow:      rgba(0,0,0,0.40);
  --shadow-lg:   rgba(0,0,0,0.50);
  --grid-line:   rgba(255,255,255,0.05);
  --glow:        rgba(255,255,255,0.10);
  --nav-bg:      rgba(16,17,19,0.88);
  --focus-ring:  0 0 0 2px var(--black), 0 0 0 4px var(--accent, var(--moon));

  /* ONE typeface for everything: Heebo covers Hebrew and Latin, and its
     figures are tabular by default — money lines up in columns. */
  --font-display: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --t: 150ms ease;
  --t-slow: 300ms ease;

  color-scheme: dark;
}
/* Settings → accent "none": the custom property becomes invalid, so every
   var(--accent, fallback) takes its fallback, as it did before. */
:root[data-accent="off"] { --accent: initial; }

/* Light — warm paper white + ink. Same token names, flipped. */
:root[data-theme="light"] {
  --black:      #f6f5f2;   /* page background */
  --gray-950:   #f2f1ee;
  --gray-900:   #f9f8f6;
  --gray-850:   #fbfaf8;
  --gray-800:   #ffffff;   /* cards */
  --gray-750:   #ffffff;
  --gray-700:   #fdfcfb;
  --gray-600:   #e4e2dd;   /* borders */
  --gray-500:   #d4d2cc;   /* borders / decoration */
  --gray-400:   #b3b1ab;   /* decoration only */
  --gray-300:   #75767b;   /* placeholders / tiny labels */
  --gray-200:   #5c5d62;   /* secondary text */
  --gray-100:   #45464b;   /* instructional hints */
  --gray-50:    #2e2f33;
  --white:      #16171a;   /* primary text (ink) */
  --pure-white: #0e0f11;   /* headings */

  --win:        #3f7d5c;
  --win-bg:     #e4efe7;
  --win-text:   #2a6a46;
  --loss:       #b0605a;
  --loss-bg:    #f7e6e3;
  --loss-text:  #a3403a;
  --be-bg:      #efeeea;
  --be-text:    #5c5d62;

  /* Gold on paper is deepened to stay readable (4.9:1 on the page) — the
     screen gold glares on white. */
  --moon:      #8a6a1f;
  --moon-soft: rgba(138, 106, 31, 0.10);
  --moon-glow: rgba(138, 106, 31, 0.16);
  --on-accent: #ffffff;

  --gold-hi:   #a8832e;
  --gold-mid:  #8a6a1f;
  --gold-low:  #74591b;
  --gold-deep: #5a4516;
  --gold-metal: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-mid) 100%);

  --bull:      #3c6f86;
  --bull-soft: rgba(60, 111, 134, 0.06);
  --bull-glow: rgba(60, 111, 134, 0.10);

  --surface:      #ffffff;
  --surface-top:  #ffffff;
  --surface-shade:#fbfaf8;
  --surface-2:    #ffffff;
  --surface-sunk: #eeede9;
  --edge:         rgba(20,20,25,0.09);
  --edge-hi:      rgba(20,20,25,0.16);
  --shadow-tight: rgba(20,20,25,0.06);

  --lit:        rgba(255,255,255,0);
  --lit-soft:   rgba(255,255,255,0);
  --room:       rgba(255,255,255,0);

  --tint:        rgba(20,20,25,0.03);
  --tint-strong: rgba(20,20,25,0.055);
  --hairline:    rgba(20,20,25,0.07);
  --shadow:      rgba(20,20,25,0.08);
  --shadow-lg:   rgba(20,20,25,0.12);
  --grid-line:   rgba(20,20,25,0.06);
  --glow:        rgba(138,106,31,0.14);
  --nav-bg:      rgba(246,245,242,0.88);

  color-scheme: light;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; color: var(--pure-white); }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); }

/* ═══ Bidi base direction ══════════════════════════════════
   The document stays dir="ltr" on purpose (the i18n engine flips RTL islands
   with CSS instead of mirroring the layout). The cost is that a Hebrew sentence
   with no direction of its own is laid out against an LTR base, and any number,
   currency symbol or Latin run at its EDGE is thrown to the wrong end:
     "10 סשנים תועדו · מאז 19 ביולי"  →  "סשנים תועדו · מאז 19 ביולי 10"
     "הגדר את מפתח ה-API וההעדפות"    →  "וההעדפות API-הגדר את מפתח ה"

   Measured, not assumed: isolating the number (<bdi> / FSI+PDI) does NOT fix
   this — the sentence is still scrambled. Only a correct base direction does.

   `unicode-bidi: plaintext` is the CSS form of dir="auto": each paragraph takes
   the direction of its first strong character. That makes one rule correct in
   BOTH languages — Hebrew copy resolves RTL, the same element in English mode
   resolves LTR — which a hardcoded dir="rtl" could not do.

   ⚠️ SIDE EFFECT TO KNOW ABOUT: `plaintext` also re-resolves `text-align: start`,
   so a Hebrew paragraph that used the default alignment jumps to the right edge.
   That is locale-correct, but it is a layout change rather than a bug fix, so
   anything where it visibly moved is pinned back below. Only elements the
   site-wide scan actually flagged are listed — resist adding speculative ones,
   because each addition risks another silent alignment shift.
   :not([dir]) so anything that states its direction explicitly still wins.
   ⚠️ Adding a new element that shows a full sentence of app copy? Add it here. */
.page-subtitle:not([dir]),
.section-sub:not([dir]),
.feature-title:not([dir]),
.feature-text:not([dir]),
.seq-q-tag:not([dir]),
.calendar-month-label:not([dir]),
.cal-tooltip:not([dir]),
.entry-date:not([dir]),
.entry-meta:not([dir]),
.entry-note:not([dir]),
.ready-title:not([dir]),
.ready-sub:not([dir]),
.dash-insight-text:not([dir]),
.metric-label:not([dir]),
.ah-eyebrow-sub:not([dir]),
.a-seg-btn:not([dir]),
.a-section-note:not([dir]),
.chart-card-title:not([dir]),
.chart-card-sub:not([dir]),
.stat-label:not([dir]),
.stat-value:not([dir]),
.stat-sub:not([dir]),
.trade-empty-title:not([dir]),
.trade-empty-sub:not([dir]),
.journal-header-date:not([dir]),
.entry-summary-label:not([dir]),
.step-hint:not([dir]),
.settings-section-title:not([dir]),
.settings-row-label:not([dir]),
.settings-row-desc:not([dir]),
.confirm-text:not([dir]),
.method-card-hint:not([dir]),
.rbc-period:not([dir]),
.rbc-caption:not([dir]),
/* 2026-08-27 sweep. The earlier scan only looked for Hebrew MIXED with digits
   or Latin, so it never saw the commonest form of this bug: a sentence of pure
   Hebrew ending in a full stop. The stop is a NEUTRAL, it is the last thing on
   the line, and against an LTR base it is placed after the whole RTL run —
   i.e. at the wrong end. Found by measuring the closing character's own x
   against the last Hebrew letter's, which is the only honest test. */
.hero-headline:not([dir]),
.hero-social-proof:not([dir]),
.footer-text:not([dir]),
.persona-desc:not([dir]),
.acct-rules-hint:not([dir]),
.breath-caption:not([dir]),
/* Second half of the same sweep: everything inside a MODAL or a loading state.
   The first pass missed all of it because those elements are display:none until
   something opens them, so a plain DOM walk never sees a word of their copy.
   The scanner now forces every overlay visible before it measures. */
.modal-sub:not([dir]),
.modal-title:not([dir]),
.loading-row:not([dir]),
.edit-choice-sub:not([dir]),
.edit-choice-title:not([dir]),
.checklist-empty-hint:not([dir]),
.confirm-title:not([dir]),
/* 2026-09-16, site review prompt 3: the new-user line in recent entries ("…החדשה ביותר למעלה.") */
.empty-state-text:not([dir]),
/* Same pass: "News+" became "חדשות+" in Hebrew mode (Daniel's choice). The "+" is a neutral at the
   END of an RTL word, so on the LTR base it was measured 37px to the RIGHT of the word: "+חדשות".
   The links shrink to their text, so plaintext moves nothing else. */
.nav-link:not([dir]),
.btn:not([dir]) {
  unicode-bidi: plaintext;
}
/* ═══ User-written and AI-written text follows ITS OWN language ═══════════
   Journal notes, coach answers, reflection questions, the weekly mantra — the
   UI cannot know what language any of it is in, and Daniel writes Hebrew while
   the app may be running in English.

   ⚠️ This is a SECOND bug with the same symptom as the block above, and it only
   appears in ENGLISH mode, which is why it survived every Hebrew screenshot.
   `:root[data-lang="en"] [dir="rtl"] { direction: ltr }` flips every RTL island
   so the CHROME reads left-to-right — and it was flipping the trader's own
   sentences with it, throwing the closing full stop of every journal note to
   the wrong end. Measured: 15 elements across the dashboard and the journal.

   plaintext resolves each block from its own first strong character, so it is
   correct in both UI languages and for both content languages. Alignment is
   deliberately NOT set here — .motivation-text is centred by design, and
   plaintext already re-resolves any inherited `text-align: start`. */
.entry-excerpt,
.entry-summary-value,
.feedback-body,
.feedback-body p,
.motivation-text,
.summary-point,
.question-text,
.beta-note p,
/* The trader's own boxes: the session notes and the step-2 answers. The box and its
   ::placeholder each need the rule — measured 2026-09-16 in Chrome: dir="auto" resolves
   an EMPTY box to LTR (the placeholder does not count), and plaintext on the box alone
   leaves the placeholder's closing "?" / "…" at the wrong end. */
#notes, #notes::placeholder,
.question-answer, .question-answer::placeholder {
  unicode-bidi: plaintext;
}

/* Pinned back: these three used the default alignment, so the fix above would
   have moved them to the right edge. Flipping the whole app's copy to
   locale-aligned is a real option — but it is a design change, not a bug fix. */
.page-subtitle, .settings-row-desc, .journal-header-date { text-align: left; }

/* ─── Layout ─────────────────────────────────────────── */

.container       { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.container--sm   { max-width: 720px;  margin: 0 auto; padding: 0 28px; }
.container--xs   { max-width: 560px;  margin: 0 auto; padding: 0 28px; }

.page-wrapper { min-height: 100vh; padding-top: 58px; }

/* 44+36 padding plus a 36 margin put 116px of empty page above the first real
   content. On a screen that is breathing room; in a one-second cut it is a
   third of the frame carrying nothing. Tightened — the air now sits between
   the content blocks, where it separates things, instead of above them. */
.page-header {
  padding: 26px 0 20px;
  border-bottom: 1px solid var(--gray-800);
  margin-bottom: 22px;
}

.page-title    { font-size: 1.5rem; font-weight: 700; }
/* REDESIGN 2026-10-05: every page header reads from the reading side — right in Hebrew,
   left in English — instead of pinning the Hebrew title to the left edge. */
:root:not([data-lang="en"]) .page-header { direction: rtl; }
.page-header .page-title, .page-header .page-subtitle { text-align: start; }
.page-subtitle { font-size: 0.875rem; color: var(--gray-200); margin-top: 4px; }

/* ─── Navigation ─────────────────────────────────────── */

.main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 58px;
  display: flex;
  align-items: center;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gray-800);
}

.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pure-white);
}

.nav-logo-mark {
  width: 24px; height: 24px;
  background: var(--pure-white);
  border-radius: 5px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

.nav-logo-mark::after {
  content: '';
  width: 10px; height: 10px;
  background: var(--black);
  border-radius: 2px;
}

.nav-links { display: flex; align-items: center; gap: 2px; }

.nav-link {
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-300);
  transition: color var(--t), background var(--t);
}

.nav-link:hover { color: var(--white); background: var(--tint); }
/* The page you are on: ivory text on a quiet pill — gold is kept for the action. */
.nav-link.active { color: var(--pure-white); background: var(--tint-strong); }
.nav-link:focus-visible, .nav-cta:focus-visible, .nav-logo:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* "New entry" — the app's one primary action, so it wears the gold. */
.nav-cta {
  padding: 7px 16px;
  background: var(--accent, var(--moon));
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  transition: filter var(--t);
  margin-left: 6px;
}

.nav-cta:hover { filter: brightness(1.06); }
:root[data-accent="off"] .nav-cta { background: var(--white); color: var(--black); }

/* ─── Buttons ────────────────────────────────────────── */

/* CLEAN FINTECH buttons (2026-10-05): one shape — a pill — and one colour
   rule. GOLD is the primary action, on every page (the app included: the brief
   asks gold to lead the eye to the next action). Secondary is an ivory
   outline, ghost is text only. A button says what it does. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t), filter var(--t);
  white-space: nowrap;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
html:not(.anim-off) .btn:active { transform: scale(0.98); }

.btn-primary { background: var(--accent, var(--moon)); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.06); }
/* Accent "none" in Settings: the primary button falls back to ivory, as before. */
:root[data-accent="off"] .btn-primary { background: var(--white); color: var(--black); }

.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--gray-600);
}
.btn-secondary:hover { border-color: var(--gray-400); background: var(--tint); }

.btn-ghost { background: transparent; color: var(--gray-200); }
.btn-ghost:hover { color: var(--white); background: var(--tint); }

.btn-danger { background: var(--loss-bg); color: var(--loss-text); border-color: var(--loss); }
.btn-danger:hover { filter: brightness(1.1); }

.btn-lg { min-height: 48px; padding: 12px 28px; font-size: 1rem; font-weight: 600; }
.btn-sm { min-height: 32px; padding: 5px 14px; font-size: 0.8125rem; }
.btn-full { width: 100%; }

.btn-icon {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 7px;
  background: var(--gray-800);
  color: var(--gray-300);
  border: 1px solid var(--gray-700);
}
/* Hit area grown by a pseudo-element, not by padding: the control looks and
   lays out exactly as before, only a finger's target gets bigger. */
/* 34px -> 44px. */
.btn-icon { position: relative; }
.btn-icon::after { content: ''; position: absolute; inset: -5px; }

.btn-icon:hover { color: var(--white); border-color: var(--gray-500); }

/* ─── Cards ──────────────────────────────────────────── */

.card {
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 12px;
  padding: 24px;
}

.card-sm { border-radius: 9px; padding: 16px; }

/* ─── Forms ──────────────────────────────────────────── */

.form-stack { display: flex; flex-direction: column; gap: 20px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-300);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.form-input, .form-textarea, .form-select {
  background: var(--surface-sunk);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-field);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.9375rem;
  padding: 10px 14px;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
  width: 100%;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent, var(--gray-400));
  box-shadow: 0 0 0 3px var(--moon-soft);
}

.form-input::placeholder, .form-textarea::placeholder { color: var(--gray-300); }

.form-textarea {
  resize: none;
  min-height: 130px;
  line-height: 1.65;
}

.form-select option { background: var(--gray-900); }

/* ─── Native control cleanup (on-brand form controls) ─── */

/* Number inputs — hide the chunky native spinner arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Date and time inputs — tint the native picker icon so it reads on the dark theme */
.form-input[type="date"]::-webkit-calendar-picker-indicator,
.form-input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.65);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--t);
}
.form-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Select — replace the native arrow with a custom on-brand chevron */
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23a8a8a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* ─── Result Selector ────────────────────────────────── */

.result-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.result-btn {
  padding: 10px 6px;
  border-radius: 8px;
  border: 1px solid var(--gray-700);
  background: var(--gray-850);
  color: var(--gray-300);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t);
  text-align: center;
}

.result-btn:hover { border-color: var(--gray-500); color: var(--white); }
.result-btn.sel-win  { background: var(--win-bg);  border-color: var(--win);  color: var(--win-text); }
.result-btn.sel-loss { background: var(--loss-bg); border-color: var(--loss); color: var(--loss-text); }
.result-btn.sel-be   { background: var(--gray-700); border-color: var(--gray-500); color: var(--gray-100); }
.result-btn.sel-notrade { background: var(--gray-800); border-color: var(--gray-600); color: var(--gray-200); }

/* ─── Stats ──────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-card {
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 10px;
  padding: 18px 20px;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-200);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 2.125rem;
  font-weight: 500;
  color: var(--pure-white);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-value.win-color { color: var(--win-text); }
.stat-sub { font-size: 0.75rem; color: var(--gray-200); margin-top: 5px; }

/* ─── Calendar ───────────────────────────────────────── */

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.calendar-month-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pure-white);
  letter-spacing: 0.02em;
}

.calendar-grid {
  display: grid;
  /* minmax(0,1fr), NOT 1fr. A `1fr` track carries an automatic MINIMUM of
     min-content, so these seven cells could never shrink below the width of
     the widest P&L inside them. Measured on a real 390px viewport that floor
     was 373px, which pushed the calendar card to 427px and gave the dashboard
     65px of sideways scroll. The two render identically wherever there is
     room, so this removes a floor rather than changing a layout. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal-head {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-200);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 0;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-200);
  transition: all var(--t);
  border: 1px solid transparent;
  position: relative;
}

.cal-day.empty { cursor: default; pointer-events: none; }

/* ⚠️ NO `background` HERE. The consolidated block near the end of this file
   tints these cells with a whisper `color-mix` over --surface-sunk; a flat fill
   on hover wiped that out and replaced it with a mid-grey, so a cell lost its
   win/loss identity the moment the cursor touched it. The lift now comes from
   the border, the text and the transform. */
.cal-day:not(.empty):hover {
  border-color: var(--gray-600);
  color: var(--white);
}

/* The win/loss/be/notrade fills used to be declared here as well, with
   hardcoded borders (#1e4a2e, #4a1e1e) and hardcoded hover fills (#1e3d28,
   #3d1e1e). All of them were superseded by the consolidated block at the end of
   this file — except the two hover BACKGROUNDS, which had no counterpart there
   and so survived: hovering a day jumped it off its whisper tint onto a
   hardcoded dark green or red that could not follow the light theme.
   Deleted rather than overridden; the colours live in one place now. */

.cal-day.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gray-200);
}

.cal-day.today.win::after  { background: var(--win-text); }
.cal-day.today.loss::after { background: var(--loss-text); }

.cal-day.future { opacity: 0.25; cursor: default; pointer-events: none; }

/* ─── Badges ─────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge-win     { background: var(--win-bg);  color: var(--win-text);  border: 1px solid var(--win); }
.badge-loss    { background: var(--loss-bg); color: var(--loss-text); border: 1px solid var(--loss); }
.badge-be      { background: var(--be-bg);   color: var(--be-text);   border: 1px solid var(--gray-600); }
.badge-notrade { background: var(--gray-850); color: var(--gray-200); border: 1px solid var(--gray-700); }

/* ─── Entry List ─────────────────────────────────────── */

.entry-list { display: flex; flex-direction: column; gap: 8px; }

.entry-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 9px;
  cursor: pointer;
  transition: all var(--t);
}

.entry-item:hover { background: var(--gray-800); border-color: var(--gray-600); }

.entry-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-300);
  white-space: nowrap;
  min-width: 80px;
}

.entry-excerpt {
  font-size: 0.875rem;
  color: var(--gray-300);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* ─── Journal Steps ──────────────────────────────────── */

.journal-step { display: none; }
.journal-step.active { display: block; animation: fadeIn 0.35s ease; }

.step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 36px;
}

.step-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-200);
}

.step-dot.active { color: var(--white); }
.step-dot.done   { color: var(--gray-200); }

.step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--gray-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}

.step-dot.active .step-num {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.step-dot.done .step-num {
  background: var(--gray-700);
  border-color: var(--gray-600);
}

.step-line {
  flex: 1;
  height: 1px;
  background: var(--gray-700);
  margin: 0 10px;
}

/* ─── Questions ──────────────────────────────────────── */

.question-card {
  background: var(--gray-850);
  border: 1px solid var(--gray-700);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 14px;
  animation: fadeIn 0.4s ease;
}

.question-text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.55;
}

.question-answer {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 7px;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.875rem;
  padding: 10px 13px;
  resize: none;
  min-height: 80px;
  width: 100%;
  line-height: 1.6;
  transition: border-color var(--t);
}

.question-answer:focus { outline: none; border-color: var(--accent, var(--gray-400)); }
.question-answer::placeholder { color: var(--gray-300); }

/* ─── Feedback ───────────────────────────────────────── */

/* Material comes from the consolidated block (this card stands IN the light —
   see "Journal step 3"). Only layout here. */
.feedback-card {
  padding: 28px;
  animation: fadeIn 0.5s ease;
}

.feedback-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-800);
}

.feedback-icon {
  width: 36px; height: 36px;
  background: var(--gray-800);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}

.feedback-title { font-size: 1rem; font-weight: 600; }
.feedback-subtitle { font-size: 0.8rem; color: var(--gray-200); }

.feedback-body {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray-100);
}

/* pre-wrap belongs on the PARAGRAPHS, not the container. On the container it
   also preserved the template literal's own newlines and indentation, which
   rendered as a large blank band above and below a short reply — the card
   looked broken with a single line floating in ~270px of nothing. */
.feedback-body p { margin-bottom: 1em; white-space: pre-wrap; }
.feedback-body p:last-child { margin-bottom: 0; }

/* ─── Loading ────────────────────────────────────────── */

.loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  color: var(--gray-200);
  font-size: 0.875rem;
}

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--gray-700);
  border-top-color: var(--gray-300);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Alerts ─────────────────────────────────────────── */

.alert {
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  border: 1px solid;
  line-height: 1.55;
  /* A Hebrew message ends in a full stop — a neutral character that the LTR
     document base throws to the wrong end. Each alert takes its own direction. */
  unicode-bidi: plaintext;
  text-align: start;
}

.alert a { text-decoration: underline; opacity: 0.85; }
.alert-error   { background: #2a1010; border-color: #5a2222; color: #e08888; }
.alert-success { background: #102a18; border-color: #225a38; color: #88e0a8; }
.alert-info    { background: var(--gray-900); border-color: var(--gray-700); color: var(--gray-200); }
/* "Try again" inside a failed AI alert (journal, dashboard modals) */
.alert .ai-retry { margin-inline-start: 10px; vertical-align: middle; }
/* ⚠️ The error alert is dark red in BOTH themes, while .btn-secondary takes the theme's text
   colour — in the light theme that put dark text on dark red, and "Try again" all but vanished
   (seen 2026-10-05). On this one fixed background the button wears the alert's own colours. */
.alert-error .ai-retry { color: inherit; border-color: #8a3a3a; }
.alert-error .ai-retry:hover { background: rgba(255,255,255,0.06); border-color: #b25454; }

/* ─── Divider ────────────────────────────────────────── */

.divider { height: 1px; background: var(--gray-800); margin: 28px 0; }
.divider--sm { margin: 16px 0; }

/* ─── Empty State ────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--gray-200);
}

.empty-state-icon { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }
.empty-state-title { font-size: 1rem; font-weight: 600; color: var(--gray-100); margin-bottom: 6px; }
.empty-state-text  { font-size: 0.875rem; color: var(--gray-200); }

/* ─── Settings ───────────────────────────────────────── */

.settings-section {
  margin-bottom: 36px;
}

/* ⚠️ This rule was DEAD until 2026-08-26: all eight headings in settings.html
   carried the same eight declarations inline, so the same micro-label was
   written nine times and the one in this file never applied. They are now a
   real section head — the display serif over a fading rule, the same vocabulary
   analytics uses — and the inline copies are gone.

   ⚠️ The rule is a ::after BLOCK, not a flex sibling like .a-section-line. This
   selector is in the `unicode-bidi: plaintext` list near the top of this file,
   which re-resolves `text-align: start` so a Hebrew heading sits right and an
   English one sits left. Making the heading a flex container would hand
   placement to `justify-content` instead, which follows the DOCUMENT direction
   (always ltr here) — the same trap that once threw .seq-q-tag to the opposite
   edge from all its siblings. An underline needs no alignment to survive. */
.settings-section-title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.005em;
  margin: 34px 0 14px;
}

.settings-section-title::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 10px;
  /* Solid where the heading is, fading away from it. */
  background: linear-gradient(270deg, var(--edge) 0%, var(--edge) 26%, transparent 100%);
}
:root[data-lang="en"] .settings-section-title::after {
  background: linear-gradient(90deg, var(--edge) 0%, var(--edge) 26%, transparent 100%);
}

/* .settings-row / .settings-row-* live in settings.html's own <style> (that
   copy is the live one — rows are hairline-separated INSIDE a card). The rule
   that used to sit here also gave every row its own background + border +
   radius, i.e. a card inside a card. It was invisible only because the colours
   matched the card exactly; the moment surfaces gained contrast it would have
   shown up as boxes within boxes. Removed rather than overridden. */

/* ─── Animations ─────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes dot-pop {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── LANDING PAGE ───────────────────────────────────── */

.landing-body { overflow-x: hidden; }

/* Hero */
.hero {
  min-height: calc(100vh - 58px);
  display: flex;
  align-items: center;
  padding: 80px 0 60px;
  position: relative;
}

/* ⚠️ THE HERO'S CONTAINER MUST BE TOLD TO FILL — do not delete this.
   `.container` is `max-width: 1100px; margin: 0 auto` with NO `width: 100%`.
   Everywhere else it is a block child of a block, so it fills its parent by
   default and the max-width merely caps it. Here `.hero` is `display: flex`,
   which makes the container a FLEX ITEM whose base size is its CONTENT — so
   the hero's width tracked whatever was inside it.

   The visible symptom was reported as "the calendar shrinks and is buggy", but
   it was the whole hero: the AI reflection panel swaps text every 6.2s at
   different lengths, and the headline, the buttons and the calendar all jumped
   with it. Measured at a fixed innerWidth of 1440:
     600ms container=616 · 5200ms container=1100 · 13000ms container=773
   Scoped to the hero on purpose — `.container` is used on all 10 pages, and a
   global change is needless risk when the fault is local to a flex parent. */
.hero > .container { width: 100%; }

/* ─── TWO FORCES — the landing hero's composition ────────────────────────────
   The bear and the bull are atmosphere, not subjects: they are pushed off the
   edges, held well back in opacity and blur, and lit only enough to be read as
   forms. Everything here exists to make the CENTRE the thing you see first —
   which is the point, because the centre is the calm one.
   Landing only. This must never migrate to the guide (they stay structurally
   distinct) or to a working page, where it would compete with data. */
.hero--forces { overflow: hidden; }

.hero-forces {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
/* Anchored to the FIGURE's band, not the bottom of the section. Sitting them
   low made them flank the preview card, which reads as decoration around a
   screenshot; at this height they flank the emblem and the headline, which is
   what makes the composition say something. */
/* THE HERO BACKGROUND — one designed scene, not two cut-outs.

   This replaced `.hf-beast` / `.hf-bear` / `.hf-bull`: extracted silhouettes
   that had to be keyed out of the ad creative, masked per side, colour-matched
   and then re-calibrated per theme. The scene does all of that by construction,
   and the animals in it are already atmospheric, so nothing has to be faded to
   make the type readable.

   Measured on the source before shipping it: the artist left the middle dark.
   Median luminance in the headline band is 25 and the 90th percentile is 59
   (the 235 max is a candlestick highlight, not a field), against a page ground
   of ~13. So white type sits on it with room to spare and the seam into the
   section below is nearly invisible. */
.hf-bg {
  position: absolute;
  top: 0;
  /* Centred rather than pinned left, because the width is now capped. */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;

  /* ⚠️ CAPPED AT THE SOURCE'S NATIVE WIDTH — this is the sharpness fix.
     The scene is 1376px wide and there is no larger master; stretching it to a
     1920 or 2560 viewport was a 1.4x–1.9x upscale, which is most of what read
     as "blurry". Capping it means 1:1 pixels at every width at or above 1376,
     and a clean downscale below that.

     What fills the sides is the page's own ground, and that works because the
     scene ALREADY fades to it: measured, the left edge has median luminance 8
     and the right edge 13, against a page ground of 13. The seam is invisible
     even before the mask below softens it. */
  max-width: 1376px;

  /* ⚠️ NATURAL ASPECT, ANCHORED TOP — do not put `height: 100%` back.
     The hero is ~1440px tall because it contains the full showpiece card, but
     the scene is 16:9. Filling that box with `cover` forced a 1.875x upscale:
     the image rendered at 2580x1440 and only the middle 53% of its width was
     visible. That one mistake produced three complaints at once — the art
     looked soft, it looked zoomed, and both animals were sliced through the
     middle by the narrow window that was left. */
  height: auto;
  max-height: 100%;
  object-fit: cover;
  object-position: center top;

  /* Dissolves the last few percent at each side, so that even on a very wide
     screen there is no detectable vertical boundary where the art stops. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 5%, #000 17%, #000 83%, rgba(0,0,0,.35) 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 5%, #000 17%, #000 83%, rgba(0,0,0,.35) 95%, transparent 100%);
}

/* The image ends where the hero ends, and the page below is flat --black. A
   hard horizontal edge there reads as a pasted-in panel, so the bottom eighth
   dissolves into the page. Top-and-bottom rather than bottom-only, because the
   fixed nav sits over the first 58px. */
/* The band ends partway down the hero, so the fade has to sit ON the band
   rather than on the whole section — otherwise the dissolve happens hundreds of
   pixels below the last pixel of art and a hard edge shows through. Height is
   tied to the image's own aspect (100vw / 1.792 = 55.8vw), capped with it. */
.hero-forces::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Tied to the image's aspect AND its cap, so the fade ends exactly where
     the art does at every width (1376 / 1.792 = 768). */
  height: min(100%, 55.8vw, 768px);
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--black) 55%, transparent) 0%,
    transparent 16%,
    transparent 64%,
    var(--black) 100%);
}

/* THE SCRIM stays, but it is doing far less work than it did for the cut-outs.
   Its job now is only to keep the brightest candlestick cluster from reaching
   the headline; the scene is already dark under the copy. */
.hero--forces::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 68% at 50% 48%,
      color-mix(in srgb, var(--black) 78%, transparent) 0%,
      color-mix(in srgb, var(--black) 52%, transparent) 44%,
      transparent 78%);
}

/* ⚠️ LIGHT THEME: hidden, deliberately. This is a near-black photographic
   scene (median luminance 21) and the light theme's ground is warm ivory.
   There is no opacity at which it stops reading as a stain, so light mode keeps
   the clean paper hero — the same call already made for the breathing overlay
   and the circuit breaker, which are always dark on purpose. */
:root[data-theme="light"] .hero-forces,
:root[data-theme="light"] .hero--forces::before { display: none; }

/* Shown on phones (Daniel's call), where `cover` crops hard to the centre —
   the darkest, cleanest part of the scene — so the copy stays readable and the
   atmosphere survives. The small file keeps it cheap over cellular. */

.hero-inner, .hero-copy { position: relative; z-index: 1; }

/* THE EMBLEM — the first thing on the page, and the thing the whole hero is
   composed around.

   Back IN the flow, deliberately. It was lifted out earlier to keep the type
   from shifting, but at this size an out-of-flow emblem slides under the nav on
   a short screen. In flow it owns real space and the column stays honest.

   Sized against BOTH axes: `min(22vw, 26vh)` means a wide-but-short laptop
   scales it by height rather than letting it eat the viewport. This is the rule
   that a width-only clamp got wrong. */
/* ⚠️ Centred with flex, NOT with `margin: 0 auto`.
   .brand-halo sets `display: inline-block` and is defined far later in this
   file, so it wins on `display` — and an inline-block ignores auto margins,
   which left the emblem sitting 79px off the page's centre line while the
   headline below it was correctly centred. Flex centring is immune both to
   the display type and to whatever `text-align` resolves to.
   The extra specificity here is deliberate: it has to outrank .brand-halo. */
.hero-copy--centered .hero-emblem,
.hero-emblem {
  display: flex;
  justify-content: center;
  width: 100%;
  /* The halo is absolutely positioned, so it contributes NOTHING to layout
     while extending well past the image box — at the old 17px gap it spilled
     over the tag pill below. This margin buys room for light, not for the
     picture. */
  margin: 0 0 clamp(30px, 4.5vh, 54px);
}
.hero-emblem img {
  display: block;
  width: clamp(132px, min(22vw, 26vh), 300px);
  height: auto;
}

/* The aura scales with the figure and is a touch wider here than the shared
   .brand-halo default, because at hero size a tight halo reads as a ring
   rather than as light. */
.hero-emblem.brand-halo::before {
  width: 150%;
  filter: blur(14px);
}

/* Reclaim the vertical room the emblem now occupies, so the composition still
   fits a 768px-tall laptop without the CTAs falling below the fold. */
.hero--forces { padding-top: clamp(28px, 5vh, 64px); padding-bottom: clamp(32px, 5vh, 60px); }

@media (max-width: 700px) {
  .hero-emblem img { width: clamp(104px, 30vw, 150px); }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 70% 40%, rgba(255,255,255,0.025) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 70%, rgba(255,255,255,0.015) 0%, transparent 60%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(320px, 0.65fr) 1fr;
  align-items: center;
  gap: 40px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-200);
  letter-spacing: 0.03em;
  margin-bottom: 24px;
}

.hero-tag-dot {
  width: 6px; height: 6px;
  background: var(--win-text);
  border-radius: 50%;
  animation: pulse-glow 2.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

.hero-headline {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: var(--pure-white);
  margin-bottom: 22px;
}

.hero-headline em {
  font-style: normal;
  color: var(--gray-200);
}

.hero-sub {
  font-size: 1.0625rem;
  /* --gray-200, not --gray-300. The documented readability scale reserves
     --gray-300 for placeholders and tiny decorative labels; descriptive copy
     is --gray-200. On the old flat ground the difference passed unnoticed, but
     over the hero scene it drops this line to 5.8:1 — above WCAG AA, below the
     7:1 the rest of the site holds. At --gray-200 it measures 8.8:1. */
  color: var(--gray-200);
  line-height: 1.7;
  max-width: 440px;
  margin-bottom: 36px;
}

.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

.hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--gray-200);
}

.hero-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-600); }

/* Hero Visual */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
}

/* ─── Hero stacked layout (calendar below text) ─────── */

.hero--stacked {
  padding: 72px 0 0;
  min-height: auto;
}

.hero--stacked .hero-inner {
  display: block;
}

/* The hero column is centred as a COMPOSITION, in both languages. Losing the
   bare rule here (only its descendant rules survived a refactor) left the
   emblem flex-centred above a headline pinned to the left edge in English,
   while Hebrew still looked right — the kind of split that only a
   language-varied pass catches. */
.hero-copy--centered {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}

.hero-copy--centered .hero-sub { margin: 0 auto 28px; max-width: 560px; }
.hero-copy--centered .hero-tag { justify-content: center; }
.hero-copy--centered .hero-actions { justify-content: center; }
.hero-copy--centered .hero-social-proof { justify-content: center; }
.hero-copy--centered .hero-meta { justify-content: center; }

.hero-visual--full {
  width: 100%;
  animation: none;
  mask-image: none;
  -webkit-mask-image: none;
}

/* ─── THE SHOWPIECE CARD ──────────────────────────────────────────────────────
   The landing's proof of product, and the page's signature moment. It used to
   be the ONE component that never joined the app's lighting language: a flat
   --gray-900 fill, a flat border, a hardcoded black shadow and 0.48rem numbers.
   It now obeys the same one-key-light rule as every card in the app, and adds
   a thin gold seam — the "elevated" part that makes it read as a showpiece
   rather than a screenshot. */
.preview-card {
  /* Slightly translucent + blurred, because in dark this card sits ON the hero
     artwork and should read as glass laid over the scene. color-mix keeps it
     theme-aware, which the hardcoded rgba it replaced could not be; in light the
     art is hidden anyway (:root[data-theme="light"] .hero-forces is display:none)
     so the translucency simply shows the paper. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-top) 86%, transparent) 0%,
    color-mix(in srgb, var(--surface) 86%, transparent) 58%);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-hi);
  border-radius: 18px;
  padding: 26px 28px 28px;
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 1px 2px var(--shadow-tight),
    0 40px 90px -40px var(--shadow-lg);
  position: relative;
  overflow: hidden;
  /* ⚠️ No min-height. The old 430px floor was sized for a one-column card and
     now fights the two-column body, leaving dead space under the shorter side. */
}

/* The gold seam. An inset ring rather than a border, so it cannot disturb the
   box model or reset the lit top edge above. */
.preview-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gold-metal);
  opacity: .30;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

.preview-cal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--edge);
}

.preview-month-name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--pure-white);
  letter-spacing: 0.01em;
}

.preview-month-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.preview-stat {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.preview-stat.w { background: var(--win-bg); color: var(--win-text); }
.preview-stat.l { background: var(--loss-bg); color: var(--loss-text); }

/* TWO RATES, side by side. The win rate is what a trader looks for; the
   execution rate is what the product actually measures, and it is lower. Two
   different numbers in one row state "these are separate things" before the AI
   panel says a word — which is what makes the L on a green day land instead of
   reading as a bug. */
.preview-rates {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 30px);
}

.preview-rate { text-align: center; }

.preview-rate-num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--pure-white);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.preview-rate-pct {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-300);
  margin-inline-start: 1px;
}

.preview-rate-label {
  margin-top: 5px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gray-300);
}

/* The execution figure is the product's own metric, so it carries the brand
   gold — and it is decoupled to --moon, which is always defined, rather than
   to --accent, which is unset for most users. */
.preview-rate--exec .preview-rate-num { color: var(--moon); }
.preview-rate--exec .preview-rate-label { color: color-mix(in srgb, var(--moon) 62%, var(--gray-300)); }

/* Calendar | reading panel. */
.preview-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}

.preview-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin-bottom: 8px;
}
.preview-weekdays > div {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gray-300);
  padding: 2px 0;
}

.preview-dot-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}

.preview-dot {
  aspect-ratio: 1;
  border-radius: 7px;
  opacity: 0;
  animation: dot-pop 0.35s ease forwards;
  animation-delay: var(--d, 0s);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Was 0.48rem — small enough that the P&L read as texture rather than as a
     number, which is a large part of why the card looked cheap. */
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Whisper tints over the card's own surface, matching the dashboard calendar's
   moonlight treatment — replacing --win-bg/--loss-bg blocks with hardcoded
   #2a5c3a / #5c2a2a borders, the only two hexes in this card that could not
   follow the light theme. */
.preview-dot.w {
  background: color-mix(in srgb, var(--win) 15%, var(--surface-sunk));
  border: 1px solid color-mix(in srgb, var(--win) 30%, transparent);
  color: color-mix(in srgb, var(--win) 55%, var(--pure-white));
}
.preview-dot.l {
  background: color-mix(in srgb, var(--loss) 15%, var(--surface-sunk));
  border: 1px solid color-mix(in srgb, var(--loss) 30%, transparent);
  color: color-mix(in srgb, var(--loss) 55%, var(--pure-white));
}
.preview-dot.e { background: var(--surface-sunk); border: 1px solid var(--edge); }
.preview-dot.x { background: var(--surface-shade); border: 1px solid var(--edge); }

.preview-question-card {
  background: var(--gray-850);
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  margin-top: -4px;
  margin-left: 24px;
  position: relative;
}

.preview-q-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray-200);
  margin-bottom: 8px;
}

.preview-q-text {
  font-size: 0.9rem;
  color: var(--gray-100);
  line-height: 1.55;
  font-style: italic;
}

/* Features */
.features { padding: 100px 0; }

.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* The section kicker is where gold appears in body sections — one small
     note per section rather than gold scattered through the copy. */
  color: var(--moon);
  margin-bottom: 14px;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pure-white);
  margin-bottom: 16px;
}

.section-sub {
  font-size: 1rem;
  color: var(--gray-200);
  max-width: 480px;
  line-height: 1.65;
}

/* ═══ THE LOWER PAGE ══════════════════════════════════════════════════════════
   Four sections replacing six. The six they replaced (.features, .why-section,
   .how, .product-tour, its pill grid and .stats-strip) told the same three-beat
   story — write, the AI asks, get feedback — four separate times, twice under
   the identical kicker "איך זה עובד". That repetition, not any single weak
   card, is what made the page read as unfinished and unsurprising.

   Each of the four now has a different JOB and, just as importantly, a
   different SHAPE: an asymmetric split, a layered collage, a full-bleed band,
   and a centred close. Four three-up grids in a row is what the old page was.
   If you add a section here, give it a shape none of these already uses. */

/* ── 04 · THE MECHANISM — asymmetric split ─────────────────────────────────── */

.mech { padding: 96px 0; }
.mech-intro { margin-bottom: 52px; }

/* ─── THE MECHANISM IN THREE BEATS ────────────────────────────────────────────
   Words + fact = question, stated before the demo rather than left for the
   reader to infer from it. The demo below is now the PROOF, not the
   explanation — it opens with a tag, three chips, a quote, four trade rows and
   two flag chips, which is far too much to carry a first idea. */
.mech-beats {
  list-style: none;
  margin: 0 0 54px;
  padding: 0;
  max-width: 760px;
  display: grid;
  gap: 0;
}

.mech-beat {
  display: grid;
  grid-template-columns: auto minmax(112px, auto) 1fr;
  gap: clamp(14px, 2.4vw, 30px);
  align-items: baseline;
  padding: 20px 4px;
  position: relative;
}
/* A hairline between beats, and a short connector that makes the three read as
   one chain rather than three facts. */
.mech-beat + .mech-beat { border-top: 1px solid color-mix(in srgb, var(--edge) 60%, transparent); }

.mb-n {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--moon) 62%, var(--gray-400));
  font-variant-numeric: tabular-nums;
}
.mb-k {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gray-300);
}
.mb-v {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.42rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--white);
}
/* The third beat is the payoff — it is what the other two produce, so it gets
   the metal treatment the page reserves for its conclusions. */
.mech-beat--out .mb-v {
  background: var(--gold-metal);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 620px) {
  .mech-beat {
    grid-template-columns: auto 1fr;
    row-gap: 4px;
    padding: 16px 2px;
  }
  .mb-k { grid-column: 2; }
  .mb-v { grid-column: 2; }
}

.mech-split {
  display: grid;
  /* Deliberately UNequal: the entry is the evidence and the questions are the
     payoff, so the payoff column is wider. Equal columns read as a comparison,
     which is not what this is. */
  grid-template-columns: minmax(0, 0.92fr) auto minmax(0, 1.08fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: stretch;
}

.mech-side {
  background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface) 58%);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-hi);
  border-radius: 14px;
  padding: 26px 26px 24px;
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 1px 2px var(--shadow-tight),
    0 16px 30px -20px var(--shadow-lg);
}

/* The section's whole argument is "you wrote this — so it asked THOSE four
   questions". The questions are what the product produced; the entry is the
   input you already had. Same call as journal step 3, where the coach's answer
   stands in the light and your own recap sits in shade. */
.mech-qs {
  background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface) 74%);
  border-top-color: var(--edge-hi);
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 2px 4px var(--shadow-tight),
    0 26px 44px -22px var(--shadow-lg);
}
.mech-entry {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-shade) 72%);
  box-shadow:
    inset 0 1px 0 var(--lit-soft),
    0 1px 2px var(--shadow-tight),
    0 12px 24px -20px var(--shadow-lg);
}

.mech-side-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-300);
  margin-bottom: 16px;
}
.mech-qs .mech-side-tag { color: color-mix(in srgb, var(--moon) 70%, var(--gray-200)); }

.mech-entry-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }

.mech-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--surface-sunk);
  border: 1px solid var(--edge);
  color: var(--gray-200);
  font-variant-numeric: tabular-nums;
}
.mech-chip--w {
  direction: ltr;
  background: color-mix(in srgb, var(--win) 14%, var(--surface-sunk));
  border-color: color-mix(in srgb, var(--win) 30%, transparent);
  color: color-mix(in srgb, var(--win) 55%, var(--pure-white));
}

.mech-entry-text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--gray-50);
  font-style: italic;
  margin-bottom: 20px;
}

.mech-trades {
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  padding: 4px 0;
  margin-bottom: 16px;
}

.mech-trade {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 2px;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-200);
}
.mech-trade + .mech-trade { border-top: 1px solid color-mix(in srgb, var(--edge) 55%, transparent); }
.mt-t { color: var(--gray-300); }
.mt-s { font-weight: 600; color: var(--gray-100); }
.mt-q { color: var(--gray-300); text-align: start; }
/* ⚠️ `direction: ltr` is load-bearing, not cosmetic. These rows sit inside
   dir="rtl", and "+$180" opens with two NEUTRAL characters (+ and $) followed
   by weak digits — no strong character anywhere in the run. Bidi therefore
   places the whole token by the PARAGRAPH direction and renders it "$180+",
   with the sign thrown to the far end. `unicode-bidi: plaintext` cannot fix
   this either: it resolves from the first strong character, and there isn't
   one. Giving the cell its own LTR base is what orders the run correctly. */
.mt-p { font-weight: 600; direction: ltr; text-align: start; }
.mt-p.w { color: color-mix(in srgb, var(--win) 55%, var(--pure-white)); }
.mt-p.l { color: color-mix(in srgb, var(--loss) 55%, var(--pure-white)); }

/* The size-up trade. Marked, because it is the one the AI's second question is
   built on — the reader should be able to find it without being told. */
.mech-trade--flag {
  background: color-mix(in srgb, var(--moon) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--moon);
  border-radius: 0 4px 4px 0;
}
.mech-trade--flag .mt-q { color: var(--moon); font-weight: 700; }

/* The header row. Not decoration: without it these are four lines of
   "09:34 NQ 2 +$180", unreadable to anyone who does not already trade futures —
   and this section exists to be understood by someone who does not yet know the
   product at all. */
.mech-trade--head {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--gray-400);
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--edge) 70%, transparent);
}
.mech-trade--head + .mech-trade { border-top: 0; }
.mech-trade--head span { color: inherit; font-weight: inherit; }

/* The quantity that jumped. It is the FACT the second question is built on, so
   it is called out inside the row as well as in the flag below. */
.mt-q--up { color: var(--moon); font-weight: 700; }

.mech-flags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ─── THE CAUSAL LINK, DRAWN ──────────────────────────────────────────────────
   The flag on one side and the question it produced on the other were already
   a pair, but nothing said so — the reader had to notice it. Marking both ends
   with the same gold rail turns an inference into something you can see. */
.mech-flag--linked {
  color: var(--moon);
  background: color-mix(in srgb, var(--moon) 16%, transparent);
  border-color: color-mix(in srgb, var(--moon) 46%, transparent);
}
.mech-q--linked {
  background: color-mix(in srgb, var(--moon) 7%, transparent);
  box-shadow: inset 2px 0 0 var(--moon);
  border-radius: 0 6px 6px 0;
  /* Asymmetric on purpose: the rail lives on the inline-start edge, so that
     side needs more room or the "02" sits right against it. */
  padding-inline: 18px 12px;
  padding-block: 10px;
  margin-inline: -18px -12px;
}
.mech-q--linked .mech-q-n { color: var(--moon); }

.mech-flag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--moon) 78%, var(--gray-100));
  background: color-mix(in srgb, var(--moon) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--moon) 26%, transparent);
}

.mech-arrow {
  align-self: center;
  color: var(--gray-500);
  width: 40px;
}
.mech-arrow svg { width: 100%; height: auto; display: block; }

.mech-q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.mech-q {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-50);
}
.mech-q + .mech-q { border-top: 1px solid var(--edge); }

.mech-q-n {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--moon);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .mech-split { grid-template-columns: 1fr; }
  /* The arrow points across a gap that no longer exists once stacked. */
  .mech-arrow { display: none; }
}

/* ── 05 · WHAT COMES BACK — layered collage ────────────────────────────────── */

.artifacts { padding: 96px 0; border-top: 1px solid var(--edge); }
.art-intro { margin-bottom: 56px; }

/* Documents on a desk, lit from above — overlapping and at different depths,
   NOT a row of equal cards. The old page had four equal-card rows and that
   sameness is exactly what it is escaping. */
/* ⚠️ Flex with ONE overlap value, not overlapping grid columns.
   With `grid-column` spans the overlap is a fraction of the container and so
   changes with the viewport, which means the clearance padding on the cards
   underneath can only ever approximate it — and an approximation here hid the
   grade card's entire point (a giant red L) behind its neighbour at 1440px.
   Here the middle card is pulled outward by exactly --art-lap and the side
   cards are padded by exactly --art-lap, so the backgrounds overlap and the
   content provably cannot, at any width. */
.art-stage {
  --art-lap: 72px;
  display: flex;
  align-items: flex-start;
  padding-block: 10px;
}

.art-doc {
  background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface) 60%);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-hi);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 1px 2px var(--shadow-tight),
    0 26px 46px -26px var(--shadow-lg);
  transition: transform var(--t-slow), box-shadow var(--t-slow);
}

.art-doc-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-300);
  margin-bottom: 14px;
}

.art-doc-line {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--gray-200);
  margin: 0;
}

/* Depth order: the feedback card is the subject, so it sits forward and
   overlaps the two beside it by one column each.

   ⚠️ The overlapped columns need matching padding on the cards underneath, and
   it must be PHYSICAL padding, not logical. Each card is dir="rtl", so
   `padding-inline-end` resolves to its LEFT — the opposite side from the one
   being covered, which left the grade card's whole point (a giant red L) still
   hidden under its neighbour. Which side is covered is a fact about the grid,
   not about the text direction, so it is expressed in physical terms:
   the feedback card covers the grade card's RIGHT and the weekly card's LEFT. */
.art-doc--grade {
  flex: 1 1 0; min-width: 0;
  margin-top: 46px; z-index: 1;
  padding-right: calc(24px + var(--art-lap));
}
/* ⚠️ Depth was expressed only in z-index and shadow depth — all three documents
   shared ONE surface, so the collage was three cards at identical brightness
   that happened to overlap. Under the one-key-light rule the sheet in front is
   the sheet nearer the source: the feedback stands in the light and the two it
   covers step back into shade, which is what makes the stack read as a stack. */
.art-doc--feedback {
  flex: 1.34 1 0; min-width: 0;
  margin-inline: calc(var(--art-lap) * -1);
  z-index: 3;
  background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface) 76%);
  border-top-color: var(--edge-hi);
  box-shadow: inset 0 1px 0 var(--lit), 0 1px 2px var(--shadow-tight),
              0 40px 70px -30px var(--shadow-lg);
}
.art-doc--grade,
.art-doc--weekly {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-shade) 72%);
  box-shadow: inset 0 1px 0 var(--lit-soft), 0 1px 2px var(--shadow-tight),
              0 18px 34px -24px var(--shadow-lg);
}
.art-doc--weekly {
  flex: 1 1 0; min-width: 0;
  margin-top: 62px; z-index: 2;
  padding-left: calc(24px + var(--art-lap));
}

.art-grade-val {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--loss);
  margin-bottom: 12px;
}

.art-fb-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--gray-100);
}
.art-fb-row + .art-fb-row { border-top: 1px solid var(--edge); }

.art-fb-k {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.art-fb-row--keep .art-fb-k {
  color: color-mix(in srgb, var(--win) 55%, var(--pure-white));
  background: color-mix(in srgb, var(--win) 14%, transparent);
}
.art-fb-row--fix .art-fb-k {
  color: color-mix(in srgb, var(--loss) 55%, var(--pure-white));
  background: color-mix(in srgb, var(--loss) 14%, transparent);
}
.art-fb-row--note .art-fb-k {
  color: color-mix(in srgb, var(--moon) 80%, var(--pure-white));
  background: color-mix(in srgb, var(--moon) 12%, transparent);
}

.art-week-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.art-week-grade {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  background: var(--gold-metal);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* "B+" rendered as "+B": a Latin letter followed by a neutral sign, laid out
     against the card's RTL base, throws the sign to the wrong end. The grade is
     a self-contained Latin token, so it gets its own direction and is isolated
     so it cannot disturb the line around it. */
  direction: ltr;
  unicode-bidi: isolate;
}

.art-week-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.72rem; color: var(--gray-300); }

.art-week-bars { display: flex; gap: 5px; margin-bottom: 14px; }
.awb { height: 6px; flex: 1; border-radius: 3px; }
.awb.w { background: color-mix(in srgb, var(--win) 62%, transparent); }
.awb.l { background: color-mix(in srgb, var(--loss) 62%, transparent); }

@media (max-width: 1000px) {
  .art-stage { flex-direction: column; gap: 16px; }
  /* Stacked, nothing overlaps — so the negative margin and the clearance
     padding that pays for it both have to go. */
  .art-doc--grade, .art-doc--feedback, .art-doc--weekly {
    margin: 0; padding-left: 24px; padding-right: 24px; width: 100%;
  }
}

/* ── 06 · WHAT COMPOUNDS — the only full-bleed band ────────────────────────── */

.compound { padding: 96px 0 88px; border-top: 1px solid var(--edge); }
.cmp-intro { margin-bottom: 56px; }

/* Breaks the container on purpose. Every other section on this page is a
   contained column; this one runs edge to edge, and that difference in SHAPE is
   what stops the lower page reading as one long list. */
.cmp-bleed { margin-bottom: 56px; }

.cmp-strip {
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, 0.4vw, 5px);
  height: 108px;
  padding-inline: clamp(12px, 4vw, 60px);
  /* Fades at both ends so the run reads as a slice out of something longer,
     rather than as a chart with a first and last bar. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.cmp-mark {
  flex: 1;
  border-radius: 2px;
  min-width: 3px;
  background: color-mix(in srgb, var(--loss) 46%, transparent);
  height: 22%;
}
/* Kept days rise, and they rise as GOLD — the discipline colour — while the
   broken ones stay short and red. The eye reads the trend before the label. */
.cmp-mark.k {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--moon) 92%, transparent),
    color-mix(in srgb, var(--moon) 34%, transparent));
}

.cmp-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-300);
}

.cmp-quote {
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  border: 0;
  padding: 0;
}
.cmp-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.65;
  color: var(--pure-white);
  margin: 0 0 16px;
}
.cmp-quote cite {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-300);
}

/* ── 06a · PRICES (subscriptions stage 4.2, 2026-09-29; public since the launch, 4.3) ──
   Three compact cards on ONE recessed tray. The tray is the room; Pro alone is lifted
   out of it into the key light, with the gold seam — the landing argues with light,
   the way the בלי/עם pair does, never with a "popular" badge nobody has measured.
   Free and Pro Live stay flush with the tray. A shape the page does not use anywhere
   else, and not pricing.html's three separate cards. Prices are not P&L: neutral ink. */
.lp-section { padding: 88px 0 80px; border-top: 1px solid var(--edge); }
/* Explicit, because this rule gives the section a box: the `hidden` attribute must win. */
.lp-section[hidden] { display: none; }
.lp-head { max-width: 980px; margin: 0 auto 8px; }
.lp-period { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 26px 0 44px; }
.lp-period-note { font-size: 0.8rem; color: var(--gray-200); }

.lp-tray {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch;
  max-width: 980px; margin: 0 auto; padding: 12px;
  background: var(--surface-sunk);
  border: 1px solid var(--edge); border-radius: 22px;
  box-shadow: inset 0 2px 8px var(--shadow-tight);
}
.lp-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 22px 20px 20px; border-radius: 16px;
}
/* Pro, lifted out of the tray: the landing's card surface, the key light on its top
   edge, a long shadow cast down onto the tray, and 18px above the tray's own line. */
.lp-card--pro {
  margin: -30px 0 -4px;
  background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface) 70%);
  border: 1px solid var(--edge); border-top-color: var(--edge-hi);
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 1px 2px var(--shadow-tight),
    0 26px 50px -26px var(--shadow-lg);
}
/* The seam: an inset ring, not a border, so the lit top edge stays — pricing.html's. */
.lp-card--pro::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--gold-metal); opacity: .55; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
:root[data-theme="light"] .lp-card--pro::after {
  background: linear-gradient(168deg, var(--gold-low), var(--gold-mid) 45%, var(--gold-deep));
  opacity: .42;
}
.lp-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--white); margin: 0; }
.lp-price { display: flex; align-items: baseline; min-height: 2.3rem; }
.lp-m, .lp-y { display: inline-flex; align-items: baseline; gap: 6px; }
/* Both prices are in the page; the section's [data-period] shows one. */
.lp-section:not([data-period="year"]) .lp-y,
.lp-section[data-period="year"] .lp-m { display: none; }
.lp-amount { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--white); }
.lp-per { font-size: 0.82rem; color: var(--gray-200); }
.lp-lede { color: var(--gray-100); font-size: 0.88rem; line-height: 1.5; margin: 0; }
.lp-list {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  color: var(--gray-200); font-size: 0.82rem; line-height: 1.45;
}
.lp-list li { position: relative; padding-inline-start: 20px; }
.lp-list li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; top: 0;
  color: var(--moon); font-weight: 700; font-size: 0.76rem;
}
/* Centred lines carry no dir: plaintext picks each one's direction from its own text,
   so the centring survives the English flip. */
.lp-foot { text-align: center; margin-top: 26px; }
.lp-trial, .lp-soon, .lp-more { unicode-bidi: plaintext; margin: 0; }
.lp-trial { color: var(--gray-100); font-size: 0.9rem; }
.lp-soon { color: var(--gray-300); font-size: 0.82rem; margin-top: 6px; }
.lp-more { margin-top: 14px; font-size: 0.88rem; }
/* One column: Free, Pro, Pro Live in reading order. Pro keeps its light and its seam,
   and rises a little less out of a narrower tray. */
@media (max-width: 760px) {
  .lp-section { padding: 64px 0 60px; }
  .lp-period { margin-bottom: 30px; }
  .lp-tray { grid-template-columns: minmax(0, 1fr); max-width: 520px; padding: 10px; gap: 10px; border-radius: 20px; }
  .lp-card--pro { margin: 0; }
}

/* ── 06b · FAQ ─────────────────────────────────────────────────────────────── */

.faq-section {
  padding: 88px 0 96px;
  border-top: 1px solid var(--edge);
}
/* The same column as the list below it, so the heading sits ABOVE the cards instead of
   drifting to the page edge while the cards stay centred. */
.faq-head { max-width: 720px; margin: 0 auto 36px; }

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface) 60%);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-hi);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--lit), 0 1px 2px var(--shadow-tight);
}

/* The UA's own disclosure triangle is dropped: it is drawn at the start edge
   and carries the browser's idea of direction, not ours. The chevron below is
   a pseudo-element — so it is not a text node the i18n walker can see, and it
   can never land inside the Hebrew line and drag its end to the wrong side.
   Its side follows `inset-inline-end`, which the [dir] flip already handles. */
.faq-q {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 15px 20px;
  padding-inline-end: 46px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pure-white);
  border-radius: 14px;
}
.faq-q::-webkit-details-marker { display: none; }

.faq-q::after {
  content: "";
  position: absolute;
  inset-inline-end: 20px;
  top: 21px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--gray-300);
  border-bottom: 1.5px solid var(--gray-300);
  transform: rotate(45deg);
}
.faq-item[open] .faq-q::after { transform: rotate(-135deg); top: 24px; }
html:not(.anim-off) .faq-q::after { transition: transform var(--t-slow); }
html:not(.anim-off) .faq-q:hover { color: var(--moon); }

.faq-a {
  padding: 0 20px 18px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-200);
}
.faq-a a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.faq-a-more { padding-top: 0; margin-top: -8px; }

/* ── 07 · CLOSE ────────────────────────────────────────────────────────────── */

.close-section {
  padding: 96px 0 110px;
  text-align: center;
  border-top: 1px solid var(--edge);
}

/* ⚠️ Flex-centred, never `margin: auto`, AND deliberately over-specified.
   .brand-halo sets `display: inline-block` and is defined far LATER in this
   file, so at equal specificity it wins on `display` and the emblem collapses
   to an inline box that ignores both auto margins and justify-content — which
   is precisely how it rendered hard against the left edge here. The hero's
   emblem escapes this only because it happens to carry a two-class selector.
   The extra `.close-section` is what makes this rule outrank .brand-halo. */
/* ⚠️ `width: fit-content`, NOT `width: 100%`. `.brand-halo::before` is sized
   as a PERCENTAGE OF ITS ELEMENT (128%, aspect-ratio 1). At full width that
   made this halo a 1336x1336 blurred disc instead of a ~97px glow around a
   76px emblem — it spilled past the section and gave the landing a permanent
   horizontal scrollbar (measured: .close-emblem scrollWidth 1225 vs clientWidth
   1044, and the section +32 past the content width).
   The two-class selector is still required so `display: flex` outranks
   `.brand-halo`'s late `display: inline-block`; `margin-inline: auto` does the
   centring that `width: 100%` used to. Any new `.brand-halo` element needs the
   same treatment — the halo must hug the art, not the column. */
.close-section .close-emblem {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 34px;
}
.close-emblem img { display: block; width: 76px; height: auto; }

.close-quote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  font-weight: 500;
  line-height: 1.7;
  color: var(--gray-100);
  max-width: 720px;
  margin: 0 auto 44px;
}

.close-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pure-white);
  margin-bottom: 14px;
}

.close-sub {
  font-size: 1rem;
  color: var(--gray-200);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.65;
}

.close-fine {
  margin-top: 22px;
  font-size: 0.74rem;
  color: var(--gray-300);
  letter-spacing: 0.02em;
}

/* Footer */
.footer {
  padding: 28px 0;
  border-top: 1px solid var(--gray-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-text { font-size: 0.8125rem; color: var(--gray-200); }

/* ═══════════════════════════════════════════════════════
   WOW LAYER — Glassmorphism, glow, display font, exec grade
   ══════════════════════════════════════════════════════ */

/* Display font for hero headline */
.font-display { font-family: var(--font-display); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--pure-white) 10%, var(--gray-300) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glassmorphism card */
/* ⚠️ `.card-glass` USED TO LIVE HERE and it was doing real damage. A leftover
   glassmorphism recipe from an older pass, applied in exactly ONE place — the
   landing's showpiece card — and declared ~800 lines AFTER `.preview-card`, so
   it silently won on background, border AND shadow. The one-key-light rule
   written for the most important object on the site was completely dead.

   Its three hardcoded dark rgbas could not follow the theme, so on the light
   theme the product's signature frame rendered as a brown slab on ivory paper.
   The frosting it provided is preserved on `.preview-card` itself, in tokens.
   Deleted rather than overridden — that is the whole lesson of the smear. */

/* Glowing orb background element */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}

.glow-orb-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(255,255,255,0.028) 0%, transparent 70%);
  top: -120px; right: -60px;
  animation: orb-drift-1 14s ease-in-out infinite alternate;
}

.glow-orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 70%);
  bottom: 40px; left: 5%;
  animation: orb-drift-2 18s ease-in-out infinite alternate;
}

@keyframes orb-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, 20px) scale(1.08); }
}

@keyframes orb-drift-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(20px, -30px) scale(0.92); }
}

/* Hero headline upgrade */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 5.5vw, 5rem);
  letter-spacing: -0.04em;
}

/* Better hero tag */
.hero-tag {
  background: var(--tint);
  border-color: var(--hairline);
}

/* Stat card shine */
.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
}

/* Section title font */
.section-title { font-family: var(--font-display); letter-spacing: -0.025em; }

/* ─── Execution Grade Component ──────────────────────── */

.exec-notice {
  font-size: 0.845rem;
  color: var(--gray-300);
  line-height: 1.7;
  padding: 13px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--gray-700);
  border-left: 2px solid var(--gray-500);
  border-radius: 8px;
  margin-bottom: 14px;
}

.exec-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.exec-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--gray-850);
  border: 1px solid var(--gray-700);
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: all var(--t);
  font-family: var(--font);
  width: 100%;
}

.exec-btn:hover {
  background: var(--gray-800);
  border-color: var(--gray-500);
}

.exec-letter {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  letter-spacing: -0.02em;
}

.exec-W { background: var(--win-bg);  color: var(--win-text);  border: 1px solid var(--win); }
.exec-L { background: var(--loss-bg); color: var(--loss-text); border: 1px solid var(--loss); }

.exec-btn-label { font-size: 0.875rem; font-weight: 500; color: var(--white); }
.exec-btn-sub   { display: none; }

.exec-btn.sel-W {
  background: var(--win-bg);
  border-color: var(--win);
  box-shadow: 0 0 0 1px rgba(74,124,94,0.3), inset 0 1px 0 rgba(255,255,255,0.03);
}

.exec-btn.sel-W .exec-btn-label { color: var(--win-text); }

.exec-btn.sel-L {
  background: var(--loss-bg);
  border-color: var(--loss);
  box-shadow: 0 0 0 1px rgba(124,74,74,0.3), inset 0 1px 0 rgba(255,255,255,0.03);
}

.exec-btn.sel-L .exec-btn-label { color: var(--loss-text); }

/* ─── RTL / Hebrew fixes ─────────────────────────────── */

/* Hebrew feedback body */
.feedback-body[dir="rtl"],
[dir="rtl"].feedback-body {
  text-align: right;
}

/* Summary cards in Hebrew */
.summary-card[dir="rtl"] {
  text-align: right;
}

.summary-card[dir="rtl"] .summary-points { direction: rtl; }
.summary-card[dir="rtl"] .summary-point  { flex-direction: row-reverse; }

/* Modal Hebrew content */
.modal-feedback-body[dir="rtl"] { text-align: right; direction: rtl; }

/* Questions in Hebrew */
.question-card .question-text { direction: rtl; text-align: right; }
/* ⚠️ App copy that is translated must not hardcode `direction: rtl` (2026-09-16, site review prompt 3).
   It was correct in Hebrew and wrong in English: the English sentence sat right-aligned with its full
   stop thrown to the LEFT end ("Answer with total honesty." read ".Answer with…"). plaintext + start
   resolves each language from its own text — Hebrew still lands right-aligned, exactly as before. */
.questions-intro { unicode-bidi: plaintext; text-align: start; }
.exec-notice { unicode-bidi: plaintext; text-align: start; }
.exec-btn-label { direction: rtl; }

/* Entry excerpt in dashboard */
.entry-excerpt[dir="rtl"] { text-align: right; direction: rtl; }

/* ─── Button Interaction Effects ─────────────────────── */

.btn,
.result-btn,
.exec-btn {
  position: relative;
  overflow: hidden;
}

.btn:active         { transform: scale(0.96) !important; transition: transform 0.08s ease !important; }
.result-btn:active  { transform: scale(0.95) !important; transition: transform 0.08s ease !important; }
.exec-btn:active    { transform: scale(0.97) !important; transition: transform 0.08s ease !important; }

/* Ripple wave injected by ui.js */
.ripple-wave {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-expand 0.55s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-expand {
  to {
    transform: translate(-50%, -50%) scale(90);
    opacity: 0;
  }
}

/* Button selection pop (result + exec) */
.btn-just-selected {
  animation: btn-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}

/* Nav CTA shimmer on hover */
.nav-cta {
  position: relative;
  overflow: hidden;
}

.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0s;
}

.nav-cta:hover::after {
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

/* ─── Session Summary Cards ──────────────────────────── */

.session-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

/* Material comes from the consolidated block at the end of this file (these
   cards sit in SHADE — see "Journal step 3"). Only layout here; declaring the
   surface twice is how the old smear accumulated. */
.summary-card {
  padding: 18px 20px;
  animation: fadeIn 0.4s ease;
}

.summary-card.preserve { border-left: 3px solid var(--win); }
.summary-card.improve  { border-left: 3px solid var(--loss); }

.summary-card.motivation {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
}

/* The closing line of the whole session gets the brand seam across its top —
   the same metal as the wordmark, at the width of the card. It replaced a
   hardcoded rgba(255,255,255,.02) radial wash, which was invisible in dark and
   a grey smudge on ivory. */
.summary-card.motivation::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--gold-low) 22%, var(--gold-hi) 50%, var(--gold-low) 78%, transparent);
  opacity: .6;
  pointer-events: none;
}

.summary-card-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.summary-card.preserve  .summary-card-title { color: var(--win-text); }
.summary-card.improve   .summary-card-title { color: var(--loss-text); }
.summary-card.motivation .summary-card-title { color: var(--gray-200); }

.summary-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.summary-point {
  display: flex;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--gray-200);
  line-height: 1.55;
}

.summary-point-dot {
  margin-top: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.summary-card.preserve .summary-point-dot { background: var(--win); }
.summary-card.improve  .summary-point-dot { background: var(--loss); }

.motivation-text {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--pure-white);
  line-height: 1.65;
  letter-spacing: -0.01em;
  position: relative;
}

/* ─── Modal ──────────────────────────────────────────── */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open { display: flex; animation: fadeIn 0.2s ease; }

.modal-box {
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  border-radius: 16px;
  padding: 28px;
  max-width: 620px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
}

.modal-box::-webkit-scrollbar { width: 4px; }
.modal-box::-webkit-scrollbar-track { background: transparent; }
.modal-box::-webkit-scrollbar-thumb { background: var(--gray-700); border-radius: 4px; }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gray-800);
}

.modal-title { font-size: 1.125rem; font-weight: 700; }
.modal-sub   { font-size: 0.8125rem; color: var(--gray-200); margin-top: 3px; }

.modal-feedback-body {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray-100);
  white-space: pre-wrap;
  margin-bottom: 20px;
}

.modal-feedback-body p { margin-bottom: 0.9em; }
.modal-feedback-body p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════
   MAKEOVER ADDITIONS
   ═══════════════════════════════════════════════════════ */

/* (The global 48px grid on body was removed on 2026-10-05: the clean-fintech
   ground is one flat charcoal. --grid-line still draws chart guides.) */

/* ─── Section fade transitions (landing) ─────────────── */
.section-fade {
  position: relative;
}
.section-fade::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--black));
  pointer-events: none;
}

/* ─── Scroll-triggered slide from right ──────────────── */
.slide-right {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.slide-right.delay-1 { transition-delay: 0.08s; }
.slide-right.delay-2 { transition-delay: 0.16s; }
.slide-right.delay-3 { transition-delay: 0.24s; }

/* ⚠️ A HORIZONTAL REVEAL OVERFLOWS A PHONE UNTIL IT FIRES, AND THAT IS A REAL
   BUG RATHER THAN A HARNESS ARTEFACT. These elements rest at translateX(44px)
   and the compare pair at ±40px, waiting for an IntersectionObserver that only
   fires once the section is scrolled into view. On a desktop the slack sits in
   the page margins and nobody sees it; at 390px the copy already fills the
   width, so every un-revealed block sticks out past the right edge and the
   landing can be scrolled sideways from the moment it loads — before the
   visitor has scrolled far enough to straighten anything out.

   Below 760px the same reveal is done on the vertical axis, where a page
   scrolls anyway and no amount of offset can widen it. The gesture survives;
   it just travels in the direction the screen has room for. */
/* 1250, not 760: measured unrevealed, the sideways scroll persists all the way
   up to ~1250px, because it only disappears once the viewport is wide enough
   for the container's own margins to swallow the 44px. So this is a tablet and
   small-laptop bug too, not just a phone one. Above 1250 — which is every
   common laptop width, 1280 upward — the horizontal entrance is kept.
   26px matches .g-reveal in guide.html, which is already the house pattern. */
@media (max-width: 1250px) {
  .slide-right { transform: translateY(26px); }
  .slide-right.visible { transform: translateY(0); }
  .slide-left  { transform: translateY(26px); }
  .slide-left.visible { transform: translateY(0); }
}
/* The compare pair needs the same treatment, but its rules are declared ~800
   lines below this point and carry the same ID specificity — so the override
   has to live AFTER them or the cascade quietly ignores it. It is next to
   #compareBeforeCard itself, not here. */

/* ─── Skeleton loading ───────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-800) 25%,
    var(--gray-700) 50%,
    var(--gray-800) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite ease-in-out;
  border-radius: 6px;
}

.skeleton-question-card {
  height: 110px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.skeleton-feedback-card {
  height: 200px;
  border-radius: 12px;
}

/* ─── Exec grade toggle (segmented control) ──────────── */
.exec-toggle {
  display: flex;
  border: 1px solid var(--gray-700);
  border-radius: 9px;
  overflow: hidden;
  background: var(--gray-850);
}

.exec-toggle-btn {
  flex: 1;
  position: relative;    /* anchors the ripple wave (ui.js); parent clips it */
  padding: 11px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-200);
  background: transparent;
  border: none;
  border-right: 1px solid var(--gray-700);
  cursor: pointer;
  font-family: var(--font);
  direction: rtl;
  text-align: center;
  transition: all var(--t);
}
.exec-toggle-btn:active { transform: scale(0.97); }

.exec-toggle-btn:last-child { border-right: none; }

.exec-toggle-btn:hover {
  color: var(--white);
  background: var(--gray-800);
}

.exec-toggle-btn.sel-W {
  background: var(--win-bg);
  color: var(--win-text);
  border-right-color: var(--win);
}

.exec-toggle-btn.sel-L {
  background: var(--loss-bg);
  color: var(--loss-text);
}

/* ─── Edit session modal ─────────────────────────────── */
.edit-choice-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  z-index: 600;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.edit-choice-overlay.open { display: flex; animation: fadeIn 0.2s ease; }

.edit-choice-box {
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  border-radius: 14px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.edit-choice-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.edit-choice-sub   { font-size: 0.875rem; color: var(--gray-200); line-height: 1.6; margin-bottom: 24px; }
.edit-choice-actions { display: flex; flex-direction: column; gap: 10px; }

/* ─── Weekly summary panels ──────────────────────────── */
.cal-week-summary {
  grid-column: 1 / -1;
  display: none; /* shown only in week-annotated layout */
}

.week-summary-row {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 10px;
  align-items: start;
  margin-bottom: 4px;
}

.week-days-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.week-summary-panel {
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 0.7rem;
  line-height: 1.55;
}

.wsp-point {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 5px;
  direction: rtl;
  color: var(--gray-300);
}
.wsp-point:last-child { margin-bottom: 0; }

.wsp-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.wsp-dot.preserve { background: var(--win); }
.wsp-dot.improve  { background: var(--loss); }

/* ─── Analytics page ─────────────────────────────────── */
.analytics-grid {
  display: grid;
  /* minmax(0,…) — the same floor the calendar hit. A chart card holds a canvas
     and a two-line header, so its min-content is ~346px; inside a plain `1fr`
     track that became a floor the card could not go under, and analytics ran
     14px off the side of a 360px phone. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

/* Structure only — the material (surface, edge, radius, padding, type) lives in
   the consolidated dashboard/analytics block at the end of this file. Keep it
   there; do not re-style these here or the two places drift apart. */
.chart-wrap { position: relative; }

/* ─── Mobile responsive ──────────────────────────────── */
@media (max-width: 768px) {
  /* Every one of these is minmax(0,…) for the reason above: collapsing to one
     column is necessary but not sufficient, because the single track still
     cannot shrink below its content unless it is told it may. */
  .stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .analytics-grid { grid-template-columns: minmax(0, 1fr); }
  .week-summary-row { grid-template-columns: minmax(0, 1fr); }
  .week-summary-panel { display: none; } /* hide on tiny screens */
  .hero-inner { grid-template-columns: 1fr; }

  /* ⚠️ `.hero-visual { display: none }` used to live here, from when the hero
     visual was a decorative panel beside the copy. It is now the SHOWPIECE —
     the calendar whose AI panel stops on a green day graded L, which is the
     single thing this page is built to be remembered for. Hiding it meant
     every phone visitor got the argument without the evidence.
     It stays visible; the rules below make it fit instead. */
  .hero-visual--full .preview-card { padding: 20px 16px 22px; border-radius: 14px; }
  .hero-visual--full .preview-dot-grid,
  .hero-visual--full .preview-weekdays { gap: 5px; }
  .preview-dot { font-size: 0.56rem; border-radius: 5px; }
  .preview-cal-header { gap: 12px; padding-bottom: 12px; margin-bottom: 14px; }
  .preview-rates { gap: 16px; }
  .preview-rate-num { font-size: 1.5rem; }
  .preview-rate-label { font-size: 0.54rem; letter-spacing: 0.08em; }
  .seq-overlay { padding: 16px; }
  .seq-day-pnl { font-size: 1.3rem; }
  .seq-question { font-size: 0.9rem; }
}

/* ─── Prefers-reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Immediately show all scroll-triggered elements */
  .slide-right, .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Show splash immediately */
  .splash-brain-wrap, .splash-wordmark {
    opacity: 1 !important;
    animation: none !important;
  }
  .sp-legs, .sp-ankle, .sp-arm, .sp-head, .sp-eye, .sp-smile, .sp-halo {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
}

/* ─── Keyboard shortcut hint ─────────────────────────── */
.kbd-hint {
  font-size: 0.72rem;
  color: var(--gray-200);
  display: flex;
  align-items: center;
  gap: 5px;
}

kbd {
  font-family: var(--font);
  font-size: 0.68rem;
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--gray-300);
}

/* Mood selector */
.mood-selector {
  display: flex;
  gap: 9px;
  margin-bottom: 12px;
}

.mood-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 13px 6px;
  border-radius: 11px;
  border: 1px solid var(--gray-700);
  background: var(--gray-850);
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--font);
  position: relative;
  overflow: hidden;
}

.mood-option:hover {
  border-color: var(--gray-500);
  background: var(--gray-800);
}

.mood-option.sel {
  border-color: var(--gray-300);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 1px var(--gray-300);
}

.mood-emoji { font-size: 1.6rem; line-height: 1; }

.mood-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-200);
  letter-spacing: 0.03em;
}

.mood-option.sel .mood-label { color: var(--gray-200); }

/* (Old splash part classes removed — the mascot splash sequence lives in index.html's inline style.) */

@media (prefers-reduced-motion: reduce) {
  .sp-leg, .sp-spark, .sp-blush {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ─── Hero sequence overlay ──────────────────────────── */

/* ─── THE READING PANEL ───────────────────────────────────────────────────────
   Was `.seq-overlay` — an absolutely-positioned scrim pinned to the card's
   bottom edge. It covered the last row of calendar cells, which is where the
   day the sequence stops on actually lives, so the highlighted cell was hidden
   underneath the text describing it. It is now a real column beside the
   calendar: nothing overlaps, and the reading is legible at full size. */
.seq-overlay {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* Centred as one block rather than pinned top-and-bottom. The panel stretches
     to the calendar's height, and pushing the verdict to the floor left ~200px
     of void through the middle; as a centred group the two columns balance. */
  justify-content: center;
  padding: 20px 22px;
  background: var(--surface-sunk);
  border: 1px solid var(--edge);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.seq-overlay.visible { opacity: 1; }

.seq-q-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--moon) 70%, var(--gray-200));
  margin-bottom: 14px;
  /* ⚠️ Placed by FLEX, not by text-align, and that is the whole point.
     main.css lists `.seq-q-tag:not([dir])` in the bidi block that applies
     `unicode-bidi: plaintext`, whose documented side effect is re-resolving
     `text-align: start`. Chasing it through dir="ltr" / "auto" / "rtl" moved
     the line around but never pinned it: the element measured right-aligned
     in a probe while the actual screenshot showed it hard left.
     As a shrink-to-fit flex item on the cross axis there is no `start` left to
     re-resolve — flex-start follows the container's `direction`, so this sits
     at the right edge in Hebrew and the left edge in English, in both cases
     lined up with the siblings below it. */
  align-self: flex-start;
}

/* THE REVEAL. A green +$520 and an execution grade of L, on one line, with a
   hairline between them so the eye reads them as two verdicts on one day
   rather than one contradictory statement. */
.seq-day {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--edge);
  min-height: 46px;
}

.seq-day-pnl {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
.seq-day-pnl.w { color: color-mix(in srgb, var(--win) 62%, var(--pure-white)); }
.seq-day-pnl.l { color: color-mix(in srgb, var(--loss) 62%, var(--pure-white)); }

.seq-day-sep {
  width: 1px;
  align-self: stretch;
  background: var(--edge);
}

.seq-day-grade { display: flex; flex-direction: column; gap: 3px; }

.seq-day-grade-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-300);
}

.seq-day-grade-val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gray-300);
  transition: color .3s ease;
}
.seq-day-grade-val.W { color: var(--win); }
.seq-day-grade-val.L { color: var(--loss); }

/* Set as a pull-quote, not as a caption. It is the only line of the panel a
   reader will actually read word for word, and at 0.9rem it sat lost in a
   column stretched to the calendar's height. */
.seq-question {
  font-size: 1.02rem;
  color: var(--gray-50);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.seq-question.visible {
  opacity: 1;
  transform: translateY(0);
}

.seq-feedback {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.6;
  opacity: 0;
  transition: opacity 0.4s ease 0.15s;
  padding: 10px 14px;
  border-radius: 8px;
  /* Reserves the taller of the two/three-line verdicts so the block does not
     jump as the sequence cycles between readings of different lengths. */
  min-height: 3.1em;
}

.seq-feedback.visible { opacity: 1; }
.seq-feedback.W {
  background: color-mix(in srgb, var(--win) 12%, transparent);
  color: color-mix(in srgb, var(--win) 55%, var(--pure-white));
  border: 1px solid color-mix(in srgb, var(--win) 34%, transparent);
}
.seq-feedback.L {
  background: color-mix(in srgb, var(--loss) 12%, transparent);
  color: color-mix(in srgb, var(--loss) 55%, var(--pure-white));
  border: 1px solid color-mix(in srgb, var(--loss) 34%, transparent);
}

/* The active cell is marked in GOLD, not white — it is the app pointing at a
   day, and gold is the app's voice. */
.preview-dot.seq-active {
  box-shadow: 0 0 0 2px var(--moon);
  transform: scale(1.16);
  position: relative;
  z-index: 2;
}

/* Below this the two columns stack; the panel keeps its own box so it still
   reads as a separate surface rather than as a caption. */
@media (max-width: 900px) {
  .preview-body { grid-template-columns: 1fr; }
  .seq-overlay { min-height: 190px; }
}

/* ─── Social proof strip ─────────────────────────────── */

.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.775rem;
  color: var(--gray-200);
  margin-top: 22px;
}

.hero-sp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--win-text);
  flex-shrink: 0;
  animation: pulse-glow 2.5s ease-in-out infinite;
}@media (max-width: 560px) {}

/* ─── Comparison section ─────────────────────────────── */

.compare-section { padding: 80px 0; border-top: 1px solid var(--gray-800); }
.compare-title { font-family: var(--font-display); }

/* ─── BEFORE / AFTER — the argument is made with LIGHT ──────────────────
   The site's documented signature is that hierarchy is made of lighting, not of
   size or colour: the important thing stands IN the key light and everything
   else steps back into shade. The dashboard already does this (discipline card
   lit, calendar in shade). This pair is the same idea used as an ARGUMENT —
   "בלי" is sunk below the page surface and drained, "עם" is raised into the
   light with a gold seam. Nothing has to say which one is better.

   It replaced two symmetric cards tinted `rgba(124,74,74,.07)` and
   `rgba(74,124,94,.07)`: hardcoded, so they could not follow the light theme,
   and equal in weight, so the comparison carried no visual claim at all. */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  align-items: stretch;
}

.compare-card {
  border-radius: 16px;
  padding: 26px 28px 28px;
  position: relative;
  overflow: hidden;
}

/* IN SHADE. Sunk BELOW the page's own surface, with the shadow falling inward,
   so it reads as a recess rather than an object. No lit top edge — that is
   what the eye reads as "this one is not the answer". */
.compare-card--before {
  /* --surface-sunk, not --surface-shade. Measured in both themes: `shade` sits
     ABOVE the page ground in light (238 vs 234) because it means "paper turned
     away from the window" — still a card. `sunk` is the token that is genuinely
     BELOW the page in both (dark 11 vs 14, light 225 vs 234), which is what
     makes this read as a recess rather than a dimmer card. */
  background: var(--surface-sunk);
  border: 1px solid var(--edge);
  box-shadow: inset 0 2px 6px var(--shadow-tight);
}

/* IN THE LIGHT. The same recipe every card on the app uses — brightest at the
   top lip, falling off downward, lit top border, shadow dropping straight
   down — plus the gold seam the showpiece card carries. */
.compare-card--after {
  background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface) 62%);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-hi);
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 1px 2px var(--shadow-tight),
    0 22px 44px -30px var(--shadow-lg);
}
/* An inset ring rather than a border, so it cannot disturb the box model or
   reset the lit top edge above it. */
.compare-card--after::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gold-metal);
  /* At .26 this was measurably present and visually absent. The seam is what
     marks this card as the product's side of the argument, so it has to be
     seen — but it is a hairline, not a highlight. */
  opacity: .55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* On paper the metal ramp's light end disappears into a near-white card, so the
   seam is held to its darker bronze and kept a touch softer. */
:root[data-theme="light"] .compare-card--after::after {
  background: linear-gradient(168deg, var(--gold-low), var(--gold-mid) 45%, var(--gold-deep));
  opacity: .42;
}

.compare-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--edge);
}
.compare-card-title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.compare-card--before .compare-card-title { color: var(--gray-200); }
.compare-card--after  .compare-card-title { color: var(--pure-white); }

/* The two marks are the only colour in the pair. They are a verdict, not data,
   so they stay small and quiet — the lighting is what argues. */
/* ⚠️ `.compare-mark`, NOT `.cmp-mark`. The compounding strip already owns
   `.cmp-mark` for its 40 bars; naming these the same put `width: 22px` and a
   50% radius on every bar in that strip. Caught by the DOM count reading 42
   where it expected 40. */
.compare-mark {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  line-height: 1;
}
.compare-mark--x {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--loss) 30%, transparent);
}
.compare-mark--v {
  color: var(--win);
  background: color-mix(in srgb, var(--win) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--win) 32%, transparent);
}

.compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmp-item {
  font-size: 0.9rem;
  line-height: 1.55;
  position: relative;
}
/* The readability scale reserves --gray-300 for placeholders; descriptive copy
   is --gray-200. The shade card sits one tier down on purpose — it is being
   crossed out — but not below the floor for real text. */
.compare-card--before .cmp-item { color: var(--gray-300); }
.compare-card--after  .cmp-item { color: var(--gray-100); }

.strike-line {
  position: absolute;
  top: 50%;
  right: 0;
  height: 1px;
  width: 0;
  background: color-mix(in srgb, var(--loss) 62%, transparent);
  transform: translateY(-50%);
  transition: width 0.45s cubic-bezier(.22,.61,.36,1);
}

.compare-card--before.strikethrough .strike-line { width: 100%; }
.compare-card--before.strikethrough .cmp-item:nth-child(1) .strike-line { transition-delay: 0.0s; }
.compare-card--before.strikethrough .cmp-item:nth-child(2) .strike-line { transition-delay: 0.13s; }
.compare-card--before.strikethrough .cmp-item:nth-child(3) .strike-line { transition-delay: 0.26s; }
.compare-card--before.strikethrough .cmp-item:nth-child(4) .strike-line { transition-delay: 0.39s; }
html.anim-off .strike-line { width: 100%; transition: none; }

@media (max-width: 768px) { .compare-grid { grid-template-columns: 1fr; } }

/* ─── Pain + Compare combined layout ────────────────────── */

.pain-compare-section {
  padding: 88px 0;
  border-top: 1px solid var(--gray-800);
}

.pain-compare-layout {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  align-items: start;
}

/* RIGHT: pain column */
.pain-col { padding: 0 56px 0 0; }

.pain-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pure-white);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  direction: rtl;
  text-align: right;
}

/* CENTER: divider */
.pain-compare-divider {
  background: var(--gray-700);
  align-self: stretch;
  min-height: 200px;
}@media (max-width: 900px) {
  .pain-compare-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pain-compare-divider {
    min-height: 1px;
    height: 1px;
    align-self: auto;
  }
  .pain-col { padding: 0; }}

/* ─── Slide from left ────────────────────────────────── */
.slide-left {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.slide-left.visible { opacity: 1; transform: translateX(0); }

/* ─── Pain+Compare layout override (30/70) ───────────── */
.pain-compare-layout {
  grid-template-columns: 0.33fr 0.67fr !important;
  gap: 52px !important;
}
.pain-compare-divider { display: none !important; }/* Comparison cards entrance animation (replaces slide-right/delay-2) */
#compareBeforeCard {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}
#compareAfterCard {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease 0.12s, transform 0.6s ease 0.12s !important;
}
#compareBeforeCard.anim-in,
#compareAfterCard.anim-in {
  opacity: 1;
  transform: translateX(0) !important;
}
/* Phone: the horizontal entrance, on the vertical axis. See the note beside
   .slide-right — a ±40px rest position sticks out past the right edge of a
   390px screen and lets the landing scroll sideways before the observer has
   ever fired. Must stay AFTER the rules above: same specificity, later wins. */
@media (max-width: 1250px) {
  #compareBeforeCard { transform: translateY(26px); }
  #compareAfterCard  { transform: translateY(26px); }
  #compareBeforeCard.anim-in,
  #compareAfterCard.anim-in { transform: translateY(0) !important; }
}

/* ─── Pain+Compare stacked centered ──────────────── */

.pain-compare-section {
  padding: 112px 0 80px;
  border-top: 1px solid var(--gray-800);
}

.pcs-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}/* THE CLAIM — the whole section's argument, in one sentence.
   It replaced a stripped copy of the hero's calendar. That had a real idea
   behind it (show the same month with the meaning removed and let the reader
   make the comparison themselves) but it did not survive contact: most cells
   in the month carry no trade, so at full width it read as a grid of empty
   dark boxes rather than as a month. The sentence says it in six words. */
.pcs-claim {
  /* ⚠️ `width: 100%` — `.pcs-inner` is `display: flex`, so without it this box
     sizes to its CONTENT and the max-width below never applies (measured 493px
     against the 620px it declares, which changes where the line breaks). This
     is the same flex shrink-wrap trap as `.hero > .container`; the scan in the
     session scratchpad catches it. */
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--gray-200);
  text-align: center;
  text-wrap: balance;
  max-width: 620px;
  margin: 0 auto clamp(38px, 6vh, 66px);
}
/* The turn. The first half is something the trader already knows; this is the
   part that lands, so it carries the weight and the full-strength ink. */
.pcs-claim strong {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--pure-white);
}

/* Comparison grid - full width of the inner container */
.pcs-inner .compare-grid {
  width: 100%;
  max-width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pcs-inner .compare-card { padding: 22px 24px; }
.pcs-inner .cmp-item { font-size: 0.875rem; }@media (max-width: 768px) {
  .pcs-inner { max-width: 100%; align-items: stretch; }
  .pcs-inner .compare-grid { grid-template-columns: 1fr; }
}

/* ─── My Method page (redesign D7, 2026-10-10) ──────────────────────────────
   Daniel's answers: built in the site's own language (no concept image), the editor beside a side
   panel, "where your method is used" in place of the old explanation banner, and the step-by-step
   flow kept for a first visit. The five parts are flat cards with a head (number, mark, title) and
   a hairline under it, like Settings. The side panel is the five parts at a glance — an index too —
   with the save under them, and the three places the method is read. Narrower than 1100 the panel
   unfolds into the column: where it is used on top, the save as a bar that stays at the foot. */
.mt-page { max-width: 1180px; margin: 0 auto; padding: 30px 28px 72px; }
:root:not([data-lang="en"]) .mt-page { direction: rtl; }
.mt-header { margin: 0 0 22px; }
.mt-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--white); margin: 0 0 6px; }
.mt-sub { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--gray-200); unicode-bidi: plaintext; text-align: start; text-wrap: pretty; }
.mt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 24px; align-items: start; }
.mt-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.mt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the first visit: "step N of 5" over the cards */
.mt-steps { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.mt-steps[hidden] { display: none; }
.mt-steps-txt { flex: none; font-size: 0.84rem; font-weight: 600; color: var(--gray-100); }
.mt-steps-bar { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mt-steps-bar i { height: 4px; border-radius: 999px; background: var(--edge-hi); transition: background 0.3s ease; }
.mt-steps-bar i.on { background: var(--moon); }

/* the first visit's last word: saved, and the next action in gold (the save has gone quiet) */
.mt-done {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 16px 18px;
  border-radius: var(--radius-card); border: 1px solid color-mix(in srgb, var(--moon) 45%, var(--edge));
  background: color-mix(in srgb, var(--moon) 7%, var(--surface));
}
.mt-done[hidden] { display: none; }
.mt-done-ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--moon); color: var(--on-accent);
}
.mt-done-ico svg { width: 18px; height: 18px; }
.mt-done-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; color: var(--gray-200); line-height: 1.5; text-align: start; text-wrap: pretty; }
.mt-done-txt b { font-size: 0.98rem; color: var(--white); }
.mt-done-go { flex: none; }
@media (max-width: 560px) {
  .mt-done { flex-wrap: wrap; }
  .mt-done-go { flex: 1 1 100%; justify-content: center; }
}

/* the five parts */
.method-grid { display: flex; flex-direction: column; gap: 16px; }
.mt-card { padding: 0; scroll-margin-top: 84px; }
.mt-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px 14px; border-bottom: 1px solid var(--edge); }
.method-step-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--edge-hi); color: var(--gray-200);
  font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.method-card-icon { flex: none; display: inline-flex; color: var(--gray-100); }
/* a part with something in it: its number takes the gold ring, like its check in the side panel */
.mt-card.filled .method-step-num { border-color: var(--moon); color: var(--moon); }
.method-card-icon .tm-ico { width: 18px; height: 18px; }
/* no plaintext here: "A+ Setup — הסטאפ…" would take a Latin base and put the Hebrew last; the page's
   own direction is the right one for a title the page wrote */
.method-card-title {
  margin: 0; min-width: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--white); text-align: start;
}
.mt-body { padding: 16px 24px 22px; }
.method-card-hint {
  margin: 0 0 12px; font-size: 0.86rem; line-height: 1.6; color: var(--gray-200);
  unicode-bidi: plaintext;   /* translated copy: see .exec-notice */
  text-align: start; text-wrap: pretty;
}
/* an empty part, on an edit visit: why it matters (filling it is the next action — gold) */
.mt-empty-note { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.8rem; font-weight: 600; color: var(--moon); text-align: start; }
.mt-empty-note::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mt-empty-note[hidden] { display: none; }
.method-textarea {
  display: block; width: 100%; box-sizing: border-box;
  /* field-sizing lets the box track its content: min-height is the floor (and the fallback where
     field-sizing is unsupported), max-height keeps a very long method from burying the page */
  field-sizing: content; min-height: 76px; max-height: 360px; overflow-y: auto; resize: none;
  padding: 14px 16px; border-radius: var(--radius-field);
  background: var(--surface-sunk); border: 1px solid var(--edge); color: var(--white);
  font-family: var(--font); font-size: 0.92rem; line-height: 1.65;
  /* a trader may write in either language, line by line: each paragraph takes its own direction */
  direction: rtl; unicode-bidi: plaintext; text-align: start;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:root[data-lang="en"] .method-textarea { direction: ltr; }
.method-textarea:focus { outline: none; border-color: var(--moon); box-shadow: var(--focus-ring); }
.method-textarea::placeholder { color: var(--gray-300); }

/* "continue" on a first visit — at the end of its card */
.method-card-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

/* cards visible by default — the script only hides what has not been reached yet */
.method-card { transition: opacity 0.5s ease, transform 0.5s ease; }
.method-card.pending { display: none; }
.method-card.enter   { opacity: 0; transform: translateY(22px); }
.method-footer.pending { display: none; }

/* shake on an empty "continue" */
.method-textarea.shake, .checklist-add .form-input.shake { animation: methodShake 0.4s ease; border-color: var(--loss); }
@keyframes methodShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

/* the side panel: the parts at a glance, the save */
.mt-status { padding: 20px 20px 18px; }
.mt-status-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mt-side-h { margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--white); }
.mt-count { flex: none; font-size: 0.8rem; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.mt-count.full { color: var(--moon); font-weight: 600; }
.mt-meter { display: block; height: 4px; margin: 12px 0 10px; border-radius: 999px; background: var(--edge-hi); overflow: hidden; }
.mt-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--moon); transition: width 0.4s ease; }
.mt-parts { list-style: none; margin: 0 -8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-part {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  background: none; border: 0; color: var(--gray-200); font-family: var(--font); font-size: 0.88rem;
  text-align: start; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.mt-part:hover { background: var(--tint); color: var(--white); }
.mt-part:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mt-part.done { color: var(--white); }
.mt-part.locked { cursor: default; opacity: 0.5; }
.mt-part.locked:hover { background: none; color: var(--gray-200); }
.mt-part-name { min-width: 0; }
.mt-dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--edge-hi);
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.mt-part.done .mt-dot { background: var(--moon); border-color: var(--moon); }
.mt-part.done .mt-dot::after {
  content: ''; width: 4px; height: 8px; margin-top: -2px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.mt-save { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--edge); }
.mt-save-state { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; }
.mt-dirty { display: inline-flex; align-items: center; gap: 6px; color: var(--moon); font-weight: 600; }
.mt-dirty::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mt-dirty[hidden] { display: none; }
.method-last-saved { color: var(--gray-300); unicode-bidi: plaintext; }
.mt-save .btn { width: 100%; justify-content: center; }

/* the method analysis (the dashboard's) — offered once a method is saved */
.mt-analyse { padding: 20px; }
.mt-analyse[hidden] { display: none; }
.mt-analyse-txt { margin: 8px 0 14px; font-size: 0.82rem; line-height: 1.55; color: var(--gray-300); text-align: start; text-wrap: pretty; }
.mt-analyse-go { width: 100%; justify-content: center; gap: 8px; }
.mt-analyse-go .plan-lock-ico { width: 14px; height: 14px; flex: none; }

/* where the method is read */
.mt-uses { padding: 20px; }
.mt-use-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mt-use { display: flex; align-items: flex-start; gap: 12px; }
.mt-use-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-sunk); border: 1px solid var(--edge); color: var(--gray-100);
}
.mt-use-ico svg { width: 16px; height: 16px; }
.mt-use-txt {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-size: 0.8rem; line-height: 1.5; color: var(--gray-300); unicode-bidi: plaintext; text-align: start; text-wrap: pretty;
}
.mt-use-txt b { font-size: 0.86rem; font-weight: 600; color: var(--white); }

/* Narrower: one column. Where it is used goes on top (three tiles side by side while they fit),
   the parts list steps back (the cards are right there), and the save becomes a bar that stays at
   the foot of the screen — held back, like the save itself, until a first visit reaches the end. */
@media (max-width: 1099px) {
  .mt-page { max-width: 820px; padding-top: 22px; }
  .mt-layout { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .mt-side { display: contents; }
  .mt-uses { order: -1; }
  .mt-status { order: 1; position: sticky; bottom: 12px; z-index: 30; padding: 12px 14px; box-shadow: 0 12px 32px -12px var(--shadow-lg); }
  .mt-status:has(.method-footer.pending) { display: none; }
  .mt-status-top, .mt-parts { display: none; }
  /* the parts' progress rides the bar's top edge, so a phone still sees how much is filled */
  .mt-status .mt-meter { position: absolute; top: -1px; inset-inline: 18px; margin: 0; height: 3px; border-radius: 0 0 3px 3px; }
  .mt-save { flex-direction: row; align-items: center; justify-content: space-between; margin: 0; padding: 0; border: 0; }
  .mt-save-state { min-width: 0; }
  .mt-save .btn { width: auto; flex: none; }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .mt-use-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mt-use { flex-direction: column; gap: 10px; }
}
@media (max-width: 560px) {
  .mt-page { padding: 16px 16px 56px; }
  .mt-title { font-size: 1.45rem; }
  .mt-head { padding: 14px 16px 12px; gap: 10px; }
  .mt-body { padding: 14px 16px 18px; }
  .mt-uses { padding: 16px; }
}

/* ─── Session image — upload + display ──────────────────── */

/* Dropzone (Step 1) */
.img-dropzone {
  border: 1.5px dashed var(--gray-700);
  border-radius: 12px;
  background: var(--gray-950);
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
  overflow: hidden;
}
.img-dropzone:hover { border-color: var(--gray-600); }
.img-dropzone.drag { border-color: var(--win); background: rgba(74, 124, 94, 0.06); }

.img-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 20px;
  text-align: center;
  color: var(--gray-200);
  font-size: 0.84rem;
}
.img-dropzone-empty svg { opacity: 0.5; }

.img-preview { position: relative; }
.img-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #000;
  cursor: zoom-in;
}
.img-preview-actions {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
}
.img-preview-actions button {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--gray-600);
  color: var(--white);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease;
}
.img-preview-actions button:hover { background: rgba(0, 0, 0, 0.8); }

/* Image card (Step 3 / review) */
.session-image-card {
  margin-top: 18px;
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 14px;
  overflow: hidden;
}
.session-image-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--gray-800);
}
.session-image-card-title { font-size: 0.9rem; font-weight: 600; color: var(--pure-white); }
.session-image-card-actions { display: flex; gap: 6px; }

.session-image {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  background: #000;
  cursor: zoom-in;
}

.session-image-empty {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  padding: 4px;
}

/* Lightbox */
.img-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
  animation: fadeIn 0.18s ease;
}
.img-lightbox.open { display: flex; }
.img-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ─── Dashboard — hero band (Discipline Score + Equity) ─── */

.hero-band {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;
}

.discipline-card,
.equity-card {
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 16px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.discipline-card::after,
.equity-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}

/* Discipline gauge */
.discipline-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.disc-gauge-wrap { position: relative; width: 168px; height: 168px; }
.disc-gauge { width: 168px; height: 168px; transform: rotate(-90deg); }
.disc-gauge .disc-track { stroke: var(--gray-800); fill: none; }
.disc-gauge .disc-arc {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s ease;
}
.disc-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.disc-num {
  font-family: var(--font-display);
  font-size: 2.9rem; font-weight: 500; line-height: 1;
  color: var(--pure-white); letter-spacing: -0.03em;
}
.disc-max { font-size: 0.72rem; color: var(--gray-200); font-weight: 600; }
.disc-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-200); margin-top: 8px;
}
/* THE RING SAYS THE WORD, THE STRIP SAYS THE NUMBER.
   The score used to be set at 2.9rem here while the metrics strip set the very
   same figure at 3.9rem about 600px away — one number, twice, both huge. The
   ring now carries the reading ("טוב" / "Good") and keeps the figure as a
   small caption, so the two cards complement each other instead of repeating:
   a number and what it means. */
.disc-tier {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}
.disc-tier.high { color: var(--win-text); }
/* --moon, not a hardcoded #D4AF37: the light theme's gold is #796420, so the
   literal rendered as the dark-theme gold on ivory paper. */
.disc-tier.mid  { color: var(--moon); }
.disc-tier.low  { color: var(--loss-text); }

.disc-num-sm {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-200);
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}
/* #discNum is still animated by countUp(); only its scale changed. */
.disc-num-sm .disc-num {
  font-family: var(--font);
  font-size: inherit;
  font-weight: 700;
  color: var(--gray-100);
  letter-spacing: 0;
}
.disc-breakdown { font-size: 0.72rem; color: var(--gray-200); direction: rtl; margin-top: 2px; }
.disc-empty { color: var(--gray-200); font-size: 0.85rem; unicode-bidi: plaintext; line-height: 1.6; }

/* Equity curve */
.equity-card { display: flex; flex-direction: column; }
.equity-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.equity-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-200);
}
.equity-net { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.equity-net.pos { color: var(--win-text); }
.equity-net.neg { color: var(--loss-text); }
.equity-svg-wrap { flex: 1; min-height: 140px; position: relative; }
.equity-svg { width: 100%; height: 100%; display: block; }
.equity-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.equity-area { stroke: none; }
.equity-dot { transition: opacity 0.3s ease 1s; }
.equity-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--gray-200); font-size: 0.82rem;
  unicode-bidi: plaintext; padding: 0 20px; line-height: 1.6;
}

/* ─── Stat-card trend + execution bar ─────────────────── */

.stat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stat-trend { font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.stat-trend.up   { color: var(--win-text); }
.stat-trend.down { color: var(--loss-text); }
.stat-trend.flat { color: var(--gray-200); }
.stat-value.loss-color { color: var(--loss-text); }

.exec-bar {
  height: 5px; border-radius: 3px; background: var(--loss);
  overflow: hidden; margin-top: 9px;
}
.exec-bar.empty { background: var(--gray-700); }
.exec-bar > i { display: block; height: 100%; background: var(--win); border-radius: 3px;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }

/* ─── Calendar cells with P&L + execution tag ─────────── */

.cal-day { position: relative; }
.cal-day-num { position: absolute; top: 3px; right: 5px; font-size: 0.6rem; font-weight: 600; opacity: 0.7; }
.cal-pnl { font-size: 0.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.cal-pnl.pos { color: var(--win-text); }
.cal-pnl.neg { color: var(--loss-text); }
.cal-exec-tag {
  position: absolute; top: 3px; left: 4px;
  font-size: 0.5rem; font-weight: 800; line-height: 1.5;
  padding: 0 4px; border-radius: 3px;
}
.cal-exec-tag.w { background: var(--win-bg);  color: var(--win-text); }
.cal-exec-tag.l { background: var(--loss-bg); color: var(--loss-text); }

/* Weekly P&L total in the side panel */
.wsp-week-total {
  font-size: 0.72rem; font-weight: 800; letter-spacing: -0.01em;
  padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--gray-800);
  direction: rtl; display: flex; align-items: center; gap: 5px;
}
.wsp-week-total .lbl { color: var(--gray-200); font-weight: 600; }
.wsp-week-total.pos .val { color: var(--win-text); }
.wsp-week-total.neg .val { color: var(--loss-text); }

@media (max-width: 900px) {
  .hero-band { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .disc-gauge .disc-arc,
  .exec-bar > i,
  .equity-line,
  .equity-dot { transition: none !important; animation: none !important; }
}

/* ════════════════════════════════════════════════════════
   PSYCHOLOGY PACK — checklist · emotions · discipline streak
   ════════════════════════════════════════════════════════ */

/* ─── My Method: checklist editor (flat, 2026-10-10 — the redesign's sunk rows) ─── */
.checklist-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.checklist-editor:empty { margin-bottom: 0; }

.checklist-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-sunk); border: 1px solid var(--edge);
  border-radius: 10px; padding: 10px 12px;
  animation: clRowIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes clRowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.checklist-row-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--edge-hi);
  font-size: 0.72rem; font-weight: 700; color: var(--gray-200); font-variant-numeric: tabular-nums;
}
/* a rule may be written in either language: its own direction, wrapped anywhere it must */
.checklist-row-text {
  flex: 1; min-width: 0; margin: -4px 0; padding: 4px 6px; border: 0; border-radius: 6px; background: none;
  font-family: var(--font); font-size: 0.9rem; color: var(--white); line-height: 1.45;
  unicode-bidi: plaintext; text-align: start; overflow-wrap: anywhere; cursor: text;
  transition: background var(--t);
}
.checklist-row-text:hover { background: var(--tint); }
.checklist-row-text:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* editing a rule in place */
.checklist-row-input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; font-size: 0.9rem; direction: rtl; unicode-bidi: plaintext; text-align: start; }
:root[data-lang="en"] .checklist-row-input { direction: ltr; }
/* "up": one place higher (the first rule's keeps its place, unseen) */
.checklist-row-up {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--gray-300); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.checklist-row-up svg { width: 15px; height: 15px; }
.checklist-row-up:hover { background: var(--tint); color: var(--white); }
.checklist-row-up:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.checklist-row-up:disabled { visibility: hidden; }
.checklist-row-up::after { content: ''; position: absolute; inset: -8px -4px; }
.checklist-row-del {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: transparent; border: 1px solid transparent; color: var(--gray-200);
  cursor: pointer; font-size: 0.8rem; transition: all var(--t); font-family: var(--font);
}
.checklist-row-del:hover { color: var(--loss-text); background: var(--loss-bg); border-color: var(--loss); }
.checklist-row-del:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Hit area grown by a pseudo-element, not by padding: the control looks and
   lays out exactly as before, only a finger's target gets bigger (28px -> 44px). */
.checklist-row-del { position: relative; }
.checklist-row-del::after { content: ''; position: absolute; inset: -8px; }

.checklist-add { display: flex; gap: 8px; align-items: stretch; }
.checklist-add .form-input { flex: 1; min-width: 0; direction: rtl; unicode-bidi: plaintext; text-align: start; }
:root[data-lang="en"] .checklist-add .form-input { direction: ltr; }
.checklist-add .btn { flex-shrink: 0; white-space: nowrap; }
.checklist-empty-hint { font-size: 0.8rem; color: var(--gray-300); margin-top: 10px; line-height: 1.55; }

/* ─── Journal: emotion tags ───────────────────────────── */
.emotion-tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* .tj-tag = the same chip on a single TRADE (journal step 1). A separate class on purpose:
   syncEmotionTags() re-selects every .emotion-tag on the page from the DAY's emotions. */
.emotion-tag, .tj-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--gray-850); border: 1px solid var(--gray-700);
  color: var(--gray-200); font-size: 0.82rem; font-weight: 500;
  font-family: var(--font); cursor: pointer; transition: all var(--t);
}
.emotion-tag-emoji, .tj-tag-emoji { font-size: 0.95rem; line-height: 1; }
.emotion-tag:hover, .tj-tag:hover { border-color: var(--gray-500); color: var(--white); transform: translateY(-1px); }
.emotion-tag.sel.bad,  .tj-tag.sel.bad  { background: var(--loss-bg); border-color: var(--loss); color: var(--loss-text); }
.emotion-tag.sel.good, .tj-tag.sel.good { background: var(--win-bg);  border-color: var(--win);  color: var(--win-text); }

/* ─── Journal: discipline checklist (per session) ─────── */
.journal-checklist { display: flex; flex-direction: column; gap: 7px; }
.checklist-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border-radius: 9px; cursor: pointer; text-align: right;
  background: var(--gray-850); border: 1px solid var(--gray-700);
  font-family: var(--font); transition: all var(--t);
}
.checklist-item:hover { border-color: var(--gray-500); }
.checklist-box {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--gray-500); background: var(--gray-800);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; color: transparent; transition: all var(--t);
}
.checklist-text { flex: 1; font-size: 0.88rem; color: var(--gray-200); line-height: 1.45; }
.checklist-item.on { background: var(--win-bg); border-color: var(--win); }
.checklist-item.on .checklist-box { background: var(--win); border-color: var(--win); color: #0c1a12; }
.checklist-item.on .checklist-text { color: var(--win-text); }

.checklist-suggest {
  margin-top: 10px; padding: 9px 13px; border-radius: 8px;
  font-size: 0.82rem; font-weight: 500; line-height: 1.5; unicode-bidi: plaintext;
  border: 1px solid var(--gray-700); background: var(--gray-850); color: var(--gray-200);
}
.checklist-suggest.good { background: var(--win-bg);  border-color: var(--win);  color: var(--win-text); }
.checklist-suggest.mid  { background: var(--gray-800); border-color: var(--gray-600); color: var(--gray-100); }
.checklist-suggest.bad  { background: var(--loss-bg); border-color: var(--loss); color: var(--loss-text); }

/* ─── Journal summary: emotion chips ──────────────────── */
.summary-emotions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.summary-emo {
  font-size: 0.7rem; font-weight: 500; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--gray-700); background: var(--gray-850); color: var(--gray-200);
}
.summary-emo.bad  { background: var(--loss-bg); border-color: var(--loss); color: var(--loss-text); }
.summary-emo.good { background: var(--win-bg);  border-color: var(--win);  color: var(--win-text); }

/* ─── Dashboard: rule-break cost card (hero) ───────────── */
.rbc-banner {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--gray-900), var(--gray-850));
  border: 1px solid var(--gray-700); border-radius: 14px;
  padding: 20px 22px 22px;
}
/* soft state glow behind the hero number — red when breaking rules costs money */
.rbc-banner::before {
  content: ''; position: absolute; left: 50%; top: 46%;
  width: 480px; height: 240px; transform: translate(-50%, -50%);
  background: none;
  pointer-events: none;
}
.rbc-banner.good::before {
  background: none;
}
.rbc-banner > * { position: relative; } /* keep content above the glow */

.rbc-head { display: flex; align-items: center; gap: 14px; }
.rbc-icon {
  width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: var(--loss-bg); border: 1px solid var(--loss);
}
.rbc-banner.good .rbc-icon { background: var(--win-bg); border-color: var(--win); }
/* The mark inherits `color` from the card body, which is neutral text — give it
   the tone of the box it sits in, the way the dashboard's marks do. */
.rbc-icon .tm-ico { color: var(--loss-text); }
.rbc-banner.good .rbc-icon .tm-ico { color: var(--win-text); }

.rbc-title {
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 600;
  color: var(--pure-white); letter-spacing: -0.01em;
}
.rbc-period { font-size: 0.82rem; color: var(--gray-200); margin-top: 3px; }

.rbc-hero { text-align: center; padding: 2px 0 4px; }
.rbc-num {
  font-family: var(--font-display); font-size: clamp(2.3rem, 6vw, 3.1rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--loss-text);
  font-variant-numeric: tabular-nums;
}
.rbc-good-line {
  font-family: var(--font-display); font-size: clamp(1.35rem, 4vw, 1.8rem);
  font-weight: 600; letter-spacing: -0.01em; color: var(--win-text);
}
.rbc-caption {
  font-size: 0.88rem; color: var(--gray-100); margin: 8px auto 0;
  line-height: 1.55; max-width: 560px;
}

.rbc-bars {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 640px; margin: 0 auto;
}
.rbc-bar-row { display: grid; grid-template-columns: 118px 1fr 150px; align-items: center; gap: 12px; }
.rbc-bar-label { font-size: 0.85rem; font-weight: 600; color: var(--gray-100); white-space: nowrap; }
.rbc-bar-track {
  height: 12px; min-width: 0; border-radius: 999px; overflow: hidden;
  background: var(--gray-800); border: 1px solid var(--gray-700);
}
.rbc-bar-fill { height: 100%; border-radius: 999px; }
/* Sign, not row — see renderRuleBreakCard. The rule-break row is not always the
   red one: when it averages green, painting it red contradicts the card's own
   headline. (Declared twice in this file; the consolidated block owns the
   live value — both are kept in step.) */
.rbc-bar-fill.pos { background: var(--win); }
.rbc-bar-fill.neg { background: var(--loss); }

.rbc-bar-val { font-size: 0.85rem; font-weight: 600; color: var(--gray-100); white-space: nowrap; text-align: start; }
.rbc-bar-val span[dir="ltr"] { font-weight: 700; font-size: 0.95rem; }
.rbc-bar-val.pos span[dir="ltr"] { color: var(--win-text); }
.rbc-bar-val.neg span[dir="ltr"] { color: var(--loss-text); }

@media (max-width: 640px) {
  .rbc-banner { padding: 18px 16px 20px; }
  .rbc-bar-row { grid-template-columns: auto 1fr auto; gap: 8px; }
  .rbc-bar-label, .rbc-bar-val { font-size: 0.78rem; }
  .rbc-bar-val span[dir="ltr"] { font-size: 0.85rem; }
}

/* ── The off-plan TRADES card (#ptcBanner, renderPlanTradeCard, 2026-09-25) — the standalone
   .rbc-banner recipe above, plus what a trade-level card needs. ── */
.ptc-banner { margin-top: 18px; }
/* The number's side in Hebrew: see `.rbc-num` in the APP SURFACE block (shared with the rule-break card). */
/* "Not yet" is a quiet line, not a headline: at the standalone size it broke into two giant
   green lines in Hebrew at 1280 (screenshot). */
.ptc-banner .rbc-good-line { font-size: 1.2rem; line-height: 1.35; }
/* "לא לפי התוכנית · 12" is longer than "ימי הפרה · 3": the 118px label column would push
   it into the track. Phones keep the auto columns from the rule above. */
@media (min-width: 641px) { .ptc-banner .rbc-bar-row { grid-template-columns: 160px 1fr 170px; } }
/* Phones: label and value share a line, the bar takes the full width under them. Measured
   at 320 in English: "Not by the plan · 3" (109px) + "-$150 avg per trade" (122px) squeezed
   the track to 2px — the bar was gone — and the row ran 22px out of the card. */
@media (max-width: 640px) {
  .ptc-banner .rbc-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label val" "track track";
    row-gap: 6px;
  }
  .ptc-banner .rbc-bar-label { grid-area: label; }
  .ptc-banner .rbc-bar-val   { grid-area: val; }
  .ptc-banner .rbc-bar-track { grid-area: track; }
}
/* The tags sit in the evidence column, under the bars. As a third grid row under the claim
   they were centred beneath start-aligned text, one chip per line in Hebrew, while the bars
   column stood half empty beside them (screenshot, 1280). */
.ptc-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--edge);
}
.ptc-tags-title { width: 100%; text-align: start; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gray-300); }
.ptc-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; color: var(--gray-100);
  background: var(--loss-bg); border: 1px solid color-mix(in srgb, var(--loss) 55%, transparent);
}
.ptc-tag-emoji { font-size: 0.9rem; line-height: 1; }
.ptc-tag-n { color: var(--gray-300); font-size: 0.74rem; }
.ptc-tag-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.ptc-tag-v.neg { color: var(--loss-text); }
/* Not enough marked yet: one quiet row — a sentence and the way to the journal. No glow,
   no number: there is nothing to price yet. The row is its own RTL island: the card is the
   two-column grid of the APP SURFACE recipe, which put the sentence on the left in Hebrew and
   stretched the button across the whole second column (screenshot, 1280). */
.rbc-banner.ptc-invite { display: block; }
.rbc-banner.ptc-invite::before { display: none; }
.ptc-invite-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.ptc-invite-text { flex: 1 1 260px; min-width: 0; }
.ptc-invite .rbc-title { font-size: 1rem; }
.ptc-invite .rbc-caption { margin: 4px 0 0; text-align: start; font-size: 0.84rem; }
.ptc-invite-btn { flex-shrink: 0; }

/* ─── Dashboard: discipline streak banner ─────────────── */
.streak-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--gray-900), var(--gray-850));
  border: 1px solid var(--gray-700); border-radius: 14px; padding: 16px 20px;
}
.streak-main { display: flex; align-items: center; gap: 14px; }
.streak-flame {
  width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: var(--gray-800); border: 1px solid var(--gray-600);
}
.streak-flame.hot {
  background: var(--moon-soft); border-color: color-mix(in srgb, var(--moon) 45%, transparent);
  animation: flamePulse 2.4s ease-in-out infinite;
}
@keyframes flamePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.streak-headline { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; color: var(--pure-white); letter-spacing: -0.01em; }
.streak-sub { font-size: 0.8rem; color: var(--gray-200); margin-top: 2px; }

.streak-track-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.streak-track-label { font-size: 0.7rem; color: var(--gray-200); text-transform: uppercase; letter-spacing: 0.06em; }
.streak-track { display: flex; gap: 5px; }
.streak-dot {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; line-height: 1;
}
.streak-dot.w { background: var(--win-bg);  border: 1px solid var(--win);  color: var(--win-text); }
.streak-dot.l { background: var(--loss-bg); border: 1px solid var(--loss); color: var(--loss-text); }

@media (max-width: 640px) {
  .streak-banner { justify-content: center; }
  .streak-track-wrap { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .streak-flame.hot { animation: none !important; }
  .checklist-row { animation: none !important; }
  .streak-dot { transition: none !important; }
}

/* ════════════════════════════════════════════════════════
   COACH BOT — chat page · readiness check-in · coach button
   ════════════════════════════════════════════════════════ */

/* ─── Dashboard "talk to coach" button ────────────────── */
.btn-coach {
  background: linear-gradient(135deg, var(--gray-700), var(--gray-850));
  border: 1px solid var(--accent, var(--gray-500));
  color: var(--pure-white);
}
.btn-coach:hover {
  border-color: var(--accent, var(--gray-300));
  background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
  transform: translateY(-1px);
}

/* ─── Coach chat page ─────────────────────────────────── */
/* The header row: the title block and "נקה שיחה" share one line. As a flex item the button
   shrank below its own label on every phone (.btn clips) — 4–15px short at 320–430, in both
   languages, the same trap as the journal's save row (docs/claude/layout-traps.md). The title
   block gives way instead, and wraps. Fixed 2026-10-05. */
.coach-page-head { gap: 12px; }
.coach-page-head > div { min-width: 0; }
#clearChatBtn { flex-shrink: 0; }

/* — The coach page, redesign 2026-10-05: the conversation + what the coach sees — */
.coach-wrap { max-width: 1100px; }
.coach-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; direction: rtl; }
:root[data-lang="en"] .coach-layout { direction: ltr; }
.coach-layout > * { direction: ltr; }
.coach-main { min-width: 0; }
.coach-ctx { padding: 20px; position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.coach-ctx-title { font-size: 0.95rem; font-weight: 700; color: var(--pure-white); }
.coach-ctx-body { display: flex; flex-direction: column; }
.coach-ctx-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--edge); }
.coach-ctx-row:first-child { border-top: 0; padding-top: 0; }
.coach-ctx-k { font-size: 0.76rem; color: var(--gray-300); }
.coach-ctx-v { display: flex; align-items: baseline; gap: 4px; font-size: 0.95rem; color: var(--white); }
.coach-ctx-v b { font-weight: 700; }
.coach-ctx-v b.gold { color: var(--accent, var(--moon)); font-size: 1.3rem; }
.coach-ctx-of, .coach-ctx-n { font-size: 0.76rem; color: var(--gray-300); }
.coach-ctx-note { font-size: 0.8rem; line-height: 1.6; color: var(--gray-200); padding-top: 12px; border-top: 1px solid var(--edge); }
.coach-ctx-link { font-size: 0.82rem; color: var(--accent, var(--moon)); }
.coach-ctx-strip { display: none; }
@media (max-width: 1000px) {
  .coach-layout { grid-template-columns: minmax(0, 1fr); }
  .coach-ctx { display: none; }
  .coach-ctx-strip { display: block; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-card); }
  .coach-ctx-strip > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 48px; cursor: pointer; }
  .coach-ctx-strip > summary::-webkit-details-marker { display: none; }
  .coach-ctx-strip > summary::after {
    content: ''; width: 8px; height: 8px; margin-inline-start: auto;
    border-right: 1.5px solid var(--gray-300); border-bottom: 1.5px solid var(--gray-300);   /* physical: a chevron points down in both languages */
    transform: rotate(45deg); transition: transform var(--t);
  }
  .coach-ctx-strip[open] > summary::after { transform: rotate(-135deg); }
  .coach-ctx-strip > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-card); }
  .coach-ctx-strip-title { font-size: 0.86rem; font-weight: 700; color: var(--white); }
  .coach-ctx-strip-sum { font-size: 0.78rem; color: var(--gray-300); }
  .coach-ctx-strip .coach-ctx-body { padding: 0 16px 12px; }
}

/* dvh, not vh: on a phone the keyboard shrinks the dynamic viewport, so the input
   and the newest message stay on screen while typing (vh first, for older browsers). */
.coach-chat {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 250px);
  height: calc(100dvh - 250px);
  min-height: 440px;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* A short conversation used to sit at the top of a fixed-height panel, leaving
   a few hundred pixels of empty card under it. `margin-top: auto` on the first
   message pushes a short thread down to the input, and is preferred over
   `justify-content: flex-end`, which can make the top of an overflowing list
   unreachable. */
.chat-messages > :first-child { margin-top: auto; }

.chat-msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 15px;
  font-size: 0.92rem;
  line-height: 1.62;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: chatIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes chatIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

/* dir=rtl on the container → flex-start = right (user), flex-end = left (coach) */
/* Which SIDE a bubble sits on is a chat convention, not a language property —
   you are always on the right. These used logical alignment, so the whole
   conversation mirrored in English and the user ended up on the left. The
   container is pinned to a physical direction for LAYOUT only; each bubble
   still resolves its own TEXT direction from its content. */
.chat-messages { direction: ltr; }
.chat-msg { unicode-bidi: plaintext; }
.chat-msg.user {
  align-self: flex-end;
  background: var(--surface-2);
  border: 1px solid var(--edge-hi);
  color: var(--white);
  border-bottom-right-radius: 5px;
}
.chat-msg.assistant {
  align-self: flex-start;
  background: var(--surface-sunk);
  border: 1px solid var(--edge);
  color: var(--gray-100);
  border-bottom-left-radius: 5px;
}
.chat-msg.streaming::after {
  content: '▋';
  margin-inline-start: 2px;
  color: var(--gray-200);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 16px;
}
.chat-chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gray-850);
  border: 1px solid var(--gray-700);
  color: var(--gray-200);
  font-size: 0.82rem;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--t);
}
.chat-chip:hover {
  border-color: var(--accent, var(--gray-500));
  color: var(--white);
  transform: translateY(-1px);
}

/* The composer is the one thing on this page you act with, so it is the lit
   lip of the panel rather than a flat --gray-900 band that never followed the
   theme's lighting tokens. */
.chat-input-bar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 16px;
  border-top: 1px solid var(--edge);
  background: var(--surface);
}
/* The free plan's allowance under the input (subscriptions 3.7): one quiet line on the input bar's
   own ground, or — spent — a card saying when the conversation is back. [hidden] stated: the
   element's rule sets padding and background, and a hidden one must take no room from the chat. */
.chat-quota { padding: 0 16px 12px; background: var(--surface); }
.chat-quota[hidden] { display: none; }
.chat-quota-line { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--gray-300); unicode-bidi: plaintext; }
.chat-quota-card { padding: 14px 16px; border-radius: 10px; background: var(--surface-sunk); border: 1px solid var(--edge); }
.chat-quota-title { font-weight: 600; font-size: 0.9rem; color: var(--white); margin-bottom: 4px; }
.chat-quota-text { margin: 0 0 8px; font-size: 0.84rem; line-height: 1.5; color: var(--gray-200); }
.chat-input {
  flex: 1;
  resize: none;
  background: var(--gray-850);
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.92rem;
  line-height: 1.5;
  max-height: 160px;
  transition: border-color var(--t);
}
.chat-input:focus { outline: none; border-color: var(--accent, var(--gray-500)); }
.chat-input::placeholder { color: var(--gray-300); }
.chat-input:disabled { opacity: 0.6; }

.chat-send {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent, var(--moon));
  color: var(--on-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
}
.chat-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.chat-send:disabled { opacity: 0.4; cursor: default; }
/* paper-plane points left by default; mirror it for RTL so it points "forward" (right) */
.chat-send svg { transform: scaleX(-1); }

/* ─── Chart attachment (coach chat vision) ────────────── */
.chat-attach {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--gray-850);
  color: var(--gray-100);
  border: 1px solid var(--gray-700);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t);
}
.chat-attach:hover:not(:disabled) {
  border-color: var(--accent, var(--gray-500));
  color: var(--pure-white);
  transform: translateY(-1px);
}
.chat-attach:disabled { opacity: 0.4; cursor: default; }

.chat-attach-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid var(--gray-800);
  background: var(--gray-900);
}
.chat-attach-preview img {
  width: 40px; height: 40px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--gray-700);
}
.chat-attach-name { flex: 1; font-size: 0.78rem; color: var(--gray-200); }
.chat-attach-remove {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  border: 1px solid var(--gray-700); background: var(--gray-850);
  color: var(--gray-200); cursor: pointer; font-size: 0.7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t);
}
.chat-attach-remove:hover { border-color: var(--loss); color: var(--loss-text); }

.chat-msg-img {
  display: block;
  max-width: min(280px, 100%);
  border-radius: 10px;
  border: 1px solid var(--gray-700);
  margin-bottom: 8px;
}

.coach-chat.dragging { border-color: var(--accent, var(--gray-400)); }

/* ─── The opening screen of an empty conversation ────────────────────────────
   The panel is `calc(100vh - 250px)` tall on purpose — a chat with history
   should fill the viewport. But an EMPTY one rendered two grey bubbles glued to
   the bottom of that box, so the first thing anyone ever saw here was a few
   hundred pixels of nothing with a greeting hiding beneath it.

   `.is-empty` centres the column instead of bottom-anchoring it, and the
   greeting becomes composed type rather than chat furniture.
   ───────────────────────────────────────────────────────────────────────────*/
.coach-chat.is-empty .chat-messages { justify-content: center; }
/* ⚠️ Neutralises the `margin-top: auto` that bottom-anchors a short thread —
   with it still applied, `justify-content: center` has nothing left to do. */
.coach-chat.is-empty .chat-messages > :first-child { margin-top: 0; }

.chat-opening {
  align-self: center;
  max-width: 460px;
  text-align: center;
  padding: 8px 0 4px;
  animation: chatIn .45s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-opening-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  color: var(--pure-white);
}
/* ⚠️ .brand-halo declares `display: inline-block` LATE in this file and beats an
   earlier `display: block`, which is what once dropped the landing's emblem into
   a shared line box 79px off centre. `margin: 0 auto` on an inline-block does
   nothing, so the mark is centred by its own block context: it is the only
   child of a text-align:center parent, and inline-block obeys that. */
.chat-opening-mark svg { width: 100%; height: 100%; display: block; }

.chat-opening-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pure-white);
  margin-bottom: 8px;
}

.chat-opening-line {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--gray-100);
  unicode-bidi: plaintext;
}

/* The proactive insight is not small talk — it is the one concrete thing the
   coach already noticed. A margin note with the brand seam, not a third bubble. */
.chat-opening-note {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--surface-sunk);
  border: 1px solid var(--edge);
  border-inline-start: 2px solid var(--gold-low);
  border-radius: 10px;
  text-align: start;
}
.chat-opening-note-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--moon);
  margin-bottom: 6px;
}
.chat-opening-note-text {
  display: block;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--white);
  unicode-bidi: plaintext;
}

/* The chips are the only way in from a cold start, so on the opening screen
   they read as offers, not as an afterthought under the input bar. */
.coach-chat.is-empty .chat-suggestions {
  justify-content: center;
  padding: 4px 22px 18px;
}

/* ─── Pre-session readiness check-in ──────────────────── */
.readiness-block { margin: 2px 0 16px; }
/* The label wraps rather than run out of its box: .btn is nowrap, and in English
   "Get a readiness note from the coach" is 274px wide. In the cockpit's prep recess
   at 320 that ran 33px off the screen, and up to 430 it stuck out of the recess;
   the Hebrew label (182px) stuck out at 320 and 340 (measured 2026-09-27). Where the
   label fits, a line that does not wrap lays out exactly as before; balance keeps a
   lone "coach" off the second line. */
.readiness-block .btn { max-width: 100%; white-space: normal; text-wrap: balance; }
.readiness-note {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--gray-850);
  border: 1px solid var(--gray-700);
  color: var(--gray-100);
  font-size: 0.88rem;
  line-height: 1.62;
  white-space: pre-wrap;
}
.readiness-note.streaming::after {
  content: '▋';
  margin-inline-start: 2px;
  color: var(--gray-200);
  animation: blink 1s step-end infinite;
}

@media (max-width: 1000px) {
  .coach-chat { height: calc(100vh - 290px); height: calc(100dvh - 290px); min-height: 300px; }
}
@media (max-width: 640px) {
  .coach-chat { height: calc(100vh - 290px); height: calc(100dvh - 290px); min-height: 240px; }   /* fitChat (coach.js) measures the real room */
  .chat-msg { max-width: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-msg { animation: none !important; }
  .chat-msg.streaming::after,
  .readiness-note.streaming::after { animation: none !important; }
}

/* ════════════════════════════════════════════════════════
   CUSTOM SCROLLBARS — thin, dark, on-brand (replaces the
   chunky default system scrollbar in textareas / scroll areas)
   ════════════════════════════════════════════════════════ */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-600) transparent;
}

/* WebKit / Chromium */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gray-600);
  border-radius: 10px;
  border: 2px solid transparent;   /* padding so the thumb looks slim */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent, var(--gray-500)); }
::-webkit-scrollbar-corner { background: transparent; }

/* Text selection — tinted by the accent when chosen */
::selection { background: var(--accent, var(--gray-600)); color: var(--pure-white); }

/* ════════════════════════════════════════════════════════
   ANIMATIONS OFF — when the user picks "Off" (or system reduce)
   ════════════════════════════════════════════════════════ */
html.anim-off *,
html.anim-off *::before,
html.anim-off *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
/* …and the page itself: `html { scroll-behavior: smooth }` sits on the root, which `html.anim-off *` never
   matched — so a jump to an anchor still glided with animations off (found 2026-10-13, Settings#hardestRow) */
html.anim-off { scroll-behavior: auto; }

/* ════════════════════════════════════════════════════════
   TRADE IMPORT (CSV) — journal Step 1 panel · preview modal
   ════════════════════════════════════════════════════════ */

.trade-import {
  border: 1.5px dashed var(--gray-700);
  border-radius: 12px;
  background: var(--gray-950);
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.trade-import:hover { border-color: var(--gray-600); }
.trade-import.drag { border-color: var(--accent, var(--win)); background: rgba(74, 124, 94, 0.06); }
.trade-import-head { display: flex; align-items: center; gap: 12px; }
.trade-import-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  background: var(--gray-850); border: 1px solid var(--gray-700);
}
.trade-import-title { font-size: 0.95rem; font-weight: 600; color: var(--white); }
.trade-import-sub { font-size: 0.78rem; color: var(--gray-200); margin-top: 2px; line-height: 1.5; max-width: 440px; }
.trade-import-hint { font-size: 0.74rem; color: var(--gray-300); margin-top: 10px; line-height: 1.5; }

/* loaded chip */
.trade-loaded {
  border: 1px solid var(--win); background: var(--win-bg);
  border-radius: 12px; padding: 12px 15px;
}
.trade-loaded-row { display: flex; align-items: center; gap: 10px; }
.trade-loaded-check {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--win); color: #0c1a12; font-weight: 800; font-size: 0.8rem;
}
.trade-loaded-text { flex: 1; font-size: 0.9rem; color: var(--win-text); }
.trade-loaded-clear {
  background: none; border: 1px solid var(--gray-600); color: var(--gray-200);
  border-radius: 7px; padding: 4px 12px; font-size: 0.78rem; cursor: pointer;
  transition: all var(--t);
}
.trade-loaded-clear:hover { border-color: var(--loss); color: var(--loss-text); }
.trade-loaded-flags {
  margin-top: 8px; font-size: 0.78rem; color: var(--gray-100);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.trade-loaded-flags .tlf { white-space: nowrap; }   /* a warning and its sign wrap together */

/* ── Trade by trade (roadmap item 4, 2026-09-25) — renderTradeJournal in journal.js ── */
.trade-journal {
  margin-top: 12px; border: 1px solid var(--edge); border-radius: 12px;
  padding: 12px 14px 4px; background: var(--gray-900);
}
.tj-head { font-size: 0.9rem; font-weight: 600; color: var(--white); }
.tj-sub  { font-size: 0.78rem; color: var(--gray-300); margin: 3px 0 6px; line-height: 1.5; }
.tj-trade + .tj-trade { border-top: 1px solid var(--edge); }
/* the row can wrap: at 320 symbol + side + time + P&L + marks would otherwise squeeze (layout-traps) */
.tj-row {
  width: 100%; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
  padding: 8px 2px; background: none; border: 0; color: var(--gray-100);
  font-family: var(--font); font-size: 0.85rem; text-align: start; cursor: pointer;
}
.tj-row:hover .tj-sym { color: var(--pure-white); }
.tj-sym  { font-weight: 600; color: var(--white); }
.tj-dir, .tj-time { font-size: 0.78rem; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.tj-pnl  { margin-inline-start: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tj-marks { display: inline-flex; align-items: center; gap: 6px; min-width: 14px; }
.tj-grade { font-size: 0.62rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.tj-grade.w { background: color-mix(in srgb, var(--win) 26%, transparent);  color: var(--win-text); }
.tj-grade.l { background: color-mix(in srgb, var(--loss) 26%, transparent); color: var(--loss-text); }
/* gold = discipline: this trade carries the trader's own read of it */
.tj-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--moon); }
.tj-editor { display: grid; gap: 10px; padding: 2px 2px 14px; }
.tj-editor[hidden] { display: none; }
.tj-plan { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-plan-btn {
  padding: 8px 14px; border-radius: 999px; font-family: var(--font); font-size: 0.82rem; font-weight: 600;
  background: var(--gray-850); border: 1px solid var(--gray-700); color: var(--gray-200); cursor: pointer;
  transition: all var(--t);
}
.tj-plan-btn:hover { border-color: var(--gray-500); color: var(--white); }
.tj-plan-btn.w.sel { background: var(--win-bg);  border-color: var(--win);  color: var(--win-text); }
.tj-plan-btn.l.sel { background: var(--loss-bg); border-color: var(--loss); color: var(--loss-text); }
.tj-label { font-size: 0.78rem; color: var(--gray-300); }
.tj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tj-tag { padding: 6px 11px; font-size: 0.78rem; }
/* the trader's own words: base direction from their first letter, in both languages */
.tj-note { width: 100%; min-width: 0; resize: vertical; font-size: 0.85rem; unicode-bidi: plaintext; text-align: start; }

/* the trade-by-trade list, 2026-10-12: a trade entered by hand, the chip's "net", the editor's risk / RR row */
.tj-manual { font-size: 0.66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--edge-hi); color: var(--gray-200); }
.trade-loaded-net { font-size: 0.72rem; color: var(--gray-200); }
.tj-risk { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; }
.tj-manual-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* preview modal — redesigned 2026-10-12 ("clean fintech"): a flat panel; per trade a line of what happened
   (time · symbol · the contract · side · ticks · net) and a line of what the trader adds (risk · planned RR ·
   actual R); a card per trade on a phone. Gold only on "use these numbers"; green and red only on money. */
.trade-preview-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
  z-index: 620; align-items: center; justify-content: center; padding: 20px;
}
.trade-preview-overlay.open { display: flex; animation: fadeIn 0.2s ease; }
.trade-preview-box {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--radius-card); padding: 20px 22px 0;
  max-width: 820px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.trade-preview-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--white); }
.tp-x {
  flex: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--edge-hi);
  background: transparent; color: var(--gray-200); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.tp-x:hover { color: var(--white); border-color: var(--gray-300); }
.tp-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.trade-preview-summary {
  padding: 14px 16px; border-radius: 14px; margin-bottom: 12px;
  background: var(--surface-sunk); border: 1px solid var(--edge); color: var(--white);
}
.tp-sum-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tp-sum-count { font-size: 0.9rem; color: var(--gray-200); }
.tp-sum-count b { font-family: var(--font-display); font-size: 1.35rem; color: var(--white); }
.tp-sum-wl { margin-inline-start: 6px; font-size: 0.82rem; color: var(--gray-300); }
.tp-sum-net { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tp-sum-lbl { font-size: 0.74rem; color: var(--gray-300); }
.tp-sum-net b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-sum-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 0.8rem; color: var(--gray-200); }
.tp-sep { color: var(--gray-400); }
.tp-sum-link { color: var(--white); text-underline-offset: 3px; }

.tp-netbar {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 12px; padding: 8px 14px;
  border-radius: 12px; border: 1px solid var(--edge); font-size: 0.85rem; color: var(--gray-100); cursor: pointer;
}
.tp-netbar[hidden] { display: none; }
.tp-netbar input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--moon); }
.tp-cur-note { margin: 0 0 12px; font-size: 0.78rem; color: var(--gray-300); }
.tp-cur-note[hidden] { display: none; }

.trade-preview-flags { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.trade-preview-flags:empty { display: none; }
.tp-flag {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; border-radius: 12px; line-height: 1.5;
  background: var(--surface-sunk); border: 1px solid var(--edge-hi); color: var(--gray-100); font-size: 0.85rem;
}
.tp-flag b { color: var(--white); }

.tp-list { display: grid; gap: 8px; }
.tp-trade { padding: 12px 14px; border-radius: 14px; background: var(--surface-sunk); border: 1px solid var(--edge); }
.tp-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.tp-time { min-width: 40px; font-size: 0.78rem; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.tp-sym { font-weight: 700; color: var(--white); }
.tp-inst { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--edge-hi); font-size: 0.74rem; color: var(--gray-100); white-space: nowrap; }
.tp-pick { width: auto; max-width: 260px; min-width: 0; padding: 5px 10px; font-size: 0.8rem; }
.tp-dir, .tp-ticks { font-size: 0.8rem; color: var(--gray-200); font-variant-numeric: tabular-nums; }
.tp-money { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.tp-money b { font-size: 0.95rem; }
.tp-money small { font-size: 0.72rem; color: var(--gray-300); }
.tp-pts { font-size: 0.9rem; white-space: nowrap; }   /* an unknown contract: points only, one line */

/* what the trader adds: risk (+ its unit), planned RR, actual R — also in the trade editor and the manual form */
.tp-ins { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; margin-top: 10px; }
.tp-in { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tp-in > span:first-child { font-size: 0.72rem; color: var(--gray-300); }
.tp-in .form-input { width: 100%; min-width: 0; padding: 7px 10px; font-size: 0.85rem; }
.tp-risk-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tp-risk-wrap .form-input { flex: 1 1 auto; width: auto; min-width: 0; }
.tp-unit { flex: none; }
.tp-unit .a-seg-btn { padding: 5px 9px; font-size: 0.74rem; }
.tp-unit .a-seg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tp-r { display: inline-flex; align-items: center; min-height: 36px; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.tp-actual[hidden], .tp-r[hidden], .tj-actual[hidden] { display: none; }
.form-input.bad { border-color: var(--loss); }
.tp-note { margin-top: 6px; font-size: 0.74rem; color: var(--gray-300); }
.tp-warns { display: grid; gap: 6px; margin-top: 8px; }
.tp-warns:empty { display: none; }
.tp-warn { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; line-height: 1.5; color: var(--gray-100); }
.tp-warn > span:first-child {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--gray-300); color: var(--gray-100);
  font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

.tp-win  { color: var(--win-text);  font-weight: 600; }
.tp-loss { color: var(--loss-text); font-weight: 600; }
.tp-r-empty { color: var(--gray-300); }

.trade-preview-warn {
  margin-top: 12px; padding: 10px 13px; border-radius: 12px;
  background: var(--surface-sunk); border: 1px solid var(--edge);
  color: var(--gray-100); font-size: 0.8rem; line-height: 1.55;
}
/* the actions stay in reach at the bottom of a long list */
.trade-preview-actions {
  position: sticky; bottom: 0; display: flex; gap: 10px; margin-top: 14px; padding: 12px 0 18px;
  background: var(--surface); border-top: 1px solid var(--edge);
}
.trade-preview-actions .btn { flex: 1; }

/* ── A trade by hand (2026-10-12) — journal step 1, initManualTrade in journal.js ── */
.jmt-open {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 12px; padding: 0 16px;
  border-radius: 999px; border: 1px dashed var(--edge-hi); background: transparent; color: var(--gray-100);
  font-family: var(--font); font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.jmt-open:hover { border-color: var(--gray-300); color: var(--white); }
.jmt-open:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.jmt-open[hidden] { display: none; }
.jmt-card { display: grid; gap: 12px; margin-top: 12px; padding: 16px; border-radius: 14px; background: var(--surface-sunk); border: 1px solid var(--edge); }
.jmt-card[hidden] { display: none; }
.jmt-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.jmt-head b { font-size: 0.95rem; color: var(--white); }
.jmt-head span { font-size: 0.78rem; color: var(--gray-300); }
.jmt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }   /* 4: no field alone on a row */
.jmt-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jmt-f[hidden] { display: none; }
.jmt-f > span:first-child { font-size: 0.74rem; color: var(--gray-300); }
.jmt-f > .form-input { width: 100%; min-width: 0; }
.jmt-f > .a-seg { align-self: flex-start; }
.jmt-wide { grid-column: span 2; }
.jmt-inst { grid-column: span 3; }   /* the contract: its name is the longest thing in the form */
.jmt-sub { padding-top: 10px; border-top: 1px solid var(--edge); font-size: 0.78rem; font-weight: 600; color: var(--gray-200); }
.jmt-live {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 10px 12px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--edge); font-size: 0.85rem; color: var(--gray-100);
}
.jmt-live-empty { color: var(--gray-300); }
.jmt-live small { color: var(--gray-300); }
.jmt-err { font-size: 0.8rem; color: var(--loss-text); }
.jmt-err[hidden] { display: none; }
.jmt-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 760px) {
  .jmt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jmt-inst { grid-column: span 2; }
}
@media (max-width: 560px) {
  .trade-preview-overlay { padding: 8px; align-items: flex-end; }
  .trade-preview-box { padding: 16px 14px 0; max-height: 94vh; }
  .tp-ins, .tj-risk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-ins > .tp-in:first-child, .tj-risk > .tp-in:first-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .jmt-grid { grid-template-columns: minmax(0, 1fr); }
  .jmt-wide, .jmt-inst { grid-column: auto; }
  .tp-sum-net { align-items: flex-start; }   /* once it wraps under the count, label and sum share an edge */
}

/* ── The journal's three levels (2026-10-12) — journal.js, "The three levels of the daily summary" ──
   Prefix jlv- (checked unused across every page first). Nothing here is gold but the save button it
   sits beside; a chosen answer is neutral (a light edge and a dot), and green / red stay for money. */
.jlv-pick { display: grid; gap: 12px; margin-bottom: 16px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--edge); }
.jlv-pick[hidden] { display: none; }
.jlv-pick-head { display: grid; gap: 3px; }
.jlv-pick-head b { font-size: 0.98rem; color: var(--white); }
.jlv-pick-head span { font-size: 0.8rem; color: var(--gray-300); }
.jlv-pick-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jlv-pick-opt {
  display: grid; gap: 4px; justify-items: start; align-content: start; text-align: start; min-height: 44px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--edge); background: var(--surface-sunk); color: var(--gray-100);
  font-family: var(--font); cursor: pointer; transition: border-color .15s ease;
}
.jlv-pick-opt:hover { border-color: var(--gray-300); }
.jlv-pick-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.jlv-pick-opt b { font-size: 0.92rem; color: var(--white); }
.jlv-pick-time { font-size: 0.74rem; color: var(--gray-300); }
.jlv-pick-opt span:last-child { font-size: 0.8rem; color: var(--gray-200); line-height: 1.45; }
.jlv-pick-later, .jlv-skip {
  justify-self: start; min-height: 44px; padding: 6px 0; background: none; border: 0; color: var(--gray-200);
  font-family: var(--font); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.jlv-pick-later:hover, .jlv-skip:hover { color: var(--white); }
/* the execution grade, required at quick and minimal */
.jlv-req { margin-top: 8px; font-size: 0.8rem; color: var(--loss-text); }
.jlv-req[hidden] { display: none; }
/* "today only", above the save button */
.jlv-today { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.jlv-today-label { font-size: 0.8rem; color: var(--gray-300); }
.jlv-hint { font-size: 0.8125rem; color: var(--gray-200); }   /* as #step1Hint's own inline size and colour */
.jlv-hint[hidden] { display: none; }
/* the draft */
.jlv-notes-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.jlv-draft-btn { min-height: 40px; gap: 6px; }
.jlv-draft-ico { color: var(--gray-300); }
.jlv-draft-note { font-size: 0.76rem; color: var(--gray-300); }
.jlv-draft { display: grid; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-sunk); border: 1px dashed var(--edge-hi); }
.jlv-draft[hidden] { display: none; }
.jlv-draft-head { font-size: 0.76rem; font-weight: 600; color: var(--gray-300); }
.jlv-draft-text { min-height: 1.6em; font-size: 0.9rem; line-height: 1.65; color: var(--gray-100); white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; }
.jlv-draft-text.is-pending::before { content: '…'; color: var(--gray-300); }
.jlv-draft-err { font-size: 0.8rem; color: var(--gray-200); }
.jlv-draft-err[hidden] { display: none; }
.jlv-draft-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* dictation: a round button in the field's bottom corner; the field keeps room for it */
.jlv-voice-wrap { position: relative; }
.jlv-voice-wrap:has(.jlv-mic) textarea { padding-bottom: 48px; }
.jlv-mic {
  position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--edge);
  background: var(--surface); color: var(--gray-200); cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.jlv-mic::after { content: ''; position: absolute; inset: -4px; }
/* at the END of the reading line in both languages, whatever the field's own box direction */
:root:not([data-lang="en"]) .jlv-mic { right: auto; left: 8px; }
.jlv-mic:hover { color: var(--white); border-color: var(--gray-300); }
.jlv-mic:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.jlv-mic-dot { position: absolute; top: 3px; inset-inline-end: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--loss); opacity: 0; }
.jlv-mic.on { color: var(--white); border-color: var(--gray-300); }
.jlv-mic.on .jlv-mic-dot { opacity: 1; }
html:not(.anim-off) .jlv-mic.on .jlv-mic-dot { animation: jlvPulse 1.2s ease-in-out infinite; }
@keyframes jlvPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.55; } }
.jlv-voice-interim { margin-top: 6px; font-size: 0.82rem; font-style: italic; color: var(--gray-300); unicode-bidi: plaintext; text-align: start; }
.jlv-voice-msg { margin-top: 6px; font-size: 0.78rem; color: var(--gray-200); }
.jlv-voice-interim[hidden], .jlv-voice-msg[hidden] { display: none; }
/* step 2 at quick: why a question was added, where the questions came from, the closed questions */
.jlv-why, .jlv-src {
  margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: var(--surface-sunk); border: 1px solid var(--edge);
  font-size: 0.85rem; color: var(--gray-100); unicode-bidi: plaintext; text-align: start;
}
.jlv-src { font-size: 0.8rem; color: var(--gray-300); }
fieldset.jlv-mc { min-width: 0; margin: 0 0 14px; }
/* Hebrew: the new cards read from the right — the options start there and "skip today" sits at the
   start. English: a question follows its own text (the coach answers in the UI's language), where the
   older .question-card rule pins every question to the right. */
:root:not([data-lang="en"]) .jlv-mc, :root:not([data-lang="en"]) .jlv-written { direction: rtl; }
:root[data-lang="en"] .jlv-mc .question-text, :root[data-lang="en"] .jlv-written .question-text { direction: ltr; unicode-bidi: plaintext; text-align: start; }
/* a legend sits ON the fieldset's border unless it floats; floated, it is an ordinary first line */
.jlv-mc > legend { float: inline-start; width: 100%; padding: 0; }
.jlv-opts { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.jlv-opt {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--edge); background: var(--surface-sunk); color: var(--gray-100);
  font-size: 0.88rem; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.jlv-opt:hover { border-color: var(--gray-300); }
.jlv-opt input {
  appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0;
  border-radius: 50%; border: 1.5px solid var(--gray-300); display: grid; place-content: center; cursor: pointer;
}
.jlv-opt input::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--white); transform: scale(0); transition: transform .12s ease; }
.jlv-opt input:checked::before { transform: scale(1); }
.jlv-opt input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.jlv-opt:has(input:checked) { border-color: var(--white); background: var(--surface); color: var(--white); }
.jlv-opt span { unicode-bidi: plaintext; }
.jlv-other { margin-top: 10px; }
.jlv-other[hidden] { display: none; }
.jlv-written.is-skipped .jlv-voice-wrap { display: none; }
.jlv-written.is-skipped .question-text { color: var(--gray-300); }
/* Analytics: "מה חוזר בסיכומים שלך" — not money, so the bars are neutral */
.jlv-picks-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 6px; }
.jlv-picks-h { margin-bottom: 8px; font-size: 0.78rem; font-weight: 600; color: var(--gray-300); }
.jlv-picks-rows { display: grid; gap: 10px; }
.jlv-picks-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 24%) auto minmax(52px, auto); align-items: center; gap: 10px; font-size: 0.85rem; color: var(--gray-100); }
/* what the pattern costs: money, so green / red — the bars beside it stay neutral */
.jlv-picks-val { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; color: var(--gray-200); }
.jlv-picks-val.win-text { color: var(--win-text); }     /* this rule sits after the shared ones: say the colour again */
.jlv-picks-val.loss-text { color: var(--loss-text); }
/* the site's own words (translated per language), so the UI's direction — not plaintext, which made "FOMO"
   (a Latin first letter) an LTR line and pushed it to the other edge of its Hebrew column (Daniel, 2026-10-13) */
.jlv-picks-name { min-width: 0; text-align: start; }
.jlv-picks-bar { height: 6px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.jlv-picks-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gray-300); }
.jlv-picks-num { font-size: 0.78rem; color: var(--gray-300); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jlv-picks-none { font-size: 0.8rem; color: var(--gray-300); }
:root:not([data-lang="en"]) .jlv-picks-cols { direction: rtl; }
/* a minimal day skips step 2 */
.step-dot.skipped { color: var(--gray-300); }
.step-dot.skipped .step-num { border-style: dashed; background: transparent; color: var(--gray-300); }
@media (max-width: 760px) {
  .jlv-pick-opts { grid-template-columns: minmax(0, 1fr); }
  .jlv-picks-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .jlv-opts { flex-direction: column; }
  .jlv-opt { width: 100%; border-radius: 12px; }
}

/* ─── The profile questionnaire (2026-10-13) — after the sign-up, once on the dashboard ──────────
   js/profile-quiz.js. One question per screen; the cards are the site's flat ones, the picked answer
   gets the accent edge, and "המשך" is the one gold button. The root is a Hebrew-source island
   (dir="rtl"), which the shared [dir="rtl"] rule turns around in English. */
.pq { display: grid; gap: 14px; text-align: start; }
.pq-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pq-dots { display: flex; align-items: center; gap: 6px; }
.pq-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--edge); transition: width .2s ease, background .2s ease; }
.pq-dot.is-done { background: var(--gray-300); }
.pq-dot[aria-current] { width: 22px; background: var(--accent); }
.pq-step { display: grid; gap: 12px; }
html:not(.anim-off) .pq-step, html:not(.anim-off) .pq-is-done { animation: pqIn .22s ease-out; }
@media (prefers-reduced-motion: reduce) { html:not(.anim-off) .pq-step, html:not(.anim-off) .pq-is-done { animation: none; } }
@keyframes pqIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pq-q { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--white); }
.pq-q:focus { outline: none; }
.pq-sub, .pq-foot { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--gray-300); }
.pq-field { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.pq-opt, .pq-persona {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--edge); background: var(--surface-sunk); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pq-persona { align-items: flex-start; }
.pq-opt input, .pq-persona input {
  appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0;
  border-radius: 50%; border: 1.5px solid var(--gray-300); display: grid; place-content: center; cursor: pointer;
}
.pq-persona input { margin-top: 3px; }
.pq-opt input::before, .pq-persona input::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .12s ease; }
.pq-opt input:checked::before, .pq-persona input:checked::before { transform: scale(1); }
.pq-opt:hover, .pq-persona:hover, .pq-chip:hover { border-color: var(--gray-300); }
.pq-opt:has(input:checked), .pq-persona:has(input:checked), .pq-chip:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.pq-opt:has(input:focus-visible), .pq-persona:has(input:focus-visible), .pq-chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.pq-opt input:focus-visible, .pq-persona input:focus-visible { outline: none; }
.pq-opt-body, .pq-persona-body { display: grid; gap: 2px; min-width: 0; }
.pq-opt-title { font-size: 0.95rem; font-weight: 600; color: var(--white); }
.pq-opt-sub { font-size: 0.8rem; color: var(--gray-300); }
.pq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pq-chip {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--surface-sunk); color: var(--gray-100); font-size: 0.86rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
/* the checkbox covers its chip: the whole pill is the target, and it keeps the keyboard and the reader */
.pq-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pq-chip:has(input:checked) { color: var(--white); }
.pq-note { min-height: 1.2em; margin: 0; font-size: 0.8rem; color: var(--gray-200); }
.pq-personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pq-persona-title { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--white); }
.pq-persona-desc { font-size: 0.78rem; line-height: 1.45; color: var(--gray-300); }
.pq-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pq-sum, .pq-rules { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--edge); background: var(--surface-sunk); text-align: start; }
.pq-sum-title, .pq-rules-title { font-size: 0.76rem; font-weight: 600; color: var(--gray-300); }
.pq-sum-row { font-size: 0.88rem; color: var(--gray-100); }
.pq-rule { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pq-rule-text { flex: 1 1 200px; min-width: 0; font-size: 0.88rem; line-height: 1.5; color: var(--white); }
.pq-rule-state { font-size: 0.8rem; color: var(--gray-300); }
.pq-rule-state.is-new { color: var(--gray-100); }
/* the dashboard's one-time card: the first-run card's place and recipe */
.pq-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; text-align: start; }
.pq-card-title { margin: 0 0 4px; font-size: 1.08rem; font-weight: 600; color: var(--white); }
.pq-card-sub { margin: 0; font-size: 0.82rem; color: var(--gray-200); }
.pq-card-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pq-card-head[hidden] { display: none; }        /* its own display outranks the attribute */
/* the first-run card's checklist step: the ready rule for what he marked, one tap */
.onboard-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 0.8rem; line-height: 1.45; color: var(--gray-200); }
/* like the card's other lines (.onboard-why): its own base direction, so the full stop ends the sentence */
.onboard-rule > span { unicode-bidi: plaintext; text-align: left; }
.onboard-rule-add {
  position: relative; min-height: 28px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--edge); background: none;
  font: inherit; font-size: 0.78rem; color: var(--white); cursor: pointer;
}
.onboard-rule-add::after { content: ''; position: absolute; inset: -6px -2px; }
.onboard-rule-add:hover { border-color: var(--gray-300); }
.onboard-rule-add:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* the sign-up page: the questionnaire in the sign-up card's place */
.pq-signup-head { display: grid; gap: 4px; margin-bottom: 14px; text-align: start; }
.pq-signup-mark { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 600; color: var(--white); }
.pq-signup-mark svg { width: 20px; height: 20px; color: var(--accent); }
.su-done .pq-sum, .su-done .pq-rules { margin-top: 12px; }
/* the welcome's title takes the focus after the questionnaire (for a screen reader) — not a frame around it */
.su-done-title:focus { outline: none; }
/* Analytics: "מה סימנת מול מה שקורה" — the bars neutral, the amounts money */
.pqh-rows { display: grid; gap: 12px; margin-top: 8px; }
.pqh-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 22%) auto; align-items: center; gap: 6px 12px; font-size: 0.86rem; color: var(--gray-100); }
.pqh-name { min-width: 0; text-align: start; font-weight: 600; }
.pqh-num { font-size: 0.8rem; color: var(--gray-300); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pqh-money { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; color: var(--gray-300); }
.pqh-money b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-200); }
.pqh-money b.win-text { color: var(--win-text); }      /* after the shared rules: say the colour again */
.pqh-money b.loss-text { color: var(--loss-text); }
.pqh-honest { grid-column: 1 / -1; font-size: 0.8rem; color: var(--gray-300); }
.pqh-progress { margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 0.85rem; line-height: 1.5; color: var(--gray-100); text-align: start; }
.pqh-progress a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pqh-progress a:hover { text-decoration: underline; }
:root:not([data-lang="en"]) .pqh-rows, :root:not([data-lang="en"]) .pqh-progress { direction: rtl; }
.jlv-picks-said { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--edge);
  font-size: 0.68rem; font-weight: 500; color: var(--gray-300); vertical-align: 1px; }
/* Settings: the difficulties as chips (the same ones) */
.pq-chips.is-settings { margin-top: 10px; }
@media (max-width: 560px) {
  /* the name gets its own line; the bar and the count share the one under it */
  .pqh-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pqh-name { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
  .pq-personas { grid-template-columns: minmax(0, 1fr); }
  .pq-persona { min-height: 0; padding: 9px 12px; }
  .pq-q { font-size: 1.04rem; }
}

@media (max-width: 560px) {
  .trade-import { justify-content: center; text-align: center; }
  .trade-import-head { flex-direction: column; }
}

/* ─── Weekly Wrap — the proactive week-in-review ─────────────────────── */

/* Grade → accent colour (shared by banner badge + hero). Discipline-first. */
.grade-A { --wrap-c: var(--win); }
.grade-B { --wrap-c: #6fbf73; }
.grade-C { --wrap-c: var(--accent, #D4AF37); }
.grade-D { --wrap-c: #d08b3e; }
.grade-F { --wrap-c: var(--loss); }

/* Banner on the dashboard */
.wrap-banner { margin-bottom: 18px; }
.wrap-banner-inner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--edge);
  position: relative; overflow: hidden;
}
.wrap-banner-badge {
  position: relative; flex: 0 0 auto; width: 42px; height: 42px;
  display: grid; place-items: center; font-size: 1.15rem;
  border-radius: 12px; color: var(--accent, var(--moon)); background: var(--moon-soft);
  border: 1px solid color-mix(in srgb, var(--accent, var(--moon)) 30%, transparent);
}
.wrap-banner-grade {
  position: absolute; right: -6px; bottom: -6px;
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; line-height: 1;
  color: #0c0c0d; background: var(--wrap-c, var(--accent));
  border: 1.5px solid var(--gray-900);
}
.wrap-banner-text { flex: 1 1 auto; min-width: 0; }
.wrap-banner-title { font-family: var(--font-display); font-size: 1.02rem; color: var(--white); }
.wrap-banner-sub { font-size: 0.8rem; color: var(--gray-200); margin-top: 2px; }
.wrap-banner-open { flex: 0 0 auto; }
.wrap-banner-x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  background: transparent; border: none; color: var(--gray-300); cursor: pointer;
  font-size: 0.9rem; transition: color .15s ease, background .15s ease;
}
.wrap-banner-x:hover { color: var(--white); background: var(--tint); }

/* Modal shell */
.wrap-overlay .wrap-box {
  max-width: 620px; width: 100%; position: relative;
  max-height: 90vh; overflow-y: auto; padding: 0;
}
.wrap-close {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  background: var(--gray-850); border: 1px solid var(--gray-700);
}
.wrap { padding: 34px 30px 26px; }
.wrap-eyebrow {
  text-align: center; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent, var(--gray-300)); font-weight: 600;
}
.wrap-range { text-align: center; color: var(--gray-200); font-size: 0.85rem; margin-top: 6px; }

/* Grade hero */
.wrap-grade {
  display: flex; align-items: center; gap: 20px; margin: 22px 0 20px;
  padding: 22px; border-radius: 18px;
  background:
    var(--gray-900);
  border: 1px solid color-mix(in srgb, var(--wrap-c, var(--gray-700)) 45%, var(--gray-700));
}
.wrap-grade-letter {
  flex: 0 0 auto; width: 92px; height: 92px; border-radius: 20px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3.6rem; font-weight: 600; line-height: 1;
  color: var(--wrap-c, var(--accent));
  background: color-mix(in srgb, var(--wrap-c, var(--accent)) 12%, var(--gray-950));
  border: 1.5px solid color-mix(in srgb, var(--wrap-c, var(--accent)) 40%, transparent);
}
.wrap-grade-side { flex: 1 1 auto; }
.wrap-grade-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); }
.wrap-grade-note { color: var(--gray-100); font-size: 0.85rem; margin-top: 5px; }
.wrap-grade-hint { color: var(--gray-300); font-size: 0.76rem; margin-top: 8px; }

/* Trend stats */
.wrap-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px;
}
.wrap-stat {
  text-align: center; padding: 12px 6px; border-radius: 12px;
  background: var(--gray-900); border: 1px solid var(--gray-800);
}
.wrap-stat-val {
  font-family: var(--font-display); font-size: 1.28rem; color: var(--white);
  display: inline-flex; align-items: baseline; gap: 4px; justify-content: center;
}
.wrap-stat-lbl { font-size: 0.72rem; color: var(--gray-200); margin-top: 4px; }
.wrap-stat-arrow { font-size: 0.7rem; }
.wrap-stat-arrow.up   { color: var(--win-text); }
.wrap-stat-arrow.down { color: var(--loss-text); }

/* Story */
.wrap-section { margin-bottom: 20px; }
.wrap-h {
  font-family: var(--font-display); font-size: 1.02rem; color: var(--white); margin-bottom: 8px;
}
.wrap-story p { color: var(--gray-100); font-size: 0.9rem; line-height: 1.75; margin: 0 0 10px; }
.wrap-story p:last-child { margin-bottom: 0; }

/* Moment of the week */
.wrap-moment { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.wrap-moment-card { padding: 14px; border-radius: 13px; background: var(--gray-900); border: 1px solid var(--gray-800); }
.wrap-moment-card.best { border-color: color-mix(in srgb, var(--win) 40%, var(--gray-800)); }
.wrap-moment-card.hard { border-color: color-mix(in srgb, var(--loss) 40%, var(--gray-800)); }
.wrap-moment-lbl { font-size: 0.78rem; color: var(--gray-200); margin-bottom: 6px; }
.wrap-moment-body { font-size: 0.86rem; color: var(--white); line-height: 1.5; }

/* Data highlights */
.wrap-highlights { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.wrap-hl {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 11px;
  background: var(--gray-900); border: 1px solid var(--gray-800);
}
.wrap-hl-icon { font-size: 1rem; }
.wrap-hl-label { flex: 1 1 auto; color: var(--gray-100); font-size: 0.85rem; }
.wrap-hl-value { color: var(--white); font-size: 0.85rem; font-weight: 600; }

/* Keep / fix */
.wrap-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.wrap-card { padding: 15px; border-radius: 13px; background: var(--gray-900); border: 1px solid var(--gray-800); }
.wrap-card-h { font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 9px; }
.wrap-card.keep .wrap-card-h { color: var(--win-text); }
.wrap-card.fix  .wrap-card-h { color: var(--loss-text); }
.wrap-card ul { margin: 0; padding-inline-start: 18px; }
.wrap-card li { color: var(--gray-100); font-size: 0.84rem; line-height: 1.55; margin-bottom: 6px; }
.wrap-card li:last-child { margin-bottom: 0; }

/* Mantra */
.wrap-mantra {
  text-align: center; font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; line-height: 1.6; color: var(--white);
  padding: 18px 16px; margin-bottom: 18px; border-radius: 14px;
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
}
.wrap-foot { text-align: center; }

/* One-time staggered reveal (gated behind the app's anim setting) */
.wrap-anim > * { opacity: 0; animation: wrapRise .5s cubic-bezier(.22,.61,.36,1) forwards; }
.wrap-anim > *:nth-child(1) { animation-delay: .04s; }
.wrap-anim > *:nth-child(2) { animation-delay: .10s; }
.wrap-anim > *:nth-child(3) { animation-delay: .17s; }
.wrap-anim > *:nth-child(4) { animation-delay: .24s; }
.wrap-anim > *:nth-child(5) { animation-delay: .31s; }
.wrap-anim > *:nth-child(6) { animation-delay: .38s; }
.wrap-anim > *:nth-child(7) { animation-delay: .45s; }
.wrap-anim > *:nth-child(8) { animation-delay: .52s; }
.wrap-anim > *:nth-child(9) { animation-delay: .59s; }
.wrap-anim > *:nth-child(n+10) { animation-delay: .64s; }
@keyframes wrapRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Safety: never let the reveal leave content invisible if motion is disabled. */
html.anim-off .wrap-anim > *,
.wrap:not(.wrap-anim) > * { opacity: 1 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wrap-anim > * { opacity: 1 !important; animation: none !important; } }

@media (max-width: 560px) {
  .wrap { padding: 30px 18px 22px; }
  .wrap-stats { grid-template-columns: repeat(2, 1fr); }
  .wrap-moment, .wrap-duo { grid-template-columns: 1fr; }
  .wrap-grade { flex-direction: column; text-align: center; }
}

/* ════════════════════════════════════════════════════════
   LIVE GUARDIAN — live tilt meter · limits · breathing · sim
   ════════════════════════════════════════════════════════ */

/* Bridge connection indicator — a small, honest live/offline pill */
.bridge-status {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 9px 14px; border-radius: 999px;
  background: var(--gray-900); border: 1px solid var(--gray-700);
  font-size: 0.84rem; color: var(--gray-100); font-weight: 500;
  width: fit-content; max-width: 100%;
}
.bridge-status .bs-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--gray-400);
}
.bridge-status.on {
  border-color: color-mix(in srgb, var(--win) 45%, var(--gray-700));
  color: var(--pure-white);
}
.bridge-status.on .bs-dot {
  background: var(--win-text); animation: livePulse 1.8s infinite;
}
.bridge-status.off .bs-dot { background: var(--gray-400); }
.bridge-status .bs-ago { color: var(--gray-300); font-size: 0.78rem; }

.guardian {
  margin-bottom: 20px; border-radius: 14px; padding: 18px 20px;
  background: linear-gradient(135deg, var(--gray-900), var(--gray-850));
  border: 1px solid var(--gray-700);
  transition: border-color 0.4s ease;
}
.guardian.tilt-caution { border-color: #6b4a1f; }
.guardian.tilt-stop { border-color: var(--loss); }

.guardian-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.guardian-title {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--pure-white); display: flex; align-items: center; gap: 9px;
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--loss-text);
  animation: livePulse 1.8s infinite;
}
.guardian.tilt-calm .live-dot { background: var(--win-text); }
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.28); }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.guardian-stats { display: flex; gap: 14px; font-size: 0.9rem; color: var(--gray-100); font-weight: 600; }
.guardian-stats .win-text  { color: var(--win-text); }
.guardian-stats .loss-text { color: var(--loss-text); }

.tilt-bar {
  height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--gray-800); border: 1px solid var(--gray-700);
}
.tilt-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease, background 0.4s ease; }
.tilt-calm    .tilt-fill { background: var(--win); }
.tilt-caution .tilt-fill { background: #D4AF37; }
.tilt-stop    .tilt-fill { background: var(--loss); }
.tilt-label { margin-top: 8px; font-size: 0.85rem; color: var(--gray-100); }
.tilt-label b { font-family: var(--font-display); font-size: 1rem; }

.tilt-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tilt-reason {
  font-size: 0.78rem; padding: 4px 10px; border-radius: 999px;
  background: var(--loss-bg); border: 1px solid var(--loss); color: var(--loss-text);
}
.guardian-limits { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.guardian-limit {
  padding: 10px 13px; border-radius: 10px; line-height: 1.5; font-size: 0.85rem;
  background: var(--loss-bg); border: 1px solid var(--loss); color: var(--white);
}
.guardian-limit b { color: var(--loss-text); }

/* A session the trader ended in the cockpit: a quiet summary. No live dot, no
   red — the day is over and nothing here is a warning any more. */
.guardian.guardian-ended .guardian-head { margin-bottom: 8px; }
.guardian-ended-tag {
  font-family: var(--font); font-size: 0.78rem; font-weight: 500; color: var(--gray-200);
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--gray-700);
}
.guardian-ended-line { font-size: 0.85rem; color: var(--gray-100); }
.guardian-ended-line b { font-family: var(--font-display); font-size: 1rem; color: var(--white); }

/* Simulator dev panel (only shown with ?sim=1) */
.sim-panel {
  position: fixed; bottom: 16px; left: 16px; z-index: 400;
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.sim-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-300); margin-bottom: 8px; }
.sim-buttons { display: flex; gap: 8px; flex-wrap: wrap; max-width: 340px; }
.sim-buttons .btn { font-size: 0.78rem; padding: 6px 12px; }

/* Guided breathing overlay — a calm, premium meditation moment */
.breath-overlay {
  display: none; position: fixed; inset: 0; z-index: 700;
  align-items: center; justify-content: center; overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% 36%, #16302b 0%, #0d211e 38%, #081413 68%, #04090a 100%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* vignette — deepens the edges so all focus falls on the orb */
.breath-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(118% 96% at 50% 44%, transparent 46%, rgba(0,0,0,0.62) 100%);
}
.breath-overlay.open { display: flex; animation: fadeIn 0.9s ease; }

/* soft glow that breathes behind the orb */
.breath-aura {
  position: absolute; width: min(94vw, 840px); height: min(94vw, 840px);
  border-radius: 50%; pointer-events: none; filter: blur(30px);
  background: radial-gradient(circle, rgba(92,176,142,0.20) 0%, rgba(60,150,130,0.09) 42%, transparent 66%);
  animation: auraBreathe 15s ease-in-out infinite;
}
.breath-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.breath-eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(184,227,210,0.5); margin-bottom: 40px;
}

/* ── the scene: the meditating mascot breathes with you ──
   JS toggles .in / .hold / .out on #breathCircle (.breath-scene) and sets
   --breath-dur to the phase length, so every transition tracks the rhythm. */
.breath-scene {
  position: relative; width: 290px; height: 290px; --breath-dur: 4000ms;
  display: flex; align-items: center; justify-content: center;
}

/* phase progress ring — fills over the inhale, retracts over the exhale */
.breath-ringsvg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.brs-track { fill: none; stroke: rgba(150,225,200,0.12); stroke-width: 1.6; }
.brs-fill {
  fill: none; stroke: rgba(190,244,220,0.75); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(150,235,200,0.5));
}
.breath-scene.in   .brs-fill { animation: brsFill var(--breath-dur) linear forwards; }
.breath-scene.hold .brs-fill { stroke-dashoffset: 0; }
.breath-scene.out  .brs-fill { animation: brsEmpty var(--breath-dur) linear forwards; }
@keyframes brsFill  { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes brsEmpty { from { stroke-dashoffset: 0; }   to { stroke-dashoffset: 100; } }

/* the mascot — sea-glass tint, halo in the accent gold */
/* 158px was sized for the old figure's 100×112 box. The monk emblem is
   SQUARE, and its medallion is inset inside it, so at the same width the
   visible mark shrank to 48% of the breath ring. 200px puts it back at ~60%. */
.breath-mascot { position: relative; width: 200px; color: #d9f4e9; }
.breath-mascot svg { width: 100%; height: auto; display: block; overflow: visible; }
.bm-figure {
  transform-origin: 50% 78%;
  transition: transform var(--breath-dur, 4000ms) cubic-bezier(0.37, 0, 0.63, 1);
}
/* ⚠️ Anchored on the ring's own centre since 2026-08-27. The halo used to be
   an ellipse floating ABOVE the head and lifted with translateY on each inhale;
   the monk emblem's halo is the medallion ring AROUND the figure, and lifting
   that would slide it off the body it encircles. It opens and glows in place
   instead. Re-adding a floating halo means re-anchoring this pair together. */
.bm-halo {
  opacity: 0.8;
  transform-origin: 50% 50%;
  transition: transform var(--breath-dur, 4000ms) cubic-bezier(0.37, 0, 0.63, 1),
              opacity var(--breath-dur, 4000ms) ease, filter var(--breath-dur, 4000ms) ease;
}
.breath-scene.in .bm-figure,
.breath-scene.hold .bm-figure { transform: scale(1.075); }
.breath-scene.out .bm-figure  { transform: scale(0.955); }
.breath-scene.in .bm-halo,
.breath-scene.hold .bm-halo {
  transform: scale(1.035); opacity: 1;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent, #D4AF37) 85%, transparent))
          drop-shadow(0 0 26px color-mix(in srgb, var(--accent, #D4AF37) 45%, transparent));
}
.breath-scene.out .bm-halo { transform: scale(1); opacity: 0.7; filter: none; }

/* ripples — one soft wave rolls out at the start of each inhale/exhale */
.breath-ripple {
  position: absolute; inset: 0; margin: auto; width: 205px; height: 205px;
  border-radius: 50%; border: 1px solid rgba(160,232,204,0.4);
  opacity: 0; pointer-events: none;
}
.breath-scene.in  .breath-ripple { animation: bRipple 2.8s ease-out; }
.breath-scene.out .breath-ripple { animation: bRipple 3.2s ease-out; }
.breath-ripple.rp2 { animation-delay: 0.45s; }
@keyframes bRipple {
  0%   { transform: scale(0.66); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* fireflies — slow embers drifting up through the room */
.breath-fly {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(214,255,236,0.85); box-shadow: 0 0 9px rgba(170,250,218,0.8);
  opacity: 0; pointer-events: none;
}
.breath-fly.f1 { left: 14%; bottom: 6%;  animation: bFly 9s  ease-in-out infinite; }
.breath-fly.f2 { right: 10%; bottom: 14%; animation: bFly 12s ease-in-out 2.6s infinite; }
.breath-fly.f3 { left: 42%; bottom: 0;   animation: bFly 14s ease-in-out 5.4s infinite; }
@keyframes bFly {
  0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.85; }
  55%  { transform: translate(15px, -105px) scale(1); opacity: 0.5; }
  90%  { opacity: 0.1; }
  100% { transform: translate(-10px, -185px) scale(0.6); opacity: 0; }
}

/* the phase word — a large serif breath cue under the scene */
.breath-word { margin-top: 30px; height: 2.8rem; display: flex; align-items: center; justify-content: center; }
.breath-phase {
  font-family: var(--font-display); font-size: 2.05rem; font-weight: 500;
  color: #eafff6; letter-spacing: 0.045em;
}
.breath-phase.sw { animation: bWord 0.75s ease both; }
@keyframes bWord {
  from { opacity: 0; transform: translateY(9px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.breath-caption { margin-top: 22px; color: #cfeee4; font-size: 1.02rem; font-weight: 300; letter-spacing: 0.01em; }
.breath-close {
  margin-top: 30px; cursor: pointer;
  background: rgba(150,225,200,0.06); border: 1px solid rgba(184,227,210,0.28);
  color: #dbf3ea; font-family: var(--font); font-size: 0.9rem; letter-spacing: 0.01em;
  padding: 11px 26px; border-radius: 999px; transition: all 0.25s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.breath-close:hover { background: rgba(150,225,200,0.14); border-color: rgba(184,227,210,0.55); color: #fff; }

@keyframes auraBreathe {
  0%    { transform: scale(0.82); opacity: 0.45; }
  28.5% { transform: scale(1.12); opacity: 0.85; }
  57%   { transform: scale(1.12); opacity: 0.85; }
  100%  { transform: scale(0.82); opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .breath-aura, .breath-fly, .breath-ripple, .brs-fill, .breath-phase.sw { animation: none; }
  .bm-figure, .bm-halo { transition: none; }
}

/* ─── "Ready to journal" banner + "pull live trades" button ── */
.ready-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
  padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(135deg, var(--gray-900), var(--gray-850));
  border: 1px solid var(--win);
}
.ready-info { display: flex; align-items: center; gap: 12px; }
.ready-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--win-bg); border: 1px solid var(--win);
}
.ready-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--pure-white); }
.ready-title .win-text  { color: var(--win-text); }
.ready-title .loss-text { color: var(--loss-text); }
.ready-sub { font-size: 0.82rem; color: var(--gray-200); margin-top: 2px; }

/* ─── Journaling streak strip (dashboard) ─────────────────────────────────
   One quiet line in shade, NOT a lit card: the discipline card is what sits in
   the key light on this page, and a streak about habit must not compete with
   it. No gold (gold is discipline) and no green or red (those are money). */
.jstreak {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; margin-bottom: 18px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--surface-sunk); border: 1px solid var(--edge);
}
.jstreak-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jstreak-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-100); border: 1px solid var(--edge); font-size: 16px;
}
.jstreak-line { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.jstreak-num {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1;
  color: var(--white); font-variant-numeric: tabular-nums;
}
.jstreak-label { font-size: 0.9rem; color: var(--gray-100); }
.jstreak-best { font-size: 0.78rem; color: var(--gray-300); }
.jstreak-sub { font-size: 0.8rem; color: var(--gray-200); margin-top: 3px; }
@media (max-width: 560px) {
  .jstreak { padding: 10px 12px; }
  .jstreak-cta { width: 100%; justify-content: center; min-height: 44px; }
}

.live-pull {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 10px;
  padding: 11px 15px; border-radius: 11px; cursor: pointer; text-align: right;
  background: var(--win-bg); border: 1px solid var(--win); color: var(--win-text);
  font-family: var(--font); font-size: 0.88rem; font-weight: 600; transition: all var(--t);
}
.live-pull:hover { background: var(--gray-800); }
.live-pull-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--win-text); animation: livePulse 1.8s infinite; flex-shrink: 0; }

@media (max-width: 560px) { .ready-banner { justify-content: center; text-align: center; } }

/* ═══════════════════════════════════════════════════════
   CRAFT POLISH — typography · depth · motion  (2026-07-08)
   Appended last so these refinements win on equal specificity.
   The goal: quiet editorial luxury — serifs that breathe, cards
   that feel like fine stationery, motion that's calm not busy.
   ═══════════════════════════════════════════════════════ */

/* — Display type: the old tracking (-0.02..-0.03em) was tuned for a
     tight geometric sans. Serifs want near-zero tracking + real figures. */
.page-title, .section-title, .close-title, .font-display,
.compare-title, .disc-headline, .streak-headline, .rbc-title,
.equity-net, .stat-value, .disc-num, .rbc-num, .ready-title {
  letter-spacing: -0.006em;
  font-feature-settings: "ss01", "liga" 1, "lnum" 1, "tnum" 1;
}

/* Page title — a calm, commanding serif instead of a small bold sans */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--pure-white);
}

/* Feature numbers in the display serif read like a private statement.
   Kept at the medium weight Daniel chose earlier. */
.disc-num, .equity-net, .rbc-num {
  font-family: var(--font-display);
  font-weight: 500;
}
/* The 4 stat-card values stay in the clean sans, but with tabular figures */
.stat-value { font-variant-numeric: tabular-nums; }

/* Wordmark — refined serif, gently spaced */
.nav-logo {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
  font-size: 1.02rem;
}

/* — Depth: a whisper of top-highlight + a soft grounded shadow, so cards
     sit on the page like paper rather than flat fills. Tokens flip per theme. */
/* Only surfaces the consolidated recipe does NOT own. .card, .summary-card,
   .chart-card, .method-card, .settings-card, .rbc-banner and .coach-chat were
   removed from this list when they joined that recipe — declaring the same
   shadow in two places is how the old smear accumulated. */
.stat-card, .discipline-card, .equity-card,
.week-summary-panel, .streak-banner, .guardian {
  box-shadow: inset 0 1px 0 var(--tint), 0 10px 30px -18px var(--shadow-lg);
}

/* Relax the old tight section/cta tracking (was for the geometric face) */
.section-title { letter-spacing: -0.012em; }

/* — Motion: one calm entrance on load, gated so Animations=Off is honored.
     Base opacity is untouched, so with anim-off everything is simply visible. */
@keyframes tmRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tmFade { from { opacity: 0; } to { opacity: 1; } }

html:not(.anim-off) .page-header { animation: tmRise .6s cubic-bezier(.22,.61,.36,1) both; }
html:not(.anim-off) .hero-band   { animation: tmRise .6s .06s cubic-bezier(.22,.61,.36,1) both; }
html:not(.anim-off) .stats-grid  { animation: tmRise .6s .12s cubic-bezier(.22,.61,.36,1) both; }
/* generic: the primary content column of the simpler pages */
html:not(.anim-off) .page-wrapper > .container--sm > .card,
html:not(.anim-off) .page-wrapper > .container--xs > .card { animation: tmRise .6s .06s cubic-bezier(.22,.61,.36,1) both; }

/* Stagger the hero's two cards for a gentle cascade */
html:not(.anim-off) .discipline-card { animation: tmRise .6s .10s cubic-bezier(.22,.61,.36,1) both; }
html:not(.anim-off) .equity-card     { animation: tmRise .6s .18s cubic-bezier(.22,.61,.36,1) both; }

/* — Micro-interaction: a barely-there lift on the interactive surfaces.
     Transform/​shadow only — never affects layout. */
.stat-card, .chart-card {
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-slow);
}
html:not(.anim-off) .stat-card:hover,
html:not(.anim-off) .chart-card:hover {
  transform: translateY(-2px);
  border-color: var(--gray-700);
  box-shadow: inset 0 1px 0 var(--tint), 0 16px 40px -20px var(--shadow-lg);
}

/* — English mode: the layout stays put; only the Hebrew RTL text islands flip
     to LTR so English reads naturally. (Hebrew mode = untouched default.) */
:root[data-lang="en"] [dir="rtl"] { direction: ltr; text-align: start; }

/* ⚠️ Exception: blocks that are centred BY DESIGN, not by direction.
   The rule above resolves `text-align: start` to the left in English, which is
   right for a paragraph but wrong for a composition — on the landing hero it
   left the emblem flex-centred above a headline and sub that had jumped to the
   left edge, so the two halves of the same block disagreed. These elements are
   centred in both languages because that is the layout, not the locale. */
:root[data-lang="en"] .hero-copy--centered [dir="rtl"],
:root[data-lang="en"] .close-section [dir="rtl"],
:root[data-lang="en"] .cmp-quote[dir="rtl"],
:root[data-lang="en"] .cmp-quote [dir="rtl"] { text-align: center; }

/* ═══════════════════════════════════════════════════════
   DASHBOARD MAKEOVER (2026-07-08) — balanced · minimal · airy
   The journal (calendar) and the mentality (discipline) carry
   equal weight; the raw numbers sit in a thin strip on top; the
   heavier analytics moved to the Analytics page.
   ═══════════════════════════════════════════════════════ */

.dash-header { align-items: flex-end; }
.dash-header .page-subtitle { text-align: start; }   /* the header reads from the reading side (dir on the block) */
.dash-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* The breathing button on a locked header (subscriptions 3.5): up to 400px in English it shows its
   icon only, its word kept for screen readers. Measured: "Breathe" made the free plan's header a
   row taller than Pro Live's at 360–390. Hebrew's "נשימה" fits beside the others, so it keeps it. */
@media (max-width: 400px) {
  :root[data-lang="en"] #breathBtn > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* — Thin metrics strip: the four numbers at a glance — */
/* Layout + type only — material and hierarchy live in the consolidated
   dashboard/analytics block at the end of this file. */
.metric-val {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 500;
  color: var(--pure-white);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.metric-val.win-text  { color: var(--win-text); }
.metric-val.loss-text { color: var(--loss-text); }
/* The discipline score — the product's own argument, so it carries the brand
   gold rather than the profit green it used to share with Net P&L.
   Uses --moon, not the .gold-metal ramp: that utility paints a gradient behind
   TRANSPARENT text, so any rule setting `color` on it blanks the number — and
   .metric-val sets color three times. --moon is always defined, regardless of
   the accent setting. */
.metric-val.disc-text { color: var(--moon); }
.metric-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-300); margin-top: 9px;
}
.metric-div { width: 1px; height: 40px; background: var(--gray-700); justify-self: center; }

/* — REDESIGN 2026-10-05 (clean fintech, the dashboard concept) ————————————
   Status → insight → action. Four metric cards on top (renderMetricsStrip),
   then the focus column (the key insight, the discipline run, ONE next step,
   the AI tools — and the recent entries under it) beside the calendar.
   The old balanced duo (calendar | a big discipline ring) said the score twice. */
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; direction: rtl; }
:root[data-lang="en"] .dash-kpis { direction: ltr; }   /* discipline first, on the reading side */
/* align-items: flex-start in an RTL card puts every line, the LTR numbers included,
   on the reading side; English flips the card and so the side. */
.kpi { padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.kpi-label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--gray-200); }
.kpi-val { font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1.1; color: var(--pure-white); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi-val.disc-text { color: var(--accent, var(--moon)); }
.kpi-val.win-text  { color: var(--win-text); }
.kpi-val.loss-text { color: var(--loss-text); }
.kpi-sub { font-size: 0.78rem; color: var(--gray-300); }
.kpi-grades { display: flex; gap: 6px; margin: 4px 0 2px; }
.kpi-grade { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
.kpi-grade.w { background: var(--win-bg);  color: var(--win-text);  border: 1px solid color-mix(in srgb, var(--win) 45%, transparent); }
.kpi-grade.l { background: var(--loss-bg); color: var(--loss-text); border: 1px solid color-mix(in srgb, var(--loss) 45%, transparent); }
.kpi .metrics-spark { width: 100%; height: 28px; margin: 4px 0 0; }
/* The recent entries beside the calendar: one compact row each, both badges side by side. */
.entry-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dash-recent .entry-item { padding: 11px 14px; align-items: center; border-radius: 12px; }

/* The two columns sit in reading order: focus on the reading side, the calendar
   beyond it. The container takes the direction; its children reset to the
   document's, so nothing inside them (the calendar's own dir rules) changes. */
.dash-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 22px;
  margin-bottom: 24px;
  align-items: start;
  direction: rtl;
}
:root[data-lang="en"] .dash-main { direction: ltr; }
.dash-main > * { direction: ltr; }
.dash-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dash-cal { padding: 24px 26px; }

.dash-focus { padding: 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.dash-focus-chip {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 700;
  padding: 3px 11px; border-radius: var(--radius-pill);
  color: var(--accent, var(--moon)); background: var(--moon-soft);
  border: 1px solid color-mix(in srgb, var(--accent, var(--moon)) 35%, transparent);
}
.dash-focus.no-insight .dash-focus-head { display: none; }
.dash-focus-insight { display: flex; align-items: flex-start; gap: 10px; }
.dash-focus-insight .dash-insight-icon { margin-top: 3px; }
.dash-focus-insight .dash-insight-text { font-size: 1.04rem; font-weight: 600; line-height: 1.55; color: var(--pure-white); }
.dash-focus-body { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.dash-focus-empty { color: var(--gray-200); line-height: 1.65; }
.dash-focus .mind-streak { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--edge); }
.dash-focus .mind-streak-top { justify-content: flex-start; }
.dash-focus .streak-track { justify-content: flex-start; }
:root:not([data-lang="en"]) .dash-focus .streak-track { justify-content: flex-end; }
.dash-next-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dash-focus .mind-insights { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--edge); }

/* Phones: the primary action rides at the bottom (the nav's gold button folds into the menu). */
.dash-fab { display: none; }
@media (max-width: 760px) {
  .dash-fab {
    display: flex; position: fixed; z-index: 150;
    inset-inline: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    min-height: 50px; box-shadow: 0 12px 30px -12px var(--shadow-lg);
  }
  body:has(.dash-fab) .page-wrapper { padding-bottom: 84px; }
}

/* Calendar legend (moved inline, cleaner) */
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gray-800);
}
.cal-legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--gray-200); }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid; display: inline-block; flex-shrink: 0; }

/* — Mentality card: gauge + streak + AI insights, centered & full — */
.dash-mind { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mind-title {
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 600;
  color: var(--gray-100); letter-spacing: -0.01em; margin-bottom: 8px;
}
.dash-mind .disc-empty { margin: 12px 0 20px; }
.mind-streak { width: 100%; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gray-800); }
.mind-streak-top { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 13px; }
.mind-streak-flame { font-size: 1.05rem; line-height: 1; }
.mind-streak-line { font-size: 0.86rem; color: var(--gray-100); font-weight: 500; }
.mind-streak .streak-track { justify-content: center; }
/* Each button takes half the row but never less than its label, and the row wraps (2026-09-25).
   With `flex: 1` alone, .btn's overflow:hidden gave it an automatic minimum of 0: at 320 in
   English both buttons were 95px around 98–101px labels and cut them. The journal's actions use
   the same pair (docs/claude/layout-traps.md). Wide screens are unchanged: two halves either way. */
.mind-insights { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: auto; padding-top: 22px; }
.mind-insights .btn { flex: 1 1 calc(50% - 5px); min-width: max-content; justify-content: center; }

/* — Entrance: a calm staggered cascade on load — */
html:not(.anim-off) .metrics-strip { animation: tmRise .6s .04s cubic-bezier(.22,.61,.36,1) both; }
html:not(.anim-off) .dash-cal      { animation: tmRise .6s .13s cubic-bezier(.22,.61,.36,1) both; }
html:not(.anim-off) .dash-mind     { animation: tmRise .6s .20s cubic-bezier(.22,.61,.36,1) both; }
html:not(.anim-off) .dash-recent   { animation: tmRise .6s .27s cubic-bezier(.22,.61,.36,1) both; }

@media (max-width: 880px) {
  /* minmax(0,...) for the reason above: the duo collapsed to one column here
     correctly, but the single track still could not shrink below the calendar's
     min-content, so collapsing alone never fixed the phone. */
  .dash-main { grid-template-columns: minmax(0, 1fr); }
  /* One column, in order of importance: the insight, the calendar, the entries. */
  .dash-side { display: contents; }
  .dash-focus { order: 1; }
  .dash-cal { order: 2; }
  .dash-recent { order: 3; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 14px 14px; }
  .kpi-grades { gap: 4px; }
  .kpi-grade { width: 24px; height: 24px; font-size: 0.7rem; }
}
@media (max-width: 380px) {
  /* the five grades take a row of their own, last, rather than shrinking past legibility */
  .kpi--grades { grid-column: 1 / -1; order: 3; }
  .kpi { padding: 12px; }
}

/* ═══════════════ Nav chrome — theme + language toggles ═══════════════ */
/* Injected into .nav-links by js/chrome.js on every page. */

/* ── Account switcher (only rendered once a 2nd account exists) ── */
.nav-acct { position: relative; margin-inline-start: 10px; }
.nav-acct-btn {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px;
  background: var(--surface-2, var(--gray-800)); color: var(--gray-100);
  border: 1px solid var(--edge, var(--gray-700)); border-radius: 9px;
  font: inherit; font-size: 0.82rem; cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.nav-acct-btn:hover { color: var(--white); border-color: var(--edge-hi, var(--gray-600)); }
.nav-acct-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-acct-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--moon, #D4AF37);
}
.nav-acct-dot.breached { background: var(--loss); box-shadow: 0 0 0 3px color-mix(in srgb, var(--loss) 22%, transparent); }

.nav-acct-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 210;
  min-width: 230px; padding: 5px;
  background: var(--surface, var(--gray-900));
  border: 1px solid var(--edge, var(--gray-700)); border-radius: 12px;
  box-shadow: 0 12px 28px -12px var(--shadow-lg);
  display: none;
}
.nav-acct.open .nav-acct-menu { display: block; }
.nav-acct-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 8px; background: none;
  color: var(--gray-100); font: inherit; font-size: 0.82rem; text-align: start;
  text-decoration: none; cursor: pointer;
}
.nav-acct-row:hover { background: var(--surface-2, var(--gray-800)); color: var(--white); }
.nav-acct-row.active { color: var(--white); }
.nav-acct-row.active .nav-acct-row-name { font-weight: 600; }
.nav-acct-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-acct-row-pnl { font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--gray-200); }
.nav-acct-manage {
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--edge, var(--gray-800));
  border-radius: 0 0 8px 8px; color: var(--gray-200); font-size: 0.78rem;
}

.nav-ctls { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; }

.nav-ctl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-300);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.nav-ctl:hover { color: var(--white); background: var(--gray-800); border-color: var(--gray-700); }
.nav-ctl:active { transform: scale(0.93); }
.nav-ctl-lang { width: auto; min-width: 34px; padding: 0 8px; }

/* Sun ⇄ moon. Dark = a crescent (the cut circle overlaps the disc, rays hidden);
   light = a full sun (the cut slides away, rays spring out). */
.nav-ctl-ico { display: block; overflow: visible; }
.nav-ctl-cut,
.nav-ctl-rays { transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.nav-ctl-rays { transform-origin: 12px 12px; transform: scale(0); opacity: 0; }
.nav-ctl-disc { transition: transform .45s cubic-bezier(.22,.61,.36,1); transform-origin: 12px 12px; }

:root[data-theme="light"] .nav-ctl-cut  { transform: translate(13px, -13px); } /* uncover the disc */
:root[data-theme="light"] .nav-ctl-rays { transform: scale(1); opacity: 1; }
:root[data-theme="light"] .nav-ctl-disc { transform: scale(0.62); }            /* shrink to a sun core */

html.anim-off .nav-ctl-cut,
html.anim-off .nav-ctl-rays,
html.anim-off .nav-ctl-disc { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-ctl-cut, .nav-ctl-rays, .nav-ctl-disc { transition: none; }
  .nav-ctl:active { transform: none; }
}

@media (max-width: 560px) {
  .nav-ctls { margin-inline-start: 2px; gap: 2px; }
  .nav-ctl { width: 28px; height: 28px; }
}

/* ─── Mobile nav — hamburger (js/chrome.js injects .nav-burger) ─── */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent; border: 0;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
}
/* 40px -> 44px: the one control every phone visitor has to hit. The bars are
   static flex children, so positioning the button leaves the morph untouched. */
.nav-burger { position: relative; }
.nav-burger::after { content: ''; position: absolute; inset: -2px; }

.nav-burger span {
  display: block;
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--white);
  transition: transform 0.28s cubic-bezier(.22,.61,.36,1), opacity 0.2s ease;
}

@media (max-width: 760px) {
  .nav-burger { display: flex; }
  /* The links collapse into a dropdown panel below the bar */
  .main-nav .nav-links {
    position: fixed;
    top: 58px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 16px 18px;
    /* Solid page ground, not the bar's 86% --nav-bg: since 2026-09-26 the panel also holds the
       menu's rows, it covers most of a phone, and the page read through every row (screenshot). */
    background: var(--black);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--gray-800);
    box-shadow: 0 20px 40px -20px var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.22,.61,.36,1), visibility 0.25s;
  }
  .main-nav.nav-open .nav-links { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav .nav-link { padding: 12px 10px; border-radius: 8px; font-size: 0.95rem; }
  .main-nav .nav-cta { margin: 8px 0 0; text-align: center; padding: 12px; }
  /* Toggles sit in a row inside the panel */
  .main-nav .nav-ctls { margin: 8px 0 0; gap: 8px; justify-content: center; }
  .nav-ctl { width: 40px; height: 34px; }
  /* Open-state hamburger morphs to an ✕ */
  .main-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .main-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .main-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
html.anim-off .nav-burger span,
html.anim-off .main-nav .nav-links { transition: none; }
/* The bars without page links (.main-nav--bar, 2026-10-09 — the sign-up's logo and two toggles,
   and the cockpit's session controls; Daniel's picks from the concepts): nothing to collapse, so
   chrome.js adds no hamburger there and everything stays in the bar at every width. */
@media (max-width: 760px) {
  .main-nav.main-nav--bar .nav-links {
    position: static; flex-direction: row; align-items: center; padding: 0;
    background: none; backdrop-filter: none; border: 0; box-shadow: none;
    transform: none; opacity: 1; visibility: visible; transition: none;
  }
  .main-nav.main-nav--bar .nav-ctls { margin: 0; gap: 4px; }
}

/* ═══ The app nav's four links + one menu (js/chrome.js buildMenu, 2026-09-26) ═══
   Daniel's order: Dashboard · Analytics · Coach · News+ in the bar, the journal is the "New
   Entry" button, and everything else — the other pages, feedback, theme, language, sync state —
   behind one icon. The landing and the guide keep their own navs (no .nav-pages there). */
.nav-pages { display: flex; align-items: center; gap: 2px; }
@media (min-width: 761px) {
  /* Hebrew reading order: Dashboard at the RIGHT end of the group, where a Hebrew reader starts.
     The logo stays left and the button right, so only the group turns. */
  :root:not([data-lang="en"]) .nav-pages { flex-direction: row-reverse; }
}

.nav-more { position: relative; margin-inline-start: 8px; }
.nav-more-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--gray-300);
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.nav-more-btn:hover,
.nav-more.open .nav-more-btn { color: var(--white); background: var(--gray-800); border-color: var(--gray-700); }
.nav-more-btn.has-active { color: var(--accent, var(--pure-white)); }
/* 34px -> 44px hit area, like the hamburger. */
.nav-more-btn::after { content: ''; position: absolute; inset: -5px; }
/* Sync state on the button: only "synced" and "failed" show. Amber for failed, as the old pill —
   red is money on this site. */
.nav-more-dot {
  position: absolute; top: 2px; inset-inline-end: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--black);
}
.nav-more-dot[hidden] { display: none; }
.nav-more-dot.is-live { background: var(--win); }
.nav-more-dot.is-warn { background: var(--moon); }

/* PHYSICAL right, not inset-inline-end: the menu is dir="rtl" in Hebrew, where its own inline
   end is the LEFT — it grew rightward off the screen at 768 and 1024 (measured). The bar is the
   same way round in both languages, button at the right. */
.nav-more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 210;
  min-width: 220px; padding: 6px;
  background: var(--surface, var(--gray-900));
  border: 1px solid var(--edge, var(--gray-700)); border-radius: 12px;
  box-shadow: 0 12px 28px -12px var(--shadow-lg);
  display: none;
}
.nav-more.open .nav-more-menu { display: block; }
.nav-more-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--gray-100); font: inherit; font-size: 0.85rem; text-align: start;
  text-decoration: none; cursor: pointer;
}
.nav-more-row:hover,
.nav-more-row:focus-visible { background: var(--surface-2, var(--gray-800)); color: var(--white); outline: none; }
.nav-more-row.active { color: var(--accent, var(--pure-white)); font-weight: 600; }
.nav-more-row .nav-ctl-ico { flex: none; color: var(--gray-300); }
.nav-more-row.active .nav-ctl-ico { color: inherit; }
/* The theme row names the theme you would switch TO ("מצב בהיר" in dark), so its icon shows that
   one: the sun⇄moon morph runs the other way round here. In the bar it showed the current theme,
   and a moon beside "Light mode" read as a contradiction (screenshot). */
.nav-more-row .nav-ctl-cut  { transform: translate(13px, -13px); }
.nav-more-row .nav-ctl-rays { transform: scale(1); opacity: 1; }
.nav-more-row .nav-ctl-disc { transform: scale(0.62); }
:root[data-theme="light"] .nav-more-row .nav-ctl-cut  { transform: none; }
:root[data-theme="light"] .nav-more-row .nav-ctl-rays { transform: scale(0); opacity: 0; }
:root[data-theme="light"] .nav-more-row .nav-ctl-disc { transform: none; }
.nav-more-lang {
  display: inline-flex; justify-content: center; flex: none; width: 18px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; color: var(--gray-300);
}
/* The plan's name at the end of "המנוי שלי" (subscriptions stage 3.3): quiet — a fact, not a badge. */
.nav-more-plan {
  margin-inline-start: auto; flex: none; white-space: nowrap;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--edge-hi, var(--gray-700));
  font-size: 0.68rem; font-weight: 600; color: var(--gray-200);
}
.nav-more-plan[hidden] { display: none; }
.nav-more-sep { height: 1px; margin: 5px 4px; background: var(--edge, var(--gray-800)); }
.nav-more-status {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 9px; margin-bottom: 5px;
  border-bottom: 1px solid var(--edge, var(--gray-800));
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gray-300);
}
.nav-more-status[hidden] { display: none; }
.nav-more-status i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--gray-500); }
.nav-more-status.is-live { color: var(--win-text); }
.nav-more-status.is-live i { background: var(--win); }
.nav-more-status.is-idle i { background: var(--moon); }
.nav-more-status.is-warn { color: var(--moon); }
.nav-more-status.is-warn i { background: var(--moon); }

/* The same two states on the hamburger, so a failed sync shows on a phone without opening it. */
.nav-burger.dot-live::before,
.nav-burger.dot-warn::before {
  content: ''; position: absolute; top: 7px; inset-inline-end: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--black);
}
.nav-burger.dot-live::before { background: var(--win); }
.nav-burger.dot-warn::before { background: var(--moon); }

@media (max-width: 760px) {
  /* Everything sits in the hamburger panel: the four links, then the menu's rows in place of
     its button. The panel scrolls rather than running off a short phone. */
  .main-nav .nav-links { max-height: calc(100dvh - 58px); overflow-y: auto; }
  .main-nav .nav-pages { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-more { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--gray-800); }
  .nav-more-btn { display: none; }
  .nav-more-menu {
    display: block; position: static;
    min-width: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav-more-row { padding: 12px 10px; font-size: 0.95rem; }
  .nav-more-status { padding: 10px 10px 12px; }
}

/* The demo offer under the closing CTA — deliberately quieter than the button
   it follows, since it is the fallback for a visitor who did not click it. */
.close-alt {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--gray-200);
}
.close-alt a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-low, var(--gray-600));
  padding-bottom: 1px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.close-alt a:hover { border-bottom-color: var(--moon); }
/* Padding would push the underline away from the text, so the target grows
   by a pseudo-element instead. */
.close-alt a { position: relative; }
.close-alt a::after { content: ''; position: absolute; inset: -9px -2px; }

/* ═══════════════ Demo bar (js/chrome.js injects #tmDemoBar) ═══════════════ */
/* Bottom-left rather than a strip above the nav: the nav is position:fixed on
   every page, so a strip would need every page's top offset re-tuned, and the
   cockpit's docked command tray owns the bottom-centre. This corner is free
   everywhere. Below the nav's z-index so an open mobile menu still covers it. */
.demo-bar {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 190;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  max-width: calc(100vw - 36px);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface-top), var(--surface));
  border: 1px solid var(--edge);
  border-top-color: var(--edge-hi);
  box-shadow: inset 0 1px 0 var(--lit-soft), 0 14px 30px -16px var(--shadow-lg);
  animation: demoBarIn 0.5s cubic-bezier(.22,.61,.36,1) both;
}
html.anim-off .demo-bar { animation: none; }

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

.demo-bar-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--moon);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--moon) 18%, transparent);
  animation: demoBarPulse 2.4s ease-in-out infinite;
}
html.anim-off .demo-bar-dot { animation: none; }

@keyframes demoBarPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.demo-bar-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.demo-bar-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
  unicode-bidi: plaintext;
  text-align: left;
}

.demo-bar-sub {
  font-size: 0.72rem;
  color: var(--gray-200);
  /* The line ends in a full stop — a neutral character closing an RTL run
     against the document's LTR base — which bidi threw to the start of the line
     (".נתונים לדוגמה"). plaintext resolves it from the first strong character;
     text-align pins it back, since plaintext also re-resolves `start`. */
  unicode-bidi: plaintext;
  text-align: left;
}

.demo-bar-exit {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--edge-hi);
  background: var(--tint);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.demo-bar-exit:hover {
  background: var(--tint-strong);
  border-color: var(--moon);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .demo-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .demo-bar-sub { display: none; }
}

/* ═══════════════ Cursor FX — landing + guide (js/fx.js) ═══════════════ */
/* Shared chrome, not shared structure: the two pages keep their own layouts,
   but feel the same under the cursor. */

/* — The spotlight — a viewport-sized layer that blends OVER the page, so it
   lights the cards and text, not just the background. Below the nav (z 200). */
.fx-spot {
  position: fixed; inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  mix-blend-mode: screen;              /* dark: add light */
  /* "Torch" — a tight, bright core */
  background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 40%),
    color-mix(in srgb, var(--accent, #D4AF37) 22%, transparent) 0%, transparent 65%);
}
.fx-spot.on { opacity: 1; }

/* Light mode: screen would be invisible on ivory — darken toward the accent
   instead, which reads as a warm pool of light on paper. Stronger than dark so
   the colour is clearly visible on the bright background. */
:root[data-theme="light"] .fx-spot {
  mix-blend-mode: multiply;
  background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 40%),
    color-mix(in srgb, var(--accent, #D4AF37) 20%, transparent) 0%, transparent 65%);
}

/* Sparks thrown off the torch as it moves (js/fx.js writes transform/opacity).
   A solid accent dot reads on BOTH themes, so no blend-mode games needed. */
.fx-spark {
  position: fixed; left: 0; top: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent, #D4AF37) 90%, white) 0%,
    color-mix(in srgb, var(--accent, #D4AF37) 70%, transparent) 45%,
    transparent 72%);
}
:root[data-theme="light"] .fx-spark {
  background: radial-gradient(circle,
    var(--accent, #D4AF37) 0%,
    color-mix(in srgb, var(--accent, #D4AF37) 60%, transparent) 50%,
    transparent 72%);
}

/* — Tilt — added by JS only once a card has finished its scroll reveal, so this
   transform transition can never interfere with a reveal in flight. */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* — Edge glow — the card lights up where the cursor is near it. */
.fx-glow { position: relative; }
.fx-glow::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--accent, #D4AF37) 13%, transparent) 0%, transparent 60%);
}
.fx-glow.fx-on::after { opacity: 1; }
:root[data-theme="light"] .fx-glow::after {
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--accent, #D4AF37) 16%, transparent) 0%, transparent 60%);
}

/* Motion off → no cursor FX at all, and nothing left mid-transform. */
html.anim-off .fx-spot { display: none; }
html.anim-off .fx-tilt { transform: none !important; transition: none; }
html.anim-off .fx-glow::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-spot { display: none; }
  .fx-tilt { transform: none !important; transition: none; }
  .fx-glow::after { display: none; }
}

/* ═══════════════ Mascot — the meditating figure (js/mascot.js) ═══════════════ */
/* The bot's character. .mascot-thinking is the "bot is thinking" state that
   replaces spinners: the figure breathes, the halo glows, thoughts sparkle. */

.tm-mascot { overflow: visible; display: block; }
.tm-mascot .mc-figure { transform-origin: 50% 100%; }

.mascot-thinking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
}

.mascot-thinking-stage { position: relative; }

.mascot-thinking-label {
  font-size: 0.85rem;
  color: var(--gray-200);
  letter-spacing: 0.01em;
}

/* Breathing — slow, calm, like the guided-breath screen */
.mascot-thinking .mc-figure { animation: mcBreathe 3.2s ease-in-out infinite; }
@keyframes mcBreathe {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.035); }
  62%      { transform: scale(1.035); }
}

/* The medallion ring brightens and opens in the same rhythm.
   ⚠️ Re-anchored on 2026-08-27. The halo used to be an ellipse floating ABOVE
   the head, so it was anchored at `50% 9px` and animated with translateY. The
   monk emblem's halo is the ring AROUND the whole figure: lifting it would
   shift it off the body it encircles, so it breathes in place instead. Anything
   that re-adds a floating halo has to re-anchor these two rules together. */
.mascot-thinking .mc-halo {
  transform-origin: 50% 50%;
  animation: mcHalo 3.2s ease-in-out infinite;
}
@keyframes mcHalo {
  0%, 100% { opacity: 0.62; transform: scale(1); }
  45%      { opacity: 1;    transform: scale(1.028); }
  62%      { opacity: 1;    transform: scale(1.028); }
}

/* Thought sparks — tiny accent dots drifting up past the head */
.mc-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent, #D4AF37);
  left: 50%; top: 30%;
  opacity: 0;
  animation: mcSpark 2.6s ease-out infinite;
}
.mc-spark:nth-child(2) { animation-delay: 0s;    margin-left: -20px; }
.mc-spark:nth-child(3) { animation-delay: 0.9s;  margin-left: 16px; }
.mc-spark:nth-child(4) { animation-delay: 1.7s;  margin-left: -4px; }
@keyframes mcSpark {
  0%   { opacity: 0; transform: translateY(4px)  scale(0.6); }
  25%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

/* The long think (js/mascot.js aiThinkingHtml, 2026-10-05): a line that moves on while the
   coach thinks, a "still working" note when it runs long, and a slim bar — a gold sliver
   gliding while it thinks, a fill once it writes. The fill starts at the reading side: the
   track carries dir from the UI language. */
.ai-think-label { text-align: center; max-width: 36ch; }
.ai-think-note {
  font-size: 0.75rem;
  color: var(--gray-300);   /* text: --gray-400 is decoration only */
  text-align: center;
  max-width: 38ch;
  margin-top: -4px;
}
.ai-think-note[hidden] { display: none; }
.ai-think-track {
  position: relative;
  width: min(220px, 72%);
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gray-800);
}
.ai-think-bar {
  position: absolute;
  top: 0; bottom: 0;
  inset-inline-start: 0;
  width: 34%;
  border-radius: inherit;
  background: var(--accent, #D4AF37);
  /* The direction rides a variable, so the motion-off rules below need no extra specificity. */
  animation: var(--ai-glide, aiThinkGlide) 1.9s ease-in-out infinite;
}
.ai-think-track[dir="rtl"] { --ai-glide: aiThinkGlideRtl; }
@keyframes aiThinkGlide    { 0% { transform: translateX(-105%); } 100% { transform: translateX(300%); } }
@keyframes aiThinkGlideRtl { 0% { transform: translateX(105%); }  100% { transform: translateX(-300%); } }
.ai-think.is-writing .ai-think-bar {
  animation: none;
  transform: none;
  opacity: 1;
  transition: width 0.45s ease;
}
/* The technical detail beside a failed reply's sentence (claudeErrorMessage) — for a screenshot,
   not for reading. */
.ai-err-detail { font-size: 0.72rem; opacity: 0.7; overflow-wrap: anywhere; }

/* The coach's formatting in a reply (aiRichHtml, js/claude.js; 2026-10-05). Each block carries
   dir="auto", so its bullets and its start edge follow its own language; the bubble stops
   pre-wrapping, because the line breaks are real <br>s and blocks now. */
.ai-rich { white-space: normal; }
.gi-text.ai-rich { display: block; }
.ai-rich p { margin: 0 0 0.55em; text-align: start; }
.ai-rich ul, .ai-rich ol { margin: 0 0 0.55em; padding-inline-start: 1.3em; text-align: start; }
.ai-rich li { margin: 0.12em 0; }
.ai-rich > :last-child { margin-bottom: 0; }
.ai-rich strong, .summary-point strong, .feedback-body strong, .modal-feedback-body strong,
.motivation-text strong, .wrap-story strong, .wrap-card strong { font-weight: 700; color: inherit; }

/* The waiting line inside a chat bubble: compact, no bar — the reply appears as it is written. */
.chat-msg .ai-think { padding: 4px 2px; gap: 6px; }
.chat-msg .ai-think-track { display: none; }
.chat-msg .ai-think-label { font-size: 0.8rem; }

/* Under a kept method analysis: when it was made, and "analyse again" (dashboard.js). */
.method-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--gray-300);   /* text: --gray-400 is decoration only */
}

/* Motion off → the figure stands still; the state is still visible */
html.anim-off .mascot-thinking .mc-figure,
html.anim-off .mascot-thinking .mc-halo { animation: none; }
html.anim-off .mc-spark { display: none; }
html.anim-off .ai-think-bar { animation: none; opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .mascot-thinking .mc-figure, .mascot-thinking .mc-halo { animation: none; }
  .mc-spark { display: none; }
  .ai-think-bar { animation: none; opacity: 0.55; }
}

/* ═══════════════ Mascot flight — landing + guide (js/flight.js) ═══════════════ */
/* A fixed character layer: the mascot flies along a scroll-driven route.
   z 90: above the cursor spotlight (60), below the nav (200). */

#tmFlight {
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;          /* the flying ship can never widen the page */
  opacity: 0;
  transition: opacity 0.5s ease;
}
#tmFlight.on { opacity: 1; }

.fl-ship { position: absolute; left: 0; top: 0; will-change: transform; }

/* Idle bob lives on the INNER wrapper so it never fights the flight transform */
.fl-inner { position: relative; animation: flBob 3.4s ease-in-out infinite; }
@keyframes flBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Trail — accent dots chasing the ship, fading with distance */
.fl-dot {
  position: absolute; left: 0; top: 0;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--accent, #D4AF37);
  opacity: 0;
  will-change: transform, opacity;
}

/* Halo catches the light: when the cursor's spotlight passes near the flying
   mascot (flight.js toggles .fl-lit), its halo flares. */
#tmFlight .tm-mascot .mc-halo { transition: filter 0.3s ease, opacity 0.3s ease; }
#tmFlight .fl-inner.fl-lit .tm-mascot .mc-halo {
  opacity: 1;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent, #D4AF37) 85%, transparent))
          drop-shadow(0 0 3px color-mix(in srgb, var(--accent, #D4AF37) 90%, white));
}

/* The waving arm (finale): swap the resting right arm for the raised one.
   transform-box makes the rotation origin use viewBox coordinates. */
.tm-mascot .mc-arm-wave { display: none; }
.fl-wave .tm-mascot .mc-arm-r { display: none; }
.fl-wave .tm-mascot .mc-arm-wave {
  display: block;
  transform-box: view-box;
  transform-origin: 63px 56px;
  animation: flWaveShake 0.65s ease-in-out 4;
}
@keyframes flWaveShake {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-22deg); }
}

/* Farewell bubble — pops above the mascot at the finale */
.fl-bubble {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.92);
  width: max-content; max-width: 260px;
  padding: 10px 16px;
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--tint), 0 14px 40px -18px var(--shadow-lg);
  color: var(--white);
  font-size: 0.9rem; line-height: 1.55; text-align: center;
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.22,.61,.36,1);
}
.fl-bubble::after {
  content: '';
  position: absolute; top: 100%; left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--gray-700);
}
.fl-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* Guide handoff: while the mascot is flying, its hero-logo copy is hidden, so
   there is never a second character (fixes the duplicate on scroll-back-up). */
body.fl-flying .guide-hero-logo { opacity: 0; transition: opacity 0.3s ease; }

/* Guide ending: the mascot settles into meditation — the halo breathes,
   the idle bob eases to near-stillness. */
.fl-meditate { animation: flBob 5.5s ease-in-out infinite; }
.fl-meditate .mc-halo {
  transform-origin: 50% 9px;
  animation: flMeditateHalo 3.4s ease-in-out infinite;
}
@keyframes flMeditateHalo {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent, #D4AF37) 70%, transparent)); }
}

/* Motion off → no flight at all (JS also refuses to build the layer) */
html.anim-off #tmFlight { display: none; }
@media (prefers-reduced-motion: reduce) { #tmFlight { display: none; } }

/* ═══════════════════════════════════════════════════════════
   Session cockpit (session.html) + circuit breaker + live coach
   ═══════════════════════════════════════════════════════════ */

/* ── the reactive environment — the whole room breathes with your tilt ──
   A fixed layer behind the content. Calm is barely there; caution warms the
   edges; stop lets a slow red pressure creep in from the frame. This is the
   product's thesis made physical: your mental state, rendered as the room. */
.ck-ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 1; transition: background 1.6s ease, opacity 1.2s ease;
  background: radial-gradient(140% 130% at 50% 50%, transparent 60%, rgba(70,150,120,0.05) 100%);
}
.ck-page { position: relative; z-index: 1; }
/* a vignette that presses IN from the frame — the room closing on you */
body.amb-caution .ck-ambient {
  background: radial-gradient(135% 120% at 50% 50%, transparent 52%, rgba(201,162,39,0.16) 92%, rgba(201,162,39,0.22) 100%);
}
body.amb-stop .ck-ambient {
  background: radial-gradient(130% 115% at 50% 50%, transparent 44%, rgba(229,72,77,0.20) 84%, rgba(229,72,77,0.34) 100%);
  animation: ckAmbPulse 3.6s ease-in-out infinite;
}
@keyframes ckAmbPulse { 0%,100% { opacity: 0.62; } 50% { opacity: 1; } }
:root[data-theme="light"] .ck-ambient { mix-blend-mode: multiply; }
html.anim-off body.amb-stop .ck-ambient { animation: none; opacity: 0.9; }

/* ── daily contract screen ── */
.ck-contract { display: flex; justify-content: center; padding: 48px 0 60px; }
/* Flat since the redesign (2026-10-09): one fill and an edge, like the live board — the gold wash and
   the halo behind the mascot are gone. */
.ck-contract-card {
  position: relative; width: 100%; max-width: 560px; text-align: center;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 20px; padding: 40px 34px;
}
.ck-contract-mascot { margin-bottom: 10px; display: flex; justify-content: center; }
.ck-contract-mascot svg { color: var(--white); }
.ck-contract-title { font-family: var(--font-display); font-size: 1.9rem; color: var(--white); margin: 0 0 6px; }
.ck-contract-sub { color: var(--gray-200); font-size: 0.95rem; margin: 0 0 24px; }
.ck-contract-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
/* start, not right: both homes of these fields (#ckContract and .ck-prep-box) carry dir="rtl",
   so start IS right in Hebrew — and in English, where that island turns ltr, it is left.
   A hard-coded right put every English label at the far end from its heading (2026-09-27). */
.ck-field { display: flex; flex-direction: column; gap: 6px; text-align: start; }
.ck-field-wide { margin-bottom: 18px; }
.ck-field-label { font-size: 0.78rem; color: var(--gray-200); font-weight: 600; }
/* the three limits wear the icon tiles they wear on the live board (2026-10-09): what you sign here is
   recognisably what you will watch there */
.ck-lim-field { gap: 8px; }
.ck-lim-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 10px; border: 1px solid var(--edge); color: var(--gray-100);
  background: color-mix(in srgb, var(--white) 5%, var(--surface));
}
.ck-lim-ico svg { width: 19px; height: 19px; }
.ck-field input, .ck-field textarea {
  background: var(--surface-sunk); border: 1px solid var(--edge-hi); border-radius: 12px;
  color: var(--white); padding: 11px 13px; font-size: 0.95rem; font-family: var(--font);
  width: 100%; transition: border-color var(--t), box-shadow var(--t);
}
.ck-field input:focus, .ck-field textarea:focus { outline: none; border-color: var(--accent, var(--gray-400)); box-shadow: 0 0 0 3px var(--moon-soft); }
/* white-space: normal — .btn is nowrap and clips, so at 320–340 in English
   "Sign and start the session" lost both ends; it takes a second line instead */
.ck-sign { width: 100%; font-size: 1rem; padding: 13px; white-space: normal; text-wrap: balance; }
.ck-contract-note { margin-top: 14px; font-size: 0.78rem; color: var(--gray-300); }

/* ── the locked card (subscriptions stage 3.5, 2026-09-28) ──
   Trading mode without Pro Live: the contract card itself, dark as the rest of the cockpit, saying
   what the screen is and which plan opens it — with the free breathing exercise one click away. */
/* balance: English at 1280 left "coach." alone on the sub's second line */
.ck-lock .ck-contract-title, .ck-lock .ck-contract-sub { text-wrap: balance; }
.ck-lock-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.ck-lock-back { display: inline-block; margin-top: 18px; font-size: 0.82rem; color: var(--gray-200); }
.ck-lock-back:hover { color: var(--white); }

/* ── session prep, moved here from the journal's pre-session modal ──
   A recess inside the contract card, so the two halves of one screen read as
   two parts rather than one long form: the limits are what the Guardian will
   enforce, this is how the trader arrives. `.mood-selector` / `.readiness-*`
   are the journal's existing components, reused unchanged. */
.ck-prep {
  margin: 4px 0 18px;
  padding: 16px 16px 4px;
  border-radius: 12px;
  background: var(--surface-sunk, var(--gray-900));
  border: 1px solid var(--hairline, var(--gray-800));
  text-align: start;   /* see .ck-field: right in Hebrew, left in English */
}
.ck-prep-head {
  font-family: var(--font-display);
  font-size: 1rem; color: var(--white); margin-bottom: 14px;
  unicode-bidi: plaintext; text-align: start;
}
.ck-prep-hint {
  font-size: 0.75rem; color: var(--gray-200); margin-top: 5px;
  font-style: italic; line-height: 1.5;
  unicode-bidi: plaintext; text-align: start;
}
.ck-prep .mood-selector { margin-bottom: 0; }

/* ── the prep, re-opened mid-session ──
   The same #ckPrep node, moved into this box. Deliberately NOT a route back to
   the contract: the signed limits are what the Guardian enforces and must stay
   out of reach once the session has started. */
.ck-prep-overlay {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(4px);
}
.ck-prep-overlay[hidden] { display: none; }
html:not(.anim-off) .ck-prep-overlay { animation: fadeIn 0.18s ease; }

.ck-prep-box {
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--edge-hi);
  border-radius: 18px;
  padding: 22px;
  /* flat like every card; the one shadow is the depth a dialog needs over the page */
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75);
}
.ck-prep-box-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ck-prep-title {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--white);
  unicode-bidi: plaintext; text-align: start;
}
.ck-prep-close {
  background: none; border: none; color: var(--gray-200);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 6px;
  position: relative;
}
.ck-prep-close::after { content: ''; position: absolute; inset: -10px; }
.ck-prep-close:hover { color: var(--white); }
/* the site's own focus ring, not the browser's square (the method dialog focuses this on open) */
.ck-prep-close:focus-visible { outline: none; border-radius: 50%; box-shadow: var(--focus-ring); }
/* inside the box the prep is the whole subject, so it drops its own recess */
.ck-prep-box .ck-prep { margin: 0; padding: 0; background: none; border: 0; }
.ck-prep-box .ck-prep-head { display: none; }
/* what was signed, shown as the context the note is written against — read-only */
.ck-prep-locked {
  font-size: 0.8rem; line-height: 1.6; color: var(--gray-200);
  padding: 10px 12px; margin: 4px 0 14px;
  border-radius: 9px;
  background: var(--surface-sunk, var(--gray-900));
  border: 1px solid var(--hairline, var(--gray-800));
  unicode-bidi: plaintext; text-align: start;
}
.ck-prep-locked:empty { display: none; }
.ck-prep-box .btn-primary { width: 100%; }

/* ═══ REDESIGN 2026-10-09 — the live cockpit built to Daniel's concept ═══
   Four flat cards on one board: today's contract (on the right in Hebrew), the state (the centre),
   the trades (on the left, the whole height), the coach (under the first two). His four answers:
   a flat half gauge with a needle (it replaced the glowing "energy core"), the STATE first and P&L
   smaller under it (discipline before profit), a bar without page links, and the timeline and the
   warnings kept, inside the cards. Flat like the rest of the site — one fill, a 1px edge, no glow.
   Calm / caution / stop keep their three colours: here they name a state, as they always have. */

/* ── the bar: the session's controls, only while live (body[data-ck="live"], set by ckRender) ── */
/* 1680: a 1920 second monitor (the common one) gets the room, like News+ */
.ck-nav .container { max-width: 1680px; }
.ck-navctl { display: none; align-items: center; gap: 8px; margin-inline: auto 10px; min-width: 0; }
body[data-ck="live"] .ck-navctl { display: flex; }
/* quiet buttons — no outline until hovered — so LIVE and the gold "end session" carry the bar */
.ck-navbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 13px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--gray-100);
  font-family: var(--font); font-size: 0.84rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.ck-navbtn:hover { background: var(--tint); border-color: var(--gray-500); color: var(--white); }
.ck-navbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ck-navbtn svg { width: 17px; height: 17px; flex: none; }
.ck-navbtn--icon { width: 36px; padding: 0; }
/* caution or stop: breathing is the next thing to do, so its button says so (amber, never the gold
   of "end session") */
body.amb-caution #ckBreathe, body.amb-stop #ckBreathe { border-color: #D4AF37; color: #e9d38f; background: color-mix(in srgb, #D4AF37 12%, transparent); }
.ck-end { min-height: 36px; padding-inline: 18px; }
.ck-live-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--gray-600); color: var(--gray-300);
  font-family: var(--font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  transition: border-color 0.5s ease, color 0.5s ease;
}
.ck-live-chip.on { border-color: color-mix(in srgb, var(--win) 70%, transparent); color: var(--win-text); background: color-mix(in srgb, var(--win) 10%, transparent); }
.ck-live-chip .live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html:not(.anim-off) .ck-live-chip.on .live-dot { animation: livePulse 1.8s infinite; }
/* the session clock, inside the chip after a hairline */
.ck-live-time { margin-inline-start: 2px; padding-inline-start: 8px; border-inline-start: 1px solid currentColor; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.ck-live-time[hidden] { display: none; }
.ck-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── the board: wide as the second monitor it was built for, filling the screen's height ── */
.ck-page > .container { max-width: 1680px; }
.ck-board {
  display: grid; gap: 16px; padding: 20px 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "contract state trades" "coach coach trades";
  min-height: calc(100vh - 58px); min-height: calc(100svh - 58px);
}
.ck-panel {
  position: relative; margin: 0;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 18px;
  padding: 22px 24px;
}
.ck-contract-panel { grid-area: contract; }
.ck-state-panel { grid-area: state; display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color 0.5s ease; }
/* the card itself takes the state's colour in its edge once it is no longer calm */
.ck-state-panel.tilt-caution { border-color: color-mix(in srgb, #D4AF37 45%, var(--edge)); }
.ck-state-panel.tilt-stop { border-color: color-mix(in srgb, var(--loss) 55%, var(--edge)); }
/* size containment: the trades fill whatever height the other cards give the two rows, and a long
   session scrolls inside its card instead of stretching the whole board */
.ck-trades-panel { grid-area: trades; contain: size; display: flex; flex-direction: column; }
.ck-coach-panel { grid-area: coach; }

.ck-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; align-self: stretch; }
.ck-head-ico { flex: none; display: inline-flex; color: var(--gray-200); }
.ck-head-ico svg { width: 22px; height: 22px; }
.ck-panel-title { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--white); }
.ck-panel-label, .ck-card-label { font-size: 0.8rem; font-weight: 600; color: var(--gray-300); margin-bottom: 10px; }

/* ── today's contract: the three limits as bars ── */
.ck-intention { margin: -6px 0 12px; color: var(--gray-200); font-size: 0.88rem; line-height: 1.5; unicode-bidi: plaintext; text-align: start; }
.ck-intention:empty { display: none; }
.ck-limits { display: flex; flex-direction: column; }
.ck-limit { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.ck-limit:first-child { border-top: 0; padding-top: 4px; }
.ck-limit-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; border: 1px solid var(--edge); color: var(--gray-100);
  background: color-mix(in srgb, var(--white) 5%, var(--surface));
}
.ck-limit-ico svg { width: 22px; height: 22px; }
.ck-limit-body { flex: 1; min-width: 0; }
.ck-limit-name { font-size: 0.9rem; font-weight: 600; color: var(--gray-100); }
.ck-limit-val { margin-top: 3px; font-size: 0.86rem; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.ck-limit-val b { font-size: 1.08rem; font-weight: 700; color: var(--white); }
.ck-limit-meter { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ck-bar { position: relative; flex: 1; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--white) 9%, transparent); }
/* a notch at 70%, where the bar turns amber — the warning has a place before it arrives */
.ck-bar::after { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 70%; width: 2px; background: var(--surface); }
.ck-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gray-200); transition: width 0.5s ease; }
html.anim-off .ck-bar i { transition: none; }
.ck-limit.warn .ck-bar i { background: #D4AF37; }
.ck-limit.hit .ck-bar i { background: var(--loss); }
.ck-limit.hit .ck-limit-val b { color: var(--loss-text); }
.ck-limit.warn .ck-limit-pct, .ck-limit.warn .ck-limit-ico { color: #e2c25e; }
.ck-limit.hit .ck-limit-pct, .ck-limit.hit .ck-limit-ico { color: var(--loss-text); }
.ck-limit.warn .ck-limit-ico { border-color: color-mix(in srgb, #D4AF37 40%, var(--edge)); }
.ck-limit.hit .ck-limit-ico { border-color: color-mix(in srgb, var(--loss) 45%, var(--edge)); }
.ck-limit-pct { min-width: 3em; text-align: end; font-size: 0.78rem; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.ck-limit.off .ck-bar { display: none; }
.ck-limit.off .ck-limit-pct { text-align: start; }
.ck-timeline { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
/* On a tall screen the contract card is taller than its contents: the timeline takes the rest (up to
   260px) instead of leaving a hole under it. The chart is absolutely placed, so it never props its
   own box open — ckDrawSpark reads the box's height, and a smaller window can still shrink it. */
.ck-contract-panel { display: flex; flex-direction: column; }
.ck-contract-panel .ck-timeline { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ck-contract-panel .ck-spark { flex: 1 1 0; min-height: 124px; max-height: 260px; }
.ck-contract-panel .ck-spark-svg { position: absolute; top: 0; left: 0; }

/* ── the state: the gauge, the word, the warnings, then P&L ── */
/* margin-top: auto here and on the P&L row below: the dial and its state sit in the middle of
   whatever height the board gives the card */
.ck-gauge { width: 100%; max-width: 480px; margin: auto auto 0; }
/* LTR on purpose: calm on the left, stop on the right, in both languages (as drawn) */
.ck-gauge-svg { display: block; width: 100%; height: auto; direction: ltr; overflow: visible; }
/* the two zones the needle is not in stay readable (0.42), the one it is in at full strength */
.ck-g-zone { fill: none; stroke-width: 20; opacity: 0.42; transition: opacity 0.45s ease; }
.ck-g-zone.calm { stroke: #3fb26f; }
.ck-g-zone.caution { stroke: #D4AF37; }
.ck-g-zone.stop { stroke: #e5484d; }
.ck-g-lbl { font-family: var(--font); font-size: 13px; font-weight: 600; opacity: 0.55; transition: opacity 0.45s ease; }
.ck-g-lbl.calm { fill: #6fcf97; }
.ck-g-lbl.caution { fill: #e2c25e; }
.ck-g-lbl.stop { fill: #f08a8d; }
.lv-calm .ck-g-zone.calm, .lv-caution .ck-g-zone.caution, .lv-stop .ck-g-zone.stop,
.lv-calm .ck-g-lbl.calm, .lv-caution .ck-g-lbl.caution, .lv-stop .ck-g-lbl.stop { opacity: 1; }
/* a spring with a touch of overshoot — it settles like a real instrument's needle */
.ck-needle { transform-box: view-box; transform-origin: 150px 150px; transition: transform 1.15s cubic-bezier(0.34, 1.32, 0.64, 1); }
html.anim-off .ck-needle { transition: none; }
/* a tapered needle on a round hub, as drawn — wide at the hub, a point at the tip */
.ck-needle polygon { fill: #6fcf97; stroke: #6fcf97; stroke-width: 2; stroke-linejoin: round; transition: fill 0.45s ease, stroke 0.45s ease; }
/* a cast shadow gives the needle its height over the dial (a shadow, not a glow) */
.ck-needle { filter: drop-shadow(0 2px 2.5px rgba(0, 0, 0, 0.55)); }
/* the scale: a tick every 5, a longer one every 25, and the trader's two thresholds */
.ck-g-tick { stroke: var(--gray-500); stroke-width: 1.3; stroke-linecap: round; opacity: 0.6; }
.ck-g-tick.major { stroke: var(--gray-300); stroke-width: 2; opacity: 0.9; }
.ck-g-num { font-family: var(--font); font-size: 10px; font-weight: 600; fill: var(--gray-300); font-variant-numeric: tabular-nums; }
/* in the stop zone the zone itself breathes, slowly */
html:not(.anim-off) .lv-stop .ck-g-zone.stop { animation: ckZoneBreath 2.6s ease-in-out infinite; }
@keyframes ckZoneBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.68; } }
@media (prefers-reduced-motion: reduce) { html:not(.anim-off) .lv-stop .ck-g-zone.stop { animation: none; } }
.lv-caution .ck-needle polygon { fill: #e2c25e; stroke: #e2c25e; }
.lv-stop .ck-needle polygon { fill: #f08a8d; stroke: #f08a8d; }
.ck-g-hub { fill: var(--gray-700); stroke: var(--surface); stroke-width: 3; }
.ck-g-hub-dot { fill: var(--surface); }

.ck-state { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 4px; }
.ck-state-word { display: inline-block; font-family: var(--font-display); font-size: 2.05rem; font-weight: 700; letter-spacing: -0.01em; color: #6fcf97; }
/* a new state lands with a small beat (ckDrawGauge adds .pop when the level changes) */
.ck-state-word.pop { animation: ckStatePop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes ckStatePop { 0% { transform: scale(0.82); opacity: 0.2; } 100% { transform: none; opacity: 1; } }
.tilt-caution .ck-state-word { color: #e2c25e; }
.tilt-stop .ck-state-word { color: #f08a8d; }
.ck-state-score { font-size: 0.9rem; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.ck-state-score b { color: var(--gray-100); font-weight: 600; }
/* the warnings: amber tags (they name a behaviour, not money), red once the state is "stop" */
.ck-reasons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 18px; }
.ck-reasons:empty { display: none; }
.ck-state-panel .tilt-reason {
  background: color-mix(in srgb, #D4AF37 12%, transparent); border-color: color-mix(in srgb, #D4AF37 45%, transparent);
  color: #e9d38f; unicode-bidi: plaintext;
}
.tilt-stop .tilt-reason { background: var(--loss-bg); border-color: var(--loss); color: var(--loss-text); }
.ck-warnings-idle { margin: 10px 0 18px; font-size: 0.88rem; color: var(--gray-300); }
/* P&L: in plain sight, smaller than the state (Daniel's pick) */
.ck-pnl-row {
  align-self: stretch; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline);
  display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.ck-pnl-label { font-size: 0.82rem; color: var(--gray-300); }
/* "net": the commission is off the live P&L (2026-10-12) — the cockpit's label and the dashboard's guardian card */
.pnl-net { margin-inline-start: 4px; padding: 1px 7px; border: 1px solid var(--edge); border-radius: 999px; font-size: 0.68rem; font-weight: 500; color: var(--gray-300); white-space: nowrap; }
.ck-big-pnl { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
/* ⚠️ The money colours, for the whole cockpit (2026-10-09). The site has no global .win-text /
   .loss-text — every page scopes its own — so the P&L, the W·L line and the replay's figures here
   carried the class and stayed white (a lab that checked only the class missed it). */
.ck-page .win-text { color: var(--win-text); }
.ck-page .loss-text { color: var(--loss-text); }
.ck-wl { font-size: 0.88rem; color: var(--gray-200); }
.ck-wl:empty { display: none; }
/* ── multi-account cockpit bits (all hidden when there is only one account) ── */
.ck-acct-chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--moon, #D4AF37) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--moon, #D4AF37) 32%, transparent);
  color: var(--moon, #D4AF37);
  font-family: var(--font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  vertical-align: middle;
}
.ck-acct-line {
  margin: -6px 0 18px; font-size: 0.82rem; line-height: 1.5;
  color: var(--gray-200);
}

/* Instrument + point value: the audit trail behind the P&L above it. */
.ck-instruments { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
/* in the contract card they line up with the limits above them, on the reading side */
.ck-contract-panel .ck-instruments { justify-content: flex-start; }
.ck-inst {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px; border-radius: 7px;
  background: var(--surface-sunk, rgba(127,127,127,0.08));
  border: 1px solid var(--edge, var(--gray-800));
  font-size: 0.72rem; color: var(--gray-200);
}
.ck-inst b { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-inst.unknown { border-color: color-mix(in srgb, var(--loss) 40%, transparent); color: var(--loss-text); }

.ck-firm { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.ck-firm-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 8px;
  background: var(--surface-sunk, rgba(127,127,127,0.08));
  font-size: 0.78rem; color: var(--gray-200);
}
.ck-firm-row b { font-variant-numeric: tabular-nums; color: var(--white); font-size: 0.92rem; }
.ck-firm-row.warn b { color: var(--moon, #D4AF37); }
.ck-firm-row.danger { background: color-mix(in srgb, var(--loss) 13%, transparent); }
.ck-firm-row.danger b { color: var(--loss-text); }

.ck-symbols { display: flex; flex-direction: column; gap: 2px; }
.ck-sym-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 2px; font-size: 0.86rem;
}
.ck-sym-row + .ck-sym-row { border-top: 1px solid var(--edge, var(--gray-800)); }
.ck-sym-name { min-width: 66px; color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-sym-meta { flex: 1; min-width: 0; font-size: 0.75rem; color: var(--gray-300); }
.ck-sym-row b { font-variant-numeric: tabular-nums; }
.ck-sym-unknown { color: var(--gray-300); font-weight: 400; font-size: 0.78rem; }
.ck-sym-row.unknown .ck-sym-name { color: var(--loss-text); }
.ck-sym-warn { margin-top: 12px; font-size: 0.78rem; line-height: 1.55; color: var(--loss-text); }

/* ── the coach: alerts and the session chat in one feed, the input under it (a card since the
   redesign of 2026-10-09; until then a tray docked to the bottom of the screen) ── */
.ck-coach-panel { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
/* ⚠️ flex-START, and that is the fix, not a style (2026-09-25). With `justify-content: flex-end`
   the overflow went out of the TOP, where no scroll can reach it: measured scrollHeight ===
   clientHeight (240 = 240) with up to 301px of older messages above, and at 320 the top of the
   newest reply cut off. Overflow now goes out of the bottom, which scrolls; every append already
   sets scrollTop = scrollHeight (ckChatBubble, the guardian-ui feed), so the newest still shows. */
.ck-feed {
  display: flex; flex-direction: column; gap: 8px; justify-content: flex-start;
  max-height: 220px; overflow-y: auto; padding: 2px;
}
.ck-feed:not(:has(.gi-bubble)) { max-height: none; }
.ck-coach-idle { display: flex; align-items: center; gap: 10px; color: var(--gray-300); }
.ck-coach-idle svg { color: var(--gray-300); width: 30px; height: auto; flex: none; }
.ck-coach-idle-txt { font-size: 0.88rem; line-height: 1.5; unicode-bidi: plaintext; text-align: start; }
/* the input row */
.ck-cmd {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-sunk); border: 1px solid var(--edge-hi); border-radius: 12px;
  padding-block: 5px; padding-inline: 14px 5px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ck-cmd:focus-within { border-color: var(--accent, var(--gray-500)); box-shadow: 0 0 0 3px var(--moon-soft); }
/* min-width: 0 — an input's automatic minimum is its intrinsic width (215px here), so
   the field refused to shrink and pushed the send button off a phone's screen. */
.ck-cmd input {
  flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--white);
  font-family: var(--font); font-size: 0.96rem; padding: 8px 0;
}
.ck-cmd input::placeholder { color: var(--gray-300); }
.ck-cmd-kbd { display: flex; gap: 4px; }
.ck-cmd-kbd kbd {
  font-family: var(--font); font-size: 0.62rem; color: var(--gray-300);
  background: var(--surface); border: 1px solid var(--edge); border-radius: 5px;
  padding: 2px 6px; min-width: 16px; text-align: center;
}
.ck-chat-send {
  flex: none; width: 40px; height: 40px; border-radius: 9px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--white) 10%, var(--surface)); color: var(--white);
  transition: transform 0.15s ease, background 0.2s ease;
}
.ck-chat-send:hover { background: color-mix(in srgb, var(--white) 16%, var(--surface)); }
html:not(.anim-off) .ck-chat-send:active { transform: scale(0.92); }

/* the user's own chat bubble — mirrored, quieter */
.gi-bubble.gi-user { flex-direction: row-reverse; background: var(--gray-900); border-color: var(--gray-700); align-self: flex-start; max-width: 82%; }
.gi-bubble.gi-user .gi-text { color: var(--gray-100); }
.gi-bubble {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--gray-800); border: 1px solid var(--gray-600);
  border-radius: 12px; padding: 12px 14px;
}
.gi-mascot { flex: none; }
.gi-mascot svg { color: var(--gray-100); }
.gi-text { font-size: 0.92rem; color: var(--white); line-height: 1.55; }
html:not(.anim-off) .gi-bubble.gi-in { animation: giIn 0.4s ease both; }
@keyframes giIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#coachLiveMsg { margin: 0 0 20px; }
#coachLiveMsg:empty { display: none; }

/* ── tilt timeline — in the gauge's language (2026-10-09, Daniel: "the graph doesn't match the page") ──
   The trader's two thresholds as thin dashed lines with their words (the shaded bands are gone), the
   line in the gauge's three colours with hard stops at those thresholds, plain dots in their zone's
   colour ringed in the card's own colour (like the gauge's hub), a quiet floor, a neutral wash. */
.ck-spark { position: relative; min-height: 124px; }
.ck-spark-big { min-height: 185px; }
/* direction:ltr — the page is RTL, which flips SVG text-anchor and clips the
   time/zone labels at the edges; the chart itself is inherently LTR (time →).
   NO width:100% here — the SVG is generated at the holder's real pixel size
   (see ckDrawSpark); stretching it is what made the curve look warped. */
.ck-spark-svg { display: block; direction: ltr; overflow: visible; }
.ck-spark-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ck-spark-area { opacity: 1; }
/* draw-in — only when a new trade extends the line (pathLength=1 trick) */
html:not(.anim-off) .ck-spark-svg.draw .ck-spark-line {
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: ckDrawLine 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
html:not(.anim-off) .ck-spark-svg.draw .ck-spark-area { opacity: 0; animation: ckAreaIn 0.7s ease 0.55s forwards; }
@keyframes ckDrawLine { to { stroke-dashoffset: 0; } }
@keyframes ckAreaIn { to { opacity: 1; } }
/* the floor and the two thresholds */
.ck-base { stroke: var(--hairline); stroke-width: 1; }
.ck-th { stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.55; }
.ck-th.caution { stroke: #e2c25e; }
.ck-th.stop { stroke: #f08a8d; }
.ck-th-lbl { font-family: var(--font); font-size: 10.5px; font-weight: 600; opacity: 0.9; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ck-th-lbl.caution { fill: #e2c25e; }
.ck-th-lbl.stop { fill: #f08a8d; }
/* trade dots — the zone's colour, ringed in the card's; the newest a size up, with a slow pulse */
.ck-dot-fill { fill: #6fcf97; stroke: var(--surface); stroke-width: 2; }
.ck-dot.lv-caution .ck-dot-fill { fill: #e2c25e; }
.ck-dot.lv-stop .ck-dot-fill { fill: #f08a8d; }
.ck-dot-pulse { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0; }
.ck-dot.last { color: #6fcf97; }
.ck-dot.last.lv-caution { color: #e2c25e; }
.ck-dot.last.lv-stop { color: #f08a8d; }
html:not(.anim-off) .ck-dot-pulse { animation: ckDotPulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ckDotPulse {
  0% { transform: scale(0.5); opacity: 0.65; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { opacity: 0; }
}
.ck-spark-time { font-family: var(--font); font-size: 10.5px; fill: var(--gray-300); font-variant-numeric: tabular-nums; }
.ck-spark-ghost { stroke: var(--gray-700); stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; opacity: 0.7; }
.ck-spark-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--gray-300); font-size: 0.85rem;
}

/* ── the trades: a table, newest first (2026-10-09; a list of cards until then) ──
   time · symbol · direction · size · P&L. start, not stretch, for the symbol and the time: they
   carry dir="ltr", and a stretched box put a Hebrew row's text at the wrong end (measured 2026-09-15). */
.ck-tape-head, .ck-trade {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 3.3rem minmax(0, 1fr) 1.9rem 2.2rem 4.6rem;
}
.ck-tape-head { padding: 0 10px 8px; font-size: 0.74rem; color: var(--gray-300); border-bottom: 1px solid var(--hairline); }
.ck-tape-head span:nth-child(1), .ck-tape-head span:nth-child(2) { justify-self: start; }
.ck-tape-head span:nth-child(3), .ck-tape-head span:nth-child(4) { justify-self: center; }
/* the direction column is an arrow's width: its head is a pair of arrows, not the word, which no
   language fits into it ("Direction" ran into "Size") */
.ck-th-dir { display: inline-flex; }
.ck-th-dir svg { width: 15px; height: 15px; }
.ck-tape-head span:nth-child(5) { justify-self: end; }
.ck-tape { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.ck-trade { padding: 11px 10px; border-bottom: 1px solid var(--hairline); font-size: 0.88rem; }
.ck-trade-time { justify-self: start; white-space: nowrap; color: var(--gray-200); font-variant-numeric: tabular-nums; }
/* English reads "12:08 AM": a wider time column, or it took two lines */
:root[data-lang="en"] .ck-tape-head, :root[data-lang="en"] .ck-trade { grid-template-columns: 4.5rem minmax(0, 1fr) 1.9rem 2.2rem 4.6rem; }
.ck-trade-sym { justify-self: start; font-weight: 600; color: var(--white); }
.ck-trade-dir {
  justify-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; border-radius: 7px; color: var(--gray-100);
  background: color-mix(in srgb, var(--white) 8%, transparent);
}
.ck-trade-dir svg { width: 15px; height: 15px; }
/* the arrow wears the trade's result, as drawn — green won, red lost (money, so the money colours) */
.ck-trade.w .ck-trade-dir { background: color-mix(in srgb, var(--win) 18%, transparent); color: var(--win-text); }
.ck-trade.l .ck-trade-dir { background: color-mix(in srgb, var(--loss) 18%, transparent); color: var(--loss-text); }
.ck-trade { transition: background 0.2s ease; }
.ck-trade:hover { background: color-mix(in srgb, var(--white) 3%, transparent); }
.ck-trade-qty { justify-self: center; color: var(--gray-100); font-variant-numeric: tabular-nums; }
.ck-trade-pnl { justify-self: end; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.ck-trade.w .ck-trade-pnl { color: var(--win-text); }
.ck-trade.l .ck-trade-pnl { color: var(--loss-text); }

/* ── waiting state (no trades yet), inside the trades card ── */
.ck-waiting {
  margin: auto 0; padding: 24px 8px; text-align: center; color: var(--gray-200); font-size: 0.9rem; line-height: 1.6;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.ck-pulse { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); }
html:not(.anim-off) .ck-pulse { animation: livePulse 1.8s infinite; }

/* ── replay — the same flat cards as the live board ── */
.ck-replay { max-width: 820px; margin: 0 auto; padding: 32px 0 60px; }
.ck-replay-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--white); text-align: center; margin: 0 0 16px; }
.ck-card { background: var(--surface); border: 1px solid var(--edge); border-radius: 18px; padding: 22px 24px; margin-bottom: 16px; }
.ck-replay-grade {
  text-align: center; font-size: 1.02rem; font-weight: 600; border-radius: 14px;
  padding: 14px 18px; margin-bottom: 16px; border: 1px solid var(--edge-hi);
  background: var(--surface); color: var(--white); text-wrap: balance;
}
.ck-replay-grade.good { border-color: color-mix(in srgb, var(--win) 60%, transparent); background: var(--win-bg); color: var(--win-text); }
.ck-replay-grade.bad { border-color: color-mix(in srgb, var(--loss) 60%, transparent); background: var(--loss-bg); color: var(--loss-text); }
/* the verdict opens on its mark — a check when the contract held, the stop sign when it broke
   (a mask in the text's own colour: the script writes only the words) */
.ck-replay-grade { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ck-replay-grade::before {
  content: ''; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ck-grade-mark) center / contain no-repeat; mask: var(--ck-grade-mark) center / contain no-repeat;
  --ck-grade-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M8.6 3.5h6.8l5.1 5.1v6.8l-5.1 5.1H8.6l-5.1-5.1V8.6Z' stroke-linejoin='round'/%3E%3Cpath d='M12 8v4.5M12 15.6v.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ck-replay-grade.good::before {
  --ck-grade-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m7.8 12.3 2.8 2.8 5.6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ck-replay .ck-panel-head { margin-bottom: 14px; }
.ck-replay-markers { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
/* each jump a row: its time in an amber chip (a behaviour, not money), then what happened */
.ck-marker { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--gray-100); text-align: start; }
.ck-marker-time {
  flex: none; padding: 2px 9px; border-radius: 7px; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, #D4AF37 14%, transparent); color: #e9d38f;
}
.ck-marker + .ck-marker { padding-top: 8px; border-top: 1px solid var(--hairline); }
.ck-marker.calm { color: var(--win-text); }
.ck-replay-contract { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0; }
.ck-rc-item {
  font-size: 0.85rem; color: var(--gray-100); background: var(--surface);
  border: 1px solid var(--edge); border-radius: 999px; padding: 6px 14px;
}
/* wraps: a .btn clips its overflow, so as a flex item it shrank below its own label at 320px */
.ck-replay-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ── circuit breaker overlay (always dark — a hard stop, like the breathing room) ── */
.breaker-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 20%, #1a0b0b 0%, #0a0506 55%, #060304 100%);
  color-scheme: dark;
}
.breaker-overlay.open { display: flex; }
.breaker-box {
  width: min(92vw, 480px); max-height: 92vh; overflow-y: auto;
  text-align: center; padding: 34px 30px; border-radius: 20px;
  background: #151113; border: 1px solid rgba(240, 138, 141, 0.32);
}
/* a stop sign on a tile (an emoji until 2026-10-09), the cockpit's own icon language */
.breaker-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 14px;
  border-radius: 16px; border: 1px solid rgba(240, 138, 141, 0.38); background: rgba(240, 138, 141, 0.1); color: #f08a8d;
}
.breaker-icon svg { width: 28px; height: 28px; }
.breaker-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #f5eaea; margin: 0 0 10px; }
.breaker-detail { color: #d8b9b9; font-size: 0.95rem; margin-bottom: 18px; }
.breaker-timer {
  font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; letter-spacing: -0.01em; color: #f08a8d;
  font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.breaker-timer.done { color: #7fd6a0; }
.breaker-sub { color: #b9a2a2; font-size: 0.85rem; margin-bottom: 16px; }
.breaker-breathe { margin-bottom: 20px; background: rgba(255,255,255,0.08); color: #f0e6e6; border: 1px solid rgba(255,255,255,0.14); }
.breaker-reflect { text-align: right; margin-bottom: 16px; }
.breaker-reflect label { display: block; font-size: 0.85rem; color: #d8c6c6; margin-bottom: 8px; }
.breaker-reflect textarea {
  width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; color: #f5efef; padding: 10px 12px; font-size: 0.92rem; font-family: var(--font);
}
.breaker-release { width: 100%; padding: 12px; font-size: 0.98rem; }
.breaker-release:disabled { opacity: 0.4; cursor: not-allowed; }
.breaker-override {
  display: block; width: 100%; margin-top: 14px; background: none; border: none;
  color: #8a6d6d; font-size: 0.78rem; cursor: pointer; text-decoration: underline;
}
.breaker-override:hover { color: #c9a2a2; }

/* cockpit button on the dashboard glows during a live session */
#cockpitBtn.live { border-color: var(--win); color: var(--win-text); }

/* ═══ The seven additions (2026-10-09, Daniel's picks) — in the board's own flat language ═══ */

/* the next economic event in the bar (amber from 15 minutes before a high-impact one) */
.ck-event {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--edge-hi); color: var(--gray-100); font-size: 0.76rem; white-space: nowrap;
}
.ck-event[hidden] { display: none; }
.ck-event svg { width: 15px; height: 15px; flex: none; color: var(--gray-300); }
.ck-event-name { font-weight: 700; }
.ck-event-in { color: var(--gray-300); font-variant-numeric: tabular-nums; }
.ck-event.soon { border-color: #D4AF37; color: #e9d38f; background: color-mix(in srgb, #D4AF37 12%, transparent); }
.ck-event.soon svg, .ck-event.soon .ck-event-in { color: #e9d38f; }

/* hiding P&L: the eye gains its slash, and every money figure on the board blurs */
.ck-eye-slash { display: none; }
#ckHidePnl[aria-pressed="true"] { color: var(--white); background: var(--tint); }
#ckHidePnl[aria-pressed="true"] .ck-eye-slash { display: inline; }
.ck-hide-pnl .ck-board .ck-big-pnl, .ck-hide-pnl .ck-board .ck-trade-pnl,
.ck-hide-pnl .ck-board .ck-money, .ck-hide-pnl #ckLimLoss .ck-limit-val {
  filter: blur(7px); user-select: none;
}

/* the contract's second row: the profit target and the give-back limit */
.ck-contract-grid.ck-contract-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 6px; }
.ck-contract-hint { margin: 0 0 18px; font-size: 0.78rem; color: var(--gray-300); text-align: start; }

/* tagging a trade: the row is a button, the bar opens under it, the mark sits before the symbol */
.ck-panel-sub { margin: -10px 0 12px; font-size: 0.78rem; color: var(--gray-300); }
.ck-trade[data-id] { cursor: pointer; }
.ck-trade:focus-visible { outline: 2px solid var(--accent, var(--gray-400)); outline-offset: -2px; border-radius: 8px; }
.ck-trade.open { background: color-mix(in srgb, var(--white) 5%, transparent); }
.ck-trade-sym { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.ck-trade-sym-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-tag-mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px;
}
.ck-tag-mark svg { width: 12px; height: 12px; }
.ck-tag-mark.plan { background: color-mix(in srgb, var(--white) 14%, transparent); color: var(--white); }
.ck-tag-mark.impulse { background: color-mix(in srgb, #D4AF37 18%, transparent); color: #e9d38f; }
.ck-tag-bar {
  display: flex; gap: 8px; padding: 8px 10px 12px; border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--white) 5%, transparent);
}
.ck-tag-btn {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--edge-hi); background: transparent; color: var(--gray-100);
  font-family: var(--font); font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.ck-tag-btn svg { width: 14px; height: 14px; flex: none; }
.ck-tag-btn:hover { background: var(--tint); color: var(--white); }
.ck-tag-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ck-tag-btn.plan.on { background: color-mix(in srgb, var(--white) 12%, transparent); border-color: color-mix(in srgb, var(--white) 45%, transparent); color: var(--white); }
.ck-tag-btn.impulse.on { background: color-mix(in srgb, #D4AF37 14%, transparent); border-color: #D4AF37; color: #e9d38f; }
/* the tally at the foot of the trades card: one split line (plan white, impulse gold, untagged a hairline) */
.ck-tag-sum { flex: none; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.ck-tag-sum[hidden] { display: none; }
.ck-tag-split { display: flex; gap: 3px; height: 6px; }
.ck-tag-split i { flex: 0 1 0; min-width: 6px; border-radius: 999px; }
.ck-tag-split i.plan { background: color-mix(in srgb, var(--white) 78%, transparent); }
.ck-tag-split i.impulse { background: #D4AF37; }
.ck-tag-split i.none { background: var(--edge-hi); }
.ck-tag-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--gray-300); }
.ck-tag-key { display: inline-flex; align-items: center; gap: 6px; }
.ck-tag-key svg { width: 13px; height: 13px; flex: none; }
.ck-tag-key b { color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-tag-key.plan svg { color: var(--white); }
.ck-tag-key.impulse svg, .ck-tag-key.impulse b { color: #e9d38f; }
.ck-tag-dot { width: 8px; height: 8px; margin-inline: 2px; border-radius: 50%; background: var(--edge-hi); }

/* the cool-down after a loss — a soft amber strip with its countdown */
.ck-cool {
  align-self: stretch; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 14px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, #D4AF37 38%, transparent);
  background: color-mix(in srgb, #D4AF37 10%, transparent); color: #e9d38f; font-size: 0.86rem; text-align: start;
}
.ck-cool[hidden] { display: none; }
.ck-cool svg { width: 18px; height: 18px; flex: none; }
.ck-cool-txt { flex: 1; min-width: 0; line-height: 1.45; }
.ck-cool-in { flex: none; font-size: 1rem; font-variant-numeric: tabular-nums; }
/* the trader's own rule after a loss (2026-10-13) — quiet, under the cool-down; no amber, no alarm */
.ck-rule-note {
  align-self: stretch; margin-top: 8px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--edge);
  background: var(--surface-sunk); color: var(--gray-100); font-size: 0.84rem; line-height: 1.45; text-align: start;
}
.ck-rule-note[hidden] { display: none; }
.ck-rule-note b { font-weight: 600; color: var(--gray-300); }

/* the target reached / too much given back: the suggestion sits just above the P&L row */
.ck-goal-note {
  align-self: stretch; margin-top: auto; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px;
  font-size: 0.86rem; line-height: 1.5; text-wrap: balance;
}
.ck-goal-note[hidden] { display: none; }
.ck-goal-note:not([hidden]) + .ck-pnl-row { margin-top: 0; }
.ck-goal-note.good { border: 1px solid color-mix(in srgb, var(--win) 45%, transparent); background: color-mix(in srgb, var(--win) 10%, transparent); color: var(--win-text); }
.ck-goal-note.warn { border: 1px solid color-mix(in srgb, #D4AF37 45%, transparent); background: color-mix(in srgb, #D4AF37 10%, transparent); color: #e9d38f; }

/* protecting a good day: two slim lines under P&L */
.ck-goals { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
/* with the two lines (and their suggestion) the dial gives up a little width, so the card — and the
   board — keep fitting a 1440×900 screen (measured: 906 without this) */
.ck-state-panel:has(#ckGoals:not([hidden])) .ck-gauge { max-width: 420px; }
.ck-goals[hidden], .ck-goal[hidden] { display: none; }
.ck-goal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--gray-300); }
.ck-goal .ck-bar::after { display: none; }
#ckGoalTarget .ck-bar i { background: color-mix(in srgb, var(--win) 75%, var(--white)); }
#ckGoalGive .ck-bar i { background: var(--gray-200); }
#ckGoalGive.warn .ck-bar i { background: #D4AF37; }
#ckGoalGive.hit .ck-bar i { background: var(--loss); }
.ck-goal-val { color: var(--gray-100); font-variant-numeric: tabular-nums; }
/* On a phone a goal takes two lines — its name and figures, the bar under them: in English at 320
   "Given back from the peak" and "-$105 / -$300" left the bar 10px (measured). */
@media (max-width: 480px) {
  .ck-goal { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; row-gap: 6px; }
  .ck-goal .ck-goal-name { grid-area: name; }
  .ck-goal .ck-goal-val { grid-area: val; }
  .ck-goal .ck-bar { grid-area: bar; }
}
/* the tag mark steps down beside the symbol on the narrowest phones ("MESU5" was cut to "MES…" in English at 320) */
@media (max-width: 380px) {
  .ck-trade-sym { gap: 4px; }
  .ck-tag-mark { width: 15px; height: 15px; border-radius: 5px; }
  .ck-tag-mark svg { width: 10px; height: 10px; }
}

/* the method, on screen */
.ck-method-box { max-width: 540px; }
.ck-m-sec + .ck-m-sec { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.ck-m-title { margin: 0 0 8px; font-size: 0.82rem; font-weight: 700; color: var(--gray-300); text-align: start; }
.ck-m-text { margin: 0; white-space: pre-line; color: var(--gray-100); font-size: 0.92rem; line-height: 1.6; unicode-bidi: plaintext; text-align: start; text-wrap: pretty; }
.ck-m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ck-m-list li { position: relative; padding-inline-start: 28px; color: var(--gray-100); font-size: 0.92rem; line-height: 1.5; unicode-bidi: plaintext; text-align: start; text-wrap: pretty; }
.ck-m-list li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; top: 1px; display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--white) 12%, transparent);
  color: var(--white); font-weight: 700; font-size: 0.66rem; line-height: 1;
}
.ck-m-edit { display: inline-block; margin-top: 18px; font-size: 0.84rem; color: var(--gray-200); }
.ck-m-edit:hover { color: var(--white); }
.ck-m-empty { text-align: center; padding: 8px 0 4px; color: var(--gray-200); }
.ck-m-empty p { margin: 0 0 14px; }

/* the mood check — a one-tap row at the foot of the coach's feed; while it waits it takes the idle
   line's place (the coach card must not grow: the board fits 1440×900) */
.ck-feed:has(#ckMoodAsk) .ck-coach-idle { display: none; }
.ck-mood-ask {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 5px 8px; border-radius: 12px;
  border: 1px solid var(--edge-hi); background: color-mix(in srgb, var(--white) 4%, var(--surface));
}
.ck-mood-q { font-size: 0.86rem; font-weight: 600; color: var(--white); }
.ck-mood-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-mood-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--edge-hi); background: transparent; color: var(--gray-100);
  font-family: var(--font); font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.ck-mood-btn:hover { background: var(--tint); color: var(--white); }
.ck-mood-btn:focus-visible, .ck-mood-skip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ck-mood-emo { font-size: 1rem; line-height: 1; }
.ck-mood-skip {
  margin-inline-start: auto; background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--gray-300); font-family: var(--font); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 3px;
}
/* On a phone the four moods wrapped 3 + 1. Here they are four tiles in one row, the emoji above its
   word — the contract screen's own mood tiles. At 320 in English a tile is ~55px and "Stressed" ~47. */
@media (max-width: 600px) {
  .ck-mood-q { flex: 1 1 auto; }
  .ck-mood-opts { order: 3; flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ck-mood-btn { flex-direction: column; justify-content: center; gap: 4px; height: auto; min-height: 56px; padding: 8px 2px; border-radius: 12px; font-size: 0.74rem; }
  .ck-mood-btn > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ck-mood-emo { font-size: 1.25rem; }
}

/* the replay's tag chips */
.ck-rc-ico { display: inline-flex; width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; }
.ck-rc-ico svg { width: 100%; height: 100%; }
.ck-rc-ico.plan { color: var(--white); }
.ck-rc-ico.impulse { color: #e9d38f; }

/* ── cockpit motion ── */

/* staggered entrance — plays whenever a state (contract/live/replay) reveals */
@keyframes ckRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
html:not(.anim-off) .ck-board > .ck-panel { animation: ckRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
html:not(.anim-off) .ck-board > .ck-state-panel { animation-delay: 0.06s; }
html:not(.anim-off) .ck-board > .ck-trades-panel { animation-delay: 0.12s; }
html:not(.anim-off) .ck-board > .ck-coach-panel { animation-delay: 0.18s; }
html:not(.anim-off) .ck-contract-card { animation: ckRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
html:not(.anim-off) .ck-replay > * { animation: ckRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
html:not(.anim-off) .ck-replay > *:nth-child(2) { animation-delay: 0.08s; }
html:not(.anim-off) .ck-replay > *:nth-child(3) { animation-delay: 0.16s; }
html:not(.anim-off) .ck-replay > *:nth-child(4) { animation-delay: 0.24s; }
html:not(.anim-off) .ck-replay > *:nth-child(5) { animation-delay: 0.32s; }

/* the contract "stamped" beat — a confident press before the cockpit reveals */
.ck-contract-card { position: relative; }
.ck-contract-card.stamped { animation: ckStamp 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.ck-contract-card.stamped::after {
  content: '✓';
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: var(--win-text);
  background: color-mix(in srgb, var(--gray-900) 72%, transparent);
  border-radius: 18px; backdrop-filter: blur(2px);
  animation: ckStampMark 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) 0.05s both;
}
@keyframes ckStamp { 0% { transform: scale(1); } 35% { transform: scale(0.985); } 100% { transform: scale(1); } }
@keyframes ckStampMark {
  0% { opacity: 0; transform: scale(1.7) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

/* P&L on a new trade: a brief dip and return, no glow (the redesign has none) */
@keyframes ckPnlFlash { 0% { opacity: 0.35; } 100% { opacity: 1; } }
html:not(.anim-off) .ck-big-pnl.flash { animation: ckPnlFlash 0.7s ease-out; }

/* a new trade slides into the table */
@keyframes ckTradeIn {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}
html:not(.anim-off) .ck-trade.new { animation: ckTradeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1), ckTradeFlash 1.6s ease-out; }
/* and its row lights in its result's colour for a moment */
@keyframes ckTradeFlash { 0% { background: color-mix(in srgb, var(--white) 12%, transparent); } 100% { background: transparent; } }
html:not(.anim-off) .ck-trade.w.new { animation-name: ckTradeIn, ckTradeFlashW; }
html:not(.anim-off) .ck-trade.l.new { animation-name: ckTradeIn, ckTradeFlashL; }
@keyframes ckTradeFlashW { 0% { background: color-mix(in srgb, var(--win) 22%, transparent); } 100% { background: transparent; } }
@keyframes ckTradeFlashL { 0% { background: color-mix(in srgb, var(--loss) 22%, transparent); } 100% { background: transparent; } }

/* intervention bubble — the accent in its edge, flat */
.gi-bubble { border-color: color-mix(in srgb, var(--accent, #D4AF37) 30%, var(--gray-600)); }

/* A theme toggle that visibly does nothing is worse than no toggle. On a
   theme-locked page (the cockpit) the sun/moon is hidden — the setting itself
   still applies everywhere else, so the button has simply moved off the one
   screen where it cannot show its work. The language toggle stays. */
:root[data-theme-lock="dark"] #tmThemeBtn { display: none; }

/* the send arrow points into the RTL flow */
.ck-chat-send svg { transform: scaleX(-1); }

/* ── contract-streak lines ── */
.ck-streak-line { margin: 14px 0 2px; font-size: 0.86rem; color: var(--win-text); font-weight: 600; }
.mind-contract {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--gray-800);
  font-size: 0.84rem; color: var(--gray-100);
}
.mind-contract-icon { font-size: 0.95rem; }
.mind-contract-best { color: var(--gray-300); font-size: 0.78rem; }

/* ── fullscreen ── the bar is already only the session's controls, so full screen hides
   nothing any more (it hid the page links until 2026-10-09); body.ck-focus stays as the
   class the fallback toggles, with nothing to do. */

/* ── demo simulator panel (?sim=1) ── */
.ck-sim {
  position: fixed; inset-block-end: 18px; inset-inline-start: 18px; z-index: 500;
  width: 190px; padding: 14px; border-radius: 14px;
  background: var(--gray-900); border: 1px solid var(--gray-600);
  box-shadow: 0 12px 34px -14px var(--shadow-lg);
  display: flex; flex-direction: column; gap: 8px;
}
.ck-sim-title { font-size: 0.78rem; font-weight: 700; color: var(--gray-200); }
.ck-sim-auto { width: 100%; }
.ck-sim-row { display: flex; gap: 6px; }
.ck-sim-row .btn { flex: 1; padding: 7px 4px; font-size: 0.72rem; }
.ck-sim-reset {
  background: none; border: none; color: var(--gray-300); font-size: 0.72rem;
  cursor: pointer; text-decoration: underline; padding: 2px;
}
.ck-sim-reset:hover { color: var(--white); }

/* responsive — narrower than a second monitor: the state across the top, the contract beside the
   trades, the coach under them. A phone: one column, the state and the coach first. */
@media (max-width: 1199px) {
  .ck-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto;
    grid-template-areas: "state state" "contract trades" "coach coach";
    min-height: 0;
  }
}
@media (max-width: 1199px) {
  /* eight controls in the bar since 2026-10-09: their words step back to icons (titles keep the names) */
  .ck-navbtn-txt { display: none; }
  .ck-navbtn { width: 36px; padding: 0; }
}
@media (max-width: 900px) {
  .ck-contract-grid, .ck-contract-grid.ck-contract-grid--2 { grid-template-columns: 1fr; }
}
/* ⚠️ PHONES. The bar keeps the session's controls as icons (the words would push "end session" off
   a 320px screen); full screen means nothing on a phone. The trades lose their size containment —
   one column has no neighbour to take its height from — and scroll inside a capped list. The
   keyboard chips name shortcuts, which mean nothing under a finger (measured 2026-09-15: they
   pushed the send button off a 390px screen). */
@media (max-width: 760px) {
  .ck-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "state" "coach" "contract" "trades"; gap: 12px; padding: 14px 0 24px; }
  .ck-panel { padding: 18px 16px; border-radius: 16px; }
  .ck-trades-panel { contain: none; }
  .ck-tape { max-height: 420px; }
  .ck-cmd-kbd { display: none; }
  .ck-navctl { gap: 6px; margin-inline-end: 6px; }
  .ck-navbtn-txt { display: none; }
  .ck-navbtn { width: 34px; height: 34px; padding: 0; }
  #ckFullscreen, .ck-event { display: none; }
  .ck-live-chip { height: 30px; padding: 0 10px; }
  .ck-end { padding-inline: 12px; }
}
/* ⚠️ The narrowest phones — measured at 320: the bar held the logo, LIVE, prep, breathing, "end
   session", the sync light, feedback and the language, and the language left the screen. Here the
   page's 28px gutters shrink to 12 (the cards gain 32px too) and feedback leaves this one bar —
   every other page still has it. */
@media (max-width: 400px) {
  .ck-nav .container, .ck-page > .container { padding-inline: 12px; }
  .ck-nav #tmFeedbackBtn, .ck-nav #ckPrepBtn, .ck-nav #tmEngine { display: none; }
  .ck-navctl { gap: 4px; margin-inline-end: 4px; }
  .ck-navbtn { width: 32px; height: 32px; }
  .ck-live-chip { padding: 0 8px; gap: 5px; }
  .ck-end { padding-inline: 10px; font-size: 0.8rem; }
}
/* The session clock widens LIVE, and at 320 in English ("End session") the language left the screen
   again: the clock steps back on the narrowest phones (measured). */
@media (max-width: 360px) {
  .ck-live-time { display: none; }
}
@media (max-width: 480px) {
  .ck-nav .nav-logo-word { display: none; }
  .ck-state-word { font-size: 1.6rem; }
  .ck-big-pnl { font-size: 1.45rem; }
}
/* ⚠️ The contract card on a phone — measured 2026-09-27. The page's 28px gutter, the card's
   34px padding and the prep recess's 16px left the recess 160px of a 320px screen: the four
   mood buttons were 33px wide (emoji cut in Hebrew, "Stressed" cut up to 390 in English).
   Tighter padding here gives the recess 200px at 320, the same trade .dash-cal and .tmc-box
   make below 560. */
@media (max-width: 560px) {
  .ck-contract-card { padding: 32px 18px; }
  .ck-prep { padding: 14px 12px 4px; }
}
/* ⚠️ The narrowest phones. A trade row still holds its five columns at 320 (the direction is an arrow,
   not a word — the two-line row this needed until 2026-10-09 is gone). Four moods in a row need
   ~240px in English ("Stressed" is 51px); below 380 the recess has 200–260. Two by two, emoji
   beside its word, fits any label at any width. */
@media (max-width: 380px) {
  .ck-tape-head, .ck-trade { gap: 6px; grid-template-columns: 2.7rem minmax(0, 1fr) 1.6rem 1.4rem 3.6rem; }
  /* English reads "12:08 AM" — measured at 320: its cells ran 7px out of the row */
  :root[data-lang="en"] .ck-tape-head, :root[data-lang="en"] .ck-trade { grid-template-columns: 3.7rem minmax(0, 1fr) 1.6rem 1.4rem 3.6rem; }
  .ck-trade { padding: 10px 4px; font-size: 0.8rem; }
  .ck-tape-head { padding-inline: 4px; }
  .ck-prep .mood-selector { flex-wrap: wrap; gap: 8px; }
  .ck-prep .mood-option { flex: 1 1 calc(50% - 4px); flex-direction: row; justify-content: center; gap: 8px; padding: 10px 8px; }
  .ck-prep .mood-emoji { font-size: 1.35rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIRM DIALOG — tmConfirm() in js/chrome.js, available on every page

   Deleting is the only thing in this app that cannot be undone, so nothing
   deletes on one click any more: the box NAMES WHAT WILL GO before it goes.

   Its own .tmc-* prefix rather than settings.html's page-local .confirm-*,
   which is welded to that page's own markup and loads after main.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.tmc-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}
html:not(.anim-off) .tmc-overlay { animation: fadeIn 0.18s ease; }

.tmc-box {
  width: 100%; max-width: 430px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-top, var(--gray-900)), var(--surface, var(--gray-900)));
  border: 1px solid var(--edge, var(--gray-700));
  border-top-color: var(--edge-hi, var(--gray-600));
  border-radius: 16px;
  padding: 26px;
  box-shadow: inset 0 1px 0 var(--lit, var(--tint)), 0 26px 60px -30px var(--shadow-lg);
}

/* ⚠️ Both resolve their own base direction. Measured without it: the title's
   question mark and the paragraph's full stop are NEUTRAL characters closing an
   RTL run against the document's LTR base, so both were thrown to the opposite
   end of the line — `?למחוק את היום הזה`. `plaintext` then re-resolves
   `text-align: start`, which is why these two now sit with the list below them
   instead of against the box's left edge. */
.tmc-title {
  font-family: var(--font-display); font-size: 1.15rem; line-height: 1.32;
  color: var(--white); margin-bottom: 8px;
  unicode-bidi: plaintext; text-align: start;
}
.tmc-text {
  font-size: 0.875rem; line-height: 1.6; color: var(--gray-200); margin: 0 0 16px;
  unicode-bidi: plaintext; text-align: start;
}

/* Each line names one thing that will go. They carry numbers and user-written
   text, so each resolves its own base direction. */
.tmc-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.tmc-list li {
  font-size: 0.85rem; line-height: 1.45; color: var(--white);
  padding: 8px 11px; border-radius: 9px;
  background: var(--surface-sunk, var(--gray-850));
  border: 1px solid var(--hairline, var(--gray-800));
  unicode-bidi: plaintext; text-align: start;
}

.tmc-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* The upgrade dialog (tmUpgrade in js/plan.js, subscriptions stage 3.4) reuses this box. Its lines
   start in Hebrew on purpose, so plaintext resolves them RTL ("במסלול Pro…", never "Pro…"). */
.tmu-line { margin-bottom: 10px; }
.tmu-line:last-of-type { margin-bottom: 18px; }
/* The link a plan refusal carries inside its message (claudeErrorMessage): a real button, so it is
   reachable by keyboard, that reads as a link inside the sentence. */
.tm-upgrade-link {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 600; color: var(--accent, var(--moon));
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tm-upgrade-link:hover { color: var(--white); }
/* The lock a locked control wears in place of its own icon (planLockIcon in js/plan.js). */
.plan-lock-ico { opacity: 0.8; }

/* The journal's own delete-day control, in the page header beside the date. */
.jr-del { color: var(--gray-200); }
.jr-del:hover { color: var(--loss-text, var(--loss)); border-color: var(--loss); }

@media (max-width: 560px) {
  .tmc-box { padding: 20px; }
  .tmc-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARE CARD — js/share-card.js (journal · dashboard · analytics)
   The dialog previews the generated image and offers the phone's share sheet or
   a download. The card itself is drawn on a canvas; nothing here styles it.
   ═══════════════════════════════════════════════════════════════════════════ */
.shc-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(4px);
}
.shc-overlay[hidden] { display: none; }
html:not(.anim-off) .shc-overlay { animation: fadeIn 0.18s ease; }

.shc-box {
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-top, var(--gray-900)), var(--surface, var(--gray-900)));
  border: 1px solid var(--edge, var(--gray-700));
  border-top-color: var(--edge-hi, var(--gray-600));
  border-radius: 16px;
  padding: 20px;
  box-shadow: inset 0 1px 0 var(--lit, var(--tint)), 0 26px 60px -30px var(--shadow-lg);
}
.shc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.shc-title {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--white);
  unicode-bidi: plaintext; text-align: start;
}
.shc-close {
  background: none; border: none; color: var(--gray-200);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 6px; position: relative;
}
.shc-close::after { content: ''; position: absolute; inset: -10px; }
.shc-close:hover { color: var(--white); }
/* the card is always the brand navy, whatever the theme — it is an image */
.shc-img {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 1080 / 1350;
  border-radius: 12px; background: #0B0E14;
  border: 1px solid var(--hairline, var(--gray-800));
}
.shc-img[hidden] { display: none; }
.shc-status {
  aspect-ratio: 1080 / 1350; max-width: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--surface-sunk, var(--gray-900));
  color: var(--gray-200); font-size: 0.9rem;
  unicode-bidi: plaintext;
}
.shc-status[hidden] { display: none; }
.shc-note {
  font-size: 0.8rem; line-height: 1.55; color: var(--gray-200); margin: 12px 0 14px;
  unicode-bidi: plaintext; text-align: start;
}
.shc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.shc-actions .btn { flex: 1 1 auto; justify-content: center; }
.shc-open.mind-share { margin-top: 12px; }
/* .ah-share's spacing lives with the analytics hero (it moved under the verdict, 2026-10). */

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING — pricing.html (subscriptions stage 3.2, 2026-09-27; public since the launch, 4.3)

   REDESIGN 2026-10-07 — built to Daniel's pricing concept: a big centred title, the
   period toggle, three cards of one material with Pro raised and ringed in gold, each
   card's head centred (the name, the price over its period), a hairline, the list on
   round check marks, and a button closing every card (Daniel's choice; the copy is
   his, unchanged). Prices are not P&L, so they stay neutral ink — green and red
   mean money made or lost, never a price tag.
   ═══════════════════════════════════════════════════════════════════════════ */
.pr-page { padding-bottom: 20px; }
/* Centred lines carry no dir: plaintext picks each one's direction from its own
   text, so centring survives the English flip ([dir="rtl"] turns to start). */
.pr-head { text-align: center; padding: 40px 0 6px; }
.pr-title, .pr-sub, .pr-when, .pr-trial, .pr-foot { unicode-bidi: plaintext; }
.pr-title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.pr-sub { max-width: 600px; margin: 12px auto 0; color: var(--gray-200); font-size: 1rem; line-height: 1.6; }
.pr-when { margin: 14px 0 0; color: var(--gray-300); font-size: 0.84rem; }

.pr-period { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.pr-period-note { font-size: 0.8rem; color: var(--gray-200); }
/* The toggle at the concept's size: a pill track with two wide segments (the analytics control,
   enlarged here only). */
.pr-period .a-seg { border-radius: 999px; }
.pr-period .a-seg-btn { min-width: 96px; padding: 9px 22px; border-radius: 999px; font-size: 0.88rem; }

.pr-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  max-width: 1040px; margin: 0 auto; align-items: stretch;
}
/* .pr-grid .pr-card (two classes) so the layout wins over the APP SURFACE
   .card recipe, which comes later in this file; the MATERIAL stays the recipe's. */
/* The three cards share ONE set of rows (subgrid): the name, the price, the yearly saving,
   the line under the price, the list, the button. So the hairline over each list and each
   card's button sit level across the row, as drawn, however many lines a card's
   description takes. A stacked phone layout simply gives each card its own six rows. */
.pr-grid .pr-card {
  position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0;
  align-content: start; min-width: 0;
  border-radius: 16px; padding: 30px 26px 24px; text-align: center;
}
.pr-card > .pr-card-head { grid-row: 1; }
.pr-card > .pr-price     { grid-row: 2; margin-top: 12px; }
.pr-card > .pr-save      { grid-row: 3; margin-top: 2px; }
.pr-card > .pr-lede      { grid-row: 4; margin-top: 12px; }
.pr-card > .pr-list      { grid-row: 5; margin-top: 14px; align-self: start; }
/* start, not end: with buying open the paid buttons carry a note under them, and the buttons
   themselves must stay level across the row (the concept), not the bottoms of the notes. */
.pr-card > .pr-cta       { grid-row: 6; align-self: start; }
/* One material for all three, as drawn (Free was a recess until 2026-10-07). */
.pr-card.pr-card--free {
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: 0 1px 2px var(--shadow-tight);
}
/* Pro: ringed in gold and standing a little taller than its neighbours. */
.card.pr-card.pr-card--pro {
  border-color: var(--moon);
  box-shadow: 0 0 0 1px var(--moon), 0 24px 48px -30px var(--shadow-lg);
}
@media (min-width: 901px) {
  .pr-grid .pr-card.pr-card--pro { margin-block: -10px; padding-top: 40px; padding-bottom: 34px; }
}
.pr-card-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pr-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--white); margin: 0; }
/* The price over its period, centred (the concept). No min-height: side by side the shared row
   already takes the tallest price, and stacked it left Free's lone ₪0 floating over a gap. */
.pr-price { display: flex; justify-content: center; align-items: flex-start; }
.pr-m, .pr-y { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
/* Both prices are in the page; the period on #prPage shows one. */
.pr-page:not([data-period="year"]) .pr-y,
.pr-page[data-period="year"] .pr-m { display: none; }
.pr-amount { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--white); }
/* The shekel sign smaller than the number, on its baseline (the concept). */
.pr-cur { font-size: 0.62em; font-weight: 600; margin-inline-end: 1px; }
.pr-per { font-size: 0.85rem; color: var(--gray-200); }
.pr-save { font-size: 0.74rem; font-weight: 600; color: var(--moon); }
.pr-lede { color: var(--gray-100); font-size: 0.9rem; line-height: 1.55; margin-bottom: 0; unicode-bidi: plaintext; }
/* The list under a hairline, each line on a round check mark at its reading side. */
.pr-list {
  list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 11px; text-align: start;
  color: var(--gray-100); font-size: 0.88rem; line-height: 1.5;
}
.pr-list li { position: relative; padding-inline-start: 30px; }
.pr-list li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: color-mix(in srgb, var(--white) 12%, transparent);
  color: var(--white); font-weight: 700; font-size: 0.66rem; line-height: 1;
}
/* Every card closes on its button (the concept): the sign-up on Free for a signed-out
   visitor, and on the paid cards the honest "soon" until buying opens — drawn as a
   quiet, disabled pill; ?preview=pay puts the real buy button in the same place.
   A column with a gap, so whatever is shown stacks evenly and hidden parts take no room. */
.pr-cta { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; }
.pr-cta-btn { width: 100%; min-height: 44px; justify-content: center; }
.pr-soon {
  display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%;
  border: 1px dashed var(--edge-hi); border-radius: 999px;
  font-size: 0.84rem; font-weight: 600; color: var(--gray-300); cursor: default;
}
.pr-soon[hidden] { display: none; }
/* "Your plan" closes the trader's own card, where its action would be (moved from beside the
   name, 2026-10-09): a solid quiet pill with a check. "Purchasing opens soon" makes no sense
   on a plan you already have, so it gives way. */
.pr-mine {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; width: 100%;
  /* a tint of the ink, not --surface-2 (the card's own white in the light theme, which made it
     read as an outline button): a state, not an action */
  border: 1px solid var(--edge-hi); border-radius: 999px; background: color-mix(in srgb, var(--white) 6%, var(--surface));
  font-size: 0.86rem; font-weight: 600; color: var(--white); cursor: default;
}
.pr-mine::before { content: '✓'; font-size: 0.8em; font-weight: 700; }
.pr-mine[hidden] { display: none; }
.pr-card.is-mine .pr-soon { display: none; }

/* Buying (stage 5.2) — built by the page's script only with ?preview=pay until stage 6.
   Explicit [hidden] rules: .btn sets its own display, which outranks the attribute. */
.pr-buy { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.pr-buy-btn { width: 100%; min-height: 44px; justify-content: center; }   /* the sign-up's height, so the row is level */
.pr-buy-note, .pr-buy-err, .pr-buy-change { margin: 0; font-size: 0.8rem; line-height: 1.5; unicode-bidi: plaintext; }
.pr-buy-note { color: var(--gray-300); }
.pr-buy-err { color: var(--gray-100); }
.pr-buy-err a { color: var(--white); }
.pr-buy-change { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.pr-buy-btn[hidden], .pr-buy-note[hidden], .pr-buy-err[hidden], .pr-buy-change[hidden] { display: none; }

/* The way back from PayPlus: one quiet card above the head, centred like it. */
.pr-pay { max-width: 560px; margin: 26px auto 0; padding: 22px 24px; text-align: center; }
.pr-pay[hidden] { display: none; }
/* No unicode-bidi: plaintext here: "Pro פעיל. החיוב הבא…" opens with a Latin word, so plaintext made
   the Hebrew line LTR and threw its full stop to the front (screenshot, 5.2). The script states the
   direction from the UI language instead. */
.pr-pay-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--white); }
.pr-pay-line { margin: 8px 0 0; color: var(--gray-200); font-size: 0.9rem; line-height: 1.6; }
.pr-pay-line[hidden] { display: none; }
.pr-pay-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pr-pay-actions:not(:has(.btn:not([hidden]))) { display: none; }
.pr-pay-actions .btn[hidden] { display: none; }

.pr-trial { text-align: center; margin: 32px auto 0; color: var(--gray-100); font-size: 0.9rem; }

.pr-compare { max-width: 1040px; margin: 46px auto 0; }
.pr-compare-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--white); margin: 0 0 14px; }
/* The concept's table: a tinted header row, a hairline between the columns, the card's
   own corners clipping both. */
.pr-compare .pr-table-card { padding: 0; overflow: hidden; }
/* fixed: the three plan columns share what the feature column leaves, equally (the concept) */
.pr-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.86rem; }
.pr-table th, .pr-table td { padding: 13px 18px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.pr-table tbody tr:last-child th, .pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-table thead th {
  /* --surface-2 is the card's own white in the light theme: the tint is the ink, faintly */
  padding-block: 14px; background: color-mix(in srgb, var(--white) 5%, var(--surface)); border-bottom-color: var(--edge);
  font-size: 0.86rem; font-weight: 700; color: var(--white); text-align: center;
}
.pr-table thead th.pr-th-feat { width: 40%; text-align: start; font-weight: 600; color: var(--gray-200); }
.pr-table td, .pr-table thead th + th { border-inline-start: 1px solid var(--hairline); }
.pr-table th[scope="row"] { width: 40%; text-align: start; font-weight: 500; color: var(--gray-100); line-height: 1.45; }
.pr-table td { text-align: center; color: var(--gray-100); }
/* A check in the table is information, not the next action: ivory, as drawn. */
.pr-yes { color: var(--white); font-weight: 700; }
.pr-no { color: var(--gray-400); font-size: 1.05rem; line-height: 1; }
.pr-td-plan { display: none; }
.pr-note { font-size: 0.78rem; color: var(--gray-300); margin: 12px 0 0; }
.pr-foot { text-align: center; margin: 40px 0 26px; font-size: 0.82rem; color: var(--gray-300); }

/* One column: Free, Pro, Pro Live in reading order, each at a readable measure. */
@media (max-width: 900px) {
  .pr-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
/* A four-column table cannot hold a sentence at phone width. Each row becomes the
   feature on its own line over three labelled cells — the labels are real
   elements (.pr-td-plan), not attr() content, so the i18n walker translates them. */
@media (max-width: 640px) {
  .pr-title { font-size: 1.7rem; }
  .pr-compare .pr-table-card { padding: 4px 14px; }
  .pr-table, .pr-table tbody { display: block; }
  .pr-table thead { display: none; }
  .pr-table tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    padding: 12px 0; border-bottom: 1px solid var(--hairline);
  }
  .pr-table tbody tr:last-child { border-bottom: 0; }
  .pr-table th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 0 0 4px; border: 0; }
  .pr-table td {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 7px 4px; border: 0; border-radius: 9px; background: var(--surface-sunk);
    font-size: 0.78rem; line-height: 1.35; min-width: 0; overflow-wrap: anywhere;
  }
  .pr-td-plan { display: block; font-size: 0.66rem; font-weight: 600; color: var(--gray-300); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIGN-UP — access.html (subscriptions stage 4.1; the page's default since the launch, 4.3)

   REDESIGN 2026-10-09 — built to Daniel's sign-up concept: a focused nav (the logo and
   the two toggles), the card centred on the page with a big title, a tall email field
   with its mark, one gold button, the gift on a shield at the card's foot, and three
   benefit rows on tiles beside the card — below it when narrower. The code stays ONE
   field (the concept draws a box per digit, but the length is a server setting).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Toggled with `hidden`, stated here because .alert and these blocks set their own display,
   which outranks the attribute. */
#signupHead[hidden], #signupCard[hidden], #signupDone[hidden],
#signupStep1[hidden], #signupStep2[hidden], #signupAlert[hidden], #signupDoneLine[hidden] { display: none; }

.su-page { display: flex; flex-direction: column; }
/* Three columns: the card in the middle one, so it sits at the page's centre as drawn,
   and the benefits in the far one (left in Hebrew, right in English). */
.su-wrap {
  flex: 1 0 auto; width: 100%; max-width: 1240px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px) minmax(0, 1fr);
  column-gap: 56px; row-gap: 40px; align-items: center;
  padding-top: clamp(28px, 7vh, 84px); padding-bottom: 40px;
}
.su-main { grid-column: 2; grid-row: 1; min-width: 0; }

.su-wrap .su-card { padding: 46px 44px 30px; border-radius: 20px; text-align: center; }
html:not(.anim-off) .su-wrap .su-card { animation: tmRise .6s .06s cubic-bezier(.22,.61,.36,1) both; }
.su-title {
  margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--white);
}
.su-sub { margin: 12px 0 0; color: var(--gray-200); font-size: 1.04rem; line-height: 1.6; text-wrap: balance; }

.su-step { display: flex; flex-direction: column; gap: 14px; margin: 30px 0 0; }
/* Moving between the steps: the new one settles in rather than jumping (never with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  html:not(.anim-off) .su-step:not([hidden]) { animation: suStepIn .3s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes suStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.su-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The email field, tall, its mark inside on the right (the address itself is typed LTR). */
.su-field { position: relative; }
.su-wrap .su-input { height: 54px; padding-right: 48px; border-radius: 14px; font-size: 1rem; }
.su-field-ico {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 21px; height: 21px; color: var(--gray-300); pointer-events: none;
}
.su-btn { width: 100%; min-height: 50px; font-size: 1rem; }

.su-sent { margin: 0; color: var(--gray-200); font-size: 0.92rem; line-height: 1.6; text-wrap: balance; }
/* An address has no spaces: without this a long one ran out of the card at 320–360 (lab, 4.1). */
#signupSentTo { color: var(--white); overflow-wrap: anywhere; }
/* The code: one wide field, the digits spaced and centred (the indent balances the spacing
   the last digit carries). */
.su-wrap .su-code {
  height: 60px; border-radius: 14px; text-align: center; text-indent: 0.32em;
  font-size: 1.5rem; font-weight: 600; letter-spacing: 0.32em; font-variant-numeric: tabular-nums;
}
.su-links { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
/* "send again" and the seconds until it opens, as one item (they wrap together). */
.su-resend { display: inline-flex; align-items: center; gap: 2px; }
.su-wait { min-width: 2.6em; font-size: 0.8rem; font-weight: 600; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.su-wait[hidden] { display: none; }
.su-card #signupAlert { margin-top: 16px; text-align: center; }
/* The script's "code sent" note is a bare .alert, which draws a hard ink frame: here it wears a
   quiet tint. Errors keep their own colours. */
.su-card .alert:not(.alert-error) { border-color: var(--edge); background: color-mix(in srgb, var(--white) 5%, var(--surface)); color: var(--gray-100); }

/* The card's foot: the gift on its shield, then the way in for an existing account. */
.su-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; }
.su-gift { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--gray-200); font-size: 0.86rem; line-height: 1.5; }
.su-gift svg { flex: none; width: 18px; height: 18px; color: var(--gray-300); }
.su-signin { margin: 0; color: var(--gray-300); font-size: 0.86rem; }
.su-signin a { color: var(--white); font-weight: 600; }

/* The welcome: a check on a tile, the title, the line, the way on. */
.su-done-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 18px;
  border-radius: 16px; border: 1px solid var(--edge-hi); background: color-mix(in srgb, var(--white) 6%, var(--surface));
  color: var(--moon);
}
.su-done-mark svg { width: 28px; height: 28px; }
.su-done-title { font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
.su-done .su-btn { margin-top: 26px; }

/* What you get: icon tiles on the reading side, the title over two quiet lines. */
.su-points {
  grid-column: 3; grid-row: 1; justify-self: start; max-width: 330px;
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 34px;
}
.su-point { display: flex; align-items: flex-start; gap: 18px; }
.su-point-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 14px; border: 1px solid var(--edge-hi); background: var(--surface); color: var(--white);
}
.su-point-ico svg { width: 28px; height: 28px; stroke-width: 1.5; }
.su-point-body { min-width: 0; padding-top: 2px; }
.su-point-title { margin: 0 0 5px; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--white); line-height: 1.35; text-wrap: balance; }
/* balance: two even lines, not a full line and a stub ("…שלך, לא / לפי הרווח." — pretty did not help) */
.su-point-text { margin: 0; color: var(--gray-200); font-size: 0.9rem; line-height: 1.55; text-wrap: balance; }

.su-legal { margin: 0; padding: 18px 16px 28px; text-align: center; font-size: 0.84rem; color: var(--gray-300); }
.su-legal a { color: var(--gray-200); }

/* Narrower: one column — the card, then the benefits under it at the card's width. 1199, not lower:
   beside the card the benefits need ~270px, or English titles wrap to three lines (lab, 1100). */
@media (max-width: 1199px) {
  .su-wrap { grid-template-columns: minmax(0, 500px); justify-content: center; }
  .su-main { grid-column: 1; grid-row: 1; }
  .su-points { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; gap: 22px; padding: 0 6px; }
}
@media (max-width: 560px) {
  .su-wrap { padding-top: 22px; row-gap: 32px; }
  .su-wrap .su-card { padding: 32px 20px 22px; border-radius: 18px; }
  .su-sub { font-size: 0.92rem; }
  .su-step { margin-top: 24px; }
  .su-point-ico { width: 48px; height: 48px; border-radius: 12px; }
  .su-point-ico svg { width: 22px; height: 22px; }
  .su-point { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP SURFACE — one consolidated layer  (2026-08-01, widened 2026-08-04)

   Started as dashboard + analytics only. Now also carries the generic .card
   and the journal's cards, so every app surface takes ONE recipe from ONE
   place. Add new surfaces to the recipe below — never in a fresh block.

   HISTORY, so nobody re-creates the bug: this single block REPLACED seven
   stacked passes (Analytics 3.0 → Dashboard 3.0 → Moonlight polish → Neutral
   quality → Beauty pass → Cinematic layer → Editorial numbers). Each of those
   redefined the same properties — .chart-card's padding was set three times,
   its shadow three times (the last with !important), its title three times —
   and because every pass was softer than the one before, the rendered result
   was the softest version of every decision ever made. That is what "מרוח"
   (smeared) meant, literally.

   THE RULE FOR ANYONE EDITING THIS FILE: change the value IN PLACE here.
   Do not append a new override block at the end of main.css. If you find
   yourself reaching for !important to win against something above, that is
   the smear returning — fix the original declaration instead.

   BRAND UTILITIES (2026-08-17) live at the top of this block: .gold-metal,
   .cosmic-field and .brand-halo. They are the shared vocabulary of the ad
   creative — metal, deep space, aura — defined once and reused, so no page
   invents its own version of gold.

   The design contract:
     · a card must read as an OBJECT sitting on the page (--surface + --edge),
       never as a slightly-different shade of the background
     · shadows sit CLOSE and create an edge; they are not wide soft halos
     · P&L green/red are DATA — they carry meaning and must stay legible.
       They are not decoration to be muted toward gray
     · one radius, one padding, one type scale — repeated, not re-invented
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   0. BRAND UTILITIES — the creative's vocabulary, defined once
   ───────────────────────────────────────────────────────────────────────────*/

/* METAL. Gold on a headline is never a flat fill: sampling the creative's
   letters returns a highlight, a core and a bronze shadow, and it is the ramp
   between them that reads as metal. Applied to text through background-clip.
   `color: transparent` is the mechanism — anything that resets color on a
   .gold-metal element will silently blank the text. */
.gold-metal {
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* A hairline of the same metal, for borders that should catch light. */
.gold-rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg,
    transparent, var(--gold-low) 18%, var(--gold-hi) 50%, var(--gold-low) 82%, transparent);
  opacity: .55;
}

/* DEEP SPACE. The creative's ground is not flat black — it has depth, drawn
   with a few wide, very low-alpha pools plus fine grain. Built from gradients
   rather than an image so it costs nothing, scales to any viewport and follows
   the theme. Sits behind content; never intercepts the pointer. */
/* (2026-10-05, clean fintech) the pools and the grain are gone — one flat
   ground. The element stays in the landing and the guide. */
.cosmic-field {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}

/* THE AURA. The logo's glow is rebuilt here rather than baked into the asset:
   the artwork's own glow fades into its white field, so any cutout clips it.
   In CSS it follows the theme, stays crisp at every size, costs no bytes — and
   can breathe, which a raster never could. */
.brand-halo { position: relative; display: inline-block; }
/* (2026-10-05, clean fintech) the aura is off: no glow behind the emblem. */
.brand-halo::before { content: none; }
.brand-halo > * { position: relative; }

html:not(.anim-off) .brand-halo::before { animation: haloBreathe 5.2s ease-in-out infinite; }
@keyframes haloBreathe {
  0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. THE CARD RECIPE — the single source of material for both pages
   ───────────────────────────────────────────────────────────────────────────*/

.chart-card,
.metrics-strip,
.card,
.card.dash-cal,
.card.dash-mind,
.analytics-summary-strip .stat-card,
.trade-empty,
.dash-insight,
.summary-card,
.feedback-card,
.question-card,
.method-card,
.settings-card,
.onboard,
.nw-you-card,
.rbc-banner {
  /* CLEAN FINTECH (2026-10-05) — the card is ONE flat fill above the ground
     with a 1px edge you can see, and a shadow so close it only separates. It
     replaced the "one key light" recipe (a top-lit gradient, a lit lip and a
     long cast shadow): Daniel chose flat, calm surfaces. Hierarchy now comes
     from position, size and the one gold mark — not from light. */
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px var(--shadow-tight);
}

/* ─── First-run checklist (#onboardCard) ────────────────────────────────────
   The most important thing on a new trader's screen, so it sits IN the light:
   it takes the card recipe above and then steps up to --surface-top across its
   whole face, against the calendar below it sitting in --surface-shade. The
   hierarchy is the same argument the dashboard already makes — what matters
   most is lit — applied to the one moment when nothing else on the page has
   anything to say yet. */
.onboard {
  background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface) 78%);
  padding: 20px 22px 18px;
  margin-bottom: 22px;
}

.onboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.onboard-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 4px;
  unicode-bidi: plaintext;
  text-align: left;
}

.onboard-sub {
  font-size: 0.8rem;
  color: var(--gray-200);
  margin: 0;
  unicode-bidi: plaintext;
  text-align: left;
}

.onboard-skip {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 4px 6px;
  font-family: var(--font);
  font-size: 0.78rem;
  color: var(--gray-300);
  cursor: pointer;
  transition: color 0.18s ease;
}
.onboard-skip:hover { color: var(--white); }

/* A thin seam rather than a chunky progress bar: it reports, it does not shout. */
.onboard-track {
  height: 2px;
  border-radius: 2px;
  background: var(--surface-sunk);
  overflow: hidden;
  margin-bottom: 16px;
}
.onboard-track-fill {
  height: 100%;
  background: var(--gold-metal, var(--moon));
  transition: width 0.5s cubic-bezier(.22,.61,.36,1);
}
html.anim-off .onboard-track-fill { transition: none; }

.onboard-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.onboard-step {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 12px;
  border-radius: 10px;
  transition: background 0.2s ease;
}
/* Only the step you are actually on is raised; the others stay on the card. */
.onboard-step.is-next { background: var(--tint); }
.onboard-step.is-done { opacity: 0.5; }

.onboard-num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--edge-hi);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-100);
  font-variant-numeric: tabular-nums;
}
.onboard-step.is-next .onboard-num { border-color: var(--moon); color: var(--moon); }
.onboard-step.is-done .onboard-num { border-color: var(--win); color: var(--win); }

.onboard-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.onboard-step-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  unicode-bidi: plaintext;
  text-align: left;
}
.onboard-step.is-done .onboard-step-title { text-decoration: line-through; }

.onboard-why {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gray-200);
  unicode-bidi: plaintext;
  text-align: left;
}

.onboard-go {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--edge-hi);
  background: transparent;
  color: var(--gray-100);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.onboard-go:hover { color: var(--white); border-color: var(--moon); transform: translateY(-1px); }
.onboard-go.primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}
.onboard-go.primary:hover { background: var(--pure-white); border-color: var(--pure-white); color: var(--black); }

@media (max-width: 640px) {
  .onboard { padding: 16px 15px 14px; }
  .onboard-step { flex-wrap: wrap; gap: 10px; }
  .onboard-body { flex: 1 1 100%; order: 2; }
  .onboard-go  { order: 3; width: 100%; text-align: center; }
  .onboard-num { order: 1; }
}
/* ─── News page — "חדר המצב" (news.html + js/news.js) ─────────────────────
   Impact is drawn on a grey → gold → red scale. Red here is DANGER, not money:
   the same language the cockpit already speaks with its calm/caution/stop
   ambient, and the reason the house rule "green and red are money" is not
   violated — there is no P&L on this page for a colour to misreport. */

/* ── Header: the page title and a live clockface ── */
.nw-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.nw-clockface {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding-top: 6px;
}
.nw-cf-time {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  line-height: 1;
}
.nw-cf-date { font-size: 0.72rem; color: var(--gray-300); }

/* ── Hero note: the one line under the buttons (the beta line until the launch, stage 4.3) ── */
.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--gray-200);
  unicode-bidi: plaintext;
}
.hero-note a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-low, var(--gray-600));
}
.hero-note a:hover { border-bottom-color: var(--moon); }
/* Padding would push the underline away from the text, so the target grows
   by a pseudo-element instead. */
.hero-note a { position: relative; }
.hero-note a::after { content: ''; position: absolute; inset: -9px -2px; }

/* ── Nav engine status ──
   ⚠️ Real state only. Green means a sync actually completed this session; it is
   never the default. See initEngineStatus() in js/chrome.js. */
.nav-engine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gray-300);
  unicode-bidi: plaintext;
  white-space: nowrap;
}
.nav-engine i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gray-500);
  flex: 0 0 auto;
}
.nav-engine.is-live { color: var(--win-text); border-color: color-mix(in srgb, var(--win) 40%, transparent); }
.nav-engine.is-live i { background: var(--win); box-shadow: 0 0 0 3px color-mix(in srgb, var(--win) 22%, transparent); }
html:not(.anim-off) .nav-engine.is-live i { animation: navPulse 2.6s ease-in-out infinite; }
@keyframes navPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.nav-engine.is-idle i { background: var(--moon); }
.nav-engine.is-warn { color: var(--moon); border-color: color-mix(in srgb, var(--moon) 40%, transparent); }
.nav-engine.is-warn i { background: var(--moon); }
/* The word is a luxury at nav width; the dot and the tooltip carry it below. */
@media (max-width: 1100px) {
  .nav-engine-word { display: none; }
  .nav-engine { padding: 4px 7px; }
}

/* ── Every trade, as a list (analytics) ──
   The deepest zoom on the page, so it is the densest thing on it. Joins the
   chart-card recipe; only the table itself is new. */
.trade-table-card { grid-column: 1 / -1; }
/* ⚠️ Wide content scrolls INSIDE its own container — the page body must never
   scroll horizontally, which is the rule every wide table here follows. */
.trade-table-scroll {
  overflow-x: auto;
  margin: 4px -4px 0;
  padding: 0 4px;
}
.trade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.trade-table th {
  position: sticky;
  top: 0;
  padding: 8px 10px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray-300);
  background: var(--surface);
  border-bottom: 1px solid var(--edge-hi);
  white-space: nowrap;
  unicode-bidi: plaintext;
}
.trade-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--hairline);
  color: var(--gray-100);
  white-space: nowrap;
}
.tt-row { transition: background .15s ease; }
.tt-row:hover { background: var(--tint); }
/* A hairline of colour at the row edge rather than a tinted row: the P&L cell
   already carries the sign, and tinting the whole row made the table read as a
   heat map of something it was not measuring. */
.tt-row.is-win  td:first-child { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--win) 60%, transparent); }
.tt-row.is-loss td:first-child { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--loss) 60%, transparent); }
/* REDESIGN 2026-10: in Hebrew the table reads right to left — the date first, the
   result last — and every column aligns to the right, numbers too (each figure is
   its own dir="ltr" cell or span, so its sign stays put). The row's hairline
   follows the first cell to the right edge. */
:root:not([data-lang="en"]) .trade-table { direction: rtl; }
:root:not([data-lang="en"]) .trade-table th,
:root:not([data-lang="en"]) .trade-table td { text-align: right; }
:root:not([data-lang="en"]) .tt-row.is-win  td:first-child { box-shadow: inset -2px 0 0 color-mix(in srgb, var(--win) 60%, transparent); }
:root:not([data-lang="en"]) .tt-row.is-loss td:first-child { box-shadow: inset -2px 0 0 color-mix(in srgb, var(--loss) 60%, transparent); }
.tt-date { color: var(--gray-200); }
.tt-sym { font-weight: 600; color: var(--white); letter-spacing: .02em; }
.tt-dir {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  border: 1px solid var(--edge-hi);
  color: var(--gray-200);
  unicode-bidi: plaintext;
}
/* Told apart by fill, not by gold — gold is kept for the next action. */
.tt-dir.short { color: var(--gray-100); background: var(--surface-sunk); border-color: var(--edge); }
.tt-money { font-weight: 600; }
.tt-money.pos, .tt-r.pos { color: var(--win-text); }
.tt-money.neg, .tt-r.neg { color: var(--loss-text); }
/* ⚠️ An em dash, never a zero: a fills-only import has no dollar P&L and a
   trade with no stop has no R. Printing 0 would invent a fact. */
.tt-null { color: var(--gray-400); }
.trade-table-more {
  width: 100%;
  margin-top: 12px;
  padding: 9px;
  border-radius: 9px;
  border: 1px solid var(--edge-hi);
  background: transparent;
  color: var(--gray-200);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
  unicode-bidi: plaintext;
}
.trade-table-more:hover { color: var(--white); border-color: var(--moon); background: var(--tint); }

@media (max-width: 620px) {
  .trade-table { font-size: 0.74rem; }
  .trade-table th, .trade-table td { padding: 7px 8px; }
}

/* ── The execution simulator (landing) ──
   The only section on the landing the visitor OPERATES. It joins the existing
   card recipe and tokens rather than introducing a second material. */
.sim { padding: 92px 0; }
.sim-intro { max-width: 620px; margin: 0 auto 34px; text-align: center; }
.sim-title {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 8px 0 12px;
  unicode-bidi: plaintext;
}
.sim-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray-200);
  margin: 0;
  unicode-bidi: plaintext;
}

.sim-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-top-color: var(--edge-hi);
  background: linear-gradient(180deg, var(--surface-top), var(--surface) 70%);
  box-shadow: inset 0 1px 0 var(--lit), 0 24px 46px -28px var(--shadow-lg);
  backdrop-filter: blur(6px);
}
.sim-controls { padding: 28px 30px; }
/* The readout sits in shade so the controls read as the thing you touch and
   the panel as the thing that answers. */
.sim-readout {
  padding: 28px 30px;
  background: var(--surface-sunk);
  border-inline-start: 1px solid var(--edge);
  transition: border-color .3s ease;
}
.sim-readout.is-W { border-inline-start-color: color-mix(in srgb, var(--win) 55%, transparent); }
.sim-readout.is-L { border-inline-start-color: color-mix(in srgb, var(--loss) 55%, transparent); }

.sim-row { margin-bottom: 20px; }
.sim-label {
  display: block;
  font-size: 0.78rem;
  color: var(--gray-200);
  margin-bottom: 8px;
  unicode-bidi: plaintext;
  text-align: left;
}
.sim-range {
  width: calc(100% - 46px);
  vertical-align: middle;
  accent-color: var(--moon);
  /* 16px tall, under the 24px floor. A range input takes no ::after, so the box
     grows and the negative margin gives the line its height back. */
  height: 30px;
  margin-block: -7px;
}
.sim-out {
  display: inline-block;
  width: 40px;
  text-align: right;
  font-family: var(--font-display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--moon);
}
.sim-behave-label {
  font-size: 0.78rem;
  color: var(--gray-200);
  margin: 24px 0 10px;
  unicode-bidi: plaintext;
  text-align: left;
}
.sim-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-toggle {
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid var(--edge-hi);
  background: transparent;
  color: var(--gray-200);
  font-family: var(--font);
  font-size: 0.78rem;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
  unicode-bidi: plaintext;
}
.sim-toggle:hover { color: var(--white); border-color: var(--gray-400); }
.sim-toggle.on {
  color: var(--loss-text);
  border-color: color-mix(in srgb, var(--loss) 55%, transparent);
  background: color-mix(in srgb, var(--loss) 12%, transparent);
}

.sim-rr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.sim-rr-label {
  font-size: 0.7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-300);
  unicode-bidi: plaintext;
}
.sim-rr-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.sim-grade-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sim-grade {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}
.sim-grade--W { color: var(--win-text);  background: color-mix(in srgb, var(--win) 16%, transparent);  border: 1px solid color-mix(in srgb, var(--win) 45%, transparent); }
.sim-grade--L { color: var(--loss-text); background: color-mix(in srgb, var(--loss) 16%, transparent); border: 1px solid color-mix(in srgb, var(--loss) 45%, transparent); }
.sim-grade-word {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  unicode-bidi: plaintext;
}

.sim-meter {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-shade);
  overflow: hidden;
  margin-bottom: 8px;
}
.sim-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gold-metal, var(--moon));
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
html.anim-off .sim-meter-fill { transition: none; }
.sim-score-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sim-score-label { font-size: 0.72rem; color: var(--gray-300); unicode-bidi: plaintext; }
.sim-score {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--moon);
}
.sim-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sim-reasons li {
  position: relative;
  padding-inline-start: 15px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--gray-100);
  unicode-bidi: plaintext;
  text-align: left;
}
.sim-reasons li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .58em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--loss);
}
.sim-clean {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--win-text);
  margin: 0;
  unicode-bidi: plaintext;
  text-align: left;
}
.sim-note {
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--gray-300);
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  unicode-bidi: plaintext;
  text-align: left;
}

@media (max-width: 760px) {
  .sim { padding: 64px 0; }
  .sim-card { grid-template-columns: 1fr; }
  .sim-readout { border-inline-start: 0; border-top: 1px solid var(--edge); }
  .sim-readout.is-W { border-top-color: color-mix(in srgb, var(--win) 55%, transparent); }
  .sim-readout.is-L { border-top-color: color-mix(in srgb, var(--loss) 55%, transparent); }
  .sim-controls, .sim-readout { padding: 22px 20px; }
}

/* ── Breaking bar ──
   Absent unless something earns it, so when it IS here it should read as an
   interruption rather than as furniture. */
/* Redesigned calmer (2026-10-06, Daniel's choice to keep it on top): a flat
   card with a red edge on the reading side, the word in red beside a pulsing
   dot, the headline, its age at the far end. */
.nw-breaking {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid var(--edge);
  border-inline-start: 3px solid var(--loss);
  background: var(--surface);
}
:root:not([data-lang="en"]) .nw-breaking { direction: rtl; }
/* A scheduled release is a warning, not a shock: same shape, gold instead. */
.nw-breaking.is-event { border-inline-start-color: var(--moon); }
.nw-brk-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--loss-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .02em;
  unicode-bidi: plaintext;
}
.nw-breaking.is-event .nw-brk-tag { color: var(--moon); }
.nw-brk-tag i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.nw-brk-age {
  flex: 0 0 auto;
  margin-inline-start: auto;
  font-size: 0.78rem;
  color: var(--gray-300);
  white-space: nowrap;
}
html:not(.anim-off) .nw-brk-tag i { animation: nwBrk 1.4s ease-in-out infinite; }
@keyframes nwBrk { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.nw-brk-who {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--moon);
}
.nw-brk-text {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
  text-decoration: none;
  unicode-bidi: plaintext;
  text-align: start;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.nw-brk-text:hover { color: var(--moon); }

/* ── THE GLOBAL MARKET ENGINE ──
   A terminal strip: exchange status on one side, the Wall Street countdown on
   the other, and the live tape beneath. It is the page's instrument panel, so
   it is denser and more mechanical than the editorial content below it. */
/* ⚠️ A QUERY CONTAINER: the hours card's room is its OWN width, and that is
   narrow at both ends — on a phone, and again at 981–1099 where the card
   shares the row with the event. Measured 2026-10-06: "New York" ran 14–87px
   into its own hours at 320, 360, 390 (English) and 981–1024, inside a card
   that held them, so an "inside the card" check passed; and at 1024 the
   Hebrew head broke its title and its clock over two lines each. Under 316px
   of content the date leaves the clock and the hours drop under the city
   (the @container block after the exchange rows). */
.nw-engine {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 26px 18px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-tight);
}

/* REDESIGN 2026-10 (the concept) — the top row: the next event beside the
   trading hours. The document never mirrors, so the wide event card is on the
   left and the hours card on the right in both languages. */
.nw-top {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}
@media (max-width: 980px) { .nw-top { grid-template-columns: minmax(0, 1fr); } }
/* The head every card on this page shares: a line mark, the title, a hint. */
.nw-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
:root:not([data-lang="en"]) .nw-card-head { direction: rtl; }
.nw-card-ico { display: inline-flex; flex: 0 0 auto; width: 17px; height: 17px; color: var(--gray-200); }
.nw-card-ico svg { width: 100%; height: 100%; }
.nw-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}
.nw-card-hint { margin-inline-start: auto; font-size: 0.74rem; color: var(--gray-300); }
/* The day's state sits in the week card's head (it was the page header's
   until the page opened on its cards). */
.nw-card-head .nw-daystate { margin: 0; margin-inline-start: auto; font-size: 0.86rem; }
.nw-engine .nw-card-head { margin-bottom: 6px; }

/* ── Exchanges: one row each (built to the concept) ──
   A round flag and the city on the reading side, the regular hours, the state
   light at the far end. A lunch break, a half day or a holiday adds a line. */
.nw-sessions { display: flex; flex-direction: column; }
.nw-mkt {
  display: grid;
  /* The hours in the middle of the row, as drawn: the two sides share what is
     left, and neither shrinks below its own content. */
  grid-template-columns: minmax(min-content, 1fr) auto minmax(72px, 1fr);
  align-items: center;
  gap: 4px 18px;
  padding: 15px 2px;
  border-top: 1px solid var(--hairline);
  font-size: 0.95rem;
}
:root:not([data-lang="en"]) .nw-mkt { direction: rtl; }
.nw-mkt-place { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nw-flag {
  display: inline-flex;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--edge-hi);
}
.nw-flag svg { display: block; width: 100%; height: 100%; }
.nw-mkt-city { font-size: 1rem; font-weight: 600; color: var(--white); white-space: nowrap; }
.nw-mkt-hours { justify-self: center; font-variant-numeric: tabular-nums; color: var(--gray-100); white-space: nowrap; }
.nw-mkt-status { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.nw-mkt-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gray-500);
  flex: 0 0 auto;
}
.nw-mkt-state { font-size: 0.9rem; color: var(--gray-300); unicode-bidi: plaintext; white-space: nowrap; }
.nw-mkt-time {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-300);
}
/* A narrow card: the head keeps one line (the time without its date — the
   week card right below names today), then the flag and city, the hours under
   the city, the state light at the far end across both lines. */
@container (max-width: 315px) {
  .nw-engine .nw-card-title { white-space: nowrap; }
  .nw-mkt {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "place status" "hours status";
    row-gap: 3px;
    padding: 12px 2px;
  }
  .nw-mkt-place { grid-area: place; }
  .nw-mkt-hours { grid-area: hours; justify-self: start; padding-inline-start: 38px; font-size: 0.86rem; color: var(--gray-200); }
  .nw-mkt-status { grid-area: status; }
}
/* Green is OPEN here and that does not break the house rule — there is no P&L
   on this card for a colour to misreport; it is a state light, not money. */
.nw-mkt.is-open .nw-mkt-dot {
  background: var(--win);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--win) 22%, transparent);
}
html:not(.anim-off) .nw-mkt.is-open .nw-mkt-dot { animation: nwMkt 2.4s ease-in-out infinite; }
@keyframes nwMkt { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.nw-mkt.is-open .nw-mkt-state { color: var(--win-text); font-weight: 600; }
.nw-mkt.is-break .nw-mkt-dot { background: var(--moon); }
.nw-mkt.is-break .nw-mkt-state { color: var(--moon); }

/* ── The Wall Street countdown ── */
/* The hours card's slim foot: Wall Street's countdown on the reading side, the
   clock the hours are given in on the far side (its tooltip carries the whole
   note — holidays, half days, Tokyo). The concept's card ends at its rows; this
   is the one line it gained so nothing the old card said was lost. */
.nw-engine-foot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
:root:not([data-lang="en"]) .nw-engine-foot { direction: rtl; }
.nw-wsclock {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.nw-wsclock:empty { display: none; }
.nw-wsclock-label {
  font-size: 0.8rem;
  color: var(--gray-200);
  unicode-bidi: plaintext;
}
/* Tabular digits: the countdown changes every second and must not jitter. */
.nw-wsclock-val {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--moon);
}
.nw-wsclock.is-open .nw-wsclock-val {
  color: var(--win-text);
}

/* ── The live tape ── */
.nw-tickerbar {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 9px 0;
  margin: 0 0 20px;      /* its own strip under the header since 2026-10 */
  /* Fade at both ends so items enter and leave rather than being cut off. */
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.nw-tickerbar-track { display: flex; width: max-content; }
html:not(.anim-off) .nw-tickerbar-track { animation: nwTape 34s linear infinite; }
.nw-tickerbar:hover .nw-tickerbar-track { animation-play-state: paused; }
@keyframes nwTape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* With motion off the tape stops being a marquee and becomes a plain scroller,
   rather than freezing half a row off-screen. */
html.anim-off .nw-tickerbar { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
html.anim-off .nw-tickerbar-track { width: auto; }
html.anim-off .nw-tickerbar-row[aria-hidden="true"] { display: none; }

.nw-tickerbar-row { display: flex; flex: 0 0 auto; }
.nw-tq {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 20px;
  white-space: nowrap;
}
/* A small gold lozenge between assets rather than a plain rule — the tape is
   the page's most-watched strip and earns the detail. */
.nw-tq::after {
  content: '';
  position: absolute;
  inset-inline-end: -2px;
  top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--moon) 55%, transparent);
}
.nw-tq-sym {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gray-300);
}
.nw-tq-last {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

/* A holiday is a closure with a reason, so it borrows the closed styling and
   only the words change. ⚠️ Deliberately NOT a new colour: green/amber on this
   bar are state lights for open/break, and a third hue would imply a third
   trading state that does not exist. */
.nw-mkt.is-holiday { opacity: .72; }
.nw-mkt.is-holiday .nw-mkt-dot { background: var(--gray-400); }
.nw-mkt.is-holiday .nw-mkt-state { color: var(--gray-100); }

.nw-engine-note {
  margin: 0;
  margin-inline-start: auto;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--gray-300);
  unicode-bidi: plaintext;
  cursor: help;
}

.nw-chg { font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.nw-chg.up   { color: var(--win-text); }
.nw-chg.down { color: var(--loss-text); }

/* The hero holds one card: the radar. It fills its column of the top row. */
.nw-hero { container-type: inline-size; display: flex; min-width: 0; margin: 0; }

/* ── THE EVENT RADAR — built to the concept (2026-10-06, second pass) ──
   A head row across the card (what this is · how hard it can move the market),
   the event's name across the card too, then when / what it moves on the
   reading side and the countdown on the far side as large cells. The concept
   draws the name beside the countdown, but it was drawn ~1800px wide: in our
   1100px container that column was ~210px and "מדד המחירים לצרכן (CPI)" broke
   over two lines (three in English). The countdown lives in this card rather
   than inside a dial: a clamp() font in a 1.02 line-height was clipping its
   digits at 1440, 900 and 500 alike.
   The card stretches to the hours card's height. The spare height goes to two
   empty rows, above the name and below the countdown: the head stays level
   with the hours card's head and the event sits centred, in one piece, under
   it. (Spread between every row, a taller hours card — two-line rows at
   981–1080 — left the name floating alone mid-card.) */
.nw-radar {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto 1fr;
  grid-template-areas: "top top" ". ." "title title" "main timer" ". .";
  align-items: center;
  gap: 0 30px;
  padding: 26px 30px 28px;
  border-radius: var(--radius-card);
  border: 1px solid var(--edge);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-tight);
}
:root:not([data-lang="en"]) .nw-radar { direction: rtl; }
.nw-rad-top { grid-area: top; display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 22px; }
.nw-radar > .nw-rad-title { grid-area: title; }
.nw-rad-main { grid-area: main; min-width: 0; }
.nw-radar > .nw-rad-timer { grid-area: timer; }
/* Room for the concept's own arrangement (an event card of 740px and up — a
   1280 screen once the page took the concept's width): the name over its date
   on the reading side, the countdown beside both, centred on them. */
/* ⚠️ These sit ABOVE the base rules they change, so every selector here is one
   step more specific (.nw-radar …): at equal weight the later base rule won,
   and the wider card silently kept the narrow sizes (measured). */
@container (min-width: 740px) {
  .nw-radar {
    grid-template-areas: "top top" ". timer" "title timer" "main timer" ". timer";
  }
  /* Beside the countdown the name has under half the card: a hair smaller,
     and a tighter countdown, keep "Consumer Price Index (CPI)" on one line
     at 1280. */
  .nw-radar > .nw-rad-title { font-size: clamp(1.5rem, 4cqi, 2.5rem); }
  .nw-radar > .nw-rad-timer { gap: 10px; }
  .nw-radar .nw-rad-cell { min-width: 64px; }
}
@container (min-width: 900px) {
  .nw-radar > .nw-rad-timer { gap: 12px; }
  .nw-radar .nw-rad-cell { min-width: 84px; padding: 16px 10px 14px; }
  .nw-radar .nw-rad-num { font-size: 2.5rem; }
}

.nw-rad-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--gray-100);
  unicode-bidi: plaintext;
}
.nw-rad-kicker .nw-card-ico { width: 26px; height: 26px; color: var(--moon); }
.nw-rad-chips { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; }
/* The impact pill: quiet, and its DOTS carry the colour (red / gold / grey), so it
   reads in greyscale too. */
.nw-rad-impact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--edge-hi);
  background: var(--surface-sunk);
  color: var(--gray-100);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  unicode-bidi: plaintext;
}
.nw-rad-impact .nw-dots { gap: 5px; }
.nw-rad-impact .nw-dot { width: 8px; height: 8px; }

.nw-rad-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.4cqi, 2.5rem);   /* of the event card (.nw-hero) */
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 16px;
  unicode-bidi: plaintext;
  text-align: start;
}
/* Date | time. The rule between them belongs to the part AFTER it, so when the
   two wrap onto two lines the rule starts the second line — and the row's
   negative start margin puts every line's first rule outside .nw-rad-when,
   which clips it. (A rule of its own stayed at the end of the first line,
   hanging beside the date.) */
.nw-rad-when {
  overflow: hidden;
  margin-bottom: 0;
  font-size: 0.96rem;
  color: var(--gray-200);
  font-variant-numeric: tabular-nums;
}
.nw-rad-when-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  margin-inline-start: -33px;
}
.nw-rad-when-part { position: relative; display: inline-flex; align-items: center; gap: 9px; margin-inline-start: 33px; }
.nw-rad-when-part::before {
  content: "";
  position: absolute;
  inset-inline-start: -17px;
  top: 50%;
  width: 1px;
  height: 18px;
  margin-top: -9px;
  background: var(--edge-hi);
}
.nw-rad-when-part svg { width: 18px; height: 18px; flex: none; color: var(--gray-300); }

/* ── The countdown: large cells, white digits (the concept) ──
   Each unit is its own cell, so nothing depends on one long string fitting. */
.nw-rad-timer {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  direction: ltr;           /* days → seconds, like any clock */
}
.nw-rad-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 70px;
  padding: 14px 8px 12px;
  border-radius: 14px;
  background: var(--surface-sunk);
  border: 1px solid var(--edge);
}
.nw-rad-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  padding-block: 2px;
  color: var(--white);
}
html:not(.anim-off) .nw-rad-cell:last-child .nw-rad-num { animation: nwTick 1s steps(1) infinite; }
@keyframes nwTick { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .72; } }
.nw-rad-unit {
  font-size: 0.8rem;
  color: var(--gray-300);
  unicode-bidi: plaintext;
}
/* timerCells draws a ":" between cells; the concept has none. */
.nw-rad-sep { display: none; }
/* A red release pulls the digits toward danger as it approaches. */
body.nw-soon .nw-rad-num { color: var(--moon); }
body.nw-imminent .nw-rad-num { color: var(--loss-text); }

/* Narrow: the head, the event, then the countdown sharing the full row. */
@media (max-width: 620px) {
  .nw-radar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "top" "title" "main" "timer";
    gap: 0;
    padding: 20px 18px 22px;
  }
  .nw-rad-top { flex-wrap: wrap; margin-bottom: 16px; }
  .nw-radar > .nw-rad-timer { margin-top: 16px; }
  /* The pill wraps under the kicker on the reading side; date and time stack. */
  .nw-rad-chips { margin-inline-start: 0; }
  .nw-rad-when-row { flex-direction: column; align-items: flex-start; }
  .nw-radar > .nw-rad-timer .nw-rad-cell { flex: 1; min-width: 0; padding: 12px 6px 10px; }
  .nw-rad-num { font-size: clamp(1.45rem, 7vw, 2rem); }
}

.nw-rad-empty {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  color: var(--gray-300);
  margin: 0;
  unicode-bidi: plaintext;
  text-align: start;
}

/* The "+" of News+ — the one touch of gold in an ivory title (2026-10-06). */
.nw-plus {
  color: var(--accent, var(--moon));
  font-weight: 700;
  padding-inline-start: 2px;
}
.nw-approx, .nw-chip {
  display: inline-block;
  font-size: 0.64rem;
  color: var(--gray-300);
  border: 1px dashed var(--edge-hi);
  border-radius: 5px;
  padding: 1px 7px;
  unicode-bidi: plaintext;
}

/* Impact as three dots — readable in greyscale, unlike colour alone. */
.nw-dots { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.nw-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--surface-sunk);
  border: 1px solid var(--edge);
}
.nw-dots.i1 .nw-dot.on { background: var(--gray-400); border-color: var(--gray-400); }
.nw-dots.i2 .nw-dot.on { background: var(--moon);     border-color: var(--moon); }
.nw-dots.i3 .nw-dot.on { background: var(--loss);     border-color: var(--loss); }

/* ── The week ahead — built to the concept (2026-10-06, second pass) ──
   Its own card; seven days in the reading order (today on the right in Hebrew);
   each day its name, its date and a dot per event, centred. What a day holds is
   its tooltip, and the schedule further down shows it when the day is picked. */
.nw-weekcard {
  padding: 22px 24px 24px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-tight);
  margin-bottom: 24px;
}
.nw-weekcard .nw-card-head { margin-bottom: 16px; }
.nw-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
:root:not([data-lang="en"]) .nw-week { direction: rtl; }
.nw-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 84px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: var(--surface-sunk);
  color: inherit;
  font-family: var(--font);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.nw-day:hover { border-color: var(--edge-hi); }
.nw-day.active { border-color: var(--moon); background: color-mix(in srgb, var(--moon) 6%, var(--surface-sunk)); }
.nw-day:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
.nw-day-name { font-size: 0.95rem; font-weight: 500; color: var(--gray-100); }
.nw-day.is-today .nw-day-name { color: var(--white); font-weight: 700; }
.nw-day-num {
  font-size: 0.92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gray-300);
  line-height: 1;
}
.nw-day.is-today .nw-day-num { color: var(--gray-100); }
.nw-day-pips { display: flex; justify-content: center; gap: 6px; min-height: 8px; }
.nw-day-pips i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.nw-day-pips i.i3 { background: var(--loss); }
.nw-day-pips i.i2 { background: var(--moon); }
.nw-day-pips i.i1 { background: var(--gray-400); }

/* ── Headlines: the LIST beside the OPEN story — built to the concept ──
   The list card: a head (title, two quiet filter selects, the LIVE / sample
   mark), the rows — bookmark, then one button that opens the story: title, tone
   tag, source, age — and the honesty line about tone. It replaced the grid of
   story cards and the separate "מבזקים" side card, which listed the same
   headlines twice. The open story sits beside it; on a phone it unfolds under
   its own row instead (.nw-hl-expand). */
.nw-listcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-tight);
}
:root:not([data-lang="en"]) .nw-listcard { direction: rtl; }
.nw-list-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 0 4px 14px; }
.nw-list-title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}
.nw-list-tools { margin-inline-start: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* The containers keep the margins they had as rows of pills above the list. */
.nw-list-tools .nw-cats, .nw-list-tools .nw-tones { margin: 0; }
/* The search (2026-10-06): a quiet pill like the selects beside it. */
.nw-search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--edge-hi);
  background: var(--surface-sunk);
  color: var(--gray-300);
  cursor: text;
}
.nw-search:focus-within { border-color: var(--moon); color: var(--gray-100); }
.nw-search svg { width: 14px; height: 14px; flex: none; }
.nw-search input {
  width: 150px;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  outline: none;
  color: var(--white);
  font: 500 0.82rem var(--font);
}
.nw-search input::placeholder { color: var(--gray-300); }
/* Newer headlines wait here (the live refresh): gold, because it is the next
   thing to do. */
.nw-incoming {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--moon) 55%, transparent);
  background: color-mix(in srgb, var(--moon) 10%, var(--surface));
  color: var(--moon);
  font: 600 0.84rem var(--font);
  cursor: pointer;
}
.nw-incoming:hover { background: color-mix(in srgb, var(--moon) 16%, var(--surface)); }
.nw-incoming:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
.nw-incoming .tm-ico { width: 14px; height: 14px; }
.nw-cats:empty, .nw-tones:empty, .nw-live-slot:empty { display: none; }
/* The two filters: quiet pills with a chevron, not two rows of chips. */
.nw-select {
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  padding: 0 30px 0 13px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background-color: var(--surface-sunk);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9ca1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 10px 6px;
  background-position: right 12px center;
  color: var(--gray-100);
  font: 500 0.78rem var(--font);
  cursor: pointer;
}
:root:not([data-lang="en"]) .nw-select { padding: 0 13px 0 30px; background-position: left 12px center; }
.nw-select:hover { border-color: var(--edge-hi); }
.nw-select:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
.nw-select option { background: var(--surface); color: var(--gray-100); }

.nw-hl-list { display: flex; flex-direction: column; }
/* Level with a taller story, the rows share the height evenly (the concept's
   list fills its card) rather than leaving a gap above the foot. */
.nw-listcard > .nw-stories { flex: 1 1 auto; display: flex; flex-direction: column; }
.nw-stories > .nw-hl-list { flex: 1 1 auto; }
.nw-hl-list > .nw-hl { flex: 1 1 auto; align-items: stretch; }
.nw-hl-list > .nw-hl > .nw-hl-save { align-self: center; }
.nw-hl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-top-color: var(--hairline);
}
.nw-hl-list > .nw-hl:first-child { border-top-color: transparent; }
:root:not([data-lang="en"]) .nw-hl { direction: rtl; }
.nw-hl.is-open {
  border-color: color-mix(in srgb, var(--moon) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--moon) 5%, var(--surface));
}
.nw-hl.is-open + .nw-hl { border-top-color: transparent; }
/* The bookmark: a small square button on the reading side of the row. */
.nw-hl-save {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--edge-hi);
  background: transparent;
  color: var(--gray-200);
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.nw-hl-save::after { content: ''; position: absolute; inset: -7px -4px; }   /* a finger's target */
.nw-hl-save .tm-ico { width: 15px; height: 15px; }
.nw-hl-save:hover { color: var(--white); border-color: var(--gray-400); }
.nw-hl-save.on { color: var(--moon); border-color: var(--moon); }
.nw-hl-save.on .tm-ico { fill: currentColor; }
.nw-hl-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px minmax(0, 92px) 72px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
/* Lifted, so a story unfolded under the row (phones) cannot paint over the ring. */
.nw-hl-main:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--moon); outline-offset: 2px; border-radius: 8px; }
/* Two lines, then an ellipsis: the wire's headlines are long English sentences,
   and one line left a few letters ("Trump s…") beside the columns. */
.nw-hl-title {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gray-100);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  unicode-bidi: plaintext;
  text-align: start;
}
/* A headline is the provider's text and often English; in a Hebrew row it still
   sits by the bookmark, not at the far edge of its cell. */
:root:not([data-lang="en"]) .nw-hl-title { text-align: right; }
.nw-hl-main:hover .nw-hl-title, .nw-hl.is-open .nw-hl-title { color: var(--white); }
/* Already opened on this device: dimmer, so what is new stands out. */
.nw-hl.is-read:not(.is-open) .nw-hl-title { color: var(--gray-300); font-weight: 400; }
.nw-hl-main > .nw-tonetag { justify-self: center; }
.nw-hl-src {
  font-size: 0.8rem;
  color: var(--gray-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nw-hl-age { font-size: 0.78rem; color: var(--gray-300); white-space: nowrap; text-align: end; }

/* The tone TAG every row and the open story wear (the concept): a word and an
   arrow — green / red / grey. On this page red is not money: tone is read off a
   headline's wording, and the note under the list says so. */
.nw-tonetag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.nw-tonetag svg { width: 12px; height: 12px; flex: none; }
.nw-tonetag.t-bull {
  color: var(--win-text);
  border-color: color-mix(in srgb, var(--win) 45%, transparent);
  background: color-mix(in srgb, var(--win) 12%, transparent);
}
.nw-tonetag.t-bear {
  color: var(--loss-text);
  border-color: color-mix(in srgb, var(--loss) 45%, transparent);
  background: color-mix(in srgb, var(--loss) 12%, transparent);
}
.nw-tonetag.t-neutral {
  color: var(--gray-200);
  border-color: var(--edge-hi);
  background: var(--surface-2);
}

/* The open story, beside the list on a wide screen — sticky, so a long list never
   scrolls it out of view. It reads in the STORY's language (renderStories sets the
   class from the headline's own letters): the wire is mostly English. */
.nw-featured {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 28px 28px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: 0 1px 2px var(--shadow-tight);
}
.nw-featured.is-rtl, .nw-hl-expand.is-rtl { direction: rtl; }
.nw-featured.is-ltr, .nw-hl-expand.is-ltr { direction: ltr; }
@media (min-width: 981px) { .nw-featured { position: sticky; top: 76px; } }
/* Level with the folded list, the way out sits at the card's foot, as in the
   concept. A flex column does not collapse margins, so the AI summary drops
   the top margin the paragraph above it already gives. */
.nw-featured > .nw-feat-foot { margin-top: auto; }
.nw-featured > .nw-ai-sum { margin-top: 0; }
/* Its head: "סגירה" on a phone, and the save state as a pill at the far end —
   gold and filled once saved (the concept's "נשמר"). */
.nw-det-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.nw-det-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--gray-200);
  font: 500 0.86rem var(--font);
  cursor: pointer;
}
.nw-det-close:hover { color: var(--white); }
.nw-savepill {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--edge-hi);
  background: transparent;
  color: var(--gray-100);
  font: 600 0.82rem var(--font);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.nw-savepill .tm-ico { width: 14px; height: 14px; }
.nw-savepill:hover { border-color: var(--moon); }
.nw-savepill.on { background: var(--moon); border-color: var(--moon); color: var(--on-accent); }
.nw-savepill.on .tm-ico { fill: currentColor; }
.nw-feat-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  unicode-bidi: plaintext;
  text-align: start;
}
.nw-feat-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
/* The source's monogram (the concept's logo): a solid hue of its own. */
.nw-src-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px; height: 24px;
  margin-inline-end: -4px;
  border-radius: 50%;
  background: var(--hue, #8a8f98);
  color: #fff;
  font: 700 0.72rem var(--font);
  line-height: 1;
}
.nw-src-logo.h-gold   { --hue: #b48a32; }
.nw-src-logo.h-blue   { --hue: #3f6fb5; }
.nw-src-logo.h-green  { --hue: #2f8a5f; }
.nw-src-logo.h-violet { --hue: #7556b0; }
.nw-src-logo.h-rose   { --hue: #b5525f; }
/* ── The countdown that stays (2026-10-06) ──
   Under the nav once the event card has scrolled away. */
.nw-stick {
  position: fixed;
  top: 68px;
  left: 50%;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 32px);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--edge-hi);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px var(--shadow-tight);
  color: var(--gray-100);
  font: 500 0.84rem var(--font);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nw-stick.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
html.anim-off .nw-stick { transition: none; }
:root:not([data-lang="en"]) .nw-stick { direction: rtl; }
.nw-stick:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
.nw-stick .nw-dots { gap: 4px; }
.nw-stick .nw-dot { width: 7px; height: 7px; }
.nw-stick-name {
  min-width: 0;
  max-width: 38vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--white);
  font-weight: 600;
  unicode-bidi: plaintext;
}
.nw-stick-in, .nw-stick-days { color: var(--gray-300); white-space: nowrap; }
.nw-stick-clock {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
body.nw-soon .nw-stick-clock { color: var(--moon); }
body.nw-imminent .nw-stick-clock { color: var(--loss-text); }
@media (max-width: 560px) {
  .nw-stick { top: 64px; padding: 7px 14px; font-size: 0.8rem; }
  .nw-stick-name { max-width: 34vw; }
}
.nw-feat-meta .nw-src { font-size: 0.86rem; font-weight: 600; color: var(--gray-100); letter-spacing: 0; }
.nw-meta-sep { width: 1px; height: 14px; background: var(--edge-hi); }
.nw-feat-meta .nw-age { margin: 0; font-size: 0.84rem; }
.nw-feat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.nw-feat-sum {
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--gray-200);
  margin: 0 0 18px;
  unicode-bidi: plaintext;
  text-align: start;
}
.nw-sample-word { color: var(--gray-300); font-style: italic; font-weight: 400; }
/* The way out: the source in a gold outline pill (the concept's "פתח מקור"), the
   AI summary beside it. */
.nw-feat-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.nw-opensrc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--moon);
  color: var(--moon);
  font: 600 0.86rem var(--font);
  text-decoration: none;
  transition: background .18s;
}
.nw-opensrc svg { width: 16px; height: 16px; flex: none; }
.nw-opensrc:hover { background: color-mix(in srgb, var(--moon) 12%, transparent); }
.nw-feat-foot .nw-act { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 0.84rem; }

/* Category chips: one neutral outline pill (the concept's "כלכלה"). */
.nw-cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--edge-hi);
  color: var(--gray-100);
  font-size: 0.8rem;
  font-weight: 500;
  unicode-bidi: plaintext;
}
.nw-age { font-size: 0.7rem; color: var(--gray-300); margin-inline-start: auto; }
.nw-who {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--moon);
}
.nw-empty { font-size: 0.85rem; color: var(--gray-300); unicode-bidi: plaintext; text-align: start; padding: 10px 6px; }

/* ── On a phone there is no "beside": the list stands alone, and a tapped story
   unfolds under its own row (a second tap, or "סגירה", folds it). ── */
@media (min-width: 981px) { .nw-hl-expand { display: none; } }
@media (max-width: 980px) {
  .nw-featured { display: none; }
  .nw-hl.is-open:not(.is-picked) {
    border-color: transparent;
    border-top-color: var(--hairline);
    border-radius: 0;
    background: none;
  }
  .nw-hl-list > .nw-hl.is-open:first-child:not(.is-picked) { border-top-color: transparent; }
  .nw-hl.is-open:not(.is-picked) + .nw-hl { border-top-color: var(--hairline); }
  .nw-hl.is-picked { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
  .nw-hl-expand {
    margin: 0 0 8px;
    padding: 6px 16px 20px;
    border: 1px solid color-mix(in srgb, var(--moon) 70%, transparent);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: color-mix(in srgb, var(--moon) 5%, var(--surface));
  }
  .nw-hl-expand + .nw-hl { border-top-color: transparent; }
  .nw-hl-expand .nw-feat-title { font-size: 1.2rem; }
  .nw-hl-expand .nw-feat-sum { font-size: 0.92rem; }
}
/* Phone rows: the title takes the row (two lines), the rest sits under it. */
@media (max-width: 560px) {
  .nw-listcard { padding: 16px 12px 10px; }
  /* The title and its LIVE / sample mark stay on one line at 320 in English. */
  .nw-list-head { gap: 8px 8px; }
  .nw-list-title { font-size: 0.98rem; }
  .nw-hl { padding: 0 8px; gap: 4px 10px; }
  .nw-hl-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "title title title" "tone src age";
    gap: 7px 10px;
    padding: 13px 0;
  }
  .nw-hl-title {
    grid-area: title;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* Two lines of an English headline read badly right-aligned: on a phone the
     title takes the whole row anyway, so it follows its own language. */
  :root:not([data-lang="en"]) .nw-hl-title { text-align: start; }
  .nw-hl-main > .nw-tonetag { grid-area: tone; justify-self: start; }
  .nw-hl-src { grid-area: src; }
  .nw-hl-age { grid-area: age; }
}

/* ── Movers ── a card of tiles, like the week (2026-10-06 polish). Three to a
   row: six names used to fall as five and one. */
.nw-moverscard {
  margin-bottom: 30px;
  padding: 20px 24px 22px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-tight);
}
.nw-movers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 1440px) { .nw-movers { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 860px) { .nw-movers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .nw-movers { grid-template-columns: minmax(0, 1fr); } }
.nw-movers.is-sample { opacity: .72; }
.nw-mover {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: var(--surface-sunk);
}
:root:not([data-lang="en"]) .nw-movers { direction: rtl; }
.nw-mover-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nw-mover-sym {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
}
.nw-mover-name { font-size: 0.74rem; color: var(--gray-300); margin-bottom: 6px; }
.nw-mover-why {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--gray-200);
  unicode-bidi: plaintext;
  text-align: start;
}

/* ── The schedule ──
   The picked day's releases, inside the week card under its days (2026-10-06,
   Daniel's choice — it was a card at the foot of the page, and picking a day
   changed it out of sight). Its head: the day's name and the impact filter.
   The rows read in the reading order — the time first (on the right in
   Hebrew), then the impact dots, the release and what it moves. */
.nw-dayplan { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.nw-dayplan-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 2px; }
:root:not([data-lang="en"]) .nw-dayplan-head { direction: rtl; }
.nw-dayplan-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  unicode-bidi: plaintext;
}
.nw-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-inline-start: auto; }
.nw-tape { display: flex; flex-direction: column; }
:root:not([data-lang="en"]) .nw-tape { direction: rtl; }

.nw-row {
  display: flex;
  gap: 16px;
  padding: 14px 4px;
  border-top: 1px solid var(--hairline);
  transition: background .18s ease;
}
.nw-row:first-child, .nw-nowline + .nw-row { border-top: 0; }
.nw-row:hover { background: var(--tint); }
/* Below the now line the day is over: it steps back into shade rather than
   competing with what has not happened yet. */
.nw-row.is-past { opacity: .5; }

.nw-row-time {
  flex: 0 0 52px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-100);
  padding-top: 1px;
}
.nw-row-body { min-width: 0; flex: 1 1 auto; }
.nw-row-top  { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.nw-row-title {
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--white);
  margin: 0;
  unicode-bidi: plaintext;
  text-align: start;
}
.nw-row-why {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gray-200);
  margin: 3px 0 0;
  unicode-bidi: plaintext;
  text-align: start;
}

.nw-nowline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--moon);
}
.nw-nowline::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--moon) 55%, transparent);
}

/* ── The quiet day ── inside the schedule card now: no dashed box of its own. */
.nw-quiet {
  text-align: center;
  padding: 20px 16px 18px;
}
.nw-quiet-mark { color: var(--moon); opacity: .8; margin-bottom: 8px; }
.nw-quiet-mark .tm-ico { width: 22px; height: 22px; }
.nw-quiet-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 6px;
  unicode-bidi: plaintext;
  text-wrap: balance;       /* no lone "השוק" on a phone's second line */
}
.nw-quiet-text {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--gray-200);
  max-width: 440px;
  margin: 0 auto;
  unicode-bidi: plaintext;
}

/* ── You on news days ── a card with its own head (2026-10-06 polish). */
.nw-you-card { padding: 20px 24px 16px; }
.nw-you-card .nw-card-head { margin-bottom: 4px; }
.nw-you-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 70px 56px;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}
.nw-you-row:last-of-type { border-bottom: 0; }
:root:not([data-lang="en"]) .nw-you-row { direction: rtl; }
.nw-you-head {
  font-size: 0.76rem;
  color: var(--gray-300);
  padding-bottom: 6px;
}
.nw-you-label { font-size: 0.88rem; color: var(--white); unicode-bidi: plaintext; text-align: start; }
.nw-you-val, .nw-you-exec, .nw-you-n {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 0.92rem;
  color: var(--gray-100);
}
.nw-money { font-weight: 600; }
.nw-money.pos { color: var(--win-text); }
.nw-money.neg { color: var(--loss-text); }
.nw-you-note {
  font-size: 0.74rem;
  color: var(--gray-300);
  margin: 12px 0 0;
  unicode-bidi: plaintext;
  text-align: start;
}

/* ── The room tightening ───
   Same idea as the cockpit's amb-* vignette, deliberately on its own classes so
   the two pages can never pull on each other's state. */
.nw-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.1s ease;
  background: radial-gradient(ellipse at center, transparent 42%,
    color-mix(in srgb, var(--moon) 20%, transparent) 100%);
}
body.nw-soon .nw-ambient { opacity: .5; }
body.nw-imminent .nw-ambient {
  opacity: .85;
  background: radial-gradient(ellipse at center, transparent 34%,
    color-mix(in srgb, var(--loss) 34%, transparent) 100%);
  animation: nwPulse 2.6s ease-in-out infinite;
}
@keyframes nwPulse { 0%, 100% { opacity: .62; } 50% { opacity: .95; } }
html.anim-off .nw-ambient { transition: none; animation: none; }
html.anim-off body.nw-imminent .nw-ambient { animation: none; }

/* The page's photographic scene (.nw-scene) was retired in the 2026-10 redesign —
   no page carries an atmosphere layer any more. This rule stays: it keeps the
   page's content above the fixed .nw-ambient vignette on every page. */
.page-wrapper { position: relative; z-index: 1; }

/* The page's title: kept for assistive tech and the outline, not drawn — the page
   opens straight on its cards, as the concept is drawn (2026-10-06). */
/* The page opens on its cards, so it gives them the air a title used to. */
/* The page ends with air under its last card; on a phone, enough for the
   floating "שמורים" button not to sit on the last card's foot. */
.nw-page { padding-top: 28px; padding-bottom: 44px; }
/* News+ takes the concept's width (2026-10-06): the concept is a dashboard
   drawn ~1800px wide, and inside 1100px every card was squeezed — the event's
   name could not sit beside its countdown, the headlines broke over two lines.
   The nav widens with the page so the logo stays over the cards' edge. */
.container.nw-page, .container.nav-inner.nw-wide { max-width: 1680px; }
@media (max-width: 560px) { .nw-page { padding-top: 18px; padding-bottom: 84px; } }
.nw-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Category pills ── */
.nw-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
:root:not([data-lang="en"]) .nw-cats,
:root:not([data-lang="en"]) .nw-tones { direction: rtl; }
.nw-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--edge-hi);
  background: var(--surface-shade);
  color: var(--gray-100);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
  unicode-bidi: plaintext;
}
.nw-pill:hover { color: var(--white); border-color: var(--edge-hi); }
/* The chosen filter is a quiet pill like the nav's — gold is kept for the next
   action (redesign 2026-10). */
.nw-pill.active {
  color: var(--white);
  background: var(--surface-2);
  border-color: var(--edge-hi);
}
.nw-pill-n {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

/* ── Sentiment filter bar ──
   ⚠️ Tone is DERIVED from headline wording. The note is part of the control,
   not decoration: it is what stops a reader treating this as a market reading. */
.nw-tones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}
.nw-tone-label {
  font-size: 0.78rem;
  color: var(--gray-300);
  unicode-bidi: plaintext;
}
.nw-tone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--gray-200);
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
  unicode-bidi: plaintext;
}
/* 27px -> 45px tall; 4px a side against the row's 8px gap. Same case as the
   segmented controls above. */
.nw-tone { position: relative; }
.nw-tone::after { content: ''; position: absolute; inset: -9px -4px; }

.nw-tone:hover { color: var(--white); border-color: var(--edge-hi); }
.nw-tone.t-bull.active {
  color: var(--win-text);
  border-color: color-mix(in srgb, var(--win) 55%, transparent);
  background: color-mix(in srgb, var(--win) 12%, transparent);
}
.nw-tone.t-bear.active {
  color: var(--loss-text);
  border-color: color-mix(in srgb, var(--loss) 55%, transparent);
  background: color-mix(in srgb, var(--loss) 12%, transparent);
}
.nw-tone.t-all.active, .nw-tone.t-neutral.active {
  color: var(--white);
  border-color: var(--moon);
  background: var(--tint);
}
/* The honesty line under the list: tone is read off a headline's wording. */
/* The card's foot: the honesty line on the reading side, "עוד N כותרות" on the
   far side (on a phone the button comes first and takes the row). */
.nw-list-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: auto;
  padding: 10px 6px 2px;
  border-top: 1px solid var(--hairline);
}
:root:not([data-lang="en"]) .nw-list-foot { direction: rtl; }
.nw-tone-note {
  margin: 0;
  font-size: 0.74rem;
  color: var(--gray-300);
  unicode-bidi: plaintext;
  text-align: start;
}
.nw-more-slot { margin-inline-start: auto; }
.nw-more-slot:empty { display: none; }
.nw-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--edge-hi);
  background: transparent;
  color: var(--gray-100);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.nw-more:hover { color: var(--white); border-color: var(--gray-400); }
.nw-more:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
.nw-more .tm-ico { width: 13px; height: 13px; transition: transform .2s; }
.nw-more[aria-expanded="true"] .tm-ico { transform: rotate(180deg); }
@media (max-width: 560px) {
  .nw-more-slot { order: -1; flex: 1 1 100%; margin: 0; }
  .nw-more { width: 100%; padding: 11px 14px; }
}
.nw-tonechip {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 1px 7px;
  border-radius: 4px;
  unicode-bidi: plaintext;
}
.nw-tonechip.t-bull { color: var(--win-text);  background: color-mix(in srgb, var(--win) 14%, transparent); }
.nw-tonechip.t-bear { color: var(--loss-text); background: color-mix(in srgb, var(--loss) 14%, transparent); }

/* ── Sector heatmap ── */
.nw-heat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.nw-heat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--heat-col) 30%, transparent);
  background: color-mix(in srgb, var(--heat-col) calc(var(--heat) * 100%), var(--surface-sunk));
}
.nw-heat-name {
  font-size: 0.68rem;
  color: var(--gray-100);
  unicode-bidi: plaintext;
}
.nw-heat-val {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nw-heat-tile.up   .nw-heat-val { color: var(--win-text); }
.nw-heat-tile.down .nw-heat-val { color: var(--loss-text); }

/* ── Skeletons ──
   Gold shimmer while the first fetch is in flight. Without them the sidebar
   sat empty for a second and read as broken rather than as loading. */
.nw-skel {
  border-radius: 9px;
  background: linear-gradient(90deg,
    var(--surface-sunk) 0%,
    color-mix(in srgb, var(--moon) 12%, var(--surface-sunk)) 50%,
    var(--surface-sunk) 100%);
  background-size: 200% 100%;
}
html:not(.anim-off) .nw-skel { animation: nwShimmer 1.5s ease-in-out infinite; }
@keyframes nwShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.nw-skel-tile { height: 46px; }

/* ── Term explainer ── */
.nw-term {
  display: inline;
  padding: 0 1px;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--moon) 65%, transparent);
  background: none;
  color: inherit;
  font: inherit;
  cursor: help;
}
.nw-term:hover { color: var(--moon); }
.nw-term-pop {
  position: absolute;
  z-index: 300;
  max-width: 290px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--moon) 50%, transparent);
  background: color-mix(in srgb, var(--surface-top) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -20px var(--shadow-lg),
              0 0 20px -10px color-mix(in srgb, var(--moon) 60%, transparent);
}
.nw-term-head {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--moon);
  margin-bottom: 4px;
}
.nw-term-body {
  display: block;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--gray-100);
  unicode-bidi: plaintext;
  text-align: start;
}

/* ── Reading-list drawer ── */
.nw-saved-btn {
  position: fixed;
  bottom: 22px;
  inset-inline-end: 22px;
  z-index: 190;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--edge-hi);
  background: linear-gradient(180deg, var(--surface-top), var(--surface));
  color: var(--gray-100);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 16px 32px -18px var(--shadow-lg);
  transition: color .18s, border-color .18s, transform .18s;
  unicode-bidi: plaintext;
}
.nw-saved-btn:hover { color: var(--white); border-color: var(--moon); transform: translateY(-2px); }
.nw-saved-btn .tm-ico { width: 14px; height: 14px; color: var(--moon); }
.nw-saved-count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--moon);
  color: var(--black);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.nw-drawer { position: fixed; inset: 0; z-index: 250; pointer-events: none; }
.nw-drawer-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--black) 62%, transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.nw-drawer-panel {
  position: absolute;
  top: 0; bottom: 0;
  inset-inline-end: 0;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface-top), var(--surface) 40%);
  border-inline-start: 1px solid var(--edge-hi);
  box-shadow: -24px 0 60px -30px var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
/* The document is always dir=ltr, so the panel slides from the right in both
   languages — inset-inline-end resolves to `right` either way. */
.nw-drawer.open { pointer-events: auto; }
.nw-drawer.open .nw-drawer-scrim { opacity: 1; }
.nw-drawer.open .nw-drawer-panel { transform: none; }
html.anim-off .nw-drawer-panel, html.anim-off .nw-drawer-scrim { transition: none; }
body.nw-drawer-open { overflow: hidden; }

.nw-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--hairline);
}
.nw-drawer-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  unicode-bidi: plaintext;
}
.nw-drawer-close {
  background: none;
  border: 0;
  color: var(--gray-300);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.nw-drawer-close:hover { color: var(--white); }
.nw-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 24px; display: grid; gap: 14px; }
.nw-drawer-item {
  padding: 13px 14px;
  border-radius: 11px;
  border: 1px solid var(--edge);
  border-top-color: var(--edge-hi);
  background: var(--surface-shade);
}
.nw-drawer-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.nw-drawer-head a, .nw-drawer-head span:not(.nw-saved-x) {
  flex: 1 1 auto;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
  text-decoration: none;
  unicode-bidi: plaintext;
  text-align: left;
}
.nw-drawer-head a:hover { color: var(--moon); }
.nw-drawer-src { font-size: 0.7rem; color: var(--gray-300); margin-bottom: 8px; }
.nw-drawer-note {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--edge);
  background: var(--surface-sunk);
  color: var(--gray-100);
  font-family: var(--font);
  font-size: 0.78rem;
  line-height: 1.5;
  resize: none;
  field-sizing: content;
  unicode-bidi: plaintext;
  text-align: left;
}
.nw-drawer-note:focus { outline: none; border-color: var(--moon); }

/* ── Feed + side cards ──
   The open story and the list share a row (the document never mirrors: the
   story on the left, the list on the right — the concept). The side cards are a
   row of their own further down the page. */
.nw-layout { display: block; margin-bottom: 34px; }
.nw-feed {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  grid-template-areas: "story list";
  gap: 22px;
  align-items: stretch;
  min-width: 0;
}
/* The list opened past its seven rows: the story keeps its own height and
   stays beside the reader (sticky) instead of stretching down the list. */
.nw-feed.is-more { align-items: start; }
.nw-feed > .nw-featured { grid-area: story; }
.nw-feed > .nw-listcard { grid-area: list; }
@media (max-width: 980px) { .nw-feed { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list"; } }

/* ⚠️ AN EMPTY FEED USED TO LEAVE TWO THIRDS OF THE SCREEN BLANK.
   The wide column is reserved whether or not anything fills it, so with no
   headlines the page showed three words floating in ~900px of nothing. When
   the feed has nothing to say it stops taking the space and the sidebar
   spreads across the full width instead — the same call analytics already
   makes for an empty chart card, which shrinks rather than standing there as
   a tall blank box. This is NOT a workaround for the missing news key: a
   quiet day or a provider outage reaches the same state. */
.nw-layout.is-bare { grid-template-columns: minmax(0, 1fr); }
.nw-layout.is-bare .nw-feed { display: none; }
.nw-layout.is-bare .nw-side {
  position: static;                       /* nothing left to stick beside */
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px;
}
.nw-side {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
  margin-bottom: 30px;
}
/* Two to a row (under 820px of row: three need 3 × 260 + 2 × 20): the third
   card takes the whole second row instead of standing alone in half of it.
   A container query, because a media query counts the scrollbar and this
   row does not. */
@container (max-width: 819px) {
  .nw-side > :nth-child(3) { grid-column: 1 / -1; }
}
.nw-side > .nw-you { min-width: 0; display: flex; }
.nw-side > .nw-you > .nw-you-card { flex: 1 1 auto; min-width: 0; }
/* The mood card reads head first: the gauge's head, the gauge and its ends,
   then the sector tiles, then the honesty line. #nwSentiment lends its children
   to the card so the tiles (#nwHeat) can sit between them — the tiles used to
   open the card, above its title. */
.nw-side-card--heat { display: flex; flex-direction: column; }
.nw-side-card--heat > #nwSentiment { display: contents; }
.nw-side-card--heat .nw-side-head { order: 1; }
.nw-side-card--heat .nw-gauge { order: 2; }
.nw-side-card--heat .nw-gauge-ends { order: 3; }
.nw-side-card--heat > .nw-heat { order: 4; margin: 14px 0 0; }
.nw-side-card--heat .nw-gauge-note { order: 5; margin-top: 12px; }
/* A row of cards reads from the reading side: the mood first, on the right. */
:root:not([data-lang="en"]) .nw-side { direction: rtl; }
.nw-side-card {
  min-width: 0;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--edge);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-tight);
}
:root:not([data-lang="en"]) .nw-side-card { direction: rtl; }
.nw-side-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.nw-side-mark { color: var(--moon); display: flex; }
.nw-side-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  unicode-bidi: plaintext;
}
.nw-side-n {
  margin-inline-start: auto;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-300);
}
.nw-insight-text {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--gray-100);
  margin: 0;
  unicode-bidi: plaintext;
  text-align: start;
}
.nw-insight-text.is-muted { color: var(--gray-300); font-size: 0.79rem; }
/* The insight on the free plan (subscriptions 3.6): the way to the upgrade dialog under the line. */
.nw-insight-lock { margin-top: 10px; }
.nw-side-empty {
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--gray-300);
  margin: 0;
  unicode-bidi: plaintext;
  text-align: start;
}
.nw-saved-x {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--gray-400);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.nw-saved-x:hover { color: var(--loss-text); }

/* ── Header: name, tagline, then the live line ── */
.nw-tagline {
  font-size: 0.9rem;
  color: var(--gray-200);
  margin: 2px 0 0;
  unicode-bidi: plaintext;
  text-align: start;
}
.nw-live-sub {
  font-size: 0.78rem;
  color: var(--gray-300);
  margin: 4px 0 0;
  unicode-bidi: plaintext;
  text-align: start;
}

/* ⚠️ This line is the page's ANSWER to the question people open it for, and
   it was set in the same grey whisper as a caption. It carries a marker and
   real weight now.
   The quiet state stays QUIET on purpose: when nothing is scheduled, "nothing"
   IS the content, and dressing it up would invent drama the calendar does not
   contain. Only a red day earns the accent. */
.nw-daystate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  margin-top: 9px;
  color: var(--gray-100);
}
.nw-daystate::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--gray-400);
}
.nw-daystate.is-hot { color: var(--white); font-weight: 500; }
.nw-daystate.is-hot::before {
  background: var(--loss);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--loss) 22%, transparent);
}


/* ── Bull vs bear gauge ──
   One bar, filled from the bear end toward the bull end, with a hairline at the
   midpoint so "which side of even" is readable without reading the number. */
.nw-gauge {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--loss) 30%, transparent),
    var(--surface-sunk) 50%,
    color-mix(in srgb, var(--win) 22%, transparent));
  overflow: hidden;
  margin-bottom: 8px;
}
.nw-gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--gold-metal, var(--moon));
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}
html.anim-off .nw-gauge-fill { transition: none; }
.nw-gauge-mid {
  position: absolute;
  left: 50%; top: -2px; bottom: -2px;
  width: 1px;
  background: var(--edge-hi);
}
.nw-gauge-ends {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--gray-300);
}
.nw-gauge-bear { color: var(--loss-text); }
.nw-gauge-bull { color: var(--win-text); }
.nw-gauge-mood {
  color: var(--white);
  font-weight: 600;
  unicode-bidi: plaintext;
}
/* The honesty line. It is small, but it is the difference between a derived
   reading and a fabricated one, so it is never dropped for space. */
.nw-gauge-note {
  margin: 9px 0 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--gray-300);
  unicode-bidi: plaintext;
  text-align: start;
}
/* Phone: these notes say what a number is made of — the difference between a
   derived reading and a fabricated one — and at 10.2px / 10.9px they were the
   smallest running text on the site. Placed after both base rules on purpose. */
@media (max-width: 560px) {
  .nw-engine-note, .nw-gauge-note { font-size: 0.75rem; }
}


/* ── Live ticker ── */
.nw-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--loss) 45%, transparent);
  color: var(--loss-text);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.nw-live i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
html:not(.anim-off) .nw-live i { animation: nwLive 1.9s ease-in-out infinite; }
@keyframes nwLive { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Samples must never wear a live badge. */
.nw-live.is-sample {
  color: var(--gray-300);
  border-color: var(--edge-hi);
  letter-spacing: .04em;
}
html:not(.anim-off) .nw-live.is-sample i { animation: none; }

.nw-ticker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-height: 268px;
  overflow-y: auto;
}
.nw-tick-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
  font-size: 0.78rem;
  line-height: 1.45;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--hairline);
}
.nw-tick-item:last-child { border-bottom: 0; padding-bottom: 0; }
.nw-tick-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: var(--moon);
}
.nw-tick-item a, .nw-tick-item span:not(.nw-tick-time) {
  color: var(--gray-100);
  text-decoration: none;
  unicode-bidi: plaintext;
  text-align: left;
}
.nw-tick-item a:hover { color: var(--white); }

/* ── Card actions ── */
.nw-story-foot, .nw-feat-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.nw-src { font-size: 0.72rem; color: var(--gray-300); letter-spacing: .03em; }
/* wrap + flex-end: a row that no longer fits breaks at its own end instead of pushing the card
   sideways — the free plan's locked "Summarize with AI" made it 12px too wide at 320 in English.
   A row that fits is laid out exactly as before. */
.nw-acts { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end; }
.nw-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--edge-hi);
  background: transparent;
  color: var(--gray-200);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s;
  unicode-bidi: plaintext;
  text-align: center;
}
/* Hit area grown by a pseudo-element, not by padding: the control looks and
   lays out exactly as before, only a finger's target gets bigger. */
/* 27px -> 45px tall. Horizontal growth is 4px a side against a 10px gap. */
.nw-act { position: relative; }
.nw-act::after { content: ''; position: absolute; inset: -9px -4px; }

.nw-act:hover {
  color: var(--white);
  border-color: color-mix(in srgb, var(--moon) 60%, transparent);
  background: var(--tint);
}
.nw-act--read { color: var(--moon); }
.nw-act--save { padding: 5px 7px; }
.nw-act--save .tm-ico { width: 13px; height: 13px; }
.nw-act--save.on { color: var(--moon); border-color: var(--moon); background: var(--tint); }
.nw-act--save.on .tm-ico { fill: currentColor; }

/* ── The AI summary on a card ── */
.nw-ai-sum {
  list-style: none;
  margin: 10px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: var(--surface-sunk);
  border-inline-start: 2px solid var(--moon);
  display: grid;
  gap: 6px;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--gray-100);
  unicode-bidi: plaintext;
  text-align: left;
}
.nw-ai-sum li { position: relative; padding-inline-start: 13px; }
.nw-ai-sum li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--moon);
}
.nw-ai-sum.is-loading, .nw-ai-sum.is-error {
  display: block;
  color: var(--gray-300);
  font-size: 0.78rem;
}
.nw-ai-sum.is-error { border-inline-start-color: var(--loss); }

/* REDESIGN 2026-10: the glass and the gold rim on hover are retired — a card is
   read, not pressed. A mover only firms its edge. */
.nw-mover:hover { border-color: var(--edge-hi); }

/* The week on a narrow screen: one scrolling row with snap instead of two to
   four rows of boxes — the week is a sequence. In Hebrew it starts on the right,
   with today in view. */
@media (max-width: 860px) {
  .nw-week {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(124px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .nw-day { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .nw-saved-btn { bottom: 16px; inset-inline-end: 14px; padding: 9px 13px; }
  .nw-header { flex-direction: column; gap: 8px; }
  .nw-clockface { align-items: flex-start; }
  .nw-row { padding: 12px 2px; gap: 12px; }
  .nw-engine, .nw-weekcard { padding: 18px 16px; }
  /* The day's state goes under the title rather than squeezing it onto two lines. */
  .nw-card-head { flex-wrap: wrap; row-gap: 4px; }
  .nw-card-head .nw-daystate { flex-basis: 100%; margin-inline-start: 27px; }
  .nw-moverscard, .nw-you-card { padding: 16px 16px 8px; }
  .nw-moverscard { padding-bottom: 16px; }
  /* The impact filter takes the head's second line, its three parts equal. */
  .nw-dayplan .nw-controls { flex: 1 1 100%; margin: 6px 0 2px; }
  .nw-dayplan .a-seg { display: flex; width: 100%; }
  .nw-dayplan .a-seg-btn { flex: 1 1 0; padding-inline: 4px; font-size: 0.75rem; white-space: nowrap; }
  /* The search takes the list head's own line. */
  .nw-list-tools { flex: 1 1 100%; }
  .nw-search { flex: 1 1 100%; }
  .nw-search input { width: 100%; }
  .nw-row-time { flex-basis: 46px; font-size: 0.86rem; }
  .nw-you-row { grid-template-columns: minmax(0, 1fr) 78px 66px; }
  .nw-you-n { display: none; }
  .nw-radar, .nw-featured { padding: 18px 17px; }
}

/* Hover: lift + a brighter edge. The edge is what reads, not the glow. */
.chart-card,
.metrics-strip,
.card.dash-cal,
.card.dash-mind,
.a-hero,
.rbc-banner {
  transition: transform .26s cubic-bezier(0.22,1,0.36,1), box-shadow .26s, border-color .26s;
}
/* Rising toward the light: the lip brightens and the cast shadow lengthens,
   because the card moved closer to the source — not because a glow was added. */
/* REDESIGN 2026-10: a chart is read, not pressed — hover only firms the edge
   (no lift, no long shadow). */
html:not(.anim-off) .chart-card:hover {
  border-color: var(--edge-hi);
}

/* THE CARD YOU ARE IN. On the method page every card is an equal input, so
   there is no card that is permanently the important one — the important one is
   whichever you are writing in. :focus-within lifts its edge (flat since the
   2026-10-10 redesign — the key light is retired) and leaves the others where
   they are. Not an animation, so it still works under anim-off. */
.method-card:focus-within {
  border-color: var(--edge-hi);
}
/* ⚠️ opacity + transform are the GUIDED REVEAL's transition (.method-card.enter,
   declared earlier in this file). Restating `transition` here would replace it
   and the reveal would snap. Both sets travel together. */
.method-card {
  transition: opacity .5s ease, transform .5s ease,
              background .3s, border-color .3s, box-shadow .3s;
}

/* ─── JOURNAL STEP 3 — hierarchy made of light ───────────────────────────────
   Step 3 is the payoff of the whole flow: the coach read your session and
   answered. It used to render at exactly the same weight as the keep/fix pair
   under it and the recap strip above it — four surfaces, one tone, no entry
   point, on the one screen where the product actually speaks.

   The reading stands IN the key light. What it produced steps back into shade,
   and the closing mantra carries the brand seam. Same three tiers as analytics.
   ───────────────────────────────────────────────────────────────────────────*/
.feedback-card {
  background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface) 72%);
  border-color: var(--edge);
  border-top-color: var(--edge-hi);
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 2px 4px var(--shadow-tight),
    0 26px 44px -22px var(--shadow-lg);
}

.summary-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-shade) 74%);
  box-shadow:
    inset 0 1px 0 var(--lit-soft),
    0 1px 2px var(--shadow-tight),
    0 10px 20px -18px var(--shadow-lg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. ANALYTICS HERO — "your journey"
   ───────────────────────────────────────────────────────────────────────────*/

.a-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 22px;
  padding: 26px 32px 18px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--edge);
  /* REDESIGN 2026-10: flat, like every card (design-system.md, first section).
     The old LIT/BASE/SHADE shadow ladder is retired. */
  box-shadow: 0 1px 2px var(--shadow-tight);
}
:root[data-lang="en"] .a-hero,

[dir="ltr"] .a-hero {
  background:
    var(--surface);
}

.a-hero-glow {
  position: absolute;
  width: 620px; height: 300px; border-radius: 50%;
  top: -46%; inset-inline-start: 14%;
  background: none;
  filter: blur(58px); opacity: 0.3; pointer-events: none;
}

.a-hero-top {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
/* The card's own title reads from the reading side, like the page header. */
:root:not([data-lang="en"]) .a-hero-top { direction: rtl; }
.a-hero-eyebrow { display: flex; flex-direction: column; gap: 3px; }
/* A card title under the page's own h1 (redesign 2026-10): one step down, so
   "אנליטיקס" and "המסע שלך" no longer compete at the same size. */
.ah-eyebrow-title {
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 600;
  color: var(--white); letter-spacing: -0.005em;
}
.ah-eyebrow-sub { font-size: 0.8rem; color: var(--gray-200); letter-spacing: 0.01em; }

/* REDESIGN 2026-10 (the concept): the verdict beside the ring, and under them
   the three numbers as an even row of columns split by hairlines — each with its
   label above and what it was in the previous period below. The concept puts all
   three in ONE row, but it is drawn ~1900px wide; in this ~980px card that row
   left the verdict about 170px (measured by arithmetic before building it).
   A grid with named areas, in the reading direction (right to left in Hebrew),
   so the same DOM restacks on a phone without the flex-basis trap the old row
   had (see the 560px note below). DOM order: stats · verdict · ring. */
.a-hero-main {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "say ring" "stats stats";
  align-items: center;
  gap: 24px 36px;
}
:root:not([data-lang="en"]) .a-hero-main { direction: rtl; }
.ah-say     { grid-area: say; min-width: 0; }
.ah-stats   { grid-area: stats; }
/* The concept's hairline between the statement and the score. */
.ah-ringcol { grid-area: ring; border-inline-start: 1px solid var(--edge); padding-inline-start: 40px; }
.shc-open.ah-share { margin-top: 18px; }

/* The sentence the page exists to say. Serif, because it is prose and not a
   readout — every figure on this page is Inter with tabular numerals, and the
   verdict is the one thing here that is neither. */
.ah-verdict {
  margin: 0;
  /* The sentence ends in a full stop, which is a NEUTRAL character at the end
     of an RTL run inside the document's LTR base — measured, it was thrown to
     the start of the next line (".בתקופה"). plaintext resolves the paragraph
     from its own first strong character, which is the documented site-wide fix;
     it is applied here explicitly because that rule list is keyed to selectors
     and this class is new. The known side effect (text-align: start
     re-resolves) does bite: the paragraph jumped to the right edge while the
     eyebrow above it and the stats below it stayed at the left, and the verdict
     became the one element in the hero not sharing an edge with its siblings.
     Pinned back with text-align, which is the same call already made for
     .page-subtitle / .settings-row-desc / .journal-header-date. Alignment is a
     layout question; plaintext is still what resolves the ORDER.
     REDESIGN 2026-10: the hero now lays out in the reading direction, so the
     side effect is the wanted result — `start` puts a Hebrew verdict on the
     right of its column and an English one on the left, beside the stats. */
  unicode-bidi: plaintext;
  text-align: start;

  font-family: var(--font-display);

  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--white);
  text-wrap: balance;
  max-width: 30ch;
}
.ah-verdict.tone-quiet { color: var(--gray-100); }
/* ⚠️ .ahv-num carries NO colour. .gold-metal paints a gradient behind
   transparent text; any rule that sets `color` on the same element blanks it
   silently, which is exactly what .ah-stat-val's three colour rules would have
   done had the number been put there. */
.ah-verdict .ahv-num { font-weight: 700; }
.ah-verdict .ahv-money { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.ah-verdict.tone-danger .ahv-money { color: var(--loss-text); }

.ah-ringcol { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.ah-ring-wrap { position: relative; width: 132px; height: 132px; }

.ah-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ah-ring-track { fill: none; stroke: color-mix(in srgb, var(--white) 9%, transparent); stroke-width: 10; }
/* ⚠️ The glow reads --ring-tint, which renderHero stamps on the <svg>, and it
   has to be a CUSTOM PROPERTY rather than an inline `filter`: a running
   keyframe animation beats an inline style on the property it animates, so an
   inline filter would have been overwritten by ahGlowPulse the moment
   animations were on — leaving a red arc inside a gold halo. */
.ah-ring-arc {
  fill: none; stroke-width: 10;
  transition: stroke-dashoffset 1.3s cubic-bezier(0.22,1,0.36,1);
}
html.anim-off .ah-ring-arc { transition: none; }
@keyframes ahGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px  color-mix(in srgb, var(--ring-tint, var(--moon)) 30%, transparent)); }
  50%      { filter: drop-shadow(0 0 13px color-mix(in srgb, var(--ring-tint, var(--moon)) 46%, transparent)); }
}


.ah-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ah-ring-center::before {
  content: "";
  position: absolute; width: 66%; height: 66%; border-radius: 50%;
  background: none;
  filter: blur(7px); z-index: -1;

}
.ah-score {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 600;
  color: var(--white); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.ah-score-max { font-size: 0.62rem; color: var(--gray-300); margin-top: 2px; }
/* The ring's label moved into .ah-ring-desc when the ring became evidence: at
   132px the centre holds a number and its denominator, and nothing else. */
.ah-ring-desc { font-size: 0.72rem; color: var(--gray-200); text-transform: uppercase; letter-spacing: 0.11em; font-weight: 600; }

.ah-ring-desc.high { color: var(--win-text); }
.ah-ring-desc.mid  { color: var(--moon); }
.ah-ring-desc.low  { color: var(--loss-text); }

/* Three even columns under a hairline, each split from the next by one. The hero
   lays out in the reading direction, so `inline-start` is the right edge in
   Hebrew: the first number sits at the right, where the verdict starts. */
.ah-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--edge); padding-top: 22px;
}
.ah-stat { position: relative; min-width: 0; padding-inline: 26px; }
.ah-stat:first-child { padding-inline-start: 0; }
.ah-stat:last-child  { padding-inline-end: 0; }
.ah-stat + .ah-stat { border-inline-start: 1px solid var(--edge); }
.ah-stat-val {
  font-family: var(--font-display);
  /* clamped, not fixed: at 2.35rem a five-figure negative net ("-$7,013")
     overflowed its flex item and printed outside the card on a phone. */
  font-size: clamp(1.55rem, 5.2vw, 2.35rem);
  font-weight: 600;
  color: var(--white); line-height: 1; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
}
/* P&L is data: full-strength win/loss text, not a whitened pastel. */
.ah-stat-val.win-color, .ah-stat-val.pos { color: var(--win-text); }
.ah-stat-val.loss-color, .ah-stat-val.neg { color: var(--loss-text); }
/* A dir="ltr" number takes `start` from its own direction — the LEFT — while the
   label above it starts at the right in Hebrew. Same pin as .rbc-num. */
:root:not([data-lang="en"]) .ah-stat-val { text-align: right; }
/* The label leads (the concept): you read what it is, then how much. */
.ah-stat-label { font-size: 0.8rem; font-weight: 500; color: var(--gray-200); margin-bottom: 10px; }
/* What this number was in the same "then" the verdict compared against
   (renderHero → cmp). Quiet: the arrow carries the direction. */
.ah-stat-cmp { margin-top: 10px; font-size: 0.74rem; line-height: 1.45; color: var(--gray-300); }
/* Against the SAME period split the verdict used. An arrow that compared a
   different span than the sentence above it could point the other way on the
   same card — which is why weekTrends is deliberately not used here. */
.ahs-trend { font-size: 0.62rem; margin-inline-end: 6px; letter-spacing: 0; vertical-align: 0.06em; }
.ahs-trend.up   { color: var(--win-text); }
.ahs-trend.down { color: var(--loss-text); }

/* A brand-new trader lands here with nothing to show. The line alone left the
   hero as a 240px void with no way out of it — the one screen in the app with
   no next step. */
.ah-empty {
  color: var(--gray-200); font-size: 0.95rem; padding: 26px 0 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.ah-empty-line { max-width: 44ch; line-height: 1.6; }
.ah-empty-cta { align-self: flex-start; }

.a-hero-journey { position: relative; z-index: 1; height: 104px; margin: 22px -32px -18px; }

.ah-journey-svg { width: 100%; height: 100%; display: block; }
.ah-journey-line {
  fill: none; stroke: var(--moon); stroke-width: 1.75; stroke-linejoin: round;
}
.ah-journey-zero { stroke: var(--edge); stroke-width: 1; stroke-dasharray: 3 4; }
.ah-journey-dot { fill: var(--moon); r: 3; }
/* Peak equity. The distance from here down to the current point is the
   drawdown being lived in — invisible on a line that only shows the level. */
.ah-journey-peak { stroke: color-mix(in srgb, var(--white) 26%, transparent); stroke-width: 1; stroke-dasharray: 2 3; }
.ah-journey-peakdot { fill: color-mix(in srgb, var(--white) 55%, transparent); }

/* ─── Controls (inside the hero header) ─── */
.a-controls { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.a-seg {
  display: inline-flex; padding: 4px; gap: 3px;
  background: var(--surface-sunk);
  border: 1px solid var(--edge); border-radius: 11px;
}
.a-seg-btn {
  appearance: none; border: 0; background: transparent; color: var(--gray-200);
  font-family: var(--font); font-size: 0.8rem; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; letter-spacing: 0.01em;
  transition: color .18s, background .18s, box-shadow .18s, transform .12s;
}
/* Hit area grown by a pseudo-element, not by padding: the control looks and
   lays out exactly as before, only a finger's target gets bigger. */
/* 27–28px -> 45–46px tall; vertical only, the buttons are 3px apart. -9px, not -8:
   English renders the button 27px tall, which left a 43px target (measured on
   pricing.html, 2026-09-27, the second page to reuse this control). */
.a-seg-btn { position: relative; }
.a-seg-btn::after { content: ''; position: absolute; inset: -9px 0; }

.a-seg-unit .a-seg-btn { min-width: 38px; font-family: var(--font-display); }
.a-seg-btn:hover { color: var(--white); }
/* The chosen option is GOLD, site-wide (2026-10-07, Daniel's choice from the settings concept):
   the same rule as settings.html's .seg-btn.seg-on. */
.a-seg-btn.active,
.a-seg-btn.active:hover {
  color: var(--on-accent);
  background: var(--moon);
  box-shadow: none;
}
html.anim-off .a-seg-btn { transition: none; }
html:not(.anim-off) .a-seg-btn:active { transform: translateY(1px); }

/* ─── The trade section as an INSTRUMENT PANEL ───
   Tighter than the rest of the page on purpose. Everything above builds an
   argument at reading pace; this is the part you lean into, and the density
   is what tells you the mode changed. */
.a-panel .analytics-grid { gap: 14px; }
.a-panel .chart-card { padding: 15px 18px 12px; }
.a-panel .chart-card-title { font-size: 0.9rem; margin-bottom: 3px; }
.a-panel .chart-card-sub { font-size: 0.72rem; margin-bottom: 12px; }
.a-panel .chart-wrap { height: 168px; }
.a-panel .chart-card.feature { padding: 19px 22px 15px; }
.a-panel .chart-card.feature .chart-card-title { font-size: 1.12rem; }
.a-panel .chart-card.feature .chart-card-sub { font-size: 0.76rem; margin-bottom: 14px; }
.a-panel .chart-card.feature .chart-wrap { height: 234px; }
.a-panel .analytics-summary-strip { gap: 10px; margin-bottom: 18px; }
.a-panel .analytics-summary-strip .stat-card { padding: 14px 16px; }

/* ─── Journal step 1 — three blocks instead of one ribbon ───
   Measured, the form was 1,898px tall: fourteen field groups stacked in one
   flat column, so logging a single session meant scrolling nearly two screens
   with no sense of where you were. The groups are the product's own model and
   the same three the analytics page is built from — what happened, whether you
   followed the plan, what went through your head. Nothing was removed; the
   short fields simply stopped each taking a full row of their own. */
/* REDESIGN 2026-10-05 (the journal concept): each block is its own card, and the entry
   so far sits in a sticky column beside the form with the one action — save and reflect.
   Steps 2 and 3 keep a reading width. */
.jr-wrap { max-width: 1100px; }
.jr-wrap > .page-header, .jr-wrap > .step-indicator, #step2, #step3 { max-width: 760px; margin-inline: auto; }
.jr-wrap > .page-header { max-width: 1100px; }
.jr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; direction: rtl; }
:root[data-lang="en"] .jr-grid { direction: ltr; }
.jr-grid > * { direction: ltr; }
.jr-form .form-stack { gap: 16px; }
.jr-block { display: flex; flex-direction: column; gap: 18px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-card); padding: 22px 24px; }
.jr-block + .jr-block { margin-top: 0; }
.jr-side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.jr-side-card { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-card); padding: 18px 20px; }
.jr-side-title { font-size: 0.92rem; font-weight: 700; color: var(--pure-white); margin-bottom: 10px; }
.jr-side-rows { display: flex; flex-direction: column; }
.jr-side-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--edge); font-size: 0.84rem; }
.jr-side-row:first-child { border-top: 0; }
.jr-side-k { color: var(--gray-300); white-space: nowrap; }
.jr-side-v { color: var(--white); font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.jr-side-v.empty { color: var(--gray-400); font-weight: 400; }
.jr-side-v.w { color: var(--win-text); } .jr-side-v.l { color: var(--loss-text); }
.jr-side-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 0; border: 0; }
.jr-side-actions .btn { width: 100%; justify-content: center; }
.jr-side-actions .step-hint, .jr-side-actions .kbd-hint { text-align: center; margin: 0; }
@media (max-width: 1000px) {
  .jr-grid { grid-template-columns: minmax(0, 1fr); }
  .jr-side { position: static; }
  .jr-side-card { display: none; }   /* on one column the form above IS the summary */
}
@media (max-width: 560px) { .jr-block { padding: 18px 16px; } }
.jr-block-head { display: flex; align-items: center; gap: 12px; }
.jr-block-n {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--moon);
  background: var(--surface-sunk); border: 1px solid var(--edge);
}
.jr-block-title {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  color: var(--white); white-space: nowrap;
}
.jr-block-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); }
:root[data-lang="en"] .jr-block-line,
[dir="ltr"] .jr-block-line { background: linear-gradient(270deg, var(--edge), transparent); }
.jr-block-note { font-size: 0.72rem; color: var(--gray-300); white-space: nowrap; }

/* The checklist was the single biggest lump in the form — measured, 258px for
   five short rules, each row a 46px slab for a checkbox and four words. It is
   a list the trader ticks in three seconds, not five separate controls. Tighter
   rows and a hairline between them instead of a box around each. */
.jr-block .journal-checklist { gap: 0; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
.jr-block .checklist-item {
  padding: 8px 13px; border-radius: 0;
  background: var(--surface-sunk); border: 0;
  border-bottom: 1px solid var(--edge);
}
.jr-block .checklist-item:last-child { border-bottom: 0; }
.jr-block .checklist-box { width: 18px; height: 18px; border-radius: 5px; font-size: 0.7rem; }
.jr-block .checklist-text { font-size: 0.84rem; }
/* --win-bg, not a color-mix into --surface-sunk: that surface is a warm beige
   on the light theme, and 13% green into beige is olive. Measured, the ticked
   rows came out khaki and read as dirty rather than as done. --win-bg is the
   app's own semantic token and is already tuned for both grounds. */
.jr-block .checklist-item.on { background: var(--win-bg); }

/* The execution notice explains the grade once. It does not need the weight of
   a quoted block every time the page loads. */
.jr-block .exec-notice { font-size: 0.79rem; line-height: 1.6; padding: 10px 13px; }

/* Two short fields share a row. A one-digit trade count does not need 240px. */

.jr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.jr-row > .form-group { margin: 0; }
@media (max-width: 620px) {
  .jr-row { grid-template-columns: 1fr; }
  .jr-block-note { display: none; }
}

/* ─── Emotion cost — ranked rows ───

   The bar diverges from a CENTRE line in money mode, because these values cross
   zero and a magnitude-only bar would draw a $500 gain and a $500 loss
   identically. In % mode nothing is negative, so it grows from the start edge
   and the centre line would be a lie. */
.emo-rows { display: flex; flex-direction: column; }
.emo-row {
  display: grid;
  grid-template-columns: minmax(120px, 165px) 1fr 74px 84px;
  align-items: center; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--edge);
}
.emo-row:last-child { border-bottom: 0; }
/* REDESIGN 2026-10: in the reading order — the emotion's name on the right in
   Hebrew, its price at the far end (the concept). The diverging bar keeps its
   physical number line (losses left of zero) in both languages. */
:root:not([data-lang="en"]) .emo-row { direction: rtl; }
.emo-name { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--gray-100); min-width: 0; }
.emo-emoji { font-size: 1rem; line-height: 1; flex: none; }
.emo-track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
/* The centre line is the zero line, and it has to be visible for a diverging
   bar to mean anything. */
.emo-track.diverging::before {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: var(--edge-hi);
}
.emo-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.emo-track.diverging .emo-fill.pos { left: 50%; background: var(--win); }
.emo-track.diverging .emo-fill.neg { right: 50%; background: var(--loss); }
.emo-track.from-start .emo-fill { inset-inline-start: 0; background: var(--moon); }
.emo-val {
  font-size: 0.86rem; font-weight: 600; text-align: end;
  font-variant-numeric: tabular-nums lining-nums; color: var(--gray-100);
}
.emo-count { font-size: 0.72rem; color: var(--gray-300); text-align: end; white-space: nowrap; }
.emo-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 26px 0 20px; color: var(--gray-200); font-size: 0.8125rem; text-align: center;
}
.emo-empty .no-data-icon { font-size: 1.5rem; opacity: 0.55; line-height: 0; }
@media (max-width: 620px) {
  .emo-row { grid-template-columns: 1fr 68px; gap: 6px 10px; }
  /* Placed, not flowed: with the track spanning the row in DOM order, auto-
     placement put the figure on a THIRD line under the bar, in the name's
     column (measured 2026-10-06 — both at the same x). Name and figure share
     the first line, the bar takes the second. */
  .emo-name  { grid-area: 1 / 1; }
  .emo-val   { grid-area: 1 / 2; }
  .emo-track { grid-area: 2 / 1 / 3 / -1; }
  .emo-count { display: none; }
}

/* ─── The rule-break cost, BESIDE the outcome chart (.a-pair) ───

   REDESIGN 2026-10 — the concept gives the cost of breaking rules its own card
   next to the thesis chart. Until then it was fused INSIDE the chart card under
   a hairline (.rbc-fused); stacked above the chart as a second card it had read
   as the same thing said twice, and side by side it reads as one row, one
   argument. In a ~380px column the standalone recipe's two-column grid has no
   room, so here it is one column: head, number, caption, bars at the foot.
   Still overrides of the one renderer (renderRuleBreakCard) — one producer. */
.a-pair { grid-template-columns: minmax(0, 1fr); }
.a-pair > .chart-card.feature { grid-column: auto; }
/* Two columns only while the cost card is SHOWN: renderRuleBreakCard hides it
   with an inline display:none when there is nothing to price, and the chart then
   takes the whole row instead of leaving a hole beside it. The document never
   mirrors, so the chart is on the left and the card on the right in both
   languages — the concept's placement. */
@media (min-width: 861px) {
  .a-pair:has(> .rbc-side:not([style*="none"])) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.rbc-banner.rbc-side {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  row-gap: 18px;
  margin: 0;
  padding: 24px 24px 22px;
}
.rbc-side .rbc-head, .rbc-side .rbc-hero, .rbc-side .rbc-bars { grid-area: auto; }
/* The card stands as tall as the chart beside it: the number sits in the middle
   of that height, not under the title with a hole above the bars. */
.rbc-side .rbc-hero { align-self: center; }
.rbc-side .rbc-icon { width: 40px; height: 40px; border-radius: 11px; }
.rbc-side .rbc-title { font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--white); }
.rbc-side .rbc-period { font-size: 0.74rem; color: var(--gray-300); }
.rbc-side .rbc-num { font-size: clamp(2.2rem, 3.6vw, 2.9rem); }
.rbc-side .rbc-good-line { font-size: 1.2rem; line-height: 1.35; }
.rbc-side .rbc-caption { font-size: 0.78rem; color: var(--gray-200); max-width: none; margin-top: 6px; }
.rbc-side .rbc-bars { border-top: 1px solid var(--edge); padding-top: 16px; gap: 14px; }
/* Label and value share a line, the track takes the full width under them — the
   phone layout, here at every width because the column is phone-narrow. */
.rbc-side .rbc-bar-row { grid-template-columns: 1fr auto; row-gap: 7px; column-gap: 10px; }
.rbc-side .rbc-bar-track { grid-column: 1 / -1; order: 3; height: 10px; }
.rbc-side .rbc-bar-label, .rbc-side .rbc-bar-val { font-size: 0.78rem; }

/* The page header carries the range / unit / compare controls on its far side
   (the concept puts them above the cards they filter). */
.page-header.a-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap;
}
.a-head-text { min-width: 0; }

/* A small line mark before a chart's title (the concept). It is its own element,
   so the title's text node still translates. The title resolves its direction
   from its words (unicode-bidi: plaintext), so in Hebrew the mark lands on the
   right and the gap belongs on its left. */
.cc-ico {
  display: inline-flex; width: 16px; height: 16px;
  vertical-align: -2px; color: var(--gray-200);
  margin-inline-end: 9px;
}
.cc-ico svg { width: 100%; height: 100%; }
:root:not([data-lang="en"]) .cc-ico { margin: 0 0 0 9px; }

/* ─── THE READS — the page's conclusion, as ROWS ───

   Deliberately not three cards: everything below this point is already a column
   of cards, and a fourth would read as more of the same rather than as the
   thing they add up to. Hairlines between rows, no border around the set. */
/* LIT — the same tier as the hero, and it has to MEASURE the same or the two
   read as different levels of importance. Measured, this sat at lip 41.1
   against the hero's 48.9, which put the page's conclusion a whole tier below
   its headline. Same fill, same lip, same length of cast shadow. */
.a-reads {
  margin: 0 0 26px;
  padding: 20px 26px 16px;
  border-radius: 14px;
  /* 180deg, not the hero's 168: on an element this wide and short a diagonal
     axis means the top edge is never actually --surface-2, which is why the
     first attempt still measured 40.6 — below the feature cards it is supposed
     to outrank.
     The gold wash is the tier marker. The hero and this card are the only two
     surfaces carrying it, and they are exactly the two that make a CLAIM; every
     chart below is evidence and stays neutral. Centred at 50% so it needs no
     [dir="ltr"] flip, unlike the hero's off-centre one. */
  /* A LINEAR veil across the whole top, not a centred radial: a radial at 50%
     never reached the left third of the lip, and measured the card came back at
     42.0 against the feature charts' 42.1 — the same tier it was meant to sit
     above. The lip is where a surface's distance from the light is read, so the
     wash has to cover all of it. */
  /* REDESIGN 2026-10: flat — one fill, one edge, like the hero above it. */
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: 0 1px 2px var(--shadow-tight);
}


.a-reads-head {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--white); margin-bottom: 4px;
}
.a-read {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--edge);
}
.a-read:last-of-type { border-bottom: 0; }
/* The row in the reading order: mark, sentence, then the citation at the far end. */
:root:not([data-lang="en"]) .a-read { direction: rtl; }
.a-read-mark { color: var(--moon); flex: none; font-size: 1rem; line-height: 1; align-self: center; }
.a-read-text {
  flex: 1; min-width: 0;
  font-size: 0.95rem; line-height: 1.6; color: var(--gray-100);
  /* Each sentence resolves its own direction — they mix Hebrew with symbol
     names, money and times, and the trailing full stop is a neutral that lands
     at the wrong end against the document's LTR base without this.
     REDESIGN 2026-10: `start`, not `left` — with plaintext, start follows each
     sentence's own direction, so a Hebrew read sits on the right like the rest
     of the page now does. */
  unicode-bidi: plaintext; text-align: start;
}
/* The citation. This is what separates a conclusion from a horoscope, so it has
   to look pressable rather than decorative. */
.a-read-cite {
  flex: none; cursor: pointer;
  font-family: var(--font); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gray-200);
  background: var(--surface-sunk);
  border: 1px solid var(--edge);
  border-radius: 999px; padding: 5px 12px;
  transition: color .18s, border-color .18s, background-color .18s;
}
.a-read-cite:hover { color: var(--white); border-color: var(--edge-hi); background: var(--surface-2); }
.a-read-cite:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
/* Same trailing-full-stop trap as the verdict: a neutral closing an RTL run
   against the document's LTR base lands at the wrong end of the line. */
.a-reads-note {
  font-size: 0.72rem; color: var(--gray-300); padding-top: 12px; line-height: 1.55;
  unicode-bidi: plaintext; text-align: start;
}
.a-reads-head { unicode-bidi: plaintext; text-align: start; }

/* ⚠️ ON PAPER, GOLD IS A DARKENING — the tier logic inverts.
   Measured in light: the hero came back at lip 246.0 with a NEGATIVE falloff of
   -5.5, and the reads card at 248.2, both BELOW the feature charts they are
   meant to outrank at 253.9. A gold wash over near-white ivory subtracts
   luminance; it cannot lift a surface that is already at 250 of 255.
   There is no headroom above paper, so on the light theme the lit tier is made
   of SHADOW and EDGE, not of fill — which is also what actually happens to
   paper: a sheet closer to the window is not whiter, it just casts further. */
/* Fill only — the cast shadow is now the same in both themes, declared once on
   the base rules. */
:root[data-theme="light"] .a-reads,
:root[data-theme="light"] .a-hero {
  background: var(--surface);
}
/* The gold pool is atmosphere in the dark and a stain on paper — the same call
   already made for the landing's hero art and the breathing overlay. */
:root[data-theme="light"] .a-hero-glow { display: none; }


/* The cited chart answers back. A border pulse, not a glow: the card is being
   pointed at, not lit up. */
@keyframes aCitePulse {
  0%, 100% { border-color: var(--edge); box-shadow: inset 0 1px 0 var(--lit), 0 1px 2px var(--shadow-tight), 0 16px 30px -20px var(--shadow-lg); }
  30%      { border-color: var(--moon); box-shadow: inset 0 1px 0 var(--lit), 0 0 0 3px color-mix(in srgb, var(--moon) 18%, transparent), 0 16px 30px -20px var(--shadow-lg); }
}
html:not(.anim-off) .chart-card.a-cited { animation: aCitePulse 1.3s cubic-bezier(0.4,0,0.2,1) 1; }

@media (max-width: 620px) {
  .a-reads { padding: 16px 18px 14px; }
  .a-read { flex-wrap: wrap; gap: 8px 10px; }
  /* Without a basis the sentence SHRANK beside the button instead of the button
     wrapping — one word per line at 360 in English (screenshot, 2026-10-06). */
  .a-read-text { flex-basis: calc(100% - 40px); }
  .a-read-cite { margin-inline-start: 28px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. SECTION HEADERS + CHART CARDS
   ───────────────────────────────────────────────────────────────────────────*/

.a-section-head { display: flex; align-items: center; gap: 16px; margin: 46px 0 18px; }
/* In the reading order: the title on the right in Hebrew (news.html shares this). */
:root:not([data-lang="en"]) .a-section-head { direction: rtl; }
.a-section-head:first-of-type { margin-top: 10px; }
.a-section-title {
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 600;
  color: var(--white); letter-spacing: 0; white-space: nowrap;
}
.a-section-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); }
:root[data-lang="en"] .a-section-line,
[dir="ltr"] .a-section-line { background: linear-gradient(270deg, var(--edge), transparent); }
.a-section-note { font-size: 0.74rem; color: var(--gray-300); white-space: nowrap; }

/* ⚠️ THIS ONE ONLY APPEARS IN ENGLISH, WHICH IS WHY IT SURVIVED EVERY PREVIOUS
   PASS. The row is title + rule + (note | controls), and both the title and
   the note are `nowrap`. Hebrew is compact enough to fit 390px; the English
   translation of the same note measured 211px against a 390px screen and took
   analytics 80px sideways, the news page 29px. Nothing is wrong with either
   string — the row simply has to be allowed to break on a phone.
   news.html reuses .a-section-head for its schedule header, so this single
   rule is what fixes both pages. */
@media (max-width: 560px) {
  .a-section-head { flex-wrap: wrap; gap: 8px 12px; }
  .a-section-note { white-space: normal; }
  .nw-controls { margin-inline-start: 0; }
}

/* REDESIGN 2026-10: with the section heads gone, the space between two grids is
   the same as the space inside one — the page reads as one grid of cards. */
.analytics-grid { gap: 20px; margin-bottom: 20px; }
.emo-card { margin-bottom: 20px; }
/* One section refuses the 1fr 1fr default — see the comment on the markup.
   The same split as .a-pair above it, so the two rows share their column edge. */
.analytics-grid--split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 860px) { .analytics-grid--split { grid-template-columns: minmax(0, 1fr); } }

/* ─── The comparison layer ───────────────────────────────────────────────────
   The delta line under a chart's subtitle: what this chart's headline number
   was in the previous period.

   ⚠️ NOT a flex row, deliberately. Flex hands placement to `justify-content`,
   which follows the DOCUMENT direction — always ltr here — so a Hebrew line
   would have been pinned to the left while its own text resolved to the right.
   Inline spans in a block let `unicode-bidi: plaintext` resolve the whole line
   from its own first strong character, correct in both languages.

   ⚠️ One quiet tone, no win/loss colour. The arrow carries the direction and
   the numbers carry the size; green and red on this page mean MONEY, and a line
   tinted by direction would put the profit colour on a rising discipline rate. */
.chart-cmp {
  margin: 5px 0 2px;
  font-size: 0.745rem;
  line-height: 1.55;
  color: var(--gray-200);
  unicode-bidi: isolate;
}
/* The line is written in the UI's language, so its base direction is the UI's.
   `plaintext` took it from the first strong letter, and "R ממוצע" starts with a
   Latin R: the whole Hebrew line laid out left to right ("Rלעומת", 2026-10-06).
   Its figures are isolated in _cmpLine. */
:root:not([data-lang="en"]) .chart-cmp { direction: rtl; }
.chart-cmp-arrow { color: var(--moon); font-size: 0.6rem; }
.chart-cmp-label { color: var(--gray-300); font-weight: 600; }
.chart-cmp-body { color: var(--gray-100); }

/* The switch itself. It sits beside the range and unit groups but is a single
   toggle rather than a segmented pair, so it carries its own pill. */
.a-cmp-btn {
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface-sunk);
  padding: 7px 14px;
  white-space: nowrap;
}
.a-cmp-btn:hover { border-color: var(--edge-hi); color: var(--white); }
.a-cmp-btn.active {
  border-color: var(--moon);
  color: var(--white);
  background: color-mix(in srgb, var(--moon) 12%, transparent);
}

.chart-card { position: relative; padding: 20px 22px 16px; }
.chart-card-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--white); text-transform: none; letter-spacing: 0; margin-bottom: 4px;
}
.chart-card-sub { font-size: 0.76rem; color: var(--gray-300); letter-spacing: 0.005em; margin-bottom: 16px; }
.chart-wrap { height: 196px; }
/* A couple of cards want a shorter plot than the default. It lives here and not
   as an inline style, because an inline height OUTRANKS the collapse below —
   which is exactly how two of the eight cards kept their full height on an
   empty page and left the wall of boxes half-standing. */
.chart-wrap--short { height: 168px; }
/* An empty chart collapses to just enough room for its message — a new user's
   page should not be a column of tall blank boxes. */
.chart-card.no-data .chart-wrap { height: 108px; }

.chart-card.no-data .chart-card-sub { margin-bottom: 10px; }

/* ─── THREE LEVELS OF LIGHT ───────────────────────────────────────────────
   Not "feature / not feature" — that said nothing about the page. Three tiers
   that each mean something about the argument:

     LIT    the hero and the reads card   — this is the point
     BASE   the two feature charts        — this is the argument
     SHADE  every supporting chart        — this is the evidence

   ⚠️ Measured before this existed: the feature card was a FLAT FILL — lip 42.6,
   foot 42.6, falloff 0.0 — against a plain card's 42.1 → 30.6. So the "raised"
   card was the one card on the page breaking the one-key-light rule, and its
   lip was indistinguishable from the cards it was supposed to outrank. What
   made it look raised was only that it never fell off.

   All three tiers now carry the falloff. They separate at the LIP, which is
   where the eye reads a surface's distance from the light. */

/* BASE — the standard recipe restored to the feature card, so it is a lit
   surface again rather than a flat panel. */
/* REDESIGN 2026-10: every tier is now the same flat surface (design-system.md,
   first section); the feature card is told apart by its size and its full row,
   not by light. The tier comments above are history. */
.chart-card.feature {
  grid-column: 1 / -1;
  background: var(--surface);
  border-color: var(--edge);
  padding: 26px 30px 20px;
}

/* SHADE — a surface standing back from the light. --surface-shade sits below
   the page ground in dark and just above it in light, which is what "turned
   away from the window" means in each. The cast shadow tightens too: a surface
   further from the source throws a shorter shadow, not just a darker fill. */
.chart-card:not(.feature) {
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-tight);
}

.chart-card.feature .chart-card-title { font-size: 1.32rem; margin-bottom: 5px; }
.chart-card.feature .chart-card-sub { font-size: 0.82rem; color: var(--gray-200); margin-bottom: 20px; }
.chart-card.feature .chart-wrap { height: 290px; }
/* Must come after the line above: same specificity, so source order decides. */
.chart-card.feature.no-data .chart-wrap { height: 130px; }
@media (max-width: 760px) {
  .chart-card.feature { padding: 20px 18px 16px; }
  .chart-card.feature .chart-card-title { font-size: 1.12rem; }
  .chart-card.feature .chart-wrap { height: 230px; }
}

/* ─── Trade summary strip ─── */
.analytics-summary-strip.trade-summary { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .analytics-summary-strip.trade-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .analytics-summary-strip.trade-summary { grid-template-columns: repeat(2, 1fr); } }

/* REDESIGN 2026-10: the tiles in the reading order (the first, the trade count,
   on the right in Hebrew), and labels like the hero's — plain words, not
   letter-spaced capitals. */
:root:not([data-lang="en"]) .analytics-summary-strip { direction: rtl; }
:root:not([data-lang="en"]) .analytics-summary-strip .stat-value,
:root:not([data-lang="en"]) .analytics-summary-strip .stat-label,
:root:not([data-lang="en"]) .analytics-summary-strip .stat-sub { text-align: right; }
.analytics-summary-strip .stat-card { padding: 18px 20px; }
.analytics-summary-strip .stat-label {
  font-family: var(--font);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--gray-200); margin-bottom: 11px;
}
.analytics-summary-strip .stat-value {
  font-family: var(--font-display);
  font-size: 2.05rem; font-weight: 600;
  color: var(--white); line-height: 1; letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums lining-nums;
}
.analytics-summary-strip .stat-value.sv-compact { font-size: 1.5rem; }
/* A pair ("+$1,080 / -$1,550") is two numbers in one tile, so it gets its own
   smaller size and must not wrap — at 1.28rem it broke across lines and left
   the slash stranded at the end of the first row. */
.analytics-summary-strip .stat-value.sv-pair { font-size: 1.08rem; line-height: 1.3; letter-spacing: 0; white-space: nowrap; }
.analytics-summary-strip .stat-value .sv-slash { color: var(--gray-300); font-weight: 400; margin: 0 2px; }
.analytics-summary-strip .stat-sub { font-size: 0.72rem; color: var(--gray-200); margin-top: 9px; font-variant-numeric: tabular-nums; }
.analytics-summary-strip .stat-value.win-text  { color: var(--win-text); }
.analytics-summary-strip .stat-value.loss-text { color: var(--loss-text); }
/* renderTradeSummary tags values with .win-color / .loss-color, but the only
   rule for those in the whole stylesheet was `.stat-value.win-color` — which
   never matched the CHILD spans of the biggest/worst pair, and `.loss-color`
   was not defined anywhere at all. Both now resolve inside the strip. */
.analytics-summary-strip .win-color, .dir-split .win-color { color: var(--win-text); }
.analytics-summary-strip .loss-color, .dir-split .loss-color { color: var(--loss-text); }

/* Long/short split — demoted from a whole chart card (two bars and an axis) to
   a slim full-width bar at the foot of the summary strip. */
/* No card chrome: a full-width card for one thin bar would waste a lot of
   height. It reads as an annotation row under the tiles instead. */
.dir-split { padding: 4px 2px 0; }
.dir-split-label {
  font-size: 0.78rem; font-weight: 500; color: var(--gray-200); margin-bottom: 10px;
}
.dir-split .sv-split { margin-top: 0; }
/* The bar splits the trade COUNT, not money, so it wears two neutrals: green and
   red mean money on this site, and a profitable short side painted red said it
   lost (2026-10-06). The money is in the legend, coloured by its own sign. */
.sv-split { display: flex; gap: 2px; height: 7px; border-radius: 4px; overflow: hidden; background: var(--surface-sunk); }
.sv-split-l { background: var(--gray-300); }
.sv-split-s { background: color-mix(in srgb, var(--gray-300) 42%, transparent); }
.sv-split-legend { display: flex; justify-content: space-between; gap: 8px; font-size: 0.68rem; color: var(--gray-200); margin-top: 7px; font-variant-numeric: tabular-nums; }

/* ─── Trade-analytics empty state ─── */
.trade-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 48px 28px;
  border-style: dashed;
}
.trade-empty-icon { color: var(--gray-300); opacity: 0.85; line-height: 0; }

.trade-empty-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); }
.trade-empty-sub { font-size: 0.9rem; color: var(--gray-200); max-width: 460px; line-height: 1.6; }
.trade-empty-how {
  margin: 4px 0 2px; padding: 0; list-style: none; counter-reset: teh;
  display: flex; flex-direction: column; gap: 9px;
  /* Wide enough that each step holds one line in BOTH languages — an inline
     marker gives no hanging indent, so a wrapped step returns to the container
     edge and the list goes ragged. */
  max-width: 540px; text-align: start;

}
.trade-empty-how li {
  counter-increment: teh;
  font-size: 0.85rem; line-height: 1.7; color: var(--gray-100);
  unicode-bidi: plaintext;
}
/* ⚠️ The marker is an INLINE box in the text flow, not an absolutely positioned
   one. `inset-inline-start` follows the element's CSS `direction`, which stays
   LTR on every page of this app — so an absolute marker sat on the left of a
   Hebrew line, i.e. at the END of the sentence it was numbering. In the flow the
   bidi algorithm places it at the reading start of whatever language the line
   turns out to be. Same fix as .seq-q-tag on the landing: stop using position
   for something that is a question of reading order. */
.trade-empty-how li::before {
  content: counter(teh);
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  margin-inline-end: 9px; vertical-align: -0.28em;
  font-size: 0.66rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--moon);
  background: var(--surface-sunk); border: 1px solid var(--edge);
  unicode-bidi: isolate;
}

.trade-empty-cta { margin-top: 6px; }

/* ─────────────────────────────────────────────────────────────────────────────
   4. DASHBOARD — metrics strip, insight line, calendar, mind card
   ───────────────────────────────────────────────────────────────────────────*/

/* The strip is a column: the metric row + the cumulative-P&L sparkline. */
.metrics-strip { display: flex; flex-direction: column; gap: 16px; padding: 22px 28px; margin-bottom: 22px; }

/* Hierarchy: ONE lead metric, the rest supporting. Execution leads on purpose —
   the product's thesis is that following the plan outranks the P&L. */
.metrics-row {
  display: grid;
  grid-template-columns: 1.5fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
}
.metric { text-align: center; transition: transform .26s cubic-bezier(0.22,1,0.36,1); }
.metric-val { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }
/* Execution leads because following the plan outranks what the P&L happened to
   do — that is the product's argument. It only reads as leading if the others
   step back, so they are set smaller and dimmer rather than the lead simply
   being set larger. */
.metric.lead .metric-val { font-size: clamp(2.6rem, 5vw, 3.9rem); font-weight: 600; }
.metric.lead .metric-label { color: var(--gray-100); }
.metric:not(.lead) .metric-val { font-size: clamp(1.5rem, 2.5vw, 2.05rem); }
.metric:not(.lead) { opacity: 0.86; }
.metric-label { font-size: 0.66rem; letter-spacing: 0.13em; color: var(--gray-300); }
.metric-div { background: var(--edge); height: 46px; }
.metric-trend { font-size: 0.62rem; vertical-align: middle; margin-inline-start: 3px; }
.metric-trend.up   { color: var(--win-text); }
.metric-trend.down { color: var(--loss-text); }
html:not(.anim-off) .metric:hover { transform: translateY(-2px); }

.metrics-spark { height: 52px; margin: 2px -6px -4px; }
.metrics-spark svg { width: 100%; height: 100%; display: block; }
.msp-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.msp-zero { stroke: var(--edge); stroke-width: 1; stroke-dasharray: 3 4; }
.msp-peak { fill: none; stroke: var(--edge-hi); stroke-width: 1; stroke-dasharray: 2 3; }
.msp-peakdot { fill: var(--gray-100); }
@media (max-width: 880px) {
  .metrics-row { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .metrics-row .metric-div { display: none; }
  .metric.lead .metric-val { font-size: 2.2rem; }
}

/* Top data-driven insight line */
.dash-insight {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; margin-bottom: 22px;
  border-inline-start: 3px solid var(--moon);
  border-radius: 12px;
}
/* ─── LINE ICONS — the house glyph, replacing the decorative emoji ─────────
   Emoji are full-colour artwork the theme cannot touch, so the bulb, flame,
   target and scroll rendered as saturated stickers on a gold-and-monochrome
   page — the same reason all nine were removed from the landing. These are 16px
   line marks in the site's own style: stroke currentColor at 1.3, round caps.
   Because they inherit `color`, each takes the tone of whatever it sits in.
   ⚠️ Functional alert glyphs (the stop sign in the circuit breaker and in the
   guardian's limit list) are NOT icons — they are signs, and they stay. */
.tm-ico {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.14em;
  color: inherit;
}
.dash-insight-icon .tm-ico  { color: var(--moon); }
.mind-streak-flame .tm-ico  { color: var(--moon); }
.mind-contract-icon .tm-ico { color: var(--moon); }

.dash-insight-icon { font-size: 1.1rem; flex-shrink: 0; }
.dash-insight-text { font-size: 0.92rem; color: var(--white); line-height: 1.5; }

/* ─── Duo cards: the discipline card stands IN the light ─────────────────────
   The page used to be democratic — metrics, calendar and discipline all at the
   same visual weight, which left the eye no entry point and gave a one-second
   cut nothing to land on. Under the one-key-light rule the hierarchy is made of
   light, not size: the discipline card is nearer the source (brighter surface,
   brighter lip, a longer cast shadow), and the calendar sits a step back in
   shade. It is also the product's own argument — following the plan outranks
   what the P&L did — so it is the correct thing to put in the light. */
.card.dash-cal, .card.dash-mind { position: relative; }

/* The gap between the two is the whole point. A page where everything is lit
   to roughly the same degree reads as evenly lit, which is the opposite of
   cinematic — so the hero goes brighter AND the supporting card goes into
   real shade, below the default surface. Widening that gap is what buys the
   focal point; matching them is what lost it. */
.card.dash-mind {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-top) 66%);
  border-top-color: var(--edge-hi);
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 2px 4px var(--shadow-tight),
    0 34px 60px -28px var(--shadow-lg);
  justify-content: center;   /* the calendar is taller; centring the column
                                splits the slack instead of pooling it into a
                                dead band under the streak strip */
}
.card.dash-cal {
  background: var(--surface);
  border-top-color: var(--edge);
  box-shadow:
    inset 0 1px 0 var(--lit-soft),
    0 1px 2px var(--shadow-tight),
    0 12px 22px -20px var(--shadow-lg);
}

/* The ring is the object the eye lands on, so it is sized to be found in a
   one-second cut, not merely to fit its column. Width and height must move
   together on BOTH the wrapper and the svg — the svg carries explicit
   dimensions, so scaling only the wrapper leaves the ring at 168. */
.dash-mind .disc-gauge-wrap,
.dash-mind .disc-gauge { width: 212px; height: 212px; }
/* The TIER is what the ring is scaled up for, not the figure. This rule used
   to enlarge `.disc-num` to 3.9rem, from when the number was the focal point;
   it beat the smaller size set earlier in the file purely by coming later, so
   moving the word into the ring was not enough on its own. */
.dash-mind .disc-tier { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.dash-mind .disc-num-sm { font-size: 0.86rem; }
.dash-mind .disc-title { font-size: 0.76rem; letter-spacing: 0.12em; }

.dash-mind .disc-gauge-wrap::before { display: none; }   /* the old blurred blob — never bring it back */
.dash-mind .disc-gauge { position: relative; z-index: 1; }
.dash-mind .disc-center { z-index: 1; }                  /* z-index ONLY — it is position:absolute for centering */
.disc-gauge-wrap .disc-arc { transition: stroke-dashoffset 1.1s cubic-bezier(0.22,1,0.36,1); }
html.anim-off .disc-gauge-wrap .disc-arc { transition: none; }

/* ─── Calendar: crisp wells inside the card ─── */
.calendar-grid { gap: 6px; }
.cal-day {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--edge);
  background: var(--surface-sunk);
  color: var(--gray-200);
  transition: transform .16s cubic-bezier(0.22,1,0.36,1), border-color .16s, background .16s;
}
.cal-day.win  { background: color-mix(in srgb, var(--win) 16%, var(--surface-sunk));  border-color: color-mix(in srgb, var(--win) 38%, transparent); color: var(--gray-50); }
.cal-day.loss { background: color-mix(in srgb, var(--loss) 16%, var(--surface-sunk)); border-color: color-mix(in srgb, var(--loss) 38%, transparent); color: var(--gray-50); }
.cal-day.be   { background: var(--surface); border-color: var(--edge); color: var(--gray-200); }
.cal-day.notrade { background: var(--surface-sunk); border-color: var(--edge); }
.cal-day.empty { background: transparent; border-color: transparent; }
/* Depth axis: days that hold nothing recede almost into the page, so the days
   that DO hold something are what the card is about. Roughly a third of the
   grid is future or empty in any given month — at full strength that block of
   tiles competed with the real data for attention. */
.cal-day.future { opacity: 0.12; }
.cal-day.notrade { opacity: 0.5; }
html:not(.anim-off) .cal-day:not(.empty):hover { transform: translateY(-2px); border-color: var(--edge-hi); color: var(--white); }
.cal-day.win:hover  { border-color: color-mix(in srgb, var(--win) 70%, transparent); }
.cal-day.loss:hover { border-color: color-mix(in srgb, var(--loss) 70%, transparent); }

.cal-day-num { position: absolute; top: 5px; right: 7px; left: auto; font-size: 0.62rem; font-weight: 600; color: var(--gray-300); opacity: 1; }
.cal-pnl { font-size: 0.76rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cal-pnl.pos { color: var(--win-text); }
.cal-pnl.neg { color: var(--loss-text); }
.cal-exec-tag { top: 5px; left: 6px; font-size: 0.48rem; font-weight: 700; padding: 0 4px; border-radius: 3px; opacity: 1; }
.cal-exec-tag.w { background: color-mix(in srgb, var(--win) 26%, transparent);  color: var(--win-text); }
.cal-exec-tag.l { background: color-mix(in srgb, var(--loss) 26%, transparent); color: var(--loss-text); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--moon); }
.cal-day.today::after { display: none; }

/* Phone: once the min-content floor above was removed the seven cells were
   finally free to shrink - and at 390px they shrank to 35px, where five of the
   month's P&L figures no longer fit inside their own cell. That is the same
   bug one level down, so the width has to be BOUGHT back rather than the
   number left to spill: tighter card padding, a tighter gap, and one step down
   in type. Measured at 390: cell 35.0 -> 41.0px, figures that overflow 5 -> 0.
   A cell is also a tap target, so the extra width is worth having twice. */
@media (max-width: 560px) {
  .dash-cal { padding: 18px 12px 16px; }
  .calendar-grid { gap: 4px; }
  /* clamp rather than a second breakpoint: phone widths run 320-430 and a
     fixed step that fits 390 sits edge-to-edge at 360. The cap is the
     desktop size, so this can only ever shrink. */
  .cal-pnl { font-size: clamp(0.58rem, 2.9vw, 0.76rem); letter-spacing: -0.02em; }
  .cal-day-num { top: 3px; right: 4px; font-size: 0.56rem; }
  .cal-exec-tag { top: 3px; left: 3px; font-size: 0.44rem; padding: 0 3px; }
}

.month-rate-badge { background: var(--surface-sunk); border: 1px solid var(--edge); color: var(--gray-100); }
.month-rate-badge.positive { color: var(--win-text); }
.month-rate-badge.negative { color: var(--loss-text); }

/* Recent-entry badges — data colour, not pastel */
.dash-recent .badge-win  { background: color-mix(in srgb, var(--win) 16%, var(--surface));  color: var(--win-text);  border-color: color-mix(in srgb, var(--win) 34%, transparent); }
.dash-recent .badge-loss { background: color-mix(in srgb, var(--loss) 16%, var(--surface)); color: var(--loss-text); border-color: color-mix(in srgb, var(--loss) 34%, transparent); }

/* .summary-card's coloured left edge is a SEMANTIC signal, and the recipe's
   `border` shorthand resets it. Re-asserted here rather than by excluding the
   card from the recipe, so the material stays defined in exactly one place. */
.summary-card.preserve { border-left: 3px solid var(--win); }
.summary-card.improve  { border-left: 3px solid var(--loss); }

/* ─── Rule-break cost card ───
   Was a centred vertical stack: title, then a huge number floating alone in the
   middle of a very wide card, then the bars. On a desktop width that left a
   large dead band across the middle. Two columns instead — the claim on one
   side, the evidence on the other — so the card is as wide as it is tall. */
.rbc-banner {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) 1.3fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 34px; row-gap: 14px;
  padding: 22px 26px;
  /* No border-radius here on purpose: this card takes the shared card recipe's
     radius above. Setting a third value was the old habit that produced seven
     slightly-different cards. */
}
.rbc-banner::before { opacity: 0.22; }
.rbc-head { grid-area: 1 / 1 / 2 / 2; }
.rbc-hero { grid-area: 2 / 1 / 3 / 2; text-align: start; padding: 0; }
.rbc-bars { grid-area: 1 / 2 / 3 / 3; align-self: center; max-width: none; margin: 0; }
.rbc-caption { margin-inline: 0; max-width: 42ch; }
.rbc-icon { background: var(--surface-sunk); border: 1px solid var(--edge); }
.rbc-num { color: var(--loss-text); font-variant-numeric: tabular-nums lining-nums; }
/* In Hebrew the number sits on the same side as the title and the caption. It is dir="ltr" (for
   its sign), so `start` put it at the far LEFT of a right-aligned column — both cards, measured
   at 1280 and 390. `match-parent` does not take in Chrome (measured: still left). The hero is an
   RTL island (dir="rtl" in both renderers), flipped to LTR in English like every other, so
   English keeps `start`. */
:root:not([data-lang="en"]) .rbc-num { text-align: right; }
.rbc-good-line { color: var(--win-text); }
.rbc-bar-track { background: var(--surface-sunk); border: 1px solid var(--edge); }
.rbc-bar-fill.pos { background: var(--win); }
.rbc-bar-fill.neg { background: var(--loss); }

@media (max-width: 860px) {
  .rbc-banner { grid-template-columns: 1fr; }
  .rbc-head { grid-area: auto; }
  .rbc-hero { grid-area: auto; }
  .rbc-bars { grid-area: auto; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. ATMOSPHERE + MOTION
   Motion budget (Daniel's call): ONE short orchestrated open, then nothing
   moves on its own. Hover/press response only. Everything gated by anim-off.
   ───────────────────────────────────────────────────────────────────────────*/

.page-atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* THE ROOM is switched off (2026-10-05, clean fintech): no pool of light, no
   vignette, no grain — the working pages sit on one flat charcoal, so the eye
   stays on the data. The element stays in the pages (nothing to sweep). */
.page-atmosphere::before,
.page-atmosphere::after { content: none; }
.page-wrapper { position: relative; z-index: 1; }

/* The one orchestrated open */
@keyframes tmRiseLux { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html:not(.anim-off) .a-hero          { animation: tmRiseLux 0.6s cubic-bezier(0.19,1,0.22,1) both; }
html:not(.anim-off) .rbc-banner      { animation: tmRiseLux 0.6s cubic-bezier(0.19,1,0.22,1) 0.05s both; }
html:not(.anim-off) .a-section-head  { animation: tmRiseLux 0.55s cubic-bezier(0.19,1,0.22,1) both; }
html:not(.anim-off) .metrics-strip   { animation: tmRiseLux 0.6s cubic-bezier(0.19,1,0.22,1) both; }
html:not(.anim-off) .dash-insight    { animation: tmRiseLux 0.6s cubic-bezier(0.19,1,0.22,1) 0.06s both; }
html:not(.anim-off) .dash-duo        { animation: tmRiseLux 0.6s cubic-bezier(0.19,1,0.22,1) 0.12s both; }
html:not(.anim-off) .dash-recent     { animation: tmRiseLux 0.6s cubic-bezier(0.19,1,0.22,1) 0.18s both; }
html:not(.anim-off) .analytics-grid > .chart-card { animation: tmRiseLux 0.58s cubic-bezier(0.19,1,0.22,1) both; }
html:not(.anim-off) .analytics-grid > .chart-card:nth-child(2) { animation-delay: 0.06s; }
html:not(.anim-off) .analytics-grid > .chart-card:nth-child(3) { animation-delay: 0.11s; }
html:not(.anim-off) .analytics-summary-strip .stat-card { animation: tmRiseLux 0.55s cubic-bezier(0.19,1,0.22,1) both; }
html:not(.anim-off) .analytics-summary-strip .stat-card:nth-child(2){animation-delay:.04s}
html:not(.anim-off) .analytics-summary-strip .stat-card:nth-child(3){animation-delay:.08s}
html:not(.anim-off) .analytics-summary-strip .stat-card:nth-child(4){animation-delay:.12s}
html:not(.anim-off) .analytics-summary-strip .stat-card:nth-child(5){animation-delay:.16s}
html:not(.anim-off) .analytics-summary-strip .stat-card:nth-child(6){animation-delay:.2s}

/* Chart reveal — a mask wipe on the CONTAINER, never Chart.js's own animation.
   Chart.js's internal animation is off on purpose (it left charts blank in real
   browsers and can't be verified headless). This is pure CSS, so it cannot
   reintroduce that bug. */
@keyframes chartWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
html:not(.anim-off) .chart-wrap { animation: chartWipe 0.62s cubic-bezier(0.33,1,0.68,1) 0.12s both; }
html:not(.anim-off) .chart-card.feature .chart-wrap { animation-duration: 0.78s; }
/* Always left→right: the document layout never mirrors (only RTL text islands
   flip), and a chart canvas is LTR content in both languages. */

@media (max-width: 760px) {
  .a-hero { padding: 22px 20px 14px; }
  .a-hero-main { gap: 22px 24px; }
  .a-hero-journey { margin: 18px -20px -14px; }
  .ah-stat { padding-inline: 16px; }
  .a-section-head { margin: 34px 0 15px; }
  .analytics-grid { gap: 15px; }
  .metrics-strip { padding: 20px 18px; }
}
/* Phone: the ring alone is 188px, so keeping it beside the stats left them
   ~130px to hold a five-figure number. Stack instead and give the stats the
   full width as an even row. */
@media (max-width: 560px) {
  /* The RING lands above the sentence on a phone: a 132px ring is a faster read
     than three lines of prose when the whole hero is one column, and the verdict
     still gets the full measure underneath it. (History: as a flex row turned
     column, `.ah-say`'s 380px basis became a 380px minimum HEIGHT here — the grid
     has no basis to trip on.) */
  .a-hero-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ring" "say" "stats"; gap: 18px; }
  .ah-ringcol { justify-self: center; border-inline-start: 0; padding-inline-start: 0; }
  .shc-open.ah-share { margin-top: 12px; }

  .ah-verdict { max-width: none; font-size: 1.16rem; }
  .ah-stat { padding-inline: 8px; text-align: center; }
  :root:not([data-lang="en"]) .ah-stat-val { text-align: center; }
  .ah-stat-label { font-size: 0.72rem; margin-bottom: 7px; }
  .ah-stat-cmp { font-size: 0.66rem; margin-top: 7px; }
  .a-hero-journey { height: 78px; }
}
/* Narrow phones: a third of the row is ~70–95px and "+$1,920" alone is ~100px at
   the clamp's floor (measured, an_lab 320–390). Each number takes its own line:
   the label and its comparison on the reading side, the figure at the far end —
   room for a five-figure loss too. */
@media (max-width: 440px) {
  .ah-stats { grid-template-columns: minmax(0, 1fr); padding-top: 4px; }
  .ah-stat {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label val" "cmp val";
    align-items: center; column-gap: 14px;
    padding: 12px 0; text-align: start;
  }
  .ah-stat + .ah-stat { border-inline-start: 0; border-top: 1px solid var(--edge); }
  .ah-stat-label { grid-area: label; margin: 0; font-size: 0.8rem; }
  .ah-stat-val { grid-area: val; font-size: 1.6rem; }
  .ah-stat-cmp { grid-area: cmp; margin-top: 3px; font-size: 0.7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNTS PAGE  (accounts.html + js/accounts.js)

   REDESIGN D8 (2026-10-10, Daniel's answers): built in the site's own language — one WIDE card
   per account: who it is on the reading side (name, phase, active, broker names, "account
   settings"), the execution rate as the lead number beside P&L, win rate and sessions with the
   curve under them, and the prop-firm meters on the far side. The name and the rules are edited
   in the "account settings" dialog (the new-account form in a second mode). The cards take the
   consolidated card recipe above, untouched — nothing here re-states card material.
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-page { max-width: 1180px; margin: 0 auto; padding: 30px 28px 72px; }
:root:not([data-lang="en"]) .ac-page,
:root:not([data-lang="en"]) .acct-modal { direction: rtl; }
/* money in its colours here (the site has no global .win-text — every page scopes its own) */
.ac-page .win-text { color: var(--win-text); }
.ac-page .loss-text { color: var(--loss-text); }
.ac-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ac-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.ac-header-txt { min-width: 0; }
.ac-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--white); margin: 0 0 6px; }
.ac-sub { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--gray-200); text-align: start; text-wrap: pretty; }

.acct-list { display: flex; flex-direction: column; gap: 16px; }

/* ── the wide card: identity · figures + curve · the firm's lines ── */
.acct-card {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; align-items: stretch;
  padding: 0; overflow: hidden;
}
.acct-card.is-active { border-color: color-mix(in srgb, var(--moon) 40%, var(--edge)); }
.acct-card > * { min-width: 0; padding: 22px 24px; }
.ac-id { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* The account name is user DATA — a broker code as often as a phrase — so the BODY font: in the
   display face the Latin letters render much larger than the Hebrew at the same size. */
.acct-name {
  margin: 0; max-width: 100%; font-family: var(--font); font-size: 1.08rem; font-weight: 700;
  color: var(--white); letter-spacing: -0.01em; overflow-wrap: anywhere; text-align: start;
}
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chip, .acct-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600;
}
.ac-chip { border: 1px solid var(--edge-hi); color: var(--gray-100); }
.acct-badge {
  background: color-mix(in srgb, var(--moon) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--moon) 40%, transparent); color: var(--moon);
}
.ac-broker { max-width: 100%; font-size: 0.78rem; color: var(--gray-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.ac-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.ac-actions .tm-ico { width: 15px; height: 15px; }

.ac-main { display: flex; flex-direction: column; gap: 14px; border-inline-start: 1px solid var(--edge); }
.ac-figures { display: flex; align-items: flex-end; gap: 10px 28px; flex-wrap: wrap; }
/* the lead number: how much of the work went by the plan (discipline first, as everywhere) */
.ac-lead { display: flex; flex-direction: column; gap: 2px; margin-inline-end: 6px; }
.ac-lead-v { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.ac-lead-l { font-size: 0.8rem; font-weight: 600; color: var(--gray-200); }
.acct-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct-stat-v { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; }
.acct-stat-l { font-size: 0.76rem; color: var(--gray-300); }

.acct-spark-wrap { height: 62px; }
.acct-spark { width: 100%; height: 62px; display: block; overflow: visible; }
.acct-spark-line { stroke-width: 1.8; }
.acct-spark-line.up { stroke: var(--win); }
.acct-spark-line.down { stroke: var(--loss); }
.acct-spark-dot.up { fill: var(--win); }
.acct-spark-dot.down { fill: var(--loss); }
.acct-spark-zero { stroke: var(--grid-line); stroke-width: 1; stroke-dasharray: 3 4; }
.acct-spark-empty {
  height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  border: 1px dashed var(--edge); color: var(--gray-300); font-size: 0.8rem;
}

/* the firm's lines — on a sunk panel, so the eye finds them in the same place on every card */
.ac-side { background: color-mix(in srgb, var(--surface-sunk) 55%, var(--surface)); border-inline-start: 1px solid var(--edge); display: flex; flex-direction: column; justify-content: center; }
.acct-risk { display: flex; flex-direction: column; gap: 14px; }
.acct-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.8rem; color: var(--gray-200); }
.acct-meter-top strong { font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--white); }
.acct-meter-bar { height: 6px; margin-top: 7px; border-radius: 999px; background: var(--edge); overflow: hidden; }
/* Room LEFT before the floor: a full bar is the healthy state, so the colour tracks how little
   remains, not the fact that this is a risk meter. Neutral when there is room (gold is for the next
   action), amber when it narrows, red near the floor. */
.acct-meter-bar > span { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--white) 70%, transparent); }
.acct-meter-bar.warn > span { background: #D4AF37; }
.acct-meter-bar.danger > span { background: var(--loss); }
.acct-meter-bar.target > span { background: var(--win); }
.acct-meter-sub { margin-top: 5px; font-size: 0.74rem; color: var(--gray-300); text-align: start; }
.acct-caveat { margin: 0; font-size: 0.72rem; line-height: 1.5; color: var(--gray-300); text-align: start; text-wrap: pretty; }
.ac-side-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ac-side-note { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--gray-200); text-align: start; }
.ac-side-go { font-size: 0.84rem; font-weight: 600; color: var(--moon); }
.ac-side-go:hover { color: var(--moon); text-decoration: underline; text-underline-offset: 3px; }

/* An invitation, not a card: the same width as a card, deliberately empty of chrome — a dashed
   outline over the page ground. Only ever rendered while there is one account. */
.acct-invite {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 22px 24px;
  border: 1px dashed var(--edge-hi); border-radius: var(--radius-card); background: transparent;
  cursor: pointer; font-family: var(--font); text-align: start; transition: border-color .2s, background .2s;
}
.acct-invite:hover { border-color: var(--moon); background: var(--surface-sunk); }
.acct-invite:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.acct-invite-mark {
  flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--edge-hi); color: var(--moon);
}
.acct-invite-mark .tm-ico { width: 18px; height: 18px; }
.acct-invite-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acct-invite-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--white); }
.acct-invite-text { font-size: 0.84rem; line-height: 1.6; color: var(--gray-200); text-wrap: pretty; }

/* ── the account form: new / settings ── */
.acct-modal { max-width: 560px; }
.acct-modal-danger { border-color: color-mix(in srgb, var(--loss) 34%, var(--edge)); }
.acct-form { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.acct-form .acct-wide { grid-column: 1 / -1; }
/* ⚠️ A grid item's default min-width is its content, and an <input>'s intrinsic width is ~20
   characters: min-width 0 on the item and width 100% on the field make 1fr mean 1fr. */
.acct-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 0.78rem; font-weight: 600; color: var(--gray-200); }
.acct-field input[type="text"], .acct-field input[type="number"], .acct-field select {
  width: 100%; min-width: 0; box-sizing: border-box; height: 42px; padding: 0 12px;
  border-radius: var(--radius-field); background: var(--surface-sunk); border: 1px solid var(--edge);
  color: var(--white); font-family: var(--font); font-size: 0.9rem; font-weight: 400;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.acct-field input:focus, .acct-field select:focus { outline: none; border-color: var(--moon); box-shadow: var(--focus-ring); }
.acct-field input:disabled, .acct-field select:disabled, .acct-check input:disabled { opacity: 0.55; cursor: not-allowed; }
.acct-check { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: var(--gray-100); cursor: pointer; }
.acct-check input { width: 17px; height: 17px; accent-color: var(--moon); flex: none; }
.acct-form-hint { margin: 12px 0 0; font-size: 0.76rem; line-height: 1.55; color: var(--gray-300); text-align: start; }
/* the free plan in settings mode: the rules read-only under this row */
.acct-rules-lock {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-sunk); border: 1px solid var(--edge);
}
.acct-rules-lock-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.76rem; line-height: 1.45; color: var(--gray-200); text-align: start; }
.acct-rules-lock-text strong { font-size: 0.82rem; font-weight: 600; color: var(--white); }
#acctFormLock[hidden] { display: none; }
.acct-modal-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--edge);
  /* a long form on a short screen scrolls inside the box: the buttons stay at its foot (the
     negative offset is the box's own 28px padding, so they sit flush with its edge) */
  position: sticky; bottom: -28px; margin-bottom: -28px; padding-bottom: 28px; background: inherit; z-index: 1;
}
/* settings mode: the account's way out, quiet, on the reading side */
.acct-form-out { display: flex; align-items: center; gap: 18px; margin-inline-end: auto; }
.acct-form-out[hidden] { display: none; }
.acct-link {
  position: relative; padding: 0; background: none; border: 0;
  color: var(--gray-300); font: inherit; font-size: 0.8rem; cursor: pointer; transition: color .18s ease;
}
.acct-link:hover { color: var(--white); }
.acct-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.acct-delete:hover { color: var(--loss-text); }
/* ⚠️ Archive and delete measured 19px tall, under WCAG 2.5.8's 24px floor — on the page's one
   destructive action. The hit area grows by a pseudo-element, not by padding. */
.acct-link::after { content: ''; position: absolute; inset: -10px -6px; }
.acct-del-text { margin: 0; font-size: 0.88rem; line-height: 1.65; color: var(--gray-100); text-align: start; }
.acct-del-counts { display: flex; gap: 10px; margin-top: 16px; }
.acct-del-count {
  flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 12px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--loss) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--loss) 22%, transparent);
}
.acct-del-count b { font-family: var(--font-display); font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--loss-text); }
.acct-del-count span { font-size: 0.74rem; color: var(--gray-300); }
#delAcctConfirmWrap { margin-top: 18px; }
#delAcctGo[disabled] { opacity: 0.45; cursor: not-allowed; }

.ac-sec-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ac-sec-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--white); }
.ac-sec-head p { margin: 0; font-size: 0.86rem; color: var(--gray-300); text-align: start; }
.acct-compare { margin-top: 40px; }
.acct-table-card { padding: 0; overflow: hidden; }

/* ── journal: which account this entry's numbers belong to ── */
.jr-acct {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  padding: 11px 14px; border-radius: 10px;
  background: var(--surface-sunk, rgba(127,127,127,0.07));
  border: 1px solid var(--edge, var(--gray-800));
}
.jr-acct-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.jr-acct-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-300); }
.jr-acct-name { font-size: 0.94rem; color: var(--white); }
.jr-acct-note { font-size: 0.78rem; color: var(--gray-200); }
.jr-acct-split {
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--edge, var(--gray-700));
  color: var(--gray-100); font: inherit; font-size: 0.78rem;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.jr-acct-split:hover { color: var(--white); border-color: var(--edge-hi, var(--gray-600)); }
.jr-acct-split.on {
  color: var(--moon, #D4AF37);
  border-color: color-mix(in srgb, var(--moon, #D4AF37) 45%, transparent);
  background: color-mix(in srgb, var(--moon, #D4AF37) 10%, transparent);
}

/* Chart legend rendered in HTML rather than on the canvas, so a mixed
   Hebrew/Latin account name ("הערכה 50K") resolves against its own first strong
   character instead of being scrambled by a canvas that has no base direction. */
.acct-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: center; margin-top: 14px;
}
.acct-legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--gray-200);
}
.acct-legend-swatch {
  width: 22px; height: 2px; border-radius: 2px; flex: none;
  background: var(--lg-color, currentColor);
}
.acct-table-scroll { overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.acct-table th, .acct-table td { padding: 12px 18px; text-align: start; white-space: nowrap; }
.acct-table tbody tr { border-top: 1px solid var(--edge); }
/* the head row tinted like the pricing table; the names in the BODY font (user data) */
.acct-table thead th { background: color-mix(in srgb, var(--white) 4%, transparent); color: var(--white); font-family: var(--font); font-size: 0.9rem; font-weight: 700; }
.acct-table thead th.is-active::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline-start: 8px; border-radius: 50%; background: var(--moon); vertical-align: middle; }
.acct-table th[scope="row"] { width: 1%; color: var(--gray-200); font-weight: 400; }
.acct-table td { color: var(--white); font-variant-numeric: tabular-nums; }

.acct-archived { margin-top: 40px; }
.acct-archived-list { display: flex; flex-direction: column; gap: 8px; }
.acct-arc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border: 1px solid var(--edge); border-radius: 12px;
  color: var(--gray-100); font-size: 0.9rem;
}
.acct-arc-row > span { min-width: 0; overflow-wrap: anywhere; }

/* Narrower: the card's three parts stack — who it is (a row: name and chips, the actions at the
   far end), the figures and the curve, the firm's lines — each over a hairline. */
@media (max-width: 980px) {
  .acct-card { grid-template-columns: minmax(0, 1fr); }
  .ac-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding-bottom: 16px; }
  .ac-id .acct-name, .ac-id .ac-chips, .ac-id .ac-broker { grid-column: 1; }
  .ac-actions { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; flex-direction: column; align-items: stretch; }
  .ac-main, .ac-side { border-inline-start: 0; border-top: 1px solid var(--edge); }
}
@media (max-width: 560px) {
  .ac-page { padding: 16px 16px 56px; }
  .ac-title { font-size: 1.45rem; }
  .acct-card > * { padding: 16px; }
  .ac-id { grid-template-columns: minmax(0, 1fr); }
  .ac-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
  .ac-figures { gap: 10px 18px; }
  .ac-lead-v { font-size: 2rem; }
  .acct-form { grid-template-columns: minmax(0, 1fr); }
  .acct-form-out { width: 100%; margin-bottom: 4px; }
  .acct-table th, .acct-table td { padding: 11px 12px; }
  .acct-invite { padding: 18px 16px; }
}

/* The accounts page reuses method.html's toast; it lives here so both pages
   share one definition instead of the page-local copy drifting. */
.save-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  padding: 10px 20px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--edge);
  color: var(--white); font-size: 0.875rem; font-weight: 500;
  opacity: 0; pointer-events: none; z-index: 1000;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.save-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }