/* Classroom Admin help-section - extends pro/admin/switch-roles.css */

/* Admin dashboard card value override */
.ds-card-val { font-size: 12px; }

/* ---- HELP PAGE SCENE ---- */
.sc-help { background: #fff; display: flex; }
.hp-body { flex: 1; padding: 12px 16px; overflow: hidden; }

.hp-page-hd { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px;
  opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }
.hp-page-hd.pop { opacity: 1; transform: translateY(0); }

.hp-card { border: 1px solid #eee; border-radius: 11px; padding: 14px 18px;
  display: flex; gap: 0;
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.hp-card.pop { opacity: 1; transform: translateY(0); }

.hp-col { flex: 1; }
.hp-col-title { font-size: 11px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px;
  opacity: 0; transform: translateX(-4px); transition: opacity .3s ease, transform .3s ease; }
.hp-col-title.pop { opacity: 1; transform: translateX(0); }

.hp-link { font-size: 10px; color: #4285f4; padding: 7px 6px; border-radius: 4px;
  display: block; cursor: default;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease, color .2s, background .2s, padding .2s; }
.hp-link.pop { opacity: 1; transform: translateX(0); }
.hp-link.hl { color: #1967D2; background: #f0f4ff; text-decoration: underline; padding-left: 10px; }

.hp-col-divider { width: 1px; background: #eee; margin: 0 18px; align-self: stretch; }

/* Watch-first scene fit: the Help page (sidebar + body) reused as a tour scene.
   Tour chrome + .sc-dash sizing come from pro-admin-switch-roles.css; give the
   help page its own natural size + scale so it fits the player frame. */
.sim-tour .tour-scene .sc-help {
  width: 600px; height: 348px;
  transform: scale(.88); transform-origin: center; flex: 0 0 auto;
}
@media (max-width: 640px) {
  .sim-tour .tour-scene .sc-help { transform: scale(.48); }
}