/* ==========================================================================
   Throttle — design system
   Dark "asphalt" by default, light theme via [data-theme="light"].
   ========================================================================== */

:root,
[data-theme="dark"] {
    --bg: #0b0c0e;
    --surface: #131518;
    --surface-2: #1a1d21;
    --surface-3: #23272c;
    --overlay: rgba(11, 12, 14, .82);
    --border: #24282e;
    --border-strong: #343941;
    --text: #eef0f2;
    --text-2: #c2c7ce;
    --muted: #868e98;
    --accent: #ff5a1f;
    --accent-hover: #ff7340;
    /* Text and fills meet WCAG AA 4.5:1: orange text, and dark ink on the bright orange fill. */
    --accent-text: #ff6a33;
    --accent-fill: #ff5a1f;
    --accent-fill-hover: #ff7340;
    --accent-ink: #0b0c0e;
    --accent-soft: rgba(255, 90, 31, .14);
    --like: #ff3d6b;
    --like-soft: rgba(255, 61, 107, .14);
    --repost: #1fc77f;
    --repost-soft: rgba(31, 199, 127, .14);
    --info: #3ea6ff;
    --info-soft: rgba(62, 166, 255, .14);
    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, .14);
    --warn: #f5a524;
    --warn-soft: rgba(245, 165, 36, .15);
    --danger: #f04545;
    --danger-soft: rgba(240, 69, 69, .14);
    /* Status text meets WCAG AA 4.5:1 on every surface and on its own -soft tint; plain status colours are for icons, dots and borders. */
    --success-text: #22c55e;
    --warn-text: #f5a524;
    --info-text: #3ea6ff;
    --danger-text: #f47171;
    --danger-fill: #f04545;
    --danger-fill-hover: #f35d5d;
    --danger-ink: #0b0c0e;
    --shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 0 1px var(--border);
    --cover-l: 18%;
    --map-filter: none;
    color-scheme: dark;
}

[data-theme="light"] {
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-2: #f2f3f5;
    --surface-3: #e7e9ec;
    --overlay: rgba(255, 255, 255, .85);
    --border: #e3e5e8;
    --border-strong: #cfd3d8;
    --text: #0f1215;
    --text-2: #39404a;
    --muted: #5b636e; /* stays >= 4.5:1 on the orange-tinted rows too */
    --accent: #e8460c;
    --accent-hover: #d13d07;
    /* Text and fills meet WCAG AA 4.5:1: deeper orange for text, white on a deeper fill. */
    --accent-text: #b5350a;
    --accent-fill: #d13d07;
    --accent-fill-hover: #b8300a;
    --accent-ink: #ffffff;
    --accent-soft: rgba(232, 70, 12, .1);
    --like: #e0245e;
    --like-soft: rgba(224, 36, 94, .1);
    --repost: #0f9d62;
    --repost-soft: rgba(15, 157, 98, .1);
    --info: #1b7fd6;
    --info-soft: rgba(27, 127, 214, .1);
    --success: #15924a;
    --success-soft: rgba(21, 146, 74, .1);
    --warn: #b56d00;
    --warn-soft: rgba(181, 109, 0, .1);
    --danger: #d42b2b;
    --danger-soft: rgba(212, 43, 43, .08);
    /* Status text meets WCAG AA 4.5:1 on every surface and on its own -soft tint; plain status colours are for icons, dots and borders. */
    --success-text: #106f38;
    --warn-text: #8b5400;
    --info-text: #1562a5;
    --danger-text: #b82525;
    --danger-fill: #d42b2b;
    --danger-fill-hover: #bd2626;
    --danger-ink: #ffffff;
    --shadow: 0 12px 40px rgba(15, 18, 21, .14), 0 0 0 1px var(--border);
    --cover-l: 62%;
    color-scheme: light;
}

:root {
    /* X's type: its own font stack (system UI fonts after its proprietary Chirp). Barlow Condensed is kept for the wordmark only. */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--font);
    --font-brand: 'Barlow Condensed', var(--font);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --pill: 999px;
    /* X's desktop grid: 275 menu | 600 timeline | 30 gap | 350 sidebar | 10 edge = 1265px. */
    --left-w: 275px;
    --main-w: 600px;
    --gap-w: 30px;
    --right-w: 350px;
    --edge-w: 10px;
    --shell-w: calc(var(--left-w) + var(--main-w) + var(--gap-w) + var(--right-w) + var(--edge-w));
    --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.333334; /* 20px on 15px, as on X */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-fill); color: var(--accent-ink); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.danger { color: var(--danger-text) !important; }
.push-right { margin-left: auto; }
.push-left { margin-right: auto; }
.icon { flex-shrink: 0; vertical-align: middle; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--pill); color: var(--text); }
.brand:hover { text-decoration: none; background: var(--surface-2); }
.brand-mark {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), #ff9a3d); color: #fff;
    box-shadow: 0 4px 14px rgba(255, 90, 31, .35);
}
.brand-word {
    font-family: var(--font-brand); font-weight: 800; font-style: italic; font-size: 27px;
    letter-spacing: .02em; text-transform: uppercase;
}
.brand-sm .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
.brand-sm .brand-word { font-size: 22px; }
.brand-xl .brand-mark { width: 60px; height: 60px; border-radius: 16px; }
.brand-xl .brand-word { font-size: 44px; }

/* ---------- App shell ---------- */
/* The same grid as X: fixed columns centred in the window, with the sidebar's 30px gap and 10px edge
   inside its own track so pages marked "wide" span the full 990px to the right of the menu. */
.app-shell {
    display: grid;
    grid-template-columns: var(--left-w) minmax(0, var(--main-w)) calc(var(--gap-w) + var(--right-w) + var(--edge-w));
    justify-content: center;
    min-height: 100vh;
}
.sidebar-left {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: var(--safe-top) 8px 0;
    overflow-y: auto; scrollbar-width: none;
}
.sidebar-left::-webkit-scrollbar { display: none; }
.sidebar-left > .brand { min-height: 52px; margin: 2px 0; padding: 6px 12px; }
.main-nav { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-top: 2px; }
/* Menu items size to their label, so the hover pill hugs the text as on X. */
.nav-link {
    display: inline-flex; align-items: center; gap: 20px; max-width: 100%;
    margin: 4px 0; padding: 12px; border-radius: var(--pill);
    font-size: 20px; line-height: 24px; font-weight: 400; color: var(--text);
    transition: background .15s;
}
.nav-link:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.nav-link.active { font-weight: 700; }
.nav-link.active .nav-icon { color: var(--accent); }
.nav-label { padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon { position: relative; display: inline-flex; }
.nav-link .nav-icon > .icon { width: 26px; height: 26px; }
.badge-count {
    position: absolute; top: -6px; right: -9px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--pill); background: var(--accent-fill); color: var(--accent-ink);
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    border: 2px solid var(--bg);
}
.sidebar-left .btn-post { width: 90%; height: 52px; margin: 16px 0; font-size: 17px; }
.sidebar-user { width: 100%; margin-top: auto; padding: 12px 0; }
.user-chip {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px; border: 0; border-radius: var(--pill); background: transparent; text-align: left;
}
.user-chip:hover { background: var(--surface-2); }
.user-chip-text { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 15px; line-height: 20px; }
.user-chip-text strong, .user-chip-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-text span { color: var(--muted); }

.main {
    min-width: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    min-height: 100vh;
    background: var(--bg);
    padding-bottom: 80px;
}
.main.wide { grid-column: 2 / 4; }
.sidebar-right {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
    padding: calc(5px + var(--safe-top)) var(--edge-w) 24px var(--gap-w); scrollbar-width: none;
    display: flex; flex-direction: column; gap: 16px;
}
.sidebar-right::-webkit-scrollbar { display: none; }
.sidebar-right > * { flex-shrink: 0; }
.topbar-mobile, .bottom-nav, .sidebar-backdrop { display: none; }

/* ---------- Page header & tabs ---------- */
.page-head {
    display: flex; align-items: center; gap: 16px;
    min-height: 53px; padding: 6px 16px;
}
.page-head.sticky {
    position: sticky; top: var(--safe-top); z-index: 20;
    background: var(--overlay);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.page-head h1, .page-head .page-head-title { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.page-head > div { min-width: 0; }
.page-head .head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.page-head h1 { overflow-wrap: anywhere; }
.page-head.sticky:has(+ .tabs) { border-bottom: 0; }

.tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs-fill .tab { flex: 1; }
.tab {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 53px; padding: 0 16px; font-weight: 500; color: var(--muted); white-space: nowrap;
}
.tab:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.tab.active { color: var(--text); font-weight: 700; }
.tab.active::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: min(56px, 70%); height: 4px; border-radius: 4px; background: var(--accent);
}
.page-head.sticky .tabs { border: 0; width: 100%; margin: -6px -16px; }

/* Icon tabs (settings): icon over a short label, one even row; scrolls on narrow screens. */
.tabs-icons .tab {
    flex: 1 0 auto; flex-direction: column; gap: 6px; min-height: 66px; padding: 12px 6px 11px;
    font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--muted); transition: color .15s, background-color .15s;
}
.tabs-icons .tab-ico { position: relative; display: flex; }
.tabs-icons .tab-ico .tab-count {
    position: absolute; top: -6px; left: 13px; margin: 0; padding: 0 5px; min-width: 17px; line-height: 17px;
    text-align: center; font-size: 10.5px; background: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--bg);
}
.tabs-icons .tab:hover { color: var(--text); }
.tabs-icons .tab.active { color: var(--text); font-weight: 700; }
.tabs-icons .tab.active svg { color: var(--accent); }
.tabs-icons .tab.active::after { width: min(40px, 60%); height: 3px; border-radius: 3px 3px 0 0; }
.tabs-icons .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-xs); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 16px; border-radius: var(--pill);
    border: 1px solid transparent; font-weight: 700; font-size: 15px; white-space: nowrap;
    transition: background .15s, border-color .15s, transform .1s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 16px; font-size: 14px; }
.btn-md { height: 36px; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent-fill); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-fill-hover); }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover:not(:disabled) { background: var(--surface-2); }
.btn-outline.on { border-color: var(--accent); color: var(--accent-text); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn-danger { background: var(--danger-fill); color: var(--danger-ink); }
.btn-danger:hover:not(:disabled) { background: var(--danger-fill-hover); }
.follow-btn { min-width: 92px; }
.follow-btn.btn-primary { background: var(--text); color: var(--bg); }
.follow-btn.btn-primary:hover { background: var(--text-2); }
.follow-btn.is-following:hover { border-color: var(--danger); color: var(--danger-text); background: var(--danger-soft); }

.icon-btn {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    background: transparent; border: 0; color: var(--text-2);
    transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.icon-btn-outline { border: 1px solid var(--border-strong); }
.icon-btn-accent { color: var(--accent); }
.icon-btn-accent:hover { background: var(--accent-soft); color: var(--accent); }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.link-btn:hover { color: var(--text); text-decoration: underline; }
.link-btn.on { color: var(--like); }

/* ---------- Badges & chips ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--pill);
    font-size: 12px; font-weight: 600; line-height: 18px;
    background: var(--surface-3); color: var(--text-2); white-space: nowrap;
}
.badge-outline { background: transparent; border: 1px solid var(--border-strong); }
.badge-accent { background: var(--accent-soft); color: var(--accent-text); }
.badge-success { background: var(--success-soft); color: var(--success-text); }
.badge-info { background: var(--info-soft); color: var(--info-text); }
.badge-warn { background: var(--warn-soft); color: var(--warn-text); }
.badge-danger { background: var(--danger-soft); color: var(--danger-text); }
.badge-dark { background: rgba(0, 0, 0, .7); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--pill);
    font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--text-2);
    border: 1px solid var(--border);
}
a.chip:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.chip-ride { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.chip-club, .chip-event { color: var(--info-text); background: var(--info-soft); border-color: transparent; }

.filter-chips { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip {
    padding: 6px 14px; border-radius: var(--pill); border: 1px solid var(--border-strong);
    font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--text-2);
}
.filter-chip:hover { text-decoration: none; background: var(--surface-2); }
.filter-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- Avatars ---------- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--surface-3); flex-shrink: 0; }
.avatar-fallback {
    /* initials_tone() in render.php sets --av-ink / --av-l per hue so the initials stay at 4.5:1; keep these stops in step with it. */
    display: inline-grid; place-items: center; color: var(--av-ink, #fff); font-weight: 700; letter-spacing: .02em;
    background: linear-gradient(135deg, hsl(var(--hue) 70% calc(48% + var(--av-l, 0%))), hsl(calc(var(--hue) + 40) 75% calc(38% + var(--av-l, 0%))));
    font-family: var(--font-display);
}
.avatar-link { display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.avatar-link:hover { opacity: .9; }
.user-name { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--text); min-width: 0; }
.user-name .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verified { color: var(--accent); flex-shrink: 0; }
.handle { color: var(--muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Composer ---------- */
.composer { padding: 4px 16px 8px; border-bottom: 1px solid var(--border); }
.composer.in-modal { border-bottom: 0; }
.composer-grid { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding-top: 8px; }
.composer-main { min-width: 0; }
.composer textarea {
    width: 100%; resize: none; border: 0; background: transparent; outline: none;
    font-size: 20px; line-height: 24px; padding: 8px 0; min-height: 40px; max-height: 400px;
}
.composer textarea::placeholder { color: var(--muted); }
.composer-previews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 6px 0; }
.composer-previews:empty { display: none; }
.composer-previews .preview { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.composer-previews .preview img { width: 100%; height: 100%; object-fit: cover; }
.composer-previews .preview button {
    position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%;
    border: 0; background: rgba(0, 0, 0, .7); color: #fff; display: grid; place-items: center;
}
.composer-extras { display: flex; flex-wrap: wrap; gap: 8px; }
.extra-field {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--pill);
    color: var(--accent-text); margin-bottom: 6px;
}
.extra-field input, .extra-field select { border: 0; background: transparent; outline: none; color: var(--text); font-size: 14px; min-width: 0; }
.extra-field input[type=number] { width: 130px; }
.extra-field select option { background: var(--surface); }
/* Location field with place suggestions */
.place-field { position: relative; flex: 1 1 260px; max-width: 420px; min-width: 0; }
.place-field .extra-field { display: flex; width: 100%; }
.place-field .extra-field input { flex: 1; }
.place-pop {
    position: absolute; left: 0; top: calc(100% - 2px); z-index: 70; width: 100%;
    padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border);
}
/* The composer dialog scrolls, which would clip a floating list, so there it opens in place. */
.in-modal .place-pop { position: static; width: 100%; margin: -2px 0 6px; box-shadow: none; }
.place-list { max-height: min(320px, 50vh); overflow-y: auto; }
.place-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    color: var(--text); cursor: pointer; user-select: none;
}
.place-item.active, .place-item:hover { background: var(--surface-2); }
.place-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.place-item.active .place-icon, .place-item:hover .place-icon { background: var(--surface); }
.place-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.place-text strong { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-text small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-status { margin: 0; padding: 8px 10px; color: var(--muted); font-size: 13px; }
.place-credit { margin: 4px 0 0; padding: 6px 10px 2px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.place-credit a { color: inherit; text-decoration: underline; }
.composer-quote { margin: 4px 0 8px; }
.composer-quote .quote-card { pointer-events: none; }
.composer-toolbar { display: flex; align-items: center; gap: 2px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.tool-btn {
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
    border: 0; background: transparent; color: var(--accent); cursor: pointer;
}
.tool-btn:hover, .tool-btn.on { background: var(--accent-soft); }
.composer-count { margin-left: auto; margin-right: 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.composer-count.warn { color: var(--warn-text); }
.composer-count.over { color: var(--danger-text); font-weight: 700; }

/* ---------- Posts ---------- */
.feed:empty { display: none; }
.post {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background .15s;
}
.post:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.post.post-detail { cursor: default; }
.post.post-detail:hover { background: transparent; }
.post.is-new { animation: flash-in 1.2s var(--ease); }
@keyframes flash-in { from { background: var(--accent-soft); } to { background: transparent; } }
.post-context {
    display: flex; align-items: center; gap: 6px;
    margin: -4px 0 4px 24px; color: var(--muted); font-size: 13px; line-height: 16px; font-weight: 700;
}
.post-grid { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
.post-head { display: flex; align-items: flex-start; gap: 6px; line-height: 20px; }
.post-author { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; flex-wrap: nowrap; }
.post-author .handle, .post-author .dot, .post-author .time, .post-author .edited { flex-shrink: 0; color: var(--muted); font-size: 15px; }
.post-author .handle { flex-shrink: 1; }
.post-author .time:hover { color: var(--text-2); }
.post-head .dropdown { margin: -8px -8px -8px 0; }
.post-head .icon-btn { width: 34px; height: 34px; }
.post-body {
    margin-top: 2px; font-size: 15px; line-height: 20px;
    overflow-wrap: anywhere; white-space: normal;
}
.post-detail .post-body { font-size: 17px; line-height: 24px; margin-top: 12px; }
/* Single post, as on X: name over handle beside the avatar, then the post runs the full column width. */
.post-detail .post-grid { gap: 0 8px; }
.post-detail .post-content { display: contents; }
.post-detail .post-content > * { grid-column: 1 / -1; }
.post-detail .post-content > .post-head { grid-column: 2; align-self: center; }
.post-detail .post-author { flex-direction: column; align-items: flex-start; gap: 0; }
.post-detail .post-author .handle { max-width: 100%; }
.post-body a, .comment-body a, .msg-text a, .prose a, .profile-bio a { color: var(--accent-text); }
.post-timestamp { color: var(--muted); font-size: 15px; padding: 16px 0; border-bottom: 1px solid var(--border); margin-top: 4px; }
.unavailable { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface); }

.media-grid {
    display: grid; gap: 3px; margin-top: 10px;
    border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
    max-height: 520px;
}
.media-grid .media { display: block; position: relative; overflow: hidden; background: var(--surface-2); }
.media-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.media-grid .media:hover img { transform: scale(1.02); }
.media-grid.n1 .media img { max-height: 520px; height: auto; }
.media-grid.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.media-grid.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }
.media-grid.n3 .media:first-child { grid-row: span 2; }
.media-grid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }

.quote-card {
    display: block; margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    color: var(--text);
}
.quote-card:hover { text-decoration: none; background: var(--surface); }
.quote-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; }
.quote-body { display: flex; gap: 10px; margin-top: 4px; font-size: 14.5px; }
.quote-thumb { width: 72px; height: 72px; border-radius: var(--radius-xs); object-fit: cover; flex-shrink: 0; }

.post-actions { display: flex; justify-content: space-between; margin: 8px -8px -6px; }
.post-detail .post-actions { max-width: none; padding: 6px 0; margin: 0; border-bottom: 1px solid var(--border); }
.act {
    display: inline-flex; align-items: center; gap: 4px;
    height: 34px; padding: 0 8px; border: 0; border-radius: var(--pill);
    background: transparent; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums;
    transition: color .15s, background .15s;
}
.act:hover { text-decoration: none; }
.act-comment:hover { color: var(--info-text); background: var(--info-soft); }
.act-repost:hover, .act-repost.on { color: var(--repost); }
.act-repost:hover { background: var(--repost-soft); }
.act-like:hover { color: var(--like); background: var(--like-soft); }
.act-like.on { color: var(--like); }
.act-like.on svg { fill: currentColor; }
.act-like.pop svg { animation: pop .35s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35); } }
.act-bookmark:hover, .act-bookmark.on { color: var(--accent-text); }
.act-bookmark:hover { background: var(--accent-soft); }
.act-bookmark.on svg { fill: currentColor; }
.act-share:hover { color: var(--info-text); background: var(--info-soft); }

.feed-loader { display: flex; justify-content: center; padding: 26px; }
.feed-end { text-align: center; color: var(--muted); padding: 28px 16px; font-size: 14px; }
.feed-empty-inline { padding: 20px 16px; }
.spinner {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid var(--surface-3); border-top-color: var(--accent);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Comments ---------- */
.comment-form {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.comment-input { flex: 1; min-width: 0; }
.comment-form textarea {
    width: 100%; border: 0; outline: none; resize: none; background: transparent;
    font-size: 17px; padding: 6px 0; min-height: 36px; max-height: 240px;
}
.replying-to { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.replying-to a { color: var(--accent-text); }
.comments { padding: 4px 0 30px; }
.comments-empty { padding: 30px 16px; text-align: center; }
.comment { display: flex; gap: 10px; padding: 10px 16px 2px; }
.comment.is-reply { padding: 8px 0 0; }
.comment-main { flex: 1; min-width: 0; }
.comment-bubble {
    display: inline-block; max-width: 100%;
    padding: 8px 12px; border-radius: 4px 16px 16px 16px; background: var(--surface-2);
}
.comment-head { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.comment-body { font-size: 15px; overflow-wrap: anywhere; margin-top: 1px; }
.comment-actions { display: flex; align-items: center; gap: 14px; padding: 4px 4px 2px; font-size: 13px; }
.comment-actions .time { color: var(--muted); }
.comment.is-highlight .comment-bubble { box-shadow: 0 0 0 2px var(--accent); }
.replies:empty { display: none; }
.replies { margin-top: 2px; }

/* ---------- Dropdowns ---------- */
.dropdown { position: relative; display: inline-flex; }
.dropdown-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
    min-width: 230px; padding: 6px; border-radius: 14px;
    background: var(--surface); box-shadow: var(--shadow);
    display: none; flex-direction: column;
    animation: drop-in .14s var(--ease);
}
.dropdown.open .dropdown-menu { display: flex; }
.dropdown.dropup .dropdown-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; width: 100%; min-width: 250px; }
.post-actions .dropdown-menu { left: 0; right: auto; }
/* Lifted out of a scrolling / clipped box (see app.js) and pinned to the viewport. */
.dropdown-menu.is-floating {
    /* Above the mobile drawer (90) and modals (100), below toasts (200). */
    display: flex; position: fixed; top: 0; left: 0; right: auto; bottom: auto; z-index: 110;
    max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    transform-origin: top right;
}
.dropdown-menu.is-floating.is-above { transform-origin: bottom right; animation-name: drop-up; }
.dropdown-menu.is-floating .dropdown-item { white-space: nowrap; }
.dropdown-item:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes drop-up { from { opacity: 0; transform: translateY(4px); } }
.dropdown-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: 9px; background: transparent;
    font-size: 15px; font-weight: 600; text-align: left; color: var(--text);
}
.dropdown-item:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-menu form { margin: 0; }

/* ---------- Modals, toasts, lightbox ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); animation: fade .15s; }
.modal-dialog {
    position: relative; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border-radius: 20px; box-shadow: var(--shadow);
    animation: modal-in .2s var(--ease);
}
.modal-composer { max-width: 600px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; position: sticky; top: 0; background: var(--surface); z-index: 2; }
.modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.modal-body { padding: 4px 20px 20px; }
.modal-body .form { gap: 14px; }
@keyframes fade { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
    padding: 11px 18px; border-radius: 12px; background: var(--accent-fill); color: var(--accent-ink);
    font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    animation: toast-in .25s var(--ease);
}
.toast.error { background: var(--danger-fill); color: var(--danger-ink); }
.toast.hide { opacity: 0; transform: translateY(8px); transition: .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 6px; }
.lightbox .icon-btn { position: absolute; color: #fff; width: 48px; height: 48px; background: rgba(255, 255, 255, .08); }
.lightbox .icon-btn:hover { background: rgba(255, 255, 255, .18); }
.lightbox-close { top: 16px; left: 16px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-page { padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--border); }
.form-page:last-child { border-bottom: 0; }
.form-section { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
.form-row-4 { grid-template-columns: repeat(4, 1fr); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; align-items: center; padding-top: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.field > span { font-size: 13px; font-weight: 700; color: var(--text-2); letter-spacing: .01em; }
.field em { font-style: normal; font-weight: 500; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea,
.toolbar select, .price-range input {
    width: 100%; height: 44px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.field textarea { height: auto; padding: 11px 14px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar select:focus, .price-range input:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input[type=file] { font-size: 14px; color: var(--muted); }
.field input[type=file]::file-selector-button {
    margin-right: 12px; padding: 8px 14px; border-radius: var(--pill); border: 1px solid var(--border-strong);
    background: var(--surface-2); color: var(--text); font-weight: 600; cursor: pointer;
}
.field.has-error input { border-color: var(--danger); }
.field-error { color: var(--danger-text); font-size: 13px; }
.input-prefix { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.input-prefix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-prefix span { padding-left: 14px; color: var(--muted); font-weight: 600; }
.field .input-prefix input { border: 0 !important; box-shadow: none !important; padding-left: 4px; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.check-row { display: flex; gap: 20px; flex-wrap: wrap; }
.radio-card { display: block; cursor: pointer; margin-top: 4px; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card > span {
    display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center;
    padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.radio-card small { grid-column: 2; color: var(--muted); font-size: 13px; }
.radio-card input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.radio-card input:focus-visible + span { outline: 2px solid var(--accent); }
.danger-zone .form-section { color: var(--danger-text); }

.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 36px; height: 20px; border-radius: 20px; background: var(--surface-3); position: relative; transition: .2s; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }

.alert {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 16px; padding: 12px 14px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500;
}
.alert-success { background: var(--success-soft); color: var(--success-text); }
.alert-error { background: var(--danger-soft); color: var(--danger-text); }
.alert-info { background: var(--info-soft); color: var(--info-text); }
.form .alert, .auth-card .alert { margin: 0; }

/* Uploaders */
.image-uploader { position: relative; margin-bottom: 40px; }
.cover-upload { cursor: pointer; border-radius: var(--radius); position: relative; display: block; }
.upload-hint {
    position: absolute; inset: auto 12px 12px auto;
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill);
    background: rgba(0, 0, 0, .65); color: #fff; font-size: 13px; font-weight: 600;
}
.upload-hint.round { inset: auto 0 0 auto; padding: 8px; }
.avatar-upload { position: absolute; left: 20px; bottom: -40px; cursor: pointer; border-radius: 50%; border: 4px solid var(--bg); display: inline-block; }
.avatar-upload .avatar, .avatar-upload .club-avatar { display: grid; }
.avatar-upload img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.photo-manager { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-new { display: contents; }
.photo-thumb, .photo-add { width: 110px; height: 90px; border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb input { position: absolute; opacity: 0; }
.photo-thumb .remove-flag {
    position: absolute; inset: auto 4px 4px 4px; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 3px; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; cursor: pointer;
}
.photo-thumb input:checked ~ .remove-flag { background: var(--danger-fill); color: var(--danger-ink); }
.photo-thumb:has(input:checked) img { opacity: .35; }
.photo-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 2px dashed var(--border-strong); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.photo-add:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---------- Search & toolbars ---------- */
.search-box {
    display: flex; align-items: center; gap: 12px;
    height: 42px; padding: 0 16px; border-radius: var(--pill);
    background: var(--surface-2); border: 1px solid transparent; color: var(--muted);
}
.search-box:focus-within { border-color: var(--accent); background: var(--bg); color: var(--accent); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: 15px; }
.sidebar-right .search-box { position: sticky; top: 0; z-index: 5; box-shadow: 0 -12px 0 var(--bg); }
.search-box-head { width: 100%; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.toolbar .search-box { flex: 1 1 220px; height: 40px; }
.toolbar select { width: auto; height: 40px; padding-right: 30px; border-radius: var(--pill); }
.price-range { display: flex; align-items: center; gap: 6px; }
.price-range input { width: 100px; height: 40px; border-radius: var(--pill); }

/* ---------- Side cards ---------- */
/* X's sidebar modules: 16px corners, a 20px heavy title, 12px x 16px rows and a "Show more" footer row. */
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.side-title { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 800; padding: 12px 16px; }
.side-more { display: block; padding: 16px; color: var(--accent-text); font-size: 15px; line-height: 20px; }
.side-more:hover { background: var(--surface-2); text-decoration: none; }
.side-trend { display: flex; flex-direction: column; padding: 12px 16px; line-height: 20px; }
.side-trend .small { line-height: 16px; }
.side-trend:hover, .side-ride:hover { background: var(--surface-2); text-decoration: none; }
.side-trend strong { font-size: 15px; }
.side-ride { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.side-ride strong { display: block; font-size: 15px; line-height: 20px; }
.side-user { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.side-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 20px; }
.side-user .follow-btn { height: 32px; min-width: 0; padding: 0 16px; font-size: 14px; }
.side-footer { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; color: var(--muted); font-size: 13px; line-height: 16px; }

.date-block {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 48px; height: 52px; flex-shrink: 0; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border-strong); line-height: 1;
}
.date-block .m { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--accent-text); letter-spacing: .06em; }
.date-block .d { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-top: 2px; }

/* ---------- Lists, sections, empty states ---------- */
.list { display: flex; flex-direction: column; }
.list-more { display: block; padding: 14px 16px; color: var(--accent-text); border-bottom: 1px solid var(--border); }
.user-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.user-row:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.user-row-info { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.user-row-info p { font-size: 14px; color: var(--text-2); margin-top: 3px; }
.user-row-info .badge { align-self: flex-start; margin-top: 4px; }
.section-pad { padding: 16px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 20px; font-weight: 700; padding: 18px 16px 8px; }
.section-title .icon { color: var(--accent); }
.section-title-sm { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 28px; color: var(--muted); }
.empty-state .icon { color: var(--accent); opacity: .9; }
.empty-state h3 { font-family: var(--font-display); font-size: 31px; line-height: 36px; color: var(--text); font-weight: 800; }
.empty-state p { max-width: 380px; }
.empty-state .btn { margin-top: 8px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
.prose { line-height: 1.6; }
.prose h3 { font-family: var(--font-display); font-size: 17px; margin-bottom: 8px; }
.prose p { overflow-wrap: anywhere; }
.details { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.details div { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.details dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.details dd { margin: 4px 0 0; font-weight: 600; }

/* ---------- Cards ---------- */
.card {
    display: block; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; color: var(--text);
    transition: border-color .15s, transform .15s var(--ease), box-shadow .15s;
}
a.card:hover { text-decoration: none; border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.card.pad { padding: 16px; }
.card h3 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card-grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.cover {
    width: 100%; background-size: cover; background-position: center; background-color: var(--surface-3);
    background-image:
        radial-gradient(120% 140% at 85% 0%, hsl(var(--hue, 20) 85% 55% / .55), transparent 60%),
        linear-gradient(135deg, hsl(var(--hue, 20) 30% var(--cover-l)), hsl(calc(var(--hue, 20) + 40) 35% calc(var(--cover-l) - 6%)));
}
.cover-sm { height: 110px; position: relative; }
.cover-md { height: 170px; }
.cover-lg { height: 200px; }

.club-card-body { padding: 0 16px 16px; margin-top: -26px; position: relative; }
.club-card-body h3 { margin-top: 10px; }
.club-desc { font-size: 14px; color: var(--text-2); margin: 8px 0 12px; min-height: 40px; }
.club-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.club-card-foot .muted { display: inline-flex; align-items: center; gap: 4px; }
.club-avatar { border-radius: 14px; object-fit: cover; border: 3px solid var(--surface); flex-shrink: 0; }
.club-fallback {
    /* Same as .avatar-fallback: initials_tone() picks the ink and nudges lightness; keep the stops in step with it. */
    display: inline-grid; place-items: center; color: var(--av-ink, #fff); font-family: var(--font-display); font-weight: 800;
    background: linear-gradient(135deg, hsl(var(--hue) 70% calc(45% + var(--av-l, 0%))), hsl(calc(var(--hue) + 50) 70% calc(35% + var(--av-l, 0%))));
}

.event-card .cover-sm .date-block { position: absolute; left: 14px; bottom: -22px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.event-card-body { padding: 30px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
/* Past rides and sold listings fade their pictures, not their text (opacity took text below 4.5:1). */
.event-card.is-past .cover { filter: saturate(.25); }
.event-card.is-past h3 { color: var(--text-2); }
.meta-line { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.meta-line .icon { color: var(--muted); }
.event-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.listing-card .listing-img { aspect-ratio: 4 / 3; position: relative; background: var(--surface-2); overflow: hidden; }
.listing-card .listing-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.listing-card:hover .listing-img img { transform: scale(1.04); }
.listing-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); }
.listing-placeholder.big { aspect-ratio: 4 / 3; }
.listing-card-body { padding: 12px 14px 14px; }
.listing-card-body h3 { font-size: 15px; font-weight: 600; margin: 2px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.1; }
.listing-card.is-sold .listing-img > :not(.mk-badges) { opacity: .6; }
.listing-card.is-sold .price { color: var(--muted); }
.sold-ribbon {
    position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 6px;
    background: var(--danger-fill); color: var(--danger-ink); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}

.route-thumb-wrap { position: relative; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.route-thumb-wrap::before {
    content: ''; position: absolute; inset: 0; opacity: .5;
    background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 24px 24px;
}
.route-thumb { width: 100%; height: 170px; display: block; position: relative; }
.route-thumb.empty { display: grid; place-items: center; color: var(--muted); }
.route-line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.route-shadow { fill: none; stroke: var(--bg); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; opacity: .7; }
.route-start { fill: var(--success); stroke: var(--surface); stroke-width: 2.5; }
.route-end { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.route-distance {
    position: absolute; right: 10px; bottom: 10px; padding: 3px 10px; border-radius: var(--pill);
    background: var(--overlay); font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.route-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.route-card-body .muted { display: flex; align-items: center; gap: 4px; }
.route-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.stars { display: inline-flex; gap: 1px; color: var(--surface-3); }
.stars .on { color: var(--warn); }
.stars .on svg { fill: currentColor; }
.stars .half { color: var(--warn); }

/* ---------- Profile ---------- */
.profile { border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.profile-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 16px; }
.profile-avatar { margin-top: -68px; }
.profile-avatar .avatar { border: 4px solid var(--bg); width: 134px !important; height: 134px !important; }
.profile-actions { display: flex; gap: 8px; padding-top: 12px; align-items: center; }
.profile-info { padding: 10px 16px 0; }
.profile-name { font-family: var(--font-display); font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.profile-name .verified { width: 22px; height: 22px; }
.profile-handle { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.profile-bio { margin-top: 12px; font-size: 15.5px; white-space: pre-line; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--muted); font-size: 14.5px; }
.profile-meta span { display: inline-flex; align-items: center; gap: 5px; }
.profile-meta a { color: var(--accent-text); }
.profile-stats { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.profile-stats strong { color: var(--text); font-weight: 700; }
.profile-stats a:hover { text-decoration: underline; }

.garage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.bike-card { display: flex; flex-direction: column; }
.bike-photo {
    aspect-ratio: 3 / 2; position: relative; display: grid; place-items: center; color: rgba(255, 255, 255, .85);
    background: linear-gradient(135deg, hsl(var(--hue) 35% 26%), hsl(calc(var(--hue) + 40) 40% 14%));
}
.bike-photo a, .bike-photo img { width: 100%; height: 100%; object-fit: cover; }
.bike-flag { position: absolute; top: 10px; left: 10px; }
.bike-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bike-body h3 { font-family: var(--font-display); font-size: 20px; }
.bike-nick { color: var(--accent-text); font-weight: 600; font-style: italic; margin-top: -4px; }
.spec-row { display: flex; flex-wrap: wrap; gap: 6px; }
.spec { padding: 3px 9px; border-radius: 6px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-2); }
.bike-mods .label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.bike-mods p { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.bike-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.bike-actions .bike-remove { margin-left: auto; width: 32px; height: 32px; color: var(--danger-text); }
.bike-actions .bike-remove:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger-text); }

/* ---------- Clubs / rides ---------- */
.club-header { border-bottom: 1px solid var(--border); }
.club-header-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 0 16px 16px; margin-top: -40px; position: relative; }
.club-header-info, .club-header-actions { padding-top: 48px; }
.club-header-avatar .club-avatar { border-width: 4px; border-color: var(--bg); }
.club-header-info { flex: 1; min-width: 220px; }
.club-header-info h2 { overflow-wrap: anywhere; }
@media (max-width: 700px) { .club-header-info { padding-top: 0; flex-basis: 100%; min-width: 0; } .club-header-actions { padding-top: 0; } }
.club-header-info h2 { font-family: var(--font-display); font-size: 23px; font-weight: 800; }
.club-header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.club-chapter { color: var(--accent-text); font-weight: 700; font-size: 15px; margin-top: 2px; }

/* Club cards */
.club-card-chapter { display: block; font-size: 13px; font-weight: 600; color: var(--accent-text); margin-top: 2px; }
.club-card-kind { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.club-card-kind strong { color: var(--text); }
.club-card-loc { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.club-filters .check { font-size: 14px; font-weight: 600; color: var(--text-2); }

/* Banners and the notice board */
.club-banner, .club-notice { display: flex; gap: 12px; align-items: flex-start; margin: 14px 16px 0; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.club-banner > .icon, .club-notice > .icon { flex-shrink: 0; color: var(--muted); margin-top: 1px; }
.club-banner > div { display: flex; flex-direction: column; gap: 2px; }
.club-banner-accent { background: var(--accent-soft); border-color: transparent; }
.club-banner-accent > .icon { color: var(--accent); }
.club-notice { border-left: 4px solid var(--accent); margin-bottom: 4px; }
.club-notice > .icon { color: var(--accent); }
.club-notice > div { min-width: 0; flex: 1; }
.club-notice-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.club-notice-head strong { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); }
.club-notice p { overflow-wrap: anywhere; }

/* About tab */
.club-about .section-title-sm { margin: 24px 0 10px; }
.club-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.club-facts .detail-tile small { display: block; font-size: 13px; font-weight: 400; margin-top: 2px; line-height: 1.35; }
.club-facts .detail-tile > div > span:last-child { font-weight: 600; overflow-wrap: anywhere; }
.club-facts .detail-tile a { color: var(--accent-text); }
.club-style-chips { margin-top: 12px; }
.club-rules { white-space: normal; line-height: 1.6; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); overflow-wrap: anywhere; font-size: 14.5px; }
.club-rules-scroll { max-height: 220px; overflow-y: auto; }
.officer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.officer { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.officer > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.officer .muted { color: var(--accent-text); font-weight: 600; }
.club-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.club-links li { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.club-links .icon { color: var(--muted); flex-shrink: 0; }
.club-links a { color: var(--accent-text); font-weight: 600; }
.club-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.club-reqs li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; }
.club-reqs .icon { color: var(--accent); flex-shrink: 0; }
.club-reqs strong { margin-right: 4px; }

/* Members tab */
.my-membership { padding: 16px 16px 0; }
.my-membership-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface); border: 1px solid var(--border); }
.my-membership-no { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--accent-fill); color: var(--accent-ink); }
.my-membership-no span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.my-membership-no strong { font-family: var(--font-display); font-size: 23px; line-height: 1; }
.my-membership-info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 160px; min-width: 0; }
.my-membership-info strong { font-size: 16px; }
.my-membership-info .badge { align-self: flex-start; margin-top: 2px; }
.my-membership-bike { flex: 1 1 220px; min-width: 0; }
.club-admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 16px 0; }
.club-invite { display: flex; gap: 8px; flex: 1 1 280px; min-width: 0; }
.club-invite .input-prefix { flex: 1; min-width: 0; height: 36px; }
.club-invite .input-prefix input { border: 0; background: none; outline: none; height: 100%; width: 100%; min-width: 0; padding: 0 12px 0 4px; }
.member-row .user-row-info, .club-request .user-row-info { gap: 2px; }
.member-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.member-tags:empty { display: none; }
.user-row-info .member-tags .badge { margin-top: 2px; }
.member-bike { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.member-bike .icon { color: var(--muted); }
.club-request { align-items: flex-start; flex-wrap: wrap; }
.club-request .row-actions { display: flex; gap: 6px; align-items: center; }
@media (max-width: 560px) { .club-request .row-actions { width: 100%; padding-left: 56px; } }
.club-answers { margin: 8px 0 0; display: grid; gap: 2px 0; font-size: 14px; }
.club-answers dt { color: var(--muted); font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.club-answers dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.section-title-note { font-family: var(--font); font-weight: 500; margin-left: auto; }

/* Start / edit club form */
.club-form .form-block { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; border-top: 1px solid var(--border); }
.club-form .form-section { display: flex; align-items: center; gap: 8px; }
.club-form .form-section .icon { color: var(--accent); }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-grid .radio-card { margin-top: 0; height: 100%; }
.option-grid .radio-card > span { height: 100%; align-content: start; }
.option-grid .radio-card strong { font-size: 14.5px; }
.option-grid .radio-card .icon { color: var(--accent); }
@media (max-width: 700px) { .option-grid, .option-grid-3 { grid-template-columns: 1fr; } }
.input-suffix span { padding: 0 14px 0 0; }
.input-suffix input { padding-left: 14px !important; }
[data-questions] { transition: opacity .2s; }
/* Unused until joining needs approval: shown as optional, without fading the text below 4.5:1. */
[data-questions].is-inactive > span { color: var(--muted); }
[data-questions].is-inactive input { background: transparent; border-style: dashed; }
.error-list { margin: 4px 0 0; padding-left: 18px; font-weight: 500; }
.alert > div { min-width: 0; }
.danger-zone { gap: 0; }
.danger-zone .form-section { margin-bottom: 6px; }
.danger-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.danger-row > div:first-child { flex: 1 1 260px; min-width: 0; }
.danger-row-action { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 260px; justify-content: flex-end; }
.danger-row-action select { height: 40px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); min-width: 0; flex: 1 1 180px; max-width: 100%; }
.club-join-form .check { align-items: flex-start; }
.club-join-form .check input { margin-top: 2px; flex-shrink: 0; }

.ride-hero { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.ride-hero-body { display: flex; gap: 16px; align-items: flex-start; padding: 0 16px; margin-top: -26px; position: relative; }
.ride-hero-body > div:not(.date-block) { padding-top: 34px; min-width: 0; }
.ride-hero-body .date-block { width: 64px; height: 70px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.ride-hero-body .date-block .d { font-size: 32px; }
.ride-title { font-family: var(--font-display); font-size: 23px; font-weight: 800; margin-top: 2px; }
.ride-hero-body p a { color: var(--text); font-weight: 600; }
.ride-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 16px 0; }
.ride-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 16px; border-bottom: 1px solid var(--border); }
.detail-tile { display: flex; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.detail-tile > .icon { color: var(--accent); margin-top: 2px; }
.detail-tile > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-tile .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.detail-tile strong { overflow-wrap: anywhere; }
.detail-tile a { color: var(--accent-text); }
.rider-faces { display: flex; flex-wrap: wrap; gap: 14px; }
.rider-face { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; width: 56px; text-align: center; }
.rider-face span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rider-face.is-interested .avatar { opacity: .55; }
.rider-face:hover { text-decoration: none; }
.route-attach { display: flex; align-items: center; gap: 16px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.route-attach:hover { text-decoration: none; border-color: var(--border-strong); }
.route-attach .route-thumb { width: 200px; height: 100px; background: var(--surface-2); border-radius: var(--radius-sm); }
.route-attach div { display: flex; flex-direction: column; }

/* ---------- Routes / maps ---------- */
.map { width: 100%; height: 360px; background: var(--surface-2); z-index: 0; }
.map-tall { height: 460px; }
.map-editor { border-bottom: 1px solid var(--border); }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.map-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-right: auto; }
.map-stats { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 12px 16px; font-size: 15px; }
.map-stats span { display: inline-flex; align-items: center; gap: 6px; }
.map-stats strong { font-family: var(--font-display); font-size: 20px; }
.map-stats .icon { color: var(--accent); }
.route-form .form-page { border-bottom: 0; }
.leaflet-container { font-family: var(--font); background: var(--surface-2); }
/* Dark theme: the street map is turned dark; aerial photos (and the names drawn over them) stay as they are. */
[data-theme="dark"] .leaflet-tile-pane > .leaflet-layer:not(.map-tiles-photo),
[data-theme="dark"] .map-layers-img.is-map { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.55); }
.leaflet-container.map-satellite { background: #1f2427; }

/* Map / Satellite switcher: a live thumbnail of the other view, as on Google Maps, and a Labels toggle over photos. */
.leaflet-control.map-layers { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.map-layers-btn {
    --thumb: 64px;
    position: relative; display: block; width: calc(var(--thumb) + 4px); height: calc(var(--thumb) + 4px); padding: 0; overflow: hidden; cursor: pointer;
    border: 2px solid #fff; border-radius: 10px; background: #2a3035; box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
    transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.map-layers-img { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 256px 256px; transition: transform .25s var(--ease); }
.map-layers-btn:hover .map-layers-img { transform: scale(1.06); }
.map-layers-btn:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.map-layers-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.map-layers-name {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 14px 2px 4px;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0, rgba(0, 0, 0, .7) 50%, transparent); color: #fff; font: 700 11.5px/1.1 var(--font); letter-spacing: .01em;
}
.map-layers-name .icon { flex-shrink: 0; }
.map-layers-labels {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 9px; cursor: pointer;
    border: 0; border-radius: var(--pill); background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
    font: 700 12.5px/1 var(--font);
}
.map-layers-labels:hover { background: var(--surface-2); }
.map-layers-labels[hidden] { display: none; }
.map-layers-check { position: relative; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--border-strong); background: var(--surface); }
.map-layers-labels[aria-pressed="true"] .map-layers-check { border-color: var(--accent-fill); background: var(--accent-fill); }
.map-layers-labels[aria-pressed="true"] .map-layers-check::after { content: ''; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (pointer: coarse) { .map-layers-labels { height: 38px; padding: 0 14px 0 11px; } }
/* Map credits on one line, opened in full on hover, focus or a tap. The corner spans the map so the line can't run off it. */
.leaflet-container:has(.map-credits) .leaflet-bottom.leaflet-right { left: 0; }
.leaflet-control-attribution.map-credits { max-width: calc(100% - 96px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaflet-control-attribution.map-credits:is(:hover, :focus-within, .is-open) { white-space: normal; padding: 5px 9px; border-top-left-radius: 8px; line-height: 1.45; }
/* The switcher stands clear of the one-line credits along the bottom edge. */
.leaflet-bottom .leaflet-control.map-layers { margin-bottom: 24px; }
.fuel-map-wrap:has(.map-credits:is(:hover, :focus-within, .is-open)) .fuel-legend { opacity: 0; pointer-events: none; }
[data-theme="dark"] .leaflet-control-attribution { background: rgba(0, 0, 0, .72) !important; color: #c9c9c9; }
[data-theme="dark"] .leaflet-control-attribution a { color: #ddd; }
.leaflet-bar a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.wp-marker { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.wp-marker.start { border-color: var(--success); }
.wp-marker.end { background: var(--accent); }
.route-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 16px; }
.route-main { display: flex; flex-direction: column; gap: 18px; }
.route-side { display: flex; flex-direction: column; gap: 14px; }
.route-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.stat .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.stat strong { font-family: var(--font-display); font-size: 20px; }
.star-input { display: inline-flex; gap: 4px; }
.star-input button { background: none; border: 0; padding: 2px; color: var(--surface-3); transition: transform .1s, color .1s; }
.star-input button.on, .star-input button.hover { color: var(--warn); }
.star-input button.on svg, .star-input button.hover svg { fill: currentColor; }
.star-input button:hover { transform: scale(1.12); }

/* ---------- Marketplace detail ---------- */
.listing-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; padding: 16px; }
.gallery-main { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; }
.gallery-main a, .gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.gallery-thumbs button { width: 76px; height: 58px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; flex-shrink: 0; background: none; }
.gallery-thumbs button.active { border-color: var(--accent); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.listing-info { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.listing-info .details { width: 100%; margin: 6px 0; }
.listing-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; }
.listing-price { font-family: var(--font-display); font-size: 31px; font-weight: 800; color: var(--accent-text); line-height: 1; }
.listing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.seller-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.seller-card > div { display: flex; flex-direction: column; min-width: 0; }
.safety-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--text-2); font-size: 13.5px; }
.safety-note .icon { color: var(--info); }

/* ---------- Notifications ---------- */
.notification {
    position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text); transition: background .15s;
}
.notification:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.notification.unread { background: var(--accent-soft); }
.notification.is-system.is-important { box-shadow: inset 3px 0 0 var(--danger); }
.notification:has(.notif-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }
.notif-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex-shrink: 0; }
.notif-like .icon, .notif-comment_like .icon { color: var(--like); fill: var(--like); }
.notif-like, .notif-comment_like { background: var(--like-soft); }
.notif-repost, .notif-quote { background: var(--repost-soft); color: var(--repost); }
.notif-follow, .notif-follow_accept, .notif-club_join, .notif-club_approved, .notif-club_request { background: var(--accent-soft); color: var(--accent); }
.notif-follow_request { background: var(--surface-3); color: var(--text-2); }
.notif-comment, .notif-reply, .notif-mention { background: var(--info-soft); color: var(--info-text); }
.notif-event_rsvp, .notif-event_new, .notif-event_update { background: var(--success-soft); color: var(--success-text); }
.notif-route_rating, .notif-listing_save { background: var(--warn-soft); color: var(--warn-text); }
.notif-icon.tone-info { background: var(--info-soft); color: var(--info); }
.notif-icon.tone-success { background: var(--success-soft); color: var(--success); }
.notif-icon.tone-warn { background: var(--warn-soft); color: var(--warn); }
.notif-icon.tone-danger { background: var(--danger-soft); color: var(--danger); }
.notif-icon.tone-accent { background: var(--accent-soft); color: var(--accent); }
.notif-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.notif-avatars { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
.notif-source { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.notif-source .icon { color: var(--accent); }
.notif-source .badge { text-transform: none; letter-spacing: 0; }
.notif-text { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.notif-link { color: inherit; }
.notif-link:hover { text-decoration: none; }
.notif-link:focus-visible { outline: none; }
/* The whole card is the link; menus and links in the text sit above it. */
.notif-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.notif-body { font-size: 14.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.notif-body a, .notif-actions { position: relative; z-index: 2; }
.notif-snippet { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.notif-meta { display: flex; align-items: center; gap: 12px; margin-top: 1px; }
.notification .time { color: var(--muted); font-size: 13px; }
.notif-cta { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--accent-text); }
.notif-actions { margin: -5px -8px 0 0; opacity: 0; transition: opacity .15s; }
.notification:hover .notif-actions, .notif-actions.open, .notif-actions:focus-within { opacity: 1; }
.notif-actions .icon-btn { width: 32px; height: 32px; }
@media (hover: none) { .notif-actions { opacity: 1; } }
.notif-dot { display: none; position: absolute; top: 15px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Short form: bell menu and live pop-ups */
.notification.is-compact { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 11px 26px 11px 12px; }
.notification.is-compact.unread { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.is-compact .notif-icon { width: 28px; height: 28px; }
.is-compact .notif-icon .icon { width: 14px; height: 14px; }
.is-compact .notif-text { font-size: 14px; }
.is-compact .notif-body, .is-compact .notif-snippet { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-compact .notif-dot { display: block; }
.is-compact .notif-source { font-size: 11px; }
.is-compact .time { font-size: 12px; }

.tab-count-accent { background: var(--accent-fill); color: var(--accent-ink); }
.new-pill {
    position: sticky; top: calc(64px + var(--safe-top)); z-index: 15; display: flex; align-items: center; gap: 6px;
    width: max-content; margin: 10px auto -46px; padding: 8px 16px; border: 0; border-radius: var(--pill);
    background: var(--accent-fill); color: var(--accent-ink); font-weight: 700; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    animation: toast-in .25s var(--ease);
}
.new-pill:hover { background: var(--accent-fill-hover); }
.rot-90 { transform: rotate(90deg); }

/* Live updates: new-posts pill, arriving posts and comments, changing counts */
.feed-new-pill { margin-bottom: -48px; padding: 6px 16px 6px 12px; min-height: 38px; cursor: pointer; transition: background .15s, transform .15s var(--ease); }
.feed-new-pill:hover { transform: translateY(-1px); }
.feed-new-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.new-pill-avatars { display: inline-flex; align-items: center; padding-left: 6px; }
.new-pill-avatars .avatar { width: 24px !important; height: 24px !important; margin-left: -6px; box-shadow: 0 0 0 2px var(--accent-fill); font-size: 10px !important; }
.feed-new-pill:hover .new-pill-avatars .avatar { box-shadow: 0 0 0 2px var(--accent-fill-hover); }
.post.is-live { animation: live-in .45s var(--ease), flash-in 2s var(--ease); }
.comment.is-live { animation: live-in .35s var(--ease); }
@keyframes live-in { from { opacity: 0; transform: translateY(-8px); } }
.count.is-bumped { display: inline-block; animation: count-bump .5s var(--ease); }
@keyframes count-bump { 35% { transform: translateY(-3px); color: var(--accent-text); } }
.post-body.is-updated { animation: edit-flash 1.8s var(--ease); border-radius: var(--radius-xs); }
@keyframes edit-flash { from { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); } }
.notification.is-new { animation: live-in .4s var(--ease), flash-in 2s var(--ease); }
.post-gone { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); animation: live-in .3s var(--ease); }
.post-gone > .icon { color: var(--muted); flex-shrink: 0; }
.post-gone > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
    .post.is-live, .comment.is-live, .notification.is-new, .post-gone { animation: flash-in 2s linear; }
    .count.is-bumped, .post-body.is-updated { animation: none; }
}

/* Live pop-ups */
.notif-popups { position: fixed; right: 24px; bottom: 24px; z-index: 190; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.notif-popup { position: relative; pointer-events: auto; overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); animation: popup-in .3s var(--ease); }
.notif-popup .notification { border-bottom: 0; padding-right: 40px; }
.notif-popup .notification.unread { background: transparent; }
.notif-popup .notif-dot { display: none; }
.notif-popup-close { position: absolute; top: 6px; right: 6px; z-index: 3; width: 28px; height: 28px; }
.notif-popup.hide { opacity: 0; transform: translateX(16px); transition: opacity .25s, transform .25s; }
@keyframes popup-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* Bell menu */
.notif-menu .badge-count { border-color: var(--surface); }
.dropdown-menu.notif-dropdown { width: 390px; max-width: calc(100vw - 16px); padding: 0; overflow: hidden; }
.dropdown.open .notif-dropdown, .notif-dropdown.is-floating { display: flex; flex-direction: column; max-height: min(600px, calc(100vh - 76px)); }
.notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 8px 16px; }
.notif-dropdown-head strong { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.notif-dropdown-tabs { display: flex; gap: 6px; padding: 0 16px 10px; border-bottom: 1px solid var(--border); }
.notif-dropdown-tabs button { border: 0; padding: 5px 12px; border-radius: var(--pill); background: var(--surface-2); color: var(--text-2); font-size: 14px; font-weight: 600; }
.notif-dropdown-tabs button:hover { background: var(--surface-3); }
.notif-dropdown-tabs button.active { background: var(--accent-fill); color: var(--accent-ink); }
.notif-dropdown-list { flex: 1; min-height: 140px; overflow-y: auto; overscroll-behavior: contain; }
.notif-dropdown-list .notification:last-child { border-bottom: 0; }
.notif-dropdown-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 140px; padding: 28px 16px; text-align: center; }
.notif-dropdown-foot { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 11px; border-top: 1px solid var(--border); color: var(--accent-text); font-size: 14px; font-weight: 700; }
.notif-dropdown-foot:hover { background: var(--surface-2); text-decoration: none; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 13px; }

/* Settings → Notifications */
.notif-prefs-head { margin: 6px 0 0; align-items: flex-end; }
.notif-prefs-head p { margin-top: 2px; }
.switch-row.is-locked { cursor: default; }
.switch-row.is-locked .switch { opacity: .6; cursor: not-allowed; }
.switch-row strong .badge { margin-left: 6px; vertical-align: 2px; }

@media (max-width: 700px) {
    .notif-popups { left: 12px; right: 12px; width: auto; top: calc(10px + env(safe-area-inset-top)); bottom: auto; }
    .notif-popup.hide { transform: translateY(-12px); }
    .notification { padding: 12px 14px; gap: 10px; }
    .new-pill { top: 60px; }
}

/* ---------- Messages ---------- */
.messenger { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.main:has(.messenger) { padding-bottom: 0; }

/* Conversation list */
.convo-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.convo-tools { display: flex; flex-direction: column; gap: 10px; padding: 2px 12px 12px; border-bottom: 1px solid var(--border); }
.convo-search { padding-top: 0; padding-bottom: 0; height: 40px; }
.convo-folders { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.convo-folders::-webkit-scrollbar { display: none; }
.convo-folder {
    display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
    border: 0; padding: 5px 12px; border-radius: var(--pill); background: var(--surface-2);
    color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.convo-folder:hover { background: var(--surface-3); }
.convo-folder.active { background: var(--text); color: var(--bg); }
.convo-folder .tab-count { background: var(--accent-fill); color: var(--accent-ink); }
.convo-items { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.convo-empty { padding: 28px 20px; text-align: center; }
.convo { position: relative; display: flex; align-items: center; }
.convo:hover, .convo:focus-within { background: var(--surface); }
.convo.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.convo-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 12px 46px 12px 16px; color: var(--text); }
.convo-link:hover { text-decoration: none; }
.convo-avatar { position: relative; flex-shrink: 0; }
.online-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--success); border: 2px solid var(--bg); }
.online-text { color: var(--success-text); font-weight: 600; }
.convo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.convo-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.convo-top .user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-top .time { margin-left: auto; padding-left: 4px; color: var(--muted); font-size: 13px; flex-shrink: 0; }
.convo-flag { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.convo-request { flex-shrink: 0; font-size: 11px; line-height: 15px; padding: 0 6px; }
.convo-preview { display: block; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo.unread .convo-preview { color: var(--text); font-weight: 600; }
.convo.unread .name { font-weight: 800; }
.convo .badge-count { position: static; flex-shrink: 0; border: 0; }
.convo.is-muted .badge-count { background: var(--surface-3); color: var(--text-2); }
.convo-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
.convo-menu { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .12s; }
.convo:hover .convo-menu, .convo:focus-within .convo-menu, .convo-menu.open { opacity: 1; }
.convo-menu > .icon-btn { width: 32px; height: 32px; background: var(--surface-3); }
@media (hover: none) { .convo-menu { opacity: 1; } .convo-menu > .icon-btn { background: transparent; } }
.dropdown-divider { height: 1px; margin: 4px 6px; background: var(--border); }
.menu-group { display: contents; }

/* Thread */
.thread { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100vh; height: 100dvh; }
.thread > .empty-state { margin: auto; }
.thread-head { display: flex; align-items: center; gap: 12px; min-height: 61px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.thread-avatar { position: relative; display: inline-flex; flex-shrink: 0; }
.thread-avatar .online-dot { display: none; }
.thread-avatar.is-online .online-dot { display: block; }
.thread-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.thread-back { display: none; }
.thread-body { position: relative; flex: 1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 10px; }
.thread-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; }
.thread-loader .spinner { width: 18px; height: 18px; border-width: 2px; }
.thread-intro { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 0 26px; margin-bottom: 6px; text-align: center; }
.thread-intro strong { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 18px; }
.thread-intro .btn { margin-top: 8px; }

.msg-day { margin: 18px 0 4px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.msg-day span { padding: 0 10px; background: var(--bg); }
.msg-unread-line { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); }
.msg-unread-line::before, .msg-unread-line::after { content: ''; flex: 1; height: 1px; background: var(--accent); opacity: .45; }

.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 580px); margin-top: 10px; }
.msg.grp-prev { margin-top: 2px; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg-row { display: flex; align-items: center; gap: 2px; max-width: 100%; }
.msg.mine .msg-row { flex-direction: row-reverse; }
.msg-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.msg.mine .msg-content { align-items: flex-end; }
.msg-bubble {
    position: relative; z-index: 1; max-width: 100%;
    padding: 8px 14px; border-radius: 20px 20px 20px 6px; background: var(--surface-2);
    overflow-wrap: anywhere; line-height: 1.4; transition: box-shadow .3s;
}
.msg.theirs.grp-prev .msg-bubble { border-top-left-radius: 6px; }
/* The light page background is close to --surface-2, so incoming bubbles need a deeper grey there. */
[data-theme="light"] .msg.theirs .msg-bubble:not(.is-photo):not(.is-jumbo):not(.msg-tombstone),
[data-theme="light"] .typing-dots { background: var(--surface-3); }
.msg.mine .msg-bubble { border-radius: 20px 20px 6px 20px; background: var(--accent-fill); color: var(--accent-ink); }
.msg.mine.grp-prev .msg-bubble { border-top-right-radius: 6px; }
.msg.mine .msg-text a { color: var(--accent-ink); text-decoration: underline; }
.msg-photo { display: block; margin: -2px -8px 6px; }
.msg-photo img { max-width: 100%; max-height: 320px; border-radius: 14px; }
.msg-bubble.is-photo { padding: 0; background: none !important; }
.msg-bubble.is-photo .msg-photo { margin: 0; }
.msg-bubble.is-jumbo { padding: 0 2px; background: none !important; font-size: 40px; line-height: 1.15; color: inherit !important; }
.msg-tombstone {
    display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-style: italic;
    background: transparent !important; color: var(--muted) !important; box-shadow: inset 0 0 0 1px var(--border-strong);
}
.msg.is-highlight .msg-bubble { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

/* Reply quote above a bubble */
.msg-quote {
    display: flex; flex-direction: column; gap: 1px; max-width: 100%; margin-bottom: -12px; padding: 6px 12px 16px;
    border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
    color: var(--text-2); font-size: 13px; text-align: left;
}
button.msg-quote:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.msg.mine .msg-quote { align-items: flex-end; text-align: right; }
.msg-quote-who { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.msg-quote-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-quote-text.is-gone { font-style: italic; color: var(--muted); }

/* Reactions */
.msg-reactions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; margin: -7px 10px 0; }
.msg-reaction {
    display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px;
    border: 2px solid var(--bg); border-radius: var(--pill); background: var(--surface-3);
    font-size: 12px; font-weight: 700; color: var(--text-2); transition: transform .12s;
}
.msg-reaction:hover { transform: scale(1.08); }
.msg-reaction.on { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-text); }
.msg-reaction-emoji { font-size: 14px; line-height: 1; }

/* Hover tools: react, reply, more */
.msg-tools { display: flex; align-items: center; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-tools, .msg-tools:focus-within, .msg-tools:has(.dropdown.open), .msg.show-tools .msg-tools { opacity: 1; }
.msg-tools .icon-btn { width: 30px; height: 30px; color: var(--muted); }
.msg-tools .icon-btn:hover { color: var(--text); }
.msg.is-deleted .msg-tools, .msg.is-pending .msg-tools { display: none; }
.dropdown-menu.react-menu { flex-direction: row; gap: 2px; min-width: 0; padding: 4px; border-radius: var(--pill); }
.react-item { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; font-size: 22px; transition: transform .12s; }
.react-item:hover, .react-item:focus-visible { transform: scale(1.2); }

/* Time, edited, delivery */
.msg-meta { display: flex; align-items: center; gap: 6px; margin: 3px 8px 0; font-size: 11.5px; color: var(--muted); }
.msg.grp-next .msg-meta { display: none; }
.msg-edited::before { content: '·'; margin-right: 6px; }
.msg-status { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; margin: 2px 8px 0; font-size: 12px; color: var(--muted); }
.msg-status.is-seen { color: var(--info-text); }
/* Pending bubbles say "Sending…" underneath rather than fading, which took the text below 4.5:1. */
.msg.is-pending .msg-meta, .msg.is-failed .msg-meta { display: flex; }
.msg-sending { font-style: italic; }
.msg.is-failed .msg-bubble { opacity: 1; background: var(--danger-soft); color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger); }
.msg-failed { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--danger-text); }
.msg-meta .link-btn { font-size: 12px; }

/* Typing, new-message pill, requests */
.thread-foot { position: relative; }
.thread-new-pill { position: absolute; top: auto; left: 0; right: 0; bottom: calc(100% + 10px); margin: 0 auto; z-index: 5; }
.typing-indicator { display: flex; align-items: center; gap: 8px; padding: 0 20px 8px; font-size: 13px; color: var(--muted); }
.typing-dots { display: inline-flex; gap: 3px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.thread-request { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-top: 1px solid var(--border); background: var(--surface); }
.thread-request p { display: flex; flex-direction: column; gap: 3px; }
.thread-request-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.thread-pending { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.thread-blocked { padding: 18px; text-align: center; border-top: 1px solid var(--border); }

/* Composer */
.thread-form { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.thread-form-row { display: flex; align-items: flex-end; gap: 6px; }
.thread-attach { color: var(--accent); cursor: pointer; }
.thread-input { flex: 1; min-width: 0; padding: 4px 16px; border: 1px solid transparent; border-radius: 22px; background: var(--surface-2); transition: border-color .15s; }
.thread-input:focus-within { border-color: var(--border-strong); }
.thread-form.is-editing .thread-input { border-color: var(--accent); }
.thread-input textarea { width: 100%; max-height: 160px; padding: 7px 0; border: 0; outline: 0; background: transparent; resize: none; font-size: 15px; }
.thread-send:disabled { opacity: .4; cursor: default; background: none; }
.thread-form-hint { display: flex; justify-content: space-between; gap: 10px; padding: 0 14px; font-size: 11.5px; }
.thread-form-hint .over { color: var(--danger-text); font-weight: 700; }
@media (hover: none) { .thread-form-hint > span:first-child { visibility: hidden; } }
.compose-context { display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px 12px; border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface-2); }
.compose-context-icon { display: inline-flex; color: var(--accent); }
.compose-context-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.compose-context-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.compose-context .icon-btn { width: 30px; height: 30px; }
.msg-attach { position: relative; display: inline-block; margin: 8px 0 2px; }
.msg-attach img { height: 80px; border-radius: 10px; }
.msg-attach button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; display: grid; place-items: center; }
.thread-drop {
    position: absolute; inset: 61px 0 0; z-index: 20; margin: 10px; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    border: 2px dashed var(--accent); border-radius: var(--radius); color: var(--accent-text);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
}

/* Message pop-ups (other pages) */
.msg-popup { box-shadow: var(--shadow), inset 3px 0 0 var(--accent); }
.msg-popup-link { display: flex; align-items: center; gap: 12px; padding: 12px 44px 12px 16px; color: var(--text); }
.msg-popup-link:hover { text-decoration: none; background: var(--surface-2); }
.msg-popup-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-popup-top { display: flex; align-items: center; gap: 6px; }
.msg-popup-top .time { margin-left: auto; font-size: 12px; color: var(--muted); }
.msg-popup-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: var(--text-2); }

/* New message picker */
.user-picker { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; max-height: 50vh; overflow-y: auto; }
.user-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); }
.user-pick:hover { background: var(--surface-2); text-decoration: none; }
.user-pick span { display: flex; flex-direction: column; line-height: 1.25; }

/* ---------- Explore ---------- */
.trend-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 16px; border-bottom: 1px solid var(--border); }
.trend-tile { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; }
.trend-tile:hover { text-decoration: none; border-color: var(--accent); }
.trend-rank { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--accent); opacity: .22; position: absolute; right: 10px; top: 6px; }
.trend-tile strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Settings ---------- */
.theme-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-option { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: var(--radius-sm); border: 2px solid var(--border-strong); background: transparent; font-weight: 600; min-width: 120px; }
.theme-option.active { border-color: var(--accent); }
.swatch { width: 90px; height: 54px; border-radius: 8px; border: 1px solid var(--border-strong); }
.swatch-dark { background: linear-gradient(135deg, #0b0c0e 50%, #ff5a1f 50% 60%, #1a1d21 60%); }
.swatch-light { background: linear-gradient(135deg, #ffffff 50%, #e8460c 50% 60%, #f2f3f5 60%); }
.swatch-system { background: linear-gradient(90deg, #0b0c0e 50%, #ffffff 50%); }

/* ---------- Admin ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-tile { position: relative; display: flex; flex-direction: column; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.stat-tile .label { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat-tile strong { font-family: var(--font-display); font-size: 26px; line-height: 1.1; }
.stat-icon { position: absolute; top: 14px; right: 14px; color: var(--accent); }
.admin-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: 16px; }
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar { width: 100%; min-height: 3px; background: var(--accent); border-radius: 4px 4px 0 0; }
.bar-val, .bar-label { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.report-card { padding: 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.report-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.report-details { font-style: italic; color: var(--text-2); }
.report-target { padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 14px; }
.report-target a { color: var(--accent-text); }
.report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report-transcript { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.report-transcript li { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; background: var(--surface); }
.report-transcript li.is-reported { box-shadow: inset 3px 0 0 var(--danger); background: var(--danger-soft); }
.report-transcript-who { font-size: 12px; font-weight: 700; }
.report-transcript-photo img { max-height: 140px; border-radius: 8px; margin: 4px 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--border); }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td .badge { margin: 1px; }
.table-user { display: flex; align-items: center; gap: 10px; }
.table-user > div { display: flex; flex-direction: column; line-height: 1.2; }

/* ---------- Auth ---------- */
.auth-body { min-height: 100vh; }
.auth-shell { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.auth-hero {
    position: relative; overflow: hidden; display: flex; align-items: center;
    padding: 60px clamp(24px, 6vw, 90px);
    background:
        radial-gradient(80% 70% at 100% 0%, rgba(255, 90, 31, .32), transparent 60%),
        radial-gradient(60% 60% at 0% 100%, rgba(255, 154, 61, .16), transparent 60%),
        #0b0c0e;
    color: #eef0f2;
}
.auth-hero-inner { position: relative; z-index: 1; max-width: 560px; }
.auth-hero .brand { padding: 0; color: #fff; }
.auth-hero .brand:hover { background: none; }
.hero-title {
    font-family: var(--font-brand); font-weight: 800; text-transform: uppercase;
    font-size: clamp(48px, 7vw, 92px); line-height: .92; letter-spacing: -.01em; margin: 40px 0 18px;
}
.hero-title em { color: var(--accent-text); font-style: italic; }
.hero-sub { font-size: 18px; color: #b9bfc7; max-width: 470px; }
.hero-features { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.hero-features li { display: flex; gap: 12px; align-items: flex-start; color: #c9ced5; }
.hero-features .icon { color: var(--accent); margin-top: 1px; }
.hero-features strong { color: #fff; }
.hero-road { position: absolute; right: -40px; bottom: -10px; width: 75%; height: 46%; opacity: .5; }
.road-edge { fill: none; stroke: #2a2e34; stroke-width: 70; stroke-linecap: round; }
.road-center { fill: none; stroke: #ff9a3d; stroke-width: 3; stroke-dasharray: 18 16; animation: road 1.4s linear infinite; }
@keyframes road { to { stroke-dashoffset: -34; } }
.auth-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 24px; gap: 14px; background: var(--bg); }
.auth-panel > .alert { width: 100%; max-width: 420px; margin: 0; }
.auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.auth-card h2 { font-family: var(--font-brand); font-size: 40px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.auth-card .form { gap: 14px; margin-top: 6px; }
.auth-switch { text-align: center; color: var(--muted); margin-top: 6px; }
.auth-switch a { color: var(--accent-text); font-weight: 600; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-strong); }
.fine-print { font-size: 12.5px; color: var(--muted); text-align: center; }
.auth-panel .page-head, .auth-panel .empty-state { width: 100%; max-width: 480px; }

/* ---------- Mentions & report radios ---------- */
.mention-pop {
    position: absolute; left: 0; top: 100%; z-index: 70; width: min(320px, 100%);
    padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
}
.mention-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
    border: 0; border-radius: 10px; background: transparent; text-align: left; color: var(--text);
}
.mention-item span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mention-item small { color: var(--muted); }
.mention-item.active, .mention-item:hover { background: var(--surface-2); }
.modal-body .radio-card > span > span:first-child,
.form .radio-card > span > span:first-child {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong);
}
.radio-card input:checked + span > span:first-child { border: 5px solid var(--accent); }
.modal-body .radio-card { margin-top: 6px; }
.modal-body .radio-card > span { padding: 10px 12px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* X's breakpoints: the menu folds to icons under 1265px, the sidebar narrows under 1078px and
   goes under 1002px, leaving the 600px timeline beside the icon menu. */
@media (max-width: 1264px) {
    :root { --left-w: 88px; }
    .sidebar-left { align-items: center; padding-inline: 0; }
    .main-nav { align-items: center; }
    .nav-label, .brand-word, .user-chip-text, .user-chip-more, .btn-post span { display: none; }
    .sidebar-left > .brand { padding: 6px; }
    .sidebar-left .btn-post { width: 52px; padding: 0; }
    .guest-side { align-items: center; }
    .sidebar-user { width: auto; }
    .dropdown.dropup .dropdown-menu { width: auto; }
}
@media (max-width: 1077px) {
    :root { --right-w: 290px; }
}
@media (max-width: 1080px) {
    .admin-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1001px) {
    .app-shell { grid-template-columns: var(--left-w) minmax(0, var(--main-w)); }
    /* Wide pages (messages, marketplace, maps) keep the room the sidebar leaves. */
    .app-shell:has(> .main.wide):not(:has(.fuel-app)) { grid-template-columns: var(--left-w) minmax(0, calc(var(--main-w) + var(--gap-w) + var(--right-w) + var(--edge-w))); }
    .sidebar-right { display: none; }
    .main.wide { grid-column: 2; }
    .listing-layout, .route-layout { grid-template-columns: minmax(0, 1fr); }
    .messenger { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 900px) and (min-width: 761px) {
    .messenger { grid-template-columns: 264px minmax(0, 1fr); }
    .msg { max-width: 86%; }
}
@media (max-width: 760px) {
    .messenger { grid-template-columns: minmax(0, 1fr); }
    .convo-list { border-right: 0; }
    .messenger.has-thread .convo-list { display: none; }
    .messenger:not(.has-thread) .thread { display: none; }
    .thread-back { display: inline-grid; }
    .thread-head { gap: 8px; padding: 8px 10px; }
    .thread-profile { display: none; }
    .thread-body { padding: 10px 10px 8px; }
    .msg { max-width: 88%; }
    .thread-new-pill { bottom: calc(100% + 6px); }
}
@media (max-width: 700px) {
    body { font-size: 15px; }
    .app-shell { display: block; }
    .main { border: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .main:has(.messenger) { padding-bottom: 0; }
    .topbar-mobile {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 30; height: calc(56px + var(--safe-top)); padding: var(--safe-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
        background: var(--overlay); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--border);
    }
    .page-head.sticky { top: calc(56px + var(--safe-top)); }
    .topbar-mobile .brand-word { display: inline; }
    .topbar-mobile .brand { padding: 6px 10px; }
    .sidebar-left {
        position: fixed; z-index: 90; top: 0; left: 0; width: min(290px, 85vw); height: 100%;
        background: var(--bg); align-items: stretch;
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        overscroll-behavior: contain;
        transform: translateX(-100%); transition: transform .25s var(--ease);
        box-shadow: 0 0 40px rgba(0, 0, 0, .5);
    }
    .sidebar-left.open { transform: none; }
    .sidebar-left .nav-label, .sidebar-left .brand-word, .sidebar-left .user-chip-text { display: inline; }
    .sidebar-left .user-chip-text { display: flex; }
    .sidebar-left > .brand { padding: 6px 12px; }
    .sidebar-left .main-nav, .sidebar-left .guest-side { align-items: flex-start; }
    .sidebar-left .sidebar-user { width: 100%; }
    .sidebar-left .nav-link { margin: 2px 0; padding: 10px 14px; }
    .sidebar-left .btn-post { display: none; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .5); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .bottom-nav {
        display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
        height: calc(62px + env(safe-area-inset-bottom));
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--overlay); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--border); justify-content: space-around; align-items: center;
    }
    .bottom-nav a { color: var(--muted); padding: 10px 14px; }
    .bottom-nav a.active { color: var(--text); }
    .bottom-nav .badge-count { border-color: var(--surface); }
    .bottom-post {
        width: 48px; height: 48px; border-radius: 16px; border: 0; display: grid; place-items: center;
        background: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(255, 90, 31, .4);
    }
    .modal { padding: 0; align-items: stretch; }
    .modal-dialog { max-height: 100%; height: 100%; max-width: none; border-radius: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
    .form-row, .form-row-3, .form-row-4 { grid-template-columns: 1fr; }
    .composer textarea { font-size: 17px; }
    .post-body { font-size: 15px; }
    .cover-lg { height: 140px; }
    .profile-avatar { margin-top: -46px; }
    .profile-avatar .avatar { width: 92px !important; height: 92px !important; }
    .route-stats { grid-template-columns: repeat(2, 1fr); }
    .card-grid, .card-grid-3, .garage-grid { grid-template-columns: 1fr; }
    .listing-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .map-tall { height: 340px; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-hero { padding: 36px 24px 44px; }
    .hero-title { margin: 24px 0 12px; }
    .hero-features { display: none; }
    .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 24px); }
    .toast { text-align: center; }
    .page-head .head-actions .btn span { display: none; }
    .page-head .head-actions .btn:has(> span) { width: 34px; padding: 0; }
    .ride-hero-body { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ride-hero-body > div:not(.date-block) { padding-top: 0; }
    .messenger, .thread { height: calc(100vh - 56px - 62px); height: calc(100dvh - 56px - 62px - env(safe-area-inset-bottom) - var(--safe-top)); }
    /* The bottom nav already sits over the home-indicator area. */
    .thread-form { padding-bottom: 8px; }
    .lightbox-close { top: max(16px, env(safe-area-inset-top)); }
}
/* Short screens (landscape phones, small laptop windows): tighter sidebar, and a visible scrollbar
   so it's clear the account menu at the bottom can be scrolled to. */
@media (max-height: 640px) {
    .sidebar-left { gap: 2px; padding-top: 4px; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
    .sidebar-left::-webkit-scrollbar { display: block; width: 4px; }
    .sidebar-left::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
    .sidebar-left > .brand { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
    .sidebar-left .nav-link { margin: 1px 0; padding-top: 7px; padding-bottom: 7px; }
    .sidebar-left .btn-post { height: 46px; margin: 8px 0; }
    .sidebar-user { padding: 4px 0; }
}
/* Laptop-height windows: X's menu rows are 56px tall; trim the spacing so the account menu still fits. */
@media (max-height: 860px) and (min-height: 641px) and (min-width: 701px) {
    .sidebar-left .nav-link { margin: 1px 0; }
    .sidebar-left .btn-post { margin: 12px 0; }
    .sidebar-user { padding: 6px 0; }
}
/* Landscape phones (notch on the side) and anything else with side insets. */
.app-shell, .admin-shell { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* iOS Safari zooms the page into any field under 16px when it's focused. */
@media (pointer: coarse) {
    .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea,
    .toolbar select, .price-range input, .search-box input, .thread-input textarea,
    .extra-field input, .extra-field select, textarea.mono, .modal-body input:not([type=checkbox]):not([type=radio]):not([type=file]),
    .modal-body select, .modal-body textarea { font-size: max(16px, 1em); }
    /* Touch-sized menu rows (Apple HIG 44pt minimum touch target). */
    .dropdown-item:not(.react-item), .admin-nav-link { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Admin panel
   ========================================================================== */
.admin-body { background: var(--bg); }
.admin-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.admin-side {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    display: flex; flex-direction: column; gap: 6px; padding: calc(14px + var(--safe-top)) 12px 16px;
    background: var(--surface); border-right: 1px solid var(--border);
}
.admin-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 8px; }
.admin-brand .brand { padding: 6px 8px; }
.admin-brand .brand-word { font-size: 21px; display: inline; }
.admin-pill {
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-text);
}
.admin-nav { display: flex; flex-direction: column; gap: 14px; }
.admin-nav-group { display: flex; flex-direction: column; gap: 1px; }
.admin-nav-label { padding: 4px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.admin-nav-link {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 500; color: var(--text-2); transition: background .12s, color .12s;
}
.admin-nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.admin-nav-link.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.admin-nav-link span:first-of-type { flex: 1; min-width: 0; }
.admin-nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--accent-fill); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.admin-nav-off { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--border-strong); border-radius: var(--pill); padding: 0 6px; }
.admin-side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }

.admin-main { min-width: 0; display: flex; flex-direction: column; }
.admin-top {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
    height: calc(60px + var(--safe-top)); padding: var(--safe-top) 24px 0; background: var(--overlay);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border);
}
.admin-menu-btn { display: none; }
.admin-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.admin-crumbs a { color: var(--muted); padding-block: 2px; }
.admin-crumbs a:hover { color: var(--text); }
.admin-crumbs span { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.admin-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.admin-top-actions .badge:hover { text-decoration: none; }
.admin-user { border: 0; background: none; padding: 2px; border-radius: 50%; display: inline-flex; }
.admin-user:hover { box-shadow: 0 0 0 3px var(--surface-3); }
.dropdown-head { display: flex; flex-direction: column; padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }

.admin-content { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 24px 64px; display: flex; flex-direction: column; gap: 18px; }
.admin-content > .alert { margin: 0; }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.admin-head p { margin-top: 2px; }
.admin-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-note { margin-top: -8px; }
.admin-note a { color: var(--accent-text); }
.admin-count { margin-bottom: -10px; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; min-width: 0; }
.panel-flush { padding: 0; overflow: hidden; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel p { overflow-wrap: break-word; }
.panel-head h2 { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.panel-head a { color: var(--accent-text); }
.panel-head.pad, .pad { padding: 16px 18px; margin: 0; }
.panel-empty { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; padding: 6px 0; }
.panel-empty .icon { color: var(--success); }
.panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.panel-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); min-width: 0; }
.panel-list li:first-child { border-top: 0; }
.panel-list li > div { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.panel-list li > div > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin: 0 4px; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.danger-panel { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.danger-panel .panel-head h2 { color: var(--danger-text); }
.danger-panel p { margin-bottom: 12px; }

.admin-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.admin-grid-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }

.admin-alerts { display: flex; flex-direction: column; gap: 8px; }
.admin-alert { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; border: 1px solid transparent; }
.admin-alert > span { flex: 1; }
.admin-alert .btn { flex-shrink: 0; }
.tone-info { background: var(--info-soft); color: var(--info-text); }
.tone-warn { background: var(--warn-soft); color: var(--warn-text); }
.tone-danger { background: var(--danger-soft); color: var(--danger-text); }
.tone-success { background: var(--success-soft); color: var(--success-text); }
.admin-alert .btn-outline { color: inherit; border-color: currentColor; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi {
    position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
    transition: border-color .15s, transform .15s;
}
a.kpi:hover { text-decoration: none; border-color: var(--border-strong); transform: translateY(-1px); }
.kpi-icon { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi strong { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 700; }
.kpi-sub { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trend { font-size: 12px; font-weight: 700; padding: 0 6px; border-radius: var(--pill); }
.trend.up { background: var(--success-soft); color: var(--success-text); }
.trend.down { background: var(--danger-soft); color: var(--danger-text); }

.mini-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.mini-stat {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill);
    background: var(--surface); border: 1px solid var(--border); font-size: 14px; color: var(--text-2);
}
a.mini-stat:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.mini-stat .icon { color: var(--accent); }
.mini-stat strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* Switched-off features read as greyed out by colour, not opacity, so the text still meets 4.5:1. */
.mini-stat.is-off, .mini-stat.is-off strong, .mini-stat.is-off .icon { color: var(--muted); }

.admin-tabs { border-bottom: 1px solid var(--border); margin-bottom: -6px; }
.tab-count { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: var(--pill); background: var(--surface-3); font-size: 12px; font-weight: 700; color: var(--text-2); }
.admin-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-chips .filter-chip { padding: 5px 13px; }
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-toolbar .search-box { flex: 1 1 260px; height: 40px; }
.admin-toolbar select {
    height: 40px; padding: 0 30px 0 14px; border-radius: var(--pill); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text); font-size: 14px; max-width: 100%;
}
@media (pointer: coarse) { .admin-toolbar select { font-size: 16px; } } /* after the rule above, or it loses: no iOS focus zoom */

.admin-table th { white-space: nowrap; }
.admin-table td { padding: 10px 14px; }
.admin-table th.num, .admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table td.actions { text-align: right; white-space: nowrap; width: 1%; }
.admin-table td.actions .icon-btn, .admin-table td.actions .dropdown { vertical-align: middle; }
.admin-table tbody tr { transition: background .12s, opacity .25s; }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-table tbody tr.is-selected { background: var(--accent-soft); }
/* Inactive rows (expired, retracted, past): muted text and neutral badges instead of opacity, which took text below 4.5:1. */
.admin-table tr.is-dim td, .admin-table tr.is-dim td :is(a:not(.btn), strong, .user-name, .cell-sub, .muted) { color: var(--muted); }
.admin-table tr.is-dim .badge { background: var(--surface-3); color: var(--text-2); }
.admin-table tr.is-dim td img { opacity: .65; }
.panel-flush .table-wrap { border: 0; border-radius: 0; }
.check-col { width: 36px; padding-right: 0 !important; }
.check-col input { width: 16px; height: 16px; accent-color: var(--accent); vertical-align: middle; }
.cell-content { min-width: 260px; max-width: 460px; }
.cell-content p { overflow-wrap: anywhere; }
.cell-clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.cell-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.content-cell { display: flex; gap: 12px; align-items: flex-start; }
.content-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--surface-3); }
.content-thumb.placeholder { display: grid; place-items: center; color: var(--muted); }
.table-user { color: var(--text); }
a.table-user:hover { text-decoration: none; }
a.table-user:hover strong { text-decoration: underline; }
.table-user strong { display: inline-flex; align-items: center; gap: 3px; }
.nowrap { white-space: nowrap; }
.block { display: block; }
.is-removing { opacity: 0 !important; transition: opacity .25s; }

.bulk-bar {
    position: sticky; top: calc(60px + var(--safe-top)); z-index: 5; display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: 14px;
}
.bulk-bar > span { margin-right: auto; }

.report-card { margin: 0; transition: opacity .25s; }
.report-links { display: flex; gap: 14px; margin-top: 6px; }
.report-links a { color: var(--accent-text); }

.user-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.user-hero-info { flex: 1; min-width: 220px; }
.user-hero-info h1 { font-family: var(--font-display); font-size: 23px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.user-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.user-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); transition: opacity .25s; }
.row-main { flex: 1; min-width: 0; }
.row-main p { overflow-wrap: anywhere; }
.row-actions { display: flex; gap: 2px; }

.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-nav { position: sticky; top: calc(78px + var(--safe-top)); display: flex; flex-direction: column; gap: 2px; }
.settings-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; }
.settings-nav-link span:first-of-type { flex: 1; }
.settings-nav-link:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.settings-nav-link.active { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.settings-form { gap: 18px; max-width: 760px; }
.settings-form .panel-head { margin-bottom: 0; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.settings-form .panel-head p { margin-top: 2px; }
.field-help { font-size: 13px; color: var(--muted); }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
}
.switch-row:hover { border-color: var(--border-strong); }
.switch-text { display: flex; align-items: center; gap: 12px; min-width: 0; }
.switch-text > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.switch-text small { font-size: 13px; }
.switch-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.switch {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; cursor: pointer;
    width: 44px; height: 26px; margin: 0; border-radius: var(--pill); background: var(--surface-3);
    border: 1px solid var(--border-strong); transition: background .15s, border-color .15s;
}
.switch::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .18s var(--ease);
}
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kv-table th, .kv-table td { padding: 8px 0; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.kv-table tr:first-child th, .kv-table tr:first-child td { border-top: 0; }
.kv-table th { font-weight: 600; color: var(--text-2); padding-right: 14px; width: 42%; }
.kv-table td { overflow-wrap: anywhere; }
.kv-status { text-align: right !important; white-space: nowrap; padding-left: 10px !important; }
.status-ok, .status-bad { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.status-ok { color: var(--success-text); }
.status-bad { color: var(--warn-text); }
.tool-list { display: flex; flex-direction: column; }
.tool { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.tool:first-child { border-top: 0; padding-top: 0; }
.log-action { font-weight: 600; font-size: 14px; }
.log-user { color: var(--info-text); }
.log-report { color: var(--warn-text); }
.log-content { color: var(--danger-text); }
.log-settings { color: var(--accent-text); }

/* Announcement banner (main app) */
.announcement { display: flex; align-items: flex-start; gap: 10px; margin: 12px 16px 0; padding: 12px 10px 12px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; }
.announcement > .icon { margin-top: 1px; }
.announcement-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.announcement-body a { text-decoration: underline; }
.announcement .icon-btn { width: 28px; height: 28px; margin: -4px 0; color: inherit; }
.announcement .icon-btn:hover { background: rgba(127, 127, 127, .15); color: inherit; }
.settings-form .announcement { margin: 0; }

/* Maintenance page */
.maintenance-body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.maintenance { max-width: 480px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.maintenance h1 { font-family: var(--font-display); font-size: 31px; font-weight: 700; }
.maintenance p { color: var(--text-2); font-size: 17px; }
.maintenance a { color: var(--accent-text); }
.maintenance-icon { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-top: 18px; }
.maintenance .maintenance-login { margin-top: 18px; color: var(--muted); }

@media (max-width: 1180px) {
    .admin-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-grid-3 > :last-child { grid-column: 1 / -1; }
    .admin-grid-main { grid-template-columns: 1fr; }
    .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .admin-shell { display: block; }
    .admin-side {
        position: fixed; z-index: 90; top: 0; left: 0; width: min(280px, 85vw); height: 100%;
        padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left));
        transform: translateX(-100%); transition: transform .25s var(--ease), box-shadow .25s;
    }
    .admin-side.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .5); }
    .admin-body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .5); }
    .admin-menu-btn { display: inline-grid; margin-left: -8px; }
    .admin-top { padding: var(--safe-top) 16px 0; }
    .admin-content { padding: 18px 16px 48px; }
    .admin-grid-2, .admin-grid-3 { grid-template-columns: 1fr; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
    .settings-nav-link { flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--pill); padding: 7px 14px; }
    .settings-nav-link.active { box-shadow: none; border-color: var(--accent); color: var(--accent-text); }
}
@media (max-width: 480px) {
    /* Only room for where you are: show the current page, not the trail. */
    .admin-crumbs > :not(:last-child) { display: none; }
    .admin-top { gap: 8px; }
    .admin-top-actions { gap: 2px; }
}
@media (max-width: 600px) {
    .admin-top-actions .btn span { display: none; }
    .admin-head h1 { font-size: 27px; }
    .kpi-grid, .kpi-grid-4, .kpi-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi { padding: 14px; }
    .kpi strong { font-size: 27px; }
    .kpi-icon { display: none; }
    .admin-alert { flex-wrap: wrap; }
    .switch-row { padding: 12px; }
    .tool { flex-direction: column; align-items: flex-start; }
    .user-hero { align-items: flex-start; }
    .announcement { margin: 10px 12px 0; }
}

/* ======================================================================
   Trust & safety: privacy settings, blocks, warnings, suspensions, admin moderation
   ====================================================================== */
.private-lock { display: inline-flex; color: var(--muted); margin-left: 3px; vertical-align: -1px; }
.follow-btn.is-requested { color: var(--muted); }
.follow-btn.is-requested:hover { border-color: var(--danger); color: var(--danger-text); background: var(--danger-soft); }

/* Settings → Privacy */
.privacy-form .form-section + .switch-row, .privacy-form .form-section + .privacy-choice { margin-top: -4px; }
.privacy-choice { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.privacy-choice .switch-text small { font-size: 13px; }
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); flex-wrap: wrap; }
.segmented label { flex: 1 1 0; min-width: max-content; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-xs); font-size: 14px; font-weight: 600; color: var(--text-2); text-align: center; transition: background .15s, color .15s; }
.segmented label:hover span { color: var(--text); }
.segmented input:checked + span { background: var(--surface); color: var(--accent-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px var(--border-strong); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmented-block { width: 100%; }
.settings-empty { display: flex; align-items: center; gap: 8px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.form-section .muted.small { font-family: var(--font); font-weight: 600; margin-left: 4px; }

/* Replies limited / messaging blocked */
.reply-limited { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 14px; background: var(--surface-2); }
.thread-blocked { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Notifications: follow requests banner */
.request-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
.request-banner:hover { background: var(--surface-2); }
.request-banner .notif-icon { margin-top: 0; background: var(--accent-soft); color: var(--accent); }
.request-banner > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.request-banner > .icon { color: var(--muted); }

/* Moderator warning shown to the rider */
.mod-warning { margin: 12px 16px 0; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border)); background: var(--warn-soft); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; transition: opacity .25s; }
.mod-warning-head { display: flex; align-items: center; gap: 8px; color: var(--warn-text); width: 100%; }
.mod-warning-head .muted { margin-left: auto; }
.mod-warning-reason { font-weight: 600; font-size: 14px; }
.mod-warning p { font-size: 14px; overflow-wrap: anywhere; }
.mod-warning .btn { margin-top: 4px; }

/* Suspension / restricted network pages */
.suspended-card { display: flex; flex-direction: column; gap: 14px; }
.suspended-icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }
.suspension-facts { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.suspension-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 14px; }
.suspension-facts div:first-child { border-top: 0; }
.suspension-facts dt { color: var(--muted); font-weight: 600; }
.moderator-note { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--accent); }
.moderator-note p { margin-top: 6px; font-size: 14px; overflow-wrap: anywhere; }
.appeal-status { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; }
.appeal-status strong { display: flex; align-items: center; gap: 6px; }
.appeal-status p { margin-top: 4px; }
.appeal-open strong { color: var(--info-text); }
.appeal-upheld strong { color: var(--danger-text); }
.appeal-overturned strong { color: var(--success-text); }
.appeal-form { margin: 0; }

/* Admin: sanction dialog */
.sanction-form .sanction-target { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; }
.sanction-types { display: grid; gap: 6px; }
.sanction-types .radio-card { margin: 0; }
.sanction-types .radio-card > span { grid-template-columns: 30px 1fr; padding: 10px 12px; }
.sanction-types .radio-card > span > .sanction-type-icon,
.sanction-types .radio-card input:checked + span > .sanction-type-icon { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; border: 0; display: grid; place-items: center; }
.sanction-types .radio-card input:checked + span { box-shadow: inset 0 0 0 1px var(--accent); }
.sanction-form [hidden] { display: none !important; }

/* Admin: rider moderation panel */
.moderation-panel { display: flex; flex-direction: column; gap: 14px; }
.moderation-panel .panel-head { margin-bottom: 0; }
.moderation-panel .table-wrap { margin: 0 -18px -18px; border-top: 1px solid var(--border); }
.standing { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); flex-wrap: wrap; }
.standing > div:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 180px; line-height: 1.35; }
.standing > div:nth-child(2) .small { color: var(--text-2); }
.standing-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, currentColor 16%, transparent); flex-shrink: 0; }
.standing-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.standing-actions .btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.cell-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub.note { display: flex; align-items: center; gap: 4px; }
.text-danger { color: var(--danger-text); }
.kv-list { display: flex; flex-direction: column; font-size: 14px; }
.kv-list div { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.kv-list div:first-child { border-top: 0; padding-top: 0; }
.kv-list dt { color: var(--muted); font-weight: 600; }
.kv-list dd { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.signal { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); line-height: 1.25; }
.signal strong { font-family: var(--font-display); font-size: 23px; font-weight: 700; }
.signal span { font-size: 13px; color: var(--muted); font-weight: 600; }
.signal em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.signal.is-hot { background: var(--danger-soft); }
.signal.is-hot strong, .signal.is-hot em { color: var(--danger-text); }
.panel-sub { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 4px; }
.admin-section-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-top: 8px; }
.panel-head .admin-chips { margin: 0; }
.log-sanction { color: var(--danger-text); }
.log-appeal { color: var(--info-text); }
.log-banlist { color: var(--warn-text); }

/* Admin: appeals */
.appeal-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.appeal-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
.appeal-message { margin: 6px 0 0; padding: 12px 14px; border-left: 3px solid var(--info); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 15px; overflow-wrap: anywhere; }
.appeal-decision { border-top: 1px solid var(--border); padding-top: 14px; margin: 0; }
.appeal-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.appeal-outcome p { width: 100%; font-size: 14px; }

@media (max-width: 900px) {
    .appeal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .segmented { flex-direction: column; }
    .segmented label { min-width: 0; }
    .signal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .signal { padding: 8px; }
    .signal strong { font-size: 22px; }
    .mod-warning { margin: 10px 12px 0; }
    .suspension-facts div { grid-template-columns: 80px 1fr; }
}

/* ======================================================================
   Advertising: house ads, AdSense units, admin ad screens
   ====================================================================== */
.ad-unit { position: relative; }
.ad-badge, .ad-label {
    display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); padding: 1px 7px; border: 1px solid var(--border-strong); border-radius: var(--pill); line-height: 1.5; flex-shrink: 0;
}
.ad-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; display: block; background: var(--surface-3); }
.ad-logo-letter {
    display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 17px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
}
.ad-text { font-size: 15px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.ad-image, .ad-banner { display: block; margin-top: 10px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.ad-image img { width: 100%; aspect-ratio: 1200 / 628; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.ad-banner img { width: 100%; height: auto; display: block; }
.ad-image:hover img { transform: scale(1.015); }

/* Native: feed + post page */
.ad-native { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ad-native-grid { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
.ad-avatar { display: block; }
.ad-avatar:hover { text-decoration: none; }
.ad-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.ad-who { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.ad-advertiser { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-head .dropdown { margin: -6px -8px 0 auto; }
.ad-head .icon-btn { width: 32px; height: 32px; }
.ad-cta-bar {
    display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.ad-image + .ad-cta-bar { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.ad-unit .ad-image:has(+ .ad-cta-bar) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ad-cta-bar:hover { text-decoration: none; background: var(--surface-2); }
.ad-cta-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.ad-cta-text small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-cta-text strong { font-size: 15px; overflow-wrap: anywhere; }
.ad-cta-bar .btn { flex-shrink: 0; pointer-events: none; }
.ad-pl-post_detail.ad-native { border-top: 0; }

/* Sidebar */
.ad-side { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ad-side-head { display: flex; align-items: center; justify-content: space-between; margin: -2px -6px -2px 0; }
.ad-side-head .icon-btn { width: 30px; height: 30px; }
.ad-side .ad-image, .ad-side .ad-banner { margin-top: 0; border-radius: var(--radius-sm); }
.ad-side-body { display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.ad-side-body:hover { text-decoration: none; }
.ad-side-body:hover strong { text-decoration: underline; }
.ad-side-body strong { font-size: 16px; line-height: 1.3; }
.ad-side-body .ad-text { font-size: 14px; color: var(--text-2); }
.ad-side-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ad-side-brand .ad-logo { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }
.side-sticky { position: sticky; bottom: 0; z-index: 4; box-shadow: 0 16px 0 var(--bg); }
.side-footer a { color: var(--muted); }
.side-footer a:hover { color: var(--text); }

/* Marketplace */
.ad-market { display: flex; flex-direction: column; }
.ad-market .listing-img { display: block; }
.ad-ribbon { position: absolute; top: 10px; left: 10px; padding: 2px 9px; border-radius: var(--pill); background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ad-market .listing-card-body { position: relative; flex: 1; }
.ad-market-text { display: block; color: var(--text); padding-right: 22px; }
.ad-market-text:hover { text-decoration: none; }
.ad-market-brand { font-size: 13px; font-weight: 700; color: var(--accent-text); }
.ad-market-menu { position: absolute; top: 6px; right: 4px; }
.ad-market-menu .icon-btn { width: 30px; height: 30px; }

/* Google AdSense */
.ad-adsense { padding: 10px 16px 14px; border-bottom: 1px solid var(--border); }
.ad-adsense .ad-label { margin-bottom: 8px; border: 0; padding: 0; }
.ad-adsense.side-card, .ad-adsense.card { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-adsense:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* Admin helpers on the live site */
.ad-outline {
    display: flex; flex-direction: column; gap: 3px; margin: 10px 16px; padding: 12px 14px; font-size: 13px; color: var(--muted);
    border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border-strong)); border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}
.ad-outline strong { display: flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: 13px; }
.ad-outline a { color: var(--accent-text); font-weight: 600; align-self: flex-start; }
.sidebar-right .ad-outline, .listing-grid .ad-outline { margin: 0; }
.ad-hidden-note { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.ad-hidden-note.side-card, .ad-hidden-note.card { padding: 14px; border: 1px dashed var(--border-strong); }
.ad-hidden-note a { color: var(--accent-text); }

/* About ads page */
.about-ads-text { line-height: 1.6; color: var(--text-2); }
.about-ads-text a { color: var(--accent-text); }
.about-ads .section-title { padding-left: 0; padding-right: 0; margin-top: 10px; }
.about-ads-sub { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
.about-ads .hidden-ads { margin: 0 -16px; border-bottom: 1px solid var(--border); }
.ad-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--success-soft); color: var(--success-text); font-size: 14px; }
.auth-card.about-ads { display: flex; flex-direction: column; gap: 18px; }

/* Admin: advertising screens */
.ads-tabs .tab { display: inline-flex; align-items: center; gap: 4px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 2px; }
.status-dot.on { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.status-dot.off { background: var(--border-strong); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 5px; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }
.meter { height: 6px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; margin-top: 4px; min-width: 70px; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.meter-lg { height: 9px; margin-top: 6px; }
.pacing { display: flex; flex-direction: column; gap: 14px; }
.pacing-label { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; }
.placement-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.placement-icon.is-off { background: var(--surface-3); color: var(--muted); }
.text-warn { color: var(--warn-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.text-warn a { color: inherit; text-decoration: underline; }

.ad-editor .panel-head { margin-bottom: 0; }
.ad-editor-actions { position: sticky; bottom: 0; z-index: 6; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.ad-formats { grid-template-columns: 1fr 1fr; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check-card { display: block; cursor: pointer; }
.check-card input { position: absolute; opacity: 0; }
.check-card > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 11px 13px 11px 40px; position: relative; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color .15s, background .15s; }
.check-card > span::before { content: ''; position: absolute; left: 13px; top: 13px; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--border-strong); background: var(--surface); }
.check-card input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.check-card input:checked + span::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.check-card input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.check-card strong { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.check-card small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.check-card small.text-danger { color: var(--danger-text); }
.chip-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-checks label { cursor: pointer; }
.chip-checks input { position: absolute; opacity: 0; }
.chip-checks span { display: inline-block; padding: 6px 13px; border-radius: var(--pill); border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background .15s, color .15s, border-color .15s; }
.chip-checks input:checked + span { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.chip-checks input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row input[type=range] { flex: 1; accent-color: var(--accent); height: auto !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
.range-row output { min-width: 28px; text-align: center; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.ad-image-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ad-image-field > div { display: flex; flex-direction: column; gap: 8px; }
.ad-image-current { width: 150px; aspect-ratio: 1200 / 628; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); }
.ad-image-field .ad-logo { width: 48px; height: 48px; }

.ad-preview-col { position: sticky; top: calc(78px + var(--safe-top)); }
.ad-preview-panel { display: flex; flex-direction: column; gap: 12px; }
.ad-preview { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.ad-preview > p { padding: 16px; }
.ad-preview[data-placement="sidebar_top"], .ad-preview[data-placement="sidebar_bottom"] { padding: 12px; }
.ad-preview[data-placement="sidebar_top"] .side-card, .ad-preview[data-placement="sidebar_bottom"] .side-card { max-width: 350px; margin: 0 auto; }
.ad-preview[data-placement="market"] { padding: 12px; }
.ad-preview[data-placement="market"] .listing-card { max-width: 250px; margin: 0 auto; }
.ad-preview .ad-native { border-bottom: 0; }
.ad-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 12px; align-items: start; }
.ad-preview-item { display: flex; flex-direction: column; gap: 6px; }
.ad-preview-item .panel-sub { margin: 0; }

.placement-map { display: grid; grid-template-columns: 1fr 3fr 1.6fr; gap: 10px; max-width: 640px; margin: 4px auto 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); }
.placement-map > div { display: flex; flex-direction: column; gap: 7px; }
.pm-nav span { height: 10px; border-radius: 4px; background: var(--surface-3); }
.pm-post { height: 34px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.pm-post.short { height: 22px; }
.pm-search { height: 14px; border-radius: var(--pill); background: var(--surface-3); }
.pm-card { height: 40px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.pm-card.short { height: 26px; }
.pm-slot { display: grid; place-items: center; min-height: 34px; padding: 4px; border-radius: 6px; border: 2px dashed var(--accent); background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700; text-align: center; }
.pm-slot.sticky { margin-top: auto; }
.pm-slot.is-off { border-color: var(--border-strong); background: transparent; color: var(--muted); text-decoration: line-through; }
.placement-panel .panel-head { align-items: flex-start; }
.placement-title { min-width: 0; }
.placement-title { display: flex; gap: 12px; align-items: flex-start; }
.placement-title h2 { line-height: 1.2; }
.placement-title p { margin-top: 2px; max-width: 560px; }

.setup-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.setup-steps strong { color: var(--text); }
.setup-steps a { color: var(--accent-text); }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.check-list li:first-child { border-top: 0; padding-top: 0; }
.check-list li > div { display: flex; flex-direction: column; gap: 2px; }
.check-list .is-ok > .icon { color: var(--success); margin-top: 2px; flex-shrink: 0; }
.check-list .is-todo > .icon { color: var(--warn); margin-top: 2px; flex-shrink: 0; }
.check-list a { color: var(--accent-text); }
.code-block { margin: 6px 0 10px; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--bg); border: 1px solid var(--border); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }

@media (max-width: 1180px) {
    .ad-preview-col { position: static; }
}
@media (max-width: 600px) {
    .check-grid, .ad-formats { grid-template-columns: 1fr; }
    .placement-map { grid-template-columns: 0 3fr 1.6fr; gap: 8px; }
    .pm-nav { display: none !important; }
    .ad-native { padding: 12px; }
    .ad-cta-bar { padding: 9px 10px; }
}

/* ---------- Admin → Notifications ---------- */
.broadcast-form .form-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tone-dot { display: inline-block; width: 10px; height: 10px; margin-right: 2px; border-radius: 50%; background: var(--info); }
.tone-dot.tone-success { background: var(--success); }
.tone-dot.tone-warn { background: var(--warn); }
.tone-dot.tone-danger { background: var(--danger); }
.notif-preview { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.notif-preview .notification { border-bottom: 0; }
.notif-preview .notif-link { pointer-events: none; }
.broadcast-reach { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; font-weight: 600; }
.broadcast-reach .icon { color: var(--accent); flex-shrink: 0; }
.read-meter { height: 8px; margin: 14px 0 6px; overflow: hidden; border-radius: var(--pill); background: var(--surface-3); }
.read-meter span { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.read-meter-sm { width: 90px; height: 6px; margin: 3px 0 4px; }
.auto-notices li { gap: 12px; }
.auto-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--success-soft); color: var(--success); }
.auto-icon.is-off { background: var(--surface-3); color: var(--muted); }
.auto-foot { margin-top: 10px; }
.type-bars { display: flex; flex-direction: column; gap: 7px; }
.type-bars .panel-sub:first-child { margin-top: 0; }
.type-bar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13px; }
.type-bar-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.type-bar-track { height: 8px; overflow: hidden; border-radius: var(--pill); background: var(--surface-3); }
.type-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.type-bar-fill.cat-system { background: var(--info); }
.type-bar-num { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Help & support (rider help centre and Admin → Support desk)
   Uses the shared scale: sections 20px 16px, form gap 16px, row gap 14px,
   cards 18px padding / var(--radius), list rows and notices 12px 14px /
   var(--radius-sm), 36px icon tiles, fields from .field (44px), titles from
   .form-section (21px) and .page-head h1 (25px).
   ========================================================================== */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.btn.is-busy { opacity: .7; cursor: progress; }
.support-icon-tile { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }

/* Sections and cards */
.support-section { padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--border); }
.support-section:last-child { border-bottom: 0; }
.support-section > header { display: flex; flex-direction: column; gap: 4px; }
.support-section > .section-head { margin: 0; flex-wrap: wrap; }
.support-hero { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface); }
.support-hero > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.support-hero p { color: var(--text-2); }
.support-hero-icon { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.support-promise { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted) !important; }
.support-report-tip { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.support-report-tip .icon { flex-shrink: 0; margin-top: 2px; }

/* Lists of requests and quick links */
.support-list, .support-quick { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.support-item, .support-quick-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border); color: var(--text); transition: background .12s; }
.support-item:first-child, .support-quick-link:first-child { border-top: 0; }
.support-item:hover, .support-quick-link:hover { background: var(--surface-2); text-decoration: none; }
.support-quick-link:hover > .icon:last-child { color: var(--text); }
.support-item.is-unread { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.support-item.is-unread::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.support-item .support-icon-tile { background: var(--surface-3); color: var(--text-2); }
.support-item-main, .support-quick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.support-quick-text strong { font-size: 15px; }
.support-item-main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.support-quick-link > .icon:last-child { flex-shrink: 0; color: var(--muted); }

/* Topic cards (help centre) and topic options (new request) */
.support-topics, .support-topic-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.support-topic { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); transition: border-color .15s, background .15s; }
.support-topic:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); }
.support-topic .support-icon-tile { margin-bottom: 6px; }
.support-topic small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.radio-card.support-topic-option { margin: 0; }
.radio-card.support-topic-option > span { grid-template-columns: 36px 1fr; row-gap: 2px; align-items: start; height: 100%; transition: border-color .15s, background .15s; }
.form .radio-card.support-topic-option > span > span.support-icon-tile:first-child,
.radio-card.support-topic-option input:checked + span > span.support-icon-tile:first-child { grid-row: span 2; width: 36px; height: 36px; border: 0; border-radius: 10px; }
.radio-card.support-topic-option strong { font-size: 15px; line-height: 1.3; }
.radio-card.support-topic-option small { line-height: 1.4; }
.radio-card.support-topic-option:hover > span { border-color: var(--text-2); }
.radio-card.support-topic-option input:checked + span { box-shadow: inset 0 0 0 1px var(--accent); }
.radio-card.support-topic-option input:checked + span > .support-icon-tile { background: var(--accent-fill); color: var(--accent-ink); }

/* Notices (same box as .alert) */
.support-note, .support-banner, .support-code, .support-new-pill {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm);
    font-size: 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.support-note { align-items: flex-start; background: var(--info-soft); border-color: transparent; }
.support-note > .icon { flex-shrink: 0; margin-top: 1px; color: var(--info); }
.support-note.tone-danger { background: var(--danger-soft); }
.support-note.tone-danger > .icon { color: var(--danger); }
.support-note a { color: var(--accent-text); font-weight: 600; }
.support-banner > .icon { flex-shrink: 0; }
.support-banner > div { flex: 1; min-width: 0; }
.support-banner.tone-info > .icon { color: var(--info); }
.support-banner.tone-accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.support-banner.tone-accent > .icon { color: var(--accent); }
.support-banner.tone-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.support-banner.tone-success > .icon { color: var(--success); }
.support-banner.tone-muted > .icon { color: var(--muted); }
.support-code { flex-direction: column; align-items: stretch; gap: 10px; background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.support-code-head { display: flex; align-items: center; gap: 10px; }
.support-code-head .icon { color: var(--warn); flex-shrink: 0; }
.support-code-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; }
.support-code-grid > div { display: flex; flex-direction: column; gap: 2px; }
.support-code-grid strong { font-size: 21px; }
.support-code-grid .btn { margin-left: auto; }
.support-new-pill { padding-top: 8px; padding-bottom: 8px; background: var(--info-soft); border-color: transparent; font-weight: 600; }
.support-new-pill > .icon { color: var(--info); flex-shrink: 0; }
.support-new-pill > span { flex: 1; }
.support-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.support-signed-as { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.support-signed-as > div { display: flex; flex-direction: column; line-height: 1.3; }

/* Signed-out pages (inside the auth layout, same card and title as log in) */
.auth-card.support-new-guest, .support-ticket-guest { max-width: 560px; }
.support-guest-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.support-guest-actions { display: flex; flex-direction: column; gap: 10px; }
.support-new-guest .support-topic-picker { grid-template-columns: 1fr; }
.support-ticket-guest { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.support-ticket-guest .page-head { padding: 0; min-height: 0; }
.support-ticket-guest .support-ticket { padding: 0; }
.auth-help { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* A request */
.support-ticket-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.support-ticket-title h1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.support-ticket-head .push-right { flex-shrink: 0; }
.support-ticket { padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.support-thread { display: flex; flex-direction: column; gap: 12px; }
.support-msg { display: flex; gap: 12px; align-items: flex-start; }
.support-msg-avatar { flex-shrink: 0; }
.support-avatar-brand { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); }
.support-msg-main { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 4px var(--radius-sm) var(--radius-sm) var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.support-msg.is-staff .support-msg-main { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.support-msg.is-note .support-msg-main { background: var(--warn-soft); border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); }
.support-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 14px; }
.support-msg-head .handle { font-size: 13px; }
.support-msg-body { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.support-msg-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.support-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.support-file { display: block; width: 132px; height: 96px; overflow: hidden; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--surface-3); }
.support-file img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.support-file:hover img { transform: scale(1.04); }
.support-event { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); text-align: center; }
.support-event::before, .support-event::after { content: ''; flex: 1 1 24px; max-width: 90px; height: 1px; background: var(--border); }
.support-event time::before { content: '·'; margin-right: 6px; }
.support-event.is-internal { font-style: italic; }
.support-reply .form-actions, .support-rate .form-actions { flex-wrap: wrap; }
.support-reply .form-actions .push-left { display: inline-flex; align-items: center; gap: 6px; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { cursor: pointer; color: var(--border-strong); transition: color .12s; }
.star-input label .icon { display: block; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--warn); }
.star-input label:hover .icon, .star-input label:hover ~ label .icon, .star-input input:checked + label .icon, .star-input input:checked ~ label .icon { fill: currentColor; }
.star-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.support-rated { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.support-details { padding: 0; }
.support-details summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; font-weight: 700; list-style: none; }
.support-details summary::-webkit-details-marker { display: none; }
.support-details summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.support-details[open] summary::after { transform: rotate(-135deg); }
.support-details .kv-list { padding: 0 18px 16px; }

/* Support desk */
.support-desk-head h1 { margin-top: 6px; overflow-wrap: anywhere; }
.support-desk-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.support-composer { transition: background .15s, border-color .15s; }
.support-composer.is-note { background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.support-composer .form-row { align-items: end; }
.support-composer .segmented { padding: 3px; }
.support-composer .segmented label span { min-height: 36px; padding: 0 12px; }
.support-composer-note { display: flex; align-items: flex-start; gap: 6px; }
.support-composer-note .icon { flex-shrink: 0; margin-top: 2px; }
.support-composer .form-actions { flex-wrap: wrap; align-items: center; }
.support-requester { margin-bottom: 12px; }
.support-requester .handle { font-size: 13px; }
.support-requester + .cell-tags { margin: -4px 0 12px; }
.support-flow li { align-items: flex-start; }
.support-flow li > div > * { white-space: normal; }
.support-flow .badge { min-width: 118px; }
.support-reply-preview { margin: 2px 0; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-list li.is-editing { background: var(--accent-soft); }
.kpi strong small { font-size: 18px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.kpi.is-alert { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.kpi.is-alert .kpi-icon { background: var(--danger-soft); color: var(--danger); }
.kpi.is-alert strong { color: var(--danger-text); }
.support-kpis .kpi-label { padding-right: 40px; }
.support-queue-subject { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.support-queue-snippet { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 440px; }
.support-you { font-weight: 700; color: var(--accent-text); }
.support-queue tr.is-waiting td:nth-child(2) { box-shadow: inset 3px 0 0 var(--warn); }
.support-queue .cell-tags .icon { vertical-align: -1px; }
.support-agent { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.block-badge { display: table; margin-top: 4px; }
.priority-urgent { font-weight: 700; }

@media (max-width: 600px) {
    .support-hero-icon { display: none; }
    .support-topics, .support-topic-picker { grid-template-columns: 1fr; }
    .support-item-side .support-new-badge { display: none; }
    .support-msg { gap: 8px; }
    .support-msg-avatar .avatar, .support-avatar-brand { width: 30px !important; height: 30px !important; }
    .support-file { width: 104px; height: 78px; }
    .support-kbd { display: none !important; }
    .support-code-grid .btn { margin-left: 0; }
    .support-composer .form-actions .btn { width: 100%; }
    .support-ticket-head .push-right { display: none; }
}

.support-topic-fields .form-row { align-items: end; }
/* A panel that is itself a form already spaces its children with the form gap. */
.panel.form > .panel-head { margin-bottom: 0; }
/* ------------------------------------------------------------------ */
/* Video in posts                                                       */
/* ------------------------------------------------------------------ */
.media-grid .media-video { position: relative; width: 100%; max-height: 560px; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-video.is-portrait { max-height: 620px; }
.media-video video { display: block; width: 100%; height: 100%; max-height: inherit; object-fit: contain; background: #000; }
.video-duration { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--pill); background: rgba(0, 0, 0, .72); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; transition: opacity .2s; }
.media-video.is-started .video-duration { opacity: 0; }
.media-video.is-processing, .media-video.is-failed { background: var(--surface-2); max-height: 380px; min-height: 200px; }
.video-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; text-align: center; color: var(--text-2); }
.video-state strong { font-size: 15px; color: var(--text); }
.video-progress { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.media-video.is-failed .icon { color: var(--danger); }
.video-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: video-spin .8s linear infinite; display: inline-block; flex-shrink: 0; }
.video-spinner.sm { width: 14px; height: 14px; border-width: 2px; }
@keyframes video-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .video-spinner { animation-duration: 2.4s; } }

/* Composer: video preview and upload progress */
.composer-previews .preview-video { grid-column: 1 / -1; aspect-ratio: 16 / 9; background: #000; }
.composer-previews .preview-video video { width: 100%; height: 100%; object-fit: contain; }
.preview-video .preview-video-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; pointer-events: none; }
.preview-video .preview-video-icon svg { margin-left: 3px; }
.preview-video .preview-video-meta { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: var(--pill); background: rgba(0, 0, 0, .72); color: #fff; font-size: 12px; font-weight: 700; }
.preview-video.no-preview video { visibility: hidden; }
.preview-video.no-preview::after { content: 'Preview not available in this browser. It will still be converted.'; position: absolute; inset: auto 12px 40px; color: rgba(255, 255, 255, .8); font-size: 13px; text-align: center; }
.upload-progress { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.upload-progress-bar { flex: 1; height: 6px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.upload-progress-bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .25s var(--ease); }
.upload-progress-text { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Admin: Storage & CDN, Photos & video                                 */
/* ------------------------------------------------------------------ */
.settings-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 760px; }
.settings-main .settings-form { max-width: none; }
.settings-subhead { padding-top: 16px; margin-top: 2px; border-top: 1px solid var(--border); }
.settings-subhead h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.settings-subhead p { margin-top: 2px; }
.field > label:first-child { font-size: 13px; font-weight: 700; color: var(--text-2); letter-spacing: .01em; }
.check-inline { font-size: 13px; color: var(--muted); gap: 8px; }
.check-inline input { width: 15px; height: 15px; }
.storage-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.storage-status-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
.storage-status-item > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.storage-status-item strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-status-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.storage-status-icon.tone-muted { background: var(--surface-2); color: var(--muted); }
.storage-test { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.storage-test.is-ok { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: var(--success-soft); }
.storage-test.is-bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: var(--danger-soft); }
.storage-test > strong { font-size: 15px; }
.storage-test .check-list li { border-top-color: color-mix(in srgb, var(--text) 10%, transparent); }
.storage-test .check-list li > div > span { overflow-wrap: anywhere; }
.form-actions .btn .video-spinner { margin-right: 6px; }
.storage-table td, .storage-table th { white-space: nowrap; }
.storage-table tfoot th { border-top: 1px solid var(--border-strong); }
.storage-move .table-wrap { margin-bottom: 14px; }
.storage-move-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.storage-move-options .check { font-size: 14px; align-items: flex-start; }
.storage-move-options .check input { margin-top: 2px; flex-shrink: 0; }
.storage-move-actions { flex-wrap: wrap; }
.move-progress { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.move-progress-text { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.move-errors { margin: 0; padding: 10px 12px 10px 28px; border-radius: var(--radius-sm); background: var(--warn-soft); font-size: 13px; color: var(--text-2); max-height: 180px; overflow-y: auto; }
.storage-kpis .kpi strong { font-size: 28px; }
.tool-status { display: flex; flex-direction: column; gap: 2px; }
.tool-status-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border); }
.tool-status-row:first-child { border-top: 0; padding-top: 0; }
.tool-status-row > span { margin-top: 2px; }
.tool-status-row > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tool-status-row strong { font-size: 14px; }
.tool-status-row span, .tool-status-row small { font-size: 13px; overflow-wrap: anywhere; }
.tool-status .alert { margin-top: 8px; }
@media (max-width: 600px) {
    .storage-status { grid-template-columns: 1fr; }
    .storage-move-actions .btn { width: 100%; justify-content: center; }
    .form-actions .push-left { margin-right: 0; }
}
.settings-form .form-actions { flex-wrap: wrap; }

/* Names that wrap onto two lines keep the verified badge after the last word, not pinned to the edge. */
h1:has(> .verified, > .verified-pop), h2.profile-name { display: block; }
h1 > .verified, .profile-name > .verified { display: inline-block; vertical-align: -.08em; margin-left: 6px; }
h1 > .verified-pop, .profile-name > .verified-pop { vertical-align: -.08em; margin-left: 6px; }

/* Verified badge on a profile: a button that opens a card about the badge. */
.verified-btn { display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.verified-btn .verified { display: block; }
.verified-btn:hover .verified { filter: brightness(1.1); }
.verified-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropdown-menu.verified-card {
    width: 350px; gap: 10px; padding: 16px;
    font-family: var(--font); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--text); text-align: left;
    white-space: normal; overflow-wrap: anywhere; cursor: auto;
}
.verified-card-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.verified-card-head .verified { width: 24px; height: 24px; }
.verified-card p { margin: 0; }
.verified-card ul { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; padding: 10px 12px; list-style: none; border-radius: 10px; background: var(--surface-2); }
.verified-card li { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; gap: 12px; }
.verified-card li span { white-space: nowrap; }
.verified-card li .icon { color: var(--muted); }
.verified-card li span { color: var(--muted); }
.verified-card li strong { font-weight: 600; text-align: right; }
.verified-card-note { font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   Web app (PWA): install sheet, update bar, offline notice, pull to refresh,
   safe areas in the installed app, and the admin App & PWA screens
   ========================================================================== */
/* Under the iPhone status bar ("black-translucent") the page starts at the very top of the screen. */
:root { --safe-top: env(safe-area-inset-top, 0px); }

/* Sheets: install invitation, iPhone guide, notification ask */
.pwa-sheet {
    position: fixed; z-index: 180; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
    padding: 0 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none;
}
.pwa-sheet-card {
    position: relative; width: 100%; max-width: 440px; pointer-events: auto;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 20px; padding: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 14px;
}
.pwa-sheet .pwa-sheet-card { transform: translateY(calc(100% + 30px)); opacity: 0; transition: transform .32s var(--ease), opacity .2s; }
.pwa-sheet.is-open .pwa-sheet-card { transform: none; opacity: 1; }
.pwa-sheet.is-leaving .pwa-sheet-card { transform: translateY(calc(100% + 30px)); opacity: 0; transition-duration: .2s; }
.pwa-sheet-close { position: absolute; top: 10px; right: 10px; }
.pwa-sheet-head { display: flex; gap: 14px; align-items: center; padding-right: 30px; }
.pwa-sheet-head h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.15; }
.pwa-sheet-head p { margin-top: 3px; color: var(--text-2); font-size: 14px; line-height: 1.4; }
.pwa-sheet-icon { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.pwa-sheet-glyph { width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.pwa-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pwa-sheet-actions .btn { min-width: 96px; justify-content: center; }
.pwa-sheet-note { font-size: 13px; color: var(--muted); }
.pwa-copy { align-self: flex-start; }
.pwa-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: step; }
.pwa-steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.4; counter-increment: step; }
.pwa-step-icon {
    position: relative; width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--info-text);
}
.pwa-step-icon svg { display: inline; vertical-align: middle; }
.pwa-steps li > span:last-child svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--info); }
.pwa-step-icon::after {
    content: counter(step); position: absolute; top: -6px; left: -6px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--accent-fill); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
}
.pwa-sheet-card.is-preview { box-shadow: none; max-width: none; }
.pwa-sheet-card.is-preview .pwa-sheet-head { padding-right: 0; }
.pwa-sheet-card.is-preview .btn { pointer-events: none; }
@media (max-width: 700px) {
    /* Sits above the bottom navigation bar. */
    body:has(.bottom-nav) .pwa-sheet { bottom: calc(62px + env(safe-area-inset-bottom)); padding-bottom: 10px; }
}
@media (min-width: 701px) {
    .pwa-sheet { left: auto; right: 24px; bottom: 24px; padding: 0; width: 400px; }
}

/* Install gate: phones and tablets see this instead of the site until they open the installed app.
   .pwa-gating is set by the inline head script, so the page never flashes before pwa.js mounts the gate. */
html.pwa-gating, html.pwa-gating body { overflow: hidden; }
html.pwa-gating body > :not(.pwa-gate):not(.toasts) { visibility: hidden; }
html.pwa-gating .toasts { z-index: 2010; }
.pwa-gate {
    position: fixed; inset: 0; z-index: 2000; overflow-y: auto; overscroll-behavior: contain;
    display: flex; align-items: center; justify-content: center;
    padding: calc(24px + var(--safe-top)) 16px calc(24px + env(safe-area-inset-bottom));
    background: radial-gradient(120% 60% at 50% 0%, var(--accent-soft), transparent 70%), var(--bg); color: var(--text);
    animation: pwa-gate-in .35s var(--ease);
}
@keyframes pwa-gate-in { from { opacity: 0; } to { opacity: 1; } }
.pwa-gate-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin: auto 0; }
.pwa-gate-icon { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.pwa-gate h1 { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; margin-top: 4px; }
.pwa-gate-lead { color: var(--text-2); font-size: 15.5px; line-height: 1.45; max-width: 360px; }
.pwa-gate-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pwa-gate-body .pwa-steps { width: 100%; text-align: left; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); gap: 14px; }
.pwa-gate-perks { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.pwa-gate-perks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-2); }
.pwa-gate-perks svg { color: var(--accent); flex-shrink: 0; }
.pwa-gate-btn { width: 100%; min-height: 52px; justify-content: center; gap: 10px; font-size: 17px; border-radius: 16px; }
.pwa-gate-btn.is-busy { opacity: .7; }
.pwa-gate-btn.is-busy svg { animation: pwa-gate-bob 1s ease-in-out infinite; }
@keyframes pwa-gate-bob { 50% { transform: translateY(3px); } }
.pwa-gate-small { font-size: 13px; color: var(--muted); }
.pwa-gate-note { font-size: 13.5px; color: var(--text-2); min-height: 0; }
.pwa-gate-note:empty { display: none; }
.pwa-gate-skip { background: none; border: 0; padding: 10px; font: inherit; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pwa-gate-done { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-fill); color: var(--accent-ink); }
.pwa-gate-done svg { width: 36px; height: 36px; }
/* Arrow towards the browser button the steps mention. */
.pwa-gate-pointer { display: none; position: fixed; z-index: 2001; color: var(--accent); pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.pwa-gate[data-pointer="bottom"] .pwa-gate-pointer { display: block; left: 50%; transform: translateX(-50%); bottom: calc(6px + env(safe-area-inset-bottom)); animation: pwa-gate-point-down 1.1s ease-in-out infinite; }
.pwa-gate[data-pointer="bottom-right"] .pwa-gate-pointer { display: block; right: 14px; bottom: calc(6px + env(safe-area-inset-bottom)); animation: pwa-gate-point-down 1.1s ease-in-out infinite; }
.pwa-gate[data-pointer="top"] .pwa-gate-pointer,
.pwa-gate[data-pointer="top-right"] .pwa-gate-pointer { display: block; right: 14px; transform: rotate(180deg); top: calc(6px + var(--safe-top)); animation: pwa-gate-point-up 1.1s ease-in-out infinite; }
@keyframes pwa-gate-point-down { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@keyframes pwa-gate-point-up { 0%, 100% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(8px); } }
.pwa-gate[data-pointer="bottom-right"] .pwa-gate-pointer { animation-name: pwa-gate-point-down-r; }
@keyframes pwa-gate-point-down-r { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pwa-gate, .pwa-gate-pointer, .pwa-gate-btn.is-busy svg { animation: none !important; } }

/* "Update available" bar */
.pwa-update {
    position: fixed; z-index: 185; left: 50%; transform: translateX(-50%); top: calc(12px + var(--safe-top));
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; width: max-content; max-width: calc(100vw - 24px);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--pill); box-shadow: var(--shadow); font-size: 14px;
    animation: pwa-drop .3s var(--ease);
}
.pwa-update > span:nth-child(2) { min-width: 0; }
.pwa-update-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex-shrink: 0; }
@keyframes pwa-drop { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Offline notice */
.pwa-offline {
    position: fixed; z-index: 170; left: 50%; transform: translateX(-50%); top: calc(10px + var(--safe-top));
    display: flex; align-items: center; gap: 8px; padding: 7px 14px; width: max-content; max-width: calc(100vw - 24px);
    border-radius: var(--pill); background: var(--warn); color: #1a1200; font-size: 13.5px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    animation: pwa-drop .3s var(--ease);
}
@media (max-width: 700px) { .pwa-offline { top: calc(62px + var(--safe-top)); } }

/* Pull to refresh */
.pwa-ptr {
    position: fixed; z-index: 160; left: 50%; top: calc(var(--safe-top) - 44px); width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border-strong); color: var(--muted);
    box-shadow: var(--shadow); transform: translate(-50%, 0); opacity: 0; transition: opacity .15s, color .15s; pointer-events: none;
}
.pwa-ptr.is-visible { opacity: 1; }
.pwa-ptr.is-ready { color: var(--accent-text); }
.pwa-ptr.is-loading svg { animation: pwa-spin .8s linear infinite; }
@keyframes pwa-spin { to { transform: rotate(360deg); } }

/* Installed app: no text selection callouts on controls, no grey tap flash. */
html.is-standalone { -webkit-tap-highlight-color: transparent; }
html.is-standalone .btn, html.is-standalone .nav-link, html.is-standalone .bottom-nav a, html.is-standalone .tab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.is-standalone body { overscroll-behavior-y: contain; }

/* Window Controls Overlay (desktop app drawing its own title bar) */
@media (display-mode: window-controls-overlay) {
    html.has-wco body { padding-top: env(titlebar-area-height, 0px); }
    html.has-wco body::before {
        content: ''; position: fixed; z-index: 400; top: 0; left: env(titlebar-area-x, 0); width: env(titlebar-area-width, 100%); height: env(titlebar-area-height, 0px);
        background: var(--bg); -webkit-app-region: drag; app-region: drag;
    }
}

/* Settings → App */
.app-state {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface);
}
.app-state > div:not(.app-state-actions) { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.app-state[data-tone="ok"] { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.app-state[data-tone="ok"] .app-state-glyph { background: var(--success-soft); color: var(--success); }
.app-state[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.app-state[data-tone="warn"] .app-state-glyph { background: var(--warn-soft); color: var(--warn); }
.app-state[data-tone="muted"] .app-state-glyph { background: var(--surface-2); color: var(--muted); }
.app-state-icon { width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0; }
.app-state-glyph { width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.app-state-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.app-settings .form-section { margin-top: 10px; }
.app-settings .notif-prefs { display: flex; flex-direction: column; gap: 10px; }
.device-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.device-row:first-child { border-top: 0; }
.device-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex-shrink: 0; }
.device-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.device-info strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.app-outbox { color: var(--warn-text); font-weight: 600; }
.device-list.compact { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.device-list.compact li { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.device-list.compact li > span { flex: 1; min-width: 0; }

/* Admin: colour and multi-choice fields */
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type=color] { width: 46px; height: 42px; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; flex-shrink: 0; }
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type=color]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.color-field input[type=color]::-moz-color-swatch { border: 0; border-radius: 6px; }
.color-field input[type=text] { max-width: 130px; text-transform: lowercase; }
.check-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.check-group legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.check-group .check-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; }
.check-group .check { font-size: 14px; align-items: flex-start; }
.check-group .check input { margin-top: 1px; flex-shrink: 0; }
.check-group .field-help { display: block; margin-top: 8px; }

/* Admin: App & PWA */
.app-tabs { margin-bottom: 4px; }
.app-kpis .kpi-label { padding-right: 40px; }
.check-item { align-items: center !important; }
.check-item > div { flex: 1; min-width: 0; }
.check-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.check-item.is-ok .check-mark { background: var(--success-soft); color: var(--success); }
.check-item.is-warn .check-mark { background: var(--warn-soft); color: var(--warn); }
.check-item.is-fail .check-mark { background: var(--danger-soft); color: var(--danger); }
.check-item.is-info .check-mark { background: var(--info-soft); color: var(--info); }
.check-item .btn { flex-shrink: 0; }
.app-feature-list li { align-items: flex-start; padding: 11px 0; }
.app-feature-list li > div > * { white-space: normal; }
.app-feature-list li > div { gap: 2px; }
.app-feature-list .badge { flex-shrink: 0; }
.app-preview-row, .mask-preview { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-around; margin: 0; }
.app-preview-row figure, .mask-preview figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; text-align: center; }
.app-preview-row figcaption, .mask-preview figcaption { font-size: 12.5px; font-weight: 600; color: var(--text-2); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-preview-row small { font-size: 11.5px; color: var(--muted); margin-top: -4px; }
.mask-preview { padding: 16px 12px; margin-bottom: 16px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #2b3a55, #5a3c6b); }
.mask-preview figcaption { color: #fff; }
.app-icon-ios { border-radius: 22.5%; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.app-icon-any { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .25)); }
.app-icon-mask { box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.app-icon-mask.is-circle, .app-phone img.is-circle { border-radius: 50%; }
.app-icon-mask.is-squircle { border-radius: 32%; }
.app-icon-mask.is-rounded { border-radius: 16%; }
.app-icon-mask.is-teardrop { border-radius: 50% 50% 50% 16%; }
.app-icon-mask.is-full { border-radius: 0; }
.app-icon-favicon { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px 9px 0 0; background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0; font-size: 12.5px; max-width: 150px; overflow: hidden; white-space: nowrap; }
.app-icon-badge { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #1f2937; }
.app-sizes { margin-top: 14px; line-height: 1.5; }
.app-splash-row { display: flex; gap: 14px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.app-phone {
    position: relative; width: 96px; aspect-ratio: 9 / 19.5; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border: 3px solid #23272c; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); overflow: hidden;
}
.app-phone img { width: 28%; height: auto; }
.app-phone.is-android img { width: 34%; }
.app-phone span { font-size: 9px; font-weight: 700; position: absolute; bottom: 14%; }
.app-phone small { position: absolute; bottom: 6px; font-size: 9.5px; font-weight: 700; }
.app-phone-bar { position: absolute; top: 0; left: 0; right: 0; height: 9%; }
.app-phone.bar-default .app-phone-bar { background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.app-phone.bar-black .app-phone-bar { background: #000; }
.app-phone.bar-black-translucent .app-phone-bar { background: transparent; }
.app-phone.has-bar::after { content: ''; position: absolute; top: 3%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.app-details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent-text); margin-top: 6px; }
.app-device-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; font-size: 13px; }
.app-device-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.app-device-list a { color: var(--muted); flex-shrink: 0; }
.icon-uploads { display: flex; flex-direction: column; }
.icon-upload { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--border); }
.icon-upload:first-child { border-top: 0; padding-top: 0; }
.icon-upload-preview {
    width: 76px; height: 76px; border-radius: 18px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden;
    background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 14px 14px; color: var(--muted);
}
.icon-upload-preview img { width: 72px; height: 72px; }
.icon-upload-preview.is-mask img { border-radius: 50%; }
.icon-upload-preview.is-badge { background: #1f2937; }
.icon-upload-preview.is-badge img { width: 44px; height: 44px; }
.icon-upload-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.icon-upload-body strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.icon-upload-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.inline-form { display: inline; margin: 0; }
.icon-upload-actions label.btn { cursor: pointer; }
.shot-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.shot-list li { display: flex; align-items: center; gap: 12px; }
.shot-list img { border-radius: 8px; border: 1px solid var(--border); object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.shot-list img.is-narrow { width: 44px; height: 88px; }
.shot-list img.is-wide { width: 96px; height: 60px; }
.shot-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shot-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-upload { gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.rot-90 { transform: rotate(90deg); }
.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.funnel li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; font-size: 14px; border-radius: 8px; overflow: hidden; }
.funnel li > * { position: relative; z-index: 1; }
.funnel li i { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; background: var(--accent-soft); border-radius: 8px; }
.shortcut-preview { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #2b3a55, #5a3c6b); }
.shortcut-preview ul { list-style: none; margin: 0; padding: 6px; flex: 1; min-width: 0; background: var(--surface); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.shortcut-preview li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; font-size: 14px; font-weight: 600; border-radius: 10px; }
.shortcut-preview li img { border-radius: 8px; flex-shrink: 0; }
.shortcut-preview li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-preview li.is-extra { color: var(--muted); }
.shortcut-preview li.is-extra img { opacity: .55; }
.app-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.app-steps a { color: var(--accent-text); }
.app-steps .mono { overflow-wrap: anywhere; }
.test-report { margin-bottom: 0; }
.push-log li { align-items: flex-start; }
.push-log .row-main p { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .icon-upload { gap: 12px; }
    .icon-upload-preview { width: 60px; height: 60px; border-radius: 15px; }
    .icon-upload-preview img { width: 56px; height: 56px; }
    .app-phone { width: 84px; }
    .shortcut-preview { padding: 12px; }
}

/* Installed app on iPhone/iPad with the translucent status bar: a frosted strip keeps the clock readable over scrolled content. */
html.is-standalone body::after {
    content: ''; position: fixed; z-index: 175; top: 0; left: 0; right: 0; height: var(--safe-top); pointer-events: none;
    background: var(--overlay); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.auth-shell { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.auth-hero { padding-top: calc(60px + var(--safe-top)); }
.auth-panel { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
@media (max-width: 700px) { .auth-hero { padding-top: calc(36px + var(--safe-top)); } }
@media (max-width: 700px) {
    /* On phones the update bar sits above the bottom navigation, clear of the header. */
    .pwa-update { top: auto; bottom: calc(74px + env(safe-area-inset-bottom)); border-radius: 18px; animation-name: pwa-rise; }
    body:not(:has(.bottom-nav)) .pwa-update { bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@keyframes pwa-rise { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 700px) {
    body:has(.pwa-sheet) .pwa-update { top: calc(12px + var(--safe-top)); bottom: auto; }
}
@media (min-width: 701px) {
    .pwa-update { top: auto; bottom: 24px; left: 24px; transform: none; animation-name: pwa-rise-left; }
}
@keyframes pwa-rise-left { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.color-field input[type=text] { width: auto; flex: 1 1 auto; min-width: 0; }
.field .color-field input[type=color] { width: 46px; min-width: 46px; flex: 0 0 46px; }
.field .color-field input[type=text] { width: auto; flex: 0 1 130px; min-width: 0; }
.field .color-field input[type=color] { padding: 3px; height: 42px; border-radius: var(--radius-sm); }
.field input.color-swatch:not([type=checkbox]):not([type=radio]):not([type=file]) { padding: 3px; width: 46px; min-width: 46px; height: 42px; flex: 0 0 46px; }

/* Tab strips wider than the screen fade at the edge that has more tabs. */
.tabs.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.tabs.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.tabs.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }

/* Link from Settings → Notifications to Settings → App */
.settings-callout { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.settings-callout:hover { text-decoration: none; border-color: var(--border-strong); }
.settings-callout > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-callout > .icon:last-child { color: var(--muted); }

/* ==========================================================================
   Marketplace
   ========================================================================== */
.mk-head { flex-wrap: wrap; }
.mk-head .head-actions { margin-left: auto; }
.mk-tabs .tab { flex: 1 0 auto; }

/* Landing */
.mk-hero { padding: 20px 16px 6px; display: flex; flex-direction: column; gap: 12px; }
.mk-hero-search { display: flex; gap: 10px; }
.mk-hero-search .search-box { flex: 1; min-width: 0; height: 50px; font-size: 16px; }
.mk-hero-search .btn { height: 50px; padding: 0 22px; }
.mk-hero-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-hero-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.mk-hero-links a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent-text); }
.mk-hero-links .icon { color: var(--accent); }
.mk-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.mk-cat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, transform .15s var(--ease); }
.mk-cat:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.mk-cat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); }
.mk-cat-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mk-cat-text strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-cat-text small { color: var(--muted); font-size: 12.5px; }
.mk-section { border-top: 1px solid var(--border); }
.mk-section:first-of-type { border-top: 0; }
.mk-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 12px; }
.mk-section .section-pad { padding-top: 8px; }

/* Cards */
.listing-card { position: relative; display: flex; flex-direction: column; }
.listing-card:hover { border-color: var(--border-strong); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.listing-card .listing-img { display: block; }
.listing-card-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.listing-card-body h3 { margin: 2px 0 0; }
.listing-card-body h3 a { color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; }
.mk-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mk-card-link:hover { text-decoration: none; }
.listing-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-card-link:focus-visible { outline: none; }
.listing-card .price { font-size: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.price-suffix { font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.price-label { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted); }
.price-was { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); }
.mk-card-specs { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card-meta { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); min-width: 0; margin-top: 2px; }
.mk-card-meta span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card-meta .icon { flex-shrink: 0; }
.mk-card-seller { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 6px; padding: 2px 8px; border-radius: var(--pill); background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card-club { background: var(--info-soft); color: var(--info-text); }
.mk-badges { position: absolute; top: 10px; left: 10px; right: 54px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; z-index: 2; }
.mk-badges:empty { display: none; }
.mk-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .72); }
.mk-badge-reserved { background: #9a5c00; }
.mk-badge-sold { background: rgba(0, 0, 0, .82); }
.mk-badge-wanted { background: #1b6fd1; }
.mk-badge-drop { background: #127c3f; }
.mk-badge-club { background: rgba(0, 0, 0, .65); }
.mk-badge-muted { background: rgba(60, 64, 70, .88); }
.mk-photo-count { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--pill); background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; z-index: 2; }
.mk-save {
    position: absolute; top: 8px; right: 8px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0;
    display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; transition: transform .15s var(--ease), background .15s;
}
.mk-save:hover { background: rgba(0, 0, 0, .7); transform: scale(1.06); }
.mk-save.on { color: var(--like); background: rgba(255, 255, 255, .94); }
.mk-save.on svg, .mk-save-btn.on svg { fill: currentColor; }
.mk-save-btn.on { color: var(--like); border-color: var(--like); }
.listing-card.is-reserved .listing-img img { filter: saturate(.75); }

/* Browse with filters */
.mk-searchbar { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.mk-searchbar .search-box { flex: 1; min-width: 0; height: 44px; }
.mk-searchbar .btn { flex-shrink: 0; }
.mk-searchbar .btn { height: 44px; }
.mk-filter-toggle { display: none; }
.mk-results { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.mk-filters { position: sticky; top: calc(8px + var(--safe-top)); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; border-right: 1px solid var(--border); scrollbar-width: thin; display: flex; flex-direction: column; }
.mk-filters-head { display: none; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); }
.mk-filters-head strong { font-family: var(--font-display); font-size: 20px; }
.mk-filters-body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.mk-filter legend { font-size: 13px; font-weight: 700; color: var(--text-2); padding: 0; margin-bottom: 6px; }
.mk-filter .check { font-size: 14px; padding: 3px 0; }
fieldset.mk-filter { display: flex; flex-direction: column; gap: 2px; }
.mk-filter-checks { display: flex; flex-direction: column; gap: 6px; }
.mk-filters .field input:not([type=checkbox]):not([type=radio]), .mk-filters .field select { height: 40px; }
.mk-range { display: flex; align-items: center; gap: 6px; }
.mk-range > * { flex: 1; min-width: 0; }
.mk-range > span[aria-hidden] { flex: 0 0 auto; color: var(--muted); }
.mk-range input, .mk-range select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); outline: none; }
.mk-range .input-prefix input { padding-left: 2px; }
.mk-range .input-prefix span { padding-left: 10px; }
.mk-range input:focus, .mk-range select:focus { border-color: var(--accent); }
.mk-seg-sm span { padding: 6px 8px; font-size: 13.5px; }
.mk-filters .segmented.mk-seg-sm { flex-direction: row; flex-wrap: nowrap; }
.mk-filters .mk-seg-sm label { min-width: 0; }
.mk-filters-foot { display: flex; gap: 8px; padding: 12px 16px 16px; position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--border); margin-top: auto; }
.mk-filters-foot .btn { flex: 1; justify-content: center; }
.mk-main { min-width: 0; padding: 14px 16px 16px; }
.mk-results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mk-results-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; line-height: 1.1; }
.mk-results-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-sort select { height: 34px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; }
.mk-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 700; }
.mk-pill:hover { text-decoration: none; background: var(--accent-fill); color: var(--accent-ink); }
.mk-pill-clear { background: transparent; color: var(--muted); }
.mk-pill-clear:hover { background: var(--surface-2); color: var(--text); }
.mk-main .listing-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mk-main .empty-state { padding: 48px 16px; }
.mk-search-more { margin-top: 14px; text-align: center; }

/* Listing page */
.mk-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.mk-crumbs a { color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; padding-block: 2px; }
.mk-crumbs a:first-child { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); }
.mk-crumbs .icon { flex-shrink: 0; }
.mk-banner { display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.mk-banner > div { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.mk-banner-warn { background: var(--warn-soft); border-color: transparent; }
.mk-banner-warn > .icon { color: var(--warn); }
.mk-banner-info > .icon { color: var(--info); }
.mk-gallery .gallery-main { aspect-ratio: 4 / 3; background: var(--surface-2); }
.mk-gallery .gallery-main a { position: absolute; inset: 0; }
.mk-gallery .gallery-main img { object-fit: contain; background: #0d0e10; }
[data-theme="light"] .mk-gallery .gallery-main img { background: #e9ebee; }
.mk-gallery .listing-placeholder.big { aspect-ratio: auto; height: 100%; flex-direction: column; gap: 8px; display: flex; align-items: center; justify-content: center; }
.mk-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; opacity: .85; transition: opacity .15s, background .15s; }
.mk-gallery-nav:hover { opacity: 1; background: rgba(0, 0, 0, .75); }
.mk-gallery-nav.prev { left: 10px; }
.mk-gallery-nav.next { right: 10px; }
.mk-gallery-count { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 3px 10px; border-radius: var(--pill); background: rgba(0, 0, 0, .6); color: #fff; font-size: 12.5px; font-weight: 700; }
.mk-badges-lg { right: 12px; top: 12px; left: 12px; }
.mk-badges-lg .mk-badge { font-size: 12.5px; padding: 4px 11px; }
.mk-gallery .gallery-thumbs { scrollbar-width: thin; padding-bottom: 4px; }
.mk-info { gap: 12px; position: sticky; top: calc(72px + var(--safe-top)); }
.mk-info-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-cat-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent-text); }
.mk-info .listing-title { font-size: 23px; line-height: 1.12; overflow-wrap: anywhere; }
.mk-info .listing-price { font-size: 31px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.mk-info .listing-price .price-suffix, .mk-info .listing-price .price-was, .mk-info .listing-price .price-label { font-size: 16px; }
.mk-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--muted); }
.mk-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.mk-actions > .btn { flex: 1 1 auto; justify-content: center; }
.mk-note { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; color: var(--text-2); }
.mk-note > .icon { margin-top: 2px; color: var(--muted); }
.mk-note a { color: var(--accent-text); }
a.mk-note:hover { text-decoration: none; filter: brightness(1.05); }
.mk-note-warn { background: var(--warn-soft); }
.mk-note-warn > .icon { color: var(--warn); }
.mk-note-accent { background: var(--accent-soft); color: var(--text); }
.mk-note-accent > .icon { color: var(--accent); }
.mk-note-info { background: var(--info-soft); color: var(--text); }
.mk-note-info > .icon { color: var(--info); }
.mk-review-prompt { align-items: center; flex-wrap: wrap; }
.mk-review-prompt > span { flex: 1 1 200px; }
.mk-owner-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.mk-owner-stats > div { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.mk-owner-stats strong { font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
.mk-owner-stats span { font-size: 12px; color: var(--muted); font-weight: 600; }
.mk-myoffer { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.mk-myoffer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-myoffer-head .icon { color: var(--accent); }
.mk-myoffer-head .badge { margin-left: auto; }
.mk-myoffer-countered { border-color: var(--accent); background: var(--accent-soft); }
.mk-myoffer-accepted { border-color: var(--success); background: var(--success-soft); }
.mk-myoffer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; font-size: 14px; color: var(--text-2); }
.mk-seller { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.mk-seller-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.mk-seller-info .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.mk-seller-info .label .badge { text-transform: none; letter-spacing: 0; }
.mk-seller-name { font-weight: 700; font-size: 16px; color: var(--text); }
.mk-seller-info .muted { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mk-seller-avatar { flex-shrink: 0; }
.mk-seller-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.mk-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 8px 16px 16px; align-items: start; border-top: 1px solid var(--border); }
.mk-block { padding: 16px 0; border-bottom: 1px solid var(--border); }
.mk-block:last-child { border-bottom: 0; }
.mk-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0; }
.mk-spec { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.mk-spec > .icon { color: var(--accent); margin-top: 2px; }
.mk-spec dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.mk-spec dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.mk-spec dd small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 1px; }
.mk-spec .tone-success, .mk-spec .tone-warn, .mk-spec .tone-danger { background: transparent; }
.mk-specs + .mk-note { margin-top: 12px; }
.mk-description { font-size: 15.5px; }
.mk-updated { margin-top: 10px; }
.mk-detail-side { position: sticky; top: calc(72px + var(--safe-top)); padding-top: 16px; }
.mk-safety { padding: 16px; border-radius: var(--radius); background: var(--info-soft); display: flex; flex-direction: column; gap: 10px; }
.mk-safety h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 17px; }
.mk-safety h2 .icon { color: var(--info); }
.mk-safety ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.mk-offers { display: flex; flex-direction: column; gap: 10px; }
.mk-offer { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.mk-offer.is-pending { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.mk-offer-info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-offer-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mk-offer-amount { font-family: var(--font-display); font-size: 20px; line-height: 1; }
.mk-offer-msg { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.mk-offer-actions { display: flex; gap: 6px; flex-wrap: wrap; align-self: center; }
.mk-reviews { display: flex; flex-direction: column; gap: 10px; }
.mk-review { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.mk-review-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mk-review-head .name { font-weight: 700; }
.mk-review-text { font-size: 14.5px; overflow-wrap: anywhere; }
.mk-review .muted a { color: var(--text-2); font-weight: 600; }

/* Dialogs */
.mk-offer-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.mk-offer-item > div { display: flex; flex-direction: column; min-width: 0; }
.mk-offer-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-offer-chips { margin: -6px 0 0; }
.mk-offer-chips .chip { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.mk-offer-form .field-help .icon, .mk-sold-form .field-help .icon { color: var(--accent); vertical-align: -2px; }
.mk-buyer-option > span { grid-template-columns: auto 1fr; gap: 10px; }
.mk-buyer-option .avatar { width: 28px; height: 28px; }
.mk-buyer-option .icon { color: var(--muted); }
.mk-buyer-option strong { font-weight: 600; }
.mk-buyer-username { margin: 6px 0 2px; }
.mk-buyer-username input { width: 100%; height: 42px; border: 0; background: transparent; color: var(--text); outline: none; padding: 0 12px 0 2px; }
.mk-sold-form fieldset { gap: 6px; }
.modal-body fieldset.field legend { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; padding: 0; }
.mk-star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.mk-star-input input { position: absolute; opacity: 0; pointer-events: none; }
.mk-star-input label { cursor: pointer; color: var(--surface-3); transition: color .1s, transform .1s; }
.mk-star-input label:hover, .mk-star-input label:hover ~ label, .mk-star-input input:checked ~ label { color: var(--warn); }
.mk-star-input label:hover svg, .mk-star-input label:hover ~ label svg, .mk-star-input input:checked ~ label svg { fill: currentColor; }
.mk-star-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Hub, storefront, alerts */
.mk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px 16px 0; }
.mk-stat { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.mk-stat strong { font-family: var(--font-display); font-size: 23px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-stat span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.mk-rows { display: flex; flex-direction: column; }
.mk-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.mk-rows-muted .mk-row { color: var(--text-2); }
.mk-rows-muted .mk-row :is(img, .mk-thumb) { opacity: .72; }
.mk-row-thumb { flex-shrink: 0; }
.mk-thumb { border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface-3); display: block; }
.mk-thumb-empty { display: grid; place-items: center; color: var(--muted); background: var(--surface-2); }
.content-cell .mk-thumb { border-radius: 8px; }
.mk-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-row-title { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row-price { font-family: var(--font-display); font-size: 17px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mk-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.mk-row-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.mk-row-meta .avatar { flex-shrink: 0; }
.mk-row-meta a { color: var(--text-2); font-weight: 600; }
.mk-row-meta strong { color: var(--text); }
.mk-row-msg { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.mk-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.mk-status-chips { border-bottom: 0; padding-top: 4px; }
.mk-status-chips .filter-chip .muted { font-weight: 600; margin-left: 2px; }
.mk-status-chips .filter-chip.active .muted { color: inherit; opacity: .7; }
.mk-hint { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.mk-hint .icon { color: var(--accent); }
.mk-alerts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.mk-alert { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); flex-wrap: wrap; transition: opacity .25s; }
.mk-alert.is-off { color: var(--text-2); }
.mk-alert.is-off .mk-alert-icon { background: var(--surface-3); color: var(--muted); }
.mk-alert.is-removing { opacity: 0; }
.mk-alert-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.mk-alert-info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-alert-label { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.mk-store-head { display: flex; align-items: center; gap: 16px; padding: 20px 16px 4px; flex-wrap: wrap; }
.mk-store-info { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mk-store-info h2 { font-family: var(--font-display); font-size: 23px; display: flex; align-items: center; gap: 6px; }
.mk-store-info p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mk-store-rating { font-size: 14px; }
.mk-store-rating a { color: var(--accent-text); font-weight: 600; }
.mk-store-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-stats-store { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 16px; }
.mk-rating-summary { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px; margin-bottom: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.mk-rating-big { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mk-rating-big strong { font-family: var(--font-display); font-size: 36px; line-height: 1; }
.mk-rating-bars { display: flex; flex-direction: column; gap: 6px; }
.mk-rating-bar { display: grid; grid-template-columns: 36px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.mk-rating-bar > div { height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.mk-rating-bar i { display: block; height: 100%; background: var(--warn); border-radius: 8px; }

/* Sell form */
.mk-form .form-block { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; border-top: 1px solid var(--border); }
.mk-form .form-block:first-of-type { border-top: 0; padding-top: 0; }
.mk-form .form-section { display: flex; align-items: center; gap: 8px; }
.mk-form .form-section .icon { color: var(--accent); }
.mk-form .radio-card { margin: 0; }
.mk-form .radio-card > span { grid-template-columns: 1fr; height: 100%; align-content: start; gap: 2px; padding: 10px 12px; }
.mk-form .radio-card small { grid-column: 1; line-height: 1.35; }
.mk-form .radio-card strong { font-size: 14.5px; }
.mk-conditions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk-price-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mk-field-group { display: flex; flex-direction: column; gap: 16px; }
.mk-crash-help { display: flex; align-items: flex-start; gap: 6px; margin-top: -6px; }
.mk-crash-help .icon { color: var(--accent); margin-top: 2px; }
.mk-photos { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px; margin: -4px; border-radius: var(--radius-sm); transition: background .15s; }
.mk-photos.is-drop { background: var(--accent-soft); outline: 2px dashed var(--accent); }
.mk-photo { position: relative; width: 132px; height: 104px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); cursor: grab; touch-action: manipulation; }
.mk-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mk-photo.is-dragging { opacity: .4; }
.mk-photo-cover { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 6px; background: var(--accent-fill); color: var(--accent-ink); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; display: none; }
.mk-photo.is-cover .mk-photo-cover { display: inline-block; }
.mk-photo.is-cover { box-shadow: 0 0 0 2px var(--accent); }
.mk-photo-remove, .mk-photo-move { position: absolute; width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .65); color: #fff; }
.mk-photo-remove { top: 6px; right: 6px; }
.mk-photo-remove:hover { background: var(--danger); }
.mk-photo-move { bottom: 6px; opacity: 0; transition: opacity .15s; }
.mk-photo-move.left { left: 6px; }
.mk-photo-move.right { right: 6px; }
.mk-photo-move:disabled { display: none; }
.mk-photo:hover .mk-photo-move, .mk-photo:focus-within .mk-photo-move { opacity: 1; }
@media (hover: none) { .mk-photo-move { opacity: 1; } }
.mk-photo-nojs { position: absolute; left: 6px; bottom: 6px; display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 12px; }
.mk-form.js-ready .mk-photo-nojs { display: none; }
.mk-form:not(.js-ready) .mk-photo-remove { display: none; }
.mk-photo-add { position: relative; width: 132px; height: 104px; border-radius: var(--radius-sm); border: 2px dashed var(--border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); cursor: pointer; text-align: center; font-weight: 600; font-size: 14px; }
.mk-photo-add small { font-size: 11.5px; font-weight: 500; }
.mk-photo-add:hover, .mk-photo-add:focus-within { border-color: var(--accent); color: var(--accent-text); }
.mk-photo-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mk-form:not(.js-ready) .mk-photo-add input { position: static; width: auto; height: auto; opacity: 1; font-size: 12px; max-width: 120px; }
.mk-form-actions { position: sticky; bottom: 0; z-index: 5; margin: 4px -16px -20px; padding: 12px 16px; background: var(--overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.mk-form-actions p { max-width: 340px; }
.btn.is-busy { opacity: .7; cursor: progress; }

@media (max-width: 1080px) {
    .mk-results { grid-template-columns: minmax(0, 1fr); }
    .mk-filter-toggle { display: inline-flex; }
    .mk-filters {
        position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; top: auto; max-height: 88vh; max-height: 88dvh; border: 0; border-radius: 18px 18px 0 0;
        background: var(--bg); box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); transform: translateY(105%); transition: transform .25s var(--ease), visibility 0s .25s; visibility: hidden;
        padding-bottom: env(safe-area-inset-bottom);
    }
    body.mk-filters-open .mk-filters { transform: none; visibility: visible; transition: transform .25s var(--ease); }
    body.mk-filters-open::after { content: ''; position: fixed; inset: 0; z-index: 94; background: rgba(0, 0, 0, .5); }
    .mk-filters-head { display: flex; position: sticky; top: 0; background: var(--bg); z-index: 2; }
    .mk-detail { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mk-detail-side { position: static; padding-top: 0; padding-bottom: 8px; }
    .mk-info { position: static; }
}
@media (max-width: 700px) {
    .mk-hero { padding-top: 14px; }
    .mk-hero-search .btn { padding: 0 16px; flex-shrink: 0; }
    .mk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .mk-cat { padding: 10px; gap: 10px; }
    .mk-cat-icon { width: 36px; height: 36px; border-radius: 10px; }
    .mk-searchbar { padding: 10px 12px; gap: 8px; }
    .mk-search-btn { display: none; }
    .mk-main { padding: 12px; }
    .mk-main .listing-grid, .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .listing-card-body { padding: 10px 10px 12px; }
    .listing-card .price { font-size: 19px; }
    .mk-save { width: 34px; height: 34px; top: 6px; right: 6px; }
    .mk-badges { top: 8px; left: 8px; right: 46px; }
    .mk-badge { font-size: 10.5px; padding: 2px 7px; }
    .mk-info .listing-title { font-size: 20px; }
    .mk-info .listing-price { font-size: 26px; }
    .mk-listing { padding: 0 0 12px; gap: 14px; }
    .mk-listing .mk-gallery .gallery-main { border-radius: 0; }
    .mk-listing .gallery-thumbs { padding: 0 12px 4px; }
    .mk-listing .mk-info { padding: 0 12px; }
    .mk-detail { padding: 4px 12px 12px; }
    .mk-owner-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 12px 0; gap: 8px; }
    .mk-stats-store { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-stat strong { font-size: 22px; }
    .mk-row { flex-wrap: wrap; gap: 10px 12px; padding: 12px; }
    .mk-row-info { flex: 1 1 calc(100% - 80px); }
    .mk-row-actions { width: 100%; justify-content: flex-start; padding-left: 76px; }
    .mk-conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-price-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-photo, .mk-photo-add { width: calc(33.333% - 7px); height: auto; aspect-ratio: 5 / 4; }
    .mk-form-actions { bottom: calc(62px + env(safe-area-inset-bottom)); }
    .mk-form-actions p { flex-basis: 100%; max-width: none; }
    .mk-form-actions .btn { flex: 1 1 auto; justify-content: center; }
    .mk-rating-summary { grid-template-columns: minmax(0, 1fr); }
    .mk-store-head { padding: 16px 12px 4px; }
    .mk-crumbs a:not(:first-child), .mk-crumbs .icon { display: none; }
}
@media (max-width: 420px) {
    .mk-conditions, .mk-price-types { grid-template-columns: minmax(0, 1fr); }
    .mk-actions > .btn-primary { flex-basis: 100%; order: -1; }
    .mk-photo, .mk-photo-add { width: calc(50% - 5px); }
}
@media (prefers-reduced-motion: reduce) {
    .mk-filters, .mk-cat, .mk-save { transition: none; }
}

/* ==========================================================================
   Visitors who aren't signed in
   ========================================================================== */
.guest-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; margin-top: 16px; }
.guest-side .btn-post { margin: 0; }
.guest-side .guest-theme { margin-top: auto; margin-bottom: 12px; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.sidebar-left:has(.guest-side) .guest-side { flex: 1; }
.join-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.join-card .side-title { padding: 0; }
.join-card p { font-size: 14.5px; margin: 0; }
.guest-reply a { color: var(--accent-text); font-weight: 600; }
.bottom-nav a.bottom-post { color: var(--accent-ink); padding: 0; }

/* Join bar along the bottom of the window (desktop and tablet). */
.guest-bar {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    background: var(--accent-fill); color: var(--accent-ink);
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
}
.guest-bar-inner { max-width: 1060px; margin: 0 auto; display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.guest-bar-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.guest-bar-text strong { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.guest-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }
.guest-bar .btn-outline { border-color: color-mix(in srgb, var(--accent-ink) 70%, transparent); color: var(--accent-ink); background: transparent; }
.guest-bar .btn-outline:hover { background: color-mix(in srgb, var(--accent-ink) 14%, transparent); }
.guest-bar .btn-primary { background: #fff; color: #14161a; border-color: #fff; }
.guest-bar .btn-primary:hover { background: #f1f1f1; }
body.is-guest .app-shell { padding-bottom: 84px; }
/* Keep the bottom of both sidebars (theme toggle, footer links) clear of the join bar. */
@media (min-width: 701px) {
    body.is-guest .sidebar-left, body.is-guest .sidebar-right { padding-bottom: 84px; }
}
@media (max-width: 700px) {
    .guest-bar { display: none; }
    body.is-guest .app-shell { padding-bottom: 0; }
    .topbar-mobile .btn-sm { padding-inline: 16px; }
}

/* Join prompt (opened when a visitor taps like, follow, RSVP…). */
.modal-guest { max-width: 420px; }
.modal-guest .modal-head { position: absolute; right: 0; top: 0; background: transparent; }
.guest-join { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 8px 6px; }
.guest-join-mark { width: 56px; height: 56px; border-radius: 16px; display: inline-grid; place-items: center; }
.guest-join h3 { font-family: var(--font-display); font-size: 23px; font-weight: 800; line-height: 1.05; margin: 6px 0 0; }
.guest-join p { max-width: 330px; margin: 0; }
.guest-join-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }
@media (max-width: 700px) {
    .modal:has(.modal-guest) { align-items: flex-end; }
    .modal-dialog.modal-guest { height: auto; border-radius: 22px 22px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Landing page: links into the public sections. */
.hero-explore { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero-explore a {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--pill);
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #eef0f2; font-weight: 600; font-size: 14.5px;
}
.hero-explore a:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
.hero-explore .icon { color: var(--accent); }
/* Admin → SEO & sitemaps */
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.serp-preview { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-family: Arial, system-ui, sans-serif; }
.serp-site { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.serp-site img { border-radius: 50%; background: var(--surface-2); padding: 3px; }
.serp-site div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.serp-site strong { font-size: 14px; font-weight: 400; color: var(--text); }
.serp-site span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-title { font-size: 20px; line-height: 1.3; color: #1a0dab; margin-bottom: 3px; overflow-wrap: anywhere; }
:root[data-theme="dark"] .serp-title { color: #99c3ff; }
.serp-desc { font-size: 14px; line-height: 1.58; color: var(--text-2); margin: 0; }
.share-preview { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.share-preview-img { aspect-ratio: 1200 / 630; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.share-preview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-preview-img.is-square img { width: auto; height: 70%; object-fit: contain; border-radius: 18%; }
.share-preview-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-top: 1px solid var(--border); min-width: 0; }
.share-preview-body span { font-size: 11.5px; color: var(--muted); letter-spacing: .03em; }
.share-preview-body strong { font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-preview-body p { font-size: 13.5px; color: var(--muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-preview-solo { margin-bottom: 14px; }
.share-upload { gap: 10px; }
.share-upload .form-actions { margin-top: 0; }
.seo-steps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.seo-steps a { color: var(--accent-text); }
.seo-steps code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); }
/* ==========================================================================
   Two-factor authentication: sign-in code, setup wizard, recovery codes, security activity
   ========================================================================== */
.tfa-glyph { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tfa-card h2 { font-size: 34px; }
.tfa-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 26px !important; letter-spacing: .32em; text-align: center; padding-left: calc(14px + .32em) !important; font-variant-numeric: tabular-nums; }
.tfa-code-input.is-recovery { font-size: 20px !important; letter-spacing: .12em; padding-left: 14px !important; }
.tfa-code-input::placeholder { color: var(--border-strong); }
.tfa-trust { align-items: flex-start; font-size: 14px; }
.tfa-trust input { margin-top: 2px; flex-shrink: 0; }
.tfa-trust span { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.tfa-trust small { font-weight: 400; font-size: 13px; }
.tfa-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; font-size: 14px; padding-top: 4px; border-top: 1px solid var(--border); padding: 14px 0 0; }
.tfa-alt a, .tfa-alt .link-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.tfa-alt a { color: var(--accent-text); }
.tfa-alt .link-btn:hover { color: var(--text); }
.tfa-alt form { margin: 0; }

.tfa-setup { gap: 18px; }
.auth-card.tfa-setup { max-width: 520px; }
.auth-card.tfa-setup h2 { font-size: 34px; }
.tfa-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; counter-reset: none; }
.tfa-steps li { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.tfa-steps li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 12px; background: var(--surface-3); color: var(--text-2); }
.tfa-steps li.is-current { color: var(--text); background: var(--accent-soft); }
.tfa-steps li.is-current span { background: var(--accent-fill); color: var(--accent-ink); }
.tfa-steps li.is-done span { background: var(--success-soft); color: var(--success-text); }
.tfa-apps { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; color: var(--text-2); }
.tfa-apps > .icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.tfa-scan { display: flex; gap: 20px; align-items: center; }
.tfa-qr { flex-shrink: 0; padding: 10px; border-radius: var(--radius-sm); background: #fff; box-shadow: 0 0 0 1px var(--border); line-height: 0; }
.tfa-qr .qr-code { display: block; width: 196px; height: 196px; max-width: 100%; }
.tfa-scan-text { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.tfa-scan-text p { margin: 0; }
.tfa-open-app { display: none; }
@media (hover: none) and (pointer: coarse) { .tfa-open-app { display: inline-flex; } }
.tfa-manual { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px; }
.tfa-manual summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-2); list-style: none; }
.tfa-manual summary::-webkit-details-marker { display: none; }
.tfa-manual summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.tfa-manual[open] summary::after { transform: rotate(-135deg); }
.tfa-manual .kv-list { padding-bottom: 12px; }
.tfa-secret { font-size: 15px; padding: 4px 8px; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text); user-select: all; word-break: break-all; }
.tfa-verify-form .field { max-width: 280px; }
.tfa-verify-form .form-actions, .tfa-setup .form-actions { justify-content: space-between; }
.tfa-setup .form-actions .btn-primary { margin-left: auto; }

.tfa-codes-intro { display: flex; flex-direction: column; gap: 10px; }
.tfa-codes-intro p { margin: 0; }
.tfa-codes { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); counter-reset: code; }
.tfa-codes li { font-size: 17px; letter-spacing: .06em; color: var(--text); display: flex; align-items: baseline; gap: 10px; counter-increment: code; }
.tfa-codes li::before { content: counter(code); font-family: var(--font); font-size: 12px; color: var(--muted); min-width: 16px; text-align: right; }
.tfa-codes-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tfa-saved { font-size: 14px; font-weight: 600; }

.security-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.security-log li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.security-log li:first-child { border-top: 0; }
.security-log li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.security-log li strong { font-size: 14px; font-weight: 600; }
.security-log time { flex-shrink: 0; white-space: nowrap; }
.security-log-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.form-row-end { align-items: end; }
.form-row-end .form-actions { padding-top: 0; }

@media (max-width: 600px) {
    .tfa-scan { flex-direction: column; align-items: stretch; text-align: left; }
    .tfa-qr { align-self: center; }
    .tfa-steps li { font-size: 0; gap: 0; justify-content: center; }
    .tfa-steps li.is-current { font-size: 12.5px; gap: 6px; flex: 2.4; }
    .tfa-codes { grid-template-columns: 1fr; }
    .tfa-verify-form .field { max-width: none; }
    .tfa-code-input { font-size: 22px !important; }
}
/* ==========================================================================
   Legal pages: /legal, /terms, /privacy, /cookies, /guidelines, /marketplace-rules,
   /copyright, /legal/accept, footer links and the sign-up agreement.
   ========================================================================== */
/* Footer link lists: 3px top/bottom padding makes each link at least 24px tall, as WCAG 2.5.8 requires
   for stacked targets (the row gap moves into the padding, so the spacing looks the same). */
.side-footer-links { display: flex; flex-wrap: wrap; gap: 0 12px; margin-bottom: 6px; }
.side-footer-links a { white-space: nowrap; padding-block: 3px; }

.auth-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; width: 100%; max-width: 420px; margin-top: 10px; font-size: 12.5px; }
.auth-legal a { color: var(--muted); padding-block: 3px; }
.auth-legal a:hover { color: var(--text); }

.sidebar-legal { display: none; }
@media (max-width: 700px) {
    .sidebar-legal { display: flex; flex-wrap: wrap; gap: 0 12px; padding: 12px 12px 4px; margin-top: 8px; border-top: 1px solid var(--border); font-size: 12.5px; }
    .sidebar-legal a { color: var(--muted); padding-block: 3px; }
}

/* ---------- Hub and document header ---------- */
.legal-hub, .legal-doc { padding: 8px 24px 40px; }
.legal-hero { padding: 26px 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.legal-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    padding: 4px 10px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-text);
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
a.legal-eyebrow:hover { text-decoration: none; filter: brightness(1.1); }
.legal-hero h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 36px); font-weight: 800; line-height: 1.05; }
.legal-lede { color: var(--text-2); font-size: 17px; line-height: 1.55; max-width: 62ch; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--muted); font-size: 14px; }
.legal-meta > span + span::before { content: "·"; margin: 0 8px; color: var(--border-strong); }
.legal-alert { margin: 6px 0 0; }
.legal-alert a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Hub ---------- */
.legal-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.legal-card {
    display: flex; align-items: flex-start; gap: 14px; padding: 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text); transition: border-color .15s, transform .15s var(--ease);
}
.legal-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.legal-card-icon {
    width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 12px; background: var(--accent-soft); color: var(--accent);
}
.legal-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.legal-card-body strong { font-size: 16px; }
.legal-card-body .muted { line-height: 1.45; }
.legal-card-date { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.legal-card-go { color: var(--muted); margin-top: 10px; }
.legal-card:hover .legal-card-go { color: var(--accent-text); }

.legal-panel { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.legal-panel h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.legal-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 20px; margin: 4px 0 0; }
.legal-facts div { min-width: 0; }
.legal-facts dt { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.legal-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.legal-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.legal-contact-link {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; min-width: 0;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text);
}
.legal-contact-link:hover { text-decoration: none; border-color: var(--border-strong); }
.legal-contact-link > .icon { color: var(--accent); margin-top: 2px; }
.legal-contact-link > span { display: flex; flex-direction: column; min-width: 0; }
.legal-contact-link .muted { overflow-wrap: anywhere; }

/* ---------- Document ---------- */
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
.legal-layout:not(:has(.legal-toc)) { grid-template-columns: minmax(0, 1fr); }
.legal-toc { position: sticky; top: calc(72px + var(--safe-top)); max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; }
.legal-toc-box summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 0 10px;
}
.legal-toc-box summary::-webkit-details-marker { display: none; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 1px; }
.legal-toc li { counter-increment: toc; }
.legal-toc li a, .legal-toc-extra {
    display: flex; gap: 8px; padding: 6px 10px; border-radius: var(--radius-xs); border-left: 2px solid transparent;
    color: var(--text-2); font-size: 13.5px; line-height: 1.35;
}
.legal-toc li a::before { content: counter(toc) "."; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 18px; }
.legal-toc li a:hover, .legal-toc-extra:hover { text-decoration: none; background: var(--surface-2); color: var(--text); }
.legal-toc li a.is-active { color: var(--accent-text); border-left-color: var(--accent); background: var(--accent-soft); }
.legal-toc-extra { margin-top: 8px; align-items: center; color: var(--muted); }

.legal-main { min-width: 0; }
.legal-content { counter-reset: legal-sec; font-size: 16px; line-height: 1.7; color: var(--text-2); max-width: 74ch; }
.legal-content > * + * { margin-top: 14px; }
.legal-content h2 {
    counter-increment: legal-sec; display: flex; gap: 12px; align-items: baseline;
    margin-top: 40px; padding-top: 4px; scroll-margin-top: 80px;
    font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--text); line-height: 1.15;
}
.legal-content h2::before { content: counter(legal-sec); color: var(--accent-text); font-variant-numeric: tabular-nums; min-width: 1.1em; }
.legal-content h3 { margin-top: 26px; font-size: 17.5px; font-weight: 700; color: var(--text); scroll-margin-top: 80px; }
.legal-content h4 { margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--text); }
.legal-content > aside:first-child { margin-top: 0; }
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-content a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-content ul, .legal-content ol { padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.legal-content li::marker { color: var(--muted); }
.legal-content ol > li::marker { font-weight: 700; }
.legal-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-3); color: var(--text); white-space: nowrap; }
.legal-content hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
.legal-callout {
    padding: 16px 18px; border-radius: var(--radius-sm);
    background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--text);
}
.legal-callout > * + * { margin-top: 8px; }
.legal-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.legal-table th { background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13px; white-space: nowrap; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { color: var(--text); }

.legal-cookie-choices { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.legal-cookie-choices .btn { flex-shrink: 0; }

.legal-history { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.legal-history h2, .legal-related h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.legal-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.legal-versions li { position: relative; padding: 0 0 18px 24px; display: flex; flex-direction: column; gap: 4px; }
.legal-versions li::before { content: ""; position: absolute; left: 5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.legal-versions li::after { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 1px; background: var(--border); }
.legal-versions li:last-child::after { display: none; }
.legal-versions li.is-current::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.legal-version-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.legal-versions p { color: var(--text-2); max-width: 70ch; }
.legal-versions a { color: var(--accent-text); font-weight: 600; }
.legal-questions { margin-top: 28px; }
.legal-related { margin-top: 10px; }
.legal-related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-related-list a {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
    border: 1px solid var(--border); border-radius: var(--pill); background: var(--surface); color: var(--text-2); font-size: 14px; font-weight: 600;
}
.legal-related-list a:hover { text-decoration: none; border-color: var(--accent); color: var(--text); }
.legal-related-list .icon { color: var(--accent); }

@media (max-width: 1180px) {
    .legal-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 1080px) {
    .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .legal-toc { position: static; max-height: none; margin-bottom: 22px; }
    .legal-toc-box { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 4px 12px; }
    .legal-toc-box summary { padding: 10px 0; }
    .legal-toc-box[open] { padding-bottom: 10px; }
}
@media (max-width: 900px) {
    .legal-hub, .legal-doc { padding: 4px 16px 32px; }
    .legal-toc { position: static; max-height: none; margin-bottom: 22px; }
    .legal-toc-box { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 4px 12px; }
    .legal-toc-box summary { padding: 10px 0; }
    .legal-toc-box[open] { padding-bottom: 10px; }
    .legal-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .legal-hero { padding: 18px 0 18px; margin-bottom: 20px; }
    .legal-content { font-size: 15.5px; }
    .legal-content h2 { font-size: 24px; margin-top: 32px; }
    .legal-cookie-choices { flex-direction: column; align-items: stretch; }
    /* Tables become a stack of cards, each cell labelled. */
    .legal-table { border: 0; overflow: visible; }
    .legal-table table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
    .legal-table thead { display: none; }
    .legal-table tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--surface); }
    .legal-table td { border-bottom: 1px solid var(--border); padding: 8px 12px; }
    .legal-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
    .legal-table tr td:last-child { border-bottom: 0; }
}

/* ---------- Agreeing to updated documents ---------- */
.legal-accept { max-width: 480px; }
.legal-accept h2 { font-size: 34px; }
.legal-accept-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.legal-accept-doc { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.legal-accept-head { display: flex; gap: 12px; align-items: center; }
.legal-accept-head > div { display: flex; flex-direction: column; }
.legal-accept-summary { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.legal-accept-summary strong { color: var(--text); }
.legal-accept .form { gap: 14px; }
.legal-accept-alt { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 6px; border-top: 1px solid var(--border); }
.legal-accept-alt a { color: var(--accent-text); }

/* ---------- Sign-up agreement ---------- */
.signup-consent { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.signup-consent.has-error { border-color: var(--danger); }
.signup-consent .check { font-weight: 500; color: var(--text-2); line-height: 1.45; }
.signup-consent a { color: var(--accent-text); font-weight: 600; }
.signup-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.signup-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Admin: Legal pages ---------- */
.alert-warn { background: var(--warn-soft); color: var(--warn-text); }
.radio-card.is-disabled { opacity: .55; cursor: not-allowed; }
.legal-admin-docs .legal-card-icon { width: 34px; height: 34px; border-radius: 10px; }
.legal-doc-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.legal-doc-row:first-of-type { border-top: 0; }
.legal-doc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.legal-doc-row-main strong a { color: var(--text); }
.legal-doc-row-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.legal-doc-row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.legal-meter { width: 120px; height: 6px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; }
.legal-meter > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.legal-editor textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; min-height: 520px; resize: vertical; tab-size: 2; }
.legal-editor .legal-editor-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.legal-placeholders { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.legal-placeholders dt code { font-size: 12px; }
.legal-placeholders dd { margin: 0; color: var(--text-2); }
.legal-preview { padding: 20px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg); max-height: 720px; overflow-y: auto; }
.legal-preview .legal-content { max-width: none; }
.legal-rev-list { list-style: none; margin: 0; padding: 0; }
.legal-rev-list li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); }
.legal-rev-list li:first-child { border-top: 0; }
.legal-rev-list .legal-rev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.legal-rev-list .legal-rev-main p { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .legal-doc-row { flex-wrap: wrap; }
    .legal-doc-row-side { width: 100%; justify-content: flex-end; }
    .legal-editor textarea { min-height: 380px; }
}

/* ---------- Printing a legal page ---------- */
@media print {
    body:has(.legal-doc) { background: #fff; color: #000; }
    body:has(.legal-doc) .sidebar-left, body:has(.legal-doc) .sidebar-right, body:has(.legal-doc) .topbar-mobile,
    body:has(.legal-doc) .bottom-nav, body:has(.legal-doc) .guest-bar, body:has(.legal-doc) .page-head,
    body:has(.legal-doc) .announcement, body:has(.legal-doc) .toasts, body:has(.legal-doc) .alert:not(.legal-alert),
    .legal-toc, .legal-related, .legal-cookie-choices, .legal-versions a { display: none !important; }
    body:has(.legal-doc) .app-shell { display: block; }
    body:has(.legal-doc) .main { border: 0; padding: 0; min-height: 0; background: #fff; }
    .legal-doc { padding: 0; }
    .legal-layout { display: block; }
    .legal-hero { border-color: #ccc; }
    .legal-hero h1, .legal-content h2, .legal-content h3, .legal-content strong, .legal-history h2, .legal-panel h2 { color: #000; }
    .legal-content, .legal-versions p, .legal-meta, .legal-panel .muted { color: #222; }
    .legal-eyebrow { background: none; color: #000; padding: 0; }
    .legal-content { max-width: none; font-size: 11pt; line-height: 1.5; }
    .legal-content h2 { break-after: avoid; margin-top: 22pt; }
    .legal-content h2::before { color: #000; }
    .legal-content a { color: #000; }
    .legal-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
    .legal-callout { background: #f3f3f3; border-color: #999; color: #000; }
    .legal-table, .legal-table th, .legal-table td, .legal-panel { border-color: #ccc; background: #fff; }
    .legal-table tr { break-inside: avoid; }
    .legal-panel { box-shadow: none; }
}

/* ==========================================================================
   Fuel prices (app/pages/fuel.php, fuel_station.php, assets/js/fuel.js)
   ========================================================================== */
/* Chart series: validated as a pair for colour-blind separation and contrast in each theme. */
:root, [data-theme="dark"] { --chart-1: #f0521a; --chart-2: #2f93e8; --chart-grid: #262a30; }
[data-theme="light"] { --chart-1: #e8460c; --chart-2: #1b7fd6; --chart-grid: #e6e8eb; }

.main:has(.fuel-app) { padding-bottom: 0; }
body.is-guest .app-shell:has(.fuel-app) { padding-bottom: 0; }
body.is-guest .fuel-app { height: calc(100dvh - 84px); }
.fuel-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 520px; position: relative; }
.fuel-bar { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: calc(10px + var(--safe-top)) 16px 10px; border-bottom: 1px solid var(--border); background: var(--bg); position: relative; z-index: 30; }
.fuel-bar-title { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.fuel-bar-title h1 { font-family: var(--font-display); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fuel-bar-title h1 .icon { color: var(--accent); }
.fuel-search { position: relative; display: flex; gap: 8px; flex: 1 1 340px; max-width: 520px; }
.fuel-search .search-box { flex: 1; height: 40px; }
.fuel-near { flex-shrink: 0; }
.fuel-near.is-busy .icon { animation: fuel-spin 1s linear infinite; }
@keyframes fuel-spin { to { transform: rotate(360deg); } }
.fuel-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; max-height: 60vh; overflow-y: auto; }
.fuel-suggest-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-xs); background: none; text-align: left; }
.fuel-suggest-item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.fuel-suggest-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuel-suggest-item:hover, .fuel-suggest-item.active { background: var(--surface-2); }
.fuel-suggest-icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.fuel-suggest-empty { padding: 10px; }
.fuel-bar-controls { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; }
.fuel-fuels { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.fuel-fuels::-webkit-scrollbar { display: none; }
.fuel-fuel { flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.fuel-fuel:hover { background: var(--surface-2); color: var(--text); }
.fuel-fuel[aria-checked="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.fuel-filter-btn .badge { margin-left: 2px; }
.fuel-filter-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

.fuel-filters { position: absolute; z-index: 50; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; padding: 16px; max-height: min(70vh, 560px); overflow-y: auto; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.fuel-bar + .fuel-filters { top: auto; }
.fuel-filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.fuel-filters legend { font-weight: 700; font-size: 13px; color: var(--text-2); margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; padding: 0; }
.fuel-filters .check { font-size: 14px; }
.fuel-filters .check > span { display: inline-flex; align-items: center; gap: 6px; }
.fuel-filters .check .icon { color: var(--muted); }
.search-box-sm { height: 34px; padding: 0 12px; }
.fuel-brand-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding-right: 4px; }
.fuel-filters-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fuel-filters-head h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.fuel-filters-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }

.fuel-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.fuel-side { position: relative; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--bg); }
.fuel-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.fuel-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 14px; position: relative; }
.fuel-tab:hover { color: var(--text); background: var(--surface-2); }
.fuel-tab.active { color: var(--text); font-weight: 700; }
.fuel-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 3px; border-radius: 3px; background: var(--accent); }
.fuel-pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fuel-pane.is-loading { opacity: .55; transition: opacity .2s; }
.fuel-loading { padding: 18px 16px; }
.fuel-summary { padding: 12px 16px 4px; }
.fuel-summary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fuel-summary-stats > div { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; min-width: 0; }
.fuel-summary-stats .label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.fuel-summary-stats strong { font-family: var(--font-display); font-size: 20px; line-height: 1.15; }
.fuel-summary-stats strong small { font-size: .6em; margin-left: 1px; }
.fuel-sort { padding: 14px 16px 6px; display: flex; align-items: center; gap: 8px; }
.fuel-sort-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuel-sort-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.fuel-sort select { height: 32px; padding: 0 10px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; }
.fuel-list { list-style: none; margin: 0; padding: 0 8px 16px; }
.fuel-list-empty { padding: 24px 12px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fuel-list-more { padding: 0 16px 24px; }
.fuel-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 8px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; }
.fuel-item:hover { background: var(--surface-2); }
.fuel-item.active { background: var(--accent-soft); }
.fuel-item-rank { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.fuel-item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fuel-item-main strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuel-item-main > .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuel-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.fuel-saved-mark { color: var(--accent); font-size: 11px; vertical-align: 1px; }
.fuel-stale { color: var(--warn-text); }
.fuel-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); }
.fuel-tag.ok { background: var(--success-soft); color: var(--success-text); }
.fuel-tag.shut { background: var(--surface-3); color: var(--text-2); }
.fuel-tag.warn { background: var(--warn-soft); color: var(--warn-text); }
.fuel-item-price { font-family: var(--font-display); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.fuel-item-price small { font-size: .6em; }
.fuel-item-price::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tier, var(--border-strong)); }
.fuel-item-price.t1 { --tier: var(--success); }
.fuel-item-price.t2 { --tier: var(--warn); }
.fuel-item-price.t3 { --tier: var(--danger); }
.fuel-item-price.doubt { color: var(--text-2); }

.fuel-detail { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--bg); outline: none; }
.fuel-detail-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.fuel-detail-bar .push-left { margin-left: auto; margin-right: 0; }
.fuel-detail-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.fuel-detail.is-loading .fuel-detail-body { opacity: .55; }

.fuel-map-wrap { position: relative; min-width: 0; min-height: 0; }
.fuel-map { position: absolute; inset: 0; background: var(--surface-2); z-index: 0; }
/* The Map / Satellite thumbnail has the bottom-left corner; the price key sits just to its right. */
.fuel-map-wrap { --fuel-layers: 80px; }
.fuel-map .leaflet-control.map-layers { margin: 0 0 24px 12px; }
.fuel-legend { position: absolute; left: calc(12px + var(--fuel-layers)); bottom: 24px; z-index: 400; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 14px; border-radius: var(--pill); background: var(--overlay); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); font-size: 12.5px; font-weight: 600; color: var(--text-2); max-width: calc(100% - 24px - var(--fuel-layers)); }
.fuel-legend strong { color: var(--text); font-size: 13px; padding-right: 2px; }
.fuel-legend span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.fuel-map-note { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); font-size: 14px; max-width: calc(100% - 24px); }
.fuel-view-toggle { display: none; }
.fuel-attrib { flex-shrink: 0; margin: 0; padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); background: var(--bg); }
.fuel-attrib a, .fuel-source a { text-decoration: underline; text-underline-offset: 2px; }
.fuel-noscript { padding: 16px; }

/* ---------- Desktop and tablet: a full-height map application ----------
   The page runs from the menu to the right edge of the window (the menu stays exactly where it is on other
   pages: the gutter repeats the centring of the normal three-column layout). Search, fuel, filters and results
   sit in one panel on the left; the map fills the rest. */
:root { --fuel-gutter: max(0px, (100% - var(--shell-w)) / 2); --fuel-panel: 400px; }
@media (min-width: 1600px) { :root { --fuel-panel: 440px; } }
@media (max-width: 1264px) { :root { --fuel-panel: 370px; } }
@media (max-width: 1001px) { :root { --fuel-gutter: max(0px, (100% - var(--left-w) - var(--main-w) - var(--gap-w) - var(--right-w) - var(--edge-w)) / 2); --fuel-panel: 330px; } }
@media (max-width: 900px) { :root { --fuel-panel: 300px; } }
@media (min-width: 701px) {
    .app-shell:has(.fuel-app) { justify-content: stretch; grid-template-columns: var(--fuel-gutter) var(--left-w) minmax(0, 1fr); }
    .app-shell:has(.fuel-app) > .sidebar-left { grid-column: 2; grid-row: 1; }
    .app-shell:has(.fuel-app) > .main { grid-column: 3; grid-row: 1; border-right: 0; }
    .fuel-app { display: grid; grid-template-columns: var(--fuel-panel) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .fuel-body { display: contents; }

    .fuel-bar {
        grid-column: 1; grid-row: 1;
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title title title" "search near filter" "fuels fuels fuels";
        gap: 12px 8px; padding: calc(16px + var(--safe-top)) 18px 14px; border-right: 1px solid var(--border);
    }
    .fuel-bar-title { grid-area: title; margin: 0; gap: 2px; }
    .fuel-bar-title h1 { font-size: 23px; }
    .fuel-search { display: contents; }
    .fuel-search .search-box { grid-area: search; height: 42px; min-width: 0; }
    .fuel-near { grid-area: near; width: 42px; height: 42px; padding: 0; }
    .fuel-near span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* Drops down over the fuel selector and the results, just under the search box. */
    .fuel-suggest { grid-column: 1 / -1; grid-row: 3; position: absolute; top: 0; left: 0; right: 0; z-index: 60; }
    .fuel-bar-controls { display: contents; }
    .fuel-filter-btn { grid-area: filter; height: 42px; padding: 0 14px; }
    .fuel-fuels { grid-area: fuels; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; overflow: visible; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
    .fuel-fuel { height: 30px; padding: 0 6px; border: 0; border-radius: 7px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
    .fuel-fuel:hover { background: var(--surface-3); }
    .fuel-fuel[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .22), inset 0 0 0 1px var(--border-strong); }

    .fuel-side { grid-column: 1; grid-row: 2; }
    /* The data credit is in the map's attribution corner on wide screens; the privacy note is on the Near me button. */
    .fuel-attrib { display: none; }
    .fuel-map-wrap { grid-column: 2; grid-row: 1 / -1; }
    .fuel-legend { left: calc(16px + var(--fuel-layers)); bottom: 28px; max-width: calc(100% - 28px - var(--fuel-layers)); }
    .fuel-map .leaflet-control.map-layers { margin: 0 0 28px 16px; }

    /* Filters open as a drawer over the results, under the search and fuel controls. */
    .fuel-filters, .fuel-bar + .fuel-filters {
        grid-column: 1 / 2; grid-row: 2 / -1; position: absolute; inset: 0; z-index: 40;
        display: flex; flex-direction: column; gap: 20px; max-height: none; overflow-y: auto; overscroll-behavior: contain;
        padding: 16px 18px 0; background: var(--bg); border-right: 1px solid var(--border); border-bottom: 0; box-shadow: none;
    }
    .fuel-filters fieldset { gap: 10px; }
    .fuel-filters legend { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
    .fuel-brand-list { max-height: 260px; }
    .fuel-filters-foot { position: sticky; bottom: 0; margin-top: auto; padding: 12px 0 16px; background: var(--bg); }
    .fuel-filters-foot .btn-primary { flex: 1; }

    .fuel-pane, .fuel-detail-body, .fuel-filters { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
}
/* The panel and the map adapt to their own width (narrower on laptops and tablets). */
.fuel-fuel-short { display: none; }
@media (min-width: 701px) {
    .fuel-bar { container: fuelbar / inline-size; }
    .fuel-side { container: fuelside / inline-size; }
    .fuel-map-wrap { container: fuelmap / inline-size; }
}
/* Header: short fuel names and an icon-only Filters button when the panel is narrow. */
@container fuelbar (max-width: 340px) {
    .fuel-fuel-full { display: none; }
    .fuel-fuel-short { display: inline; }
    .fuel-filter-btn { width: 42px; padding: 0; position: relative; }
    .fuel-filter-btn > span:not(.badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .fuel-filter-btn .badge { position: absolute; top: -6px; right: -6px; margin: 0; }
    .fuel-bar-title h1 { font-size: 20px; }
}
/* Results: tighter figures and rows. */
@container fuelside (max-width: 360px) {
    .fuel-summary { padding: 10px 12px 2px; }
    .fuel-summary-stats { gap: 6px; }
    .fuel-summary-stats > div { padding: 7px 8px; }
    .fuel-summary-stats .label { font-size: 10px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fuel-summary-stats strong { font-size: 19px; }
    .fuel-sort { padding: 12px 12px 6px; }
    .fuel-sort-label { display: none; }
    .fuel-list { padding: 0 4px 16px; }
    .fuel-item { gap: 8px; padding: 10px 8px; }
    .fuel-item-price { font-size: 20px; }
}
@container fuelmap (max-width: 560px) {
    .fuel-map-wrap { --fuel-layers: 68px; }
    .fuel-map .leaflet-control.map-layers { margin: 0 0 26px 10px; }
    .fuel-map .map-layers-btn { --thumb: 56px; }
    .fuel-legend { gap: 4px 10px; padding: 6px 12px; font-size: 12px; left: calc(10px + var(--fuel-layers)); bottom: 26px; max-width: calc(100% - 20px - var(--fuel-layers)); }
    .fuel-legend strong { display: none; }
    .fuel-legend .fuel-pin.sw { width: 20px; height: 13px; }
}

/* Map pins: the price on a pill, ringed by how it compares with the rest of the view (the key says which is which). */
.fuel-pin-wrap { background: none; border: 0; }
.fuel-pin {
    --tier: var(--border-strong);
    position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
    display: inline-flex; align-items: center; padding: 3px 7px; border-radius: var(--pill);
    background: var(--surface); color: var(--text); border: 2px solid var(--tier);
    font: 700 12px/1.1 var(--font); white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transition: transform .12s var(--ease);
}
.fuel-pin::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--tier); margin-top: 0; }
.fuel-pin.t1 { --tier: var(--success); }
.fuel-pin.t2 { --tier: var(--warn); }
.fuel-pin.t3 { --tier: var(--danger); }
.fuel-pin.best { --tier: var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); }
.fuel-pin.stale { border-style: dashed; color: var(--text-2); }
/* A price that looks wrong: neutral, with a "?", never a band colour. */
.fuel-pin.doubt { --tier: var(--border-strong); border-style: dashed; background: var(--surface-2); color: var(--text-2); }
/* Forecourts side by side, shown as one pin: the cheapest price and how many more (click to fan them out). */
.fuel-pin.is-group { --tier: var(--accent); gap: 5px; box-shadow: 3px 3px 0 -1px var(--surface), 3px 3px 0 1px var(--accent), 0 2px 6px rgba(0, 0, 0, .35); }
.fuel-pin.is-group i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: var(--pill); background: var(--accent-fill); color: var(--accent-ink); line-height: 15px; }
.fuel-pin.closed { color: var(--muted); text-decoration: line-through; }
.fuel-pin.saved::before { content: ''; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--info); border: 2px solid var(--surface); }
.fuel-pin.selected { transform: translateX(-50%) scale(1.22); z-index: 2; box-shadow: 0 0 0 3px var(--accent-soft), 0 4px 14px rgba(0, 0, 0, .45); }
.fuel-pin.hover, .leaflet-marker-icon:hover .fuel-pin, .leaflet-marker-icon:focus-visible .fuel-pin { transform: translateX(-50%) scale(1.15); }
.fuel-pin.here { --tier: var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); font-size: 14px; padding: 4px 8px; }
.fuel-pin.sw { position: relative; left: 0; bottom: 0; transform: none; display: inline-block; width: 26px; height: 16px; padding: 0; box-shadow: none; flex-shrink: 0; font-size: 10px; line-height: 12px; text-align: center; }
.fuel-pin.sw::after { display: none; }
.leaflet-marker-icon:focus-visible { outline: none; }
.fuel-cluster-wrap { background: none; border: 0; }
.fuel-cluster { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); color: var(--text); border: 3px solid var(--accent); box-shadow: 0 3px 10px rgba(0, 0, 0, .4); line-height: 1.05; text-align: center; }
.fuel-cluster b { font-size: 14px; }
.fuel-cluster small { font-size: 10px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.fuel-cluster.lg b { font-size: 15px; }
path.fuel-me { fill: var(--info); fill-opacity: 1; stroke: #fff; stroke-width: 3; }
path.fuel-me-accuracy { fill: var(--info); fill-opacity: .12; stroke: var(--info); stroke-opacity: .5; stroke-width: 1; }

/* ---------- Forecourt card ---------- */
.fuel-card { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.fuel-card-head { display: flex; flex-direction: column; gap: 10px; }
.fuel-card-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fuel-card-title h1, .fuel-card-title h2 { font-family: var(--font-display); font-size: 23px; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.fuel-card-title h2 a:hover { text-decoration: underline; }
.fuel-brand-chip { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.fuel-card-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fuel-card-tags .badge { display: inline-flex; align-items: center; gap: 4px; }
.fuel-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.fuel-open .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.fuel-open.tone-success { color: var(--success-text); }
.fuel-open.tone-success .dot { background: var(--success); }
.fuel-open.tone-danger { color: var(--danger-text); }
.fuel-open.tone-danger .dot { background: var(--danger); }
.fuel-prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.fuel-price-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.fuel-price-tile.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fuel-price-tile.is-suspect .fuel-price { text-decoration: line-through; color: var(--muted); }
.fuel-price-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.fuel-code { display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--surface-3); color: var(--text); font-size: 11px; font-weight: 800; }
.fuel-price { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.05; }
.fuel-price small { font-size: .55em; margin-left: 1px; }
.fuel-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.fuel-delta.cheaper { color: var(--success-text); }
.fuel-delta.dearer { color: var(--danger-text); }
.fuel-updated { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.fuel-updated.stale { color: var(--warn-text); }
.fuel-sub { line-height: 1.3; }
.fuel-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.fuel-note.warn { color: var(--warn-text); }
.fuel-empty { display: flex; gap: 10px; align-items: center; padding: 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px dashed var(--border-strong); }
.fuel-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fuel-save.is-saved { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.fuel-alert-note { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info-text); font-size: 13.5px; font-weight: 600; }
.fuel-alert-note span { flex: 1; }
.fuel-alert-note .btn { color: inherit; }
.fuel-section { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.fuel-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fuel-section-head h3 { font-size: 16px; font-weight: 700; }
.fuel-best { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--success-text); font-size: 14px; }
.segmented-sm { padding: 3px; gap: 3px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.segmented-sm .seg { flex: 1 0 auto; border: 0; background: none; border-radius: 7px; padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.segmented-sm .seg.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.fuel-hours { width: 100%; border-collapse: collapse; font-size: 14px; }
.fuel-hours th, .fuel-hours td { padding: 6px 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 500; }
.fuel-hours td { text-align: right; color: var(--text-2); }
.fuel-hours tr:last-child th, .fuel-hours tr:last-child td { border-bottom: 0; }
.fuel-hours tr.is-today th, .fuel-hours tr.is-today td { font-weight: 700; color: var(--text); }
.fuel-amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; font-size: 14px; }
.fuel-amenities li { display: flex; align-items: center; gap: 8px; }
.fuel-amenities .icon { color: var(--accent); }
.fuel-sold { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fuel-details dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.fuel-details dt { color: var(--muted); font-weight: 600; }
.fuel-details dd { margin: 0; overflow-wrap: anywhere; }
.fuel-source { display: block; line-height: 1.5; }
.fuel-source .icon { margin-right: 4px; vertical-align: -2px; }
.fuel-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fuel-mini-list li a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.fuel-mini-list li:last-child a { border-bottom: 0; }
.fuel-mini-list li a:hover { text-decoration: none; background: var(--surface-2); }
.fuel-mini-list.numbered { counter-reset: fuelrank; }
.fuel-mini-list.numbered li a::before { counter-increment: fuelrank; content: counter(fuelrank); width: 20px; flex-shrink: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.fuel-mini-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.fuel-mini-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuel-mini-main .icon { vertical-align: -2px; }
.fuel-mini-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.fuel-mini-price .fuel-price { font-size: 22px; }
.fuel-saved { padding: 4px 12px; }
.fuel-saved-foot { padding: 10px 16px 24px; }
.fuel-pane > .empty-state { padding: 40px 24px; }

/* ---------- Charts ---------- */
.fuel-chart { position: relative; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fuel-chart-plot { width: 100%; min-height: 150px; border-radius: var(--radius-xs); }
.fuel-chart-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fuel-chart-svg { display: block; overflow: visible; }
.fuel-chart-svg .grid { stroke: var(--chart-grid); stroke-width: 1; }
.fuel-chart-svg .tick { fill: var(--muted); font: 500 11px var(--font); }
.fuel-chart-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fuel-chart-svg .line.tone-1 { stroke: var(--chart-1); }
.fuel-chart-svg .line.tone-2 { stroke: var(--chart-2); }
.fuel-chart-svg .area { stroke: none; opacity: .1; }
.fuel-chart-svg .area.tone-1 { fill: var(--chart-1); }
.fuel-chart-svg .area.tone-2 { fill: var(--chart-2); }
.fuel-chart-svg .dot { stroke: var(--bg); stroke-width: 2; }
.fuel-chart-svg .dot.tone-1 { fill: var(--chart-1); }
.fuel-chart-svg .dot.tone-2 { fill: var(--chart-2); }
.fuel-chart-svg .end-label { fill: var(--text); font: 700 12px var(--font); }
.fuel-chart-svg .cross { stroke: var(--text-2); stroke-width: 1; }
.fuel-chart-svg .hit { fill: transparent; cursor: crosshair; }
.fuel-chart-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 140px; padding: 8px 10px; border-radius: var(--radius-xs); background: var(--surface); box-shadow: var(--shadow); font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.fuel-chart-tip .tip-date { color: var(--muted); font-weight: 600; }
.fuel-chart-tip .tip-row { display: flex; align-items: center; gap: 7px; }
.fuel-chart-tip .tip-row strong { font-size: 14px; }
.fuel-chart-tip .tip-row span { color: var(--text-2); }
.fuel-chart .key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.fuel-chart .key.tone-1 { background: var(--chart-1); }
.fuel-chart .key.tone-2 { background: var(--chart-2); }
.fuel-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-2); }
.fuel-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fuel-chart-table summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600; }
.fuel-chart-table table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.fuel-chart-table th, .fuel-chart-table td { text-align: left; padding: 4px 0; border-bottom: 1px solid var(--border); }
.fuel-chart-table td:last-child, .fuel-chart-table th:last-child { text-align: right; }

/* ---------- UK prices (insights) ---------- */
.fuel-insights { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.fuel-insights .fuel-section-head { margin-top: 8px; }
.fuel-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fuel-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); text-align: left; }
.fuel-tile:hover { border-color: var(--border-strong); }
.fuel-tile.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fuel-tile-label { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.fuel-tile-value .fuel-price { font-size: 26px; }
.fuel-range { line-height: 1.5; }
.fuel-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fuel-bar-row { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) 76px; gap: 10px; align-items: center; font-size: 13px; }
.fuel-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.fuel-bar-track { display: grid; grid-template-columns: 1fr 1fr; height: 16px; position: relative; }
.fuel-bar-track::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border-strong); }
.fuel-bar-half { display: flex; align-items: center; }
.fuel-bar-half.left { justify-content: flex-end; }
.fuel-dbar { display: block; height: 14px; min-width: 2px; }
.fuel-dbar.cheaper { background: var(--chart-2); border-radius: 4px 0 0 4px; }
.fuel-dbar.dearer { background: var(--chart-1); border-radius: 0 4px 4px 0; }
.fuel-bar-value { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fuel-bar-value .muted { font-size: 11.5px; }

/* ---------- Forecourt page ---------- */
.fuel-card-main, .fuel-card-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fuel-station-page { container: fuelpage / inline-size; }
/* A wide forecourt page: the story on the left, the reference details in a column that stays in view. */
@container fuelpage (min-width: 820px) {
    .fuel-station-page .fuel-card { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 32px; align-items: start; padding: 24px 24px 40px; }
    .fuel-station-page .fuel-card-aside { position: sticky; top: calc(72px + var(--safe-top)); }
    .fuel-station-page .fuel-card-aside > .fuel-section:first-child { border-top: 0; padding-top: 0; }
    .fuel-station-page .fuel-amenities { grid-template-columns: minmax(0, 1fr); }
}
.fuel-mini-map { height: 260px; border-bottom: 1px solid var(--border); }
.fuel-mini-map .map-layers-btn { --thumb: 52px; }
.fuel-station-page .fuel-card { padding: 20px 16px 32px; }
.fuel-save-form .radio-list { display: flex; flex-direction: column; gap: 6px; }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.radio-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio-row input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.fuel-save-form { display: flex; flex-direction: column; gap: 14px; }
.fuel-save-form .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@media (max-width: 700px) {
    .fuel-app, body.is-guest .fuel-app { height: calc(100dvh - 56px - var(--safe-top) - 62px - env(safe-area-inset-bottom)); min-height: 420px; }
    .fuel-bar { padding: 8px 12px; gap: 8px; }
    .fuel-bar-title { flex-direction: row; align-items: baseline; gap: 8px; flex: 1 1 100%; }
    .fuel-bar-title h1 { font-size: 20px; }
    .fuel-bar-title .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fuel-search { flex: 1 1 100%; max-width: none; }
    .fuel-near span { display: none; }
    .fuel-near { width: 40px; padding: 0; }
    .fuel-filter-btn span:not(.badge) { display: none; }
    .fuel-filter-btn { padding: 0 10px; }
    .fuel-filters, .fuel-bar + .fuel-filters { grid-template-columns: minmax(0, 1fr); max-height: calc(100dvh - 200px); position: fixed; top: auto; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 1100; border-radius: var(--radius) var(--radius) 0 0; }
    .fuel-filters-foot { position: sticky; bottom: -16px; background: var(--surface); padding-bottom: 16px; }
    .fuel-body { position: relative; display: block; }
    .fuel-side, .fuel-map-wrap { position: absolute; inset: 0; border: 0; }
    .fuel-app[data-view="map"] .fuel-side { visibility: hidden; }
    .fuel-app[data-view="list"] .fuel-map-wrap { visibility: hidden; }
    .fuel-view-toggle { display: inline-flex; position: absolute; z-index: 450; left: 50%; bottom: 16px; transform: translateX(-50%); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
    .fuel-app[data-view="list"] .fuel-view-toggle { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); visibility: visible; }
    .fuel-map .leaflet-control.map-layers { margin: 0 0 26px 10px; }
    .fuel-map .map-layers-btn { --thumb: 56px; }
    .fuel-legend { bottom: auto; top: 8px; left: 52px; right: auto; max-width: calc(100% - 60px); flex-direction: row; flex-wrap: wrap; gap: 4px 9px; padding: 5px 10px; font-size: 11px; border-radius: var(--radius-sm); }
    .fuel-legend strong { display: none; }
    .fuel-legend span { gap: 5px; }
    .fuel-legend .fuel-pin.sw { width: 18px; height: 12px; }
    .fuel-bar-title h1 { white-space: nowrap; flex-shrink: 0; }
    .fuel-attrib { display: none; }
    .fuel-card-title h1, .fuel-card-title h2 { font-size: 24px; }
    .fuel-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fuel-price { font-size: 29px; }
    .fuel-mini-map { height: 200px; }
}
@media (pointer: coarse) {
    .fuel-search .search-box input, .fuel-filters .search-box input, .fuel-sort select { font-size: 16px; }
    .fuel-item { padding: 12px 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .fuel-pin, .fuel-near.is-busy .icon { transition: none; animation: none; }
}
@media (forced-colors: active) {
    .fuel-pin, .fuel-cluster { forced-color-adjust: none; }
}

.kpi .kpi-text { font-size: 19px; line-height: 1.25; }
.admin-toolbar-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.admin-toolbar-row .admin-chips { margin: 0; }
.fuel-admin-sync, .fuel-admin-log-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fuel-admin-price { display: inline-flex; align-items: center; gap: 3px; margin: 1px 6px 1px 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fuel-admin-price.is-flagged { color: var(--warn-text); font-weight: 700; }
.fuel-admin-avgs td, .fuel-admin-avgs th { padding: 8px 10px; }

/* ---------- Club payments: fundraisers, checkout, receipts, club finances ---------- */
.page-head .head-actions-end { margin-left: auto; }
.amount-in { color: var(--success-text); }
.amount-out { color: var(--danger-text); }
.finance-table th.num, .finance-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.finance-table td.actions { text-align: right; width: 1%; }
.finance-table td .block { font-weight: 400; }
.finance-table td:nth-child(3) { min-width: 200px; }
.finance-table .table-user strong { white-space: nowrap; }

/* Fundraiser cards and page */
.fund-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.fund-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.fund-card-cover { display: block; height: 110px; }
.fund-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.fund-card-body h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.fund-card-body h3 a { color: var(--text); }
.fund-card-cta { align-self: flex-start; margin-top: auto; }
.fund-progress { display: flex; flex-direction: column; gap: 4px; }
.fund-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.fund-figures strong { font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--accent-text); }
.fund-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fund-meta span { display: inline-flex; align-items: center; gap: 4px; }
.fund-page { padding-bottom: 24px; }
.fund-cover { border-radius: 0; }
.fund-body { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.fund-club { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 600; color: var(--text-2); }
.fund-title { font-family: var(--font-display); font-size: 23px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.fund-summary { font-size: 17px; color: var(--text-2); }
.fund-beneficiary { display: flex; align-items: center; gap: 8px; }
.fund-beneficiary .icon { color: var(--accent); flex-shrink: 0; }
.fund-progress-lg { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.fund-progress-lg .fund-figures strong { font-size: 36px; }
.fund-donate { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(160deg, var(--accent-soft), transparent 55%), var(--surface); }
.fund-donate .section-title-sm { margin: 0; }
.fund-donate .form-actions .btn { width: 100%; }
.fund-donate-guest { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pay-amounts { gap: 8px; }
.pay-amounts span { min-width: 64px; text-align: center; padding: 9px 16px; font-size: 15px; }
.fund-story { overflow-wrap: anywhere; }
.fund-supporters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fund-supporters li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.fund-supporters li:first-child { border-top: 0; }
.fund-supporters li > div { min-width: 0; flex: 1; }
.fund-supporters p { margin-top: 2px; overflow-wrap: anywhere; }
.fund-supporter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.fund-amount { font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.fund-anon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.table-user .fund-anon { flex-basis: 30px; width: 30px; height: 30px; background: var(--surface-3); color: var(--muted); }
.fund-share { margin: 0; }
/* Club admins' record of donations given in person, on the fundraiser page */
.fund-admin { display: flex; flex-direction: column; gap: 10px; }
.fund-admin .panel-head { margin: 0; }
.fund-admin > p { margin: 0; }
.fund-admin .table-wrap { position: relative; }
.fund-admin .finance-table td:nth-child(3), .finance-funds .finance-table td:nth-child(3) { min-width: 0; }
.finance-funds .finance-table td:first-child { min-width: 220px; }
.finance-funds .finance-table td:first-child .meter { max-width: 240px; }
.finance-funds > p.field-help { margin: 0; padding-top: 0; }
.club-banner > .btn { flex-shrink: 0; align-self: center; }

/* Checkout pieces shared by the join, subs and donate forms */
.pay-summary { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.pay-summary span { font-weight: 600; }
.pay-summary strong { font-family: var(--font-display); font-size: 20px; }
.pay-summary small { grid-column: 1 / -1; }
.pay-methods { border: 0; padding: 0; margin: 0; min-width: 0; }
.pay-methods legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.pay-methods .radio-card .icon { color: var(--accent); }
.pay-secure { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pay-test-note { margin: 10px 0 0; padding: 8px 12px; font-size: 13.5px; }
.club-dues-banner { align-items: center; flex-wrap: wrap; }
.club-dues-banner > div { flex: 1 1 200px; }
.my-membership-pay { align-self: flex-start; margin-top: 4px; }

/* Receipt */
.receipt-page { padding: 16px; }
.receipt { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.receipt-hero { display: flex; gap: 14px; align-items: flex-start; }
.receipt-hero h2 { font-family: var(--font-display); font-size: 23px; font-weight: 700; line-height: 1.15; }
.receipt-icon { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.receipt-hero.is-success .receipt-icon { background: var(--success-soft); color: var(--success); }
.receipt-hero.is-info .receipt-icon { background: var(--info-soft); color: var(--info); }
.receipt-hero.is-warn .receipt-icon { background: var(--warn-soft); color: var(--warn); }
.receipt-hero.is-danger .receipt-icon { background: var(--danger-soft); color: var(--danger); }
.receipt-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.receipt-amount > span:first-child { flex-basis: 100%; }
.receipt-amount strong { font-family: var(--font-display); font-size: 31px; line-height: 1; font-variant-numeric: tabular-nums; }
.receipt-list { display: flex; flex-direction: column; margin: 0; }
.receipt-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.receipt-row:first-child { border-top: 0; }
.receipt-row dt { color: var(--muted); font-size: 14px; }
.receipt-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.receipt-row dd a { color: var(--accent-text); }
.receipt-note a { color: var(--accent-text); }
.receipt-actions { justify-content: flex-start; }
@media (max-width: 480px) { .receipt-row { grid-template-columns: 1fr; gap: 2px; } .receipt { padding: 16px; } }
@media print {
    body:has(.receipt) { background: #fff; color: #000; }
    body:has(.receipt) .sidebar-left, body:has(.receipt) .sidebar-right, body:has(.receipt) .topbar-mobile, body:has(.receipt) .bottom-nav,
    body:has(.receipt) .guest-bar, body:has(.receipt) .page-head, body:has(.receipt) .announcement, body:has(.receipt) .toasts,
    body:has(.receipt) .alert, .receipt-actions { display: none !important; }
    body:has(.receipt) .app-shell { display: block; }
    body:has(.receipt) .main { border: 0; padding: 0; background: #fff; }
    .receipt { border-color: #ccc; background: #fff; color: #000; max-width: none; }
    .receipt .muted, .receipt-row dt { color: #444; }
}

/* Club finances */
.finance-page { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.finance-page > .alert { margin: 0; }
.finance-page > * { min-width: 0; max-width: 100%; }
.finance-page .table-wrap { position: relative; }
.finance-kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.finance-kpi-main { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: linear-gradient(150deg, var(--accent-soft), transparent 60%), var(--surface); }
.finance-kpi-main strong { color: var(--accent-text); }
.finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.finance-grid .panel-head { margin-bottom: 8px; }
.finance-grid .panel > p { margin-bottom: 10px; }
.finance-grid .panel > .btn-block { margin-top: 4px; }
.payout-methods { display: flex; flex-direction: column; gap: 10px; }
.payout-method { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.payout-method.is-chosen { border-color: var(--accent); background: var(--accent-soft); }
.payout-method-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.payout-method-head .icon { color: var(--accent); }
.payout-method-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.payout-paypal { display: flex; flex-direction: column; gap: 8px; }
.payout-paypal .form-row { gap: 10px; }
.finance-tabs { margin-top: 4px; }
.finance-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.finance-filters .admin-chips { margin: 0; }
.finance-help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.finance-help-list li { display: flex; gap: 10px; align-items: flex-start; }
.finance-help-list .icon { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.pay-breakdown { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.pay-breakdown > div { display: flex; justify-content: space-between; gap: 12px; }
.pay-breakdown dt { color: var(--text-2); }
.pay-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
.pay-breakdown-total { padding-top: 6px; border-top: 1px solid var(--border); font-weight: 700; }
.pay-breakdown-total dt { color: var(--text); }
@media (max-width: 560px) { .finance-page { padding: 12px; } .payout-paypal .form-row { grid-template-columns: 1fr; } }

/* Rider's payment history (Settings → Payments) */
.pay-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pay-history li + li { border-top: 1px solid var(--border); }
.pay-history a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--text); }
.pay-history a:hover { background: var(--surface-2); text-decoration: none; }
.pay-history-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.pay-history-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pay-history-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-history-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-variant-numeric: tabular-nums; }

/* Admin → Payments */
.pay-settings-row { margin-bottom: 18px; scroll-margin-top: 80px; }
.copy-field { display: flex; gap: 8px; margin: 10px 0; }
.copy-field input { flex: 1; min-width: 0; font-size: 13px; }
.pay-events { margin: 6px 0 10px; }
.pay-events summary { cursor: pointer; color: var(--accent-text); font-weight: 600; }
.pay-events ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); line-height: 1.7; }
.pay-steps { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
/* Marketplace: in-person sales (distance search, collection and payment details, questions for the seller) */
.mk-near-box { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 6px 0 14px; border: 1px solid var(--border-strong); border-radius: var(--pill); background: var(--surface); color: var(--muted); flex: 0 1 260px; min-width: 0; }
.mk-near-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent); }
.mk-near-box input, .mk-near-box select { height: 38px; border: 0; background: transparent; box-shadow: none; padding: 0 6px; color: var(--text); }
.mk-near-box input { flex: 1; min-width: 0; width: 100%; text-transform: uppercase; }
.mk-near-box input::placeholder { text-transform: none; }
.mk-near-box input:focus, .mk-near-box select:focus { box-shadow: none; outline: none; }
.mk-near-box select { flex: 0 0 auto; width: auto; padding-right: 26px; border-left: 1px solid var(--border); border-radius: 0; }
.mk-hero-links .link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--accent); color: var(--accent-text); font-size: 13.5px; font-weight: 600; }
.mk-hero-links .link-btn:hover { background: var(--accent-soft); text-decoration: none; }
.mk-hero-links .link-btn[disabled] { opacity: .6; cursor: progress; }
.mk-hero-note { display: flex; align-items: center; gap: 6px; margin: 0; }
.mk-hero-note .icon { color: var(--accent); flex-shrink: 0; }
.mk-filter .mk-range input[name="near"] { text-transform: uppercase; }
.mk-filter .mk-range input[name="near"]::placeholder { text-transform: none; }
.mk-locate { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; font-weight: 600; }
.mk-locate[disabled] { opacity: .6; cursor: progress; }
.mk-away { color: var(--text-2); font-weight: 600; }

.mk-handover { margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.mk-handover > div { display: grid; grid-template-columns: 18px 92px minmax(0, 1fr); align-items: baseline; gap: 10px; font-size: 14.5px; }
.mk-handover .icon { color: var(--accent); align-self: center; }
.mk-handover dt { font-weight: 700; color: var(--text); }
.mk-handover dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }

.mk-asks { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mk-asks-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.mk-asks-label .icon { color: var(--accent); }
.mk-asks .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-asks .chip { padding: 7px 12px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.mk-asks .chip:hover { border-color: var(--accent); color: var(--accent-text); }

.mk-postcode-field input { text-transform: uppercase; }
.mk-postcode-field input::placeholder { text-transform: none; }
@media (max-width: 700px) {
    .mk-hero-search { flex-wrap: wrap; }
    .mk-hero-search .search-box { flex: 1 1 100%; }
    .mk-near-box { flex: 1 1 0; }
    .mk-handover > div { grid-template-columns: 18px minmax(0, 1fr); }
    .mk-handover dd { grid-column: 2; }
}

/* ------------------------------------------------------------------ */
/* Trade directory                                                      */
/* ------------------------------------------------------------------ */
.hide-sm { display: inline; }
@media (max-width: 560px) { .hide-sm { display: none; } }
.flip-y { transform: scaleY(-1); }
.chip-sm { padding: 2px 8px; font-size: 12px; }
.biz-logo { border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); }
.biz-logo.club-fallback { border: 0; }
.biz-verified { display: inline-flex; color: var(--info); margin-left: 4px; vertical-align: -2px; }
.biz-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.biz-open { color: var(--muted); font-weight: 600; }
.biz-open.is-open { color: var(--success-text); }

/* Directory */
.biz-hero { margin: 16px 16px 0; padding: 28px 28px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: radial-gradient(120% 140% at 100% 0%, var(--accent-soft), transparent 55%), var(--surface); }
.biz-hero-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 4px 10px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.biz-hero h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.biz-hero > p { margin-top: 8px; max-width: 620px; font-size: 15px; line-height: 1.5; }
.biz-search { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; align-items: center; margin-top: 20px; padding: 6px; border-radius: var(--pill); background: var(--bg); border: 1px solid var(--border-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.biz-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.biz-search-field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; min-width: 0; color: var(--muted); }
.biz-search-field + .biz-search-field { border-left: 1px solid var(--border); }
.biz-search-field input, .biz-search-field select { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-size: 15px; }
.biz-search-field select { cursor: pointer; font-weight: 600; font-size: 14px; }
.biz-search-field select option { background: var(--surface); }
.biz-search-field:focus-within { color: var(--accent); }
.biz-search .btn { height: 44px; padding: 0 22px; margin-left: 6px; }
.biz-hero > .alert { margin-top: 12px; }
@media (max-width: 760px) {
    .biz-hero { margin: 12px 12px 0; padding: 20px 16px 14px; }
    .biz-hero h2 { font-size: 24px; }
    .biz-search { grid-template-columns: minmax(0, 1fr) auto; border-radius: var(--radius); padding: 4px; }
    .biz-search-q { grid-column: 1 / -1; border-bottom: 1px solid var(--border); }
    .biz-search-field + .biz-search-field { border-left: 0; }
    .biz-search-near + .biz-search-radius { border-left: 1px solid var(--border); }
    .biz-search .btn { grid-column: 1 / -1; margin: 4px 0 0; border-radius: calc(var(--radius) - 4px); }
}
@media (pointer: coarse) { .biz-search-field input, .biz-search-field select { font-size: 16px; } }
.biz-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (max-width: 760px) { .biz-types { flex-wrap: nowrap; margin: 14px -16px 0; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; } }
.biz-types::-webkit-scrollbar { display: none; }
.biz-type-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 12px; border-radius: var(--pill); border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.biz-type-chip .icon { color: var(--accent); }
.biz-type-chip:hover { background: var(--surface-2); }
.biz-type-chip.active { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.biz-type-chip.active .icon { color: var(--accent-ink); }
.biz-type-count { min-width: 20px; padding: 1px 6px; border-radius: var(--pill); background: var(--surface-2); color: var(--text-2); font-size: 11.5px; font-weight: 700; text-align: center; }
.biz-type-chip.active .biz-type-count { background: rgba(255, 255, 255, .22); color: inherit; }
.biz-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 18px 16px 2px; }
.biz-result-count { color: var(--text-2); font-size: 14px; }
.biz-result-count strong { color: var(--text); }
.biz-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.biz-filter { display: flex; align-items: center; height: 38px; padding-left: 14px; border-radius: var(--pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; max-width: 100%; }
.biz-filter:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.biz-filter select { min-width: 0; max-width: 200px; height: 100%; padding: 0 10px 0 6px; border: 0; outline: none; background: transparent; color: var(--text); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.biz-filter select option { background: var(--surface); }
@media (pointer: coarse) { .biz-filter select { font-size: 16px; } }
@media (max-width: 560px) { .biz-filters { width: 100%; } .biz-filter { flex: 1 1 140px; } .biz-filter:first-of-type { flex-basis: 100%; } .biz-filter select { flex: 1; max-width: none; } }
.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.biz-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; transition: border-color .15s, transform .15s var(--ease); }
.biz-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.biz-card .cover { height: 84px; border-radius: 0; }
.biz-card-body { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; flex: 1; min-width: 0; }
.biz-card-head { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 10px; margin-top: -26px; }
.biz-card-head .biz-logo { border: 3px solid var(--surface); }
.biz-card-title { min-width: 0; padding-top: 30px; }
.biz-card-title h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.biz-card-type { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--accent-text); font-weight: 600; }
.biz-card-tagline { font-size: 13.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--muted); }
.biz-card-meta .icon { color: var(--muted); }
.biz-card-offer { font-size: 13px; font-weight: 600; color: var(--text); }
.biz-card-chips { margin: 2px 0 0; }
.biz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 8px 16px 24px; padding: 18px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--border); }
.biz-cta > div:first-child { color: var(--accent); }
.biz-cta > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.biz-cta h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; }

/* Business page */
.biz-status-banner .block { display: block; margin-top: 4px; }
.biz-status-banner form { display: inline-block; margin-left: 8px; }
.biz-header { border-bottom: 1px solid var(--border); }
.biz-header-body { z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 0 16px 16px; margin-top: -44px; position: relative; }
.biz-header-logo .biz-logo { border: 4px solid var(--bg); border-radius: 18px; }
.biz-header-info { flex: 1; min-width: 220px; padding-top: 52px; }
.biz-header-info h2 { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.biz-header-tagline { color: var(--text-2); margin-top: 4px; }
.biz-header-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.biz-header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 52px; }
@media (max-width: 700px) { .biz-header-info { padding-top: 0; flex-basis: 100%; min-width: 0; } .biz-header-actions { padding-top: 0; } }
.biz-overview { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding: 0 16px 16px; align-items: start; }
.biz-overview-side { padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .biz-overview { grid-template-columns: minmax(0, 1fr); } .biz-overview-side { padding-top: 0; } }
.biz-panel { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.biz-panel h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.biz-panel h2 .icon { color: var(--accent); }
.biz-contact, .biz-creds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.biz-contact li, .biz-creds li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.biz-contact li > .icon, .biz-creds li > .icon { color: var(--muted); flex-shrink: 0; margin-top: 2px; }
.biz-contact a { color: var(--accent-text); overflow-wrap: anywhere; }
.biz-contact .block, .biz-creds small { display: block; }
.biz-creds li > .icon { color: var(--info); }
.biz-creds strong { display: block; }
.biz-hours { width: 100%; border-collapse: collapse; font-size: 14px; }
.biz-hours th { text-align: left; font-weight: 500; color: var(--text-2); padding: 3px 0; }
.biz-hours td { text-align: right; padding: 3px 0; white-space: nowrap; }
.biz-hours tr.is-today th, .biz-hours tr.is-today td { font-weight: 700; color: var(--text); }
.biz-features { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.biz-features li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.biz-features .icon { color: var(--success); flex-shrink: 0; }
.biz-sub { font-size: 14px; font-weight: 700; margin: 14px 0 6px; color: var(--text-2); }
.biz-price-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.biz-price-list li + li { border-top: 1px solid var(--border); }
.biz-price-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); }
.biz-price-list a:hover { background: var(--surface-2); }
.biz-price-list a > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.biz-price-list small { font-size: 12.5px; }
.biz-price-list-price { font-weight: 800; white-space: nowrap; }
.biz-stock-preview { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.biz-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.biz-gallery a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.biz-gallery img { width: 100%; height: 100%; object-fit: cover; }
.biz-gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.biz-service-jump { margin-bottom: 14px; }
.biz-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 20px; }
.biz-service { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); min-width: 0; scroll-margin-top: 80px; }
.biz-service.is-featured { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.biz-service:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.biz-service-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.biz-service-head > div { min-width: 0; }
.biz-service h3 { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.biz-service-price { font-family: var(--font-display); font-size: 17px; font-weight: 800; white-space: nowrap; color: var(--text); }
.biz-service-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.biz-service-tags span { display: inline-flex; align-items: center; gap: 4px; }
.biz-service-summary { font-size: 14px; color: var(--text-2); }
.biz-service-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent-text); }
.biz-service-more > *:not(summary) { margin-top: 8px; font-size: 14px; }
.biz-service-actions { margin-top: auto; padding-top: 4px; }
.biz-price-note { display: flex; gap: 6px; align-items: flex-start; }
.biz-reviews { display: flex; flex-direction: column; gap: 12px; }
.biz-review { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 80px; }
.biz-review-head { display: flex; align-items: center; gap: 10px; }
.biz-review-head > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.biz-review h4 { font-size: 15px; font-weight: 700; }
.biz-review p { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.biz-review-reply { margin-left: 12px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; display: flex; flex-direction: column; gap: 4px; }
.biz-review-reply strong { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.biz-reply-form summary { list-style: none; display: inline-flex; }
.biz-reply-form summary::-webkit-details-marker { display: none; }
.biz-reply-form form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.biz-review-write { margin: 4px 0 18px; }
.biz-review-write > summary { list-style: none; display: inline-flex; }
.biz-review-write > summary::-webkit-details-marker { display: none; }
.biz-review-form { margin-top: 12px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }

/* Forms */
.biz-register-intro { margin: 16px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.biz-register-intro h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 19px; font-weight: 800; }
.biz-register-intro h2 .icon { color: var(--accent); }
.biz-register-points { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.biz-register-points li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.biz-register-points .icon { color: var(--success); flex-shrink: 0; margin-top: 2px; }
.biz-terms { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; }
.biz-hours-edit { display: flex; flex-direction: column; gap: 8px; }
.biz-hours-row { display: grid; grid-template-columns: 110px minmax(0, 140px) auto minmax(0, 140px) auto; justify-content: start; align-items: center; gap: 8px 10px; }
.biz-hours-day { font-weight: 600; font-size: 14px; }
.biz-hours-row input[type=time] { min-width: 0; }
@media (max-width: 560px) { .biz-hours-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; justify-content: stretch; } .biz-hours-day { grid-column: 1 / -1; } .biz-hours-row > .muted { display: none; } }
.biz-hours-row:has(input[type=checkbox]:checked) input[type=time] { opacity: .45; }

/* Dashboard */
.biz-manage-tabs .tab { flex: 0 0 auto; }
.biz-table .content-cell { min-width: 200px; }
.biz-table tr.is-muted td { opacity: .6; }
.biz-table .actions { white-space: nowrap; }
.biz-table .actions .icon-btn[disabled] { opacity: .35; cursor: default; }
.biz-checklist ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.biz-checklist li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.biz-checklist li .icon { color: var(--accent); }
.biz-checklist li.is-done { color: var(--muted); text-decoration: line-through; }
.biz-checklist li.is-done .icon { color: var(--success); }
.biz-checklist a { color: var(--accent-text); font-weight: 600; }
.progress { height: 8px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent-fill); border-radius: inherit; }
.biz-checklist, .biz-quick { margin-bottom: 16px; }
.biz-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.biz-quick-item { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.biz-quick-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.biz-quick-item > .icon { color: var(--accent); flex-shrink: 0; }
.biz-quick-item > span { display: flex; flex-direction: column; min-width: 0; }
.biz-quick-item small { font-size: 12.5px; }
a.stat-tile:hover { border-color: var(--border-strong); }
.biz-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0 16px; }
.biz-upload .field { flex: 1 1 260px; }
.biz-gallery-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.biz-gallery-item { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; }
.biz-gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.biz-gallery-item figcaption { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.biz-gallery-item figcaption .inline-form { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.biz-caption-form { display: flex; gap: 6px; }
.biz-caption-form input { flex: 1; min-width: 0; }
.biz-team { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.biz-team li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.biz-team-compact li { padding: 8px 0; border: 0; background: none; }
.biz-team-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.biz-team-info .muted { overflow-wrap: anywhere; }
.dropdown-form { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.biz-team-add { display: flex; flex-direction: column; gap: 12px; }

/* Enquiries */
.biz-inbox { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.biz-inbox li + li { border-top: 1px solid var(--border); }
.biz-inbox a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface); position: relative; }
.biz-inbox a:hover { background: var(--surface-2); }
.biz-inbox li.is-unread a { background: var(--accent-soft); }
.biz-inbox li.is-unread strong { font-weight: 800; }
.biz-inbox-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.biz-inbox-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.biz-inbox-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-inbox-subject { font-size: 14px; overflow-wrap: anywhere; }
.biz-inbox-body p.muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-inbox-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 6px; }
.biz-inbox-compact { margin-top: 0; }
.biz-inbox-compact a { padding: 10px 12px; align-items: center; }
.biz-my-inboxes { padding-bottom: 0; }
.biz-enquire { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.biz-enquire .form-page { padding: 0; }
.biz-enquire-to { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.biz-enquire-to > div { min-width: 0; }
.biz-enquire-to .block { display: block; }
.biz-enquire-about { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
.biz-enquire-about > .icon { color: var(--accent); flex-shrink: 0; }
.biz-enquire-about > span { display: flex; flex-direction: column; min-width: 0; }
.chip-radios input { position: absolute; opacity: 0; }
.biz-thread-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; padding: 16px; align-items: start; }
@media (max-width: 860px) { .biz-thread-wrap { grid-template-columns: minmax(0, 1fr); } }
.biz-thread-info { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.biz-thread-party { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.biz-thread-party > div { min-width: 0; }
.biz-thread-party .block { display: block; }
.biz-thread-facts { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.biz-thread-facts > div { display: flex; justify-content: space-between; gap: 10px; }
.biz-thread-facts dt { color: var(--muted); }
.biz-thread-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.biz-thread { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.biz-msg { max-width: 85%; align-self: flex-start; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--border); scroll-margin-top: 80px; }
.biz-msg.is-mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--surface-2); }
.biz-msg.from-business { border-left: 3px solid var(--accent); }
.biz-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.biz-msg-head time { margin-left: auto; }
.biz-msg-body { font-size: 14.5px; overflow-wrap: anywhere; }
.biz-reply { margin-top: 6px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 560px) { .biz-msg { max-width: 100%; } }

/* Admin */
.biz-admin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.biz-admin-head > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.biz-admin-head h2 { font-family: var(--font-display); font-size: 20px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.biz-admin-dl { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.biz-admin-dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; }
.biz-admin-dl dt { color: var(--muted); font-weight: 600; }
.biz-admin-dl dd { margin: 0; overflow-wrap: anywhere; }
.biz-admin-dl a { color: var(--accent-text); display: inline-flex; align-items: center; gap: 3px; }
@media (max-width: 560px) { .biz-admin-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.biz-admin-reason { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.form-actions-start { justify-content: flex-start; }
.stat-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.admin-mini-list li { display: flex; flex-direction: column; gap: 2px; }
.admin-mini-list a { color: var(--accent-text); }
.mk-card-business { background: var(--accent-soft); color: var(--accent-text); }
.biz-hours-row input[type=time], .biz-caption-form input {
    width: 100%; height: 42px; padding: 0 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); outline: none; font: inherit; font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.biz-caption-form input { height: 34px; }
.biz-hours-row input[type=time]:focus, .biz-caption-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.table-wrap:has(> .biz-table) { position: relative; }