/* fonts.css */
/* Fonts, served from this site (no third-party font requests). JetBrains Mono and
   Caveat are under the SIL Open Font License 1.1: public/fonts/OFL-*.txt. Files were
   taken once from the Google Fonts API; nothing is loaded from Google at run time. */

/* Caveat 700, cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/caveat-700-cyrillic-ext.ad2f70b49f.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Caveat 700, cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/caveat-700-cyrillic.643fd13aab.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Caveat 700, latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/caveat-700-latin-ext.c97edfca11.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Caveat 700, latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/caveat-700-latin.96eb8f4def.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;
}
/* JetBrains Mono 400, cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic-ext.52e804ab20.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* JetBrains Mono 400, cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic.ee459f7e22.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono 400, greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-greek.f1c328501a.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* JetBrains Mono 400, vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-vietnamese.41eca73325.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* JetBrains Mono 400, latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.93018887af.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 400, latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.71cefca788.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;
}
/* JetBrains Mono 600, cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic-ext.52e804ab20.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* JetBrains Mono 600, cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic.ee459f7e22.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono 600, greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-greek.f1c328501a.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* JetBrains Mono 600, vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-vietnamese.41eca73325.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* JetBrains Mono 600, latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.93018887af.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 600, latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.71cefca788.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;
}
/* JetBrains Mono 800, cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic-ext.52e804ab20.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* JetBrains Mono 800, cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic.ee459f7e22.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono 800, greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-greek.f1c328501a.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* JetBrains Mono 800, vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-vietnamese.41eca73325.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* JetBrains Mono 800, latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.93018887af.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 800, latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.71cefca788.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;
}

/* legal.css */
/* Legal: the /terms, /privacy and /disclaimer pages, the first-visit notice and the
   short line in the status bar. Loaded by index.html and by the legal pages. */

/* ---- Legal pages (standalone, no style.css) --------------------------- */
.legal-body {
  --bg: #05080C;
  --panel: hsl(213, 36%, 6%);
  --rule: hsl(211, 28%, 12%);
  --rule-strong: hsl(210, 24%, 22%);
  --text: #CFEAFF;
  --text-2: hsl(206, 45%, 76%);
  --dim: hsl(208, 24%, 58%);
  --accent: #6CCBFF;
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}
.legal-body *, .legal-body *::before, .legal-body *::after { box-sizing: border-box; }
.legal-body a { color: var(--accent); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.legal-body a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.legal-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule-strong);
}
.legal-mark { font-weight: 800; letter-spacing: .2em; color: var(--text) !important; }
.legal-nav { display: flex; gap: 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.legal-nav a[aria-current="page"] { color: var(--text); border-bottom: 1px solid var(--accent); }

.legal { max-width: 72ch; margin: 0 auto; padding: 24px 16px 32px; }
.legal-cmd { margin: 0 0 8px; color: var(--accent); font-size: 12px; letter-spacing: .06em; }
.legal h1 { margin: 0; color: var(--text); font-size: 24px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.legal-meta { margin: 6px 0 24px; color: var(--dim); font-size: 12px; }
.legal h2 { margin: 32px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.legal h3 { margin: 20px 0 6px; color: var(--text); font-size: 14px; font-weight: 600; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 2.2ch; }
.legal li { margin: 0 0 6px; }
.legal li::marker { color: var(--dim); }
.legal strong { color: var(--text); font-weight: 600; }

.legal-foot {
  max-width: 72ch; margin: 0 auto; padding: 16px 16px 40px;
  border-top: 1px solid var(--rule-strong);
  color: var(--dim); font-size: 12px;
}
.legal-foot p { margin: 0 0 4px; }

@media (max-width: 639px) {
  .legal-body { font-size: 13px; }
  .legal h1 { font-size: 20px; }
}

/* ---- Status bar: the always-visible short line ------------------------- */
/* The legal line never shrinks: the status message on the left gives way (ellipsis). */
.status-legal { display: flex; flex: 0 0 auto; gap: 12px; color: var(--faint, #4a5a6b); }
.status-legal .legal-line { color: var(--dim, #7f93a8); }
.status-legal a { color: var(--accent, #6CCBFF); }
.status-legal a:hover { color: var(--text, #CFEAFF); text-decoration: none; }
.legal-line-short { display: none; }
@media (max-width: 639px) {
  .status-legal .legal-line-long { display: none; }
  .status-legal .legal-line-short { display: inline; }
  .status-legal .legal-legend { display: none; }
}

/* ---- First-visit notice ----------------------------------------------- */
.consent {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: hsla(213, 43%, 3%, .78);
}
.consent-box {
  width: 100%; max-width: 60ch;
  padding: 18px 20px 16px;
  background: var(--panel, #0a1017);
  border: 1px solid var(--accent, #6CCBFF);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  color: var(--text-2, #b6d3ea);
  font-size: 13px; line-height: 1.6;
}
.consent-k { margin: 0 0 10px; color: var(--accent, #6CCBFF); font-size: 11px; font-weight: 600; letter-spacing: .2em; }
.consent-lead { margin: 0 0 8px; color: var(--text, #CFEAFF); font-size: 15px; font-weight: 600; line-height: 1.5; }
.consent-body { margin: 0 0 16px; }
.consent-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.consent-accept {
  padding: 6px 14px;
  border: 1px solid var(--accent, #6CCBFF);
  background: var(--accent, #6CCBFF);
  color: var(--ink, #030609);
  font: inherit; font-weight: 800; letter-spacing: .08em;
  cursor: pointer;
}
.consent-accept:hover { filter: brightness(1.1); }
.consent-accept:focus-visible { outline: 2px solid var(--text, #CFEAFF); outline-offset: 2px; }
.consent-links { display: flex; gap: 14px; font-size: 12px; }
.consent-links a { color: var(--accent, #6CCBFF); }
@media (max-width: 639px) {
  .status-note.status-legal { display: flex; flex: 0 0 auto; gap: 8px; }
}

/* ---- Tables (privacy: who receives data, how long we keep it) ---------------- */
.legal-table { margin: 0 0 16px; overflow-x: auto; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule, #1b2531); text-align: left; vertical-align: top; }
.legal-table thead th { color: var(--dim, #7f93a8); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.legal-table tbody th { color: var(--text, #CFEAFF); font-weight: 600; white-space: nowrap; }
.legal-table td { color: var(--text-2, #b6d3ea); }
@media (max-width: 639px) { .legal-table tbody th { white-space: normal; } }

/* style.css */
/* Bloombroke: ice blue on black. A dense, instant market terminal.
   Spacing scale: 2 4 6 8 12 16 24 32. Type scale: 11 12 13 14 16 18 24 32 44. */

:root {
  /* Surfaces: near-black with a hint of blue, lighter as they rise */
  --bg: hsl(213, 43%, 3%);          /* #05080C */
  --panel: hsl(213, 36%, 6%);
  --panel-2: hsl(212, 32%, 9%);
  --panel-3: hsl(211, 30%, 12%);

  /* Rules */
  --rule: hsl(211, 28%, 12%);        /* row dividers */
  --rule-strong: hsl(210, 24%, 22%); /* panel borders */

  /* Text: primary, secondary, tertiary */
  --text: hsl(206, 100%, 91%);       /* #CFEAFF */
  --text-2: hsl(206, 45%, 76%);
  --dim: hsl(208, 24%, 58%);         /* muted steel blue labels, 5.9:1 on --bg */
  --faint: hsl(210, 18%, 36%);

  --accent: hsl(201, 100%, 71%);     /* #6CCBFF */
  --accent-tint: hsla(201, 100%, 71%, .1);
  --ink: hsl(213, 60%, 3%);          /* text on the accent */

  /* Compare lines on a chart: white, a deeper ice blue, steel grey */
  --cmp-1: hsl(0, 0%, 96%);
  --cmp-2: hsl(222, 90%, 70%);
  --cmp-3: hsl(210, 10%, 60%);

  --up: hsl(147, 70%, 55%);          /* #3DDC84 */
  --down: hsl(0, 100%, 68%);         /* #FF5C5C */
  --up-flash: hsla(147, 70%, 45%, .30);
  --down-flash: hsla(0, 100%, 60%, .28);

  --gutter: 12px;
  /* Every row shares one centred content column. Bar backgrounds stay full-bleed;
     only their contents are inset. 100% resolves against each element's own width. */
  --maxw: 1440px;
  --inset: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  --topbar-h: 30px;
  --cmd-h: 40px;
  --status-h: 22px;
  --tape-h: 0px; /* tape hidden by default; TAPE ON brings it back (nav.css) */
  --keybar-h: 28px;
  /* The tape is off by default; body.has-tape adds its row (see nav.css). */
  --dock-h: calc(var(--status-h) + var(--keybar-h) + 1px);
  --row-h: 24px;

  --font: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: hsla(201, 100%, 71%, .28); color: var(--text); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

h1, h2, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.num { font-variant-numeric: tabular-nums; }
.dim, .muted { color: var(--dim); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--dim); }
.offscreen { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }

kbd {
  display: inline-block;
  min-width: 18px;
  padding: 0 4px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font);
  font-size: 11px;
  line-height: 16px;
  color: var(--text-2);
  text-align: center;
}

.code { color: var(--accent); white-space: nowrap; }

/* ---- Top bar ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--topbar-h);
  padding: 0 var(--inset);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.wordmark { font-size: 13px; font-weight: 600; letter-spacing: .22em; color: var(--text); }
.wordmark:hover { text-decoration: none; color: var(--accent); }

.clock { display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap; }
.clock .label { color: var(--dim); letter-spacing: .1em; }
.clock-time { color: var(--text); }
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding-left: 10px; border-left: 1px solid var(--rule-strong);
  color: var(--dim); letter-spacing: .08em; font-weight: 600;
}
.status-dot { width: 6px; height: 6px; background: var(--faint); }
/* Freshness: ice blue when the screen's data is fresh, a hollow red ring when it is
   stale (old data, or no update for a while); the time is in the tooltip. No data on
   the screen, no dot. */
.fresh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); cursor: help; }
.fresh-dot[data-state="stale"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--down); }
.fresh-dot[data-state="none"] { visibility: hidden; }
/* Provenance: the dot opens a small list of this screen's sources (public/provenance.js). */
.fresh-dot { cursor: pointer; padding: 0; border: 0; }
.fresh-dot:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.prov-pop { position: fixed; z-index: 60; max-width: min(360px, calc(100vw - 16px)); padding: 6px 8px; background: var(--panel-2); border: 1px solid var(--rule-strong); font-size: 11px; line-height: 1.5; }
.prov-pop[hidden] { display: none; }
.pv-list { list-style: none; margin: 0 0 4px; padding: 0; }
.pv-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-list a, .pv-all { color: var(--text-2); text-decoration: none; }
.pv-list a:hover .pv-src, .pv-all:hover { color: var(--accent); }
.pv-dim { color: var(--dim); }
.pv-all { color: var(--accent); }
/* Tiny tags: PRE, MKT, AH, WKD (EDGAR acceptance time), 8-K or 10-Q (earnings). */
.tod { margin-left: 1px; font-size: 9px; letter-spacing: 0; font-weight: 400; color: var(--faint); vertical-align: 1px; }
/* The derived marker hangs past the number, so the digits stay aligned with the column. */
/* DATA: every column on one desktop screen, small type, cells wrap. */
.dt-scroll { overflow-x: auto; }
.data-table { table-layout: fixed; width: 100%; font-size: 11px; }
.grid-table.data-table th, .grid-table.data-table td { white-space: normal; overflow-wrap: break-word; max-width: none; text-overflow: clip; height: auto; line-height: 1.35; padding-top: 3px; padding-bottom: 3px; vertical-align: top; }
.data-table .dt-name { width: 17%; } .data-table .dt-src { width: 15%; }
.data-table .dt-cov { width: 15%; } .data-table .dt-hist { width: 11%; } .data-table .dt-upd { width: 11%; }
.data-table .dt-age { width: 5%; } .data-table .dt-delay { width: 7%; } .data-table .dt-gaps { width: 16%; }
.data-table tr.is-lit > * { background: var(--accent-tint); }
@media (max-width: 639px) { .data-table .hide-m, .status-table .hide-m { display: none; } .data-table .dt-name { width: 38%; } .data-table .dt-src { width: 30%; } .data-table .dt-age { width: 13%; } .data-table .dt-delay { width: 19%; } }
/* STATUS: the HOME markets grid, four columns on desktop, one on phones. */
.mk-cols.st-cols { columns: 4 260px; }
@media (max-width: 639px) { .mk-cols.st-cols { columns: 1; } }
.st-group .c-st { width: 11ch; }
.st-group .c-age { width: 7ch; }
.sx-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--faint); }
.sx-dot[data-state="ok"] { background: var(--up); }
.sx-dot[data-state="slow"] { background: var(--dim); }
.sx-dot[data-state="failing"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--down); }
.sx-word { font-size: 11px; letter-spacing: .04em; color: var(--dim); }
.sx-word.sx-ok { color: var(--text-2); }
.sx-word.sx-failing { color: var(--down); }
.status[data-open="true"] { color: var(--up); }
.status[data-open="true"] .status-dot { background: var(--up); }

/* ---- Command bar ------------------------------------------------------ */
.commandbar { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 1px solid var(--rule-strong); }
.cmd { position: relative; display: flex; align-items: center; gap: 10px; height: var(--cmd-h); padding: 0 var(--inset); }
.prompt { font-size: 16px; font-weight: 600; color: var(--accent); line-height: 1; }
.cmd-field { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; }

#cmd {
  width: 100%; height: 100%;
  padding: 0; border: 0; outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  caret-color: transparent;
}
#cmd::placeholder { color: var(--faint); text-transform: none; opacity: 1; }
.cmd-focused #cmd:placeholder-shown { text-indent: calc(1ch + 8px); }
#cmd:focus-visible { outline: 0; }

.measure { position: absolute; visibility: hidden; white-space: pre; font-family: var(--font); font-size: 16px; letter-spacing: 0; }

.cursor {
  position: absolute; left: 0; top: 50%;
  width: 10px; height: 20px; margin-top: -10px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}
.cmd-focused .cursor { opacity: .9; }
.cmd-focused .cursor.blink { animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink { 0%, 55% { opacity: .9; } 56%, 100% { opacity: 0; } }

.cmd-keys { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); white-space: nowrap; }
.cmd-keys kbd:not(:first-child) { margin-left: 6px; }

.suggest {
  position: absolute;
  top: 100%;
  left: calc(var(--inset) + var(--label-w, 0px) + 28px);
  width: min(600px, calc(100% - var(--inset) * 2 - var(--label-w, 0px) - 28px));
  background: var(--panel-2);
  border: 1px solid var(--rule-strong);
  z-index: 20;
}
.suggest li {
  display: grid;
  grid-template-columns: minmax(96px, max-content) 1fr;
  gap: 16px;
  align-items: center;
  height: var(--row-h);
  padding: 0 8px;
  cursor: pointer;
}
.suggest li:hover, .suggest li.is-active { background: var(--panel-3); }
.suggest .sug-name { color: var(--text); font-weight: 600; }
.suggest .sug-hint { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest li.is-usage { cursor: default; }
.suggest li.is-usage .sug-name { color: var(--accent); font-weight: 400; }

/* ---- Screen ----------------------------------------------------------- */
.screen { padding: 8px var(--inset) calc(var(--dock-h) + 16px); outline: 0; }

.footnote { margin-top: 6px; font-size: 11px; color: var(--dim); }
.footnote:empty { display: none; }
.notice { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); margin-bottom: 6px; }
.examples { margin-top: 8px; line-height: 2; }
.examples .code { margin-right: 12px; }
.codes { color: var(--text-2); word-spacing: 4px; }
.loading { color: var(--dim); letter-spacing: .08em; }
.panel-msg { color: var(--text-2); }

/* ---- Panels ----------------------------------------------------------- */
.grid, .stack {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { grid-template-columns: minmax(0, 1fr); }

.panel { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.panel-solo { border: 1px solid var(--rule-strong); }
.panel[hidden] { display: none; }

.panel-head {
  display: flex; align-items: stretch; justify-content: space-between; gap: 8px;
  height: 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule-strong);
}
.panel-label {
  display: flex; align-items: center;
  margin: 0;
  padding: 0 8px;
  background: var(--accent);
  color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
a.panel-label:hover { text-decoration: none; background: var(--text); }
.panel-meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  min-width: 0;
  padding-right: 8px;
  font-size: 11px; color: var(--dim); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden;
}
/* "Stock: $GOLD": a plain word that is also a listed stock. One dim link, never more. */
.stock-hint {
  display: flex; align-items: center; flex: 0 0 auto;
  margin-right: auto; /* next to the label; the panel's own meta stays right */
  padding: 0 8px;
  font-size: 11px; color: var(--dim); letter-spacing: .04em; white-space: nowrap;
}
.stock-hint:hover, .stock-hint:focus-visible { color: var(--text); text-decoration: none; }
.help-search .stock-hint, .desk-bar .stock-hint { margin-right: 0; margin-left: auto; }
/* Phones: a long panel title wraps inside its label instead of pushing the page wide. */
@media (max-width: 639px) {
  .panel-head { height: auto; min-height: 22px; }
  .panel-label { flex: 0 0 auto; min-width: 0; max-width: 70%; padding-top: 3px; padding-bottom: 3px; white-space: normal; line-height: 16px; overflow-wrap: anywhere; }
  .panel-meta { flex: 0 1 auto; flex-wrap: wrap; white-space: normal; text-align: right; line-height: 14px; padding-top: 3px; padding-bottom: 3px; }
  /* A long command in a sentence (a Format: line) may break. */
  p .code { white-space: normal; overflow-wrap: anywhere; }
}
.panel-body { flex: 1; min-height: 0; padding: 8px 10px; }
.panel-body.flush, .panel-body:has(> table) { padding: 0; }
.panel-body.flush > .loading, .panel-body.flush > .panel-msg,
.panel-body.flush > .chart-host > .loading, .panel-body.flush > .chart-host > .panel-msg { padding: 8px 2px; }

.tabs { display: flex; align-self: stretch; margin-right: -8px; border-left: 1px solid var(--rule-strong); }
.tab { display: flex; align-items: center; padding: 0 8px; color: var(--dim); font-size: 11px; }
button.tab { border: 0; background: transparent; font-family: var(--font); cursor: pointer; }
.tab:hover { text-decoration: none; color: var(--text); background: var(--panel-3); }
.tab.is-active { color: var(--ink); background: var(--text-2); }

/* ---- Live or delayed tags ------------------------------------------------ */
/* Quiet text, not a box (a box means you can press it). A fixed width, so RT and DLY
   line up in a column. */
.fresh {
  display: inline-block;
  width: 3.4em;
  font-size: 9px; font-weight: 600; line-height: 12px; letter-spacing: .06em;
  text-align: left;
  vertical-align: middle;
}
.fresh.is-rt { color: var(--accent); }
.fresh.is-dly { color: var(--dim); }
/* In a panel head (DLY 15 MIN) the tag is a word in the line, not a column. */
.panel-meta .fresh { width: auto; }
/* A note on how to read the numbers (metaNote): it wraps inside the title strip rather
   than being cut off, so the strip grows a line when it has to. */
.panel-head:has(.meta-note) { height: auto; min-height: 22px; }
.panel-meta:has(.meta-note) { flex-wrap: wrap; white-space: normal; text-align: right; line-height: 14px; padding-top: 4px; padding-bottom: 4px; row-gap: 0; column-gap: 6px; }
.meta-note { min-width: 0; overflow-wrap: anywhere; text-transform: uppercase; }
/* Phones: the note takes its own line under the panel title, full width. */
@media (max-width: 639px) {
  .panel-head:has(.meta-note) { flex-wrap: wrap; }
  .panel-meta:has(.meta-note) { flex: 1 1 100%; justify-content: flex-start; text-align: left; padding-left: 8px; }
}
.meta-note[title] { cursor: help; }

/* ---- Tables ----------------------------------------------------------- */
.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th, .grid-table td { height: var(--row-h); padding: 0 10px; text-align: left; white-space: nowrap; }
.grid-table thead th {
  height: 22px;
  font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--rule-strong);
}
.grid-table .num { text-align: right; }
.grid-table tbody tr:not(.group-row) { border-bottom: 1px solid var(--rule); }
.grid-table tbody tr:not(.group-row):hover { background: var(--panel-2); }
.grid-table .row-link { cursor: pointer; }
.grid-table .row-link:hover { background: var(--panel-3); }
.grid-table .row-link:hover .name a { color: var(--accent); }
.grid-table .row-link:focus { outline: 0; background: var(--panel-3); box-shadow: inset 2px 0 0 var(--accent); }
.grid-table th.tag, .grid-table td.tag { width: 1%; padding: 0 0 0 4px; text-align: left; }
.grid-table .name { width: 100%; font-weight: 400; color: var(--text-2); max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grid-table .name a { color: var(--text-2); }
.grid-table .name a:hover { color: var(--accent); text-decoration: none; }
.grid-table .last { color: var(--text); font-weight: 600; }
.grid-table .time { color: var(--dim); }
.grid-table .moves { color: var(--dim); }
.group-row th {
  height: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}

/* Price tick: a flat 400 ms background flash, no motion */
.tick-up { background: var(--up-flash); }
.tick-down { background: var(--down-flash); }

/* ---- HOME ------------------------------------------------------------- */
.grid-home .panel-wide { grid-column: 1 / -1; }
/* HOME's MARKETS list: one group per column on desktop (four), two columns on tablets
   (two groups each, all the same height), one on phones. .mk-cols.h-mk: it must win over
   the MARKETS screen's own .mk-cols column count further down. Desktop is a grid of four
   (not CSS columns), so each group always gets its own column and all four end on one
   line; the rule between them is each group's left border. */
.mk-cols.h-mk { columns: 2; }
@media (max-width: 639px) { .mk-cols.h-mk { columns: 1; } }
@media (min-width: 1100px) {
  .mk-cols.h-mk { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .mk-cols.h-mk > .mk-group + .mk-group { border-left: 1px solid var(--rule-strong); }
}
/* Dense rows (20px, 12px type) with thin dim ice blue sub-heading bars. Colour only on
   the change; a price that moved 2% or more gets a thin box around its change. */
.panel-body:has(> .h-mk) { padding: 4px 10px; }
.h-mk .mk-group .c-last { width: 10ch; }
.h-mk .mk-group .c-pct { width: 9ch; }
.h-mk .mk-group td.num { padding: 0 5px; }
.h-mk .mk-group .sub-row th {
  height: 15px; padding: 0 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; line-height: 15px;
  color: var(--text-2); background: var(--accent-tint); border-bottom: 0;
}
.h-mk .mk-group td.pct.is-big { outline: 1px solid currentColor; outline-offset: -3px; }
@media (min-width: 640px) {
  .h-mk .mk-group th, .h-mk .mk-group td { height: 20px; font-size: 12px; }
  .h-mk .mk-group .group-row:not(.sub-row) th { height: 18px; font-size: 11px; }
  .h-mk .mk-group .sub-row th { height: 15px; font-size: 10px; }
}
/* 1100 to 1279px: four columns are narrow, so smaller type and tighter cells keep the
   longest names (Nasdaq 100 fut, Euro Stoxx 50) whole. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .h-mk .mk-group th, .h-mk .mk-group td { font-size: 11px; }
  .h-mk .mk-group .c-tag { width: 28px; }
  .h-mk .mk-group .c-last { width: 68px; }
  .h-mk .mk-group .c-pct { width: 58px; }
  .h-mk .mk-group .name { padding: 0 2px 0 6px; }
  .h-mk .mk-group td.num { padding: 0 4px; }
}
/* Phones and tablets: HOME's news stops at eight headlines (NEWS has them all). */
@media (max-width: 1099px) { .h-news .news-row:nth-child(n+9) { display: none; } }
.mk-cols { columns: 3 340px; column-gap: 0; column-rule: 1px solid var(--rule-strong); }
.mk-cols .mk-group { break-inside: avoid; background: var(--bg); }
.mk-cols .mk-group .group-row th { border-top: 0; }
/* Same column widths in every group table, so tags and numbers line up across groups. */
/* Fixed layout from the colgroup; number widths include 6px side padding. */
.mk-group { table-layout: fixed; }
.mk-group .c-tag { width: 34px; }
.mk-group .c-last { width: 11ch; }
.mk-group .c-chg { width: 9ch; }
.mk-group .c-pct { width: 8ch; }
.mk-group .c-time { width: 7ch; }
.mk-group .name { width: auto; }
.mk-group td.num { padding: 0 6px; }
.mk-cols-time { columns: 3 400px; }

/* ---- Range chart: presets, bar sizes, dates, header, chart --------------- */
.rc { display: flex; flex-direction: column; min-width: 0; container: rc / inline-size; }
.ch-bar {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0 12px;
  min-height: 28px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.ch-tabs { margin-right: 0; border-left: 0; overflow-x: auto; scrollbar-width: none; }
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tabs .tab { height: 28px; font-size: 12px; }
.ch-tabs .tab.is-zoomed { background: var(--panel-3); color: var(--text); }
/* The range chart's bar is one left-aligned row: ranges and bar period, then ch-right
   (the two dates | LINE or CANDLES | + COMPARE) right after it, no spacer. Every control
   is 28px high. A .ch-grp starts with a thin dim separator (a background: taking it off a
   group that starts a wrapped row changes no width). */
.rc > .ch-bar { gap: 0; }
.rc .ch-rng { padding-right: 10px; }
.ch-right { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; min-width: 0; }
.ch-grp {
  padding: 0 10px 0 11px;
  background: linear-gradient(var(--rule-strong), var(--rule-strong)) 0 50% / 1px 16px no-repeat;
}
.ch-grp.is-row-start { background: none; }
.ch-right > .ch-grp:last-child { padding-right: 0; }
.ch-tools { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ch-tools > .tab { height: 28px; font-size: 12px; }
.ch-seg { display: flex; align-items: center; }
.ch-seg .tab { height: 28px; font-size: 12px; }
/* LINE or CANDLES, one button as wide as CANDLES, so a click never moves the row. */
.ch-sty { justify-content: center; min-width: calc(7ch + 16px); color: var(--text); }
.ch-add-s { display: none; }
.ch-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 0 0 8px;
  border: 1px solid var(--rule-strong); font-size: 12px; color: var(--text); white-space: nowrap;
}
.ch-chip-sw { width: 10px; height: 2px; background: currentColor; }
.ch-chip.cmp-1 .ch-chip-sw { background: var(--cmp-1); }
.ch-chip.cmp-2 .ch-chip-sw { background: var(--cmp-2); }
.ch-chip.cmp-3 .ch-chip-sw { background: var(--cmp-3); }
.ch-chip-x { height: 20px; padding: 0 7px; border: 0; background: transparent; color: var(--dim); font-family: var(--font); font-size: 13px; cursor: pointer; }
.ch-chip-x:hover { color: var(--text); background: var(--panel-3); }
.ch-dates { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 2px 8px 2px 0; font-size: 12px; color: var(--dim); }
.ch-right > .ch-dates { margin-left: 0; padding: 0 10px 0 11px; }
.ch-right > .ch-dates input { font-size: 12px; }
.ch-dates label { display: flex; align-items: center; gap: 6px; letter-spacing: .06em; }
.ch-right > .ch-dates { gap: 6px; }
.ch-dsep { color: var(--dim); }
/* The date boxes: inverse ice blue, typed as MM/DD/YYYY or MM/DD/YY; red when they hold
   no real day. */
.ch-dates input {
  width: 13ch; height: 28px; padding: 0 8px;
  border: 0; background: var(--text-2); color: var(--ink);
  font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.ch-dates.is-active input { background: var(--accent); }
.ch-dates input:focus { outline: 2px solid var(--text); outline-offset: 0; background: var(--text); }
.ch-dates input.is-bad { background: var(--down); color: var(--ink); }
/* The bar period: a button right of MAX ("DAILY" with a caret) opening a grid of period
   rows and the ranges each may draw. The grid floats over the chart (absolute, from the
   toolbar's top row), so opening it never changes a size. */
.ch-bar { position: relative; }
.ch-rng { display: flex; align-items: stretch; min-width: 0; }
.ch-per { display: flex; }
.ch-per-btn { height: 28px; gap: 6px; font-size: 12px; white-space: nowrap; border: 1px solid var(--rule-strong); border-width: 0 1px; color: var(--text); cursor: pointer; }
.ch-per-btn[aria-expanded="true"] { color: var(--ink); background: var(--text-2); }
.ch-caret { font-size: 10px; }
.ch-per-grid {
  position: absolute; top: 28px; left: 0; z-index: 30;
  max-width: 100%; overflow-x: auto; padding: 4px 0 6px;
  background: var(--panel); border: 1px solid var(--rule-strong);
}
.ch-per-grid[hidden] { display: none; }
.ch-per-g { padding: 6px 10px 2px; font-size: 10px; letter-spacing: .1em; color: var(--faint); }
.ch-per-row { display: grid; grid-template-columns: 76px repeat(11, 36px); align-items: center; height: 24px; }
.ch-per-k { padding: 0 10px; font-size: 11px; letter-spacing: .06em; color: var(--dim); white-space: nowrap; }
.ch-per-c {
  width: 34px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 12px; color: var(--text-2);
}
.ch-per-c:hover { color: var(--text); background: var(--panel-3); }
.ch-per-c.is-active { color: var(--ink); background: var(--text-2); font-weight: 600; }
.ch-per-c:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.ch-hv { color: var(--text); }
/* Narrow chart boxes (HOME, DESK panels) keep the bar on one row by compacting in steps,
   by the chart box's own width: short dates (09/25/26, --ch-yy tells chart.js) and + VS,
   then tighter range buttons, then 2Y and 10Y go (the period grid still has them). Only
   under about 640px does the bar wrap to a second row. */
@container rc (max-width: 859px) {
  .ch-bar { --ch-yy: 1; }
  .ch-right > .ch-dates input { width: calc(8ch + 18px); padding: 0 7px; }
  .ch-add-l { display: none; }
  .ch-add-s { display: inline; }
}
@container rc (max-width: 779px) {
  .ch-tabs .tab, .ch-per-btn, .ch-add { padding: 0 5px; }
  .ch-sty { padding: 0 5px; min-width: calc(7ch + 10px); }
}
@container rc (max-width: 719px) {
  .ch-tabs .ch-r-minor:not(.is-active) { display: none; }
}

/* The header strip: last and the change over the window, big; the window's numbers or
   the crosshair's bar under it. One line each, so hovering never moves the chart. */
.ch-head { padding: 6px 10px 0; min-width: 0; }
.ch-l1, .ch-l2 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-l1 { height: 28px; font-size: 20px; line-height: 28px; letter-spacing: .01em; }
.ch-l1 .ch-k { font-size: 12px; letter-spacing: .08em; color: var(--dim); vertical-align: 3px; }
.ch-l1 .ch-v { color: var(--text); font-weight: 600; margin-right: 6px; }
.ch-l1 .ch-c { margin-right: 6px; font-weight: 600; }
.ch-l2 { height: 20px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.ch-l2 .ch-k { color: var(--dim); letter-spacing: .06em; }
.ch-l2 .ch-when { color: var(--text); }
.ch-l2 .ch-cmpk.cmp-1 { color: var(--cmp-1); }
.ch-l2 .ch-cmpk.cmp-2 { color: var(--cmp-2); }
.ch-l2 .ch-cmpk.cmp-3 { color: var(--cmp-3); }
.ch-sep { color: var(--faint); margin: 0 4px; }
.rc.is-compact .ch-l2, .rc.is-tight .ch-l2 { display: none; }
.rc.is-compact .ch-head, .rc.is-tight .ch-head { padding-top: 2px; }
/* Compact (HOME, short panels): the range row and the LAST line share one row, so the
   plot keeps the height. */
.rc.is-compact, .rc.is-tight {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
}
.rc.is-compact > .ch-bar, .rc.is-tight > .ch-bar { grid-area: 1 / 1; }
.rc.is-compact > .ch-head, .rc.is-tight > .ch-head { grid-area: 1 / 2; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; border-bottom: 1px solid var(--rule); background: var(--panel); }
.rc.is-compact > .chart-host, .rc.is-tight > .chart-host { grid-area: 2 / 1 / 3 / 3; min-height: 0; height: auto; }
.rc.is-compact .ch-tabs .tab, .rc.is-tight .ch-tabs .tab { padding: 0 6px; font-size: 11px; }
.rc.is-compact .ch-l1, .rc.is-tight .ch-l1 { font-size: 16px; }
.rc.is-loading .ch-head { opacity: .7; }

.panel-body:has(> .rc-home) { position: relative; min-height: 330px; }
.rc-home { position: absolute; inset: 0; }
.rc-home .chart-host-home { position: relative; inset: auto; flex: 1; min-height: 0; height: auto; margin: 4px 0 0 10px; }

/* ---- Charts ----------------------------------------------------------- */
/* The chart box takes its size from the layout only: the SVG sits absolutely inside and
   is clipped, so drawing can never grow the box or its panel (no scrollbar loops). */
.chart-host { position: relative; height: 320px; min-height: 0; overflow: hidden; margin: 4px 0 0 10px; }
.chart-host:focus { outline: none; }
.chart-host:focus-visible { outline: 1px solid var(--rule-strong); outline-offset: 2px; }
.chart { display: block; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chart-host.is-measuring .chart { touch-action: none; }
.ch-grid, .ch-vgrid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.ch-axis { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ch-zero { stroke: var(--text-2); stroke-width: 1; opacity: .5; shape-rendering: crispEdges; }
.ch-ylab, .ch-xlab, .ch-vlab { fill: var(--dim); font-family: var(--font); font-size: 11px; }
.ch-xlab.is-strong { fill: var(--text-2); }
.ch-vlab { font-size: 9px; letter-spacing: .08em; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-line.is-ext { opacity: .5; }
.ch-area { fill: var(--accent); opacity: .07; }
.ch-cmp { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.ch-cmp.cmp-1 { stroke: var(--cmp-1); }
.ch-cmp.cmp-2 { stroke: var(--cmp-2); }
.ch-cmp.cmp-3 { stroke: var(--cmp-3); }
.ch-candle.up { fill: var(--up); }
.ch-candle.down { fill: var(--down); }
.ch-wick { fill: none; stroke-width: 1; shape-rendering: crispEdges; }
.ch-wick.up { stroke: var(--up); }
.ch-wick.down { stroke: var(--down); }
.ch-vol { opacity: .45; }
.ch-vol.up { fill: var(--up); }
.ch-vol.down { fill: var(--down); }
.ch-last-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: .45; shape-rendering: crispEdges; }
.ch-last-bg { fill: var(--accent); }
.ch-last .ch-last-t, .ch-last-t { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; }
.ch-last.cmp-1 .ch-last-bg { fill: var(--cmp-1); }
.ch-last.cmp-2 .ch-last-bg { fill: var(--cmp-2); }
.ch-last.cmp-3 .ch-last-bg { fill: var(--cmp-3); }
.ch-cross { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 2; shape-rendering: crispEdges; pointer-events: none; }
.ch-dot { fill: var(--text); pointer-events: none; }
.ch-day { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ch-ext { fill: var(--panel-2); }
.ch-ext-lab { fill: var(--dim); font-family: var(--font); font-size: 9px; letter-spacing: .08em; }
.ch-ref { stroke-width: 1; shape-rendering: crispEdges; }
.ch-ref-prev { stroke: var(--text-2); stroke-dasharray: 6 4; opacity: .7; }
.ch-ref-open { stroke: var(--dim); stroke-dasharray: 1 3; }
.ch-lab { font-family: var(--font); font-size: 10px; fill: var(--text-2); }
.ch-lab-bg { fill: var(--bg); opacity: .82; }
.ch-ref-prev-lab { fill: var(--text-2); }
.ch-ref-open-lab { fill: var(--dim); }
.ch-mk-lab { fill: var(--text); }
.ch-mk-lab.up, .ch-mk-move.up { fill: var(--up); }
.ch-mk-lab.down, .ch-mk-move.down { fill: var(--down); }
.ch-mk { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.ch-mk-move.up { stroke: var(--up); }
.ch-mk-move.down { stroke: var(--down); }
.ch-move { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .85; }
.ch-move.up { stroke: var(--up); }
.ch-move.down { stroke: var(--down); }
.ch-tag-bg { fill: var(--text-2); }
.ch-tag { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; }
/* Event flags: E earnings (links to the SEC filing), D ex-dividend. */
.ch-flag { cursor: default; }
a.ch-flag { cursor: pointer; }
.ch-flag-box { fill: var(--bg); stroke: var(--text-2); stroke-width: 1; shape-rendering: crispEdges; }
.ch-flag-t { fill: var(--text-2); font-family: var(--font); font-size: 9px; font-weight: 700; }
.ch-flag.is-E .ch-flag-box { stroke: var(--accent); }
.ch-flag.is-E .ch-flag-t { fill: var(--accent); }
.ch-flag:hover .ch-flag-box { fill: var(--panel-3); }
/* N: news and other 8-K filings, same box as E and D. */
.ch-flag.is-N .ch-flag-box { stroke: var(--text); }
.ch-flag.is-N .ch-flag-t { fill: var(--text); }
a.ch-flag:focus { outline: none; }
a.ch-flag:focus-visible .ch-flag-box { fill: var(--panel-3); stroke: var(--accent); stroke-width: 2; }
/* The measure: a shaded band between two bars and a big label. */
.ch-meas { pointer-events: none; }
.ch-meas-band { opacity: .14; }
.ch-meas-band.up { fill: var(--up); }
.ch-meas-band.down { fill: var(--down); }
.ch-meas-band.flat { fill: var(--text-2); }
.ch-meas-line { stroke-width: 1.5; stroke-dasharray: 4 3; }
.ch-meas-line.up { stroke: var(--up); }
.ch-meas-line.down { stroke: var(--down); }
.ch-meas-line.flat { stroke: var(--text-2); }
.ch-meas-dot { fill: var(--text); }
.ch-meas-bg { fill: var(--bg); opacity: .92; stroke: var(--rule-strong); }
.ch-meas-text { font-family: var(--font); font-size: 17px; font-weight: 700; white-space: pre; }
.ch-meas-text.up { fill: var(--up); }
.ch-meas-text.down { fill: var(--down); }
.ch-meas-text.flat { fill: var(--text); }

/* ---- Stats (key numbers) --------------------------------------------- */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; border-top: 1px solid var(--rule); }
.stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--row-h); border-bottom: 1px solid var(--rule); }
.stat dt { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.stat dd { display: flex; align-items: center; margin: 0; color: var(--text); text-align: right; }
.stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin-top: 12px; }

.q-name { color: var(--text-2); font-size: 14px; }
.q-hero .fresh { align-self: center; width: auto; font-size: 10px; line-height: 14px; }
.q-hero { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; font-size: 44px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.q-ccy { font-size: 14px; font-weight: 400; letter-spacing: .06em; color: var(--accent); }

/* ---- FX and CPI ------------------------------------------------------- */
.fx-from { font-size: 14px; color: var(--text-2); }
.fx-from .num { color: var(--text); }
.hero {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px;
  margin-top: 2px;
  font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
  color: var(--text);
}
.hero-unit { font-size: 18px; font-weight: 400; letter-spacing: .06em; color: var(--accent); }
.hero.is-long { font-size: 36px; }
.hero.is-xlong { font-size: 28px; }
.fx-to { margin-top: 2px; font-size: 13px; color: var(--text-2); }
.fx-to.dim { color: var(--dim); }
.swap { margin-top: 10px; }

/* ---- BUY -------------------------------------------------------------- */
.buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 32px; padding: 4px 0 8px; }
.buy-stats { margin-top: 16px; max-width: 640px; }
.buy-stats dd.dim { color: var(--dim); font-size: 12px; }
.buy-side { display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.stamp {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 8px 28px 10px;
  border: 2px solid currentColor;
  outline: 1px solid currentColor; outline-offset: 3px;
  text-transform: uppercase;
  transform: rotate(-4deg);
  animation: stamp-in 180ms cubic-bezier(.2, .8, .2, 1) both;
}
.stamp-k { font-size: 11px; font-weight: 600; letter-spacing: .3em; }
.stamp-v { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: .1em; white-space: nowrap; }
.stamp-worth { color: var(--up); }
.stamp-sleep { color: var(--accent); }
.stamp-skip { color: var(--down); }
@keyframes stamp-in { from { transform: rotate(var(--stamp-rot, -4deg)) scale(1.25); opacity: 0; } to { transform: rotate(var(--stamp-rot, -4deg)) scale(1); opacity: 1; } }
.stamp-line { margin-top: 14px; color: var(--text-2); text-align: center; }
.how { align-self: stretch; margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 8px; }
.how summary { cursor: pointer; color: var(--accent); font-size: 12px; list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how summary::before { content: '+ '; }
.how[open] summary::before { content: '- '; }
.how-list { margin-top: 8px; display: grid; gap: 6px; color: var(--text-2); font-size: 12px; line-height: 1.5; }

.wi-run {
  height: 24px; padding: 0 16px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--ink);
  font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .12em; cursor: pointer;
}
.wi-run:hover { background: var(--text); border-color: var(--text); }

.hero-value.up, .wi-x.up { color: var(--up); }
.hero-value.down, .wi-x.down { color: var(--down); }
.wi-source { margin-top: 10px; font-size: 11px; color: var(--dim); }
.how-list a { color: var(--accent); }

.wi-btn:disabled { opacity: .5; cursor: progress; }
.wi-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wi-btn {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--text);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-decoration: none; cursor: pointer;
}
.wi-btn:first-child { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.wi-btn:hover { text-decoration: none; background: var(--text); border-color: var(--text); color: var(--ink); }

/* ---- NEWS ------------------------------------------------------------- */
.news-row {
  display: grid;
  grid-template-columns: 48px 40px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 4px 10px;
  min-height: var(--row-h);
  border-bottom: 1px solid var(--rule);
}
.news-row:hover { background: var(--panel-2); }
.news-time { color: var(--dim); }
.news-time .nt-s { display: none; }
.news-src { color: var(--accent); font-size: 11px; letter-spacing: .04em; }
.news-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-title:visited { color: var(--text-2); }
.news-title:hover { color: var(--accent); text-decoration: none; }
/* Live NEWS: a new story slides in at the top and glows ice blue for about 2 s. */
.news-row.is-new { animation: news-in .3s ease-out, news-glow 2s ease-out; }
@keyframes news-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes news-glow { from { background: hsla(201, 100%, 71%, .22); box-shadow: inset 2px 0 0 var(--accent); } to { background: transparent; box-shadow: inset 2px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .news-row.is-new { animation: news-glow 2s ease-out; } }
.news-new { color: var(--ink); background: var(--accent); padding: 0 5px; margin-right: 8px; font-weight: 700; letter-spacing: .06em; }

/* ---- HELP ------------------------------------------------------------- */
.cmd-list { margin: -8px -10px; }
.cmd-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 10px;
  min-height: var(--row-h);
  border-bottom: 1px solid var(--rule);
}
.cmd-row:last-child { border-bottom: 0; }
.cmd-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-hint { color: var(--text-2); }
.cmd-example { text-align: right; }
.cmd-example .code + .code { margin-left: 10px; }
.cmd-row.is-soon .cmd-name, .cmd-row.is-soon .cmd-hint, .cmd-row.is-soon .cmd-example { color: var(--faint); }
.cmd-row.is-soon .cmd-example { font-size: 11px; letter-spacing: .1em; }

.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.keys div { display: flex; align-items: baseline; gap: 10px; }
.keys dt { flex: 0 0 96px; }
.keys dd { margin: 0; color: var(--text-2); }

/* ---- Boot log (first visit) ------------------------------------------ */
.boot { padding-top: 4px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.boot-line:first-child { color: var(--text); font-weight: 600; letter-spacing: .12em; margin-bottom: 6px; }
.boot-ok { color: var(--accent); }
.boot-cursor { display: inline-block; width: 1ch; height: 15px; margin-top: 4px; background: var(--accent); animation: blink 1.1s steps(1, end) infinite; }
.boot-skip { margin-top: 24px; font-size: 11px; color: var(--dim); }

/* ---- Dock: status line, ticker tape, function keys --------------------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--bg);
  border-top: 1px solid var(--rule-strong);
}
.statusline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--status-h);
  padding: 0 var(--inset);
  background: var(--panel);
  font-size: 11px; letter-spacing: .06em;
  white-space: nowrap;
}
.status-msg { color: var(--accent); overflow: hidden; text-overflow: ellipsis; }
.status-msg[data-kind="warn"] { color: var(--down); }

.tape {
  display: none;
  position: relative;
  height: var(--tape-h);
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tape-track { display: flex; width: max-content; height: 100%; }
.tape-track.is-running { animation: tape var(--tape-duration, 60s) linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-group { display: flex; align-items: center; }
.tape-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0 16px;
  font-size: 12px;
  line-height: calc(var(--tape-h) - 2px);
  color: var(--text);
  border-right: 1px solid var(--rule);
}
.tape-item:hover { text-decoration: none; background: var(--panel-2); }
.tape-name { color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.tape-item .fresh { align-self: center; width: auto; font-size: 8px; line-height: 10px; padding: 0 2px; }
.tape-empty { padding: 0 var(--gutter); line-height: var(--tape-h); font-size: 11px; color: var(--dim); }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.keybar {
  display: flex;
  height: var(--keybar-h);
  padding: 0 calc(var(--inset) - 8px);
  overflow: hidden;
}
.fkeys {
  display: flex; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.fkeys::-webkit-scrollbar { display: none; }
.fkey {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-2);
  white-space: nowrap;
}
.fkey:hover { text-decoration: none; background: var(--panel-3); color: var(--text); }
.fkey-n { color: var(--dim); font-weight: 400; }
.fkey.is-active { background: var(--accent); color: var(--ink); }
.fkey.is-active .fkey-n { color: var(--ink); }

/* ---- Narrower screens ------------------------------------------------- */
@media (max-width: 1100px) {
  .cmd-keys { display: none; }
  .grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  :root { --gutter: 8px; --row-h: 28px; }
  body { font-size: 13px; }

  .clock .label { display: none; }
  .clock { gap: 8px; }
  .status { padding-left: 8px; letter-spacing: .04em; }
  .wordmark { letter-spacing: .14em; }

  .suggest { left: var(--gutter); width: calc(100% - var(--gutter) * 2); }
  .suggest li { grid-template-columns: 72px 1fr; gap: 10px; height: 32px; }

  .grid-table th, .grid-table td { padding: 0 8px; }
  .grid-table .chg, .grid-table .time, .grid-table .moves { display: none; }
  .mk-group .c-chg, .mk-group .c-time { width: 0; }
  .ch-bar { gap: 0; }
  .ch-tabs { width: 100%; border-bottom: 1px solid var(--rule); }
  .ch-rng { width: 100%; border-bottom: 1px solid var(--rule); }
  .ch-rng > .ch-tabs { flex: 1 1 auto; width: auto; min-width: 0; border-bottom: 0; }
  .ch-right { width: 100%; margin-left: 0; gap: 0; }
  .rc .ch-rng { padding-right: 0; }
  .ch-right > .ch-dates { padding: 4px 8px; }
  .ch-right > .ch-seg { padding: 4px 10px 4px 8px; }
  .ch-tools { padding: 4px 8px 4px 11px; }
  .ch-dates { margin-left: 0; padding: 4px 8px; gap: 8px; }
  .ch-dates input { width: 13ch; padding: 0 6px; }
  .ch-head { padding: 4px 6px 0; }
  .ch-l1 { font-size: 18px; }
  .ch-l2 { font-size: 12px; }
  .rc.is-compact, .rc.is-tight { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .rc.is-compact > .ch-head, .rc.is-tight > .ch-head { grid-area: 2 / 1; justify-content: flex-start; padding: 0 6px; }
  .rc.is-compact > .chart-host, .rc.is-tight > .chart-host { grid-area: 3 / 1; }
  .panel-body:has(> .rc-home) { min-height: 300px; }

  .q-hero, .hero { font-size: 34px; }
  .hero.is-long { font-size: 28px; }
  .hero.is-xlong { font-size: 22px; }
  .hero-unit { font-size: 14px; }
  .buy { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wi-run { margin-left: auto; }
  .stamp-v { font-size: 26px; }
  .stats-row { grid-template-columns: minmax(0, 1fr); }
  .chart-host { height: 240px; margin-left: 6px; }
  .rc-home .chart-host-home { margin-left: 6px; }

  .news-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 4px 8px; }
  .news-src { display: none; }
  .news-time .nt-l { display: none; }
  .news-time .nt-s { display: inline; }
  .news-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .cmd-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 8px; }
  .cmd-name { white-space: normal; }
  .cmd-example { text-align: left; }
  .cmd-hint { font-size: 12px; }
  .keys { grid-template-columns: minmax(0, 1fr); }

  .tape-item { padding: 0 12px; }
  .fkey { padding: 0 10px; }
}

/* ---- Reduced motion: no tape scroll, flash as text colour only -------- */
@media (prefers-reduced-motion: reduce) {
  .tape-track.is-running { animation: none; }
  .tape { overflow-x: auto; scrollbar-width: none; }
  .cmd-focused .cursor.blink { animation: none; opacity: .9; }
  .boot-cursor { animation: none; }
  .stamp { animation: none; }
  .tick-up { background: none; color: var(--up) !important; }
  .tick-down { background: none; color: var(--down) !important; }
}

/* ---- FINANCIALS and SCREEN ------------------------------------------- */
:root {
  --series-1: #3987e5; /* revenue: blue, validated with --series-2 on the dark surface */
  --series-2: #d55181; /* net income: magenta */
}

.sc-scroll { overflow-x: auto; }
.sc-table .sc-sym { font-weight: 600; }
.sc-table .sc-sym a { color: var(--text); }
.sc-table .name { min-width: 180px; }

@media (max-width: 639px) {
  /* Phones: ticker only, so the numbers fit; a tap on the row opens the company. */
  .sc-table .name { display: none; }
}

/* ---- WATCH, PORTFOLIO, the watchlist star and the function bar ---------- */
.star {
  display: flex; align-items: center;
  padding: 0 8px; margin-right: auto;
  border: 0; border-right: 1px solid var(--rule-strong);
  background: transparent; color: var(--dim);
  font-family: var(--font); font-size: 14px; line-height: 1; cursor: pointer;
}
.star:hover { color: var(--text); background: var(--panel-3); }
.star.is-on { color: var(--accent); }

.fnbar {
  display: flex; align-items: stretch;
  min-height: 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none;
}
.fnbar::-webkit-scrollbar { display: none; }
.fn {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border: 0; border-right: 1px solid var(--rule);
  background: transparent; color: var(--text-2);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  cursor: pointer; white-space: nowrap;
}
.fn:hover { text-decoration: none; background: var(--panel-3); color: var(--text); }
.fn-n { color: var(--faint); font-weight: 400; }
.fn.is-active { background: var(--text-2); color: var(--ink); }
.fn.is-active .fn-n { color: var(--ink); }
.fn.is-soon { color: var(--faint); }
.fn.is-soon:hover { color: var(--dim); }

.wl-top, .pf-top { padding: 0; }
.wl-top > *, .pf-top > * { padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.wl-export, .pf-export { display: flex; align-items: center; gap: 10px; }
.wl-export input, .pf-export textarea, .pf-import textarea {
  flex: 1; min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--rule-strong); background: var(--bg);
  color: var(--text); font-family: var(--font); font-size: 12px;
}
.wl-export input:focus, .pf-export textarea:focus, .pf-import textarea:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.pf-btn {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--ink);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em; cursor: pointer; white-space: nowrap;
}
.pf-btn:hover { text-decoration: none; background: var(--text); border-color: var(--text); }
.wl-empty, .pf-empty { padding: 10px; line-height: 2; }
.wl-empty .code, .pf-empty .code { margin: 0 4px; }

.wl-table .wl-sym, .pf-table .pf-sym { width: 1%; font-weight: 600; }
.wl-table .wl-sym a, .pf-table .pf-sym a { color: var(--text); }
.wl-table tbody .name, .pf-table tbody .name { color: var(--dim); }
.wl-table .name-h, .pf-table .name-h { width: 100%; }
.h-more { padding: 4px 10px; font-size: 12px; }

@media (max-width: 639px) {
  .wl-table .name-h, .wl-table tbody .name, .pf-table .name-h, .pf-table .name { display: none; }
  .wl-table .wl-sym, .pf-table .pf-sym { width: 100%; }
  .wl-top > *, .pf-top > * { padding: 6px 8px; }
  .wl-export, .pf-export { flex-wrap: wrap; }
  .fn { padding: 0 9px; }
  .fnbar { min-height: 30px; }
}

/* ---- DESK: your own screen ------------------------------------------------ */
.desk { --desk-row: 40px; }
.desk-bar {
  display: flex; align-items: stretch; gap: 10px;
  height: 26px; margin-bottom: 1px;
  background: var(--panel); border: 1px solid var(--rule-strong);
  font-size: 11px; letter-spacing: .06em;
}
.desk-btn {
  align-self: center; height: 20px; padding: 0 8px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--text-2);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .08em; cursor: pointer; white-space: nowrap;
}
.desk-btn:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }

.dp { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); outline: 1px solid var(--rule-strong); }
.dp.is-focused { box-shadow: inset 0 0 0 1px var(--accent); z-index: 1; }

.desk.is-dragging { user-select: none; }
.dp.is-moving { z-index: 3; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 1px var(--accent); }
/* The desk uses the whole width of the window, like a terminal workspace. */
.screen:has(> .view > .desk) { padding-left: var(--gutter); padding-right: var(--gutter); }

.desk.is-mobile .dp { height: max(320px, calc(var(--h) * 46px)); }

.desk-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 30px; margin-bottom: 1px; padding: 4px 8px; background: var(--panel-2); border: 1px solid var(--accent); color: var(--text); font-size: 12px; }
.desk-confirm[hidden] { display: none; }
.desk-confirm:focus { outline: 0; }
/* The same line over any screen, for a link that would change something saved here. */
.link-confirm { flex: 0 0 auto; margin-bottom: 8px; }
.desk.is-mobile .dp.is-card { height: calc(var(--h) * 34px); min-height: 124px; }
.desk.is-mobile .desk-bar { flex-wrap: wrap; height: auto; min-height: 26px; }
/* ---- end DESK cards ---- */

/* ---- A numbered panel over the whole screen (keys 1 to 9 off stock screens) ---- */
.panel.is-max {
  position: fixed; z-index: 6;
  top: var(--max-top, calc(var(--topbar-h) + var(--cmd-h)));
  left: var(--inset); right: var(--inset); bottom: calc(var(--dock-h) + 8px);
  border: 1px solid var(--rule-strong);
}
.panel.is-max > .panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
.panel.is-max > .panel-body:has(> .rc-home) { min-height: 0; overflow: hidden; scrollbar-gutter: auto; }
.panel.is-max .panel-label { box-shadow: inset 0 -2px 0 var(--ink); }

/* A chart takes its size from the layout, never from its own drawing: the SVG covers
   its box exactly (a drawing a moment out of date is scaled, not spilled), so a redraw
   cannot grow or scroll anything around it. */
.chart-host > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Scrollbars: thin and dark, the terminal's own colours (classic Windows scrollbars
   too). */
:root { scrollbar-color: var(--rule-strong) var(--bg); }
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* ---- Desktop: the screen fills the window exactly, panels scroll inside ---------
   The page never scrolls: the screen area sits between the command bar and the dock,
   the main panel of a screen stretches to the bottom and its body scrolls. When a
   screen has more than fits, the screen area itself scrolls. Phones keep the stacked,
   page-scrolling layout. */
@media (min-width: 1100px) {
  html:not(.is-embed) body {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh; min-height: 0;
    padding-bottom: var(--dock-h);
    overflow: hidden;
  }
  html:not(.is-embed) .topbar, html:not(.is-embed) .commandbar, html:not(.is-embed) .tickerbar { flex: 0 0 auto; }
  html:not(.is-embed) .screen {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
    padding-bottom: 8px;
    overflow: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: var(--rule-strong) var(--bg);
  }
  html:not(.is-embed) .screen > .view { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  html:not(.is-embed) .view > * { flex: 0 0 auto; }

  /* The blocks of a screen: panels, stacks of panels, grids, a panel with a side. The
     last one takes the room left; the ones above keep their size. */
  html:not(.is-embed) .view > :is(.panel, .stack, .grid, .with-side, #er-host) { flex: 0 1 auto; min-height: 96px; }
  html:not(.is-embed) .view > :nth-last-child(1 of :is(.panel, .stack, .grid, .with-side, #er-host):not([hidden])) { flex: 1 1 auto; min-height: 240px; }
  html:not(.is-embed) .view > .panel > .panel-body,
  html:not(.is-embed) .view > #er-host > .panel > .panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
  html:not(.is-embed) .view > #er-host { display: flex; flex-direction: column; }
  html:not(.is-embed) .view > #er-host > .panel { flex: 1 1 auto; min-height: 0; }

  /* A stack: the last part takes the room left, the ones above keep their size. */
  html:not(.is-embed) .view > .stack { display: flex; flex-direction: column; }
  html:not(.is-embed) .view > .stack > * { flex: 0 1 auto; min-height: 96px; }
  html:not(.is-embed) .view > .stack > :nth-last-child(1 of :not([hidden])) { flex: 1 1 auto; min-height: 160px; }
  html:not(.is-embed) .view > .stack > .panel > .panel-body,
  html:not(.is-embed) .view > .stack > :not(.panel) > .panel > .panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
  html:not(.is-embed) .view > .stack > :not(.panel) > .panel { min-height: 0; }

  /* A grid or a panel with a side: rows stretch, each panel scrolls inside. */
  html:not(.is-embed) .view > .grid { grid-auto-rows: minmax(0, auto); align-content: stretch; }
  html:not(.is-embed) .view > :is(.grid, .with-side) > .panel { min-height: 0; }
  html:not(.is-embed) .view > :is(.grid, .with-side) > .panel > .panel-body { min-height: 0; overflow: auto; scrollbar-gutter: stable; }
  html:not(.is-embed) .view > .with-side { align-items: stretch; }

  /* A chart in a stretched panel grows with it; the chart redraws to its box. */
  html:not(.is-embed) .view .panel-body:has(> .rc:not(.rc-home)),
  html:not(.is-embed) .view > :is(.stack, .panel) .panel-body:has(> .chart-host) { display: flex; flex-direction: column; }
  html:not(.is-embed) .view .panel-body > .rc:not(.rc-home) { flex: 1 1 auto; min-height: 0; }
  html:not(.is-embed) .view .panel-body > .rc:not(.rc-home) > :not(.chart-host) { flex: 0 0 auto; }
  html:not(.is-embed) .view .panel-body > .rc:not(.rc-home) > .chart-host,
  html:not(.is-embed) .view > :is(.stack, .panel) .panel-body > .chart-host { flex: 1 1 0; height: auto; min-height: 160px; }
  html:not(.is-embed) .view > :is(.stack, .panel) .panel-body:has(> .chart-host) > :not(.chart-host) { flex: 0 0 auto; }

  /* HOME: three boxes. MARKETS across the top at its own height (four columns of ten),
     then the S&P 500 chart (about 62%) and NEWS (38%, scrolls inside) sharing the rest.
     On a short window MARKETS stops at 48% of the screen and scrolls inside; the gutter
     for its scrollbar is kept either way, so a scrollbar coming never resizes anything. */
  html:not(.is-embed) .view > .grid-home {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    grid-template-rows: fit-content(48%) minmax(140px, 1fr);
    min-height: 0;
  }
  html:not(.is-embed) .grid-home > .panel-wide > .panel-body { overflow: auto; scrollbar-gutter: stable; }
  html:not(.is-embed) .grid-home .panel-body:has(> .rc-home) { min-height: 0; overflow: hidden; scrollbar-gutter: auto; }
}

/* ---- Embed mode: the app inside a DESK panel ------------------------------- */
.is-embed body { min-height: 0; }
.is-embed .topbar, .is-embed .commandbar, .is-embed .dock, .is-embed .footnote { display: none; }
.is-embed .screen { padding: 0; }
.is-embed .grid, .is-embed .stack, .is-embed .panel-solo { border: 0; }
.is-embed { scrollbar-width: thin; scrollbar-color: var(--rule-strong) var(--bg); }
.is-embed .q-hero { margin: 0; font-size: 24px; }

.wd-stats dd { gap: 6px; }
.wd-table { max-width: 820px; }
.wd-table .name { width: auto; max-width: none; }
.wd-spark-cell { width: 1%; }
.wd-sub { font-size: 11px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; margin: 4px 0; }
.wd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 820px; }
.wd-table .wd-wrap { white-space: normal; height: auto; padding-top: 4px; padding-bottom: 4px; line-height: 1.3; }
@media (max-width: 639px) {
  .wd-hide-sm { display: none; }
  .wd-two { grid-template-columns: minmax(0, 1fr); }
  .wd-table th, .wd-table td { padding: 0 6px; }
}

/* --- NEWS SEC tab rows (phase 4) ------------------------------------------------ */
.news-filing .news-tkr { display: inline-block; width: 7ch; color: var(--accent); }
.news-filing .news-link { color: inherit; }
.news-filing .news-link:hover { color: var(--accent); text-decoration: none; }
.news-row.is-dim .news-title, .news-row.is-dim .news-src { color: var(--dim); }

.gs-form { flex-wrap: nowrap; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
/* --- end GUESS ------------------------------------------------------------------ */

/* --- SINCE on HOME (since.js): one line in the MARKETS title strip ------------ */
.since { color: var(--dim); }
.since .sn-sep { color: var(--faint); }
.since .sn-i { white-space: nowrap; }
/* Phones: the line takes its own row under the panel title, like a metaNote. */
@media (max-width: 639px) {
  .panel-head:has(.since) { flex-wrap: wrap; }
  .panel-meta:has(.since) { flex: 1 1 100%; justify-content: flex-start; text-align: left; padding-left: 8px; }
}
/* --- end SINCE ------------------------------------------------------------------ */

/* --- Phone key bar: short labels, so every key shows its whole word -------------- */
.fkey-short { display: none; }
@media (max-width: 639px) {
  .fkeys .fkey-l:has(+ .fkey-short) { display: none; }
  .fkeys .fkey-short { display: inline; }
}
/* --- end phone key bar ----------------------------------------------------------- */

/* --- ALERTS (price and gauge alerts) -------------------------------------------- */
.status-alerts {
  margin-left: auto; height: 16px; padding: 0 6px;
  border: 0; background: var(--accent); color: var(--ink);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .08em; cursor: pointer;
}
.status-alerts:hover { background: var(--text); }
.status-alerts[hidden] { display: none; }
/* --- end ALERTS ----------------------------------------------------------------- */

/* ---- Pro structure: seat, sponsor line, PRO breakdown, GIFT, FEEDBACK ------------ */
.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.seat { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--accent); white-space: nowrap; }
.seat:hover { text-decoration: none; color: var(--text); }
.seat[hidden] { display: none; }
/* The sponsor line gives way first (ellipsis); the legal line and its links never do. */
/* It takes the free space between the status text and the legal block, and sits centred
   in it: clear of the legal links on every screen. */
.status-sponsor { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.status-sponsor > .spon-item { max-width: 100%; min-width: 0; }
@media (max-width: 639px) { .status-sponsor { flex: 0 1 auto; justify-content: flex-start; } }
/* SPONSOR opens: the real strip is outlined for 2 s, so it is clear where it runs. */
.status-sponsor.is-spot { outline: 1px solid var(--accent); outline-offset: -1px; animation: spon-spot 2s ease-out; }
@keyframes spon-spot { from { box-shadow: 0 0 0 3px var(--accent-tint); } to { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .status-sponsor.is-spot { animation: none; } }
.status-sponsor[hidden] { display: none; }
.status-sponsor .sponsor-k { margin-right: 2ch; color: var(--faint); letter-spacing: .12em; }
.status-sponsor a { color: var(--text-2); }
.status-sponsor a:hover { color: var(--text); text-decoration: none; }
/* The rotating strip (sponsor-strip.js): one line, cut with an ellipsis, a short slide up
   on each change. The status bar and the SPONSOR preview share it. */
.spon-strip { overflow: hidden; }
.spon-strip .sponsor-k { margin-right: 2ch; color: var(--faint); letter-spacing: .12em; }
.spon-strip .spon-item { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.spon-strip a.spon-item:hover, .spon-strip a.spon-item:focus-visible { color: var(--text); text-decoration: none; }
.spon-strip a.spon-item:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.spon-strip.is-sliding .spon-item { animation: spon-in 180ms linear; }
@keyframes spon-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spon-strip.is-sliding .spon-item { animation: none; } }
.pro-cols .pro-list, .pro-gifts .pro-list { margin: 0 0 8px; }
.fb { display: grid; gap: 6px; max-width: 80ch; }
.fb-l { font-size: 11px; letter-spacing: .08em; color: var(--dim); }
.fb-msg, .fb-email {
  width: 100%; padding: 6px 8px; border: 1px solid var(--rule-strong); border-radius: 0;
  background: var(--bg); color: var(--text); font: inherit;
}
.fb-msg { min-height: 96px; max-height: 32vh; resize: vertical; line-height: 1.5; }
.fb-msg:focus, .fb-email:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.fb-count { margin: 0; font-size: 11px; color: var(--dim); text-align: right; }
.fb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.fb .pro-actions { margin: 4px 0 0; }
.fb-keys { font-size: 11px; }
.fb-mail { margin-top: 8px; }
@media (max-width: 639px) {
  /* A seat by the name: the name and the seat tighten so the clock keeps its room. */
  .brand { gap: 6px; }
  .brand:has(.seat:not([hidden])) .wordmark { letter-spacing: .04em; }
  .seat { font-size: 10px; letter-spacing: .04em; }
  .status-legal { gap: 6px; }
  .fb-keys { display: none; }
}
@media (max-width: 379px) {
  .seat { display: none; }
}

/* ---- NEWS push: the LIVE marker in the title strip (filled: streaming, hollow: polling) */
.news-live { display: inline-block; margin-right: 8px; padding: 0 4px; border: 1px solid var(--accent); color: var(--accent); font-weight: 700; letter-spacing: .08em; line-height: 13px; }
.news-live.is-on { background: var(--accent); color: var(--ink); }

/* ---- A source line a data licence asks for (the New York Fed on RATES and FEDPATH) ---- */
.src-note { margin: 6px 0 0; padding: 0 10px 4px; font-size: 11px; letter-spacing: .04em; color: var(--dim); }
.src-note a { color: var(--accent); }

/* commands.css */
/* Styles for the extra commands (WORLD, MOVERS, HEATMAP, ...). Same tokens as style.css. */

:root {
  --ln-0: var(--accent);
  --ln-1: hsl(262, 85%, 78%);
  --ln-2: hsl(328, 80%, 72%);
  --ln-3: hsl(168, 62%, 56%);
  --ln-4: var(--text-2);
}

/* ---- Layout ----------------------------------------------------------- */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel-wide { grid-column: 1 / -1; }
.pad { padding: 8px 10px; }
.more { padding: 6px 10px; font-size: 12px; }

/* ---- Shared cells ----------------------------------------------------- */
.tk { color: var(--accent); font-weight: 600; }
.tk-name { color: var(--dim); margin-left: 6px; }
.cc { margin-left: 4px; color: var(--dim); font-size: 11px; }
.grid-table .name a:hover .tk, .grid-table .row-link:hover .tk { color: var(--text); }
.movers-table .vol { color: var(--text-2); }
.st { width: 1%; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.st-open { color: var(--up); }
.st-lunch { color: var(--text-2); }
.st-closed { color: var(--dim); }
/* On phones the status is a coloured dot (legend under the panels), so names keep room. */
.st-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st-legend { display: none; }
.delayed { padding: 0 5px; border: 1px solid var(--rule-strong); color: var(--text-2); font-weight: 600; letter-spacing: .08em; }
.contract { margin-left: 6px; font-size: 11px; }
.unit { font-size: 12px; }
.bar-cell { width: 1%; }
.grid-table td.bar-cell { padding-right: 16px; }

.pbar { display: block; width: 160px; height: 8px; }
.tbar { display: inline-block; margin-right: 16px; vertical-align: middle; }
.pbar-level { fill: var(--accent); opacity: .75; }

.sc-scroll { overflow-x: auto; }
.sc-table { width: auto; min-width: 560px; }
.sc-table .sc-sym { width: 84px; font-weight: 600; }
.sc-table .sc-sym a { color: var(--accent); }
.sc-table tr:focus, .sc-tree tr:focus { outline: 0; background: var(--panel-3); box-shadow: inset 2px 0 0 var(--accent); }
.sc-tree .bb-in { padding-left: 24px; }
.sc-tree .bb-in a { color: var(--text); }
.sc-tree .sc-x { font-size: 11px; color: var(--dim); }
.sc-tree .sc-who td { padding-left: 24px; }
@media (max-width: 639px) {
  .sc-table { min-width: 0; width: 100%; }
  .sc-table .sc-sym { width: 64px; }
}

/* ---- Multi-line charts ------------------------------------------------ */
.ln { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ln.ln-0 { stroke: var(--ln-0); }
.ln.ln-1 { stroke: var(--ln-1); }
.ln.ln-2 { stroke: var(--ln-2); }
.ln.ln-3 { stroke: var(--ln-3); }
.ln.ln-4 { stroke: var(--ln-4); stroke-dasharray: 4 3; }
.ln-tag-bg.ln-0, .ln-dot.ln-0 { fill: var(--ln-0); }
.ln-tag-bg.ln-1, .ln-dot.ln-1 { fill: var(--ln-1); }
.ln-tag-bg.ln-2, .ln-dot.ln-2 { fill: var(--ln-2); }
.ln-tag-bg.ln-3, .ln-dot.ln-3 { fill: var(--ln-3); }
.ln-tag-bg.ln-4, .ln-dot.ln-4 { fill: var(--ln-4); }
.ln-tag { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; }
.ln-zero { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; shape-rendering: crispEdges; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 6px 10px 8px; border-top: 1px solid var(--rule); font-size: 12px; }
.legend li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sw { display: inline-block; width: 12px; height: 3px; flex: 0 0 auto; }
/* EARNINGS day pills sit above the panels; on phones they scroll with an edge fade. */
.er-bar { margin-bottom: 8px; border: 1px solid var(--rule-strong); }
.er-bar .toolbar { border-bottom: 0; flex-wrap: nowrap; }
.er-bar .toolbar-main { flex-wrap: nowrap; }

/* COMPARE: ticker chips (press to remove) and the add field. */
.cp-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.cp-chip { gap: 6px; color: var(--text); }
.cp-chip.is-fixed { border-color: var(--rule); }
.cp-x { color: var(--dim); font-size: 13px; }
.cp-chip:hover .cp-x { color: var(--down); }
.cp-add { display: inline-flex; align-items: center; gap: 4px; }
.cp-full { font-size: 11px; letter-spacing: .06em; }
.cp-bar { padding: 4px 8px; }
.field-input {
  height: 22px; width: 14ch; padding: 0 6px;
  border: 1px solid var(--rule-strong); background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.field-input:focus { outline: 0; border-color: var(--accent); }
/* FX converter row */
.fx-out { padding: 8px 10px; }
.fx-form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fx-form .fx-amt { width: 16ch; text-align: right; }
.fx-form .fx-code { width: 5ch; text-align: center; }
.fx-form .fx-year { width: 7ch; text-align: center; }
.field-input::placeholder { color: var(--dim); }
.sw.ln-0 { background: var(--ln-0); }
.sw.ln-1 { background: var(--ln-1); }
.sw.ln-2 { background: var(--ln-2); }
.sw.ln-3 { background: var(--ln-3); }
.sw.ln-4 { background: var(--ln-4); }
.lg-tk { font-weight: 600; }
.lg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.lg-v.ln-0 { color: var(--ln-0); }
.lg-v.ln-1 { color: var(--ln-1); }
.lg-v.ln-2 { color: var(--ln-2); }

.heatmap { display: block; }

/* ---- CLOCK ------------------------------------------------------------ */
.clock-table .secs { font-weight: 400; }
.clock-table .next { color: var(--text-2); }
.ex-name { color: var(--text); font-weight: 600; }
.daybar { display: block; width: 240px; height: 10px; }
.db-track { fill: var(--rule-strong); }
.db-on { fill: var(--accent); opacity: .45; }
.db-now { fill: var(--text); }
.db-tick { fill: var(--rule-strong); }
.db-scale { display: flex; justify-content: space-between; width: 240px; }
.db-scale span { width: 0; display: flex; justify-content: center; }
.db-scale span:first-child { justify-content: flex-start; }
.db-scale span:last-child { justify-content: flex-end; }
.nb { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.nb dt { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 19px; }
.nb dd { margin: 0; color: var(--text-2); }
.nb-in { margin-left: 8px; color: var(--text); }

/* ---- EARNINGS and CALENDAR -------------------------------------------- */
.when { font-size: 11px; letter-spacing: .06em; color: var(--text-2); }

/* ---- Company screens -------------------------------------------------- */
.profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 24px; padding: 2px 0 6px; }
.profile-name { margin: 2px 0 8px; font-size: 24px; font-weight: 600; line-height: 1.2; }
.profile-desc { max-width: 78ch; color: var(--text-2); line-height: 1.6; }
.profile-web { margin-top: 10px; }
.hist-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--rule-strong); font-size: 11px; letter-spacing: .06em; }
.btn {
  height: 22px; padding: 0 10px;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em; cursor: pointer;
}
.btn:hover { background: var(--accent); color: var(--ink); }
.dv-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 24px; }
.dv-stats { margin-top: 12px; max-width: 420px; }
.dv-years { border: 1px solid var(--rule); }
.dv-note { margin-top: 10px; font-size: 12px; }
.dv-chart-head { margin-top: 14px; font-size: 11px; color: var(--text-2); letter-spacing: .04em; }
.dv-chart-host { position: relative; height: 150px; max-width: 520px; margin-top: 4px; }
.dv-bar { fill: var(--series-1); }
.dv-bar.is-part { fill-opacity: .45; }
/* NEWS <T>: the source in the same slot as NEWS (second), wider for full names. */
.tnews-row { grid-template-columns: 48px 16ch minmax(0, 1fr); }
.tnews-src { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.money { padding: 2px 0 6px; }

/* ---- Narrower screens ------------------------------------------------- */
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .profile, .dv-top { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 639px) {
  .tk-name { display: none; }
  .sectors-table .tk { display: none; }
  .sectors-table .tk-name { display: inline; margin-left: 0; color: var(--text-2); }
  .bar-cell, .tbar { display: none; }
  .unit { display: none; }
  .contract { display: none; }
  .st { font-size: 10px; }
  .world-table .st { text-align: center; }
  .world-table .st-dot { display: inline-block; }
  .world-table .st-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .st-legend { display: flex; gap: 16px; }
  .st-legend > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; }
  .st-legend .st-dot { display: inline-block; }
  .clock-table .secs, .ex-city { display: none; }
  .earnings-table .when { font-size: 10px; }
  .legend { gap: 4px 12px; }
  .lg-name { display: none; }
  .tnews-row { grid-template-columns: 44px minmax(0, 1fr); }
  .tnews-src { display: none; }
  .profile-name { font-size: 20px; }
  .hist-bar { flex-wrap: wrap; }
}

/* ---- Company data (INSIDERS, OWNERS, FILINGS, SHORTS, BEATS, VALUE, IPOS, SPLITS, EXDIV) ---- */
.co-pad { padding: 8px 10px; }
.co-source { margin-top: 6px; }
.grid-table .co-n { width: 1%; padding-right: 0; color: var(--faint); }
.grid-table .co-date { width: 1%; color: var(--text-2); }
.grid-table .co-form { width: 1%; font-weight: 600; }
.grid-table .co-kind { width: 1%; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.grid-table .co-kind.dim { color: var(--dim); }
.grid-table .co-title { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.co-table .name { color: var(--text-2); }
/* Capped on wide screens, so a label and its numbers do not drift apart. */
.sp-table, .xd-table, .ipo-table, .calendar-table, .earnings-table { max-width: 960px; }
.fil-table .name a { color: var(--text-2); }
.fil-table .name a:hover { color: var(--accent); text-decoration: none; }
.co-totals { max-width: 720px; border-right: 1px solid var(--rule); }
.co-totals .name, .co-pos .name { width: auto; max-width: none; color: var(--dim); }
.co-totals .last { color: var(--text); font-weight: 600; }
.co-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.co-chips { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); background: var(--panel); }
.co-chips::-webkit-scrollbar { display: none; }
.co-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-right: 1px solid var(--rule); color: var(--dim); font-size: 11px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.co-chip:hover { text-decoration: none; color: var(--text); background: var(--panel-3); }
.co-chip.is-active { color: var(--ink); background: var(--text-2); }
.co-count { color: var(--faint); font-weight: 400; }
.co-chip.is-active .co-count { color: var(--ink); }
.co-noname { color: var(--text-2); }
@media (max-width: 639px) { .tk-name.co-noname { display: inline; } }
.co-title-line { margin-bottom: 10px; }
.co-group { margin: 0 0 4px; color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.co-groups { display: grid; gap: 12px 24px; }
.co-when { margin-left: 8px; font-size: 11px; }

@media (max-width: 1100px) {
  .co-split { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 639px) {
  .grid-table .co-n { display: none; }
  .grid-table .co-date { font-size: 11px; }
  .co-when { display: none; }
  .co-table .name { max-width: 0; }
}

.bb-table th[scope="row"] { text-align: left; font-weight: 400; color: var(--text-2); }
@media (max-width: 639px) {
  .bb-table th, .bb-table td { padding-left: 4px; padding-right: 4px; font-size: 11px; }
  .bb-table thead th:first-child { width: 55%; }
}

/* commands-markets.css */
/* Styles for OPTIONS, ECONOMY, FEDPATH, BREADTH and the BONDS and FXMATRIX views.
   Same tokens as style.css. */

.m-only { display: none; }

/* ---- Shared header row: a big number, then key/value pairs ------------ */
.oc-top, .ec-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
}
.oc-px { font-size: 22px; font-weight: 600; color: var(--text); }
.oc-kv { font-size: 12px; white-space: nowrap; }
.bg-body > .loading, .bg-body > .panel-msg, .fxm-body > .loading, .fxm-body > .panel-msg, #oc-chain > .panel-msg { padding: 8px 10px; }
.ec-back { display: flex; align-items: center; padding: 0 10px; font-size: 11px; letter-spacing: .06em; }

/* ---- ECONOMY ------------------------------------------------------------ */
.spark { display: block; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linejoin: round; }
.ec-spark { width: 1%; }
.ec-src { width: 1%; font-size: 11px; }
.ec-per { width: 1%; white-space: nowrap; }
.ec-bar { align-items: center; padding: 4px 0 4px 8px; }

/* ---- FEDPATH ------------------------------------------------------------ */
.fp-label {
  margin-bottom: 6px; padding: 5px 10px;
  border: 1px solid var(--rule-strong); border-left: 3px solid var(--accent);
  background: var(--panel);
  color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.fp-method { margin-top: 6px; border: 1px solid var(--rule-strong); background: var(--panel); }
.fp-method summary { padding: 4px 10px; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--text-2); }
.fp-method summary:hover { color: var(--text); }
.fp-method p { max-width: 90ch; padding: 0 10px 8px; color: var(--text-2); line-height: 1.55; font-size: 12px; }

/* ---- BREADTH ------------------------------------------------------------ */
.bb-bar { display: block; width: 180px; height: 8px; }
.bb-up { fill: var(--up); }
.bb-unch { fill: var(--rule-strong); }
.bb-down { fill: var(--down); }
.bb-all th, .bb-all td { font-weight: 600; background: var(--panel); }
/* One grid for both panels: the same name width, then the split bar. */
.bb-table { width: auto; }
.bb-table .name { width: 30ch; min-width: 30ch; max-width: 30ch; }
.bb-table .bar-cell { width: 204px; }
.bb-table .num { min-width: 9ch; }

/* ---- BONDS grid --------------------------------------------------------- */
.bg-table .bg-cell { width: 1%; }
.bg-table .bg-key { background: var(--panel); }
.bg-table thead .bg-key { color: var(--text-2); }
.bg-y { color: var(--text); font-weight: 600; }
/* Each yield opens its chart: it looks like a link on hover (the row hover too). */
.bg-y:hover, .row-link:hover .bg-y { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bg-table .row-link:hover .bg-y:not(:hover) { text-decoration: none; }
.bg-d { display: inline-block; min-width: 5ch; font-size: 11px; }
.bg-unit { color: var(--faint); font-size: 10px; letter-spacing: 0; text-transform: none; }

/* ---- Narrow screens: one line per row ----------------------------------- */
@media (max-width: 639px) {
  .oc-x, .m-hide { display: none; }
  .m-only { display: inline; }
  .oc-px { font-size: 18px; }
  .ec-prev, .ec-src, .ec-table .ec-spark { display: none; }
  .ec-per { font-size: 11px; }
  .bb-x { display: none; }
  .bb-table { width: 100%; }
  .bb-table .name { width: 100%; min-width: 0; max-width: 0; }
  .bg-d, .bg-unit { display: none; }
  .bg-table .bg-cell { padding: 0 6px; }
  .fp-method p { padding: 0 8px 8px; }
}

/* ---- end WORLDMAP --------------------------------------------------------- */

/* pro.css */
/* PRO, LOGIN, LOGOUT and TAPE screens. */
.pro-list { margin: 8px 0 12px; border-top: 1px solid var(--rule); }
.pro-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 16px; align-items: center; min-height: var(--row-h); border-bottom: 1px solid var(--rule); }
.pro-feat { color: var(--text); font-weight: 600; }
.pro-text { color: var(--text-2); }
.pro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 8px; }
.pro-actions .btn, a.btn { display: inline-flex; align-items: center; height: 28px; text-decoration: none; }
.btn-solid { background: var(--accent); color: var(--ink); }
.btn-solid:hover { background: var(--text); border-color: var(--text); }
.btn:disabled { opacity: .5; cursor: wait; }
.notice.warn { color: var(--down); }

@media (max-width: 639px) {
  .pro-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 0; }
}

/* kit.css */
/* Shared screen parts (see kit.js). Same tokens and scales as style.css:
   spacing 2 4 6 8 12 16 24 32, type 11 12 13 14 16 18 24. */

/* ---- Clickable things look clickable ------------------------------------- */
[data-cmd], button, summary, label[for], .th-sort { cursor: pointer; }
.is-clickable:hover { background: var(--panel-2); }

/* A plain label is never boxed; a box means you can press it. */
.tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border: 1px solid var(--rule-strong); background: transparent;
  color: var(--text-2); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  white-space: nowrap;
}
.chip:hover { color: var(--text); background: var(--panel-3); text-decoration: none; }

/* ---- The row under a panel title: filters left, a mode pair at the right end -- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 32px; padding: 4px 8px;
  border-bottom: 1px solid var(--rule);
}
.toolbar-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.toolbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

/* Segmented: a mode pair, a range set, a small set of views. */
.seg { display: inline-flex; align-items: stretch; height: 24px; border: 1px solid var(--rule-strong); }
.seg-item {
  display: flex; align-items: center; padding: 0 8px;
  border: 0; background: transparent;
  color: var(--dim); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  white-space: nowrap;
}
.seg-item + .seg-item { border-left: 1px solid var(--rule); }
.seg-item:hover { color: var(--text); background: var(--panel-3); text-decoration: none; }
.seg-item.is-active { color: var(--ink); background: var(--text-2); }

/* ---- Panel title bar tools (right): count and CSV --------------------------- */
.panel-tools { display: inline-flex; align-items: center; gap: 8px; }
.tools-count { color: var(--dim); font-size: 11px; letter-spacing: .04em; }
.panel-tools .chip { height: 18px; }

/* "More rows": bottom-left under the table. */
.table-more { display: flex; justify-content: flex-start; padding: 8px; }

/* ---- Tables: labels hug their content, numbers right-aligned ---------------- */
.dt { width: auto; max-width: 960px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt th, .dt td { height: var(--row-h); padding: 0 12px; white-space: nowrap; text-align: left; border-bottom: 1px solid var(--rule); }
.dt th { font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.dt .num { text-align: right; }
.dt tbody tr[data-cmd]:hover td, .dt tbody tr[data-cmd]:focus-visible td { background: var(--panel-2); }
.dt .th-sort {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.dt .th-sort:hover, .dt .th-sort.is-sorted { color: var(--text); }
.dt th.num .th-sort { flex-direction: row-reverse; }
.sort-arrow { display: inline-block; width: 8px; font-size: 8px; }

/* A name that truncates before any column is dropped. */
.cell-name { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }

/* A capped table plus a side panel, instead of a wide gap between label and numbers. */
.with-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1280px) {
  .with-side { grid-template-columns: minmax(0, 960px) minmax(280px, 1fr); align-items: start; }
}

/* ---- Strips that scroll sideways fade at the edge that has more ------------- */
.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.scroll-x.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); }
.scroll-x.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

@media (max-width: 639px) {
  .cell-name { max-width: 16ch; }
  .dt th, .dt td { padding: 0 8px; }
  .toolbar { flex-wrap: wrap; }
}

/* nav.css */
/* Navigation: the screen header, the dock (tape, status line, key bar), the MENU
   overlay, the HELP directory and the TAPE screen. Same tokens and scales as style.css:
   spacing 2 4 6 8 12 16 24 32, type 11 12 13 14 16 18 24. */

/* ---- Dock: tape (optional) above the status line, key bar at the bottom ---- */
/* style.css hides the tape by default (--tape-h: 0, .tape display none). TAPE ON puts
   body.has-tape on the page, and the TAPE screen shows its own strip. */
body.has-tape { --tape-h: 26px; --dock-h: calc(var(--status-h) + var(--tape-h) + var(--keybar-h) + 2px); }
body.has-tape .dock > .tape:not([hidden]) { display: block; }
.dock > .tape { border-top: 0; }
.tape[hidden] { display: none; }
.tape.tape-panel { display: block; --tape-h: 26px; }

/* Status line: messages left, the legal line right. */
.status-msg { min-width: 0; }

.fkey-share, .fkey-menu {
  border: 0; border-left: 1px solid var(--rule);
  background: transparent;
  font-family: var(--font);
  cursor: pointer;
  padding: 0 12px;
  gap: 8px;
}
.fkey-share { margin-left: auto; }
.fkey-menu .fkey-n { font-size: 11px; }

/* ---- The screen's name in the command bar, with the watch star on stock screens -- */
.cmd-label {
  flex: 0 1 auto; min-width: 0; max-width: 28ch;
  display: flex; align-items: center; gap: 2px;
  height: 22px; padding: 0 0 0 8px;
  background: var(--accent-tint); border-left: 2px solid var(--accent);
}
.cmd-label-text {
  min-width: 0; padding-right: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd-label-text:empty { display: none; }
.cmd-label:has(> .cmd-label-text:empty):has(> .head-star[hidden]) { display: none; }
.head-star { align-self: stretch; margin: 0; padding: 0 6px; border-right: 0; font-size: 14px; }
.head-star[hidden] { display: none; }
.cmd-label-text:not(:empty) + .head-star { margin-left: -6px; }

/* ---- Stock screens: one tab strip under the command bar ------------------------ */
.tickerbar { margin: 4px var(--inset) 0; border: 1px solid var(--rule-strong); }
.tickerbar[hidden] { display: none; }
/* More functions off to the right: an arrow over a fade at the edge says the strip
   scrolls (in place of the plain fade, which hid the cut). */
.tickerbar.scroll-x.fade-r { -webkit-mask-image: none; mask-image: none; }
.tickerbar.scroll-x.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
}
.tickerbar.fade-r::after {
  content: '\203A';
  position: sticky; right: 0;
  flex: 0 0 40px; margin-left: -40px;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  background: linear-gradient(to right, transparent, var(--panel) 55%);
  color: var(--accent); font-size: 18px; font-weight: 600; line-height: 1;
  pointer-events: none;
}

/* ---- MENU overlay (Ctrl+K) ---------------------------------------------------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 64px 16px 16px;
  background: hsla(213, 43%, 3%, .8);
}
.menu-overlay[hidden] { display: none; }
.menu {
  display: flex; flex-direction: column;
  width: min(1040px, 100%);
  max-height: calc(100vh - 96px);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 15px 35px hsla(0, 0%, 0%, .5);
}
.menu-search {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px;
  border-bottom: 1px solid var(--rule-strong);
}
.menu-q, .help-q {
  flex: 1; min-width: 0;
  padding: 0; border: 0; outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font); font-size: 16px;
}
.menu-q::placeholder, .help-q::placeholder { color: var(--dim); opacity: 1; }
.menu-q::-webkit-search-cancel-button, .help-q::-webkit-search-cancel-button { display: none; }
.menu-keys { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); white-space: nowrap; }
.menu-keys kbd:not(:first-child) { margin-left: 6px; }
.menu-body { overflow: auto; padding: 16px; }
.mn-grid { columns: 3 280px; column-gap: 32px; }
.mn-cat { break-inside: avoid; margin-bottom: 16px; }
.mn-h, .hs-h {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.mn-item {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: baseline;
  margin: 0 -8px; padding: 2px 8px;
  color: var(--text);
}
.mn-item:hover, .mn-item.is-active { background: var(--panel-3); text-decoration: none; }
.mn-name { font-weight: 600; }
.mn-sum { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-found .mn-item { grid-template-columns: 136px minmax(0, 1fr); padding: 6px 8px; }
.mn-found .mn-sum { color: var(--text-2); white-space: normal; }
.mn-none { color: var(--dim); }
.menu-foot { padding: 8px 16px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--dim); }
body.menu-open { overflow: hidden; }

/* ---- HELP: search on top, categories left, commands right --------------------- */
.help { display: grid; gap: 16px; padding-top: 4px; }
.help-search {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 16px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
}
.help-search:focus-within { border-color: var(--accent); }
.help-search .prompt { font-size: 14px; }

.hc-list { margin: 0 0 8px; }
.hc-row {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) minmax(0, 300px) minmax(0, 208px);
  gap: 16px; align-items: baseline;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
}
.hc-row:hover { background: var(--panel-2); }
.hc-row.is-active { background: var(--panel-3); }
.hc-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.hc-name:hover { color: var(--accent); }
.hc-sum { color: var(--text-2); }
.hc-row.is-soon .hc-name, .hc-row.is-soon .hc-sum { color: var(--dim); }
.hc-row-fn { grid-template-columns: 200px minmax(0, 1fr); }
.hc-row-fn .hc-name { color: var(--accent); }

.hd-opts { border-collapse: collapse; }
.hd-opts th { padding: 2px 16px 2px 0; text-align: left; vertical-align: top; white-space: nowrap; font-weight: 600; color: var(--text); }
.hd-opts td { padding: 2px 0; color: var(--text-2); }

/* ---- TAPE screen ------------------------------------------------------------- */
.tape-panel { border-top: 0; }
.tape-set { display: grid; gap: 12px; padding: 16px; }
.tape-state { font-size: 14px; color: var(--text); }
.tape-set .seg { justify-self: start; }
.tape-contents { margin-top: 16px; }
.tape-contents .panel-body { padding: 12px 16px; }
.is-embed .tape-panel { border-bottom: 0; }

/* ---- Narrower screens --------------------------------------------------------- */
@media (max-width: 1100px) {
  .hc-row { grid-template-columns: 136px minmax(0, 1fr) minmax(0, 208px); }
}

@media (max-width: 639px) {
  .cmd-label { max-width: 12ch; padding-left: 6px; }
  .cmd-label-text { padding-right: 6px; font-size: 11px; }

  .fkeys .fkey:not(.is-mobile) { display: none; }
  .fkeys .fkey-n, .fkey-menu .fkey-n { display: none; }
  .fkeys .fkey { padding: 0 10px; }
  .fkey-share, .fkey-menu { padding: 0 10px; }

  .menu-overlay { padding: 8px; }
  .menu { max-height: calc(100vh - 16px); }
  .menu-keys { display: none; }
  .mn-grid { columns: 1; }

  .help-q, .menu-q { font-size: 16px; }
  .hc-row, .hc-row-fn { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px; }
}

/* company-ui.css */
/* Company screens and user tools (HISTORY, INSIDERS, SHORTS, BEATS, FILINGS, OWNERS,
   WATCH, PF, DESK embeds, WHATIF, AFFORD, LOAN, COMPOUND). Same tokens and scales as
   style.css and kit.css: spacing 4 8 12 16 24 32, type 11 12 13 14 16 18 24. */

/* ---- A capped table with a side panel: the table hugs, the side takes the rest ---- */
.with-side { padding: 0; }
@media (min-width: 1280px) {
  .with-side.side-hug { grid-template-columns: minmax(0, max-content) minmax(280px, 1fr); }
  .with-side.side-hug > :first-child { max-width: 960px; }
}
.with-side > .side-panel, .with-side > .hist-side { min-width: 0; }
.side-panel, .hist-side {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border-left: 1px solid var(--rule);
}
.side-title { margin: 0; }
.side-chart { position: relative; height: 200px; min-width: 0; }
.side-chart svg { display: block; }
.side-hover { min-height: 16px; margin: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.side-note { margin: 0; font-size: 11px; color: var(--dim); line-height: 1.5; }
.side-stats { margin: 0; }
.side-stats dd { gap: 8px; }
.side-empty { margin: 0; color: var(--dim); font-size: 12px; }
@media (max-width: 1279px) {
  .side-panel, .hist-side { border-left: 0; border-top: 1px solid var(--rule); }
  .hist-layout > .hist-side { order: -1; border-top: 0; border-bottom: 1px solid var(--rule); }
}

/* Small bar charts (BEATS, INSIDERS): two series, a zero line, labels under the bars. */
.mb { display: block; width: 100%; height: auto; overflow: visible; }
.mb-grid { stroke: var(--rule); stroke-width: 1; }
.mb-zero { stroke: var(--rule-strong); stroke-width: 1; }
.mb-lab, .mb-ylab { fill: var(--dim); font-family: var(--font); font-size: 10px; }
.mb-a { fill: var(--series-1, hsl(213, 77%, 56%)); }
.mb-b { fill: var(--text-2); opacity: .45; }
.mb-up { fill: var(--up); opacity: .8; }
.mb-down { fill: var(--down); opacity: .8; }
.mb-open { fill: none; stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 2; }
.mb-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 11px; color: var(--dim); }
.mb-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mb-sw { display: inline-block; width: 8px; height: 8px; }
.mb-sw.mb-a { background: var(--series-1, hsl(213, 77%, 56%)); }
.mb-sw.mb-b { background: var(--text-2); opacity: .45; }
.mb-sw.mb-up { background: var(--up); }
.mb-sw.mb-down { background: var(--down); }
.mb-sw.mb-open { border: 1px dashed var(--text-2); background: transparent; }

/* ---- HISTORY --------------------------------------------------------------------- */
.hist-main .dt { margin: 0; }
.hist-main .toolbar .ch-dates { padding-right: 0; }

/* ---- WATCH and PF: an add form left, quiet list tools right, row actions right --- */
.add-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.add-in {
  height: 24px; padding: 0 8px;
  border: 1px solid var(--rule-strong); background: var(--bg);
  color: var(--text); font-family: var(--font); font-size: 12px;
}
.add-in::placeholder { color: var(--faint); }
.add-in:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.add-in[readonly] { color: var(--dim); border-style: dashed; }
.add-sym::placeholder, .add-tk::placeholder { text-transform: none; }
.add-num { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.add-btn { height: 24px; border-color: var(--accent); color: var(--accent); }
.add-btn:hover { color: var(--ink); background: var(--accent); }
.quiet {
  padding: 0 4px; border: 0; background: transparent;
  color: var(--dim); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .08em;
}
.quiet:hover { color: var(--text); text-decoration: underline; }
.quiet.is-danger { color: var(--down); }
.quiet[hidden] { display: none; }

.toolbar .tag + .seg { margin-left: 0; }

/* ---- WHATIF: the result's actions sit on the share row ---------------------------- */
.wi-share { align-items: center; }

/* ---- AFFORD: the verdict next to the answer, a wage field, a share row ---------- */
@media (min-width: 640px) {
  .buy { grid-template-columns: minmax(0, 640px) minmax(260px, 380px); justify-content: start; }
}
.buy-stats dd .wage-form { justify-content: flex-end; }
.buy-share { margin: 0 0 8px; }

/* ---- LOAN and COMPOUND: the by-year table beside the chart, not under it -------- */
.chart-by-year { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule-strong); }
@media (min-width: 1024px) {
  .chart-by-year { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); }
  /* The table takes the chart's height and scrolls inside it. */
  .chart-by-year > .by-year { position: relative; min-height: 0; }
  .chart-by-year > .by-year > .panel-body { position: absolute; inset: 23px 0 0; overflow-y: auto; scrollbar-width: thin; }
  .chart-by-year > .by-year thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
}

/* ---- Tables: date cells and plain labels in company tables ---------------------- */
.dt td.date { color: var(--text-2); }
.dt tbody tr:hover td { background: var(--panel-2); }
.co-wide .dt td.last { color: var(--text); font-weight: 600; }
.seg-n { margin-left: 6px; color: var(--faint); font-weight: 400; }
.seg-item.is-active .seg-n { color: var(--ink); }
@media (min-width: 640px) { .dt td.wide-name { max-width: 56ch; } }
.dt tbody th { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.bt-next th, .bt-next td { color: var(--dim); border-bottom-color: var(--rule-strong); }
.m-only, .m-only-block { display: none; }
.fil-seg { max-width: 100%; }
.bt-next-line { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--rule); color: var(--text-2); font-size: 12px; }

@media (max-width: 639px) {
  .dt .hide-m { display: none; }
  .m-only { display: inline; }
  .m-only-block { display: block; }
  .co-wide .dt .cell-name { max-width: 12ch; }
  .dt tr.hide-m { display: none; }
  .d-only { display: none; }
  .co-wide .dt th { white-space: normal; line-height: 1.2; vertical-align: bottom; padding-bottom: 4px; }
  .co-wide .dt { width: 100%; }
  .hist-layout > .hist-side { order: 0; border-bottom: 0; border-top: 1px solid var(--rule); }
  .side-chart { height: 160px; }
  .toolbar .ch-dates { flex-wrap: wrap; }
  .toolbar .ch-dates input { width: 128px; }
}

/* ---- DESK panels (embed mode): compact, no repeated title, maps scale to fit ------ */
.is-embed .panel-head.is-lead .panel-label { display: none; }
.is-embed .panel-head.is-lead { justify-content: flex-end; }
.is-embed .panel-head.is-lead .panel-meta { flex: 1 1 auto; padding-left: 8px; }
.is-embed .panel-head.is-lead:has(> .panel-meta:empty) { display: none; }

/* nosuch.css */
/* NO SUCH TICKER. YET.: tombstones, IPO IT and GRAVEYARD (screens/nosuch.js). */
:root {
  --stone: hsl(207, 16%, 77%);
  --stone-ink: hsl(213, 23%, 15%);
}

.ns-help { margin-top: 14px; }

/* The not-found page: the text on the left, the certificate preview on the right (desk);
   one column on a phone. */
.ns-page > * { grid-column: 1; min-width: 0; }
@media (min-width: 900px) {
  .ns-page { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 440px); column-gap: 56px; align-content: start; }
}


/* graveyard.css */
/* GRAVEYARD v2: stones, the cemetery, ZOMBIES, respects, the video, ON THIS DAY
   (screens/graveyard.js). Cream and grey stone, ice-blue terminal around it. */
:root {
  --gv-stone: hsl(45, 12%, 78%);
  --gv-stone-2: hsl(45, 8%, 66%);
  --gv-ink: hsl(25, 40%, 11%);
  --gv-moss: hsl(95, 22%, 42%);
  --gv-sky: hsl(218, 38%, 12%);
  --gv-hill: hsl(150, 12%, 16%);
}

@keyframes gv-nod { 40% { transform: translateY(3px); } }