/* =============================================================================
   Sizing — page styles
   -----------------------------------------------------------------------------
   Prefix .sz-  ·  every rule scoped html[data-ui='v2'][data-v2]
   Every colour is a --v2-* token. There is no literal colour below this line.

   What is NOT here, on purpose: fields, ranges, chips, tables, empty states,
   the explain callout and the disclaimer all come from tools-shared.css, and
   cards, buttons, badges, stats and section heads come from kit.css. This sheet
   is only the things that exist nowhere else — the calculator's two-column
   frame, the liquidation banner, the result tiles, the bar rows and the chart
   furniture the education cards share.

   Contents
     1. Page frame and the calculator's two columns
     2. The liquidation banner
     3. Result tiles
     4. Bar rows (account impact, leverage)
     5. Education cards and shared chart furniture
     6. Tables
     7. Narrow screens
     8. Reduced motion
   ========================================================================== */

/* =============================================================================
   1. FRAME
   ========================================================================== */

/* 400px is about the narrowest a two-column form of labelled numeric fields
   stays comfortable; below that the entry/stop/target row starts wrapping and
   the column is worth more as full width. */
html[data-ui='v2'][data-v2] .sz-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: var(--v2-s5);
  align-items: start;
}

/* The inputs follow you down the results column. The leverage slider is the
   one control a reader drags while watching something else on the page, and
   without this it scrolls out from under the cursor. */
html[data-ui='v2'][data-v2] .sz-inputs {
  position: sticky;
  top: var(--v2-s4);
  display: flex;
  flex-direction: column;
  gap: var(--v2-s4);
  max-height: calc(100vh - var(--v2-s8));
  overflow-y: auto;
  /* overflow-y:auto alone makes the x axis auto too, so a single stray pixel
     of a segmented control shows a scrollbar across the bottom of the card. */
  overflow-x: hidden;
  overscroll-behavior: contain;
}
html[data-ui='v2'][data-v2] .sz-inputs .mi-section-head { margin-bottom: 0; }
html[data-ui='v2'][data-v2] .sz-field-symbol { flex: 1 1 140px; }
html[data-ui='v2'][data-v2] .sz-field-side { flex: 0 0 auto; }
html[data-ui='v2'][data-v2] .sz-qty-field { margin-top: var(--v2-s3); width: 100%; }
html[data-ui='v2'][data-v2] .sz-qty-field[hidden] { display: none; }

html[data-ui='v2'][data-v2] .sz-results {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s4);
  min-width: 0;
}

html[data-ui='v2'][data-v2] .sz-stack {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s3);
}

/* =============================================================================
   2. THE LIQUIDATION BANNER
   -----------------------------------------------------------------------------
   Three states, one element, set through data-state so the JS never has to
   juggle class lists:

     none    — no leverage, so no liquidation price exists at all
     safe    — liquidation sits beyond the stop; the stop is still the exit
     danger  — liquidation sits BETWEEN entry and stop

   Only `danger` is loud. A banner that shouts in every state teaches a reader
   to stop looking at it, and this is the one thing on the page that has to be
   read the first time.
   ========================================================================== */
html[data-ui='v2'][data-v2] .sz-liq {
  padding: var(--v2-s4) var(--v2-s5);
  border-radius: var(--v2-r-lg);
  background: var(--v2-sunk);
  box-shadow: var(--v2-hairline);
  transition: background var(--v2-med) var(--v2-ease),
              box-shadow var(--v2-med) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .sz-liq[data-state='safe'] {
  background: var(--v2-sunk);
  box-shadow: 0 0 0 1px var(--v2-line-2);
}
html[data-ui='v2'][data-v2] .sz-liq[data-state='danger'] {
  background: var(--v2-bear-soft);
  box-shadow: 0 0 0 1px var(--v2-bear);
}

html[data-ui='v2'][data-v2] .sz-liq-head {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s3);
  flex-wrap: wrap;
}
html[data-ui='v2'][data-v2] .sz-liq-title {
  margin: 0;
  font: 600 var(--v2-t-lg)/1.3 var(--v2-sans);
  letter-spacing: var(--v2-tight);
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .sz-liq[data-state='danger'] .sz-liq-title {
  font-size: var(--v2-t-xl);
  color: var(--v2-bear);
}
html[data-ui='v2'][data-v2] .sz-liq-body {
  margin: var(--v2-s2) 0 0;
  max-width: 76ch;
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .sz-liq-caveat {
  margin: var(--v2-s2) 0 0;
  max-width: 76ch;
  font: 400 var(--v2-t-xs)/1.55 var(--v2-sans);
  color: var(--v2-ink-3);
}

/* The price ladder: stop, liquidation, entry and target on one axis, so the
   sentence "liquidation is inside the stop" has a picture attached to it. */
html[data-ui='v2'][data-v2] .sz-ladder {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--v2-s3);
  overflow: visible;
}

/* The flash only fires on the transition into danger, never on a re-render, so
   dragging the slider through the boundary is a single deliberate event. */
html[data-ui='v2'][data-v2] .sz-liq.is-fired { animation: sz-alarm 1.3s var(--v2-ease-out) 2; }
@keyframes sz-alarm {
  0%   { box-shadow: 0 0 0 1px var(--v2-bear); }
  35%  { box-shadow: 0 0 0 3px var(--v2-bear); }
  100% { box-shadow: 0 0 0 1px var(--v2-bear); }
}

/* =============================================================================
   3. RESULT TILES
   -----------------------------------------------------------------------------
   Label, figure, and one sentence saying what the figure is for. The sentence
   is the point: a column of unexplained numbers is what every other position
   calculator already is.
   ========================================================================== */
html[data-ui='v2'][data-v2] .sz-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--v2-s3);
}
html[data-ui='v2'][data-v2] .sz-tile {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s1);
  padding: var(--v2-s3) var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
  box-shadow: var(--v2-hairline);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .sz-tile--warn { background: var(--v2-warn-soft); box-shadow: 0 0 0 1px var(--v2-warn-soft); }
html[data-ui='v2'][data-v2] .sz-tile--bear { background: var(--v2-bear-soft); box-shadow: 0 0 0 1px var(--v2-bear-soft); }

html[data-ui='v2'][data-v2] .sz-tile-label {
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .sz-tile-value {
  font: 600 var(--v2-t-xl)/1.2 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--v2-tight);
  color: var(--v2-ink);
  overflow-wrap: anywhere;
}
html[data-ui='v2'][data-v2] .sz-tile-sub {
  font: 500 var(--v2-t-xs)/1.4 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .sz-tile-note {
  margin: var(--v2-s1) 0 0;
  font: 400 var(--v2-t-xs)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
}

/* =============================================================================
   4. BAR ROWS
   -----------------------------------------------------------------------------
   Used by "what this does to the account" and by the leverage module. The
   width of a fill is an inline style (a number, never a colour); the tone is
   always a class.
   ========================================================================== */
html[data-ui='v2'][data-v2] .sz-bars {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s4);
}
html[data-ui='v2'][data-v2] .sz-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v2-s3);
  margin-bottom: var(--v2-s2);
}
html[data-ui='v2'][data-v2] .sz-bar-name {
  font: 550 var(--v2-t-sm)/1.4 var(--v2-sans);
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .sz-bar-figure {
  font: 600 var(--v2-t-md)/1.3 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
  white-space: nowrap;
}
html[data-ui='v2'][data-v2] .sz-bar-track {
  position: relative;
  height: 12px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-sunk-2);
  box-shadow: var(--v2-e-field);
  overflow: hidden;
}
html[data-ui='v2'][data-v2] .sz-bar-fill {
  height: 100%;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink-3);
  transition: width var(--v2-med) var(--v2-ease-out);
}
html[data-ui='v2'][data-v2] .sz-bar-fill--bull { background: var(--v2-bull); }
html[data-ui='v2'][data-v2] .sz-bar-fill--bear { background: var(--v2-bear); }
html[data-ui='v2'][data-v2] .sz-bar-fill--warn { background: var(--v2-warn); }
html[data-ui='v2'][data-v2] .sz-bar-fill--accent { background: var(--v2-accent); }
html[data-ui='v2'][data-v2] .sz-bar-note {
  margin: var(--v2-s2) 0 0;
  font: 400 var(--v2-t-xs)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
}
/* The current leverage row, so the reader can find themselves in the table. */
html[data-ui='v2'][data-v2] .sz-bar-row.is-current .sz-bar-name { color: var(--v2-accent-text); font-weight: 600; }

/* =============================================================================
   5. EDUCATION CARDS AND CHART FURNITURE
   ========================================================================== */
html[data-ui='v2'][data-v2] .sz-edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--v2-s4);
  align-items: start;
}
html[data-ui='v2'][data-v2] .sz-edu-card {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s3);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .sz-edu-card > .mi-h3 { margin: 0; }
html[data-ui='v2'][data-v2] .sz-edu-card > div {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s3);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .sz-copy {
  margin: 0;
  max-width: 68ch;
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
}

/* Every hand-drawn chart on the page. viewBox-based, so it scales with the
   card rather than with a pixel width nobody can predict. */
html[data-ui='v2'][data-v2] .sz-chart {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
}
/* Chart labels are numbers as often as they are words, and they line up in
   columns down the axis, so the whole drawing is set in the mono face. */
html[data-ui='v2'][data-v2] .sz-chart text,
html[data-ui='v2'][data-v2] .sz-ladder text {
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
}
html[data-ui='v2'][data-v2] .sz-chart-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--v2-s3);
}

html[data-ui='v2'][data-v2] .sz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s2) var(--v2-s4);
  font: 400 var(--v2-t-xs)/1.4 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .sz-legend-item { display: inline-flex; align-items: center; gap: var(--v2-s2); }
html[data-ui='v2'][data-v2] .sz-swatch {
  width: 12px;
  height: 3px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink-3);
  flex: none;
}
html[data-ui='v2'][data-v2] .sz-swatch--bull { background: var(--v2-bull); }
html[data-ui='v2'][data-v2] .sz-swatch--bear { background: var(--v2-bear); }
html[data-ui='v2'][data-v2] .sz-swatch--warn { background: var(--v2-warn); }
html[data-ui='v2'][data-v2] .sz-swatch--accent { background: var(--v2-accent); }

/* A compact figure row inside an education card — smaller than .mi-stat,
   because these are supporting numbers, not the headline of a panel. */
html[data-ui='v2'][data-v2] .sz-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--v2-s3);
}
html[data-ui='v2'][data-v2] .sz-fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-ui='v2'][data-v2] .sz-fig-label {
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .sz-fig-value {
  font: 600 var(--v2-t-lg)/1.25 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

/* The slider a module owns, with its live readout above it. */
html[data-ui='v2'][data-v2] .sz-control {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  padding: var(--v2-s3) var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
}
html[data-ui='v2'][data-v2] .sz-control-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v2-s3);
  flex-wrap: wrap;
}
html[data-ui='v2'][data-v2] .sz-control-value {
  font: 600 var(--v2-t-md)/1.3 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

/* =============================================================================
   6. TABLES
   ========================================================================== */
/* The row matching the calculator's current setting, so the ladder reads as
   "you are here" rather than as an abstract list. */
html[data-ui='v2'][data-v2] .sz-row-current td {
  background: var(--v2-accent-soft);
  color: var(--v2-ink);
}
html[data-ui='v2'][data-v2] .sz-row-current td:first-child { box-shadow: inset 2px 0 0 var(--v2-accent); }
/* An explain callout that follows a block of bars rather than opening one. */
html[data-ui='v2'][data-v2] .sz-gap-top { margin-top: var(--v2-s4); }

html[data-ui='v2'][data-v2] .sz-table-note {
  margin: var(--v2-s3) 0 0;
  max-width: 78ch;
  font: 400 var(--v2-t-xs)/1.55 var(--v2-sans);
  color: var(--v2-ink-3);
}

/* =============================================================================
   7. NARROW SCREENS
   ========================================================================== */
@media (max-width: 1080px) {
  html[data-ui='v2'][data-v2] .sz-calc-grid { grid-template-columns: minmax(0, 1fr); }
  /* Sticky costs more than it earns once the form sits above the results
     rather than beside them. */
  html[data-ui='v2'][data-v2] .sz-inputs {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  html[data-ui='v2'][data-v2] .sz-edu-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-ui='v2'][data-v2] .sz-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  html[data-ui='v2'][data-v2] .sz-tile-value { font-size: var(--v2-t-lg); }
  html[data-ui='v2'][data-v2] .sz-liq[data-state='danger'] .sz-liq-title { font-size: var(--v2-t-lg); }
}

/* =============================================================================
   8. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-ui='v2'][data-v2] .sz-liq,
  html[data-ui='v2'][data-v2] .sz-liq.is-fired,
  html[data-ui='v2'][data-v2] .sz-bar-fill { animation: none; transition: none; }
}