/* Email Engine — noumansadiq.com brand. This is the Sales/Cash Engine stylesheet copied
   verbatim so the three engines read as one business, with one change: the two off-token
   reds (E08A77, F0A493) are replaced by var(--critical) so this app passes the brand check. */
/* Sales Engine — noumansadiq.com brand. Tokens copied from nextjs-site/src/app/styles.css. */
:root {
  --canvas: #0B0B09;
  --canvas-raise: #131311;
  --canvas-high: #1A1A17;
  --canvas-line: rgba(242, 239, 233, 0.12);
  --canvas-line-2: rgba(242, 239, 233, 0.22);
  --ink: #F2EFE9;
  --ink-dim: #8F8C84;
  --ink-faint: #7E7A72;
  --gold: #C9A84C;
  --gold-hot: #F0C36A;
  --gold-dark: #A88835;
  --critical: #C4634F;
  --warning: #D89A3C;
  --ok: #6FA36B;
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1rem, 3.2vw, 2.5rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--canvas);
  background-image:
    linear-gradient(rgba(242, 239, 233, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 239, 233, 0.028) 1px, transparent 1px);
  background-size: 40px 40px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}
[hidden] { display: none !important; }
a { color: var(--ink); text-decoration-color: var(--canvas-line-2); text-underline-offset: 3px; }
a:hover { color: var(--gold-hot); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(201, 168, 76, 0.35); }

:where(h1, h2, h3, .display) {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-weight: 850;
  font-stretch: 125%;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
.mono, .eyebrow {
  font-family: var(--font-data);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.4;
}
.eyebrow { display: block; color: var(--ink-dim); margin-bottom: 0.7rem; }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--gold); color: var(--canvas); padding: 10px 14px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.row { display: flex; align-items: center; gap: 10px; }
.wrap-row { flex-wrap: wrap; }
.end { justify-content: flex-end; }

/* ── buttons: the site's .btn, without the arrow ─────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  white-space: nowrap; min-height: 44px; padding: 0 1.1rem;
  font-family: var(--font-data); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none;
  color: var(--ink); background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.32); border-radius: var(--radius);
  cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}
.btn:hover { border-color: var(--gold); color: var(--gold-hot); }
.btn.primary { background: var(--gold); color: var(--canvas); border-color: var(--gold); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset; }
.btn.primary:hover { background: var(--gold-hot); border-color: var(--gold-hot); color: var(--canvas); transform: translateY(-1px); }
.btn.quiet { border-color: var(--canvas-line-2); color: var(--ink-dim); }
.btn.quiet:hover { color: var(--ink); border-color: var(--ink-dim); }
.btn.danger { border-color: rgba(196, 99, 79, 0.5); color: var(--critical); }
.btn.danger:hover { border-color: var(--critical); color: var(--critical); }
.btn.sm { min-height: 36px; padding: 0 0.8rem; font-size: 0.68rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
@media (pointer: coarse) { .btn.sm, .tpl-list button, .dayrow button, .seg button, .touch-row select { min-height: 44px; } }

/* ── header ─────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--canvas-line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.lockup { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.logo-mark { display: inline-flex; align-items: center; gap: 0.6rem; padding: 9px; margin: -9px; text-decoration: none; color: var(--ink); }
.logo-mark svg { width: 32px; height: 32px; flex-shrink: 0; }
.logo-mark .n-stroke { stroke: var(--ink); transition: stroke .3s ease; }
.logo-mark .n-dot { fill: var(--gold); }
.logo-mark:hover .n-stroke { stroke: var(--gold); }
.logo-word { font-family: var(--font-data); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); white-space: nowrap; }
.product { color: var(--ink-dim); padding-left: 0.9rem; border-left: 1px solid var(--canvas-line-2); white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 0.5rem; }
.sync { color: var(--ink-faint); margin-right: 0.4rem; white-space: nowrap; }
.sync::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); margin-right: 7px; vertical-align: 1px; }
.sync.ok::before { background: var(--ok); }
.sync.bad { color: var(--critical); }
.sync.bad::before { background: var(--critical); }

/* ── day bar: the date, and the one measured number ─────────────────── */
.daybar-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-block: 2rem 1.4rem; flex-wrap: wrap; }
.daybar h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); }
.measure { display: flex; align-items: flex-end; gap: 0.9rem; }
.measure .big { font-family: var(--font-display); font-weight: 850; font-stretch: 125%; font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: .92; color: var(--gold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.measure .big small { color: var(--ink-faint); font-size: .5em; }
.measure .mono { color: var(--ink-dim); max-width: 12ch; }

/* ── tabs ───────────────────────────────────────────────────────────── */
.tabs { border-bottom: 1px solid var(--canvas-line); position: sticky; top: 64px; z-index: 20; background: color-mix(in srgb, var(--canvas) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tabs-in { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.tabs-in::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: 48px; padding: 0 1rem; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-dim); cursor: pointer; font-family: var(--font-data); font-size: 0.72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.count { font-family: var(--font-data); font-size: .65rem; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--warning); color: var(--canvas); display: inline-grid; place-items: center; letter-spacing: 0; }

main { padding-block: 1.6rem 5rem; }
.panel { display: none; }
.panel.on { display: block; }

/* ── cards ──────────────────────────────────────────────────────────── */
.card { background: var(--canvas-raise); border: 1px solid var(--canvas-line); border-radius: var(--radius); min-width: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 1rem 1.2rem; border-bottom: 1px solid var(--canvas-line); flex-wrap: wrap; }
.card-h h2 { font-size: 1.05rem; }
.card-b { padding: 1.1rem 1.2rem; }
.card-b.flush { padding: 0; }
.stack { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.1rem; }
.notice { border: 1px solid rgba(216, 154, 60, .45); background: rgba(216, 154, 60, .08); color: var(--ink); padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.notice.bad { border-color: rgba(196, 99, 79, .55); background: rgba(196, 99, 79, .09); }
.empty { color: var(--ink-dim); padding: 1.2rem; }

/* gauges */
.gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--canvas-line); border: 1px solid var(--canvas-line); margin-bottom: 1.1rem; }
.gauge { background: var(--canvas-raise); padding: 1rem 1.2rem 1.1rem; min-width: 0; }
.gauge .lbl { font-family: var(--font-data); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.gauge .val { font-family: var(--font-display); font-weight: 850; font-stretch: 125%; font-size: 2.2rem; line-height: 1; margin-top: .45rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.gauge .val small { font-size: .5em; color: var(--ink-faint); }
.gauge .hint { color: var(--ink-dim); font-size: .82rem; margin-top: .3rem; }
.gauge.warn .val { color: var(--warning); }
.gauge progress { display: block; width: 100%; height: 3px; margin-top: .6rem; appearance: none; border: 0; background: var(--canvas-line); }
.gauge progress::-webkit-progress-bar { background: var(--canvas-line); }
.gauge progress::-webkit-progress-value { background: var(--ink-dim); }
.gauge progress::-moz-progress-bar { background: var(--ink-dim); }

/* routine */
.routine { list-style: none; margin: 0; padding: 0; display: grid; }
.routine li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start; padding: .7rem 0; border-top: 1px solid var(--canvas-line); }
.routine li:first-child { border-top: 0; padding-top: 0; }
.routine label { cursor: pointer; }
.routine .t { font-weight: 600; }
.routine .d { color: var(--ink-dim); font-size: .88rem; }
.routine .m { font-family: var(--font-data); font-size: .68rem; color: var(--ink-faint); letter-spacing: .1em; white-space: nowrap; padding-top: 3px; }
.routine li.done .t { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: var(--ink-faint); }
input[type="checkbox"] { appearance: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1px solid var(--canvas-line-2); border-radius: var(--radius); background: var(--canvas); display: grid; place-items: center; cursor: pointer; }
input[type="checkbox"]::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--canvas); border-bottom: 2px solid var(--canvas); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
input[type="checkbox"]:checked::after { opacity: 1; }

/* due list */
.due { list-style: none; margin: 0; padding: 0; }
.due li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: .85rem 1.2rem; border-top: 1px solid var(--canvas-line); flex-wrap: wrap; }
.due li:first-child { border-top: 0; }
.due .co { background: none; border: 0; padding: 0; font-weight: 600; font-size: 1rem; cursor: pointer; text-align: left; color: var(--ink); }
.due .co:hover { color: var(--gold-hot); }
.due .next { color: var(--ink-dim); font-size: .86rem; margin-top: 2px; }
.late { color: var(--critical); }
.example { opacity: .6; }
.tag { font-family: var(--font-data); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 4px; }

/* stage chips: shape + colour + word */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-data); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--canvas-line-2); border-radius: var(--radius); padding: 2px 7px; white-space: nowrap; vertical-align: 2px; }
.chip::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.chip.st-contacted::before, .chip.st-later::before { background: currentColor; }
.chip.st-replied { color: var(--ok); border-color: rgba(111,163,107,.5); }
.chip.st-replied::before { background: var(--ok); }
.chip.st-firstlook, .chip.st-demo, .chip.st-scope { color: var(--warning); border-color: rgba(216,154,60,.45); }
.chip.st-firstlook::before, .chip.st-demo::before, .chip.st-scope::before { border-radius: 0; background: var(--warning); }
.chip.st-won { color: var(--canvas); background: var(--ok); border-color: var(--ok); }
.chip.st-won::before { background: var(--canvas); border-color: var(--canvas); }
.chip.st-lost { color: var(--ink-faint); }
.chip.st-lost::before { border-radius: 0; transform: rotate(45deg); }
.chip.dnc { color: var(--critical); border-color: rgba(196,99,79,.55); }
.chip.dnc::before { border-radius: 0; background: var(--critical); border-color: var(--critical); }

/* source card */
.source h3 { font-size: 1rem; margin-bottom: .6rem; }
.source ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.source li { margin: .25rem 0; }
.source .why { color: var(--ink-dim); }
.source .look { margin-top: .9rem; }
.dayrow { display: flex; gap: 6px; margin-top: 1rem; flex-wrap: wrap; }
.dayrow button { min-height: 36px; min-width: 52px; background: none; border: 1px solid var(--canvas-line-2); border-radius: var(--radius); color: var(--ink-dim); font-family: var(--font-data); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.dayrow button[aria-pressed="true"] { color: var(--canvas); background: var(--ink); border-color: var(--ink); }

/* forms: the site's underline fields */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.form.one { grid-template-columns: 1fr; margin-bottom: 1rem; }
.form .full { grid-column: 1 / -1; }
.f { display: grid; gap: 4px; min-width: 0; }
.f > span { font-family: var(--font-data); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.f input, .f select, .f textarea, .toolbar input[type="search"] {
  width: 100%; min-height: 42px; background: transparent; border: 0; border-bottom: 1px solid var(--canvas-line-2);
  border-radius: 0; padding: 8px 0; font-size: 1rem; color: var(--ink); transition: border-color .25s ease;
}
.f select { background: var(--canvas-raise); cursor: pointer; }
.f textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.f input::placeholder, .f textarea::placeholder, .toolbar input::placeholder { color: var(--ink-faint); }
.f input:focus, .f select:focus, .f textarea:focus, .toolbar input:focus { outline: none; border-bottom-color: var(--gold); }

/* pipeline */
.stages { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; background: var(--canvas-line); border: 1px solid var(--canvas-line); margin-bottom: 1rem; }
.stages button { background: var(--canvas-raise); border: 0; padding: .8rem .7rem; text-align: left; cursor: pointer; color: var(--ink); min-width: 0; }
.stages button:hover { background: var(--canvas-high); }
.stages button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
.stages button[aria-pressed="true"] .l { color: var(--canvas); }
.stages .n { font-family: var(--font-display); font-weight: 850; font-stretch: 125%; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stages .l { font-family: var(--font-data); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.toolbar input[type="search"] { max-width: 340px; flex: 1 1 220px; }
.seg { display: inline-flex; border: 1px solid var(--canvas-line-2); border-radius: var(--radius); }
.seg button { min-height: 36px; padding: 0 .8rem; background: none; border: 0; border-left: 1px solid var(--canvas-line-2); color: var(--ink-dim); font-family: var(--font-data); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
.tbl { overflow-x: auto; border: 1px solid var(--canvas-line); background: var(--canvas-raise); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-family: var(--font-data); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); font-weight: 400; padding: .7rem 1rem; border-bottom: 1px solid var(--canvas-line); white-space: nowrap; }
td { padding: .75rem 1rem; border-bottom: 1px solid var(--canvas-line); vertical-align: top; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--canvas-high); }
tbody tr:last-child td { border-bottom: 0; }
td .co { font-weight: 600; }
td .sub { color: var(--ink-dim); font-size: .82rem; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.trig { color: var(--ink-dim); font-size: .88rem; max-width: 36ch; }

/* messages */
.msg-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.tpl-list { display: grid; gap: 2px; position: sticky; top: 130px; }
.tpl-list .g { font-family: var(--font-data); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding: 1rem .6rem .4rem; }
.tpl-list .g:first-child { padding-top: 0; }
.tpl-list button { text-align: left; background: none; border: 0; border-left: 2px solid transparent; padding: .5rem .7rem; color: var(--ink-dim); cursor: pointer; font-size: .92rem; min-height: 36px; }
.tpl-list button:hover { color: var(--ink); background: var(--canvas-raise); }
.tpl-list button[aria-current="true"] { color: var(--ink); background: var(--canvas-raise); border-left-color: var(--ink); }
.when { color: var(--ink-dim); margin-bottom: 1rem; font-size: .92rem; }
.preview { white-space: pre-wrap; background: var(--canvas); border: 1px solid var(--canvas-line); border-radius: var(--radius); padding: 1.1rem 1.2rem; font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.preview .subject { font-weight: 600; padding-bottom: .7rem; margin-bottom: .8rem; border-bottom: 1px solid var(--canvas-line); }
.preview .subject.muted { font-weight: 400; color: var(--ink-dim); }
.var { background: rgba(216, 154, 60, .18); color: var(--gold-hot); padding: 0 4px; border-radius: var(--radius); font-family: var(--font-data); font-size: .85em; }
.send-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 1rem; flex-wrap: wrap; }
.over { color: var(--critical); }
.sentbar { margin-top: 1rem; border: 1px solid rgba(111,163,107,.45); background: rgba(111,163,107,.08); padding: .9rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: var(--radius); }
.sentbar p { color: var(--ink); }
.warn-box { border: 1px solid rgba(196,99,79,.55); background: rgba(196,99,79,.08); padding: .8rem 1rem; margin-bottom: 1rem; border-radius: var(--radius); }
.hint-box { border: 1px solid rgba(216,154,60,.4); background: rgba(216,154,60,.07); padding: .7rem 1rem; margin-bottom: 1rem; border-radius: var(--radius); font-size: .92rem; }
.fine { color: var(--ink-faint); font-size: .84rem; margin-top: 1rem; }
.restore { display: flex; align-items: center; gap: 12px; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--canvas-line); flex-wrap: wrap; }

/* documents: Calls and the Playbook */
.doc { max-width: 74ch; min-width: 0; }
.doc > section, .doc .chapter { padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--canvas-line); }
.doc > section:last-child, .doc .chapter:last-child { border-bottom: 0; }
.doc h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1rem; }
.doc h2 { font-size: clamp(1.35rem, 2.8vw, 1.9rem); margin-bottom: 1rem; scroll-margin-top: 130px; }
.doc h3 { font-size: 1.02rem; margin: 1.8rem 0 .7rem; }
.doc h4 { font-size: .95rem; margin: 1.4rem 0 .5rem; font-weight: 600; }
.doc p { color: var(--ink-dim); margin: .75rem 0; }
.doc p b, .doc p strong, .doc li b, .doc li strong, .doc td strong { color: var(--ink); font-weight: 600; }
.doc ul, .doc ol { color: var(--ink-dim); padding-left: 1.3rem; margin: .7rem 0; }
.doc li { margin: .4rem 0; }
.doc li::marker { color: var(--ink-faint); font-family: var(--font-data); font-size: .85em; }
.doc em { color: var(--ink); }
.doc code { font-family: var(--font-data); font-size: .82em; background: var(--canvas-high); border: 1px solid var(--canvas-line); padding: 1px 5px; border-radius: var(--radius); color: var(--ink); overflow-wrap: anywhere; }
.doc blockquote { margin: 1rem 0; padding: .9rem 1.1rem; background: var(--canvas-raise); border: 1px solid var(--canvas-line); color: var(--ink); border-radius: var(--radius); }
.doc blockquote p { color: var(--ink); margin: .3rem 0; }
.doc hr { border: 0; border-top: 1px solid var(--canvas-line); margin: 2rem 0; }
.doc .tablewrap { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--canvas-line); }
.doc table { font-size: .9rem; background: var(--canvas-raise); }
.doc td { color: var(--ink-dim); cursor: auto; }
.doc tbody tr { cursor: auto; }
.doc tbody tr:hover { background: none; }
.doc td:first-child { color: var(--ink); }
.doc .checks { list-style: none; padding-left: 0; }
.doc .checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: .45rem 0; margin: 0; border-top: 1px solid var(--canvas-line); }
.doc .checks li:first-child { border-top: 0; }
.doc .checks li label { color: var(--ink); cursor: pointer; }
.doc .checks li.done label { color: var(--ink-dim); }
.doc .progress { font-family: var(--font-data); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin: -.3rem 0 .6rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--canvas-line); border: 1px solid var(--canvas-line); margin-top: 1rem; }
.note { background: var(--canvas-raise); padding: 1rem 1.1rem; color: var(--ink-dim); }
.note b { display: block; color: var(--ink); margin-bottom: .3rem; }
.script { counter-reset: s; list-style: none; padding-left: 0 !important; }
.script li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; margin: 0; padding: .75rem 0; border-top: 1px solid var(--canvas-line); }
.script li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-data); font-size: .72rem; color: var(--ink-faint); padding-top: 3px; grid-row: span 2; }
.script li b { color: var(--ink); font-weight: 600; }
.script li span { color: var(--ink-dim); grid-column: 2; font-size: .92rem; }
.qa { margin: 0; }
.qa dt { color: var(--ink); font-weight: 600; margin-top: 1.1rem; }
.qa dd { margin: .3rem 0 0; color: var(--ink-dim); }

.book { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.book-nav { position: sticky; top: 130px; max-height: calc(100vh - 150px); overflow-y: auto; }
.book-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.book-nav a { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: .45rem .6rem; text-decoration: none; color: var(--ink-dim); font-size: .88rem; border-left: 2px solid transparent; line-height: 1.35; }
.book-nav a .no { font-family: var(--font-data); font-size: .66rem; color: var(--ink-faint); padding-top: 2px; }
.book-nav a:hover { color: var(--ink); background: var(--canvas-raise); }
.book-nav a[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); background: var(--canvas-raise); }
.book-select { display: none; }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 60; display: flex; justify-content: flex-end; }
.drawer { width: min(560px, 100%); height: 100%; background: var(--canvas-raise); border-left: 1px solid var(--canvas-line-2); display: flex; flex-direction: column; }
.drawer-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--canvas-line); }
.drawer-h h2 { font-size: 1.5rem; margin: .3rem 0 .45rem; overflow-wrap: anywhere; }
.drawer-b { padding: 1.2rem 1.3rem 2rem; overflow-y: auto; display: grid; gap: 1.4rem; }
.drawer h3 { font-size: .9rem; margin-bottom: .5rem; }
.touches { list-style: none; margin: 0; padding: 0; }
.touches li { display: flex; justify-content: space-between; gap: 12px; padding: .5rem 0; border-top: 1px solid var(--canvas-line); font-size: .9rem; }
.touches li:first-child { border-top: 0; }
.touch-row select { min-height: 36px; background: var(--canvas); border: 1px solid var(--canvas-line-2); border-radius: var(--radius); padding: 0 8px; }
.saving { color: var(--ok); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--canvas); padding: .7rem 1.1rem; border-radius: var(--radius); z-index: 90; font-size: .92rem; max-width: calc(100% - 32px); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }

/* login */
.login-page { display: grid; place-items: center; padding: 1.5rem var(--gutter); }
.login { width: min(440px, 100%); background: var(--canvas-raise); border: 1px solid var(--canvas-line); border-radius: var(--radius); padding: 2rem 1.8rem; }
.login .lockup { margin-bottom: 2.2rem; }
.login h1 { font-size: clamp(2.1rem, 8vw, 2.9rem); margin-bottom: .8rem; }
.login p.dim { margin-bottom: 1.6rem; }
.login form { display: grid; gap: 1.2rem; }
.login .remember { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: .92rem; cursor: pointer; }
.login .remember input { margin: 0; }
.login .btn { width: 100%; }
.login .err { color: var(--critical); min-height: 1.5em; font-size: .92rem; }
.login .fine { margin-top: 1.4rem; }

@media (max-width: 1000px) {
  .cols { grid-template-columns: 1fr; }
  .msg-grid { grid-template-columns: 1fr; }
  .tpl-list { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .tpl-list .g { display: none; }
  .tpl-list button { flex: none; border: 1px solid var(--canvas-line-2); border-radius: var(--radius); white-space: nowrap; min-height: 44px; }
  .tpl-list button[aria-current="true"] { border-color: var(--ink); }
  .book { grid-template-columns: 1fr; gap: 1rem; }
  .book-nav { position: static; max-height: none; overflow: visible; }
  .book-nav ol { display: none; }
  .book-select { display: grid; }
  .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .product, .logo-word, #exportLink { display: none; }
  .gauges { grid-template-columns: 1fr 1fr; }
  .gauge .val { font-size: 1.8rem; }
  .form { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  th.trig, td.trig { display: none; }
  .daybar-in { padding-block: 1.4rem 1rem; }
  .measure .mono { max-width: 9ch; }
  .card-h, .card-b { padding-inline: 1rem; }
  .due li { padding-inline: 1rem; }
  .tabs { top: 64px; }
  .btn.sm, .dayrow button, .seg button, .touch-row select { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
.due li.block { display: block; padding: 0; }
.source .look { margin-top: 1rem; margin-bottom: .3rem; }
.cmd { font-family: var(--font-data); font-size: .82em; background: var(--canvas-high); border: 1px solid var(--canvas-line); padding: 1px 5px; border-radius: var(--radius); color: var(--ink); white-space: nowrap; }

.steps { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ink-dim); }
.steps li { margin: .25rem 0; }
.imp-buttons { margin-top: .8rem; }
.imp-table { overflow-x: auto; border: 1px solid var(--canvas-line); margin-top: 1rem; background: var(--canvas); }
.imp-table table { font-size: .88rem; }
.imp-table tbody tr { cursor: auto; }
.imp-table tbody tr:hover { background: none; }
.imp-table td { padding: .6rem .7rem; }
.imp-table td.trig { max-width: 26ch; }
.imp-table .chip { margin-top: 4px; }
.muted-row td { opacity: .55; }
.imp-actions { margin-top: .8rem; }
.research { border: 1px solid var(--canvas-line); padding: .8rem 1rem; background: var(--canvas); border-radius: var(--radius); }
.research p { color: var(--ink-dim); margin: .2rem 0; font-size: .9rem; }
.research p b { color: var(--ink); font-weight: 600; }
.research .eyebrow { margin-bottom: .3rem; }

/* ── v2: one-click sending ── */
.card-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: .9rem 1.2rem; border-top: 1px solid var(--canvas-line); }
.card-f:empty { display: none; }
.send-card { border-color: rgba(201, 168, 76, .38); }
.send-card .card-f { position: sticky; bottom: 0; background: var(--canvas-raise); z-index: 2; }
.btn.big { min-height: 48px; padding-inline: 1.5rem; font-size: 1rem; }
.ready { list-style: none; margin: 0; padding: 0; max-height: min(70vh, 900px); overflow-y: auto; }
.ready-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: .8rem 1.2rem; border-top: 1px solid var(--canvas-line); }
.ready-item:first-child { border-top: 0; }
.ready-item input[type=checkbox] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--gold); }
.ready-item > label { cursor: pointer; min-width: 0; display: grid; gap: 1px; }
.ready-item .co { font-weight: 600; font-size: 1rem; }
.ready-item .next { color: var(--ink-dim); font-size: .86rem; overflow-wrap: anywhere; }
.ready-item .why { font-size: .84rem; color: var(--ink-faint); }
.ready-item .why.late { color: var(--critical); }
.ready-item.blocked .co { color: var(--ink-dim); }
.ready-edit { grid-column: 2 / -1; display: grid; gap: .6rem; margin-top: .5rem; }
.ready-edit textarea { width: 100%; min-height: 16rem; resize: vertical; line-height: 1.5; }
.due li.failed .co { color: var(--ink-dim); }
.due .snippet { color: var(--ink); font-size: .9rem; margin-top: .35rem; max-width: 60ch; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: .9rem 0; font-size: .92rem; }
.kv dt { font-family: var(--font-data); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); padding-top: 3px; }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.skipped { margin: 0 0 .9rem; font-size: .88rem; color: var(--ink-dim); }
.skipped summary { cursor: pointer; }
.skipped ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.events { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .88rem; display: grid; gap: .3rem; }
.events .mono { font-size: .7rem; margin-right: .4rem; }
#researchCard .look { margin-top: 1.1rem; }
details.card > summary { list-style: none; cursor: pointer; border-bottom: 0; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2::before { content: "+ "; color: var(--gold); }
details.card[open] > summary { border-bottom: 1px solid var(--canvas-line); }
details.card[open] > summary h2::before { content: "− "; }
#mailBanner code { font-family: var(--font-data); font-size: .82rem; background: var(--canvas); padding: .1rem .35rem; overflow-wrap: anywhere; }
#mailBanner .btn { margin-left: .5rem; }
@media (max-width: 640px) {
  .ready-item, .card-f { padding-inline: 1rem; }
  .ready { max-height: none; overflow: visible; }
  .ready-item { grid-template-columns: 22px minmax(0, 1fr); }
  .ready-item > .btn { grid-column: 2; justify-self: start; }
  .card-f .btn.big { width: 100%; }
}


/* the record — one entry per thing that happened */
.touches .ev { display: block; }
.ev-h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ev-s { margin: 2px 0 0; font-size: 13px; opacity: .75; }
.ev-body { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07); font-size: 13px; line-height: 1.5; white-space: pre-wrap;
  max-height: 220px; overflow: auto; }

/* ── CASH ENGINE additions ──────────────────────────────────────────────
   Everything above is the Sales Engine's stylesheet, unchanged, so the two
   engines read as one business. Only what this one needs extra lives here. */

/* At phone width the header's status line and the sign-out button together ran
   49px past the edge and scrolled the whole document sideways. Let them wrap. */
@media (max-width: 760px) {
  .top-in { flex-wrap: wrap; row-gap: .45rem; padding-block: .55rem; }
  .top-actions { width: 100%; justify-content: space-between; gap: .75rem; }
  .sync { white-space: normal; margin-right: 0; line-height: 1.35; }
  .daybar h1 { font-size: 2.1rem; }
}

dialog {
  background: var(--canvas-raise);
  color: var(--ink);
  border: 1px solid var(--canvas-line-2);
  border-radius: var(--radius);
  max-width: 820px;
  width: min(92vw, 820px);
  padding: 1.6rem;
  max-height: 88vh;
}
dialog::backdrop { background: rgba(0, 0, 0, .76); }
dialog h2 { font-size: 1.35rem; }
dialog .events { max-height: 220px; overflow: auto; }

/* the notice strip — says what happened, then gets out of the way */
#notice .card-b { font-size: .92rem; }

/* the address queue's inline field sits in a table cell, so it must not stretch it */
[data-email-for] { max-width: 220px; }

/* ─── THE GATE ────────────────────────────────────────────────────────────────
   The sign-in page used classes (.center, .brand, .primary) that this stylesheet
   never defined, so it rendered as raw unstyled HTML — the first thing anyone saw
   of the engine, and it looked broken. It is the same brand as everything else now. */
.gate { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); }
.gate-card {
  width: 100%; max-width: 420px;
  background: var(--canvas-raise);
  border: 1px solid var(--canvas-line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 5vw, 2.6rem);
}
.gate-mark { display: flex; align-items: center; gap: .6rem; margin-bottom: 2.2rem; }
.gate-mark svg { width: 30px; height: 30px; }
.gate-mark .n-stroke { stroke: var(--ink); }
.gate-mark .n-dot { fill: var(--gold); }
.gate-mark .mono { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gate-card h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); margin-bottom: 2rem; }
.gate-lbl { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: .5rem; }
.gate-card input[type="password"] {
  width: 100%; min-height: 48px;
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--canvas-line-2); border-radius: var(--radius);
  padding: 0 .8rem; font-family: var(--font-data); letter-spacing: .08em;
}
.gate-card input[type="password"]:focus { border-color: var(--gold); outline: none; }
.gate-stay { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 1.6rem; color: var(--ink-dim); font-size: .88rem; cursor: pointer; }
.gate-stay input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
.gate-go { width: 100%; min-height: 48px; }
.gate-err { color: var(--critical); font-size: .88rem; margin-top: .9rem; min-height: 1.2em; }
.gate-foot { color: var(--ink-faint); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--canvas-line); }

/* ─── THE STATUS SENTENCE ─────────────────────────────────────────────────────
   The most important thing on the page: not a number, a sentence. */
.status { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.2rem; margin-bottom: 1.1rem;
  background: var(--canvas-raise); border: 1px solid var(--canvas-line); border-left-width: 3px; border-radius: var(--radius); }
.status.ok   { border-left-color: var(--ok); }
.status.wait { border-left-color: var(--warning); }
.status.idle { border-left-color: var(--ink-faint); }
.status.bad  { border-left-color: var(--critical); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .55rem; flex: none; background: var(--ink-faint); }
.status.ok .status-dot   { background: var(--ok); box-shadow: 0 0 0 4px rgba(111,163,107,.15); }
.status.wait .status-dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(216,154,60,.15); }
.status.bad .status-dot  { background: var(--critical); box-shadow: 0 0 0 4px rgba(196,99,79,.15); }
.status-head { font-family: var(--font-display); text-transform: uppercase; font-weight: 850; font-stretch: 125%;
  letter-spacing: -0.01em; font-size: 1.15rem; line-height: 1.1; }
.status-sub { color: var(--ink-dim); font-size: .9rem; margin-top: .35rem; max-width: 70ch; }

/* ─── WHERE THE ADVERTS WENT ─────────────────────────────────────────────────
   63 rows had been disappearing into the word "parked" with no count on the page. */
table.supply { width: 100%; border-collapse: collapse; }
table.supply td { padding: .7rem 1.2rem; border-top: 1px solid var(--canvas-line); vertical-align: top; }
table.supply tr:first-child td { border-top: 0; }
table.supply td.num { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; white-space: nowrap; }
table.supply tr.clickable { cursor: pointer; }
table.supply tr.clickable:hover td { background: var(--canvas-high); }
table.supply tr.clickable:hover td:first-child { color: var(--gold-hot); }
table.supply tr:last-child td { color: var(--ink); }
table.supply tr:last-child td.num { color: var(--gold); font-weight: 700; }

/* ─── THE LOG ────────────────────────────────────────────────────────────────
   Was forty undifferentiated lines. The two that matter — what it sent, what it
   decided — now carry their own weight, and it no longer floats over the table. */
.events { max-height: 26rem; overflow-y: auto; }
.ev { display: grid; grid-template-columns: 7.2rem 1.2rem 1fr; gap: .5rem; align-items: baseline;
  padding: .42rem 0; border-top: 1px solid var(--canvas-line); }
.ev:first-child { border-top: 0; }
.ev-t { color: var(--ink-faint); font-size: .68rem; white-space: nowrap; }
.ev-i { color: var(--ink-faint); font-size: .8rem; text-align: center; }
.ev-m { color: var(--ink-dim); font-size: .86rem; min-width: 0; overflow-wrap: anywhere; }
.ev.loud .ev-m { color: var(--ink); }
.ev.loud .ev-i { color: var(--gold); }

/* The deals table was set at a density that made twenty rows fill two screens. */
#deals td { padding-block: .6rem; }
#deals td .dim { margin-top: .1rem; }

@media (max-width: 900px) {
  .ev { grid-template-columns: 1.2rem 1fr; }
  .ev-t { grid-column: 1 / -1; }
}

/* ─── THE EXPLAINER ──────────────────────────────────────────────────────────
   Boss, 15 Sep: "this system is kind of confusing to me… I just don't know if I
   have to do something or is it going to run by itself." A dashboard that shows
   numbers but never says what the thing IS has failed at the first job. It sits
   at the top, opens on first visit, and collapses once it has been read. */
.explain { border: 1px solid var(--canvas-line); border-left: 3px solid var(--gold); border-radius: var(--radius);
  background: var(--canvas-raise); margin-bottom: 1.1rem; }
.explain > summary { cursor: pointer; list-style: none; padding: .9rem 1.2rem; display: flex;
  align-items: baseline; justify-content: space-between; gap: 1rem; }
.explain > summary::-webkit-details-marker { display: none; }
.explain-t { font-family: var(--font-display); text-transform: uppercase; font-weight: 850; font-stretch: 125%;
  font-size: 1rem; letter-spacing: -0.01em; }
.explain-hint { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.explain[open] > summary { border-bottom: 1px solid var(--canvas-line); }
.explain[open] .explain-hint::after { content: " · click to close"; }
.explain-b { padding: 1.2rem; }
.explain-b > p { max-width: 78ch; }
.explain-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.6rem; margin-top: 1.4rem; }
.explain-cols h3 { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 .6rem; font-family: var(--font-data); font-weight: 700; }
.explain-cols ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .92rem; }
.explain-cols li { color: var(--ink-dim); }
.explain-cols li strong { color: var(--ink); }

/* The benchmark column on the proof tables. */
table.supply td.num.dim { color: var(--ink-faint); font-size: .82rem; font-weight: 400; }

/* ── the master switch ────────────────────────────────────────────────────── */
/* Its own block, not a button in the row, because it answers the question Boss
   actually asks when he opens this page: is it working for me right now? */
.autosend {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1.05rem; margin-bottom: 1.1rem;
  background: var(--canvas-raise);
  border: 1px solid var(--canvas-line);
  border-left: 2px solid var(--ink-faint);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease-out);
}
.autosend.on { border-left-color: var(--ok); }
.autosend.off { border-left-color: var(--warning); }
.autosend-t { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.autosend-t strong {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .01em; font-size: .95rem;
}
.autosend-t small { font-size: .82rem; line-height: 1.45; }

.switch {
  flex: 0 0 auto; position: relative;
  width: 46px; height: 26px; padding: 0;
  border: 1px solid var(--canvas-line-2);
  border-radius: 13px;
  background: var(--canvas-high);
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.switch[aria-checked="true"] { background: var(--ok); border-color: var(--ok); }
.switch[disabled] { opacity: .5; cursor: progress; }
.switch .knob {
  position: absolute; top: 50%; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
  transition: left .2s var(--ease-out);
}
.switch[aria-checked="true"] .knob { left: 23px; }

@media (max-width: 520px) {
  .autosend { align-items: flex-start; }
}

/* ── EMAIL ENGINE additions ──────────────────────────────────────────────
   Only what this engine needs beyond the shared sheet, and only in brand tokens. */

/* email type chips: shape + colour + word */
.chip.t-record { color: var(--ink); border-color: var(--canvas-line-2); }
.chip.t-record::before { border-radius: 0; background: var(--ink); border-color: var(--ink); }
.chip.t-money { color: var(--gold); border-color: rgba(201, 168, 76, .5); }
.chip.t-money::before { border-radius: 0; transform: rotate(45deg); background: var(--gold); border-color: var(--gold); }
.chip.t-progress { color: var(--ok); border-color: rgba(111, 163, 107, .5); }
.chip.t-progress::before { background: var(--ok); border-color: var(--ok); }
.chip.s-failed, .chip.s-uncertain { color: var(--critical); border-color: rgba(196, 99, 79, .55); }
.chip.s-failed::before, .chip.s-uncertain::before { border-radius: 0; background: var(--critical); border-color: var(--critical); }
.chip.s-sent, .chip.s-onboarded, .chip.s-active { color: var(--ok); border-color: rgba(111, 163, 107, .5); }
.chip.s-sent::before, .chip.s-onboarded::before, .chip.s-active::before { background: var(--ok); border-color: var(--ok); }
.chip.s-queued, .chip.s-invited, .chip.s-sending { color: var(--warning); border-color: rgba(216, 154, 60, .45); }
.chip.s-paused, .chip.s-archived, .chip.s-discarded { color: var(--ink-faint); }
.lockline { font-family: var(--font-data); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.lockline::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--gold); margin-right: 7px; vertical-align: 1px; }

/* gauges that open what they count */
button.gauge { border: 0; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
button.gauge:hover { background: var(--canvas-high); }

/* queue */
.qitem + .qitem { margin-top: 1.1rem; }
.qmeta { display: flex; gap: .35rem .9rem; flex-wrap: wrap; align-items: center; color: var(--ink-dim); font-size: .86rem; }
.rcpts { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .3rem; }
.rcpts label { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; overflow-wrap: anywhere; }
.diff { margin-top: .9rem; }
.diff summary { cursor: pointer; font-family: var(--font-data); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); min-height: 32px; display: flex; align-items: center; }
.diff pre { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--canvas); border: 1px solid var(--canvas-line); border-radius: var(--radius); padding: .8rem 1rem; font-family: var(--font-data); font-size: .8rem; line-height: 1.55; }
.diff .add { color: var(--ok); display: block; }
.diff .rem { color: var(--critical); text-decoration: line-through; display: block; }
.errline { color: var(--critical); font-size: .88rem; margin-top: .6rem; }
.f textarea.mail { min-height: 18rem; font-family: var(--font-text); }

/* links handed to a client */
.linkbox { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.linkbox code { flex: 1 1 240px; min-width: 0; font-family: var(--font-data); font-size: .78rem; background: var(--canvas); border: 1px solid var(--canvas-line); border-radius: var(--radius); padding: .6rem .7rem; overflow-wrap: anywhere; color: var(--ink); }
.btn.wa { border-color: rgba(37, 211, 102, .45); }
.btn.wa:hover { border-color: #25D366; color: var(--ink); }

/* the record, in the client drawer */
.rec { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.rec li { border: 1px solid var(--canvas-line); border-left: 2px solid var(--canvas-line-2); border-radius: var(--radius); background: var(--canvas); padding: .75rem .9rem; min-width: 0; }
.rec li.in { border-left-color: var(--gold); }
.rec .rh { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.rec .rs { font-weight: 600; margin-top: .35rem; overflow-wrap: anywhere; }
.rec .rb { margin-top: .4rem; color: var(--ink-dim); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; }
.rec .ra { margin-top: .6rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.drawer .form { grid-template-columns: 1fr; }
.drawer-b > section > h3 { margin-bottom: .6rem; }

/* forms: required marker, field errors, team rows */
.req { color: var(--gold); margin-left: 3px; }
.f .ferr { color: var(--critical); font-size: .82rem; }
.f.bad input, .f.bad select, .f.bad textarea { border-bottom-color: var(--critical); }
.f small { color: var(--ink-dim); font-size: .82rem; }
.team-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr auto; gap: .6rem 1rem; align-items: end; padding-top: .4rem; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset.group { border: 0; padding: 0; margin: 0; min-width: 0; }
.consent { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; color: var(--ink); font-size: .95rem; }
.consent input { margin-top: 3px; flex: none; }
.pill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pill-list li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .8rem; font-size: .9rem; }
.pill-list b { font-weight: 600; }
.pill-list span { color: var(--ink-dim); }

/* the public onboarding page */
.welcome main { max-width: 900px; }
.welcome .card + .card { margin-top: 1.1rem; }
.welcome .lede { color: var(--ink-dim); max-width: 62ch; margin-top: 1rem; font-size: 1rem; }
.langs { display: inline-flex; }
.done-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem 1.1rem; margin-top: 1.1rem; }
.done-list dt { font-family: var(--font-data); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); padding-top: 3px; }
.done-list dd { margin: 0; overflow-wrap: anywhere; }
.site-foot { border-top: 1px solid var(--canvas-line); padding-block: 1.6rem 2.4rem; color: var(--ink-faint); font-size: .86rem; }
.site-foot .row { flex-wrap: wrap; gap: .4rem 1.4rem; }
.site-foot a { color: var(--ink-dim); }

@media (max-width: 640px) {
  .team-row { grid-template-columns: 1fr; }
  .team-row .btn { justify-self: start; }
  .pill-list li { grid-template-columns: 1fr; gap: .1rem; }
  .rec li { padding: .7rem; }
}
/* field messages read as sentences, not as data labels */
.f .ferr { font-family: var(--font-text); text-transform: none; letter-spacing: 0; line-height: 1.4; }
.f .ferr:empty { display: none; }
.f > span > b { font-weight: inherit; }
/* 17 Sep, found by looking at the 390px screenshot: the shared `.f input { width:100% }`
   also caught checkboxes inside a field, stretching them into big white boxes and wrapping the
   address beside them one letter at a time. A checkbox is always a 20px square. */
.f input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 20px; flex: none; padding: 0; margin: 2px 0 0;
  border: 1px solid var(--canvas-line-2); border-radius: var(--radius); background: var(--canvas);
}
.f input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.f input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }
.rcpts label { align-items: flex-start; min-width: 0; max-width: 100%; }
.rcpts label { word-break: normal; overflow-wrap: anywhere; }