/* Kahoo design system.
   One token layer, then everything else reads from it. Dark is the product
   default; light is complete, not an afterthought. Ordering is explicit so a
   component rule never loses to a base rule by accident. */

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

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; }
  img, svg, video, audio { display: block; max-width: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

@layer tokens {
  :root {
    /* Light is the base; the dark block below overrides it. */
    --bg: #f6f7fb;
    --surface-1: #ffffff;
    --surface-2: #eef0f6;
    --surface-3: #e3e7f0;
    --border: rgb(16 20 32 / 12%);
    --border-strong: rgb(16 20 32 / 22%);
    --text: #12151d;
    --text-muted: #55607a;
    --accent: #e0521f;
    --accent-hover: #c8451a;
    --accent-text: #b8420f;
    --on-accent: #ffffff;
    --focus: #0b57d0;
    --scrim: linear-gradient(90deg, rgb(246 247 251 / 96%) 0%, rgb(246 247 251 / 88%) 42%, rgb(246 247 251 / 15%) 100%);
    --shadow-1: 0 1px 2px rgb(16 20 32 / 8%), 0 4px 12px rgb(16 20 32 / 6%);
    --shadow-2: 0 8px 30px rgb(16 20 32 / 14%);
    --art-l1: 46%;
    --art-l2: 30%;

    /* Type: one system stack, one modular scale. */
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
    --step-0: clamp(0.94rem, 0.91rem + 0.14vw, 1rem);
    --step-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem);
    --step-2: clamp(1.32rem, 1.2rem + 0.6vw, 1.7rem);
    --step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
    --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);

    /* Space: 4px base. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --dur: 160ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    --page-max: 1440px;
    --card-w: clamp(9rem, 16vw, 12rem);
  }

  /* System preference decides when the viewer has not chosen. */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0b0d12;
      --surface-1: #12151d;
      --surface-2: #191d28;
      --surface-3: #232838;
      --border: rgb(255 255 255 / 10%);
      --border-strong: rgb(255 255 255 / 20%);
      --text: #f2f4f8;
      --text-muted: #a5adbe;
      --accent: #ff6a3d;
      --accent-hover: #ff8159;
      --accent-text: #ff9575;
      --on-accent: #16110d;
      --focus: #9fd0ff;
      --scrim: linear-gradient(90deg, rgb(11 13 18 / 96%) 0%, rgb(11 13 18 / 86%) 44%, rgb(11 13 18 / 10%) 100%);
      --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 18px rgb(0 0 0 / 32%);
      --shadow-2: 0 16px 44px rgb(0 0 0 / 50%);
      --art-l1: 42%;
      --art-l2: 22%;
    }
  }

  /* An explicit choice always wins over the system, in both directions. */
  :root[data-theme="light"] {
    --bg: #f6f7fb;
    --surface-1: #ffffff;
    --surface-2: #eef0f6;
    --surface-3: #e3e7f0;
    --border: rgb(16 20 32 / 12%);
    --border-strong: rgb(16 20 32 / 22%);
    --text: #12151d;
    --text-muted: #55607a;
    --accent: #e0521f;
    --accent-hover: #c8451a;
    --accent-text: #b8420f;
    --on-accent: #ffffff;
    --focus: #0b57d0;
    --scrim: linear-gradient(90deg, rgb(246 247 251 / 96%) 0%, rgb(246 247 251 / 88%) 42%, rgb(246 247 251 / 15%) 100%);
    --shadow-1: 0 1px 2px rgb(16 20 32 / 8%), 0 4px 12px rgb(16 20 32 / 6%);
    --shadow-2: 0 8px 30px rgb(16 20 32 / 14%);
    --art-l1: 46%;
    --art-l2: 30%;
  }

  :root[data-theme="dark"] {
    --bg: #0b0d12;
    --surface-1: #12151d;
    --surface-2: #191d28;
    --surface-3: #232838;
    --border: rgb(255 255 255 / 10%);
    --border-strong: rgb(255 255 255 / 20%);
    --text: #f2f4f8;
    --text-muted: #a5adbe;
    --accent: #ff6a3d;
    --accent-hover: #ff8159;
    --accent-text: #ff9575;
    --on-accent: #16110d;
    --focus: #9fd0ff;
    --scrim: linear-gradient(90deg, rgb(11 13 18 / 96%) 0%, rgb(11 13 18 / 86%) 44%, rgb(11 13 18 / 10%) 100%);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 18px rgb(0 0 0 / 32%);
    --shadow-2: 0 16px 44px rgb(0 0 0 / 50%);
    --art-l1: 42%;
    --art-l2: 22%;
  }

  /* Twelve generated-artwork palettes, indexed from the title ID. */
  .art--h0 { --art-h: 8; }
  .art--h1 { --art-h: 38; }
  .art--h2 { --art-h: 68; }
  .art--h3 { --art-h: 98; }
  .art--h4 { --art-h: 128; }
  .art--h5 { --art-h: 158; }
  .art--h6 { --art-h: 188; }
  .art--h7 { --art-h: 218; }
  .art--h8 { --art-h: 248; }
  .art--h9 { --art-h: 278; }
  .art--h10 { --art-h: 308; }
  .art--h11 { --art-h: 338; }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.55;
    display: flex;
    flex-direction: column;
  }

  h1, h2, h3 { line-height: 1.15; text-wrap: balance; font-weight: 650; letter-spacing: -0.015em; }
  p { text-wrap: pretty; }
  code { font-family: var(--font-mono); font-size: 0.9em; }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  ::selection { background: var(--accent); color: var(--on-accent); }
}

@layer layout {
  .main { flex: 1; }

  .page {
    max-width: var(--page-max);
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
  }

  .page--centred {
    min-height: 60svh;
    display: grid;
    place-items: center;
  }

  .page__head { margin-bottom: var(--sp-5); }
  .page__title { font-size: var(--step-3); }
  .page__lede { color: var(--text-muted); margin-top: var(--sp-1); }
  .section__title { font-size: var(--step-2); margin-bottom: var(--sp-4); }

  .rails {
    max-width: var(--page-max);
    margin-inline: auto;
    padding: var(--sp-6) 0 var(--sp-8);
    display: grid;
    gap: var(--sp-7);
  }
}

@layer components {
  /* --- header ------------------------------------------------------------ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }

  .site-header__inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding: var(--sp-3) var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
  }

  .brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; letter-spacing: -0.02em; }
  .brand__mark {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #7b3ff2));
    box-shadow: var(--shadow-1);
  }
  .brand__name { font-size: var(--step-1); }

  .nav {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline-end: auto;
  }
  .nav::-webkit-scrollbar { display: none; }

  .nav__link {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    white-space: nowrap;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .nav__link:hover { color: var(--text); background: var(--surface-2); }
  .nav__link.is-active { color: var(--text); background: var(--surface-3); font-weight: 600; }

  /* --- search ------------------------------------------------------------ */
  .search { display: flex; align-items: center; gap: var(--sp-2); }
  .search--stacked { flex-wrap: wrap; justify-content: center; }

  .search__field {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding-inline: var(--sp-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
  }
  .search__field:focus-within { border-color: var(--border-strong); color: var(--text); }
  .search__field--wide { flex: 1 1 18rem; }

  .search__input {
    border: 0;
    background: none;
    padding-block: var(--sp-2);
    min-inline-size: 8rem;
    inline-size: 100%;
  }
  .search__input:focus { outline: none; }
  .search__input::placeholder { color: var(--text-muted); }

  /* --- buttons ----------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-block-size: 2.75rem;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .btn:hover { background: var(--surface-3); }
  .btn:active { transform: translateY(1px); }

  .btn--primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
  .btn--primary:hover { background: var(--accent-hover); }

  .btn--quiet { background: none; border-color: transparent; color: var(--text-muted); }
  .btn--quiet:hover { background: var(--surface-2); color: var(--text); }

  .iconbtn {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
  }
  .iconbtn:hover { background: var(--surface-3); }

  .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
  .icon--star { color: var(--accent-text); }

  .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

  /* --- generated artwork -------------------------------------------------- */
  .art {
    display: grid;
    place-items: center;
    inline-size: 100%;
    border-radius: var(--radius);
    background:
      radial-gradient(120% 90% at 15% 10%, hsl(calc(var(--art-h, 220) + 24) 70% var(--art-l1) / 90%), transparent 60%),
      linear-gradient(155deg, hsl(var(--art-h, 220) 58% var(--art-l1)), hsl(calc(var(--art-h, 220) + 36) 52% var(--art-l2)));
    overflow: hidden;
  }
  .art--poster { aspect-ratio: 2 / 3; }
  .art--square { aspect-ratio: 1; }

  .art__initials {
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgb(255 255 255 / 88%);
    text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
  }

  /* --- cards -------------------------------------------------------------- */
  .card__link {
    display: grid;
    gap: var(--sp-2);
    border-radius: var(--radius);
    transition: transform var(--dur) var(--ease);
  }
  .card__link:hover { transform: translateY(-4px); }
  .card__link:hover .card__art { box-shadow: var(--shadow-2); }
  .card__link:focus-visible { outline-offset: 4px; }

  .card__art {
    position: relative;
    display: block;
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur) var(--ease);
  }

  .card__kind, .card__rating {
    position: absolute;
    inset-block-start: var(--sp-2);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    font-weight: 650;
    background: rgb(0 0 0 / 62%);
    color: #fff;
    backdrop-filter: blur(4px);
  }
  .card__kind { inset-inline-start: var(--sp-2); }
  .card__rating { inset-inline-end: var(--sp-2); }

  .card__body { display: grid; gap: 2px; }
  .card__title {
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card__meta, .card__remaining { color: var(--text-muted); font-size: var(--step--1); }
  .card__progress { display: grid; gap: 2px; margin-top: var(--sp-1); }

  /* --- rails -------------------------------------------------------------- */
  .rail__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--sp-4);
    max-width: var(--page-max);
    padding-inline: var(--sp-5);
    margin-inline: auto;
    inline-size: 100%;
    margin-bottom: var(--sp-3);
  }
  .rail__title { font-size: var(--step-2); }
  .rail__subtitle { color: var(--text-muted); font-size: var(--step--1); }
  .rail__controls { display: flex; gap: var(--sp-2); }

  .rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--card-w);
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--sp-5);
    padding: var(--sp-1) var(--sp-5) var(--sp-4);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .rail__track > * { scroll-snap-align: start; }

  /* --- grid --------------------------------------------------------------- */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
    gap: var(--sp-5) var(--sp-4);
  }

  /* --- hero --------------------------------------------------------------- */
  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-block-size: clamp(22rem, 54svh, 34rem);
    max-width: var(--page-max);
    margin: var(--sp-5) auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .hero__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(90% 120% at 85% 15%, hsl(calc(var(--art-h, 220) + 30) 72% var(--art-l1) / 95%), transparent 65%),
      linear-gradient(120deg, hsl(var(--art-h, 220) 60% var(--art-l2)), hsl(calc(var(--art-h, 220) + 40) 55% var(--art-l1)));
  }
  .hero__art::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }

  .hero__body { padding: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-3); max-inline-size: 46rem; }
  .hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--accent-text);
  }
  .hero__title { font-size: var(--step-4); }
  .hero__tagline { font-size: var(--step-1); color: var(--text); }
  .hero__synopsis { color: var(--text-muted); max-inline-size: 44ch; }
  .hero__resume { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); font-size: var(--step--1); }
  .hero__resume .progress { inline-size: 12rem; }

  /* --- meta rows ---------------------------------------------------------- */
  .metarow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    color: var(--text-muted);
    font-size: var(--step--1);
  }
  .metarow > li { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .metarow > li + li::before { content: "·"; margin-inline-end: var(--sp-2); color: var(--border-strong); }
  .metarow__rating { color: var(--text); font-weight: 600; }

  .pill {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0 var(--sp-2);
    font-size: var(--step--1);
  }

  /* --- progress ----------------------------------------------------------- */
  .progress {
    appearance: none;
    inline-size: 100%;
    block-size: 4px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    overflow: hidden;
  }
  .progress::-webkit-progress-bar { background: var(--surface-3); }
  .progress::-webkit-progress-value { background: var(--accent); }
  .progress::-moz-progress-bar { background: var(--accent); }

  /* --- filters ------------------------------------------------------------ */
  .filters { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); }
  .filters__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }

  .field { display: grid; gap: var(--sp-1); }
  .field__label { font-size: var(--step--1); color: var(--text-muted); }
  .field__control {
    min-block-size: 2.75rem;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
  }

  .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .chips--inline { margin: 0; }
  .chip {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: var(--step--1);
    font-weight: 600;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .chip:hover { background: var(--surface-3); color: var(--text); }
  .chip.is-active { background: var(--accent); color: var(--on-accent); border-color: transparent; }
  .chip--sm { font-weight: 500; }
  /* A chip that is a value, not a link: nothing to hover, nothing to press. */
  .chip--static { cursor: default; }
  .chip--static:hover { background: var(--surface-2); color: var(--text-muted); }

  /* --- detail ------------------------------------------------------------- */
  .detail { position: relative; isolation: isolate; }
  .detail__backdrop {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 22rem;
    z-index: -1;
    background:
      radial-gradient(70% 120% at 80% 0%, hsl(calc(var(--art-h, 220) + 30) 65% var(--art-l1) / 70%), transparent 70%),
      linear-gradient(180deg, hsl(var(--art-h, 220) 45% var(--art-l2) / 65%), transparent 92%);
  }
  .detail__inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding: var(--sp-7) var(--sp-5) var(--sp-6);
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .detail__poster .art { box-shadow: var(--shadow-2); }
  .detail__body { display: grid; gap: var(--sp-3); }
  .detail__title { font-size: var(--step-3); }
  .detail__tagline { color: var(--text-muted); font-size: var(--step-1); }
  .detail__synopsis { max-inline-size: 60ch; }
  .detail__resume { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); font-size: var(--step--1); }
  .detail__resume .progress { inline-size: 12rem; }

  .facts { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
  .facts__row { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; }
  .facts dt { color: var(--text-muted); font-size: var(--step--1); }

  /* --- account ------------------------------------------------------------ */
  /* The avatar reuses the .art--h* palettes, so a viewer's colour comes from
     the same twelve as the cover art and the page stays one system. */
  .avatar {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    flex: none;
    border-radius: var(--radius-pill);
    background:
      radial-gradient(120% 90% at 15% 10%, hsl(calc(var(--art-h, 220) + 24) 70% var(--art-l1) / 90%), transparent 60%),
      linear-gradient(155deg, hsl(var(--art-h, 220) 58% var(--art-l1)), hsl(calc(var(--art-h, 220) + 36) 52% var(--art-l2)));
  }
  .avatar--sm { inline-size: 1.9rem; }
  .avatar--lg { inline-size: 4.5rem; box-shadow: var(--shadow-1); }

  .avatar__initials {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgb(255 255 255 / 92%);
    text-shadow: 0 1px 8px rgb(0 0 0 / 35%);
  }
  .avatar--sm .avatar__initials { font-size: var(--step--1); }
  .avatar--lg .avatar__initials { font-size: var(--step-2); }

  /* Sized like .iconbtn so the header's controls line up and every hit target
     clears 2.75rem, whether it holds an avatar or an icon. */
  .account {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .account:hover { background: var(--surface-2); color: var(--text); }
  .account.is-active { background: var(--surface-3); color: var(--text); }

  /* The header's anonymous account control. A .btn rather than an icon square:
     "Sign in" is the one action an icon cannot say. It inherits .btn's 2.75rem
     min-block-size and --radius-pill, so it lines up with the theme .iconbtn
     beside it and the cluster still reads as one group. */
  .signin { white-space: nowrap; }
  .signin[aria-current] { background: var(--surface-3); }

  .profile__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
  }
  .profile__ident { display: grid; gap: var(--sp-1); min-inline-size: 0; }
  .profile__email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-muted);
    overflow-wrap: anywhere;
  }
  .profile__actions { margin-inline-start: auto; }
  .profile__id { overflow-wrap: anywhere; }
  .profile__note { color: var(--text-muted); font-size: var(--step--1); margin-top: var(--sp-4); max-inline-size: 62ch; }
  .profile__section { margin-top: var(--sp-7); }

  /* --- auth handoff -------------------------------------------------------- */
  /* /login and /register sell one decision and then leave: this service runs no
     OIDC flow, so each page is copy, brand and a link. One centred card inside
     the normal header/footer chrome — the site frame is what tells a visitor
     that the provider's screen, on another domain, was expected.
     Deliberately not built on .empty: that box carries its own button spacing
     and a wider measure, both wrong here, and coupling them to save a few lines
     buys a fight later. */
  .auth {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    text-align: center;
    inline-size: 100%;
    max-inline-size: 30rem;
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-5);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
  }

  /* Bigger than in the header, by specificity rather than source order so the
     override does not depend on this block staying below .brand__mark. */
  .auth .brand__mark { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius); }

  .auth__title { font-size: var(--step-2); }
  .auth__lede { color: var(--text-muted); }
  .auth__whoami { font-weight: 600; overflow-wrap: anywhere; }
  .auth__email { color: var(--text-muted); overflow-wrap: anywhere; }

  /* One column, so the primary action is unmissable and the order is identical
     for a pointer, a keyboard and a screen reader. Only the primary spans the
     card; the quiet action sizes to its label, so the two cannot be mistaken
     for a matched pair. */
  .auth__actions {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    inline-size: 100%;
    margin-top: var(--sp-2);
  }
  .auth__actions .btn--primary { inline-size: 100%; }

  .auth__alt { color: var(--text-muted); font-size: var(--step--1); }
  /* Underlined, because colour alone must not be what makes it a link. It is
     inline in a sentence, so SC 2.5.8's inline exception applies — do not
     "fix" the hit size by turning it into a block. */
  .auth__alt a {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  .auth__alt a:hover { color: var(--text); }

  /* Small print keeps a comfortable measure: at --step--1 the 30rem card would
     otherwise run to about 66 characters a line. */
  .auth__note {
    color: var(--text-muted);
    font-size: var(--step--1);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-3);
    margin-top: var(--sp-2);
    max-inline-size: 42ch;
  }

  /* --- season guide -------------------------------------------------------- */
  .seasons { display: grid; gap: var(--sp-4); }
  .seasons--queue { margin-top: var(--sp-2); }

  .seasons__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-4);
  }
  .seasons__count { color: var(--text-muted); font-size: var(--step--1); }
  .seasons__intro { display: grid; gap: var(--sp-1); max-inline-size: 62ch; }
  .seasons__title { font-size: var(--step-1); }
  .seasons__meta { color: var(--text-muted); font-size: var(--step--1); }
  .seasons__synopsis { color: var(--text-muted); }
  .seasons__empty { color: var(--text-muted); }

  .episodes { display: grid; gap: var(--sp-2); counter-reset: episode; }

  .episode__link {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .episode__link:hover { background: var(--surface-2); border-color: var(--border); }
  .episode.is-playing .episode__link { background: var(--surface-2); border-color: var(--border-strong); }

  .episode__still {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background:
      radial-gradient(120% 100% at 20% 10%, hsl(calc(var(--art-h, 220) + 24) 66% var(--art-l1) / 88%), transparent 62%),
      linear-gradient(150deg, hsl(var(--art-h, 220) 54% var(--art-l1)), hsl(calc(var(--art-h, 220) + 34) 50% var(--art-l2)));
  }
  .episode__index {
    font-size: var(--step-2);
    font-weight: 700;
    color: rgb(255 255 255 / 88%);
    text-shadow: 0 1px 10px rgb(0 0 0 / 40%);
  }
  .episode__bar {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 3px;
    border-radius: 0;
  }

  /* A watched episode is dimmed, but the title stays at full contrast — dimming
     the text would push it under the contrast floor. */
  .episode.is-watched .episode__still { opacity: 0.55; }

  .episode__body { display: grid; gap: var(--sp-1); align-content: start; }
  .episode__head { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); justify-content: space-between; }
  .episode__name { font-weight: 600; }
  .episode__runtime { color: var(--text-muted); font-size: var(--step--1); }
  .episode__synopsis { color: var(--text-muted); font-size: var(--step--1); }
  .episode__state:empty { display: none; }

  .tag {
    display: inline-block;
    margin-top: var(--sp-1);
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    color: var(--text-muted);
  }
  .tag--accent { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 650; }

  /* --- watch -------------------------------------------------------------- */
  .watch { max-width: var(--page-max); margin-inline: auto; padding: var(--sp-5) var(--sp-5) var(--sp-8); display: grid; gap: var(--sp-6); }
  .watch__stage {
    background: #000;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .player { inline-size: 100%; aspect-ratio: 16 / 9; max-block-size: 78svh; background: #000; }
  .watch__audio { display: grid; gap: var(--sp-4); place-items: center; padding: var(--sp-6); }
  .watch__audio .art { max-inline-size: 18rem; }
  .watch__audio .player { aspect-ratio: auto; block-size: auto; background: none; }

  .watch__meta { display: grid; gap: var(--sp-3); max-inline-size: 62ch; }
  .watch__title { font-size: var(--step-2); }
  .watch__series { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; color: var(--text-muted); font-size: var(--step--1); }
  .watch__series a { font-weight: 600; color: var(--text); }
  .watch__series a:hover { color: var(--accent-text); }
  .watch__code { font-weight: 650; color: var(--accent-text); }
  .watch__synopsis { color: var(--text-muted); }

  .nosource {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    max-block-size: 70svh;
    text-align: center;
    background:
      radial-gradient(80% 120% at 50% 0%, hsl(calc(var(--art-h, 220) + 24) 60% var(--art-l1) / 70%), transparent 70%),
      linear-gradient(160deg, hsl(var(--art-h, 220) 45% var(--art-l2)), #05070b);
  }
  .nosource__body { display: grid; gap: var(--sp-2); justify-items: center; padding: var(--sp-5); max-inline-size: 34rem; color: #f2f4f8; }
  .nosource__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--step--1); font-weight: 700; opacity: 0.8; }
  .nosource__title { font-size: var(--step-2); }
  .nosource__text { color: rgb(242 244 248 / 78%); }
  .nosource .btn { margin-top: var(--sp-3); }

  .shortcuts { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
  .shortcuts__summary { cursor: pointer; color: var(--text-muted); font-size: var(--step--1); }
  .shortcuts__list { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
  .shortcuts__list > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--sp-3); }
  .shortcuts dd { color: var(--text-muted); font-size: var(--step--1); }
  kbd {
    font-family: var(--font-mono);
    font-size: 0.8em;
    padding: 1px var(--sp-2);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }

  /* --- empty states ------------------------------------------------------- */
  .empty {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    max-inline-size: 34rem;
    margin-inline: auto;
  }
  .empty__mark {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--radius);
    background: linear-gradient(140deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--border);
  }
  .empty__title { font-size: var(--step-2); }
  .empty__body { color: var(--text-muted); }
  .empty .btn, .empty form { margin-top: var(--sp-2); }

  /* --- footer ------------------------------------------------------------- */
  .site-footer { border-top: 1px solid var(--border); margin-top: auto; }
  .site-footer__inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    justify-content: space-between;
    color: var(--text-muted);
    font-size: var(--step--1);
  }
  .site-footer__brand { color: var(--text); font-weight: 600; }
}

@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--sp-2);
    inset-inline-start: var(--sp-2);
    z-index: 50;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 650;
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
  }
  .skip-link:focus { transform: translateY(0); }

  [hidden] { display: none !important; }
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 60rem) {
  .detail__inner { grid-template-columns: minmax(0, 1fr); }
  .detail__poster { max-inline-size: 12rem; }
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

@media (max-width: 44rem) {
  :root { --card-w: clamp(8rem, 38vw, 10rem); }
  .episode__link { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2); }
  .episode__index { font-size: var(--step-1); }
  .site-header__inner { padding-inline: var(--sp-4); }
  .search { order: 3; flex: 1 1 100%; }
  .search__submit { display: none; }
  /* "Sign in" is wider than the avatar it replaces, and at 320px the header's
     first row had no slack left — the nav was being squeezed to a few scrollable
     pixels, which was already marginal with the avatar. Its own row fixes both.
     Visual order then leads DOM order for nav and search, exactly as .search
     above already does; every control names itself, so nothing depends on
     reading them in sequence. */
  .nav { order: 2; flex: 1 1 100%; margin-inline-end: 0; }
  .brand { margin-inline-end: auto; }
  .auth { padding: var(--sp-5) var(--sp-4); }
  .rail__head, .page, .watch { padding-inline: var(--sp-4); }
  .rail__track { padding-inline: var(--sp-4); }
  .hero { border-radius: 0; border-inline: 0; margin-top: 0; }
  .hero__body { padding-inline: var(--sp-4); }
  /* Once Sign out wraps onto its own row, pushing it right leaves it stranded
     away from the column everything else lines up in. */
  .profile__actions { margin-inline-start: 0; }
}

/* Motion is decoration here; nothing depends on it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card__link:hover { transform: none; }
}