/* ════════════════════════════════════════
   BASE — Reset, Layout, Buttons, Header
   All values reference design tokens from
   theme.css. No magic numbers.
════════════════════════════════════════ */


/* ── FLUID TYPOGRAPHY ROOT ────────────────────────────────────
   Scale the html font-size with the viewport so all rem-based
   --text-* tokens grow on high-resolution / wide screens.
   Derivation:  16px @ 1280px  →  24px @ 3840px  (4K).
   Clamped: minimum 14px (mobile), maximum 30px (ultra-wide).
──────────────────────────────────────────────────────────── */

html {
  /* 16px at ≤1920px; scales to 22px at 4K (3840px) */
  font-size: clamp(16px, 0.3125vw + 10px, 22px);
}


/* ── RESET ────────────────────────────── */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input, textarea, button, select {
  font-family: inherit;
}


/* ── BODY ─────────────────────────────── */

body {
  font-family: var(--font-primary);
  font-weight: var(--weight-normal);   /* was 250 — non-standard, removed */
  background: var(--cream);
  color: var(--text-color-1);
  font-size: var(--text-base);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


/* ── HEADER ───────────────────────────── */

header {
  background: var(--white);
  padding: 0 var(--space-8);
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-sidebar);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-header);
  flex-shrink: 0;
  position: relative;
  /* Ensure header stays clickable above overlays */
  pointer-events: auto;
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logo-img {
  height: 2rem;
  width: auto;
}

.header-right {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}


/* ── LAYOUT ───────────────────────────── */

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}


/* ── BUTTON SYSTEM ────────────────────────────────────────
   One button style, two sizes, four colour sets.
──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: center;
  padding: var(--btn-size-sm-py) var(--btn-size-sm-px);
  border: var(--btn-style-border-width) solid var(--btn-color-primary-border);
  border-radius: var(--btn-style-radius);
  font-family: var(--font-primary);
  font-size: var(--btn-size-sm-font);
  font-weight: var(--btn-style-font-weight);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--btn-style-transition);
  transform: translateY(0);
  box-shadow: none;
  background: var(--btn-color-primary-bg);
  color: var(--btn-color-primary-ink);
}

.btn:hover {
  transform: translateY(var(--btn-style-lift-hover));
  box-shadow: var(--btn-style-shadow-hover);
}

/* Colour sets (same style, different token mapping) */
.btn-primary,
.btn-moss {
  background: var(--btn-color-primary-bg);
  color: var(--btn-color-primary-ink);
  border-color: var(--btn-color-primary-border);
}
.btn-primary:hover,
.btn-moss:hover {
  background: var(--btn-color-primary-bg-hover);
  color: var(--btn-color-primary-ink);
  border-color: var(--btn-color-primary-border);
}

.btn-secondary {
  background: var(--btn-color-secondary-bg);
  color: var(--btn-color-secondary-ink);
  border-color: var(--btn-color-secondary-border);
}
.btn-secondary:hover {
  background: var(--btn-color-secondary-bg-hover);
  color: var(--btn-color-secondary-ink);
  border-color: var(--btn-color-secondary-border);
}

.btn-ghost,
.btn-neutral {
  background: var(--btn-color-neutral-bg);
  color: var(--btn-color-neutral-ink);
  border-color: var(--btn-color-neutral-border);
}
.btn-ghost:hover,
.btn-neutral:hover {
  background: var(--btn-color-neutral-bg-hover);
  color: var(--btn-color-neutral-ink);
  border-color: var(--btn-color-neutral-border);
}

.btn-danger {
  background: var(--btn-color-danger-bg);
  color: var(--btn-color-danger-ink);
  border-color: var(--btn-color-danger-border);
}
.btn-danger:hover {
  background: var(--btn-color-danger-bg-hover);
  color: var(--btn-color-danger-ink-hover);
  border-color: var(--btn-color-danger-bg-hover);
}

/* Legacy aliases collapsed into the 4 colour sets */
.btn-warn {
  background: var(--btn-color-secondary-bg);
  color: var(--btn-color-secondary-ink);
  border-color: var(--btn-color-secondary-border);
}
.btn-warn:hover {
  background: var(--btn-color-secondary-bg-hover);
  color: var(--btn-color-secondary-ink);
  border-color: var(--btn-color-secondary-border);
}

.btn-share {
  background: var(--btn-color-primary-bg);
  color: var(--btn-color-primary-ink);
  border-color: var(--btn-color-primary-border);
}
.btn-share:hover {
  background: var(--btn-color-primary-bg-hover);
  color: var(--btn-color-primary-ink);
  border-color: var(--btn-color-primary-border);
}

.btn-admin {
  background: var(--btn-color-neutral-bg);
  color: var(--btn-color-neutral-ink);
  border-color: var(--btn-color-neutral-border);
}
.btn-admin:hover {
  background: var(--btn-color-neutral-bg-hover);
  color: var(--btn-color-neutral-ink);
  border-color: var(--btn-color-neutral-border);
}

/* Size scale (two sizes only) */
.btn-sm,
.btn-xs,
.btn-compact {
  font-size: var(--btn-size-sm-font);
  padding: var(--btn-size-sm-py) var(--btn-size-sm-px);
}
.btn-lg {
  font-size: var(--btn-size-lg-font);
  padding: var(--btn-size-lg-py) var(--btn-size-lg-px);
}

/* Full-width variant */
.btn-full {
  width: 100%;
  justify-content: center;
}

/* Shared surfaces should inherit the same base ink and body size unless they
   intentionally opt out in a later module. */
:where(.modal, .achievement-popup, .photo-popup, .checkin-modal-surface, .sidebar, .panel-detail-body, .challenge-card, .shop-item-modal, .admin-test-card, .admin-report-card, .admin-user-card) {
  color: var(--text-color-1);
  font-size: var(--text-base);
}

/* Common meta copy should default to the muted ink rather than restating it
   across every component block. */
:where(.modal-sub, .achievement-popup-desc, .upload-text, .upload-note, .checkin-photo-text, .admin-review-location, .challenge-desc, .wip-note, .chal-hero-sub, .shop-buying-label, .shop-panel-footnote, .shop-preview-note, .shop-item-modal-desc, .shop-item-modal-balance, .shop-item-need-pill, .panel-loc, .panel-owner-inline-name, .panel-checkin-signin-msg, .cond-top-votes, .cond-expand-arrow, .photo-count-sub, .photo-popup-date) {
  color: var(--text-color-3);
}

/* Small chips share the same rounded inline geometry; variants only need to
   supply spacing, typography, and colors. */
:where(.achievement-popup-status, .achievement-popup-difficulty, .challenge-badge, .chal-countdown, .cond-top-badge, .panel-owner-tag, .admin-report-pill, .bench-reaction-stat, .shop-item-modal-rarity, .shop-preview-tag) {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
}

/* Most dismiss buttons were restating the exact same chrome. Centralizing it
   keeps per-component rules focused on placement and size. */
:where(.achievement-popup-x, .modal-x, .checkin-modal-close, .photo-popup-close, .fp-close) {
  border: none;
  border-radius: var(--radius-full);
  background: var(--parchment);
  color: var(--bark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: background var(--transition-base), color var(--transition-base);
}

:where(.achievement-popup-x, .modal-x, .checkin-modal-close, .photo-popup-close, .fp-close):hover {
  background: var(--danger-hover-bg);
  color: var(--white);
}

/* Focus ring (accessibility) */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

/* Suppress mouse-focus outlines */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}


/* ── BENCH DRAG FAB ───────────────────── */

.bench-drag-fab {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--cream);
  border: 1.5px solid var(--parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  cursor: grab;
  box-shadow: 0 2px 6px var(--shadow);
  transition: all var(--transition-base);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bench-drag-fab:hover {
  background: var(--moss);
  border-color: var(--moss);
  transform: scale(1.08);
}

.bench-drag-fab:active   { cursor: grabbing; transform: scale(1.10); }
.bench-drag-fab.dragging { opacity: 0.5; }

.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-max);
  font-size: 32px;
  transform: translate(-50%, -50%);
  display: none;
}


/* ── FAB GROUP (map bottom controls) ─── */

.fab-group {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-12);
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  background: var(--ui-surface-bg);
  border: var(--ui-surface-border);
  border-radius: var(--radius-full);
  padding: 7px var(--space-5);
  gap: var(--space-5);
  box-shadow: 0 4px 20px var(--shadow-deep);
}

.fab-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-1);
}

.fab-divider {
  width: 1px;
  height: 32px;
  background: var(--parchment);
  flex-shrink: 0;
}

.fab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fab-item.fab-item-start { margin-left: var(--space-1); }
.fab-item.fab-item-end   { margin-right: var(--space-1); }

.fab-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--cream);
  border: var(--border-card);
  font-size: var(--text-lg);
  box-shadow: 0 2px 6px var(--shadow);
}

.fab-icon-btn {
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.fab-icon-btn:hover {
  background: var(--moss);
  border-color: var(--moss);
  transform: scale(1.08);
}

.fab-item:hover .fab-circle {
  background: var(--moss);
  border-color: var(--moss);
  transform: scale(1.08);
}

.fab-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--stone-dark);
  line-height: 1.2;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.fab-bug-link {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--moss);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}


/* ── TOOLTIP ──────────────────────────── */

.fab-wrap      { position: relative; display: inline-flex; }

.fab-tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--bark);
  color: var(--cream);
  padding: 5px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.fab-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--bark);
}

.fab-wrap:hover .fab-tooltip { opacity: 1; }


/* ── COIN BADGE ───────────────────────── */

.coin-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: linear-gradient(135deg, #ffd700, #ffb700);
  color: var(--warn-pill-text);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-base);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(255, 183, 0, 0.30);
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.coin-badge:hover { filter: brightness(1.1); }


/* ── HEADER USER AREA ─────────────────── */

.header-user-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.user-info-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-coin-badge,
.header-streak-badge {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.header-coin-badge {
  font-weight: var(--weight-bold);
  color: var(--bark);
  background: var(--cream);
  border: var(--border-card);
  font-size: var(--text-base);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.header-streak-badge {
  font-weight: var(--weight-extrabold);
  background: linear-gradient(135deg, #ff6b35, #ffd700);
  color: white;
  font-size: var(--text-base);
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 10px rgba(255, 107, 53, 0.40);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.header-streak-badge:hover { filter: brightness(1.1); }

.header-coin-badge.is-hidden,
.header-streak-badge.is-hidden { display: none !important; }


/* ── USER AVATAR ──────────────────────── */

.user-avatar {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-full);
  background: var(--moss);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.25);
  transition: border-color var(--transition-base), transform var(--transition-base);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}

.user-avatar:hover {
  border-color: var(--moss-light);
  transform: scale(1.05);
}

.user-avatar.avatar-border-rainbow {
  background: none;
  overflow: visible !important;
}


/* ── STREAK BADGE ANIMATION ───────────── */

.streak-count-num   { font-size: var(--text-sm); }
.streak-count-label { font-size: var(--text-xs); opacity: 0.7; }

@keyframes streakPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4) rotate(-10deg); }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes streakGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 100, 0, 0); }
  50%       { box-shadow: 0 0 12px rgba(255, 100, 0, 0.50); }
}

.header-streak-badge.popping {
  animation: streakPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
             streakGlow 0.8s ease;
}


/* ── UTILITY PRIMITIVES ──────────────────
   Zero-context building blocks. Compose these
   in HTML rather than restating the same
   declarations inside component classes.
   All tokens are CSS vars → dark mode is free.
─────────────────────────────────────────── */

/* Layout — flex shortcuts */
.row         { display: flex; align-items: center; }
.col         { display: flex; flex-direction: column; }
.row-start   { display: flex; align-items: flex-start; }
.row-end     { display: flex; align-items: center; justify-content: flex-end; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.row-center  { display: flex; align-items: center; justify-content: center; }
.row-wrap    { display: flex; align-items: center; flex-wrap: wrap; }
.col-center  { display: flex; flex-direction: column; align-items: center; }
.inline-row  { display: inline-flex; align-items: center; }

/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Flex sizing */
.flex-1    { flex: 1; }
.flex-auto { flex: 0 0 auto; }
.shrink-0  { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }
.min-w-0   { min-width: 0; }
.w-full    { width: 100%; }

/* Text size */
.text-2xs  { font-size: var(--text-2xs); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* Font weight */
.bold      { font-weight: var(--weight-bold); }
.semibold  { font-weight: var(--weight-semibold); }
.medium    { font-weight: var(--weight-medium); }
.extrabold { font-weight: var(--weight-extrabold); }

/* Text color */
.text-muted  { color: var(--stone-dark); }
.text-bark   { color: var(--bark); }
.text-moss   { color: var(--moss); }
.text-white  { color: var(--white); }
.text-gold   { color: var(--gold); }
.text-danger { color: var(--danger-accent); }
.text-amber  { color: var(--amber); }

/* Text alignment / transform */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-upper  { text-transform: uppercase; }

/* Text overflow */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowrap   { white-space: nowrap; }
.clamp-2  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Margin bottom */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Margin top */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

/* Padding */
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }

/* Border radius */
.rounded-full { border-radius: var(--radius-full); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-sm   { border-radius: var(--radius-sm); }

/* Background */
.bg-cream     { background: var(--cream); }
.bg-white     { background: var(--white); }
.bg-parchment { background: var(--parchment); }

/* Justify / align modifiers (for composing with .row / .col) */
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.items-baseline  { align-items: baseline; }

/* All-sides margin */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }

/* Inline */
.inline-block { display: inline-block; }

/* Misc */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.pointer         { cursor: pointer; }
.relative        { position: relative; }
.block           { display: block; }


/* ── UTILITY CLASSES ──────────────────── */

.is-hidden    { display: none; }

.ui-flex-center       { display: flex; align-items: center; justify-content: center; }
.ui-row-between       { display: flex; align-items: center; justify-content: space-between; }
.ui-inline-flex-center { display: inline-flex; align-items: center; justify-content: center; }

.ui-card-cream {
  background: var(--cream);
  border-radius: var(--radius-md);
}

.ui-avatar-fill {
  border-radius: var(--radius-full);
  background: var(--ui-avatar-fallback-bg);
  color: var(--ui-avatar-fallback-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-pill-btn {
  border: none;
  border-radius: var(--radius-full);
  color: var(--white);
  font-weight: var(--weight-bold);
  cursor: pointer;
  font-family: var(--font-primary);
  transition: opacity var(--transition-fast);
}
.ui-pill-btn:hover { opacity: 0.88; }

.ui-empty-muted {
  color: var(--stone-dark);
  text-align: center;
}

.ui-section-heading {
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--bark);
}

/* Pill button sizes (legacy aliases mapped to two-size system) */
.btn-pill-xxs,
.btn-pill-xs,
.btn-pill-sm {
  padding: var(--btn-size-sm-py) var(--btn-size-sm-px);
  font-size: var(--btn-size-sm-font);
  border-radius: var(--btn-style-radius);
}
.btn-pill-md {
  padding: var(--btn-size-lg-py) var(--btn-size-lg-px);
  font-size: var(--btn-size-lg-font);
  border-radius: var(--btn-style-radius);
}

/* Pill colour variants collapsed to 4 button colours */
.btn-pill-xxs.moss, .btn-pill-xs.moss, .btn-pill-sm.moss, .btn-pill-md.moss {
  background: var(--btn-color-primary-bg);
  color: var(--btn-color-primary-ink);
}
.btn-pill-xxs.red, .btn-pill-xs.red, .btn-pill-sm.red, .btn-pill-md.red, .btn-pill-xs.red-dark {
  background: var(--btn-color-danger-bg);
  color: var(--btn-color-danger-ink);
}
.btn-pill-xxs.gold, .btn-pill-xs.gold, .btn-pill-sm.gold, .btn-pill-md.gold, .btn-pill-xs.warn {
  background: var(--btn-color-secondary-bg);
  color: var(--btn-color-secondary-ink);
}

/* Avatar sizes */
.avatar-shell-32 {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.avatar-initial-compact { font-size: var(--text-sm); }

.avatar-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
  display: block;
  pointer-events: none;
}

.avatar-fallback-fill {
  width: 100%;
  height: 100%;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* Text utilities */
.text-link-inline  { color: var(--moss); cursor: pointer; text-decoration: underline; }
.text-note-sm      { font-size: var(--text-xs); color: var(--stone-dark); margin-top: var(--space-1); }
.text-error        { color: var(--danger-hover-bg); font-size: var(--text-sm); margin-top: var(--space-1); display: none; }
.text-left         { text-align: left; }
.emoji-title       { font-size: 32px; margin-bottom: var(--space-1); }
.emoji-title-sm-gap { margin-bottom: var(--space-2); }

/* gs-card sizes */
.gs-card-clickable  { cursor: pointer; }
.gs-card-span-2     { grid-column: span 2; }

/* Max-height scroll */
.max-h-60-scroll { max-height: 60vh; overflow-y: auto; }

/* Note spacing */
.note-top-6  { margin-top: var(--space-1); }
.btn-mt-10   { margin-top: var(--space-2); }
.btn-mt-8    { margin-top: var(--space-2); }

/* Signup / profile button spacing */
.signup-submit-btn,
.profile-save-btn { margin-top: var(--space-1); }

/* Section row helpers */
.header-user-row,
.user-info-row,
.admin-header-row,
.login-actions-row { display: flex; align-items: center; }

.admin-header-row      { justify-content: space-between; margin-bottom: var(--space-1); }
.login-actions-row     { justify-content: space-between; margin-bottom: var(--space-4); }
.btn-full-center       { width: 100%; justify-content: center; }
.modal-footer-center   { margin-top: var(--space-4); text-align: center; }
.modal-title-center    { text-align: center; }
.modal-actions-tight   { margin-top: var(--space-2); }
.form-group-tight      { margin-bottom: var(--space-1); }

/* ── LEAFLET ZOOM CONTROLS ────────────── */

.leaflet-bar {
  border: var(--ui-surface-border) !important;
  box-shadow: 0 2px 10px var(--shadow-card) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar a:hover {
  background: var(--ui-surface-bg) !important;
  color: var(--bark) !important;
  border-bottom-color: var(--parchment) !important;
  font-size: 20px !important;
  font-weight: var(--weight-bold) !important;
  font-family: var(--font-primary) !important;
  width: 40px !important;
  height: 40px !important;
  display: block !important;
  text-align: center !important;
  line-height: 40px !important;
}

.leaflet-container .leaflet-bar a:hover {
  background: var(--cream) !important;
  color: var(--moss) !important;
}

.leaflet-container .leaflet-bar a:last-child {
  border-bottom: none !important;
}