/* Smooth cross-fade between pages in browsers that support it (Chrome/Edge
   currently); a no-op everywhere else, including all of Safari, so this is
   purely additive polish, never a functional dependency. Persistent chrome
   (topbar, bottom nav, its active-tab indicator) gets its own
   view-transition-name below so it morphs in place across a navigation
   instead of cross-fading with the rest of the page -- the app shell stays
   put, only the content underneath changes. */
@view-transition {
  navigation: auto;
}

:root {
  color-scheme: light dark;

  /* ---- Chalk Line: bright, printed-guidebook palette (light mode) ----
     Neutrals lean slightly violet (toward the accent below) rather than
     the earlier stone/green tint. */
  --bg: #f2f1f6;
  --surface: #ffffff;
  --surface-hover: #f6f5fa;
  --input-bg: #ffffff;
  --border: #e1dfe8;
  --border-strong: #cbc8d6;
  --text: #18171d;
  --muted: #64626e;
  --accent: #5b3df0;
  --accent-hover: #4a2fd1;
  --accent-soft: rgba(91, 61, 240, 0.1);
  --accent-contrast: #ffffff;
  --danger: #b0203a;
  --danger-soft: rgba(176, 32, 58, 0.09);
  /* Success/"easy grade" stay green on purpose -- that's their own
     semantic meaning (a checkmark, the easiest tape color on the wall),
     independent of the brand accent above. */
  --success: #1f7a4d;
  --success-soft: rgba(31, 122, 77, 0.1);
  --gold: #93700f;
  --gold-soft: rgba(147, 112, 15, 0.14);

  --tier-easy: #2f8f4e; --tier-easy-soft: rgba(47, 143, 78, 0.14);
  --tier-mid: #b5650f; --tier-mid-soft: rgba(181, 101, 15, 0.14);
  --tier-hard: #b0203a; --tier-hard-soft: rgba(176, 32, 58, 0.12);
  --tier-elite: #6b3fa0; --tier-elite-soft: rgba(107, 63, 160, 0.13);

  --hold-glow: 0px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(24, 23, 29, 0.07);
  --shadow-md: 0 14px 30px -14px rgba(24, 23, 29, 0.22), 0 2px 7px -2px rgba(24, 23, 29, 0.09);

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ---- Night Session: dark, glowing-board palette (dark mode) ---- */
    --bg: #0d0e13;
    --surface: #16181f;
    --surface-hover: #1c1f29;
    --input-bg: #181a22;
    --border: #262a35;
    --border-strong: #363b4a;
    --text: #f2f3f7;
    --muted: #9296a8;
    --accent: #7c5cff;
    --accent-hover: #9179ff;
    --accent-soft: rgba(124, 92, 255, 0.18);
    --accent-contrast: #ffffff;
    --danger: #fb7185;
    --danger-soft: rgba(251, 113, 133, 0.14);
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.14);
    --gold: #f5c451;
    --gold-soft: rgba(245, 196, 81, 0.16);

    --tier-easy: #34d399; --tier-easy-soft: rgba(52, 211, 153, 0.16);
    --tier-mid: #fb923c; --tier-mid-soft: rgba(251, 146, 60, 0.16);
    --tier-hard: #fb7185; --tier-hard-soft: rgba(251, 113, 133, 0.16);
    --tier-elite: #c084fc; --tier-elite-soft: rgba(192, 132, 252, 0.17);

    --hold-glow: 5px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 18px 36px -16px rgba(0, 0, 0, 0.6), 0 2px 9px -2px rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }

/* ---- Top navigation ---- */

.topbar {
  view-transition-name: app-topbar;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.topbar .brand:active { transform: scale(0.96); }
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; fill: var(--accent); }

.topbar nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
}
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.topbar nav a:hover { color: var(--text); background: var(--accent-soft); }
.topbar nav a.active { color: var(--accent); background: var(--accent-soft); }

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  margin: 0 0.4rem;
}

.nav-cta {
  color: var(--accent-contrast) !important;
  background: var(--accent);
}
.nav-cta:hover { background: var(--accent-hover) !important; color: var(--accent-contrast) !important; }

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.nav-toggle:active { transform: scale(0.92); }
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .topbar { flex-wrap: wrap; }
  .topbar nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    order: 3;
    padding-top: 0.6rem;
    margin-top: 0.6rem;
    border-top: 1px solid var(--border);
  }
  .topbar nav.nav-open { display: flex; animation: dropIn 0.2s ease; }
  .topbar nav a { width: 100%; padding: 0.65rem 0.75rem; }
  .nav-divider { display: none; }
  /* These destinations move to the bottom tab bar on mobile -- keep the
     hamburger menu for secondary things (Board, Sync, Log out) only, so
     nothing is navigable twice. */
  .topbar nav a.primary-nav-item { display: none; }
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---- Bottom tab bar (mobile only) ---- */

.bottom-nav {
  view-transition-name: app-bottomnav;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom));
}
.bottom-nav-indicator {
  view-transition-name: app-bottomnav-indicator;
  position: absolute;
  top: 0.3rem;
  bottom: calc(0.3rem + env(safe-area-inset-bottom));
  left: 0;
  width: 0;
  opacity: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  transition: transform 0.4s cubic-bezier(0.22, 1.2, 0.36, 1), width 0.3s ease, opacity 0.2s ease;
  pointer-events: none;
}
.bottom-nav-item {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem 0.2rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.66rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, transform 0.15s ease;
}
.bottom-nav-item:active { transform: scale(0.9); }
.bottom-nav-item svg { width: 22px; height: 22px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item.active svg { transform: scale(1.08); }
.bottom-nav-badge {
  position: absolute;
  top: 0;
  right: calc(50% - 17px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--surface);
}

@media (max-width: 720px) {
  .bottom-nav { display: flex; }
  main { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ---- Layout ---- */

main { max-width: 760px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }

h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.3rem; }
h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.75rem; font-family: var(--font-body); }
.hint { color: var(--muted); font-size: 0.88rem; }
.page-header { margin-bottom: 1.5rem; }
.page-header form, .page-header > button { margin-top: 0.75rem; }
.climb-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.climb-title-row h1 { margin-bottom: 0; }

/* ---- Toasts (replaces a flat message list; fed by Django's messages
   framework -- see #toast-stack in base.html and app.js for the
   entrance/dismiss/celebration behavior) ---- */

.toast-stack {
  position: fixed;
  top: calc(0.75rem + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  pointer-events: none;
}
.toast {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(420px, 100%);
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 0.88rem;
  font-weight: 600;
  pointer-events: auto;
  transform: translateY(-130%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.3s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--muted);
}
.toast.success::before { background: var(--success); }
.toast.error::before { background: var(--danger); }
.toast-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  border-radius: 999px;
}
.toast-close:hover { background: var(--surface-hover); color: var(--text); }
.toast.celebrate { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.toast-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  animation: toastSpark 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes toastSpark {
  to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ---- Cards ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}

/* ---- Forms ---- */

.stack { display: flex; flex-direction: column; gap: 1rem; max-width: 380px; }
.stack label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); }

.layout-bar { margin-bottom: 0.85rem; }
.layout-bar label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.layout-bar select { max-width: 240px; }

.search-bar { display: flex; gap: 0.5rem; margin-bottom: 0.85rem; }
.search-bar input { flex: 1; font-size: 1rem; padding: 0.7rem 0.95rem; }

.filters-details {
  margin-bottom: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.filters-details summary {
  cursor: pointer;
  padding: 0.75rem 1.1rem;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.filters-details summary::-webkit-details-marker { display: none; }
.filters-details summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.filters-details[open] summary::before { transform: rotate(45deg); }
.filters-details[open] summary { border-bottom: 1px solid var(--border); }

/* Pure-CSS accordion: animating a grid track (0fr -> 1fr) instead of height
   works even though the content's height isn't known up front. */
.filters-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.filters-details[open] .filters-collapse { grid-template-rows: 1fr; }
.filters-collapse > div { overflow: hidden; }

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
  padding: 1.1rem;
}
.filters label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.filters .checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.filters button { grid-column: 1 / -1; }

input, select, button, textarea {
  font: inherit;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
textarea { resize: vertical; min-height: 120px; }

/* Honeypot: present in the markup for bots that fill in every field,
   invisible and untabbable for everyone else. */
.honeypot-field {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="checkbox"] { accent-color: var(--accent); width: auto; padding: 0; }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.1rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) center, calc(100% - 0.8rem) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* A checkbox styled as an iOS-style switch -- same underlying <input
   type="checkbox">, so form submission/name/value are untouched. */
.switch { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 24px; padding: 0; flex-shrink: 0;
  background: var(--border-strong); border: none; border-radius: 999px;
  position: relative; cursor: pointer; transition: background 0.2s ease;
}
.switch input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.switch input[type="checkbox"]:checked { background: var(--accent); }
.switch input[type="checkbox"]:checked::before { transform: translateX(16px); }
.switch input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }

button {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:not(:disabled):hover { background: var(--accent-hover); }
button:not(:disabled):active { transform: scale(0.97); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-secondary:not(:disabled):hover { background: var(--surface-hover); }

.btn-ghost {
  background: transparent;
  color: var(--danger);
  border: 1px solid transparent;
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
}
.btn-ghost:not(:disabled):hover { background: var(--danger-soft); }

/* ---- Badges ---- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.badge-muted { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); font-family: var(--font-body); }
.badge-gold { background: var(--gold-soft); color: var(--gold); }

/* Easy grades stay neutral on purpose -- the point of tinting a badge is to
   flag something worth noticing, and on the default "most ascents" sort
   that's nearly every climb (easy ones get climbed the most), which just
   painted the whole homepage green. Color only kicks in once a climb is
   actually harder than average. */
.badge.tier-easy { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.badge.tier-mid { background: var(--tier-mid-soft); color: var(--tier-mid); }
.badge.tier-hard { background: var(--tier-hard-soft); color: var(--tier-hard); }
.badge.tier-elite { background: var(--tier-elite-soft); color: var(--tier-elite); }

.tier-text { font-family: var(--font-mono); font-weight: 700; }
.tier-text.tier-easy { color: inherit; font-weight: 600; }
.tier-text.tier-mid { color: var(--tier-mid); }
.tier-text.tier-hard { color: var(--tier-hard); }
.tier-text.tier-elite { color: var(--tier-elite); }

/* ---- Climb list ---- */

.climb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.climb-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  animation: cardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.climb-list li:nth-child(1) { animation-delay: 0.02s; }
.climb-list li:nth-child(2) { animation-delay: 0.06s; }
.climb-list li:nth-child(3) { animation-delay: 0.1s; }
.climb-list li:nth-child(4) { animation-delay: 0.14s; }
.climb-list li:nth-child(5) { animation-delay: 0.18s; }
.climb-list li:nth-child(n+6) { animation-delay: 0.2s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: none; }
}
.climb-list li:has(a):hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.climb-list li:has(a):active { transform: translateY(0) scale(0.99); }
.climb-list a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: var(--text);
}
.climb-name { font-weight: 700; font-size: 1rem; }
.climb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.82rem; }
.climb-setter { color: var(--muted); font-size: 0.8rem; }
.climb-list .empty { padding: 1.5rem 1.1rem; color: var(--muted); text-align: center; background: transparent; border-style: dashed; box-shadow: none; }
.climb-list .climb-row-fallback { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1.1rem; }
.climb-list .row-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.5rem 1.1rem 0.85rem; }
.climb-list .row-actions form { margin: 0; }

.pager { display: flex; justify-content: space-between; margin-top: 1.25rem; }
.pager a { color: var(--accent); text-decoration: none; font-weight: 700; font-size: 0.9rem; }
.pager a:hover { text-decoration: underline; }

/* ---- Climb detail ---- */

.climb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.climb-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.climb-nav-arrow:hover { background: var(--accent-soft); color: var(--accent); }
.climb-nav-arrow:active { transform: scale(0.88); }
.climb-nav-disabled { color: var(--border-strong); }
.climb-nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.group-chip-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.group-chip-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.35rem 0.35rem 0.7rem;
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
}
.group-chip-list a { color: var(--text); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.group-chip-list a:hover { color: var(--accent); }
.group-chip-list form { margin: 0; }
.group-chip-list button { padding: 0.15rem 0.55rem; font-size: 0.95rem; line-height: 1.4; }

.invite-link-box { display: flex; gap: 0.5rem; }
.invite-link-box input { flex: 1; min-width: 0; }

.share-note { font-style: italic; margin: 0.4rem 0 0; }

.size-picker { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }
.size-options { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.size-options a {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.size-options a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.board-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
#board-svg { width: 100%; height: auto; display: block; }

.stats-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); }
.stats-table th { color: var(--muted); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.stats-table tbody tr:last-child td { border-bottom: none; }
.stats-table tbody tr { transition: background 0.15s ease; }
.stats-table tbody tr:hover { background: var(--surface-hover); }
.stats-table tbody tr.current-row { background: var(--accent-soft); }
.stats-table tbody tr.current-row td:first-child { font-weight: 800; }

.bluetooth-panel { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bluetooth-panel p { margin: 0; }

.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.actions-grid .stack { max-width: none; }
@media (max-width: 640px) { .actions-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.beta-form { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.beta-form form { margin-top: 0.5rem; }
.beta-list { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.beta-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; max-width: 100%; }
.beta-item .instagram-media { margin: 0 !important; }

/* ---- Auth pages (django-allauth: login, signup, logout, etc.) ---- */

main.auth-page {
  max-width: 400px;
  margin: 2.5rem auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-md);
}
main.auth-page h1 { text-align: center; font-size: 1.6rem; }
main.auth-page > p:first-of-type,
main.auth-page form + p {
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: -0.35rem;
}
main.auth-page .stack { max-width: none; gap: 0.9rem; }

/* django-allauth's default field rendering is Django's own form.as_p --
   .stack only defines flex/gap for a bare <label>, so give the <p> wrapper
   the same nested-label look instead of touching that rendering directly. */
main.auth-page .stack p {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}
main.auth-page .stack p label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
main.auth-page .stack p input,
main.auth-page .stack p textarea { width: 100%; }
main.auth-page .stack p span { font-size: 0.78rem; color: var(--muted); }
main.auth-page .stack > button { margin-top: 0.15rem; }

main.auth-page hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0 1rem; }
main.auth-page h2 {
  text-align: center;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.9rem;
}

main.auth-page ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.provider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.provider-btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.provider-btn:active { transform: scale(0.98); }
.provider-icon { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 480px) {
  main.auth-page { margin: 0; border-radius: 0; border-left: none; border-right: none; box-shadow: none; }
}

/* ---- Empty / misc ---- */

.checkmark { color: var(--success); }