/* ==========================================================================
   pages.css — Page/section rules + DSM-5 Learning Lab-specific components
   Loaded last. Responsive overrides at the bottom (mobile-first, spec §45).
   ========================================================================== */

/* --- Hero --- */
.hero {
  padding-block: var(--sp-9) var(--sp-8);
  position: relative;
  background:
    radial-gradient(120% 120% at 100% 0%, var(--c-accent-soft) 0%, transparent 45%),
    linear-gradient(var(--c-bg), var(--c-bg));
}
.hero__name { font-size: var(--fs-800); margin-bottom: var(--sp-2); letter-spacing: -0.015em; }
.hero__positioning { font-size: var(--fs-400); color: var(--c-text-muted); margin-top: var(--sp-4); max-width: 60ch; line-height: var(--lh-normal); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* --- Page header band (interior pages) --- */
.page-header {
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--c-border-soft);
  background: linear-gradient(var(--c-bg-alt), var(--c-bg));
}
.page-header h1 { font-size: var(--fs-700); position: relative; }
.page-header h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--c-accent);
  margin-top: var(--sp-4);
  border-radius: 2px;
}
.page-header p { color: var(--c-text-muted); font-size: var(--fs-400); margin-top: var(--sp-4); }

/* --- Snapshot: "at a glance" content counts --- */
.snapshot-band { background: var(--c-bg-alt); border-block: 1px solid var(--c-border-soft); }
.snapshot { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); margin: 0; max-width: none; }
.snapshot__item { text-align: center; padding: var(--sp-4) var(--sp-5); }
.snapshot__label {
  font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-accent); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); display: block;
}
.snapshot__value { font-family: var(--font-display); font-size: var(--fs-500); color: var(--c-primary); line-height: var(--lh-snug); max-width: none; margin: 0; }

/* --- Educational disclaimer banner (spec §22, §35: must always be visible) --- */
.disclaimer {
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  background: var(--c-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-text-muted);
  font-size: var(--fs-200);
  margin-block: var(--sp-6);
}
.disclaimer strong { color: var(--c-text); }

/* --- Notice (empty/degraded states + content-load warnings) --- */
.notice--warning { border-style: solid; border-color: var(--c-warning); background: color-mix(in srgb, var(--c-warning) 8%, var(--c-bg)); }
.notice--warning ul { margin-top: var(--sp-2); }

/* --- Quick Recall (spec §24 -- signature feature) --- */
.quick-recall { margin-top: var(--sp-7); }
.quick-recall__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-4); }
.quick-recall__item {
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  border: var(--border-w) solid var(--c-border-soft);
  background: var(--c-bg-raised);
  box-shadow: var(--shadow-sm);
}
.quick-recall__item--know { border-top: 3px solid var(--c-info); }
.quick-recall__item--notice { border-top: 3px solid var(--c-accent); }
.quick-recall__item--distinguish { border-top: 3px solid var(--c-success); }
.quick-recall__item .eyebrow { margin-bottom: var(--sp-2); }

/* --- Publication/reference-style list --- */
.pub-list { list-style: none; padding: 0; display: grid; gap: var(--sp-5); }
.pub-list > li { max-width: none; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-border-soft); }
.pub-list > li:last-child { border-bottom: 0; }
.pub__title { font-family: var(--font-display); font-size: var(--fs-400); color: var(--c-primary); }
.pub__venue { color: var(--c-text-muted); font-style: italic; }

/* --- Meta list (concepts, contact) --- */
.meta-list--concepts { gap: var(--sp-5); }
.meta-list--concepts .meta-list__item { display: grid; gap: 0.2rem; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border-soft); }
.meta-list--concepts dt { font-family: var(--font-display); color: var(--c-primary); font-weight: var(--fw-semibold); }
.meta-list--concepts dd { margin: 0; color: var(--c-text-muted); }

/* ==========================================================================
   Practice engine (assets/js/quiz.js renders into #practice-app)
   ========================================================================== */
.practice-setup { background: var(--c-bg-alt); border: 1px solid var(--c-border-soft); border-radius: var(--radius-md); padding: var(--sp-5); margin-top: var(--sp-6); }
.practice-setup__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-bottom: var(--sp-4); }
.practice-setup .filter-field { display: grid; gap: var(--sp-1); }
.practice-setup .filter-field span { font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.practice-setup select { font: inherit; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); min-height: 2.5rem; }

.quiz-progress { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-5); color: var(--c-text-subtle); font-size: var(--fs-200); }
.quiz-card { background: var(--c-bg-raised); border: 1px solid var(--c-border-soft); border-radius: var(--radius-md); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.quiz-card__stem { font-size: var(--fs-400); font-family: var(--font-display); color: var(--c-primary); margin-bottom: var(--sp-5); }
.quiz-options { display: grid; gap: var(--sp-3); list-style: none; padding: 0; }
.quiz-option {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; background: var(--c-bg);
  transition: border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
.quiz-option:hover { border-color: var(--c-primary); }
.quiz-option input { margin-top: 0.3em; }
.quiz-option--selected { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, var(--c-bg)); }
.quiz-option--correct { border-color: var(--c-success); background: color-mix(in srgb, var(--c-success) 10%, var(--c-bg)); }
.quiz-option--incorrect { border-color: var(--c-error); background: color-mix(in srgb, var(--c-error) 10%, var(--c-bg)); }
.quiz-option__rationale { display: block; font-size: var(--fs-200); color: var(--c-text-muted); margin-top: var(--sp-1); }
.quiz-order-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); background: var(--c-bg); }
.quiz-order-item__controls { display: flex; gap: var(--sp-2); }
.quiz-order-item__controls button { min-width: 2.5rem; min-height: 2.5rem; }
.quiz-match-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); align-items: center; padding-block: var(--sp-2); border-bottom: 1px solid var(--c-border-soft); }
.quiz-match-row input[type="text"] { font: inherit; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.quiz-feedback { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md); border: 1px solid var(--c-border); }
.quiz-feedback--correct { border-color: var(--c-success); background: color-mix(in srgb, var(--c-success) 8%, var(--c-bg)); }
.quiz-feedback--partial { border-color: var(--c-warning); background: color-mix(in srgb, var(--c-warning) 8%, var(--c-bg)); }
.quiz-feedback--incorrect { border-color: var(--c-error); background: color-mix(in srgb, var(--c-error) 8%, var(--c-bg)); }
.quiz-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.quiz-summary { text-align: center; padding: var(--sp-7) var(--sp-5); }
.quiz-summary__score { font-family: var(--font-display); font-size: var(--fs-800); color: var(--c-primary); }

/* ==========================================================================
   Case Lab (assets/js/case-lab.js renders into #case-lab-app)
   ========================================================================== */
.case-stepper { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); list-style: none; padding: 0; }
.case-stepper li { font-size: var(--fs-100); color: var(--c-text-subtle); padding: 0.2em 0.7em; border-radius: 999px; border: 1px solid var(--c-border); }
.case-stepper li[data-active="true"] { border-color: var(--c-primary); color: var(--c-primary); font-weight: var(--fw-semibold); }
.case-stepper li[data-done="true"] { border-color: var(--c-success); color: var(--c-success); }
.case-presenting { background: var(--c-bg-alt); border-radius: var(--radius-md); padding: var(--sp-5); border: 1px solid var(--c-border-soft); font-size: var(--fs-400); line-height: var(--lh-normal); }
.case-step { margin-top: var(--sp-6); }
.case-step h2 { font-size: var(--fs-500); margin-bottom: var(--sp-4); }
.case-textarea { width: 100%; min-height: 8rem; font: inherit; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.case-rubric { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-6); }
.case-rubric__dim { border: 1px solid var(--c-border-soft); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); }
.case-rubric__dim-label { display: flex; justify-content: space-between; font-size: var(--fs-200); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.case-rubric__bar { height: 8px; border-radius: 999px; background: var(--c-border-soft); overflow: hidden; }
.case-rubric__bar > span { display: block; height: 100%; background: var(--c-accent); }
.case-expert { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--c-accent-soft); border-radius: var(--radius-md); border-left: 4px solid var(--c-accent); }

/* ==========================================================================
   Search
   ========================================================================== */
.search-app { margin-top: var(--sp-4); }
.filter-field--large input[type="search"] { font-size: var(--fs-400); padding: var(--sp-3) var(--sp-4); width: 100%; }
.search-results { list-style: none; padding: 0; display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.search-result { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border-soft); }
.search-result__type { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-accent); font-weight: var(--fw-semibold); }

/* --- Progress (assets/js/progress.js) --- */
.progress-panel { background: var(--c-bg-alt); border: 1px solid var(--c-border-soft); border-radius: var(--radius-md); padding: var(--sp-5); margin-top: var(--sp-6); }
.progress-panel__reset { margin-top: var(--sp-3); }

/* --- Adaptive collection controls --- */
.collection-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-6); }
.filter-field select { font: inherit; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); min-height: 2.5rem; }

/* ==========================================================================
   Responsive overrides — mobile-first (spec §45/§47: read/think/choose/
   receive-feedback/continue must work well on a phone, no hover dependence)
   ========================================================================== */

@media (max-width: 47.99rem) {
  .primary-nav {
    position: fixed;
    inset: 4rem 0 auto 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform var(--motion-base) var(--motion-ease);
    z-index: var(--z-menu);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
  .primary-nav[data-open="true"] { transform: translateY(0); }
  .primary-nav ul { flex-direction: column; gap: 0; padding: var(--sp-2) var(--gutter); }
  .primary-nav li + li { margin-top: 0; }
  .primary-nav a { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border-soft); }
  .primary-nav a[aria-current="page"] { border-bottom-color: var(--c-accent); }
  .btn { width: 100%; justify-content: center; }
  .hero__cta .btn, .quiz-actions .btn { width: auto; }
}

.no-js .nav-toggle { display: none; }
.no-js .primary-nav { position: static; transform: none; box-shadow: none; }

@media (min-width: 48rem) {
  .nav-toggle { display: none; }
  .primary-nav { display: block !important; }
  .snapshot { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .snapshot__item + .snapshot__item { border-left: 1px solid var(--c-border); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  .quick-recall__grid { grid-template-columns: repeat(3, 1fr); }
  .practice-setup__grid { grid-template-columns: repeat(4, 1fr); }
  .quiz-match-row { grid-template-columns: 1.3fr 1fr; }
  .case-rubric { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .case-rubric { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  .site-header, .site-footer, .skip-link, .nav-toggle, .hero__cta, .btn, .quiz-actions, .practice-setup { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .hero, .page-header, .section { padding-block: 0.5rem !important; background: none !important; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}