/* Calm, high-contrast, large type. The reader is grieving and may be 65+.
   No urgency colours, no countdowns, no gamification (NFR-7). */

:root {
  --ink: #1c1b19;
  --ink-soft: #55514c;
  --paper: #faf8f5;
  --card: #ffffff;
  --line: #ddd6cc;
  --accent: #2f5d50;
  --accent-soft: #eaf1ee;
  --flag: #7a4a1e;
  --flag-soft: #f7efe6;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 19px/1.65 Georgia, "Iowan Old Style", "Times New Roman", serif;
  padding: 0 1rem 5rem;
}

main { max-width: 44rem; margin: 0 auto; }
a { color: var(--accent); }

.prototype {
  max-width: 44rem; margin: 1rem auto 0; padding: .7rem 1rem;
  background: var(--flag-soft); border: 1px solid var(--flag);
  border-radius: var(--radius); font-size: .92rem; color: var(--ink);
}
.back { margin-top: 1.5rem; }
.linklike {
  background: none; border: 0; padding: 0; color: var(--accent);
  font-size: .95rem; text-decoration: underline; cursor: pointer;
}

.masthead {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-size: 1.25rem; letter-spacing: .01em;
  color: var(--accent); text-decoration: none; font-weight: 700;
}
.tagline { margin: .2rem 0 0; color: var(--ink-soft); font-size: .95rem; }

h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 .6rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 1rem; }
h3 { font-size: 1.12rem; margin: 0 0 .35rem; }

.lede { font-size: 1.06rem; color: var(--ink-soft); }
.help { color: var(--ink-soft); margin-top: -.2rem; }
.quiet { color: var(--ink-soft); font-size: .88rem; }
.progress {
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .5rem;
}

.panel { padding: 2rem 0 1rem; }

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

button { font: inherit; cursor: pointer; }

.primary, .answer {
  display: block; width: 100%; text-align: left;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin: .6rem 0; font-size: 1.05rem;
}
.primary { background: var(--accent); color: #fff; border-color: var(--accent);
  text-align: center; font-weight: 600; max-width: 14rem; }
.answer:hover, .answer:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.answer.subtle { color: var(--ink-soft); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- tasks ------------------------------------------------------------ */

.task {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.35rem; margin: 0 0 1rem;
}
.task.is-done { background: #f4f6f4; }
.task.is-done h3 { text-decoration: line-through; color: var(--ink-soft); }
.task.is-escalation { border-left: 5px solid var(--flag); background: var(--flag-soft); }
.task.is-ruled-out, .task.is-unresolved { background: transparent; border-style: dashed; }

.task-head { display: flex; gap: .9rem; align-items: flex-start; }
.task-title { flex: 1; }

.check {
  width: 2.1rem; height: 2.1rem; flex: none; margin-top: .15rem;
  border: 2px solid var(--line); border-radius: 6px; background: var(--card);
  font-size: 1.1rem; line-height: 1; color: var(--accent);
}
.check[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }

.badges { margin: .1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.badge {
  font-family: system-ui, sans-serif; font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.badge.class-A { border-color: var(--accent); color: var(--accent); }
.badge.escalate { border-color: var(--flag); color: var(--flag); }

.provenance { margin: .8rem 0; border-top: 1px solid var(--line); padding-top: .7rem; }
.provenance summary { cursor: pointer; color: var(--accent); font-size: .92rem; }
.provenance ul { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
.citations a { color: var(--accent); }
code { font-size: .82rem; background: #f0ece6; padding: .1rem .3rem; border-radius: 4px; }

/* --- curated content sections -------------------------------------- */

.section-label {
  font-family: system-ui, sans-serif; font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .25rem;
}
.description { margin: .9rem 0 .8rem; }
.plain-words {
  background: var(--accent-soft); border-radius: var(--radius);
  padding: .8rem 1rem; margin: .8rem 0;
}
.plain-words p:last-child { margin: 0; }
.need ul { margin: .2rem 0 .9rem; padding-left: 1.2rem; }
.need li { margin: .15rem 0; }
.where, .prereq { margin: .7rem 0; color: var(--ink-soft); }
.where p:last-child { margin: 0; }
.prereq .section-label { display: inline; margin-right: .4rem; }
.source-meta { display: block; margin-top: .1rem; }

/* A title like "Tell the mortgage servicer" reads as an instruction when
   skimmed. Under these two sections it means the opposite, so the card is
   flagged above the title where the eye lands first. */
.card-flag {
  font-family: system-ui, sans-serif; font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 .4rem; font-weight: 600;
}
.is-ruled-out .card-flag { color: var(--accent); }
.is-unresolved .card-flag { color: var(--flag); }
.is-ruled-out h3, .is-unresolved h3 { color: var(--ink-soft); font-weight: 600; }
.prereq a { color: var(--accent); }
.also { margin: .2rem 0 .8rem; }
.also ul { margin: .2rem 0 0; padding-left: 1.2rem; color: var(--ink-soft); }
.why-sentence { font-size: 1.02rem; margin: .5rem 0 .8rem; }

.badge.class-required { border-color: var(--accent); color: var(--accent); }
.badge.class-recommended { border-color: var(--line); color: var(--ink-soft); }
.badge.class-optional { border-color: var(--line); color: var(--ink-soft); }

.coverage {
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.5rem 0 0;
  border: 1px solid var(--line);
}
.coverage p { margin: 0 0 .5rem; }
.coverage p:last-child { margin: 0; }
.coverage-flag {
  font-family: system-ui, sans-serif; font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 600;
}
.coverage-gap { background: var(--flag-soft); border-left: 5px solid var(--flag); }
.coverage-gap .coverage-flag { color: var(--flag); }
.coverage-beta { background: var(--accent-soft); border-left: 5px solid var(--accent); }
.coverage-beta .coverage-flag { color: var(--accent); }

/* --- disclosure: persistent, never dismissible (NFR-5) ---------------- */

.disclosure {
  max-width: 44rem; margin: 3rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .85rem;
}

.footer-links {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: baseline;
  margin-top: 1rem; font-size: .92rem;
}

/* --- notices, feedback, privacy ------------------------------------- */

.notice {
  background: var(--accent-soft); border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 1.5rem;
}
.prose h2 { margin-top: 2rem; }
.prose ul { padding-left: 1.2rem; }

.feedback {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
}
.feedback fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.feedback legend { padding: 0; }
.feedback legend h2 { margin: 0 0 .6rem; }
.rating { display: flex; flex-wrap: wrap; gap: .6rem; }
.rating label {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .55rem 1rem; cursor: pointer; background: var(--paper);
}
.rating label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rating input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; margin: 0; }
.comment-label { display: block; margin: 0 0 .35rem; }
.feedback textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .7rem .8rem;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); resize: vertical;
}
.feedback textarea:focus-visible { border-color: var(--accent); }
.primary.danger { background: var(--flag); border-color: var(--flag); max-width: 18rem; }

@media print {
  .footer-links, .feedback { display: none; }
  .check, .primary { display: none; }
  body { background: #fff; font-size: 12pt; }
  .task { break-inside: avoid; border-color: #999; }
  .provenance[open] summary { display: none; }
  .provenance { display: block; }
}