/* =========================================================
   students — page-specific styles  →  assets/css/students.css
   Loaded after assets/css/guide.css, which carries the shell and the
   components shared with the For Teaching page. Global styles live in
   assets/css/main.css.
   ========================================================= */

/* ── AI-use disclosure template ─────────────────────────── */
.disclosure-template {
  margin-bottom: 1.75rem;
}

.disclosure-template-desc {
  font-size: 0.75rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0.25rem 0 0.65rem;
}
/* ── Scenario Carousel ────────────────────────────────── */
.scenario-filter-row,
.scenario-filter-row-select {
  margin-bottom: 1.25rem;
}

.scenario-carousel {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.scenario-track-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 10px;
}

.scenario-track-wrap::-webkit-scrollbar { display: none; }

.scenario-track {
  display: flex;
}

.scenario-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: 0 10px 10px 0;
  padding: 1.35rem 1.5rem;
  transition: border-left-color 0.2s, box-shadow 0.2s;
}

.scenario-card[hidden] {
  display: none !important;
}

.guide-section--alt .scenario-card {
  background: var(--bg-2);
}

/* Active card was signalled by a --teal -> --teal-bright swap on a 4px rule: a 1.5x
   luminance step that is effectively invisible, and colour-only (WCAG 1.4.1).
   Width plus a surface lift carry it now, independently of hue. */
.scenario-card--active {
  border-left-color: var(--teal-bright);
  border-left-width: 6px;
  box-shadow: 0 0 0 1px var(--border-teal);
}

.scenario-nav {
  flex-shrink: 0;
  align-self: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-control);
  border-radius: 50%;
  background: var(--bg-1);
  color: var(--text-2);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.scenario-nav:hover {
  border-color: var(--teal);
  color: var(--teal-text);
  background: rgba(43, 138, 138, 0.08);
}

.scenario-counter {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-3);
  margin-top: 0.85rem;
  letter-spacing: 0.06em;
}

.scenario-persona {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-bottom: 0.5rem;
}

.scenario-context {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.scenario-detail {
  margin-bottom: 0.75rem;
}

/* ── Small-label floor ─────────────────────────────────
   Both labels below were 0.58rem — 9.28px at a default 16px root, under the 10px floor
   checkers flag as "very small text", and hard to read as letterspaced uppercase. 0.65rem
   is the floor already used across the guide family (.col-label, .do-dont-label,
   .rail-label, .makeover-col-label), and it clears 10px whether or not the reader keeps
   the browser default. Between them these two accounted for 57 of this page's alerts:
   the chips repeat per prompt card and the labels repeat per scenario detail.
   ─────────────────────────────────────────────────── */
.scenario-detail-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.25rem;
}

.scenario-detail p {
  font-size: 0.76rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}

.scenario-detail--good .scenario-detail-label { color: var(--teal-text); }
.scenario-detail--bad .scenario-detail-label { color: var(--pink-text); }

/* ── Prompt Library ───────────────────────────────────── */
.prompt-filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.prompt-filter-row {
  margin-bottom: 0;
}

.prompt-library-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.prompt-library-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.15rem 1.25rem 1.25rem;
}

.prompt-library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.prompt-meta-chip {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  background: rgba(43, 138, 138, 0.1);
  color: var(--teal-text);
  border: 1px solid var(--border-teal);
}

.prompt-meta-chip--intent {
  background: rgba(123, 162, 63, 0.1);
  color: var(--olive-text);
  border-color: var(--beige-border);
}

/* Hidden state for filtered prompts / scenarios */
.prompt-library-card[hidden],
.scenario-card[hidden] {
  display: none !important;
}

/* ── Student-page responsive ────────────────────────────── */
@media (max-width: 768px) {
  .prompt-library-grid { grid-template-columns: 1fr; }
  .scenario-nav { width: 2rem; height: 2rem; font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .scenario-nav--prev { margin-left: -0.25rem; }
  .scenario-nav--next { margin-right: -0.25rem; }
}