/* ==========================================================================
   Sierra Action Planner — Fire Recovery skin.

   A calm public-service guide for wildfire survivors. It loads AFTER
   planner.css (and, on the plan page, agents.css) and reuses their warm
   editorial design system — the same paper/green/cedar/gold palette and
   Newsreader + Figtree type as the main planner — so the Fire guide reads as
   one product with the rest of Sierra, not a bolt-on. The tone stays quiet:
   a narrow single column, unhurried spacing, one clear action at a time, no
   marquee and no imagery. This file only ADDS the fire-specific pieces
   (landing, the claim-window span control, the summary card, the printed claim
   binder) and lightly re-tunes the realtor components the plan renderer reuses.

   The guide runs the SAME dated renderer as the realtor templates — phases
   spread across the span by weight, a date on every step, per-phase length
   sliders. What is fire-specific is the warm paper skin and the register: a
   date here is orientation, never pressure. Nothing on this page counts down,
   turns red, or nags.

   Palette: page #F1EBDF · cards #FFFDF8 · dark green #163C2E/#1E4636 ·
   green accent #24614A · cedar action #B4552F · gold notes #C7913F/#FBF3E4.
   ========================================================================== */

/* A few fire-local accents layered on the shared planner.css tokens. */
.planner-root {
  --fire-glow: rgba(140, 178, 156, 0.24);   /* soft sage drift behind the hero */
  --fire-done-row: #F4F1E8;                  /* warm parchment fill on checked rows */
  --fire-strike: #A59E92;                    /* struck-through done text */
}
body { background: var(--light-bg); }

/* ==========================================================================
   Minimal calm header (small wordmark + one link). No realtor mega-nav.

   The "content pending review" preview ribbon that used to live here is gone —
   the guide's content is signed off. `<meta name="robots" content="noindex">`
   on both fire pages is a separate switch and is still in place.
   ========================================================================== */
.fire-header { border-bottom: 1px solid var(--border); background: var(--light-bg); }
.fire-header-inner {
  max-width: 860px; margin: 0 auto; padding: 14px clamp(16px,4vw,32px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.fire-wordmark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.fire-wordmark img { display: block; height: 34px; width: auto; }
.fire-wordmark .wm-titles { display: flex; flex-direction: column; line-height: 1.15; }
.fire-wordmark .wm-title { font-family: 'Newsreader', serif; font-size: 16.5px; font-weight: 600; color: var(--forest-green); }
.fire-wordmark .wm-sub { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin-top: 1px; }
.fire-header-links { display: flex; align-items: center; gap: 8px; }
.fire-header-links a {
  font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: 8px 12px; border-radius: 999px; transition: background 0.15s, color 0.15s;
}
.fire-header-links a:hover { color: var(--forest-green); background: var(--green-tint); }

/* ---- the shared header menu, on BOTH fire pages -------------------------
   Same markup and classes as every other audience page (.sh-menu-btn /
   .sh-menu / .shm-link / .sh-cta from planner.css), but a hamburger at EVERY
   width rather than the green pages' ≤1240px fold: .fire-header-inner is an
   860px column by design, and a six-item link row does not belong in a header
   whose whole job is to stay quiet. Consistent CONTENT, calmer chrome.

   This lives in fire.css (not fire-documents.css) because fire-plan.html does
   not load fire-documents.css and needs the same menu. */

/* .sh-menu is position:absolute; it needs a positioned header to hang from.
   The green pages get this from .site-header's sticky positioning. */
.fire-header { position: relative; }

/* planner.css hides .sh-menu-btn above 1240px. Here it is the only way into
   the menu, so it is always shown. !important is deliberate and narrow: the
   planner.css rule is a media query and would otherwise win on this page. */
.fire-header .sh-menu-btn {
  display: inline-flex !important;
  border-color: var(--border-2, #DDD3C1);
}

/* Match the header's own column so the panel lines up with the wordmark
   rather than spanning an 860px header edge to edge. left/right:0 come from
   planner.css; auto margins centre the capped width between them. */
.fire-header .sh-menu {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 32px) 16px;
  background: rgba(241, 235, 223, 0.98);   /* --light-bg, matched to the paper */
  border-bottom: 1px solid var(--border-2, #DDD3C1);
  box-shadow: 0 22px 44px -24px rgba(90, 74, 44, 0.55);
}
.fire-header .shm-link { border-bottom-color: rgba(90, 74, 44, 0.12); }

/* ==========================================================================
   Serif headings (Newsreader), matching the main planner's editorial voice.
   ========================================================================== */
.fire-hero-h1, .fire-band-h, .fire-notlaw h2,
.fire-sum-h, .fire-removed-h, .fire-cover-h,
.fire-planhead .ag-plan-label {
  font-family: 'Newsreader', serif;
  letter-spacing: -0.005em;
}

/* ==========================================================================
   Entrance motion (matches the handoff): a hero rise + scroll-reveal fade-ups.
   The hidden state is gated behind .fr-js (added by an inline <head> script)
   so the guide is fully readable if JavaScript is off. All disabled under
   prefers-reduced-motion.
   ========================================================================== */
@keyframes fire-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fire-drift { 0% { transform: translate3d(-3%,0,0) scale(1); } 100% { transform: translate3d(4%,3%,0) scale(1.12); } }
@keyframes fire-draw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }

.fr-js .fire-hero { animation: fire-rise 0.7s ease both; }
.fr-js .fr-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.33,1,0.68,1); }
.fr-js .fr-reveal.fr-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fr-js .fire-hero { animation: none; }
  .fr-js .fr-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .fire-hero-glow, .fire-hero-uline { animation: none !important; }
  .fire-hero-uline { stroke-dashoffset: 0 !important; }
}

/* ==========================================================================
   Landing (fire.html)
   ========================================================================== */
.fire-main { max-width: 760px; margin: 0 auto; padding: clamp(28px,5vw,56px) clamp(16px,4vw,32px) 72px; }

.fire-hero { position: relative; overflow: hidden; padding: clamp(8px,2vw,20px) 0 4px; }
.fire-hero-glow {
  position: absolute; top: -30%; right: -22%; width: 62%; height: 150%;
  background: radial-gradient(circle, var(--fire-glow), transparent 66%);
  pointer-events: none; z-index: 0;
  animation: fire-drift 28s ease-in-out infinite alternate;
}
.fire-hero > * { position: relative; z-index: 1; }
.fire-hero-h1 {
  font-weight: 500; font-size: clamp(30px,5.4vw,46px); line-height: 1.13;
  color: var(--forest-green); margin: 0; max-width: 19ch; text-wrap: pretty;
}
.fire-hero-h1 em { font-style: italic; color: var(--cedar-accent); }
.fire-hero-uline { display: block; width: clamp(140px,22vw,210px); height: auto; margin: 12px 0 0; overflow: visible; }
.fire-hero-uline path {
  stroke-dasharray: 240; stroke-dashoffset: 240;
  animation: fire-draw 1.1s cubic-bezier(0.4,0,0.2,1) 0.5s both;
}
.fire-hero-sub { font-size: clamp(16px,2vw,19px); line-height: 1.6; color: var(--ink-soft); margin: 20px 0 0; max-width: 52ch; text-wrap: pretty; }
.fire-free-line {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-size: 14px; font-weight: 600; color: var(--green-mid);
  background: var(--green-tint); border: 1px solid var(--green-tint-border);
  border-radius: 999px; padding: 8px 16px;
}

/* section rhythm */
.fire-band { margin-top: clamp(34px,6vw,52px); border-top: 1px solid var(--border); padding-top: clamp(30px,5vw,46px); }
.fire-band-h { font-size: clamp(22px,3vw,30px); font-weight: 600; color: var(--forest-green); margin: 0 0 4px; line-height: 1.2; }
.fire-band-lead { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); margin: 8px 0 0; max-width: 60ch; text-wrap: pretty; }

/* "what this is" checklist */
.fire-whatis { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.fire-whatis li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 17px 19px;
}
.fire-whatis .ico {
  flex-shrink: 0; width: 27px; height: 27px; border-radius: 999px;
  background: var(--green-tint); color: var(--green-mid);
  display: inline-flex; align-items: center; justify-content: center;
}
.fire-whatis .txt { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.fire-whatis .txt b { color: var(--dark-text); font-weight: 700; }

/* "start where you are" entry */
.fire-start { margin-top: clamp(34px,6vw,52px); background: var(--card-2); border: 1px solid var(--border); border-radius: 16px; padding: clamp(20px,3vw,28px); }
.fire-start .fire-band-h { margin-top: 0; }
.fire-start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; margin-top: 20px; }
.fire-start-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 17px 19px; cursor: pointer; font-family: inherit; text-decoration: none;
  min-height: 56px;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.fire-start-card:hover { transform: translateY(-2px); border-color: var(--green-tint-border); box-shadow: var(--shadow-card); }
.fire-start-card:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; }
.fire-start-when { font-size: 16.5px; font-weight: 700; color: var(--forest-green); }
.fire-start-then { font-size: 14px; color: var(--muted); line-height: 1.5; }
.fire-start-arrow { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--cedar-accent); }

/* "who made this and why" honesty section */
.fire-honesty { margin-top: clamp(34px,6vw,52px); background: var(--green-tint); border: 1px solid var(--green-tint-border); border-left: 3px solid var(--green-mid); border-radius: 12px; padding: clamp(20px,3vw,26px); }
.fire-honesty .fire-band-h { margin-top: 0; }
.fire-honesty p { font-size: 16px; line-height: 1.68; color: #3E5A4E; margin: 14px 0 0; max-width: 62ch; text-wrap: pretty; }
.fire-honesty p:first-of-type { margin-top: 16px; }
.fire-honesty b { color: var(--forest-green); }

/* "what this isn't" disclaimer */
.fire-notlaw { margin-top: clamp(34px,6vw,52px); background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: clamp(20px,3vw,26px); }
.fire-notlaw h2 { font-size: 20px; font-weight: 600; color: var(--forest-green); margin: 0 0 10px; }
.fire-notlaw p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; max-width: 62ch; text-wrap: pretty; }
.fire-resource-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fire-resource-links a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--green-mid);
  background: var(--green-tint); border: 1px solid var(--green-tint-border); border-radius: 999px;
  padding: 10px 16px; text-decoration: none; min-height: 44px;
  transition: border-color 0.12s, background 0.12s;
}
.fire-resource-links a:hover { border-color: var(--green-mid); background: #E2ECE4; }

.fire-footer {
  max-width: 760px; margin: 0 auto; padding: 30px clamp(16px,4vw,32px) 44px;
  border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); line-height: 1.6;
}
.fire-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.fire-footer a:hover { color: var(--forest-green); }
/* The client's footnote. Says who paid for the guide, once, quietly. */
.fire-footnote { color: var(--ink-soft); font-weight: 600; margin-bottom: 6px; }

/* ==========================================================================
   Plan page (fire-plan.html) — head + toolbar
   ========================================================================== */
.fire-plan-main { max-width: 760px; margin: 0 auto; padding: clamp(22px,4vw,40px) clamp(16px,4vw,32px) 72px; }
.fire-plan-main > section, .fire-plan-main > div { margin-top: 20px; }
.fire-plan-main > section:first-child { margin-top: 0; }
/* the renderer appends its sections into #agPlanMount, so the page rhythm has
   to reach one level further down than .fire-plan-main's own children. */
#agPlanMount > section, #agPlanMount > div { margin-top: 20px; }
#agPlanMount > :first-child { margin-top: 0; }
.fire-dates-row { margin-top: 16px; align-items: flex-start; }
.fire-head-help { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 10px 0 0; max-width: 66ch; text-wrap: pretty; }
.fire-planhead .ag-plan-label { font-size: clamp(21px,2.6vw,28px); }
/* the whole plan head leads with the calm cedar edge, not the realtor gold */
.fire-planhead { border-left-color: var(--cedar-accent); }
.fire-status-line { color: var(--ink-soft); font-weight: 500; line-height: 1.6; max-width: 66ch; }
.fire-status-line strong { color: var(--forest-green); font-weight: 700; }

/* ==========================================================================
   The span: a DATE and a DURATION, not two dates.

   You know when the fire was; you rarely know the day the claim closes. So the
   second control is "how long do you expect this to stay open", offered as
   three common starting points plus a free field. The end date is derived and
   shown read-only underneath. The options are suggestions and are worded that
   way — nothing here states what a policy covers.
   ========================================================================== */
.fire-date-field { flex: 1 1 190px; min-width: 0; }
.fire-claim-field { flex: 2 1 320px; min-width: 0; }
.fire-claim-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fire-claim-opt {
  flex: 1 1 auto; min-height: 44px; padding: 11px 14px;
  background: var(--card); border: 1.5px solid var(--border-2); border-radius: 10px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.fire-claim-opt:hover { border-color: var(--green-tint-border); background: var(--green-tint); }
.fire-claim-opt.is-on { border-color: var(--cedar-accent); background: #FBF1EA; color: var(--cedar-accent); }
.fire-claim-opt:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; }
.fire-claim-custom {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 10px; font-size: 13px; color: var(--muted);
}
.fire-claim-input { width: 82px; padding: 9px 10px; font-size: 14.5px; text-align: center; }
.fire-claim-end { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; }
.fire-claim-end b { color: var(--forest-green); }

/* ==========================================================================
   The claim binder header.

   Insurance company, adjuster, policy #, claim #, phone, date opened — the
   handful of details a household is asked for over and over for two years.
   Every field optional. Presented as a place to KEEP things, not a form to
   complete: no required marks, no validation shouting, no completion meter.
   ========================================================================== */
.fire-binder {
  background: var(--card); border: 1px solid var(--border);
  border-left: 5px solid var(--green-mid);
  border-radius: 16px; box-shadow: var(--shadow-card); padding: clamp(18px,2.6vw,26px);
}
.fire-binder-h {
  font-family: 'Newsreader', serif; font-size: clamp(19px,2.3vw,23px); font-weight: 600;
  color: var(--forest-green); margin: 0; letter-spacing: -0.005em;
}
.fire-binder-p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 7px 0 0; max-width: 64ch; text-wrap: pretty; }
.fire-binder-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: 12px 16px; margin-top: 18px;
}
.fire-binder-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fire-binder-input { width: 100%; min-height: 44px; }

/* ==========================================================================
   Category progress cards.

   Six cards that cut across the sections. Four count. Two — The Big Decision
   and Rebuild Path — show a STATE instead ("Choice Open", "Optional"), and
   that is the whole point: a household still weighing whether to rebuild is
   not behind, and a half-empty bar would tell it that it is.
   ========================================================================== */
.fire-cats[hidden] { display: none; }
.fire-cats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px,1fr)); gap: 10px; }
.fire-cat {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 15px 16px 16px;
}
.fire-cat.is-done { border-color: var(--green-tint-border); background: var(--green-tint); }
.fire-cat-emoji { font-size: 19px; line-height: 1; }
.fire-cat-label { font-size: 13.5px; font-weight: 700; color: var(--forest-green); line-height: 1.3; }
.fire-cat-count { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.fire-cat-bar { display: block; height: 6px; border-radius: 999px; background: #EAE3D5; overflow: hidden; margin-top: 4px; }
.fire-cat-fill { display: block; height: 100%; border-radius: 999px; background: var(--green-mid); transition: width 0.25s ease; }
/* The two state cards read as a standing fact, not a score in progress. */
.fire-cat.is-state { background: var(--card-2); }
.fire-cat-state {
  align-self: flex-start; margin-top: 4px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--cedar-accent); background: #FBF1EA; border: 1px solid #EBD9CC;
  border-radius: 999px; padding: 4px 11px;
}

/* ==========================================================================
   The recovery horizon.

   The fire date at one end, the claim target at the other, the five phases in
   between at their real widths. It scrolls sideways rather than crushing the
   first phase (4% of two years) into an unreadable sliver.
   ========================================================================== */
.fire-roadmap {
  background: var(--card-2); border: 1px solid var(--border); border-radius: 16px;
  padding: clamp(18px,2.6vw,26px);
}
.fire-road-h {
  font-family: 'Newsreader', serif; font-size: clamp(19px,2.3vw,23px); font-weight: 600;
  color: var(--forest-green); margin: 0; letter-spacing: -0.005em;
}
.fire-road-ends {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px;
}
.fire-road-end { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fire-road-end.is-right { text-align: right; }
.fire-road-end .k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.fire-road-end .v { font-size: 15px; font-weight: 700; color: var(--forest-green); }

.fire-road-track {
  list-style: none; margin: 14px 0 0; padding: 0 0 4px;
  display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.fire-road-step {
  flex: 1 1 0; min-width: 132px;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 13px 13px;
}
.fire-road-rail { display: block; height: 4px; border-radius: 999px; background: var(--cedar-accent); opacity: 0.35; margin-bottom: 7px; }
.fire-road-n { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cedar-accent); }
.fire-road-span { font-size: 14px; font-weight: 700; color: var(--forest-green); }
.fire-road-name { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); text-wrap: pretty; }
.fire-road-dates { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* The reassurance note. Verbatim client copy — the one line on this page that
   exists purely to take the pressure off. It is not decoration; do not hide it
   behind a disclosure and do not shrink it into fine print. */
.fire-road-note {
  font-size: 14px; line-height: 1.65; color: #3E5A4E;
  background: var(--green-tint); border: 1px solid var(--green-tint-border); border-radius: 12px;
  padding: 14px 16px; margin: 16px 0 0; max-width: 72ch; text-wrap: pretty;
}

/* ==========================================================================
   Summary — the whole claim at a glance, high on the page. Counts, never a
   countdown: done, still open, removed, and the span. No "days left".
   ========================================================================== */
.fire-summary {
  background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--cedar-accent);
  border-radius: 16px; box-shadow: var(--shadow-card); padding: clamp(20px,3vw,28px);
}
.fire-summary.is-complete { border-left-color: var(--green-mid); }
.fire-sum-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cedar-accent); }
.fire-sum-h {
  font-family: 'Newsreader', serif; font-size: clamp(20px,2.6vw,26px); font-weight: 500;
  color: var(--forest-green); margin: 10px 0 0; line-height: 1.28; text-wrap: pretty;
}
.fire-sum-h strong { font-weight: 600; }
.fire-sum-sub { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 7px 0 0; max-width: 58ch; }
.fire-sum-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px,1fr)); gap: 10px;
  margin-top: 18px;
}
.fire-sum-stat {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
}
.fire-sum-stat .k { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.fire-sum-stat .v { font-size: 20px; font-weight: 700; color: var(--forest-green); font-variant-numeric: tabular-nums; line-height: 1.2; }
.fire-sum-span { grid-column: 1 / -1; }
.fire-sum-span .v { font-size: 15px; font-weight: 700; line-height: 1.4; }
.fire-sum-span .sub { font-weight: 600; color: var(--muted); font-size: 13.5px; }
.fire-sum-next { margin-top: 20px; border-top: 1px solid var(--border-soft); padding-top: 18px; }
.fire-sum-next-lead { font-size: 14px; color: var(--muted); margin: 8px 0 12px; }

.fire-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fire-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cedar-accent); color: var(--cream); border: none; border-radius: 11px;
  padding: 12px 20px; font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  text-decoration: none; min-height: 46px; transition: background 0.15s, transform 0.12s;
}
.fire-btn:hover { background: #9c4526; transform: translateY(-1px); }
.fire-btn-ghost { background: transparent; color: var(--green-2); border: 1.5px solid var(--border-2); }
.fire-btn-ghost:hover { background: var(--green-tint); border-color: var(--green-tint-border); }

/* ==========================================================================
   Phones. This file had no narrow-viewport rules at all, and the header paid
   for it: .fire-header-inner lays out wordmark + switcher + hamburger with a
   16px gap, and the pieces have a hard floor — the wordmark ~173px (34px logo
   ≈96px wide + titles), the switcher ~149px and flex-shrink:0 by design, the
   hamburger 42px — which comes to ~428px before padding. On a 390px phone the
   row overflowed, and because body.planner-root sets overflow-x: clip the
   overflow was not scrollable but CUT OFF: the hamburger, the only navigation
   these two pages have (there is no link row), was partly or wholly gone.
   The wordmark is the only piece that can give, so it gives.
   ========================================================================== */
@media (max-width: 560px) {
  .fire-header-inner { gap: 10px; }
  .fire-wordmark { min-width: 0; }
  .fire-wordmark img { height: 28px; }
  .fire-wordmark .wm-sub { display: none; }
  /* Plan tools stack into equal, full-height targets rather than dangling a
     lone third button on its own line. */
  .fire-toolbar { gap: 8px; }
  .fire-toolbar .fire-btn { flex: 1 1 140px; justify-content: center; }
}

/* ==========================================================================
   Save panel — quiet, on this device. The realtor save is a bold dark card;
   the fire guide keeps it a calm warm card (never a sales moment) while the
   OTP flow + data-state show/hide from agents.css keep working untouched.
   ========================================================================== */
.ag-save.fire-save {
  background: var(--card); color: var(--dark-text); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.fire-save .ag-save-eyebrow { color: var(--cedar-accent); }
.fire-save .ag-save-h { color: var(--forest-green); }
.fire-save .ag-save-p { color: var(--ink-soft); }
.fire-save .ag-save-row input { background: #FFFFFF; border: 1.5px solid var(--border-2); color: var(--dark-text); }
.fire-save .ag-save-row input::placeholder { color: var(--muted-2); }
.fire-save .ag-save-row input:focus { border-color: var(--cedar-accent); }
.fire-save .ag-consent { color: var(--muted); }
.fire-save .ag-consent a { color: var(--green-mid); }
.fire-save .ag-consent input { accent-color: var(--green-mid); }
.fire-save .ag-save-msg { color: var(--ink-soft); }
.fire-save .ag-save-msg.error { color: #A4442E; }
.fire-save .ag-save-msg.success { color: var(--green-mid); }
.fire-save .ag-save-back { color: var(--green-mid); }

/* ==========================================================================
   "What's coming up" list — lives inside the summary card above. The item
   styling is shared, so this block is unchanged apart from losing its own
   card wrapper.
   ========================================================================== */
.fire-next-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cedar-accent); }
.fire-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fire-next-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--green-tint); border: 1px solid var(--green-tint-border); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; min-height: 52px; transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.fire-next-item:hover { border-color: var(--green-mid); background: #E2ECE4; transform: translateY(-1px); }
.fire-next-item:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; }
.fire-next-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--cedar-accent); background: transparent; }
.fire-next-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fire-next-title { font-size: 15.5px; font-weight: 700; color: var(--forest-green); line-height: 1.35; }
.fire-next-phase { font-size: 12.5px; color: var(--muted); }
.fire-next-arrow { flex-shrink: 0; color: var(--cedar-accent); font-weight: 800; font-size: 16px; }

/* ==========================================================================
   Phase cards. These are the shared .ag-phase cards from agents.css, re-tuned
   for the warm paper page: cedar rather than green edge, calmer counts, the
   done row filled with parchment instead of struck out hard.
   ========================================================================== */
.fire-phase { border-left-color: var(--cedar-accent); }
.fire-phase.is-done { border-left-color: var(--green-mid); }
.fire-phase .ag-phase-span { color: var(--muted-2); letter-spacing: 0.04em; }

/* The phase's band on the recovery horizon, in words ("Days 1–30"). Sits in
   the phase head beside the name; the calculated dates sit under it. */
.fire-phase-band {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--cedar-accent); background: #FBF1EA; border: 1px solid #EBD9CC;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}

/* ==========================================================================
   Section headings inside a phase.

   Sections are a level between the phase and the step. They are NOT 1:1 with
   phases — phases 2 and 3 hold two sections each — so the heading is a sibling
   of the step rows rather than a wrapper around them (the renderer re-dates
   rows by index within .ag-ms-list; nesting them would break that).
   ========================================================================== */
.fire-section-head {
  display: flex; flex-direction: column; gap: 2px;
  margin: 18px 0 2px; padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.ag-ms-list > .fire-section-head:first-child { margin-top: 2px; padding-top: 0; border-top: none; }
.fire-section-n { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.fire-section-title {
  font-family: 'Newsreader', serif; font-size: 17.5px; font-weight: 600; line-height: 1.3;
  color: var(--forest-green); letter-spacing: -0.005em; text-wrap: pretty;
}
/* "(Optional)" is in the section's own title. The quieter rule under it is the
   visual half of the same promise: this path is a choice, not a finish line. */
.fire-section-head.is-optional .fire-section-title { color: var(--ink-soft); }
.fire-section-head.is-own .fire-section-title { font-size: 15px; color: var(--muted); }
.fire-phase .ag-ms.is-done .ag-ms-row { background: var(--fire-done-row); border-radius: 10px; }
.fire-phase .ag-ms.is-done .ag-ms-title { color: var(--fire-strike); }
/* the summary's "what is coming up" list scrolls to a phase and flashes it */
.ag-phase.is-flash { border-color: var(--cedar-accent); box-shadow: 0 0 0 3px rgba(180,85,47,0.16); }

/* The milestone date chip. Deliberately ONE appearance: a step whose date has
   gone by looks exactly like one whose date has not. No overdue red, no amber
   "due soon", no countdown — see the tone note at the top of this file. */
.ag-due.fire-due { color: var(--muted); background: #F0EADD; border: 1px solid transparent; font-weight: 600; }
.ag-due.fire-due.ag-due-done { color: var(--green-mid); background: var(--green-tint); border-color: var(--green-tint-border); }

/* ==========================================================================
   Steps the household added or removed.

   Add: one field per phase, the same shape the custom-plan builder uses.
   Remove: a quiet ✕ that hides a built-in step (nothing is deleted) and can be
   undone from the "steps you removed" list at the bottom of the guide.
   ========================================================================== */
.ag-ms-own {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-mid); background: var(--green-tint); border: 1px solid var(--green-tint-border);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.ag-ms-remove {
  align-self: flex-start; flex-shrink: 0; margin-left: 6px;
  background: none; border: none; padding: 4px; border-radius: 8px;
  color: #C0B8AA; cursor: pointer; display: flex;
  transition: color 0.15s, background 0.15s;
}
.ag-ms-remove:hover { color: var(--cedar-accent); background: #F6EDE7; }
.ag-ms-remove:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 1px; }

.fire-ms-add { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 12px; padding-top: 13px; border-top: 1px dashed var(--border-2); }
.fire-ms-add-input { flex: 1 1 220px; min-width: 0; padding: 10px 12px; font-size: 14.5px; background: var(--card-2); }
.fire-ms-add-input::placeholder { color: var(--muted-2); }
.fire-ms-add-btn { flex-shrink: 0; min-height: 40px; }
.fire-ms-add-note { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); }

.fire-removed-list { background: var(--card-2); border: 1px solid var(--border); border-radius: 14px; padding: clamp(18px,2.6vw,24px); }
.fire-removed-list[hidden] { display: none; }
.fire-removed-h { font-family: 'Newsreader', serif; font-size: 19px; font-weight: 600; color: var(--forest-green); margin: 0; }
.fire-removed-p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 8px 0 16px; max-width: 60ch; }
.fire-removed-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fire-removed-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px;
}
.fire-removed-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fire-removed-title { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
.fire-removed-phase { font-size: 12px; color: var(--muted-2); }

/* ==========================================================================
   Photos + documents — the shared .ag-atts component from agents.css, re-tinted
   for warm paper. TINT ONLY: no layout, no new component, nothing restated.

   This is where somebody keeps their insurance file, so the register is the one
   the rest of the guide uses. The block sits under the steps it belongs to, in
   parchment rather than the greener realtor card; the "held until you sign in"
   note is gold like every other note on this page, not an alert; and the remove
   confirmation is cedar, the colour this guide already uses for an action, not
   red. Nothing here is an error state until something actually failed.
   ========================================================================== */
.fire-phase .ag-atts { border-top-color: var(--border); }
.fire-phase .ag-atts-title { color: var(--muted-2); letter-spacing: 0.06em; }
.fire-plan-main .ag-atts-general { border-left: 5px solid var(--green-mid); }
.fire-plan-main .ag-att { background: var(--card); border-color: var(--border); }
.fire-plan-main .ag-att.is-included { background: #FBF3E4; border-color: var(--gold-soft); }
.fire-plan-main .ag-att-thumb,
.fire-plan-main .ag-att-ico { background: var(--fire-done-row); border-color: var(--border); }
.fire-plan-main .ag-att-name { color: var(--forest-green); }
/* Type on this page is a shade larger and looser everywhere else; the file
   rows follow, because they are read by somebody tired. */
.fire-plan-main .ag-att-name { font-size: 14.5px; }
.fire-plan-main .ag-att-meta { font-size: 12.5px; }
.fire-plan-main .ag-att-signin { background: #FBF3E4; border-color: var(--gold-soft); }
.fire-plan-main .ag-att-signin-p { font-size: 14px; color: var(--ink-soft); }
.fire-plan-main .ag-att-q.is-held { background: #FBF3E4; }
.fire-plan-main .ag-att-fill { background: var(--green-mid); }
.fire-plan-main .ag-att-confirm { border-top-color: var(--border); }
.fire-plan-main .ag-att-confirm-p { font-size: 14px; }
.fire-plan-main .ag-att-yes { color: var(--cedar-accent); border-color: #E4BFB2; }
.fire-plan-main .ag-att-yes:hover { background: #F6EDE7; }

/* ==========================================================================
   The claim window (the weighted phase timeline) — the shared .ag-card + gantt
   from agents.css, given the calm card edge.

   NOTE: `.fire-card` (singular) is THIS card. The six category progress cards
   above are `.fire-cat` / `.fire-cats` — deliberately a different stem, because
   the two nearly collided once already.
   ========================================================================== */
.fire-card { border-left: 5px solid var(--green-mid); }

/* ---- honest disclaimer at the foot of the guide ------------------------- */
.fire-disclaimer { font-size: 13.5px; line-height: 1.65; color: var(--muted); background: var(--card-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.fire-disclaimer a { color: var(--green-mid); font-weight: 600; }

/* ==========================================================================
   Printed claim binder (?report=1 / @media print)
   ========================================================================== */
/* The cover sheet is now rendered in normal mode too and hidden here, so that
   the Print button has something to print. Before, it existed only in report
   mode while @media print hid the editable binder on the grounds that the cover
   replaced it — so printing produced neither, and the claim numbers an adjuster
   asked for were missing from the page. Shown again under @media print and
   body.ag-report below. */
.fire-report-cover { display: none; }
.fire-report-cover { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: clamp(22px,3vw,32px); }
.fire-cover-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cedar-accent); }
.fire-cover-h { font-size: clamp(24px,3.4vw,32px); font-weight: 600; color: var(--forest-green); margin: 10px 0 6px; letter-spacing: -0.01em; }
.fire-cover-sub { font-size: 15px; color: var(--ink-soft); margin: 0 0 18px; }
.fire-cover-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; }
.fire-cover-field { display: flex; flex-direction: column; gap: 8px; }
.fire-cover-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.fire-cover-line { height: 1px; border-bottom: 1.5px solid var(--border-2); }
/* A field the household filled in prints as ink; a blank one prints as a ruled
   line to write on. Same grid either way, so a half-filled binder still reads. */
.fire-cover-value {
  font-size: 15px; font-weight: 600; color: var(--dark-text);
  border-bottom: 1.5px solid var(--border-2); padding-bottom: 2px; word-break: break-word;
}
.fire-cover-note { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 18px 0 0; }

/* In report/print mode, flatten the guide into a plain, ink-friendly binder:
   no shadows, all detail expanded, every step reads full. The cover, the
   summary and the dated phase cards all print; the controls do not. */
body.ag-report .site-header,
body.ag-report .fire-header,
body.ag-report .beta-bar,
body.ag-report .ag-save,
body.ag-report .fire-toolbar,
body.ag-report .fire-disclaimer,
body.ag-report .fire-head-help,
body.ag-report .fire-dates-row,
body.ag-report .fire-claim-end,
body.ag-report .fire-ms-add,
body.ag-report .ag-ms-remove,
body.ag-report .fire-removed-list,
/* The editable binder never prints — the cover sheet on page one carries the
   same six fields, with what was typed and a ruled line where it was not. */
body.ag-report .fire-binder,
/* The photos and documents are an editing control; the printed binder carries
   the ones marked "include" as an appendix, resolved server-side. */
body.ag-report .ag-atts,
body.ag-report .ag-ms-toggle { display: none !important; }
body.ag-report .ag-ms-detail { display: block !important; }
body.ag-report .ag-phase,
body.ag-report .fire-summary,
body.ag-report .fire-cats,
body.ag-report .fire-roadmap,
body.ag-report .fire-report-cover { display: block; box-shadow: none; border-color: var(--border-2); }
/* On paper the horizon has no scrollbar to reach for, so let it wrap instead. */
body.ag-report .fire-road-track { flex-wrap: wrap; overflow-x: visible; }

@media print {
  .site-header, .fire-header, .beta-bar,
  .ag-save, .fire-toolbar, .fire-disclaimer, .fire-head-help,
  .fire-dates-row, .fire-claim-end, .fire-ms-add, .ag-ms-remove,
  .fire-removed-list, .fire-binder, .ag-ms-toggle, .ag-atts { display: none !important; }
  .ag-ms-detail { display: block !important; }
  .ag-phase, .ag-card, .ag-planhead, .fire-summary, .fire-cats, .fire-roadmap,
  /* ...and the cover takes the hidden binder's place on paper. */
  .fire-report-cover { display: block !important; break-inside: avoid; box-shadow: none !important; }
  .fire-road-track { flex-wrap: wrap; overflow-x: visible; }
  .fire-section-head { break-after: avoid; break-inside: avoid; }
  .fire-hero-glow { display: none !important; }
}