/* ============================================================
   Mirath: Guide view  (#/guide)
   The Guided Path: start screen, welcome-back, task list, and the
   decision-per-page interview (Chapters 1-2) with its live faraid
   preview panel/chip. Tokens only; both themes; print-hidden (this
   view has no printable output of its own).

   Design-catalogue patterns adapted (BLUEPRINT.md §5 cites each):
   - GOV.UK start-page pattern: .guideview-start, its three quiet
     cards, one begin button, no minutes estimate.
   - GOV.UK task-list pattern: .guide-tasklist rows, sentence-case
     status TEXT (never a pill/badge background), the whole row a
     single tappable target.
   - GOV.UK "one thing per page" accessible markup: the question is
     the page's own <h1> (.guideview-question, --font-serif at
     --text-display), and every closed-choice group is a real
     <fieldset>/<legend> (js/views/guide.js bigChoiceHTML), a
     visually-hidden legend when the h1 already states the question,
     a visible one for a sub-decision inside a broader page.
   - Order's gradient-line underline (order/synthesis.md §5.2,
     quoted verbatim in BLUEPRINT.md §3) for "Why Mirath asks".
   - Build in Amsterdam's identity-serif pairing: the question in
     --font-serif over a working sans body, matching the app's
     existing .view-title discipline.
   - The calculator's --chart-1..5 categorical ramp for the preview
     donut (own small rendering; js/views/calculator.js's donutHTML
     is a private, unexported function of that module).
   - Motion: --dur-medium/--ease-ios-push for the screen-to-screen
     settle, per-property only, never `transition: all`. The
     donut's own slice-settle animation (--dur-large, per
     BLUEPRINT.md §5) is NOT implemented here: a freshly-inserted SVG
     node has no prior state to transition from (every render rebuilds
     the markup from scratch), and a genuine settle needs the
     stage-previous/forced-reflow technique BUILD-STATUS.md records
     for the wasiyyah meter. Shipping a transition rule that never
     actually animates would be a claim this file cannot back; left
     for the phase that wires that technique in.
   Owner: GUIDE VIEW agent.
   ============================================================ */

/* ---------- Shared screen shell ---------- */

.guideview {
  width: 100%;
}

.guideview-start,
.guideview-screen {
  max-width: 42rem;
}

.guideview-tasklist {
  max-width: 48rem;
}

/* A fresh screen settles in rather than snapping; transform/opacity
   only, per-property (never `transition: all`), matching the app's
   own .view-anim discipline (css/views.css). Reduced motion is
   collapsed by the global rule in css/base.css. */
.guideview-screen,
.guideview-start,
.guideview-tasklist {
  animation: guideview-settle var(--dur-medium) var(--ease-ios-push) both;
}

@keyframes guideview-settle {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.guideview-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  min-height: var(--tap-target-min);
  padding-inline: var(--space-2);
  margin-inline-start: calc(-1 * var(--space-2));
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--dur-micro) ease;
}

@media (hover: hover) and (pointer: fine) {
  .guideview-back:hover { color: var(--color-accent); }
}

/* ---------- The question: the page's own h1 ----------
   EB Garamond at display size, doubling as the field's label or
   legend (GOV.UK's accessible markup; BLUEPRINT.md §5). */

.guideview-question {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  line-height: 1.18;
  margin-bottom: var(--space-4);
}

.guideview-hint {
  font-size: var(--text-callout);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.guideview-body {
  margin-bottom: var(--space-6);
}

.guideview-subfield {
  margin-top: var(--space-5);
}

.guideview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.guideview-list {
  margin: 0;
  padding-inline-start: 1.25em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ---------- Closed-choice groups: generous, tappable cards ----------
   Real <fieldset>/<legend> (see the file header); the legend is
   visually hidden when the h1 already carries the question. */

.guideview-choices {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guideview-choices > legend.field-label {
  padding: 0;
  margin-bottom: var(--space-2);
}

.guideview-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--dur-micro) ease, background var(--dur-micro) ease;
}

@media (hover: hover) and (pointer: fine) {
  .guideview-choice:hover {
    border-color: var(--color-accent);
  }
}

.guideview-choice:has(input:checked) {
  border-color: var(--color-accent);
  border-width: 2px;
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}

.guideview-choice input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
}

.guideview-choice-label {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.guideview-choice-hint {
  display: block;
  margin-top: 2px;
  font-size: var(--text-footnote);
  color: var(--color-text-faint);
}

.guideview-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  margin-top: var(--space-4);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  cursor: pointer;
}

.guideview-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
}

.guideview-warning {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--color-awl);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-awl) 8%, transparent);
  font-size: var(--text-footnote);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.guideview-grief {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 3px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-callout);
  color: var(--color-text-primary);
  line-height: 1.55;
}

/* ---------- The family census ledger (census rework, 2026-07-14) ----------
   The hub's fixed-order question rows: label, answered state, one
   action. Hairline-separated ledger lines, not cards; the census
   is a table of contents, and the add screens carry the weight.
   (This section replaced .guideview-kin-note: the in-flow gate
   questions superseded the Family-room nudge it styled.) */

.guideview-census-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.guideview-census-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-separator);
}

.guideview-census-label {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: var(--text-callout);
  color: var(--color-text-primary);
}

/* Sentence-case status TEXT, never a pill (the task-list rule). */
.guideview-census-state {
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  color: var(--color-awl); /* collaborative amber while unanswered */
}

.guideview-census-state--answered {
  color: var(--color-text-secondary);
}

.guideview-census-act {
  min-height: var(--tap-target-min);
  margin-block: calc((1.5rem - var(--tap-target-min)) / 2);
  padding-inline: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (hover: hover) and (pointer: fine) {
  .guideview-census-act:hover {
    color: var(--color-text-primary);
  }
}

.guideview-census-continue {
  margin-bottom: var(--space-5);
}

.guideview-census-done {
  margin-bottom: var(--space-5);
  color: var(--color-success);
}

/* ---------- Why Mirath asks: Order's gradient-underline treatment ----------
   Verbatim adaptation, token colors substituted (BLUEPRINT.md §3.2). */

.guide-why {
  margin-bottom: var(--space-5);
}

.guide-why-summary {
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-footnote);
  color: var(--color-accent);
  background-image: linear-gradient(transparent, transparent calc(100% - 1px),
    var(--color-accent) calc(100% - 1px), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size var(--dur-small) ease;
}

.guide-why-summary::-webkit-details-marker {
  display: none;
}

.guide-why-summary:hover,
.guide-why-summary:focus-visible,
.guide-why[open] > .guide-why-summary {
  background-size: 100% 100%;
}

.guide-why-body {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 3px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.guide-why-body p + p {
  margin-top: var(--space-2);
}

/* ---------- Start screen (GOV.UK start-page pattern) ---------- */

.guideview-start-card {
  margin-bottom: var(--space-5);
}

.guideview-start-card p,
.guideview-start-card ul {
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.guideview-tier-note {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.guideview-intention {
  font-size: var(--text-callout);
  color: var(--color-text-primary);
  line-height: 1.55;
  margin-bottom: var(--space-6);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-accent);
}

/* ---------- Welcome back / no-plan-found ---------- */

/* The welcome-back threshold borrows the home fold's grammar
   (css/view-home.css): where you stand on the left leaf, the one
   life-event question on the right, centered in the shell's
   remaining height. Below 900px the two leaves stack and scroll
   as every other screen does. */
.guideview-welcome-ask {
  margin-top: var(--space-6);
}

/* The legend here carries the actual question (the h1 is the
   greeting), so it speaks in the scribe's serif question register,
   not the bold sans field label: one voice fewer on the page. */
.guideview-welcome .guideview-choices > legend.field-label {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.guideview-welcome .guideview-actions {
  margin-top: var(--space-5);
}

@media (min-width: 900px) {
  .guideview-welcome {
    max-width: none;
    min-height: calc(100vh - var(--top-bar-height) - 2 * var(--space-8));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
    align-content: center;
  }

  .guideview-welcome-ask {
    margin-top: 0;
  }

  .guideview-welcome .guideview-resume-card {
    margin-bottom: 0;
  }
}

.guideview-resume-card {
  margin-bottom: var(--space-6);
}

.guideview-resume-card p {
  line-height: 1.5;
}

.guideview-resume-card p + p {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-footnote);
}

.guideview-study-door {
  margin-top: var(--space-6);
  font-size: var(--text-footnote);
}

/* ---------- Task list (GOV.UK task-list pattern) ---------- */

.guide-tasklist {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guide-task {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.guide-task--locked {
  padding: var(--space-4) var(--space-5);
  opacity: 0.7;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
}

.guide-task--locked .guide-task-num {
  grid-column: 1;
}

.guide-task--locked .guide-task-title {
  grid-column: 2;
}

.guide-task--locked .guide-task-body {
  grid-column: 1 / -1;
}

.guide-task-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-4) var(--space-5);
  text-align: start;
  border-radius: inherit;
  transition: background var(--dur-micro) ease;
}

/* Hover lifts the row to the raised paper, so every ink inside this
   link (including the accent-toned in-progress status) must clear
   4.5:1 on --color-surface-raised in BOTH modes. That pair is now
   machine-gated: tools/check-contrast.js checks all six semantic
   inks on raised in light mode too (the R3 coverage gap). */
@media (hover: hover) and (pointer: fine) {
  .guide-task-link:hover {
    background: var(--color-surface-raised);
  }
}

.guide-task-num {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  grid-column: 1;
  grid-row: 1;
}

.guide-task-title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  color: var(--color-text-primary);
  grid-column: 2;
  grid-row: 1;
}

.guide-task-body {
  grid-column: 1 / span 2;
  grid-row: 2;
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* Sentence-case TEXT, never a pill/badge background
   (guided-flow-patterns.md §1, "Task list": GOV.UK's tested redesign
   dropped the coloured tag UI entirely). */
.guide-task-status {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  font-family: var(--font-sans);
  font-size: var(--text-footnote);
  font-weight: 600;
  white-space: nowrap;
}

.guide-task-status--not-started { color: var(--color-text-faint); }
.guide-task-status--in-progress { color: var(--color-accent); }
.guide-task-status--done { color: var(--color-success); }

/* ---------- Chapter 2 hub: a small chooser, not a form ---------- */

.guideview-hub-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guideview-hub-btn {
  display: block;
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-4) var(--space-5);
  text-align: start;
  font-family: var(--font-serif);
  font-size: var(--text-headline);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-micro) ease, background var(--dur-micro) ease;
}

@media (hover: hover) and (pointer: fine) {
  .guideview-hub-btn:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-raised);
  }
}

/* ---------- Completion moments: typographic, no confetti ---------- */

.guideview-complete .guideview-question {
  margin-bottom: var(--space-5);
}

.guideview-mastery {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 38rem;
}

/* ---------- Backup nudge (documents.js pattern, own copy: see the
   js/views/guide.js file header for why this is not a shared import) ---------- */

.guide-nudge {
  border-inline-start: 3px solid var(--color-separator);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  max-width: 38rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-text-secondary) 4%, transparent);
}

.guide-nudge-body {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.guide-nudge-actions {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-footnote);
}

.guide-nudge-link,
.guide-nudge-dismiss {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

button.guide-nudge-link::after,
.guide-nudge-dismiss::after {
  content: '';
  position: absolute;
  inset: -12px;
}

.guide-nudge-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guide-nudge-link:hover {
  /* Brass-as-text workaround (tokens.css header): accent-hover is
     border/background/fill only in light mode; as TEXT, hover falls
     back to primary ink, matching .estate-quiet-link:hover. */
  color: var(--color-text-primary);
}

.guide-nudge-sep {
  color: var(--color-text-faint);
}

.guide-nudge-dismiss {
  color: var(--color-text-faint);
  margin-inline-start: auto;
}

.guide-nudge-dismiss:hover {
  color: var(--color-text-secondary);
}

.guide-nudge-status {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: var(--space-1);
}

.guide-nudge-status:empty {
  display: none;
}

/* ============================================================
   The interview shell: rail + question + preview
   ============================================================ */

.guideview--interview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.guide-rail {
  order: -1;
}

.guide-rail-orient {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.guideview-main {
  min-width: 0;
}

/* ---------- The live preview: persistent panel / collapsed chip ----------
   Below 900px: a tap-to-expand chip (a native <details>, so the
   summary IS the collapsed chip and needs no separate markup).
   BLUEPRINT.md §5 / taste decision 2. */

.guide-preview {
  order: 2;
}

.guide-preview-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.guide-preview-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
}

.guide-preview-summary::-webkit-details-marker {
  display: none;
}

.guide-preview-summary-title {
  /* flex: 1 keeps the chip and fold chevron grouped at the inline end
     (three flex children would otherwise spread under space-between). */
  flex: 1;
  min-width: 0;
  font-size: var(--text-subhead);
  font-weight: 600;
  color: var(--color-text-primary);
}

.guide-preview-summary-chip {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  text-align: end;
}

.guide-preview-body {
  padding: 0 var(--space-5) var(--space-5);
  animation: guideview-settle var(--dur-medium) var(--ease-ios-push) both;
}

.guide-preview-quiet,
.guide-preview-line {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.guide-preview-quiet a,
.guide-preview-line a {
  color: var(--color-accent);
}

.guide-preview-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.guide-preview-donut {
  width: 100%;
  max-width: 148px;
  height: auto;
}

.guide-preview-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.guide-preview-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-footnote);
  color: var(--color-text-primary);
}

.guide-preview-swatch {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid var(--color-border);
}

.guide-preview-legend-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-preview-legend-value {
  font-family: var(--font-mono);
  /* The computed share fraction is the legend's payload, real content:
     at or above the 0.875rem floor (smallest clearing token), the same
     rule .calc-legend-value already follows in view-calculator.css. */
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ---------- ≥900px: rail + main + persistent preview column ----------
   Matches the app's own established breakpoint grammar
   (css/view-calculator.css:438, css/view-estate.css:34,
   css/view-home.css:233). */

@media (min-width: 900px) {
  .guideview--interview {
    grid-template-columns: 140px minmax(0, 1fr) 320px;
    align-items: start;
    gap: var(--space-8);
  }

  .guide-rail {
    order: 0;
    position: sticky;
    top: var(--space-6);
  }

  .guide-preview {
    order: 0;
    position: sticky;
    top: var(--space-6);
  }

  /* The panel is always open on desktop: js/views/guide.js sets the
     <details>'s real `open` attribute whenever the viewport is at
     least 900px wide (a closed <details>'s non-summary content is
     hidden by the browser's own internal algorithm, not a plain,
     overridable `display` rule, so this has to be the real attribute,
     not a CSS trick fighting it). Nothing left here needs a `[open]`
     selector: the disclosure affordance simply has nothing to toggle
     at this width. */
  .guide-preview-summary {
    cursor: default;
  }

  .guide-preview-summary-chip {
    display: none;
  }
}

/* ---------- Print: this view has no printable output of its own ---------- */

@media print {
  .guideview {
    display: none;
  }
}