/* ============================================================
   LOOK — the instant view.
   No tripod, no exposure lock, no sweep, no second person, no
   waiting for the right hour. Hold the phone up and the stone
   changes. Everything else in this app is now the fallback for
   when this is not enough.
   ============================================================ */

#look{
  position:fixed;inset:0;z-index:340;background:#05070A;
  display:none;flex-direction:column;
  touch-action:none;overscroll-behavior:none;
}
#look.on{display:flex}

#lookVid{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#lookStage{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#05070A;overflow:hidden;
}
#lookCv{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- chrome ---------- */
#lookUI{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;pointer-events:none;
  padding:calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
}
#lookUI > *{pointer-events:auto}

.lookTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lookPill{
  background:rgba(8,11,13,.62);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);color:#F2EDE3;
  border-radius:100px;padding:11px 16px;
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.lookPill:active{background:rgba(8,11,13,.85)}
.lookPill.hot{background:var(--rake);color:#191713;border-color:transparent}

.lookBottom{display:flex;flex-direction:column;gap:12px;align-items:center}

.lookModes{
  display:flex;gap:4px;background:rgba(8,11,13,.6);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:4px;
}
.lookModes button{
  padding:10px 15px;border-radius:100px;color:#CFC9BE;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  transition:background .18s,color .18s;
}
.lookModes button[aria-pressed="true"]{background:#F2EDE3;color:#12161A}

.lookSlider{
  width:100%;max-width:420px;
  background:rgba(8,11,13,.55);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.13);border-radius:100px;
  padding:6px 16px 4px;
}
.lookSlider label{
  display:flex;justify-content:space-between;color:#BDB6AA;
  font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.lookSlider label b{color:var(--rake);font-variant-numeric:tabular-nums}
.lookSlider input{width:100%;accent-color:#E9A825;height:26px;margin:0}

.lookRow{display:flex;align-items:center;gap:18px;justify-content:center;width:100%}

/* the shutter */
#lookShoot{
  width:76px;height:76px;border-radius:50%;
  background:#F2EDE3;border:5px solid rgba(255,255,255,.35);
  box-shadow:0 6px 26px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s var(--ease);
  flex:0 0 auto;
}
#lookShoot:active{transform:scale(.92)}
#lookShoot i{
  width:56px;height:56px;border-radius:50%;background:#F2EDE3;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);display:block;
}
#lookShoot.busy{background:var(--rake);border-color:rgba(255,197,61,.4)}

.lookSide{
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;
  background:rgba(8,11,13,.58);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);color:#EFEAE0;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  text-align:center;line-height:1.15;padding:4px;
}
.lookSide.on{background:var(--rake);color:#191713;border-color:transparent}

/* ---------- the coach line ---------- */
#lookTip{
  align-self:center;max-width:30ch;text-align:center;
  background:rgba(8,11,13,.66);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  color:#F2EDE3;border-radius:12px;padding:10px 14px;
  font-size:13.5px;font-weight:500;line-height:1.4;
  transition:opacity .4s var(--ease);
}
#lookTip b{color:var(--rake);font-weight:700}
#lookTip.gone{opacity:0}

/* held-down comparison */
#lookRaw{
  position:absolute;top:calc(64px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);
  background:rgba(8,11,13,.8);color:#fff;border-radius:100px;
  padding:7px 15px;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;opacity:0;transition:opacity .2s;pointer-events:none;
}
#lookRaw.on{opacity:1}

/* ---------- the result sheet ---------- */
#shot{
  position:absolute;inset:0;z-index:5;background:#05070A;
  display:none;flex-direction:column;
}
#shot.on{display:flex}
#shotStage{flex:1;position:relative;overflow:hidden;background:#05070A;
  display:flex;align-items:center;justify-content:center}
#shotCv{max-width:100%;max-height:100%;display:block}
#shotBadge{
  position:absolute;top:calc(12px + env(safe-area-inset-top));left:14px;
  background:rgba(8,11,13,.7);backdrop-filter:blur(10px);color:#F2EDE3;
  border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:8px 14px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
#shotBar{
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  background:#0B0F13;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:11px;
}
#shotBar .slider label{color:#9AA3AE}
#shotBar .slider label b{color:var(--rake)}
.shotBtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.shotBtns button{
  padding:14px 8px;border-radius:9px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.09);color:#F2EDE3;border:1px solid rgba(255,255,255,.13);
}
.shotBtns button.key{background:var(--rake);color:#191713;border-color:transparent}

/* ---------- the always-there way in ---------- */
.lookFab{
  position:fixed;z-index:120;
  right:max(14px, env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 20px 14px 17px;border-radius:100px;
  background:var(--lichen);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 6px 22px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.2);
  transition:transform .16s var(--ease), box-shadow .2s var(--ease);
}
.lookFab:active{transform:translateY(1px) scale(.98)}
.lookFab:focus-visible{outline:3px solid var(--verdigris);outline-offset:3px}
#look.on ~ .lookFab{display:none}

/* ---------- the "everything else" preamble ---------- */
.more{
  padding:clamp(24px,5vw,38px) 20px clamp(18px,3.5vw,26px);
  border-bottom:1px solid var(--line);
}
.more .head{max-width:22ch}

@media (prefers-reduced-motion:reduce){ #look *,#shot *{transition:none!important} }