/*
 * hub.css — surfaces the page structure needs that the component register did not
 * yet cover. Design-language amendment (2026-09-28): every rule here reuses the
 * tokens in tokens.css. No new colour, no new spacing step, no new control height.
 * Frame sizing was deliberately left to Phase 4.2 by components.css (see its header).
 */

/* ---- Masthead ---- */
.page-title {
  margin-block: 0;
  font-size: var(--font-heading-l);
  line-height: var(--font-heading-l-line);
}

.role-list {
  margin-block: var(--space-1) 0;
  font-size: var(--font-meta);
  line-height: var(--font-meta-line);
  color: var(--color-text-secondary);
}

/* ---- Sections: one rhythm for the page, independent of item count (D-014) ---- */
.work-section {
  margin-block: var(--space-6);
}

.section-note {
  max-inline-size: var(--prose-max-width);
  color: var(--color-text-secondary);
}

/* ---- Filtering: a chip is a toggle, and the state is written in ink, not colour ---- */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-4);
}

.chip--filter {
  cursor: pointer;
  min-block-size: var(--control-min-height);
  padding-inline: var(--space-3);
  border: var(--border-width-ui) solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.chip--filter:hover {
  background: var(--color-surface);
}

/* Off state stays readable and is labelled by text, so meaning survives colour loss (1.4.1). */
.chip--filter[aria-pressed="false"] {
  border-style: dashed;
  color: var(--color-text-secondary);
}

/* ---- Launch surfaces (Phase 4.2 owns these numbers) ---- */
.launch {
  margin-block: var(--space-3);
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3);
}

.embed-frame {
  inline-size: 100%;
  /* The height is put on the element by hub.js and updated on resize (D-028): the
     embedded games' menus are fixed-px tall, and a CSS aspect/floor (16/9 with a
     22rem floor, measured box 284x352) clipped their menu buttons (measured 2026-09-30).
     CSS owns width, boundary and fill only — the same split as .scorm-frame (D-024). */
  border: var(--border-width-ui) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

/* The course sizes itself: scorm-launch.js puts a measured height on the element and
   updates it on resize, so CSS owns the width, the boundary and the fill only. */
.scorm-frame {
  inline-size: 100%;
  border: var(--border-width-ui) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

/* ---- Playable-width degradation (D-031) ----
 * The 360 px playable floor (D-030 + operator) cannot hold in a single track
 * below ~448 px viewport; instead of showing a clipped, unplayable frame, the
 * card declares its own inline width as a container and at/below 360 px of card
 * the inline play affordances are replaced by the honest escape hatch that is
 * already on screen ("Open without the player" / "Open in a new tab"). The frame
 * itself stays mounted (open progress survives a rotation/resize); only its
 * presentation is hidden. Container queries cannot style the container element
 * itself (MDN) — every rule below targets a descendant, which is why the
 * affordances are wrapped in .launch. Support: widely available since 2023. */
.card {
  container: card / inline-size;
}

.launch__narrow {
  display: none;
}

@container card (max-width: 22.4375rem) {
  .launch__play,
  .launch .embed-frame,
  .launch .scorm-frame,
  .launch .control-row,
  .launch .status,
  .launch .notice--error,
  .launch .notice--warning,
  .launch .skeleton {
    display: none;
  }

  .launch__narrow {
    display: block;
  }
}

/* ---- Learner note ---- */
.note-field {
  margin-block: var(--space-4);
}

.note-field label {
  display: block;
  margin-block-end: var(--space-2);
}

.note-field textarea {
  inline-size: 100%;
  max-inline-size: var(--prose-max-width);
  padding: var(--space-2);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width-ui) solid var(--color-border);
  border-radius: var(--radius-control);
}

/* Card sub-blocks share one spacing step so cards of different lengths still align. */
.card__body h4 {
  margin-block: var(--space-3) var(--space-1);
  font-size: var(--font-heading-s);
  line-height: var(--font-heading-s-line);
}

.card__body > :first-child {
  margin-block-start: 0;
}