/* validate.css: the browser validator at getskillcheck.com/check.
   Loads AFTER the site's own /brand.css and /pages.css. Tokens only; nothing here redefines chrome. */

/* what are you checking: a ruled row of three buttons, like the reports grade filters */
.val-input { padding: var(--sc-space-7) 0 var(--sc-space-8); }
.picker-h { margin: 0 0 var(--sc-space-3); font-size: var(--sc-text-small); font-weight: 600; color: var(--sc-ink-800); }
.picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--sc-ink-200); border: 1px solid var(--sc-ink-200); }
.picker button { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-space-1); min-height: 44px; padding: var(--sc-space-4) var(--sc-space-5); border: 0; background: var(--sc-paper); text-align: left; cursor: pointer; font: inherit; transition: background var(--sc-dur-fast) ease; }
.picker button:hover { background: var(--sc-paper-2); }
.picker button[aria-pressed="true"] { background: var(--sc-paper-2); outline: 2px solid var(--sc-ink-950); outline-offset: -2px; }
.picker button:focus-visible { outline: 2px solid var(--sc-green-700); outline-offset: -2px; }
.picker b { font-family: var(--sc-font-mono); font-size: var(--sc-text-body); font-weight: 600; color: var(--sc-ink-950); }
.picker span { font-size: var(--sc-text-small); color: var(--sc-ink-600); }
@media (max-width: 600px) { .picker { grid-template-columns: 1fr; } }

/* input and results side by side */
/* stacked: the input, then the results under it, both full width */
.val-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-space-7); margin-top: var(--sc-space-6); }
.val-pane { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(60px + var(--sc-space-4)); }
.pane-label { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-4); min-height: 44px; margin-bottom: var(--sc-space-2); }
.pane-label .l { font-size: var(--sc-text-small); font-weight: 600; color: var(--sc-ink-800); }
.load { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 var(--sc-text-small) var(--sc-font-body); color: var(--sc-ink-800); text-decoration: underline; text-decoration-color: var(--sc-green-700); text-underline-offset: 4px; }
.load:hover { color: var(--sc-green-700); }

/* grows with what you paste (field-sizing), so nothing is cut; browsers without it keep min-height and resize */
#editor { width: 100%; field-sizing: content; min-height: 320px; resize: vertical; padding: var(--sc-space-4) var(--sc-space-5); border: 1px solid var(--sc-ink-400); border-radius: 0; background: var(--sc-paper); color: var(--sc-ink-950); font-family: var(--sc-font-mono); font-size: var(--sc-text-small); line-height: 1.65; }
#editor::placeholder { color: var(--sc-ink-500); }
#editor:focus-visible { outline: 2px solid var(--sc-green-700); outline-offset: 0; border-color: var(--sc-green-700); }
.check-btn { align-self: flex-start; margin-top: var(--sc-space-4); }
.btn[disabled] { background: var(--sc-ink-300); color: var(--sc-ink-600); cursor: not-allowed; }
.wasm-status:empty { display: none; }
.wasm-status .err { color: var(--sc-critical); font-weight: 600; }

/* results */
.res-pane { display: flex; flex-direction: column; border: 1px solid var(--sc-ink-200); background: var(--sc-paper); }
.res-empty { padding: var(--sc-space-6); }
.res-empty .stat { font-family: var(--sc-font-mono); font-size: var(--sc-text-h1); font-weight: 700; line-height: 1; color: var(--sc-ink-950); font-variant-numeric: tabular-nums; }
.res-empty .stat small { font-size: var(--sc-text-small); font-weight: 400; color: var(--sc-ink-500); margin-left: var(--sc-space-2); }
.res-empty p { margin: var(--sc-space-3) 0 0; max-width: 640px; font-size: var(--sc-text-body); line-height: 1.55; color: var(--sc-ink-600); }
.res-empty .src-line { max-width: none; }
.res-empty h3 { font-size: var(--sc-text-h3); color: var(--sc-ink-950); }
.res-empty .err-msg { font-family: var(--sc-font-mono); font-size: var(--sc-text-small); color: var(--sc-ink-800); overflow-wrap: anywhere; }

.res-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-space-2) var(--sc-space-4); padding: var(--sc-space-5); border-bottom: 1px solid var(--sc-ink-200); }
.res-head .grade { font-size: var(--sc-text-h3); font-weight: 600; }
.res-head .verdict { font-size: var(--sc-text-h3); font-weight: 600; color: var(--sc-ink-950); }
.head-note { font-family: var(--sc-font-mono); font-size: var(--sc-text-label); color: var(--sc-ink-600); }

/* scores: overall plus the three Pro scores, in a ruled row */
.score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--sc-ink-200); border-bottom: 1px solid var(--sc-ink-200); }
.score-cell { display: flex; flex-direction: column; gap: var(--sc-space-2); min-width: 0; min-height: 44px; padding: var(--sc-space-4); background: var(--sc-paper); text-decoration: none; color: inherit; }
.score-cell .sv { font-family: var(--sc-font-mono); font-size: var(--sc-text-h2); font-weight: 700; line-height: 1; color: var(--sc-ink-950); font-variant-numeric: tabular-nums; }
.score-cell .sl { font-size: var(--sc-text-small); font-weight: 600; color: var(--sc-ink-800); }
.score-cell .partial { font-family: var(--sc-font-mono); font-size: var(--sc-text-label); color: var(--sc-ink-600); }
.score-cell.locked { transition: background var(--sc-dur-fast) ease; }
.score-cell.locked:hover { background: var(--sc-paper-2); }
.score-cell.locked:focus-visible { outline-offset: -2px; }
.score-cell.locked .lock { color: var(--sc-ink-600); }
.score-cell.locked .tier { align-self: flex-start; }
@media (max-width: 520px) { .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tools-count { margin: 0; padding: var(--sc-space-3) var(--sc-space-5); border-bottom: 1px solid var(--sc-ink-200); font-family: var(--sc-font-mono); font-size: var(--sc-text-label); color: var(--sc-ink-600); }

/* findings: one row per finding, severity word first; no side bars, no tints */
.findings { padding: var(--sc-space-5); }
.f-group-h:first-child { margin-top: 0; }
.f-group-h { margin: var(--sc-space-5) 0 0; padding-bottom: var(--sc-space-2); border-bottom: 2px solid var(--sc-ink-950); font-size: var(--sc-text-body); color: var(--sc-ink-950); }
.finding { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sc-space-1) var(--sc-space-3); padding: var(--sc-space-3) 0; border-bottom: 1px solid var(--sc-ink-200); }
.finding .sev { padding-top: 2px; }
.finding .fid { font-family: var(--sc-font-mono); font-size: var(--sc-text-label); color: var(--sc-ink-600); overflow-wrap: anywhere; }
.finding .ln { margin-left: var(--sc-space-2); color: var(--sc-ink-500); }
.finding .fmsg { grid-column: 2; margin: 0; font-size: var(--sc-text-body); line-height: 1.5; color: var(--sc-ink-950); }
.finding .ffix { grid-column: 2; margin: 0; font-size: var(--sc-text-small); line-height: 1.5; color: var(--sc-green-700); }
@media (max-width: 520px) { .finding { grid-template-columns: 1fr; } .finding .fmsg, .finding .ffix { grid-column: 1; } }
.all-clear { padding: var(--sc-space-5) 0 0; }
.all-clear h3 { font-size: var(--sc-text-h3); color: var(--sc-green-700); }
.all-clear p { margin: var(--sc-space-2) 0 0; font-size: var(--sc-text-body); color: var(--sc-ink-600); }
.passed-count { margin: var(--sc-space-4) 0 0; font-family: var(--sc-font-mono); font-size: var(--sc-text-label); color: var(--sc-ink-500); }

/* what Pro adds, after the results */
/* a band under the scores, on paper-2: text left, the buy button right; no frame inside the frame */
.pro-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-space-5) var(--sc-space-7); align-items: end; padding: var(--sc-space-5); border-bottom: 1px solid var(--sc-ink-200); background: var(--sc-paper-2); }
.pro-callout p:not(.tax), .pro-callout h3 { max-width: 640px; }
@media (max-width: 760px) { .pro-callout { grid-template-columns: minmax(0, 1fr); } }
.pro-callout h3 { margin-top: var(--sc-space-3); font-size: var(--sc-text-h3); color: var(--sc-ink-950); }
.pro-callout p { margin: var(--sc-space-3) 0 0; font-size: var(--sc-text-body); line-height: 1.55; color: var(--sc-ink-600); }
.pro-callout .pc-cats { font-family: var(--sc-font-mono); font-size: var(--sc-text-label); line-height: 1.6; color: var(--sc-ink-800); }
.pro-callout .btn { width: 100%; }
.pro-callout .tax { margin-top: var(--sc-space-2); font-size: var(--sc-text-small); }