/* ==========================================================================
   shelf - every remaining dialog (add to list, import, backup, export, legal,
   ranking tools, prompts) dressed as a bottom sheet in both looks.
   ========================================================================== */
.overlay:not(.dpage-ov):not(.bsheet-ov):not(.search-overlay) {
  align-items: flex-end; padding: 0; background: var(--scrim);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.overlay:not(.dpage-ov):not(.bsheet-ov):not(.search-overlay) > .modal {
  width: min(430px, 100%) !important; max-width: 430px !important; margin: 0 auto;
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text); border: 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--shadow-sheet); font-family: var(--font-body);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: bsheet-in var(--dur-sheet) var(--ease-sheet);
}
.overlay > .modal::before { content: ''; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--line); }
@media (max-width: 699px) {
  .overlay:not(.dpage-ov):not(.bsheet-ov):not(.search-overlay) { overflow: hidden; }   /* see .bsheet in lists.css */
  .overlay:not(.dpage-ov):not(.bsheet-ov):not(.search-overlay) > .modal { will-change: transform; }
}
@media (min-width: 700px) {
  .overlay:not(.dpage-ov):not(.bsheet-ov):not(.search-overlay) { align-items: center; padding: 24px; }
  .overlay:not(.dpage-ov):not(.bsheet-ov):not(.search-overlay) > .modal { border-radius: var(--radius-dialog); }
  .overlay > .modal::before { display: none; }
}
.modal .hero { border-bottom: 1px solid var(--line); }
.modal .hero h2 { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: var(--display-tracking); text-transform: var(--display-transform); }
.modal .hero .sm-summary { color: var(--muted); font-size: 14px; max-height: none; }
.modal .close {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text);
  font-size: 0; display: inline-flex; align-items: center; justify-content: center;
}
.modal .close::before {
  content: ''; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.modal .toolbar { border-color: var(--line) !important; }

/* old buttons inside and outside dialogs take the look's button styles */
.btn:not(.btn-primary):not(.btn-quiet):not(.btn-danger):not(.btn-next) {
  height: auto; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-control);
  font-weight: 700; background: var(--text); color: var(--bg);
}
[data-look="soft"] .btn:not(.btn-primary):not(.btn-quiet):not(.btn-danger):not(.btn-next) { background: var(--accent-fill); color: var(--on-accent); }
.btn.ghost:not(.btn-primary):not(.btn-quiet) { background: var(--surface-2) !important; color: var(--text) !important; }
[data-look="marquee"] .btn.ghost:not(.btn-primary):not(.btn-quiet) { background: none !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.danger:not(.btn-primary) { background: none !important; color: var(--danger) !important; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--danger) 45%, transparent); }
.btn.danger-solid { background: var(--danger) !important; color: var(--on-danger) !important; }
.btn.sm:not(.btn-primary):not(.btn-quiet) { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn:not(.btn-primary):not(.btn-quiet):hover { filter: brightness(1.05); }

/* fields */
.field { min-height: 48px; border-radius: var(--radius-control); background: var(--surface-2); border: 1.5px solid transparent; color: var(--text); padding: 0 16px; font-size: 15px; }
.field:focus { border-color: var(--text); }
[data-look="soft"] .field:focus { border-color: var(--accent); }
textarea.field { padding: 12px 16px; border-radius: 18px; }
select.field { padding-right: 40px; }

/* add-to-list rows + chips used inside old sheets */
.al-row { border-radius: var(--radius-control) !important; }
.al-row.on { box-shadow: inset 0 0 0 2px var(--accent); }
.al-check.on { background: var(--accent-fill) !important; color: var(--on-accent) !important; border-color: transparent !important; }
.opt { border-radius: 999px !important; }
.opt.on { background: var(--text) !important; color: var(--bg) !important; border-color: transparent !important; }
.rt-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[data-look="soft"] .rt-label { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); font-family: var(--font-display); }

/* add-items sheet + import review keep their layout, with look colors */
.ai-modal { background: var(--surface) !important; }
.ai-seg.on { background: var(--text) !important; color: var(--bg) !important; }
.ai-add.on { background: var(--accent-fill) !important; color: var(--on-accent) !important; }

/* loading: skeleton blocks instead of a bare spinner */
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.skel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 0; }
.skel i { aspect-ratio: 2 / 3; border-radius: var(--radius-art); background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
[data-look="soft"] .skel i { border-radius: 18px; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* the old "empty" block (screens not rebuilt) */
.empty h3 { font-family: var(--font-display); font-weight: 800; text-transform: var(--display-transform); font-size: 26px; }

/* ---- Add by voice sheets (docs/PRD/voice-add.md) ---- */
.va-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 6px; }
.va-row { display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; text-align: left; }
.va-poster { width: 44px; height: 64px; flex: none; border-radius: 8px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.va-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.va-text b { font-size: 16px; line-height: 1.25; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-text small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.va-actions .btn { flex: 1 1 auto; min-width: 0; }
.va-search { display: flex; gap: 8px; align-items: center; }
.va-search .field { flex: 1; min-width: 0; }
.va-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow: auto; }
.va-pick { display: block; width: 100%; padding: 6px 4px; border-radius: 12px; }
.va-pick:active { background: var(--surface-2); }
.va-add { flex: none; display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; }