/* ============================================================================
   sections.css — layouts that belong to exactly one section and are not worth
   generalising into components.css.

   Anything used by two or more sections belongs in components.css and in its
   INVENTORY instead. If you find yourself copying a block down here, that is
   the signal to promote it.

   Rules here are scoped with [data-sec="…"], which app.js sets on the view
   host. That means a section can be laid out without inventing a class name
   the views would then have to know about — the calendar below is styled
   without views/calendar.js changing at all.

   INVENTORY
     [data-sec="attendance"]  .seg-btn[data-value]  semantic mark colours
     [data-sec="assessments"] .seg-btn[data-value]  semantic rubric colours
     [data-sec="calendar"]    .table                fixed seven-column month grid
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Attendance marking

   The selected mark takes its SEMANTIC colour, not the section's accent.

   tokens.css states the rule and this is the place it matters most: Present has
   to be green, Absent red and Tardy amber, whatever colour the teacher themed
   her binder. Letting these inherit --sec means the whole register turns one
   colour and stops being scannable — a row of identical brown pills tells you
   nothing at a glance, which is the entire job of this page.

   Scoped by [data-value] so views/attendance.js needs no extra classes.
   --------------------------------------------------------------------------- */

[data-sec="attendance"] .seg-btn.is-on { color: #fff; }
[data-sec="attendance"] .seg-btn[data-value="P"].is-on { background: var(--att-p); }
[data-sec="attendance"] .seg-btn[data-value="A"].is-on { background: var(--att-a); }
[data-sec="attendance"] .seg-btn[data-value="T"].is-on { background: var(--att-t); }
[data-sec="attendance"] .seg-btn[data-value="E"].is-on { background: var(--att-e); }
[data-sec="attendance"] .seg-btn[data-value="H"].is-on { background: var(--att-h); }

/* Unselected marks keep a hint of their own colour, so the five options are
   already distinguishable before you touch them. */
[data-sec="attendance"] .seg-btn[data-value="P"] { color: var(--att-p); }
[data-sec="attendance"] .seg-btn[data-value="A"] { color: var(--att-a); }
[data-sec="attendance"] .seg-btn[data-value="T"] { color: var(--att-t); }
[data-sec="attendance"] .seg-btn[data-value="E"] { color: var(--att-e); }
[data-sec="attendance"] .seg-btn[data-value="H"] { color: var(--att-h); }

/* ---------------------------------------------------------------------------
   Rubric levels

   Same principle as attendance above, and the same reason: E/D/P/A is a LADDER,
   and it only reads as one if the four options keep their own colours. Letting
   the selected level inherit --sec turns a class of twenty-five choices into
   twenty-five identical pills, which is precisely the information the page
   exists to show.
   --------------------------------------------------------------------------- */

[data-sec="assessments"] .seg-btn.is-on { color: #fff; }
[data-sec="assessments"] .seg-btn[data-value="E"].is-on { background: var(--level-e); }
[data-sec="assessments"] .seg-btn[data-value="D"].is-on { background: var(--level-d); }
[data-sec="assessments"] .seg-btn[data-value="P"].is-on { background: var(--level-p); }
[data-sec="assessments"] .seg-btn[data-value="A"].is-on { background: var(--level-a); }

[data-sec="assessments"] .seg-btn[data-value="E"] { color: var(--level-e); }
[data-sec="assessments"] .seg-btn[data-value="D"] { color: var(--level-d); }
[data-sec="assessments"] .seg-btn[data-value="P"] { color: var(--level-p); }
[data-sec="assessments"] .seg-btn[data-value="A"] { color: var(--level-a); }

/* ---------------------------------------------------------------------------
   Monthly calendar

   The month is built as a real <table> — seven columns, one row per week, a
   header row that repeats — so the same markup works on screen, scrolls inside
   .table-wrap on a phone, and prints as a wall calendar with no second code
   path.

   The one thing a table will not do on its own is make a GRID. Auto table
   layout sizes each column to its content, so a Thursday carrying "18:00 Back
   to school night" becomes three times the width of a Wednesday and the day
   numbers stop lining up into columns — which reads as a rendering bug even
   though the dates are correct. table-layout:fixed with seven equal columns is
   what turns it back into a calendar.
   --------------------------------------------------------------------------- */

[data-sec="calendar"] .table {
  table-layout: fixed;
  width: 100%;
  /* A month at seven equal columns needs room; below this it scrolls inside
     .table-wrap rather than crushing each day to an unreadable sliver. */
  min-width: 46rem;
}

[data-sec="calendar"] .table th,
[data-sec="calendar"] .table td {
  width: calc(100% / 7);
  vertical-align: top;
  padding: var(--sp-2);
}

/* Each day is a tall box, so a week reads as a row of cells rather than a line
   of text. Content stacks from the top and overflow scrolls inside the day. */
[data-sec="calendar"] .table td > .stack--tight {
  min-height: 5.5rem;
  align-items: flex-start;
}

/* Chips inside a day must wrap rather than force the column wider — with
   table-layout:fixed an over-wide chip would otherwise just overflow. */
[data-sec="calendar"] .table .chip,
[data-sec="calendar"] .table .pill {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}

/* Days from the neighbouring months stay visible but recede, so the shape of
   the month is obvious at a glance. */
[data-sec="calendar"] .table .btn--ghost {
  opacity: .45;
}

@media (max-width: 700px) {
  [data-sec="calendar"] .table td > .stack--tight { min-height: 4rem; }
  [data-sec="calendar"] .table th,
  [data-sec="calendar"] .table td { padding: var(--sp-1); }
}

/* On paper the grid gets the whole page and the boxes get taller, because the
   point of a printed month is the writing space. */
@media print {
  [data-sec="calendar"] .table { min-width: 0; }
  [data-sec="calendar"] .table td > .stack--tight { min-height: 1.05in; }

  /* Insurance, not the fix. views/calendar.js no longer marks this table
     wide:true, so it prints portrait with far more vertical room and should
     fit one page on its own. But print.css's generic rule makes .table-wrap
     an unbreakable block (break-inside: avoid) — fine for a small data table,
     wrong for a calendar, where a month packed with events could still be
     taller than one page. Letting it break BETWEEN WEEK ROWS if it must is
     what stops that case from reproducing the exact bug this replaces: the
     whole grid refusing to fit, getting punted whole onto the next page, and
     leaving the page behind it looking blank. */
  [data-sec="calendar"] .table-wrap { break-inside: auto; }

  /* Every month starts on its own fresh page. Verified against a real
     rendered PDF: without this, "September 2026" printed at the bottom of
     August's page while September's actual grid started on the next one —
     `h2 { break-after: avoid }` is a hint the fragmentation algorithm is free
     to drop once auto-breaking is allowed anywhere inside the card (which the
     rule above needs for a genuinely long month), so the heading and its own
     table could still land on different pages. A forced break-before removes
     the ambiguity entirely, and it is also simply what a buyer printing a
     wall calendar wants: one month per sheet. break-before is a no-op on
     whichever card happens to be first, so this needs no special-casing. */
  [data-sec="calendar"] .print-card { break-before: page; }
}