/* =========================================================================
   simple.css — the landing page only. app.css supplies every token, table,
   button and warning box; nothing here overrides the explorer.
   ========================================================================= */

.step { margin-bottom: 24px; }

.step-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.step-n {
  width: 22px; height: 22px; flex: none;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
}
.step-t { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.step-hint { font-size: 12px; color: var(--ink-muted); margin-left: auto; }
@media (max-width: 620px) { .step-hint { display: none; } }

/* ---- 1. the stock, stated as a sentence ---- */

.testing-on {
  background: var(--brand-light);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.testing-on .lead {
  font-size: 12px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand); margin-bottom: 2px;
}
.testing-on .name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.testing-on .meta { font-size: 12.5px; color: var(--ink-secondary); margin-top: 4px; }

.picker-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}
@media (max-width: 620px) { .picker-row { grid-template-columns: 1fr; } }
.picker-row label {
  display: block;
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); margin-bottom: 5px;
}

/* ---- 2. strategy tabs ----
   A checkbox selects; clicking the tab opens the details. Two obvious
   targets — one tap area cannot mean select, deselect and open at once. */

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 9px 14px 9px 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}
.tab:hover { border-color: var(--brand); background: var(--brand-light); }
.tab.on { border-color: var(--brand); background: var(--brand-light); }
.tab.open { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22); border-color: var(--brand); }

/* The visible box is 17px, but the padding gives it a ~40px hit area so a
   thumb aiming at the box does not open the panel by mistake. */
.tab .box {
  width: 17px; height: 17px; flex: none;
  border: 2px solid var(--border-strong);
  border-radius: 5px;
  display: grid; place-items: center;
  font-size: 11px; color: #fff; background: #fff;
  box-sizing: content-box;
  padding: 10px;
  margin: -10px -4px -10px -10px;
  background-clip: content-box;
}
.tab.on .box { background: var(--brand); border-color: var(--brand); background-clip: content-box; }
.tab .box:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.tab .state {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--surface-alt); color: var(--ink-muted);
}
.tab .state.changed {
  background: var(--warn-bg); color: #92400e;
  border: 1px solid var(--warn-border);
}

/* ---- the detail panel ---- */

.expand {
  border: 1px solid var(--brand);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 12px;
  box-shadow: var(--shadow-md);
}
.expand-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.expand h4 { font-size: 15px; letter-spacing: -0.01em; }
.expand .close {
  margin-left: auto; border: none;
  background: var(--surface-alt);
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; color: var(--ink-muted); font-size: 15px; line-height: 1;
}
.expand .close:hover { background: var(--loss-bg); color: var(--loss-ink); }
.expand > p { font-size: 13px; color: var(--ink-secondary); line-height: 1.5; margin-bottom: 10px; }

.settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.settings label {
  display: block;
  font-size: 10.5px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-muted); margin-bottom: 4px;
}
.settings input, .settings select {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px; background: var(--surface);
}
.settings .fld.dirty input,
.settings .fld.dirty select { border-color: var(--warn); background: var(--warn-bg); }

.def-line {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
  font-size: 12px; color: var(--ink-muted);
  font-family: var(--font-mono);
}
.reset {
  font-size: 11px; font-family: var(--font-mono);
  color: var(--brand); background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 4px 10px; cursor: pointer;
}
.reset:hover { background: var(--brand-light); }

/* ---- run ---- */

.runbar {
  position: sticky; bottom: 12px;
  width: 100%;
  background: var(--ink); color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 15px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  text-align: left;
}
.runbar small { display: block; font-weight: 400; font-size: 11.5px; opacity: 0.72; margin-top: 2px; }
.runbar:disabled { opacity: 0.45; cursor: default; }

/* ---- results ---- */

.period-strip {
  font-size: 12.5px; color: var(--ink-secondary);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 12px; margin-bottom: 12px;
  line-height: 1.5;
}
.period-strip b { color: var(--ink); }

/* Buy-and-hold is a row IN the table, not a footnote under it. */
.pattern-table tr.bench td {
  background: var(--surface-alt);
  font-weight: 700;
  border-top: 2px solid var(--border-strong);
}

.btn-pill.mini { padding: 3px 10px; font-size: 11px; box-shadow: none; }

.simple-footer {
  border-top: 1px solid var(--border);
  padding-top: 16px; margin-top: 28px;
}
.simple-footer p {
  font-size: 12.5px; color: var(--ink-muted);
  line-height: 1.55; margin-bottom: 8px;
}
.simple-footer b { color: var(--ink-secondary); }

/* ---- optional volume filter ---- */

.vol-filter {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--surface);
}
.vol-filter input[type=checkbox] { margin-top: 2px; width: 16px; height: 16px; flex: none; }
.vol-filter b { display: block; font-size: 13px; }
.vol-filter small {
  display: block; font-size: 11.5px; color: var(--ink-muted);
  line-height: 1.5; margin-top: 2px;
}
.vol-filter input[type=number] {
  width: 52px; padding: 1px 5px; font-size: 11.5px;
  border: 1px solid var(--border-strong); border-radius: 5px;
  font-family: var(--font-mono);
}

/* ---- the trade log ("details") ----
   Lives inside a full-width cell in the results table, so it must not inherit
   that table's own padding or borders. */

.tl-panel {
  margin-top: 12px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  box-shadow: var(--shadow-md);
}

.tl { padding: 12px 14px 14px; }

/* Which row the open log belongs to. */
.pattern-table tr.row-open td { background: var(--brand-light); }

.tl-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12.5px; color: var(--ink-secondary);
  margin-bottom: 10px;
}
.tl-head b { color: var(--ink); }
.tl-chart { margin-left: auto; text-decoration: none; }

/* The log is wide by design — it scrolls inside itself rather than pushing
   the page sideways. */
.tl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  max-height: 460px; overflow-y: auto;
}

.tl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tl-table th, .tl-table td { padding: 6px 9px; white-space: nowrap; text-align: left; }
.tl-table th.num, .tl-table td.num { text-align: right; }

.tl-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.tl-table tbody tr { border-bottom: 1px solid var(--border); }
.tl-table tbody tr:last-child { border-bottom: none; }

/* A losing trade is tinted, not just coloured in one cell — the run of losses
   is the thing worth seeing at a glance. */
.tl-win  td { background: rgba(16, 185, 129, 0.045); }
.tl-loss td { background: rgba(239, 68, 68, 0.05); }

.tl-dim { color: var(--ink-muted); }

.tl-note {
  font-size: 11.5px; color: var(--ink-muted);
  line-height: 1.55; margin-top: 9px;
}
.tl-note b { color: var(--ink-secondary); }

/* ---- select all / clear ---- */

.bulk-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.bulk {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.12s ease;
}
.bulk:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.bulk:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- a trade, expanded in place ---- */

.tl-table tr[data-trade] { cursor: pointer; }
.tl-table tr[data-trade]:hover > td { background: var(--brand-light); }
.tl-table tr.td-open > td {
  background: var(--brand-light);
  box-shadow: inset 0 -1px 0 var(--brand);
}

.td-row > td { padding: 0 !important; background: var(--surface-alt); }

.td-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  /* The row lives inside a table that scrolls sideways, so without this the
     panel is as wide as thirteen columns and "The money" sits off-screen on a
     phone. Sticky keeps it in view while the table scrolls under it. */
  position: sticky;
  left: 0;
  max-width: 100vw;
  box-sizing: border-box;
}

.td-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 13px;
}
.td-box h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.td-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--border);
}
.td-line:last-child { border-bottom: none; }
.td-line span { color: var(--ink-muted); white-space: nowrap; }
.td-line b {
  font-family: var(--font-mono);
  color: var(--ink);
  text-align: right;
  font-weight: 600;
}
.td-line b.up { color: var(--profit); }
.td-line b.down { color: var(--loss); }

.td-note {
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.45;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}