/* Licenses page — a reading page in the Toy Box roles (theme.css's header):
   the backdrop is the welcome board's, each type of work is one PAPER card under
   a LABEL in its section's colour, and every work is a row with a grey licence
   label. The TV shells' licence boards are the same cards in one column. Unlike
   the TV boards this page SCROLLS and is read at arm's length on a phone as often
   as across a room, so type is body-sized and the rows column down to one on a
   narrow screen.
   Colour/type/surface come from /shared/theme.css; this file owns layout only. */

.scene { position: fixed; }        /* the stage must not scroll away with the sheet */

/* Wide, so the rows can column into two or three (see .entries). */
.sheet {
  position: relative; z-index: 1;
  max-width: 100rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) 2.5rem;
  display: flex; flex-direction: column; gap: clamp(1.1rem, 2.4vw, 1.6rem);
}

.sheet__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(34px, 7vw, 54px);
}

/* ---- Type section ---- one paper card per type, its name the card's label.
   The colour is decoration, not meaning, so it just cycles the four chrome
   colours and a new section needs no CSS. The TV shells cycle the same four in
   the same order. */
#sections { display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 1.4rem); }
.sec { padding: clamp(0.9rem, 2.4vw, 1.3rem) clamp(1rem, 2.6vw, 1.5rem) clamp(0.5rem, 1.6vw, 0.9rem); }
.sec:nth-child(4n+1) { --sec: var(--red); }
.sec:nth-child(4n+2) { --sec: var(--blue); }
.sec:nth-child(4n+3) { --sec: var(--purple); }
.sec:nth-child(4n)   { --sec: var(--green); }
.sec__badge { --c: var(--sec); margin: 0 0 0.6rem; }

/* Both <noscript> only — so nothing else styles their links. */
.sec__must a, .sec__nojs a { color: var(--ink); text-underline-offset: 3px; }
.sec__nojs {
  margin: 0 0 0.9rem;
  font-weight: 600; color: var(--ink-2);
  font-size: 0.88rem; line-height: 1.5;
}
.sec__must {          /* the long-form credit */
  margin: 0 0 0.8rem;
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 0.7rem 0.85rem;
  font-weight: 700; font-size: 0.86rem; line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---- One work per row ---- what it is on the left, its licence on the right.
   The left box shrinks and wraps internally (min-width:0 is what lets it), so a
   long title never pushes the licence chip onto a line of its own.

   A column is added only when one more still leaves each of them wide enough to
   hold a title, its author and the chip on ONE line — a column that splits the
   author off reads as a broken row, so the breakpoints are set by that, not by
   how much width is free. A section with fewer entries than columns leaves the
   tail empty. The rows are parted by hairlines, and each column's first row has
   none, so the first rule is the one between two works. */
.entries {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
}
.entry {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.8rem;
  padding: 0.5rem 0;
  border-top: 2px solid var(--hairline);
}
.entry:first-child { border-top-color: transparent; }
@media (min-width: 64rem) {
  .entries { grid-template-columns: repeat(2, 1fr); }
  .entry:nth-child(-n+2) { border-top-color: transparent; }
}
@media (min-width: 100rem) {
  .entries { grid-template-columns: repeat(3, 1fr); }
  .entry:nth-child(-n+3) { border-top-color: transparent; }
}

/* The 12rem basis is the wrap threshold, not a width: wide enough that a phone
   drops the licence chip onto its own line (and gives the title the full row)
   rather than squeezing a title into two words per line. */
.entry__what { flex: 1 1 12rem; min-width: 0; }
/* Inside it, title and author are flex items so the author moves as ONE piece:
   beside the title while it fits, else on a line of its own under it. Inline,
   a wrap put half the author's name beside the title and half below. */
.entry__what { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; }
.entry__title {
  font-family: var(--font-display); font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent;
  min-width: 0;
}
.entry__title:hover { border-bottom-color: var(--sec); }
.entry__author {
  font-weight: 700; font-size: 0.86rem; color: var(--ink-2);
  white-space: nowrap;
}
/* The entry's one link to its terms (licenseChip()). A grey label: the section's
   colour is the card's, and twenty coloured chips in it would out-shout the
   works. The auto margin right-aligns the chip once it wraps to its own line. */
.entry__license { flex: none; margin-left: auto; text-decoration: none; white-space: nowrap; }

/* On a phone the row has no room for two columns: the title wraps to two lines
   and the licence chip ends up floating beside a fragment of it. Stack it
   instead — the title with its author, then the licence, in reading order. */
@media (max-width: 30rem) {
  .entry { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  /* the 12rem basis is a WIDTH threshold in a row; down a column it would be a
     12rem-tall box */
  .entry__what { flex: 0 0 auto; }
  .entry__license { margin-left: 0; }
}

/* ---- Foot of the sheet ---- the way back, then the legal row (.site-foot
   lives in theme.css; this is only where it sits). */
.sheet__back { align-self: center; text-decoration: none; }
.site-foot { margin-top: 0.2rem; }