/* ============================================================================
   base.css — reset, type roles, tables, form controls
   First ported from Docs/ui-mockup.html; the app and /dev/gallery are the design of
   record since the October 2026 modernisation pass.
   ============================================================================ */


/* Self-hosted: no third-party request from pages that render mums' names and
   allergy data, and it still works when the hall Wi-Fi is poor. */
@font-face{
  font-family:"Marcellus"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/marcellus-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibmplexsans-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/ibmplexsans-500.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/ibmplexsans-600.woff2") format("woff2");
}


*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:14.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Marcellus is the brand's voice and only reads well large: page and section titles. Card
   and group headings are the UI's own sans at a heavier weight. Plex is hosted at 400/500/600,
   so nothing asks for 700 — a browser would fake it. */
h1,h2,h3{font-weight:400; text-wrap:balance; margin:0}
h1,h2{font-family:var(--font-title)}
h1{font-size:30px; line-height:1.15; letter-spacing:.005em}
h2{font-size:20px; line-height:1.25}
h3{font-family:var(--font-body); font-size:15px; font-weight:600; line-height:1.35}
a{color:inherit}
button{font:inherit; color:inherit}
/* No border-radius here: setting one on :focus-visible reshaped whatever had focus. */
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* numerals, labels, chrome */
.num,td.num,th,.eyebrow,.pill,.nav a,.tab,.btn,.stat b,.meta,input,select,.chip,.cell{
  font-family:var(--font-data); font-variant-numeric:tabular-nums;
}
.eyebrow{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--label); font-weight:500;
}
.meta{font-size:12.5px; color:var(--muted)}


table{width:100%; border-collapse:collapse; font-size:14px}
.tablewrap{
  overflow-x:auto; border:1px solid var(--hair); border-radius:var(--radius);
  background:var(--white); box-shadow:var(--shadow-1);
}
/* Sentence case at 12px rather than 11px spaced capitals: the shouting header row was a large
   part of what made every table look like a 2010 spreadsheet. */
th{
  text-align:left; font-size:12px; letter-spacing:.01em;
  color:var(--label); font-weight:500; padding:10px var(--s4); border-bottom:1px solid var(--hair);
  white-space:nowrap; background:color-mix(in srgb,var(--paper) 55%,var(--white));
}
td{padding:11px var(--s4); border-bottom:1px solid var(--hair); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:color-mix(in srgb,var(--blush) 12%,transparent)}
td.num,th.num{text-align:right}
td.ctr,th.ctr{text-align:center}
/* Alignment rule for every table: text left, numbers/dates/money right,
   short flags and status pills centred, action buttons right. */
.name{font-weight:600}
.sub{font-size:12.5px; color:var(--muted); font-family:var(--font-data)}

/* `input:not([type])` is not fussiness: Blazor's <InputText> emits a bare <input> with no
   type attribute, so every one of them fell through to the browser's own white box and
   was unreadable in dark.
   `password` was missing from this list for seven phases, which is the same defect the
   comment above describes, on the first screen anybody sees: a white 24px browser box under
   a correctly themed 31px email field, in both themes. Enumerating types is what let that
   happen — one omission is invisible — but narrowing it now would sweep in checkboxes and
   radios, which are deliberately native here. So: the list, with the hole closed. */
input[type=search],input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=date],input[type=time],input[type=password],input:not([type]),select{
  border:1px solid var(--control-border); background:var(--white); color:var(--ink);
  border-radius:var(--radius-s); padding:7px 11px; font-size:13.5px; line-height:20px; min-width:0;
  transition:border-color .12s, box-shadow .12s;
}
input[type=search]{width:260px; max-width:100%}
/* A text box says it has focus with a soft ring as well as the outline, which is the cue
   people now expect from a field. The outline stays: the ring alone is under 3:1. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 18%,transparent);
}
@media (prefers-reduced-motion:reduce){input,select,textarea{transition:none}}