/* Tono — scoped additions to site.css.
 *
 * **Everything here is under `body.tono`, and that is not a style choice.**
 * `assets/site.css` is shared with Huxle's six live pages, which serve a shipped
 * App Store listing. Restyling anything global to fix Tono would silently
 * restyle those. Scoping means this file cannot reach them.
 *
 * Two fixes and one addition:
 *
 *   1. MEASURE. Reviewed at 1280px, the prose and the bullet list ran the full
 *      ~1200px container — about 120 characters a line, against the 60-75 the
 *      body of research on reading actually supports. Mobile was fine, which is
 *      exactly why it survived: the container does the constraining there and
 *      nothing does on desktop.
 *
 *   2. LIST DENSITY. Four bullets with bold lead-ins at full width read as a
 *      wall. They get room and a hanging marker instead.
 *
 *   3. THE COLOUR WALL. The marketing page for a 117-colour camera showed no
 *      colour at all — it asserted the product instead of demonstrating it,
 *      which is the same failure the app's own first-run screen has. The wall
 *      is generated from LookLibrary.swift and Theme.swift, so the names and
 *      hexes are the ones that ship.
 */

/* ---- 1. Measure ------------------------------------------------------- */

body.tono main .wrap > p,
body.tono main .wrap > ul,
body.tono .block > p,
body.tono .block > ul {
  max-width: 66ch;
}

/* The lede is bigger, so it needs fewer characters for the same line length. */
body.tono .lede { max-width: 54ch; }

/* Headings can run wider than prose — they are scanned, not read. */
body.tono h1 { max-width: 20ch; }
body.tono h2 { max-width: 26ch; }

/* ---- 2. Lists --------------------------------------------------------- */

body.tono main ul {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

body.tono main ul > li {
  position: relative;
  padding-left: 26px;
  line-height: 1.65;
}

/* A hanging rule rather than a bullet: it lines the items up with the mono
   spec labels used everywhere else on this site. */
body.tono main ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 12px;
  height: 2px;
  background: currentColor;
  opacity: .32;
}

body.tono main ul > li > strong { font-weight: 600; }

/* ---- 3. The colour wall ----------------------------------------------- */

/* `.block > ul.wall`, not `.wall` — the measure rule above is `body.tono .block > ul`
   at (0,2,2) and would otherwise out-specify a bare `.wall` at (0,2,1), silently
   clamping the wall to 66ch. Caught by measuring the rendered width (707px in an
   1100px viewport) rather than by reading the file. */
body.tono .block > ul.wall,
body.tono ul.wall {
  list-style: none;
  padding-left: 0;
  max-width: none;              /* the wall is data, not prose — it takes the container */
  display: grid;
  gap: 2px;                     /* hairline gaps, so it reads as one object */
  /* **Explicit counts, not auto-fit.** There are exactly eight families, and
     auto-fit resolved to three at desktop width — which leaves a ninth cell
     empty and showing the grid's own background, reading as a missing tile.
     Every count below divides eight. */
  grid-template-columns: repeat(4, 1fr);
  margin-top: 28px;
  border: 1px solid var(--hair);
  background: var(--hair);
}

body.tono .wall > li {
  padding: 0;                   /* override the list rules above */
  background: var(--paper);
}

body.tono .wall > li::before { content: none; }

body.tono .fam {
  display: grid;
  grid-template-areas:
    "chip zh   n"
    "chip en   n"
    "eg   eg   eg";
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 18px 18px 16px;
}

/* The colour itself. A block, not a dot — at 44px it is legible as a colour
   rather than as decoration, and it is the only place colour appears. */
body.tono .fam-chip {
  grid-area: chip;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  background: var(--fam);
  /* The palest families (#E8D45A, #9AA4A8) would otherwise float on white. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}

body.tono .fam-zh {
  grid-area: zh;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  align-self: end;
}

body.tono .fam-en,
body.tono .fam-n {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

body.tono .fam-en { grid-area: en; align-self: start; }
body.tono .fam-n  { grid-area: n; align-self: center; font-variant-numeric: tabular-nums; }

body.tono .fam-eg {
  grid-area: eg;
  margin-top: 10px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* These MUST carry the same specificity as the base rule above. Written as
   `body.tono .wall` first time round, they matched their media query and then
   lost to `body.tono .block > ul.wall` — the columns never changed and the
   media query looked innocent. Measured, not read: matchMedia said true while
   getComputedStyle still reported four columns. */
@media (max-width: 1080px) {
  body.tono .block > ul.wall,
  body.tono ul.wall { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  body.tono .block > ul.wall,
  body.tono ul.wall { grid-template-columns: 1fr; }
  body.tono .fam { padding: 16px; }
}

/* ---- Reduced motion ---------------------------------------------------- */
/* Nothing here animates, so there is nothing to disable. Stated rather than
   omitted so the next person does not have to check. */