/* Reels Archive design system: tokens, type scale, components and motion shared by every page. */
/* ==================== TOKENS ==================== */
:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --ink: #1C1B19;
  --ink-2: #57534E;
  --ink-3: #737069;
  --line: #E9E7E3;
  --line-strong: #D6D3CE;
  --hook: #FDF0D5;
  --hook-ink: #8A5300;
  --cta: #E3EEF8;
  --cta-ink: #23517A;

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --sidebar-w: 272px;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
}
::selection { background: var(--ink); color: #fff; }

/* ==================== TYPE SCALE ====================
   13 label · 15 meta/ui · 17 body · 19 reading · 24 quote/section · 40 page title */
.font-editorial { font-family: var(--serif); }
.label {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.t-meta { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.t-ui { font-size: 15px; line-height: 1.5; }
.t-body { font-size: 17px; line-height: 1.6; }
.t-read { font-family: var(--serif); font-size: 19px; line-height: 1.75; }
.t-quote { font-family: var(--serif); font-size: 21px; line-height: 1.32; letter-spacing: -0.005em; }
.t-title { font-family: var(--serif); font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; font-weight: 400; }
@media (min-width: 640px) {
  .t-quote { font-size: 24px; }
  .t-title { font-size: 40px; }
}
.ink { color: var(--ink); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }

/* Legacy utility floor: dynamic fragments must never render below 13px. */
html .font-mono-meta { font-family: var(--mono); }
html .text-\[9px\], html .text-\[10px\], html .text-\[11px\], html .text-xs { font-size: 13px; line-height: 1.45; }
html .text-sm { font-size: 15px; line-height: 1.5; }

/* ==================== COMPONENTS ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 10px;
  font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-sm { height: 36px; padding: 0 12px; border-radius: 8px; font-size: 14px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #333230; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: #F0EEEA; color: var(--ink); }
.btn-icon { width: 40px; padding: 0; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 16px; gap: 10px; }
button:not(:disabled):active, .btn:active { transform: scale(0.97); }
button:disabled { opacity: 0.6; cursor: progress; }

.field {
  width: 100%; height: 44px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line-strong);
  padding: 0 14px 0 40px; font-size: 15px; color: var(--ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field::placeholder { color: #8E8A83; }
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,27,25,0.08); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  background: #F0EEEA; color: var(--ink-2);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Filter groups: dark mono heading, regular-weight options, soft selection. */
.filter-group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px 8px; cursor: pointer;
}
.filter-group-toggle .label { color: var(--ink); font-weight: 600; }
.filter-group-toggle svg { transition: transform 200ms var(--ease-out); }
.filter-group-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.filter-item {
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 36px; padding: 0 10px; border-radius: 8px;
  font-size: 15px; color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.filter-item .num { font-size: 13px; color: var(--ink-3); }
.filter-item:hover { background: #F3F1ED; color: var(--ink); }
.filter-item[aria-pressed="true"] { background: #EDEAE4; color: var(--ink); font-weight: 600; }
.filter-item[aria-pressed="true"] .num { color: var(--ink-2); }
.filter-item:disabled { opacity: 0.4; cursor: default; }
.filter-item:disabled:hover { background: transparent; color: var(--ink-2); }
.filter-item:disabled:active { transform: none; }

/* Active filters above the results */
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px 0 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong);
  font-size: 14px; cursor: pointer;
  transition: border-color 150ms ease, transform 160ms var(--ease-out);
}
.filter-pill:hover { border-color: var(--ink-3); }

/* Feed cards */
.reel-entry { cursor: pointer; }
.card-list {
  display: flex; align-items: flex-start; gap: 20px; padding: 24px 16px; margin: 0 -16px;
  border-radius: 14px;
  transition: background-color 200ms ease;
}
.card-list { border-bottom: 1px solid var(--line); }
.card-list[aria-current="true"] { background: var(--surface); border-bottom-color: transparent; box-shadow: 0 0 0 1px var(--line); }
.cover {
  position: relative; overflow: hidden; flex-shrink: 0;
  aspect-ratio: 9 / 16; border-radius: 10px; background: #ECEAE6;
}
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.card-quote { transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .card-list:hover { background: var(--surface); border-bottom-color: transparent; }
  .reel-entry:hover .cover img { transform: scale(1.03); }
  .card-grid:hover .card-quote { color: var(--ink-2); }
}

/* Staggered first load */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger > .reel-entry { animation: rise 480ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* ==================== REEL PAGE ====================
   One column on phones; from 1024px the media sticks beside a readable column. */
.reel-layout { display: grid; gap: 32px; }
@media (min-width: 640px) {
  .reel-layout { gap: 40px; }
}
@media (min-width: 1024px) {
  .reel-layout { grid-template-columns: 300px minmax(0, 680px); justify-content: center; gap: 64px; align-items: start; }
  .reel-aside { position: sticky; top: 96px; }
}
.reel-headline { font-family: var(--serif); font-size: 24px; line-height: 1.28; letter-spacing: -0.01em; font-weight: 400; }
@media (min-width: 640px) { .reel-headline { font-size: 30px; } }
#reelCaptionWrapper .italic { font-family: var(--serif); font-size: 17px; }

/* Reel hero: on mobile, external link is hidden until the user taps to expand the video */
.reel-post-link { display: none; }
@media (min-width: 1024px) {
  .reel-post-link { display: block; }
}
#reelHero.is-playing { flex-direction: column; }
#reelHero.is-playing .reel-player { width: 100%; max-width: 340px; }
#reelHero.is-playing .reel-post-link { display: block; }
#reelHero.is-playing .reel-mobile-meta { width: 100%; max-width: 340px; }

.reel-desktop-header { display: none; }
@media (min-width: 1024px) {
  .reel-desktop-header { display: flex; }
}

/* Disclosure sections of the dossier */
.disclosure { border-top: 1px solid var(--line); }
.disclosure-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; text-align: left;
}
.disclosure-trigger .chevron { transition: transform 260ms var(--ease-out); color: var(--ink-3); }
.disclosure[data-open="true"] .chevron { transform: rotate(180deg); }
.disclosure-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out);
}
.disclosure[data-open="true"] .disclosure-body { grid-template-rows: 1fr; }
.disclosure-inner {
  min-height: 0; overflow: hidden;
  opacity: 0; transition: opacity 200ms ease;
}
.disclosure[data-open="true"] .disclosure-inner { opacity: 1; transition: opacity 260ms ease 60ms; }
.disclosure-content { padding-bottom: 28px; }

/* Transcript preview */
.transcript-clip { max-height: 13.5rem; overflow: hidden; position: relative; }
.transcript-clip::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 5rem;
  background: linear-gradient(to bottom, rgba(250,250,248,0), var(--bg));
  pointer-events: none; transition: opacity 200ms ease;
}
.is-expanded .transcript-clip { max-height: none; }
.is-expanded .transcript-clip::after { opacity: 0; }
.mark-hook { background: var(--hook); color: inherit; padding: 0.05em 0.15em; border-radius: 3px; box-shadow: inset 0 -2px 0 #F2C46B; }
.mark-cta { background: var(--cta); color: inherit; padding: 0.05em 0.15em; border-radius: 3px; box-shadow: inset 0 -2px 0 #8DB7DE; }

.dna-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; }
.dna-row + .dna-row { border-top: 1px solid var(--line); }
.pull-quote { font-family: var(--serif); font-size: 19px; line-height: 1.55; padding-left: 16px; border-left: 2px solid var(--line-strong); }

/* Menus & toast */
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.menu:not(.hidden) { animation: pop 160ms var(--ease-out); transform-origin: top right; }
#toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 99999; pointer-events: none;
  transform: translate(-50%, 16px); opacity: 0;
  transition: transform 260ms var(--ease-out), opacity 200ms ease;
}
#toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* Mobile filter sheet */
#mobileFilterDrawer {
  transform: translateY(100%); visibility: hidden;
  transition: transform 260ms var(--ease-drawer), visibility 0s linear 260ms;
}
#mobileFilterDrawer.is-open { transform: none; visibility: visible; transition: transform 420ms var(--ease-drawer), visibility 0s; }
#mobileFilterDrawerBackdrop { opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
#mobileFilterDrawerBackdrop.is-open { opacity: 1; pointer-events: auto; }

/* Loading skeleton */
.filter-list:empty {
  height: 112px; padding: 4px 10px;
  background: repeating-linear-gradient(to bottom, #ECEAE6 0 12px, transparent 12px 38px);
  background-size: 70% 100%; background-repeat: no-repeat; border-radius: 4px;
}
.skeleton { background: #ECEAE6; position: relative; overflow: hidden; }
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-card { cursor: default; }
@media (hover: hover) and (pointer: fine) { .skeleton-card:hover { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; display: none; } }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 240ms ease both; }
.spinner { width: 16px; height: 16px; flex-shrink: 0; border-radius: 999px; border: 2px solid var(--line-strong); border-top-color: var(--ink); animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.slide-in-down, .animate-smooth-enter { animation: rise 320ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
  #mobileFilterDrawer, #toast, .cover img { transition-property: opacity, visibility !important; transform: none !important; }
  #mobileFilterDrawer:not(.is-open) { opacity: 0; }
  button:active, .btn:active { transform: none; }
}

/* Account menu: anchored panel under the header button. */
.popover {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: min(320px, calc(100vw - 32px)); padding: 16px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(28, 27, 25, 0.12);
}

/* Login: a single centered column on the page background, nothing else on screen. */
.auth-screen {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 48px 16px;
}
.auth-card { width: min(440px, 100%); display: grid; gap: 40px; }

/* Creator profile picture (/api/avatar) over the initials; the initials stay if there is none. */
.avatar { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 999px;
  background: #ECEAE6; color: var(--ink-2); font-family: var(--serif); box-shadow: inset 0 0 0 1px rgba(28, 27, 25, 0.06); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms ease; }
.avatar img.is-loaded { opacity: 1; }
.avatar-lg { width: 72px; height: 72px; font-size: 26px; }
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
@media (min-width: 640px) { .avatar-lg { width: 88px; height: 88px; font-size: 30px; } }
.avatar-md { width: 40px; height: 40px; font-size: 15px; }

/* Sticky page header: nearly opaque with a heavy blur, so content scrolling under it stays out of the way. */
.app-header {
  background: rgba(250, 250, 248, 0.96);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

/* ==================== PROMPT WIZARD ==================== */
.wizard-backdrop {
  position: fixed; inset: 0; z-index: 99990;
  background: rgba(28, 27, 25, 0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.wizard-backdrop.is-open { opacity: 1; pointer-events: auto; }

.wizard-modal {
  position: fixed; z-index: 99991;
  background: var(--surface);
  box-shadow: 0 20px 48px rgba(28, 27, 25, 0.22);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform 300ms var(--ease-drawer), opacity 200ms ease;
}
@media (max-width: 639px) {
  .wizard-modal {
    bottom: 0; left: 0; right: 0; top: auto;
    max-height: 90vh; max-height: 90dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .wizard-modal.is-open { transform: translateY(0); }
}
@media (min-width: 640px) {
  .wizard-modal {
    left: 50%; top: 50%;
    transform: translate(-50%, -46%) scale(0.97);
    width: min(640px, calc(100vw - 32px));
    max-height: 86vh; max-height: 86dvh;
    border-radius: 20px;
    border: 1px solid var(--line-strong);
    opacity: 0; pointer-events: none;
  }
  .wizard-modal.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; pointer-events: auto;
  }
}

.wizard-chip {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 10px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line-strong);
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; text-align: left;
  transition: all 140ms ease;
}
.wizard-chip:hover { border-color: var(--ink); color: var(--ink); }
.wizard-chip.is-selected {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.wizard-chip.is-selected .wizard-badge {
  background: rgba(255, 255, 255, 0.22); color: #fff;
}
.wizard-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 4px;
  background: #FDF0D5; color: #8A5300;
}