/* Copy / Move selection mode — checkboxes on cards, spotlight mask, floating action bar.
   Colors are keyed to --accent (orange) so the whole flow reads as one "selection" system. */

/* Spotlight: dim everything, lift the name grid + the bar above the mask so they stay lit/live. */
.sm-mask{ position:fixed; inset:0; z-index:40; background:rgba(4,7,12,.55); }
body.sm-active main.wrap{ position:relative; z-index:45; }

/* Per-card checkmark (top-left). Name shifts right to clear it; nothing else on the card changes. */
body.sm-active .card{ position:relative; cursor:pointer; }
body.sm-active .card .full{ padding-left:34px; }
.sm-check{ position:absolute; top:13px; left:13px; width:24px; height:24px; border-radius:50%;
  border:2px solid var(--line); background:var(--panel2); display:grid; place-items:center;
  font-size:.86rem; line-height:1; font-weight:800; transition:border-color .12s, background .12s; z-index:2; }
.sm-check::after{ content:"✓"; color:transparent; }
.card.sm-sel{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--panel));
  box-shadow:0 0 0 1px var(--accent), 0 0 18px -6px var(--accent); }
.card.sm-sel .sm-check{ border-color:var(--accent); background:var(--accent); }
.card.sm-sel .sm-check::after{ color:#20150a; }

/* Floating action bar — orange, co-equal filled Copy/Move. */
/* One consistent bar at EVERY width: a fixed-width rounded card centered at the bottom, laid out as
   three rows — count (row 1), Copy | Move (row 2), Select all | Cancel (row 3). It holds its width
   until the viewport is narrower than it, then shrinks to fit. Same look on desktop, tablet, phone. */
.sm-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:60;
  width:min(440px, calc(100vw - 20px));
  display:grid; grid-template-columns:1fr 1fr; gap:10px 8px;
  background:var(--panel2); border:1.5px solid var(--accent);
  border-radius:16px; box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 18px -6px var(--accent);
  padding:12px; }
.sm-count{ grid-column:1 / -1; text-align:center; color:var(--ink); font-weight:700; font-size:.92rem; }
.sm-sep{ display:none; }
#smCopy{ grid-column:1 / 2; grid-row:2; }
#smMove{ grid-column:2 / 3; grid-row:2; }
#smAll{ grid-column:1 / 2; grid-row:3; }
#smCancel{ grid-column:2 / 3; grid-row:3; }
/* Nothing selected → Copy/Move are hidden; pull Select all/Cancel up so there's no empty row. */
.sm-bar.sm-empty #smAll{ grid-row:2; }
.sm-bar.sm-empty #smCancel{ grid-row:2; }
.sm-bar .sm-ghost{ width:100%; background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:var(--r-pill); padding:9px 13px; font-size:.85rem; cursor:pointer; white-space:nowrap; }
.sm-bar .sm-ghost:hover{ border-color:var(--accent); color:var(--ink); }
.sm-btn{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--accent); border-radius:var(--r-pill); padding:9px 15px; font-size:.85rem;
  font-weight:700; cursor:pointer; white-space:nowrap; }
.sm-btn svg{ width:16px; height:16px; display:block; }
.sm-fill{ background:var(--accent); color:#20150a; }
.sm-fill:hover{ filter:brightness(1.05); }

/* Destination modal divider: same .lk-sep as the list dropdowns, but the modal's rows + big New-list
   button are larger, so give it more breathing room to read as roomy as the dropdown does. */
#smDestOv .lk-sep, #menuModalOv .lk-sep{ margin:14px 2px; }
/* "My lists" modal: same roomy divider above +New list — zero the neighbours' margins so it reads 14/14 like the others. */
#menuModalOv .menu-lists{ margin-bottom:0; }
#menuModalOv .menu-newwrap{ margin-top:0; }
/* The selected-count in the modal title, tinted pink to stand out. The h2 is a flex row (share.css),
   which collapses the whitespace around this span, so restore a word-space with margin. */
#smDestOv h2 .sm-num{ color:var(--pink); margin:0 .25em; }

/* Undo button embedded in the success toast. */
.sm-undo{ margin-left:6px; background:transparent; border:1px solid currentColor; color:inherit;
  border-radius:var(--r-pill); padding:2px 11px; font-size:.82rem; font-weight:700; cursor:pointer; line-height:1.4; }
.sm-undo:hover{ background:rgba(0,0,0,.14); }


/* Landscape-mobile cards float their action row into the top-right corner (see styles.css); the
   checkmark sits top-left, so no extra handling is needed there. */
/* "DESTINATION LIST:" header → list gap: match the Merge modal exactly. There the .merge-label's own
   6px margin-bottom is the sole spacer (its field has no top margin), so zero .menu-picks' 14px top
   margin here and let the label's 6px control the gap — deterministic (6 + 0) regardless of collapse. */
#smDestOv .merge-label{ margin-bottom:6px; }
#smDestOv .menu-picks{ margin-top:0; }

/* Copy/Move confirmation toast keeps the standard teal .ok color (same as every other success toast);
   .sm-toast only adds the stacked layout + icon sizing below, not a color change. */
/* Stack the confirmation on its own lines so a long list name wraps down instead of widening the toast:
   line 1 = "Copied N names to:", line 2 = the “list name”, (move) line 3 = the Undo button. */
.auth-toast.sm-toast .sm-toast-head{ display:block; }
.auth-toast.sm-toast .sm-toast-list{ display:block; font-weight:700; overflow-wrap:anywhere; margin-top:2px; }
.auth-toast.sm-toast .sm-undo{ display:inline-block; margin-left:0; margin-top:9px; }
/* The Copy/Move glyphs carry no intrinsic width/height (they're CSS-sized in the floating-bar buttons),
   so give them an explicit size in the toast or they collapse to 0. ok/err icons keep their inline 20px. */
.auth-toast.sm-toast .toast-ico svg{ width:20px; height:20px; }
/* Merge confirmation toast (Option 1): a small uppercase MERGED / INTO label above each list name, so
   long source/destination names wrap on their own lines instead of widening the toast. Shares .sm-toast. */
.auth-toast.sm-toast .mt-lab{ display:block; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; opacity:.72; font-weight:600; margin-top:9px; }
.auth-toast.sm-toast .mt-lab:first-of-type{ margin-top:6px; }