matrix.css

/* TeachingMatrix — shared styles */
:root {
  --e: #1B7837; --d: #7FBF7B; --i: #D9F0D3;           /* level palette (matches the Excel exports) */
  --ink: #1f2430; --muted: #667085; --line: #d9dee7;
  --bg: #f6f8fa; --card: #ffffff; --accent: #0969da;
  --danger: #b42318; --ok: #1a7f37;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
header.app {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
header.app h1 { font-size: 16px; margin: 0; }
header.app .who { margin-left: auto; color: var(--muted); display: flex; gap: 8px; align-items: center; }
main { padding: 14px 18px 60px; }
.tabs { display: flex; gap: 4px; }
.tabs button {
  border: 1px solid var(--line); background: var(--card); padding: 6px 14px;
  border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 600; color: var(--muted);
}
.tabs button.active { color: var(--ink); border-bottom-color: var(--card); background: var(--card); box-shadow: inset 0 2px 0 var(--accent); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
input[type=text], input[type=password], select {
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font: inherit; background: #fff;
}
button.btn {
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink);
  padding: 6px 13px; cursor: pointer; font: inherit; font-weight: 600;
}
button.btn:hover { border-color: var(--accent); color: var(--accent); }
button.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.btn.primary:hover { filter: brightness(1.08); color: #fff; }
button.btn.danger { color: var(--danger); }
button.btn:disabled { opacity: .5; cursor: default; }
.note { color: var(--muted); font-size: 12.5px; }
.err { color: var(--danger); font-weight: 600; }
.ok { color: var(--ok); font-weight: 600; }

/* matrix table */
.matrix-wrap { overflow: auto; max-height: calc(100vh - 210px); border: 1px solid var(--line); border-radius: 10px; background: #fff; }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
table.matrix th, table.matrix td { border-right: 1px solid #eef1f5; border-bottom: 1px solid #eef1f5; padding: 3px 7px; }
table.matrix thead th {
  position: sticky; top: 0; background: #2c3e50; color: #fff; z-index: 10;
  vertical-align: bottom; font-weight: 600;
}
table.matrix thead th.added { background: #0a6b3c; }
table.matrix .vert { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 120px; white-space: nowrap; margin: 4px auto 2px; }
table.matrix td.key-col, table.matrix th.key-col { background: #fff; text-align: left; }
table.matrix .key-narrow { min-width: 30px; max-width: 90px; white-space: nowrap; }
table.matrix td.key-sticky, table.matrix th.key-sticky {
  position: sticky; left: 0; z-index: 5;
  min-width: 230px; max-width: 340px;
  box-shadow: 2px 0 0 var(--line);
}
table.matrix thead th.key-col { background: #2c3e50; z-index: 12; }
table.matrix thead th.key-sticky { z-index: 20; }
table.matrix tr.cat-row td { background: #34495e; color: #fff; font-weight: 700; text-align: left; padding: 0; }
table.matrix tr.cat-row .cat-label { position: sticky; left: 0; display: inline-block; padding: 4px 8px; }
table.matrix tr.added-row td.key-col { background: #e6f6ec; }
table.matrix td.cell { text-align: center; min-width: 34px; font-weight: 700; }
td.cell.lv-E { background: var(--e); color: #fff; }
td.cell.lv-D { background: var(--d); }
td.cell.lv-I { background: var(--i); }
td.cell.lv-blank { color: #c3cbd6; font-weight: 400; }
td.cell.clickable { cursor: pointer; }
td.cell.clickable:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
td.cell.edited, td.cell.clickable.edited:hover { outline: 2.5px solid #cf222e; outline-offset: -2.5px; }
td.cell.edited { outline: 2.5px solid #cf222e; outline-offset: -2.5px; }
td.cell.diff { min-width: 76px; font-weight: 600; }
td.cell.diff .old { text-decoration: line-through; opacity: .75; padding: 0 3px; border-radius: 3px; }
td.cell.diff.lv-blank { color: var(--ink); }

/* legend */
.legend { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.legend .chip { display: inline-block; width: 18px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 3px; border: 1px solid #0002; }

/* changes panel */
.changes li { margin: 2px 0; }
.changes .revert { cursor: pointer; color: var(--danger); margin-left: 6px; font-weight: 700; }

/* PR list */
.prlist .pr { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 9px; background: #fff; }
.prlist .pr h3 { margin: 0 0 3px; font-size: 14px; }
.badge { padding: 1px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; color: #fff; }
.badge.open { background: #1a7f37; } .badge.merged { background: #8250df; } .badge.closed { background: #cf222e; }
.badge.review { background: #d4a72c; color: #1f2430; }
.pr .meta { color: var(--muted); font-size: 12px; }
.pr .diffbox { margin-top: 8px; overflow: auto; max-height: 420px; }
details > summary { cursor: pointer; font-weight: 600; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
dialog { border: 1px solid var(--line); border-radius: 10px; padding: 18px; max-width: 460px; }
dialog::backdrop { background: #0006; }
dialog .row { margin-top: 10px; }