/* ==========================================================================
   Staircase Worksheet — styles
   Mobile-first. Reuses the design tokens from the main site without
   copying styles.css wholesale.
   ========================================================================== */

:root {
  --blue: #2563eb;
  --blue-hover: #1d4ed8;
  --heading: #1e293b;
  --body-text: #333;
  --muted: #64748b;
  --muted-2: #666;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --border: #e2e8f0;
  --card-radius: 12px;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --green: #16a34a;
  --amber: #b45309;
  --amber-bg: #fffbeb;
  --red: #b91c1c;
  --red-bg: #fef2f2;
}

* { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--body-text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  color: var(--heading);
  line-height: 1.25;
  margin: 0 0 12px;
}

h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 12px; }

.muted { color: var(--muted); font-weight: 400; font-size: 0.9em; }
.hidden { display: none !important; }

a { color: var(--blue); }

/* ---------------------------------------------------------------------- */
/* Top bar */
/* ---------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
}

.wordmark {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--heading);
  text-decoration: none;
}

.progress-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.progress-step {
  font-family: inherit;
  font-size: 0.78rem;
  padding: 6px 10px;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  cursor: default;
}

.progress-step.completed {
  cursor: pointer;
  color: var(--blue);
  border-color: var(--blue);
  background: #eff6ff;
}

.progress-step.current {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  font-weight: 600;
}

.progress-step:disabled { opacity: 0.6; }

/* ---------------------------------------------------------------------- */
/* Layout / cards */
/* ---------------------------------------------------------------------- */

main#app { display: block; }

.screen { display: none; }
.screen.active { display: block; }

.screen-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 20px;
}

.section-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
  margin-top: 4px;
}

.section-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Footer action row: back on the left, primary action on the right. */
.actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.actions-row:only-child,
.card > .actions-row:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.actions-row .btn-back { order: -1; }
.actions-row > :last-child { margin-left: auto; }

/* ---------------------------------------------------------------------- */
/* Gate screen */
/* ---------------------------------------------------------------------- */

.gate-wrap {
  min-height: calc(100vh - 66px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 24px 16px;
}

.gate-card {
  width: 100%;
  max-width: 420px;
}

.gate-card h1 { font-size: 1.3rem; }

.helper-text {
  font-size: 0.88rem;
  color: var(--muted-2);
  margin: 4px 0 10px;
}

.mock-hint {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mock-badge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------- */
/* Forms */
/* ---------------------------------------------------------------------- */

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--heading);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* prevents iOS zoom */
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: var(--body-text);
}

textarea { min-height: 70px; resize: vertical; }

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

form { display: block; }

/* ---------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
}
.btn-primary:hover { background: var(--blue-hover); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); }
.btn-primary:disabled { background: #94a3b8; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue);
}
.btn-secondary:hover { background: #eff6ff; }
.btn-secondary:disabled { color: #94a3b8; border-color: #cbd5e1; cursor: not-allowed; background: #fff; }

.btn-block { width: 100%; }

.btn-link {
  background: none;
  border: none;
  color: var(--blue);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 2px;
  min-height: 40px;
  text-decoration: underline;
}

.btn-icon-toggle {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 6px 10px;
  min-height: 40px;
  cursor: pointer;
  color: var(--muted-2);
  white-space: nowrap;
}
.btn-icon-toggle.active { background: #fef2f2; border-color: #fca5a5; color: var(--red); }

.btn-icon-delete {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  min-width: 40px;
  min-height: 40px;
}
.btn-icon-delete:hover { color: var(--red); }

/* ---------------------------------------------------------------------- */
/* Alerts */
/* ---------------------------------------------------------------------- */

.alert {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.alert-error { background: var(--red-bg); color: var(--red); border: 1px solid #fecaca; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.alert-inline {
  color: var(--red);
  font-size: 0.85rem;
  margin: 8px 0;
}

/* ---------------------------------------------------------------------- */
/* Intro / radio cards */
/* ---------------------------------------------------------------------- */

.privacy-block {
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: var(--muted-2);
  margin-bottom: 16px;
}

.radio-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.radio-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  position: relative;
}

.radio-card input[type="radio"] {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
}

.radio-card:has(input:checked) {
  border-color: var(--blue);
  background: #eff6ff;
}

.radio-card-title { font-weight: 600; color: var(--heading); padding-right: 28px; }
.radio-card-desc { font-size: 0.88rem; color: var(--muted-2); padding-right: 28px; }

/* ---------------------------------------------------------------------- */
/* Brain dump list */
/* ---------------------------------------------------------------------- */

.add-row-form {
  display: flex;
  gap: 8px;
  margin: 12px 0 18px;
}
.add-row-form input { flex: 1; }
.add-row-form button { flex-shrink: 0; }

.brain-dump-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bd-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-alt);
}

.bd-row.crossed-out { opacity: 0.6; }
.bd-row.crossed-out .bd-text { text-decoration: line-through; color: var(--muted); }

.bd-top-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bd-top-line input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.bd-text {
  flex: 1;
  min-width: 140px;
  border: 1px solid transparent;
  background: transparent;
  padding: 8px 6px;
}
.bd-text:hover, .bd-text:focus { border-color: #cbd5e1; background: #fff; }

.bd-item-text {
  font-weight: 600;
  color: var(--heading);
  font-size: 0.95rem;
}

/* --- Rank screen --- */

.rank-counter {
  font-weight: 600;
  color: var(--heading);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.rank-row .bd-top-line { align-items: center; }

.rank-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--heading);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rank-text { flex: 1; min-width: 140px; }

.rank-row.crossed-out .rank-text { text-decoration: line-through; color: var(--muted); }
.rank-row.crossed-out .rank-num { background: #cbd5e1; }

.rank-divider {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  padding: 10px 4px 4px;
  border-top: 1px dashed #cbd5e1;
  margin-top: 6px;
}

.bd-score-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.inline-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted-2);
  min-width: 130px;
}

.inline-field-head {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.inline-field select,
.inline-field input {
  min-height: 40px;
  padding: 6px 8px;
  font-size: 16px;
}

.bd-num { width: 100%; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.score-badge { background: #eff6ff; color: var(--blue); }

/* ---------------------------------------------------------------------- */
/* Part 2 — checks */
/* ---------------------------------------------------------------------- */

.p2-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.p2-check {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.p2-card > .p2-check:first-of-type { border-top: none; padding-top: 0; }

.p2-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--heading);
  margin-bottom: 8px;
}

.card-score-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  margin-top: -6px;
}

.ai-cta-card { border: 2px solid #ddd6fe; background: #faf9ff; }
.ai-cta-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-cta-head .section-label { margin: 0; }

.ai-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6d28d9;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  padding: 2px 6px;
  align-self: flex-start;
}

/* Modifier for the three risk scores: same tag, but these are guessed
   rather than researched, so it reads as a warning (the same amber pairing
   as .check-indicator.warn) instead of the purple "from AI helper" default. */
.ai-tag.ai-tag-guess {
  color: var(--amber);
  background: var(--amber-bg);
  border-color: var(--amber);
}

.elim-slot:empty { display: none; }

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seg-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: var(--body-text);
  cursor: pointer;
}
.seg-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.p2-hint {
  font-size: 0.82rem;
  color: var(--muted-2);
  margin-top: 6px;
}

.check-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: auto;
}
.check-indicator.pass { background: #ecfdf5; color: var(--green); }
.check-indicator.warn { background: var(--amber-bg); color: var(--amber); }
.check-indicator.neutral { display: none; }

.roi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.roi-grid .inline-field { flex: 1; min-width: 130px; }

.payback-line { font-weight: 500; }

.eliminate-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--amber-bg);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px;
}
.eliminate-note {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--amber);
}
.eliminate-reason { flex: 1; min-width: 160px; }
.eliminate-btn { color: var(--red); white-space: nowrap; }

.p2-eliminated-strip {
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
}
.strip-item-text { font-weight: 600; color: var(--muted-2); text-decoration: line-through; }
.strip-text { flex: 1; font-size: 0.88rem; }

/* ---------------------------------------------------------------------- */
/* Comparison table — the Worksheet Part #2 grid                           */
/* ---------------------------------------------------------------------- */

/* Wide content scrolls inside its own box; the page body never does. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.compare-table th {
  background: var(--heading);
  color: #fff;
  text-align: left;
  font-weight: 600;
  padding: 10px;
  vertical-align: top;
}

.th-sub {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  opacity: 0.75;
  margin-top: 2px;
}

.compare-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare-table tr:last-child td { border-bottom: none; }

.compare-item { font-weight: 500; color: var(--heading); min-width: 180px; }

.cell-pass { color: var(--green); font-weight: 600; }
.cell-warn { color: var(--amber); font-weight: 600; background: var(--amber-bg); }

.compare-eliminated td { background: #f1f5f9; color: var(--muted); }

/* ---------------------------------------------------------------------- */
/* Decision */
/* ---------------------------------------------------------------------- */

.decision-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.decision-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  font-weight: 500;
}
.decision-row:has(input:checked) { border-color: var(--blue); background: #eff6ff; }
.decision-row input { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Done */
/* ---------------------------------------------------------------------- */

.done-hero h1 { font-size: 1.35rem; }

.summary-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 12px;
  margin: 14px 0;
}
.summary-list dt { font-weight: 600; color: var(--heading); font-size: 0.85rem; margin-top: 8px; }
.summary-list dd { margin: 0 0 4px; color: var(--body-text); }

.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 10px 0;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.summary-table th, .summary-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.survey-card { border: 2px solid #bfdbfe; }
.survey-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* A slow halo, not a flash. This is the one ask on the final screen and
   it competes with a finished worksheet the user is pleased with, so it
   needs to catch the eye without behaving like an alert. Applied by
   renderDone() only while the block is actually shown. */
.survey-card.pulse {
  animation: surveyPulse 3.2s ease-in-out infinite;
}

@keyframes surveyPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    border-color: #bfdbfe;
  }
  50% {
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.10);
    border-color: var(--blue);
  }
}

/* An animation that repeats forever is exactly what this setting exists
   to stop. The border colour still lands on the accent so the block
   stays visually distinct without moving. */
@media (prefers-reduced-motion: reduce) {
  .survey-card.pulse {
    animation: none;
    border-color: var(--blue);
  }
}

/* ---------------------------------------------------------------------- */
/* AI assist overlay */
/* ---------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 100;
}

.ai-drawer {
  background: #fff;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  border-radius: 0 0 16px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
}

@media (min-width: 640px) {
  .overlay { align-items: center; }
  .ai-drawer { border-radius: 16px; max-height: 80vh; }
}

.ai-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.ai-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  min-width: 40px;
  min-height: 40px;
}

.ai-drawer-body {
  padding: 18px 16px 24px;
  overflow-y: auto;
}

/* ---------------------------------------------------------------------- */
/* Session info popup: same .overlay backdrop as the AI drawer, but its
   own small centred modal rather than a restyled .ai-drawer, since a
   full-height side panel would be wrong for two short lines of copy.
   Centred on every width (not just >=640px like .overlay's default),
   because there is no bottom-sheet case worth having for content this
   short. */
/* ---------------------------------------------------------------------- */

#session-info-overlay { align-items: center; }

.session-info-modal {
  background: #fff;
  width: 100%;
  max-width: 420px;
  margin: 16px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
}

.session-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.session-info-title { font-weight: 700; color: var(--heading); font-size: 0.95rem; }

.session-info-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  min-width: 40px;
  min-height: 40px;
}

.session-info-body {
  padding: 18px 16px 24px;
}
.session-info-body p { margin: 0 0 12px; }
.session-info-body p:last-child { margin-bottom: 0; }
.session-info-note { font-size: 0.85rem; color: var(--muted-2); }

.ai-privacy-note { font-size: 0.85rem; color: var(--muted-2); }
.ai-runs-left { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.ai-context {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--heading);
  background: var(--bg-alt);
  border-radius: 6px;
  padding: 8px 10px;
}

.ai-q-progress { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ai-question { font-weight: 600; color: var(--heading); font-size: 1rem; }
.ai-answer-input { margin-bottom: 14px; }

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

.ai-thinking {
  font-weight: 600;
  color: var(--muted-2);
}
.ai-thinking::after {
  content: '...';
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

/* One estimate, as labelled lines rather than a paragraph. Three short
   facts run together on one line is what made the old results panel
   read as a wall of text; the label carries the weight and each fact
   gets its own line. Shared with the print view via estimateBlock(). */
.ai-result-block {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.ai-result-block:last-of-type { border-bottom: none; }
.ai-result-label {
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 8px;
  line-height: 1.35;
}
.ai-result-field { margin: 6px 0; line-height: 1.5; }
.ai-result-field-label { color: var(--heading); }
.ai-result-sub {
  margin: 2px 0 2px 12px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}
.ai-caveat {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* The "one way this could work" sketch. Visually set apart from the
   three estimate fields above it, because it is a different kind of
   claim: those fill controls, this is orientation, and it should not
   read as another answer. */
.ai-approach {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border-radius: 8px;
}
.ai-approach-list {
  margin: 6px 0;
  padding-left: 20px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.ai-approach-list li { margin-bottom: 3px; }
.ai-approach-caveat {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.45;
}

/* Sits immediately above the apply button: what gets filled, and what
   the user still owns. Bordered rather than tinted so it reads as
   information about the button, not as a warning. */
.ai-apply-note {
  margin: 14px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
.ai-apply-note div { margin-bottom: 6px; }
.ai-apply-note div:last-child { margin-bottom: 0; }

.ai-drawer-title { font-weight: 700; color: var(--heading); font-size: 0.95rem; }

/* T7: per-item progress list while a run is polling. overflow-wrap keeps
   long item names from forcing horizontal scroll at 360px. */
.ai-progress-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.ai-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.ai-progress-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ai-progress-status { font-size: 0.78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ai-progress-status.ai-progress-searching { color: var(--amber); }
.ai-progress-status.ai-progress-done { color: var(--green); }

/* Movement is the signal that a step is alive. Research and synthesis
   can each take a minute, and a frozen "Researching..." is
   indistinguishable from a hung request -- which is exactly what people
   concluded before this existed.
   Two mechanisms on purpose: the animated ellipsis (a `content`
   animation, which WebKit and Blink honour) plus an opacity pulse on
   the label itself, so the row still moves in engines that decline to
   animate generated content. Only ever applied to in-flight states;
   "Waiting" and "Done" stay still, so motion always means work. */
.ai-progress-status.ai-progress-active {
  animation: statusPulse 1.6s ease-in-out infinite;
}
.ai-progress-status.ai-progress-active::after {
  content: '...';
  display: inline-block;
  width: 1.1em;
  text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-progress-status.ai-progress-active { animation: none; }
  .ai-progress-status.ai-progress-active::after {
    content: '...';
    animation: none;
  }
}

/* The run-level "putting it together" row. Set apart from the per-item
   rows because it is not an item: it is the synthesis call that runs
   after all of them, and the gap it fills is precisely the stretch where
   every item said Done and the drawer looked frozen. */
.ai-progress-summary {
  border-bottom: none;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Example affordances                                                     */
/* One mechanism everywhere: a click-driven popover that only ever shows   */
/* an example. Nothing here writes into a field.                           */
/* ---------------------------------------------------------------------- */

.example-wrap {
  position: relative;
  display: inline-block;
}

/* "How this works" as an icon rather than a text link. There is one of
   these on nearly every field and check heading, and a dozen repeated
   links crowd out the field labels they sit beside. The popover keeps
   the full "How this works" title, so nothing is lost by shrinking the
   trigger; the aria-label and title carry the name, since a glyph is
   not one. Sized to stay a comfortable tap target on touch. */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--blue);
  border-radius: 50%;
  background: transparent;
  color: var(--blue);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  flex: none;
  /* Positioned so the ::after hit area below resolves against this
     button rather than the .example-wrap it sits inside. */
  position: relative;
}
.info-btn:hover, .info-btn:focus-visible {
  background: var(--blue);
  color: #fff;
}
/* The visible circle stays 18px, but the clickable area extends past it
   so this is not a fiddly target on a phone. */
.info-btn::after {
  content: '';
  position: absolute;
  inset: -9px;
}

.example-row { margin: 4px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }

.example-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--body-text);
  white-space: normal;
  text-align: left;
}

.example-pop-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}

/* Read-only worked example on the brain-dump screen. */
.example-panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 0.88rem;
}

.example-panel-title {
  font-weight: 700;
  color: var(--heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.example-panel-list {
  margin: 0 0 10px;
  padding-left: 20px;
}
.example-panel-list li { margin-bottom: 4px; }
.example-panel-list li.struck { text-decoration: line-through; color: var(--muted); }
.example-panel-list li.struck .muted { text-decoration: none; }

/* ---------------------------------------------------------------------- */
/* Toast */
/* ---------------------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--heading);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  z-index: 200;
  box-shadow: var(--card-shadow);
}

/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */

.site-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 40px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer a { color: var(--muted-2); }

/* ---------------------------------------------------------------------- */
/* Desktop refinements */
/* ---------------------------------------------------------------------- */

@media (min-width: 720px) {
  .screen-wrap { padding: 40px 24px 64px; }
  .card { padding: 28px; }
  h1 { font-size: 1.8rem; }
  .radio-cards { flex-direction: row; }
  .radio-card { flex: 1; }
}

/* ---------------------------------------------------------------------- */
/* Intro: phase self-check                                                 */
/* The four methodology questions that place someone on Optimize or Grow.  */
/* Advisory: it never changes the radio, so it is styled as a quiet aside  */
/* rather than as a form the user has to complete.                         */
/* ---------------------------------------------------------------------- */

.phase-check {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0 18px;
}
.phase-check-title {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--heading);
  font-size: 0.92rem;
}
.phase-check-list { display: flex; flex-direction: column; gap: 10px; }
.phase-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  cursor: pointer;
}
.phase-check-row input { margin-top: 3px; flex: none; }
.phase-check-verdict {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.5;
}
.phase-rec-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Used for the Optimize-vs-Grow explanation under the phase picker: the
   one place on the intro screen that has to be read, not skimmed. */
.callout {
  border-left: 3px solid var(--blue);
  background: var(--bg-alt);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 4px 0 18px;
  font-size: 0.9rem;
  line-height: 1.55;
}
.callout p { margin: 0 0 8px; }
.callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------- */
/* Required answers (Step 3 and Step 5)                                    */
/* The two hard blocks in the flow. Styled as "not finished yet" rather    */
/* than as an error: nothing is wrong, there is just work left.            */
/* ---------------------------------------------------------------------- */

.bd-row.row-incomplete {
  border-left: 3px solid var(--amber);
  padding-left: 10px;
  background: var(--amber-bg);
}
.row-missing-note {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--amber);
  margin-top: 2px;
}

.missing-note {
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--amber-bg);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--amber);
}

/* Marks the individual control a "still has unanswered checks" Continue
   press pointed at. Only ever added after that press (see
   markMissingFields()), and cleared field by field as each one is filled
   in, so it never appears on a screen nobody has tried to submit yet. */
.inline-field.field-missing select,
.inline-field.field-missing input {
  border-color: var(--amber);
  outline: 2px solid var(--amber);
  outline-offset: -1px;
  background: var(--amber-bg);
}
.inline-field.field-missing::after {
  content: "Needs an answer";
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--amber);
}

.segmented.field-missing {
  padding: 6px;
  border: 1px dashed var(--amber);
  border-radius: 8px;
  background: var(--amber-bg);
}
.segmented.field-missing::after {
  content: "Needs an answer";
  flex-basis: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--amber);
}

/* Only shown as a capped field approaches its limit -- a permanent
   counter on a two-line goal field reads as a target to fill. */
.char-count {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Sibling of .ai-tag: same job (this value did not come from you), a
   different source. Both are cleared the moment the user types. */
.derived-tag {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--muted);
}
.derived-tag .btn-link { font-size: 0.72rem; }

/* ---------------------------------------------------------------------- */
/* Print view */
/* ---------------------------------------------------------------------- */

#print-view { display: none; }

@media print {
  body * { visibility: hidden; }
  #print-view, #print-view * { visibility: visible; }
  #print-view {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5in;
    color: #000;
  }
  #print-view h1 { font-size: 20pt; margin-bottom: 4pt; }
  #print-view h2 { font-size: 13pt; margin-top: 16pt; page-break-after: avoid; }
  .print-meta { color: #444; font-size: 10pt; margin-bottom: 12pt; }
  .print-section { page-break-inside: avoid; margin-bottom: 10pt; }
  .print-bd-list, .print-elim-list { padding-left: 18pt; font-size: 10.5pt; }
  .print-bd-list li.crossed-out { text-decoration: line-through; color: #777; }
  .print-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .print-table th, .print-table td { border: 1px solid #999; padding: 4pt 6pt; text-align: left; }
  /* AI estimate section. Reuses estimateBlock()'s markup, so the print
     rules only reset what the screen styles assume (colour, borders,
     the drawer's spacing). */
  .print-note { font-size: 9.5pt; color: #444; margin: 4pt 0 8pt; }
  .print-estimate-block {
    margin-bottom: 8pt;
    padding-bottom: 6pt;
    border-bottom: 1px solid #ccc;
    page-break-inside: avoid;
    font-size: 10pt;
  }
  .print-estimate-block .ai-result-label { font-size: 10.5pt; margin-bottom: 3pt; color: #000; }
  .print-estimate-block .ai-result-field { margin: 2pt 0; }
  .print-estimate-block .ai-result-field-label { color: #000; }
  .print-estimate-block .ai-result-sub { margin: 1pt 0 1pt 10pt; font-size: 9pt; color: #444; }
  .print-approach { margin-top: 4pt; }
  .print-approach .ai-approach-list { margin: 2pt 0; padding-left: 16pt; font-size: 9.5pt; }
  .print-approach .ai-approach-caveat { font-size: 8.5pt; color: #555; }
  .print-footer { margin-top: 20pt; font-size: 9pt; color: #555; border-top: 1px solid #999; padding-top: 8pt; }
  @page { size: auto; margin: 0.5in; }
}