/* ---------------------------------------------------------------------------
   School register house style.
   The page is built like a bound school register: ruled rows, a red margin
   rule down the left, ink-blue headings, and monospaced figures so columns
   of marks and times line up.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --ink:        #16263B;
  --ink-soft:   #52627A;
  --paper:      #FAFAF7;
  --paper-alt:  #F2F2EC;
  --rule:       #D7DBE0;
  --rule-soft:  #E8EAED;
  --blue:       #1D4E89;
  --blue-wash:  #E7EEF7;
  --red:        #A32E2A;
  --red-wash:   #F7E9E8;
  --green:      #2E6B4F;
  --green-wash: #E6F0EA;
  --amber:      #8A6212;
  --amber-wash: #FBF1DC;

  --margin-rule: 4.5rem;

  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --------------------------------------------------------------- masthead */

.masthead {
  background: var(--ink);
  color: #fff;
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.masthead .crest {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.masthead .term {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: #A9B7C9;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.masthead .spacer { flex: 1; }
.masthead .who { font-size: 0.85rem; color: #C7D2DF; }
.masthead a { color: #fff; }

/* ------------------------------------------------------------------- nav */

.nav {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  padding: 0 1.25rem;
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
}
.nav a {
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); text-decoration: none; background: var(--paper-alt); }
.nav a.on { color: var(--blue); border-bottom-color: var(--red); }

/* ------------------------------------------------------- ruled page body */

.sheet {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem var(--margin-rule);
  position: relative;
}
/* the exercise-book margin rule — the one flourish on the page */
.sheet::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--margin-rule) - 1.4rem);
  width: 1px;
  background: var(--red);
  opacity: 0.35;
}

h1 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}
h2 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 2rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
}
.standfirst { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 1.25rem; }

/* the eyebrow sits out in the red margin */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 0.3rem;
}

/* ----------------------------------------------------------- ruled table */

table.register {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--rule);
  font-size: 0.88rem;
}
table.register caption {
  text-align: left;
  font-size: 0.78rem;
  color: var(--ink-soft);
  padding: 0 0 0.4rem;
}
table.register th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper-alt);
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.register td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
table.register tbody tr:hover { background: #FCFCF8; }
table.register td.num, table.register th.num { text-align: right; font-family: var(--mono); }
table.register td.code { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); }
.empty { padding: 1.5rem; text-align: center; color: var(--ink-soft); background: #fff;
         border: 1px dashed var(--rule); }

/* ---------------------------------------------------------------- panels */

.grid { display: grid; gap: 1rem; }
.grid.two   { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.four  { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.panel {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1rem;
}
.panel h3 {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.tally { background: #fff; border: 1px solid var(--rule); padding: 0.9rem 1rem; }
.tally .figure {
  font-family: var(--mono);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.tally .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}
.tally.flag .figure { color: var(--red); }

/* ----------------------------------------------------------------- forms */

form .field { margin-bottom: 0.9rem; }
label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}
input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=email], select, textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none;
  box-shadow: 0 0 0 2px var(--blue-wash); }
input.mark { width: 5.5rem; font-family: var(--mono); text-align: right; }
textarea { min-height: 5rem; resize: vertical; }
.inline { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.inline .field { margin-bottom: 0; }

.btn {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--blue); border-color: var(--blue); text-decoration: none; color: #fff; }
.btn.quiet { background: #fff; color: var(--ink); }
.btn.quiet:hover { background: var(--paper-alt); color: var(--ink); }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn.small { padding: 0.25rem 0.55rem; font-size: 0.78rem; }

/* ----------------------------------------------------------------- flags */

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border: 1px solid;
}
.tag.ok      { color: var(--green); border-color: var(--green); background: var(--green-wash); }
.tag.warn    { color: var(--amber); border-color: var(--amber); background: var(--amber-wash); }
.tag.bad     { color: var(--red);   border-color: var(--red);   background: var(--red-wash); }
.tag.neutral { color: var(--ink-soft); border-color: var(--rule); background: var(--paper-alt); }

.notice { padding: 0.7rem 0.9rem; margin-bottom: 1.25rem; border-left: 3px solid; font-size: 0.9rem; }
.notice.good { background: var(--green-wash); border-color: var(--green); color: #1D4733; }
.notice.bad  { background: var(--red-wash);   border-color: var(--red);   color: #7A211E; }

/* ------------------------------------------------------------- timetable */

table.grid-tt { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.78rem; }
table.grid-tt th, table.grid-tt td { border: 1px solid var(--rule); padding: 0.35rem 0.4rem;
  vertical-align: top; }
table.grid-tt th { background: var(--paper-alt); font-family: var(--mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; color: var(--ink-soft); }
table.grid-tt td.break { background: repeating-linear-gradient(45deg,
  var(--paper-alt), var(--paper-alt) 6px, #fff 6px, #fff 12px); }
.lesson { line-height: 1.25; }
.lesson .subj { font-weight: 600; display: block; }
.lesson .meta { color: var(--ink-soft); font-size: 0.72rem; }

/* ------------------------------------------------------------ login page */

.gatefold {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--ink);
  padding: 1.5rem;
}
.gatefold .card {
  width: 100%; max-width: 380px;
  background: var(--paper);
  border-top: 4px solid var(--red);
  padding: 2rem;
}
.gatefold h1 { font-size: 1.25rem; margin-bottom: 0.25rem; }

/* ---------------------------------------------------------- report cards */

.report-sheet { background: #fff; border: 1px solid var(--rule); padding: 2rem; }
.report-sheet .crest-line { font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  text-align: center; }
.report-sheet .sub { text-align: center; color: var(--ink-soft); font-size: 0.85rem;
  margin-bottom: 1.5rem; }

@media print {
  .masthead, .nav, .no-print { display: none !important; }
  .sheet { padding: 0; max-width: none; }
  .sheet::before { display: none; }
  .report-sheet { border: none; padding: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media (max-width: 640px) {
  :root { --margin-rule: 1.25rem; }
  .sheet::before { display: none; }
  table.register { font-size: 0.8rem; }
}


/* ---- pager -------------------------------------------------------------
   A long list needs to say how long it is. The count reads as a sentence;
   the links are secondary, so they sit quieter than the figure.            */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin: .85rem 0 1.25rem;
    padding-top: .6rem;
    border-top: 1px solid var(--rule);
    font-size: .84rem;
}
.pager-count { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pager-links { display: flex; gap: .15rem; flex-wrap: wrap; }
.pager-links a {
    display: inline-block;
    min-width: 1.9rem;
    padding: .2rem .45rem;
    text-align: center;
    text-decoration: none;
    color: var(--blue);
    border: 1px solid transparent;
    border-radius: 3px;
}
.pager-links a:hover { border-color: var(--rule); background: var(--paper-2, transparent); }
.pager-links a.on {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    font-weight: 600;
}
.pager-links a.off { color: var(--ink-soft); opacity: .45; pointer-events: none; }

@media print { .pager { display: none; } }