/* ==========================================================================
   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
   --------------------------------------------------------------------------
   Three 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.4rem; }
}

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

   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.
   Ruling every boundary on a page already full of bordered cards would read
   as ruled rather than composed.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------
   Native <details> and <summary>. No script, keyboard support for free, and
   an answer that is hidden costs nothing until it is opened — which is why
   the answers here run as long as the subject warrants rather than being
   trimmed to fit.
   -------------------------------------------------------------------------- */

.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;
    /* The default triangle is replaced below; both prefixes are needed. */
    list-style: none;
}

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

/* A chevron drawn in text rather than an icon: it rotates cleanly and
   inherits the accent colour without a second request. */
.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; }

/* --------------------------------------------------------------------------
   Comparison
   --------------------------------------------------------------------------
   Two columns of equal weight. The point being made is that both existing
   options are unsatisfactory, so neither side is subordinate to the other.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   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
   --------------------------------------------------------------------------
   The before and after pair. These are the only photographs on the site and
   they are genuine, so they are given room rather than being decorated —
   the evidence is the point, not the presentation.
   -------------------------------------------------------------------------- */

.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%;
    /* The originals are 4:3 and are not cropped: showing the whole frame is
       part of the honesty of the pair. */
    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;
    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="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;
}

input::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;
    /* Comfortable tap target. */
    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; }
}

/* A row of marks needs to breathe when it wraps. */
.mark-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1em;
}

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

   On a narrow screen the timestamp sits above its message rather than
   beside it: a fixed time column plus monospace leaves too little room,
   and messages were breaking mid-phrase.
   -------------------------------------------------------------------------- */

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

.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;
    /* Comfortable tap target without looking like a button. */
    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); }

/* The overall verdict sits outside the results grid, so it needs its own
   separation from the last card rather than inheriting the grid gap. */
#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; }

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