/* Glassly — Lab Console (lab-live.html)
   ---------------------------------------------------------------------------
   The instrument panel you land on after the airlock. Everything on this page
   is driven by the user's OWN synced scans, so the styling is built around
   real, variable data: numbers are tabular so columns don't jitter as values
   change, charts scale to their container, and every panel has a defined empty
   state rather than collapsing when a metric is missing.

   Layered on top of style.css + lab.css (shared tokens, nav, footer, airlock).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── shell ──────────────────────────────────────────────────────────────── */
.console-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) 5rem; }

.con-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.1rem;
  padding:1.6rem 0 1.15rem; border-bottom:1px solid var(--line);
  margin-bottom:2rem;
}
.con-title{ display:flex; align-items:baseline; gap:.6rem; margin-right:auto; }
.con-title h1{
  font-family:'Fraunces',Georgia,serif; font-size:clamp(1.5rem,3.6vw,2.1rem);
  font-weight:600; letter-spacing:-.02em; margin:0; line-height:1.1;
}
.con-title .con-v{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding:.16rem .42rem; border:1px solid var(--line-2);
  border-radius:5px; white-space:nowrap;
}
.con-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.con-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:550; color:var(--ink-2);
  padding:.34rem .68rem; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface);
  font-variant-numeric:tabular-nums;
}
.con-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none; }
.con-pill.tier{
  border-color:transparent; color:#fff;
  background:linear-gradient(120deg,var(--iris-1),var(--iris-3));
  letter-spacing:.08em; text-transform:uppercase; font-size:.7rem; font-weight:700;
}
.con-pill.muted .dot{ background:var(--ink-3); }

/* ── panels ─────────────────────────────────────────────────────────────── */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.45rem 1.5rem;
  box-shadow:var(--shadow-1);
}
.panel + .panel{ margin-top:1.15rem; }
.panel-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .9rem;
  margin-bottom:1.15rem;
}
.panel-head h2{
  font-family:'Fraunces',Georgia,serif; font-size:1.12rem; font-weight:600;
  letter-spacing:-.01em; margin:0; margin-right:auto;
}
.panel-head .hint{ font-size:.78rem; color:var(--ink-3); }

.con-grid{ display:grid; gap:1.15rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){
  .con-grid.two{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
}

/* ── latest reading: score dial ─────────────────────────────────────────── */
.reading{ display:flex; flex-wrap:wrap; align-items:center; gap:1.8rem; }
.dial{ position:relative; width:158px; height:158px; flex:none; }
.dial svg{ width:100%; height:100%; transform:rotate(-90deg); display:block; }
.dial circle{ fill:none; stroke-width:9; stroke-linecap:round; }
.dial .d-track{ stroke:color-mix(in oklab, var(--ink) 8%, transparent); }
.dial .d-val{
  stroke:url(#dialGrad);
  /* dasharray is set inline from the real score; the transition makes it
     sweep up from zero once the data lands. */
  transition:stroke-dasharray 1s cubic-bezier(.2,.75,.25,1);
}
.dial-num{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
}
.dial-num b{
  display:block; font-family:'Fraunces',Georgia,serif; font-size:2.5rem;
  font-weight:600; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.dial-num span{
  display:block; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); margin-top:.35rem;
}

.meters{ flex:1 1 260px; min-width:0; display:grid; gap:.72rem; }
.meter{ display:grid; grid-template-columns:1fr auto; gap:.2rem .8rem; align-items:baseline; }
.meter .m-name{ font-size:.83rem; font-weight:550; color:var(--ink-2); }
.meter .m-num{ font-size:.83rem; font-weight:600; font-variant-numeric:tabular-nums; }
.meter .m-bar{
  grid-column:1 / -1; height:6px; border-radius:3px; overflow:hidden;
  background:color-mix(in oklab, var(--ink) 8%, transparent);
}
.meter .m-bar i{
  display:block; height:100%; border-radius:inherit; width:0;
  background:linear-gradient(90deg,var(--iris-1),var(--iris-3));
  transition:width .85s cubic-bezier(.2,.75,.25,1);
}
.meter .m-bar i.tone-care{ background:linear-gradient(90deg,var(--warn),var(--warm)); }
.meter .m-bar i.tone-low { background:linear-gradient(90deg,var(--danger),var(--rose)); }

/* ── trend chart ────────────────────────────────────────────────────────── */
.chart-box{ position:relative; width:100%; overflow-x:auto; }
.chart{ width:100%; height:auto; display:block; min-width:320px; }
.chart .c-grid{ stroke:var(--line); stroke-width:1; }
.chart .c-axis{ fill:var(--ink-3); font-size:11px; font-variant-numeric:tabular-nums; }
.chart .c-area{ fill:url(#areaGrad); }
.chart .c-line{ fill:none; stroke:url(#lineGrad); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.chart .c-dot{ fill:var(--surface); stroke:var(--iris-2); stroke-width:2; }
.chart .c-dot.last{ fill:var(--iris-2); r:5; }
.chart .c-hit{ fill:transparent; }              /* widens the hover target for <title> */

.range-tabs{ display:flex; gap:.3rem; }
.range-tabs button{
  font:inherit; font-size:.76rem; font-weight:600; cursor:pointer;
  padding:.3rem .68rem; border-radius:999px;
  border:1px solid var(--line-2); background:transparent; color:var(--ink-3);
  transition:color .18s, border-color .18s, background .18s;
}
.range-tabs button:hover{ color:var(--ink-2); border-color:var(--ink-3); }
.range-tabs button[aria-selected="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}

/* ── small multiples ────────────────────────────────────────────────────── */
.sparks{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); }
.spark{
  border:1px solid var(--line); border-radius:var(--r); padding:.8rem .9rem;
  background:var(--bg-2);
}
.spark h3{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .3rem; font-weight:600;
}
.spark .s-val{
  font-family:'Fraunces',Georgia,serif; font-size:1.42rem; font-weight:600;
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.spark .s-delta{ font-size:.75rem; font-weight:600; margin-left:.35rem; font-variant-numeric:tabular-nums; }
.spark svg{ width:100%; height:34px; display:block; margin-top:.55rem; overflow:visible; }
.spark path{ fill:none; stroke:var(--iris-2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.up  { color:var(--ok); }
.down{ color:var(--danger); }
.flat{ color:var(--ink-3); }

/* ── scan log ───────────────────────────────────────────────────────────── */
.log-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.log{ width:100%; border-collapse:collapse; min-width:520px; font-variant-numeric:tabular-nums; }
.log th, .log td{ padding:.6rem .7rem; text-align:right; font-size:.83rem; white-space:nowrap; }
.log th:first-child, .log td:first-child{ text-align:left; }
.log thead th{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; border-bottom:1px solid var(--line-2);
}
.log tbody tr + tr td{ border-top:1px solid var(--line); }
.log tbody tr:hover td{ background:var(--bg-2); }
.log .score-cell{ font-weight:700; }

/* ── insights ───────────────────────────────────────────────────────────── */
.insights{ display:grid; gap:.7rem; margin:0; padding:0; list-style:none; }
.insight{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.8rem .95rem; border-radius:var(--r);
  background:var(--bg-2); border:1px solid var(--line);
  font-size:.9rem; line-height:1.5; color:var(--ink-2);
}
.insight .ico{ width:17px; height:17px; flex:none; margin-top:.15rem; color:var(--iris-2); }
.insight b{ color:var(--ink); font-weight:600; }

/* ── states: locked / empty / loading ───────────────────────────────────── */
.state{
  text-align:center; max-width:520px; margin:3rem auto; padding:2.4rem 1.6rem;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--shadow-1);
}
.state .state-ico{
  width:52px; height:52px; margin:0 auto 1.1rem; border-radius:14px;
  display:grid; place-content:center; color:var(--iris-2);
  background:color-mix(in oklab, var(--iris-1) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--iris-1) 24%, transparent);
}
.state .state-ico .ico{ width:24px; height:24px; }
.state h2{
  font-family:'Fraunces',Georgia,serif; font-size:1.4rem; font-weight:600;
  letter-spacing:-.02em; margin:0 0 .55rem;
}
.state p{ color:var(--ink-2); line-height:1.6; margin:0 0 1.35rem; }
.state .cta-row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }

.steps{ text-align:left; display:grid; gap:.6rem; margin:0 0 1.35rem; padding:0; list-style:none; counter-reset:s; }
.steps li{
  counter-increment:s; display:flex; gap:.7rem; align-items:flex-start;
  font-size:.89rem; color:var(--ink-2); line-height:1.5;
}
.steps li::before{
  content:counter(s); flex:none; width:21px; height:21px; border-radius:50%;
  display:grid; place-content:center; font-size:.7rem; font-weight:700;
  background:var(--accent); color:var(--accent-ink); margin-top:.08rem;
}

/* Skeleton shown while Firestore resolves. Opacity-only pulse — no layout. */
.skel{ border-radius:6px; background:color-mix(in oklab, var(--ink) 8%, transparent); animation:skelPulse 1.4s ease-in-out infinite; }
@keyframes skelPulse{ 0%,100%{ opacity:.45 } 50%{ opacity:.9 } }
@media (prefers-reduced-motion:reduce){
  .skel{ animation:none; }
  .dial .d-val, .meter .m-bar i{ transition:none; }
}

/* ── panel entrance ─────────────────────────────────────────────────────── */
/* One-shot, class-driven, staggered by an inline --i. No scroll listener and
   no scroll-timeline — those were what made the marketing pages stutter. */
.panel{ opacity:0; transform:translate3d(0,14px,0); }
.con-ready .panel{
  opacity:1; transform:none;
  transition:opacity .5s ease calc(var(--i,0) * 70ms), transform .5s cubic-bezier(.2,.8,.3,1) calc(var(--i,0) * 70ms);
}
@media (prefers-reduced-motion:reduce){
  .panel{ opacity:1; transform:none; }
  .con-ready .panel{ transition:none; }
}

@media (max-width:640px){
  .panel{ padding:1.15rem 1.05rem; }
  .reading{ gap:1.2rem; justify-content:center; }
  .dial{ width:132px; height:132px; }
}