/* Optic Bench — shared stylesheet for generated pages.
   Same design system as the interactive tool: cool industrial neutrals,
   blueprint accent, Saira Condensed / IBM Plex pairing. */
:root{
  --ground:#EBEEF0; --surface:#FBFCFD; --surface-2:#DFE4E8; --inset:#E4E8EB;
  --line:#C4CCD3; --line-soft:#D8DEE3;
  --ink:#14181C; --ink-2:#4B5661; --ink-3:#7A858F;
  --accent:#1A5478; --accent-soft:#D3E2EC; --on-accent:#FBFCFD;
  --ok:#2A6B4C; --ok-soft:#D1E5D9; --ok-edge:#5D9E7C;
  --warn:#845513; --warn-soft:#F0E3C6; --warn-edge:#C08F3C;
  --bad:#8E312A; --bad-soft:#EED7D4; --bad-edge:#C0645C;
  --flag:#5B4A86; --flag-soft:#E0DBEE;
  --shadow:0 1px 1px rgba(16,24,32,.05), 0 10px 26px -18px rgba(16,24,32,.45);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --disp:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101417; --surface:#191E23; --surface-2:#232A31; --inset:#14191D;
    --line:#333C45; --line-soft:#262E35;
    --ink:#E4EAEF; --ink-2:#9AA6B1; --ink-3:#6C7883;
    --accent:#7CB4D9; --accent-soft:#1B2E3C; --on-accent:#0E1215;
    --ok:#74C098; --ok-soft:#17291F; --ok-edge:#33613F;
    --warn:#D9A65E; --warn-soft:#2B2317; --warn-edge:#6B5226;
    --bad:#E19189; --bad-soft:#2C1D1B; --bad-edge:#6E3B36;
    --flag:#A99BD6; --flag-soft:#211E30;
    --shadow:0 1px 1px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#101417; --surface:#191E23; --surface-2:#232A31; --inset:#14191D;
  --line:#333C45; --line-soft:#262E35;
  --ink:#E4EAEF; --ink-2:#9AA6B1; --ink-3:#6C7883;
  --accent:#7CB4D9; --accent-soft:#1B2E3C; --on-accent:#0E1215;
  --ok:#74C098; --ok-soft:#17291F; --ok-edge:#33613F;
  --warn:#D9A65E; --warn-soft:#2B2317; --warn-edge:#6B5226;
  --bad:#E19189; --bad-soft:#2C1D1B; --bad-edge:#6E3B36;
  --flag:#A99BD6; --flag-soft:#211E30;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px; margin:0 auto; padding-inline:16px; padding-block:0 56px}
img{max-width:100%}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* masthead */
.mast{background:var(--surface); border-bottom:1px solid var(--line); position:relative}
.mast::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent) 0 38%,var(--warn-edge) 38% 62%,var(--ok-edge) 62% 100%);
}
.mast-in{
  max-width:1000px; margin:0 auto; padding-inline:16px; padding-block:18px 14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
}
.brand{text-decoration:none; color:inherit; display:block}
.brand b{
  font-family:var(--disp); font-weight:700; font-size:clamp(24px,5vw,32px);
  letter-spacing:.06em; text-transform:uppercase; display:block; line-height:1;
}
.brand span{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.22em; font-weight:600;
  color:var(--accent); text-transform:uppercase; display:block; margin-bottom:4px;
}
.mast-nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.mast-nav a{
  font-family:var(--disp); font-size:12.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-2);
  border:1px solid var(--line); border-radius:3px; padding:6px 11px; background:var(--inset);
}
.mast-nav a:hover{color:var(--ink); border-color:var(--accent)}
.mast-nav a.cta{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.mast-nav a.cta:hover{background:var(--ink); border-color:var(--ink); color:var(--surface)}

/* breadcrumb + headings */
.crumb{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-block:18px 0}
.crumb a{color:var(--ink-3)}
h1{
  font-family:var(--disp); font-weight:700; font-size:clamp(26px,5.2vw,38px);
  letter-spacing:.03em; line-height:1.05; margin:10px 0 0; text-wrap:balance;
}
h2{
  font-family:var(--disp); font-size:20px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin:40px 0 0; padding-bottom:8px;
  border-bottom:2px solid var(--ink);
}
h3{font-family:var(--disp); font-size:16px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:26px 0 8px}
.lede{font-size:16px; color:var(--ink-2); max-width:70ch; margin:14px 0 0; line-height:1.6}
p{max-width:72ch}

/* fact strip */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0; margin-top:22px; border:1px solid var(--line); border-radius:5px;
  background:var(--surface); overflow:hidden;
}
.facts > div{padding:11px 14px 12px; border-right:1px solid var(--line-soft)}
.facts > div:last-child{border-right:0}
.facts b{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:block; font-weight:600; margin-bottom:2px;
}
.facts span{font-family:var(--mono); font-size:13px; overflow-wrap:anywhere}
/* a count that opens the table filtered to it: a tap target, not just a digit */
.facts a[data-filter]{display:inline-block; min-width:24px; padding:3px 0}

/* ── the home page's primary action ─────────────────────────────────────
   Two grouped selects in a GET form, upgraded to searchable comboboxes by
   pick.js. Sized so the two fields and the button sit on one line at desktop
   width and stack cleanly on a phone. */
.find{
  margin:22px 0 0; padding:16px 18px 14px; background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:6px;
  box-shadow:var(--shadow);
}
.find-row{display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end}
@media (max-width:760px){ .find-row{grid-template-columns:1fr} }
.find .field{display:flex; flex-direction:column; gap:6px; min-width:0}
.find label{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
}
.find label .opt{
  font-family:var(--sans); font-size:11px; letter-spacing:0; text-transform:none;
  color:var(--ink-3); opacity:.8;
}
.find select{
  font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--inset);
  border:1px solid var(--line); border-radius:4px; padding:10px 34px 10px 11px;
  width:100%; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.find select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.find .go{
  font-family:var(--disp); font-size:14px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; background:var(--accent); color:var(--on-accent);
  border:1px solid var(--accent); border-radius:4px; padding:11px 20px; cursor:pointer;
  white-space:nowrap;
}
.find .go:hover{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.find-hint{margin:11px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.5; max-width:76ch}
.find-hint #find-msg{color:var(--bad); font-weight:500}

/* the combobox, once pick.js has upgraded a select. Same visual language as
   the tool's own pickers — the two are the same code. */
.combo{position:relative; min-width:0}
.combo-input{
  font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--inset);
  border:1px solid var(--line); border-radius:4px; padding:10px 34px 10px 11px;
  width:100%; appearance:none;
}
.combo-input::placeholder{color:var(--ink-3)}
.combo-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.combo-caret{
  position:absolute; right:12px; top:50%; margin-top:-2px; pointer-events:none;
  width:0; height:0; border-left:4.5px solid transparent; border-right:4.5px solid transparent;
  border-top:5px solid var(--ink-3);
}
.combo[data-open="1"] .combo-caret{transform:rotate(180deg)}
.combo-list{
  position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0;
  margin:0; padding:4px; list-style:none; max-height:320px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:5px;
  box-shadow:0 2px 4px rgba(16,24,32,.08), 0 14px 34px -14px rgba(16,24,32,.45);
  overscroll-behavior:contain;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .combo-list{box-shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.85)}
}
:root[data-theme="dark"] .combo-list{box-shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.85)}
.combo-group{
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3); padding:9px 9px 4px;
}
.combo-opt{padding:7px 9px; border-radius:3px; cursor:pointer; font-size:14.5px}
.combo-opt.combo-any{color:var(--ink-3); font-style:italic}
.combo-opt[aria-selected="true"]{font-weight:600}
.combo-opt.is-active{background:var(--accent); color:var(--on-accent)}
.combo-opt.is-active.combo-any{color:var(--on-accent)}
.combo-empty{padding:12px 9px; font-size:13.5px; color:var(--ink-3)}
/* how the chosen pistol takes this optic — home page only */
.combo-opt .chip{float:right; margin:1px 0 0 10px; font-size:9.5px; padding:1px 6px; font-style:normal}
.find-fit{margin:6px 0 0; font-size:13px; color:var(--ink-2); line-height:1.5; max-width:76ch}
.find-fit[hidden]{display:none}
.combo-count{
  padding:7px 9px 4px; font-family:var(--mono); font-size:11px; color:var(--ink-3);
  border-top:1px solid var(--line-soft); margin-top:4px;
}

/* route cards */
.routes{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:18px}
.route{
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:5px; padding:12px 14px 13px;
}
.route.is-direct{border-top-color:var(--ok-edge)}
.route.is-enc{border-top-color:var(--warn-edge)}
.route b{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:block; font-weight:600;
}
.route .p{font-family:var(--mono); font-size:19px; font-variant-numeric:tabular-nums; display:block; margin:2px 0 1px}
.route .w{font-size:13.5px; display:block; line-height:1.35}
.route .h{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); display:block; line-height:1.4; margin-top:2px}
.route .go{display:block; margin-top:8px; font-family:var(--disp); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.route .go a{text-decoration:none}
.route .go a:hover{text-decoration:underline}

/* ── table controls ─────────────────────────────────────────────────────
   Hidden in the HTML and revealed by table.js, so the no-JS reader never
   sees a control that would not work. Four axes, each labelled — the same
   rule the tool follows: controls are not clutter, undifferentiated data is. */
.tfilter{
  margin:16px 0 0; padding:12px 14px 10px; background:var(--inset);
  border:1px solid var(--line-soft); border-radius:5px;
}
.tf-row{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:10px 12px}
.has-fp .tf-row{grid-template-columns:1.3fr 1fr 1.1fr 1fr 1fr}
@media (max-width:980px){ .has-fp .tf-row{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:820px){ .tf-row, .has-fp .tf-row{grid-template-columns:1fr 1fr} }
@media (max-width:360px){ .tf-row, .has-fp .tf-row{grid-template-columns:1fr} }
.tfilter .field{display:flex; flex-direction:column; gap:5px; min-width:0}
.tfilter label{
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.tfilter input, .tfilter select{
  font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:4px; padding:8px 10px; width:100%; appearance:none;
}
.tfilter select{
  padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.tfilter input:focus-visible, .tfilter select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.tf-foot{
  margin:10px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
}
.tf-reset{
  font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line); border-radius:3px; padding:4px 10px; cursor:pointer;
}
.tf-reset:hover{color:var(--ink); border-color:var(--accent)}
.tfilter[hidden]{display:none}
/* what the table is filtered to, in words — for print, where the controls are gone */
.tf-said{display:none}

/* ── the compatibility table on a phone ─────────────────────────────────
   Four columns do not fit in 390px, and the one that fell off the right
   edge was cost — the column the sort and budget controls exist for. Below
   560px each row becomes a small card: name and cost on the first line,
   footprint (or mount system) and how it mounts beneath. Same cells, same
   order in the markup; only the layout changes. The column headings are
   hidden from sight but not from a screen reader, which still announces
   "Cost to mount" on the cost cell — display:none would have taken them out
   of the table altogether. build.mjs puts explicit roles on the table's parts
   so that changing their display cannot strip the table semantics either. */
@media (max-width:560px){
  [data-filterable] table.grid thead{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  [data-filterable] table.grid tr[data-t]{
    display:grid; grid-template-columns:1fr auto; gap:3px 12px;
    padding:10px 12px; border-bottom:1px solid var(--line-soft);
  }
  /* the grid rule above outranks the plain tr[hidden] rule, so say it again */
  [data-filterable] table.grid tr[data-t][hidden]{display:none}
  [data-filterable] table.grid tr[data-t] td{padding:0; border:0}
  [data-filterable] table.grid tr[data-t] td:nth-child(1){grid-column:1; grid-row:1}
  /* the cost spans two lines so a "check price" link under it sits beside
     the footprint instead of pushing it down a line */
  [data-filterable] table.grid tr[data-t] td:nth-child(4){grid-column:2; grid-row:1 / span 2; text-align:right}
  [data-filterable] table.grid tr[data-t] td:nth-child(2){grid-column:1; grid-row:2; font-size:11.5px; color:var(--ink-3)}
  [data-filterable] table.grid tr[data-t] td:nth-child(3){grid-column:1 / -1; grid-row:3; font-size:12px}
  [data-filterable] table.grid th[colspan]{display:block}
  [data-filterable] .tw{overflow-x:visible}
}

/* the same idea on an index page, where there is one axis worth having */
.lfilter{
  margin:18px 0 6px; padding:12px 14px 10px; background:var(--inset);
  border:1px solid var(--line-soft); border-radius:5px; max-width:420px;
}
.lfilter[hidden]{display:none}
.lfilter .field{display:flex; flex-direction:column; gap:5px}
.lfilter label{
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.lfilter input{
  font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:4px; padding:8px 10px; width:100%;
}
.lfilter input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.lf-foot{
  margin:9px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
}
/* explicit, rather than trusting the UA rule: any heading here that later gains
   a display value of its own would otherwise quietly reappear over an empty list */
h2[hidden], h3[hidden], ul.pills[hidden], .pills li[hidden]{display:none}
tbody[hidden]{display:none}
tr[hidden]{display:none}

/* tables */
.tw{overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:5px; background:var(--surface)}
table.grid{width:100%; border-collapse:collapse; font-size:14px}
table.grid 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:10px 12px 8px;
  border-bottom:1px solid var(--line); background:var(--inset); white-space:nowrap;
}
table.grid td{padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.grid tr:last-child td{border-bottom:0}
table.grid td.mono{font-family:var(--mono); font-size:12.5px; color:var(--ink-2)}
table.grid td.num{font-family:var(--mono); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums}
table.grid a{text-decoration:none; font-weight:500}
table.grid a:hover{text-decoration:underline}
/* "how it mounts" doubles as the link to that pairing's verdict — same weight
   and colour as the surrounding mono text, so the table stays a table */
table.grid a.pair{color:inherit; font-weight:inherit; border-bottom:1px dotted var(--line)}
table.grid a.pair:hover{color:var(--accent); text-decoration:none; border-bottom-color:var(--accent)}

/* affiliate links — visibly a different kind of link from a citation */
.blabel{
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap; margin-right:2px;
}
a.aff{
  font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);
  border-radius:3px; padding:2px 7px; white-space:nowrap; display:inline-block; margin:2px 0;
}
a.aff:hover{background:var(--ink); border-color:var(--ink); color:var(--surface)}
a.aff-sm{
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--accent); white-space:nowrap;
}
a.aff-sm:hover{text-decoration:underline}
.buyline{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.disc-inline{font-size:12.5px; color:var(--ink-3); line-height:1.5; margin:12px 0 0; max-width:76ch}
.disc-inline b{color:var(--ink-2)}

.chip{
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; padding:3px 8px; border-radius:3px; border:1px solid transparent;
  white-space:nowrap; display:inline-block;
}
.chip-ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-edge)}
.chip-plate{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-edge)}
.chip-none{background:var(--bad-soft); color:var(--bad); border-color:var(--bad-edge)}
.chip-flag{background:var(--flag-soft); color:var(--flag); border-color:var(--flag)}
.chip-enc{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}

/* callouts */
.note{
  margin-top:20px; border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--surface); border-radius:3px; padding:13px 15px;
  font-size:14px; color:var(--ink-2); line-height:1.55;
}
.note b{
  font-family:var(--disp); letter-spacing:.11em; text-transform:uppercase; font-size:11.5px;
  color:var(--ink); display:block; margin-bottom:4px;
}
.note.warn{border-left-color:var(--bad-edge)}
.note.warn b{color:var(--bad)}

/* footprint diagram */
.fpd{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-top:18px}
.fpd svg{flex:0 0 120px; width:120px; height:auto}

/* link lists */
.pills{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; padding:0; list-style:none}
.pills a{
  font-size:13.5px; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:3px; padding:5px 10px; display:block;
}
.pills a:hover{border-color:var(--accent)}
.pills .b{color:var(--ink-3); font-size:12px}
/* how a pair mounts, on a pill that links to its page (/fit/, the home page) */
.pills .chip{margin-left:4px; font-size:9.5px; padding:1px 6px; vertical-align:1px}
/* "every optic on this pistol →" under a list that shows only some of them */
.more{margin:10px 0 0; font-size:13.5px}
.more a{text-decoration:none; font-weight:500}
.more a:hover{text-decoration:underline}

/* ad slot — renders only when a snippet is configured */
.adslot{margin-top:32px; text-align:center}
.adslot .lbl{
  font-family:var(--disp); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:6px;
}

footer.site{
  margin-top:48px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3); line-height:1.6;
}
footer.site p{margin:0 0 9px; max-width:76ch}
footer.site a{color:var(--ink-2)}
.stamp{font-family:var(--mono); font-size:11.5px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ── contact form ─────────────────────────────────────────────────────── */
.cform{max-width:62ch}
.cform .fld{margin:0 0 18px}
.cform label{display:block;font-weight:600;font-size:.94rem;margin:0 0 6px}
.cform .hint{display:block;font-weight:400;color:var(--ink-2);font-size:.86rem;margin:2px 0 0}
.cform input[type=text],.cform input[type=email],.cform input[type=url],
.cform select,.cform textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:.96rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:7px;
  padding:9px 11px;transition:border-color .12s,box-shadow .12s}
.cform textarea{min-height:8.5em;resize:vertical;line-height:1.5}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cform input:invalid:not(:placeholder-shown){border-color:var(--bad-edge)}
.cform .req{color:var(--bad);font-weight:400}
.cform .check{display:flex;gap:9px;align-items:flex-start}
.cform .check input{width:auto;margin:3px 0 0;flex:0 0 auto}
.cform .check label{font-weight:400;margin:0}
.cform .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform button{font:inherit;font-weight:600;font-size:.98rem;cursor:pointer;
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);
  border-radius:7px;padding:10px 20px}
.cform button:hover{filter:brightness(1.08)}
.cform button:disabled{opacity:.55;cursor:default;filter:none}
.cform .cf-turnstile{margin:0 0 18px;min-height:65px}
.cform .sending{color:var(--ink-2);font-size:.9rem;margin-left:12px}
.cstat{margin:18px 0 0;padding:13px 15px;border-radius:8px;border:1px solid;font-size:.95rem}
.cstat.ok{background:var(--ok-soft);border-color:var(--ok-edge);color:var(--ok)}
.cstat.bad{background:var(--bad-soft);border-color:var(--bad-edge);color:var(--bad)}
.cstat b{display:block;margin:0 0 3px}
.creason{border:1px solid var(--line-soft);border-radius:9px;background:var(--inset);
  padding:16px 16px 0;margin:0 0 18px}
.creason[hidden]{display:none}
.cways{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:20px 0 26px}
.cway{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:14px 15px}
.cway b{display:block;font-family:var(--disp);font-size:1.06rem;letter-spacing:.01em}
.cway p{margin:5px 0 0;font-size:.9rem;color:var(--ink-2)}
.cway a{font-family:var(--mono);font-size:.88rem;word-break:break-all}
.report{margin:26px 0 0;padding:13px 15px;border-radius:8px;
  border:1px dashed var(--line);background:var(--inset);font-size:.93rem;color:var(--ink-2)}
.report a{font-weight:600}

/* ── print ────────────────────────────────────────────────────────────────
   A filtered table is a thing people print: the list for the gun counter,
   or for the gunsmith. Paper is white whatever the screen was, so the light
   tokens always apply — printed from dark mode, the text came out pale grey
   on white. The controls go, and the count line says in words what the
   table was filtered to, since the controls that said it are gone. */
@media print{
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"]{
    --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#EEF1F3; --inset:#F4F6F7;
    --line:#B9C2CA; --line-soft:#D8DEE3;
    --ink:#000000; --ink-2:#333B42; --ink-3:#5A646D;
    --accent:#1A5478; --accent-soft:#D3E2EC; --on-accent:#FFFFFF;
    --ok:#1F5A3E; --ok-soft:#D1E5D9; --ok-edge:#5D9E7C;
    --warn:#6E450C; --warn-soft:#F0E3C6; --warn-edge:#C08F3C;
    --bad:#7A2721; --bad-soft:#EED7D4; --bad-edge:#C0645C;
    --flag:#4B3C74; --flag-soft:#E0DBEE;
    --shadow:none;
  }
  body{background:#fff; font-size:12pt}
  .mast::before, .mast-nav, .find, .adslot, .tf-row, .tf-reset, .lfilter .field, #lf-reset{display:none !important}
  .mast{border-bottom:1px solid #000}
  .tfilter, .lfilter{background:none; border:0; padding:0; margin:6px 0 0}
  .tf-foot, .lf-foot{display:block; margin:0; color:#000; font-size:10pt}
  .tf-said{display:inline}
  .tw{overflow:visible; border-color:#B9C2CA}
  table.grid tr, .route, .note, .facts{break-inside:avoid}
  h2, h3{break-after:avoid}
  a{color:inherit}
}