/* Validation page (validation.html) */
.vl { max-width: 1240px; margin: 0 auto; padding: 16px 20px 40px; display: grid; gap: 16px; }
.vl h2 { margin: 0 0 6px; font-size: 18px; }
.vl h3 { margin: 0 0 6px; font-size: 14px; }
.vl-intro p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--wlv-ink2); max-width: 980px; }
.vl-intro strong, .vl-intro em { color: var(--wlv-ink); }
.vl-howgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin: 6px 0 10px; }
.vl-keys { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--wlv-ink2); line-height: 1.45; }
.vl-meta { font-size: 13px; color: var(--wlv-muted); }
.vl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vl-params-d { flex: 1 1 100%; font-size: 13px; }
.vl-params-d > summary { cursor: pointer; font-weight: 650; color: var(--wlv-accent); }
.vl-dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 8px 0 4px; font-size: 13px; }
.vl-dl dt { color: var(--wlv-ink2); } .vl-dl dd { margin: 0; font-weight: 600; }
.vl-rerun-l { font-size: 13px; color: var(--wlv-ink2); }
.vl-rerun-l select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--wlv-border); background: var(--wlv-surface); color: var(--wlv-ink); }
.vl-prog { flex: 0 1 220px; height: 8px; border-radius: 999px; background: var(--wlv-plane); box-shadow: inset 0 0 0 1px var(--wlv-border); overflow: hidden; }
.vl-prog[hidden] { display: none; }
.vl-prog > span { display: block; height: 100%; width: 0; background: var(--wlv-accent); transition: width 0.2s; }
.vl-progtext { font-size: 12.5px; color: var(--wlv-ink2); }
.vl-h2 { margin: 0 0 8px; font-size: 18px; }

/* status and role chips */
.vl-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.vl-ic { font-weight: 800; }
.vl-chip.vl-ok { color: #166534; background: rgba(22, 163, 74, 0.13); }
.vl-chip.vl-near { color: #92400e; background: rgba(217, 119, 6, 0.15); }
.vl-chip.vl-off { color: #b42318; background: rgba(220, 38, 38, 0.12); }
.vl-chip.vl-na { color: var(--wlv-muted); background: var(--wlv-plane); }
.vl-role { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 11.5px; font-weight: 650; white-space: nowrap; box-shadow: inset 0 0 0 1px currentColor; }
.vl-role-check { color: var(--wlv-ink); }
.vl-role-fitted { color: #6250d6; }
.vl-role-input { color: var(--wlv-muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vl-chip.vl-ok { color: #86efac; } :root:not([data-theme="light"]) .vl-chip.vl-near { color: #fcd34d; }
  :root:not([data-theme="light"]) .vl-chip.vl-off { color: #fca5a5; } :root:not([data-theme="light"]) .vl-role-fitted { color: #a5b4fc; }
}

/* summary cards */
.vl-score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vl-card { background: var(--wlv-surface); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--wlv-border); padding: 12px 14px; display: grid; gap: 4px; }
.vl-card-check { box-shadow: inset 0 0 0 2px var(--wlv-accent); }
.vl-card-h { font-weight: 700; font-size: 15px; }
.vl-card-s { font-size: 12.5px; color: var(--wlv-muted); }
.vl-card-v { font-size: 14px; color: var(--wlv-ink2); } .vl-card-v strong { font-size: 24px; color: var(--wlv-ink); margin-right: 2px; }
.vl-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--wlv-plane); }
.vl-bar > span.vl-ok { background: #16a34a; } .vl-bar > span.vl-near { background: #d97706; } .vl-bar > span.vl-off { background: #dc2626; }

/* differences list */
.vl-list { margin: 0; padding-left: 22px; display: grid; gap: 5px; font-size: 13.5px; }
.vl-li { line-height: 1.5; }
.vl-li > .vl-chip, .vl-li > .vl-role { margin-right: 6px; vertical-align: 1px; }
.vl-li a { color: var(--wlv-ink); font-weight: 600; text-decoration: none; } .vl-li a:hover { text-decoration: underline; }
.vl-li-v { color: var(--wlv-ink2); font-variant-numeric: tabular-nums; }

/* section nav */
.vl-nav { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 8px 0; background: var(--plane, #f4f4f1); }
.vl-nav a { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--wlv-surface); box-shadow: inset 0 0 0 1px var(--wlv-border); color: var(--wlv-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.vl-nav a:hover { box-shadow: inset 0 0 0 1px var(--wlv-accent); }
.vl-navn { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; color: #fff; background: #dc2626; }

/* sections and tables */
#vl-sections { display: grid; gap: 16px; }
.vl-sec { scroll-margin-top: 56px; }
.vl-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.vl-tally { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vl-table td, .vl-table th { white-space: normal; vertical-align: top; }
.vl-table tbody th { min-width: 240px; max-width: 420px; }
.vl-row { scroll-margin-top: 60px; }
.vl-row:target { background: var(--wlv-accent-soft); }
.vl-lab { font-weight: 600; color: var(--wlv-ink); }
.vl-src { font-size: 11.5px; color: var(--wlv-muted); margin-top: 1px; }
.vl-note { font-size: 11.5px; color: var(--wlv-ink2); margin-top: 3px; font-weight: 400; max-width: 420px; }
.vl-big { font-weight: 650; font-size: 13.5px; white-space: nowrap; }
.vl-sub { font-size: 11px; color: var(--wlv-muted); white-space: nowrap; }
.vl-stripcell { min-width: 160px; }
.vl-strip { width: 150px; height: 22px; display: block; }
.vl-axis { stroke: var(--wlv-grid); stroke-width: 1; }
.vl-band { fill: rgba(22, 163, 74, 0.12); }
.vl-range { stroke-width: 3; stroke-linecap: round; }
.vl-range.vl-ok, .vl-mean.vl-ok { stroke: #16a34a; fill: #16a34a; }
.vl-range.vl-near, .vl-mean.vl-near { stroke: #d97706; fill: #d97706; }
.vl-range.vl-off, .vl-mean.vl-off { stroke: #dc2626; fill: #dc2626; }
.vl-mean { stroke: var(--wlv-surface) !important; stroke-width: 1.5; }
.vl-uk { fill: var(--wlv-ink); stroke: var(--wlv-surface); stroke-width: 1; }

/* patient-group matrix */
.vl-seg { margin: 6px 0 8px; flex-wrap: wrap; }
.vl-matrix th, .vl-matrix td { white-space: nowrap; }
.vl-matrix tr.vl-grouphead th { padding-top: 10px; font-weight: 700; color: var(--wlv-ink); background: transparent; border-bottom: 1px solid var(--wlv-axis); }
.vl-cell { padding: 3px !important; }
.vl-cell a { display: grid; gap: 0; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: var(--wlv-ink); text-align: right; }
.vl-cell.vl-c-ok a { background: rgba(22, 163, 74, 0.12); }
.vl-cell.vl-c-near a { background: rgba(217, 119, 6, 0.17); }
.vl-cell.vl-c-off a { background: rgba(220, 38, 38, 0.15); }
.vl-cs { font-weight: 700; font-size: 13.5px; } .vl-cu { font-size: 11px; color: var(--wlv-ink2); } .vl-ci { font-size: 10.5px; color: var(--wlv-muted); }
.vl-foot { font-size: 12px; color: var(--wlv-muted); margin: 6px 0 0; }
.vl-all { margin-top: 12px; } .vl-all > summary { cursor: pointer; font-weight: 650; color: var(--wlv-accent); font-size: 13.5px; margin-bottom: 8px; }
.vl-notmod ul { margin: 0 0 8px; padding-left: 20px; font-size: 13.5px; color: var(--wlv-ink2); display: grid; gap: 4px; }

@media (max-width: 760px) {
  .vl { padding: 12px; }
  .vl-howgrid, .vl-score { grid-template-columns: 1fr; }
  .vl-table tbody th { min-width: 180px; }
}
.vl-li-sec { color: var(--wlv-muted); font-size: 12.5px; }
@media (max-width: 760px) {
  .vl-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px; padding: 8px 12px; }
  .vl-nav::-webkit-scrollbar { display: none; }
  .vl-nav a { flex: none; }
}
@media (max-width: 760px) {
  /* each measure as a card */
  .vl-table thead { display: none; }
  .vl-table, .vl-table tbody { display: block; }
  .vl-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--wlv-grid); }
  .vl-table th, .vl-table td { border: 0; padding: 0; }
  .vl-table tbody th { grid-column: 1 / -1; min-width: 0; max-width: none; }
  .vl-table td.num { text-align: left; }
  .vl-table td::before { content: attr(data-label); display: block; font-size: 10.5px; color: var(--wlv-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1px; }
  .vl-table td.vl-stripcell { grid-column: 1 / -1; }
}
.vl-subh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0 8px; font-size: 1rem; }
.vl-subh .vl-tally { font-size: .8rem; font-weight: 400; }
@media (max-width: 760px) {
  .vl-table .vl-sub { white-space: normal; }
  .vl-table tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vl-sec-h, .vl-subh { min-width: 0; }
  .vl-tally { gap: 4px; }
}