/* Dad Joke Museum — product-local redesign styles (PR2, 2026-10-08): the
   wall-label wing pages (scan mode by default, CSS-only Quiz-me toggle),
   the action row (Copy / Send / Print+), the print tray pill, the /e/<id>/
   share card and the lunchbox fold-note print sheet. Kept separate from
   base.css (the shared family-kit shape) because this is all specific to
   how this museum displays a joke. */

/* ---------- quiz bar ---------- */
.quizbar { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 .2rem; flex-wrap: wrap; }
.quiz-check {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.quiz-toggle {
  display: inline-flex; align-items: center; gap: .4em; min-height: var(--tap); padding: 0 .9rem;
  border: 1px solid var(--rope); border-radius: 999px; color: var(--rope); font: 700 .88rem/1 var(--narrow);
  letter-spacing: .03em; text-transform: uppercase; cursor: pointer; background: var(--placard);
}
.quiz-check:checked + .quiz-toggle { background: var(--rope); color: var(--on-rope); }
.quiz-check:focus-visible + .quiz-toggle { outline: 3px solid var(--gilt); outline-offset: 2px; }
.scanlabel { font-size: .82rem; color: var(--ink-2); }
body:has(.quiz-check:checked) .scanlabel { visibility: hidden; }
body:has(.quiz-check:checked) .quizbar::after { content: "Quiz mode — tap an exhibit's rope to reveal it"; font-size: .82rem; color: var(--ink-2); }

/* ---------- the wall / wall labels ---------- */
.hang { display: grid; gap: .9rem; margin: 1.2rem 0 1.6rem; }
.label {
  background: var(--placard); border: 1px solid var(--gilt-line); border-left: 3px solid var(--gilt);
  border-radius: 3px; padding: 1rem 1.1rem .9rem; scroll-margin-top: 14px; min-width: 0;
}
.label:target { outline: 3px solid var(--gilt); outline-offset: 1px; }
.setup { margin: 0; font: 700 1.05rem/1.4 var(--sans); color: var(--ink); }

/* scan mode (default): punchline is plain server-rendered text; the native
   <details> rope is hidden entirely (it has nothing to toggle here). Quiz
   mode shows the rope and hides the punchline until it is lifted — see
   below. The punchline text stays IN THE HTML either way (verify.js asserts
   every exhibit's setup AND punchline are present in the wing page's
   markup); only CSS display changes.
   `.punch` is a SIBLING of <details>, not a child of it — see the comment on
   wallLabel() in build.js for why: a closed <details>' non-summary content
   gets `content-visibility: hidden` from the UA, which no author display
   rule on a descendant can override, so nesting the punchline inside made it
   invisible by default in every scan-mode view (the bug this block replaces;
   fixed in review of PR #32, 2026-10-09). Keeping <details> out of the
   punchline's ancestry sidesteps that box completely. */
.punch-d { display: none; }
.punch-d > summary { list-style: none; }
.punch-d > summary::-webkit-details-marker { display: none; }
.punch { display: block; margin: .4rem 0 0; font: italic 400 1.08rem/1.42 var(--serif); color: var(--ink); }

body:has(.quiz-check:checked) .punch-d { display: block; }
body:has(.quiz-check:checked) .punch-d > summary {
  display: flex; align-items: center; gap: .5em; min-height: 46px; margin: .3rem 0 0; cursor: pointer;
  border-top: 2px dashed var(--rope); border-bottom: 2px dashed var(--rope); color: var(--rope);
  font: 600 .82rem/1.2 var(--narrow); letter-spacing: .06em; text-transform: uppercase;
}
body:has(.quiz-check:checked) .punch-d > summary::before { content: "\2014"; }
/* Rope not yet lifted: hide the punchline (its sibling). Rope lifted
   (.punch-d[open]): hide the rope itself instead, and the punchline — no
   longer matched by the rule above, since that rule requires :not([open])
   — falls back to its plain `display: block` from above. */
body:has(.quiz-check:checked) .punch-d:not([open]) + .punch { display: none; }
body:has(.quiz-check:checked) .punch-d[open] { display: none; }
body:has(.quiz-check:checked) .punch-d[open] + .punch { animation: groan-in .2s ease; }
@media (prefers-reduced-motion: reduce) { body:has(.quiz-check:checked) .punch-d[open] + .punch { animation: none; } }

.foot { margin-top: .7rem; }
.hair { height: 1px; background: var(--line); margin: 0 0 .55rem; }
.tomb {
  margin: 0; font: 500 .72rem/1.6 var(--narrow); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.tomb a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gilt); text-underline-offset: 3px; }
.tomb .sep { color: var(--gilt); padding: 0 .4em; }

.acts { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  min-height: var(--tap); padding: 0 .95rem; border-radius: 3px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--green); background: transparent; color: var(--green); font: 700 .85rem/1 var(--sans);
}
.act:hover { text-decoration: none; }
.act.copy { background: var(--rope); border-color: var(--rope); color: var(--on-rope); }
.act.copy:hover { filter: brightness(1.06); }
/* ink-on-gilt measured 4.12:1 at 13.6px bold, below the 4.5:1 floor — on-green
   on green (9.06:1) is already used by .tray-pill, so "in tray" reuses it
   rather than a one-off color (fixed in review of PR #32, 2026-10-09). */
.act.print.in-tray { background: var(--green); border-color: var(--green); color: var(--on-green); }
.act[aria-live] { min-width: 4.5rem; }

/* ---------- sticky print tray pill ---------- */
.tray-pill {
  position: fixed; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  display: inline-flex; align-items: center; height: 48px; padding: 0 1.1rem; border-radius: 999px;
  background: var(--green); color: var(--on-green); border: 1px solid var(--gilt); text-decoration: none;
  font: 700 .88rem/1 var(--sans); box-shadow: 0 10px 24px -10px rgba(22, 25, 27, .55);
}
.tray-pill:hover { text-decoration: none; filter: brightness(1.08); }

/* ---------- the /e/<id>/ share card ---------- */
.share-wrap { max-width: 44rem; margin: 0 auto; }
.share-wrap .back { display: inline-flex; align-items: center; min-height: var(--tap); margin-bottom: .6rem; font-weight: 700; }

/* ---------- /print/ tray preview (screen) ---------- */
.tray-list { display: grid; gap: .6rem; margin: 1.2rem 0; }
.tray-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--placard);
  border: 1px solid var(--gilt-line); border-radius: 3px; padding: .7rem .9rem;
}
.tray-row p { margin: 0; font-size: .95rem; }
.tray-row .rm { background: transparent; border: 1px solid var(--line); color: var(--ink-2); min-height: var(--tap); padding: 0 .8rem; border-radius: 3px; cursor: pointer; font: 700 .82rem/1 var(--sans); }
.tray-empty { color: var(--ink-2); }
.print-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.2rem 0; }

/* ---------- print, generally: chrome and controls never print ---------- */
@media print {
  .site-head, .site-footer, .tray-pill, .quizbar, .acts, .skip-link { display: none !important; }
}

/* ---------- lunchbox fold-note sheet (print only, /print/ page) ---------- */
@media screen { .fold-sheets { display: none; } }
@media print {
  @page { size: letter; margin: .4in; }
  .print-hero, .tray-list, .print-actions { display: none !important; }
  .fold-sheets { display: block; }
  .fold-sheet {
    display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr);
    gap: .25in; break-after: page; height: 10in;
  }
  .fold-sheet:last-child { break-after: auto; }
  .fold-note {
    border: 1px dashed #888; display: grid; grid-template-rows: 1fr 1fr; break-inside: avoid; position: relative;
  }
  .fold-note::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 1px dotted #888; }
  .fold-note .fn-out, .fold-note .fn-in { padding: .14in .16in; overflow: hidden; }
  .fold-note .fn-out { font: 700 10.5pt/1.25 Arial, sans-serif; display: flex; align-items: center; }
  .fold-note .fn-in { font: italic 400 10.5pt/1.25 Georgia, serif; display: flex; align-items: center; transform: rotate(180deg); color: #333; }
  .fold-note .fn-mark { position: absolute; bottom: 3px; right: 6px; font: 600 6.5pt/1 Arial, sans-serif; letter-spacing: .08em; color: #999; text-transform: uppercase; }
}

/* ---------- responsive: a bit more room from ~720px up ---------- */
@media (min-width: 720px) {
  .hang { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1.1rem; }
  .label { display: flex; flex-direction: column; }
  .label .foot { margin-top: auto; }
}