/* ==========================================================================
   TradeScope - stylesheet
   Dark-first: the bare :root block carries the DARK palette, because a
   trading screen is read in a dark room more often than not. Light is
   redefined below for viewers whose system or app says light.
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg:          #0B0F14;
  --surface:     #131A22;
  --surface-2:   #1A232D;
  --line:        #25313E;
  --line-soft:   #1B242E;

  --text:        #E6EDF3;
  --text-dim:    #8FA0B2;
  --text-faint:  #64768A;

  /* amber for chrome and anything interactive - deliberately not green,
     so it can never be mistaken for an "up" signal */
  --accent:      #F0A830;
  --accent-ink:  #191104;
  --accent-soft: rgba(240,168,48,.14);

  /* market semantics, DSE convention */
  --up:          #2BB673;
  --down:        #E5484D;
  --flat:        #7C8B9C;
  --up-soft:     rgba(43,182,115,.13);
  --down-soft:   rgba(229,72,77,.13);

  --sans: 'IBM Plex Sans', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Noto Sans Bengali', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r:   10px;
  --r-sm: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:          #F6F8FA;
    --surface:     #FFFFFF;
    --surface-2:   #EFF3F7;
    --line:        #DBE3EB;
    --line-soft:   #E9EEF3;
    --text:        #0F1720;
    --text-dim:    #54677A;
    --text-faint:  #7D8FA1;
    --accent:      #9A5B00;
    --accent-ink:  #FFF6E8;
    --accent-soft: rgba(154,91,0,.10);
    --up:          #0F7A4A;
    --down:        #BE2A2E;
    --flat:        #6A7B8C;
    --up-soft:     rgba(15,122,74,.10);
    --down-soft:   rgba(190,42,46,.10);
    --shadow: 0 1px 2px rgba(16,24,32,.06), 0 8px 24px -18px rgba(16,24,32,.28);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #F6F8FA;
  --surface:     #FFFFFF;
  --surface-2:   #EFF3F7;
  --line:        #DBE3EB;
  --line-soft:   #E9EEF3;
  --text:        #0F1720;
  --text-dim:    #54677A;
  --text-faint:  #7D8FA1;
  --accent:      #9A5B00;
  --accent-ink:  #FFF6E8;
  --accent-soft: rgba(154,91,0,.10);
  --up:          #0F7A4A;
  --down:        #BE2A2E;
  --flat:        #6A7B8C;
  --up-soft:     rgba(15,122,74,.10);
  --down-soft:   rgba(190,42,46,.10);
  --shadow: 0 1px 2px rgba(16,24,32,.06), 0 8px 24px -18px rgba(16,24,32,.28);
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 16px;
}

code, .mono { font-family: var(--mono); }

/* ---------- top bar ---------------------------------------------------- */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-block: 9px;
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {
  width: 10px; height: 21px; flex: none; border-radius: 2px;
  background: linear-gradient(to top, var(--up) 0 38%, var(--accent) 38% 70%, var(--down) 70% 100%);
}
.brand-name {
  font-weight: 700; letter-spacing: .015em; font-size: 16.5px;
  white-space: nowrap;
}

/* The market state, as a square. Green open, red shut - the one fact worth
   seeing without reading a word. A ring pulses while trading is live. */
.mstate {
  width: 10px; height: 10px; flex: none; border-radius: 3px;
  background: var(--line); margin-left: 3px; position: relative;
}
.mstate.open { background: var(--up); }
.mstate.shut { background: var(--down); }
.mstate.open::after {
  content: ""; position: absolute; inset: -3px; border-radius: 5px;
  border: 1px solid var(--up); opacity: .45;
  animation: mpulse 2.4s ease-in-out infinite;
}
@keyframes mpulse { 0%, 100% { opacity: .45; } 50% { opacity: .06; } }

.topbar .clock {
  font-family: var(--mono); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;
}

/* the one headline row: index, change, turnover, session */
.headline { padding-bottom: 8px; }
/* The whole line sits on the page's centre, date included - one balanced
   row rather than a left group and a right one. */
.hl {
  display: flex; align-items: baseline; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.hl-k {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-faint);
}
.hl-v { font-weight: 600; font-size: 13.5px; }
.hl-c { font-weight: 600; }
.hl-c.up { color: var(--up); }
.hl-c.down { color: var(--down); }
.hl-c.flat { color: var(--text-dim); }
.hl-t { color: var(--text-dim); }
.hl-d { color: var(--text-faint); white-space: nowrap; }
.hl.stale .hl-v, .hl.stale .hl-t { color: var(--text-faint); }
.hl-stale {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 4px; line-height: 14px;
}
.hl-stale.warn {
  color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent);
  font-weight: 600;
}
@keyframes lvbeat { from { opacity: .35; } to { opacity: 1; } }
.hl.beat { animation: lvbeat .5s ease; }

.badge-demo {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  padding: 3px 7px; border-radius: var(--r-sm);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  white-space: nowrap;
}
.pill {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 13px; border-radius: 999px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.pill.is-open { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); background: var(--up-soft); }

/* ---------- index strip ------------------------------------------------ */
.indices {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-block: 14px 4px;
  scrollbar-width: none;
}
.indices::-webkit-scrollbar { display: none; }
.idx {
  flex: 1 0 auto;
  min-width: 132px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 11px;
}
.idx-name {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--text-faint); text-transform: uppercase;
}
.idx-val {
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.idx-chg { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.up   { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }

/* ---------- command console -------------------------------------------- */
.console { padding-block: 14px 4px; }

.cmdbar {
  display: flex; align-items: center; gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .15s ease;
}
.cmdbar:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.slash {
  font-family: var(--mono); font-size: 18px; font-weight: 600;
  color: var(--accent);
  padding: 0 4px 0 14px;
  user-select: none;
}
#cmdInput {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  color: var(--text);
  font-family: var(--mono); font-size: 15px;
  padding: 13px 10px 13px 4px;
}
#cmdInput::placeholder { color: var(--text-faint); }
.run {
  flex: none;
  border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  padding: 13px 18px;
  transition: filter .15s ease;
}
.run:hover { filter: brightness(1.08); }
.run:active { filter: brightness(.94); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 10px; }
.chip {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface-2); }

/* ---------- result cards ----------------------------------------------- */
.result { display: flex; flex-direction: column; gap: 14px; padding-block: 6px 8px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

/* the interpretation echo - what the parser thought you asked */
.echo {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-faint);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  padding: 7px 13px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.echo b { color: var(--text-dim); font-weight: 500; }
.echo .warn { color: var(--accent); }

.card-body { padding: 13px; }
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 13px 13px 0;
}
.card-title { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.card-sub { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* price header */
.quote { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quote-px {
  font-family: var(--mono); font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.quote-chg { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }

/* stat grid */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-top: 13px;
}
.stat { background: var(--surface); padding: 9px 12px; }
.stat-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.stat-v {
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* conditions list */
.conds { display: flex; flex-direction: column; }
.cond {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.cond:last-child { border-bottom: 0; }
.cond-k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
  flex: none; width: 74px;
}
.cond-v { flex: 1; min-width: 0; }
.cond-v .mono { font-variant-numeric: tabular-nums; }

/* tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
table.tbl th {
  text-align: right; font-weight: 500; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 8px 13px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.tbl th:first-child, table.tbl td:first-child { text-align: left; }
table.tbl td {
  text-align: right; padding: 7px 13px;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: var(--surface-2); }
.tkr { font-weight: 600; cursor: pointer; }
.tkr:hover { color: var(--accent); }

.group-row td {
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
}

/* chart */
.chart-box { padding: 4px 6px 10px; }
canvas.chart { display: block; width: 100%; max-width: 100%; height: auto; }
.legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 0 13px 11px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
}
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }

/* notes + empty */
.note {
  font-size: 12px; color: var(--text-faint);
  padding: 9px 13px;
  border-top: 1px solid var(--line-soft);
  font-style: italic;
}
.miss { padding: 16px 13px; color: var(--text-dim); font-size: 13.5px; }
.miss code { color: var(--accent); }

/* fundamentals */
.funda-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line-soft);
}
.funda-cell { background: var(--surface); padding: 10px 13px; }
.bar {
  height: 5px; border-radius: 3px; background: var(--surface-2);
  margin-top: 6px; overflow: hidden;
}
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ---------- footer ------------------------------------------------------ */
.foot {
  border-top: 1px solid var(--line-soft);
  margin-top: 10px;
  padding-block: 16px 28px;
  color: var(--text-faint);
  font-size: 12.5px;
  display: flex; flex-direction: column; gap: 9px;
  max-width: 62ch;
}
.foot code { color: var(--text-dim); font-size: 11.5px; }
.foot-warn { color: var(--text-dim); }
.foot-warn strong { color: var(--accent); font-weight: 600; }
.foot-meta { font-family: var(--mono); font-size: 11px; }

@media (max-width: 460px) {
  .quote-px { font-size: 26px; }
  .cond { flex-direction: column; gap: 2px; }
  .cond-k { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ---------- added with the live API ------------------------------------- */
table.tbl th.r, table.tbl td.r { text-align: right; }
table.tbl th:first-child, table.tbl td:first-child { text-align: left; }

.group-row td {
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  text-align: left;
}

.note.meta { font-family: var(--mono); font-size: 11px; font-style: normal; }

.miss.loading { color: var(--text-faint); }
.miss b { color: var(--text); }

.echo .warn { color: var(--accent); }

/* the "where is the server" panel */
.apibox { margin-top: 14px; }
.apibox label {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px;
}
.apirow { display: flex; gap: 8px; flex-wrap: wrap; }
.apirow input {
  flex: 1 1 220px; min-width: 0;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font-family: var(--mono); font-size: 13px;
}
.apirow input:focus { outline: 0; border-color: var(--accent); }
.apirow button {
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 9px 16px;
}
.apibox p {
  margin: 8px 0 0; font-size: 11.5px; color: var(--text-faint);
}

.cond { border-bottom: 1px solid var(--line-soft); }
.conds .cond .cond-v { padding-block: 1px; }

/* ==========================================================================
   Views, board, chart panels, screener
   ========================================================================== */

/* ---- tabs -------------------------------------------------------------- */
.tabs {
  display: flex; gap: 4px;
  padding: 12px 0 2px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-dim);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.tab:hover { color: var(--text); }
.tab.is-on {
  color: var(--accent-ink); background: var(--accent);
  border-color: var(--accent); font-weight: 600;
}
.view { display: flex; flex-direction: column; gap: 14px; padding-block: 12px 4px; }

/* ---- segmented control ------------------------------------------------- */
.seg { display: flex; gap: 0; flex-wrap: wrap; }
.seg button {
  border: 1px solid var(--line); border-right-width: 0;
  background: var(--surface); color: var(--text-dim);
  font-family: var(--mono); font-size: 11px;
  padding: 6px 11px; cursor: pointer;
}
.seg button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.seg button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; border-right-width: 1px; }
.seg button.is-on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.seg button:hover { color: var(--text); }

.card-head.tight { padding-bottom: 10px; align-items: center; }

/* ---- filters ----------------------------------------------------------- */
.filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 13px 11px;
}
.filters input, .filters select,
.screenform input, .screenform select, .chartbar input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px;
  font-family: var(--mono); font-size: 13px;
  min-width: 0;
}
.filters input { flex: 1 1 150px; }
.filters select { flex: 0 1 auto; }
.filters input:focus, .filters select:focus,
.screenform input:focus, .screenform select:focus,
.chartbar input:focus { outline: 0; border-color: var(--accent); }

/* ---- sector strip ------------------------------------------------------ */
.sectorstrip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 1px; background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
}
.sec {
  background: var(--surface); padding: 8px 11px; cursor: pointer;
  border-left: 2px solid transparent;
}
.sec:hover { background: var(--surface-2); }
.sec-n { font-size: 11.5px; color: var(--text-dim); }
.sec-v {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.sec.up   { border-left-color: var(--up); }
.sec.down { border-left-color: var(--down); }

/* ---- board table ------------------------------------------------------- */
table.tbl.sticky thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
}
.tbl-wrap { max-height: 70vh; overflow: auto; }
tr.row { cursor: pointer; }
tr.row.is-open td { background: var(--surface-2); }
td.chip-cell { white-space: nowrap; }
.mini {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  padding: 1px 5px; border-radius: 3px; letter-spacing: .04em;
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.mini.up   { color: var(--up);   border-color: color-mix(in srgb, var(--up) 40%, transparent);   background: var(--up-soft); }
.mini.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); background: var(--down-soft); }

/* expanded detail row */
tr.detail > td { padding: 0 !important; background: var(--bg); }
.detail-in { padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; }
.detail-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.detail-px { font-family: var(--mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.conds-grid { display: flex; flex-direction: column; gap: 5px; }
.conds-grid div {
  font-size: 13px; padding-left: 13px; position: relative; color: var(--text);
}
.conds-grid div::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint);
}
.detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-actions button {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-dim); font-family: var(--mono); font-size: 11px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
}
.detail-actions button:hover { color: var(--accent); border-color: var(--accent); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px,1fr)); gap: 8px; }
.kv > div { }
.kv .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.kv .v { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---- chart ------------------------------------------------------------- */
.chartbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 13px 13px 8px; }
.chartbar input { flex: 1 1 130px; text-transform: uppercase; }
.toggles {
  display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center;
  padding: 0 13px 10px;
  font-size: 12px; color: var(--text-dim);
}
.toggles label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.toggles input { accent-color: var(--accent); }
.tog-sep { width: 1px; height: 14px; background: var(--line); }
.chart-head {
  padding: 0 13px 8px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
.chart-head .px { font-family: var(--mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-head .nm { font-weight: 600; font-size: 14px; }
.chart-head .sub { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }

/* ---- screener ---------------------------------------------------------- */
.screenform {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px; padding: 0 13px 12px;
}
.fgroup label {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 4px;
}
.fgroup input, .fgroup select { width: 100%; }
.pair { display: flex; gap: 6px; }
.pair input { width: 50%; }
.screenactions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 0 13px 13px; border-top: 1px solid var(--line-soft); padding-top: 12px;
}
.ghost {
  border: 1px solid var(--line); background: transparent; color: var(--text-dim);
  font-family: var(--sans); font-size: 13px; padding: 9px 14px;
  border-radius: var(--r-sm); cursor: pointer;
}
.ghost:hover { color: var(--text); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.presets button {
  border: 1px dashed var(--line); background: transparent;
  color: var(--text-faint); font-size: 11.5px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
}
.presets button:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }
.applied {
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  padding: 9px 13px; background: var(--surface-2);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.applied b { color: var(--text-dim); font-weight: 500; }

@media (max-width: 460px) {
  .presets { margin-left: 0; }
  .tbl-wrap { max-height: none; }
  .detail-px { font-size: 19px; }
}

/* `hidden` must beat the view's own display, or every view paints at once */
[hidden] { display: none !important; }

/* ==========================================================================
   Ticker strip and the condition builder
   ========================================================================== */

/* ---- ticker ------------------------------------------------------------ */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  padding: 6px 0;
  position: relative;
}
.ticker::after {           /* fade the right edge so items leave cleanly */
  content: ""; position: absolute; inset: 0 0 0 auto; width: 48px;
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
}
.ticker-track {
  display: inline-flex; gap: 8px;
  white-space: nowrap;
  will-change: transform;
  animation: tick 720s linear infinite;   /* half the 29c speed */
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
}
.tik {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: 11.5px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  cursor: pointer;
}
.tik b { font-weight: 600; color: var(--text); }
.tik span { font-variant-numeric: tabular-nums; }
.tik.up   { border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.tik.down { border-color: color-mix(in srgb, var(--down) 35%, transparent); }

/* ---- condition builder ------------------------------------------------- */
.builder { display: flex; flex-direction: column; gap: 8px; padding: 0 13px 12px; }
.cond-row {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1.2fr) auto;
  gap: 8px; align-items: center;
}
.cond-row select, .cond-row input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; font-family: var(--mono); font-size: 12.5px;
  min-width: 0; width: 100%;
}
.cond-row select:focus, .cond-row input:focus { outline: 0; border-color: var(--accent); }
.cond-row .drop {
  border: 1px solid var(--line); background: transparent; color: var(--text-faint);
  border-radius: var(--r-sm); cursor: pointer; padding: 7px 10px;
  font-size: 14px; line-height: 1;
}
.cond-row .drop:hover { color: var(--down); border-color: var(--down); }
.cond-empty {
  font-size: 12.5px; color: var(--text-faint); font-style: italic;
  padding: 4px 0 2px;
}
.sortby {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
}
.sortby select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 9px;
  font-family: var(--mono); font-size: 12px; max-width: 160px;
}
.ghost.tiny { padding: 6px 9px; font-size: 11px; line-height: 1; }
.presets { padding: 0 13px 13px; }

@media (max-width: 560px) {
  .cond-row { grid-template-columns: 1fr 1fr; grid-template-areas: "f f" "o v" "d d"; }
  .cond-row > :nth-child(1) { grid-area: f; }
  .cond-row > :nth-child(2) { grid-area: o; }
  .cond-row > :nth-child(3) { grid-area: v; }
  .cond-row > :nth-child(4) { grid-area: d; justify-self: end; }
  .sortby { margin-left: 0; }
}

/* ---- chart readout and crosshair affordances --------------------------- */
.chart-readout {
  padding: 0 13px 6px;
  min-height: 18px;
  font-family: var(--mono); font-size: 11px;
  color: var(--text-dim);
}
.readout { display: flex; flex-wrap: wrap; gap: 3px 13px; }
.readout .ro { font-variant-numeric: tabular-nums; }
.readout .ro i {
  font-style: normal; color: var(--text-faint);
  margin-right: 4px; font-size: 10px; letter-spacing: .04em;
}
.readout .ro.up { color: var(--up); }
.readout .ro.down { color: var(--down); }
canvas.chart { cursor: crosshair; touch-action: none; }
.legend .hint { color: var(--text-faint); font-style: italic; }

/* ---- timeframe row ----------------------------------------------------- */
.chartbar.tfbar { padding-top: 0; padding-bottom: 8px; }
.tfnote { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }

/* ==========================================================================
   Watchlist
   ========================================================================== */
.tab-n {
  font-family: var(--mono); font-size: 10px; opacity: .75;
  margin-left: 2px;
}

.wlist { display: flex; flex-direction: column; }
.wrow {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 10px; align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.wrow:last-child { border-bottom: 0; }
.wrow:hover { background: var(--surface-2); }

.w-main { min-width: 0; }
.w-name {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
}
.w-cat {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 0 4px; line-height: 14px;
}
.w-cat.a { color: var(--up);   border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.w-cat.z { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.w-sub {
  /* wraps between whole figures rather than cutting one in half - the
     trade count was being eaten by an ellipsis at phone width */
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  margin-top: 3px; font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; gap: 0 4px; line-height: 1.45;
}
.w-sub > span { white-space: nowrap; }
.w-sub .w-n { opacity: .55; }
.w-chg {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.w-right { text-align: right; min-width: 92px; }
.w-px {
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.w-pill {
  display: inline-block; margin-top: 4px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: var(--r-sm);
  color: #fff;
}
.w-pill.up   { background: var(--up); }
.w-pill.down { background: var(--down); }
.w-pill.flat { background: var(--flat); }

.heart {
  border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
  font-size: 14px; line-height: 1; color: var(--line);
}
.heart.on { color: var(--down); }
.heart:hover { color: var(--down); opacity: .8; }

.w-empty { padding: 22px 13px; color: var(--text-dim); font-size: 13.5px; }
.w-empty code { color: var(--accent); }

@media (max-width: 460px) {
  .wrow { grid-template-columns: minmax(0,1fr) auto; }
  .w-chg { display: none; }
}

/* --------------------------------------------------------------- banner --
   Shown only when the page detects it is broken: a script error, a missing
   control, or an index.html and script.js that came from different builds.
   Loud on purpose - the failure it replaces was silent.                    */
.bootbanner {
  position: sticky; top: 0; z-index: 90;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: var(--down); color: #fff;
  font-size: 13px; line-height: 1.4;
}
.bootbanner b { font-weight: 600; }
.bootbanner span { opacity: .9; font-size: 12px; font-family: var(--mono); }

.buildstamp { font-family: var(--mono); font-size: 11px; opacity: .55; }

/* ======================================================= market summary ==
   The figures dsebd puts at the top of its markets page, in the shape of an
   app's summary card: label above, figure below, origin underneath. Four
   across on a desk, two on a phone - never one, because these read as pairs. */
.sumgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-soft);
}
.sumcell {
  padding: 13px 15px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.sumcell:nth-child(3n) { border-right: 0; }
.sumgrid > .sumcell:nth-last-child(-n+3) { border-bottom: 0; }

.sum-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint);
}
.sum-v {
  /* wraps between the currency, the figure and the unit, never inside the
     figure - market capitalisation is long enough to need the room */
  font-family: var(--mono); font-size: 21px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.25;
  margin-top: 5px; white-space: normal; overflow-wrap: break-word;
}
.sum-v .n { white-space: nowrap; }
.sum-v .unit { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.sum-c {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.sum-s { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.sum-breadth { display: flex; align-items: baseline; gap: 5px; }
.sum-breadth b { font-family: var(--mono); font-weight: 600; }
.sum-breadth .adv { color: var(--up); }
.sum-breadth .dec { color: var(--down); }
.sum-breadth .unc { color: var(--text-dim); }
.sum-breadth i { color: var(--text-faint); font-style: normal; font-weight: 400; }

.sumnote {
  padding: 9px 15px 12px; font-size: 11.5px; color: var(--text-faint);
  line-height: 1.5;
}

/* ========================================================== index chart ==
   One index, plainly drawn: the line, its own fill, and the readout the
   cursor lands on. It is a summary, so it carries no indicators.          */
.ixbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 13px 9px; flex-wrap: wrap;
}
.ixread {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ixbox { position: relative; height: 210px; padding: 0 4px 10px; }
.ixbox canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }

/* ============================================================== tab bar ==
   Fixed to the bottom on every size, the way an app's tab bar is - it does
   not scroll away, because it is how you move between views.              */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 14px rgba(0, 0, 0, .06);
}
.tabbar .tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px 7px;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  letter-spacing: .01em; color: var(--text-faint);
  -webkit-tap-highlight-color: transparent;
  transition: color .12s ease;
}
.tabbar .tab svg { width: 21px; height: 21px; fill: currentColor; }
.tabbar .tab:hover { color: var(--text-dim); }
.tabbar .tab.is-on { color: var(--accent); }
.tabbar .tab.is-on::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 26px; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--accent); transform: translateX(-50%);
}
.tabbar .tab-n {
  position: absolute; top: 4px; left: 50%; margin-left: 5px;
  font-family: var(--mono); font-size: 9px; font-style: normal;
  font-weight: 600; color: #fff; background: var(--accent);
  border-radius: 8px; padding: 0 4px; line-height: 13px; min-width: 13px;
  text-align: center;
}
.tabbar .tab-n:empty { display: none; }

/* room for the bar, so the last card is never trapped underneath it */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 620px) {
  .sumgrid { grid-template-columns: repeat(2, 1fr); }
  .sumcell:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .sumcell:nth-child(2n) { border-right: 0; }
  .sumgrid > .sumcell:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .sumgrid > .sumcell:nth-last-child(-n+2) { border-bottom: 0; }
  .sum-v { font-size: 18px; }
  .ixbox { height: 180px; }
}

/* ===================================================== live header block ==
   The clock and the index line the header carries on every view. The clock
   runs off the server's own time, corrected on each poll, so it never drifts
   away from the sessions the data is stamped with.                          */
.livehead {
  display: flex; flex-direction: column; align-items: center;
  justify-self: center; min-width: 0; line-height: 1.15;
}
.clock {
  font-family: var(--mono); font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  white-space: nowrap;
}
.liveline {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 3px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.lv-k {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-faint);
}
.lv-v { font-weight: 600; }
.lv-c { font-weight: 600; }
.lv-c.up   { color: var(--up); }
.lv-c.down { color: var(--down); }
.lv-c.flat { color: var(--text-dim); }
.lv-dot { color: var(--line); }
.lv-t { color: var(--text-dim); }

/* a soft pulse each time the figures actually change, so a minute's update
   is visible without anything jumping about */
@keyframes lvbeat { from { opacity: .35; } to { opacity: 1; } }
.liveline.beat { animation: lvbeat .5s ease; }

/* stale means the poller has stopped, and that must not look like calm */
.liveline.stale .lv-v,
.liveline.stale .lv-t { color: var(--text-faint); }
.livehead .lv-stale {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); margin-top: 1px; white-space: nowrap;
}
.livehead .lv-stale.warn { color: var(--down); font-weight: 600; }

/* the ticker rides inside the header now, so it stays put with it */
.topbar .ticker { border-bottom: 0; border-top: 1px solid var(--line-soft); }

@media (max-width: 720px) {
  .topbar-in {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand pill" "live live";
    row-gap: 7px;
  }
  .brand { grid-area: brand; }
  .topbar-right { grid-area: pill; }
  /* the clock stays above the index line here too - it is the shape the
     header is meant to have, and it costs about fifteen pixels */
  .livehead { grid-area: live; }
  .clock { font-size: 16px; }
  .liveline { margin-top: 2px; font-size: 11.5px; gap: 5px; }
  .brand-name { font-size: 15px; }
}

/* the price scale only announces itself when it is no longer fitting */
.readout .scale-note { color: var(--accent); font-size: 11.5px; }

/* the chart is showing a bar that has not closed yet */
.formtag {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--r-sm); padding: 2px 6px; white-space: nowrap;
}
.eodtag {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
}

/* ======================================================== indicator bar ==
   The list of what is on the chart, each with its own settings. Chips
   rather than a menu, so what is active is visible without opening
   anything.                                                              */
.indbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 13px 9px;
}
.indchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 8px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; white-space: nowrap;
}
.indchip i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.indchip b { font-weight: 500; }
.indchip button {
  border: 0; background: transparent; cursor: pointer; padding: 1px 3px;
  color: var(--text-faint); font-size: 11px; line-height: 1;
  border-radius: 3px;
}
.indchip button:hover { color: var(--text); background: var(--surface); }
.indadd {
  border: 1px dashed var(--line); background: transparent; cursor: pointer;
  border-radius: var(--r-sm); padding: 4px 10px;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
}
.indadd:hover { border-color: var(--accent); color: var(--accent); }

.tfnotewrap { padding: 0 13px 8px; }
.seg.tf { flex-wrap: wrap; }

/* the settings and picker popovers */
.indpop {
  position: fixed; z-index: 200; min-width: 200px; max-width: 280px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}
.indpop-h {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 2px 0 7px;
}
.indpop-h + .indopts { margin-bottom: 10px; }
.indopts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.indopt {
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer;
  border-radius: var(--r-sm); padding: 6px 8px; text-align: left;
  font-family: inherit; font-size: 12px; color: var(--text);
}
.indopt:hover { border-color: var(--accent); color: var(--accent); }
.indrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; font-size: 12px; color: var(--text-dim);
}
.indrow input[type="number"] {
  width: 74px; padding: 4px 6px; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
}
.indrow input[type="color"] {
  width: 40px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer;
}
.indpop-act { display: flex; justify-content: flex-end; margin-top: 8px; }

@media (max-width: 560px) {
  .indopts { grid-template-columns: 1fr; }
  .indpop { max-width: calc(100vw - 24px); }
}

/* ======================================================== drawing tools ==
   A palette rather than a menu: the tool in use is visible without opening
   anything, which matters when the next click is going to put a line on
   the chart.                                                             */
.drawbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 0 13px 10px;
}
.drawbar .tool {
  width: 30px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  color: var(--text-dim); font-size: 14px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.drawbar .tool:hover { background: var(--surface-2); color: var(--text); }
.drawbar .tool.is-on {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.tool-sep {
  width: 1px; height: 18px; background: var(--line); margin: 0 5px; flex: none;
}
.tool-col { display: inline-flex; align-items: center; }
.tool-col input[type="color"] {
  width: 30px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.tool-n {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
  margin-left: 6px;
}

.drawtoast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(8px);
  z-index: 300; max-width: min(460px, calc(100vw - 32px));
  background: var(--down); color: #fff;
  font-size: 12.5px; line-height: 1.45;
  padding: 9px 14px; border-radius: var(--r-md);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.drawtoast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------- bar replay -- */
.replaybar { padding-top: 0; gap: 4px; }
.replaybar .tool { width: auto; min-width: 30px; padding: 0 9px; font-size: 12px; }
.rp-msg {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  margin-left: 4px;
}
.rp-speed {
  font-family: var(--mono); font-size: 11px; padding: 3px 5px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.formtag.rp {
  color: var(--down);
  background: color-mix(in srgb, var(--down) 12%, transparent);
  border-color: color-mix(in srgb, var(--down) 34%, transparent);
}

/* ===================================================== chart bar, compact ==
   One button per group. The whole toolbar is a single line on a phone,
   which is what the chips could never be.                                  */
.cbtn {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cbtn:hover { border-color: var(--accent); color: var(--accent); }
.cbtn b { font-family: var(--mono); font-weight: 600; }
.cbtn .caret { font-style: normal; font-size: 9px; opacity: .55; }
.cbtn .cnum {
  font-family: var(--mono); font-style: normal; font-size: 10px;
  font-weight: 600; color: #fff; background: var(--accent);
  border-radius: 7px; padding: 0 5px; line-height: 14px; min-width: 14px;
  text-align: center;
}
.cbtn .cnum:empty { display: none; }
.cbtn.icon { padding: 0 9px; font-size: 14px; }
.cbtn.armed {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
#toolIcon { font-size: 14px; line-height: 1; }

/* rows inside the indicator panel */
.plrow {
  display: flex; align-items: center; gap: 7px; padding: 4px 2px;
  font-family: var(--mono); font-size: 12px;
}
.plrow b { font-weight: 500; flex: 1; min-width: 0; }
.plrow .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.plbtn {
  width: 22px; height: 22px; flex: none; border: 0; background: transparent;
  color: var(--text-faint); cursor: pointer; border-radius: 4px; font-size: 11px;
}
.plbtn:hover { background: var(--surface-2); color: var(--text); }
.plnone { color: var(--text-faint); font-size: 11.5px; padding: 3px 2px; }
.indpop-act { justify-content: space-between; align-items: center; }

/* the tool list reads as a list, not a grid of glyphs */
.indopts.tools { grid-template-columns: 1fr 1fr; }
.indopts.tools .indopt {
  display: flex; align-items: center; gap: 7px; font-size: 11.5px;
}
.indopt.is-on {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.indopt .ti { font-size: 13px; width: 14px; text-align: center; }

.chartbar { flex-wrap: wrap; gap: 6px; }
.chartbar input[type="search"] { min-width: 90px; }

@media (max-width: 560px) {
  .topbar .clock { font-size: 14.5px; }
  .brand-name { font-size: 15px; }
  .hl { font-size: 11.5px; gap: 6px; }
  .cbtn { height: 30px; padding: 0 8px; font-size: 12px; }
  .chartbar input[type="search"] { flex: 1 1 100%; min-width: 0; }
}

/* the caret that opens the rest of the readout */
.romore {
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-faint); cursor: pointer;
  width: 20px; height: 18px; border-radius: var(--r-sm);
  font-size: 9px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, color .15s ease;
}
.romore:hover { color: var(--text); border-color: var(--accent); }
.romore.on { transform: rotate(180deg); color: var(--accent); border-color: var(--accent); }
.ro-rest { display: contents; }

/* ================================================== expression builder ==
   Two sides and an operator. Each side can be a number or an indicator
   with its own arguments, so a row carries more controls than the old
   fixed form - which is why it wraps rather than scrolls sideways.      */
.cond-row2 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.cond-row2:last-child { border-bottom: 0; }
.side {
  display: flex; align-items: center; gap: 4px; flex: 1 1 240px; min-width: 0;
}
.side select, .side input {
  font-family: inherit; font-size: 12.5px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); min-width: 0;
}
.side select { flex: 1 1 auto; }
.side input[data-act="num"] { flex: 1 1 auto; font-family: var(--mono); }
.side .argb {
  width: 54px; flex: none; font-family: var(--mono); text-align: center;
}
.backb {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 10.5px; color: var(--text-faint);
}
.backb input { width: 46px; font-family: var(--mono); text-align: center; }
.opsel {
  flex: 0 1 150px; font-family: inherit; font-size: 12.5px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); font-weight: 500;
}
.swapb {
  flex: none; width: 28px; height: 28px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-dim); font-size: 12px;
}
.swapb:hover { border-color: var(--accent); color: var(--accent); }

.screentf {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 2px 0 12px;
}
.screentf label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
}
.screentf select {
  font-family: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
}
.tfhint { font-size: 11.5px; color: var(--text-faint); }
.applied .skip { color: var(--down); }

@media (max-width: 620px) {
  .side { flex: 1 1 100%; }
  .opsel { flex: 1 1 100%; }
  .cond-row2 { gap: 5px; }
}

/* ============================================ ADVANCED SCREENER (2026-09-28b)
   His AFL prints twenty-odd columns. All of them fit on a desktop and
   none of them fit on a phone, so the table scrolls sideways with the
   scrip name pinned, and any column can be switched off.

   Selectors are written as `table.advtbl td` rather than `.advtbl td`
   on purpose: the base table rules are `table.tbl td`, and anything less
   specific loses to them silently. */
#screenAdv .advnote{
  font-size:12.5px; line-height:1.55; color:var(--text-dim);
  border-left:2px solid var(--line); padding:2px 0 2px 10px; margin:2px 0 14px;
}
.advbar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin-bottom:12px;
}
.advf{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.advf>span{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-dim); font-weight:600;
}
.advf select,.advf input{
  width:100%; padding:9px 10px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--text);
  font:inherit; font-size:13px; min-width:0;
}
.advf.narrow{ max-width:180px; }

.advwidths{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.advlbl{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-dim); font-weight:600;
}
.wchip{
  min-width:34px; padding:5px 9px; margin-right:5px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  font:inherit; font-size:12px; font-variant-numeric:tabular-nums; cursor:pointer;
}
.wchip.is-on{ border-color:var(--accent); color:var(--text); background:var(--surface-2); }
.wchip.alt{ font-style:italic; }

.advtoggles{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.advtoggles label{
  display:flex; align-items:center; gap:7px; font-size:12.5px;
  color:var(--text-dim); cursor:pointer;
}
.advtoggles input{ width:15px; height:15px; accent-color:var(--accent); }

.advcolpick{
  border:1px solid var(--line); border-radius:var(--r); padding:11px;
  margin:0 0 12px; background:var(--surface);
}
.advcolhead{ font-size:11.5px; color:var(--text-dim); margin-bottom:9px; }
.cchip{
  padding:5px 9px; margin:0 6px 6px 0; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--bg); color:var(--text-dim);
  font:inherit; font-size:12px; cursor:pointer; opacity:.5;
}
.cchip.is-on{ border-color:var(--accent); color:var(--text); opacity:1; }

.advcaveat{
  font-size:11.5px; line-height:1.5; color:var(--text-dim);
  padding:5px 0 5px 9px; border-left:2px solid var(--accent); margin:6px 0;
}

.tbl-wrap.adv{ max-height:min(70vh,560px); overflow:auto; }
table.advtbl{ font-size:12px; }
table.advtbl th{
  position:sticky; top:0; z-index:2; background:var(--surface);
  font-size:10px; letter-spacing:.04em; padding:7px 9px;
}
table.advtbl th.sortable{ cursor:pointer; user-select:none; }
table.advtbl th.is-sort{ color:var(--accent); }
table.advtbl td{ padding:5px 9px; line-height:1.35; }
/* the scrip name stays put while the rest scrolls */
table.advtbl td.tkr,table.advtbl th:first-child{
  position:sticky; left:0; z-index:1; background:var(--bg);
  box-shadow:1px 0 0 var(--line);
}
table.advtbl th:first-child{ z-index:3; background:var(--surface); }
table.advtbl td.tkr{ font-weight:600; cursor:pointer; color:var(--accent); }
table.advtbl td.dim,table.advtbl .dim{ color:var(--text-faint); }
table.advtbl .tag{
  display:inline-block; padding:1px 6px; border-radius:var(--r-sm);
  background:var(--surface-2); font-size:11px; line-height:1.5;
  white-space:nowrap; max-width:170px; overflow:hidden;
  text-overflow:ellipsis; vertical-align:middle;
}
table.advtbl td.up .tag{ color:var(--up); }
table.advtbl td.down .tag{ color:var(--down); }
table.advtbl td.up{ color:var(--up); }
table.advtbl td.down{ color:var(--down); }

.csvbox{
  width:100%; margin:0 0 12px; padding:9px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--text);
  font-family:var(--mono); font-size:11px;
}

@media (max-width:640px){
  .advbar{ grid-template-columns:1fr 1fr; }
  .advf.narrow{ max-width:none; }
  table.advtbl{ font-size:11.5px; }
  table.advtbl td,table.advtbl th{ padding:5px 7px; }
  table.advtbl .tag{ max-width:120px; }
}

/* the date column only appears when a run covers more than one bar */
table.advtbl td.dcell{ color:var(--text-dim); font-variant-numeric:tabular-nums; }
.advcolfoot{ margin-top:8px; padding-top:9px; border-top:1px solid var(--line); }
.advcolfoot button[disabled]{ opacity:.4; cursor:default; }

/* ==================================================== CHART WORKSPACE (28g)
   The chart page fits the screen at EVERY size: nothing scrolls the page,
   the chart takes the height that is left, indicator panels share it.
   What differs is what sits around the chart.
     phone     toolbar | chart | range bar, tabs at the bottom; the scrip's
               figures, conditions and watchlist open as a sheet from ⓘ
     desktop   drawing rail | chart | watchlist and figures, tabs in the
               header
   Body classes, set by applyLayout() in script.js:
     .desk        window 1024px or wider
     .chart-fit   the chart view is showing (any width)
     .sheet-open  the phone's details sheet is up                           */

/* ---- defaults (the chart view not showing, or no layout applied yet) ---- */
.cdesk { display: flex; flex-direction: column; gap: 14px; }
.cstage { position: relative; }
.toolrail { display: none; }
.cside { display: flex; flex-direction: column; gap: 14px; }
.cside .side-watch, .cside .side-scrip, .sheet-head { display: none; }
#infoBtn { display: none; }

.rangebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 2px 13px 8px;
}
.rb-btns { display: flex; gap: 2px; flex-wrap: wrap; }
.rbtn {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-dim); font: 600 12px var(--sans);
  padding: 4px 8px; border-radius: var(--r-sm);
}
.rbtn:hover { background: var(--surface-2); color: var(--text); }
.rbtn.is-on { color: var(--accent); background: var(--accent-soft); }
.rangebar .tfnote { margin-left: auto; text-align: right; }

/* ---- desk: the tabs move up into the header (every view) ---- */
body.desk { padding-bottom: 0; }
body.desk .topbar .shell { max-width: none; padding-inline: 14px; }
body.desk .topbar-in { gap: 18px; padding-block: 6px; }
body.desk .headline { display: none; }            /* its line moved up too */
body.desk .topbar-in .hl { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
                           overflow: hidden; white-space: nowrap; }
body.desk .tabbar {
  position: static; display: flex; flex: none; gap: 2px;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
body.desk .tabbar .tab {
  flex-direction: row; gap: 6px; padding: 6px 11px;
  font-size: 13px; border-radius: var(--r-sm);
}
body.desk .tabbar .tab svg { width: 16px; height: 16px; }
body.desk .tabbar .tab.is-on { background: var(--accent-soft); }
body.desk .tabbar .tab.is-on::before { display: none; }
body.desk .tabbar .tab-n { position: static; margin-left: 0; }
body.desk main.shell { max-width: 1280px; }

/* ================= chart-fit, EVERY size: the page stops scrolling ====== */
body.chart-fit {
  margin: 0;                    /* the browser's default 8px would overflow */
  height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  padding-bottom: 0;
}
body.chart-fit .topbar { flex: none; position: relative; }
body.chart-fit main.shell {
  flex: 1 1 0; min-height: 0; max-width: none; padding: 0;
  display: flex; flex-direction: column;
  /* room for the tab bar, which is fixed to the bottom on a phone;
     applyLayout() measures it, and sets 0 on a desktop */
  margin-bottom: var(--tabH, 0px);
}
body.chart-fit #view-chart { flex: 1 1 0; min-height: 0; padding: 0; gap: 0; }
body.chart-fit .foot { display: none; }
body.chart-fit .cdesk { height: 100%; gap: 0; }

body.chart-fit .cmain {
  display: flex; flex-direction: column; flex: 1 1 0;
  min-width: 0; min-height: 0;
  border: 0; border-radius: 0; box-shadow: none;
}
body.chart-fit .chartbar {
  flex: none; flex-wrap: nowrap; padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
}
body.chart-fit .chartbar input { flex: 0 1 220px; min-width: 70px; }
body.chart-fit .replaybar:empty { display: none; }
body.chart-fit .cstage { flex: 1 1 0; min-height: 0; overflow: hidden; }
body.chart-fit .chart-box { position: absolute; inset: 0; padding: 0; }

/* name, price and the OHLC readout sit ON the chart, top-left, the way a
   terminal's legend does - they cost no height. They let touches through
   to the chart, except their own buttons. */
body.chart-fit .cover {
  position: absolute; left: 10px; top: 6px; right: 70px; z-index: 2;
  pointer-events: none;
}
body.chart-fit .cover button { pointer-events: auto; }
body.chart-fit .chart-head,
body.chart-fit .chart-readout { padding: 0; }
body.chart-fit .chart-head > *,
body.chart-fit .chart-readout .ro {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-radius: 3px;
}
body.chart-fit .chart-head .px { font-size: 17px; }

body.chart-fit .rangebar {
  flex: none; padding: 4px 10px; border-top: 1px solid var(--line-soft);
}
body.chart-fit .legend {
  flex: none; padding: 0 12px 5px; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ================= desktop only: rail | chart | side column ============ */
body.desk.chart-fit .cdesk {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 300px;
}
body.desk.chart-fit .toolrail {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--line);
}
body.desk.chart-fit #toolBtn { display: none; }    /* the rail replaces it */
body.desk.chart-fit .cside {
  display: block; min-height: 0; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
}
body.desk.chart-fit .cside .side-watch,
body.desk.chart-fit .cside .side-scrip { display: block; }
body.desk.chart-fit #chartConditions .card {
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
}
@media (max-width: 1279px) {
  body.desk.chart-fit .cdesk { grid-template-columns: 46px minmax(0, 1fr) 270px; }
}

.rtool {
  width: 34px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer;
}
.rtool:hover { background: var(--surface-2); color: var(--text); }
.rtool.is-on { background: var(--accent-soft); color: var(--accent); }
.rsep { width: 22px; height: 1px; background: var(--line); margin: 6px 0; flex: none; }

/* ================= phone only: the chart and a details sheet =========== */
body.chart-fit:not(.desk) #infoBtn { display: inline-flex; }
body.chart-fit:not(.desk) .chartbar { gap: 6px; padding: 6px 8px; }
body.chart-fit:not(.desk) .chart-head .sub,
body.chart-fit:not(.desk) .chart-head .formtag { display: none; }
body.chart-fit:not(.desk) .chart-head .px { font-size: 15px; }
body.chart-fit:not(.desk) .cover { left: 6px; top: 4px; right: 62px; }
body.chart-fit:not(.desk) .rangebar {
  flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 3px 6px;
  scrollbar-width: none;
}
body.chart-fit:not(.desk) .rangebar::-webkit-scrollbar { display: none; }
body.chart-fit:not(.desk) .rb-btns { flex-wrap: nowrap; }
body.chart-fit:not(.desk) .rbtn { padding: 5px 7px; }
body.chart-fit:not(.desk) .rangebar .tfnote { display: none; }
body.chart-fit:not(.desk) .rangebar .rbtn.auto { margin-left: auto; }
body.chart-fit:not(.desk) .legend { display: none; }

/* The sheet: the scrip's figures, its conditions and the watchlist, up
   from the bottom over the chart, above the tab bar. It scrolls inside
   itself; the chart behind it does not move. */
body.chart-fit:not(.desk) .cside {
  position: fixed; left: 0; right: 0; z-index: 70;
  bottom: var(--tabH, 0px);
  max-height: 72vh; max-height: 72dvh;
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
  transform: translateY(calc(100% + var(--tabH, 0px) + 20px));
  transition: transform .22s ease;
  visibility: hidden;
}
body.chart-fit.sheet-open:not(.desk) .cside {
  transform: none; visibility: visible;
}
body.chart-fit:not(.desk) .cside .side-scrip { display: block; order: 2; }
body.chart-fit:not(.desk) .cside #chartConditions { order: 3; }
body.chart-fit:not(.desk) .cside .side-watch { display: block; order: 4; }
body.chart-fit:not(.desk) .cside .sheet-head {
  display: flex; order: 1; position: sticky; top: 0; z-index: 1;
  align-items: center; justify-content: space-between;
  padding: 10px 14px 8px; background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600; font-size: 14px;
}
.sheet-head::before {
  content: ""; position: absolute; top: 4px; left: 50%;
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--line); transform: translateX(-50%);
}
.sheet-head button {
  border: 0; background: transparent; color: var(--text-dim);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
body.chart-fit:not(.desk) #chartConditions .card {
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
}
body.chart-fit:not(.desk) .sw-list { max-height: none; }

/* ---- the watchlist and figures panels themselves ---- */
.sw-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
}
.sw-head b { font-size: 13px; }
.sw-n { font: 11px var(--mono); color: var(--text-faint); }
.sw-head input {
  margin-left: auto; width: 96px; padding: 4px 7px; font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); text-transform: uppercase;
}
.sw-cols, .sw-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 62px 56px 60px;
  gap: 4px; padding: 5px 12px;
}
.sw-cols {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint);
}
.sw-cols span:not(:first-child), .sw-v { text-align: right; }
.sw-list { max-height: 40vh; overflow-y: auto; border-bottom: 1px solid var(--line); }
.sw-row {
  width: 100%; border: 0; border-left: 2px solid transparent;
  background: transparent; color: var(--text); cursor: pointer;
  font: 12px var(--mono); font-variant-numeric: tabular-nums; text-align: left;
}
.sw-row:hover { background: var(--surface-2); }
.sw-row.is-on { background: var(--accent-soft); border-left-color: var(--accent); }
.sw-t { font-family: var(--sans); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sw-v.up { color: var(--up); }
.sw-v.down { color: var(--down); }
.sw-empty { padding: 12px; font-size: 12px; color: var(--text-dim); }

.side-scrip { padding: 12px 12px 14px; }
.ss-t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.ss-sec { font-size: 11.5px; color: var(--text-dim); }
.ss-px { margin-top: 6px; }
.ss-px b { font: 600 26px var(--mono); font-variant-numeric: tabular-nums; }
.ss-px span { font: 13px var(--mono); margin-left: 8px; }
.ss-px span.up { color: var(--up); }
.ss-px span.down { color: var(--down); }
.ss-when { font-size: 11px; color: var(--text-faint); }
.ss-h {
  margin: 14px 0 4px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint);
}
.ks {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0; font-size: 12.5px; border-bottom: 1px solid var(--line-soft);
}
.ks span { color: var(--text-dim); }
.ks b { font: 500 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.ss-none { margin-top: 10px; font-size: 11.5px; color: var(--text-faint); }

/* the auto-scale switch: lit while the price scale fits the visible bars */
.rbtn.auto {
  min-width: 26px; font-family: var(--mono);
  border: 1px solid var(--line);
}
.rangebar .tfnote + .rbtn.auto { margin-left: 8px; }

/* ============================================= toolbar additions (28h) */
/* drawn icons inside the rail and the tool pop-up */
.rtool .ic, .indopt .ic, #toolIcon .ic { width: 18px; height: 18px; display: block; }
.indopt .ti .ic { display: inline-block; vertical-align: -4px; }
.rtool.rauto { font: 700 13px var(--mono); }

/* the price-scale switch floating over the chart, phone only; on a
   desktop it lives in the left rail */
.cauto {
  position: absolute; right: 64px; top: 8px; z-index: 3;   /* placed by drawChart */
  width: 28px; height: 26px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-dim); font: 700 12px var(--mono); cursor: pointer;
  opacity: .9;
}
.cauto.is-on { color: var(--accent); background: var(--accent-soft); }
body.desk .cauto { display: none; }
body:not(.chart-fit) .cauto { display: none; }

/* ranges and notes inside the timeframe pop-up */
.indopts.ranges { display: flex; flex-wrap: wrap; gap: 4px; }
.indopts.ranges .indopt { min-width: 42px; justify-content: center; }
.tfpop-note {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft);
  font-size: 11px; line-height: 1.45; color: var(--text-faint); max-width: 300px;
}

/* ---- chart type button (28i) ---- */
#ctypeIcon .ic { width: 18px; height: 18px; display: block; }
#ctypeBtn { gap: 2px; }
#indBtn .short-lbl { display: none; font-style: italic; font-weight: 600; }
/* a phone's toolbar has one more button now; the word shortens to ƒx */
body.chart-fit:not(.desk) #indBtn .long-lbl { display: none; }
body.chart-fit:not(.desk) #indBtn .short-lbl { display: inline; }
body.chart-fit:not(.desk) .chart-head .formtag.ha { display: inline-block; }
.formtag.ha { color: var(--accent); }

/* ============================================= multi-chart (28j) =========
   The stage is a grid of windows. One window fills it on a phone and in
   the one-chart layout; the others appear on a desktop when a layout asks
   for them. Thin lines between windows; the active one is outlined.      */
.cstage { display: grid; grid-template: 1fr / 1fr; gap: 0; }
.cpane { position: relative; min-width: 0; min-height: 0; overflow: hidden;
         background: var(--bg); }
.cpane[hidden] { display: none; }
body.chart-fit .cpane .chart-box { position: absolute; inset: 0; padding: 0; }

.cstage.multi { gap: 1px; background: var(--line); }
.cstage[data-layout="2c"] { grid-template: 1fr / 1fr 1fr; }
.cstage[data-layout="2r"] { grid-template: 1fr 1fr / 1fr; }
.cstage[data-layout="3c"] { grid-template: 1fr / 1fr 1fr 1fr; }
.cstage[data-layout="3l"] { grid-template: 1fr 1fr / 2fr 1fr; }
.cstage[data-layout="3l"] > .cpane:first-child { grid-row: span 2; }
.cstage[data-layout="4"]  { grid-template: 1fr 1fr / 1fr 1fr; }

.cpane.is-active::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
/* in a small window the name and price shrink so the candles show */
.cstage.multi .chart-head .px { font-size: 14px; }
.cstage.multi .chart-head .sub { display: none; }

#layoutIcon .ic { width: 18px; height: 18px; display: block; }
#layoutBtn { display: none; }
body.desk.chart-fit #layoutBtn { display: inline-flex; }

/* ================================= technicals & fundamentals (29a) ======
   Desktop: a drawer over the right of the chart. Phone: tabs in the ⓘ
   sheet. The contents are the same markup either way.                    */
.cwork { position: relative; display: flex; flex-direction: column; }
body.chart-fit .cwork { flex: 1 1 0; min-height: 0; }
body.chart-fit .cwork > .cstage { flex: 1 1 0; min-height: 0; }

.cb-gap { flex: 1 1 auto; }
.infobtn { font-weight: 600; }
.infobtn.armed { color: var(--accent); background: var(--accent-soft);
                 border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
body.chart-fit:not(.desk) .infobtn, body.chart-fit:not(.desk) .cb-gap { display: none; }
body:not(.chart-fit) .infobtn { display: none; }

.idrawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 20;
  width: min(820px, 94%);
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -12px 0 30px rgba(0, 0, 0, .16);
}
.idrawer[hidden] { display: none; }
.idr-head {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
}
.idr-head b { font-size: 15px; }
.idr-close {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--text-dim); font-size: 18px; padding: 2px 6px;
}
.idr-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 18px; }

/* the phone sheet's tabs */
.sheet-tabs { display: none; }
body.chart-fit:not(.desk) .cside .sheet-tabs {
  display: flex; order: 1; margin: 8px 12px 4px; position: sticky; top: 44px; z-index: 1;
}
body.chart-fit:not(.desk) .cside .sheet-tabs button { flex: 1; }
body.chart-fit:not(.desk) .cside .sheet-info { order: 2; padding: 6px 12px 14px; }
.sheet-info[hidden] { display: none; }
.st-hide { display: none !important; }

/* timeframe chips */
.tfchips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tfchip {
  border: 1px solid var(--line); background: var(--bg); color: var(--text-dim);
  font: 600 11.5px var(--mono); padding: 4px 9px; border-radius: 999px; cursor: pointer;
}
.tfchip.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* gauges */
.gauges {
  display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 6px 12px;
  align-items: end; margin-bottom: 12px;
}
.gblock { text-align: center; min-width: 0; }
.gblock .gtitle { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.gblock.big .gtitle { font-size: 15px; }
svg.gauge { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.glabel { font-weight: 700; font-size: 16px; margin-top: 2px; }
.gblock.big .glabel { font-size: 20px; }
.gcounts { display: flex; justify-content: center; gap: 12px; font-size: 11.5px;
           color: var(--text-dim); margin-top: 3px; }
.gcounts .up b { color: var(--up); } .gcounts .down b { color: var(--down); }
.gsince { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.45; }
.gsince .dim, .dim { color: var(--text-faint); }

/* how long - the summary, bar by bar */
.histstrip { margin: 4px 0 16px; }
.hs-h { font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
        text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; }
.hs-cells { display: flex; gap: 1px; height: 14px; }
.hs-cells .hc { flex: 1 1 0; border-radius: 1px; }
.hs-ends { display: flex; justify-content: space-between; font: 10.5px var(--mono);
           color: var(--text-faint); margin-top: 3px; }

/* the tables */
.ttable { margin-top: 14px; }
.tt-h { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 14px;
        margin-bottom: 4px; }
.tt-sum { font-size: 12.5px; }
.tt-note { font-weight: 400; font-size: 11.5px; color: var(--text-faint); }
table.tbl.tech { font-size: 12px; }
table.tbl.tech td, table.tbl.tech th { padding: 5px 8px; }
table.tbl.tech td.nm { font-family: var(--sans); text-align: left; }
table.tbl.tech td.cond { text-align: left; color: var(--text-dim); font-family: var(--sans);
                         white-space: normal; }
table.tbl.tech th:nth-child(3), table.tbl.tech th:nth-child(4) { text-align: left; }
table.tbl.tech td.rd { text-align: left; font-weight: 600; }
table.tbl.tech td.rd.up { color: var(--up); }
table.tbl.tech td.rd.down { color: var(--down); }
table.tbl.tech td.rd.neu { color: var(--text-faint); }
table.tbl.piv tr.pp td { font-weight: 700; }
table.tbl.piv tr.rr td.nm { color: var(--up); }
table.tbl.piv tr.ss td.nm { color: var(--down); }
.pivwrap { max-height: none; }

/* fundamentals */
.fhead { margin-bottom: 8px; }
.fname { font-weight: 700; font-size: 16px; }
.fsub { font-size: 12px; color: var(--text-dim); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.fcol { min-width: 0; }
.holdbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 6px 0 6px; }
.holdbar i { display: block; height: 100%; }
.holdrows .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
                 margin-right: 7px; vertical-align: 0; }
.holdrows em { font-style: normal; font-size: 11px; margin-left: 4px; }
.holdrows em.up { color: var(--up); } .holdrows em.down { color: var(--down); }

/* the phone: one gauge big across the top, the other two side by side */
body.chart-fit:not(.desk) .gauges { grid-template-columns: 1fr 1fr; }
body.chart-fit:not(.desk) .gblock.big { grid-column: 1 / -1; order: -1; }
body.chart-fit:not(.desk) .fgrid { grid-template-columns: 1fr; }
body.chart-fit:not(.desk) table.tbl.tech td.cond { font-size: 11px; }

/* 29c: fundamentals read on demand */
.fstatus { font-size: 12px; color: var(--text-faint); margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.fstatus .warn { color: var(--down); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent, #a86b00); text-decoration: underline; cursor: pointer; font: inherit; }
.linkbtn:disabled { opacity: .6; cursor: default; }

/* ==========================================================================
   29d: compact market summary, sector map, Market tab
   ========================================================================== */
#view-board > .card:first-child .card-head { justify-content: center; text-align: center; padding: 8px 10px 6px; }
#view-board > .card:first-child .card-head .card-title { font-size: 14px; }
#view-board > .card:first-child .card-head .card-sub { margin-top: 0; }
.sumcell { padding: 7px 8px; text-align: center; }
.sum-k { font-size: 9.5px; }
.sum-v { font-size: 17px; margin-top: 2px; line-height: 1.2; }
.sum-v .unit { font-size: 11px; }
.sum-c { font-size: 11.5px; margin-top: 0; }
.sum-s { font-size: 10px; margin-top: 1px; }
.sum-breadth { justify-content: center; }
.sumnote:empty { display: none; }
@media (min-width: 1024px) {
  .sumgrid { grid-template-columns: repeat(6, 1fr); }
  .sumcell { border-bottom: 0 !important; border-right: 1px solid var(--line-soft) !important; }
  .sumcell:last-child { border-right: 0 !important; }
}
@media (max-width: 620px) {
  .sumgrid { grid-template-columns: repeat(3, 1fr); }
  .sumcell { padding: 6px 4px; }
  .sumcell:nth-child(2n) { border-right: 1px solid var(--line-soft); }
  .sumcell:nth-child(3n) { border-right: 0; }
  .sumgrid > .sumcell:nth-last-child(-n+3) { border-bottom: 0; }
  .sumgrid > .sumcell:nth-last-child(-n+2) { border-bottom: 0; }
  .sumgrid > .sumcell:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .sum-v { font-size: 14px; }
  .sum-v .unit { display: none; }
  .sum-s { font-size: 9.5px; }
}

/* sector map */
.maphead { align-items: center; }
.maptools { display: flex; gap: 6px; align-items: center; }
#mapFull { border: 1px solid var(--line); background: var(--surface); color: var(--text-dim);
  border-radius: var(--r-sm); height: 28px; width: 32px; cursor: pointer; font-size: 15px; }
#mapFull:hover { color: var(--text); background: var(--surface-2); }
.maplegend { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  padding: 6px 13px 8px; font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); }
.maplegend .lg { display: inline-flex; align-items: center; gap: 4px; }
.maplegend .lg i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.maplegend .lg-sum { margin-left: auto; color: var(--text-dim); }
.maplegend .lg-sum b.up { color: var(--up); } .maplegend .lg-sum b.down { color: var(--down); }

.secmap {
  --rh: 18px;
  column-width: 180px; column-gap: 4px; column-fill: balance;
  padding: 0 6px 6px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--line-soft); padding-top: 6px;
}
.secmap.fit { column-fill: auto; overflow-x: auto; overflow-y: hidden; }
.sm-h { break-inside: avoid; break-after: avoid; background: var(--text); color: var(--surface);
  border-radius: 3px 3px 0 0; padding: 2px 5px; margin-top: 3px; line-height: 1.25; }
.sm-h:first-child { margin-top: 0; }
.sm-h1 { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
.sm-h1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.sm-h1 span.up { color: #4ade80; } .sm-h1 span.down { color: #f87171; } .sm-h1 span.flat { opacity: .75; }
.sm-h2 { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; opacity: .8; }
.sm-h2 i { font-style: normal; } .sm-h2 i.up { color: #4ade80; } .sm-h2 i.down { color: #f87171; }
.sm-r { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto 36px 30px; gap: 4px;
  align-items: center; height: var(--rh); font-size: min(11.5px, calc(var(--rh) - 3px));
  padding: 0 4px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.06); color: #14181f; }
.sm-r b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-r span { text-align: right; white-space: nowrap; }
.sm-r span:last-child { opacity: .7; }
.sm-r:hover { outline: 1.5px solid var(--text); outline-offset: -1.5px; }
.sm-r.nt { opacity: .55; }
/* tints: fixed light tiles in both themes, like a printed board */
.sm-r.t0, .maplegend i.t0 { background: #cfe3f7; }
.sm-r.na { background: #e5e7eb; }
.sm-r.u1, .maplegend i.u1 { background: #d6f5dc; }
.sm-r.u2, .maplegend i.u2 { background: #aeebb9; }
.sm-r.u3, .maplegend i.u3 { background: #7fdc92; }
.sm-r.u4, .maplegend i.u4 { background: #45c463; }
.sm-r.d1, .maplegend i.d1 { background: #fbe0e0; }
.sm-r.d2, .maplegend i.d2 { background: #f7bcbc; }
.sm-r.d3, .maplegend i.d3 { background: #f09595; }
.sm-r.d4, .maplegend i.d4 { background: #e36666; }
#mapCard:fullscreen { overflow: auto; background: var(--bg, var(--surface)); padding: 4px; border-radius: 0; }
#mapCard:fullscreen .secmap { background: var(--surface); }
@media (max-width: 620px) {
  .secmap { column-width: 175px; }
  .maplegend .lg-sum { margin-left: 0; width: 100%; }
}
/* on a desktop the map uses the full width of the window, not the column */
@media (min-width: 1024px) {
  #mapCard { width: calc(100vw - 28px); margin-left: calc(50% - 50vw + 14px); }
}
#mapCard { scroll-margin-top: 90px; }
.sm-r b { font-family: var(--sans, system-ui, sans-serif); letter-spacing: -.02em; text-overflow: clip; }
.secmap.novol .sm-r { grid-template-columns: minmax(0, 1fr) auto 38px; }
.secmap.novol .sm-r span:last-child { display: none; }
@media (max-width: 620px) {
  .secmap .sm-r { grid-template-columns: minmax(0, 1fr) auto 38px; }
  .secmap .sm-r span:last-child { display: none; }
}
.sm-h { padding: 1px 4px; margin-top: 2px; line-height: 1.12; }
.sm-h1 { font-size: 10.5px; } .sm-h2 { font-size: 9px; }
@media (max-width: 620px) {
  .secmap { column-width: auto; column-count: 2; column-gap: 3px; padding: 4px 3px 4px; }
  .secmap .sm-r { font-size: 10.5px; height: 17px; padding: 0 3px; gap: 3px; grid-template-columns: minmax(0, 1fr) auto 34px; }
  .sm-h1 { font-size: 10px; } .sm-h2 { font-size: 8.5px; }
  .maplegend { font-size: 9.5px; gap: 3px 8px; }
  .maphead .seg button { padding-inline: 8px; }
}
@media (max-width: 620px) { .sum-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* 29e: tall, clear rows on the page; fitted only in full screen */
@media (min-width: 621px) {
  .secmap:not(.fit) { --rh: 26px; column-width: 215px; column-fill: balance; column-gap: 5px; }
  .secmap:not(.fit) .sm-r { font-size: 12.5px; grid-template-columns: minmax(0, 1fr) auto 44px 40px; gap: 6px; padding: 0 6px; }
  .secmap:not(.fit) .sm-h { padding: 3px 6px; margin-top: 4px; }
  .secmap:not(.fit) .sm-h1 { font-size: 12.5px; }
  .secmap:not(.fit) .sm-h2 { font-size: 10.5px; }
}
@media (max-width: 620px) {
  .secmap .sm-r { height: 26px; font-size: 12px; }
  .sm-h1 { font-size: 11.5px; } .sm-h2 { font-size: 9.5px; }
}

/* 29f: one screen tall on a desktop, full-height rows, scrolls sideways */
.secmap.fit { --rh: 26px; column-width: 215px; column-fill: auto; column-gap: 5px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.secmap.fit .sm-r { font-size: 12.5px; grid-template-columns: minmax(0, 1fr) auto 44px 40px; gap: 6px; padding: 0 6px; }
.secmap.fit .sm-h { padding: 3px 6px; margin-top: 4px; }
.secmap.fit .sm-h1 { font-size: 12.5px; }
.secmap.fit .sm-h2 { font-size: 10.5px; }
.secmap.fit .sm-r span:last-child { display: block; }

/* ==========================================================================
   29h: Ask answers in words
   ========================================================================== */
.report { overflow: visible; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 16px 18px 10px; flex-wrap: wrap; }
.rp-t { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.rp-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.rp-px { text-align: right; }
.rp-ltp { font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1.1; }
.rp-chg { font-family: var(--mono); font-size: 13.5px; font-weight: 600; }
.rp-date { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.rp-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; align-items: center; }
.rp-gauge { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; }
.rp-gauge i { font-style: normal; color: var(--text-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.rp-gauge b { font-weight: 700; }
.rp-gauge.up b { color: var(--up); } .rp-gauge.down b { color: var(--down); }
.rp-gauge span { color: var(--text-dim); font-size: 11.5px; }
.rp-perf { display: inline-flex; gap: 4px; align-items: baseline; font-family: var(--mono); font-size: 11.5px;
  padding: 4px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.rp-perf i { font-style: normal; color: var(--text-faint); }
.rp-perf.up { color: var(--up); } .rp-perf.down { color: var(--down); }
.rp-hl { margin: 0 18px 10px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.rp-hl::first-letter { text-transform: uppercase; }
.rp-warn { margin: 0 18px 12px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.rp-points { margin: 0 18px 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border-left: 3px solid var(--accent); }
.rp-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.rp-points ul { margin: 0; padding-left: 18px; }
.rp-points li { margin: 3px 0; font-size: 14px; line-height: 1.45; }
.rp-nav { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 10px; position: sticky; top: 0; }
.rp-nav button { border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); border-radius: 999px;
  padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.rp-nav button:hover { color: var(--text); border-color: var(--accent); }
.rp-sec { border-top: 1px solid var(--line-soft); padding: 14px 18px 12px; scroll-margin-top: 110px; }
.rp-sec h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.rp-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rp-text p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.rp-facts { margin: 0; display: grid; gap: 0; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.rp-facts > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.rp-facts > div:last-child { border-bottom: 0; }
.rp-facts > div:nth-child(odd) { background: var(--surface-2); }
.rp-facts dt { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.rp-facts dd { margin: 0; font-family: var(--mono); font-size: 12px; text-align: right; }
.rp-facts dd.up { color: var(--up); } .rp-facts dd.down { color: var(--down); }
.rp-foot { border-top: 1px solid var(--line-soft); padding: 12px 18px 4px; }
.rp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rp-actions button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: var(--r-sm);
  padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rp-actions button:hover { border-color: var(--accent); }
.rp-follow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.rp-follow > span { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
@media (max-width: 760px) {
  .rp-body { grid-template-columns: 1fr; gap: 10px; }
  .rp-head { padding: 14px 14px 8px; }
  .rp-t, .rp-ltp { font-size: 22px; }
  .rp-strip, .rp-nav { padding-inline: 14px; }
  .rp-hl, .rp-warn, .rp-points { margin-inline: 14px; }
  .rp-sec, .rp-foot { padding-inline: 14px; }
  .rp-text p { font-size: 14px; }
}

/* 29i: Market board - the scrip column takes only what it needs, so the
   figures sit next to it instead of across the page */
#boardTable { width: 100%; }
#boardTable th.bt-scrip, #boardTable td.bt-scrip { width: 1%; white-space: nowrap; padding-right: 22px; }
#boardTable td.b { font-weight: 600; }
#boardTable th, #boardTable td { white-space: nowrap; }

/* 29j: phone - tight columns, the scrip stays in view while the row scrolls */
@media (max-width: 760px) {
  #boardTable { width: auto; min-width: 100%; font-size: 11.5px; }
  /* Safari reads a percentage width inside a scrolling table as a share of
     the whole wide table - which is what made the scrip column huge on the
     iPhone. On a phone the column simply fits its text. */
  #boardTable th.bt-scrip, #boardTable td.bt-scrip { width: auto !important; }
  #boardTable th, #boardTable td { padding: 7px 7px; }
  #boardTable th.bt-scrip, #boardTable td.bt-scrip {
    position: sticky; left: 0; z-index: 1; background: var(--surface);
    padding-left: 8px; padding-right: 8px; box-shadow: 1px 0 0 var(--line-soft); }
  #boardTable thead th.bt-scrip { z-index: 3; }
  #boardTable .heart { margin-right: 2px; }
  #boardTable .mini { padding: 1px 4px; font-size: 10px; }
}

/* 29m: watchlist - the +/- amount on phones too; the technical table */
@media (max-width: 620px) {
  .wrow { grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; }
  .w-chg { display: block; font-size: 13px; }
  .w-right { min-width: 76px; }
}
table.wtech { font-size: 12px; }
table.wtech th, table.wtech td { padding: 6px 8px; white-space: nowrap; }
table.wtech tr.grp th { font-size: 9.5px; text-align: center; color: var(--text-faint); border-bottom: 0; padding-bottom: 0; }
table.wtech tr.grp th.g-osc, table.wtech tr.grp th.g-ma { border-bottom: 2px solid var(--line); }
table.wtech td.b { font-weight: 600; }
table.wtech td.rd.up { color: var(--up); }
table.wtech td.rd.down { color: var(--down); }
table.wtech td.rd.neu { color: var(--text-faint); }
table.wtech td.gcell { text-align: left; }
table.wtech .gl { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 11.5px;
  padding: 1px 7px; border-radius: 4px; }
table.wtech .gl.up { color: #fff; background: var(--up); }
table.wtech .gl.down { color: #fff; background: var(--down); }
table.wtech .gl.neu { color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }
table.wtech .gs { display: block; font-style: normal; font-size: 10px; color: var(--text-faint); margin-top: 2px; }
table.wtech th.wt-scrip, table.wtech td.wt-scrip { position: sticky; left: 0; background: var(--surface);
  z-index: 1; box-shadow: 1px 0 0 var(--line-soft); text-align: left; }
table.wtech thead th.wt-scrip { z-index: 3; }
table.wtech tbody tr:hover td.wt-scrip { background: var(--surface-2); }
table.wtech th.gh { text-align: left; }

/* ==========================================================================
   29o: accounts - login gate, user menu, admin approvals
   ========================================================================== */
body.auth-locked > *:not(#authGate) { filter: blur(3px); pointer-events: none; user-select: none; }
#authGate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg, #0b0f14) 55%, transparent); }
.auth-card { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.auth-brand b { font-weight: 800; letter-spacing: .01em; }
.auth-tag { font-size: 12px; color: var(--text-faint); margin: 2px 0 16px 28px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.auth-tabs button { border: 0; background: var(--surface); padding: 9px; font: inherit; font-size: 13.5px;
  color: var(--text-dim); cursor: pointer; }
.auth-tabs button.is-on { background: var(--surface-2); color: var(--text); font-weight: 700; }
#authGate form, .tsm-form { display: grid; gap: 10px; }
#authGate label, .tsm-form label { display: grid; gap: 4px; font-size: 12px; color: var(--text-dim); }
#authGate input, .tsm-form input { font: inherit; font-size: 15px; padding: 10px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
#authGate input:focus, .tsm-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.auth-go { margin-top: 4px; padding: 11px; border: 0; border-radius: 8px; background: var(--accent);
  color: var(--accent-ink, #191104); font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.auth-small { font-size: 11.5px; color: var(--text-faint); }
.auth-msg { min-height: 18px; margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.auth-msg.bad { color: var(--down); } .auth-msg.good { color: var(--up); }
.auth-warn { margin-top: 10px; font-size: 11.5px; color: var(--down); }

.userbtn { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; margin-right: 12px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px 3px 3px;
  font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; position: relative; }
.ub-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink, #191104); font-weight: 800; font-size: 12px; }
.ub-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--down); color: #fff; font-style: normal; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; padding: 0 4px; }
@media (max-width: 620px) { .ub-n { display: none; } .userbtn { padding: 2px; margin-right: 8px; } }
.usermenu { position: fixed; z-index: 900; min-width: 220px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.18); padding: 6px; display: grid; }
.usermenu .um-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; display: grid; gap: 2px; }
.usermenu .um-who span { font-size: 11.5px; color: var(--text-faint); }
.usermenu button { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 6px;
  font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.usermenu button:hover { background: var(--surface-2); }

#tsModal { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 16px;
  background: rgba(0,0,0,.35); }
.tsm-card { width: min(760px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tsm-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tsm-x { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--text-dim); }
.tsm-body { padding: 14px 16px; overflow: auto; }
.tsm-body h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.tsm-body h4 i { font-style: normal; background: var(--surface-2); border-radius: 8px; padding: 0 6px; }
.uadm { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 6px; }
.uadm.pending { border-left: 3px solid var(--accent); }
.uadm.disabled { opacity: .7; }
.ua-who span { color: var(--text-faint); font-size: 12.5px; }
.ua-who em { font-style: normal; font-size: 10.5px; background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.ua-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.ua-act { display: flex; gap: 6px; flex-wrap: wrap; }
.ua-act button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px;
  padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ua-act button.warn { color: var(--down); }