/* VOLURR — P7.6 specialist discovery + P7.11 matchup.
   ================================================================================================
   Two surfaces that must survive a 375px phone in RTL. The rule that does most of the work here is
   `flex: 0 0 auto` on anything inside a scrolling flex column: without it a browser squeezes the
   children instead of scrolling the parent, and rows lose their lower halves — measured once
   already on the analysis dock, where seven sections were clipped while every content check passed.

   Colour never carries a verdict on its own. Every result also states itself in words, so the
   surface still works in monochrome and for a reader who cannot separate the hues. */

/* ── specialist board ───────────────────────────────────────────────────────────────────────── */
.vspec-hd h3 { margin: 0 0 4px; font-size: 14px; font-weight: 650; color: var(--txt, #eef2fa); }
.vspec-hd p { margin: 0 0 var(--sp-5, 12px); font-size: 12px; line-height: 1.6;
              color: var(--t-muted, #7a839a); max-inline-size: 62ch; }

.vspec-chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2, 6px); margin-block-end: var(--sp-5, 12px);
}
.vspec-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2, 6px); cursor: pointer;
  padding: var(--sp-2, 6px) var(--sp-4, 10px); border-radius: var(--rad-pill, 999px); font: 600 12px/1 inherit;
  background: var(--bg2, #0b0f1a); color: var(--t-secondary, #bcc5d8);
  border: 1px solid var(--line, #1e2536);
}
.vspec-chip i { font-style: normal; font-size: 10.5px; opacity: .75;
                font-variant-numeric: tabular-nums; }
.vspec-chip.on { color: var(--brand, #e23b3b);
                 border-color: color-mix(in srgb, var(--brand, #e23b3b) 55%, transparent); }
.vspec-chip:focus-visible, .vmatch-open:focus-visible, .vmatch-x:focus-visible {
  outline: 2px solid var(--brand, #e23b3b); outline-offset: 2px;
}

.vspec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
              gap: 1px; background: var(--line, #1e2536);
              border: 1px solid var(--line, #1e2536); border-radius: var(--rad-md, 10px);
              overflow: hidden; }
.vspec-row {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-5, 12px);
  padding: 10px var(--sp-5, 12px); background: var(--bg2, #0b0f1a);
}
.vspec-rank {
  flex: 0 0 auto; inline-size: 24px; text-align: center;
  font: 700 12px/1 var(--vt-mono, monospace); color: var(--t-muted, #7a839a);
  font-variant-numeric: tabular-nums;
}
.vspec-who { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--txt, #eef2fa);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vspec-m { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
           min-inline-size: 58px; }
.vspec-m b { font: 600 12.5px/1.2 var(--vt-mono, monospace); color: var(--txt, #eef2fa);
             font-variant-numeric: tabular-nums; }
.vspec-m i { font-style: normal; font-size: 9.5px; letter-spacing: .04em;
             text-transform: uppercase; color: var(--t-muted, #7a839a); }
/* The SCORE is the ranking key, so it is the one figure allowed emphasis; the raw rate sits beside
   it deliberately unemphasised, because that is the number a reader over-reads. */
.vspec-m[data-k="score"] b { color: var(--brand, #e23b3b); }
.vspec-mat {
  flex: 0 0 auto; font-size: 10.5px; padding: var(--sp-1, 4px) var(--sp-3, 8px); border-radius: var(--rad-pill, 999px);
  color: var(--t-muted, #7a839a); border: 1px solid var(--line-3, #1e2536); white-space: nowrap;
}
.vspec-note, .vspec-foot { margin: var(--sp-5, 12px) 0 0; font-size: 11.5px; line-height: 1.6;
                           color: var(--t-muted, #7a839a); }
.vspec-empty {
  display: flex; flex-direction: column; gap: var(--sp-2, 6px); padding: var(--sp-8, 18px);
  border: 1px dashed var(--line-3, #1e2536); border-radius: var(--rad-md, 10px);
  text-align: center;
}
.vspec-empty b { font-size: 13px; color: var(--t-secondary, #bcc5d8); }
.vspec-empty span { font-size: 11.5px; line-height: 1.6; color: var(--t-muted, #7a839a); }
.vspec-load { padding: var(--sp-8, 18px); text-align: center; font-size: 12px;
              color: var(--t-muted, #7a839a); }

/* ── matchup ────────────────────────────────────────────────────────────────────────────────── */
.vmatch { position: fixed; inset: 0; z-index: var(--z-overlay, 1000); display: flex; align-items: center;
          justify-content: center; padding: var(--sp-7, 16px);
          background: var(--scrim, color-mix(in srgb, #000 62%, transparent)); }
.vmatch-sheet { display: flex; flex-direction: column; inline-size: min(880px, 100%);
                max-block-size: min(88vh, 940px); background: var(--bg2, #0b0f1a);
                color: var(--txt, #eef2fa); border: 1px solid var(--line, #1e2536);
                border-radius: var(--rad-lg, 14px); overflow: hidden;
                box-shadow: var(--el-4); }
.vmatch-hd { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-5, 12px);
             padding: var(--sp-7, 16px); border-block-end: 1px solid var(--line, #1e2536); }
.vmatch-hd h2 { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
.vmatch-x { flex: 0 0 auto; inline-size: 30px; block-size: 30px; border-radius: var(--rad-sm, 9px);
            display: grid; place-items: center; cursor: pointer; background: transparent;
            color: var(--t-muted, #7a839a); border: 1px solid var(--line, #1e2536); }
.vmatch-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-7, 16px);
               display: flex; flex-direction: column; gap: var(--sp-5, 12px); }
.vmatch-note { flex: 0 0 auto; margin: 0; font-size: 11.5px; line-height: 1.6;
               color: var(--t-muted, #7a839a); }
.vmatch-note.warn { color: var(--warn, #f59e0b); }
.vmatch-cols { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr;
               gap: var(--sp-5, 12px); }
.vmatch-col { display: flex; flex-direction: column; gap: var(--sp-3, 8px);
              border: 1px solid var(--line, #1e2536); border-radius: var(--rad-md, 10px);
              padding: var(--sp-5, 12px); background: var(--bg2, #0b0f1a); }
.vmatch-top { display: flex; align-items: center; gap: var(--sp-3, 8px); }
.vmatch-who { flex: 1; font-size: 12px; color: var(--t-muted, #7a839a); }
.vmatch-res { flex: 0 0 auto; font-style: normal; font-size: 11.5px; font-weight: 650;
              padding: var(--sp-1, 4px) var(--sp-3, 8px); border-radius: var(--rad-pill, 999px); white-space: nowrap;
              color: var(--t-muted, #7a839a); border: 1px solid var(--line-3, #1e2536); }
.vmatch-res.ok { color: var(--up, #13A496);
                 border-color: color-mix(in srgb, var(--up, #13A496) 45%, transparent); }
.vmatch-res.bad { color: var(--down, #D60400);
                  border-color: color-mix(in srgb, var(--down, #D60400) 45%, transparent); }
.vmatch-res.live { color: var(--warn, #f59e0b);
                   border-color: color-mix(in srgb, var(--warn, #f59e0b) 45%, transparent); }
.vmatch-grid { display: flex; flex-direction: column; gap: 1px; background: var(--line, #1e2536);
               border: 1px solid var(--line, #1e2536); border-radius: var(--rad-sm, 9px);
               overflow: hidden; }
.vmatch-row { flex: 0 0 auto; display: flex; align-items: baseline; gap: var(--sp-3, 8px);
              padding: var(--sp-3, 8px) var(--sp-4, 10px); background: var(--bg2, #0b0f1a); }
.vmatch-row > span { flex: 1; min-width: 0; font-size: 11.5px; color: var(--t-muted, #7a839a); }
.vmatch-row > b { font: 500 11.5px/1.35 var(--vt-mono, monospace); color: var(--txt, #eef2fa);
                  text-align: end; font-variant-numeric: tabular-nums; word-break: break-all; }
.vmatch-hash code { font: 500 10.5px/1.5 var(--vt-mono, monospace);
                    color: var(--t-muted, #7a839a); word-break: break-all; }
.vmatch-open { cursor: pointer; font: 600 12px/1 inherit; padding: var(--sp-3, 8px) var(--sp-4, 10px);
               border-radius: var(--rad-sm, 9px); background: transparent;
               color: var(--brand, #e23b3b);
               border: 1px solid color-mix(in srgb, var(--brand, #e23b3b) 40%, transparent); }

/* NARROW SCREENS STACK. Two columns squeezed into 375px make every value wrap to three lines and
   push the core facts behind a sideways scroll, which is not a comparison a reader can use. */
@media (max-width: 700px) {
  .vmatch-cols { grid-template-columns: 1fr; }
  .vmatch { padding: 0; align-items: flex-end; }
  .vmatch-sheet { max-block-size: 94vh; border-radius: var(--rad-lg, 14px) var(--rad-lg, 14px) 0 0; }
}
@media (max-width: 560px) {
  /* The specialist row reflows rather than clipping: the name takes its own line and the three
     figures share the next one. */
  .vspec-row { flex-wrap: wrap; row-gap: var(--sp-3, 8px); }
  .vspec-who { flex: 1 1 100%; order: 1; white-space: normal; }
  .vspec-rank { order: 0; }
  .vspec-m { flex: 1 1 auto; align-items: flex-start; min-inline-size: 0; }
  .vspec-mat { order: 5; }
}

:root[data-theme="light"] .vspec-row,
:root[data-theme="light"] .vspec-chip,
:root[data-theme="light"] .vmatch-sheet,
:root[data-theme="light"] .vmatch-col,
:root[data-theme="light"] .vmatch-row { background: var(--card); color: var(--txt); }