/* Options Profit Calculator layout (landing/calc/options_profit_calculator.html).
 * Components, colours and tokens come from dashboard/css/ezpz-ui.css (docs: dashboard/EZPZ_UI.md); this file
 * places them and adds the few pieces the layer doesn't have: number fields, the range slider and the chart
 * legend. Breakpoints follow the tool's own width (container queries). */
.calc-wrap { padding-bottom: var(--lp-sp-8, 64px); }
.calc { container: ocalc / inline-size; }
.ezui.calc { gap: 20px; }

/* ── Blocks and headings ── */
.calc .calc-block { display: grid; gap: 10px; min-width: 0; }
.calc .calc-block__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.calc .calc-share { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.calc .calc-share__status { font-size: 12px; }
.calc .calc-hint { font-size: 12px; }

/* ── Quick examples: one labelled row of chips per group ── */
.calc .calc-presets { display: grid; gap: 8px; }
.calc .calc-presets__group { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 6px 12px; }
.calc .calc-presets__name { font-size: 12px; font-weight: 600; color: var(--ezui-text-faint); }
@container ocalc (max-width: 560px) {
  .calc .calc-presets__group { grid-template-columns: minmax(0, 1fr); }
}

/* ── Number fields ── */
.calc .calc-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container ocalc (min-width: 720px) { .calc .calc-inputs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.calc .calc-field { display: grid; gap: 6px; margin: 0; min-width: 0; }
.calc .calc-field__label { font-size: 12px; font-weight: 600; color: var(--ezui-text-muted); }
.calc .calc-field__box {
  display: flex; align-items: center; min-width: 0; height: var(--ezui-control-h);
  border-radius: var(--ezui-radius-sm); border: 1px solid var(--ezui-border-2); background: var(--ezui-surface-2);
  transition: border-color .15s;
}
.calc .calc-field__box:hover { border-color: var(--ezui-p3); }
.calc .calc-field__box:focus-within { border-color: var(--ezui-primary); box-shadow: var(--ezui-focus); }
.calc .calc-field__box:has([aria-invalid="true"]) { border-color: var(--ezui-down); }
.calc .calc-field__affix { flex: none; padding: 0 10px; font: 500 12px var(--ezui-sans); color: var(--ezui-text-faint); }
.calc .calc-field__box > .calc-field__affix:first-child { padding-right: 0; }
.calc .calc-field__box > .calc-input { border: 0; background: none; height: 100%; }
.calc .calc-field__box > .calc-input:focus-visible { box-shadow: none; }

.calc .calc-input {
  width: 100%; min-width: 0; height: var(--ezui-control-h-sm); padding: 0 10px; margin: 0;
  border-radius: var(--ezui-radius-xs); border: 1px solid var(--ezui-border-2); background: var(--ezui-surface-2);
  color: var(--ezui-text-bright); font: 500 13px var(--ezui-mono); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield; transition: border-color .15s;
}
.calc .calc-input::-webkit-outer-spin-button, .calc .calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc .calc-input::placeholder { color: var(--ezui-text-faint); opacity: 1; }
.calc .calc-input:hover { border-color: var(--ezui-p3); }
.calc .calc-input:focus { border-color: var(--ezui-primary); }
.calc .calc-input[aria-invalid="true"] { border-color: var(--ezui-down); }
.calc .calc-input:disabled { opacity: .4; cursor: not-allowed; }

/* ── Legs table (ezui-table; cards under 640px of its own width) ── */
.calc .calc-legs {
  --ezui-cols: minmax(112px, auto) minmax(172px, auto) minmax(84px, 1fr) minmax(72px, 1fr) minmax(96px, 1fr) 44px;
  border: 1px solid var(--ezui-border); border-radius: var(--ezui-radius-sm); background: var(--ezui-surface);
}
.calc .calc-legs .ezui-table__cell { padding: 8px 10px; }
.calc .calc-leg:last-child { border-bottom: 0; }
.calc .calc-seg { width: max-content; max-width: 100%; padding: 3px; background: var(--ezui-surface-2); }
.calc .calc-seg > button:disabled { opacity: .35; cursor: not-allowed; }
.calc .calc-leg__del { justify-self: end; }
.calc .calc-leg .calc-cell--off { visibility: hidden; }
@container ezui-table (max-width: 640px) {
  .calc .calc-legs .ezui-table__row.calc-leg {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    grid-template-areas: "side side side del" "type type type type" "strike qty prem prem";
    gap: 8px 10px; padding: 10px 6px;
  }
  .calc .calc-leg__side { grid-area: side; }
  .calc .calc-leg__type { grid-area: type; }
  .calc .calc-leg__strike { grid-area: strike; }
  .calc .calc-leg__qty { grid-area: qty; }
  .calc .calc-leg__prem { grid-area: prem; }
  .calc .calc-leg__del { grid-area: del; align-self: start; }
  .calc .calc-legs .ezui-table__row.calc-leg > .ezui-table__cell { padding: 0; }
  .calc .calc-leg .calc-cell--off { display: none; }
  .calc .calc-legs .ezui-table__row.calc-leg.is-stock { grid-template-areas: "side side side del" "type type type type" "qty qty prem prem"; }
  .calc .calc-leg .calc-input { height: var(--ezui-control-h); }
}

/* ── Results ── */
.calc .calc-results { display: grid; gap: 16px; min-width: 0; transition: opacity .15s; }
.calc .calc-results.is-stale { opacity: .45; }
.calc .calc-stats-live { display: grid; gap: 10px; }
.calc .calc-stats dd.is-up { color: var(--ezui-up-text); }
.calc .calc-stats dd.is-down { color: var(--ezui-down-text); }
@container ocalc (min-width: 520px) {
  .calc .calc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc .calc-greeks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .calc .calc-greeks > div:last-child:nth-child(odd) { grid-column: auto; }
}
@container ocalc (min-width: 980px) {
  .calc .calc-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .calc .calc-greeks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Chart card ── */
.calc .calc-chart-card { display: grid; gap: 10px; padding: 14px; }
.calc .calc-chart-card .ezui-card__head { margin-bottom: 0; }
.calc .calc-chart-card__sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ezui-text-faint); }
.calc .calc-chart-card__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.calc .calc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ezui-text-muted); }
.calc .calc-legend > li { display: inline-flex; align-items: center; gap: 6px; }
.calc .calc-legend__swatch { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.calc .calc-legend__swatch--expiry { border-color: var(--ezui-primary-text); }
.calc .calc-legend__swatch--now { border-top-style: dashed; border-color: var(--ezui-cyan); }
.calc .calc-chart { position: relative; height: 380px; min-width: 0; }
.calc .calc-chart__skel { position: absolute; inset: 0; display: block; border-radius: var(--ezui-radius-sm); }
@container ocalc (max-width: 560px) { .calc .calc-chart { height: 300px; } }

/* Chart tooltip (ECharts renders it inside .calc-chart, so these classes apply). */
.calc .calc-tip__price { margin-bottom: 4px; font-weight: 600; color: var(--ezui-text-bright); font-variant-numeric: tabular-nums; }
.calc .calc-tip__row { display: flex; align-items: center; gap: 8px; line-height: 1.6; }
.calc .calc-tip__dot { display: inline-block; width: 12px; height: 0; border-top: 2px solid var(--ezui-up); }
.calc .calc-tip__dot--now { border-top-style: dashed; border-color: var(--ezui-cyan); }
.calc .calc-tip__name { color: var(--ezui-text-muted); }
.calc .calc-tip__val { margin-left: auto; padding-left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ezui-text-bright); }
.calc .calc-tip__val.is-up { color: var(--ezui-up-text); }
.calc .calc-tip__val.is-down { color: var(--ezui-down-text); }

/* ── Days-passed slider (ezui has no slider; tokens only) ── */
.calc .calc-slider { display: grid; grid-template-columns: auto minmax(0, 1fr) 9ch; align-items: center; gap: 12px; padding: 4px 2px 2px; }
.calc .calc-slider__label { margin: 0; font-size: 12px; font-weight: 600; color: var(--ezui-text-muted); white-space: nowrap; }
.calc .calc-slider__out { justify-self: end; font-size: 13px; font-weight: 600; color: var(--ezui-text-bright); white-space: nowrap; }
@container ocalc (max-width: 420px) {
  .calc .calc-slider { grid-template-columns: minmax(0, 1fr) auto; }
  .calc .calc-range { grid-column: 1 / -1; grid-row: 2; }
}

.calc .calc-range {
  --pct: 0%;
  width: 100%; height: 24px; margin: 0; padding: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.calc .calc-range:focus-visible { box-shadow: none; outline: none; }
.calc .calc-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--ezui-radius-pill);
  background: linear-gradient(90deg, var(--ezui-primary) 0 var(--pct), var(--ezui-surface-3) var(--pct) 100%);
}
.calc .calc-range::-moz-range-track { height: 6px; border-radius: var(--ezui-radius-pill); background: var(--ezui-surface-3); }
.calc .calc-range::-moz-range-progress { height: 6px; border-radius: var(--ezui-radius-pill); background: var(--ezui-primary); }
.calc .calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; border: 2px solid var(--ezui-text-bright); background: var(--ezui-primary); transition: transform .15s var(--ezui-ease);
}
.calc .calc-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ezui-text-bright); background: var(--ezui-primary);
}
.calc .calc-range:hover::-webkit-slider-thumb { transform: scale(1.1); }
.calc .calc-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ezui-focus); }
.calc .calc-range:focus-visible::-moz-range-thumb { box-shadow: var(--ezui-focus); }
.calc .calc-range:disabled { opacity: .4; cursor: not-allowed; }
@media (pointer: coarse) { .calc .calc-range { height: var(--ezui-tap); } }

/* ── Note under the card (outside .ezui, so landing tokens) ── */
.calc-note { margin: 12px 0 0; font-size: 13px; color: var(--lp-muted, #b9aee0); }

@media (prefers-reduced-motion: reduce) {
  .calc .calc-range::-webkit-slider-thumb { transition: none; }
  .calc .calc-results { transition: none; }
}

/* Blog layout: the calculator sits where a post's cover image would. */
.calc-post .calc-wrap { margin-block: var(--lp-sp-6, 32px) var(--lp-sp-8, 48px); }
.calc-post .lp-prose th, .calc-post .lp-prose td { padding: 10px 14px; border-bottom: 1px solid var(--lp-border); text-align: left; vertical-align: top; }