/* OPTIONS tab — option value estimator (optcalc.js). Form reuses .trade-card /
   .form-*; everything here is oc-prefixed. Series colour is --cat-2 (identity),
   gain/loss tokens only on numbers and the P&L shading. */
.oc-wrap { display: flex; flex-direction: column; gap: 16px; }
.oc-wrap [hidden] { display: none; }  /* .trade-card sets display: flex */
.oc-len { display: flex; gap: 6px; }
.oc-len input { flex: 1; min-width: 0; }
.oc-len select { width: 64px; flex: none; }
.oc-opt { color: var(--text-faint); letter-spacing: 0; }
#oc-form .oc-bad, #oc-form .oc-bad:focus { border-color: var(--loss); }

/* KPI strip */
.oc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; }
.oc-title { grid-column: 1 / -1; font-family: var(--font-data); font-size: 14px; color: var(--text-bright); }
.oc-kpi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc-k { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.1em; color: var(--text-dim); }
.oc-k2 { margin-top: 8px; }
.oc-v { font-family: var(--font-data); font-size: 20px; color: var(--text-bright); }
.oc-u { font-size: 11px; color: var(--text-dim); margin-left: 2px; }
.oc-s { font-family: var(--font-data); font-size: 11px; color: var(--text-dim); overflow-wrap: anywhere; }
.oc-pos { color: var(--gain) !important; }
.oc-neg { color: var(--loss) !important; }

/* Chart */
.oc-chart-box { position: relative; }
.oc-legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.oc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.oc-sw { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--cat-2); vertical-align: middle; margin-right: 6px; }
.oc-sw-exp { border-top: 2px dashed var(--text-dim); }
.oc-sw-dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--cat-2); }
#oc-chart { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; }
#oc-chart .oc-grid { stroke: var(--border); stroke-width: 1; }
#oc-chart .oc-ax { fill: var(--text-faint); font-family: var(--font-data); font-size: 10px; }
#oc-chart .oc-ax-t { fill: var(--text-dim); font-family: var(--font-ui); }
#oc-chart .oc-zero { stroke: var(--text-faint); stroke-width: 1; }
#oc-chart .oc-area-gain { fill: var(--gain); fill-opacity: 0.10; }
#oc-chart .oc-area-loss { fill: var(--loss); fill-opacity: 0.10; }
#oc-chart .oc-mark { stroke: var(--border2); stroke-width: 1; stroke-dasharray: 3 3; }
#oc-chart .oc-mark-t { fill: var(--text-dim); font-family: var(--font-data); font-size: 10px; }
#oc-chart .oc-line-exp { fill: none; stroke: var(--text-dim); stroke-width: 1.5; stroke-dasharray: 5 4; }
#oc-chart .oc-line-at { fill: none; stroke: var(--cat-2); stroke-width: 2; stroke-linejoin: round; }
#oc-chart .oc-be { fill: var(--panel); stroke: var(--text-bright); stroke-width: 1.5; }
#oc-chart .oc-dot { fill: var(--cat-2); stroke: var(--panel); stroke-width: 2; }
#oc-chart .oc-dot-t { fill: var(--text-bright); font-family: var(--font-data); font-size: 11px; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
#oc-chart .oc-cross { stroke: var(--text-faint); stroke-width: 1; }
#oc-chart .oc-hdot-at { fill: var(--cat-2); stroke: var(--panel); stroke-width: 2; }
#oc-chart .oc-hdot-exp { fill: var(--text-dim); stroke: var(--panel); stroke-width: 2; }
#oc-chart .oc-hit { fill: transparent; cursor: crosshair; }
.oc-tip {
  position: absolute; top: 28px; pointer-events: none; z-index: 5;
  background: var(--panel2); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 7px 10px; font-family: var(--font-data); font-size: 11px; color: var(--text);
  display: flex; flex-direction: column; gap: 3px; white-space: nowrap;
}
.oc-tip[hidden] { display: none; }
.oc-tip-h { color: var(--text-bright); }
.oc-tip-h span, .oc-tip-s { color: var(--text-dim); }
.oc-tip b { font-weight: 500; color: var(--text-bright); }

/* Scenario table */
.oc-table-wrap { overflow-x: auto; }
.oc-scen { width: 100%; border-collapse: collapse; font-family: var(--font-data); font-size: 12px; }
.oc-scen th { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.1em; color: var(--text-dim); font-weight: 400; text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.oc-scen td { text-align: right; padding: 6px 10px; color: var(--text); border-bottom: 1px solid var(--border); white-space: nowrap; }
.oc-scen th:first-child, .oc-scen td:first-child { text-align: left; }
.oc-scen tr.oc-base td { color: var(--text-bright); background: var(--panel2); }
.oc-cap { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.oc-notes { font-family: var(--font-ui); font-size: 11px; color: var(--text-faint); line-height: 1.5; }

/* Two fields a row on a phone: at three the dates clip and LENGTH loses its number. */
body.mobile #oc-form .form-group { min-width: calc(50% - 5px); }
body.mobile .oc-v { font-size: 17px; }
body.mobile .oc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.mobile .oc-scen th, body.mobile .oc-scen td { padding: 5px 6px; }