/* ==========================================================================
   Mound Bayou Green — visual system
   --------------------------------------------------------------------------
   A land-plat aesthetic: warm loam darks, a brass rule borrowed from the
   surveyed parcel outline on the base map, and rust hatching for parcels that
   are spoken for. Fraunces carries the headings, Archivo the interface, and
   DM Mono every figure that has to be read precisely.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Surfaces — warm, not blue. */
    --loam-900: oklch(15% 0.012 62);
    --loam-850: oklch(17% 0.014 62);
    --loam-800: oklch(20% 0.016 63);
    --loam-700: oklch(25% 0.018 64);
    --loam-600: oklch(33% 0.020 66);
    --rule:     oklch(38% 0.022 68 / 0.55);
    --rule-soft:oklch(38% 0.022 68 / 0.28);

    /* Ink */
    --bone:      oklch(95% 0.010 85);
    --bone-dim:  oklch(75% 0.016 80);
    --bone-faint:oklch(60% 0.016 78);

    /* Accent — the brass of the surveyed boundary. */
    --brass:      oklch(81% 0.125 82);
    --brass-deep: oklch(64% 0.125 72);
    --brass-wash: oklch(81% 0.125 82 / 0.14);

    /* Parcel status */
    --moss:  oklch(74% 0.145 148);
    --amber: oklch(80% 0.150 68);
    --clay:  oklch(63% 0.165 32);
    --clay-deep: oklch(46% 0.150 30);

    /* Price-tier palette. Deliberately no red — reserved parcels are rust
       hatched, so a red tier would read as sold. All six are picked to stay
       legible against the aerial photograph. */
    --tier-brass:  oklch(81% 0.125 82);
    --tier-azure:  oklch(72% 0.130 245);
    --tier-violet: oklch(70% 0.150 300);
    --tier-teal:   oklch(76% 0.120 190);
    --tier-rose:   oklch(75% 0.130 350);
    --tier-lime:   oklch(82% 0.160 125);

    /* Type */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Rhythm */
    --gap-xs: 6px;
    --gap-sm: 10px;
    --gap:    16px;
    --gap-lg: 24px;
    --gap-xl: 36px;

    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 18px;

    --shadow-panel: 0 18px 48px oklch(0% 0 0 / 0.55), 0 2px 6px oklch(0% 0 0 / 0.4);
    --shadow-lift:  0 10px 30px oklch(0% 0 0 / 0.45);

    --ease: cubic-bezier(0.2, 0.8, 0.25, 1);
    --dur: 220ms;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

* { margin: 0; padding: 0; }

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

body {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
    color: var(--bone);
    background: var(--loam-900);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* A fine grain over everything, so the flat darks read as paper stock rather
   than as an empty canvas. Pointer-events off so it never blocks the map. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

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

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

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

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

.is-hidden { display: none !important; }

/* Shared panel treatment: warm smoked glass with a top highlight. */
.panel {
    position: relative;
    background: color-mix(in oklab, var(--loam-800) 90%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
}

.panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.16), transparent);
    border-radius: inherit;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Map stage
   -------------------------------------------------------------------------- */

.page-map, .page-admin { height: 100vh; overflow: hidden; }

.mapstage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, oklch(22% 0.02 66) 0%, var(--loam-900) 62%);
    z-index: 1;
    /* Establishes a size container so the frame can be measured against the
       stage without the stage's own size depending on the image inside it —
       a percentage height here would be a circular reference and would fall
       back to the image's intrinsic 1500px. */
    container-type: size;
}

.mapstage__frame {
    position: relative;
    flex: none;
    /* The base map is 844 x 1500 — hold that ratio, and fit whichever of the
       two axes runs out first. */
    aspect-ratio: 844 / 1500;
    height: min(96cqh, calc(94cqw * 1500 / 844));
    box-shadow: 0 24px 70px oklch(0% 0 0 / 0.7);
    transform-origin: center center;
    will-change: transform;
}

/* Surveyor's corner ticks around the sheet. */
.mapstage__frame::before,
.mapstage__frame::after {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    border: 1.5px solid var(--brass);
    opacity: 0.75;
    pointer-events: none;
    z-index: 4;
}

.mapstage__frame::before {
    top: -7px; left: -7px;
    border-right: none; border-bottom: none;
}

.mapstage__frame::after {
    bottom: -7px; right: -7px;
    border-left: none; border-top: none;
}

.mapstage__image {
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.mapstage__overlays {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* --- individual parcels --------------------------------------------------- */

.plot {
    position: absolute;
    display: block;
    padding: 0;
    border-radius: 2px;
    border: 1px solid transparent;
    /* Overridden per parcel by its price tier; brass is the fallback. */
    --plot-tint: var(--tier-brass);
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        transform var(--dur) var(--ease);
    z-index: 5;
}

.tier-brass  { --plot-tint: var(--tier-brass); }
.tier-azure  { --plot-tint: var(--tier-azure); }
.tier-violet { --plot-tint: var(--tier-violet); }
.tier-teal   { --plot-tint: var(--tier-teal); }
.tier-rose   { --plot-tint: var(--tier-rose); }
.tier-lime   { --plot-tint: var(--tier-lime); }

/* The base map is a photograph with its own blue parcel boxes drawn on it, so
   a faint tint reads as nothing. A saturated 2px edge plus a modest wash is
   what actually distinguishes one tier from another at this size, without
   burying the "15 x 15 West 1" labels underneath. */
.plot--available {
    cursor: pointer;
    border-width: 2px;
    border-color: var(--plot-tint);
    background-color: color-mix(in oklab, var(--plot-tint) 22%, transparent);
    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.35);
}

.plot--available:hover,
.plot--available:focus-visible {
    background-color: color-mix(in oklab, var(--plot-tint) 52%, transparent);
    border-color: var(--plot-tint);
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--plot-tint) 70%, transparent),
        0 0 20px color-mix(in oklab, var(--plot-tint) 55%, transparent);
    transform: scale(1.04);
    z-index: 8;
}

/* Somebody else is inside Stripe Checkout for this parcel right now. */
.plot--pending {
    cursor: pointer;
    border-color: oklch(80% 0.15 68 / 0.7);
    background-image: repeating-linear-gradient(
        45deg,
        oklch(80% 0.15 68 / 0.35) 0 4px,
        oklch(80% 0.15 68 / 0.08) 4px 8px
    );
    animation: creep 1.1s linear infinite;
}

/* Sold. Hatched, the way a plat book marks a parcel that is spoken for. */
.plot--booked {
    cursor: pointer;
    border-color: oklch(63% 0.165 32 / 0.85);
    background-color: oklch(46% 0.15 30 / 0.5);
    background-image: repeating-linear-gradient(
        45deg,
        oklch(63% 0.165 32 / 0.55) 0 2px,
        transparent 2px 6px
    );
}

/* Keeps the tier's colour so identity survives selection, with a white ring so
   "this is the one you picked" is never ambiguous. */
.plot--selected,
.plot--selected:hover {
    border-color: var(--plot-tint);
    background-color: color-mix(in oklab, var(--plot-tint) 38%, transparent);
    box-shadow:
        0 0 0 2px var(--plot-tint),
        0 0 0 3.5px oklch(100% 0 0 / 0.9),
        0 0 26px color-mix(in oklab, var(--plot-tint) 60%, transparent);
    transform: scale(1.05);
    z-index: 12;
}

@keyframes creep {
    to { background-position: 11.31px 0; }
}

/* --- zoom controls -------------------------------------------------------- */

.zoomctl {
    position: absolute;
    bottom: 92px;
    left: 24px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: color-mix(in oklab, var(--loam-800) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
}

.zoomctl__btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    color: var(--bone-dim);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    transition: all 160ms var(--ease);
}

.zoomctl__btn:hover:not(:disabled) {
    background: var(--brass-wash);
    border-color: oklch(81% 0.125 82 / 0.4);
    color: var(--brass);
}

.zoomctl__btn:active:not(:disabled) { transform: scale(0.94); }

.zoomctl__btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* --- hover tooltip -------------------------------------------------------- */

.plottip {
    position: fixed;
    z-index: 800;
    pointer-events: none;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: oklch(13% 0.012 62 / 0.97);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--brass);
    box-shadow: var(--shadow-lift);
    font-size: 0.8rem;
    line-height: 1.35;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms var(--ease);
}

.plottip.is-visible { opacity: 1; }

.plottip__name {
    display: block;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.plottip__meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--bone-dim);
}

.plottip--available { border-left-color: var(--moss); }
.plottip--available .plottip__meta { color: var(--moss); }
.plottip--pending { border-left-color: var(--amber); }
.plottip--pending .plottip__meta { color: var(--amber); }
.plottip--booked { border-left-color: var(--clay); }
.plottip--booked .plottip__meta { color: var(--clay); }

/* --------------------------------------------------------------------------
   4. Masthead & legend
   -------------------------------------------------------------------------- */

.masthead {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 30;
    max-width: 380px;
    padding: 18px 24px 16px;
    animation: rise 600ms var(--ease) both;
}

.masthead__eyebrow,
.legend__heading,
.console__eyebrow,
.signin__eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
}

.masthead__title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    margin: 4px 0 6px;
    background: linear-gradient(170deg, var(--bone) 30%, var(--brass) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.masthead__lede {
    font-size: 0.85rem;
    color: var(--bone-dim);
    max-width: 32ch;
}

.masthead__tally {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rule-soft);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--bone-dim);
    min-height: 22px;
}

.masthead__tally strong {
    color: var(--moss);
    font-weight: 500;
}

.tally__skeleton {
    display: inline-block;
    width: 150px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--loam-700) 25%, var(--loam-600) 50%, var(--loam-700) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
    to { background-position: -200% 0; }
}

.legend {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 30;
    padding: 16px 20px;
    animation: rise 600ms 80ms var(--ease) both;
}

.legend__list { list-style: none; margin-top: 10px; display: grid; gap: 7px; }

.legend__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--bone-dim);
}

.swatch {
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1.5px solid currentColor;
}

/* Tier swatches take their colour from the same --plot-tint the map uses. */
.swatch--tier {
    color: var(--plot-tint, var(--tier-brass));
    background: color-mix(in oklab, var(--plot-tint, var(--tier-brass)) 20%, transparent);
}

.legend__item--tier { justify-content: space-between; gap: 12px; }

.legend__price {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--bone);
    white-space: nowrap;
}

.legend__list--status {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--rule-soft);
}
.swatch--pending   { color: var(--amber); background-image: repeating-linear-gradient(45deg, oklch(80% 0.15 68 / 0.5) 0 3px, transparent 3px 6px); }
.swatch--booked    { color: var(--clay);  background: oklch(46% 0.15 30 / 0.6); background-image: repeating-linear-gradient(45deg, oklch(63% 0.165 32 / 0.6) 0 2px, transparent 2px 5px); }
.swatch--festival  { color: var(--moss); background: oklch(74% 0.145 148 / 0.14); border-style: dashed; }

/* --------------------------------------------------------------------------
   5. Detail panel
   -------------------------------------------------------------------------- */

.detail {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 30;
    width: 340px;
    padding: 22px 24px 24px;
    animation: rise 600ms 160ms var(--ease) both;
}

.detail__close { display: none; }

.detail__heading {
    font-size: 0.68rem;
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule-soft);
}

.detail__content { min-height: 92px; padding: 16px 0 0; }

.detail__placeholder {
    font-size: 0.86rem;
    color: var(--bone-faint);
    max-width: 30ch;
}

.parcel { display: grid; gap: 5px; animation: rise 300ms var(--ease) both; }

.parcel__name {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.parcel__kind {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass);
}

/* Coloured to match the parcel's tier on the map. */
.parcel__kind--tier { color: var(--plot-tint, var(--brass)); }

.parcel__size {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--bone-dim);
}

.chip {
    justify-self: start;
    margin-top: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}

.chip--available { color: var(--moss);  background: oklch(74% 0.145 148 / 0.12); }
.chip--pending   { color: var(--amber); background: oklch(80% 0.150 68 / 0.12); }
.chip--booked    { color: var(--clay);  background: oklch(63% 0.165 32 / 0.12); }

.parcel__note {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--bone-faint);
    line-height: 1.5;
}

.detail__actions {
    display: grid;
    gap: 16px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--rule-soft);
    animation: rise 300ms var(--ease) both;
}

.pricetag { display: flex; align-items: baseline; gap: 4px; }

.pricetag__currency { font-size: 1.1rem; color: var(--bone-dim); }

.pricetag__amount {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pricetag__note {
    margin-left: 6px;
    font-size: 0.75rem;
    color: var(--bone-faint);
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 180ms var(--ease);
    text-decoration: none;
    white-space: nowrap;
}

.btn--primary {
    color: oklch(18% 0.03 68);
    background: linear-gradient(165deg, var(--brass), var(--brass-deep));
    box-shadow: 0 6px 18px oklch(64% 0.125 72 / 0.32);
}

.btn--primary:hover:not(:disabled) {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 9px 24px oklch(64% 0.125 72 / 0.44);
}

.btn--primary:active:not(:disabled) { transform: translateY(1px); }

.btn--ghost {
    color: var(--bone);
    background: oklch(100% 0 0 / 0.05);
    border-color: var(--rule);
}

.btn--ghost:hover:not(:disabled) {
    background: oklch(100% 0 0 / 0.1);
    border-color: var(--rule);
}

.btn--danger {
    color: var(--clay);
    border-color: oklch(63% 0.165 32 / 0.35);
    background: oklch(63% 0.165 32 / 0.08);
}

.btn--danger:hover:not(:disabled) {
    background: oklch(63% 0.165 32 / 0.18);
    border-color: var(--clay);
}

.btn--sm { padding: 7px 13px; font-size: 0.78rem; border-radius: 8px; }

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

.spinner {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 720ms linear infinite;
    flex: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   7. Utility rail
   -------------------------------------------------------------------------- */

.utilrail {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 30;
}

.utilrail__link {
    display: inline-block;
    padding: 9px 17px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--bone-faint);
    background: color-mix(in oklab, var(--loam-800) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--rule);
    transition: all 180ms var(--ease);
}

.utilrail__link:hover {
    color: var(--brass);
    border-color: oklch(81% 0.125 82 / 0.5);
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 6px; align-content: start; }

/* One rule for vertical rhythm, rather than a chain of sibling selectors that
   also fires between the two halves of a .fieldrow and knocks them out of
   alignment. */
.field, .fieldrow { margin-top: 14px; }
.field:first-child, .fieldrow:first-child { margin-top: 0; }
.fieldrow > .field { margin-top: 0; }

.field label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone-dim);
}

.field__optional {
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--bone-faint);
}

.field__hint {
    font-size: 0.74rem;
    color: var(--bone-faint);
    line-height: 1.4;
}

.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="url"], input[type="number"],
input[type="search"], select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 9px;
    border: 1px solid var(--rule);
    background: oklch(11% 0.01 62 / 0.6);
    color: var(--bone);
    font-size: 0.92rem;
    transition: border-color 160ms var(--ease), background 160ms var(--ease);
    appearance: none;
}

input::placeholder { color: oklch(50% 0.014 76); }

input:focus, select:focus {
    outline: none;
    border-color: var(--brass);
    background: oklch(13% 0.012 62 / 0.85);
    box-shadow: 0 0 0 3px oklch(81% 0.125 82 / 0.16);
}

input[aria-invalid="true"] { border-color: var(--clay); }

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%),
                      linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

select option { background: var(--loam-800); color: var(--bone); }

.formerror, .signin__error, .sheet__notice {
    display: none;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--clay);
    padding: 10px 13px;
    border-radius: 8px;
    border: 1px solid oklch(63% 0.165 32 / 0.3);
    background: oklch(63% 0.165 32 / 0.1);
}

.formerror.is-shown, .signin__error.is-shown, .sheet__notice.is-shown {
    display: block;
    animation: rise 240ms var(--ease) both;
}

.stack { display: grid; gap: 0; }

.stack > .btn { margin-top: 20px; justify-self: start; }

/* Toggle switch */
.toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    background: oklch(11% 0.01 62 / 0.4);
    cursor: pointer;
}

.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle__track {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--loam-600);
    border: 1px solid var(--rule);
    padding: 2px;
    transition: background 200ms var(--ease);
    flex: none;
}

.toggle__thumb {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bone-dim);
    transition: transform 200ms var(--ease), background 200ms var(--ease);
}

.toggle input:checked + .toggle__track { background: oklch(74% 0.145 148 / 0.35); }
.toggle input:checked + .toggle__track .toggle__thumb {
    transform: translateX(18px);
    background: var(--moss);
}

.toggle input:focus-visible + .toggle__track {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

.toggle__text { display: grid; gap: 2px; font-size: 0.82rem; }
.toggle__text strong { font-weight: 600; font-size: 0.86rem; }
.toggle__text span { color: var(--bone-faint); line-height: 1.4; }

/* --------------------------------------------------------------------------
   9. Checkout sheet (native <dialog>)
   -------------------------------------------------------------------------- */

.sheet {
    margin: auto;
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--loam-800);
    color: var(--bone);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}

.sheet::backdrop {
    background: oklch(8% 0.01 60 / 0.72);
    backdrop-filter: blur(6px);
}

.sheet[open] { animation: rise 280ms var(--ease) both; }

.sheet__inner { padding: 28px; overflow-y: auto; max-height: calc(100vh - 48px); }

.sheet__header { margin-bottom: 20px; }

.sheet__title { font-size: 1.4rem; font-weight: 700; }

.sheet__subtitle {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--brass);
}

.summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    margin-bottom: 22px;
    border-radius: var(--radius);
    border: 1px solid var(--rule-soft);
    background: oklch(11% 0.01 62 / 0.5);
}

.summary__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone-dim);
}

.summary__value {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sheet__notice { margin-top: 16px; }

.sheet__fineprint {
    margin-top: 18px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--bone-faint);
}

.sheet__actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--rule-soft);
}

/* --------------------------------------------------------------------------
   10. Confirmation overlay, banner, toasts
   -------------------------------------------------------------------------- */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 20px;
    background: oklch(8% 0.01 60 / 0.75);
    backdrop-filter: blur(8px);
    animation: fade 240ms var(--ease) both;
}

.overlay__card {
    width: min(440px, 100%);
    padding: 38px 34px 30px;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 14px;
    animation: rise 340ms var(--ease) both;
}

.overlay__mark {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid var(--brass);
    color: var(--brass);
    font-size: 1.6rem;
}

.overlay__mark::before { content: ''; }

/* Spinning while the webhook lands, then a check once the plot is confirmed. */
.overlay__mark--waiting {
    border-color: var(--rule);
    border-top-color: var(--brass);
    animation: spin 900ms linear infinite;
}

.overlay__mark--done {
    border-color: var(--moss);
    color: var(--moss);
    background: oklch(74% 0.145 148 / 0.12);
}

.overlay__mark--done::before { content: '✓'; font-weight: 700; }

.overlay__mark--warn {
    border-color: var(--amber);
    color: var(--amber);
}

.overlay__mark--warn::before { content: '!'; font-weight: 700; }

.overlay__title { font-size: 1.5rem; font-weight: 700; }

.overlay__text { font-size: 0.9rem; color: var(--bone-dim); max-width: 34ch; }

.overlay .btn { margin-top: 6px; }

.banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 600;
    padding: 10px 20px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: oklch(18% 0.03 60);
    background: var(--amber);
    animation: slidedown 260ms var(--ease) both;
}

.toasts {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 700;
    display: grid;
    gap: 8px;
    justify-items: center;
    pointer-events: none;
    width: min(440px, calc(100vw - 24px));
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--bone);
    background: oklch(13% 0.012 62 / 0.97);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--brass);
    box-shadow: var(--shadow-lift);
    animation: rise 260ms var(--ease) both;
}

.toast--success { border-left-color: var(--moss); }
.toast--error   { border-left-color: var(--clay); }
.toast--info    { border-left-color: var(--brass); }
.toast.is-leaving { animation: fadeout 200ms var(--ease) both; }

.noscript {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 30px;
    text-align: center;
    background: var(--loam-900);
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   11. Admin console
   -------------------------------------------------------------------------- */

.console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    height: 100vh;
}

.mapstage--console { position: relative; inset: auto; }

.console__side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--loam-850);
    border-left: 1px solid var(--rule);
    z-index: 20;
}

.console__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--rule);
}

.console__title { font-size: 1.35rem; font-weight: 700; margin-top: 2px; }

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--rule);
}

.stat {
    padding: 14px 26px;
    border-right: 1px solid var(--rule-soft);
}

.stat:last-child { border-right: none; }

.stat__label {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.stat__value {
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--bone);
}

.tabs { display: flex; border-bottom: 1px solid var(--rule); }

.tab {
    flex: 1;
    padding: 13px 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bone-faint);
    border-bottom: 2px solid transparent;
    transition: all 180ms var(--ease);
}

.tab:hover { color: var(--bone); }

.tab.is-active {
    color: var(--brass);
    border-bottom-color: var(--brass);
    background: var(--brass-wash);
}

.tabview { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 26px 28px; }

.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: fade 240ms var(--ease) both; }

.filterbar { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 18px; }

.ledger {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    background: oklch(11% 0.01 62 / 0.4);
}

.ledger__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    table-layout: fixed;
}

.ledger__table col.col--parcel { width: 33%; }
.ledger__table col.col--action { width: 26%; }

.ledger__table th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    padding: 11px 14px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bone-faint);
    background: var(--loam-800);
    border-bottom: 1px solid var(--rule);
}

.ledger__table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
}

.ledger__table tbody tr:last-child td { border-bottom: none; }

.ledger__table tbody tr { transition: background 140ms var(--ease); }
.ledger__table tbody tr:hover { background: oklch(100% 0 0 / 0.025); }
.ledger__table tbody tr.is-selected { background: var(--brass-wash); }

.cell__parcel { display: block; font-weight: 600; }

.cell__sub {
    display: block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--bone-faint);
    white-space: nowrap;
}

.cell__parcel + .cell__sub + .pill { margin-top: 7px; }

/* The action button gets the full column so its label never clips in the
   narrow sidebar. */
.ledger__table td:last-child { padding-left: 4px; padding-right: 10px; }

.ledger__table td:last-child .btn {
    width: 100%;
    padding-inline: 6px;
    font-size: 0.72rem;
}

.cell__cust { display: grid; gap: 2px; min-width: 0; }
.cell__cust strong { font-weight: 600; }
.cell__cust span { font-size: 0.78rem; color: var(--bone-dim); word-break: break-word; }
.cell__paid { font-size: 0.72rem; color: var(--brass); font-family: var(--font-mono); }
.cell__none { color: var(--bone-faint); }

.pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.pill--available { color: var(--moss);  background: oklch(74% 0.145 148 / 0.1); }
.pill--pending   { color: var(--amber); background: oklch(80% 0.150 68 / 0.1); }
.pill--booked    { color: var(--clay);  background: oklch(63% 0.165 32 / 0.1); }

.ledger__empty { padding: 32px 16px; text-align: center; color: var(--bone-faint); font-size: 0.88rem; }

.picked {
    padding: 18px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    background: oklch(11% 0.01 62 / 0.4);
}

.picked__placeholder { font-size: 0.86rem; color: var(--bone-faint); }

.callout {
    padding: 15px 18px;
    margin-bottom: 22px;
    border-radius: var(--radius);
    border: 1px solid oklch(81% 0.125 82 / 0.25);
    border-left: 3px solid var(--brass);
    background: var(--brass-wash);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--bone-dim);
}

/* --- price tiers (admin) -------------------------------------------------- */

.section__heading {
    margin: 26px 0 12px;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.tierlist { list-style: none; display: grid; gap: 8px; }

.tierlist__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    background: oklch(11% 0.01 62 / 0.4);
}

.tierlist__body { display: grid; gap: 1px; min-width: 0; }
.tierlist__body strong { font-size: 0.9rem; font-weight: 600; }
.tierlist__body span {
    font-family: var(--font-mono);
    font-size: 0.73rem;
    color: var(--bone-faint);
}

.tierlist__actions { display: flex; gap: 6px; }

.tierform {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    background: oklch(11% 0.01 62 / 0.25);
}

.tierform__legend {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 14px;
}

.tierform__actions { display: flex; gap: 8px; margin-top: 16px; }

.swatchpick { border: none; margin-top: 14px; }

.swatchpick legend {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone-dim);
    margin-bottom: 8px;
}

.swatchpick__row { display: flex; gap: 8px; flex-wrap: wrap; }

.swatchpick__opt { cursor: pointer; display: inline-flex; }

.swatchpick__opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.swatchpick__dot {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: block;
    background: color-mix(in oklab, var(--plot-tint) 32%, transparent);
    border: 2px solid var(--plot-tint);
    transition: all 160ms var(--ease);
}

.swatchpick__opt input:checked + .swatchpick__dot {
    box-shadow: 0 0 0 2px var(--loam-850), 0 0 0 4px var(--plot-tint);
    transform: scale(1.06);
}

.swatchpick__opt input:focus-visible + .swatchpick__dot {
    outline: 2px solid var(--bone);
    outline-offset: 2px;
}

.console__foot {
    padding: 15px 26px;
    border-top: 1px solid var(--rule);
}

.console__backlink {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bone-faint);
    text-decoration: none;
    transition: color 160ms var(--ease);
}

.console__backlink:hover { color: var(--brass); }

/* --------------------------------------------------------------------------
   12. Sign-in
   -------------------------------------------------------------------------- */

.page-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(90% 70% at 50% 0%, oklch(23% 0.025 68) 0%, var(--loam-900) 60%);
}

.signin {
    width: min(410px, 100%);
    padding: 38px 36px 32px;
    animation: rise 500ms var(--ease) both;
}

.signin__header { margin-bottom: 26px; }

.signin__title { font-size: 1.7rem; font-weight: 700; margin: 5px 0 7px; }

.signin__lede { font-size: 0.86rem; color: var(--bone-dim); }

.signin__form { display: grid; gap: 16px; }

.signin__form .btn { width: 100%; }

.signin__back {
    text-align: center;
    font-size: 0.84rem;
    color: var(--bone-faint);
    text-decoration: none;
    transition: color 160ms var(--ease);
}

.signin__back:hover { color: var(--brass); }

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    to { opacity: 0; transform: translateY(6px); }
}

@keyframes slidedown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

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

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .console { grid-template-columns: minmax(0, 1fr) 420px; }
    .stat { padding: 12px 18px; }
    .console__head, .console__foot { padding-left: 20px; padding-right: 20px; }
    .tabview { padding: 20px; }
}

@media (max-width: 900px) {
    .console {
        grid-template-columns: 1fr;
        grid-template-rows: 40vh minmax(0, 1fr);
    }

    .console__side { border-left: none; border-top: 1px solid var(--rule); }

    .masthead {
        top: 12px;
        left: 12px;
        right: 12px;
        max-width: none;
        padding: 13px 18px 12px;
    }

    .masthead__lede { display: none; }
    .masthead__tally { margin-top: 8px; padding-top: 8px; }

    /* Legend becomes a single scrollable strip so it never eats the map. */
    .legend {
        top: auto;
        bottom: 78px;
        left: 12px;
        right: 12px;
        padding: 10px 14px;
        border-radius: var(--radius);
    }

    .legend__heading { display: none; }

    .legend__list {
        margin-top: 0;
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .legend__list::-webkit-scrollbar { display: none; }
    .legend__item { flex: none; font-size: 0.72rem; white-space: nowrap; }

    /* Both lists sit on one line on small screens, so the divider becomes a
       vertical rule rather than a horizontal one. */
    .legend__list--status {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        margin-left: 4px;
        padding-left: 14px;
        border-left: 1px solid var(--rule-soft);
    }

    .legend { display: flex; gap: 0; }
    .legend__item--tier { gap: 8px; }
    .legend__price { margin-left: 0; }

    /* Detail panel becomes a bottom sheet. */
    .detail {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 76vh;
        overflow-y: auto;
        padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        transform: translateY(102%);
        transition: transform 320ms var(--ease);
        animation: none;
        z-index: 400;
    }

    .detail.is-open { transform: translateY(0); }

    .detail__close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 1.4rem;
        line-height: 1;
        color: var(--bone-dim);
        background: oklch(100% 0 0 / 0.06);
        border: 1px solid var(--rule);
    }

    .zoomctl { bottom: auto; top: 50%; left: 12px; transform: translateY(-50%); }

    .utilrail { bottom: 16px; left: 12px; }

    .fieldrow { grid-template-columns: 1fr; }

    .sheet__actions { grid-template-columns: 1fr; }
    .sheet__actions .btn--ghost { order: 2; }
}

@media (max-width: 560px) {
    body { font-size: 14px; }
    .masthead__title { font-size: 1.2rem; }
    .sheet__inner { padding: 22px 20px; }
    .signin { padding: 30px 24px 26px; }
    .stat { padding: 10px 14px; }
    .stat__value { font-size: 1rem; }
    .filterbar { grid-template-columns: 1fr; }
    .ledger__table th, .ledger__table td { padding: 11px 10px; }
    .pricetag__amount { font-size: 2.1rem; }
}