/* Vendor Selection Scorecard: builds on /styles.css tokens and /tools/shared/learn.css */

/* Hero */
.vs-hero { padding-bottom: clamp(88px, 10vw, 140px); }
.vs-back { margin-bottom: 28px; }
.vs-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.vs-meta .chip { background: rgba(255, 255, 255, .85); }

/* Shell */
.vs { background: var(--bg-2); padding: clamp(56px, 7vw, 100px) 0 clamp(64px, 8vw, 110px); scroll-margin-top: 64px; }
.vs-step, .vs-results { scroll-margin-top: 80px; }
.vs-step + .vs-step, .vs-results { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.vs-head h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 46px); max-width: 22ch; }
.vs-head > p:not(.mono) { margin-top: 16px; max-width: 40em; color: var(--text); }
.vs-card { background: #fff; border: 1px solid var(--line); padding: clamp(20px, 2.4vw, 32px); min-width: 0; }
.vs-card h3 { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); }
.vs-sub { margin-top: 8px; font-size: 16px; color: var(--text); max-width: 46em; }
.vs-print-head { display: none; }
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Status icons: always paired with text */
.vs-ico { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; font-size: 12px; font-style: normal; font-weight: 600; line-height: 1; border: 1px solid currentColor; color: var(--soft); vertical-align: -4px; }
.vs-ico--ok { color: #fff; background: #1a7f4b; border-color: #1a7f4b; }
.vs-ico--warn { color: #fff; background: #a15c00; border-color: #a15c00; }
.vs-ico--bad { color: #fff; background: #b3261e; border-color: #b3261e; }

/* Controls */
.vs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vs-field > span { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.vs-field input[type="text"] { width: 100%; min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #c9ccd2; border-radius: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.vs-field input[type="text"]:hover { border-color: #9aa0aa; }
.vs-field input[type="text"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.vs-field input[type="range"] { width: 100%; height: 44px; accent-color: var(--blue); cursor: pointer; }
.vs-field input[type="range"]:disabled { cursor: not-allowed; opacity: .55; }
.vs-val { color: var(--blue); font-family: var(--mono); font-weight: 500; }
.vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 500; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px #c9ccd2; transition: box-shadow .25s ease, color .25s ease, background-color .25s ease, transform .2s var(--ease); }
.vs-btn:hover { box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); }
.vs-btn:active { transform: scale(.98); }
.vs-btn:disabled { opacity: .45; cursor: not-allowed; }
.vs-btn--blue { background: var(--blue); color: #fff; box-shadow: none; }
.vs-btn--blue:hover { background: var(--blue-deep); color: #fff; box-shadow: none; }
.vs-link { min-height: 44px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); text-decoration: underline; text-underline-offset: 4px; }
.vs-link:hover { color: var(--blue); }
.vs-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--soft); transition: color .2s ease, background-color .2s ease; }
.vs-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vs-x:hover { color: var(--blue); background: #f3f5ff; }
:where(.vs) button:focus-visible, :where(.vs) input:focus-visible + span, .vs-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Requirement sets */
.vs-sets-wrap { margin-top: 32px; border: 0; padding: 0; min-width: 0; }
.vs-sets-wrap legend { margin-bottom: 12px; color: var(--navy); }
.vs-sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vs-set { position: relative; cursor: pointer; }
.vs-set input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vs-set__ui { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px; background: #fff; border: 1px solid var(--line); transition: border-color .2s ease, box-shadow .25s var(--ease); }
.vs-set__ui b { font-weight: 500; font-size: 17px; }
.vs-set__ui small { font-size: 14px; line-height: 1.45; color: var(--text); }
.vs-set:hover .vs-set__ui { border-color: #9aa0aa; }
.vs-set input:checked + .vs-set__ui { border-color: var(--blue); box-shadow: inset 0 3px 0 var(--blue); }
.vs-set input:focus-visible + .vs-set__ui { outline: 2px solid var(--blue); outline-offset: 2px; }

.vs-help { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.vs-help .lx-why { margin-top: 0; }

/* Requirement rows */
.vs-reqs { margin-top: 24px; display: grid; gap: 10px; counter-reset: none; }
.vs-req { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) 150px auto 44px; gap: 10px 16px; align-items: end; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--line); animation: vsIn .45s var(--ease) both; }
.vs-req.is-must { border-left-color: var(--navy); }
@keyframes vsIn { from { opacity: 0; transform: translateY(8px); } }
.vs-must { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; white-space: nowrap; }
.vs-must input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vs-must__ui { flex: none; width: 22px; height: 22px; border: 1px solid #9aa0aa; background: #fff; display: grid; place-items: center; transition: background-color .2s ease, border-color .2s ease; }
.vs-must input:checked + .vs-must__ui { background: var(--navy); border-color: var(--navy); }
.vs-must input:checked + .vs-must__ui::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.vs-must input:disabled ~ span { opacity: .6; }
.vs-must input:disabled { cursor: not-allowed; }
.vs-warn[hidden] { display: none; }
.vs-warn { margin-top: 12px; padding: 12px 14px; background: #fff7ec; border-left: 2px solid #a15c00; font-size: 15px; color: var(--ink); display: flex; gap: 10px; align-items: flex-start; }
.vs-bar-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.vs-lock { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }

/* Vendors and scoring */
.vs-waiting { display: none; margin-top: 20px; padding: 12px 14px; background: #fff7ec; border-left: 2px solid #a15c00; font-size: 15px; }
.is-waiting .vs-waiting { display: block; }
.vs-vendors-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.vs-vendors { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 auto; min-width: 0; }
.vs-vendor { display: flex; align-items: end; gap: 4px; flex: 1 1 180px; max-width: 260px; min-width: 0; }
.vs-vendor .vs-field { flex: 1; }

.vs-score-layout { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.vs-tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid #c9ccd2; scrollbar-width: thin; }
.vs-tab { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 16px; background: transparent; color: var(--text); border-bottom: 3px solid transparent; margin-bottom: -1px; text-align: left; transition: color .2s ease, border-color .25s var(--ease), background-color .2s ease; }
.vs-tab span { font-weight: 500; font-size: 16px; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-tab small { font-size: 11px; color: var(--soft); letter-spacing: .04em; }
.vs-tab:hover { color: var(--blue); }
.vs-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue); background: #fff; }
.vs-scale { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; font-size: 13px; color: var(--soft); }
.vs-scale b { font-family: var(--mono); font-weight: 500; color: var(--navy); margin-right: 2px; }
.vs-sheet { margin-top: 14px; display: grid; gap: 10px; }
.vs-empty { padding: 24px; border: 1px dashed #c9ccd2; background: #fff; color: var(--text); }
.vs-item { margin: 0; padding: 16px 18px 18px; background: #fff; border: 1px solid var(--line); min-width: 0; transition: border-color .25s ease, background-color .25s ease; }
.vs-item legend { float: left; width: 100%; padding: 0; font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
.vs-item legend + * { clear: both; }
.vs-item__cat { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.vs-item__cat b { font-weight: 500; color: var(--navy); }
.vs-item.is-fail { border-color: #b3261e; background: #fffafa; }
.vs-pips { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 12px; }
.vs-pip { position: relative; cursor: pointer; }
.vs-pip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vs-pip > span { display: grid; place-items: center; width: 44px; height: 44px; font-family: var(--mono); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid #c9ccd2; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .2s var(--ease); }
.vs-pip:hover > span { border-color: var(--blue); color: var(--blue); }
.vs-pip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }
.vs-pip:first-child input:checked + span { background: var(--bg-2); color: var(--soft); border-color: #9aa0aa; transform: none; }
.vs-pip--fail input:checked + span { background: #b3261e; border-color: #b3261e; }
.vs-pip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.vs-item__scale { margin-top: 6px; font-size: 13px; color: var(--soft); min-height: 1.2em; }
.vs-item__fail { margin-top: 8px; display: flex; gap: 8px; align-items: center; font-size: 14px; color: #b3261e; font-weight: 500; }
.vs-item__note { margin-top: 12px; }
.vs-item__note input[type="text"] { font-size: 15px; }

/* Live leaderboard */
.vs-live { position: sticky; top: 88px; display: grid; gap: 10px; }
.vs-live .lx-why { margin-top: 0; }
.vs-live__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vs-live__head > .mono { color: var(--navy); }
.vs-sample { padding: 3px 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: #f3f5ff; color: var(--blue); border: 1px solid #b9c6ff; }
.vs-progress { margin-top: 14px; font-size: 12px; color: var(--soft); letter-spacing: .04em; }
.vs-live__acts { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 0 18px; }

/* Bars (shared by leaderboard and ranking) */
.vs-bars { margin-top: 14px; display: grid; gap: 14px; }
.vs-bar__top { display: flex; align-items: baseline; gap: 10px; }
.vs-bar__top b { font-weight: 500; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-bar__rank { flex: none; width: 26px; font-size: 12px; color: var(--soft); }
.vs-bar__pct { margin-left: auto; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--navy); }
.vs-bar__track { margin-top: 6px; height: 10px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.vs-bar__fill { height: 100%; width: var(--w); background: #7f9bff; transition: width .9s var(--ease); }
.vs-bar__fill.is-zero { width: 0; transition: none; }
.vs-bar.is-lead .vs-bar__fill { background: var(--blue); }
.vs-bar.is-lead .vs-bar__pct { color: var(--blue); }
.vs-bar.is-out .vs-bar__fill { background: repeating-linear-gradient(135deg, #c9ccd2 0 6px, #e5e6ea 6px 12px); }
.vs-bar.is-out .vs-bar__pct, .vs-bar.is-out b { color: var(--soft); }
.vs-bar.is-out b { text-decoration: line-through; text-decoration-thickness: 1px; }
.vs-bar__meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.vs-bar__meta .mono { font-size: 11px; color: var(--soft); letter-spacing: .04em; }
.vs-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: 12.5px; line-height: 1.4; border: 1px solid currentColor; }
.vs-tag--ok { color: #1a7f4b; background: #f0f8f3; }
.vs-tag--warn { color: #8a4f00; background: #fff7ec; }
.vs-tag--bad { color: #b3261e; background: #fff4f3; }
.vs-bars--big .vs-bar__track { height: 18px; }
.vs-bars--big .vs-bar__pct { font-size: 22px; }

/* Results */
.vs-res-grid { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.vs-verdict { margin-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: end; }
.vs-verdict > .vs-ico { margin-right: 8px; }
.vs-verdict__k { grid-column: 1 / -1; font-size: 12px; color: var(--blue); letter-spacing: .06em; text-transform: uppercase; }
.vs-verdict__name { font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
.vs-verdict__n { font-size: clamp(40px, 5vw, 64px); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.vs-verdict__sub { grid-column: 1 / -1; font-size: 15px; color: var(--text); }
.vs-rail { margin-top: 18px; margin-bottom: 8px; }
.vs-result .lx-why { margin-top: 22px; }
.vs-sens__head { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 500; }
.vs-sens__head.is-ok { color: #1a7f4b; }
.vs-sens__head.is-warn { color: #8a4f00; }
.vs-flips { margin-top: 12px; display: grid; gap: 0; }
.vs-flips li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--text); }
.vs-flips li b { color: var(--ink); font-weight: 500; }

.vs-means { margin-top: 20px; border-left: 3px solid var(--blue); }
.vs-means__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.vs-means__body { margin-top: 14px; display: grid; gap: 12px; max-width: 64em; }
.vs-means__body p { font-size: 17px; line-height: 1.6; color: var(--ink); }

.vs-cats-card, .vs-q-card { margin-top: 20px; }
.vs-scroll { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vs-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vs-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.vs-table th, .vs-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.vs-table thead th { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); border-bottom-color: #c9ccd2; white-space: nowrap; }
.vs-table tbody th { font-weight: 500; }
.vs-cell { display: grid; gap: 4px; }
.vs-cell i { display: block; height: 4px; width: var(--w); background: #b9c6ff; transition: width .6s var(--ease); }
.vs-table td.is-best { color: var(--blue); font-weight: 500; }
.vs-table td.is-best .vs-cell i { background: var(--blue); }

.vs-questions { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.vs-qcol { background: #fff; padding: 18px 20px; min-width: 0; }
.vs-qcol h4 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 18px; font-weight: 500; }
.vs-qcol h4 .mono { font-size: 11px; color: var(--soft); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.vs-qcol ol { margin-top: 10px; display: grid; gap: 0; }
.vs-qcol li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink); }
.vs-q__k { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.vs-q--low .vs-q__k { color: #b3261e; }
.vs-q--un .vs-q__k { color: var(--blue); }
.vs-q--ev .vs-q__k { color: #8a4f00; }

.vs-teach { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* Responsive */
@media (max-width: 1020px) {
  .vs-score-layout, .vs-res-grid, .vs-teach { grid-template-columns: 1fr; }
  .vs-live { position: static; }
  .vs-req { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .vs-req__q { grid-column: 1 / 3; }
  .vs-req .vs-x { grid-column: 3; grid-row: 1; }
  .vs-req__c { grid-column: 1 / 2; }
  .vs-req__w { grid-column: 2 / 3; }
  .vs-must { grid-column: 1 / 3; }
}
@media (max-width: 720px) {
  .vs-sets, .vs-help { grid-template-columns: 1fr; }
  .vs-req { grid-template-columns: minmax(0, 1fr) 44px; padding: 12px; }
  .vs-req__q, .vs-req__c, .vs-req__w, .vs-must { grid-column: 1 / 2; }
  .vs-req .vs-x { grid-column: 2; grid-row: 1; }
  .vs-lock { margin-left: 0; }
  .vs-bar-actions .vs-btn { flex: 1 1 100%; }
  .vs-vendor { max-width: none; flex-basis: 100%; }
  .vs-vendors-row .vs-btn { width: 100%; }
  .vs-pips { gap: 0; flex-wrap: nowrap; }
  .vs-pip + .vs-pip { margin-left: -1px; }
  .vs-pip input:checked + span { position: relative; z-index: 1; }
  .vs-item { padding: 14px 10px 16px; }
  .vs-means__head .lx-actions { width: 100%; }
  .vs-means__head .lx-act { flex: 1 1 calc(50% - 10px); justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-req { animation: none; }
  .vs-bar__fill, .vs-cell i, .vs-pip > span, .vs-set__ui { transition: none; }
}

/* Print: a clean report of the result */
@media print {
  .vs-hero, #req-step, #score-step, .lx-why, .vs-teach .lx-note { display: none !important; }
  .vs { padding: 0; background: #fff; }
  .vs-print-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .vs-results { margin-top: 12px; padding-top: 0; border: 0; }
  .vs-res-grid, .vs-teach { grid-template-columns: 1fr; }
  .vs-card { break-inside: avoid; padding: 14px; }
  .vs-scroll { overflow: visible; }
  .vs-table { min-width: 0; }
  .vs-bar__fill { transition: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Grid children may shrink below their content width, so the vendor tabs scroll inside their bar on very narrow screens */
.vs-score-layout > *, .vs-score-main, .vs-sheet > * { min-width: 0; }
/* Narrowest phones: the joined score bar is wider than the screen, so let it wrap and keep 44px targets */
@media (max-width: 360px) { .vs-pips { flex-wrap: wrap; gap: 4px; } .vs-pip + .vs-pip { margin-left: 0; } }