/* Shared styles for the reference pages (/rule, /equipment).
 *
 * The tokens and base rules here are copied from the inline <style> in
 * index.html rather than extracted from it. That duplication is deliberate:
 * index.html is the page that converts, it was verified byte-identical to what
 * is live, and pulling its CSS into a file would mean the buy page renders
 * differently the first time this file 404s or is cached stale. The reference
 * pages are additive and can afford a second request; the landing page cannot
 * afford a regression.
 *
 * If a token changes, change it in both places. There are only two.
 */

:root{
  --bg:#ffffff; --surface:#f7f8fa; --border:#e2e5ea;
  --ink:#16191d; --ink-2:#4a5158; --ink-3:#6d757e;
  --accent:#b3121f; --accent-ink:#ffffff; --accent-soft:#fdf2f3;
  --ok:#1a6b3c; --warn:#8a5300; --warn-soft:#fff8ec;
  --maxw:720px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111417; --surface:#181c20; --border:#2a3036;
    --ink:#eef1f4; --ink-2:#b6bec6; --ink-3:#89929b;
    --accent:#ff5c68; --accent-ink:#1a0507; --accent-soft:#241417;
    --ok:#5fce93; --warn:#e8b464; --warn-soft:#241c10;
  }
}
:root[data-theme="dark"]{
  --bg:#111417; --surface:#181c20; --border:#2a3036;
  --ink:#eef1f4; --ink-2:#b6bec6; --ink-3:#89929b;
  --accent:#ff5c68; --accent-ink:#1a0507; --accent-soft:#241417;
  --ok:#5fce93; --warn:#e8b464; --warn-soft:#241c10;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
h1,h2,h3{line-height:1.22; letter-spacing:-0.015em; margin:0}
h1{font-size:clamp(28px,5vw,40px); font-weight:760}
h2{font-size:clamp(21px,3.2vw,26px); font-weight:720; margin:48px 0 14px}
h3{font-size:18px; font-weight:700; margin:28px 0 8px}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px; padding-left:22px}
li{margin:0 0 7px}
strong{font-weight:680}
a{color:var(--accent)}
code{
  font:0.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--surface); border:1px solid var(--border);
  padding:1px 5px; border-radius:4px;
}

.deadline{
  background:var(--accent); color:var(--accent-ink);
  text-align:center; padding:11px 18px;
  font-weight:680; font-size:14.5px; letter-spacing:0.01em;
}
.deadline a{color:var(--accent-ink)}
.brandbar{border-bottom:1px solid var(--border); padding:16px 0}
.brand{
  display:flex; align-items:baseline; gap:9px;
  font-weight:760; font-size:18px; letter-spacing:-0.02em; color:var(--ink);
  text-decoration:none;
}
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent); flex:0 0 auto; align-self:center;
}

/* Breadcrumb. Present for the reader first — these pages are landed on cold
   from a search result, with no idea what site they are on. */
.crumb{
  font-size:13.5px; color:var(--ink-3); margin:26px 0 0;
}
.crumb a{color:var(--ink-3)}
.crumb span{margin:0 7px; opacity:.6}

header{padding:14px 0 8px}
.kicker{
  font-size:12.5px; font-weight:720; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 14px
}
.lede{font-size:19px; color:var(--ink-2); margin:18px 0 0}
.updated{font-size:13.5px; color:var(--ink-3); margin:14px 0 0}

.callout{
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--accent);
  padding:20px 22px; margin:26px 0; border-radius:0 8px 8px 0;
}
.callout p:last-child{margin-bottom:0}

.verified{
  border:1px solid var(--ok); border-radius:10px;
  padding:18px 20px; margin:24px 0; font-size:15.5px;
}
.verified strong:first-child{color:var(--ok)}

.warn{
  background:var(--warn-soft); border:1px solid var(--border);
  border-left:3px solid var(--warn);
  padding:18px 20px; margin:24px 0; border-radius:0 8px 8px 0; font-size:15.5px;
}
.warn p:last-child{margin-bottom:0}

.scope{
  border:1px solid var(--border); border-radius:10px;
  padding:20px 22px; margin:22px 0; background:var(--surface);
}
.scope ul{columns:2; column-gap:26px; margin-bottom:0}
@media (max-width:560px){ .scope ul{columns:1} }

table{width:100%; border-collapse:collapse; margin:18px 0; font-size:15.5px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top}
th{font-weight:700; color:var(--ink-3); font-size:13px; text-transform:uppercase; letter-spacing:0.05em}
.tablewrap{overflow-x:auto}

.btn{
  display:inline-block; text-align:center; text-decoration:none;
  background:var(--accent); color:var(--accent-ink);
  padding:13px 22px; border-radius:8px; font-weight:700; font-size:16px;
}
.btn.alt{background:transparent; color:var(--accent); border:1.5px solid var(--accent)}

/* The offer block that closes every reference page. Deliberately below the
   useful content, not above it: someone who arrived from a search for a
   default password wants the password, and a page that withholds it to sell
   something is the page they bounce from and never link to. */
.offer{
  border:2px solid var(--accent); background:var(--accent-soft);
  border-radius:12px; padding:24px 22px; margin:36px 0 0;
}
.offer h2{margin:0 0 10px; font-size:21px}
.offer p{font-size:15.5px}
.offer .btn{margin-top:6px}

.next{
  border-top:1px solid var(--border); margin:40px 0 0; padding:22px 0 0;
  font-size:15.5px;
}
.next ul{margin:10px 0 0}

footer{
  margin:48px 0 0; padding:26px 0 46px; border-top:1px solid var(--border);
  font-size:13.5px; color:var(--ink-3);
}
footer p{margin:0 0 10px}

/* ---------------------------------------------------------------- blog ---
 * Field Notes (/blog). These are the only classes the blog adds; everything
 * else it renders reuses the reference-page vocabulary above, so a change to
 * .callout or .offer lands on both without being made twice.
 */

blockquote{
  margin:22px 0; padding:4px 0 4px 20px;
  border-left:3px solid var(--border); color:var(--ink-2);
}
blockquote p:last-child{margin-bottom:0}
hr{border:0; border-top:1px solid var(--border); margin:34px 0}

/* Contents block. Only rendered when an article has more than two sections —
   a two-item table of contents is furniture, not navigation. */
.toc{
  border:1px solid var(--border); border-radius:10px;
  padding:16px 20px; margin:26px 0; background:var(--surface);
  font-size:15px;
}
.toc-t{
  font-size:12.5px; font-weight:720; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 9px;
}
.toc ul{margin:0; padding-left:18px}
.toc li{margin:0 0 5px}
.toc a{color:var(--ink-2)}

.authorbox{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:20px 0; margin:38px 0 0; font-size:15.5px; color:var(--ink-2);
}
.authorbox p:last-child{margin-bottom:0}
.authorbox .kicker{margin-bottom:9px}

/* Index listing. */
.posts{list-style:none; padding:0; margin:0 0 8px}
.posts li{
  padding:18px 0; margin:0; border-bottom:1px solid var(--border);
}
.posts li:last-child{border-bottom:0}
.p-t{
  display:block; font-weight:720; font-size:18.5px;
  letter-spacing:-0.012em; line-height:1.3; text-decoration:none;
}
.p-t:hover{text-decoration:underline}
.p-d{margin:7px 0 0; color:var(--ink-2); font-size:15.5px}
.p-m{margin:7px 0 0; color:var(--ink-3); font-size:13.5px}

/* Notification signup. Netlify reads the form out of the deployed HTML, so
   there is no script here and nothing to load. */
.subscribe{
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface);
  padding:24px 22px; margin:30px 0 0;
}
.subscribe h2{margin:0 0 10px; font-size:21px}
.subscribe p{font-size:15.5px}
.f-row{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 0}
.f-in{
  flex:1 1 240px; min-width:0;
  font:16px/1.4 inherit; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:8px; padding:12px 14px;
}
.f-in:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.f-row .btn{border:0; cursor:pointer; font-family:inherit; flex:0 0 auto}
.f-note{margin:11px 0 0; font-size:13.5px; color:var(--ink-3)}
.f-opt{display:flex; gap:9px; align-items:flex-start; margin:13px 0 0; font-size:14.5px; color:var(--ink-2); cursor:pointer}
.f-opt input{margin:2px 0 0; flex:0 0 auto; width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.f-opt span{line-height:1.45}

/* Netlify's honeypot: a field a person never sees and a bot fills in.
   Hidden with clip rather than display:none — some bots skip what is not
   rendered, which would defeat the point. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Site navigation. The brandbar was a logo and nothing else, which made the
   reference pages dead ends — someone landing cold on a device page from a
   search had no way to reach anything else. */
.brandrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.topnav{display:flex; gap:18px; flex-wrap:wrap; font-size:15px; font-weight:600}
.topnav a{color:var(--ink-2); text-decoration:none}
.topnav a:hover{color:var(--accent); text-decoration:underline}
.topnav [aria-current="page"]{color:var(--accent)}
@media (max-width:460px){
  .brandrow{gap:8px}
  .topnav{gap:14px; font-size:14.5px}
}