/* Part Index — hand-written, system fonts, no external requests. */
:root {
  --bg: #fafafa; --fg: #1a1a1a; --dim: #6b7280; --line: #e5e7eb;
  --card: #ffffff; --accent: #1d4ed8; --accent-soft: #dbeafe;
  --hl: #fef3c7; --hl-line: #f59e0b; --mono: ui-monospace, "Cascadia Mono",
  Consolas, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418; --fg: #e5e7eb; --dim: #9ca3af; --line: #2a2f37;
    --card: #181c22; --accent: #7aa2ff; --accent-soft: #1e2a4a;
    --hl: #3a2f10; --hl-line: #d97706;
  }
  img { filter: brightness(.92); }
  .board img { filter: invert(0); background: #fff; } /* drawings stay on white */
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); font-weight: normal; }
.small { font-size: 12.5px; }

header.site {
  display: flex; gap: 16px; align-items: center; padding: 5px 18px;
  border-bottom: 1px solid var(--line); background: var(--card);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; }
.brand img { height: 38px; width: auto; display: block; }
@media (prefers-color-scheme: dark) {
  .brand img { filter: invert(1) brightness(1.1); }
}
.wordmark { font-size: 19px; letter-spacing: -.3px; color: var(--fg); }
.wordmark b { color: var(--accent); }
header .search { flex: 1; display: flex; max-width: 560px; }
header .search input {
  flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 6px 0 0 6px; background: var(--bg); color: var(--fg);
  font-size: 14px;
}
header .search button {
  padding: 7px 14px; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 14px;
}
.kofi { margin-left: auto; white-space: nowrap; font-size: 13px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--fg); background: var(--bg); }
.kofi:hover { border-color: var(--hl-line); background: var(--hl);
  text-decoration: none; }
@media (max-width: 720px) { .kofi span { display: none; }
  .kofi { padding: 6px 9px; } }

/* Phone header. Chip-less pages stay one row (the brand <picture> swaps the
   wordmark for the square icon). With a vehicle chip the search drops to a
   full-width second row: logo + chip + coffee on top, search below. */
@media (max-width: 720px) {
  header.site { padding: 5px 12px; gap: 10px; }
  header.site.hasctx { flex-wrap: wrap; row-gap: 6px; }
  header.site.hasctx .search { order: 9; flex-basis: 100%; max-width: none; }
}
@media (max-width: 720px) and (prefers-color-scheme: dark) {
  .brand picture img { filter: none; } /* icon.svg self-adapts to dark */
}

.langsel { position: relative; margin-left: auto; font-size: 13.5px; }
.langsel summary { cursor: pointer; color: var(--dim); list-style: none; }
.langsel ul {
  position: absolute; right: 0; top: 24px; margin: 0; padding: 6px;
  list-style: none; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.12);
  columns: 2; min-width: 260px;
}
.langsel a { display: block; padding: 3px 8px; border-radius: 4px; color: var(--fg); }
.langsel a.on, .langsel a:hover { background: var(--accent-soft); text-decoration: none; }

main { max-width: 1280px; margin: 0 auto; padding: 18px; }
footer.site {
  max-width: 1280px; margin: 24px auto 0; padding: 14px 18px;
  border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px;
}

.hero { margin: 26px 0 10px; }
.hero h1 { margin: 0 0 6px; font-size: 26px; }
.hero .sub { color: var(--dim); margin: 0; }
.crumbs { font-size: 13px; color: var(--dim); margin: 4px 0 10px; }
h1 { font-size: 22px; margin: 8px 0 12px; }
h2 { font-size: 16px; margin: 20px 0 8px; }
h2.fg, h3.fg { color: var(--dim); font-weight: 600; font-size: 14px; }

.tiles { list-style: none; margin: 8px 0 18px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tiles a {
  display: block; padding: 10px 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; color: var(--fg);
  min-height: 100%;
}
.tiles a:hover { border-color: var(--accent); text-decoration: none; }
.tiles b { display: block; font-size: 15px; }
.tiles span { display: block; color: var(--dim); font-size: 12.5px; }
.tiles em { float: right; font-style: normal; color: var(--dim); font-size: 12px; }
.tiles.groups a, .tiles.diagrams a { text-align: center; }
.tiles img { max-width: 100%; height: 72px; object-fit: contain; background: #fff;
  border-radius: 4px; margin-bottom: 6px; }
.tiles.diagrams { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tiles.diagrams img { height: 110px; }

table.list, table.parts { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
table th { text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--dim); padding: 8px 10px;
  border-bottom: 1px solid var(--line); background: var(--card); }
table td { padding: 6px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top; }
table tr:last-child td { border-bottom: none; }
table tr:hover td { background: var(--accent-soft); }

.context { color: var(--dim); font-size: 13.5px; }
.diagramwrap { display: block; }
.board { margin: 0 auto 18px; position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px;
  max-width: 1100px; }
.board img { display: block; width: 100%; height: auto; }
.board svg { position: absolute; inset: 6px; width: calc(100% - 12px);
  height: calc(100% - 12px); }
.board a.hs rect { fill: transparent; stroke: transparent; stroke-width: 2;
  pointer-events: all; cursor: pointer; }
.board a.hs:hover rect, .board a.hs:focus-visible rect, .board a.hs.hl rect {
  fill: rgba(245, 158, 11, .18); stroke: var(--hl-line); }
.board a.hs.sel rect { fill: rgba(29, 78, 216, .20); stroke: var(--accent);
  stroke-width: 2.5; }
.positions { overflow-x: auto; }
td.pos { font-weight: 700; position: relative; }
/* Conjunction bracket: rows only replaced together get an amber wire with
   arrows spanning the group, on both row edges (visible before any hover). */
tr.cj td:last-child { position: relative; padding-right: 16px; }
tr.cj td.pos::before, tr.cj td:last-child::before { content: "";
  position: absolute; width: 2px; top: -1px; bottom: -1px;
  background: var(--hl-line); }
tr.cj td.pos::before { left: 3px; }
tr.cj td:last-child::before { right: 6px; }
tr.cj-start td.pos::before, tr.cj-start td:last-child::before { top: 17px; }
tr.cj-end td.pos::before, tr.cj-end td:last-child::before { bottom: auto;
  height: 18px; }
tr.cj-start td.pos::after, tr.cj-end td.pos::after,
tr.cj-start td:last-child::after, tr.cj-end td:last-child::after { content: "";
  position: absolute; width: 0; height: 0; top: 11px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; }
tr.cj-start td.pos::after, tr.cj-end td.pos::after { left: 0; }
tr.cj-start td:last-child::after, tr.cj-end td:last-child::after { right: 3px; }
tr.cj-start td.pos::after, tr.cj-start td:last-child::after {
  border-bottom: 6px solid var(--hl-line); }
tr.cj-end td.pos::after, tr.cj-end td:last-child::after {
  border-top: 6px solid var(--hl-line); }
td.qty { text-align: center; }
.pn { white-space: nowrap; }
.succ { display: block; font-size: 12px; }
tr.hl td { background: var(--hl) !important; }
tr.sel td { background: var(--accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--accent); }
tr[data-callout] { cursor: pointer; }
tr.older td { opacity: .55; }
tr.na td { color: var(--dim); font-style: italic; }
/* Phone positions table: tighter horizontal padding (it scrolls anyway), and
   the part-number cell must not wrap — a line break is allowed BEFORE an
   atomic inline like the injected copy button even without whitespace, so at
   min-content width the button dropped below the number. The .succ override
   caps the column at the main number + button pair: the superseded sub-line
   wraps at its spaces instead of stretching the column single-line, and its
   own smaller number + button chunk fits within that cap. td.pos keeps 8px
   on the left so the conjunction wire + arrowheads (x 0..8) stay clear. */
@media (max-width: 720px) {
  .positions th, .positions td { padding-left: 6px; padding-right: 6px; }
  .positions td.pos { padding-left: 8px; }
  .positions td.mono { white-space: nowrap; }
  .positions td.mono .succ { white-space: normal; }
}
.fn { font-size: 11.5px; }
.badge { font-style: normal; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .4px; background: var(--hl); color: var(--hl-line);
  border: 1px solid var(--hl-line); border-radius: 4px; padding: 0 4px; }
.banner { padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.banner.warn { background: var(--hl); border: 1px solid var(--hl-line); }

.pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 18px; align-items: start; }
@media (max-width: 800px) { .pickers { grid-template-columns: 1fr; } }
.picker { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px; }
.picker h2 { margin-top: 0; }
.vinform { display: flex; gap: 0; }
.vinform input { flex: 1; padding: 9px 12px; font-size: 15px;
  font-family: var(--mono); border: 1px solid var(--line);
  border-radius: 6px 0 0 6px; background: var(--bg); color: var(--fg);
  text-transform: uppercase; }
.vinform button { padding: 9px 16px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; border-radius: 0 6px 6px 0;
  cursor: pointer; font-size: 14.5px; }
.cascade { display: flex; flex-direction: column; gap: 10px; }
.cascade label { display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px; color: var(--dim); }
.cascade select { padding: 8px 10px; font-size: 14.5px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
/* the custom bg/color above suppresses the native disabled look */
.cascade select:disabled { opacity: .45; cursor: not-allowed; }
.cascade .go { align-self: flex-start; padding: 9px 18px; border-radius: 6px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; font-size: 14.5px; }
.datectx { margin: 4px 0 14px; font-size: 13.5px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; }
.datectx select { padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--card); color: var(--fg); }
.ctxnote { color: var(--accent); }
.ctxchip { align-self: center; font-size: 12px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 2px 10px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.wrongctx { background: var(--hl); border: 2px solid var(--hl-line);
  border-radius: 10px; padding: 4px 16px 10px; margin-top: 16px; }
.cascade select { width: 100%; max-width: 100%; text-overflow: ellipsis; }

.notes { margin-top: 20px; font-size: 13.5px; }
.notes ol { padding-left: 22px; }
.notecell { min-width: 160px; max-width: 320px; }
.notei { padding: 1px 0; color: var(--fg); }
.nc { background: var(--accent-soft); color: var(--accent);
  border-radius: 0 4px 4px 0; padding: 0 4px; font-size: 11.5px;
  white-space: nowrap; }
.nc.minus { background: rgba(220, 38, 38, .12); color: #dc2626; }
.sign { display: inline-block; min-width: 15px; text-align: center;
  font-weight: 800; font-size: 11.5px; border-radius: 4px 0 0 4px;
  padding: 0 2px; }
.sign.plus { background: var(--accent); color: #fff; }
.sign.minus { background: #dc2626; color: #fff; }
@media (prefers-color-scheme: dark) {
  .nc.minus { color: #f87171; }
  .sign.minus { background: #b91c1c; }
}
.legend { font-style: normal; text-transform: none; letter-spacing: 0;
  font-weight: 400; margin-left: 6px; }
.bugform { max-width: 640px; }
.bugform input[type=text], .bugform input[type=email], .bugform textarea {
  padding: 8px 10px; font-size: 14.5px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  font-family: inherit; }
.bugform .hp { position: absolute; left: -9999px; }
.prose { max-width: 720px; line-height: 1.6; }
.prose h2 { margin-top: 22px; }
.prose li { margin: 6px 0; }
.platenote { background: var(--card); border: 1px solid var(--line);
  margin-bottom: 12px; }
.chain { list-style: none; padding: 0; }
.chain li { padding: 4px 0 4px 18px; border-left: 2px solid var(--line);
  margin-left: 8px; }
.chain li.current { border-left-color: var(--accent); background: var(--accent-soft);
  border-radius: 0 6px 6px 0; }
.uselist { list-style: none; padding: 0; columns: 2; }
@media (max-width: 700px) { .uselist { columns: 1; } }
.uselist li { padding: 2px 0; break-inside: avoid; }
.fitmore summary { cursor: pointer; color: var(--dim); padding: 4px 0; }
.fitmore summary:hover { color: var(--fg); }
.fitmodels { display: inline-block; }
.fitmodels[open] { display: block; }
.fitmodels summary { cursor: pointer; padding: 0 2px; }
.fitmodels summary:hover { color: var(--fg); }
.fitmodels ul { list-style: none; margin: 0; padding: 2px 0 6px 18px;
  font-size: 13px; }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px;
  font-size: 13.5px; }
.meta dt { color: var(--dim); }
.meta dd { margin: 0; }
.empty { color: var(--dim); background: var(--card); border: 1px dashed var(--line);
  padding: 14px; border-radius: 8px; }
.pn-title { font-size: 24px; margin-bottom: 2px; cursor: copy; }
.partname { margin-top: 2px; }
/* Copy buttons, injected by app.js after each [data-copy] part number.
   Negative vertical margins keep them from growing tight table rows. */
button.copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin: -4px 0 -4px 2px;
  vertical-align: middle; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--dim); cursor: pointer;
}
button.copy svg { width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
button.copy:hover, button.copy:focus-visible { color: var(--accent);
  border-color: var(--line); background: var(--card); }
button.copy .ic-ok { display: none; }
button.copy.copied { color: var(--hl-line); }
button.copy.copied .ic-copy { display: none; }
button.copy.copied .ic-ok { display: block; }
.pn-title button.copy { width: 26px; height: 26px; margin: 0 0 0 8px; }
.pn-title button.copy svg { width: 16px; height: 16px; }