/* ==========================================================================
   exposure.css — Scenario Odds v2 "Exposure" (overview #/exposure + drill-down #/exposure/<id>)
   Builds on views.css atoms (.vw .v-panel .v-h .v-lbl .v-big .v-tabs .v-badge .v-table .v-resp
   .v-chip .v-list .v-note .v-err .v-foot) and the status atoms from scenarios.css (.sc-dot
   .sc-status .sc-src .sc-head .sc-title .sc-lede .sc-asof .sc-back .sc-dtitle .sc-dfig .sc-chart
   .sc-srcs). Tokens from base.css. Light default + html[data-theme="dark"].
   Chrome is quiet: overview sections are an uppercase eyebrow with the amber rule and no box; only
   cards and the drill-down panels carry a border. Rhythm: 12px inside, 16px between rows, 24px between sections.
   Colour only where it carries meaning: direction (good / bad for a holder) on arrows and change chips.
   ========================================================================== */

.ex { --ex-good: var(--green); --ex-bad: var(--red);
  --ex-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --ex-mono: "SF Mono", Menlo, Consolas, monospace; }
.ex .good { color: var(--ex-good); } .ex .bad { color: var(--ex-bad); } .ex .flat { color: var(--muted); }
.ex .v-panel { padding: 14px 16px 16px; }
.ex-stack { gap: 16px; }
.ex-k { font-size: 9.5px; letter-spacing: .08em; }

/* eyebrow section headers: small uppercase, amber rule, hairline to the right (the desk's h2 look) */
.ex .v-h { margin: 0 0 12px; }
.ex-eyebrow { border-left: 3px solid var(--gold); padding-left: 9px; letter-spacing: .14em; font-size: 11px; line-height: 1.2; }
.ex-eyebrow > span:first-child { flex: none; }
.ex-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--vl); min-width: 24px; order: 1; }
.ex-eyebrow > :not(:first-child) { order: 2; }
.ex-eyebrow small { font-size: 10.5px; letter-spacing: .04em; text-transform: none; color: var(--faint); font-weight: 400; }
.ex-body { display: flex; flex-direction: column; gap: 28px; }
.ex-sec { min-width: 0; }

/* --- header ------------------------------------------------------------- */
.ex-head { margin-bottom: 20px; }
.ex-head .sc-lede { max-width: 640px; }
.ex-classic { font: 600 10px/1 var(--ex-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.ex-classic:hover { color: var(--gold); }
#ex-notes:not(:empty) { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.ex-refresh-flag { font-size: 10.5px; }

/* --- kind badges: TRADED / PRICE INDEX / INFERRED ------------------------- */
.v-badge.ex-kind.market, .v-badge.ex-kind.price { color: var(--muted); border-color: var(--vl); }
.v-badge.ex-kind.inferred { color: #2f6fd6; border-color: #2f6fd6; border-style: dashed; }
html[data-theme="dark"] .v-badge.ex-kind.inferred { color: #4c8dff; border-color: #4c8dff; }
.v-badge.ex-adverse { color: var(--faint); border-style: dotted; }

/* --- arrows --------------------------------------------------------------- */
.ex-arrow { display: inline-block; font-size: 11px; line-height: 1; flex: none; }
.ex-arrow.big { font-size: 16px; width: 22px; text-align: center; }
.ex-arrow.flat { color: var(--faint); }

/* --- 2. exposure strip: one single-line row per lane, arrow + label dominant ---- */
.ex-strip { display: flex; flex-direction: column; }
.ex-strip-row { display: grid; grid-template-columns: minmax(140px, 180px) 22px minmax(160px, 1fr) auto minmax(0, 1.2fr);
  gap: 0 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hairline, var(--vl)); min-width: 0; }
.ex-strip-row:last-child { border-bottom: 0; }
.ex-strip-lane { font: 600 10.5px/1.2 var(--ex-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-strip-lane:hover { color: var(--gold); }
.ex-strip-lbl { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--ex-sans); letter-spacing: -.01em;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ex-strip-chg { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ex-strip-fast { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-align: right; }
.ex-strip-fast .k { font: 600 9.5px/1 var(--ex-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ex-strip-fast a { color: var(--text); border-bottom: 1px dotted var(--faint); }
.ex-strip-fast a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.ex-strip-fast .v-mono { color: var(--text); }

/* --- 3. lane sections + cards ---------------------------------------------- */
.ex-lane-note { font-size: 11px; color: var(--faint); line-height: 1.45; margin: -4px 0 12px; max-width: 900px; }
.ex-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ex-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 16px; border-radius: 2px; border: 1px solid var(--vl);
  background: var(--panel); color: var(--text); }
.ex-card.na { border-style: dashed; }
.ex-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ex-card-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.ex-card-name { font: 700 14px/1.2 var(--ex-sans); color: var(--text); }
.ex-card-name:hover { color: var(--gold); }
.ex-card .sc-card-scn { font-size: 12px; color: var(--muted); margin-top: -4px; }
.ex-card-fig { display: grid; grid-template-columns: 1fr 130px; gap: 12px; align-items: end; }
.ex-card-val { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.ex-card-val .v-big { font-size: 28px; }
.ex-card-val .v-big.dim, .ex-dfig .v-big.dim { color: var(--faint); }
.ex-now-lbl { font: 600 11px/1 var(--ex-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.ex-now-lbl.big { font-size: 13px; }
.ex-spark { width: 100%; height: 36px; display: block; justify-self: end; }
.ex-chgs { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-chg { display: inline-flex; align-items: baseline; gap: 4px; font: 600 11px/1 var(--ex-mono); border: 1px solid var(--vl); border-radius: 2px;
  padding: 4px 7px; color: var(--muted); white-space: nowrap; }
.ex-chg small { font: 600 9px/1 var(--ex-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ex-chg.good { color: var(--ex-good); border-color: color-mix(in srgb, var(--ex-good) 45%, transparent); }
.ex-chg.bad { color: var(--ex-bad); border-color: color-mix(in srgb, var(--ex-bad) 45%, transparent); }
.ex-src { margin-top: 0; }

/* cars: the six-month average is the hero; one muted stat line; the last sales are a clean mono list */
.ex-card-val.col { flex-direction: column; align-items: flex-start; gap: 4px; }
.ex-cars-row { display: flex; align-items: baseline; gap: 8px; }
.ex-hero.v-big { font-size: 32px; font-weight: 700; }
.ex-cars-sub { font: 11.5px/1.4 var(--ex-sans); color: var(--muted); }
.ex-cars-region b { color: var(--text); font-weight: 600; }
.ex-cars-sub .v-mono { color: var(--text); }
.ex-sales { display: flex; flex-direction: column; border-top: 1px solid var(--hairline, var(--vl)); padding-top: 10px; }
.ex-sales .ex-k { margin-bottom: 4px; }
.ex-sale { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto 64px; gap: 10px; align-items: center; font: 11.5px/1.3 var(--ex-mono);
  padding: 4px 0; color: var(--text); border-bottom: 1px solid var(--hairline, var(--vl)); min-width: 0; }
.ex-sale:last-child { border-bottom: 0; }
.ex-sale:hover .ex-sale-t { color: var(--gold); }
.ex-sale-d { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.ex-sale-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-family: var(--ex-sans); font-size: 12px; }
.ex-sale-p { font-size: 11.5px; white-space: nowrap; text-align: right; font-weight: 700; }
.ex-region { display: inline-block; font: 700 8.5px/1 var(--ex-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--vl); border-radius: 2px; padding: 2px 4px; white-space: nowrap; }
.ex-region.usa { color: var(--text); }
.ex-region.europe { color: #2f6fd6; border-color: color-mix(in srgb, #2f6fd6 55%, transparent); }
html[data-theme="dark"] .ex-region.europe { color: #4c8dff; border-color: color-mix(in srgb, #4c8dff 55%, transparent); }

/* --- 4. drill-down -------------------------------------------------------- */
.ex-detail .sc-head { grid-template-columns: 1fr minmax(260px, 340px); align-items: stretch; margin-bottom: 16px; }
.ex-dfig { gap: 8px; border-left: 2px solid var(--text); }
.ex-dfig .sc-dval .v-big { font-size: 40px; color: var(--text); }
.ex-chart { height: 300px; }

/* tables in the drill-down */
.ex-tbl td.nol { text-align: left; }
.ex-txt { font-family: var(--ex-sans); text-align: left !important; white-space: normal !important; line-height: 1.3; }
.ex-unsold td { color: var(--muted); }
.v-badge.ex-sold { color: var(--ex-good); border-color: color-mix(in srgb, var(--ex-good) 50%, transparent); }
.v-badge.ex-unsold-b { color: var(--faint); border-style: dashed; }
.ex-params { width: auto; min-width: 260px; max-width: 520px; font-size: 12px; }
.ex-params th:last-child, .ex-params td:last-child { text-align: right; }
.ex-param-k { font-family: var(--ex-sans); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.ex-params-wrap { margin-top: 8px; }

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .ex-detail .sc-head { grid-template-columns: 1fr; }
  .ex-strip-row { grid-template-columns: minmax(120px, 160px) 22px 1fr auto; }
  .ex-strip-fast { grid-column: 1 / -1; text-align: left; padding-top: 2px; }
}
@media (max-width: 640px) {
  .ex .v-panel { padding: 12px 14px 14px; }
  .ex-stack { gap: 12px; }
  .ex-body { gap: 20px; }
  .ex-head { margin-bottom: 16px; }
  .ex-head .sc-asof { align-items: flex-start; }
  .ex-eyebrow { flex-wrap: wrap; }
  .ex-eyebrow::after { display: none; }
  .ex-strip-row { grid-template-columns: 22px 1fr auto; gap: 2px 10px; padding: 10px 0; }
  .ex-strip-lane { grid-column: 1 / -1; }
  .ex-strip-lbl { font-size: 14px; }
  .ex-strip-fast { grid-column: 1 / -1; white-space: normal; }
  .ex-cards { grid-template-columns: 1fr; }
  .ex-card { padding: 12px 14px 14px; }
  .ex-card-fig { grid-template-columns: 1fr 96px; }
  .ex-card-val .v-big { font-size: 24px; }
  .ex-hero.v-big { font-size: 28px; }
  .ex-sale { grid-template-columns: max-content minmax(0, 1fr) auto 60px; gap: 8px; }
  .ex-dfig .sc-dval .v-big { font-size: 32px; }
  .ex-chart { height: 240px; }
  .v-table.v-resp td.nol { grid-column: 1 / -1; justify-content: flex-start; gap: 6px; }
}