/* Pico (pico.min.css, loaded before this file) owns the base
   typography/color/spacing system, box-sizing, and default element
   styling (table, dialog, button, form inputs, nav layout) -- this file
   is now just the app-specific pieces Pico has no opinion on, plus a
   couple of small overrides (header branding) layered on top of it. */

header { background: #20232a; color: white; }
header a { color: white; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.card {
  background: white;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.card h3 { margin-top: 0; }
.card.clickable { cursor: pointer; transition: box-shadow 0.15s ease; }
.card.clickable:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #e7e9f0;
  color: #444;
}
.badge.assessment { background: #fde8c8; color: #7a4b00; }
.badge.warning { background: #f8d7da; color: #7a1a1a; }
form.inline { display: inline; }
.messages { list-style: none; padding: 0; }
.messages li { padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; }
.messages .success { background: #d9f2e3; }
.messages .error { background: #f8d7da; }
.messages .warning { background: #fdf0c8; }
.chat-log { background: white; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; max-height: 60vh; overflow-y: auto; }
.chat-msg { margin-bottom: 0.75rem; }
.chat-msg .who { font-size: 0.75rem; color: #666; }
.chat-msg.student { text-align: right; }
.chat-msg.student .bubble { background: #dbe9ff; }
.chat-msg.tutor .bubble { background: #eee; }
.chat-msg.teacher .bubble { background: #fde8c8; }
.bubble { display: inline-block; padding: 0.5rem 0.75rem; border-radius: 10px; max-width: 80%; }
.sidebar { background: white; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.two-col { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; }
.btn { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 6px; border: none; background: #3c5cff; color: white; cursor: pointer; text-decoration: none; }
.btn.secondary { background: #5c6670; }
.btn.danger { background: #c0392b; }
/* Pico's own dialog rules make the bare <dialog> a full-viewport flex
   container by design (it's the click-outside-to-close backdrop area) --
   the actual bounded, centered modal box is the <article> child (see
   teacher_students.html/take_course.html for the header/article/footer
   structure Pico expects). Nothing to override here now beyond a
   slightly tighter width for the student-summary modal specifically. */
dialog > article { max-width: 480px; }
.pager-progress { margin-bottom: 1rem; }
.pager-progress-track { background: #e5e5e5; border-radius: 999px; height: 8px; overflow: hidden; }
.pager-progress-fill { background: #3c5cff; height: 100%; width: 0; transition: width 0.2s ease; }
.pager-progress-label { font-size: 0.85rem; color: #666; margin: 0.35rem 0 0; }
.pager-nav { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; }

/* Autonomous intake (T-0505, docs/ux/autonomous-intake.md): stepper,
   "You said" thread and the one-question screen. Everything wraps so a
   320px-wide screen never scrolls sideways, and every link or button is
   at least 24x24px. Messages are neutral: no red, no warning styling. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.intake { max-width: 40rem; margin: 0 auto 1rem; overflow-wrap: anywhere; }
.intake-stepper ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
  padding: 0; margin: 0 0 0.75rem;
}
.intake-stepper li { list-style: none; margin: 0; padding: 0.2rem 0; color: #595959; font-size: 0.9rem; }
.intake-stepper li[aria-current="step"] {
  color: #1f2433; font-weight: 600; border-bottom: 3px solid #3c5cff;
}
.intake-step-mark {
  display: inline-block; font-size: 0.75rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; background: #e7e9f0; color: #333; margin-right: 0.25rem;
}
.intake-counter { font-size: 0.9rem; color: #595959; margin-bottom: 1rem; }
.intake-thread { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.intake-thread li {
  list-style: none; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.25rem 0.75rem; padding: 0.4rem 0.75rem; margin-bottom: 0.4rem;
  border-left: 3px solid #dbe2f5; background: #f7f8fc; border-radius: 0 6px 6px 0;
}
.intake-thread-answer { flex: 1 1 12rem; min-width: 0; }
.intake-edit, .intake-keep {
  display: inline-flex; align-items: center; min-height: 24px; min-width: 24px;
  padding: 0.1rem 0.35rem;
}
.intake-framing { font-weight: 600; }
.intake-question { display: block; font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
.intake-hint { font-size: 0.9rem; color: #595959; margin-bottom: 0.5rem; }
.intake-message {
  border-left: 3px solid #3c5cff; background: #eef1fb; color: #1f2433;
  padding: 0.4rem 0.75rem; margin-bottom: 0.5rem; border-radius: 0 6px 6px 0;
}
.intake-message p { margin: 0; }
.intake-form textarea { width: 100%; max-width: 100%; }
.intake-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.intake-actions .btn { min-height: 44px; width: auto; margin: 0; }
.link-button {
  background: none; border: none; padding: 0; margin: 0;
  color: white; text-decoration: underline; cursor: pointer; font: inherit;
}
/* Body variant: .link-button above is styled for the dark header; in the
   page body it needs the link colour (white would be invisible). */
.link-button.in-body { color: #2237b8; text-decoration: none; }
.link-button.in-body:hover, .link-button.in-body:focus { text-decoration: underline; }
.muted { color: #595959; }
.spinner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(244, 245, 247, 0.9);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}
.spinner-overlay.visible { display: flex; }
.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #dbe2f5;
  border-top-color: #3c5cff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-overlay p { color: #333; font-size: 0.95rem; }

/* Non-blocking variant -- an inline status callout (e.g. "this
   student's profile is being refreshed") that sits in the normal page
   flow rather than covering it; the rest of the page stays fully
   usable while it's showing. Distinct from .spinner-overlay above,
   which is a deliberate full-page block used only for a form
   submission the user is directly waiting on. */
.processing-callout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #eef1fb;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #333;
}
.spinner-inline {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border: 3px solid #dbe2f5;
  border-top-color: #3c5cff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

/* Reduced motion: stop the spin and show a static ring. The wait text next
   to it carries the meaning, so nothing depends on motion or colour. */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .spinner-inline {
    animation: none;
    border-color: #3c5cff;
  }
}

/* Site-wide footer (T-0507-c2) */
.site-footer { text-align: center; padding: 1.5rem 1rem; font-size: 0.9rem; }

/* Lesson slides and practice (T-0509-c2). Without JS the slides are a
   plain ordered list; slides.js adds .slides-enhanced and shows one at a
   time. [hidden] is restated because the class rules set display. */
.slides-list.slides-enhanced { list-style: none; padding-left: 0; }
.slides-list .slide[hidden],
.slides-controls[hidden] { display: none; }
.slides-controls { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.slides-controls .slides-status { margin: 0; }
.slides-controls .btn:disabled { opacity: 0.5; cursor: default; }
/* Worked-example step reveal (T-0514-c3). Without JS every step shows;
   slides.js hides the steps not yet revealed. [hidden] is restated as above. */
.material-worked-example[data-reveal] ol > li[hidden],
.reveal-controls[hidden] { display: none; }
.reveal-controls { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.reveal-controls .reveal-status { margin: 0; }
.material-worked-example ol > li:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.practice-item { margin-bottom: 1rem; }
.practice-item label { display: block; margin-bottom: 0.3rem; }
.practice-feedback { margin: 0.3rem 0 0; padding: 0.5rem 0.8rem; background: #eef1fb; border-radius: 6px; }
/* Lesson figures (T-0518-c2, docs/ux/time-and-checks.md 5.4, 5.5). The
   picture is an <img> of a sanitised SVG and can't take the page's colours,
   so it always sits on an opaque white backdrop with padding and a border,
   in light and dark mode alike: no colour-scheme rule may darken it. Full
   width of its column, capped on wide screens, no fixed pixel width, so
   nothing scrolls sideways at 320px. The caption sits below the backdrop
   on the page background and uses the Pico (T-0511) tokens. No motion. */
.material-figure { margin: 1rem 0; max-width: 40rem; }
.material-figure img {
  display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: auto;
  background: #fff; padding: 8px;
  border: 1px solid var(--pico-muted-border-color, #cfd5e2); border-radius: 6px;
}
.material-figure figcaption {
  margin-top: 0.4rem; padding: 0; font-size: 0.9rem;
  color: var(--pico-muted-color, #595959);
}
/* Audio-style lesson as a script (T-0519-c1). One column; the speaker label sits on its own
   line. The left border (solid or dashed) backs up the label, so colour is never the only
   cue. Border colour is Pico's muted token: 3:1 or better on the page in light and dark. */
.script-turns { list-style: none; padding-left: 0; margin: 0; }
.script-turn { margin: 0 0 1rem; padding: 0.25rem 0 0.25rem 0.75rem; border-left: 4px solid var(--pico-muted-color); }
.script-turn-b { border-left-style: dashed; }
.script-speaker { display: block; }
.script-line > :last-child { margin-bottom: 0; }
.script-line { overflow-wrap: anywhere; }
/* Video-style lesson as a script (T-0519-c2). One column always: no float, no flex
   reordering, no ordering property, so DOM order is visual order. A stage direction is
   smaller and muted (Pico's muted token); its italic and literal brackets mean colour is
   never the only cue. */
.script-scene { margin: 0 0 1.5rem; overflow-wrap: anywhere; }
.script-direction { margin: 0.5rem 0; font-size: 0.9rem; color: var(--pico-muted-color); }
.script-narration > :last-child { margin-bottom: 0; }