/* Buy Finder — builds on style.css tokens (--bg, --panel, --text, --green …). */
body.finder { background: var(--bg); color: var(--text); margin: 0; }
.finder main { max-width: 1180px; margin: 0 auto; padding: 16px; }
.finder .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.finder .nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.finder .nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.finder .nav a:hover { color: var(--text); background: var(--panel-2); }
.finder .nav a.active { color: var(--text); background: var(--panel-2); font-weight: 600; }

.f-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; font-size: 13px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); font-size: 13px; color: var(--text); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill.good .dot { background: var(--green); }
.pill.warn .dot { background: var(--amber); }
.pill.bad .dot { background: var(--red); }

.f-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.f-card h2 { margin: 0 0 4px; font-size: 18px; }
.f-card .sub { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.verdict-banner { border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; border: 1px solid var(--border); background: var(--panel-2); }
.verdict-banner.good { border-color: color-mix(in srgb, var(--green) 55%, transparent); }
.verdict-banner.none { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.verdict-banner b { font-weight: 700; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.controls label { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.controls select, .controls input[type="search"] { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: 0; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); font-weight: 600; }

/* The one-click answer to "what do I buy today". Everything else on this row is
   a refinement; this is the default question, so it gets to look like a button
   rather than one tab among eight. */
#f-quick { flex: 1 0 100%; }
.seg button.quick {
  background: var(--green); color: #08131c; font-weight: 700; font-size: 14px;
  padding: 9px 16px; border-radius: 8px; width: 100%; max-width: 340px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--green) 40%, transparent);
}
.seg button.quick:hover { background: color-mix(in srgb, var(--green) 88%, #fff); }
.seg button.quick:active { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) {
  .seg button.quick { transition: background .12s ease, transform .06s ease; }
}

.cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

/* Flat list: one row per stock. Needs its own density or 12 columns is
   unreadable on a phone, and it must scroll rather than squash the page. */
.cands:has(.flat-wrap) { display: block; }
.flat-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.flat { width: 100%; border-collapse: collapse; font-size: 13px; }
table.flat th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.flat td { padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.flat tr:hover td { background: var(--panel-2); }
table.flat td.num, table.flat th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.flat a { color: var(--text); text-decoration: none; }
table.flat a:hover { text-decoration: underline; }
/* Sector, "since signal", ATR and the stock's own history are supporting
   detail — drop them first on a narrow screen so symbol, price and the
   action survive. This used to apply only to table.flat, so the per-setup
   cards' inner table (7 columns) still overflowed and pushed the whole page
   sideways at 390px. */
@media (max-width: 720px) {
  table.f-table { font-size: 12px; }
  table.f-table th, table.f-table td { padding: 6px 7px; }
  table.f-table .col-hide-sm { display: none; }
}
.cand { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--panel-2); display: flex; flex-direction: column; gap: 10px; }
.cand.qualified { border-color: color-mix(in srgb, var(--green) 60%, transparent); }
.cand-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cand-sym { font-size: 20px; font-weight: 700; color: var(--text); text-decoration: none; }
.cand-sym:hover { text-decoration: underline; }
.cand-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.cand-price { text-align: right; font-variant-numeric: tabular-nums; }
.cand-price .px { font-size: 16px; font-weight: 600; }
.cand-price .mv { font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.chip.strong { color: var(--text); }
.badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; letter-spacing: .02em; white-space: nowrap; }
.badge.edge, .badge.pass { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.badge.noedge { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.badge.lose { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.badge.few { background: var(--panel); color: var(--muted); border: 1px solid var(--border); }

.wr { display: grid; gap: 4px; }
.wr-top { display: flex; justify-content: space-between; font-size: 13px; }
.wr-bar { position: relative; height: 10px; border-radius: 5px; background: var(--panel); border: 1px solid var(--border); overflow: visible; }
.wr-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.wr-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); opacity: .75; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--panel); border-radius: 8px; padding: 8px; }
.stat .k { font-size: 11px; color: var(--muted); }
.stat .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.val-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.val-col { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.val-col h3 { margin: 0 0 8px; font-size: 14px; }
.val-col .big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.kv:last-child { border-bottom: 0; }

.tbl-wrap { overflow-x: auto; }
table.f-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.f-table th, .f-table td { padding: 8px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.f-table th:first-child, .f-table td:first-child { text-align: left; }
.f-table th { color: var(--muted); font-weight: 600; font-size: 12px; cursor: pointer; user-select: none; }
.f-table tr.is-edge td:first-child { box-shadow: inset 3px 0 0 var(--green); }

.empty { padding: 24px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; }
.caveats { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.f-foot { color: var(--muted); font-size: 12px; text-align: center; padding: 20px 16px 40px; }

@media (max-width: 600px) {
  .finder main { padding: 12px 16px; }
  .cands { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* grouped candidates: one card per setup, full width */
.cands { grid-template-columns: 1fr; }
.cand.group .cand-head .chips { justify-content: flex-end; }
.stats.six { grid-template-columns: repeat(6, 1fr); }
.f-table.compact th, .f-table.compact td { padding: 6px 8px; }
.f-table a { color: var(--text); text-decoration: none; }
.f-table a:hover { text-decoration: underline; }
@media (max-width: 800px) { .stats.six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .stats.six { grid-template-columns: repeat(2, 1fr); } }
/* Horizontal overflow containment.
 *
 * Measured on 2026-09-28: at a 390 px viewport, index.html had 1,412 elements
 * extending past the right edge. The cause is not the table itself — every
 * wide table already sits in a .tbl-wrap with overflow-x:auto — it is that a
 * grid or flex child defaults to min-width:auto, so it refuses to shrink below
 * its widest descendant. The .tbl-wrap then has no constraint to scroll inside
 * and the PAGE scrolls instead, which pushes the header nav off-screen and
 * makes the whole layout unusable.
 *
 * The fix is min-width:0 on the ancestor chain, not on the table. A scroll
 * container that is itself unconstrained is not a scroll container.
 */
.cands > *, .val-grid > *, .f-card, .finder main, .f-card > *,
.tbl-wrap, .flat-wrap, .val-col, .cand, .f-body { min-width: 0; max-width: 100%; }

/* A table that is wider than its wrapper is what we want; the wrapper is what
   scrolls. `width:100%` plus nowrap cells gives a readable scroll on a phone
   without letting the cell content determine the page width. */
.tbl-wrap, .flat-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap > table, .flat-wrap > table { min-width: max-content; }
.f-status .pill { max-width: 100%; white-space: normal; }

/* in-page section jumps (the site-wide nav comes from nav.js) */
.f-jump { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 16px; }
.f-jump a { font-size: 13px; color: var(--muted); text-decoration: none; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); }
.f-jump a:hover { color: var(--text); border-color: var(--muted); }
.f-card { scroll-margin-top: 12px; }
.f-paper { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; white-space: nowrap; }
.f-paper:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.f-paper:disabled { color: var(--muted); cursor: default; }

/* --- Information architecture (2026-09-28) ---------------------------------
   The page was 19 screens tall with the answer in the third. Two changes:

   1. The candidate list is capped at MAX_SETUPS (finder.js) with an explicit
      "show the other N" control. The count line states exactly how many are
      held back, so this is a disclosure, not a silent truncation.
   2. The evidence panels are <details>, closed by default.

   Collapsing is a presentation change ONLY. Nothing is removed from the page:
   every panel is one click away, <details> works without JavaScript, and the
   anchor links in .f-jump still resolve to a section that is now merely
   collapsed (opening it on hashchange is handled in finder.js). */
.cand-more { display: flex; justify-content: center; margin-top: 16px; }
.f-more-btn {
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
  padding: 9px 18px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2);
}
.f-more-btn:hover { border-color: var(--green); color: var(--green); }
.f-more-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* A closed <details> must still look like a section a reader can open, not
   like a broken heading. The summary is the control, so it gets the affordance
   a button would. */
.f-fold {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); margin-bottom: 10px; padding: 0;
}
.f-fold > summary {
  cursor: pointer; padding: 14px 16px; list-style: none;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.f-fold > summary::-webkit-details-marker { display: none; }
.f-fold > summary::before {
  content: "\25B8"; color: var(--muted); font-size: 11px;
  transition: transform .15s ease; display: inline-block;
}
.f-fold[open] > summary::before { transform: rotate(90deg); }
.f-fold > summary:hover { color: var(--green); }
.f-fold > summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 10px; }
.f-fold[open] > summary { border-bottom: 1px solid var(--border); }
.f-fold > *:not(summary) { padding: 0 16px; }
.f-fold > *:not(summary):last-child { padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce) {
  .f-fold > summary::before { transition: none; }
}

/* Per-setup stock list, folded. See finder.js groupCard().
   Measured 2026-09-28: one card rendered 2,401 px and another 1,735 px because
   a setup can fire on up to 100 stocks, and those two cards alone were 4,136 px
   of an 8,483 px page. The verdict, win bar and six stat tiles stay visible —
   they are what the card exists to convey. Only the row list folds, and the
   summary states the exact row count rather than saying "more". */
.cand-fold { border-top: 1px solid var(--border); padding-top: 8px; }
.cand-fold > summary {
  cursor: pointer; font-size: 13px; color: var(--muted);
  padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 7px;
}
.cand-fold > summary::-webkit-details-marker { display: none; }
.cand-fold > summary::before {
  content: "\25B8"; font-size: 10px; color: var(--muted);
  transition: transform .15s ease; display: inline-block;
}
.cand-fold[open] > summary::before { transform: rotate(90deg); }
.cand-fold > summary:hover { color: var(--green); }
.cand-fold > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.cand-fold[open] > summary { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .cand-fold > summary::before { transition: none; } }