/* Options tape presentation (Phase 2F). Plain CSS, same contract as
 * theme.css/layout.css: Tailwind arrives from the Play CDN at runtime, so
 * everything load-bearing here must hold when that is blocked.
 *
 * Token plan (Phase 2F Task 0 — final, after the anti-template critique):
 *
 *   Colors (all from the existing palette; no new hues):
 *     --ground/--panel/--panel-2  page, cards, raised rows (unchanged ramp)
 *     --gold      chrome only: active sort, focus ring, pill, view toggle.
 *                 Never on data.
 *     --market /  BUY / SELL text in the Side column and rail — the ONLY
 *     --bear-tx   buy/sell coloring on the page.
 *     --teal      status + the calls-bought bar segment (paired with
 *                 --ink-mute for puts-bought; segments are labeled with
 *                 both totals, order fixed calls-left).
 *     --ink ramp  all data and labels. Tier chips, fill badges and flags
 *                 are neutral ink — no tier is colored as sentiment.
 *
 *   Type roles:
 *     data/tabular  ui-monospace + font-variant-numeric: tabular-nums,
 *                   right-aligned (.num) — mandatory for every numeric col
 *     labels        Inter 10–11px, --ink-dim / --ink-mute
 *     headings      Inter 500–600, 13–14px; column heads stay lowercase
 *
 *   Spacing: 4px base — 4/8/12/16/20. Comfortable rows ~30px tall,
 *   compact ~22px.
 *
 *   Signature element: the tape itself — fixed-slot time column, pinned
 *   Time/Asset/Contract under horizontal scroll, sticky header, buffered
 *   updates (nothing reflows under the pointer), premium weighted by
 *   magnitude only, repeat-flow threads in a neutral 5-step palette.
 *   No gradients, no glows, no sentiment washes.
 */

:root {
  /* zebra: one perceptual step between --ground and --panel */
  --tape-zeb: #151C29;
  --tape-hover: #1E2736;
  /* neutral repeat-thread palette: distinguishable, deliberately outside
     the green/red sentiment axis and the gold chrome accent */
  --rep-0: #8FA3BF;   /* steel */
  --rep-1: #A99A86;   /* taupe */
  --rep-2: #9C8FB5;   /* lavender grey */
  --rep-3: #7FA6A3;   /* cyan grey */
  --rep-4: #A3A080;   /* olive grey */
}

/* ------------------------------------------------------------- table -- */

.tape-scroll {
  overflow: auto;
  max-height: 72vh;           /* the vertical scroll container the sticky
                                 header and pinned columns stick inside */
  overscroll-behavior: contain;
}
.tape-scroll > table {
  min-width: 1080px;
  border-collapse: separate;  /* sticky cells keep their own backgrounds */
  border-spacing: 0;
}

#opt-tape tbody tr.tape-row { background: var(--panel); }
#opt-tape tbody tr.tape-row.zeb { background: var(--tape-zeb); }
#opt-tape tbody tr.tape-row:hover { background: var(--tape-hover); }
#opt-tape tbody tr.tape-detail { background: #0E131C; }
/* every cell inherits its row's paint so pinned cells are opaque */
#opt-tape .tape-scroll td { background: inherit; }
#opt-tape .tape-scroll tbody td {
  border-bottom: 1px solid rgba(37, 48, 68, 0.35);
  padding: 0.42rem 0.625rem 0.42rem 0;   /* comfortable: slightly taller */
}
#opt-tape.density-compact .tape-scroll tbody td {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
/* Compact density hides the secondary tier; everything stays in the
   expanded row. */
#opt-tape.density-compact .sec { display: none; }

/* sticky header */
.tape-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel-2);
  box-shadow: 0 1px 0 var(--line);
}

/* pinned identity columns: Time, Asset, Contract */
.tape-scroll td.pin { position: sticky; z-index: 2; }
.tape-scroll thead th.pin { z-index: 4; }
.tape-scroll .pin-time {
  left: 0;
  width: 8rem; min-width: 8rem; max-width: 8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tape-scroll .pin-asset {
  left: 8rem;
  width: 3.5rem; min-width: 3.5rem; max-width: 3.5rem;
}
.tape-scroll .pin-contract {
  left: 11.5rem;
  width: 10.5rem; min-width: 10.5rem; max-width: 10.5rem;
  white-space: nowrap;
}
/* a hairline seam where the pinned block ends */
.tape-scroll .pin-contract { border-right: 1px solid var(--line); }

/* data/tabular type role: right-aligned tabular numerals */
#opt-tape .num, .rail .num, .sum-card .num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
#opt-tape td.num, #opt-tape th.num { text-align: right; }

/* fixed-width muted relative-age slot beside the fixed-format UTC time */
.tape-age {
  display: inline-block;
  width: 4ch;
  margin-left: 0.35rem;
  color: var(--ink-mute);
  font-size: 0.9em;
  text-align: right;
}

/* fixed-width USDC slot: rows align with or without the badge */
.usdc-slot { display: inline-block; width: 2.6rem; margin-left: 0.3rem; }
.usdc-badge {
  font-size: 9px;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background: var(--line);
  color: var(--ink-dim);
}

/* neutral chips: fill badge and tier chip carry no sentiment color */
.fill-badge, .tier-chip {
  display: inline-block;
  font-size: 0.625rem;
  line-height: 1rem;
  padding: 0 0.375rem;
  border-radius: 0.25rem;
  background: rgba(55, 65, 81, 0.35);
  border: 1px solid rgba(55, 65, 81, 0.8);
  white-space: nowrap;
}
.fill-badge { color: var(--ink-dim); cursor: help; }
.tier-chip { color: #A7B4C6; }

/* premium weight: three fixed display steps at $10K and $100K —
   magnitude only, documented in the glossary's Premium entry */
.prem-lg { font-weight: 600; }
.prem-xl { font-weight: 700; font-size: 1.08em; }

/* BLOCK / RFQ left accent (structural, not sentiment) */
#opt-tape tr.row-accent td:first-child {
  box-shadow: inset 2px 0 0 rgba(239, 159, 39, 0.65);
}

/* repeat-flow thread markers, one neutral color per cluster, cycling */
.rep-mark {
  display: inline-block;
  width: 0.3rem;
  height: 0.95rem;
  border-radius: 2px;
  margin-right: 0.4rem;
  vertical-align: -2px;
}
.rep-c0 { background: var(--rep-0); }
.rep-c1 { background: var(--rep-1); }
.rep-c2 { background: var(--rep-2); }
.rep-c3 { background: var(--rep-3); }
.rep-c4 { background: var(--rep-4); }

/* ---------------------------------------------------------- controls -- */

.tape-pill {
  font-size: 0.6875rem;
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  background: rgba(239, 159, 39, 0.15);
  border: 1px solid rgba(239, 159, 39, 0.45);
  color: var(--gold);
  cursor: pointer;
}
.tape-pill[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .tape-pill { animation: pill-in 0.18s ease-out; }
  @keyframes pill-in {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: none; }
  }
}

.live-btn, .density-btn {
  font-size: 0.6875rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.375rem;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  background: transparent;
  cursor: pointer;
}
.live-btn .live-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ink-mute);
  margin-right: 0.3rem;
  vertical-align: 1px;
}
.live-btn[aria-pressed="true"] .live-dot { background: var(--teal); }
.live-btn[aria-pressed="true"] { color: var(--ink); }
.density-ctl { display: inline-flex; gap: 0.25rem; }
.density-btn[aria-pressed="true"] {
  background: rgba(239, 159, 39, 0.12);
  border-color: rgba(239, 159, 39, 0.4);
  color: var(--gold);
}

#tape-viewline { font-size: 0.6875rem; color: var(--ink-dim); }
.view-toggle {
  background: none;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}

/* ----------------------------------------------------------- summary -- */

.sum-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.sum-layout > * { min-width: 0; }
@media (min-width: 1024px) {
  /* rail beside the summary; below the breakpoint it stacks beneath */
  .sum-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

.sum-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  align-items: start;
}
.sum-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: pointer;
}
.sum-card:hover { border-color: var(--brand); }
.sum-card-wide { cursor: default; }
.sum-head { display: flex; align-items: baseline; gap: 0.5rem; }
.sum-asset { font-weight: 600; color: var(--ink); font-size: 0.8125rem; }
.sum-n { color: var(--ink-mute); font-size: 0.6875rem; }
.sum-dvol {
  margin-left: auto;
  color: var(--ink-dim);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sum-buys {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--ink-dim);
}
.sum-buys .num { color: var(--ink); }
.sum-count { color: var(--ink-mute); }
/* the split bar: a proportional rendering of two served numbers —
   calls bought (teal, always left) vs puts bought (slate). Neutral
   pairing on purpose: both segments are BUYS; green-vs-red here would
   paint C/P as sentiment. */
.sum-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(55, 65, 81, 0.4);
  gap: 2px;
}
.sum-bar-c { background: var(--teal); border-radius: 3px 0 0 3px; }
.sum-bar-p { background: var(--ink-mute); border-radius: 0 3px 3px 0; }
.sum-sold { color: var(--ink-mute); font-size: 0.657rem; }
.sum-ratio { font-size: 0.6875rem; color: var(--ink-dim); }
.sum-extra {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.6875rem;
}
.strike-chip {
  display: inline-block;
  background: rgba(55, 65, 81, 0.35);
  border: 1px solid rgba(55, 65, 81, 0.8);
  border-radius: 0.3rem;
  padding: 0 0.35rem;
  margin: 0 0.25rem 0.15rem 0;
  font-size: 0.657rem;
  color: var(--ink);
  white-space: nowrap;
}

/* -------------------------------------------------------------- rail -- */

.rail {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.6rem 0.7rem;
}
.rail h4 { color: var(--ink-dim); font-weight: 500; font-size: 0.6875rem; }
.rail-item {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(37, 48, 68, 0.5);
  color: var(--ink);
  font-size: 0.6875rem;
  text-align: left;
  cursor: pointer;
}
.rail-item .num { margin-left: auto; }
.rail-detail {
  padding: 0.4rem 0.2rem;
  font-size: 0.657rem;
  border-bottom: 1px solid rgba(37, 48, 68, 0.5);
}

/* ------------------------------------- overview tape strip (Phase 2G) -- */

/* The dashboard's tape-positioning strip (overview-tape-strip.js) reuses
   the summary and rail vocabulary above — .sum-bar, .sum-n, .sum-dvol,
   .tier-chip, .rail, .rail-item — and adds only its own row layout.
   Flex-wrap, never a fixed grid: a row must fold on a phone rather than
   push the document sideways (the layout suite asserts zero page-level
   horizontal overflow at 390px). */
.strip-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.strip-layout > * { min-width: 0; }
@media (min-width: 1024px) {
  .strip-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}
.strip-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.35rem 0.6rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  color: var(--ink);
  font-size: 0.6875rem;
  text-decoration: none;
}
.strip-row:hover { border-color: var(--brand); }
/* the bar flexes between its two labelled totals */
.strip-row .sum-bar { flex: 1 1 6rem; min-width: 5rem; }
.strip-asset { font-weight: 600; font-size: 0.8125rem; min-width: 2.6rem; }
.strip-buys { color: var(--ink-dim); white-space: nowrap; }
.strip-buys .num { color: var(--ink); }
.strip-ratio { color: var(--ink-dim); white-space: nowrap; }
.strip-mute { color: var(--ink-mute); font-size: 0.6875rem; }
a.strip-print { text-decoration: none; }
.strip-row .num, .strip-print .num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.strip-row:focus-visible, .strip-print:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* --------------------------------------------- focus + reduced motion -- */

#opt-tape th:focus-visible,
#opt-tape button:focus-visible,
.sum-card:focus-visible,
.rail-item:focus-visible,
.view-toggle:focus-visible,
.tape-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .tape-pill, .tape-row, .sum-card, .rail-item, .live-btn, .density-btn {
    animation: none !important;
    transition: none !important;
  }
}