/* Bottom sheet on phones (68 % high, drag to close); from 900 px wide a 420 px side panel, or a centred
   dialog over a dimmed scene when the sheet has .sheet-centered (train editions). */
.sheet { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 68dvh; display: flex; flex-direction: column;
  border-radius: 22px 22px 0 0; outline: none; pointer-events: auto;
  background: url('../assets/ui/ink-mountains.svg') right -80px bottom -30px / 420px auto no-repeat, var(--paper) var(--paper-grain);
  box-shadow: 0 -10px 30px rgba(var(--shadow-rgb), 0.2); transform: translateY(105%); transition: transform 0.32s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.sheet.is-open .sheet-panel { transform: translateY(0); }
.sheet-handle { width: 46px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: rgba(var(--shadow-rgb), 0.25); }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0.6rem 0.2rem 1.1rem; }
.sheet-title { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 1.6rem; color: var(--brand); }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.1rem calc(1.4rem + var(--safe-bottom)); -webkit-overflow-scrolling: touch; }
.sheet-body .card-section { padding-top: 0.4rem; border-bottom: 0; }
@media (min-width: 900px) {
  .sheet-panel { left: auto; top: 0; width: 420px; height: auto; border-radius: 22px 0 0 22px; transform: translateX(105%); }
  .sheet.is-open .sheet-panel { transform: translateX(0); }
  .sheet-handle { display: none; }
}
@media (min-width: 900px) {
  .sheet.sheet-centered { display: grid; place-items: center; padding: 1.5rem; background: rgba(var(--shadow-rgb), 0); transition: background 0.3s ease; }
  .sheet.sheet-centered.is-open { pointer-events: auto; background: rgba(var(--shadow-rgb), 0.42); }
  .sheet.sheet-centered .sheet-panel {
    position: relative; inset: auto; width: min(560px, 100%); height: auto; max-height: min(86dvh, 860px); border-radius: 22px;
    background-position: right -60px bottom -30px; box-shadow: 0 28px 70px rgba(var(--shadow-rgb), 0.38);
    opacity: 0; transform: translateY(18px) scale(0.97); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
  }
  .sheet.sheet-centered.is-open .sheet-panel { opacity: 1; transform: none; }
  .sheet.sheet-centered .sheet-header { padding: 0.9rem 0.8rem 0.3rem 1.5rem; }
  .sheet.sheet-centered .sheet-body { min-height: 0; padding: 0 1.5rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .sheet-panel, .sheet.sheet-centered { transition: none; } }