/* Options Strategy Builder (/Options/StrategyBuilder), contract options-strategy-builder-v2 §7.1.
   Colours come from Bootstrap's theme variables so light and dark themes both read; the two payoff
   curves differ by stroke pattern as well as colour, so they stay distinct without colour vision. */
[data-options-strategy] {
    --os-expiry: var(--bs-info, #0dcaf0);
    --os-target: #7c3aed;
}
[data-bs-theme="dark"] [data-options-strategy] { --os-target: #c4b5fd; }

[data-options-strategy] .mono { font-variant-numeric: tabular-nums; }
/* The charts are drawn at the container's measured width, so they keep a fixed pixel height
   instead of growing with the viewport the way a fixed-ratio SVG does on a wide desktop. */
.os-payoff-chart, .os-skew-chart { display: block; width: 100%; max-width: 100%; height: auto; touch-action: pan-y; }
.os-zero { stroke: var(--bs-body-color, #888); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
.os-grid { stroke: var(--bs-border-color, #ccc); stroke-width: 1; opacity: .6; }
.os-line, .os-line-expiry { stroke: var(--os-expiry); stroke-width: 2; }
.os-line-target { stroke: var(--os-target); stroke-width: 2; stroke-dasharray: 6 4; }
.os-profit { fill: var(--bs-success, #198754); opacity: .14; }
.os-loss { fill: var(--bs-danger, #dc3545); opacity: .14; }
.os-breakeven { fill: var(--bs-warning, #f5b84b); stroke: var(--bs-body-bg, #fff); stroke-width: 1.5; }
.os-axis, .os-label { fill: var(--bs-secondary-color, #888); font-size: .7rem; }
.os-label-spot { fill: var(--bs-body-color, #444); font-size: .7rem; }
.os-skew-ce { stroke: var(--bs-info, #0dcaf0); stroke-width: 1.6; }
.os-skew-pe { stroke: var(--bs-warning, #f5b84b); stroke-width: 1.6; }
.os-skew-dot-ce { fill: var(--bs-info, #0dcaf0); }
.os-skew-dot-pe { fill: var(--bs-warning, #f5b84b); }
.os-spot { stroke: var(--bs-secondary-color, #888); stroke-dasharray: 4 3; }
.os-strike-tick { stroke: var(--bs-secondary-color, #888); opacity: .5; }
.os-cursor { stroke: var(--bs-body-color, #444); stroke-width: 1; opacity: .5; }
.os-cursor-dot { fill: var(--os-expiry); stroke: var(--bs-body-bg, #fff); stroke-width: 1.5; }
.os-cursor-dot-target { fill: var(--os-target); stroke: var(--bs-body-bg, #fff); stroke-width: 1.5; }
.os-cursor-box { fill: var(--bs-body-bg, #fff); stroke: var(--bs-border-color, #ccc); opacity: .95; }
.os-cursor-text { fill: var(--bs-body-color, #222); font-size: .72rem; font-variant-numeric: tabular-nums; }
.os-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.os-swatch { display: inline-block; width: 1.1rem; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: .35rem; }
.os-swatch-ce, .os-swatch-expiry { border-color: var(--os-expiry); }
.os-swatch-target { border-color: var(--os-target); border-top-style: dashed; }
.os-swatch-pe, .os-swatch-breakeven { border-color: var(--bs-warning, #f5b84b); }
.os-swatch-spot { border-top-style: dashed; border-color: var(--bs-secondary-color, #888); }
[data-os-term-item] { min-width: 9rem; }
[data-os-leg-entry].is-invalid, [data-os-leg-lots].is-invalid, [data-os-scenario] .is-invalid { background-image: none; }

/* Leg editor controls keep a readable minimum width inside the table on tablet and desktop. */
[data-os-legs-table] [data-os-leg-side] { min-width: 5.5rem; }
[data-os-legs-table] [data-os-leg-lots] { min-width: 4.5rem; }
[data-os-legs-table] [data-os-leg-entry] { min-width: 7.5rem; }

/* Summary tiles: two per row on a phone, a single row from large screens up. */
.os-tile { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius, .375rem); padding: .5rem; height: 100%; }
.os-tile-value { font-weight: 600; overflow-wrap: anywhere; }
.os-unavailable { color: var(--bs-secondary-color); font-style: italic; }
.os-sub { display: block; font-size: .75rem; color: var(--bs-secondary-color); }
.os-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.os-template-group { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-bottom: .375rem; }
.os-template-group > .os-template-category { min-width: 5.5rem; font-size: .8rem; color: var(--bs-secondary-color); }
.os-template-reason { font-size: .75rem; color: var(--bs-secondary-color); }

/* The P&L grid is a dense matrix: it scrolls sideways on narrow screens with the spot column
   pinned, rather than being squeezed until the numbers wrap. */
.os-grid-table th:first-child, .os-grid-table td:first-child { position: sticky; left: 0; background: var(--bs-body-bg); z-index: 1; }

/* Per-leg Greeks and the scenario summary carry many columns. On a phone each row becomes a
   labelled card, so every figure keeps its caption instead of scrolling out of view. */
@media (max-width: 575.98px) {
    .os-stack thead { display: none; }
    .os-stack, .os-stack tbody, .os-stack tr, .os-stack td { display: block; width: 100%; }
    .os-stack tr { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius, .375rem); margin-bottom: .5rem; padding: .25rem .5rem; }
    .os-stack td { display: flex; justify-content: space-between; gap: .75rem; border: 0; padding: .2rem 0; text-align: right; white-space: normal; }
    .os-stack td::before { content: attr(data-label); color: var(--bs-secondary-color); text-align: left; font-size: .8rem; flex: 0 0 auto; max-width: 50%; }
    .os-stack td[data-label=""]::before { content: none; }
    .os-stack td .form-control, .os-stack td .form-select { max-width: 9rem; }
}