/* Glass Syllabus audience input + theme reveal styles (Phases 7 and 8).
   Kept in its own file so the parallel phase worktrees do not collide on the
   shared styles.css. Tokens (var(--violet) etc.) come from styles.css, which
   loads first. */

/* ---- Presenter-only blocks: live count + reset (roadmap and showcase) ---- */
.rm-presenter { display: none; }
body.presenter .rm-presenter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 14px 18px;
  background: #fff7e6;
  border: 1px solid #f3d588;
  border-left: 5px solid var(--amber);
  border-radius: 0 14px 14px 0;
  font-size: 14px;
  color: #6b4e00;
  font-weight: 600;
}
.rm-presenter b,
.rm-presenter .rm-count-num { font-weight: 800; color: #8a5a00; font-variant-numeric: tabular-nums; }
.rm-presenter .rm-count-num { font-size: 19px; }
.rm-reset {
  margin-left: auto;
  background: #fff;
  border: 1px solid #e0a96d;
  color: #9a3412;
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  transition: .16s;
}
.rm-reset:hover { background: #9a3412; color: #fff; border-color: #9a3412; }

/* ----------------------------- Theme reveal slides ----------------------- */
.reveal-slide[data-reveal="student"] .eyebrow { color: #15803d; background: #dcfce7; }
.reveal-slide[data-reveal="ai"] .eyebrow { color: #d97706; background: #fef3c7; }
.reveal-slide[data-reveal="student"] h2 em { color: #15803d; }
.reveal-slide[data-reveal="ai"] h2 em { color: #d97706; }

.reveal-clouds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin-top: 28px;
  align-items: start;
}
@media (max-width: 760px) { .reveal-clouds { grid-template-columns: 1fr; gap: 26px; } }

.reveal-cloud { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.reveal-cloud-title {
  display: inline-block;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11.5px;
  padding: 6px 14px;
  border-radius: 999px;
}
.reveal-cloud.violet .reveal-cloud-title { color: var(--violet); background: #efe9ff; }
.reveal-cloud.green .reveal-cloud-title { color: #15803d; background: #dcfce7; }
.reveal-cloud.amber .reveal-cloud-title { color: #d97706; background: #fef3c7; }

.reveal-cloud-shell {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 38px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: box-shadow .25s, transform .25s;
}
.reveal-cloud-shell:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.reveal-cloud.violet .reveal-cloud-shell { background: radial-gradient(circle at 50% 36%, rgba(109,40,217,.13), rgba(109,40,217,.03)); border: 1px solid rgba(109,40,217,.2); }
.reveal-cloud.green .reveal-cloud-shell { background: radial-gradient(circle at 50% 36%, rgba(21,128,61,.13), rgba(21,128,61,.03)); border: 1px solid rgba(21,128,61,.2); }
.reveal-cloud.amber .reveal-cloud-shell { background: radial-gradient(circle at 50% 36%, rgba(217,119,6,.14), rgba(217,119,6,.03)); border: 1px solid rgba(217,119,6,.22); }

.cloud {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 13px;
  max-height: 100%;
  overflow: hidden;
}
.reveal-cloud-shell.has-words .cloud { display: flex; }
.reveal-cloud-shell.has-words .reveal-empty { display: none; }
.reveal-empty { color: var(--muted); font-size: 13.5px; font-style: italic; max-width: 22ch; line-height: 1.5; }

.cloud .w {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 1px 3px;
  animation: wfade .5s both;
}
.cloud .w .wc { font-size: 11px; font-weight: 700; opacity: .55; font-variant-numeric: tabular-nums; }
.cloud .w.s1 { font-size: 14px; font-weight: 600; }
.cloud .w.s2 { font-size: 17px; font-weight: 600; }
.cloud .w.s3 { font-size: 21px; font-weight: 700; }
.cloud .w.s4 { font-size: 27px; font-weight: 800; }
.cloud .w.s5 { font-size: 34px; font-weight: 800; }

/* Prominence by size and weight above, reinforced by color depth here:
   the biggest words sit in the full card color, smaller ones step lighter. */
.reveal-cloud.violet .w { color: #6d28d9; }
.reveal-cloud.violet .w.s2 { color: #875cf3; }
.reveal-cloud.violet .w.s1 { color: #a78bfa; }
.reveal-cloud.green .w { color: #15803d; }
.reveal-cloud.green .w.s2 { color: #2f9e54; }
.reveal-cloud.green .w.s1 { color: #54b07a; }
.reveal-cloud.amber .w { color: #c2680a; }
.reveal-cloud.amber .w.s2 { color: #e0942c; }
.reveal-cloud.amber .w.s1 { color: #edab53; }

@keyframes wfade { from { opacity: 0; transform: translateY(9px) scale(.92); } to { opacity: 1; transform: none; } }

.reveal-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.reveal-legend .lg { color: #a8a2c8; font-weight: 800; line-height: 1; }
.reveal-legend .lg.s5 { font-size: 26px; }
.reveal-legend .lg.s3 { font-size: 19px; }
.reveal-legend .lg.s1 { font-size: 13px; }

@media print { .rm-presenter { display: none !important; } }