/* Doorman dashboard in the Security Print world: "the register". Loaded after style.css (which the docs and status
   pages still use) and remaps its tokens, then sets the register's own furniture: a masthead with a guilloche band,
   banknote tiles with microprint borders, paper slips for messages, struck stamps for verdicts, an engraved dial for
   the score, and hatching (not flat fills) in the charts. Paper is always lit in daylight ink, in both themes. */
@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;
  --paper: #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; background-size: 100% 100%; background-repeat: no-repeat; /* one sweep, not tiled at the light plate's 200x120 */ }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-image: linear-gradient(105deg, #0B0B0C, #111113 50%, #0B0B0C); background-attachment: fixed; background-size: 100% 100%; background-repeat: no-repeat; /* one sweep, not tiled at the light plate's 200x120 */ } }
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); }

/* ---------- masthead ---------- */
.shell { display: block; min-height: 100vh; }
.mast { position: sticky; top: 0; z-index: 15; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mast-in { max-width: 1320px; margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; gap: 36px; }
.mast .brand { gap: 12px; font: 600 15px/1 var(--ui); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.brand i { position: relative; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px currentColor; flex: none; background: 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; transform: none; }
.mast-nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.mast-nav a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--muted); font-weight: 500; font-size: 15px; white-space: nowrap; text-decoration: none; }
.mast-nav a:hover { color: var(--ink); text-decoration: none; }
.mast-nav a.on { color: var(--ink); font-weight: 600; }
.mast-nav a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; border-top: 2px solid var(--ink); }
/* the waiting count is a small overprint seal */
.mast-nav a b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; border: 1.5px solid var(--bad-fill); color: var(--bad); font: 700 11.5px/1 var(--ui); }
.mast-r { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14px; }
.mast-r > a { color: var(--muted); }
.reading { display: grid; grid-template-columns: auto; gap: 4px; justify-items: end; text-decoration: none; color: var(--ink); }
.reading:hover { text-decoration: none; }
.reading .r-n { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.reading .r-n small { font-size: 12px; color: var(--dim); }
.reading .r-l { font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.reading .meter { display: block; width: 120px; height: 5px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 4px); border: 0; }
.reading .meter i { display: block; height: 100%; background: var(--ink); }
.reading.warn .meter i { background: var(--hold-fill); } .reading.full .meter i { background: var(--bad-fill); }
.modebadge { font: 400 11px/1 var(--type); letter-spacing: .14em; padding: 4px 7px; border-radius: 3px; border: 1px solid currentColor; background: none; color: var(--hold); }
.modebadge.live { background: none; color: var(--ok); }
.theme-btn { min-height: 40px; padding: 0 8px; color: var(--muted); }
.mast-band { height: 14px; color: var(--ink); opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14' viewBox='0 0 60 14'%3E%3Cg fill='none' stroke='%2310342A' stroke-width='.8'%3E%3Cpath d='M0 7 Q15 0 30 7 T60 7'/%3E%3Cpath d='M0 7 Q15 14 30 7 T60 7'/%3E%3Cpath d='M0 5 Q15 -1 30 5 T60 5' opacity='.6'/%3E%3Cpath d='M0 9 Q15 15 30 9 T60 9' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 60px 14px repeat-x; }
:root[data-theme="dark"] .mast-band { filter: invert(1) hue-rotate(180deg) brightness(1.3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mast-band { filter: invert(1) hue-rotate(180deg) brightness(1.3); } }

main { max-width: 1320px; margin: 0 auto; padding: 36px 32px 96px; }
.head { align-items: flex-end; margin-bottom: 28px; }
.head h1 { font: 700 clamp(32px, 3.4vw, 48px)/1.05 var(--display); color: var(--ink); }
.head p { color: var(--muted); }
.dateline { margin: 0 0 8px !important; font: 600 12px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--dim) !important; }
.sec-h { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 3px double color-mix(in srgb, var(--ink) 45%, transparent); }
.sec-h h2 { margin: 0; font-size: 22px; }
.verify, .setup { margin-bottom: 20px; border-color: var(--hold-fill); background: color-mix(in srgb, var(--hold-soft) 70%, transparent); }

/* ---------- overview: banknote tiles ---------- */
.tiles { gap: 16px; margin-bottom: 22px; }
.tile { position: relative; padding: 26px 24px 22px; border-radius: 0; color: var(--paper-ink); background: var(--paper); border: 1px solid #10342A; outline: 1px solid rgba(16, 52, 42, .35); outline-offset: -7px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(16, 52, 42, .2), 0 14px 26px -18px rgba(16, 52, 42, .5); }
.tile small { position: relative; font: 600 11.5px var(--ui); letter-spacing: .2em; color: var(--paper-ink-2); }
.tile strong { position: relative; font: 700 46px/1.05 var(--display); letter-spacing: -.02em; margin-top: 10px; color: var(--paper-ink); }
.tile span { position: relative; color: var(--paper-ink-2); font-size: 13.5px; }
.tile.ok strong { color: #1F5F3A; } .tile.bad strong { color: #A8161F; } .tile.hold strong { color: #7A5410; }
.grid2 { gap: 22px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

/* waiting queue: small slips with a monogram seal */
.q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.q-list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 14px 16px; color: var(--paper-ink); background: var(--paper); border: 1px solid rgba(16, 52, 42, .5); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.q-list a:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(16, 52, 42, .6); text-decoration: none; }
.q-who { font-weight: 600; }
.q-p { color: #7A5410; }
.q-msg { grid-column: 1 / -1; font: 400 14.5px/1.5 var(--type); color: var(--paper-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-msg mark { color: var(--paper-ink); text-decoration-color: #B98328; }
.q-empty { margin: 8px 0 0; }

/* the run of days: hatched like an engraving, not filled */
.chart { height: 170px; gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.chart div { border-radius: 0; background: transparent; }
.chart i.d { background: repeating-linear-gradient(0deg, var(--ok-fill) 0 1.5px, transparent 1.5px 3px); box-shadow: inset 0 0 0 1px var(--ok-fill); }
.chart i.h { background: repeating-linear-gradient(45deg, var(--hold-fill) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--hold-fill); }
.chart i.x { background: repeating-linear-gradient(-45deg, var(--bad-fill) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--bad-fill); }
.legend { gap: 20px; margin-top: 12px; font-size: 13px; }
.legend i { width: 14px; height: 14px; border-radius: 0; vertical-align: -2px; margin-right: 7px; }
.legend i.d { background: repeating-linear-gradient(0deg, var(--ok-fill) 0 1.5px, transparent 1.5px 3px); box-shadow: inset 0 0 0 1px var(--ok-fill); }
.legend i.h { background: repeating-linear-gradient(45deg, var(--hold-fill) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--hold-fill); }
.legend i.x { background: repeating-linear-gradient(-45deg, var(--bad-fill) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--bad-fill); }

/* ---------- inbox: the register ---------- */
.filters { gap: 14px; margin-bottom: 18px; }
.filters input, .filters select { min-height: 42px; }
.list { background: transparent; border: 0; border-top: 3px double var(--ink); border-radius: 0; overflow: visible; }
.item { grid-template-columns: 112px minmax(170px, 230px) minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 18px 8px; border-top: 0; border-bottom: 1px solid var(--line-2); transition: background .15s ease; }
.item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.item .i-v { padding-top: 2px; }
.item .who { display: grid; gap: 2px; font-size: 14px; }
.item .who b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .who span { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .msg { margin: 0; color: var(--ink); font: 400 14.5px/1.55 var(--type); }
.item .acts { gap: 8px; }
.empty { padding: 72px 16px; font-family: var(--display); font-size: 20px; color: var(--muted); }

/* ---------- one submission: the message on a slip, the stamp struck, the dial read ---------- */
.detail .body { position: relative; white-space: pre-wrap; padding: 56px 56px 48px; border: 0; border-radius: 0; color: var(--paper-ink); font: 400 17px/30px var(--type);
  background: url(/assets/plates/cut/tg-top.webp) top / 100% auto no-repeat, url(/assets/plates/cut/tg-bottom.webp) bottom / 100% auto no-repeat, url(/assets/plates/cut/tg-left.webp) left top / 5.27% auto repeat-y, url(/assets/plates/cut/tg-right.webp) right top / 3.68% auto repeat-y, var(--paper);
  filter: drop-shadow(0 0 8px rgba(255, 214, 128, .45)) drop-shadow(0 0 28px rgba(255, 196, 92, .18)); }
.detail .body mark { color: var(--paper-ink); }
.big-stamp { position: absolute; right: 48px; top: 22px; padding: 8px 16px; font: 400 24px/1 var(--type); letter-spacing: .14em; text-transform: uppercase; border: 3px solid currentColor; border-radius: 6px; transform: rotate(-6deg); background: rgba(239, 235, 214, .6); white-space: nowrap; }
.big-stamp.deliver { color: #1F5F3A; } .big-stamp.drop { color: #A8161F; } .big-stamp.hold { color: #7A5410; }
@media (prefers-reduced-motion: no-preference) { .big-stamp { animation: strike .45s cubic-bezier(.2,.8,.2,1) .1s both; } }
@keyframes strike { from { opacity: 0; transform: rotate(-6deg) scale(1.4); } }
.dial { display: block; width: 100%; max-width: 300px; margin: 4px auto 0; color: var(--ink); }
.dial .zone-x { stroke: var(--bad-fill); } .dial .zone-h { stroke: var(--hold-fill); } .dial .zone-d { stroke: var(--ok-fill); }
.dial text { font: 600 9px var(--ui); letter-spacing: .12em; fill: var(--dim); text-transform: uppercase; }
.dial .val { font: 700 26px var(--display); fill: var(--ink); letter-spacing: 0; }
.kv { grid-template-columns: 170px 1fr; gap: 0; font-size: 14.5px; }
.kv dt, .kv dd { padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.bar { height: 10px; border-radius: 0; }

/* ---------- forms, settings, keys ---------- */
.formrow { transition: background .15s ease; }
.formrow:hover { background: color-mix(in srgb, var(--panel) 100%, transparent); }
.formrow h2 { font-size: 20px; }
.keybox { border-radius: 0; background: var(--paper); color: var(--paper-ink); border: 1px dashed #10342A; }
.keybox code { color: var(--paper-ink); }
.step > b { border-radius: 50%; background: transparent; border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 2.6px var(--ink); color: var(--ink); font-family: var(--display); }
.step.done > b { border-color: var(--ok); color: var(--ok); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 2.6px var(--ok); }
.plan { border-radius: 0; border-color: var(--line-2); }
.plan.on { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.plan strong { font-family: var(--display); font-size: 26px; }
table.keys th { font: 600 11.5px var(--ui); letter-spacing: .16em; text-transform: uppercase; }
dialog.modal { border-radius: 0; border: 1px solid var(--ink); background: var(--panel); }
.toast { border-radius: 0; background: var(--ink); color: var(--accent-ink); font-weight: 600; }
.agentbox { border-radius: 0; border-style: solid; }
.agentcard { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.monogram { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid currentColor; box-shadow: inset 0 0 0 2.5px var(--paper), inset 0 0 0 3.2px currentColor; font: 700 13px/1 var(--display); color: var(--paper-ink); background: var(--paper); }

@media (max-width: 1100px) { .item { grid-template-columns: 104px minmax(0, 1fr) auto; } .item .msg { grid-column: 2 / -1; } }
@media (max-width: 860px) {
  .mast-in { padding: 0 16px; gap: 14px; height: auto; min-height: 60px; flex-wrap: wrap; }
  .mast .brand span { display: none; }
  .mast-nav { order: 3; flex-basis: 100%; margin: 0 -12px; }
  .mast-r { gap: 12px; }
  .mast-r > a, .reading .r-l, .modebadge { display: none; }
  .reading .meter { width: 72px; }
  main { padding: 22px 16px 64px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile strong { font-size: 34px; }
  .grid2 { grid-template-columns: 1fr; }
  .item { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px 4px; }
  .item .who { grid-column: 1 / -1; grid-row: 2; }
  .item .msg { grid-column: 1 / -1; }
  .detail .body { padding: 40px 26px 34px; }
  .big-stamp { position: static; display: inline-block; margin-bottom: 14px; font-size: 18px; }
  .kv { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; padding-bottom: 0; }
}

/* dial sits where the old bar was (kept as .bar for the e2e hook) */
.dial.bar { height: auto; background: none; border-radius: 0; position: static; }
/* monograms ride beside the sender */
.item .who { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.item .who .monogram { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 34px; }
.item .who b, .item .who span { grid-column: 2; }
.q-who { display: inline-flex; align-items: center; gap: 10px; }
.q-who .monogram { width: 28px; height: 28px; font-size: 11.5px; }
.detail .body { padding-top: 52px; }

/* ---------- density: a working register, not a showcase. Sized so a 13-14" laptop shows the queue, the totals
   and the chart in one screen, and about ten inbox rows. ---------- */
body { font-size: 14.5px; line-height: 1.5; }
.mast-in { height: 56px; gap: 28px; }
.mast .brand { font-size: 13px; letter-spacing: .26em; }
.mast-nav a { min-height: 40px; font-size: 14.5px; padding: 0 10px; }
.mast-nav a.on::after { left: 10px; right: 10px; bottom: 6px; }
.mast-band { height: 8px; background-size: 40px 8px; opacity: .4; }
main { padding: 22px 32px 64px; }
.head { margin-bottom: 16px; }
.head h1 { font-size: 30px; line-height: 1.1; }
.head p { margin-top: 4px; font-size: 14px; }
.card { padding: 16px 18px; }
.sec-h { margin-bottom: 8px; padding-bottom: 8px; border-bottom-width: 1px; border-bottom-style: solid; }
.sec-h h2 { font-size: 18px; }
.verify, .setup { padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.verify .btn, .setup .btn { min-height: 32px; }

/* overview: the queue on the left, the totals and the run of days on the right */
.ov { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.ov-side { display: grid; gap: 18px; }
.tiles { grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--panel) 82%, transparent); }
.tile { padding: 12px 16px; background: none; border: 0; outline: 0; box-shadow: none; color: var(--ink); }
.tile:nth-child(odd) { border-right: 1px solid var(--line); }
.tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.tile small { font-size: 11px; letter-spacing: .16em; color: var(--muted); }
.tile strong { font-size: 28px; margin-top: 2px; color: var(--ink); }
.tile span { color: var(--muted); font-size: 12.5px; }
.tile.ok strong { color: var(--ok); } .tile.bad strong { color: var(--bad); } .tile.hold strong { color: var(--hold); }
.chart { height: 110px; margin-top: 10px; gap: 3px; }
.legend { margin-top: 8px; font-size: 12.5px; }

/* the queue: dense rows, one line of message, the deciding phrase underlined */
.q-list { gap: 0; }
.q-list li + li { border-top: 1px solid var(--line); }
.q-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 2px; background: none; border: 0; color: var(--ink); }
.q-list a:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.q-who { gap: 8px; font-size: 14px; }
.q-p { color: var(--hold); font-size: 12px; }
.q-msg { font: 400 13px/1.45 var(--type); color: var(--muted); -webkit-line-clamp: 1; padding-left: 32px; }
.q-msg mark { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.monogram { width: 24px; height: 24px; font-size: 10px; box-shadow: none; border-width: 1px; background: transparent; color: var(--ink); }
.q-who .monogram { width: 24px; height: 24px; font-size: 10px; }

/* inbox: ~10 rows to a laptop screen */
.filters { margin-bottom: 10px; }
.filters input, .filters select { min-height: 36px; padding: 6px 10px; }
.tabs button { padding: 8px 12px; font-size: 14px; }
.list { border-top: 1px solid var(--ink); }
.item { grid-template-columns: 88px minmax(150px, 210px) minmax(0, 1fr) auto; gap: 14px; padding: 9px 6px; align-items: center; }
.item .who { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; gap: 0 10px; }
.item .who .monogram { grid-row: 1 / span 2; align-self: center; width: 24px; }
.item .who b { font-size: 14px; }
.item .who span { font-size: 12px; }
.item .who span + span { display: none; }
.item .who b + span:last-child { display: block; }
.item .msg { font-size: 13.5px; line-height: 1.45; -webkit-line-clamp: 2; color: var(--muted); }
.item .msg mark { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.item .i-v { padding: 0; }
.pill { font-size: 11px; padding: 4px 7px 3px; }
.btn.sm { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
.empty { padding: 40px 16px; font-size: 17px; }

/* one submission: tighter slip, smaller stamp and dial */
.detail { gap: 14px; }
.detail .body { padding: 44px 44px 36px; font-size: 15.5px; line-height: 26px; }
.big-stamp { right: 36px; top: 18px; font-size: 17px; padding: 6px 12px; border-width: 2.5px; }
.dial { max-width: 220px; }
.kv dt, .kv dd { padding: 6px 0; }
.kv { font-size: 14px; }
@media (max-width: 860px) {
  main { padding: 16px 16px 48px; }
  .ov { grid-template-columns: 1fr; }
  .head h1 { font-size: 26px; }
  .item { grid-template-columns: 1fr auto; padding: 12px 2px; }
}
.verify .spread, .setup .spread { flex-wrap: nowrap; align-items: center; }
.verify .spread > span, .setup .spread > div { min-width: 0; line-height: 1.45; }
.verify .spread > .btn, .verify .spread > a.btn { flex: none; }
@media (max-width: 860px) { .verify .spread, .setup .spread { flex-wrap: wrap; } }

/* queue rows carry their own Deliver / Spam */
.q-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.q-acts { display: flex; gap: 6px; padding-right: 2px; }
details.adv { border: 1px solid var(--line-2); padding: 0 14px; }
details.adv > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 14px; color: var(--ink); }
details.adv[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
details.adv > .stack { padding-bottom: 14px; }
h2.or { font: 700 18px var(--display); color: var(--ink); margin: 10px 0 -4px; }
@media (max-width: 860px) { .q-list li { grid-template-columns: 1fr; } .q-acts { padding: 0 0 10px 32px; } }
/* key and URL boxes are paper slips in both themes; inline backgrounds from the views are overridden so the one
   thing a user must copy is always dark ink on light paper */
.keybox { background: var(--paper) !important; color: var(--paper-ink); border: 1px dashed #10342A; }
.keybox code { color: var(--paper-ink) !important; }
.keybox .btn { color: var(--paper-ink); border-color: var(--paper-ink); background: transparent; }
.keybox .btn:hover { background: rgba(16, 52, 42, .08); }
.keybox .btn.primary { background: #355644 var(--stamp-grain) center / cover; color: #EEF3EF; }
/* phones: the masthead grows to two rows (the density rule above fixes 56px, which let the tabs spill over the page) */
@media (max-width: 860px) { .mast-in { height: auto; padding-top: 8px; padding-bottom: 2px; } }
/* setup's one question: the platform picker is the page */
.pick-first { padding: 26px 26px 22px; }
.pick-first .seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin-top: 10px; }
.pick-first .seg button { min-height: 64px; font-size: 16px; font-weight: 600; border-right: 1px solid var(--ink); }
.pick-first .seg button:last-child { border-right: 0; }
.pick-first .seg button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
@media (max-width: 700px) { .pick-first .seg { grid-template-columns: 1fr 1fr; } .pick-first .seg button { border-bottom: 1px solid var(--ink); } }

/* ---------- clarity over costume (product, not marketing): one word per verdict, readable lists, quiet dark mode ---------- */
/* list labels: upright, filled, the same words as the filters */
.pill { transform: none; border: 0; border-radius: 3px; font: 600 11.5px/1 var(--ui); letter-spacing: .04em; text-transform: none; padding: 5px 8px; }
.pill.deliver { background: var(--ok-soft); color: var(--ok); }
.pill.drop { background: var(--bad-soft); color: var(--bad); }
.pill.hold { background: var(--hold-soft); color: var(--hold); }
.pill.accent { background: var(--accent-soft); color: var(--ink); }
.modebadge { font: 600 11px/1 var(--ui); letter-spacing: .06em; }
/* messages you skim are set in the text face; the typewriter is kept for the one message you open */
.item .msg, .q-msg { font-family: var(--ui); font-size: 14px; }
/* the score: a compact dial beside its number */
.dial { max-width: 180px; }
/* dark mode: the product's slips and key boxes are dark panels, so the brightest thing on screen is never furniture */
:root[data-theme="dark"] .keybox { background: var(--panel-2) !important; color: var(--ink); border-color: var(--line-2); }
:root[data-theme="dark"] .keybox code { color: var(--ink) !important; }
:root[data-theme="dark"] .keybox .btn { color: var(--ink); border-color: var(--ink); }
:root[data-theme="dark"] .detail .body { background: var(--panel); color: var(--ink); filter: none; border: 1px solid var(--line-2); }
:root[data-theme="dark"] .detail .body mark { color: var(--ink); }
:root[data-theme="dark"] .big-stamp { background: transparent; }
:root[data-theme="dark"] .big-stamp.deliver { color: var(--ok); } :root[data-theme="dark"] .big-stamp.drop { color: var(--bad); } :root[data-theme="dark"] .big-stamp.hold { color: var(--hold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .keybox { background: var(--panel-2) !important; color: var(--ink); border-color: var(--line-2); }
  :root:not([data-theme="light"]) .keybox code { color: var(--ink) !important; }
  :root:not([data-theme="light"]) .keybox .btn { color: var(--ink); border-color: var(--ink); }
  :root:not([data-theme="light"]) .detail .body { background: var(--panel); color: var(--ink); filter: none; border: 1px solid var(--line-2); }
  :root:not([data-theme="light"]) .detail .body mark { color: var(--ink); }
  :root:not([data-theme="light"]) .big-stamp { background: transparent; }
  :root:not([data-theme="light"]) .big-stamp.deliver { color: var(--ok); } :root:not([data-theme="light"]) .big-stamp.drop { color: var(--bad); } :root:not([data-theme="light"]) .big-stamp.hold { color: var(--hold); }
}
.teach { margin-bottom: 14px; padding: 12px 16px; }
.teach .spread { flex-wrap: nowrap; } @media (max-width: 860px) { .teach .spread { flex-wrap: wrap; } }

/* overview main column: held (only when there is some) above the kept-out proof */
.ov-main { display: grid; gap: 18px; min-width: 0; }
.q-r { font-size: 12px; color: var(--muted); white-space: nowrap; }
.kept .q-msg { color: var(--dim, var(--muted)); }

/* one submission: the slip on the left, why and details beside it. The slip's padding is a share of its width, so the
   engraved bands (816x80 top, 816x55 bottom, scaled to the width) never run into the text; the stamp floats beside it */
@media (min-width: 1000px) {
  .detail { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start; }
  .detail > :not(.grid2) { grid-column: 1; }
  .detail > .grid2 { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: 1fr; gap: 14px; }
}
.detail .body { padding: calc(9.8% + 18px) calc(3.7% + 28px) calc(6.7% + 18px) calc(5.3% + 28px); min-height: 0; }
.big-stamp { position: relative; right: auto; top: auto; float: right; margin: -6px -4px 10px 18px; }
:root[data-theme="dark"] .detail .body { padding: 28px 32px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .detail .body { padding: 28px 32px; } }
@media (max-width: 860px) { .big-stamp { float: none; position: static; margin: 0 0 12px; } }
.detail .body { background-color: #E7E4CE; }
@media (max-width: 860px) { .big-stamp { display: table; } }

/* ---------- one form: a single calm column of sections, each a heading, one line of why, and its fields ---------- */
.fp { display: grid; gap: 16px; max-width: 860px; }
.fp-head #waiting { margin-top: 6px !important; font-size: 14px; }
.fp-sec { padding: 22px 26px 24px; scroll-margin-top: 24px; }
.fp-sec header, .fp-fold > summary > span { display: block; margin-bottom: 16px; }
.fp-sec h2 { margin: 0; font: 700 21px/1.2 var(--display); color: var(--ink); }
.fp-sec header p, .fp-fold > summary p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.fp-sec label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.fp-sec label small { font-weight: 400; color: var(--muted); }
.fp-sec input:not([type=checkbox]), .fp-sec select, .fp-sec textarea { width: 100%; box-sizing: border-box; font-weight: 400; }
.fp-big input { min-height: 46px; font-size: 16px; }
.fp-sec textarea { font-size: 15px; line-height: 1.5; }
.fp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 14px 0; }
.fp-acts { margin-top: 14px; gap: 12px; align-items: center; }
.fp-l { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: -4px; }
.fp-url, .fp-plat { margin-top: 14px; }
.fp-secret { margin-top: 4px; }
.fp-secret .keybox { margin-top: 10px; }
/* disclosures: the summary is the section heading, with a chevron that turns */
.fp-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.fp-more > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.fp-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fp-fold > summary > span { margin: 0; }
.fp-more > summary::-webkit-details-marker, .fp-fold > summary::-webkit-details-marker { display: none; }
.fp-more > summary::before, .fp-fold > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.fp-more[open] > summary::before, .fp-fold[open] > summary::after { transform: rotate(45deg); }
.fp-fold[open] > summary { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fp-inner { display: grid; gap: 14px; }
.fp-inner > .fp-grid { margin: 0; }
.fp-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fp-row b { font-size: 14px; }
.fp-row .hint { margin: 2px 0 0; max-width: 52ch; }
.fp-reply { display: grid; gap: 14px; }
.fp-reply[hidden] { display: none; }
.fp-danger { padding-top: 14px; border-top: 1px solid var(--line); }
.fp-watch { border-color: var(--hold-fill); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fp-watch .btn { margin-left: auto; }
.fp #itabs { margin-top: 16px; }
@media (max-width: 700px) {
  .fp-sec { padding: 18px 16px 20px; }
  .fp-grid { grid-template-columns: 1fr; }
  .fp-row { flex-direction: column; align-items: flex-start; }
}
.fp-sec label.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.fp-sec label.check input { margin-top: 3px; flex: none; }
.fp-head { max-width: 860px; }
.fp-agent { padding: 16px 18px; border: 1px solid var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.fp-agent-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fp-agent-h b { font-size: 15px; }
.fp-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font-size: 13px; }
.fp-or::before, .fp-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- admin: needs you, the funnel, accounts beside what customers say, details folded ---------- */
.ad-needs { margin-bottom: 16px; }
.ad-needs h2, .ad-main h2 { margin: 0; font: 700 19px/1.2 var(--display); color: var(--ink); }
.ad-needs > p { margin: 6px 0 0; }
.ad-needs ul, .ad-voice { list-style: none; margin: 10px 0 0; padding: 0; }
.ad-needs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ad-funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--panel) 82%, transparent); }
.ad-step { padding: 14px 16px; border-right: 1px solid var(--line); position: relative; }
.ad-step:last-child { border-right: 0; }
.ad-step::before { content: none !important; }
.ad-step small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ad-step strong { display: block; margin-top: 2px; font: 700 28px/1.1 var(--display); color: var(--ink); }
.ad-step span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.ad-step:last-child strong { color: var(--ok); }
.ad-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.ad-voice li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ad-voice p { margin: 4px 0 0; white-space: pre-wrap; }
.ad-fold { margin-bottom: 12px; }
.ad-fold h2 { margin: 0; font: 700 19px/1.2 var(--display); }
.ad-fold summary p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.ad-chart { height: 90px; }
.ad-log { font-size: 12px; line-height: 1.7; max-height: 360px; overflow: auto; }
.head .seg a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.head .seg a.on { background: var(--ink); color: var(--accent-ink); }
@media (max-width: 1000px) { .ad-funnel { grid-template-columns: 1fr 1fr; } .ad-step { border-bottom: 1px solid var(--line); } .ad-step::before { display: none; } .ad-main { grid-template-columns: 1fr; } }

/* ---------- inbox: what reached you by day; kept out is a quieter tab; actions show on hover ---------- */
ol.list { list-style: none; margin: 0; padding: 0; }
.i-day { padding: 18px 6px 6px; font: 600 11px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.list .item { grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) auto auto; gap: 18px; padding: 11px 6px; cursor: pointer; }
.list .item:hover, .list .item:focus-visible { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.list .item .msg { font: 400 14px/1.5 var(--ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list.quiet .item .msg, .list .item.is-out .msg { color: var(--muted); }
.list .item .who b { font-size: 14px; }
.i-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.i-t { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.i-why { font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); padding: 2px 7px; }
.list .item .acts { min-width: 0; }
.list .item.is-out .acts { opacity: 0; transition: opacity .12s; }
.list .item.is-out:hover .acts, .list .item.is-out:focus-within .acts { opacity: 1; }
@media (hover: none) { .list .item.is-out .acts { opacity: 1; } }
.t-n { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.filters { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink); margin-bottom: 0; }
.filters .tabs { border-bottom: 0; }
.i-find { display: flex; gap: 8px; padding-bottom: 6px; }
.i-find input { width: 240px; }
.list { border-top: 0; }
.i-held { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border-color: var(--hold-fill); text-decoration: none; color: var(--ink); }
.i-held .btn { margin-left: auto; }
.i-held:hover { text-decoration: none; background: color-mix(in srgb, var(--hold-fill) 10%, transparent); }
.i-note { margin: 10px 6px 0; }
@media (max-width: 760px) {
  .list .item { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .list .item .who { grid-column: 1; }
  .list .item .i-meta { grid-column: 2; grid-row: 1; }
  .list .item .msg { grid-column: 1 / -1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .list .item .acts { grid-column: 1 / -1; }
  .list .item.is-out .acts { display: none; }
  .i-find, .i-find input { width: 100%; }
}
@media (max-width: 760px) {
  .list .item .who { grid-row: 1; }
  .i-held { flex-wrap: wrap; gap: 4px 12px; }
  .i-held .btn { margin-left: 0; }
}

/* ---------- HubSpot: protection status, what the contact shows, and the setup steps ---------- */
.hs-start h2, .hs-h, .hs-contact h2 { margin: 0; font: 700 19px/1.2 var(--display); color: var(--ink); }
.hs-start { max-width: 760px; }
.hs-start p { margin: 8px 0 0; max-width: 62ch; }
.hs-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; border-style: dashed; }
.hs-demo .btn { margin-left: auto; }
.hs-off { margin-bottom: 16px; border-color: var(--hold-fill); }
.hs-contact .kv { margin-top: 6px; }
.hs-contact dd b { color: var(--ink); }
.hs-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.hs-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.hs-step:first-child { border-top: 0; padding-top: 4px; }
.hs-step h3 { margin: 2px 0 0; font: 600 14.5px/1.3 var(--ui); color: var(--ink); }
.hs-step p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.hs-n { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ink); border-radius: 50%; font: 600 12px/1 var(--ui); color: var(--ink); }
.hs-step.done .hs-n { background: var(--ok); border-color: var(--ok); color: var(--bg); font-size: 0; }
.hs-step.done .hs-n::after { content: "✓"; font-size: 13px; }
.hs-step.done h3 { color: var(--muted); }
.hs-acts { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.hs-manage .row { gap: 10px; }
.eyebrow-s { margin: 0 0 6px; font: 600 11.5px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.hs-recipe { margin: 6px 0 6px; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.hs-recipe b { color: var(--ink); font-weight: 600; }