/* SpecEnvoy Edu — Teeth & Dental — self-contained styles (site dark theme). */

.dx-intro { color: #aeb9d6; max-width: 62ch; margin: -6px 0 20px; line-height: 1.55; }

.dx-row {
  display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
}
.dx-chart {
  position: relative;
  flex: 1 1 340px; min-width: 300px;
  background: radial-gradient(120% 90% at 50% 40%, #141d36 0%, #0a0d18 72%);
  border: 1px solid rgba(120,150,220,.16); border-radius: 16px; padding: 10px 8px 4px;
}
.dx-chart svg { width: 100%; height: auto; display: block; }
.dx-hint { text-align: center; color: #8fa0c6; font-size: 12.5px; margin: 2px 0 8px; }

/* fullscreen the arch chart (native Fullscreen API + fixed-position CSS fallback) */
.dx-fs-btn {
  position: absolute; top: 12px; right: 12px; z-index: 7;
  font: inherit; font-size: 13px; color: #fff; cursor: pointer;
  background: rgba(20,29,54,.9); border: 1px solid rgba(140,165,225,.3);
  border-radius: 10px; padding: 7px 12px;
}
.dx-fs-btn:hover { background: rgba(40,55,95,.95); }
.dx-fs-banner { display: none; }
body.dx-fs-lock { overflow: hidden; }
.dx-chart.fs {
  position: fixed; inset: 0; z-index: 60; margin: 0; padding: 0;
  width: 100vw; height: 100vh; height: 100dvh; min-width: 0; border: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
.dx-chart.fs svg { width: auto; height: 92vh; max-width: 96vw; }
.dx-chart.fs .dx-hint { display: none; }
.dx-chart.fs .dx-fs-btn { top: 16px; right: 16px; }
.dx-chart.fs .dx-fs-banner {
  display: block; position: absolute; top: 16px; left: 16px; z-index: 7;
  background: rgba(14,20,38,.88); backdrop-filter: blur(6px);
  border: 1px solid rgba(120,150,220,.2); border-radius: 12px; padding: 9px 14px;
  max-width: calc(100% - 160px);
}
.dx-chart.fs .dx-fs-banner b { display: block; color: #fff; font-size: 17px; }
.dx-chart.fs .dx-fs-banner span { display: block; color: #9fb0d6; font-size: 12px; margin-top: 2px; }
.dx-chart.fs .dx-fs-hint { color: #9fb0d6; font-size: 14px; }

/* teeth */
.tooth { cursor: pointer; outline: none; }
.tooth-shape {
  fill: #e9e3d3; stroke: #b7ad95; stroke-width: 1.2;
  transition: fill .13s, stroke .13s, transform .13s;
}
.tooth:hover .tooth-shape { fill: #fff7e6; stroke: #6d97f0; }
.tooth:focus-visible .tooth-shape { stroke: #6d97f0; stroke-width: 2; }
.tooth.on .tooth-shape { fill: #ff5d8f; stroke: #ff87ac; stroke-width: 2; }
.tooth-groove line { stroke: rgba(90,80,60,.45); stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
.tooth.on .tooth-groove line { stroke: rgba(255,255,255,.4); }
.tooth-num { fill: #8fa0c6; font-size: 10.5px; font-weight: 600; pointer-events: none; }
.tooth-num.on { fill: #ff9ab9; }
.arch-label { fill: #6c7ba0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* selected-tooth card */
.dx-info {
  flex: 1 1 300px; min-width: 280px;
  background: rgba(15,21,40,.9); border: 1px solid rgba(120,150,220,.2);
  border-radius: 16px; padding: 18px 18px 20px; align-self: stretch;
}
.dx-info .tiPrompt { color: #aeb9d6; }
.dx-info.on .tiPrompt { display: none; }
.dx-info-head h2 { margin: 0; font-size: 22px; color: #fff; line-height: 1.15; }
.dx-info-head .zh { color: #9fb0d6; font-size: 15px; margin-top: 2px; }
.dx-nums { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 4px; }
.dx-nums span { font-size: 12.5px; color: #c3cde8; }
.dx-nums b {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #7f8fb5;
  margin-right: 5px; font-weight: 700;
}
.dx-block { margin-top: 15px; }
.dx-block h4 {
  margin: 0 0 5px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8b9bc2; font-weight: 700;
}
.dx-block p { margin: 0; color: #dde4f5; line-height: 1.55; font-size: 14.5px; }
.dx-block.clin {
  background: rgba(255,93,143,.09); border: 1px solid rgba(255,93,143,.28);
  border-radius: 12px; padding: 12px 13px;
}
.dx-block.clin h4 { color: #ff9ab9; }
.dx-info:not(.on) .dx-info-head, .dx-info:not(.on) .dx-nums, .dx-info:not(.on) .dx-block,
.dx-info:not(.on) .dx-3d-wrap, .dx-info:not(.on) .dx-variant { display: none; }

/* real 3D tooth model, tucked top-right of the info card (text wraps around) */
.dx-3d-wrap {
  position: relative; float: right; width: 172px; height: 184px; margin: 2px 0 6px 14px;
  background: radial-gradient(120% 100% at 50% 30%, #1a2438 0%, #0c1020 78%);
  border: 1px solid rgba(120,150,220,.16); border-radius: 14px;
}
#tooth3d { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#tooth3d:active { cursor: grabbing; }
.dx-3d-hint { position: absolute; left: 0; bottom: 5px; width: 100%; text-align: center; font-size: 11px; color: #7f8fb5; pointer-events: none; letter-spacing: .02em; }

/* Cusp of Carabelli "did you know" box (upper first molar only) */
.dx-variant {
  clear: right; margin: 8px 0 2px; padding: 11px 13px;
  background: rgba(91,134,236,.08); border: 1px solid rgba(120,150,220,.24); border-radius: 12px;
}
.dx-variant-note { margin: 0 0 9px; font-size: 13px; color: #cdd7ef; line-height: 1.5; }
.dx-variant-btn {
  font: inherit; font-size: 12.5px; color: #cdd7ef; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(140,165,225,.3);
  border-radius: 8px; padding: 6px 12px; transition: background .15s, border-color .15s, color .15s;
}
.dx-variant-btn:hover { background: rgba(91,134,236,.2); }
.dx-variant-btn.on { background: #3b6fe0; border-color: #6d97f0; color: #fff; }
@media (max-width: 520px) { .dx-3d-wrap { float: none; margin: 8px auto; width: 200px; height: 200px; } }


/* cross-section */
.dx-cut { margin: 30px 0 6px; }
.dx-cut h2 { font-size: 20px; color: #fff; margin: 0 0 4px; }
.dx-cut-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
.dx-cut-fig {
  flex: 0 0 auto; width: 240px; max-width: 60vw;
  background: radial-gradient(120% 90% at 50% 30%, #182238 0%, #0c1020 75%);
  border: 1px solid rgba(120,150,220,.16); border-radius: 16px; padding: 12px;
}
.dx-cut-fig svg { width: 100%; height: auto; display: block; }
.dx-cut-side { flex: 1 1 300px; min-width: 260px; }
.layer-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.layer-chip {
  font: inherit; font-size: 12.5px; color: #cdd7ef; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(140,165,225,.22);
  border-radius: 999px; padding: 6px 12px; transition: background .15s, border-color .15s, color .15s;
}
.layer-chip:hover { background: rgba(91,134,236,.18); }
.layer-chip.on { background: #3b6fe0; border-color: #6d97f0; color: #fff; }
#layerName { margin: 0 0 6px; font-size: 17px; color: #fff; }
#layerDesc { margin: 0; color: #dde4f5; line-height: 1.6; font-size: 14.5px; }

/* cross-section layer fills */
.cut-layer { transition: opacity .15s, stroke-width .15s; cursor: pointer; }
.cut-bone { fill: #574b39; opacity: .8; }
.cut-gum { fill: #c76f7e; }
.cut-cementum { fill: #b7a071; }
.cut-enamel { fill: #efe8d4; }
.cut-dentin { fill: #dcc294; }
.cut-pulp { fill: #d64f63; }
.cut-layer { stroke: rgba(10,13,24,.5); stroke-width: 1; }
.cut-layer:not(.on) { opacity: .45; }
.cut-layer.on { opacity: 1; stroke: #fff; stroke-width: 2.4; }
.cut-bone.on, .cut-gum.on { filter: brightness(1.15); }

@media (max-width: 640px) {
  .dx-cut-fig { width: 190px; }
}