/* Samples (06-DESIGN §13.5). The page is the bench: a compact H1 with the fiction note in the margin, the tape
   tabs and the state selector, the format panel as the top band of the paper, the sheet. Then the report
   (prose, variant words follow the panel), the pilot door, the print footer. */

/* ---------- top: H1 and the fiction note ---------- */
.page-samples .bench { padding-top: var(--s-5); }
.page-samples .top { row-gap: var(--s-4); align-items: start; }
.page-samples .top h1 { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.08; }
.page-samples .top h1 :is(.l1, .l2) { display: inline; }
.page-samples .top h1 .fn-ref { font-size: .45em; padding-left: .08em; }
.page-samples .top .fn { max-width: 34em; }
.page-samples .top-say { margin-top: var(--s-3); font-size: .9375rem; line-height: 1.55; max-width: 30em; }

/* ---------- the format panel: the paper's top band, the tabs sit on it ---------- */
.page-samples .bench-controls { margin-top: var(--s-6); }
.page-samples .fmt-wrap--full {
  position: relative; margin: var(--s-3) calc(var(--gut) * -1) 0;
  background: var(--sheet); box-shadow: var(--shadow-sheet);
  padding: var(--s-4) clamp(16px, 3vw, 44px);   /* the sheet's own side padding */
}
/* the conventions are a line of the sheet's header, in the reviewer's hand: words, the chosen one ringed */
.page-samples .fmt-h { font: italic 400 1.0625rem/1.3 var(--serif); color: var(--pen); }
.page-samples .fmt-wrap--full .fmt { margin-top: var(--s-1); gap: 0 var(--s-6); }
.page-samples .fmt-wrap--full .fmt-notes { margin-top: var(--s-1); }
.page-samples .fmt-wrap--full .link-button { margin-top: var(--s-1); }
.page-samples .tab-x { display: none; }
@media (min-width: 37.5em) { .page-samples .tab-x { display: inline; } }
/* the sheet continues the band: one paper */
.page-samples .bench-tape .sheet { margin-top: 0; }
.page-samples .bench-tape .sheet::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }

/* the report reads the panel: what you change is written in, marked like the sheet's own changes */
.page-samples :is(.rp-verb, .rp-en, .rp-pt, .rp-uk, .rp-coded, .print-foot) { display: none; }

/* ---------- tabs and stage ---------- */
@supports selector(:has(*)) {
  .page-samples .tapes { margin-bottom: var(--s-4); }
  .page-samples .tape-tab { flex: 1 1 0; }
  .page-samples .tape-tab > span { justify-content: center; text-align: center; line-height: 1.25; padding: 6px var(--s-3); }

  .page-samples:has(#s-vb:checked) .rp-clean,
  .page-samples:has(#o-en:checked) .rp-bi,
  .page-samples:has(#o-pt:checked) :is(.rp-bi, .rp-tr),
  .page-samples:has(#sp-uk:checked) .rp-us,
  .page-samples:has(#n-id:checked) .rp-named { display: none; }
  .page-samples:has(#s-vb:checked) .rp-verb,
  .page-samples:has(#o-en:checked) .rp-en,
  .page-samples:has(#o-pt:checked) .rp-pt,
  .page-samples:has(#sp-uk:checked) .rp-uk,
  .page-samples:has(#n-id:checked) .rp-coded { display: inline; background: var(--hl-soft); box-shadow: 0 0 0 2px var(--hl-soft); }
}

/* ---------- report ---------- */
.page-samples .dossier { margin-top: var(--s-8); row-gap: var(--s-6); }
.page-samples .dossier-text p { margin-top: var(--s-4); font-size: var(--fs-lede); line-height: 1.55; max-width: 30em; }
.page-samples .dossier-text .dossier-say { font-size: .9375rem; color: var(--ink-soft); }

/* ---------- pilot ---------- */
.page-samples .pilot { margin-top: var(--s-8); row-gap: var(--s-3); }
.page-samples .pilot-door .door { font: 400 clamp(1.75rem, 3.5vw, 3.25rem)/1.12 var(--serif); letter-spacing: var(--tr-h2); padding: 0 0 .22em; }
.page-samples .pilot-door .door span { display: inline-block; }
.page-samples .pilot-door .door .ink { left: 0; bottom: 0; width: 100%; height: .22em; }
.page-samples .pilot-door .door .ink path { stroke-width: 4px; }
.page-samples .pilot-line { font-size: var(--fs-lede); line-height: 1.55; max-width: 31em; }
.page-samples .pilot-tip { margin-top: var(--s-3); max-width: 24rem; }
.page-samples .pilot-tip .ink { display: none; }

/* ---------- sm ---------- */
@media (min-width: 37.5em) {
  .page-samples .fmt-wrap--full { margin-inline: var(--sheet-bleed); }
  @supports selector(:has(*)) {
    .page-samples .tape-tab { flex: 0 0 auto; }
    .page-samples .tape-tab > span { padding: 0 var(--s-4); }
  }
}

/* ---------- md: the note beside the H1 ---------- */
@media (min-width: 56.25em) {
  .page-samples .top { row-gap: 0; }
  .page-samples .top h1 { grid-column: 1 / span 8; }
  .page-samples .top-side { grid-column: 9 / span 4; padding-top: .35rem; }

  .page-samples .dossier { margin-top: var(--s-9); align-items: start; }
  .page-samples .dossier-text { grid-column: 1 / span 5; }
  .page-samples .report { grid-column: 7 / span 6; }

  .page-samples .pilot { margin-top: var(--s-9); }
  .page-samples .pilot-door { grid-column: 1 / span 10; }
  .page-samples .pilot-line { grid-column: 1 / span 6; }
  /* the tip hangs under the end of the link, a pen arrow up to it */
  .page-samples .pilot-tip { grid-column: 8 / span 5; grid-row: 2; margin-top: var(--s-4); border: 0; padding: 0; transform: rotate(-1.2deg); transform-origin: 0 0; }
  .page-samples .pilot-tip .ink { display: block; left: -78px; top: -34px; width: 70px; height: 35px; transform: scaleY(-1); }
}

/* ---------- xl: tabs on the band, stage selector at the right, the report's notes in the gutter ---------- */
@media (min-width: 75em) {
  .page-samples .top h1 { grid-column: 1 / span 9; }
  .page-samples .top-side { grid-column: 10 / span 3; }
  .page-samples .fmt-wrap--full { container-type: inline-size; margin-top: 0; }

  @supports selector(:has(*)) {
    .page-samples .bench-controls { container-type: inline-size; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-top: var(--s-6); }
    .page-samples .tapes { margin: 0 0 0 var(--sheet-bleed); gap: 3px; }
    .page-samples .tape-tab > span { min-height: 42px; padding: 0 var(--s-5); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-strong); }
    .page-samples .tape-tab input:not(:checked) + span { margin-top: 4px; min-height: 38px; }
    .page-samples .tape-tab input:checked + span { background: var(--sheet); box-shadow: inset 0 2px 0 0 var(--gold), 0 -6px 14px -10px rgba(0, 34, 51, .25); }
    .page-samples .stage { justify-content: flex-end; margin-bottom: 4px; }
    .page-samples .stage legend { text-align: right; }
  }

  .page-samples .dossier-text { grid-column: 1 / span 4; position: sticky; top: var(--s-6); }
  .page-samples .report { grid-column: 7 / span 6; }
}
/* room for tabs and the whole selector on one line: the legend joins it */
@container (min-width: 74rem) {
  .page-samples .stage legend { width: auto; margin: 0 var(--s-2) 0 0; align-self: center; text-align: left; }
}

/* ---------- print: the delivered sheet (samples.js), † on top, a line at the foot ---------- */
@page { margin: 14mm 14mm 16mm; }
@media print {
  .page-samples :is(.fmt-wrap--full, .pilot, .scrub, .rp-pen) { display: none !important; }
  .page-samples :is(.turn, .report, .bench-foot) { break-inside: avoid; }
  .page-samples .dossier { break-before: page; }
  .page-samples .dossier-text { position: static; }
  .page-samples .print-foot { display: block; position: fixed; left: 0; right: 0; bottom: 0; font: 8.5pt/1.3 var(--sans); text-align: center; color: #000; }
}