/* Social · player question packs (web/packs.html) — «موجة الناس». Layout only: tokens and primitives live in social.css, the form
   pieces (.page .fld .seg .feedback .foot) in entry.css. No hex colours here.
   The jade room is the table: every published pack is an ochre question sheet lying on it, its code on an ink chip. The editor is three
   level ochre sheets; each question row and each of the nine final answers is a paper slip that is dashed while empty and turns solid
   once written (JAM3H: dashed = nothing here yet). The one bold moment is the published code, printed big on the ink ticket. */

.page.packs { max-inline-size: 62rem; display: flex; flex-direction: column; gap: var(--sp-5); }
.packs main { display: block; }

/* ---------- header ---------- */
.pk-head { display: grid; gap: var(--sp-2); }
.pk-home { justify-self: start; display: inline-flex; align-items: center; min-block-size: var(--target-min); font-size: var(--t-xl); line-height: 1.3; color: var(--ink); text-decoration: none; }
.pk-home:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.pk-title { font: 700 min(clamp(2.25rem, 10vw, 3.5rem), 14vw)/1.3 var(--font-display); text-wrap: balance; } /* display size: not × --scale, it never clips at 320 */
.pk-lead { max-inline-size: 38em; font-weight: 600; font-size: var(--t-md); line-height: 1.65; text-wrap: pretty; }
.pk-tabs { max-inline-size: 30rem; }

/* ---------- browse ---------- */
#browse { display: flex; flex-direction: column; gap: var(--sp-5); }
.pk-search { display: grid; gap: var(--sp-1); max-inline-size: 38rem; }
.pk-search > label { font-weight: 700; line-height: 1.45; text-wrap: balance; }
.pk-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pk-row > .field { flex: 1 1 12em; min-inline-size: 0; }
.pk-list { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-1) 0; display: grid; gap: var(--sp-8) var(--sp-7);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); align-items: start; }
.pk-list.one { grid-template-columns: minmax(0, 40rem); }
.pk-shared-h { font-weight: 800; font-size: var(--t-lg); margin-block-end: var(--sp-3); }
#shared:empty { display: none; }

.pk-card { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5) var(--sp-5) var(--sp-4); font-size: var(--t-md); }
.pk-card-t { font-size: var(--t-xl); font-weight: 800; line-height: 1.4; text-wrap: balance; overflow-wrap: anywhere; }
.pk-by, .pk-for, .pk-n { font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.pk-for { font-weight: 700; }
.pk-code { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.pk-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.pk-code-row .chip { font-size: var(--t-md); min-block-size: var(--target-min); padding-inline: .9em; }
.pk-code-row .btn { font-size: var(--t-md); padding-inline: .9em; }
.pk-copied { justify-self: start; max-inline-size: 100%; }
.pk-peek { border-block-start: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); margin-block-start: var(--sp-1); }
.pk-peek summary { display: flex; align-items: center; gap: var(--sp-2); min-block-size: var(--target-min); font-weight: 800; cursor: pointer; list-style: none; }
.pk-peek summary::-webkit-details-marker { display: none; }
.pk-peek summary::after { content: ""; inline-size: .55em; block-size: .55em; margin-inline-start: auto; border: solid currentColor; border-width: 0 3px 3px 0; rotate: 45deg; translate: 0 -.15em; }
.pk-peek[open] summary::after { rotate: -135deg; translate: 0 .15em; }
.pk-peek summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-chip); }
.pk-peek-body { display: grid; gap: var(--sp-3); padding-block: var(--sp-1) var(--sp-2); font-size: var(--t-sm); line-height: 1.55; }
.pk-qlist, .pk-olist { margin: 0; padding-inline-start: 1.8em; display: grid; gap: var(--sp-2); }
.pk-qlist li { font-weight: 600; overflow-wrap: anywhere; }
.pk-qlist small { display: block; font-size: 1em; font-weight: 400; }
.pk-olist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); column-gap: var(--sp-6); gap: var(--sp-1) var(--sp-6); font-weight: 600; }
.pk-olist li { overflow-wrap: anywhere; }
.pk-peek-final { overflow-wrap: anywhere; }
#more { align-self: flex-start; }
#listMsg .btn.quiet { min-block-size: var(--target-min); padding-inline: .4em; font-size: 1em; }

/* ---------- create ---------- */
.pk-form { display: flex; flex-direction: column; gap: var(--sp-8); max-inline-size: 46rem; padding-inline: var(--sp-1); }
.pk-form > .notice { font-size: var(--t-md); }
.pk-part { display: grid; gap: var(--sp-4); padding: var(--sp-5) min(var(--sp-5), 5vw) var(--sp-6); font-size: var(--t-md); }
.pk-part h3 { font-size: var(--t-xl); font-weight: 800; line-height: 1.35; }
.pk-hint { font-weight: 600; font-size: var(--t-sm); line-height: 1.6; text-wrap: pretty; margin-block-start: calc(-1 * var(--sp-2)); }
.pk-fields { display: grid; gap: var(--sp-4); }
.pk-form .fld > label { text-wrap: balance; }
.pk-form textarea.field { min-block-size: 4.6em; resize: vertical; field-sizing: content; max-block-size: 12em; }
.fmeta { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--t-sm); line-height: 1.5; }
.fmsg { flex: 1; min-inline-size: 0; font-weight: 700; color: var(--error); text-wrap: pretty; overflow-wrap: anywhere; }
.fmsg:not(:empty)::before { content: ""; display: inline-block; vertical-align: -.2em; inline-size: 1.15em; block-size: 1.15em; margin-inline-end: .35em; background: currentColor;
  -webkit-mask: var(--g-error) center / contain no-repeat; mask: var(--g-error) center / contain no-repeat; }
.cnt { flex: none; margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
#qsMsg:empty { display: none; }
#qsMsg { font-size: var(--t-sm); }

/* question slips: dashed while the audience question is empty, solid once written; coral number disc (fill only, ink figure) */
.pk-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.pk-q { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); border: var(--edge) dashed var(--ink); border-radius: var(--r-card); }
.pk-q.filled { border-style: solid; background: color-mix(in srgb, var(--paper) 55%, transparent); box-shadow: var(--lift-sm); }
.pk-q-head { display: flex; align-items: center; gap: var(--sp-3); min-block-size: var(--target-min); }
.pk-q-n { flex: none; display: grid; place-items: center; inline-size: 2.1em; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent);
  font-weight: 800; font-size: var(--t-md); line-height: 1; }
.pk-q:not(.filled) .pk-q-n { background: transparent; border-style: dashed; }
.pk-q-t { flex: 1; font-size: var(--t-md); font-weight: 800; }
.pk-del { flex: none; font-size: var(--t-sm); }
.pk-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.pk-count { font-weight: 700; font-size: var(--t-sm); }

/* the nine final answers: a board of paper slips, dashed until written */
.pk-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.pk-opt { padding: var(--sp-2) var(--sp-2) 0; border: 2px dashed var(--ink); border-radius: var(--r-card); }
.pk-opt.filled { border-style: solid; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.pk-opt .fld { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 var(--sp-2); }
.pk-opt .fmeta { grid-column: 1 / -1; min-block-size: 1.5em; }
.pk-opt-n { display: grid; place-items: center; min-inline-size: 1.9em; aspect-ratio: 1; border: 2px dashed var(--ink); border-radius: 50%; font-weight: 800; font-size: var(--t-sm); }
.pk-opt.filled .pk-opt-n { border-style: solid; background: var(--accent); }

/* the optional TV phrasing folds under its question until wanted */
.pk-alt summary { display: flex; align-items: center; gap: var(--sp-2); min-block-size: var(--target-min); font-weight: 700; font-size: var(--t-sm); cursor: pointer; list-style: none; }
.pk-alt summary::-webkit-details-marker { display: none; }
.pk-alt summary::before { content: ""; flex: none; inline-size: .6em; block-size: .6em; border: solid currentColor; border-width: 0 3px 3px 0; rotate: -45deg; }
.pk-alt[open] summary::before { rotate: 45deg; translate: 0 -.15em; }
.pk-alt summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-chip); }

.fld.bad > label { color: var(--error); }
.pk-submit { display: grid; gap: var(--sp-3); justify-items: start; }
.pk-submit .btn.primary { font-size: var(--t-lg); }
#draftState { max-inline-size: 100%; }

/* ---------- published: the ink ticket ---------- */
.pk-done { display: grid; gap: var(--sp-4); max-inline-size: 40rem; }
.pk-ticket { --qr-size: min(calc(8rem * var(--scale)), 42vw); grid-template-columns: 1fr; padding: var(--sp-5); font-size: var(--t-md); box-shadow: var(--lift); rotate: -1deg; }
.pk-ticket .qr-frame { justify-self: start; }
.pk-ticket .qr-code { font-size: min(calc(2.6rem * var(--scale)), 9.5vw); line-height: 1.25; } /* «P-XXXXXX» is one unbroken run: it fits 320 at 200 % text */
@media (min-width: 36em) { .pk-ticket { grid-template-columns: 1fr auto; } .pk-ticket .qr-frame { grid-column: 2; grid-row: 1; } }
.pk-ticket .qr-code ::selection { background: var(--sheet); color: var(--ink); }
.pk-ticket-t { color: var(--paper); font-weight: 700; overflow-wrap: anywhere; }
.pk-ticket .qr-title:focus { outline: none; }
.pk-ticket .qr-title:focus-visible { outline: 3px solid var(--sheet); outline-offset: 2px; }
.pk-link { grid-column: 1 / -1; color: var(--paper); font-size: var(--t-sm); line-height: 1.5; }
.pk-link a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--paper); text-decoration-thickness: 2px; text-underline-offset: .25em; word-break: break-all; }
.pk-link a ::selection, .pk-link a::selection { background: var(--sheet); color: var(--ink); }
.pk-ticket .acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.pk-ticket .acts .btn { font-size: var(--t-md); padding-inline: .6em; }
.pk-done-note { font-weight: 600; text-wrap: pretty; }
.pk-done-next { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 22.4375em) { .pk-ticket .acts { grid-template-columns: 1fr; } }
html[data-text="large"] .pk-ticket .acts { grid-template-columns: 1fr; }

/* wide screens: the editor keeps a readable column; browse cards fill the table */
@media (min-width: 60em) {
  .pk-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sp-8); }
  .pk-home { grid-column: 1 / -1; }
  .pk-title { grid-column: 1; }
  .pk-lead { grid-column: 1; }
}

/* ---------- modes ---------- */
html[data-motion="reduce"] .pk-ticket, html[data-effects="reduce"] .pk-ticket { rotate: 0deg; }
html[data-contrast="high"] :is(.pk-q-n, .pk-opt-n) { background: var(--paper); }
html[data-contrast="high"] :is(.pk-q, .pk-opt).filled { background: var(--paper); }
@media (forced-colors: active) {
  .pk-q, .pk-opt { border-color: CanvasText; }
  .pk-q-n, .pk-opt-n { forced-color-adjust: none; background: Canvas; color: CanvasText; border-color: CanvasText; }
  .fmsg:not(:empty)::before { forced-color-adjust: none; background: CanvasText; }
  .pk-peek summary::after, .pk-alt summary::before { border-color: CanvasText; }
}