/* name-modal.css — shared "name this" bottom-sheet modal (2026-07-29, per
   Owen). Replaces window.prompt() everywhere in the app. Visual shape is
   copied from Chapters' existing "New chapter" modal (.modal-wrap/.modal/
   .modal-title/.modal-type/.modal-input/.modal-btn/.modal-cancel) so it
   reads as the same design the rest of the app already established —
   just under generic .name-modal-* class names since this version is
   shared/injected by js/components/nameModalComponent.js rather than
   hand-built per page.

   Scoped to .shell (position:absolute;inset:0, matching the shell's own
   rounded corners) rather than position:fixed on the viewport — every
   other overlay/modal in this app is scoped the same way, since .shell is
   the "phone screen" these mockups render inside. */

.name-modal-wrap{position:absolute;inset:0;background:rgba(0,0,0,0.7);border-radius:26px;display:none;align-items:flex-end;z-index:100;}
.name-modal-wrap.open{display:flex;}
.name-modal{background:var(--bg-card);border-radius:20px 20px 0 0;padding:20px 18px 36px;width:100%;}
.name-modal-title{font-size:16px;font-weight:500;color:var(--text-primary);margin-bottom:4px;text-align:center;}
.name-modal-sub{font-size:12px;color:var(--text-muted);margin-bottom:14px;text-align:center;}
.name-modal-input{width:100%;background:var(--bg-control);border:0.5px solid var(--border-default);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--text-primary);outline:none;font-family:inherit;margin-bottom:12px;}
/* --text-faint/--text-tertiary aren't defined on every page's :root (e.g.
   edit-chapters.html only defines a subset) — fall back to --text-muted so
   this still looks reasonable rather than rendering unstyled. */
.name-modal-input::placeholder{color:var(--text-faint, var(--text-muted));}
/* Multiline variant (2026-08-07) — same sheet, swapped in for the Comment
   quick-add on Moments feed cards instead of the single-line input. */
.name-modal-textarea{width:100%;background:var(--bg-control);border:0.5px solid var(--border-default);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--text-primary);outline:none;font-family:inherit;margin-bottom:12px;min-height:90px;resize:none;line-height:1.4;}
.name-modal-textarea::placeholder{color:var(--text-faint, var(--text-muted));}
.name-modal-confirm{width:100%;padding:13px;background:var(--text-primary);color:var(--bg-shell);border:none;border-radius:12px;font-size:15px;font-weight:500;cursor:pointer;margin-bottom:8px;font-family:inherit;}
.name-modal-cancel{width:100%;padding:10px;background:transparent;color:var(--text-tertiary, var(--text-muted));border:none;font-size:14px;cursor:pointer;font-family:inherit;}