/* ───────── TRUSTGATE INTERACTIVE DEMO ───────── */
/* Vanilla widget, self-contained, no framework. */
/* Real calibration data from the TMLR paper. */

.tg{
  margin:28px 0 8px;
  padding:28px 28px 24px;
  background:#fafaf7;
  border:1px solid var(--border);
  border-left:2px solid var(--magenta);
  border-radius:0 10px 10px 0;
  font-family:var(--sans);
}

.tg-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.tg-head h3{font-size:18px;font-weight:600;color:var(--fg);letter-spacing:-0.012em;margin:0;line-height:1.25}
.tg-head .tg-sub{font-size:11px;color:var(--fg-tertiary);font-family:var(--mono);letter-spacing:0.04em;text-transform:uppercase}

/* ── chip rows ── */
.tg-row{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.tg-row > .tg-label{font-size:9.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-tertiary);font-family:var(--mono);line-height:1.4}
.tg-chips{display:flex;flex-wrap:wrap;gap:6px}
.tg-chip{
  appearance:none;-webkit-appearance:none;
  font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:-0.005em;
  padding:6px 12px;border:1px solid var(--border);border-radius:100px;
  background:#fff;color:var(--fg-secondary);cursor:pointer;
  transition:all 0.16s ease;line-height:1.3;
}
.tg-chip:hover{border-color:var(--fg);color:var(--fg)}
.tg-chip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.tg-chip[disabled]{opacity:0.32;cursor:not-allowed;background:#fff;color:var(--fg-tertiary);border-color:var(--border)}
.tg-chip[disabled]:hover{border-color:var(--border);color:var(--fg-tertiary)}

/* ── slider ── */
.tg-slider-wrap{display:flex;flex-direction:column;gap:8px;margin:6px 0 18px}
.tg-slider-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.tg-slider-top .tg-label{font-size:9.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-tertiary);font-family:var(--mono)}
.tg-slider-top .tg-value{font-size:14px;font-weight:600;color:var(--fg);font-family:var(--mono);letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.tg-slider-top .tg-value .tg-alpha{font-size:11px;color:var(--fg-tertiary);font-weight:500;margin-left:6px}
.tg-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:2px;
  background:linear-gradient(to right, var(--fg) var(--tg-pct,50%), rgba(9,10,11,0.10) var(--tg-pct,50%));
  outline:none;cursor:pointer;margin:0;
}
.tg-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--magenta);border:2px solid #fff;
  box-shadow:0 0 0 1px var(--border-strong),0 1px 2px rgba(0,0,0,0.08);
  cursor:grab;transition:transform 0.12s ease;
}
.tg-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.tg-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}
.tg-slider::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--magenta);border:2px solid #fff;
  box-shadow:0 0 0 1px var(--border-strong),0 1px 2px rgba(0,0,0,0.08);
  cursor:grab;
}
.tg-slider:focus-visible{outline:2px solid var(--magenta);outline-offset:6px;border-radius:4px}

/* ── result grid ── */
.tg-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:16px;
  margin:18px 0 16px;
  align-items:stretch;
}
@media (max-width:680px){.tg-grid{grid-template-columns:1fr}}

.tg-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tg-card-label{
  font-size:9.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--fg-tertiary);font-family:var(--mono);line-height:1.4;
}

/* ── chart ── */
.tg-chart{position:relative;flex:1;min-height:140px}
.tg-chart-canvas{width:100%;height:100%;display:block}
.tg-chart-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--fg-tertiary);font-family:var(--mono);text-align:center;padding:14px;
}
.tg-chart-axis{
  display:flex;justify-content:space-between;
  margin-top:6px;padding:0 2px;
  font-size:10px;color:var(--fg-tertiary);font-family:var(--mono);
  letter-spacing:0.04em;
}
.tg-chart-x{
  margin-top:8px;
  font-size:10.5px;color:var(--fg-tertiary);font-family:var(--mono);
  letter-spacing:0.04em;line-height:1.4;
}
.tg-chart-x strong{color:var(--fg-secondary);font-weight:600}

/* ── readouts ── */
.tg-readout{display:flex;flex-direction:column;gap:14px}
.tg-rl{display:flex;flex-direction:column;gap:2px}
.tg-rl-num{
  font-size:38px;font-weight:600;color:var(--fg);
  font-family:var(--sans);letter-spacing:-0.02em;line-height:1;
  font-variant-numeric:tabular-nums;
  transition:color 0.2s ease;
}
.tg-rl-num.pass{color:var(--fg)}
.tg-rl-num.fail{color:var(--fg-tertiary)}
.tg-rl-sub{font-size:11.5px;color:var(--fg-tertiary);font-family:var(--mono);letter-spacing:0.04em;text-transform:uppercase;line-height:1.4}

.tg-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tg-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:100px;
  font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  font-family:var(--mono);
}
.tg-pill.pass{background:#e8f3ec;color:#1f6b3f}
.tg-pill.fail{background:#fff;color:var(--fg-tertiary);border:1px solid var(--border)}
.tg-pill-mstar{background:#f0e9f0;color:var(--magenta)}

.tg-line{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;line-height:1.5}
.tg-line .k{color:var(--fg-tertiary);font-family:var(--mono);letter-spacing:0.02em;font-size:11px}
.tg-line .v{color:var(--fg);font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}

/* ── footnote + code ── */
.tg-foot{
  font-size:12.5px;color:var(--fg-secondary);line-height:1.6;
  margin:14px 0 18px;padding-top:14px;border-top:1px solid var(--border);
  max-width:none;
}
.tg-foot strong{color:var(--fg);font-weight:600}
.tg-foot code{font-family:var(--mono);font-size:11.5px;background:#f4f4f0;padding:1px 6px;border-radius:4px;color:var(--fg);font-weight:500}

.tg-code{
  font-family:var(--mono);font-size:12px;line-height:1.7;
  background:#0d0d0d;color:#e8e8e0;
  padding:14px 18px;border-radius:8px;
  overflow-x:auto;
  margin:0 0 14px;
  letter-spacing:0;
}
.tg-code .c-prompt{color:#707d84;user-select:none}
.tg-code .c-cmd{color:#fff}
.tg-code .c-flag{color:#E05FB8}

.tg-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.tg-cta a{
  font-size:12.5px;color:var(--fg);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--border);border-radius:6px;
  background:#fff;transition:border-color 0.16s ease;line-height:1.2;font-weight:500;
}
.tg-cta a:hover{border-color:var(--fg)}
.tg-cta a svg{width:13px;height:13px;color:var(--fg-tertiary);transition:color 0.16s ease;flex:0 0 auto}
.tg-cta a:hover svg{color:var(--magenta)}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .tg-chip,.tg-cta a,.tg-rl-num,.tg-slider::-webkit-slider-thumb{transition:none!important}
}