/* ════════════════════════════════════════
   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(--bark);
  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;
}

.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 .btn base class + semantic modifier classes.
   Size modifiers (.btn-xs, .btn-sm etc.) adjust py/px/size.
   Never write button styles outside this system.
──────────────────────────────────────────────────────────── */

.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* Geometry */
  padding: var(--ui-button-py) var(--ui-button-px);
  border: none;
  border-radius: var(--radius-full);
  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
  /* Interaction */
  cursor: pointer;
  transition: all var(--transition-base);
}

/* ── Variants ── */

.btn-primary {
  background: var(--moss);
  color: var(--white);
  border: 1.5px solid var(--moss);
}
.btn-primary:hover {
  background: var(--moss-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--moss-b40);
}

.btn-secondary {
  background: var(--parchment);
  color: var(--bark);
  border: 1.5px solid var(--parchment);
}
.btn-secondary:hover {
  background: var(--stone);
  color: var(--white);
  border-color: var(--stone);
}

.btn-ghost {
  background: var(--btn-ghost-bg);
  color: var(--bark);
  border: 1px solid var(--btn-ghost-border);
}
.btn-ghost:hover {
  background: var(--btn-ghost-bg-hover);
}

.btn-danger {
  background: var(--btn-danger-bg);
  color: var(--red);
  border: 1px solid var(--btn-danger-border);
}
.btn-danger:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.btn-warn {
  background: var(--btn-warn-bg);
  color: var(--amber);
  border: 1px solid var(--btn-warn-border);
}
.btn-warn:hover {
  background: var(--amber);
  color: var(--white);
  border-color: var(--amber);
}

.btn-admin {
  background: rgba(200, 169, 74, 0.18);
  color: var(--gold);
  border: 1px solid rgba(200, 169, 74, 0.35);
}
.btn-admin:hover {
  background: var(--gold);
  color: var(--bark);
}

/* ── Size scale ── */

.btn-xs {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

.btn-sm {
  font-size: var(--text-sm);
  padding: 5px var(--space-3);
}

/* Default (.btn) = md — no modifier needed */

.btn-lg {
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-5);
}

/* Full-width variant */
.btn-full {
  width: 100%;
  justify-content: center;
  padding-top: 11px;
  padding-bottom: 11px;
}

/* Compact utility */
.btn-compact {
  padding: 5px var(--space-2);
  font-size: var(--text-sm);
}

/* 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: 38px;   /* intentional: exact icon target size */
  height: 38px;
  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);
  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: 2rem;
  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-divider {
  width: 1px;
  height: 32px;
  background: var(--parchment);
  flex-shrink: 0;
}

.fab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  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-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);
  white-space: nowrap;
  letter-spacing: 0.2px;
}


/* ── 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);
  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-md); }
.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 CLASSES ──────────────────── */

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

.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 (used in admin and shop) */
.btn-pill-xxs { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.btn-pill-xs  { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.btn-pill-sm  { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.btn-pill-md  { padding: var(--space-2) var(--space-5); font-size: var(--text-base); }

/* Pill colour variants */
.btn-pill-xxs.moss, .btn-pill-xs.moss, .btn-pill-sm.moss, .btn-pill-md.moss { background: var(--moss); }
.btn-pill-xxs.red,  .btn-pill-xs.red,  .btn-pill-sm.red,  .btn-pill-md.red  { background: var(--danger-accent); }
.btn-pill-xxs.gold, .btn-pill-xs.gold, .btn-pill-sm.gold, .btn-pill-md.gold { background: var(--gold-accent); }
.btn-pill-xs.warn  { background: var(--gold-accent); }
.btn-pill-xs.red-dark { background: #7a0000; }

/* 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: 2rem; 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: 18px !important;
  font-weight: var(--weight-bold) !important;
  font-family: var(--font-primary) !important;
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  text-align: center !important;
  line-height: 30px !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;
}