/* 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 has to match the workspace
 * the agency is one click away from landing in, so only sign-in takes the
 * workspace palette. The values are workspace.css's, copied rather than
 * imported: two whole-page stylesheets on one page is a race, and this page
 * loads exactly one.
 */
body.signin {
  --sign-navy: #12305f;
  --sign-navy-deep: #0d2247;
  --sign-gold: #e9a825;
  --sign-page: #f4f6f9;
  --sign-line: #e3e8ef;
  --sign-muted: #64748b;
  --sign-ink: #1a2740;
  --sign-card: #ffffff;

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

.signin-card {
  width: 100%;
  max-width: 24rem;
  background: var(--sign-card);
  border: 1px solid var(--sign-line);
  /* The gold rule is the workspace's own motif -- its stat cards carry the
     same one -- so the page is recognisable before a word is read. */
  border-top: 3px solid var(--sign-gold);
  border-radius: 12px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 1px 2px rgba(16, 34, 66, .06), 0 12px 32px rgba(16, 34, 66, .07);
  text-align: center;
}

.signin-card .brand-name {
  color: var(--sign-navy);
  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(18, 48, 95, .12);
}

.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); }
.signin-card button:focus-visible {
  outline: 2px solid var(--sign-gold);
  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: #fdeeec;
  border: 1px solid #f0c8c2;
  border-radius: 8px;
  color: #8f2c1e;
  font-size: 0.88rem;
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.85rem;
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  body.signin {
    --sign-page: #0f1523;
    --sign-card: #161d2e;
    --sign-line: #263149;
    --sign-muted: #8b97ab;
    --sign-ink: #e6eaf2;
    --sign-navy: #3f6cb5;
    --sign-navy-deep: #4d7cc7;
  }
  .signin-card input[type="email"],
  .signin-card input[type="password"] {
    background: #101726;
    color: var(--sign-ink);
  }
  .signin-card button { color: #0b1120; }
  .signin-card .error {
    background: #2c1714;
    border-color: #5a2b23;
    color: #e59b8d;
  }
}
/* 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; }

/* 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; }

/* 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; }