/* Sheets (openSheet in js/ui/overlay.js): bottom sheet on phones (radius 26, drag the grab to close),
   centred modal on desktop (radius 22). JS toggles .open on the next frame and .closing on close (removed after 260 ms);
   .sheet.dragging / .settle are set while the grab is dragged. Sizes: .sheet-sm / -md / -lg / -palette. */
@layer components {
  #overlay-root { position: relative; z-index: 100; }
  .overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; overscroll-behavior: contain; }
  .overlay-backdrop { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 240ms; }
  .overlay.open .overlay-backdrop { opacity: 1; }
  .overlay.closing .overlay-backdrop { opacity: 0; transition-duration: 220ms; }
  .sheet {
    position: relative; width: 100%; max-height: calc(100dvh - var(--safe-t) - 12px); margin: 0; overflow: hidden;
    display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    box-shadow: var(--shadow-sheet), 0 56px 0 var(--surface);   /* the second shadow fills the gap while a spring overshoots */
    transform: translateY(100%); transition: transform var(--t-sheet) var(--ease-spring); overscroll-behavior: contain;
  }
  .overlay.open .sheet { transform: none; }
  .overlay.closing .sheet { transform: translateY(110%); transition: transform 260ms var(--ease-out); }
  .sheet.dragging { transition: none; will-change: transform; }
  .sheet.settle { transition: transform 420ms var(--ease-settle); }   /* drag released: springs back with a small overshoot */
  .sheet-grab { height: 22px; flex: none; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
  .sheet-grab::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--rule-2); }
  .sheet-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 20px 12px; }
  .sheet-titles { flex: 1; min-width: 0; }
  .sheet-title { font-size: 22px; }
  .sheet-sub { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-caption); }
  .sheet-head .icon-btn { margin: -6px -10px 0 0; color: var(--ink-2); }
  .sheet-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 20px 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-wrap: anywhere; }
  .sheet-body.flush { padding: 0; }
  .sheet-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px calc(14px + var(--safe-b)); background: var(--paper-2); }
  .sheet-foot .spacer { flex: 1; }
  .sheet-foot .btn-primary, .sheet-foot .btn-success, .sheet-foot .btn-secondary, .sheet-foot .btn-danger { flex: 1 1 auto; min-width: 0; }
  .sheet-foot .btn-ghost, .sheet-foot .btn-danger-text, .sheet-foot .btn-icon, .sheet-foot .icon-btn { flex: none; }

  /* palette: drops from the top on phones, high modal on desktop */
  .overlay:has(.sheet-palette) { align-items: flex-start; }
  .sheet-palette { border-radius: 0 0 var(--r-sheet) var(--r-sheet); transform: translateY(-100%); max-height: 80dvh; }
  .overlay.closing .sheet-palette { transform: translateY(-100%); }
  .sheet-palette .sheet-grab { display: none; }

  /* dialog bodies */
  .confirm-text { color: var(--ink-2); line-height: 1.55; margin-bottom: 8px; }
  .choice-list { display: flex; flex-direction: column; margin: 8px 0; }
  .choice { display: flex; flex-direction: column; gap: 2px; min-height: 56px; justify-content: center; padding: 8px 0; border-top: 1px solid var(--rule); text-align: left; }
  .choice:first-child { border-top: 0; }
  .choice.danger .choice-label { color: var(--danger); }
  .choice-label { font-weight: 600; }
  .choice-hint { font-size: var(--fs-caption); color: var(--ink-2); }

  @media (min-width: 761px) {
    .overlay { align-items: center; padding: 24px; }
    .sheet {
      width: min(100%, 580px); max-height: min(88dvh, 860px); border-radius: 22px; box-shadow: var(--shadow-pop);
      opacity: 0; transform: translateY(18px) scale(.96); transition: transform 380ms var(--ease-settle), opacity 200ms;
    }
    .overlay.open .sheet { opacity: 1; transform: none; }
    .overlay.closing .sheet { opacity: 0; transform: translateY(8px) scale(.99); transition-duration: 180ms; }
    .sheet-sm { width: min(100%, 460px); }
    .sheet-lg { width: min(100%, 740px); }
    .sheet-xl { width: min(100%, 980px); }
    .sheet-palette { width: min(100%, 640px); margin-top: 10vh; border-radius: 22px; }
    .sheet-grab { display: none; }
    .sheet-head { padding-top: 22px; }
    .sheet-foot { justify-content: flex-end; padding-bottom: 14px; }
    .sheet-foot .btn-primary, .sheet-foot .btn-success, .sheet-foot .btn-secondary, .sheet-foot .btn-danger { flex: none; }
  }
  @media (max-width: 760px) and (max-height: 520px) { .sheet { border-radius: 0; max-height: 100dvh; } }
  @media (hover: hover) { .choice:hover { background: var(--paper-2); } }
}