:root {
  /* Declared explicitly: without it Chrome's auto-dark-mode re-colours the
     whole page, which silently changes the contrast of the severity dots and
     the grade stamp — the two things a landlord reads fastest. This design is
     light-only for now; a real dark theme is its own piece of work. */
  color-scheme: light;

  /* The analyzer and /check on the design layer (/brand/tokens.css, loaded
     first, then /brand.css). The old names stay so the rules below read as
     they did; each now points at a token. --ink, --line, --ok and --danger
     come straight from the tokens. */
  --muted: var(--ink-muted);
  --bg: var(--surface-100);
  --card: var(--surface);
  --accent: var(--charcoal);
  --accent-soft: var(--mint-soft);
  --radius: var(--radius-lg);
  --column: 40rem;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only a UA `display: none`, so any author rule that
   sets display — .stamp and .cta-form both do — silently overrides it. That
   showed an empty grade stamp for the whole 90-second wait. Anything toggled
   through `hidden` needs this to actually stay hidden. */
[hidden] { display: none !important; }

/* Body type, background and the top bar come from /brand.css. */

.page {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-12);
}

h1 { margin: 0 0 var(--space-2); font: 700 28px/34px var(--font-sans); letter-spacing: -0.005em; }
@media (min-width: 40rem) { h1 { font-size: 32px; line-height: 38px; } }
.lede { margin: 0 0 2rem; color: var(--muted); }

form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.dropzone {
  display: block;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-100);
  padding: 2.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

/* The input inside the label is the focusable control, so the zone shows the
   focus ring on its behalf. */
.dropzone:hover,
.dropzone:focus-within,
.dropzone.is-dragging {
  border-color: var(--charcoal);
  background: var(--mint-soft);
  outline: none;
}

.dropzone.is-dragging { border-style: solid; }

.dropzone-title { display: block; margin: 0 0 0.25rem; font-weight: 600; }
.dropzone-sub { display: block; margin: 0 0 0.75rem; color: var(--muted); font-size: 0.95rem; }
.link-ish { color: var(--accent); text-decoration: underline; }
.dropzone-help { display: block; margin: 0; color: var(--muted); font-size: 0.85rem; }

.file-chosen {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.75rem;
  background: var(--accent-soft);
  border-radius: 8px;
  font-size: 0.9rem;
  word-break: break-word;
}

.consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 1.25rem 0;
  font-size: 0.95rem;
  cursor: pointer;
}

.consent input { margin-top: 0.25rem; flex: none; width: 1.05rem; height: 1.05rem; }

/* The primary action: mint with charcoal text, as every other page
   (brand book, Buttons). */
button {
  width: 100%;
  min-height: 44px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mint);
  border-radius: var(--radius-md);
  background: var(--mint);
  color: var(--charcoal);
  font: 600 16px/24px var(--font-sans);
  cursor: pointer;
}

button:disabled { background: var(--surface-100); border-color: var(--line); color: var(--ink-muted); cursor: not-allowed; }
button:not(:disabled):hover { filter: brightness(0.97); }

.status { margin: 0.9rem 0 0; font-size: 0.92rem; min-height: 1.2rem; }
.status.is-error { color: var(--danger); }
.status.is-ok { color: var(--ok); }
.status code { background: var(--bg); padding: 0.1rem 0.35rem; border-radius: 4px; }

.disclaimer {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
}

.disclaimer p { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Email field ------------------------------------------------------- */

.field { display: block; margin: 1.1rem 0 0; }
.field-label { display: block; margin-bottom: 0.35rem; font-size: 0.95rem; font-weight: 600; }

.field input {
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: 400 16px/24px var(--font-sans);
  background: var(--surface);
  color: var(--ink);
}

.field input:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 1px; border-color: var(--charcoal); }

/* --- Report card ------------------------------------------------------- */

.report {
  margin-top: 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.report-head h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.report-status { margin: 0; color: var(--muted); font-size: 0.92rem; }

.report-rows { list-style: none; margin: 1rem 0 0; padding: 0; }

.report-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}

.report-row .sev {
  flex: none;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  margin-top: 0.45rem;
  background: var(--muted);
}

.report-row.is-danger .sev { background: var(--danger); }
.report-row.is-warning .sev { background: var(--warn); }
.report-row.is-info .sev { background: var(--ok); }

.report-row .copy { flex: 1; }
.report-row .grade { flex: none; font-weight: 700; color: var(--muted); }
.report-row.is-danger .grade { color: var(--danger); }

.report-row .flag {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* A reading a person has confirmed. Quieter than the pending flag on purpose:
   it is reassurance, not something the landlord has to wait for. */
.report-row .flag.is-verified { color: var(--ok); }

/* A reading whose document expired before anyone could check it. */
.report-row .flag.is-expired { color: var(--danger); }

/* Market calibration. `endemic` is deliberately the calmer of the two: it is
   telling the landlord to stop worrying, so it must not look like an alarm.
   `trade-off` has no chip at all — see lib/calibration.js. */
.report-row .calibration {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.report-row .calibration.is-endemic { background: var(--bg); color: var(--muted); }
.report-row .calibration.is-fixable { background: var(--accent-soft); color: var(--accent); }

/* The one line that turns a letter into a to-do. Sits directly under the
   stamp, so it reads as part of the verdict rather than a footnote. */
.report-driver {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
}

/* The exposure line, when it leads. Same weight as the paying line — it is a
   headline number, not a caption. */
.hero-line.is-exposure .hero-number { color: var(--danger); }

/* Day 1-60: the refund figures are replaced, not merely hidden, so the block
   still earns its space. */
.switch-early-copy { margin: 0 0 0.5rem; }
.switch-early-questions { margin: 0 0 0.75rem; padding-left: 1.2rem; }
.switch-early-questions li { margin-bottom: 0.35rem; }

/* Turnstile keeps its own dimensions; this only reserves the space so the
   submit button does not jump when the widget finishes loading. */
.challenge:not(:empty) { margin: 0.75rem 0; min-height: 1px; }

.report-review { margin: 1rem 0 0; font-size: 0.88rem; color: var(--muted); }

/* --- Sequence ----------------------------------------------------------- */

.report-head { position: relative; }

.skip {
  position: absolute;
  top: 0; right: 0;
  width: auto;
  padding: 0.3rem 0.6rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.skip:not(:disabled):hover { background: var(--bg); color: var(--ink); }

.report-row {
  opacity: 0;
  transform: translateY(6px);
  animation: row-in 260ms ease-out forwards;
}

@keyframes row-in {
  to { opacity: 1; transform: none; }
}

.report-row .tally { font-variant-numeric: tabular-nums; font-weight: 600; }

.report-row .grade.is-rolling { opacity: 0.55; }

/* The stamp: lands slightly oversized, then settles. */
.stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin: 1.5rem 0 0.5rem;
  padding: 1rem;
  border: 3px solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  transform: rotate(-2deg);
  animation: stamp-in 420ms cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}

.stamp.is-good { border-color: var(--ok); color: var(--ok); }

/* Not a grade — a statement that we do not have one yet. Deliberately grey:
   the stamp shape carries the finality, and the colour must not imply a
   verdict in either direction. */
.stamp.is-incomplete { border-color: var(--muted); color: var(--muted); }
.stamp.is-incomplete .stamp-grade {
  font-size: 1.35rem;
  letter-spacing: 0.1em;
}
.stamp.is-mid { border-color: var(--warn); color: var(--warn); }

.stamp-grade { font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.stamp-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-2deg) scale(1.6); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}

/* --- Questions and CTA --------------------------------------------------- */

.questions, .cta {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.questions h3, .cta-heading { margin: 0 0 0.75rem; font-size: 1.02rem; }

.questions-list { margin: 0; padding-left: 1.25rem; }
.questions-list li { margin-bottom: 0.6rem; line-height: 1.5; }
.questions-list li:last-child { margin-bottom: 0; }

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

.cta-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cta-form input {
  flex: 1 1 12rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: 400 16px/24px var(--font-sans);
}
.cta-form button { width: auto; flex: none; padding: 0.7rem 1.1rem; }

.cta-status { margin: 0.7rem 0 0; font-size: 0.92rem; }
.cta-status.is-ok { color: var(--ok); }
.cta-status.is-error { color: var(--danger); }

/* Reduced motion: the same final state, arrived at instantly. */
@media (prefers-reduced-motion: reduce) {
  .report-row { opacity: 1; transform: none; animation: none; }
  .stamp { opacity: 1; transform: rotate(-2deg); animation: none; }
}

/* --- Waiting honestly ---------------------------------------------------- */

.report-status { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }

.elapsed {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.report-expected { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.85rem; }

.report-error {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: 8px;
  color: var(--danger);
  font-size: 0.92rem;
}

/* --- Waiting bar --------------------------------------------------------- */

/* Tracks elapsed time against a measured median, not work completed — the
   extractor cannot say how far through a document it is. Hence the cap, and
   hence the switch to an indeterminate shimmer once the median passes. */

.found {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
}

.progress {
  height: 6px;
  margin: 0.6rem 0 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 900ms linear;
}

/* Past the median we stop claiming to know how far along it is. */
.progress.is-overdue .progress-fill {
  width: 100% !important;
  transition: none;
  background: linear-gradient(90deg, var(--bg) 0%, var(--accent) 50%, var(--bg) 100%);
  background-size: 220% 100%;
  animation: progress-shimmer 1.6s linear infinite;
  opacity: 0.65;
}

@keyframes progress-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
  .progress.is-overdue .progress-fill {
    animation: none;
    background: var(--accent);
    opacity: 0.45;
  }
}
/* --- Hero: money first --------------------------------------------------- */

.hero {
  margin: 0 0 1.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
}

.hero-line { margin: 0 0 0.9rem; }
.hero-line:last-of-type { margin-bottom: 0; }

.hero-label {
  margin: 0 0 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-number {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero-line.is-gap .hero-number { color: var(--danger); }

.hero-note { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--muted); }
.hero-number.is-unavailable { font-size: 1rem; font-weight: 600; color: var(--muted); }

/* --- Switch now ---------------------------------------------------------- */

.switch-now {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.switch-now h3 { margin: 0 0 0.5rem; font-size: 0.98rem; }
.switch-term { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--muted); }

.switch-refunds, .switch-scenarios { list-style: none; margin: 0; padding: 0; }
.switch-refunds li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.94rem;
}
.switch-key { color: var(--muted); }

.switch-scenarios { margin-top: 0.7rem; }
.switch-scenarios li {
  padding: 0.45rem 0 0.45rem 0.75rem;
  border-left: 3px solid var(--line);
  margin-bottom: 0.45rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.switch-assumption, .switch-caveat {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.switch-caveat { font-style: italic; }