/* General knowledge: the question on the left, the ladder on the right, like the television game. */
.tv-head{text-align:center}
.tv-money-now{
  font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--amber);margin-top:4px;
}
.tv-head .prompt{margin:10px 0 16px;font-size:22px;line-height:1.3}
@media (min-width:760px){.tv-head .prompt{font-size:26px}}

.tv-choices{gap:10px}
.tv-choice{display:flex;align-items:center;gap:12px;text-align:left;min-height:60px}
.tv-text{flex:1 1 auto;min-width:0}

/* The question leads, the ladder is a sidebar, not a second column of equal weight. */
.tv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
/* a grid child defaults to min-content width, which let the ladder push the page sideways */
.tv-grid > *{min-width:0}
.tv-ladder-panel{overflow:hidden}
@media (min-width:1024px){.tv-grid{grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:start}}
@media (min-width:1500px){.tv-grid{grid-template-columns:minmax(0,1fr) 280px}}
.tv-choice.gone{opacity:.32;text-decoration:line-through}
.tv-vote{
  flex:0 0 auto;font-size:12px;color:var(--blue);
  background:var(--blue-bg);border-radius:999px;padding:3px 9px;
}
.tv-tools{margin-top:14px;flex-wrap:wrap}

.tv-verdict .tv-answer{font-size:20px;color:var(--text);margin-top:4px;line-height:1.3}

/* The ladder reads bottom to top, the way the money does. */
.tv-ladder-panel{align-self:start}
.tv-ladder{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.tv-rung{
  display:flex;align-items:center;gap:10px;
  padding:6px 12px;border-radius:999px;
  font-size:13px;color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.tv-rung .tv-step{width:20px;text-align:right;opacity:.7}
.tv-rung .tv-money{flex:1 1 auto}
.tv-rung.safe{color:var(--text);font-weight:500}
.tv-rung.safe .tv-money::after{content:' safe';font-size:11px;color:var(--text-2);font-weight:400}
.tv-rung.past{color:var(--green)}
.tv-rung.on{background:var(--amber);color:#202124;font-weight:500}
.tv-rung.on .tv-step{opacity:.8}

/* On a phone the ladder goes under the question, and only the rungs near you are worth showing. */
@media (max-width:899px){
  .tv-grid{gap:10px}
  .tv-ladder{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .tv-rung{flex:0 0 auto}
  .tv-rung .tv-step{display:none}
  .tv-rung.safe .tv-money::after{content:''}
}