/* Participant-facing visual register — NFR-11: unhurried, no gamification,
   no scores-as-achievement. See Documentation/phase1-technical-design.md
   §10 for the rule set this implements: plain progress position (not a
   filling/celebratory bar), no timers, calm copy, neutral selection
   states, simple fades, plain verb button labels. */

:root {
  --ink: #1f2320;
  --ink-muted: #5b625c;
  --surface: #faf9f6;
  --surface-raised: #ffffff;
  --line: #d8d6cf;
  /* WCAG 1.4.11 Non-text Contrast: a boundary that identifies a control
     needs 3:1, and --line is 1.45:1 on white. Deliberately a second
     token rather than darkening --line, because --line also draws
     decorative panel rules and chart gridlines where 3:1 does not
     apply and a heavier line would be visual noise.
     #7f867f is 3.74:1 on --surface-raised, 3.55:1 on --surface. */
  --line-control: #7f867f;
  --accent: #3b5249;
  --accent-ink: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface);
  color: var(--ink);
  /* Bundled — see fonts.css. The trailing stack is a fallback for the
     moment before the webfont loads, not a substitute: those faces do not
     exist on the Linux deployment target. */
  font-family: "Source Serif 4", "Iowan Old Style", "Palatino Linotype",
               Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

/* PRO-04/PRO-05: the way back to a released profile, at the foot of the card
   on whatever page the participant is on. The rule above it separates it from
   the page's own content - it belongs to the journey rather than to the page,
   and without the rule it reads as one more action of whatever screen it
   happens to be sitting under. */
.profile-link {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

/* `p` and `.actions` both carry a bottom margin, so without this the rule
   above sits at an inconsistent distance depending on what the page ended
   with. Collapsing it here keeps the separation the same on every screen. */
.profile-link:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.card {
  width: 100%;
  max-width: 30rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  opacity: 0;
  animation: settle 400ms ease-out forwards;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

p {
  color: var(--ink-muted);
  margin: 0 0 1.5rem;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.button {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-control);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.button:hover,
.button:focus-visible {
  background: var(--surface);
  border-color: var(--ink-muted);
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.button.primary:hover,
.button.primary:focus-visible {
  background: #2c3f38;
}

.detail {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* A link that stays out of the participant's way while remaining a link.
   --ink-muted is 6.3:1 on --surface-raised, over 1.4.3's 4.5:1 for body text.
   The underline is not decoration: 1.4.1 Use of Color means a link inside a
   paragraph cannot be identified by colour alone, and here the colour is the
   same as the surrounding text on purpose. */
.quiet-link {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* Explicit ring for the same reason .option carries one: Chrome's `outline:
   auto` is good, Firefox and Safari draw something else, and consistency is
   worth the four lines. 3px accent is 8:1 on both backgrounds (1.4.11 asks
   3:1). Verified in Chrome; the other two remain untested. */
.quiet-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Journey screens ---------------------------------------------------
   The card widens for question content; sign-in stays narrow. */
.card:has(.options),
.card:has(.rating-form),
.card:has(.consent-form) {
  max-width: 40rem;
}

.framing {
  color: var(--ink-muted);
  margin-bottom: 2rem;
}

.framing p { margin: 0 0 0.9rem; }

.sub-section {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
}

/* NFR-11: plain position, not a filling bar or an achievement percentage. */
.progress {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
}

.save-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0.9rem 0 0;
}

.stem {
  color: var(--ink);
  font-size: 1.1rem;
  margin: 0 0 1.5rem;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Neutral chosen-state only — no checkmarks, no "correct" affordance.
   There is no right answer to any of these. */
.option {
  text-align: left;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-control);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.option:hover,
.option:focus-visible {
  background: var(--surface);
  border-color: var(--accent);
}

/* An explicit ring rather than the browser's own. Chrome's `outline: auto`
   is excellent here — measured 19:1 — but Firefox and Safari draw something
   quite different, and this is the control a participant uses 64 times.
   3px solid accent is 8:1 against both backgrounds, well over 1.4.11's 3:1,
   and it looks the same everywhere. Verified in Chrome 20 Aug 2026; the
   other two are still untested. */
.option:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.rating-item {
  border: 0;
  border-top: 1px solid var(--line);
  padding: 1.5rem 0 0;
  margin: 0 0 1.5rem;
}

.rating-item legend {
  padding: 0;
  margin-bottom: 0.9rem;
  color: var(--ink);
}

.scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.scale label {
  flex: 1 1 2.2rem;
  text-align: center;
  cursor: pointer;
}

.scale input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.scale span {
  display: block;
  padding: 0.5rem 0;
  border: 1px solid var(--line-control);
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.scale label:hover span { border-color: var(--ink-muted); }

.scale input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.scale input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.scale-anchors {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 0.5rem 0 0;
}

/* --- Consent document (ENR-02) ---
   The client's IRB-approved form, rendered from ConsentDocument. Headings
   are real <h2>s so the structure is navigable; the styling below is
   deliberately plain — this is a legal document to be read, not a designed
   page (NFR-11). */
.consent-preamble { font-size: 0.95rem; }
.consent-preamble p { margin: 0 0 0.6rem; }

.consent-document {
  margin: 0 0 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.consent-section + .consent-section { margin-top: 1.5rem; }

.consent-section h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
}

.consent-section p { margin: 0 0 0.7rem; }
.consent-section p:last-child { margin-bottom: 0; }

.consent-section ul { margin: 0 0 0.7rem; padding-left: 1.3rem; }
.consent-section ul:last-child { margin-bottom: 0; }
.consent-section li { margin: 0 0 0.35rem; }

.consent-form { display: flex; flex-direction: column; gap: 1.25rem; }

.consent-layer {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.consent-layer strong { display: block; color: var(--ink); margin-bottom: 0.2rem; }
.consent-layer input { margin-top: 0.35rem; flex-shrink: 0; }

/* --- Profile document ---
   The most weighted participant-facing document, so NFR-11 matters most
   here: no scorecard, no chart, no achievement framing. Type counts read as
   a sentence, not a result. */
.card:has(.profile-cell) { max-width: 42rem; }

.profile-framing {
  color: var(--ink-muted);
  font-style: italic;
  margin: 0 0 1rem;
}
/* Constrained Markdown (ADM-02) emits <p> per authored paragraph, so the
   framing containers are divs; without this the nested paragraphs fall back
   to browser default margins. */
.profile-framing p { margin: 0 0 0.6rem; }
.profile-framing p:last-child { margin-bottom: 0; }

.profile-coprimary {
  border-left: 2px solid var(--accent);
  padding-left: 0.9rem;
  font-style: normal;
}

/* The facilitator's note to the participant (PRO-02a/PRO-04). Set apart from
   the authored narrative so it reads as a person speaking, not as more
   instrument text. NFR-11: quiet, not a callout. */
.profile-facilitator-note {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--accent);
  background: var(--panel, transparent);
}
.profile-facilitator-note h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.profile-facilitator-note p { margin: 0 0 0.6rem; }
.profile-facilitator-note p:last-child { margin-bottom: 0; }
.profile-facilitator-note ul { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.profile-facilitator-note ul:last-child { margin-bottom: 0; }

.profile-counts {
  margin: 1.5rem 0 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.profile-counts p { margin: 0 0 0.4rem; }
.profile-secondary { font-size: 0.85rem; }

.profile-cell + .profile-cell {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.profile-cell h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.9rem; }
.profile-cell h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 1.5rem 0 0.4rem;
}
.profile-cell p { margin: 0 0 0.6rem; color: var(--ink); }
.open-question { font-style: italic; }
.profile-actions { margin-top: 2.5rem; }

@media print {
  .profile-actions { display: none; }
  .card { border: 0; }
}

.free-text {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-control);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}

.then-test {
  margin: 2rem 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
}
.then-test h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }

.commitment {
  margin: 0 0 2rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
}
.commitment p { margin: 0; color: var(--ink); }
.commitment-label {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-bottom: 0.4rem !important;
}

.window-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.window-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.window-list .muted { color: var(--ink-muted); }

/* The route forward when sign-in fails — deliberately set apart rather than
   trailing a paragraph, since it is the only actionable thing on the page for
   someone who cannot get in. */
.assist {
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.assist strong { display: block; margin-bottom: 0.2rem; }

.notice {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
}

/* --- Accessibility (WCAG 2.2 AA), added 20 Aug 2026 --- */

/* 2.4.7 Focus Visible. Text fields relied on the UA default outline, which
   against a low-contrast border was easy to lose. Explicit and consistent
   with the ring already used on .option and the rating scale. */
.free-text:focus-visible,
textarea:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="date"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* 2.4.1 Bypass Blocks. Off-screen until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6rem 1rem;
  background: var(--surface-raised);
  color: var(--accent);
  border: 1px solid var(--line-control);
  border-radius: 0 0 4px 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A heading that is present for assistive technology without changing what
   is on screen. Used for the section heading on continuation questions —
   see templates/journey/question.html for why it is not simply shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Grouping for the inventory's answer buttons: a real fieldset, so the
   question is announced with its options (1.3.1). Reset the browser's
   default fieldset chrome — the group is named, not boxed. */
.options-group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.options-group > legend {
  padding: 0;
  margin: 0 0 1.25rem;
  width: 100%;
}

/* 2.3.3 is AAA rather than AA, but honouring the preference costs nothing
   and the transitions here carry no meaning. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Section review and back-navigation (INV-06/INV-07) ---
   Plain and unhurried: this is a chance to reconsider, not a summary of
   performance (NFR-11). No counts, no completion framing. */
.card:has(.review-list) { max-width: 40rem; }

.review-list { list-style: none; margin: 0 0 2rem; padding: 0; }

.review-row {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.review-row:last-child { border-bottom: 1px solid var(--line); }

.review-number {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 0.3rem;
}
/* 1.4.1 Use of Color: "changed" is a word, not a colour or a rule. The tint
   and the edge only make it findable in a list of twenty-one. */
.review-flag { color: var(--ink); font-weight: 600; }
.review-row.is-changed {
  border-left: 3px solid var(--accent);
  padding-left: 0.75rem;
  background: rgba(59, 82, 73, 0.04);
}

.review-stem { color: var(--ink); margin: 0 0 0.4rem; }
.review-answer { margin: 0 0 0.4rem; }
.review-change { font-size: 0.88rem; }

.review-submit { margin-top: 1.5rem; }

.question-nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  font-size: 0.88rem;
}

/* The recorded answer, marked without implying it is the right one. The
   text marker carries it; the border is reinforcement, not the signal
   (1.4.1 Use of Colour). */
.option.is-chosen { border-color: var(--accent); }
.chosen-marker { color: var(--ink-muted); font-size: 0.85rem; }