/* Sora default theme — minimal, modern, dark/light aware */

/* ---------- Tokens ---------- */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --color-bg: #0f1115;
  --color-panel: #151922;
  --color-card: #1a1f2b;
  --color-text: #e7edf6;
  --color-muted: #9aa3b2;
  --color-border: #283144;
  --color-accent: #5cc8ff;
  --color-accent-text: #041016;

  --radius-s: 8px;
  --radius-m: 14px;
  --shadow-s: 0 1px 2px rgba(0,0,0,.2), 0 6px 14px rgba(0,0,0,.16);
  --shadow-m: 0 2px 6px rgba(0,0,0,.24), 0 12px 28px rgba(0,0,0,.18);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --max-width: 72rem;
  --column-width: 44rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f6f7fb;
    --color-panel: #ffffff;
    --color-card: #ffffff;
    --color-text: #0c1220;
    --color-muted: #5a6475;
    --color-border: #e3e7ef;
    --color-accent: #007acc;
    --color-accent-text: #ffffff;

    --shadow-s: 0 1px 2px rgba(0,0,0,.05), 0 8px 18px rgba(0,0,0,.06);
    --shadow-m: 0 2px 6px rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.08);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  letter-spacing: .01em;
  position: relative;
}
/* Safari-safe gradient overlay (prevents hard seams) */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120vmax 70vmax at 10% -10%, rgba(92,200,255,.08), transparent 60%),
    radial-gradient(110vmax 80vmax at 95% -20%, rgba(255,170,110,.06), transparent 60%);
  filter: blur(0.0001px);
}

/* ---------- Layout shell ---------- */
body > header,
.site_aside,
main.episodes,
.site_footer,
.pager {
  width: min(var(--max-width), 100%);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}
body > header,
.site_aside,
.site_footer { max-width: var(--column-width); }
main.episodes { max-width: var(--column-width); }

/* ---------- Header ---------- */
.site_header {
  padding-block: var(--space-8) var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "cover title"
    "cover feed";
  gap: var(--space-4) var(--space-6);
  align-items: center;
}
.site_header .branding { grid-area: title; }
.site_header .feed_link { grid-area: feed; }
.site_cover {
  grid-area: cover;
  width: 400px;
  height: 400px;
  border-radius: var(--radius-m);
  object-fit: cover;
  box-shadow: var(--shadow-s);
  border: 1px solid var(--color-border);
}
.site_title {
  margin: 0 0 var(--space-1);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.15;
}
.site_subtitle {
  margin: 0;
  color: var(--color-muted);
}
.rss_link {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  padding: .4rem .7rem;
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--color-accent-text);
  background: var(--color-accent);
  box-shadow: var(--shadow-s);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.rss_link:hover { transform: translateY(-1px); box-shadow: var(--shadow-m); filter: saturate(1.05); }

/* ---------- Aside (optional) ---------- */
.site_aside {
  margin-block: var(--space-4) var(--space-6);
  padding: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}
.site_aside:empty { display: none; }

/* ---------- Episodes ---------- */
.episodes { padding-bottom: var(--space-8); }
.episode {
  padding: var(--space-6);
  margin-block: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: box-shadow .15s ease;
}
.episode:hover {
  box-shadow: var(--shadow-m);
}
.episode_title {
  margin: 0 0 var(--space-1);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}
.episode_date {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.episode_summary { margin: 0 0 var(--space-4); }
.player_container { margin-top: var(--space-4); }

/* ---------- Pager ---------- */
.pager {
  max-width: var(--column-width);
  margin: var(--space-8) auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.pager_link {
  text-decoration: none;
  padding: .5rem .8rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-text);
  box-shadow: var(--shadow-s);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.pager_link:hover { box-shadow: var(--shadow-m); transform: translateY(-1px); }
.pager_link.muted,
.muted { color: var(--color-muted); border-style: dashed; background: transparent; box-shadow: none; }
.pager_status { color: var(--color-muted); }

/* ---------- Footer ---------- */
.site_footer {
  padding-block: var(--space-8);
  color: var(--color-muted);
  border-top: 1px dashed var(--color-border);
  margin-top: var(--space-8);
}

/* ---------- Links & focus ---------- */
a { color: var(--color-accent); }
a:hover { filter: brightness(1.1); }
:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--color-accent) 70%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .site_header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cover"
      "title"
      "feed";
    text-align: center;
  }
  .site_cover { margin-inline: auto; width: 96px; height: 96px; }
  .rss_link { justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}