/* Style follows ../microtools/style.css (same tokens, same look), plus the scanner-specific parts. */
/* Medical profile palette: navy ink, ice background, teal accent. Tokens: navy / ice / slate / teal.
   Semantics (never colour alone: every tier also carries its text label): FLAG = red, REVIEW = amber, INFO = steel, OK = green-teal, NOT CHECKED = steel + hatch pattern. */
:root {
  color-scheme: light dark;
  --ink: #0A2540; --ink-2: #0F2E4D; --ink-3: #173A5E; --bone: #EAF4F7; --bone-2: #DCEBF0; --paper: #FFFFFF;
  --bg: var(--bone); --fg: var(--ink); --muted: #445A6D; --card: var(--paper); --border: #BCD0DA;
  --link: #086663; --link-hover: #096A67; --btn: #0B7F7B; --btn-hover: #096A67; --btn-fg: #FFFFFF; --accent: #0B7F7B; --accent-fg: #FFFFFF;
  --focus: #0B7F7B; --ctl-border: #5B7083; /* >= 3:1 against bg and card (WCAG 1.4.11 non-text contrast) */
  --ok: #0B6B52; --ok-bg: #DDF1EC; --ok-line: #0B7F7B;
  --warn: #7A4B00; --warn-bg: #FBEFD6; --warn-line: #B87A14;
  --bad: #A81F31; --bad-bg: #FBE4E7; --bad-line: #C8283B;
  --info: #41586B; --info-bg: #E3EAF0; --info-line: #5F7A91;
  --hatch: rgba(91, 112, 131, .18); --radius: 6px; --band: var(--ink); --band-fg: var(--bone); --strip-dot: #E8A33D;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A2540; --fg: #EAF4F7; --muted: #9DB0C0; --card: #0F2E4D; --border: #173A5E;
    --link: #5EDAD4; --link-hover: #9BEAE6; --btn: #0B7F7B; --btn-hover: #096A67; --btn-fg: #FFFFFF; --accent: #5EDAD4; --accent-fg: #0A2540;
    --focus: #5EDAD4; --ctl-border: #9DB0C0;
    --ok: #6FD8B8; --ok-bg: #0E3A32; --ok-line: #6FD8B8;
    --warn: #F2BD6A; --warn-bg: #33280F; --warn-line: #E8A33D;
    --bad: #FF8A97; --bad-bg: #3A1822; --bad-line: #FF8A97;
    --info: #A9BCCB; --info-bg: #16304A; --info-line: #A9BCCB;
    --band: #0F2E4D; --hatch: rgba(169, 188, 203, .22);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; border-top: 4px solid var(--btn); }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
.status-strip { background: var(--band); color: var(--band-fg); font: 600 .72rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; padding: 7px 16px; }
.status-strip span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--strip-dot, #c9a24b); margin-right: 8px; vertical-align: 1px; }
header.site { padding: 18px 0 8px; position: relative; }
header.site::after { content: ""; display: block; height: 2px; margin-top: 10px; background: linear-gradient(90deg, var(--btn), var(--warn-line) 40%, transparent); transform-origin: left; }
header.site .brand { font-weight: 700; letter-spacing: .2px; text-decoration: none; color: var(--fg); display: inline-flex; align-items: center; gap: 8px; }
header.site .brand::before { content: ""; width: 14px; height: 16px; background: var(--btn); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px 48px; }
.muted { color: var(--muted); }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 10px 0 6px; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
h3 { font-size: 1rem; margin: 18px 0 6px; }
p.lead { color: var(--muted); margin-top: 0; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 14px 0; }
.privacy { background: var(--info-bg); border: 1px solid var(--border); border-left: 4px solid var(--ok-line); border-radius: var(--radius); padding: 10px 14px; font-size: .95rem; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.privacy > noscript { flex-basis: 100%; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mt { margin-top: 12px; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
input, select, textarea { width: 100%; font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--ctl-border); border-radius: 4px; padding: 9px 10px; min-height: 42px; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, .drop:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button { font: inherit; font-weight: 600; background: var(--btn); color: var(--btn-fg); border: 1px solid transparent; border-radius: 4px; padding: 10px 18px; min-height: 42px; cursor: pointer; transition: background-color .15s ease; }
button:hover:not(:disabled) { background: var(--btn-hover); }
button.secondary { background: transparent; color: var(--link); border: 1px solid var(--link); }
button.secondary:hover:not(:disabled) { background: transparent; color: var(--link-hover); border-color: var(--link-hover); }
button.small-btn { min-height: 34px; padding: 4px 14px; }
button:disabled { opacity: .55; cursor: not-allowed; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.check input { width: auto; min-height: 0; }
.check-col { display: flex; align-items: end; }
progress { width: 100%; height: 14px; accent-color: var(--btn); }
.drop { border: 2px dashed var(--ctl-border); border-radius: var(--radius); padding: 22px 14px; text-align: center; cursor: pointer; background: var(--card); }
.drop.over { border-color: var(--link); background: var(--info-bg); }
.drop[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* Result banner: colour + left stripe + the text label already in the banner. NOT CHECKED (gray) is steel with a hatch pattern and a dashed border. */
.banner { border-radius: var(--radius); padding: 12px 14px; border: 2px solid var(--border); border-left-width: 8px; font-weight: 700; font-size: 1.1rem; }
.banner.red { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.banner.yellow { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.banner.green { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.banner.gray { background-color: var(--info-bg); background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--hatch) 9px 11px); border-style: dashed; border-color: var(--info-line); color: var(--fg); }
.counts { margin: 8px 0 0; }
.scope-hint { margin: 10px 0 0; padding: 10px 14px; border: 2px solid var(--info-line); border-left-width: 8px; border-radius: var(--radius); background: var(--info-bg); color: var(--fg); font-weight: 600; }
.scope-hint a { font-weight: 700; }
table.audit { min-width: 640px; }
table.audit td { word-break: normal; overflow-wrap: anywhere; }
table.audit td:nth-child(1) { min-width: 9rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-word; }
.table-scroll { overflow-x: auto; }
tr.low { opacity: .7; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 1px 7px; border-radius: 3px; border: 1px solid currentColor; }
.tag.tier-flag { color: var(--bad); background: var(--bad-bg); } .tag.tier-review { color: var(--warn); background: var(--warn-bg); } .tag.tier-info { color: var(--info); background: var(--info-bg); }
h4.tier-h { font-size: .98rem; margin: 18px 0 2px; }
.tier .none { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
code.rule { font-size: .8rem; word-break: break-all; }
#limits ul { margin: 4px 0 8px 1.1rem; padding: 0; }
details { margin-top: 6px; }
summary { cursor: pointer; font-size: .9rem; }
pre { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 8px; max-height: 260px; overflow: auto; font-size: .82rem; }
.warn-list { margin: 4px 0 0 1.1rem; padding: 0; color: var(--warn); font-size: .9rem; }
.bad-text { color: var(--bad); font-weight: 600; }
.ok-text { color: var(--ok); font-weight: 600; }
footer.site { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
dialog { width: min(860px, 94vw); max-height: 90vh; overflow: auto; border: 1px solid var(--border); border-top: 4px solid var(--btn); border-radius: var(--radius); background: var(--card); color: var(--fg); padding: 16px; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.proof-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.proof-head h2 { margin: 0; }
.proof-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.proof-sum div { border: 1px solid var(--border); border-radius: 4px; padding: 8px; }
.proof-sum b { display: block; font-size: 1.3rem; }
.proof-list { max-height: 280px; overflow: auto; font-size: .8rem; }
.proof-list td { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 480px) { h1 { font-size: 1.35rem; } .card { padding: 12px; } }
table.flags { min-width: 760px; }
table.flags td:nth-child(1) { min-width: 10.5rem; word-break: normal; overflow-wrap: anywhere; }
table.flags td:nth-child(2) { min-width: 6.5rem; }
table.flags td:nth-child(3) { min-width: 15rem; }
table.flags td:nth-child(4) { min-width: 10rem; }

/* phones / touch: every control at least 44 x 44 CSS px (WCAG 2.5.8 AAA, Apple HIG); found with the iPhone-14 WebKit probe */
@media (pointer: coarse), (max-width: 480px) {
  button, button.small-btn { min-height: 44px; }
  .check { min-height: 44px; }
  .check input { width: 22px; height: 22px; flex: none; }
  summary { min-height: 44px; padding: 11px 0; }
  footer.site a, a.back { display: inline-block; padding: 14px 0; }
}

/* extracted-statistics table: scroll sideways on phones instead of crushing the columns to one letter per line */
#stats-table { min-width: 560px; }
#stats-table th, #stats-table td { word-break: normal; overflow-wrap: anywhere; }

/* Reveal accents: subtle, once, and only when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  header.site::after { animation: draw .9s ease-out both; }
  .card, .privacy, .banner { animation: rise .45s ease-out both; }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

.read-panel { margin: 4px 0 8px; }
.read-panel th { width: 11rem; font-weight: 600; white-space: nowrap; vertical-align: top; }
.mode-note { margin: 12px 0 0; }
@media (max-width: 560px) { .read-panel th { white-space: normal; width: 7rem; } }