/* ============================================================================
   CULTURE CAVE — THE LAB, styled
   Instruments, not widgets: brushed dark bodies, neon readouts, hairline rules.
   ========================================================================== */

/* ------------------------------------------------------------ the scope --- */
.scope{position:relative;overflow:hidden;border-radius:12px;isolation:isolate;
  background:#04020C;border:1px solid rgba(var(--glow-v),.34);
  box-shadow:inset 0 0 60px -18px rgba(var(--glow-v),.55)}
.scope .sc-stage{position:absolute;inset:0;transform-origin:center;
  transition:transform .12s linear;cursor:zoom-in}
.scope.zoomed .sc-stage{cursor:grab}
.scope.grab .sc-stage{cursor:grabbing;transition:none}
.scope .sc-img{width:100%;height:100%;object-fit:cover;display:block;
  transition:filter .18s ease;user-select:none;-webkit-user-drag:none}
/* the eyepiece: a round field with the rest masked off */
.scope::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(circle at 50% 50%,transparent 56%,rgba(2,1,6,.62) 74%,rgba(2,1,6,.94) 100%)}
.scope .sc-ret{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.5}
.scope .sc-ret i{position:absolute;background:rgba(var(--glow-v),.55)}
.scope .sc-ret .h{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.scope .sc-ret .v{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.scope .sc-ret .c{left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;
  background:none;border:1px solid rgba(var(--glow-v),.6);border-radius:50%}
.scope .sc-ret .sweep{left:50%;top:50%;width:44%;height:1px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(var(--glow-v),.75),transparent);
  animation:scsweep 7s linear infinite}
@keyframes scsweep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.scope .sc-ret .sweep{animation:none;opacity:.3}}
.scope[data-field="uv"] .sc-ret i{background:rgba(var(--glow-m),.6)}
.scope .sc-hud{position:absolute;top:12px;left:12px;z-index:5;display:flex;gap:10px;
  align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--uv-ice);
  background:rgba(4,2,12,.72);border:1px solid rgba(var(--glow-v),.3);
  padding:5px 11px;border-radius:6px}
.scope .sc-hud b{font-weight:700;color:#fff}
.scope .sc-hud .sc-fld{opacity:.75}
/* the scale bar restates what its length means at the current magnification */
.scope .sc-scale{position:absolute;right:14px;bottom:64px;z-index:5;text-align:right;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--uv-ice)}
.scope .sc-scale i{display:block;width:88px;height:0;margin-bottom:5px;
  border-top:2px solid var(--uv-ice);position:relative}
.scope .sc-scale i::before,.scope .sc-scale i::after{content:"";position:absolute;
  top:-4px;width:2px;height:8px;background:var(--uv-ice)}
.scope .sc-scale i::before{left:0}.scope .sc-scale i::after{right:0}
.scope .sc-ctl{position:absolute;left:10px;right:10px;bottom:10px;z-index:6;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:rgba(4,2,12,.82);border:1px solid rgba(var(--glow-v),.28);
  border-radius:10px;padding:8px 10px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.scope .sc-b{width:28px;height:28px;flex:none;border-radius:7px;cursor:pointer;
  border:1px solid rgba(var(--glow-v),.35);background:rgba(var(--glow-v),.08);
  color:var(--uv-ice);font-size:15px;line-height:1;display:grid;place-items:center}
.scope .sc-b:hover{background:rgba(var(--glow-v),.2);border-color:rgb(var(--glow-v))}
.scope input[type=range]{flex:1 1 70px;min-width:60px;accent-color:rgb(var(--glow-v));height:20px}
.scope .sc-lb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mut)}
.scope .sc-sep{width:1px;height:20px;background:rgba(var(--glow-v),.22);flex:none}
.scope .sc-fields{display:flex;gap:3px;flex:none}
.scope .sc-fb{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 9px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(var(--glow-v),.24);background:transparent;color:var(--ink-mut)}
.scope .sc-fb.on{background:var(--grad2);color:#04020A;border-color:transparent;font-weight:700}
@media(max-width:560px){
  .scope .sc-ctl{gap:6px;padding:7px}
  .scope .sc-lb,.scope .sc-sep{display:none}
  .scope .sc-scale{bottom:88px}
}
/* on a product page the media box becomes the stage */
.pdp .media.scope{aspect-ratio:1}

/* -------------------------------------------------------------- the lab --- */
.lab-sec{margin:0 0 clamp(46px,6vw,84px)}
.lab-h{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.lab-h h3{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);
  letter-spacing:-.01em;margin:0;color:var(--ink)}
.lab-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;font-weight:700;
  color:rgb(var(--glow-m));text-transform:uppercase}
.lab-sec>p.lab-lead{color:var(--ink-2);font-size:15px;max-width:62ch;margin:0 0 22px}
.lab-body{background:rgba(8,4,18,.74);border:1px solid var(--line);border-radius:14px;
  padding:clamp(18px,2.6vw,30px);position:relative}
:root[data-theme="light"] .lab-body{background:rgba(255,255,255,.92)}
.lab-fine{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-mut);
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule-2)}
.lab-empty,.lab-load{color:var(--ink-mut);font-size:14px;padding:24px 0;text-align:center}
.lab-f{display:block;margin-bottom:14px}
.lab-f>span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:7px;font-weight:600}
.lab-f input,.lab-f select{width:100%;background:rgba(var(--glow-v),.06);
  border:1px solid var(--line);border-radius:8px;color:var(--ink);
  padding:11px 13px;font-family:inherit;font-size:14.5px;outline:none}
.lab-f input:focus,.lab-f select:focus{border-color:rgb(var(--glow-v))}

/* lineage --------------------------------------------------------------- */
.lg-r,.lg-k{list-style:none;margin:0;padding:0}
.lg-k{margin-left:clamp(14px,2.4vw,30px);padding-left:clamp(14px,2.4vw,26px);
  border-left:1px solid var(--rule)}
.lg-n{position:relative;margin:7px 0}
.lg-n .lg-b{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;width:100%;
  text-align:left;cursor:pointer;padding:9px 13px;border-radius:9px;
  border:1px solid transparent;background:rgba(var(--glow-v),.05);
  transition:border-color .18s,background .18s,transform .18s}
.lg-n .lg-b:hover{border-color:rgb(var(--glow-v));background:rgba(var(--glow-v),.12);
  transform:translateX(3px)}
.lg-name{font-family:var(--display);font-size:15.5px;color:var(--ink);letter-spacing:.005em}
.lg-note{font-family:var(--mono);font-size:11px;color:var(--ink-mut);letter-spacing:.04em}
.lg-go{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgb(var(--glow-m));opacity:0;transition:opacity .18s}
.lg-n .lg-b:hover .lg-go{opacity:1}
.lg-n[data-tier="0"]>.lg-b{background:var(--grad2);border-color:transparent}
.lg-n[data-tier="0"] .lg-name{color:#04020A;font-weight:700}
.lg-n[data-tier="0"] .lg-note{color:rgba(4,2,10,.72)}

/* oracle ---------------------------------------------------------------- */
.or-prog{display:flex;gap:6px;margin-bottom:18px}
.or-prog i{width:34px;height:3px;border-radius:2px;background:var(--rule)}
.or-prog i.done{background:rgb(var(--glow-v))}
.or-prog i.now{background:rgb(var(--glow-m));box-shadow:0 0 8px rgba(var(--glow-m),.9)}
.or-q{font-family:var(--display);font-size:1.25rem;margin:0 0 16px;color:var(--ink)}
.or-a{display:grid;gap:9px}
.or-b{text-align:left;padding:14px 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:rgba(var(--glow-v),.05);color:var(--ink);
  font-family:inherit;font-size:14.5px;transition:.18s}
.or-b:hover{border-color:rgb(var(--glow-v));background:rgba(var(--glow-v),.13);transform:translateX(3px)}
.or-back,.or-again{margin-top:16px;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgb(var(--glow-m))}
.or-v h4{font-family:var(--display);font-size:1.5rem;margin:10px 0 10px;color:var(--ink)}
.or-v h5{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);margin:18px 0 6px}
.or-v p{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin:0}
.or-k{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:6px}
.or-v.contaminant .or-k{background:rgba(255,20,137,.16);color:#FF6BA8;border:1px solid rgba(255,20,137,.4)}
.or-v.healthy .or-k{background:rgba(91,255,158,.14);color:var(--uv-green);border:1px solid rgba(91,255,158,.4)}
.or-v.watch .or-k{background:rgba(255,138,46,.14);color:var(--uv-amber);border:1px solid rgba(255,138,46,.4)}

/* clock ----------------------------------------------------------------- */
.ck-new{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:14px;align-items:end;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--rule)}
.ck-new .lab-f{margin:0}
.ck-new .btn{height:44px;white-space:nowrap}
@media(max-width:760px){.ck-new{grid-template-columns:1fr}}
.ck-list{display:grid;gap:16px}
.ck-c{border:1px solid var(--line);border-radius:12px;padding:18px;
  background:rgba(var(--glow-v),.04)}
.ck-c header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ck-c h4{font-family:var(--display);font-size:1.05rem;margin:0;color:var(--ink)}
.ck-sp{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mut)}
.ck-x{margin-left:auto;background:none;border:0;color:var(--ink-mut);font-size:20px;
  cursor:pointer;line-height:1}
.ck-x:hover{color:rgb(var(--glow-m))}
.ck-age{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin-bottom:12px}
.ck-age b{font-size:24px;color:var(--ink);font-weight:500}
.ck-bar{position:relative;height:6px;border-radius:4px;background:var(--rule);overflow:visible;
  margin-bottom:16px}
.ck-bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--uv-cyan),var(--uv-mag))}
.ck-now{position:absolute;top:-5px;width:2px;height:16px;background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.9);transform:translateX(-1px)}
.ck-st{list-style:none;margin:0 0 12px;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:620px){.ck-st{grid-template-columns:repeat(2,1fr)}}
.ck-st li{padding:9px 10px;border-radius:8px;border:1px solid var(--rule-2);
  background:rgba(0,0,0,.18)}
.ck-st li b{display:block;font-size:12.5px;color:var(--ink-mut);font-weight:600}
.ck-st li span{font-family:var(--mono);font-size:10.5px;color:var(--ink-mut);opacity:.75}
.ck-st li.past{border-color:rgba(var(--glow-v),.3)}
.ck-st li.past b{color:var(--ink-2)}
.ck-st li.now{border-color:rgb(var(--glow-m));background:rgba(var(--glow-m),.1)}
.ck-st li.now b{color:var(--ink)}
.ck-say{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.6}

/* bench ----------------------------------------------------------------- */
.bn-f{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--rule)}
.bn-f .lab-f{margin:0}
@media(max-width:760px){.bn-f{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.bn-f{grid-template-columns:1fr}}
.bn-dl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;
  background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
@media(max-width:700px){.bn-dl{grid-template-columns:repeat(2,1fr)}}
.bn-dl>div{background:rgba(8,4,18,.8);padding:15px 16px}
:root[data-theme="light"] .bn-dl>div{background:#fff}
.bn-dl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mut);margin:0 0 6px}
.bn-dl dd{margin:0;font-family:var(--mono);font-size:20px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.bn-note{font-size:13.5px;color:var(--ink-2);line-height:1.65;margin:16px 0 0}
.bn-note b{color:var(--ink)}

/* depth ----------------------------------------------------------------- */
.dp-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,3vw,40px)}
@media(max-width:820px){.dp-grid{grid-template-columns:1fr}}
.dp-grid h4{font-family:var(--display);font-size:1.1rem;margin:0 0 4px;color:var(--ink)}
.dp-sub{font-size:13px;color:var(--ink-mut);margin:0 0 14px}
.dp-l{list-style:none;margin:0;padding:0;counter-reset:dp}
.dp-l li{counter-increment:dp;border-bottom:1px solid var(--rule-2)}
.dp-l a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 2px;
  align-items:center;transition:.16s}
.dp-l a:hover{padding-left:8px}
.dp-n{font-size:14.5px;color:var(--ink);font-weight:600}
.dp-n::before{content:counter(dp,decimal-leading-zero);font-family:var(--mono);
  font-size:10.5px;color:var(--ink-mut);margin-right:9px}
.dp-m{font-family:var(--mono);font-size:10.5px;color:var(--ink-mut);grid-column:1}
.dp-v{font-family:var(--mono);font-size:15px;color:rgb(var(--glow-v));
  grid-row:1/3;grid-column:2;font-variant-numeric:tabular-nums}
.dp-bar{grid-column:1;height:3px;border-radius:2px;background:var(--rule);margin-top:5px}
.dp-bar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--uv-cyan),var(--uv-mag))}

/* ---------------------------------------------------------------------------
   A <button> does not inherit colour from its ancestors: the UA gives it
   `buttontext`, which is black. Setting the colour only on a span inside it is
   not enough once anything resets it, so every control in the lab states its
   own colour, and its children inherit from the control.
   ------------------------------------------------------------------------- */
.lg-b,.or-b,.or-back,.or-again,.ck-x,.sc-b,.sc-fb,.bn-f button{color:var(--ink)}
.lg-b .lg-name{color:inherit}
.lg-b .lg-note{color:var(--ink-mut)}
.lg-n[data-tier="0"]>.lg-b{color:#04020A}
.lg-n[data-tier="0"]>.lg-b .lg-note{color:rgba(4,2,10,.7)}
.or-b{color:var(--ink)}

/* Stated as literals, not tokens. The lineage nodes were resolving to the light
   ink on a dark body and no amount of token plumbing made that reliable, so the
   two colours that matter are pinned and the light theme restates them. */
.lg-b .lg-name{color:#EAF6FF!important}
.lg-b .lg-note{color:#93A9C6!important}
.lg-n[data-tier="0"]>.lg-b .lg-name{color:#04020A!important}
.lg-n[data-tier="0"]>.lg-b .lg-note{color:rgba(4,2,10,.72)!important}
:root[data-theme="light"] .lg-b .lg-name{color:#0E0A1A!important}
:root[data-theme="light"] .lg-b .lg-note{color:#5A5270!important}
:root[data-theme="light"] .lg-n[data-tier="0"]>.lg-b .lg-name{color:#04020A!important}
.or-b{color:#EAF6FF}
:root[data-theme="light"] .or-b{color:#0E0A1A}