/* Data components: scan list, submit form, scan page. Status colours mean status only;
   every status is an icon plus a word plus the exact C1 field value in small type. */

main.page { padding: var(--s6) 0 var(--s7); }
/* the scan and report pages share the landing page's grounds: teal into pink into teal, then the pink footer (Nabira, 22 Oct) */
html:has(> body.scan-page), html:has(> body.report-page) { background: #f2dde0; }
body.scan-page, body.report-page { background: linear-gradient(180deg, #d6e9e4 0%, #f2dde0 38%, #d6e9e4 70%, #f2dde0 100%); } /* taste-skill-ignore: the section grounds blending, Nabira's ask */
/* the page head: "Scan", the id in mono under it, the job chip, the report button, the field-names switch */
.pagehead-title { display: grid; gap: 2px; min-width: 0; }
.scan-id { display: block; font-family: var(--mono); font-size: .95rem; color: var(--text-dim); overflow-wrap: anywhere; user-select: all; }
.scan-id:empty { display: none; }
.fields-toggle { flex: none; }
/* the raw C1 field lines and issue codes show only when asked for (js/fields.js sets data-fields on body) */
body[data-fields="off"] .field, body[data-fields="off"] .issue > strong, body[data-fields="off"] .issue .origin { display: none; }
td > .plain { display: block; font-weight: 600; }
td > .sub { display: block; }
section.card, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); margin-bottom: var(--s4); box-shadow: var(--shadow-sm); }
.card > h2, .card > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); font-family: var(--font); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; margin-bottom: var(--s4); }
.sub { color: var(--text-dim); font-size: .86rem; font-family: var(--font); font-weight: 400; }
.grid2 { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }

.crumbs { display: flex; gap: var(--s2); font-size: .88rem; color: var(--text-dim); margin-bottom: var(--s3); }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-bottom: var(--s4); }
.pagehead h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.2rem); overflow-wrap: anywhere; }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4) var(--s5); margin: 0 0 var(--s5); padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.meta:empty { display: none; }
.meta dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.meta dd { margin: 2px 0 0; font-weight: 550; overflow-wrap: anywhere; }
.meta dd code { font-size: .85rem; color: var(--text); }

/* status chip */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 55%, transparent); font-size: .82rem; font-weight: 600; line-height: 1.5; overflow-wrap: normal; word-break: normal; }
.chip .ico { font-size: .9rem; }
.chip.ok { color: var(--st-ok); } .chip.warn { color: var(--st-warn); } .chip.bad { color: var(--st-bad); }
.chip.info { color: var(--st-info); } .chip.neutral { color: var(--st-neutral); }
.field { display: block; font-family: var(--mono); font-size: .72rem; color: var(--text-dim); margin-top: 3px; }

.banner { border-left: 4px solid var(--st-neutral); }
.banner.ok { border-left-color: var(--st-ok); } .banner.warn { border-left-color: var(--st-warn); }
.banner.bad { border-left-color: var(--st-bad); } .banner.info { border-left-color: var(--st-info); }
.banner .big { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--s3); }
.banner .big .chip { font-size: 1rem; padding: 4px 14px; }

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
th, td { text-align: left; padding: 12px var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--text-dim); background: var(--surface-2); font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
th:first-child { border-top-left-radius: var(--radius-sm); } th:last-child { border-top-right-radius: var(--radius-sm); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
td a { font-family: var(--mono); font-size: .85rem; font-weight: 500; }
.tablewrap { overflow-x: auto; }

.issue { border-left: 3px solid var(--st-warn); background: var(--surface-2); border-radius: 0 6px 6px 0; padding: var(--s2) var(--s3); margin: var(--s2) 0; font-size: .88rem; }
.issue.pipeline { border-left-color: var(--st-bad); }
.origin { font-family: var(--mono); font-size: .72rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; margin-left: 4px; color: var(--text-dim); }

/* trail of 10 stages */
.trail { list-style: none; margin: var(--s2) 0 var(--s3); padding: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; position: relative; }
.trail li { text-align: center; font-size: .74rem; color: var(--text-dim); padding-top: 28px; position: relative; }
.trail li::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 2px; background: var(--line); }
.trail li::after { content: ""; position: absolute; top: 7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.trail li.done::before { background: var(--accent-display); } .trail li.done::after { background: var(--accent-display); border-color: var(--accent-display); }
.trail li.now { color: var(--text); font-weight: 700; }
.trail li.now::after { border-color: var(--accent-display); box-shadow: 0 0 0 4px var(--accent-soft); }
.trail-now { margin: var(--s2) 0 0; font-size: .9rem; color: var(--text); }
.trail-now .sub { font-size: .84rem; }
#scan-report-link { margin-left: auto; }
#scan-report-link:empty { display: none; }

/* fix verification, two sides */
.twoside { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.side { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s4); background: var(--surface-2); }
.side h3 { font-size: .92rem; }
.fixresult { margin-top: var(--s5); }
.passed-line { margin-top: var(--s3); display: flex; align-items: center; gap: var(--s2); }

/* submit form */
form.submit { display: grid; gap: var(--s4); }
label { display: grid; gap: 6px; font-size: .86rem; font-weight: 550; color: var(--text-dim); }
input, select { background: var(--bg); border: 1px solid var(--line-strong); color: var(--text); border-radius: var(--radius-sm); padding: 11px var(--s3); font: inherit; font-size: .95rem; transition: border-color calc(var(--motion) / 4), box-shadow calc(var(--motion) / 4); }
input:focus { border-color: var(--cta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta) 22%, transparent); outline: none; }
input::placeholder { color: var(--text-dim); opacity: .75; }
input[type="file"] { padding: 8px; }
input[type="file"]::file-selector-button { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 6px 12px; margin-right: var(--s3); cursor: pointer; }
.or { display: flex; align-items: center; gap: var(--s3); font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form-msg:empty { display: none; }

.empty { text-align: center; color: var(--text-dim); padding: var(--s5); }
.empty svg { width: 56px; margin-bottom: var(--s2); color: var(--text-dim); }
.rate { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .grid2, .twoside { grid-template-columns: 1fr; }
  .trail { grid-template-columns: 1fr; gap: var(--s2); }
  .trail li { text-align: left; padding: 0 0 0 30px; }
  .trail li::before { display: none; }
  .trail li::after { top: 4px; left: 4px; }
}
@media print {
  .card, .meta { border-color: #999; box-shadow: none; }
}

/* narrow screens: nothing may force a horizontal page scroll */
main, .card, .grid2 > *, .twoside > * { min-width: 0; }
/* form fields shrink with the column (found 17 Oct: inputs stuck out 22 px at 390 px) */
form.submit, form.submit > *, label { min-width: 0; }
input, select { min-width: 0; width: 100%; }
th, td { overflow-wrap: break-word; }
.issue { overflow-wrap: anywhere; }
/* inside a table an issue keeps a readable width; the table scrolls sideways in .tablewrap instead of
   squeezing the column to a few letters per line (found 17 Oct at 390 px) */
td .issue { min-width: 13rem; }

/* static findings list (17 Oct): below the static runs, inside the static card; amber tool reports only */
.static-list { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px dashed var(--line-strong); }
.static-list h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.static-list td code { color: var(--text); }
.static-list .chip { white-space: nowrap; }
.static-findings td:nth-child(1) { width: 1%; }
.static-findings td:nth-child(3) { min-width: 13rem; }
.static-findings td:nth-child(3) code { overflow-wrap: anywhere; }
.static-findings td:nth-child(2) { min-width: 11rem; }
.static-findings td:nth-child(5) { min-width: 16rem; }
.static-list > button { margin-top: var(--s3); }
/* phones: each row of a .stacked table (static findings, supplied-fix matches) is a block, each value under its column name (data-label).
   The table keeps its header row for screen readers; it is only hidden from view. */
@media (max-width: 720px) {
  .stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stacked, .stacked tbody, .stacked tr, .stacked td { display: block; width: auto !important; min-width: 0 !important; }
  .stacked tr { border-bottom: 1px solid var(--line); padding: var(--s2) 0; }
  .stacked td { border: 0; padding: 4px var(--s2); }
  .stacked td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
  .stacked td[data-label="Report"]::before { display: none; }
}

/* test-run mark (C1 rev 6i): a dashed tag, deliberately unlike a status chip */
.testrun-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; margin-left: var(--s2); vertical-align: middle; }
.testrun { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border: 1.5px dashed var(--text-dim); border-radius: 6px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text); background: var(--surface-2); white-space: nowrap; }
.testrun-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.testrun-note .testrun-wrap { margin-left: 0; }
.issue .plain { font-weight: 600; color: var(--text); margin-bottom: 2px; }
code.ref { display: inline-block; margin: 0 6px 4px 0; }
code.hash { overflow-wrap: anywhere; word-break: break-all; user-select: all; }

/* supplied-fix form (D-06 scope, C1 rev 6i) */
.fix-upload { margin-top: var(--s6); }
.fix-upload .notice { border-left: 3px solid var(--st-info); background: var(--surface-2); border-radius: 0 6px 6px 0; padding: var(--s2) var(--s3); font-size: .88rem; }
.fixform { max-width: 720px; }
fieldset.pair { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s3) var(--s4) var(--s4); margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); min-width: 0; }
fieldset.pair legend { font-size: .86rem; font-weight: 550; color: var(--text-dim); padding: 0 var(--s1); }
.fixform .buttons { display: flex; flex-wrap: wrap; gap: var(--s3); }
.fixform .form-msg ul { margin: 0; padding-left: 1.2em; color: var(--text); }
.scope-preview { font-family: var(--mono); font-size: .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s3); margin: 0; overflow-x: auto; }
@media (max-width: 560px) { fieldset.pair { grid-template-columns: 1fr; } }
fieldset.classes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
fieldset.classes legend { padding: 0; margin-bottom: 4px; }
fieldset.classes label { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
fieldset.classes input { width: auto; margin: 0; }

/* ---------- refresh, interim (21 Oct, local): labels in the text face; mono stays for codes, ids and hashes ---------- */
th, .meta dt, .or, .stacked td::before, .testrun { font-family: var(--font); letter-spacing: 0; text-transform: none; font-weight: 650; }
th { font-size: .8rem; }
input, select { border-radius: var(--radius-sm); }
input[type="file"]::file-selector-button { font-family: var(--font); letter-spacing: 0; text-transform: none; font-weight: 650; border-radius: var(--pill); }