/* Gum Health Explorer — route-local composition and scene states (signature system) */
.ls-explorer--gum{position:relative;background:linear-gradient(160deg,#14263a 0%,#1b3043 58%,#21425b 100%);color:#fff;padding:clamp(28px,5vw,64px) clamp(18px,4vw,56px) clamp(24px,3vw,40px);overflow:hidden;--gh-probe:2}
.ls-explorer--gum::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%;background:radial-gradient(closest-side,rgba(159,179,164,.16),rgba(159,179,164,0));pointer-events:none}
.ls-explorer--gum .ls-hero{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"copy stage" "panel stage";gap:28px clamp(24px,4vw,56px);max-width:1240px;margin:0 auto;align-items:start}
.ls-explorer--gum .ls-hero-copy{grid-area:copy}
.ls-explorer--gum .ls-stage{grid-area:stage;display:grid;gap:14px;position:sticky;top:88px}
.ls-explorer--gum .ls-panel{grid-area:panel;background:var(--ls-paper);color:var(--ls-ink);border-radius:20px;padding:22px 22px 24px;min-height:300px}
.ls-explorer--gum .ls-eyebrow{color:rgba(255,255,255,.66)}
.ls-explorer--gum .ls-title{margin:0 0 16px;font:400 clamp(34px,4vw,54px)/1.04 var(--ls-serif);letter-spacing:-.025em;color:#fff}
.ls-explorer--gum .ls-deck{color:rgba(255,255,255,.84);margin:0}
.ls-explorer--gum .ls-disclosure{max-width:1240px;margin:22px auto 0}
.ls-explorer--gum .ls-modes{justify-self:start;max-width:100%}
.ls-explorer--gum .ls-figure{padding:10px}
.ls-explorer--gum p{margin:0}
.ls-explorer--gum .ls-panel-hint{margin:0 0 14px}
.ls-explorer--gum .ls-panel-copy{margin:14px 0 0}
.ls-explorer--gum .ls-notes p{margin:0 0 8px}
.ls-explorer--gum .ls-notes h3{margin:0 0 6px;font:400 23px/1.1 var(--ls-serif);letter-spacing:-.02em;color:var(--ls-navy)}
.ls-explorer--gum .ls-ask{margin-top:12px}
.ls-explorer--gum .ls-chips button,.ls-explorer--gum .ls-modes [role="tab"]{font-family:var(--ls-sans)}
.ls-explorer--gum .sm-control{display:grid;gap:6px;margin:0 0 12px;font:600 13px/1.2 var(--ls-sans)}
.ls-explorer--gum .sm-control output{display:block;font:500 13px/1.3 var(--ls-sans);color:var(--ls-accent);margin-top:4px}
.ls-explorer--gum .sm-control input[type="range"]{width:100%;height:44px;margin:0;accent-color:var(--ls-accent);cursor:pointer}
.ls-explorer--gum .sm-control-ends{display:flex;justify-content:space-between;font:400 12px/1.2 var(--ls-sans);color:rgba(31,42,58,.62)}
/* ---------- scene states ---------- */
.ls-scene--gum{border-radius:12px}
.ls-scene--gum .gh-gum,.ls-scene--gum .gh-bone,.ls-scene--gum .gh-pocket,.ls-scene--gum .gh-plaque,.ls-scene--gum .gh-calculus,.ls-scene--gum .gh-bleed,.ls-scene--gum .gh-probe{display:none}
.ls-scene--gum .gh-stop-top,.ls-scene--gum .gh-stop-mid{transition:stop-color var(--ls-slow) ease}
/* gum variant per state */
.ls-explorer--gum[data-gum="healthy"] .gh-gum--healthy,.ls-explorer--gum[data-gum="treated"] .gh-gum--healthy,.ls-explorer--gum[data-gum="gingivitis"] .gh-gum--swollen,.ls-explorer--gum[data-gum="periodontitis"] .gh-gum--swollen,.ls-explorer--gum[data-gum="advanced"] .gh-gum--advanced,.ls-explorer--gum[data-gum="recession"] .gh-gum--recessed{display:block}
/* bone level per state (lost bone stays lost after treatment) */
.ls-explorer--gum[data-gum="healthy"] .gh-bone--full,.ls-explorer--gum[data-gum="gingivitis"] .gh-bone--full,.ls-explorer--gum[data-gum="periodontitis"] .gh-bone--moderate,.ls-explorer--gum[data-gum="treated"] .gh-bone--moderate,.ls-explorer--gum[data-gum="advanced"] .gh-bone--advanced,.ls-explorer--gum[data-gum="recession"] .gh-bone--recession{display:block}
/* pocket depth per state */
.ls-explorer--gum[data-gum="healthy"] .gh-pocket--sulcus,.ls-explorer--gum[data-gum="gingivitis"] .gh-pocket--gingivitis,.ls-explorer--gum[data-gum="periodontitis"] .gh-pocket--moderate,.ls-explorer--gum[data-gum="advanced"] .gh-pocket--deep,.ls-explorer--gum[data-gum="recession"] .gh-pocket--recession,.ls-explorer--gum[data-gum="treated"] .gh-pocket--treated{display:block}
/* deposits and bleeding */
.ls-explorer--gum[data-gum="gingivitis"] .gh-plaque,.ls-explorer--gum[data-gum="periodontitis"] .gh-plaque,.ls-explorer--gum[data-gum="advanced"] .gh-plaque{display:block}
.ls-explorer--gum[data-gum="periodontitis"] .gh-calculus:not(.gh-calculus--deep),.ls-explorer--gum[data-gum="advanced"] .gh-calculus{display:block}
.ls-explorer--gum[data-gum="gingivitis"] .gh-bleed,.ls-explorer--gum[data-gum="periodontitis"] .gh-bleed{display:block}
/* gum colour: calm pink for healthy/treated/recession, redder for inflamed stages */
.ls-scene--gum .gh-stop-top{stop-color:#f0b9b2}.ls-scene--gum .gh-stop-mid{stop-color:#e29e97}
.ls-explorer--gum[data-gum="gingivitis"] .gh-stop-top,.ls-explorer--gum[data-gum="periodontitis"] .gh-stop-top{stop-color:#e8837c}
.ls-explorer--gum[data-gum="gingivitis"] .gh-stop-mid,.ls-explorer--gum[data-gum="periodontitis"] .gh-stop-mid{stop-color:#d4625c}
.ls-explorer--gum[data-gum="advanced"] .gh-stop-top{stop-color:#dc7a73}.ls-explorer--gum[data-gum="advanced"] .gh-stop-mid{stop-color:#c45a54}
/* probe: tip at the healthy margin when depth is 0; 12 units per millimetre */
.ls-explorer--gum[data-probe="on"] .gh-probe{display:block}
.ls-scene--gum .gh-probe{transform:translateY(calc(var(--gh-probe,2) * 12px));transition:transform var(--ls-slow) var(--ls-ease)}
.ls-explorer--gum[data-gum="recession"] .gh-probe{transform:translateY(calc(43px + var(--gh-probe,2) * 12px))}
/* annotations: per mode, and per gum state where tagged */
.ls-scene--gum .gh-ann{opacity:0;transition:opacity var(--ls-fast) ease}
.ls-scene--gum .gh-ann path{fill:none;stroke:var(--ls-ink);stroke-width:1;stroke-opacity:.45;vector-effect:non-scaling-stroke}
.ls-scene--gum .gh-ann circle{fill:#fff;stroke:var(--ls-ink);stroke-width:1.25;stroke-opacity:.7}
.ls-scene--gum .gh-ann text{font:500 12.5px/1 var(--ls-sans);fill:var(--ls-ink);letter-spacing:.01em}
.ls-explorer--gum[data-mode="stages"] .gh-ann--stages:not([data-ann-gum]),.ls-explorer--gum[data-mode="measuring"] .gh-ann--measuring,.ls-explorer--gum[data-mode="recession"] .gh-ann--recession{opacity:1}
.ls-explorer--gum[data-mode="stages"][data-gum="healthy"] .gh-ann[data-ann-gum="healthy"],.ls-explorer--gum[data-mode="stages"][data-gum="gingivitis"] .gh-ann[data-ann-gum="gingivitis"],.ls-explorer--gum[data-mode="stages"][data-gum="periodontitis"] .gh-ann[data-ann-gum="periodontitis"],.ls-explorer--gum[data-mode="stages"][data-gum="advanced"] .gh-ann[data-ann-gum="advanced"],.ls-explorer--gum[data-mode="care"][data-gum="treated"] .gh-ann[data-ann-gum="treated"]{opacity:1}
.ls-explorer--gum[data-mode="care"][data-gum="gingivitis"] .gh-ann[data-ann-gum="gingivitis"]{opacity:1}
.ls-scene--gum .ls-caption{font:700 10.5px/1 var(--ls-sans);letter-spacing:.16em;text-transform:uppercase;fill:rgba(31,42,58,.52)}
@media (prefers-reduced-motion:reduce){.ls-scene--gum .gh-probe,.ls-scene--gum .gh-ann,.ls-scene--gum .gh-stop-top,.ls-scene--gum .gh-stop-mid{transition:none}}
@media (max-width:1100px){.ls-explorer--gum .ls-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "stage" "panel"}.ls-explorer--gum .ls-stage{position:static}}
@media (max-width:720px){.ls-explorer--gum{padding:26px 16px 22px}.ls-explorer--gum .ls-title{font-size:32px}.ls-explorer--gum .ls-figure{padding:8px;border-radius:14px}.ls-explorer--gum .ls-panel{padding:18px 16px 20px;border-radius:14px}
  .ls-scene--gum .gh-ann text,.ls-scene--gum .gh-ann path{display:none}.ls-scene--gum .gh-ann circle{r:6;stroke:var(--ls-accent);stroke-width:2.5;stroke-opacity:1}.ls-scene--gum .ls-caption{font-size:15px;letter-spacing:.1em}}