/* ═══════════════ Trivia Rumble — the pack library ═══════════════ */
/* From Packs.dc.html. Loaded only by /packs and /pack/:id, since nothing else
   on the SEO shell draws a player chip. Tokens and the page frame come from
   tokens.css and topic.css; the chip comes from chip.css, which is the same
   component the game uses. */

.pack-shelf { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.pack-shelf-name {
  font-weight: 900; font-size: 0.82rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: -2px;
}

/* A pack name is a title, so it wraps rather than cutting. Everything else in
   the library is allowed to be trimmed; the thing a person named is not. */
.pack-name {
  font-weight: 800; font-size: 1.05rem; line-height: 1.15;
  overflow-wrap: anywhere; margin: 0;
}
.pack-name a { color: var(--ink); }
.pack-name a:hover { color: var(--gold); }
.pack-titles { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pack-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 600; font-size: 0.8rem; color: var(--ink-dim); margin: 0;
}
.pack-emoji {
  width: 56px; height: 56px; border-radius: 16px; background: var(--bg-sink);
  display: grid; place-items: center; font-size: 1.9rem; flex: none;
}
.pack-emoji.is-ghost {
  background: transparent; border: 2px dashed var(--line);
  font-size: 1.25rem; color: var(--ink-dim);
}
.pack-author { background: transparent; box-shadow: none; padding: 0; }

/* One pack gets a card. A single row would read as a list that had lost the
   rest of itself. */
.pack-card {
  background: var(--bg-raise); border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 2px var(--gold);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.pack-head { display: flex; align-items: flex-start; gap: 14px; }
.pack-by { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pack-peek { font-weight: 700; font-size: 0.82rem; color: var(--gold); white-space: nowrap; }
.pack-card .pack-host { width: 100%; }

/* Three or more become rows: emoji, titles, and the one thing the row is for. */
.pack-row {
  background: var(--bg-raise); border-radius: var(--r-ctl);
  box-shadow: inset 0 0 0 2px var(--line);
  padding: 14px; display: flex; align-items: center; gap: 14px;
}
.pack-row .pack-emoji { width: 48px; height: 48px; border-radius: 14px; font-size: 1.6rem; }
.pack-host { flex: none; padding: 12px 18px; font-size: 0.95rem; }

.pack-ghost {
  border-radius: var(--r-ctl); border: 2px dashed var(--line);
  padding: 14px; display: flex; align-items: center; gap: 14px; color: var(--ink-dim);
}
.pack-ghost.is-card { border-radius: var(--r-panel); padding: 18px; }
.pack-ghost .pack-titles b { font-weight: 800; font-size: 0.95rem; }
.pack-ghost .pack-titles span { font-weight: 600; font-size: 0.78rem; }
.pack-ghost .pack-titles { gap: 3px; }
.pack-write { font-weight: 700; font-size: 0.82rem; color: var(--gold); flex: none; }

.pack-empty {
  background: var(--bg-raise); border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 2px var(--gold);
  padding: 24px 20px; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.pack-empty h2 { font-weight: 900; font-size: 1.4rem; }
/* The one call to action on this site that leads to an account, saying so
   where the person can read it before they tap rather than after. */
.pack-fine { font-weight: 600; font-size: 0.78rem; color: var(--ink-dim); }
.pack-note { font-weight: 600; font-size: 0.82rem; color: var(--ink-dim); text-align: center; }

/* ─────────── the detail page ─────────── */
/* Host first: whoever is here arrived from a row that already sold it. */
.pack-hero { display: flex; align-items: flex-start; gap: 14px; }
.pack-hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.05; overflow-wrap: anywhere; }
.pack-cta { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.pack-cta .btn { width: 100%; }
.pack-cta .pack-fine { text-align: center; }

.pack-qs { display: flex; flex-direction: column; gap: 8px; }
.pack-qs-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.pack-qs-head h2 { font-weight: 900; font-size: 1.05rem; }
.pack-qs-head span { font-weight: 600; font-size: 0.78rem; color: var(--ink-dim); }
.pack-q {
  display: flex; gap: 12px; align-items: baseline;
  background: var(--bg-sink); border-radius: var(--r-ctl); padding: 12px 14px;
}
.pack-q i {
  font-style: normal; font-weight: 900; font-size: 0.78rem; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; flex: none;
}
.pack-q span { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.pack-more { font-weight: 600; font-size: 0.8rem; color: var(--ink-dim); }

.pack-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 0.88rem; color: var(--ink-dim); }

/* One dim line at the foot, never near Host. A report is not an action the
   page is asking for; it is one it must not make hard to find. */
.pack-report {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-weight: 600; font-size: 0.8rem; color: var(--ink-dim);
  margin-top: 4px;
}
.pack-report button {
  font: inherit; font-weight: 700; color: var(--gold);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.pack-flag { flex: none; color: var(--ink-dim); }

.pack-sheet {
  position: fixed; inset: 0; z-index: 70;
  background: oklch(0.12 0.02 40 / 0.72);
  display: grid; place-items: end center;
}
.pack-sheet-panel {
  background: var(--bg-raise); width: min(520px, 100%);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  box-shadow: inset 0 0 0 2px var(--line);
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.pack-sheet-panel h2 { font-weight: 900; font-size: 1.2rem; }
.pack-reason {
  font: inherit; font-weight: 700; font-size: 0.95rem; text-align: left;
  background: var(--bg-sink); color: var(--ink); border: 0; cursor: pointer;
  border-radius: var(--r-ctl); padding: 14px 16px;
  box-shadow: inset 0 0 0 2px var(--line);
}
.pack-reason.is-on { box-shadow: inset 0 0 0 2px var(--gold); background: oklch(0.33 0.05 85); }
.pack-sheet-actions { display: flex; gap: 10px; margin-top: 4px; }
.pack-sheet-actions .btn { flex: 1; }

@media (min-width: 900px) {
  .pack-shelf { gap: 14px; }
  .pack-hero h1 { font-size: 2.6rem; }
}

@media (max-width: 360px) {
  /* The board's rule, and its width: at 320 an author written name and a Greek
     verb phrase cannot share a row, so Host leaves the third column and goes
     full width underneath. At 390 they fit, so it stays put. */
  .pack-row { flex-wrap: wrap; }
  .pack-row .pack-host { width: 100%; }
}