@layer views {
/* Phase 3e.3 — the print system.

   Before this file the public front end carried 12 `@media print` blocks scattered over 7 stylesheets: six in
   styles.css, one in ui-hardening.css, and one each in layout.css, components.css, matrix.css, detail.css and
   base.css. Two of them even fought each other over `.stats` / `.schedule-desktop`. They are all consolidated
   here, and deleted from their old homes, so that "what does the printed page look like" has exactly one answer.

   Phase 3e.4.1 moved this sheet — together with the five screen sheets it competes with — into the SAME last layer,
   `legacy`, with this file still linked LAST (see public/index.html and css/layers.css). That preserves the exact
   relationships 3e.3 verified, which were decided by specificity and source order among unlayered sheets:

     - against `components` / `layout` / `base` / `tokens`: `legacy` is the last declared layer, so print still wins;
     - against the five screen sheets, now in this same layer: specificity and source order decide, exactly as when
       both sides were unlayered. A more specific screen rule (for example `css/compact.css`'s
       `.schedule-panel > .panel-head { padding: 10px 16px }` at ≥901px) still beats the generic rule below.

   Leaving this file unlayered while the screen sheets moved into a layer was measured and is NOT equivalent: an
   unlayered rule beats every layer no matter how specific it is, so print started winning conflicts it used to
   lose, and the printed day view went from 3 pages to 2 (week view text reflowed). See docs/CSS-ARCHITECTURE.md §17.

   Two consequences to keep in mind. (a) This file is now part of the flat build: engines without `@layer` drop its
   `@layer` block, so `css/flat.css` has to carry these rules — `tests/unit/print-styles.test.mjs` pins that.
   (b) For `!important` declarations the layer order is INVERTED, so an `!important` in an EARLIER layer (`base`'s
   `[hidden]{display:none!important}`, `components`' one background) now out-ranks the ones below. That was verified
   harmless across all 18 print scenes, but it is the one place where "print wins" is no longer absolute.

   Fourteen declarations here keep the `!important` they had in their old home, and the reason is measurable:
   a screen rule such as styles.css's `.schedule-panel table.schedule thead th { padding: .75em .65em }`
   (specificity 0,4,1) has a HIGHER specificity than the print rule that must undo it, so that print rule has to be
   important to win. Dropping them was tried and the printed
   week view grew from 2 pages to 3 (rows 38px → 64.6px tall). They are listed in docs/PRINT-STYLES.md §4; every
   other declaration is a plain one. Nothing else in the public front end gained an `!important` in this phase.
   The declarations themselves are byte-for-byte the ones that were verified on screen before.

   Rule order matters inside this file and follows the original cascade: the five view blocks from styles.css
   first (day/week table, duty, time-first + day duty, reflow/zoom, schedule panel), then ui-hardening's overflow
   fix, then the shell / matrix / detail / skip-link rules that used to sit in layered files. Keep
   `.time-first … { width: 85px }` above `.time-first … { width: 70px }`: the later one is what wins today. */

@media print {

/* ---------- page box and document surface (was styles.css + ui-hardening.css) ---------- */
@page { size: A4 landscape; margin: 10mm; }

html { min-width: 0; }
body { background: var(--surface-panel); font-size: 0.6875rem; }
h1 { font-size: var(--font-size-title-sm); }
.eyebrow { font-size: 0.6875rem; }

/* Screen-only chrome: navigation, filters, stats, dialogs, the detail host. */
.banner, .stats, .panel-actions, .legend, .free-form, .quick-times, .source-buttons, .search-summary { display: none !important; }
dialog { display: none !important; }
.detail-host { display: none !important; }
.skip-link { display: none; }

/* ---------- day view: the classic room x period table ---------- */
.panel { border-radius: 0; }
.table-scroll { overflow: visible; }
.schedule { min-width: 0 !important; font-size: 0.6875rem; }
.schedule th, .schedule td { padding: 3px !important; }
.schedule thead th:first-child { width: 75px; }
.schedule tbody th { position: static; width: 75px; }
.schedule thead th, .schedule tbody th { position: static; box-shadow: none; }
.event { padding: 4px; border-left-width: 2px; break-inside: avoid; }
/* Calendar "event" pills (spans class="ref-badge event") share the bare `.event` name with course
   blocks, so the rule above would reach them too. Before the consolidation ui-hardening.css loaded
   after the print block and its `.ref-badge { padding: 2px 8px }` won the tie; now that this sheet is
   last, the badge has to say it itself or the paper calendar grows 4px per pill. `break-inside` and
   `border-left-width` above are deliberately left to apply to badges as before. */
.ref-badge { padding: 2px 8px; }
.event .event-title { font-size: 0.6875rem; }
.event .event-time, .event .event-meta, .slot-label small { font-size: 0.5625rem; }
.roomlink, .slot-label { font-size: 0.6875rem; }
.empty-cell { min-height: 30px; font-size: 0.625rem; }
.list-grid { grid-template-columns: repeat(2, 1fr); }
.footnote { font-size: var(--font-size-caption); }/* pre-refactor paper value: the unlayered styles.css:42 block used to win here */
.week-summary { min-height: 50px; }
.week-summary strong { font-size: 0.6875rem; }
.week-summary small { font-size: 0.5625rem; }

/* The paper keeps the coloured blocks: colour is the schedule's own notation. */
.event, .tag, .empty-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* On paper the two layouts are one: cards are a screen affordance, the table is the document. */
.mobile-schedule { display: none !important; }
.schedule-desktop { display: block !important; }
.schedule-desktop { max-height: none; overflow: visible; scrollbar-gutter: auto; }

/* ---------- duty & keys (was styles.css) ---------- */
.duty-link, .duty-toolbar, .duty-rule-details, .duty-brief { display: none !important; }
/* Production parity (see docs/PRINT-STYLES.md §10): on paper the duty board is ONE column, exactly as production
   (main, 455a0d3) printed it. In the printing media context (≤ 900px) the screen rule
   `.duty-grid { grid-template-columns: minmax(0,1fr) }` used to win against this print block purely on source order,
   because it came later in styles.css. Phase 3e.2 moved the view rules into @layer components, the unlayered print
   block started winning instead, and the board silently became three columns → one page. This declaration reproduces
   the production paper layout again (two pages) the same way §6 reproduces the two other leaked values. */
.duty-grid { grid-template-columns: minmax(0, 1fr); }
.duty-card { break-inside: avoid; }
.duty-card, .duty-person, .duty-notice { font-size: 0.6875rem; }
.duty-shift { padding: 12px; }
.duty-person p, .duty-key, .duty-away, .duty-class-note { font-size: 0.625rem; }
.duty-notice { background: var(--surface-panel); color: var(--c-444444-text); }

/* ---------- week view with the room-name-first table + day duty (was styles.css) ---------- */
.time-first { min-width: 0 !important; }
.time-first thead th:first-child, .time-first tbody th { width: 85px; position: static; }
.day-duty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.day-duty-card { break-inside: avoid; }
.day-duty-slot dl { font-size: 0.6875rem; }
.day-duty-time { font-size: var(--font-size-caption); }
.day-duty-caveat { font-size: 0.625rem; }
.time-first .empty-cell { min-height: 35px; }

/* ---------- reflow and zoom: nothing on the page is a scroller (was styles.css) ---------- */
.table-hint { display: none; }
.stats { display: none; }
.time-first thead th:first-child, .time-first tbody th { width: 70px; }
.time-first .event { padding: 3px; }
.time-first thead .roomlink { font-size: 10px; }

/* ---------- schedule panel: the day/week table with its own toolbar (was styles.css) ---------- */
.schedule-tools, .schedule-panel .table-hint, .schedule-panel .mobile-schedule { display: none !important; }
.schedule-panel .schedule-desktop { display: block !important; max-height: none; overflow: visible; }
.schedule-panel table.schedule { font-size: 10px; min-width: 0 !important; }
.schedule-panel table.schedule thead th, .schedule-panel table.schedule tbody th { position: static; }
.schedule-panel table.schedule thead th:first-child, .schedule-panel table.schedule tbody th { width: 7em; }
.schedule-panel .schedule .event { padding: .3em; }
.schedule-panel .schedule .empty-cell { min-height: 3em; }
.schedule-panel .schedule-desktop { overflow: visible; max-height: none; }
.panel-head { padding: 10px; }

/* ---------- the application shell (was css/layout.css, @layer layout) ---------- */
.layout { display: block; height: auto; overflow: visible; }
.main { overflow: visible; height: auto; padding: 0; container-type: normal; }
.sidebar, .top-actions, .toolbar, .weekstrip, .page-footer, .mobile-filter-toggle, .filter-fields, .nav-list { display: none !important; }
.top-bar-buttons, .today-compact, .app-logo, .page-subtitle, .clock { display: none !important; }
.app-header { position: static; display: block; transform: none; border: 0; padding: 0; background: transparent; }

/* ---------- the heat matrix (was css/matrix.css, @layer components) ---------- */
.matrix-panel { overflow: visible; }
/* Not a scroller on paper, and no sticky: the grid flows and breaks across pages like any other table. */
.matrix-scroller { max-height: none; overflow: visible; }
.matrix-canvas { min-width: 0; }
/* On screen the period header rides in its own strip (`.matrix-head`) that sticks to the stage, and the table keeps a
   visually hidden copy of that row for assistive technology. On paper the strip is redundant, and the table's own
   header row takes over: putting `position` back to `static` restores its `table-header-group` display (an absolutely
   positioned thead computes to `block`), so the browser repeats it on every page the table spills onto — the single
   header row main printed, in the same place. */
.matrix-head { display: none; }
.matrix-table thead.sr-only { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
.matrix-table thead th, .matrix-table tbody th.m-room, .matrix-table tbody th.m-slotrow { position: static; }
.m-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.m-now-btn, .m-now { display: none; }

}
}