/* DoesItOmarchy — site styles. Colour tokens come from themes.css (generated).
   Flat surfaces, 1px hairlines, square corners, monospace-led (PLAN §9.1). */

@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin-400.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(fonts/jetbrains-mono-latin-500.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(fonts/jetbrains-mono-latin-700.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600.woff2) format("woff2"); }

:root {
  /* Unsupported is the same dark maroon in every theme: a deliberate, rare, final state. */
  --unsup: #6b1d2a;
  --unsup-fg: #fde8ec;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 76rem;
  --gutter: 1rem;
  /* Criteria titles: a step dimmer than their group heading. */
  --crit: color-mix(in srgb, var(--heading) 40%, var(--muted));
}

* { box-sizing: border-box; }
/* Always reserve the scrollbar's width, so short and long pages line up. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--mono); font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inside running text are underlined, so they don't rely on colour alone (WCAG 1.4.1). */
:where(p, .paper li, .privacy ul.plain li, .crit td, .changelog li, .why, .legal, ul.recent, .results-list li, .extras-list li) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { color: var(--heading); font-weight: 700; line-height: 1.25; text-wrap: balance; margin: 0 0 0.5rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; } h3 { font-size: 0.95rem; }
p { margin: 0 0 0.75rem; }
code, kbd { font: inherit; }
kbd { border: 1px solid var(--line-strong); padding: 0 0.3rem; font-size: 12px; color: var(--muted); }
svg.i { width: 1em; height: 1em; vertical-align: -0.125em; flex: none; }
.muted { color: var(--muted); }
.ident { color: var(--ident); font-weight: 500; }
.release { color: var(--release); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 0.5rem; background: var(--bg); padding: 0.25rem 0.5rem; z-index: 50; }
.demo-banner { background: var(--warn); color: var(--bg); text-align: center; font-size: 12px; padding: 0.25rem var(--gutter); }

/* ── header ─────────────────────────────────────────────────────────── */
.top { border-bottom: 1px solid var(--line); background: var(--bg); }
.top .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0.6rem var(--gutter); display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.brand { color: var(--heading); font-weight: 700; display: flex; gap: 0.45rem; align-items: center; }
.brand .mark { color: var(--accent); }
.brand:hover { text-decoration: none; }
.top nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.top nav a { color: var(--muted); display: inline-flex; gap: 0.35rem; align-items: center; }
.top nav a[aria-current="page"], .top nav a:hover { color: var(--text); text-decoration: none; }
.top .tools { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
.btn, select.btn {
  font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 2px; padding: 0.2rem 0.55rem; display: inline-flex; gap: 0.4rem; align-items: center; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--line-strong); text-decoration: none; }

/* ── verdicts, badges, tags ─────────────────────────────────────────── */
svg.v { width: 1.05em; height: 1.05em; }
.v-supported { color: var(--ok); }
.v-partial, .v-stale, .v-conflict { color: var(--warn); }
.v-failed, .v-not-compatible { color: var(--bad); }
.v-untested { color: var(--unk); }
.verdict { display: inline-flex; gap: 0.35rem; align-items: center; white-space: nowrap; font-size: 12px; border: 1px solid var(--line); padding: 0.05rem 0.45rem 0.05rem 0.3rem; color: var(--text); }
.verdict.supported { border-color: var(--ok); color: var(--ok); }
.verdict.partial { border-color: var(--warn); color: var(--warn); }
.verdict.failed, .verdict.not-compatible { border-color: var(--bad); color: var(--bad); }
.verdict.unsupported { background: var(--unsup); border-color: var(--unsup); color: var(--unsup-fg); }
.verdict.untested { color: var(--muted); }
.vs { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
svg.badge { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.4em; flex: none; }
.tag { display: inline-block; font-size: 11px; letter-spacing: 0.02em; border: 1px solid var(--line-strong); color: var(--muted); padding: 0 0.4rem; white-space: nowrap; }
.tag.scope { color: var(--text); background: var(--panel); border: 1px dashed var(--muted); font-weight: 500; }
.tag.bto { color: var(--accent); border-color: var(--accent); }
.q-mark { color: var(--warn); border: 1px solid var(--warn); cursor: help; font-weight: 700; font-size: 11px; line-height: 1; padding: 0.05rem 0.25rem; display: inline-block; }
.cfgref { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); padding: 0.05rem 0.45rem; color: var(--text); white-space: nowrap; font-size: 12px; }
a.cfgref:hover { border-color: var(--accent); text-decoration: none; }
.slot { display: inline-flex; width: 1em; margin-right: 0.45em; flex: none; }
.slot svg.badge { margin: 0; }
.slotted { display: inline-flex; align-items: center; white-space: nowrap; }
.browse a.slotted { vertical-align: top; } /* an empty slot would set the baseline 4px low */
a.slotted:hover { text-decoration: none; }
a.slotted:hover .cfgref { border-color: var(--accent); }
.cfgref.big { font-size: 13px; color: var(--heading); font-weight: 500; }
/* Out-of-scope rows are dimmed by swapping in the muted colour (opacity would break text contrast). */
.oos { --text: var(--muted); --heading: var(--muted); --ident: var(--muted); --release: var(--muted); --link: var(--muted); color: var(--muted); }

/* ── coverage bars ──────────────────────────────────────────────────── */
.coverage { display: grid; gap: 0.9rem; }
.stat .row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.stat .label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--muted); }
.stat .figure { color: var(--heading); font-weight: 700; }
.stat .figure .pct { color: var(--muted); font-weight: 400; }
svg.bar { display: block; width: 100%; height: 10px; background: var(--panel); border: 1px solid var(--line); margin: 0.35rem 0 0.2rem; }
svg.bar rect { fill: var(--accent); transition: width 0.6s ease; }
svg.bar.ok rect { fill: var(--ok); }
.stat .sub { font-size: 12px; color: var(--muted); }
.coverage.compact { gap: 0.7rem; } .coverage.compact svg.bar { height: 8px; }

/* ── home ───────────────────────────────────────────────────────────── */
.hero { max-width: 54rem; margin: 1rem auto 0; }
.hero h1 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: 1.25rem; }
.hero h1 .q { color: var(--accent); }
.hero-cov { margin-top: 2.75rem; }
.searchbox { display: flex; border: 1px solid var(--line-strong); background: var(--panel); }
.searchbox:focus-within { border-color: var(--accent); }
.searchbox svg.i { margin: 0 0.6rem; align-self: center; color: var(--muted); width: 1.1em; height: 1.1em; }
.searchbox input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--text); background: transparent; border: 0; padding: 0.7rem 0; outline: none; }
.searchbox button { font: inherit; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); padding: 0 0.9rem; cursor: pointer; }
.searchbox button:hover { color: var(--text); }
.presets { display: flex; flex-wrap: wrap; gap: 0.3rem 0; margin: 0.7rem 0 0; padding: 0; list-style: none; font-size: 12px; letter-spacing: -0.01em; }
.presets li { white-space: nowrap; }
.presets li + li::before { content: "/"; color: var(--line-strong); margin: 0 0.4rem; }
.hints { margin: 1.25rem 0 0; font-size: 12px; color: var(--muted); }
.hints code { color: var(--text); }
.identify-link { margin: .5rem 0 0; font-size: 13px; }
.mac-head .sub.slash { margin-bottom: 0.2rem; }
.mac-head .identify-line { margin-top: 0; font-size: 13px; }

/* ── suggestions / results ──────────────────────────────────────────── */
.suggest { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 13px; }
.suggest:empty { display: none; }
.suggest a { display: inline-block; border: 1px solid var(--line); padding: 0.05rem 0.45rem; color: var(--text); }
.suggest [data-kind="field"] a { color: var(--accent); }
.suggest [data-kind="id"] a { color: var(--ident); }
.suggest a:hover, .suggest a.sel { border-color: var(--accent); text-decoration: none; }
.chip-error { display: inline-block; border: 1px solid var(--bad); color: var(--bad); padding: 0 0.45rem; margin: 0.4rem 0.4rem 0 0; font-size: 13px; }
.results-meta { color: var(--muted); font-size: 12px; margin: 1rem 0 0.4rem; }
.results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.results > li { border-bottom: 1px solid var(--line); }
.results .hit { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr auto; gap: 0.25rem 1rem; padding: 0.55rem 0.35rem; color: var(--text); }
.results .hit:hover, .results .hit.sel { background: var(--panel); text-decoration: none; }
.results .facts { color: var(--muted); font-size: 12px; grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; }
.results .hits { list-style: none; margin: 0 0 0.55rem; padding: 0 0.35rem 0 calc(min(12rem, 30%) + 1.35rem); font-size: 12px; display: grid; gap: 0.3rem; }
.results .hits .release { margin-left: 0.2rem; }
.empty { border: 1px dashed var(--line-strong); padding: 1rem; color: var(--muted); margin-top: 1rem; }

/* ── model page ─────────────────────────────────────────────────────── */
.mac-head h1 { font-size: 1.8rem; color: var(--ident); margin-bottom: 0.3rem; display: flex; align-items: center; }
.mac-head .sub { color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; }
.mac-head .sub b { color: var(--text); font-weight: 500; }
.mac-head .sub.slash > * + *::before { content: "/"; color: var(--line-strong); margin-right: 0.5rem; }
.notice { border: 1px solid var(--line-strong); border-left: 3px solid var(--bad); padding: 0.55rem 0.8rem; margin: 1rem 0; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.notice.scope { border-left-color: var(--muted); }
.index { margin: 1rem 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.minibar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); margin: 1rem calc(-1 * var(--gutter)) 0; padding: 0.45rem var(--gutter); display: flex; gap: 0.6rem 1rem; align-items: center; flex-wrap: wrap; font-size: 13px; }
.minibar .jump { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.minibar .views { margin-left: auto; display: flex; }
.minibar .tested-count { font-size: 12px; }
.minibar .views a { border: 1px solid var(--line); padding: 0.05rem 0.5rem; color: var(--muted); display: inline-flex; gap: 0.3rem; align-items: center; }
.minibar .views a + a { border-left: 0; }
.minibar .views a[aria-current="true"] { color: var(--text); background: var(--panel); }
.rel-head { margin: 2rem 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; }
.rel-head h2 { color: var(--release); margin: 0; }
.rel-head .meta { color: var(--muted); font-size: 12px; }
.rel-head .meta b { color: var(--text); font-weight: 500; }
.card { border: 1px solid var(--line); background: var(--panel); margin: 0 0 1rem; scroll-margin-top: 3rem; }
.card.oos-card { border-style: dashed; }
.card-head { display: flex; gap: 0.4rem 0.8rem; align-items: center; flex-wrap: wrap; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); }
.card-head .title { color: var(--muted); flex: 1 1 16rem; min-width: 0; font-size: 13px; }
.card-head .right { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.blocker-line, .limit-line { margin: 0; padding: 0.35rem 0.8rem; border-bottom: 1px solid var(--line); color: var(--bad); font-size: 13px; }
.limit-line { color: inherit; } .warn-i { color: var(--warn); }
.tag.gles2 { border-color: var(--warn); } .tag.gles2 .i { margin-right: 0.2rem; }
.caps details { border-bottom: 1px solid var(--line); }
.caps summary { cursor: pointer; padding: 0.35rem 0.8rem; display: flex; gap: 0.5rem; align-items: center; list-style: none; position: relative; }
.caps summary > :not(svg.catprog) { position: relative; }
.caps summary svg.catprog { position: absolute; inset: 0; width: 100%; height: 100%; }
.caps summary svg.catprog rect { fill: color-mix(in srgb, var(--ok) 8%, transparent); }
.caps summary::-webkit-details-marker, details.hw > summary::-webkit-details-marker { display: none; }
.caps summary::before, details.hw > summary::before { content: "▸"; color: var(--muted); width: 0.8rem; }
.caps details[open] summary::before, details.hw[open] > summary::before { content: "▾"; }
.caps summary .name { color: var(--heading); min-width: 6.5rem; }
.caps summary .dots { display: inline-flex; gap: 0.15rem; }
.caps summary .dots svg.v { width: 0.8em; height: 0.8em; }
.caps summary .count { margin-left: auto; color: var(--muted); font-size: 12px; }
.caps ul { list-style: none; margin: 0; padding: 0 0.8rem 0.5rem 2.1rem; font-size: 13px; }
.caps li { display: flex; gap: 0.5rem; padding: 0.12rem 0; align-items: center; }
.caps li .st { margin-left: auto; color: var(--muted); font-size: 12px; }
.caps li { flex-wrap: wrap; }
.caps-toggle { background: none; border: 1px solid var(--line); color: var(--muted); width: 1.6rem; height: 1.6rem; padding: 0; display: inline-grid; place-items: center; cursor: pointer; margin-left: 0.4rem; }
.caps-toggle:hover { color: var(--heading); border-color: var(--line-strong); }
.caps-toggle svg.i { width: 14px; height: 14px; }
.caps-toggle[aria-expanded="true"] svg.i:first-child, .caps-toggle[aria-expanded="false"] svg.i:last-child { display: none; }
.capname { color: var(--crit); }
.caps li .st-supported { color: var(--ok); } .caps li .st-failed { color: var(--bad); } .caps li .st-partial { color: var(--warn); }
.caps li .st-unsupported { color: var(--unsup-fg); background: var(--unsup); padding: 0 0.4rem; }
.caps li .why { flex-basis: 100%; margin: 0.15rem 0 0.35rem 1.55rem; padding: 0.35rem 0.6rem; border-left: 2px solid var(--bad); background: var(--bg); font-size: 12px; }
.caps li .why p { margin: 0.1rem 0; }
.caps li .why .lbl { color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; margin-right: 0.4rem; }
.caps li .why code { color: var(--text); overflow-wrap: anywhere; }
.caps li .why.minor { border-left-color: var(--warn); }
/* The latest result behind a capability's status: version, date, method. */
.caps li .capmeta { flex-basis: 100%; margin: -0.1rem 0 0.15rem 1.55rem; font-size: 11.5px; color: var(--muted); }
.caps li .capmeta a { color: var(--muted); }
.caps li .capmeta a:hover { color: var(--link); }
.caps li .capmeta .stale { color: var(--warn); }
/* Row order: glyph and name, inline method, status (pushed right), full meta line and newer build, evidence. */
.result-items .caps li .capmeta, .caps li .capmeta.inline { flex-basis: auto; margin: 0; order: 1; }
.caps li .st { order: 2; }
.caps li .capmeta { order: 3; }
.caps li .why { order: 4; }
.latest-line { margin: 0; padding: 0.35rem 0.8rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.latest-line a { color: var(--link); }
.newer-line { margin: 0; padding: 0.35rem 0.8rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
/* A newer build's different result (PLAN §28.2): its own line under the row, muted, so the stable verdict leads. */
.caps li .capnewer { order: 3; flex-basis: 100%; margin: -0.1rem 0 0.15rem 1.55rem; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.caps li .capnewer a { color: var(--link); }
.caps li .capnewer svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 0.2rem; }
details.results-list > summary .hw-toggle::before { content: "▸ Show results"; }
details.results-list[open] > summary .hw-toggle::before { content: "▾ Hide results"; }
.results-list ul { list-style: none; margin: 0; padding: 0.2rem 0.8rem 0.6rem; font-size: 13px; display: grid; gap: 0.25rem; }
.results-list li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: center; }
.results-list li.retracted { color: var(--muted); }
.results-list .tally { margin-left: auto; display: inline-flex; gap: 0.3rem; align-items: center; color: var(--muted); font-size: 12px; }
details.hw > summary { cursor: pointer; padding: 0.5rem 0.8rem; color: var(--heading); font-weight: 500; list-style: none; display: flex; gap: 0.5rem 0.8rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); }
details.hw > summary:hover { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
details.hw > summary::before { content: none; }
details.hw > summary .hw-title { display: inline-flex; gap: 0.45rem; align-items: center; }
details.hw > summary .muted { font-weight: 400; font-size: 12px; }
details.hw > summary .hw-toggle { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--accent); border: 1px solid var(--accent); padding: 0.05rem 0.55rem; }
details.hw > summary .hw-toggle::before { content: "▸ Show details"; }
details.hw[open] > summary .hw-toggle::before { content: "▾ Hide details"; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 1.5rem; padding: 0.2rem 0.8rem 0.6rem; margin: 0; font-size: 13px; }
.specs > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; padding: 0.15rem 0; border-bottom: 1px dotted var(--line); }
.specs > .wide { grid-column: 1 / -1; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.specs dd .alt { color: var(--muted); }
.hw-id { color: var(--muted); font-size: 11px; }
.extras { padding: 0.4rem 0.8rem 0.6rem; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
/* Result pages (/result/{id}). */
.result-items { margin-top: 1rem; }
.result-notes { margin: 1rem 0; padding: 0.5rem 0.8rem; border-left: 3px solid var(--line-strong); background: var(--panel); font: 14px/1.55 var(--sans); white-space: pre-line; }
.result-notes p { margin: 0; }
.extras-list { margin-top: 1.75rem; }
.extras-list ul { font-size: 13px; padding-left: 1.2rem; }
.result-foot { margin-top: 2rem; font-size: 12px; }
.sub-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; margin: 0.9rem 0 0.35rem; }
ul.recent { list-style: none; margin: 0; padding: 0; font-size: 13px; display: grid; gap: 0.15rem; }
details.more { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
details.more summary { cursor: pointer; color: var(--heading); }
details.more pre { white-space: pre-wrap; font: 13px/1.55 var(--mono); color: var(--text); background: var(--panel); border: 1px solid var(--line); padding: 0.7rem; }
details.more ul { font-size: 13px; overflow-wrap: anywhere; }
details.more ol.notes { font: 14px/1.55 var(--mono); padding-left: 1.6rem; display: grid; gap: 0.45rem; max-width: 80ch; }

/* ── criteria matrix (review-report style) ──────────────────────────── */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 0.3rem 0.55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--muted); font-weight: 500; font-size: 12px; }
/* position: relative keeps the absolutely placed slanted labels inside the scroll container. */
.matrix-wrap { overflow-x: auto; margin-top: 1rem; padding-right: 90px; position: relative; }
.matrix { width: auto; }
.matrix thead th { border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.matrix th.cap-head { padding-bottom: 0.4rem; }
.matrix th.col { min-width: 30px; padding: 0; position: relative; }
/* Heading borders lean 30° right of vertical, like the labels; body cells keep straight borders. */
.matrix th.col::before, .matrix th.count-head::before { content: ""; position: absolute; inset: 0; border-left: 1px solid var(--line); transform-origin: 0 100%; transform: skewX(-30deg); pointer-events: none; }
.matrix th.col > span { position: absolute; z-index: 1; left: 50%; bottom: 0; transform-origin: 0 100%; transform: rotate(-60deg) translateY(50%); padding-left: 10px; line-height: 14px; white-space: nowrap; font-size: 11px; }
.matrix th.col a { color: var(--text); display: inline-flex; align-items: center; }
.matrix th.col.oos a { color: var(--muted); }
.matrix th.count-head { position: relative; white-space: nowrap; text-align: right; padding: 4px 6px 4px 30px; line-height: 1.3; }
.mh-60 { height: 60px; } .mh-80 { height: 80px; } .mh-100 { height: 100px; } .mh-120 { height: 120px; } .mh-140 { height: 140px; }
.mh-160 { height: 160px; } .mh-180 { height: 180px; } .mh-200 { height: 200px; } .mh-220 { height: 220px; } .mh-240 { height: 240px; } .mh-260 { height: 260px; }
.matrix td.cell { border-left: 1px solid var(--line); text-align: center; padding: 4px 3px; }
.matrix td.cell svg.v { width: 0.95em; height: 0.95em; }
/* Untested cells are drawn in CSS (the matrix page has thousands): a dashed ring like the v-untested icon. */
.matrix td.u i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.matrix td.u::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; border: 1.5px dashed var(--unk); border-radius: 50%; vertical-align: -0.1em; }
.matrix td.count { border-left: 1px solid var(--line); font-size: 12px; color: var(--muted); text-align: right; }
.matrix th.cap { white-space: nowrap; font-weight: 400; color: var(--crit); }
.matrix tr.cat th { background: var(--panel); color: var(--heading); font-weight: 500; padding-top: 0.45rem; position: relative; }
.matrix tr.cat th svg.i { margin-right: 0.4rem; }
/* Category rows double as progress bars: the dimmed green fill is the share of the group's cells that passed. */
.matrix tr.cat svg.catprog { position: absolute; inset: 0; width: 100%; height: 100%; }
.matrix tr.cat svg.catprog rect { fill: color-mix(in srgb, var(--ok) 8%, var(--panel)); }
.matrix tr.cat .catlabel, .matrix tr.cat .catcount { position: relative; }
.matrix tr.cat .catcount { float: right; color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 1.5rem; }
.matrix tbody tr:not(.cat):hover > * { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.matrix td.col-hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.matrix td.col-target { background: color-mix(in srgb, var(--link) 20%, transparent); }
.line-matrix { margin-top: 2.5rem; }

/* ── browse / lists ─────────────────────────────────────────────────── */
.filter { margin-bottom: 1rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); position: relative; } /* keeps .sr-only labels inside the scroll box */
.browse thead th { background: var(--panel); }
.browse th a { color: var(--muted); } .browse th a[aria-sort] { color: var(--text); }
.browse tbody tr:hover { background: var(--panel); }
.browse td.num { text-align: right; }
.browse tr.line-break th { background: var(--bg); color: var(--heading); font-size: 17px; padding-top: 1.1rem; }
/* Product-line icons (m-* in icons.svg): drawn for 28px and up, used sparingly. */
svg.machine { width: 28px; height: 28px; flex: none; color: var(--heading); }
.gh { display: flex; align-items: center; gap: 0.65rem; }
h2.gh { font-size: 17px; }
.mac-head h1 svg.machine { width: 40px; height: 40px; margin-right: 0.6rem; color: var(--text); }
/* Row links: the identifier link stretches over its whole row, like a search result. */
.rowlinks tbody tr { position: relative; }
.rowlinks tbody td:first-child a::after { content: ""; position: absolute; inset: 0; }
.rowlinks tbody tr:hover td:first-child a { text-decoration: underline; }
.browse td.vs { display: table-cell; }
.browse td.vs > * { margin: 0 0.25rem 0.2rem 0; }
.browse .glescol { width: 1%; padding-left: 0.15rem; white-space: nowrap; }
.comps td.macs { font-size: 12px; max-width: 26rem; }

/* ── stats ──────────────────────────────────────────────────────────── */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.panel { border: 1px solid var(--line); background: var(--panel); padding: 0.8rem 1rem; }
.panel h2 { font-size: 0.95rem; }
/* Full-width panels under the coverage block (/stats). */
.panel.wide { margin-top: 1.25rem; }
.report-cols { display: flex; flex-wrap: wrap; gap: 0 2.5rem; }
.report-cols > div { flex: 0.8 1 min(100%, 16rem); min-width: 0; }
.report-cols > .col-recent { flex: 1 1 min(100%, 28rem); }
.report-cols > .col-failing { flex: 1.6 1 min(100%, 22rem); }
ul.recent li { white-space: nowrap; }
@media (max-width: 480px) { ul.recent li { white-space: normal; } }
.reports-panel .hbar { grid-template-columns: minmax(0, 2fr) minmax(3rem, 1fr) 2rem; }
.hbar { display: grid; grid-template-columns: 9rem 1fr 3rem; gap: 0.6rem; align-items: center; font-size: 13px; padding: 0.1rem 0; }
.hbar svg { display: block; width: 100%; height: 8px; background: var(--bg); border: 1px solid var(--line); }
.hbar svg rect { fill: var(--accent); }
.hbar .n { text-align: right; color: var(--muted); }
a.hbar { color: var(--text); margin: 0 -0.35rem; padding: 0.1rem 0.35rem; }
a.hbar:hover { background: var(--bg); text-decoration: none; }
a.hbar:hover span:first-child { text-decoration: underline; }

/* ── prose pages: two columns, like a paper ─────────────────────────── */
.paper { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 0 2.5rem; font: 15px/1.6 var(--sans); }
.paper h2 { font-family: var(--mono); margin-top: 1.25rem; }
.paper code, .paper kbd { font-family: var(--mono); font-size: 13px; }
.wide-p { font: 15px/1.6 var(--sans); }
/* A prose page's opening paragraph, full width above its columns. */
p.lede { font: 16px/1.65 var(--mono); margin: 0 0 0.75rem; color: var(--muted); }
/* The methodology's TLDR: the privacy page's box, its points in up to three columns. */
.method-tldr { margin: 1.25rem 0 0.5rem; }
.method-tldr h2 { margin: 0 0 0.9rem; }
.method-tldr ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem 2.25rem; font: 14px/1.55 var(--sans); }
.method-tldr li a { display: block; margin-bottom: 0.2rem; font: 600 14px/1.4 var(--mono); color: var(--heading); text-decoration: none; }
.method-tldr li a:hover { text-decoration: underline; }
@media (max-width: 40rem) { .method-tldr { padding: 1.1rem 1rem; } }
/* Definition tables (verdicts, coverage) inside the methodology's prose. */
table.defs { margin: 0.25rem 0 1rem; font: 14px/1.5 var(--sans); }
table.defs th[scope="row"] { white-space: nowrap; color: var(--heading); font: 500 13px/1.5 var(--mono); width: 1%; }
.mark-label { display: inline-flex; align-items: center; }
h2#criteria, h2#ports { margin-top: 2rem; }
/* Port statuses and port-group rules: the drawing's swatches and the card's
   port chips, shown as they appear on Mac pages (PLAN §25.1a, §27). */
table.portkey { font: 14px/1.5 var(--sans); }
table.portkey caption { text-align: left; padding: 0.45rem 0.55rem 0.2rem; font: 500 13px/1.5 var(--mono); color: var(--heading); }
table.portkey th[scope="row"] { white-space: nowrap; color: var(--heading); font: 500 13px/1.5 var(--mono); }
table.portkey thead th, table.portkey td:not(:last-child) { white-space: nowrap; }
table.portkey td:not(:last-child) { width: 1%; }
table.portkey .sw { width: 1.5em; height: 1.1em; vertical-align: middle; }
table.portkey .capports { display: inline-flex; flex-wrap: nowrap; gap: 0.35rem; font-size: 12px; }
table.portkey .capport { font-size: 12px; }
table.portkey .capport.suspect .tag { font-size: 10px; }
p.portkey-note { font-size: 13px; margin: 0.5rem 0 1.25rem; }
/* Narrow screens: each row stacks, its example on one line and the
   explanation full width below, instead of a squeezed last column. */
@media (max-width: 760px) {
  table.portkey, table.portkey tbody { display: block; }
  table.portkey caption { display: block; }
  table.portkey thead { display: none; }
  table.portkey tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--line); }
  table.portkey tr > * { border: 0; padding: 0; width: auto !important; }
  table.portkey tr > :last-child { flex-basis: 100%; }
  table.portkey tbody th[scope="row"] { order: 1; }
  table.portkey tbody td:has(> .sw) { order: 0; }
  table.portkey tbody td:nth-child(3):not(:last-child) { order: 2; margin-left: auto; }
  table.portkey tr > :last-child { order: 3; }
  table.portkey .capports { flex-wrap: wrap; }
}
h2.sources-h { margin-top: 2.5rem; }
p.sources { font: 11px/1.55 var(--sans); color: var(--muted); }
.crit th.catcell { white-space: nowrap; color: var(--heading); background: var(--panel); font-weight: 500; }
.crit tbody td { font: 13.5px/1.45 var(--sans); }
.crit tbody td:first-of-type { font-family: var(--mono); font-size: 13px; color: var(--text); }

/* ── contribute ─────────────────────────────────────────────────────── */
.cta { border: 1px solid var(--accent); background: var(--panel); padding: 1.5rem 1.75rem; margin: 1rem 0 2rem; }
.cta h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--accent); }
.cta p { font: 15px/1.6 var(--sans); max-width: 72ch; }
.cta .lead { font-size: 18px; color: var(--heading); }
.cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.btn-cta { display: inline-flex; gap: 0.5rem; align-items: center; font: 500 15px var(--mono); background: var(--accent); color: var(--accent-contrast); padding: 0.6rem 1rem; border: 1px solid var(--accent); }
.btn-cta:hover { text-decoration: none; filter: brightness(1.08); }
.btn-cta.ghost { background: transparent; color: var(--accent); }

/* ── search overlay ─────────────────────────────────────────────────── */
dialog.overlay { width: min(46rem, calc(100vw - 2rem)); max-height: min(38rem, calc(100vh - 4rem)); margin: 8vh auto 0; padding: 0; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); display: none; flex-direction: column; }
dialog.overlay[open] { display: flex; }
dialog.overlay::backdrop { background: rgb(0 0 0 / 0.55); }
dialog.overlay .searchbox { border: 0; border-bottom: 1px solid var(--line); }
dialog.overlay .body { overflow-y: auto; padding: 0 0.6rem 0.6rem; }
dialog.overlay .foot { border-top: 1px solid var(--line); padding: 0.35rem 0.7rem; font-size: 11px; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── super footer: Site (links in four groups) · Catalog · Coverage ── */
.super { border-top: 1px solid var(--line); background: var(--panel); margin-top: 2rem; padding: 1.75rem var(--gutter) 1rem; }
.super .inner { max-width: var(--wrap); margin: 0 auto; }
.super .cols { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.7fr); gap: 1.75rem 2.5rem; }
/* Site links in labelled groups, two by two, each as wide as its links. */
.super .site-groups { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 1.1rem 2rem; }
.super h3 { font: 600 12px/1.4 var(--mono); color: var(--heading); margin: 0 0 0.4rem; }
.super h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; margin-bottom: 0.7rem; }
.super dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.9rem; font-size: 13px; }
.super dt { color: var(--heading); text-align: right; } .super dd { margin: 0; color: var(--muted); }
.super dd a { color: var(--muted); } .super dd a:hover { color: var(--link); }
.super ul { list-style: none; margin: 0; padding: 0; font-size: 13px; display: grid; gap: 0.2rem; }
.super .legal { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 0.8rem; font-size: 12px; color: var(--muted); text-align: left; }
.super .legal p { margin: 0 0 0.25rem; }
.super .legal strong { color: var(--text); font-weight: 500; }
.super .legal strong a { color: var(--link); }
.rally { margin: 1.75rem 0 0; font-size: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; }
.rally .tagline { font-weight: 700; color: var(--accent); }
.rally .help { font-weight: 700; color: var(--accent-contrast); background: var(--accent); padding: 0.1rem 0.6rem; }
.rally .help:hover { text-decoration: none; filter: brightness(1.08); }

/* ── Konami easter egg ──────────────────────────────────────────────── */
.konami { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 86%, transparent); opacity: 0; transition: opacity 0.45s ease; }
.konami.on { opacity: 1; }
.konami[hidden] { display: none; }
/* The message sits in the dimmed space above the footer; --fit shrinks it on short screens. */
.konami-msg { position: absolute; inset: 0 0 auto; display: grid; place-content: center; text-align: center; padding: 1rem 2rem; opacity: 0; transition: opacity 0.4s ease; }
.konami.msg .konami-msg { opacity: 1; }
.konami-msg > div { transform: scale(var(--fit, 1)); display: grid; justify-items: center; }
.konami-tag { font: 700 clamp(2rem, 7vw, 4.5rem)/1.1 var(--mono); color: var(--accent); margin: 0 0 1rem; white-space: nowrap; }
.konami-sub { font: 500 clamp(1rem, 2.4vw, 1.4rem)/1.5 var(--mono); color: var(--heading); max-width: 40ch; margin: 0 auto; }
/* The coverage column stays lit above the dimmed page. */
body.konami-lit .super .c-cov { position: relative; z-index: 101; background: var(--panel); box-shadow: 0 0 0 0.9rem var(--panel); }
body.flash { background: var(--accent); }
body.flash > * { visibility: hidden; }

/* Footer: Site and Catalog side by side, Coverage below them. */
@media (max-width: 1100px) {
  .super .cols { grid-template-columns: auto minmax(0, 1fr); }
  .super .c-cov { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .konami { background: color-mix(in srgb, var(--bg) 94%, transparent); }
}
@media (max-width: 640px) {
  .results .hit { grid-template-columns: 1fr auto; }
  .results .facts { grid-column: 1 / -1; }
  .results .hits { padding-left: 0.9rem; }
  .specs > div { grid-template-columns: 5.5rem 1fr; }
  .hbar { grid-template-columns: 7rem 1fr 2.5rem; }
  .top .tools { margin-left: 0; }
  .paper { grid-template-columns: 1fr; }
  .super .cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.nowrap { white-space: nowrap; }
.changelog { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.5rem; max-width: 80ch; }
.changelog > li { border-left: 2px solid var(--line-strong); padding-left: 1rem; }
.changelog h2 { font-size: 1rem; }
.changelog time { color: var(--muted); font-weight: 400; }
.changelog .summary { font: 15px/1.6 var(--sans); }
.changelog ul { font: 14px/1.6 var(--sans); padding-left: 1.2rem; }
.super .legal a { color: var(--link); }
.report-code { font-weight: 500; color: var(--muted); font-size: 0.75em; letter-spacing: 0.02em; margin-left: 0.6rem; }
/* /admin (maintainers only). */
.admin-bar { font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; }
.admin h2 { margin-top: 1.5rem; }
.admin-flags a, .admin td a { text-decoration: underline; text-underline-offset: 2px; }
.admin-actions, .admin-section { margin-top: 1rem; display: grid; gap: 0.7rem; }
.admin-actions h2, .admin-section h2 { margin: 0; }
.admin-section p { margin: 0; }
/* Report header: a tag for the state, then labelled facts in a grid. */
.admin-head h1 { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.admin-head .report-code { font-size: 0.9em; }
.state-tag { display: inline-flex; align-items: center; font: 500 12px var(--mono); border: 1px solid var(--line-strong); padding: 0.1rem 0.5rem; color: var(--text); white-space: nowrap; }
.state-tag.st-pending { border-color: var(--warn); color: var(--warn); }
.state-tag.st-accepted { border-color: var(--link); color: var(--link); }
.state-tag.st-rejected { border-color: var(--bad); color: var(--bad); }
.state-tag.st-retracted { color: var(--muted); }
.state-reason { color: var(--muted); }
.warn-tag { border-color: var(--warn); color: var(--warn); }
.admin dl.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.6rem 1.5rem; margin: 0.75rem 0 0; }
.admin dl.facts > div { min-width: 0; }
.admin dl.facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.admin dl.facts dd { margin: 0.1rem 0 0; overflow-wrap: anywhere; }
/* Supported / partial / failed glyphs, coloured; table columns centred so they line up. */
.g-ok { color: var(--ok); } .g-partial { color: var(--warn); } .g-failed { color: var(--bad); }
.tally-g { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }
table.queue th.glyph, table.queue td.glyph { text-align: center; width: 2.5rem; font-variant-numeric: tabular-nums; }
table.probe th[scope="row"] { font-weight: 500; white-space: nowrap; }
table.candidates tr.current { background: var(--panel); }
table.candidates td, table.candidates th { vertical-align: top; }
table.candidates code, table.probe code { font-size: 12px; }
ul.settle { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.25rem; }
.btn.primary { border-color: var(--accent); color: var(--accent); font-weight: 500; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
ul.admin-flags { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; font-size: 13px; }
.ok-notice { border-left-color: var(--link); }
/* /identify (PF-1). */
.identify .lead { font: 16px/1.65 var(--mono); color: var(--muted); max-width: 69ch; } /* p.lede's type; 69ch of mono is the old 70ch of Inter (662px) */
.identify-result { margin: 1.25rem 0; display: grid; gap: 0.4rem; }
.identify-result h2 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0; }
.identify-result p { margin: 0; }
.identify-result p > a.slotted { vertical-align: middle; } /* the bordered box, centred on the line; a lone result reserves no badge slot */
.identify-cands { list-style: none; padding: 0; margin: 0.3rem 0; display: grid; gap: 0.3rem; font-size: 13px; }
.identify-used { font-size: 12px; overflow-wrap: anywhere; }
.identify-steps h2 { margin-top: 1.5rem; }
.snippet-controls { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; margin-bottom: 0.8rem; }
.os-choice { display: flex; gap: 0.5rem; }
.os-choice .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--heading); }
.cmd { margin-bottom: 0.8rem; max-width: 60rem; }
.cmd > p { margin: 0 0 0.3rem; }
html:not(.js) [data-js] { display: none !important; }

/* Code snippet, single line (after Carbon's): no outline, its own background
   a step off the page, one line that scrolls without a scrollbar, a fade where
   it runs on under the square copy button, and a tooltip below on copy. */
.snippet { --snip: 3.25rem; --snip-bg: var(--panel); --snip-bg: color-mix(in srgb, var(--text) 8%, var(--bg)); --snip-btn: var(--line); --snip-btn: color-mix(in srgb, var(--text) 16%, var(--bg)); --snip-hover: var(--line-strong); --snip-hover: color-mix(in srgb, var(--text) 24%, var(--bg));
  position: relative; display: flex; align-items: stretch; background: var(--snip-bg); height: var(--snip); }
.snippet-code { flex: 1; min-width: 0; overflow-x: auto; display: flex; align-items: center; padding: 0 3.5rem 0 1rem; position: relative; scrollbar-width: none; }
.snippet-code::-webkit-scrollbar { display: none; }
.snippet-code:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.snippet-code pre { margin: 0; white-space: pre; font: 15px/1.5 var(--mono); }
.snippet-code code { color: var(--text); }
.snippet::after { content: ""; position: absolute; top: 0; bottom: 0; right: var(--snip); width: 3.5rem; pointer-events: none; background: linear-gradient(to right, transparent, var(--snip-bg)); }
html:not(.js) .snippet::after { right: 0; }
/* Square: as wide as the snippet is tall. */
.snippet-copy { position: relative; flex: none; width: var(--snip); border: 0; background: var(--snip-btn); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background-color 0.15s, color 0.15s; }
.snippet-copy:hover { background: var(--snip-hover); }
.snippet-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.snippet-copy svg.i { width: 20px; height: 20px; }
.snippet-copy.done, .snippet-copy.done:hover { background: var(--ok); color: var(--bg); }
.snippet-copy .copied { position: absolute; z-index: 2; top: calc(100% + 0.5rem); right: 0; white-space: nowrap; font: 12px var(--mono); color: var(--bg); background: var(--heading); padding: 0.3rem 0.6rem; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.snippet-copy .copied::before { content: ""; position: absolute; bottom: 100%; right: calc(var(--snip) / 2 - 0.35rem); border: 0.35rem solid transparent; border-bottom-color: var(--heading); }
.snippet-copy.done .copied { opacity: 1; }
.clip-buffer { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* On/off switch. */
.switch { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 0; padding: 0; color: var(--text); font: inherit; cursor: pointer; }
.switch .track { width: 2rem; height: 1rem; border: 1px solid var(--line-strong); background: var(--panel); position: relative; flex: none; transition: background 0.15s; }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--muted); transition: transform 0.15s, background 0.15s; }
.switch[aria-checked="true"] .track { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .thumb { transform: translateX(1rem); background: var(--bg); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.paste-hint { margin: -0.4rem 0 0.6rem; font-size: 13px; }
/* Touch screens have no Ctrl+V to press outside a field. */
@media (hover: none) and (pointer: coarse) { .paste-hint { display: none !important; } }
#identify-form { display: grid; gap: 0.6rem; max-width: 60rem; }
#identify-form textarea { font: 13px/1.5 var(--mono); color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); padding: 0.6rem; width: 100%; resize: vertical; }
#identify-form textarea:focus { border-color: var(--accent); outline: none; }
#identify-form .btn { justify-self: start; }
.identify-privacy { font-size: 12px; margin-top: 0.6rem; max-width: 60rem; }

/* PF-2: what the command does, part by part, in command order. */
details.explain { margin-top: 0.4rem; font-size: 13px; }
details.explain > summary { cursor: pointer; color: var(--link); width: fit-content; }
details.explain > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.explain > p { margin: 0.4rem 0 0; }
table.explain-table { border-collapse: collapse; width: 100%; margin-top: 0.5rem; }
table.explain-table th { text-align: left; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line-strong); padding: 0.3rem 0.6rem 0.3rem 0; }
table.explain-table td { vertical-align: top; border-bottom: 1px solid var(--line); padding: 0.45rem 0.6rem 0.45rem 0; line-height: 1.5; }
table.explain-table td:first-child { width: 34%; }
table.explain-table td:first-child code { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--heading); }
table.explain-table td:last-child { white-space: nowrap; }
table.explain-table td:last-child a { margin-right: 0.4rem; }
a.offsite svg.i { width: 0.85em; height: 0.85em; margin-left: 0.2em; vertical-align: -0.05em; }
table.explain-table tr[hidden] { display: none; }
.clip-tag { display: block; font-size: 11px; }
@media (max-width: 40rem) {
  table.explain-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.explain-table, table.explain-table tbody, table.explain-table tr, table.explain-table td { display: block; width: auto; }
  table.explain-table tr { border-bottom: 1px solid var(--line); padding: 0.45rem 0; }
  table.explain-table td, table.explain-table td:first-child { border: 0; padding: 0.1rem 0; width: auto; }
  table.explain-table td:last-child { white-space: normal; }
}

/* PF-3: share the IDs, opt-in, below the result. */
/* Boxed like the Contribute page's .cta; the page background sets it off from the result panel. */
.share { border: 1px solid var(--accent); background: var(--bg); margin-top: 0.8rem; padding: 1.1rem 1.25rem; }
@media (max-width: 40rem) { .share { padding: 0.9rem 0.75rem; } }
.share-form { display: grid; gap: 0.6rem; font-size: 13px; max-width: 46rem; }
.share-consent { display: flex; gap: 0.6rem; align-items: center; color: var(--accent); font: 600 clamp(1rem, 2.6vw, 1.2rem)/1.35 var(--mono); }
.share-consent input { width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--accent); }
.share-q { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: center; }
.share-q legend { padding: 0; margin-bottom: 0.25rem; width: 100%; }
.share-q label { display: inline-flex; gap: 0.35rem; align-items: center; }
.share-q select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); padding: 0.2rem 0.4rem; max-width: 100%; }
.share-form .btn-cta { justify-self: start; cursor: pointer; }
.share-small { font-size: 12px; margin: 0; }
.share-done { margin: 0; color: var(--accent); font: 600 15px/1.5 var(--mono); }

/* Privacy: one readable column, larger type; headings and intro in the site's mono. */
.privacy { max-width: 44rem; font: 17px/1.65 var(--sans); }
.privacy h1, .privacy h2, .privacy h3 { font-family: var(--mono); }
.privacy h3 { font-size: 1.05rem; margin: 1.25rem 0 0.6rem; color: var(--heading); }
.privacy h1 { font-size: 2rem; }
.privacy .privacy-intro { font: 1.3rem/1.5 var(--mono); color: var(--muted); margin: 0 0 1.75rem; text-wrap: pretty; }
.privacy section { margin-top: 2rem; }
.privacy section.tldr { margin: 0 0 2rem; }
.privacy h2 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.privacy .tldr h2 { font-size: 1.4rem; }
.privacy ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.privacy ul.plain strong { font-size: 1.08em; color: var(--accent); color: color-mix(in srgb, var(--accent) 80%, var(--text)); } /* a slightly softer accent */
.privacy p { margin: 0 0 0.75rem; }
.privacy code { font: 0.85em var(--mono); }
/* The consent notice on /api: the exact text tools must show. */
blockquote.notice-text { margin: 0.5rem 0; padding: 0.5rem 0.9rem; border-left: 3px solid var(--accent); background: var(--panel); }
blockquote.notice-text p { margin: 0; }
.paper > section { min-width: 0; }
.paper pre { overflow-x: auto; max-width: 100%; background: var(--panel); border: 1px solid var(--line); padding: 0.6rem 0.8rem; font-size: 13px; }

/* /admin/shares (PF-3). */
.share-group { margin: 1.5rem 0; }
.share-group h2 { margin-bottom: 0.3rem; }
.share-group > p { margin: 0 0 0.4rem; font-size: 13px; }
table.shares td { vertical-align: top; font-size: 13px; }
table.shares code { font-size: 12px; white-space: nowrap; }
table.shares td:nth-child(2) { white-space: nowrap; }
.unk-tag { font: 11px var(--mono); color: var(--accent); border: 1px solid var(--accent); padding: 0 0.25rem; white-space: nowrap; }

code.evidence { white-space: pre-line; }

/* Per-connector ports (7c, PLAN §25). */
/* The ports sit at the right, clear of the status; each port group (one
   controller) is boxed, and groups stack when a row runs out of room. The "N of M port groups" count stays by the name. */
.capgroups { font-size: 12px; }
.caps li .capports { flex: 1 1 0; min-width: min-content; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; margin-right: 2.5rem; font-size: 12px; }
/* On rows with ports, the inline method and the status get fixed-width,
   right-aligned slots, so the port groups line up whatever the method
   ("automatic", "fixture") and status ("Supported", "Partly works") say. On
   a card that shows inline methods, a row without one keeps its slot. */
.caps li:has(.capports) .capmeta.inline { min-width: 4rem; text-align: right; }
.caps li:has(.capports) .st { min-width: 6rem; text-align: right; }
.caps:has(.capmeta.inline) li:has(.capports):not(:has(.capmeta.inline)):not(.portmeth) .capports { margin-right: calc(2.5rem + 4rem + 0.5rem); }
/* The Ports section's "Port methodology" line: right-aligned with the port
   groups above it, so it also clears the status slot (and the method slot,
   on a card that shows inline methods). */
.caps li.portmeth .capports { margin-right: calc(2.5rem + 0.5rem + 6rem); }
.caps:has(.capmeta.inline) li.portmeth .capports { margin-right: calc(2.5rem + 0.5rem + 4rem + 0.5rem + 6rem); }
.caps li.portmeth a { white-space: nowrap; }
.capgroup { display: inline-flex; gap: 0.6rem; border: 1px solid var(--line-strong); border-radius: 2px; padding: 1px 0.2rem; }
/* The box takes the group's result colour, like the verdict icons. */
.capgroup.g-supported { border-color: var(--ok); }
.capgroup.g-partial { border-color: var(--warn); }
.capgroup.g-failed { border-color: var(--bad); }
.capport { white-space: nowrap; font-family: var(--mono); border: 1px solid transparent; padding: 0 0.2rem; }
.capport svg.v { margin-right: 0.15rem; }
/* Side labels in one column, so each side's ports start at the same place;
   ports are spaced apart, without separators. */
ul.layout { list-style: none; padding: 0; margin: 0 0 0.3rem; display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.6rem; }
ul.layout li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; }
ul.layout .side { color: var(--muted); }
ul.layout .conns { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
ul.layout code { font-size: 11px; color: var(--muted); }
ul.layout .conn { white-space: nowrap; }
code.connref { font-size: 11px; color: var(--muted); }
/* Ports match the drawing's key (.pmkey): covered by a group-mate is the
   pass green, dashed; a possible hardware fault is amber, dashed. */
.capport.covered { color: var(--muted); border: 1px dashed var(--ok); }
.capport.covered svg.v { color: var(--ok); }
.capport.suspect svg.v { color: var(--warn); }
.capport.suspect .tag { font-size: 10px; border: 1px dashed var(--warn); }

/* ── Port map drawings (PLAN §27) ──────────────────────────────────────────
   Inline SVGs from data/portmaps, drawn in the text colour. The site CSP forbids
   inline styles, so the drawing styles live here. Ports and their callouts carry
   data-conn, and data-st when the connector has results. */
.pmfig { margin: 0.2rem 0 0.7rem; }
/* The drawing's download link sits at the top right of the Port layout row,
   on the line of its label. */
.specs > .pmrow { position: relative; }
.pmdl { position: absolute; top: 0.15rem; right: 0; font-size: 12px; }
.pmfig figcaption { font-size: 12px; color: var(--muted); margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: center; }
.pmimg { display: block; max-width: 100%; height: auto; }
svg.pm { display: block; max-width: 100%; height: auto; color: var(--text); }
.pm .pm-o { fill: none; stroke: currentColor; stroke-width: .45; stroke-linejoin: round; }
.pm .pm-t { fill: none; stroke: currentColor; stroke-width: .25; }
.pm .pm-f { fill: none; stroke: currentColor; stroke-width: .3; opacity: .45; }
.pm .pm-p { fill: currentColor; fill-opacity: .1; stroke: currentColor; stroke-width: .35; stroke-linejoin: round; }
.pm .pm-d { fill: none; stroke: currentColor; stroke-width: .3; }
.pm .pm-k .pm-c, .pm .pm-c { fill: none; stroke: currentColor; stroke-width: .3; }
.pm .pm-l { fill: none; stroke: currentColor; stroke-width: .25; stroke-dasharray: .5 .7; opacity: .7; }
.pm .pm-x { fill: currentColor; font: 3.8px/1 var(--sans); }
.pm .pm-n { fill: currentColor; font: 600 3.3px/1 var(--sans); text-anchor: middle; dominant-baseline: central; }
.pm .pm-nb { fill: currentColor; font: 600 7.4px/1 var(--sans); text-anchor: middle; dominant-baseline: central; }
.pm .pm-h { fill: currentColor; font: 600 3.4px/1 var(--sans); letter-spacing: .35px; text-transform: uppercase; }
.pm .pm-e { fill: currentColor; font: 3px/1 var(--sans); opacity: .6; }
.pm .pm-k { cursor: default; }
/* The larger callout numbers replace the normal ones on narrow screens. */
.pm .pm-lg { display: none; }
@media (max-width: 600px) {
  .pm .pm-sm { display: none; } .pm .pm-lg { display: inline; }
  .pmfig:has(svg.pm-wide) { overflow-x: auto; }
  svg.pm-wide { max-width: none; width: 560px; }
}
/* Status colours: green only for passed tests. */
.pm [data-st="supported"], .pm [data-st="covered"], .pm [data-st="partly"] { color: var(--ok); }
.pm [data-st="partial"], .pm [data-st="suspect"] { color: var(--warn); }
.pm [data-st="failed"] { color: var(--bad); }
.pm .pm-port[data-st] .pm-p { fill-opacity: .32; stroke-width: .5; }
.pm .pm-port[data-st="partly"] .pm-p { fill-opacity: 0; stroke-width: .6; }
.pm .pm-port[data-st="covered"] .pm-p { fill-opacity: .14; stroke-dasharray: .9 .5; }
.pm .pm-port[data-st="suspect"] .pm-p { stroke-dasharray: .9 .5; }
.pm .pm-k[data-st] .pm-c { fill: currentColor; fill-opacity: .16; stroke-width: .45; }
.pm .pm-k[data-st] .pm-l { opacity: 1; }
/* Hover or focus on a port, a callout or a list line highlights all three. */
.pm .is-hot .pm-c, .pm .pm-port.is-hot .pm-p { stroke-width: .8; }
.pm .pm-k.is-hot .pm-l { opacity: 1; stroke-width: .4; }
ul.pmlist .conn { border-radius: 3px; padding: 0 0.15rem; }
ul.pmlist .conn.is-hot, ul.pmlist .conn:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pmnum { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; margin-right: 0.3rem; border: 1px solid currentColor;
  border-radius: 1em; font: 600 10px/1 var(--sans); color: var(--text); padding: 0 0.15em; vertical-align: 1px; }
.pmnum[data-st="supported"], .pmnum[data-st="covered"], .pmnum[data-st="partly"] { color: var(--ok); }
.pmnum[data-st="partial"], .pmnum[data-st="suspect"] { color: var(--warn); }
.pmnum[data-st="failed"] { color: var(--bad); }
.pmnum[data-st]:not([data-st="partly"]) { background: color-mix(in srgb, currentColor 16%, transparent); }
/* Under the side lines: each port that isn't green, with its criteria's results.
   Spaced from them as the colour key is (.pmfig's bottom margin). */
ul.pmwhy { list-style: none; padding: 0; margin: 0.7rem 0 0.5rem; display: grid; gap: 0.2rem; font-size: 12px; color: var(--muted); }
ul.pmwhy code { font-size: 11px; margin-right: 0.3rem; }
ul.pmwhy .pmword[data-st="partial"], ul.pmwhy .pmword[data-st="suspect"] { color: var(--warn); }
ul.pmwhy .pmword[data-st="failed"] { color: var(--bad); }
.pmkey { display: inline-flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; align-items: center; }
.pmkey > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }
.sw { display: inline-block; width: 0.85em; height: 0.85em; border-radius: 2px; border: 1px solid var(--muted); }
.sw[data-st="supported"] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 32%, transparent); }
.sw[data-st="covered"] { border: 1px dashed var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.sw[data-st="partly"] { border: 1.5px solid var(--ok); }
.sw[data-st="partial"] { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 32%, transparent); }
.sw[data-st="failed"] { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 32%, transparent); }
.sw[data-st="suspect"] { border: 1px dashed var(--warn); background: color-mix(in srgb, var(--warn) 32%, transparent); }
/* Narrow screens: the drawing takes the row's full width, and port lines wrap. */
@media (max-width: 760px) {
  .specs > .pmrow { grid-template-columns: 1fr; gap: 0.2rem; }
  ul.pmlist .conn { white-space: normal; }
}
.report-ports h2 { font-size: 1rem; margin: 1rem 0 0.4rem; }

/* Fix tracking (PLAN §26). */
.fixline b { font-weight: 600; }
.fixes-page .lead { max-width: 70ch; }
.fix-group { margin: 1.5rem 0; }
.fix-group h2 { display: flex; gap: 0.5rem; align-items: baseline; }
.fix-group .count { font-size: 13px; }
table.fixes td { vertical-align: top; font-size: 13px; }
table.fixes td.num, table.fixes th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fix-actions { display: grid; gap: 0.4rem; justify-items: start; }
table.fixes a.inline-link { text-decoration: underline; }