/*
 * The right column: the record.
 *
 * Split out of interview.css, which had grown to 949 lines describing two
 * columns that share a page and almost nothing else. The sea is a room someone
 * sits in — artwork, a microphone, a line of speech. This is a sheet of paper
 * they read before deciding whether any of it is kept.
 *
 * ⚠ THE SEAM IS THE CONSENT BOUNDARY, which is why it is a good one. Everything
 * here exists so an employee can see the exact words that would be stored and
 * say no to them: the folds, the draft, the box they can add to, the actions
 * and the states after. Nothing in the other file can change what is written
 * here without going through the de-identifier first.
 *
 * ⚠ index.html ONLY. The interview room is deliberately not shared with the
 * console — see docs/storm-reuse.md — so this must never be pulled into
 * console.css or its family. It loads AFTER interview.css and may lean on it.
 */

/* ── Right: the paper ───────────────────────────────────────────────────── */

.paper {
  background: var(--paper);
  padding: clamp(1.4rem, 2.6vw, 2.8rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  border-left: 1px solid var(--rule);
}

.pane { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* The promises are long and the draft must never be something you scroll TO —
   the control someone needs in order to leave has to stay on screen while they
   decide. So the promises take the leftover height and scroll inside it, and
   the boundary below is pinned. */
#promise-step { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pane__title { font-size: 1.24rem; margin-bottom: 0.35rem; }

/* The boundary is the moment the product exists for, so it is the only thing
   on this page given a rule of its own colour. */
.pane--boundary {
  border-top: 3px solid var(--coral);
  padding-top: 1.1rem;
  flex: none;
}

.promises { margin: 0 0 0.6rem; padding-left: 1.05rem; font-size: 0.92rem; }
.promises li { margin: 0.3rem 0; }

/* One stack of questions, each opening onto its answer.
   ⚠ The headings have to read as QUESTIONS SOMEONE HAS, not as section labels.
   The old panel labelled its parts correctly and was skipped whole, because a
   correct label ("disclosure", "context") tells you what a thing is called and
   not whether you want it. So these are set in the reading face at reading
   size, and the mono-uppercase treatment that used to shrink them into filing
   tabs is gone. */
.folds { display: grid; gap: 0.15rem; }

.fold { border-top: 1px solid var(--rule); font-size: 0.92rem; }
.fold:last-child { border-bottom: 1px solid var(--rule); }

.fold > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.62rem 0.1rem;
  cursor: pointer;
  list-style: none;
}

.fold > summary::-webkit-details-marker { display: none; }

/* The marker is drawn rather than inherited so it can rotate, and so it sits at
   a fixed width — a native triangle changes size with the font and left the
   headings starting at three different places down the column. */
.fold > summary::before {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.1rem;
  border-right: 1.5px solid var(--teal);
  border-bottom: 1.5px solid var(--teal);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}

.fold[open] > summary::before { transform: rotate(45deg); }

.fold__label { font-family: var(--serif); font-size: 1rem; color: var(--ink); }

/* Beside the heading so the fold never hides HOW MUCH is folded: a guarantee
   whose size you cannot see is not much of a guarantee. */
.fold__tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

.fold > :not(summary) { margin: 0 0 0.6rem; }
.fold > :not(summary):first-of-type { margin-top: 0.1rem; }
.fold__body { line-height: 1.55; }

.fingerprint { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-soft); word-break: break-all; }

.notice {
  margin-top: 0.8rem;
  padding: 0.65rem 0.8rem;
  border-radius: 9px;
  font-size: 0.88rem;
  background: rgba(240, 87, 74, 0.1);
  border: 1px solid var(--coral);
}

blockquote { margin: 0; }

#org-context, .draft {
  white-space: pre-wrap;
  background: var(--paper-deep);
  border-left: 3px solid var(--teal);
  border-radius: 0 9px 9px 0;
  padding: 0.85rem 1rem;
}

.draft {
  margin-top: 0.9rem;
  border-left-color: var(--coral);
  font-size: 1.02rem;
  line-height: 1.66;
  max-height: 40vh;
  overflow-y: auto;
}

/* One removable line of the draft. A button, for the keyboard, but it has to
   read as the sentence it is — the draft must still look like the text that
   would be stored, not like a form with the words rearranged into controls. */
/* The loudest thing on the panel, on purpose. It appears exactly once, at the
   only moment someone is likely to think the job is over when it is not, and it
   has to beat a column of prose they have already learned to skim. */
.done-banner {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--coral);
  border-radius: 8px;
  background: rgba(240, 87, 74, 0.09);
  line-height: 1.55;
}

.done-banner strong { display: block; margin-bottom: 0.2rem; }

/* The same news, in the other column. Quieter than the banner — this one is a
   signpost, not the thing itself. */
/* Opaque enough to actually read. This column is a full-bleed painting, and at
   0.18 the sentence was sitting directly on a breaking wave — legible in the
   sense that the pixels were there, not in the sense that anyone would get to
   the end of it. */
/* ⚠ `color` is not optional here. The background is a near-black pill and the
   paragraph inherits `--ink`, which is near-black in light mode — so this read
   at about 1.1:1 and was invisible to anyone not in dark mode. Only the child
   button was legible, because it sets --foam explicitly.

   That made the one message on the page that exists to stop somebody leaving
   early — "nothing has been sent yet" — the least readable thing on it. */
.pointer {
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(12, 16, 15, 0.82);
  color: var(--foam);
  font-size: 0.92rem;
  line-height: 1.5;
}

.pointer__go {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--foam);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* One spoken thing per line, marked. Ten sentences run together read as a wall,
   and worse, they hid the fact that each one comes out on its own — which is
   the only edit this screen offers. */
.draft-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.draft-list > li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.draft-list > li::before {
  content: "•";
  flex: none;
  opacity: 0.45;
}

.draft-list .seg { flex: 1 1 auto; display: block; }

.seg {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
  transition: opacity 0.12s ease;
}

.seg:hover,
.seg:focus-visible {
  /* The affordance only appears on approach. A permanent underline under every
     sentence would make the draft look edited before anyone touched it. */
  text-decoration: line-through;
  text-decoration-color: var(--coral);
  opacity: 0.72;
}

.seg--dropped,
.seg--dropped:hover {
  text-decoration: line-through;
  text-decoration-color: var(--coral);
  opacity: 0.38;
}

/* A reworded line, marked because it is the one text on this screen that has
   NOT been through the de-identifier. It reads as part of the draft and is
   not part of it yet, and the underline is what carries that distinction
   between the notice above and the button below. */
.seg--corrected {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--teal);
  text-underline-offset: 0.22em;
}

/* Quiet on purpose: removal is still the primary gesture on this screen, and
   an Edit button with equal weight would make the draft read as a form. It
   appears on approach to the row, and stays put for keyboard focus. */
.seg-edit {
  flex: none;
  border: 0;
  background: none;
  padding: 0 0.15rem;
  font: inherit;
  font-size: 0.78em;
  color: var(--teal);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* ⚠ `:focus`, not only `:focus-visible`. A control that is invisible at rest
   and reveals itself on the browser's focus-ring heuristic is a control a
   keyboard user can land on and not see — on the last screen before anything
   is stored. Hover reveals it for the mouse; any focus at all reveals it for
   everyone else. */
.draft-list > li:hover .seg-edit,
.seg-edit:focus,
.seg-edit:focus-visible { opacity: 0.85; }

/* Touch has no hover, so the control would never appear at all. */
@media (hover: none) {
  /* ⚠ A TARGET A THUMB CAN HIT. At its mouse size this was ~25×20px on the
     last screen before anything is stored; padding, not font, buys the box. */
  .seg-edit {
    opacity: 0.85;
    padding: 0.35rem 0.55rem;
    font-size: 0.9em;
  }

  /* ⚠ THE AFFORDANCE CANNOT ARRIVE ON APPROACH WHEN THERE IS NO APPROACH.
     The strike hint is hover-only, so on touch nothing said the lines are
     removable except a sentence of prose below the text. A quiet dotted
     underline says "tappable" without making the draft read as struck. */
  .seg {
    text-decoration: underline dotted;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 0.22em;
  }
}

.draft-row--editing::before { content: none !important; }

.seg-editor { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.4rem; }

.seg-editor textarea {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: inherit;
  resize: vertical;
}

/* ⚠ Sized here rather than with `.btn--small`. That modifier belongs to the
   interview column, which is dark: it sets `color: var(--foam)` and a dark
   pill background, and it wins over `.btn--quiet` because it is declared
   after it. On paper that is light text on a light card. */
.seg-editor__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.seg-editor__actions .btn { font-size: 0.8rem; padding: 0.36rem 0.75rem; }

/* The one fold that is a route out rather than a rule about the round, marked
   so it does not read as the fourth item in a list of terms. */
/* ⚠ DIFFERENT IN KIND, NOT A CHILD OF THE FOLD ABOVE IT.
   This was a 3px left rule plus a 0.7rem indent on the summary and the body —
   which is the universal grammar for "belongs to the thing above", so it read
   as a sub-item of "How that actually works" rather than as the one fold here
   that is about danger instead of about the round. A reader asked why it was
   "almost tabbed", which is exactly what an indent says.

   It sits at the same indentation as its siblings now, and earns its
   difference from a surface of its own rather than from hierarchy. */
.fold--care {
  /* ⚠ Pulled out by its own padding, so the CARD is wider than its siblings
     while the TEXT inside it starts on the same line as theirs. Padding alone
     just replaced the indent it was meant to remove — measured at 13px, which
     is the same misread in a different colour. */
  margin: 0.4rem -0.8rem;
  padding: 0.15rem 0.8rem 0.5rem;
  border-radius: 10px;
  background: rgba(15, 139, 130, 0.07);
  box-shadow: inset 0 0 0 1px rgba(15, 139, 130, 0.22);
}



#draft-note { margin-top: 0.5rem; }

/* Three buttons that read as one set of choices, so they have to sit on one
   line at one size. They did not: .btn--go carries a margin-top for its other
   life as a form submit, which pushed Approve a centimetre below the two either
   side of it, and each button was only as wide as its own label. A shared
   min-width and no stray margin — the difference between them should be what
   they do, not how big they are. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* `flex: 1 1 0` rather than a min-width: sized from their own labels the three
   came to more than the column and wrapped, leaving Discard alone on a second
   row looking like a different kind of thing. From a zero basis they take an
   equal third each and shrink together, so they stay one row and one size at
   any width until the wrap is genuinely needed. */
.actions .btn {
  margin-top: 0;
  flex: 1 1 0;
  min-width: 8.5rem;
  text-align: center;
}

/* `.error`, `.sea .error` and `[hidden]` went back to interview.css. They were
   written inside this column's block but belong to the whole page — and one of
   them, `.sea .error`, styles the OTHER column, which is exactly the kind of
   stray a split is worth doing to find. */

.pane--done .pane__title { font-size: 1.5rem; }


/* The box the employee writes into.
 *
 * Deliberately quieter than the draft above it and deliberately not styled as
 * part of it: what is typed here is not the draft, and will not be, until it
 * has been through the de-identifier and come back. A textarea that looked
 * like an extension of the blockquote would be telling somebody their words
 * are already in the record. */
.draft-add {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.draft-add label {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.draft-add textarea {
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

.draft-add textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.draft-add .btn {
  align-self: flex-start;
}

/* ── What the next few minutes are, and what happens after ───────────────── */

/* ⚠ Not a fold. It is the one thing on the "before" pane that has to be read
   without a decision to open it: a list of guarantees never answers "what am I
   walking into", and that is the question somebody actually has. */
.shape {
  margin: 0 0 1.2rem;
  padding: 0 0 0 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.96rem;
  line-height: 1.55;
}

.shape li::marker { font-variant-numeric: tabular-nums; color: var(--teal, #0f8b82); }
.shape strong { font-weight: 600; }

/* Every exit says what happens now. One sentence and silence is where the
   doubt goes, for somebody who has just spoken candidly about their job. */
.what-next {
  margin: 1rem 0 0;
  padding: 0 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ⚠ THE PAPER'S HALF OF THE NARROW LAYOUT, and it has to live here rather
   than beside the sea's half in interview.css. This file loads LAST, so a
   `.paper` rule in a media query over there would be overridden by the
   unconditional `.paper` rule above — the column would keep its left border and
   its own scrollport on a phone, where there is no column beside it. Splitting
   the query along the same seam as the columns is what keeps that from being a
   trap for whoever edits either file next. */
@media (max-width: 900px) {
  .paper { border-left: none; border-top: 1px solid var(--rule); overflow: visible; }
  .pane--boundary { margin-top: 0; }
}

/* ── The phone proper (N32), this column's half ──────────────────────────── */

@media (max-width: 600px) {
  /* ⚠ ONE SCROLL. The desktop pins #promise-step and the draft to inner
     scrollports; on a phone that made a scroll inside a scroll for exactly
     the two texts a person must read in full — the promise before speaking,
     and the draft before approving — with the sticky bar shading the draft's
     last visible line. The page is the scrollport on a phone. */
  #promise-step { flex: none; min-height: auto; overflow-y: visible; }
  .draft { max-height: none; overflow-y: visible; }

  /* The 8.5rem floor made three buttons wider than the screen — the exact
     wrap it was written to avoid, forced by the width it assumed. */
  .actions .btn { min-width: 0; }

  /* ⚠ THE ENTRANCE ANIMATION RE-ANCHORS position:fixed. `rise` retains a
     transform via fill-mode, and a transformed ancestor is a containing
     block for fixed descendants — so the confirm dialog centred in this
     panel instead of the viewport, off-screen on a phone. The draft panel
     gives up its entrance so the discard guard can be seen. */
  #draft-step { animation: none; }
}

/* ── The draft's groups ──────────────────────────────────────────────────── */

/* ⚠ A HEADING IS NOT A SEGMENT. Every other child of `.draft-list` is a point
   the employee can take out; this is a label over the ones that follow. It
   carries `aria-hidden` and no control, so it cannot be tabbed to, cannot be
   dropped, and is not counted by "N lines will not be sent" — which is the
   whole reason the parts travel beside the segments rather than being written
   into the text as heading lines. A heading in the text would have been a
   droppable line that means nothing, rebuilt into the approved account and
   sealed. */
/* ⚠ The bullet is drawn by `.draft-list li::before`, not by the list marker, so
   `list-style: none` alone left a • sitting beside every heading as though the
   heading were another point somebody could take out. Suppressed explicitly. */
.draft-group::before { content: none !important; }

.draft-group {
  list-style: none;
  margin: 1.1rem 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.draft-group:first-child { margin-top: 0; }