/* Courses as media, waveform player (owner: agent D, console/js/courses.js).
 * Built on the design foundation in console.css: tokens only. */

/* --- the shelf: one card per course ---------------------------------------- */
.shelf { display: flex; flex-direction: column; gap: var(--space-4); }
.shelf-head { margin: 0; align-items: flex-end; }
.shelf-head h2 { margin: 0; }

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-5); }

/* Flat (2026-10-11): the card does not lift and its cover does not zoom; the
   border answers the pointer. */
.course-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface-1);
               border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
               cursor: pointer; transition: border-color var(--dur) var(--ease); }
.course-card:hover { border-color: var(--border-strong); }
.course-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* --- cover art ------------------------------------------------------------- */
.cover { position: relative; aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; flex: 0 0 auto; }
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* On a card the cover is a BAND, not a picture (2026-10-11): it keeps what it
   is for (whose course this is, by colour and seal; published or draft; how
   long it runs) at a third of the height, so the course's name is the first
   thing read. The generated art is cropped to the band's middle, not drawn
   smaller. 96px clears the seal (10 + 42) and the status chip above the
   running time. */
.course-card .cover { aspect-ratio: auto; height: 96px; border-bottom: 1px solid var(--border); }
/* A draft is visibly unfinished: the colour drains, the words still say Draft. */
.cover.is-draft .cover-art { filter: saturate(.25) brightness(1.08) contrast(.9); }
.cover.is-draft::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 10px, transparent 10px 20px); }

.cover-seal { position: absolute; top: 10px; left: 10px; display: inline-flex; padding: 4px; border-radius: var(--radius);
              background: #fff; z-index: 1; }
.cover-seal img { display: block; width: 34px; height: 34px; object-fit: contain; }
.cover-lore { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 10.5px; font-weight: var(--fw-bold);
              letter-spacing: .22em; color: rgba(255, 255, 255, .92); padding: 3px 7px 3px 9px; border-radius: var(--radius-pill);
              background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .28); }   /* .5 (2026-10-16): a cover is the theme's accent now, as light as Hologram's */
.cover-status { position: absolute; top: 10px; right: 10px; z-index: 1; }
.cover-status .chip { background: var(--surface-1); }
.cover-status .chip-ok { color: var(--ok); }
.cover-time { position: absolute; right: 10px; bottom: 10px; z-index: 1; font-size: var(--fs-caption);
              font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: #fff;
              background: rgba(8, 14, 20, .66); padding: 2px 8px; border-radius: var(--radius-sm); }

/* --- the card body ----------------------------------------------------------- */
.cc-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4); flex: 1 1 auto; }
/* The chip sits UNDER the title, not beside it: beside, it took a third of
   the width and cut "OSHA Laboratory Safety Guidance…" at 1360px. Up to three
   lines before the clamp — a course's name is the one thing on the card a
   teacher reads (2026-09-23). */
.cc-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.cc-title { margin: 0; font-size: 1.02rem; font-weight: var(--fw-semibold); line-height: var(--lh-tight);
            letter-spacing: var(--tracking-tight); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
            overflow: hidden; }
.cc-head .chip { flex: 0 0 auto; }
.cc-meta { font-size: var(--fs-small); color: var(--text-dim); margin-top: calc(-1 * var(--space-2)); }
.cc-meta > span + span::before { content: ' · '; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Three counts in a row, then "Last activity" as a line of its own
   (2026-10-11). It was four columns, `repeat(3, auto) 1fr`, of text that may
   not wrap in cells that may shrink (min-width: 0): the row needs about 278px
   ("Your students" is the wide one) and a card at the grid's 290px minimum
   has 256px inside its padding, so the columns were squeezed and "Finished"
   ran into "Last activity". Now the counts take the width of their own words
   and the fourth figure never shares their row, at any card width. A label
   may wrap as a last resort; nothing can collide. */
.cc-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
            gap: var(--space-2) var(--space-5); margin-top: auto;
            padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cc-stat { display: flex; flex-direction: column; min-width: 0; }
.cc-num { font-size: 1.05rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.2; }
.cc-label { font-size: var(--fs-caption); color: var(--text-dim); }
.cc-when { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.cc-whenv { font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.5; }

/* Craig and Randi. */
.voice-stack { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.voice-faces { display: inline-flex; }
.voice-faces .avatar { border: 2px solid var(--surface-1); box-sizing: content-box; }
.voice-faces .avatar + .avatar { margin-left: -7px; }

/* --- the course hero ------------------------------------------------------- */
/* The cover is the narrower column (was up to 360px): at a 960px window it
   left the words and the four figures 488px between them. */
.course-hero { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: var(--space-6); align-items: start;
               padding: var(--space-5); }
/* An approved cover picture (2026-10-15) lies over the pattern, which stays
   underneath for a picture that does not load. Cropped from the middle, as
   the pattern is; a draft's picture drains like its pattern does. */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.cover.is-draft .cover-img { filter: saturate(.25) brightness(1.08) contrast(.9); }

/* The course cover card: what learners see now, beside the picture waiting for a decision. */
.cover-card .cover-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 320px)); gap: var(--space-4);
                          margin: var(--space-2) 0 var(--space-4); }
.cover-fig { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cover-fig .cover { border-radius: var(--radius); border: 1px solid var(--border); }
.cover-fig.is-proposal .cover { outline: 2px solid var(--accent); outline-offset: 2px; }
.cover-actions { flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.cover-alt { margin-top: var(--space-3); max-width: 640px; }
.cover-alt input[type="text"] { flex: 1 1 auto; min-width: 0; }
/* The same card in the timeline's "Course cover" dialog: the dialog is the card. */
.cover-card.in-dialog { border: 0; padding: 0; background: transparent; box-shadow: none; }

.cover-big { border-radius: var(--radius); aspect-ratio: 16 / 10; }
.cover-big .cover-seal img { width: 44px; height: 44px; }
/* A size container, so the figures below can ask how wide THIS column is: it
   depends on the cover beside it, which a window-width query cannot see. */
.hero-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; container-type: inline-size; }
.hero-kicker { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps);
               text-transform: uppercase; color: var(--text-dim); }
.hero-title { margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight);
              letter-spacing: var(--tracking-tight); }
.hero-source { margin: 0; font-size: var(--fs-small); color: var(--text-dim); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--space-1); }
/* The four figures, as one ruled readout (see cards.css .att-stats). The tiles
   used to overlap here: .stat carried min-width: 150px (console.css) and this
   group, unlike .att-stats and .house-stats, never reset it, so in tracks of
   ~113px each tile overran into the next and the last left the card. The
   minimum is gone at the source, and under 600px of column the four go two
   by two instead of being squeezed. */
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: var(--space-3);
              border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.hero-stats .stat { min-width: 0; padding: var(--space-3) var(--space-4); border: 0; border-radius: 0;
                    box-shadow: 0 0 0 1px var(--border); }
.hero-stats .stat-value { font-size: 1.4rem; }
@container (max-width: 600px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- lessons ----------------------------------------------------------------- */
.lesson-list { list-style: none; margin: 0; padding: 0; }
.lesson-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-4); align-items: start;
              padding: var(--space-4) var(--space-2); border-top: 1px solid var(--border); border-radius: var(--radius-sm);
              transition: background var(--dur-fast); }
.lesson-row:first-child { border-top: 0; }
.lesson-row:hover { background: var(--surface-2); }
.lesson-row:has(.play-toggle.is-current) { background: var(--brand-soft); }
/* The lesson's number is an ordinal, not an action: neutral, like the other
   sequence marks (.lb-seq, .fl-seq), so sixteen rows are not sixteen squares
   of the accent colour (2026-10-11). */
.lr-num { width: 44px; height: 44px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center;
          font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; font-size: 1rem;
          color: var(--text); background: var(--surface-2); border: 1px solid var(--border); }
.lr-main { min-width: 0; }
.lr-title { font-weight: var(--fw-semibold); line-height: 1.35; }
.lr-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 3px;
           font-size: var(--fs-small); color: var(--text-dim); }
.lr-fact { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.lr-fact .icon { opacity: .8; }
.lr-listen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--space-2); }
.lr-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* Voice buttons: a face, a name, and the play state. */
.play-toggle { border-radius: var(--radius); padding-inline: 6px 12px; border: 1px solid var(--border); }   /* a control, so not a pill */
.play-toggle .avatar { margin-block: -2px; }
.play-toggle .icon-users { color: var(--brand-ink); }
.play-toggle.is-playing .icon-users { color: inherit; }
.pt-dur { font-size: var(--fs-caption); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.play-toggle.is-playing .pt-dur { color: inherit; opacity: .85; }
.lr-listen .listen-row { gap: 4px 6px; }

/* The play/pause marks are the foundation's icons now, filled. */
.pl-ico-play, .pl-ico-pause { width: auto; height: auto; border: 0; margin: 0; display: inline-flex; }
.pl-ico .icon { display: block; fill: currentColor; stroke-width: 0; }
.pl-toggle .pl-ico .icon { width: 22px; height: 22px; }
.pl-toggle .pl-ico-play .icon { margin-left: 2px; }

/* --- the player's waveform --------------------------------------------------- */
.pl-now { gap: var(--space-3); }
.pl-face { display: inline-flex; flex: 0 0 auto; }
.pl-face-icon { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                background: var(--brand-soft); color: var(--brand-ink); }
.pl-wave { flex: 1 1 auto; min-width: 4rem; height: 46px; position: relative; cursor: pointer; touch-action: none;
           color: var(--brand-fill); --wave-rest: color-mix(in srgb, var(--text-dim) 38%, transparent);
           border-radius: var(--radius-sm); }
.pl-wave canvas { display: block; width: 100%; height: 100%; }
.pl-wave:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pl-wave[data-state="loading"] { animation: pl-wave-wait 1.2s ease-in-out infinite; }
@keyframes pl-wave-wait { 50% { opacity: .5; } }
.pl-wave[hidden], .pl-seek[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .course-card, .cover-art { transition: none; }
  .course-card:hover, .course-card:hover .cover-art { transform: none; }
  .pl-wave[data-state="loading"] { animation: none; }
}

/* --- tablet and phone ---------------------------------------------------- */
@media (max-width: 900px) {
  .course-hero { grid-template-columns: 1fr; }
  .cover-big { aspect-ratio: 21 / 9; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .course-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .cover { aspect-ratio: 2.4 / 1; }
  .cc-stats { gap: var(--space-2) var(--space-4); }
  .course-hero { padding: var(--space-4); gap: var(--space-4); }
  .hero-title { font-size: var(--fs-h2); }
  .lesson-row { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); padding-inline: 0; }
  .lr-num { width: 36px; height: 36px; font-size: .9rem; }
  .lr-actions { grid-column: 2; justify-content: flex-start; }
  .pl-wave { order: -1; flex-basis: 100%; height: 40px; }
}
@media (max-width: 700px) {
  .pl-face { display: none; }
}