: a grid, so a heat strip and a progress bar can share one row.
A screen sets its own column template on the wrapper:
and every .thead / .trow / .tfoot inside inherits it. */
.tbl { display: flex; flex-direction: column; min-height: 0; }
.tbl .thead, .tbl .trow, .tbl .tfoot {
display: grid;
grid-template-columns: var(--cols, 1fr);
align-items: center; gap: var(--space-4);
border-left: var(--stroke-2) solid transparent;
padding-left: var(--space-3);
}
.tbl .thead { padding-bottom: var(--space-2); }
.tbl .thead > * { color: var(--color-neutral-800); }
.tbl .trow { height: 34px; }
/* .tbl--wrap : rows size to their content instead of being pinned at 34px.
A roster table holds one short value per cell and 34px is right. A diagnostic
table (review.html's low-confidence measures) holds a PHRASE - "E4 四分音符
→ 疑為 F4" - in a panel that is only half the window wide, so the text has to
be allowed to take two lines. Pinned at 34px it did not clip, it OVERLAPPED
the row beneath: the grid row stayed 34px while the text drew 54px, so three
rows collided. Opt in per table; the default stays 34px. */
.tbl--wrap .trow { height: auto; min-height: 34px;
padding-block: var(--space-1); }
.tbl--wrap .trow > * { min-width: 0; }
/* #174 · A row whose action cell is narrower than its buttons pushed them
past the panel and past the viewport: measured at clientWidth 1100 the last
cell of #asgTbl resolved to 104px while its content needed 204px, so
撤回功課 sat at left 1090 with 10 of its 74px on screen and the page grew a
64px horizontal scrollbar. .tbl--wrap already lets a row grow taller, so
the controls take a second line instead of leaving the panel. */
.tbl--wrap .trow .rowx { flex-wrap: wrap; row-gap: var(--space-1); }
.who { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.who .ini { width: 26px; height: 26px; }
.nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Navigating to a detail screen. The NAME is the link, never the whole row:
an anchor wrapped around the row swallows that row's own buttons, and a
keyboard user cannot tab past it. At rest the link is plain body colour so a
dense table stays quiet; the underline arrives on hover and focus only. */
.rowlink { color: var(--color-neutral-1000); text-decoration: none; }
.rowlink:hover, .rowlink:focus-visible {
color: var(--color-primary-400); text-decoration: underline;
}
/* Progress: bar + "n / total". The bar colour is inherited from row status. */
.prog { display: flex; align-items: center; gap: var(--space-2); }
.bar { flex: 1; height: 8px; border-radius: var(--radius-full);
background: var(--color-neutral-200); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--radius-full);
background: var(--color-secondary-300); }
.num { color: var(--color-neutral-900); white-space: nowrap; }
/* Status pill: SOLID fill, never an outline, never a tint-with-dark-text.
Copy is fixed: 進度正常 / 進度落後 / 需要關注. */
.pill { display: inline-block; border-radius: var(--radius-full);
padding: var(--space-0) var(--space-3); font-weight: 700; white-space: nowrap; }
/* HONEST DOWNGRADE: spec asked for red-100 solid + white = 3.66:1, below AA.
red-200 + white = 5.66:1. Shape language (solid pill, white text) unchanged. */
.st-risk { background: var(--color-red-200); color: var(--color-neutral-100); }
.st-late { background: var(--color-yellow-200); color: var(--color-neutral-1000); }
.st-ok { background: var(--color-green-200); color: var(--color-neutral-1000); }
.st-info { background: var(--color-secondary-300); color: var(--color-neutral-100); }
.st-mute { background: var(--color-neutral-200); color: var(--color-neutral-900); }
/* :has() - the row's status sets the loudness of the whole row.
The eye descends from red to yellow to plain white; the student who needs
help is the loudest thing on the page without anyone having to read. */
.tbl .trow:has(.st-risk) { background: var(--color-red-alpha10);
border-left-color: var(--color-red-200); }
.tbl .trow:has(.st-risk) .bar i { background: var(--color-red-200); }
.tbl .trow:has(.st-late) { background: var(--color-yellow-alpha10);
border-left-color: var(--color-yellow-200); }
.tbl .trow:has(.st-late) .bar i { background: var(--color-yellow-200); }
.tbl .trow:has(.st-ok) .bar i { background: var(--color-green-200); }
.tbl .trow:has(.st-ok) + .trow:has(.st-ok) {
border-top: var(--stroke-0) solid var(--color-neutral-200); }
/* Hover cue only on rows that are NOT already status-tinted - a red row is
loud enough, and repainting it on hover would flatten the ranking. */
.tbl .trow:hover:not(:has(.st-risk)):not(:has(.st-late)) {
background: var(--color-primary-alpha10); }
/* Aggregate footer row - purple, because purple is the collective. */
.tbl .tfoot {
height: 36px; margin-top: var(--space-2);
background: var(--color-secondary-alpha10);
border-radius: var(--radius-full) var(--radius-none) var(--radius-none) var(--radius-full);
border-left-color: var(--color-secondary-300);
}
.tbl .tfoot .who b { color: var(--color-secondary-300); }
/* The footnote is prose, not a column value: let it run to the end of the row
instead of being squeezed into one narrow cell and wrapping. */
.tbl .tfoot .note { color: var(--color-neutral-800); grid-column: 3 / -1; }
/* ── 10b. Real
variant: .tbl--heat ───────────────────────────────
WHY THIS EXISTS. The roster+heatmap is genuine tabular data (10 students
x 14 days) and was built as independent CSS grids, one per row. Those
LOOK aligned only while every cell has identical intrinsic width. They
did not: the day-header keys filled their grid track while the cells
were capped at max-width and centred, so each header sat 14.4px left of
the column it labelled and was 28.9px wider - measured, not guessed.
A real
has ONE column-width authority (the colgroup), so a
header and its cells physically cannot drift. It also buys
,
, and column-level weekend shading via
, which the grid
version faked with a class on every single cell. */
.tbl--heat {
display: table; width: 100%; table-layout: fixed;
border-collapse: separate; border-spacing: var(--space-1) 0;
margin-inline: calc(var(--space-1) * -1);
}
/* Neutralise the flex/grid rules inherited from .tbl */
.tbl--heat .trow, .tbl--heat .kbd, .tbl--heat .wkrow, .tbl--heat .tfootr {
display: table-row; height: auto; gap: 0;
padding-left: 0; border-left: 0;
}
.tbl--heat th, .tbl--heat td { padding: 0; vertical-align: middle; }
.tbl--heat tbody .trow { height: 34px; }
/* A failed practice read (dashboard.html sets data-unread): the day cells are
not drawn, because a grey cell means 未練習 and the read did not say that. */
.tbl--heat[data-unread] .cell { visibility: hidden; }
/* Column widths live here and nowhere else. */
.tbl--heat .c-who { width: clamp(104px, 9vw, 148px); }
.tbl--heat .c-prog { width: clamp(140px, 13vw, 196px); }
.tbl--heat .c-stat { width: clamp(72px, 7vw, 96px); }
.tbl--heat .c-act { width: clamp(88px, 8vw, 112px); }
/* #28 · the 28-day (月) period. Measured at the 1280px floor: 32 columns share
987px, and with a --space-1 gutter each day column comes out at 13.6px while
a key carrying "31" needs 15.73px of its own - the date would sit on top of
its neighbour. Two changes buy it back, both of them token values and both
scoped to this period so the 7-day view is untouched: the gutter drops one
spacing step, and 功課完成度 gives up 3vw it was not using. Result 17.3px. */
.tbl--heat.tbl--dense { border-spacing: var(--space-0) 0;
margin-inline: calc(var(--space-0) * -1); }
.tbl--heat.tbl--dense .c-prog { width: clamp(112px, 10vw, 156px); }
/* Weekend band: one rule paints the whole column, full height, always in
register with the header above it because it IS the same column. */
.tbl--heat .c-wknd { background: var(--color-secondary-alpha10); }
.tbl--heat .hcap, .tbl--heat .wklab {
color: var(--color-neutral-800); font-weight: 400; text-align: left;
padding-bottom: var(--space-2);
}
/* Same trap as .key: the legacy .wklab (line ~649) is display:grid, which
knocks a
out of the table layout algorithm and collapses
it to one narrow column - the label then wrapped one character per line.
Any legacy class landing on a table cell must be forced back. */
.tbl--heat .wklab { display: table-cell; text-align: center; }
.tbl--heat .wkrow th, .tbl--heat .wkrow td { padding-bottom: var(--space-1); }
.tbl--heat .who { text-align: left; font-weight: 400;
padding-left: var(--space-3); }
.tbl--heat .cel { text-align: center; }
.tbl--heat .prog, .tbl--heat .stat, .tbl--heat .act { padding-left: var(--space-4); }
/* Status tint + accent, now on
. The first cell carries the accent so it
cannot be clipped by border-collapse. */
.tbl--heat tbody .trow:has(.st-risk) { background: var(--color-red-alpha10); }
.tbl--heat tbody .trow:has(.st-risk) .who { box-shadow: inset var(--stroke-2) 0 0 0 var(--color-red-200); }
.tbl--heat tbody .trow:has(.st-late) { background: var(--color-yellow-alpha10); }
.tbl--heat tbody .trow:has(.st-late) .who { box-shadow: inset var(--stroke-2) 0 0 0 var(--color-yellow-200); }
.tbl--heat tbody .trow:hover:not(:has(.st-risk)):not(:has(.st-late)) {
background: var(--color-primary-alpha10); }
.tbl--heat tfoot .tfootr { background: var(--color-secondary-alpha10); }
.tbl--heat tfoot .who { box-shadow: inset var(--stroke-2) 0 0 0 var(--color-secondary-300); }
.tbl--heat tfoot .who b { color: var(--color-secondary-300); }
.tbl--heat tfoot .note { color: var(--color-neutral-800);
padding-left: var(--space-4); text-align: left; }
/* Cells and keys now share their column, so both simply fill it. */
.tbl--heat .cell { width: 100%; max-width: none; margin-inline: 0; }
.tbl--heat .dh { vertical-align: bottom; }
/* The
must stay display:table-cell or it leaves the table layout
algorithm entirely - .key carries display:flex, so putting .key ON
the
stacked all 14 headers at one x. The flex lives inside. */
.tbl--heat .dh .key { width: 100%; }
/* ── 11. Heatmap + the keyboard motif ────────────────────────────────────
VISUAL MOTIF. A period is always a whole number of Monday-to-Sunday runs -
7 days (週) or 28 days (月), see assets/period.js - so the date axis is drawn
as a piano keyboard: Saturday and Sunday are the black keys, and their darker
band runs the full height of the table. It is decoration that does work - you
can see at a glance who only practises at weekends.
Individual practice = orange ramp. Class aggregate = purple ramp.
#28: the column COUNT is no longer written here. A repeat(14, 1fr) was one of
four places the fortnight was hard-coded, and a period the teacher can change
cannot have its width fixed in a stylesheet. grid-auto-flow: column gives one
equal track per child, so the count lives only where the days do. */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 100%; }
.col { display: flex; align-items: center; justify-content: center; height: 100%; }
.col--wknd { background: var(--color-secondary-alpha10); } /* the black-key band */
.cell {
width: 100%; max-width: 30px; margin-inline: auto; height: 22px;
border-radius: var(--radius-4); display: block; position: relative;
}
.lv-0 { background: var(--color-neutral-200); }
.lv-1 { background: var(--color-primary-100); }
.lv-2 { background: var(--color-primary-200); }
.lv-3 { background: var(--color-primary-300); }
.lv-4 { background: var(--color-primary-400); }
/* A DAY THAT HAS NOT HAPPENED (teacher-dashboard#163, ruled 2026-09-10).
The period stays a whole Monday-to-Sunday week, so on any day but Sunday
the grid holds days in the future. They used to paint lv-0, which the
legend calls 未練習 -- did not practise -- so a teacher opening the console
on a Monday saw five days of apparent failure for every child.
THIS MUST NOT LOOK LIKE A LEVEL. It is hollow rather than filled: no fill,
a dashed hairline, so it reads as an empty slot on a calendar and not as
the lightest square on a scale of practice. Outside the lv-0..4 range on
purpose, because it is not a quantity of practice at all. */
.cell--future {
background: transparent;
border: var(--stroke-1) dashed var(--color-neutral-300);
}
.agg-0 { background: var(--color-neutral-200); }
.agg-1 { background: var(--color-secondary-100); }
.agg-2 { background: var(--color-secondary-200); }
.agg-3 { background: var(--color-secondary-300); }
.agg-4 { background: var(--color-secondary-400); }
/* EXCEPTION 1 of 2: a ::after pseudo-element cannot carry a .type-* class.
These two values are byte-identical to .type-b3 (12px / 18px). */
.cell:hover::after, .cell:focus-visible::after {
content: attr(data-tip); position: absolute; bottom: calc(100% + var(--space-1));
left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 9;
background: var(--color-neutral-1000); color: var(--color-neutral-100);
font-size: 12px; line-height: 18px;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-4); box-shadow: var(--shadow-e3);
}
/* The keyboard date axis. */
.kbd { height: 46px; align-items: flex-start; }
/* ⚠️ R003 (2026-09-01). flex-end, not flex-start, and this is the SAME rule the
table strip gets from `.tbl--heat .dh { vertical-align: bottom }` - #31's fix
landed on the
heat strip (dashboard.html) and never reached the div
grid one (#sdHeat on student-detail.html), which is exactly why Herman's
ticket says "still wrong".
MEASURED at 1194 and at 1366 before the change: white and black keys both
started at keyTop 757, so the 46px white key ended at 803 and the 38px black
key at 795, and every black-key label sat 8px HIGH (kwTop 756 vs 764, kdBot
794 vs 802) - 六 日 8 9 visibly raised above 一二三四五. Bottom-aligning makes
the shared key BOTTOM the shared baseline, whatever the two key heights are,
which is the whole reason .key itself is justify-content: flex-end. Key
heights are untouched: 38px is derived from the content and belongs to Agatha
and Jeanet (see .key--black below). */
.kbd .col { align-items: flex-end; padding: 0; }
.key {
width: 100%; height: 46px;
background: var(--color-neutral-100);
border: var(--stroke-0) solid var(--color-neutral-300);
border-top: var(--radius-none) solid transparent;
border-radius: var(--radius-none) var(--radius-none) var(--radius-4) var(--radius-4);
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
gap: var(--space-0);
/* #31: bottom-aligned, NOT centred. Centring put each label in the middle of
its own key, so a 46px white key and a 38px black key placed their dates
exactly (46-38)/2 = 4px apart - the axis read as two rows of dates.
Bottom-alignment makes the shared key bottom the shared baseline, so the
dates line up whatever the two heights are.
The padding is 0 by necessity, not by choice. Measured 2026-08-26: both
labels are 38px of content, so the black key (38px) has NO slack - its top
already sits 0.5px proud of its own key. Any bottom padding pushes it
further over, re-creating the overflow 98007bd fixed. Whenever Agatha or
Jeanet publish real key heights, a black key taller than its content earns
a padding-bottom of var(--space-1) here, applied to BOTH keys together. */
padding-bottom: 0;
}
.key--black {
/* 38px, not 32px. Measured on the deployed page 2026-08-22: the label is two
18px lines plus the gap, ~38px. At 32px it overflowed its own key by ~3px
top AND bottom (.kw drew at y533 against a key top of y536; .kd ended at
y571 against a key bottom of y568), and because both key types are
bottom-aligned the weekend date sat 7px lower than the weekday date. This
height is DERIVED FROM THE CONTENT, not chosen: the block below still
records that key heights resolve to no token and belong to Agatha/Jeanet,
so the white/black ratio is theirs to set. Raised as a fix to an overflow,
not as a design proposal. */
height: 38px;
background: var(--color-neutral-1000);
border-color: var(--color-neutral-1000);
border-radius: var(--radius-none) var(--radius-none) var(--radius-3) var(--radius-3);
}
.kw { color: var(--color-neutral-800); }
.kd { font-weight: 700; color: var(--color-neutral-1000); }
.key--black .kw { color: var(--color-neutral-500); }
.key--black .kd { color: var(--color-neutral-100); }
/* One label per week of the period: one at 週, four at 月. Same reason as
.strip above - the track count follows the children, not a literal. */
.wklab { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.wklab span { color: var(--color-neutral-800); text-align: center; }
/* Intensity legend. */
.legend { display: flex; align-items: center; gap: var(--space-1);
color: var(--color-neutral-800); }
.legend i { width: 16px; height: 12px; border-radius: var(--radius-2); display: block; }
/* ── 12. Forms ───────────────────────────────────────────────────────────
Real , real