/* css/analytics.css — Learning Analytics (the owner, 14 Oct 2026 — plan Phase D, decision 118 and the visual reference). Scoped
   to the feature's own prefix (la-); only the app's existing colours: the tokens in styles.css, plus the blue and lavender
   tones already used by Training Plans, declared on the page's root. No global selectors. The table's columns give way by
   the room the table actually has (container queries), never by guessing from the window; the list turns into cards when
   it is narrow. Missing information (No data, Not assessed, Insufficient evidence…) has its own neutral look — never red,
   never a 0. */

.view.view-wide.la-view { max-width: 1680px; }
/* the Dashboard's "Needs attention · N learners" card (M5 — decisions 101, 109): the four kinds, in learners */
.sd-la-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sd-la-kinds a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid #c9d3e0;
  border-radius: 10px; text-decoration: none; color: #14254a; background: #fff; }
.sd-la-kinds a:hover { background: #f6faf9; border-color: #9fd8c9; }
.sd-la-kinds a:focus-visible { outline: 3px solid #0a6e63; outline-offset: 2px; }
.sd-la-kinds a[data-k="learning_support"] { border-left-color: #b25d0c; }
.sd-la-kinds a[data-k="waiting_on_staff"] { border-left-color: #3646a3; }
.sd-la-kinds a[data-k="access"] { border-left-color: #c0354a; }
.sd-la-kinds a[data-k="content_problem"] { border-left-color: #5b21b6; }
.sd-la-n { font-size: 20px; font-weight: 800; min-width: 26px; font-variant-numeric: tabular-nums; }
.sd-la-k { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sd-la-foot { margin: 10px 0 0; font-size: 13px; color: #5d6b84; }
@media (max-width: 420px) { .sd-la-kinds { grid-template-columns: minmax(0, 1fr); } }
/* skill tagging (M6 — js/la-tools.js): Set skill for the selected, a skill for each rubric criterion, Skills coverage, and
   Settings → Learning Analytics */
.skt-bulkhost { margin: 0 0 10px; }
.skt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid #9fd8c9; border-radius: 10px; background: #f3fbf8; }
.skt-bar select, .skt-crit select, .skt-rules input { padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; background: var(--surface); max-width: 100%; }
.skt-bar .skt-pick { font-size: 13px; font-weight: 600; }
.skt-n { font-size: 14px; }
.skt-note { flex: 1 1 220px; }
.skt-result { margin: 8px 0 0; font-size: 13.5px; }
.skt-left { margin: 4px 0 0; padding-left: 18px; }
.skt-ch { font-weight: 600; display: block; margin-bottom: 4px; }
.skt-crits { border-top: 1px solid var(--border); }
.skt-crit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 210px); gap: 4px 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.skt-crit label { min-width: 0; margin: 0; }
.skt-cl { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.skt-cs { display: block; font-size: 12px; color: var(--muted, #5d6b84); overflow-wrap: anywhere; }
.skt-crit-sm { padding: 4px 0; }
.skt-crit-sm:last-child { border-bottom: 0; }
.skt-saved { margin: 6px 0 0; min-height: 1em; }
.skt-sum { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin: 0 0 12px; }
.skt-only { display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13.5px; cursor: pointer; }
.skt-only input { width: auto; margin: 0; }
.skt-group { margin: 0 0 14px; }
.skt-as + .skt-as { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.skt-as h4 { margin: 0 0 2px; font-size: 15px; }
.skt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.skt-table th { text-align: left; font-size: 12px; color: #5d6b84; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.skt-table td { padding: 8px; vertical-align: top; border-bottom: 1px solid var(--border); }
.skt-table td:first-child, .skt-table th:first-child { width: 28px; }
.skt-table input[type=checkbox] { width: auto; margin: 3px 0 0; }
.skt-none { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #f1f4f8; color: #5d6b84; font-size: 12.5px; }
.lib-c-sel { width: 34px; }
.lib-c-sel input { width: auto; margin: 0; }
.skt-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.skt-rules .field input { width: 120px; }
.skt-hist { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.skt-hist li { padding: 7px 0; border-top: 1px solid var(--border); }
/* the editor's side panel is narrow: each criterion above its picker */
.skt-field .skt-crit { grid-template-columns: minmax(0, 1fr); }
.skt-field .skt-crit select { width: 100%; }
@media (max-width: 640px) {
  .skt-rules { grid-template-columns: minmax(0, 1fr); }
  .skt-crit { grid-template-columns: minmax(0, 1fr); }
  .skt-crit select { width: 100%; }
}
/* the coverage table on a phone: each question a card, its cells saying what they are */
@media (max-width: 720px) {
  .skt-table thead { display: none; }
  .skt-table, .skt-table tbody, .skt-table tr, .skt-table td { display: block; width: auto; }
  .skt-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .skt-table td { border: 0; padding: 3px 0; }
  .skt-table td:first-child { float: left; width: auto; margin: 2px 10px 0 0; }
  .skt-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: #5d6b84; margin-top: 4px; }
  .skt-table td:last-child { padding-top: 6px; }
}
.la-page {
  --la-teal: var(--rail); --la-mint: var(--brand-soft);
  --la-ls: #b25d0c; --la-ls-bg: var(--warning-soft); --la-ws: #3646a3; --la-ws-bg: #eef2ff;
  --la-ac: #c0354a; --la-ac-bg: var(--danger-soft); --la-cp: #5b21b6; --la-cp-bg: #ede9fe;
  --la-head: #f6f7fa; --la-line: var(--border);
  color: var(--text);
}
.la-page .la-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.la-page svg.la-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the head ---- */
.la-head { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.la-head h1 { margin: 0; font-size: 28px; letter-spacing: -.01em; }
.la-sub { margin: 4px 0 0; color: var(--muted); }
.la-head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.la-head-actions .btn { display: inline-flex; align-items: center; gap: 8px; }

/* ---- tabs ---- */
.la-tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; border-bottom: 1px solid var(--la-line); margin: 0 0 18px; }
.la-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 0 9px; margin-bottom: -1px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.la-tab:hover { color: var(--text); }
.la-tab[aria-selected="true"] { color: var(--la-teal); border-bottom-color: var(--la-teal); }
.la-tab:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 3px; border-radius: 4px; }

/* ---- headline cards ---- */
.la-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.la-card { background: var(--surface); border: 1px solid var(--la-line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.la-card.is-key { background: var(--la-mint); border-color: transparent; }
.la-card-label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #374151; margin: 0 0 6px; }
.la-card-num { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.25; }
.la-card-num b { font-size: 28px; font-weight: 700; color: var(--text); margin-right: 6px; letter-spacing: -.01em; }
.la-card-sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.la-card.is-loading .la-card-num b { color: var(--faint); }

/* ---- search, Filters, Remind later ---- */
.la-tools { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 8px; }
.la-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--muted); min-width: 0; }
.la-search:focus-within { border-color: var(--la-teal); box-shadow: 0 0 0 3px rgba(11, 111, 102, .12); }
.la-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; padding: 10px 0; color: var(--text); }
.la-tools > .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; }
.la-tools > .btn[aria-pressed="true"], .la-tools > .btn[aria-expanded="true"] { border-color: var(--la-teal); color: var(--la-teal); background: var(--la-mint); }
.la-count { font-variant-numeric: tabular-nums; }

/* the Filters panel (a row of fields; a sheet on phones) */
.la-filters { margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--la-line); border-radius: 12px; background: var(--surface); }
.la-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 14px; align-items: end; }
.la-f label, .la-f .la-f-label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.la-f select, .la-f input[type="date"] { width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 14px; background: var(--surface); min-width: 0; }
.la-f-dates { display: flex; gap: 6px; align-items: center; }
.la-f-dates input { flex: 1 1 0; }
.la-f-check { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 0; }
.la-f-check input { width: 16px; height: 16px; }
.la-filters-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--muted); }
.la-filters-foot p { margin: 0; flex: 1 1 260px; }

/* the scope line: what the figures cover; every active filter shown, each removable */
.la-scope { margin: 6px 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.la-scope b { color: var(--text); font-weight: 600; }
.la-scope .la-x { appearance: none; border: 0; background: var(--surface-2); color: var(--muted); border-radius: 10px; width: 18px; height: 18px; line-height: 16px; padding: 0; margin: 0 2px 0 3px; font-size: 12px; cursor: pointer; vertical-align: 1px; }
.la-scope .la-x:hover { background: var(--border-strong); color: var(--text); }
.la-linkbtn { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--la-teal); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.la-dot-sep { margin: 0 6px; }
.la-notice { margin: 0 0 12px; padding: 9px 14px; border-radius: 10px; background: #fff8e8; border: 1px solid #f2dcae; font-size: 13.5px; color: #6b4a12; }
.la-notice .la-linkbtn { margin-left: 6px; }

/* the four kinds as quick filters */
.la-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.la-pill { appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--la-line); background: var(--surface); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); }
.la-pill:hover { border-color: var(--border-strong); }
.la-pill .la-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.la-pill .la-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.la-pill[data-kind="learning_support"] { color: var(--la-ls); }
.la-pill[data-kind="waiting_on_staff"] { color: var(--la-ws); }
.la-pill[data-kind="access"] { color: var(--la-ac); }
.la-pill[data-kind="content_problem"] { color: var(--la-cp); }
.la-pill[aria-pressed="true"] { background: var(--la-teal); border-color: var(--la-teal); color: #fff; }
.la-pill:focus-visible, .la-tools > .btn:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 2px; }
.la-later-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; padding: 9px 14px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }

/* ---- the worksheet and the learner panel ---- */
.la-work { container: lawork / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.la-work.has-panel { grid-template-columns: minmax(0, 1fr) 14px var(--la-panel-w, 400px); }
.la-sep { display: none; align-self: stretch; cursor: col-resize; position: relative; outline: none; touch-action: none; }
.la-work.has-panel .la-sep { display: block; }
.la-sep::after { content: ""; position: absolute; left: 5px; top: 24px; bottom: 24px; width: 4px; border-radius: 2px; background: transparent; }
.la-sep:hover::after, .la-sep:focus-visible::after, .la-work.is-dragging .la-sep::after { background: var(--brand); }
.la-work.is-dragging { user-select: none; }
.la-work.is-narrow.has-panel { grid-template-columns: minmax(0, 1fr); }
.la-work.is-narrow.has-panel .la-list, .la-work.is-narrow.has-panel .la-sep { display: none; }

.la-list { background: var(--surface); border: 1px solid var(--la-line); border-radius: 14px; min-width: 0; container: latable / inline-size; overflow: hidden; }
.la-list-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--la-line); }
.la-list-head h2 { margin: 0; font-size: 16px; }
.la-list-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.la-list-tools select { padding: 7px 10px; border: 1px solid var(--la-line); border-radius: 8px; background: var(--surface-2); font: inherit; font-size: 13.5px; color: var(--text); }
.la-list-tools label { display: inline-flex; align-items: center; gap: 6px; }

.la-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.la-table th { position: sticky; top: 0; z-index: 1; background: var(--la-head); text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--la-line); white-space: nowrap; }
.la-table td { padding: 16px 14px; border-bottom: 1px solid var(--la-line); vertical-align: top; }
.la-table tr:last-child td { border-bottom: 0; }
.la-table tbody tr { cursor: pointer; }
.la-table tbody tr:hover td { background: #fafbfd; }
.la-table tbody tr.is-sel td { background: #eaf6f2; }
.la-table tbody tr.is-sel td:first-child { box-shadow: inset 4px 0 0 var(--la-teal); }
.la-compact .la-table td { padding-top: 9px; padding-bottom: 9px; }
.la-compact .la-route { display: inline; margin-left: 6px; }
.la-c-learner { width: 22%; } .la-c-needs { width: 28%; } .la-c-last { width: 13%; } .la-c-req { width: 15%; } .la-c-ready { width: 12%; } .la-c-coach { width: 10%; }
@container latable (max-width: 1080px) { .la-c-coach { display: none; } }
@container latable (max-width: 920px) { .la-c-ready { display: none; } }
@container latable (max-width: 780px) { .la-c-last { display: none; } }
.la-work.has-panel .la-c-coach, .la-work.has-panel .la-c-ready, .la-work.has-panel .la-c-last { display: none; }

.la-who { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.la-av { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--la-mint); color: var(--la-teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.la-name { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.la-name:hover { color: var(--la-teal); text-decoration: underline; text-underline-offset: 2px; }
.la-name:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 2px; border-radius: 3px; }
.la-route { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.la-flag { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); vertical-align: 1px; }

.la-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.la-tag { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1.35; padding: 3px 9px; border-radius: 6px; max-width: 100%; overflow-wrap: anywhere; }
.la-tag[data-kind="learning_support"] { background: var(--la-ls-bg); color: var(--la-ls); }
.la-tag[data-kind="waiting_on_staff"] { background: var(--la-ws-bg); color: var(--la-ws); }
.la-tag[data-kind="access"] { background: var(--la-ac-bg); color: var(--la-ac); }
.la-tag[data-kind="content_problem"] { background: var(--la-cp-bg); color: var(--la-cp); }
.la-tag.is-more { background: var(--surface-2); color: var(--muted); }
.la-tag small { font-weight: 500; opacity: .85; }
.la-cell-main { display: block; }
.la-cell-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.la-bar { display: block; width: 150px; max-width: 100%; height: 6px; border-radius: 3px; background: #eceff4; margin-top: 8px; overflow: hidden; }
.la-bar > i { display: block; height: 100%; background: var(--la-teal); border-radius: 3px; }
.la-num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* missing information: its own neutral look (never red, never 0) */
.la-na { color: var(--muted); font-style: italic; }
.la-na-chip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border-strong); }

.la-list-foot { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--la-line); font-size: 13px; color: var(--muted); }
.la-pager { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.la-pager select { padding: 4px 6px; border: 1px solid var(--la-line); border-radius: 6px; font: inherit; font-size: 13px; }
.la-empty { padding: 28px 18px; text-align: center; color: var(--muted); }
.la-empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.la-loading { padding: 28px 18px; color: var(--muted); }

/* the list as cards when it is narrow (phones, or a cramped window) */
.la-cardlist { display: none; list-style: none; margin: 0; padding: 0; }
@container latable (max-width: 540px) {
  .la-table { display: none; }
  .la-cardlist { display: block; }
}
.la-lc { border-bottom: 1px solid var(--la-line); }
.la-lc:last-child { border-bottom: 0; }
.la-lc > button { appearance: none; display: block; width: 100%; text-align: left; background: none; border: 0; padding: 14px 16px; font: inherit; color: inherit; cursor: pointer; }
.la-lc > button:hover { background: #fafbfd; }
.la-lc.is-sel > button { background: #eaf6f2; box-shadow: inset 4px 0 0 var(--la-teal); }
.la-lc .la-who { margin-bottom: 8px; }
.la-lc .la-tags { margin-bottom: 8px; }
.la-lc-line { font-size: 13.5px; color: var(--muted); }

/* ---- the learner panel ---- */
.la-panel { background: var(--surface); border: 1px solid var(--la-line); border-radius: 14px; min-width: 0; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; overscroll-behavior: contain; }
.la-work.is-narrow .la-panel { position: static; max-height: none; }
.la-p-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--la-line); }
.la-p-back { display: none; margin: 0 0 8px; }
.la-work.is-narrow .la-p-back { display: inline-flex; }
.la-p-top { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.la-p-top h2 { margin: 0; font-size: 21px; overflow-wrap: anywhere; }
.la-p-meta { margin: 2px 0 10px; font-size: 13.5px; color: var(--muted); }
.la-p-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.la-chip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: var(--surface-2); color: #4b5563; }
.la-p-body { padding: 14px 18px 18px; }
.la-p-lead { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
.la-p-calc { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

.la-item { border: 1px solid var(--la-line); border-radius: 12px; margin: 0 0 12px; overflow: hidden; }
.la-item-head { background: #f3f5fa; padding: 10px 14px; }
.la-item-head h3 { margin: 6px 0 0; font-size: 15.5px; overflow-wrap: anywhere; }
.la-item-head .la-tag { font-size: 12.5px; }
.la-item-body { padding: 12px 14px; font-size: 13.5px; }
.la-item-body p { margin: 0 0 8px; }
.la-why { margin: 0 0 6px; }
.la-ev-h { display: inline-block; margin: 0 6px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
p.la-ev-h { display: block; margin: 8px 0 2px; }
.la-ev { list-style: none; margin: 0 0 8px; padding: 0; }
.la-ev li { display: flex; gap: 10px; justify-content: space-between; padding: 3px 0; }
.la-ev li span:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.la-ev-note { font-size: 12.5px; color: var(--muted); }
.la-owner { font-size: 13px; color: #374151; }
.la-owner b { font-weight: 600; }
.la-back-note { font-size: 12.5px; color: var(--la-ws); background: var(--la-ws-bg); border-radius: 6px; padding: 4px 8px; display: inline-block; }
.la-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.la-go { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: var(--la-teal); color: #fff; font-weight: 600; font-size: 13.5px; border: 1px solid var(--la-teal); }
.la-go:hover { background: #095b54; }
.la-go:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 2px; }
.la-actions .btn { font-size: 13.5px; padding: 7px 13px; }
.la-remind { appearance: none; display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: #4b5563; cursor: pointer; }
.la-remind:hover { background: var(--surface-2); }
.la-remind[aria-expanded="true"] { border-color: var(--la-teal); color: var(--la-teal); }
.la-remind:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 2px; }
.la-rform { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #f6f7fa; }
.la-rform .la-f { margin-bottom: 10px; }
.la-rform p { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.la-rform .la-err { color: var(--danger); font-size: 13px; margin: 0 0 8px; min-height: 0; }
.la-rform .la-err:empty { display: none; }
.la-rform-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.la-rform-btns .la-go { cursor: pointer; }
.la-rform-btns .la-go:disabled { opacity: .6; cursor: progress; }

/* postponed items, in the panel */
.la-later { margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.la-later h3 { margin: 0 0 6px; font-size: 14px; }
.la-later-item { padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.la-later-item:first-of-type { border-top: 0; }
.la-later-item .la-actions { margin-top: 6px; }
.la-quote { display: block; margin-top: 4px; padding: 4px 8px; border-left: 3px solid var(--border-strong); color: #4b5563; font-size: 13px; overflow-wrap: anywhere; }

/* the expandable sections */
.la-sec { border-top: 1px solid var(--la-line); }
.la-sec:last-of-type { border-bottom: 1px solid var(--la-line); }
.la-sec > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 2px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.la-sec > summary::-webkit-details-marker { display: none; }
.la-sec > summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--muted); line-height: 1; }
.la-sec[open] > summary::after { content: "−"; }
.la-sec > summary:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 2px; border-radius: 4px; }
.la-sec-body { padding: 0 2px 14px; font-size: 13.5px; }
.la-sec-body h4 { margin: 10px 0 4px; font-size: 13px; color: #374151; }
.la-sec-body ul { margin: 0; padding-left: 18px; }
.la-sec-body li { margin: 3px 0; }
.la-kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 3px 12px; margin: 0 0 6px; }
.la-kv dt { color: var(--muted); }
.la-kv dd { margin: 0; overflow-wrap: anywhere; }
.la-res { margin: 0 0 10px; }
.la-res-title { font-weight: 600; }
.la-res ol { margin: 4px 0 0; padding-left: 20px; }
.la-skill { padding: 8px 0; border-top: 1px dashed var(--border); }
.la-skill:first-of-type { border-top: 0; }
.la-skill-name { font-weight: 600; }
.la-measure { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; margin-top: 3px; }
.la-measure > span:first-child { color: var(--muted); min-width: 138px; }
.la-lab { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 6px; }
.la-lab[data-l="strength"] { background: var(--success-soft); color: #0b7a57; }
.la-lab[data-l="developing"] { background: #eef2ff; color: #3646a3; }
.la-lab[data-l="needs_practice"] { background: var(--la-ls-bg); color: var(--la-ls); }
.la-legend { font-size: 12.5px; color: var(--muted); margin: 6px 0 8px; }
.la-legend .la-lab { margin-right: 4px; }
.la-help { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }

/* ---- the page footer ---- */
.la-foot { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 4px; font-size: 13px; color: var(--muted); }
.la-foot .la-linkbtn { font-size: 13px; }

/* a tab still to come (M4) */
.la-soon { padding: 22px 20px; background: var(--surface); border: 1px solid var(--la-line); border-radius: 14px; }
.la-soon h2 { margin: 0 0 4px; font-size: 18px; }
.la-soon p { margin: 0; color: var(--muted); }

/* ---- narrower screens ---- */
@media (max-width: 1100px) { .la-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .la-head h1 { font-size: 24px; }
  .la-head-actions { width: 100%; }
  .la-tabs { gap: 2px 18px; }
  .la-cards { gap: 10px; }
  .la-card { padding: 12px 14px; }
  .la-card-num b { font-size: 24px; }
  .la-tools > .btn { flex: 1 1 0; justify-content: center; }
  .la-search { flex-basis: 100%; }
  .la-pill { font-size: 13px; padding: 6px 11px; }
  .la-panel { border-radius: 12px; }
  .la-p-head, .la-p-body { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 350px) { .la-cards { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .la-page * { transition: none !important; } }

/* =====================================================================================================================
   The learner performance dashboard (the owner's refinement of 14 Oct 2026 — decision 121; js/la-dash.js) and the parts
   the reports share with it (the More reports menu, the way back to the dashboard)
   ===================================================================================================================== */
.la-page {
  --la-np: #b9531a; --la-np-bg: #fdf0e6; --la-dv: #3b5bc0; --la-dv-bg: #edf1fd; --la-sg: var(--rail); --la-sg-bg: #e3f4ef;
}
.la-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--la-teal); margin: 0 0 6px; }
.la-back:hover { text-decoration: underline; text-underline-offset: 2px; }

/* More reports */
.la-menu { position: relative; }
.la-menu > .btn { display: inline-flex; align-items: center; gap: 8px; }
.la-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; max-width: calc(100vw - 32px); padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 28, 50, .14); }
.la-menu-list a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text); }
.la-menu-list a b { display: block; font-size: 14px; }
.la-menu-list a span { display: block; font-size: 12.5px; color: var(--muted); }
.la-menu-list a:hover, .la-menu-list a:focus-visible { background: var(--la-mint); outline: none; }
.la-menu-list a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--la-teal); }

/* the learner and the reporting period */
.la-dash .la-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; min-width: 0; }
.la-pick { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; margin: 0 0 16px; }
.la-pick-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.la-av-lg { width: 46px; height: 46px; border-radius: 13px; font-size: 15px; align-self: flex-end; }
.la-combo { position: relative; flex: 0 1 380px; min-width: 220px; }
.la-combo-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.la-combo-box { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); }
.la-combo-box:focus-within { border-color: var(--la-teal); box-shadow: 0 0 0 3px rgba(11, 111, 102, .12); }
.la-combo-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; padding: 10px 12px; color: var(--text); text-overflow: ellipsis; }
.la-combo-btn { appearance: none; border: 0; background: none; padding: 0 12px; color: var(--muted); cursor: pointer; align-self: stretch; display: flex; align-items: center; }
.la-combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 320px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 28, 50, .14); }
.la-combo-list li { padding: 8px 10px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
.la-combo-list li b { display: inline; font-size: 14px; }
.la-combo-list li > span:last-child { display: block; font-size: 12.5px; color: var(--muted); }
.la-combo-list li.is-active, .la-combo-list li:hover { background: var(--la-mint); }
.la-combo-list li[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--la-teal); }
.la-combo-list .la-combo-empty, .la-combo-list .la-combo-more { cursor: default; color: var(--muted); font-size: 13px; background: none !important; box-shadow: none !important; }
.la-pick-filters { display: inline-flex; align-items: center; gap: 6px; align-self: flex-end; margin-bottom: 4px; }
.la-window { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-self: center; font-size: 14px; }
.la-window b { font-weight: 600; }
.la-window span { color: var(--muted); font-size: 13.5px; }
.la-pick-meta { margin: 8px 0 0 60px; font-size: 13.5px; color: var(--muted); }
.la-pick-meta:empty { display: none; }
.la-pick-meta a { color: var(--la-teal); font-weight: 600; }
.la-pick .la-filters { margin: 12px 0 0; }
.la-pick .la-scope { margin: 10px 0 0; }

/* the three summary counts */
.la-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 6px; }
.la-sum-card { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.la-sum-card.is-np { background: var(--la-np-bg); border-color: transparent; }
.la-sum-card.is-st { background: var(--la-sg-bg); border-color: transparent; }
.la-sum-card > b { font-size: 30px; font-weight: 700; line-height: 1; min-width: 26px; font-variant-numeric: tabular-nums; }
.la-sum-title { margin: 0; font-weight: 600; font-size: 14.5px; }
.la-sum-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.la-sum-note { margin: 0 0 16px; font-size: 13px; color: var(--muted); }

/* Which areas need practice? */
.la-skills { margin: 0 0 16px; }
.la-card-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin: 0 0 14px; }
.la-card-head h2, .la-dash .la-card h2 { margin: 0; font-size: 19px; }
.la-card-head p, .la-card-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.la-official { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--la-teal); }
.la-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 34px; }
.la-chart { min-width: 0; }
.la-chart + .la-chart { border-left: 1px solid var(--border); padding-left: 34px; }
.la-chart-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.la-chart-head h3 { margin: 0; font-size: 15.5px; }
.la-chart-head span { font-size: 13px; color: var(--muted); }
.la-chart-sub { margin: 2px 0 10px; font-size: 13px; color: var(--muted); }
.la-axis { position: relative; height: 18px; margin: 0 10px 2px; font-size: 12px; color: var(--muted); }
.la-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.la-axis span:first-child { transform: none; }
.la-axis span:last-child { transform: translateX(-100%); }
.la-sbars { list-style: none; margin: 0; padding: 0; }
.la-sbar { appearance: none; display: flex; flex-direction: column; gap: 7px; width: 100%; min-height: 112px; padding: 12px 10px; margin: 0 0 4px; border: 1px solid transparent; border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.la-sbar:hover { background: #f6f8fb; }
.la-sbar.is-sel { background: var(--la-mint); border-color: rgba(11, 111, 102, .25); }
.la-sbar:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 1px; }
.la-sbar.is-static { cursor: default; }
.la-sbar-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.la-sbar-name { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.la-sbar-pct { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.la-track { position: relative; display: block; height: 10px; border-radius: 5px; background: #eceff4; }
.la-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.la-fill[data-l="needs_practice"] { background: var(--la-np); }
.la-fill[data-l="developing"] { background: var(--la-dv); }
.la-fill[data-l="strength"] { background: var(--la-sg); }
.la-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #cfd5df; border-radius: 1px; }
.la-sbar-bot { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.la-sbar-meta { font-size: 13px; color: var(--muted); }
.la-sbar-view { font-size: 13px; color: var(--la-teal); font-weight: 600; }
.la-sbar.is-unused .la-sbar-meta { font-style: italic; }
.la-dash-mark { color: var(--faint); }
.la-up { color: var(--la-teal); font-weight: 600; white-space: nowrap; }
.la-dash .la-lab { font-size: 12.5px; padding: 2px 9px; }
.la-dash .la-lab[data-l="needs_practice"] { background: var(--la-np-bg); color: var(--la-np); }
.la-dash .la-lab[data-l="developing"] { background: var(--la-dv-bg); color: var(--la-dv); }
.la-dash .la-lab[data-l="strength"] { background: var(--la-sg-bg); color: var(--la-sg); }
.la-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.la-legend .la-linkbtn { margin-left: auto; font-size: 13px; }
.la-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.la-key[data-l="needs_practice"] { background: var(--la-np); }
.la-key[data-l="developing"] { background: var(--la-dv); }
.la-key[data-l="strength"] { background: var(--la-sg); }
.la-skill-tools { margin: 0 0 12px; }
.la-search-sm { max-width: 320px; }
.la-search-sm input { padding: 8px 0; font-size: 14px; }
.la-more-skills { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.la-table-scroll { overflow-x: auto; }
.la-sktable { width: 100%; border-collapse: collapse; font-size: 14px; }
.la-sktable th, .la-sktable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.la-sktable thead th { background: var(--la-head); font-size: 13px; color: var(--muted); font-weight: 600; }
.la-sktable tbody th { font-weight: 600; }

/* How are results changing? · the evidence behind a skill */
.la-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.la-assess { display: flex; gap: 12px; align-items: center; margin: 16px 0 6px; }
.la-assess label { margin: 0; flex: none; font-size: 13px; color: var(--muted); font-weight: 600; }
.la-assess select { flex: 1; min-width: 0; padding: 9px 10px; font-weight: 600; }
.la-svg-wrap { margin: 6px 0 4px; }
.la-svg { display: block; width: 100%; height: auto; overflow: visible; }
.la-svg-grid { stroke: #e8ebf1; stroke-width: 1; }
.la-svg-axis { font-size: 14px; fill: var(--muted); }
.la-svg-pass { stroke: #8f97a6; stroke-width: 1.5; stroke-dasharray: 6 5; }
.la-svg-passlabel { font-size: 14px; fill: #4b5563; }
.la-svg-line { fill: none; stroke: var(--la-sg); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.la-svg-pt { cursor: pointer; }
.la-svg-pt circle { fill: var(--la-sg); stroke: #fff; stroke-width: 2.5; }
.la-svg-pt.is-sel circle { stroke: var(--la-mint); stroke-width: 5; }
.la-svg-val { font-size: 16px; font-weight: 700; fill: var(--text); }
.la-change { margin: 6px 0 10px; font-size: 14px; color: var(--muted); }
.la-change b { color: var(--text); }
.la-change b.is-up { color: var(--la-teal); }
.la-change b.is-down { color: var(--la-np); }
.la-att-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.la-chip-btn { appearance: none; padding: 7px 13px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); font: inherit; font-size: 13.5px; cursor: pointer; }
.la-chip-btn:hover { background: var(--surface-2); }
.la-chip-btn[aria-pressed="true"] { background: var(--la-mint); border-color: var(--la-teal); color: var(--la-teal); font-weight: 600; }
.la-chip-btn:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 2px; }
.la-att-detail { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; background: #f4f6f9; font-size: 13.5px; margin: 0 0 10px; }
.la-att-detail span { color: var(--muted); }
.la-att-detail .la-go { align-self: flex-start; margin-top: 6px; }
.la-go-sm { padding: 6px 12px; font-size: 13px; }
.la-muted { color: var(--muted); }
.la-small { font-size: 12.5px; }
.la-empty-chart { text-align: left; padding: 18px 2px; }
.la-empty-line { color: var(--muted); font-size: 14px; margin: 12px 0; }
.la-ev-empty { padding: 30px 16px; }
.la-start-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; background: var(--la-mint); color: var(--la-teal); margin: 0 0 12px; }
.la-start-ico svg.la-ic { width: 22px; height: 22px; }
.la-ev-empty h2 { margin: 0 0 6px; }
.la-ev-empty p { margin: 0 0 12px; color: var(--muted); max-width: 46ch; }
.la-explore { font-size: 14.5px; text-decoration: none; }
.la-ev-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.la-ev-fig { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; font-size: 14px; color: #374151; }
.la-ev-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: #374151; }
.la-ev-tools select { padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13.5px; }
.la-ev-list { list-style: none; margin: 0; padding: 0; }
.la-ev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.la-ev-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.la-ev-main b { font-size: 14.5px; overflow-wrap: anywhere; }
.la-ev-sub, .la-ev-rel { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.la-ev-rel a { color: var(--la-teal); font-weight: 600; }
.la-out.is-lost { color: var(--la-np); font-weight: 600; }
.la-out.is-ok { color: var(--la-sg); font-weight: 600; }
.la-answer { grid-column: 1 / -1; margin: 6px 0 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fafbfd; min-width: 0; overflow-x: auto; }
.la-answer-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.la-answer-head a { color: var(--la-teal); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.la-ev-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 6px; font-size: 13.5px; color: var(--muted); }
.la-ev-foot .la-linkbtn { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.la-start { text-align: center; padding: 40px 24px; }
.la-start p { color: var(--muted); max-width: 52ch; margin: 6px auto 16px; }
.la-note { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; font-size: 13px; color: var(--muted); }

@media (max-width: 1100px) { .la-dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .la-charts { grid-template-columns: minmax(0, 1fr); }
  .la-chart + .la-chart { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 8px; }
  .la-window { margin-left: 0; text-align: left; flex-basis: 100%; }
}
@media (max-width: 720px) {
  .la-dash .la-card { padding: 16px 14px; border-radius: 14px; }
  .la-pick { padding: 14px; }
  .la-combo { flex: 1 1 200px; min-width: 0; }
  .la-pick-meta { margin-left: 0; }
  .la-sum { gap: 8px; }
  .la-sum-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
  .la-sum-card > b { font-size: 24px; }
  .la-sum-title { font-size: 13px; }
  .la-sum-sub { font-size: 12px; }
  .la-sbar { min-height: 0; padding: 10px 6px; }
  .la-assess { flex-direction: column; align-items: stretch; gap: 4px; }
  .la-legend .la-linkbtn { margin-left: 0; }
}

/* ---- the printable learner summary (js/la-print.js): a sheet on screen, one page on paper ---- */
.la-print-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.la-print-bar .la-back { margin: 0; }
.la-print-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.la-sheet { max-width: 860px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px 32px; font-size: 14px; }
.la-sheet-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--la-teal); padding: 0 0 12px; margin: 0 0 14px; }
.la-sheet-head h1 { margin: 2px 0 2px; font-size: 24px; }
.la-sheet-head p { margin: 0; color: var(--muted); }
.la-sheet-kicker { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--la-teal) !important; }
.la-sheet-meta { display: flex; flex-direction: column; text-align: right; font-size: 13px; color: var(--muted); }
.la-sheet-meta b { color: var(--text); }
.la-sheet section { margin: 0 0 14px; break-inside: avoid; }
.la-sheet h2 { font-size: 15px; margin: 0 0 6px; }
.la-sheet .la-sktable { font-size: 13px; }
.la-sheet .la-sktable th, .la-sheet .la-sktable td { padding: 6px 8px; }
.la-sheet .la-lab { font-size: 11.5px; }
.la-sheet .la-lab[data-l="needs_practice"] { background: var(--la-np-bg); color: var(--la-np); }
.la-sheet .la-lab[data-l="developing"] { background: var(--la-dv-bg); color: var(--la-dv); }
.la-sheet .la-lab[data-l="strength"] { background: var(--la-sg-bg); color: var(--la-sg); }
.la-sheet-sub { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.la-sheet-list { margin: 0; padding-left: 18px; }
.la-sheet-list li { margin: 2px 0; }
.la-sheet-more { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); font-style: italic; }
.la-sheet-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.la-sheet-two p { margin: 0 0 4px; }
.la-sheet-foot { margin: 16px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
@media (max-width: 720px) { .la-sheet { padding: 18px 16px; } .la-sheet-meta { text-align: left; } .la-sheet-two { grid-template-columns: 1fr; } }
@media print {
  @page { size: A4; margin: 12mm; }
  body.la-printing { background: #fff; }
  body.la-printing .sidebar, body.la-printing .topbar, body.la-printing .la-print-bar, body.la-printing #mf-toasts, body.la-printing .nav-backdrop { display: none !important; }
  body.la-printing #app, body.la-printing .main { display: block; }
  body.la-printing .view { padding: 0; max-width: none; }
  body.la-printing .la-sheet { border: 0; border-radius: 0; padding: 0; max-width: none; font-size: 12px; }
  body.la-printing .la-sheet .la-sktable { font-size: 11.5px; }
  body.la-printing .la-lab, body.la-printing .la-sheet-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- the views across learners (decision 122): Skills across learners, Where learners stop; Is learning regular? ---- */
.la-cohort { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; margin: 0 0 14px; }
.la-cohort h2 { margin: 0; font-size: 19px; }
.la-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.la-seg-btn { appearance: none; border: 0; background: var(--surface); padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.la-seg-btn + .la-seg-btn { border-left: 1px solid var(--border-strong); }
.la-seg-btn[aria-pressed="true"] { background: var(--la-mint); color: var(--la-teal); }
.la-seg-btn:focus-visible { outline: 2px solid var(--la-teal); outline-offset: -2px; }
.la-legend-top { border-top: 0; padding-top: 0; margin: 0 0 12px; }
.la-key[data-l="insufficient"] { background: #c4cad4; }
.la-key[data-l="none"] { background: transparent; box-shadow: inset 0 0 0 1.5px #b8c0cc; }
.la-key-work { background: #dfe4ec; }
.la-key-unknown { background: transparent; box-shadow: inset 0 0 0 1.5px #b8c0cc; border-radius: 2px !important; }
.la-stack-list { list-style: none; margin: 0; padding: 0; }
.la-stack-row { padding: 12px 0; border-top: 1px solid var(--border); }
.la-stack-row:first-child { border-top: 0; }
.la-stack-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin: 0 0 7px; }
.la-stack-head b { font-size: 15px; overflow-wrap: anywhere; }
.la-stack-bar { display: flex; gap: 3px; min-height: 30px; }
.la-seg-part { appearance: none; flex-basis: 0; min-width: 30px; border: 0; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; padding: 0 6px; }
.la-seg-part[data-l="needs_practice"] { background: var(--la-np); }
.la-seg-part[data-l="developing"] { background: var(--la-dv); }
.la-seg-part[data-l="strength"] { background: var(--la-sg); }
.la-seg-part[data-l="insufficient"] { background: #c4cad4; color: #2f3644; }
.la-seg-part[data-l="none"] { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1.5px #b8c0cc; }
.la-seg-part[aria-expanded="true"] { outline: 3px solid rgba(11, 111, 102, .35); outline-offset: 1px; }
.la-seg-part:focus-visible { outline: 3px solid var(--la-teal); outline-offset: 1px; }
.la-stack-who { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #f4f6f9; font-size: 13.5px; }
.la-stack-who p { margin: 0 0 6px; }
.la-who-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.la-who-list a { color: var(--la-teal); font-weight: 600; }
.la-cs-sum { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 4px 0 12px; font-size: 14px; }
.la-cs-sum b { font-size: 18px; }
.la-steps { list-style: none; margin: 0; padding: 0; }
.la-step { padding: 12px 0; border-top: 1px solid var(--border); }
.la-step-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.la-step-n { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--la-mint); color: var(--la-teal); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; }
.la-step-title { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.la-step-title b { overflow-wrap: anywhere; }
.la-step-title span { font-size: 13px; }
.la-step-bar { display: flex; align-items: center; gap: 12px; padding-left: 40px; }
.la-step-bar .la-track { flex: 1; }
.la-step-num { font-size: 13.5px; color: var(--muted); white-space: nowrap; min-width: 120px; }
.la-step .la-stack-who { margin-left: 40px; }
.la-days { margin: 16px 0 0; }
.la-days-sum { margin: -4px 0 6px; font-size: 14px; color: #374151; }
.la-svg-work { fill: #dfe4ec; }
.la-svg-unknown { fill: none; stroke: #b8c0cc; stroke-width: 1.5; stroke-dasharray: 4 3; }
.la-svg-learn { fill: var(--la-sg); }
.la-svg-partly { fill: #f4f6f9; }
.la-svg-small { font-size: 13px; }
/* decision 123: Which quizzes and exams are hardest? · How long learners take to finish · Most-missed questions · Is the group keeping up? */
.la-key[data-h="first"], .la-seg-part[data-h="first"] { background: var(--la-sg); }
.la-key[data-h="later"], .la-seg-part[data-h="later"] { background: #9fd5c8; color: #0b3d37; }
.la-key[data-h="notyet"], .la-seg-part[data-h="notyet"] { background: var(--la-np); }
.la-key[data-h="awaiting"], .la-seg-part[data-h="awaiting"] { background: repeating-linear-gradient(45deg, #d5dae2 0 6px, #c4cad4 6px 12px); color: #2f3644; }
.la-key[data-h="results"], .la-seg-part[data-h="results"] { background: #5d6b80; }
.la-fill[data-l="missed"] { background: #5d6b80; }
.la-qm-list { list-style: none; margin: 0; padding: 0; }
.la-qm-row { padding: 12px 0; border-top: 1px solid var(--border); }
.la-qm-row:first-child { border-top: 0; }
.la-qm-head { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; align-items: baseline; margin: 0 0 7px; }
.la-qm-head b { overflow-wrap: anywhere; }
.la-qm-head span { font-size: 13px; }
.la-qm-row .la-step-bar { padding-left: 0; }
/* the option spread of a multiple-choice question (decision 114, 16 Oct 2026) */
.la-qm-opts { margin: 0 0 10px; }
.la-qm-optlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.la-qm-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(80px, 160px) auto; gap: 4px 10px; align-items: center; }
.la-qm-let { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #e4e8ee; color: #3b4656; }
.la-qm-opt.is-correct .la-qm-let { background: var(--la-sg-bg); color: var(--la-sg); }
.la-qm-otext { min-width: 0; overflow-wrap: anywhere; }
.la-qm-ok { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--la-sg); }
.la-qm-who { display: block; font-size: 12.5px; margin-top: 2px; }
.la-qm-who a { color: var(--la-teal); font-weight: 600; }
.la-qm-bar { width: 100%; }
.la-qm-opt .la-fill { background: var(--la-np); }
.la-qm-opt.is-correct .la-fill { background: var(--la-sg); }
.la-qm-on { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .la-qm-opt { grid-template-columns: 22px minmax(0, 1fr) auto; } .la-qm-bar { grid-column: 2 / -1; grid-row: 2; } }
/* learners per course (decision 115, 16 Oct 2026) */
.la-catable th[scope="row"] { min-width: 180px; }
.la-ca-sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 1px; }
.la-strips { margin: 4px 0 10px; }
.la-strip { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: end; margin: 0 0 6px; }
.la-strip-label { font-size: 13px; color: var(--muted); padding-bottom: 3px; }
.la-strip-track { position: relative; min-height: 27px; border-bottom: 2px solid #dfe4ec; margin-right: 8px; }
.la-dot { position: absolute; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.la-dot.is-done { background: var(--la-sg); }
.la-dot.is-going { background: var(--surface); box-shadow: inset 0 0 0 2px #8a96a8; }
.la-median { position: absolute; top: 0; bottom: -6px; width: 0; border-left: 2px dashed var(--la-teal); }
.la-key-median { display: inline-block; width: 0; height: 14px; border-left: 2px dashed var(--la-teal); margin-right: 7px; vertical-align: -2px; }
.la-strip-axis { display: flex; justify-content: space-between; margin: 2px 8px 0 106px; font-size: 12.5px; color: var(--muted); }
.la-finish-list { margin: 12px 0 0; }
.la-extra:empty { display: none; }
@media (max-width: 720px) {
  .la-cohort { padding: 16px 14px; }
  .la-step-bar, .la-step .la-stack-who { padding-left: 0; margin-left: 0; }
  .la-step-num { min-width: 0; }
  .la-stack-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .la-strip { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .la-strip-axis { margin-left: 0; }
}

/* ---- decision 124: the page opens on the group; the learner list on the left; one learner, or several side by side ---- */
.la-shell { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.la-main { min-width: 0; outline: 0; }
.la-people { position: sticky; top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 14px 14px; }
.la-ptoggle { display: none; }
.la-phead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.la-phead b { font-size: 16px; }
.la-pcount { min-width: 28px; padding: 1px 8px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: center; }
.la-people .la-search { max-width: none; flex: none; }
.la-pall { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding: 11px 12px; border: 0; border-radius: 11px; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; text-align: left; }
.la-pall .la-ic { color: var(--la-teal); }
.la-pall[aria-pressed="true"] { background: var(--la-mint); color: var(--la-teal); }
.la-pall:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 2px; }
.la-phint { margin: 10px 2px 8px; font-size: 12.5px; color: var(--muted); }
.la-plist { max-height: calc(100vh - 380px); min-height: 160px; overflow-y: auto; margin: 0 -6px; padding: 2px 6px; }
.la-prow { border-radius: 11px; margin: 0 0 4px; border-left: 3px solid transparent; }
.la-prow-in { display: grid; grid-template-columns: 18px 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 8px 8px 6px; cursor: pointer; border-radius: 10px; }
.la-prow-in:hover { background: var(--surface-2); }
.la-prow-in input { width: 17px; height: 17px; margin: 0; accent-color: var(--la-teal); }
.la-prow-text { display: flex; flex-direction: column; min-width: 0; }
.la-prow-text b { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.la-prow-text small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.la-prow.is-sel { background: var(--la-mint); }
.la-prow.is-shown { border-left-color: var(--la-teal); }
.la-prow.is-pending { box-shadow: inset 0 0 0 1.5px var(--la-teal); background: #f2faf8; }
.la-prow-tag { font-size: 11.5px; font-weight: 700; color: var(--la-teal); white-space: nowrap; }
.la-prow-tag.is-pending { color: #8a5a00; }
.la-plabel { margin: 4px 4px 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.la-psep { border: 0; border-top: 1px solid var(--border); margin: 8px 4px; }
.la-pmore { display: block; margin: 8px auto 4px; }
.la-pfoot { border-top: 1px solid var(--border); margin: 10px -14px 0; padding: 12px 14px 0; }
.la-pfoot-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--muted); margin: 0 0 10px; }
.la-pmain { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.la-pmain[disabled] { opacity: .55; cursor: default; }
.la-pmain.is-pending { box-shadow: 0 0 0 3px rgba(11, 111, 102, .25); }
.la-pnote { margin: 8px 0 0; font-size: 12.5px; color: #8a5a00; }
.la-pnote:empty { display: none; }

.la-mhead { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; align-items: flex-start; margin: 0 0 14px; }
.la-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--la-teal); }
.la-mtitle { margin: 0; font-size: 23px; letter-spacing: -.01em; }
.la-msub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.la-msub a { color: var(--la-teal); font-weight: 600; }
.la-mwin { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 13.5px; color: var(--muted); }
.la-mwin b { color: var(--text); font-size: 14.5px; }
.la-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.la-pchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 8px; background: var(--la-mint); color: var(--la-teal); font-size: 13px; font-weight: 600; }
.la-pchip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 6px; }
.la-pchip button:hover, .la-pchip button:focus-visible { background: rgba(11, 111, 102, .12); outline: 0; }

.la-sum3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.la-sum4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
button.la-sum-card { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
button.la-sum-card:hover { box-shadow: 0 0 0 2px rgba(11, 111, 102, .18); }
button.la-sum-card:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 2px; }
button.la-sum-card[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--la-teal); }
.la-sum-card.is-ev { background: var(--surface); }
.la-sum-who { margin: 8px 0 6px; padding: 12px 14px; border-radius: 12px; background: #f4f6f9; font-size: 13.5px; }
.la-sum-who p { margin: 0 0 6px; }
.la-ov-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 4px 0 0; }
.la-ov-grid > .la-card, .la-dash2 .la-dash-grid > .la-card { padding: 20px 22px; border-radius: 16px; }
.la-ov-grid > .la-cohort { margin: 0; }
.la-ov-more { font-size: 15px; margin: 24px 0 10px; color: var(--muted); font-weight: 700; letter-spacing: .02em; }
.la-dash2 .la-dash-grid { margin: 16px 0 0; }
.la-dash2 .la-dash-grid > div > .la-cohort { margin: 0; }
.la-ov-course { margin: 16px 0 0; }
.la-stack-sub { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.la-who-figs { list-style: none; margin: 0; padding: 0; }
.la-who-figs li { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 4px 0; border-top: 1px solid #e6e9ef; }
.la-who-figs li:first-child { border-top: 0; }
.la-who-name { font-weight: 600; }

/* the result grid (js/la-evidence.js): aligned rows, the evidence right below the selected row */
.la-skillcard { padding: 20px 22px; border-radius: 16px; margin: 0 0 16px; }
.la-gridwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.la-gt { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.la-gt.is-wide { min-width: calc(190px + var(--la-cols) * 170px); }
.la-gt th, .la-gt td { border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.la-gt thead th { background: #f6f8fb; padding: 12px 14px; font-size: 13.5px; font-weight: 700; }
.la-gt thead th small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.la-gt thead th a { color: var(--la-teal); }
.la-gt-corner, .la-gt-skill { width: 190px; position: sticky; left: 0; z-index: 1; }
.la-gt-corner { background: #f6f8fb !important; }
.la-gt-skill { background: #f9fafc; padding: 14px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; border-right: 1px solid var(--border); }
.la-gt tbody tr:last-child > * { border-bottom: 0; }
.la-gt-cell { padding: 6px; }
.la-cell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; width: 100%; min-height: 108px; padding: 10px 12px; border: 1.5px solid transparent; border-radius: 10px;
  background: transparent; font: inherit; color: inherit; text-align: left; }
button.la-cell { cursor: pointer; }
button.la-cell:hover { background: #f6f8fb; }
button.la-cell:focus-visible { outline: 2px solid var(--la-teal); outline-offset: 1px; }
.la-cell.is-on { background: var(--la-mint); border-color: var(--la-teal); }
.la-cell-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.la-cell-pct { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.la-cell-pct.is-na { color: var(--muted); font-weight: 600; }
.la-chev { display: inline-flex; color: var(--muted); transition: transform .15s ease; }
.la-cell.is-on .la-chev { transform: rotate(180deg); color: var(--la-teal); }
.la-cell .la-track { width: 100%; }
.la-cell-meta { font-size: 12.5px; color: var(--muted); }
.la-na-chip.is-quiet { border-style: solid; border-color: var(--border); }
.la-gt-row.is-open > th, .la-gt-row.is-open > td { border-bottom-color: var(--la-teal); }
.la-evx-row > td { padding: 0; background: #fbfcfd; border-bottom: 2px solid var(--la-teal) !important; }
.la-evx { position: sticky; left: 0; width: var(--la-gw, 100%); max-width: 100%; box-sizing: border-box; }
.la-gt.is-wide .la-evx { max-width: none; }
.la-evx-in { padding: 18px 20px 14px; }
.la-evx-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.la-evx-title h3 { margin: 0; font-size: 18px; }
.la-evx-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.la-evx-fig { margin: 8px 0 0; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.la-evx-actions { display: flex; gap: 8px; align-items: center; }
.la-evx-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.la-xbtn { border: 0; background: transparent; color: var(--muted); font-size: 16px; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.la-xbtn:hover, .la-xbtn:focus-visible { background: var(--surface-2); color: var(--text); outline: 0; }
.la-evx-task { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #eef4f8; font-size: 13.5px; }
.la-evx-task span { flex: 1 1 200px; }
.la-evx-task a { color: var(--la-teal); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.la-evx-tools { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; }
.la-evx-count { font-size: 13px; color: var(--muted); }
.la-evx-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.la-evx-list { list-style: none; margin: 8px 0 0; padding: 0; }
.la-evx-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 4px; border-top: 1px solid var(--border); }
.la-evx-item.is-picked { background: #f2faf8; }
.la-evx-pick { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--la-teal); }
.la-evx-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.la-evx-main b { overflow-wrap: anywhere; }
.la-evx-meta { font-size: 13px; color: var(--muted); }
.la-evx-view { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; text-decoration: none; font-size: 13.5px; }
.la-evx-view[aria-expanded="true"] .la-ic { transform: rotate(180deg); }
.la-evx-ans { grid-column: 1 / -1; margin: 8px 0 0 29px; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.la-evx-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 0; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--muted); }
.la-evx-foot .la-linkbtn { display: inline-flex; gap: 4px; align-items: center; text-decoration: none; }
.la-evx-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

/* the small charts and the side-by-side tables */
.la-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.la-chart-cap { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.la-chart-cap b { color: var(--text); }
.la-svg-practice { fill: #6f8fc9; }
.la-key-practice { background: #6f8fc9; border-radius: 2px !important; }
.la-wtable { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; min-width: 560px; }
.la-wtable th { font-weight: 600; color: var(--muted); text-align: center; padding: 2px 3px; white-space: nowrap; }
.la-wtable th small { display: block; font-weight: 500; font-size: 10.5px; }
.la-wtable tbody th { text-align: left; color: var(--text); padding-right: 8px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.la-wcell { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 42px; min-width: 34px; border-radius: 6px; background: #eef1f6; overflow: hidden; }
.la-wcell i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(11, 111, 102, .28); }
.la-wcell.is-practice i { background: rgba(111, 143, 201, .45); }
.la-wcell.is-off { background: #f6f7f9; }
.la-wcell b { position: relative; font-size: 13px; line-height: 1.1; }
.la-wcell small { position: relative; font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
.la-spread-title { margin: 4px 0 8px; }
.la-spread-cap { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.la-bars { list-style: none; margin: 0; padding: 0; }
.la-bars li { display: grid; grid-template-columns: minmax(80px, 128px) minmax(0, 1fr) 92px; gap: 10px; align-items: center; padding: 6px 0; }
.la-bar-name { font-weight: 600; color: var(--la-teal); overflow-wrap: anywhere; font-size: 14px; }
.la-bar-track { position: relative; height: 12px; border-radius: 6px; background: #eceff4; }
.la-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--la-dv); }
.la-bar-fill.is-pass, .la-bar-fill.is-met { background: var(--la-sg); }
.la-bar-fill.is-fail { background: var(--la-np); }
.la-bar-fill.is-plain { background: #5d6b80; }
.la-bar-target { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dashed #6b7280; }
.la-bar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.la-bar-none { grid-column: 2; }
.la-spread-axis { display: flex; justify-content: space-between; margin: 2px 102px 0 138px; font-size: 12px; color: var(--muted); }
.la-tcmp { margin: 0 0 12px; }

@media (max-width: 1180px) { .la-ov-grid { grid-template-columns: minmax(0, 1fr); } .la-sum4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .la-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .la-people { position: static; padding: 0; }
  .la-ptoggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; color: var(--text); }
  .la-ptoggle[aria-expanded="true"] .la-ic { transform: rotate(180deg); }
  .la-pbody { padding: 0 14px 14px; }
  .la-people.is-collapsed .la-pbody { display: none; }
  .la-plist { max-height: 50vh; }
  .la-mwin { align-items: flex-start; text-align: left; }
}
@media (max-width: 720px) {
  .la-sum3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .la-skillcard, .la-ov-grid > .la-card, .la-dash2 .la-dash-grid > .la-card { padding: 16px 12px; }
  .la-two { grid-template-columns: minmax(0, 1fr); }
  .la-gt-corner, .la-gt-skill { width: 118px; }
  .la-gt.is-wide { min-width: calc(118px + var(--la-cols) * 150px); }
  .la-gt-skill { padding: 10px; font-size: 13px; }
  .la-cell { min-height: 0; padding: 8px; }
  .la-cell-pct { font-size: 19px; }
  .la-evx-in { padding: 14px 12px 12px; }
  .la-evx-ans { margin-left: 0; }
  .la-bars li { grid-template-columns: minmax(70px, 92px) minmax(0, 1fr) 54px; gap: 8px; }
  .la-spread-axis { margin: 2px 62px 0 100px; }
}
@media (max-width: 560px) {
  /* one learner: each skill above its two results */
  .la-gt:not(.is-wide) thead .la-gt-corner { display: none; }
  .la-gt:not(.is-wide) thead tr { display: grid; grid-template-columns: 1fr 1fr; }
  .la-gt:not(.is-wide) tbody tr.la-gt-row { display: grid; grid-template-columns: 1fr 1fr; }
  .la-gt:not(.is-wide) .la-gt-skill { grid-column: 1 / -1; width: auto; position: static; border-right: 0; border-bottom: 0; padding: 10px 10px 2px; background: transparent; }
  .la-gt:not(.is-wide) tbody tr.la-evx-row, .la-gt:not(.is-wide) tbody tr.la-evx-row > td { display: block; }
}

/* decision 124: the page's own primary actions in the analytics teal; the bars' columns; the full-width week tables */
.la-dash2 .btn-primary { background: var(--la-teal); border-color: var(--la-teal); color: #fff; }
.la-dash2 .btn-primary:hover:not([disabled]) { filter: brightness(.92); }
.la-dash2 .la-pmain[disabled] { background: #8fc3bc; border-color: #8fc3bc; opacity: 1; }
.la-ov-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.la-bars li { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 48px; }
.la-bars.is-wideval li { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 132px; }
.la-bars li.la-bars-axis { padding: 0; }
.la-bars-ticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.la-bars-ticks i { font-style: normal; }
.la-wide { margin: 16px 0 0; padding: 20px 22px; border-radius: 16px; }
.la-wtable { width: 100%; }
@media (max-width: 1180px) { .la-ov-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .la-bars li { grid-template-columns: minmax(64px, 88px) minmax(0, 1fr) 44px; }
  .la-bars.is-wideval li { grid-template-columns: minmax(64px, 88px) minmax(0, 1fr) 104px; }
  .la-wide { padding: 16px 12px; }
}

/* decision 124: on a phone an answer row keeps its text wide; View answer sits below it */
@media (max-width: 560px) {
  .la-evx-item { grid-template-columns: auto minmax(0, 1fr); }
  .la-evx-view { grid-column: 2; justify-self: start; }
  .la-evx-item:not(:has(.la-evx-pick)) .la-evx-view { grid-column: 1; }
}

/* decision 124: the two typing charts one above the other when the card is narrow */
.la-two.is-stack { grid-template-columns: minmax(0, 1fr); }

/* ---- decision 125: periods beside titles, differing rules said on the card, compact lists, the Training report, printing ---- */
.la-ptag { display: inline-block; margin: 6px 0 0; padding: 2px 9px; border-radius: 7px; background: #eef2f7; color: #3f4a5a; font-size: 12.5px; font-weight: 600; }
.la-xtag { display: inline-block; margin: 6px 0 0 6px; padding: 2px 9px; border-radius: 7px; background: #fff4e0; color: #7a4a00; font-size: 12.5px; font-weight: 600; }
.la-card-head h2 + .la-ptag, .la-cohort h2 + .la-ptag { margin-top: 6px; }
.la-differs { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: #f3f6fa; font-size: 13px; color: #3f4a5a; }
.la-differs .la-ic { flex: none; margin-top: 1px; }
.la-n { display: inline-block; padding: 1px 8px; border-radius: 7px; background: #eef2f7; color: var(--text); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.la-stack-meta { display: inline-flex; gap: 8px; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.la-ov-wide { margin: 16px 0 0; }
.la-ov-wide > .la-cohort { margin: 0; }
/* a learner's cards packed in two columns (no gap beside a long one); one column on narrower screens */
.la-mcols { columns: 2 420px; column-gap: 16px; margin: 16px 0 0; }
.la-mcols > .la-card { display: block; break-inside: avoid; margin: 0 0 16px; padding: 20px 22px; border-radius: 16px; }
@media (max-width: 1100px) { .la-mcols { columns: 1; } }
@media (max-width: 720px) { .la-mcols > .la-card { padding: 16px 12px; } }
/* the answer preview in an admin's words: the feedback the learner was shown, under its own heading */
.la-evx-ans .qv-feedback.la-fbshown-box { background: #f6f8fb; border: 1px solid var(--border); color: var(--text); }
.la-fbshown { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* the Training report */
.la-tr-routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 0 16px; }
.la-tr-route { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: #fbfcfd; }
.la-tr-route h3 { margin: 0 0 8px; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.la-tr-line { margin: 4px 0 0; font-size: 13px; }
.la-tr-k { display: inline-block; min-width: 76px; color: var(--muted); font-weight: 600; }
.la-trtable td, .la-trtable th { vertical-align: top; }
.la-trtable td { font-size: 13px; }
.la-trc { display: inline-block; margin: 0 4px 4px 0; padding: 1px 7px; border-radius: 6px; background: #eef2f7; font-size: 12px; font-weight: 600; white-space: nowrap; }
.la-trc.is-ok { background: var(--la-sg-bg); color: #0b5a52; }
.la-trc.is-warn { background: var(--la-np-bg); color: var(--la-np); }
.la-trc.is-quiet { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.la-track-sm { display: block; height: 6px; margin: 4px 0 2px; max-width: 140px; }
.la-tr-h3 { margin: 18px 0 8px; font-size: 15px; }

/* the printable sheets: the group summary and the comparison */
.la-sheet-wide { max-width: 1040px; }
.la-sheet-scope p { margin: 0 0 4px; }
.la-sheet-nums td small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.la-sheet-nums td b { font-size: 18px; }
.la-sheet-barcol { width: 230px; }
.la-pbar { display: flex; gap: 2px; height: 16px; min-width: 160px; }
.la-pseg { display: flex; align-items: center; justify-content: center; min-width: 16px; border-radius: 3px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* colour with a pattern each, so the levels stay apart in black-and-white printing */
.la-pseg[data-l="needs_practice"] { background: var(--la-np); }
.la-pseg[data-l="developing"] { background: repeating-linear-gradient(45deg, var(--la-dv) 0 4px, #8ea3e3 4px 7px); }
.la-pseg[data-l="strength"] { background: repeating-linear-gradient(0deg, var(--la-sg) 0 3px, #5fae9f 3px 5px); }
.la-pseg[data-l="insufficient"] { background: repeating-radial-gradient(circle at 2px 2px, #8e97a6 0 1px, #d5dae2 1px 4px); color: #222; }
.la-pseg[data-l="none"] { background: #fff; color: #333; box-shadow: inset 0 0 0 1px #8e97a6; }
.la-plegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 8px; font-size: 12px; color: #374151; }
.la-plegend span { display: inline-flex; align-items: center; gap: 6px; }
.la-plegend .la-pseg { width: 22px; height: 12px; min-width: 22px; }
.la-sheet-learner { break-inside: avoid; margin: 0 0 12px; }
.la-sheet-learner h3 { font-size: 14px; margin: 10px 0 4px; }
.la-sheet-cmp td { font-size: 12.5px; }
/* the printed learner table: names on one line where they fit, the skills column given the room */
.la-sheet-people th[scope="row"] { min-width: 9em; }
.la-sheet-people thead th:nth-child(2) { width: 8.5em; }
.la-sheet-people thead th:nth-child(4) { width: 6.5em; }
.la-sheet-people thead th:nth-child(5) { width: 11em; }
.la-print-bar .la-f-check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
@media print {
  body.la-printing .la-sheet thead { display: table-header-group; }
  body.la-printing .la-sheet tr, body.la-printing .la-pbar { break-inside: avoid; }
  body.la-printing .la-sheet h2, body.la-printing .la-sheet h3 { break-after: avoid; }
  body.la-printing .la-sheet-appendix { break-before: page; }
  body.la-printing .la-sheet-wide { max-width: none; }
  body.la-printing .la-sheet-barcol { width: 190px; }
}

/* decision 125: the Training table keeps names on one line; a route card reads as label and value; the print bar in the analytics teal */
.la-trtable th[scope="row"] { min-width: 112px; }
.la-trtable td:nth-child(2) { min-width: 92px; }
.la-tr-line { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.la-tr-k { min-width: 0; }
.la-print-bar .btn-primary { background: var(--la-teal); border-color: var(--la-teal); color: #fff; }

/* decision 125: on paper the group summary and the comparison let long sections flow on (headings kept with what follows, table
   headings repeated, rows never split) — so a small group fits on one or two pages and a large one runs on naturally */
@media print {
  body.la-printing .la-sheet-wide section { break-inside: auto; margin: 0 0 10px; }
  body.la-printing .la-sheet-wide .la-sheet-scope, body.la-printing .la-sheet-wide .la-sheet-learner { break-inside: avoid; }
  body.la-printing .la-sheet-wide h2, body.la-printing .la-sheet-wide .la-plegend, body.la-printing .la-sheet-wide h2 + .la-sheet-sub { break-after: avoid; }
  body.la-printing .la-sheet-wide h2 + .la-sheet-sub, body.la-printing .la-sheet-wide section.la-keep, body.la-printing .la-sheet-chunk { break-inside: avoid; }
  body.la-printing .la-sheet-wide .la-sktable th, body.la-printing .la-sheet-wide .la-sktable td { padding: 4px 6px; }
  body.la-printing .la-sheet-wide .la-sheet-head { margin-bottom: 10px; }
  body.la-printing .la-sheet-foot { break-inside: avoid; break-before: avoid; }
}