/* ---------- spec grid ---------- */
.specs{
  margin-top:18px; border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.spec{
  padding:12px 16px 12px 0; border-bottom:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
.spec dt{
  font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
}
.spec dd{margin:0; font-family:var(--mono); font-size:13px; color:var(--ink); overflow-wrap:anywhere}
.spec dd.prose{font-family:var(--sans); font-size:13.5px; color:var(--ink-2); line-height:1.45}
.spec.wide{grid-column:1/-1}

/* plate options */
.plates{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.plate{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  background:var(--inset); border:1px solid var(--line-soft);
  border-left:3px solid var(--warn-edge); border-radius:3px; padding:9px 12px;
}
.plate .sku{font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--ink)}
.plate .src{font-size:12px; color:var(--ink-2)}
.ext{
  font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); text-decoration:none;
  border:1px solid var(--accent); border-radius:3px; padding:2px 7px; white-space:nowrap;
}
.ext:hover{background:var(--accent-soft)}
.ext.is-aff{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.ext.is-aff:hover{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.buy{width:100%; border-collapse:collapse; font-size:13.5px}
.buy td{padding:9px 10px 9px 0; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.buy td:last-child{text-align:right}
.buy .bn{font-weight:500}
.buy .bn em{display:block; font-style:normal; font-size:12px; color:var(--ink-3); margin-top:2px}
.buy .blinks{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.buy .owned{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.disc-inline{
  font-family:var(--sans);
  font-size:12px; color:var(--ink-3); line-height:1.5; margin:0 0 11px; max-width:74ch;
}
.blabel{
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); align-self:center; white-space:nowrap;
}
.buyrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:5px 0}
.buyrow + .buyrow{border-top:1px solid var(--line-soft)}
.buyrow .bn{font-family:var(--mono); font-size:12.5px; color:var(--ink); flex:1 1 200px; min-width:0}
.buyrow .blinks{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.saved-actions{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.linkmsg{font-size:12.5px; color:var(--ink-3); overflow-wrap:anywhere}
@media (max-width:560px){
  .buy td, .buy td:last-child{display:block; text-align:left; border-bottom:0; padding-bottom:0}
  .buy tr{display:block; border-bottom:1px solid var(--line-soft); padding:9px 0}
  .buy .blinks{justify-content:flex-start; margin-top:6px}
  /* "Springfield factory — this item" on one line is wider than a phone's
     sheet box, which clips it; a link pill may wrap here */
  .buy .ext{white-space:normal}
}
.ext:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.disclosure{
  margin-top:16px; font-size:12.5px; color:var(--ink-3); line-height:1.5;
  border:1px dashed var(--line); border-radius:3px; padding:10px 13px;
}
.plate .pnote{font-size:12.5px; color:var(--ink-3); flex-basis:100%; line-height:1.4}

/* ---------- build sheet ---------- */
.sheet{
  margin-top:18px; background:var(--surface); border:1px solid var(--line);
  border-radius:5px; padding:22px 24px 24px; box-shadow:var(--shadow);
}
.sheet-head{border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:16px}
.sheet-head h3{
  font-family:var(--disp); font-size:22px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; margin:0 0 3px;
}
.sheet-head .when{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.sheet-id{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin-bottom:18px;
  font-size:13.5px; align-items:baseline;
}
.sheet-id dt{
  font-family:var(--disp); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}
.sheet-id dd{margin:0; font-family:var(--mono); font-size:13px; overflow-wrap:anywhere}
.sheet-body{display:flex; flex-direction:column; gap:14px; margin-top:18px}
.sbox{border:1px solid var(--line); border-radius:4px; background:var(--surface); overflow:hidden}
.sbox > h4{
  font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; margin:0; padding:9px 15px 8px; color:var(--ink);
  background:var(--inset); border-bottom:1px solid var(--line);
}
.sbox > .sbody{padding:14px 15px 15px}
.sbox > .sbody > :first-child{margin-top:0}
.sbox > .sbody > :last-child{margin-bottom:0}
.sbox-warn{border-color:var(--bad-edge)}
.sbox-warn > h4{background:var(--bad-soft); color:var(--bad); border-bottom-color:var(--bad-edge)}
.parts{width:100%; border-collapse:collapse; font-size:13.5px}
.parts td{padding:7px 8px 7px 0; border-bottom:1px solid var(--line-soft); vertical-align:top}
.parts .qty{font-family:var(--mono); color:var(--ink-3); width:42px; white-space:nowrap}
.parts .amt{font-family:var(--mono); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.parts .sub{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}
.parts tr.opt td{color:var(--ink-2)}
.parts tr.total td{border-bottom:0; border-top:2px solid var(--ink); font-weight:600; padding-top:9px}
.parts tr.total .amt{font-size:15px}
.spec2{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px 18px; font-size:13px}
.spec2 b{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); display:block; font-weight:600;
}
.spec2 span{font-family:var(--mono); font-size:12.5px}
.steps{margin:0; padding-left:22px; font-size:13.5px; line-height:1.6}
.steps li{margin-bottom:5px}
.steps li::marker{font-family:var(--mono); color:var(--ink-3); font-size:12px}
.checks{list-style:none; margin:0; padding:0; font-size:13.5px; line-height:1.6}
.checks li{display:flex; gap:9px; margin-bottom:5px}
.checks li::before{
  content:"\2610"; font-size:15px; color:var(--ink-3); flex:0 0 auto; line-height:1.35;
}
.sheet-warn{
  margin-top:18px; border:1px solid var(--bad-edge); border-left:4px solid var(--bad-edge);
  background:var(--bad-soft); border-radius:3px; padding:12px 14px;
  font-size:13px; color:var(--ink); line-height:1.5;
}
.sheet-warn b{
  font-family:var(--disp); letter-spacing:.11em; text-transform:uppercase;
  font-size:11.5px; display:block; margin-bottom:4px; color:var(--bad);
}
.sheet-foot{
  margin-top:18px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:11.5px; color:var(--ink-3); line-height:1.55;
}

/* ---------- fastener + tools tables on the sheet ---------- */
.fast{width:100%; border-collapse:collapse; font-size:13px}
.fast th{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); text-align:left; font-weight:600; padding:0 10px 6px 0;
  border-bottom:1px solid var(--line);
}
.fast td{padding:9px 10px 9px 0; border-bottom:1px solid var(--line-soft); vertical-align:top}
.fast .fj{font-weight:600; white-space:nowrap}
.fast .ft{font-family:var(--mono); font-size:12.5px; white-space:nowrap}
.fast .fs{color:var(--ink-2); line-height:1.45}
.fast .trap{
  display:block; margin-top:5px; padding:7px 9px; border-left:3px solid var(--warn-edge);
  background:var(--warn-soft); color:var(--ink); font-size:12.5px; line-height:1.45; border-radius:2px;
}
.fast .trap b{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--warn); display:block; margin-bottom:2px;
}
.tools{list-style:none; margin:0; padding:0; font-size:13.5px; columns:2; column-gap:26px}
.tools li{margin-bottom:5px; break-inside:avoid; display:flex; gap:8px; line-height:1.4}
.tools li::before{content:"\2022"; color:var(--ink-3); flex:0 0 auto}
.tools li em{font-style:normal; color:var(--ink-3); font-size:12.5px}
@media (max-width:620px){ .tools{columns:1} }
/* Held to one line, the joint and thread columns pushed "comes from" past the
   right edge of its box on a phone, where the box's overflow:hidden clipped
   it mid-word. They wrap there instead. */
@media (max-width:560px){ .fast .fj, .fast .ft{white-space:normal} }

/* ── the pair pages (/fit/) ─────────────────────────────────────────────
   build.mjs puts three sections of the tool's own stylesheet ahead of this
   file — its spec grid, build sheet and fastener tables — because these
   pages print the tool's build sheet and should look like it. What follows
   is what only a pair page has: the answer box, and paper. */

h1 .nw{white-space:nowrap}

/* the verdict: the tool's stripe-and-title card in the site's own terms */
.answer{
  margin-top:20px; background:var(--surface); border:1px solid var(--line);
  border-left:5px solid var(--ink-3); border-radius:5px; padding:15px 18px 17px;
  box-shadow:var(--shadow);
}
.answer.is-ok{border-left-color:var(--ok-edge)}
.answer.is-plate{border-left-color:var(--warn-edge)}
.answer.is-none{border-left-color:var(--bad-edge)}
.answer .a-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px}
h2.a-title{
  font-family:var(--disp); font-weight:700; font-size:clamp(21px,4.4vw,28px);
  letter-spacing:.045em; text-transform:uppercase; line-height:1.05;
  margin:0; padding:0; border:0;
}
.answer.is-ok .a-title{color:var(--ok)}
.answer.is-plate .a-title{color:var(--warn)}
.answer.is-none .a-title{color:var(--bad)}
.answer > p{margin:8px 0 0; font-size:14.5px; color:var(--ink-2); max-width:68ch; line-height:1.55}
.a-plates{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.a-plates li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  background:var(--inset); border:1px solid var(--line-soft); border-left:3px solid var(--warn-edge);
  border-radius:3px; padding:9px 12px;
}
.a-plates .sku{font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--ink)}
.a-plates .src{font-size:12.5px; color:var(--ink-2)}
.a-plates .band{font-family:var(--mono); font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.a-plates .used{
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ok);
}
.a-plates .pn{flex-basis:100%; font-size:12.5px; color:var(--ink-3); line-height:1.45}

/* co-witness both ways, a line for each kind of sights */
.note .cw{display:block; margin-top:5px}
.note .cw i{font-style:normal; font-weight:600; color:var(--ink)}

.sheet-lede{font-size:14px; color:var(--ink-2); margin:14px 0 0}
.sheet{margin-top:16px}

/* on paper: the answer, the facts and the sheet, in black on white (site.css
   has already swapped the colour tokens); nothing that only works on screen */
@media print{
  .answer{box-shadow:none; break-inside:avoid}
  .a-plates li{background:none}
  .sheet{border:0; box-shadow:none; padding:0; background:none}
  .sbox{break-inside:avoid; border-color:#999}
  .sbox > h4{background:none; border-bottom-color:#999}
  .sheet-lede, .fit-more, .report{display:none}
}