/* ═══════════════════════════════════════════════════════════════
   RIPPLE — "Late-night Darkroom"
   Warm near-black canvas, serif headlines, Tahoma body, monospace
   metadata, cream chrome with a softened-orange accent reserved for
   "unseen" / hot states. Cinematic, photo-forward, quiet.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Color — dark theme (default) */
  --color-bg:            #0B0908;
  --color-surface:       #16120E;
  --color-surface-2:     #1F1A14;
  --color-surface-3:     #2A241C;
  --color-border:        rgba(237,227,209,0.06);
  --color-border-strong: rgba(237,227,209,0.14);
  --color-text:          #EDE3D1;
  --color-text-muted:    #9C9080;
  --color-text-dim:      #5C544A;
  --color-accent:        #E88B45;
  --color-accent-hot:    #F3A062;
  --color-accent-glow:   rgba(232,139,69,0.35);
  --color-accent-dim:    rgba(232,139,69,0.15);
  --color-cream:         #D4C5A0;
  --color-cream-glow:    rgba(212,197,160,0.30);
  --color-success:       #6FB58A;
  --color-danger:        #E27566;
  --color-empty-text:    #7A7060;
  --color-shell-shadow:  rgba(0,0,0,0.7);

  /* Uniform Inter across the whole app. All three tokens resolve to
     the same stack; visual hierarchy lives in weight + size, not in
     a different face. Tokens are kept so timestamp-style usages
     keep a semantic name — tabular-num polish can be reintroduced
     later via font-variant-numeric without renaming variables. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, sans-serif;

  --size-caption:  11px;
  --size-small:    13px;
  --size-body:     15px;
  --size-label:    16px;
  --size-title:    22px;
  --size-heading:  34px;
  --size-display:  48px;

  --leading-tight:   1.1;
  --leading-normal:  1.5;

  --tracking-tight: -0.02em;
  --tracking-negative: -0.035em;
  --tracking-wide:   0.12em;

  /* Shape */
  --radius-sm:   6px;
  --radius-md:   16px;   /* universal card radius — the 2026-05 unification target */
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-full: 999px;
}

:root[data-theme="light"] {
  --color-bg:            #F6F1E8;
  --color-surface:       #FBF6ED;
  --color-surface-2:     #EFE9DC;
  --color-surface-3:     #E2DBC9;
  --color-border:        rgba(40,30,15,0.08);
  --color-border-strong: rgba(40,30,15,0.18);
  --color-text:          #1A1410;
  --color-text-muted:    #5C5448;
  --color-text-dim:      #8A8170;
  --color-accent-glow:   rgba(232,139,69,0.24);
  --color-accent-dim:    rgba(232,139,69,0.12);
  --color-cream:         #9A8C6A;
  --color-cream-glow:    rgba(154,140,106,0.24);
  --color-empty-text:    #8A8170;
  --color-shell-shadow:  rgba(40,30,15,0.18);
}

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

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── APP SHELL ── */
.app {
  max-width: 390px;
  width: 100%;
  height: 700px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  position: relative;
  box-shadow: 0 20px 80px var(--color-shell-shadow);
}
.screen { flex: 1; overflow: hidden; position: relative; background: var(--color-bg); }

/* ── BOTTOM NAV ── */
.navbar {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  display: flex;
  padding: 6px 0 4px;
  position: relative;
}
.nav-item {
  flex: 1;
  padding: 6px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 10px;
  color: var(--color-text-muted);
  border: none;
  background: none;
  transition: color 200ms ease-out;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  font-weight: 400;
  position: relative;
}
.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background 200ms ease-out, box-shadow 200ms ease-out;
  margin-bottom: 1px;
}
.nav-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.78;
  transition: opacity 200ms ease-out;
}
.nav-icon svg { width: 100%; height: 100%; display: block; }
.nav-label {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}
.nav-item.active            { color: var(--color-cream); }
.nav-item.active .nav-icon  { opacity: 1; }
.nav-item.active .nav-dot   {
  background: var(--color-cream);
  box-shadow: 0 0 10px var(--color-cream-glow);
}
.nav-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 22px);
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 8px var(--color-accent-glow);
  line-height: 1;
}

/* ── LOGIN ── */
.login-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at top, rgba(255,107,26,0.08) 0%, transparent 60%), var(--color-bg);
  padding: 24px;
  gap: 28px;
}
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.login-app-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  color: var(--color-text);
  letter-spacing: var(--tracking-negative);
  line-height: 0.95;
}
.login-tagline {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
}
.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-tabs { display: flex; border-bottom: 1px solid var(--color-border); }
.ltab {
  flex: 1;
  padding: 10px;
  border: none;
  background: none;
  font-size: 11px;
  color: var(--color-text-dim);
  cursor: pointer;
  font-family: var(--font-body);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms ease-out, border-color 150ms ease-out;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 700;
}
.ltab.active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.auth-error {
  background: var(--color-accent-dim);
  border: 1px solid rgba(255,107,26,0.35);
  color: #ffab7a;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: var(--size-small);
  line-height: var(--leading-normal);
}
.auth-error.success {
  background: rgba(48,209,88,0.12);
  border-color: rgba(48,209,88,0.35);
  color: #7fe8a1;
}
.forgot-link {
  align-self: center;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--size-small);
  padding: 4px 8px;
  margin-top: 2px;
  cursor: pointer;
  transition: color 120ms ease-out;
}
.forgot-link:hover { color: var(--color-accent); }
.login-fields { display: flex; flex-direction: column; gap: 10px; }
.login-input {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: var(--size-body);
  background: var(--color-surface-2);
  color: var(--color-text);
  outline: none;
  font-family: var(--font-body);
  transition: border-color 150ms ease-out;
}
.login-input::placeholder { color: var(--color-text-dim); }
.login-input:focus { border-color: var(--color-accent); }
.login-btn {
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
  letter-spacing: 0.02em;
}
.login-btn:hover { background: var(--color-accent-hot); box-shadow: 0 0 24px var(--color-accent-glow); }
.login-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.login-or { text-align: center; position: relative; margin: 2px 0; }
.login-or::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}
.login-or span {
  background: var(--color-surface);
  padding: 0 12px;
  font-size: 10px;
  color: var(--color-text-dim);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
}
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: var(--size-small);
  color: var(--color-text);
  background: var(--color-surface-2);
  cursor: pointer;
  font-family: var(--font-body);
  width: 100%;
  font-weight: 600;
  transition: background 150ms ease-out;
}
.google-btn:hover { background: var(--color-surface-3); }

/* Apple sign-in button — Apple's Human Interface Guidelines say the
   button should match the rest of the auth UI tonally rather than
   force Apple's black/white look. We follow the Google button style
   so both providers feel like equal options. */
.apple-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: var(--size-small);
  color: var(--color-text);
  background: var(--color-surface-2);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  margin-top: 8px;
}
.apple-btn:hover { background: var(--color-surface-3); }

/* Legal links beneath the sign-in card — required to be visible
   pre-signup by Apple, and a good idea generally. */
.login-legal {
  margin-top: 14px;
  padding: 8px 4px 0;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-dim);
  line-height: 1.5;
}
.login-legal a { color: var(--color-text-muted); text-decoration: none; }
.login-legal a:hover { color: var(--color-text); text-decoration: underline; }

/* ── UPLOAD PROGRESS BAR ── */
.upload-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 9px 14px 11px;
}
.upload-bar-inner { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.upload-name { font-family: var(--font-body); font-size: var(--t-size-caption); font-weight: var(--t-weight-medium); color: var(--color-text-muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-pct  { font-family: var(--font-body); font-size: var(--t-size-caption); font-weight: var(--t-weight-medium); color: var(--color-accent); }
.upload-track { height: 3px; background: var(--color-surface-3); overflow: hidden; border-radius: var(--radius-full); }
.upload-fill { height: 100%; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent-glow); transition: width 200ms ease-out; }
.upload-bar.upload-done .upload-fill { background: var(--color-success); box-shadow: 0 0 10px rgba(48,209,88,0.45); }
.upload-bar.upload-done .upload-pct  { color: var(--color-success); }
.upload-bar.upload-error .upload-fill { background: var(--color-danger); }
.upload-bar.upload-error .upload-pct  { color: var(--color-danger); }
.upload-bar.upload-error .upload-name { color: var(--color-danger); font-weight: 700; }
.upload-bar-inner { gap: 8px; }
.upload-retry-btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease-out;
}
.upload-retry-btn:active { transform: scale(0.94); }
.upload-dismiss-btn {
  background: transparent;
  border: none;
  color: var(--color-text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

/* ── CAMERA ── */
.cam-wrap { width: 100%; height: 100%; position: relative; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#camVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  /* Block the browser's native pinch-zoom so our pinch gesture wins. */
  touch-action: none;
  transform-origin: center center;
  transition: transform 80ms ease-out;
}
.cam-zoom-indicator {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.55);
  color: white;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cam-zoom-indicator.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Capture FX overlay. Sits above the viewfinder, holds the frozen
   captured frame + the single expanding ripple ring. transform +
   opacity only so the compositor can run it on the GPU at 60fps.
   Total visible duration: ~430ms (freeze 0-140ms, freeze fade
   140-430ms, ring fires 80-430ms). */
.cap-fx-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 30;
}
.cap-fx-freeze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  animation: cap-fx-freeze 440ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
.cap-fx-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: scale(1);
  will-change: transform, opacity;
  animation: cap-fx-ring 380ms cubic-bezier(0.2, 0, 0, 1) 60ms forwards;
}
@keyframes cap-fx-freeze {
  0%   { opacity: 1; }
  32%  { opacity: 1; }     /* hold the captured frame ~140ms */
  100% { opacity: 0; }
}
@keyframes cap-fx-ring {
  0%   { transform: scale(1);  opacity: 0; }
  12%  { opacity: 0.28; }
  100% { transform: scale(30); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-fx-freeze { animation: cap-fx-freeze-reduced 180ms linear forwards; }
  .cap-fx-ring   { animation: none; opacity: 0; }
}
@keyframes cap-fx-freeze-reduced {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.cam-placeholder {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255,107,26,0.06) 0%, #000 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.cam-placeholder svg { opacity: 0.28; }
.cam-placeholder svg rect,
.cam-placeholder svg circle { stroke: white !important; }
.cam-placeholder p { color: rgba(255,255,255,0.55); font-size: var(--size-caption); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600; }
.cam-upload-link {
  color: var(--color-accent);
  font-size: var(--size-caption);
  cursor: pointer;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 700;
}
.cam-top {
  position: absolute;
  top: 18px;
  left: 20px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  z-index: 10;
  letter-spacing: var(--tracking-negative);
}
.streak-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(20,20,22,0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.streak-num {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
}
.streak-lbl {
  font-family: var(--font-body);
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  margin-top: 3px;
  font-weight: 600;
}
.shutter-area { position: absolute; bottom: 26px; display: flex; align-items: center; justify-content: center; width: 100%; gap: 32px; z-index: 10; }
.shutter-btn {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  border: 3px solid white;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease-out;
  position: relative;
}
.shutter-btn:active { transform: scale(0.94); }
.shutter-inner { width: 54px; height: 54px; border-radius: var(--radius-full); background: white; }

/* Slow ambient pulse around the shutter — a quiet "the camera is
   alive and ready" cue. Two staggered rings so the pulse never
   fully empties; still cinematic, never neon. pointer-events:none
   so the rings never eat a tap. */
.shutter-btn::before,
.shutter-btn::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1.5px solid rgba(255,255,255,0.85);
  pointer-events: none;
  opacity: 0;
  animation: shutter-pulse 3.2s ease-out infinite;
}
.shutter-btn::after { animation-delay: 1.6s; }
@keyframes shutter-pulse {
  0%   { transform: scale(1);   opacity: 0; }
  6%   { transform: scale(1);   opacity: 0.7; }
  85%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shutter-btn::before,
  .shutter-btn::after { animation: none; }
}
.side-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: rgba(20,15,10,0.55);
  border: 1px solid rgba(237,227,209,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--color-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0;
  transition: background 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.side-btn.cam-side-active {
  background: rgba(212,197,160,0.22);
  color: var(--color-cream);
  border-color: rgba(212,197,160,0.55);
  box-shadow: 0 0 14px var(--color-cream-glow);
}

/* ── CAMERA ORIENTATION ──────────────────────────────────────────────
   The PWA itself is manifest-locked to portrait so the WebView never
   physically rotates. When the user tilts their phone to landscape,
   the .cam-wrap gets an `orient-landscape-*` class (set by
   onDeviceOrientation in app.js). We rotate the overlay UI so it
   reads upright relative to gravity, and we shift the shutter row
   to the side of the screen the bottom of the device is now facing —
   so the thumb-reach stays natural in either landscape grip. The
   <video> element itself is NOT rotated; cameras already feed an
   orientation-aware stream and the saved JPEG is rotated at capture
   time by the canvas rotate() in captureAndUpload.

   Smooth transitions cover the visual snap when the orientation
   class changes. */
.cam-wrap .cam-top,
.cam-wrap .shutter-area,
.cam-wrap .shutter-btn,
.cam-wrap .side-btn {
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              top 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              bottom 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              left 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              right 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              width 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Landscape-left: phone tilted so its left edge points down. The
   shutter belt anchors to the left edge of the (still-portrait)
   viewport so it sits at the "bottom" of the rotated device.
   !important is used so the override beats the existing
   .shutter-area's bottom:26px / width:100% baseline regardless of
   any later rules. */
.cam-wrap.orient-landscape-left .cam-top {
  top: auto !important;
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  transform: rotate(-90deg);
  transform-origin: left bottom;
}
/* Shutter belt stays pinned to the bottom in landscape too (per request):
   it no longer slides to the screen edge, and the buttons stay upright. The
   base .shutter-area rule (bottom:26px, full-width centered row) applies in
   every orientation, so the camera button never moves as the device tilts. */

/* Landscape-right: opposite tilt. Shutter belt on the right side. */
.cam-wrap.orient-landscape-right .cam-top {
  top: 20px !important;
  bottom: auto !important;
  left: auto !important;
  right: 20px !important;
  transform: rotate(90deg);
  transform-origin: right top;
}
/* (Landscape-right shutter belt also stays pinned to the bottom — see the
   landscape-left note above.) */

/* ── DARKROOM (Home / Roll) ── */
/* Darkroom intentionally stays dark in both light and dark themes
   (the film/photo-development metaphor). We achieve that by pinning
   the dark-theme tokens locally on .darkroom-screen — every child
   rule that reads var(--color-bg) / --color-text / etc. now gets
   the warm dark values regardless of [data-theme]. That swap is
   what brings Darkroom into the same visual family as the rest of
   the app instead of using literal #000 / white / cool greys. */
.darkroom-screen {
  --color-bg:            #0B0908;
  --color-surface:       #16120E;
  --color-surface-2:     #1F1A14;
  --color-surface-3:     #2A241C;
  --color-border:        rgba(237,227,209,0.06);
  --color-border-strong: rgba(237,227,209,0.14);
  --color-text:          #EDE3D1;
  --color-text-muted:    #9C9080;
  --color-text-dim:      #5C544A;

  height: 100%;
  overflow-y: auto;
  background: var(--color-bg);
  color: var(--color-text);
}
.darkroom-topbar {
  padding: var(--sp-16) var(--sp-16) var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--color-bg) 75%, transparent);
  z-index: 10;
}
.darkroom-title {
  font-family: var(--font-body);
  font-size: var(--t-size-page);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--t-track-page);
  color: var(--color-text);
}
.darkroom-hero {
  margin: var(--sp-4) var(--sp-16) var(--sp-16);
  padding: var(--sp-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.darkroom-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 80% 0%, var(--color-accent-glow), transparent 55%);
  pointer-events: none;
}
.darkroom-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-12); position: relative; z-index: 1; }
.darkroom-hero-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-size-section);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.darkroom-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  box-shadow: 0 0 10px rgba(111,181,138,0.55);
}
.darkroom-hero-sub {
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--t-size-sub);
  font-weight: 500;
  color: var(--color-text);
  opacity: 0.7;
  letter-spacing: var(--t-track-normal);
}
.darkroom-hero-count {
  width: 54px;
  height: 62px;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, #1d3a52 0%, #2a1d4a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: white;
  letter-spacing: var(--tracking-tight);
}

/* Big glowing "Hold to develop" button */
.hold-btn {
  position: relative;
  margin-top: var(--sp-16);
  width: 100%;
  padding: var(--sp-16) var(--sp-16);
  border-radius: var(--radius-md);
  border: none;
  background: radial-gradient(ellipse at center, #FF8534 0%, #FF6B1A 55%, #E8550E 100%);
  color: white;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 8px 32px rgba(255,107,26,0.45),
    0 0 60px rgba(255,107,26,0.30);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.hold-btn:active { transform: scale(0.985); }
.hold-btn.holding {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 12px 44px rgba(255,107,26,0.55),
    0 0 80px rgba(255,107,26,0.45);
}
.hold-btn[disabled] { opacity: 0.55; cursor: default; box-shadow: none; }
.hold-btn-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: rgba(255,255,255,0.16);
  transition: width 60ms linear;
  pointer-events: none;
}
.hold-btn-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hold-btn-icon {
  width: 22px;
  height: 22px;
  border: 1.5px dashed rgba(255,255,255,0.9);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: white;
}

.dr-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-24) var(--sp-16) var(--sp-12);
}
.dr-section-title {
  font-family: var(--font-body);
  font-size: var(--t-size-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.dr-section-date {
  font-family: var(--font-body);
  font-size: var(--t-size-sub);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--t-track-normal);
  color: var(--color-text);
  opacity: 0.7;
  margin-top: 4px;
}
.dr-select {
  position: absolute;
  right: var(--sp-16);
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
}

.dr-tile {
  margin: 0 var(--sp-16) var(--sp-12);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  position: relative;
  cursor: pointer;
}
.dr-tile img { width: 100%; height: auto; display: block; }
.dr-tile.undeveloped img { filter: brightness(0.22) saturate(0.18) blur(10px); }
.dr-tile-caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
}
.dr-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
}
.dr-btn {
  flex: 1;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 11px 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.dr-btn-discard { background: transparent; color: var(--color-text-muted); border-color: var(--color-border-strong); }
.dr-btn-discard:hover { background: var(--color-surface); color: var(--color-text); }
.dr-btn-archive {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.dr-btn-archive:hover { background: var(--color-surface-3); border-color: var(--color-accent); color: var(--color-accent); }
.dr-btn-post { background: var(--color-accent); color: var(--color-bg); box-shadow: 0 0 16px var(--color-accent-glow); }
.dr-btn-post:hover { background: var(--color-accent-hot); }

/* Developed-photo carousel — horizontal scroll-snap so multiple
   developed snaps don't pile up as a long vertical list. Each slide is
   full-width and snaps into place; mobile swipes naturally, desktop
   uses trackpad/shift-scroll. Hidden scrollbar on all platforms. */
.dr-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dr-carousel::-webkit-scrollbar { display: none; }
.dr-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Darkroom → Archive. Horizontal swipeable Polaroid stack, newest
   first. Tap the active card to open the swipe viewer (existing
   journal viewer handles full-screen + delete). */
.archive-stage {
  padding: 14px 0 20px;
  overflow: hidden;
}
.archive-track {
  display: flex;
  gap: 18px;
  padding: 36px calc(50% - 116px) 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.archive-track::-webkit-scrollbar { display: none; }

/* Polaroid card. White paper, thicker bottom strip for the caption,
   stable ±2° tilt set inline via --ap-rot. Drop-shadow gives it the
   "pinned on top" feel against the dark Darkroom. */
.archive-polaroid {
  flex: 0 0 232px;
  scroll-snap-align: center;
  background: #FAFAF7;
  border-radius: 3px;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 22px 44px rgba(0,0,0,0.55),
    0 8px 18px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(0,0,0,0.04);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: scale(0.86) rotate(var(--ap-rot, 0deg));
  opacity: 0.5;
  transition:
    transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity   220ms ease-out,
    box-shadow 220ms ease-out;
}
.archive-polaroid.is-active {
  transform: scale(1) rotate(var(--ap-rot, 0deg));
  opacity: 1;
  box-shadow:
    0 32px 60px rgba(0,0,0,0.6),
    0 10px 22px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(0,0,0,0.06);
}
.archive-polaroid:active { transform: scale(0.98) rotate(var(--ap-rot, 0deg)); }

.archive-polaroid .ap-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  overflow: hidden;
  border-radius: 1px;
}
.archive-polaroid .ap-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.archive-polaroid .ap-caption {
  text-align: center;
  padding: 14px 6px 6px;
  color: #1A1410;
  font-family: 'Caveat', 'Snell Roundhand', 'Bradley Hand', cursive;
  line-height: 1.05;
}
.archive-polaroid .ap-date {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.archive-polaroid .ap-theme {
  font-size: 13px;
  color: #6B5F4E;
  font-weight: 400;
  margin-top: 3px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 4px 16px 0;
}
.archive-dots .ap-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-dim);
  opacity: 0.45;
  transition: opacity 180ms ease-out, transform 180ms ease-out, background 180ms ease-out;
}
.archive-dots .ap-dot.active {
  background: var(--color-accent);
  opacity: 1;
  transform: scale(1.5);
}

@media (prefers-reduced-motion: reduce) {
  .archive-polaroid { transition: opacity 180ms ease-out; }
}

/* legacy dev-* classes — mapped to new look in case anything still references them */
.dev-card { background: var(--color-surface); margin: 10px 16px 0; border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: hidden; }
.dev-img-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
.dev-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-img.developing { filter: brightness(0.22) saturate(0.18) blur(10px); }
.dev-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; }
.dev-label { font-family: var(--font-body); font-size: var(--t-size-tiny); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-caps); text-transform: uppercase; color: var(--color-accent); }
.dev-time  { font-family: var(--font-body); font-size: var(--t-size-display); font-weight: var(--t-weight-bold); line-height: var(--t-lh-tight); letter-spacing: var(--t-track-display); color: white; margin-top: 4px; }
.dev-progress { height: 3px; background: var(--color-surface-3); overflow: hidden; }
.dev-progress-fill { height: 100%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent-glow); transition: width 400ms linear; }
.dev-actions { display: flex; gap: 8px; padding: 12px; background: var(--color-surface); }
.dev-btn { flex: 1; font-family: var(--font-body); font-size: var(--t-size-button); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-caps); text-transform: uppercase; padding: 11px 0; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; }
.dev-btn-discard { background: transparent; color: var(--color-text-muted); border-color: var(--color-border-strong); }
.dev-btn-post { background: var(--color-accent); color: white; box-shadow: 0 0 16px var(--color-accent-glow); }

/* ── FEED / LIST SCREENS ── */
.feed-screen { height: 100%; overflow-y: auto; background: var(--color-bg); }
.feed-topbar {
  background: var(--color-bg);
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 15;
}
.feed-title {
  font-family: var(--font-body);
  font-size: var(--t-size-page);
  font-weight: 700;
  letter-spacing: var(--t-track-page);
  line-height: 1.05;
  color: var(--color-text);
}
.feed-count { font-family: var(--font-body); font-size: var(--t-size-caption); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-normal); color: var(--color-text-muted); }
.feed-empty {
  padding: 44px 24px;
  text-align: center;
  font-size: var(--size-small);
  color: var(--color-text-dim);
  line-height: var(--leading-normal);
}

/* ── NOTIFICATIONS ── */
.notif-bell {
  position: relative;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  font-family: var(--font-body);
  color: var(--color-text-muted);
}
.notif-bell:hover { background: var(--color-surface-3); color: var(--color-text); }
.notif-bell svg { width: 18px; height: 18px; display: block; }

/* Feed refresh button — same shape as the bell. */
.feed-refresh-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.feed-refresh-btn:hover { background: var(--color-surface-3); color: var(--color-text); }
.feed-refresh-btn svg { width: 18px; height: 18px; display: block; }
.feed-refresh-btn.spinning svg { animation: feed-spin .8s linear infinite; }

/* Pull-to-refresh indicator (height driven by JS as you drag). */
.feed-ptr {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-dim);
}
.feed-ptr-icon { font-size: 20px; line-height: 1; display: block; transition: transform .15s var(--ease-standard); }
.feed-ptr.ready .feed-ptr-icon { transform: rotate(180deg); }
.feed-ptr.loading .feed-ptr-icon { animation: feed-spin .8s linear infinite; }
@keyframes feed-spin { to { transform: rotate(360deg); } }
.notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: var(--color-accent);
  color: white;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 8px var(--color-accent-glow);
}

.notif-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 150ms ease-out;
}
.notif-row:hover { background: var(--color-surface); }
.notif-row.unread {
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  padding-left: 16px;
}
.notif-avatar { width: 38px; height: 38px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; border: 1px solid var(--color-border-strong); }
.notif-avatar-fallback { background: var(--color-surface-3); color: var(--color-text); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-family: var(--font-body); font-size: var(--t-size-body); font-weight: var(--t-weight-medium); line-height: var(--t-lh-normal); color: var(--color-text); }
.notif-time { font-family: var(--font-body); font-size: var(--t-size-micro); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-caps-wide); text-transform: uppercase; color: var(--color-text-dim); margin-top: 3px; }
.notif-thumb { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; border: 1px solid var(--color-border); }

.notif-toast {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 24px var(--color-accent-glow);
  z-index: 900;
  cursor: pointer;
  transform: translateY(-140%);
  opacity: 0;
  transition: transform 220ms ease-out, opacity 200ms ease-out;
}
.notif-toast.show { transform: translateY(0); opacity: 1; }
.notif-toast-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; }
.notif-toast-avatar-fallback { background: var(--color-accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.notif-toast-text { font-size: var(--size-small); line-height: var(--leading-normal); flex: 1; }

/* ── SPOT CARDS ── */
.spot-card {
  background: var(--color-surface);
  margin: var(--sp-12) var(--sp-16) 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: opacity var(--dur-normal) var(--ease-standard), filter var(--dur-normal) var(--ease-standard);
}
/* "Reposted from @user" chip — appears above the image on feed cards
   and inside the post-detail body for reposted posts. Tapping it
   navigates to the original post. */
.repost-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: color 120ms ease-out, background 120ms ease-out;
}
.repost-chip:hover { color: var(--color-accent); background: var(--color-surface-3); }
.repost-chip b { color: var(--color-text); font-weight: 700; }

.spot-img {
  width: 100%;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #000;
}
.spot-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  padding: 24px 14px 12px;
}
.spot-location {
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.mine-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--color-accent);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  box-shadow: 0 0 12px var(--color-accent-glow);
}
.spot-footer { padding: 12px 14px; display: flex; align-items: center; gap: 11px; }
.spot-user { font-family: var(--font-body); font-size: var(--t-size-body); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-snug); letter-spacing: var(--t-track-tight); color: var(--color-text); text-transform: capitalize; }
.spot-time { font-family: var(--font-body); font-size: var(--t-size-micro); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-caps-wide); text-transform: uppercase; color: var(--color-text-dim); margin-top: 3px; }
.spot-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.spot-act {
  font-size: var(--size-small);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  font-family: var(--font-body);
  transition: color 150ms ease-out;
  font-weight: 500;
}
.spot-act:hover { color: var(--color-accent); }
.spot-act.liked { color: var(--color-accent); }

/* ── FRIENDS TAB ── */
.friends-screen { height: 100%; overflow-y: auto; background: var(--color-bg); }
.f-topbar {
  background: var(--color-bg);
  padding: var(--sp-16) var(--sp-16) var(--sp-8);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-12);
}
.f-title { font-family: var(--font-body); font-size: var(--t-size-page); font-weight: 700; line-height: 1.05; letter-spacing: var(--t-track-page); color: var(--color-text); }
.f-search { padding: var(--sp-12) var(--sp-16) var(--sp-4); background: var(--color-bg); }
.search-wrap { position: relative; }
.search-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 11px 14px 11px 38px;
  font-size: var(--t-size-sub);
  background: var(--color-surface-2);
  color: var(--color-text);
  outline: none;
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.search-input::placeholder { color: var(--color-text-dim); }
.search-input:focus { border-color: var(--color-border-strong); background: var(--color-surface-3); }
.s-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-dim);
  pointer-events: none;
}
svg.s-icon { display: block; }
/* The friends search wrapper has asymmetric padding (top --sp-12, bottom
   --sp-4), so the icon's top:50% lands above the input's true centre.
   Nudge it down by half the padding difference to sit dead-centre. */
.f-search .s-icon { top: calc(50% + (var(--sp-12) - var(--sp-4)) / 2); }
/* Small uppercase eyebrow — "MY FRIENDS · 23", "ADD NEW FRIENDS".
   Distinct from .t-section (the big "Today's Theme" header) per the
   2026-05 audit. */
.sec-label {
  font-family: var(--font-body);
  font-size: var(--t-size-tiny);
  font-weight: var(--t-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--t-track-caps);
  color: var(--color-text-muted);
  padding: var(--sp-24) var(--sp-16) var(--sp-8);
}
.f-row {
  background: var(--color-surface);
  margin: 0 var(--sp-16) var(--sp-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  padding: var(--sp-12) var(--sp-16);
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}
.f-name { font-family: var(--font-body); font-size: var(--t-size-body); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-snug); letter-spacing: var(--t-track-tight); color: var(--color-text); }
.f-sub  { font-family: var(--font-body); font-size: var(--t-size-caption); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-tight); color: var(--color-text-muted); margin-top: 3px; }
.streak-pill {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border: 1px solid rgba(255,107,26,0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  white-space: nowrap;
  font-weight: 500;
}
.add-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
  white-space: nowrap;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.add-btn:hover { background: var(--color-accent); color: white; box-shadow: 0 0 14px var(--color-accent-glow); }
.add-btn.added { border-color: var(--color-border-strong); color: var(--color-text-dim); cursor: default; }
.add-btn.added:hover { background: transparent; color: var(--color-text-dim); box-shadow: none; }
.add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.add-btn.pending { border-color: var(--color-border-strong); color: var(--color-text-muted); }
.add-btn.pending:hover { background: transparent; color: var(--color-danger); border-color: var(--color-danger); box-shadow: none; }
.add-btn.danger { border-color: var(--color-border-strong); color: var(--color-text-muted); }
.add-btn.danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: white; box-shadow: none; }
.f-row-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.icon-btn:hover { background: var(--color-danger); border-color: var(--color-danger); color: white; }

/* Friends-tab header — title left, streak + requests icon right.
   Search bar lives in its own row below so the header stays tight
   on narrow phones. The .f-topbar grid is defined in the FRIENDS
   TAB block above. */
.f-topbar-actions { display: inline-flex; align-items: center; gap: 8px; }
.f-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: 5px 12px 5px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}
.f-requests-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.f-requests-btn:hover { background: var(--color-surface-3); color: var(--color-text); }
.f-requests-btn:active { transform: scale(0.94); }
.f-requests-ico { width: 18px; height: 18px; display: block; }
.f-requests-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--color-bg);
}
.f-search { grid-column: 1 / -1; }

/* Rich friend row — avatar w/ status dot, name + activity sub-line,
   right-side thumbnail or chip, chevron. Whole row is clickable;
   handled by data-click-action on the wrapper. */
/* Simple-list friend row — avatar | name + activity | time-ago.
   No thumbnail, no chevron. Whole row is clickable (data-click-action
   on the wrapper) and routes to the friend's profile. */
.f-row-rich {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.f-row-rich:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.f-row-rich:active { transform: scale(0.995); }

.f-row-av { width: 40px; height: 40px; flex-shrink: 0; }
.f-row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.f-row-activity {
  font-family: var(--font-body);
  font-size: var(--t-size-cap);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: var(--t-track-tight);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-act-hl {
  color: var(--color-accent);
  font-weight: 600;
}

.f-row-time {
  font-family: var(--font-body);
  font-size: var(--t-size-cap);
  font-weight: 500;
  color: var(--color-text-dim);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Friend-requests bottom sheet — reuses the .edit-sheet chrome.
   No special styles needed beyond what edit-overlay/edit-sheet
   already give us; tighten the rows a touch. */
.friend-reqs-sheet .f-row { margin-bottom: 8px; }

/* ── PROFILE TAB ── */
.profile-screen { height: 100%; overflow-y: auto; background: var(--color-bg); display: flex; flex-direction: column; }
.profile-hero {
  background: var(--color-surface);
  background-size: cover;
  background-position: center;
  padding: 32px 20px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
/* When a banner image is set, overlay a dark gradient so the avatar,
   name, handle, bio, and stats stay legible over anything. */
.profile-hero.has-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.60) 100%);
  pointer-events: none;
}
.profile-hero.has-banner > * { position: relative; }
.profile-hero.has-banner .p-name,
.profile-hero.has-banner .p-handle,
.profile-hero.has-banner .p-bio,
.profile-hero.has-banner .stat-n { color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.profile-hero.has-banner .stat-l { color: rgba(255,255,255,0.85); }
.profile-hero.has-banner .stats-row { border-top-color: rgba(255,255,255,0.18); }
.profile-hero.has-banner .stat + .stat { border-left-color: rgba(255,255,255,0.18); }
.p-avatar {
  width: 82px;
  height: 82px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  transition: opacity 150ms ease-out;
  border: 2px solid var(--color-border-strong);
}
.p-avatar:hover { opacity: 0.85; }
.p-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); display: block; }
/* ── PROFILE HERO ─────────────────────────────────────────────────────
   Cinematic, image-first layout. The banner dominates the top 65vh
   with a soft dark gradient at the bottom that carries the image
   into the page surface (no hard cutoff). The avatar floats near
   the lower-center of the banner, overlapping that gradient zone.
   Below, a centered identity block: name, handle, inline stats. */
.hero-banner {
  position: relative;
  width: 100%;
  height: 82vh;
  min-height: 460px;
  background-color: var(--color-surface-2);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Empty-banner fallback so the hero never looks like a missing image. */
.hero-banner:not(.has-image) {
  background-image: linear-gradient(135deg, var(--color-surface-3) 0%, var(--color-surface) 100%);
}
/* Long, slow fade across the lower half of the banner. The image
   carries most of the way down with a soft gradient; the page-bg
   color only reaches at the very last pixel so there's effectively
   no solid black band before the content. */
.hero-banner.has-image::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(11,9,8,0) 0%, rgba(11,9,8,0.15) 55%, rgba(11,9,8,0.45) 82%, rgba(11,9,8,0.80) 96%, var(--color-bg) 100%);
  pointer-events: none;
}

/* Avatar floats near the lower-center of the banner. Sits above the
   gradient pseudo-element via z-index. */
.hero-avatar {
  position: absolute;
  left: 50%;
  bottom: calc(18% - 14px);
  transform: translateX(-50%);
  width: 92px;
  height: 92px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  border: 3px solid var(--color-accent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 22px var(--color-accent-glow);
  z-index: 2;
  cursor: pointer;
  overflow: hidden;
  transition: transform 150ms ease-out, opacity 150ms ease-out;
}
.hero-avatar:active { transform: translateX(-50%) scale(0.97); }
.hero-avatar img,
.hero-avatar .p-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Corner buttons — white SVG glyphs with a soft drop shadow.
   Specific positioning is inlined per-button via style="" for cache
   resilience; this rule supplies the hover/active polish. */
.hero-corner { transition: opacity 150ms ease-out, transform 150ms ease-out; }
.hero-corner:hover  { opacity: 0.85; }
.hero-corner:active { transform: scale(0.92); }
.hero-banner:not(.has-image) .hero-corner {
  color: var(--color-text);
  filter: none;
}

/* Centered identity block immediately under the banner. Tight
   spacing — posts/content begin right after. */
.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 24px 18px;
  text-align: center;
}
.hero-name {
  font-family: var(--font-body);
  font-size: var(--t-size-page);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--t-track-page);
  color: var(--color-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-handle {
  font-family: var(--font-body);
  font-size: var(--t-size-caption);
  font-weight: var(--t-weight-medium);
  letter-spacing: var(--t-track-tight);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.hero-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: var(--t-size-stat);
  font-weight: var(--t-weight-medium);
  letter-spacing: var(--t-track-tight);
  color: var(--color-text);
  flex-wrap: wrap;
  justify-content: center;
}
.hero-stat-friends {
  background: none;
  border: 0;
  padding: 4px 6px;
  margin: 0 -2px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 150ms ease-out;
}
.hero-stat-friends:hover { background: var(--color-surface-2); }
.hero-stat-lbl { color: var(--color-text-muted); margin-left: 2px; font-weight: var(--t-weight-medium); }
.hero-stat-sep { color: var(--color-text-dim); user-select: none; }
.hero-stat-streak { display: inline-flex; align-items: baseline; gap: 4px; }
.hero-stat-fire   { font-size: 14px; line-height: 1; align-self: center; }
.hero-bio {
  font-family: var(--font-body);
  font-size: var(--t-size-caption);
  font-weight: var(--t-weight-medium);
  line-height: var(--t-lh-normal);
  letter-spacing: var(--t-track-normal);
  color: var(--color-text-muted);
  margin-top: 10px;
  max-width: 360px;
}

/* Tabs float directly under the meta block — no dividing line.
   Only the active tab gets a small underline indicator. */
.hero-tabs {
  display: flex;
  width: 100%;
  margin-top: 4px;
}
.hero-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 0 12px;
  font-family: var(--font-body);
  font-size: var(--t-size-micro);
  font-weight: var(--t-weight-semibold);
  letter-spacing: var(--t-track-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
  cursor: pointer;
  position: relative;
  transition: color 120ms ease-out;
}
.hero-tab:hover { color: var(--color-text-muted); }
.hero-tab.active { color: var(--color-text); }
.hero-tab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}
.hero-tab-content { padding-top: 6px; }

/* Breathing room above Log Out so it doesn't crowd the content. */
.me-logout { margin-top: 40px; }
/* Edit Profile → Profile Banner preview + action buttons. */
.banner-preview {
  width: 100%;
  aspect-ratio: 16 / 6;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
  background-color: var(--color-surface-2);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.banner-empty-lbl {
  font-size: var(--size-small);
  color: var(--color-text-dim);
  font-family: var(--font-body);
}
.banner-actions { display: flex; gap: 8px; align-items: center; }
.banner-clear-btn {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}
.banner-clear-btn:hover { color: var(--color-danger); border-color: var(--color-danger); }
.p-name   { font-family: var(--font-body); font-size: var(--t-size-page); font-weight: 700; line-height: 1.05; letter-spacing: var(--t-track-page); color: var(--color-text); margin-top: 6px; }
.p-handle { font-family: var(--font-body); font-size: var(--t-size-caption); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-tight); color: var(--color-text-muted); }
.p-bio    { font-family: var(--font-body); font-size: var(--t-size-caption); font-weight: var(--t-weight-medium); line-height: var(--t-lh-normal); color: var(--color-text-muted); text-align: center; padding: 0 20px; margin-top: 2px; }
.stats-row { display: flex; width: 100%; margin-top: 18px; border-top: 1px solid var(--color-border); }
.stat { flex: 1; text-align: center; padding: 14px 0; }
.stat + .stat { border-left: 1px solid var(--color-border); }
.stat-n { font-family: var(--font-body); font-size: var(--t-size-card-title); font-weight: var(--t-weight-bold); line-height: var(--t-lh-snug); letter-spacing: var(--t-track-tight); color: var(--color-text); padding: 2px 0; }
.stat-l { font-family: var(--font-body); font-size: var(--t-size-tiny); font-weight: var(--t-weight-semibold); text-transform: uppercase; letter-spacing: var(--t-track-caps); color: var(--color-text-muted); margin-top: 5px; }
.streak-card {
  background: var(--color-surface);
  margin: 14px 16px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.s-info-n { font-family: var(--font-body); font-size: var(--t-size-card-title); font-weight: var(--t-weight-bold); line-height: var(--t-lh-snug); letter-spacing: var(--t-track-tight); color: var(--color-text); padding: 2px 0; }
.s-info-l { font-family: var(--font-body); font-size: var(--t-size-tiny); font-weight: var(--t-weight-semibold); text-transform: uppercase; letter-spacing: var(--t-track-caps); color: var(--color-text-muted); margin-top: 4px; }
.private-card {
  margin: 24px 16px 8px;
  padding: 28px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.private-lock {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
}
.private-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-label);
  color: var(--color-text);
  letter-spacing: var(--tracking-negative);
  margin-bottom: 6px;
}
.private-sub {
  font-size: var(--size-small);
  color: var(--color-text-dim);
  line-height: var(--leading-normal);
}

/* ── DAILY PROMPT POLL CARD (Darkroom) ────────────────────────── */
.poll-card {
  margin: var(--sp-12) var(--sp-16) var(--sp-8);
  padding: var(--sp-16);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.poll-card.poll-active {
  background: linear-gradient(180deg, rgba(232,201,160,0.06), rgba(232,201,160,0.01));
  border-color: rgba(232,201,160,0.22);
}
.poll-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-size-caption);
  color: var(--color-text-muted);
  letter-spacing: var(--t-track-tight);
  font-weight: var(--t-weight-medium);
  text-transform: capitalize;
}
.poll-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.poll-choice {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: background 180ms ease-out, border-color 180ms ease-out, transform 120ms ease-out, color 180ms ease-out;
  text-transform: lowercase;
}
.poll-choice:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.poll-choice:active { transform: translateY(0); }
.poll-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  margin-top: 4px;
  text-transform: lowercase;
}

/* Unified poll card — voting states (2 + 3). State 1 stays under
   .poll-card.poll-closed.theme-feed-card with existing styling. */
.poll-card.poll-voting {
  border-color: rgba(232,201,160,0.30);
  background: linear-gradient(180deg, rgba(232,201,160,0.05), transparent);
  gap: 10px;
}
.poll-card.poll-voting .poll-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-cream);
}
.poll-countdown {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: lowercase;
  font-weight: 400;
}
.poll-countdown b {
  color: var(--color-text);
  font-weight: 500;
}
.poll-context {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  text-transform: lowercase;
}
.poll-context b {
  color: var(--color-text);
  font-weight: 500;
  font-style: normal;
}
.poll-card.poll-voting-voted .vote-bars {
  margin-top: 2px;
}

.poll-bar {
  position: relative;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.poll-bar.mine { border-color: var(--color-accent); }
.poll-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--color-accent-dim);
  transition: width 300ms ease-out;
}
.poll-bar.mine .poll-bar-fill { background: var(--color-accent); opacity: 0.55; }
.poll-bar-lbl {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  letter-spacing: var(--tracking-negative);
  z-index: 1;
  text-transform: lowercase;
}
.poll-bar-pct {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  z-index: 1;
}

.poll-winner {
  font-family: var(--font-body);
  font-weight: var(--t-weight-bold);
  font-size: var(--t-size-screen-title);
  color: var(--color-text);
  letter-spacing: var(--t-track-title);
  line-height: var(--t-lh-snug);
  text-transform: capitalize;
}

/* Pre-snapshot placeholder for the theme card. Keeps the slot the same
   height as the loaded card so layout doesn't shift, and dims the text
   so the user perceives "loading" instead of "wrong word". */
.poll-card.poll-skeleton .poll-winner {
  color: var(--color-text-muted);
  opacity: 0.45;
}
.poll-tally {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}
.poll-tally-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-small);
  color: var(--color-text-dim);
  font-family: var(--font-body);
}
.poll-tally-row.win { color: var(--color-text); font-weight: 700; }
.poll-tally-row span:first-child { text-transform: lowercase; }

.voters-empty {
  padding: 16px 4px;
  color: var(--color-text-dim);
  text-align: center;
  font-size: 13px;
  font-family: var(--font-mono);
}

.setting-row {
  background: var(--color-surface);
  margin: 0 var(--sp-16) var(--sp-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  padding: var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.setting-row:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.setting-lbl { font-family: var(--font-body); font-size: var(--t-size-body); font-weight: var(--t-weight-medium); color: var(--color-text); }
.setting-arr { font-family: var(--font-body); font-size: var(--t-size-body); font-weight: var(--t-weight-regular); color: var(--color-text-dim); }

/* ── FRIEND STRIP (horizontal row on profile) ── */
.fs-label {
  padding: 14px 18px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}
.fs-strip {
  display: flex;
  gap: 14px;
  padding: 10px 16px 18px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 104px;
}
.fs-strip::-webkit-scrollbar { display: none; }
.fs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 62px;
  height: 86px;
  cursor: pointer;
  transition: transform 150ms ease-out;
}
.fs-item:active { transform: scale(0.96); }
.fs-name {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
  max-width: 62px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── JOURNAL GRID (stored under /gallery/ for legacy reasons) ── */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 6px 12px;
  background: transparent;
}
.gallery-add-tile {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out, color 150ms ease-out, background 150ms ease-out;
  font-family: var(--font-body);
}
.gallery-add-tile:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-dim); }
.gallery-add-plus { font-size: 26px; line-height: 1; font-weight: 300; }
.gallery-add-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.gallery-tile {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-surface);
  position: relative;
  transition: opacity 150ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
  touch-action: manipulation;
}
.gallery-tile:active { opacity: 0.8; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
/* Owner long-pressed the tile — it lifts above the grid and follows
   the pointer via transform set in JS. Pointer events stay on so the
   move listener can track the gesture. */
.gallery-tile.dragging {
  z-index: 20;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55);
  opacity: 0.95;
  /* Drop the transform transition while dragging so the tile tracks
     the finger 1:1 instead of lagging through an easing curve. */
  transition: box-shadow 120ms ease-out;
  will-change: transform;
  transform: translateZ(0);
}
/* Highlight the tile currently under the pointer while dragging, so
   the user knows where they're about to drop. */
.gallery-tile.drop-target {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Full-screen enlarge for tapped profile avatars (Instagram-style). */
.avatar-zoom {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  z-index: 600;
  cursor: pointer;
  animation: fadeIn 180ms ease-out;
}

/* Full-photo zoom used by the Darkroom click-to-expand. Same overlay
   pattern as .avatar-zoom but contains the full image (no circle
   crop, no aspect lock) so the user sees what they shot. */
.photo-zoom {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  cursor: pointer;
  animation: fadeIn 180ms ease-out;
}
.photo-zoom-img {
  max-width: 96%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  display: block;
}
.photo-zoom-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.18);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.avatar-zoom-img {
  width: min(82vw, 460px);
  height: min(82vw, 460px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.avatar-zoom-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: white;
  letter-spacing: var(--tracking-negative);
}
.avatar-zoom-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.18);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gallery-viewer {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 600;
  display: flex;
  flex-direction: column;
  animation: fadeIn 180ms ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.gallery-viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: white;
}
.gallery-viewer-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}
.gallery-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.gv-close, .gv-delete {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--color-border-strong);
  color: white;
  border-radius: var(--radius-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  transition: background 150ms ease-out;
}
.gv-close:hover { background: rgba(255,255,255,0.14); }
.gv-delete { color: var(--color-danger); border-color: rgba(255,69,58,0.35); }
.gv-delete:hover { background: rgba(255,69,58,0.14); }
.gv-counter {
  color: white;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  padding: 0 12px;
}

/* Journal swipe carousel — each slide is a viewport-wide page. */
.jv-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jv-track::-webkit-scrollbar { display: none; }
.jv-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.jv-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* ── EDIT PROFILE OVERLAY ── */
.edit-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.72); display: flex; align-items: flex-end; z-index: 400; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.edit-sheet {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.55);
  /* Sheet caps below 100vh so the top never tucks behind the iOS
     notch. The .edit-scroll child handles internal scrolling — the
     sheet itself doesn't scroll, which keeps the header fixed at
     the top without relying on position:sticky (unreliable inside
     a flex+overflow parent on iOS Safari PWA). */
  max-height: 85vh;
  overflow: hidden;
}
/* Scrollable content area. Padding lives here so the sticky-ish
   header above can span the full sheet width without negative
   margin gymnastics. */
.edit-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Fixed at the top of the sheet (the sheet itself doesn't scroll,
   .edit-scroll does), so the × is always reachable without any
   position:sticky quirks. Border + matching sheet bg mark the seam. */
.edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--color-surface);
  padding: 16px 20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--color-border);
}
.edit-title { font-family: var(--font-body); font-size: var(--t-size-card-title); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-snug); letter-spacing: var(--t-track-tight); color: var(--color-text); }
.close-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-body);
}
.close-btn:hover { background: var(--color-surface-3); color: var(--color-text); }
.edit-avatar-row { display: flex; align-items: center; gap: 14px; }
.edit-avatar { width: 58px; height: 58px; border-radius: var(--radius-full); background: var(--color-surface-3); color: var(--color-text); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; overflow: hidden; flex-shrink: 0; border: 1px solid var(--color-border-strong); }
.edit-photo-btn {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: background 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}
.edit-photo-btn:hover { background: var(--color-accent); color: white; box-shadow: 0 0 14px var(--color-accent-glow); }
.edit-field label { display: block; font-size: 10px; font-weight: 700; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 6px; }
.edit-field input, .edit-field textarea {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-size: var(--size-body);
  background: var(--color-surface-2);
  color: var(--color-text);
  outline: none;
  font-family: var(--font-body);
  transition: border-color 150ms ease-out;
}
.edit-field input:focus, .edit-field textarea:focus { border-color: var(--color-accent); }
.edit-field textarea { resize: none; height: 68px; line-height: var(--leading-normal); }
.edit-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-dim);
  line-height: var(--leading-normal);
  font-family: var(--font-body);
}
.save-btn {
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
}
.save-btn:hover { background: var(--color-accent-hot); box-shadow: 0 0 20px var(--color-accent-glow); }

/* Danger Zone — destructive actions sit at the very bottom of the
   Edit Profile sheet, visually separated from the rest so they can't
   be tapped by accident. */
.edit-danger {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.edit-danger label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-danger);
  margin-bottom: 10px;
}
.edit-danger-btn {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-danger);
  background: transparent;
  color: var(--color-danger);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.edit-danger-btn:hover:not(:disabled) {
  background: var(--color-danger);
  color: white;
}
.edit-danger-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.edit-legal {
  margin-top: 24px;
  padding: 12px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-dim);
}
.edit-legal a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.edit-legal a:hover { color: var(--color-text); text-decoration: underline; }

/* ── THEME TOGGLE (segmented control in edit profile sheet) ── */
.theme-toggle {
  display: flex;
  gap: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.theme-opt {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.theme-opt.active { background: var(--color-accent); color: white; }
.theme-opt:hover:not(.active) { color: var(--color-text); }

/* ── CIRCULAR UPLOAD PROGRESS ── */
.shutter-btn { position: relative; }
.circ-progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; }
.circ-track { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 3; }
.circ-fill { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 226.19; stroke-dashoffset: 226.19; transform: rotate(-90deg); transform-origin: 41px 41px; transition: stroke-dashoffset 250ms ease-out, stroke 200ms ease-out; filter: drop-shadow(0 0 6px var(--color-accent-glow)); }
.circ-progress.circ-done .circ-fill  { stroke: var(--color-success); filter: drop-shadow(0 0 8px rgba(48,209,88,0.7)); }
.circ-progress.circ-error .circ-fill { stroke: var(--color-danger); filter: drop-shadow(0 0 8px rgba(255,69,58,0.7)); }

/* ── AFFORDANCES ── */
.clickable { cursor: pointer; transition: opacity 150ms ease-out; }
.clickable:active { opacity: 0.7; }
.spot-user-wrap { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; cursor: pointer; transition: opacity 150ms ease-out; }
.spot-user-wrap:active { opacity: 0.7; }
.f-row-main { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; cursor: pointer; transition: opacity 150ms ease-out; }
.f-row-main:active { opacity: 0.7; }

/* ── DETAIL VIEW ── */
.detail-screen { height: 100%; overflow: hidden; background: var(--color-bg); display: flex; flex-direction: column; }
.detail-topbar {
  background: var(--color-bg);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}
.back-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 0 2px 0;
  font-family: var(--font-body);
  line-height: 1;
  transition: background 150ms ease-out;
}
.back-btn:hover { background: var(--color-surface-2); }
.detail-title { font-family: var(--font-body); font-size: var(--t-size-screen-title); font-weight: var(--t-weight-bold); line-height: var(--t-lh-snug); letter-spacing: var(--t-track-title); color: var(--color-text); text-transform: lowercase; flex: 1; min-width: 0; }
.detail-scroll { flex: 1; overflow-y: auto; }

/* Kebab menu in the profile topbar — opens the action sheet with
   Add/Accept/Remove/Block/Report. Same dimensions as .back-btn so
   the two icons mirror each other across the title. */
.profile-menu-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  transition: background 150ms ease-out;
}
.profile-menu-btn:hover { background: var(--color-surface-2); }

/* ── CINEMATIC POST DETAIL ──────────────────────────────────────────
   Image dominates. Topbar floats over the photo with a soft fade so
   nothing competes with the shot. Below the photo, a small monospace
   strip carries the only info that's allowed to be immediately
   visible — time, location, heart count. Scroll reveals the rest. */
.detail-topbar.detail-topbar-cinema {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: linear-gradient(to bottom, rgba(11,9,8,0.72) 0%, rgba(11,9,8,0) 100%);
  border-bottom: none;
  padding: 14px 14px 22px;
}
.detail-screen.detail-cinema { position: relative; }
.detail-screen.detail-cinema .back-btn {
  background: rgba(20,15,10,0.55);
  border-color: rgba(237,227,209,0.18);
  color: var(--color-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.detail-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(237,227,209,0.18);
  background: rgba(20,15,10,0.55);
  color: var(--color-text);
  font-size: 14px;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.pd-icon-btn:hover { background: rgba(40,30,18,0.7); }
.pd-icon-btn:disabled { opacity: 0.5; cursor: default; }
.pd-icon-btn.pd-icon-danger { color: var(--color-danger); border-color: rgba(226,117,102,0.4); }

.post-detail-img.post-detail-img-cinema {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  background: #000;
  display: block;
  position: relative;
}
.post-detail-img.post-detail-img-cinema img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}
.detail-scroll-cinema { background: var(--color-bg); }

.pd-minimal-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}
.pd-min-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.1;
}
.pd-min-time { color: var(--color-text); }
.pd-min-loc {
  color: var(--color-text-muted);
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-detail-body.post-detail-body-cinema {
  background: var(--color-bg);
  border-top: none;
  padding: 18px 18px 24px;
  gap: 14px;
}

/* ── POST DETAIL ── */
.post-detail-img { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #000; }
.post-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-detail-body {
  background: var(--color-surface);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--color-border);
}
.pd-user-row { display: flex; align-items: center; gap: 11px; cursor: pointer; transition: opacity 150ms ease-out; }
.pd-user-row:active { opacity: 0.7; }
.pd-location { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 700; }
.pd-archived-banner {
  margin-top: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.pd-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--size-small);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  line-height: 1.4;
}
.pd-tags-lbl { color: var(--color-text-dim); }
.pd-tag {
  color: var(--color-accent);
  font-weight: 700;
  cursor: pointer;
  transition: color 120ms ease-out;
}
.pd-tag:hover { color: var(--color-accent-hot); }

/* Pre-post sheet — shown between tapping Post in Darkroom and the
   actual upload. Collects a location string and a multi-select set
   of friends to tag. Inherits edit-sheet visuals for consistency. */
.pp-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: flex-end;
  z-index: 450;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pp-sheet {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.55);
  -webkit-overflow-scrolling: touch;
}
.pp-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}
.pp-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Pre-post sheet bottom CTA row — Cancel sits next to Post so users
   have an obvious way back to the developing roll without dismissing
   the app. The X icon in the header is still wired but easy to miss. */
.pp-cta-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.pp-cta-row .save-btn { flex: 1; }
.pp-cta-secondary {
  flex: 0 0 auto;
  background: transparent;
  color: var(--color-ink-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: border-color 150ms ease-out, color 150ms ease-out;
}
.pp-cta-secondary:hover {
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}
.pp-tag-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 600;
  transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.pp-tag-chip:hover { border-color: var(--color-accent); }
.pp-tag-chip.on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
  box-shadow: 0 0 12px var(--color-accent-glow);
}
.pp-tag-name { white-space: nowrap; }
.pd-actions { display: flex; gap: 14px; border-top: 1px solid var(--color-border); padding: 12px 0 4px; }

/* ── USER PROFILE ACTION ── */
.profile-action-row { width: 100%; padding: 14px 20px 20px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.profile-action {
  width: 100%;
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
}
.profile-action:hover { background: var(--color-accent-hot); box-shadow: 0 0 20px var(--color-accent-glow); }
.profile-action.added { background: transparent; color: var(--color-text); border: 1px solid var(--color-border-strong); }
.profile-action.added:hover { background: var(--color-danger); border-color: var(--color-danger); color: white; box-shadow: none; }
.profile-action.pending { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border-strong); }
.profile-action.pending:hover { background: var(--color-danger); border-color: var(--color-danger); color: white; box-shadow: none; }
.profile-action.danger { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border-strong); }
.profile-action.danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: white; box-shadow: none; }
.profile-action-row.split { display: flex; gap: 8px; }
.profile-action-row.split .profile-action { flex: 1; }
.profile-action:disabled { cursor: default; }

/* ── USER POSTS GRID ── */
.user-posts-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 6px 12px; background: transparent; }
.user-posts-month-label {
  font-family: var(--font-body);
  font-size: var(--t-size-tiny);
  font-weight: var(--t-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--t-track-caps);
  color: var(--color-text-muted);
  padding: var(--sp-16) var(--sp-12) var(--sp-4);
}
/* Collapsible month header — older months. Chevron rotates 90° when
   the month expands, swapping the right-pointing › for a down-pointing
   indicator. Full-width button so the entire row is tappable. */
.user-posts-month-head {
  width: calc(100% - 28px);
  margin: 0 14px;
  padding: 18px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
}
.user-posts-month-head:hover { color: var(--color-text); }
.upm-count { color: var(--color-text-dim); font-weight: 500; margin-left: 4px; }
.upm-arrow {
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-dim);
  transition: transform 200ms ease-out;
  display: inline-block;
}
.upm-arrow.open { transform: rotate(90deg); }
.up-tile { aspect-ratio: 4 / 5; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 150ms ease-out; background: var(--color-surface); border-radius: var(--radius-md); }
.up-tile:active { opacity: 0.75; }
.up-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── REACTIONS ── */
.rx-summary-inline { display: flex; gap: 5px; align-items: center; }
.rx-chip { font-size: 11px; color: var(--color-text-muted); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 3px 8px; line-height: 1.2; font-weight: 500; font-family: inherit; }
button.rx-chip { cursor: pointer; transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; }
.rx-chip.mine { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-dim); }
.rx-chip.mine:hover { background: var(--color-surface-3); }
.rx-chip.mine:active { transform: scale(0.94); }
.rx-picker { border-top: 1px solid var(--color-border); padding: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.rx-summary { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; align-items: center; }
.rx-empty { font-size: 12px; color: var(--color-text-dim); }
.rx-trigger-row { display: flex; align-items: center; gap: 10px; position: relative; }
.rx-trigger {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
  font-weight: 600;
}
.rx-trigger:hover { background: var(--color-surface-3); color: var(--color-text); }
.rx-trigger.has-reaction { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-dim); }
.rx-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  max-width: 280px;
}
.rx-opt { border: none; background: none; font-size: 20px; width: 32px; height: 32px; border-radius: var(--radius-full); cursor: pointer; padding: 0; line-height: 1; transition: background 150ms ease-out, transform 150ms ease-out; }
.rx-opt:hover { background: var(--color-surface-3); transform: scale(1.12); }
.rx-opt.active { background: var(--color-accent-dim); }
/* "+" tile sits at the end of the quick-pick row and opens an inline
   text input — typing/keyboard-picking any emoji becomes the reaction. */
.rx-opt-more {
  font-size: 18px;
  color: var(--color-text-muted);
  background: var(--color-surface-3);
}
.rx-opt-more:hover { color: var(--color-text); background: var(--color-surface); }
.rx-custom-input {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 18px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  width: 110px;
  outline: none;
}
.rx-custom-input:focus { border-color: var(--color-accent); }
.rx-custom-input::placeholder { color: var(--color-text-dim); font-size: 12px; }

/* ── COMMENTS ── */
.cmt-list { display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
.cmt-row { display: flex; gap: 11px; align-items: flex-start; }
.cmt-av { flex-shrink: 0; }
.cmt-body { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: baseline; gap: 8px; }
.cmt-name { font-family: var(--font-body); font-size: var(--t-size-body); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-tight); color: var(--color-text); cursor: pointer; }
.cmt-name:hover { color: var(--color-accent); }
.cmt-time { font-family: var(--font-body); font-size: var(--t-size-micro); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-caps-wide); text-transform: uppercase; color: var(--color-text-dim); }
.cmt-del { margin-left: auto; border: none; background: none; color: var(--color-text-dim); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); }
.cmt-del:hover { background: rgba(255,69,58,0.12); color: var(--color-danger); }
.cmt-text { font-size: var(--size-small); color: var(--color-text); line-height: var(--leading-normal); margin-top: 4px; word-wrap: break-word; }

.cmt-row.is-reply { margin-left: 38px; }
.cmt-row.is-reply .cmt-name { font-size: 13px; }
.cmt-mention { color: var(--color-accent); font-weight: 700; margin-right: 2px; }
.cmt-actions { margin-top: 4px; display: flex; gap: 14px; align-items: center; }
.cmt-reply-btn {
  border: none; background: none; padding: 2px 0;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: var(--color-text-dim); cursor: pointer;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  transition: color 120ms ease-out;
}
.cmt-reply-btn:hover { color: var(--color-accent); }
.cmt-react-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 2px 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease-out, transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cmt-react-btn:active { transform: scale(0.86); }
.cmt-react-btn .ico-heart {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: fill 160ms ease-out, stroke 160ms ease-out;
}
.cmt-react-btn.mine {
  color: var(--color-accent);
}
.cmt-react-btn.mine .ico-heart {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}
.cmt-media {
  margin-top: 8px;
  max-width: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  cursor: zoom-in;
}
.cmt-media img { display: block; width: 100%; height: auto; }
.cmt-media.is-gif { position: relative; }
.cmt-media.is-gif::after {
  content: 'GIF';
  position: absolute; bottom: 6px; right: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.55); color: white;
  font-family: var(--font-mono);
}

.cmt-compose-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.cmt-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--size-small);
  color: var(--color-text-muted);
}
.cmt-chip-label { flex: 1; min-width: 0; }
.cmt-chip-label b { color: var(--color-text); font-weight: 700; }
.cmt-chip-x {
  border: none; background: var(--color-surface-3);
  width: 22px; height: 22px; border-radius: var(--radius-full);
  color: var(--color-text-muted); cursor: pointer;
  font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cmt-chip-x:hover { background: var(--color-danger); color: white; }
.cmt-pending-img {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.cmt-compose { display: flex; gap: 6px; padding: 10px 12px; align-items: center; }
.cmt-attach {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
  font-family: var(--font-body);
}
.cmt-attach:hover { background: var(--color-surface-3); color: var(--color-text); border-color: var(--color-accent); }
.cmt-attach-icon { font-size: 16px; line-height: 1; }
.cmt-attach-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; }
.cmt-attach.is-gif { width: auto; padding: 0 10px; }

.cmt-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-size: var(--size-small);
  background: var(--color-surface-2);
  outline: none;
  font-family: var(--font-body);
  color: var(--color-text);
}
.cmt-input::placeholder { color: var(--color-text-dim); }
.cmt-input:focus { border-color: var(--color-accent); }
.cmt-send {
  border: none;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
  flex-shrink: 0;
}
.cmt-send:hover { background: var(--color-accent-hot); box-shadow: 0 0 14px var(--color-accent-glow); }
.cmt-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── GIF PICKER (Tenor) ────────────────────────────────────────── */
.gif-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: flex-end;
  z-index: 500;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gif-sheet {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-height: 70vh;
  display: flex; flex-direction: column;
  padding: 14px 14px 18px;
  gap: 10px;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.55);
}
.gif-header { display: flex; align-items: center; gap: 10px; }
.gif-search {
  flex: 1;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-size: var(--size-small);
  background: var(--color-surface-2);
  color: var(--color-text);
  outline: none;
  font-family: var(--font-body);
}
.gif-search:focus { border-color: var(--color-accent); }
.gif-search::placeholder { color: var(--color-text-dim); }
.gif-powered {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.gif-grid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-bottom: 8px;
}
.gif-tile {
  aspect-ratio: 1 / 1;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--color-border);
  transition: border-color 120ms ease-out, transform 120ms ease-out;
}
.gif-tile:hover { border-color: var(--color-accent); transform: scale(0.98); }
.gif-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── INSTALL BANNER (PWA add-to-home-screen) ── */
.install-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  background: linear-gradient(180deg, rgba(255,107,26,0.12), rgba(255,107,26,0.04));
  border-bottom: 1px solid rgba(255,107,26,0.25);
  position: relative;
  flex-shrink: 0;
  z-index: 6;
  animation: installBannerIn 280ms ease-out;
}
@keyframes installBannerIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.install-banner-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  box-shadow: 0 0 16px var(--color-accent-glow);
}
.install-banner-icon svg { width: 16px; height: 16px; display: block; }
.install-banner-body { flex: 1; min-width: 0; }
.install-banner-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: white;
  letter-spacing: var(--tracking-negative);
  line-height: 1.15;
}
.install-banner-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.35;
}
.install-banner-sub strong { color: white; font-weight: 600; }
.install-banner-cta {
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
}
.install-banner-cta:hover { background: var(--color-accent-hot); box-shadow: 0 0 14px var(--color-accent-glow); }
.install-banner-close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 0 2px 0;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.install-banner-close:hover { background: var(--color-surface-2); color: var(--color-text); }

/* Notification-permission banner reuses install-banner layout but uses a
   slightly warmer gradient + a bell icon so users can tell them apart
   when both happen to show at the same time. */
.notif-perm-banner {
  background: linear-gradient(180deg, rgba(255,107,26,0.18), rgba(255,107,26,0.06));
  border-bottom: 1px solid rgba(255,107,26,0.32);
}
.notif-perm-banner + .install-banner {
  /* When stacked, add a hairline separator between the two bars */
  border-top: 1px solid var(--color-border);
}

/* ── ONBOARDING ── */
.onb-screen {
  height: 100%;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 34px 20px 20px;
}
.onb-screen-list { padding: 24px 0 0; }
.onb-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.onb-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
}
.onb-headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: var(--tracking-negative);
  color: white;
  line-height: 1.05;
}
.onb-sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.onb-list-top { padding: 0 20px 14px; border-bottom: 1px solid var(--color-border); }
.onb-counter {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border: 1px solid rgba(255,107,26,0.3);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.onb-list-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: white;
  letter-spacing: var(--tracking-negative);
}
.onb-list { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
.onb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--color-border);
}
.onb-row-body { flex: 1; min-width: 0; }
.onb-row-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: white;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 8px;
}
.onb-row-handle { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-dim); margin-top: 3px; }
.onb-new-badge {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--color-success);
  color: #061a0d;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.onb-add-btn {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.onb-add-btn:hover { background: var(--color-accent); color: white; }
.onb-add-btn.added { background: var(--color-accent); color: white; border-color: var(--color-accent); }
.onb-add-btn.added:hover { background: transparent; color: var(--color-accent); }

.onb-invite-card {
  margin: 10px 20px 0;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.onb-invite-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: white;
  letter-spacing: var(--tracking-negative);
}
.onb-invite-sub { font-size: 13px; color: var(--color-text-muted); margin-top: 3px; margin-bottom: 12px; }
.onb-invite-btn {
  width: 100%;
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.onb-invite-btn:hover { background: var(--color-accent); color: white; }

.onb-cta-row {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.onb-cta-primary {
  width: 100%;
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 15px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  box-shadow: 0 6px 24px var(--color-accent-glow);
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
}
.onb-cta-primary:hover { background: var(--color-accent-hot); box-shadow: 0 8px 32px var(--color-accent-glow); }
.onb-cta-skip {
  width: 100%;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  padding: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 150ms ease-out;
}
.onb-cta-skip:hover { color: white; }
.onb-cta-primary.is-disabled {
  background: var(--color-bg-elev);
  color: var(--color-text-dim);
  box-shadow: none;
  cursor: not-allowed;
}
.onb-cta-primary.is-disabled:hover { background: var(--color-bg-elev); box-shadow: none; }

/* ── ONBOARDING: share-with-two gate ── */
.onb-share-progress {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 28px 0 8px;
}
.onb-share-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
  transition: background 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out;
}
.onb-share-dot.filled {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.1);
}
.onb-share-counter {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 22px;
}
.onb-share-btn {
  display: block;
  margin: 0 auto;
  padding: 14px 32px;
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  box-shadow: 0 6px 24px var(--color-accent-glow);
  transition: background 150ms ease-out, box-shadow 150ms ease-out, transform 80ms ease-out;
}
.onb-share-btn:hover { background: var(--color-accent-hot); box-shadow: 0 8px 32px var(--color-accent-glow); }
.onb-share-btn:active { transform: scale(0.97); }

/* ── DAILY PROMPT BANNER (on camera) ── */
.cam-prompt {
  position: absolute;
  top: 54px;
  left: 20px;
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: rgba(20,20,22,0.6);
  border: 1px solid rgba(255,107,26,0.35);
  border-radius: var(--radius-sm);
  padding: 6px 11px 7px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cam-prompt-label {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
}
.cam-prompt-word {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--color-accent);
  font-weight: 700;
}

/* ── DAILY PROMPT TOAST (morning greeting) ── */
.daily-prompt-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--color-accent);
}
.daily-prompt-toast-inner { flex: 1; min-width: 0; }
.daily-prompt-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  font-weight: 700;
}
.daily-prompt-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: white;
  line-height: 1.1;
  letter-spacing: var(--tracking-negative);
  margin-top: 2px;
  text-transform: uppercase;
}
.daily-prompt-cta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* ── MEMORIES (On This Day) ── */
.memories-row {
  display: flex;
  gap: 10px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.memories-row::-webkit-scrollbar { display: none; }
.memory-card {
  flex: 0 0 140px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.memory-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.memory-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.8));
  pointer-events: none;
}
.memory-label {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: white;
  font-weight: 700;
  z-index: 1;
}

/* ── PRINT BUTTON (post detail topbar) ── */
.print-btn {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: background 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
  white-space: nowrap;
}
.print-btn:hover { background: var(--color-accent); color: white; box-shadow: 0 0 14px var(--color-accent-glow); }
.print-btn:disabled { border-color: var(--color-border-strong); color: var(--color-text-dim); background: transparent; cursor: default; box-shadow: none; }
.print-btn + .delete-post-btn { margin-left: 8px; }

/* ── POST DELETION ── */
.post-menu-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6px;
  font-family: var(--font-body);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.post-menu-btn:hover { background: var(--color-accent); box-shadow: 0 0 14px var(--color-accent-glow); }
.delete-post-btn {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,69,58,0.3);
  background: var(--color-surface-2);
  color: var(--color-danger);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--font-body);
  transition: background 150ms ease-out;
}
.delete-post-btn:hover { background: rgba(255,69,58,0.14); }

/* ================================================================ *
 * FEED REDESIGN
 *  - clean header (title + bell)
 *  - today's-theme card with voting countdown chip
 *  - posted-friends row with "Add yours" stub
 *  - vote-for-tomorrow card
 *  - 2-up grid of today's entries
 * ================================================================ */

.feed-topbar.feed-topbar-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-16) var(--sp-16) var(--sp-8);
  border-bottom: none;
}
.feed-topbar.feed-topbar-clean .feed-title {
  font-family: var(--font-body);
  font-size: var(--t-size-page);
  font-weight: 700;
  letter-spacing: var(--t-track-page);
  line-height: 1.05;
  margin: 0;
}
/* Today's-theme card on Feed: word on the left, countdown chip on the right. */
.poll-card.theme-feed-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.theme-card-main { flex: 1; min-width: 0; }
.theme-vote-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.theme-vote-chip b {
  color: var(--color-text);
  font-weight: 700;
}
.theme-vote-chip svg { color: var(--color-accent); }

/* Posted-friends block. */
.feed-posted-block {
  padding: 6px 16px 4px;
}
.feed-posted-count {
  font-family: var(--font-body);
  font-size: var(--t-size-sub);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  opacity: 0.7;
  letter-spacing: var(--t-track-normal);
  margin-bottom: 10px;
}
.feed-avatar-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.feed-avatar-row::-webkit-scrollbar { display: none; }

/* Rectangular story cards — one per friend who posted today. Unseen
   cards glow cream/amber; tapping opens that friend's per-day stream
   so you swipe through their posts. */
.feed-avatar-row {
  padding: 4px 0 8px;
  gap: 10px;
}
.feed-add-yours,
.feed-story-card {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 138px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: block;
  transition: transform 140ms ease-out, border-color 200ms ease-out, box-shadow 220ms ease-out;
  font-family: inherit;
  color: inherit;
}
.feed-add-yours:active,
.feed-story-card:active { transform: scale(0.97); }

.feed-add-yours {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(232,139,69,0.04) 6px 7px),
    var(--color-surface);
  border: 1px dashed var(--color-accent);
}
.feed-add-yours-plus {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--color-accent);
}
.feed-add-yours-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.feed-story-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
}
.feed-story-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.02) 38%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.feed-story-name {
  position: absolute;
  left: 6px;
  bottom: 5px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: lowercase;
}
.feed-story-card.unseen {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-dim), 0 0 18px var(--color-accent-glow);
}
.feed-story-card.viewed {
  opacity: 0.72;
}
.feed-story-card.viewed:hover { opacity: 1; }
.feed-story-card.empty {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.feed-story-card.empty:hover { filter: brightness(1.1); }
.feed-story-card.empty .feed-story-img {
  opacity: 0.32;
  filter: grayscale(0.55) brightness(0.85);
}
.feed-story-card.empty .feed-story-shade {
  background: linear-gradient(to top, rgba(11,9,8,0.78) 0%, rgba(11,9,8,0.45) 55%, rgba(11,9,8,0.25) 100%);
}
.feed-story-card.empty .feed-story-name {
  color: var(--color-text-muted);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ── Pre-post sheet: caption + auto-located chip ── */
.pp-caption-input {
  resize: none;
  min-height: 56px;
  font-family: inherit;
  line-height: var(--leading-normal);
}
.pp-location-chip-wrap {
  margin-top: 8px;
  min-height: 28px;
}
.pp-loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--color-text);
  max-width: 100%;
}
.pp-loc-chip-pending {
  color: var(--color-text-dim);
  padding-right: 12px;
}
.pp-loc-clear {
  background: transparent;
  border: none;
  color: var(--color-text-dim);
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-loc-clear:hover { color: var(--color-text); background: var(--color-surface-3); }
.pp-loc-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: pp-spin 0.7s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* Caption display on feed grid card + post detail. */
.spot-caption {
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-grid .spot-footer { flex-wrap: wrap; }
.pd-caption {
  font-size: 14px;
  color: var(--color-text);
  line-height: var(--leading-normal);
  margin: 6px 0 4px;
}

/* App-style action buttons on feed cards: SVG icon + count, no
   chip background, two visual states for the heart (outline vs filled
   accent). Replaces the emoji-and-text chip that read as HTML. */
.spot-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px 4px;
  margin: 0;
  cursor: pointer;
  color: var(--color-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spot-act-btn:active { transform: scale(0.86); }
.spot-act-btn.is-hidden { display: none; }
.spot-act-btn .ico-cmt {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.spot-act-cmt-btn .ico-cmt {
  fill: none;
  stroke: var(--color-text-dim);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Long-press post-actions bottom sheet ──────────────────────── */
.post-actions-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: flex-end;
  z-index: 500;
  pointer-events: none;
  transition: background 220ms ease-out;
}
.post-actions-overlay.open {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.post-actions-sheet {
  width: 100%;
  background: var(--color-surface);
  border-top-left-radius: var(--radius-lg, 18px);
  border-top-right-radius: var(--radius-lg, 18px);
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.post-actions-overlay.open .post-actions-sheet {
  transform: translateY(0);
}
.post-action {
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease-out;
}
.post-action:hover  { background: var(--color-surface-2); }
.post-action:active { background: var(--color-surface-3); transform: scale(0.99); }
.post-action-ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.post-action-danger {
  color: var(--color-danger, #ff453a);
}
.post-action-cancel {
  margin-top: 8px;
  justify-content: center;
  font-weight: 700;
  color: var(--color-text-dim);
  background: var(--color-surface-2);
}

/* SW update toast styles removed — banner retired in favour of
   silent skipWaiting updates. */

/* ── Block list ────────────────────────────────────────────────── */
.profile-block-link {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease-out;
}
.profile-block-link:hover { color: var(--color-danger, #ff453a); }

.blocked-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.blocked-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}
.blocked-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blocked-unblock {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ── Offline indicator ─────────────────────────────────────────── */
.offline-bar {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 69, 58, 0.94);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translateY(-100%);
  transition: transform 220ms ease-out;
}
.offline-bar.show { transform: translateY(0); }
.offline-bar-ico {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ── Streak chip in Feed header ────────────────────────────────── */
.feed-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Streak chip — identical shape on Feed and Friends headers per the
   design-system unification. */
.feed-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: 5px 12px 5px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.feed-streak-chip:hover  { background: var(--color-surface-3); }
.feed-streak-chip:active { transform: scale(0.94); }
.feed-streak-emoji { font-size: 13px; }

/* ── Theme poll voter detail ───────────────────────────────────── */
/* Modal lifts off the bottom edge so all four corners are rounded
   (the shared .edit-overlay anchors it to flex-end). Centered with
   a side margin so the card reads as a self-contained sheet.
   Chrome uses app tokens so the modal adapts to light/dark theme;
   per-option warm/cool accents stay literal for visual identity. */
.theme-poll-sheet {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  margin: 0 12px 16px;
  width: calc(100% - 24px);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

.theme-poll-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.theme-poll-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  flex: 1;
  min-width: 0;
}
.theme-poll-eyebrow-ico { font-size: 12px; line-height: 1; }
.theme-poll-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}
.theme-poll-close:hover { background: var(--color-surface-3); color: var(--color-text); }

.theme-poll-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Per-option color theming. Each variant sets --opt-color (solid
   accent) + --opt-grad (gradient for badge + bar). All chrome on
   the card reads from those custom props so swapping variants is a
   one-class change. The warm variant intentionally uses the app's
   amber accent so option A blends with the rest of the UI; cool
   stays violet as the contrast pair. */
.theme-poll-option {
  --opt-color: var(--color-text-muted);
  --opt-grad: linear-gradient(135deg, var(--color-surface-3), var(--color-surface-2));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.theme-poll-option--warm {
  --opt-color: var(--color-accent);
  --opt-grad: linear-gradient(135deg, var(--color-accent-hot), var(--color-accent));
  box-shadow: 0 0 0 1px var(--color-accent-dim), 0 12px 28px var(--color-accent-glow);
}
.theme-poll-option--cool {
  --opt-color: #A78BFA;
  --opt-grad: linear-gradient(135deg, #C4B5FD, #7C3AED);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.22), 0 12px 28px rgba(124, 58, 237, 0.14);
}
.theme-poll-option.win::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid var(--opt-color);
  pointer-events: none;
}

.theme-poll-option-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.theme-poll-option-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--opt-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.theme-poll-option-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-text);
  text-transform: lowercase;
  letter-spacing: var(--tracking-negative);
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-poll-winner-badge {
  display: inline-block;
  margin-left: 6px;
  background: var(--opt-color);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-full);
  vertical-align: middle;
}
.theme-poll-option-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.theme-poll-pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--opt-color);
  line-height: 1;
  letter-spacing: var(--tracking-negative);
}
.theme-poll-votes {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-dim);
  letter-spacing: 0.04em;
}

.theme-poll-bar {
  position: relative;
  height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.theme-poll-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--opt-grad);
  transition: width 280ms ease-out;
  border-radius: var(--radius-full);
}

/* Voter strip — large circles with a small option-colored check
   overlay at the bottom-right, first name beneath. Wraps to a new
   row if there are more than fit on one line. */
.theme-poll-voters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-top: 2px;
}
.theme-poll-voters-loading {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-dim);
  padding: 4px 0 0;
}
.theme-poll-voter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  width: 60px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  color: inherit;
}
.theme-poll-voter:active { transform: scale(0.94); }
.theme-poll-voter-av {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  line-height: 0;
}
.theme-poll-voter-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--opt-color);
  color: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--color-surface);
}
.theme-poll-voter-check svg { width: 12px; height: 12px; display: block; }
.theme-poll-voter-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-poll-voter-more-av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.theme-poll-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-dim);
  text-align: center;
  padding-top: 2px;
  letter-spacing: 0.04em;
}
.theme-poll-empty {
  padding: 32px;
  text-align: center;
  font-family: var(--font-mono);
  color: var(--color-text-dim);
}

/* Post-detail "stream" nav: prev/next chevrons + counter overlay,
   shown when the user entered via a friend's avatar (stream of that
   friend's last-24h posts). Hidden in single-post detail. */
.post-stream-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease-out, transform 120ms ease-out;
}
.post-stream-nav:hover  { background: rgba(0, 0, 0, 0.65); }
.post-stream-nav:active { transform: translateY(-50%) scale(0.94); }
.post-stream-prev { left: 8px; }
.post-stream-next { right: 8px; }

.post-stream-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  z-index: 4;
}

/* Invisible tap zones over the photo — Instagram-stories gesture:
   left half = previous post in stream, right half = next post. The
   chevrons stay on top as the visual affordance; the tap zones sit
   below them so a chevron click still hits the chevron. */
.post-stream-tap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.post-stream-tap-prev { left: 0; }
.post-stream-tap-next { right: 0; }
.post-stream-nav { z-index: 3; }

/* Vote-for-tomorrow card. Lives in #voting-poll-slot. */
.vote-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 12px 16px 6px;
}
.vote-card.vote-card-voted { padding-bottom: 12px; }
.vote-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.vote-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6B5BFF 0%, #B154FF 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vote-card-icon svg { width: 18px; height: 18px; }
.vote-card-text { flex: 1; min-width: 0; }
.vote-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  letter-spacing: var(--tracking-negative);
}
.vote-card-sub {
  font-size: 12px;
  color: var(--color-text-dim);
  margin-top: 2px;
}
.vote-card-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  white-space: nowrap;
}
.vote-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vote-option {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.vote-option:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-3);
}
.vote-option:active { transform: translateY(1px); }
.vote-bars { display: grid; gap: 6px; }
.vote-bar {
  position: relative;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  overflow: hidden;
}
.vote-bar.mine { border-color: var(--color-accent); }
.vote-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--color-accent-dim);
  z-index: 0;
}
.vote-bar.mine .vote-bar-fill { background: var(--color-accent); opacity: 0.4; }
.vote-bar > .vote-bar-lbl,
.vote-bar > .vote-bar-pct { position: relative; z-index: 1; }
.vote-bar-pct { font-family: var(--font-mono); font-weight: 700; }

/* Section heading above the entries grid — Today's entries. */
.feed-entries-head {
  font-family: var(--font-body);
  font-size: var(--t-size-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text);
  padding: var(--sp-24) var(--sp-16) var(--sp-12);
}

/* Cinematic feed grid — masonry-style columns so each photo respects
   its native aspect ratio. The card chrome (user row, reactions,
   captions, badges) is hidden here so only the image + a small
   monospace timestamp in the corner survives. Tapping a card opens
   the post detail where the full metadata lives. */
.feed-grid {
  column-count: 2;
  column-gap: 8px;
  padding: 4px 16px 24px;
}
.feed-grid .spot-card {
  margin: 0 0 var(--sp-8);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  border-radius: var(--r-card);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Featured posts break out of the 2-col masonry and span the full
   feed width — about 1 in 4, picked deterministically from the post
   id (see isFeaturedFeedPost). Gives the grid a collage feel where
   landscapes and hero shots breathe instead of staying cramped at
   half-width. The column-span:all trick keeps the surrounding 2-col
   flow intact above and below. */
.feed-grid .spot-card.is-featured {
  column-span: all;
  -webkit-column-span: all;
  margin: 4px 0 12px;
  border-radius: 16px;
}
.feed-grid .spot-card.is-featured .spot-time-overlay {
  font-size: 11px;
  left: 12px;
  bottom: 10px;
}
.feed-grid .spot-img {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  position: relative;
  display: block;
  background: #000;
}
.feed-grid .spot-img img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  inset: auto !important;
}
.feed-grid .spot-overlay,
.feed-grid .mine-badge,
.feed-grid .repost-chip,
.feed-grid .spot-footer {
  display: none;
}
.spot-time-overlay {
  display: none;
}
.feed-grid .spot-time-overlay {
  display: block;
  position: absolute;
  left: 9px;
  bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(237,227,209,0.78);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 2;
}