@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@400;500;600;700&display=swap");

:root{
  --navy:#172033;
  --ink:#243244;
  --paper:#f7f5ef;
  --card:#ffffff;
  --line:#e5e7eb;
  --gold:#c9a24a;
  --muted:#667085;
  --k:#3b82f6;
  --l:#22c55e;
  --e:#f59e0b;
  --c:#8b5cf6;
  --s:#e11d48;
  --radius:20px;
  --shadow:0 16px 42px rgba(23,32,51,.08);
}
*{box-sizing:border-box}
body.tdi-body{margin:0;font-family:"Noto Serif Thai",Georgia,serif;background:linear-gradient(180deg,#fcfbf7,var(--paper));color:var(--ink)}
button,input,textarea,select{font:inherit}
.tdi-shell{max-width:1200px;margin:auto;padding:40px 20px 80px}.tdi-title{color:var(--navy);font-size:clamp(2rem,4vw,3.4rem);line-height:1.1;margin:.2rem 0}.tdi-subtitle{color:var(--muted);line-height:1.8;max-width:880px}.tdi-eyebrow{color:var(--gold);text-transform:uppercase;font-weight:800;letter-spacing:.12em;font-size:.8rem}.tdi-intro-grid,.tdi-dashboard{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:28px}.tdi-card,.tdi-question-card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}.tdi-card h2,.tdi-question-card h2{color:var(--navy)}.tdi-card-head h2{margin:0 0 6px}.tdi-card-head p{margin:0 0 18px;color:var(--muted);line-height:1.6}.tdi-question-card{display:none}.tdi-question-card.is-active{display:block}.tdi-question-meta{display:flex;justify-content:space-between;color:#6b7280;margin-bottom:14px;font-size:.92rem}.tdi-question-text{color:var(--navy);line-height:1.75;margin:0 0 24px;font-size:1.35rem}.tdi-options-horizontal{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}.tdi-option{border:1px solid var(--line);border-radius:18px;padding:22px;min-height:150px;background:#fff}.tdi-option-label{color:var(--gold);font-weight:800;margin-bottom:12px}.tdi-option p{line-height:1.75;margin:0}.tdi-scale{border:0;margin:26px 0 0;padding:0}.tdi-scale-title{text-align:center;color:var(--muted);font-weight:700;margin-bottom:12px}.tdi-scale-caption{display:grid;grid-template-columns:1fr auto 1fr;color:#8792a3;font-size:.84rem;margin:0 auto 8px;max-width:560px}.tdi-scale-caption span:nth-child(2){text-align:center}.tdi-scale-caption span:last-child{text-align:right}.tdi-scale-row{display:flex;justify-content:center;gap:14px}.tdi-scale-choice{cursor:pointer}.tdi-scale-choice input{display:none}.tdi-scale-choice span{display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;border:2px solid var(--line);background:#fff;transition:.2s;font-weight:800;color:var(--navy)}.tdi-scale-choice input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px);box-shadow:0 12px 25px rgba(23,32,51,.18)}.tdi-progress-card{margin-bottom:24px}.tdi-progress-top{display:flex;justify-content:space-between;margin-bottom:8px;color:#6b7280;font-weight:700}.tdi-progress-track{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}.tdi-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--navy));transition:.25s}.tdi-nav{display:flex;justify-content:space-between;margin-top:28px}.tdi-primary-btn,.tdi-secondary-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:999px;cursor:pointer;font-size:1rem;text-decoration:none;font-weight:800}.tdi-primary-btn{background:var(--navy);color:#fff;border:none}.tdi-secondary-btn{background:#fff;color:var(--navy);border:1px solid var(--line)}.tdi-hidden{display:none!important}.tdi-warning{margin-top:16px;color:#b42318;font-weight:700}.tdi-scale-guide{display:grid;gap:8px;margin-top:16px}.tdi-scale-guide div{display:grid;grid-template-columns:32px 1fr;gap:10px;color:var(--muted)}.tdi-result-hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.tdi-dashboard-main{grid-template-columns:minmax(340px,1.35fr) minmax(300px,.85fr)}.tdi-radar-canvas{width:100%;max-width:560px;height:420px;display:block;margin:auto}.tdi-commitment-meter{height:14px;background:#e7e7e7;border-radius:999px;overflow:hidden;margin:20px 0 12px}.tdi-commitment-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--navy));border-radius:999px}.tdi-commitment-value{font-size:2rem;font-weight:900;color:var(--navy)}.tdi-muted{color:var(--muted);line-height:1.7}.tdi-heatmap-card{margin-top:24px}.tdi-heatmap-grid{display:grid;grid-template-columns:minmax(170px,1.4fr) repeat(5,minmax(72px,1fr));gap:8px;align-items:stretch}.tdi-heatmap-axis,.tdi-heatmap-domain,.tdi-heat-cell{padding:12px;border-radius:12px;text-align:center;font-weight:800}.tdi-heatmap-axis{color:var(--navy);background:#f2f4f7}.tdi-heatmap-domain{display:flex;align-items:center;justify-content:flex-start;text-align:left;color:var(--navy);background:#fff;border:1px solid var(--line);line-height:1.4}.tdi-heat-cell{color:#fff;position:relative;overflow:hidden}.tdi-heat-cell::before{content:"";position:absolute;inset:0;background:var(--axis-color);opacity:var(--heat)}.tdi-heat-cell{background:#eef1f5}.tdi-heat-cell{isolation:isolate}.tdi-heat-cell::after{content:"";position:absolute;inset:0;background:rgba(23,32,51,.18);opacity:calc(var(--heat) * .35)}.tdi-heat-cell{z-index:0}.tdi-heat-cell{color:var(--navy)}.tdi-heat-cell.axis-k{--axis-color:var(--k)}.tdi-heat-cell.axis-l{--axis-color:var(--l)}.tdi-heat-cell.axis-e{--axis-color:var(--e)}.tdi-heat-cell.axis-c{--axis-color:var(--c)}.tdi-heat-cell.axis-s{--axis-color:var(--s)}.tdi-bars{display:grid;gap:14px}.tdi-bar-row{display:grid;grid-template-columns:170px 1fr 56px;gap:12px;align-items:center}.tdi-bar-label{font-weight:800;color:var(--navy);line-height:1.35}.tdi-bar-track{height:12px;border-radius:999px;background:#e5e7eb;overflow:hidden}.tdi-bar-fill{height:100%;border-radius:999px;background:var(--axis-color)}.tdi-bar-row.axis-k{--axis-color:var(--k)}.tdi-bar-row.axis-l{--axis-color:var(--l)}.tdi-bar-row.axis-e{--axis-color:var(--e)}.tdi-bar-row.axis-c{--axis-color:var(--c)}.tdi-bar-row.axis-s{--axis-color:var(--s)}.tdi-bar-value{font-weight:800;color:var(--navy);text-align:right}.tdi-narrative-card p{line-height:1.85}.tdi-footer-note{text-align:center;margin-top:36px;color:#98a2b3}.tdi-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.tdi-options-horizontal{grid-template-columns:1fr}.tdi-result-hero{display:block}.tdi-retake-btn{margin-top:16px}.tdi-heatmap-grid{grid-template-columns:120px repeat(5,minmax(48px,1fr));font-size:.82rem}.tdi-bar-row{grid-template-columns:1fr}.tdi-bar-value{text-align:left}.tdi-scale-row{gap:8px}.tdi-scale-choice span{width:46px;height:46px}}


/* Interpretation Framework */
.tdi-interpretation-framework{margin-top:24px}
.tdi-interpretation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px}
.tdi-interpretation-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:20px;box-shadow:0 8px 22px rgba(23,32,51,.045)}
.tdi-interpretation-card h3{margin:10px 0;color:var(--navy)}
.tdi-interpretation-card p{line-height:1.78;color:var(--ink)}
.tdi-interpretation-score{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px;font-weight:900;color:var(--navy)}
.tdi-interpretation-card details{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.tdi-interpretation-card summary{cursor:pointer;font-weight:900;color:var(--navy)}
.tdi-interpretation-card li{margin:.45rem 0;line-height:1.65}
.tdi-interpretation-card.axis-k{border-top:5px solid var(--k)}
.tdi-interpretation-card.axis-l{border-top:5px solid var(--l)}
.tdi-interpretation-card.axis-e{border-top:5px solid var(--e)}
.tdi-interpretation-card.axis-c{border-top:5px solid var(--c)}
.tdi-interpretation-card.axis-s{border-top:5px solid var(--s)}


/* ==========================================================
   TDI v0.5 Professional Interpretation Report
   ========================================================== */
.tdi-interpretation-framework{
  margin-top:28px;
}

.tdi-interpretation-stack{
  display:grid;
  gap:24px;
  margin-top:24px;
}

.tdi-axis-report{
  --axis-color:var(--gold);
  background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
  border:1px solid var(--line);
  border-left:8px solid var(--axis-color);
  border-radius:22px;
  padding:26px;
  box-shadow:0 10px 28px rgba(23,32,51,.055);
}

.tdi-axis-report.axis-k{--axis-color:var(--k)}
.tdi-axis-report.axis-l{--axis-color:var(--l)}
.tdi-axis-report.axis-e{--axis-color:var(--e)}
.tdi-axis-report.axis-c{--axis-color:var(--c)}
.tdi-axis-report.axis-s{--axis-color:var(--s)}

.tdi-axis-header{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:16px;
  align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}

.tdi-axis-badge{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:var(--axis-color);
  color:#fff;
  font-weight:900;
  font-size:1.25rem;
  box-shadow:0 12px 26px rgba(23,32,51,.12);
}

.tdi-axis-title-block h3{
  margin:0;
  color:var(--navy);
  font-size:1.22rem;
}

.tdi-axis-title-block p{
  margin:5px 0 0;
  color:#667085;
  font-weight:800;
}

.tdi-axis-header strong{
  color:var(--navy);
  font-size:1.8rem;
  font-weight:950;
}

.tdi-axis-summary{
  color:var(--navy);
  font-weight:850;
  line-height:1.9;
  margin:0 0 14px;
}

.tdi-axis-meaning{
  color:#465467;
  line-height:1.95;
  margin:0 0 24px;
}

.tdi-drill-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.tdi-drill-grid section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}

.tdi-drill-grid h4{
  margin:0 0 12px;
  color:var(--navy);
  font-size:.98rem;
  line-height:1.45;
}

.tdi-drill-grid h4 span{
  color:#667085;
  font-size:.82rem;
}

.tdi-drill-grid ul{
  margin:0;
  padding-left:18px;
  color:#465467;
  line-height:1.75;
}

.tdi-drill-grid li{
  margin-bottom:7px;
}

.tdi-drill-grid p{
  color:#465467;
  line-height:1.8;
  margin:0;
}

@media(max-width:1050px){
  .tdi-drill-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:720px){
  .tdi-axis-header{grid-template-columns:48px 1fr;}
  .tdi-axis-header strong{grid-column:2;font-size:1.45rem;}
  .tdi-drill-grid{grid-template-columns:1fr;}
}