/* Labs > Home Dashboard Redesign (Preview)
   Scoped to .dp-* — a self-contained experiment card, not wired into the
   real dashboard (js/layout.js / js/icon-toolbar.js). Reuses the app's own
   theme tokens (--bg-panel, --neon-green, etc. from css/style.css, loaded
   before this file) and its real .card-minimize-btn / .icon-toolbar*
   classes so the preview stays pixel-consistent with the live app and
   tracks theme changes automatically — only the frame, grid, drag states,
   and the restore-swoosh overlay are new here. See js/labs-dashboard-preview.js
   for the behavior this drives. */

.dp-controls{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px;
}
.dp-controls label{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:12px; color:var(--text-muted);
}
.dp-switch{
  width:38px; height:22px; border-radius:12px; background:var(--bg-void);
  border:1px solid var(--border-strong); position:relative; cursor:pointer; flex-shrink:0;
}
.dp-switch::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--text-dim); transition:transform .18s ease, background .18s ease;
}
.dp-switch.on{ border-color:var(--neon-green-dim); }
.dp-switch.on::after{ transform:translateX(16px); background:var(--neon-green); box-shadow:0 0 8px var(--neon-green-glow); }

.dp-segmented{ display:flex; gap:6px; }
.dp-seg-btn{
  min-height:32px; padding:0 12px; border-radius:16px; border:1px solid var(--border-subtle);
  background:var(--bg-panel-raised); color:var(--text-muted); font-family:var(--font-display);
  font-weight:600; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
}
.dp-seg-btn.active{ color:var(--neon-green); border-color:var(--neon-green-dim); background:rgba(79,140,255,0.08); }
.dp-seg-btn[disabled]{ opacity:0.4; pointer-events:none; }

.dp-frame{
  position:relative; max-width:420px; margin:0 auto; overflow:hidden;
  background:var(--bg-void); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; min-height:520px;
}

.dp-header{
  flex:0 0 auto; height:20px; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid var(--border-subtle); background:var(--bg-panel);
  transition:height 0.2s ease, opacity 0.2s ease, padding 0.2s ease, border-color 0.2s ease;
}
.dp-header.dp-hidden{ height:0; padding:0 12px; opacity:0; border-bottom-color:transparent; overflow:hidden; }
.dp-header-brand{ font-family:var(--font-display); font-weight:700; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); }
.dp-header-clock{ font-family:var(--font-mono); font-size:9px; color:var(--text-dim); }

/* Reuses the real .icon-toolbar look; order flips it between docking right
   under the header and docking to the bottom of the frame. */
.dp-dock{ order:1; }
.dp-dock.dp-dock-bottom{ order:3; margin-top:auto; border-radius:0; }
.dp-dock .icon-toolbar{ margin:8px 10px 0; }
.dp-dock.dp-dock-bottom .icon-toolbar{ margin:0 10px 8px; }
.dp-dock-empty-hint{
  order:1; text-align:center; font-family:var(--font-mono); font-size:10px; color:var(--text-dim);
  padding:6px 0 0;
}
/* the icon whose card is currently flying home fades in place rather than
   vanishing instantly, so the dock only collapses (if this was the last
   minimized card) after the flight has already landed */
.dp-icon-leaving{ opacity:0; transform:scale(0.55); pointer-events:none; transition:opacity 0.22s ease, transform 0.22s ease; }

.dp-body{ order:2; flex:1 1 auto; overflow-y:auto; }
.dp-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; padding:12px; }

.dp-tile{
  position:relative; grid-column:span 6;
  background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:0 4px 12px rgba(0,0,0,0.18); padding:8px 10px 10px; min-width:0;
  transition:opacity 0.3s cubic-bezier(.2,.7,.3,1), transform 0.3s cubic-bezier(.34,1.4,.64,1);
}
.dp-tile-landing{ opacity:0; transform:scale(0.88); pointer-events:none; }
.dp-tile-minimizing{ opacity:0; transform:scale(0.85); transition:opacity 0.16s ease, transform 0.16s ease; }
.dp-tile.dp-theme-spotify{ background:linear-gradient(155deg,#122a1a,#0c1712); border-color:rgba(29,185,84,0.35); }

.dp-tile-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px; }
.dp-tile-drag{ display:flex; align-items:center; gap:6px; min-width:0; cursor:grab; }
.dp-tile-drag:active{ cursor:grabbing; }
.dp-grip{ color:var(--text-dim); flex:0 0 auto; display:flex; }
.dp-tile.dp-theme-spotify .dp-grip{ color:rgba(255,255,255,0.45); }
.dp-tile-icon{ font-size:13px; flex:0 0 auto; }
.dp-tile-title{
  font-family:var(--font-display); font-weight:600; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dp-tile.dp-theme-spotify .dp-tile-title{ color:rgba(255,255,255,0.55); }

/* The standardized control: the app's own .card-minimize-btn, unchanged —
   same spot, same size, on every tile regardless of theme below. */
.dp-tile-head .card-minimize-btn{ width:24px; height:24px; }

.dp-tile-value{ font-family:var(--font-mono); font-weight:700; font-size:22px; color:var(--text-primary); line-height:1; }
.dp-tile-unit{ font-family:var(--font-display); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); margin-top:2px; }
.dp-tile-sub{ font-family:var(--font-body); font-size:11px; color:var(--text-muted); margin-top:2px; }

.dp-wide-row{ display:flex; align-items:center; gap:8px; }
.dp-wide-icon{ font-size:22px; }

.dp-sp-row{ display:flex; align-items:center; gap:8px; }
.dp-sp-art{ width:36px; height:36px; border-radius:8px; flex:0 0 auto; background:linear-gradient(135deg,#1db954,#0e5c2b); display:grid; place-items:center; font-size:15px; }
.dp-sp-track{ font-size:12px; font-weight:600; color:#fff; }
.dp-sp-artist{ font-size:10px; color:rgba(255,255,255,0.55); }

/* ---------- restore flight overlay (swoosh + tapering tail) ---------- */
.dp-flyer{
  position:absolute; z-index:50; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff;
  opacity:0; pointer-events:none;
}
.dp-flyer.dp-flying{ animation:dpFlyMove 0.6s cubic-bezier(.22,.8,.28,1) forwards; }
@keyframes dpFlyMove{
  0%{ transform:translate(0,0) scale(1); opacity:1; }
  62%{ transform:translate(var(--dx),var(--dy)) scale(2.4); opacity:1; }
  100%{ transform:translate(var(--dx),var(--dy)) scale(2.4); opacity:0; }
}
.dp-tailwrap{ position:absolute; z-index:49; height:18px; transform-origin:0% 50%; pointer-events:none; }
.dp-tailinner{
  width:100%; height:100%; opacity:0; transform:scaleX(0); transform-origin:0% 50%;
  background:linear-gradient(90deg, transparent, var(--neon-green) 55%, #dce8ff 100%);
  clip-path:polygon(0% 50%, 100% 8%, 100% 92%);
}
.dp-tailinner.dp-tailing{ animation:dpTailGrow 0.6s cubic-bezier(.3,.75,.2,1) forwards; }
@keyframes dpTailGrow{
  0%{ transform:scaleX(0); opacity:0; }
  18%{ transform:scaleX(0.45); opacity:0.85; }
  60%{ transform:scaleX(1); opacity:0.55; }
  100%{ transform:scaleX(1.05); opacity:0; }
}