:root {
  --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --line: #e2e2e2;
  --accent: #1f4e79; --warn-bg: #fff4e5; --warn-fg: #7a4b00;
  --ok: #1a7f37; --absent: #b42318; --notposted: #8a8a8a;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, Segoe UI, sans-serif;
       color: var(--fg); background: var(--bg); }
header { border-bottom: 1px solid var(--line); padding: 12px 20px;
         display: flex; gap: 8px 20px; align-items: center; flex-wrap: wrap; }
header h1 { font-size: 16px; margin: 0; letter-spacing: -0.01em; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand a { display: block; line-height: 0; }
.brand img { height: 36px; width: auto; }
.brand span { color: var(--muted); font-weight: 500; }
/* Brand and the signed-in controls share the top row; the menu takes the
   next row on its own, flush right. */
nav { flex-basis: 100%; display: flex; justify-content: flex-end;
      align-items: baseline; flex-wrap: wrap; gap: 0 14px; }
nav a { color: var(--accent); text-decoration: none; }
nav a.active { font-weight: 600; text-decoration: underline; }
/* The System menu: a details element, so it opens without a script and
   closes on the next click of its summary. Scoped so the page-level
   details rule (bordered, for collapsible sections) does not apply. */
nav details.menu { position: relative; border: 0; padding: 0; }
nav details.menu summary { list-style: none; color: var(--accent); font-weight: 400;
                           cursor: pointer; }
nav details.menu summary::-webkit-details-marker { display: none; }
nav details.menu summary::after { content: " ▾"; font-size: 11px; }
nav details.menu summary.active { font-weight: 600; text-decoration: underline; }
nav .menu-items { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
                  min-width: 220px; background: var(--bg); border: 1px solid var(--line);
                  border-radius: 6px; box-shadow: 0 6px 18px rgba(31, 78, 121, 0.12);
                  padding: 6px 0; display: flex; flex-direction: column; }
nav .menu-items a { margin: 0; padding: 7px 14px; white-space: nowrap; }
nav .menu-items a:hover { background: #f3f6fa; }
main { padding: 20px; min-height: calc(100vh - 140px); }
footer { border-top: 1px solid var(--line); padding: 14px 20px; margin-top: 24px;
         display: flex; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.banner { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px;
          background: var(--warn-bg); color: var(--warn-fg); }
.meta { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line);
         vertical-align: top; }
th { position: sticky; top: 0; background: var(--bg); cursor: pointer;
     white-space: nowrap; }
tbody tr:hover { background: #fafafa; }
input[type=search] { padding: 6px 10px; width: 320px; max-width: 100%;
                     border: 1px solid var(--line); border-radius: 4px; }
.table-wrap { overflow-x: auto; }
details { border-bottom: 1px solid var(--line); padding: 8px 0; }
summary { cursor: pointer; font-weight: 500; }
.cell-P { color: var(--ok); font-weight: 600; }
.cell-A { color: var(--absent); font-weight: 600; }
.cell-E, .cell-T { color: var(--accent); font-weight: 600; }
.cell-none { color: var(--notposted); font-style: italic; }
form.inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
button { padding: 6px 12px; border: 1px solid var(--accent); background: var(--accent);
         color: #fff; border-radius: 4px; cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); }
#sync-progress { max-height: 240px; overflow-y: auto; }
.who { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.login { max-width: 360px; margin: 40px auto; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.login-form input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.login-or { text-align: center; color: var(--muted); margin: 8px 0; }
a.button { display: inline-block; padding: 6px 12px; border: 1px solid var(--accent);
           border-radius: 4px; text-decoration: none; color: var(--accent); }
/* Google's sign-in button, per its branding guidelines: white, a #747775
   border, the G mark at 20px on the left, 40px tall, sentence-case text. */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 12px;
              height: 48px; padding: 0 16px; border: 1px solid #747775; border-radius: 4px;
              background: #fff; color: #1f1f1f; font-weight: 600; font-size: 16px;
              text-decoration: none; cursor: pointer;
              box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
.google-btn:hover { background: #f8f9fa;
                    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15); }
.google-btn:active { background: #eceff1; box-shadow: none; }
.google-btn .google-g { width: 24px; height: 24px; }
.google-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.google-g { flex: none; }
#sync-progress:empty { display: none; }

/* --- The school cards on the dashboard --------------------------------
   Two meters per card carry the story; everything else on the card is
   quiet. Fill and track are steps of one blue, so the state reads along
   the whole bar; a low rate warms the fill, but the figure beside it is
   the claim and the colour only underlines it. */
:root {
  --meter-track: #dbe7f6; --meter-mid: #d97706; --meter-low: #b42318;
  --card-shadow: 0 1px 2px rgba(31, 78, 121, 0.08), 0 6px 18px rgba(31, 78, 121, 0.10);
}
.schools { margin: 4px 0 28px; }
.school-grid { display: grid; gap: 18px;
               grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.school-card { background: var(--bg); border-radius: 10px; padding: 18px 20px 14px;
               box-shadow: var(--card-shadow); min-width: 0;
               display: flex; flex-direction: column; }
.school-card h3 { margin: 0 0 2px; font-size: 16px; letter-spacing: -0.01em;
                  color: var(--accent); }
.school-scope { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.meter { margin-bottom: 12px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline;
              font-size: 12.5px; margin-bottom: 4px; }
.meter-head strong { font-size: 22px; font-weight: 600; line-height: 1;
                     letter-spacing: -0.02em; }
.meter-track { height: 6px; border-radius: 3px; background: var(--meter-track);
               overflow: hidden; }
.meter-fill { height: 100%; border-radius: 3px; background: var(--series-1); }
.meter-mid .meter-fill { background: var(--meter-mid); }
.meter-low .meter-fill { background: var(--meter-low); }
.meter-mid .meter-head strong { color: var(--meter-mid); }
.meter-low .meter-head strong { color: var(--meter-low); }
.school-flags { list-style: none; margin: auto 0 0; padding: 10px 0 0;
                border-top: 1px solid var(--line); font-size: 12.5px; }
.school-flags li { margin: 2px 0; }
.school-flags .flag { color: var(--absent); font-weight: 600; }
.school-flags .meta { margin: 2px 0; }

/* --- The /sessions charts ------------------------------------------------
   Series colors are a validated colorblind-safe trio (blue, orange, aqua),
   not the table's green and red: those two are near-identical to a deutan
   eye. Unknown is a neutral, not a series, and reads as no data. */
:root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
  --series-none: #d4d3cf;
}
.charts { margin-bottom: 20px; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }
figure.chart { margin: 0; padding: 12px 14px; border: 1px solid var(--line);
               border-radius: 6px; min-width: 0; }
figure.chart figcaption { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px;
                color: var(--muted); margin-bottom: 6px; }
.chart-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
             margin-right: 5px; vertical-align: -1px; }
.chart-svg { display: block; width: 100%; height: auto; font-size: 11px; }
.chart-scroll { max-height: 400px; overflow-y: auto; }
.chart-gridline { stroke: var(--line); stroke-width: 1; }
.chart-axis, .chart-value { fill: var(--muted); }
.chart-label { fill: var(--fg); }
.s-posted, .s-present { fill: var(--series-1); background: var(--series-1); }
.s-unposted, .s-absent { fill: var(--series-2); background: var(--series-2); }
.s-excused { fill: var(--series-3); background: var(--series-3); }
.s-unknown { fill: var(--series-none); background: var(--series-none); }
.s-count { fill: var(--series-1); background: var(--series-1); }
.chart-hit { fill: transparent; cursor: default; }
.chart-hit:hover { fill: rgba(0, 0, 0, 0.04); }
.chart-tip { position: fixed; z-index: 10; pointer-events: none; padding: 8px 10px;
             background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); font-size: 12px;
             max-width: 260px; }
.chart-tip-title { font-weight: 600; margin-bottom: 4px; }
.chart-tip-row { white-space: nowrap; }

/* --- The attendance register, on screen and on paper ------------------ */

.report-section { margin: 0 0 14px; }
.report-section h4 { margin: 12px 0 4px; font-size: 13px; }
.register { table-layout: auto; font-size: 12px; }
.register th, .register td { padding: 3px 6px; border: 1px solid var(--line); }
.register th { position: static; }
.register .student { text-align: left; white-space: normal; min-width: 150px; }
.register .num { text-align: center; white-space: nowrap; }

/* The date turned on its side. A horizontal date needs about 34px of
   column; rotated it needs the width of one glyph, which is what lets a
   full term's sessions sit next to each other. */
.register th.session { vertical-align: bottom; padding: 2px; }
.register th.session span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; font-weight: 600; font-size: 11px;
}
.register td.session { text-align: center; padding: 3px 2px; }

@media print {
  @page { size: letter landscape; margin: 12mm; }

  /* Screen furniture. None of it belongs on a printed register, and left
     in it eats the top of every sheet. */
  header, nav, form, footer, #sync-progress, .banner, .no-print, .charts { display: none !important; }
  main { padding: 0; }
  body { font-size: 10pt; }

  /* One advisor per sheet. The first must not push out a blank leading
     page, which is what page-break-before on every block would do. */
  .advisor { page-break-before: always; }
  .advisor:first-of-type { page-break-before: avoid; }

  /* Keep a course's heading with at least the start of its table. */
  .report-section { page-break-inside: avoid; }
  .register thead { display: table-header-group; }
  .register tr { page-break-inside: avoid; }

  a[href]::after { content: ""; }
  .register th, .register td { border: 1px solid #999; }
  .register { font-size: 8pt; }
}