/* Security Print for the reading pages (docs, support, status, legal, thanks, 404, shared catches). The first block
   is the same token remap and controls as dash.css; the page-specific layer follows. */
@font-face { font-family: "Wittgenstein"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/wittgenstein-latin.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/schibsted-grotesk-latin.woff2) format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/courier-prime-latin.woff2) format("woff2"); }

:root {
  --bg: #E1EBE5; --panel: #F3F6F1; --panel-2: #E8EFEA; --line: #C3D2C9; --line-2: #9FB5A9;
  --ink: #10342A; --muted: #3D5C52; --dim: #52706A;
  --accent: #10342A; --accent-ink: #EEF3EF; --accent-soft: #D2E1D8;
  --ok: #1F5F3A; --ok-soft: #D5E7DA; --bad: #A8161F; --bad-soft: #F2DCD7; --hold: #7A5410; --hold-soft: #F0E4CA;
  --ok-fill: #2F6E4A; --hold-fill: #B98328; --bad-fill: #C21F2A;
  --ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Wittgenstein", Georgia, serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  --r: 0px;
  --slip: #EFEBD6; --paper-ink: #10342A; --paper-ink-2: #3D5C52; --paper-rule: rgba(16, 52, 42, .28);
  --ground: image-set(url(/assets/plates/ground.webp) type("image/webp"), url(/assets/plates/ground.png) type("image/png"));
  --stamp-grain: image-set(url(/assets/plates/stamp-grain.webp) type("image/webp"), url(/assets/plates/stamp-grain.png) type("image/png"));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0B; --panel: #131315; --panel-2: #19191C; --line: #27272B; --line-2: #37373C;
    --ink: #ECECE8; --muted: #A5A5A1; --dim: #8C8C88;
    --accent: #ECECE8; --accent-ink: #0A0A0B; --accent-soft: #232327;
    --ok: #79D3A0; --ok-soft: #15301F; --bad: #FF8A80; --bad-soft: #3A1715; --hold: #EBBE6A; --hold-soft: #33270F;
    --ok-fill: #5DB592; --hold-fill: #D9A443; --bad-fill: #FF7B72;
    --ground: none;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A0B; --panel: #131315; --panel-2: #19191C; --line: #27272B; --line-2: #37373C;
  --ink: #ECECE8; --muted: #A5A5A1; --dim: #8C8C88;
  --accent: #ECECE8; --accent-ink: #0A0A0B; --accent-soft: #232327;
  --ok: #79D3A0; --ok-soft: #15301F; --bad: #FF8A80; --bad-soft: #3A1715; --hold: #EBBE6A; --hold-soft: #33270F;
  --ok-fill: #5DB592; --hold-fill: #D9A443; --bad-fill: #FF7B72;
  --ground: none;
}

body { background: var(--bg) var(--ground) 0 0 / 200px 120px; font: 15.5px/1.55 var(--ui); }
:root[data-theme="dark"] body { background-image: linear-gradient(105deg, #0B0B0C, #111113 50%, #0B0B0C); background-attachment: fixed; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-image: linear-gradient(105deg, #0B0B0C, #111113 50%, #0B0B0C); background-attachment: fixed; } }
a { color: var(--ink); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--ink) 18%, transparent); }

/* ---------- controls ---------- */
.btn { border-radius: 0; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 600 14px var(--ui); padding: 9px 16px; min-height: 40px; }
.btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); border-color: var(--ink); }
.btn.primary { background: #355644 var(--stamp-grain) center / cover; border-color: #10342A; color: #EEF3EF; }
.btn.primary:hover { filter: brightness(.93); background: #2C4A39 var(--stamp-grain) center / cover; }
:root[data-theme="dark"] .btn.primary { background: #ECECE8; color: #0A0A0B; border-color: #ECECE8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { background: #ECECE8; color: #0A0A0B; border-color: #ECECE8; } }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.ok { color: var(--ok); border-color: currentColor; } .btn.bad { color: var(--bad); border-color: currentColor; }
.btn.sm { min-height: 34px; padding: 4px 12px; font-size: 13px; }
input, textarea, select { border-radius: 0; background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line-2); font-family: var(--ui); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
label { font: 600 12px/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
label small { letter-spacing: 0; text-transform: none; }
.check, .check label { letter-spacing: 0; text-transform: none; }
.tabs { border-bottom: 1px solid var(--line-2); }
.tabs button { font: 600 14px var(--ui); padding: 10px 14px; color: var(--muted); }
.tabs button.on { color: var(--ink); border-bottom: 2px solid var(--ink); }
.seg { border: 1px solid var(--ink); border-radius: 0; }
.seg button { font-family: var(--ui); background: transparent; color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--accent-ink); }
:not(pre) > code { border-radius: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); border-color: var(--line); }
pre { border-radius: 0; background: #0C0C0E; }
.mono { font-family: var(--mono); }

/* cards are ruled sections of the register, not floating boxes */
.card { background: color-mix(in srgb, var(--panel) 82%, transparent); border: 1px solid var(--line-2); border-radius: 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent); padding: 22px 24px; }
.card > b:first-child, .card .spread > b:first-child { font-family: var(--display); font-size: 19px; }

/* verdicts are stamps struck in their ink */
.pill { border-radius: 4px; background: transparent; border: 1.5px solid currentColor; font: 400 12px/1 var(--type); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px 4px; transform: rotate(-2deg); }
.pill.deliver { color: var(--ok); background: transparent; } .pill.drop { color: var(--bad); background: transparent; } .pill.hold { color: var(--hold); background: transparent; }
.pill.accent { color: var(--ink); background: transparent; }
mark { background: none; color: inherit; padding: 0; border-radius: 0; text-decoration: underline 2px var(--bad-fill); text-underline-offset: 4px; text-decoration-skip-ink: none; }
mark.ok { background: none; color: inherit; text-decoration-color: var(--ok-fill); }
mark.hold { background: none; color: inherit; text-decoration-color: var(--hold-fill); }


/* Doorman pages still built on style.css + site.css (docs, support, status, legal, thanks, 404, shared catches):
   this sheet loads after them and carries them into the Security Print world. Tokens and controls match the
   dashboard; the nav and footer come from home.css, which every page with the shared nav also loads. */
:root { --tint: var(--bg); --ink-2: var(--muted); --ink-3: #6C877D; --rule: var(--line); --rule-2: var(--line-2); --text: var(--ui); --paper: #F8FAF7; --on-ink: #EEF3EF; --gut: 20px; }
@media (min-width: 760px) { :root { --gut: 40px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-3: #6E6A96; --paper: #161618; --on-ink: #0A0A0B; } }
:root[data-theme="dark"] { --ink-3: #6E6A96; --paper: #161618; --on-ink: #0A0A0B; }
body { background: var(--bg) var(--ground) 0 0 / 200px 120px; font-size: 16px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); letter-spacing: -.01em; }
h1 { font-weight: 700; }
.lead { color: var(--muted); }
.btn { border-radius: 0; }
.btn.lg { min-height: 50px; }
.card, .shot, .plan, .faq details, details { border-radius: 0 !important; }
.skip { border-radius: 0; }
:focus-visible { border-radius: 0; }


/* pages on this sheet: the shared mark, square furniture, and no stray rounding from style.css or page styles */
.brand i { background: none !important; border-radius: 50% !important; }
.summary, .banner, .card2, .callout, .toc details, .toc a, .tbl, .sup input, .sup select, .sup textarea, .sup .done, .inc, .uptime, .bars { border-radius: 0 !important; }
.summary, .card2, .banner { background: color-mix(in srgb, var(--paper) 70%, transparent); border-color: var(--line-2); }
pre, .copy > button { border-radius: 0 !important; }
.callout { border-left: 3px solid var(--ink); }
.callout.warn { border-left-color: var(--hold-fill); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 600 17px var(--text); letter-spacing: .3em; text-transform: uppercase; }
.brand i { position: relative; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tint), inset 0 0 0 3px currentColor; flex: none; }
.brand i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 7px; height: 11px; margin-left: -3.5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
/* the nav matches the landing's exactly: same height, mark and type sizes on every page (home.css sets these too; this sheet loads after it) */
.nav { height: auto; }
.nav .login, .nav .right .login { font: 500 15px var(--text); padding: 10px 12px; }
@media (min-width: 901px) {
  .nav .links > a, .dd-btn, .nav .login, .nav .right .login { font-size: 16px; }
  .brand { font-size: 18px; gap: 14px; }
  .brand i { width: 30px; height: 30px; }
}

/* code on these pages uses the site's plate-black and green-tinted syntax, not the old navy */
:root { --code-bg: #0C0C0E; --code-ink: #E4E4E0; --code-dim: #90908C; --code-str: #A8D8B0; --code-key: #9CCFB8; }
.copy > button { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .18) !important; color: var(--code-ink) !important; }
/* one headline scale for reading pages (docs, help, status, legal) */
main h1, article h1 { font: 700 clamp(36px, 4.2vw, 54px)/1.06 var(--display); letter-spacing: -.012em; }
/* the nav's Start free is outlined on every page, as on the landing (the dark-mode fill above is for page buttons) */
.nav .btn.primary { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; filter: none !important; }
.nav .btn.primary:hover { background: color-mix(in srgb, var(--ink) 7%, transparent) !important; }