/* One stylesheet, no framework, no build step.
   Sized for reading a message carefully rather than scanning a wall of rows:
   the approval queue is the one page where slowing the reader down is correct. */

:root {
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --line: #e0ddd6;
  --paper: #faf9f6;
  --card: #ffffff;
  --accent: #1f4d3d;
  --attention: #8a5a00;
  --bad: #8f2c1e;
  --measure: 68ch;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: baseline;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.brand { font-weight: 650; text-decoration: none; color: var(--ink); }
nav { display: flex; gap: 1.25rem; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--ink); text-decoration: underline; }

main { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }
footer {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  color: var(--muted);
  font-size: 0.85rem;
}

h1 { font-size: 1.6rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }
section h2:first-child { margin-top: 0; }
p { max-width: var(--measure); }
.lead { color: var(--muted); }
.meta { color: var(--muted); font-size: 0.9rem; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 0.85rem; margin: 0.35rem 0 0; }
.empty { color: var(--muted); font-style: italic; }
.crumbs { margin: 0 0 1rem; font-size: 0.9rem; }
.crumbs a { color: var(--muted); }
code { font-size: 0.85em; background: #f0eee9; padding: 0.1em 0.35em; border-radius: 3px; }

/* Callouts ------------------------------------------------------------- */

.callout {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  background: var(--card);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.callout h2 { margin-top: 0; }
.callout-attention { border-left-color: var(--attention); }
.callout-warning { border-left-color: var(--bad); }

/* Stats ---------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0; }
.stats > div { border: 1px solid var(--line); background: var(--card); padding: 0.9rem 1rem; }
.stats dt { color: var(--muted); font-size: 0.85rem; }
.stats dd { margin: 0.2rem 0 0; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.stats dd.bad { color: var(--bad); }

.pairs { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.pairs dt { color: var(--muted); }
.pairs dd { margin: 0; }

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

table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* States --------------------------------------------------------------- */

.state {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid var(--line);
  background: #f3f1ec;
}
/* Governance effects share the state pills. `allow` reads like `succeeded`
   because it is the same news: the thing was permitted to proceed. */
.state-succeeded, .state-delivered, .state-approved, .state-allow { border-color: #b8d4c6; background: #eaf5ef; color: #1f4d3d; }
.state-failed, .state-cancelled, .state-rejected, .state-deny { border-color: #e2bdb6; background: #fbeeec; color: var(--bad); }
/* `submitted` joins them: a Plan governance has not ruled on is waiting on a
   decision, which is the same news. */
.state-awaiting_approval, .state-proposed, .state-require_approval,
.state-submitted { border-color: #e0cfa4; background: #fbf4e4; color: var(--attention); }
/* And `admitted` joins these: allowed to proceed, and its Work Orders exist. */
.state-running, .state-claimed, .state-dispatched,
.state-admitted { border-color: #bdc9df; background: #eef2f9; color: #29456f; }
/* Not yet running, and the three reasons are different diagnoses. `ready` is
   the one this page is built around -- the overview's "oldest waiting Work
   Order" counts exactly these -- and all three shared the default beige, so
   work nobody had picked up looked the same as work still blocked on a
   dependency and work that had never been materialised. */
.state-ready { border-color: #c9c2ac; background: #f7f2e4; color: #6b5a2a; }
.state-blocked { border-color: #ccc6bd; background: #f1efeb; color: #5c554b; }
.state-draft { border-color: var(--line); background: #f6f5f2; color: #6d6a63; }

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

.proposal {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.25rem;
  margin: 1.25rem 0;
}
.proposal h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }

/* The message itself. Monospaced and unstyled on purpose: this is the text a
   customer receives, and dressing it up would show the approver something the
   recipient will not see. */
.message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 0.9rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1rem;
  margin: 1rem 0;
  max-width: var(--measure);
}

/* A rendered document. Styled to be read rather than scanned: one column at a
   comfortable measure, because this is the page where someone decides whether
   the output is good enough to send a client. */
.document {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.75rem 2rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
}
.document h2 { font-size: 1.35rem; margin: 0 0 0.75rem; }
.document h3 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; }
.document h4, .document h5 { font-size: 0.98rem; margin: 1.25rem 0 0.35rem; }
.document p { margin: 0.6rem 0; }
.document ul { margin: 0.6rem 0; padding-left: 1.25rem; }
.document li { margin: 0.25rem 0; }
.document hr { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0; }
.document .quoted {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 0.88rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.9rem 1rem;
  margin: 0.8rem 0;
}

.documents { list-style: none; margin: 0; padding: 0; }
.documents li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.documents li:last-child { border-bottom: 0; }

.decide { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin: 0.6rem 0 0; }
.decide label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); flex: 1 1 18rem; }
.decide input[type="text"] {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
}

.button {
  font: inherit;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.button:hover { border-color: var(--muted); }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.primary:hover { background: #17392d; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e6e1; --muted: #9c9890; --line: #35322c;
    --paper: #16150f; --card: #1e1c17; --accent: #3f8f6f;
    --attention: #d9a441; --bad: #d97b6c;
  }
  code { background: #2a2721; }
  .state { background: #2a2721; }
  .state-succeeded, .state-delivered, .state-approved, .state-allow { background: #1d2f26; color: #8fd0b0; border-color: #2f5344; }
  .state-failed, .state-cancelled, .state-rejected, .state-deny { background: #33201d; color: #e59b8d; border-color: #5a332c; }
  .state-awaiting_approval, .state-proposed, .state-require_approval,
  .state-submitted { background: #322a18; color: #e0b45f; border-color: #574823; }
  .state-running, .state-claimed, .state-dispatched,
  .state-admitted { background: #1e2634; color: #9ab6e0; border-color: #33445f; }
  .state-ready { background: #2e2a1c; color: #ccc08a; border-color: #4b442d; }
  .state-blocked { background: #2a2824; color: #a9a49b; border-color: #45413a; }
  .state-draft { background: #262421; color: #8f8b84; border-color: #3d3a35; }
  .button.primary { color: #0f1a15; }
}

/* --- The client-facing discovery form ------------------------------------
   A different reader from the rest of this stylesheet: not an operator with a
   dense table, but somebody's client, once, who did not ask to be here. */

body.discovery {
  background: #f5f7fa;
  color: #1b1d20;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
}

.discovery-shell { display: flex; min-height: 100vh; }

.discovery-aside {
  background: #fff;
  border-right: 1px solid #e4e8ee;
  box-sizing: border-box;
  flex: 0 0 17rem;
  padding: 1.75rem 1.5rem;
}

.brand-mark {
  color: #1b2b4b;
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-line { color: #7b838d; font-size: 0.8rem; }

.discovery-aside .progress { margin: 2rem 0; }
.discovery-aside .progress h2 {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  color: #5b6470;
}
.progress-step { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem; }
.progress-track {
  background: #e7ebf1;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.progress-fill { background: #2563eb; display: block; height: 100%; }
.progress-note { color: #7b838d; font-size: 0.78rem; margin: 0.5rem 0 0; }

.assurances { border-top: 1px solid #eef1f5; margin-top: 2rem; padding-top: 1.25rem; }
.assurance { margin-bottom: 1.25rem; }
.assurance h2 { font-size: 0.85rem; margin: 0 0 0.2rem; }
.assurance p { color: #6b7480; font-size: 0.8rem; margin: 0; }

.discovery-main {
  box-sizing: border-box;
  flex: 1 1 auto;
  margin: 0 auto;
  max-width: 46rem;
  padding: 2.5rem 2rem 4rem;
}

.discovery-main h1 {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 0.6rem;
}
.discovery-main .lede { color: #4a5360; margin: 0 0 2rem; }

.qcard {
  background: #fff;
  border: 1px solid #e4e8ee;
  border-radius: 10px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.qcard-head { display: flex; gap: 1rem; padding: 1.4rem 1.5rem 0; }

.qnum {
  background: #eef3fd;
  border-radius: 8px;
  color: #2563eb;
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  width: 2rem;
}

.qcard-titles { flex: 1 1 auto; }
.qtopic {
  color: #7b838d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0.35rem 0 0.2rem;
  text-transform: uppercase;
}
.qtext { font-size: 1.05rem; line-height: 1.4; margin: 0; }
.qtext label { cursor: pointer; }
.qwhy { color: #6b7480; font-size: 0.9rem; margin: 0.4rem 0 0; }

.qcard-body { padding: 1rem 1.5rem 0.25rem; }

.choices { margin-bottom: 0.75rem; }
.choice { align-items: baseline; display: flex; gap: 0.6rem; padding: 0.3rem 0; }

.qcard textarea {
  border: 1px solid #d5dbe3;
  border-radius: 8px;
  box-sizing: border-box;
  color: inherit;
  font: inherit;
  padding: 0.75rem 0.85rem;
  resize: vertical;
  width: 100%;
}
.qcard textarea:focus {
  border-color: #2563eb;
  outline: 2px solid #dbe6fd;
}

.qcount {
  color: #9aa3ad;
  font-size: 0.75rem;
  margin: 0.35rem 0 0;
  text-align: right;
}
.qcount.near { color: #b3261e; }

/* Set apart, because it is the control that stops a client inventing an answer
   and the one they are least likely to feel entitled to use. */
.qunknown {
  align-items: baseline;
  background: #f7f9fc;
  border-top: 1px solid #eef1f5;
  color: #4a5360;
  display: flex;
  font-size: 0.9rem;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.85rem 1.5rem;
}

.qactions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.qsave { color: #6b7480; font-size: 0.85rem; margin: 0; flex: 1 1 16rem; }

.discovery-main button.primary {
  background: #2563eb;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.reassurance {
  background: #eef3fd;
  border: 1px solid #d6e2fa;
  border-radius: 10px;
  color: #2c3a4d;
  font-size: 0.9rem;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
}
.reassurance p { margin: 0; }

.open-questions {
  background: #fbf8ef;
  border: 1px solid #eadfc2;
  border-radius: 10px;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
}
.open-questions h2 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.discovery-main .muted { color: #6b7480; }

@media (max-width: 48rem) {
  .discovery-shell { display: block; }
  .discovery-aside {
    border-bottom: 1px solid #e4e8ee;
    border-right: 0;
    flex: none;
    width: auto;
  }
  /* The trust panels move below the form on a phone: on a small screen they
     would otherwise be three screens of reassurance before the first question. */
  .assurances { display: none; }
  .discovery-main { padding: 1.5rem 1rem 3rem; }
}
/* --- The waiting page ------------------------------------------------------
   Somebody is looking at this because we asked them to wait, so it gets room
   and a rhythm rather than a spinner in the corner. */

.waiting {
  background: #fff;
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  margin-top: 1rem;
  padding: 2.75rem 2.5rem;
  text-align: center;
}

.waiting h1 { font-size: 1.5rem; margin: 1.5rem 0 0.6rem; }
.waiting .lede { color: #4a5360; margin: 0 auto; max-width: 30rem; }

.waiting-pulse {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.waiting-pulse span {
  background: #2563eb;
  border-radius: 50%;
  display: block;
  height: 0.6rem;
  opacity: 0.35;
  width: 0.6rem;
  animation: waiting-bounce 1.4s ease-in-out infinite;
}
.waiting-pulse span:nth-child(2) { animation-delay: 0.2s; }
.waiting-pulse span:nth-child(3) { animation-delay: 0.4s; }

@keyframes waiting-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-0.35rem); }
}

/* Somebody who has asked not to see motion is usually asking for a reason, and
   this animation carries no information they would lose. */
@media (prefers-reduced-motion: reduce) {
  .waiting-pulse span { animation: none; opacity: 0.6; }
}

.waiting-list {
  color: #5b6470;
  display: inline-block;
  font-size: 0.92rem;
  list-style: none;
  margin: 1.75rem auto 0;
  max-width: 28rem;
  padding: 0;
  text-align: left;
}

.waiting-list li {
  padding: 0.4rem 0 0.4rem 1.6rem;
  position: relative;
}

/* A dot rather than a tick. A tick claims the step is done, and nothing here
   knows that -- the round is one step, and ticks appearing on a timer would be
   an animation pretending to be a measurement. */
.waiting-list li::before {
  background: #c3d3f5;
  border-radius: 50%;
  content: "";
  height: 0.45rem;
  left: 0.35rem;
  position: absolute;
  top: 0.85rem;
  width: 0.45rem;
}

.waiting-note { color: #7b838d; font-size: 0.85rem; margin: 1.75rem 0 0; }

.waiting-slow {
  background: #fbf8ef;
  border: 1px solid #eadfc2;
  border-radius: 10px;
  color: #5a5136;
  font-size: 0.92rem;
  margin: 1.75rem auto 0;
  max-width: 32rem;
  padding: 1rem 1.25rem;
  text-align: left;
}
.waiting-slow p { margin: 0 0 0.5rem; }
.waiting-slow p:last-child { margin-bottom: 0; }
/* The sign-in page ----------------------------------------------------------
 *
 * Only the wordmark was ever styled here, so the form fell back to browser
 * defaults: labels inline with inputs, a grey system button, everything flush
 * left on a cream ground. It did not read as unfinished so much as as a
 * different product, which is the more expensive kind of wrong -- this is the
 * first page an agency ever sees.
 *
 * The palette is bound to `body.signin` rather than added to `:root`, and that
 * is deliberate. This sheet dresses three surfaces: the operator pages, the
 * client-facing discovery form, and this. The first two are warm and
 * document-like on purpose -- a client filling in a form should not feel they
 * have been handed an admin console. Only sign-in takes a brand palette, so
 * only sign-in has one here. Binding it to the body class is what keeps the
 * other two surfaces out of it; nothing below this point may be hoisted into
 * `:root` without redressing a client form nobody asked to redress.
 *
 * **It is the public site's palette now, not the workspace's.** This block used
 * to hold workspace.css's navy, on the argument that sign-in is one click from
 * the workspace and should match what it hands over to. That argument is still
 * a real one and it lost on length: a prospect crosses the front page, pricing,
 * `/register`, an email and this form before that one click, and all of those
 * are teal. So the seam moved from `/register` to just after sign-in, and there
 * is still exactly one.
 *
 * Reverting is this block plus the dark one below it, and nothing else -- which
 * is the property worth keeping whichever way the argument goes next.
 *
 * The names lie and are kept: `--sign-navy` holds a teal. Renaming reaches
 * thirty rules to change nothing a reader sees.
 */
body.signin {
  --sign-navy: #0f766e;
  --sign-navy-deep: #0b5b55;
  --sign-ember: #e8a33d;
  --sign-page: #f5f7f6;
  --sign-line: #dce6e2;
  --sign-muted: #6b7780;
  --sign-ink: #102b29;
  --sign-card: #ffffff;
  --sign-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sign-sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--sign-page);
  color: var(--sign-ink);
  font-family: var(--sign-sans);
}

/* Declared here rather than at the top of the sheet, because only this surface
   uses them. A face is downloaded when a rendered element asks for it, not when
   it is declared -- so the client form and the operator pages parse these four
   rules and fetch nothing. Same filenames as `public.css` and `home.css`, so
   somebody arriving from the front page already has them cached.

   Self-hosted because the policy is `default-src 'self'` with no `font-src`:
   a `fonts.gstatic.com` URL here would be refused, and refused silently. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(open-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(open-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


.signin-card {
  width: 100%;
  max-width: 24rem;
  background: var(--sign-card);
  border: 1px solid var(--sign-line);
  /* The 3px rule is the one motif the public site and the workspace still
     share, now that the palettes around it differ. Decorative: it carries no
     text, so it takes the warm ember rather than a readable bronze. */
  border-top: 3px solid var(--sign-ember);
  border-radius: 14px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 1px 2px rgba(8, 47, 43, .05), 0 12px 32px rgba(8, 47, 43, .07);
  text-align: center;
}

.signin-card .brand-name {
  color: var(--sign-navy);
  font-family: var(--sign-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0;
}

.signin-card .brand-line {
  color: var(--sign-muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  margin: 0.3rem 0 1.9rem;
}

/* Left-aligned inside a centred card. A label centred over its own field
   makes a form harder to scan, not friendlier -- the eye wants one left edge
   to run down. */
.signin-card form {
  display: grid;
  gap: 0.4rem;
  text-align: left;
}

.signin-card label {
  color: var(--sign-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.signin-card label + input { margin-bottom: 1rem; }

.signin-card input[type="email"],
.signin-card input[type="password"] {
  width: 100%;
  font: inherit;
  color: var(--sign-ink);
  background: #fff;
  border: 1px solid var(--sign-line);
  border-radius: 8px;
  padding: 0.68rem 0.8rem;
  transition: border-color 140ms, box-shadow 140ms;
}

.signin-card input[type="email"]:focus,
.signin-card input[type="password"]:focus {
  outline: none;
  border-color: var(--sign-navy);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

.signin-card button {
  width: 100%;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--sign-navy);
  border: 1px solid var(--sign-navy);
  border-radius: 8px;
  padding: 0.72rem 1rem;
  margin-top: 0.35rem;
  cursor: pointer;
  transition: background 140ms, transform 140ms;
}

.signin-card button:hover { background: var(--sign-navy-deep); }
.signin-card button:active { transform: translateY(1px); }
/* Teal, not ember. The offset puts this ring on the white card rather than on
   the button, so the card is what it has to contrast against -- and ember on
   white is 2.1:1, under the 3:1 a focus indicator needs. The old gold was the
   same 2.1:1 and looked fine only because nobody tabbed to it. Teal on white
   is 5.0:1. */
.signin-card button:focus-visible {
  outline: 2px solid var(--sign-navy);
  outline-offset: 2px;
}

/* The refusal is read before anything is retyped, so it sits above the fields
   rather than under the button. */
.signin-card .error {
  background: #fdf1ef;
  border: 1px solid #f3ccc6;
  border-radius: 8px;
  color: #8c1d13;
  font-size: 0.88rem;
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.85rem;
  text-align: left;
}

/* Arriving from a confirmation link. Green rather than red, and in the same
   slot the refusal uses: it answers the same question -- why am I looking at
   this form -- and the two never appear together. */
.signin-card .confirmed {
  background: #e3f4ea;
  border: 1px solid #bfe0cd;
  border-radius: 8px;
  color: #15803d;
  font-size: 0.88rem;
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.85rem;
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  /* This block is live, which the one in `home.css` is not: nothing stamps a
     theme attribute there, but this is a media query and the OS answers it. So
     a dark-mode reader crosses a light front page and a light pricing page --
     `public.css` fixes those light on purpose -- and then meets a dark form.
     That seam predates this change and is not resolved by it; retinting it to
     pine at least makes the dark form the same product as the light one.

     Lightened, not inverted: #0f766e on a dark ground is unreadable, so the
     accent moves up and the button takes dark text against it. */
  body.signin {
    --sign-page: #071f1d;
    --sign-card: #0c2b28;
    --sign-line: #1c3a36;
    --sign-muted: #8b9b97;
    --sign-ink: #e8f1ee;
    --sign-navy: #5fc7ba;
    --sign-navy-deep: #8fdcd2;
  }
  .signin-card input[type="email"],
  .signin-card input[type="password"] {
    background: #09231f;
    color: var(--sign-ink);
  }
  .signin-card button { color: #06201d; }
  .signin-card .error {
    background: #2c1714;
    border-color: #5a2b23;
    color: #e59b8d;
  }
  .signin-card .confirmed {
    background: #12291d;
    border-color: #24503a;
    color: #8fd0aa;
  }
}
/* The agency's name for the work, above the heading. Small: it is context, not
   the thing being asked. */
.discovery-main .engagement {
  color: #6b7480;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}
/* The engagement room -------------------------------------------------------
 *
 * A page a client returns to, rather than a form they complete once. Shares
 * this sheet with the discovery form because both are the client's side of the
 * product and neither is ever rendered inside the agency frame -- putting these
 * rules in workspace.css would render the room unstyled with nothing anywhere
 * to say why.
 *
 * The navy sidebar is the agency workspace's colour deliberately: a client who
 * has seen a proposal from this agency should recognise the room it arrives in.
 */

body.room {
  background: #f5f7fa;
  color: #1b1d20;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
}

.room-shell { display: flex; min-height: 100vh; }

.room-nav {
  background: #12305f;
  color: #cdd7e6;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0 16rem;
  padding: 1.6rem 1.2rem;
}

.room-brand { margin-bottom: 1.6rem; }
.room-brand .brand-mark { color: #fff; font-size: 1.35rem; }
.room-brand .brand-line {
  color: #8fa6c6;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.room-client {
  align-items: center;
  background: #1a3d73;
  border-radius: 10px;
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  padding: 0.7rem 0.8rem;
}
.room-initials {
  background: #2f6fb5;
  border-radius: 8px;
  color: #fff;
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 0.5rem;
}
.room-client-text { display: flex; flex-direction: column; min-width: 0; }
.room-client-text strong { color: #fff; font-size: 0.92rem; }
.room-client-text span {
  color: #8fa6c6;
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-links { display: flex; flex-direction: column; gap: 0.15rem; }

.room-link {
  align-items: center;
  border-radius: 8px;
  color: #cdd7e6;
  display: flex;
  font-size: 0.92rem;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  text-decoration: none;
}
.room-link:hover { background: #1a3d73; color: #fff; }
.room-link.here { background: #1a3d73; color: #fff; font-weight: 650; }

/* Not a link, and styled so nobody tries. */
.room-link.off { color: #6f86a8; cursor: default; }
.room-link.off:hover { background: none; color: #6f86a8; }

.room-badge {
  background: #e9a825;
  border-radius: 999px;
  color: #3d2c00;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: auto;
  padding: 0.05rem 0.45rem;
}
.room-soon {
  border: 1px solid #3f6099;
  border-radius: 4px;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  margin-left: auto;
  padding: 0.05rem 0.35rem;
  text-transform: uppercase;
}

.room-foot {
  border-top: 1px solid #1f4483;
  color: #8fa6c6;
  font-size: 0.74rem;
  line-height: 1.5;
  margin-top: auto;
  padding-top: 1rem;
}

/* The overview is a dashboard and uses the screen; the pages you read and type
   on are not, and keep a measure. A held point answered in a box 1,400px wide
   is harder to read, not easier, and the same is true of the client's own
   answers quoted back at them.
   The cap is generous rather than absent: past about 1,500px the two columns
   stop being a pair and become two things that happen to be on one screen. */
.room-main {
  box-sizing: border-box;
  flex: 1 1 auto;
  margin: 0 auto;
  max-width: 96rem;
  padding: 2.2rem 2.4rem 4rem;
  width: 100%;
}

.room-main.narrow { max-width: 58rem; }

/* Prose keeps its measure whatever the card is doing. Widening the page must
   not turn a paragraph into a line somebody loses their place in. */
body.room .card > p,
body.room .card .tiles + p { max-width: 68ch; }

.room-head h1 { font-size: 1.7rem; letter-spacing: -0.01em; margin: 0; }
.room-sub { color: #6b7480; margin: 0.2rem 0 1.6rem; }

body.room .card {
  background: #fff;
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  margin-bottom: 1.1rem;
  padding: 1.3rem 1.4rem;
}
body.room .card h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
body.room .card.ask { border-left: 4px solid #e9a825; }

.room-cta { margin: 1rem 0 0; }

/* A brief written while the round is still open. Marked rather than blended
   in: the sentence above it says "built from what you told us", and a client
   with four questions still on screen needs the difference to be visible. */
.room-note {
  background: #fdf7e6;
  border-left: 3px solid #e9a825;
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.85rem;
}

/* Stages ------------------------------------------------------------------
 * Named and stated. No bar and no percentage -- see dashboard/engagement.py
 * for why an engagement has no honest denominator. */

.stages { list-style: none; margin: 0; padding: 0; }

.stage {
  align-items: flex-start;
  border-top: 1px solid #eef1f5;
  display: flex;
  gap: 0.75rem;
  padding: 0.8rem 0;
}
.stage:first-child { border-top: 0; padding-top: 0.2rem; }

.stage-mark {
  border-radius: 999px;
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  height: 1.6rem;
  line-height: 1.6rem;
  text-align: center;
  width: 1.6rem;
}
.stage.done .stage-mark { background: #dff0e6; color: #1c6b45; }
.stage.you .stage-mark { background: #fbeed2; color: #8a5a00; }
.stage.working .stage-mark { background: #dbe7f7; color: #1f4d8f; }
.stage.ahead .stage-mark { background: #eef1f5; color: #97a1af; }

.stage-text { display: flex; flex-direction: column; }
.stage-detail { color: #6b7480; font-size: 0.86rem; }
.stage.ahead .stage-text strong { color: #7b8492; font-weight: 600; }

.stage-flag {
  background: #fbeed2;
  border-radius: 999px;
  color: #8a5a00;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: auto;
  padding: 0.15rem 0.55rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Points to settle -------------------------------------------------------- */

.settle {
  border-top: 1px solid #eef1f5;
  margin-top: 1rem;
  padding-top: 1rem;
}
.settle.given { opacity: 0.92; }
.settle-q { font-weight: 600; margin: 0 0 0.6rem; }

.settle-weight {
  border-radius: 4px;
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-right: 0.5rem;
  padding: 0.1rem 0.4rem;
  text-transform: uppercase;
  vertical-align: 0.08em;
}
.w-decide { background: #fbdcd7; color: #8f2c1e; }
.w-clarify { background: #fbeed2; color: #8a5a00; }
.w-later { background: #e3e9f3; color: #46577a; }

.settle-label {
  color: #5b6470;
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}

.settle textarea {
  border: 1px solid #d6dce5;
  border-radius: 8px;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.7rem;
  width: 100%;
}
.settle textarea:focus { border-color: #2f6fb5; outline: 2px solid #cfe0f5; }

body.room .button {
  background: #12305f;
  border: 1px solid #12305f;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-decoration: none;
}
body.room .button:hover { background: #1a3d73; }
body.room .button.ghost { background: #fff; color: #12305f; }
body.room .button.ghost:hover { background: #f2f6fc; }

@media (max-width: 46rem) {
  .room-shell { display: block; }
  .room-nav { flex: none; }
  .room-links { flex-direction: row; flex-wrap: wrap; }
  .room-foot { display: none; }
}

/* A client's own answers, read back to them.
 *
 * Copied from workspace.css rather than shared, because the agency sheet and
 * this one are different products with different palettes and a page loading
 * both gets whichever came last. Copying is the cheap option here and it forces
 * the colours to be chosen rather than inherited -- which is the point.
 *
 * The typed/ticked split is preserved exactly as the agency sees it: what the
 * client wrote is quoted, what they picked from our options is not, and each
 * says which it is. That distinction is the reason a form can be evidence at
 * all, and it would be quietly lost by styling both the same. */

body.room .qa { border-top: 1px solid #eef1f5; margin-top: 1rem; padding-top: 1rem; }
body.room .qa:first-of-type { border-top: 0; margin-top: 0.5rem; padding-top: 0; }

body.room .qa-question { font-weight: 600; margin: 0 0 0.5rem; }
body.room .qa-num {
  background: #e8eefb;
  border-radius: 5px;
  color: #12305f;
  font-size: 0.75rem;
  margin-right: 0.4rem;
  padding: 0.1rem 0.45rem;
}

body.room .qa-written {
  background: #f5f7fa;
  border-left: 3px solid #2f6fb5;
  border-radius: 0 7px 7px 0;
  margin: 0;
  padding: 0.6rem 0.9rem;
  white-space: pre-wrap;
}

body.room .qa-chosen { margin: 0; }
body.room .qa-label { color: #6b7480; font-size: 0.75rem; margin: 0.25rem 0 0; }
body.room .qa-unknown { color: #8a6d1f; font-style: italic; margin: 0; }

/* An answered point collapses its box. Six open textareas read as six
   unanswered questions, which is the opposite of what the page just did. */
.settle-edit > summary {
  color: #12305f;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0;
}
.settle-edit[open] > summary { margin-bottom: 0.4rem; }
.settle.given .settle-edit > summary { color: #5b6470; font-weight: 500; }

/* The answer and its label are in the markup for every question, answered or
   not, because the script writes into them after saving rather than building
   them. Empty, they must take up no room at all -- a client without the script
   has to see exactly the page they saw before. `:empty` matches only when there
   is no text node, which is why the template renders these on one line. */
body.room .qa-written:empty,
body.room .qa-label:empty { display: none; }

/* One form around every question. The buttons inside it are per-question; the
   one at the end saves the lot. */
.settle-form { display: block; }

.settle-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.5rem 0 0;
}

/* Whatever the script has to say about one save: in progress, or failed and
   your words are still here. Never "saved" -- the answer appearing above is
   what says that, and two things saying it is one of them being decoration. */
.settle-state {
  color: #6b7480;
  font-size: 0.8rem;
}

.settle-all {
  align-items: center;
  border-top: 1px solid #e3e8ef;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
}

.settle-all .hint { color: #8a6d1f; font-size: 0.8rem; margin: 0; }

/* Overview: two columns, the wider one carrying what the client acts on and
   the narrower one what they check. Collapses to one on a phone, where a rail
   beside the content is just content further down. */
/* The rail is bounded rather than proportional. At 1,400px a 1fr rail is
   550px of status pills, which is not a rail -- it is a second column of
   content competing with the first. */
.room-cols {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
}
.room-col { min-width: 0; }

@media (max-width: 60rem) {
  .room-cols { grid-template-columns: minmax(0, 1fr); }
}

/* The state line under the title. Two states only: it is waiting on them, or
   it is not. Anything finer would be a claim about how long. */
.room-state {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 0.4rem;
  margin: 0 0 1.3rem;
  padding: 0.2rem 0.7rem;
}
.room-state.moving { background: #e4f2ea; color: #1c6b45; }
.room-state.needs-you { background: #fbeed2; color: #8a5a00; }
.room-dot { border-radius: 999px; height: 0.45rem; width: 0.45rem; }
.room-state.moving .room-dot { background: #1c6b45; }
.room-state.needs-you .room-dot { background: #b07a12; }

/* The journey, read left to right. */
.steps {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  position: relative;
}

/* The connector, drawn from each step back to the previous one so the line
   stops at the last step rather than running off the end.
   It spans the whole distance between the two dots rather than just the grid
   gap. At a narrow width the difference is cosmetic; at full width the dots sit
   ~280px apart and a 20px stub reads as a rendering fault.
   The arithmetic: items are equal-width flex children, so the previous dot's
   right edge is one item width plus the gap to the left, less the dot. */
.step-item + .step-item::before {
  background: #e0e6ef;
  content: "";
  height: 2px;
  left: calc(-100% + 1.25rem);
  position: absolute;
  right: 100%;
  top: 0.85rem;
}

/* Green only where the step *before* it finished: the line reports the
   transition, not the step it happens to touch. */
.step-item.done + .step-item::before { background: #9fd3b7; }

.step-dot {
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  width: 1.75rem;
  z-index: 1;
}
.step-item.done .step-dot { background: #dff0e6; color: #1c6b45; }
.step-item.you .step-dot { background: #fbeed2; color: #8a5a00; }
.step-item.working .step-dot { background: #dbe7f7; color: #1f4d8f; }
.step-item.ahead .step-dot { background: #eef1f5; color: #97a1af; }

.step-name { font-size: 0.88rem; font-weight: 650; }
.step-detail { color: #6b7480; font-size: 0.78rem; line-height: 1.4; }
.step-item.ahead .step-name { color: #7b8492; font-weight: 600; }

/* Pending questions, previewed on the overview so the work is visible before
   the click. */
.count-note { color: #8a5a00; font-size: 0.85rem; font-weight: 600; }

.pending { list-style: none; margin: 0; padding: 0; }
.pending li { border-top: 1px solid #eef1f5; }
.pending li:first-child { border-top: 0; }
.pending a {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 0.6rem;
  padding: 0.65rem 0;
  text-decoration: none;
}
.pending a:hover .pending-text { color: #12305f; text-decoration: underline; }
.pending-text { flex: 1 1 auto; font-size: 0.92rem; min-width: 0; }

/* At a glance ------------------------------------------------------------- */

.glance { list-style: none; margin: 0; padding: 0; }
.glance li {
  border-top: 1px solid #eef1f5;
  display: grid;
  gap: 0.15rem 0.6rem;
  grid-template-columns: 1fr auto;
  padding: 0.6rem 0;
}
.glance li:first-child { border-top: 0; padding-top: 0; }
.glance-name { font-size: 0.9rem; font-weight: 600; }
.glance-detail { color: #6b7480; font-size: 0.78rem; grid-column: 1 / -1; }

.glance-pill {
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}
.p-done { background: #dff0e6; color: #1c6b45; }
.p-you { background: #fbeed2; color: #8a5a00; }
.p-working { background: #dbe7f7; color: #1f4d8f; }
.p-ahead { background: #eef1f5; color: #6b7480; }

/* Activity ---------------------------------------------------------------- */

.feed { list-style: none; margin: 0; padding: 0; }
.feed-item {
  border-left: 2px solid #e0e6ef;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0 0.85rem 0.8rem;
  position: relative;
}
.feed-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.feed-item::before {
  background: #c3cddb;
  border-radius: 999px;
  content: "";
  height: 0.5rem;
  left: -0.29rem;
  position: absolute;
  top: 0.35rem;
  width: 0.5rem;
}
.feed-item.you::before { background: #1c6b45; }
.feed-what { font-size: 0.86rem; }
.feed-when { color: #8a929e; font-size: 0.74rem; }

/* The brief, once the agency has shared it. The one card on the page that is
   an outcome rather than a request, so it leads. */
body.room .card.brief { border-left: 4px solid #2f6fb5; }
body.room .card.brief .room-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tiles-head {
  color: #5b6470;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  margin: 1.2rem 0 0.6rem;
  text-transform: uppercase;
}

.tiles {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
}
.tiles li {
  background: #f5f7fa;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.7rem;
}
.tiles strong { color: #12305f; font-size: 1.35rem; line-height: 1.1; }
.tiles span { color: #6b7480; font-size: 0.74rem; line-height: 1.3; }

/* Approval, and approval of something now superseded. The second is amber
   rather than green because it is not a tick: the client agreed to a document
   that has since changed, and the page has to say so. */
.approved {
  background: #e4f2ea;
  border-radius: 8px;
  color: #1c6b45;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
}
.approved.earlier { background: #fbeed2; color: #8a5a00; }

.approve {
  border-top: 1px solid #eef1f5;
  margin-top: 1.1rem;
  padding-top: 1rem;
}
.approve-note { color: #4a5768; font-size: 0.88rem; margin: 0 0 0.7rem; max-width: 62ch; }
.approve input[type="text"] {
  border: 1px solid #d6dce5;
  border-radius: 8px;
  display: block;
  font: inherit;
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
  max-width: 22rem;
  padding: 0.55rem 0.7rem;
  width: 100%;
}
.approve input[type="text"]:focus { border-color: #2f6fb5; outline: 2px solid #cfe0f5; }

/* The money-and-date decisions. Set apart from the held points below them:
   these two are the ones that decide whether the engagement can be contracted
   at all, and they carry named options rather than a free-text box. */
.settle-money {
  background: #fffaf0;
  border: 1px solid #f0dfbe;
  border-left: 4px solid #e9a825;
  border-radius: 10px;
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
}
.settle-money.given { background: #f6f9f7; border-color: #d6e6dc; border-left-color: #1c6b45; }

.choices { border: 0; margin: 0 0 0.7rem; padding: 0; }
.choices legend { padding: 0; }
.choices label {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  line-height: 1.45;
  padding: 0.3rem 0;
}
.choices input[type="radio"] { flex: none; margin-top: 0.28rem; }
.choices label span { font-size: 0.92rem; }

.chosen-line {
  color: #1c6b45;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.settle-money input[type="text"],
.settle-money textarea {
  border: 1px solid #d6dce5;
  border-radius: 8px;
  box-sizing: border-box;
  display: block;
  font: inherit;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  max-width: 26rem;
  padding: 0.5rem 0.7rem;
  width: 100%;
}
.settle-money input[type="text"]:focus,
.settle-money textarea:focus { border-color: #2f6fb5; outline: 2px solid #cfe0f5; }

/* The money on a proposed change. Three rows and a rule above the total,
   because a client comparing "previously agreed" with "revised" should not
   have to work out which line is the answer. */
.change-money { border-collapse: collapse; margin: 10px 0 4px; width: 100%; }
.change-money td { padding: 4px 0; }
.change-money td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.change-money .change-total td { border-top: 1px solid var(--line, #e3e8ef); font-weight: 700; }

/* --- Registration ----------------------------------------------------------
 *
 * The sign-in card, widened and paired up. It shares the palette deliberately:
 * this page and the three after it -- confirmation, sign-in, workspace -- are
 * one journey, and the seam between the marketing site and the product belongs
 * at the start of that journey rather than in the middle of it.
 *
 * **It has to fit one screen.** A signup that scrolls hides its own submit
 * button, and hides the workspace address -- the one field that cannot be
 * changed afterwards -- while somebody types their password. Hence two fields
 * per row and one line of guidance under the grid instead of five between the
 * fields. */

.signin-card.wide { max-width: 34rem; }

.signin-card .plan-line {
  background: var(--sign-page);
  border: 1px solid var(--sign-line);
  border-radius: 8px;
  color: var(--sign-muted);
  font-size: 0.82rem;
  margin: 0 0 1.4rem;
  padding: 0.6rem 0.8rem;
  text-align: left;
}

.signin-card .plan-line b { color: var(--sign-navy); }

.signin-card .pair {
  display: grid;
  gap: 0 0.85rem;
  grid-template-columns: 1fr 1fr;
}

.signin-card .pair > span { display: block; min-width: 0; }

/* The address and its fixed domain read as one control, because that is what
   they are: nobody is choosing the part after the dot. */
.signin-card .suffixed { display: flex; align-items: stretch; }

.signin-card .suffixed input {
  border-bottom-right-radius: 0;
  border-right: 0;
  border-top-right-radius: 0;
  min-width: 0;
}

.signin-card .suffix {
  align-items: center;
  background: var(--sign-page);
  border: 1px solid var(--sign-line);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  color: var(--sign-muted);
  display: flex;
  font-size: 0.78rem;
  margin-bottom: 1rem;
  padding: 0 0.6rem;
  white-space: nowrap;
}

/* Deliberately identical to the email and password rule above, because these
   sit in the same row as each other: `Your name` is a text input and `Work
   email` is an email input, and they were 0.95rem/0.6rem against
   inherit/0.68rem -- two different heights and two different border greys, side
   by side, four pixels out. Nobody would have specified that; it is what two
   rules written at different times look like once a palette change puts them
   under a bright light.

   The margin is the one real difference: `label + input` gives the others
   theirs, and `#slug` is wrapped in `.suffixed`, so that selector misses it. */
.signin-card input[type="text"] {
  background: #fff;
  border: 1px solid var(--sign-line);
  border-radius: 8px;
  color: var(--sign-ink);
  font: inherit;
  margin-bottom: 1rem;
  padding: 0.68rem 0.8rem;
  width: 100%;
}

.signin-card input[type="text"]:focus-visible {
  border-color: var(--sign-navy);
  outline: 2px solid rgba(15, 118, 110, 0.22);
  outline-offset: 1px;
}

.signin-card .hint {
  color: var(--sign-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  margin: 0.2rem 0 1rem;
  text-align: left;
}

.signin-card .alt-way {
  color: var(--sign-muted);
  font-size: 0.8rem;
  margin: 1.4rem 0 0;
}

.signin-card .alt-way a { color: var(--sign-navy); }

@media (max-width: 34rem) {
  .signin-card .pair { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  .signin-card .plan-line { background: #09231f; border-color: #1c3a36; }
  .signin-card input[type="text"] { background: #09231f; border-color: #284a45; color: var(--sign-ink); }
  .signin-card .suffix { background: #09231f; border-color: #284a45; }
}