:root {
  /* Read by the notice at the top of index.html, and by nothing else.
     A browser opening a page from inside a .zip is handed that one file
     and none of its neighbours, so this declaration never arrives and
     the page knows to say "extract the folder first" rather than render
     as unstyled text and look broken. It is a custom property because
     the alternatives all lie: a missing stylesheet still leaves a
     CSSStyleSheet object on the link, and cssRules cannot be counted
     over file:// at all. Do not remove it, and do not rename it without
     changing index.html to match. */
  --stylesheet: loaded;

  --ink: #0a1620;
  --ink-raise: #101f2b;
  --ink-line: #223447;
  --paper: #fbfaf7;
  --paper-line: #e4e0d6;
  --paper-ink: #16222c;
  --amber: #c97b21;
  --amber-ink: #8a5210;
  --amber-soft: #f6e6cd;
  --slate: #8ea0b2;
  --slate-dim: #7d92a5; /* lightened from #5c7286 — that value failed WCAG AA (~3.4-3.7:1) against --ink and --ink-raise; this passes ~5.2:1 / ~5.7:1 */
  --green: #4aa483;
  --red: #c4553f;
  --blue: #4a7fb0;
  --orange: #d98a2b;
  --gold: #d9a441;

  --display: "Newsreader", Georgia, serif;
  --body: "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 0.68, 0.36, 1);
  --radius: 7px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--amber-ink) transparent; }
body {
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 1100px 640px at 50% -8%, rgba(201, 123, 33, 0.07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed;
  color: #dce6ee;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
}
a { color: var(--amber); }

::selection { background: rgba(201, 123, 33, 0.35); color: #fff; }
.paper ::selection { background: rgba(201, 123, 33, 0.28); color: var(--paper-ink); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--amber-ink); }
.paper::-webkit-scrollbar-thumb { background: #ddd4bd; }
.paper::-webkit-scrollbar-thumb:hover { background: var(--amber); }

button:focus-visible, .tabbtn:focus-visible, a:focus-visible, input:focus-visible, .bounty:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── shell ─────────────────────────────────────── */
.appbar {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(18px, 3vw, 38px);
  border-bottom: 1px solid var(--ink-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
  flex-wrap: wrap;
}
.appbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber-ink) 25%, var(--amber-ink) 75%, transparent);
  opacity: 0.55;
}
.appbar .brand {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.005em;
  color: #f5f1e8;
}
.appbar .brand::before { content: "❖  "; color: var(--amber); font-size: 0.72em; opacity: 0.75; }
.appbar .brand span { color: var(--amber); font-style: italic; }
.appbar .sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-dim);
}

.tabbar {
  display: flex;
  gap: 2px;
  padding: 0 clamp(18px, 3vw, 38px);
  border-bottom: 1px solid var(--ink-line);
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
}

/* ── active-client bar — always-visible "whose data is this" strip ── */
.clientbar {
  position: sticky;
  top: 48px;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px clamp(18px, 3vw, 38px);
  background: linear-gradient(165deg, rgba(201, 123, 33, 0.09), rgba(201, 123, 33, 0.02)), var(--ink-raise);
  border-bottom: 1px solid var(--amber-ink);
  box-shadow: 0 10px 22px -18px rgba(0, 0, 0, 0.7);
}
.clientbar:empty { display: none; }

/* ── the empty roster's invitation ──────────────────────────────────
   Visible from every tab, because the strip it lives in is. It pulses
   until there is a client, then never again: an animation that keeps
   running after the thing it asked for is done becomes noise. */
.clientbar-empty { color: var(--slate-dim); font-size: 0.78rem; }
.clientbar-link {
  margin-left: auto; color: var(--amber); text-decoration: none;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em;
  border: 1px solid rgba(217, 160, 43, 0.4); border-radius: 5px; padding: 5px 11px;
  white-space: nowrap; transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.clientbar-link:hover { background: rgba(217, 160, 43, 0.12); border-color: var(--amber); }
.clientbar-cta {
  background: var(--amber); color: #17212b; border: 0; border-radius: 6px;
  padding: 6px 15px; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; animation: ctapulse 2s ease-in-out infinite;
}
.clientbar-cta:hover { filter: brightness(1.08); animation: none; }
@keyframes ctapulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 160, 43, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(217, 160, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .clientbar-cta { animation: none; box-shadow: 0 0 0 2px rgba(217, 160, 43, 0.5); }
}
.clientbar-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  flex-shrink: 0;
}
.clientbar-name {
  font-family: var(--display);
  font-size: 1.12rem;
  color: #f5f1e8;
  flex-shrink: 0;
}
.clientbar-type {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-dim);
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  padding: 3px 10px;
  flex-shrink: 0;
}
.clientbar-chip {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--amber);
  flex-shrink: 0;
}
.clientbar-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--slate-dim);
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .clientbar-count { display: none; }
}
.tabbtn {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--slate-dim);
  padding: 15px 17px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tabbtn:hover { color: var(--slate); }
.tabbtn.active { color: var(--amber); border-bottom-color: var(--amber); }

.tab-panel { display: none; padding: clamp(20px, 3vw, 38px); }
.tab-panel.active { display: block; animation: panelIn 0.5s var(--ease); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.split {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── controls panel ───────────────────────────── */
.panel {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.06)), var(--ink-raise);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 30px -18px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.panel + .panel { margin-top: 20px; }

/* Hero panel — the one summary/headline panel per tab that everything
   else on the tab is context for. Same shape as .panel, just heavier:
   a warm top edge and a deeper shadow, so the eye lands there first. */
.panel.panel-hero {
  border-color: rgba(201, 123, 33, 0.35);
  box-shadow: 0 2px 0 var(--amber) inset, 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -20px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.3);
}
.panel h3 {
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin-bottom: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--ink-line);
}

/* accordion sections — <details class="panel"> reuses the same card look */
details.panel { padding: 0; }
details.panel > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-dim);
  padding: 24px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s var(--ease);
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after {
  content: "+";
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--amber);
  flex-shrink: 0;
  margin-left: 12px;
}
details.panel[open] > summary::after { content: "−"; }
details.panel > summary:hover { color: var(--slate); }
details.panel > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
details.panel[open] > summary { border-bottom: 1px solid var(--ink-line); padding-bottom: 20px; }
details.panel .acbody { padding: 20px 22px 24px; }
/* one-line "what this panel does" caption, directly under an h3 */
.panel-lede {
  font-size: 0.82rem;
  color: var(--slate-dim);
  line-height: 1.45;
  margin: -8px 0 15px;
}

/* Lightweight sub-section break inside a long accordion body — a form
   that's one long stack of fields reads as a wall; a few of these turn it
   into legible groups without adding another nested panel. */
.subhead {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 26px 0 13px;
  padding-top: 18px;
  border-top: 1px dashed var(--ink-line);
}
.subhead:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-size: 0.78rem;
  color: var(--slate);
  margin-bottom: 6px;
}
.field .fieldrow { display: flex; gap: 10px; }
.field .fieldrow > * { flex: 1; }

.fieldhelp {
  font-size: 0.76rem;
  color: var(--slate-dim);
  line-height: 1.45;
  margin: 5px 2px 15px;
}

/* deviation dot — hidden until a field drifts from the kit's baseline */
.devdot {
  display: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  margin-left: 5px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(201, 123, 33, 0.7);
  cursor: help;
}
.devdot.show { display: inline-block; }

input[type="text"], input[type="email"], input[type="number"], input[type="date"], textarea, select {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--ink-line);
  color: #dce6ee;
  border-radius: 5px;
  padding: 10px 11px;
  font-family: var(--body);
  font-size: 0.86rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
input::placeholder, textarea::placeholder { color: #45586a; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(201, 123, 33, 0.15);
}
input:hover, textarea:hover, select:hover { border-color: #2c4258; }
textarea { resize: vertical; min-height: 62px; }

/* Custom-styled select — the browser's native control (system font, native
   dropdown arrow) reads as visibly foreign next to the rest of the design
   system. Strip the native chrome, draw our own chevron. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238ea0b2' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c97b21' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select option { background: var(--ink-raise); color: #dce6ee; }

.checkfield { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.checkfield input { width: auto; }
.checkfield label { font-size: 0.82rem; color: var(--slate); margin: 0; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--amber); width: 16px; height: 16px; cursor: pointer; }

input[type="range"] {
  width: 100%;
  accent-color: var(--amber);
  height: 22px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(201, 123, 33, 0.18); }
input[type="range"]::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(201, 123, 33, 0.18); border: none; }
.rangefield label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--slate);
  margin-bottom: 5px;
}
.rangefield .readout { font-family: var(--mono); color: var(--amber); font-weight: 600; }

.rangerow { display: flex; align-items: center; gap: 9px; }
.rangerow input[type="range"] { flex: 1; }
.rangerow input[type="number"] {
  width: 96px; flex: none; text-align: right;
  font-family: var(--mono); font-size: 0.82rem; padding: 8px 9px;
}
.numaffix { font-family: var(--mono); color: var(--amber); font-size: 0.85rem; font-weight: 600; flex: none; }

.btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.86rem;
  background: linear-gradient(180deg, #d6892f, var(--amber));
  color: #1a0f02;
  border: 0;
  border-radius: 6px;
  padding: 11px 20px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 18px -8px rgba(201, 123, 33, 0.55);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 12px 22px -8px rgba(201, 123, 33, 0.65); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled:hover { transform: none; box-shadow: none; }
.btn.ghost {
  background: transparent;
  color: var(--slate);
  border: 1px solid var(--ink-line);
  box-shadow: none;
}
.btn.ghost:hover { color: #edf2f6; border-color: var(--amber); background: rgba(201, 123, 33, 0.07); transform: translateY(-1px); }
.btn.small { padding: 7px 13px; font-size: 0.76rem; border-radius: 5px; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.muted { color: var(--slate-dim); font-size: 0.88rem; }

/* Visually hidden but present for screen readers/keyboard users — for
   fields whose visible label is a placeholder or icon only. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* live "how this feeds a contract" excerpt, right where the fields are typed */
.preamblepreview {
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--slate-dim);
  border-radius: 0 5px 5px 0;
  padding: 12px 15px;
  margin: 6px 0 15px;
}
.preamblepreview-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin-bottom: 7px;
}
.preamblepreview p {
  font-family: var(--display);
  font-size: 0.92rem;
  line-height: 1.55;
  color: #cdd8e2;
}
.preamblepreview .ph { color: #d98a2b; background: rgba(201, 123, 33, 0.16); }

/* ── paper preview ────────────────────────────── */
.paperwrap { position: sticky; top: 110px; }
.paper.mini { max-height: none; overflow: visible; padding: 24px 28px; }
.paper {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  color: var(--paper-ink);
  border-radius: 4px;
  padding: clamp(26px, 3vw, 46px);
  box-shadow: 0 1px 0 #fff inset, 0 26px 54px -24px rgba(0, 0, 0, 0.72), 0 3px 10px rgba(0, 0, 0, 0.28);
  font-family: var(--display);
  font-size: 0.97rem;
  line-height: 1.66;
  max-height: 78vh;
  overflow-y: auto;
}
.paper .doc-id {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b9aa6;
}
.paper h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.95rem;
  color: var(--ink);
  margin: 7px 0 2px;
}
.paper .doc-sub {
  color: #5c7286;
  font-size: 0.95rem;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: 17px;
}
.paper h2 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 23px 0 9px;
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 7px;
}
.paper p { margin-bottom: 11px; }
.paper b { font-weight: 600; }
.paper .fld { color: var(--amber-ink); font-weight: 600; }
.paper table { width: 100%; border-collapse: collapse; margin: 11px 0 17px; font-family: var(--body); font-size: 0.86rem; }
.paper table th, .paper table td { border: 1px solid var(--paper-line); padding: 8px 10px; text-align: left; }
.paper table th { background: #f1eee6; font-weight: 600; }
.paper table.meta td:first-child { color: #5c7286; width: 40%; }
.paper table.items tr.total td { font-weight: 700; background: #f6f4ee; }
.paper .note {
  font-family: var(--body);
  font-size: 0.82rem;
  color: #6b5324;
  background: #fff6e9;
  border-left: 3px solid #d98a2b;
  padding: 11px 15px;
  margin: 11px 0 17px;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 4px 12px -6px rgba(217, 138, 43, 0.35);
}
.paper .note b { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ad7418; margin-bottom: 5px; }
.paper .pagebreak { break-before: page; }
.paper .paylink {
  display: inline-block;
  background: linear-gradient(180deg, #d6892f, var(--amber));
  color: #1a0f02;
  font-family: var(--body);
  font-weight: 600;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 6px;
  box-shadow: 0 8px 18px -8px rgba(201, 123, 33, 0.55);
}
.paper .terms { font-size: 0.85rem; color: #445a6c; }

/* ── payment rails (invoice) ───────────────────── */
.paper .payrails { margin: 14px 0 18px; display: flex; flex-direction: column; gap: 12px; }
.paper .payrail { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.paper .payrail .payurl {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: #6b8296;
  word-break: break-all;
  line-height: 1.5;
}
.paper .payrail-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f8a1f;
  background: rgba(124, 152, 34, 0.13);
  border: 1px solid rgba(124, 152, 34, 0.3);
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.paper .payrail-crypto {
  display: block;
  background: #f4f1e8;
  border: 1px solid #ddd5c2;
  border-radius: 5px;
  padding: 12px 14px;
}
.paper .payrail-head {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.86rem;
  color: #2c3f4e;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.paper .payaddr {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: #1f2d38;
  background: #fff;
  border: 1px solid #ddd5c2;
  border-radius: 4px;
  padding: 9px 11px;
  word-break: break-all;
  line-height: 1.6;
}
.paper .payrail-note { font-size: 0.72rem; color: #667f92; margin-top: 8px; line-height: 1.55; }

/* ── calculator ────────────────────────────────── */
.calcrow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-line); font-size: 0.86rem; }
.calcrow span { color: var(--slate); }
.calcrow b { color: #edf2f6; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.calcrow.highlight b { color: var(--amber); }

.bandtrack { position: relative; height: 8px; background: var(--ink-line); border-radius: 4px; margin: 26px 0 7px; }
.bandfill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--green), var(--amber)); border-radius: 4px; }
.banddot { position: absolute; top: 50%; width: 13px; height: 13px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px var(--ink-raise), 0 2px 6px rgba(0, 0, 0, 0.4); }
.bandtargettag {
  position: absolute; bottom: 100%; transform: translateX(-50%); margin-bottom: 6px;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600; color: var(--amber); white-space: nowrap;
}
.bandlabels { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; color: var(--slate-dim); }

.tiergrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 17px; }
.tier {
  background: var(--ink); border: 1px solid var(--ink-line); border-radius: var(--radius);
  padding: 17px 14px; text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  animation: riseIn 0.45s var(--ease) both;
}
.tier:nth-child(2) { animation-delay: 0.06s; }
.tier:nth-child(3) { animation-delay: 0.12s; }
.tier:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -16px rgba(0, 0, 0, 0.55); border-color: var(--amber-ink); }
.tier.hot { border-color: var(--amber); background: linear-gradient(165deg, #251808, #1a1006); box-shadow: 0 0 0 1px rgba(201, 123, 33, 0.25), 0 16px 28px -16px rgba(201, 123, 33, 0.35); }
.tiername { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-dim); margin-bottom: 9px; }
.tier.hot .tiername { color: var(--amber); }
.tierprice { font-family: var(--display); font-size: 1.45rem; color: #f2f6f9; }
.tierprice span { font-size: 0.7rem; color: var(--slate-dim); }

.warnbox {
  background: linear-gradient(165deg, #2c1c0e, #201205); border: 1px solid var(--amber-ink); color: var(--amber-soft);
  font-size: 0.82rem; padding: 13px 15px; border-radius: 6px; margin-top: 15px; display: none;
  box-shadow: 0 8px 18px -10px rgba(201, 123, 33, 0.4);
}

/* reality-check flags — quiet amber cards, one per triggered doc threshold */
.realityflag {
  font-size: 0.83rem; color: var(--slate); line-height: 1.5;
  background: var(--ink); border-left: 3px solid var(--amber-ink); border-radius: 0 5px 5px 0;
  padding: 10px 13px; margin-bottom: 9px;
  animation: riseIn 0.3s var(--ease) both;
}
.realityflag:last-child { margin-bottom: 0; }

/* ── invoices ──────────────────────────────────── */
.invrow {
  display: grid; grid-template-columns: 110px 1fr auto auto auto; gap: 10px; align-items: center;
  padding: 11px 10px; border-radius: 6px; cursor: pointer; font-size: 0.83rem;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  animation: riseIn 0.3s var(--ease) both;
}
.invrow:hover { background: var(--ink); transform: translateX(2px); }
.invrow.active { background: linear-gradient(165deg, #241708, #1a1006); box-shadow: inset 2px 0 0 var(--amber); }
.invrow.voided { opacity: 0.5; }
.invrow.voided .invnum { text-decoration: line-through; }
.invnum { font-family: var(--mono); color: var(--amber); font-size: 0.75rem; }
.dup-btn {
  background: transparent; border: 1px solid var(--ink-line); color: var(--slate-dim);
  border-radius: 5px; width: 28px; height: 28px; cursor: pointer; font-size: 0.9rem; line-height: 1;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.dup-btn:hover { color: var(--amber); border-color: var(--amber); transform: translateY(-1px); }
.badge {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.badge.blue { background: #16324a; color: #8fc1e8; }
.badge.amber { background: #4a3316; color: #f3c777; }
.badge.orange { background: #4a2c16; color: #f0a35c; }
.badge.red { background: #4a1c16; color: #f08c7c; }
.badge.paid { background: #163a2c; color: #7fd3ab; }
.badge.void { background: #2a2a2a; color: #9a9a9a; text-decoration: line-through; }

.lineitem { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.lineitem .li-desc { flex: 1; }
.lineitem button.li-remove { background: none; border: none; color: var(--red); font-size: 1.1rem; cursor: pointer; padding: 0 6px; transition: transform 0.15s var(--ease); }
.lineitem button.li-remove:hover { transform: scale(1.2); }

.emailpreview { background: var(--ink); border: 1px solid var(--ink-line); border-radius: 6px; padding: 13px 15px; margin: 11px 0; font-size: 0.82rem; }
.emailpreview pre { white-space: pre-wrap; font-family: var(--body); color: var(--slate); margin-top: 9px; line-height: 1.55; }

/* ── toast ─────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(14px) scale(0.98);
  background: linear-gradient(165deg, #201608, #150d02);
  color: var(--amber-soft);
  border: 1px solid var(--amber-ink);
  font-family: var(--body);
  font-size: 0.85rem;
  padding: 12px 22px;
  border-radius: 8px;
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 50;
}
/* pointer-events is none while hidden so an invisible toast cannot swallow
   clicks in the middle of the page. Turning it back on here is the half that
   was missing: the Undo button rendered, looked live, and every click on it
   passed straight through to the paragraph underneath. */
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
.toast-action {
  background: none; border: 1px solid var(--amber-ink); color: var(--amber);
  font-family: var(--body); font-weight: 600; font-size: 0.78rem;
  padding: 4px 11px; border-radius: 5px; margin-left: 8px; cursor: pointer;
  transition: background 0.2s var(--ease);
}
.toast-action:hover { background: rgba(201, 123, 33, 0.15); }

/* ── client switcher (appbar) ──────────────────── */
.clientswitch label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin-bottom: 6px;
}
.clientswitch-row { display: flex; gap: 8px; }
.clientswitch select {
  min-width: 200px;
  background: var(--ink-raise);
  border: 1px solid var(--ink-line);
  color: #edf2f6;
  border-radius: 5px;
  padding: 8px 10px;
  font-family: var(--body);
  font-size: 0.85rem;
  transition: border-color 0.2s var(--ease);
}
.clientswitch select:hover, .clientswitch select:focus { border-color: var(--amber); outline: none; }

/* ── MRR hero / roster ─────────────────────────── */
.mrrhero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.mrrlabel { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-dim); margin-bottom: 9px; }
.mrrnum { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 3.8rem); color: #f5f1e8; text-shadow: 0 0 34px rgba(201, 123, 33, 0.16); font-variant-numeric: tabular-nums; }
.mrrnum span { color: var(--amber); font-style: italic; }

.rosterhead {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.8fr 1.05fr 1.05fr 1.0fr 54px 26px;
  gap: 10px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-dim);
  border-bottom: 1px solid var(--ink-line);
}
.clientrow {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.8fr 1.05fr 1.05fr 1.0fr 54px 26px;
  gap: 10px;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid var(--ink-line);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  animation: riseIn 0.3s var(--ease) both;
}
.clientrow .clone-btn {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ink-line);
  color: var(--slate-dim);
  border-radius: 4px;
  padding: 5px 8px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.clientrow .clone-btn:hover { color: var(--amber); border-color: var(--amber); }
.clientrow:hover { background: var(--ink-raise); transform: translateX(2px); }
.clientrow.active { background: linear-gradient(165deg, #241708, #1a1006); box-shadow: inset 3px 0 0 var(--amber); }
.clientname { color: #edf2f6; font-weight: 500; }
@media (max-width: 760px) {
  .rosterhead { display: none; }
  .clientrow { grid-template-columns: 1fr auto; grid-template-areas: "name del" "mrr mrr" "badge badge" "sc sc" "audit audit"; }
}

/* ── placeholder guard ─────────────────────────── */
.ph {
  color: #b5473a;
  background: rgba(196, 85, 63, 0.16);
  padding: 0 3px;
  border-radius: 2px;
  font-weight: 700;
}
.guardbar {
  display: none;
  align-items: center;
  gap: 8px;
  background: linear-gradient(165deg, #3a1712, #2a100c);
  border: 1px solid var(--red);
  color: #f0a89c;
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px -12px rgba(196, 85, 63, 0.5);
}

/* ── audit checklist ───────────────────────────── */
.auditgroup {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  padding: 17px 4px 9px;
  border-bottom: 1px solid var(--ink-line);
}
.auditgroup:first-child { padding-top: 0; }
.auditrow {
  display: grid;
  grid-template-columns: 1fr 150px 80px 90px;
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.84rem;
  animation: riseIn 0.3s var(--ease) both;
}
.auditxt { color: var(--slate); }
.auditrow select, .auditrow input {
  background: var(--ink);
  border: 1px solid var(--ink-line);
  color: #dce6ee;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 0.8rem;
}
@media (max-width: 640px) {
  .auditrow { grid-template-columns: 1fr; gap: 6px; }
}

/* ── scope creep ledger ────────────────────────── */
.screrow {
  display: grid;
  grid-template-columns: 90px 1fr 110px 90px auto;
  gap: 10px;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.83rem;
  animation: riseIn 0.3s var(--ease) both;
}
.screrow.billed { opacity: 0.55; }
.screrow b { font-family: var(--mono); color: var(--amber); }
@media (max-width: 760px) {
  .screrow { grid-template-columns: 1fr auto; }
}

/* ── close-rate ceiling check ────────────────────── */
.quoterow {
  display: grid;
  grid-template-columns: 1fr 96px 168px 28px;
  gap: 10px;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.83rem;
  animation: riseIn 0.3s var(--ease) both;
}
.quoterow.decided { opacity: 0.6; }
.quoterow b { font-family: var(--mono); color: var(--amber); }
@media (max-width: 760px) {
  .quoterow { grid-template-columns: 1fr auto; }
}
.closeband {
  display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid var(--amber);
  padding: 11px 14px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 4px;
  font-size: 0.85rem;
}
.closeband span { color: var(--slate); font-size: 0.82rem; }

/* ── scope-creep trend sparkbars — six-month history, CSS-only ─── */
.sparkbars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 96px;
  padding-top: 18px;
}
.sparkbar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  cursor: default;
}
.sparkbar {
  width: 62%;
  min-width: 10px;
  background: linear-gradient(180deg, var(--amber), var(--amber-ink));
  border-radius: 4px 4px 1px 1px;
  box-shadow: 0 6px 14px -8px rgba(201, 123, 33, 0.55);
  transition: height 0.4s var(--ease);
}
.sparkbar.empty { background: var(--ink-line); box-shadow: none; }
.sparkbar-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--slate-dim);
  margin-top: 7px;
}

/* ── contract summary receipt ───────────────────── */
.receiptrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chip {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #edf2f6;
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  padding: 6px 13px;
}
.chipsep { color: var(--slate-dim); font-family: var(--mono); }
.price-chip { transition: background 0.3s var(--ease); }
.price-chip.chip-flash { background: #2a1a06; border-color: var(--amber); }
.deltaold { color: var(--slate-dim); text-decoration: line-through; }
.deltanew { color: var(--amber); font-weight: 700; }
.deltapct { color: var(--green); }
.deltapos { color: var(--green); font-family: var(--mono); font-size: 0.82rem; }
.deltaneg { color: var(--red); font-family: var(--mono); font-size: 0.82rem; }

/* contract strength meter + live financial/document stats */
.strengthmeter { margin-top: 18px; }
.strengthlabel { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--slate); margin-bottom: 7px; }
.strengthfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transition: width 0.4s var(--ease), background 0.4s var(--ease); }
.statrow { margin-top: 16px; }
.statrow .calcrow:last-child { border-bottom: none; }

.strengthdetails { margin-top: 12px; }
.strengthdetails summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--slate-dim);
  padding: 4px 0;
}
.strengthdetails summary::-webkit-details-marker { display: none; }
.strengthdetails summary:hover { color: var(--slate); }
.strengthbreakdown { margin-top: 8px; }
.strengthrow {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--ink-line); font-size: 0.83rem;
}
.strengthrow:last-child { border-bottom: none; }
.strengthrow span { color: var(--slate); }
.strengthwhy { display: block; color: var(--slate-dim); font-size: 0.76rem; margin-top: 3px; line-height: 1.4; }
.strengthrow b { font-family: var(--mono); flex-shrink: 0; }
.strengthrow.pos b { color: var(--green); }
.strengthrow.neg b { color: var(--red); }

/* ── touched-field marker ──────────────────────── */
#contractForm input.touched,
#contractForm select.touched,
#contractForm textarea.touched,
#calcForm input.touched,
#calcForm select.touched,
#calcForm textarea.touched {
  border-left: 3px solid var(--green);
}

/* ── live clause highlight in the paper preview ─── */
@keyframes clauseFlash {
  0% { background: rgba(201, 123, 33, 0.32); }
  100% { background: rgba(201, 123, 33, 0); }
}
.paper .clause-flash {
  animation: clauseFlash 1.7s ease-out;
  border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(201, 123, 33, 0.22);
}

/* ── negotiation mode ───────────────────────────── */
.negotip {
  background: linear-gradient(165deg, #221607, #1a1006);
  border: 1px solid var(--amber-ink);
  border-radius: 6px;
  padding: 13px 15px;
  margin-bottom: 11px;
  box-shadow: 0 8px 18px -12px rgba(201, 123, 33, 0.3);
}
.negotip p { font-size: 0.85rem; color: var(--amber-soft); margin-bottom: 9px; line-height: 1.55; }

/* ── first-90-days schedule ─────────────────────── */
.schedlist { max-height: 240px; overflow-y: auto; margin-bottom: 10px; }
.schedrow {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.8rem;
}
.schedrow span:first-child { font-family: var(--mono); color: var(--amber); font-size: 0.72rem; }
.schedrow span:last-child { color: var(--slate); }

/* ── letterhead ─────────────────────────────────── */
#logoPreviewWrap { margin-bottom: 10px; }
#logoPreviewWrap img { max-height: 56px; max-width: 220px; object-fit: contain; background: #fff; padding: 8px 12px; border-radius: 5px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.4); }
.paper .letterhead { margin-bottom: 17px; }
.paper .letterhead img { max-height: 56px; max-width: 220px; object-fit: contain; }

/* ── bounty meter ───────────────────────────────── */
.bounty { display: inline-flex; gap: 2px; cursor: help; }
.bounty .star { font-size: 0.9rem; color: var(--ink-line); transition: color 0.3s var(--ease); }
/* Level 0 had no rule at all, so a healthy client showed five stars in the
   same colour as a border and read as a widget that had failed to render
   rather than as good news. A faint green says the emptiness is the point. */
.bounty[data-level="0"] .star { color: rgba(74, 164, 131, 0.42); }
.bounty[data-level="1"] .star:nth-child(-n+1) { color: var(--amber); }
.bounty[data-level="2"] .star:nth-child(-n+2) { color: var(--amber); }
.bounty[data-level="3"] .star:nth-child(-n+3) { color: var(--orange); text-shadow: 0 0 6px rgba(217, 138, 43, 0.4); }
.bounty[data-level="4"] .star:nth-child(-n+4) { color: var(--red); text-shadow: 0 0 8px rgba(196, 85, 63, 0.5); }
.bounty[data-level="5"] .star { color: var(--red); text-shadow: 0 0 10px rgba(196, 85, 63, 0.7); animation: bountypulse 1.1s ease-in-out infinite; }
@keyframes bountypulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── honor system ───────────────────────────────── */
.honorgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.honorcard {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.1)), var(--ink);
  border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 18px; text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  animation: riseIn 0.45s var(--ease) both;
}
.honorcard:nth-child(2) { animation-delay: 0.06s; }
.honorcard:nth-child(3) { animation-delay: 0.12s; }
.honorcard:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -16px rgba(0, 0, 0, 0.55); }
.honorcard .honoricon {
  width: 30px; height: 30px; margin: 0 auto 9px;
  color: var(--amber);
  transition: color 0.3s var(--ease), filter 0.3s var(--ease);
}
.honorcard .honoricon svg { width: 100%; height: 100%; display: block; }
.honorcard.is-live .honoricon {
  color: var(--amber);
  filter: drop-shadow(0 0 7px rgba(201, 123, 33, 0.4));
}
/* A streak nobody has started should not look like one in progress. */
.honorcard.is-zero .honoricon { color: var(--slate-dim); opacity: 0.45; filter: none; }
.honorcard.is-zero .honornum { color: var(--slate-dim); }
.honorhint {
  font-size: 0.7rem; line-height: 1.45; color: var(--slate-dim);
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ink-line);
}
.honorcard .honornum { font-family: var(--display); font-size: 1.75rem; color: #f2f6f9; }
.honorcard .honorlabel { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-dim); margin-top: 5px; }

/* Ring progress stat — a "done/total" completeness figure drawn as a
   filled ring instead of a flat icon+number, for the three completeness
   cards (Setup, Contract, Audit checklist). --pct is set inline per
   instance; the ::before punches a matching-color hole to leave a donut. */
.ringstat {
  width: 88px; height: 88px; margin: 0 auto 12px;
  border-radius: 50%;
  background: conic-gradient(var(--amber) calc(var(--pct, 0) * 1%), var(--ink-line) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 0.4s var(--ease);
}
.ringstat::before {
  content: "";
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.ringstat.complete { background: conic-gradient(var(--green) calc(var(--pct, 0) * 1%), var(--ink-line) 0); }
.ringstat .ringnum { position: relative; z-index: 1; font-family: var(--display); font-size: 1.15rem; color: #f2f6f9; }

/* ── empty states — a waiting-for-input panel gets a centred, breathing
   layout instead of one line of muted text stranded at the top of an
   otherwise dead column. ─────────────────────────────────────────── */
.emptystate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 260px; gap: 6px;
}
.emptystate-icon { font-size: 2.4rem; margin-bottom: 6px; opacity: 0.85; filter: grayscale(0.15); }
.emptystate-title { font-family: var(--display); font-size: 1.15rem; color: #dce6ee; margin-bottom: 2px; }
.emptystate .muted { max-width: 340px; }

/* ── objection drill ────────────────────────────── */
.drillprompt { font-family: var(--display); font-size: 1.55rem; color: #f2f6f9; line-height: 1.32; padding: 10px 0 4px; }
.drillanswer { margin-top: 19px; padding-top: 17px; border-top: 1px solid var(--ink-line); }
.drillanswer + .drillanswer { margin-top: 23px; }
.drillanswer h4 { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 9px; }
.drillanswer p { color: #dce6ee; font-size: 0.9rem; margin-bottom: 13px; white-space: pre-wrap; line-height: 1.58; }
.drillanswer .meaning { color: var(--slate); font-style: italic; }
.drillanswer .boss-title { font-family: var(--body); font-weight: 600; color: var(--amber); font-size: 0.95rem; margin-bottom: 11px; }
.drilltimer { font-family: var(--display); font-size: 3.6rem; text-align: center; color: var(--amber); padding: 12px 0 8px; transition: color 0.3s var(--ease); }
.drilltimer.low { color: var(--red); animation: timerPulse 0.6s ease-in-out infinite; }
@keyframes timerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.drillprogress { display: flex; gap: 6px; margin-bottom: 9px; }
.drillprogress .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-line); transition: background 0.3s var(--ease); }
.drillprogress .dot.done { background: var(--green); }
.drillprogress .dot.active { background: var(--amber); box-shadow: 0 0 8px rgba(201, 123, 33, 0.6); }

.personacard { display: flex; gap: 15px; align-items: center; }
.personacard .picon { font-size: 2.1rem; }
.personacard .pname { font-family: var(--display); font-size: 1.18rem; color: #f2f6f9; }
.personacard .ptell { color: var(--slate); font-size: 0.85rem; margin-top: 4px; }

.redflags { list-style: none; margin: 0 0 15px; padding: 0; }
.redflags li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; font-size: 0.85rem; color: var(--slate); transition: color 0.2s var(--ease); }
.redflags li input { margin-top: 3px; }
.redflags li.checked { color: var(--green); text-decoration: line-through; }

.ratingrow { display: flex; gap: 7px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.ratingrow .rate-label { font-size: 0.78rem; color: var(--slate-dim); margin-right: 4px; }
.ratingrow button {
  background: var(--ink); border: 1px solid var(--ink-line); color: var(--slate-dim);
  border-radius: 5px; width: 32px; height: 32px; cursor: pointer; font-size: 0.85rem;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.ratingrow button:hover { border-color: var(--amber); transform: translateY(-1px); }
.ratingrow button.picked { background: linear-gradient(180deg, #d6892f, var(--amber)); border-color: var(--amber); color: #1a0f02; font-weight: 700; }

/* ── invoice mini-widgets ───────────────────────── */
.stage0mark { margin-top: 13px; }

/* ── FX reality check ───────────────────────────── */
.fxrow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ink-line); font-size: 0.86rem; }
.fxrow span:first-child { color: var(--slate); }
.fxrow b { font-family: var(--mono); color: #edf2f6; }
.fxrow.gap b { color: var(--red); }

/* ── command center (Monday briefing) ──────────────── */
.briefsection { margin-top: 19px; animation: riseIn 0.4s var(--ease) both; }
.briefsection:first-of-type { margin-top: 6px; }
.briefhead {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber); padding-bottom: 9px; border-bottom: 1px solid var(--ink-line); margin-bottom: 2px;
}
.briefrow {
  display: grid; grid-template-columns: 1.1fr 1.7fr 1fr; gap: 10px; align-items: center;
  padding: 10px 6px; border-bottom: 1px solid var(--ink-line); font-size: 0.85rem; cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.briefrow:hover { background: var(--ink); transform: translateX(3px); }
.briefname { color: #edf2f6; font-weight: 500; }
.briefmain { color: var(--slate); }
.briefsub { text-align: right; font-family: var(--mono); font-size: 0.74rem; color: var(--slate-dim); }
.briefrow.red .briefsub, .briefrow.orange .briefsub { color: var(--red); }
.briefrow.amber .briefsub { color: var(--amber); }
.allclear { color: var(--green); font-size: 0.97rem; padding: 7px 0 2px; }
@media (max-width: 640px) {
  .briefrow { grid-template-columns: 1fr; gap: 2px; }
  .briefsub { text-align: left; }
}

/* ── tab notification badges ───────────────────────── */
.tabdot {
  display: none;
  margin-left: 7px;
  background: linear-gradient(180deg, #d16a56, var(--red));
  color: #fff;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 6px;
  vertical-align: middle;
  box-shadow: 0 2px 6px -1px rgba(196, 85, 63, 0.6);
}

/* ── shared entrance animation ─────────────────────── */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── print ─────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .no-print, .appbar, .tabbar, .panel, .invrow, #toast { display: none !important; }
  .tab-panel { display: none !important; padding: 0; }
  .tab-panel.active { display: block !important; animation: none; }
  .split { display: block; }
  .paperwrap { position: static; }
  .paper {
    box-shadow: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background-image: none;
  }
  .paper table, .paper tr, .paper .note, .paper .letterhead { break-inside: avoid; }
  .paper h2 { break-after: avoid; }

  /* The payment block is the point of the invoice, so it has to survive
     the export intact. Browsers drop background graphics from print by
     default, which would render the amber button as invisible text —
     print-color-adjust forces it, and the border guarantees a visible
     button even where that is overridden. The raw URL prints underneath
     regardless, so an invoice read on paper is still payable. */
  .paper .payrails, .paper .payrail, .paper .payrail-crypto { break-inside: avoid; }
  .paper .paylink {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none;
    border: 1px solid #a8691c;
  }
  .paper .payrail-tag, .paper .payaddr, .paper .payrail-crypto {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .paper .payurl { color: #4a5f70; }

  @page { size: A4; margin: 18mm; }
}

/* ── chase queue ───────────────────────────────── */
.chasestatus { margin: 4px 0 18px; }
.chasestatus-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 9px;
}
.chasestatus-label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--amber);
}
.chasestatus.armed .chasestatus-label { color: var(--green); }
.chasestatus-to { font-family: var(--mono); font-size: 0.72rem; color: var(--slate-dim); }

.chasesteps {
  list-style: none; counter-reset: cs;
  margin: 0 0 20px; padding: 15px 17px;
  border: 1px dashed var(--ink-line); border-radius: 6px;
  background: rgba(255, 255, 255, 0.012);
}
.chasesteps li {
  counter-increment: cs; position: relative;
  padding-left: 30px; font-size: 0.82rem; color: var(--slate);
  line-height: 1.55;
}
.chasesteps li + li { margin-top: 9px; }
.chasesteps li::before {
  content: counter(cs);
  position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--amber); color: #1a0f02;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.chasesteps b { color: #edf2f6; }
.chasesteps i { color: var(--amber); font-style: normal; font-family: var(--mono); font-size: 0.94em; }

/* the vertical rail the stages hang off */
.chasetimeline { position: relative; padding-left: 24px; }
.chasetimeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--ink-line), var(--amber-ink), var(--ink-line));
  opacity: 0.65;
}

.chasenode { position: relative; padding: 0 0 16px; }
.chasenode-dot {
  position: absolute; left: -23px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--ink-raise);
  background: var(--slate-dim);
}
.chasenode-dot.blue { background: var(--blue); }
.chasenode-dot.amber { background: var(--amber); }
.chasenode-dot.orange { background: var(--orange); }
.chasenode-dot.red { background: var(--red); }
.chasenode.queued .chasenode-dot { box-shadow: 0 0 0 4px rgba(74, 164, 131, 0.22); }
.chasenode.past { opacity: 0.42; }

.chasenode-body {
  border: 1px solid var(--ink-line); border-radius: 6px;
  padding: 12px 14px; background: rgba(255, 255, 255, 0.014);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.chasenode.queued .chasenode-body {
  border-color: rgba(74, 164, 131, 0.42);
  background: rgba(74, 164, 131, 0.055);
}
.chasenode-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.chasenode-when {
  font-family: var(--mono); font-size: 0.79rem; font-weight: 600; color: #edf2f6;
  font-variant-numeric: tabular-nums;
}
.chasenode-flag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--green);
}
.chasenode-flag.past { color: var(--slate-dim); }
.chasenode-subject {
  font-size: 0.8rem; color: var(--slate); line-height: 1.5;
  margin-bottom: 11px; font-style: italic;
}
.chasenode-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.chasenode-actions .btn { text-decoration: none; }

/* the due date itself, marked on the same rail */
.chasedue { position: relative; padding: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.chasedue-dot {
  position: absolute; left: -26px; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--amber); background: var(--ink-raise);
}
.chasedue-dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--amber);
}
.chasedue-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--amber); font-weight: 600;
}
.chasedue-date { font-family: var(--mono); font-size: 0.76rem; color: var(--slate); }

.chasecheck {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 0.72rem; color: var(--slate-dim); font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.06em; margin-left: auto;
}
.chasecheck input { margin: 0; cursor: pointer; }

/* ── performance ledger ────────────────────────── */
.metricgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line);
  border-radius: 6px; overflow: hidden; margin: 14px 0;
}
.metriccell { background: var(--ink-raise); padding: 11px 12px; }
.metriclabel {
  display: block; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-dim); margin-bottom: 5px;
}
.metricvalue {
  font-family: var(--mono); font-size: 0.98rem; color: #edf2f6;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.tablewrap { overflow-x: auto; }
.perftable { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.perftable th {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--slate-dim); text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--ink-line); white-space: nowrap;
}
.perftable td {
  padding: 9px 10px; border-bottom: 1px solid var(--ink-line);
  font-family: var(--mono); font-variant-numeric: tabular-nums; color: #dce6ee; white-space: nowrap;
}
.perftable td:first-child { color: var(--slate); font-family: var(--body); }
.perftable tr:last-child td { border-bottom: 0; }
.perftable .baserow td { background: rgba(201, 123, 33, 0.07); color: var(--amber); }
.perftable .baserow td:first-child { color: var(--amber); }
.permo { font-size: 0.72em; color: var(--slate-dim); margin-left: 2px; }

.deltachip {
  display: inline-block; font-family: var(--mono); font-size: 0.66rem;
  font-weight: 600; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.02em;
}
.deltachip.up { color: var(--green); background: rgba(74, 164, 131, 0.14); }
.deltachip.down { color: var(--red); background: rgba(196, 85, 63, 0.14); }
.deltachip.flat { color: var(--slate-dim); background: rgba(142, 160, 178, 0.1); }

.integrityrow {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--ink-line); font-size: 0.82rem; line-height: 1.5;
}
.integrityrow:last-child { border-bottom: 0; }
.integrityrow span:first-child {
  font-family: var(--mono); font-weight: 700; flex-shrink: 0; width: 14px;
}
.integrityrow.ok span:first-child { color: var(--green); }
.integrityrow.warn span:first-child { color: var(--orange); }
.integrityrow.ok { color: var(--slate); }
.integrityrow.warn { color: #dce6ee; }

/* ── measured value (calculator ← ledger) ──────── */
.measuredbox {
  border: 1px solid rgba(74, 164, 131, 0.32);
  background: rgba(74, 164, 131, 0.055);
  border-radius: 6px; padding: 13px 15px; margin: 12px 0 16px;
}
.measuredhead {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--green); margin-bottom: 9px;
}
.measuredbox .calcrow { border-bottom-color: rgba(74, 164, 131, 0.18); }

/* ── closing call co-pilot ─────────────────────── */
.callfloor {
  border: 1px solid rgba(196, 85, 63, 0.35); background: rgba(196, 85, 63, 0.06);
  border-radius: 6px; padding: 14px 16px; margin-bottom: 16px;
}
.callfloor-head {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.callfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--ink-line); border: 1px solid var(--ink-line); border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.callfact { background: var(--ink-raise); padding: 11px 13px; }
.callfact span { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate-dim); margin-bottom: 5px; }
.callfact b { font-family: var(--mono); font-size: 0.92rem; color: var(--amber); font-variant-numeric: tabular-nums; }
/* Quoting exactly at your walk-away leaves nothing to concede, which is
   worth seeing before the client asks rather than after. */
.callfact-warn b { color: var(--orange); }
/* A tier priced under the floor the Console itself calls "never quote
   below this" has to look wrong, not merely be flagged in small print. */
.tiercard.below-floor { border-color: rgba(214, 106, 74, 0.55); }
.tiercard.below-floor .tierprice { color: var(--orange); }
.tier-floorflag { display: block; margin-top: 6px; font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.calllist { margin-bottom: 16px; }

.callphases { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.callphase { border: 1px solid var(--ink-line); border-radius: 6px; overflow: hidden; }
.callphase.done { border-color: rgba(74, 164, 131, 0.4); background: rgba(74, 164, 131, 0.05); }
.callphase-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; cursor: pointer; background: rgba(255,255,255,0.014);
}
.callphase.done .callphase-head { background: transparent; }
.callphase-head input { margin: 0; cursor: pointer; }
.callphase-n {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700; color: #1a0f02;
  background: var(--amber); width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.callphase.done .callphase-n { background: var(--green); }
.callphase-name { font-weight: 600; color: #edf2f6; font-size: 0.9rem; }
.callphase-mins { font-family: var(--mono); font-size: 0.68rem; color: var(--slate-dim); }
.callphase-purpose { font-size: 0.78rem; color: var(--slate); margin-left: auto; }
.callphase-body { padding: 4px 14px 14px 44px; }
.callphase-body p { font-size: 0.82rem; color: var(--slate); line-height: 1.55; margin-bottom: 7px; }
.callscript {
  font-family: var(--display); font-size: 0.94rem; line-height: 1.65; color: #e8eef4;
  background: rgba(0,0,0,0.22); border-left: 2px solid var(--amber);
  padding: 13px 15px; border-radius: 0 5px 5px 0; white-space: pre-wrap; margin: 10px 0;
}
@media (max-width: 640px) { .callphase-purpose { margin-left: 0; flex-basis: 100%; } }

/* ── storage alarm ─────────────────────────────── */
.storagealarm {
  margin: 0 clamp(18px, 3vw, 38px) 18px;
  border-radius: 7px;
  padding: 16px 18px;
  border: 1px solid var(--red);
  background: linear-gradient(165deg, rgba(196, 85, 63, 0.16), rgba(196, 85, 63, 0.06));
  box-shadow: 0 12px 30px -18px rgba(196, 85, 63, 0.7);
}
.storagealarm.warn {
  border-color: var(--orange);
  background: linear-gradient(165deg, rgba(217, 138, 43, 0.15), rgba(217, 138, 43, 0.05));
  box-shadow: 0 12px 30px -18px rgba(217, 138, 43, 0.6);
}
.storagealarm-head {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffd9d0;
  margin-bottom: 8px;
}
.storagealarm.warn .storagealarm-head { color: #f5dcb8; }
.storagealarm p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #e8d5d0;
  margin-bottom: 12px;
  max-width: 88ch;
}
.storagealarm.warn p { color: #e6dccb; }
.storagealarm.critical { animation: alarmIn 0.45s var(--ease); }
@keyframes alarmIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── save badge — the continuous "you are safe" signal ── */
.appbar-right { display: flex; align-items: center; margin-left: auto; }
.savebadge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  padding: 6px 11px; border-radius: 20px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.savebadge .savedot { font-size: 0.62rem; line-height: 1; }
.savebadge.good { border-color: rgba(74, 164, 131, 0.4); }
.savebadge.good .savedot { color: var(--green); }
.savebadge.good .savetext { color: #9fd3bf; }
.savebadge.pending { border-color: rgba(217, 138, 43, 0.45); }
.savebadge.pending .savedot { color: var(--orange); animation: savePulse 1s ease-in-out infinite; }
.savebadge.pending .savetext { color: #e8c48f; }
.savebadge.bad {
  border-color: var(--red);
  background: rgba(196, 85, 63, 0.15);
}
.savebadge.bad .savedot { color: var(--red); animation: savePulse 0.8s ease-in-out infinite; }
.savebadge.bad .savetext { color: #ffb3a3; font-weight: 600; }
@keyframes savePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.savebadge .savemirror {
  font-size: 0.6rem; color: var(--slate-dim);
  border-left: 1px solid var(--ink-line); padding-left: 7px;
}
.savebadge .savebackup {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
  background: var(--amber); color: #1a0f02; border: 0;
  border-radius: 3px; padding: 3px 7px; margin-left: 2px;
}
.savebadge .savebackup:hover { filter: brightness(1.08); }
@media (max-width: 720px) { .savebadge .savemirror { display: none; } }

/* ── getting started ───────────────────────────── */
.gs {
  background: linear-gradient(165deg, rgba(201, 123, 33, 0.10), rgba(201, 123, 33, 0.02)), var(--ink-raise);
  border: 1px solid rgba(201, 123, 33, 0.4);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 0 var(--amber) inset, 0 20px 44px -24px rgba(0, 0, 0, 0.75);
}
.gs-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px; }
.gs-eyebrow {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--amber);
}
.gs-count { font-family: var(--mono); font-size: 0.74rem; color: var(--slate-dim); }

.gs-next { margin: 20px 0 4px; }
.gs-next-label {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--slate-dim); margin-bottom: 6px;
}
.gs-next-title {
  font-family: var(--display); font-size: 1.35rem; line-height: 1.2;
  color: #f5f1e8; margin-bottom: 9px;
}
.gs-next-why {
  font-size: 0.87rem; line-height: 1.62; color: var(--slate);
  max-width: 68ch; margin-bottom: 15px;
}

.gs-list { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--ink-line); }
.gs-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 0; font-size: 0.84rem; color: var(--slate-dim);
}
.gs-tick {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--ink-line); display: flex; align-items: center;
  justify-content: center; font-size: 0.66rem; color: transparent;
}
.gs-item.done { color: var(--slate); }
.gs-item.done .gs-tick { background: var(--green); border-color: var(--green); color: #0a1620; }
.gs-item.done .gs-label { text-decoration: line-through; text-decoration-color: rgba(142,160,178,0.4); }
.gs-item.next { color: #edf2f6; }
.gs-item.next .gs-tick { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(201, 123, 33, 0.18); }
.gs-label { flex: 1; }
.gs-jump {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; background: transparent; color: var(--slate-dim);
  border: 1px solid var(--ink-line); border-radius: 3px; padding: 3px 9px; cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.gs-jump:hover { color: var(--amber); border-color: var(--amber); }
.gs-foot { font-size: 0.78rem; color: var(--slate-dim); margin-top: 16px; line-height: 1.55; }

/* ── document library ──────────────────────────── */
.doclib { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.doclib-row {
  border: 1px solid var(--ink-line); border-left-width: 3px; border-radius: 6px;
  padding: 13px 15px; background: rgba(255, 255, 255, 0.014);
}
.doclib-row.role-generates { border-left-color: var(--amber); }
.doclib-row.role-runs { border-left-color: var(--green); }
.doclib-row.role-feeds { border-left-color: var(--blue); }
.doclib-row.role-reference { border-left-color: var(--ink-line); }
.doclib-main { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.doclib-id {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--slate-dim); background: rgba(255,255,255,0.04);
  padding: 2px 6px; border-radius: 3px;
}
.doclib-title { font-weight: 600; font-size: 0.9rem; color: #edf2f6; }
.doclib-role {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.09em;
  text-transform: uppercase; margin-left: auto; white-space: nowrap;
}
.role-generates .doclib-role { color: var(--amber); }
.role-runs .doclib-role { color: var(--green); }
.role-reference .doclib-role { color: var(--slate-dim); }
.doclib-note { font-size: 0.79rem; line-height: 1.55; color: var(--slate); margin-bottom: 10px; }
.doclib-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doclib-foot code {
  font-family: var(--mono); font-size: 0.63rem; color: var(--slate-dim);
  background: rgba(0,0,0,0.22); padding: 3px 7px; border-radius: 3px;
}
.doclib-jump {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em;
  text-transform: uppercase; margin-left: auto;
  background: transparent; color: var(--slate-dim);
  border: 1px solid var(--ink-line); border-radius: 3px; padding: 3px 9px; cursor: pointer;
}
.doclib-jump:hover { color: var(--amber); border-color: var(--amber); }

/* ── example-client marker on the working bar ──── */
.clientbar-demo {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #1a0f02; background: var(--gold);
  padding: 3px 9px; border-radius: 20px; flex-shrink: 0;
}
.clientbar-demo-go {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.05em;
  background: transparent; color: var(--amber);
  border: 1px solid var(--amber); border-radius: 20px;
  padding: 4px 12px; cursor: pointer; flex-shrink: 0;
  transition: background 0.2s var(--ease);
}
.clientbar-demo-go:hover { background: rgba(201, 123, 33, 0.14); }

/* the field a getting-started step just sent you to */
.gs-flash {
  animation: gsFlash 1.8s var(--ease);
}
@keyframes gsFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 123, 33, 0); }
  15%      { box-shadow: 0 0 0 4px rgba(201, 123, 33, 0.45); }
  70%      { box-shadow: 0 0 0 4px rgba(201, 123, 33, 0.25); }
}

/* ── sticky-header scroll offset ────────────────
   The tab bar and the working-on bar are both sticky and together cover
   the first ~98px of the viewport. Anything the page scrolls to has to
   clear them, or it arrives underneath: invisible, and worse, unclickable,
   because the click lands on the bar sitting over it. :where() keeps the
   specificity at zero so this never fights a more specific rule. */
:where(input, select, textarea, button, a, .panel, details, summary,
       h2, h3, .gs, .gs-next, .doclib-row, .callphase, .chasenode, tr) {
  scroll-margin-top: 118px;
}

/* ── demonstration mode ─────────────────────────────────────────────
   The demo Console carries a band across the top that never scrolls
   away, because the one thing a buyer must not do is mistake fictional
   clients for their own. Everything sticky below it is pushed down by
   exactly the band's height, so the tab bar and the client bar keep
   working the way they do in the real Console. */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 clamp(18px, 3vw, 38px);
  background: linear-gradient(90deg, #6b4a12, #8a5f18 45%, #6b4a12);
  border-bottom: 1px solid rgba(255, 214, 138, 0.35);
  color: #ffe7bb;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.demo-banner b { color: #fff4e0; letter-spacing: 0.12em; }
.demo-banner span { text-transform: none; letter-spacing: 0.02em; font-size: 0.72rem; opacity: 0.92; }
.demo-banner .demo-link {
  margin-left: auto; color: #ffe7bb; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255, 214, 138, 0.45); border-radius: 5px;
  padding: 4px 11px; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.demo-banner .demo-link:hover { background: rgba(0, 0, 0, 0.3); }
.demo-banner .demo-reset {
  background: rgba(0, 0, 0, 0.28); color: #ffe7bb;
  border: 1px solid rgba(255, 214, 138, 0.4); border-radius: 5px;
  padding: 3px 10px; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.demo-banner .demo-reset:hover { background: rgba(0, 0, 0, 0.45); }
body.demo .tabbar { top: 38px; }
body.demo .clientbar { top: 86px; }
body.demo :where(input, select, textarea, button, .field, .panel, [id]) { scroll-margin-top: 156px; }
@media (max-width: 720px) {
  .demo-banner { height: auto; padding: 7px clamp(12px, 3vw, 20px); flex-wrap: wrap; gap: 6px; }
  body.demo .tabbar, body.demo .clientbar { position: static; }
}
@media print { .demo-banner { display: none; } }
@media print { :where(*) { scroll-margin-top: 0; } }

/* ═══════════════════════════════════════════════════════════════════
   THE GUIDE

   The first tab, and the only one that is not a tool. Everything else
   in this Console assumes you already know what you are looking at;
   this is where that assumption gets earned. It ships with the paid
   Console and is stripped out of the demonstration by build-demo.js.

   It reads like a page rather than a panel on purpose — long measure,
   real headings, room to breathe. Somebody reading this is learning,
   not working, and a dashboard layout would fight that.
   ═══════════════════════════════════════════════════════════════════ */
#tab-guide { max-width: 1080px; margin-inline: auto; }

.gd-hero {
  padding: 46px 0 34px;
  border-bottom: 1px solid var(--ink-line);
  margin-bottom: 44px;
}
.gd-kicker {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 18px;
}
.gd-hero h1 {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.1; margin-bottom: 20px;
}
.gd-hero p { max-width: 64ch; font-size: 1.08rem; line-height: 1.68; color: var(--slate); }
.gd-hero p + p { margin-top: 14px; }

/* the contents rail */
.gd-toc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line);
  border-radius: 6px; overflow: hidden; margin-bottom: 52px;
}
.gd-toc a {
  display: block; padding: 15px 17px; background: var(--ink-raise);
  text-decoration: none; color: inherit; transition: background 0.16s var(--ease);
}
.gd-toc a:hover { background: #16293a; }
.gd-toc b { display: block; font-size: 0.94rem; margin-bottom: 3px; }
.gd-toc span { font-size: 0.79rem; color: var(--slate-dim); line-height: 1.45; display: block; }
.gd-toc .num {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em;
  color: var(--amber-ink); display: block; margin-bottom: 6px;
}
.gd-toc a.soon { opacity: 0.45; pointer-events: none; }

/* a chapter */
.gd-sec { margin-bottom: 68px; scroll-margin-top: 20px; }
.gd-sec > h2 {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.015em;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.14; margin-bottom: 8px;
}
.gd-sec .gd-sub { color: var(--slate-dim); font-size: 0.95rem; margin-bottom: 30px; }
.gd-sec h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.35rem;
  margin: 38px 0 12px; letter-spacing: -0.01em;
}
.gd-sec h4 {
  font-size: 0.97rem; font-weight: 600; margin: 26px 0 8px; color: #e8eef4;
}
.gd-sec p { max-width: 68ch; line-height: 1.72; margin-bottom: 13px; }
.gd-sec ul, .gd-sec ol { max-width: 68ch; margin: 0 0 15px 21px; line-height: 1.72; }
.gd-sec li { margin-bottom: 8px; }
.gd-sec strong { color: #f2f6f9; font-weight: 600; }

/* the aside that carries the reason behind a rule */
.gd-note {
  border-left: 2px solid var(--amber); background: rgba(201, 123, 33, 0.06);
  padding: 16px 20px; margin: 22px 0; border-radius: 0 4px 4px 0; max-width: 70ch;
}
.gd-note b {
  display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 8px; font-weight: 500;
}
.gd-note p { margin-bottom: 0; font-size: 0.94rem; }
.gd-note p + p { margin-top: 10px; }
.gd-warn { border-left-color: var(--red); background: rgba(196, 85, 63, 0.07); }
.gd-warn b { color: #e08a78; }

/* a worked example, shown as paper */
.gd-eg {
  background: var(--paper); color: var(--paper-ink); border-radius: 4px;
  padding: 20px 24px; margin: 20px 0; max-width: 70ch;
  font-family: var(--display); line-height: 1.66;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,0.7);
}
.gd-eg .lbl {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.17em;
  text-transform: uppercase; color: #8b9aa6; display: block; margin-bottom: 11px;
  border-bottom: 1px solid var(--paper-line); padding-bottom: 8px;
}
.gd-eg mark { background: #f7e1bd; color: inherit; padding: 0 2px; }
.gd-eg .bad { color: #a33; text-decoration: line-through; }

/* field-by-field table */
.gd-tbl { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.88rem; }
.gd-tbl th {
  text-align: left; font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--slate-dim); font-weight: 500;
  padding: 0 14px 9px 0; border-bottom: 1px solid var(--ink-line);
}
.gd-tbl td {
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--ink-line);
  vertical-align: top; line-height: 1.6;
}
.gd-tbl td:first-child { color: #e8eef4; font-weight: 500; white-space: nowrap; }
.gd-tbl code {
  font-family: var(--mono); font-size: 0.82em; color: var(--amber);
  background: rgba(201,123,33,0.12); padding: 0.1em 0.35em; border-radius: 3px;
}
.gd-scroll { overflow-x: auto; }

/* the step strip at the end of a chapter */
.gd-done {
  border: 1px solid var(--green); border-radius: 5px; padding: 18px 22px;
  background: rgba(63, 154, 120, 0.07); margin-top: 34px; max-width: 70ch;
}
.gd-done b { display: block; margin-bottom: 7px; color: var(--green); }
.gd-done p { margin-bottom: 0; font-size: 0.94rem; }

@media (max-width: 720px) {
  .gd-hero { padding-top: 28px; }
  .gd-sec { margin-bottom: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE GUIDE, LAID OUT

   Nineteen thousand words is a book, and a book needs to be navigable
   from the middle. The grid at the top orients someone arriving; this
   rail is for the reader already forty minutes in who wants chapter
   three without scrolling back past chapter seven.

   The rail sticks below the two bars that are already sticky (the tab
   bar at 0 and the client bar at 48), highlights whichever chapter is
   on screen, and folds into a horizontal strip on narrow screens where
   a column would eat the page.
   ═══════════════════════════════════════════════════════════════════ */

/* how far down the page the fixed chrome reaches */
#tab-guide { --gd-chrome: 104px; }

/* reading progress */
.gd-progress {
  position: sticky; top: var(--gd-chrome); z-index: 12;
  height: 2px; margin: 0 0 -2px; background: transparent; pointer-events: none;
}
.gd-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--amber), #e0a95c);
  transition: width 0.12s linear;
}

/* ── the two-column shell ───────────────────────────── */
.gd-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 0 52px;
  align-items: start;
}
.gd-body { min-width: 0; }

/* The rail travels the whole page.

   position: sticky only moves an element within its own containing block,
   and the shell is a grid with align-items: start, which shrinks each
   column to its content. The rail was 622px tall inside a 61,907px page,
   so it stuck for about one screen and then scrolled away with everything
   else. Stretching just this column gives the sticky inner the full height
   of the page to travel down. */
.gd-rail { align-self: stretch; }

.gd-rail-inner {
  position: sticky; top: calc(var(--gd-chrome) + 18px);
  max-height: calc(100vh - var(--gd-chrome) - 40px);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px;
}
.gd-rail-head {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--slate-dim);
  padding-bottom: 11px; margin-bottom: 11px;
  border-bottom: 1px solid var(--ink-line);
}
.gd-rail-nav { display: flex; flex-direction: column; gap: 1px; }
.gd-rail-nav a {
  position: relative;
  display: block; padding: 9px 12px 9px 15px;
  font-size: 0.865rem; line-height: 1.35; text-decoration: none;
  color: var(--slate); border-radius: 5px;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.gd-rail-nav a span {
  display: block; font-family: var(--mono); font-size: 0.575rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate-dim); margin-bottom: 3px;
  transition: color 0.18s var(--ease);
}
/* the marker that travels down the rail with you */
.gd-rail-nav a::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px; background: transparent;
  transition: background 0.18s var(--ease), top 0.18s var(--ease), bottom 0.18s var(--ease);
}
.gd-rail-nav a:hover { color: #e8eef4; background: rgba(255, 255, 255, 0.035); }
.gd-rail-nav a.here { color: #f2f6f9; background: rgba(201, 123, 33, 0.09); }
.gd-rail-nav a.here span { color: var(--amber); }
.gd-rail-nav a.here::before { background: var(--amber); top: 5px; bottom: 5px; }

/* ── the contents grid, given more presence ─────────── */
.gd-toc a { position: relative; }
.gd-toc a::after {
  content: "→"; position: absolute; right: 15px; bottom: 13px;
  font-size: 0.82rem; color: var(--amber);
  opacity: 0; transform: translateX(-5px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.gd-toc a:hover::after { opacity: 1; transform: none; }
.gd-toc a:hover b { color: #fff; }
.gd-toc b { transition: color 0.18s var(--ease); }

/* ── chapters ───────────────────────────────────────── */
.gd-sec { scroll-margin-top: calc(var(--gd-chrome) + 16px); }
.gd-sec > h2 {
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-line);
}
.gd-sec .gd-sub { margin-top: 12px; }

/* a chapter arriving on screen */
/* The hidden state is switched on by JavaScript, never by the stylesheet.
   Written the other way round, a page whose whole job is to be read would
   render blank if the observer never fired, which is exactly what happened
   the first time: the hero and the contents grid fill the opening screen,
   so no chapter was on screen to trigger anything. */
@media (prefers-reduced-motion: no-preference) {
  .gd-shell.reveal .gd-sec { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .gd-shell.reveal .gd-sec.seen { opacity: 1; transform: none; }
}

/* ── narrow screens: the rail lies down ─────────────── */
@media (max-width: 1040px) {
  .gd-shell { display: block; }
  .gd-rail {
    position: sticky; top: calc(var(--gd-chrome) - 2px); z-index: 11;
    margin: 0 0 26px;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
  }
  .gd-rail-inner {
    position: static; max-height: none; overflow: visible; padding: 0 0 10px;
  }
  .gd-rail-head { display: none; }
  .gd-rail-nav {
    flex-direction: row; gap: 6px;
    overflow-x: auto; padding: 10px 2px 4px;
    scrollbar-width: none;
  }
  .gd-rail-nav::-webkit-scrollbar { display: none; }
  .gd-rail-nav a {
    flex: none; white-space: nowrap; padding: 7px 13px;
    border: 1px solid var(--ink-line); border-radius: 20px; font-size: 0.8rem;
  }
  .gd-rail-nav a span { display: none; }
  .gd-rail-nav a::before { display: none; }
  .gd-rail-nav a.here { border-color: var(--amber); }
}

@media print {
  .gd-rail, .gd-progress { display: none; }
  .gd-shell { display: block; }
  .gd-sec { opacity: 1; transform: none; }
}

/* The invitation to open the demonstration is pinned right and refuses to
   wrap, which is correct on a desk and ten pixels too wide on a phone: the
   working Console scrolled sideways for anyone who opened it on a handset
   before creating their first client. On a narrow screen it drops the pin
   and is allowed to break. */
@media (max-width: 560px) {
  .clientbar-link { margin-left: 0; white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE REMINDER EDITOR

   Five emails, editable, with the reasoning beside them. The layout has
   one job beyond looking tidy: keep the Drafting Note, the draft and the
   preview all on screen at the same time, so that changing a sentence
   and seeing what it costs are the same glance.
   ═══════════════════════════════════════════════════════════════════ */
.remhead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--ink-line);
}
.remhead b { display: block; font-size: 0.95rem; margin-bottom: 3px; }
.remhead span { font-size: 0.82rem; color: var(--slate-dim); }

/* the schedule */
.remsched { margin-bottom: 20px; }
.remsched-head {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--slate-dim); margin-bottom: 10px;
}
.remsched-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 8px; }
.remoff {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 11px; border: 1px solid var(--ink-line); border-radius: 6px;
  background: var(--ink-raise);
}
.remoff.moved { border-color: var(--amber); }
.remoff > span { font-size: 0.72rem; color: var(--slate); line-height: 1.25; }
.remoff input {
  width: 100%; padding: 5px 7px; font-family: var(--mono); font-size: 0.86rem;
  text-align: center;
}
.remoff em { font-family: var(--mono); font-size: 0.62rem; color: var(--slate-dim); font-style: normal; text-align: center; }

/* one stage */
.remlist { display: flex; flex-direction: column; gap: 8px; }
.remrow { border: 1px solid var(--ink-line); border-radius: 7px; overflow: hidden; }
.remrow.open { border-color: var(--amber-ink); }
.remrow-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer;
  background: var(--ink-raise); transition: background 0.16s var(--ease);
}
.remrow-head:hover { background: #16293a; }
.remsubj {
  flex: 1; min-width: 0; font-size: 0.82rem; color: var(--slate-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.remchev { color: var(--slate-dim); font-size: 0.8rem; }
.remtag {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(217, 160, 43, 0.4); border-radius: 3px; padding: 2px 6px;
  white-space: nowrap;
}
.remtag.kit { color: var(--slate-dim); border-color: var(--ink-line); }

.rembody { padding: 16px 15px 18px; border-top: 1px solid var(--ink-line); }
.remnote {
  border-left: 2px solid var(--amber); background: rgba(201, 123, 33, 0.06);
  padding: 12px 15px; margin-bottom: 15px; border-radius: 0 4px 4px 0;
  font-size: 0.86rem; line-height: 1.62; color: var(--amber-soft);
}
.remnote b {
  display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 7px; font-weight: 500;
}

.remfields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.remfields > span { font-size: 0.74rem; color: var(--slate-dim); margin-right: 2px; }
/* Each button says what the field is and what it turns into. It used to
   say {{amount}}, which is programming leaking into a tool for people who
   do not program. */
.remfield {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  cursor: pointer; text-align: left;
  color: var(--amber-soft); background: rgba(201, 123, 33, 0.09);
  border: 1px solid rgba(217, 160, 43, 0.3); border-radius: 5px; padding: 5px 10px;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.12s var(--ease);
}
.remfield b { font-size: 0.75rem; font-weight: 600; color: var(--amber); }
.remfield em {
  font-family: var(--mono); font-size: 0.62rem; font-style: normal; color: var(--slate-dim);
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.remfield:hover { background: rgba(201, 123, 33, 0.2); border-color: var(--amber); }
.remfield.just { transform: scale(0.94); border-color: var(--green); background: rgba(63, 154, 120, 0.18); }



.remlabel {
  display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--slate-dim); margin: 12px 0 5px;
}
.remsubject { width: 100%; }

.remwarn {
  margin-top: 12px; padding: 11px 14px; border-radius: 5px; font-size: 0.84rem; line-height: 1.58;
  border-left: 2px solid var(--slate-dim); background: rgba(255, 255, 255, 0.03);
}
.remwarn b { display: block; margin-bottom: 4px; }
.remwarn.bad { border-left-color: var(--red); background: rgba(196, 85, 63, 0.09); color: #eab3a6; }
.remwarn.keep { border-left-color: var(--amber); background: rgba(201, 123, 33, 0.08); color: var(--amber-soft); }
.remwarn.ok { border-left-color: var(--green); background: rgba(63, 154, 120, 0.08); color: #a9d8c5; }

.rempreview {
  margin-top: 15px; background: var(--paper); color: var(--paper-ink);
  border-radius: 5px; padding: 16px 18px;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.7);
}
.rempreview-head {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #8b9aa6; border-bottom: 1px solid var(--paper-line); padding-bottom: 8px; margin-bottom: 11px;
}
.rempreview b { display: block; font-size: 0.94rem; margin-bottom: 9px; }
.rempreview pre {
  white-space: pre-wrap; font-family: var(--body); font-size: 0.88rem; line-height: 1.62; margin: 0;
}
.rempreview .ph { background: #2a2a2a; color: #2a2a2a; border-radius: 2px; }

@media (max-width: 560px) {
  .remhead { flex-direction: column; gap: 10px; }
  .remsubj { display: none; }
}
@media print { #reminderEditorPanel { display: none; } }

/* The message box, plain and reliable. */
.rembodyinput {
  width: 100%; font-family: var(--mono); font-size: 0.82rem; line-height: 1.6;
  resize: vertical;
}

/* The one line that explains the brackets, in the place someone is about
   to need it rather than in a document they would have to go and find. */
.remhow {
  border-left: 2px solid var(--blue, #4a86b8);
  background: rgba(74, 134, 184, 0.07);
  padding: 13px 16px; margin: 0 0 14px; border-radius: 0 4px 4px 0;
  max-width: 70ch;
}
.remhow p { font-size: 0.86rem; line-height: 1.65; color: var(--slate); margin: 0; }
.remhow p + p { margin-top: 9px; }
.remhow b { color: #e8eef4; }
.rembracket {
  font-family: var(--mono); font-size: 0.9em;
  color: var(--amber); background: rgba(201, 123, 33, 0.13);
  padding: 1px 5px; border-radius: 3px;
}

/* On the page, not behind a disclosure. */
.remadv {
  margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--ink-line); border-radius: 6px;
  background: rgba(255, 255, 255, 0.018);
}
.remadv-head {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--slate-dim); margin-bottom: 8px;
}
.remadv > p { font-size: 0.8rem; color: var(--slate-dim); margin: 0 0 11px; line-height: 1.6; max-width: 66ch; }

/* ─────────────────────────────────────────────────────────────────
   THE ANSWER STAYS ON THE SAME SCREEN AS THE QUESTION

   Every working tab is a tall form on the left and the panels that
   respond to it on the right, and `.split` sets `align-items: start`.
   That pins the right column at the top of the page, so scrolling
   three thousand pixels down the form leaves the response to what you
   just typed three thousand pixels above you.

   Measured across the tabs, nine of eleven control-and-answer pairs
   had the answer outside the viewport. Drag the margin slider and the
   Reality check fires 2,676px away. Change the hours per client and
   the five figures redraw 1,999px away. You are told, and you are not
   there to hear it.

   .paperwrap already sticks and its bottom is reachable, so it is left
   exactly as it was. This covers the columns that never stuck at all:
   the calculator's output, the audit summary, the roster panel, the
   scope ledger and the performance trend.

   Taller than the viewport, a column scrolls inside itself rather than
   pinning its head and hiding its feet.
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 921px) {
  .split > :last-child:not(.paperwrap) {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 126px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* A sticky pane with its own scrollbar reads as a dead edge without
     something to say it is scrollable. */
  .split > :last-child:not(.paperwrap)::-webkit-scrollbar { width: 9px; }
  .split > :last-child:not(.paperwrap)::-webkit-scrollbar-thumb {
    background: var(--ink-line); border-radius: 5px;
  }
  .split > :last-child:not(.paperwrap)::-webkit-scrollbar-track { background: transparent; }
}

/* Printing lays the page out flat: nothing sticks, nothing clips. */
@media print {
  .split > :last-child { position: static !important; max-height: none !important; overflow: visible !important; }
}

/* The Audit is laid out the other way round from every other tab: the
   money summary is the left column and the thirty-two checks are the
   right one. The rule above therefore stuck the wrong half. Here the
   summary sticks and the checklist scrolls past it, which is the way
   round a person actually works: mark a row, watch the total move. */
@media (min-width: 921px) {
  #tab-audit .split > :first-child {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 126px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #tab-audit .split > :last-child {
    position: static;
    max-height: none;
    overflow: visible;
  }

  /* The scope ledger's running totals sit above the split, so logging a
     request at the bottom of the form moved four numbers the person
     could not see. Short enough to keep on screen without cost. */
  #tab-scope #scopeSummaryPanel {
    position: sticky;
    top: 106px;
    z-index: 8;
  }
}

/* The Reality check, repeated under the input that caused it. Same words
   as the panel, in the one place a person is certainly looking. */
.inline-flag {
  margin: -4px 0 14px;
  padding: 9px 12px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--orange);
  background: rgba(214, 138, 46, 0.09);
  border-left: 2px solid var(--orange);
  border-radius: 0 4px 4px 0;
}
.inline-flag::before {
  content: "Reality check";
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 3px;
}

/* The contract's version of the same note. Amber for a cost you chose,
   because unlike the calculator's reality flags most of these are
   deliberate trades rather than mistakes. */
.inline-flag-contract::before { content: "Contract strength"; }
.checkfield + .inline-flag-contract { margin-top: 4px; }


/* ─────────────────────────────────────────────────────────────────
   THE DOCUMENT SCROLLS INSIDE ITS OWN PANE

   The paper had no scroll container of its own, so when focusing a field
   asked the Console to jump the preview to the matching clause, the only
   scroll available was the window's. It moved the whole page, and since
   both columns live on that page, the form field being typed into went
   with it. Measured: clicking Monthly retainer moved the page 511px and
   left the field at 4px, underneath the sticky header.

   Giving the paper its own scroll keeps the jump inside the paper. The
   window does not move, the cursor stays where it was, and the value
   appears in the clause while it is being typed.

   The wrapper becomes the pane and the document is the only part of it
   that scrolls, so Export PDF, Copy plain text and the empty-field guard
   stay where you can reach them instead of scrolling away with the text.

   Only the two tabs that show a full document. The Setup letterhead is a
   .paper.mini and is deliberately left alone.
   ───────────────────────────────────────────────────────────────── */
/* The whole right column becomes one pane with its own scrollbar.

   Two earlier shapes were wrong. Capping the wrapper without giving it a
   scroll pushed the ninety-day schedule and its .ics button out of reach.
   Capping only the paper left the wrapper taller than the screen, and a
   tall sticky element cannot be scrolled past: anything below the fold
   inside it is unreachable, which is the trap that swallowed the same
   button a second time.

   One scrollable pane holds everything: the export buttons, the guard, the
   document and the schedule panel underneath it. Everything is reachable,
   and a jump to a clause scrolls this pane rather than the page. */
@media (min-width: 921px) {
  #tab-contract .paperwrap,
  #tab-invoices .paperwrap {
    max-height: calc(100vh - 126px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* One scrollbar, not two. .paper carries its own max-height of 78vh from
     the days when it was the only thing that could scroll here. Inside the
     pane that would nest a second scroller within the first, which is a
     horrible thing to put a mouse wheel into. */
  #tab-contract .paperwrap > .paper,
  #tab-invoices .paperwrap > .paper {
    max-height: none;
    overflow: visible;
  }
  /* Export PDF and Copy plain text pin to the top of the pane rather than
     scrolling away with the document. One scrollbar, and the two buttons
     you reach for most are always where you left them. */
  #tab-contract .paperwrap > .btnrow,
  #tab-invoices .paperwrap > .btnrow {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--ink);
    padding: 6px 0 8px;
    margin-top: 0;
  }
  #tab-contract .paperwrap > .guardbar,
  #tab-invoices .paperwrap > .guardbar {
    position: sticky;
    top: 44px;
    z-index: 2;
  }
  #tab-contract .paperwrap::-webkit-scrollbar,
  #tab-invoices .paperwrap::-webkit-scrollbar { width: 10px; }
  #tab-contract .paperwrap::-webkit-scrollbar-thumb,
  #tab-invoices .paperwrap::-webkit-scrollbar-thumb {
    background: var(--paper-line); border-radius: 5px;
  }
  #tab-contract .paperwrap::-webkit-scrollbar-track,
  #tab-invoices .paperwrap::-webkit-scrollbar-track { background: transparent; }
}

/* Printing lays it flat: no pane, no clipping, no scrollbar. */
@media print {
  .paperwrap { display: block !important; max-height: none !important; overflow: visible !important; }
  .paper { overflow: visible !important; max-height: none !important; }
}

/* The issuer contact and tax line, under the name and address. */
.doc-contact {
  font-family: var(--body); font-size: 0.78rem;
  color: #55636e; margin: -6px 0 16px; line-height: 1.55;
}


/* ─────────────────────────────────────────────────────────────────
   PAID, BUT SOMETHING IS STILL SCHEDULED

   This panel carries two facts that pull opposite ways. The money
   arrived, which is the best news in the application. And a chaser is
   still queued in the person's own mail client, which is urgent and
   which only they can undo.

   So it opens green, because the first thing you should feel is that
   you were paid, and the list underneath is set in the monospaced face
   the rest of the Console uses for dates and figures: this is a list to
   act from, one line per message to go and delete, not prose to read.

   It replaced a .note, which is the warm box built for the printed
   page. On a dark panel it looked like something had gone wrong, and
   the heading ran straight into the first stage with no break at all.
   ───────────────────────────────────────────────────────────────── */
.cancelqueue {
  border: 1px solid var(--green);
  border-radius: 7px;
  background: rgba(63, 154, 120, 0.07);
  overflow: hidden;
  margin: 4px 0 2px;
}

.cancelqueue-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 17px;
  background: rgba(63, 154, 120, 0.12);
  border-bottom: 1px solid rgba(63, 154, 120, 0.28);
}
.cancelqueue-paid {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  flex: none;
}
.cancelqueue-count {
  font-size: 0.87rem;
  color: #e8eef4;
}

.cancelqueue-list {
  list-style: none;
  margin: 0;
  padding: 6px 17px 10px;
}
.cancelqueue-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.85rem;
}
.cancelqueue-list li:last-child { border-bottom: 0; }
.cancelqueue-list li span { color: #e8eef4; }
.cancelqueue-list li b {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--amber);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cancelqueue-why {
  font-size: 0.8rem;
  color: var(--slate);
  line-height: 1.6;
  margin: 0;
  padding: 4px 17px 14px;
  max-width: 62ch;
}
.cancelqueue .btnrow { padding: 0 17px 16px; margin: 0; }

/* Who made this, on the application and never on the paper.

   A contract or an invoice carries the buyer's business and nobody else's;
   their client must never see who wrote the template. So this lives above
   the tabs, and the .no-print on it keeps it out of any export as well. */
.madeby {
  font-family: var(--body);
  font-size: 0.73rem;
  color: var(--slate-dim);
  margin-top: 5px;
  letter-spacing: 0.01em;
}
.madeby b { color: var(--slate); font-weight: 600; letter-spacing: 0.04em; }
.madeby a { color: var(--amber); text-decoration: none; }
.madeby a:hover { text-decoration: underline; }

.aboutrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px;
}
.aboutrow .muted { font-size: 0.8rem; }

.gd-sign { border-left-color: var(--amber); }
.gd-sign a { color: var(--amber); }

/* Evidence, root cause and fix, on a failing check. Three lines of prose
   that turn an asserted number into a finding somebody can act on. */
.auditwhy { display: flex; flex-direction: column; gap: 5px; grid-column: 1 / -1; margin: 6px 0 2px; }
.auditwhy input { font-size: 0.82rem; padding: 5px 8px; }

/* The five rules the objection scripts are all applications of. They
   were in the source document and nowhere in the Console, and two of
   them appeared in no other form anywhere in the product. */
.ruleslist { margin: 0; padding-left: 22px; }
.ruleslist li { margin-bottom: 11px; line-height: 1.6; }
.ruleslist b { color: var(--amber); }