:root {
  /* Ten native controls — checkboxes, date pickers, number spinners, scrollbars —
     were painting in the light theme on a #0d1117 page. */
  color-scheme: dark;

  --bg: #0d1117;
  --panel: #151b23;
  --panel-2: #1b232d;
  /* Measured against --panel-2, which is what inputs and selects are actually filled
     with — tuning it against the card left the controls it was introduced for at 2.94:1.
     The old #263041 was 1.30:1: a boundary you had to already know was there. */
  --line: #63738f;
  /* Hairlines that separate rather than enclose can stay quiet — they are decoration,
     and WCAG 1.4.11 does not apply to them. */
  --line-soft: #263041;
  --text: #e6edf3;
  --dim: #8b97a8;
  /* #4c8dff carries white at only 3.20:1, so it stays a link and stroke colour and a
     darker sibling takes every filled surface. */
  --accent: #4c8dff;
  --accent-solid: #2f6fe0;
  --green: #2ecc8f;
  --red: #ff5d5d;
  --amber: #f5b544;

  /* Six steps. Fifteen sizes with half-pixel gaps below the just-noticeable difference
     read as inconsistency, not hierarchy. Weight and colour carry the rest. */
  --t1: 12px;
  --t2: 13px;
  --t3: 15px;
  --t4: 18px;
  --t5: 22px;
  --t6: 28px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --radius: var(--r-lg);
}

/* A visible focus ring everywhere something can be focused. The previous rule removed
   the outline and replaced it with a 1px border colour change, which is invisible on a
   card and fails 2.4.11 outright on the 18 keyboard-focusable preset cards. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  /* Not background-attachment: fixed — it causes repaint jank on iOS Safari. */
  background: radial-gradient(1200px 600px at 50% -200px, #17202c 0%, var(--bg) 60%) no-repeat;
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.topbar { padding: 28px 20px 8px; text-align: center; }
.brand { font-size: var(--t6); font-weight: 700; letter-spacing: -0.4px; }
.logo { margin-right: 6px; }
.sub { color: #c3ccd8; margin-top: 4px; font-size: var(--t3); }

main { max-width: 1120px; margin: 0 auto; padding: 16px 20px 80px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
h2 { font-size: var(--t3); margin: 0; font-weight: 650; }
h3 { font-size: var(--t2); margin: 0 0 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; font-weight: 650; }
.hint { color: var(--dim); font-size: var(--t2); }

label { display: block; font-size: var(--t1); color: var(--dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
/* A field label and its tip marker are one line. The label being block-level pushed the
   marker underneath, where an italic 'i' with no ring reads as a stray slash. */
.field > label { display: inline-block; margin-right: 6px; vertical-align: middle; }
.field > .tip-btn { vertical-align: middle; margin: 0 0 6px; }

textarea, input, select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font: inherit;
    width: 100%;
}
textarea { resize: vertical; min-height: 62px; }
textarea:focus, input:focus, select:focus { border-color: var(--accent); }
select { appearance: none; cursor: pointer; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.ask-row { display: flex; gap: 10px; align-items: stretch; }
.ask-row textarea { flex: 1; }

button, a.btnlink {
  font: inherit; cursor: pointer; border-radius: var(--r-md); border: 1px solid transparent;
  padding: 10px 16px; font-weight: 600; white-space: nowrap;
}
.primary { background: var(--accent-solid); color: #fff; }
.primary:hover { background: #3b7cf0; }
.primary.wide { width: 100%; margin-top: 14px; }
.ghost { background: transparent; color: var(--dim); border-color: var(--line); }
.ghost:hover { color: var(--text); border-color: var(--accent); }
.small { padding: 4px 10px; font-size: var(--t1); }
button:disabled { opacity: .55; cursor: default; }

.examples { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 999px; padding: 5px 12px; font-size: var(--t2); cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.chip:hover { color: var(--text); border-color: var(--accent); }

.notes { margin-top: 10px; color: var(--amber); font-size: var(--t2); }
.notes p { margin: 4px 0; }

/* --- pre-made strategies --- */
.preset-intro { color: var(--dim); font-size: var(--t2); line-height: 1.65; margin: 0 0 18px; }
.preset-intro em { color: var(--text); font-style: normal; }
.preset-group { margin-bottom: 22px; }
.preset-group:last-child { margin-bottom: 0; }
.preset-group h3 { margin-bottom: 4px; color: var(--text); text-transform: none; font-size: var(--t3); letter-spacing: 0; }
.group-blurb { color: var(--dim); font-size: var(--t2); margin: 0 0 12px; }
.preset-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }

.preset {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; cursor: pointer; transition: border-color .15s, transform .1s;
  display: flex; flex-direction: column; gap: 8px;
}
.preset:hover, .preset:focus-visible { border-color: var(--accent); transform: translateY(-1px);  }
.preset.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.preset.cautionary { border-style: dashed; }
.preset.cautionary:hover, .preset.cautionary:focus-visible { border-color: var(--red); }

.preset-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.preset-name { font-weight: 650; font-size: var(--t3); }
.badge {
  font-size: var(--t1); text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.badge.best { background: rgba(46,204,143,.15); color: var(--green); }
.badge.solid { background: rgba(76,141,255,.15); color: #9dc0ff; }
.badge.risky { background: rgba(245,181,68,.15); color: var(--amber); }
.badge.cautionary { background: rgba(255,93,93,.13); color: var(--red); }

.preset-tag { margin: 0; font-size: var(--t2); color: var(--text); line-height: 1.5; }
.preset-why { margin: 0; font-size: var(--t2); color: var(--dim); line-height: 1.6; }
.preset-ev {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--line-soft); font-size: var(--t1); color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.strategy-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.sym-name { font-size: var(--t1); color: var(--dim); margin-top: 5px; height: 16px; overflow: hidden; }

.rules { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 4px; }
.rules-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rules-head h3 { margin: 0; }
.mini { width: auto; padding: 6px 28px 6px 10px; font-size: var(--t2); }

.cond {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 8px 10px; margin-bottom: 8px;
}
.cond select { width: auto; flex: 1; min-width: 200px; }
.cond .numwrap { display: flex; align-items: center; gap: 5px; color: var(--dim); font-size: var(--t2); }
.cond input[type=number] { width: 76px; padding: 6px 8px; }
.cond select.choice { width: auto; min-width: 90px; flex: 0; }
.cond .del { background: transparent; border: none; color: var(--dim); font-size: var(--t4); padding: 0 4px; line-height: 1; }
.cond .del:hover { color: var(--red); }

.add-row { display: flex; gap: 8px; align-items: center; }
.add-row select { flex: 1; }

.exit-grid { display: flex; flex-direction: column; gap: 10px; }
/* A grid, not a wrapping flex row: with flex, which field lands under which depended on
   the viewport, and every row started at a different x. */
.exit-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.exit-fields .numwrap { display: flex; flex-direction: column; align-items: stretch; gap: 5px; color: var(--dim); font-size: var(--t1); }
.exit-fields .numwrap > label { text-transform: uppercase; letter-spacing: .04em; }
.exit-fields input { width: 100%; }
@media (max-width: 900px) { .exit-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .exit-fields { grid-template-columns: 1fr; } }

.status { text-align: center; color: var(--dim); padding: 20px; }
.status.error { color: var(--red); }

.verdict-card { text-align: center; padding: 22px 18px; }
.verdict { font-size: var(--t5); font-weight: 700; letter-spacing: -0.4px; }
.verdict.good { color: var(--green); }
.verdict.bad { color: var(--red); }
.verdict.meh { color: var(--amber); }
.summary-sentence { color: var(--dim); margin-top: 8px; font-size: var(--t3); }
.today-flag {
  margin-top: 14px; display: inline-block; background: rgba(76,141,255,.12);
  border: 1px solid rgba(76,141,255,.4); color: #9dc0ff;
  border-radius: 999px; padding: 6px 14px; font-size: var(--t2); font-weight: 600;
}

.verdict-sub { color: var(--text); margin-top: 10px; font-size: var(--t3); max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.6; opacity: .85; }
.today-flag .caveat { opacity: .75; font-weight: 400; }

.run-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.run-row .primary.wide { margin-top: 0; flex: 1; }

/* Inline definitions for the jargon, so nobody has to leave to look a term up. */
.tip { border-bottom: 1px dotted var(--dim); cursor: help; position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: 140%; transform: translateX(-50%);
  background: #0b1017; color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 8px 10px; font-size: var(--t2); font-weight: 400;
  line-height: 1.5; width: max-content; max-width: 260px; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 20;
  text-transform: none; letter-spacing: 0; pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.tip:hover::after, .tip:focus::after, .tip:focus-visible::after, .tip.open::after { opacity: 1; visibility: visible; }
.tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.scan-intro { color: var(--dim); font-size: var(--t2); line-height: 1.6; margin: 0 0 12px; }
.scan-row { display: flex; gap: 10px; margin-bottom: 12px; }
.scan-row input { flex: 1; }
.scan-status { color: var(--dim); font-size: var(--t2); margin-bottom: 10px; line-height: 1.6; }
.live { color: var(--green); font-size: var(--t1); font-weight: 700; }
tr.dim td { color: var(--dim); }

.sw.price { background: #6b7787; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 5px; }
.dot.buy { background: var(--accent); }
.dot.sell { background: var(--green); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px;
}
.stat .k { font-size: var(--t1); color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.stat .v { font-size: var(--t5); font-weight: 700; margin-top: 4px; letter-spacing: -0.5px; }
.stat .n { font-size: var(--t1); color: var(--dim); margin-top: 2px; }
.pos { color: var(--green); }
.neg { color: var(--red); }

.edge { display: grid; gap: 10px; }
.edge-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t3); padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.edge-row:last-child { border-bottom: none; }
.edge-row .lbl { color: var(--dim); }
.edge-verdict { margin-top: 4px; font-size: var(--t2); line-height: 1.6; color: var(--dim); background: var(--panel-2); border-radius: var(--r-md); padding: 12px; }

.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 18px; justify-content: center; color: var(--dim); font-size: var(--t2); margin-top: 8px; }
.sw { display: inline-block; width: 12px; height: 3px; border-radius: var(--r-sm); vertical-align: middle; margin-right: 5px; }
.sw.sig { background: var(--accent); }
.sw.base { background: #6b7787; }

.table-wrap { overflow-x: auto; }
.table-wrap.tall { max-height: 420px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t2); font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
th { color: var(--dim); font-weight: 600; font-size: var(--t1); text-transform: uppercase; letter-spacing: .4px;
  position: sticky; top: 0; background: var(--panel); }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover { background: var(--panel-2); }

.disclaimer { text-align: left; color: var(--dim); font-size: var(--t1); line-height: 1.7; max-width: 68ch; margin: 22px auto 0; }

.hidden { display: none; }

.dim { color: var(--dim); }

@media (max-width: 760px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .strategy-grid { grid-template-columns: 1fr; }
  .ask-row { flex-direction: column; }
  .scan-row { flex-direction: column; }
  main { padding: 12px 12px 60px; }
  .card { padding: 14px; }
  .preset-cards { grid-template-columns: 1fr; }
  .table-wrap.tall { max-height: 300px; }
  /* A centred tooltip would overflow a phone; pin it to the left edge instead. */
  .tip::after { left: 0; transform: none; max-width: 78vw; }
}

@media (max-width: 400px) {
  .stat-grid, body.simple .stat-grid { grid-template-columns: 1fr; }
}

/* iOS zooms the page whenever a focused field is under 16px. */
@media (max-width: 900px) {
  textarea, input, select { font-size: var(--t3); }
}

.caveat-line { color: var(--dim); font-size: var(--t2); display: inline-block; margin-top: 6px; }
.search-warn {
  margin-top: 10px; background: rgba(245,181,68,.08); border: 1px solid rgba(245,181,68,.3);
  border-radius: var(--r-md); padding: 12px; font-size: var(--t2); line-height: 1.6; color: #f0cf94;
}

.mini.dir { text-transform: none; letter-spacing: 0; font-weight: 650; color: var(--text); font-size: var(--t2); }

.verdict-actions { margin-top: 14px; }
details.advanced { grid-column: 1 / -1; margin-top: 2px; }
details.advanced summary {
  cursor: pointer; color: var(--dim); font-size: var(--t2); padding: 8px 0; list-style: none;
  border-top: 1px solid var(--line-soft);
}
details.advanced summary::-webkit-details-marker { display: none; }
details.advanced summary::before { content: '▸ '; }
details.advanced[open] summary::before { content: '▾ '; }
details.advanced summary:hover { color: var(--text); }
.stat-grid.inner { margin-top: 10px; margin-bottom: 0; }
.badge.noise { background: rgba(255,93,93,.13); color: var(--red); }
.preset.noise { border-style: dashed; }

.delta { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: var(--t1); font-weight: 650; }
.delta.up { background: rgba(46,204,143,.15); color: var(--green); }
.delta.down { background: rgba(245,181,68,.14); color: var(--amber); }

.scan-bar { height: 3px; background: var(--line-soft); border-radius: var(--r-sm); margin-top: 8px; overflow: hidden; }
.scan-bar span { display: block; height: 100%; background: var(--accent); transition: width .2s; }

.scan-summary {
  margin-top: 14px; font-size: var(--t2); color: var(--dim); line-height: 1.7;
  border-top: 1px solid var(--line-soft); padding-top: 12px;
}
.scan-summary b { color: var(--text); }
.scan-summary .jump { color: var(--accent); text-decoration: none; white-space: nowrap; }
.scan-summary .jump:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .cond select { min-width: 0; width: 100%; flex: 1 1 100%; }
  .cond input[type=number] { width: 64px; }
}

/* "Probably noise" and "failed on purpose" are different claims and must look different. */
.badge.noise { background: rgba(245,181,68,.10); color: #d8a24a; border: 1px solid rgba(245,181,68,.35); }
.badge.cautionary { background: rgba(255,93,93,.16); color: var(--red); border: 1px solid rgba(255,93,93,.45); }
.preset.noise { border-style: solid; border-color: rgba(245,181,68,.28); }
.preset.cautionary { border-style: dashed; border-color: rgba(255,93,93,.4); }

.strategy-grid.five { grid-template-columns: 1.1fr .9fr .9fr 1fr 1fr; }
@media (max-width: 1000px) { .strategy-grid.five { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .strategy-grid.five { grid-template-columns: 1fr; } }

.parse-warn {
  background: rgba(255,93,93,.10); border: 1px solid rgba(255,93,93,.45);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
  color: #ffb4b4; font-size: var(--t2); line-height: 1.65;
}
.parse-warn b { color: var(--red); }

tr.overlapped td { opacity: .55; }
.skip { color: var(--dim); cursor: help; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg-btn {
  background: transparent; color: var(--dim); border: none; border-radius: 0;
  padding: 6px 14px; font-size: var(--t2); font-weight: 600;
}
.seg-btn.active { background: var(--accent-solid); color: #fff; }
.seg-btn:not(.active):hover { color: var(--text); }
.pop-note { color: var(--dim); font-size: var(--t2); line-height: 1.65; margin: 0 0 12px; }
.pop-note b { color: var(--text); }
@media (max-width: 620px) { .seg { width: 100%; } .seg-btn { flex: 1; } }

.verdict-money { font-size: var(--t6); font-weight: 700; letter-spacing: -0.6px; margin-bottom: 10px; }
.verdict-money .vs { display: block; font-size: var(--t2); font-weight: 400; color: var(--dim); letter-spacing: 0; margin-top: 6px; }
.verdict { font-size: var(--t4); }
@media (max-width: 620px) { .verdict-money { font-size: var(--t5); } .verdict { font-size: var(--t3); } }

table.grid { width: auto; min-width: 100%; }
table.grid th { background: transparent; color: var(--dim); font-size: var(--t1); text-align: center; }
table.grid th:first-child { text-align: left; }
td.cell { text-align: center; font-weight: 650; font-size: var(--t2); border-radius: var(--r-sm); }
td.cell.good { background: rgba(46,204,143,.16); color: var(--green); }
td.cell.weak { background: rgba(245,181,68,.12); color: var(--amber); }
td.cell.bad  { background: rgba(255,93,93,.12); color: var(--red); }
td.cell.none { color: var(--dim); }
td.cell.base { box-shadow: inset 0 0 0 2px var(--accent); }
.grid-note { color: var(--dim); font-size: var(--t2); line-height: 1.65; margin: 12px 0 0; }
.grid-note b { color: var(--amber); }

.sweep-hint { color: var(--dim); font-size: var(--t2); margin-left: 12px; }

.cond input.reftick { width: 92px; text-transform: uppercase; }

.season-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.season-row { display: grid; grid-template-columns: 34px 1fr 62px 108px; align-items: center; gap: 8px; font-size: var(--t2); margin-bottom: 5px; }
.season-lbl { color: var(--dim); }
.season-track { background: var(--panel-2); border-radius: var(--r-sm); height: 10px; position: relative; overflow: hidden; }
.season-track i { display: block; height: 100%; border-radius: var(--r-sm); }
.season-track i.up { background: rgba(46,204,143,.75); }
.season-track i.down { background: rgba(255,93,93,.7); }
.season-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.season-meta { color: var(--dim); font-size: var(--t1); }
.season-note { color: var(--dim); font-size: var(--t2); line-height: 1.6; margin-top: 14px; }
@media (max-width: 760px) { .season-cols { grid-template-columns: 1fr; gap: 18px; } }

.saved-runs { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.saved-runs h3 { margin: 0; }
.saved-runs table { font-size: var(--t2); }
.saved-runs tr.current { background: rgba(76,141,255,.08); }
.saved-runs td:first-child { max-width: 420px; white-space: normal; }
.saved-runs button.small { padding: 3px 8px; }

.verdict-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
a.btnlink { display: inline-block; text-decoration: none; line-height: 1.5; }

#priceChart svg.subpane { margin-top: 2px; }

/* --- simple mode: the default. One screen, no Greek letters. --- */
.mathswitch {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  color: var(--dim); font-size: var(--t2); cursor: pointer; text-transform: none; letter-spacing: 0;
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 14px;
}
.mathswitch:hover { color: var(--text); border-color: var(--accent); }
.mathswitch input { width: auto; margin: 0; accent-color: var(--accent); }
body.simple .mathonly { display: none; }
body.simple .stat-grid { grid-template-columns: repeat(5, 1fr); }
body.simple .disclaimer { max-width: 62ch; }
@media (max-width: 760px) { body.simple .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* The Run / Save / Copy row is nowrap by default and pushed past the viewport on phones. */
.run-row { flex-wrap: wrap; }
@media (max-width: 620px) {
  .run-row { flex-direction: column; align-items: stretch; }
  .run-row .ghost { width: 100%; }
  button { white-space: normal; }
  .saved-runs td:first-child { max-width: 180px; }
}

@media (max-width: 620px) {
  .add-row { flex-wrap: wrap; }
  .add-row select { flex: 1 1 100%; }
  .add-row .ghost { width: 100%; }
}

/* A tooltip is absolutely positioned but still counts toward scroll width, so on a
   phone the definition popups were what made the page slide sideways. Tables keep
   their own scrollers; nothing else should extend the page. */
@media (max-width: 760px) {
  main { overflow-x: clip; }
  .tip::after { max-width: min(74vw, 250px); }
}

.strategy-grid.six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .strategy-grid.six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .strategy-grid.six { grid-template-columns: 1fr 1fr; } }
.simple-more { display: none; text-align: center; }
body.simple .simple-more { display: block; }
.more-inner h3 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: var(--t3); margin-bottom: 8px; }
.more-inner p { color: var(--dim); font-size: var(--t2); line-height: 1.7; max-width: 620px; margin: 0 auto 16px; }

a.btnlink, a.btnlink:visited { color: var(--dim); border: 1px solid var(--line); background: transparent; }
a.btnlink:hover { color: var(--text); border-color: var(--accent); }
.sym-name { height: auto; min-height: 16px; white-space: normal; }

/* Statistics leak into simple mode through the preset cards and the scan table. */
body.simple .mathonly-inline, body.simple .mathonly-cell { display: none; }
body:not(.simple) .simple-cell { display: none; }
.reconcile { display: inline-block; margin-top: 8px; color: var(--text); background: rgba(76,141,255,.09);
  border-left: 2px solid var(--accent); padding: 8px 12px; border-radius: var(--r-sm); line-height: 1.6; }
/* Long option labels were being cut off mid-word. */
.field select { text-overflow: ellipsis; }
@media (min-width: 1100px) { .strategy-grid.six select { font-size: var(--t2); padding-right: 24px; } }

/* a.btnlink (0,0,1,1) outranks .small (0,0,1,0), so the size modifier lost. */
a.btnlink.small { padding: 4px 10px; font-size: var(--t1); }
a.btnlink { display: inline-block; text-decoration: none; line-height: 1.5; }

.scorepair { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin: 4px 0 8px; }
.scorepair span { font-size: var(--t3); color: var(--dim); }
.scorepair b { font-size: var(--t3); }
p.simple-more { display: none; color: var(--dim); font-size: var(--t2); line-height: 1.7; text-align: left; margin: 0 auto 16px; max-width: 66ch; }
body.simple p.simple-more { display: block; }
body:not(.simple) .simple-inline { display: none; }
body.simple .simple-inline { display: inline; }
#tradeDetails summary { cursor: pointer; color: var(--accent); font-size: var(--t2); padding: 6px 0; list-style: none; }
#tradeDetails summary::-webkit-details-marker { display: none; }
#tradeDetails summary::before { content: '▸ '; }
#tradeDetails[open] summary::before { content: '▾ '; }

body:not(.simple) .simple-only { display: none; }
body.simple #strategy { display: none; }
body.simple.builder-open #strategy { display: block; }
body.simple.builder-open #ruleSummary { display: none; }
.rule-plain { font-size: var(--t3); line-height: 1.75; margin: 0 0 14px; }
.rule-plain .dim { font-size: var(--t2); }

@media (max-width: 620px) { textarea { min-height: 92px; } }

/* On a phone the scan table was cutting off Strategy/yr and Buy & hold/yr — the two
   columns carrying the least flattering finding. Drop the middle ones instead. */
@media (max-width: 700px) {
  #scanTable .col-trades, #scanTable .col-win { display: none; }
  #scanTable th, #scanTable td { padding: 8px 6px; font-size: var(--t2); }
  /* Keep the two scores comparable rather than stacking them. */
  .scorepair { flex-direction: column; gap: 4px; align-items: center; }
  .scorepair span { display: flex; gap: 6px; align-items: baseline; }
}
.trade-note { margin: 8px 0 12px; line-height: 1.7; }
/* A horizontally scrollable table should look scrollable. */
.table-wrap { position: relative; }
body.simple .mathonly-inline-block { display: none; }
body:not(.simple) .simple-inline-block { display: none; }

.parse-warn.soft { background: rgba(245,181,68,.09); border-color: rgba(245,181,68,.4); color: #f0cf94; }
.parse-warn.soft b { color: var(--amber); }

.strategy-grid.seven { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .strategy-grid.seven { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .strategy-grid.seven { grid-template-columns: 1fr; } }
/* Saved runs must be reachable in the default view, not buried in the hidden builder. */
body.simple #savedRuns { display: block; }

.saved-runs { margin: 0 auto 16px; padding: 14px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

/* Nine settings in three columns fills exactly three rows — no dead cells inside the
   panel — and gives each select enough width to show its own value instead of an
   ellipsis. Labels are aligned to the row baseline so a two-line label cannot drop
   its neighbour's input 18px lower than the rest of the row. */
.strategy-grid.eight { grid-template-columns: repeat(3, 1fr); align-items: end; }
@media (max-width: 1100px) { .strategy-grid.eight { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .strategy-grid.eight { grid-template-columns: 1fr; } }

/* ---------- alert bar ---------- */
.alert-bar {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--green);
  background: color-mix(in srgb, var(--green) 9%, var(--panel));
}
.alert-bar.quiet {
  border-color: var(--line-soft);
  background: var(--panel);
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t3);
}
.alert-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent);
  animation: alert-pulse 2s ease-out infinite;
  flex: none;
}
.alert-dot.quiet { background: var(--line-soft); animation: none; box-shadow: none; }
@keyframes alert-pulse {
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .alert-dot { animation: none; } }
.alert-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.alert-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t3); }
.alert-list .dim { font-size: var(--t2); }
.notify-on { font-size: var(--t2); }
.watch-cell { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t2); color: var(--dim); cursor: pointer; }
.watch-cell input { accent-color: var(--green); }

/* Alert bar refinements: the dot aligns to the first text line rather than floating in
   the gutter between two, and never orphans onto a row of its own. */
.alert-bar.caution { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--panel)); }
.alert-bar.quiet { align-items: flex-start; }
.alert-bar.quiet .alert-dot { margin-top: 5px; }
.alert-head { align-items: flex-start; flex-wrap: nowrap; }
.alert-head .alert-dot { margin-top: 6px; }
.alert-headline { min-width: 0; flex: 1 1 auto; }
.alert-dot.caution { background: var(--amber); box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 70%, transparent); }
.alert-list li { align-items: baseline; }
.alert-list .alert-rule { flex: 0 1 auto; min-width: 0; }
.alert-list .tone-warn .dim { color: var(--amber); }
.alert-foot { margin: 10px 0 0; font-size: var(--t2); color: var(--dim); }
.row-actions { white-space: nowrap; }
.row-actions .watch-cell { margin-right: 10px; }
/* Tap targets: 44px is the floor on a phone. */
@media (max-width: 760px) {
  .alert-list button, .row-actions button, .watch-cell, .ghost.small, .chip,
  .mathswitch, .jump, .seg-btn, .verdict-actions button, .verdict-actions a,
  #tradeDetails summary, details.advanced summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .watch-cell input { width: 22px; height: 22px; }
  /* A tooltip is the only way to learn the app's vocabulary, so it has to be hittable. */
  .tip { display: inline-flex; align-items: center; min-height: 44px; }
  .ghost.small.drop { min-width: 44px; }
}

/* A headline that made money but lost to buy & hold is amber, not green, and says so
   on the same line rather than in grey underneath. */
.verdict-money .warn { color: var(--amber); }
.verdict-money .beat { font-size: .5em; font-weight: 600; color: var(--amber); white-space: nowrap; }

/* what would trigger right now */
.firing-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.firing-row label { color: var(--dim); font-size: var(--t2); }
.firing-row select { min-width: 220px; }
.firing-head { font-size: var(--t3); color: var(--text); margin: 4px 0 12px; }
.firing-none { color: var(--dim); font-size: var(--t3); }
#firingResults .tone-warn .dim { color: var(--amber); }
.err-line { color: var(--red); }


/* The scroll affordance was gated to phones, so on desktop a clipped column looked like
   a rendering bug rather than something you could scroll to. */
.table-wrap { position: relative; }
.table-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--panel));
  opacity: 0;
  transition: opacity .15s;
}
.table-wrap.is-scrollable::after { opacity: 1; }
@media (max-width: 1100px) { .col-bh { display: none; } }
/* The action column stays reachable when the rest scrolls under it. */
.saved-runs td.row-actions, .saved-runs th:last-child {
  position: sticky;
  right: 0;
  background: var(--panel);
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .6);
}


/* One motion language: a short duration for hover and press, a longer one for anything
   that reveals content. Everything else stays still on purpose. */
.stat, .seg-btn, .chip, .ghost, .primary, .preset {
  transition: background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
#results { animation: reveal var(--dur-2) var(--ease); }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .stat, .seg-btn, .chip, .ghost, .primary, .preset { transition: none; }
  #results { animation: none; }
}


/* The strategy cell has to show the exit clause, which is the only thing distinguishing
   two runs of the same rule. Wrapping beats an ellipsis that hides the difference. */
.saved-runs td:first-child { white-space: normal; max-width: 420px; }
.saved-runs th:last-child, .saved-runs td.row-actions { z-index: 1; }


/* A reading column. Every explanatory paragraph in this app was running 110-155
   characters a line; the ceiling is about 90 and the optimum 45-75. */
.preset-intro, .pop-note, .edge-verdict, .scan-intro, .grid-note, .verdict-sub,
#summarySentence, .disclaimer, .alert-foot, .caveat-line, .note, .notes p,
.preset-why, .verdict-card p, .simple-more p, .more-inner p, .hint-block,
.group-blurb, .rule-plain, #rulePlain, .firing-head, .preset-plain {
  max-width: 68ch;
  text-align: left;
}
.preset-intro, .disclaimer, #summarySentence, .verdict-sub { margin-inline: auto; }

/* Headline figures are the only numbers on the page whose digits were free to jitter. */
.stat .v, .verdict-money, .scorepair b { font-variant-numeric: tabular-nums; }

/* min-height without min-width made a 4.4px-wide tap target out of the "t" tooltip. */
.tip { min-width: 0; }
@media (max-width: 760px) {
  .tip { min-width: 44px; justify-content: center; }
  .mini, .exit-fields input, .cond input, .cond select { min-height: 44px; }
}

/* Below 760px a nine-column table is not a table. Each saved run becomes a card, which
   is what it is: one run, a few numbers, two actions. */
@media (max-width: 760px) {
  .saved-runs table, .saved-runs thead, .saved-runs tbody, .saved-runs tr, .saved-runs td { display: block; width: auto; }
  .saved-runs thead { display: none; }
  .saved-runs tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--panel-2);
  }
  .saved-runs td { border: 0; padding: 3px 0; text-align: left; white-space: normal; }
  .saved-runs td::before { content: attr(data-label) ': '; color: var(--dim); font-size: var(--t1); }
  .saved-runs td:first-child::before { content: ''; }
  .saved-runs td.row-actions { position: static; box-shadow: none; padding-top: 10px; }
  .saved-runs td.row-actions::before { content: ''; }
  .saved-runs .table-wrap { overflow: visible; }
}


/* The evidence block is what a reader scans across a row, so it stays pinned to the
   bottom of an equal-height card; the prose above it is clamped instead. */
.preset-why { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.badge.cautionary { color: #f8c56a; }

/* The brand is the document's h1; it should not inherit heading margins. */
h1.brand { margin: 0; font-size: var(--t6); font-weight: 700; }
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  z-index: 20;
}
.skip:focus { left: 12px; }
/* The tooltip text is a real node for assistive tech; the visual bubble stays CSS. */
.tip-desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Reserve the space results will occupy, so landing them does not shove the page down.
   The idea box sits directly under the alert bar, and it was moving while people typed
   into it. Charts hold their aspect ratio; the alert bar holds one height across all
   three of its states. */
#alertBar:not(.hidden) { min-height: 64px; }
.chart-box, .chart { min-height: 240px; }
#priceChart, #equityChart, #histChart, #pathChart { min-height: 220px; display: block; }
.stat-grid { min-height: 96px; }
@media (max-width: 760px) {
  #priceChart, #equityChart, #histChart, #pathChart { min-height: 180px; }
}


/* A checkbox is the target, not just its label — size the control itself on a phone. */
@media (max-width: 760px) {
  .mathswitch input, .watch-cell input { width: 24px; height: 24px; }
}

/* Every chart answers the pointer the same way, so every chart says so the same way. */
.chart-readout {
  margin: 6px 0 0;
  min-height: 18px;
  font-size: var(--t1);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.chart[tabindex] { cursor: crosshair; }
.chart[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* WCAG 2.5.8 is not width-scoped: a 4px-wide target is 4px wide on a desktop too. The
   negative margin keeps the inline text flow while the hit box grows. */
.tip, .jump, a.jump {
  display: inline-block;
  min-height: 24px;
  min-width: 24px;
  padding: 4px 6px;
  margin: -4px -6px;
  text-align: center;
}
.mathswitch input, .watch-cell input, input[type="checkbox"] { width: 24px; height: 24px; }
@media (max-width: 760px) {
  .tip, .jump, a.jump { min-height: 44px; min-width: 44px; padding: 12px 8px; margin: -12px -8px; }
}
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reserve the sections that land after JS. The charts already hold their height; these
   three were the whole of the remaining shift. */
@media (max-width: 760px) {
    }

/* The cross-ticker scan fills in after twelve backtests and was pushing everything below
   it down half a screen. Reserve what it will occupy. Same for the verdict card, whose
   scan summary line arrives with it. */
#scanTable { display: block; }
#scanStatus { min-height: 44px; }
@media (max-width: 760px) {
  }


/* The results section used to be display:none until the first backtest landed, so
   everything below it jumped a full screen when it appeared. It now holds its frame from
   the first paint and fills in place — which is the whole reason QuantConnect ships
   fixed-height report skeletons. */
#results.hidden {
  display: block;
  visibility: hidden;
}
#results.hidden * { visibility: hidden; }

/* Clamped text with no way to read the rest is worse than a taller card. The evidence
   block still pins to the bottom; the prose above it expands on demand. */
.preset-why { -webkit-line-clamp: 6; }
.preset.expanded .preset-why { -webkit-line-clamp: unset; display: block; }
.preset-more {
  background: none;
  border: 0;
  color: var(--accent);
  font-size: var(--t1);
  padding: 6px 0;
  min-height: 24px;
  cursor: pointer;
}

/* The card's title is the button, stretched over the whole card so a mouse can still
   click anywhere — without the card itself being a control that other controls sit
   inside. Interactive children ride above the stretched hit area. */
.preset { position: relative; }
.preset-load {
  background: none;
  border: 0;
  padding: 2px 0;
  min-height: 24px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.preset-load::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.preset-load:focus-visible { outline: none; }
.preset:has(.preset-load:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.preset .tip, .preset .preset-more { position: relative; z-index: 2; }


/* The tooltip trigger is a real button now, sitting beside its label rather than wrapping
   it — a role="note" inside a <label> contributed nothing to the control's name. */
.tip-btn {
  background: none;
  border: 0;
  cursor: help;
  padding: 0 6px;
  min-width: 24px;
  min-height: 24px;
  color: var(--dim);
  vertical-align: middle;
}
.tip-btn::before {
  content: 'i';
  font-style: italic;
  font-weight: 700;
  font-size: var(--t1);
  line-height: 1;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tip-btn:hover::before, .tip-btn:focus-visible::before { color: var(--text); }
@media (max-width: 760px) { .tip-btn { min-width: 44px; min-height: 44px; } }

.incl-fail { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t1); color: var(--dim); cursor: pointer; }
/* The comparison is the true number; it should not be half the size of the flattering
   one it is correcting. */
.verdict-money .beat { font-size: .62em; }
@media (max-width: 760px) { .verdict-money .beat { font-size: .72em; display: block; margin-top: 4px; } }

/* The calendar ledger: every rule tried, and what happened to it. This is a record, not
   a menu — the ones that failed are the point, so they are not hidden. */
.ledger { margin-top: 20px; }
.ledger table { width: 100%; border-collapse: collapse; }
.ledger th { text-align: left; font-size: var(--t1); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ledger td { vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t2); }
.ledger td:first-child { white-space: normal; }
.ledger .rule-name { color: var(--text); font-weight: 600; display: block; }
.ledger .rule-note { color: var(--dim); }
.ledger .why { color: var(--dim); max-width: 52ch; white-space: normal; }
.ledger .mark { font-weight: 700; white-space: nowrap; }
.ledger .mark.kept { color: var(--green); }
.ledger .mark.cut { color: var(--red); }
.ledger .when { color: var(--dim); font-size: var(--t1); white-space: nowrap; }
@media (max-width: 760px) {
  .ledger table, .ledger thead, .ledger tbody, .ledger tr, .ledger td { display: block; width: auto; }
  .ledger thead { display: none; }
  .ledger tr { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; background: var(--panel-2); }
  .ledger td { border: 0; padding: 3px 0; }
  .ledger .why { max-width: none; }
}

/* The calendar card: the survivor is one card, so it should not sit in a 290px column
   with its badge stranded outside; the ledger is prose and numbers, so it reads left. */
#calendarKept .preset-cards { grid-template-columns: minmax(0, 1fr); }
#calendarKept .preset-top { justify-content: flex-start; gap: 10px; }
.preset-cal {
  background: none;
  border: 0;
  padding: 2px 0;
  min-height: 24px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.preset-cal::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.preset:has(.preset-cal:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ledger th, .ledger td { text-align: left; }
/* A reading column should cap the measure, not push the text into the middle of a card
   whose headings are flush left. */
.preset-intro, .disclaimer, #summarySentence, .verdict-sub { margin-inline-start: 0; }
.verdict-sub, #summarySentence { margin-inline: auto; }

.examples-label { margin: 14px 0 0; color: var(--dim); font-size: var(--t2); }
.examples-label + .examples { margin-top: 8px; }


/* The one column that says which row you are reading has to stay put while the numbers
   scroll under it. */
#scanTable th:first-child, #scanTable td:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
}

/* A section heading and its subsections were 15px/650 alike, so the preset taxonomy read
   as nine equal headings. One rank apart. */
.card-head h2 { font-size: var(--t4); font-weight: 700; }
.preset-group h3 { font-size: var(--t1); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }

/* One semibold. 600 and 650 together is not a hierarchy, it is a wobble. */
.stat .v, .preset-name, .card-head h3 { font-weight: 600; }

/* Prose behind a left accent bar should honour that left edge. */
.reconcile, .firing-row, .preset-ev { text-align: left; max-width: 68ch; }


/* The hint beside a card heading is a sentence, so it gets a measure like every other
   sentence. Left unbounded it ran to 133 characters a line. */
.card-head .hint { max-width: 52ch; text-align: right; }
@media (max-width: 900px) { .card-head .hint { text-align: left; } }


/* Any run of secondary prose gets the same measure the rest of the page has. */
.caveat-line, .scan-status, .firing-head { max-width: 68ch; }
/* max-width does nothing to an inline box, so a run of prose in a <span> has to become
   a block before it can hold a measure. */
.dim { max-width: 68ch; }
.verdict-card .dim, .simple-more .dim, #rulePlain .dim { display: inline-block; }
#rulePlain { max-width: 68ch; }

/* Every strategy card ends with the action it offers, rather than relying on the whole
   card being quietly clickable. */
.preset-actions { margin-top: 12px; position: relative; z-index: 2; }
.primary.small, .ghost.small { font-size: var(--t1); padding: 7px 16px; min-height: 32px; }
.preset-actions .primary { width: 100%; }
.ledger td:last-child { white-space: nowrap; }
@media (max-width: 760px) {
  .primary.small, .ghost.small { min-height: 44px; }
  .ledger td:last-child::before { content: ''; }
}

/* The ticker is what a row is about, so it leads and stays legible when the rest scrolls. */
#tradeTable td.tick, #tradeTable th:first-child { text-align: left; }
#tradeTable td.tick b { font-variant-numeric: tabular-nums; }

.trade-scope { margin-bottom: 10px; }
.trade-scope[hidden] { display: none; }

#yearTable td.tick, #yearTable th:first-child { text-align: left; }
#yearTable { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  #yearTable, #yearTable thead, #yearTable tbody, #yearTable tr, #yearTable td { display: block; width: auto; }
  #yearTable thead { display: none; }
  #yearTable tbody tr { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 8px; background: var(--panel-2); }
  #yearTable td { border: 0; padding: 3px 0; text-align: left; }
  #yearTable td::before { content: attr(data-label) ': '; color: var(--dim); font-size: var(--t1); }
  #yearTable td.tick::before { content: ''; }
}

/* The holding period your rule actually uses, so the row that matches your trades is
   not lost among six that do not. */
#horizonTable tr.actual-hold { background: color-mix(in srgb, var(--accent) 10%, transparent); }
#horizonTable tr.actual-hold td:first-child { font-weight: 600; color: var(--text); }
#horizonTable .badge { margin-left: 8px; }

.topnav { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.navlink {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--t2);
  background: var(--panel-2);
}
.navlink:hover { border-color: var(--accent); }
@media (max-width: 760px) { .navlink { min-height: 44px; } }

/* Plain-English entry on the subnet page. Deliberately the same shape as the stock page's
   idea box: the promise of this site is that you type a sentence, and a subnet should not
   be a second-class instrument you can only reach through dropdowns. */
.idea-row { margin-bottom: 18px; }
.idea-label { display: block; color: var(--text); font-size: var(--t2); margin-bottom: 8px; }
.idea-row textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; font: inherit; font-size: var(--t1); line-height: 1.45;
}
.idea-row textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.idea-row textarea::placeholder { color: var(--dim); }
.idea-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }