/* True or False — one assertion at a time on the reading desk. */

[hidden] { display: none !important; }

.tof-frame {
  width: min(560px, 96vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(14px, 2.6vw, 20px);
}
.dayline {
  margin: 0;
  text-align: center;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--ink-light);
}
.status-line {
  margin: 0;
  text-align: center;
  font-family: var(--hand);
  font-style: italic;
  font-size: clamp(14px, 2.1vw, 16px);
  color: var(--ink-soft);
  min-height: 20px;
}

.pips { display: flex; gap: 5px; justify-content: center; }
.pip {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(122, 104, 80, .25);
  box-shadow: inset 0 0 0 1px rgba(122, 104, 80, .35);
}
.pip.now { background: rgba(200, 156, 58, .5); box-shadow: inset 0 0 0 1.5px rgba(200, 156, 58, .9); }
.pip.good { background: #2f7d58; box-shadow: none; }
.pip.bad { background: var(--oxblood); box-shadow: none; }

.card {
  min-height: clamp(200px, 40vw, 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(14px, 3vw, 22px);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--cream), rgba(246, 238, 214, .85));
  box-shadow: inset 0 0 0 1px rgba(122, 104, 80, .3), 0 3px 10px rgba(60, 40, 20, .12);
}
.branch-chip {
  margin: 0;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10.5px;
  padding: 4px 12px;
  border-radius: 999px;
  color: hsl(var(--seal-hue, 8), 45%, 28%);
  background: hsl(var(--seal-hue, 8), 42%, 88%);
  box-shadow: inset 0 0 0 1px hsl(var(--seal-hue, 8), 40%, 70%);
}
.assertion {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(19px, 3.6vw, 25px);
  line-height: 1.35;
  color: var(--ink);
  max-width: 26em;
}
.verdict {
  margin: 0;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
}
.verdict.good { color: #2f7d58; }
.verdict.bad { color: var(--oxblood); }
.gloss {
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 30em;
}

.answer-row { display: flex; gap: 12px; justify-content: center; }
.answer-row[hidden] { display: none; }
.seal-btn { min-width: 132px; }
.seal-btn.not { background: var(--parchment); color: var(--oxblood); box-shadow: inset 0 0 0 1.5px var(--oxblood); }
.seal-btn.not:hover { background: var(--cream); }
.next-row { display: flex; justify-content: center; min-height: 0; }

.frame-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.overlay-grid { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin: 12px 0 4px; }
.overlay-grid .g {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  font-style: normal;
  font-size: 14px;
  color: #fff;
}
.overlay-grid .g.good { background: hsl(var(--seal-hue, 130), 38%, 38%); }
.overlay-grid .g.bad { background: hsl(var(--seal-hue, 8), 45%, 42%); filter: saturate(.75); }

.help-body { text-align: left; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.help-body p { margin: 0 0 12px; }
.help-body b { color: var(--oxblood); }