/* Side panel ("sheet") — slides in from the right over the page --------------
   assets/js/core/sheet.js. Replaces legacy pop-ups so the user keeps their place. */

.pw-sheet {
  /* Half the screen on desktops; never narrower than a readable column or wider than needed */
  --sheet-w: clamp(560px, 50vw, 960px);
  position: fixed;
  inset: 0 0 0 auto;
  width: min(var(--sheet-w), 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pw-sheet[open] { display: flex; flex-direction: column; animation: pw-sheet-in .24s var(--ease); }
.pw-sheet.is-closing { animation: pw-sheet-out .18s var(--ease) forwards; }
.pw-sheet::backdrop { background: var(--overlay); animation: pw-fade-in .24s var(--ease); }
.pw-sheet.is-closing::backdrop { opacity: 0; transition: opacity .18s; }
.pw-sheet--lg { --sheet-w: clamp(720px, 60vw, 1120px); }
.pw-sheet--sm { --sheet-w: 420px; }

@keyframes pw-sheet-in  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pw-sheet-out { to { transform: translateX(100%); } }
@keyframes pw-fade-in   { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pw-sheet[open], .pw-sheet.is-closing, .pw-sheet::backdrop { animation: none; }
}

.pw-sheet__head {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.pw-sheet__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-sheet__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pw-sheet__title { font-size: var(--text-2xl); }
.pw-sheet__subtitle { color: var(--ink-2); }
.pw-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5) var(--space-6) var(--space-8); }
.pw-sheet__body:focus { outline: none; }
.pw-sheet__body--flush { padding: 0; }
.pw-sheet__foot {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.pw-sheet__foot > .u-grow { flex: 1 1 0; min-width: 160px; }
.pw-sheet__foot > .u-grow-start { margin-right: auto; }

/* Loading and error states */
.pw-sheet__loading { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-skeleton { display: block; height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: pw-shimmer 1.2s linear infinite; }
.pw-skeleton--short { width: 55%; }
@keyframes pw-shimmer { to { background-position: -200% 0; } }
.pw-sheet-message { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-4); text-align: center; color: var(--ink-2); }
.pw-sheet-message .icon { color: var(--crit); }

@media (max-width: 600px) {
  .pw-sheet { border-radius: 0; border-left: 0; }
  .pw-sheet__head, .pw-sheet__body, .pw-sheet__foot { padding-left: var(--space-4); padding-right: var(--space-4); }
}