/* Phase 127 (docs/design/PACKS.md §13.3, §13.4): companion packs. Share her, the pack card and the
   update card in one panel (560 px; the card and the update 720/880 px), the pack line and ⋯ menu on
   Settings → Her → Companions, and the Companions shelf on Get more. Theme tokens only; 44 px
   targets; one column at 390 with the button row at the bottom. */
.pack-panel { width: min(560px, 100vw); max-width: 100vw; }
.pack-panel.wide { width: min(880px, 100vw); }
.pkp-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.pkp-body button:not(.tip), .pkp-body select, .pkp-body input:not([type="checkbox"]) { min-height: 44px; }
.pkp-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pkp-sec h4 { margin: 4px 0; display: flex; align-items: center; gap: 6px; }
.pkp-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pkp-check { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; }
.pkp-check > span:not(.pkp-size) { flex: 1 1 auto; min-width: 0; }
.pkp-check input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin: 0; }
.pkp-check.locked { color: var(--text-3); }
.pkp-size { flex: 0 0 auto; }
.pkp-sub { display: flex; flex-direction: column; padding-left: 28px; }
.pkp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pkp-field > span { display: flex; align-items: center; gap: 6px; }
.pkp-locks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 4px 12px; }
.pkp-out { display: flex; flex-direction: column; gap: 6px; }
.pkp-report { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pkp-report li { display: flex; flex-direction: column; gap: 2px; }
.pkp-report li.bad strong { color: var(--danger); }
.pkp-acts { position: sticky; bottom: -24px; margin-bottom: -24px; padding-bottom: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 8px 0; background: var(--surface-1); border-top: 1px solid var(--line); }
.pkp-strip { margin: 0; padding: 6px 10px; border-radius: var(--r-card); background: var(--surface-2); }
.pkp-strip.trust-file, .pkp-strip.trust-community { background: var(--warn-soft); color: var(--warn); }
.pkp-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pkp-face { width: 160px; height: 160px; max-width: 40vw; max-height: 40vw; border-radius: var(--r-card); object-fit: cover; background: var(--surface-2); }
.pkp-glyph { display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.pkp-who { flex: 1 1 14rem; min-width: 0; }
.pkp-who p { margin: 4px 0; }
.pkp-adult { margin: 0; padding: 6px 10px; border-left: 3px solid var(--warn); }
.pkp-fold summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.pkp-dials, .pkp-lines { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pkp-dials li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pkp-dials meter { width: 6rem; }
.pkp-lines li { padding: 2px 0; }
.pkp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.pkp-facts dt { color: var(--text-3); }
.pkp-facts dd { margin: 0; min-width: 0; }
.pkp-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-card); }
.pkp-diff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pkp-diff li { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pkp-diff li.red { border-left: 3px solid var(--danger); padding-left: 8px; }
.pkp-diff li.conflict { border-left: 3px solid var(--warn); padding-left: 8px; }
.pkp-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pkp-pick button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.pkp-from, .pkp-chip, .pkp-paused { flex: 1 1 12rem; min-width: 0; }
.pkp-chip { color: var(--accent); }
.pkp-paused { color: var(--warn); }
.pkp-menu { display: inline-block; margin-left: auto; }
.pkp-menu > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-card); line-height: 1; font-size: 1.1rem; }
.pkp-menu[open] > .share-menu-items { position: absolute; right: 0; z-index: 5; min-width: 14rem; }
.pkp-menu .share-menu-items button { min-height: 44px; width: 100%; text-align: left; }
.sto-card.sto-companion { flex-basis: 11rem; }
@media (max-width: 600px) {
  .pack-panel, .pack-panel.wide { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .sto-card.sto-companion { flex-basis: 8.25rem; }
  .pkp-facts { grid-template-columns: 1fr; }
  .pkp-acts > button { flex: 1 1 8rem; }
}