/*
 * THE CASE PAGE — the second stylesheet, and deliberately small.
 *
 * `pinto.css` already carries the tokens, the type and the restraint. Everything here is
 * the shapes the answer panel does not have: a step card, an option list, a return
 * timeline, a history.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * THE RULES THIS FILE IS KEEPING
 * ────────────────────────────────────────────────────────────────────────────
 *
 * Mobile is first-class (plan §6.7): the person is standing beside the car, on a phone, in
 * the cold. So the option buttons are full-width, 48px tall, and stacked — a row of small
 * targets is a row of mis-taps. Nothing depends on hover.
 *
 * WCAG 2.2 AA: every interactive thing has a visible focus ring, the focus ring is the
 * accent at 3px so it survives a bright screen outdoors, the tap targets clear 44x44, and
 * nothing conveys meaning by colour alone — a stage's state is a word and a mark, not a
 * green dot.
 *
 * Light only, like pinto.css, and for the same reason: this is the same page family.
 */

.case-body { height: auto; min-height: 100%; }

/*
 * THE BRANDBAR SITS IN THE FLOW HERE, not fixed.
 *
 * `pinto.css` pins it to the window because the answer panel is a viewport-height shell
 * that does not scroll. This page DOES scroll — it is a case with a history — and a fixed
 * bar there sits on top of the first panel as soon as anything moves. On a phone it landed
 * squarely across the case reference.
 */
.case-body .brandbar {
  position: static;
  width: min(var(--measure), calc(100% - 2 * var(--gap)));
  margin: 0 auto;
  padding-top: var(--gap);
}

.case-shell {
  width: min(var(--measure), calc(100% - 2 * var(--gap)));
  margin: 0 auto;
  padding: var(--gap) 0 calc(var(--gap) * 3);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.caseref {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── panels ───────────────────────────────────────────────────────────────── */

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1rem, 4vw, 1.5rem);
  background: var(--ground);
}
.panel[hidden] { display: none; }

.panel h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.4rem; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }
.panel h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.5rem; color: var(--ink); font-weight: 600; letter-spacing: -0.015em; }
.panel h3 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; color: var(--ink-2); font-weight: 600; }
.panel > .lead { margin: 0; color: var(--ink-2); }
.eyebrow { margin: 0 0 0.3rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.muted { color: var(--muted); font-size: 0.85rem; }

/* The current step is the one thing on the page that is not quiet. */
.panel.step { border-color: var(--accent-edge); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.stepwhy { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--muted); }
.warn {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: var(--raised);
  color: var(--ink-2);
  font-size: 0.88rem;
}

/* ── facts ────────────────────────────────────────────────────────────────── */

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0.9rem 0 0; font-size: 0.88rem; }
.facts:empty { display: none; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink-2); }

/* ── options: one per line, thumb-sized ───────────────────────────────────── */

.options { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.1rem; }
.options:empty { display: none; }

.btn {
  font: inherit;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ground);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--raised); border-color: var(--muted); }
.btn:active { transform: scale(0.995); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: default; }

.btn.primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 500; }
.btn.primary:hover { filter: brightness(0.95); background: var(--accent); }
.btn.quiet { background: var(--raised); }
.btn.link {
  width: auto; min-height: 44px; padding: 0.4rem 0; margin-top: 0.9rem;
  border: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.btn.link:hover { color: var(--ink); background: none; }

.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.row .btn { width: auto; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.field input, textarea {
  font: inherit;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ground);
  color: var(--ink);
  width: 100%;
}
textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }
.field input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.why { margin: 0; font-size: 0.85rem; color: var(--ink-2); min-height: 1.2em; }
.why.bad { color: #A8371F; }

/* ── free text and the narrator's suggestion ──────────────────────────────── */

.freetext { margin-top: 1.1rem; font-size: 0.9rem; }
.freetext > summary { cursor: pointer; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.freetext > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.freetext[hidden] { display: none; }

.suggestion { margin-top: 0.9rem; padding: 0.8rem; border: 1px solid var(--accent-edge); border-radius: 12px; background: var(--accent-quiet); }
.suggestion p { margin: 0; color: var(--ink-2); }
.suggestion[hidden] { display: none; }

.upload { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.upload .btn { width: auto; }
.upload[hidden] { display: none; }

/* ── the outcome's two statements ─────────────────────────────────────────── */

.evidence { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.92rem; }
.evidence p { margin: 0; }
.evidence strong { color: var(--ink); font-weight: 600; }

/* ── the return timeline ──────────────────────────────────────────────────── */

.stages { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.stages li {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.5rem 0 0.5rem 0;
  border-left: 2px solid var(--line);
  margin-left: 0.35rem;
  padding-left: 1rem;
  position: relative;
  color: var(--muted);
  font-size: 0.92rem;
}
.stages li::before {
  content: "";
  position: absolute; left: -0.36rem; top: 0.95rem;
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--line);
}
.stages li[data-state="done"] { color: var(--ink-2); }
.stages li[data-state="done"]::before { background: var(--muted); border-color: var(--muted); }
.stages li[data-state="current"] { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
.stages li[data-state="current"]::before { background: var(--accent); border-color: var(--accent); }
/* Never colour alone: the current and completed stages say so in words too. */
.stages .state { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; }

.note { margin: 1rem 0 0; padding: 0.8rem; border-radius: 10px; background: var(--raised); font-size: 0.88rem; color: var(--ink-2); }

.items { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.92rem; }
.items li { margin: 0.35rem 0; }
.items li .detail { display: block; color: var(--muted); font-size: 0.85rem; }
.items.quiet li { color: var(--muted); }
.items.always { list-style: none; padding-left: 0; margin-top: 0.9rem; }
.items.always li { padding-left: 1.4rem; position: relative; }
.items.always li::before { content: "•"; position: absolute; left: 0.4rem; color: var(--accent); }
#rmaTracking { line-height: 1.7; }
#rmaTracking a { color: var(--accent); text-underline-offset: 2px; }

/* ── history ──────────────────────────────────────────────────────────────── */

.panel.history > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; min-height: 44px; display: flex; align-items: center; }
.panel.history > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.timeline { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; font-size: 0.92rem; }
.timeline li { display: flex; flex-direction: column; gap: 0.15rem; }
.timeline .who { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.timeline .what { color: var(--ink-2); white-space: pre-wrap; }
.timeline li[data-actor="staff"] .what { color: var(--ink); }

.case-shell .notice { text-align: left; max-width: none; }

@media (min-width: 700px) {
  /* Options can pair up once there is room, but never on a phone. */
  .options { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

.select {
  font: inherit;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ground);
  color: var(--ink);
  width: 100%;
}
.select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.recordbox { margin-top: 1.1rem; }
.recordbox[hidden] { display: none; }
.recordbox .field { margin-bottom: 0.3rem; }
.recordbox input {
  font: inherit; min-height: 48px; padding: 0.6rem 0.8rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--ground); color: var(--ink); width: 100%;
}
.recordbox input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/*
 * `hidden` MUST WIN.
 *
 * `.field`, `.stack`, `.row` and `.options` all set `display: flex`, and a class selector
 * beats the user-agent's `[hidden] { display: none }` — so `el.someField.hidden = true`
 * left the element on screen. That is exactly how the return's "we need a little more"
 * form stayed up after the customer had already answered it.
 *
 * Stated once, here, rather than remembered at every call site. (pinto.css already carries
 * the same note for `.source[hidden]`, for the same reason.)
 */
[hidden] { display: none !important; }

.group {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.group legend { font-size: 0.85rem; color: var(--ink-2); font-weight: 600; padding: 0 0.4rem; }
.group .stepwhy { margin: 0; }

/*
 * THE CITATION UNDER THE WHY (plan §6.3).
 *
 * Quieter than the `why` it sits under and quieter than the prompt: it is there to be
 * checked, not read. Sized at the bottom of the scale but still above the 0.75rem the
 * eyebrows use, because it is prose a person may actually want to read outdoors.
 */
.stepcite { margin: -0.3rem 0 0.6rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.stepcite[hidden] { display: none; }

/*
 * THE WAY OUT TO A PERSON.
 *
 * Separated from the message form by a rule rather than sitting in the same button row —
 * "add to my case" and "I'd rather speak to someone" are different decisions, and a row
 * of two adjacent buttons is how one gets tapped instead of the other on a phone.
 */
.person { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.person .btn.link { margin-top: 0; }
.person .muted:empty { display: none; }