/* ==========================================================================
   SproutSage admin — the whole stylesheet.
   Compiled into the binary (`include_str!`) and served at /admin/style.css.

   DIRECTION: "paper and evergreen". A warm neutral ground rather than a cold
   grey one, near-black ink, hairline borders, and a single confident evergreen
   as the only brand colour — it is the wordmark, the links and the primary
   button, and nothing else. Sync states are deliberately *outside* that accent
   so a green pill can never be mistaken for a brand flourish: idle is quiet
   neutral, syncing is blue, pending is amber, error is clay. Type is an
   editorial serif for titles and the wordmark, a plain grotesque for the UI,
   and a mono reserved for machine facts — ids, timestamps, counts and the
   small uppercase column labels.

   No gradients, no shadows, no rounded-everything, no icon fonts, no emoji.

   CONTENTS
     1  Tokens (light)
     2  Tokens (dark)
     3  Reset and base
     4  Layout: banner, masthead, main
     5  Type: titles, eyebrows, micro-labels
     6  Cards and sections
     7  Tables
     8  Pills and chips
     9  Forms, buttons, focus
    10  Tenant bar
    11  The folder picker
    12  Empty states, notes, footers
    13  Source data: extraction pills, tombstones, rendered bodies
   ========================================================================== */

/* --------------------------------------------------------------------------
   1  Tokens (light)
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces: warm, not grey. The page is paper, a card is a fresh sheet. */
  --ground: #f4f2ee;
  --surface: #fcfbf8;
  --surface-sunk: #efedE7;

  /* Ink */
  --ink: #191b1a;
  --ink-soft: #52585a;
  --ink-faint: #868c8c;

  /* Hairlines. --line is every border; --line-strong is a divider that has to
     be seen from across the room. */
  --line: #e3e0d8;
  --line-strong: #cfcbc0;

  /* The one brand colour. */
  --accent: #14634a;
  --accent-hover: #0f4e3a;
  --accent-ink: #ffffff;
  --accent-wash: #e6efea;

  /* Semantic sync states — none of them the accent. */
  --state-idle: #7a807f;
  --state-idle-wash: #eceae4;
  --state-busy: #245f9e;
  --state-busy-wash: #e4ecf5;
  --state-wait: #8a5f10;
  --state-wait-wash: #f6eeda;
  --state-bad: #a4382f;
  --state-bad-wash: #f7e6e3;

  /* Taxonomy chips are typographic, not colourful: one wash, mono type. */
  --chip-bg: #eceae4;

  --code-bg: #eceae4;

  /* Rhythm. Everything vertical is a multiple of --step. */
  --step: 0.5rem;
  --radius: 10px;
  --radius-sm: 6px;

  --font-title: "Newsreader", Iowan Old Style, Georgia, "Times New Roman", serif;
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
}

/* --------------------------------------------------------------------------
   2  Tokens (dark) — same roles, re-valued. Nothing else changes.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #131614;
    --surface: #1a1e1c;
    --surface-sunk: #212623;

    --ink: #e6eae7;
    --ink-soft: #a5adaa;
    --ink-faint: #78817e;

    --line: #2b312e;
    --line-strong: #3b433f;

    --accent: #57bd97;
    --accent-hover: #74cfab;
    --accent-ink: #0d2019;
    --accent-wash: #1a2c25;

    --state-idle: #8d9491;
    --state-idle-wash: #232825;
    --state-busy: #74aee0;
    --state-busy-wash: #1a2733;
    --state-wait: #d3a751;
    --state-wait-wash: #2e2717;
    --state-bad: #e08a80;
    --state-bad-wash: #32201d;

    --chip-bg: #232825;
    --code-bg: #232825;
  }
}

/* --------------------------------------------------------------------------
   3  Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 0 calc(var(--step) * 10);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-hover);
}

p {
  margin: 0 0 calc(var(--step) * 1.5);
}

p:last-child {
  margin-bottom: 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--code-bg);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

/* --------------------------------------------------------------------------
   4  Layout
   -------------------------------------------------------------------------- */

/* The banner is a designed element, not a warning bolted on: a thin amber
   strip, mono, uppercase, tracked out, sitting above everything. */
.banner {
  margin: 0;
  padding: calc(var(--step) * 0.75) calc(var(--step) * 2);
  background: var(--state-wait-wash);
  color: var(--state-wait);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.masthead-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--step) * 2) calc(var(--step) * 3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 3);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 1.25);
  color: var(--ink);
  text-decoration: none;
}

.brand svg {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.wordmark {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: -0.015em;
}

.to-app {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
  /* sits beside the wordmark; the masthead's own bar keeps the right edge */
  margin-right: auto;
}

.to-app:hover,
.to-app:focus-visible {
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
}

.brand .sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-left: calc(var(--step) * 1.25);
  border-left: 1px solid var(--line-strong);
}

main {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--step) * 4) calc(var(--step) * 3) 0;
}

/* --------------------------------------------------------------------------
   5  Type
   -------------------------------------------------------------------------- */

.page-head {
  margin: 0 0 calc(var(--step) * 3);
}

.page-title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 calc(var(--step) * 1);
}

.page-lede {
  color: var(--ink-soft);
  max-width: 46rem;
  margin: 0;
}

/* The uppercase mono micro-label used for section eyebrows, column heads and
   anywhere a machine fact needs naming. */
.eyebrow,
th,
.chip,
.pill,
.meta-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  display: block;
  color: var(--ink-faint);
  margin: 0 0 calc(var(--step) * 0.75);
}

.card-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  margin: 0 0 calc(var(--step) * 2);
}

.count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}

.muted {
  color: var(--ink-soft);
  font-size: 13.5px;
}

.mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  word-break: break-all;
}

.crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 calc(var(--step) * 2);
}

.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6  Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: calc(var(--step) * 3);
  margin: 0 0 calc(var(--step) * 3);
}

.card > :last-child {
  margin-bottom: 0;
}

.note {
  margin: calc(var(--step) * 2) 0 0;
  padding-top: calc(var(--step) * 2);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
}

.note:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.warn {
  background: var(--state-wait-wash);
  color: var(--state-wait);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: calc(var(--step) * 1.5) calc(var(--step) * 2);
  font-size: 13.5px;
}

.warn code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* --------------------------------------------------------------------------
   7  Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  /* A wide table scrolls inside its card rather than widening the page. */
  overflow-x: auto;
  margin: 0 calc(var(--step) * -3);
  padding: 0 calc(var(--step) * 3);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 0 calc(var(--step) * 1.5) calc(var(--step) * 1) 0;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

td {
  text-align: left;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 1.5)
    calc(var(--step) * 1.5) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: var(--surface-sunk);
}

/* A folder heading inside a document listing. A row rather than a section
   between tables, so every folder shares one set of column widths — sectioned
   tables would each size their own and step the page sideways at each heading.

   Quiet on purpose: the structure is context for the rows beneath it, not the
   thing being read. The sunk wash and the rule above it do the separating, so
   the heading needs no weight of its own, and it inherits no :hover because
   there is nothing here to click. */
tbody tr.folder th {
  text-align: left;
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-soft);
  padding: calc(var(--step) * 2.5) calc(var(--step) * 1.5) calc(var(--step) * 1);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line-strong);
}

/* The first heading sits directly under the table's own header rule and does
   not need a second one. */
tbody tr.folder:first-child th {
  border-top: 0;
  padding-top: calc(var(--step) * 1.25);
}

td.num,
th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

th.num {
  font-size: 10.5px;
}

td.actions {
  text-align: right;
  white-space: nowrap;
}

td.actions form {
  display: inline;
  margin: 0;
}

.cell-title {
  font-weight: 500;
}

.cell-title a {
  text-decoration: none;
}

.cell-title a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   8  Pills and chips
   -------------------------------------------------------------------------- */

/* A sync state: a dot in the state's colour and the word beside it, on a wash
   that is never the accent's. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 0.75);
  padding: 2px calc(var(--step) * 1.25) 2px calc(var(--step) * 1);
  border-radius: 999px;
  background: var(--state-idle-wash);
  color: var(--state-idle);
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.pill.idle {
  background: var(--state-idle-wash);
  color: var(--state-idle);
}
.pill.syncing {
  background: var(--state-busy-wash);
  color: var(--state-busy);
}
.pill.pending {
  background: var(--state-wait-wash);
  color: var(--state-wait);
}
.pill.error {
  background: var(--state-bad-wash);
  color: var(--state-bad);
}
/* `needs_reauth` (labelled "reconnect") shares clay with `error` because both
   are failures, and is told apart by its word and a hairline rather than by a
   sixth hue. A new colour would claim a new *severity*, and the difference is
   not severity but remedy: an errored source is being retried and may fix
   itself, this one has stopped being scheduled until a human presses the button
   beside it. The outline is what makes it findable in a column of clay. */
.pill.needs_reauth {
  background: var(--state-bad-wash);
  color: var(--state-bad);
  box-shadow: inset 0 0 0 1px currentColor;
}

/* An extraction status, on the same four-colour logic as a sync state and
   deliberately not on the accent either. `ok` is quiet neutral because there is
   nothing to say; `truncated` is amber because part of the file is here and
   part is not; `unsupported` and `failed` are clay because none of it is. The
   severity order is the point — an operator scanning a column should see the
   red ones first and never mistake amber for red.

   `extracted_llm` (labelled "transcribed") is blue, and it is the one worth
   arguing. Amber on this scale means *incomplete*, and a transcription is not:
   every word of the document is in the row. What is different about it is
   provenance — a model read the pages, rather than a parser lifting text out of
   the file. Blue is what this stylesheet already uses for machine-mediated
   rather than deficient, `syncing` being the other one, so it says "something
   happened to this" without saying "something is wrong with this". Clay would
   send an operator hunting a fault that is not there; neutral would hide the
   one fact the status exists to record. */
.pill.ok {
  background: var(--state-idle-wash);
  color: var(--state-idle);
}
.pill.truncated {
  background: var(--state-wait-wash);
  color: var(--state-wait);
}
.pill.extracted_llm {
  background: var(--state-busy-wash);
  color: var(--state-busy);
}
.pill.unsupported,
.pill.failed {
  background: var(--state-bad-wash);
  color: var(--state-bad);
}

/* Taxonomy: typographic, not chromatic. */
.chip {
  display: inline-block;
  padding: 2px calc(var(--step) * 1);
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
  color: var(--ink-soft);
  white-space: nowrap;
}

.dash {
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   9  Forms, buttons, focus
   -------------------------------------------------------------------------- */

form {
  margin: 0;
}

.field {
  display: block;
  margin: 0 0 calc(var(--step) * 2);
}

.field > span,
legend {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 calc(var(--step) * 0.75);
}

/* `email` and `textarea` joined `text` here when the public signup form and the
   member page arrived. They had always been in the markup — the Administrators
   card's email field, for one — and had always fallen back to the browser's own
   control, which is the one place in this admin the type scale was not ours. */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  display: block;
  width: 100%;
  max-width: 28rem;
  padding: calc(var(--step) * 1) calc(var(--step) * 1.5);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {
  border-color: var(--ink-faint);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 0 0 calc(var(--step) * 2);
  padding: calc(var(--step) * 2);
}

legend {
  padding: 0 calc(var(--step) * 0.75);
  margin: 0;
}

/* A radio and its explanation, as one clickable row. */
.choice {
  display: flex;
  gap: calc(var(--step) * 1.5);
  align-items: baseline;
  padding: calc(var(--step) * 1.25) calc(var(--step) * 1.5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.choice:hover {
  background: var(--surface-sunk);
}

.choice:has(input:checked) {
  background: var(--accent-wash);
  border-color: var(--accent);
}

.choice input {
  margin: 0;
  accent-color: var(--accent);
  flex: none;
}

.choice strong {
  font-weight: 600;
}

.choice .why {
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
}

.actions-row {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 1.5);
  flex-wrap: wrap;
  margin-top: calc(var(--step) * 2);
}

button,
.button {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 0.75);
  padding: calc(var(--step) * 1) calc(var(--step) * 2);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

button:hover,
.button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

button:active,
.button:active {
  transform: translateY(0.5px);
}

button.secondary,
.button.secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line-strong);
}

button.secondary:hover,
.button.secondary:hover {
  color: var(--ink);
  background: var(--surface-sunk);
  border-color: var(--ink-faint);
}

button.quiet,
.button.quiet {
  padding: calc(var(--step) * 0.5) calc(var(--step) * 1.25);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--line-strong);
}

button.quiet:hover,
.button.quiet:hover {
  color: var(--ink);
  background: var(--surface-sunk);
}

/* --------------------------------------------------------------------------
   10  Tenant bar — the dev stand-in for "signed in as"
   -------------------------------------------------------------------------- */

.tenant-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 1.5);
}

.tenant-bar .field {
  margin: 0;
}

.tenant-bar .field > span {
  margin: 0;
}

.tenant-bar select {
  max-width: 18rem;
  padding: calc(var(--step) * 0.75) calc(var(--step) * 1.25);
  font-size: 13px;
}

.tenant-bar .stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The identity controls are three things in one row — who you are, which
   tenant you are acting as, and the way out — so each is its own form and the
   bar is the flex parent rather than one of them. */
.tenant-bar .tenant-form,
.tenant-bar .signout-form {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 1.5);
  margin: 0;
}

.tenant-bar .signed-in {
  font-size: 13px;
}

/* The page-head's secondary navigation: two or three quiet buttons in a row. */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step);
}

/* --------------------------------------------------------------------------
   10b  Access: keys and administrators
   -------------------------------------------------------------------------- */

/* The one card in this product that renders a secret. Amber-washed like the
   local-dev banner, because both say the same thing: this is a moment, not a
   state. */
.card.minted {
  background: var(--state-wait-wash);
  border-color: var(--state-wait);
}

/* A key is a machine fact and a long one. It wraps rather than scrolling,
   because a value somebody has to select and copy must be entirely visible. */
.mono.secret {
  display: block;
  padding: calc(var(--step) * 1.5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}

/* The copy-pasteable command line. Scrolls sideways rather than wrapping —
   a wrapped shell command is a shell command somebody pastes wrong. */
.snippet {
  margin: 0 0 var(--step);
  padding: calc(var(--step) * 1.5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
}

/* Forms that stack their fields, for the two on the access page. */
.stack-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--step);
  margin-top: calc(var(--step) * 2);
  padding-top: calc(var(--step) * 2);
  border-top: 1px solid var(--line);
}

.stack-form .field {
  margin: 0;
  width: 100%;
  max-width: 26rem;
}

/* A revoke button in a table row: right-aligned, and the cell does not grow. */
td.row-action {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

td.row-action form {
  margin: 0;
}

/* `describe_google_error` puts the redirect URI on its own indented line,
   because the whole value of that message is a string somebody has to paste
   somewhere byte for byte. A collapsing paragraph would lose the line break
   and, worse, the leading spaces. */
.prewrap {
  white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   11  The folder picker — this should feel like choosing, not configuring
   -------------------------------------------------------------------------- */

.steps {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 1.5);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 calc(var(--step) * 2);
}

.steps .done {
  color: var(--accent);
}

.steps .now {
  color: var(--ink);
}

.steps .rule {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  border-bottom: 1px solid var(--line);
}

.rows .choice {
  flex: 1;
  border-radius: 0;
  border: 0;
  margin: 0;
}

.rows .choice:has(input:checked) {
  border: 0;
}

.rows .drill {
  flex: none;
  margin-right: calc(var(--step) * 1.5);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-faint);
  padding: calc(var(--step) * 0.5) calc(var(--step) * 1);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.rows .drill:hover {
  color: var(--accent);
  border-color: var(--line-strong);
}

.folder-name {
  font-weight: 500;
}

.pick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 3);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   12  Empty states
   -------------------------------------------------------------------------- */

/* An empty card is the same shape as a full one, so nothing jumps when the
   first Space, source or page arrives. */
.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 8.5rem;
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
}

.empty .empty-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 calc(var(--step) * 0.75);
}

.empty p {
  color: var(--ink-soft);
  font-size: 13.5px;
  max-width: 42rem;
}

.page-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: 72rem;
  margin: calc(var(--step) * 4) auto 0;
  padding: 0 calc(var(--step) * 3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 40rem) {
  .masthead-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: calc(var(--step) * 2);
  }

  main {
    padding: calc(var(--step) * 3) calc(var(--step) * 2) 0;
  }

  .card {
    padding: calc(var(--step) * 2);
  }

  .table-wrap {
    margin: 0 calc(var(--step) * -2);
    padding: 0 calc(var(--step) * 2);
  }
}


/* --------------------------------------------------------------------------
   13  Source data: extraction pills, tombstones, rendered bodies
   -------------------------------------------------------------------------- */

/* A tombstoned document: struck through and faded, still legible and still
   clickable. It is deleted upstream, not deleted here — the row is what keeps
   an already-published citation resolving — and a browser that simply hid it
   would make a vanished file look like one that was never ingested. */
.gone .cell-title,
.gone .mono {
  text-decoration: line-through;
  color: var(--ink-faint);
}

/* The metadata header on a document or page view: label/value pairs, labels in
   the same uppercase mono as every other machine label on these pages. */
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: calc(var(--step) * 1) calc(var(--step) * 3);
  margin: 0;
}

.facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: baseline;
}

.facts dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Rendered, sanitized markdown — a source document's text or a page version's
   prose. Measure is capped because this is the one place on these pages with
   real running text, and 40em is where it stays readable. Everything inside is
   produced by `admin::markdown`, which is where the safety argument lives. */
.body {
  max-width: 40em;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
}

.body > :first-child {
  margin-top: 0;
}

.body > :last-child {
  margin-bottom: 0;
}

.body h1,
.body h2,
.body h3,
.body h4 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.25;
  margin: calc(var(--step) * 4) 0 calc(var(--step) * 1.5);
}

.body h1 {
  font-size: 24px;
}
.body h2 {
  font-size: 20px;
}
.body h3 {
  font-size: 17px;
}
.body h4 {
  font-size: 15px;
}

.body p,
.body ul,
.body ol,
.body blockquote,
.body table {
  margin: 0 0 calc(var(--step) * 2);
}

.body ul,
.body ol {
  padding-left: calc(var(--step) * 3);
}

.body li {
  margin-bottom: calc(var(--step) * 0.5);
}

.body blockquote {
  padding-left: calc(var(--step) * 2);
  border-left: 2px solid var(--line-strong);
  color: var(--ink-soft);
}

.body pre {
  background: var(--code-bg);
  border-radius: var(--radius-sm);
  padding: calc(var(--step) * 2);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
}

/* A note's image (`rich-notes-spec.md` §7.5): only the member view emits an
   <img>, and only on its gated /app/attachments route. Rounded, hairlined,
   never wider than the text, and capped so a tall screenshot does not take
   the page; it fades in rather than popping. */
.body img {
  display: block;
  max-width: 100%;
  max-height: 480px;
  height: auto;
  margin: 0.75rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--line);
  animation: body-img-in 220ms ease-out;
}

@keyframes body-img-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .body img { animation: none; }
}

.body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: calc(var(--step) * 4) 0;
}

.body table {
  border-collapse: collapse;
  font-size: 13.5px;
}

.body th,
.body td {
  border: 1px solid var(--line);
  padding: calc(var(--step) * 0.75) calc(var(--step) * 1.5);
  text-align: left;
}

/* Plain text that is not markdown: shown verbatim, wrapped, in mono. A text
   document is a machine fact about what was ingested, and reflowing it as
   prose would be a claim about structure that nobody made. */
.raw {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: calc(var(--step) * 2);
  margin: 0;
  max-height: 70vh;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}

/* The "show removed" toggle sits in a card head beside the count. */
.head-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 2);
}

/* --------------------------------------------------------------------------
   14  Membership, the super-admin, and the public front door

   Everything below is served to somebody who is not an operator: a member
   looking at what they can read, the founder looking at the waitlist, or a
   stranger who has never seen this product before. Same tokens, same three
   typefaces, same rules — mono is only ever a machine fact, and the accent is
   only ever the brand.
   -------------------------------------------------------------------------- */

/* The founder's two links, in the masthead beside the tenant selector. */
/* A masthead link that is a word and a count, in mono and faint: the Inbox's
   `Needs you (3)` and the founder's `Waitlist (2) · Tenants`. One rule with two
   names rather than two rules, because they are one idiom — the chrome grows no
   second way of saying "there are this many of these". No colour and no dot on
   either: state colour belongs to the pills, and a permanent red dot in a
   masthead is how people learn to stop reading a masthead. */
.masthead-nav,
.superadmin-nav {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.masthead-nav a,
.superadmin-nav a {
  color: var(--ink-soft);
}

.masthead-nav a:hover,
.superadmin-nav a:hover {
  color: var(--accent);
}

/* One waitlist request, inside the Pending card. A card within a card, sunk
   rather than outlined again, so the nesting reads as grouping instead of as a
   second border somebody forgot to remove. */
.sub-card {
  background: var(--surface-sunk);
  margin-bottom: calc(var(--step) * 2);
}

.sub-card:last-child {
  margin-bottom: 0;
}

/* The Spaces a member can read: names, and nothing to click. */
.plain-list {
  list-style: none;
  margin: 0 0 calc(var(--step) * 2);
  padding: 0;
  border-top: 1px solid var(--line);
}

.plain-list li {
  padding: calc(var(--step) * 1.25) 0;
  border-bottom: 1px solid var(--line);
}

/* The honeypot. Off-screen rather than `display: none`: some autofill
   implementations skip a hidden field entirely, which would catch nobody, and
   `type=hidden` is the one spelling a bot recognizes as a trap. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- The public front door ---------------------------------------------- */

/* No masthead and no footer, so the page carries its own top padding and a
   narrower measure: this is one column of prose and one form, not a console. */
.public-main {
  max-width: 38rem;
  margin: 0 auto;
  padding: calc(var(--step) * 9) calc(var(--step) * 3) calc(var(--step) * 8);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 1.25);
  margin-bottom: calc(var(--step) * 6);
  color: var(--ink);
  text-decoration: none;
}

.public-brand svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.public-head {
  margin: 0 0 calc(var(--step) * 4);
}

/* Larger than a page title and the one place this product raises its voice:
   it is the first line a stranger reads. */
.public-title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: calc(var(--step) * 1.5) 0 0;
}

.public-lede {
  margin: calc(var(--step) * 2.5) 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.public .card {
  padding: calc(var(--step) * 4);
}

.public textarea {
  resize: vertical;
  min-height: 6rem;
}

/* ---- The member view (`/app`) --------------------------------------------

   The same house, read rather than operated: the admin's masthead shape with
   three places to go instead of a tenant selector. The accent marks the page
   you are on, as it marks a link — it is still only ever the brand. */

.reader-nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2.5);
  font-size: 14px;
}

.reader-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.reader-nav a:hover {
  color: var(--accent);
}

.reader-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* One row at desktop widths: the brand, the places, and — folded into one
   control at the far end — who you are, your access and the way out. */
.reader .masthead-inner { flex-wrap: nowrap; }
.reader .reader-nav { flex: 1; min-width: 0; flex-wrap: nowrap; justify-content: center; gap: calc(var(--step) * 2.25); }
.reader .reader-nav a { white-space: nowrap; }

.account-menu { position: relative; flex: 0 0 auto; }
.account-menu > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 3px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; color: var(--ink-soft);
  transition: border-color .12s ease, background .12s ease;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover,
.account-menu[open] > summary { border-color: var(--line-strong); background: var(--surface-sunk); }
.account-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
  font: 600 12.5px/1 var(--font-ui);
}
.account-caret { width: 12px; height: 12px; transition: transform .15s ease; }
.account-menu[open] .account-caret { transform: rotate(180deg); }
.account-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 15rem; max-width: 20rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(25, 27, 26, .06), 0 14px 32px -16px rgba(20, 40, 32, .35);
  padding: 6px;
  animation: account-pop .14s ease both;
}
@keyframes account-pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .account-pop { animation: none; } .account-caret { transition: none; } }
.account-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.account-who strong { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.account-who span { font-size: 12px; color: var(--ink-faint); }
.account-links { display: flex; flex-direction: column; }
.account-links a,
.account-signout {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font: 500 13.5px/1.3 var(--font-ui); color: var(--ink-soft); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.account-links a:hover,
.account-signout:hover { background: var(--surface-sunk); color: var(--ink); }
.account-menu .signout-form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }

@media (max-width: 40rem) {
  /* Phones: the brand and the account on one row, the places scrolling below. */
  .reader .masthead-inner { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .reader .reader-nav {
    order: 3; flex: 1 0 100%;
    /* The places scroll sideways; the edge fades so the cut reads as "more". */
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
    padding-right: calc(var(--step) * 4);
  }
  .reader .account-menu { margin-left: auto; }
}
@media (max-width: 64rem) {
  .reader .reader-nav { justify-content: flex-start; gap: calc(var(--step) * 1.75); font-size: 13.5px; overflow-x: auto; scrollbar-width: none; }
}

/* A quoted passage under a value or a mention: the organization's own words,
   set off as a quotation so it never reads as this product's prose. */
.facts .why,
.rows .why {
  display: block;
  margin-top: calc(var(--step) * 0.5);
  padding-left: calc(var(--step) * 1.5);
  border-left: 2px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 13.5px;
}

/* ---- Sign-in (`/auth/signin` and its refusals) ----------------------------

   Everybody's front door — an operator, a member, somebody approving the Mac
   app — so it is in the public register: one narrow column, the wordmark, a
   hairline card. The two provider buttons are the only colour on the page
   that is not ours, and each wears its own provider's branding (Google's G on
   white with a #747775 stroke and Roboto; Microsoft's four squares on white
   with a #8C8C8C stroke, #5E5E5E text and Segoe UI; both inverted to their
   providers' dark palettes in dark mode). They share one height, width and
   radius so neither reads as the lesser door. */

.auth-main {
  max-width: 27.5rem;
  margin: 0 auto;
  padding: calc(var(--step) * 12) calc(var(--step) * 2.5) calc(var(--step) * 8);
}

.auth .auth-brand {
  display: flex;
  justify-content: center;
  margin: 0 auto calc(var(--step) * 4);
  width: max-content;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: calc(var(--step) * 5) calc(var(--step) * 4) calc(var(--step) * 4);
  animation: auth-rise 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.auth-title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 calc(var(--step) * 1.5);
}

.auth-card > .auth-title:first-child,
.auth-card > .auth-lede {
  text-align: center;
}

.auth-lede {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 calc(var(--step) * 4);
}

.provider-stack {
  display: grid;
  gap: calc(var(--step) * 1.5);
}

.provider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 44px;
  padding: 0 calc(var(--step) * 2);
  border: 1px solid;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, opacity 200ms ease,
    transform 80ms ease;
}

.provider:active {
  transform: translateY(0.5px);
}

.provider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.provider-logo {
  display: inline-flex;
  flex: none;
}

.provider-logo svg {
  display: block;
}

.provider-google {
  background: #ffffff;
  border-color: #747775;
  color: #1f1f1f;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.25px;
}

.provider-google:hover {
  background: #f6f7f7;
  color: #1f1f1f;
}

.provider-microsoft {
  background: #ffffff;
  border-color: #8c8c8c;
  color: #5e5e5e;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
}

.provider-microsoft:hover {
  background: #f6f6f6;
  color: #3b3b3b;
}

/* While the browser is on its way to the provider: the pressed door says so,
   the other steps back. Set by the page's one small script. */
.provider.is-pending {
  cursor: progress;
}

.provider.is-pending .provider-logo {
  animation: auth-breathe 1.1s ease-in-out infinite;
}

.provider.is-idle {
  opacity: 0.45;
  pointer-events: none;
}

.auth-fine {
  margin: calc(var(--step) * 3) 0 0;
  color: var(--ink-faint);
  font-size: 12.5px;
  text-align: center;
}

.auth-alt {
  margin: calc(var(--step) * 3) 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

.auth-legal {
  display: flex;
  justify-content: center;
  gap: calc(var(--step) * 2.5);
  margin: calc(var(--step) * 5) 0 0;
  font-size: 13px;
}

.auth-legal a,
.page-foot-legal a {
  color: var(--ink-faint);
  text-decoration: none;
}

.auth-legal a:hover,
.page-foot-legal a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-foot-legal {
  display: flex;
  gap: calc(var(--step) * 2.5);
}

.auth-detail {
  color: var(--ink-soft);
  margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 3);
}

.auth-back {
  margin: 0;
}

.auth-setup {
  margin: calc(var(--step) * 6) 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.auth-setup summary {
  cursor: pointer;
  text-align: center;
  color: var(--ink-faint);
  list-style: none;
}

.auth-setup summary::-webkit-details-marker {
  display: none;
}

.auth-setup summary::after {
  content: "\00a0›";
  display: inline-block;
  transition: transform 160ms ease;
}

.auth-setup[open] summary::after {
  transform: rotate(90deg);
}

.auth-setup summary:hover {
  color: var(--ink-soft);
}

.auth-setup-body {
  margin-top: calc(var(--step) * 2);
  padding: calc(var(--step) * 2.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.redirect-row {
  display: grid;
  gap: calc(var(--step) * 0.5);
  margin-top: calc(var(--step) * 2);
}

.redirect-row .eyebrow {
  margin: 0;
}

.redirect-row code.mono {
  display: block;
  padding: calc(var(--step) * 1) calc(var(--step) * 1.25);
  font-size: 11.5px;
  color: var(--ink);
  /* One line, scrolled rather than broken: a URL wrapped mid-word is a URL
     somebody pastes with a newline in it. */
  white-space: nowrap;
  word-break: normal;
  overflow-x: auto;
  user-select: all;
}

.redirect-row .muted {
  font-size: 12px;
}

/* The reviewer demo (`admin::auth::demo`). The link under the sign-in card is
   deliberately the quietest thing on the page — a person with a work account
   must never read it as their door — and the form is the sign-in card's twin:
   same measure, same hairline, the brand button. The eyebrow names who it is
   for before the title does. */

.auth-demo-link {
  margin: calc(var(--step) * 1.5) 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
}

.auth-demo-link a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.auth-demo-link a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-faint);
}

.auth-demo-for {
  margin-left: 0.4em;
}

.auth-demo-for::before {
  content: "·";
  margin-right: 0.4em;
}

.demo-card .demo-eyebrow {
  display: block;
  text-align: center;
  color: var(--accent);
  margin: 0 0 calc(var(--step) * 1.25);
}

.demo-card > .auth-title {
  text-align: center;
}

.demo-form .field {
  margin-bottom: calc(var(--step) * 2.25);
}

.demo-form input[type="email"],
.demo-form input[type="password"] {
  max-width: none;
  height: 44px;
  font-size: 15px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.demo-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.demo-submit {
  width: 100%;
  justify-content: center;
  height: 44px;
  margin-top: calc(var(--step) * 0.5);
  font-size: 15px;
}

.demo-submit.is-pending {
  cursor: progress;
  opacity: 0.8;
}

.demo-error {
  margin: 0 0 calc(var(--step) * 2.5);
  padding: calc(var(--step) * 1.25) calc(var(--step) * 1.5);
  border: 1px solid var(--state-bad);
  border-radius: var(--radius-sm);
  background: var(--state-bad-wash);
  color: var(--state-bad);
  font-size: 14px;
  line-height: 1.45;
}

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes auth-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-color-scheme: dark) {
  .provider-google {
    background: #131314;
    border-color: #8e918f;
    color: #e3e3e3;
  }

  .provider-google:hover {
    background: #1f1f20;
    color: #e3e3e3;
  }

  .provider-microsoft {
    background: #2f2f2f;
    border-color: #2f2f2f;
    color: #ffffff;
  }

  .provider-microsoft:hover {
    background: #3a3a3a;
    border-color: #3a3a3a;
    color: #ffffff;
  }
}

@media (max-width: 30rem) {
  .auth-main {
    padding-top: calc(var(--step) * 6);
  }

  .auth-card {
    padding: calc(var(--step) * 4) calc(var(--step) * 2.5) calc(var(--step) * 3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card,
  .provider.is-pending .provider-logo {
    animation: none;
  }

  .provider,
  .auth-setup summary::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   13b  Outbound email: the request-access offer, invitations, the Email page
   `crate::outbound`, `admin/{invites,email}{,_view}.rs`. The same paper and
   the same one evergreen; a person waiting on the other end of a request is
   the only thing here that gets a little ceremony.
   -------------------------------------------------------------------------- */

/* `.pending` (the mail review list's item, §16) pads its rows, and a pending
   *pill* was inheriting that top padding everywhere — the amber pills sat low
   in every table. Two classes outrank one, whatever the order. */
.pill.pending {
  padding: 2px calc(var(--step) * 1.25) 2px calc(var(--step) * 1);
}

.access-offer {
  margin: calc(var(--step) * 2.5) 0 calc(var(--step) * 2);
  padding: calc(var(--step) * 2.5);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius);
  background: var(--accent-wash);
  animation: auth-rise 320ms 80ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.access-offer-lede {
  margin: 0 0 calc(var(--step) * 2);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.access-offer-form { margin: 0; }

.access-offer-button {
  width: 100%;
  justify-content: center;
  height: 46px;
  font-size: 15px;
}

.access-offer-fine {
  margin: calc(var(--step) * 1.5) 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.access-offer-fine code { font-size: 11.5px; color: var(--ink-soft); }

.access-offer-why {
  margin: 0 0 calc(var(--step) * 2.5);
  font-size: 13px;
  color: var(--ink-faint);
}

.access-offer-why summary { cursor: pointer; }
.access-offer-why .auth-detail { margin-bottom: 0; font-size: 13px; }

.invite-teaser .card-head { align-items: center; margin-bottom: var(--step); }
.invite-teaser p { margin: 0; }

.invite-form { display: grid; gap: calc(var(--step) * 1.5); }
.invite-field { max-width: none; margin: 0; }
.invite-field textarea {
  width: 100%;
  max-width: none;
  min-height: 5.5rem;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}

.invite-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--step) * 2);
}

.invite-results { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }

.invite-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--step) * 1.25);
}

.outcome {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--step) * 1.25);
  font-size: 14px;
  line-height: 1.5;
  animation: flash-in 220ms ease-out both;
}

.outcome-body { display: grid; gap: var(--step); flex: 1; min-width: 0; }

.outcome-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-wash);
  color: var(--accent);
}

.outcome.quiet .outcome-mark { background: var(--state-idle-wash); color: var(--state-idle); }
.outcome.bad .outcome-mark { background: var(--state-bad-wash); color: var(--state-bad); }

.copy-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  overflow: hidden;
}

.copy-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step);
  padding: calc(var(--step) * 0.75) calc(var(--step) * 0.75) calc(var(--step) * 0.75)
    calc(var(--step) * 1.5);
  border-bottom: 1px solid var(--line);
}

.copy-box-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-box-body {
  margin: 0;
  padding: calc(var(--step) * 1.5);
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: transparent;
}

.request-list {
  list-style: none;
  margin: calc(var(--step) * 2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--step);
}

.request-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 1.5);
  padding: calc(var(--step) * 1.5) calc(var(--step) * 2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.request-row.is-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.request-who { display: flex; align-items: center; gap: calc(var(--step) * 1.5); min-width: 0; }
.request-who > div { display: grid; gap: 1px; min-width: 0; }
.request-email { font-size: 12px; }
.request-when { font-size: 12.5px; }

.request-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 600;
}

.request-actions { display: flex; gap: var(--step); align-items: center; }
.request-actions form { margin: 0; }

td.invite-row-actions { white-space: nowrap; }
td.invite-row-actions form { display: inline-block; margin: 0 0 0 calc(var(--step) * 0.5); }

.email-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: calc(var(--step) * 3);
  align-items: start;
}

.email-grid > .card { margin-bottom: calc(var(--step) * 3); }

.email-config {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: calc(var(--step) * 1.25) calc(var(--step) * 2.5);
  margin: 0;
  font-size: 14px;
}

.email-config dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 2px;
}

.email-config dd { margin: 0; color: var(--ink); min-width: 0; }
.email-config dd .mono { font-size: 12px; color: var(--ink-soft); }

.stack-form.flush { margin-top: 0; padding-top: 0; border-top: 0; }

.email-error { font-size: 12px; }

.email-previews {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--step);
  margin: calc(var(--step) * 1.5) 0 0;
  padding: 0;
}

.email-previews a {
  display: inline-block;
  padding: calc(var(--step) * 0.75) calc(var(--step) * 1.5);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
}

.email-previews a:hover { border-color: var(--accent); color: var(--accent); }

.welcome-card { padding: calc(var(--step) * 3.5); }
.welcome-sent { display: flex; gap: calc(var(--step) * 2); align-items: flex-start; }
.welcome-sent p { margin: 0 0 calc(var(--step) * 0.75); }
.welcome-sent p.muted { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step); }

.welcome-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 18px;
  font-weight: 700;
  animation: auth-rise 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.welcome-line {
  font-family: var(--font-title);
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--step);
}

.welcome-card .copy-box { margin-top: calc(var(--step) * 2); }
.welcome-next { display: flex; gap: var(--step); }

@media (max-width: 48rem) {
  .email-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .request-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .access-offer, .outcome, .welcome-mark { animation: none; }
}

/* --------------------------------------------------------------------------
   14  Authority: tiers, contested values, the settle sentence
   customer-context-spec.md §3.3–§3.5, `migrations/0032`.

   A tier is a RANKING, not a state, so it is typographic like a taxonomy
   chip: a numeral in a small disc and the tier's name. Tiers 1 and 2 — the
   documents that decide things — carry a hairline so they are findable in a
   list; tier 5 is faint, because exploratory talk is weighed and not obeyed.

   CONTESTED is the one authority state that asks for a person, and it is
   amber — the existing "unresolved" wash — never clay: nothing is wrong,
   something is undecided. The panel sets the two sides next to each other on
   paper, with the answers underneath; it is meant to read as a calm question,
   not an alarm.
   -------------------------------------------------------------------------- */

.tier {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 0.75);
  padding: 1px calc(var(--step) * 1) 1px 2px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 1px;
}

.tier-n {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 10px;
}

.tier.t1,
.tier.t2 {
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
}

.tier.t1 .tier-n,
.tier.t2 .tier-n {
  background: var(--ink);
  color: var(--surface);
}

.tier.t5 {
  color: var(--ink-faint);
}

.tier.unclassified {
  padding: 1px calc(var(--step) * 1);
  color: var(--ink-faint);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

.chip.contested {
  background: var(--state-wait-wash);
  color: var(--state-wait);
}

.chip.noted {
  color: var(--ink-faint);
}

.chip.modality {
  font-style: italic;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

dd.settled {
  color: var(--ink-soft);
}

dd.settled .chip {
  margin-right: calc(var(--step) * 0.5);
}

.settle-summary {
  display: flex;
  gap: calc(var(--step) * 1.5);
  align-items: baseline;
  margin: 0 0 calc(var(--step) * 2);
  padding: calc(var(--step) * 1.25) calc(var(--step) * 1.75);
  border-radius: var(--radius-sm);
  background: var(--state-wait-wash);
  color: var(--ink-soft);
  font-size: 14px;
}

.settle {
  margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 2.5);
  padding: calc(var(--step) * 2);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.settle.contested {
  border-left: 3px solid var(--state-wait);
}

.settle-head {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.25);
  align-items: baseline;
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: calc(var(--step) * 2);
}

.versus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: calc(var(--step) * 1.5);
}

.side {
  padding: calc(var(--step) * 1.5) calc(var(--step) * 1.75);
  border-radius: var(--radius-sm);
  background: var(--ground);
}

.side.stands {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.side-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.side.challenges .side-label {
  color: var(--state-wait);
}

.side-value {
  margin: calc(var(--step) * 0.5) 0 calc(var(--step) * 0.75);
  font-family: var(--font-title);
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.side.challenges .side-value {
  color: var(--ink-soft);
}

.side-source {
  font-size: 13.5px;
  line-height: 1.9;
}

.side .why {
  display: block;
  margin-top: calc(var(--step) * 1);
  padding-left: calc(var(--step) * 1.5);
  border-left: 2px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 13.5px;
}

.settle-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: calc(var(--step) * 1.5);
  margin-top: calc(var(--step) * 2);
}

.settle-choice {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 1);
  align-items: flex-start;
}

.settle-choice .input {
  width: 100%;
}

.settle .note {
  margin-top: calc(var(--step) * 1.5);
}

details.noted {
  margin: calc(var(--step) * 0.5) 0 calc(var(--step) * 1.5);
}

details.noted > summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.muted.small,
.small {
  font-size: 13px;
}

.health-card .card-title .pill {
  font-family: var(--font-ui);
  font-size: 15px;
}

/* The authority page: one row per tier, a bar of how many documents sit in
   it. Ink, not accent — a count of documents is not the brand. */
.tier-ladder {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: calc(var(--step) * 1) calc(var(--step) * 2);
  align-items: center;
  margin: 0;
}

.tier-ladder .bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-sunk);
  overflow: hidden;
}

.tier-ladder .bar > span {
  display: block;
  height: 100%;
  background: var(--ink-faint);
  border-radius: 999px;
}

.tier-ladder .examples {
  display: block;
  color: var(--ink-faint);
  font-size: 12.5px;
}

.inline-form {
  display: inline-flex;
  gap: calc(var(--step) * 0.75);
  align-items: center;
}

.inline-form select {
  width: auto;
  min-width: 11rem;
  font-size: 13px;
}

.health-reason {
  font-family: var(--font-title);
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}

.rule-form {
  margin-top: calc(var(--step) * 2.5);
  padding-top: calc(var(--step) * 2);
  border-top: 1px solid var(--line);
}

.rule-form-title {
  font-family: var(--font-title);
  font-size: 17px;
  margin: 0 0 calc(var(--step) * 1.5);
}

.rule-form .actions-row:not(:last-child) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: calc(var(--step) * 2);
  align-items: start;
}

.rule-form .field.wide {
  grid-column: span 2;
}

.rule-form .field input,
.rule-form .field select {
  width: 100%;
}


@media (max-width: 640px) {
  .rule-form .field.wide {
    grid-column: auto;
  }
  .side-value {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   16  Customers: the drop zone, the mapping review, the preview
   (`customer-context-spec.md` §2.4–§2.6). The first thing a design partner
   touches, so it is built to be calm: hairlines and washes, the state
   vocabulary unchanged, and the accent only where it already lives — links
   and the one primary button per step.
   -------------------------------------------------------------------------- */

.card.disclosure > summary {
  display: flex;
  align-items: baseline;
  gap: calc(var(--step) * 1.5);
  cursor: pointer;
  list-style: none;
}
.card.disclosure > summary::-webkit-details-marker { display: none; }
.card.disclosure > summary .eyebrow { margin: 0; }
.card.disclosure[open] > summary { margin-bottom: calc(var(--step) * 2); }

.hero-steps {
  margin: 0 0 calc(var(--step) * 2.5);
  padding-left: calc(var(--step) * 2.5);
  color: var(--ink-soft);
}
.hero-steps li { margin: 0 0 calc(var(--step) * 0.75); }
.hero-steps strong { color: var(--ink); }

.inline-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2);
}
.inline-form .form-row .field { flex: 0 1 20rem; }
.by-object { margin: calc(var(--step) * -0.5) 0 calc(var(--step) * 2); color: var(--ink-soft); font-size: 13.5px; }
.choice.compact { padding: calc(var(--step) * 0.75) calc(var(--step) * 1); }
.field.compact { margin: 0; }
.field.compact input { max-width: 14rem; padding: calc(var(--step) * 0.6) calc(var(--step) * 1); font-size: 13px; }

/* The drop zone. The file input covers the whole zone, invisibly, so a file
   dropped anywhere on it lands in the input natively — with or without the
   script, which only adds "submit on drop" and the busy state. */
.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone:hover,
.dropzone:focus-within { border-color: var(--ink-faint); }
.dropzone.is-over {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-wash);
}
.dropzone-body {
  pointer-events: none;
  text-align: center;
  padding: calc(var(--step) * 3);
}
.dropzone-icon {
  width: 34px;
  height: 34px;
  color: var(--ink-faint);
  margin-bottom: var(--step);
}
.dropzone.is-over .dropzone-icon { color: var(--accent); }
.dropzone-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 calc(var(--step) * 0.5);
}
.dropzone-sub { color: var(--ink-faint); font-size: 13px; margin: 0; }
.link-like { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dropzone-busy {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.dropzone.is-busy .dropzone-busy { display: flex; }
.dropzone.is-busy input[type="file"] { pointer-events: none; }
.upload-extras {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  margin-top: calc(var(--step) * 1.5);
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--ink-soft);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex: none;
}
.spinner.large { width: 26px; height: 26px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* Numbers that are the point of a card. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5);
  margin: 0 0 calc(var(--step) * 2);
}
.stat {
  flex: 1 1 7rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.stat-value {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-row.big .stat-value { font-size: 2.1rem; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stat-note { font-size: 12px; color: var(--state-wait); }
.stat.tone-add { border-top: 3px solid var(--state-busy); }
.stat.tone-change { border-top: 3px solid var(--state-busy); }
.stat.tone-same { border-top: 3px solid var(--line-strong); }
.stat.tone-warn { border-top: 3px solid var(--state-wait); background: var(--state-wait-wash); }
.stat.tone-warn .stat-value { color: var(--state-wait); }
.stat.tone-bad { border-top: 3px solid var(--state-bad); background: var(--state-bad-wash); }
.stat.tone-bad .stat-value { color: var(--state-bad); }

/* The snapshot page's head and its four steps. */
.snapshot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
}
.facts-line { margin: 0; }
.stepper {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0 0 calc(var(--step) * 3);
  padding: 0;
  counter-reset: step;
}
.stepper li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--step);
  padding: var(--step) calc(var(--step) * 1.5);
  border-bottom: 2px solid var(--line);
  color: var(--ink-faint);
  font-size: 13px;
}
.stepper li.done { color: var(--ink-soft); border-bottom-color: var(--line-strong); }
.stepper li.current { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.step-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  flex: none;
}
.stepper li.current .step-mark { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.card.working { border-style: dashed; }
.working-body { display: flex; align-items: center; gap: calc(var(--step) * 2); }
.working-body .card-title { margin-bottom: calc(var(--step) * 0.5); }
.working-body p { margin: 0; }

/* The review: a summary strip, then the two-column table. */
.review-lede { color: var(--ink-soft); max-width: 52rem; }
.review-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: calc(var(--step) * 2);
  margin: calc(var(--step) * 2) 0 calc(var(--step) * 2.5);
  padding: calc(var(--step) * 2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.summary-cell { display: flex; flex-direction: column; gap: calc(var(--step) * 0.75); }
.summary-cell select { max-width: 22rem; }
.summary-why { font-size: 12.5px; color: var(--ink-soft); }
.key-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px calc(var(--step) * 1);
  border-radius: 999px;
}
.key-badge.is-clean { background: var(--state-idle-wash); color: var(--ink-soft); }
.key-badge.is-dirty { background: var(--state-bad-wash); color: var(--state-bad); }

.map-table td { vertical-align: top; padding-top: calc(var(--step) * 1.75); padding-bottom: calc(var(--step) * 1.75); }
.map-table .arrow-col {
  width: 2rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: 15px;
  padding-right: calc(var(--step) * 1);
}
.map-table tbody tr:hover td { background: transparent; }
.map-row td:first-child { border-left: 3px solid transparent; padding-left: calc(var(--step) * 1.25); }
.map-row.is-low td { background: var(--state-wait-wash); }
.map-row.is-low td:first-child { border-left-color: var(--state-wait); }
.map-row.is-touched td:first-child { border-left-color: var(--line-strong); }
.map-row.is-ignored .col-name,
.map-row.is-ignored .samples { opacity: 0.55; }
.source-cell { width: 38%; }
.col-name { font-weight: 600; margin-bottom: calc(var(--step) * 0.75); word-break: break-word; }
.samples { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 0.5); }
.sample {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px calc(var(--step) * 0.75);
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--ink-soft);
}
.sample-note { font-size: 11.5px; color: var(--ink-faint); align-self: center; }
.target-select { max-width: 24rem; }
.map-row.is-low .target-select { border-color: var(--state-wait); }
.target-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step);
  margin-top: calc(var(--step) * 0.75);
  font-size: 12.5px;
}
.suggestion { color: var(--state-wait); }
.reason { margin: calc(var(--step) * 0.5) 0 0; font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.check { margin: calc(var(--step) * 0.5) 0 0; font-size: 12.5px; color: var(--state-bad); }
.conf {
  display: inline-block;
  min-width: 3.2rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px calc(var(--step) * 0.75);
  border-radius: 999px;
}
.conf.high { background: var(--state-idle-wash); color: var(--ink-soft); }
.conf.mid { background: var(--surface-sunk); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.conf.low { background: var(--state-wait-wash); color: var(--state-wait); box-shadow: inset 0 0 0 1px var(--state-wait); }

.header-fix { margin: calc(var(--step) * 2) 0 0; font-size: 13.5px; }
.header-fix > summary { cursor: pointer; color: var(--ink-soft); }
.header-choices { display: flex; flex-direction: column; gap: calc(var(--step) * 0.75); margin-top: var(--step); }
.header-choice {
  justify-content: flex-start;
  gap: calc(var(--step) * 1.5);
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  font-weight: 400;
  white-space: normal;
  text-align: left;
}
.header-choice:hover { background: var(--surface-sunk); color: var(--ink); border-color: var(--ink-faint); }
.header-choice:disabled { opacity: 1; border-color: var(--ink-soft); cursor: default; background: var(--surface-sunk); }
.header-preview { color: var(--ink-soft); }

.review-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  margin-top: calc(var(--step) * 2.5);
  padding-top: calc(var(--step) * 2);
  border-top: 1px solid var(--line);
}
.review-foot .privacy { margin: 0; padding: 0; border: 0; max-width: 34rem; }
.review-foot .actions-row { margin-top: 0; }

/* The preview: the numbers, the names, and the two callouts. */
.name-list { display: flex; flex-direction: column; gap: calc(var(--step) * 0.75); margin: 0 0 calc(var(--step) * 2); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--step) * 0.75); }
.name-chip {
  padding: 2px calc(var(--step) * 1.25);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
}
.missing-callout,
.skip-callout {
  margin: 0 0 calc(var(--step) * 2);
  padding: calc(var(--step) * 2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.missing-callout { background: var(--state-wait-wash); }
.missing-callout .name-chip { border-color: var(--state-wait); }
.skip-callout { background: var(--state-bad-wash); }
.commit-form { margin-top: calc(var(--step) * 2.5); padding-top: calc(var(--step) * 2); border-top: 1px solid var(--line); }
.commit-form .actions-row { margin-top: 0; }

form.is-busy button { opacity: 0.7; cursor: progress; }
.sheets-note { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 40rem) {
  .stepper .step-label { display: none; }
  .source-cell { width: auto; }
  .map-table .arrow-col { display: none; }
  .snapshot-head { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Customer email (`/app/mail`): the capture address, the owner's review band
   -------------------------------------------------------------------------- */

.flash {
  margin: 0 0 calc(var(--step) * 3);
  padding: calc(var(--step) * 1.5) calc(var(--step) * 2);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  animation: flash-in 220ms ease-out both;
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.capture-address {
  display: flex;
  align-items: stretch;
  gap: calc(var(--step) * 1);
  margin: 0 0 calc(var(--step) * 2.5);
}
.capture-value {
  flex: 1;
  display: block;
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  word-break: break-all;
  user-select: all;
}
.capture-address .copy { flex: none; min-width: 6.5rem; justify-content: center; }
.capture-address .copy.is-done { color: var(--accent); border-color: var(--accent); }
.capture-create select { min-width: 16rem; }
form.inline { display: inline; margin: 0; }

/* "Straight into one Space": save+{tenant}+{space}@ per shared Space. */
.per-space { margin: calc(var(--step) * 2) 0 0; }
.per-space summary {
  cursor: pointer;
  color: var(--ink-soft, var(--ink));
  font-weight: 500;
  width: fit-content;
}
.per-space summary:hover { color: var(--accent); }
.per-space-list {
  list-style: none;
  margin: calc(var(--step) * 1.25) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--step) * 0.75);
}
.per-space-list li {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr auto;
  align-items: center;
  gap: calc(var(--step) * 1.5);
  padding: calc(var(--step) * 1) calc(var(--step) * 1.5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-sunk);
}
.per-space-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.per-space-list code { word-break: break-all; user-select: all; font-size: 13px; color: var(--ink); }
.per-space .capture-create { margin-top: calc(var(--step) * 1.25); }
.capture-address + .capture-create { margin-top: calc(var(--step) * 0.5); }
.per-space-list .copy.is-done { color: var(--accent); }

.howto {
  list-style: none;
  counter-reset: howto;
  margin: calc(var(--step) * 2) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--step) * 1.25);
}
.howto li {
  counter-increment: howto;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: calc(var(--step) * 1.25);
  align-items: baseline;
}
.howto li::before {
  content: counter(howto);
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.howto .why { color: var(--ink-soft); font-size: 13.5px; }

/* "Email a note": the notes+ address beside the capture address. */
.notes-lede { margin: calc(var(--step) * -0.5) 0 calc(var(--step) * 2); color: var(--ink-soft); max-width: 46rem; }
.notes-dest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--step) * 0.75);
  margin: 0 0 calc(var(--step) * 2.5);
}
.notes-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.notes-crumb.is-folder { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }
.notes-glyph { display: inline-grid; place-items: center; color: var(--ink-soft); }
.notes-crumb.is-folder .notes-glyph { color: var(--accent); }
.notes-sep { color: var(--ink-faint, var(--ink-soft)); font-size: 15px; line-height: 1; }
.notes-only { margin-left: calc(var(--step) * 0.5); color: var(--ink-soft); font-size: 13px; }
.notes-ways {
  list-style: none;
  margin: 0 0 calc(var(--step) * 2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--step) * 1.25);
}
.notes-ways li {
  display: grid;
  gap: 4px;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 1.75);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  transition: border-color 160ms ease, transform 160ms ease;
}
.notes-ways li:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); transform: translateY(-1px); }
.notes-ways strong { font-size: 14px; color: var(--ink); }
.notes-ways .why { color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.notes-mail .note strong { color: var(--ink); font-weight: 600; }

.pending-list { list-style: none; margin: 0; padding: 0; }
.pending { padding: calc(var(--step) * 1.5) 0 0; }
.pending-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--step) * 2); }
.pending-subject { margin: 0; font-family: var(--font-title); font-size: 19px; font-weight: 500; }
.pending-people { margin: calc(var(--step) * 1.25) 0 calc(var(--step) * 1.5); }
.name-chip.is-us { background: var(--surface-sunk); color: var(--ink-soft); }
.pending-form fieldset { border-left: 0; border-right: 0; padding: 0; margin: 0; }
.pending-rule { border: 0; border-top: 1px solid var(--line); margin: calc(var(--step) * 2.5) 0 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.domain-list li { padding: calc(var(--step) * 1.25) calc(var(--step) * 1.5); }
.domain-list .mono { font-size: 13px; color: var(--ink); }
.review-lede { margin: 0 0 calc(var(--step) * 1); color: var(--ink-soft); font-size: 13.5px; max-width: 40rem; }
.pending-form .rows .why { border-left: 0; padding-left: 0; margin-top: 2px; }
.danger-zone[open] > summary { margin-bottom: calc(var(--step) * 1.5); }
.danger-zone .inline-form { align-items: flex-end; gap: calc(var(--step) * 1.5); flex-wrap: wrap; }
.danger-zone .inline-form .field { margin: 0; }

.danger-zone > summary .card-title { display: block; }
button.danger,
.button.danger {
  color: var(--state-bad);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--state-bad) 45%, transparent);
}
button.danger:hover,
.button.danger:hover {
  color: var(--surface);
  background: var(--state-bad);
  border-color: var(--state-bad);
}
.mail-foot { margin-top: calc(var(--step) * 3); }

@media (max-width: 40rem) {
  .capture-address { flex-direction: column; }
  .capture-address .copy { width: 100%; }
  .pending-head { flex-direction: column; gap: calc(var(--step) * 0.5); }
  .capture-create select { min-width: 0; width: 100%; }
  .per-space-list li { grid-template-columns: 1fr; gap: calc(var(--step) * 0.5); }
  .notes-ways { grid-template-columns: 1fr; }
  .notes-only { flex-basis: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
  .notes-ways li { transition: none; }
  .notes-ways li:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Inbox Labels (`/app/labels`): the one place the house wears colour, and
   only as a label's own dot — the colour the person's mail client shows.
   Everything else is the same paper, ink and single evergreen. Auto is the
   accent (it is the product doing its job), suggest is amber (waiting on a
   person), nothing is ink-faint.
   -------------------------------------------------------------------------- */

.mono-ink { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink); }
.lab-kbd {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 0.4em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface);
}

.lab-head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--step) * 3); flex-wrap: wrap; }
.lab-head-actions { display: flex; gap: calc(var(--step) * 1); align-items: center; }
.lab-head-actions .button { padding: calc(var(--step) * 1.25) calc(var(--step) * 2.25); }

.lab-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
  outline: 2px solid color-mix(in srgb, var(--c) 24%, transparent);
  vertical-align: 0.05em;
}

.lab-saved { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--step) * 2); flex-wrap: wrap; }
.lab-saved-actions { display: inline-flex; gap: calc(var(--step) * 1); flex-wrap: wrap; }

/* The status strip: mailbox, plan, cost, queue. */
.lab-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--step) * 1.5);
  margin: 0 0 calc(var(--step) * 2.5);
}
.lab-stat {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 0.5);
  padding: calc(var(--step) * 2) calc(var(--step) * 2.25);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}
.lab-stat .eyebrow { margin: 0; }
.lab-stat strong { font-weight: 600; font-size: 15px; }
.lab-stat .muted { font-size: 12.5px; line-height: 1.45; }
.lab-stat form { margin-top: auto; padding-top: calc(var(--step) * 0.5); }
.lab-mailbox-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-stat form.lab-switch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--step) * 1.5);
  margin: 0;
  padding-top: 0;
}
.lab-big { font-family: var(--font-title); font-size: 2rem !important; font-weight: 500 !important; line-height: 1; letter-spacing: -0.02em; }
.lab-big.plus { color: var(--accent); }
.lab-big.minus { color: var(--state-bad); }
.lab-queue-link { color: inherit; text-decoration: none; transition: border-color 140ms ease, background 140ms ease; }
.lab-queue-link:hover { color: inherit; border-color: var(--accent); background: var(--accent-wash); }
.lab-meter {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-sunk);
  position: relative;
  overflow: hidden;
  margin: 2px 0;
}
.lab-meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f) * 100%); background: var(--accent); border-radius: 2px; }

/* The chip bar. */
.lab-bar { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 0.75); margin: 0 0 calc(var(--step) * 3); }
.lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 140ms ease, transform 140ms ease;
}
a.lab-chip:hover { color: var(--ink); border-color: var(--ink-faint); transform: translateY(-1px); }
.lab-chip.add { color: var(--accent); border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lab-chip.add:hover { color: var(--accent); border-color: var(--accent); }
.lab-chip.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.lab-chip.is-off { color: var(--ink-faint); border-style: dashed; }
.lab-chip-tail { color: var(--ink-faint); }

/* Rows: one label per line. */
.lab-rows { list-style: none; margin: 0; padding: 0; }
.lab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  border-top: 1px solid var(--line);
  margin: 0 calc(var(--step) * -1.5);
  padding: 0 calc(var(--step) * 1.5);
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
}
.lab-row:first-child { border-top: 0; }
.lab-row:hover { background: var(--surface-sunk); }
.lab-row-main { display: flex; align-items: baseline; gap: calc(var(--step) * 1.5); flex: 1; min-width: 0; padding: calc(var(--step) * 1.5) 0; color: inherit; text-decoration: none; }
.lab-row-main:hover { color: inherit; }
.lab-row-main .lab-dot { transform: translateY(1px); }
.lab-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lab-row-name { font-family: var(--font-title); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.lab-row-desc { color: var(--ink-soft); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.lab-row-stats { font-size: 12px; color: var(--ink-faint); }
.lab-version { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0.02em; }
.lab-group {
  display: inline-block;
  margin-left: 4px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  vertical-align: 0.15em;
}
.lab-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--state-idle-wash);
  color: var(--state-idle);
  white-space: nowrap;
}
.lab-badge.suggest { background: var(--state-wait-wash); color: var(--state-wait); }
.lab-badge.cal { background: var(--state-busy-wash); color: var(--state-busy); }
.lab-badge.free { background: var(--surface-sunk); color: var(--ink-faint); }

.lab-rule-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lab-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--accent-wash);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.lab-rule.never { background: var(--state-bad-wash); border-color: color-mix(in srgb, var(--state-bad) 22%, transparent); }
.lab-rule.more { background: var(--surface-sunk); border-color: var(--line); color: var(--ink-faint); }
.lab-rule.is-new { animation: lab-in 260ms ease-out both; }

.lab-empty { border: 0; min-height: 0; padding: calc(var(--step) * 1) 0 0; align-items: flex-start; }
.lab-empty .empty-title { font-size: 1.25rem; font-weight: 500; }
.lab-empty .button { margin-top: calc(var(--step) * 1); }

/* The gallery. */
.lab-gallery { margin: 0 0 calc(var(--step) * 3); }
.lab-section-head { margin: 0 0 calc(var(--step) * 1.5); }
.lab-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: calc(var(--step) * 1.5); }
.lab-template {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 1);
  padding: calc(var(--step) * 2.25);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.lab-template h3 { margin: 0; font-family: var(--font-title); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.lab-template p { margin: 0; }
.lab-template.team { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lab-template .eyebrow { margin: 0; color: var(--accent); }
.lab-template-labels { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.lab-added { margin-top: auto !important; padding-top: calc(var(--step) * 0.5); color: var(--accent); font-size: 13px; font-weight: 500; }
.lab-template form { margin-top: auto; padding-top: calc(var(--step) * 0.5); }

/* The free labels. */
.lab-free-lede { color: var(--ink-soft); font-size: 13.5px; max-width: 44rem; }
.lab-free-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: calc(var(--step) * 1); }
.lab-free {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: calc(var(--step) * 1.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease;
}
.lab-free:hover { color: inherit; border-color: var(--ink-faint); }
.lab-free-name { font-weight: 600; font-size: 14px; }
.lab-free .muted { font-size: 12.5px; }

.lab-proposal { border-left: 3px solid var(--accent); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--step) * 2); flex-wrap: wrap; }
.lab-proposal p { margin: 0; }
.lab-proposal .eyebrow { margin-bottom: 4px; }

/* ---- The editor --------------------------------------------------------- */

.lab-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: calc(var(--step) * 3);
  align-items: start;
  margin: 0 0 calc(var(--step) * 3);
}
.lab-form { display: flex; flex-direction: column; gap: calc(var(--step) * 2.5); min-width: 0; }
.lab-form .field { margin: 0; }
.lab-form input[type="text"], .lab-form textarea, .lab-form select { max-width: none; }
.lab-name-row { display: flex; gap: calc(var(--step) * 2); align-items: flex-end; flex-wrap: wrap; }
.lab-name { flex: 1 1 14rem; }
.lab-name input { font-size: 16px; font-weight: 600; }
.lab-swatches { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 17rem; }
.lab-swatches legend { width: 100%; }
.lab-swatch { position: relative; cursor: pointer; }
.lab-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lab-swatch span:not(.visually-hidden) {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c);
  transition: transform 120ms ease;
}
.lab-swatch:hover span:not(.visually-hidden) { transform: scale(1.12); }
.lab-swatch input:checked + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.lab-swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.lab-describe textarea {
  font-size: 15.5px;
  line-height: 1.5;
  min-height: 5.5rem;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 1.75);
  resize: vertical;
}
.lab-hint { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 12.5px; }
.lab-hint.is-bad { color: var(--state-bad); }

.lab-card {
  position: relative;
  padding: calc(var(--step) * 2.25);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  transition: border-color 260ms ease, opacity 200ms ease;
}
.lab-card.is-fresh { border-color: var(--accent); }
.lab-card.is-busy .lab-card-body { opacity: 0.45; animation: lab-breathe 1.2s ease-in-out infinite; }
.lab-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--step) * 1); margin-bottom: calc(var(--step) * 1.25); }
.lab-card-head .eyebrow { margin: 0; }
.lab-card-state { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.lab-q { font-family: var(--font-title); font-size: 17.5px; font-weight: 500; line-height: 1.35; margin: 0 0 calc(var(--step) * 1.25); }
.lab-crit { display: grid; grid-template-columns: 1.25rem 1fr; gap: 6px; margin: 0 0 calc(var(--step) * 0.75); font-size: 14px; }
.lab-crit p { margin: 0; }
.lab-crit-mark { font-weight: 700; line-height: 1.55; }
.lab-crit.yes .lab-crit-mark { color: var(--accent); }
.lab-crit.no .lab-crit-mark { color: var(--state-bad); }
.lab-excl { list-style: none; margin: 0 0 0 1.25rem; padding: 0 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.lab-excl:empty { display: none; }
.lab-excl li { font-size: 12px; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--state-bad-wash); color: var(--state-bad); }
.lab-bulk { margin: calc(var(--step) * 1) 0 0; font-size: 12.5px; color: var(--state-busy); }
.lab-card-empty { display: none; margin: 0; color: var(--ink-faint); font-size: 14px; }
.lab-card.is-empty .lab-card-body > :not(.lab-card-empty) { display: none; }
.lab-card.is-empty .lab-card-empty { display: block; }
.lab-card.is-empty .lab-card-edit { display: none; }
.lab-card-edit { margin-top: calc(var(--step) * 1.5); }
.lab-card-edit > summary { cursor: pointer; color: var(--accent); font-size: 13px; list-style: none; }
.lab-card-edit > summary::-webkit-details-marker { display: none; }
.lab-card-edit[open] > summary { margin-bottom: calc(var(--step) * 1.5); }
.lab-card-edit .field { margin: 0 0 calc(var(--step) * 1.25); }
.lab-card-foot { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--step) * 1); margin-top: calc(var(--step) * 1.5); }
.lab-card.free p { margin: calc(var(--step) * 0.5) 0 0; }

.lab-shape, .lab-rules, .lab-examples { border: 0; padding: 0; margin: 0; }
.lab-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-sunk); border: 1px solid var(--line); gap: 2px; flex-wrap: wrap; }
.lab-seg label { position: relative; cursor: pointer; }
.lab-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lab-seg span { display: block; padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-soft); transition: background 140ms ease, color 140ms ease; }
.lab-seg input:checked + span { background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 5px 13px; }
.lab-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.lab-shape-more { margin-top: calc(var(--step) * 1.5); }

.lab-rules .eyebrow, .lab-examples .eyebrow { margin-bottom: calc(var(--step) * 1); }
.lab-rule-list { list-style: none; margin: 0 0 calc(var(--step) * 1); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lab-rule-list:empty { display: none; }
.lab-rule-list .lab-rule { font-size: 12px; padding: 3px 4px 3px 10px; }
.lab-rule-x {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 11px;
  cursor: pointer;
}
.lab-rule-x:hover { background: var(--surface); color: var(--ink); border: 0; }
.lab-rule-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lab-rule-add select { width: auto; max-width: none; padding: 7px 10px; font-size: 13px; }
.lab-rule-add input[type="text"] { flex: 1 1 10rem; width: auto; padding: 7px 10px; font-size: 13px; }

.lab-example { display: flex; gap: calc(var(--step) * 1); align-items: flex-start; padding: calc(var(--step) * 1) calc(var(--step) * 1.25); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 6px; }
.lab-example p { flex: 1; margin: 0; font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; }

.lab-savebar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 1.5);
  flex-wrap: wrap;
  padding: calc(var(--step) * 1.5) 0;
  background: var(--ground);
  border-top: 1px solid var(--line);
}
.lab-savebar .lab-save { padding: calc(var(--step) * 1.25) calc(var(--step) * 3); font-size: 14.5px; }
.lab-archive { margin-left: auto; }
.lab-error { margin: 0 0 calc(var(--step) * 2); }

/* The preview. */
.lab-preview {
  position: sticky;
  top: calc(var(--step) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 1.5);
  max-height: calc(100vh - var(--step) * 4);
  padding: calc(var(--step) * 2.5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}
.lab-preview > * { flex-shrink: 0; }
.lab-preview > .lab-prows { flex: 1 1 0; min-height: 14rem; }
.lab-editor [hidden], .lab-preview [hidden] { display: none !important; }
.lab-preview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--step) * 1.5); }
.lab-preview-head .eyebrow { margin-bottom: 2px; }
.lab-preview-head p { margin: 4px 0 0; font-size: 12.5px; }
.lab-run { flex: none; }

.lab-slider { position: relative; height: 54px; margin: 0 4px; }
.lab-track { position: absolute; left: 0; right: 0; top: 13px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-sunk); }
.lab-track .seg { position: absolute; top: 0; bottom: 0; }
.lab-track .seg.none { left: 0; width: var(--s); background: var(--line-strong); }
.lab-track .seg.suggest { left: var(--s); width: calc(var(--a) - var(--s)); background: var(--state-wait); opacity: 0.75; }
.lab-track .seg.auto { left: var(--a); right: 0; background: var(--accent); }
.lab-range {
  position: absolute;
  left: -9px;
  right: -9px;
  width: calc(100% + 18px);
  top: 3px;
  height: 26px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.lab-range::-webkit-slider-runnable-track { background: transparent; height: 26px; }
.lab-range::-moz-range-track { background: transparent; height: 26px; }
.lab-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  cursor: grab;
  transition: transform 120ms ease;
}
.lab-range.suggest::-webkit-slider-thumb { border-color: var(--state-wait); }
.lab-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.lab-range::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: grab; }
.lab-range.suggest::-moz-range-thumb { border-color: var(--state-wait); }
.lab-range:focus-visible { outline: none; }
.lab-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab-slider-labels { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.lab-slider-labels strong { color: var(--ink); font-weight: 600; }

.lab-counts { margin: 0; font-size: 15px; color: var(--ink-soft); }
.lab-counts strong { color: var(--ink); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-counts .lab-n-auto { color: var(--accent); }
.lab-counts .lab-n-suggest { color: var(--state-wait); }
.lab-learning { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); }
.lab-learning:empty { display: none; }
.lab-calnote { margin: 0; padding: calc(var(--step) * 1) calc(var(--step) * 1.5); border-radius: var(--radius-sm); background: var(--state-wait-wash); color: var(--ink-soft); font-size: 12.5px; }
.lab-cost { margin: 0; font-size: 12px; color: var(--ink-faint); }
.lab-cost strong { color: var(--ink); font-weight: 600; }

.lab-prows {
  list-style: none;
  margin: 0 calc(var(--step) * -1);
  padding: 0;
  overflow-y: auto;
  min-height: 3rem;
  flex: 1 1 auto;
  border-top: 1px solid var(--line);
}
.lab-prows.is-loading::after {
  content: "Reading…";
  display: block;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 1);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  animation: lab-breathe 1.2s ease-in-out infinite;
}
.lab-prow { border-bottom: 1px solid var(--line); animation: lab-in 220ms ease-out both; }
.lab-prow summary {
  display: grid;
  grid-template-columns: 56px 2.6rem minmax(0, 1fr) 5.2rem;
  gap: calc(var(--step) * 1.25);
  align-items: center;
  padding: 9px calc(var(--step) * 1);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
}
.lab-prow summary::-webkit-details-marker { display: none; }
.lab-prow summary:hover { background: var(--surface-sunk); }
.lab-pbar { display: block; height: 6px; border-radius: 3px; background: var(--surface-sunk); overflow: hidden; }
.lab-pbar > span { display: block; height: 100%; width: var(--w); background: var(--ink-faint); border-radius: 3px; transition: width 300ms ease, background 200ms ease; }
.lab-pbar.wide { height: 4px; margin: calc(var(--step) * 1) 0 calc(var(--step) * 1.5); }
.lab-prow.auto .lab-pbar > span, .lab-qcard .lab-pbar > span { background: var(--accent); }
.lab-prow.suggest .lab-pbar > span { background: var(--state-wait); }
.lab-pval { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.lab-psubject { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; color: var(--ink); }
.lab-psubject, .lab-psubject .lab-pfrom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-pfrom { font-size: 12px; color: var(--ink-faint); }
.lab-pdecision { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); text-align: right; white-space: nowrap; }
.lab-prow.auto .lab-pdecision { color: var(--accent); font-weight: 600; }
.lab-prow.suggest .lab-pdecision { color: var(--state-wait); font-weight: 600; }
.lab-prow.none .lab-psubject { color: var(--ink-soft); }
.lab-pwhy { margin: 0; padding: 0 calc(var(--step) * 1) calc(var(--step) * 1.25) calc(56px + 2.6rem + var(--step) * 3.5); font-size: 12px; color: var(--ink-faint); }
.lab-prow-note { padding: calc(var(--step) * 1.5) calc(var(--step) * 1); font-size: 13px; color: var(--state-wait); }
.lab-preview-empty { margin: 0; color: var(--ink-faint); font-size: 13.5px; text-align: center; padding: calc(var(--step) * 3) 0; }
.lab-preview-foot { margin: 0; font-size: 11.5px; }

.lab-history .lab-versions { list-style: none; margin: 0; padding: 0; }
.lab-versions li { display: flex; align-items: center; gap: calc(var(--step) * 1.5); padding: calc(var(--step) * 1) 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lab-versions li:first-child { border-top: 0; }
.lab-versions .muted { flex: 1; font-size: 12.5px; }

/* ---- The queue ----------------------------------------------------------- */

.lab-queue-wrap { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 18rem); gap: calc(var(--step) * 3); align-items: start; }
.lab-queue-side { position: sticky; top: calc(var(--step) * 2); display: flex; flex-direction: column; gap: calc(var(--step) * 1.5); padding: calc(var(--step) * 2.25); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.lab-queue-side .eyebrow { margin: 0; }
.lab-queue-side p { margin: 0; font-size: 12.5px; }
.lab-queue-counts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.lab-queue-counts li { display: flex; align-items: center; gap: 8px; }
.lab-queue-counts .count { margin-left: auto; }
.lab-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 12.5px; color: var(--ink-soft); align-items: center; }
.lab-keys dd { margin: 0; }
.lab-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--step) * 1.5); max-width: 46rem; }
.lab-qcard {
  padding: calc(var(--step) * 2.5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 240ms ease, opacity 240ms ease, border-color 140ms ease;
}
.lab-qcard:focus { outline: none; border-color: var(--accent); }
.lab-qcard.is-yes { transform: translateX(24px); opacity: 0; }
.lab-qcard.is-no { transform: translateX(-24px); opacity: 0; }
.lab-qhead { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--step) * 1); }
.lab-qsubject { margin: calc(var(--step) * 1.5) 0 2px; font-family: var(--font-title); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.lab-qform { display: flex; gap: calc(var(--step) * 1); flex-wrap: wrap; align-items: center; }
.lab-qform .button { padding: calc(var(--step) * 1) calc(var(--step) * 2.25); }

/* ---- Re-run ---------------------------------------------------------------- */

.lab-days { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 calc(var(--step) * 2); }
.lab-diffsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--step) * 1.5); margin: 0 0 calc(var(--step) * 3); }
.lab-diff { list-style: none; margin: calc(var(--step) * 1.5) 0 0; padding: 0; }
.lab-diff li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto auto; gap: calc(var(--step) * 1.25); align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.lab-diff-mark { font-family: var(--font-mono); font-weight: 700; }
.lab-diff-mark.plus { color: var(--accent); }
.lab-diff-mark.minus { color: var(--state-bad); }
.lab-versus { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--step) * 2); }
.lab-versus > div { padding: calc(var(--step) * 1.5); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ---- The ⌘K palette ------------------------------------------------------- */

.lab-palette {
  width: min(32rem, calc(100vw - 2rem));
  margin: 14vh auto auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.lab-palette::backdrop { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.lab-palette-input { max-width: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: calc(var(--step) * 2) !important; font-size: 16px !important; }
.lab-palette-input:focus-visible { outline: none; }
.lab-palette-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.lab-palette-list a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; }
.lab-palette-list a:hover, .lab-palette-list a.is-first { background: var(--surface-sunk); }

.lab-nature { padding: calc(var(--step) * 2.25) 0; border-top: 1px solid var(--line); }
.lab-nature:first-of-type { border-top: 0; padding-top: calc(var(--step) * 0.5); }
.lab-nature .card-head { margin-bottom: calc(var(--step) * 1); align-items: flex-start; }
.lab-nature .pill { flex: none; }
.lab-nature .card-head .eyebrow { margin-bottom: 4px; }
.lab-nature p { margin: 0 0 calc(var(--step) * 0.75); }
.lab-nature .actions-row { margin-top: calc(var(--step) * 1.25); gap: calc(var(--step) * 1); display: flex; flex-wrap: wrap; }
.lab-nature-edit > summary { cursor: pointer; color: var(--accent); font-size: 13px; list-style: none; }
.lab-nature-edit > summary::-webkit-details-marker { display: none; }
.lab-nature-edit[open] > summary { margin-bottom: calc(var(--step) * 1.5); }
.card > .empty { padding: calc(var(--step) * 2.5); border-width: 1px; border-radius: var(--radius-sm); }

@keyframes lab-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes lab-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.8; } }

@media (max-width: 60rem) {
  .lab-queue-wrap { grid-template-columns: minmax(0, 1fr); }
  .lab-queue-side { position: static; order: -1; }
  .lab-keys { display: none; }
  .lab-status, .lab-diffsum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-editor { grid-template-columns: minmax(0, 1fr); }
  .lab-preview { position: static; max-height: none; }
  .lab-preview > .lab-prows { flex: none; min-height: 0; max-height: 34rem; }
}

@media (max-width: 40rem) {
  main { padding-left: calc(var(--step) * 2); padding-right: calc(var(--step) * 2); }
  .lab-status { grid-template-columns: minmax(0, 1fr); }
  .lab-head-actions { width: 100%; }
  .lab-palette-open, .lab-keys { display: none !important; }
  .lab-head-actions .button { flex: 1; justify-content: center; }
  .lab-row { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: calc(var(--step) * 1.25); }
  .lab-row-main { padding-bottom: calc(var(--step) * 0.75); }
  .lab-row-side { flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(var(--step) * 1); padding-left: calc(10px + var(--step) * 1.5); text-align: left; }
  .lab-row-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lab-prow summary { grid-template-columns: 26px 2.1rem minmax(0, 1fr) auto; gap: calc(var(--step) * 1); }
  .lab-prow.none .lab-pdecision { display: none; }
  .lab-pwhy { padding-left: calc(var(--step) * 1); }
  .lab-swatches { max-width: none; }
  .lab-versus { grid-template-columns: 1fr; }
  .lab-diff li { grid-template-columns: 1.25rem minmax(0, 1fr) auto; }
  .lab-diff li .lab-version { display: none; }
  .lab-savebar .lab-save { flex: 1; justify-content: center; }
  .lab-proposal { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-prow, .lab-rule.is-new, .lab-prows.is-loading::after, .lab-card.is-busy .lab-card-body { animation: none; }
  .lab-qcard, .lab-chip, .lab-pbar > span { transition: none; }
}

/* --------------------------------------------------------------------------
   Customer email (`/app/mail`): the Outlook card (E2)

   One card, three states — connect, connected, not available — in the member
   view's register. The Connect button is Microsoft's own sign-in button (the
   `.provider-microsoft` door from the sign-in page). Status stays in the pill
   palette, never the accent; the accent is the one primary act and the "on"
   of a switch.
   -------------------------------------------------------------------------- */

.ol-title { display: flex; align-items: center; gap: calc(var(--step) * 1.5); }
.ol-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  color: var(--accent);
}
.ol-mark svg { display: block; }

.ol-lede {
  margin: 0 0 calc(var(--step) * 2.5);
  color: var(--ink-soft);
  max-width: 44rem;
  line-height: 1.55;
}

.ol-promises {
  list-style: none;
  margin: 0 0 calc(var(--step) * 3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ol-promises li {
  display: grid;
  align-content: start;
  gap: calc(var(--step) * 0.75);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}
.ol-promises strong { color: var(--ink); font-weight: 600; }
.ol-promise-label,
.ol-stats dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ol-connect .field { margin: 0 0 calc(var(--step) * 2); }
.ol-connect select { min-width: 16rem; }
.ol-options {
  display: grid;
  gap: calc(var(--step) * 1);
  margin: 0 0 calc(var(--step) * 3);
  padding: 0;
  border: 0;
}
.ol-option {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: calc(var(--step) * 1.25);
  align-items: start;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 1.75);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.ol-option:hover { border-color: var(--line-strong); }
.ol-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-wash);
}
.ol-option input { margin: 3px 0 0; accent-color: var(--accent); }
.ol-option-text { display: grid; gap: 3px; min-width: 0; }
.ol-option-text strong {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 0.75);
  font-weight: 600;
  color: var(--ink);
}
.ol-option-text .why { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.ol-option-text code { font-family: var(--font-mono); font-size: 12px; }
.ol-tag {
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ol-cta { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--step) * 1.5) calc(var(--step) * 2.5); }
.ol-cta .muted { max-width: 22rem; }
.ol-button { min-width: 15.5rem; cursor: pointer; }
.ol-button.ol-compact { min-width: 0; height: 40px; margin-top: calc(var(--step) * 1.5); font-size: 14px; }

.ol-notice {
  margin: 0 0 calc(var(--step) * 2.5);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2);
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.ol-notice p { margin: 0 0 calc(var(--step) * 0.75); }
.ol-notice p:last-child { margin-bottom: 0; }
.ol-notice-title { font-weight: 600; font-size: 14.5px; }
.ol-notice.is-wait {
  background: var(--state-wait-wash);
  border-color: color-mix(in srgb, var(--state-wait) 35%, transparent);
}
.ol-notice.is-wait .ol-notice-title { color: var(--state-wait); }
.ol-notice.is-bad {
  background: var(--state-bad-wash);
  border-color: color-mix(in srgb, var(--state-bad) 35%, transparent);
}
.ol-notice.is-bad .ol-notice-title { color: var(--state-bad); }
.ol-admin-link { margin: calc(var(--step) * 1.5) 0 0; }
.ol-admin-link .capture-value { font-size: 12px; font-weight: 400; background: var(--surface); }

.ol-account {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--step) * 0.5) calc(var(--step) * 1.5);
  margin: calc(var(--step) * -0.5) 0 calc(var(--step) * 2.5);
}
.ol-address { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }

.ol-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ol-stats > div {
  display: grid;
  align-content: space-between;
  gap: calc(var(--step) * 0.5);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2);
  background: var(--surface);
}
.ol-stats > div + div { border-left: 1px solid var(--line); }
.ol-stats dd {
  margin: 0;
  font-family: var(--font-title);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ol-stats dd.is-wait { color: var(--state-wait); }

.ol-facts { margin-bottom: calc(var(--step) * 3); }
.ol-facts dd { font-size: 14px; line-height: 1.5; }
.ol-scopes { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 0.75); }
.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px calc(var(--step) * 1.25);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  border: 1px solid var(--line);
}
.scope-chip.is-on { background: var(--accent-wash); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.scope-chip.is-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.scope-chip.is-off { color: var(--ink-faint); border-style: dashed; }

.ol-switches {
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ol-switch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--step) * 2);
  margin: 0;
  padding: calc(var(--step) * 1.75) 0;
}
.ol-switch-row + .ol-switch-row { border-top: 1px solid var(--line); }

/* A switch is a submit button: it posts the opposite of what it shows. */
button.switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-sunk);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
button.switch:hover { background: var(--state-idle-wash); border-color: var(--ink-faint); }
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
button.switch.is-on { background: var(--accent); border-color: var(--accent); }
button.switch.is-on:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.switch.is-on .switch-knob { transform: translateX(18px); }
button.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ol-actions { margin-top: calc(var(--step) * 2.5); align-items: flex-start; }
.ol-disconnect > summary { list-style: none; cursor: pointer; }
.ol-disconnect > summary::-webkit-details-marker { display: none; }
.ol-disconnect[open] > summary { background: var(--surface-sunk); color: var(--ink); }
.ol-disconnect-body {
  margin-top: calc(var(--step) * 1.5);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2);
  max-width: 36rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  font-size: 13.5px;
  line-height: 1.55;
}
.ol-disconnect-body p { margin: 0 0 calc(var(--step) * 1.5); }
.ol-empty { margin: 0; }
.ol-switch-row .why a { white-space: nowrap; }

@media (prefers-color-scheme: dark) {
  .switch-knob { background: var(--ink); box-shadow: none; }
  button.switch.is-on .switch-knob { background: var(--accent-ink); }
  .ol-admin-link .capture-value { background: var(--surface-sunk); }
}

@media (max-width: 40rem) {
  .ol-promises { grid-template-columns: 1fr; }
  .ol-stats dd { font-size: 24px; }
  .ol-stats > div { padding: calc(var(--step) * 1.5) calc(var(--step) * 1.25); }
  .ol-connect select { min-width: 0; width: 100%; }
  .ol-button { width: 100%; min-width: 0; }
  .ol-cta .muted { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .switch-knob, button.switch, .ol-option { transition: none; }
}
.ol-stats dd a { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.ol-stats dd a:hover { border-bottom-style: solid; }
.ol-stats dd.is-wait a { color: var(--state-wait); }
@media (max-width: 40rem) {
  .ol-facts { grid-template-columns: 1fr; row-gap: 2px; }
  .ol-facts dd + dt { margin-top: calc(var(--step) * 1.5); }
  .ol-facts .mono { display: none; }
  .ol-stats dt { font-size: 9.5px; letter-spacing: 0.06em; }
}
@media (max-width: 40rem) {
  .card.outlook > .card-head { flex-wrap: wrap; row-gap: calc(var(--step) * 1.25); }
  .ol-title .eyebrow { white-space: nowrap; }
}
.card.outlook > .card-head > .pill { flex: none; }
/* Not `.pill.pending`: `.pending` is the review list's item class above. */
.pill.ol-wait { background: var(--state-wait-wash); color: var(--state-wait); }

/* --------------------------------------------------------------------------
   17  Accounts: the list and the brief (`/app/accounts`, customer-context §5.2)

   The page a person reads before they say something to a customer. It leads
   with what we promised and whether it holds, so the promise card is the one
   element allowed a little presence: a serif deliverable, a health chip and a
   runway — a hairline from the day it was promised to the day it is due, with
   today on it and, past its end in clay, a decision that schedules delivery
   later than promised.

   Health is a STATE and wears the state washes, never the accent: overdue and
   at risk clay, due soon amber, delivered blue, on track and unknown quiet
   neutral. Drift is amber too — the CRM may be behind, which is a question
   rather than a fault. Citations are tiny mono keys (D3) that open the
   document; the tier disc from section 14 says how much the document counts.
   -------------------------------------------------------------------------- */

.account-sum {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 1.25);
  margin: calc(var(--step) * 2) 0 0;
  color: var(--ink-soft);
}

.dot-sep { color: var(--ink-faint); }

.section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: calc(var(--step) * 3) 0 calc(var(--step) * 1.25);
}

/* ---- Health chips ---------------------------------------------------------- */

.hchip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 0.75);
  padding: 3px calc(var(--step) * 1.25);
  border-radius: 999px;
  background: var(--state-idle-wash);
  color: var(--state-idle);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.35;
}

.hchip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.hchip-n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}

.hchip.at-risk,
.hchip.overdue { background: var(--state-bad-wash); color: var(--state-bad); }
.hchip.due-soon,
.hchip.drift { background: var(--state-wait-wash); color: var(--state-wait); }
.hchip.delivered { background: var(--state-busy-wash); color: var(--state-busy); }
.hchip.closed,
.hchip.none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-faint); }
.hchip.none::before { display: none; }

/* ---- The list ------------------------------------------------------------------ */

.account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--step) * 1);
}

.account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.25rem;
  align-items: center;
  gap: calc(var(--step) * 2);
  padding: calc(var(--step) * 2) calc(var(--step) * 2.5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.account-row:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface);
  transform: translateY(-1px);
}

.account-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ar-main { display: grid; gap: 2px; min-width: 0; }

.ar-name {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5);
  color: var(--ink-soft);
  font-size: 13px;
}

.ar-meta .mono { word-break: normal; }

.ar-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--step) * 0.75);
}

.ar-go {
  color: var(--ink-faint);
  transition: transform 160ms ease, color 160ms ease;
}

.account-row:hover .ar-go {
  color: var(--accent);
  transform: translateX(3px);
}

/* ---- The brief: the hero ----------------------------------------------------------- */

.account-hero { margin: 0 0 calc(var(--step) * 3.5); }

.account-hero .page-title { font-size: 2.6rem; letter-spacing: -0.025em; }

.account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1) calc(var(--step) * 2.5);
  margin: 0 0 calc(var(--step) * 2);
  color: var(--ink-soft);
  font-size: 14px;
}

.account-meta .mono { font-size: 12.5px; word-break: normal; }
.account-meta strong { color: var(--ink); font-weight: 500; }

.health-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--step) * 1);
}

.health-asof {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 calc(var(--step) * 3);
  align-items: start;
}

@media (min-width: 66rem) {
  .account-grid { grid-template-columns: minmax(0, 1fr) 21.5rem; }
  .account-side { position: sticky; top: calc(var(--step) * 2); }
}

/* ---- Citations --------------------------------------------------------------------- */

a.cite {
  display: inline-block;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  vertical-align: 1px;
  transition: background-color 140ms ease, color 140ms ease;
}

a.cite:hover {
  background: var(--accent-wash);
  color: var(--accent);
}

/* ---- Promises ---------------------------------------------------------------------- */

.promise {
  position: relative;
  padding: calc(var(--step) * 2.25) calc(var(--step) * 2.5) calc(var(--step) * 2.25) calc(var(--step) * 3);
  margin: 0 0 calc(var(--step) * 1.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 160ms ease;
}

.promise:hover { border-color: var(--line-strong); }

/* The rail: the health, as a 3px edge. */
.promise::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--state-idle);
  opacity: 0.55;
}

.promise.at-risk::before,
.promise.overdue::before { background: var(--state-bad); opacity: 1; }
.promise.due-soon::before { background: var(--state-wait); opacity: 1; }
.promise.delivered::before { background: var(--state-busy); opacity: 1; }
.promise.closed { background: var(--ground); }
.promise.closed .promise-what a { color: var(--ink-soft); }

.promise-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--step) * 1.25);
}

.promise-due { color: var(--ink-soft); font-size: 13.5px; }
.promise-due strong { color: var(--ink); font-weight: 600; }

.promise-what {
  font-family: var(--font-title);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: calc(var(--step) * 1.25) 0 calc(var(--step) * 0.75);
}

.promise-what a { color: var(--ink); text-decoration: none; }
.promise-what a:hover { color: var(--accent); }

.promise-who {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 0 0 calc(var(--step) * 1.5);
}

.promise-why {
  font-size: 15px;
  color: var(--ink);
  margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 1);
}

.promise.at-risk .promise-why,
.promise.overdue .promise-why { color: var(--state-bad); }

.promise-quote {
  margin: 0 0 calc(var(--step) * 1.25);
  padding: calc(var(--step) * 0.25) 0 calc(var(--step) * 0.25) calc(var(--step) * 1.5);
  border-left: 2px solid var(--line-strong);
  font-family: var(--font-title);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}

.promise-risk,
.promise-sup,
.promise-also {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: calc(var(--step) * 0.75) 0 0;
}

.promise-risk {
  padding: calc(var(--step) * 1) calc(var(--step) * 1.5);
  border-radius: var(--radius-sm);
  background: var(--state-bad-wash);
  color: var(--state-bad);
}

.promise-risk a { color: inherit; font-weight: 500; }

.promise details.noted { margin: calc(var(--step) * 1.25) 0 0; }

.closed-promises { margin-top: calc(var(--step) * 2); }

.closed-promises > summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13.5px;
  margin-bottom: calc(var(--step) * 1.5);
}

/* The runway. */
.runway {
  position: relative;
  height: 46px;
  margin: calc(var(--step) * 1) 0 calc(var(--step) * 0.5);
}

.rw-track,
.rw-span {
  position: absolute;
  top: 12px;
  height: 2px;
  border-radius: 2px;
}

.rw-track { left: 0; right: 0; background: var(--line); }
.rw-span { background: var(--ink-faint); }
.promise.at-risk .rw-span,
.promise.overdue .rw-span { background: var(--state-bad); }
.promise.due-soon .rw-span { background: var(--state-wait); }

.rw-mark,
.rw-today {
  position: absolute;
  top: 7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ink-faint);
}

.rw-mark.due { box-shadow: inset 0 0 0 2px var(--ink); background: var(--ink); }
.rw-mark.late { box-shadow: inset 0 0 0 2px var(--state-bad); background: var(--state-bad-wash); }

.rw-today {
  top: 3px;
  width: 2px;
  height: 20px;
  margin-left: -1px;
  border-radius: 1px;
  box-shadow: none;
  background: var(--accent);
}

.rw-label {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.rw-today .rw-label { top: 22px; color: var(--accent); }
.rw-mark.due .rw-label { color: var(--ink); }
.rw-mark.late .rw-label { color: var(--state-bad); }
.rw-mark.made .rw-label { transform: translateX(-12%); }

/* ---- The reconciled record ------------------------------------------------------------ */

.pairs { display: grid; margin: 0 calc(var(--step) * -1); }

.pair {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr) 6.5rem;
  gap: calc(var(--step) * 1.5);
  align-items: baseline;
  padding: calc(var(--step) * 1.25) calc(var(--step) * 1);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.pair:last-child { border-bottom: 0; }

.pair-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--line-strong);
  border-radius: 0;
}

.pair.is-drift { background: var(--state-wait-wash); border-bottom-color: transparent; }

.pair-label { font-weight: 500; }
.pv { overflow-wrap: anywhere; }
.pv-empty { color: var(--ink-faint); font-size: 13.5px; }
.pair-state { text-align: right; }

.pstate {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pstate.agrees::before { content: "✓ "; }
.pstate.drift { color: var(--state-wait); font-weight: 600; }
.pstate.drift::before { content: "≠ "; }

.deal { margin-top: calc(var(--step) * 3); }

.deal-title {
  display: flex;
  align-items: baseline;
  gap: calc(var(--step) * 1.25);
  margin: 0 0 calc(var(--step) * 1);
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 500;
}

.deal-title .eyebrow { margin: 0; }
.deal-title a { color: var(--ink); text-decoration: none; }
.deal-title a:hover { color: var(--accent); }

/* ---- What changed ------------------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7.25rem;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line-strong);
}

.timeline li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: calc(var(--step) * 3);
  padding: calc(var(--step) * 1) 0;
  position: relative;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: calc(7.25rem - 4px);
  top: calc(var(--step) * 1 + 6px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ink-faint);
}

.tl-date { font-size: 11.5px; padding-top: 2px; word-break: normal; }
.tl-body { display: grid; gap: 2px; }
.tl-what { font-size: 14px; }

.tl-delta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--step) * 1);
  font-size: 14px;
}

.tl-delta .from { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.tl-delta .arrow { color: var(--ink-faint); }
.tl-delta .to { font-weight: 500; }

/* ---- The side: risks, people, unknowns, evidence -------------------------------------- */

.risks,
.people,
.unknowns,
.doclist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.risk {
  display: grid;
  gap: 2px;
  padding: calc(var(--step) * 1.25) 0 calc(var(--step) * 1.25) calc(var(--step) * 1.5);
  border-left: 2px solid var(--line-strong);
  margin-bottom: calc(var(--step) * 1);
  font-size: 13.5px;
}

.risk.bad { border-left-color: var(--state-bad); }
.risk.wait,
.risk.drift { border-left-color: var(--state-wait); }

.risk-kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.risk.bad .risk-kind { color: var(--state-bad); }
.risk.wait .risk-kind,
.risk.drift .risk-kind { color: var(--state-wait); }

.person {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: calc(var(--step) * 1.5);
  align-items: center;
  padding: calc(var(--step) * 1) 0;
  border-bottom: 1px solid var(--line);
}

.person:last-child { border-bottom: 0; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.person.has-left .avatar { background: var(--state-wait-wash); color: var(--state-wait); }
.person-main { display: grid; gap: 1px; min-width: 0; }
.person-name { font-weight: 500; color: var(--ink); text-decoration: none; }
.person-name:hover { color: var(--accent); }
.person-meta { font-size: 13px; color: var(--ink-soft); }
.person-last { font-size: 11px; word-break: normal; }

.unknowns li {
  padding: calc(var(--step) * 0.75) 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}

.unknowns li:last-child { border-bottom: 0; }

.tierbar {
  display: flex;
  gap: 2px;
  height: 6px;
  margin: 0 0 calc(var(--step) * 1);
  border-radius: 999px;
  overflow: hidden;
}

.tb { min-width: 4px; background: var(--line-strong); }
.tb.t1, .tb-dot.t1 { background: var(--ink); }
.tb.t2, .tb-dot.t2 { background: var(--ink-soft); }
.tb.t3, .tb-dot.t3 { background: var(--ink-faint); }
.tb.t4, .tb-dot.t4 { background: var(--line-strong); }
.tb.t5, .tb-dot.t5, .tb.t0, .tb-dot.t0 { background: var(--line); }

.tierbar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 0.5) calc(var(--step) * 1.5);
  margin: 0 0 calc(var(--step) * 2);
  font-size: 12px;
  color: var(--ink-soft);
}

.tb-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: 0;
}

.doclist li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: calc(var(--step) * 1);
  padding: calc(var(--step) * 1) 0;
  border-top: 1px solid var(--line);
}

.doc-key {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  padding-top: 2px;
}

.doc-main { display: grid; gap: 4px; min-width: 0; font-size: 13.5px; }
.doc-main > a { overflow-wrap: anywhere; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--step) * 1); }
.doc-meta .mono { word-break: normal; }

.brief-foot { margin-top: calc(var(--step) * 2); }

/* ---- Motion: a short, staggered settle; nothing that moves layout --------------------- */

@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: brief-rise 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--rise, 0) * 55ms);
  }
  .account-list li {
    animation: brief-rise 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .account-list li:nth-child(2) { animation-delay: 40ms; }
  .account-list li:nth-child(3) { animation-delay: 80ms; }
  .account-list li:nth-child(n + 4) { animation-delay: 120ms; }
}

@keyframes brief-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .account-row,
  .ar-go,
  .promise,
  a.cite { transition: none; }
}

@media (max-width: 46rem) {
  .account-hero .page-title { font-size: 2rem; }
  .account-row { grid-template-columns: minmax(0, 1fr); }
  .ar-chips { justify-content: flex-start; }
  .ar-go { display: none; }
  .health-asof { margin-left: 0; width: 100%; }
  .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pair-head { display: none; }
  .pair-label { grid-column: 1 / -1; }
  .pair-state { text-align: left; grid-column: 1 / -1; }
  .timeline::before,
  .timeline li::before { display: none; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --------------------------------------------------------------------------
   Meeting summaries (`meeting-summaries-spec.md` §7.4): the panel on a
   transcript's page, the transcript with turn anchors, the edit page.
   Minutes are typeset like the brief: serif headings, a quiet rail of
   timestamps, the record's current state in its own register. Nothing here
   is the accent except the actions and the links.
   -------------------------------------------------------------------------- */

.ms-panel { padding: calc(var(--step) * 3.5) calc(var(--step) * 4); position: relative; }
.ms-head { margin: 0 0 calc(var(--step) * 2); }
.ms-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.62rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 calc(var(--step) * 1.25);
  text-wrap: balance;
}
.ms-rev-tag { color: var(--ink-faint); letter-spacing: 0.08em; }
.ms-chipline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; }
.ms-template {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent);
  font-weight: 600; font-size: 13px;
}
.ms-template::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ms-because { color: var(--ink-soft); }
.ms-partial { margin: calc(var(--step) * 1) 0 0; font-size: 13px; color: var(--state-wait); }

.ms-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 calc(var(--step) * 2.5);
  padding-bottom: calc(var(--step) * 2);
  border-bottom: 1px solid var(--line);
}
.ms-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: 600 13px/1.2 var(--font-ui);
  text-decoration: none; cursor: pointer; list-style: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.ms-action::-webkit-details-marker { display: none; }
.ms-action:hover { border-color: var(--line-strong); background: var(--surface-sunk); color: var(--ink); }
.ms-action.on { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.ms-count {
  font: 500 10.5px/1 var(--font-mono); color: var(--ink-faint);
  padding: 2px 5px; border-radius: 4px; background: var(--surface-sunk);
}
.ms-menu { position: relative; }
.ms-menu[open] > .ms-action { border-color: var(--line-strong); background: var(--surface-sunk); }
.ms-pop {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  min-width: 300px; max-width: min(92vw, 420px);
  max-height: 60vh; overflow: auto;
  padding: 8px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -18px rgba(20, 24, 22, 0.35);
}
.ms-pop.wide { min-width: 360px; }
.ms-picker { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ms-picker-group { margin: 8px 8px 4px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.ms-picker-group:first-of-type { margin-top: 4px; }
.ms-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 8px 10px; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--ink); cursor: pointer; white-space: normal;
}
.ms-pick:hover { background: var(--surface-sunk); border-color: var(--line); color: var(--ink); }
.ms-pick.current { border-color: var(--accent); background: var(--accent-wash); }
.ms-pick-name { font: 600 14px/1.3 var(--font-ui); }
.ms-pick-outline { font-size: 12px; line-height: 1.4; color: var(--ink-soft); font-weight: 400; }
.ms-pick.skip .ms-pick-name { color: var(--ink-soft); }
.ms-warn { margin: 4px 8px 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--state-wait-wash); color: var(--state-wait); font-size: 12.5px; }
.ms-quiet {
  padding: 0; border: 0; background: none; color: var(--accent);
  font: 600 12.5px/1.3 var(--font-ui); cursor: pointer;
}
.ms-quiet:hover { background: none; color: var(--accent-hover); text-decoration: underline; }

.ms-section { margin: 0 0 calc(var(--step) * 3); }
.ms-section-title {
  font-family: var(--font-title); font-weight: 600; font-size: 1.08rem;
  margin: 0 0 calc(var(--step) * 1); letter-spacing: -0.005em;
}
.ms-empty { margin: 0; color: var(--ink-faint); font-size: 14px; font-style: italic; }
.ms-removed-count { color: var(--ink-faint); font-size: 12px; font-style: normal; margin: 6px 0 0; }
.ms-items { list-style: none; margin: 0; padding: 0; }
.ms-item {
  position: relative; padding: 10px 0 10px 18px;
  border-top: 1px solid var(--line);
}
.ms-item:first-child { border-top: 0; padding-top: 4px; }
.ms-item::before {
  content: ""; position: absolute; left: 2px; top: 1.15em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong);
}
.ms-item:first-child::before { top: calc(1.15em - 6px); }
.ms-line { display: flex; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.55; }
.ms-line .ms-text { flex: 1; min-width: 0; }
.ms-line .ms-stamp { flex: none; }
.ms-text { color: var(--ink); }
.ms-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.ms-who { font-weight: 600; color: var(--ink); }
.ms-who.unsure { font-weight: 500; color: var(--state-wait); }
.ms-who.ambiguous { color: var(--state-wait); }
.ms-who + .ms-due::before { content: "· "; color: var(--ink-faint); }
.ms-stamp {
  font: 500 11.5px/1 var(--font-mono); color: var(--accent);
  padding: 3px 6px; border-radius: 4px; background: var(--accent-wash);
  text-decoration: none; letter-spacing: 0.02em; white-space: nowrap;
  transition: background 120ms ease;
}
.ms-stamp:hover { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.ms-meta .ms-stamp { margin-left: auto; }
.ms-tag {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  padding: 1px 7px; border-radius: 999px;
  font: 500 10.5px/1.5 var(--font-mono); letter-spacing: 0.06em; text-transform: lowercase;
}
.ms-tag.maybe { background: var(--state-wait-wash); color: var(--state-wait); }
.ms-tag.edited { background: var(--state-busy-wash); color: var(--state-busy); }
.ms-quote {
  margin: 6px 0 0; padding: 0 0 0 12px;
  border-left: 2px solid var(--line-strong);
  font-family: var(--font-title); font-style: italic; font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft);
}
.ms-prose { margin: 0; font-family: var(--font-title); font-size: 17px; line-height: 1.65; color: var(--ink); }
.ms-prose sup { margin-left: 3px; }
.ms-prose sup .ms-stamp { font-size: 10px; padding: 2px 4px; }
.ms-person { margin: 10px 0 2px; font: 600 13px/1.3 var(--font-ui); color: var(--ink-soft); }

.ms-table-wrap { overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ms-table th {
  text-align: left; padding: 0 12px 8px 0; color: var(--ink-faint);
  border-bottom: 1px solid var(--line-strong);
}
.ms-table td { padding: 10px 12px 10px 0; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
.ms-table td.role-person { white-space: nowrap; width: 1%; }
.ms-table td.role-due { color: var(--ink-soft); width: 18%; }
.ms-table .ms-at { width: 1%; text-align: right; padding-right: 0; }
.ms-table tr.ms-subrow td { padding-top: 0; border-bottom: 1px solid var(--line); }
.ms-table tr:has(+ tr.ms-subrow) td { border-bottom: 0; }
.ms-none { color: var(--ink-faint); }

.ms-link {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 8px 0 0; padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--surface-sunk); font-size: 13px; color: var(--ink-soft);
}
.ms-link.moved { background: var(--state-wait-wash); color: var(--state-wait); }
.ms-link-arrow { color: var(--ink-faint); }
.ms-link-kind { font: 600 10.5px/1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ms-link-state { font-weight: 600; color: inherit; }
.ms-link-open { margin-left: auto; font-size: 12.5px; }
.ms-edit-note { margin: 6px 0 0; font-size: 12.5px; color: var(--state-busy); }

.ms-removed { margin: calc(var(--step) * 1) 0 calc(var(--step) * 2); border-top: 1px dashed var(--line-strong); padding-top: calc(var(--step) * 1.5); }
.ms-removed > summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--ink-faint); }
.ms-removed > summary::-webkit-details-marker { display: none; }
.ms-show { color: var(--accent); font-weight: 600; }
.ms-removed[open] .ms-show { display: none; }
.ms-removed-lede { font-size: 12.5px; color: var(--ink-faint); margin: 8px 0; }
.ms-removed-list { margin: 0; padding: 0 0 0 18px; color: var(--ink-faint); font-size: 13px; }
.ms-removed-list li { margin: 0 0 10px; }
.ms-removed-text { margin: 0; text-decoration: line-through; text-decoration-color: var(--line-strong); }
.ms-removed-section { font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; margin-right: 8px; text-decoration: none; display: inline-block; }
.ms-removed-why { margin: 2px 0 4px; font-style: italic; }

.ms-foot { margin: calc(var(--step) * 2) 0 0; font-size: 12.5px; color: var(--ink-faint); }
.ms-mono { font-family: var(--font-mono); font-size: 11px; }
.ms-status { display: flex; align-items: center; gap: 10px; margin: 0 0 calc(var(--step) * 1.5); font-weight: 600; }
.ms-status.warn { color: var(--state-bad); font-weight: 500; }
.ms-stale, .ms-viewing, .ms-rerunning {
  margin: 0 0 calc(var(--step) * 2); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px;
}
.ms-stale { background: var(--state-wait-wash); color: var(--state-wait); }
.ms-stale p { margin: 0 0 6px; }
.ms-viewing { background: var(--state-busy-wash); color: var(--state-busy); }
.ms-rerunning { display: flex; align-items: center; gap: 10px; background: var(--surface-sunk); color: var(--ink-soft); }
.ms-shared-by { margin: -6px 0 calc(var(--step) * 2.5); font-size: 13px; color: var(--ink-soft); }
.ms-suggest p { margin: 0 0 4px; }
.ms-outline { font-size: 13px; color: var(--ink-faint); }
.ms-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: calc(var(--step) * 2); }
.ms-share-row { margin: 0; padding: 8px; }
.ms-share-row p { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.ms-revisions { list-style: none; margin: 0; padding: 0; }
.ms-revisions li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); }
.ms-revisions li.shown { background: var(--surface-sunk); }
.ms-revisions a { display: flex; gap: 8px; align-items: baseline; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.ms-rev { font: 600 11px/1 var(--font-mono); color: var(--accent); }
.ms-rev-when { font-size: 12px; color: var(--ink-faint); }
.ms-rev-current { font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }

/* Summarizing…: a shimmer over the section titles, never a spinner. */
.ms-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.ms-shimmer-section { margin: 0 0 calc(var(--step) * 2.5); }
.ms-shimmer-section .ms-section-title { color: var(--ink-faint); }
.ms-bar { height: 12px; border-radius: 6px; margin: 8px 0; background: var(--surface-sunk); position: relative; overflow: hidden; }
.ms-bar.short { width: 62%; }
@media (prefers-reduced-motion: no-preference) {
  .ms-pulse { animation: ms-pulse 1.4s ease-in-out infinite; }
  .ms-bar::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
    transform: translateX(-100%); animation: ms-shimmer 1.6s ease-in-out infinite;
  }
  .ms-turn.lit, .ms-turn:target { animation: ms-light 2.4s ease both; }
}
@keyframes ms-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes ms-shimmer { to { transform: translateX(100%); } }
@keyframes ms-light { 0% { background: var(--accent-wash); } 70% { background: var(--accent-wash); } 100% { background: transparent; } }

/* The transcript, turn by turn. */
.ms-attendees { font-size: 13px; color: var(--ink-soft); margin: 0 0 calc(var(--step) * 2); }
.ms-turns { list-style: none; margin: 0; padding: 0; }
.ms-turn { padding: 10px 12px; margin: 0 -12px; border-radius: var(--radius-sm); scroll-margin-top: 30vh; }
.ms-turn.lit { box-shadow: inset 3px 0 0 var(--accent); }
.ms-turn p { margin: 2px 0 0; font-size: 15px; line-height: 1.6; }
.ms-turn-head { display: flex; gap: 10px; align-items: baseline; }
.ms-speaker { font-weight: 600; font-size: 14px; }
.ms-turn-at, .ms-turn-key { font: 500 11px/1 var(--font-mono); color: var(--ink-faint); }
.ms-turn-key { margin-left: auto; }

/* The edit page. */
.ms-edit-section { border: 1px solid var(--line); }
.ms-edit-section legend { padding: 0 6px; }
.ms-edit-row { padding: 12px 0; border-top: 1px solid var(--line); }
.ms-edit-row:first-of-type { border-top: 0; }
.ms-edit-text textarea { width: 100%; font: 15px/1.5 var(--font-ui); }
.ms-edit-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; align-items: end; }
.ms-edit-meta label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ms-edit-meta input[type="text"], .ms-edit-meta select, .ms-edit-meta input[type="date"] { min-width: 150px; }
.ms-edit-delete { flex-direction: row !important; align-items: center; color: var(--state-bad); }
.ms-edit-row.new .meta-label { display: block; margin-bottom: 4px; }
.ms-savebar {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 0; background: linear-gradient(transparent, var(--ground) 30%);
}

@media (max-width: 640px) {
  .ms-panel { padding: calc(var(--step) * 2.5) calc(var(--step) * 2); }
  .ms-title { font-size: 1.32rem; }
  .ms-pop, .ms-pop.wide { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-width: none; max-height: 70vh; }
  .ms-table thead { display: none; }
  .ms-table, .ms-table tbody, .ms-table tr, .ms-table td { display: block; width: auto !important; }
  .ms-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ms-table tr:has(+ tr.ms-subrow) { border-bottom: 0; padding-bottom: 0; }
  .ms-table td { border: 0 !important; padding: 2px 0; white-space: normal !important; text-align: left !important; }
  .ms-table td.role-person { font-size: 13px; }
  .ms-table td.role-due { font-size: 13px; }
  .ms-table td.role-due::before { content: "Due "; color: var(--ink-faint); }
  .ms-table .ms-at { margin-top: 4px; }
  .ms-meta .ms-stamp { margin-left: 0; }
}
textarea.ms-markdown { display: none !important; }

/* ---- Summary templates (`/app/summaries`, `/admin/summaries/templates`) ----- */

.st-head { position: relative; }
.st-head-actions { margin-top: calc(var(--step) * 2); }
.st-usage { display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(var(--step) * 4); align-items: center; }
.st-big { font-family: var(--font-title); font-size: 2rem; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.st-of { font-size: 1rem; color: var(--ink-soft); font-weight: 400; letter-spacing: 0; }
.st-meter { height: 6px; border-radius: 3px; background: var(--surface-sunk); margin: 10px 0 8px; overflow: hidden; }
.st-meter span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.st-small { font-size: 12.5px; margin: 0; }
.st-switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.st-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-switch > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.st-knob {
  flex: none; position: relative; width: 38px; height: 22px; border-radius: 11px;
  background: var(--line-strong); transition: background 160ms ease; margin-top: 2px;
}
.st-knob::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); transition: transform 160ms ease; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.st-switch input:checked + .st-knob { background: var(--accent); }
.st-switch input:checked + .st-knob::after { transform: translateX(16px); }
.st-switch input:focus-visible + .st-knob { outline: 2px solid var(--accent); outline-offset: 2px; }

.st-list { list-style: none; margin: 0; padding: 0; }
.st-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); align-items: center; }
.st-row:first-child { border-top: 0; padding-top: 2px; }
.st-row.just-saved { background: linear-gradient(90deg, var(--accent-wash), transparent 60%); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--radius-sm); }
.st-row-main { min-width: 0; }
.st-name { font-family: var(--font-title); font-weight: 600; font-size: 1.08rem; color: var(--ink); text-decoration: none; }
a.st-name:hover { color: var(--accent); }
.st-version { margin-left: 8px; font: 500 11px/1 var(--font-mono); color: var(--ink-faint); }
.st-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--surface-sunk); color: var(--ink-soft); font: 500 10.5px/1.5 var(--font-mono); letter-spacing: 0.04em; vertical-align: 2px; }
.st-chip.team { background: var(--state-busy-wash); color: var(--state-busy); }
.st-chip.added { background: var(--accent-wash); color: var(--accent); margin-left: 0; }
.st-chip.changed { background: var(--state-wait-wash); color: var(--state-wait); margin-left: 0; }
.st-chip.removed { background: var(--state-bad-wash); color: var(--state-bad); margin-left: 0; }
.st-outline { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.st-row-side { display: flex; gap: 14px; align-items: center; flex: none; }
.st-cost { font: 500 11.5px/1 var(--font-mono); color: var(--ink-faint); white-space: nowrap; }
.st-archive { color: var(--ink-faint); }
.st-empty { text-align: left; }

.st-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.st-tile {
  display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); transition: border-color 140ms ease, transform 140ms ease;
}
.st-tile:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.st-tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.st-tile h3 { font-family: var(--font-title); font-size: 1.05rem; margin: 0; }
.st-when { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 10px; }
.st-tile-sections { margin: 0 0 12px; padding: 0 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--ink); flex: 1; }
.st-format { margin-left: 6px; font: 500 10px/1 var(--font-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.st-tile-foot { display: flex; justify-content: space-between; align-items: center; }

.st-rules { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-rule { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-sunk); font-size: 13px; }
.st-rule-word { font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.st-rule.never .st-rule-word { color: var(--state-bad); }
.st-rule-x { border: 0; background: none; color: var(--ink-faint); padding: 2px 6px; cursor: pointer; font-size: 12px; }
.st-rule-x:hover { color: var(--state-bad); background: none; }
.st-rule-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.st-rule-form input[type="text"] { width: 140px; }
.st-for { color: var(--ink-faint); font-size: 13px; }

/* The editor: the template on the left, what it makes on the right. */
.st-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(var(--step) * 3); align-items: start; }
.st-editor-head { margin-bottom: calc(var(--step) * 2); }
.st-name-input {
  display: block; width: 100%; border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 2px 0;
  font-family: var(--font-title); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.st-name-input:focus { outline: none; border-bottom-color: var(--accent); }
.st-when-input { display: block; width: 100%; border: 0; background: transparent; padding: 4px 0; font-size: 15px; color: var(--ink-soft); }
.st-when-input:focus { outline: none; color: var(--ink); }
.st-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.st-sections { display: flex; flex-direction: column; gap: 10px; }
.st-section { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color 140ms ease, box-shadow 140ms ease; }
.st-section:focus-within { border-color: var(--line-strong); box-shadow: 0 10px 30px -22px rgba(20, 24, 22, 0.45); }
.st-section-top { display: flex; gap: 10px; align-items: center; }
.st-handle { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunk); font: 600 11px/1 var(--font-mono); color: var(--ink-soft); }
.st-section-title { flex: 1; border: 0; background: transparent; font: 600 1.05rem/1.3 var(--font-title); color: var(--ink); padding: 2px 0; }
.st-section-title:focus { outline: none; }
.st-remove { border: 0; background: none; color: var(--ink-faint); cursor: pointer; padding: 2px 6px; }
.st-remove:hover { color: var(--state-bad); background: none; }
.st-instruction { width: 100%; margin: 8px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font: 14px/1.5 var(--font-ui); background: var(--surface); color: var(--ink); resize: vertical; }
.st-section-opts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.st-section-opts label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.st-section-opts .st-check { flex-direction: row; margin: 0 0 6px; }
.st-columns.hidden { display: none !important; }
.st-add { margin-top: 10px; }

.st-card { margin-top: calc(var(--step) * 3); padding: 16px 18px; border-radius: var(--radius); background: var(--surface-sunk); border: 1px solid var(--line); transition: opacity 200ms ease; }
.st-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
#st-card.stale { opacity: 0.55; }
.st-card-empty p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.st-read { padding: 10px 0; border-top: 1px solid var(--line); }
.st-read:first-child { border-top: 0; padding-top: 0; }
.st-read-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.st-read-title { font-weight: 600; font-size: 14px; }
.st-kind { font: 500 10.5px/1.5 var(--font-mono); padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
.st-crit { margin: 2px 0; font-size: 13.5px; line-height: 1.45; }
.st-crit.yes span { color: var(--accent); font-weight: 700; }
.st-crit.no span { color: var(--state-bad); font-weight: 700; }
.st-flag { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; background: var(--state-wait-wash); color: var(--state-wait); }
.st-flag.rating { background: var(--state-bad-wash); color: var(--state-bad); }
.st-flag p { margin: 0 0 6px; }
.st-read-edit { margin-top: 6px; }
.st-read-edit summary { cursor: pointer; font-size: 12px; color: var(--accent); list-style: none; }
.st-read-edit summary::-webkit-details-marker { display: none; }
.st-read-edit label { display: block; margin-top: 6px; }
.st-read-edit textarea { width: 100%; font-size: 13px; }
.st-read-by { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); }

.st-right { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.st-preview { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.st-preview-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.st-meeting { width: 100%; margin-top: 4px; }
.st-preview-body { padding: 16px; min-height: 220px; max-height: 60vh; overflow: auto; }
.st-preview-hint { color: var(--ink-faint); font-size: 14px; margin: 40px 0; text-align: center; }
.st-preview-meeting { font: 500 11px/1 var(--font-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.st-landed { animation: brief-rise 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.st-preview-done { font-size: 12.5px; color: var(--ink-faint); margin: 8px 0 0; }
.st-preview-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-sunk); }
.st-cost-line { font: 500 11.5px/1.4 var(--font-mono); color: var(--ink-soft); }
.st-savebar { display: flex; align-items: center; gap: 12px; }
.st-changes { list-style: none; padding: 0; margin: 0 0 16px; }
.st-changes li { padding: 6px 0; }

@media (max-width: 860px) {
  .st-grid, .st-usage { grid-template-columns: 1fr; }
  .st-right { position: static; }
}
@media (max-width: 640px) {
  .st-row { flex-direction: column; align-items: flex-start; }
  .st-row-side { flex-wrap: wrap; }
  .st-name-input { font-size: 1.5rem; }
  .reader-nav { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
}

/* The account page's meetings (`meeting-summaries-spec.md` §7.5). */
.ms-meetings { list-style: none; margin: 0; padding: 0; }
.ms-meetings > li { padding: 12px 0; border-top: 1px solid var(--line); }
.ms-meetings > li:first-child { border-top: 0; padding-top: 0; }
.ms-meeting-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.ms-meeting-title { font-weight: 600; color: var(--ink); text-decoration: none; }
.ms-meeting-title:hover { color: var(--accent); }
.ms-meeting-people { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.ms-inline { margin-top: 8px; }
.ms-inline > summary { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 600; list-style: none; }
.ms-inline > summary::-webkit-details-marker { display: none; }
.ms-inline-body { margin-top: 12px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface-sunk); }
.ms-inline-body .ms-section { margin-bottom: 18px; }

/* The editor's own controls over the form defaults (which win on specificity
   otherwise): the name is a serif headline, the section title a heading. */
.st-editor input.st-name-input,
.st-editor input.st-when-input,
.st-editor input.st-section-title {
  max-width: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: transparent; padding: 2px 0;
}
.st-editor input.st-name-input { font: 600 2rem/1.15 var(--font-title); letter-spacing: -0.02em; }
.st-editor input.st-when-input { font-size: 15px; color: var(--ink-soft); }
.st-editor input.st-section-title { font: 600 1.05rem/1.3 var(--font-title); }
.st-editor input.st-name-input:hover,
.st-editor input.st-when-input:hover,
.st-editor input.st-section-title:hover { border-bottom-color: var(--line); }
.st-editor input.st-name-input:focus,
.st-editor input.st-when-input:focus,
.st-editor input.st-section-title:focus { outline: none; border-bottom-color: var(--accent); }
.st-editor textarea.st-instruction { max-width: none; }
.st-editor .st-section-opts select { width: auto; min-width: 7.5rem; }
.st-editor .st-read-edit textarea, .st-editor select.st-meeting { max-width: none; }
.ms-edit textarea, .ms-edit input[type="text"] { max-width: none; }
@media (max-width: 640px) {
  .ms-table td.role-person:has(> .ms-none) { display: none; }
}
.st-rule-form select, .st-rule-form input[type="text"] { display: inline-block; width: auto; max-width: 16rem; }
.st-chip { white-space: nowrap; }
.st-tile-head { align-items: flex-start; }

/* --------------------------------------------------------------------------
   Calendar (`/app/calendar`, and the account brief's Meetings card)

   The page answers three questions in order — where does my calendar go,
   is anything waiting on me, is it working — and the first is drawn: two
   lanes, private on the left, shared on the right, an arrow between them
   that says what moves a meeting across. The shared lane wears the accent's
   wash because it is the one thing on the page that reaches other people;
   a proposal's "not confirmed" is a state, so it is amber, never the accent.
   The date tile is the page's one repeated object: a paper calendar leaf,
   month in mono, day in the title serif.
   -------------------------------------------------------------------------- */

.cal-micro {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cal-where .card-title { max-width: 40rem; text-wrap: balance; }
.cal-lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: calc(var(--step) * 2);
  margin-top: calc(var(--step) * 1);
}
.cal-lane {
  display: grid;
  align-content: start;
  gap: calc(var(--step) * 1.25);
  padding: calc(var(--step) * 2.25) calc(var(--step) * 2.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cal-lane p { margin: 0; }
.cal-lane strong { color: var(--ink); font-weight: 600; }
.cal-lane.is-shared {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  border-top: 3px solid color-mix(in srgb, var(--accent) 60%, var(--line));
}
.cal-lane-head { display: flex; align-items: center; gap: calc(var(--step) * 1.5); }
.cal-lane-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--surface-sunk);
  color: var(--ink-soft);
}
.cal-lane.is-shared .cal-lane-icon { background: var(--accent-wash); color: var(--accent); }
.cal-lane-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cal-lane-title {
  margin: 1px 0 0;
  font-family: var(--font-title);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.cal-lane-list {
  list-style: none;
  margin: calc(var(--step) * 0.25) 0 0;
  padding: calc(var(--step) * 1.25) 0 0;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: calc(var(--step) * 0.75);
  font-size: 13.5px;
}
.cal-lane-list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: calc(var(--step) * 1); }
.cal-lane-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0.55em 0 0 2px;
  border-radius: 50%;
  background: var(--line-strong);
}
.cal-lane.is-shared .cal-lane-list li::before { background: var(--accent); }
.cal-lane-arrow {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: calc(var(--step) * 0.75);
  width: 7.5rem;
  color: var(--ink-faint);
  text-align: center;
}
.cal-lane-arrow span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* The leaf. */
.cal-tile {
  display: inline-grid;
  grid-template-rows: auto 1fr;
  flex: none;
  width: 3rem;
  height: 3.25rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: center;
}
.cal-tile-month {
  padding: 2px 0 1px;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.cal-tile-day {
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: 21px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.cal-meta { color: var(--ink-faint); font-family: var(--font-mono); font-size: 12px; }

/* Decision 4: the question, the meeting it might be, two buttons. */
.cal-review { border-color: color-mix(in srgb, var(--state-wait) 35%, var(--line)); }
.cal-proposals { list-style: none; margin: calc(var(--step) * 2) 0 0; padding: 0; display: grid; gap: calc(var(--step) * 1.5); }
.cal-proposal {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: calc(var(--step) * 2.5);
  padding: calc(var(--step) * 2) calc(var(--step) * 2.25);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.cal-proposal-from { display: grid; gap: 3px; min-width: 0; }
.cal-proposal-transcript { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cal-proposal-transcript:hover { text-decoration: underline; }
.cal-proposal-meeting {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--step) * 1.75);
  min-width: 0;
  padding-left: calc(var(--step) * 2.5);
  border-left: 1px solid var(--line);
}
.cal-proposal-body { display: grid; gap: calc(var(--step) * 0.6); min-width: 0; }
.cal-proposal-subject {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.cal-proposal-subject:hover { text-decoration: underline; }
.cal-people { margin-top: 2px; }
.name-chip.is-more { background: transparent; border-style: dashed; color: var(--ink-faint); }
.cal-why {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 0.75);
  width: fit-content;
  padding: 2px calc(var(--step) * 1.25);
  border-radius: 999px;
  background: var(--state-wait-wash);
  color: var(--state-wait);
  font-size: 12.5px;
}
.cal-why-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cal-why.rule-1, .cal-why.rule-2 { background: var(--state-busy-wash); color: var(--state-busy); }
.cal-proposal-actions { display: grid; gap: calc(var(--step) * 0.75); justify-items: stretch; }
.cal-proposal-actions form { margin: 0; }
.cal-proposal-actions .button { width: 100%; justify-content: center; white-space: nowrap; }

/* The two vendor cards, side by side. */
.cal-providers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--step) * 2.5);
  align-items: start;
  margin: 0 0 calc(var(--step) * 3);
}
.cal-providers > .card { margin: 0; }
.cal-provider .ol-cta { flex-direction: column; align-items: flex-start; }
.cal-provider .ol-button { min-width: 0; width: 100%; max-width: 20rem; }
.cal-goes { margin: 0 0 calc(var(--step) * 2); color: var(--ink-soft); font-size: 14px; }
.ol-stats dd.is-muted { color: var(--ink-faint); }
.cal-skipped, .cal-move { margin: 0 0 calc(var(--step) * 2); font-size: 13.5px; }
.cal-skipped > summary { cursor: pointer; color: var(--ink-soft); }
.cal-skipped ul { margin: calc(var(--step) * 1) 0 0; }
.cal-skipped li { display: flex; justify-content: space-between; gap: calc(var(--step) * 2); }
.cal-move > summary { list-style: none; cursor: pointer; width: fit-content; }
.cal-move > summary::-webkit-details-marker { display: none; }
.cal-move .inline-form { margin-top: calc(var(--step) * 1.5); }

/* What is coming up. */
.cal-agenda { list-style: none; margin: 0; padding: 0; }
.cal-agenda li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--step) * 2);
  padding: calc(var(--step) * 1.5) 0;
}
.cal-agenda li + li { border-top: 1px solid var(--line); }
.cal-agenda-body { display: grid; gap: 3px; min-width: 0; }
.cal-agenda-subject { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cal-agenda-subject:hover { text-decoration: underline; }
.cal-customer, .cal-internal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px calc(var(--step) * 1.25);
  border-radius: 999px;
  font-size: 12.5px;
  white-space: nowrap;
}
.cal-customer { background: var(--state-busy-wash); color: var(--state-busy); }
.cal-customer svg { width: 14px; height: 14px; }
.cal-internal { background: var(--state-idle-wash); color: var(--state-idle); }

/* The account brief's Meetings card. */
.meetings-card .cal-micro { margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 0.5); }
.meetings-card .cal-micro:first-of-type { margin-top: 0; }
.meetings-last { font-size: 12.5px; white-space: nowrap; }
.meetings { list-style: none; margin: 0; padding: 0; }
.meeting { display: flex; align-items: center; gap: calc(var(--step) * 1.5); padding: calc(var(--step) * 1) 0; }
.meeting + .meeting { border-top: 1px solid var(--line); }
.meeting .cal-tile { width: 2.5rem; height: 2.75rem; }
.meeting .cal-tile-day { font-size: 17px; }
.meeting-main { display: grid; gap: 2px; min-width: 0; }
.meeting-subject { color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; overflow-wrap: anywhere; }
.meeting-subject:hover { text-decoration: underline; }
.meeting-meta { color: var(--ink-faint); font-size: 11.5px; }
.meetings.is-next .cal-tile { border-color: color-mix(in srgb, var(--state-busy) 40%, var(--line)); }
.meetings.is-next .cal-tile-month { background: var(--state-busy-wash); color: var(--state-busy); }

@media (max-width: 60rem) {
  .cal-providers { grid-template-columns: minmax(0, 1fr); }
  .cal-proposal { grid-template-columns: minmax(0, 1fr); gap: calc(var(--step) * 1.75); }
  .cal-proposal-meeting { padding-left: 0; border-left: 0; padding-top: calc(var(--step) * 1.75); border-top: 1px solid var(--line); }
  .cal-proposal-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 46rem) {
  .cal-lanes { grid-template-columns: minmax(0, 1fr); }
  .cal-lane-arrow { width: auto; grid-auto-flow: column; justify-content: start; padding-left: calc(var(--step) * 2.5); }
  .cal-lane-arrow svg { transform: rotate(90deg); }
  .cal-agenda li { grid-template-columns: auto minmax(0, 1fr); }
  .cal-agenda .cal-customer, .cal-agenda .cal-internal { grid-column: 2; justify-self: start; }
  .cal-provider .ol-button { max-width: none; }
}

/* The account's one Meetings section: an event with its shared minutes. */
.meeting:has(.ms-inline) { align-items: flex-start; }
.meeting-transcript { white-space: nowrap; }
.meetings .ms-inline { margin-top: 6px; }
.meetings .ms-inline > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; }
.meetings .ms-inline .ms-template { font-size: 11.5px; padding: 1px 8px 1px 6px; }
.ms-shared-who { color: var(--ink-faint); font-weight: 500; }
.meetings .ms-inline-body { padding: 12px 14px; }

/* --------------------------------------------------------------------------
   19  Tickets (`/app/tickets`, `/app/tickets/{number}`; `crate::tickets`)

   Native tickets: what the team owes a customer, and who has it. The list is
   a column of quiet rows — the number in mono, the title, the account, the
   status chip, the person — and the ticket page gives its header a little
   presence: a serif title you edit in place, status as a three-way segmented
   control, the assignee as a person. Status is a STATE and wears the state
   washes, never the accent: open blue, waiting amber, solved quiet.
   -------------------------------------------------------------------------- */

/* The masthead's Tickets link and its "assigned to you" badge. */
.nav-tickets { display: inline-flex; align-items: center; gap: 6px; }
.nav-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font: 600 10.5px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.tstatus {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.45;
  white-space: nowrap;
  background: var(--state-idle-wash); color: var(--state-idle);
}
.tstatus::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tstatus.open { background: var(--state-busy-wash); color: var(--state-busy); }
.tstatus.waiting { background: var(--state-wait-wash); color: var(--state-wait); }
.tstatus.solved { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-faint); }
.tstatus.solved::before { width: 8px; height: 8px; background: none; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 12 5 5 11-11' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 12 5 5 11-11' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor; }

.tavatar {
  width: 28px; height: 28px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-wash); color: var(--accent);
  font: 600 11.5px/1 var(--font-ui);
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px var(--surface);
}
.tavatar.sm { width: 24px; height: 24px; font-size: 10.5px; }
.tavatar.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); border: 0; }
.tavatar.none::after { content: ""; width: 40%; height: 1.5px; background: var(--line-strong); border-radius: 1px; }

/* ---- The list ---------------------------------------------------------------- */

.tickets-head { margin-bottom: calc(var(--step) * 2.5); }

.ticket-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 3px; margin: 0 0 calc(var(--step) * 2);
  width: fit-content; max-width: 100%;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.ticket-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink-soft); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.ticket-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.ticket-tab.on {
  color: var(--ink); background: var(--surface);
  box-shadow: 0 1px 2px rgba(25, 27, 26, .08), 0 0 0 1px var(--line);
}
.ticket-tab-n {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
  min-width: 1.4em; text-align: center;
}
.ticket-tab.on .ticket-tab-n { color: var(--accent); font-weight: 600; }

.ticket-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--step) * 1.25);
  margin: 0 0 calc(var(--step) * 2.5);
}
.ticket-filters select { max-width: 15rem; padding-top: 7px; padding-bottom: 7px; }
.filter-search { position: relative; flex: 1 1 16rem; max-width: 24rem; }
.filter-search svg {
  position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
  fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
.filter-search input {
  width: 100%; max-width: none;
  padding: 7px 12px 7px 33px;
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 999px;
}
.filter-search input:hover { border-color: var(--ink-faint); }
.filter-search input::placeholder { color: var(--ink-faint); }
.filters-clear { font-size: 13px; }
.filters-go[hidden], .assign-go[hidden] { display: none; }

.ticket-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ticket-list li + li { border-top: 1px solid var(--line); }
.ticket-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 7.5rem 11rem 2.75rem;
  align-items: center;
  gap: calc(var(--step) * 2);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2.5);
  color: var(--ink); text-decoration: none;
  position: relative;
  transition: background-color 140ms ease;
}
.ticket-row::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 0 2px 2px 0; background: transparent; transition: background-color 140ms ease;
}
.ticket-row:hover { background: color-mix(in srgb, var(--surface-sunk) 55%, var(--surface)); color: var(--ink); }
.ticket-row:hover::before { background: var(--accent); }
.ticket-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
.t-num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.t-main { display: grid; gap: 3px; min-width: 0; }
.t-title {
  font-weight: 600; font-size: 14.5px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-row.solved .t-title { color: var(--ink-soft); font-weight: 500; }
.t-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-faint); }
.t-account { color: var(--ink-soft); font-weight: 500; }
.t-threads { display: inline-flex; align-items: center; gap: 4px; }
.t-threads svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.t-status { justify-self: start; }
.t-assignee { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-soft); }
.t-assignee .tavatar:not(.none) { box-shadow: none; }
.t-assignee.none { color: var(--ink-faint); }
.t-assignee-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-age { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); text-align: right; }

.ticket-empty { text-align: center; padding: calc(var(--step) * 6) calc(var(--step) * 3); }
.ticket-empty .empty-title { font-family: var(--font-title); font-size: 1.3rem; font-weight: 500; margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 0.75); }
.ticket-empty p { color: var(--ink-soft); max-width: 30rem; margin-left: auto; margin-right: auto; }
.ticket-empty-mark {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
}
.ticket-empty-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

/* ---- One ticket ---------------------------------------------------------------- */

.ticket-flash {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 0 0 calc(var(--step) * 2);
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  font-size: 13.5px;
  animation: brief-rise 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ticket-flash svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ticket-flash.ok { background: var(--accent-wash); color: var(--accent); }
.ticket-flash.bad { background: var(--state-bad-wash); color: var(--state-bad); }

.ticket-hero {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  padding: calc(var(--step) * 3) calc(var(--step) * 3.5) calc(var(--step) * 3);
  margin: 0 0 calc(var(--step) * 3);
  overflow: hidden;
}
.ticket-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--state-busy);
}
.ticket-hero.waiting::before { background: var(--state-wait); }
.ticket-hero.solved::before { background: var(--line-strong); }
.ticket-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 calc(var(--step) * 1.25); }
.ticket-ref { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.04em; }
.ticket-account {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 8px; border-radius: 999px;
  background: var(--surface-sunk); color: var(--ink); text-decoration: none;
  font-size: 12.5px; font-weight: 500;
}
.ticket-account:hover { color: var(--accent); }
.ticket-account svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ticket-space { font-size: 12.5px; color: var(--ink-faint); }

.ticket-title-form { display: flex; align-items: center; gap: 10px; margin: 0 0 calc(var(--step) * 2.5); }
.ticket-title-form .ticket-title-input {
  flex: 1; min-width: 0; max-width: none;
  margin: 0 -10px; padding: 4px 10px;
  font-family: var(--font-title); font-size: 2.15rem; font-weight: 500;
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.ticket-title-form .ticket-title-input:hover { border-color: var(--line); background: var(--surface); }
.ticket-title-form .ticket-title-input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-wash); }
.ticket-title-save { opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity 140ms ease, transform 140ms ease; }
.ticket-title-save.shown,
.ticket-title-form:not(:has(.ticket-title-save.shown)) .ticket-title-save:focus { opacity: 1; pointer-events: auto; transform: none; }
.ticket-title-save.shown { margin-left: 10px; }

.ticket-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(var(--step) * 3) calc(var(--step) * 4); }
.control-label {
  display: block; margin: 0 0 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}

.segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 10px;
}
.segmented .seg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  font: 500 13px/1.2 var(--font-ui);
  color: var(--ink-soft); background: transparent; border: 0; border-radius: 7px;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.segmented .seg:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.seg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background-color 140ms ease; }
.seg.open .seg-dot { background: color-mix(in srgb, var(--state-busy) 45%, transparent); }
.seg.waiting .seg-dot { background: color-mix(in srgb, var(--state-wait) 45%, transparent); }
.segmented .seg.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(25, 27, 26, .1), 0 0 0 1px var(--line); font-weight: 600; }
.seg.on.open .seg-dot { background: var(--state-busy); box-shadow: 0 0 0 3px var(--state-busy-wash); }
.seg.on.waiting .seg-dot { background: var(--state-wait); box-shadow: 0 0 0 3px var(--state-wait-wash); }
.seg.on.solved .seg-dot { background: var(--ink-soft); }

.assign-row { display: flex; align-items: center; gap: 10px; }
.assign-row .tavatar { width: 34px; height: 34px; font-size: 12.5px; }
.assign-select { min-width: 13rem; max-width: 18rem; padding-top: 8px; padding-bottom: 8px; font-weight: 500; }
.assign-me { white-space: nowrap; }

.ticket-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 calc(var(--step) * 3); align-items: start; }
@media (min-width: 62rem) {
  .ticket-grid { grid-template-columns: minmax(0, 1fr) 19rem; }
  .ticket-side { position: sticky; top: calc(var(--step) * 2); }
}

.ticket-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticket-thread {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 140ms ease;
}
.ticket-thread:hover { border-color: var(--line-strong); }
.tt-icon {
  width: 32px; height: 32px; flex: none; border-radius: 8px;
  display: grid; place-items: center; background: var(--surface-sunk); color: var(--ink-soft);
}
.tt-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tt-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tt-subject { font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.tt-subject:hover { color: var(--accent); }
.tt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-faint); }
.tt-open { font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }

.ticket-history { list-style: none; margin: 0; padding: 0; position: relative; }
.ticket-history::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.th-event { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 7px 0; font-size: 13.5px; color: var(--ink-soft); }
.th-event strong { color: var(--ink); font-weight: 600; }
.th-dot { position: relative; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
.th-event.created .th-dot { box-shadow: inset 0 0 0 2px var(--state-busy); }
.th-event.assigned .th-dot { box-shadow: inset 0 0 0 2px var(--accent); }
.th-event.status .th-dot { box-shadow: inset 0 0 0 2px var(--state-wait); }
.th-event.thread_linked .th-dot { box-shadow: inset 0 0 0 2px var(--ink-soft); }
.th-event .tstatus { font-size: 11px; padding: 0 7px; vertical-align: 1px; }
.th-was { color: var(--ink-faint); }
.th-when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }

.ticket-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 13.5px; }
.ticket-facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }
.ticket-facts dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ticket-facts .muted { font-size: 12.5px; }
.ticket-facts .facts-more { display: block; margin-top: 2px; font-size: 12.5px; }

/* ---- The brief's tickets ---------------------------------------------------------- */

.hchip.tickets { background: var(--state-busy-wash); color: var(--state-busy); text-decoration: none; }
.hchip.tickets:hover { filter: brightness(0.97); }
.brief-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#tickets .card-head a.count { white-space: nowrap; text-decoration: none; }
#tickets .card-head a.count:hover { color: var(--accent); }
.brief-tickets a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: 4px 8px;
  padding: 8px 8px; margin: 0 -8px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: 13.5px;
}
.brief-tickets a:hover { background: var(--surface-sunk); }
.brief-tickets .t-num { font-size: 11px; }
.brief-tickets .bt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.brief-tickets .bt-side { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-faint); }
.brief-tickets .tavatar { width: 20px; height: 20px; font-size: 9px; }
.brief-tickets .tavatar:not(.none) { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .ticket-row, .ticket-tab, .segmented .seg, .ticket-title-input, .ticket-title-save, .ticket-flash { transition: none; animation: none; }
}

@media (max-width: 46rem) {
  .ticket-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .ticket-tab { padding: 6px 11px; white-space: nowrap; }
  .t-title { white-space: normal; }
  .ticket-row { grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-areas: "num main age" "num status assignee"; row-gap: 8px; }
  .t-num { grid-area: num; align-self: start; padding-top: 2px; }
  .t-main { grid-area: main; }
  .t-age { grid-area: age; align-self: start; }
  .t-status { grid-area: status; }
  .t-assignee { grid-area: assignee; justify-content: flex-end; }
  .ticket-title-form .ticket-title-input { font-size: 1.6rem; }
  .ticket-hero { padding: calc(var(--step) * 2.5) calc(var(--step) * 2); }
  .segmented { flex-wrap: wrap; }
  .assign-row { flex-wrap: wrap; }
}

/* ---- Ticket addresses: the intake card, copy fields, Unsorted ------------------- */

.intake-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: calc(var(--step) * 1.5) calc(var(--step) * 3);
  padding: calc(var(--step) * 2.25) calc(var(--step) * 3);
}
.intake-head { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.intake-mark {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center; background: var(--accent-wash); color: var(--accent);
}
.intake-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.intake-text { display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-soft); }
.intake-text strong { color: var(--ink); font-size: 14.5px; }
.intake-card .copy-field { grid-column: 1; }
.intake-rotate, .intake-setup { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; align-items: center; }
.intake-setup select { max-width: 14rem; }

.copy-field {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 5px 5px 5px 12px; border-radius: var(--radius-sm);
  background: var(--surface-sunk); border: 1px solid var(--line);
}
.copy-value {
  flex: 1; min-width: 0; background: none; padding: 0;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all;
}
.copy-button { padding: 5px 10px; font-size: 12.5px; }
.copy-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.copy-button.copied { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ticket-email-bar {
  display: grid; grid-template-columns: auto minmax(0, 38rem) auto; align-items: center; justify-content: start;
  gap: 8px 14px; margin: calc(var(--step) * -1.5) 0 calc(var(--step) * 3); padding: 0 calc(var(--step) * 0.5);
}
.ticket-email-bar .control-label { margin: 0; }
@media (max-width: 46rem) { .ticket-email-bar { grid-template-columns: minmax(0, 1fr); } }

.unsorted-row {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto auto;
  align-items: center; gap: calc(var(--step) * 1.5);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2.5);
}
.unsorted-row button { white-space: nowrap; }

@media (max-width: 46rem) {
  .intake-card { grid-template-columns: minmax(0, 1fr); }
  .intake-rotate, .intake-setup { grid-column: 1; grid-row: auto; }
  .unsorted-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .unsorted-row form { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   20  Boards (`/app/boards`, `/app/boards/{slug}`; `sproutsage_answer::boards`)

   Kanban boards over what already exists. The house's paper with lanes on
   it: each lane a sunk column with a mono count, each card a fresh sheet.
   Only two things on a card raise their voice — STALLED (amber, a state) and
   a SUGGESTION (the informational blue wash, with Move and Dismiss) — because
   those are what a person has to act on. Columns are never the accent. Done
   folds into one narrow lane. Moves settle with a short FLIP; nothing that
   moves layout animates for a reader who asked for less motion.
   -------------------------------------------------------------------------- */

main.wide { max-width: none; padding-left: calc(var(--step) * 4); padding-right: calc(var(--step) * 4); }
main.wide > .page-head,
main.wide > .card,
main.wide > .crumbs,
main.wide > form.card,
main.wide > .board-flash,
main.wide > .board-tiles,
main.wide > .card-page { max-width: 72rem; margin-left: auto; margin-right: auto; }
main.wide > .board-tiles { max-width: 72rem; }
/* The board fills the window, so the masthead lines up with it. */
body:has(main.wide .board) .masthead-inner { max-width: none; padding-left: calc(var(--step) * 4); padding-right: calc(var(--step) * 4); }

/* ---- The index ---------------------------------------------------------------- */

.boards-head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--step) * 3); }
.board-tiles {
  display: grid; gap: calc(var(--step) * 2.5);
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
}
.board-tile {
  display: flex; flex-direction: column; gap: 10px;
  padding: calc(var(--step) * 2.75) calc(var(--step) * 3) calc(var(--step) * 2.5);
  background: var(--surface); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 1px 0 rgba(25, 27, 26, .03);
  transition: transform 180ms cubic-bezier(.2,.7,.2,1), box-shadow 180ms ease, border-color 180ms ease;
  animation: brief-rise 380ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.board-tile:nth-child(2) { animation-delay: 40ms; }
.board-tile:nth-child(3) { animation-delay: 80ms; }
.board-tile:nth-child(4) { animation-delay: 120ms; }
.board-tile:hover {
  color: var(--ink); border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(25, 27, 26, .05), 0 18px 36px -22px rgba(20, 40, 32, .35);
}
.board-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tile-top { display: flex; align-items: center; gap: 10px; }
.tile-icon {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center; background: var(--accent-wash); color: var(--accent);
}
.tile-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tile-kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.tile-name { margin: 2px 0 2px; font-family: var(--font-title); font-weight: 500; font-size: 1.55rem; letter-spacing: -0.015em; line-height: 1.15; }
.tile-bar {
  display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--surface-sunk);
}
.tile-seg { min-width: 6px; background: color-mix(in srgb, var(--accent) calc(var(--tone, 50) * 1%), var(--surface-sunk)); }
.tile-seg.seg-done { background: var(--line-strong); }
.tile-seg.seg-empty { flex: 1; background: transparent; }
.tile-legend { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-soft); }
.tile-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tile-legend li.zero { color: var(--ink-faint); }
.tile-legend li.zero .tile-swatch { opacity: .45; }
.tile-legend b { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; color: var(--ink-faint); }
.tile-swatch { width: 8px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--tone, 50) * 1%), var(--surface-sunk)); }
.tile-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-faint); }
.tile-total { margin-right: auto; font-family: var(--font-mono); font-size: 11.5px; }
.tile-chip, .lede-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tile-chip::before, .lede-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tile-chip.stalled, .lede-chip.stalled { background: var(--state-wait-wash); color: var(--state-wait); }
.tile-chip.suggest, .lede-chip.suggest { background: var(--state-busy-wash); color: var(--state-busy); }

.board-empty { text-align: center; padding: calc(var(--step) * 6) calc(var(--step) * 3); }
.board-empty .empty-title { font-family: var(--font-title); font-size: 1.3rem; font-weight: 500; margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 0.75); }
.board-empty p { color: var(--ink-soft); max-width: 32rem; margin-left: auto; margin-right: auto; }
.board-empty-mark {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 16px;
  display: grid; place-items: center; background: var(--accent-wash); color: var(--accent);
}
.board-empty-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

/* ---- The board: head, filters ---------------------------------------------------- */

.board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--step) * 3); margin: 0 0 calc(var(--step) * 2); }
.board-head .crumbs { margin-bottom: calc(var(--step) * 1.25); }
.board-head .page-title { margin-bottom: 6px; }
.board-lede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: var(--ink-soft); font-size: 13.5px; }
.lede-version { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); padding: 1px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.board-head-actions .button { display: inline-flex; align-items: center; gap: 7px; }
.button-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; display: block; }

.board-flash {
  padding: 10px 14px; margin: 0 0 calc(var(--step) * 2);
  border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: 13.5px;
  animation: brief-rise 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.board-flash.ok { background: var(--accent-wash); color: var(--accent); }
.board-flash.bad { background: var(--state-bad-wash); color: var(--state-bad); }
.board-note { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 calc(var(--step) * 2); }

.board-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 calc(var(--step) * 2.25); }
.filter-select select {
  width: auto; min-width: 9rem; max-width: 15rem;
  padding: 6px 30px 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
}
.filter-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.filter-toggle input { margin: 0; accent-color: var(--state-wait); }
.filter-toggle.on { background: var(--state-wait-wash); border-color: color-mix(in srgb, var(--state-wait) 35%, transparent); color: var(--state-wait); }
.filter-n { font-family: var(--font-mono); font-size: 11px; opacity: .8; }
.board-js .filters-go { display: none; }
.filters-clear { font-size: 13px; }
.board-hint { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); display: none; }
.board-js .board-hint { display: inline; }
kbd {
  display: inline-block; min-width: 1.5em; padding: 0 5px; text-align: center;
  font: 500 11px/1.6 var(--font-mono); color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
}

/* ---- Lanes ---------------------------------------------------------------------- */

/* Phones: the columns as chips to jump between (hidden where they all fit). */
.lane-pager { display: none; }

.board-lanes {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 2px 2px calc(var(--step) * 3);
  margin: 0 calc(var(--step) * -4); padding-left: calc(var(--step) * 4); padding-right: calc(var(--step) * 4);
  scroll-padding-left: calc(var(--step) * 4);
  scrollbar-width: thin;
}
.lane {
  flex: 0 0 18.75rem; min-width: 0;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface-sunk) 78%, var(--ground));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 8px 8px;
  max-height: calc(100vh - 13rem);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.lane-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 6px 10px; margin: 0;
  list-style: none;
}
.lane-head::-webkit-details-marker { display: none; }
.lane-title { margin: 0; font: 600 13.5px/1.3 var(--font-ui); color: var(--ink); letter-spacing: -0.005em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
  min-width: 1.75em; padding: 1px 6px; text-align: center;
  border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.lane-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-strong); }
.lane-dot.tone-busy { background: var(--state-busy); }
.lane-dot.tone-warn { background: var(--state-wait); }
.lane-dot.tone-bad { background: var(--state-bad); }
.lane-dot.tone-done { background: var(--ink-faint); }
.lane-lock { display: inline-grid; place-items: center; color: var(--ink-faint); cursor: help; }
.lane-lock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.lane-cards {
  list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 8px;
  min-height: 3.5rem; overflow-y: auto; scrollbar-width: thin;
}
.lane-empty {
  display: none; padding: 16px 10px; text-align: center;
  font-size: 12.5px; color: var(--ink-faint);
  border: 1.5px dashed var(--line-strong); border-radius: 10px;
}
.lane.is-empty .lane-empty, .done-group.is-empty .lane-empty { display: block; }
.is-dragging .lane[data-accepts="true"] .lane-empty,
.is-dragging .done-group[data-accepts="true"] .lane-empty { display: block; }
.is-dragging .lane:not(.is-empty) .lane-empty { padding: 8px; }

.lane.drop-ok, .done-group.drop-ok {
  background: color-mix(in srgb, var(--accent-wash) 70%, var(--surface-sunk));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.lane.drop-no, .done-group.drop-no { background: var(--state-bad-wash); border-color: color-mix(in srgb, var(--state-bad) 30%, transparent); cursor: not-allowed; }

/* Done: one narrow lane, open on a click or when a card is dragged over it. */
.lane-done { flex-basis: 18.75rem; }
.lane-done > summary { cursor: pointer; border-radius: 8px; }
.lane-done > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lane-done:not([open]) { flex-basis: 3.4rem; padding: 10px 6px; cursor: pointer; }
.lane-done:not([open]) > summary { flex-direction: column; gap: 10px; padding: 2px 0 6px; }
.lane-done:not([open]) .lane-title { writing-mode: vertical-rl; transform: rotate(180deg); overflow: visible; flex: none; }
.lane-done:not([open]):hover { border-color: var(--line-strong); }
.done-groups { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.done-group { border-radius: 10px; padding: 2px; border: 1px solid transparent; transition: background-color 160ms ease, border-color 160ms ease; }
.done-title { display: flex; align-items: center; gap: 8px; margin: 0 6px 8px; font: 600 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.done-title .lane-count { margin-left: auto; text-transform: none; letter-spacing: 0; }

/* ---- Cards ------------------------------------------------------------------------ */

.bcard-item { list-style: none; }
.bcard {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 12px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 1px 0 rgba(25, 27, 26, .04), 0 1px 2px rgba(25, 27, 26, .03);
  cursor: grab;
  transition: transform 160ms cubic-bezier(.2,.7,.2,1), box-shadow 160ms ease, border-color 160ms ease, opacity 160ms ease;
  outline: none;
}
.bcard:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(25, 27, 26, .05), 0 10px 22px -16px rgba(20, 40, 32, .45); }
.bcard:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.bcard:active { cursor: grabbing; }
.bcard:not([draggable]) { cursor: default; }
.bcard.dragging { opacity: .35; transform: scale(.98); }
.bcard.saving::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%;
  animation: bcard-saving 900ms linear infinite;
}
@keyframes bcard-saving { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bcard.just-moved { animation: bcard-landed 900ms ease-out both; }
@keyframes bcard-landed {
  from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
  to { box-shadow: 0 1px 0 rgba(25, 27, 26, .04); }
}
.bcard.stalled { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--state-wait) 55%, transparent) 0 3px, var(--line) 3px) border-box; }

.bcard-top { display: flex; align-items: flex-start; gap: 8px; padding-right: 22px; }
.bcard-ref { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); padding-top: 2px; flex: none; }
.bcard-title {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bcard-title:hover { color: var(--accent); }
.bcard-stalled {
  flex: none; margin-top: 1px;
  padding: 0 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
  background: var(--state-wait-wash); color: var(--state-wait);
}
.bcard-account { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none; margin-top: -3px; width: fit-content; }
.bcard-account:hover { color: var(--accent); }
.bcard-sub { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.bcard-next {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-soft);
  padding: 6px 8px; border-radius: 7px; background: var(--surface-sunk);
}
.bcard-next svg { width: 13px; height: 13px; flex: none; margin-top: 2px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bcard-next span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.bcard-suggest {
  margin: 2px -4px 0; padding: 9px 10px 9px;
  border-radius: 9px;
  background: var(--state-busy-wash);
  border: 1px solid color-mix(in srgb, var(--state-busy) 22%, transparent);
  font-size: 12.5px; line-height: 1.45; color: var(--ink);
  animation: brief-rise 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bcard-suggest p { display: flex; gap: 7px; margin: 0 0 8px; align-items: flex-start; }
.bcard-suggest p svg { width: 14px; height: 14px; flex: none; margin-top: 2px; fill: none; stroke: var(--state-busy); stroke-width: 2; stroke-linecap: round; }
.bcard-suggest a { color: var(--state-busy); font-weight: 600; text-decoration: none; }
.bcard-suggest a:hover { text-decoration: underline; }
.bcard-suggest-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bcard-suggest-actions button.small, .bcard-move-form button.small { padding: 4px 11px; font-size: 12px; border-radius: 7px; }
.bcard-suggest-actions button.quiet.small { background: color-mix(in srgb, var(--surface) 70%, transparent); }

.bcard-foot { display: flex; align-items: center; gap: 7px; margin-top: 2px; min-width: 0; }
.bavatar {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
  font: 600 9.5px/1 var(--font-ui); letter-spacing: .02em;
}
.bavatar.me { background: var(--accent); color: var(--accent-ink); }
.bavatar.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.bcard-owner { font-size: 12.5px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-badges { display: inline-flex; gap: 4px; margin-left: auto; }
.bbadge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0 6px; border-radius: 999px; font: 600 11px/1.6 var(--font-ui);
  background: var(--surface-sunk); color: var(--ink-soft); white-space: nowrap;
}
.bbadge svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bbadge.bb-ticket { background: var(--state-busy-wash); color: var(--state-busy); }
.bbadge.bb-contested { background: var(--state-wait-wash); color: var(--state-wait); font-weight: 500; }
.bbadge.bb-human { background: var(--accent-wash); color: var(--accent); font-weight: 500; margin-left: 6px; }
.bcard-age { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); flex: none; }
.bcard-badges:empty + .bcard-age { margin-left: auto; }
.bcard.stalled .bcard-age { color: var(--state-wait); }

.bcard-whyline { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 1px; min-width: 0; }
.bcard-why { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-faint); min-width: 0; }
.bcard-why span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-why svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bcard-why.human { color: var(--ink-soft); }
.bcard-why.human svg { stroke: var(--accent); }

.bcard-move { position: absolute; top: 7px; right: 7px; }
.bcard-move > summary {
  list-style: none; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-faint);
  opacity: 0; transition: opacity 140ms ease, background-color 140ms ease;
}
.bcard-move > summary::-webkit-details-marker { display: none; }
.bcard-move > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.bcard:hover .bcard-move > summary, .bcard:focus-within .bcard-move > summary, .bcard-move[open] > summary { opacity: 1; }
.bcard-move > summary:hover { background: var(--surface-sunk); color: var(--ink); }
html:not(.board-js) .bcard-move > summary { opacity: 1; }
@media (hover: none) { .bcard-move > summary { opacity: 1; } }
.bcard-move-form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 15rem;
  display: grid; gap: 8px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(25, 27, 26, .06), 0 16px 34px -18px rgba(20, 40, 32, .45);
  animation: account-pop .14s ease both; cursor: default;
}
.bcard-move-form label span { display: block; margin: 0 0 4px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.bcard-move-form select { max-width: none; padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; }

/* ---- The drawer --------------------------------------------------------------------- */

.board-drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(15, 20, 18, .28); opacity: 0; transition: opacity 220ms ease; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(31rem, 100vw);
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -24px 0 48px -28px rgba(20, 40, 32, .45);
  overflow-y: auto; overscroll-behavior: contain; outline: none;
  transform: translateX(104%); transition: transform 260ms cubic-bezier(.2,.75,.2,1);
}
.board-drawer.open .drawer-scrim { opacity: 1; }
.board-drawer.open .drawer-panel { transform: none; }
.drawer-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 9px; }
.drawer-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.drawer-body { padding: calc(var(--step) * 3) calc(var(--step) * 3.5) calc(var(--step) * 5); }

.panel-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding-right: 40px; }
.panel-column {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-sunk); color: var(--ink-soft);
}
.panel-title { font-family: var(--font-title); font-weight: 500; font-size: 1.75rem; line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 10px; padding-right: 30px; }
.panel-sub { color: var(--ink-faint); font-size: 13.5px; margin: 8px 0 0; }
.panel-suggest {
  margin: calc(var(--step) * 2.5) 0 0; padding: 14px 16px;
  border-radius: var(--radius); background: var(--state-busy-wash);
  border: 1px solid color-mix(in srgb, var(--state-busy) 22%, transparent);
}
.panel-suggest-line { display: flex; gap: 9px; margin: 0 0 10px; font-size: 13.5px; }
.panel-suggest-line svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: var(--state-busy); stroke-width: 2; stroke-linecap: round; }
.panel-quote {
  margin: 0 0 12px; padding: 0 0 0 12px; border-left: 2px solid color-mix(in srgb, var(--state-busy) 40%, transparent);
  font-size: 13.5px; color: var(--ink-soft);
}
.panel-quote footer { margin-top: 4px; font-size: 12px; color: var(--ink-faint); }
.panel-facts { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px 14px; margin: calc(var(--step) * 3) 0 0; font-size: 13.5px; }
.panel-facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.panel-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.panel-owner { display: flex; align-items: center; gap: 8px; }
.panel-note { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 13px; }
.panel-note.quiet { color: var(--ink-faint); font-size: 12.5px; }
.panel-badges { display: flex; gap: 6px; }
.panel-move { margin: calc(var(--step) * 3) 0 0; padding: 14px; border-radius: var(--radius); background: var(--surface-sunk); }
.panel-move-row { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-move-row { flex-wrap: nowrap; }
.panel-move-row select { width: auto; flex: 0 1 10rem; min-width: 0; }
.panel-move-row input { flex: 1 1 6rem; width: auto; min-width: 0; }
.panel-section { margin: calc(var(--step) * 3.5) 0 0; }
.panel-h { margin: 0 0 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.panel-fields { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 13.5px; }
.panel-fields dt { color: var(--ink-faint); }
.panel-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.panel-value { color: var(--ink); font-weight: 500; }
.panel-cite { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-faint); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-cite:hover { color: var(--accent); }
.panel-evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; }
.panel-evidence a { font-weight: 600; text-decoration: none; }
.panel-excerpt { display: block; margin-top: 3px; padding-left: 10px; border-left: 2px solid var(--line-strong); color: var(--ink-soft); font-size: 13px; }
.panel-history .th-event { font-size: 13px; }
.panel-links { margin: calc(var(--step) * 3.5) 0 0; }
.card-page { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: calc(var(--step) * 3) calc(var(--step) * 3.5); }

.board-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translateX(-50%);
  max-width: min(34rem, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 12px;
  background: var(--ink); color: var(--surface); font-size: 13.5px; font-weight: 500;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .55);
  animation: brief-rise 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.board-toast.bad { background: var(--state-bad); color: #fff; }

/* ---- Settings ------------------------------------------------------------------------ */

.settings-row { display: flex; flex-wrap: wrap; gap: 0 calc(var(--step) * 3); }
.settings-row .field { flex: 1 1 18rem; }
.settings-row .field.narrow { flex: 0 1 12rem; }
.settings-row .field input[type="number"] { width: 8rem; }
.settings-h { margin: calc(var(--step) * 2) 0 4px; }
.settings-columns { list-style: none; margin: calc(var(--step) * 2) 0 calc(var(--step) * 3); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.settings-column { display: grid; grid-template-columns: 1.25rem 3.5rem minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); }
.settings-column + .settings-column { border-top: 1px solid var(--line); }
.settings-column input[type="text"] { max-width: none; padding-top: 6px; padding-bottom: 6px; }
.settings-order { width: 3.5rem; padding: 6px 8px; font: inherit; font-size: 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.settings-js .settings-order { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.settings-js .settings-column { grid-template-columns: 1.25rem minmax(0, 1fr) auto auto auto; }
.settings-handle { color: var(--ink-faint); font-size: 12px; letter-spacing: -2px; }
.settings-key { font-size: 11.5px; color: var(--ink-faint); }
.settings-done { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.settings-done input { accent-color: var(--accent); }
.settings-moves { display: inline-flex; gap: 4px; }
.settings-moves button { width: 28px; justify-content: center; padding: 3px 0; }
html:not(.settings-js) .settings-moves { display: none; }
.settings-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.settings-history li { display: grid; grid-template-columns: 3rem 12rem minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.settings-history li:last-child { border-bottom: 0; }
.settings-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.settings-archive { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.settings-archive p { margin: 0; color: var(--ink-soft); font-size: 13.5px; }

/* ---- Small screens: lanes become pages you swipe between ---------------------------------- */

@media (max-width: 46rem) {
  main.wide { padding-left: calc(var(--step) * 2); padding-right: calc(var(--step) * 2); }
  body:has(main.wide .board) .masthead-inner { padding-left: calc(var(--step) * 2); padding-right: calc(var(--step) * 2); }
  .board-head, .boards-head { flex-direction: column; align-items: flex-start; }
  .board-lanes {
    scroll-snap-type: x mandatory; gap: 12px;
    margin: 0 calc(var(--step) * -2); padding-left: calc(var(--step) * 2); padding-right: calc(var(--step) * 2);
    scroll-padding-left: calc(var(--step) * 2);
  }
  .lane { flex-basis: 84vw; scroll-snap-align: start; max-height: none; }
  .lane-pager {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--step) * -2) 12px; padding: 0 calc(var(--step) * 2) 2px;
  }
  .lane-pager a {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 500;
    color: var(--ink-soft); text-decoration: none;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  }
  .lane-pager a span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
  .lane-pager a[aria-current] { color: var(--ink); background: var(--accent-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
  .lane-pager a[aria-current] span { color: var(--accent); }
  .board-filters { gap: 8px; }
  .filter-select { flex: 1 1 40%; }
  .filter-select select { width: 100%; max-width: none; }
  .lane-done:not([open]) { flex-basis: 3.4rem; }
  .lane-cards { overflow: visible; }
  .board-hint { display: none !important; }
  .drawer-panel {
    top: auto; left: 0; width: 100vw; max-height: 88vh;
    border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
    transform: translateY(104%);
  }
  .drawer-body { padding: calc(var(--step) * 3) calc(var(--step) * 2.25) calc(var(--step) * 5); }
  .panel-facts, .panel-fields { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .panel-facts dd, .panel-fields dd { margin-bottom: 8px; }
  .settings-column { grid-template-columns: minmax(0, 1fr) auto; }
  .settings-handle, .settings-key { display: none; }
  .settings-history li { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .settings-when { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .board-tile, .bcard, .lane, .drawer-panel, .drawer-scrim, .bcard-suggest, .board-flash, .board-toast { transition: none; animation: none; }
  .bcard:hover, .board-tile:hover { transform: none; }
}
/* A computed reason worth reading (at risk) gets two lines, not an ellipsis. */
.bcard-why.computed { align-items: flex-start; }
.bcard-why.computed svg { margin-top: 2px; }
.bcard-why.computed span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* --------------------------------------------------------------------------
   21  CRM-less mode (`customer-context-spec.md` §17): the admin's switch on
   /admin/customers, the member's "Companies you're talking to", the link on
   /app/accounts and the brief's provenance chip.

   The page is a decision queue, so each card is calm and scannable: a soft
   monogram (eight muted tints keyed by domain — none of them the accent), the
   company in the title serif, the evidence as mono-numbered chips, the people
   as small discs. The accent is the one primary button per card and links.
   "Only you can see this" is a promise, so it is set as an eyebrow with a
   lock, never as fine print.
   -------------------------------------------------------------------------- */

:root {
  --sg-t0: #e5ece6; --sg-t0-ink: #3d5a48;
  --sg-t1: #e6eaf1; --sg-t1-ink: #3f5470;
  --sg-t2: #f1e9df; --sg-t2-ink: #74563a;
  --sg-t3: #ece6f0; --sg-t3-ink: #5d4a6c;
  --sg-t4: #e3edee; --sg-t4-ink: #2f5e63;
  --sg-t5: #f2e6e4; --sg-t5-ink: #7a4a43;
  --sg-t6: #eeeadb; --sg-t6-ink: #635a2f;
  --sg-t7: #e8e8e4; --sg-t7-ink: #4f534f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sg-t0: #1f2b24; --sg-t0-ink: #9cc5ab;
    --sg-t1: #1f2633; --sg-t1-ink: #a2b8d8;
    --sg-t2: #2e261d; --sg-t2-ink: #d5b38f;
    --sg-t3: #2a2330; --sg-t3-ink: #c4add6;
    --sg-t4: #1c2b2d; --sg-t4-ink: #95c8cd;
    --sg-t5: #2f2120; --sg-t5-ink: #e0aaa1;
    --sg-t6: #2b2819; --sg-t6-ink: #d1c38d;
    --sg-t7: #262725; --sg-t7-ink: #b8bcb6;
  }
}

/* ---- The admin's card ----------------------------------------------------------- */

.card.crmless { position: relative; overflow: hidden; }
.card.crmless.is-on { border-color: var(--line-strong); }
.crmless-lede {
  margin: 0 0 calc(var(--step) * 2.5);
  max-width: 44rem;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.crmless-lede strong { color: var(--ink); font-weight: 600; }
.crmless-flash {
  margin: 0 0 calc(var(--step) * 2);
  padding: calc(var(--step) * 1.25) calc(var(--step) * 1.75);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  color: var(--ink);
  font-size: 14px;
}
.crmless-flow {
  list-style: none;
  margin: 0 0 calc(var(--step) * 2.5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--step) * 1.5);
}
.crmless-flow li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: calc(var(--step) * 1.25);
  padding: calc(var(--step) * 1.75);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.crmless-flow strong { display: block; margin-bottom: 2px; font-size: 14px; }
.crmless-flow p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.crmless-step {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--ink-soft);
}
.crmless-privacy {
  margin: 0 0 calc(var(--step) * 2.5);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.crmless-privacy h3 {
  margin: 0 0 calc(var(--step) * 0.75);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.crmless-privacy ul { margin: 0; padding-left: calc(var(--step) * 2.25); color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.crmless-privacy li + li { margin-top: 4px; }
.crmless-stats .stat-sub { font-size: 12px; color: var(--ink-faint); }
.crmless-space p { margin: 0 0 calc(var(--step) * 1.5); color: var(--ink-soft); font-size: 14px; }
.crmless-space .warn { margin-top: 0; }
.crmless-offer,
.crmless-off,
.crmless-on {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--step) * 1.5);
  margin: 0 0 calc(var(--step) * 1.5);
}
.crmless-off { margin: 0; padding-top: calc(var(--step) * 1.5); border-top: 1px solid var(--line); }
.crmless-off .note,
.crmless-on .note { margin: 0; flex: 1 1 18rem; }
.crmless-offer .choice { flex: 1 1 24rem; margin: 0; }

/* ---- /app/accounts: the way in ------------------------------------------------- */

.sg-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.25rem;
  align-items: center;
  gap: calc(var(--step) * 1.5);
  margin: calc(var(--step) * 2) 0 calc(var(--step) * 1.5);
  padding: calc(var(--step) * 1.5) calc(var(--step) * 2.25);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.sg-link.has-some { border-style: solid; background: var(--surface); }
.sg-link:hover { color: var(--ink); border-color: var(--accent); }
.sg-link:hover .ar-go { color: var(--accent); transform: translateX(3px); }
.sg-link-text { display: grid; gap: 1px; }
.sg-link-text strong { font-weight: 600; font-size: 14.5px; }
.sg-link-sub { color: var(--ink-soft); font-size: 13px; }
.sg-link-badge {
  min-width: 1.6rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

/* ---- The brief: where an account came from -------------------------------------- */

.provenance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.provenance-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* ---- The queue ------------------------------------------------------------------ */

.sg-page-head { margin-bottom: calc(var(--step) * 3); }
.sg-private {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sg-lock { width: 11px; height: 11px; }
.sg-count { margin: 0 0 calc(var(--step) * 1.5); color: var(--ink-soft); font-size: 14px; }
.sg-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.sg-dot { margin: 0 calc(var(--step) * 0.75); color: var(--ink-faint); }

.sg-flash {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--step) * 1) calc(var(--step) * 2);
  margin: 0 0 calc(var(--step) * 2.5);
  padding: calc(var(--step) * 1.5) calc(var(--step) * 2.25);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: var(--accent-wash);
}
.sg-flash p { margin: 0; font-size: 14.5px; }
.sg-flash.quiet { border-color: var(--line); background: var(--surface-sunk); }
.sg-flash-go { font-weight: 600; white-space: nowrap; }

.sg-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 1.5) calc(var(--step) * 3);
  margin: 0 0 calc(var(--step) * 2.5);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2.25);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunk);
}
.sg-offer-text { flex: 1 1 24rem; }
.sg-offer-text .eyebrow { margin-bottom: 4px; }
.sg-offer-text p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.sg-offer-text strong { color: var(--ink); }
.sg-offer form { margin: 0; }

.sg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
  gap: calc(var(--step) * 2);
}
.sg-card > article {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 1.75);
  padding: calc(var(--step) * 2.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 160ms ease;
}
.sg-card > article:hover,
.sg-card > article:focus-within { border-color: var(--line-strong); }

.sg-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: calc(var(--step) * 1.75); align-items: center; }
.sg-mono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.sg-mono.t0 { background: var(--sg-t0); color: var(--sg-t0-ink); }
.sg-mono.t1 { background: var(--sg-t1); color: var(--sg-t1-ink); }
.sg-mono.t2 { background: var(--sg-t2); color: var(--sg-t2-ink); }
.sg-mono.t3 { background: var(--sg-t3); color: var(--sg-t3-ink); }
.sg-mono.t4 { background: var(--sg-t4); color: var(--sg-t4-ink); }
.sg-mono.t5 { background: var(--sg-t5); color: var(--sg-t5-ink); }
.sg-mono.t6 { background: var(--sg-t6); color: var(--sg-t6-ink); }
.sg-mono.t7 { background: var(--sg-t7); color: var(--sg-t7-ink); }
.sg-title { min-width: 0; }
.sg-name {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.sg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}
.sg-meta .mono { word-break: normal; }
.sg-meta .sg-dot { margin: 0 calc(var(--step) * 0.75); }

.sg-evidence { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sg-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--ink-soft);
  font-size: 12.5px;
}
.sg-n { font-family: var(--font-mono); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sg-sub { color: var(--ink-faint); }
.sg-next {
  display: flex;
  align-items: baseline;
  gap: calc(var(--step) * 1);
  margin: calc(var(--step) * -0.75) 0 0;
  font-size: 13px;
  color: var(--ink);
}
.sg-next-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--state-busy);
}

.sg-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sg-person { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: calc(var(--step) * 1); align-items: center; }
.sg-person-disc {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.sg-person-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px calc(var(--step) * 1); min-width: 0; }
.sg-person-name { font-size: 13.5px; font-weight: 500; }
.sg-person-mail { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); overflow-wrap: anywhere; }
.sg-more { padding-left: calc(1.75rem + var(--step)); font-size: 12.5px; color: var(--ink-faint); }

.sg-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--step) * 1);
  margin: auto 0 0;
  padding-top: calc(var(--step) * 1.75);
  border-top: 1px solid var(--line);
}
.sg-name-field { display: block; margin: 0; }
.sg-name-field input {
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  font-size: 14px;
}
.sg-add .button { white-space: nowrap; }

.sg-secondary { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 0.5) calc(var(--step) * 2); margin-top: calc(var(--step) * -0.5); }
.sg-fold { flex: 1 1 100%; }
.sg-fold:not([open]) { flex: 0 0 auto; }
.sg-fold > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  color: var(--ink-soft);
  font-size: 13px;
  border-radius: var(--radius-sm);
}
.sg-fold > summary::-webkit-details-marker { display: none; }
.sg-fold > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}
.sg-fold[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.sg-fold > summary:hover { color: var(--ink); }
.sg-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sg-reject,
.sg-merge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--step) * 1);
  margin: calc(var(--step) * 1) 0 0;
  padding: calc(var(--step) * 1.5);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.sg-reject fieldset { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; flex: 1 1 100%; }
.sg-reason { position: relative; cursor: pointer; }
.sg-reason input { position: absolute; opacity: 0; pointer-events: none; }
.sg-reason span {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-soft);
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.sg-reason input:checked + span { border-color: var(--ink); color: var(--ink); background: var(--chip-bg); font-weight: 600; }
.sg-reason input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sg-merge .field { flex: 1 1 12rem; }
.sg-merge select { width: 100%; }

@media (max-width: 46rem) {
  .crmless-flow { grid-template-columns: minmax(0, 1fr); }
  .sg-link { grid-template-columns: minmax(0, 1fr) auto; }
  .sg-link .ar-go { display: none; }
  .sg-card > article { padding: calc(var(--step) * 2); }
  .sg-add { grid-template-columns: minmax(0, 1fr); }
  .sg-add .button { width: 100%; justify-content: center; text-align: center; }
  .sg-meta { flex-direction: column; align-items: flex-start; gap: 1px; }
  .sg-meta .sg-dot { display: none; }
}
.crmless .note { border-top: 0; padding-top: 0; margin-top: 0; }
.pv-by {
  display: inline-block;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  vertical-align: 1px;
}
.no-space .no-space-create { margin-top: calc(var(--step) * 1.5); }

/* --------------------------------------------------------------------------
   Not shared with your team yet (member::no_space) — one way out, by role
   -------------------------------------------------------------------------- */
.empty.no-space {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--step) * 2);
  align-items: start;
  text-align: left;
  padding: calc(var(--step) * 2.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-wash), transparent 140%);
}
.no-space .ns-mark {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.no-space .ns-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.no-space .ns-body > p { margin: 0 0 var(--step); max-width: 60ch; }
.no-space .empty-title { margin-top: 2px; }
.ns-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step) calc(var(--step) * 1.5); margin-top: calc(var(--step) * 1.5); }
.ns-actions form { margin: 0; }
.button.ns-share { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding-top: 7px; padding-bottom: 7px; line-height: 1.2; }
.ns-share .ns-share-main { font-weight: 600; }
.ns-share .ns-share-sub { font-size: 12px; opacity: 0.82; font-weight: 400; }
.ns-person { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 2px; }
@media (max-width: 46rem) {
  .empty.no-space { grid-template-columns: minmax(0, 1fr); }
  .ns-actions .button { width: 100%; }
  .ns-actions form { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Who can join (member::join) — "Allow coworkers to join by email"
   -------------------------------------------------------------------------- */
.join-card .join-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 3);
  margin: calc(var(--step) * 0.5) 0 0;
  padding: calc(var(--step) * 2) calc(var(--step) * 2.25);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.join-card.is-on .join-row { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.join-card .join-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.join-card .join-text strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.join-card .join-text .why { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.join-card .join-row.is-disabled { background: transparent; border-style: dashed; }
.join-card .join-row.is-disabled strong { color: var(--ink-soft); }
.join-card button.switch[disabled] { opacity: 0.5; cursor: not-allowed; }
.join-card .join-state { margin: calc(var(--step) * 1.25) 0 0; color: var(--ink-soft); font-size: 13px; display: flex; align-items: baseline; gap: 8px; }
.join-card .join-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.join-choice { margin: calc(var(--step) * 0.5) 0 calc(var(--step) * 1.5); }
.join-choice-off { margin: 0 0 calc(var(--step) * 1.5); }
@media (max-width: 40rem) {
  .join-card .join-row { padding: calc(var(--step) * 1.5); gap: calc(var(--step) * 1.5); }
}

/* --------------------------------------------------------------------------
   The Email page for a Google sign-in: Gmail first, honestly; Outlook folded
   -------------------------------------------------------------------------- */
.gm-status { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gm-row { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: calc(var(--step) * 2); align-items: start; padding: calc(var(--step) * 2) calc(var(--step) * 2.25); background: var(--surface); }
.gm-row + .gm-row { border-top: 1px solid var(--line); }
.gm-row.is-ready { background: linear-gradient(90deg, var(--accent-wash), var(--surface) 70%); }
.gm-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gm-body strong { font-size: 14.5px; color: var(--ink); }
.gm-body .why { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.gm-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--surface); }
.gm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.is-ready .gm-badge { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.is-soon .gm-badge { color: var(--state-wait); background: var(--state-wait-wash); border-color: transparent; }
.is-later .gm-badge { color: var(--state-idle); background: var(--state-idle-wash); border-color: transparent; }
.gm-address { margin: calc(var(--step) * 1.25) 0 0; }
.gm-address .capture-value { font-size: 14px; padding: calc(var(--step) * 1.25) calc(var(--step) * 1.75); background: var(--surface); }
.ol-fold { margin: 0 0 calc(var(--step) * 3); }
.ol-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: calc(var(--step) * 1.25); padding: calc(var(--step) * 1.75) calc(var(--step) * 2.25); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: background-color 160ms ease, border-color 160ms ease; }
.ol-fold > summary::-webkit-details-marker { display: none; }
.ol-fold > summary:hover { background: var(--surface-sunk); border-color: var(--line-strong); }
.ol-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ol-fold-q { color: var(--ink); font-weight: 600; font-size: 14px; }
.ol-fold-a { color: var(--accent); font-size: 13.5px; font-weight: 500; }
.ol-fold-chev { margin-left: auto; color: var(--ink-faint); font-size: 18px; line-height: 1; transition: transform 180ms ease; }
.ol-fold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.ol-fold[open] > summary .ol-fold-chev { transform: rotate(90deg); }
.ol-fold[open] > .card { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
@media (max-width: 40rem) {
  .gm-row { grid-template-columns: minmax(0, 1fr); gap: var(--step); }
  .ol-fold > summary { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .ol-fold-chev { transition: none; } }

/* --------------------------------------------------------------------------
   Connect your AI client: Claude and ChatGPT by link, keys under Advanced
   -------------------------------------------------------------------------- */
.ai-apps { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); }
.ai-apps .ai-lede { margin: 0 0 calc(var(--step) * 2); color: var(--ink-soft); max-width: 44rem; line-height: 1.55; }
.copy-link { display: flex; align-items: stretch; gap: var(--step); margin: 0 0 calc(var(--step) * 2.5); }
.copy-link-value { flex: 1; min-width: 0; display: flex; align-items: center; padding: calc(var(--step) * 1.5) calc(var(--step) * 2); border-radius: var(--radius-sm); background: var(--surface-sunk); border: 1px solid var(--line); font-size: 14.5px; font-weight: 500; color: var(--ink); word-break: break-all; user-select: all; }
.copy-link-button { flex: none; min-width: 8rem; justify-content: center; }
.copy-link-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.copy-link-button.is-done { background: var(--accent-hover); }
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--step) * 1.5); }
.ai-app { padding: calc(var(--step) * 2) calc(var(--step) * 2.25); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ai-app-head { display: flex; align-items: center; gap: calc(var(--step) * 1.25); margin-bottom: calc(var(--step) * 1.25); }
.ai-app-head h3 { margin: 0; font-family: var(--font-title); font-size: 1.1rem; }
.ai-app-head .muted { margin-left: auto; font-size: 12px; }
.ai-mono { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-wash); color: var(--accent); font-weight: 700; font-size: 14px; }
.ai-steps { margin: 0; padding: 0; list-style: none; counter-reset: ai; display: flex; flex-direction: column; gap: 7px; }
.ai-steps li { counter-increment: ai; display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--ink-soft); }
.ai-steps li::before { content: counter(ai); flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 11px; font-weight: 600; color: var(--ink-soft); transform: translateY(-1px); }
.ai-steps strong { color: var(--ink); font-weight: 600; }
.advanced-fold { margin: 0 0 calc(var(--step) * 3); }
.advanced-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: calc(var(--step) * 1.25); padding: calc(var(--step) * 1.75) calc(var(--step) * 2.25); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: background-color 160ms ease, border-color 160ms ease; }
.advanced-fold > summary::-webkit-details-marker { display: none; }
.advanced-fold > summary:hover { background: var(--surface-sunk); border-color: var(--line-strong); }
.advanced-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adv-q { font-weight: 600; color: var(--ink); font-size: 14px; }
.adv-a { color: var(--ink-soft); font-size: 13.5px; }
.adv-chev { margin-left: auto; color: var(--ink-faint); font-size: 18px; line-height: 1; transition: transform 180ms ease; }
.advanced-fold[open] > summary .adv-chev { transform: rotate(90deg); }
.advanced-fold .adv-body { padding-top: calc(var(--step) * 2); }
.advanced-fold .adv-body > .card:last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
  .ai-grid { grid-template-columns: minmax(0, 1fr); }
  .copy-link { flex-direction: column; }
  .copy-link-button { width: 100%; }
  .advanced-fold > summary { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .adv-chev { transition: none; } }
.ai-apps .ai-grid + .warn, .ai-apps .ai-grid + .note { margin-top: calc(var(--step) * 2); }

/* --------------------------------------------------------------------------
   Ask your IT admin (mail::outlook::admin_consent) — Outlook mail + calendar
   -------------------------------------------------------------------------- */
.it-admin { margin-top: calc(var(--step) * 2.5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.it-admin > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--step) * 1.5); padding: calc(var(--step) * 1.5) calc(var(--step) * 2); border-radius: var(--radius); }
.it-admin > summary::-webkit-details-marker { display: none; }
.it-admin > summary:hover { background: var(--surface-sunk); }
.it-admin > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.it-admin .it-q { color: var(--ink-soft); font-size: 13.5px; }
.it-admin .it-cta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface); font-size: 13px; font-weight: 600; white-space: nowrap; }
.it-admin .it-cta::after { content: "→"; color: var(--accent); transition: transform 160ms ease; }
.it-admin[open] .it-cta { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.it-admin[open] .it-cta::after { content: "↓"; color: inherit; }
.it-admin[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.it-body { padding: calc(var(--step) * 2) calc(var(--step) * 2.25) calc(var(--step) * 2.25); }
.it-lede { margin: 0 0 calc(var(--step) * 2); color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; max-width: 46rem; }
.it-link { margin-bottom: calc(var(--step) * 1.75); }
.it-link-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.it-link-label .muted { font-weight: 400; }
.it-link .capture-address { margin: 0; }
.it-link .capture-value { font-size: 12px; font-weight: 400; line-height: 1.5; max-height: 4.6em; overflow: hidden; }
.it-note { margin-top: calc(var(--step) * 2); padding: calc(var(--step) * 1.75) calc(var(--step) * 2); border-radius: var(--radius-sm); background: var(--surface-sunk); font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.it-note-title { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.it-note ul { margin: 0 0 calc(var(--step) * 1.25); padding-left: 1.1rem; }
.it-note li { margin: 3px 0; }
.it-note .mono { color: var(--ink); font-size: 12px; }
.it-note p { margin: 0; }
@media (max-width: 40rem) {
  .it-admin > summary { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Guided setup (`/app/setup`) and the Home checklist — onboarding tier 2.

   A focused shell: the wordmark, "Setting up {Organization}", "Finish later".
   A rail of five steps (dots on a phone), one panel at a time, every choice a
   card that lifts when it is the one. Done is the accent's one moment of
   celebration; everything else stays paper and ink. Motion is a short settle
   and disappears under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.su-body { padding-bottom: calc(var(--step) * 6); }

.su-top { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.su-top-inner {
  max-width: 68rem; margin: 0 auto;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 3);
  display: flex; align-items: center; gap: calc(var(--step) * 2.5);
}
.su-ctx { color: var(--ink-faint); font-size: 13.5px; padding-left: calc(var(--step) * 2.5); border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.su-ctx b { color: var(--ink); font-weight: 600; }
.su-top-right { margin-left: auto; display: flex; align-items: center; gap: calc(var(--step) * 1.5); flex: 0 0 auto; }
.su-later { color: var(--ink-soft); font-size: 13.5px; font-weight: 500; text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm); }
.su-later:hover { color: var(--ink); background: var(--surface-sunk); }
.su-later:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.su-main { max-width: 68rem; padding-top: calc(var(--step) * 5); }

.su-shell {
  display: grid; grid-template-columns: 15.5rem minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; min-height: 36rem;
  box-shadow: 0 1px 2px rgba(25, 27, 26, .04), 0 24px 48px -32px rgba(20, 40, 32, .28);
}

/* The rail */
.su-rail {
  border-right: 1px solid var(--line);
  padding: calc(var(--step) * 3.25) calc(var(--step) * 2.25);
  background: color-mix(in srgb, var(--surface) 55%, var(--ground));
  display: flex; flex-direction: column;
}
.su-rail-head { margin-bottom: calc(var(--step) * 1.25); }
.su-prog { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 0 0 calc(var(--step) * 2.75); }
.su-prog > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.su-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.su-step a {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center;
  padding: 9px 8px; border-radius: 9px;
  color: var(--ink-soft); text-decoration: none; font: 500 14px/1.3 var(--font-ui);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.su-step a:hover { background: var(--surface-sunk); color: var(--ink); }
.su-step a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.su-t small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-faint); margin-top: 1px; }
.su-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center;
  font: 500 11px/1 var(--font-mono); color: var(--ink-faint);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.su-step.is-done .su-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.su-step.is-done .su-dot::after { content: "✓"; font: 600 12px/1 var(--font-ui); }
.su-step.is-done .su-dot > span { display: none; }
.su-step.is-skipped .su-dot { border-style: dashed; }
.su-step.is-current a { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.su-step.is-current .su-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.su-step.is-current.is-done .su-dot { color: var(--accent-ink); }
.su-rail-foot { margin: auto 0 0; padding-top: calc(var(--step) * 3); display: grid; gap: 2px; font-size: 12px; color: var(--ink-faint); }

/* Text buttons: a button that reads as a link. */
button.su-textbutton,
.su-textbutton {
  background: none; border: 0; padding: 4px 0; color: var(--ink-soft);
  font: 500 13px var(--font-ui); cursor: pointer; justify-self: start;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
button.su-textbutton:hover { background: none; color: var(--ink); border: 0; text-decoration-color: currentColor; }
button.su-textbutton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
button.su-link { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
button.su-link:hover { color: var(--accent-hover); }

/* The stage */
.su-stage { padding: calc(var(--step) * 4.5) clamp(1.25rem, 4vw, 3rem) calc(var(--step) * 3.5); display: flex; flex-direction: column; min-width: 0; }
.su-panel { display: none; flex-direction: column; flex: 1; }
.su-panel.is-current { display: flex; animation: su-rise .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes su-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.su-kicker { margin-bottom: calc(var(--step) * 1); }
.su-h {
  font-family: var(--font-title); font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.05rem); line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 0 calc(var(--step) * 1.25); outline: none; max-width: 34ch;
}
.su-lede { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 0 0 calc(var(--step) * 3); max-width: 44rem; }

.su-flash {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 calc(var(--step) * 3); padding: 11px 14px;
  border-radius: 10px; font-size: 14px; line-height: 1.5;
  background: var(--accent-wash); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  animation: flash-in 220ms ease-out both;
}
.su-flash-mark { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--accent); position: relative; }
.su-flash-mark::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-ink); font: 700 11px/1 var(--font-ui); }
.su-flash.is-problem { background: var(--state-wait-wash); border-color: color-mix(in srgb, var(--state-wait) 35%, transparent); }
.su-flash.is-problem .su-flash-mark { background: var(--state-wait); }
.su-flash.is-problem .su-flash-mark::after { content: "!"; }
.home-flash { margin-bottom: calc(var(--step) * 2.5); }

/* Choices: a card per answer; the chosen one lifts and wears the accent. */
.su-choices { display: grid; gap: 10px; }
.su-choice {
  position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 4px 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  cursor: pointer; transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease, background .15s ease;
}
.su-choice:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.su-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.su-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); margin-top: 2px; grid-row: span 2; transition: border .15s ease; background: var(--surface); }
.su-choice b { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.su-d { grid-column: 2; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.su-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.su-choice:has(input:checked) .su-radio { border: 6px solid var(--accent); }
.su-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.su-badge {
  display: inline-flex; align-items: center; margin-left: 8px; vertical-align: 2px;
  font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: var(--accent-wash); color: var(--accent);
}

.su-reveal { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--surface-sunk); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.su-reveal b { color: var(--ink); }
.su-reveal ul { margin: 6px 0 0; padding-left: 18px; }
.su-reveal li { margin: 3px 0; }

/* Step 2: the drop zone opens under "We use a CRM"; the explainer under "No CRM". */
.su-crm-drop { display: none; margin: -2px 0 2px 36px; }
.su-panel:has(input[value="crm"]:checked) .su-crm-drop { display: block; animation: su-rise .3s cubic-bezier(.2, .8, .2, 1) both; }
.su-crm-drop .dropzone { min-height: 8.5rem; background: var(--surface-sunk); }
.su-when-none { display: none; }
.su-panel:has(input[value="none"]:checked) .su-when-none { display: block; animation: su-rise .3s cubic-bezier(.2, .8, .2, 1) both; }
.su-okline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 14px; border-radius: 10px; background: var(--accent-wash); font-size: 14px; }

/* Fields */
.su-field { margin-top: calc(var(--step) * 2.5); display: grid; gap: 6px; }
.su-field label { font-weight: 600; font-size: 14px; display: flex; align-items: baseline; gap: 8px; }
.su-optional { font: 400 12px var(--font-ui); color: var(--ink-faint); }
.su-field textarea {
  width: 100%; max-width: none; resize: vertical; min-height: 3.2rem;
  font: 14px/1.5 var(--font-ui); color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.su-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.su-hint { margin: 0; font-size: 13px; color: var(--ink-faint); line-height: 1.5; }
.su-warnline { margin-top: calc(var(--step) * 2); padding: 10px 12px; border-radius: 8px; background: var(--state-wait-wash); color: var(--ink-soft); }

/* Connections: one row per thing to connect. */
.su-conn {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 3px 14px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.su-conn + .su-conn { margin-top: 10px; }
.su-conn.is-tall { align-items: start; }
.su-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunk); color: var(--ink-soft); grid-row: span 2; }
.su-ic svg { width: 20px; height: 20px; }
.su-ic-letter { font: 600 16px/1 var(--font-title); color: var(--ink); }
.su-conn > b { font-weight: 600; font-size: 15px; }
.su-conn .su-d { grid-column: 2; font-size: 13.5px; }
.su-act { grid-row: 1 / span 2; grid-column: 3; justify-self: end; }
.su-okmark { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-weight: 600; font-size: 13.5px; color: var(--accent); }
.su-account { font: 400 12px var(--font-ui); color: var(--ink-faint); }
.su-muted { font-size: 13px; color: var(--ink-faint); }
.su-waiting { font-size: 13px; color: var(--state-wait); font-weight: 500; }
.su-status { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 13.5px; padding: 5px 0; color: var(--ink-soft); line-height: 1.5; }
.su-status b { color: var(--ink); font-weight: 600; }
.su-s { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; }
.su-s.is-ok { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.su-s.is-soon { background: var(--state-wait); box-shadow: 0 0 0 3px var(--state-wait-wash); }
.su-s.is-no { background: transparent; border: 1.5px solid var(--ink-faint); }
.su-addr {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 8px;
  padding: 6px 6px 6px 12px; border-radius: 9px; background: var(--surface-sunk);
  font-size: 13px; overflow-wrap: anywhere;
}
.su-addr code { background: none; padding: 0; font-size: 12.5px; color: var(--ink); flex: 1; min-width: 0; }
.su-addr .button { margin-left: auto; padding: 5px 11px; font-size: 12.5px; }
.su-addr-make { display: block; margin: 4px 0 8px; }
.su-aside { margin: calc(var(--step) * 1.75) 0 0; font-size: 13.5px; color: var(--ink-faint); }
.su-aside-block { padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.su-it { margin-top: 10px; }
.button.su-copy.is-copied,
button.su-copy.is-copied { background: var(--accent-wash); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* Step 4: the link, large and calm. */
.su-linkbox {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 14px;
  padding: 14px 16px; margin-bottom: 12px; border-radius: 12px;
  background: var(--surface-sunk); border: 1px solid var(--line);
}
.su-linkbox .eyebrow { margin: 0; }
.su-linkbox code { background: none; padding: 0; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.su-advanced { margin-top: calc(var(--step) * 2); font-size: 13.5px; color: var(--ink-soft); }
.su-advanced > summary { cursor: pointer; color: var(--ink-soft); font-weight: 500; width: max-content; max-width: 100%; }
.su-advanced > summary:hover { color: var(--ink); }
.su-advanced > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.su-advanced p { margin: 8px 0 0; }

/* Foot */
.su-foot { margin-top: auto; padding-top: calc(var(--step) * 3.5); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.su-spacer { flex: 1; }
.su-note { font-size: 12.5px; color: var(--ink-faint); }
.su-foot .button { padding: 10px 16px; font-size: 14px; border-radius: 8px; }
.button.su-continue,
button.su-continue {
  padding: 10px 14px 10px 18px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.su-continue svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.su-continue:hover svg { transform: translateX(2px); }
.su-skip { padding: 10px 6px; }
.su-connect { padding: 8px 14px; }

/* Done */
.su-done { text-align: center; align-items: center; }
.su-done .su-h { max-width: none; }
.su-seal {
  width: 64px; height: 64px; border-radius: 50%; margin: calc(var(--step) * 1) auto calc(var(--step) * 2);
  display: grid; place-items: center; background: var(--accent-wash); color: var(--accent);
  animation: su-pop .55s cubic-bezier(.2, 1.4, .4, 1) both;
}
.su-seal svg { width: 30px; height: 30px; }
@keyframes su-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.su-done-hero { max-width: 36rem; margin: 0 auto; }
.su-done .su-lede { margin: 0 auto calc(var(--step) * 2); }
.su-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.su-chip {
  font-size: 13.5px; padding: 8px 14px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.su-chip:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); box-shadow: 0 0 0 3px var(--accent-wash); }
.su-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.su-recap { list-style: none; text-align: left; margin: calc(var(--step) * 3) auto 0; padding: 14px 18px; max-width: 30rem; border: 1px solid var(--line); border-radius: 12px; }
.su-done .su-foot { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .su-panel.is-current, .su-seal, .su-crm-drop, .su-when-none, .su-flash { animation: none !important; }
  .su-prog > span, .su-choice, .su-chip, .su-continue svg { transition: none; }
  .su-choice:hover, .su-chip:hover { transform: none; }
}

/* Phones: the rail becomes a row of dots above the panel. */
@media (max-width: 47.5rem) {
  .su-main { padding-top: calc(var(--step) * 2); padding-left: 0; padding-right: 0; }
  .su-top-inner { padding: calc(var(--step) * 1.25) 16px; gap: 12px; }
  .su-ctx { display: none; }
  .su-shell { grid-template-columns: minmax(0, 1fr); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; min-height: 0; }
  .su-rail { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 16px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
  .su-rail-head { display: none; }
  .su-prog { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .su-steps { display: flex; gap: 6px; grid-column: 1; grid-row: 1; }
  .su-step a { grid-template-columns: 24px; padding: 4px; border-radius: 50%; }
  .su-step.is-current a { box-shadow: none; background: none; }
  .su-t { display: none; }
  .su-rail-foot { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }
  .su-rail-foot span { display: none; }
  .su-stage { padding: 22px 16px 20px; }
  .su-crm-drop { margin-left: 0; }
  .su-conn { grid-template-columns: 40px 1fr; padding: 14px; }
  .su-act { grid-row: auto; grid-column: 1 / -1; justify-self: stretch; margin-top: 8px; }
  .su-act .button, .su-act form, .su-act form .button { width: 100%; justify-content: center; }
  .su-linkbox { grid-template-columns: 1fr; }
  .su-foot { gap: 8px; }
  .su-foot .su-note { display: none; }
  .su-continue { margin-left: auto; }
}

/* ---- The Home checklist ---------------------------------------------------- */

.card.cl { padding: 0; overflow: hidden; }
.cl-head {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.cl-ring { width: 58px; height: 58px; display: block; }
.cl-ring circle { fill: none; stroke-width: 6; }
.cl-ring .ring-bg { stroke: var(--line); }
.cl-ring .ring-fg { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; animation: cl-ring .9s cubic-bezier(.2, .8, .2, 1) both; }
.cl-ring text { font: 600 14px var(--font-ui); fill: var(--ink); }
@keyframes cl-ring { from { stroke-dashoffset: 150.8; } }
.cl-titles .eyebrow { margin-bottom: 2px; }
.cl-title { font-family: var(--font-title); font-weight: 500; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.cl-sub { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.cl-head-actions { display: flex; align-items: center; gap: 8px; }
button.cl-hide { background: none; border: 0; color: var(--ink-faint); font: 500 12.5px var(--font-ui); padding: 6px 8px; border-radius: var(--radius-sm); }
button.cl-hide:hover { background: var(--surface-sunk); color: var(--ink); border: 0; }
.cl-cols { display: grid; grid-template-columns: 1fr 1fr; }
.cl-cols.is-single { grid-template-columns: minmax(0, 1fr); }
.cl-col { padding: 8px 10px 14px; min-width: 0; }
.cl-col + .cl-col { border-left: 1px solid var(--line); }
.cl-col-head { padding: 12px 12px 4px; margin: 0; }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; transition: background .15s ease; }
.cl-item:hover { background: var(--surface-sunk); }
.cl-ck { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: background .25s ease, border-color .25s ease; }
.cl-item.is-done .cl-ck { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cl-item.is-done .cl-ck::after { content: "✓"; font: 600 12px/1 var(--font-ui); }
.cl-item.is-waiting .cl-ck { border-color: var(--state-wait); border-style: dashed; }
.cl-text { display: grid; gap: 1px; min-width: 0; }
.cl-text b { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.cl-item.is-done .cl-text b { color: var(--ink-soft); }
.cl-d { font-size: 12.5px; color: var(--ink-faint); overflow-wrap: anywhere; }
.cl-d.mono { font-family: var(--font-mono); font-size: 11.5px; }
.cl-act { justify-self: end; }
.cl-downloads { display: inline-flex; gap: 6px; }
.button.cl-btn, button.cl-btn { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; }
.cl-restore { margin: calc(var(--step) * 2) 0 0; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
button.link-button { background: none; border: 0; padding: 0; color: var(--accent); font: 500 12.5px var(--font-ui); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
button.link-button:hover { background: none; color: var(--accent-hover); border: 0; }
.ask-anchor { scroll-margin-top: 5rem; }
.ns-setup { margin: calc(var(--step) * 1.5) 0 0; font-size: 13px; color: var(--ink-faint); }
.mail-setup, .ticket-setup { font-size: 13.5px; color: var(--ink-soft); }
.mail-setup { margin: 0 0 calc(var(--step) * 2.5); padding: 10px 14px; border-radius: 10px; background: var(--surface-sunk); }
.setup-pointer .actions-row { align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .cl-ring .ring-fg { animation: none; }
  .cl-item, .cl-ck { transition: none; }
}
@media (max-width: 47.5rem) {
  .cl-head { grid-template-columns: 52px minmax(0, 1fr); padding: 16px; gap: 12px 14px; }
  .cl-ring { width: 52px; height: 52px; }
  .cl-head-actions { grid-column: 1 / -1; justify-content: space-between; }
  .cl-cols { grid-template-columns: minmax(0, 1fr); }
  .cl-col + .cl-col { border-left: 0; border-top: 1px solid var(--line); }
  .cl-item { grid-template-columns: 26px minmax(0, 1fr); }
  .cl-act { grid-column: 2; justify-self: start; margin-top: 6px; }
}
.su-aside-block { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.su-aside-block .su-addr, .su-aside-block .su-addr-make { margin: 0; flex: 1 1 18rem; }
.su-aside-block .su-addr-make { flex: 0 0 auto; }