/* ChronoRack · LK-1 Look Lab · v1 (2026-11-07)
   Skin + display selector that swaps a desktop and a phone screenshot together, with a zoom viewer.
   Sits inside a Pro Dark kit card (.unit). Uses kit tokens when present; every token has a fallback,
   so this file also works on its own. All selectors are scoped to .crx (no collisions with the kit). */

.crx{--crx-cyan:var(--cyan,#5fe3f5);--crx-green:var(--green,#00e676);--crx-amber:var(--amber,#ffb300);
  --crx-legend:var(--legend,#c9ccd1);--crx-dim:var(--legend-dim,rgba(201,204,209,.55));--crx-ink:var(--ink,#e8f9fc);
  --crx-disp:var(--disp,rgba(4,6,8,.94));--crx-inset:var(--inset,inset 0 2px 6px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06));
  --crx-mono:var(--f-mono,"JetBrains Mono",ui-monospace,Menlo,monospace);--crx-ui:var(--f-ui,"Inter",system-ui,sans-serif);
  --crx-etch:var(--etch,rgba(201,204,209,.14));
  display:grid;gap:20px;font-family:var(--crx-ui);color:var(--crx-legend)}

/* ---------- controls ---------- */
.crx-ctl{display:grid;gap:14px}
.crx-row{display:grid;grid-template-columns:88px 1fr;align-items:start;gap:12px}
.crx-lbl{font:500 10px/1 var(--crx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--crx-dim);padding-top:17px}
.crx-groups{display:flex;flex-wrap:wrap;gap:10px 18px}
.crx-grp{display:grid;gap:6px}
.crx-tier{font:500 9px/1 var(--crx-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--crx-dim)}
.crx-tier b{color:var(--crx-amber);font-weight:500}
.crx-chips{display:flex;flex-wrap:wrap;gap:6px}
/* chips reuse the kit .key look; these only size them */
.crx .crx-chip{min-height:44px;padding:8px 12px 6px;font:500 11px/1 var(--crx-mono);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.crx .crx-chip .sw{width:22px;height:6px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06)}
.crx .crx-chip[aria-pressed="true"]{color:var(--crx-legend)}
.crx .crx-chip[aria-pressed="true"]::before{background:var(--crx-cyan);box-shadow:0 0 6px rgba(95,227,245,.6)}

/* ---------- readout ---------- */
.crx-read{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  background:var(--crx-disp);box-shadow:var(--crx-inset);border-radius:8px;padding:12px 16px;font:500 12px/1.3 var(--crx-mono);letter-spacing:.14em;text-transform:uppercase}
.crx-read .now{color:var(--crx-cyan);text-shadow:var(--glow,0 0 9px rgba(95,214,234,.25))}
.crx-read .note{color:var(--crx-dim);letter-spacing:.1em}
.crx-read .note .rec{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red,#ff3b30);margin-right:6px;vertical-align:1px}

/* ---------- stage: desktop + phone ---------- */
.crx-stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,19%,236px);gap:20px;align-items:end}
.crx-fig{margin:0;display:grid;gap:8px}
.crx-win{position:relative;display:block;width:100%;padding:0;border:0;cursor:zoom-in;overflow:hidden;
  background:#05070a;box-shadow:var(--crx-inset);border-radius:10px}
.crx-win.desk{aspect-ratio:16/10}
.crx-win.phone{aspect-ratio:390/844;border-radius:22px}
.crx-win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:opacity .28s ease;border-radius:inherit}
.crx-win img.out{opacity:0}
.crx-win:focus-visible{outline:2px solid var(--crx-cyan);outline-offset:3px}
.crx-win .zm{position:absolute;right:10px;bottom:10px;z-index:2;font:500 10px/1 var(--crx-mono);letter-spacing:.16em;color:var(--crx-legend);
  background:rgba(4,6,8,.78);border-radius:6px;padding:8px 10px;box-shadow:0 0 0 1px rgba(255,255,255,.08);opacity:.85;transition:opacity .2s}
.crx-win:hover .zm{opacity:1}
.crx-win.loading::after{content:"";position:absolute;left:0;top:0;height:2px;width:30%;background:var(--crx-cyan);animation:crx-load 1s linear infinite;z-index:3}
@keyframes crx-load{from{transform:translateX(-100%)}to{transform:translateX(400%)}}
.crx-cap{display:flex;justify-content:space-between;gap:8px;font:500 10px/1 var(--crx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--crx-dim)}

/* ---------- zoom viewer ---------- */
.crx-zoom{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto 1fr auto;background:rgba(2,3,5,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--crx-legend,#c9ccd1);font-family:var(--crx-ui)}
.crx-zoom[hidden]{display:none}
.crx-zbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px max(12px,env(safe-area-inset-left)) 10px max(12px,env(safe-area-inset-right))}
.crx-zbar .ttl{font:500 11px/1 var(--crx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--crx-cyan);margin-right:auto}
.crx-zbar .key{min-height:44px}
.crx-zbar .x{font-size:22px}
.crx-zbar .key.sym{font-size:18px;letter-spacing:0;min-width:44px;padding-inline:12px}
.crx-zvp{position:relative;overflow:hidden;touch-action:none;cursor:grab}
.crx-zvp.drag{cursor:grabbing}
.crx-zvp img{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;max-width:none;will-change:transform}
.crx-zfoot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 16px calc(10px + env(safe-area-inset-bottom));
  font:500 10px/1.4 var(--crx-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--crx-dim)}
html.crx-lock,html.crx-lock body{overflow:hidden}

/* ---------- phone layout ---------- */
@media (max-width:720px){
  .crx-row{grid-template-columns:1fr;gap:8px}
  .crx-lbl{padding-top:0}
  .crx-stage{grid-template-columns:1fr 34%;gap:10px}
  .crx .crx-chip{padding:8px 9px 6px;letter-spacing:.08em}
  .crx-cap span+span{display:none}
  .crx-zbar{gap:6px;position:relative}.crx-zbar .ttl{flex-basis:100%;margin:0 0 2px;padding-right:44px;min-height:24px;display:flex;align-items:center}
  .crx-zbar .x{position:absolute;top:2px;right:max(4px,env(safe-area-inset-right))}
  .crx-zbar .opt{display:none}
  .crx-zfoot span+span{display:none}
}
@media (max-width:420px){
  .crx-stage{grid-template-columns:1fr}
  .crx-fig.phone{width:56%;justify-self:center}
}
@media (prefers-reduced-motion:reduce){.crx-win img{transition:none}.crx-win.loading::after{animation:none}}