/* ==========================================================================
   bryanchen.net · Notebook pages (/notebook/ and every entry under it)

   Loaded after site.css, and built only from its palette tokens, so light and
   dark mode and the header toggle work exactly as on the rest of the site.
   Styles for a single entry's figure live in that entry's own page.
   ========================================================================== */

@layer components {

  /* ---------- Header: the "back to the Notebook" button ---------- */
  .nb-back svg { inline-size: 1rem; block-size: 1rem; }
  /* On the narrowest phones the button keeps its arrow and hides its word. */
  @media (max-width: 25rem) {
    .nb-back:has(svg) { padding-inline: 0.75rem; }
    .nb-back:has(svg) .nb-back-label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* ---------- Page heads ---------- */
  .nb-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.55rem;
  }
  .nb-crumb a { color: var(--faint); text-decoration: none; }
  .nb-crumb a:hover { color: var(--ink); text-decoration: underline; }

  .nb-title {
    font-size: clamp(2.7rem, 1.5rem + 4.6vw, 5.75rem);
    line-height: 0.96;
    letter-spacing: -0.032em;
    margin-block: 0.9rem 1.4rem;
    max-inline-size: 18ch;
  }
  .nb-index .nb-title {
    font-size: clamp(3.4rem, 1rem + 9.6vw, 9rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
    margin-inline-start: -0.04em;
    max-inline-size: none;
  }

  .nb-intro {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1.25rem clamp(2rem, 6vw, 6rem);
    align-items: end;
    padding-block: 1.5rem clamp(2rem, 1.5rem + 2vw, 3rem);
    border-block-start: 1px solid var(--ink);
  }
  .nb-intro .lead { max-inline-size: 34rem; }
  .nb-credit { color: var(--soft); font-size: 0.97rem; max-inline-size: 30rem; }
  .nb-credit strong { color: var(--ink); font-weight: 600; }

  @media (max-width: 52rem) {
    .nb-intro { grid-template-columns: minmax(0, 1fr); }
  }

  .nb-entry-head { max-inline-size: 52rem; }
  .nb-entry-head .lead { max-inline-size: 42rem; }
  .nb-entry-head .chips { margin-block-start: 1.5rem; }

  /* ---------- The list of entries on /notebook/ ---------- */
  .nb-list { list-style: none; border-block-start: 1px solid var(--rule); }

  .nb-item {
    position: relative;
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 23rem);
    grid-template-areas: "meta body fig";
    gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    border-block-end: 1px solid var(--rule);
  }

  .nb-item-meta {
    grid-area: meta;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--faint);
  }
  .nb-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: lining-nums;
    margin-block-end: 0.55rem;
  }

  .nb-item-body { grid-area: body; display: grid; gap: 0.6rem; align-content: start; }
  .nb-item h2 {
    font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.6rem);
    letter-spacing: -0.02em;
  }
  .nb-item h2 a { color: var(--ink); text-decoration: none; }
  /* The title link covers the whole row, so the picture and text are one big target. */
  .nb-item h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .nb-item h2 a:focus-visible { outline: none; }
  .nb-item:has(h2 a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
  .nb-item:hover h2 a { color: var(--accent); }
  .nb-item-body p { color: var(--soft); max-inline-size: 36rem; }
  .nb-item .nb-go {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 0.2rem;
    color: var(--accent);
    font-weight: 500;
  }
  .nb-go svg { inline-size: 0.95rem; block-size: 0.95rem; }

  .nb-item-fig {
    grid-area: fig;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--raised);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
  }
  .nb-item-fig img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  @media (max-width: 60rem) {
    .nb-item {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      grid-template-areas: "fig meta" "fig body";
      grid-template-rows: auto 1fr;
      row-gap: 0.5rem;
    }
    .nb-item-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; }
    .nb-num { font-size: 1.5rem; margin: 0; }
  }
  @media (max-width: 36rem) {
    .nb-item {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "fig" "meta" "body";
      grid-template-rows: none;
    }
    .nb-item-fig { margin-block-end: 0.35rem; }
  }

  /* Posters drawn from a page that follows the theme come in a light and a dark
     version; show the one that matches (the system setting or the toggle). */
  .nb-poster-dark { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nb-poster-light { display: none; }
    :root:not([data-theme="light"]) .nb-poster-dark { display: block; }
  }
  :root[data-theme="dark"] .nb-poster-light { display: none; }
  :root[data-theme="dark"] .nb-poster-dark { display: block; }

  .nb-colophon {
    margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
    max-inline-size: 40rem;
    font-size: 0.9375rem;
    color: var(--faint);
  }

  /* ---------- An entry page ---------- */
  .nb-stage { margin-block: clamp(2rem, 1.5rem + 2.5vw, 3.75rem) 0; }

  .nb-panel {
    background: var(--raised);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    padding: clamp(1rem, 0.55rem + 1.8vw, 1.9rem);
  }

  .nb-plate-white {
    background: #FFFFFF;
    border-radius: var(--radius);
    padding: clamp(0.4rem, 0.2rem + 1vw, 1rem);
    box-shadow: var(--shadow);
    color-scheme: light;
  }

  .nb-video { position: relative; aspect-ratio: 16 / 9; }
  .nb-video video { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .nb-video .media-toggle {
    position: absolute;
    inset-inline-end: 0.75rem;
    inset-block-end: 0.75rem;
    background: rgb(7 8 10 / 0.6);
    color: #E7E3F2;
    border-color: rgb(255 255 255 / 0.35);
  }

  .nb-poster-link { display: block; border-radius: var(--radius); }
  .nb-poster-link img { inline-size: 100%; border-radius: var(--radius); }

  .nb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-block-start: 1.5rem;
  }
  .nb-hint { font-size: 0.875rem; color: var(--faint); }

  .nb-notes { margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }
  .nb-notes > h2:first-child { margin-block-start: 0; }
  .nb-notes ol { padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; }
  .nb-notes li { color: var(--soft); }
  .nb-notes a { overflow-wrap: anywhere; }

  .nb-facts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
    margin-block-start: 1.5rem;
  }
  .nb-facts li {
    padding-block-start: 0.8rem;
    border-block-start: 1px solid var(--rule);
    color: var(--soft);
    font-size: 0.97rem;
  }
  .nb-facts strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-block-end: 0.3rem;
    font-variant-numeric: lining-nums;
  }

  /* ---------- Previous / next ---------- */
  .nb-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--ink);
  }
  .nb-pager a {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    padding-block: 0.4rem;
    color: var(--ink);
    text-decoration: none;
  }
  .nb-pager a:hover strong { color: var(--accent); }
  .nb-pager span {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .nb-pager strong {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }
  .nb-pager .nb-next { grid-column: 2; text-align: end; justify-items: end; }

  @media (max-width: 36rem) {
    .nb-pager { grid-template-columns: minmax(0, 1fr); }
    .nb-pager .nb-next { grid-column: 1; text-align: start; justify-items: start; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nb-go svg { transition: translate 0.2s var(--ease-out); }
  .nb-item:hover .nb-go svg { translate: 0.2rem 0; }
}

@media print {
  .nb-pager, .nb-actions { display: none !important; }
}