/* ============================================================
   FONTS, self-hosted, latin subset
   Fraunces ships with the project. Switzer is loaded when its files
   are present in assets/fonts; until then the stack falls through to
   Instrument Sans or the system face without a layout shift.
   ============================================================ */
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ============================================================
   TOKENS. Neutral ramp from the house style; brand is forest green.
   The layout prints a second brand block from the admin settings,
   so a client install can change the green without touching this file.
   ============================================================ */
:root {
  --font-sans:    'Switzer', 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);

  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-slow: 360ms ease;

  --nav-h: 60px;
  --tabbar-h: 54px;
  --sidebar-w: 240px;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --container: 1200px;
  --container-wide: 1440px;

  --media-scrim: #0A0A09;
  --media-scrim-rgb: 10, 10, 9;
  --media-scrim-top: .42;
  --media-scrim-mid: .16;
  --media-scrim-foot: .78;
  --on-media: #FFFFFF;
  --on-media-rgb: 255, 255, 255;

  --mtn: #FFCB05;
  --mtn-ink: #1A1A18;
  --orange: #FF7900;
  --orange-ink: #FFFFFF;
  --wa: #1F7A4C;
  --wa-ink: #FFFFFF;
}

:root, [data-theme="light"] {
  --bg-page:    #F7F7F5;
  --bg-card:    #FFFFFF;
  --bg-surface: #F2F1EF;
  --bg-inset:   #ECEAE6;
  --bg-hover:   #F0EFED;

  --text-primary:   #1A1A18;
  --text-secondary: #4A4A46;
  --text-tertiary:  #7A7A74;
  --text-disabled:  #B0B0A8;
  --text-inverse:   #FFFFFF;

  --border-subtle:  rgba(0,0,0,.07);
  --border-default: rgba(0,0,0,.12);
  --border-strong:  rgba(0,0,0,.20);

  --accent:         #1A1A18;
  --accent-hover:   #3A3A36;
  --accent-surface: #F0EFED;

  --brand:       #2F6B45;
  --brand-light: #E8F1EA;
  --brand-hover: #255738;

  --warm:    #9A5B13;  --warm-bg:    #FBF3E6;
  --success: #16A34A;  --success-bg: #F0FDF4;
  --warning: #B45309;  --warning-bg: #FFFBEB;
  --danger:  #DC2626;  --danger-bg:  #FEF2F2;
  --info:    #2563EB;  --info-bg:    #EFF6FF;
}

[data-theme="dark"], .dark {
  --bg-page:    #0E0E0C;
  --bg-card:    #161614;
  --bg-surface: #1E1E1C;
  --bg-inset:   #262622;
  --bg-hover:   #1E1E1A;

  --text-primary:   #EDEDEB;
  --text-secondary: #A8A8A2;
  --text-tertiary:  #6A6A64;
  --text-disabled:  #44443E;
  --text-inverse:   #0E0E0C;

  --border-subtle:  rgba(255,255,255,.06);
  --border-default: rgba(255,255,255,.10);
  --border-strong:  rgba(255,255,255,.18);

  --accent:         #EDEDEB;
  --accent-hover:   #C8C8C2;
  --accent-surface: #1E1E1C;

  --brand:       #7CC49A;
  --brand-light: #10231A;
  --brand-hover: #A3D9B8;

  --warm:    #E3A857;  --warm-bg:    #241A0C;
  --success: #34D399;  --success-bg: #052E16;
  --warning: #FBBF24;  --warning-bg: #1C1200;
  --danger:  #F87171;  --danger-bg:  #2D0707;
  --info:    #60A5FA;  --info-bg:    #0C1C3B;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);

  --media-scrim: #050506;
  --media-scrim-rgb: 5, 5, 6;
  --media-scrim-top: .50;
  --media-scrim-mid: .24;
  --media-scrim-foot: .88;
}

/* Dark by device setting, unless the visitor picked light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #0E0E0C; --bg-card: #161614; --bg-surface: #1E1E1C; --bg-inset: #262622; --bg-hover: #1E1E1A;
    --text-primary: #EDEDEB; --text-secondary: #A8A8A2; --text-tertiary: #6A6A64; --text-disabled: #44443E; --text-inverse: #0E0E0C;
    --border-subtle: rgba(255,255,255,.06); --border-default: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18);
    --accent: #EDEDEB; --accent-hover: #C8C8C2; --accent-surface: #1E1E1C;
    --brand: #7CC49A; --brand-light: #10231A; --brand-hover: #A3D9B8;
    --warm: #E3A857; --warm-bg: #241A0C;
    --success: #34D399; --success-bg: #052E16; --warning: #FBBF24; --warning-bg: #1C1200;
    --danger: #F87171; --danger-bg: #2D0707; --info: #60A5FA; --info-bg: #0C1C3B;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
    --media-scrim: #050506; --media-scrim-rgb: 5, 5, 6; --media-scrim-top: .50; --media-scrim-mid: .24; --media-scrim-foot: .88;
  }
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--t-base), color var(--t-base);
}

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand); }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; background: none; border: 0; color: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }
code { font-family: var(--font-mono); font-size: .85em; background: var(--bg-inset); padding: 1px 5px; border-radius: var(--r-sm); }

h1, .h1 { font-size: clamp(1.75rem, 4vw, 2.5rem);    font-weight: 600; letter-spacing: -.03em;  line-height: 1.15; }
h2, .h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 600; letter-spacing: -.02em;  line-height: 1.2; }
h3, .h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
h4, .h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
h5 { font-size: .9375rem; font-weight: 600; }
h6 { font-size: .875rem; font-weight: 600; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.08;
}

p { color: var(--text-secondary); line-height: 1.7; }
.mono  { font-family: var(--font-mono); font-size: .875em; }
.muted { color: var(--text-tertiary); }
.small { font-size: .8125rem; }
.nowrap { white-space: nowrap; }
.mt { margin-top: var(--sp-4); }
.mt-lg { margin-top: var(--sp-10); }
.inline { display: inline-block; }
.stack-sm > * + * { margin-top: var(--sp-2); }
.eyebrow, .label {
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link {
  position: absolute; top: -48px; left: var(--sp-4); z-index: 300;
  background: var(--text-primary); color: var(--text-inverse);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-2); color: var(--text-inverse); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
.icon { flex-shrink: 0; vertical-align: -3px; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.container--narrow { max-width: 780px; }
.container--auth { max-width: 460px; padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.page { min-height: 60vh; padding-bottom: var(--sp-12); }

/* ============================================================
   BUTTONS, INPUTS, CHIPS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-5);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: .9375rem; font-weight: 500; line-height: 1.2; text-align: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--text-primary); color: var(--text-inverse); }
.btn--primary:hover { background: var(--accent-hover); color: var(--text-inverse); }
.btn--secondary { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-default); }
.btn--secondary:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-hover); }
.btn--ghost { color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }
.btn--danger:hover { border-color: var(--danger); color: var(--danger); }
.btn--whatsapp { background: var(--wa); color: var(--wa-ink); margin-top: var(--sp-2); }
.btn--whatsapp:hover { color: var(--wa-ink); opacity: .9; }
.btn--sm { min-height: 34px; padding: 0 var(--sp-3); font-size: .875rem; }
.btn--xs { min-height: 28px; padding: 0 var(--sp-2); font-size: .8125rem; }
.btn--block { width: 100%; }

.input {
  width: 100%; min-height: 40px; padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--r-md);
  font-size: .9375rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.input:disabled { background: var(--bg-surface); color: var(--text-tertiary); }
textarea.input { resize: vertical; line-height: 1.5; }
select.input { appearance: none; padding-right: var(--sp-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat; }
.input--sm { min-height: 34px; font-size: .875rem; width: auto; }
.input--tiny { max-width: 90px; }
input[type="file"].input { padding: var(--sp-2); }

.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: .8125rem; font-weight: 600; color: var(--text-secondary); }
.field__unit { font-weight: 400; color: var(--text-tertiary); }
.field__hint { font-size: .75rem; color: var(--text-tertiary); line-height: 1.5; }
.field__error { font-size: .8125rem; color: var(--danger); line-height: 1.5; }
.has-error .input { border-color: var(--danger); }
.req { color: var(--danger); }

.form > * + * { margin-top: var(--sp-5); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.form-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; }
.form-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; }
fieldset { border: 0; min-width: 0; }
legend { margin-bottom: var(--sp-3); }

/* Lot questions. The set on screen belongs to the kind of thing being sold,
   so it is ruled off from the sale terms above it rather than running on. */
.lotset { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border-subtle); }
.lotset > .h4 { margin-bottom: var(--sp-1); }
.lotset__group { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--bg-subtle); border-radius: var(--r-lg); }
.lotset__legend { padding: 0 var(--sp-2); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.lotset__empty { margin-top: var(--sp-4); padding: var(--sp-4); color: var(--text-tertiary); font-size: .875rem; background: var(--bg-subtle); border-radius: var(--r-lg); }
.lotset .form-grid { margin-top: var(--sp-2); }

/* Lot facts on the public page and in the console. */
.lotfacts { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.lotfacts__item { padding: var(--sp-3) var(--sp-4); background: var(--bg-subtle); border-radius: var(--r-md); }
.lotfacts__label { display: block; font-size: .75rem; color: var(--text-tertiary); }
.lotfacts__value { display: block; margin-top: 2px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.lotreport { margin-top: var(--sp-4); padding: var(--sp-4); border-left: 3px solid var(--warning); background: var(--bg-subtle); border-radius: 0 var(--r-md) var(--r-md) 0; }
.lotreport__title { font-size: .8125rem; font-weight: 600; color: var(--text-secondary); }
.lotreport__body { margin-top: var(--sp-2); line-height: 1.6; }
.detail__video { width: 100%; max-height: 70vh; margin-top: var(--sp-3); background: var(--bg-subtle); border-radius: var(--r-lg); }

/* ============================================================
   LEGAL DOCUMENTS
   A clause carries its number in the margin so it can be cited,
   and the number is a link so it can be sent to somebody.
   ============================================================ */
.legal__stamp { margin-top: var(--sp-3); font-size: .8125rem; color: var(--text-tertiary); }
.legal__summary { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--brand-light); border-radius: var(--r-lg); }
.legal__points { margin-top: var(--sp-3); list-style: disc; padding-left: var(--sp-5); }
.legal__points li + li { margin-top: var(--sp-2); }
.legal__summary-note { margin-top: var(--sp-4); font-size: .75rem; color: var(--text-tertiary); }
.legal__toc { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border-subtle); }
.legal__toc-list { margin-top: var(--sp-3); list-style: decimal; padding-left: var(--sp-5); color: var(--text-secondary); }
.legal__toc-list li + li { margin-top: var(--sp-1); }
.legal__toc-list a { color: var(--text-secondary); }
.legal__toc-list a:hover { color: var(--brand); }
.legal { margin-top: var(--sp-8); color: var(--text-secondary); line-height: 1.7; }
.legal__section + .legal__section { margin-top: var(--sp-8); }
.legal__section { scroll-margin-top: var(--sp-8); }
.legal__h { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-4); }
.legal__n { color: var(--text-tertiary); }
.legal__clause { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--sp-2); scroll-margin-top: var(--sp-8); }
.legal__clause + .legal__clause { margin-top: var(--sp-4); }
.legal__clause:target .legal__body { background: var(--brand-light); border-radius: var(--r-sm); padding: var(--sp-2); margin: calc(var(--sp-2) * -1); }
.legal__ref { font-family: var(--font-mono); font-size: .75rem; color: var(--text-tertiary); padding-top: .3rem; }
.legal__ref:hover { color: var(--brand); }
.legal__body ul { margin-top: var(--sp-2); list-style: disc; padding-left: var(--sp-5); }
.legal__body li + li { margin-top: var(--sp-2); }
.legal__foot { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border-subtle); }
@media (max-width: 639px) {
  .legal__clause { grid-template-columns: 2.25rem 1fr; }
}

.check { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: .9375rem; color: var(--text-secondary); line-height: 1.5; cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; }
.checks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.checks legend { width: 100%; }
.pill-check { position: relative; cursor: pointer; }
.pill-check input { position: absolute; opacity: 0; pointer-events: none; }
.pill-check span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sp-3);
  border: 1px solid var(--border-default); border-radius: var(--r-full);
  font-size: .875rem; color: var(--text-secondary); background: var(--bg-card);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pill-check input:checked + span { background: var(--brand-light); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.pill-check input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.color-field { display: flex; gap: var(--sp-2); align-items: center; }
.color-field input[type="color"] { width: 44px; height: 40px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: none; padding: 2px; }

.chip, .nav__chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap;
  min-height: 34px; padding: 0 var(--sp-3);
  border: 1px solid var(--border-default); border-radius: var(--r-full);
  font-size: .875rem; color: var(--text-secondary); background: var(--bg-card);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip.is-active { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.chips-row { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); scrollbar-width: none; }
.chips-row::-webkit-scrollbar { display: none; }
.count-pill { background: var(--brand); color: var(--text-inverse); border-radius: var(--r-full); padding: 0 7px; font-size: .75rem; line-height: 18px; }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-sm);
  font-size: .72rem; font-weight: 600; line-height: 1.5;
  background: var(--bg-inset); color: var(--text-secondary);
}
.tag--brand { background: var(--brand-light); color: var(--brand); }
.tag--warm { background: var(--warm-bg); color: var(--warm); }
.tag--dark { background: rgba(var(--media-scrim-rgb), .72); color: var(--on-media); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }

.status {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  background: var(--bg-inset); color: var(--text-secondary);
}
.status--approved, .status--confirmed, .status--live, .status--active, .status--delivered,
.status--resolved, .status--completed, .status--done, .status--applied, .status--finding-clear { background: var(--success-bg); color: var(--success); }
.status--pending, .status--requested, .status--awaiting_deposit, .status--awaiting_payment, .status--quoted,
.status--new, .status--scheduled, .status--open, .status--draft, .status--in_progress, .status--finding-concerns { background: var(--warning-bg); color: var(--warning); }
.status--rejected, .status--declined, .status--cancelled, .status--suspended, .status--forfeited, .status--finding-do_not_proceed { background: var(--danger-bg); color: var(--danger); }
.status--refunded, .status--sold, .status--ended { background: var(--info-bg); color: var(--info); }

.price { font-weight: 700; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price--lg { font-size: 1.5rem; letter-spacing: -.02em; }
.price--xl { font-size: clamp(1.625rem, 4vw, 2rem); letter-spacing: -.02em; }
.price-alt { display: block; font-size: .8125rem; color: var(--text-tertiary); font-weight: 400; }

.link-arrow { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 500; color: var(--brand); }
.link-arrow:hover { color: var(--brand-hover); }
.prose p + p, .prose h2 + p { margin-top: var(--sp-3); }
.prose h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-2); }
.prose ul { list-style: disc; padding-left: var(--sp-5); color: var(--text-secondary); }
.prose li + li { margin-top: var(--sp-2); }
.prose { color: var(--text-secondary); line-height: 1.7; overflow-wrap: anywhere; }
.prose a { color: var(--brand); }

/* ============================================================
   ALERTS, PANELS, EMPTY STATES
   ============================================================ */
.flash-stack { padding-top: var(--sp-4); }
.alert {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--info-bg); color: var(--info); font-size: .9375rem; line-height: 1.5;
  margin-bottom: var(--sp-4);
}
.alert .icon { margin-top: 2px; }
.alert--success { background: var(--success-bg); color: var(--success); }
.alert--warning { background: var(--warning-bg); color: var(--warning); }
.alert--error { background: var(--danger-bg); color: var(--danger); }
.alert--link { transition: opacity var(--t-fast); }
.alert--link:hover { opacity: .85; }
.alert a { text-decoration: underline; }

.panel {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.panel > .h3, .panel > .h4 { margin-bottom: var(--sp-3); }
.panel--warn { border-color: var(--warning); background: var(--warning-bg); }
.card-quiet { background: var(--bg-surface); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.card-list > * + * { margin-top: 0; }

.empty { text-align: center; padding: var(--sp-12) var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.empty__icon { width: 64px; height: 64px; border-radius: var(--r-full); background: var(--bg-surface); display: grid; place-items: center; color: var(--text-tertiary); }
.empty__title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); }
.empty__text { max-width: 440px; }
.ref-big { font-family: var(--font-mono); font-size: 1.75rem; letter-spacing: .08em; color: var(--text-primary); }

.page-head { padding: var(--sp-8) 0 var(--sp-5); }
.page-head__lead { margin-top: var(--sp-2); max-width: 680px; font-size: 1.0625rem; }
.page-head--row { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }

.crumbs { padding-top: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.crumbs__list { display: flex; gap: var(--sp-2); font-size: .8125rem; color: var(--text-tertiary); white-space: nowrap; }
.crumbs__item + .crumbs__item::before { content: '/'; margin-right: var(--sp-2); color: var(--text-disabled); }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-8) 0; }
.pager__info { font-size: .875rem; color: var(--text-tertiary); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--bg-card); margin-bottom: var(--sp-4); }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); background: var(--bg-surface); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table--compact th, .table--compact td { padding: var(--sp-2) var(--sp-3); }
.table tbody th { font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.stat { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: 2px; transition: border-color var(--t-fast); }
a.stat:hover { border-color: var(--border-strong); color: inherit; }
.stat__num { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.stat__num--sm { font-size: 1.125rem; }
.stat__label { font-size: .8125rem; color: var(--text-tertiary); }
.stat--alert { border-color: var(--warning); }
.stat--alert .stat__num { color: var(--warning); }

.rowlist { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-4); }
.rowlist__item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.rowlist__item + .rowlist__item { border-top: 1px solid var(--border-subtle); }
.rowlist__actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.files { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); font-size: .875rem; }
.files a { color: var(--brand); }

.faq { border-bottom: 1px solid var(--border-subtle); }
.faq summary { cursor: pointer; padding: var(--sp-4) var(--sp-8) var(--sp-4) 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: var(--sp-4); color: var(--text-tertiary); font-weight: 400; font-size: 1.25rem; line-height: 1; }
.faq[open] summary::after { content: '\2212'; }
.faq p { padding-bottom: var(--sp-4); }
.faq-list { margin-bottom: var(--sp-8); }

.disclosure { margin-top: var(--sp-3); }
.disclosure > summary { cursor: pointer; display: flex; gap: var(--sp-2); align-items: center; min-height: 44px; font-weight: 500; color: var(--text-primary); list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure[open] > summary { color: var(--brand); }

.steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-8); counter-reset: none; }
.steps__item { display: grid; grid-template-columns: 32px 1fr; column-gap: var(--sp-3); align-items: start; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-4); }
.steps__item > :not(.steps__num) { grid-column: 2; }
.steps__num { grid-row: span 2; width: 32px; height: 32px; border-radius: var(--r-full); background: var(--brand-light); color: var(--brand); display: grid; place-items: center; font-weight: 700; }
.steps--vertical { grid-template-columns: 1fr !important; }

.progress { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); font-size: .8125rem; }
.progress li { flex: 1; padding-top: var(--sp-2); border-top: 3px solid var(--border-default); color: var(--text-tertiary); }
.progress .is-active { border-color: var(--brand); color: var(--text-primary); font-weight: 600; }
.progress .is-done { border-color: var(--brand); }

.progress-bar { height: 8px; border-radius: var(--r-full); background: var(--bg-inset); overflow: hidden; margin-top: var(--sp-3); }
.progress-bar span { display: block; height: 100%; width: 0; background: var(--brand); transition: width var(--t-base); }

.toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-4)); z-index: 400; display: flex; flex-direction: column; gap: var(--sp-2); width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--text-primary); color: var(--text-inverse); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: .9375rem; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity var(--t-base), transform var(--t-base); pointer-events: auto; }
.toast.is-in { opacity: 1; transform: none; }
.toast--error { background: var(--danger); color: var(--text-inverse); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 150; height: var(--nav-h);
  background: var(--bg-card); border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-base), border-color var(--t-base);
}
/* Wider than the reading container on purpose: the bar is chrome, and the
   1200px cap left 240px of empty screen while the French links had nowhere
   left to go. */
.nav__inner { max-width: var(--container-wide); margin: 0 auto; height: 100%; padding: 0 var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); }
.nav__brand { display: flex; align-items: center; flex-shrink: 1; min-width: 0; min-height: 44px; }
.nav__logo { height: 32px; width: auto; }
.nav__wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The row scrolls rather than overflowing. French section names are about
   40 percent wider than the English ones, and with min-width 0 the links
   simply ran out under the language and currency controls. */
.nav__links { display: none; gap: var(--sp-1); align-items: center; flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav__links::-webkit-scrollbar { display: none; }
.nav__link { flex: 0 0 auto; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); font-size: .9rem; color: var(--text-secondary); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.nav__link:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav__link--desktop, .nav__icon--desktop, .nav__cta { display: none; }
.nav__actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; flex: 0 0 auto; padding-left: var(--sp-2); background: inherit; }
.nav__icon { position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--r-md); color: var(--text-secondary); transition: background var(--t-fast), color var(--t-fast); }
.nav__icon:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav__chip { min-height: 32px; font-weight: 600; font-size: .75rem; }
.nav__select { min-height: 32px; border: 1px solid var(--border-default); border-radius: var(--r-full); background: var(--bg-card); color: var(--text-secondary); font-size: .75rem; font-weight: 600; padding: 0 var(--sp-2); }
.icon--sun { display: none; }
[data-theme="dark"] .icon--sun { display: block; }
[data-theme="dark"] .icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon--sun { display: block; }
  :root:not([data-theme="light"]) .icon--moon { display: none; }
}
.nav__hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; }
.hamburger__bar { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-base), opacity var(--t-base); }
.nav__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) { opacity: 0; }
.nav__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.badge-dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--danger); }
/* A dot says only that something happened. The number says whether it is one
   thing or fourteen, which is what decides whether to open it now. */
.badge-count {
  position: absolute; top: 4px; right: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: none; align-items: center; justify-content: center;
  background: var(--danger); color: var(--text-inverse);
  border-radius: var(--r-full); border: 2px solid var(--bg-card);
  font-size: .625rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.badge-count.is-on { display: flex; }
.adm-top .badge-count { border-color: var(--bg-surface); }
.badge-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--danger); color: var(--text-inverse); font-size: .68rem; font-weight: 700; display: inline-grid; place-items: center; }

/* Transparent bar over hero footage. Every control is recoloured. */
.nav--over:not(.is-stuck) { background: transparent; border-color: transparent; color: var(--on-media); }
.nav--over:not(.is-stuck) .nav__link,
.nav--over:not(.is-stuck) .nav__icon,
.nav--over:not(.is-stuck) .nav__wordmark { color: var(--on-media); }
.nav--over:not(.is-stuck) .nav__link:hover,
.nav--over:not(.is-stuck) .nav__icon:hover { background: rgba(var(--on-media-rgb), .14); }
.nav--over:not(.is-stuck) .nav__chip,
.nav--over:not(.is-stuck) .nav__select { background: rgba(var(--on-media-rgb), .12); border-color: rgba(var(--on-media-rgb), .3); color: var(--on-media); }
.nav--over:not(.is-stuck) .nav__select option { color: var(--text-primary); background: var(--bg-card); }
.nav--over:not(.is-stuck) .nav__cta { background: var(--on-media); color: var(--media-scrim); }
.nav--over { position: fixed; left: 0; right: 0; }
body.has-media-hero .page { padding-top: 0; }

/* ============================================================
   DRAWER
   ============================================================ */
.drawer-scrim { position: fixed; inset: 0; z-index: 180; background: rgba(var(--media-scrim-rgb), .45); opacity: 0; transition: opacity var(--t-base); }
.drawer-scrim.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 190;
  width: min(86vw, 340px); background: var(--bg-card);
  border-right: 1px solid var(--border-subtle);
  transform: translateX(-102%); transition: transform var(--t-slow) var(--ease-out);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; box-shadow: var(--shadow-lg); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 0 var(--sp-2) 0 var(--sp-5); border-bottom: 1px solid var(--border-subtle); }
.drawer__title { font-weight: 600; }
.drawer__body { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-3) var(--sp-8); flex: 1; }
.drawer__label { padding: var(--sp-5) var(--sp-3) var(--sp-2); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.drawer__link { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--text-secondary); font-size: .9375rem; text-align: left; transition: background var(--t-fast), color var(--t-fast); }
.drawer__link:hover { background: var(--bg-hover); color: var(--text-primary); }
.drawer__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-3); }
.drawer__row + .drawer__row { padding-top: 0; }
body.drawer-open { overflow: hidden; }
.jt-drawer { will-change: transform; }

/* ============================================================
   BOTTOM NAV TAB BAR
   ============================================================ */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.bottom-nav__inner { display: flex; align-items: center; justify-content: space-around; height: var(--tabbar-h); max-width: 600px; margin: 0 auto; }
.bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1; padding: 6px 4px; position: relative; min-height: 44px;
  color: var(--text-tertiary);
  font-size: .6rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  transition: color var(--t-fast);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.bottom-nav__item svg { width: 22px; height: 22px; }
.bottom-nav__item.active { color: var(--brand); }
.bottom-nav__item:active { opacity: .6; }
.bottom-nav__icon { position: relative; display: block; }
.bottom-nav__item--sell .bottom-nav__icon { color: var(--brand); }
.bottom-nav__badge {
  position: absolute; top: -4px; left: 14px;
  min-width: 16px; height: 16px; background: var(--danger); color: var(--text-inverse);
  border-radius: var(--r-full); font-size: .6rem; font-weight: 700;
  display: none; align-items: center; justify-content: center;
  padding: 0 4px; border: 1.5px solid var(--bg-card);
}
.bottom-nav__badge.is-on { display: flex; }

/* ============================================================
   SUB NAV (account and admin)
   ============================================================ */
.subnav { display: flex; gap: var(--sp-1); overflow-x: auto; margin-bottom: var(--sp-6); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle); scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav__item { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--text-secondary); font-size: .875rem; transition: background var(--t-fast), color var(--t-fast); }
.subnav__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.subnav__item.is-active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.subnav--admin { padding-top: var(--sp-4); }

/* ============================================================
   HERO
   Four renders from HeroVideos::resolve() and three video styles.
   Everything drawn over media uses --on-media and --media-scrim.
   Those tokens keep their values in dark mode on purpose: footage
   stays dark in both themes, so theme-flipping ink would vanish
   in one of them.
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--on-media);
  background: var(--media-scrim);
}
.hero--flush { padding-top: var(--nav-h); }
.hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--media-scrim); }
.hero__video, .hero__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__still--motion { display: none; }
.hero.is-still .hero__stage:has(.hero__still--motion) .hero__video { display: none; }
.hero.is-still .hero__still--motion { display: block; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--media-scrim-rgb), var(--media-scrim-top)) 0%,
    rgba(var(--media-scrim-rgb), var(--media-scrim-mid)) 38%,
    rgba(var(--media-scrim-rgb), var(--media-scrim-foot)) 100%
  );
  opacity: var(--scrim-opacity, .55);
}
.hero__inner { position: relative; z-index: 2; padding-top: var(--sp-12); padding-bottom: var(--sp-10); }
.hero__eyebrow { color: rgba(var(--on-media-rgb), .8); }
.hero__title { font-size: clamp(2.125rem, 7vw, 4rem); max-width: 16ch; margin: var(--sp-3) 0 var(--sp-4); color: var(--on-media); }
.hero__lead { font-size: clamp(1rem, 2.2vw, 1.25rem); max-width: 56ch; margin-bottom: var(--sp-6); color: rgba(var(--on-media-rgb), .88); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

.btn--on-media { background: var(--on-media); color: var(--media-scrim); }
.btn--on-media:hover { background: rgba(var(--on-media-rgb), .86); color: var(--media-scrim); }
.btn--on-media-ghost { background: rgba(var(--media-scrim-rgb), .22); border-color: rgba(var(--on-media-rgb), .42); color: var(--on-media); }
.btn--on-media-ghost:hover { background: rgba(var(--on-media-rgb), .12); border-color: var(--on-media); color: var(--on-media); }

/* expand: the clip runs edge to edge and straight up behind the bar, and the
   page scroll drives the choreography instead of the page simply moving over
   it. The media creeps in, the scrim deepens, and the words lift and fade at
   a different rate, which is what separates this from a fixed background
   photo. Every value comes from one progress number set in JS. */
.hero--expand { height: 190vh; height: 190svh; padding-top: 0; }
.hero--expand .hero__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
}
.hero__frame {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--media-scrim);
}
.hero--expand .hero__video, .hero--expand .hero__still {
  transform: scale(var(--hero-zoom, 1));
  transform-origin: 50% 62%;
  will-change: transform;
}
.hero--expand .hero__scrim { opacity: calc(var(--scrim-opacity, .55) + var(--hero-dim, 0)); }
.hero--expand .hero__inner {
  width: 100%;
  padding-top: var(--nav-h);
  transform: translate3d(0, var(--hero-lift, 0px), 0);
  opacity: var(--hero-fade, 1);
  will-change: transform;
}
/* The lines do not move as one block: the eyebrow goes first and furthest,
   the search box last and least, so the group opens up as it leaves. */
.hero--expand .hero__eyebrow { transform: translate3d(0, calc(var(--hero-lift, 0px) * .55), 0); }
.hero--expand .hero__title { transform: translate3d(0, calc(var(--hero-lift, 0px) * .3), 0); }
.hero--expand .hero__lead { transform: translate3d(0, calc(var(--hero-lift, 0px) * .16), 0); }
.hero--expand .finder, .hero--expand .hero__actions { transform: translate3d(0, calc(var(--hero-lift, 0px) * -.12), 0); }

/* static, poster_only: a fixed-height box with the media behind the copy.
   The media is oversized and offset so the scroll drift has room to move
   without ever showing an edge. */
.hero--static { min-height: min(86vh, 720px); display: flex; align-items: flex-end; }
.hero--static > .hero__inner { width: 100%; }
.hero--static .hero__video, .hero--static .hero__still { height: 124%; top: -12%; will-change: transform; }

/* flat_brand: nothing uploaded or nothing usable. A deliberate brand
   panel, built from two tokens that do not flip with the theme. */
.hero--flat-brand { min-height: min(72vh, 620px); }
.hero--flat-brand .hero__stage { background: linear-gradient(155deg, var(--media-brand) 0%, var(--media-scrim) 92%); }
.hero--flat-brand .hero__scrim { display: none; }

/* pinned and scrub: the stage sticks to the viewport. A sticky child needs
   every ancestor to leave overflow visible, which is why .hero itself never
   sets overflow and the stage clips its own media. */
.hero--pinned, .hero--scrub { padding-top: 0; }
.hero--pinned .hero__stage, .hero--scrub .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }

.hero--pinned .hero__panels { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }
.hero__panel { min-height: 90vh; min-height: 90svh; display: flex; align-items: center; }
.hero__panel > .container { width: 100%; }
.hero__panel--lead { min-height: 100vh; min-height: 100svh; align-items: flex-end; padding-top: var(--nav-h); }
.hero__card { max-width: 520px; padding: var(--sp-6); border-radius: var(--r-xl); background: rgba(var(--media-scrim-rgb), .6); border: 1px solid rgba(var(--on-media-rgb), .14); }
.hero__card--end { margin-left: auto; }
.hero__card-title { color: var(--on-media); margin: var(--sp-2) 0 var(--sp-3); }
.hero__card .hero__lead { margin-bottom: var(--sp-5); }
/* Hidden only once the script has confirmed it can reveal them. Without
   the script the panels simply show. */
.hero.is-revealing [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow), transform .6s var(--ease-out); }
.hero.is-revealing [data-reveal].is-visible { opacity: 1; transform: none; }

.hero--scrub { height: 260vh; height: 260svh; }
.hero--scrub .hero__stage { display: flex; align-items: flex-end; }
.hero--scrub .hero__inner { width: 100%; }

.finder {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
  background: var(--bg-card); padding: var(--sp-2); border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle); max-width: 900px;
}
.finder .input { border-color: transparent; background: var(--bg-surface); }
.finder__go { min-height: 44px; }
.finder--page { margin-bottom: var(--sp-4); }

/* ============================================================
   HOME BLOCKS
   ============================================================ */
/* Watermark over listing photography. Sized in ch-independent units so it
   reads on a 480px card and on a full width gallery without two sets of
   rules, and kept light enough not to fight the photo. */
.wm { position: absolute; right: var(--sp-3); bottom: var(--sp-3); z-index: 2; pointer-events: none; display: block; max-width: 34%; }
.wm img { width: auto; height: 26px; max-width: 100%; opacity: .82; filter: drop-shadow(0 1px 3px rgba(var(--media-scrim-rgb), .55)); }
.wm--sm img { height: 18px; opacity: .76; }

/* ============================================================
   FLOATING HELP PILL
   Collapsed it never leaves the screen; opened it slides a card up
   from the same corner. It sits above the phone tab bar and above
   the listing action bar, both of which own the bottom edge.
   ============================================================ */
.helper {
  position: fixed; right: var(--sp-4);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3));
  z-index: 190; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2);
  --helper-spring: cubic-bezier(.34, 1.4, .64, 1);
}
.helper__bar { position: relative; transition: opacity var(--t-base); }
.helper.is-open .helper__bar { position: absolute; bottom: 0; right: 0; opacity: 0; pointer-events: none; }

/* Deep green through to near black, from the two tokens that keep their
   values in dark mode, so the white text on it is safe in both themes. */
.helper__pill {
  position: relative; display: flex; align-items: center; gap: 0;
  min-height: 64px; padding: var(--sp-2);
  border: 0; border-radius: var(--r-full);
  background: linear-gradient(118deg, var(--media-brand) 0%, var(--media-scrim) 150%);
  color: var(--on-media);
  box-shadow: 0 10px 30px rgba(var(--media-scrim-rgb), .34), 0 2px 6px rgba(var(--media-scrim-rgb), .22);
  transition: gap .42s var(--helper-spring), padding .42s var(--helper-spring),
              transform .28s var(--ease-out), box-shadow .28s var(--t-base), opacity var(--t-base);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.helper__pill:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(var(--media-scrim-rgb), .42), 0 3px 8px rgba(var(--media-scrim-rgb), .26); }
.helper__pill:active { transform: translateY(-1px); }

/* The cut-out is drawn over the pill and allowed past its edges: it is a
   person standing in front of the control, not a photo cropped into it. */
.helper__figure { position: relative; flex-shrink: 0; width: 48px; height: 48px; display: block; }
.helper__blob {
  position: absolute; inset: 0; border-radius: var(--r-full);
  background: rgba(var(--on-media-rgb), .17);
  transition: transform .42s var(--helper-spring), background var(--t-base);
}
.helper__blob::after {
  content: ''; position: absolute; inset: -5px; border-radius: var(--r-full);
  border: 2px solid rgba(var(--on-media-rgb), .4); opacity: 0;
}
/* Sized for a standing cut-out, which is taller than it is wide. A landscape
   file would otherwise spill out of the pill on both sides, so the width is
   capped and the picture is fitted inside rather than stretched. */
.helper__cut {
  position: absolute; left: 50%; bottom: -8px; width: auto; max-width: 190%;
  height: 74px; object-fit: contain; object-position: 50% 100%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  transition: height .42s var(--helper-spring), filter var(--t-base);
  filter: drop-shadow(0 6px 10px rgba(var(--media-scrim-rgb), .38));
  pointer-events: none;
}
.helper__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-media); }
.helper--face .helper__pill { padding-left: var(--sp-1); }

.helper__lines, .helper__more {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .42s var(--helper-spring), opacity .26s ease .08s;
}
.helper__lines { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; text-align: left; }
.helper__eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.helper__title { font-size: .9375rem; font-weight: 700; }
.helper__more { display: inline-flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; font-size: .8125rem; font-weight: 600; }
.helper__more .icon { transition: transform var(--t-fast); }
.helper__pill:hover .helper__more .icon { transform: translateX(3px); }

.helper.is-peek .helper__pill { gap: var(--sp-3); padding-right: var(--sp-5); }
.helper.is-peek .helper__lines { max-width: 220px; opacity: 1; }
.helper.is-peek .helper__more { max-width: 110px; opacity: 1; }
.helper.is-peek .helper__figure { width: 56px; height: 56px; }
.helper.is-peek .helper__cut { height: 104px; }

.helper__dismiss {
  position: absolute; top: -6px; right: -4px; width: 26px; height: 26px;
  display: none; place-items: center; border-radius: var(--r-full);
  background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-secondary);
  box-shadow: var(--shadow-sm); transition: color var(--t-fast), border-color var(--t-fast);
}
.helper__dismiss:hover { color: var(--text-primary); border-color: var(--border-strong); }
.helper.is-peek .helper__dismiss { display: grid; }

.helper__card {
  position: relative; overflow: hidden;
  width: min(340px, calc(100vw - var(--sp-6)));
  padding: var(--sp-5) var(--sp-5) 112px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 46px rgba(var(--media-scrim-rgb), .3), 0 4px 10px rgba(var(--media-scrim-rgb), .18);
  transform: translateY(16px) scale(.96); opacity: 0;
  transition: transform .4s var(--helper-spring), opacity .28s var(--t-base);
}
.helper.is-open .helper__card { transform: none; opacity: 1; }
.helper__card .helper__eyebrow { color: var(--text-tertiary); opacity: 1; }
.helper__heading { margin: 2px 0 var(--sp-2); }
.helper__text { font-size: .875rem; margin-bottom: var(--sp-4); }

/* Outlined in the brand green, filling on hover. */
.helper__number {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  border: 2px solid var(--brand); border-radius: var(--r-full);
  color: var(--brand); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.helper__number:hover { background: var(--brand); color: var(--text-inverse); transform: translateY(-1px); }
.helper__hours { margin-top: var(--sp-3); font-size: .75rem; color: var(--text-tertiary); max-width: 62%; }

/* In the card the figure stands at the bottom left and is clipped by the
   card edge, the way a person standing behind a counter is. */
.helper__figure--card { position: absolute; left: var(--sp-4); bottom: 0; width: 96px; height: 96px; }
.helper__figure--card .helper__blob { background: var(--brand-light); inset: 8px 0 8px 0; }
.helper__figure--card .helper__cut { height: 150px; bottom: 0; filter: none; }
.helper__figure--card .helper__glyph { color: var(--brand); }
.helper__close { position: absolute; right: var(--sp-4); bottom: var(--sp-4); }

@keyframes helper-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes helper-ring { 0% { transform: scale(.92); opacity: .5; } 70% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }
.helper:not(.is-peek):not(.is-open) .helper__figure--pill { animation: helper-float 5.5s ease-in-out infinite; }
.helper:not(.is-peek):not(.is-open) .helper__blob::after { animation: helper-ring 3.4s ease-out infinite; }

/* ============================================================
   CATEGORY CARDS
   Two columns on a phone, five on a desktop, each card rising in
   behind the one before it as the row comes into view.
   ============================================================ */
.cats { margin-top: var(--sp-12); }
.cats__head { margin-bottom: var(--sp-5); }
.cats__head .h2 { margin-top: var(--sp-1); }
.cats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.cat {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 72px; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  color: var(--text-secondary);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.cat:hover { border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cat:active { transform: none; }
.cat__icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-md); background: var(--brand-light); color: var(--brand); transition: background var(--t-fast), color var(--t-fast); }
.cat__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cat__label { font-size: .9375rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.cat__note { font-size: .75rem; color: var(--text-tertiary); }
.cat__go { margin-left: auto; flex-shrink: 0; color: var(--text-disabled); transition: transform var(--t-fast), color var(--t-fast); }
.cat:hover .cat__go { transform: translateX(3px); color: var(--brand); }
.cat--accent { background: var(--brand); border-color: var(--brand); }
.cat--accent .cat__label, .cat--accent .cat__go { color: var(--text-inverse); }
.cat--accent .cat__note { color: rgba(var(--on-media-rgb), .78); }
.cat--accent .cat__icon { background: rgba(var(--on-media-rgb), .16); color: var(--text-inverse); }
.cat--accent:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* The hidden state is only armed once the script confirms it can reveal, and
   a timer shows everything regardless. Content must never depend on an
   observer firing. */
.has-rise [data-rise] { opacity: 0; transform: translateY(22px); }
.has-rise [data-rise].is-up { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) var(--rise-delay, 0ms), transform .55s var(--ease-out) var(--rise-delay, 0ms); }

.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-6); }
.quick__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2); min-height: 96px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.quick__item:hover { border-color: var(--brand); color: var(--text-primary); }
.quick__icon { width: 44px; height: 44px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--brand-light); color: var(--brand); }
.quick__label { font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.quick__count { position: absolute; top: var(--sp-2); right: var(--sp-2); font-size: .68rem; color: var(--text-tertiary); }
.quick__item--accent { background: var(--brand); border-color: var(--brand); color: var(--text-inverse); }
.quick__item--accent:hover { background: var(--brand-hover); color: var(--text-inverse); }
.quick__item--accent .quick__icon { background: rgba(var(--on-media-rgb), .18); color: var(--text-inverse); }

.trust-band { display: grid; gap: var(--sp-6); margin-top: var(--sp-10); padding: var(--sp-6); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); }
.trust-band__copy p { margin: var(--sp-2) 0 var(--sp-3); }
.trust-band__steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.trust-band__steps li { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--sp-3); font-size: .9rem; }
.trust-band__steps li > span:last-child { grid-column: 2; color: var(--text-tertiary); font-size: .8125rem; }
.trust-band__num { grid-row: span 2; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--brand); color: var(--text-inverse); display: grid; place-items: center; font-weight: 700; font-size: .8125rem; }

.block { margin-top: var(--sp-12); }
.block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.block--tinted { background: var(--bg-surface); border-radius: var(--r-xl); padding: var(--sp-6); }

.split { display: grid; gap: var(--sp-4); margin-top: var(--sp-12); }
.split__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--r-xl); background: var(--brand-light); border: 1px solid var(--border-subtle); color: var(--text-primary); transition: border-color var(--t-fast); }
.split__card:hover { border-color: var(--brand); color: var(--text-primary); }
.split__card--quiet { background: var(--bg-card); }
.split__icon { color: var(--brand); }

.cities { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.cities__item { display: flex; flex-direction: column; padding: var(--sp-4); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); transition: border-color var(--t-fast); }
.cities__item:hover { border-color: var(--brand); }
.cities__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.cities__meta { font-size: .75rem; color: var(--text-tertiary); }

.safety-note { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-10); padding: var(--sp-4); border-left: 3px solid var(--brand); background: var(--bg-card); border-radius: var(--r-md); color: var(--brand); }
.safety-note p a { color: var(--brand); text-decoration: underline; }
.sections-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8); }

/* ============================================================
   LISTING CARD AND GRIDS
   ============================================================ */
.grid-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-3); scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }

.lcard { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--t-base), border-color var(--t-base); }
.lcard:hover { box-shadow: var(--shadow-md); }
.lcard--featured { border-color: var(--warm); }
.lcard__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--bg-inset); }
.lcard__media img { width: 100%; height: 100%; object-fit: cover; }
.lcard__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-disabled); }
.lcard__tags { position: absolute; left: var(--sp-2); top: var(--sp-2); display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.lcard__fav { position: absolute; right: var(--sp-2); top: var(--sp-2); width: 40px; height: 40px; border-radius: var(--r-full); background: var(--bg-card); color: var(--text-secondary); display: grid; place-items: center; transition: color var(--t-fast), background var(--t-fast); }
.lcard__fav.is-on, .actionbar__btn.is-on { color: var(--danger); }
.lcard__fav.is-on svg, .actionbar__btn.is-on svg { fill: currentColor; }
.lcard__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.lcard__price { margin: 0; color: var(--text-primary); }
.lcard__title { font-size: .9875rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcard__title a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.lcard__fav, .lcard__media { z-index: 1; }
.lcard__place { font-size: .8125rem; color: var(--text-tertiary); line-height: 1.4; }
.lcard__facts { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: .8125rem; color: var(--text-secondary); margin-top: var(--sp-1); }
.lcard__facts li { display: inline-flex; align-items: center; gap: 4px; }
.lcard__trust { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); font-size: .75rem; color: var(--text-tertiary); line-height: 1.3; }
.lcard__ref { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; }

.trust-meter { display: inline-flex; gap: 2px; }
.trust-meter i { width: 6px; height: 12px; border-radius: 2px; background: var(--bg-inset); }
.trust-meter[data-level="1"] i:nth-child(-n+1),
.trust-meter[data-level="2"] i:nth-child(-n+2),
.trust-meter[data-level="3"] i:nth-child(-n+3),
.trust-meter[data-level="4"] i { background: var(--brand); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.toolbar__cities { display: flex; gap: var(--sp-2); overflow-x: auto; flex: 1 1 100%; order: 3; scrollbar-width: none; padding-bottom: var(--sp-1); }
.toolbar__cities::-webkit-scrollbar { display: none; }
.toolbar__sort { margin-left: auto; }
.result-count { margin-bottom: var(--sp-4); font-size: .875rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); }
.save-search { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-top: var(--sp-8); padding: var(--sp-4); background: var(--brand-light); border-radius: var(--r-lg); color: var(--brand); font-weight: 500; }

/* Bottom sheet for filters */
.sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(var(--media-scrim-rgb), .45); }
.sheet__panel { position: relative; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; background: var(--bg-card); border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheet-up var(--t-slow) var(--ease-out); }
.sheet__head, .sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); }
.sheet__head { border-bottom: 1px solid var(--border-subtle); }
.sheet__foot { border-top: 1px solid var(--border-subtle); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
.sheet__body { overflow-y: auto; padding: var(--sp-5); overscroll-behavior: contain; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ============================================================
   LISTING DETAIL
   ============================================================ */
.manage-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.gallery { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-2); margin: var(--sp-4) calc(var(--sp-4) * -1) 0; scrollbar-width: none; background: var(--bg-inset); }
.gallery::-webkit-scrollbar { display: none; }
.gallery__slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: center; background: var(--bg-inset); }
.gallery__slide img, .gallery__slide video { width: 100%; height: 100%; object-fit: cover; }
.gallery__slide--video video { object-fit: contain; background: var(--media-scrim); }
.gallery__slide--empty { display: grid; place-items: center; color: var(--text-disabled); }
.gallery__badge { position: absolute; left: var(--sp-3); top: var(--sp-3); }
.gallery__nav { position: sticky; top: 50%; align-self: center; flex: 0 0 44px; height: 44px; margin: 0 -44px 0 0; z-index: 2; display: none; place-items: center; border-radius: var(--r-full); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.gallery__nav--prev { left: var(--sp-3); order: -1; margin: 0 -44px 0 var(--sp-3); }
.gallery__nav--next { right: var(--sp-3); margin: 0 var(--sp-3) 0 -44px; }
.gallery__count { position: sticky; right: var(--sp-3); bottom: var(--sp-3); align-self: flex-end; margin-left: -80px; flex: 0 0 auto; padding: 2px 10px; border-radius: var(--r-full); background: rgba(var(--media-scrim-rgb), .7); color: var(--on-media); font-size: .75rem; z-index: 2; }

.detail { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-5); }
.detail__main, .detail__side { min-width: 0; }
.detail__title { margin: var(--sp-2) 0; }
.detail__place { display: flex; gap: var(--sp-1); align-items: center; color: var(--text-tertiary); }
.detail__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0; }
.detail__price .price-alt { width: 100%; }
.detail__section { padding: var(--sp-6) 0; border-top: 1px solid var(--border-subtle); }
.detail__section > .h3 { margin-bottom: var(--sp-4); }
.detail__side .panel { position: relative; }

.specs { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--sp-3) 0; }
.specs__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: .9375rem; }
.specs__row dt { color: var(--text-tertiary); }
.specs__row dd { color: var(--text-primary); font-weight: 500; text-align: right; }
.specs__row--wide { flex-direction: column; gap: var(--sp-1); }
.specs__row--wide dd { text-align: left; font-weight: 400; }
.specs__row--private { background: var(--warning-bg); padding-left: var(--sp-2); padding-right: var(--sp-2); }

.ladder { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ladder__step { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-surface); }
.ladder__mark { width: 24px; height: 24px; border-radius: var(--r-full); display: grid; place-items: center; flex-shrink: 0; background: var(--bg-inset); color: var(--text-tertiary); }
.ladder__step.is-done .ladder__mark { background: var(--brand); color: var(--text-inverse); }
.ladder__step.is-expired .ladder__mark { background: var(--warning-bg); color: var(--warning); }
.ladder__text { display: flex; flex-direction: column; font-size: .9rem; line-height: 1.4; }
.ladder__text > span { color: var(--text-tertiary); font-size: .8125rem; }
.ladder__date { color: var(--text-tertiary); font-size: .8125rem; }
.ladder--explain .ladder__text > span { color: var(--text-secondary); font-size: .9375rem; margin-top: var(--sp-1); line-height: 1.6; }

.map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-subtle); aspect-ratio: 16 / 10; }
.map iframe { width: 100%; height: 100%; border: 0; }
.report-link { font-size: .8125rem; color: var(--text-tertiary); padding-top: var(--sp-4); }
.report-link a { color: var(--text-tertiary); text-decoration: underline; }

.lister { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); line-height: 1.35; }
.lister > span:last-child { display: flex; flex-direction: column; }
.lister__avatar, .inbox__avatar, .agent-card__icon { width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--brand-light); color: var(--brand); flex-shrink: 0; font-weight: 700; }
.reveal-box { padding: var(--sp-4); border-radius: var(--r-md); background: var(--success-bg); margin-bottom: var(--sp-3); }
.reveal-box p { color: var(--text-primary); }
.safety { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-4); color: var(--text-tertiary); line-height: 1.5; }
.safety a { color: var(--brand); }

.calendar { margin-bottom: var(--sp-3); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); font-weight: 600; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: .8125rem; }
.cal__dow { color: var(--text-tertiary); font-size: .7rem; padding: var(--sp-1) 0; }
.cal__day { min-height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-primary); transition: background var(--t-fast); }
.cal__day:hover:not(:disabled) { background: var(--bg-hover); }
.cal__day:disabled { color: var(--text-disabled); cursor: not-allowed; }
.cal__day.is-taken { text-decoration: line-through; color: var(--text-disabled); background: var(--bg-inset); }
.cal__day.is-blocked { background: var(--danger-bg); color: var(--danger); }
.cal__day.is-in { background: var(--brand-light); color: var(--brand); }
.cal__day.is-edge { background: var(--brand); color: var(--text-inverse); font-weight: 700; }
.legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-left: var(--sp-3); }
.legend--blocked { background: var(--danger-bg); border: 1px solid var(--danger); }
.legend--booked { background: var(--bg-inset); }

.quote { background: var(--bg-surface); border-radius: var(--r-md); padding: var(--sp-3); margin: var(--sp-3) 0; font-size: .9rem; }
.quote__row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; color: var(--text-secondary); }
.quote__row--total { border-top: 1px solid var(--border-default); margin-top: var(--sp-1); padding-top: var(--sp-2); font-weight: 700; color: var(--text-primary); }
.quote__row--brand { color: var(--brand); font-weight: 600; }

.actionbar {
  position: fixed; left: 0; right: 0; z-index: 90;
  bottom: calc(var(--tabbar-h) + max(8px, env(safe-area-inset-bottom)));
  display: flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card); border-top: 1px solid var(--border-subtle);
}
.actionbar__btn { display: flex; flex-direction: column; align-items: center; min-width: 52px; min-height: 44px; justify-content: center; font-size: .62rem; font-weight: 600; color: var(--text-secondary); }
.actionbar__main { flex: 1; min-height: 44px; }
body:has(.actionbar) .footer { padding-bottom: calc(var(--sp-12) + 60px); }

/* ============================================================
   AUCTIONS
   ============================================================ */
.auction-list { display: grid; gap: var(--sp-3); }
.auction-list--past { opacity: .75; }
.arow { display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-3); padding: var(--sp-3); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); transition: border-color var(--t-fast); }
.arow:hover { border-color: var(--brand); color: inherit; }
.arow__media { width: 88px; height: 72px; border-radius: var(--r-md); overflow: hidden; background: var(--bg-inset); display: grid; place-items: center; color: var(--text-disabled); }
.arow__media img { width: 100%; height: 100%; object-fit: cover; }
.arow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arow__top { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: .75rem; }
.arow__title { font-weight: 600; line-height: 1.35; }
.arow__meta { font-size: .8125rem; color: var(--text-tertiary); }
.arow__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding-top: var(--sp-2); border-top: 1px solid var(--border-subtle); }
.arow__label { font-size: .75rem; color: var(--text-tertiary); }
.arow__time { margin-left: auto; font-size: .8125rem; color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }

.bidbox__label { margin-top: var(--sp-2); font-size: .8125rem; color: var(--text-tertiary); }
.bidbox__timer { margin: var(--sp-3) 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand); }
.bidbox__timer.is-urgent { color: var(--danger); }
.bidform__row { display: flex; gap: var(--sp-2); }
.bidform__row .input { flex: 1; }
.bids { font-size: .8125rem; margin: var(--sp-2) 0 var(--sp-3); }
.bids li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border-subtle); }
.bids li:first-child { font-weight: 700; color: var(--text-primary); }

/* ============================================================
   SERVICES, AGENTS, PRICES, VERIFY
   ============================================================ */
.service-grid, .agent-grid, .pick-grid, .price-cities { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.service-card, .agent-card, .pick, .price-city { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); transition: border-color var(--t-fast); }
.service-card:hover, .agent-card:hover, .pick:hover, .price-city:hover { border-color: var(--brand); color: inherit; }
.service-card--lead { background: var(--brand-light); border-color: var(--brand); }
.service-card__icon, .pick__icon { color: var(--brand); }
.service-card__title, .pick__title, .agent-card__name, .price-city__name { font-weight: 600; font-size: 1.0625rem; }
.service-card__text { color: var(--text-secondary); font-size: .9rem; line-height: 1.55; }
.service-card__price { margin-top: auto; font-weight: 600; color: var(--brand); font-size: .9rem; }
.price-city__name { font-family: var(--font-display); font-size: 1.375rem; }
.price-city__row { display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-3); font-size: .875rem; }
.price-city__row .muted { grid-column: 1 / -1; font-size: .72rem; }
.agent-head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.agent-head p { margin-top: var(--sp-2); }

.result { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-5); border-radius: var(--r-lg); margin-bottom: var(--sp-3); }
.result p { margin-top: var(--sp-1); }
.result a { text-decoration: underline; }
.result--ok { background: var(--success-bg); color: var(--success); }
.result--bad { background: var(--danger-bg); color: var(--danger); }
.result--warn { background: var(--warning-bg); color: var(--warning); }

.paybox { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.paybox__title { display: flex; gap: var(--sp-2); align-items: center; font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); }
.paybox__row { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-top: 1px solid var(--border-subtle); }
.paybox__brand { grid-row: span 2; padding: 4px 8px; border-radius: var(--r-sm); font-size: .72rem; font-weight: 700; }
.paybox__brand--mtn { background: var(--mtn); color: var(--mtn-ink); }
.paybox__brand--orange { background: var(--orange); color: var(--orange-ink); }
.paybox__num { font-family: var(--font-mono); font-weight: 600; font-size: 1.0625rem; }
.paybox__name { grid-column: 2; font-size: .8125rem; color: var(--text-tertiary); }
.paybox__row .btn { grid-row: 1 / span 2; grid-column: 3; }
.paybox__warn { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); font-size: .8125rem; color: var(--warning); line-height: 1.5; }
.paybox__note { margin-top: var(--sp-2); font-size: .875rem; }
.pay-amount { display: flex; flex-direction: column; padding: var(--sp-5); background: var(--bg-surface); border-radius: var(--r-lg); margin-bottom: var(--sp-5); }
.pay-row { display: flex; flex-direction: column; gap: var(--sp-3); }
.pay-row__actions { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ============================================================
   ACCOUNT
   ============================================================ */
.auth-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--sp-6); }
.auth-card > .h2 { margin-bottom: var(--sp-2); }
.auth-card .form { margin-top: var(--sp-5); }
.auth-card__links { margin-top: var(--sp-5); text-align: center; font-size: .875rem; }
.auth-card__links a { color: var(--brand); }

.todo li + li { border-top: 1px solid var(--border-subtle); }
.todo a { display: flex; gap: var(--sp-2); align-items: center; min-height: 44px; }
.notes { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.panel .notes { border: 0; }
.note + .note { border-top: 1px solid var(--border-subtle); }
.note > a, .note { display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-4); }
.note > a { padding: 0; }
.note.is-unread { background: var(--brand-light); }
.note__body { font-size: .875rem; color: var(--text-secondary); }
.note__row { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); }
.note__icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-tertiary); }
.note__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.note__title { font-weight: 600; color: var(--text-primary); }
.note.is-unread .note__icon { background: var(--brand-light); color: var(--brand); }
.note__time { font-size: .75rem; color: var(--text-tertiary); }

.mylist { display: grid; gap: var(--sp-3); }
.mylist__item { display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-3); padding: var(--sp-3); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.mylist__media { width: 88px; height: 72px; border-radius: var(--r-md); overflow: hidden; background: var(--bg-inset); display: grid; place-items: center; color: var(--text-disabled); }
.mylist__media img { width: 100%; height: 100%; object-fit: cover; }
.mylist__body { min-width: 0; }
.mylist__body p { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; }
.mylist__title { font-weight: 600; line-height: 1.35; display: block; margin: 2px 0 var(--sp-1); }
.mylist__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--border-subtle); }

.dropzone { border: 2px dashed var(--border-default); border-radius: var(--r-lg); padding: var(--sp-4); margin-top: var(--sp-3); }
.dropzone.is-over { border-color: var(--brand); background: var(--brand-light); }
.dropzone__label { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-5); cursor: pointer; text-align: center; color: var(--text-secondary); border-radius: var(--r-md); min-height: 120px; justify-content: center; }
.dropzone__label:hover { background: var(--bg-hover); }
.upload-queue { display: grid; gap: var(--sp-1); font-size: .8125rem; }
.upload-queue .is-error { color: var(--danger); }
.thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); }
.thumbs__item { position: relative; border-radius: var(--r-md); overflow: hidden; border: 2px solid transparent; background: var(--bg-inset); }
.thumbs__item.is-cover { border-color: var(--brand); }
.thumbs__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thumbs__cover { display: none; position: absolute; top: var(--sp-1); left: var(--sp-1); }
.thumbs__item.is-cover .thumbs__cover { display: inline-block; background: var(--brand); color: var(--text-inverse); font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: var(--r-sm); }
.thumbs__actions { display: flex; justify-content: space-between; padding: var(--sp-1); background: var(--bg-card); }
.thumbs--admin { display: flex; overflow-x: auto; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.thumbs--admin img, .thumbs--admin video { width: 160px; height: 120px; object-fit: cover; border-radius: var(--r-md); flex-shrink: 0; }
.video-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-3); }
.video-row video { width: 220px; border-radius: var(--r-md); background: var(--media-scrim); }
.hero-row video { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--r-md); margin-bottom: var(--sp-3); background: var(--media-scrim); }
.logo-preview { height: 40px; width: auto; margin-bottom: var(--sp-2); }

.lead-list { display: grid; gap: var(--sp-3); }
.lead .h4 { margin: var(--sp-1) 0 var(--sp-2); }
.outcome { margin-top: var(--sp-3); }
.outcome__opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

.inbox { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; }
.inbox li + li { border-top: 1px solid var(--border-subtle); }
.inbox__item { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); transition: background var(--t-fast); }
.inbox__item:hover { background: var(--bg-hover); color: inherit; }
.inbox__item.is-unread { background: var(--brand-light); }
.inbox__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inbox__top { display: flex; justify-content: space-between; gap: var(--sp-2); }
.inbox__ref, .inbox__last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox__ref { color: var(--brand); }

.chat { display: flex; flex-direction: column; min-height: calc(100vh - var(--nav-h) - var(--tabbar-h) - 40px); padding-top: var(--sp-3); }
.chat__head { display: flex; gap: var(--sp-2); align-items: center; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-3); }
.chat__who { font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.chat__head a.small { color: var(--brand); }
.chat__log { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-4); }
.chat__form {
  position: sticky; bottom: calc(var(--tabbar-h) + max(8px, env(safe-area-inset-bottom)));
  display: flex; gap: var(--sp-2); align-items: flex-end;
  padding: var(--sp-2) 0; background: var(--bg-page);
}
.chat__form textarea { min-height: 44px; max-height: 160px; }
.chat__form .btn { min-height: 44px; }
.bubble { max-width: 82%; align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.bubble--mine { align-self: flex-end; background: var(--brand-light); border-color: transparent; border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); }
.bubble--staff { border-color: var(--brand); }
.bubble__who { display: block; font-size: .72rem; font-weight: 600; color: var(--text-tertiary); }
.bubble__body { color: var(--text-primary); line-height: 1.5; overflow-wrap: anywhere; }
.bubble__meta { display: block; font-size: .68rem; color: var(--text-tertiary); text-align: right; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { margin-top: var(--sp-16); background: var(--bg-card); border-top: 1px solid var(--border-subtle); padding: var(--sp-10) 0 var(--sp-6); }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); }
.footer__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.footer__text { font-size: .875rem; line-height: 1.6; }
.footer__about { max-width: 320px; }
.footer__head { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: var(--sp-3); }
.footer__link { display: block; padding: var(--sp-1) 0; font-size: .875rem; color: var(--text-secondary); }
.footer__base { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); font-size: .75rem; color: var(--text-tertiary); }

/* ============================================================
   ADMIN CONSOLE
   Phones and tablets: off-canvas sidebar opened from the top bar
   or the tab bar. Desktop: the sidebar is a fixed 240px column.
   ============================================================ */
.container--wide { max-width: var(--container-wide); }

.adm { min-height: 100vh; }
.adm__main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.adm__content { flex: 1; padding: var(--sp-5) 0 var(--sp-12); }
.adm__content .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.adm__content .page-head { padding-top: var(--sp-2); }
.adm__content .flash-stack { padding-top: 0; margin-bottom: var(--sp-4); }

.adm-side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 210;
  width: min(300px, 86vw);
  display: flex; flex-direction: column;
  background: var(--bg-card); border-right: 1px solid var(--border-subtle);
  transform: translateX(-100%); visibility: hidden;
  transition: transform var(--t-slow), visibility var(--t-slow);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.adm-side.is-open { transform: none; visibility: visible; box-shadow: var(--shadow-lg); }
.adm__scrim { position: fixed; inset: 0; z-index: 200; background: rgba(var(--media-scrim-rgb), .45); opacity: 0; transition: opacity var(--t-base); }
.adm__scrim.is-open { opacity: 1; }
body.adm-locked { overflow: hidden; }

.adm-side__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); height: var(--nav-h); padding: 0 var(--sp-2) 0 var(--sp-4); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.adm-side__brand { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; min-height: 44px; color: var(--text-primary); }
.adm-side__brand:hover { color: var(--text-primary); }
.adm-side__mark { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-md); background: var(--text-primary); color: var(--text-inverse); font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.adm-side__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-side__logo { height: 28px; width: auto; }
.adm-side__env { padding: var(--sp-3) var(--sp-5) 0; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.adm-side__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-3) var(--sp-4); }
.adm-side__label { padding: var(--sp-4) var(--sp-2) var(--sp-1); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.adm-side__list { display: grid; gap: 1px; }
.adm-side__link {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: 0 var(--sp-2) 0 var(--sp-3); border-radius: var(--r-md);
  color: var(--text-secondary); font-size: .9063rem;
  transition: background var(--t-fast), color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.adm-side__link:hover { background: var(--bg-hover); color: var(--text-primary); }
.adm-side__link:active { background: var(--bg-inset); }
.adm-side__link svg { flex-shrink: 0; opacity: .72; }
.adm-side__link.is-active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.adm-side__link.is-active svg { opacity: 1; }
.adm-side__link.is-active::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.adm-side__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-side__count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--warning-bg); color: var(--warning); font-size: .6875rem; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.adm-side__foot { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--border-subtle); flex-shrink: 0; }

.adm-top {
  position: sticky; top: 0; z-index: 150;
  display: flex; align-items: center; gap: var(--sp-2);
  height: var(--nav-h); padding: 0 var(--sp-2) 0 var(--sp-3);
  background: var(--bg-card); border-bottom: 1px solid var(--border-subtle);
}
.adm-top__menu { flex-direction: column; justify-content: center; gap: 4px; flex-shrink: 0; }
.adm-top__menu[aria-expanded="true"] .hamburger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.adm-top__menu[aria-expanded="true"] .hamburger__bar:nth-child(2) { opacity: 0; }
.adm-top__menu[aria-expanded="true"] .hamburger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.adm-top__crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-1); font-size: .875rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; }
.adm-top__crumbs > :not(:last-child) { display: none; }
.adm-top__crumbs a { color: var(--text-tertiary); }
.adm-top__crumbs a:hover { color: var(--text-primary); }
.adm-top__crumbs svg { flex-shrink: 0; opacity: .55; }
.adm-top__crumbs > :last-child { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.adm-top__actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; flex-shrink: 0; }
.adm-top__hide-sm { display: none; }

.pmenu { position: relative; }
.pmenu__trigger {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 5px; border: 1px solid transparent; border-radius: var(--r-full);
  background: none; color: var(--text-primary); text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pmenu__trigger:hover, .pmenu__trigger[aria-expanded="true"] { background: var(--bg-hover); border-color: var(--border-subtle); }
.pmenu__trigger:active { background: var(--bg-inset); }
.pmenu__who { display: none; flex-direction: column; line-height: 1.25; }
.pmenu__name { font-size: .875rem; font-weight: 600; color: var(--text-primary); }
.pmenu__role { font-size: .72rem; color: var(--text-tertiary); }
.pmenu__chev { display: none; color: var(--text-tertiary); transition: transform var(--t-fast); }
.pmenu__trigger[aria-expanded="true"] .pmenu__chev { transform: rotate(180deg); }
.avatar { width: 34px; height: 34px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: var(--r-full); background: var(--brand-light); color: var(--brand); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.avatar--lg { width: 44px; height: 44px; font-size: .9375rem; }
.pmenu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 300;
  width: min(292px, calc(100vw - 24px)); padding: var(--sp-2);
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.pmenu__head { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-2) var(--sp-3); margin-bottom: var(--sp-1); border-bottom: 1px solid var(--border-subtle); }
.pmenu__id { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.pmenu__email { max-width: 200px; font-size: .75rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmenu__id .tag { margin-top: var(--sp-1); }
.pmenu__item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: 44px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md);
  background: none; color: var(--text-secondary); font-size: .9063rem; text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.pmenu__item:hover, .pmenu__item:focus-visible { background: var(--bg-hover); color: var(--text-primary); outline: none; }
.pmenu__item svg { opacity: .72; }
.pmenu__item--danger { color: var(--danger); }
.pmenu__item--danger:hover, .pmenu__item--danger:focus-visible { background: var(--danger-bg); color: var(--danger); }
.pmenu__rule { height: 1px; margin: var(--sp-1) 0; background: var(--border-subtle); }

.adm-tabbar button.bottom-nav__item { border: 0; background: none; font: inherit; cursor: pointer; }

/* Dashboard */
.dash-head { align-items: flex-end; }
.setup { margin-bottom: var(--sp-5); }
.setup__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.setup__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.meter { height: 8px; overflow: hidden; border-radius: var(--r-full); background: var(--brand-light); }
.meter span { display: block; height: 100%; border-radius: var(--r-full); background: var(--brand); }

.kpis { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-5); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.kpi__label { font-size: .8125rem; color: var(--text-secondary); }
.kpi__value { font-family: var(--font-sans); font-size: 1.75rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--text-primary); }
.kpi--lead .kpi__value { font-size: clamp(2rem, 5vw, 3rem); }
.kpi__delta { font-size: .8125rem; font-weight: 600; }
.kpi__delta .muted { font-weight: 400; }
.kpi__delta--up > span:first-child { color: var(--success); }
.kpi__delta--down > span:first-child { color: var(--danger); }
.kpi__delta--flat > span:first-child { color: var(--text-secondary); }
.kpi__foot { margin-top: auto; padding-top: var(--sp-1); font-size: .75rem; color: var(--text-tertiary); }
.kpi__foot + .kpi__foot { margin-top: 0; padding-top: 0; }

.card-block { margin-bottom: var(--sp-4); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.card-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); }
.card-block__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.card-block__empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--text-tertiary); }
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-4); }

.queue li + li { border-top: 1px solid var(--border-subtle); }
.queue__row { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 var(--sp-5); color: var(--text-secondary); transition: background var(--t-fast); }
.queue__row:hover { background: var(--bg-hover); color: var(--text-primary); }
.queue__icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-tertiary); }
.queue__label { flex: 1; min-width: 0; font-size: .9063rem; }
.queue__count { font-size: .8125rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.queue__go { flex-shrink: 0; color: var(--text-disabled); }
.queue__row.is-waiting .queue__icon { background: var(--warning-bg); color: var(--warning); }
.queue__row.is-waiting .queue__label { color: var(--text-primary); font-weight: 500; }
.queue__row.is-waiting .queue__count { min-width: 26px; height: 22px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: var(--r-full); background: var(--warning-bg); color: var(--warning); font-weight: 700; }

.review__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); }
.review__row + .review__row { border-top: 1px solid var(--border-subtle); }
.review__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.review__title { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.timeline { padding: var(--sp-3) var(--sp-5) var(--sp-4); }
.timeline__item { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 2px; padding: var(--sp-2) 0; font-size: .875rem; }
.timeline__item::before { content: ''; position: absolute; left: 6px; top: 26px; bottom: -8px; width: 1px; background: var(--border-subtle); }
.timeline__item:last-child::before { display: none; }
.timeline__dot { grid-column: 1; grid-row: 1; align-self: center; width: 11px; height: 11px; border-radius: var(--r-full); background: var(--bg-card); border: 2px solid var(--border-strong); }
.timeline__who { grid-column: 2; grid-row: 1; color: var(--text-primary); font-weight: 500; }
.timeline__what { grid-column: 2; grid-row: 2; justify-self: start; padding: 1px 6px; border-radius: var(--r-sm); background: var(--bg-surface); font-family: var(--font-mono); font-size: .75rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.timeline__when { grid-column: 3; grid-row: 1; font-size: .75rem; white-space: nowrap; }

/* Settings */
.settings { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
.settings__rail { display: flex; gap: var(--sp-2); margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) var(--sp-1); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.settings__rail::-webkit-scrollbar { display: none; }
.settings__tab {
  position: relative; display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0;
  min-height: 44px; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-subtle); border-radius: var(--r-full);
  background: var(--bg-card); color: var(--text-secondary);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.settings__tab:hover { border-color: var(--border-strong); color: var(--text-primary); }
.settings__tab.is-active { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.settings__icon { display: grid; place-items: center; flex-shrink: 0; }
.settings__label { display: flex; flex-direction: column; min-width: 0; }
.settings__name { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.settings__hint { display: none; font-size: .75rem; line-height: 1.4; color: var(--text-tertiary); }
.settings__gap { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--r-full); background: var(--warning-bg); color: var(--warning); font-size: .6875rem; font-weight: 700; }
.settings__body { --pad: var(--sp-4); min-width: 0; padding: var(--pad); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.settings__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.settings__icon--lg { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-secondary); }
.settings__actions {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-6) calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: var(--sp-3) var(--pad);
  background: var(--bg-card); border-top: 1px solid var(--border-subtle); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.field--missing .input { border-color: var(--warning); }
.field__hint--warn { color: var(--warning); }
.logo-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.logo-field .logo-preview { margin-bottom: 0; padding: var(--sp-1); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.asset + .asset { padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
.asset__row { display: flex; align-items: flex-start; gap: var(--sp-4); margin-top: var(--sp-2); }
/* The size here belongs to the box, never to the stored file. A field left
   without its own modifier used to take the image's own pixel size, which
   pushed the file input past the edge of the panel and out of reach. */
.asset__preview { flex-shrink: 0; width: 132px; height: 56px; max-width: 100%; display: grid; place-items: center; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); color: var(--text-disabled); }
.asset__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Each preview is the shape of the thing it holds, so a favicon squeezed into
   a wide box cannot look correct here and wrong in the browser tab. */
.asset__preview--logo { width: 132px; height: 56px; padding: var(--sp-2); }
.asset__preview--favicon { width: 56px; height: 56px; padding: var(--sp-1); border-radius: var(--r-md); }
.asset__preview--og_image { width: 132px; height: 70px; }
.asset__preview--og_image img { width: 100%; height: 100%; object-fit: cover; }
/* The cut-out is transparent by design, so the square behind it has to be
   visible or a badly cut file looks the same as a good one. */
.asset__preview--helper_image { width: 96px; height: 96px; padding: var(--sp-2); background-color: var(--bg-subtle); background-image: linear-gradient(45deg, var(--border-subtle) 25%, transparent 25%, transparent 75%, var(--border-subtle) 75%), linear-gradient(45deg, var(--border-subtle) 25%, transparent 25%, transparent 75%, var(--border-subtle) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.asset__controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.switches { margin-top: var(--sp-2); overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.switches li + li { border-top: 1px solid var(--border-subtle); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 56px; padding: var(--sp-2) var(--sp-4); cursor: pointer; transition: background var(--t-fast); }
.switch-row:hover { background: var(--bg-hover); }
.switch-row__text { font-size: .9375rem; color: var(--text-primary); }
.switch {
  -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0;
  width: 44px; height: 26px; border-radius: var(--r-full);
  background: var(--bg-inset); border: 1px solid var(--border-default); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--r-full); background: var(--bg-card); box-shadow: var(--shadow-sm); transition: transform var(--t-base); }
.switch:checked { background: var(--brand); border-color: var(--brand); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Homepage video */
.status--ready { background: var(--success-bg); color: var(--success); }
.status--processing { background: var(--warning-bg); color: var(--warning); }
.status--failed { background: var(--danger-bg); color: var(--danger); }
.encoder { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.encoder__icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-full); }
.encoder--ok .encoder__icon { background: var(--success-bg); color: var(--success); }
.encoder--off { background: var(--warning-bg); border-color: var(--warning); }
.encoder--off .encoder__icon { background: var(--bg-card); color: var(--warning); }
.encoder__body { min-width: 0; }
.encoder__body p { margin-top: var(--sp-1); font-size: .9063rem; }
.encoder__body code { overflow-wrap: anywhere; }
.hero-admin { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-5); align-items: start; }
.hero-admin__main, .hero-admin__side { min-width: 0; }
.dropzone--flush { margin-top: 0; border: 0; padding: 0; }
.attach__summary { cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.attach__summary::-webkit-details-marker { display: none; }
.attach__title, .attach__sub { display: block; }
.attach__chev { flex-shrink: 0; color: var(--text-tertiary); transition: transform var(--t-fast); }
.attach[open] .attach__chev { transform: rotate(180deg); }
.attach:not([open]) .attach__summary { border-bottom: 0; }
.attach__steps { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.cmd { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); background: var(--bg-inset); border-radius: var(--r-md); }
.cmd__text { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: .75rem; line-height: 1.6; color: var(--text-primary); overflow-wrap: anywhere; }
.library { margin-top: var(--sp-6); }
.library__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.clips { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.clip { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.clip--failed { border-color: var(--danger); }
.clip__media { aspect-ratio: 16 / 9; background: var(--media-scrim); }
.clip__media video { width: 100%; height: 100%; object-fit: cover; }
.clip__placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); font-size: .875rem; color: rgba(var(--on-media-rgb), .72); }
.spinner { width: 26px; height: 26px; border-radius: var(--r-full); border: 3px solid rgba(var(--on-media-rgb), .22); border-top-color: var(--on-media); animation: av-spin 900ms linear infinite; }
@keyframes av-spin { to { transform: rotate(360deg); } }
.clip__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.clip__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.clip__title { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.clip__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.clip__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); font-size: .8125rem; }
.clip__facts dt { font-size: .72rem; color: var(--text-tertiary); }
.clip__facts dd { color: var(--text-primary); overflow-wrap: anywhere; }
.clip__saving { color: var(--success); font-weight: 600; }
.clip__log > summary, .clip__edit > summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--text-secondary); }
.clip__log pre { max-height: 180px; margin-top: var(--sp-2); padding: var(--sp-3); overflow: auto; background: var(--bg-inset); border-radius: var(--r-md); font-family: var(--font-mono); font-size: .72rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); }
.clip__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.clip__actions .btn--danger { margin-left: auto; }
.clip__edit .form { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.stack > * + * { margin-top: var(--sp-4); }
fieldset.field { min-width: 0; border: 0; }
.choice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.choice + .choice { margin-top: var(--sp-2); }
.choice:hover { border-color: var(--border-strong); }
.choice:has(input:checked) { background: var(--brand-light); border-color: var(--brand); }
.choice input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); }
.choice > span { display: flex; flex-direction: column; gap: 2px; font-size: .9063rem; }
.chain { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.chain__step { display: flex; gap: var(--sp-3); }
.chain__n { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-full); background: var(--bg-surface); color: var(--text-secondary); font-size: .75rem; font-weight: 700; }
.chain__body { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; }
.chain__body a { align-self: flex-start; color: var(--brand); }

/* ============================================================
   RESPONSIVE, MOBILE FIRST
   Breakpoints:  mobile < 640px | tablet 640 to 1023px | desktop >= 1024px
   ============================================================ */

/* Tablet and up */
@media (min-width: 640px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-auto-columns: 44%; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .lotfacts { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .service-grid, .agent-grid, .pick-grid, .price-cities { grid-template-columns: repeat(2, 1fr); }
  .finder { grid-template-columns: 1fr 1fr; }
  .finder__q { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: repeat(2, 1fr); }
  .cities { grid-template-columns: repeat(3, 1fr); }
  .cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .thumbs { grid-template-columns: repeat(3, 1fr); }
  .trust-band__steps { grid-template-columns: repeat(2, 1fr); }
  .gallery { margin-left: 0; margin-right: 0; border-radius: var(--r-xl); }
  .gallery__slide { flex-basis: 80%; aspect-ratio: 16 / 10; }
  .gallery__nav { display: grid; }
  .pay-row { flex-direction: row; justify-content: space-between; }
  .pay-row__actions { min-width: 260px; }
  .arow { grid-template-columns: 120px 1fr auto; align-items: center; }
  .arow__media { width: 120px; height: 90px; }
  .arow__side { grid-column: auto; flex-direction: column; align-items: flex-end; border-top: 0; padding-top: 0; }
  .arow__time { margin-left: 0; }
  .mylist__item { grid-template-columns: 120px 1fr; }
  .mylist__media { width: 120px; height: 90px; }
  .specs { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-6); }
  .specs__row--wide { grid-column: 1 / -1; }

  .adm__content .container { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .adm-top { padding: 0 var(--sp-3) 0 var(--sp-4); }
  .adm-top__crumbs > :not(:last-child) { display: inline-flex; }
  .adm-top__hide-sm { display: inline-grid; }
  .pmenu__chev { display: block; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi--lead { grid-column: 1 / -1; }
  .settings__rail { margin: 0 calc(-1 * var(--sp-6)); padding: 0 var(--sp-6) var(--sp-1); }
  .settings__body { --pad: var(--sp-6); }
  .clips { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: top nav, no tab bar, no hamburger, no drawer */
@media (min-width: 1024px) {
  .nav__links     { display: flex !important; }
  .nav__link--desktop, .nav__icon--desktop { display: inline-flex; }
  .nav__cta       { display: inline-flex; }
  .nav__hamburger { display: none !important; }
  .bottom-nav     { display: none !important; }
  .drawer, .drawer-scrim { display: none !important; }
  body.has-bottom-nav { padding-bottom: 0 !important; }
  .actionbar { display: none; }
  body:has(.actionbar) .footer { padding-bottom: var(--sp-6); }
  .toast-stack { bottom: var(--sp-6); }
  .chat__form { bottom: 0; }
  .chat { min-height: calc(100vh - var(--nav-h) - 40px); }

  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .rail { grid-auto-columns: calc((100% - 3 * var(--sp-3)) / 4); }
  .finder { grid-template-columns: 1.2fr 1fr 2fr auto; }
  .finder__q { grid-column: auto; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .detail { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-10); }
  .detail__side { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); align-self: start; max-height: calc(100vh - var(--nav-h) - var(--sp-8)); overflow-y: auto; }
  .trust-band { grid-template-columns: 1fr 1.4fr; align-items: center; padding: var(--sp-10); }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card--lead { grid-row: span 2; }
  .agent-grid, .price-cities { grid-template-columns: repeat(3, 1fr); }
  .pick-grid { grid-template-columns: repeat(2, 1fr); }
  .cities { grid-template-columns: repeat(4, 1fr); }
  .cats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .quick { grid-template-columns: repeat(10, 1fr); }
  .thumbs { grid-template-columns: repeat(4, 1fr); }
  .mylist__item { grid-template-columns: 120px 1fr auto; align-items: center; }
  .mylist__actions { grid-column: auto; border-top: 0; padding-top: 0; justify-content: flex-end; max-width: 380px; }
  .sheet { align-items: center; }
  .sheet__panel { border-radius: var(--r-xl); }
  .hero__inner { padding-top: var(--sp-20); padding-bottom: var(--sp-16); }

  .adm { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .adm-side { position: sticky; top: 0; height: 100vh; width: auto; transform: none; visibility: visible; box-shadow: none; }
  .adm-side__close, .adm-top__menu, .adm__scrim { display: none !important; }
  .adm-top { padding: 0 var(--sp-6); }
  .pmenu__who { display: flex; }
  .pmenu__trigger { padding-right: var(--sp-3); }
  .kpis { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .kpi--lead { grid-column: auto; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-block--wide { grid-column: 1 / -1; }
  .settings { grid-template-columns: 272px minmax(0, 1fr); gap: var(--sp-6); }
  .settings__rail { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .settings__tab { align-items: flex-start; padding: var(--sp-3); border-color: transparent; border-radius: var(--r-md); background: none; }
  .settings__tab:hover { background: var(--bg-hover); border-color: transparent; }
  .settings__tab.is-active { background: var(--bg-card); border-color: var(--border-subtle); color: var(--text-primary); }
  .settings__tab.is-active .settings__icon { color: var(--brand); }
  .settings__icon { margin-top: 2px; }
  .settings__name, .settings__hint { white-space: normal; }
  .settings__hint { display: block; }
  .settings__gap { margin-left: auto; }
  .settings__actions { bottom: 0; }
  .hero-admin { grid-template-columns: minmax(0, 1fr) 340px; }
  .hero-admin__side { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
}

/* Small desktops: the bar gets tighter before anything has to scroll away. */
@media (max-width: 1279px) {
  .nav__inner { gap: var(--sp-2); }
  .nav__link { padding: var(--sp-2); font-size: .875rem; }
}

/* The narrowest desktops. French section names need every pixel here: at
   1024 they were nineteen short of fitting. */
@media (max-width: 1199px) {
  .nav__link { padding: var(--sp-2) var(--sp-1); }
  .nav__wordmark { font-size: 1.125rem; }
}

/* Tablet and mobile: hamburger replaces the desktop nav */
@media (max-width: 1023px) {
  .nav__links { display: none !important; }
  .nav__hamburger { display: inline-flex !important; }
  .bottom-nav { display: block; }
  body.has-bottom-nav { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  body:has(.actionbar) { padding-bottom: calc(var(--tabbar-h) + 64px + env(safe-area-inset-bottom, 0px)); }
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* Mobile only */
@media (max-width: 639px) {
  .footer__grid { grid-template-columns: 1fr; gap: 20px; }
  .footer__about { max-width: 100%; }
  .footer__base { flex-direction: column; text-align: center; }
  input, select, textarea { font-size: 16px !important; }
  .btn { min-height: 44px; }
  .btn--xs { min-height: 36px; }
  .nav__icon { width: 40px; height: 40px; }
  .nav__chip, .nav__select { min-height: 36px; }
  .nav__currency, .nav__theme { display: none; }
  .nav__inner { gap: var(--sp-2); padding: 0 var(--sp-3); }
  .nav__wordmark { font-size: 1.125rem; }
  .table-wrap table { min-width: 560px; }
  .page-head { padding-top: var(--sp-5); }
  .detail__side .panel { padding: var(--sp-4); }
  .form-actions .btn { width: 100%; }
  /* Two columns of a horizontal card leave about 110px for the words, which
     breaks "Short stays" across three lines. Stacked, the label gets the
     whole width. */
  .cats { margin-top: var(--sp-8); }
  .cat { flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-height: 104px; padding: var(--sp-3); }
  .cat__go { display: none; }
  .cat__icon { width: 40px; height: 40px; }
  .cat__label { font-size: .875rem; }
  .hero--static { min-height: 78vh; }
  .hero__card { padding: var(--sp-5); }
  .hero__card--end { margin-left: 0; }
  .adm-top .nav__icon { width: 40px; height: 40px; }
  .clip__actions .btn--danger { margin-left: 0; }
}

/* Touch devices: hover effects stick after a tap */
@media (hover: none) and (pointer: coarse) {
  .lcard:hover { box-shadow: none; }
  .queue__row:hover, .switch-row:hover, .adm-side__link:hover { background: none; }
  .adm-side__link.is-active:hover { background: var(--brand-light); }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* The poster stands in for the clip. Scrub has nothing to scrub, so its
     tall scroll track collapses into the static layout. */
  .hero__stage:has(.hero__still--motion) .hero__video { display: none; }
  .hero__still--motion { display: block; }
  .hero--scrub { height: auto; min-height: min(86vh, 720px); padding-top: var(--nav-h); }
  .hero--scrub .hero__stage { position: absolute; height: auto; }
  .hero--scrub .hero__inner { position: relative; }
  .hero--static .hero__video, .hero--static .hero__still { height: 100%; top: 0; transform: none !important; }
  .hero--expand { height: auto; min-height: min(86vh, 720px); }
  .hero--expand .hero__stage { position: relative; top: 0; height: min(86vh, 720px); }
  .hero--expand .hero__video, .hero--expand .hero__still,
  .hero--expand .hero__inner, .hero--expand .hero__eyebrow, .hero--expand .hero__title,
  .hero--expand .hero__lead, .hero--expand .finder, .hero--expand .hero__actions { transform: none !important; opacity: 1; }
  .has-rise [data-rise] { opacity: 1; transform: none; }
  .spinner { animation: none; border-top-color: rgba(var(--on-media-rgb), .22); }
}

@media print {
  .nav, .bottom-nav, .drawer, .footer, .actionbar, .toast-stack, .detail__side { display: none !important; }
  .adm-side, .adm-top, .adm__scrim { display: none !important; }
  body { padding: 0 !important; background: var(--bg-card); }
}