/* lotterypuzzle atlas — puzzle folio (one record). Contract: docs/DESIGN_SYSTEM_2026.md */
@layer pages {
  .folio {
    --tone: var(--ink-2);
    padding-bottom: 1rem;
  }
  .folio--open-scan { --tone: var(--open-ink); }
  .folio--open-key { --tone: var(--key-ink); }

  /* ── head ── */
  .folio-head { padding-top: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem); }
  .folio-hero {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 3.5rem;
  }
  .folio-num {
    font-size: clamp(6.25rem, 2.5rem + 17vw, 15rem);
    font-stretch: 38%;
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: var(--tone);
  }
  .folio-hero-meta { display: grid; gap: 0.9rem; justify-items: start; padding-bottom: 0.4rem; }
  .folio-line {
    font-family: var(--font-mono);
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
    color: var(--ink-2);
    overflow-wrap: anywhere;
  }
  .folio-line b { font-weight: 500; color: var(--ink); }
  .folio-dot { margin-inline: 0.65rem; color: var(--ink-3); }

  .folio > section {
    margin-top: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
  }
  .folio-h { font-size: var(--step-2); margin-bottom: 1.5rem; }
  .folio-sub { font-size: var(--step-1); font-stretch: 70%; }

  /* ── where it sits on the line ── */
  .slice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 2rem clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
  }
  .slice { width: 100%; height: auto; overflow: visible; }
  .slice-grid-lines line { stroke: var(--rule-strong); stroke-dasharray: 2 5; }
  .slice text { font-family: var(--font-mono); fill: var(--ink-3); }
  .slice-spot { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
  .slice-col rect { fill: var(--found); opacity: 0.8; transition: opacity 0.15s; }
  .slice-col--open-scan rect { fill: var(--open); opacity: 0.55; }
  .slice-col--open-key rect { fill: var(--key); opacity: 0.55; }
  .slice-col:hover rect { opacity: 1; }
  .slice-col.is-current rect { opacity: 1; stroke: var(--ink); stroke-width: 2; }
  .slice-frontier line { stroke: var(--line); stroke-width: 2; stroke-dasharray: 8 5; }
  .slice-frontier text { fill: var(--ink); font-weight: 500; }
  .slice-rail line { stroke: var(--rule-strong); }
  .slice-here path { fill: var(--found); }
  .slice-here--open-scan path { fill: var(--open); }
  .slice-here--open-key path { fill: var(--key); }
  .slice-rail .slice-here text { fill: var(--ink); font-weight: 500; }
  .slice-figure figcaption { margin-top: 1rem; }
  .swatch--line { height: 0; width: 1.1rem; border-radius: 0; background: none; border-top: 2px dashed var(--line); }
  .slice-copy { display: grid; gap: 1rem; align-content: center; justify-items: start; }
  .slice-sentence {
    font-family: var(--font-display);
    font-stretch: 58%;
    font-weight: 720;
    font-size: var(--step-2);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--tone);
  }
  .slice-thesis { font-weight: 600; }
  .slice-model { color: var(--ink-2); font-size: 0.95rem; max-width: 36rem; }
  @media (max-width: 56rem) {
    .slice-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 40rem) {
    .slice text { font-size: 18px; }
    .slice tspan { font-size: 12px; }
  }

  /* ── record ── */
  .folio .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .folio .kv-wide { grid-column: 1 / -1; }
  .folio-solution .kv { border-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .folio-solution .kv > div { border-bottom: 0; padding-bottom: 0.9rem; }
  .folio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.3rem; }
  .folio .kv dd.mono { font-size: 0.95rem; }
  .folio-expr {
    font-family: var(--font-display);
    font-stretch: 50%;
    font-weight: 720;
    font-size: var(--step-2);
    line-height: 1.1;
  }
  .folio-hex,
  .folio-size {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
  }
  .folio .mono { overflow-wrap: anywhere; }
  .folio-tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .folio-size .note { font-size: 0.88rem; color: var(--ink-2); }
  .folio-unknown { color: var(--ink-3); }
  .folio-record > .callout { margin-top: 1.75rem; max-width: 52rem; }
  @media (max-width: 44rem) {
    .folio .kv { grid-template-columns: 1fr; }
    .folio-hex, .folio-size { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  }

  /* ── solution ── */
  .folio-pos { margin-top: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: grid; gap: 0.6rem; }
  .folio-pos-text { color: var(--ink-2); max-width: 46rem; }
  .folio-pos-text b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
  .pos { width: 100%; height: 2.75rem; overflow: visible; }
  .pos line { vector-effect: non-scaling-stroke; }
  .pos-rail { stroke: var(--rule-strong); stroke-width: 4; }
  .pos-fill { stroke: var(--found); stroke-width: 4; }
  .pos-tick { stroke: var(--ink-3); stroke-width: 1; }
  .pos-mark { stroke: var(--ink); stroke-width: 2; }
  .pos-dot { stroke: var(--ink); stroke-width: 15; stroke-linecap: round; }
  .pos-ends { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-3); }
  .folio-scalar { margin-top: 1.5rem; }
  .folio-scalar-hex { overflow-wrap: anywhere; font-size: 0.9rem; }

  /* ── mentioned in the atlas ── */
  .folio-mentions-lead { max-width: 46rem; color: var(--ink-2); margin-bottom: 1.25rem; }
  .folio-mentions-count { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-3); white-space: nowrap; }
  .mentions { max-width: 56rem; }
  .mentions-room {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.35rem 1.5rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--rule);
  }
  .mentions-room:first-child { border-top: 0; padding-top: 0; }
  .mentions-room dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.2rem; }
  .mentions-room dt a { color: var(--ink-3); text-decoration-color: var(--rule-strong); }
  .mentions-room dt a:hover { color: var(--ink); }
  .mentions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
  .mentions-list li { overflow-wrap: anywhere; }
  .mentions-list a { color: var(--ink); text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 0.2em; font-weight: 500; }
  .mentions-list a:hover { text-decoration-color: var(--open); text-decoration-thickness: 2px; }
  .mentions-ctx { display: block; font-size: 0.85rem; color: var(--ink-3); }
  .mentions-list .badge { margin-left: 0.4rem; vertical-align: 0.1em; }
  .folio-mentions-more { max-width: 56rem; margin-top: 0.5rem; }
  .folio-mentions-more > summary { justify-content: flex-start; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; }
  @media (max-width: 44rem) {
    .mentions-room { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  }

  /* ── method ── */
  .folio-method-text { max-width: 42rem; color: var(--ink-2); }
  .folio-method-links { margin-top: 1rem; gap: 0.4rem 1.75rem; font-size: 0.95rem; }
  .folio-method-links a { color: var(--ink); text-decoration-color: var(--open); text-decoration-thickness: 2px; font-weight: 600; }
}

@layer pages {
  @media (prefers-color-scheme: dark) {
    .slice-col--found rect { fill: color-mix(in srgb, var(--found) 55%, var(--ink-3)); }
    .slice-here--found path { fill: color-mix(in srgb, var(--found) 55%, var(--ink-3)); }
  }
}