/* ==========================================================================
   Smart Money Top-Down. Token set carried over verbatim from the live site
   (styles/site.css :root), plus two derived text-safe tones for AA on raised
   surfaces. Nothing else is invented.
   ========================================================================== */
:root {
  /* layers */
  --page-bg: #070B0F;
  --bg: #0B0F14;
  --surface: #151C24;
  --raised: #1B2530;

  /* lines */
  --border: #243241;
  --border-strong: #33465A;

  /* text */
  --fg: #E8EEF5;
  --fg-2: #A8B3C2;
  --muted: #8695A6;

  /* accent + semantics */
  --accent: #22D3EE;
  --accent-hi: #67E8F9;
  --on-accent: #071018;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  /* oklch(0.70 0.17 25): red kept for text on surface/raised (5.9:1 / 5.4:1).
     --danger itself only clears 4.12:1 on --raised, so it stays for fills. */
  --danger-text: #F66D67;

  /* type */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* One ladder, shared with page-blocks.css:
     h1 38 / h2 20 / h3 18 / body 16 / small 15 / meta 13.
     13 is the floor: no text on any page goes below it. */
  --fs-h1: clamp(28px, 2.8vw, 38px);
  --fs-h2: 20px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-sm: 15px;
  --fs-meta: 13px;

  /* figures sit outside the text ladder: they scale with the viewport, not the
     reading rhythm, so the balance never wraps in a narrow column. */
  --fs-figure-lg: clamp(26px, 2.3vw, 32px);
  --fs-figure: clamp(22px, 1.8vw, 26px);
  --fs-figure-sm: 20px;

  /* leading: five steps, no ad-hoc values in either stylesheet */
  --lh-display: 1.15;
  --lh-title: 1.3;
  --lh-body: 1.6;
  --lh-read: 1.7;
  --lh-meta: 1.5;
  --lh-figure: 1.1;

  /* tracking: display negative, small text slightly open, ALL CAPS 0.06em */
  --ls-display: -0.02em;
  --ls-title: -0.01em;
  --ls-small: 0.01em;
  --ls-caps: 0.06em;

  /* radii: one scale, applied by role. controls and chips 8, inner blocks 12,
     panels 16, the replay dialog 24. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* 8px rhythm */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;

  --shadow-lift: 0 30px 60px -32px rgba(0, 0, 0, 0.85);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --container: 1200px;
  --z-dialog: 100;

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-small);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.is-locked, html.is-locked body { overflow: hidden; }

h1, h2, h3, p, dl, dd, dt, ol, li, figure { margin: 0; }
ol, dl { padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

.num { font-variant-numeric: tabular-nums; }
code {
  font-family: var(--font-mono);
  font-size: 1em;
  color: var(--fg-2);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  border-radius: var(--r-sm);
}

.brand__mark {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg);
}

.brand__text { display: flex; flex-direction: column; gap: 1px; }
.brand__name { font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-title); line-height: var(--lh-title); }
.brand__sub { font-size: var(--fs-meta); color: var(--fg-2); line-height: var(--lh-meta); }

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  border-radius: var(--r-sm);
  transition: color 120ms var(--ease), background-color 120ms var(--ease);
}

.nav a:hover { color: var(--fg); background: var(--raised); }
.nav a[aria-current="page"] { color: var(--fg); }

/* ==========================================================================
   Hero + proof
   Vertical rhythm: every band below the hero opens with the same 48 px of
   space and adds no bottom padding, so consecutive sections can never stack
   two gaps or start tighter than the previous one ended.
   ========================================================================== */
.hero { padding: var(--sp-4) 0 0; }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.88fr);
  gap: var(--sp-6);
  align-items: start;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.lead {
  margin-top: var(--sp-2);
  max-width: 66ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--fg-2);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sp-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease), transform 90ms var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn--primary:hover { background: var(--accent-hi); }

.btn--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--fg);
}
.btn--secondary:hover { background: var(--raised); border-color: var(--fg-2); }

.btn[aria-disabled="true"] { cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: transparent; border-color: var(--border-strong); }

.btn--quiet {
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border-color: transparent;
  color: var(--fg);
  font-weight: 500;
}
.btn--quiet:hover { background: var(--raised); border-color: var(--border-strong); }

.disclosure {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}

.hero__meta {
  margin-top: var(--sp-2);
  max-width: 62ch;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}

/* proof panel: the balance, the curve of how it got there, then the three
   figures a visitor needs to judge the sample. Every number appears once. */
.proof {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}

/* return sits on the label line: it is a reading of the balance below it, not a
   separate cell that repeats the same two dollar amounts */
.proof__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.proof__label {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.proof__roi {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-meta);
  color: var(--success);
  white-space: nowrap;
}

.proof__value {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-figure-lg);
  font-weight: 600;
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-display);
}

/* net figure and sample size on one line under the balance: both describe the
   same move, so they read together instead of as two more cells */
.proof__net {
  margin-top: 2px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}
.proof__net-pnl { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--success); }
.proof__net-sep { color: var(--border-strong); }

.spark { margin-top: var(--sp-2); height: 52px; }
.spark__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark__svg .area { opacity: 0.14; }
.spark__svg .area--pos { fill: var(--success); }
.spark__svg .area--neg { fill: var(--danger); }
.spark__svg .base { stroke: var(--fg-2); opacity: 0.35; stroke-width: 1; stroke-dasharray: 3 4; }
.spark__svg .line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark__svg .line--pos { stroke: var(--success); }
.spark__svg .line--neg { stroke: var(--danger); }
.spark__svg .dot--pos { fill: var(--success); }
.spark__svg .dot--neg { fill: var(--danger); }

.proof__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.stat dt { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--fg-2); }
.stat dd {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-figure-sm);
  font-weight: 600;
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-title);
}
.stat__sub { margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--fg-2); }

/* drawdown is a risk reading, not a third performance figure: it closes the card
   as one muted line instead of standing as a peer cell next to capital and win rate */
.proof__risk {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}
.proof__risk-v { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.proof__risk-n { color: var(--muted); }

/* ==========================================================================
   Trade log
   ========================================================================== */
.log { padding: var(--sp-5) 0 0; }

.log__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
}

.quiet-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 120ms var(--ease), text-decoration-color 120ms var(--ease);
}
.quiet-link:hover { color: var(--fg); text-decoration-color: var(--fg-2); }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tbl th {
  padding: 0 12px 10px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--fg-2);
  text-align: left;
  letter-spacing: var(--ls-small);
  white-space: nowrap;
}

.tbl th.num { text-align: right; }
.tbl th.col-time { padding-left: 0; }

.tbl__row { border-top: 1px solid var(--border); }

.tbl td {
  padding: 10px 12px;
  font-size: var(--fs-sm);
  vertical-align: middle;
}
.tbl td.col-time { padding-left: 0; }
.tbl td.col-act { padding-right: 0; text-align: right; }
.tbl td.num { text-align: right; }

.cell-time { display: block; color: var(--fg); }
.cell-time-sub { display: block; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--fg-2); }

/* the phone layout moves the close time under the symbol: this copy is only
   rendered below 760 px, the Closed at column is hidden there */
.cell-mob-time { display: none; }

.cell-sym { font-weight: 600; letter-spacing: var(--ls-title); }

.chip {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
  vertical-align: 2px;
  white-space: nowrap;
}

.cell-setup {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}

.cell-px { font-family: var(--font-mono); }
.cell-arrow {
  display: inline-block;
  margin: 0 6px;
  font-size: var(--fs-meta);
  color: var(--fg-2);
}

.cell-pnl, .cell-r { font-family: var(--font-mono); font-weight: 600; }
.cell-r { display: block; margin-top: 2px; font-size: var(--fs-meta); }
.cell-vol, .cell-rr { font-family: var(--font-mono); white-space: nowrap; }
.cell-rr { color: var(--fg-2); }
.cell-pnl { font-size: var(--fs-body); }
.cell-why { color: var(--fg-2); }
/* the phone row keeps HH:mm and the size inside the symbol cell: the day header
   above the row already carries the date */
.cell-hm, .cell-lots { display: none; }

.is-win { color: var(--success); }
.is-loss { color: var(--danger-text); }

.log__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
  max-width: 70ch;
}

/* ==========================================================================
   Referral band + footer
   ========================================================================== */
.referral { padding: var(--sp-6) 0 var(--sp-5); }

.referral__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.referral__copy .lead { margin-top: var(--sp-1); max-width: 56ch; }
.referral .disclosure { margin-top: var(--sp-2); }

.site-foot {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border);
  background: var(--page-bg);
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.foot__note { margin-top: 6px; font-size: var(--fs-meta); color: var(--fg-2); max-width: 40ch; }

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  transition: color 120ms var(--ease);
}
.foot__nav a:hover { color: var(--fg); }

.disclaimer {
  margin-top: var(--sp-3);
  max-width: 100ch;
  font-size: var(--fs-meta);
  line-height: var(--lh-read);
  color: var(--fg-2);
}

/* ==========================================================================
   Replay dialog
   ========================================================================== */
.dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
}
.dialog[hidden] { display: none; }

.dialog__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 10, 0.78);
}

.dialog__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(880px, calc(100dvh - 48px));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.dialog.is-in .dialog__card { animation: card-in 180ms var(--ease) both; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to { opacity: 1; transform: none; }
}

/* header stays put: it is a fixed flex item above the scroller */
.dlg-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: start;
  gap: var(--sp-2);
  padding: 16px var(--sp-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 160ms var(--ease);
  z-index: 3;
}

.dlg-head[data-scrolled="true"] {
  box-shadow: 0 14px 22px -20px rgba(2, 6, 10, 0.7), 0 1px 0 var(--border);
}

.dlg-ident { min-width: 0; }

.dlg-sym {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
}
.dlg-sym .chip { margin-left: 0; vertical-align: baseline; }

.dlg-meta {
  margin-top: 4px;
  font-size: var(--fs-meta);
  color: var(--fg-2);
}

.dlg-result { text-align: right; padding-top: 2px; }
.dlg-pnl {
  font-family: var(--font-mono);
  font-size: var(--fs-figure);
  font-weight: 600;
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-display);
}
.dlg-r {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.dlg-close {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin-top: -6px;
  margin-right: -6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.dlg-close:hover { background: var(--raised); border-color: var(--border-strong); }

.dlg-close__glyph { position: relative; width: 14px; height: 14px; display: block; }
.dlg-close__glyph::before,
.dlg-close__glyph::after {
  content: "";
  position: absolute;
  top: 6px; left: 0;
  width: 14px; height: 1.5px;
  background: var(--fg);
  border-radius: 1px;
}
.dlg-close__glyph::before { transform: rotate(45deg); }
.dlg-close__glyph::after { transform: rotate(-45deg); }

.dlg-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---- numeric record ---- */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-4);
}

.spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 9px 0;
  border-top: 1px solid var(--border);
}

.spec dt { font-size: var(--fs-sm); color: var(--fg-2); }

.spec dd {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: right;
  color: var(--fg);
  white-space: nowrap;
}

.spec--result dd { font-weight: 600; }
.spec__pct { font-family: var(--font-ui); font-size: var(--fs-meta); color: var(--fg-2); }

/* ---- collapsibles ---- */
.more { border-top: 1px solid var(--border); }
.more__item { border-bottom: 1px solid var(--border); }

.more__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 2px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-sm);
  transition: background-color 120ms var(--ease);
}
.more__summary::-webkit-details-marker { display: none; }
.more__summary:hover { background: var(--raised); }

.more__chev {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--fg-2);
  border-bottom: 1.5px solid var(--fg-2);
  transform: rotate(-45deg);
  transition: transform 160ms var(--ease);
}
.more__item[open] .more__chev { transform: rotate(45deg); }

.more__label {
  font-size: var(--fs-body);
  font-weight: 500;
}

.more__hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
  text-align: right;
}

.more__item.is-empty .more__hint { font-family: var(--font-ui); }

.moves {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 2px var(--sp-2) 20px;
}

.moves__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}

.moves__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.moves__label { font-size: var(--fs-sm); font-weight: 500; }
.moves__when { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-2); }

.moves__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.moves__from { color: var(--fg-2); }
.moves__to { color: var(--fg); font-weight: 600; }
.moves__arrow { font-family: var(--font-ui); font-size: var(--fs-meta); }
.moves__code {
  margin-left: auto;
  font-size: var(--fs-meta);
  color: var(--fg-2);
}

/* ---- chart ---- */
.chart { margin: 0; padding: 0 2px var(--sp-2) 20px; }

.chart__stage {
  height: 30vh;
  min-height: 200px;
  max-height: 300px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}

.chart__svg { display: block; }

/* colours live in CSS: var() does not resolve inside SVG presentation attributes */
.chart__svg .axis { stroke: var(--border); }
.chart__svg .window { fill: var(--raised); opacity: 0.55; }
.chart__svg .wick { opacity: 0.85; }
.chart__svg .body { opacity: 0.85; }
.chart__svg .wick.up, .chart__svg .body.up, .chart__svg .exit.up { stroke: var(--success); }
.chart__svg .wick.down, .chart__svg .body.down, .chart__svg .exit.down { stroke: var(--danger); }
.chart__svg .body.up { fill: var(--success); }
.chart__svg .body.down { fill: var(--danger); }
.chart__svg .exit { fill: var(--surface); }
.chart__svg .lvl-stop { stroke: var(--danger); opacity: 0.95; }
.chart__svg .lvl-planned { stroke: var(--danger); opacity: 0.5; stroke-dasharray: 4 4; }
.chart__svg .lvl-entry { stroke: var(--fg-2); opacity: 0.75; stroke-dasharray: 2 4; }
.chart__svg .lvl-target { stroke: var(--success); opacity: 0.6; stroke-dasharray: 4 4; }
.chart__svg text { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0; }
.chart__svg .lbl-stop { fill: var(--danger); }
.chart__svg .lbl-entry { fill: var(--fg-2); }
.chart__svg .lbl-target { fill: var(--success); }
.chart__svg .axis-label { fill: var(--fg-2); }

.chart__empty, .chart__cap {
  font-size: var(--fs-meta);
  color: var(--fg-2);
}

.chart__empty { padding: var(--sp-3); }

.chart__cap { margin-top: var(--sp-1); line-height: var(--lh-meta); }

.dlg-foot {
  font-size: var(--fs-meta);
  line-height: var(--lh-read);
  color: var(--fg-2);
}


/* ==========================================================================
   Analysis process + open trades
   ========================================================================== */
.ops { padding: var(--sp-5) 0 0; }


.ops__lead {
  max-width: 74ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ops__stamp {
  margin: 4px 0 var(--sp-3);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--muted);
}


/* one row per symbol: seven gates as a rail, then what the cycle is waiting for.
   Đường kẻ trên cùng nằm ở dòng đầu chứ không ở `.watch`: dòng mốc "Last cycle …" phải nằm
   TRONG khối (để khối sống thay cả hai cùng lúc) mà vẫn đứng trên đường kẻ như bản cũ. */
.watch__row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.watch__row:first-of-type { border-top: 1px solid var(--border); }
.watch__top { display: flex; align-items: center; gap: 10px; }
.watch__sym {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-small);
}
.watch__regime { font-size: var(--fs-meta); color: var(--muted); }
.watch__gates { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.tick { width: 14px; height: 4px; border-radius: 2px; background: var(--border); }
.tick.is-pass { background: var(--accent); }
.watch__score {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}
.watch .pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  white-space: nowrap;
  color: var(--fg-2);
}
.watch .pill--near { color: var(--accent-hi); border-color: rgba(34, 211, 238, 0.45); }
.watch .pill--warn { color: var(--warning); border-color: rgba(245, 158, 11, 0.45); }
.watch__bottom { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.watch__bias { display: flex; gap: 6px; flex-wrap: wrap; }
.bias {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}
.bias__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); }
.bias__dot.is-buy { background: var(--success); }
.bias__dot.is-sell { background: var(--danger-text); }
.watch__now {
  margin-left: auto;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
  white-space: nowrap;
}
.watch__gauge {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  height: 8px;
  border-radius: 4px;
  background: var(--raised);
}
.watch__band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(34, 211, 238, 0.38); }
.watch__mark {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: var(--fg);
}
/* /strategy dùng lại board của home, thêm mốc quyết định cuối của từng symbol */
.watch__meta { margin-top: 4px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.watch--status { margin-top: var(--sp-3); }
.watch--status .watch__row { padding: 14px 0; }

.noopen {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--raised);
}
.noopen__state { font-size: var(--fs-body); font-weight: 600; }
.noopen__text {
  margin-top: 6px;
  max-width: 64ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero-inner { gap: var(--sp-4); }
  .tbl th, .tbl td { padding-left: 8px; padding-right: 8px; }
  .cell-setup { display: none; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .nav { gap: 0; }
  .nav a { padding: 0 9px; font-size: var(--fs-meta); }
}

@media (max-width: 760px) {
  .wrap { padding: 0 var(--sp-2); }

  .head-inner { height: 56px; gap: var(--sp-2); }
  .brand__sub { display: none; }
  .nav a { padding: 0 7px; }

  .hero { padding: var(--sp-3) 0 0; }
  .lead { font-size: var(--fs-sm); }
  .cta-row .btn { flex: 1 1 100%; }

  .proof__stats { gap: 12px; }

  /* table becomes stacked records */
  .tbl thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tbl, .tbl tbody, .tbl td { display: block; }

  /* three lines, same shape as the trade log: symbol, clock and Result on top;
     the price pair against RR; then size and close reason against Detail. One
     record gets one outer rule; cells never draw their own. */
  .tbl tbody .tbl__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "sym  pnl"
      "px   rr"
      "why  act";
    gap: 4px 8px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }

  .tbl td { padding: 0; text-align: left; }
  .tbl td.num { text-align: left; }
  .tbl td[data-label="Symbol"] { grid-area: sym; }
  .tbl td[data-label="Result"] { grid-area: pnl; text-align: right; }
  .tbl td[data-label="Result"] .cell-pnl { display: inline; }
  .tbl td[data-label="Result"] .cell-r { display: inline; margin-left: 5px; }
  /* 14 px keeps the pair on one line down to 360 px without shrinking the Result */
  .tbl td[data-label="Entry to exit"] { grid-area: px; font-size: 14px; white-space: nowrap; }
  .tbl td[data-label="Entry to exit"] .cell-arrow { margin: 0 4px; }
  .tbl td[data-label="RR"]::before { content: "RR "; color: var(--fg-2); font-size: var(--fs-meta); }
  .tbl td[data-label="RR"] { grid-area: rr; text-align: right; align-self: start; }
  /* size and clock ride on the symbol line: the row keeps three lines, and the
     close reason gets the full width of the card */
  .tbl td[data-label="Vol"], .tbl td.col-time { display: none; }
  .tbl td[data-label="Symbol"] .cell-hm {
    display: inline;
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--fg-2);
  }
  .tbl td[data-label="Close reason"] {
    grid-area: why;
    min-width: 0;
    color: var(--fg-2);
    font-size: var(--fs-meta);
    align-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tbl td.col-act { grid-area: act; text-align: right; padding: 0; align-self: center; }
  .tbl td.col-act .btn { min-height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); color: var(--fg); }

  .cell-setup { display: none; }

  /* analysis board: symbol and gate rail, then the verdict against the bias,
     then the sentence naming what the cycle is waiting for */
  .ops__lead { margin-bottom: 4px; }
  .ops__stamp { margin-bottom: var(--sp-2); }
  .watch__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 12px 0;
  }
  .watch__top, .watch__bottom { display: contents; }
  .watch__sym { grid-area: 1 / 1; align-self: center; }
  .watch__regime { display: none; }
  .watch__gates { grid-area: 1 / 2; margin-left: 0; justify-self: end; align-self: center; }
  .tick { width: 11px; }
  .watch .pill { grid-area: 2 / 2; justify-self: end; }
  .watch__bias { grid-area: 2 / 1; min-width: 0; flex-wrap: wrap; }
  .watch__bias .bias { white-space: nowrap; }
  .watch__now { grid-area: 3 / 1 / 4 / 3; margin-left: 0; white-space: normal; }
  .watch__meta { grid-area: 4 / 1 / 5 / 3; margin-top: 2px; }
  .watch--status { margin-top: var(--sp-2); }
  .watch__kinds { display: none; }
  .watch__gauge { display: none; }
  .noopen { padding: var(--sp-2); }

  .referral__panel { grid-template-columns: minmax(0, 1fr); padding: var(--sp-3); gap: var(--sp-3); }
  .referral__panel .btn { width: 100%; }

  /* dialog becomes a full-height sheet */
  .dialog { padding: 0; align-items: stretch; }
  .dialog__card {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .dlg-head { padding: 12px var(--sp-2); gap: 12px; grid-template-columns: minmax(0, 1fr) auto 44px; }
  /* tighter top padding on the sheet: the close reason has to stay inside the
     first 844 px of the card, above the fold on a 390 phone */
  .dlg-body { padding: var(--sp-1) var(--sp-2) var(--sp-2); gap: var(--sp-2); }
  .narr { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: minmax(0, 1fr); }

  .chart__stage { height: 24vh; min-height: 160px; max-height: 220px; }
  .chart { padding-left: 16px; }
  .moves { padding-left: 16px; }
}

@media (max-width: 560px) {
  /* the navigation keeps all six labels on one row of its own */
  .head-inner {
    flex-wrap: wrap;
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    row-gap: 0;
  }
  .brand { width: 100%; }
  .nav {
    width: 100%;
    margin-left: 0;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 0 6px; }
}

@media (max-width: 420px) {
  /* the longest record values may wrap rather than push the sheet sideways */
  .spec { flex-wrap: wrap; row-gap: 2px; }
  .spec dd { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Trade record: chart on the left, the readable record on the right
   ========================================================================== */
.dialog__card { width: min(1080px, 100%); }

/* 3 : 2 in favour of the chart: the record is short labels, the setup needs the width */
.dlg-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--sp-3);
  align-items: start;
}

.dlg-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

.dlg-col--chart .chart__stage {
  height: 430px;
  min-height: 300px;
  max-height: none;
}

.dlg-col--info { gap: 14px; }
.dlg-col--info .more__item { border-top: 0; border-bottom: 1px solid var(--border); }
.dlg-col--info .more__summary { min-height: 40px; }

.dlg.is-nochart .dlg-grid { grid-template-columns: minmax(0, 1fr); }
.dlg.is-nochart .dlg-col--chart { display: none; }

/* the setup checklist: four rows, the same four things on every trade */
.setup {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.setup__row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  background: var(--raised);
}
.setup__row + .setup__row { border-top: 1px solid var(--border); }
.setup__i { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
.setup__k { font-size: var(--fs-sm); color: var(--fg-2); }
.setup__v { font-size: var(--fs-sm); font-weight: 500; color: var(--fg); text-align: right; }

.specs--wide { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.specs--wide .spec { padding: 7px 0; }
.spec__note { margin-left: 6px; font-family: var(--font-ui); font-size: var(--fs-meta); color: var(--fg-2); }

/* the account strip under the analysis table */
.acct {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: var(--sp-3) 0 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.acct__item { background: var(--surface); padding: 11px 13px; min-width: 0; }
.acct__item dt {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.acct__item dd {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-figure);
  color: var(--fg);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dlg-grid { grid-template-columns: minmax(0, 1fr); }
  .dlg-col--chart .chart__stage { height: 30vh; min-height: 200px; }
  .dlg-head { padding: 12px var(--sp-2); }
  .dlg-body { padding: var(--sp-2); }
}

@media (max-width: 560px) {
  .acct { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct__item:nth-child(5) { grid-column: 1 / -1; }
}
/* ==========================================================================
   Page blocks: the components used by the inner pages. Same tokens, same
   rhythm as styles.css. Loaded after it on every page.
   ========================================================================== */

/* ---------- page head ---------- */
.page-head { padding: var(--sp-4) 0 var(--sp-3); }
.page-head h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.page-lead {
  margin-top: var(--sp-2);
  max-width: 60ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--fg-2);
}
.page-meta {
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}
.page-meta code { color: var(--fg-2); }

.section { padding: var(--sp-5) 0 0; scroll-margin-top: 80px; }

/* pages carrying the sticky sub-nav need clearance for both bars, so an
   anchor never lands underneath them */
html.has-subnav .section { scroll-margin-top: 128px; }
.subnav + main .page-head { padding-top: var(--sp-3); }

.section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

/* ---------- KPI strip ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.kpi { background: var(--surface); padding: 18px 20px; }
.kpi__label {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.kpi__value {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-figure);
  font-weight: 600;
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-display);
}
.kpi__value.is-win { color: var(--success); }
.kpi__sub {
  margin-top: 6px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}
.kpi__bar { margin-top: 10px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.kpi__bar i { display: block; height: 100%; background: var(--warning); }

/* ---------- change explainer (hero right) ---------- */
.change__label {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.change__value {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-figure-lg);
  font-weight: 600;
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-display);
}
.change__rows {
  margin-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.change__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.change__row dt { color: var(--fg-2); }
.change__row dd {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.change__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* ---------- steps legend ---------- */
.steps-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.step-chip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  background: var(--raised);
  border-radius: var(--r-md);
}
.step-chip__n {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
}
.step-chip__t { font-size: var(--fs-sm); color: var(--fg); }

/* ---------- pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  font-size: var(--fs-meta);
  color: var(--fg-2);
  white-space: nowrap;
}
.pill--live { color: var(--fg); }
.pill--live::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--success);
}
.pill--soft { border-color: var(--border); }

/* ---------- empty state ---------- */
.empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.empty__body { max-width: 62ch; }
.empty__title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--ls-title); line-height: var(--lh-title); }
.empty__text { margin-top: 6px; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-2); }
.empty__fields {
  margin-top: 10px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
  max-width: 68ch;
}

/* ---------- dense data table ---------- */
.dt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt th {
  padding: 0 10px 10px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--fg-2);
  text-align: left;
  white-space: nowrap;
}
.dt th.num { text-align: right; }
.dt tr + tr td { border-top: 1px solid var(--border); }
.dt td { padding: 10px; font-size: var(--fs-sm); vertical-align: middle; }
.dt td.num { text-align: right; font-family: var(--font-mono); }
.trade-table .dt__time { display: none; }
.dt td:first-child, .dt th:first-child { padding-left: 0; }
.dt td:last-child, .dt th:last-child { padding-right: 0; }
.dt .sym { font-weight: 600; }
.dt .sym span { font-weight: 400; color: var(--fg-2); font-size: var(--fs-meta); margin-left: 6px; }
.dt .sub { display: block; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--fg-2); margin-top: 2px; }

/* ---------- hộp ủng hộ (/about, chỉ hiện khi có địa chỉ ví) ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  place-items: center;
  padding: var(--sp-3);
  background: rgba(3, 6, 10, 0.74);
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(560px, 100%);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.addr {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  word-break: break-all;
}
.addr code { font-size: var(--fs-meta); color: var(--fg-2); }
.note { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-2); }

/* ---------- sticky in-page sub-nav ---------- */
.subnav {
  position: sticky;
  top: 64px;
  z-index: 15;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.subnav__inner {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 120ms var(--ease), border-color 120ms var(--ease);
}
.subnav a:hover { color: var(--fg); }
.subnav a.is-active { color: var(--fg); border-bottom-color: var(--fg); }

/* ---------- metric grid ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.metric { background: var(--surface); padding: 18px 20px; }
.metric__label { font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-2); }
.metric__value {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-figure);
  font-weight: 600;
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-display);
}
.metric__note { margin-top: 6px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--fg-2); }

/* ---------- horizontal bar list ---------- */
.bars { display: grid; gap: 10px; }
.bar-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  align-items: center;
  gap: var(--sp-2);
}
.bar-row__key { font-size: var(--fs-sm); color: var(--fg); }
.bar-row__key span { display: block; margin-top: 1px; color: var(--fg-2); font-size: var(--fs-meta); white-space: nowrap; }
.bar-row__track { position: relative; height: 22px; }
.bar-row__axis {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 1px;
  background: var(--border-strong);
}
.bar-row__fill { position: absolute; top: 4px; height: 14px; border-radius: 2px; }
.bar-row__fill.is-win { background: var(--success); }
.bar-row__fill.is-loss { background: var(--danger); }
.bar-row__val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-align: right;
  white-space: nowrap;
}

/* ---------- param cards ---------- */

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--border); }
.acc__item { border-bottom: 1px solid var(--border); }
.acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 56px;
  padding: 14px 2px;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-title);
  border-radius: var(--r-sm);
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q:hover { color: var(--fg); background: var(--raised); }
.acc__q::after {
  content: "+";
  flex: 0 0 auto;
  width: 20px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: var(--fg-2);
  transition: transform 160ms var(--ease);
}
.acc__item[open] .acc__q::after { transform: rotate(45deg); }
.acc__a {
  padding: 0 0 20px;
  max-width: 72ch;
  font-size: var(--fs-body);
  line-height: var(--lh-read);
  color: var(--fg-2);
}

/* ---------- question / answer list ---------- */
.qa { display: grid; gap: var(--sp-3); }
.qa__item { padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.qa__q { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-title); letter-spacing: var(--ls-title); }
.qa__a { margin-top: 8px; max-width: 72ch; font-size: var(--fs-body); line-height: var(--lh-read); color: var(--fg-2); }

/* ---------- long-form prose ---------- */
.prose { max-width: 74ch; }
.prose > * + * { margin-top: 14px; }
.prose h2 {
  margin-top: var(--sp-4);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
}
.prose h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
}
.prose p, .prose li { font-size: var(--fs-body); line-height: var(--lh-read); color: var(--fg-2); }
.prose strong, .prose b { color: var(--fg); font-weight: 600; }
.prose ul, .prose ol { padding-left: 20px; display: grid; gap: 8px; }
.prose li::marker { color: var(--fg-2); }
.prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.prose a:hover { text-decoration-color: var(--fg-2); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--fg);
}
.prose blockquote {
  padding: 14px 18px;
  background: var(--raised);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  line-height: var(--lh-read);
  color: var(--fg-2);
}
.prose .dt { margin-top: var(--sp-2); }

/* ---------- note box ---------- */
.note-box {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.note-box--spaced { margin-top: var(--sp-3); }
.note-box__label {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.note-box p { margin-top: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-2); }
.note-box > p:last-child { max-width: 74ch; }

/* ---------- article cards ---------- */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-2);
}
.post-card {
  display: block;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.post-card:hover { border-color: var(--border-strong); background: var(--raised); }
.post-card__date {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
}
.post-card__title {
  margin-top: 8px;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
}
.post-card__text { margin-top: 8px; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-2); }
.post-card__more {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-strong);
}

/* ---------- article header ---------- */
.article-head { padding: var(--sp-4) 0 var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); }
.article-head .page-meta { margin-top: var(--sp-2); }

/* ---------- see-also ---------- */
.see-also {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.see-also__label {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.see-also__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }

/* ---------- misc links ---------- */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color 120ms var(--ease);
}
.text-link:hover { text-decoration-color: var(--fg-2); }


/* ---------- segmented filter ---------- */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.seg__btn {
  min-height: 36px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--r-sm) - 3px);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.seg__btn:hover { color: var(--fg); }
.seg__btn[aria-pressed="true"] {
  background: var(--raised);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.seg__btn span {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
}

/* ---------- expandable trade log ---------- */
/* Bộ lọc và phân trang đánh dấu dòng bị ẩn bằng thuộc tính `hidden`. Ở chế độ xếp dọc,
   chính các rule `.dt__row { display: grid }` và `.dt tr.tgroup { display: block }` đè lên
   `[hidden]` của trình duyệt, nên dòng bị ẩn vẫn chiếm chỗ và bảng dài gấp đôi. */
.dt [hidden] { display: none !important; }

.tgroup th {
  padding: var(--sp-3) 0 8px;
  border-top: 1px solid var(--border-strong);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
  text-align: left;
  white-space: nowrap;
}
.dt tr.tgroup:first-child th { padding-top: 0; border-top: 0; }
.tgroup th span {
  margin-left: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
}
.tgroup th .tgroup__pnl { color: var(--fg); }
.dt tr.tgroup + tr td { border-top: 0; }

.trade-table td[data-label="Time"] {
  font-family: var(--font-mono);
  color: var(--fg-2);
  white-space: nowrap;
}
.trade-table td[data-label="Setup"],
.trade-table td[data-label="Size"] { color: var(--fg-2); }
.trade-table .px { font-family: var(--font-mono); white-space: nowrap; }
.trade-table .arrow { margin: 0 4px; font-size: var(--fs-meta); color: var(--fg-2); }
.trade-table td.c-act { text-align: right; padding-right: 0; }

/* The log is paged: one page is one round trip, so the table height and the DOM
   stay flat however long the history is. */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--fg);
  text-decoration: none;
}
.pager__btn:hover { border-color: var(--accent); color: var(--accent-hi); }
.pager__btn.is-disabled { border-color: var(--border); color: var(--muted); }
.pager__count { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-2); }
/* a day cut by the page boundary says so, and keeps the whole day's totals */
.tgroup__cont {
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.rowbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms var(--ease), background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.rowbtn:hover { color: var(--fg); background: var(--surface); border-color: var(--border); }

/* ---------- equity chart ---------- */
.equity { margin: 0; }
.equity__stage {
  position: relative;
  height: 320px;
  padding: 8px 4px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.equity__svg { display: block; width: 100%; height: 100%; }
.equity .grid { stroke: var(--border); stroke-width: 1; }
.equity .base { stroke: var(--fg-2); opacity: 0.55; stroke-dasharray: 4 5; stroke-width: 1; }
.equity .area { fill: var(--success); opacity: 0.08; }
.equity .line { fill: none; stroke: var(--success); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.equity .dot { fill: var(--surface); stroke: var(--success); stroke-width: 2; }
.equity .lbl { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0; fill: var(--fg-2); }
.equity .lbl--end { fill: var(--success); font-weight: 600; }
.equity figcaption { margin-top: var(--sp-1); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--fg-2); }

/* ---------- figure callouts ---------- */
.figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--sp-2);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fig { background: var(--surface); padding: 14px 18px; }
.fig dt {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.fig dd {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-figure-sm);
  font-weight: 600;
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-title);
}
.fig__sub { margin-top: 4px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--fg-2); }

/* ---------- split copy / figures ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--sp-5);
  align-items: start;
}
.fig-list { border-top: 1px solid var(--border-strong); }
.fig-list .fig {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 14px 0;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.fig-list dt { font-size: var(--fs-sm); color: var(--fg-2); letter-spacing: 0; text-transform: none; }
.fig-list dd { margin-top: 0; font-size: var(--fs-figure-sm); white-space: nowrap; }
.fig-list .fig__sub { display: block; margin-top: 2px; }

/* ---------- numbered rules ---------- */
.sequence-lead {
  max-width: 74ch;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.rules { list-style: none; border-top: 1px solid var(--border-strong); }
.rule {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.rule__n {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  padding-top: 3px;
}
.rule h3 { font-size: var(--fs-h3); line-height: var(--lh-title); letter-spacing: var(--ls-title); }
.rule p {
  margin-top: 8px;
  max-width: 74ch;
  font-size: var(--fs-body);
  line-height: var(--lh-read);
  color: var(--fg-2);
}
.rule .rule__note { margin-top: 10px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.rule .rule__note code { color: var(--fg-2); }

/* ---------- data table toggle ---------- */
.data-toggle { margin-top: var(--sp-2); border-top: 1px solid var(--border); }
.data-toggle summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  cursor: pointer;
}
.data-toggle summary::-webkit-details-marker { display: none; }
.data-toggle summary:hover { color: var(--fg); }
.data-toggle summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--fg-2);
}
.data-toggle[open] summary::after { content: "\2212"; }
.data-toggle .dt { margin-top: var(--sp-2); }

/* ---------- inner-page chart headings and daily bars ---------- */
.sub-h {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
}
.sub-h__sub { margin-top: 4px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--fg-2); }

.chart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.panel {
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.panel .sub-h { margin-bottom: var(--sp-2); }
#breakdown .split { align-items: stretch; }
/* Biểu đồ PnL: canvas do Chart.js vẽ sau khi trang tải (`/vendor/daybars-chart.js`), khối
   `.daybars` bên dưới là bản server đã nướng sẵn. Bản dự phòng chỉ bị ẩn khi canvas vẽ
   xong — không có JS thì người đọc vẫn thấy đúng số liệu thay vì một khung trống. */
.daychart { position: relative; }
.daychart[data-daychart="ready"] [data-daybars-fallback] { display: none; }
.daychart__stage { position: relative; height: 224px; }
.daychart__stage canvas { display: block; }
/* Bản dự phòng: số cột = số ngày có lệnh đóng, và con số đó thay đổi theo tuần: khai báo
   cứng 5 cột sẽ đẩy ngày thứ sáu xuống hàng dưới và làm panel cao gấp đôi. */
.daybars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}
.daybar { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.daybar__val {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: var(--lh-figure);
  text-align: center;
  white-space: nowrap;
}
.daybar__zone { position: relative; height: 168px; }
.daybar__zone::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--border-strong);
}
.daybar__bar {
  position: absolute;
  left: 24%;
  right: 24%;
  min-height: 2px;
  border-radius: 2px;
}
.daybar__bar.is-win { bottom: 50%; background: var(--success); border-radius: 2px 2px 0 0; }
.daybar__bar.is-loss { top: 50%; background: var(--danger); border-radius: 0 0 2px 2px; }
.daybar__day {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
  text-align: center;
  white-space: nowrap;
}

.chart-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-2);
}
.chart-foot strong { color: var(--fg); font-weight: 500; }

@media (max-width: 760px) {
  .daybar__zone { height: 128px; }
  .chart-head { align-items: flex-start; }
}
/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .trade-table th.col-setup,
  .trade-table td[data-label="Setup"] { display: none; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .equity__stage { height: 280px; }
  .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kpis, .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-head { position: static; }
  .subnav { top: 0; }
  /* header is no longer sticky, so only the sub-nav covers an anchor */
  html.has-subnav .section { scroll-margin-top: 64px; }
}

@media (max-width: 760px) {
  .kpis, .metrics { grid-template-columns: minmax(0, 1fr); }
  .steps-legend { grid-template-columns: minmax(0, 1fr); }
  .bar-row { grid-template-columns: 74px minmax(0, 1fr) 78px; gap: 10px; }
  .bar-row__key { font-size: var(--fs-meta); }
  .empty { flex-direction: column; align-items: flex-start; }
  .empty .btn { width: 100%; }

  /* dense tables become stacked records */
  .dt thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .dt, .dt tbody, .dt td { display: block; }
  .dt tbody .dt__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--border);
  }
  .dt td { padding: 0; text-align: left; }
  .dt td.num { text-align: left; }
  .dt td[data-label="Symbol"], .dt td[data-label="Pair"] { grid-column: 1; }
  .dt td[data-label="Status"] { grid-column: 2; text-align: right; }
  .dt td[data-label="Decision"], .dt td[data-label="Confidence"], .dt td[data-label="Updated"],
  .dt td[data-label="Execution"] { grid-column: 1 / -1; }
  .dt td[data-label="Current step"] { grid-column: 1 / -1; }
  #status .dt tbody .dt__row { gap: 8px 12px; padding: 12px 0; }
  #status td[data-label="Decision"] { grid-column: 1; }
  #status td[data-label="Confidence"] { grid-column: 2; justify-self: end; text-align: right; }
  #status td[data-label="Updated"] { grid-column: 1 / -1; }
  #status td[data-label="Decision"]::before,
  #status td[data-label="Confidence"]::before,
  #status td[data-label="Updated"]::before {
    display: block;
    content: attr(data-label);
    margin-bottom: 2px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }
}

/* ---------- inner-page mobile additions ---------- */
@media (max-width: 900px) {
  /* Bảng dày 8 cột vẫn phải đọc được trên tablet: cho cặp giá xuống dòng thay vì để
     `.table-wrap` cuộn ngang, vì cuộn ngang trong bảng làm mất cột "Result" khỏi mắt. */
  .trade-table td[data-label="Entry to exit"] { white-space: normal; }
  .trade-table .px { white-space: normal; }
  /* 720px khả dụng ở 768 không đủ cho 8 cột với đệm 10px mỗi bên: bớt đệm để bảng vừa
     khung, thay vì để người đọc phải kéo ngang mới thấy cột Result. */
  .trade-table th, .trade-table td { padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 760px) {
  .section-h { align-items: flex-start; }
  .seg__btn { padding: 0 9px; }
  .figs { grid-template-columns: minmax(0, 1fr); }
  .equity__stage { height: 240px; padding: 4px 0 0; }
  /* Bản dự phòng không có JS: một tuần có thể có 6 ngày giao dịch và ở khung hẹp 6 cột
     không còn đủ chỗ cho nhãn ngày, nên lưới tự xuống hàng thay vì tràn ra ngoài panel.
     Có JS thì canvas đã thay chỗ này bằng thanh ngang. */
  .daybars { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
  .rule { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }

  .dt tr.tgroup { display: block; }
  .dt tr.tgroup th { display: block; padding-top: var(--sp-3); white-space: normal; }
  .dt tr.tgroup:first-child th { padding-top: 0; }

  /* One record, one rule. The shared `tr + tr td` border above draws a line
     between cells, which reads as a cut card once the table is stacked. */
  .dt tr + tr td { border-top: 0; }
  .trade-table tbody .dt__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "sym  pnl"
      "px   rr"
      "why  act";
    gap: 4px 8px;
    padding: 12px 0;
  }
  .trade-table td[data-label="Symbol"] { grid-area: sym; }
  .trade-table td[data-label="Result"] { grid-area: pnl; text-align: right; }
  .trade-table td[data-label="Result"] .cell-r { display: inline; margin-left: 5px; font-size: var(--fs-meta); }
  .trade-table td[data-label="RR"] { grid-area: rr; text-align: right; color: var(--fg-2); font-family: var(--font-mono); align-self: start; }
  /* 14 px keeps the pair on one line down to 360 px without shrinking the Result */
  .trade-table td[data-label="Entry to exit"] { grid-area: px; font-size: 14px; white-space: nowrap; }
  .trade-table td[data-label="Entry to exit"] .arrow { margin: 0 4px; }
  .trade-table td[data-label="RR"]::before { content: "RR "; font-size: var(--fs-meta); }
  /* size and clock ride on the symbol line: the row keeps three lines, and the
     close reason gets the full width of the card */
  .trade-table td[data-label="Vol"], .trade-table td[data-label="Closed at"] { display: none; }
  .trade-table td[data-label="Symbol"] .cell-lots,
  .trade-table td[data-label="Symbol"] .cell-hm {
    display: inline;
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--fg-2);
  }
  .trade-table td[data-label="Close reason"] {
    grid-area: why;
    align-self: center;
    min-width: 0;
    font-size: var(--fs-meta);
    color: var(--fg-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trade-table td.c-act { grid-area: act; align-self: center; }
  /* the row's only control: keep the 44 px target and give it an outline */
  .trade-table .rowbtn {
    margin-left: 4px;
    padding: 0 12px;
    min-height: 40px;
    border-color: var(--border-strong);
    color: var(--fg);
  }
  .dt tr.tr-detail { display: block; }
  .dt tr.tr-detail[hidden] { display: none; }
  .dt tr.tr-detail td { display: block; }
  .rec .spec { flex-wrap: wrap; row-gap: 2px; }
  .rec .spec dd { white-space: normal; text-align: left; }
  .note-box { display: block; padding: var(--sp-2); }
  .note-box p { margin-top: 8px; }
}

/* ==========================================================================
   Article, FAQ and journal pages
   ========================================================================== */
.doc { max-width: 74ch; }
.doc h2 {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
}
.doc h2:first-child { margin-top: 0; }
.doc h3 {
  margin: var(--sp-3) 0 6px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--fg);
}
.doc p {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.doc p strong, .doc p b { color: var(--fg); font-weight: 600; }
.bullets {
  margin: 0 0 var(--sp-3);
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.bullets li { margin-bottom: 6px; }
.bullets li::marker { color: var(--muted); }

.qa { display: grid; gap: 0; max-width: 78ch; }
.qa__item { border-top: 1px solid var(--border); }
.qa__item:last-child { border-bottom: 1px solid var(--border); }
.qa__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 14px 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--muted);
}
.qa__item[open] .qa__q::after { content: "−"; }
.qa__item[open] .qa__q { color: var(--fg); }
.qa__a {
  margin: 0 0 16px;
  max-width: 70ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.card-list { display: grid; gap: var(--sp-2); max-width: 78ch; }
.card-link {
  display: block;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--raised);
  text-decoration: none;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.card-link:hover { border-color: var(--border-strong); }
.card-link__meta {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.card-link__title {
  margin: 0 0 6px;
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  color: var(--fg);
}
.card-link__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}


/* ==========================================================================
   Khối riêng của landing — không có trong prototype
   --------------------------------------------------------------------------
   Bốn nhóm: khe quảng cáo (AdSense đọc khung này), hợp đồng trạng thái dữ liệu
   mà `site.js` bật/tắt qua `data-state` trên <html>, dấu lãi/lỗ cho vòng tick
   60 giây, và tiện ích xếp khối dùng ở /about, /journal, /states.
   ========================================================================== */

/* ---------- khe quảng cáo ---------- */
.ad { margin-block: var(--sp-5); }
.ad-label {
  margin: 0 0 6px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.ad-frame {
  border-radius: var(--r-md);
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: var(--sp-3);
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--muted);
}
.ad-frame--top { min-height: 110px; }
.ad-frame--inline { min-height: 130px; }
.ad-frame--footer { min-height: 110px; }
.ad-frame--feed { min-height: 120px; }
.ad-frame--halfpage { min-height: 280px; }

/* ---------- lệnh đang mở: thẻ + thanh giá ----------
   Mỗi lệnh một thẻ, trong thẻ có một thanh giá ngang trả lời bốn câu mà không cần chú giải:
   giá đang ở đâu giữa SL và TP, SL còn cách bao xa (điểm và R), TP gần nhất còn cách bao xa,
   và SL đã bị dời chưa. Thanh giá thang riêng cho từng thẻ (min/max của
   {SL ban đầu, SL hiện tại, entry, TP1, TP2, giá hiện tại) và bị lật với lệnh SELL để SL
   luôn nằm bên trái. Hai thẻ một hàng từ 900px; dưới mức đó một thẻ một hàng. */
.opengrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.opengrid > .noopen { grid-column: 1 / -1; }

.posc {
  min-width: 0;
  padding: 9px 14px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
/* Lệnh chờ khớp chưa có vị thế nào: nền trong hơn để mắt không đọc nó như một lệnh đang chạy. */
.posc.is-pending { background: transparent; }

.posc__head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.posc__sym {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}
.posc__side {
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  line-height: 1.45;
}
.posc__side.is-buy { color: var(--success); border-color: rgba(34, 197, 94, 0.45); }
.posc__side.is-sell { color: var(--danger-text); border-color: rgba(239, 68, 68, 0.45); }
.posc__vol { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-2); white-space: nowrap; }
.posc__pnl { margin-left: auto; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); }
.posc__money { font-size: var(--fs-sm); font-weight: 600; }
.posc__r { font-size: var(--fs-meta); font-weight: 500; }
.posc__pending {
  margin-left: auto;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- thanh giá: cao 48px, đường giá ở 24px, nhãn 13px ---- */
.posc__rail { position: relative; height: 48px; margin-top: 2px; }
.posc__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  height: 1px;
  background: var(--border-strong);
}
.posc__at { position: absolute; top: 0; height: 100%; width: 0; }

.posc__dot,
.posc__tick { position: absolute; left: 0; transform: translateX(-50%); }
.posc__dot.is-stop { top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.posc__dot.is-tp1,
.posc__dot.is-tp2 { top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
/* Giá hiện tại là mốc DUY NHẤT có vòng sáng và nhãn nằm TRÊN thanh giá: nó là điểm mắt
   phải tìm trước, và là mốc duy nhất dịch chuyển khi có tick. */
.posc__dot.is-price {
  top: 19px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--fg-2);
}
.posc__tick { top: 16px; width: 2px; height: 17px; border-radius: 1px; background: var(--accent); }
.posc__tick.is-init {
  top: 19px;
  width: 0;
  height: 11px;
  background: none;
  border-left: 1px dashed var(--muted);
}

.posc__lbl {
  position: absolute;
  top: 29px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg-2);
  white-space: nowrap;
}
.posc__lbl.is-up { top: -2px; color: var(--fg); }
.posc__at.is-left .posc__lbl { transform: translateX(0); }
.posc__at.is-right .posc__lbl { transform: translateX(-100%); }
.posc__lbl-k { margin-left: 4px; font-style: normal; color: var(--muted); }
.posc__glyph { display: none; margin-left: 2px; font-size: 10px; }
.posc__lbl.is-clamped .posc__glyph { display: inline; }
/* Nhãn bị bỏ khi hai nhãn sát nhau (xem `settleRails()` trong site.js): dấu vẫn ở lại. */
.posc__lbl.is-gone,
.posc__moved.is-gone { display: none; }

/* SL đã dời: ngoặc vàng từ mốc SL ban đầu tới SL hiện tại. */
.posc__move {
  position: absolute;
  top: 16px;
  height: 5px;
  border: 1px solid var(--warning);
  border-bottom: 0;
}
.posc__moved {
  position: absolute;
  top: -1px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.2;
  color: var(--warning);
  white-space: nowrap;
}

/* Chân thẻ: trạng thái SL + khoảng cách tới SL/TP1. Một dòng, không chú giải. */
.posc__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--fg-2);
}
.posc__sep { color: var(--border-strong); }
.posc__state { color: var(--fg-2); }
.posc__state.is-moved { color: var(--warning); }
.posc__dist b { font-weight: 600; }

@media (max-width: 900px) {
  .opengrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .posc { padding: 8px 12px 7px; }
  /* Điện thoại giữ thanh giá ngang và bỏ hậu tố SL/TP1/TP2: giá đã đủ để đọc. */
  .posc__lbl-k { display: none; }
}

/* ---------- hộp thoại bản ghi: câu kế hoạch + lý do vào lệnh ---------- */
.dlg-plan {
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--raised);
}
.dlg-plan__label {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.dlg-plan__text { margin-top: 4px; font-size: var(--fs-sm); }
.dlg-why {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* ---------- CTA riêng của header ---------- */
.head-actions { display: flex; align-items: center; flex: 0 0 auto; }
@media (max-width: 900px) { .head-actions { display: none; } }

/* ---------- dấu lãi/lỗ + nhịp tick ---------- */
.pos { color: var(--success); }
.neg { color: var(--danger-text); }
.strong { font-weight: 600; }
.warn-text { color: var(--warning); }

@keyframes flash-up { from { background: color-mix(in srgb, var(--success) 26%, transparent); } to { background: transparent; } }
@keyframes flash-down { from { background: color-mix(in srgb, var(--danger) 26%, transparent); } to { background: transparent; } }
.flash-up { animation: flash-up 0.9s ease-out 1; }
.flash-down { animation: flash-down 0.9s ease-out 1; }

/* ---------- dải nhắc ---------- */
.banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  background: var(--surface);
  color: var(--fg-2);
}
.banner-info { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent-hi); }
.banner-warn { background: color-mix(in srgb, var(--warning) 14%, var(--bg)); color: var(--warning); }

/* ---------- trạng thái dữ liệu ----------
   `fresh` là trạng thái KHÔNG có `data-state` trên <html>, nên khối của mọi trạng
   thái khác phải ẩn mặc định. Không thể dựa vào thuộc tính `hidden`: các class như
   `.banner`, `.state` đều khai `display` nên `hidden` bị đè, và nếu chỉ ẩn khi CÓ
   `data-state` thì trang tươi sẽ hiện cả bốn khối cùng lúc. */
.only-empty,
.only-error,
.only-notick,
.only-closed { display: none; }

html[data-state="empty"] .only-empty,
html[data-state="error"] .only-error,
html[data-state="no-tick"] .only-notick,
html[data-state="closed"] .only-closed { display: flex; }

html[data-state="empty"] .state.only-empty,
html[data-state="error"] .state.only-error { display: block; }

html[data-state="empty"] .hide-empty,
html[data-state="error"] .hide-error,
html[data-state="loading"] .hide-loading { display: none; }

.state {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--raised);
  padding: var(--sp-3);
}
.state__title { font-size: var(--fs-body); font-weight: 600; }
.state__text {
  margin-top: 6px;
  max-width: 64ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.state__text + .state__text { margin-top: var(--sp-2); }

/* ---------- tiện ích xếp khối cho /about, /journal, /states ---------- */
.eyebrow {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  .flash-up, .flash-down { animation: none; }
}
/* ==========================================================================
   Lịch kinh tế (`/calendar`, dải né tin ở trang chủ)
   `/calendar` là một cái bảng, không phải một trang trình bày: `h1`, một dòng
   meta, nhãn đếm sự kiện, bảng tuần, một dòng ghi chú. Bề rộng cột khai báo
   bằng `colgroup` + `table-layout: fixed` nên ô đếm ngược chạy từng giây mà
   không cột nào xê dịch, và tổng bề rộng cột luôn nhỏ hơn container — bảng
   không bao giờ phải cuộn ngang.
   ========================================================================== */
.cal-page { padding: 0; }
.cal-title {
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
}
.cal-meta {
  margin-top: 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--muted);
}

/* Nhãn là caption của bảng: cách trên đủ để không đọc thành dòng meta thứ hai,
   cách dưới đủ để hàng tiêu đề đọc là phần đầu của bảng chứ không phải phần đuôi
   của nhãn. */
.cal-label {
  margin: 14px 0 8px;
  font-size: var(--fs-meta);
  line-height: 1.25;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- bảng tuần ---------- */
.cal-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* bảng tự quản việc cuộn: mở dòng gộp hay làm mới mỗi phút không được kéo trang */
  overflow-anchor: none;
}
.cal-table thead th {
  padding: 0 8px 2px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}
.cal-table thead th.num { text-align: right; }
.cal-table th:first-child,
.cal-table td:first-child { padding-left: 0; }
.cal-table th:last-child,
.cal-table td:last-child { padding-right: 0; }

.cal-col-time { width: 62px; }
/* cố định vì số đếm ngược không được tự đổi bề rộng cột; 112 chứa cả giá trị
   dài nhất (23h 59m 59s) lẫn chữ "COUNTDOWN" ở hàng tiêu đề. */
.cal-col-cd { width: 112px; }
.cal-col-imp { width: 88px; }
.cal-col-ccy { width: 50px; }
.cal-col-fig { width: 66px; }
.cal-col-aff { width: 108px; }

.cal-row td {
  padding: 5px 8px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  vertical-align: middle;
}
.cal-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  white-space: nowrap;
}
.cal-dot--live {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--danger);
  vertical-align: 1px;
}
.cal-ccy {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
  white-space: nowrap;
}
/* hai dòng ở desktop; khối mobile hạ xuống một dòng để hàng điện thoại đúng ba dòng */
.cal-ev {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--fg);
  line-height: 1.3;
}
.cal-row.is-med .cal-ev { color: var(--fg-2); }
/* Ô duy nhất trên trang đổi mỗi giây. Số tabular + cột cố định nên `9m 59s` →
   `10m 00s` không xê dịch gì. Ba màu, không hơn: chữ phụ, vàng trong 15 phút
   cuối, đỏ khi cửa sổ mở. */
td.cal-cd {
  padding-left: 0;
  padding-right: 8px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--fg-2);
  white-space: nowrap;
}
td.cal-cd--soon { color: var(--warning); }
td.cal-cd--live { color: var(--danger-text); }
td.cal-cd--gone { color: var(--muted); }
.cal-fig {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
  white-space: nowrap;
}
.cal-aff { text-align: right; }
/* Nhãn impact là nhãn, không phải chữ đọc: 11px với tracking rộng để chữ nằm gọn
   trong hộp 60px và không đọc to hơn tin mà nó đánh dấu. Cùng chiều cao, cùng
   bán kính, cùng viền 1px với chip symbol để hai nhãn trong một dòng thẳng hàng. */
.cal-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 60px;
  height: 23px;
  padding: 0 5px;
  border: 1px solid;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-caps);
}
.cal-chip.is-high {
  color: var(--danger-text);
  border-color: rgba(246, 109, 103, 0.45);
  background: rgba(239, 68, 68, 0.12);
}
.cal-chip.is-med {
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
}
.cal-aff__chip {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
  white-space: nowrap;
}
.cal-aff__n { margin-left: 4px; color: var(--muted); }
.cal-aff__none { font-size: var(--fs-meta); color: var(--muted); }

.cal-row.is-live { background: var(--raised); }

/* Tin đã ra là lịch sử: giữ nguyên chiều cao và số liệu, chỉ mất tương phản. Làm
   mờ bằng màu, không dùng `opacity`, vì 13px ở alpha một phần là không đọc được
   trên nền này. Ô `Actual` được miễn: nó là lý do dòng đó còn nằm trên bảng. */
.cal-row.is-released .cal-time,
.cal-row.is-released .cal-ccy,
.cal-row.is-released .cal-chip,
.cal-row.is-released .cal-fig { color: var(--muted); }
.cal-row.is-released .cal-ev { color: var(--fg-2); }
.cal-row.is-released .cal-chip { background: none; border-color: var(--border-strong); }
.cal-row.is-released .cal-fig--actual { color: var(--fg); }

/* Nơi trang dừng lại: dòng nằm dưới header dính (64px) chứ không bị nó che. */
.cal-row,
.cal-day { scroll-margin-top: 96px; }

/* ---------- dòng gộp: một dòng 30px thay cho cả ngày lịch sử ---------- */
.cal-table tbody[hidden] { display: none; }
.cal-fold td { padding: 0; }
.cal-fold__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-meta);
  line-height: 1;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.cal-fold__txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-fold__chev {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: -3px 3px 0 auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1);
}
.cal-fold__btn[aria-expanded="true"] .cal-fold__chev { transform: rotate(-135deg); margin-top: 3px; }
.cal-fold__btn:hover { color: var(--fg-2); }
.cal-fold__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  .cal-fold__chev { transition: none; }
}

.cal-day th {
  padding: 2px 0 1px;
  border-top: 1px solid var(--border-strong);
  background: var(--bg);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
  text-align: left;
}
.cal-empty td { padding: 2px 0; font-size: var(--fs-meta); color: var(--muted); }

/* tiêu đề nhóm ngày dính dưới header khi bảng cuộn */
@media (min-width: 901px) {
  .cal-day th { position: sticky; top: 64px; z-index: 2; }
}

.cal-foot {
  margin-top: var(--sp-2);
  max-width: 130ch;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--muted);
}

/* ---------- điện thoại: bảng thành lưới ba dòng ---------- */
@media (max-width: 760px) {
  /* hàng tiêu đề bị cắt khỏi màn hình, nhãn cột đi vào `data-label` của từng ô */
  .cal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .cal-table,
  .cal-table tbody,
  .cal-table td { display: block; }
  .cal-table tbody .cal-row {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "time cd   imp  ccy"
      "ev   ev   ev   ev"
      "fcst prev act  aff";
    gap: 1px 8px;
    padding: 3px 0;
    border-top: 1px solid var(--border);
  }
  .cal-row td { padding: 0; border-top: 0; }
  .cal-row td.cal-time { grid-area: time; }
  /* đếm ngược đứng cạnh giờ trên dòng đầu: 06:30 · 1h 54m 00s */
  .cal-row td.cal-cd {
    grid-area: cd;
    min-width: 0;
    text-align: left;
    font-size: var(--fs-meta);
  }
  .cal-row td.cal-cd::before {
    content: "\00b7";
    margin-right: 5px;
    color: var(--border-strong);
  }
  .cal-row td.cal-imp { grid-area: imp; }
  .cal-row td.cal-ccy { grid-area: ccy; text-align: right; }
  .cal-row td.cal-ev { grid-area: ev; margin-top: 1px; -webkit-line-clamp: 1; }
  .cal-row,
  .cal-day { scroll-margin-top: 72px; }
  .cal-fold { display: block; }
  /* trên điện thoại không còn hàng tiêu đề, nên dòng gộp tự mang đường kẻ ngăn cách */
  .cal-fold__btn { border-top: 1px solid var(--border); }
  .cal-row td[data-label="Fcst"] { grid-area: fcst; text-align: left; }
  .cal-row td[data-label="Prev"] { grid-area: prev; text-align: left; }
  .cal-row td[data-label="Actual"] { grid-area: act; text-align: left; }
  .cal-row td.cal-aff { grid-area: aff; text-align: right; }
  /* ba chữ cái ở dòng ba: F / P / A */
  .cal-row td[data-label="Fcst"]::before { content: "F "; color: var(--muted); }
  .cal-row td[data-label="Prev"]::before { content: "P "; color: var(--muted); }
  .cal-row td[data-label="Actual"]::before { content: "A "; color: var(--muted); }
  /* `tr` vẫn là `table-row` nên một `th` block bên trong sẽ bị bọc vào ô ẩn danh và co
     lại bằng nội dung; cho cả hai thành block thì tiêu đề ngày rộng đúng bằng bảng. */
  .cal-table tr.cal-day { display: block; }
  .cal-day th { display: block; padding: 4px 0 1px; }
  .cal-empty { display: block; }
  .cal-empty td { display: block; padding: 1px 0 4px; }
}

/* Dải một dòng ở trang chủ: cùng dữ liệu, chỉ đủ chỗ cho một câu. */
.nstrip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px var(--sp-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.nstrip--block { border-left-color: var(--danger); }
.nstrip__text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.nstrip__text strong { color: var(--fg); font-weight: 600; }
.nstrip--block .nstrip__text strong { color: var(--danger-text); }
.nstrip__cd { font-family: var(--font-mono); color: var(--fg); }