:root {
  --bg: #0f1419;
  --panel: #1a222c;
  --panel-2: #222b36;
  --border: #2c3845;
  --text: #e7ecf1;
  --muted: #93a1b0;
  --accent: #5b9fd4;
  --accent-dim: rgba(91, 159, 212, 0.15);
  --y: #3d9a6a;
  --n: #c45c5c;
  --partial: #c9a227;
  --unknown: #6b7785;
  --high: #3d9a6a;
  --med: #c9a227;
  --low: #c45c5c;
  --radius: 10px;
  --header-h: 0px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header {
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 1.25rem;
  background: rgba(26, 34, 44, 0.96);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1.25rem;
}

header .brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

header .badge {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--partial);
  color: var(--partial);
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.15rem;
}

nav a {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
}

nav a:hover {
  color: var(--text);
  background: var(--accent-dim);
  text-decoration: none;
}

nav a.active {
  color: var(--text);
  background: var(--accent-dim);
  font-weight: 600;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.35rem 1.25rem 2rem;
  width: 100%;
  flex: 1;
}

h1 {
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  margin: 0 0 0.45rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h2 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.65rem;
}

.lead {
  color: var(--muted);
  max-width: 46rem;
  margin: 0 0 0.75rem;
  font-size: 0.98rem;
}

.notice {
  background: #2a2418;
  border: 1px solid rgba(201, 162, 39, 0.55);
  color: #e8d9a0;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  margin: 0.85rem 0 1.15rem;
  font-size: 0.88rem;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0.85rem 0 1rem;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 5.5rem;
}

.stat strong {
  display: block;
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.2;
}

.stat.stat-high strong { color: #7dcea0; }
.stat.stat-med strong { color: #e0c86a; }
.stat.stat-low strong { color: #e09090; }
.stat.stat-unknown strong { color: #b0bac4; }

/* Legend with real chips */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
  margin: 0.5rem 0 0.85rem;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0.65rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-title {
  font-weight: 600;
  color: var(--text);
  margin-right: 0.25rem;
}

/* Confidence filter chips */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.85rem;
}

.toolbar-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}

.conf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.conf-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.conf-chip:hover { border-color: var(--accent); color: var(--text); }

.conf-chip.active {
  color: var(--text);
  border-color: transparent;
}

.conf-chip[data-conf="High"].active {
  background: rgba(61, 154, 106, 0.3);
  border-color: rgba(61, 154, 106, 0.55);
  color: #7dcea0;
}
.conf-chip[data-conf="Med"].active {
  background: rgba(201, 162, 39, 0.28);
  border-color: rgba(201, 162, 39, 0.55);
  color: #e0c86a;
}
.conf-chip[data-conf="Low"].active {
  background: rgba(196, 92, 92, 0.28);
  border-color: rgba(196, 92, 92, 0.55);
  color: #e09090;
}
.conf-chip[data-conf="Unknown"].active {
  background: rgba(107, 119, 133, 0.35);
  border-color: rgba(107, 119, 133, 0.6);
  color: #b0bac4;
}

.meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.meta strong { color: var(--text); font-weight: 600; }

/* Matrix table scroll + sticky */
.table-wrap {
  overflow-x: auto;
  overflow-y: visible; /* v0.37.1: no vertical clip — all 24 type rows visible */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #3a4654;
  border-radius: 6px;
}
.table-wrap::-webkit-scrollbar-track { background: var(--panel-2); }

table.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  min-width: 640px;
}

table.matrix th,
table.matrix td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid rgba(44, 56, 69, 0.6);
  padding: 0.5rem 0.55rem;
  text-align: center;
  vertical-align: middle;
}

table.matrix th:last-child,
table.matrix td:last-child { border-right: none; }

table.matrix tbody tr:last-child td { border-bottom: none; }

table.matrix thead th {
  background: var(--panel-2);
  position: sticky;
  top: 0;
  z-index: 3;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--border);
}

table.matrix th:first-child,
table.matrix td:first-child {
  text-align: left;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
  min-width: 11rem;
  padding-left: 0.85rem;
  box-shadow: 1px 0 0 var(--border);
}

table.matrix thead th:first-child {
  z-index: 4;
  background: var(--panel-2);
}

/* v0.39.2: sticky thead vs page scroll.
   overflow-x:auto makes .table-wrap the scroll container, so sticky th only
   pins inside it (and it never scrolls vertically). On viewports wide enough
   for the table, drop the wrapper's overflow so th sticks to the viewport,
   offset below the sticky site header. No max-height — all rows stay visible.
   Narrow screens keep horizontal scroll (+ sticky first column).
   v0.75: breakpoint 760px -> 1080px. The matrix table needs ~1014px, so at
   760-1039px the un-clipped wrapper made the whole page scroll sideways
   (L3 audit: scrollWidth 1035 at 800px). Below 1080px the wrapper scrolls. */
:root { --site-header-h: 3.9rem; }
@media (min-width: 1080px) {
  .table-wrap { overflow: visible; }
  table.matrix thead th { top: var(--site-header-h); }
  table.matrix thead th:first-child { border-top-left-radius: var(--radius); }
  table.matrix thead th:last-child { border-top-right-radius: var(--radius); }
}

table.matrix tbody tr:nth-child(even) td { background: rgba(15, 20, 25, 0.35); }
table.matrix tbody tr:nth-child(even) td:first-child { background: #161d25; }
table.matrix tbody tr:hover td { background: rgba(91, 159, 212, 0.08); }
table.matrix tbody tr:hover td:first-child { background: #1a2530; }

table.matrix td a.cell-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  color: inherit;
  padding: 0.2rem 0.15rem;
  border-radius: 6px;
  min-width: 5.6rem;
}

table.matrix td a.cell-link:hover { background: var(--accent-dim); }

table.matrix td .cell-conf {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

table.matrix td .cell-conf.High { color: #7dcea0; }
table.matrix td .cell-conf.Med { color: #e0c86a; }
table.matrix td .cell-conf.Low { color: #e09090; }
table.matrix td .cell-conf.Unknown { color: #b0bac4; }

table.matrix tr.row-dimmed { opacity: 0.22; }
table.matrix tr.row-dimmed td a { pointer-events: none; }

table.matrix td.cell-dimmed { opacity: 0.18; }
table.matrix td.cell-dimmed a { pointer-events: none; }

.chip {
  display: inline-block;
  min-width: 1.55rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.chip.Y { background: rgba(61, 154, 106, 0.28); color: #7dcea0; }
.chip.N { background: rgba(196, 92, 92, 0.28); color: #e09090; }
.chip.Partial { background: rgba(201, 162, 39, 0.28); color: #e0c86a; }
.chip.Unknown { background: rgba(107, 119, 133, 0.35); color: #b0bac4; }
.chip.High { background: rgba(61, 154, 106, 0.18); color: #7dcea0; }
.chip.Med { background: rgba(201, 162, 39, 0.18); color: #e0c86a; }
.chip.Low { background: rgba(196, 92, 92, 0.18); color: #e09090; }

/* Filters (filter page) */
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: var(--radius);
}

.filters label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.filters select,
.filters input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.55rem;
  font: inherit;
  font-size: 0.92rem;
}

.filters select:focus,
.filters input:focus {
  outline: 2px solid rgba(91, 159, 212, 0.45);
  outline-offset: 1px;
}

/* Cards */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.05rem 1.15rem;
  margin-bottom: 0.9rem;
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.card h3 .plat-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: 0.35rem;
}

.verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  margin: 0.65rem 0 0.9rem;
  font-size: 0.92rem;
}

.verdict.ok {
  background: rgba(61, 154, 106, 0.15);
  border: 1px solid rgba(61, 154, 106, 0.4);
  color: #9ed9b8;
}
.verdict.partial {
  background: rgba(201, 162, 39, 0.15);
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: #e8d48a;
}
.verdict.no {
  background: rgba(196, 92, 92, 0.15);
  border: 1px solid rgba(196, 92, 92, 0.4);
  color: #e8a8a8;
}
.verdict.unknown {
  background: rgba(107, 119, 133, 0.2);
  border: 1px solid rgba(107, 119, 133, 0.45);
  color: #c0c8d0;
}

.verdict .asked {
  color: var(--muted);
  font-size: 0.82rem;
  width: 100%;
}

.grid-caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0;
}

@media (max-width: 640px) {
  .grid-caps { grid-template-columns: repeat(2, 1fr); }
}

.cap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.45rem;
  text-align: center;
  font-size: 0.85rem;
}

.cap span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}

.cap.cap-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(91, 159, 212, 0.25);
}

.card-notes {
  margin: 0.65rem 0;
  font-size: 0.92rem;
}

.sources {
  font-size: 0.8rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.sources ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.sources a { word-break: break-all; }

.type-list {
  columns: 2;
  gap: 1.5rem;
  margin: 1rem 0;
  padding-left: 1.2rem;
}

@media (max-width: 700px) {
  .type-list { columns: 1; }
  header .header-inner { flex-direction: column; align-items: flex-start; }

  /* v0.59.1 — ≥44px tap targets for nav / footer / filter chips (WCAG 2.5.5) */
  nav a,
  header .brand a,
  footer .footer-inner a,
  .conf-chip,
  .stale-chip,
  .changed-chip,
  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.65rem 0.85rem;
  }
  footer .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
    line-height: 1.3;
  }
  /* keep separators readable between taller footer links */
  footer .footer-inner a { margin: 0; }
}

.type-list li { margin-bottom: 0.4rem; }

/* Doc pages (methodology / changelog) */
.doc {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.4rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.doc h1 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.doc h2 {
  font-size: 1.05rem;
  margin: 1.35rem 0 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.doc h2:first-of-type { border-top: none; padding-top: 0; }
.doc p { margin: 0.45rem 0; color: var(--text); }
.doc ul, .doc ol { margin: 0.4rem 0 0.6rem; padding-left: 1.25rem; color: var(--text); }
.doc li { margin-bottom: 0.3rem; }
.doc code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.doc strong { color: #fff; }
.doc a { word-break: break-all; }

pre, code { font-family: "IBM Plex Mono", ui-monospace, monospace; }

pre {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.8rem;
  white-space: pre-wrap;
}

footer {
  border-top: 1px solid var(--border);
  margin-top: auto;
  padding: 1.1rem 1.25rem;
  color: var(--muted);
  font-size: 0.82rem;
  background: var(--panel);
}

footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  main { padding: 1rem 0.85rem 1.5rem; }
  table.matrix { font-size: 0.75rem; min-width: 560px; }
  table.matrix th:first-child,
  table.matrix td:first-child { min-width: 8.5rem; }
}

/* v0.6 stale-cell UX */
.matrix-cell.is-stale{outline:2px dashed #d97706;outline-offset:-3px}
.stale-dot{font-size:.75em;margin-left:.2em}
.stale-badge{display:inline-block;background:#fef3c7;color:#92400e;border:1px solid #d97706;border-radius:999px;padding:0 .5em;font-size:.8em}
.fresh-badge{display:inline-block;background:#ecfdf5;color:#065f46;border-radius:999px;padding:0 .5em;font-size:.8em}
.stale-warn{background:#fef3c7;border-left:4px solid #d97706;padding:.5rem .75rem;margin:.5rem 0;color:#92400e}
.card.is-stale{border-color:#d97706}
.stale-chip{border:1px solid #d97706;background:#fff;color:#92400e;border-radius:999px;padding:.2rem .7rem;cursor:pointer}
.stale-chip.active{background:#d97706;color:#fff}
.stat-stale strong{color:#b45309}

/* v0.7 SKU directory */
.sku-filters { margin-top: 0.25rem; }
.sku-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.35rem;
}
.sku-card-head h3 {
  margin: 0;
  font-size: 1.05rem;
  flex: 1 1 12rem;
}
.sku-model {
  font-weight: 500;
  color: var(--muted);
}
.sku-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.sku-type-link {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid rgba(91, 159, 212, 0.35);
  color: var(--accent);
  text-decoration: none;
}
.sku-type-link:hover { text-decoration: underline; }
.sku-transport {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.sku-hint { margin: 0.25rem 0 0.45rem; }
.sku-deltas {
  margin: 0.75rem 0;
  font-size: 0.9rem;
}
.sku-deltas strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.sku-deltas ul {
  margin: 0;
  padding-left: 1.15rem;
}
.sku-deltas li { margin-bottom: 0.3rem; }
.sku-url {
  color: var(--muted);
  font-size: 0.75rem;
  word-break: break-all;
}
#sku-list .sku-card { scroll-margin-top: 4.5rem; }
/* v0.53.1 source link-liveness flag */
.link-flag { color: #b45309; font-size: 0.75rem; cursor: help; }

/* v0.11 legal drafts */
.draft-banner {
  background: #422006;
  border: 1px solid #d97706;
  color: #fde68a;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.draft-banner code {
  background: rgba(0,0,0,0.25);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.85em;
}
main.legal h2 {
  margin-top: 1.5rem;
  font-size: 1.1rem;
}
main.legal ul {
  padding-left: 1.25rem;
}
main.legal li { margin-bottom: 0.35rem; }
footer .footer-inner a {
  color: var(--accent);
  text-decoration: none;
}
footer .footer-inner a:hover { text-decoration: underline; }
/* v0.75 — footer links >=24px tall on wider screens (WCAG 2.2 2.5.8 target size);
   <=700px keeps the 44px rule above. */
@media (min-width: 701px) {
  footer .footer-inner a { display: inline-block; padding: 0.25rem 0.1rem; }
}


/* v0.18 — trigger vs action visual distinction + differ note */
.differ-note {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.65rem 0 0.85rem;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 52rem;
  line-height: 1.55;
}
.differ-note strong { color: var(--text); }
.differ-note em { color: var(--text); font-style: italic; }
.differ-note a { word-break: break-word; }
.differ-note p { margin: 0; }
.notice p { margin: 0; }

.cap-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 3px;
  margin-right: 0.2rem;
  flex-shrink: 0;
}
.cap-key-p { background: rgba(147, 161, 176, 0.25); color: #c5ced6; }
.cap-key-c { background: rgba(91, 159, 212, 0.22); color: #8ec0e8; }
.cap-key-t {
  background: rgba(167, 139, 250, 0.28);
  color: #c4b5fd;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45);
}
.cap-key-a {
  background: rgba(45, 212, 191, 0.22);
  color: #5eead4;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.45);
}

.cell-caps {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  width: 100%;
}
.cap-row {
  display: flex;
  gap: 0.28rem;
  justify-content: center;
}
.cap-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
}
.cap-mini .chip {
  min-width: 1.35rem;
  padding: 0.08rem 0.28rem;
  font-size: 0.65rem;
}
.cap-trigger {
  padding: 0.12rem 0.2rem;
  border-radius: 5px;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.35);
}
.cap-action {
  padding: 0.12rem 0.2rem;
  border-radius: 5px;
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.35);
}
.cap-row-auto {
  padding-top: 0.05rem;
}

.note-t { color: #c4b5fd; }
.note-a { color: #5eead4; }

.legend .cap-key { vertical-align: middle; }

@media (max-width: 600px) {
  table.matrix td a.cell-link { min-width: 4.8rem; }
  .cap-mini .chip { font-size: 0.6rem; min-width: 1.2rem; }
}

/* v0.24 change tracking */
.matrix-cell.is-changed{box-shadow:inset 0 0 0 2px #2563eb}
.change-badge{display:inline-block;background:#dbeafe;color:#1e40af;border:1px solid #2563eb;border-radius:999px;padding:0 .4em;font-size:.72em;font-weight:700;margin-left:.2em}
.recent-changes{border:1px solid var(--accent);border-left-width:4px;background:var(--panel-2);color:var(--text);border-radius:8px;padding:.6rem .9rem;margin:.75rem 0}
.recent-changes h3{margin:.1rem 0 .4rem;font-size:1rem;color:var(--text)}
.recent-changes .meta{color:#b8c4d0}
.recent-changes a{color:#8cc4ef}
.recent-changes li{margin:.15rem 0}
.recent-changes li .meta:last-child{white-space:nowrap}
.recent-changes ul{margin:0;padding-left:1.1rem}
.changed-chip{border:1px solid #2563eb;background:#fff;color:#1e40af;border-radius:999px;padding:.2rem .7rem;cursor:pointer}
.changed-chip.active{background:#2563eb;color:#fff}

/* v0.57.1 mobile: break long tokens/URLs so notes & code never widen the page */
.card-notes, main p, main li, main code, main dd, main td.notes { overflow-wrap: anywhere; word-break: normal; }
main pre { overflow-x: auto; max-width: 100%; }

/* ===== v1.01 UX review (2026-10-18): nav, home hierarchy, type summary, disclosures ===== */
.brand-wrap { display: flex; align-items: center; }
header a.brand { color: var(--text); }
header a.brand:hover { text-decoration: none; color: #fff; }
footer .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 1rem; }
footer .footer-links { display: inline-flex; flex-wrap: wrap; gap: 0 0.35rem; align-items: center; }

/* Home: quick check is the primary action */
.quick-check { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end;
  border-color: rgba(91, 159, 212, 0.45); background: linear-gradient(180deg, #1c2633, var(--panel)); }
.quick-check button { background: var(--accent); color: #0b1218; font: inherit; font-weight: 700; border: 0;
  border-radius: 6px; padding: 0.55rem 1.4rem; min-height: 2.6rem; cursor: pointer; width: 100%; }
.quick-check button:hover { background: #7ab3e0; }
.quick-check button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.quick-check-alt { margin-top: -0.6rem; }
#matrix-heading { margin-top: 1.25rem; }
.conf-explain { margin: 0.35rem 0 0.6rem; max-width: 60rem; }

/* Recent changes: collapsed disclosure below the matrix */
details.recent-changes > summary { cursor: pointer; font-weight: 600; padding: 0.15rem 0; list-style-position: inside; }
details.recent-changes[open] > summary { margin-bottom: 0.4rem; }

/* Disclosures for long research text */
details.notes-details, details.sku-more { margin: 0.6rem 0 0.4rem; }
details.notes-details > summary, details.sku-more > summary {
  cursor: pointer; color: var(--accent); font-size: 0.88rem; font-weight: 600; padding: 0.35rem 0; min-height: 24px; }
details.notes-details[open] > summary, details.sku-more[open] > summary { margin-bottom: 0.3rem; }

/* Type page: at-a-glance table */
.type-summary h2 { margin-top: 0.5rem; }
.summary-wrap { margin-bottom: 0.4rem; }
table.type-summary-table { border-collapse: collapse; width: 100%; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.88rem; }
table.type-summary-table th, table.type-summary-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); text-align: center; }
table.type-summary-table thead th { color: var(--muted); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
table.type-summary-table tbody th { text-align: left; white-space: nowrap; }
table.type-summary-table tr:last-child th, table.type-summary-table tr:last-child td { border-bottom: 0; }
.type-summary-table .cell-conf { font-size: 0.8rem; font-weight: 600; }
.type-summary-table .cell-conf.High { color: #7dcea0; }
.type-summary-table .cell-conf.Med { color: #e0c86a; }
.type-summary-table .cell-conf.Low { color: #e09090; }
#cards .card { scroll-margin-top: calc(var(--site-header-h) + 0.5rem); }

/* Types index: grouped */
.type-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.25rem 1.5rem; margin: 0.5rem 0 1rem; }
.type-group h2 { font-size: 0.95rem; color: var(--muted); margin: 1rem 0 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; }
.type-group ul { margin: 0; padding-left: 1.1rem; }
.type-group li { margin-bottom: 0.15rem; }
.type-group a { display: inline-block; padding: 0.2rem 0; }

@media (max-width: 700px) {
  /* compact sticky header: brand row + ONE horizontally scrolling nav row (was 3 wrapped rows, 210px) */
  header { padding: 0.45rem 0.75rem 0.25rem; }
  header .header-inner { gap: 0.2rem; }
  nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 0.1rem; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  nav::-webkit-scrollbar { display: none; }
  nav a { flex: 0 0 auto; white-space: nowrap; padding: 0.4rem 0.7rem; }
  .quick-check { grid-template-columns: 1fr; }
  footer .footer-inner { flex-direction: column; }
  table.type-summary-table { font-size: 0.8rem; }
  table.type-summary-table th, table.type-summary-table td { padding: 0.4rem 0.35rem; }
  .type-summary-table thead th { font-size: 0.66rem; }
}
.type-summary-table .sm { display: none; }
@media (max-width: 700px) {
  .type-summary-table .lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .type-summary-table .sm { display: inline; }
  table.type-summary-table tbody th { white-space: normal; }
  .type-summary-table .chip { padding-left: 0.3rem; padding-right: 0.3rem; }
}
/* v1.01: >=24px tap targets for summary-table platform links and type-index links */
.type-summary-table tbody th a, .type-group a { display: inline-block; min-height: 24px; padding: 0.25rem 0; line-height: 1.3; }
.meta-gap { margin-top: .75rem; }

/* v1.04 ad slots (Google AdSense). Hidden unless app.js sets html.ads-on AND the slot has a
   configured ad-unit ID (.is-live). min-height reserves space so the ad doesn't shift layout. */
.ad-slot { display: none; }
html.ads-on .ad-slot.is-live { display: block; min-height: 300px; margin: 1.25rem 0; padding: 0.35rem 0 0.5rem;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; overflow: hidden; }
.ad-label { display: block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.ad-slot ins.adsbygoogle { display: block; min-height: 250px; }
@media (min-width: 701px) {
  html.ads-on .ad-slot.is-live { min-height: 140px; }
  .ad-slot ins.adsbygoogle { min-height: 90px; }
}
button.linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }