/* =========================================================
   De Energie Raadgever — unified front-end design system
   Used by mid_start.html, full_start.html, full_done.html.

   Principles:
   - One brand green top bar style across every card.
   - DM Sans for everything (avoids generic Arial/Inter look).
   - Editorial density. Restrained color use. No pill badges,
     no decorative gradients, no bouncy step indicators.
   - Forms feel quiet but confident. Brand green is for action,
     ownership, and structure — not decoration.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  /* Surfaces */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-card:#f7f7f7;   /* outer card/tile fill — soft neutral grey */
  --surface-muted:#f7f8fa;
  --surface-quiet:#f1f3f6;

  /* Borders */
  --border:#e3e7ec;
  --border-strong:#cdd4dd;

  /* Text */
  --text:#1a1f2a;
  --text-muted:#5b6573;
  --text-subtle:#8b94a3;

  /* Brand — De Energie Raadgever green (#159a5b) */
  --brand:#159a5b;
  --brand-hover:#127f4b;
  --brand-active:#0f6a3f;
  --brand-soft:#e9f7ef;
  --brand-soft-2:#d8f0e2;
  --brand-border:#bce3cd;
  --brand-tint:#0a3d24; /* dark tint for text on soft brand bg */

  /* Semantic */
  --success:#0a7c43;
  --success-soft:#ecf6f0;
  --success-border:#bfe1cd;
  --danger:#a02322;
  --danger-soft:#fbeded;
  --danger-border:#efc6c6;
  --warning:#7a5300;
  --warning-soft:#fbf3df;
  --warning-border:#ecd99a;

  /* Elevation */
  --shadow-sm:0 1px 2px rgba(20,28,40,.04);
  --shadow-md:0 1px 3px rgba(20,28,40,.06), 0 1px 2px rgba(20,28,40,.04);

  /* Shape */
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:12px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body{
  font-feature-settings:"ss01","cv11";
}

a{color:var(--brand-hover)}
a:hover{color:var(--brand-active)}

.hidden{display:none !important}

/* =========================================================
   PAGE WRAPPERS
   ========================================================= */

.appShell{
  max-width:1180px;
  margin:0 auto;
  padding:0;
}

.pageWrap{
  max-width:960px;
  margin:0 auto;
  padding:12px 12px 24px;
}

.pageWrap--wide{max-width:1080px}

.layout{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:14px;
  align-items:start;
}

/* =========================================================
   STACKED LAYOUT — full-width intake on top, report stage
   below it. Used by the redesigned mid_start.html. Replaces
   the older 340px / 1fr two-column layout.
   ========================================================= */

.layoutStacked{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:stretch;
  padding:14px 0;
}

/* Intake card — soft white surface, hairline border, no big green
   header bar. Mirrors the new mid_renderer's visual DNA. */
.intakeCard{
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:18px 20px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.intakeHeader{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.intakeTitle{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.005em;
  display:inline-flex;
  align-items:center;
}
.intakeTitle::before{
  content:"";
  display:inline-block;
  width:3px;
  height:16px;
  background:var(--brand);
  margin-right:10px;
  border-radius:1px;
}
.intakeHelper{
  margin:0;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.5;
  flex:1 1 320px;
  min-width:0;
}

/* Horizontal field row — postal / housenumber / addition / button.
   Grid columns sized so postcode gets enough room (1234AB ≈ 7 chars),
   huisnummer is short, toevoeging is short, button takes its own
   width and aligns with the input row. */
.intakeForm{
  display:grid;
  grid-template-columns: minmax(150px, 1.5fr) minmax(110px, 1fr) minmax(110px, 1fr) auto;
  gap:12px;
  align-items:end;
}

.intakeField{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.intakeField label{
  font-size:12.5px;
  color:var(--text);
  font-weight:600;
  letter-spacing:.005em;
}
.intakeField input{margin:0}

.intakeAction .btn{
  width:auto;
  white-space:nowrap;
  min-width:220px;
}

.intakeFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-top:6px;
  border-top:1px solid var(--hairline-soft, #f1f5f9);
}
.intakeStatus{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
}
.intakeStatusLabel{flex:none}
.intakeStatus .statusPill{
  /* override the .statusCard's default sizing, this is a slimmer pill */
  padding:3px 10px;
  font-size:11.5px;
  letter-spacing:0;
  text-transform:none;
  font-weight:500;
}
.intakeConsent{
  font-size:11.5px;
  color:var(--text-muted);
  line-height:1.5;
  flex:1 1 280px;
  min-width:0;
  text-align:right;
}

/* =========================================================
   CARD + BRAND HEADER BAR — the unifying motif.
   Every page-level container uses this pattern.
   ========================================================= */

.panel,
.wizardIntroCard,
.card{
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.panel{padding:0}

.card{padding:0;margin-top:14px}
.card:first-of-type{margin-top:0}

.panelTitleBar,
.wizardTitleBar,
.cardTitleBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 18px;
  background:var(--brand);
  color:#fff;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.005em;
  line-height:1.3;
  min-height:46px;
  border:none;
  border-radius:0;
  margin:0;
}

.cardTitleBar .titleNum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  font-size:12px;
  font-weight:600;
  margin-right:10px;
  flex:none;
}

.cardTitleBar a,
.panelTitleBar a{
  color:#fff;
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:1px;
  opacity:.95;
  transition:opacity .15s ease;
}
.cardTitleBar a:hover,
.panelTitleBar a:hover{opacity:1;border-bottom-color:#fff}

.panelBody,
.cardBody{
  padding:18px 18px 18px;
}

.cardBody--tight{padding:14px 18px}

/* =========================================================
   PAGE HEADER (full_start, full_done)
   A larger brand bar at the top of the page with white logo
   and white title.
   ========================================================= */

.pageHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:18px 22px;
  background:var(--brand);
  color:#fff;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}

.pageHeaderText{flex:1 1 320px;min-width:0}

.pageHeader h1{
  margin:0;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.25;
  color:#fff;
}

.pageHeader p.lead{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.55;
  color:rgba(255,255,255,.92);
  max-width:62ch;
}

.pageHeaderSide{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.pageHeader .brandLogo{
  display:block;
  width:54px;
  height:54px;
  object-fit:contain;
  background:#fff;
  border-radius:8px;
  padding:5px;
}

.pageHeader .backLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.55);
  border-radius:8px;
  padding:7px 12px;
  color:#fff;
  font-weight:500;
  font-size:13px;
  background:transparent;
  transition:background .15s ease,border-color .15s ease;
}
.pageHeader .backLink:hover{
  background:rgba(255,255,255,.1);
  border-color:#fff;
}

.pageBody{
  background:var(--surface-card);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:18px 22px 22px;
  box-shadow:var(--shadow-sm);
}

/* Cards inside pageBody don't need their own outer border */
.pageBody .card{box-shadow:none}

/* =========================================================
   FORM PRIMITIVES — used everywhere
   ========================================================= */

.form{margin:0}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

label,
.fieldLabel{
  font-size:13px;
  color:var(--text);
  font-weight:600;
  letter-spacing:0;
  line-height:1.35;
}

label .req,
.wizardField label span{color:var(--brand);font-weight:600}

input, select, textarea{
  width:100%;
  height:40px;
  padding:0 12px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  font:inherit;
  font-size:14px;
  outline:none;
  background:var(--surface);
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow:none;
}

textarea{
  height:auto;
  min-height:100px;
  padding:10px 12px;
  line-height:1.55;
}

select{
  padding-right:34px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235b6573' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  cursor:pointer;
}

input::placeholder,
textarea::placeholder{color:var(--text-subtle)}

input:focus, select:focus, textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}

.fieldRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.fieldRow .field{margin-bottom:0}
.fieldRowCompact{
  grid-template-columns:minmax(96px, .85fr) minmax(0, 1.15fr);
}

.grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.grid .full{grid-column:1/-1}

.summary-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}

.helper{
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-muted);
}

.muted{color:var(--text-muted)}

.err{
  color:var(--danger);
  font-size:12.5px;
  line-height:1.45;
  margin-top:6px;
  font-weight:500;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:var(--brand);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
  white-space:nowrap;
  box-shadow:none;
  margin-top:0;
}

.btn:hover:not(:disabled),
button:hover:not(:disabled){background:var(--brand-hover)}
.btn:active:not(:disabled),
button:active:not(:disabled){transform:translateY(1px)}
.btn:focus-visible,
button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-soft)}

.btn.primary,
button.primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

.btn.secondary,
.btn.ghost,
button.secondary{
  background:var(--surface);
  color:var(--text);
  border-color:var(--border-strong);
}
.btn.secondary:hover:not(:disabled),
.btn.ghost:hover:not(:disabled),
button.secondary:hover:not(:disabled){
  background:var(--surface-muted);
  border-color:#bcc4cf;
  color:var(--text);
}

.btn:disabled,
button:disabled{opacity:.5;cursor:not-allowed}

.btn.btnArrow::after{
  content:"→";
  font-size:15px;
  margin-left:2px;
  transition:transform .15s ease;
}
.btn.btnArrow:hover:not(:disabled)::after{transform:translateX(2px)}

.actions{
  display:flex;
  gap:8px;
  margin-top:14px;
}
.actions .btn{width:100%}

.step-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:14px;
}

.btnSpinner{
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  display:none;
  flex:none;
}
.btn.isLoading .btnSpinner{display:inline-block;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   STATUS — quiet inline indicator (no pill badges).
   A 6px dot + text. Reads as content, not as a UI badge.
   ========================================================= */

.statusCard{
  margin-top:14px;
  border:none;
  border-top:1px solid var(--border);
  padding:10px 0 0;
  background:transparent;
}

.statusTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.statusTitle{
  font-size:11.5px;
  color:var(--text-muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.statusPill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--text-muted);
  font-weight:500;
  line-height:1.3;
}
.statusPill::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--text-subtle);
  flex:none;
}
.statusPill.idle::before{background:var(--text-subtle)}
.statusPill.loading{color:var(--brand-hover)}
.statusPill.loading::before{
  background:var(--brand);
  animation:pulse 1.4s ease-in-out infinite;
}
.statusPill.ok{color:var(--success)}
.statusPill.ok::before{background:var(--success)}
.statusPill.error{color:var(--danger)}
.statusPill.error::before{background:var(--danger)}

@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

.errorBox{
  margin-top:10px;
  padding:10px 12px;
  border-radius:var(--radius);
  border:1px solid var(--danger-border);
  background:var(--danger-soft);
  color:#7a1818;
  font-size:13px;
  line-height:1.5;
}

/* =========================================================
   FEEDBACK BOX (full_start.html)
   ========================================================= */

.feedback{
  display:none;
  margin-bottom:14px;
  border-radius:var(--radius);
  padding:11px 14px;
  font-size:13.5px;
  line-height:1.55;
  border:1px solid var(--border);
  background:var(--surface-muted);
  color:var(--text);
}
.feedback.show{display:block}
.feedback.info{background:var(--surface-muted);border-color:var(--border);color:var(--text)}
.feedback.error{background:var(--danger-soft);border-color:var(--danger-border);color:#7a1818}
.feedback.ok{background:var(--success-soft);border-color:var(--success-border);color:#06532e}

/* =========================================================
   SUMMARY ITEMS (full_start handoff card)
   ========================================================= */

.summaryItem{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px;
  background:var(--surface);
}
.summaryLabel{
  font-size:11px;
  color:var(--text-muted);
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.summaryValue{
  font-weight:500;
  font-size:13.5px;
  line-height:1.5;
  color:var(--text);
}

/* =========================================================
   TERMS BOX
   ========================================================= */

.terms{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-muted);
}
.terms label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:400;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text);
}
.terms input[type="checkbox"]{
  margin-top:3px;
  width:16px;
  height:16px;
  flex:none;
  accent-color:var(--brand);
}
.terms a{color:var(--brand-hover);font-weight:600}
.termsSub{
  display:block;
  margin-top:4px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-muted);
}

/* =========================================================
   REPORT STAGE — right-hand area on mid_start.html
   ========================================================= */

.reportStage{
  position:relative;
  min-height:340px;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
}

.reportPreview,
.validationStage{
  padding:0;
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  font-family:inherit;
}

/* =========================================================
   VALIDATION PANEL — the new, compact, single-pane wizard.
   Three visual sections, no big stepper, no big numbered
   bubbles. Editorial section dividers instead.
   ========================================================= */

.wizardShell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Address strip — quiet header above the validation panel */
.wizardAddressBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-card);
  box-shadow:var(--shadow-sm);
}

.wizardAddressLabel{
  font-size:11px;
  color:var(--text-muted);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.wizardAddressValue{
  font-size:14px;
  color:var(--text);
  font-weight:600;
  text-align:right;
  line-height:1.4;
  flex:1;
  min-width:0;
}

.wizardAddressEdit{
  font-size:12.5px;
  color:var(--text-muted);
  text-decoration:none;
  border:none;
  background:transparent;
  cursor:pointer;
  font-weight:500;
  padding:4px 0;
  height:auto;
  white-space:nowrap;
  letter-spacing:0;
}
.wizardAddressEdit:hover{color:var(--brand-hover);background:transparent}

/* The validation card itself */
.wizardBody{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:0;
  background:var(--surface-card);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.wizardSection{
  padding:16px 18px;
  border-top:1px solid var(--border);
}
.wizardSection:first-child{border-top:none}

.wizardSectionHeader{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 12px;
}

.wizardSectionTitle{
  margin:0;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.005em;
}

.wizardSectionTitle::before{
  content:"";
  display:inline-block;
  width:3px;
  height:13px;
  background:var(--brand);
  margin-right:9px;
  vertical-align:-2px;
  border-radius:1px;
}

.wizardSectionMeta{
  font-size:12px;
  color:var(--text-muted);
  font-weight:500;
}

.wizardSectionHelp{
  margin:0 0 12px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-muted);
}

.wizardGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.wizardField{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.wizardField label{
  font-size:12.5px;
  color:var(--text);
  font-weight:600;
}

.wizardField.hasError input,
.wizardField.hasError select{
  border-color:var(--danger);
  box-shadow:0 0 0 3px var(--danger-soft);
}

.wizardHelp{
  font-size:11.5px;
  color:var(--text-muted);
  line-height:1.45;
}

.wizardError{
  font-size:11.5px;
  color:var(--danger);
  font-weight:500;
}

.wizardFieldFull{grid-column:1 / -1}

.wizardFieldHeaderCompact{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.wizardFieldMeta{
  font-size:11.5px;
  color:var(--text-muted);
  font-weight:500;
}

/* Compact 3-column checkbox grid */
.checkboxGrid,
.checkbox-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:2px;
}

.measureCard,
.checkbox-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  font-weight:400;
  font-size:13px;
}

.measureCard:hover{
  border-color:#aab2bd;
  background:var(--surface-muted);
}

.measureCard.isSelected{
  border-color:var(--brand);
  background:var(--brand-soft);
}

.measureInput,
.checkbox-item input[type="checkbox"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  appearance:none !important;
}

.measureControl{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:4px;
  border:1.5px solid var(--border-strong) !important;
  background:var(--surface) !important;
  flex:none;
  overflow:hidden;
  transition:background .15s ease, border-color .15s ease;
}
.measureControl::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:4px;
  height:8px;
  border:solid #fff !important;
  border-width:0 2px 2px 0 !important;
  opacity:0;
  transform:rotate(45deg);
  transition:opacity .15s ease;
}
.measureCard.isSelected .measureControl,
.measureInput:checked + .measureControl{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
}
.measureCard.isSelected .measureControl::after,
.measureInput:checked + .measureControl::after{opacity:1}
.measureControlTick{display:none}

.measureLabel{
  color:var(--text) !important;
  font-size:13px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:0;
}

.measureInput:focus-visible + .measureControl{
  box-shadow:0 0 0 3px var(--brand-soft);
}

/* Footer of validation panel */
.wizardFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 18px;
  background:var(--surface-muted);
  border-top:1px solid var(--border);
}

.wizardFooterNote{
  font-size:12px;
  color:var(--text-muted);
  line-height:1.45;
  flex:1;
  min-width:0;
}

.wizardFooterRight{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
}

/* =========================================================
   EMPTY STATE — quieter, no pill icon
   ========================================================= */

.emptyState{
  position:absolute;
  inset:0;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:transparent;
  border-radius:0;
}

.emptyIcon{
  width:34px;
  height:34px;
  border-radius:8px;
  background:var(--surface-muted);
  border:1px solid var(--border);
  position:relative;
  flex:none;
}
.emptyIcon::before{
  content:"";
  position:absolute;
  left:9px;
  top:14px;
  width:16px;
  height:2px;
  background:var(--brand);
}
.emptyIcon::after{
  content:"";
  position:absolute;
  left:9px;
  top:20px;
  width:10px;
  height:2px;
  background:var(--brand-border);
}

.emptyText{max-width:420px}
.emptyTitle{
  font-weight:700;
  color:var(--text);
  font-size:15px;
  line-height:1.35;
}
.emptySub{
  font-size:13px;
  line-height:1.55;
  color:var(--text-muted);
  margin-top:3px;
}

/* =========================================================
   ORDER-STATUS TIMELINE (full_done.html)
   ========================================================= */

.orderStatusBox{
  margin-top:0;
  padding:18px 20px;
}

.orderStatusTag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.005em;
  color:var(--text-muted);
  padding:0;
  background:transparent;
  border:none;
}
.orderStatusTag::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--text-subtle);
  flex:none;
}
.orderStatusTag.processing{color:var(--brand-hover)}
.orderStatusTag.processing::before{
  background:var(--brand);
  animation:pulse 1.4s ease-in-out infinite;
}
.orderStatusTag.success{color:var(--success)}
.orderStatusTag.success::before{background:var(--success)}
.orderStatusTag.error{color:var(--danger)}
.orderStatusTag.error::before{background:var(--danger)}

.orderStatusHeadline{
  margin:10px 0 4px;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--text);
  line-height:1.35;
}
.orderStatusSubline{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-muted);
}

.timeline{
  margin-top:18px;
  display:grid;
  gap:14px;
}
.step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  position:relative;
}
.step + .step{padding-top:0}
.timeline .step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:6.5px;
  top:18px;
  bottom:-14px;
  width:1px;
  background:var(--border);
}
.timeline .step.done:not(:last-child)::before{background:var(--success-border)}
.timeline .step.error:not(:last-child)::before{background:var(--danger-border)}

.dot{
  width:14px;
  height:14px;
  border-radius:50%;
  flex:none;
  margin-top:4px;
  background:var(--surface);
  border:2px solid var(--border-strong);
  position:relative;
  z-index:1;
}
.step.done .dot{
  background:var(--success);
  border-color:var(--success);
}
.step.current .dot{
  background:var(--surface);
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.step.error .dot{
  background:var(--danger);
  border-color:var(--danger);
}

.stepTitle{
  font-weight:600;
  font-size:14px;
  color:var(--text);
  margin-bottom:2px;
  line-height:1.4;
}
.stepText{
  font-size:13px;
  line-height:1.55;
  color:var(--text-muted);
}

.note{
  margin-top:16px;
  padding:11px 14px;
  border-radius:var(--radius);
  background:var(--surface-muted);
  border:1px solid var(--border);
  font-size:13px;
  line-height:1.55;
  color:var(--text);
}
.note.note--error{
  background:var(--danger-soft);
  border-color:var(--danger-border);
  color:#7a1818;
}
.note .errorDetail{
  margin-top:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  white-space:pre-wrap;
  color:#5a1212;
}

.wizardSummaryCard{
  grid-column:1 / -1;
  padding:11px 13px;
  border:1px solid var(--brand-border);
  border-radius:var(--radius);
  background:var(--brand-soft);
}
.wizardSummaryTitle{
  font-weight:700;
  font-size:12.5px;
  color:var(--brand-tint);
  line-height:1.35;
}
.wizardSummaryText{
  margin-top:3px;
  font-size:12px;
  color:var(--text-muted);
  line-height:1.5;
}

.footer{
  margin-top:18px;
  text-align:center;
  font-size:12px;
  color:var(--text-muted);
}

/* Override stray inline gray text colors that exist in HTML */
[style*="color:#64748b"],
[style*="color: #64748b"]{color:var(--text-muted) !important}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px){
  .layout{grid-template-columns:1fr;gap:10px}

  /* Stacked-layout responsive: keep vertical flow but stack the
     intake form fields. The button gets its own row at full width. */
  .layoutStacked{padding:10px 0;gap:10px}
  .intakeCard{padding:14px 16px 14px}
  .intakeForm{
    grid-template-columns:1fr;
    gap:10px;
  }
  .intakeAction .btn{width:100%;min-width:0}
  .intakeFooter{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  /* On mobile the footer is a column flexbox. The consent text has
     flex:1 1 280px in the desktop rule, which causes flex-grow:1 in
     a column flexbox to stretch the element vertically to fill any
     available height. We don't want that — the consent should size
     to its content. */
  .intakeStatus,
  .intakeConsent{flex:0 0 auto}
  .intakeConsent{text-align:left}

  /* Drop the desktop-only 340px min-height on mobile. It made the
     intake page look like there was an empty card below the form
     when the user hadn't searched yet. The empty state still shows
     in the natural document flow without needing reserved space. */
  .reportStage{min-height:0}
  .emptyState{
    position:static;
    inset:auto;
    padding:32px 16px;
  }

  /* Login screen — make the submit button stretch full width on
     mobile so it's tap-friendly and matches the rest of the
     mobile-form pattern. */
  .loginShell .btn{width:100%}

  .panelTitleBar,
  .wizardTitleBar,
  .cardTitleBar{
    padding:11px 14px;
    font-size:14px;
    min-height:44px;
  }

  .panelBody,
  .cardBody{padding:14px}

  .pageHeader{padding:14px 16px}
  .pageHeader h1{font-size:20px}
  .pageHeader .brandLogo{width:46px;height:46px}
  .pageBody{padding:14px 16px 18px}

  .wizardGrid{grid-template-columns:1fr;gap:11px}
  .checkboxGrid,
  .checkbox-grid{grid-template-columns:1fr 1fr;gap:7px}

  .summary-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}

  .wizardAddressBar{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:10px 12px;
  }
  .wizardAddressValue{text-align:left;font-size:13.5px}

  .wizardSection{padding:13px 14px}
  .wizardFooter{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px 14px;
  }
  .wizardFooterNote{order:2}
  .wizardFooterRight{order:1;flex-direction:column;gap:8px}
  .wizardFooterRight .btn{width:100%}

  .emptyTitle{font-size:14px}
  .emptySub{font-size:12px}
}

@media (max-width: 640px){
  .appShell{padding:0 8px 10px}
  .pageWrap{padding:8px 8px 18px}
  .layout{gap:8px}

  .panelBody,
  .cardBody{padding:12px}
  .pageBody{padding:12px 14px 16px}

  /* Prevent iOS zoom on focus */
  input, select, textarea{font-size:16px;height:42px}
  .btn,
  button{height:42px;font-size:14px}

  .checkboxGrid,
  .checkbox-grid{grid-template-columns:1fr}

  /* Tighten server-rendered report inner padding on phones */
  .reportPreview div[style*="padding:12px 14px"]{padding:10px 12px !important}
  .reportPreview div[style*="padding:14px"]{padding:12px !important}
  .reportPreview div[style*="font-size:20px"]{font-size:17px !important}
  .reportPreview div[style*="font-size:16px"]{font-size:15px !important}
}

/* ============================================================
   Contact modal — used on mid_start (inside iframe), full_start,
   full_done. Markup in public/assets/_contact_modal_snippet.html,
   logic in public/assets/contact_modal.js.
   ============================================================ */

body.modal-open{overflow:hidden}

.contactModal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
}
.contactModal.is-open{display:block}

.contactModal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
}

.contactModal__dialog{
  position:relative;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:0 20px 50px rgba(15,23,42,.25);
  max-width:560px;
  width:calc(100% - 28px);
  margin:6vh auto;
  padding:22px 22px 18px;
  max-height:calc(100vh - 12vh);
  overflow:auto;
}

.contactModal__close{
  position:absolute;
  top:8px;
  right:10px;
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  font-size:26px;
  line-height:1;
  color:var(--ink-muted);
  cursor:pointer;
  border-radius:8px;
}
.contactModal__close:hover{background:var(--surface-quiet);color:var(--ink)}

.contactModal__title{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
  color:var(--ink);
}
.contactModal__lead{
  margin:0 0 14px;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.5;
}

.contactModal__sectionLabel{
  margin:6px 0 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-muted);
  text-transform:uppercase;
}

.contactModal__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 12px;
  margin-bottom:10px;
}
@media (max-width:520px){
  .contactModal__grid{grid-template-columns:1fr}
}

.contactModal__field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:var(--ink);
  position:relative;
}
.contactModal__field--full{margin-bottom:10px}
.contactModal__field > span{font-weight:600;font-size:13px}
.contactModal__req{color:var(--brand,#e02227);margin-left:2px}
.contactModal__hint{font-weight:400;color:var(--ink-muted);font-size:12px}

.contactModal__field input,
.contactModal__field textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font:inherit;
  color:var(--ink);
  background:#fff;
  box-sizing:border-box;
}
.contactModal__field input:focus,
.contactModal__field textarea:focus{
  outline:0;
  border-color:var(--brand,#e02227);
  box-shadow:0 0 0 3px rgba(224,34,39,.15);
}
.contactModal__field textarea{resize:vertical;min-height:96px}

.contactModal__counter{
  position:absolute;
  right:6px;
  bottom:-18px;
  font-size:11px;
  color:var(--ink-muted);
}

.contactModal__honeypot{
  position:absolute !important;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
}

.contactModal__feedback{
  margin-top:14px;
  padding:9px 11px;
  border-radius:var(--radius);
  font-size:13px;
  line-height:1.4;
}
.contactModal__feedback--error{
  background:#fdecec;
  color:#8a1f23;
  border:1px solid #f5c2c2;
}
.contactModal__feedback--ok{
  background:#e8f6ee;
  color:#185e2f;
  border:1px solid #b8e3c6;
}

.contactModal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}
.contactModal__actions .btnSecondary{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--border);
}
.contactModal__actions .btnSecondary:hover{background:var(--surface-quiet)}

/* ----- CTA card variant used at the bottom of mid_report and on
        the full pages. Renders as a soft accent card with a button. ----- */
.contactCta{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.contactCta__text{flex:1 1 260px;min-width:0}
.contactCta__title{margin:0 0 2px;font-size:15px;font-weight:700;color:var(--ink)}
.contactCta__sub{margin:0;font-size:13px;color:var(--ink-muted);line-height:1.45}
.contactCta .btn{white-space:nowrap}