/* =========================================================
   PSY122S — Psychological First Aid
   Calm, accessible, mobile-first educational styling
   ========================================================= */

/* ---- Design tokens -------------------------------------------------
   Light palette lives on bare :root. Dark-mode values are redefined
   twice: once under prefers-color-scheme (guarded so an explicit
   light choice always wins) and once under [data-theme="dark"] (so an
   explicit dark choice always wins). Components read tokens only —
   never a literal color that only makes sense in one theme.
   ------------------------------------------------------------------- */
:root{
  --color-bg: #f7f6f2;
  --color-surface: #ffffff;
  --color-surface-alt: #eef3ee;
  --color-border: #dcdfd6;
  --color-text: #22302a;
  --color-text-muted: #57635c;
  --color-on-primary: #ffffff;

  --color-primary: #2f6f5e;
  --color-primary-dark: #1f4f42;
  --color-primary-light: #e3efe9;

  --color-accent: #6a5acd;
  --color-accent-light: #ece9fb;

  --color-lens-border: #d6cff0;
  --color-lens-text: #4c3d99;

  --color-warn-bg: #fdf3e4;
  --color-warn-border: #e8c583;
  --color-warn-text: #6b4a12;

  --color-good: #2f6f5e;
  --color-good-bg: #e3efe9;
  --color-mid: #a5730f;
  --color-mid-bg: #fdf0dc;
  --color-low: #a03f3f;
  --color-low-bg: #fbe8e8;

  --color-focus: #6a5acd;
  --focus-ring: 3px solid var(--color-focus);
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(20,30,25,0.06), 0 4px 14px rgba(20,30,25,0.05);
  --shadow-card-hover: 0 6px 18px rgba(20,30,25,0.09);
  --max-width: 880px;

  /* System-only type pairing (no webfont network dependency, so the
     course app stays fast and reliable on any campus network): a
     serif for headings gives the page a warmer, more human voice than
     the sans-serif body text used for everyday reading and UI. */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg: #121815;
    --color-surface: #1a221e;
    --color-surface-alt: #202b25;
    --color-border: #33413a;
    --color-text: #e9ede9;
    --color-text-muted: #a9b6ae;
    --color-on-primary: #0d1512;

    --color-primary: #6cc3a8;
    --color-primary-dark: #8fd6bd;
    --color-primary-light: #1d332b;

    --color-accent: #b3a6f7;
    --color-accent-light: #2a2542;

    --color-lens-border: #453a72;
    --color-lens-text: #cec4fb;

    --color-warn-bg: #332811;
    --color-warn-border: #6b5324;
    --color-warn-text: #eecb87;

    --color-good: #6cc3a8;
    --color-good-bg: #1d332b;
    --color-mid: #d9a441;
    --color-mid-bg: #332911;
    --color-low: #e08d8d;
    --color-low-bg: #362021;

    --color-focus: #b3a6f7;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.3);
    --shadow-card-hover: 0 6px 18px rgba(0,0,0,0.4);
  }
}

:root[data-theme="dark"]{
  --color-bg: #121815;
  --color-surface: #1a221e;
  --color-surface-alt: #202b25;
  --color-border: #33413a;
  --color-text: #e9ede9;
  --color-text-muted: #a9b6ae;
  --color-on-primary: #0d1512;

  --color-primary: #6cc3a8;
  --color-primary-dark: #8fd6bd;
  --color-primary-light: #1d332b;

  --color-accent: #b3a6f7;
  --color-accent-light: #2a2542;

  --color-lens-border: #453a72;
  --color-lens-text: #cec4fb;

  --color-warn-bg: #332811;
  --color-warn-border: #6b5324;
  --color-warn-text: #eecb87;

  --color-good: #6cc3a8;
  --color-good-bg: #1d332b;
  --color-mid: #d9a441;
  --color-mid-bg: #332911;
  --color-low: #e08d8d;
  --color-low-bg: #362021;

  --color-focus: #b3a6f7;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 6px 18px rgba(0,0,0,0.4);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 17px;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height: 1.22;
  color: var(--color-primary-dark);
  font-weight: 600;
  text-wrap: balance;
}
h1{ font-size: 2rem; font-weight: 700; }
h2{ font-size: 1.5rem; margin-top: 2rem; }
h3{ font-size: 1.2rem; margin-top: 1.4rem; }
p{ margin: 0.7em 0; }
ul, ol{ padding-left: 1.3em; }
li{ margin: 0.35em 0; }

a{ color: var(--color-primary); }
a:hover{ color: var(--color-primary-dark); }

.visually-hidden{
  position: absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:0; top:-3rem;
  background: var(--color-primary-dark);
  color:var(--color-on-primary); padding:0.7em 1.2em;
  z-index:200; transition: top .15s ease;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ top:0; }

:focus-visible{
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
button, a, input, textarea, select{ font-family: inherit; }

/* ---------- Header / nav ---------- */
.site-header{
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top:0; z-index: 100;
}
.header-inner{
  max-width: 1080px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0.6rem 1rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.brand-mark{
  width:38px; height:38px; border-radius: 50%;
  background: var(--color-primary); color:var(--color-on-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-title{ font-family: var(--font-display); font-weight:600; color: var(--color-primary-dark); font-size:1.08rem; }
.brand-sub{ font-size:0.72rem; color: var(--color-text-muted); }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  background: var(--color-surface-alt);
  border:1px solid var(--color-border);
  border-radius: 8px;
  cursor:pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{
  content:""; display:block;
  width:20px; height:2px; background: var(--color-primary-dark);
  position:relative;
}
.nav-toggle-bars::before{ position:absolute; top:-6px; }
.nav-toggle-bars::after{ position:absolute; top:6px; }

.primary-nav{ width:100%; }
.primary-nav > ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.15rem; }
.primary-nav a, .sub-toggle{
  display:block; padding:0.65em 0.5em;
  text-decoration:none; color: var(--color-text);
  border-radius: 8px; font-size:0.96rem; font-weight:600;
  background:none; border:none; width:100%; text-align:left; cursor:pointer;
}
.primary-nav a:hover, .sub-toggle:hover{ background: var(--color-surface-alt); }
.primary-nav a.active{ background: var(--color-primary-light); color: var(--color-primary-dark); }
.sub-nav{ list-style:none; margin:0 0 0.3rem 0.6rem; padding-left:0.6rem; border-left:2px solid var(--color-border); display:none; }
.has-sub.open .sub-nav{ display:block; }
.sub-toggle{ display:flex; justify-content:space-between; align-items:center; }

.primary-nav{ display:none; }
.primary-nav.open{ display:block; }

@media (min-width: 900px){
  .nav-toggle{ display:none; }
  .header-inner{ flex-wrap:nowrap; }
  .primary-nav{ display:block; width:auto; }
  .primary-nav > ul{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:0.1rem; justify-content:flex-end; }
  .primary-nav a, .sub-toggle{ font-size:0.86rem; padding:0.55em 0.6em; }
  .has-sub{ position:relative; }
  .sub-nav{
    display:none; position:absolute; top:100%; left:0;
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius: 10px; box-shadow: var(--shadow-card);
    min-width:280px; padding:0.4rem; margin:0.25rem 0 0 0;
  }
  .has-sub.open .sub-nav, .has-sub:focus-within .sub-nav{ display:block; }
  .sub-nav li{ margin:0; }
}

/* ---------- Layout ---------- */
main{ display:block; }
.page{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.1rem 4rem;
}
.page-wide{ max-width: 1080px; }

.eyebrow{
  display:inline-block; font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
  color: var(--color-primary); background: var(--color-primary-light);
  padding:0.25em 0.7em; border-radius: 999px; margin-bottom:0.6rem;
}
.eyebrow.accent{ color:var(--color-accent); background:var(--color-accent-light); }

.lede{ font-size:1.08rem; color: var(--color-text-muted); }

.breadcrumbs{ font-size:0.85rem; color:var(--color-text-muted); margin-bottom:0.5rem; }
.breadcrumbs a{ text-decoration:none; }

/* ---------- Cards & panels ---------- */
.card{
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  margin: 1rem 0;
}
.card-grid{
  display:grid; grid-template-columns: 1fr; gap:1rem; margin:1.2rem 0;
}
@media (min-width:640px){
  .card-grid.cols-2{ grid-template-columns: 1fr 1fr; }
}
@media (min-width:820px){
  .card-grid.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
}
.link-card{
  display:block; text-decoration:none; color:inherit;
  background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); padding:1.1rem; box-shadow: var(--shadow-card);
  transition: transform .12s ease, box-shadow .12s ease;
}
.link-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.link-card h3{ margin-top:0; }
.link-card .cta{ font-weight:700; color:var(--color-primary); font-size:0.9rem; }

.panel{
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  margin: 1.1rem 0;
  border:1px solid var(--color-border);
}
.panel-lens{ background: var(--color-accent-light); border-color: var(--color-lens-border); }
.panel-lens h3{ color: var(--color-lens-text); margin-top:0; display:flex; align-items:center; gap:0.4em; }
.panel-boundary{ background: var(--color-warn-bg); border-color: var(--color-warn-border); }
.panel-boundary h3{ color:var(--color-warn-text); margin-top:0; }
.panel-example{ background: var(--color-surface-alt); }
.panel-notdo h3, .panel-do h3{ margin-top:0; }
.panel-do{ background: var(--color-good-bg); }
.panel-notdo{ background: var(--color-low-bg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.4em;
  padding:0.7em 1.2em; border-radius: 10px;
  border:1px solid var(--color-primary); background: var(--color-primary);
  color:var(--color-on-primary); font-weight:700; font-size:0.96rem;
  cursor:pointer; text-decoration:none; min-height:44px;
}
.btn:hover{ background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn.secondary{ background: var(--color-surface); color: var(--color-primary-dark); border-color: var(--color-border); }
.btn.secondary:hover{ background: var(--color-surface-alt); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-row{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1rem; }

/* ---------- Option / choice buttons for scenarios ---------- */
.option-list{ list-style:none; padding:0; margin:1rem 0; display:flex; flex-direction:column; gap:0.6rem; }
.option-btn{
  width:100%; text-align:left; background:var(--color-surface);
  border:1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding:0.85em 1em; font-size:0.98rem; cursor:pointer; min-height:44px;
  color: var(--color-text);
}
.option-btn:hover{ border-color: var(--color-primary); background: var(--color-primary-light); }
.option-btn.selected{ border-color: var(--color-primary); background: var(--color-primary-light); font-weight:600; }
.option-btn.selected.quality-best{ border-color: var(--color-good); background: var(--color-good-bg); }
.option-btn.selected.quality-partial{ border-color: var(--color-mid); background: var(--color-mid-bg); }
.option-btn.selected.quality-weak{ border-color: var(--color-low); background: var(--color-low-bg); }
.option-btn[disabled]{ cursor:default; }

.feedback-box{
  border-radius: var(--radius-md); padding:1rem 1.1rem; margin-top:0.9rem;
  border:1.5px solid var(--color-border); background: var(--color-surface-alt);
}
.feedback-box.quality-best{ background: var(--color-good-bg); border-color: var(--color-good); }
.feedback-box.quality-partial{ background: var(--color-mid-bg); border-color: var(--color-mid); }
.feedback-box.quality-weak{ background: var(--color-low-bg); border-color: var(--color-low); }
.feedback-tag{ font-weight:800; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:0.3em; }

.dialogue-line{
  background: var(--color-surface-alt); border-radius: var(--radius-md);
  padding:0.9em 1.1em; margin: 0.8em 0; font-style:italic;
}

/* ---------- Reflection ---------- */
.reflection-block{ margin-top:1.1rem; }
.reflection-block textarea{
  width:100%; min-height:90px; border-radius: var(--radius-md);
  border:1.5px solid var(--color-border); padding:0.7em; font-size:0.96rem;
  resize:vertical;
}
.reflection-note{ font-size:0.85rem; color:var(--color-text-muted); margin-top:0.3em; }
.save-status{ font-size:0.85rem; color: var(--color-primary); min-height:1.2em; display:block; margin-top:0.4em; }

/* ---------- Quiz ---------- */
.quiz-question{ margin: 1.3rem 0; }
.quiz-question p.stem{ font-weight:700; }
.quiz-options{ list-style:none; padding:0; }
.quiz-options label{
  display:flex; gap:0.6em; align-items:flex-start;
  padding:0.6em 0.7em; border-radius:8px; border:1.5px solid var(--color-border);
  margin:0.4em 0; cursor:pointer;
}
.quiz-options label:hover{ background: var(--color-surface-alt); }
.quiz-options input{ margin-top:0.3em; }
.quiz-result{ font-weight:700; }
.quiz-result.correct{ color: var(--color-good); }
.quiz-result.incorrect{ color: var(--color-low); }
.quiz-score-banner{ text-align:center; padding:1.3rem; }

/* ---------- Progress ---------- */
.progress-bar-track{
  background: var(--color-surface-alt); border-radius: 999px; height:12px; overflow:hidden;
  border:1px solid var(--color-border);
}
.progress-bar-fill{ background: var(--color-primary); height:100%; border-radius:999px; transition: width .3s ease; }
.progress-row{ display:flex; align-items:center; gap:0.8rem; margin:0.8rem 0; }
.progress-row .label{ flex: 0 0 150px; font-weight:600; font-size:0.92rem; }
.progress-row .pct{ flex:0 0 46px; text-align:right; font-size:0.85rem; color:var(--color-text-muted); }
.status-chip{
  display:inline-flex; align-items:center; gap:0.35em;
  font-size:0.78rem; font-weight:700; padding:0.2em 0.65em; border-radius:999px;
}
.status-chip.done{ background: var(--color-good-bg); color: var(--color-good); }
.status-chip.progress{ background: var(--color-mid-bg); color: var(--color-mid); }
.status-chip.todo{ background: var(--color-surface-alt); color: var(--color-text-muted); }

/* ---------- Timeline ---------- */
.timeline{ list-style:none; padding:0; margin:1.3rem 0; border-left:3px solid var(--color-primary-light); }
.timeline li{ position:relative; padding:0 0 1.3rem 1.3rem; }
.timeline li::before{
  content:""; position:absolute; left:-8px; top:0.25em;
  width:13px; height:13px; border-radius:50%;
  background: var(--color-primary); border:3px solid var(--color-primary-light);
}
.timeline .t-year{ font-weight:800; color: var(--color-primary-dark); display:block; font-size:0.9rem; }

/* ---------- Steps / flow diagram ---------- */
.flow{ display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin:1.2rem 0; }
.flow-step{
  background: var(--color-primary-light); color: var(--color-primary-dark);
  border-radius: 999px; padding:0.5em 1em; font-weight:700; font-size:0.86rem;
}
.flow-arrow{ color: var(--color-text-muted); font-weight:700; }

/* ---------- Filters (scenario library) ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:0.5rem; margin: 1rem 0 1.3rem; }
.filter-chip{
  border:1.5px solid var(--color-border); background:var(--color-surface);
  padding:0.45em 0.9em; border-radius:999px; font-size:0.85rem; cursor:pointer; font-weight:600;
  min-height:38px;
}
.filter-chip.active{ background: var(--color-primary); border-color: var(--color-primary); color:var(--color-on-primary); }
.search-input{
  width:100%; padding:0.7em 1em; border-radius: var(--radius-md);
  border:1.5px solid var(--color-border); font-size:0.96rem; margin-bottom:0.5rem;
}

/* ---------- Video embed ---------- */
.video-frame{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
  border-radius: var(--radius-md); background:#0f1a16; margin:1rem 0;
}
.video-frame iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.video-placeholder{
  border:2px dashed var(--color-border); border-radius: var(--radius-md);
  padding:1.5rem; text-align:center; color:var(--color-text-muted); background:var(--color-surface-alt);
}

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; margin:1rem 0; }
table{ border-collapse:collapse; width:100%; min-width:480px; }
th, td{ border:1px solid var(--color-border); padding:0.6em 0.75em; text-align:left; font-size:0.92rem; }
th{ background: var(--color-surface-alt); }

/* ---------- Hero / home ---------- */
.hero{
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
}
.hero-inner{ max-width: var(--max-width); margin:0 auto; padding: 2.2rem 1.1rem 2rem; }
.hero h1{ font-size:2.3rem; margin:0.2em 0 0.3em; }
@media (min-width:640px){ .hero h1{ font-size:2.6rem; } }
.objectives-list{ list-style:none; padding:0; display:grid; gap:0.8rem; margin:1.3rem 0; }
.objectives-list li{
  background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-md); padding:0.9em 1em; display:flex; gap:0.7em; align-items:flex-start;
}
.obj-num{
  flex:0 0 28px; height:28px; border-radius:50%; background:var(--color-primary); color:var(--color-on-primary);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem;
}

/* ---------- Misc ---------- */
.note-callout{
  border-left:4px solid var(--color-accent); background: var(--color-accent-light);
  padding:0.9em 1.1em; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin:1rem 0; font-size:0.94rem;
}
.small-muted{ font-size:0.85rem; color:var(--color-text-muted); }
hr.sep{ border:none; border-top:1px solid var(--color-border); margin:2rem 0; }
.center{ text-align:center; }
.site-footer{
  border-top:1px solid var(--color-border); background: var(--color-surface);
  text-align:center; padding:1.3rem 1rem 2rem; color: var(--color-text-muted); font-size:0.82rem;
}
.site-footer p{ margin:0.3em auto; max-width:640px; }

.tag-list{ display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.5rem 0; }
.tag{ background: var(--color-surface-alt); border:1px solid var(--color-border); border-radius:999px; padding:0.2em 0.7em; font-size:0.76rem; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.03em; }

details.accordion{ border:1px solid var(--color-border); border-radius: var(--radius-md); margin:0.7rem 0; background:var(--color-surface); }
details.accordion summary{ padding:0.85em 1em; font-weight:700; cursor:pointer; }
details.accordion .accordion-body{ padding:0 1.1em 1.1em; }

.rubric-list{ list-style:none; padding:0; }
.rubric-list li{
  display:flex; justify-content:space-between; gap:0.7em; padding:0.6em 0.8em;
  border:1px solid var(--color-border); border-radius:8px; margin:0.4em 0; background:var(--color-surface);
}