/* ValueLens — terminal-style research screen. Graphite, white and gold; green/red only mark
   pass/fail. The report itself is HTML from web/render.py, styled by the .rp rules below. */
:root {
  --bg: #1C1D20;
  --raise: #232428;
  --line: #3A3B40;
  --fg: #E8E8E6;
  --dim: #9C9CA2;
  --faint: #5E5F65;
  --gold: #E2BA5C;
  --gold-soft: #E8D296;
  --green: #7DBF8E;
  --red: #E06C64;
  --mono: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 400 14px/1.55 var(--mono); font-variant-ligatures: none; min-height: 100vh; display: flex; flex-direction: column; }
button, input { font: inherit; color: inherit; font-variant-ligatures: none; }
a { color: var(--gold-soft); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
.ok { color: var(--green); }
.bad { color: var(--red); }
.warn { color: var(--gold); }
.dim { color: var(--dim); }
.gold { color: var(--gold); }
.b { font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- status bar ---------------------------------------------------------------------- */
.bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 8px 20px;
  border-bottom: 1px solid var(--line); background: var(--raise); }
.brand { font-weight: 700; color: var(--gold); letter-spacing: 0.08em; }
.brand small { font-weight: 400; color: var(--dim); letter-spacing: 0; margin-left: 10px; font-size: 13px; }
.stages { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--faint); }
.stages li + li::before { content: "→ "; color: var(--faint); }
.stages li.now { color: var(--gold); }
.stages li.done { color: var(--fg); }
.status { margin-left: auto; display: flex; gap: 16px; align-items: center; color: var(--dim); flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--gold-soft); cursor: pointer; text-decoration: underline; }

/* ---- layout -------------------------------------------------------------------------- */
main { flex: 1; display: flex; flex-direction: column; }
.center { flex: 1; display: grid; place-items: center; padding: 32px 16px; }
.human { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; }
.human:has(#human:not([hidden])) { padding-top: 24px; }
.panel { width: min(680px, 100%); border: 1px solid var(--line); padding: 26px 26px 22px; position: relative; }
.panel-title { position: absolute; top: -0.8em; left: 16px; padding: 0 8px; background: var(--bg);
  color: var(--gold); font-weight: 600; letter-spacing: 0.06em; }
.section + .section { margin-top: 26px; }
.label { display: flex; align-items: baseline; gap: 10px; }
.label .name { font-weight: 600; letter-spacing: 0.04em; color: var(--fg); }
.tag { color: var(--dim); font-size: 13px; }
.tag.req { color: var(--gold); }
.grid2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 6px; }
.prompt { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px;
  background: var(--raise); border: 1px solid var(--line); }
.grid2 .prompt { margin-top: 0; }
.prompt:focus-within { border-color: var(--gold); }
.prompt::before { content: ">"; color: var(--gold); font-weight: 700; }
.prompt input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; caret-color: var(--gold); }
.prompt input::placeholder { color: var(--faint); }
.prompt input:disabled { color: var(--dim); }
.help { margin: 6px 0 0; color: var(--dim); font-size: 13px; }
.err { margin: 10px 0 0; color: var(--red); min-height: 1.5em; }
.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }

.btn { background: transparent; border: 1px solid var(--fg); padding: 7px 16px; cursor: pointer; letter-spacing: 0.06em; font-weight: 600; }
.btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.btn.primary { border-color: var(--gold); color: var(--gold); }
.btn.primary:hover:not(:disabled) { background: var(--gold); color: var(--bg); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.small { padding: 3px 10px; font-weight: 400; letter-spacing: 0; }

/* ---- help tooltips --------------------------------------------------------------------- */
.tipwrap { position: relative; display: inline-block; }
.q { background: none; border: 0; padding: 0 2px; color: var(--gold-soft); cursor: help; }
.tip { display: none; position: absolute; z-index: 5; left: 0; top: calc(100% + 6px); width: min(460px, 80vw);
  padding: 12px 14px; background: var(--raise); border: 1px solid var(--gold); color: var(--fg);
  font-size: 13px; line-height: 1.55; font-weight: 400; letter-spacing: 0; }
.tip p { margin: 0 0 8px; }
.tip p:last-child { margin: 0; }
.tip b { color: var(--gold); font-weight: 600; }
.tipwrap:hover .tip, .tipwrap:focus-within .tip { display: block; }
.tipwrap.closed .tip { display: none; }

/* ---- check results (stage 1 and 2) ------------------------------------------------------ */
.checks { list-style: none; margin: 12px 0 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 4ch 15ch minmax(0, 1fr); gap: 8px; color: var(--dim); }
.checks li.head { display: block; color: var(--fg); font-weight: 600; letter-spacing: 0.04em; margin-top: 10px; }
.checks li.head:first-child { margin-top: 0; }
.checks .st.ok { color: var(--green); }
.checks .st.bad { color: var(--red); }
.checks .st.na { color: var(--gold); }
.checks .st.run { color: var(--gold); }
.checks li .what { color: var(--fg); }
.result-box { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.fineprint { margin: 10px 0 0; color: var(--dim); font-size: 12.5px; }

/* ---- ticker result -------------------------------------------------------------------- */
.found .co { font-weight: 700; font-size: 16px; letter-spacing: 0.02em; color: var(--fg); margin-top: 12px; }
.found .meta { color: var(--dim); }
.found .meta span + span::before { content: "  │  "; color: var(--faint); }
.recent { margin-top: 18px; color: var(--dim); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- stage 3 -------------------------------------------------------------------------- */
.work { padding: 22px 20px 40px; max-width: 960px; width: 100%; margin: 0 auto; }
.cmd { color: var(--dim); margin: 0 0 10px; }
.cmd b { color: var(--gold); font-weight: 600; }
.log { list-style: none; margin: 0 0 8px; padding: 0; }
.log li { display: grid; grid-template-columns: 4ch minmax(0, 46ch) auto; gap: 10px; color: var(--dim); }
.log li.running { color: var(--fg); }
.log li.done .st { color: var(--green); }
.log li.running .st { color: var(--gold); }
.log .secs { font-variant-numeric: tabular-nums; }
.log li.summary { display: block; color: var(--green); margin-top: 4px; }
.failure { border: 1px solid var(--red); color: var(--red); padding: 10px 14px; margin: 12px 0; }
.tabs { display: flex; gap: 8px; margin: 22px 0 30px; align-items: center; }
.tabs .tab[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.readout:focus-visible { outline-offset: 6px; }
.end { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.foot { padding: 8px 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }

/* ---- report (HTML from web/render.py) --------------------------------------------------- */
.rp { font-size: 13.5px; line-height: 1.55; }
.rp :where(h2, h3, h4, p, dl, dd, figure) { margin: 0; font: inherit; }  /* :where keeps this reset weaker than the rules below */
.rp-simple { position: relative; border: 1px solid var(--gold); padding: 26px 30px 32px; }
.rp-foot { position: absolute; right: 16px; bottom: -0.8em; padding: 0 8px; background: var(--bg); color: var(--dim); font-size: 12.5px; }
.rp-sec { margin-top: 22px; }
.rp-sec > h3 { color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.rp-head h2 { font-size: 16px; }
.rp-co { font-weight: 700; }
.rp-tk { margin-left: 1.5ch; color: var(--gold); font-weight: 700; }
.rp-verdict { display: flex; align-items: center; gap: 4px 1.5ch; flex-wrap: wrap; }
.rp-headline { margin-top: 4px; }
.rp-verdict .rp-headline { margin-top: 0; }
.rp-headline.strong-buy, .rp-headline.buy { color: var(--green); }
.rp-headline.hold { color: var(--gold); }
.rp-headline.sell, .rp-headline.strong-sell { color: var(--red); }
.rp-headline.strong-buy, .rp-headline.strong-sell { font-weight: 700; }
.rp-badge { display: inline-block; padding: 1px 1ch; font-weight: 700; letter-spacing: 0.04em; line-height: 1.45; }
.rp-badge.strong-buy { background: #2F7A48; color: #fff; }
.rp-badge.buy { background: var(--green); color: var(--bg); }
.rp-badge.hold { background: var(--gold); color: var(--bg); }
.rp-badge.sell { background: #C8443C; color: #fff; }
.rp-badge.strong-sell { background: #8C2A24; color: #fff; }
.rp-badge.na { border: 1px solid var(--dim); color: var(--dim); }

.rp-worth { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 2ch; padding-left: 2ch; }
.rp-worth .arrow { margin: 0 0.5ch; color: var(--dim); }
.rp-note { margin-top: 14px; padding-left: 2ch; max-width: 80ch; }

/* value gauge: track, fair-value range, fair value (diamond) and price (dot) */
.rp-gauge { margin-top: 18px; padding-left: 2ch; }
.rp-scale { display: flex; align-items: center; gap: 1.5ch; color: var(--dim); }
.rp-scale .rp-end { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-track { position: relative; flex: 1; max-width: 480px; height: 18px; }
.rp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--faint); }
.rp-track i { position: absolute; top: 50%; }
.rp-track .range { height: 6px; margin-top: -3px; background: var(--gold); opacity: 0.45; }
.rp-track .fair { width: 11px; height: 11px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.rp-track .price { width: 12px; height: 12px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--bg); }
.rp-legend { display: flex; flex-wrap: wrap; gap: 4px 3ch; margin-top: 8px; color: var(--dim); }
.rp-legend .key { display: inline-block; vertical-align: middle; margin: -2px 1ch 0 0; }
.rp-legend .key.range { width: 16px; height: 6px; background: var(--gold); opacity: 0.45; }
.rp-legend .key.fair { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.rp-legend .key.price { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

/* score rows: name, 20-segment bar, number, word, hint */
.rp-scores { display: grid; row-gap: 3px; }
.rp-score { display: grid; grid-template-columns: 20ch 22ch 4ch 15ch minmax(0, 1fr); column-gap: 2ch; align-items: center; padding-left: 2ch; }
.rp-detailed .rp-score { grid-template-columns: 20ch 22ch 7ch minmax(0, 1fr); padding-left: 0; }
.rp-score .num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-meter { display: flex; gap: 2px; height: 11px; }
.rp-meter i { flex: 1; background: #2E2F34; }
.rp-meter i.on { background: currentColor; }

.rp-list { list-style: none; margin: 0; padding: 0 0 0 2ch; }
.rp-list li { display: grid; grid-template-columns: 2ch minmax(0, 1fr); }
.rp-list .mk { font-weight: 700; }

/* detailed view: one bordered panel per topic, title on the top border */
.rp-detailed { display: grid; gap: 32px; }
.rp-panel { position: relative; min-width: 0; border: 1px solid var(--line); padding: 24px 26px 24px; }
.rp-title { position: absolute; top: -0.8em; left: 16px; padding: 0 8px; background: var(--bg); color: var(--gold);
  font-weight: 600; letter-spacing: 0.06em; }
.rp-sub { position: absolute; right: 16px; bottom: -0.85em; display: flex; gap: 1ch; align-items: center; padding: 0 8px; background: var(--bg); }
.rp-gap { margin-top: 16px; }
.rp-head-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2ch; }
.rp-head-line .rp-tk { margin-left: 0; }
.rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 4ch; margin-top: 18px; }
.rp-cols h4 { font-weight: 700; margin-bottom: 4px; }
.rp-cols .rp-list { padding-left: 0; }
.rp-sp { margin: 0 2ch; }
.rp-facts { display: flex; flex-wrap: wrap; gap: 6px 4ch; }
.rp-scroll { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; }
.rp-table th { padding: 0 1.5ch 6px 0; border-bottom: 1px solid var(--line); color: var(--dim); font-weight: 600; text-align: left; white-space: nowrap; }
.rp-table td { padding: 5px 1.5ch 5px 0; border-bottom: 1px solid #2A2B30; vertical-align: top; }
.rp-table tr:last-child td { border-bottom: 0; }
.rp-table th:last-child, .rp-table td:last-child { padding-right: 0; }
.rp-table .st { width: 3ch; font-weight: 700; }
.rp-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-kv { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 3px 3ch; }
.rp-kv dt, .rp-kv .note { color: var(--dim); }

.bye { text-align: center; }
.bye h1 { font-size: 16px; color: var(--gold); letter-spacing: 0.08em; margin: 0 0 12px; }

@media (max-width: 640px) {
  .bar { gap: 10px; padding: 8px 14px; }
  .status { margin-left: 0; }
  .panel { padding: 22px 16px 18px; }
  .grid2 { grid-template-columns: 1fr; }
  .work { padding: 18px 14px 32px; }
  .rp { font-size: 13px; }
  .rp-simple { padding: 22px 16px 20px; }
  .rp-foot { position: static; margin-top: 20px; padding: 0; text-align: right; }
  .rp-panel { padding: 22px 14px 20px; }
  .rp-worth, .rp-note, .rp-gauge, .rp-list { padding-left: 0; }
  .rp-score { grid-template-columns: minmax(0, 1fr) 3ch 14ch; grid-template-areas: "name num word" "bar bar bar";
    gap: 3px 1.5ch; padding-left: 0; margin-bottom: 6px; }
  .rp-detailed .rp-score { grid-template-columns: minmax(0, 1fr) 7ch; grid-template-areas: "name num" "bar bar" "hint hint"; }
  .rp-score .name { grid-area: name; }
  .rp-score .num { grid-area: num; }
  .rp-score .word { grid-area: word; }
  .rp-score .rp-meter { grid-area: bar; }
  .rp-score .hint { display: none; }
  .rp-detailed .rp-score .hint { display: block; grid-area: hint; }
  .rp-cols { grid-template-columns: 1fr; }
  .rp-kv { grid-template-columns: minmax(0, 1fr) max-content; }
  .rp-kv .note { grid-column: 1 / -1; margin-bottom: 4px; }
  .rp-table { min-width: 620px; }
  .log li { grid-template-columns: 4ch 1fr auto; }
  .checks li { grid-template-columns: 4ch 1fr; }
  .checks li .detail { grid-column: 2; }
}