/* ==========================================================================
   Greenviews design system
   --------------------------------------------------------------------------
   Near-black base with a muted moss accent. Deliberately not the neon of
   the E-BUS build: the engineering character carries across, the sci-fi
   register does not — this is a UK trade business and an environmental
   data tool, and it should read as considered rather than futuristic.

   No imagery beyond two genuine allotment photographs. Everything else is
   type, rule, and space.

   Mobile first. Someone standing on an allotment checking an address is a
   real user, so the narrow layout is the default and the wide one is the
   enhancement.
   ========================================================================== */

:root {
    /* Surfaces, darkest to lightest. */
    --bg:            #0b0d0c;
    --surface:       #121614;
    --surface-raise: #1a201d;
    --surface-sunk:  #080a09;

    /* Rules and edges. */
    --line:          #232b27;
    --line-strong:   #33403a;

    /* Type. */
    --text:          #dfe5e1;
    --text-muted:    #93a099;
    --text-faint:    #63706a;

    /* Moss accent. Restrained: it marks state, it does not decorate. */
    --accent:        #6aab84;
    --accent-dim:    #43705a;
    --accent-glow:   rgba(106, 171, 132, 0.14);

    /* State. Amber for attention, not alarm — most findings are context,
       not danger, and the palette should not overstate them. */
    --flag:          #d0a25c;
    --flag-dim:      #6b5430;
    --flag-glow:     rgba(208, 162, 92, 0.12);

    /* Genuine failure, distinct from a finding. A check that could not run
       must never look like a check that found nothing. */
    --fail:          #c9736a;
    --fail-dim:      #6d3f3a;

    --ok:            #6aab84;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --measure: 68ch;
    --radius:  3px;

    /* Type scale, sized for a 380px phone. Larger values are applied at
       the wide breakpoint rather than scaled down here, so the narrow
       layout is never an afterthought. */
    --step-0: 0.9375rem;
    --step-1: 1rem;
    --step-2: 1.1875rem;
    --step-3: 1.375rem;
    --step-4: 1.75rem;

    --gutter: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 {
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
    /* Long place names and species must not overflow a narrow screen. */
    overflow-wrap: break-word;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); margin-top: 2rem; }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1em; max-width: var(--measure); }

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
a:hover { color: var(--text); }

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

img { max-width: 100%; height: auto; display: block; }

/* Anchored sections must not land under the sticky header. */
[id] { scroll-margin-top: 5.5rem; }

/* --------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------
   Single column by default. The sidebar appears only where there is genuine
   room for it — below that width it would squeeze the content for
   information nobody asked for.
   -------------------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.layout {
    flex: 1 0 auto;
    display: block;
}

.layout__main { padding: 1.5rem 0 3rem; min-width: 0; }

/* Hidden entirely on narrow screens rather than reflowed below the content:
   a status panel is supporting information, and appending it to the end of
   every page on a phone would be noise. */
.layout__side { display: none; }

@media (min-width: 64rem) {
    .wrap { max-width: 76rem; }

    .layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 16rem;
        gap: 2.5rem;
        align-items: start;
    }

    .layout__side {
        display: block;
        position: sticky;
        top: 6rem;
        padding: 1.5rem 0 3rem;
    }
}

/* --------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------
   Four items do not warrant a menu button: they stay visible at every
   width, with the spacing tightened rather than the labels hidden. Nothing
   wraps — a two-line header on a phone wastes the space it is trying to
   save.
   -------------------------------------------------------------------------- */

.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 3rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.01em;
    flex: none;
}
.brand:hover { color: var(--text); }
.brand:hover .brand__mark { color: var(--text); }

.brand__mark {
    width: 1.35rem;
    height: 1.35rem;
    flex: none;
    color: var(--accent);
    transition: color 0.15s;
}

.brand__name {
    font-size: var(--step-1);
    white-space: nowrap;
}

.nav {
    display: flex;
    gap: 0.1rem;
    flex: none;
}

.nav a {
    display: inline-block;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a[aria-current="page"] {
    color: var(--accent);
    background: var(--accent-glow);
}

/* Below about 24rem the brand name yields before the nav does: the
   navigation is more useful than the wordmark, and the mark still
   identifies the site. */
@media (max-width: 23.5rem) {
    .brand__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .nav a { padding: 0.35rem 0.35rem; font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
   Conditions band
   --------------------------------------------------------------------------
   One line, every width. It runs a short sequence on load and settles into
   the readings.

   Kept to a single line deliberately: a header that grows to three lines on
   a phone costs more than the information is worth. On a narrow screen the
   text scrolls horizontally rather than wrapping, which keeps the header
   height fixed and lets someone read the rest by swiping.
   -------------------------------------------------------------------------- */

.conditions {
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
    position: sticky;
    top: 3rem;
    z-index: 19;
}

.conditions__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.9rem;
    /* One line always. Overflow scrolls rather than wrapping. */
    overflow-x: auto;
    scrollbar-width: none;
}
.conditions__inner::-webkit-scrollbar { display: none; }

.conditions__dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--text-faint);
    flex: none;
    animation: pulse 1.4s ease-in-out infinite;
}

.conditions__line {
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.conditions--ok .conditions__dot   { background: var(--accent); animation: none; }
.conditions--ok .conditions__line  { color: var(--text-muted); }

.conditions--fail .conditions__dot  { background: var(--fail); animation: none; }
.conditions--fail .conditions__line { color: var(--fail); }

@media (prefers-reduced-motion: reduce) {
    .conditions__dot { animation: none; opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------------
   A rule down the left edge ties it to the page rather than leaving it
   floating in the margin.
   -------------------------------------------------------------------------- */

.side {
    border-left: 1px solid var(--line);
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}

.side__intro {
    margin: 0 0 1.25rem;
    color: var(--text-faint);
    line-height: 1.55;
    max-width: none;
}

.side__label {
    display: block;
    margin: 0 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.side__search { margin: 0 0 1.5rem; }

.side__search input {
    font-size: 0.9375rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
}

.side__block { margin: 0 0 1.5rem; }
.side__block:last-child { margin-bottom: 0; }

.side__waiting {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
    max-width: none;
}

.btn--small {
    width: 100%;
    padding: 0.45rem 0.8rem;
    min-height: 2.25rem;
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Register statistics
   -------------------------------------------------------------------------- */

.stat {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}
.stat:last-child { border-bottom: 0; }

.stat__figure {
    display: block;
    font-size: var(--step-2);
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.stat__label {
    display: block;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Feed freshness
   --------------------------------------------------------------------------
   A stale feed is marked rather than hidden. The point of showing
   timestamps at all is that "no warnings active" means nothing without
   "as of when".
   -------------------------------------------------------------------------- */

.feed {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--line);
}
.feed:last-child { border-bottom: 0; }

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

.feed__age {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
    white-space: nowrap;
}

.feed--stale .feed__age { color: var(--flag); }

/* --------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------
   The headline states the gap the service fills, and the photographs prove
   it immediately underneath. Evidence before argument.
   -------------------------------------------------------------------------- */

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

.hero__eyebrow {
    margin: 0 0 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.hero h1 { margin-bottom: 0.6rem; max-width: 20ch; }

.hero__lede {
    font-size: var(--step-1);
    color: var(--text-muted);
    max-width: 46ch;
    margin-bottom: 1.5rem;
}

.hero__caption { margin: 1rem 0 1.5rem; font-size: 0.875rem; }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------
   Space does the separating; rules are used only where the page changes
   register — argument to method, method to scope, description to price.
   -------------------------------------------------------------------------- */

.section { padding: 2rem 0; }
.section > h2:first-child { margin-top: 0; }
.section__close { margin-top: 1.25rem; }

.section--ruled { border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   Enquiry stages
   --------------------------------------------------------------------------
   A progress indicator rather than navigation: it says where you are, not
   where you may go. The list markers are suppressed because each step
   carries its own number.
   -------------------------------------------------------------------------- */

.stages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.stage {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: var(--text-faint);
}

.stage__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
}

.stage--current { color: var(--text); }
.stage--current .stage__number {
    border-color: var(--accent-dim);
    background: var(--accent-glow);
    color: var(--accent);
}

.stage--done { color: var(--text-muted); }
.stage--done .stage__number {
    border-color: var(--accent-dim);
    color: var(--accent);
}
/* The number is replaced rather than kept: a completed step does not need
   its position, only its state. */
.stage--done .stage__number { font-size: 0; }
.stage--done .stage__number::after { content: "✓"; font-size: 0.75rem; }

.stage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: none;
    margin: 1.25rem 0 0;
}

/* --------------------------------------------------------------------------
   Address suggestions
   --------------------------------------------------------------------------
   Rendered inline rather than floating. A dropdown overlaying the hint text
   below it is fine on a desktop and awkward on a phone, where the keyboard
   already has half the screen.
   -------------------------------------------------------------------------- */

.suggestions {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-sunk);
    overflow: hidden;
}

.suggestion {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--line);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1.4;
}
.suggestion:last-child { border-bottom: 0; }

.suggestion:hover,
.suggestion:focus {
    background: var(--surface-raise);
    color: var(--text);
    outline: none;
}

/* --------------------------------------------------------------------------
   Map
   --------------------------------------------------------------------------
   Tall enough to pick a plot out from its neighbours, and taller on a
   desktop where there is room. Google's own controls sit on top of it, so
   nothing here styles them.
   -------------------------------------------------------------------------- */

.map {
    width: 100%;
    height: 20rem;
    margin: 0.5rem 0 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-sunk);
}

/* --------------------------------------------------------------------------
   Confirmed location
   -------------------------------------------------------------------------- */

.confirmed {
    padding: 0.9rem 1rem;
    margin: 0.5rem 0 0;
    background: var(--surface-sunk);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
}

.confirmed__address {
    margin: 0.5rem 0 0.25rem;
    font-size: var(--step-1);
    color: var(--text);
}

.confirmed__travel {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Hazards
   --------------------------------------------------------------------------
   Ticking one asks for detail, because what is there matters more than that
   something is. The detail field appears rather than sitting empty, so the
   form is short until the customer makes it longer.
   -------------------------------------------------------------------------- */

.hazards {
    display: grid;
    gap: 0.6rem;
    margin: 1.25rem 0 0;
}

.hazard {
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.hazard:has(input:checked) { border-color: var(--flag-dim); }

.hazard__check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
}

.hazard__check input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    accent-color: var(--flag);
}

.hazard__check span {
    display: block;
    color: var(--text-faint);
    font-size: 0.875rem;
    line-height: 1.45;
}

.hazard__check strong {
    display: block;
    color: var(--text);
    font-size: var(--step-0);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.hazard__detail {
    padding: 0 1rem 1rem 3rem;
    border-top: 1px solid var(--line);
    padding-top: 0.85rem;
}

.hazard__detail .field__label { margin-bottom: 0.35rem; }

@media (max-width: 30rem) {
    .hazard__detail { padding-left: 1rem; }
}

/* --------------------------------------------------------------------------
   Enquiry reference
   -------------------------------------------------------------------------- */

.reference {
    font-family: var(--font-mono);
    font-size: var(--step-1);
    color: var(--accent);
    padding: 0.85rem 1rem;
    background: var(--accent-glow);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
    max-width: none;
}

/* --------------------------------------------------------------------------
   Comparison
   -------------------------------------------------------------------------- */

.compare {
    display: grid;
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.compare__side {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.compare__title {
    margin: 0 0 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.8125rem;
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

@media (min-width: 42rem) {
    .compare { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   Tick lists
   -------------------------------------------------------------------------- */

.ticks {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
}

.ticks li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.5rem;
    font-size: 0.9375rem;
}

.ticks li::before {
    position: absolute;
    left: 0;
    top: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.ticks--yes li::before { content: "✓"; color: var(--accent); }
.ticks--no  li::before { content: "✗"; color: var(--text-faint); }

/* --------------------------------------------------------------------------
   Numbered steps
   -------------------------------------------------------------------------- */

.steps {
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.step {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }

.step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--accent-dim);
    border-radius: 50%;
    background: var(--accent-glow);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
}

.step__body h3 { margin: 0.15rem 0 0.35rem; }
.step__body p  { margin: 0; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------
   Native details and summary. No script, keyboard support for free, and an
   answer that is hidden costs nothing until it is opened.
   -------------------------------------------------------------------------- */

.faq {
    display: grid;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
}

.faq__item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq__item[open] { border-color: var(--line-strong); }

.faq__q {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.45rem;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.faq__item[open] .faq__q::before {
    transform: rotate(45deg);
    margin-top: 0.3rem;
}

.faq__q:hover { background: var(--surface-raise); }

.faq__a {
    padding: 0 1rem 1rem 2.15rem;
    color: var(--text-muted);
}

.faq__a p { margin: 0 0 0.75rem; }
.faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.prices {
    display: grid;
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.price {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-dim);
    border-radius: var(--radius);
}

.price__figure {
    font-size: var(--step-3);
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.price__body h3 { margin: 0 0 0.35rem; }
.price__body p  { margin: 0; color: var(--text-muted); }

@media (min-width: 34rem) {
    .price { grid-template-columns: 5rem 1fr; gap: 1.25rem; align-items: start; }
    .price__figure { padding-top: 0.1rem; }
}

/* --------------------------------------------------------------------------
   Showcase
   -------------------------------------------------------------------------- */

.showcase {
    display: grid;
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.showcase__figure {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-sunk);
}

.showcase__figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.showcase__figure figcaption {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

@media (min-width: 42rem) {
    .showcase { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
    display: grid;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.contact__item {
    display: block;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
}
.contact__item:hover {
    border-color: var(--accent-dim);
    background: var(--surface-raise);
    color: var(--text);
}

.contact__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 0.2rem;
}

.contact__value {
    display: block;
    font-size: var(--step-1);
    color: var(--accent);
    overflow-wrap: break-word;
}

@media (min-width: 34rem) {
    .contact { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Panels and cards
   -------------------------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0 0 1.25rem;
}

.panel--sunk { background: var(--surface-sunk); }

.panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.panel__title {
    margin: 0 0 0.75rem;
    font-size: var(--step-1);
    font-weight: 600;
}

.panel__note {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
    white-space: nowrap;
}

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

.field { margin: 0 0 0.85rem; }

.field__label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.field__hint {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-faint);
    max-width: var(--measure);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    background: var(--surface-sunk);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-sans);
    /* 16px minimum: iOS zooms the viewport on focus below this. */
    font-size: 1rem;
    line-height: 1.4;
}

textarea { resize: vertical; }

input[type="file"] {
    width: 100%;
    padding: 0.6rem;
    background: var(--surface-sunk);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-raise);
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

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

input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
    background: var(--accent-glow);
    color: var(--accent);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    min-height: 2.75rem;
}
.btn:hover { background: var(--accent-dim); color: var(--text); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--quiet {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--text-muted);
}
.btn--quiet:hover { background: var(--surface-raise); color: var(--text); }

.form-row { display: flex; flex-direction: column; gap: 0.75rem; }

@media (min-width: 34rem) {
    .form-row { flex-direction: row; align-items: flex-start; }
    .form-row .field { flex: 1; margin-bottom: 0; }
    .form-row .btn { flex: none; margin-top: 1.35rem; }
}

/* --------------------------------------------------------------------------
   Status marks
   --------------------------------------------------------------------------
   Three states, deliberately distinguishable at a glance and never
   collapsed into one another:

     ok    the check ran and found nothing notable
     flag  the check ran and found something worth knowing
     fail  the check could not run — not the same as finding nothing
   -------------------------------------------------------------------------- */

.mark {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mark--ok      { color: var(--ok);   border-color: var(--accent-dim); background: var(--accent-glow); }
.mark--flag    { color: var(--flag); border-color: var(--flag-dim);   background: var(--flag-glow); }
.mark--fail    { color: var(--fail); border-color: var(--fail-dim);   background: rgba(201,115,106,0.10); }
.mark--waiting { color: var(--text-faint); border-color: var(--line-strong); background: transparent; }

.mark__dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.mark--waiting .mark__dot { animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mark--waiting .mark__dot { animation: none; opacity: 0.6; }
}

.mark-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1em;
}

/* --------------------------------------------------------------------------
   Telemetry
   --------------------------------------------------------------------------
   Every line corresponds to a real event with a real timestamp. It is a
   log, not an animation, and it is styled to look like one.
   -------------------------------------------------------------------------- */

.telemetry {
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    overflow: hidden;
    margin: 1rem 0;
}

.telemetry__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--line);
    color: var(--text-faint);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.telemetry__log {
    margin: 0;
    padding: 0.5rem 0.7rem;
    max-height: 18rem;
    overflow-y: auto;
    list-style: none;
}

.telemetry__line {
    padding: 0.2rem 0;
    color: var(--text-muted);
}

.telemetry__time {
    display: block;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
}

.telemetry__msg { display: block; overflow-wrap: break-word; }

.telemetry__line--start { color: var(--text-muted); }
.telemetry__line--ok    { color: var(--text); }
.telemetry__line--flag  { color: var(--flag); }
.telemetry__line--fail  { color: var(--fail); }
.telemetry__line--note  { color: var(--text-faint); font-style: italic; }

@media (min-width: 30rem) {
    .telemetry { font-size: 0.8125rem; }

    .telemetry__line {
        display: grid;
        grid-template-columns: 4rem 1fr;
        gap: 0.6rem;
        padding: 0.1rem 0;
    }

    .telemetry__time { display: inline; }
    .telemetry__line--note .telemetry__msg { max-width: 60ch; }
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */

.results { display: grid; gap: 0.85rem; }

.result {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
}

.result--ok   { border-left-color: var(--accent-dim); }
.result--flag { border-left-color: var(--flag); }
.result--fail { border-left-color: var(--fail); }

.result__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.result__name {
    margin: 0;
    font-size: var(--step-1);
    font-weight: 600;
    flex: 1 1 12rem;
}

.result__source {
    display: block;
    margin-top: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
    overflow-wrap: break-word;
}

.result__body { margin: 0 0 0.5em; color: var(--text-muted); max-width: var(--measure); }
.result__body:last-child { margin-bottom: 0; }

.result__detail {
    margin: 0.7rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
}

.result__detail summary {
    cursor: pointer;
    color: var(--text-faint);
    font-size: 0.8125rem;
    list-style: none;
    padding: 0.2rem 0;
}
.result__detail summary::-webkit-details-marker { display: none; }
.result__detail summary::before { content: "▸ "; }
.result__detail[open] summary::before { content: "▾ "; }
.result__detail summary:hover { color: var(--accent); }

.finding-list {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.finding {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 0.6rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-muted);
}
.finding:last-child { border-bottom: 0; }

.finding__distance {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.finding--near .finding__distance { color: var(--flag); }

#overall { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-raise);
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0 0 1.25rem;
}

.notice p { margin: 0; max-width: none; }
.notice p + p { margin-top: 0.5rem; }

.notice--fail { border-color: var(--fail-dim); background: rgba(201,115,106,0.07); }
.notice--flag { border-color: var(--flag-dim); background: var(--flag-glow); }

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

.site-footer {
    flex: none;
    border-top: 1px solid var(--line);
    background: var(--surface-sunk);
    padding: 1.5rem 0;
    color: var(--text-faint);
    font-size: 0.8125rem;
}

.site-footer p { max-width: none; margin: 0 0 0.5rem; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }

.site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.lede {
    font-size: var(--step-1);
    color: var(--text-muted);
    max-width: var(--measure);
}

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.mono  { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }

.stack > * + * { margin-top: 1rem; }
.stack--tight > * + * { margin-top: 0.5rem; }
.stack--loose > * + * { margin-top: 2rem; }

.hidden { display: none !important; }

.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;
}

/* --------------------------------------------------------------------------
   Wide screens
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
    :root {
        --step-1: 1.0625rem;
        --step-2: 1.375rem;
        --step-3: 1.75rem;
        --step-4: 2.5rem;
        --gutter: 1.25rem;
    }

    body { line-height: 1.65; }

    .layout__main { padding: 2.5rem 0 4rem; }

    .site-header__inner { min-height: 3.5rem; gap: 1rem; }
    .brand { gap: 0.5rem; }
    .brand__mark { width: 1.5rem; height: 1.5rem; }
    .nav { gap: 0.25rem; }
    .nav a { padding: 0.4rem 0.7rem; font-size: var(--step-0); }

    .conditions { top: 3.5rem; font-size: 0.75rem; }
    .conditions__inner { min-height: 2.1rem; }

    .hero { padding: 2rem 0 3rem; }
    .hero__lede { font-size: var(--step-2); }

    .section { padding: 3rem 0; }

    .faq__q { padding: 0.95rem 1.15rem; }
    .faq__a { padding: 0 1.15rem 1.15rem 2.3rem; }

    .step { grid-template-columns: 2.5rem 1fr; gap: 1.25rem; padding: 1.15rem 0; }
    .step__number { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; }

    .map { height: 26rem; }

    .panel { padding: 1.25rem; }
    .site-footer { padding: 2rem 0; font-size: 0.875rem; }
    .results { gap: 1rem; }
    .result { padding: 1rem 1.15rem; }
}