@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

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

/* ============================================================
   THEME — graphite, white, grey. Colour is reserved for the
   badge and for warnings; everything else earns contrast from
   light, shadow and type. Same language as the LOCKED IN app.
   ============================================================ */
:root, [data-theme="dark"] {
  --bg-primary:    #0d0d0f;
  --bg-secondary:  #141416;
  --bg-card:       #1a1a1d;
  --bg-card-hover: #212125;
  --bg-elevated:   #232327;
  --bg-glass:      rgba(16, 16, 18, 0.76);
  --border:        #2a2a2f;
  --border-light:  #38383f;
  --text-primary:  #f4f4f5;
  --text-secondary:#9a9aa2;
  --text-muted:    #63636a;

  --ink:      #ffffff;          /* primary action surface */
  --ink-on:   #0d0d0f;          /* text on that surface   */
  --grad:     linear-gradient(135deg, #ffffff 0%, #d6d6da 100%);
  --tint:     rgba(255, 255, 255, 0.07);
  --tint-2:   rgba(255, 255, 255, 0.12);
  --hairline: rgba(255, 255, 255, 0.06);

  --shadow-sm:   0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 10px 32px rgba(0, 0, 0, 0.42);
  --shadow-lg:   0 26px 70px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 44px rgba(255, 255, 255, 0.05);
  --orb-1: rgba(255, 255, 255, 0.10);
  --orb-2: rgba(160, 160, 175, 0.09);
  --orb-3: rgba(255, 255, 255, 0.05);
  --sheen: rgba(255, 255, 255, 0.35);
}

[data-theme="light"] {
  --bg-primary:    #ededf0;
  --bg-secondary:  #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f4f4f6;
  --bg-elevated:   #ffffff;
  --bg-glass:      rgba(255, 255, 255, 0.80);
  --border:        #e2e2e7;
  --border-light:  #cdcdd4;
  --text-primary:  #0d0d0f;
  --text-secondary:#5e5f68;
  --text-muted:    #8c8d96;

  --ink:      #131316;
  --ink-on:   #ffffff;
  --grad:     linear-gradient(135deg, #2a2a30 0%, #0d0d0f 100%);
  --tint:     rgba(13, 13, 15, 0.055);
  --tint-2:   rgba(13, 13, 15, 0.10);
  --hairline: rgba(13, 13, 15, 0.05);

  --shadow-sm:   0 1px 3px rgba(13, 13, 15, 0.07);
  --shadow-md:   0 8px 26px rgba(13, 13, 15, 0.09);
  --shadow-lg:   0 22px 56px rgba(13, 13, 15, 0.14);
  --shadow-glow: 0 0 40px rgba(13, 13, 15, 0.05);
  --orb-1: rgba(13, 13, 15, 0.05);
  --orb-2: rgba(90, 90, 110, 0.05);
  --orb-3: rgba(13, 13, 15, 0.03);
  --sheen: rgba(255, 255, 255, 0.7);
}

:root {
  --gold:   #e8b64a;
  --gold-2: #a9761b;
  --danger: #e06060;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* the house curve */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  min-height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }

::selection { background: var(--text-primary); color: var(--bg-primary); }

/* Scrollbar, quietly */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); background-clip: content-box; }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes riseIn   { from { opacity: 0; transform: translateY(14px) scale(0.995); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { 0% { opacity: 0; transform: scale(0.92); } 60% { transform: scale(1.015); } 100% { opacity: 1; transform: scale(1); } }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 70% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes spinRing { to { transform: rotate(360deg); } }
@keyframes shimmer  { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes sweep    { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }
@keyframes floaty   { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(2%, -3%, 0); } }
@keyframes underline{ from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes toastUp  { from { opacity: 0; transform: translate(-50%, 22px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* View transition — staggered, and only when the route actually
   changes, so liking a post doesn't replay the whole page. */
#view.enter > * { animation: riseIn 0.52s var(--ease) both; }
#view.enter > *:nth-child(1) { animation-delay: 0.00s }
#view.enter > *:nth-child(2) { animation-delay: 0.04s }
#view.enter > *:nth-child(3) { animation-delay: 0.08s }
#view.enter > *:nth-child(4) { animation-delay: 0.12s }
#view.enter > *:nth-child(5) { animation-delay: 0.16s }
#view.enter > *:nth-child(6) { animation-delay: 0.20s }
#view.enter > *:nth-child(7) { animation-delay: 0.23s }
#view.enter > *:nth-child(8) { animation-delay: 0.26s }
#view.enter > *:nth-child(n+9) { animation-delay: 0.29s }
#side.enter > * { animation: riseIn 0.5s var(--ease) both; }
#side.enter > *:nth-child(2) { animation-delay: 0.06s }
#side.enter > *:nth-child(3) { animation-delay: 0.12s }
#side.enter > *:nth-child(n+4) { animation-delay: 0.18s }

@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;
  }
}

/* ============================================================
   AMBIENT
   ============================================================ */
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(120px); animation: floaty 22s ease-in-out infinite; }
.orb-green { width: 48vw; height: 48vw; background: var(--orb-1); top: -16vw; left: -12vw; }
.orb-amber { width: 40vw; height: 40vw; background: var(--orb-2); bottom: -16vw; right: -10vw; animation-duration: 28s; animation-direction: reverse; }
.orb-sky   { width: 34vw; height: 34vw; background: var(--orb-3); top: 44%; right: 26%; animation-duration: 34s; }

/* A fine grain over everything — keeps large flat areas from
   looking like plastic. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ============================================================
   SCREENS
   ============================================================ */
.screen { display: none; position: relative; z-index: 1; }
.screen.active { display: block; }
#auth-screen.active, #setup-screen.active, #onboard-screen.active {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 48px 20px;
  animation: fadeIn 0.5s var(--ease) both;
}

/* ============================================================
   AUTH
   ============================================================ */
.auth-watermark {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(4rem, 13vw, 11rem); font-weight: 700; letter-spacing: 0.16em;
  color: var(--hairline); white-space: nowrap;
  user-select: none; pointer-events: none; z-index: 0;
  animation: fadeIn 1.6s var(--ease) both;
}
.auth-shell, .setup-shell {
  position: relative; z-index: 1; width: 100%;
  background: var(--bg-glass);
  backdrop-filter: blur(26px) saturate(120%); -webkit-backdrop-filter: blur(26px) saturate(120%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  animation: popIn 0.6s var(--ease) both;
}
.auth-shell { max-width: 460px; padding: 44px 40px 36px; }
.setup-shell { max-width: 560px; padding: 40px 40px 36px; }

.auth-brand { text-align: center; }
.auth-logo {
  font-family: 'Space Grotesk', sans-serif; font-size: 2.1rem; font-weight: 700;
  letter-spacing: 6px; line-height: 1; text-shadow: 0 0 40px var(--tint-2);
}
.auth-logo-sub {
  margin-top: 8px; font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 8px; color: var(--text-muted);
}
.auth-tagline { margin: 14px 0 32px; text-align: center; font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); }
.auth-panel { display: none; }
.auth-panel.active { display: block; animation: riseIn 0.42s var(--ease) both; }
.welcome-back { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 22px; }
.auth-quote { margin-top: 26px; text-align: center; font-size: 0.74rem; font-style: italic; color: var(--text-muted); }

/* ============================================================
   FIELDS
   ============================================================ */
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label {
  display: block; margin-bottom: 8px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--text-secondary);
}
.field label .opt { font-weight: 400; letter-spacing: 0.6px; text-transform: none; color: var(--text-muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary);
  font-size: 0.95rem; outline: none; resize: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
[data-theme="light"] .field input, [data-theme="light"] .field textarea, [data-theme="light"] .field select { background: #fbfbfc; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--border-light);
  box-shadow: 0 0 0 4px var(--tint), var(--shadow-sm);
  background: var(--bg-secondary);
}
.field input[type="date"] { color-scheme: dark; }
[data-theme="light"] .field input[type="date"] { color-scheme: light; }
.field-hint { margin-top: 7px; font-size: 0.72rem; line-height: 1.55; color: var(--text-muted); }

.handle-wrap { position: relative; }
.handle-at { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.handle-wrap input { padding-left: 32px; }

.method { margin-bottom: 18px; }
.method-label { margin-bottom: 10px; font-size: 0.68rem; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-secondary); }
.method-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.method-option {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 10px; background: var(--bg-primary);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-secondary); font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: all 0.28s var(--ease);
}
[data-theme="light"] .method-option { background: #fbfbfc; }
.method-option svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.method-option:hover { background: var(--bg-card-hover); color: var(--text-primary); transform: translateY(-1px); }
.method-option:hover svg { transform: scale(1.1); }
.method-option.active {
  border-color: var(--border-light); background: var(--tint);
  color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--hairline);
}

.checkline {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
  font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); cursor: pointer; user-select: none;
  transition: color 0.25s var(--ease);
}
.checkline:hover { color: var(--text-primary); }
.checkline input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  border: 1px solid var(--border-light); border-radius: 5px;
  background: var(--bg-primary); position: relative;
  transition: all 0.28s var(--ease);
}
.checkline input:checked + .checkbox { background: var(--ink); border-color: var(--ink); transform: scale(1.05); }
.checkline input:checked + .checkbox::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--ink-on); border-width: 0 2px 2px 0; transform: rotate(45deg);
  animation: popIn 0.28s var(--ease) both;
}

.guidelines {
  margin: 6px 0 18px; padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 2px solid var(--text-primary); border-radius: var(--radius);
}
.guidelines-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3px; margin-bottom: 10px; }
.guidelines ul { margin: 0 0 14px 16px; }
.guidelines li { font-size: 0.78rem; line-height: 1.75; color: var(--text-secondary); }
.guidelines .checkline { margin-bottom: 0; }

.vault-note, .vault-banner {
  display: flex; gap: 12px; padding: 16px 18px;
  background: var(--tint); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 0.8rem; line-height: 1.65; color: var(--text-secondary);
}
.vault-note { margin-bottom: 20px; }
.vault-banner { margin-bottom: 16px; align-items: center; font-size: 0.82rem; }
.vault-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--text-primary); }
.vault-note strong { display: block; color: var(--text-primary); margin-bottom: 3px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative; overflow: hidden;
  width: 100%; padding: 15px; border: none; border-radius: var(--radius);
  font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), filter 0.28s var(--ease);
}
/* A single sheen sweeps across on hover. Restrained, but alive. */
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  opacity: 0; pointer-events: none;
}
.btn:hover::after { opacity: 0.6; animation: sweep 0.85s var(--ease); }

.btn-primary { margin-top: 8px; background: var(--grad); color: var(--ink-on); box-shadow: var(--shadow-md); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-ghost { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-card-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-sm { width: auto; padding: 9px 18px; font-size: 0.72rem; letter-spacing: 1.5px; }
.btn-danger { background: rgba(224, 96, 96, 0.12); color: var(--danger); border: 1px solid rgba(224, 96, 96, 0.3); }

.link-btn {
  background: none; border: none; padding: 0; color: var(--text-secondary);
  font-size: 0.8rem; cursor: pointer; position: relative;
  transition: color 0.25s var(--ease);
}
.link-btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.link-btn:hover { color: var(--text-primary); }
.link-btn:hover::after { transform: scaleX(0); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; position: relative;
  background: none; border: none; border-radius: 10px;
  color: var(--text-secondary); font-size: 1rem; cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: var(--tint); color: var(--text-primary); transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn .dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--text-primary); border: 2px solid var(--bg-primary);
  animation: popIn 0.4s var(--ease) both;
}

/* The prototype used `.msg` for inline auth errors. This app shows those as
   flash banners instead, and `.msg` now means a chat message — so the old
   rule survived only to clip every chat line to max-height: 0. Renamed
   rather than deleted, in case an auth form wants it back. */
.form-msg { margin-top: 12px; font-size: 0.8rem; line-height: 1.5; text-align: center; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s var(--ease), max-height 0.3s var(--ease); }
.form-msg.show { opacity: 1; max-height: 90px; }
.form-msg-error { color: var(--danger); }
.switch { margin-top: 22px; text-align: center; font-size: 0.82rem; color: var(--text-secondary); }
.switch a { color: var(--text-primary); font-weight: 500; border-bottom: 1px solid var(--border-light); transition: border-color 0.25s var(--ease); }
.switch a:hover { border-color: var(--text-primary); }

/* ============================================================
   SETUP / ONBOARDING
   ============================================================ */
.step-track { display: flex; gap: 6px; margin-bottom: 26px; }
.step { flex: 1; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.step.done { background: var(--border-light); }
.step.active { background: var(--grad); animation: underline 0.7s var(--ease) both; transform-origin: left; }
.setup-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.3px; }
.setup-sub { margin: 8px 0 28px; font-size: 0.85rem; line-height: 1.65; color: var(--text-secondary); }

.avatar-pick {
  display: flex; align-items: center; gap: 18px; padding: 18px; margin-bottom: 26px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.avatar-pick:hover { border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.avatar-btn {
  position: relative; width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 50%; border: 1px dashed var(--border-light);
  background: var(--bg-primary); color: var(--text-muted); cursor: pointer; overflow: hidden;
  transition: all 0.32s var(--ease);
}
.avatar-btn:hover { border-color: var(--text-primary); color: var(--text-primary); transform: scale(1.04); box-shadow: var(--shadow-md); }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.avatar-btn img[hidden], .avatar-empty[hidden] { display: none; }
.avatar-empty svg { width: 26px; height: 26px; }
.avatar-badge {
  position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--grad); color: var(--ink-on); font-size: 1rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.avatar-copy-title { font-size: 0.92rem; font-weight: 600; margin-bottom: 5px; }
.avatar-copy-sub { font-size: 0.76rem; line-height: 1.6; color: var(--text-secondary); }
.avatar-copy .link-btn { margin-top: 8px; font-size: 0.74rem; }

.onboard-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.onboard-row {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  animation: riseIn 0.5s var(--ease) both;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.onboard-row:hover { transform: translateX(3px); border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.onboard-row:nth-child(2) { animation-delay: 0.05s }
.onboard-row:nth-child(3) { animation-delay: 0.10s }
.onboard-row:nth-child(4) { animation-delay: 0.15s }
.onboard-row:nth-child(5) { animation-delay: 0.20s }
.onboard-row:nth-child(6) { animation-delay: 0.25s }
.onboard-row .uline { flex: 1; min-width: 0; }

/* ============================================================
   SHELL
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg-glass); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.topbar-brand { display: flex; align-items: baseline; gap: 9px; flex-shrink: 0; transition: opacity 0.25s var(--ease); }
.topbar-brand:hover { opacity: 0.7; }
.topbar-logo { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 3px; }
.topbar-sub { font-family: 'Space Grotesk', sans-serif; font-size: 0.58rem; font-weight: 600; letter-spacing: 4px; color: var(--text-muted); }
.topbar-search { flex: 1; max-width: 460px; position: relative; }
.topbar-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); transition: color 0.25s var(--ease); }
.topbar-search input {
  width: 100%; padding: 10px 14px 10px 40px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text-primary); font-size: 0.88rem; outline: none;
  transition: all 0.3s var(--ease);
}
.topbar-search input:focus { border-color: var(--border-light); box-shadow: 0 0 0 4px var(--tint); background: var(--bg-secondary); }
.topbar-search input:focus + svg, .topbar-search:focus-within svg { color: var(--text-primary); }
.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topbar-me { display: flex; transition: transform 0.28s var(--ease); }
.topbar-me:hover { transform: scale(1.08); }
.topbar-me .av { width: 34px; height: 34px; }

.layout {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px;
  gap: 28px; max-width: 1260px; margin: 0 auto; padding: 24px 20px 90px;
}
.rail { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.rail a {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: var(--radius); color: var(--text-secondary);
  font-size: 0.9rem; font-weight: 500;
  transition: color 0.28s var(--ease), transform 0.28s var(--ease);
}
/* Background wipes in from the left rather than just appearing */
.rail a::before {
  content: ''; position: absolute; inset: 0; background: var(--tint);
  transform: scaleX(0); transform-origin: left; border-radius: inherit;
  transition: transform 0.34s var(--ease);
}
.rail a > * { position: relative; }
.rail a:hover { color: var(--text-primary); transform: translateX(2px); }
.rail a:hover::before { transform: scaleX(1); }
.rail a.on { color: var(--text-primary); font-weight: 600; }
.rail a.on::before { transform: scaleX(1); }
.rail a.on::after {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px;
  border-radius: 2px; background: var(--text-primary);
  animation: riseIn 0.4s var(--ease) both;
}
.rail-ico { width: 18px; text-align: center; font-size: 0.95rem; transition: transform 0.34s var(--ease); }
.rail a:hover .rail-ico { transform: scale(1.18) rotate(-4deg); }
.rail-post {
  position: relative; overflow: hidden;
  margin-top: 14px; padding: 13px; border: none; border-radius: var(--radius);
  background: var(--grad); color: var(--ink-on);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.82rem;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.rail-post:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rail-post:active { transform: scale(0.98); }

main#view { min-width: 0; }
.side { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 16px; }
:root {
  /* The phone nav bar's height, declared once. Reps sizes itself against it,
     and hard-coding the number in two places is how the action rail ended up
     39px underneath the bar. 0 on desktop, where there is no bar. */
  --bottombar-h: 0px;
}
.bottombar { display: none; }

/* ============================================================
   CARDS
   ============================================================ */
.card, .side-card, .profile-card, .group-card, .q-card, .post, .recipe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.34s var(--ease), box-shadow 0.34s var(--ease), transform 0.34s var(--ease);
}
.card, .profile-card, .group-card, .post, .recipe-card { overflow: hidden; }
.post:hover, .group-card:hover, .recipe-card:hover, .q-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card + .card { margin-top: 16px; }
.card-pad { padding: 20px; }
.card-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.3px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.section-head h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.4px; }
.section-head p { font-size: 0.84rem; color: var(--text-secondary); margin-top: 4px; }

/* ============================================================
   AVATARS & BADGE
   ============================================================ */
.av {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-initials { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--text-primary); font-size: 0.9em; }

/* Streak ring: a slow conic sweep, not a static border. */
.av-ring { border: none; padding: 2px; background: var(--bg-card); position: relative; overflow: visible; }
.av-ring::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, var(--text-primary), var(--border-light) 40%, var(--text-primary) 75%, var(--text-primary));
  animation: spinRing 7s linear infinite;
}
.av-ring::after { content: ''; position: absolute; inset: 1px; border-radius: 50%; background: var(--bg-card); z-index: 1; }
.av-ring img, .av-ring .av-initials { position: relative; z-index: 2; border-radius: 50%; }
.av-link { display: inline-flex; }
.av-link:hover .av { transform: scale(1.07); box-shadow: var(--shadow-md); }

.badge-svg { vertical-align: -2px; }
.badge-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 4px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
  transition: transform 0.28s var(--ease);
}
.badge-chip:hover { transform: translateY(-1px); }
.badge-chip-earned { background: rgba(232, 182, 74, 0.13); border: 1px solid rgba(232, 182, 74, 0.34); color: var(--gold-2); }
[data-theme="dark"] .badge-chip-earned { color: var(--gold); }
.badge-chip-at-risk { background: var(--tint); border: 1px dashed rgba(232, 182, 74, 0.45); color: var(--text-secondary); }
.lock-mini { font-size: 0.7rem; opacity: 0.6; }

.uline { display: flex; align-items: center; gap: 11px; min-width: 0; }
.uline-text { min-width: 0; }
/* The name row carries a name, sometimes a DEMO tag, and sometimes a streak
   chip — and the chip is `white-space: nowrap` so it cannot shrink. Without
   min-width:0 a flex item refuses to shrink below its content, so in the
   narrow side card the chip overflowed its own box and painted straight over
   the Follow button beside it. Wrapping is the honest answer: nothing is
   hidden, the row just gets taller when there is a lot to say. */
.uline-name {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; row-gap: 4px;
  min-width: 0;
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.1px;
}
/* A long name truncates rather than forcing the row wider than the card. */
.uline-name > a {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uline-name a { position: relative; }
.uline-name a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.uline-name a:hover::after { transform: scaleX(1); }
.uline-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   FEED
   ============================================================ */
.feed-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.feed-tab, .chip, .ctype {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 0.83rem; font-weight: 500; cursor: pointer;
  transition: all 0.3s var(--ease);
}
.feed-tab:hover, .chip:hover, .ctype:hover { color: var(--text-primary); border-color: var(--border-light); transform: translateY(-1px); }
.feed-tab.on, .chip.active, .ctype.on {
  background: var(--ink); border-color: var(--ink); color: var(--ink-on); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 15px; font-size: 0.8rem; }

.post { margin-bottom: 16px; }
.post-reason { padding: 8px 18px; font-size: 0.7rem; letter-spacing: 0.4px; color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
.post-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.post-head .uline { flex: 1; }
.post-time { font-size: 0.74rem; color: var(--text-muted); }
.post-vis { font-size: 0.68rem; letter-spacing: 0.4px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.post-text { padding: 0 18px 14px; font-size: 0.94rem; line-height: 1.68; white-space: pre-wrap; }
.post-text .tag, .post-text .mention { color: var(--text-primary); font-weight: 500; border-bottom: 1px solid var(--border-light); transition: border-color 0.25s var(--ease); }
.post-text .tag:hover, .post-text .mention:hover { border-color: var(--text-primary); }

.carousel { position: relative; background: var(--bg-primary); overflow: hidden; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track img {
  width: 100%; flex: 0 0 100%; scroll-snap-align: start; display: block;
  /* aspect-ratio comes from the media itself, inline — a fixed 4/3 here
     cropped every portrait phone photo to a letterbox strip. */
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.post:hover .carousel-track img { transform: scale(1.02); }
.carousel-count {
  position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); color: #fff; font-size: 0.7rem; font-weight: 600;
}
.play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.play-badge span {
  width: 58px; height: 58px; border-radius: 50%; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px); border: 1.5px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem; padding-left: 4px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.post:hover .play-badge span { transform: scale(1.08); background: rgba(0,0,0,0.65); }

.workout-box, .meal-box, .pr-box, .recipe-box {
  margin: 0 18px 14px; padding: 16px; border-radius: var(--radius);
  background: var(--bg-secondary); border: 1px solid var(--border);
}
/* A recipe in the feed: a card that opens the recipe page. */
.recipe-link { display: block; color: inherit; text-decoration: none; }
.recipe-link:hover { border-color: var(--border-light); }
.recipe-link > span { display: block; }
.recipe-meal {
  margin-bottom: 6px; font-family: 'Space Grotesk', sans-serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted);
}
.recipe-desc { margin-top: 4px; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.45; }
.recipe-link .macros { display: flex; }
.recipe-open { margin-top: 12px; font-size: 0.84rem; font-weight: 600; color: var(--text-primary); }
.recipe-meals { margin-bottom: 18px; }
.chip-n { opacity: .55; margin-left: 4px; font-variant-numeric: tabular-nums; }
.recipe-more-link { margin: 18px 0 8px; text-align: center; font-size: 0.84rem; }
.recipe-more-link a { color: var(--text-secondary); }

.workout-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.workout-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.2px; }
.diff {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-light); color: var(--text-secondary);
}
.diff-Beginner { background: var(--tint); }
.diff-Intermediate { background: var(--tint-2); color: var(--text-primary); }
.diff-Advanced { background: var(--ink); color: var(--ink-on); border-color: var(--ink); }

.ex-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--border); font-size: 0.85rem;
  transition: padding-left 0.28s var(--ease);
}
.ex-row:first-of-type { border-top: none; }
.ex-row:hover { padding-left: 5px; }
.ex-name { font-weight: 500; }
.ex-meta { color: var(--text-secondary); font-size: 0.8rem; white-space: nowrap; }

.macros { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.macro { font-size: 0.78rem; color: var(--text-secondary); }
.macro b { color: var(--text-primary); font-family: 'Space Grotesk', sans-serif; }

.pr-box { display: flex; align-items: center; gap: 16px; border-left: 2px solid var(--gold); }
.pr-value { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.pr-label { font-size: 0.68rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }

.post-actions { display: flex; align-items: center; gap: 4px; padding: 6px 12px 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.act {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 0.8rem; cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.act:hover { background: var(--tint); color: var(--text-primary); }
.act:active { transform: scale(0.93); }
.act.on { color: var(--text-primary); font-weight: 600; }
.act svg { width: 17px; height: 17px; transition: transform 0.3s var(--ease); }
.act:hover svg { transform: scale(1.12); }
.act-heart.on svg { animation: heartPop 0.45s var(--ease); }
.act-spacer { flex: 1; }

.comments { padding: 4px 18px 16px; border-top: 1px solid var(--border); animation: riseIn 0.35s var(--ease) both; }
.comment { display: flex; gap: 10px; padding: 10px 0; }
.comment-body { min-width: 0; flex: 1; }
.comment-who { font-size: 0.82rem; font-weight: 600; }
.comment-who span { font-weight: 400; color: var(--text-muted); font-size: 0.74rem; margin-left: 6px; }
.comment-text { font-size: 0.87rem; line-height: 1.6; margin-top: 2px; }
.comment-hidden { font-size: 0.8rem; color: var(--text-muted); font-style: italic; padding: 10px 0; }
.comment-report { background: none; border: none; color: var(--text-muted); font-size: 0.7rem; cursor: pointer; padding: 2px 0; transition: color 0.25s var(--ease); }
.comment-report:hover { color: var(--danger); }
.comment-form, .dm-form { display: flex; gap: 8px; margin-top: 10px; }
.comment-form input {
  flex: 1; padding: 10px 14px; background: var(--bg-primary);
  border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary);
  font-size: 0.86rem; outline: none; transition: all 0.3s var(--ease);
}
.comment-form input:focus { border-color: var(--border-light); box-shadow: 0 0 0 4px var(--tint); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.preset {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text-secondary);
  font-size: 0.74rem; cursor: pointer; transition: all 0.28s var(--ease);
}
.preset:hover { border-color: var(--text-primary); color: var(--text-primary); transform: translateY(-1px); }
.comments-off { padding: 14px 18px; font-size: 0.8rem; color: var(--text-muted); border-top: 1px solid var(--border); }

/* ============================================================
   COMPOSER
   ============================================================ */
.composer-types { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.ctype { padding: 9px 14px; font-size: 0.8rem; background: var(--bg-secondary); }
.composer-media { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.composer-thumb {
  position: relative; width: 74px; height: 74px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border);
  animation: popIn 0.35s var(--ease) both; transition: transform 0.28s var(--ease);
}
.composer-thumb:hover { transform: scale(1.05); }
.composer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.composer-thumb button {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.7); color: #fff; border: none; cursor: pointer; font-size: 0.7rem;
}
.ex-editor-row { display: grid; grid-template-columns: 1fr 60px 70px 80px 32px; gap: 8px; margin-bottom: 8px; align-items: center; animation: riseIn 0.3s var(--ease) both; }
.ex-editor-row input { padding: 10px; font-size: 0.85rem; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 0.85rem; }
.opt-row-label { color: var(--text-secondary); }
.opt-row-label b { display: block; color: var(--text-primary); font-weight: 500; margin-bottom: 2px; }
.seg { display: flex; gap: 4px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.seg button {
  padding: 6px 13px; border: none; border-radius: 999px; background: none;
  color: var(--text-secondary); font-size: 0.76rem; cursor: pointer;
  transition: all 0.3s var(--ease);
}
.seg button.on { background: var(--ink); color: var(--ink-on); font-weight: 600; box-shadow: var(--shadow-sm); }
.switchbox {
  width: 42px; height: 24px; border-radius: 999px; background: var(--border-light);
  border: none; position: relative; cursor: pointer; flex-shrink: 0;
  transition: background 0.32s var(--ease);
}
.switchbox::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform 0.32s var(--ease), width 0.2s var(--ease);
}
.switchbox:active::after { width: 22px; }
.switchbox.on { background: var(--ink); }
.switchbox.on::after { transform: translateX(18px); background: var(--ink-on); }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-cover {
  height: 150px; position: relative;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--border) 50%, var(--bg-secondary) 100%);
  background-size: cover; background-position: center;
}
.profile-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.28));
}
[data-theme="light"] .profile-cover::after { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.10)); }
.cover-edit { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.profile-head { display: flex; align-items: flex-end; gap: 16px; padding: 0 24px; margin-top: -44px; position: relative; z-index: 2; }
.profile-head .av { width: 104px; height: 104px; border: 3px solid var(--bg-card); box-shadow: var(--shadow-md); }
.profile-head .av-ring { border: none; }
.profile-id { flex: 1; padding-bottom: 6px; min-width: 0; }
.profile-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.2px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.profile-handle { font-size: 0.86rem; color: var(--text-secondary); margin-top: 3px; }
.profile-cta { display: flex; gap: 8px; align-self: flex-end; padding-bottom: 6px; flex-wrap: wrap; }
.profile-bio { padding: 18px 24px 0; font-size: 0.92rem; line-height: 1.72; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 24px 18px; font-size: 0.78rem; color: var(--text-muted); }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
.stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 6px; border-right: 1px solid var(--border); transition: background 0.28s var(--ease); }
.stat:last-child { border-right: none; }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; }
.stat-label { font-size: 0.63rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }
button.stat { background: none; border: none; border-right: 1px solid var(--border); color: inherit; cursor: pointer; }
button.stat:hover { background: var(--tint); }

.tabs { display: flex; gap: 2px; overflow-x: auto; margin: 18px 0 16px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; padding: 12px 16px; background: none; border: none;
  color: var(--text-secondary); font-size: 0.86rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: color 0.28s var(--ease);
}
.tab::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.34s var(--ease);
}
.tab:hover { color: var(--text-primary); }
.tab:hover::after { transform: scaleX(0.45); }
.tab.on { color: var(--text-primary); font-weight: 600; }
.tab.on::after { transform: scaleX(1); }
.tab-lock { font-size: 0.7rem; opacity: 0.55; margin-left: 4px; }

.pinned-flag { font-size: 0.64rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); padding: 8px 18px 0; }

.locked-panel {
  text-align: center; padding: 48px 24px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  animation: popIn 0.45s var(--ease) both;
}
.locked-panel .lock-ico { font-size: 2rem; margin-bottom: 12px; }
.locked-panel h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; margin-bottom: 8px; }
.locked-panel p { font-size: 0.86rem; color: var(--text-secondary); max-width: 380px; margin: 0 auto 18px; line-height: 1.65; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.photo-tile {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 3/4; background: var(--bg-secondary);
  animation: popIn 0.4s var(--ease) both;
  transition: transform 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
.photo-tile:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-md); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile-date { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: 0.7rem; background: linear-gradient(transparent, rgba(0,0,0,0.78)); color: #fff; }
.photo-tile-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer; opacity: 0; transition: opacity 0.25s var(--ease); }
.photo-tile:hover .photo-tile-x { opacity: 1; }
.photo-pick { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border-light); color: var(--text-muted); cursor: pointer; font-size: 1.6rem; }
.photo-pick:hover { border-color: var(--text-primary); color: var(--text-primary); }

.recipe-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.recipe-card:hover img { transform: scale(1.04); }
.recipe-body { padding: 14px 16px; }
.recipe-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; }

.goal-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
}
.goal-row:hover { transform: translateX(3px); border-color: var(--border-light); }
.goal-row.done .goal-text { text-decoration: line-through; color: var(--text-muted); }
.goal-text { flex: 1; font-size: 0.9rem; transition: color 0.3s var(--ease); }

/* A goal is a note: a heading and a dash list under it, all Space Grotesk. */
.goal-row { align-items: flex-start; }
.goal-row .checkline { margin-top: 2px !important; }
.goal-text { font-family: 'Space Grotesk', sans-serif; min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.goal-head { font-weight: 600; font-size: 1rem; letter-spacing: -0.005em; }
.goal-line { color: var(--text-secondary); }
.goal-dash { position: relative; padding-left: 22px; color: var(--text-secondary); }
.goal-dash::before { content: '\2014'; position: absolute; left: 0; color: var(--text-muted); }
.goal-dash.d1 { margin-left: 22px; }
.goal-dash.d2 { margin-left: 44px; }
.goal-head + .goal-dash, .goal-line + .goal-dash { margin-top: 4px; }
.goal-gap { height: 10px; }
.goal-tools { display: flex; gap: 2px; flex: 0 0 auto; margin-top: -4px; }
.goal-row.done .goal-dash::before { text-decoration: none; }
#goal-text {
  font-family: 'Space Grotesk', sans-serif; font-size: 1rem; line-height: 1.6;
  min-height: 220px; resize: vertical; tab-size: 2;
}
.goal-hint { font-size: .74rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }

.weight-chart { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding: 16px; background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--border); }
.weight-bar {
  flex: 1; background: var(--grad); border-radius: 3px 3px 0 0; min-height: 4px; position: relative;
  transform-origin: bottom; animation: riseIn 0.6s var(--ease) both;
  transition: filter 0.25s var(--ease);
}
.weight-bar:hover { filter: brightness(1.15); }
.weight-bar span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare figure { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; animation: popIn 0.45s var(--ease) both; }
.compare figure:nth-child(2) { animation-delay: 0.1s; }
.compare img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; }
.compare figcaption { padding: 8px 10px; font-size: 0.74rem; color: var(--text-secondary); text-align: center; }

/* ============================================================
   COMMUNITY
   ============================================================ */
.group-banner { height: 74px; position: relative; overflow: hidden; }
.group-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, var(--sheen) 50%, transparent 70%);
  transform: translateX(-100%); opacity: 0.25;
  transition: transform 0.9s var(--ease);
}
.group-card:hover .group-banner::after { transform: translateX(100%); }
.group-body { padding: 16px 18px; }
.group-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.2px; }
.group-blurb { font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary); margin: 6px 0 12px; }
.group-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.group-members { font-size: 0.75rem; color: var(--text-muted); }

.board-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.board-rank { width: 24px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--text-muted); }
.board-bar-wrap { flex: 1; height: 7px; border-radius: 4px; background: var(--bg-secondary); overflow: hidden; }
.board-bar { display: block; height: 100%; background: var(--grad); transform-origin: left; animation: underline 0.9s var(--ease) both; }
.board-score { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9rem; width: 28px; text-align: right; }

.q-card { padding: 18px; margin-bottom: 14px; }
.q-text { font-size: 0.95rem; line-height: 1.62; margin: 10px 0 14px; }
.answer { padding: 12px 0; border-top: 1px solid var(--border); }
.answer-text { font-size: 0.87rem; line-height: 1.68; margin: 6px 0 8px; }
.helpful {
  display: inline-flex; align-items: center; gap: 5px; background: none;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
  font-size: 0.72rem; color: var(--text-secondary); cursor: pointer;
  transition: all 0.28s var(--ease);
}
.helpful:hover { border-color: var(--border-light); color: var(--text-primary); }
.helpful.on { border-color: var(--ink); background: var(--ink); color: var(--ink-on); }

.challenge-banner {
  border-radius: var(--radius-lg); padding: 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 2px solid var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.34s var(--ease), transform 0.34s var(--ease);
}
.challenge-banner:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.challenge-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; margin: 6px 0 4px; letter-spacing: 0.2px; }

/* ============================================================
   MESSAGES / NOTIFS
   ============================================================ */
.thread-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.25s var(--ease), padding-left 0.28s var(--ease); }
.thread-row:hover { background: var(--tint); padding-left: 22px; }
.thread-last { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-log { display: flex; flex-direction: column; gap: 8px; padding: 18px; max-height: 52vh; overflow-y: auto; }
.dm { max-width: 76%; padding: 10px 14px; border-radius: 16px; font-size: 0.88rem; line-height: 1.5; animation: popIn 0.32s var(--ease) both; }
.dm-them { align-self: flex-start; background: var(--bg-secondary); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.dm-me { align-self: flex-end; background: var(--ink); color: var(--ink-on); border-bottom-right-radius: 5px; }
.dm-form { padding: 14px 18px; border-top: 1px solid var(--border); margin-top: 0; }
.dm-form input { flex: 1; padding: 11px 15px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); outline: none; font-size: 0.88rem; transition: all 0.3s var(--ease); }
.dm-form input:focus { border-color: var(--border-light); box-shadow: 0 0 0 4px var(--tint); }

.notif { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); transition: background 0.25s var(--ease); }
.notif:hover { background: var(--tint); }
.notif.unread { background: var(--tint); box-shadow: inset 2px 0 0 var(--text-primary); }
.notif-text { flex: 1; font-size: 0.87rem; }
.notif-time { font-size: 0.72rem; color: var(--text-muted); }
.req-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.req-row .uline { flex: 1; }

/* ============================================================
   SIDE / MISC
   ============================================================ */
.side-card { padding: 18px; }
.side-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.side-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.side-row .uline { flex: 1; min-width: 0; }
/* Never let the action shrink or be overlapped — it is the point of the row. */
.side-row > .mini-btn { flex: 0 0 auto; align-self: center; }
/* The side card is about 250px wide and has to hold a name, a DEMO tag, a
   streak chip and a button. Wrapping stopped the collision but made every row
   four lines tall. Trimming the chip to its number here — the word
   "Consistent" is already implied by the gold badge beside it — puts the name
   and both tags back on two lines without hiding anything. */
.side-row .badge-chip { font-size: 0.6rem; padding: 1px 6px 1px 3px; }
.side-row .badge-chip .chip-word { display: none; }
.side-row .demo-tag { font-size: 0.58rem; }
.side-row .uline-name { font-size: 0.84rem; }
.mini-btn {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: 0.72rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all 0.28s var(--ease);
}
.mini-btn:hover { border-color: var(--text-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.mini-btn:active { transform: scale(0.95); }
.mini-btn.on { background: var(--ink); border-color: var(--ink); color: var(--ink-on); }

.empty { text-align: center; padding: 54px 24px; background: var(--bg-card); border: 1px dashed var(--border-light); border-radius: var(--radius-lg); }
.empty-title { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.empty-body { font-size: 0.86rem; color: var(--text-secondary); max-width: 380px; margin: 0 auto 16px; line-height: 1.6; }

.qr { display: block; margin: 0 auto 14px; animation: popIn 0.5s var(--ease) both; }

/* ============================================================
   MODAL / TOAST
   ============================================================ */
.modal-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); animation: fadeIn 0.3s var(--ease) both; }
.modal {
  position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); animation: popIn 0.42s var(--ease) both;
}
.modal-wide { max-width: 720px; }
.modal-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); z-index: 1; }
.modal-head h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.2px; }
.modal-body { padding: 20px; }

#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 22px);
  z-index: 200; padding: 13px 22px; border-radius: 999px;
  background: var(--ink); color: var(--ink-on);
  font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: all 0.32s var(--ease);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); animation: toastUp 0.42s var(--ease); }

/* Image placeholder shimmer while photos decode */
img { background-color: var(--bg-secondary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .layout { grid-template-columns: 190px minmax(0, 1fr); }
  .side { display: none; }
}
@media (max-width: 780px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px 14px 96px; }
  .rail { display: none; }
  .topbar { gap: 12px; padding: 10px 14px; }
  .topbar-search { max-width: none; }
  .topbar-brand .topbar-sub { display: none; }
  :root { --bottombar-h: 63px; --topbar-h: 65px; }
  .bottombar {
    display: flex; align-items: center; justify-content: space-around;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    background: var(--bg-glass); backdrop-filter: blur(22px); border-top: 1px solid var(--border);
  }
  .bottombar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 1.05rem; color: var(--text-muted); padding: 4px 12px;
    transition: color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .bottombar a span { font-size: 0.62rem; letter-spacing: 0.5px; }
  .bottombar a.on { color: var(--text-primary); transform: translateY(-2px); }
  .bottom-post {
    width: 46px; height: 46px; border-radius: 50%; border: none;
    background: var(--grad); color: var(--ink-on); font-size: 1.5rem; font-weight: 300;
    cursor: pointer; box-shadow: var(--shadow-md);
    transition: transform 0.28s var(--ease);
  }
  .bottom-post:active { transform: scale(0.92); }
  .auth-shell, .setup-shell { padding: 32px 22px 28px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row .field { margin-bottom: 18px; }
  .profile-head { flex-wrap: wrap; }
  .profile-cta { width: 100%; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .ex-editor-row { grid-template-columns: 1fr 1fr; }
  .orb { filter: blur(80px); }
}

/* ============================================================
   ROOMS — live chat, questions board, moderation
   ============================================================ */
.room-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease);
}
.room-card:hover { transform: translateY(-3px); border-color: var(--border-light); box-shadow: var(--shadow-md); }
.room-card-head { display: flex; align-items: flex-start; gap: 13px; }
.room-ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); font-size: 1.1rem;
}
.room-ico-lg { width: 46px; height: 46px; font-size: 1.3rem; }
.room-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: .2px; }
.room-blurb { font-size: .8rem; line-height: 1.55; color: var(--text-secondary); margin-top: 4px; }
.room-card-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: .74rem; color: var(--text-muted);
}
.room-last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-flag {
  padding: 2px 8px; border-radius: 999px; background: var(--tint);
  border: 1px solid var(--border-light); color: var(--text-primary); font-weight: 600;
}

/* pulsing "here now" dot */
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-secondary); white-space: nowrap; }
.live-dot i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-primary);
  box-shadow: 0 0 0 0 var(--tint-2); animation: pulseDot 2.4s var(--ease) infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 var(--tint-2); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px transparent; opacity: .55; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.room-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; flex-wrap: wrap; }
.room-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: .3px; }
.room-sub { font-size: .78rem; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.room-alert {
  padding: 14px 16px; margin-bottom: 14px; border-radius: var(--radius);
  background: var(--tint); border: 1px solid var(--border-light);
  font-size: .84rem; line-height: 1.6; color: var(--text-secondary);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  animation: riseIn .4s var(--ease) both;
}
.room-alert-hard { border-color: rgba(224,96,96,.4); color: var(--danger); }

.room-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.room-find { position: relative; flex: 1; min-width: 190px; }
.room-find svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); }
.room-find input {
  width: 100%; padding: 9px 14px 9px 36px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary);
  font-size: .85rem; outline: none; transition: all .3s var(--ease);
}
.room-find input:focus { border-color: var(--border-light); box-shadow: 0 0 0 4px var(--tint); }

.pinned-strip { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.pinned-msg {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 2px solid var(--gold); border-radius: var(--radius);
  font-size: .82rem; color: var(--text-secondary);
}
.pinned-msg b { color: var(--text-primary); }
.pin-ico { font-size: .8rem; }

.chat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 8px 4px;
  max-height: 58vh; overflow-y: auto; box-shadow: var(--shadow-sm);
}
.chat-thread { max-height: none; }
.chat-empty { text-align: center; padding: 40px 20px; font-size: .86rem; color: var(--text-muted); }

.msg { display: flex; gap: 11px; padding: 7px 14px; position: relative; animation: riseIn .34s var(--ease) both; }
.msg:hover { background: var(--tint); }
.msg-grouped { padding-top: 1px; }
.msg-av { width: 34px; flex-shrink: 0; }
.msg-body { min-width: 0; flex: 1; }
.msg-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .86rem; font-weight: 600; margin-bottom: 2px; }
.msg-time { font-size: .7rem; color: var(--text-muted); font-weight: 400; }
.msg-text { font-size: .89rem; line-height: 1.6; word-break: break-word; }
.msg-hidden { font-size: .8rem; font-style: italic; color: var(--text-muted); padding: 10px 16px; }
.msg-quote {
  font-size: .78rem; line-height: 1.5; color: var(--text-muted);
  border-left: 2px solid var(--border-light); padding: 3px 0 3px 9px; margin-bottom: 5px;
}
.msg-quote b { color: var(--text-secondary); }
.msg-media { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.msg-media img { max-width: 190px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.msg-reacts { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.react {
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-secondary); font-size: .74rem; cursor: pointer;
  transition: all .25s var(--ease);
}
.react:hover { transform: translateY(-1px); border-color: var(--border-light); }
.react.on { border-color: var(--ink); background: var(--tint-2); }
.msg-promoted { display: inline-block; margin-top: 7px; font-size: .74rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
.thread-link {
  display: block; margin-top: 7px; background: none; border: none; padding: 0;
  font-size: .76rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
  transition: color .25s var(--ease);
}
.thread-link:hover { color: var(--text-primary); }

/* hover-revealed message actions */
.msg-actions {
  position: absolute; top: -12px; right: 12px; display: flex; gap: 2px;
  padding: 3px; border-radius: 999px; background: var(--bg-elevated);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: all .24s var(--ease); z-index: 3;
}
.msg:hover .msg-actions { opacity: 1; transform: none; pointer-events: auto; }
.msg-act {
  padding: 4px 9px; border: none; border-radius: 999px; background: none;
  color: var(--text-secondary); font-size: .73rem; cursor: pointer;
  transition: all .2s var(--ease); white-space: nowrap;
}
.msg-act:hover { background: var(--tint); color: var(--text-primary); }
.msg-act.on { color: var(--text-primary); font-weight: 600; }
.msg-act-warn:hover { color: var(--danger); }

.typing { display: flex; align-items: center; gap: 4px; padding: 8px 16px 0; font-size: .76rem; color: var(--text-muted); }
.typing i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted);
  animation: typeBounce 1.1s var(--ease) infinite;
}
.typing i:nth-child(2) { animation-delay: .15s }
.typing i:nth-child(3) { animation-delay: .3s; margin-right: 5px }
@keyframes typeBounce { 0%,60%,100% { transform: none; opacity: .4 } 30% { transform: translateY(-4px); opacity: 1 } }

.reply-strip {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 9px 13px; border-radius: var(--radius);
  background: var(--tint); border: 1px solid var(--border);
  font-size: .8rem; color: var(--text-secondary);
  animation: riseIn .3s var(--ease) both;
}

.chat-form { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.chat-form input {
  flex: 1; padding: 12px 16px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary);
  font-size: .9rem; outline: none; transition: all .3s var(--ease);
}
.chat-form input:focus { border-color: var(--border-light); box-shadow: 0 0 0 4px var(--tint); }
.chat-form input:disabled { opacity: .55; }
.chat-note { margin-top: 10px; font-size: .72rem; color: var(--text-muted); line-height: 1.6; }

.thread-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: .8rem; color: var(--text-muted); }
.thread-line { margin-left: 22px; padding-left: 14px; border-left: 2px solid var(--border); margin-top: 6px; }

/* questions board */
.q-draft {
  width: 100%; padding: 13px 15px; background: var(--bg-primary);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); font-size: .9rem; outline: none; resize: vertical;
  transition: all .3s var(--ease);
}
.q-draft:focus { border-color: var(--border-light); box-shadow: 0 0 0 4px var(--tint); }
.q-state { font-size: .68rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.q-answered { background: var(--tint); color: var(--text-secondary); border: 1px solid var(--border); }
.q-open { background: var(--ink); color: var(--ink-on); }
.q-flash { animation: flashCard 1.4s var(--ease); }
@keyframes flashCard { 0% { box-shadow: 0 0 0 3px var(--tint-2) } 100% { box-shadow: var(--shadow-sm) } }
.answer-best { background: var(--tint); border-radius: var(--radius); padding: 12px 14px; margin-top: 10px; border-top: none; }
.best-flag { font-size: .64rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.dupe { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--tint); border: 1px dashed var(--border-light); font-size: .8rem; color: var(--text-secondary); animation: riseIn .3s var(--ease) both; }
.dupe-link { display: block; width: 100%; text-align: left; margin-top: 7px; padding: 0; background: none; border: none; color: var(--text-primary); font-size: .8rem; cursor: pointer; border-bottom: 1px solid var(--border-light); padding-bottom: 4px; }
.dupe-link:hover { border-color: var(--text-primary); }

.helper-badge {
  font-size: .64rem; font-weight: 700; letter-spacing: .4px; padding: 2px 8px;
  border-radius: 999px; background: var(--ink); color: var(--ink-on); white-space: nowrap;
}

.digest-item { padding: 14px 0; border-top: 1px solid var(--border); }
.digest-item:first-child { border-top: none; padding-top: 0; }
.digest-q { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .92rem; }
.digest-a { font-size: .87rem; line-height: 1.7; color: var(--text-secondary); }

.modrow { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.modkind { font-size: .62rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: var(--tint); color: var(--text-secondary); white-space: nowrap; }
.modkind-blocked, .modkind-zero-tolerance, .modkind-reported-hidden { background: rgba(224,96,96,.14); color: var(--danger); }

@media (max-width: 780px) {
  .chat { max-height: 52vh; }
  .msg-actions { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: 8px; box-shadow: none; background: none; border: none; padding: 0; flex-wrap: wrap; }
  .room-tools { gap: 8px; }
}

/* Banner shown while viewing the app as a brand-new member */
#preview-banner {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: min(680px, calc(100vw - 32px));
  padding: 14px 18px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  font-size: .82rem; line-height: 1.45; color: var(--text-secondary);
  animation: riseIn .5s var(--ease) both;
}
#preview-banner b { color: var(--text-primary); }
#preview-banner button {
  padding: 7px 14px; border-radius: 999px; border: none;
  background: var(--ink); color: var(--ink-on);
  font-family: 'Space Grotesk', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
@media (max-width: 780px) { #preview-banner { bottom: 82px; } }

/* ---------- Strava ---------- */
.strava-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; margin-bottom: 10px;
  border: 1px solid rgba(252, 76, 2, .45); border-radius: var(--radius);
  background: rgba(252, 76, 2, .10); color: #fc4c02;
  font-family: 'Space Grotesk', sans-serif; font-size: .84rem; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
  transition: all .28s var(--ease);
}
.strava-btn svg { width: 17px; height: 17px; }
.strava-btn:hover { background: rgba(252, 76, 2, .18); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.strava-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(252, 76, 2, .12); border: 1px solid rgba(252, 76, 2, .35);
  color: #fc4c02; font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.strava-tag svg { width: 12px; height: 12px; }
.or-line { display: flex; align-items: center; gap: 14px; margin: 20px 0 16px; color: var(--text-muted); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ============================================================
   ADDITIONS FOR THE SERVER-RENDERED APP
   The prototype rendered everything client-side; these cover the
   pieces that only exist once there is a real server.
   ============================================================ */
.flashes { position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(520px, 92vw); }
.flash { padding: 12px 16px; border-radius: var(--radius); font-size: 0.86rem;
  background: var(--bg-elevated); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); animation: riseIn .4s var(--ease) both; }
.flash-error { border-color: rgba(224,96,96,0.45); color: var(--danger); }
.flash-ok { border-color: var(--border-light); }

.provider-row { display: grid; gap: 10px; margin: 6px 0 18px; }
.provider-btn { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid var(--border-light); background: var(--bg-card);
  color: var(--text-primary); font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s var(--ease); }
.provider-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--text-muted); }
.provider-btn:disabled { opacity: .42; cursor: not-allowed; }
.provider-btn svg { width: 18px; height: 18px; }
.provider-note { font-size: 0.7rem; color: var(--text-muted); margin-top: -10px;
  margin-bottom: 16px; line-height: 1.5; }

.stub-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1px dashed var(--border-light); border-radius: var(--radius);
  font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; margin: 12px 0; }

.pagination { display: flex; gap: 10px; justify-content: center; padding: 24px 0; }
.error-page { max-width: 460px; margin: 14vh auto; text-align: center; padding: 0 24px; }
.error-code { font-family: 'Space Grotesk', sans-serif; font-size: 4rem; font-weight: 700;
  color: var(--text-muted); letter-spacing: -2px; }
.error-page h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem;
  margin: 6px 0 10px; }
.error-page p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.7;
  margin-bottom: 22px; }

.landing { max-width: 760px; margin: 0 auto; padding: 12vh 24px 60px; text-align: center; }
.landing h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 4.2rem); letter-spacing: 0.14em; line-height: 1.05; }
.landing .sub { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.32em;
  font-size: 0.72rem; color: var(--text-muted); margin-top: 10px; }
.landing .lede { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.75;
  margin: 28px auto 34px; max-width: 520px; }
.landing-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-points { display: grid; gap: 18px; margin-top: 64px; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.landing-point { padding: 20px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--bg-card); }
.landing-point b { display: block; font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 8px; font-size: 0.92rem; }
.landing-point span { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.65; }

/* ================================================================ meet people
   Proximity discovery. The seg control and chips are reused from above; only
   the pieces unique to this page live here. */
.nearby-intro p { font-size: 0.88rem; line-height: 1.7; color: var(--text-secondary); }
.nearby-points { list-style: none; margin: 14px 0 18px; padding: 0; }
.nearby-points li {
  position: relative; padding: 7px 0 7px 20px; font-size: 0.84rem;
  color: var(--text-secondary); line-height: 1.6;
}
.nearby-points li::before {
  content: ''; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--border-light);
}

.nearby-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.nearby-where { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.nearby-city { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.95rem; }
.nearby-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.nearby-radius { flex-shrink: 0; }
.nearby-radius a {
  padding: 6px 13px; border-radius: 999px; color: var(--text-secondary);
  font-size: 0.76rem; transition: all 0.3s var(--ease);
}
.nearby-radius a.on { background: var(--ink); color: var(--ink-on); font-weight: 600; }

.chip-sm { padding: 4px 10px; font-size: 0.7rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-secondary); }
.chip-shared {
  border-color: var(--border-light); background: var(--tint-2);
  color: var(--text-primary); font-weight: 600;
}

.nearby-note { margin-bottom: 14px; font-size: 0.84rem; line-height: 1.65;
  color: var(--text-secondary); border-left: 2px solid var(--border-light); }
.nearby-count { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 12px; }
.nearby-card { margin-bottom: 12px; }
.nearby-bio {
  margin-top: 10px; font-size: 0.84rem; line-height: 1.6;
  color: var(--text-secondary); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.nearby-interests { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.nearby-reason { margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); }

.nearby-safety { margin-top: 22px; }
.nearby-safety p { font-size: 0.84rem; line-height: 1.7; color: var(--text-secondary); }
.nearby-safety .mini-btn { margin-top: 14px; }

/* -- the join modal -- */
.nb-city-list { margin-top: 8px; display: flex; flex-direction: column; gap: 2px;
  max-height: 220px; overflow-y: auto; }
.nb-city {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.84rem;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}
.nb-city:hover { background: var(--bg-card-hover); border-color: var(--border-light); }
.nb-city small { color: var(--text-muted); font-size: 0.7rem; flex-shrink: 0; }
.nb-hint { padding: 10px 2px; font-size: 0.78rem; color: var(--text-muted); }
.nb-preview {
  margin: 4px 0 16px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--bg-secondary); border: 1px solid var(--border);
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; min-height: 1px;
}
.nb-preview:empty { display: none; }

/* The Meet People row carries more sub-text than a follow suggestion, so the
   name block is allowed to wrap while the action stays put. */
.nearby-card .side-row { align-items: flex-start; gap: 12px; }
.nearby-card .side-row > .mini-btn { flex: none; margin-top: 2px; }
.nearby-card .uline { min-width: 0; flex: 1; }
.nearby-card .uline-sub { line-height: 1.45; }

/* Demo accounts. Deliberately plain and slightly dull — it should read as a
   label, not a decoration, and never be mistaken for a badge someone earned. */
.demo-tag {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 99px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--tint);
  border: 1px dashed var(--border-light);
  cursor: help;
}
.demo-notice {
  margin: 0 22px 14px; padding: 11px 14px;
  border: 1px dashed var(--border-light); border-radius: var(--radius);
  font-size: 0.8rem; line-height: 1.6; color: var(--text-secondary);
  background: var(--tint);
}
.demo-notice b { color: var(--text-primary); display: block; margin-bottom: 2px; }

.nearby-side-n { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem;
  font-weight: 700; color: var(--text-primary); }

/* Workout cards carry the things that make a programme usable rather than
   decorative: what it is for, how long it takes, and how long to rest. */
.workout-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 0 0 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.72rem; color: var(--text-muted);
  text-transform: lowercase; letter-spacing: 0.3px;
}
.workout-meta span { position: relative; }
.workout-meta span:not(:last-child)::after {
  content: '·'; position: absolute; right: -9px; color: var(--border-light);
}
.workout-note {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--hairline);
  font-size: 0.79rem; line-height: 1.65; color: var(--text-secondary);
}

/* Closed-beta notice on the landing page. Deliberately quiet — it is an
   explanation, not a call to action, because there is nothing to act on. */
.landing-invite {
  max-width: 460px; margin: 0 auto 26px; padding: 18px 22px;
  border: 1px dashed var(--border-light); border-radius: var(--radius-lg);
  background: var(--tint); text-align: left;
}
.landing-invite-tag {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.landing-invite p {
  margin: 0; font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary);
}
.landing-invite strong { color: var(--text-primary); }
.landing-foot {
  margin-top: 18px; font-size: 0.78rem; color: var(--text-muted);
}

/* ---------- video in the feed ----------
   A video occupies the same carousel slot as a photo, so it gets the same box.
   object-fit: cover would crop a portrait phone clip to nothing, hence
   contain, on the graphite ground the rest of the app already uses. */
.carousel-track video {
  width: 100%;
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* cover, with the box already at the clip's own shape: the two together
     mean the media fills the card edge to edge with no grey showing. */
  object-fit: cover;
  background: #000;
  display: block;
  border-radius: inherit;
}
.carousel { position: relative; }
.video-length {
  position: absolute;
  bottom: 10px; right: 10px;
  padding: 2px 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(0, 0, 0, .62);
  border-radius: 4px;
  pointer-events: none;   /* never steal a tap from the player controls */
}
.composer-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.composer-thumb.is-video::after {
  content: '▶';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 18px; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  pointer-events: none;
}

/* ---------- Reps: the short-video feed ----------
   One clip fills the column and scroll-snap stops on each, so a swipe moves
   exactly one video rather than landing between two. */
.motions-filter {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px;
  scrollbar-width: none;
}
.motions-filter::-webkit-scrollbar { display: none; }
.motions-filter .chip { flex: 0 0 auto; text-decoration: none; }

.motions-scroller {
  /* Stop above the phone nav rather than running underneath it. */
  height: calc(100vh - 210px - var(--bottombar-h));
  min-height: 420px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border-radius: var(--radius, 14px);
  background: #000;
  scrollbar-width: none;
}
.motions-scroller::-webkit-scrollbar { display: none; }

.motion {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;   /* never skip past a clip on a fast swipe */
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
}
.motion-video {
  /* Pinned to the slide's edges. As an ordinary grid child the clip took its
     own height (698px in a 531px slide on an iPhone 15) and spilled past the
     bottom, so the picture sat off-centre and the overlay was laid over the
     wrong part of it. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;        /* cover would crop a portrait clip to nothing */
  display: block;
}
.motion-tap { position: absolute; inset: 0; cursor: pointer; }

.motion-overlay {
  position: absolute; left: 0; right: 64px; bottom: 0;
  z-index: 1;   /* above the video's own layer, which iOS composites apart */
  padding: 18px 16px 20px;
  /* The gradient is what keeps white text legible over an unknown video. */
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  pointer-events: none;
}
.motion-overlay a { pointer-events: auto; }

.motion-who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.motion-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto;
  display: grid; place-items: center;
  background: #222; color: #fff; font-weight: 700; font-size: .95rem;
  border: 1.5px solid rgba(255,255,255,.55);
  text-decoration: none;
}
.motion-avatar img { width: 100%; height: 100%; object-fit: cover; }
.motion-names { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.motion-names a { color: #fff; font-weight: 600; font-size: .92rem; text-decoration: none; }
.motion-names span { color: rgba(255,255,255,.66); font-size: .78rem; }
.motion-cat {
  margin-left: auto; flex: 0 0 auto;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 3px 9px;
}
.motion-body {
  color: #fff; font-size: .92rem; line-height: 1.45;
  margin: 0; max-width: 46ch;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.motion-actions {
  position: absolute; right: 10px; bottom: 22px;
  display: flex; flex-direction: column; gap: 16px;
  z-index: 2;
}
.motion-act {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fff; text-decoration: none;
  min-width: 44px; min-height: 44px;   /* a real tap target */
  justify-content: center;
}
.motion-act svg {
  /* The drop-shadow is what keeps a white outline readable over a bright
     frame — without it the icons vanish against pale video. */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .75));
}
.motion-act-n {
  font-size: .72rem; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
/* Liked and saved both fill in, which reads instantly; the heart goes red
   because that is what a heart does everywhere else. */
.motion-act.on .motion-heart-path { fill: #ff3b5c; stroke: #ff3b5c; }
.motion-act.on .motion-save-path  { fill: #fff; }
.motion-act:active svg { transform: scale(.88); }
.motion-act svg { transition: transform .18s var(--ease); }

/* The double-tap heart. Feedback only — the button records the like. */
.motion-burst {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none; opacity: 0;
}
.motion-burst svg { filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .55)); }
.motion-burst.go { animation: motion-burst .85s var(--ease); }
@keyframes motion-burst {
  0%   { opacity: 0; transform: scale(.4); }
  18%  { opacity: .95; transform: scale(1.12); }
  38%  { transform: scale(.97); }
  70%  { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* Says what a tap just did, because muting is otherwise invisible. */
.motion-flash {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 60;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(0, 0, 0, .78); color: #fff;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  animation: motion-flash .9s var(--ease);
  pointer-events: none;
}
@keyframes motion-flash {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  15%, 70% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-burst.go, .motion-flash { animation-duration: .01ms; }
  .motion-act svg { transition: none; }
}

.motions-empty { text-align: center; padding: 56px 24px; }
.motions-empty-ico {
  font-size: 2rem; color: var(--text-muted);
  width: 68px; height: 68px; margin: 0 auto 18px;
  display: grid; place-items: center;
  border: 1.5px solid var(--border); border-radius: 50%;
}
.motions-empty h2 { margin: 0 0 8px; }
.motions-empty p {
  color: var(--text-secondary); max-width: 34ch;
  margin: 0 auto 22px; line-height: 1.5;
}

@media (max-width: 820px) {
  /* Motions is a full-screen player on a phone, the way every app that does
     short video is. It used to sit in the page like an ordinary card: 605px
     of a possible 716, inset 14px each side, with the category chips taking
     another 51 off the top. A 9:16 clip came out small and letterboxed with
     its caption stranded in the middle of the screen.

     So the player breaks out of the column and fills everything between the
     two bars. dvh so the height settles when Safari's own chrome collapses. */
  .motions {
    position: fixed;
    top: var(--topbar-h); left: 0; right: 0;
    bottom: var(--bottombar-h);
    z-index: 5;
    background: #000;
  }
  .motions-scroller {
    height: 100%;
    min-height: 0;
    border-radius: 0;
  }
  /* The chips float over the clip instead of pushing it down. The gradient
     is what keeps them readable over a bright frame. */
  .motions-filter {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    margin: 0; padding: 10px 14px 26px;
    background: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
    pointer-events: auto;
  }
  /* Fill the screen. A portrait clip is the same shape as the phone, so this
     crops a few pixels rather than leaving bars down both sides. Landscape
     clips keep `contain`, because cover would throw most of one away. */
  .motion-video { object-fit: cover; }
  .motion.is-wide .motion-video { object-fit: contain; }

  .motions-empty { padding: 40px 20px; }
}

/* A photo being shrunk in the background. The thumbnail is already visible —
   this only says the file is not quite ready to send yet. */
.composer-thumb.is-working { position: relative; }
.composer-thumb.is-working::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .35);
  animation: thumb-pulse 1.1s ease-in-out infinite;
}
@keyframes thumb-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  .composer-thumb.is-working::after { animation: none; opacity: .3; }
}

/* Development sign-in bypass. Intentionally impossible to miss: the risk is
   never that someone turns it on, it is that nobody notices it stayed on. */
.dev-banner {
  position: sticky; top: 0; z-index: 9999;
  padding: 7px 14px;
  background: repeating-linear-gradient(45deg,
    #b3541e, #b3541e 12px, #8f4318 12px, #8f4318 24px);
  color: #fff;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-align: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.dev-banner b { font-weight: 800; }

/* ---------- Saved, in folders ----------
   A count above a name: the number is what you scan for when looking for the
   folder with your recipes in it. */
.saved-folders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.saved-folder {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 13px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 12px);
  background: var(--bg-card);
  text-decoration: none; color: var(--text-primary);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.saved-folder:hover { border-color: var(--text-primary); transform: translateY(-1px); }
.saved-folder.active { border-color: var(--text-primary); background: var(--bg-secondary); }
.saved-folder-n {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.saved-folder-name {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   POSTING — the chooser sheet, then a screen for one thing
   ============================================================ */

/* A bottom sheet, not a centred dialog: on a phone it arrives from where the
   thumb already is, and it is the shape people expect for "what next". */
.sheet-wrap { align-items: flex-end; }
.sheet {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px; margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 48px rgba(0, 0, 0, .45);
  transform: translateY(100%);
  transition: transform .34s var(--ease);
}
.sheet-wrap.in .sheet { transform: translateY(0); }
@media (min-width: 640px) {
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 20px; margin-bottom: 0; }
}

.sheet-grip {
  width: 38px; height: 4px; border-radius: 999px;
  background: var(--border); margin: 2px auto 14px;
}

/* Comments on a Motion. The list scrolls; the box to type in stays put. */
.sheet-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem;
  text-align: center; margin: 0 0 12px;
}
.comment-sheet-list { max-height: 52vh; overflow-y: auto; padding-bottom: 4px; }
.comment-sheet-list .field-hint { text-align: center; padding: 18px 0; }

.sheet-primary { display: flex; flex-direction: column; gap: 6px; }
.sheet-choice {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 14px;
  background: none; border: 1px solid transparent; border-radius: 14px;
  color: var(--text-primary); text-align: left; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.sheet-choice:hover:not(:disabled),
.sheet-choice:focus-visible { background: var(--bg-secondary); border-color: var(--border); }
.sheet-choice:active:not(:disabled) { transform: scale(.99); }
.sheet-choice.is-soon { opacity: .45; cursor: default; }

.sheet-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sheet-text b { font-size: .98rem; font-weight: 650; }
.sheet-text i { font-style: normal; font-size: .78rem; color: var(--text-muted); }
.sheet-go { margin-left: auto; color: var(--text-muted); font-size: 1.3rem; line-height: 1; }
.sheet-soon {
  margin-left: auto; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 9px;
}

.sheet-rule { height: 1px; background: var(--border); margin: 12px 4px; }
.sheet-secondary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sheet-small {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 6px; border: 1px solid var(--border); border-radius: 12px;
  background: none; color: var(--text-secondary);
  font-size: .72rem; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.sheet-small:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* ---- the composer itself ---- */
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pick-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 22px 10px;
  border: 1px dashed var(--border); border-radius: 14px;
  background: none; color: var(--text-secondary);
  font-size: .82rem; font-weight: 550; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.pick-btn:hover {
  border-color: var(--text-primary); color: var(--text-primary);
  background: var(--bg-secondary); border-style: solid;
}
.pick-btn:active { transform: scale(.98); }

.composer-thumb { position: relative; }
.thumb-x {
  position: absolute; top: 5px; right: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .68); color: #fff;
  font-size: .7rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.thumb-x:hover { background: rgba(0, 0, 0, .85); }

/* Category and audience have sensible defaults and are rarely changed, so
   they fold away rather than sitting between you and the Share button. */
.composer-more { margin: 4px 0 18px; }
.composer-more summary {
  cursor: pointer; list-style: none;
  font-size: .8rem; color: var(--text-muted);
  padding: 9px 0; user-select: none;
}
.composer-more summary::-webkit-details-marker { display: none; }
.composer-more summary::after { content: ' ▾'; }
.composer-more[open] summary::after { content: ' ▴'; }
.composer-more-body { padding-top: 4px; }
.composer-more .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.vis-row { display: flex; gap: 8px; }

.btn-block { width: 100%; }

/* ---------- keyboard focus ----------
   The browser's default focus ring is a bright blue that belongs to no part
   of this design, and it showed up on the first item of the post sheet. A
   focus state still has to be clearly visible — losing it makes the app
   unusable by keyboard — so this replaces it rather than removing it.
   :focus-visible means it appears for keyboard users and not on tap. */
:where(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
  border-radius: 8px;
}
.sheet-choice:focus-visible { outline-offset: -2px; }

/* The verification code field. Wide tracking and a big size because the one
   thing it has to do is let someone check six digits against an email. */
.code-input {
  width: 100%;
  padding: 18px 12px;
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-size: 2rem; font-weight: 700;
  letter-spacing: .34em; text-indent: .34em;   /* indent balances the tracking */
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 14px;
  color: var(--text-primary);
}
.code-input:focus {
  outline: none; border-color: var(--text-primary);
  background: var(--bg-card);
}
.code-input::placeholder { color: var(--text-muted); opacity: .35; }


/* Autoplay is only allowed while muted, so every clip starts silent and a tap
   turns the sound on. Nobody can guess that, so it says so: a speaker that
   shows the current state and is a tap target in its own right. */
.motion-sound {
  position: absolute; top: 12px; right: 10px; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .46);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; cursor: pointer; padding: 0;
  backdrop-filter: blur(6px);
}
.motion-sound svg { width: 19px; height: 19px; display: block; }
.motion-sound .snd-off { display: block; }
.motion-sound .snd-on  { display: none; }
.motion-sound.is-on .snd-off { display: none; }
.motion-sound.is-on .snd-on  { display: block; }

@media (max-width: 820px) {
  /* clear of the floating category chips */
  .motion-sound { top: 58px; }
}

/* Only ever holds an error, and only if the toast is not available. */
.onboard-note:empty { display: none; }
.onboard-note {
  margin: 0 0 12px;
  font-size: .88rem;
  color: #ff8d8d;
  text-align: center;
}


/* ---------------------------------------------------------------------------
   Thumbs, not cursors.

   Measured on a 390x844 phone: Follow, Join, Message, Edit profile and the
   rest of the pill buttons came out 28px tall, and the labels under the
   profile numbers were 10px. Fine under a mouse, mean under a thumb — and
   these are the buttons a new member meets first.

   Only on touch, so the desktop layout keeps its compact pills.
--------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .mini-btn {
    min-height: 38px;
    padding: 9px 15px;
    font-size: 0.76rem;
  }
  /* 10px uppercase under a big number is readable but tight; 11px is the
     floor everywhere else in the app. */
  .stat-label { font-size: 0.7rem; letter-spacing: 1.1px; }

  /* The profile tabs scroll sideways, but nothing said so. A soft fade at
     the edge is the usual way to show there is more past the edge. */
  .tabs {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
            mask-image: linear-gradient(to right, #000 88%, transparent);
  }
}

/* "Passwords do not match" has to read as a problem, not as a hint. */
.field-hint.is-bad { color: #ff8d8d; }

/* ---- who follows whom ---------------------------------------------------
   The follower and following counts are links now. They keep the look of
   the other tiles; only the pointer and a hover lift say they do something.
-------------------------------------------------------------------------- */
a.stat { text-decoration: none; color: inherit; cursor: pointer; }
a.stat:hover { background: var(--bg-secondary); }
a.stat:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }

.people-page { max-width: 620px; }
.back-link {
  display: inline-block; margin-bottom: 14px;
  color: var(--text-secondary); text-decoration: none; font-size: .92rem;
}
.back-link:hover { color: var(--text-primary); }
.people-list { display: flex; flex-direction: column; }
.people-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--border);
}
.people-row:last-child { border-bottom: none; }
.tab-n { opacity: .6; font-variant-numeric: tabular-nums; }

/* ============================================================
   PROFILE, INSTAGRAM-STYLE  (LIC-117)
   Photo and numbers side by side, name and bio under them, two
   wide buttons and a small one, icon tabs, then a three-across
   grid of tiles. Liam's brief: "the exact same", easy to use.
   ============================================================ */
.ig-profile { padding: 4px 4px 0; }
.ig-top { display: flex; align-items: center; gap: 28px; }
.ig-avatar { position: relative; flex: none; background: none; border: none; padding: 0; cursor: pointer; color: inherit; }
div.ig-avatar { cursor: default; }
.ig-avatar-plus {
  position: absolute; right: 0; bottom: 2px; z-index: 3; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem; font-weight: 600; line-height: 1;
  background: var(--ink); color: var(--ink-on); border: 3px solid var(--bg-primary);
}
.ig-stats { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; min-width: 0; }
.ig-stat { display: flex; flex-direction: column; align-items: center; text-align: center; color: inherit; text-decoration: none; border-radius: var(--radius-sm); padding: 6px 2px; }
a.ig-stat:hover { background: var(--tint); }
.ig-stat b { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700; }
.ig-stat span { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }

.ig-id { margin-top: 14px; }
.ig-name { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ig-handle { font-size: 0.85rem; color: var(--text-secondary); margin-top: 2px; }
.ig-handle b { color: var(--text-primary); }
.ig-bio { margin-top: 8px; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; }
.ig-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: 0.8rem; color: var(--text-muted); }

.ig-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 16px; }
.ig-btn {
  display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm); border: none; cursor: pointer; text-decoration: none;
  background: var(--tint-2); color: var(--text-primary);
  font: 600 0.88rem/1 'Inter', sans-serif;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.ig-btn:hover { background: var(--border-light); }
.ig-btn:active { transform: scale(0.97); }
.ig-btn-sq { width: 40px; padding: 0; font-size: 1.1rem; }
/* Follow is the one coloured button: solid until you follow, then it
   settles back to grey like the others. */
.ig-follow:not(.on):not(.is-requested) { background: var(--ink); color: var(--ink-on); }

.ig-banner, .ig-profile + .demo-notice { margin-top: 16px; }
.ig-banner.is-warn { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.35); }

.ig-tabs { display: flex; margin-top: 20px; border-bottom: 1px solid var(--border); }
.ig-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; color: var(--text-muted); position: relative; text-decoration: none;
  transition: color 0.2s var(--ease);
}
.ig-tab svg { width: 23px; height: 23px; }
.ig-tab-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.4px; }
.ig-tab:hover { color: var(--text-secondary); }
.ig-tab.on { color: var(--text-primary); }
.ig-tab.on::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text-primary); }

.ig-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
/* "Your recipes" / "Saved to try" on your own Recipes tab. */
.ig-subhead { margin: 22px 0 10px; }
.ig-subhead + .ig-grid { margin-top: 0; }
.ig-block { margin-top: 14px; }

/* The grid. Portrait tiles, the shape Instagram moved to, with a hairline
   gap between them. */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 3px; }
.ig-tools + .ig-grid, .ig-block + .ig-grid, .ig-banner + .ig-grid { margin-top: 14px; }
.tile {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--bg-card); color: var(--text-primary); text-decoration: none;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease), opacity 0.2s; }
.tile:hover img { transform: scale(1.03); }
.tile:active { opacity: 0.8; }
.tile-flag { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.tile-pin, .tile-repost { position: absolute; top: 7px; left: 8px; font-size: 0.8rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tile-repost + .tile-pin { left: 26px; }
/* Tiles with no picture: a PR, a workout, a meal, or words. */
.tile-text {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 12px; background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card)); border: 1px solid var(--hairline);
}
.tile-clip { background: #000; }
.tile-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.tile-big { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; line-height: 1.1; }
.tile-big small { font-size: 0.8rem; color: var(--text-secondary); }
.tile-name { font-size: 0.92rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-sub { font-size: 0.8rem; color: var(--text-secondary); }
.tile-body { font-size: 0.85rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

.ig-tabs + .empty, .ig-tabs + .locked-panel, .ig-banner + .empty, .ig-tools + .empty, .ig-block + .empty { margin-top: 18px; }

/* The ⋯ sheet: a plain list of choices. */
.sheet-list { display: flex; flex-direction: column; }
.sheet-list > a, .sheet-list > button, .sheet-list form button {
  display: block; width: 100%; text-align: left; padding: 14px 4px; border: none; background: none;
  border-bottom: 1px solid var(--border); color: var(--text-primary); text-decoration: none;
  font: 500 0.95rem/1.3 'Inter', sans-serif; cursor: pointer;
}
.sheet-list > :last-child, .sheet-list form:last-child button { border-bottom: none; }
.sheet-list small { display: block; font-size: 0.8rem; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.sheet-list .is-bad { color: var(--danger); }

/* A post on its own page. */
.post-page-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; }

/* The search page's own box — the only one on a phone. */
.page-search { position: relative; margin-bottom: 18px; }
.page-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-muted); }
.page-search input {
  width: 100%; height: 44px; padding: 0 14px 0 42px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font: 400 1rem 'Inter', sans-serif;
}
.page-search input:focus { outline: none; border-color: var(--border-light); box-shadow: 0 0 0 4px var(--tint); }

/* ---- phones ---------------------------------------------------------- */
.only-phone { display: none !important; }
@media (max-width: 780px) {
  .only-phone { display: inline-flex !important; }
  .only-desktop { display: none !important; }
  .only-desktop-flex { display: none !important; }
  /* The feed's filters move behind the button in the top bar. */
  .feed-filters { display: none; }
  /* Search and You live in the bottom bar now. */
  .topbar-search, .topbar-me { display: none; }
  .topbar-brand { margin-right: auto; }

  .bottombar a { padding: 4px 10px; min-width: 56px; }
  .bottombar a svg { width: 25px; height: 25px; }
  .bottombar a span { font-size: 0.7rem; }
  .bottom-post { display: grid; place-items: center; }
  .bottom-post svg { width: 22px; height: 22px; }
  .bottombar-me .av { border: 2px solid transparent; }
  .bottombar-me.on .av { border-color: var(--text-primary); }

  .ig-top { gap: 14px; }
  .ig-avatar .av { width: 84px !important; height: 84px !important; }
  .ig-stat b { font-size: 1.05rem; }
  .ig-stat span { font-size: 0.72rem; }
  .ig-tab-label { display: none; }
  /* Edge to edge, like the app it copies: cancel the page's side padding. */
  .ig-grid { margin-left: -14px; margin-right: -14px; gap: 2px; }
}

/* ============================================================
   STORIES  (LIC-110)
   The bar of rings on the feed, the ring on a profile photo, the
   full-screen viewer, the layers drawn over a story, and the editor.
   Stories are always dark, like the camera they imitate.
   ============================================================ */
:root { --story-ring: conic-gradient(from 200deg, #e8b64a, #ff3b5c, #a259ff, #e8b64a); }

/* ---- the bar ---- */
.story-bar { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 14px; margin-bottom: 8px; scrollbar-width: none; }
.story-bar::-webkit-scrollbar { display: none; }
.story-chip { position: relative; flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.story-ring { position: relative; width: 74px; height: 74px; border-radius: 50%; border: none; padding: 0; cursor: pointer; display: grid; place-items: center; background: var(--border); }
.story-ring.is-live { background: var(--story-ring); }
.story-ring.is-seen { background: var(--border-light); }
.story-ring.is-empty { background: transparent; }
.story-ring .av { border: 3px solid var(--bg-primary); box-sizing: content-box; }
.story-ring.is-live .av-ring::before, .story-ring.is-seen .av-ring::before, .ig-avatar.has-story .av-ring::before { display: none; }
.story-add { position: absolute; top: 50px; right: 2px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--bg-primary); background: var(--ink); color: var(--ink-on); font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; font-size: 0.95rem; }
.story-name { font-size: 0.72rem; color: var(--text-secondary); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the ring on a profile photo ---- */
.ig-avatar-wrap { position: relative; flex: none; }
.ig-avatar.has-story { padding: 4px; border-radius: 50%; background: var(--story-ring); }
.ig-avatar.has-story .av { border: 3px solid var(--bg-primary); }
.ig-avatar-wrap .ig-avatar-plus { border: 3px solid var(--bg-primary); cursor: pointer; padding: 0; }

/* ---- layers, shared by viewer and editor ---- */
.sl { position: absolute; transform-origin: center; white-space: pre-wrap; max-width: 92%; user-select: none; -webkit-user-select: none; touch-action: none; line-height: 1.15; }
.sl-drawing { position: absolute; inset: 0; pointer-events: none; }
.sl-draw { width: 100%; height: 100%; display: block; }
.sl-draw path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sl-draw path.pen-marker { opacity: .55; }
.sl-draw path.pen-neon { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor); stroke: #fff !important; }

.sl-text { font-size: 1em; text-align: center; color: var(--c); }
.sl-text span { padding: .12em .3em; border-radius: .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sl-text.align-left { text-align: left; } .sl-text.align-right { text-align: right; }
.sl-text.bg-solid span { background: var(--c); color: var(--on); }
.sl-text.bg-soft span { background: rgba(0,0,0,.5); }
.sl-text.bg-none span { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.font-classic { font-family: 'Inter', sans-serif; font-weight: 700; }
.font-modern { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.font-strong { font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.font-typewriter { font-family: 'Courier New', Courier, monospace; font-weight: 700; }
.font-neon { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.sl-text.font-neon span { color: #fff; text-shadow: 0 0 .15em var(--c), 0 0 .4em var(--c), 0 0 .9em var(--c); }
.sl-emoji { font-size: 2.6em; line-height: 1; }

.sl-sticker { font: 800 .72em/1 'Inter', sans-serif; padding: .45em .7em; border-radius: .45em; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.25); white-space: nowrap; }
.st-light { background: #fff; color: #111; }
.st-dark { background: rgba(0,0,0,.72); color: #fff; }
.st-color { background: linear-gradient(135deg, #ff3b5c, #a259ff); color: #fff; }
.sl-time { font-family: 'Space Grotesk', sans-serif; font-size: 1.1em; letter-spacing: .02em; }

.sl-poll { width: 9.5em; background: #fff; color: #111; border-radius: .6em; padding: .55em; font: 700 .62em/1.25 'Inter', sans-serif; box-shadow: 0 4px 18px rgba(0,0,0,.3); white-space: normal; }
.sl-poll-q { text-align: center; padding: .25em .2em .5em; font-size: 1.1em; }
.sl-poll-opts { display: flex; flex-direction: column; gap: .35em; }
.sl-poll-opt { border: 1px solid #ddd; background: #f4f4f6; color: #111; border-radius: .45em; padding: .55em; font: inherit; cursor: pointer; text-align: center; }
.sl-poll-opt.is-mine { background: #111; color: #fff; border-color: #111; }
.sl-poll-note { font-size: .78em; font-weight: 500; color: #666; text-align: center; margin-top: .45em; }
.sl-question { width: 9em; background: #fff; color: #111; border-radius: .6em; padding: .6em; font: 700 .64em/1.25 'Inter', sans-serif; text-align: center; box-shadow: 0 4px 18px rgba(0,0,0,.3); white-space: normal; }
.sl-q-prompt { margin-bottom: .5em; }
.sl-q-box { background: #f0f0f2; border-radius: .45em; padding: .6em; color: #777; font-weight: 500; cursor: pointer; }
.sl-song { display: flex; align-items: center; gap: .5em; padding: .45em .7em .45em .45em; border-radius: .6em; font: .6em/1.2 'Inter', sans-serif; max-width: 13em; white-space: normal; box-shadow: 0 4px 18px rgba(0,0,0,.3); }
.sl-song img, .sl-song-note { width: 2.8em; height: 2.8em; border-radius: .35em; flex: none; object-fit: cover; display: grid; place-items: center; background: #222; color: #fff; }
.sl-song-text { display: flex; flex-direction: column; min-width: 0; }
.sl-song-text b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-song-text i { font-style: normal; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-song-links { display: flex; gap: .7em; margin-top: .3em; font-size: .85em; font-weight: 700; }
.sl-song-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- the viewer ---- */
.sv { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; align-items: center; justify-content: center; color: #fff; }
.sv-frame { position: relative; height: 100%; max-height: 100dvh; aspect-ratio: 9 / 16; max-width: 100vw; display: flex; flex-direction: column; }
.sv-stage { position: relative; flex: 1; overflow: hidden; background: #111; touch-action: none; user-select: none; -webkit-user-select: none; }
@media (min-width: 781px) { .sv-frame { height: calc(100dvh - 32px); } .sv-stage { border-radius: 12px; } }
.sv-media, .sv-layers { position: absolute; inset: 0; }
.sv-pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-pic.is-contain { object-fit: contain; }
.sv-shade { position: absolute; inset: 0 0 auto; height: 18%; background: linear-gradient(rgba(0,0,0,.45), transparent); pointer-events: none; }
.sv-top { position: absolute; inset: 0 0 auto; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 0; z-index: 3; }
.sv-bars { display: flex; gap: 3px; }
.sv-bars span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.sv-bars i { display: block; height: 100%; width: 0; background: #fff; }
.sv-head { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sv-who { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: .88rem; }
.sv-who img, .sv-initial { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #333; display: grid; place-items: center; font-weight: 700; flex: none; }
.sv-ago { font-size: .8rem; color: rgba(255,255,255,.7); }
.sv-spacer { flex: 1; }
.sv-btn { background: none; border: none; color: #fff; font-size: 1.15rem; width: 36px; height: 36px; cursor: pointer; border-radius: 50%; }
.sv-btn:hover { background: rgba(255,255,255,.12); }
.sv-menu { position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 4; background: #1c1c1f; border-radius: 12px; overflow: hidden; min-width: 180px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.sv-menu > * { display: block; width: 100%; padding: 13px 16px; background: none; border: none; color: #fff; text-align: left; font: 500 .92rem 'Inter', sans-serif; text-decoration: none; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.08); }
.sv-menu .is-bad { color: #ff6b6b; }
.sv.is-paused .sv-top { opacity: .25; transition: opacity .2s; }
.sv-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); position: relative; flex-wrap: wrap; }
.sv-reply { flex: 1; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 0 6px 0 16px; min-width: 0; }
.sv-reply input { flex: 1; min-width: 0; background: none; border: none; color: #fff; height: 42px; font: 400 16px 'Inter', sans-serif; outline: none; }
.sv-reply input::placeholder { color: rgba(255,255,255,.75); }
.sv-send { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; padding: 6px; }
.sv-heart { background: none; border: none; cursor: pointer; padding: 6px; }
.sv-heart svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; display: block; }
.sv-heart.on svg { fill: #ff3b5c; stroke: #ff3b5c; }
.sv-heart.pop svg { animation: sv-pop .45s var(--ease); }
@keyframes sv-pop { 40% { transform: scale(1.35); } }
.sv-quick { position: absolute; bottom: 100%; left: 12px; right: 12px; display: flex; justify-content: space-around; padding: 10px; }
.sv-quick button { font-size: 1.8rem; background: none; border: none; cursor: pointer; transition: transform .15s; }
.sv-quick button:active { transform: scale(1.3); }
.sv-seen { background: none; border: none; color: #fff; font: 600 .9rem 'Inter', sans-serif; cursor: pointer; padding: 8px 4px; }
.sv-add { margin-left: auto; color: rgba(255,255,255,.8); }
.sv-sheet { position: fixed; inset: 0; z-index: 210; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.sv-sheet-in { position: relative; width: 100%; max-width: 480px; max-height: 72dvh; overflow-y: auto; background: #1c1c1f; color: #fff; border-radius: 18px 18px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
.sv-sheet-x { position: absolute; top: 10px; right: 10px; background: none; border: none; color: #aaa; font-size: 1.1rem; cursor: pointer; width: 36px; height: 36px; }
.sv-sheet-title { font-weight: 700; font-size: 1rem; margin-bottom: 14px; }
.sv-sheet-hint { color: #999; font-size: .85rem; margin-top: 10px; }
.sv-answer { display: flex; gap: 8px; }
.sv-answer input { flex: 1; height: 42px; border-radius: 10px; border: 1px solid #333; background: #111; color: #fff; padding: 0 12px; font: 16px 'Inter', sans-serif; }
.sv-ins-block { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.sv-ins-h { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 10px; font-weight: 700; }
.sv-bar-row { position: relative; display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: #26262a; margin-bottom: 6px; overflow: hidden; font-size: .9rem; }
.sv-bar-row > * { position: relative; }
.sv-bar-fill { position: absolute !important; inset: 0 auto 0 0; background: rgba(232,182,74,.28); }
.sv-ans { padding: 8px 0; font-size: .9rem; }
.sv-viewer { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: #fff; text-decoration: none; }
.sv-viewer img, .sv-viewer .sv-initial { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sv-viewer span { display: flex; flex-direction: column; flex: 1; }
.sv-viewer i { font-style: normal; color: #999; font-size: .82rem; }

/* ---- the editor ---- */
.se { position: fixed; inset: 0; z-index: 200; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; }
.se-frame { position: relative; height: 100%; max-height: 100dvh; aspect-ratio: 9 / 16; max-width: 100vw; }
@media (min-width: 781px) { .se-frame { height: calc(100dvh - 32px); } .se-stage { border-radius: 12px; } }
.se-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.se-bg, .se-base, .se-layers { position: absolute; inset: 0; }
.se-photo { position: absolute; max-width: none; pointer-events: none; }
.se-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-video.is-contain { object-fit: contain; }
.se-cell { position: absolute; border: 3px solid #111; background: #222; color: #888; font-size: 2rem; padding: 0; overflow: hidden; cursor: pointer; }
.se-cell img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.se-draw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; touch-action: none; cursor: crosshair; }
.se-trash { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.5); border: 2px solid #fff; display: grid; place-items: center; font-size: 1.4rem; z-index: 6; transition: transform .15s, background .15s; }
.se-trash.is-hot { transform: translateX(-50%) scale(1.25); background: #ff3b5c; }
.se-topbar { position: absolute; inset: 0 0 auto; display: flex; align-items: flex-start; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 0; z-index: 7; pointer-events: none; }
.se-topbar > * { pointer-events: auto; }
.se-spacer { flex: 1; pointer-events: none !important; }
.se-tools { display: flex; flex-direction: column; gap: 8px; }
.se-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; font: 700 1.05rem 'Inter', sans-serif; cursor: pointer; backdrop-filter: blur(8px); }
.se-btn:hover { background: rgba(0,0,0,.65); }
.se-bottom { position: absolute; inset: auto 0 0; display: flex; justify-content: flex-end; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 7; pointer-events: none; }
.se-share { pointer-events: auto; border: none; border-radius: 999px; background: #fff; color: #111; font: 700 .95rem 'Inter', sans-serif; padding: 12px 20px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.se-share span { font-size: 1.2rem; margin-left: 4px; }
.se-share:disabled { opacity: .8; }
.se-panel { position: absolute; inset: auto 0 0; z-index: 8; max-height: 62%; overflow-y: auto; background: rgba(18,18,20,.94); backdrop-filter: blur(16px); border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: none; }
.se-panel.is-open { display: block; }
.se-panel.is-center { inset: 0; max-height: none; border-radius: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.se-panel.is-text { inset: 0; max-height: none; border-radius: 0; background: rgba(0,0,0,.6); }
.se-panel-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 12px; gap: 8px; }
.se-done { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: 6px 14px; font: 600 .85rem 'Inter', sans-serif; cursor: pointer; }
.se-pick { width: min(320px, 86%); display: flex; flex-direction: column; gap: 10px; }
.se-pick-title { font: 700 1.3rem 'Space Grotesk', sans-serif; text-align: center; margin-bottom: 8px; }
.se-pick-btn { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font: 400 .95rem 'Inter', sans-serif; }
.se-pick-btn i { font-style: normal; color: rgba(255,255,255,.65); font-size: .82rem; }
.se-pick-btn:hover { background: rgba(255,255,255,.14); }
.se-textarea { width: 100%; background: transparent; border: none; color: #fff; font: 700 1.6rem 'Inter', sans-serif; text-align: center; resize: none; outline: none; margin: 20vh 0 18px; }
.se-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; align-items: center; scrollbar-width: none; }
.se-chip { flex: none; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; border-radius: 999px; padding: 7px 13px; font-size: .85rem; cursor: pointer; }
.se-chip.on { background: #fff; color: #111; }
.se-swatch { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); cursor: pointer; padding: 0; }
.se-swatch.on { border-color: #fff; box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
.se-size { flex: 1; min-width: 100px; }
.se-stickers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.se-sticker-btn { border: none; border-radius: 10px; background: #fff; color: #111; padding: 9px 12px; font: 800 .8rem 'Inter', sans-serif; text-transform: uppercase; cursor: pointer; }
.se-emoji { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.se-emoji button { font-size: 1.7rem; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 8px; }
.se-emoji button:hover { background: rgba(255,255,255,.1); }
.se-form { display: flex; flex-direction: column; gap: 8px; }
.se-input { height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; padding: 0 12px; font: 16px 'Inter', sans-serif; }
.se-add { height: 44px; border-radius: 10px; border: none; background: #fff; color: #111; font: 700 .95rem 'Inter', sans-serif; cursor: pointer; margin-top: 4px; }
.se-results { display: flex; flex-direction: column; }
.se-result, .se-song { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: none; color: #fff; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; font: 400 .9rem 'Inter', sans-serif; }
.se-song img, .se-song > span:first-child { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; }
.se-song span:last-child { display: flex; flex-direction: column; min-width: 0; }
.se-song i { font-style: normal; color: #999; font-size: .82rem; }
.se-hint { color: #999; font-size: .85rem; line-height: 1.5; padding: 6px 0; }
.se-filters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.se-filter { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; color: #ccc; font-size: .78rem; cursor: pointer; }
.se-filter.on { color: #fff; font-weight: 700; }
.se-filter-sw { width: 58px; height: 76px; border-radius: 8px; background: linear-gradient(160deg,#ff8a00,#2ec5ff) center/cover; border: 2px solid transparent; }
.se-filter.on .se-filter-sw { border-color: #fff; }
.se-slider { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .85rem; padding: 6px 0; }
.se-slider input { flex: 1; max-width: 65%; }
.se-trim-track { position: relative; height: 44px; border-radius: 8px; background: rgba(255,255,255,.12); margin-bottom: 8px; overflow: hidden; }
.se-trim-win { position: absolute; top: 0; bottom: 0; border: 3px solid #e8b64a; border-radius: 8px; background: rgba(232,182,74,.18); }
.se-trim-range { width: 100%; }
.se-trim-times { display: flex; justify-content: space-between; font-size: .8rem; color: #bbb; margin-top: 4px; }
.se-layouts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.se-layout { position: relative; aspect-ratio: 9 / 16; border: 2px solid rgba(255,255,255,.4); border-radius: 6px; background: none; cursor: pointer; padding: 0; overflow: hidden; }
.se-layout i { position: absolute; border: 1.5px solid rgba(255,255,255,.55); box-sizing: border-box; }
.se-layout:hover { border-color: #fff; }
/* `display` on these panels beats the browser's own [hidden] rule, which
   left an invisible sheet dimming the story and swallowing every tap. */
.sv [hidden], .se [hidden] { display: none !important; }
.se-blind { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 12%; text-align: center; font-size: 2.4rem; }
.se-blind b { font-size: 1rem; }
.se-blind span { font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.5; }
/* Boxed text needs room between lines or each line's box overlaps the next. */
.sl-text.bg-solid, .sl-text.bg-soft { line-height: 1.42; }

/* ---- story music library ---- */
.sl-eq { display: flex !important; align-items: flex-end; justify-content: center; gap: .14em; padding-bottom: .55em; background: linear-gradient(135deg, #ff3b5c, #a259ff) !important; }
.sl-eq i { width: .22em; height: 1em; background: #fff; border-radius: .1em; animation: sl-eq 0.9s ease-in-out infinite; }
.sl-eq i:nth-child(2) { animation-delay: -.3s; } .sl-eq i:nth-child(3) { animation-delay: -.6s; } .sl-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes sl-eq { 0%, 100% { height: .35em; } 50% { height: 1.3em; } }
@media (prefers-reduced-motion: reduce) { .sl-eq i { animation: none; height: .9em; } }
.se-tabs { margin-bottom: 6px; }
.se-mood { font-size: .72rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #999; margin: 12px 0 4px; }
.se-track { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.se-play { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font-size: .8rem; }
.se-track-pick { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: none; color: #fff; text-align: left; padding: 12px 0; cursor: pointer; font: 400 .92rem 'Inter', sans-serif; }
.se-track-pick i { font-style: normal; color: #999; font-size: .8rem; }
.se-hint a { color: #fff; }

/* ============================================================
   EVENTS
   Same graphite language as everything else: no category colours,
   the icon and the date carry the card.
   ============================================================ */
.public-screen .topbar-brand { margin-right: auto; }
.public-screen .topbar-actions { display: flex; gap: 8px; }
.public-main { max-width: 860px; margin: 0 auto; padding: 24px 20px 80px; }

.ev-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-tabs { margin: 0 0 18px; }

.ev-filters { margin-bottom: 18px; }
.ev-search { margin-bottom: 12px; }
/* One line each, scrolling sideways on a phone, like Instagram's chips. */
.ev-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ev-row::-webkit-scrollbar { display: none; }
.ev-row .chip { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.ev-row .chip small { font-size: 0.7rem; opacity: 0.6; }
.ev-row .chip svg { width: 15px; height: 15px; }
/* Still tappable — "nothing here yet" is an answer too — just quieter. */
.ev-row .chip.is-empty { opacity: 0.5; }
.ev-near { display: flex; white-space: nowrap; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-secondary); }

.ev-nudge { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.ev-nudge b { font-size: 0.9rem; }
.ev-nudge p { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; }

.ev-day {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);
  margin: 22px 0 10px;
}
.ev-day:first-of-type { margin-top: 6px; }
.ev-grid { display: grid; gap: 10px; }
.ev-grid-top { margin-top: 4px; }

.ev-card {
  display: flex; flex-direction: row; overflow: hidden; text-decoration: none; color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ev-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-light); }
.ev-card.is-cancelled { opacity: 0.6; }
/* With the organiser's own picture, the card leads with it, whole — event
   graphics carry their words and a square crop cuts them in half. */
.ev-card.has-image { flex-direction: column; }
.ev-card.has-image .ev-media { flex: none; min-height: 0; aspect-ratio: 1200 / 630; }
/* Top right: organisers put their own words top left. */
.ev-card.has-image .ev-date { left: auto; right: 12px; }
.ev-media { position: relative; flex: 0 0 168px; min-height: 124px; background: var(--bg-secondary); overflow: hidden; }
.ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-ph {
  width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-muted);
  background:
    radial-gradient(120% 90% at 85% 0%, var(--tint-2), transparent 60%),
    linear-gradient(160deg, var(--bg-elevated), var(--bg-secondary));
}
.ev-ph svg { width: 34px; height: 34px; opacity: 0.8; }
.ev-ph-lg svg { width: 64px; height: 64px; }
.ev-date {
  position: absolute; left: 12px; top: 12px; min-width: 46px; padding: 6px 8px 5px;
  border-radius: 10px; text-align: center; line-height: 1;
  background: var(--bg-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
.ev-date b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700; }
.ev-date span { display: block; margin-top: 3px; font-size: 0.6rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); }
.ev-body { padding: 13px 16px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ev-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.68rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.ev-meta a { color: inherit; }
.ev-foryou, .ev-flag {
  padding: 2px 8px; border-radius: 999px; letter-spacing: 0.4px; text-transform: none;
  border: 1px solid var(--border-light); color: var(--text-primary); background: var(--tint);
}
.ev-flag { color: var(--danger); border-color: var(--danger); background: none; }
.ev-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.04rem; font-weight: 600; line-height: 1.3; }
.ev-when { font-size: 0.82rem; color: var(--text-primary); }
.ev-where { font-size: 0.8rem; color: var(--text-secondary); }
.ev-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; font-size: 0.76rem; color: var(--text-muted); }
.ev-match { color: var(--text-primary); font-weight: 600; }
.card-title .ev-match { font-size: 0.74rem; margin-left: 8px; letter-spacing: 0; text-transform: none; }

/* -- one event -- */
.ev-back { display: inline-block; margin-bottom: 14px; font-size: 0.82rem; color: var(--text-secondary); }
.ev-back:hover { color: var(--text-primary); }
.ev-banner { margin-bottom: 14px; font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); border-left: 2px solid var(--border-light); }
.ev-banner-warn { border-left-color: var(--danger); color: var(--text-primary); }
/* 1200 x 630, the shape every event page and link preview uses, so an
   organiser's graphic shows whole, words and all. */
.ev-hero { aspect-ratio: 1200 / 630; background: var(--bg-secondary); overflow: hidden; }
.ev-hero:has(.ev-ph) { aspect-ratio: 4 / 1; }
.ev-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-page-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: 8px 0 16px; }
.ev-facts { display: grid; gap: 12px; margin-bottom: 18px; }
.ev-facts > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ev-facts dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
.ev-facts dd { font-size: 0.92rem; line-height: 1.5; }
.ev-facts small { display: block; font-size: 0.8rem; color: var(--text-secondary); }
.ev-maps { display: inline-block; margin-top: 4px; font-size: 0.78rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
.ev-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ev-actions .btn { width: auto; }
.ev-desc { margin-top: 18px; font-size: 0.92rem; line-height: 1.7; white-space: pre-wrap; color: var(--text-secondary); }
.ev-who { margin-top: 16px; }
.ev-person { gap: 10px; flex-wrap: wrap; }
.ev-person .uline { flex: 1; min-width: 150px; }
.ev-person-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-manage { margin-top: 16px; }
.ev-danger { color: var(--danger); }

/* -- lists of your own, and staff review -- */
.ev-mine-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ev-mine-title { font-weight: 600; font-size: 0.96rem; color: var(--text-primary); }
.ev-mine-sub { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; }
.ev-mine-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; }
.ev-status { flex-shrink: 0; font-size: 0.72rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); }
.ev-status-live { color: var(--text-primary); border-color: var(--border-light); background: var(--tint); }
.ev-status-rejected, .ev-status-cancelled { color: var(--danger); border-color: var(--danger); }
.ev-review .ev-actions { margin-top: 12px; }
.ev-review-link { font-size: 0.8rem; margin-top: 8px; word-break: break-all; }
.ev-review-link a { color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
.ev-review-desc { font-size: 0.84rem; color: var(--text-secondary); margin-top: 8px; line-height: 1.6; }
/* Event requests: the sender's contact details on Review, and the form. */
.ev-contact { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-secondary);
              font-size: 0.86rem; display: grid; gap: 4px; }
.ev-contact a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
.ev-contact-h, .ev-req-h { font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.ev-req-h { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.ev-req-intro { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.5; }
.ev-from-req { font-size: 0.86rem; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-secondary);
               margin-bottom: 14px; }
.ev-req-done p { margin: 0 0 10px; line-height: 1.5; }
.ev-req-done .btn { margin-top: 8px; }

/* -- the form -- */
.ev-paste { padding-bottom: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.ev-paste-row { display: flex; gap: 8px; }
.ev-paste-row input { flex: 1; min-width: 0; }
.ev-check { display: flex; align-items: center; gap: 10px; margin: -4px 0 18px; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
.ev-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.field input[type="datetime-local"] { color-scheme: dark; }
[data-theme="light"] .field input[type="datetime-local"], [data-theme="light"] .field input[type="date"] { color-scheme: light; }

/* -- goals on Meet People -- */
.chip-goal { border-style: dashed; }

/* -- ways in, on the Search page -- */
.explore-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.explore-links a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  color: var(--text-primary); font-size: 0.8rem; font-weight: 600; text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.explore-links a:hover { border-color: var(--border-light); transform: translateY(-1px); }
.explore-links svg { width: 24px; height: 24px; color: var(--text-secondary); }

.landing-events { margin: 18px 0 0; text-align: center; }
.landing-events a { color: var(--text-primary); font-weight: 600; border-bottom: 1px solid var(--border-light); }

@media (max-width: 780px) {
  .ev-card:not(.has-image) .ev-media { flex-basis: 104px; min-height: 112px; }
  .ev-date { left: 8px; top: 8px; min-width: 40px; padding: 5px 6px 4px; }
  .ev-date b { font-size: 1rem; }
  .ev-body { padding: 11px 13px 12px; }
  .ev-title { font-size: 0.96rem; }
  .ev-tabs .ig-tab-label { display: inline !important; }
  .ev-page-title { font-size: 1.35rem; }
  .ev-facts > div { grid-template-columns: 74px 1fr; }
  .ev-nudge { flex-direction: column; align-items: flex-start; }
  .ev-mine-row { flex-direction: column; align-items: flex-start; }
  .public-main { padding: 16px 16px 60px; }
}

/* -- history -- */
.ev-card.is-past { opacity: 0.78; }
.ev-card.is-past:hover { opacity: 1; }
.ev-history { margin-top: 16px; }
.ev-history-n { margin-left: 8px; font-size: 0.74rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.ev-history-month { margin: 12px 0 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.ev-history-days { display: flex; flex-wrap: wrap; gap: 6px; }

/* -- the add-to-calendar and share sheets -- */
.ev-sheet { display: grid; gap: 10px; }
.ev-sheet a, .ev-sheet button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  color: var(--text-primary); font: 600 0.92rem 'Inter', sans-serif; text-decoration: none; cursor: pointer;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.ev-sheet a:hover, .ev-sheet button:hover { border-color: var(--border-light); transform: translateY(-1px); }
.ev-sheet small { margin-left: auto; font-weight: 400; font-size: 0.74rem; color: var(--text-muted); }
.ev-sheet .ev-sheet-first { border-color: var(--text-primary); }

/* ============================================================
   PHONES: the menu and the feed filter sheet
   ============================================================ */
.icon-btn.has-dot { position: relative; }
.icon-btn.has-dot::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-primary);
}
.feed-filter-note {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  margin: 0 0 14px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.8rem; color: var(--text-secondary); background: var(--bg-card);
}
.feed-filter-note a { color: var(--text-primary); font-weight: 600; }

.phone-menu { position: fixed; inset: 0; z-index: 90; }
.phone-menu-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); animation: fadeIn 0.25s var(--ease) both; }
.phone-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); overflow-y: auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-secondary); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  animation: menuIn 0.32s var(--ease) both;
}
@keyframes menuIn { from { transform: translateX(100%); } to { transform: none; } }
.phone-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 14px; }
.phone-menu-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 12px; border: none;
  border-radius: var(--radius); background: none; text-align: left; text-decoration: none;
  color: var(--text-primary); font: inherit; cursor: pointer;
}
.phone-menu-item b { font-size: 0.98rem; font-weight: 600; }
.phone-menu-item span { font-size: 0.76rem; color: var(--text-muted); }
.phone-menu-item:active, .phone-menu-item.on { background: var(--tint); }
.phone-menu-sep { height: 1px; margin: 10px 6px; background: var(--border); }
@media (prefers-reduced-motion: reduce) { .phone-menu-panel { animation: none; } }
.phone-menu-challenge { display: grid; gap: 6px; justify-items: start; margin: 0 6px 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.phone-menu-challenge span { font-size: 0.64rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.phone-menu-challenge b { font-size: 0.92rem; }

/* -- Events on a phone: two icons and one row of kinds; the rest in a sheet -- */
.ev-head-icons { gap: 4px; }
.ev-summary { display: none; }
@media (max-width: 780px) {
  .section-head:has(.ev-head-icons) { flex-wrap: nowrap; align-items: center; }
  .section-head:has(.ev-head-icons) p { display: none; }
  .ev-filters .ev-more { display: none; }
  .ev-summary {
    display: block; margin: 2px 0 4px; padding: 0; border: none; background: none;
    font: 400 0.78rem 'Inter', sans-serif; color: var(--text-muted); cursor: pointer; text-align: left;
  }
}
.ev-sheet-filters .ev-row { flex-wrap: wrap; overflow: visible; }
.ev-sheet-filters .ev-search { margin-bottom: 14px; }
.ev-sheet-filters .ev-near { margin-top: 4px; flex-wrap: wrap; }
.ev-review-link-phone { margin-top: 16px; }

/* -- the feed switcher under the logo (phones) -- */
.brand-switch {
  align-items: center; gap: 6px; margin-right: auto; padding: 6px 4px; border: none; background: none;
  color: var(--text-primary); cursor: pointer;
}
.brand-switch svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.brand-switch[aria-expanded="true"] svg { transform: rotate(180deg); }
.feed-pop { position: fixed; inset: 0; z-index: 30; }
.feed-pop-backdrop { position: absolute; inset: 0; }
.feed-pop-panel {
  position: absolute; left: 12px; top: calc(60px + env(safe-area-inset-top, 0px)); width: 236px;
  max-height: calc(100dvh - 160px); overflow-y: auto; padding: 6px;
  background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 14px;
  box-shadow: var(--shadow-lg); transform-origin: top left; animation: popDown 0.2s var(--ease) both;
}
@keyframes popDown { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.feed-pop-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: 9px; text-decoration: none; color: var(--text-secondary);
  font: 500 0.95rem 'Space Grotesk', sans-serif; letter-spacing: 0.2px;
}
.feed-pop-item.on { color: var(--text-primary); font-weight: 600; }
.feed-pop-item:active { background: var(--tint); }
.feed-pop-item svg { width: 17px; height: 17px; }
.feed-pop-label {
  margin: 8px 12px 4px; padding-top: 10px; border-top: 1px solid var(--border);
  font: 600 0.62rem 'Space Grotesk', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) { .feed-pop-panel { animation: none; } }

/* -- phones: pop-ups rise from the bottom, like the phone's own sheets -- */
@media (max-width: 780px) {
  .modal-wrap { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none !important; max-height: 90dvh; border-radius: 20px 20px 0 0;
    border-bottom: none; padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: sheetUp 0.32s var(--ease) both;
  }
  .modal-head { padding: 12px 20px 14px; border-bottom: none; }
  .modal-head::before {
    content: ''; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px;
    margin-left: -19px; border-radius: 2px; background: var(--border-light);
  }
  .modal-head h2 { font-size: 1.1rem; padding-top: 8px; }
  .modal-body { padding-top: 4px; }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none !important; } }

/* Report sheet */
.report-lead { margin: 0 0 14px; color: var(--text-secondary); font-size: .9rem; line-height: 1.45; }
#report-note, #problem-body { width: 100%; font: inherit; color: var(--text-primary); background: var(--bg-elevated);
               border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; resize: vertical; }

/* ============================================================
   RECIPE PAGE (templates/recipe.html, static/js/recipe.js)
   One long page you cook from: big photo, the numbers that matter
   most large, everything else a glance below, then a checklist.
   ============================================================ */
.rcp-back { display: inline-block; margin: 0 0 12px; font-size: 0.85rem; color: var(--text-secondary); }
.rcp { overflow: hidden; padding: 0; max-width: 720px; margin: 0 auto; }
.rcp-hero { aspect-ratio: 4 / 3; background: var(--bg-secondary); overflow: hidden; }
.rcp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcp-hero-ph {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.4px;
}
.rcp-hero-ph svg { width: 54px; height: 54px; opacity: .7; }
@media (min-width: 720px) { .rcp-hero { aspect-ratio: 16 / 9; } }

.rcp-body { padding: 20px 20px 4px; }
.rcp-kicker {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted);
}
.rcp-kicker a { color: inherit; }
.rcp-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700;
  line-height: 1.15; margin: 6px 0 8px; letter-spacing: 0.1px;
}
.rcp-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }
.rcp-by { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.84rem; color: var(--text-secondary); }
.rcp-by a { color: var(--text-primary); font-weight: 600; }

.rcp-times {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px;
  margin: 18px 0 0; padding: 14px; border-radius: var(--radius); background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.rcp-times dt { font-size: 0.7rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.rcp-times dd { font-family: 'Space Grotesk', sans-serif; font-weight: 600; margin-top: 3px; }
.rcp-times dd small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.72rem; color: var(--text-muted); }

.rcp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; align-items: center; }
.rcp-save {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--border-light); background: var(--ink); color: var(--ink-on);
  font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.rcp-save svg { width: 18px; height: 18px; }
.rcp-save.on { background: transparent; color: var(--text-primary); }
.rcp-save.is-busy { opacity: .6; }
.rcp-actions .mini-btn { min-height: 44px; display: inline-flex; align-items: center; }
.rcp-save-error { margin-top: 10px; color: #f0a35e; font-size: 0.84rem; cursor: pointer; }

.rcp-section { padding: 20px; border-top: 1px solid var(--border); }
.rcp-section-head { display: flex; align-items: center; justify-content: space-between; }
.rcp-h {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px;
}
.rcp-sub, .rcp-sub-inline { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; font-family: 'Inter', sans-serif; }
.rcp-sub { margin-top: 2px; }

.rcp-servings { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rcp-stepper { display: flex; align-items: center; border: 1px solid var(--border-light); border-radius: 999px; }
.rcp-stepper button {
  width: 48px; height: 48px; border: 0; background: none; color: var(--text-primary);
  font-size: 1.4rem; cursor: pointer; border-radius: 999px;
}
.rcp-stepper button:disabled { color: var(--text-muted); opacity: .4; cursor: default; }
.rcp-stepper output {
  min-width: 36px; text-align: center; font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums;
}

.rcp-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.rcp-big > div {
  padding: 16px; border-radius: var(--radius); background: var(--bg-secondary); border: 1px solid var(--border);
}
.rcp-big b {
  display: block; font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.rcp-big > div > span { font-size: 0.78rem; color: var(--text-secondary); }
.rcp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.rcp-facts > div {
  display: flex; justify-content: space-between; gap: 8px; padding: 10px 0;
  border-bottom: 1px solid var(--hairline); font-size: 0.88rem;
}
.rcp-facts dt { color: var(--text-secondary); }
.rcp-facts dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 380px) { .rcp-facts { grid-template-columns: 1fr; } }
.rcp-per { display: block; margin-top: 6px; font-size: 0.74rem; color: var(--text-muted); }
.rcp-per[hidden] { display: none; }
.rcp-source { margin-top: 12px; font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; }
.rcp-source p + p { margin-top: 4px; }
.rcp-source a { color: var(--text-secondary); text-decoration: underline; }
.rcp-warn { color: #f0a35e; }
.rcp-empty { margin-top: 10px; color: var(--text-secondary); font-size: 0.88rem; }

.rcp-reset { background: none; border: 0; color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; min-height: 36px; }
.rcp-ingredients { list-style: none; margin: 10px 0 0; padding: 0; }
.rcp-ingredients li { border-bottom: 1px solid var(--hairline); }
.rcp-ingredients label, .rcp-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; cursor: pointer; min-height: 44px; }
.rcp-ingredients input, .rcp-step input {
  width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--text-primary);
}
.rcp-ing-text { font-size: 0.95rem; line-height: 1.45; }
.rcp-qty { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 2px; }
.rcp-state { color: var(--text-secondary); }
.rcp-opt {
  margin-left: 6px; font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.rcp-ingredients li.is-done .rcp-ing-text, .rcp-steps li.is-done .rcp-step-text {
  color: var(--text-muted); text-decoration: line-through;
}

.rcp-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.rcp-steps li { border-bottom: 1px solid var(--hairline); padding-bottom: 4px; }
.rcp-step-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--bg-elevated);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.8rem;
}
.rcp-step-text { font-size: 0.95rem; line-height: 1.55; padding-top: 2px; }
.rcp-timer {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px 72px; min-height: 40px;
  padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-light);
  background: var(--bg-secondary); color: var(--text-primary); cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rcp-timer.is-running { background: var(--ink); color: var(--ink-on); }
.rcp-timer.is-done { border-color: #7fd18b; color: #7fd18b; }

/* ---- writing a recipe (templates/recipe_form.html) ---- */
.rf { max-width: 720px; }
.rf-error {
  margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid rgba(240, 163, 94, .5); color: #f0a35e; font-size: 0.88rem;
}
.rf-h { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; margin: 24px 0 6px; }
.rf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0 12px; }
.rf-photo {
  aspect-ratio: 4 / 3; max-width: 360px; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-secondary); border: 1px dashed var(--border-light);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.rf-photo img { width: 100%; height: 100%; object-fit: cover; }
.rf-photo-ph { color: var(--text-muted); font-size: 0.84rem; }
.rf-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.field label.rf-file-btn {
  display: inline-flex; min-height: 40px; align-items: center; cursor: pointer;
  text-transform: none; letter-spacing: normal; font-size: 0.84rem; color: var(--text-primary);
}
.rf-file:focus-visible + .rf-file-btn { outline: 2px solid var(--text-primary); }

.rf-ing, .rf-step {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px;
  margin-bottom: 10px; background: var(--bg-secondary);
}
.rf-ing-main {
  display: grid; gap: 6px;
  grid-template-columns: 72px 1fr 36px; grid-template-areas: "qty unit x" "name name name";
}
.rf-ing-main .rf-qty { grid-area: qty; }
.rf-ing-main .rf-unit { grid-area: unit; }
.rf-ing-main .rf-name { grid-area: name; }
.rf-ing-main .rf-x { grid-area: x; }
@media (min-width: 640px) {
  .rf-ing-main { grid-template-columns: 72px 110px 1fr 36px; grid-template-areas: "qty unit name x"; }
}
.rf-ing-more { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.rf-ing input, .rf-step textarea, .rf-step input, .rf-ing select {
  width: 100%; min-height: 40px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font: inherit;
  font-size: 16px;      /* below 16px iOS zooms the page on focus */
}
.rf-ing-more .rf-state { flex: 1; }
.rf-optional { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; white-space: nowrap; color: var(--text-secondary); }
.rf-optional input { width: 18px; min-height: 18px; height: 18px; }
.rf-x {
  min-height: 40px; border: 0; background: none; color: var(--text-muted);
  font-size: 1.3rem; cursor: pointer; border-radius: var(--radius-sm);
}
.rf-food { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 0.8rem; }
.rf-matched { color: #7fd18b; }
.rf-unmatched { color: var(--text-muted); }
.rf-food-btn {
  flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-primary); font-size: 0.8rem;
}
.rf-search { margin-top: 8px; }
.rf-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 280px; overflow-y: auto; }
.rf-result {
  text-align: left; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary); cursor: pointer; font: inherit;
}
.rf-result b { display: block; font-size: 0.86rem; font-weight: 600; }
.rf-result span { font-size: 0.75rem; color: var(--text-muted); }
.rf-result:hover, .rf-result:focus-visible { border-color: var(--border-light); }
.rf-results-msg { font-size: 0.8rem; color: var(--text-muted); padding: 6px 2px; }
.rf-portion { margin-top: 8px; font-size: 0.84rem; color: var(--text-secondary); }
.rf-portion label { display: flex; flex-direction: column; gap: 4px; }

.rf-step { display: grid; grid-template-columns: 26px 1fr 36px; gap: 8px; align-items: start; }
.rf-step-n {
  width: 26px; height: 26px; border-radius: 50%; background: var(--bg-elevated); display: flex;
  align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.8rem; margin-top: 8px;
}
.rf-timer { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.8rem; color: var(--text-secondary); }
.rf-timer input { width: 72px; min-height: 36px; }
.rf-note { margin: 18px 0 10px; font-size: 0.84rem; color: var(--text-secondary); }
#recipe-form > .mini-btn { min-height: 40px; }

/* ---- the Recipes list (templates/recipes.html) ---- */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.rc-card {
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); color: inherit; text-decoration: none;
}
.rc-card:hover { border-color: var(--border-light); }
.rc-img {
  aspect-ratio: 4 / 3; background: var(--bg-secondary); display: flex; align-items: center;
  justify-content: center; color: var(--text-muted);
}
.rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-img svg { width: 40px; height: 40px; opacity: .6; }
.rc-text { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.rc-text .recipe-meal { margin: 0; }
.rc-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.rc-nums { font-size: 0.78rem; color: var(--text-secondary); }
.rc-nums b { color: var(--text-primary); font-family: 'Space Grotesk', sans-serif; }
.rc-by { font-size: 0.74rem; color: var(--text-muted); }
/* A compact list (small photo, words beside it) so many recipes fit on a
   screen; two columns where there's room. The recipe's own page still shows
   the photo big. */
.rc-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.rc-card { flex-direction: row; align-items: center; border-radius: var(--radius); }
.rc-img { flex: 0 0 96px; width: 96px; height: 96px; aspect-ratio: auto; margin: 8px 0 8px 8px;
          border-radius: calc(var(--radius) - 4px); overflow: hidden; }
.rc-img svg { width: 28px; height: 28px; }
.rc-text { flex: 1; min-width: 0; gap: 3px; padding: 8px 12px; }
@media (max-width: 720px) {
  .rc-grid { grid-template-columns: 1fr; gap: 8px; }
  .rc-img { flex-basis: 88px; width: 88px; height: 88px; }
  .rc-title { font-size: 0.92rem; }
}
.rc-filters { margin: -6px 0 16px; }
.rc-filters summary {
  cursor: pointer; list-style: none; font-size: 0.84rem; color: var(--text-secondary); padding: 6px 0; min-height: 36px;
}
.rc-filters summary::-webkit-details-marker { display: none; }
.rc-filters summary::before { content: '⚙ '; }
.rc-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.rc-filter-label { width: 72px; font-size: 0.74rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.rc-filter-result { margin-top: 12px; font-size: 0.84rem; color: var(--text-secondary); }
.rc-filter-result a { color: var(--text-primary); text-decoration: underline; }

/* Add to Home Screen guide for iPhone notifications (LIC-097). */
.push-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--text-secondary); line-height: 1.5; }
.push-steps b { color: var(--text-primary); }

/* ---------- lock-in strip (LIC-131) ---------- */
.lockin-strip { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.lockin-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px;
  font: 600 0.68rem 'Space Grotesk', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-secondary); }
.lockin-sub { letter-spacing: .6px; text-transform: none; font-weight: 500; color: var(--text-muted); }
.lockin-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lockin-row::-webkit-scrollbar { display: none; }
.lockin-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; max-width: 280px;
  padding: 5px 12px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-secondary);
  color: var(--text-primary); font: 500 0.8rem Inter, sans-serif; cursor: pointer; text-decoration: none; }
.lockin-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.lockin-pill span b { color: var(--text-primary); font-weight: 600; }
.lockin-pill.done { border-color: var(--border-light); }
.lockin-pill.missed span b { color: var(--text-muted); }
.lockin-pill.add { padding-left: 12px; color: var(--text-secondary); }
.lockin-tick { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ink); color: var(--ink-on); font-size: 0.65rem; }
.lockin-lock { font-style: normal; font-size: 0.7rem; opacity: .7; }
.lockin-menu { display: grid; gap: 8px; }
.lockin-when { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.lockin-when .field { flex: 1; min-width: 120px; margin: 0; }

/* "You're using the web app; the download is coming." Sign-up and Settings. */
.webapp-note {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; margin: 22px auto 0; max-width: 26rem;
}
.card .webapp-note { margin: 0 auto; }
.webapp-tag {
  font-family: 'Space Grotesk', sans-serif; font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-light); color: var(--text-secondary);
}
.webapp-note p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--text-muted); }

/* ---------- squads (LIC-132) ---------- */
.squad-total { display: flex; justify-content: space-between; align-items: baseline; font: 600 0.9rem 'Space Grotesk', sans-serif; }
.squad-total span { color: var(--text-secondary); font-weight: 500; }
.squad-bar { height: 8px; border-radius: 4px; background: var(--tint-2); overflow: hidden; margin-top: 10px; }
.squad-bar > b { display: block; height: 100%; background: var(--ink); }
.squad-member { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.squad-member.pending { opacity: .7; }
.squad-member-text { flex: 1; min-width: 0; }
.squad-role { margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.62rem; color: var(--text-muted); font-weight: 500; }
.squad-lockins { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 0.76rem; color: var(--text-secondary); }
.squad-lockins .done { color: var(--text-primary); }
.squad-lockins .muted { color: var(--text-muted); }
.squad-count { text-align: center; min-width: 54px; }
.squad-count b { display: block; font: 700 1.25rem 'Space Grotesk', sans-serif; }
.squad-count span { font-size: 0.62rem; color: var(--text-muted); }
.squad-foot { display: flex; gap: 8px; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border); }
.squad-invite { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.squad-actions { display: flex; gap: 8px; }
.squad-start-title { font: 700 1.05rem 'Space Grotesk', sans-serif; margin-bottom: 6px; }

/* Personal sub-tabs (LIC-130): one section at a time instead of one long page. */
.p-subtabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; padding-bottom: 2px; }
.p-subtabs::-webkit-scrollbar { display: none; }
.p-subtab { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-secondary); font: 600 .82rem 'Space Grotesk', sans-serif; text-decoration: none; letter-spacing: .02em; }
.p-subtab.on { background: var(--ink); color: var(--ink-on); border-color: var(--ink); }

/* Goal milestones (LIC-133): each dash point is a tick box; bar + countdown. */
.goal-body { flex: 1; min-width: 0; }
.goal-dash.ms { padding-left: 30px; }
.goal-dash.ms::before { content: none; }
.ms-tick { position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 6px; padding: 0;
  border: 1.5px solid var(--border-light); background: transparent; cursor: pointer; }
.ms-tick.on { background: var(--ink); border-color: var(--ink); }
.ms-tick.on::after { content: ''; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px;
  border: solid var(--ink-on); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.goal-dash.ms.ticked span { color: var(--text-muted); text-decoration: line-through; }
.goal-dash.ms.d1 { margin-left: 26px; } .goal-dash.ms.d2 { margin-left: 52px; }
.goal-prog { margin-top: 12px; }
.goal-prog-top { display: flex; justify-content: space-between; gap: 10px; font: 600 .74rem 'Space Grotesk', sans-serif;
  color: var(--text-secondary); letter-spacing: .02em; }
.goal-due.late { color: #ff6b6b; }
.goal-bar { height: 6px; border-radius: 999px; background: var(--tint-2, rgba(255,255,255,.08)); margin-top: 7px; overflow: hidden; }
.goal-bar b { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .35s var(--ease); }
.goal-prog-top { flex-wrap: wrap; row-gap: 2px; }
.goal-prog-top > span { white-space: nowrap; }

/* Daily habits (LIC-136): a card on your own Feed and a list in Personal. */
.habit-card { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card);
  transition: opacity .4s var(--ease), max-height .4s var(--ease), margin .4s var(--ease), padding .4s var(--ease); max-height: 220px; overflow: hidden; }
.habit-card.gone { opacity: 0; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
.habit-row { display: flex; gap: 8px; flex-wrap: wrap; }
.habit-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-primary); font: 500 .84rem Inter, sans-serif; cursor: pointer; }
.habit-chip.on { background: var(--ink); color: var(--ink-on); border-color: var(--ink); }
.habit-chip.on::after { content: ' ✓'; }
.habit-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.habit-line:first-child { border-top: 0; padding-top: 0; }
.habit-tick { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--border-light); background: transparent; cursor: pointer; position: relative; padding: 0; }
.habit-tick.on { background: var(--ink); border-color: var(--ink); }
.habit-tick.on::after { content: ''; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid var(--ink-on); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.habit-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 600 .92rem 'Space Grotesk', sans-serif; }
.habit-name small { font: 500 .74rem Inter, sans-serif; color: var(--text-muted); margin-top: 2px; }
.habit-week { display: flex; gap: 4px; }
.habit-week i { width: 11px; height: 11px; border-radius: 3px; background: var(--tint-2); }
.habit-week i.on { background: var(--ink); }
.habit-presets { display: flex; gap: 8px; flex-wrap: wrap; }

/* Private journal (LIC-137). */
.journal-entry { position: relative; padding: 12px 36px 12px 0; border-top: 1px solid var(--border); }
.journal-entry:first-child { border-top: 0; padding-top: 0; }
.journal-entry .icon-btn { position: absolute; right: -6px; top: 6px; }
.journal-entry:first-child .icon-btn { top: -6px; }
.journal-day { font: 600 .72rem 'Space Grotesk', sans-serif; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.journal-text { margin-top: 4px; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }