/* ============================================================
   Screen-specific styles
   ============================================================ */

/* legends */
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 500; }
.legend i { width: 9px; height: 9px; border-radius: 2px; }
.legend-row { gap: 14px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); }

/* dashboard: needs-attention rows */
.attn-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px var(--pad); border: 0; border-bottom: 1px solid var(--line);
  background: transparent; text-align: left; color: var(--ink); transition: background .1s;
}
.attn-row:last-child { border-bottom: 0; }
.attn-row:hover { background: var(--surface-2); }
.attn-reasons { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.reason-pill {
  font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px;
}
.reason-pill.more { color: var(--muted); font-family: var(--font-mono); }

/* generic toolbar above tables */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; padding: 7px 12px; border-right: 1px solid var(--line); white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent-soft); color: var(--accent-ink); }
.seg button:hover:not(.on) { background: var(--surface-2); color: var(--ink); }

.chip-filter {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500;
}
.chip-filter:hover { border-color: var(--faint); }
.chip-filter.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.chip-filter .x { opacity: .6; }

/* radar distribution */
.radar-dist { display: grid; grid-template-columns: repeat(4, 1fr); }
.dist-cell { text-align: left; border: 0; border-right: 1px solid var(--line); background: transparent; padding: 16px var(--pad); color: var(--ink); transition: background .12s; position: relative; }
.dist-cell:last-child { border-right: 0; }
.dist-cell:hover { background: var(--surface-2); }
.dist-cell.on { background: var(--surface-2); }
.dist-cell.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.dist-cell .row { white-space: nowrap; }

/* search input in toolbar */
.tb-input { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--muted); min-width: 240px; }
.tb-input input { border: 0; background: transparent; outline: none; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--ink); width: 100%; }
.tb-input input::placeholder { color: var(--faint); }

/* flag tags in radar table */
.flag-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.radar-tbl tbody td { height: 52px; }

/* student profile */
.prof-head { display: flex; align-items: flex-start; gap: 20px; padding: var(--pad); }
.prof-score { display: flex; flex-direction: column; align-items: center; text-align: center; padding-left: 8px; }
.core-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px var(--pad); border-top: 1px solid var(--line); }
.core-card { border: 1px solid var(--line); border-radius: var(--r); padding: 11px 13px; background: var(--surface-2); }
.dot-sev { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.dot-sev.crit { background: var(--critical); } .dot-sev.stable { background: var(--stable); }

.tl-filter { border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 10.5px; font-weight: 500; padding: 3px 9px; border-radius: var(--r-pill); }
.tl-filter:hover { color: var(--ink); border-color: var(--faint); }
.tl-filter.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }

.timeline { position: relative; }
.tl-item { display: flex; gap: 13px; padding-bottom: 18px; position: relative; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1.5px; background: var(--line); }
.tl-mark { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; z-index: 1; }
.tl-body { flex: 1; min-width: 0; padding-top: 3px; }
.tl-type { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); display: inline-block; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 6px; }

.ai-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ai-actions li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; align-items: flex-start; }

.qa-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; text-align: left; transition: background .1s, border-color .1s; }
.qa-btn:hover { background: var(--surface-2); border-color: var(--faint); }
.qa-btn svg { color: var(--ink-2); }

/* ---------- behaviour pipeline ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.kb-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 160px; }
.kb-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.kb-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.kb-empty { text-align: center; color: var(--faint); font-size: 12px; padding: 20px 0; }

.case-card { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 12px; color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color .12s, transform .08s; }
.case-card:hover { border-color: var(--faint); transform: translateY(-1px); }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.case-meta .cm { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); }
.case-meta .cm.bad { color: var(--critical); }
.case-foot { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 9px; }
.chip-status { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.chip-status.ok { color: var(--stable); background: var(--stable-soft); border-color: var(--stable-line); }
.chip-status.warn { color: oklch(0.5 0.15 55); background: var(--watch-soft); border-color: var(--watch-line); }

/* drawer (shared) */
.drawer { position: fixed; inset: 0; z-index: 180; display: none; }
.drawer.open { display: block; }
.drawer-scrim { position: absolute; inset: 0; background: oklch(0.2 0.02 260 / 0.34); }
.drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: 560px; max-width: 96vw; background: var(--surface); border-left: 1px solid var(--line-2); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.drawer-h { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.link-name { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: var(--ink); padding: 0; margin-top: 6px; }
.link-name h3 { font-size: 17px; }
.link-name svg { color: var(--faint); }
.link-name:hover h3 { color: var(--accent-ink); }
.link-name:hover svg { color: var(--accent); }
.drawer-body { flex: 1; padding: 18px; }

/* stepper */
.stepper { display: flex; align-items: center; margin-bottom: 20px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.step-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); }
.step-label { font-size: 10px; color: var(--faint); white-space: nowrap; font-weight: 500; }
.step.past .step-dot { background: var(--ink-2); border-color: var(--ink-2); }
.step.past .step-label { color: var(--muted); }
.step.cur .step-dot { background: var(--sc); border-color: var(--sc); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc) 20%, transparent); }
.step.cur .step-label { color: var(--ink); font-weight: 600; }
.step-line { flex: 1; height: 2px; background: var(--line-2); margin: 0 6px; align-self: flex-start; margin-top: 6px; }
.step-line.past { background: var(--ink-2); }

.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.case-cell { background: var(--surface); padding: 11px 13px; }
.case-target { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r); }
.signoff-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; background: var(--critical-soft); border: 1px solid var(--critical-line); border-radius: var(--r); flex-wrap: wrap; }

/* report card grid */
.rc-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rc-tbl { width: 100%; border-collapse: collapse; }
.rc-tbl th { background: var(--surface-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.rc-tbl th.rc-p { text-align: center; font-family: var(--font-mono); }
.rc-tbl td { border-bottom: 1px solid var(--line); padding: 0; }
.rc-tbl tr:last-child td { border-bottom: 0; }
.rc-day { font-size: 11.5px; font-weight: 500; padding: 10px 10px !important; white-space: nowrap; }
.rc-cell { text-align: center; }
.rc-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; font-size: 12px; font-weight: 700; }
.rc-mark.sm { width: 18px; height: 18px; font-size: 11px; }
.rc-mark.yes { background: var(--stable-soft); color: var(--stable); }
.rc-mark.no { background: var(--critical-soft); color: var(--critical); }
.rc-mark.na { background: var(--surface-2); color: var(--faint); }
.rc-comment { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }

@media (max-width: 1180px) { .kanban { grid-template-columns: repeat(2, 1fr); } }

/* ---------- ILP / SEN ---------- */
.confidential-banner { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--critical-line); background: var(--critical-soft); border-radius: var(--r); margin-bottom: 16px; font-size: 12.5px; color: var(--ink); }
.confidential-banner svg { color: var(--critical); flex: none; }
.ilp-layout { display: grid; grid-template-columns: 290px 1fr; gap: var(--gap); align-items: start; }
.ilp-list { position: sticky; top: 0; }
.ilp-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; transition: background .1s; }
.ilp-item:last-child { border-bottom: 0; }
.ilp-item:hover { background: var(--surface-2); }
.ilp-item.on { background: var(--accent-soft); }
.ilp-item.on::before { content: ""; position: absolute; }
.ilp-head-meta { display: flex; gap: 28px; }

.medical { border-color: var(--critical-line); }
.medical .med-locked { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 20px; }
.med-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }

.need-card { border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; background: var(--surface); }
.need-impact { display: flex; gap: 7px; align-items: flex-start; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.need-impact svg { color: var(--watch); flex: none; margin-top: 2px; }

.access-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.access-cell { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); opacity: 0.6; }
.access-cell.granted { background: var(--surface); opacity: 1; border-color: var(--line-2); }
.access-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.access-check.yes { background: var(--stable-soft); color: var(--stable); }
.access-check.no { background: var(--surface-2); color: var(--faint); }

.strat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.strat-list li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; align-items: flex-start; }
.strat-num { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.goal { }

@media (max-width: 1080px) { .ilp-layout { grid-template-columns: minmax(0, 1fr); } .ilp-list { position: static; } }

/* ---------- Attendance register ---------- */
.week-nav { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 2px; background: var(--surface); }
.week-label { display: flex; flex-direction: column; align-items: center; min-width: 110px; line-height: 1.1; }
.att-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.att-key { width: 20px; height: 20px; border-radius: 5px; border: 1px solid; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.reg-tbl thead th { text-align: center; }
.reg-tbl thead th:first-child { text-align: left; }
.reg-day { border-left: 1px solid var(--line); font-size: 10.5px; }
.reg-sess { font-size: 9px !important; color: var(--faint) !important; font-weight: 500; padding-top: 0 !important; padding-bottom: 6px !important; }
.reg-cell { text-align: center; padding: 4px !important; }
.reg-cell:nth-child(even) { border-left: 1px solid var(--line); }
.att-mark { width: 26px; height: 26px; border-radius: 5px; border: 1px solid; font-family: var(--font-mono); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; transition: transform .08s; }
.att-mark:hover { transform: scale(1.12); }
.note-btn { width: 28px; height: 28px; border-radius: var(--r); border: 1px solid transparent; background: transparent; color: var(--faint); display: grid; place-items: center; }
.note-btn:hover { background: var(--surface-2); color: var(--ink-2); }
.note-btn.has { color: var(--accent); }
.note-pop { position: fixed; right: 28px; bottom: 28px; width: 320px; background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px 16px; z-index: 70; }

/* ---------- Progress Monitoring matrix ---------- */
.matrix-tbl thead th { text-align: center; vertical-align: bottom; }
.matrix-tbl thead th:first-child { text-align: left; }
.mx-col { padding-bottom: 8px !important; line-height: 1.2; }
.mx-name { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: var(--ink); padding: 0; text-align: left; }
.mx-name:hover span span:first-child { color: var(--accent-ink); }
.mx-cell { text-align: center; padding: 4px !important; }
.mx-tile { width: 84px; height: 48px; border: 1px solid; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative; padding: 0; transition: transform .08s; }
.mx-tile:hover { transform: scale(1.05); z-index: 2; box-shadow: var(--shadow); }
.mx-grade { font-size: 16px; font-weight: 700; line-height: 1; }
.mx-sub { font-size: 9px; font-weight: 500; display: flex; align-items: center; gap: 3px; opacity: 0.85; }
.mx-hl, .mx-sl { font-size: 7.5px; font-weight: 700; padding: 0 2px; border-radius: 2px; }
.mx-hl { background: currentColor; color: var(--surface) !important; opacity: 1; }
.mx-sl { border: 1px solid currentColor; }
.mx-trend { position: absolute; top: 3px; right: 4px; font-size: 8px; }
.mx-empty { color: var(--faint); font-family: var(--font-mono); }
.mx-foot td { border-top: 2px solid var(--line); padding: 12px 4px !important; height: auto; }
.mx-foot td:first-child { padding-left: var(--pad-sm) !important; }
.feed-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 16px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r); font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.feed-note svg { color: var(--accent); flex: none; margin-top: 1px; }
.mx-pop { position: fixed; right: 28px; bottom: 28px; width: 280px; background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px 16px; z-index: 70; }

/* ---------- IA / EE monitor ---------- */
.action-row { display: flex; align-items: center; gap: 12px; padding: 10px var(--pad); border-bottom: 1px solid var(--line); }
.action-row:last-child { border-bottom: 0; }
.action-row:hover { background: var(--surface-2); }
.rule-note { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); font-size: 11.5px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.45; }
.rule-note svg { color: var(--muted); flex: none; }
.cw-type { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--r-sm); letter-spacing: 0.03em; }
.cw-type.IA { background: var(--accent-soft); color: var(--accent-ink); }
.cw-type.EE { background: oklch(0.95 0.03 300); color: oklch(0.45 0.14 300); }
.cw-tbl tbody td { height: 46px; }

/* ---------- Document Hub ---------- */
.ask-hero { border: 1px solid var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 80%); border-radius: var(--r-lg); padding: 18px 20px; }
.ask-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ask-input { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 6px 8px 6px 13px; color: var(--muted); }
.ask-input input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--font-sans); font-size: 14px; color: var(--ink); }
.ask-input input::placeholder { color: var(--faint); }
.ask-answer { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.ask-q { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 12px; }
.ask-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.src-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 5px 10px; }
.src-chip:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.src-chip svg { color: var(--accent); }
.ask-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

.doc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 1280px) { .doc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
.doc-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 15px; display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s; }
.doc-card:hover { border-color: var(--faint); box-shadow: var(--shadow-sm); }
.doc-card.locked { background: var(--surface-2); opacity: 0.85; }
.doc-top { display: flex; align-items: center; gap: 9px; }
.doc-ic { width: 32px; height: 32px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.doc-card.locked .doc-ic { color: var(--faint); }
.doc-lock { margin-left: auto; color: var(--critical); }
.doc-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; margin-top: 12px; text-wrap: pretty; }
.doc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.doc-restricted { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rev-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid; }
.rev-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rev-chip.ok { color: var(--stable); background: var(--stable-soft); border-color: var(--stable-line); }
.rev-chip.watch { color: oklch(0.5 0.15 55); background: var(--watch-soft); border-color: var(--watch-line); }
.rev-chip.crit { color: var(--critical); background: var(--critical-soft); border-color: var(--critical-line); }
.doc-ask { width: 28px; height: 28px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--accent); display: grid; place-items: center; }
.doc-ask:hover { background: var(--accent-soft); border-color: var(--accent-line); }

/* ---------- Compliance Cockpit ---------- */
.readiness-banner { display: flex; align-items: center; gap: 28px; padding: 22px var(--pad); }
.rb-ring { flex: none; }
.rb-pillars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pillar { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 14px; transition: border-color .12s; }
.pillar:hover { border-color: var(--faint); background: var(--surface-2); }
.blocker-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.blocker-row:last-child { border-bottom: 0; }
.cw-stat { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.cov-tile { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); }
.cov-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
@media (max-width: 1080px) { .readiness-banner { flex-direction: column; } .rb-pillars { grid-template-columns: repeat(2, 1fr); width: 100%; } }

/* ---------- Staff & Settings ---------- */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.subtab { border: 0; background: transparent; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; }
.subtab:hover { color: var(--ink); }
.subtab.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.access-matrix tbody td { height: 44px; }
.acc-cell { display: inline-grid; place-items: center; min-width: 64px; height: 24px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid; font-size: 11px; font-weight: 600; }
.audit-row { display: flex; align-items: center; gap: 11px; padding: 12px var(--pad); border-bottom: 1px solid var(--line); }
.audit-row:last-child { border-bottom: 0; }
.audit-row:hover { background: var(--surface-2); }
.audit-ic { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; flex: none; }
.invite-modal { width: 460px; max-width: 92vw; background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 20px 22px; }
.form-modal { max-width: 92vw; background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 20px 22px; }

/* ---- bugfix: let wide tables grow to content so the overflow-x wrapper scrolls
        instead of squeezing/clipping chips & columns (overrides .tbl{width:100%}) ---- */
.radar-tbl, .cw-tbl { width: auto; min-width: 100%; }

/* ---- bugfix: dashboard two-column grid — minmax(0,..) stops content blowout /
        page-level horizontal scroll; stack on narrow viewports ---- */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Responsive: phone/tablet layout fixes
   ============================================================ */
/* generic two-column split (compliance, ILP) — stacks on narrow */
.split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .split-2 { grid-template-columns: minmax(0, 1fr); } }

/* wide tables: grow to content so their overflow-x wrapper scrolls (vs clipping) */
.staff-tbl, .access-matrix, .cmp-tbl { width: auto; min-width: 100%; }

/* let flex column tracks shrink below content so panels never clip under the page edge */
.col { min-width: 0; }
@media (max-width: 768px) {
  .panel-h { flex-wrap: wrap; row-gap: 6px; }
  .attn-row { flex-wrap: wrap; gap: 10px; }
}

/* kanban + document grid collapse to one column on phones */
@media (max-width: 760px) { .kanban { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .doc-grid { grid-template-columns: 1fr; } }

/* segmented filter controls: scroll horizontally instead of clipping off-screen */
@media (max-width: 768px) {
  .seg { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .toolbar { gap: 8px; }
  .toolbar .tb-input { margin-left: 0 !important; width: 100%; }
}

/* action-required rows (coursework): stack on phones so the late-info + "Open" stay on-screen.
   Desktop is a single fixed row; below 640px badge+name share line 1, subject on line 2,
   late-info + Open on line 3 (Open right-aligned). Language-agnostic. */
@media (max-width: 640px) {
  .action-row { flex-wrap: wrap; row-gap: 8px; column-gap: 10px; }
  .action-row .mx-status { flex: 0 0 auto !important; order: 1; }
  .action-row .mx-name   { flex: 1 1 auto !important; order: 2; min-width: 0; }
  .action-row .mx-subject{ flex: 1 1 100%; order: 3; }
  .action-row .mx-late   { order: 4; }
  .action-row .mx-open   { order: 5; margin-left: auto; }
}

/* ============================================================
   Responsive: stop page-level horizontal panning on phones.
   Shared flex rows wrap (vs forcing the content wider than the
   viewport), and the radar stat grid drops to 2 columns.
   ============================================================ */
@media (max-width: 640px) {
  .between { flex-wrap: wrap; }            /* screen toolbars: title + action buttons wrap */
  .radar-dist { grid-template-columns: repeat(2, 1fr); }  /* 4 stat cards -> 2x2 */
  .radar-dist .dist-cell:nth-child(2n) { border-right: 0; }
  .radar-dist .dist-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .radar-dist .dist-cell .row { white-space: normal; }   /* let long RU/UZ band labels wrap */
  .ilp-head-meta { flex-wrap: wrap; gap: 10px 20px; }
  .access-grid { grid-template-columns: repeat(2, 1fr); }   /* IB access arrangements: 3 -> 2 cols */
  .core-row { grid-template-columns: repeat(2, 1fr); }       /* student DP core: 3 -> 2 cols */
}

/* very narrow phones (≤400px): radar stat grid to single column so nothing clips */
@media (max-width: 400px) {
  .radar-dist { grid-template-columns: 1fr; }
  .radar-dist .dist-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .radar-dist .dist-cell:last-child { border-bottom: 0; }
}