/* MarketFrame news dashboard (2026-10-26): page glue over public/dash.css.
   From the design loop's "terminal" direction (design/dashboard-options/terminal),
   which Jack picked: a market terminal with a collapsible left rail, a top bar with
   search and the day, a 12-column panel grid and a status line with the disclaimer.
   Tokens only. MarketFrame's teal is the accent (Jack: "use the light green ... so your
   eyes divert to the right place"): panel labels, table headers, links, the primary
   button. Teal and red also mark positive and negative scores. */

/* ------------------------------------------------------------- fonts (the same files as the homepage) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/fonts/inter-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/fonts/inter-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/space-grotesk-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------- MarketFrame brand on the terminal theme */
[data-theme="marketframe-terminal"] {
  --mf-teal: #2bd4bd;
  --mf-teal-hover: #5fe3d1;
  --ds-accent: var(--mf-teal);
  --ds-accent-hover: var(--mf-teal-hover);
  --ds-accent-ink: var(--mf-teal);
  --ds-accent-tint: color-mix(in srgb, var(--mf-teal) 14%, transparent);
  --ds-accent-line: var(--mf-teal);
  --ds-ink-link: var(--mf-teal);
  --ds-primary-fill: var(--mf-teal);
  --ds-primary-fill-hover: var(--mf-teal-hover);
  --ds-ink-on-primary: #04121a;
  --ds-ring: var(--mf-teal);
  --ds-data-primary: var(--mf-teal);
  --ds-data-1: var(--mf-teal);
  --ds-chart-up: var(--mf-teal);
}
.ds-card__label, .ds-data-table__th, .ds-sidebar-nav-panel__group-label, .x-kicker, .mf-table th { color: var(--mf-teal); }
.ds-card__label { font-weight: var(--ds-weight-semibold); }
.ds-top-bar__action[data-tone="primary"] { background: var(--mf-teal); color: var(--ds-ink-on-primary); border-color: var(--mf-teal); }
.ds-top-bar__action[data-tone="primary"]:hover { background: var(--mf-teal-hover); }
a { color: var(--mf-teal); }
a:hover { color: var(--mf-teal-hover); }
body { margin: 0; background: var(--ds-ground); color: var(--ds-ink-2); }

/* terminal — layout glue only, tokens only (no colour / font / radius / shadow literals).
   The page is a market terminal: a sticky left rail (sections + company finder), a top bar with search
   and the day, a 12-column panel grid, a sticky status line with the disclaimer.
   Tone colour is DATA: --ds-success (teal) = positive, --ds-danger (red) = negative, quarantined to
   scores, heat cells, bars and chart marks. Every coloured mark also carries a sign and/or a word. */

/* ------------------------------------------------------------- shell knobs (documented app-shell inputs) */
.x-shell { --_as-page-bg: var(--ds-ground); --_as-main-bg: var(--ds-ground); --_as-topbar-bg: var(--ds-ground); --_as-sidebar-bg: var(--ds-ground); --_as-sidebar-w: 264px; }
/* the top bar is solid, so nothing shows through it on scroll (Jack, 2026-10-26) */
.x-shell .ds-app-shell__topbar { background: var(--ds-ground); z-index: 20; }
.x-shell .ds-sidebar-nav-panel { --_w: 264px; }
.x-shell .ds-app-shell__main { padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-6); min-width: 0; }
.x-shell .ds-top-bar__start { min-width: 0; }
.x-shell .ds-top-bar__end { flex-wrap: nowrap; }

.x-row, .x-head__side { font-size: var(--ds-text-sm); }
.ds-chart__plot { margin-block-end: var(--ds-space-3); }

/* ------------------------------------------------------------- brand mark (two corner brackets) */
.x-mark { inline-size: var(--ds-space-5); block-size: var(--ds-space-5); flex: none; fill: none; stroke: var(--ds-success); stroke-width: 2.5; }
.x-brand { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); text-decoration: none; letter-spacing: var(--ds-heading-tracking); }

.x-shell .x-narrow { display: none; }
@media (max-width: 720px) { .x-shell .x-wide { display: none; } .x-shell .x-narrow { display: inline-flex; } }

/* ------------------------------------------------------------- page head */
.x-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-6); margin-block-end: var(--ds-space-3); }
.x-head h1 { margin: 0; font-size: var(--ds-text-2xl); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-tight); }
.x-head p { margin: var(--ds-space-1) 0 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); }
.x-head__side { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); align-items: center; }
.x-kicker { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); text-transform: uppercase; letter-spacing: var(--ds-label-tracking-upper); margin: 0 0 var(--ds-space-1); }

/* ------------------------------------------------------------- panel grid */
.x-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ds-space-3); align-items: start; }
.x-grid + .x-grid { margin-block-start: var(--ds-space-3); }
.x-grid > * { grid-column: span 12; min-width: 0; }
.x-grid > [data-span="3"] { grid-column: span 3; }
.x-grid > [data-span="4"] { grid-column: span 4; }
.x-grid > [data-span="5"] { grid-column: span 5; }
.x-grid > [data-span="6"] { grid-column: span 6; }
.x-grid > [data-span="7"] { grid-column: span 7; }
.x-grid > [data-span="8"] { grid-column: span 8; }
.x-grid > [data-span="9"] { grid-column: span 9; }
.x-grid > [data-rows="2"] { grid-row: span 2; }
.x-stack { display: grid; gap: var(--ds-space-3); min-width: 0; align-content: start; }
.x-stretch { align-self: stretch; }
@media (max-width: 1279px) {
  .x-grid > [data-span="3"], .x-grid > [data-span="4"], .x-grid > [data-span="5"] { grid-column: span 6; }
  .x-grid > [data-span="7"], .x-grid > [data-span="8"], .x-grid > [data-span="9"] { grid-column: span 12; }
  .x-grid > [data-span="6"][data-wide] { grid-column: span 12; }
  .x-grid > [data-rows="2"] { grid-row: auto; }
}
@media (max-width: 860px) { .x-grid > [data-span] { grid-column: span 12; } }

/* panels = ds-card, tight terminal padding */
.x-grid .ds-stat-group { --_min: 72px; }
@media (max-width: 720px) { .x-grid .ds-stat-group { --_min: 132px; } }
.x-ctitle { font-size: var(--ds-text-sm); color: var(--ds-ink-2); font-weight: var(--ds-weight-regular); }
.x-grid .ds-card { --_pad: var(--ds-space-3); }
.x-grid .ds-card__body { gap: var(--ds-space-2); }
.x-flush { padding: 0 !important; }
.x-more { margin-inline-start: auto; font-size: var(--ds-text-xs); }

/* ------------------------------------------------------------- tone figures (data colour + sign) */
.x-score { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--ds-weight-semibold); white-space: nowrap; color: var(--ds-ink-2); }
.x-score[data-tone="pos"] { color: var(--ds-success-ink); }
.x-score[data-tone="neg"] { color: var(--ds-danger-ink); }
.x-score[data-tone="none"] { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); }
.x-big { font-size: var(--ds-text-display); line-height: 1; letter-spacing: -0.02em; }
.x-mid { font-size: var(--ds-text-2xl); line-height: 1; }
.x-mono { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }
.x-muted { color: var(--ds-ink-muted); }
.x-small { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); margin: 0; }
.x-xs { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }
.x-sub { display: block; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); margin-block-start: 2px; font-family: var(--ds-font-mono); }
.x-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); }
.x-between { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ds-space-2); }
.x-prose { margin: 0; color: var(--ds-ink-2); font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); max-width: var(--ds-measure); }
.x-prose + .x-prose { margin-block-start: var(--ds-space-2); }

/* ------------------------------------------------------------- heat cells: band → tint step (data colour) */
[data-band] { --_heat: var(--ds-surface-3); --_heat-ink: var(--ds-ink-2); }
[data-band="p1"] { --_heat: color-mix(in srgb, var(--ds-success) 20%, var(--ds-surface)); }
[data-band="p2"] { --_heat: color-mix(in srgb, var(--ds-success) 42%, var(--ds-surface)); --_heat-ink: var(--ds-ink); }
[data-band="p3"] { --_heat: color-mix(in srgb, var(--ds-success) 72%, var(--ds-surface)); --_heat-ink: var(--ds-ink-on-semantic); }
[data-band="n1"] { --_heat: color-mix(in srgb, var(--ds-danger) 20%, var(--ds-surface)); }
[data-band="n2"] { --_heat: color-mix(in srgb, var(--ds-danger) 42%, var(--ds-surface)); --_heat-ink: var(--ds-ink); }
[data-band="n3"] { --_heat: color-mix(in srgb, var(--ds-danger) 72%, var(--ds-surface)); --_heat-ink: var(--ds-ink-on-semantic); }
[data-band="z"]  { --_heat: var(--ds-surface-3); }
[data-band="none"] { --_heat: transparent; --_heat-ink: var(--ds-ink-muted); }

/* the score scale: 7 bands across −10…+10, a marker at the value */
.x-scale { position: relative; display: grid; grid-template-columns: 20fr 15fr 7.5fr 15fr 7.5fr 15fr 20fr; gap: 2px; block-size: var(--ds-space-3); margin-block: var(--ds-space-2) var(--ds-space-5); }
.x-scale > i { background: var(--_heat); }
.x-scale__mark { position: absolute; inset-block: calc(-1 * var(--ds-space-1)); inset-inline-start: calc(var(--_at) * 1%); inline-size: 3px; margin-inline-start: -1px; background: var(--ds-ink); }
.x-scale__mark b { position: absolute; inset-block-end: calc(100% + 2px); inset-inline-start: 50%; transform: translateX(-50%); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink); white-space: nowrap; }
.x-scale__ticks { position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--ds-space-1)); block-size: 1em; }
.x-scale__ticks span { position: absolute; transform: translateX(-50%); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); white-space: nowrap; }
.x-scale__ticks span:first-child { transform: none; }
.x-scale__ticks span:last-child { transform: translateX(-100%); }
.x-scale[data-size="sm"] { block-size: var(--ds-space-2); margin-block: var(--ds-space-1) var(--ds-space-4); }
.x-scale[data-mark-label] { margin-block-start: var(--ds-space-5); }
.x-legend { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--ds-space-2); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }
.x-legend > :nth-child(2) { text-align: center; }
.x-legend > :last-child { text-align: end; }
.x-explain { display: grid; gap: var(--ds-space-1); }
.x-explain p { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-2); line-height: var(--ds-lh-body); }
.x-inline-scale { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--ds-space-2) var(--ds-space-5); align-items: center; padding: var(--ds-space-2) var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-rule); margin-block-end: var(--ds-space-3); }
.x-inline-scale .x-scale { margin-block: var(--ds-space-1) var(--ds-space-4); }
.x-inline-scale p { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
@media (max-width: 720px) { .x-inline-scale { grid-template-columns: 1fr; } }

/* 14-day strip (a sparkline drawn as heat ticks — no sparkline component yet) */
.x-strip { display: grid; grid-template-columns: repeat(var(--_n, 14), minmax(0, 1fr)); gap: 1px; block-size: 6px; inline-size: 100%; }
.x-strip > i { background: var(--_heat); }
.x-strip > i[data-band="none"] { background: var(--ds-rule-soft); }
.x-strip[data-size="lg"] { block-size: var(--ds-space-3); gap: 2px; }

/* ------------------------------------------------------------- the tone board (100 companies by sector) */
.x-board { display: grid; gap: 0; }
.x-board__row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--ds-space-3); padding-block: var(--ds-space-1-5); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); align-items: start; }
.x-board__row:last-child { border-block-end: 0; }
.x-board__sector { display: grid; gap: 2px; padding-block-start: var(--ds-space-1); min-width: 0; }
.x-board__sector a { color: var(--ds-ink-2); font-size: var(--ds-text-sm); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-board__sector a:hover { color: var(--ds-ink); text-decoration: underline; }
.x-board__cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 3px; }
.x-cell { display: grid; gap: 3px; padding: var(--ds-space-1) var(--ds-space-1-5) var(--ds-space-1-5); background: var(--_heat); color: var(--_heat-ink); text-decoration: none; min-width: 0; outline-offset: -2px; }
.x-cell[data-band="none"] { outline: var(--ds-border-width) dashed var(--ds-rule); outline-offset: -1px; }
.x-cell:hover { outline: var(--ds-border-width) solid var(--ds-ink); outline-offset: -1px; }
.x-cell__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-1); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); line-height: 1.2; }
.x-cell__top b { font-weight: var(--ds-weight-semibold); letter-spacing: .02em; }
.x-cell .x-strip > i[data-band="none"] { background: color-mix(in srgb, var(--_heat-ink) 14%, transparent); }
.x-cell .x-strip > i { outline: 1px solid color-mix(in srgb, var(--ds-ground) 35%, transparent); }
.x-board__key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }
.x-swatch { display: inline-flex; align-items: center; gap: var(--ds-space-1); }
.x-swatch::before { content: ""; inline-size: 10px; block-size: 10px; background: var(--_heat); flex: none; }
.x-swatch[data-band="none"]::before { outline: 1px dashed var(--ds-rule-strong); outline-offset: -1px; }
@media (max-width: 720px) {
  .x-board__row { grid-template-columns: 1fr; gap: var(--ds-space-1); }
  .x-board__cells { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
}

/* ------------------------------------------------------------- calendar heat (day by day) */
.x-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.x-cal__dow { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); text-align: center; padding-block-end: 2px; }
.x-cal__day { display: grid; gap: 1px; padding: var(--ds-space-1); min-block-size: 46px; background: var(--_heat); color: var(--_heat-ink); text-decoration: none; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); line-height: 1.2; outline-offset: -2px; }
.x-cal__day b { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); }
.x-cal__day[data-band="none"] { outline: var(--ds-border-width) dashed var(--ds-rule); outline-offset: -1px; }
.x-cal__day[aria-current] { outline: 2px solid var(--ds-ink); outline-offset: -2px; }
.x-cal__day:hover { outline: var(--ds-border-width) solid var(--ds-ink); outline-offset: -1px; }
.x-cal__pad { min-block-size: 46px; }

/* ------------------------------------------------------------- chart pins (numbered story markers over the DS chart dots) */
.x-pin { position: absolute; z-index: 1; inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100); inset-block-start: calc((100% - var(--ds-text-xs) * var(--ds-lh-list) - var(--ds-space-2)) * var(--_y, 0) / 100); transform: translate(-50%, calc(-100% - var(--ds-space-2))); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); background: var(--ds-surface-3); padding: 0 var(--ds-space-1); line-height: 1.5; pointer-events: none; white-space: nowrap; }
.x-pin[data-below] { transform: translate(-50%, var(--ds-space-2)); }
.x-pin[data-end] { transform: translate(calc(-100% + var(--ds-space-1)), calc(-100% - var(--ds-space-2))); }
.x-pin[data-end][data-below] { transform: translate(calc(-100% + var(--ds-space-1)), var(--ds-space-2)); }
.x-pin[data-start] { transform: translate(calc(-1 * var(--ds-space-1)), calc(-100% - var(--ds-space-2))); }
.x-pin[data-start][data-below] { transform: translate(calc(-1 * var(--ds-space-1)), var(--ds-space-2)); }
.x-num { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.6em; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); background: var(--ds-surface-3); color: var(--ds-ink); padding-inline: var(--ds-space-1); flex: none; }

/* ------------------------------------------------------------- story rows (accordion) */
.x-acc .ds-accordion__header { align-items: flex-start; }
.x-acc .ds-accordion__meta { text-align: end; white-space: nowrap; }
.x-acc .ds-accordion__title { font-size: var(--ds-text-sm); }
.x-acc .ds-accordion__body { display: grid; gap: var(--ds-space-2); }
.x-hl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.x-hl li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--ds-space-2); padding-block: var(--ds-space-1-5); border-block-start: var(--ds-border-width) solid var(--ds-rule-soft); font-size: var(--ds-text-sm); }
.x-hl a { color: var(--ds-ink); }
.x-hl .x-why { display: block; color: var(--ds-ink-muted); font-size: var(--ds-text-xs); margin-block-start: 2px; }

/* ------------------------------------------------------------- tables */
.x-grid .ds-data-table { min-width: 0; }
.x-tline { display: block; color: var(--ds-ink); text-decoration: none; }
.ds-data-table .x-tline { font-size: var(--ds-text-sm); }
.ds-data-table__group .x-tline { font-size: inherit; }
a.x-tline:hover { text-decoration: underline; }
.x-why-cell { color: var(--ds-ink-muted); font-size: var(--ds-text-xs); }
.x-groupcell { display: grid; gap: 2px; text-transform: none; letter-spacing: normal; font-family: var(--ds-font-sans); }
.x-groupcell b { color: var(--ds-ink); font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); }
.x-groupcell span { color: var(--ds-ink-muted); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); }
@media (max-width: 720px) { .x-hide-sm { display: none; } }
.x-show-sm { display: none; }
@media (max-width: 720px) { .x-show-sm { display: block; } }

/* sidebar company finder */
.x-finder .ds-nav-item__label { font-size: var(--ds-text-sm); }
.x-tick { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); inline-size: 3.6em; flex: none; }

/* prev / next day pager */
.x-pager { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; }

/* follow box */
.x-follow { display: grid; gap: var(--ds-space-2); }

/* ------------------------------------------------------------- collapsible rail (Jack, 2026-10-26) */
.x-collapse { display: none; }
@media (min-width: 768px) {
  .x-shell .ds-app-shell__menu-btn { display: none; }
  .x-collapse { display: inline-grid; place-items: center; inline-size: var(--ds-control-h-sm); block-size: var(--ds-control-h-sm); border: var(--ds-border-width) solid var(--ds-rule); background: transparent; color: var(--ds-ink-2); cursor: pointer; flex: none; }
  .x-collapse:hover { color: var(--mf-teal); border-color: var(--mf-teal); }
  .x-collapse svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .x-shell[data-state="sidebar-collapsed"] .x-brand.x-narrow { display: inline-flex; }
}
.x-shell .x-brand.x-narrow { display: none; }
@media (max-width: 767px) { .x-shell .x-brand.x-narrow { display: inline-flex; } }

/* ------------------------------------------------------------- follow form */
.x-follow form { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; }
.x-follow input[type="email"] { flex: 1 1 12rem; min-width: 0; padding: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-border); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); }
.x-follow input[type="email"]:focus { outline: 2px solid var(--mf-teal); outline-offset: 0; }
.x-follow button { padding: var(--ds-space-2) var(--ds-space-4); border: 0; background: var(--mf-teal); color: var(--ds-ink-on-primary); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); cursor: pointer; }
.x-follow button:hover { background: var(--mf-teal-hover); }
.mf-hp, .mf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- documents inside the shell (guides, blog, search, archives) */
.x-doc { max-width: 54rem; font-size: var(--ds-text-md); line-height: var(--ds-lh-body); color: var(--ds-ink-2); }
.x-doc h2 { font-size: var(--ds-text-lg); color: var(--ds-ink); margin: var(--ds-space-6) 0 var(--ds-space-2); }
.x-doc h3 { font-size: var(--ds-text-md); color: var(--ds-ink); margin: var(--ds-space-4) 0 var(--ds-space-1); }
.x-doc p, .x-doc ul, .x-doc ol { margin: 0 0 var(--ds-space-3); }
.x-doc[data-wide] { max-width: none; }
.mf-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); display: block; overflow-x: auto; }
.mf-table th { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); text-transform: uppercase; letter-spacing: var(--ds-label-tracking-upper); text-align: left; font-weight: var(--ds-weight-regular); }
.mf-table th, .mf-table td { padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) 0; border-bottom: var(--ds-border-width) solid var(--ds-rule-soft); vertical-align: top; }
.mf-table td:first-child { white-space: nowrap; }
.mf-meta { color: var(--ds-ink-muted); font-size: var(--ds-text-xs); }
.mf-reason { color: var(--ds-ink-muted); font-size: var(--ds-text-xs); }
.mf-list { padding-left: 1.25rem; }
.mf-list li { margin: 0 0 var(--ds-space-3); }
.mf-heads { list-style: none; padding: 0; margin: 0; }
.mf-heads li { padding: var(--ds-space-2) 0; border-bottom: var(--ds-border-width) solid var(--ds-rule-soft); }
.mf-cols { columns: 15rem auto; padding-left: 1.1rem; }
.mf-cols li { break-inside: avoid; margin-bottom: var(--ds-space-1); }
.mf-card { border: var(--ds-border-width) solid var(--ds-rule); padding: var(--ds-space-3); margin: var(--ds-space-4) 0; }
.mf-card h2 { margin-top: 0; }
.mf-big { font-size: var(--ds-text-2xl); margin: 0 0 var(--ds-space-2); }
.mf-big span:not(.x-score) { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); text-transform: uppercase; color: var(--ds-ink-muted); margin-left: var(--ds-space-2); }
.mf-daynav { display: flex; justify-content: space-between; gap: var(--ds-space-3); margin: var(--ds-space-6) 0 var(--ds-space-3); padding-top: var(--ds-space-3); border-top: var(--ds-border-width) solid var(--ds-rule); font-size: var(--ds-text-sm); }
.mf-story { margin: var(--ds-space-4) 0 0; padding-top: var(--ds-space-3); border-top: var(--ds-border-width) solid var(--ds-rule-soft); }
.mf-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0 0 var(--ds-space-3); }
.mf-chip { padding: 2px var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-rule); font-size: var(--ds-text-sm); color: var(--ds-ink-2); text-decoration: none; }
.mf-chip:hover { border-color: var(--mf-teal); color: var(--ds-ink); }
.mf-chartkey { list-style: none; margin: var(--ds-space-2) 0 0; padding: 0; font-size: var(--ds-text-sm); }
.mf-chartkey li { padding: 2px 0; }
.mf-chartkey-n { display: inline-block; min-width: 1.4em; height: 1.4em; line-height: 1.4em; margin-right: var(--ds-space-1); text-align: center; border: var(--ds-border-width) solid var(--ds-ink-muted); border-radius: 50%; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink); }
.mf-sep { opacity: .5; padding: 0 .2rem; }
.ds-chart__notes { display: none; }
.ds-chart { margin: 0; }
/* the search page's own form (kept from the old pages) */
.mf-search-form { margin: 0 0 var(--ds-space-4); }
.mf-search-q { display: flex; border: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-surface); }
.mf-search-q:focus-within { border-color: var(--mf-teal); }
.mf-search-q input { flex: 1; min-width: 0; padding: var(--ds-space-2) var(--ds-space-3); border: 0; background: transparent; color: var(--ds-ink); font: inherit; outline: none; }
.mf-search-form button { padding: var(--ds-space-2) var(--ds-space-4); border: 0; background: var(--mf-teal); color: var(--ds-ink-on-primary); font: inherit; font-weight: var(--ds-weight-semibold); cursor: pointer; }
.mf-search-type { display: flex; gap: var(--ds-space-4); margin: var(--ds-space-2) 0 0; font-size: var(--ds-text-sm); }
.mf-search-type label, .mf-search-check { display: inline-flex; align-items: center; gap: var(--ds-space-1); cursor: pointer; }
.mf-search-type input, .mf-search-check input { accent-color: var(--mf-teal); }
.mf-search-more, .mf-search-tips { margin: var(--ds-space-3) 0 0; }
.mf-search-more summary, .mf-search-tips summary { cursor: pointer; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); text-transform: uppercase; color: var(--mf-teal); }
.mf-search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--ds-space-3) var(--ds-space-4); margin: var(--ds-space-3) 0; }
.mf-search-grid > label:not(.mf-search-check) { display: grid; gap: var(--ds-space-1); align-content: start; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); text-transform: uppercase; color: var(--ds-ink-muted); }
.mf-search-grid select, .mf-search-grid input[type="date"] { width: 100%; padding: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); text-transform: none; }
.mf-search-check { grid-column: 1 / -1; font-size: var(--ds-text-sm); }
.mf-cohits { padding: var(--ds-space-2) var(--ds-space-3); border-left: 2px solid var(--mf-teal); background: var(--ds-surface); }
.mf-results li { margin-bottom: var(--ds-space-3); }
/* US market hours box on the market-hours post */
.mf-ushours { border: var(--ds-border-width) solid var(--ds-rule); padding: var(--ds-space-3); margin: 0 0 var(--ds-space-4); }

/* ------------------------------------------------------------- page furniture */
.x-skip { position: absolute; inset-inline-start: var(--ds-space-2); inset-block-start: -100px; z-index: 100; padding: var(--ds-space-2) var(--ds-space-3); background: var(--mf-teal); color: var(--ds-ink-on-primary); border-radius: var(--ds-radius-sm); }
.x-skip:focus { inset-block-start: var(--ds-space-2); }
.x-head h1, .x-brand { font-family: "Space Grotesk", var(--ds-font-sans); }
.x-head .x-lede { max-width: 72ch; }
.x-gap { margin-block-start: var(--ds-space-3); }
.x-gap-s { margin-block-start: var(--ds-space-1); }
.x-tight { margin-block: var(--ds-space-3) var(--ds-space-1); }
.x-h3 { font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); margin: var(--ds-space-3) 0 var(--ds-space-1); }
.x-h3:first-child { margin-block-start: 0; }
.x-list { margin: 0 0 var(--ds-space-2); padding-inline-start: var(--ds-space-4); font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); }
.x-list li + li { margin-block-start: var(--ds-space-1); }
.x-plain { list-style: none; margin: 0; padding: 0; font-size: var(--ds-text-sm); }
.x-plain li { padding-block: var(--ds-space-1); border-block-end: 1px solid var(--ds-rule); }
.x-plain li:last-child { border-block-end: 0; }
.x-note-body { max-width: 72ch; }
.x-note-body .x-prose { font-size: var(--ds-text-md); }
.x-more-days { margin-block-start: var(--ds-space-2); font-size: var(--ds-text-sm); }
.x-more-days > summary { cursor: pointer; color: var(--mf-teal); padding-block: var(--ds-space-1); }

/* headline tables grouped by story: the group row is a teal header band */
.x-group > th { text-align: start; text-transform: none; letter-spacing: normal; font-size: var(--ds-text-sm); color: var(--ds-ink); background: var(--ds-accent-tint); padding-block: var(--ds-space-2); }
.x-group > th a { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }
.x-group > th .x-score { margin-inline-start: var(--ds-space-2); }
.x-group > th .x-sub { white-space: normal; }
.x-heads-table .ds-data-table__td { vertical-align: top; }
.x-heads-table .ds-data-table__secondary { white-space: normal; }
tr[aria-current="true"] > td { background: var(--ds-accent-tint); }


/* Chartsmade: MarketFrame teal for the single series and for "up" bars. The chart
   re-derives its data colours on its own element, so this has to sit there too. */
.x-shell .ds-chart[data-charts] { --ds-data-primary: var(--mf-teal) !important; --ds-data-1: var(--mf-teal) !important; --ds-chart-up: var(--mf-teal) !important; --ds-chart-down: var(--ds-danger); }

.x-group > th { font-family: var(--ds-font-sans); }
.x-group > th .x-sub { font-family: var(--ds-font-sans); }
.x-more { display: inline-flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-4); }
/* long breadcrumbs give way to the search box */
.x-shell .ds-top-bar__start .ds-breadcrumb { min-width: 0; max-width: 40vw; overflow: hidden; }
.x-shell .ds-breadcrumb__leaf { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16em; display: inline-block; vertical-align: bottom; }
.x-shell .ds-top-bar__center { min-width: 14rem; }

/* Panel headers are teal bands (Jack, 2026-10-26: "our marketframe green as the background
   of the header, the same colour as the Open the dashboard link"), so the eye goes to them. */
.x-shell .ds-card__header { background: var(--mf-teal); border-color: var(--mf-teal); }
.x-shell .ds-card__label { color: var(--ds-ink-on-primary); }
.x-shell .ds-card__header .x-more a, .x-shell .ds-card__header .x-more .ds-text-link { color: var(--ds-ink-on-primary); }
.x-shell .ds-card__header .x-more a:hover { color: var(--ds-ink-on-primary); text-decoration: underline; }
.x-shell .x-finder .ds-sidebar-nav-panel__group-label { background: var(--mf-teal); color: var(--ds-ink-on-primary); padding: var(--ds-space-1) var(--ds-space-2); }

/* weekly note: the standfirst, the section panels laid out as bricks, linked names */
.x-stand { font-size: var(--ds-text-lg); line-height: var(--ds-lh-snug, 1.45); color: var(--ds-ink); margin: 0 0 var(--ds-space-3); max-width: 60ch; }
.x-bricks { columns: 2 26rem; column-gap: var(--ds-space-3); margin-block-start: var(--ds-space-3); }
.x-bricks > .x-brick { break-inside: avoid; margin-block-end: var(--ds-space-3); }
.x-bricks + .x-grid { margin-block-start: 0; }
.x-grid + .x-bricks { margin-block-start: var(--ds-space-3); }
.x-note-body .x-prose { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); max-width: 70ch; }
.x-note-body .x-prose + .x-prose { margin-block-start: var(--ds-space-2); }
.x-note-body .x-score, .x-stand .x-score, .x-standfirst .x-score { font-size: inherit; font-weight: var(--ds-weight-semibold); }
a.x-co { color: var(--ds-ink); text-decoration: underline; text-decoration-color: var(--mf-teal); text-underline-offset: 3px; }
a.x-co:hover { color: var(--mf-teal); }

/* daily overviews archive: week columns, newest left, scroll right to go back */
.x-weeks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(23rem, 1fr); gap: var(--ds-space-3); overflow-x: auto; padding-block-end: var(--ds-space-2); scroll-snap-type: x proximity; }
.x-weeks > .x-week { scroll-snap-align: start; min-width: 0; }
.x-weeks:focus-visible { outline: 2px solid var(--mf-teal); outline-offset: 2px; }
.x-week .x-strip { margin-block-end: var(--ds-space-2); }
.x-shell .ds-card__header .x-more .x-score { background: var(--ds-ground); padding: 0 var(--ds-space-1); }
@media (max-width: 720px) { .x-weeks { grid-auto-columns: 86%; } }
.x-pindays { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); font-size: var(--ds-text-xs); }
.x-pinday { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-ink-2); text-decoration: none; }
.x-pinday:hover { color: var(--mf-teal); }

/* One footer on every page: note + disclaimer side by side, then the data stamp and links. */
.x-foot { margin-block-start: var(--ds-space-6); border-block-start: 2px solid var(--mf-teal); padding-block-start: var(--ds-space-3); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }
.x-foot p { margin: 0 0 var(--ds-space-2); max-width: 70ch; }
.x-foot p:last-child { margin-block-end: 0; }
.x-foot b { color: var(--ds-ink); }
.x-foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--ds-space-3) var(--ds-space-6); }
.x-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-1) var(--ds-space-4); margin-block-start: var(--ds-space-3); padding-block-start: var(--ds-space-2); border-block-start: 1px solid var(--ds-rule); }
.x-foot__base .x-mono { font-family: var(--ds-font-mono); }