:root {
  --alu: #e5e7ea;
  --sheet: #f6f7f8;
  --ink: #121417;
  --muted: #4a525c;
  --grid: #cfd4da;
  --orange: #e2550e;
  --orange-text: #a33a06;
  --ok: #1d7a46;
  --bad: #b3261e;
  --cond: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(14px, 3.5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 1.0625rem/1.6 var(--body);
  background-color: var(--alu);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
[hidden] { display: none !important; }
a { color: var(--orange-text); text-underline-offset: 0.2em; }
h1, h2, h3 { margin: 0; font-family: var(--cond); font-weight: 700; text-transform: uppercase; line-height: 1.02; letter-spacing: 0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -80px; z-index: 20; background: var(--ink); color: #fff; padding: 0.6rem 1rem; }
.skip:focus { top: 12px; }

.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  max-width: 1200px; margin: 0 auto; padding: 18px var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); font-family: var(--cond); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.06em; }
.brand svg { width: 32px; height: 32px; }
.dot { color: var(--orange); }
.site-header ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-header nav a { color: var(--ink); text-decoration: none; font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.site-header nav a:hover { color: var(--orange-text); text-decoration: underline; }

/* Sheets */
.sheet {
  position: relative; max-width: 1200px; margin: 0 auto 28px; width: calc(100% - 2 * var(--gutter));
  background: var(--sheet); border: 1.5px solid var(--ink); padding: clamp(20px, 4vw, 44px);
  box-shadow: 6px 6px 0 rgba(18, 20, 23, 0.12);
}
.sheet::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--grid); pointer-events: none; }
.callout-tag { display: inline-block; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 0.2rem 0.55rem; margin-bottom: 1rem; }
.sheet h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 0.75rem; }
.section-lede { color: var(--muted); max-width: 70ch; margin-bottom: 1.75rem; }

.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "copy art" "copy block"; gap: 1.25rem 2.5rem; align-items: center; }
.hero-copy { grid-area: copy; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin-bottom: 1.1rem; }
.lede { color: var(--muted); font-size: 1.15rem; max-width: 48ch; margin-bottom: 1.75rem; }
.drawing { grid-area: art; margin: 0; }
.drawing svg { width: 100%; height: auto; display: block; }
.dim text { font: 600 13px var(--mono); fill: var(--muted); }
.title-block { grid-area: block; justify-self: end; border-collapse: collapse; font-family: var(--mono); font-size: 0.8rem; min-width: 240px; }
.title-block th, .title-block td { border: 1.5px solid var(--ink); padding: 0.3rem 0.6rem; text-align: left; }
.title-block th { text-transform: uppercase; color: var(--muted); font-weight: 500; width: 40%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0.6rem 1.2rem;
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink); font: 700 1.05rem/1 var(--cond); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--orange-text); border-color: var(--orange-text); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }

/* Checker */
.checker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; }
.col { border: 1.5px solid var(--ink); margin: 0; padding: 1rem 1.1rem 1.2rem; min-width: 0; background: #fff; }
.col legend { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0 0.4rem; font-size: 1.1rem; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.field { margin-bottom: 0.85rem; }
.field label { display: block; font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.25rem; }
.field label span { text-transform: none; letter-spacing: 0; }
.mm { display: flex; border: 1.5px solid var(--ink); background: var(--sheet); }
.mm:focus-within { outline: 3px solid var(--orange); outline-offset: 1px; }
.mm input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font: 600 1.05rem/1.2 var(--mono); padding: 0.5rem 0.55rem; color: var(--ink); }
.mm input:focus { outline: none; }
.mm span { display: grid; place-items: center; padding: 0 0.5rem; font: 500 0.8rem var(--mono); color: var(--muted); border-left: 1px solid var(--grid); }
.field select { width: 100%; font: 600 1rem/1.2 var(--body); border: 1.5px solid var(--ink); background: var(--sheet); padding: 0.55rem 0.5rem; color: var(--ink); }
.help { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }

.results { display: grid; gap: 1rem; }
.volume { background: var(--ink); color: #fff; padding: 1rem 1.1rem; }
.v-label { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.1em; color: #c4cad1; }
.v-value { font: 700 clamp(2.2rem, 6vw, 3rem)/1.1 var(--mono); }
.v-value span { font-size: 0.5em; color: var(--orange); }
.v-note { font-size: 0.85rem; color: #c4cad1; margin-top: 0.3rem; }
.gauges { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.gauge { border: 1.5px solid var(--ink); background: #fff; padding: 0.75rem 0.9rem; }
.g-name { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.track { position: relative; height: 14px; margin: 0.45rem 0; background: repeating-linear-gradient(90deg, var(--sheet) 0 9px, var(--grid) 9px 10px); border: 1px solid var(--ink); overflow: visible; }
.track::after { content: ""; position: absolute; right: -1px; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--orange); transition: width 0.35s ease; max-width: 112%; }
.gauge.is-bad .fill { background: repeating-linear-gradient(-45deg, var(--bad) 0 6px, #d9645c 6px 12px); }
.gauge.is-tight .fill { background: repeating-linear-gradient(-45deg, var(--orange) 0 6px, #f08a4e 6px 12px); }
.g-status { font: 500 0.92rem/1.4 var(--mono); color: var(--muted); }
.gauge.is-ok .g-status { color: var(--ok); }
.gauge.is-tight .g-status { color: var(--orange-text); }
.gauge.is-bad .g-status { color: var(--bad); }
.g-status strong { font-weight: 700; }

.loaded { margin: -0.75rem 0 1.25rem; padding: 0.55rem 0.8rem; border-left: 4px solid var(--orange); background: #fff; font: 500 0.9rem/1.5 var(--mono); color: var(--ink); }
.field label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.psu-set { border: 0; margin: 0.25rem 0 0; padding: 0; min-width: 0; }
.psu-set legend { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.35rem; padding: 0; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 0.75rem; }
.check { display: inline-flex; align-items: center; gap: 0.45rem; font: 500 0.95rem/1.3 var(--body); cursor: pointer; }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--orange-text); }

/* Database */
.db-tabs { display: flex; flex-wrap: wrap; border: 1.5px solid var(--ink); margin-bottom: 1rem; background: #fff; }
.db-tabs [role="tab"] { flex: 1 1 auto; padding: 0.7rem 0.9rem; border: 0; border-right: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 700 1rem/1 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.db-tabs [role="tab"]:last-child { border-right: 0; }
.db-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; }
.db-tabs [role="tab"]:focus-visible { outline-offset: -4px; }
.db-tabs .count { font: 500 0.75rem var(--mono); opacity: 0.75; margin-left: 0.3rem; }
.db-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 0.75rem; }
.db-controls .field { margin: 0; min-width: 0; }
.db-search { flex: 1 1 240px; }
.db-controls input[type="search"] { width: 100%; font: 500 1rem/1.2 var(--body); border: 1.5px solid var(--ink); background: #fff; padding: 0.55rem 0.6rem; color: var(--ink); }
.db-controls .mm input { width: 6rem; }
.db-controls select { font: 600 0.95rem/1.2 var(--body); border: 1.5px solid var(--ink); background: #fff; padding: 0.55rem 0.5rem; color: var(--ink); }
.field-check { padding-bottom: 0.6rem; }
.check:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.db-count { font: 500 0.85rem var(--mono); color: var(--muted); margin-bottom: 0.5rem; }
.db-wrap { border: 1.5px solid var(--ink); max-height: 620px; overflow: auto; background: #fff; }
.db-table { min-width: 720px; }
.db-table th, .db-table td { border: 0; border-bottom: 1px solid var(--grid); padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; font-size: 0.92rem; }
.db-table thead th { position: sticky; top: 0; z-index: 1; background: var(--ink); color: #fff; font: 600 0.8rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.db-table tbody th { font: 600 0.95rem/1.3 var(--body); }
.db-table .sub { display: block; font: 400 0.8rem/1.3 var(--mono); color: var(--muted); margin-top: 0.15rem; }
.db-table td.num { font-family: var(--mono); white-space: nowrap; }
.db-table tbody tr:hover { background: var(--sheet); }
.use { font: 700 0.8rem/1 var(--cond); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.45rem 0.7rem; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.use:hover { background: var(--orange-text); border-color: var(--orange-text); color: #fff; }
.db-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.9rem; }
.db-status { font: 500 0.9rem/1.4 var(--mono); }
.credit { margin-top: 1.25rem; font-size: 0.9rem; color: var(--muted); max-width: 80ch; }

/* Reference */
.ref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: #fff; }
.ref-grid caption { text-align: left; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.1rem; padding-bottom: 0.4rem; }
.ref-grid th, .ref-grid td { border: 1.5px solid var(--ink); padding: 0.55rem 0.75rem; text-align: left; }
.ref-grid thead th { background: var(--ink); color: #fff; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em; }
.ref-grid tbody th { font-family: var(--cond); font-size: 1.05rem; }
.ref-grid td { font-family: var(--mono); font-size: 0.95rem; }
.ref-grid td span { display: block; font-family: var(--body); font-size: 0.8rem; color: var(--muted); }
.fine { font-size: 0.9rem; color: var(--muted); }

.notes { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.notes li { counter-increment: n; position: relative; border: 1.5px solid var(--ink); background: #fff; padding: 1rem 1rem 1.1rem 3.4rem; }
.notes li::before { content: counter(n); position: absolute; left: 0.9rem; top: 0.9rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font: 700 0.9rem var(--mono); background: var(--orange); color: #fff; }
.notes h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.notes p { color: var(--muted); }

.site-footer { max-width: 1200px; margin: 0 auto; padding: 0.5rem var(--gutter) 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }

@media (max-width: 1040px) {
  .checker { grid-template-columns: 1fr 1fr; }
  .results { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "copy" "art" "block"; }
  .title-block { justify-self: stretch; }
  .checker, .ref-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .trio { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}