/* OTHRSDE — global styles. Clean / minimal / edgy. */

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

:root {
  --bg-0: #0a0907;
  --bg-1: #141210;
  --bg-2: #1c1916;
  --bg-3: #26221d;
  --text-0: #fbf7f1;
  --text-1: rgba(251,247,241,0.58);
  --text-2: rgba(251,247,241,0.32);
  --text-3: rgba(251,247,241,0.14);
  --accent: #ff4a1f;
  --period: #ff4a1f;
  --accent-2: #f3f3f3;
  --accent-glow: rgba(255,74,31,0.32);
  --ember: #c5391a;
  --divider: rgba(251,247,241,0.07);
  --card: rgba(251,247,241,0.03);
  --card-2: rgba(251,247,241,0.06);
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --font-display: "Helvetica Neue", Helvetica, "Söhne", Arial, sans-serif;
  --font-ui: "Helvetica Neue", Helvetica, "Söhne", Arial, sans-serif;
  --font-mono: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-druk: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #050402;
  color: var(--text-0);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

button { font-family: inherit; }

body {
  min-height: 100vh;
  background: #050402;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── App-internal scrollbar (hidden) ──────────────────────────────────────── */
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Typography helpers ───────────────────────────────────────────────────── */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.h-display-roman {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* Druk Wide stand-in — Archivo at max (125%) width, scoped to carousel titles */
.h-druk {
  font-family: var(--font-druk);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.9;
}
/* Stacked title (Ai OS style): bold black + lighter sub */
.h-stack {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.h-stack .sub {
  display: block;
  color: var(--text-1);
  font-weight: 800;
}

.h-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: 0.02em;
}

.divider { background: var(--divider); height: 0.5px; width: 100%; }

/* Card surface — flat, no border by default */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
}

/* Accent pill button */
.btn-accent {
  background: var(--accent);
  color: var(--on-accent, #fff);
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-accent:hover { filter: brightness(1.08); }
.btn-solid {
  background: #fff;
  color: #000;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-ghost-sm {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}

/* Avatar — square-ish friendly (still round) */
.avatar {
  border-radius: 999px;
  background: #222;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.avatar.ring-live::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
}

/* Subtle press-down */
.tappable { transition: transform .12s ease, opacity .12s ease; cursor: pointer; }
.tappable:active { transform: scale(0.97); opacity: 0.85; }

/* Sheet animations */
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes overlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes screenIn {
  from { transform: translateX(4%); }
  to   { transform: translateX(0); }
}

.sheet { animation: sheetUp .32s cubic-bezier(.2,.8,.2,1) backwards; } /* no lingering transform — iOS draws the text cursor in the wrong spot inside transformed boxes */
/* Closing: slide back down + fade the backdrop (app.jsx adds these right before removing the screen) */
@keyframes sheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }
.sheet.sheet-out { animation: sheetDown .24s cubic-bezier(.4,0,1,1) both; }
.overlay-out { animation: overlayOut .24s ease both; pointer-events: none; }
.fade-in { animation: overlayFade .2s ease both; }
.screen-in { animation: screenIn .25s cubic-bezier(.2,.8,.2,1) backwards; }

/* Section title style — flat */
.section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 20px 12px;
}
.section-h .label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.025em;
}
.section-h .more {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-1);
  cursor: pointer;
}

/* Eyebrow */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-1);
  white-space: nowrap;
}

/* Live pulsing + blinking dot — accent-color tinted */
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: liveDot 1.6s ease-in-out infinite, liveBlink 1.6s steps(2, jump-none) infinite;
  margin-right: 6px; vertical-align: middle;
}

/* Red dot — "LIVE" signal, always red regardless of palette */
.dot-red {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #ff1a2e;
  box-shadow: 0 0 0 0 #ff1a2e;
  animation: dotRed 1.6s ease-in-out infinite, liveBlink 1.6s steps(2, jump-none) infinite;
  margin-right: 6px; vertical-align: middle;
}
@keyframes dotRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,26,46,0.45); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

/* Green dot — "fresh signal", neon green, pulse only (no blink) */
.dot-green {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #c5ff00;
  box-shadow: 0 0 0 0 #c5ff00;
  animation: dotGreen 1.6s ease-in-out infinite;
  margin-right: 6px; vertical-align: middle;
}
@keyframes dotGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197,255,0,0.45); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

@keyframes liveDot {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@keyframes liveBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

/* Signal-ring — hollow circle with pulsing halo, no blink */
.signal-ring {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: liveDot 1.6s ease-in-out infinite;
  margin-right: 6px; vertical-align: middle;
}

* { -webkit-tap-highlight-color: transparent; }

/* Mini player surface — translucent glass */
.mp-bg {
  background: rgba(20,20,20,0.45);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.10);
}

/* Equalizer bars */
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.eq i { display: block; width: 2px; background: var(--accent); border-radius: 1px; animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(1) { animation-delay: 0s;  height: 60%; }
.eq i:nth-child(2) { animation-delay: 0.2s; height: 100%; }
.eq i:nth-child(3) { animation-delay: 0.4s; height: 40%; }
.eq i:nth-child(4) { animation-delay: 0.1s; height: 80%; }
@keyframes eq {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

/* Waveform bars */
.wf { display: flex; gap: 2px; align-items: center; height: 32px; }
.wf i { display: block; width: 2px; border-radius: 1px; background: rgba(255,255,255,0.32); transition: background .15s ease; }
.wf i.played { background: var(--accent); }

/* Inputs */
.input {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid var(--divider);
  border-radius: var(--r-md);
  padding: 11px 14px;
  color: var(--text-0);
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  outline: none;
}
.input:focus { border-color: var(--accent); }

button:focus, input:focus, textarea:focus { outline: none; }

/* PWYW slider thumb */
.ppwy-slider {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px; background: rgba(10,9,7,0.18);
  border-radius: 999px; outline: none;
}
.ppwy-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #0a0907;
  box-shadow: 0 0 0 4px rgba(10,9,7,0.08), 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
}
.ppwy-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: #0a0907;
  box-shadow: 0 0 0 4px rgba(10,9,7,0.08), 0 4px 12px rgba(0,0,0,0.25);
}

.mono-mode {
  --accent: #b8b8b3;
  --accent-2: #e6e6e6;
  --accent-glow: rgba(184,184,179,0.32);
  --ember: #6b6963;
}

.marquee-track {
  display: inline-flex;
  gap: 32px;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Feed view toggle — animated attention stroke that traces the pill (thin) */
@property --feed-toggle-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.feed-toggle {
  position: relative;
  isolation: isolate;
}
/* Traveling comet of light around the perimeter */
.feed-toggle::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  padding: 1px;
  background: conic-gradient(from var(--feed-toggle-ang),
    transparent 0deg,
    transparent 215deg,
    color-mix(in oklab, var(--accent) 0%, transparent) 230deg,
    var(--accent) 300deg,
    color-mix(in oklab, var(--accent) 55%, #fff) 326deg,
    var(--accent) 348deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: feedToggleSpin 2.8s linear infinite;
  pointer-events: none;
  z-index: 2;
}
/* Soft static halo so the pill reads as "active / tap me" even between sweeps */
.feed-toggle::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
  pointer-events: none;
  z-index: 1;
}
@keyframes feedToggleSpin {
  to { --feed-toggle-ang: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-toggle::before { animation: none; }
}

/* Light-card placement (e.g. the Stash › Library/Shop toggle on the white card):
   a glowing lime comet needs darkness to read — on white it just looks like a
   stray green outline. So drop the always-on ring and use a crisp, deeper-green
   comet that reads as an intentional moving accent. */
.feed-toggle--light::after { display: none; }
.feed-toggle--light::before {
  padding: 1.5px;
  background: conic-gradient(from var(--feed-toggle-ang),
    transparent 0deg,
    transparent 232deg,
    color-mix(in oklab, var(--accent) 0%, transparent) 246deg,
    color-mix(in oklab, var(--accent) 78%, #0a3a00) 300deg,
    color-mix(in oklab, var(--accent) 55%, #0a3a00) 326deg,
    color-mix(in oklab, var(--accent) 78%, #0a3a00) 348deg,
    transparent 360deg);
}

/* Feed view toggle — light glints THROUGH the glyphs of the inactive label
   (background-clip:text) so the word itself appears to shine, not a block over it */
.feed-toggle__label {
  position: relative;
  display: inline-block;
}
.feed-toggle__label.is-inactive {
  /* base = the normal inactive color, with a brighter band swept through */
  background-image: linear-gradient(105deg,
    var(--text-1) 0%,
    var(--text-1) 38%,
    color-mix(in oklab, var(--text-0) 92%, transparent) 50%,
    var(--text-1) 62%,
    var(--text-1) 100%);
  background-size: 280% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: feedSheenSweep 4.2s ease-in-out infinite;
}
@keyframes feedSheenSweep {
  0%   { background-position: 150% 0; }
  /* quick glint, then a long rest before the next pass */
  16%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
/* stagger the second label so both don't glint in unison */
.feed-toggle__label.sheen-delay.is-inactive {
  animation-delay: 2.1s;
}
@media (prefers-reduced-motion: reduce) {
  .feed-toggle__label.is-inactive { animation: none; }
}

/* "Get full access" upsell card — animated accent stroke that traces the
   rounded rect to draw the eye until the user selects it */
@property --access-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.access-card {
  position: relative;
  isolation: isolate;
}
.access-card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 13px;
  padding: 2px;
  background: conic-gradient(from var(--access-ang),
    transparent 0deg,
    transparent 200deg,
    color-mix(in oklab, var(--accent) 0%, transparent) 220deg,
    var(--accent) 300deg,
    color-mix(in oklab, var(--accent) 50%, #fff) 328deg,
    var(--accent) 350deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: accessSpin 2.6s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* soft resting glow so the card reads as special between sweeps */
.access-card::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 13px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
  pointer-events: none;
  z-index: 0;
}
@keyframes accessSpin {
  to { --access-ang: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .access-card::before { animation: none; }
}

/* Multi-select check */
.dot-check {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--text-3);
  flex-shrink: 0;
}
.dot-check.on { background: var(--accent); border-color: var(--accent); }

/* ── Comments ── */
@keyframes cmFlash { 0% { background: var(--accent-18); } 100% { background: transparent; } }
.cm-flash { animation: cmFlash 1.6s ease-out; }
@keyframes cmShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.cm-gif-shimmer { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); animation: cmShimmer 1.8s linear infinite; }
@keyframes cmPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.cm-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; flex-shrink: 0; animation: cmPulse 1s ease-in-out infinite; }
@keyframes cmBar { 0%,100% { height: 4px; } 50% { height: 18px; } }
.cm-rec-bar { width: 2.5px; border-radius: 2px; background: var(--accent); flex-shrink: 0; animation: cmBar .7s ease-in-out infinite; }

/* Play button while a song is buffering */
.audio-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(0,0,0,0.2); border-top-color: #000;
              animation: audioSpin .7s linear infinite; display: inline-block; }
@keyframes audioSpin { to { transform: rotate(360deg); } }

/* Whole posts: no shrink-on-press (it read as the card caving in) — just open. */
.post-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }