/* temperature-top-p-explainer — style.css (RT-AI-035). Tokens only. Violet accent. */
#tte { display: flex; flex-direction: column; gap: 1.1rem; }

.tte-controls { display: grid; grid-template-columns: 1fr; gap: .85rem; }
@media (min-width: 560px) { .tte-controls { grid-template-columns: repeat(3, 1fr); } }

.tte-control { display: flex; flex-direction: column; gap: .4rem; }
.tte-control-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tte-label { font-size: .82rem; font-weight: 600; color: var(--rt-ink-soft, #2A3340); }
.tte-value {
  font-size: .95rem; font-weight: 700; color: var(--rt-violet, #7c3aed);
  font-family: var(--rt-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
}
.tte-range {
  width: 100%; height: 6px; appearance: none; -webkit-appearance: none;
  background: var(--rt-border, #d8dce2); border-radius: 999px; cursor: pointer; margin: .35rem 0;
}
.tte-range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rt-violet, #7c3aed); border: 2px solid var(--rt-card, #fff); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.tte-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--rt-violet, #7c3aed); border: 2px solid var(--rt-card, #fff); cursor: pointer;
}
.tte-range:focus-visible { outline: 2px solid var(--rt-violet, #7c3aed); outline-offset: 4px; }
.tte-hint { font-size: .7rem; color: var(--rt-ink-mute, #6b6760); line-height: 1.35; }

.tte-chart-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tte-chart-title { font-size: .82rem; font-weight: 600; color: var(--rt-ink-soft, #2A3340); }
.tte-reset {
  min-height: 32px; padding: .25rem .75rem; border: 1px solid var(--rt-border, #d8dce2);
  border-radius: 999px; background: var(--rt-card, #fff); color: var(--rt-ink-soft, #2A3340);
  font-weight: 600; font-size: .78rem; cursor: pointer;
}
.tte-reset:hover { border-color: var(--rt-violet, #7c3aed); color: var(--rt-violet, #7c3aed); }
.tte-reset:focus-visible { outline: 2px solid var(--rt-violet, #7c3aed); outline-offset: 2px; }

.tte-bars { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.tte-bar-row { display: grid; grid-template-columns: 5.5rem 1fr 3.2rem; align-items: center; gap: .6rem; }
.tte-bar-word {
  font-size: .85rem; font-weight: 600; color: var(--rt-ink, #14213d);
  font-family: var(--rt-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tte-bar-track {
  position: relative; height: 18px; border-radius: 999px;
  background: var(--rt-bg, #f7f6f3); border: 1px solid var(--rt-border, #d8dce2); overflow: hidden;
}
.tte-bar-fill {
  height: 100%; border-radius: 999px; background: var(--rt-violet, #7c3aed);
  transition: width .18s ease; min-width: 0;
}
.tte-bar-pct {
  font-size: .8rem; font-weight: 700; color: var(--rt-ink, #14213d); text-align: right;
  font-variant-numeric: tabular-nums;
}
.tte-bar-row.is-filtered .tte-bar-word,
.tte-bar-row.is-filtered .tte-bar-pct { color: var(--rt-ink-mute, #6b6760); opacity: .55; }
.tte-bar-row.is-filtered .tte-bar-track { opacity: .5; }

.tte-status { font-size: .75rem; color: var(--rt-ink-mute, #6b6760); min-height: 1.1em; margin: 0; }
.tte-caption { font-size: .74rem; color: var(--rt-ink-mute, #6b6760); margin: 0; line-height: 1.45; }