/* Students as cards (owner: agent B, console/js/attention.js).
 * Built on the design foundation in console.css: use its tokens
 * (--surface-*, --shadow-*, --radius-*, --space-*, --dur*, --brand-*) and
 * never define a palette here.
 *
 * The Who-needs-help tab, top to bottom:
 *   .att-hero      the sentence ("3 of 24 students need you") and four figures
 *   .inbox-card    corrections LORE wrote for her students (corrections.js
 *                  draws it; it is restyled here only where it sits on this tab)
 *   .att-list      the student cards (.sc) in a grid that stacks on a phone
 *   .att-lessons   "Where the class is losing it" as a bar per lesson (.lb)
 *
 * COLOUR IS NEVER THE ONLY SIGNAL. Every chip has an icon; every lesson block
 * in the progress strip has its own pattern as well as its colour (solid =
 * done, stripes = struggling, half = in progress, dashed outline = not
 * started); a bar below the pass mark is striped, not just red. */

/* --- the answer ------------------------------------------------------------ */

/* Flat, like every other card (2026-10-11): the sentence is what makes this
   the first thing read, not a glow in its corner. */
.att-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--surface-1);
}
.att-hero .card-head { margin-bottom: var(--space-2); }
.att-hero h2.t-eyebrow { margin: 0; }
.att-headline {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-display); line-height: 1.12; font-weight: var(--fw-bold);
  letter-spacing: -.025em; color: var(--text);
  text-wrap: balance;
}
.att-count {
  display: inline-block; min-width: 1ch;
  color: var(--brand-ink);
  font-size: 1.35em; line-height: 1; margin-right: .08em;
  font-variant-numeric: tabular-nums;
}
.att-calm { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-h1); }
.att-calm-icon { display: inline-flex; color: var(--ok); }
.att-worst {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: 0 0 var(--space-5); color: var(--text-dim); font-size: var(--fs-body);
}
.att-worst .icon { color: var(--danger); margin-top: .2em; }
/* Four figures as ONE ruled readout, not four boxes inside a box: the tiles
   lose their own frames and a 1px ring on each draws the rules between them
   (the ring fills the 1px gap, so it holds at four across and at two by two). */
.att-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
             border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.att-stats .stat { min-width: 0; border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--border); background: var(--surface-1); }
.att-stats .stat.attention { background: var(--warn-soft); }
.att-hero .skel-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.att-scope { margin: var(--space-4) 0 0; }

/* --- the people ------------------------------------------------------------- */

.att-list .card-head { margin-bottom: var(--space-4); }
.sc-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

.sc {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3) calc(var(--space-4) + 2px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease);
}
/* The rule down the left edge carries the loudest reason's tone. */
.sc::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--border-strong);
}
.sc-tone-danger::before { background: var(--danger); }
.sc-tone-warn::before { background: var(--warn); }
.sc-tone-info::before { background: var(--info); }
.sc-tone-ok::before { background: var(--ok); }
.sc:hover { border-color: var(--border-strong); }   /* the edge answers the pointer; the card does not lift */
.sc:focus-within { border-color: var(--focus); }

.sc-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sc-who { flex: 1 1 auto; min-width: 0; }
.sc-name { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.25; }

/* The name is the card's link. Its ::after covers the whole card, so a tap
 * anywhere opens the student; the buttons below sit above it (z-index). */
.sc-open {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  overflow-wrap: anywhere;
}
.sc-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.sc-open:hover span { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Focus shows twice (2026-09-24): a ring round the name, and the whole card
   ringed, since the name opens the card. The old ring was drawn on ::after
   only and did not show (QA focus-sc-open.png). */
.sc-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sc:has(.sc-open:focus-visible) { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus), var(--shadow-md); }
.sc-email { font-size: var(--fs-caption); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sc-score { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.sc-score-value { font-size: 1.5rem; font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--text); }
.sc-score-none { align-self: center; }

.sc-chips { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.sc-chips .chip { white-space: normal; text-align: left; }
.sc-fix { margin: 0; font-size: var(--fs-small); color: var(--text-dim); line-height: 1.45; }

/* Progress strip: one block per lesson. */
.sc-progress { display: flex; flex-direction: column; gap: 6px; }
.sc-progress-head { display: flex; justify-content: space-between; gap: var(--space-2); }
.sc-strip { display: flex; gap: 3px; }
.sc-strip .seg { flex: 1 1 0; min-width: 4px; height: 12px; }
.seg {
  display: inline-block; width: 14px; height: 10px; border-radius: 3px;
  box-sizing: border-box; border: 1px solid transparent;
}
.seg-done { background: var(--ok); }
.seg-struggling {
  border-color: var(--danger);
  background: repeating-linear-gradient(135deg, var(--danger) 0 2.5px, var(--danger-soft) 2.5px 5px);
}
.seg-started {
  border-color: var(--brand-fill);
  background: linear-gradient(90deg, var(--brand-fill) 50%, transparent 50%);
}
.seg-not_started { border: 1px dashed var(--border-strong); background: transparent; }

.sc-meter { height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.sc-meter-fill { display: block; height: 100%; background: var(--brand-fill); border-radius: inherit; }

.sc-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
             font-size: var(--fs-caption); color: var(--text-dim); margin-right: var(--space-2); }
.sc-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.sc-stuck {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  background: var(--surface-2); font-size: var(--fs-small); line-height: 1.4;
}
.sc-stuck .icon { color: var(--text-dim); margin-top: 1px; }
.sc-stuck strong { font-weight: var(--fw-semibold); }

.sc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.sc-when { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-dim); }
.sc-actions { display: flex; gap: var(--space-1); position: relative; z-index: 1; }
.sc-actions .btn { min-height: 32px; }
/* The chips and the strip's hover titles need to be reachable by the pointer
 * too, above the stretched link. */
.sc-chips, .sc-strip { position: relative; z-index: 1; }

/* --- new corrections, on this tab ------------------------------------------ */

.stack > .inbox-card {
  border-radius: var(--radius-lg);
  border-color: color-mix(in srgb, var(--info) 30%, var(--border));
  background: var(--surface-1);
}
.stack > .inbox-card .card-head h3 { display: flex; align-items: center; gap: var(--space-2); }
.stack > .inbox-card .card-head h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--info);
}
.stack > .inbox-card .card-head > .muted {
  padding: .14rem .6rem; border-radius: var(--radius-pill);
  background: var(--info-soft); color: var(--info); font-weight: var(--fw-semibold); font-size: var(--fs-caption);
}
.stack > .inbox-card .corrections {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4);
}
.stack > .inbox-card .correction {
  border-radius: var(--radius-lg); border-left-width: 1px; background: var(--surface-1);
  padding: var(--space-4); box-shadow: var(--shadow-sm); position: relative;
}
.stack > .inbox-card .correction::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--info);
}
.stack > .inbox-card .correction-who { font-size: var(--fs-h3); }
.stack > .inbox-card .correction-body {
  max-height: 9.5em; overflow: auto; padding: var(--space-2) var(--space-3);
  background: var(--surface-2); border-radius: var(--radius); font-size: var(--fs-small);
}
.stack > .inbox-card .corrections > li:not(.correction) { grid-column: 1 / -1; }

/* --- where the class is losing it ------------------------------------------ */

.att-lessons { border-radius: var(--radius-lg); }
.lb-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.lb-key-line { display: inline-block; width: 0; height: 14px; border-left: 2px dashed var(--text); }
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lb {
  display: grid; grid-template-columns: minmax(14rem, 32%) minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-2) var(--space-4);
}
.lb-label { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.lb-seq {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--surface-2); color: var(--text-dim); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
.lb-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.lb-track {
  position: relative; height: 14px; border-radius: var(--radius-pill);
  background: var(--surface-3);
}
.lb-fill {
  display: block; height: 100%; border-radius: inherit; background: var(--brand-fill);
  transition: width var(--dur-slow) var(--ease-out);
}
.lb-fill.lb-low {
  background: repeating-linear-gradient(135deg, var(--danger) 0 4px, color-mix(in srgb, var(--danger) 55%, var(--surface-1)) 4px 8px);
}
/* The pass mark, drawn across the bar as a dashed rule. */
.lb-line {
  position: absolute; top: -4px; bottom: -4px; width: 0;
  border-left: 2px dashed var(--text); transform: translateX(-1px); opacity: .7;
}
/* Wraps rather than clips: a row can carry "1 below" AND "1 put right", and a
   fixed 13rem pushed the average itself out of the box (2026-09-23). */
.lb-figs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); justify-content: flex-end;
           width: 13rem; }
.lb-figs .chip { flex: 0 0 auto; }
/* Every track is the same length, so the bars compare across rows. */
.lb-avg { font-size: var(--fs-h3); min-width: 2.8rem; text-align: right; }

/* --- phone ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .att-stats, .att-hero .skel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Every column of a lesson row can shrink: the label spans the row, then
     the bar and the figures share one line, the figures wrapping inside
     their own box. "Where the class is losing it" ran to 473px in a 390px
     phone in Easy reading, whose own rule (console.css) asked for an 18rem
     label column and won on specificity (2026-09-24). */
  .att-lessons, .lb-list, .lb, .lb > * { min-width: 0; max-width: 100%; }
  .att-lessons .card-head { flex-wrap: wrap; }
  .lb-title { white-space: normal; overflow-wrap: anywhere; }
  .att-hero { padding: var(--space-5) var(--space-4) var(--space-4); }
  .att-headline { font-size: 1.6rem; }
  .att-stats .stat { padding: var(--space-3); }
  .att-stats .stat-value { font-size: 1.4rem; }
  .sc-grid, .stack > .inbox-card .corrections { grid-template-columns: minmax(0, 1fr); }
  .sc-legend { display: none; }
  .lb, [data-theme="reading"] .lb { grid-template-columns: minmax(0, 1fr) auto; }
  .lb-label { grid-column: 1 / -1; }
  .lb-figs { width: auto; max-width: 9.5rem; }
  .lb-took { display: none; }   /* still in each row's screen-reader sentence */
}
@media (prefers-reduced-motion: reduce) {
  .sc, .sc:hover { transition: none; transform: none; }
}

/* "Export for an LMS (SCORM 1.2)" (scorm.js): the dialog's size line, what the package leaves out, a refusal. */
.scorm-dialog fieldset.choice { margin: 0; }
.scorm-dialog .choice-opt .small { display: block; }
.scorm-preview { min-height: 2.5rem; }
.scorm-preview p { margin: 0; }
.scorm-notes { margin: .4rem 0 0; padding-left: 1.2rem; }
.scorm-refusal { margin: 0; color: var(--danger); font-weight: var(--fw-semibold); }
.scorm-dialog .scorm-host-hint, .scorm-dialog .scorm-as-written { margin: 0; }
/* The host-scored choice, under "Advanced" (QA F16). */
.scorm-advanced { margin: 0; }
.scorm-advanced > summary { cursor: pointer; font-weight: var(--fw-semibold); }
.scorm-advanced > p { margin: .4rem 0; }
.scorm-advanced .choice-opt { margin-top: .3rem; }
/* After a host-scored download: the answer key, offered beside the package. */
.scorm-key { padding: .6rem .8rem; border-left: 4px solid var(--accent); background: var(--surface-2); }
.scorm-key p { margin: 0 0 .5rem; }