
/* DocTel Sleep Intelligence — v0.7.0 Clean Rebuild */
.dtsi, .dtsi *{ box-sizing:border-box; }
.dtsi{
  font-family: var(--doctel-body-font, inherit);
  max-width: 1080px;
  margin: 32px auto;
  padding: 0 14px;
  color: #e5e7eb;
}
.dtsi-h1, .dtsi-brandname, .dtsi-panelTitle, .dtsi-cardtitle, .dtsi-tabTitle{
  font-family: var(--doctel-heading-font, "Playfair Display", serif) !important;
  color: #ffffff !important;
}

.dtsi-shell{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(20,184,166,.16), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(56,189,248,.12), transparent 60%),
    rgba(11,18,32,.92);
  backdrop-filter: blur(10px);
}
.dtsi-topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.40);
}
.dtsi-brand{ display:flex; gap:12px; align-items:center; }
.dtsi-mark{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #14b8a6, #38bdf8);
  color:#051019; font-weight:900;
  box-shadow: 0 10px 28px rgba(20,184,166,.18);
}
.dtsi-brandtext{ display:flex; flex-direction:column; gap:2px; }
.dtsi-brandname{ font-weight:800; line-height:1.1; }
.dtsi-ai{ font-size:11px; color:#7dd3fc; font-weight:650; letter-spacing:.02em; }
.dtsi-tagline{ font-size:12px; opacity:.78; }

.dtsi-meta{ display:flex; gap:8px; align-items:center; }
.dtsi-chip{
  font-size:11px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
}
.dtsi-chip-muted{ opacity:.6; }

.dtsi-stage{ padding: 18px 18px 22px; }
.dtsi-headerRow{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.dtsi-h1{ margin: 6px 0 6px; font-size: 30px; letter-spacing: -0.01em; }
.dtsi-lead{ margin:0; opacity:.82; max-width: 70ch; line-height:1.6; }

.dtsi-mini{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  padding: 10px 12px;
  min-width: 160px;
}
.dtsi-miniLabel{ font-size:11px; opacity:.65; }
.dtsi-miniValue{ margin-top:4px; font-weight:800; }

/* Tabs */
.dtsi-tabs{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  margin: 14px 0 16px;
}
@media (max-width: 920px){
  .dtsi-tabs{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.dtsi-tab{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 12px 12px;
  text-align:left;
  color:#e5e7eb;
  cursor:pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
  position:relative;
}
.dtsi-tab:hover{ transform: translateY(-1px); border-color: rgba(56,189,248,.35); }
.dtsi-tab.is-active{
  border-color: rgba(20,184,166,.55);
  background: linear-gradient(135deg, rgba(20,184,166,.18), rgba(56,189,248,.10));
}
.dtsi-tabGhost{
  background: rgba(255,255,255,.02);
}
.dtsi-tabTitle{ display:block; font-size: 15px; font-weight: 750; }
.dtsi-tabSub{ display:block; font-size: 12px; opacity:.72; margin-top:2px; }
.dtsi-dot{
  position:absolute; top:12px; right:12px;
  width:10px; height:10px; border-radius:999px;
  background: rgba(148,163,184,.40);
  box-shadow: 0 0 0 0 rgba(20,184,166,.0);
}
.dtsi-dot.hasResult{ background: rgba(56,189,248,.95); }
.dtsi-dot.done{
  background: rgba(20,184,166,.95);
  box-shadow: 0 0 0 6px rgba(20,184,166,.12);
}

/* Panels */
.dtsi-panelGrid{
  display:grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 12px;
  align-items:start;
}
@media (max-width: 980px){
  .dtsi-panelGrid{ grid-template-columns: 1fr; }
}
.dtsi-panel{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 20px;
  padding: 14px;
}
.dtsi-panelTop{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dtsi-panelTitle{ font-weight: 850; font-size: 18px; }
.dtsi-panelSub{ margin-top: 4px; font-size: 12px; opacity:.78; max-width: 64ch; }

/* Progress */
.dtsi-progress{ display:flex; gap:10px; align-items:center; }
.dtsi-progressBar{
  width: 140px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.dtsi-progressFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(20,184,166,.95), rgba(56,189,248,.85));
  transition: width 220ms ease;
}
.dtsi-progressText{ font-size: 12px; opacity:.75; font-weight: 750; }

/* Questions */
.dtsi-questions{ padding-top: 12px; }
.dtsi-qcard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.22);
  border-radius: 18px;
  padding: 12px;
  margin: 10px 0;
  transition: border-color 140ms ease, transform 140ms ease;
}
.dtsi-qcard:hover{ border-color: rgba(56,189,248,.28); transform: translateY(-1px); }
.dtsi-qtop{ display:flex; gap:10px; align-items:flex-start; }
.dtsi-qindex{
  width: 38px; height: 28px;
  border-radius: 999px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  opacity:.9;
  flex: 0 0 auto;
}
.dtsi-qtext{ font-weight: 720; line-height:1.35; }

.dtsi-choiceRow{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:8px;
  margin-top: 10px;
}
.dtsi-pill{
  border-radius: 16px;
  padding: 10px 10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color:#e5e7eb;
  cursor:pointer;
  text-align:left;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.dtsi-pill:hover{ transform: translateY(-1px); border-color: rgba(56,189,248,.35); }
.dtsi-pill.on{
  border-color: rgba(20,184,166,.60);
  background: linear-gradient(135deg, rgba(20,184,166,.20), rgba(56,189,248,.10));
  box-shadow: 0 10px 30px rgba(20,184,166,.10);
}
.dtsi-pillTop{ display:block; font-weight: 800; font-size: 12px; color:#fff; }
.dtsi-pillSub{ display:block; margin-top: 4px; font-size: 11px; opacity:.75; }

@media (max-width: 980px){
  .dtsi-choiceRow{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Actions */
.dtsi-actions{ display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap; }

.dtsi-btn{
  font-family: inherit;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 780;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
  color:#e5e7eb;
  cursor:pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.dtsi-btn:hover{ transform: translateY(-1px); border-color: rgba(56,189,248,.35); }
.dtsi-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.dtsi-btn-primary{
  border:none;
  color:#051019;
  background: linear-gradient(135deg, #14b8a6, #38bdf8);
}
.dtsi-btn-secondary{
  border-color: rgba(20,184,166,.40);
  background: rgba(20,184,166,.12);
}
.dtsi-btn-ghost{
  background: rgba(255,255,255,.01);
}

/* AI panel */
.dtsi-aiHeader{ display:flex; align-items:center; gap:10px; }
.dtsi-aiBadge{
  font-size: 11px; font-weight: 850;
  padding: 6px 10px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(20,184,166,.25), rgba(56,189,248,.15));
  border:1px solid rgba(56,189,248,.18);
}
.dtsi-aiTitle{ font-weight: 850; color:#fff; }
.dtsi-aiBody{ margin-top: 10px; line-height: 1.65; opacity:.90; }
.dtsi-aiHint{ margin-top: 12px; font-size: 12px; opacity:.70; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }

/* Modal */
.dtsi-modal{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 999999;
}
.dtsi-modalCard{
  width: min(720px, 100%);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(700px 380px at 10% 0%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(700px 380px at 90% 20%, rgba(56,189,248,.12), transparent 60%),
    rgba(11,18,32,.96);
  padding: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  animation: pop 160ms ease-out;
}
@keyframes pop{ from{ transform: translateY(6px) scale(.99); opacity:.0; } to{ transform: translateY(0) scale(1); opacity:1; } }
.dtsi-modalTop{ display:flex; justify-content:space-between; align-items:center; }
.dtsi-x{
  width: 36px; height: 36px; border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color:#fff;
  font-size: 20px;
  cursor:pointer;
}
.dtsi-resultLine{ margin-top: 10px; font-weight: 850; }
.dtsi-resultBody{ margin-top: 10px; opacity:.90; line-height:1.65; }
.dtsi-modalActions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }
.dtsi-safeNote{ margin-top: 12px; font-size: 12px; opacity:.68; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  margin-right: 8px;
  font-size: 12px;
}
.badge.low{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.22); }
.badge.moderate{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.22); }
.badge.elevated{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.22); }
.muted{ opacity:.72; }
.dtsi-resultMsg{ font-weight: 850; color:#fff; }
.dtsi-resultNote{ margin-top: 8px; }
.dtsi-whatNext{ margin-top: 12px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.dtsi-whatNextTitle{ font-weight: 850; color:#fff; }
.dtsi-pathList{ margin: 8px 0 0 18px; opacity:.92; }

/* Snapshot */
.dtsi-snapshot{ margin-top: 12px; }
.dtsi-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.22);
  border-radius: 18px;
  padding: 14px;
}
.dtsi-cardtitle{ font-size: 16px; font-weight: 850; }
.dtsi-cardtext{ opacity:.78; line-height:1.6; margin-top: 8px; }
.dtsi-snapGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .dtsi-snapGrid{ grid-template-columns: 1fr; }
}
.dtsi-snapCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 12px;
}
.dtsi-snapTitle{ font-weight: 850; color:#fff; }
.dtsi-snapSub{ margin-top: 4px; font-size: 12px; opacity:.72; }
.dtsi-snapResult{ margin-top: 10px; font-size: 13px; opacity:.92; }
.dtsi-linkBtn{
  margin-top: 10px;
  border:none;
  background: transparent;
  color:#7dd3fc;
  font-weight: 850;
  cursor:pointer;
  padding:0;
}
.dtsi-empty{ opacity:.75; padding: 6px 2px; }

/* Footer */
.dtsi-footer{
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.40);
}
.dtsi-disclaimer{ font-size: 12px; opacity:.68; }

/* Animations */
.fade-in{ animation: fadeIn 180ms ease-out; }
@keyframes fadeIn{ from{ opacity:.0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }
.pulse{ animation: pulse 240ms ease-out; }
@keyframes pulse{ 0%{ transform: scale(1);} 40%{ transform: scale(1.01);} 100%{ transform: scale(1);} }

/* Utilities */
.dtsi-hidden{ display:none !important; }
body.dtsi-modalOpen{ overflow:hidden; }

/* CTA handoff */
.dtsi-ctaBlock{ margin-top: 14px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
.dtsi-ctaTitle{ font-weight: 900; color:#fff; margin-bottom: 10px; }
.dtsi-ctaRow{ display:flex; gap:10px; flex-wrap:wrap; }
.dtsi-cta{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 850;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
  color:#e5e7eb;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.dtsi-cta:hover{ transform: translateY(-1px); border-color: rgba(56,189,248,.35); }
.dtsi-cta.primary{ border:none; color:#051019; background: linear-gradient(135deg,#14b8a6,#38bdf8); }
.dtsi-cta.secondary{ border-color: rgba(20,184,166,.35); background: rgba(20,184,166,.10); }
.dtsi-cta.ghost{ background: rgba(255,255,255,.01); }
.dtsi-ctaNote{ margin-top: 10px; font-size: 12px; opacity:.72; }

/* Toast */
.dtsi-toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000000;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,18,32,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  font-weight: 850;
}
.dtsi-toast.show{ animation: toastIn 140ms ease-out; }
@keyframes toastIn{ from{ transform: translateY(8px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } }

/* Guided stepper */
.dtsi-qcard-single{ margin-top: 10px; }
.dtsi-choiceRow-single{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 981px){
  .dtsi-choiceRow-single{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.dtsi-rail{
  display:flex;
  gap:8px;
  padding: 6px 4px 12px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.dtsi-railDot{
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(148,163,184,.22);
  cursor:pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.dtsi-railDot:hover{ transform: translateY(-1px); border-color: rgba(56,189,248,.35); }
.dtsi-railDot.done{ background: rgba(56,189,248,.9); }
.dtsi-railDot.active{ background: rgba(20,184,166,.95); box-shadow: 0 0 0 6px rgba(20,184,166,.12); }

.dtsi-nav{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
}
.dtsi-navMid{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:center;
  flex:1 1 auto;
  min-width: 220px;
}
.dtsi-navMeta{ font-size: 12px; opacity:.78; }
.dtsi-navEta{ font-size: 12px; color:#7dd3fc; opacity:.85; }
.dtsi-nav2{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
