/* Outback Deploy — application styles, on the Outback Drone brand system v1.0.
 *
 * The brand is sharp by design: square corners, hairline rules, no soft
 * shadows. Night Sky leads and carries authority; Signal Orange is spent only
 * on action and active states; Eucalyptus confirms success. Geist Sans carries
 * headlines, interface and body; Geist Mono is reserved for data, labels and
 * coordinates — which in this app means counts, byte sizes, statuses and
 * everything read off a survey.
 *
 * Field-office constraints still hold on top of the brand: high contrast, large
 * hit targets, and progress legible at a glance from across a desk.
 */

/* ---------- brand constants (fixed, never themed) ---------- */

:root {
    --night: #101514;       /* Night Sky      — authority, 56% of the mix */
    --night-deep: #090d0c;  /*                — footer / masthead in dark */
    --orange: #ff5a1f;      /* Signal Orange  — action only, 13% */
    --orange-hi: #ff713f;   /*                — hover, from the web build */
    --green: #8bea88;       /* Eucalyptus     — success, 6% */
    --sand: #ede7d9;        /* Mineral Sand   — warmth, 25% */
    --paper: #f7f4ec;
    --white: #fffdf8;

    /* Geist is the brand face. It is not vendored here, so the fallback is the
     * nearest neutral grotesque the machine already has. */
    --font-sans: "Geist", "Geist Sans", ui-sans-serif, system-ui, -apple-system,
                 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono",
                 "Roboto Mono", Menlo, Consolas, monospace;

    /* Type scale, from the guide: 72 48 28 18 14 11. */
    --fs-display: clamp(2.75rem, 6.4vw, 4.5rem);
    --fs-1: clamp(2rem, 3.6vw, 3rem);
    --fs-2: 1.75rem;
    --fs-3: 1.125rem;
    --fs-4: .875rem;
    --fs-5: .6875rem;

    /* Sharp by design. Kept as a token so the intent is explicit rather than
     * looking like an omission. */
    --radius: 0px;

    --gap: .75rem;
    --pad: 1.375rem;
}

/* ---------- themed surfaces ---------- */

:root {
    --bg: var(--paper);
    --surface: var(--white);
    --surface-2: var(--sand);
    --fg: #171c1b;
    --fg-muted: #5d635f;
    --fg-faint: #8b8f8b;
    --line: #cfd2ca;
    --line-soft: #dfe1d9;

    --chrome: var(--night);          /* masthead — Night Sky leads */
    --chrome-fg: var(--white);
    --chrome-muted: rgba(255, 253, 248, .62);
    --chrome-line: rgba(255, 253, 248, .18);

    /* Eucalyptus is a light mint: it reads as a fill on Night Sky but not as
     * text on paper, so light mode uses a darkened tint of the same hue. */
    --ok: #2f7331;
    --ok-tint: rgba(139, 234, 136, .3);
    /* The palette has no failure colour. Signal Orange is committed to action,
     * so error gets a cooler, darker red that cannot be mistaken for it. */
    --alert: #c4342b;
    --alert-tint: rgba(196, 52, 43, .1);
    --active: var(--orange);
    --active-tint: rgba(255, 90, 31, .1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--night);
        --surface: #171d1c;
        --surface-2: #1f2624;
        --fg: #f2efe7;
        --fg-muted: #a6aca7;
        --fg-faint: #767c78;
        --line: #2c3331;
        --line-soft: #232928;

        --chrome: var(--night-deep);
        --chrome-fg: var(--white);
        --chrome-muted: rgba(255, 253, 248, .58);
        --chrome-line: rgba(255, 253, 248, .13);

        --ok: var(--green);
        --ok-tint: rgba(139, 234, 136, .12);
        --alert: #f4685c;
        --alert-tint: rgba(244, 104, 92, .12);
        --active-tint: rgba(255, 90, 31, .14);
    }
}

/* ---------- base ---------- */

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 1rem/1.55 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--orange); color: var(--night); }

a { color: inherit; }
a:hover { color: var(--orange); }

img, svg { display: block; max-width: 100%; }

:where(a, button, input, select, [tabindex]):focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

code {
    font: 500 .875em/1.4 var(--font-mono);
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    padding: .1em .35em;
    color: var(--fg);
}

.wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; }

main { padding: 2.5rem 0 4rem; }

/* ---------- typography ---------- */

h1, h2, h3 {
    margin: 0 0 .35rem;
    font-weight: 640;
    line-height: 1.02;
    letter-spacing: -.045em;
}

h1 { font-size: var(--fs-2); }
h2 { font-size: var(--fs-3); margin-bottom: .9rem; letter-spacing: -.03em; }
h3 { font-size: 1rem; letter-spacing: -.02em; }

/* Headline accents. The guide sets the second clause in Signal Orange. */
h1 em, h2 em, .display em { color: var(--orange); font-style: normal; }

.lede {
    color: var(--fg-muted);
    font-size: var(--fs-3);
    line-height: 1.55;
    max-width: 62ch;
    margin: 0 0 2rem;
}

/* Mono, uppercase, wide-tracked: the guide's label voice. */
.eyebrow, label, th, .status, .picker-head h1, .project h3, .opacity,
.facts dt, .footer, .file .name, .overall .meta {
    font-family: var(--font-mono);
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: var(--fs-5);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-faint);
    margin: 0 0 1.125rem;
}

.eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    flex: none;
}

.hint { font-size: var(--fs-4); color: var(--fg-faint); margin: .5rem 0 0; line-height: 1.5; }

/* A subtitle that is really a row of measurements, so it is set as data. */
.lede.meta-line {
    font: 500 var(--fs-4)/1.6 var(--font-mono);
    letter-spacing: .03em;
    color: var(--fg-faint);
}

/* ---------- masthead ---------- */

.masthead {
    background: var(--chrome);
    color: var(--chrome-fg);
    border-bottom: 1px solid var(--chrome-line);
    position: sticky;
    top: 0;
    z-index: 600;
}

.masthead-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    /* 4.5rem bar around a 1.5rem mark leaves exactly one mark width of clear
     * space above and below it, which is the rule. */
    min-height: 4.5rem;
    padding: .75rem 0;
}

/* Brand lockup. The mark inherits currentColor so it reverses cleanly on Night
 * Sky, per the approved reverse variant. Clear space is one mark width. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
    padding-right: 1.5rem;   /* one mark width of clear space */
    flex: none;
}

.brand:hover { color: inherit; }

/* The mark's inner node is a knock-out, so it has to carry whatever it sits on.
 * --mark-hole is read by the inline SVG. */
.brand-mark {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    color: inherit;
    --mark-hole: var(--bg);
}

.masthead .brand-mark { --mark-hole: var(--chrome); }
.brand-mark svg { width: 100%; height: 100%; display: block; }

.brand-name {
    display: flex;
    gap: .375rem;
    font-size: .8125rem;
    letter-spacing: .08em;
    line-height: 1;
    white-space: nowrap;
}

.brand-name strong { font-weight: 780; }
.brand-name span { font-weight: 430; opacity: .65; }

.nav { display: flex; gap: 2rem; margin-left: auto; margin-right: 1.75rem; }

.nav a {
    color: var(--chrome-muted);
    text-decoration: none;
    font-size: .8125rem;
    font-weight: 560;
}

.nav a:hover { color: var(--chrome-fg); }

.who { display: inline-flex; align-items: center; gap: .875rem; flex: none; }
.who form { display: inline; margin: 0; }

.tenant {
    font: 600 var(--fs-5)/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--chrome-muted);
    border: 1px solid var(--chrome-line);
    padding: .5rem .625rem;
    white-space: nowrap;
}

.masthead .who .tenant + .tenant { color: var(--chrome-fg); border-color: rgba(255, 253, 248, .32); }

.masthead .btn-link {
    color: var(--chrome-muted);
    border-bottom-color: var(--chrome-line);
}

.masthead .btn-link:hover { color: var(--chrome-fg); border-bottom-color: var(--chrome-fg); }

/* ---------- buttons ---------- */

.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    border: 1px solid var(--orange);
    border-radius: var(--radius);
    background: var(--orange);
    color: var(--night);
    padding: .95rem 1.5rem;
    font: 650 .8125rem/1 var(--font-sans);
    cursor: pointer;
    transition: transform .2s, background .2s, border-color .2s, color .2s;
}

.btn:hover:not(:disabled) {
    background: var(--orange-hi);
    border-color: var(--orange-hi);
    color: var(--night);
    transform: translateY(-2px);
}

.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-quiet {
    background: transparent;
    color: var(--fg-muted);
    border-color: var(--line);
}

.btn-quiet:hover:not(:disabled) {
    background: transparent;
    border-color: var(--fg);
    color: var(--fg);
}

/* The guide's text link: hairline underline, never a decorated button. */
.btn-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0 0 3px;
    font: 650 .8125rem/1.3 var(--font-sans);
    color: var(--fg-muted);
    text-decoration: none;
    cursor: pointer;
}

.btn-link:hover { color: var(--orange); border-bottom-color: var(--orange); }

.actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

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

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--pad);
    margin-bottom: var(--gap);
}

.card > :last-child { margin-bottom: 0; }

.card-dark {
    background: var(--night);
    border-color: var(--night);
    color: var(--white);
}

.card-dark h2 { color: var(--white); }
.card-dark p { color: rgba(255, 253, 248, .58); }
.card-dark .hint { color: rgba(255, 253, 248, .42); }
.card-dark a { color: var(--white); }
.card-dark a:hover { color: var(--orange); }
.card-dark code { background: rgba(255, 253, 248, .08); border-color: rgba(255, 253, 248, .18); color: var(--white); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-3 .card p { margin: 0; color: var(--fg-muted); font-size: var(--fs-4); }

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

/* ---------- forms ---------- */

label {
    display: block;
    font-size: var(--fs-5);
    font-weight: 600;
    color: var(--fg-faint);
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

input[type=text], input[type=search], input[type=password], input[type=email], select {
    width: 100%;
    padding: .75rem .8125rem;
    font: 1rem/1.4 var(--font-sans);
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

input::placeholder { color: var(--fg-faint); }

input[type=text]:focus, input[type=search]:focus, input[type=password]:focus,
input[type=email]:focus, select:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: inset 0 0 0 1px var(--orange);
}

input[type=range] { accent-color: var(--orange); }

/* ---------- drop zone ---------- */

.dropzone {
    position: relative;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--fg-muted);
    font-size: var(--fs-4);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    /* Survey grid: the guide's graphic language, technical never decorative. */
    background-image:
        linear-gradient(var(--line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 28px 28px;
}

.dropzone:hover, .dropzone.hot {
    border-color: var(--orange);
    background-color: var(--active-tint);
    color: var(--fg);
}

.dropzone strong {
    display: block;
    color: var(--fg);
    font-size: 1.125rem;
    letter-spacing: -.03em;
    margin-bottom: .35rem;
}

/* ---------- progress ---------- */

.overall {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .875rem;
}

.overall .pct {
    font-size: var(--fs-1);
    font-weight: 660;
    letter-spacing: -.05em;
    line-height: .9;
}

/* Anything read off the upload: phase, counts, resume state. */
.meta {
    font: 500 var(--fs-5)/1.4 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.overall .meta { margin-top: .5rem; }

.bar {
    height: 6px;
    background: var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.bar > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--orange);
    transition: width .25s ease;
}

/* ---------- file list ---------- */

.files { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.file {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4rem 1rem;
    align-items: center;
    padding: .625rem 0;
    border-top: 1px solid var(--line-soft);
}

.file .name {
    font-size: var(--fs-4);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file .bar { grid-column: 1 / -1; height: 3px; }

/* Status chips, in the guide's chip idiom. */
.status {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
    border: 1px solid var(--line);
    padding: .35rem .45rem;
    color: var(--fg-muted);
}

.status.pending    { color: var(--fg-faint); }
.status.uploading  { color: var(--orange); border-color: var(--orange); }
.status.complete,
.status.ready,
.status.finalised  { color: var(--ok); border-color: var(--ok); background: var(--ok-tint); }
.status.duplicate  { color: var(--fg-muted); }
.status.failed     { color: var(--alert); border-color: var(--alert); background: var(--alert-tint); }

/* ---------- notices & flash ---------- */

.notice, .message {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    border-left: 3px solid var(--fg-faint);
    background: var(--surface);
    padding: .875rem 1rem;
    font-size: var(--fs-4);
    margin-bottom: var(--gap);
}

.notice strong, .message strong { font-weight: 660; }

.notice-ok,   .message.success { border-color: var(--ok);     border-left-color: var(--ok);     background: var(--ok-tint); }
.notice-bad,  .message.error   { border-color: var(--alert);  border-left-color: var(--alert);  background: var(--alert-tint); }
.notice-warn, .message.warning { border-color: var(--orange); border-left-color: var(--orange); background: var(--active-tint); }
.message.info                  { border-color: var(--line);   border-left-color: var(--fg-muted); }

.hidden { display: none !important; }

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; font-size: var(--fs-4); }

th {
    text-align: left;
    font-size: var(--fs-5);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--fg-faint);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

td { padding: .75rem 0; border-top: 1px solid var(--line-soft); }
tbody tr:first-child td { border-top: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
th.num { text-align: right; }

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

.footer {
    color: var(--fg-faint);
    font-size: var(--fs-5);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-top: 1px solid var(--line);
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer p { margin: 0; }

/* ---------- sign-in ---------- */

.signin { max-width: 26rem; margin: 2rem auto 3rem; }
.signin .brand-mark { color: var(--fg); margin-bottom: 1.5rem; width: 2.75rem; height: 2.75rem; }
.signin h1 { margin-bottom: .35rem; }
.signin .lede { font-size: var(--fs-3); margin-bottom: 1.5rem; }
.signin .field { margin-bottom: 1.125rem; }
.signin .field-last { margin-bottom: 1.75rem; }
.signin .btn { width: 100%; }
.signin .hint { margin-top: 1.25rem; }

/* ---------- landing ---------- */

.hero-panel {
    position: relative;
    overflow: hidden;
    background: var(--night);
    color: var(--white);
    padding: 0 2.5rem;
    margin-bottom: var(--gap);
}

/* Field imagery with the survey grid over it: "show the work". */
.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 13, 12, .95) 0%, rgba(8, 13, 12, .72) 38%, rgba(8, 13, 12, .12) 78%),
        linear-gradient(0deg, rgba(8, 13, 12, .85) 0%, transparent 42%),
        url("../img/outback-aerial.jpg") center / cover no-repeat;
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
    mask-image: linear-gradient(90deg, #000, transparent 70%);
}

.hero { position: relative; z-index: 2; max-width: 44rem; padding: 4.5rem 0 4.5rem; }
.hero .eyebrow { color: rgba(255, 253, 248, .7); }

.hero h1 {
    font-size: var(--fs-display);
    line-height: .92;
    letter-spacing: -.065em;
    font-weight: 650;
    margin: 0 0 1.5rem;
}

.hero .lede { color: rgba(255, 253, 248, .72); max-width: 34rem; margin-bottom: 0; }

/* Measured facts, in the guide's data voice. */
.hero-stat {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 253, 248, .18);
}

.hero-stat div {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1.5rem 0;
    border-right: 1px solid rgba(255, 253, 248, .18);
}

.hero-stat div + div { padding-left: 1.75rem; }
.hero-stat div:last-child { border-right: 0; }
.hero-stat strong { font-size: var(--fs-2); letter-spacing: -.05em; line-height: 1; }

.hero-stat span {
    max-width: 11rem;
    color: rgba(255, 253, 248, .55);
    font: 500 var(--fs-5)/1.4 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.section-label {
    font: 600 var(--fs-5)/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-faint);
    padding-bottom: 1.125rem;
    border-bottom: 1px solid var(--line);
    margin: 3rem 0 1.5rem;
}

.feature-number {
    display: block;
    font: 500 var(--fs-5)/1 var(--font-mono);
    letter-spacing: .12em;
    color: var(--orange);
    margin-bottom: 2.5rem;
}

/* ---------- contact sheet ---------- */

.sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--gap);
}

.frame { margin: 0; }

.frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface-2);
    transition: border-color .15s;
}

.frame a:hover img { border-color: var(--orange); }

.frame figcaption {
    font: 500 var(--fs-5)/1.4 var(--font-mono);
    letter-spacing: .04em;
    color: var(--fg-muted);
    margin-top: .5rem;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    align-items: baseline;
    overflow: hidden;
    white-space: nowrap;
}

.frame figcaption > span:not(.status) { color: var(--fg-faint); flex-shrink: 0; }

/* ---------- compare ---------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }
.compare h2 { margin-bottom: .35rem; }

.compare .when {
    font: 500 var(--fs-5)/1.5 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-faint);
    margin: 0 0 1.25rem;
}

/* ---------- full-bleed map ---------- */

body.fullbleed {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.masthead-wide { width: 100%; padding-inline: 1.5rem; }

.mapshell {
    flex: 1;
    display: grid;
    grid-template-columns: 22rem 1fr;
    min-height: 0;
}

@media (max-width: 780px) {
    .mapshell { grid-template-columns: 1fr; grid-template-rows: 14rem 1fr; }
}

/* ---------- picker ---------- */

.picker {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.picker-head { padding: 1.125rem 1.125rem 1rem; border-bottom: 1px solid var(--line); }

.picker-head h1 {
    font-size: var(--fs-5);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-faint);
    margin-bottom: .875rem;
}

.picker-head input { font-size: var(--fs-4); padding: .625rem .75rem; }

.picker-list { flex: 1; overflow-y: auto; padding: .5rem 0; min-height: 0; }
.picker-empty { padding: 1.125rem; color: var(--fg-faint); font-size: var(--fs-4); line-height: 1.5; }

.project { padding: .25rem 0 .625rem; }

.project h3 {
    font: 600 var(--fs-5)/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-faint);
    margin: .875rem 1.125rem .5rem;
}

.survey {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    padding: .5rem 1.125rem;
    font: inherit;
    cursor: pointer;
    color: var(--fg);
    transition: background .12s, border-color .12s;
}

.survey:hover { background: var(--surface-2); }
.survey.on { border-left-color: var(--orange); background: var(--surface-2); }
.survey.on .survey-name { color: var(--orange); }

.survey-name { display: block; font-size: var(--fs-4); font-weight: 620; letter-spacing: -.015em; }

.survey-meta {
    display: block;
    font: 500 var(--fs-5)/1.4 var(--font-mono);
    letter-spacing: .04em;
    color: var(--fg-faint);
    margin-top: .15rem;
}

.picker-foot { border-top: 1px solid var(--line); padding: 1.125rem; }

.picker-foot h2 {
    font-size: 1rem;
    letter-spacing: -.03em;
    margin-bottom: .875rem;
}

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .375rem .875rem;
    margin: 0 0 1.125rem;
    font-size: var(--fs-5);
}

.facts dt {
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-faint);
}

.facts dd {
    margin: 0;
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}

.picker-actions { margin-bottom: 1.125rem; }

.opacity {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--fs-5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--fg-faint);
    margin: 0;
}

.opacity input { flex: 1; }

/* ---------- map ---------- */

.mapwrap { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--bg); }

/* Opacity here is driven by the mosaic layer itself — do not set it. */
.frame-mosaic { position: absolute; top: 0; left: 0; pointer-events: none; }

.maphint {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 500;
    background: var(--night);
    color: rgba(255, 253, 248, .8);
    border: 1px solid var(--night);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius);
    padding: .625rem 1rem;
    font-size: var(--fs-4);
    line-height: 1.45;
    max-width: min(40rem, 90%);
}

/* Leaflet's own chrome, toned to match. Vendored CSS is left untouched. */
.leaflet-container { font: inherit; background: var(--bg); }
.leaflet-control-attribution { font: 500 10px var(--font-mono); }

.leaflet-bar,
.leaflet-control-attribution {
    border-radius: var(--radius) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    background: var(--surface) !important;
    color: var(--fg-muted) !important;
}

.leaflet-bar a,
.leaflet-bar a:hover {
    background: var(--surface);
    color: var(--fg);
    border-bottom-color: var(--line);
    border-radius: var(--radius) !important;
}

.leaflet-bar a:hover { background: var(--surface-2); color: var(--orange); }
.leaflet-control-attribution a { color: var(--fg-muted); }

.leaflet-tooltip {
    background: var(--night);
    color: var(--white);
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
    font: 500 var(--fs-5) var(--font-mono);
    letter-spacing: .06em;
}

.leaflet-tooltip-left::before { border-left-color: var(--night); }
.leaflet-tooltip-right::before { border-right-color: var(--night); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .hero-panel { padding: 0 1.5rem; }
    .hero { padding: 3rem 0 3rem; }
    .hero-stat { grid-template-columns: 1fr; }
    .hero-stat div { border-right: 0; border-top: 1px solid rgba(255, 253, 248, .12); padding: 1rem 0; }
    .hero-stat div + div { padding-left: 0; }
    .hero-stat div:first-child { border-top: 0; }
    .nav { gap: 1.25rem; margin-right: 1rem; }
    .masthead-inner { flex-wrap: wrap; }
}

@media (max-width: 560px) {
    .wrap { width: min(1180px, 100% - 2rem); }
    .nav { display: none; }
    .brand { padding-right: 0; }
    .footer { flex-direction: column; gap: .5rem; }
}

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