/* A2: the launcher screen (ui/launcher.js) — see base.css's #app rule for how the two trade places.
   .launcher-state's own display isn't gated by a CSS class: ui/launcher.js's showLauncher() sets
   inline style.display on each of the five states directly (the active one cleared back to this
   file's default, everything else forced to 'none'), so the *default* here must already be the
   visible layout — don't add a `.launcher-state{display:none}` rule, that would invert the logic. */
#launcherWrap{position:fixed;inset:0;z-index:5;display:none;flex-direction:column;
  background:
    radial-gradient(ellipse at 30% 20%, #10162a 0%, var(--bg) 55%),
    radial-gradient(ellipse at 80% 80%, #1a1030 0%, transparent 60%);}
#launcherWrap.show{display:flex;}

#launcherTop{display:flex;align-items:center;gap:10px;padding:18px 24px;flex-shrink:0;}
#launcherTop .title{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;}
#launcherSearch{width:220px;margin-left:auto;background:rgba(24,22,29,.85);border:1px solid var(--line);
  color:var(--text);border-radius:20px;padding:7px 14px;font-size:12.5px;outline:none;font-family:inherit;}
#launcherSearch:focus{border-color:var(--accent);}
#launcherTop .auth-user-badge{margin-left:auto;}

/* A4: transient message (storage/vault.js's resolveLauncherEntry(), ui/launcher.js's
   showLauncherToast()) — e.g. a `?vault=<id>` deep link that no longer resolves. Centered under
   the header rather than corner-anchored like #saveToast, since the launcher has no fixed toolbar
   position to anchor to and this needs to be noticed on an otherwise mostly-static screen. */
#launcherToast{align-self:center;margin:0 24px 4px;font-size:12.5px;color:var(--text);
  background:rgba(24,22,29,.95);border:1px solid var(--line);border-radius:9px;padding:8px 14px;
  opacity:0;pointer-events:none;transition:opacity .3s;max-width:440px;text-align:center;}
#launcherToast.show{opacity:1;}

#launcherBody{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:20px 24px 40px;}
.launcher-state{display:flex;flex-direction:column;align-items:center;width:100%;max-width:640px;}

/* ---- loading skeleton ---- */
#launcherLoading{gap:10px;padding-top:20px;}
.launcher-skel-row{width:100%;height:56px;border-radius:10px;background:linear-gradient(90deg,
  var(--surface) 25%, var(--surface-hover) 37%, var(--surface) 63%);background-size:400% 100%;
  animation:launcher-shimmer 1.4s ease infinite;}
@keyframes launcher-shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* ---- empty / offline / error: centered card, shared shape ---- */
#launcherEmptyCard,.launcher-status-card{background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:36px;width:100%;max-width:440px;text-align:center;
  box-shadow:0 30px 80px #000e;margin-top:6vh;}
#launcherEmptyCard h2{margin:0 0 8px;font-size:22px;display:flex;align-items:center;justify-content:center;gap:9px;}
#launcherEmptyCard p{color:var(--dim);font-size:13.5px;line-height:1.7;margin:0 0 18px;}
#launcherEmptyCard .btn{margin-bottom:8px;}
.launcher-status-card i{font-size:26px;color:var(--dim);margin-bottom:10px;}
.launcher-status-card h3{margin:0 0 6px;font-size:16px;}
.launcher-status-card p{color:var(--dim);font-size:12.5px;line-height:1.6;margin:0 0 16px;}

/* ---- vault list ---- */
#launcherList{gap:10px;}
#launcherGrid{width:100%;display:flex;flex-direction:column;gap:8px;}
.launcher-empty-hint{color:var(--dim);font-size:12.5px;padding:16px 4px;}
.launcher-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);
  border-radius:12px;background:rgba(24,22,29,.5);transition:border-color .15s,background .15s;}
.launcher-row:hover{border-color:var(--surface-hover);background:rgba(24,22,29,.85);}
.lr-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;}
.lr-fav{color:var(--dim-faint);cursor:pointer;flex-shrink:0;}
.lr-fav.on{color:#ffcf6b;}
.lr-info{min-width:0;}
.lr-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lr-meta{font-size:11px;color:var(--dim);margin-top:2px;}
/* B6: live-lease badge — informational only, opening the vault still goes through the normal
   collision dialog (ui/lock-dialog.js) rather than being blocked at the launcher level. */
.lr-locked{color:#ffcf6b;}
.lr-locked i{margin-right:2px;}
.lr-actions{display:flex;gap:2px;flex-shrink:0;opacity:.35;transition:opacity .15s;}
.launcher-row:hover .lr-actions{opacity:1;}
.lr-actions .iconbtn.danger:hover{color:#ff5c5c;}

/* Collapsed: the input has zero width and no border/padding, so the row's only real flex item is
   the button — under justify-content:center that reads as "the button, centered". Expanding just
   grows the input's width (a plain, robust, fully-animatable property, unlike trying to transition
   to flex's own "fill remaining space" auto-sizing); justify-content stays center throughout, so as
   the input claims space to its left, the centered [input, button] group widens and the button
   drifts rightward as a pure side effect of that reflow — no separate transform/position animation
   needed on the button itself, and no jump, since nothing about its own rule set ever changes. */
#launcherNewRow{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:4px;}
#launcherNewRow input{width:0;min-width:0;flex:0 0 auto;opacity:0;padding-left:0;padding-right:0;
  border-color:transparent;margin-bottom:0;pointer-events:none;overflow:hidden;
  transition:width .4s cubic-bezier(.16,1,.3,1), padding .4s cubic-bezier(.16,1,.3,1),
    opacity .25s ease .05s, border-color .3s ease .1s;}
#launcherNewRow.expanded input{width:min(280px, 60%);opacity:1;padding-left:10px;padding-right:10px;
  border-color:var(--line);pointer-events:auto;}
#launcherNewRow .btn{flex-shrink:0;}