@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Source+Sans+3:wght@400;500;600;650;700&display=swap");

:root {
  --bg: #eef4fb;
  --bg-soft: #e3eef9;
  --paper: #ffffff;
  --ink: #142033;
  --muted: #5a6b7d;
  --line: #d0dde9;
  /* Palette: cyan → cerulean → sky (primary) → deep → ink-blue */
  --cyan: #00fff3;
  --cerulean: #00bbd1;
  --sky: #007dff;
  --sky-deep: #005fc4;
  --blue-deep: #1000ff;
  --blue-ink: #0200b9;
  /* Legacy aliases → sky blue system */
  --navy: var(--sky);
  --navy-deep: var(--sky-deep);
  --accent: var(--sky);
  --accent-soft: #e8f2ff;
  --highlight: #d4ebff;
  --ok: #1f6b4a;
  --ok-soft: #e8f5ef;
  --ok-line: #b7d4c5;
  --ok-rgb: 31, 107, 74;
  --bad: #b42318;
  --bad-soft: #fdecea;
  --bad-line: #f0b4ae;
  --bad-rgb: 180, 35, 24;
  --warn: #9a6700;
  --warn-soft: #fff4da;
  --warn-line: #e6cf94;
  --warn-rgb: 154, 103, 0;
  --shadow: 0 1px 2px rgba(0, 85, 170, 0.06), 0 8px 24px rgba(0, 90, 180, 0.07);
  --shadow-sm: 0 1px 2px rgba(0, 85, 170, 0.06);
  --shadow-lg: 0 2px 6px rgba(0, 70, 150, 0.07), 0 18px 40px rgba(0, 90, 180, 0.12);
  --ring: 0 0 0 3px rgba(0, 125, 255, 0.16);
  --btn-grad: linear-gradient(180deg, #2a90ff 0%, var(--sky) 55%, var(--sky-deep) 100%);
  --btn-grad-hover: linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 100%);
  --btn-shadow: 0 1px 2px rgba(0, 60, 140, 0.2), 0 4px 12px rgba(0, 125, 255, 0.2);
  --btn-shadow-hover: 0 3px 6px rgba(0, 60, 140, 0.22), 0 10px 22px rgba(0, 125, 255, 0.28);
  --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }

/* Author display rules must not override HTML hidden */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  background:
    radial-gradient(1200px 500px at 10% -10%, #dce6f1 0%, transparent 55%),
    radial-gradient(900px 420px at 100% 0%, #e4ebe4 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-soft), var(--bg) 40%, #f7f8fa);
  background-attachment: fixed;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px clamp(16px, 3.5vw, 44px) 52px;
  animation: fade-up 0.45s ease both;
}

.wrap-wide {
  max-width: 1360px;
}

.wrap-intake {
  max-width: 1480px;
  padding-left: clamp(10px, 1.6vw, 20px);
  padding-right: clamp(10px, 1.6vw, 20px);
}

/* —— Desk: guide rail + form (page 2) —— */
.desk {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}

/* Guide left | main form right */
.desk.desk-intake {
  grid-template-columns: minmax(200px, 248px) minmax(0, 1fr);
  gap: 14px 16px;
  align-items: stretch;
}

/* Incident + Vehicle as equal twin cards */
.desk-top-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}

.desk-top-pair > .form-block {
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.desk-top-pair > .form-block .row {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .desk,
  .desk.desk-intake {
    grid-template-columns: 1fr;
  }
  .desk-top-pair {
    grid-template-columns: 1fr;
  }
  /* The guide's mobile treatment lives with the .desk-guide rules further down —
     it has to come AFTER them to win (media queries add no specificity). */
}

/* Page 2 (intake) vs page 3 (report) — distinguishable atmospheres */
body.page-intake {
  background:
    radial-gradient(1000px 480px at 0% 0%, #cce6ff 0%, transparent 55%),
    radial-gradient(800px 400px at 100% 10%, #d9f7fa 0%, transparent 50%),
    linear-gradient(180deg, #eef6ff, var(--bg) 45%, #f6f9fc);
}

body.page-report {
  background:
    radial-gradient(900px 420px at 85% -5%, #d6ebff 0%, transparent 55%),
    radial-gradient(700px 380px at 10% 100%, #e0f7fa 0%, transparent 50%),
    linear-gradient(180deg, #eef6ff, #f4f8fc 40%, #f8fafc);
}

body.page-report .wrap {
  max-width: 1360px;
}

/* Results: main report + right anomaly sidebar */
.report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: start;
}

.report-layout[hidden] {
  display: none !important;
}

.report-layout.no-sidebar {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  .report-layout {
    grid-template-columns: 1fr;
  }
}

.report-sidebar[hidden] {
  display: none !important;
}

.report-sidebar {
  position: sticky;
  top: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.report-sidebar-kicker {
  margin: 0 0 4px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--sky-deep);
}

.report-sidebar-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.report-sidebar-lede {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-card,
.sidebar-block {
  padding: 14px 14px 12px;
  border-radius: 10px;
  border: 1px solid #b9d4f0;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
  box-shadow: var(--shadow-sm);
}

.sidebar-block-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-deep);
}

.sidebar-placeholder,
.sidebar-na {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
}

.coherence-banner.sidebar-coherence {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.84rem;
  border-radius: 8px;
}

.coherence-banner.sidebar-coherence .coherence-title {
  font-size: 0.86rem;
}

.coherence-banner.sidebar-coherence .coherence-summary {
  margin: 6px 0 0;
  font-size: 0.8rem;
  opacity: 0.95;
}

/* —— Assessment hero-first layout —— */
.wrap-assess {
  max-width: 1360px;
}

body.page-assess {
  overflow-x: hidden;
}

.assess-shell {
  padding: 14px 18px 14px;
  margin-bottom: 12px;
}

.assess-head {
  margin-bottom: 10px;
}

.assess-head h1 {
  font-size: 1.25rem;
}

.assess-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 0;
}

.assess-hero-main {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assess-hero .hero-total {
  margin: 0;
}

.assess-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.assess-hero .overall-factor {
  margin: 0;
  flex: 1 1 240px;
}

.assess-continue {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.assess-continue .btn {
  white-space: nowrap;
  min-width: 180px;
  text-align: center;
}

.assess-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.assess-photos {
  min-width: 0;
}

.assess-photos .section-title {
  margin: 0 0 8px;
}

.assess-photos .thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
}

.assess-photos .thumbs .thumb-wrap {
  width: 100%;
  max-width: none;
}

.assess-photos .thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.assess-checks {
  min-width: 0;
}

.assess-checks .anomalies-section {
  margin: 0;
  height: 100%;
}

.anomalies-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.coherence-host:empty,
.narrative-host:empty {
  display: none;
}

.exif-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: stretch;
  flex: 1;
  --tile-basis: 40%;
}

.exif-checks .check-tile {
  flex: 1 1 var(--tile-basis, 45%);
  min-width: min(100%, var(--tile-basis));
}

.exif-checks.density-roomy {
  --tile-basis: 48%;
}

.exif-checks.density-normal {
  --tile-basis: 40%;
}

.exif-checks.density-compact {
  --tile-basis: 30%;
}

.exif-checks.density-compact .check-tile {
  padding: 5px 7px 5px 8px;
}

.exif-checks.density-compact .check-tile-title {
  font-size: 1.02rem;
}

.exif-checks.density-compact .check-tile-detail {
  font-size: 0.68rem;
}

.exif-checks.density-roomy .check-tile {
  padding: 10px 12px 10px 13px;
}

.exif-checks.density-roomy .check-tile-title {
  font-size: 1.1rem;
}

.exif-checks.density-roomy .check-tile-detail {
  -webkit-line-clamp: 2;
}

.assess-table {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.assess-table .section-title {
  margin-bottom: 4px;
}

.assess-table-scroll {
  max-height: min(62vh, 540px);
  overflow: auto;
}

/* Denser rows so 4-5 parts are visible without a tall scroll */
.assess-table td,
.assess-table th {
  padding: 9px 12px;
}

.assess-table td {
  font-size: 0.88rem;
}

@media (max-width: 900px) {
  .assess-hero {
    flex-direction: column;
  }
  .assess-continue {
    width: 100%;
  }
  .assess-continue .btn {
    width: 100%;
  }
  .assess-split {
    grid-template-columns: 1fr;
  }
  .exif-checks {
    --tile-basis: 100%;
  }
  .assess-table-scroll {
    max-height: none;
  }
}

/* Compact check chips.
   One anatomy for every tile: the verdict sets the five --state-* properties
   below and nothing else. Surfaces read those properties, so a tile can never
   tint one surface while leaving another white (the old pass/flag inversion).
   To restyle a state, change it here — never in a per-state surface rule. */
.check-tile {
  --state: var(--sky);
  --state-soft: var(--accent-soft);
  --state-line: var(--line);
  --state-rgb: 0, 125, 255;
  /* Surface strength: 0% = white card, 100% = full --state-soft. Dial this one
     number to make every tile quieter or louder; nothing else needs touching. */
  --state-tint: 45%;
  --state-surface: color-mix(in srgb, var(--state-soft) var(--state-tint), var(--paper));

  border-radius: var(--radius);
  border: 1px solid var(--state-line);
  border-left: 4px solid var(--state);
  background: var(--state-surface);
  box-shadow:
    0 1px 2px rgba(var(--state-rgb), 0.08),
    0 6px 16px rgba(var(--state-rgb), 0.1);
  padding: 7px 9px 7px 10px;
  min-width: 0;
}

.coherence-host .check-tile,
.narrative-host .check-tile {
  width: 100%;
  flex-basis: 100%;
}

.check-tile.is-pass {
  --state: var(--ok);
  --state-soft: var(--ok-soft);
  --state-line: var(--ok-line);
  --state-rgb: var(--ok-rgb);
}

.check-tile.is-flag {
  --state: var(--bad);
  --state-soft: var(--bad-soft);
  --state-line: var(--bad-line);
  --state-rgb: var(--bad-rgb);
}

.check-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.check-tile-title {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.25;
}

/* Solid state colour so the pill reads on a white OR a tinted card — the reason
   the old rule flipped to white on flagged tiles and broke the pattern. */
.check-tile-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--state);
  background: var(--state);
  color: #fff;
}

/* Confidence as a signal meter inside the verdict pill — same rising-bar idiom
   as .sev-meter, so the level reads at a glance with no figure to parse. Banded,
   not proportional: the model only emits 90-100%, so a proportional bar would
   look full every time. Sits on the pill's solid state colour, so lit/unlit bars
   are white at two opacities rather than hues of their own. */
.conf-meter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 9px;
}

.conf-meter i {
  width: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.38);
}

.conf-meter i:nth-child(1) { height: 4px; }
.conf-meter i:nth-child(2) { height: 6.5px; }
.conf-meter i:nth-child(3) { height: 9px; }

.conf-meter.lvl-1 i:nth-child(1),
.conf-meter.lvl-2 i:nth-child(-n + 2),
.conf-meter.lvl-3 i {
  background: #fff;
}

.check-tile-detail {
  margin: 3px 0 0;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Comparison points (claimed vs. what the photo says). Not clamped: these are
   the values the assessor is here to read — the tile's own title and pill
   already carry the verdict, so this is the only new information. */
.check-tile-points {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

.check-tile-points li {
  position: relative;
  padding-left: 9px;
}

.check-tile-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.check-tile.is-flag .check-tile-points {
  color: var(--ink);
}

.check-tile.is-flag .check-tile-detail {
  color: var(--ink);
  -webkit-line-clamp: 2;
}

.anomalies-empty {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

/* ---- Journey strip: upstream -> this service -> downstream ---- */
.journey {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.journey-step {
  position: relative;
  padding: 7px 9px 7px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid #c3d4e6;
  border-radius: var(--radius);
  background: var(--paper);
}

/* The middle step is ours — the only one that carries brand colour. */
.journey-step.is-ours {
  border-color: #b9d4f0;
  border-left-color: var(--sky);
  background: var(--accent-soft);
}

.journey-step.is-upstream,
.journey-step.is-downstream {
  opacity: 0.72;
}

.journey-step strong {
  display: block;
  font-size: 0.8rem;
  color: var(--ink);
}

.journey-step p {
  margin: 1px 0 0;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--muted);
}

.journey-tag {
  display: inline-block;
  margin-bottom: 2px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.journey-step.is-ours .journey-tag { color: var(--sky-deep); }

/* Connector between the steps. */
.journey-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 1px;
  height: 6px;
  background: var(--line);
}

/* ---- Policy & vehicle: data the insurer's app hands us (POC: sample) ---- */
.carrier-block {
  margin: 16px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--sky);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

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

.carrier-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sky-deep);
}

.carrier-origin {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--sky-deep);
  background: var(--accent-soft);
  border: 1px solid #b9d4f0;
  border-radius: 999px;
  padding: 2px 9px;
}

.carrier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 14px;
  margin: 0;
}

.carrier-cell dt {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.carrier-cell dd {
  margin: 1px 0 0;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Waiting on the vehicle choice — present, just not known yet. */
.carrier-cell.is-pending dd {
  color: var(--muted);
}

.carrier-note {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

/* The block stays put and says what broke, rather than disappearing. */
.carrier-note.is-error {
  color: var(--bad);
  font-weight: 650;
}

/* Anomalies / checks panel (sky-blue) */
.anomalies-section {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 16px 0 12px;
  padding: 12px 12px 10px;
  border-radius: 10px;
  border: 1px solid #b9d4f0;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
  box-shadow: var(--shadow-sm);
}

.anomalies-section[hidden] {
  display: none !important;
}

.anomalies-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.anomalies-kicker {
  margin: 0 0 2px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sky-deep);
}

.anomalies-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}

.risk-level-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid #b9d4f0;
  background: #fff;
  color: var(--sky-deep);
}

.risk-level-badge.risk-low {
  color: var(--ok);
  border-color: #8fc9a8;
  background: var(--ok-soft);
}

.risk-level-badge.risk-medium {
  color: var(--navy-deep);
  border-color: #8eb8e8;
  background: var(--accent-soft);
}

.risk-level-badge.risk-high {
  color: var(--bad);
  border-color: #f0b4ae;
  background: var(--bad-soft);
}

.check-panel-compact {
  margin: 0;
}

.check-panel-compact .check-heading {
  font-size: 1rem;
}

.check-panel-compact .check-panel-head {
  padding: 12px 14px 10px;
}

.check-panel-compact .check-panel-body {
  padding: 10px 14px 12px;
}

.page-report .hero-total {
  margin-top: 14px;
}

.risk-summary {
  margin: 14px 0 8px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #b9d4f0;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
}

.risk-summary.is-low {
  border-color: #8fc9a8;
  background: linear-gradient(180deg, #f3faf6, #e8f5ef);
}

.risk-summary.is-medium {
  border-color: #b9d4f0;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
}

.risk-summary.is-high {
  border-color: #f0b4ae;
  background: linear-gradient(180deg, #fff5f4, #ffe8e6);
}

.risk-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.risk-summary-title {
  margin: 0;
  font-size: 1rem;
  color: var(--navy-deep);
}

.risk-summary-list {
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.45;
}

.risk-summary-list li + li {
  margin-top: 4px;
}

.risk-summary-empty {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Mid-flow photo check — primary decision signal before verify */
.check-panel {
  margin: 16px 0 8px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #b9d4f0;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: fade-up 0.35s ease both;
}

.check-panel[hidden] {
  display: none !important;
}

.check-panel.is-ok {
  border-color: #8fc9a8;
  box-shadow: 0 0 0 1px rgba(31, 107, 74, 0.12), var(--shadow-sm);
}

.check-panel.is-attention {
  border-color: #8eb8e8;
  box-shadow: 0 0 0 1px rgba(0, 125, 255, 0.12), var(--shadow-sm);
}

.check-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.check-panel.is-ok .check-panel-head {
  background: linear-gradient(180deg, #f3faf6, #e8f5ef);
  border-bottom-color: #b7d4c5;
}

.check-panel.is-attention .check-panel-head {
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
  border-bottom-color: #b9d4f0;
}

.check-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sky-deep);
}

.check-panel.is-attention .check-kicker {
  color: var(--sky-deep);
}

.check-panel.is-ok .check-kicker {
  color: var(--ok);
}

.check-heading {
  margin: 0 0 6px;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}

.check-lede {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted);
  max-width: 42rem;
}

.check-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.check-badge.is-ok {
  color: var(--ok);
  border-color: #8fc9a8;
  background: #fff;
}

.check-badge.is-attention {
  color: var(--navy-deep);
  border-color: #8eb8e8;
  background: #fff;
}

.check-panel-body {
  padding: 14px 18px 16px;
}

.check-summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.check-panel .coherence-flags {
  margin-top: 12px;
}

.check-panel .coherence-flags .flag {
  font-family: inherit;
  font-size: 0.78rem;
  border-radius: 6px;
  padding: 4px 10px;
}

.check-panel.is-ok .coherence-flags .flag {
  border-color: #b7d4c5;
  color: var(--ok);
}

.check-panel.is-attention .coherence-flags .flag {
  border-color: #8eb8e8;
  color: var(--sky-deep);
  background: #fff;
}

.review-summary {
  margin: 14px 0 4px;
}

.report-main {
  min-width: 0;
}

/* Flatten report pages: no big card wrapping inner boxes — sections flow on the page */
body.page-report #main.card,
body.page-report .report-main.card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

body.page-report #main > .page-head,
body.page-report .report-main > .page-head {
  margin-bottom: 4px;
}

/* Give the flowing report sections consistent breathing room */
body.page-report .report-top { margin-top: 16px; }
body.page-report .section { margin-top: 22px; }

a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--btn-grad);
  color: #fff;
  border: 1px solid var(--sky-deep);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-weight: 650;
  box-shadow: var(--btn-shadow);
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

a.btn:hover {
  background: var(--btn-grad-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

a.btn:active {
  transform: translateY(0);
}

a.btn.secondary {
  background: rgba(255, 255, 255, 0.85);
  color: var(--sky-deep);
  border-color: #c4d8ef;
  box-shadow: var(--shadow-sm);
}

a.btn.secondary:hover {
  background: #fff;
  color: var(--sky-deep);
  border-color: var(--sky);
  box-shadow: var(--shadow-sm);
}

/* Shared topbar accent on both authenticated pages */
body.page-intake .topbar,
body.page-report .topbar {
  border-left: 3px solid var(--navy);
}

.desk-guide {
  position: sticky;
  top: 12px;
  align-self: stretch;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  border-radius: 10px;
  background: linear-gradient(165deg, #f5faff 0%, #e6f2ff 55%, #d9ebff 100%);
  color: var(--ink);
  border: 1px solid #b6d2ef;
  box-shadow: var(--shadow-sm);
}

.desk-guide .guide-list {
  flex: 1 1 auto;
}

.desk-guide::after {
  content: "";
  flex: 1 1 auto;
  min-height: 12px;
}

.desk-guide-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--sky-deep);
  opacity: 0.9;
}

.desk-guide-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.desk-guide-lede {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
}

.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guide-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #c5daf0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.guide-card:hover {
  background: #fff;
  border-color: #9ec4eb;
}

.guide-card.is-active {
  background: #fff;
  border-color: var(--sky);
  transform: translateX(2px);
  box-shadow: inset 3px 0 0 var(--cerulean);
}

.guide-card.is-complete .guide-num {
  background: var(--sky);
  color: #fff;
}

.guide-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--highlight);
  color: var(--sky-deep);
}

.guide-card strong {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 2px;
}

.guide-card p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.desk-guide-foot {
  margin: 16px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ---- Guide on one column (must sit after the rules above to win) ----
   Two problems once .desk-intake collapses at 900px:
   1. position:sticky exists to track the form in the two-column layout. Stacked
      above the form there is nothing to track, and sticky instead pins the panel
      over the inputs as you scroll — it covered the fields.
   2. height:100% has no side-by-side row to match, so it stretches.
   Then compact it: this is read-once guidance and shouldn't cost a screenful
   before the form. Steps collapse to a 2x2 of labels; the prose goes. */
@media (max-width: 900px) {
  .desk-guide {
    position: static;
    height: auto;
    min-height: 0;
    padding: 12px 12px 10px;
  }
  .desk-guide-lede,
  .desk-guide-foot,
  .guide-card p,
  .desk-guide::after {
    display: none;
  }
  .desk-guide-title {
    font-size: 1.05rem;
    margin-bottom: 8px;
  }
  .desk-guide .guide-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .guide-card {
    padding: 7px 9px;
    gap: 8px;
    align-items: center;
  }
  .guide-card strong {
    font-size: 0.76rem;
    line-height: 1.25;
  }
}

.desk-form {
  min-height: 0;
  padding: 20px 24px 22px;
  border-radius: 10px;
}

.desk-main {
  min-height: 0;
  padding: 20px 22px 22px;
  border-radius: 10px;
}

.desk-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.desk-form-head h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
  color: var(--navy-deep);
  letter-spacing: -0.02em;
}

.form-block {
  margin: 0 0 14px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.form-block textarea {
  min-height: 64px;
  resize: vertical;
}

.page-intake .form-block label {
  margin-top: 10px;
}

.location-status {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.location-status.is-checking {
  color: var(--sky-deep);
}

.location-status.is-ok {
  color: var(--ok);
}

.location-status.is-bad {
  color: var(--bad);
}

#location.is-loc-ok {
  border-color: #8fc9a8;
}

#location.is-loc-bad {
  border-color: #f0b4ae;
}

.page-intake .form-block .row + label,
.page-intake .form-block legend + .row label,
.page-intake .form-block legend + .hint + .row label {
  margin-top: 0;
}

.form-block:last-of-type {
  margin-bottom: 0;
}

.form-block legend {
  float: left;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-deep);
}

.form-block legend + * {
  clear: both;
}

.form-block legend .legend-opt {
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--muted);
}

/* Active section: solid rect + clear border — no floating gradient bleed */
.form-block.is-focus {
  background: #fff;
  border-color: var(--sky);
  box-shadow: var(--ring), inset 0 0 0 1px rgba(0, 125, 255, 0.12);
}

.desk-form-actions {
  margin-top: 8px;
  justify-content: center;
}

.recent-card {
  border-radius: 10px;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(216, 222, 230, 0.9);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy-deep);
  font-size: 1.05rem;
}

.brand-mark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(150deg, var(--cyan) -25%, var(--sky) 55%, var(--sky-deep) 125%);
  box-shadow: 0 2px 6px rgba(0, 125, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.brand-mark svg {
  width: 18px;
  height: 18px;
  display: block;
}

.brand-name {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.brand-sub {
  color: var(--muted);
  font-weight: 500;
  margin-left: 8px;
  font-size: 0.88rem;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}

h1 {
  margin: 0 0 8px;
  font-size: 1.45rem;
  color: var(--navy-deep);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lede {
  margin: 0 0 22px;
  color: var(--muted);
  max-width: 58ch;
}

label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  margin: 14px 0 6px;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: var(--ring);
}

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

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.row > * {
  min-width: 0;
}

.page-intake .form-block .row input,
.page-intake .form-block .row select {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; }
  .card { padding: 20px; }
}

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

button, .btn {
  appearance: none;
  border: 1px solid var(--sky-deep);
  background: var(--btn-grad);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

button:hover:not(:disabled), .btn:hover {
  background: var(--btn-grad-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
  text-decoration: none;
}

button:active:not(:disabled), .btn:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow);
}

button.secondary, .btn.secondary {
  background: rgba(255, 255, 255, 0.85);
  color: var(--sky-deep);
  border-color: #c4d8ef;
  box-shadow: var(--shadow-sm);
}

button.secondary:hover:not(:disabled), .btn.secondary:hover {
  background: #fff;
  color: var(--sky-deep);
  border-color: var(--sky);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

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

.error {
  color: var(--bad);
  background: var(--bad-soft);
  border: 1px solid #e3c8c8;
  border-left: 3px solid var(--bad);
  padding: 10px 12px;
  border-radius: var(--radius);
  margin: 12px 0;
}

.ok {
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid #c8ddd3;
  border-left: 3px solid var(--ok);
  padding: 12px 14px;
  border-radius: var(--radius);
  margin: 12px 0;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 12px;
  font-size: 0.92rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

thead th {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #f5f9fe, #eef4fb);
  border-bottom: 1px solid #d5e2ef;
}

tbody tr {
  transition: background 0.12s ease;
}

tbody tr:hover td {
  background: #f5faff;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody td strong {
  color: var(--navy-deep);
  font-weight: 650;
}

/* Keep wide tables from forcing horizontal page scroll on small screens */
.table-scroll {
  margin-top: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}

.table-scroll table {
  margin-top: 0;
  min-width: 520px;
}

.meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.section {
  margin-top: 18px;
}

.section-title {
  position: relative;
  margin: 0 0 6px;
  padding-left: 12px;
  font-size: 1.05rem;
  color: var(--navy-deep);
  font-weight: 700;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cerulean), var(--sky));
}

/* —— Steps —— */
/* Segmented flow tabs — same look on intake + results */
.flow-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  max-width: 360px;
}

.flow-tabs.flow-tabs-3 {
  max-width: 560px;
}

.flow-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
  cursor: default;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.flow-tab .n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: #e8edf3;
  color: var(--muted);
  flex-shrink: 0;
}

.flow-tab.is-current {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 10px rgba(30, 58, 95, 0.22);
  cursor: default;
}

.flow-tab.is-current .n {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.flow-tab.is-complete {
  color: var(--navy);
  cursor: pointer;
}

.flow-tab.is-complete .n {
  background: var(--accent-soft);
  color: var(--navy);
}

a.flow-tab.is-complete:hover {
  background: var(--accent-soft);
  color: var(--navy-deep);
  text-decoration: none;
}

.flow-tab.is-upcoming {
  opacity: 0.72;
  cursor: default;
}

.flow-tab.is-upcoming .n {
  background: #eef1f4;
}

@media (max-width: 560px) {
  .flow-tabs {
    max-width: none;
  }
  .flow-tab {
    min-width: 0;
  }
}

/* Very small screens: let step tabs fit without forcing horizontal scroll */
@media (max-width: 480px) {
  .flow-tabs {
    padding: 3px;
    gap: 3px;
  }
  .flow-tab {
    min-width: 0;
    padding: 9px 6px;
    gap: 0;
    font-size: 0.8rem;
  }
  .flow-tab .n {
    display: none;
  }
}

/* —— Workspace tabs (Claim form | Recent) —— */
.workspace-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

/* These are <button>s, so the global `button, .btn` chrome — blue gradient, white
   text, shadow, hover lift — applies and must be opted out of in EVERY state, not
   just the base one. `button:hover:not(:disabled)` scores (0,2,1) and beats a
   plain `.workspace-tab:hover` at (0,2,0): the tab got repainted with the blue
   gradient while its text stayed navy, i.e. unreadable. The :not(:disabled) here
   buys the specificity back. Same trap for :active. */
.workspace-tab {
  appearance: none;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--muted);
  padding: 10px 16px 12px;
  margin-bottom: -1px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.workspace-tab:hover:not(:disabled),
.workspace-tab:active:not(:disabled) {
  color: var(--navy);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.workspace-tab.is-active {
  color: var(--navy-deep);
  border-bottom-color: var(--navy);
  background: transparent;
  box-shadow: none;
}

/* On the claim pages the same strip is <a>s (they navigate rather than switch a
   panel), which brings the global `a:hover { text-decoration: underline }` along
   at (0,1,1) — the button rules above never had to fight it. Kill it in both
   states so the two forms of the strip look identical. */
a.workspace-tab,
a.workspace-tab:hover {
  text-decoration: none;
}

.workspace-panel[hidden] {
  display: none !important;
}

.recent-panel {
  padding: 22px 24px 10px;
  border-radius: 10px;
  animation: fade-up 0.25s ease both;
}

.claim-list-item {
  align-items: center;
  /* Anchor for the stretched link below. */
  position: relative;
}

.claim-list-item:hover {
  background: var(--accent-soft);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* The whole row hover-highlights, so the whole row must open the claim. Only the
   title was ever a link, which left the date, location, badge and amount dead to
   a click while still looking clickable — the row read as broken. Stretching the
   real anchor over the row fixes it without a JS click handler, and keeps the
   semantics: one link, keyboard-focusable, properly labelled. */
.claim-list-item .claim-list-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

.claim-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.claim-loc {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--accent-soft);
  border: 1px solid #c5d0de;
  padding: 2px 8px;
  border-radius: 999px;
}

.claim-list-aside {
  text-align: right;
  flex-shrink: 0;
}

.claim-list-amount {
  margin-top: 4px;
}

/* Incident metadata tags (Results) */
.meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.meta-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid #c8d3e0;
  font-size: 0.8rem;
  color: var(--navy-deep);
  line-height: 1.35;
}

.meta-tag .k {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.meta-tag .v {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 36ch;
}

.meta-tag.is-desc .v {
  white-space: normal;
  max-width: 52ch;
  font-weight: 500;
}

/* —— Instruction checklist —— */
.howto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}

@media (max-width: 720px) {
  .howto { grid-template-columns: 1fr; }
}

.howto-item {
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fafbfd, #f5f7fa);
}

.howto-item strong {
  display: block;
  color: var(--navy-deep);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.howto-item span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.howto-item .k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

/* —— Upload dropzone —— */
.dropzone {
  position: relative;
  border: 1.5px dashed #b8c6d6;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fafbfc, #f3f6f9);
  padding: 16px 14px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.page-intake .dropzone {
  padding: 12px 12px;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
}

.dropzone-title {
  font-weight: 650;
  color: var(--navy-deep);
  margin: 0 0 4px;
}

.dropzone-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.upload-preview-panel {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1.4fr);
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.upload-preview-details {
  min-width: 0;
}

.upload-preview-title {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sky-deep);
}

.upload-file-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-file-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  font-size: 0.82rem;
}

.upload-file-no {
  font-weight: 700;
  color: var(--sky-deep);
  font-variant-numeric: tabular-nums;
}

.upload-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.upload-file-remove {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  padding: 0;
}

.upload-file-remove:hover {
  color: var(--bad);
}

@media (max-width: 720px) {
  .upload-preview-panel {
    grid-template-columns: 1fr;
  }
}

.preview {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #eee;
  aspect-ratio: 4 / 3;
  animation: fade-up 0.3s ease both;
}

.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview .tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(18, 37, 60, 0.78);
  color: #fff;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 650;
  z-index: 1;
}

.preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(18, 37, 60, 0.82);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

.preview-remove:hover {
  background: var(--bad);
}

.upload-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.thumb-wrap {
  position: relative;
  width: 128px;
}

.thumb-wrap img {
  width: 128px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #eee;
  display: block;
}

.thumb-wrap .tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(18, 37, 60, 0.78);
  color: #fff;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 650;
}

.evidence-imgs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.evidence-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 1px;
}

.evidence-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--accent-soft);
  border: 1px solid #cfe0f2;
  color: var(--sky-deep);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

/* —— Busy / loading —— */
.busy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid #c5d4e4;
  color: var(--navy);
  font-size: 0.9rem;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #b7c8da;
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* —— Claim list —— */
.claim-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.claim-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s ease;
}

.claim-list li:last-child { border-bottom: none; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 650;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #f7f8fa;
}

/* Claim lifecycle — mirrors backend/app/models.py. Anything without a rule here
   falls through to the grey default, so a new status needs a line added. */
.badge.submission_pending { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.badge.submitted { color: var(--sky-deep); border-color: #b9d4f0; background: var(--accent-soft); }
.badge.completed { color: var(--sky-deep); border-color: #b9d4f0; background: var(--accent-soft); } /* legacy, pre-rename */

/* Rides beside a verified/approved/rejected badge: those stages are staged for
   the demo, and a reader scanning the list must not take them for real. */
.badge-demo {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: 1px;
}
.badge.verified { color: var(--sky-deep); border-color: #b9d4f0; background: var(--accent-soft); }
.badge.approved { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.badge.rejected { color: var(--bad); border-color: var(--bad-line); background: var(--bad-soft); }
.badge.failed { color: var(--bad); border-color: var(--bad-line); background: var(--bad-soft); }
.badge.processing { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }

/* ---- Information (step 1 for an existing claim) ---- */
.info-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 12px;
}

.info-panel {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  min-width: 0;
}

/* The claimant's own account — quoted, because these are their words, not ours. */
.info-desc {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--sky);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft);
}

.info-desc-k {
  margin: 0 0 3px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--sky-deep);
}

.info-desc-v {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  overflow-wrap: anywhere;
}

/* The way out of a read-only page. Muted, but the link is not. */
.info-locked {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--muted);
}
.info-locked a {
  color: var(--sky-deep);
  font-weight: 650;
}

@media (max-width: 900px) {
  .info-split {
    grid-template-columns: 1fr;
  }
}

/* Sits directly under a field, explaining a value we filled in for you. */
.field-hint {
  margin: -2px 0 10px;
  font-size: 0.72rem;
  color: var(--muted);
}

/* ---- Claim journey: Submitted -> Verification -> Approval ----
   Review screen only. We own stage 1; the insurer's core system owns 2 and 3.
   Showing all three is the point: this service is a step in a process, not the
   whole of it. */
.journey-track {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 10px 0 0;
  padding: 0;
}

/* Sits opposite the title, in the head's otherwise empty right half. Carded, so
   it reads as its own panel rather than loose text floating by the heading. */
.page-head-journey {
  flex-shrink: 0;
}

.page-head-journey:not(:empty) {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

/* The assessment head's right column stacks the "Continue to review" button above
   the journey. align-items rather than text-align: the children are blocks, and
   flex-end is what keeps both hugging the right edge as the head reflows. */
.page-head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.page-head-journey .journey-track {
  margin: 0;
}

.journey-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 6px 0;
  margin-right: 10px;
}

/* Connector to the next stage. */
.journey-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
}
.journey-stage.is-done:not(:last-child)::after {
  background: var(--ok);
}

.journey-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--muted);
}

.journey-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.journey-name {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
}

.journey-note {
  font-size: 0.66rem;
  color: var(--muted);
  opacity: 0.85;
}

/* Colour is set once per stage by its tone, and read by the dot, the label and
   the active-stage ring. Shape (done / current / todo) is separate, above.
     good    = done / approved      -> green
     active  = verification running -> blue  (the AI + assessor work, page 2)
     pending = awaiting the insurer -> amber
     bad     = rejected             -> red */
.journey-stage.is-good .journey-dot {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}
.journey-stage.is-good .journey-name { color: var(--ok); }

.journey-stage.is-active .journey-dot {
  border-color: var(--sky);
  background: var(--sky);
  color: #fff;
}
.journey-stage.is-active .journey-name { color: var(--sky-deep); }

.journey-stage.is-pending .journey-dot {
  border-color: var(--warn);
  background: var(--warn);
  color: #fff;
}
.journey-stage.is-pending .journey-name { color: var(--warn); }

.journey-stage.is-bad .journey-dot {
  border-color: var(--bad);
  background: var(--bad);
  color: #fff;
}
.journey-stage.is-bad .journey-name { color: var(--bad); }

/* The stage the claim is in right now — the one thing the eye should land on:
   a soft ring in the stage's own colour, and a heavier label. */
.journey-stage.is-current .journey-name { font-weight: 700; }
.journey-stage.is-current.is-active .journey-dot  { box-shadow: 0 0 0 4px rgba(0, 125, 255, 0.16); }
.journey-stage.is-current.is-pending .journey-dot { box-shadow: 0 0 0 4px rgba(var(--warn-rgb), 0.2); }
.journey-stage.is-current.is-good .journey-dot    { box-shadow: 0 0 0 4px rgba(var(--ok-rgb), 0.18); }
.journey-stage.is-current.is-bad .journey-dot     { box-shadow: 0 0 0 4px rgba(var(--bad-rgb), 0.18); }

/* Still to come — present, but clearly not reached. */
.journey-stage.is-todo .journey-dot,
.journey-stage.is-todo .journey-name {
  opacity: 0.65;
}

/* Compact progress for the Recent claims list: same component, smaller, no notes,
   pulled to the right so it sits with the amount. Kept identical to the review
   journey so the two always read alike. */
.journey-track--compact {
  justify-content: flex-end;
  margin: 0;
}
.journey-track--compact .journey-note { display: none; }
.journey-track--compact .journey-stage { padding: 0 14px 0 0; margin-right: 6px; }
.journey-track--compact .journey-stage:not(:last-child)::after { width: 8px; }
.journey-track--compact .journey-dot {
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  border-width: 1.25px;
}
.journey-track--compact .journey-name { font-size: 0.72rem; }
.journey-track--compact .journey-stage.is-current .journey-dot { box-shadow: none; }

@media (max-width: 560px) {
  .journey-note { display: none; }
  .journey-stage { padding-right: 14px; margin-right: 6px; }
}
/* On a phone the compact track drops to dots only — the words would wrap the row. */
@media (max-width: 640px) {
  .journey-track--compact .journey-name { display: none; }
}

/* Caption under a carrier-owned outcome (verified/approved/rejected): the POC
   displays these, it never decides them. */
.status-demo-note {
  margin: 6px 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--muted);
}
.status-demo-note strong { color: var(--ink); font-weight: 650; }

.sev {
  display: none;
}

/* Creative severity meter — professional, readable */
.sev-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f7f9fc;
  vertical-align: middle;
}

.sev-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.sev-bars i {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: #c8d5e3;
}

.sev-bars i:nth-child(1) { height: 6px; }
.sev-bars i:nth-child(2) { height: 10px; }
.sev-bars i:nth-child(3) { height: 14px; }

.sev-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: var(--muted);
}

.sev-meter.minor {
  background: #eef7ff;
  border-color: #b7d8f7;
}

.sev-meter.minor .sev-label { color: var(--sky-deep); }
.sev-meter.minor .sev-bars i:nth-child(1) { background: var(--cerulean); }
.sev-meter.minor .sev-bars i:nth-child(2),
.sev-meter.minor .sev-bars i:nth-child(3) { background: #c5e0f2; }

.sev-meter.moderate {
  background: var(--warn-soft);
  border-color: #e6d29a;
}

.sev-meter.moderate .sev-label { color: var(--warn); }
.sev-meter.moderate .sev-bars i:nth-child(1),
.sev-meter.moderate .sev-bars i:nth-child(2) { background: #d4a017; }
.sev-meter.moderate .sev-bars i:nth-child(3) { background: #e8d8a8; }

.sev-meter.severe,
.sev-meter.major {
  background: var(--bad-soft);
  border-color: #f0b4ae;
}

.sev-meter.severe .sev-label,
.sev-meter.major .sev-label { color: var(--bad); }
.sev-meter.severe .sev-bars i,
.sev-meter.major .sev-bars i { background: #d6453d; }

.overall-factor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #b9d4f0;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
}

.overall-factor .label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sky-deep);
}

.overall-factor-hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.sev-meter-lg {
  padding: 8px 14px 8px 12px;
  gap: 10px;
}

.sev-meter-lg .sev-bars {
  height: 20px;
  gap: 3px;
}

.sev-meter-lg .sev-bars i { width: 5px; }
.sev-meter-lg .sev-bars i:nth-child(1) { height: 8px; }
.sev-meter-lg .sev-bars i:nth-child(2) { height: 14px; }
.sev-meter-lg .sev-bars i:nth-child(3) { height: 20px; }

.sev-meter-lg .sev-label {
  font-size: 0.95rem;
  text-transform: capitalize;
}

/* —— Report: dense top (photos + estimate) —— */
.report-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 16px;
  align-items: stretch;
  margin: 12px 0 4px;
}

@media (max-width: 860px) {
  .report-top {
    grid-template-columns: 1fr;
  }
}

.report-media {
  min-width: 0;
}

.report-media .section-title {
  margin-bottom: 8px;
}

/* —— Report hero total —— */
.hero-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #007dff 0%, #005fc4 55%, #024a9e 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 125, 255, 0.28);
  animation: fade-up 0.5s ease 0.05s both;
  height: 100%;
  box-sizing: border-box;
}

.hero-total .label {
  margin: 0 0 4px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 600;
}

.hero-total .amount {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.hero-total .aside {
  text-align: left;
  font-size: 0.88rem;
  opacity: 0.85;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-total .aside strong {
  display: block;
  font-size: 1rem;
  opacity: 1;
  margin-bottom: 2px;
}

.total {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--navy);
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-deep);
}

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 8px;
}

.thumbs img {
  width: 168px;
  height: 126px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eee;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 1100px) {
  .thumbs img {
    width: 196px;
    height: 140px;
  }
}

.thumbs img:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.coherence-banner {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  animation: fade-up 0.35s ease both;
}

.coherence-banner.is-ok {
  background: var(--ok-soft);
  border-color: #b7d4c5;
  color: var(--ok);
}

.coherence-banner.is-suspicious {
  background: #fdf4e8;
  border-color: #e0d4a8;
  color: var(--warn);
}

.coherence-banner .coherence-title {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.coherence-banner .coherence-summary {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.9;
}

.coherence-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.coherence-flags .flag {
  font-size: 0.72rem;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #b9d4f0;
  background: #fff;
  color: var(--sky-deep);
  font-family: inherit;
}

.view-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.view-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f5f7fa;
  font-size: 0.78rem;
  color: var(--navy-deep);
  font-weight: 600;
}

.view-meta-chip .idx {
  font-family: var(--mono);
  color: var(--accent);
}

.view-meta-chip.unusable {
  color: var(--muted);
  background: #f0f1f3;
}

/* —— Verification choices —— */
.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0 4px;
}

@media (max-width: 560px) {
  .choice-row { grid-template-columns: 1fr; }
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: #fafbfc;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice:hover {
  border-color: #a8bdd3;
}

.choice:has(input:checked) {
  border-color: var(--navy);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.choice.accurate:has(input:checked) {
  border-color: var(--ok);
  background: var(--ok-soft);
  box-shadow: inset 0 0 0 1px var(--ok);
}

.choice.inaccurate:has(input:checked) {
  border-color: var(--bad);
  background: var(--bad-soft);
  box-shadow: inset 0 0 0 1px var(--bad);
}

.choice .t {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--navy-deep);
  line-height: 1.2;
}

.choice-hint {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: #e6edf6;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.choice-hint:hover,
.choice-hint:focus-visible {
  background: var(--sky);
  color: #fff;
  outline: none;
}

.choice-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: min(260px, calc(100vw - 48px));
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #b9d4f0;
  background: #fff;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.choice-hint:hover + .choice-tip,
.choice-hint:focus-visible + .choice-tip,
.choice-hint:focus + .choice-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.choice.accurate:has(input:checked) .choice-hint,
.choice.inaccurate:has(input:checked) .choice-hint {
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
}

/* —— Reusable inline info hint (adapted from the verification choice hints) ——
   Drop <span class="info-hint-wrap"><button class="info-hint">?</button>
   <span class="info-tip" role="tooltip">…</span></span> beside any label. */
.info-hint-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: super;
  margin-left: 3px;
}

.info-hint {
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #e6edf6;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  /* Labels around these buttons are uppercase + letter-spaced — keep the "i" itself lowercase. */
  text-transform: none;
  letter-spacing: normal;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.info-hint:hover,
.info-hint:focus-visible {
  background: var(--sky);
  color: #fff;
  outline: none;
}

.info-tip {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: min(260px, calc(100vw - 48px));
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid #b9d4f0;
  background: #fff;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  text-align: left;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* --tip-shift nudges the tip back inside the viewport. The tip is centred on
     its "i" button, so a hint near the right edge throws it off-screen however
     narrow it is — and CSS can't know where the button sits. clampInfoTip() in
     api.js measures on hover/focus and sets this. Defaults to 0: with JS off,
     behaviour is exactly as before. */
  transform: translate(calc(-50% + var(--tip-shift, 0px)), -4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.info-hint:hover + .info-tip,
.info-hint:focus-visible + .info-tip,
.info-hint:focus + .info-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-50% + var(--tip-shift, 0px)), 0);
}

/* A hidden tip still occupies layout — visibility:hidden keeps its box, so each
   260px tip counts toward the page's scrollWidth even with nothing hovered. The
   eleven on the Assessment screen widened it by 61px on a phone; the same box
   pushed it 22px over at 1000px, because a tip is centred on its "i" and one
   sitting near the right edge hangs past it whatever the viewport.
   display:none removes the box, so it cannot happen at any width.

   This was scoped to max-width:700px on the theory that "desktop has room" —
   1000px disproved it. Unscoped now: the cost is the 0.12s fade (you cannot
   transition to or from display:none), so the tip appears and goes instantly.
   That is worth less than a page that scrolls sideways with nothing to show for
   it. clampInfoTip() still keeps the tip inside the viewport. */
.info-tip {
  display: none;
}

.info-hint:hover + .info-tip,
.info-hint:focus-visible + .info-tip,
.info-hint:focus + .info-tip {
  display: block;
}

.radio-row {
  display: flex;
  gap: 18px;
  margin: 10px 0 4px;
}

.radio-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}

.page-head {
  margin-bottom: 2px;
}

.page-head h1 {
  font-size: 1.35rem;
}

.page-head .status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.page-report #comment {
  min-height: 56px;
}

.page-report .actions {
  margin-top: 14px;
}

.page-report .lede {
  margin-bottom: 10px;
}

/* —— Login (centered, single column — less marketing noise) —— */
body.page-login {
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(0, 125, 255, 0.16), transparent 55%),
    radial-gradient(700px 380px at 100% 100%, rgba(0, 187, 209, 0.12), transparent 50%),
    linear-gradient(180deg, #e8f3ff 0%, var(--bg) 45%, var(--bg-soft) 100%);
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.login-card {
  position: relative;
  width: min(400px, 100%);
  padding: 38px 32px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 70, 150, 0.14);
  animation: fade-up 0.4s ease both;
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--sky) 45%, var(--blue-deep));
}

.login-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}

.login-mark .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.login-mark .brand-mark svg {
  width: 24px;
  height: 24px;
}

.login-title {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.login-lede {
  margin: 0 0 22px;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.4;
}

.login-form label {
  margin-top: 14px;
}

.login-form label:first-of-type {
  margin-top: 0;
}

.login-form button {
  width: 100%;
  margin-top: 22px;
  padding: 12px 18px;
}

.login-foot {
  margin: 22px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

/* —— Image zoom (lightbox) —— */
.thumbs img,
.preview img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(9, 20, 38, 0.84);
  backdrop-filter: blur(5px);
  animation: fade-in 0.16s ease both;
}

.lightbox[hidden] {
  display: none !important;
}

.lightbox-img {
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: zoom-in 0.16s ease both;
}

.lightbox-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, 3vh);
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  padding: 0 20px;
  pointer-events: none;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.12s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* —— Small-screen refinements —— */
@media (max-width: 640px) {
  body { font-size: 14.5px; }

  .topbar {
    padding: 10px 12px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .thumbs img {
    width: calc(50% - 5px);
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .hero-total {
    padding: 16px;
  }

  .overall-factor {
    gap: 10px;
  }
}

/* ==================================================================== */
/* ======================  APP SHELL REDESIGN  ======================== */
/* Fixed left sidebar + fluid main content — fills the viewport, no      */
/* centered "floating column" with empty gutters.                        */
/* ==================================================================== */

body.app-body {
  background:
    radial-gradient(900px 500px at 100% -10%, #e6f1ff 0%, transparent 55%),
    linear-gradient(180deg, #f3f7fc 0%, #eef4fb 100%);
  background-attachment: fixed;
}

.app {
  min-height: 100vh;
}

/* —— Sidebar —— */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 256px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  z-index: 30;
  overflow-y: auto;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 16px;
  border-bottom: 1px solid var(--line);
}

.app-brand .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.app-brand .brand-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.1;
  display: flex;
  flex-direction: column;
}

.app-brand .brand-sub {
  margin: 2px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.side-steps-kicker {
  margin: 0 0 2px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.side-steps .flow-tab {
  justify-content: flex-start;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  gap: 11px;
  font-size: 0.93rem;
  color: var(--muted);
  cursor: default;
}

.side-steps a.flow-tab {
  cursor: pointer;
}

.side-steps .flow-tab .n {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 0.78rem;
}

.side-steps .flow-tab.is-current {
  background: var(--btn-grad);
  color: #fff;
  box-shadow: var(--btn-shadow);
}

.side-steps .flow-tab.is-current .n {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.side-steps .flow-tab.is-complete {
  color: var(--navy-deep);
}

.side-steps .flow-tab.is-complete .n {
  background: var(--ok-soft);
  color: var(--ok);
}

.side-steps a.flow-tab.is-complete:hover {
  background: var(--accent-soft);
}

.side-steps .flow-tab.is-upcoming {
  opacity: 0.68;
}

.app-side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.app-side-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
  min-height: 20px;
}

.app-side-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(150deg, var(--cerulean), var(--sky-deep));
}

.app-side-user-meta {
  min-width: 0;
  line-height: 1.2;
}

.app-side-user-meta .u {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-side-user-meta .r {
  font-size: 0.72rem;
  color: var(--muted);
}

.app-side-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-side-actions .btn,
.app-side-actions button {
  width: 100%;
}

/* —— Main content area —— */
.app-main {
  margin-left: 256px;
  min-height: 100vh;
  padding: 26px clamp(20px, 3vw, 46px) 68px;
}

.app-content {
  max-width: 1520px;
}

/* Page header row — title block + optional right-side action */
.app-main .page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.app-main .page-head .page-head-titles {
  min-width: 0;
}

.app-main .page-head h1 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.page-head-action {
  flex-shrink: 0;
}

/* —— Summary stat row (Estimate | Damage factor | Risk) —— */
.stat-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) repeat(2, minmax(200px, 1fr));
  gap: 16px;
  align-items: stretch;
  margin: 0 0 22px;
}

@media (max-width: 1080px) {
  .stat-row {
    grid-template-columns: 1fr 1fr;
  }
  .stat-row .hero-total {
    grid-column: 1 / -1;
  }
}

.stat-row .hero-total,
.stat-row .overall-factor,
.stat-card {
  margin: 0;
  height: 100%;
}

.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.stat-card--risk.is-low {
  border-color: #8fc9a8;
  background: linear-gradient(180deg, #f3faf6, #e8f5ef);
  box-shadow: var(--shadow);
}

.stat-card--risk.is-medium {
  border-color: #b9d4f0;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
  box-shadow: var(--shadow);
}

.stat-card--risk.is-high {
  border-color: #f0b4ae;
  background: linear-gradient(180deg, #fff5f4, #ffe8e6);
  box-shadow: var(--shadow);
}

.stat-card .label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sky-deep);
}

.stat-card .stat-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.stat-card .risk-level-badge {
  align-self: flex-start;
}

/* —— Assessment: photos | checks split —— */
.assess-split {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .assess-split {
    grid-template-columns: 1fr;
  }
}

.assess-panel {
  padding: 18px 18px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.assess-panel > .section-title {
  margin-top: 0;
}

/* —— Review: summary | report preview ——
   With the fixed .app-sidebar this reads as three columns: steps, summary,
   report. The preview column is sticky so it stays put while summary scrolls. */
/* Roughly 35 / 55 of the page beside the ~10% fixed sidebar: the report is the
   thing being read, the summary beside it is supporting context. */
.review-split {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 55fr);
  gap: 20px;
  /* stretch, not start: the summary column runs the full height of the report
     beside it rather than leaving dead space under the verification panel. */
  align-items: stretch;
}

@media (max-width: 1340px) {
  .review-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* —— Review: unified column (estimate + checks + verification) —— */
.review-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 920px;
}

/* Inside the split the summary is already column-constrained; the 920px cap
   would otherwise fight the grid track. */
.review-split > .review-body {
  max-width: none;
  min-width: 0;
}

/* Always single-file in this column, at any width: it reads top-to-bottom as
   price -> overall damage -> risk -> verdict, and .stat-row's own breakpoints
   key off the viewport rather than this narrower column anyway. */
.review-split .stat-row.stat-row-2 {
  grid-template-columns: minmax(0, 1fr);
}

/* Fill the column's height: the checks + verification block takes the slack, and
   the comments box grows into it — so the space becomes a bigger writing area
   instead of a gap. */
.review-split .review-stack {
  flex: 1;
  min-height: 0;
}

.review-split .review-panel--verify {
  display: flex;
  flex-direction: column;
}

.review-split .review-panel--verify form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.review-split .review-panel--verify textarea {
  flex: 1;
  min-height: 72px;
}

/* Summary is secondary to the preview now — trim it down. */
.review-split .hero-total {
  padding: 14px 16px;
  gap: 6px;
}

.review-split .hero-total .amount {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}

.review-split .hero-total .aside {
  font-size: 0.82rem;
  padding-top: 6px;
}

.review-split .overall-factor,
.review-split .risk-summary {
  padding: 14px 16px;
}

.report-col {
  position: sticky;
  top: 20px;
  min-width: 0;
}

@media (max-width: 1340px) {
  .report-col {
    position: static;
  }
}


/* Chrome here is kept to one row: every band above the preview pushes the
   document down and costs the reader a scroll. */
.report-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.report-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.report-card-head .section-title {
  margin: 0;
}

.report-actions {
  display: flex;
  gap: 8px;
}

.report-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  white-space: nowrap;
  padding: 7px 13px;
  font-size: 0.85rem;
}

.report-actions .btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
}

.report-preview {
  position: relative;
  /* Fills the viewport below the card's own chrome — A4 is ~1.41 tall, so
     height is what makes the page legible without scrolling the frame. */
  height: clamp(560px, calc(100vh - 190px), 1180px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
}

.report-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

.report-preview-busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--muted);
}

.report-preview-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

.review-body .stat-row {
  margin: 0;
  width: 100%;
}

.review-body .hero-total,
.review-body .overall-factor,
.review-body .risk-summary,
.review-body .review-panel {
  margin: 0;
  border-radius: var(--radius-lg);
}

.review-body .overall-factor {
  height: 100%;
  align-self: stretch;
  padding: 18px 20px;
}

.review-body .risk-summary {
  padding: 18px 20px;
}

.review-body .hero-total {
  margin-top: 0;
}

.review-body .review-panel + .review-panel {
  margin-top: 0;
}

/* —— Review: stacked (risk summary on top, then verification) —— */
.review-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* A real button, not a full-width bar — comfortable size, clearly clickable */
.review-panel #review-form .actions {
  margin-top: 18px;
}

.review-panel #review-form .actions button {
  min-width: 210px;
  padding: 12px 30px;
}

/* —— Review: verification | risk rail (legacy grid, kept harmless) —— */
/* Review is a sparse page; cap the width so verification + rail read as a
   dense, balanced pair instead of a wide card + a sidelined half-empty rail. */
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 340px);
  gap: 20px;
  align-items: start;
  max-width: 1060px;
}

@media (max-width: 940px) {
  .review-grid {
    grid-template-columns: 1fr;
    max-width: 620px;
  }
}

.review-panel {
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.review-panel--verify {
  border-color: #b9d4f0;
  background: linear-gradient(180deg, #fafcff, #eef6ff);
  box-shadow: var(--shadow);
}

.review-panel + .review-panel {
  margin-top: 16px;
}

.review-side {
  position: sticky;
  top: 20px;
}

/* Two-up stat row (review) — full-width proportional columns */
.stat-row.stat-row-2 {
  grid-template-columns: 1.35fr 1fr;
  width: 100%;
}

@media (max-width: 1080px) {
  .stat-row.stat-row-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* If there's no risk data, collapse the rail so no empty column is left */
.review-grid:has(.risk-summary[hidden]) {
  grid-template-columns: 1fr;
}

.review-grid:has(.risk-summary[hidden]) .review-side {
  display: none;
}

.app-main .section:first-child,
.app-main .review-panel .section {
  margin-top: 0;
}

/* card container no longer needed inside the shell */
.app-main #main.card,
.app-main .report-main.card,
.app-main .assess-shell.card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* —— Responsive: collapse sidebar into a top bar —— */
@media (max-width: 960px) {
  .app-sidebar {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    height: auto;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  .app-brand {
    padding: 0;
    border-bottom: none;
  }
  .side-steps {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    order: 3;
    width: 100%;
  }
  .side-steps-kicker {
    display: none;
  }
  .side-steps .flow-tab {
    flex: 1;
    min-width: 0;
    justify-content: center;
    min-height: 40px;
  }
  .app-side-foot {
    margin: 0 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-top: 0;
    border-top: none;
  }
  .app-side-user {
    display: none;
  }
  .app-side-actions {
    flex-direction: row;
  }
  .app-side-actions .btn,
  .app-side-actions button {
    width: auto;
  }
  .app-main {
    margin-left: 0;
    padding-top: 20px;
  }
}

@media (max-width: 520px) {
  .side-steps .flow-tab .n {
    display: none;
  }
  /* brand-sub used to be hidden here to save space when it only repeated the
     step name (already shown in the flow tabs). It now carries the "Proof of
     concept" marker, which has to stay visible on every screen size. */
}

/* ==================================================================== */
/* ==========================  LOGIN SPLIT  =========================== */
/* ==================================================================== */

body.page-login.login-v2 {
  min-height: 100vh;
}

.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

.login-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Tightened from 40px / clamp(32,5vw,64) once the flow moved in here: the
     panel is overflow:hidden and 100vh, so anything that doesn't fit is silently
     clipped — the last band vanished at 720p with no scrollbar to hint at it. */
  gap: 22px;
  padding: clamp(24px, 3.4vw, 44px);
  color: #fff;
  background:
    radial-gradient(700px 380px at 90% 0%, rgba(0, 255, 243, 0.22), transparent 55%),
    linear-gradient(155deg, #0a3d91 0%, #007dff 58%, #00a7c4 120%);
  overflow: hidden;
}

.login-aside::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
  pointer-events: none;
}

.login-aside-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.login-aside-brand .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* One dial for the whole panel. Everything below is sized in em, so the hero
   grows into a tall screen and tightens on a short one instead of sitting in the
   top corner of a 900px panel at a fixed 14px. Tied to vh, not vw: the panel is
   full-height and it's vertical space we're filling.
   The aside is display:none under 820px, so this only ever runs on a laptop or
   bigger — no phone case to fight. */
.login-aside-body {
  position: relative;
  z-index: 1;
  font-size: clamp(1.05rem, 2vh, 1.6rem);
}

.login-aside-title {
  margin: 0 0 0.5em;
  font-size: 2.05em;
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.login-aside-lede {
  margin: 0 0 1.5em;
  font-size: 1em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  max-width: 44ch;
}

/* ---- Login: how a claim flows through the platform ----
   A curved path with the stages sitting on it. The curve bends IN to our node
   and back OUT to the insurer's, so the shape itself says "sandwiched between
   your systems" before anyone reads a word. Their stages are plain nodes on the
   line; ours is the lit card the line runs through.
   All colour is white-on-gradient — the aside is a blue field. */
.flow {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Wide enough to use the panel: the cards used to shrink to their text and
     left half the aside empty. Capped so lines stay readable. */
  max-width: 62ch;
}

.flow-band {
  display: flex;
  align-items: flex-start;
  gap: 0.85em;
}

/* Ours steps out along the curve — the bend is what makes it read as a path
   rather than a list. */
.flow-band.is-ours {
  margin-left: 2.2em;
}

/* The node the curve passes through. */
.flow-node {
  flex-shrink: 0;
  width: 2.3em;
  height: 2.3em;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
.flow-node svg {
  width: 1.2em;
  height: 1.2em;
}

.flow-band.is-ours .flow-node {
  border-color: #fff;
  background: #fff;
  color: var(--sky-deep);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18);
}

.flow-card {
  /* Fill the column rather than shrink-wrapping the text — that left the right
     half of the panel empty. */
  flex: 1 1 auto;
  padding: 0.6em 0.9em;
  border-radius: 10px;
  border: 1px solid transparent;
  min-width: 0;
}

/* Only ours is a panel; the insurer's stages are just points on the line. This
   is the thing the eye should land on, so it gets the weight: brighter glass, a
   full-strength border, a lit edge and real depth. */
.flow-band.is-ours .flow-card {
  position: relative;
  padding: 0.85em 1.1em;
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 10px 34px rgba(0, 18, 56, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
}

/* A lit edge down the left — the curve arrives here. */
.flow-band.is-ours .flow-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--cyan), #fff);
}

/* The curve. Fixed-size SVGs between the bands rather than one long path: a band
   growing a line of text would otherwise pull a single path out of alignment. */
.flow-link {
  display: block;
  width: 4.4em;
  height: 2em;
  margin: -0.15em 0;
  overflow: visible;
}
.flow-link path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Into the platform: brighter, it's the claim arriving. */
.flow-link:not(.is-out) path {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-dasharray: 3 4;
}
.flow-link.is-out path {
  stroke-dasharray: 3 4;
}

.flow-band-name {
  margin: 0 0 0.35em;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.flow-band.is-ours .flow-band-name {
  color: #fff;
}

.flow-band-tag {
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sky-deep);
  font-size: 0.85em;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}

.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.flow-steps li {
  position: relative;
  padding-left: 1.25em;
  font-size: 0.92em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
}

/* Tick marks drawn in CSS — seven fewer SVGs on the page. */
.flow-steps li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.4em;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid rgba(255, 255, 255, 0.7);
  border-bottom: 1.6px solid rgba(255, 255, 255, 0.7);
  transform: rotate(-45deg);
}
.flow-band.is-ours .flow-steps li {
  color: #fff;
}
.flow-band.is-ours .flow-steps li::before {
  border-color: #fff;
}

.login-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.94);
}

.login-feature-ico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.9rem;
}

.login-aside-foot {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.login-panel {
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 56px);
  background: linear-gradient(180deg, #f7fbff, #eef4fb);
  /* Anchor for the POC marker. */
  position: relative;
}

/* The POC marker lives on the light panel, not the blue aside — muted grey on
   that gradient was effectively invisible. Absolute so it pins to the corner
   without pushing the centred sign-in card off-centre. */
.login-poc {
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(12px, 2.5vw, 24px);
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
}

.login-v2 .login-card {
  width: min(400px, 100%);
  animation: fade-up 0.4s ease both;
}

@media (max-width: 820px) {
  .login-split {
    grid-template-columns: 1fr;
  }
  .login-aside {
    display: none;
  }
  .login-panel {
    min-height: 100vh;
  }
}

/* —— Location suggestions (click to fill) —— */
.location-suggest {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 2px;
}

.location-suggest[hidden] {
  display: none !important;
}

.location-suggest .loc-suggest-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.location-suggest .loc-suggest-chip:hover,
.location-suggest .loc-suggest-chip:focus-visible {
  border-color: var(--sky);
  background: var(--accent-soft);
  color: var(--navy-deep);
  box-shadow: none;
  transform: none;
  outline: none;
}

.location-suggest .loc-suggest-pin {
  flex-shrink: 0;
  color: var(--sky);
}

.location-suggest .loc-suggest-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* —— Analysing overlay (submit → results) —— */
.analyze-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 20, 38, 0.55);
  backdrop-filter: blur(6px);
  animation: fade-in 0.2s ease both;
}

.analyze-overlay[hidden] {
  display: none !important;
}

.analyze-card {
  width: min(440px, 100%);
  padding: 30px 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(0, 40, 90, 0.35);
  text-align: center;
  animation: zoom-in 0.2s ease both;
}

.analyze-spinner-lg {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border: 3px solid #d5e3f2;
  border-top-color: var(--sky);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.analyze-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}

.analyze-sub {
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}

.analyze-bar {
  height: 7px;
  width: 100%;
  border-radius: 999px;
  background: #e6eef7;
  overflow: hidden;
  margin: 0 0 18px;
}

.analyze-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cerulean), var(--sky) 60%, var(--sky-deep));
  transition: width 0.6s ease;
}

.analyze-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.analyze-step {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--ink);
}

.analyze-step-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 0 rgba(0, 125, 255, 0.5);
  animation: pulse-dot 1.3s ease-in-out infinite;
}

.analyze-step:nth-child(2) .analyze-step-dot { animation-delay: 0.25s; }
.analyze-step:nth-child(3) .analyze-step-dot { animation-delay: 0.5s; }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 125, 255, 0.45); opacity: 0.6; }
  50% { box-shadow: 0 0 0 5px rgba(0, 125, 255, 0); opacity: 1; }
}

/* —— Platform intro: single blue workflow panel —— */
.platform-intro {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

.platform-intro[hidden] {
  display: none !important;
}

body.platform-intro-open {
  overflow: hidden;
}

.platform-intro-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 16, 36, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.platform-intro-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Wide enough for step lines to stay on one line. */
  width: min(620px, calc(100vw - 24px));
  max-height: min(96dvh, 820px);
  height: auto;
  min-height: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(4, 20, 48, 0.42);
  animation: fade-up 0.35s ease both;
}

.platform-intro-panel {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  /* Brand / scrollable body / CTA — CTA row never collapses or clips. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 22px 22px 18px;
  overflow: hidden;
  color: #fff;
  background-color: #0a3d91;
  background-image:
    radial-gradient(620px 330px at 92% 0%, rgba(0, 255, 243, 0.18), transparent 56%),
    linear-gradient(155deg, #0a3d91 0%, #007dff 58%, #00a7c4 120%);
}

.platform-intro-panel::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  pointer-events: none;
}

.platform-intro-brand {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.platform-intro-brand .brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.platform-intro-brand .brand-mark svg {
  width: 22px;
  height: 22px;
}

.platform-intro-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 0.95rem;
}

.platform-intro-title {
  margin: 0 0 0.4em;
  font-size: 1.7rem;
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 750;
  white-space: nowrap;
}

.platform-intro-lede {
  margin: 0 0 1em;
  max-width: none;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.platform-intro-panel .flow {
  max-width: none;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.platform-intro-panel .flow-band {
  gap: 0.75em;
}

.platform-intro-panel .flow-card {
  flex: 1 1 auto;
  min-width: 0;
}

.platform-intro-panel .flow-band:not(.is-ours) .flow-node {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.platform-intro-panel .flow-band:not(.is-ours) .flow-band-name,
.platform-intro-panel .flow-band:not(.is-ours) .flow-steps li {
  color: #fff;
}

.platform-intro-panel .flow-band:not(.is-ours) .flow-steps li::before {
  border-color: #fff;
}

.platform-intro-panel .flow-band.is-ours {
  margin-left: 1.1em;
}

.platform-intro-panel .flow-band.is-ours .flow-card {
  padding: 0.75em 0.95em;
  border-color: rgba(255, 255, 255, 0.8);
  /* Solid navy so white copy stays readable. */
  background: #062e72;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 10px 28px rgba(0, 18, 56, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.platform-intro-panel .flow-band.is-ours .flow-band-name,
.platform-intro-panel .flow-band.is-ours .flow-steps li {
  color: #fff;
}

.platform-intro-panel .flow-band.is-ours .flow-steps li::before {
  border-color: #fff;
}

.platform-intro-panel .flow-band-name {
  color: #fff;
  letter-spacing: 0.07em;
}

.platform-intro-panel .flow-band-tag {
  background: #fff;
  color: #0a3d91;
  font-weight: 750;
}

.platform-intro-panel .flow-steps li {
  color: #fff;
  font-size: 0.95em;
  line-height: 1.4;
  white-space: nowrap;
}

.platform-intro-panel .flow-link {
  width: 4em;
  height: 1.5em;
  margin: -0.05em 0;
  overflow: visible;
}

.platform-intro-panel .flow-link path {
  stroke: rgba(255, 255, 255, 0.85);
}

/* Beat global button styles (blue fill) — white CTA with dark text. */
button.platform-intro-continue,
.platform-intro-continue {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  border: 0 !important;
  border-radius: 12px;
  padding: 13px 18px;
  font: inherit;
  font-size: 1rem;
  font-weight: 750;
  cursor: pointer;
  color: #0a3d91 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 8px 22px rgba(0, 18, 56, 0.22);
}

button.platform-intro-continue:hover:not(:disabled),
.platform-intro-continue:hover:not(:disabled) {
  color: #0a3d91 !important;
  background: #f3f8ff !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(0, 18, 56, 0.28);
  transform: translateY(-1px);
  filter: none;
}

button.platform-intro-continue:active:not(:disabled),
.platform-intro-continue:active:not(:disabled) {
  color: #0a3d91 !important;
  background: #e8f1fc !important;
  background-image: none !important;
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0, 18, 56, 0.2);
}

button.platform-intro-continue:focus-visible,
.platform-intro-continue:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

@media (max-width: 540px) {
  .platform-intro-dialog {
    width: min(100%, calc(100vw - 20px));
  }

  .platform-intro-panel {
    padding: 16px;
    gap: 12px;
  }

  .platform-intro-panel .flow {
    max-width: none;
  }

  .platform-intro-panel .flow-band.is-ours {
    margin-left: 0.6em;
  }

  .platform-intro-title {
    white-space: normal;
    font-size: 1.45rem;
  }

  .platform-intro-panel .flow-steps li {
    white-space: normal;
  }
}

@media (max-height: 620px) {
  .platform-intro-panel {
    gap: 10px;
    padding: 14px 16px;
  }

  .platform-intro-brand .brand-mark {
    width: 34px;
    height: 34px;
  }

  .platform-intro-title {
    font-size: 1.35rem;
  }

  .platform-intro-lede {
    margin-bottom: 0.7em;
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .platform-intro-body {
    font-size: 0.86rem;
  }

  .platform-intro-panel .flow-link {
    height: 1.2em;
  }

  button.platform-intro-continue,
  .platform-intro-continue {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 0.95rem;
  }
}