@layer reset, tokens, layout, components, utilities;

/* Cross-document, and outside every layer: @view-transition is ignored inside one. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  img,
  video,
  audio {
    display: block;
    max-inline-size: 100%;
  }
  button,
  input {
    font: inherit;
    color: inherit;
  }
  ul,
  ol {
    list-style: none;
    padding: 0;
  }
  a {
    color: inherit;
    text-underline-offset: 0.15em;
  }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --bg: light-dark(oklch(99% 0.005 250), oklch(17% 0.02 260));
    --surface: light-dark(oklch(96% 0.008 250), oklch(22% 0.02 260));
    --text: light-dark(oklch(25% 0.02 260), oklch(93% 0.01 250));
    --muted: light-dark(oklch(52% 0.02 260), oklch(70% 0.02 250));
    --accent: light-dark(oklch(52% 0.19 258), oklch(78% 0.14 250));
    --rule: light-dark(oklch(89% 0.01 250), oklch(31% 0.02 260));
    --measure: 70ch;
    --gap: 1.25rem;
    --radius: 0.5rem;
    --font:
      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, monospace;
  }
}

@layer layout {
  html {
    scroll-padding-block: calc(var(--header-block-size, 4.5rem) + var(--gap))
      6rem;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.6;
    overflow-wrap: break-word;
    padding-inline: var(--gap);
  }

  .site-header,
  .site-footer,
  main {
    max-inline-size: 78rem;
    margin-inline: auto;
  }

  /* Off-screen until focused, so keyboard users can jump the nav. */
  .skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 4;
    padding: 0.5rem 0.75rem;
    background: var(--bg);
    border: 1px solid var(--accent);
    translate: 0 -110%;
  }
  .skip-link:focus-visible {
    translate: 0;
  }

  .site-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: baseline;
    justify-content: space-between;
    padding-block: var(--gap);
    border-block-end: 1px solid var(--rule);
  }

  .site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }
  .site-name {
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.01em;
  }
  .site-footer {
    padding-block: 2rem;
    color: var(--muted);
  }
  main {
    padding-block: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  /* Container query: outline beside the transcript when the page is wide enough. */
  .episode-page-main {
    container: episode / inline-size;
  }

  /* Title + player ride along at the top; --header-block-size is measured at
     runtime so scroll anchors land below it. */
  .episode-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
    anchor-name: --episode-header;
    display: grid;
    gap: 0.5rem var(--gap);
    align-items: center;
    background: var(--bg);
    border-block-end: 1px solid var(--rule);
    padding-block: 0.6rem;
  }
  @container episode (inline-size > 40rem) {
    .episode-header {
      grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    }
  }

  /* Narrow: cap the outline so the transcript is reachable without a long scroll. */
  .toc {
    max-block-size: 40vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-block-end: 0.5rem;
    border-block-end: 1px solid var(--rule);
  }
  .episode {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap) 2.5rem;
    align-items: start;
  }

  @container episode (inline-size > 56rem) {
    .episode {
      grid-template-columns: 18rem minmax(0, 1fr);
    }
    .toc {
      position: sticky;
      /* anchor(--episode-header bottom) computes to `auto` on a sticky box in
         Chrome 152, so the header's measured height carries the offset. */
      inset-block-start: calc(var(--header-block-size, 4.5rem) + var(--gap));
      max-block-size: calc(
        100svh - var(--header-block-size, 4.5rem) - 2 * var(--gap)
      );
      font-size: 0.9rem;
      border-block-end: 0;
      padding-block-end: 0;
    }
  }
}

@layer components {
  h1,
  h2,
  h3 {
    text-wrap: balance;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-block-end: 0.4em;
  }
  h1 {
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  }
  h2 {
    font-size: 1.25rem;
  }
  h3 {
    font-size: 1rem;
  }
  p,
  li {
    text-wrap: pretty;
  }
  /* The reset zeroes margins; restore rhythm without doubling .segment/.link-row. */
  * + :is(h2, h3) {
    margin-block-start: 1.5em;
  }
  * + p {
    margin-block-start: 0.75em;
  }
  main p {
    max-inline-size: var(--measure);
  }

  .transcript {
    max-inline-size: var(--measure);
  }

  .player {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.5rem;
  }
  .player audio {
    inline-size: 100%;
  }

  .episode-header h1 {
    font-size: 1.15rem;
    margin-block-end: 0;
    text-wrap: pretty;
  }

  .outline {
    display: grid;
    gap: 0.35rem;
  }
  /* Set by the outline script as sections enter the viewport. */
  .outline li:has(> a[aria-current="true"]) {
    border-inline-start: 2px solid var(--accent);
    background: var(--surface);
    margin-inline-start: -0.5rem;
    padding-inline-start: 0.5rem;
  }
  .outline ol {
    padding-inline-start: 1rem;
    margin-block-start: 0.35rem;
  }
  .outline a {
    text-decoration-color: var(--rule);
  }
  .outbound {
    color: var(--muted);
    text-decoration: none;
  }
  .toc h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-block-end: 0.6rem;
  }

  .ts {
    font-family: var(--mono);
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    background: none;
    border: 0;
    padding: 0;
  }
  button.ts {
    cursor: pointer;
  }
  button.ts:hover,
  button.ts:focus-visible {
    text-decoration: underline;
  }

  .transcript section + section {
    margin-block-start: 2.5rem;
  }
  .transcript h2 {
    padding-block-end: 0.4rem;
    border-block-end: 1px solid var(--rule);
  }
  .segment {
    margin-block-start: 0.85em;
  }
  .speaker {
    color: var(--accent);
    font-weight: 600;
  }

  .latest h1 a {
    text-decoration: none;
  }
  .archive ul,
  .link-group ul,
  .people ul,
  .subscribe ul,
  .replies {
    display: grid;
    gap: 0.9rem;
  }
  .archive li {
    padding-block-end: 0.9rem;
    border-block-end: 1px solid var(--rule);
  }
  .archive time,
  .from,
  .role,
  .count,
  .reply-date {
    color: var(--muted);
    font-size: 0.85em;
  }
  .archive time {
    display: block;
    font-family: var(--mono);
  }
  .count {
    font-family: var(--mono);
    font-weight: 400;
  }

  #link-filter,
  .newsletter input {
    inline-size: min(100%, 24rem);
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
  }
  #link-count {
    color: var(--muted);
    font-size: 0.85em;
  }
  .link-group {
    margin-block-start: 1.5rem;
  }
  .link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
  }
  .link-row > a:first-child {
    flex: 1 1 22rem;
  }
  .from {
    text-decoration: none;
  }
  .from .ts {
    margin-inline-start: 0.4rem;
  }

  .people li {
    display: flex;
    gap: 0.7rem;
    align-items: center;
  }
  .people img {
    border-radius: 50%;
  }
  .about-page section,
  #comments {
    margin-block-start: 2rem;
  }

  #comments .replies {
    margin-block-start: 1rem;
  }
  .replies li {
    border-inline-start: 2px solid var(--rule);
    padding-inline-start: 0.8rem;
  }
  .reply-author {
    font-weight: 600;
    font-size: 0.9em;
  }
  .reply-text {
    max-inline-size: var(--measure);
  }

  .newsletter form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-block-start: 0.7rem;
  }
  .newsletter input {
    flex: 1 1 16rem;
  }
  .newsletter button {
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--bg);
    cursor: pointer;
  }
  .newsletter label {
    position: absolute;
    clip-path: inset(50%);
  }

  /* Pagefind ships its own CSS; only its documented custom properties are set. */
  #pagefind-ui {
    --pagefind-ui-primary: var(--text);
    --pagefind-ui-text: var(--text);
    --pagefind-ui-background: var(--bg);
    --pagefind-ui-border: var(--rule);
    --pagefind-ui-tag: var(--surface);
    --pagefind-ui-border-radius: var(--radius);
    --pagefind-ui-font: var(--font);
  }
}

@layer utilities {
  [hidden] {
    display: none !important;
  }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    .toc {
      scroll-behavior: auto;
    }
  }
}