/* =========================================================================
   CANDLE LAB — layout only. Colours come from design-system tokens, so the
   lab follows Ink, Paper and Mono like every other page.
   ========================================================================= */

.lab{max-width:var(--page);margin:0 auto;padding:clamp(1.6rem,5vw,3rem) var(--gutter) 3rem}

.lab-head{max-width:44rem;margin-bottom:clamp(1.4rem,4vw,2.2rem)}
/* the same gold eyebrow the lesson pages use, so the Lab sits in the book */
.lab-eyebrow{font:600 .7rem/1.6 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--hero-eyebrow);margin:0 0 .5rem}
/* the edition disc belongs at the far right, as it does on a lesson. The
   lesson bar gets there through .pc, which the Lab has no use for. */
.topbar .edwrap.inbar{margin-left:auto}
.lab-head h1{font-family:var(--font-display);font-weight:var(--h1-weight,700);font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.05;margin:0 0 .8rem;color:var(--text)}
.lab-lead{font-size:1.15rem;line-height:1.65;color:var(--text);margin:0 0 .6rem}
.lab-fine{font:400 .8rem/1.55 var(--font-body);color:var(--dim);margin:.5rem 0 0}

.lab-sub{font:700 .72rem/1.5 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:1.4rem 0 .6rem}

/* ---------- examples ---------- */
.lab-examples{margin-bottom:1.6rem}
.lab-examples .lab-sub{margin-top:0}
.lab-group{display:grid;grid-template-columns:7.5rem 1fr;gap:.4rem 1rem;align-items:start;margin-bottom:.55rem}
.lab-group-name{font:600 .75rem/2.2 var(--font-ui);color:var(--dim);margin:0}
.lab-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.lab button{font:600 .76rem/1.2 var(--font-ui);color:var(--text);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:.5rem .8rem;min-height:2.2rem;cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.lab button:hover{border-color:var(--dim)}
.lab button[aria-pressed="true"]{background:var(--text);color:var(--void);border-color:var(--text)}
.lab button:focus-visible,.lab input:focus-visible{outline:3px solid var(--ice);outline-offset:3px}

/* ---------- two columns ---------- */
.lab-grid-2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);align-items:start}
.lab-work,.lab-result{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1rem,2.6vw,1.6rem)}
.lab-result{position:sticky;top:3.6rem}

.lab-bar{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-bottom:.6rem}
.lab-seg{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.lab-seg-name{font:600 .7rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-right:.3rem}
.lab-seg button{border-radius:var(--radius-sm);min-width:2.4rem}

/* ---------- chart ---------- */
.lab-chart svg{display:block;width:100%;height:auto}
.lab-grid{stroke:var(--line);stroke-width:1}
.lab-axis{font:600 17px var(--font-ui);fill:var(--dim);letter-spacing:.04em}
.lab-divider{stroke:var(--dim);stroke-dasharray:3 5;stroke-width:1}
.lab-bracket{fill:var(--fill-1);stroke:var(--ice);stroke-width:1.5;stroke-dasharray:5 4}
.lab-selected{fill:var(--fill-2);stroke:none}
.lab-num{font:700 19px var(--font-ui);fill:var(--dim)}
.lab-num.on{fill:var(--text)}
.lab-hit{fill:transparent;stroke:none}
.lab-mine{cursor:pointer}
.lab-ctx{opacity:.38}
.lab-hint{font:400 .78rem/1.4 var(--font-ui);color:var(--dim);margin:.2rem 0 0;text-align:center}

/* candles: green hollow up, red filled down (tokens in design-system.css) */
.lab .pl-stick.pl-up{--c:var(--candle-up)}
.lab .pl-stick.pl-down{--c:var(--candle-down)}
.lab .pl-stick.pl-flat{--c:var(--text)}
.lab .pl-wick{stroke:var(--c);stroke-width:2.5;fill:none}
.lab .pl-body{stroke:var(--c);fill:var(--c);stroke-width:2}
.lab .pl-stick.pl-up .pl-body{fill:none;stroke-width:3}

/* ---------- prices ---------- */
.lab-prices{border:0;padding:0;margin:1rem 0 0}
.lab-prices legend{font:700 .72rem/1.5 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text);padding:0;margin-bottom:.6rem}
.lab-price{display:grid;grid-template-columns:3.2rem 2.2rem minmax(0,1fr) 2.2rem 6.4rem;align-items:center;gap:.45rem;margin-bottom:.45rem}
.lab-price label{font:600 .8rem/1 var(--font-ui);color:var(--text)}
.lab-price input[type=range]{width:100%;accent-color:var(--hot);min-height:2.2rem}
.lab .nudge{border-radius:var(--radius-sm);padding:0;min-width:2.2rem;font-size:1rem}
.lab-price .rs{display:flex;align-items:center;gap:.15rem;font:600 .85rem var(--font-ui);color:var(--dim)}
.lab-price input[type=number]{width:100%;font:600 .9rem var(--font-ui);color:var(--text);background:var(--void);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.45rem .4rem;min-height:2.2rem}

/* ---------- result ---------- */
.lab-kind{font:600 .72rem/1.5 var(--font-ui);letter-spacing:.06em;color:var(--ice);margin:0}
.lab-name{font-family:var(--font-display);font-weight:var(--display-weight,700);font-size:clamp(1.8rem,4.5vw,2.5rem);line-height:1.1;margin:.2rem 0 .7rem;color:var(--text)}
.lab-explain{margin:0 0 .8rem;line-height:1.6;color:var(--text)}
.lab-context{margin:0 0 .6rem;padding:.6rem .8rem;border-radius:var(--radius-sm);border-left:3px solid var(--dim);background:var(--fill-1);font-size:.95rem;line-height:1.5;color:var(--text)}
.lab-context.ok{border-left-color:var(--candle-up)}
.lab-context.warn{border-left-color:var(--candle-down)}
.lab-context.ask{border-left-color:var(--ice)}
.lab-rules{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.lab-rules li{display:grid;grid-template-columns:1.2rem 1fr auto;gap:.5rem;align-items:baseline;font-size:.92rem;line-height:1.45;color:var(--text)}
.lab-rules .mark{font:700 .85rem var(--font-ui);color:var(--candle-up)}
.lab-rules li.no .mark{color:var(--candle-down)}
.lab-rules .v{font:600 .8rem var(--font-ui);color:var(--dim);white-space:nowrap}
.lab-note,.lab-also{font-size:.88rem;line-height:1.55;color:var(--dim);margin:.8rem 0 0}
.lab-each{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.lab-each li{font-size:.92rem;color:var(--text);display:flex;align-items:center;gap:.5rem}
.lab-each button{min-width:2rem;min-height:2rem;padding:0;border-radius:var(--radius-sm)}
.lab-each button[aria-current="true"]{background:var(--text);color:var(--void)}
.lab-lesson{display:inline-block;margin-top:1.1rem;font:600 .82rem/1.5 var(--font-ui);color:var(--text);text-decoration:underline;text-underline-offset:3px}
.lab-lesson.soon{color:var(--dim);text-decoration:none}

/* ---------- honesty ---------- */
.lab-honest{max-width:44rem;margin-top:clamp(2rem,6vw,3.4rem);border-top:1px solid var(--line);padding-top:1.4rem}
.lab-honest h2{font-family:var(--font-display);font-size:1.6rem;margin:0 0 .8rem;color:var(--text)}
.lab-honest p{color:var(--dim);line-height:1.7;margin:0 0 .8rem}
.lab-honest strong{color:var(--text)}

/* ---------- tabs ---------- */
.lab [hidden]{display:none!important}
.lab-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin:0 0 clamp(1.2rem,3vw,1.8rem);overflow-x:auto}
.lab .lab-tabs button{border:0;border-bottom:3px solid transparent;border-radius:0;background:none;
  padding:.8rem 1rem .7rem;font-size:.86rem;color:var(--dim);min-height:2.8rem;white-space:nowrap}
.lab .lab-tabs button span{display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;margin-right:.35rem;
  border-radius:50%;border:1px solid currentColor;font-size:.68rem}
.lab .lab-tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--text)}
.lab-intro{max-width:44rem;color:var(--dim);line-height:1.65;margin:0 0 1.4rem}
.lab-family{font:400 .9rem/1.5 var(--font-body);color:var(--dim);margin:.2rem 0 0}
.lab .lab-family button{padding:.15rem .55rem;min-height:0;font-size:.74rem;margin:0 .15rem}

/* ---------- families ---------- */
.fams{display:grid;gap:clamp(1rem,2.6vw,1.4rem)}
.fam{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1rem,2.6vw,1.5rem)}
.fam-head{display:flex;gap:.9rem;align-items:flex-start}
.fam-n{flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--text);color:var(--void);font:700 .9rem var(--font-ui)}
.fam-name{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,1.9rem);line-height:1.1;margin:0;color:var(--text)}
.fam-idea{margin:.25rem 0 0;color:var(--text);font-size:1.05rem}
.fam-look{margin:.8rem 0 1rem;color:var(--dim);line-height:1.6}
.fam-look b{color:var(--text);font-weight:600}
.fam-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.6rem}
.lab .fam-card{display:flex;flex-direction:column;align-items:stretch;gap:.2rem;border-radius:var(--radius-md);
  padding:.4rem .4rem .6rem;background:var(--void)}
.fam-card svg{display:block;width:100%;height:auto}
.fam-card span{text-align:center}
.fam-none{background:transparent;border-style:dashed}

/* ---------- spot it ---------- */
.spot{max-width:52rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1rem,2.6vw,1.6rem)}
.spot-top{display:flex;justify-content:space-between;gap:1rem}
.spot-count,.spot-score{font:700 .72rem/1.5 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0}
.spot-chart{margin:.4rem 0 .6rem}
/* the chart never pushes the answer off a laptop screen */
.spot-chart svg{max-height:min(46vh,24rem);margin:0 auto}
.spot-ask{font-size:1.15rem;color:var(--text);margin:.4rem 0 .7rem}
.spot-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.lab .spot-choices button{border-radius:var(--radius-sm);min-height:2.8rem;font-size:.82rem}
.spot-verdict{font:700 1.05rem/1.4 var(--font-ui);margin:.2rem 0 .5rem}
.spot-verdict.ok{color:var(--candle-up)}
.spot-verdict.no{color:var(--candle-down)}
.spot-said{margin:0 0 .5rem;color:var(--dim)}
.spot-look{margin:0 0 .8rem;line-height:1.6;color:var(--text)}
.spot-look b{font-weight:600}
.spot-next{margin-top:1.1rem}
.spot-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;max-width:46rem;margin:0 0 .9rem}
.lab .spot-levels button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;border-radius:var(--radius-md);padding:.6rem .8rem;text-align:left}
.lab .spot-levels button b{font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.lab .spot-levels button span{font:400 .95rem/1.2 var(--font-body)}
.spot-result{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin:.2rem 0 .6rem}
.spot-result .spot-verdict{margin:0}
.lab .spot-go.alt{background:transparent;color:var(--text);border-color:var(--line)}
.spot.has-wide{max-width:none}
.lab-mark{fill:none;stroke-width:2}
.lab-mark.hit{stroke:var(--candle-up);fill:var(--fill-1)}
.lab-mark.miss{stroke:var(--candle-down);stroke-dasharray:4 3}
.lab-askcol{fill:var(--fill-2)}
.lab-arrow{fill:var(--text)}
.lab .pl-stick.dense .pl-wick{stroke-width:1.6}
.lab .pl-stick.dense .pl-body{stroke-width:1.2}
.lab .pl-stick.dense.pl-up .pl-body{stroke-width:1.6}
.spot-chart [data-pick]{cursor:pointer}
.spot-chart [data-pick]:hover .pl-body{filter:brightness(1.15)}
.lab .spot-go{background:var(--text);color:var(--void);border-color:var(--text);border-radius:var(--radius-sm);padding:.7rem 1.4rem;font-size:.85rem}

/* ---------- tiers: core, stricter forms, rare ---------- */
.lab-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font:600 .8rem/1.4 var(--font-ui);color:var(--text);margin:0 0 .8rem;cursor:pointer}
.lab-toggle input{width:1.1rem;height:1.1rem;accent-color:var(--text);margin:0}
.lab-toggle span{font-weight:400;color:var(--dim)}
.lab .lab-chips button.var{border-style:dashed}
.lab .lab-chips button.rare{border-style:dotted;color:var(--dim)}
.lab .lab-chips button.rare[aria-pressed="true"]{color:var(--void)}
.lab-rare-label{align-self:center;font:700 .62rem/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 .1rem 0 .5rem}
.lab-tier{margin:-.3rem 0 .7rem;font-size:.92rem;color:var(--dim)}
.lab-tier.rare{color:var(--dim)}
.lab .lab-link{display:inline;padding:0;min-height:0;border:0;border-radius:0;background:none;color:var(--text);
  font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lab .lab-link:hover{border:0}

.fam-more{margin:.8rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.9rem;color:var(--dim)}
.fam-more b{font:700 .66rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-right:.3rem}
.lab .fam-chip{padding:.3rem .65rem;min-height:1.9rem;font-size:.72rem;border-style:dashed}
.lab .fam-chip.rare{border-style:dotted;color:var(--dim)}

/* ---------- reference ---------- */
.ref{margin-top:clamp(1.6rem,4vw,2.4rem);border-top:1px solid var(--line);padding-top:1.4rem}
.ref-title{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,1.9rem);margin:0 0 .4rem;color:var(--text)}
.ref-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem 1.2rem;margin-bottom:.4rem}
.ref-search{display:flex;flex-direction:column;gap:.3rem;flex:1 1 16rem;font:600 .7rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.ref-search input{font:400 1rem var(--font-body);color:var(--text);background:var(--void);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.6rem .7rem;min-height:2.6rem;text-transform:none;letter-spacing:0}
.ref-count{font:600 .72rem/1.5 var(--font-ui);color:var(--dim);margin:.3rem 0 .6rem}
.ref-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.lab .ref-row{display:grid;gap:.2rem;width:100%;text-align:left;border-radius:var(--radius-md);padding:.7rem .9rem;background:var(--panel)}
.ref-name{font:600 1rem/1.3 var(--font-ui);color:var(--text);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ref-tier{font:700 .6rem/1 var(--font-ui);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .45rem;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.ref-tier.core{color:var(--text);border-color:var(--text)}
.ref-tier.variant{border-style:dashed}
.ref-tier.advanced{border-style:dotted}
.ref-meta{font:400 .78rem/1.5 var(--font-ui);color:var(--dim)}
.ref-def{font:400 .95rem/1.55 var(--font-body);color:var(--text)}

/* ---------- spot it: steps and the note ---------- */
.spot-step{font:700 .68rem/1.4 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ice);margin:.6rem 0 .1rem}
.spot-intro{display:flex;align-items:flex-start;gap:.8rem;margin:0 0 .9rem;padding:.7rem .9rem;border:1px solid var(--line);
  border-left:3px solid var(--ice);border-radius:var(--radius-sm);background:var(--fill-1)}
.spot-intro p{margin:0;font-size:.95rem;line-height:1.55;color:var(--text)}
.lab .spot-x{flex:none;min-height:2rem;min-width:2rem;padding:0;border-radius:50%}
.spot-verdict.skip{color:var(--dim)}
.spot-pro{max-width:52rem}

/* ---------- phone ---------- */
@media (max-width:52rem){
  /* the tool first on a phone; the examples follow the result */
  .lab-build{display:flex;flex-direction:column}
  .lab-build .lab-grid-2{order:1} .lab-build .lab-examples{order:2;margin:1.6rem 0 0}
  .fam-members{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spot-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab-grid-2{grid-template-columns:1fr}
  .lab-result{position:static}
  .lab-group{grid-template-columns:1fr;gap:.3rem}
  .lab-group-name{line-height:1.4}
}
@media (max-width:30rem){
  /* label and rupee box on one line, the slider with its nudges under it */
  .lab-price{grid-template-columns:2.2rem minmax(0,1fr) 2.2rem;
    grid-template-areas:"lbl num num" "dn sl up";gap:.3rem .45rem;margin-bottom:.8rem}
  .lab-price label{grid-area:lbl}
  .lab-price .rs{grid-area:num;justify-self:end;width:7.5rem}
  .lab-price .nudge:first-of-type{grid-area:dn}
  .lab-price input[type=range]{grid-area:sl}
  .lab-price .nudge:last-of-type{grid-area:up}
}