/* Options dashboard styles (owner, 2026-10-24; see ../DESIGN.md).
   Mobile first: the owner opens this on a phone, so the chain table scrolls
   sideways inside its own box with the strike column pinned. Nothing is loaded
   from outside this file (no fonts, no images): the CSP allows only 'self'. */

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1f2430;
  --line: #333a48;
  --text: #e9ecf1;
  --muted: #a7b0bf;
  --pos: #39d98a;          /* 7.4:1 on --bg */
  --neg: #ff8080;          /* 6.5:1 on --bg */
  --accent: #4da3ff;
  --atm: #2a3344;
  --itm: #202634;
  --focus: #ffd166;
  --tap: 44px;             /* minimum touch target */
  --flash: 0.9s;           /* keep in step with FLASH_MS in app.js */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0.5rem;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

h1 { font-size: 1.35rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.1rem 0 0.4rem; }

/* Colour is never the only signal; the text always carries a + or − too. */
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.warn { color: var(--focus); }
.strong { font-weight: 600; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.5rem 0.75rem;
}
.skip-link:focus { left: 0.5rem; z-index: 10; }

/* ── Controls ─────────────────────────────────────────────────────────────── */

button, input, select {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
}

button {
  min-height: 36px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #2a3140; }
button:disabled, input:disabled { opacity: 0.55; cursor: not-allowed; }

button.primary {
  background: #1d4ed8;
  border-color: #3b6ef5;
  color: #ffffff;         /* 6.0:1 */
  font-weight: 600;
  min-height: var(--tap);
}
button.primary:hover:not(:disabled) { background: #2a5cf0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.field { margin: 0 0 0.7rem; }
.field > label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.2rem; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select { width: 100%; }
.field.two { display: flex; gap: 0.6rem; }
.field.two > div { flex: 1 1 0; }
.field.disabled > label { opacity: 0.55; }
label.check { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; font-size: 0.95rem; color: var(--text); }

fieldset.field { border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.6rem; }
fieldset.field legend { font-size: 0.85rem; color: var(--muted); padding: 0 0.25rem; }

.hint { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--muted); }

.msg { margin: 0.4rem 0; min-height: 1.2em; font-size: 0.9rem; color: var(--muted); }
.msg.error { color: var(--neg); font-weight: 600; }
.msg.ok { color: var(--pos); }

.actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.8rem; }

/* ── Sign-in ──────────────────────────────────────────────────────────────── */

.signin { max-width: 22rem; margin: 15vh auto 0; }
.signin-form button { width: 100%; }

/* ── Top bar ──────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.topbar p { margin: 0; }
.topbar .status-item { font-size: 0.85rem; color: var(--muted); }
.topbar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
button.small { font-size: 0.8rem; padding: 0.3rem 0.5rem; }

.badge {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
/* Before the first status answer, and if the server ever sends a mode this
   page does not know: neutral, so it can never be mistaken for TEST. */
.badge-unknown { background: var(--panel-2); color: var(--muted); }
.badge-test { background: #f0b429; color: #1a1200; border-color: #ffd166; }   /* 11:1 */
.badge-live { background: #d7263d; color: #ffffff; border-color: #ff6b7f; }   /* 5.0:1 */

/* The whole page picks up a thin frame, so TEST and LIVE are hard to mix up. */
.theme-test .topbar { border-color: #f0b429; }
.theme-live .topbar { border-color: #ff6b7f; }
.theme-live button.primary { background: #b11c30; border-color: #ff6b7f; }
.theme-live button.primary:hover:not(:disabled) { background: #c92239; }

.stream { font-weight: 600; }
.stream-up { color: var(--pos); }
.stream-down { color: var(--focus); }

/* ── Selectors and spot ───────────────────────────────────────────────────── */

.selectors {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.selectors .field { margin: 0; min-width: 9rem; flex: 1 1 9rem; }
.spot { margin: 0; flex: 1 1 100%; font-size: 1rem; }
.spot-ltp { font-weight: 700; font-size: 1.15rem; margin: 0 0.4rem; }
.spot-change { font-weight: 600; }

/* ── Chain table ──────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  -webkit-overflow-scrolling: touch;
}

table.chain {
  border-collapse: separate;      /* separate keeps sticky cell borders visible */
  border-spacing: 0;
  width: 100%;
  min-width: 420px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

table.chain th, table.chain td {
  padding: 0.3rem 0.35rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.chain thead th {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
table.chain .num { text-align: right; }
table.chain td.act { text-align: center; padding: 0.2rem 0.3rem; }

/* The strike column stays on screen while the sides scroll under it. */
table.chain .strike, table.chain .strike-head {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: center;
  background: var(--panel-2);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-weight: 700;
}
table.chain .strike-head { z-index: 4; }

.atm-tag:not(:empty) {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  color: #1a1200;
  background: var(--focus);
  border-radius: 3px;
  margin-top: 0.1rem;
}

tr.atm-row td { background: var(--atm); }
tr.atm-row .strike { background: #3a4661; }
td.itm { background: var(--itm); }
tr.atm-row td.itm { background: #313b4d; }

/* A changed LTP gets an arrow (▲/▼) as well as the colour flash, and the
   arrow stays readable when the animation is switched off. */
td.ltp .arrow { display: inline-block; width: 0.8em; font-size: 0.7rem; }
td.ltp.flash-up { animation: flash-up var(--flash, 0.9s) ease-out; }
td.ltp.flash-down { animation: flash-down var(--flash, 0.9s) ease-out; }
td.ltp.flash-up .arrow, td.ltp.flash-up { color: var(--pos); }
td.ltp.flash-down .arrow, td.ltp.flash-down { color: var(--neg); }

@keyframes flash-up {
  from { background: rgba(57, 217, 138, 0.35); }
  to { background: transparent; }
}
@keyframes flash-down {
  from { background: rgba(255, 128, 128, 0.35); }
  to { background: transparent; }
}

button.buy {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: #14532d;
  border-color: #2fbf71;
  color: #e9ffef;
}
button.buy:hover:not(:disabled) { background: #1b6b3a; }
.theme-live button.buy { background: #5b1420; border-color: #ff6b7f; color: #ffecef; }
.theme-live button.buy:hover:not(:disabled) { background: #761a29; }

/* ── Trades ───────────────────────────────────────────────────────────────── */

ul.trades { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

li.trade {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 0.6rem;
}
li.trade.done { border-left-color: var(--muted); opacity: 0.85; }
li.trade.attention { border-left-color: var(--focus); }
li.trade.flash-new { animation: flash-new 2s ease-out; }

@keyframes flash-new {
  from { background: #27354a; }
  to { background: var(--panel); }
}

.trade-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.trade-symbol { font-weight: 700; }
.trade-state {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

dl.trade-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.6rem;
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
}
dl.trade-grid dt { color: var(--muted); }
dl.trade-grid dd { margin: 0; font-variant-numeric: tabular-nums; }

.trade-note { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }

button.exit {
  min-height: var(--tap);
  min-width: 7rem;
  font-weight: 600;
  background: #4a1620;
  border-color: #ff6b7f;
  color: #ffecef;
}
button.exit:hover:not(:disabled) { background: #611d2a; }
button.exit.confirm { background: #d7263d; color: #ffffff; }

/* ── Order ticket ─────────────────────────────────────────────────────────── */

dialog#ticket {
  width: min(26rem, calc(100vw - 1rem));
  max-height: 92vh;
  overflow-y: auto;
  padding: 0.9rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
}
dialog#ticket::backdrop { background: rgba(0, 0, 0, 0.6); }
.theme-live dialog#ticket { border-color: #ff6b7f; }

dialog#ticket h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.contract { margin: 0 0 0.2rem; font-weight: 700; }
.ticket-prices { margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.stepper { display: flex; gap: 0.4rem; align-items: center; }
.stepper button { min-width: var(--tap); min-height: var(--tap); font-size: 1.1rem; font-weight: 700; }
.stepper input { width: 4.5rem; text-align: center; font-weight: 700; }

dl.computed {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  margin: 0.2rem 0 0;
  padding: 0.5rem 0.6rem;
  background: var(--panel-2);
  border-radius: 6px;
  font-size: 0.9rem;
}
dl.computed dt { color: var(--muted); }
dl.computed dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Wider screens ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* Phones: OI, LTP and BUY on both sides plus the strike, all on screen.
     Chg% is the column a phone can spare; it shows on tablets and up. */
  table.chain { min-width: 0; }
  table.chain .pct { display: none; }
  table.chain th, table.chain td { padding: 0.3rem 0.2rem; }
  table.chain td.act { padding: 0.2rem 0.15rem; }
}

@media (min-width: 720px) {
  body { padding: 1rem 1.25rem; max-width: 70rem; margin: 0 auto; }
  table.chain { font-size: 0.9rem; }
  ul.trades { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
}

/* ── Reduced motion: keep the arrow and the sign, drop the animation ──────── */

@media (prefers-reduced-motion: reduce) {
  td.ltp.flash-up, td.ltp.flash-down, li.trade.flash-new { animation: none; }
  * { transition: none !important; }
}