/* ================================================================
   QUANT SIGNAL — private research desk aesthetic
   Bone paper · ink · racing green · hairlines · editorial smallcaps
   Newsreader (display) / Schibsted Grotesk (UI) / Spline Sans Mono (data)
   ================================================================ */
:root {
  --paper: #f6f4ef;        /* warm bone ground */
  --sheet: #fdfcfa;        /* elevated sheet for the table */
  --ink: #191917;
  --ink-2: #43423d;
  --muted: #7b7970;
  --faint: #a5a299;
  --rule: #dcd8cc;         /* hairline */
  --rule-soft: #e9e6dd;
  --accent: #1e4d3b;       /* racing green */
  --accent-ink: #143427;
  --gold: #a07d2a;
  --c-high: #1e6b45; --c-pos: #4a7030; --c-hold: #8a6d1f;
  --c-weak: #a05c22; --c-exit: #9a3b32;
  --up: #1e6b45; --dn: #9a3b32;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 15.5px/1.6 var(--sans); }
.wrap { max-width: 1400px; margin: 0 auto; padding: 30px 40px 80px; }

/* ---- macro context ribbon (display-only layer; no score coupling) ---- */
.macroband {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 16px; padding: 9px 2px 10px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-soft);
  font: 13px var(--mono); letter-spacing: .02em; color: var(--ink-2);
}
.macroband:empty { display: none; }
.macroband .mg { display: inline-flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.macroband .mg b {
  font: 600 10.5px var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.macroband .mv { color: var(--ink-2); }
.macroband .mstate { font: 600 12.5px var(--sans); letter-spacing: .03em; }
.macroband .m-ok { color: var(--accent); }
.macroband .m-mid { color: var(--muted); }
.macroband .m-warn { color: var(--gold); }
.macroband .m-bad { color: var(--c-exit); }
.macroband .m2-high, .macroband .m2-pos { color: var(--accent); }
.macroband .m2-hold { color: var(--gold); }
.macroband .m2-weak, .macroband .m2-exit { color: var(--c-exit); }
.macroband .stale { font: italic 13px var(--serif); color: var(--faint); margin-left: 4px; }
.macroband .mnote {
  margin-left: auto; font: italic 11.5px var(--serif); color: var(--faint);
}
@media (max-width: 900px) { .macroband .mnote { margin-left: 0; } }

/* ---------------- masthead: three columns, title block centred ---------------- */
header.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 24px; padding: 4px 0 16px; border-bottom: 1px solid var(--ink);
  margin-bottom: 6px; position: relative;
}
header.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  border-bottom: 1px solid var(--rule);
}
header.top .top-left, header.top .top-right {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0;
}
header.top .top-left { justify-self: start; }
header.top .top-right { justify-self: end; justify-content: flex-end; }
header.top .top-center { text-align: center; justify-self: center; }
header.top h1 {
  font: 400 42px/1 var(--serif); letter-spacing: .01em; margin: 0;
}
header.top .tagline {
  font: 500 13px var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted); margin-top: 9px;
}
header.top .date {
  color: var(--muted); font: 13.5px var(--mono); letter-spacing: .04em;
}
/* language switch: quiet mono toggle, same family as the IBKR indicator */
button.lang {
  background: transparent; color: var(--ink-2); cursor: pointer;
  border: 1px solid var(--rule); border-radius: 2px; padding: 7px 12px;
  font: 600 12px var(--mono); letter-spacing: .14em; transition: border-color .15s, color .15s;
}
button.lang:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 900px) {
  header.top { grid-template-columns: 1fr; row-gap: 12px; }
  header.top .top-left, header.top .top-right { justify-self: center; justify-content: center; }
  header.top .top-center { order: -1; }
  /* IBKR status on its own line, the two buttons below it */
  header.top .top-right { width: 100%; row-gap: 10px; }
  header.top .top-right .ibkr { flex: 1 0 100%; text-align: center; }
}
a.back {
  color: var(--accent); text-decoration: none; font: 600 13px var(--sans);
  letter-spacing: .14em; text-transform: uppercase; padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
a.back:hover { border-bottom-color: var(--accent); }
button.refresh {
  background: var(--ink); color: var(--paper); border: 0; border-radius: 2px;
  padding: 10px 20px; cursor: pointer;
  font: 600 12.5px var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transition: background .15s;
}
button.refresh:hover { background: var(--accent-ink); }
button.refresh:disabled { opacity: .45; cursor: wait; }
.ibkr { font: 600 12px var(--mono); letter-spacing: .18em; color: var(--faint); }
.ibkr::before { content: "● "; font-size: 8px; vertical-align: 1px; }
.ibkr .dot { font-size: 8px; vertical-align: 1px; }   /* the separator dot matches the leading one */
.ibkr.live { color: var(--c-high); }
.ibkr.delayed { color: var(--c-hold); }
.ibkr.disc { color: var(--faint); }

/* ---------------- numbered section labels ---------------- */
.wrap { counter-reset: sec; }
h2.sec {
  counter-increment: sec;
  display: flex; align-items: baseline; gap: 12px;
  font: 500 12.5px var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-2); margin: 40px 0 16px;
  border-bottom: 1px solid var(--rule); padding-bottom: 9px;
}
h2.sec::before {
  content: "0" counter(sec);
  font: italic 400 19px var(--serif); color: var(--gold);
  letter-spacing: 0;
}
h2.sec span { letter-spacing: .02em !important; }

/* ---------------- market strip (boxless cells) ---------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; }
.card {
  background: transparent; border: 0; border-left: 1px solid var(--rule);
  border-radius: 0; padding: 4px 20px 10px; box-shadow: none;
}
.card:first-child { border-left: 0; padding-left: 2px; }
.card .t { font: 600 14px var(--sans); }
.card .t span { color: var(--faint); font-weight: 400; font-size: 12.5px; }
.card .p { font: 500 27px/1.2 var(--mono); letter-spacing: -0.02em; margin: 7px 0 1px; }
.card .chg { font: 13.5px var(--mono); }
.card .sub {
  color: var(--muted); font-size: 12.5px; margin-top: 9px;
  font-family: var(--mono); letter-spacing: -0.01em;
}
.card .bar { height: 2px; background: var(--rule-soft); margin-top: 10px; overflow: hidden; }
.card .bar i { display: block; height: 100%; background: var(--accent); }
.up { color: var(--up); } .down { color: var(--dn); }
/* the single dark focal element */
.card.overall {
  background: var(--ink); color: var(--paper); border-left: 0;
  padding: 16px 22px 14px; margin-left: 14px;
}
.card.overall .t { color: var(--paper); font: 500 11.5px var(--sans);
  letter-spacing: .2em; text-transform: uppercase; }
.card.overall .p { font-size: 36px; color: #fff; }
.card.overall .sub { color: #8f8d84; border: 0; }
.card.overall .bar { background: rgba(246,244,239,.14); }
.card.overall .bar i { background: #d9b45b; }
.regime { display: inline-block; font: 600 12.5px var(--sans);
  letter-spacing: .18em; text-transform: uppercase; padding: 0; }
.card.overall .regime.b-high { color: #7fd6a4; } .card.overall .regime.b-pos { color: #b4d67f; }
.card.overall .regime.b-hold { color: #e3c76a; } .card.overall .regime.b-weak { color: #e5a06b; }
.card.overall .regime.b-exit { color: #e58c82; }

/* ---------------- toolbar ---------------- */
.toolbar { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.toolbar input[type=search] {
  padding: 8px 12px; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0; font: 14.5px var(--sans); min-width: 230px;
  background: transparent; outline: none; margin-right: 14px;
  transition: border-color .15s;
}
.toolbar input[type=search]:focus { border-bottom-color: var(--accent); }
.toolbar input::placeholder { color: var(--faint); }
.chip {
  border: 0; background: transparent; border-radius: 0;
  padding: 6px 10px; cursor: pointer; color: var(--muted);
  font: 500 12.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 2px solid transparent; transition: color .12s;
}
.chip:hover { color: var(--ink); }
.chip.on { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---------------- the table: hero on an elevated sheet ---------------- */
.tablewrap {
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 0; overflow-x: auto;
  box-shadow: 0 1px 0 var(--rule), 0 12px 34px -18px rgba(25,25,23,.25);
}
table { border-collapse: collapse; width: 100%; min-width: 1000px; }
th, td { padding: 10px 14px; text-align: right; white-space: nowrap; }
td { font: 14px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
td.l { font-family: var(--sans); font-size: 14.5px; letter-spacing: 0; }
th {
  font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); border-bottom: 1px solid var(--ink); cursor: pointer;
  user-select: none; position: sticky; top: 0; background: var(--sheet);
  z-index: 2; padding-top: 13px; padding-bottom: 11px;
}
th:hover { color: var(--ink); }
th.sorted { color: var(--accent-ink); }
th.sorted::after { content: " ↓"; font-family: var(--mono); }
th.sorted.asc::after { content: " ↑"; }
td { border-bottom: 1px solid var(--rule-soft); }
tr:last-child td { border-bottom: 0; }
tr.row { cursor: pointer; }
tr.row:hover td { background: #f4f1e8; }
td.l, th.l { text-align: left; }
#tbl th:nth-child(5), #tbl td:nth-child(5) { border-left: 1px solid var(--rule); padding-left: 18px; }
#tbl th:nth-child(9), #tbl td:nth-child(9) { border-left: 1px solid var(--rule); }
td .tkr { font: 700 15px var(--sans); color: var(--ink); letter-spacing: .02em; }
td .rk { display: none; }                 /* rank prefix inside the ticker cell: phone only */
tr.row:hover .tkr { color: var(--accent-ink); }

/* ---------------- typographic signal marks (no pills) ---------------- */
.badge {
  display: inline; padding: 0; border-radius: 0; background: transparent !important;
  font: 600 12.5px var(--sans); letter-spacing: .07em; text-transform: uppercase;
}
.badge::before { content: "▪ "; font-size: 11px; }
.b-high { color: var(--c-high); }
.b-pos  { color: var(--c-pos); }
.b-hold { color: var(--c-hold); }
.b-weak { color: var(--c-weak); }
.b-exit { color: var(--c-exit); }
.score { font: 600 14px var(--mono); }
.risk-hi { color: var(--c-exit); font-weight: 600; }
.risk-lo { color: var(--c-high); }
.epi {
  font: 600 10.5px var(--mono); color: var(--muted); letter-spacing: .06em;
  border: 1px solid var(--rule); padding: 1px 5px; vertical-align: 1px;
}
.epi.new { color: var(--accent-ink); border-color: var(--accent); }

/* ---------------- legend / footnotes ---------------- */
.legend {
  display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 2px 0;
  color: var(--muted); font-size: 13.5px; align-items: baseline;
  border-top: 1px solid var(--rule); padding-top: 14px;
}
.legend b { font: italic 400 16px var(--serif); color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.note {
  color: var(--faint); font-size: 13px; margin-top: 12px; max-width: 100ch;
  line-height: 1.65;
}
.note::before { content: "※ "; color: var(--gold); }

/* ---------------- detail page ---------------- */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 0; margin: 0 0 22px; border: 1px solid var(--rule);
  background: var(--sheet);
}
.stat {
  background: transparent; border: 0; border-left: 1px solid var(--rule-soft);
  border-radius: 0; padding: 13px 15px; box-shadow: none;
}
.stat:first-child { border-left: 0; }
.stat .k {
  font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: .16em;
  color: var(--faint); margin-bottom: 5px;
}
.stat .v { font: 500 19px var(--mono); font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: 2px; margin: 18px 0 10px; }
#chart {
  height: 480px; background: var(--sheet); border: 1px solid var(--rule);
  box-shadow: 0 12px 34px -20px rgba(25,25,23,.25); overflow: hidden;
}
.ma-legend {
  display: flex; gap: 18px; margin: 10px 2px; font: 12.5px var(--mono);
  color: var(--muted); flex-wrap: wrap; letter-spacing: .02em;
}
.explain {
  background: var(--sheet); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 18px 24px; margin-top: 20px; max-width: 88ch;
  line-height: 1.85; font-size: 15px; color: var(--ink-2);
  box-shadow: 0 1px 0 var(--rule);
}
.explain b { font: italic 500 17px var(--serif); color: var(--ink); }
/* score breakdown is a <details>: on desktop it looks exactly like the old box */
details.breakdown > summary { list-style: none; cursor: pointer; }
details.breakdown > summary::-webkit-details-marker { display: none; }
details.breakdown > summary::after { content: ""; }
details.breakdown[open] > summary { margin-bottom: 2px; }
.empty { padding: 48px; text-align: center; color: var(--faint);
  font: italic 15.5px var(--serif); }

/* ---------------- Chinese typography (html[lang="zh-CN"]) ----------------
   Same layout; CJK fallbacks added to each family and the wide uppercase
   tracking relaxed, which reads badly on Chinese glyphs. */
html[lang="zh-CN"] {
  --serif: "Newsreader", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --sans: "Schibsted Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
}
html[lang="zh-CN"] header.top .tagline { letter-spacing: .18em; }
html[lang="zh-CN"] h2.sec,
html[lang="zh-CN"] th,
html[lang="zh-CN"] .chip,
html[lang="zh-CN"] a.back,
html[lang="zh-CN"] button.refresh,
html[lang="zh-CN"] .stat .k,
html[lang="zh-CN"] .card.overall .t,
html[lang="zh-CN"] .regime,
html[lang="zh-CN"] .macroband .mg b { letter-spacing: .06em; }
html[lang="zh-CN"] .badge { letter-spacing: .03em; }
html[lang="zh-CN"] .explain { line-height: 1.95; }

/* ================================================================
   PHONE LAYOUT (<= 760px)
   Same content, re-flowed: nothing may be wider than the viewport,
   the ranking table becomes a list of stock cards, grids go to two
   columns, tap targets grow, inputs stay >= 16px so iOS does not zoom.
   ================================================================ */
.sortsel { display: none; }                 /* mobile-only sort control */

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  body { font-size: 15px; }
  .wrap { padding: 16px 16px 56px; max-width: 100%; }

  /* masthead */
  header.top { padding: 2px 0 12px; row-gap: 8px; }
  header.top h1 { font-size: 32px; }
  header.top .tagline { font-size: 11px; letter-spacing: .22em; margin-top: 6px; }
  header.top .top-left, header.top .top-right { gap: 10px 14px; }
  header.top .date { font-size: 12.5px; }
  button.refresh { padding: 8px 14px; font-size: 11.5px; }
  button.lang { padding: 6px 10px; }
  h2.sec { margin: 28px 0 12px; font-size: 11.5px; letter-spacing: .18em; }

  /* market strip: two columns, overall card full width */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .card { border-left: 0; border-top: 1px solid var(--rule-soft); padding: 10px 10px 12px 0; min-width: 0; }
  .card:nth-child(odd) { padding-right: 10px; }
  .card:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--rule-soft); }
  .card .p { font-size: 22px; }
  .card .sub { font-size: 11.5px; }
  .card.overall { grid-column: 1 / -1; margin: 10px 0 0; padding: 14px 16px 12px; border: 0; }
  .card.overall .p { font-size: 30px; }
  .macroband { font-size: 12px; gap: 8px 16px; }

  /* toolbar: search on its own line, chips wrap; the table keeps its sortable headers so no sort select */
  .toolbar { gap: 2px 0; margin-bottom: 10px; }
  .toolbar input[type=search] { flex: 1 0 100%; min-width: 0; margin: 0 0 6px; font-size: 16px; padding: 10px 2px; }
  .chip { padding: 9px 9px; font-size: 11.5px; letter-spacing: .06em; }
  .sortsel { display: none; }

  /* ---- ranking table: the real table, scrolled sideways inside its frame ----
     The ticker column (with the rank folded in) stays pinned on the left, the
     rest scrolls; a soft shadow at the right edge hints that there is more. */
  .tablewrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(90deg, var(--sheet) 30%, rgba(253,252,250,0)) left/40px 100% no-repeat local,
      linear-gradient(270deg, rgba(25,25,23,.10), rgba(25,25,23,0)) right/22px 100% no-repeat scroll,
      var(--sheet);
  }
  #tbl { min-width: 720px; }
  #tbl th, #tbl td { padding: 8px 9px; }
  #tbl th { font-size: 10px; letter-spacing: .1em; padding-top: 10px; padding-bottom: 9px; }
  #tbl td { font-size: 12.5px; }
  #tbl td.l { font-size: 12.5px; }
  #tbl .badge { font-size: 11px; letter-spacing: .04em; }
  #tbl .badge::before { font-size: 9px; }
  #tbl .score { font-size: 13px; }
  #tbl .epi { font-size: 9px; padding: 0 4px; }
  /* rank column hidden; the rank is shown as a small prefix inside the pinned ticker cell */
  #tbl th:nth-child(1), #tbl td:nth-child(1) { display: none; }
  #tbl td .rk { display: inline; font: 600 10px var(--mono); color: var(--faint); margin-right: 6px; vertical-align: 1px; }
  #tbl td .tkr { font-size: 14px; }
  #tbl th:nth-child(2), #tbl td:nth-child(2) {
    position: sticky; left: 0; z-index: 3; background: var(--sheet);
    border-right: 1px solid var(--rule); padding-left: 12px;
  }
  #tbl th:nth-child(2) { z-index: 4; }
  #tbl tr.row:hover td:nth-child(2) { background: #f4f1e8; }
  #tbl th:nth-child(5), #tbl td:nth-child(5), #tbl th:nth-child(9), #tbl td:nth-child(9) { padding-left: 12px; }
  #tbl .empty { padding: 32px 12px; }

  /* legend / notes */
  .legend { font-size: 12.5px; gap: 8px 12px; margin-top: 16px; }
  .legend b { font-size: 15px; }
  .note { font-size: 12.5px; }

  /* ---- stock detail: three groups instead of 13 equal tiles ----
     hero  = price · change · opportunity        (one row, big numbers)
     score = trend · entry · rel strength · risk (four small tiles)
     list  = rank / setup / signal / holding / timing / valuation (label left, value right) */
  #readline { display: none; }              /* duplicates the hero on a phone */
  .stat-row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    grid-template-areas:
      "price price chg   opp"
      "trend entry rs    risk"
      "signal signal signal signal"
      "setup setup setup setup"
      "timing timing timing timing"
      "hold hold hold hold"
      "rank rank rank rank"
      "val val val val";
  }
  .stat { border-left: 0; border-top: 1px solid var(--rule-soft); padding: 10px 12px; min-width: 0; }
  .stat .v { font-size: 17px; }
  /* hero */
  .s-price { grid-area: price; border-top: 0; }
  .s-chg   { grid-area: chg;   border-top: 0; border-left: 1px solid var(--rule-soft); }
  .s-opp   { grid-area: opp;   border-top: 0; border-left: 1px solid var(--rule-soft); background: var(--ink); color: var(--paper); }
  .s-opp .k { color: #8f8d84; }
  .s-price .v { font-size: 24px; }
  .s-chg .v, .s-opp .v { font-size: 19px; }
  /* score tiles */
  .s-score { text-align: center; padding: 9px 4px 10px; }
  .s-score + .s-score { border-left: 1px solid var(--rule-soft); }
  .s-score .k { font-size: 9.5px; letter-spacing: .1em; margin-bottom: 3px; }
  .s-score .v { font-size: 18px; }
  .s-trend { grid-area: trend; } .s-entry { grid-area: entry; } .s-rs { grid-area: rs; } .s-risk { grid-area: risk; }
  /* key-value rows */
  .s-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; }
  .s-kv .k { margin: 0; flex: 0 0 auto; font-size: 10px; }
  .s-kv .v { font-size: 14.5px !important; text-align: right; }
  .s-signal { grid-area: signal; } .s-setup { grid-area: setup; } .s-timing { grid-area: timing; }
  .s-hold { grid-area: hold; } .s-rank { grid-area: rank; } .s-val { grid-area: val; }
  .s-val .v { font-size: 13.5px !important; }
  .s-val .val-detail { font-size: 11.5px !important; margin-top: 2px !important; line-height: 1.5; }
  .s-val .val-note { display: none; }       /* the "description only" disclaimer is in the dashboard notes */
  /* breakdown collapsed by default; show a chevron */
  details.breakdown > summary::after { content: " \25BE"; color: var(--muted); font-size: 13px; }
  details.breakdown[open] > summary::after { content: " \25B4"; }
  .explain { padding: 14px 16px; font-size: 14.5px; line-height: 1.75; }
  #chart { height: 320px; }
  .ma-legend { gap: 10px 14px; font-size: 11.5px; }
  .tabs { flex-wrap: wrap; }

  /* validation: keep the 7-column tables, scroll them inside their frame */
  .tablewrap table:not(#tbl) { min-width: 640px; }
  .tablewrap table:not(#tbl) th, .tablewrap table:not(#tbl) td { padding: 9px 10px; font-size: 13px; }
}

/* very narrow phones */
@media (max-width: 380px) {
  header.top h1 { font-size: 28px; }
  .card .p { font-size: 20px; }
  .chip { padding: 8px 7px; font-size: 11px; }
}