/* ── risk.css — Risk desk · Exposure X-ray · gate preview (owner D) ──
   Cut verbatim from styles.css (UI 7.0 step 0). Loaded after styles.css and
   before the signals-*.css / boards.css sheets (see the <link> order in index.html). */

/* ── Risk desk ─────────────────────────────────────────────────────── */
.risk-card.halted { border-color: var(--warn-bd); }
.risk-card.focus-flash { animation: focus-flash 1.2s var(--ease) both; }
@keyframes focus-flash { 0%, 55% { box-shadow: 0 0 0 3px var(--accent-ring), inset 0 1px 0 var(--hi); border-color: var(--accent); } 100% { box-shadow: inset 0 1px 0 var(--hi); } }
.risk-card .card-head { align-items: flex-start; flex-wrap: wrap; }
.risk-card .card-head > div:first-child { flex: 1 1 300px; min-width: 0; }
.risk-card .card-head h3 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.risk-card .card-head h3 .acct { font-size: 13px; font-weight: 650; color: var(--text); }
.risk-card .card-pad.open-now { border-top: 1px solid var(--border); }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 20px; margin-bottom: 16px; }
.gauge .g-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.gauge .g-val { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.gauge.warn .g-val { color: var(--warn); } .gauge.bad .g-val { color: var(--neg); }
.gates, .tickers { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px; }
.tickers { margin-top: 9px; }
.gates-label { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-right: 5px; }
.gates-label b { font-weight: 600; }
.gate { display: inline-block; padding: 2px 7px; border-radius: var(--r-xs); font-size: 11px; font-weight: 500; background: var(--surface-3); color: var(--muted); cursor: default; transition: background var(--dur), color var(--dur); }
.gate:hover { color: var(--text); }
.gate.ok { background: transparent; color: var(--text-2); padding-left: 0; } .gate.ok::first-letter { color: var(--pos); }
.gate.bad { color: var(--neg); background: var(--neg-bg); }
.gate.warn { color: var(--warn); background: var(--warn-bg); }
.gate.muted { background: transparent; color: var(--faint); }
.risk-card .dd { min-width: 112px; } .risk-card .dd .bar { min-width: 38px; }
.steps { padding-left: 16px; list-style: decimal; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 7px; line-height: 1.5; }
.steps b { color: var(--text); font-weight: 600; }
.calc-out { border-top: 1px solid var(--border); }
.calc-verdict { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.calc-verdict .h { font-size: 24px; font-weight: 650; letter-spacing: -0.032em; font-variant-numeric: tabular-nums; }
.calc-verdict small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.calc-verdict.ok .h { color: var(--text); }
.calc-verdict.bad { background: var(--neg-bg); } .calc-verdict.bad .h { color: var(--neg); font-size: 14px; letter-spacing: 0; }
.calc-r { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); text-align: right; }
.calc-r b { font-variant-numeric: tabular-nums; }
.calc-steps tbody td { height: 28px; font-size: 11.5px; }
.calc-steps tr.warn td:nth-child(2) { color: var(--warn); } .calc-steps tr.bad td:nth-child(2) { color: var(--neg); }

/* ── Exposure X-ray ──────────────────────────────────────────────────
   Four readings of the same book side by side. Each row is a label, a
   bar as wide as its share of deployed notional, the share itself and
   what it is doing — so a 60% bucket is visible before it is read. */
.xr-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.xr-stat { padding: 10px 12px; border-right: 1px solid var(--border); margin-right: -1px; min-width: 0; }
.xr-stat > span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.xr-stat > b { display: block; font-size: 18px; font-weight: 650; letter-spacing: -0.026em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.xr-stat > b.warn { color: var(--warn); }
.xr-stat > em { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.xr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.xr-panel { padding: 12px var(--pad) 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.xr-panel:nth-child(2n) { border-right: none; }
.xr-panel:nth-last-child(-n+2) { border-bottom: none; }
.xr-panel > h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.xr-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(60px, 1fr) 76px 76px; gap: 10px; align-items: center; padding: 5px 0; }
.xr-label { min-width: 0; }
.xr-label b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-label span { display: block; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-track .bar { height: 7px; }
.xr-num { text-align: right; font-variant-numeric: tabular-nums; }
.xr-num b { display: block; font-size: 13px; font-weight: 650; }
.xr-num span { display: block; font-size: 10.5px; color: var(--muted); }
.xr-pnl { text-align: right; font-size: 12px; }
.xr-card .empty { padding: 18px 10px 20px; }
.xr-card .empty::before { width: 26px; height: 26px; background-size: 15px; margin-bottom: 8px; }

@media (max-width: 1180px) { .xr-grid { grid-template-columns: minmax(0, 1fr); } .xr-panel { border-right: none; } .xr-panel:last-child { border-bottom: none; } }
@media (max-width: 640px) { .xr-row { grid-template-columns: minmax(0, 1fr) 66px 70px; } .xr-track { display: none; } }

/* The engine-preview action sits between the sizer's own verdict and the
   engine's, so it reads as the bridge between them rather than a third
   result. */
.pv-run { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; }
.pv-run .hint { flex: 1 1 260px; min-width: 0; }
.pv-run code { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; background: var(--surface-2); padding: 1px 4px; border-radius: var(--r-xs); }

/* ── UI 7.0: the X-ray panels are disclosures on a phone, plain on the desk ── */
details.xr-panel > summary { list-style: none; cursor: default; }
details.xr-panel > summary::-webkit-details-marker { display: none; }
details.xr-panel > summary > h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
@media (min-width: 641px) { details.xr-panel > summary { pointer-events: none; } }
@media (max-width: 640px) {
  details.xr-panel { padding-top: 0; padding-bottom: 0; }
  details.xr-panel > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  details.xr-panel > summary > h4 { margin: 0; color: var(--text-2); }
  details.xr-panel > summary::after {
    content: ""; width: 16px; height: 16px; flex-shrink: 0; background: var(--faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur-2) var(--spring);
  }
  details.xr-panel[open] > summary::after { transform: rotate(180deg); }
  details.xr-panel[open] { padding-bottom: 12px; }
}
/* On a phone the sizer lives behind "Size a trade" (sheet.js borrows the
   card into #sizerSheet), so the column that holds it is not laid out. */
@media (max-width: 899px) { .risk-layout > .stack:last-child { display: none; } }