/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    /* Brand palette */
    --ink:          #10150f;
    --ink-2:        #ffffff;
    --ink-3:        #f0ece3;
    --cream:        #f2efe6;
    --sand:         #d6cfbd;
    --muted:        #7a8075;
    --line:         rgba(16,21,15,.11);
    --line-dark:    rgba(16,21,15,.13);
    --moss:         #aabd49;
    --moss-bright:  #aabd49;
    --dust:         #ed6a32;
    --sun:          #f7bc42;

    /* Typography */
    --serif: "Barlow Condensed", "Arial Narrow", sans-serif;
    --sans:  "Manrope", Arial, sans-serif;
    --mono:  "DM Mono", monospace;

    /* Layout */
    --page:   min(1280px, calc(100% - 80px));
    --radius: 8px;

    /* Legacy tokens kept for admin/forms */
    --primary:       #1B4332;
    --primary-hover: #2D6A4F;
    --accent:        var(--dust);
    --accent-hover:  #d45c28;
    --bg:            var(--cream);
    --surface:       #ffffff;
    --border:        rgba(16,21,15,.12);
    --text:          var(--ink);
    --text-muted:    var(--muted);
    --shadow-sm:     0 1px 3px rgba(0,0,0,.2);
    --shadow:        0 4px 16px rgba(0,0,0,.3);
    --grade-1: #22C55E;
    --grade-2: #84CC16;
    --grade-3: #EAB308;
    --grade-4: #F97316;
    --grade-5: #EF4444;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.6;
    letter-spacing: 0.015em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--moss-bright); color: var(--ink); }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.hidden    { display: none !important; }
.prose h2  { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.prose p   { margin-bottom: 1rem; }
.prose a   { text-decoration: underline; color: var(--moss-bright); }

/* ── Visual primitives ───────────────────────────────────────────────────── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--moss-bright);
    font: 500 10px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
}
.eyebrow::before { content: ""; display: block; width: 28px; height: 1px; background: currentColor; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dust); box-shadow: 0 0 0 5px rgba(237,106,50,.12); }
.section-title {
    max-width: 740px;
    margin: 18px 0 0;
    font-family: var(--serif);
    font-size: clamp(3.4rem, 7vw, 6.8rem);
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.015em;
    text-transform: uppercase;
}
.section-title em { color: var(--moss-bright); font-style: italic; }
.section-copy { max-width: 420px; color: rgba(242,239,230,.68); font-size: 14px; line-height: 1.8; }

/* ── Brand mark ──────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 39px; height: 39px;
    border: 2px solid var(--moss-bright);
    border-radius: 50%;
    transform: rotate(45deg);
    flex-shrink: 0;
}
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--moss-bright); }
.brand-mark::before { width: 1px; height: 26px; }
.brand-mark::after  { width: 26px; height: 1px; }
.brand-mark b { position: relative; z-index: 1; display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--dust); }
.brand-text { font: 800 21px/.8 var(--serif); letter-spacing: .04em; text-transform: uppercase; }
.brand-text span { display: block; margin-top: 5px; color: var(--moss-bright); font: 500 8px/1 var(--mono); letter-spacing: .16em; }

/* ── Topbar nav ──────────────────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(20px, calc((100% - 1280px) / 2));
    background: rgba(16,21,15,.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: rgba(255,255,255,.82); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav a:not(.nav-cta):hover { color: var(--moss-bright); }
.nav-cta { padding: 11px 16px; color: var(--ink) !important; background: var(--moss-bright); transition: transform .2s, background .2s; }
.nav-cta:hover { background: var(--cream); transform: translateY(-2px); }
.nav-name { color: rgba(255,255,255,.6); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.nav-logout { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0; }
.nav-logout:hover { color: var(--moss-bright); }
.hamburger { display: none; width: 40px; height: 40px; border: 0; background: transparent; color: var(--cream); flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.hamburger span, .hamburger::before, .hamburger::after { content: ""; display: block; width: 21px; height: 1px; background: var(--cream); }

.topbar.nav-open .nav { display: flex; }

@media (max-width: 800px) {
    .topbar { height: 60px; padding: 0 20px; }
    .brand-mark { width: 31px; height: 31px; }
    .brand-text { font-size: 18px; }
    .nav { display: none; flex-direction: column; align-items: flex-start; position: fixed; top: 60px; left: 0; right: 0; background: #182019; padding: 1.25rem 20px; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.1); z-index: 50; }
    .hamburger { display: flex; }
    .trails-body { grid-template-columns: 1fr; }
    .trails-sidebar { border-right: none; border-bottom: 1px solid var(--line); }
    .trails-hero { padding: 24px 20px 20px; }
}

/* ── CTA button ──────────────────────────────────────────────────────────── */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 15px;
    min-height: 54px; padding: 0 23px;
    color: var(--ink); background: var(--moss-bright);
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    transition: background .2s, transform .2s;
}
.button:hover { background: var(--cream); transform: translateY(-3px); }
.button .arrow { font-size: 17px; line-height: 1; transition: transform .2s; }
.button:hover .arrow { transform: translateX(4px); }

.text-link {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--moss);
    border-bottom: 1px solid rgba(170,189,73,.4);
    padding-bottom: 8px;
    font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.text-link:hover { color: var(--ink); }
.drives .text-link, .community .text-link { color: var(--moss-bright); border-bottom-color: rgba(217,238,114,.35); }
.drives .text-link:hover, .community .text-link:hover { color: var(--cream); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 720px;
    height: min(calc(100svh - 72px), 860px);
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: #24352b;
    background-image:
        linear-gradient(90deg, rgba(8,12,9,.84) 0%, rgba(8,12,9,.55) 37%, rgba(8,12,9,.16) 67%, rgba(8,12,9,.3) 100%),
        linear-gradient(0deg, rgba(8,12,9,.78) 0%, transparent 45%),
        url("/assets/images/hero-karoo-4x4.jpg");
    background-size: cover;
    background-position: center;
}
.hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    opacity: .2;
    background-image:
        linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: linear-gradient(to right, black 0, transparent 68%);
}
.hero-content { position: relative; width: var(--page); margin: 0 auto; padding: 0 0 70px; }
.hero-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--cream); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hero-kicker i { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--moss-bright); border-radius: 50%; }
.hero h1 { max-width: 760px; margin: 0; font: 900 clamp(5.2rem, 11.2vw, 10.9rem)/.72 var(--serif); letter-spacing: -.03em; text-transform: uppercase; }
.hero h1 .accent { display: block; color: var(--moss-bright); font-style: italic; }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 46px; }
.hero-dek { max-width: 370px; margin: 0; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.75; }
.hero-dek strong { color: var(--moss-bright); font-weight: 700; }
.hero-side-note { position: absolute; right: 0; bottom: 70px; display: flex; align-items: center; gap: 14px; writing-mode: vertical-rl; font: 500 9px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.hero-side-note::before { content: ""; height: 34px; width: 1px; background: var(--moss-bright); }
.scroll-prompt { position: absolute; left: 0; bottom: 7px; display: flex; align-items: center; gap: 12px; font: 500 9px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.67); }
.scroll-prompt::after { content: "↓"; font-size: 18px; color: var(--moss-bright); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ── Ticker ──────────────────────────────────────────────────────────────── */
.ticker { overflow: hidden; white-space: nowrap; color: var(--ink); background: var(--moss-bright); }
.ticker-track { display: inline-flex; align-items: center; gap: 28px; min-width: max-content; padding: 13px 0; animation: ticker 35s linear infinite; font: 700 15px/1 var(--serif); letter-spacing: .1em; text-transform: uppercase; }
.ticker-track span { display: inline-flex; align-items: center; gap: 28px; }
.ticker-track span::after { content: "✦"; color: var(--dust); font-size: 14px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── Meta strip ──────────────────────────────────────────────────────────── */
.explorer-meta { width: var(--page); margin: 0 auto; padding: 26px 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; border-bottom: 1px solid var(--line); }
.meta-cell { min-height: 44px; padding: 0 26px; border-left: 1px solid var(--line); }
.meta-cell:first-child { padding-left: 0; border-left: 0; }
.meta-num { display: block; color: var(--moss-bright); font: 700 28px/.9 var(--serif); letter-spacing: .02em; }
.meta-label { display: block; margin-top: 6px; color: var(--muted); font: 500 9px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.meta-status { display: flex; align-items: center; height: 100%; gap: 11px; color: var(--ink); font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ── Featured drives ─────────────────────────────────────────────────────── */
.drives { position: relative; padding: 142px 0 132px; background: var(--ink); color: var(--cream); }
.drives::before { content: ""; position: absolute; right: -8vw; top: 90px; width: 45vw; height: 45vw; border-radius: 50%; border: 1px solid rgba(170,189,73,.14); box-shadow: 0 0 0 80px rgba(170,189,73,.035), 0 0 0 160px rgba(170,189,73,.02); pointer-events: none; }
.drives-inner { position: relative; width: var(--page); margin: 0 auto; }
.drive-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.drive-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr; gap: 15px; margin-top: 60px; }

/* Trail cards */
.trail-card { position: relative; min-height: 510px; overflow: hidden; background: var(--ink-2); display: block; }
.trail-card--feature { min-height: 510px; }
.trail-card::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(7,11,8,.94) 1%, rgba(7,11,8,.12) 64%, rgba(7,11,8,.08)); transition: opacity .35s ease; }
.trail-card::after { content: ""; position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(255,255,255,.1); pointer-events: none; }
.trail-card:hover::before { opacity: .8; }
.trail-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.trail-card:hover .trail-image { transform: scale(1.06); }
.trail-card-body { position: absolute; z-index: 2; inset: auto 28px 28px; }
.trail-card .chip { display: inline-flex; margin-bottom: 14px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.31); background: rgba(15,19,13,.27); backdrop-filter: blur(6px); color: var(--cream); font: 500 8px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.trail-card h3 { max-width: 290px; margin: 0; font: 800 clamp(2.3rem, 3.3vw, 3.5rem)/.83 var(--serif); letter-spacing: -.035em; text-transform: uppercase; }
.trail-card-info { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 17px; color: rgba(255,255,255,.77); font: 500 9px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.trail-card-info span + span::before { content: "•"; margin-right: 12px; color: var(--moss-bright); }
.trail-card-arrow { position: absolute; z-index: 2; top: 18px; right: 18px; display: grid; place-items: center; width: 43px; height: 43px; background: var(--moss-bright); color: var(--ink); font-size: 21px; transition: transform .25s; }
.trail-card:hover .trail-card-arrow { transform: rotate(45deg); }
.trail-card--plain { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: #e8e2d3; color: var(--ink); min-height: 510px; }
.trail-card--plain::before, .trail-card--plain::after { display: none; }
.tiny-map { position: relative; height: 155px; margin: -10px -10px 25px; overflow: hidden; background: #c4cbb1; }
.tiny-map::before { content: ""; position: absolute; inset: -20%; opacity: .75; background: repeating-linear-gradient(39deg, transparent 0 16px, rgba(16,21,15,.27) 17px 19px, transparent 20px 49px), repeating-linear-gradient(-62deg, transparent 0 30px, rgba(16,21,15,.18) 31px 32px, transparent 33px 73px); transform: rotate(-8deg); }
.tiny-map::after { content: ""; position: absolute; left: 50%; top: 48%; width: 13px; height: 13px; border-radius: 50% 50% 50% 0; background: var(--dust); transform: rotate(-45deg); box-shadow: 0 0 0 7px rgba(237,106,50,.18); }
.plain-overline { color: var(--dust); font: 700 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.trail-card--plain h3 { max-width: 250px; font-family: var(--serif); font-size: clamp(2.5rem, 3vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; line-height: .9; margin: 8px 0 0; }
.card-copy { margin: 17px 0 0; color: rgba(16,21,15,.68); font-size: 12px; line-height: 1.6; }
.mini-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 23px; color: var(--ink); font: 800 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.mini-btn::after { content: "↗"; font-size: 16px; color: var(--dust); }

/* ── How it works ────────────────────────────────────────────────────────── */
.how { position: relative; padding: 145px 0 150px; overflow: hidden; background: var(--cream); color: var(--ink); }
.how::before { content: "01 / 03"; position: absolute; top: 64px; right: 5vw; color: rgba(16,21,15,.06); font: 900 18vw/.7 var(--serif); letter-spacing: -.06em; pointer-events: none; }
.how-inner { position: relative; width: var(--page); margin: 0 auto; }
.how .eyebrow { color: var(--dust); }
.how .eyebrow::before { background: var(--dust); }
.how .section-title em { color: var(--dust); }
.how-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.how .section-copy { color: rgba(16,21,15,.7); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 78px; border-top: 1px solid var(--line-dark); }
.step { min-height: 285px; padding: 31px 32px 25px 0; border-right: 1px solid var(--line-dark); }
.step + .step { padding-left: 32px; }
.step:last-child { border-right: none; }
.step-num { display: block; color: var(--dust); font: 700 12px/1 var(--mono); letter-spacing: .08em; }
.step-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-top: 42px; border: 1px solid rgba(16,21,15,.24); border-radius: 50%; font: 800 23px/1 var(--serif); }
.step h3 { margin: 29px 0 10px; font: 800 32px/.9 var(--serif); letter-spacing: -.025em; text-transform: uppercase; }
.step p { max-width: 265px; margin: 0; color: rgba(16,21,15,.65); font-size: 12px; line-height: 1.7; }

/* ── Community ───────────────────────────────────────────────────────────── */
.community { position: relative; padding: 142px 0 0; overflow: hidden; background: var(--ink); color: var(--cream); }
.community-inner { width: var(--page); margin: 0 auto; }
.community-visual { position: relative; min-height: 525px; margin-top: 65px; overflow: hidden; background: radial-gradient(circle at 70% 25%, rgba(170,189,73,.26), transparent 26%), #29352b; }
.contour { position: absolute; inset: 0; opacity: .72; background-image: repeating-radial-gradient(ellipse at 60% 82%, transparent 0 26px, rgba(217,238,114,.19) 27px 28px, transparent 29px 48px); transform: scale(1.7, .7); }
.route { position: absolute; left: 12%; top: 45%; width: 72%; height: 98px; border: 3px dotted var(--moss-bright); border-color: var(--moss-bright) transparent transparent transparent; border-radius: 50%; transform: rotate(9deg); opacity: .9; }
.route::before, .route::after { content: ""; position: absolute; width: 19px; height: 19px; border-radius: 50%; background: var(--dust); box-shadow: 0 0 0 8px rgba(237,106,50,.17); }
.route::before { left: 1%; top: -6px; }
.route::after  { right: 3%; top: 37px; }
.field-note { position: absolute; z-index: 2; right: 8%; top: 20%; width: min(300px, 38vw); padding: 27px; color: var(--ink); background: var(--moss-bright); transform: rotate(2deg); box-shadow: 15px 15px 0 rgba(16,21,15,.24); }
.field-note::before { content: "LIVE CONDITION NOTE"; display: block; margin-bottom: 17px; font: 700 9px/1 var(--mono); letter-spacing: .13em; }
.field-note p { margin: 0; font: 800 27px/.93 var(--serif); letter-spacing: -.02em; text-transform: uppercase; }
.field-note span { display: block; margin-top: 19px; font: 500 9px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.crew-stat { position: absolute; z-index: 2; left: 7%; bottom: 8%; display: flex; gap: 18px; align-items: center; }
.avatars { display: flex; }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; margin-left: -8px; border: 2px solid var(--ink-2); border-radius: 50%; color: var(--ink); background: var(--cream); font: 700 9px/1 var(--mono); }
.avatar:first-child { margin-left: 0; background: var(--sun); }
.avatar:nth-child(2) { background: var(--dust); color: white; }
.avatar:nth-child(3) { background: var(--moss-bright); }
.crew-stat p { margin: 0; color: var(--cream); font: 500 10px/1.55 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.community-bottom { width: var(--page); margin: 0 auto; padding: 30px 0; display: flex; justify-content: space-between; gap: 28px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.community-bottom p { margin: 0; color: var(--muted); font-size: 12px; }

/* ── Final CTA ───────────────────────────────────────────────────────────── */
.final { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; color: var(--ink); background: var(--moss-bright); }
.final::before { content: "GO"; position: absolute; z-index: 0; right: -1.5vw; bottom: -7vw; color: rgba(16,21,15,.08); font: 900 43vw/.7 var(--serif); letter-spacing: -.1em; pointer-events: none; }
.final-inner { position: relative; z-index: 1; width: var(--page); margin: 0 auto; }
.final .eyebrow { color: var(--ink); }
.final .eyebrow::before { background: var(--ink); }
.final h2 { max-width: 900px; margin: 22px 0 39px; font: 900 clamp(4.5rem, 10vw, 10rem)/.76 var(--serif); letter-spacing: -.025em; text-transform: uppercase; }
.final h2 em { color: var(--dust); font-style: italic; }
.final .button { background: var(--ink); color: var(--cream); }
.final .button:hover { background: var(--dust); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { padding: 55px 0 32px; color: var(--cream); background: #0a0e0a; }
.footer-inner { width: var(--page); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 60px; padding-bottom: 65px; }
.footer-tag { max-width: 230px; margin: 20px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.footer-osm { margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.35); }
.footer-osm a { color: rgba(255,255,255,.45); text-decoration: underline; }
.footer-head { display: block; margin-bottom: 17px; color: var(--moss-bright); font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.footer-links { display: grid; gap: 9px; }
.footer-links a { color: rgba(255,255,255,.72); font-size: 12px; }
.footer-links a:hover { color: var(--moss-bright); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 23px; border-top: 1px solid var(--line); color: #73786f; font: 500 9px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* ── Flash messages ──────────────────────────────────────────────────────── */
.flash-wrapper { position: sticky; top: 0; z-index: 90; }
.alert { padding: .75rem 1rem; font-size: .875rem; border-left: 4px solid; }
.alert-success { background: #f0fdf4; border-color: #22C55E; color: #14532d; }
.alert-error   { background: #fef2f2; border-color: #EF4444; color: #7f1d1d; }
.alert-info    { background: #f7fde8; border-color: var(--moss); color: #1a2e0a; }

/* ── Login page ──────────────────────────────────────────────────────────── */
.login-page  { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 160px); padding: 3rem 16px; }
.login-card  { background: #fff; border: 1px solid var(--line); padding: 2.5rem; width: 100%; max-width: 400px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 2rem; font: 800 .8rem/1 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); opacity: .7; }
.login-title { font: 800 clamp(2.2rem, 5vw, 3rem)/.9 var(--serif); letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); margin-bottom: .5rem; }
.login-sub   { font-size: .85rem; color: var(--muted); margin-bottom: 1.75rem; }
.login-form .btn { margin-top: .25rem; }
.login-error { background: rgba(239,68,68,.08); border-left: 3px solid #ef4444; padding: .6rem .875rem; font-size: .82rem; color: #b91c1c; margin-bottom: 1.25rem; }
.login-hint  { font-size: .75rem; color: var(--muted); margin-top: 3px; }
.login-switch { margin-top: 1.5rem; font-size: .82rem; color: var(--muted); text-align: center; }
.login-switch a { color: var(--moss); font-weight: 600; }
.login-switch a:hover { color: var(--ink); }

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header { padding: 2rem 0 1rem; }
.page-header h1 { font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; }
.page-header p  { color: var(--muted); margin-top: .25rem; font-size: .9rem; }

/* ── Trails page ─────────────────────────────────────────────────────────── */

.trails-body { display: grid; grid-template-columns: 260px 1fr 1fr; min-height: calc(100vh - 72px); }

.trails-sidebar { background: var(--ink-2); border-right: 1px solid var(--line); padding: 1.75rem 1.5rem; overflow-y: auto; }
.filter-heading { font: 700 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--moss-bright); margin-bottom: 1.25rem; }

.trails-map-panel { position: sticky; top: 0; height: calc(100vh - 72px); overflow: hidden; border-right: 1px solid var(--line); }
.trails-map-panel .browse-map { height: 100%; margin: 0; border: none; }

/* Map legend */
.map-legend { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.map-legend-item { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; }
.map-legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(16,21,15,.15); }
.map-legend-label { font: 500 .75rem/1 var(--sans); color: var(--muted); }

/* Pagination */
.trails-pagination { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.tpag-btn { display: inline-flex; align-items: center; padding: .45rem .9rem; border: 1px solid var(--line); background: var(--ink-2); color: var(--ink); font: 600 .8rem/1 var(--sans); text-decoration: none; transition: border-color .15s, color .15s; }
.tpag-btn:hover { border-color: var(--moss-bright); color: var(--moss-bright); }
.tpag-btn--disabled { opacity: .35; cursor: default; pointer-events: none; }
.tpag-info { flex: 1; text-align: center; font: 500 .78rem/1 var(--mono); color: var(--muted); letter-spacing: .06em; }

.trails-main { padding: 1.5rem; background: var(--cream); overflow-y: auto; height: calc(100vh - 72px); }
.trails-results { margin-top: 1.25rem; }
.results-count { font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }

.trails-empty { padding: 3rem 0; }
.trails-empty p { margin-top: 12px; color: var(--muted); font-size: 14px; }
.trails-empty-link { color: var(--moss-bright); }

.trail-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* Trail list card */
.tcard { position: relative; display: flex; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden; transition: border-color .2s, transform .2s; text-decoration: none; }
.tcard:hover { border-color: var(--moss-bright); transform: translateY(-2px); }
.tcard-grade { width: 4px; flex-shrink: 0; }
.tcard-body { flex: 1; padding: 1rem 1rem 1rem .875rem; min-width: 0; }
.tcard-name { font: 800 1.35rem/.9 var(--serif); letter-spacing: -.025em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.tcard:hover .tcard-name { color: var(--moss); }
.tcard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tcard-meta span + span::before { content: "·"; margin-right: 8px; color: var(--moss); }
.tcard-grade-label { color: var(--moss); }
.tcard-vehicle { display: inline-block; margin-top: 10px; font: 500 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(16,21,15,.35); }
.tcard-arrow { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 13px; transition: background .2s, color .2s, border-color .2s; }
.tcard:hover .tcard-arrow { background: var(--moss-bright); border-color: var(--moss-bright); color: var(--ink); }



/* ── Trail detail ────────────────────────────────────────────────────────── */
.td-hero { position: relative; background: var(--ink-2); color: var(--ink); }
.td-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; max-height: 380px; overflow: hidden; }
.td-photo { width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.td-photo--main { grid-column: 1 / 3; grid-row: 1 / 2; }
.td-hero-inner { padding: 2rem max(20px, calc((100% - 1280px) / 2)); position: relative; z-index: 2; }
.td-breadcrumb { display: flex; align-items: center; gap: .5rem; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }
.td-breadcrumb a { color: var(--muted); }
.td-breadcrumb a:hover { color: var(--ink); }
.td-title { font: 900 clamp(2.5rem, 6vw, 5rem)/.85 var(--serif); letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.25rem; }
.td-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.td-grade-pill { display: inline-flex; padding: 5px 10px; font: 600 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.td-grade-pill.grade-1 { background: rgba(34,197,94,.15); color: #16a34a; }
.td-grade-pill.grade-2 { background: rgba(132,204,22,.15); color: #4d7c0f; }
.td-grade-pill.grade-3 { background: rgba(234,179,8,.15); color: #92400e; }
.td-grade-pill.grade-4 { background: rgba(249,115,22,.15); color: #c2410c; }
.td-grade-pill.grade-5 { background: rgba(239,68,68,.15); color: #991b1b; }
.td-meta-chip { display: inline-flex; padding: 5px 10px; border: 1px solid var(--line); font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--cream); }

.td-body { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; width: var(--page); margin: 0 auto; padding: 2.5rem 0 4rem; }
.td-main {}
.td-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.td-conditions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .875rem 1.25rem; margin-bottom: 1.5rem; font-size: .875rem; }
.td-conditions--dry        { background: #f0fdf4; border-left: 4px solid #22C55E; color: #14532d; }
.td-conditions--muddy      { background: #fffbeb; border-left: 4px solid #CA8A04; color: #78350f; }
.td-conditions--washed_out { background: #fef2f2; border-left: 4px solid #EF4444; color: #7f1d1d; }
.td-conditions--closed     { background: #fef2f2; border-left: 4px solid #7F1D1D; color: #7f1d1d; }
.td-conditions-label { font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex-basis: 100%; }
.td-conditions strong { color: inherit; font-weight: 700; }
.td-conditions-meta { font: 500 9px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }

.td-description { font-size: .95rem; line-height: 1.75; color: rgba(16,21,15,.75); margin-bottom: 2rem; }
.td-osm-note { font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; padding: .75rem 1rem; border-left: 3px solid var(--line); }
.td-osm-note a { color: var(--moss-bright); }

/* OSM community contribution banner */
.td-osm-banner { position: relative; margin: 2.5rem 0; background: #f7f4ec; border: 1px solid rgba(16,21,15,.1); overflow: hidden; isolation: isolate; }
.td-osm-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05; background-image: linear-gradient(rgba(16,21,15,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(16,21,15,.5) 1px, transparent 1px); background-size: 40px 40px; }
.td-osm-banner::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--moss-bright); }
.td-osm-banner-inner { display: grid; grid-template-columns: 1fr auto; gap: 3rem; padding: 2.5rem 2.5rem 2.5rem 3rem; align-items: start; }
.td-osm-banner .eyebrow { margin-bottom: 1.25rem; }
.td-osm-banner-heading { font: 900 clamp(2.6rem, 5vw, 4.2rem)/.82 var(--serif); text-transform: uppercase; letter-spacing: -.02em; color: var(--ink); margin: 0 0 1.25rem; }
.td-osm-banner-heading em { display: block; color: var(--moss); font-style: italic; }
.td-osm-banner-desc { font-size: .875rem; line-height: 1.8; color: rgba(16,21,15,.6); margin-bottom: 1.5rem; max-width: 480px; }
.td-osm-banner-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.td-osm-banner-chips .chip { display: inline-flex; padding: 6px 10px; border: 1px solid rgba(16,21,15,.14); background: rgba(16,21,15,.04); color: var(--ink); font: 500 8px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.td-osm-banner-right { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-top: .5rem; min-width: 180px; }
.td-osm-banner-src { display: block; margin-top: 1.75rem; font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(16,21,15,.3); transition: color .15s; }
.td-osm-banner-src:hover { color: var(--moss); }

/* Coords display */
.td-coords { font-family: var(--mono) !important; font-size: .8rem !important; color: var(--muted) !important; }

.td-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px; margin: 2rem 0; background: var(--line); border: 1px solid var(--line); }
.td-stats--sidebar { grid-template-columns: 1fr; margin: 0; }
.td-stat { padding: .875rem 1rem; background: var(--ink-2); }
.td-stat dt { font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.td-stat dd { font: 700 .95rem/1.2 var(--sans); color: var(--ink); margin: 0; }
.td-stat dd a { color: var(--moss-bright); }

.td-section-label { font: 700 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--moss-bright); margin-bottom: 1.25rem; display: block; }
.td-contact { margin: 2rem 0; }
.td-contact-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.td-reports { margin-top: 2.5rem; }
.td-empty { color: var(--muted); font-size: .9rem; }
.td-report { background: var(--ink-2); border: 1px solid var(--line); padding: 1rem 1.25rem; margin-bottom: 8px; }
.td-report-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.td-rating { color: var(--sun); letter-spacing: 1px; font-size: .85rem; }
.td-report-meta { font: 500 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.td-report-vehicle { font-size: .85rem; color: var(--muted); margin: .25rem 0; }
.td-report-notes { font-size: .875rem; color: rgba(16,21,15,.75); margin: 0; }

.td-disclaimer { background: rgba(237,106,50,.07); border: 1px solid rgba(237,106,50,.25); padding: 1rem 1.25rem; font-size: .8rem; color: rgba(16,21,15,.6); }
.td-disclaimer strong { display: block; margin-bottom: .35rem; color: var(--dust); font-size: .8rem; }

/* App CTA banner (replaces old osm-banner interactive actions) */
.td-app-cta { position: relative; margin: 2.5rem 0; background: #10150f; overflow: hidden; isolation: isolate; }
.td-app-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .08; background-image: linear-gradient(rgba(170,189,73,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(170,189,73,.8) 1px, transparent 1px); background-size: 40px 40px; }
.td-app-cta::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--moss-bright); }
.td-app-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 3rem; padding: 2.5rem 2.5rem 2.5rem 3rem; align-items: center; }
.td-app-cta .eyebrow { margin-bottom: 1rem; }
.td-app-cta-heading { font: 900 clamp(2rem, 4vw, 3.2rem)/.85 var(--serif); text-transform: uppercase; letter-spacing: -.02em; color: #fff; margin: 0 0 1rem; }
.td-app-cta-heading em { display: block; color: var(--moss-bright); font-style: italic; }
.td-app-cta-desc { font-size: .875rem; line-height: 1.8; color: rgba(255,255,255,.55); margin: 0; max-width: 420px; }
.td-app-cta-actions { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.td-osm-src-link { font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.25); transition: color .15s; margin-top: .5rem; }
.td-osm-src-link:hover { color: var(--moss-bright); }

/* App Store / Google Play buttons */
.td-store-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem; border-radius: 8px; text-decoration: none; font-family: var(--sans); transition: opacity .15s, transform .1s; white-space: nowrap; }
.td-store-btn:hover { opacity: .88; transform: translateY(-1px); }
.td-store-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.td-store-btn span { display: flex; flex-direction: column; line-height: 1.15; }
.td-store-btn small { font-size: 9px; font-weight: 500; letter-spacing: .04em; opacity: .8; }
.td-store-btn--apple { background: #fff; color: #10150f; font-size: .85rem; font-weight: 700; }
.td-store-btn--google { background: var(--moss-bright); color: #10150f; font-size: .85rem; font-weight: 700; }
.td-store-btn--sm { padding: .5rem .9rem; font-size: .8rem; }
.td-store-btn--sm svg { width: 16px; height: 16px; }

/* ── Venues ──────────────────────────────────────────────────────────────── */
.venues-body { width: var(--page); margin: 0 auto; padding: 2.5rem 0 4rem; }
.venue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.vcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line); background: var(--ink-2); transition: box-shadow .15s, transform .15s; }
.vcard:hover { box-shadow: 0 4px 16px rgba(16,21,15,.1); transform: translateY(-2px); }
.vcard-cover { height: 160px; background: #1a2018 center/cover no-repeat; }
.vcard-cover--placeholder { background: linear-gradient(135deg, #1a2018 0%, #2a3828 100%); }
.vcard-body { padding: 1.1rem 1.25rem; }
.vcard-type { font: 500 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--moss-bright); display: block; margin-bottom: .5rem; }
.vcard-name { font: 700 1.05rem/1.2 var(--sans); color: var(--ink); margin: 0 0 .5rem; }
.vcard-meta { display: flex; gap: .75rem; font: 500 .78rem/1 var(--sans); color: var(--muted); }

.venue-logo { width: 80px; height: 80px; object-fit: contain; border: 1px solid var(--line); padding: .5rem; margin-bottom: 1rem; }


/* Trails listing — app upsell strip */
.trails-app-strip { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: #10150f; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; border-left: 3px solid var(--moss-bright); flex-wrap: wrap; }
.trails-app-strip-text { display: flex; flex-direction: column; gap: .25rem; }
.trails-app-strip-text strong { font: 700 .9rem/1.3 var(--sans); color: #fff; }
.trails-app-strip-text span { font: 400 .8rem/1.4 var(--sans); color: rgba(255,255,255,.45); }
.trails-app-strip-btns { display: flex; gap: .625rem; flex-wrap: wrap; flex-shrink: 0; }

/* Sidebar app prompt */
.td-sidebar-app { background: #10150f; padding: 1.25rem; margin-bottom: 1.25rem; }
.td-sidebar-app-label { font: 600 .78rem/1.4 var(--sans); color: rgba(255,255,255,.55); margin-bottom: .875rem; }

/* ── Map containers ──────────────────────────────────────────────────────── */
.browse-map { height: 300px; width: 100%; overflow: hidden; margin-bottom: 1rem; border: 1px solid var(--line); }
.map-pin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }

/* Trail detail map card */
.td-map-card { border: 1px solid var(--line); overflow: hidden; margin: 0 0 2rem; }
.td-map-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--ink-3); border-bottom: 1px solid var(--line); gap: 1rem; }
.td-map-label { font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.td-map      { height: 440px; width: 100%; overflow: hidden; display: block; }
.td-map-footer { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
.td-map-action { flex: 1; min-width: 120px; padding: 11px 14px; background: var(--ink-3); color: var(--muted); font: 600 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: center; border: none; border-right: 1px solid var(--line); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.td-map-action:last-child { border-right: none; }
.td-map-action:hover { background: var(--ink-2); color: var(--moss-bright); }

/* Style switcher */
.td-style-switcher { display: flex; background: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px; gap: 2px; }
.td-style-btn { padding: 5px 12px; border: none; background: transparent; color: var(--muted); font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: background .12s, color .12s; white-space: nowrap; }
.td-style-btn:hover { background: rgba(16,21,15,.07); color: var(--ink); }
.td-style-btn.active { background: var(--moss-bright); color: var(--ink); }


/* ── Condition colors ────────────────────────────────────────────────────── */
.condition-dry        { background: #f0fdf4; border-left: 4px solid #22C55E; }
.condition-muddy      { background: #fffbeb; border-left: 4px solid #CA8A04; }
.condition-washed_out { background: #fef2f2; border-left: 4px solid #EF4444; }
.condition-closed     { background: #fef2f2; border-left: 4px solid #7F1D1D; }
.condition-pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; font-family: var(--mono); }
.condition-pill.condition-dry        { background: #dcfce7; color: #14532d; }
.condition-pill.condition-muddy      { background: #fef9c3; color: #78350f; }
.condition-pill.condition-washed_out { background: #fee2e2; color: #7f1d1d; }
.condition-pill.condition-closed     { background: #fee2e2; color: #7f1d1d; }

/* ── Buttons (forms + admin) ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .5rem 1.25rem; border-radius: 2px; font-weight: 600;
    font-size: .85rem; border: 1.5px solid transparent; cursor: pointer;
    text-decoration: none; transition: background .15s, border-color .15s, color .15s;
    font-family: var(--mono); letter-spacing: .04em; line-height: 1.4;
}
.btn-primary  { background: var(--moss-bright); color: var(--ink); border-color: var(--moss-bright); }
.btn-primary:hover { background: var(--cream); border-color: var(--cream); }
.btn-outline  { background: transparent; color: var(--ink); border-color: rgba(16,21,15,.22); }
.btn-outline:hover { border-color: var(--moss); color: var(--moss); }
.btn-danger   { background: #EF4444; color: #fff; border-color: #EF4444; }
.btn-danger:hover { background: #DC2626; border-color: #DC2626; }
.btn-whatsapp { background: #25D366; color: #fff; border-color: #25D366; }
.btn-whatsapp:hover { background: #20B856; }
.btn-saved    { background: var(--dust); color: #fff; border-color: var(--dust); }
.btn-sm       { padding: .3rem .75rem; font-size: .75rem; }
.btn-lg       { padding: .75rem 2rem; font-size: .9rem; }
.btn-full     { width: 100%; }
.btn-link     { background: none; border: none; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: .85rem; padding: 0; }
.btn-link:hover { color: var(--ink); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group  { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1rem; }
.form-label  { font-size: .8rem; font-weight: 600; color: var(--muted); font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.form-input  { border: 1.5px solid var(--line); border-radius: 2px; padding: .5rem .75rem; font-size: .9rem; font-family: var(--sans); background: #fff; color: var(--ink); transition: border-color .15s; }
.form-input:focus { outline: none; border-color: var(--moss-bright); }
.form-input-sm { padding: .3rem .5rem; font-size: .8rem; }
select.form-input { cursor: pointer; }

/* ── Trail form pages (report + edit) ───────────────────────────────────── */
.tf-page { max-width: 760px; margin: 0 auto; padding: 3rem 2rem 5rem; }
.tf-form { display: flex; flex-direction: column; gap: 0; }
.tf-section { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.tf-section:last-of-type { border-bottom: none; }
.tf-section-title { font: 700 .65rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }
.tf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.tf-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; }
.tf-required { color: var(--dust); }
.tf-hint { font-size: .78rem; color: var(--muted); margin-top: .35rem; }
.tf-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.tf-textarea--lg { min-height: 140px; }

/* Condition selector */
.tf-condition-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tf-condition-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 1.25rem 1rem; border: 1.5px solid var(--line); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.tf-condition-card:hover { border-color: rgba(16,21,15,.25); }
.tf-condition-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-condition-radio:checked ~ .tf-condition-name { color: var(--ink); font-weight: 700; }
.tf-condition-card:has(.tf-condition-radio:checked) { border-color: var(--moss-bright); background: rgba(170,189,73,.08); }
.tf-condition-name { display: flex; flex-direction: column; align-items: center; font: 600 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color .15s; }
.tf-condition-card.condition-card--dry .tf-condition-name::before     { content: "☀"; display: block; font-size: 1.5rem; margin-bottom: .25rem; }
.tf-condition-card.condition-card--muddy .tf-condition-name::before   { content: "💧"; display: block; font-size: 1.5rem; margin-bottom: .25rem; }
.tf-condition-card.condition-card--washed_out .tf-condition-name::before { content: "⚠"; display: block; font-size: 1.5rem; margin-bottom: .25rem; }
.tf-condition-card.condition-card--closed .tf-condition-name::before  { content: "🚫"; display: block; font-size: 1.5rem; margin-bottom: .25rem; }

/* Star rating */
.tf-stars { display: flex; gap: 4px; margin: .25rem 0; }
.tf-star { position: relative; cursor: pointer; }
.tf-star input { display: none; }
.tf-star span { font-size: 1.75rem; color: var(--sand); transition: color .1s; line-height: 1; }
.tf-stars:hover .tf-star span { color: var(--sun); }
.tf-stars .tf-star:hover ~ .tf-star span { color: var(--sand); }
.tf-star input:checked ~ span { color: var(--sun); }
.tf-stars:has(.tf-star:nth-child(1) input:checked) .tf-star:nth-child(1) span { color: var(--sun); }
.tf-stars:has(.tf-star:nth-child(2) input:checked) .tf-star:nth-child(1) span,
.tf-stars:has(.tf-star:nth-child(2) input:checked) .tf-star:nth-child(2) span { color: var(--sun); }
.tf-stars:has(.tf-star:nth-child(3) input:checked) .tf-star:nth-child(1) span,
.tf-stars:has(.tf-star:nth-child(3) input:checked) .tf-star:nth-child(2) span,
.tf-stars:has(.tf-star:nth-child(3) input:checked) .tf-star:nth-child(3) span { color: var(--sun); }
.tf-stars:has(.tf-star:nth-child(4) input:checked) .tf-star:nth-child(1) span,
.tf-stars:has(.tf-star:nth-child(4) input:checked) .tf-star:nth-child(2) span,
.tf-stars:has(.tf-star:nth-child(4) input:checked) .tf-star:nth-child(3) span,
.tf-stars:has(.tf-star:nth-child(4) input:checked) .tf-star:nth-child(4) span { color: var(--sun); }
.tf-stars:has(.tf-star:nth-child(5) input:checked) .tf-star span { color: var(--sun); }

/* Checkbox */
.tf-checkbox-group { justify-content: center; }
.tf-checkbox-group--inline { justify-content: flex-end; padding-top: 1.6rem; }
.tf-checkbox { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .875rem; color: var(--ink); }
.tf-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--moss-bright); cursor: pointer; }

/* Actions row */
.tf-actions { display: flex; align-items: center; gap: 1.5rem; padding-top: 2.5rem; }

/* Info notice (suggest-edit banner) */
.tf-notice { display: flex; align-items: flex-start; gap: .75rem; margin: 0; padding: .875rem max(20px, calc((100% - 760px) / 2)); background: rgba(170,189,73,.08); border-bottom: 1px solid rgba(170,189,73,.25); font-size: .82rem; color: rgba(16,21,15,.65); line-height: 1.6; }
.tf-notice svg { flex-shrink: 0; margin-top: 2px; color: var(--moss); }

/* ── Trail admin preview bar ─────────────────────────────────────────────── */
.trail-admin-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: .75rem max(20px, calc((100% - 1280px) / 2)); background: #fefce8; border-bottom: 2px solid #ca8a04; font-size: .85rem; color: #713f12; }
.trail-admin-bar-status { font-weight: 600; }
.trail-admin-bar-actions { display: flex; align-items: center; gap: .5rem; }
.trail-admin-btn { display: inline-flex; align-items: center; padding: 5px 12px; border: 1.5px solid #ca8a04; background: transparent; color: #713f12; font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none; border-radius: 2px; }
.trail-admin-btn--approve { background: #16a34a; border-color: #16a34a; color: #fff; }
.trail-admin-btn--approve:hover { background: #15803d; }
.trail-admin-btn--hide { border-color: #dc2626; color: #dc2626; }
.trail-admin-btn--hide:hover { background: #fef2f2; }

/* ── Pills / Badges ──────────────────────────────────────────────────────── */
.pill, .badge {
    display: inline-block; padding: 2px 8px; border-radius: 2px;
    font-size: .7rem; font-weight: 600; white-space: nowrap; font-family: var(--mono); letter-spacing: .06em;
}
.badge-trusted    { background: #eff6ff; color: #1d4ed8; }
.badge-source     { background: var(--ink-3); color: var(--muted); }
.badge-vehicle    { background: var(--ink-3); color: var(--muted); }
.badge-action     { background: rgba(237,106,50,.1); color: #c2410c; }
.badge-status-live    { background: #dcfce7; color: #14532d; }
.badge-status-pending { background: #fef9c3; color: #78350f; }
.badge-status-hidden  { background: #fee2e2; color: #7f1d1d; }
.badge-status-active     { background: #dcfce7; color: #14532d; }
.badge-status-suspended  { background: #fee2e2; color: #7f1d1d; }
.badge-status-deleted    { background: var(--ink-3); color: var(--muted); }
.badge-migration-ran     { background: #dcfce7; color: #14532d; }
.badge-migration-pending { background: #fef9c3; color: #78350f; }
.badge-migration-skipped { background: var(--ink-3); color: var(--muted); }

/* ── Grade badges ────────────────────────────────────────────────────────── */
.grade-1, .badge.grade-1 { background: var(--grade-1); color: var(--ink); }
.grade-2, .badge.grade-2 { background: var(--grade-2); color: var(--ink); }
.grade-3, .badge.grade-3 { background: var(--grade-3); color: var(--ink); }
.grade-4, .badge.grade-4 { background: var(--grade-4); color: #fff; }
.grade-5, .badge.grade-5 { background: var(--grade-5); color: #fff; }

/* ── Driver profile ─────────────────────────────────────────────────────── */
.drv-page { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; max-width: 1100px; margin: 0 auto; padding: 3rem 2rem 5rem; }
.drv-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.drv-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--line); }
.drv-avatar--placeholder { width: 80px; height: 80px; border-radius: 50%; background: var(--moss); color: var(--ink); display: flex; align-items: center; justify-content: center; font: 800 2rem/1 var(--serif); text-transform: uppercase; }
.drv-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.drv-stat { background: #fff; padding: .75rem 1rem; }
.drv-stat-val { display: block; font: 800 1.5rem/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.drv-stat-label { display: block; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.drv-section-label { font: 700 9px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.drv-provinces { display: flex; flex-wrap: wrap; gap: 6px; }
.drv-main { min-width: 0; }
.drv-empty { color: var(--muted); font-size: .875rem; }

/* Drive card */
.drive-list { display: flex; flex-direction: column; gap: 1px; }
.drive-card { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: border-color .15s; }
.drive-card:hover { border-color: var(--moss-bright); }
.drive-card-head { display: flex; align-items: center; gap: .6rem; }
.drive-card-title { font: 700 .9rem/1.2 var(--sans); color: var(--ink); flex: 1; }
.drive-card-date { font: 500 9px/1 var(--mono); letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.drive-card-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font: 500 .75rem/1 var(--mono); color: var(--muted); }

/* Drive detail kudos bar */
.drive-kudos-bar { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--line); margin-top: 1.5rem; }
.drive-kudos-count { font: 700 1rem/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }

/* Mini profile on drive detail */
.drv-mini-profile { display: flex; align-items: center; gap: .75rem; padding: 1rem; background: var(--ink-3); border: 1px solid var(--line); text-decoration: none; }
.drv-mini-profile:hover { border-color: var(--moss-bright); }
.drv-mini-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.drv-mini-avatar--placeholder { width: 40px; height: 40px; border-radius: 50%; background: var(--moss); color: var(--ink); display: flex; align-items: center; justify-content: center; font: 800 1rem/1 var(--serif); text-transform: uppercase; flex-shrink: 0; }
.drv-mini-name { display: block; font-weight: 700; font-size: .85rem; color: var(--ink); }
.drv-mini-handle { display: block; font: 500 .75rem/1 var(--mono); color: var(--muted); margin-top: 2px; }

/* Community feed (homepage) */
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feed-card { background: #fff; padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; text-decoration: none; transition: background .15s; }
.feed-card:hover { background: var(--ink-3); }
.feed-card-driver { display: flex; align-items: center; gap: .5rem; font: 600 .78rem/1 var(--mono); color: var(--muted); }
.feed-card-driver img, .feed-card-driver .feed-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.feed-avatar { background: var(--moss); color: var(--ink); display: flex; align-items: center; justify-content: center; font: 800 .6rem/1 var(--serif); text-transform: uppercase; flex-shrink: 0; }
.feed-card-title { font: 700 .95rem/1.2 var(--sans); color: var(--ink); }
.feed-card-meta { display: flex; flex-wrap: wrap; gap: .35rem .75rem; font: 500 .72rem/1 var(--mono); color: var(--muted); }

@media (max-width: 800px) {
    .drv-page { grid-template-columns: 1fr; }
}

/* ── Admin ───────────────────────────────────────────────────────────────── */
.admin-body { background: #f4f5f4; color: #1a1a1a; letter-spacing: 0; }

.admin-topbar {
    position: sticky; top: 0; z-index: 40;
    height: 52px;
    background: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem;
    border-bottom: 1px solid #e5e7e5;
}
.admin-nav__brand { color: #1a1a1a; font-family: var(--serif); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.admin-nav__brand span { font-weight: 400; color: #9ca3af; font-size: .85rem; font-family: var(--sans); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.admin-topbar-site { color: #9ca3af; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.admin-topbar-site:hover { color: #1a1a1a; }

.admin-shell { display: grid; grid-template-columns: 200px 1fr; min-height: calc(100vh - 52px); }

.admin-sidebar {
    background: #fff;
    border-right: 1px solid #e5e7e5;
    padding: 1.25rem 0;
    display: flex; flex-direction: column;
    position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto;
}
.admin-sidebar-link {
    display: block;
    padding: .55rem 1.25rem;
    color: #4a5249;
    font: 500 .8rem/1.3 var(--sans);
    border-left: 2px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
    background: none; border-top: none; border-right: none; border-bottom: none;
    cursor: pointer; text-align: left; width: 100%; font-family: var(--sans);
}
.admin-sidebar-link:hover { color: #1a1a1a; background: #f4f5f4; border-left-color: #c8cfc7; }
.admin-sidebar-link.active { color: #1a1a1a; background: #eef0ed; border-left-color: #374151; font-weight: 600; }
.admin-sidebar-spacer { flex: 1; }
.admin-sidebar-logout { color: #9a3a2a; }
.admin-sidebar-logout:hover { color: #7a2a1a; background: #fdf0ee; border-left-color: #e06050; }

.admin-main { padding: 2rem; background: #f4f5f4; min-width: 0; }
.admin-content { padding: 2rem; background: #f4f5f4; }

.admin-page-title    { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #1a1a1a; letter-spacing: -.01em; }
.admin-section-title { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 1.5rem 0 .75rem; }
.admin-search { display: flex; gap: .5rem; margin-bottom: 1.25rem; max-width: 400px; }
.admin-table {
    width: 100%; border-collapse: collapse;
    background: #fff; border: 1px solid #e5e7e5;
    font-size: .85rem; color: #1a1a1a;
}
.admin-table th { background: #f8f9f8; padding: .6rem .875rem; text-align: left; font-weight: 600; color: #6b7280; border-bottom: 1px solid #e5e7e5; white-space: nowrap; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.admin-table td { padding: .6rem .875rem; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td { background: #fff; }
.admin-table tr:hover td { background: #f5f7f5; }
.td-actions, .migration-td-actions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.stat-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card  { background: #fff; border: 1px solid #e5e7e5; padding: 1.25rem; display: flex; flex-direction: column; border-radius: 4px; }
.stat-card--warn { border-top: 3px solid #f59e0b; }
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; color: #1a1a1a; }
.stat-label { font-size: .75rem; color: #6b7280; margin-top: .25rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-action { font-size: .8rem; color: var(--primary); margin-top: .5rem; }
.migration-actions { margin-bottom: 1rem; }
.moderation-list { display: flex; flex-direction: column; gap: 1rem; }
.mod-card   { background: #fff; border: 1px solid #e5e7e5; padding: 1rem; border-radius: 4px; }
.mod-card__head    { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.mod-card__actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.mod-meta   { font-size: .8rem; color: #6b7280; margin-left: auto; }
.mod-payload { background: #f8f9f8; border: 1px solid #e5e7e5; padding: .5rem; font-size: .75rem; font-family: var(--mono); overflow-x: auto; max-height: 200px; overflow-y: auto; border-radius: 2px; }

/* Admin — full light mode overrides for all shared components */
.admin-body { color: #1a1a1a; }
.admin-body a { color: #1a1a1a; }

.admin-body .alert-success { background: #ecfdf5; border-color: #22c55e; color: #14532d; }
.admin-body .alert-error   { background: #fef2f2; border-color: #ef4444; color: #7f1d1d; }
.admin-body .alert-info    { background: #eff6ff; border-color: #3b82f6; color: #1e3a8a; }
.admin-body .flash-wrapper { position: sticky; top: 52px; z-index: 30; }

.admin-body .btn           { font-family: var(--sans); letter-spacing: 0; }
.admin-body .btn-primary   { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.admin-body .btn-primary:hover { background: #333; border-color: #333; }
.admin-body .btn-outline   { background: #fff; color: #374151; border-color: #d1d5db; }
.admin-body .btn-outline:hover { background: #f9fafb; border-color: #9ca3af; color: #1a1a1a; }
.admin-body .btn-danger    { background: #ef4444; color: #fff; border-color: #ef4444; }
.admin-body .btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.admin-body .btn-link      { color: #6b7280; font-family: var(--sans); }
.admin-body .btn-link:hover { color: #1a1a1a; }

.admin-body .form-group  { margin-bottom: .875rem; }
.admin-body .form-label  { color: #374151; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: .8rem; }
.admin-body .form-input  { background: #fff; color: #1a1a1a; border-color: #d1d5db; }
.admin-body .form-input:focus { border-color: #374151; }

.admin-body .badge-trusted    { background: #eff6ff; color: #1d4ed8; }
.admin-body .badge-source     { background: #f3f4f6; color: #374151; }
.admin-body .badge-vehicle    { background: #f3f4f6; color: #374151; }
.admin-body .badge-action     { background: #fef3c7; color: #92400e; }
.admin-body .badge-status-live    { background: #ecfdf5; color: #065f46; }
.admin-body .badge-status-pending { background: #fef9c3; color: #713f12; }
.admin-body .badge-status-hidden  { background: #fef2f2; color: #991b1b; }
.admin-body .badge-status-active     { background: #ecfdf5; color: #065f46; }
.admin-body .badge-status-suspended  { background: #fef2f2; color: #991b1b; }
.admin-body .badge-status-deleted    { background: #f3f4f6; color: #6b7280; }
.admin-body .badge-migration-ran     { background: #ecfdf5; color: #065f46; }
.admin-body .badge-migration-pending { background: #fef9c3; color: #713f12; }
.admin-body .badge-migration-skipped { background: #f3f4f6; color: #6b7280; }

.admin-body .grade-1, .admin-body .badge.grade-1 { background: #22c55e; color: #fff; }
.admin-body .grade-2, .admin-body .badge.grade-2 { background: #84cc16; color: #fff; }
.admin-body .grade-3, .admin-body .badge.grade-3 { background: #eab308; color: #fff; }
.admin-body .grade-4, .admin-body .badge.grade-4 { background: #f97316; color: #fff; }
.admin-body .grade-5, .admin-body .badge.grade-5 { background: #ef4444; color: #fff; }

/* ── Admin page chrome ───────────────────────────────────────────────────── */
.admin-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.admin-page-header h1 { font-size: 1.4rem; font-weight: 700; color: #1a1a1a; margin: 0; }
.admin-flash { padding: .75rem 1rem; border-radius: 4px; font-size: .85rem; font-weight: 500; margin-bottom: 1.25rem; border: 1px solid; }
.admin-flash--ok  { background: #ecfdf5; border-color: #22c55e; color: #14532d; }
.admin-flash--err { background: #fef2f2; border-color: #ef4444; color: #7f1d1d; }
.admin-link { font-size: .8rem; color: #6b7280; text-decoration: none; }
.admin-link:hover { color: #1a1a1a; text-decoration: underline; }
.admin-hint { font-size: .8rem; color: #9ca3af; margin: 0 0 .75rem; }
.badge--green { background: #ecfdf5; color: #065f46; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.badge--grey  { background: #f3f4f6; color: #6b7280;  font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; }

/* ── Admin form layout ───────────────────────────────────────────────────── */
.admin-edit-layout { max-width: 760px; }
.admin-form-section { background: #fff; border: 1px solid #e5e7e5; padding: 1.5rem; margin-bottom: 1.25rem; }
.admin-form-section h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6b7280; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid #f0f0f0; }
.admin-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.admin-field:last-child { margin-bottom: 0; }
.admin-field label, .admin-field > span { font-size: .8rem; font-weight: 600; color: #374151; }
.admin-field .req { color: #ef4444; }
.admin-field input[type="text"],
.admin-field input[type="url"],
.admin-field input[type="email"],
.admin-field input[type="number"],
.admin-field select,
.admin-field textarea { width: 100%; padding: .5rem .75rem; border: 1px solid #d1d5db; background: #fafafa; color: #1a1a1a; font: 400 .875rem/1.4 var(--sans); border-radius: 3px; transition: border-color .15s; }
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus { outline: none; border-color: #374151; background: #fff; }
.admin-field textarea { resize: vertical; min-height: 100px; }
.admin-field--row { flex-direction: row; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.admin-field--row label { display: flex; align-items: center; gap: .4rem; font-weight: 500; cursor: pointer; }
.admin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-form-actions { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }

/* Venue trail picker */
.venue-trail-list { border: 1px solid #e5e7e5; max-height: 360px; overflow-y: auto; background: #fafafa; }
.venue-trail-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background .1s; }
.venue-trail-item:last-child { border-bottom: none; }
.venue-trail-item:hover { background: #f0f4ef; }
.venue-trail-item input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: #374151; }
.venue-trail-grade { font: 700 9px/1 var(--mono); letter-spacing: .08em; padding: 3px 6px; color: #fff; border-radius: 2px; }
.venue-trail-name { font: 500 .85rem/1.2 var(--sans); color: #1a1a1a; flex: 1; }
.venue-trail-meta { font: 400 .75rem/1 var(--sans); color: #9ca3af; white-space: nowrap; }
.admin-page-title    { font-family: var(--serif); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 1.5rem; }
.admin-section-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; margin: 1.5rem 0 .75rem; }
.admin-search { display: flex; gap: .5rem; margin-bottom: 1.25rem; max-width: 400px; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--ink-2); border: 1px solid var(--line); font-size: .85rem; }
.admin-table th { background: var(--ink-3); padding: .6rem .875rem; text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.admin-table td { padding: .6rem .875rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.td-actions, .migration-td-actions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.stat-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card  { background: var(--ink-2); border: 1px solid var(--line); padding: 1.25rem; display: flex; flex-direction: column; }
.stat-card--warn { border-top: 3px solid var(--grade-3); }
.stat-value { font-family: var(--serif); font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--moss-bright); }
.stat-label { font-size: .75rem; color: var(--muted); margin-top: .25rem; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.stat-action { font-size: .8rem; color: var(--moss-bright); margin-top: .5rem; }
.migration-actions { margin-bottom: 1rem; }
.moderation-list { display: flex; flex-direction: column; gap: 1rem; }
.mod-card   { background: var(--ink-2); border: 1px solid var(--line); padding: 1rem; }
.mod-card__head    { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.mod-card__actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.mod-meta   { font-size: .8rem; color: var(--muted); margin-left: auto; font-family: var(--mono); }
.mod-payload { background: var(--ink-3); border: 1px solid var(--line); padding: .5rem; font-size: .75rem; overflow-x: auto; max-height: 200px; overflow-y: auto; font-family: var(--mono); }

/* ── Filter toggle (mobile only, hidden on desktop) ─────────────────────── */
.filter-toggle { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 800px) {
    :root { --page: min(100% - 40px, 680px); }

    /* Nav */
    .topbar { height: 60px; padding: 0 20px; }
    .brand-mark { width: 31px; height: 31px; }
    .brand-text { font-size: 18px; }
    .nav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 60px; left: 0; right: 0;
        background: var(--ink-2);
        border-bottom: 1px solid var(--line);
        padding: 1.25rem 20px;
        gap: 1rem;
        z-index: 100;
    }
    .topbar.nav-open .nav { display: flex; }
    .hamburger { display: flex; }

    /* Hero */
    .hero { min-height: 600px; background-position: 58% center; }
    .hero::before { opacity: .1; }
    .hero-content { padding-bottom: 48px; }
    .hero h1 { font-size: clamp(4.2rem, 19vw, 7rem); }
    .hero-bottom { display: block; margin-top: 28px; }
    .hero-dek { max-width: 100%; }
    .hero-bottom .button { margin-top: 20px; width: 100%; justify-content: space-between; }
    .hero-side-note, .scroll-prompt { display: none; }

    /* Meta strip */
    .explorer-meta { grid-template-columns: 1fr 1fr; gap: 20px 0; padding: 24px 0; width: 100%; margin: 0; padding-left: 20px; padding-right: 20px; }
    .meta-cell { padding: 0 16px; }
    .meta-cell:first-child { padding-left: 0; }
    .meta-cell:nth-child(3) { padding-left: 0; border-left: 0; }
    .meta-cell:nth-child(4) { padding-left: 16px; border-left: 1px solid var(--line); }

    /* Sections */
    .drives, .how, .community { padding-top: 72px; }
    .drives { padding-bottom: 72px; }
    .drives-inner, .how-inner, .community-inner, .final-inner, .footer-inner { width: 100%; padding: 0 20px; }
    .drive-head, .how-intro { display: block; }
    .drive-head .text-link { display: inline-flex; margin-top: 24px; }
    .section-title { font-size: clamp(3.4rem, 16vw, 5.5rem); }
    .drive-grid { grid-template-columns: 1fr; margin-top: 36px; gap: 12px; }
    .trail-card, .trail-card--feature { min-height: 380px; }
    .trail-card--plain { min-height: 320px; }
    .trail-card-body { inset: auto 20px 20px; }

    /* How it works */
    .how { padding-bottom: 72px; }
    .how::before { display: none; }
    .how .section-copy { margin-top: 20px; max-width: 100%; }
    .steps { grid-template-columns: 1fr; margin-top: 40px; }
    .step, .step + .step { min-height: auto; padding: 24px 0; border-right: none; border-bottom: 1px solid var(--line-dark); }
    .step:last-child { border-bottom: none; }
    .step-icon { margin-top: 18px; }
    .step h3 { margin-top: 18px; }

    /* Community */
    .community-visual { min-height: 400px; margin-top: 40px; }
    .field-note { right: 5%; top: 14%; width: min(260px, 55vw); padding: 20px; }
    .field-note p { font-size: 20px; }
    .field-note span { font-size: 8px; }
    .crew-stat { left: 5%; bottom: 6%; }
    .community-bottom { width: 100%; padding: 24px 20px; display: block; }
    .community-bottom .text-link { display: inline-flex; margin-top: 16px; }

    /* Final CTA */
    .final { min-height: 420px; }
    .final::before { display: none; }
    .final h2 { font-size: clamp(3.8rem, 16vw, 6rem); }

    /* Footer */
    .footer-inner { width: 100%; padding: 0 20px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 20px; padding-bottom: 40px; }
    .footer-top > :first-child { grid-column: 1 / -1; }
    .footer-bottom { display: grid; gap: 8px; }

    /* Trail detail */
    .td-body { grid-template-columns: 1fr; padding: 1.5rem 20px 3rem; }
    .td-photos { grid-template-columns: 1fr 1fr; max-height: 220px; }
    .td-hero-inner { padding: 1.5rem 20px; }
    .td-map { height: 260px; }
    .td-stats--sidebar { grid-template-columns: 1fr; }
    .td-osm-banner-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 1.5rem 1.75rem 2rem; }
    .td-osm-banner-right { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem; }
    .td-app-cta-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 1.5rem 1.75rem 2rem; }
    .td-app-cta-actions { flex-direction: row; flex-wrap: wrap; gap: .75rem; }
    .td-map-footer .td-map-action { min-width: 0; flex: 1 1 50%; }

    /* Trails listing page */
    .trails-body { display: block; }
    .trails-sidebar { display: none; border-right: none; border-bottom: 1px solid var(--line); }
    .trails-sidebar.open { display: block; }
    .trails-map-panel { position: static; height: 260px; border-right: none; border-bottom: 1px solid var(--line); }
    .trails-map-panel .browse-map { height: 100%; }
    .trails-main { padding: 1rem; height: auto; overflow-y: visible; }
    .trail-list-grid { grid-template-columns: 1fr; }
    .filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: .6rem 1rem;
        background: var(--ink-2);
        border: 1px solid var(--line);
        color: var(--cream);
        font: 700 9px/1 var(--mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        cursor: pointer;
        margin-bottom: 1rem;
    }
    .filter-toggle:hover { border-color: var(--moss-bright); color: var(--moss-bright); }
}

@media (max-width: 480px) {
    :root { --page: min(100% - 32px, 680px); }
    .hero h1 { font-size: clamp(3.8rem, 18vw, 6rem); }
    .trail-card h3 { font-size: clamp(2rem, 10vw, 3rem); }
    .explorer-meta { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
    .meta-cell, .meta-cell:nth-child(3), .meta-cell:nth-child(4) { padding: 0; border-left: 0; }
    .field-note { width: min(220px, 60vw); right: 4%; top: 12%; }
    .community-visual { min-height: 360px; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-top > :first-child { grid-column: auto; }
    .trails-page-title { font-size: clamp(3.2rem, 16vw, 6rem); }
    .trail-list-grid { grid-template-columns: 1fr; }
    .tf-condition-grid { grid-template-columns: repeat(2, 1fr); }
    .tf-grid-2 { grid-template-columns: 1fr; }
    .tf-grid-3 { grid-template-columns: 1fr; }
    .tf-checkbox-group--inline { justify-content: flex-start; padding-top: 0; }
    .tf-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ── Drive companions ───────────────────────────────────────────────────────── */

.drive-companions { margin-bottom: 1.5rem; }
.drive-companions-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.drive-companion { display: flex; align-items: center; gap: .35rem; }
.drive-companion-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem .35rem .35rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    font: 600 .8rem/1 var(--sans);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s;
}
.drive-companion-link:hover { border-color: var(--moss); color: var(--moss); }
.drive-companion-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.drive-companion-avatar--placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--moss); color: #fff;
    font: 700 10px/1 var(--mono);
}
.btn-ghost-sm {
    background: none; border: none; cursor: pointer;
    font: 700 14px/1 var(--sans); color: var(--muted);
    padding: 2px 4px; border-radius: 3px;
    transition: color .15s;
}
.btn-ghost-sm:hover { color: #ef4444; }

.drive-tag-crew { margin-top: 1.5rem; }
.drive-tag-form { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.drive-tag-input {
    flex: 1; min-width: 160px;
    padding: .6rem .9rem;
    border: 1px solid var(--line); border-radius: 4px;
    font: .875rem/1 var(--sans); color: var(--ink); background: var(--surface);
}
.drive-tag-input:focus { outline: none; border-color: var(--moss); }
.drive-tag-hint { font: .72rem/1.4 var(--mono); color: var(--muted); margin-top: .5rem; }

.drive-card--participated { border-left: 3px solid var(--dust); }

/* ── Trail card signals (condition freshness + drives count) ───────────────── */

.tcard-signals {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}
.tcard-condition,
.tcard-no-report,
.tcard-drives {
    font: 500 .7rem/1 var(--mono);
    padding: 2px 7px;
    border-radius: 3px;
}
.tcard-condition {
    background: rgba(170,189,73,.15);
    color: var(--moss);
    border: 1px solid rgba(170,189,73,.3);
}
.tcard-condition.condition-muddy   { background: rgba(139,90,43,.12); color: #8b5a2b; border-color: rgba(139,90,43,.25); }
.tcard-condition.condition-washed_out,
.tcard-condition.condition-closed  { background: rgba(239,68,68,.1);  color: #dc2626; border-color: rgba(239,68,68,.2);  }
.tcard-no-report { color: var(--muted); background: var(--ink-3); border: 1px solid var(--line); }
.tcard-drives    { color: var(--dust);  background: rgba(237,106,50,.08); border: 1px solid rgba(237,106,50,.2); }

/* ── Welcome card ───────────────────────────────────────────────────────────── */

.welcome-card {
    background: var(--ink);
    color: var(--cream);
    padding: 2.5rem var(--page-pad, 2rem);
}
.welcome-card-inner {
    max-width: var(--page, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.welcome-card-title {
    font: 800 2rem/1 var(--serif);
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin: .5rem 0 .75rem;
    color: var(--cream);
}
.welcome-card-body { font-size: .9rem; color: rgba(242,239,230,.7); margin-bottom: 1.25rem; }
.welcome-card-body strong { color: var(--moss); }
.welcome-steps { display: flex; flex-direction: column; gap: .5rem; }
.welcome-step {
    display: flex;
    align-items: center;
    gap: .75rem;
    font: 600 .82rem/1 var(--sans);
    color: rgba(242,239,230,.8);
    text-decoration: none;
    transition: color .15s;
}
.welcome-step:hover { color: var(--moss); }
.welcome-step-num { font: 700 9px/1 var(--mono); letter-spacing: .12em; color: var(--moss); }

/* ── Saved trails page ──────────────────────────────────────────────────────── */

.saved-body { max-width: var(--page, 1200px); margin: 2.5rem auto 5rem; padding: 0 1.5rem; }
.saved-empty { text-align: center; padding: 4rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.saved-empty p { font-size: 1rem; color: var(--muted); }

/* ── Account page ──────────────────────────────────────────────────────────── */

.acc-layout {
    max-width: 640px;
    margin: 3rem auto 5rem;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.acc-flash {
    padding: .75rem 1.25rem;
    border-radius: 4px;
    font-size: .875rem;
    font-family: var(--mono);
}
.acc-flash--ok  { background: rgba(170,189,73,.12); border-left: 3px solid var(--moss); color: var(--ink); }
.acc-flash--err { background: rgba(239,68,68,.1);   border-left: 3px solid #ef4444;    color: var(--ink); }
.acc-section {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.75rem 2rem;
}
.acc-section--danger { border-color: rgba(239,68,68,.3); }
.acc-section-title {
    font: 700 10px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 1.5rem;
}
.acc-form { display: flex; flex-direction: column; gap: 1rem; }
.acc-form--inline { margin-top: 1.25rem; }
.acc-field { display: flex; flex-direction: column; gap: .4rem; }
.acc-field label { font: 600 .78rem/1 var(--sans); color: var(--ink-60); }
.acc-field input[type=text],
.acc-field input[type=email],
.acc-field input[type=password],
.acc-field input[type=number] {
    padding: .65rem .9rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    font: .9rem/1 var(--sans);
    color: var(--ink);
    background: var(--surface);
    transition: border-color .15s;
    width: 100%;
}
.acc-field input:focus { outline: none; border-color: var(--moss); }
.acc-disabled { opacity: .45; cursor: not-allowed; }
.acc-hint { font-size: .72rem; color: var(--muted); font-weight: 400; }
.acc-input-prefix { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.acc-input-prefix span { padding: .65rem .75rem; background: var(--ink-3); font: 600 .9rem/1 var(--mono); color: var(--muted); border-right: 1px solid var(--line); flex-shrink: 0; }
.acc-input-prefix input { border: 0 !important; border-radius: 0 !important; }
.acc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.acc-field--narrow { grid-column: auto; }
.acc-checkbox { display: flex; align-items: center; gap: .5rem; font: .875rem/1 var(--sans); color: var(--ink); cursor: pointer; }
.acc-vehicles { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.acc-vehicle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    gap: 1rem;
}
.acc-vehicle-card--primary { border-color: var(--moss); background: rgba(170,189,73,.05); }
.acc-vehicle-info { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.acc-vehicle-name { font: 600 .9rem/1.2 var(--sans); color: var(--ink); }
.acc-vehicle-mods { font: .75rem/1.3 var(--mono); color: var(--muted); }
.acc-badge { display: inline-block; padding: 2px 7px; border-radius: 3px; background: var(--moss); color: #fff; font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.acc-add-vehicle { margin-top: .5rem; }
.acc-add-vehicle summary { font: 600 .82rem/1 var(--sans); color: var(--moss); cursor: pointer; user-select: none; padding: .4rem 0; }
.acc-add-vehicle summary:hover { color: var(--moss-bright); }

/* ── Trail photo upload ─────────────────────────────────────────────────────── */

.td-photo-upload { margin-top: 2rem; }
.td-photo-form { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.td-photo-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1.75rem 1rem;
    border: 2px dashed var(--line);
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.td-photo-drop:hover { border-color: var(--moss); background: rgba(170,189,73,.04); }
.td-photo-drop input[type=file] { display: none; }
.td-photo-drop-label { font: 600 .875rem/1 var(--sans); color: var(--ink-60); }
.td-photo-drop-sub { font: .72rem/1 var(--mono); color: var(--muted); }
.td-photo-caption {
    padding: .6rem .9rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    font: .875rem/1 var(--sans);
    color: var(--ink);
    background: var(--surface);
    width: 100%;
}
.td-photo-caption:focus { outline: none; border-color: var(--moss); }

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