/* ══════════════════════════════════════════════════════════════════
   labs.css — LIVE LABS slider
   Uses your existing tokens from global.css. No new palette invented —
   the "browser chrome" frame is the one new device, and it earns its
   place: it tells the visitor "this is a real, running website".
   ══════════════════════════════════════════════════════════════════ */

.labs-shell{position:relative;max-width:1180px;margin:0 auto;outline:none;}
.labs-shell:focus-visible{outline:2px solid var(--yellow);outline-offset:6px;}

.labs-viewport{overflow:hidden;border:2px solid var(--border);border-radius:4px;
  background:linear-gradient(180deg,rgba(15,52,96,.35),rgba(10,14,26,.6));}
.labs-track{display:flex;transition:transform .55s cubic-bezier(.65,.05,.36,1);will-change:transform;}

.lab-slide{flex:0 0 100%;display:grid;grid-template-columns:1.35fr 1fr;gap:0;min-width:0;}

/* ── Fake browser window around the screenshot ─────────────────── */
.lab-preview{background:#0a0e1a;border-right:2px solid var(--border);display:flex;flex-direction:column;min-width:0;}
.lab-chrome{display:flex;align-items:center;gap:.45rem;padding:.55rem .8rem;
  background:linear-gradient(180deg,#243258,#1a2440);border-bottom:1px solid var(--border);}
.lab-chrome .lab-dot{width:10px;height:10px;border-radius:50%;flex:none;}
.lab-chrome .lab-dot.r{background:#e63946;}
.lab-chrome .lab-dot.y{background:#ffd60a;}
.lab-chrome .lab-dot.g{background:#06d6a0;}
.lab-url{flex:1;margin-left:.5rem;font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim);
  background:rgba(10,14,26,.6);border:1px solid var(--border);border-radius:2px;
  padding:.2rem .55rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lab-status{font-family:var(--font-pixel);font-size:.4rem;letter-spacing:.08em;padding:.3rem .45rem;
  border-radius:2px;color:#0a0e1a;font-weight:900;flex:none;}
.lab-status.ok{background:var(--green);}
.lab-status.warn{background:var(--orange);}
.lab-status.off{background:var(--text-muted);color:var(--text);}

.lab-shot{position:relative;display:block;flex:1;min-height:300px;overflow:hidden;background:#0f1626;}
.lab-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .7s ease, filter .4s ease;filter:saturate(.92);}
.lab-shot:hover img{transform:scale(1.035);filter:saturate(1.05);}
.lab-shot-cta{position:absolute;left:50%;bottom:1rem;transform:translate(-50%,140%);
  font-family:var(--font-pixel);font-size:.45rem;letter-spacing:.1em;color:#0a0e1a;
  background:var(--pixel-yellow);border:2px solid var(--pixel-yellow-d);border-radius:2px;
  padding:.55rem .8rem;transition:transform .3s ease;white-space:nowrap;}
.lab-shot:hover .lab-shot-cta,
.lab-shot:focus-visible .lab-shot-cta{transform:translate(-50%,0);}

/* Shown only when the screenshot fails to load */
.lab-shot-fallback{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;padding:2rem;
  background:repeating-linear-gradient(45deg,#111a2e,#111a2e 12px,#141f38 12px,#141f38 24px);}
.lab-shot-fallback b{font-family:var(--font-display);font-size:1.1rem;color:var(--text);}
.lab-shot-fallback em{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);font-style:normal;}
.lab-shot.shot-failed img{display:none;}
.lab-shot.shot-failed .lab-shot-fallback{display:flex;}

/* ── Right-hand info panel ─────────────────────────────────────── */
.lab-info{padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;min-width:0;}
.lab-info header{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;}
.lab-info h3{font-family:var(--font-display);font-size:1.25rem;color:var(--text);margin:0;}
.lab-year{font-family:var(--font-pixel);font-size:.42rem;color:var(--yellow-hi);flex:none;}
.lab-desc{font-family:var(--font-body);font-size:.94rem;line-height:1.55;color:var(--text-dim);margin:0;}

.lab-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:0;}
.lab-tags li{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.04em;color:var(--blue-hi);
  border:1px solid var(--border);background:rgba(69,123,189,.1);border-radius:2px;padding:.2rem .5rem;}

/* ── GitHub panel ──────────────────────────────────────────────── */
.lab-git{border:1px solid var(--border);border-left:3px solid var(--violet-hi);
  background:rgba(10,14,26,.45);border-radius:2px;padding:.75rem .85rem;}
.lab-git-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem;}
.lab-git-icon{color:var(--violet-hi);}
.lab-git-head a{font-family:var(--font-mono);font-size:.72rem;color:var(--text);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lab-git-head a:hover{color:var(--yellow-hi);text-decoration:underline;}
.lab-git-stats{list-style:none;display:flex;flex-wrap:wrap;gap:1.1rem;padding:0;margin:0;}
.lab-git-stats li{display:flex;flex-direction:column;line-height:1.2;}
.lab-git-stats b{font-family:var(--font-display);font-size:.9rem;color:var(--green-hi);}
.lab-git-stats span{font-family:var(--font-mono);font-size:.55rem;color:var(--text-muted);letter-spacing:.06em;}

/* ── Actions ───────────────────────────────────────────────────── */
.lab-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:.5rem;}
.lab-cta{font-family:var(--font-pixel);font-size:.45rem;letter-spacing:.08em;text-decoration:none;
  padding:.7rem .9rem;border-radius:2px;border:2px solid var(--border-hi);color:var(--text);
  background:rgba(69,123,189,.12);transition:transform .15s ease, background .2s ease;}
.lab-cta:hover{transform:translate(-2px,-2px);background:rgba(69,123,189,.25);}
.lab-cta.primary{color:#0a0e1a;background:var(--pixel-yellow);border-color:var(--pixel-yellow-d);
  box-shadow:3px 3px 0 var(--pixel-yellow-d);}
.lab-cta.primary:hover{box-shadow:5px 5px 0 var(--pixel-yellow-d);}

/* ── Controls ──────────────────────────────────────────────────── */
.labs-controls{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem;}
.labs-btn{font-family:var(--font-pixel);font-size:.55rem;color:var(--text);cursor:pointer;
  background:rgba(69,123,189,.15);border:2px solid var(--border-hi);border-radius:2px;
  width:38px;height:38px;display:grid;place-items:center;transition:background .2s ease;}
.labs-btn:hover{background:var(--pixel-yellow);color:#0a0e1a;border-color:var(--pixel-yellow-d);}
.labs-btn:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;}
.labs-dots{display:flex;gap:.4rem;}
.labs-dot{width:26px;height:10px;padding:0;border:1px solid var(--border);background:rgba(69,123,189,.15);
  border-radius:2px;cursor:pointer;transition:background .2s ease,width .25s ease;}
.labs-dot.is-active{background:var(--pixel-yellow);border-color:var(--pixel-yellow-d);width:40px;}
.labs-dot:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;}

.labs-progress{height:3px;background:rgba(69,123,189,.18);margin-top:.9rem;border-radius:2px;overflow:hidden;}
.labs-progress i{display:block;height:100%;width:0;background:var(--pixel-yellow);}
.labs-count{text-align:center;font-family:var(--font-pixel);font-size:.42rem;letter-spacing:.12em;
  color:var(--text-muted);margin-top:.75rem;}

/* ── Empty state ───────────────────────────────────────────────── */
.labs-empty{border:2px dashed var(--border);border-radius:4px;padding:3.5rem 2rem;text-align:center;
  background:rgba(10,14,26,.35);}
.labs-empty-icon{font-size:2rem;color:var(--text-muted);display:block;margin-bottom:.75rem;}
.labs-empty p{font-family:var(--font-body);color:var(--text-dim);margin:.25rem 0;}
.labs-empty-hint{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);}
.labs-empty code{background:rgba(69,123,189,.18);padding:.1rem .35rem;border-radius:2px;color:var(--yellow-hi);}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:900px){
  .lab-slide{grid-template-columns:1fr;}
  .lab-preview{border-right:none;border-bottom:2px solid var(--border);}
  .lab-shot{min-height:210px;}
  .lab-info{padding:1.2rem 1rem;}
  .lab-shot-cta{transform:translate(-50%,0);}   /* no hover on touch — always show */
}

@media (prefers-reduced-motion: reduce){
  .labs-track{transition:none;}
  .lab-shot img{transition:none;}
  .labs-progress i{display:none;}
}