/* One stylesheet, no build step. The reader asked for a simple interface and
   the deploy path is "copy three files to S3" — a bundler here would buy
   nothing and add a way for the site to break. */
:root {
  --bg: #f5f7fb; --panel: #fff; --panel-2: #eef1f8; --line: #e1e6f0;
  --ink: #161a25; --muted: #667085; --accent: #4c6ef5; --accent-ink: #fff;
  --green: #0f8a5c; --red: #dc2626; --amber: #b45309;
  --radius: 12px; --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }

/* The `hidden` attribute is only `display: none` from the UA stylesheet, so ANY
   author rule that sets `display` beats it. `.gate` is `display: grid` and
   `.badge` is `display: inline-block`, which meant the sign-in panel rendered
   permanently on top of the dashboard and the approvals badge always showed a
   zero. This one line is the fix, and it has to stay above every component
   rule: an element the JS calls hidden must actually be hidden, whatever class
   it also carries. */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 620; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.error { color: var(--red); min-height: 1.2em; margin: .5rem 0 0; }

/* ── disclaimer ───────────────────────────────────────────────────────── */
/* Every trading app shows one of these. Signed-in only — the sign-in/sign-up
   gate stays clean. `.topbar` (this and `header` together) is the sticky
   element, not the two individually: the banner's own height varies with
   how many lines the text wraps to at a given width, so a fixed offset for
   `header` to stick below would either overlap it at some widths or leave a
   gap at others. Sticking the pair as one unit means whatever height the
   banner actually renders at, `header` sits directly under it, always.
   Full body-text size (1rem = 15px here, the same as the rest of the page),
   not fine print: a disclaimer nobody can comfortably read is not doing its
   job. */
.topbar { position: sticky; top: 0; z-index: 10; }
.disclaimer { display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .4rem 1rem; font-size: 1rem; font-weight: 500; line-height: 1.4;
  text-align: center; background: #fff3cd; color: #664d03;
  border-bottom: 1px solid #f0e0a8; }

/* ── gate ─────────────────────────────────────────────────────────────── */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.gate-card { width: min(360px, 100%); }
.gate-card h1 { font-size: 1.4rem; }
.gate-card h1 span { color: var(--accent); }

/* ── chrome ───────────────────────────────────────────────────────────── */
header { display: flex; gap: .75rem;
  align-items: center; flex-wrap: wrap; padding: .7rem 1rem;
  background: rgba(245,247,251,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; }
.brand span { color: var(--accent); }
.session { font-size: .78rem; padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); }
.session.open { color: var(--green); border-color: rgba(15,138,92,.4); }
.session.ext { color: var(--amber); border-color: rgba(180,83,9,.4); }
nav { display: flex; gap: .25rem; flex: 1 1 100%; overflow-x: auto;
  scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav button { background: none; border: 0; color: var(--muted); padding: .45rem .7rem;
  border-radius: 8px; font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; }
nav button.active { background: var(--panel-2); color: var(--ink); }
.badge { display: inline-block; min-width: 1.35em; padding: 0 .3em; margin-left: .3em;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: .72rem; text-align: center; }
main { padding: 1rem; max-width: 900px; margin: 0 auto; }
.tab { display: none; }
.tab.active { display: block; }
.tabhead { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.stack { display: grid; gap: .75rem; }

/* ── cards ────────────────────────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; box-shadow: 0 1px 2px rgba(22,26,37,.04); }
.card.live { border-color: rgba(220,38,38,.45); }
/* An exit card is a different decision from an entry and has to be one glance
   apart from it in a list that holds both. Green, because it is a target. */
.card.exit { border-color: rgba(22,163,74,.5); }
/* The card a notification or an emailed button sent the reader to. A ring
   rather than a colour, so it reads on top of the live and exit borders and
   does not collide with the red/green those already carry. */
.card.focused { box-shadow: 0 0 0 3px rgba(37,99,235,.35); }
@media (prefers-reduced-motion: no-preference) {
  .card.focused { animation: focus-in .45s ease-out; }
  @keyframes focus-in { from { box-shadow: 0 0 0 10px rgba(37,99,235,0); } }
}
.card h3 { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.sym { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; }
.pill { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .15rem .45rem; border-radius: 6px; background: var(--panel-2);
  color: var(--muted); border: 1px solid var(--line); }
.pill.live { color: var(--red); border-color: rgba(220,38,38,.4); }
.pill.paper { color: var(--accent); border-color: rgba(76,110,245,.4); }
.pill.ok { color: var(--green); border-color: rgba(15,138,92,.4); }
.pill.sim { color: var(--amber); border-color: rgba(180,83,9,.4); }
.pill.warn { color: var(--amber); border-color: rgba(180,83,9,.4); }
.pill.bad { color: var(--red); border-color: rgba(220,38,38,.4); }

/* The four levels the plan named. A grid so entry/stop/T1/T2 always land in
   the same place — the reader is comparing them across cards, not reading
   prose. */
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem;
  margin: .75rem 0; font-family: var(--mono); font-size: .85rem; }
.levels div { background: var(--panel-2); border-radius: 8px; padding: .4rem .5rem;
  border-left: 3px solid transparent; }
.levels span { display: block; font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
/* A tinted background + left border on the whole tile, not just bold text on
   gray, so stop-vs-target reads at a glance instead of needing a close look. */
.levels .stop { background: rgba(220,38,38,.09); border-left-color: var(--red); }
.levels .stop b { color: var(--red); }
.levels .t1, .levels .t2 { background: rgba(15,138,92,.09); border-left-color: var(--green); }
.levels .t1 b, .levels .t2 b { color: var(--green); }
.levels .entry { background: rgba(180,83,9,.09); border-left-color: var(--amber); }
.levels .entry b { color: var(--amber); }

.prose { display: grid; gap: .3rem; margin: .6rem 0; font-size: .9rem; }
.prose p { margin: 0; }
.prose .why { color: var(--muted); }

/* The exact order about to be sent. Boxed and set apart from the prose above
   it, because it is the only part of the card that is a commitment. */
.orderline { background: var(--panel-2); border-radius: 8px; padding: .5rem .6rem;
  margin: .5rem 0 .35rem; }
.orderline p { margin: 0; font-size: .88rem; }
.orderline p + p { margin-top: .25rem; font-size: .8rem; }
.src { font-size: .78rem; margin: .15rem 0; }

.sizerow { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap;
  margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.sizerow label { flex: 1 1 100px; }
.actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }

label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .5rem; }
input, select { width: 100%; margin-top: .25rem; padding: .5rem .6rem;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: .9rem; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button.primary { background: var(--accent); color: var(--accent-ink); border: 0;
  padding: .55rem 1rem; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
button.danger { background: var(--red); color: #fff; border: 0; padding: .55rem 1rem;
  border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
button.ghost { background: none; color: var(--ink); border: 1px solid var(--line);
  padding: .5rem .9rem; border-radius: 8px; font: inherit; cursor: pointer; }
button.small { padding: .3rem .6rem; font-size: .82rem; }
button:disabled { opacity: .5; cursor: not-allowed; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.form-grid .full { grid-column: 1 / -1; }
#trade-quote { display: block; margin-top: .3rem; font-size: .8rem; }

/* One example call, or a freshly-minted secret — the reader copies either
   straight out of this box. */
.codeblock { display: block; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem .7rem; margin: .5rem 0; font-family: var(--mono);
  font-size: .8rem; white-space: pre-wrap; word-break: break-all; }

/* The review step between "Preview order" and the real submit — same voice as
   an approve card's orderline, boxed the same way. */
#trade-review .orderline { margin-top: 0; }

table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { text-align: right; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 500; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; }
td.num { font-family: var(--mono); }
.pos { color: var(--green); } .neg { color: var(--red); }
.scroll { overflow-x: auto; }

.empty { color: var(--muted); text-align: center; padding: 2rem 1rem;
  border: 1px dashed var(--line); border-radius: var(--radius); }

/* A collapsed section still has to look like a normal card, not a bare
   disclosure triangle — reuse the card chrome, just make the summary line the
   clickable header. Native <details>/<summary> on purpose: no JS, no ARIA to
   get wrong, and the browser already knows how to persist open/closed. */
details.card { padding: 0; }
details.card summary { padding: 1rem; cursor: pointer; font-weight: 620;
  letter-spacing: -.01em; list-style: none; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::before { content: '▸'; display: inline-block;
  margin-right: .45rem; color: var(--muted); transition: transform .15s ease; }
details.card[open] summary::before { transform: rotate(90deg); }
details.card > *:not(summary) { padding: 0 1rem 1rem; }
details.card table, details.card .tiles, details.card .reasons { margin-top: 0; }

.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  padding: .6rem 1rem; border-radius: 10px; z-index: 50; max-width: 90vw;
  box-shadow: 0 8px 30px rgba(22,26,37,.14); }
.toast.bad { border-color: var(--red); }

@media (max-width: 520px) {
  .levels { grid-template-columns: repeat(2, 1fr); }
}

/* ── performance ──────────────────────────────────────────────────────────
 * A note on the green and red used for profit and loss: they are ΔE 8.9 apart
 * under deuteranopia — clear of the 8.0 CVD-safety target, but still not far
 * enough that a red-green colourblind reader should be trusted to tell them
 * apart at a glance. (Measured, not guessed: the palette validator reports
 * `worst adjacent #0f8a5c↔#dc2626 ΔE 8.9 (deutan)`.) So colour is NEVER the
 * only thing carrying direction here. Every P&L figure also carries a sign and
 * a ▲/▼ glyph, and the equity curve is one accent-blue series against an
 * explicit zero line rather than a red/green split. The colours reinforce; the
 * glyph and the sign inform.
 */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--muted); font: inherit;
  font-size: .85rem; padding: .35rem .8rem; cursor: pointer; }
.seg button.active { background: var(--panel-2); color: var(--ink); }
/* The Live account sub-tabs (Alpaca, and one per imported brokerage) — a size
   step down and left-indented so the row reads as nested under Live rather
   than a second, equal-weight filter row. */
.seg.sub { align-self: flex-start; margin-left: .5rem; }
.seg.sub button { font-size: .78rem; padding: .3rem .65rem; }

.hero { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.hero .figure { font-size: 2.1rem; font-weight: 680; letter-spacing: -.02em;
  font-family: var(--mono); }
.hero .caption { color: var(--muted); font-size: .85rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .5rem; margin-top: .9rem; }
.tile { background: var(--panel-2); border-radius: 10px; padding: .6rem .7rem; }
.tile span { display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: .2rem; }
.tile b { font-family: var(--mono); font-size: 1rem; font-weight: 600; }

/* Realized, split by lane and ranked biggest-first — see the note on
   categoryBreakdown() in app.js. A bar's length is share of the largest
   |realized P&L| among lanes with a trade in the window; colour repeats the
   sign already on the number beside it, it never carries the sign alone. */
.breakdown { display: grid; gap: .4rem; margin-top: .9rem; padding-top: .85rem;
  border-top: 1px solid var(--line); }
.brow { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center;
  gap: .6rem; font-size: .82rem; }
.blabel { color: var(--muted); text-transform: capitalize; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.bbar-track { background: var(--panel-2); border-radius: 999px; height: 8px; overflow: hidden; }
.bbar { display: block; height: 100%; border-radius: 999px; }
.bbar.pos { background: var(--green); }
.bbar.neg { background: var(--red); }
.bval { min-width: 4.6rem; text-align: right; font-family: var(--mono); }

@media (max-width: 420px) {
  .brow { grid-template-columns: 5rem 1fr auto; }
}

/* The chart. Recessive axes, 2px line, no fill under the curve — the fill
   would read as area-under-the-curve magnitude, which cumulative P&L is not. */
.chart { position: relative; margin-top: .5rem; }
.chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.chart .series { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; }
.chart .dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.chart .tick { fill: var(--muted); font-size: 10px; font-family: var(--mono); }
.chart-tip { position: absolute; pointer-events: none; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: .4rem .55rem;
  font-size: .78rem; white-space: nowrap; transform: translate(-50%, -115%);
  box-shadow: 0 6px 20px rgba(22,26,37,.12); }

/* ── alert rows ───────────────────────────────────────────────────────────
 * One block per symbol, laid out the way app2's push body reads: the line it
 * wrote, then the levels, then context, then the catalyst. */
.arow { padding: .7rem 0; border-top: 1px solid var(--line); }
.arow:first-of-type { border-top: 0; padding-top: .2rem; }
.ahead { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.aline { margin: .4rem 0 0; font-size: .87rem; }
.actx { margin: .3rem 0 0; font-size: .83rem; color: var(--ink);
  font-family: var(--mono); }
.actx.why { font-family: inherit; }
.actx.skip { font-family: inherit; color: var(--amber); }
/* The pattern-recall line — a fact about the reader's own past decisions on
   this setup, never a prediction. Accent blue so it reads as a distinct
   signal from the amber "why this was skipped" line and the plain "why it's
   moving" line, without borrowing green/red's win/lose meaning. */
.actx.recall { font-family: inherit; color: var(--accent); }

.reasons { display: grid; gap: .35rem; margin-top: .5rem; }
.reason { display: flex; gap: .6rem; align-items: baseline; font-size: .87rem; }
.reason b { font-family: var(--mono); min-width: 2.2rem; text-align: right; }
.reason span { color: var(--muted); }