/* Housetrap - all styling is local. Nothing is coded as good or poor.
 *
 * Colour says which group a card belongs to, never a verdict on a place. There
 * is no warning colour and no stop/go pairing anywhere. Every accent keeps WCAG
 * AA contrast on the surface it is used on, in both themes.
 */

:root {
  color-scheme: light dark;

  /* Brand (W5-BRAND). Ink and gold are the brand; the gold used as text on the
     ink band (--gold) is not the gold used as text on a light surface
     (--gold-text: AA on the paper colour). */
  --ink: #16263f;
  --gold: #f4b740;
  --gold-text: #9a6400;
  --band: #16263f; /* the header band, ink in both themes */
  --on-band: #ffffff;
  --band-muted: rgba(255, 255, 255, 0.85);

  --bg: #f7f5ef; /* paper */
  --fg: #16181d;
  --muted: #565d6c;
  --line: #c9ccd4;
  --soft: #f2f3f6;
  --card: #ffffff;
  --focus: #0b5fff;
  --radius: 12px;
  --max: 70rem; /* 1120 px */
  --measure: 9rem; /* width of the distance chip + bar column */
  --tile: 36px; /* the icon tile beside a row name */
  --bar-w: 121px; /* four 28 px segments + three 3 px gaps */
  --step-w: 102px; /* five 18 px segments + four 3 px gaps */

  /* Group accents: amber-brown, green-teal, slate-blue, grey. */
  --accent-watch: #8a4b12;
  --accent-plus: #0f6b52;
  --accent-info: #33506f;
  --accent-withheld: #666d7c;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1826;
    --fg: #e8eaee;
    --muted: #a4a9b4;
    --line: #3a3f49;
    --soft: #1d2026;
    --card: #191c21;
    --focus: #7fb2ff;
    --band: #16263f; /* the band stays ink on the dark page */
    --accent-watch: #e6b273;
    --accent-plus: #7fd6b4;
    --accent-info: #9dc2e6;
    --accent-withheld: #9aa1ad;
    --on-accent: #14161a;
  }
}

* { box-sizing: border-box; }

/* The hidden attribute must win over a display rule (examples, bar legend). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

main,
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Screen-reader only: keeps the plain summary sentence in the DOM behind the tiles. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -- type scale ------------------------------------------------------------- */

h1 {
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* -- the ink brand band ------------------------------------------------------ */

.band {
  background: var(--band);
  color: var(--on-band);
  /* The lower padding is the strip the search card overlaps (about 40 px). */
  padding: 1.6rem 0 3.4rem;
  margin-bottom: -2.5rem;
}

.band-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.band-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: none;
}

.wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem); /* about 30 px */
  line-height: 1;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wm-house { color: var(--on-band); }
.wm-trap { color: var(--gold); }

.tagline {
  margin: 0;
  color: var(--band-muted);
  font-size: 1.02rem;
  font-weight: 500;
}

.intro {
  margin: 0.85rem 0 0;
  max-width: 60ch; /* about 60 characters a line */
  font-size: 1.02rem;
}

/* A results page keeps the band but drops the intro line and tightens up, so
   results start high on the screen. */
.band.is-results { padding-bottom: 3rem; }
.band.is-results .intro { display: none; }

/* -- the search block as a hero --------------------------------------------- */

.hero { margin: 0; }

.lookup {
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 10px 30px rgba(22, 38, 63, 0.14);
}

.lookup-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.lookup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

input[type="text"] {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 54px;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: 1.25rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

button {
  font: inherit;
  cursor: pointer;
}

.lookup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 54px;
  padding: 0.6rem 1.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 10px;
}

.lookup-button .icon { width: 18px; height: 18px; }

.lookup-button:hover { filter: brightness(1.08); }

/* The primary button flips to gold with ink text on the dark page. This sits
   after the base rule so it wins on equal specificity. */
@media (prefers-color-scheme: dark) {
  .lookup-button {
    color: var(--ink);
    background: var(--gold);
    border-color: var(--gold);
  }
}

.hint {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 46rem;
}

/* Prose wraps without leaving one word on the last line (ignored where the
   browser does not support it). */
.hint,
.state-card p,
.factor-note,
.card-sources,
.withheld-note,
.attributions li,
.not-found-row,
.footer-note { text-wrap: pretty; }

.examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.examples-label {
  color: var(--muted);
  font-size: 0.92rem;
}

.chip {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.95rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.chip:hover { border-color: var(--muted); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* -- the three trust items under the search card ----------------------------- */

.trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.trust-icon { display: inline-flex; color: var(--accent-info); }
.trust-icon .icon { width: 16px; height: 16px; }

/* -- states ----------------------------------------------------------------- */

.status { min-height: 0; }

.state-card {
  max-width: 40rem;
  margin: 1.75rem auto;
  padding: 1.5rem 1.5rem 1.6rem;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.state-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.state-card p { margin: 0.35rem 0 0; color: var(--muted); }

.state-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--fg);
}

.state-error { border-left: 6px solid var(--accent-withheld); }

.error-message { margin: 0; font-weight: 600; color: var(--fg); }
.error-hint { margin: 0.5rem 0 0; color: var(--muted); }

/* -- empty state: three "what you get" cards --------------------------------- */

.what-you-get {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}

.feature-card {
  padding: 1.1rem 1.15rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent, var(--line));
  border-radius: var(--radius);
}

.feature-watch { --accent: var(--accent-watch); }
.feature-plus { --accent: var(--accent-plus); }
.feature-withheld { --accent: var(--accent-withheld); }

.feature-icon { display: inline-flex; color: var(--accent, var(--muted)); }
.feature-icon .icon { width: 22px; height: 22px; }

.feature-title {
  margin: 0.5rem 0 0.35rem;
  font-size: 1.05rem;
}

.feature-copy { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* -- summary strip ---------------------------------------------------------- */

.summary-strip { margin: 1.5rem 0 0; }

.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.stat {
  padding: 0.85rem 1rem 0.9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.88rem;
}

/* -- layout: rings beside the cards on a wide screen ------------------------ */

.layout { display: block; }

.col-side { margin-top: 1.25rem; }

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

.card {
  margin: 1.25rem 0 0;
  padding: 1rem 1.15rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent, var(--line));
  border-radius: var(--radius);
}

.card-watch { --accent: var(--accent-watch); }
.card-plus { --accent: var(--accent-plus); }
.card-info { --accent: var(--accent-info); }

.card-withheld {
  --accent: var(--accent-withheld);
  background: var(--soft);
  border: 1px dashed var(--line);
  border-top: 4px solid var(--accent);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.card-head h2 {
  margin: 0;
  font-size: 1.18rem;
}

.card-icon { display: inline-flex; color: var(--accent, var(--muted)); }

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The hidden sprite sheet of icons. */
.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* -- one factor row --------------------------------------------------------- */

.factor {
  display: grid;
  grid-template-columns: var(--tile) minmax(0, 1fr) var(--measure);
  grid-template-areas:
    "tile name measure"
    ".    note note";
  column-gap: 0.65rem;
  row-gap: 0.25rem;
  align-items: center;
  min-height: 52px;
  padding: 0.45rem 0.35rem;
  border-top: 1px solid var(--line);
}

.factor:first-child { border-top: 0; }

/* The 36 px rounded tile: the row's icon, tinted with the card accent. The
   number badge sits on its top-right corner, the same number as on the rings. */
.factor-tile {
  grid-area: tile;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tile);
  height: var(--tile);
  color: var(--accent, var(--muted));
  background: var(--soft);
  background: color-mix(in srgb, var(--accent, var(--muted)) 13%, var(--card));
  border-radius: 10px;
}

.factor-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 1.05rem;
  padding: 0.02rem 0.24rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--on-accent);
  background: var(--accent, var(--muted));
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.factor-name {
  grid-area: name;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* Desktop: the name is left, the chip and the bar share one line on the right. */
.factor-measure {
  grid-area: measure;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.factor-chip {
  font-size: 0.92rem;
  color: var(--fg);
  white-space: nowrap;
}

.factor-note {
  grid-area: note;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* A row that sits on the rings lights up with its dot. */
.factor.is-active {
  background: var(--soft);
  box-shadow: inset 3px 0 0 var(--accent, var(--line));
  border-radius: 6px;
}

/* -- four-segment distance bar ---------------------------------------------- */

.bar {
  display: inline-flex;
  gap: 3px;
}

.bar-seg {
  display: block;
  width: 28px;
  height: 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
}

.bar-seg-on {
  background: var(--accent, var(--fg));
  border-color: var(--accent, var(--fg));
}

/* The nearer/further legend: once per card, directly above the first bar, exactly
   the width of a bar at every screen size. */
.bar-legend {
  display: grid;
  grid-template-columns: var(--tile) minmax(0, 1fr) var(--measure);
  column-gap: 0.65rem;
  align-items: center;
  padding: 0.25rem 0.35rem 0.1rem;
}

.bar-ends,
.step-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Right-aligned in the measure column so it sits over the bars, which are
   right-aligned there too. */
.bar-ends { grid-column: 3; width: var(--bar-w); margin-left: auto; }

/* A compact key to the four distance bands, under the rings. */
.band-key {
  list-style: none;
  margin: 0.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.band-key li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.band-key-label { color: var(--muted); font-size: 0.88rem; }

/* -- five-step scale for factors that are not a distance -------------------- */

.step-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-end;
}

.step-scale { display: inline-flex; gap: 3px; }

.step-seg {
  display: block;
  width: 18px;
  height: 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
}

.step-seg-on {
  background: var(--accent, var(--fg));
  border-color: var(--accent, var(--fg));
}

.step-ends { width: var(--step-w); }

/* -- incomplete pill -------------------------------------------------------- */

.incomplete-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem 0.1rem 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent, var(--muted));
  border: 1px solid currentColor;
  border-radius: 999px;
  vertical-align: middle;
}

.incomplete-pill .icon { width: 14px; height: 14px; }

.factor-incomplete { margin-top: 0.3rem; }

/* -- not found within 5 km: chips, not a sentence --------------------------- */

.not-found-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.not-found-chips { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }

.not-found-chip {
  padding: 0.15rem 0.55rem;
  font-size: 0.85rem;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 999px;
}

/* -- withheld entries ------------------------------------------------------- */

.withheld-note {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.factor-withheld .factor-name { color: var(--fg); }

/* -- sources once per card -------------------------------------------------- */

.card-sources {
  margin: 0.7rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.card-sources:empty { display: none; }

/* -- the rings -------------------------------------------------------------- */

.card-rings { border-top-color: var(--line); }

.map {
  display: block;
  width: 100%;
  max-width: 22.5rem; /* 360 px */
  height: auto;
  margin: 0.25rem auto 0;
}

.ring {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.ring-label {
  fill: var(--muted);
  font-size: 12px;
  font-family: inherit;
}

.centre { fill: var(--fg); }

.dot { stroke: var(--card); stroke-width: 2; }
.dot-watch { fill: var(--accent-watch); }
.dot-plus { fill: var(--accent-plus); }
.dot-info { fill: var(--accent-info); }

.dot.is-active { stroke: var(--fg); stroke-width: 3.5; }

.dot-num {
  fill: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  text-anchor: middle;
  pointer-events: none;
}

.caption {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* -- footer ----------------------------------------------------------------- */

.site-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
  border-top: 2px solid var(--line);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
}

.footer-heading {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.attributions {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.86rem;
}

.attributions li { margin: 0 0 0.35rem; }

.footer-brand {
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.footer-mark {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 0.4rem;
}

.disclaimer { margin: 0; font-weight: 600; }

.built { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9rem; }

.footer-note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.86rem; }

.footer-icons { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.84rem; }

/* -- phone ------------------------------------------------------------------ */

@media (max-width: 35rem) {
  .factor {
    grid-template-columns: var(--tile) minmax(0, 1fr);
    grid-template-areas:
      "tile name"
      ".    measure"
      ".    note";
  }

  /* Phone: name on the first line, chip and bar on the second. The bar keeps to
     the right edge so the legend's ends, right-aligned on the line above, sit
     exactly over it at every screen size. */
  .factor-measure {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.6rem;
  }

  /* Phone, non-distance rows: the label sits on its own line, then the scale with
     its end labels, which are the same width as the scale. */
  .step-box { flex-basis: 100%; align-items: flex-start; }

  .bar-legend {
    grid-template-columns: var(--tile) minmax(0, 1fr);
  }

  /* Same width and right edge as the bar (the base rule's margin-left: auto). */
  .bar-legend .bar-ends { grid-column: 2; }

  .stats { gap: 0.5rem; }
  .stat { padding: 0.7rem 0.7rem 0.75rem; }
  .stat-number { font-size: 1.7rem; }
  .stat-label { font-size: 0.78rem; }

  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

  /* Phone: a smaller mark, everything stacked, and one "what you get" card a row. */
  .brand-mark { width: 36px; height: 36px; }
  .what-you-get { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 24rem) {
  main, .band-inner, .site-footer { padding: 0 1rem; }
  .stats { grid-template-columns: minmax(0, 1fr); }
}

/* -- desktop: rings in a sticky side column --------------------------------- */

@media (min-width: 62.5rem) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 23rem;
    grid-template-areas: "main side";
    gap: 2.5rem;
    align-items: start;
  }

  .col-main { grid-area: main; }
  .col-side { grid-area: side; margin-top: 1.25rem; position: sticky; top: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -- print ------------------------------------------------------------------ */

@media print {
  .icon-defs,
  .examples,
  .lookup-button { display: none; }

  body { background: #fff; color: #000; }

  .col-side { position: static; }
  .site-footer { border-top-color: #000; }

  .card,
  .state-card,
  .stat { border-color: #999; background: #fff; }
}