/* Handbook training screens (src/training.js), on the M3 theme (docs/theme.md).
   Tokens only, no hex. Brass (primary) is for the main action and focus; steel
   (success / tertiary) means done or signed off. The screens sit inside the
   Handbook overlay, whose header and print rules still come from styles.css. */

.lms { gap: var(--m3-space-3); }
.lms-group { gap: var(--m3-space-2); margin-top: var(--m3-space-2); }
.lms-phase { gap: var(--m3-space-2); margin-top: var(--m3-space-4); }
.lms .m3-overline { margin: 0; }

/* List rows: name, meta, progress. */
.lms-row { gap: var(--m3-space-2); color: inherit; text-decoration: none; }
.lms-progress-lg { height: 10px; }

/* Status banners. */
.lms-banner {
  padding: var(--m3-space-3) var(--m3-space-4); border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-medium);
}
.lms-banner--next { box-shadow: inset 3px 0 0 var(--md-sys-color-primary); }
.lms-banner--ok   { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.lms-banner--warn { box-shadow: inset 3px 0 0 var(--md-sys-color-warning); }

/* Forms. */
.lms-assign, .lms-link { align-items: flex-start; }
.lms-assign .m3-field, .lms-link .m3-field { width: 100%; max-width: 420px; }
.lms-assign h3 { margin: 0; font: var(--md-sys-typescale-title-medium); }

/* One step. */
.lms-step {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--m3-space-2);
  padding: var(--m3-space-3) var(--m3-space-4);
  background: var(--md-sys-color-card); border-radius: var(--md-sys-shape-corner-large);
}
.lms-step.done { background: var(--md-sys-color-surface-container-low); }
.lms-k-gate, .lms-k-owner { box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.lms-tick {
  width: 22px; height: 22px; border-radius: var(--md-sys-shape-corner-full);
  box-shadow: inset 0 0 0 2px var(--md-sys-color-outline-variant);
  display: grid; place-items: center; font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-tertiary-container);
}
.lms-step.done .lms-tick { background: var(--md-sys-color-tertiary-container); box-shadow: none; }
.lms-main { min-width: 0; display: flex; flex-direction: column; gap: var(--m3-space-1); }
.lms-label { font: var(--md-sys-typescale-title-small); display: flex; gap: var(--m3-space-2); flex-wrap: wrap; align-items: baseline; }
.lms-label a { color: var(--md-sys-color-primary); }
.lms-label .m3-muted { font: var(--md-sys-typescale-body-small); }
.lms-meta { color: var(--md-sys-color-on-surface-variant); }
.lms-meta a { color: var(--md-sys-color-primary); }
.lms-actions { display: flex; gap: var(--m3-space-2); flex-wrap: wrap; align-items: center; margin-top: var(--m3-space-1); }
.lms-note { flex: 1 1 180px; width: auto; }

/* Checklist columns (one-row checks) and the skills table cells. */
.lms-chip, .lms-cell {
  border: 0; font: var(--md-sys-typescale-label-medium); cursor: pointer;
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.lms-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; min-height: 40px; }
.lms-cell { width: 100%; min-height: var(--m3-control-height); }
.lms-chip.on, .lms-cell.on {
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); box-shadow: none;
}
.lms-chip:disabled, .lms-cell:disabled { cursor: default; opacity: .5; }
.lms-chip.on:disabled, .lms-cell.on:disabled { opacity: 1; }
.lms-chip:focus-visible, .lms-cell:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.lms-chip-w { font-weight: 600; }

.lms-skills-wrap { overflow-x: auto; }
.lms-skills { width: 100%; border-collapse: collapse; font: var(--md-sys-typescale-body-small); }
.lms-skills th, .lms-skills td {
  border-bottom: 1px solid var(--md-sys-color-outline-variant); padding: var(--m3-space-2);
  text-align: left; vertical-align: top;
}
.lms-skills th { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); }
.lms-skills td:not(:first-child) { width: 18%; min-width: 74px; padding: 4px; }

/* Progress sheet. */
.lms-ptable { width: 100%; border-collapse: collapse; font: var(--md-sys-typescale-body-small); }
.lms-ptable th, .lms-ptable td {
  border: 1px solid var(--md-sys-color-outline-variant); padding: 5px 8px; text-align: left; vertical-align: top;
}
.lms-pl { width: 55%; }
.lms-pinfo { border-collapse: collapse; font: var(--md-sys-typescale-body-small); }
.lms-pinfo td { padding: 3px 12px 3px 0; }
.lms-pinfo td:nth-child(odd) { color: var(--md-sys-color-on-surface-variant); }
.lms-blank { display: inline-block; min-width: 70px; border-bottom: 1px solid currentColor; height: 1em; vertical-align: bottom; }
.lms-psec h2 { font: var(--md-sys-typescale-title-small); margin: var(--m3-space-4) 0 var(--m3-space-2); }

/* Paper: black on white whatever the screen theme. */
@media print {
  .lms-print { color: #000; font-size: 10.5pt; }
  .lms-print .m3-muted, .lms-pinfo td:nth-child(odd) { color: #444; }
  .lms-ptable th, .lms-ptable td { border-color: #777; color: #000; padding: 3px 6px; }
  .lms-ptable tr { break-inside: avoid; }
  .lms-psec h2 { break-after: avoid; color: #000; }
}