/* ==========================================================================
   St. Martin de Porres — Catechism System
   Design system v1
   --------------------------------------------------------------------------
   Load order: this file only. Do not add per-page CSS; extend the tokens
   and components below so every module stays consistent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPEFACES
   Self-hosted. Download the .woff2 files into /public/fonts/ so no request
   ever leaves the server — the privacy notice given to families promises
   that student data is not shared with third parties, and that promise is
   easier to keep when the pages call nothing external.
   Every rule below degrades to a system stack if the files are absent.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/EBGaramond-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/EBGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* --- Core palette ---------------------------------------------------
     Carried over from the printed consent packet and photo sheets already
     given to families, so screen and paper read as one system. */
  --ink:        #16233F;  /* primary text, headers, primary buttons        */
  --ink-deep:   #0E1730;  /* hover state for ink surfaces                  */
  --ink-soft:   #47588044; /* not for text — hairlines over ink            */
  --slate:      #4A5B82;  /* secondary text, labels                        */
  --slate-pale: #7A88A6;  /* tertiary text, timestamps, disabled           */
  --rule:       #D3DAE8;  /* borders, dividers                             */
  --rule-soft:  #E7ECF4;  /* interior dividers, table rows                 */
  --field:      #F5F7FB;  /* input backgrounds                             */
  --paper:      #FFFFFF;  /* cards                                         */
  --surface:    #EDF0F6;  /* page background                               */

  /* --- Rubric ---------------------------------------------------------
     In a missal, rubrics are the instructions printed in red beside the
     text — they tell you what to do, never what to say. This palette uses
     one restrained warm tone for the same job: section labels and
     instructions. It is never used for errors, so it never alarms. */
  --rubric:      #8A6A2B;
  --rubric-pale: #F3EBD9;

  /* --- Status ---------------------------------------------------------
     Conventional and unambiguous. Volunteers should not have to learn a
     colour language to read a screen. */
  --ok:        #1C6B45;
  --ok-pale:   #E3F1E9;
  --warn:      #8A5B12;
  --warn-pale: #FBEFD9;
  --stop:      #9E2F1E;
  --stop-pale: #FBE9E6;
  --info:      #2F4B86;
  --info-pale: #E6ECF8;

  /* --- Level colours ---------------------------------------------------
     Categorical only: the three catechism levels. Distinguishable for the
     most common forms of colour blindness because each also carries a
     text label — never rely on the colour alone. */
  --level-pre:     #2F6E8F;
  --level-comm:    #6A4E9C;
  --level-confirm: #1C6B45;

  /* --- Type -----------------------------------------------------------
     Display: EB Garamond. A book face for a parish — it has true small
     caps, which the section labels use.
     UI: IBM Plex Sans. Open apertures, legible at 13px for volunteers
     reading rosters on a laptop.
     Data: IBM Plex Mono. Student numbers, times and IDs sit in tabular
     figures so columns align and digits cannot be misread. */
  --font-display: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui:      'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — 1.25 ratio from a 16px base, rounded for screen. */
  --t-display: 30px;
  --t-title:   23px;
  --t-section: 20px;
  --t-body:    16px;
  --t-small:   14px;
  --t-micro:   12.5px;
  --t-label:   11px;   /* small caps, letterspaced */

  /* Spacing — 4px base. Only these steps. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --radius:     10px;
  --radius-sm:  7px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(22, 35, 63, .05);
  --shadow-lift: 0 4px 16px rgba(22, 35, 63, .10);

  --max-width: 1000px;
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--info); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0 0 var(--s2);
}

.title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--s2);
}

.section-title {
  font-family: var(--font-display);
  letter-spacing: -.003em;
  font-size: var(--t-section);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--s1);
}

.lede {
  color: var(--slate);
  font-size: var(--t-small);
  max-width: 68ch;
  margin: 0 0 var(--s5);
}

.hint  { color: var(--slate); font-size: var(--t-small); margin: 0 0 var(--s4); }
.meta  { color: var(--slate-pale); font-size: var(--t-micro); }
.data  { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* The rubric label. Small caps in the display face, letterspaced.
   Marks what a block of the screen is for — the one decorative move in
   the system, and it earns its place by replacing a heavier heading. */
.rubric {
  font-family: var(--font-display);
  font-variant: small-caps;
  font-feature-settings: 'smcp' 1;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--rubric);
  margin: 0 0 var(--s2);
  display: block;
}
/* Fallback when small caps are unavailable. */
@supports not (font-variant: small-caps) {
  .rubric { text-transform: uppercase; font-size: 10.5px; }
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */

.masthead { background: var(--ink); color: #fff; }
.masthead__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}
.masthead__mark { display: flex; flex-direction: column; gap: 1px; }
.masthead__parish {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #B9A574; font-weight: 600;
}
.masthead__name {
  font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.1;
}
.masthead nav { display: flex; align-items: center; gap: var(--s1); font-size: var(--t-small); }
.masthead nav a, .masthead nav button {
  color: #C6CFE2; text-decoration: none; font: inherit; background: none;
  border: none; cursor: pointer; padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
}
.masthead nav a:hover, .masthead nav button:hover { background: rgba(255,255,255,.10); color: #fff; }
.masthead nav a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; font-weight: 500; }

.page { max-width: var(--max-width); margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.card__head { margin-bottom: var(--s4); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid .span-all { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .grid, .grid--3 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.row--end { justify-content: flex-end; }

.divider { border: none; border-top: 1px solid var(--rule-soft); margin: var(--s5) 0; }

/* --------------------------------------------------------------------------
   6. FORMS
   -------------------------------------------------------------------------- */

.field { display: block; }
.field + .field { margin-top: var(--s4); }
.grid > .field + .field,
.grid--3 > .field + .field { margin-top: 0; }

.field__label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: var(--s1);
}
.field__label .req { color: var(--stop); margin-left: 2px; }
.field__label .es {
  display: block; font-weight: 400; font-size: var(--t-micro);
  color: var(--slate); font-style: italic; margin-top: 1px;
}
.field__note { display: block; font-size: var(--t-micro); color: var(--slate); margin-top: var(--s1); }
.field__error { display: block; font-size: var(--t-micro); color: var(--stop); font-weight: 500; margin-top: var(--s1); }

input[type=text], input[type=password], input[type=email],
input[type=tel], input[type=number], input[type=date],
select, textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-body);      /* 16px stops iOS zooming on focus */
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 10px var(--s3);
  transition: border-color .12s ease, background-color .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: #B9C3D6; }
input:focus, select:focus, textarea:focus { background: var(--paper); border-color: var(--info); }
input[data-format=data], .input--data { font-family: var(--font-data); font-size: var(--t-small); }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
input.is-invalid, select.is-invalid { border-color: var(--stop); background: var(--stop-pale); }
textarea { min-height: 88px; resize: vertical; }

.choice {
  display: flex; align-items: flex-start; gap: var(--s3);
  cursor: pointer; font-size: var(--t-small);
  border: 1px solid var(--rule); background: var(--field);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
}
.choice input { width: 18px; height: 18px; accent-color: var(--info); margin: 2px 0 0; flex: none; }
.choice:has(input:checked) { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.choice strong { display: block; font-weight: 600; }
.choice .field__note { margin-top: 2px; }

/* --------------------------------------------------------------------------
   7. BUTTONS
   Label rule: name the action, not the mechanism. "Save settings",
   "Run connection test" — never "Submit" or "OK". The label that starts
   an action is the label that confirms it.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 11px var(--s5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink);
  background: var(--ink); color: #fff;
  cursor: pointer; text-decoration: none;
  transition: background-color .12s ease;
}
.btn:hover { background: var(--ink-deep); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--quiet { background: transparent; color: var(--slate); border-color: var(--rule); }
.btn--quiet:hover { background: var(--field); color: var(--ink); }

.btn--danger { background: transparent; color: var(--stop); border-color: #E2BCB5; }
.btn--danger:hover { background: var(--stop-pale); color: var(--stop); }

.btn--small { font-size: var(--t-small); padding: 7px var(--s4); }
.btn--wide { width: 100%; }

/* --------------------------------------------------------------------------
   8. FEEDBACK
   Messages state what happened and what to do next. They do not apologise
   and they are never vague.
   -------------------------------------------------------------------------- */

.notice {
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  font-size: var(--t-small);
  margin-bottom: var(--s4);
  border: 1px solid;
}
.notice--ok   { background: var(--ok-pale);   border-color: #B7DCC8; color: var(--ok); }
.notice--warn { background: var(--warn-pale); border-color: #E8D2A4; color: var(--warn); }
.notice--stop { background: var(--stop-pale); border-color: #E2BCB5; color: var(--stop); }
.notice--info { background: var(--info-pale); border-color: #C2D0EC; color: var(--info); }

/* Rubric block: guidance, not alarm. The left rule echoes a missal margin. */
.rubric-note {
  font-size: var(--t-small);
  color: #6B5322;
  background: var(--rubric-pale);
  border-left: 3px solid var(--rubric);
  padding: var(--s3) var(--s4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 var(--s4);
}

.tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 3px var(--s2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.tag--ok   { background: var(--ok-pale);   color: var(--ok); }
.tag--warn { background: var(--warn-pale); color: var(--warn); }
.tag--stop { background: var(--stop-pale); color: var(--stop); }
.tag--mute { background: var(--rule-soft); color: var(--slate); }

/* Level tags always carry their name as text; colour is reinforcement. */
.tag--pre     { background: #E4EFF5; color: var(--level-pre); }
.tag--comm    { background: #EDE7F6; color: var(--level-comm); }
.tag--confirm { background: var(--ok-pale); color: var(--level-confirm); }

/* Check list used by diagnostics. */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-small);
}
.checklist li:last-child { border-bottom: none; }
.mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.mark--y { background: var(--ok); }
.mark--n { background: var(--stop); }
.mark--wait { background: var(--slate-pale); }

/* --------------------------------------------------------------------------
   9. TABLES
   Data tables carry roster and attendance records. Numbers use the mono
   face with tabular figures so columns line up and a 1 cannot pass for a 7.
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
table { border-collapse: collapse; width: 100%; font-size: var(--t-small); }
th, td { text-align: left; padding: 10px var(--s3); vertical-align: top; }
thead th {
  background: #E3E8F2;
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
tbody tr:hover td { background: var(--field); }
td.num, th.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
td.right, th.right { text-align: right; }

.empty {
  padding: var(--s7) var(--s5);
  text-align: center;
  color: var(--slate);
  font-size: var(--t-small);
}
.empty strong { display: block; color: var(--ink); font-size: var(--t-body); margin-bottom: var(--s1); }

/* --------------------------------------------------------------------------
   10. UTILITIES — keep this list short on purpose.
   -------------------------------------------------------------------------- */

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Overrides v2 — 2026-08-15
   The rubric labels were set at 11px, which broke rule 1 of this system
   ("nothing below 12.5px"). Small caps in EB Garamond also draw smaller
   than the nominal size, so 11px read as about 8px. Raised to 14px and
   darkened for contrast.
   ========================================================================== */

.rubric {
  font-size: 14px;
  letter-spacing: .13em;
  color: #7A5C22;
  margin-bottom: var(--s2);
}

.masthead__parish { font-size: 12px; letter-spacing: .14em; }