/* theme.css — every colour, typeface and spacing value in GAIN Pulse, in one file.
   No other file holds a colour or a size. When Maleh and Deisy land the site redesign, this
   is the one file to redo (docs/build-plan.md section 1).

   The identity is the site's own: deep teal, orange for fills and rules only, a second
   orange for orange text because the fill orange is too light to read as words, Unbounded
   for titles over Poppins for everything else. The paper, ink and line colours below were
   chosen while building the screens on 2026-09-12 and are the only values here that did not
   come from the identity.

   Typefaces changed on 2026-09-18, from Cormorant Garamond over Libre Franklin, to match the
   site design the designers delivered (Website-GAIN-Option-02). The two colours below were
   already the identity's own and did not change. Two rules govern where each face goes.
   Unbounded is a display face, drawn for wordmarks and short names, so it is used ONLY for
   the wordmark, the landing headline, the sign names and the closing's heading - never for a
   sentence the leader has to read through. Everything else is Poppins, set one notch smaller
   than Libre Franklin was, because Poppins carries a larger x-height and ran the read about
   seven per cent longer at the same size. Where a line used to be set apart by having the
   serif - the read's headline, the crew question, the wait screen's line - it is now set
   apart by size, weight and colour instead.

   Written for a phone first. The one change on a wide screen is at the foot of the file. */

:root {
  --teal: #184B59;
  --teal-deep: #123845;
  --teal-tint: #E8EEF0;
  --orange: #FF6501;          /* fills and rules only */
  --orange-text: #D45400;     /* orange as words */
  --ink: #17262B;
  --ink-soft: #5A6B71;
  --paper: #FBF9F6;
  --line: #E4DED6;
  --card: #FFFFFF;             /* the short version's panel on the read page */

  --display: "Unbounded", "Trebuchet MS", Verdana, sans-serif;   /* titles and names only */
  --text: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step: 0.75rem;            /* the unit every gap is built from */
  --gap: 1.5rem;
  --wide: 34rem;              /* a comfortable line length for reading */
  --radius: 0.6rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: 0.975rem;
  line-height: 1.62;
}

/* -- the frame ---------------------------------------------------------------- */

.top {
  display: flex;
  align-items: baseline;
  gap: var(--step);
  padding: var(--step) var(--gap);
  border-bottom: 2px solid var(--orange);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.by { font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }

.page {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--gap) var(--gap) calc(var(--gap) * 2);
}

.foot {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--gap);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* -- words -------------------------------------------------------------------- */

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--teal);
  margin: 0 0 var(--step);
}

.lead { font-size: 1.1rem; margin: 0 0 var(--gap); }
.note { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.4rem; }
.problem { color: var(--orange-text); font-weight: 500; }
.credit { font-size: 0.9rem; color: var(--ink-soft); }
.credit a, .quiet-link { color: var(--orange-text); }
.refcode { font-size: 0.95rem; color: var(--ink-soft); }
.refcode b { color: var(--ink); letter-spacing: 0.06em; }

/* The landing screen is paragraphs, not bullets (2026-09-12). The line about who reads these
   and what is kept is the promise the candour rests on, so it is set slightly apart. */
.page > p { margin: 0 0 var(--step); }
.who {
  margin-top: var(--gap);
  padding-top: var(--step);
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.rule { border: 0; border-top: 2px solid var(--orange); margin: var(--gap) 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* -- buttons ------------------------------------------------------------------ */

.go {
  display: inline-block;
  background: var(--teal);
  color: var(--paper);
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 500;
  border: 0;
  border-radius: var(--radius);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
}

.go:hover { background: var(--teal-deep); }
.go:disabled { opacity: 0.5; cursor: default; }

.quiet {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-family: var(--text);
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
}

.quiet:hover { border-color: var(--ink-soft); }

/* -- the setup screen --------------------------------------------------------- */

.setup .field { display: block; margin-bottom: var(--gap); border: 0; padding: 0; }
.ask { display: block; font-weight: 500; margin-bottom: 0.5rem; }

.setup input[type="text"] {
  width: 100%;
  font-family: var(--text);
  font-size: 1.05rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}

.setup input[type="text"]:focus, textarea:focus { outline: 2px solid var(--teal); }

.choice { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; }
.choice input { width: 1.1rem; height: 1.1rem; accent-color: var(--teal); }

/* -- the conversation --------------------------------------------------------- */

/* The strip stays at the top of the screen while he scrolls, so where he is in the eight is
   always in view: the four GAIN marks, the words of the step this question tests, the plain
   counter, and a bar that fills by question. Added 2026-09-12: before it, all of this was at
   the top of the page and gone from sight by the third answer. */
/* The strip moved on 2026-09-13 from the top of the page to directly above the live
   question, which is where the leader is actually looking. It no longer needs pinning, so
   the sticky positioning is gone: the live question is always the last thing in the thread
   and always in view. It reads as a quiet band belonging to the question below it rather
   than as a header belonging to the page. */
.strip {
  padding: var(--step) 0 0.5rem;
  margin: var(--gap) 0 0.6rem;
  border-top: 1px solid var(--line);
}

.bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: var(--orange);   /* a fill, which is what the orange is for */
  transition: width 0.3s ease;
}

.marks { display: flex; gap: 0.55rem; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; }
.mark { color: var(--line); }
.between { color: var(--line); }
.mark.visited { color: var(--ink-soft); }
.mark.current { color: var(--orange-text); font-weight: 600; }

/* The step's words start underneath their own letter, and open with that letter in orange
   (2026-09-18, Wissam's idea). The four letters had been a cipher to anyone nobody had
   explained them to - Christian at Polar Stork had to ask what GAIN stands for - and the words
   sat at the left margin, so nothing on the screen said that the lit "A" and the word "Align"
   were the same thing. Now the line begins under the lit letter and repeats it in orange, so
   the leader is told the letter's meaning without a screen explaining the framework, which is
   the thing the specification will not do. This is the conversation screen only; the read page
   already ties the two together by putting the words beside the lit letter (2026-09-16).

   The four indents are measured, not derived: they are where each letter actually starts in
   the row above, at 0, 2.31, 4.50 and 6.26 rem from its left edge. They come from the .marks
   rule above - its font size, weight, letter-spacing and gap - so if any of those four values
   changes, these have to be measured again. Nothing breaks if they drift; the words simply
   stop sitting under their letter. A line too long for the screen wraps under the indent
   rather than back to the margin, which is what keeps the block reading as one thing. */
.stepwords {
  min-height: 1.2rem;
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.stepwords::first-letter { color: var(--orange-text); font-weight: 600; }
.stepwords.at-G { padding-left: 0; }
.stepwords.at-A { padding-left: 2.31rem; }
.stepwords.at-I { padding-left: 4.50rem; }
.stepwords.at-N { padding-left: 6.26rem; }

.counter { margin: 0.1rem 0 0.4rem; font-size: 0.8rem; color: var(--ink-soft); }

.thread { margin-bottom: var(--gap); }

.said {
  margin: 0 0 var(--step);
  padding-left: 0.9rem;
  border-left: 3px solid var(--teal-tint);
}

.said.asking {
  border-left-color: var(--orange);
  font-size: 1.15rem;
  line-height: 1.45;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.said.ack { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 0.3rem; }

.answered {
  margin: 0 0 calc(var(--gap) * 0.8) auto;
  max-width: 90%;
  width: fit-content;
  background: var(--teal-tint);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  white-space: pre-wrap;      /* his own line breaks are kept */
  overflow-wrap: anywhere;    /* a long word cannot push the page sideways */
}

.answer textarea {
  width: 100%;
  font-family: var(--text);
  font-size: 1.05rem;
  line-height: 1.5;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  resize: vertical;
}

.buttons { display: flex; gap: var(--step); margin-top: var(--step); }

.waiting .said { border-left-color: var(--orange); }

/* -- the landing screen's second way in --------------------------------------- */

/* A leader convinced by the first paragraph should not have to read three more to find the
   button (2026-09-13). Set closer to the paragraph above it than the footer button is, so it
   reads as belonging to that paragraph rather than ending the page. */
.start-early { margin: 0 0 var(--gap); }

/* -- the wait ------------------------------------------------------------------ */

/* This screen used to wear a question's clothes - the same quotation rule down its left
   side, the same size - so after seven minutes of turn-taking it read as a ninth turn and
   then never gave the leader his go. What felt frozen was the missing turn (Wissam,
   2026-09-13). It now speaks in a different voice: no rule, smaller, quieter. */
.working .said, .working .doing { border-left: 0; padding-left: 0; }
.doing {
  font-family: var(--text);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 0 0 var(--step);
}
.working p { color: var(--ink-soft); }

/* The one moving thing on the page, and deliberately the only one. The tool makes a single
   call and waits for it, so it does not know what fraction is done; a bar that filled would
   be a lie told by a page whose whole argument is that a number can mislead you. These claim
   nothing except that the page is alive. */
.pulsing { display: flex; gap: 0.4rem; margin: 0 0 var(--step); }
.pulsing span {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--orange);
  animation: pulse 1.4s ease-in-out infinite;
}
.pulsing span:nth-child(2) { animation-delay: 0.2s; }
.pulsing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pulsing span { animation: none; opacity: 0.6; }
}

/* The steps already answered, folded away above the one he is on (2026-09-16). Quiet, so
   the eye goes past it to the live question. */
.earlier {
  margin: 0 0 var(--gap);
  padding: 0 0 var(--step);
  border-bottom: 1px solid var(--line);
}
.earlier summary {
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.earlier[open] summary { margin-bottom: var(--step); }

/* The sign that the tool is thinking after he sends an answer (2026-09-16). */
.thinking { margin: var(--step) 0 0; }
.thinking .pulsing { margin: 0; }
/* The one-line note under it on the first question only (2026-09-18): the phrase call
   makes that wait about ten seconds rather than one or two. Quiet, like the counter. */
.thinking .note { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); }

/* -- the read ----------------------------------------------------------------- */

/* This page is the product (docs/build-plan.md section 5). Everything above is a means of
   getting here: the leader has answered eight questions and this is the whole of what he
   gets back. It is built to be read once, carefully, on a phone, between two meetings.

   Three decisions carry it. The measure is narrower than the rest of the site, because a
   long line is what makes a page of prose look like work. The line height is looser than
   the conversation's, because he is reading rather than scanning. And the sign names are
   set in the serif at a size that stops the eye, so that scrolling past one is a decision
   rather than an accident. */

.read {
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.read p { margin: 0 0 var(--step); }
.read strong { font-weight: 600; }

/* The headline: the one line he might repeat to someone else, so it is set like a title
   rather than like a first paragraph. */
.read > p:first-child {
  font-family: var(--text);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--teal);
  margin-bottom: var(--gap);
}

/* A whole paragraph in bold is either a sign's name or one of the read's three labels.
   The sign names carry a step mark and are set apart; the labels are quieter than the
   text they introduce, because they are signposts and not content.

   Not inside the headline, which is its own .read block and is the one line on the page the
   leader might repeat to someone else. Without that exclusion a headline that arrived wrapped in
   bold would be drawn as a small grey uppercase label - the best sentence on the page set as the
   quietest thing on it, with nothing to flag it. app/main.py now takes the bold off the headline
   as well, so this is the second of two guards and neither depends on the other (2026-09-18). */
.read:not(.headline) p > strong:only-child {
  display: block;
  font-family: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--gap);
}

.read p.sign {
  margin: calc(var(--gap) * 1.4) 0 var(--step);
}

/* Note the selector: the sign's name is no longer an only child, because the step mark sits
   beside it, so it cannot be reached by the :only-child rule above. That rule still catches
   the read's three labels, which are alone in their paragraphs. */
.read p.sign strong {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--teal);
  margin: 0;
}

/* The GAIN step mark: the four letters of the loop above each sign's name, with this sign's
   letter lit and the other three pale. Drawn from what the tool already knows, so not one
   word of the read changes, and never explained anywhere on the page.

   Above the name rather than beside it, and all four rather than one (settled 2026-09-13,
   Wissam, looking at four versions side by side). Two reasons. A single letter is a cipher:
   "N" next to a sign's name means nothing to a leader who has never been told what it
   stands for. The four letters are the strip he has just watched fill in at the top of every
   question for seven minutes, so the read is showing him something already familiar rather
   than a new symbol on the last page. And across three signs he sees three of the four lit
   and one left dark, which is the whole inference the specification wants him to draw on his
   own and which one mark per sign could never have given him.

   Above rather than beside costs a line of height and gives the sign's name the full width
   of the page back. Beside it, and in a box, both pushed a long sign name onto two lines on
   a phone, and the name is the thing that should dominate. */

.steps {
  display: flex;
  gap: 0.3rem;
  margin: 0 0 0.35rem;
  font-family: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--line);
}

.steps .letters { display: flex; gap: 0.3rem; }

/* The step's words beside the lit letter (2026-09-16), so a leader who was never told what the
   letters stand for is told at the moment he reads the finding. Quiet, in the lit letter's
   colour, so the sign's name below still dominates. */
.steps .stepword {
  margin-left: 0.5rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--orange-text);
}

.steps .s { color: var(--line); }
.steps .s.on { color: var(--orange-text); }

.steps .s + .s::before {
  content: "·";
  margin-right: 0.3rem;
  color: var(--line);
}

/* The crew question. The matcher sets it as a quotation, and it is the one thing in the
   read the leader is meant to say out loud, so it is given room and the serif. */
.read blockquote {
  margin: var(--gap) 0;
  padding: 0 0 0 var(--gap);
  border-left: 3px solid var(--orange);
  font-family: var(--text);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--teal);
}

.read .rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: calc(var(--gap) * 1.5) 0;
}

/* The closing: the only part of the read that asks the leader to do something with Wissam,
   so it is set apart rather than reading as one more paragraph (2026-09-12). */
.closing {
  margin-top: calc(var(--gap) * 2);
  padding: var(--gap);
  background: var(--teal-tint);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 var(--radius) var(--radius);
}

.closing .read > p:first-child,
.closing .read p:first-child > strong:only-child,
.closing > p:first-child b {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--teal);
  margin: 0 0 var(--step);
}

.closing .read { font-size: 1rem; line-height: 1.65; }
.closing .read p { margin: 0 0 var(--step); }
.closing .go { margin-top: 0.4rem; }

/* -- the read's label and contents --------------------------------------------- */

/* A label, not a headline. The read's own first line is the matcher's headline and the best
   sentence on the page; anything here at the same weight would give the page two headlines
   arguing with each other (2026-09-13). */
.readhead { margin-bottom: var(--gap); }
.label {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.about {
  margin: 0.15rem 0 0;
  font-family: var(--text);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* What is in the read, before he starts reading it. This is the job a "1 of 4" counter would
   have done - telling him the shape - without paginating the read and hiding two thirds of
   the signs from each other. Plain links, so it works with JavaScript switched off. */
.contents {
  margin: 0 0 var(--gap);
  padding: var(--step) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.contents p { margin: 0 0 0.5rem; color: var(--ink-soft); }
.contents ol { margin: 0; padding-left: 1.2rem; }
.contents li { margin-bottom: 0.2rem; }
.contents a { color: var(--teal); }

/* The closing is the only part of the read that asks him to do something with Wissam, so it
   is given more room than it had (2026-09-13). */
.closing { margin-top: calc(var(--gap) * 1.5); }

/* The short version at the top of the read (2026-09-16): the findings, this week's checks
   and the crew question in one panel, then the readout button, then the full read. A white
   card with the closing's orange rule on top, so it reads as the page's summary rather than as
   its first paragraph; only the button's strip carries the closing's tint, because that is the
   part that asks him to act. */
.short {
  margin: 0 0 calc(var(--gap) * 1.5);
  padding: var(--gap);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 var(--radius) var(--radius);
}
.short p { margin: 0 0 var(--step); }
/* The read page is two parts, and since 2026-09-18 it says so out loud (Wissam, testing it on a
   desktop and a phone). "The short version" had been a 0.8rem grey uppercase label - the same
   treatment the read uses for its own small signposts - and the long read below had no heading at
   all, so a leader scrolling past the readout button had nothing telling him he had arrived
   somewhere new. The sentence that explained what was coming ("what you told me, and what each of
   these usually means") sat inside the panel as its last line, which made it a footnote to the
   summary rather than a door into what followed.

   Both parts now carry the same heading treatment, and the sentence moved out of the panel to sit
   under the second one. The second heading also sits on the page's tint, because the complaint was
   precisely that the change of part could be scrolled past: a rule alone was drawn and looked at
   first and was still quiet enough to miss. The tint is the page's existing signal for a block
   that is not the read itself - the readout strip and the closing both use it - so this is the
   third and last, and they sit far enough apart not to crowd each other. */
.part-title {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--teal);
  margin: 0 0 0.35rem;
}
.part-note { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* The band is pulled out to the page's own edges by the negative side margins, so it reads as a
   division of the page rather than as one more paragraph inside it. */
.fullhead {
  margin: calc(var(--gap) * 2) calc(var(--gap) * -1) var(--gap);
  padding: var(--step) var(--gap) 0.9rem;
  border-top: 3px solid var(--orange);
  background: var(--teal-tint);
}
.short-lead { color: var(--ink-soft); font-size: 0.95rem; }
.short-signs { list-style: none; margin: 0; padding: 0; }
.short-signs li {
  padding: var(--step) 0;
  border-top: 1px solid var(--line);
}
.short-name {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.short-name a { color: var(--teal); text-decoration: none; }
.short-name a:hover { text-decoration: underline; }
.short-action { font-size: 0.95rem; }
.short-action b { color: var(--orange-text); font-weight: 600; }
.short-crew-label {
  padding-top: var(--step);
  border-top: 1px solid var(--line);
}
.short-crew {
  margin: 0 0 var(--gap);
  padding: 0 0 0 var(--gap);
  border-left: 3px solid var(--orange);
  font-family: var(--text);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--teal);
}
.short-cta {
  padding: var(--step) var(--gap) var(--gap);
  margin: 0 calc(var(--gap) * -1) var(--step);
  background: var(--teal-tint);
}
.short-cta .go { margin-top: 0.2rem; }
/* -- the data note ------------------------------------------------------------ */

/* The data note is ordinary paragraphs; the only thing it needs is that the bold opening of
   each one reads as a heading without being one, because the page is a list of answers to
   questions a leader asks in his head rather than a document with sections. */
.who a { color: var(--orange-text); }
.page > p > b:first-child { color: var(--ink); }

/* -- Wissam's page ------------------------------------------------------------- */

/* Denser than anything a leader sees, on purpose: this is a list to scan, not a page to read,
   and it is looked at by one person who already knows what everything means. Nothing here is
   a button that changes anything, because the page changes nothing (app/private.py). */
.counts, .conversations, .block { margin-bottom: var(--gap); }

.tally { list-style: none; padding: 0; margin: 0 0 var(--step); }
.tally li { padding: 0.15rem 0; }
.tally b { font-size: 1.15rem; color: var(--orange-text); }

.tally-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.tally-table th, .tally-table td {
  text-align: left;
  padding: 0.3rem 0.5rem 0.3rem 0;
  border-bottom: 1px solid var(--line);
}
.tally-table th { color: var(--ink-soft); font-weight: 500; }

.row {
  padding: var(--step) 0;
  border-bottom: 1px solid var(--line);
}
.rowhead { margin: 0 0 0.2rem; }
.rowhead a { color: var(--teal); letter-spacing: 0.06em; }
.rollout { margin: 0 0 0.2rem; }
.note-inline { font-size: 0.85rem; color: var(--ink-soft); }
.row .note, .row .problem { margin: 0; font-size: 0.85rem; }

.plain {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  background: var(--teal-tint);
  padding: var(--step);
  border-radius: var(--radius);
  overflow-x: auto;
}
.plainread summary { font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }

/* -- wider screens ------------------------------------------------------------ */

@media (min-width: 44rem) {
  body { font-size: 1.025rem; }
  h1 { font-size: 2.05rem; }
  .page { padding-top: calc(var(--gap) * 1.5); }
  .said.asking { font-size: 1.15rem; }
}

/* The landing screen becomes two columns on a wide screen (2026-09-18, Wissam). It had been
   using the conversation's 34rem, which it inherited rather than chose: on a laptop that is
   about a quarter of the screen, and the page read as a strip of text floating in a field.
   Widening it was the other option and is only a resize; two columns is the shape the
   designers' own site hero uses, and it composes the page instead. The left column is the
   pitch - the headline, the situation the leader recognises, and the way in. The right column
   is the detail - what the seven minutes are, what he walks away with, who reads it, and the
   second way in. It also puts the whole screen in one view, so the Start button cannot fall
   below the fold on a desktop at all.

   Only this screen. The conversation stays a narrow single column, because one question and one
   answer box should be the only thing in front of a leader, and the read stays at 46rem, which
   was argued through with Christian on 2026-09-16. A front door and a room you are sitting in
   are allowed to look different. Nothing changes on a phone, where most leaders will be: below
   64rem this rule does not apply and the page is the single column it always was.

   Each child is placed by hand rather than left to flow, because the two columns are not halves
   of one list: they are two different arguments that happen to sit side by side. The order in
   the file stays the reading order, so a phone, a screen reader and a browser with this rule
   switched off all get the same page they got before. */
@media (min-width: 64rem) {
  .page.page-landing {
    max-width: 66rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
    align-items: start;
  }
  .page-landing > h1                { grid-column: 1; grid-row: 1; }
  .page-landing > p:nth-of-type(1)  { grid-column: 1; grid-row: 2; }
  .page-landing > form.start-early  { grid-column: 1; grid-row: 3; }
  .page-landing > p:nth-of-type(2)  { grid-column: 2; grid-row: 1; margin-top: 0.4rem; }
  .page-landing > p:nth-of-type(3)  { grid-column: 2; grid-row: 2; }
  .page-landing > p.who             { grid-column: 2; grid-row: 3; }
  .page-landing > form:last-of-type { grid-column: 2; grid-row: 4; margin-top: var(--step); }

  /* The landing screen is the one page with no footer - it says what is kept in its own last
     paragraph and does not repeat it - but the empty footer still drew its dividing line, at
     the conversation's width, under the middle of a page now twice that wide. It read as a
     stub. Only here, and only where the two columns apply. */
  .page-landing + .foot { border-top: 0; padding-top: 0; }
}

/* The read page is wider on a desktop than the conversation (2026-09-16, after Christian found
   it narrow on a wide screen). Still a reading width rather than the full screen: a line much
   longer than this is harder to read, not easier. */
@media (min-width: 60rem) {
  .page.page-read { max-width: 46rem; }

  /* The header's own margin on a wide screen (2026-09-18). It used to keep the 1.5rem gutter
     written for a phone, so on a laptop the wordmark sat jammed against the edge of the screen
     while the page below it had room; 4rem is the margin the designers' site uses. It does not
     line the wordmark up with the page's column, and deliberately so: two ways of doing that
     were drawn and both cost more than they bought. Moving the wordmark in to meet the column
     puts it in a different place on the read page (46rem wide) than on a question (34rem), so
     it slides sideways as the leader moves through the tool. Left-aligning the column under a
     shared margin, which is what the site itself does, leaves the whole right half of a laptop
     screen empty, because the site's sections span the full width and this one page is a single
     narrow column. So the header stays a full-width band and the page stays centred; this rule
     only stops the band looking unfinished. */
  .top { padding-left: 4rem; padding-right: 4rem; }
}

/* Shown only when a Send did not arrive twice over (2026-09-18). Says it in the tool's own
   quiet voice rather than in an alarming one: nothing is lost when it appears. */
.trouble {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--ink);
  opacity: 0.85;
}