/* Doodles (vision §E5): H1 with the count in mono, the copy, View: Grid / Sketchbook, mood chips
   with counts, [Show me a random one]; then the wall of square sheets (6 / 4 / 2 columns, 12 px
   apart, each under the lamp's pool on hover) or the Sketchbook (css/v3/features/sketchbook.css).
   html[data-view="sketchbook"] is set before first paint from ?view=sketchbook (doodles.html), so
   the right view shows from the first frame. */
@layer pages {
  .doodles {
    display: block;
  }
  /* A legacy doodles.html#D0150 link is on its way to that doodle's page. */
  :root[data-legacy-art] main {
    visibility: hidden;
  }

  /* ------------------------------------------------------------------------------ head */
  .dd-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-4);
    padding-block: clamp(var(--space-5), 4vw, var(--space-7)) clamp(var(--space-5), 3vw, var(--space-6));
  }
  .dd-head > * {
    grid-column: 1 / -1;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .dd-head > * {
      grid-column: 1 / span 8;
    }
    .dd-head > .dd-moods {
      grid-column: 1 / -1;
    }
  }
  .dd-head__title {
    display: flex;
    align-items: flex-start;
    gap: 0.22em;
    font-size: var(--step-5);
    font-weight: 360;
    line-height: 0.98;
    letter-spacing: -0.015em;
  }
  /* The count, set like a catalogue number against the cap height (as on Paintings). */
  .dd-head__count {
    margin-block-start: 0.34em;
    color: var(--ink-2);
    font: 450 var(--step--1)/1 var(--font-mono);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }
  .dd-head__lead {
    max-inline-size: 52ch;
    color: var(--ink-2);
  }
  .dd-head__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-block-start: var(--space-1) !important;
  }
  .dd-random {
    white-space: nowrap;
  }
  .dd-moods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .dd-moods__label {
    margin-inline-end: var(--space-2);
  }
  /* Phones: the moods ride one row that scrolls sideways, so the doodles start sooner. The row has
     room above and below for the focus ring, and fades out at the edge to say there is more. */
  @media (max-width: 599.98px) {
    .dd-moods {
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      margin-inline: calc(var(--margin) * -1);
      padding: 6px var(--margin);
      scroll-padding-inline: var(--margin);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--margin), #000 calc(100% - 40px), transparent);
      mask-image: linear-gradient(90deg, transparent, #000 var(--margin), #000 calc(100% - 40px), transparent);
    }
    .dd-moods::-webkit-scrollbar {
      display: none;
    }
    .dd-moods > * {
      flex: none;
    }
  }

  /* ------------------------------------------------------------------------------ views */
  .dd-book {
    display: none;
  }
  :root[data-view="sketchbook"] .dd-book {
    display: block;
  }
  :root[data-view="sketchbook"] .dd-wall,
  :root[data-view="sketchbook"] .dd-moods {
    display: none;
  }
  /* Room for the book before the module draws it (nothing below jumps when it arrives): about its
     height, which follows the screen (one square page on phones, a spread elsewhere). */
  .sketchbook-host:empty {
    min-block-size: min(calc(100svh - var(--header-h) - 60px), 900px);
  }
  @media (max-width: 599.98px) {
    .sketchbook-host:empty {
      min-block-size: calc(100vw + 290px);
    }
  }

  /* ------------------------------------------------------------------------------ the wall */
  .dd-wall__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-5);
    margin-block-end: var(--space-5);
  }
  .dd-status {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--step--1);
  }
  .dd-status strong {
    color: var(--ink);
    font: 500 1em/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .dd-drafts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--ink-2);
    font-size: var(--step--1);
  }

  /* Square sheets on the wall: 2 / 4 / 6 columns, 12 px between sheets. */
  .dd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: var(--space-5);
    margin: 0;
    padding: 0;
  }
  @media (min-width: 600px) {
    .dd-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .dd-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      row-gap: var(--space-6);
    }
  }
  /* Until the doodles arrive the wall keeps a screen of room, so the footer never jumps up. */
  .dd-grid[data-state="loading"] {
    min-block-size: 100svh;
  }
  .dd-grid > li {
    min-inline-size: 0;
  }
  .dd-tile {
    --tile-glow: clamp(28px, 1rem + 2.6vw, 60px);
  }
  /* Every sheet keeps a square place; a scan with its banner trimmed (local preview) sits on the
     same baseline at its true, slightly shorter shape. */
  .dd-sheet {
    display: grid;
    align-items: end;
    aspect-ratio: 1;
  }
  .dd-sheet > img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--ar, 1);
  }
  .dd-tile .label__title {
    --label-size: var(--step--1);
  }
  .dd-noscript {
    max-inline-size: var(--measure);
    color: var(--ink-2);
  }
  .dd-noscript a {
    color: var(--ink);
  }
}