/* Crux Snapshot — Step 5 visual pass: dark theme (toward the sample report / cruxresilience.com).
   The rubric BAND colors (wheel wedges, bars, grade pill) come from survey.json and are applied
   inline — unchanged. This file styles the dark ground, panels, text, tracks, and rings around them. */
:root {
  --bg: #14181c;          /* page */
  --panel: #1e242b;       /* cards, fieldsets */
  --panel-2: #28303a;     /* inputs, tracks, buttons */
  --ink: #e8ebee;         /* body text */
  --muted: #9aa4ae;       /* secondary text */
  --line: #36404b;        /* borders */
  --accent: #93c24d;      /* bright green for headings/rules/brand/CTA on dark */
  --hunter: #2D5016;
  --hunter-light: #7BA147;
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--bg);
  max-width: 760px; margin: 0 auto; padding: 1rem 1.1rem 2.5rem; line-height: 1.5;
}
h1 { font-size: 1.6rem; margin: .2rem 0; color: #f3f5f7; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; color: var(--accent); border-bottom: 2px solid rgba(147,194,77,.4);
     padding-bottom: .25rem; margin: 0 0 .7rem; letter-spacing: .01em; }
input, select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
                border-radius: 5px; padding: 6px; font: inherit; }
input::placeholder { color: #6b7681; }

/* ---- survey ---- */
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 1rem; padding: .7rem .9rem; background: var(--panel); }
legend { font-weight: 600; padding: 0 .3rem; color: #f0f2f4; }
.covers { color: var(--muted); font-size: .85rem; }
.scorebtns, .budgetbtns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: .4rem; }
.scorebtns button, .budgetbtns button {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2); color: var(--ink); cursor: pointer; font-size: .9rem;
}
.scorebtns button[aria-pressed="true"], .budgetbtns button[aria-pressed="true"] {
  outline: 2px solid var(--accent); border-color: var(--accent); background: rgba(147,194,77,.16); font-weight: 700;
}
.score-def { font-size: .85rem; color: var(--muted); margin-top: .4rem; min-height: 1.1em; }
#survey-view .brand { letter-spacing: .15em; font-size: .75rem; color: var(--accent); font-weight: 700; }
.return-banner { background: rgba(147,194,77,.12); border: 1px solid var(--accent); border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; font-size: .92rem; }
.return-actions { margin-top: .55rem; display: flex; gap: 6px; flex-wrap: wrap; }

/* per-domain context boxes, placed after the buttons; colored by type (hazard pink, assumption green) */
.context-box { border-radius: 6px; padding: .5rem .7rem; margin: .5rem 0 0; font-size: .88rem; border-left: 4px solid; }
.context-box.assume { background: rgba(123,161,71,.13); border-left-color: var(--hunter-light); color: #cfe0b6; }
.context-box.hazard { background: rgba(230,57,70,.13); border-left-color: #E63946; color: #f0c5c8; font-weight: 600; }
.ctx-field { display: inline-block; margin-top: .4rem; }
.ctx-field input { width: 6rem; }
.ctx-insul { color: var(--muted); font-size: .82rem; margin-top: .3rem; }

/* deep-dive expanders */
.deepdive { margin-top: .7rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
.deepdive > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .9rem; }
.dd-item { margin: .7rem 0; }
.dd-q { font-size: .9rem; font-weight: 600; margin-bottom: .3rem; color: #eef0f2; }
.dd-q.dd-sub { font-weight: 500; color: var(--muted); margin-top: .3rem; }
.dd-zone { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.dd-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.dd-opt { padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2);
          color: var(--ink); cursor: pointer; font: inherit; font-size: .85rem; }
.dd-opt[aria-pressed="true"] { outline: 2px solid var(--accent); border-color: var(--accent); background: rgba(147,194,77,.16); font-weight: 600; }
.dd-secondary, .dd-indent { margin-left: 1rem; padding-left: .6rem; border-left: 2px solid var(--line); }
.dd-indent { margin-top: .2rem; }
.dd-fuel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 5px 0; }
.dd-fuel-name { flex: 0 0 5.5rem; font-size: .85rem; font-weight: 600; }
.dd-inline-label { font-size: .8rem; color: var(--muted); align-self: center; }
.dd-fire-only { display: none; }

/* intro */
.intro { font-size: .95rem; color: #c7cdd3; }
.intro p { margin: .55rem 0; }

/* preamble */
.preamble label { display: inline-block; margin: .3rem .6rem .3rem 0; }
.preamble input[type="number"] { width: 5rem; }
.household { margin-top: .4rem; }
.prepop-context { font-size: .85rem; margin: .5rem 0; padding: .5rem .65rem; border-radius: 6px; }
.prepop-context.found   { background: rgba(123,161,71,.13); border-left: 4px solid var(--hunter-light); color: #cfe0b6; }
.prepop-context.missing { background: rgba(230,57,70,.12); border-left: 4px solid #E63946; color: #f0bcc0; }
.prepop-context.invalid { background: rgba(139,26,26,.22); border-left: 4px solid #c0392b; color: #f1b6b6; font-weight: 600; }

/* concern pick-and-rank */
.concern-counter { font-weight: 600; margin: .4rem 0; color: var(--accent); }
.concern-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.concern-card { text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
                background: var(--panel-2); color: var(--ink); cursor: pointer; font: inherit; }
.concern-card[aria-pressed="true"] { outline: 2px solid var(--accent); border-color: var(--accent); background: rgba(147,194,77,.16); }
.concern-card:disabled { opacity: .4; cursor: not-allowed; }
.concern-card-label { font-weight: 600; margin-bottom: 2px; }
.concern-ranks { margin-top: .8rem; }
.concern-rank-head { font-weight: 600; margin-bottom: .4rem; }
.rank-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; flex-wrap: wrap; }
.rank-label { flex: 1 1 9rem; }
.rank-btns button { width: 2.1rem; padding: 6px 0; margin-right: 3px; border: 1px solid var(--line);
                    border-radius: 5px; background: var(--panel-2); color: var(--ink); cursor: pointer; font: inherit; }
.rank-btns button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #11160a; font-weight: 700; }
@media (max-width: 480px) { .concern-cards { grid-template-columns: 1fr; } }
.err { color: #ff8a8a; font-weight: 700; }
#go { background: var(--accent); color: #11160a; border: none; padding: 12px 22px; border-radius: 7px;
      font-size: 1rem; font-weight: 700; cursor: pointer; }

/* ---- report ---- */
.report-header { border-bottom: 3px solid var(--accent); padding-bottom: .7rem; margin-bottom: 1rem; }
.brand { letter-spacing: .15em; font-size: .75rem; color: var(--accent); font-weight: 700; }
.report-meta { color: var(--muted); font-size: .9rem; }
.report-section { margin: 1.4rem 0; }
.summary-text { font-size: 1.05rem; color: #dde1e5; }

/* Overall score — the focal point. */
.overall-score { margin: 1.2rem 0 1.6rem; text-align: center; }
.score-caption { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--muted); }
.score-value { display: flex; align-items: baseline; justify-content: center; gap: .7rem; margin-top: .25rem; flex-wrap: wrap; }
.score-pct { font-size: 4rem; font-weight: 800; line-height: 1; color: var(--ink); }
.score-grade { font-size: 1.15rem; font-weight: 700; padding: 5px 16px; border-radius: 999px; }

.wheel { width: 100%; max-width: 380px; display: block; margin: .2rem auto; }
.wheel-label { font-size: 11px; fill: var(--muted); }
.wheel-scale { font-size: 10px; fill: #cdd3d8; font-weight: 600; }

.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 9rem 1fr 7rem; align-items: center; gap: 8px; font-size: .9rem; }
.bar-name { color: var(--ink); }
.bar-track { background: var(--panel-2); border-radius: 4px; height: 18px; overflow: hidden; }
.bar-fill { height: 100%; }
.bar-band { color: var(--muted); }

/* hazard context = pink/red (convention: hazards pink, assumptions green) */
.region-intro { background: rgba(230,57,70,.13); border-left: 4px solid #E63946; padding: .55rem .75rem;
                border-radius: 6px; margin: 0 0 .7rem; color: #f0c5c8; }
.region-intro strong { color: #f6dadc; }
.project-affirm { margin-top: .35rem; font-size: .85rem; color: var(--accent); font-weight: 600; }
.estimate-note { color: var(--muted); font-size: .8rem; font-style: italic; margin: 0 0 .4rem; }
.estimates { margin: 0; padding-left: 1.1rem; }
.estimates li { margin-bottom: .5rem; }
.estimate-pending { color: var(--muted); }

.align-block { margin-bottom: .7rem; }
.align-concern { font-weight: 600; color: #eef0f2; }
.align-systems { color: var(--muted); font-size: .9rem; }

.projects-framing { color: var(--muted); font-size: .9rem; }
.project { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 7px;
           background: var(--panel); padding: .7rem .9rem; margin-bottom: .7rem; }
.project-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.project-num { background: var(--accent); color: #11160a; border-radius: 50%; width: 1.55rem; height: 1.55rem;
               display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.project-action { font-weight: 700; color: #f0f2f4; }
.project-domain { color: var(--accent); font-size: .8rem; border: 1px solid rgba(147,194,77,.5); border-radius: 10px; padding: 1px 8px; }
.project-meta { color: var(--muted); font-size: .85rem; margin-top: .3rem; }

.report-footer { text-align: center; color: var(--accent); font-weight: 600; border-top: 1px solid var(--line);
                 margin-top: 1.6rem; padding-top: .7rem; letter-spacing: .03em; }
.report-credits { color: var(--muted); font-weight: 400; font-size: .72rem; letter-spacing: 0; margin-top: .3rem; }
.whats-next p { margin: .4rem 0; }
.whats-next a, .summary-text a, .align-systems a { color: var(--accent); }
body.print-export .whats-next a, body.print-export .report-credits { color: #2D5016; }
body.print-export .report-credits { color: #777; }
body.print-export .score-grade { border: 1px solid rgba(0,0,0,.18); }   /* definition for the pale lime pill on white */

/* email-as-offer + download actions */
.report-actions .action-btn { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
                              padding: 10px 16px; border-radius: 7px; font: inherit; font-weight: 600; cursor: pointer; }
.report-actions .action-btn.primary { background: var(--accent); color: #11160a; border-color: var(--accent); }
.report-actions .action-btn:disabled { opacity: .55; cursor: default; }
.email-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: .6rem; }
.email-input { flex: 1 1 12rem; min-width: 10rem; }
.optin { display: block; font-size: .8rem; color: var(--muted); margin-top: .5rem; }
.email-msg { margin-top: .5rem; font-size: .9rem; min-height: 1.1em; }
.email-msg.ok { color: var(--accent); }
.email-msg.err { color: #ff8a8a; }

/* ---- light, print-friendly export (applied via body.print-export only while printing) ---- */
body.print-export { background: #fff; color: #1a1a1a; }
body.print-export #survey-view, body.print-export .report-actions { display: none !important; }
body.print-export h1 { color: #111; }
body.print-export h2 { color: #2D5016; border-bottom-color: #7BA147; }
body.print-export .brand, body.print-export .report-footer, body.print-export .project-affirm { color: #2D5016; }
body.print-export .report-header { border-bottom-color: #2D5016; }
body.print-export .report-meta, body.print-export .score-caption, body.print-export .estimate-note,
body.print-export .projects-framing, body.print-export .align-systems, body.print-export .project-meta,
body.print-export .bar-band { color: #555; }
body.print-export .summary-text, body.print-export .align-concern, body.print-export .project-action,
body.print-export .estimates li, body.print-export legend { color: #1a1a1a; }
body.print-export .score-pct { color: #1a1a1a !important; }   /* always readable; the pill carries the color */
body.print-export .project { background: #fff; border-color: #ccc; border-left-color: #2D5016; }
body.print-export .project-num { background: #2D5016; color: #fff; }
body.print-export .project-domain { color: #2D5016; border-color: #7BA147; }
body.print-export .bar-track { background: #e6e6e6; }
body.print-export .bar-name { color: #1a1a1a; }
body.print-export .region-intro { background: #fdf3f3; color: #5e2228; }
body.print-export .region-intro strong { color: #3d1518; }
body.print-export .wheel-ring { stroke: #cfcfcf; }
body.print-export .wheel-chip { fill: #fff; stroke: #aaa; }
body.print-export .wheel-scale { fill: #333; }
body.print-export .wheel-label { fill: #444; }
body.print-export .wheel path { stroke: #fff; }
@media print { body { max-width: none; } #survey-view, .report-actions { display: none !important; } }