/* Implied-vs-Realised card — additive .ivrv-* selectors only.
 *
 * This card was designed FOR the option chain board and moved to its own page on 2026-08-28. That
 * board is the LIGHT theme (cream/green gradient body, near-black --ink), and the card is styled
 * for that surface from the start rather than inheriting a dark-panel palette and then being read
 * as a smear over a bright board. Opaque fill, --ink text, --line border.
 *
 * The page layer below reproduces the board's palette AND its font, because the card inherited
 * both and neither exists on a standalone page.
 *
 * Nothing in this file — comments included — may name a removed card. OptionChainAssetsTest
 * asserts on the SERVED bundle, and comments are served, so a prose reference to a card that was
 * deleted from this page fails that assertion. It did: the first version of this header cited the
 * old zones stylesheet by filename and turned a green build red.
 *
 * The two series colours were checked rather than picked: #1f6feb (implied) and #b45309 (realised)
 * separate by dE 30.9 under protanopia and 27.8 under tritanopia on this surface, both far above
 * the 8 floor, and each clears 3:1 against #fffffa.
 *
 * Colour is never the ONLY cue. The realised series is DASHED and its legend swatch carries the
 * same dash, so the two lines map to their labels by shape; each value is also direct-labelled
 * beside its own swatch. The card still reads with colour removed entirely — printed, in forced
 * colours, or by a reader who cannot separate the hues. */

/* PAGE LAYER — added 2026-08-28 when the card moved off the option chain to its own page.
 *
 * ⚠️ THE CARD DEPENDS ON --ink AND --line, which it used to INHERIT from option-chain.css. On a
 * standalone page nothing defines them, so the border and the text would fall back to the
 * initial values (transparent-ish border, black text) and the card would look broken in a way
 * that is easy to miss on a light background. They are declared here at :root with the SAME
 * values option-chain.css uses (--ink #151f1a, --line #dde6df), so the card renders identically
 * to how it did on the board. If option-chain.css ever changes them, this file is the other
 * place to change — VolPremiumAssetsTest.thePageDeclaresTheChainsInkAndLineWithTheSameValues
 * compares the two stylesheets and fails when they drift.
 *
 * The page is otherwise deliberately plain: this is one card, so it gets a column and a status
 * line, not a dashboard chrome. */

:root {
  --ink: #151f1a;
  --line: #dde6df;
  --ivrv-page-bg: #f6f8f5;
}

/* The card was designed on the option chain and INHERITED its typography. Imposing a different
 * family/size here would silently restyle every label and change the card's geometry — a change no
 * palette test can see. The family is option-chain.css's verbatim; size and line-height are left to
 * the browser default exactly as they were on the board, so the card's measured proportions carry
 * over unchanged. */
body {
  margin: 0;
  background: var(--ivrv-page-bg);
  color: var(--ink);
  font-family: Avenir Next, Gill Sans, Trebuchet MS, sans-serif;
}

.ivrv-page { max-width: 760px; margin: 0 auto; padding: 20px 18px 60px; }

/* Transport state, not market state — deliberately quiet so it is never mistaken for a reading. */
.ivrv-page-status {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivrv-muted, #66736c);
  margin-bottom: 8px;
}

.ivrv-waiting {
  padding: 24px 0;
  color: var(--ivrv-muted, #66736c);
}

.ivrv-panel {
  --ivrv-implied: #1f6feb;
  --ivrv-realised: #b45309;
  --ivrv-muted: #66736c;          /* 4.94:1 on #fffffa — the AA floor for this card's 11-12px labels */
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffffa;
  color: var(--ink);
}

.ivrv-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ivrv-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ivrv-ident {
  font-size: 11px;
  color: var(--ivrv-muted);
  font-variant-numeric: tabular-nums;
}

.ivrv-since {
  font-size: 11px;
  color: var(--ivrv-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* State is carried by hue and a border, never by fading text — nothing on this card is allowed to
   become hard to read in order to signal something. */
.ivrv-stale-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff0bd;
  border: 1px solid #d9b768;
  color: #6b4e07;
}

.ivrv-panel.is-stale { border-color: #d9b768; background: #fff8ee; }

/* Provenance, not an alarm: a neutral outline rather than a warning colour. The card is honest
   and complete on its own terms; what is missing is the CALIBRATED half of the wider clock. */
.ivrv-uncal-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px dashed var(--ivrv-muted);
  color: var(--ivrv-muted);
}

.ivrv-values {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 10px;
}

.ivrv-value { display: flex; flex-direction: column; gap: 2px; }

.ivrv-value .k {
  font-size: 11px;
  color: var(--ivrv-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* The swatch is the direct label tying a number to its line, so identity is never colour-alone in
   the chart: the reader can match by position in this row. */
.ivrv-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.ivrv-swatch.implied  { background: var(--ivrv-implied); }
/* Matches the dashed stroke of the line it labels, so the legend maps to the chart by SHAPE and
   not only by hue. */
.ivrv-swatch.realised {
  background: repeating-linear-gradient(90deg,
    var(--ivrv-realised) 0 4px, transparent 4px 6px);
}

.ivrv-value .v {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ivrv-value .v.absent { color: var(--ivrv-muted); font-weight: 500; }
.ivrv-value.implied  .v:not(.absent) { color: var(--ivrv-implied); }
.ivrv-value.realised .v:not(.absent) { color: var(--ivrv-realised); }

.ivrv-spread { margin-left: auto; text-align: right; }
.ivrv-spread .v.rich  { color: #1a7f37; }
.ivrv-spread .v.cheap { color: #b3261e; }

.ivrv-chart-wrap { overflow-x: auto; }
/* Height is set on the element from the model's pane geometry, so the CSS and the viewBox cannot
   disagree about it. */
.ivrv-chart {
  display: block;
  width: 100%;
  min-width: 280px;
}

.ivrv-baseline { stroke: rgba(110, 125, 146, 0.22); stroke-width: 1; }
.ivrv-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ivrv-line.implied  { stroke: var(--ivrv-implied); }
/* Dashed, so the two series are separable with colour removed entirely — printed, in forced
   colours, or by a reader who cannot separate the hues. The legend swatch carries the same dash. */
.ivrv-line.realised { stroke: var(--ivrv-realised); stroke-dasharray: 6 3; }
.ivrv-dot.implied  { fill: var(--ivrv-implied); }
.ivrv-dot.realised { fill: var(--ivrv-realised); }
.ivrv-axis {
  font-size: 10px;
  fill: var(--ivrv-muted);
  font-variant-numeric: tabular-nums;
}

.ivrv-warming {
  font-size: 12px;
  color: var(--ivrv-muted);
  padding: 18px 0;
  text-align: center;
}

.ivrv-foot {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ivrv-muted);
}
.ivrv-foot p { margin: 2px 0; }
.ivrv-coverage { font-variant-numeric: tabular-nums; }

/* ── Gate-1 increment 6: the SHADOW lock, the spread pane, and the warning overlay ─────────────
 *
 * The lock is a STATUS, not an alarm and not provenance, so it gets its own treatment: a solid
 * violet-outlined tag that reads before anything else on the card. It is text, so it survives
 * forced colours and print.
 *
 * The spread (IV - RV) is teal and DOTTED, the warning markers are three SHAPES — a hollow triangle
 * for DEVELOPING, a filled triangle for STRONG, a cross for a resolution — and their rules are
 * dashed, solid and dotted respectively. Every one of those distinctions survives with colour
 * removed, exactly as the implied/realised pair does. */

.ivrv-panel {
  --ivrv-spread: #0f766e;
  --ivrv-developing: #6d28d9;
  --ivrv-strong: #b3261e;
  --ivrv-resolved: #4b5563;
}

.ivrv-shadow-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f3efff;
  border: 1px solid #7c6fc4;
  color: #3b2a8c;
}

.ivrv-locked-note {
  font-size: 12px;
  color: var(--ivrv-muted);
  margin: 6px 0 2px;
}

/* A capacity refusal: the chart is missing records the service published (§40.1). */
.ivrv-capacity-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fdecea;
  border: 1px solid #b3261e;
  color: #8c1d18;
}
.ivrv-capacity {
  font-size: 12px;
  color: #8c1d18;
  background: #fdecea;
  border: 1px solid #e6b3ae;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 6px 0;
}
.ivrv-capacity p { margin: 2px 0; }

.ivrv-swatch.spread {
  background: repeating-linear-gradient(90deg,
    var(--ivrv-spread) 0 2px, transparent 2px 4px);
}
.ivrv-value.ivrv-spread .v:not(.absent):not(.rich):not(.cheap) { color: var(--ivrv-spread); }

.ivrv-line.spread { stroke: var(--ivrv-spread); stroke-dasharray: 2 3; }
.ivrv-dot.spread  { fill: var(--ivrv-spread); }
.ivrv-zero { stroke: rgba(110, 125, 146, 0.55); stroke-width: 1; stroke-dasharray: 4 3; }

.ivrv-spread-chart {
  display: block;
  width: 100%;
  min-width: 280px;
}

.ivrv-pane-caption {
  font-size: 10px;
  color: var(--ivrv-muted);
  margin: 4px 0 1px;
}

/* The marker band: HTML, not SVG text, because the chart is drawn with preserveAspectRatio="none"
 * and would stretch any label placed inside it. Each flag is positioned at its marker's x as a
 * percentage of the chart width, so it lines up with the rule the SVG draws at the same x. */
.ivrv-marker-band {
  position: relative;
  min-width: 280px;
  font-size: 9px;
  line-height: 12px;
}
.ivrv-flag {
  position: absolute;
  display: flex;
  gap: 2px;
  white-space: nowrap;
  transform: translateX(-4px);
  color: var(--ink);
}
.ivrv-flag.is-end { flex-direction: row-reverse; transform: translateX(calc(-100% + 4px)); }
.ivrv-flag-glyph { font-size: 9px; }
.ivrv-flag.developing .ivrv-flag-glyph,
.ivrv-transition.developing .ivrv-flag-glyph { color: var(--ivrv-developing); }
.ivrv-flag.strong .ivrv-flag-glyph,
.ivrv-transition.strong .ivrv-flag-glyph { color: var(--ivrv-strong); }
.ivrv-flag.resolved .ivrv-flag-glyph,
.ivrv-transition.resolved .ivrv-flag-glyph { color: var(--ivrv-resolved); }

.ivrv-marker-rule { stroke-width: 1; }
.ivrv-marker-rule.developing { stroke: var(--ivrv-developing); stroke-dasharray: 4 2; }
.ivrv-marker-rule.strong     { stroke: var(--ivrv-strong); stroke-width: 1.5; }
.ivrv-marker-rule.resolved   { stroke: var(--ivrv-resolved); stroke-dasharray: 1 2; }

.ivrv-transitions,
.ivrv-warn-state {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
}
.ivrv-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivrv-muted);
  margin-bottom: 3px;
}
.ivrv-transitions ol { margin: 0; padding-left: 0; list-style: none; }
.ivrv-transition { display: flex; gap: 5px; font-variant-numeric: tabular-nums; }

.ivrv-warn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px 14px;
}
.ivrv-warn-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ivrv-muted);
  font-variant-numeric: tabular-nums;
}
/* An OPEN state is emphasised by weight and ink, never by colour alone. */
.ivrv-warn-row.is-open { color: var(--ink); font-weight: 700; }
.ivrv-warn-row .state.STRONG { color: var(--ivrv-strong); }
.ivrv-warn-row .state.DEVELOPING { color: var(--ivrv-developing); }
/* A v1 observation carries no warning state: said in words, never drawn as a grid of NONE. */
.ivrv-warn-absent { margin: 0; color: var(--ivrv-muted); }

/* The transition list, VIRTUALISED (the model's listWindow): a fixed-height scroll box over a spacer
   as tall as every held transition; only the rows in view are rendered, each absolutely placed at
   its own row. Fixed row height is what lets the model place any row without measuring it, so a row
   never wraps: the full line is its title. */
.ivrv-transition-scroll {
  overflow-y: auto;
  /* SCROLL ANCHORING OFF. Only the rows in view exist, so the content above and below the viewport is
     replaced on every scroll, and anchoring exists to "correct" the scroll position when content
     changes like that. Here the scroll position IS the row index the page computes from it, so a
     correction would fight it. (The Chrome qualification's scroll to the last row passes either way on
     this build: this is a guard, not a measured fix.) */
  overflow-anchor: none;
  position: relative;
  border: 1px solid #e3e6ea;
  border-radius: 4px;
}
.ivrv-transitions ol.ivrv-transition-rows { position: relative; margin: 0; padding: 0; list-style: none; }
.ivrv-transition-rows .ivrv-transition {
  position: absolute;
  left: 4px;
  right: 4px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ivrv-row-number { color: #8a94a0; min-width: 5.5em; text-align: right; }
.ivrv-flag { cursor: pointer; }
.ivrv-flag.mixed .ivrv-flag-glyph { color: #5b6470; }
.ivrv-marker-rule.mixed { stroke: #5b6470; stroke-width: 1; }

/* The GATEWAY's verdict on its own copy of the session, apart from the page's capacity notice. */
.ivrv-gateway-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #8c1d18;
  color: #fff;
}
.ivrv-gateway[role="alert"] {
  font-size: 12px;
  color: #8c1d18;
  background: #fdecea;
  border: 2px solid #8c1d18;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 6px 0;
}
.ivrv-gateway p, .ivrv-tie p { margin: 2px 0; }

/* No latest reading can be named (the model's latestOf). */
.ivrv-tie {
  font-size: 12px;
  color: #5a4300;
  background: #fff6d6;
  border: 1px solid #e8d48a;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 6px 0;
}
.ivrv-tie ul { margin: 2px 0 0 16px; padding: 0; }