/* =========================================================================
   Sobotnia: app.css
   Direction A, "Ink and paper", with a Polish flag accent.
   One file, no build step, no inline styles (strict CSP). Mobile-first.
   Sections:
     1. Tokens          5. Navigation          9. Tables and lists
     2. Base            6. Page furniture     10. Feedback (alerts, empty, confirm)
     3. Typography      7. Buttons            11. Register (phone)
     4. App shell       8. Forms              12. Feature screens, utilities, print
   Breakpoints (custom properties can't be used in media queries, so they are
   written out literally): 600px small tablet, 900px sidebar, 1200px wide.
   ========================================================================= */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Neutrals */
  --paper: #faf7f2;          /* page background */
  --surface: #ffffff;        /* cards, inputs, rows */
  --surface-sunk: #f2eee6;   /* table headers, quiet panels */
  --ink: #1f2433;            /* body text: 14.5:1 on paper, 15.5:1 on white */
  --ink-muted: #585d6b;      /* secondary text: 6.2:1 on paper, 6.6:1 on white */
  --line: #ddd6ca;           /* decorative dividers only (not for controls) */
  --line-strong: #858072;    /* input and control borders: 3.9:1 on white */

  /* Brand */
  --navy: #1f3a5f;           /* primary: white on navy 11.5:1 */
  --navy-dark: #152a46;      /* hover/pressed */
  --navy-tint: #e9eef5;
  --flag-white: #ffffff;     /* decoration only */
  --flag-red: #dc143c;       /* decoration only: never text, never meaning */

  /* Meaning. Always paired with an icon and a word. */
  --present: #1e6b3a;        --present-tint: #e5f1e9;   /* = paid, success */
  --absent: #a3271f;         --absent-tint: #f8e6e3;    /* = in arrears, error, danger */
  --late: #8a5300;           --late-tint: #f8eddb;      /* = part-paid, warning */
  --info: var(--navy);       --info-tint: var(--navy-tint);

  /* Section colours: wayfinding only (icon tiles, page-title icon, current tab).
     Never on buttons, links or badges, and never the only cue: every use sits
     next to an icon and a word. Kept clear of green, red and amber, which mean
     present, absent and late. All pass 4.5:1 on white, paper and their tint. */
  --sec-registers: #245a96;  --sec-registers-tint: #e6eef8;   /* Dzienniki: blue, 7.0:1 */
  --sec-families: #674a8f;   --sec-families-tint: #efeaf6;    /* Rodziny: plum, 7.1:1 */
  --sec-pupils: #156a74;     --sec-pupils-tint: #e2f0f1;      /* Uczniowie: teal, 6.3:1 */
  --accent: var(--navy);     --accent-tint: var(--navy-tint); /* everything else */

  --focus: #1f3a5f;          /* 3px outline, offset 2px, with a white halo */
  --focus-on-dark: #ffffff;

  /* Type */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Iowan Old Style", Charter, "Bitstream Charter", Georgia, "Noto Serif", "DejaVu Serif", serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;   /* 13px: meta only, never the only place a fact appears */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-md: 1rem;        /* 16px: body, inputs (keeps iOS from zooming) */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.375rem;    /* 22px: h2 */
  --fs-2xl: 1.75rem;    /* 28px: h1 on phone */
  --fs-3xl: 2.125rem;   /* 34px: h1 on desktop, big numbers */

  --lh-tight: 1.2;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Space: 4px steps */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --gutter: 1rem;   /* page side padding on phones */

  /* Sizes */
  --tap: 2.75rem;        /* 44px minimum target */
  --tap-lg: 3.5rem;      /* 56px register buttons */
  --control-h: 3rem;     /* 48px inputs and buttons */
  --measure: 66ch;       /* readable line length */
  --content-max: 72rem;
  --sidebar-w: 15rem;
  --topbar-h: 3.5rem;
  --tabbar-h: 4rem;
  --stripe-h: 6px;       /* the biało-czerwona band: 3px + 3px */

  /* Shape */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-pill: 999px;
  --border: 1px solid var(--line);

  /* Elevation: used sparingly; most separation is borders */
  --sh-1: 0 1px 2px rgb(31 36 51 / 0.08);
  --sh-2: 0 4px 14px rgb(31 36 51 / 0.12);
  --sh-3: 0 12px 32px rgb(31 36 51 / 0.18);

  --z-tabbar: 20;  --z-topbar: 30;  --z-menu: 40;
}

/* 2. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` must win over a component's own display (.alert is a grid), or a hidden message shows. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
svg.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.icon--sm { width: 1rem; height: 1rem; }
svg.icon--lg { width: 1.5rem; height: 1.5rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--navy-dark); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--surface);
}

::selection { background: var(--navy-tint); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-2); top: -10rem; z-index: 100;
  background: var(--surface); color: var(--navy); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); box-shadow: var(--sh-2); font-weight: var(--fw-bold);
}
.skip-link:focus { top: var(--sp-2); }

/* 3. Typography ------------------------------------------------------------ */

h1, h2, h3 { font-family: var(--font-head); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); text-wrap: balance; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-bold); margin: 0 0 var(--sp-2); }
@media (min-width: 900px) { h1 { font-size: var(--fs-3xl); } }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); text-wrap: pretty; }
small, .text-sm { font-size: var(--fs-sm); }
.text-muted { color: var(--ink-muted); }
.lead { font-size: var(--fs-lg); color: var(--ink-muted); }
.num, .money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money--neg { color: var(--absent); }
.code { font-family: var(--font-mono); letter-spacing: 0.05em; }
.overline { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 var(--sp-1); }
.draft-note { font-size: var(--fs-xs); color: var(--late); font-weight: var(--fw-semibold); }
hr { border: 0; border-top: var(--border); margin: var(--sp-5) 0; }

/* 4. App shell ------------------------------------------------------------- */
/* Phone: topbar, content, fixed bottom tab bar.
   900px+: topbar, sidebar + content. */

.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  background: var(--navy); color: #fff;
}
/* The flag band: white over red, under the navy bar. */
.topbar::after, .flag-band {
  content: "";
  display: block;
  height: var(--stripe-h);
  background: linear-gradient(var(--flag-white) 0 50%, var(--flag-red) 50% 100%);
}
.topbar__inner {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--topbar-h);
  padding: 0 var(--sp-2) 0 var(--gutter);
  max-width: none;
}
.topbar :focus-visible { outline-color: var(--focus-on-dark); box-shadow: none; }

.wordmark {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap);
  color: #fff; text-decoration: none;
  font-family: var(--font-head); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: 0.01em;
}
.wordmark:hover { color: #fff; }
/* The logo mark: static/brand/sobotnia-mark-small.svg on its white tile, as an <img> (CSP-safe) */
.wordmark__mark { width: 2rem; height: 2rem; flex: none; }
.wordmark__text { display: none; }
.topbar__school {
  flex: 1; min-width: 0;
  font-size: var(--fs-sm); color: #dfe6f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Phones show the school's short name (falls back to the full name in the
   template); 600px+ shows the full name. */
.topbar__school-full { display: none; }
@media (min-width: 600px) {
  .wordmark__text { display: inline; }
  .topbar__school { padding-left: var(--sp-3); border-left: 1px solid rgb(255 255 255 / 0.3); }
  .topbar__school-short { display: none; }
  .topbar__school-full { display: inline; }
}

/* Keep the account menu at the right even when there's no school name to fill the bar,
   so its panel (anchored to the right edge) stays on screen */
.topbar .menu { margin-left: auto; }

/* Account menu: <details>, so it works without JavaScript */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-3);
  border-radius: var(--r-sm); color: #fff;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: rgb(255 255 255 / 0.1); }
.menu__name { display: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
@media (min-width: 600px) { .menu__name { display: inline; } }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: var(--z-menu);
  width: min(18rem, calc(100vw - 2 * var(--sp-2)));
  background: var(--surface); color: var(--ink);
  border: var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: var(--sp-2);
}
.menu__who { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: var(--border); margin-bottom: var(--sp-2); }
.menu__who strong { display: block; }
.menu__who span { font-size: var(--fs-sm); color: var(--ink-muted); }
.menu__panel ul { list-style: none; margin: 0; padding: 0; }
.menu__panel a, .menu__panel button {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--tap); padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer;
}
.menu__panel a:hover, .menu__panel button:hover { background: var(--surface-sunk); }
.menu__panel form { margin: 0; }
.menu__panel :focus-visible { outline-color: var(--focus); }

.shell { display: block; }
.main {
  padding: var(--sp-5) var(--gutter) calc(var(--tabbar-h) + var(--sp-7));
  max-width: var(--content-max);
}
.main--narrow { max-width: 40rem; margin-inline: auto; }
@media (min-width: 900px) {
  :root { --gutter: 2rem; }
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h) - var(--stripe-h)); }
  .main { padding: var(--sp-6) var(--gutter) var(--sp-8); }
}
/* Focused task pages (register, login) hide the tab bar and sidebar */
.is-focused .main { padding-bottom: var(--sp-7); }
.is-focused .shell { display: block; }

/* 5. Navigation ------------------------------------------------------------ */

.sidenav { display: none; }
@media (min-width: 900px) {
  .sidenav {
    display: block;
    background: var(--surface); border-right: var(--border);
    padding: var(--sp-4) var(--sp-3);
  }
  .is-focused .sidenav { display: none; }
}
.sidenav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sidenav a {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
.sidenav a:hover { background: var(--surface-sunk); }
.sidenav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.sidenav .icon { color: var(--ink-muted); }
.sidenav a[aria-current="page"] .icon { color: var(--accent); }
.sidenav__section { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); padding: var(--sp-4) var(--sp-3) var(--sp-1); }

/* Phone tab bar: at most 4 destinations + More */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 8px rgb(31 36 51 / 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 900px) { .tabbar { display: none; } }
.is-focused .tabbar { display: none; }
.tabbar > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tabbar a, .tabbar summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tabbar-h); padding: var(--sp-1) 2px;
  color: var(--ink-muted); text-decoration: none; cursor: pointer; list-style: none;
  font-size: 0.75rem; font-weight: var(--fw-semibold); line-height: 1.1; text-align: center;
  overflow-wrap: anywhere; hyphens: auto;
}
.tabbar summary::-webkit-details-marker { display: none; }
.tabbar > ul > li > a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.tabbar details { position: static; }
.tabbar details[open] > summary:not(.is-current) { color: var(--navy); }
/* The current page lives in More: the More tab shows as current */
.tabbar summary.is-current { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.tabbar > ul { background: var(--surface); }  /* keeps the tab bar above the scrim */
.tabbar .menu__panel { --accent: var(--navy); --accent-tint: var(--navy-tint); }  /* rows use their own section colour */

/* "More" (Więcej): a bottom sheet of ordinary rows above the tab bar.
   The open summary's ::before is a full-screen scrim; tapping it closes the
   <details>, so it still needs no JavaScript. */
.tabbar details[open] > summary::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgb(31 36 51 / 0.35); cursor: default;
}
.tabbar .menu__panel {
  position: absolute; left: 0; right: 0; top: auto; bottom: 100%;
  width: auto; max-height: calc(100vh - var(--topbar-h) - var(--tabbar-h) - var(--sp-5)); overflow-y: auto;
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  border: 0; border-top: var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -8px 24px rgb(31 36 51 / 0.16);
}
.tabbar .menu__panel::before {  /* grab handle, decoration only */
  content: ""; display: block; width: 2.5rem; height: 4px; margin: var(--sp-1) auto var(--sp-2);
  border-radius: var(--r-pill); background: var(--line);
}
.tabbar .menu__panel a {
  flex-direction: row; justify-content: flex-start; gap: var(--sp-3);
  min-height: var(--tap-lg); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); text-align: left; color: var(--ink);
  border-radius: var(--r-md); box-shadow: none;
}
.tabbar .menu__panel a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); }

/* Back link for sub-pages */
.backlink {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: var(--tap); margin: calc(-1 * var(--sp-3)) 0 var(--sp-2) calc(-1 * var(--sp-2)); padding: 0 var(--sp-2);
  font-weight: var(--fw-semibold); text-decoration: none;
}
.backlink:hover { text-decoration: underline; }

/* 6. Page furniture -------------------------------------------------------- */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-5); }
.page-head > div:first-child { min-width: 0; flex: 1 1 18rem; }
.page-head h1 { margin-bottom: var(--sp-1); }
.page-head p { margin: 0; color: var(--ink-muted); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.section { margin-top: var(--sp-6); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.section__head h2 { margin: 0; }

.panel {
  background: var(--surface);
  border: var(--border); border-radius: var(--r-md);
  padding: var(--sp-4);
}
@media (min-width: 600px) { .panel { padding: var(--sp-5); } }
.panel--sunk { background: var(--surface-sunk); border-color: transparent; }
.panel > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--main-side { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
}

/* Key figures */
.stats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.stat { background: var(--surface); border: var(--border); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.stat__label { font-size: var(--fs-sm); color: var(--ink-muted); font-weight: var(--fw-semibold); }
.stat__value { font-family: var(--font-head); font-size: var(--fs-3xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__note { font-size: var(--fs-sm); color: var(--ink-muted); display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.stat a { margin-top: auto; padding-top: var(--sp-2); font-weight: var(--fw-semibold); }

.meter { height: 8px; background: var(--surface-sunk); border-radius: var(--r-pill); overflow: hidden; margin: var(--sp-1) 0; }
.meter > span { display: block; height: 100%; background: var(--navy); border-radius: inherit; }
/* Widths are classes, not inline styles. Add steps as needed. */
.w-10 { width: 10%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-40 { width: 40%; }
.w-50 { width: 50%; } .w-60 { width: 60%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; }
.w-0 { width: 0; } .w-90 { width: 90%; } .w-100 { width: 100%; }

/* Description lists for key/value facts */
.kv { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.kv dt { color: var(--ink-muted); font-size: var(--fs-sm); padding-top: 0.1em; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 599px) {  /* label above value: long Polish labels don't squeeze the value */
  .kv, .person .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dt { padding-top: 0; }
  .kv dd { margin-bottom: var(--sp-3); }
  .kv dd:last-of-type { margin-bottom: 0; }
}
/* Long unbroken values (emails, references) wrap instead of overflowing */
dd, td, .list-row__meta, a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Status badges: icon + word, never colour alone */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0.125rem var(--sp-2) 0.125rem 0.375rem;
  border-radius: var(--r-pill); border: 1px solid currentColor;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.3;
  white-space: nowrap;
  color: var(--ink-muted); background: var(--surface);
}
.badge .icon { width: 0.875rem; height: 0.875rem; stroke-width: 2.6; }
.badge--present, .badge--paid, .badge--success { color: var(--present); background: var(--present-tint); }
.badge--absent, .badge--arrears, .badge--danger { color: var(--absent); background: var(--absent-tint); }
.badge--late, .badge--part-paid, .badge--warning { color: var(--late); background: var(--late-tint); }
.badge--info { color: var(--navy); background: var(--navy-tint); }
.badge--neutral { color: var(--ink-muted); background: var(--surface-sunk); border-color: var(--line-strong); }

/* 7. Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--control-h); padding: var(--sp-2) var(--sp-5);
  border: 2px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-weight: var(--fw-bold); line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; }
.btn--secondary { background: var(--surface); border-width: 1.5px; border-color: var(--line-strong); color: var(--navy); box-shadow: var(--sh-1); }
.btn--secondary:hover { background: var(--navy-tint); border-color: var(--navy); color: var(--navy-dark); }
.btn--danger { background: var(--absent); border-color: var(--absent); color: #fff; }
.btn--danger:hover { background: #82201a; border-color: #82201a; color: #fff; }
.btn--quiet { background: transparent; color: var(--navy); text-decoration: underline; text-underline-offset: 0.15em; padding-inline: var(--sp-3); }
.btn--quiet:hover { background: var(--navy-tint); }
.btn--sm { min-height: var(--tap); padding: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); }
/* On phones, primary actions stack full width with the main action first */
@media (max-width: 599px) {
  .btn-row--stack { flex-direction: column; align-items: stretch; }
  .btn-row--stack .btn { width: 100%; }
}

/* 8. Forms ----------------------------------------------------------------- */

form { margin: 0; }
.field { margin: 0 0 var(--sp-5); max-width: 36rem; }
.field--wide { max-width: none; }
.label, .field > label, legend.label {
  display: block; font-weight: var(--fw-bold); margin-bottom: var(--sp-1); padding: 0;
}
.label .optional { font-weight: var(--fw-regular); color: var(--ink-muted); }
.hint { display: block; color: var(--ink-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.error-msg {
  display: flex; align-items: flex-start; gap: var(--sp-1);
  color: var(--absent); font-weight: var(--fw-bold); margin: 0 0 var(--sp-2);
}
.error-msg .icon { margin-top: 0.15em; width: 1.1rem; height: 1.1rem; }

.input, .select, .textarea {
  display: block; width: 100%;
  min-height: var(--control-h); padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--fs-md); color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--focus); }
.textarea { min-height: 10rem; resize: vertical; line-height: var(--lh-body); }
.textarea--tall { min-height: 16rem; }
.select { appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.4rem 0.4rem; background-repeat: no-repeat; }
.input--code { max-width: 9ch; font-family: var(--font-mono); font-size: var(--fs-xl); letter-spacing: 0.15em; text-align: center; }
.input--short { max-width: 12rem; }
.input--money { max-width: 10rem; }
.field--error .input, .field--error .select, .field--error .textarea { border: 2px solid var(--absent); }
.field--error { border-left: 4px solid var(--absent); padding-left: var(--sp-3); }

.input-prefix { display: flex; max-width: 12rem; }
.input-prefix > span {
  display: inline-flex; align-items: center; padding: 0 var(--sp-3);
  background: var(--surface-sunk); border: 1.5px solid var(--line-strong); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm); font-weight: var(--fw-bold);
}
.input-prefix > .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: grid; gap: var(--sp-1); }
.choice { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-2) 0; cursor: pointer; }
.choice input { width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; flex: none; accent-color: var(--navy); }
.choice span small { display: block; color: var(--ink-muted); }

.error-summary {
  border: 3px solid var(--absent); border-radius: var(--r-md);
  background: var(--surface); padding: var(--sp-4) var(--sp-4) var(--sp-3);
  margin-bottom: var(--sp-5);
}
.error-summary h2 { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: var(--fw-bold); display: flex; gap: var(--sp-2); align-items: center; color: var(--absent); }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a { color: var(--absent); font-weight: var(--fw-bold); }

/* 9. Tables and lists ------------------------------------------------------ */

.table-wrap { background: var(--surface); border: var(--border); border-radius: var(--r-md); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.table caption { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-bold); }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: middle; border-bottom: var(--border); }
.table thead th { background: var(--surface-sunk); font-size: var(--fs-sm); color: var(--ink-muted); font-weight: var(--fw-bold); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:hover { background: #fcfbf8; }
.table .is-num { text-align: right; }
.table td a.rowlink { font-weight: var(--fw-bold); }
.table tfoot td, .table tfoot th { border-top: 2px solid var(--line-strong); font-weight: var(--fw-bold); }

/* Stacked table: under 600px each row becomes a card. Every <td> carries
   data-label="..." (translated in the template); CSS reads it with attr(). */
@media (max-width: 599px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td, .table--stack th[scope="row"] { display: block; }
  .table--stack tr { padding: var(--sp-3) var(--sp-4); border-bottom: var(--border); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  /* Each row is a card: title across the top, then the other cells two to a
     row with the label above the value. */
  .table--stack tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
  .table--stack td, .table--stack th[scope="row"] { border: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
  .table--stack td::before { content: attr(data-label); color: var(--ink-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.3; }
  .table--stack th[scope="row"], .table--stack td.is-title, .table--stack td.is-wide { grid-column: 1 / -1; }
  .table--stack th[scope="row"], .table--stack td.is-title { display: block; font-size: var(--fs-lg); padding-bottom: var(--sp-1); }
  .table--stack td.is-title::before { content: none; }
  .table--stack .is-num { text-align: left; }
  .table--stack tfoot { display: block; }
  .table--stack tfoot tr { display: grid; grid-template-columns: 1fr auto; background: var(--surface-sunk); }
  .table--stack tfoot td, .table--stack tfoot th { display: block; border: 0; padding: 0; }
  .table--stack tfoot td::before { content: none; }
}

/* List rows: whole row is the link, 56px minimum */
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: var(--border); border-radius: var(--r-md); overflow: hidden; }
.list > li + li { border-top: var(--border); }
.list-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3);
  min-height: var(--tap-lg); padding: var(--sp-3) var(--sp-4);
  color: inherit; text-decoration: none;
}
a.list-row:hover { background: #fcfbf8; color: inherit; }
a.list-row:hover .list-row__title { text-decoration: underline; }
.list-row__title { font-weight: var(--fw-bold); color: var(--navy); overflow-wrap: anywhere; }
div.list-row .list-row__title { color: var(--ink); }
.list-row__meta { grid-column: 1; font-size: var(--fs-sm); color: var(--ink-muted); }
.list-row__end { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: var(--sp-2); }
.list-row__end .icon { color: var(--ink-muted); }

/* Section colours. Put the class on <body> for the page's own section (current
   tab, sidebar item, page-title icon) or on a single element (a home-list row).
   Pages with no section class stay navy. */
.sec-registers { --accent: var(--sec-registers); --accent-tint: var(--sec-registers-tint); }
.sec-families  { --accent: var(--sec-families);  --accent-tint: var(--sec-families-tint); }
.sec-pupils    { --accent: var(--sec-pupils);    --accent-tint: var(--sec-pupils-tint); }

/* Icon tile: the section's icon on its tint. Decorative: the word beside it
   carries the meaning, so the <svg> stays aria-hidden. */
.icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
  background: var(--accent-tint); color: var(--accent);
}
.icon-tile .icon { width: 1.375rem; height: 1.375rem; }
.icon-tile--lg { width: 3rem; height: 3rem; border-radius: var(--r-lg); }
.icon-tile--lg .icon { width: 1.625rem; height: 1.625rem; }

/* List row with a leading icon tile (the school home list, the More sheet) */
.list-row--icon { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--sp-4); }
.list-row--icon > .icon-tile { grid-column: 1; grid-row: 1 / span 2; }
.list-row--icon > .list-row__title, .list-row--icon > .list-row__meta { grid-column: 2; }
.list-row--icon > .list-row__end { grid-column: 3; }
a.list-row--icon:hover { background: var(--accent-tint); }

/* Page title with its section icon */
.page-title { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.page-title h1 { margin: 0; min-width: 0; }
@media (max-width: 599px) { .page-title .icon-tile--lg { width: 2.5rem; height: 2.5rem; } }

/* Toolbar above lists: search and filters (a GET form, works without JS) */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-4); }
.toolbar .field { margin: 0; flex: 1 1 14rem; }
.toolbar .field--filter { flex: 0 1 14rem; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-muted); }

/* 10. Feedback ------------------------------------------------------------- */

.alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid; border-left-width: 6px; border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
  color: var(--ink);
}
.alert > .icon { grid-row: 1 / span 2; margin-top: 0.15em; }
.alert__title { font-weight: var(--fw-bold); margin: 0; }
.alert p { margin: 0; }
.alert p + p { margin-top: var(--sp-2); }
.alert--info { background: var(--info-tint); border-color: var(--navy); }
.alert--info > .icon { color: var(--navy); }
.alert--success { background: var(--present-tint); border-color: var(--present); }
.alert--success > .icon { color: var(--present); }
.alert--warning { background: var(--late-tint); border-color: var(--late); }
.alert--warning > .icon { color: var(--late); }
.alert--error { background: var(--absent-tint); border-color: var(--absent); }
.alert--error > .icon { color: var(--absent); }

.empty {
  text-align: center; padding: var(--sp-7) var(--sp-4);
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-md);
}
.empty__icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--navy-tint); color: var(--navy); margin-bottom: var(--sp-3); }
.empty__icon .icon { width: 1.75rem; height: 1.75rem; }
.empty h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.empty p { margin: 0 auto var(--sp-4); color: var(--ink-muted); }

/* Confirm step for destructive actions: a real page (works without JS) */
.confirm {
  background: var(--surface); border: var(--border); border-top: 6px solid var(--absent);
  border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4); max-width: 36rem;
}
@media (min-width: 600px) { .confirm { padding: var(--sp-6); } }
.confirm h1, .confirm h2 { display: flex; gap: var(--sp-3); align-items: flex-start; }
.confirm h1 .icon, .confirm h2 .icon { color: var(--absent); width: 1.75rem; height: 1.75rem; margin-top: 0.1em; }
.confirm ul { padding-left: 1.25rem; margin: 0 0 var(--sp-4); }
.confirm li { margin-bottom: var(--sp-1); }

/* 11. Register (phone) ----------------------------------------------------- */

.reg-head { margin: calc(-1 * var(--sp-5)) calc(-1 * var(--gutter)) 0; padding: var(--sp-2) var(--gutter) var(--sp-3); background: var(--paper); border-bottom: var(--border); position: sticky; top: calc(var(--topbar-h) + var(--stripe-h)); z-index: 5; }
.reg-head h1 { font-size: var(--fs-xl); margin: 0; }
.reg-head__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-muted); margin: var(--sp-1) 0 var(--sp-2); }
.reg-head__meta strong { color: var(--ink); }
.reg-head .meter { margin: 0; height: 6px; }

.reg { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.reg-row {
  background: var(--surface);
  border: 1px solid var(--line); border-left: 6px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-3) var(--sp-3);
}
.reg-row.is-present { border-left-color: var(--present); }
.reg-row.is-absent { border-left-color: var(--absent); }
.reg-row.is-late { border-left-color: var(--late); }
.reg-row__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.reg-row__name { font-weight: var(--fw-semibold); font-size: var(--fs-lg); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.reg-row__name b { font-weight: var(--fw-bold); }

/* Save state: a fixed slot so nothing moves when it changes */
.save {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-1);
  min-width: 7.5rem; min-height: var(--tap); flex: none;
  font-size: var(--fs-sm); color: var(--ink-muted); white-space: nowrap;
}
.save--saved { color: var(--present); }
.save--failed { color: var(--absent); font-weight: var(--fw-bold); }
.save__retry {
  min-height: var(--tap); padding: 0 var(--sp-2); margin-right: calc(-1 * var(--sp-2));
  border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: var(--fw-bold); color: var(--absent); text-decoration: underline;
}
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.seg__btn {
  min-height: var(--tap-lg); padding: var(--sp-1) 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; font-size: 0.9375rem; font-weight: var(--fw-semibold); line-height: 1.15;
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  cursor: pointer; touch-action: manipulation;
}
:lang(pl) .seg__btn { font-size: var(--fs-sm); }
.seg__btn .icon { color: var(--ink-muted); stroke-width: 2.6; }
.seg__btn[aria-pressed="true"] { color: #fff; }
.seg__btn[aria-pressed="true"] .icon { color: #fff; }
.seg__btn--present[aria-pressed="true"] { background: var(--present); border-color: var(--present); }
.seg__btn--absent[aria-pressed="true"] { background: var(--absent); border-color: var(--absent); }
.seg__btn--late[aria-pressed="true"] { background: var(--late); border-color: var(--late); }
/* Read-only register (someone else's class, a future or closed Saturday) */
.seg__btn:disabled { cursor: default; }
.seg__btn:disabled:not([aria-pressed="true"]) { color: var(--ink-muted); background: var(--surface-sunk); border-color: var(--line); }

.reg-foot {
  position: sticky; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2);
  margin: var(--sp-4) calc(-1 * var(--gutter)) 0; padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0));
  background: var(--surface); border-top: var(--border); box-shadow: 0 -2px 8px rgb(31 36 51 / 0.06);
}
.reg-foot .btn { padding-inline: var(--sp-4); }
.is-focused .main.main--register { padding-bottom: 0; max-width: 34rem; margin-inline: auto; }

/* 12. Feature screens ------------------------------------------------------ */

/* Auth (login, two-step) */
.auth { min-height: 100vh; display: flex; flex-direction: column; }
.auth__brand { background: var(--navy); color: #fff; padding: var(--sp-4) var(--gutter); }
.auth__brand .wordmark__text { display: inline; }
.auth__body { flex: 1; padding: var(--sp-6) var(--gutter) var(--sp-7); }
.auth__card { max-width: 28rem; margin: 0 auto; }
@media (min-width: 600px) {
  .auth__card { background: var(--surface); border: var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-1); }
}
.auth__card--wide { max-width: 36rem; }
.auth__foot { text-align: center; font-size: var(--fs-sm); color: var(--ink-muted); padding: var(--sp-4) var(--gutter) var(--sp-5); }
.lang-switch { display: flex; justify-content: center; gap: var(--sp-1); }
.lang-switch a, .lang-switch span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3); }
.lang-switch [aria-current="true"] { font-weight: var(--fw-bold); color: var(--ink); }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 var(--sp-5) 3rem; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: var(--fw-bold);
}
.steps h2 { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: var(--fw-bold); padding-top: 0.2rem; }
.qr { width: 11rem; height: 11rem; padding: var(--sp-2); background: #fff; border: var(--border); border-radius: var(--r-sm); }
.recovery-codes { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--sp-2) var(--sp-6); list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5); background: var(--surface-sunk); border-radius: var(--r-sm); font-size: var(--fs-lg); width: fit-content; }
.secret { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: 0.08em; background: var(--surface-sunk); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); overflow-wrap: anywhere; }

/* Teacher's "today" card */
.today-card { background: var(--surface); border: var(--border); border-left: 6px solid var(--navy); border-radius: var(--r-md); padding: var(--sp-4); }
.today-card h2 { margin-bottom: var(--sp-1); }
.today-card .kv { margin: var(--sp-3) 0 var(--sp-4); }

/* Bank matching */
.match { display: grid; gap: var(--sp-3); }
@media (min-width: 900px) { .match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; } }
.match__side { background: var(--surface); border: var(--border); border-radius: var(--r-md); padding: var(--sp-4); }
.match__side--bank { background: var(--surface-sunk); border-color: transparent; }
.match__side h2 { font-family: var(--font-body); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.match__amount { font-family: var(--font-head); font-size: var(--fs-3xl); line-height: 1.1; margin-bottom: var(--sp-3); font-variant-numeric: tabular-nums; }
.match__arrow { display: grid; place-items: center; color: var(--ink-muted); }
.match__arrow .icon { transform: rotate(90deg); width: 2rem; height: 2rem; }
@media (min-width: 900px) { .match__arrow .icon { transform: none; } }
.match__ref { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--surface); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: var(--border); overflow-wrap: anywhere; margin: 0; }
.match__why { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.match__why li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.match__why .icon { color: var(--present); width: 1rem; height: 1rem; margin-top: 0.2em; }
.match__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
@media (max-width: 599px) {
  .match__actions { flex-direction: column; }
  .match__actions .btn { width: 100%; }
}
.queue-pos { font-size: var(--fs-sm); color: var(--ink-muted); }

/* Two-language message composer */
.lang-pair { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .lang-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lang-col { background: var(--surface); border: var(--border); border-radius: var(--r-md); padding: var(--sp-4); }
.lang-col__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: var(--border); }
.lang-col__head h2 { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; }
.lang-col .field { max-width: none; }
.lang-col .field:last-child { margin-bottom: 0; }
.lang-col.field--error { border: 2px solid var(--absent); padding-left: var(--sp-4); }

/* Family page: people */
.people { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.person { background: var(--surface); border: var(--border); border-radius: var(--r-md); padding: var(--sp-4); }
.person h3 { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0 0 var(--sp-1); }
.person .badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-3); }

/* Mockup index and component sheet (not needed in the app) */
.swatch-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.swatch { background: var(--surface); border: var(--border); border-radius: var(--r-md); overflow: hidden; font-size: var(--fs-sm); }
.swatch__chip { height: 3.5rem; border-bottom: var(--border); }
.swatch__body { padding: var(--sp-2) var(--sp-3); }
.swatch__body code { font-size: var(--fs-xs); }
.chip-paper { background: var(--paper); } .chip-surface { background: var(--surface); } .chip-sunk { background: var(--surface-sunk); }
.chip-ink { background: var(--ink); } .chip-muted { background: var(--ink-muted); } .chip-line { background: var(--line); } .chip-line-strong { background: var(--line-strong); }
.chip-navy { background: var(--navy); } .chip-navy-tint { background: var(--navy-tint); } .chip-flag { background: linear-gradient(var(--flag-white) 0 50%, var(--flag-red) 50% 100%); }
.chip-present { background: var(--present); } .chip-absent { background: var(--absent); } .chip-late { background: var(--late); }
.chip-present-tint { background: var(--present-tint); } .chip-absent-tint { background: var(--absent-tint); } .chip-late-tint { background: var(--late-tint); }
.type-scale > * { margin: 0 0 var(--sp-2); }
.fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-md { font-size: var(--fs-md); } .fs-lg { font-size: var(--fs-lg); }
.fs-xl { font-size: var(--fs-xl); } .fs-2xl { font-size: var(--fs-2xl); } .fs-3xl { font-size: var(--fs-3xl); }
.serif { font-family: var(--font-head); }
.demo-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
.demo-phone { max-width: 22.5rem; }
.space-chip { height: 1rem; background: var(--navy); border-radius: 2px; }
.sp-1w { width: var(--sp-1); } .sp-2w { width: var(--sp-2); } .sp-3w { width: var(--sp-3); } .sp-4w { width: var(--sp-4); }
.sp-5w { width: var(--sp-5); } .sp-6w { width: var(--sp-6); } .sp-7w { width: var(--sp-7); } .sp-8w { width: var(--sp-8); }
.radius-chip { width: 3rem; height: 3rem; background: var(--navy-tint); border: 2px solid var(--navy); }
.r-sm { border-radius: var(--r-sm); } .r-md { border-radius: var(--r-md); } .r-lg { border-radius: var(--r-lg); } .r-pill { border-radius: var(--r-pill); }
.shadow-chip { width: 6rem; height: 3rem; background: var(--surface); border-radius: var(--r-md); }
.sh-1 { box-shadow: var(--sh-1); } .sh-2 { box-shadow: var(--sh-2); } .sh-3 { box-shadow: var(--sh-3); }

/* Public home page (sobotnia.co.uk). The full-colour artwork lives here and on
   the login page only, never on working screens, where colour means status. */
.topbar--public .wordmark__text { display: inline; }
.topbar__links { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); }
.topbar__links a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3);
  color: #fff; text-decoration: none; font-weight: var(--fw-semibold); border-radius: var(--r-sm);
  white-space: nowrap;
}
.topbar__links a:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.topbar__links .topbar__signin { border: 2px solid rgb(255 255 255 / 0.75); }
.topbar--public .topbar__inner { max-width: var(--content-max); margin-inline: auto; padding-right: var(--gutter); }

.hero {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--sp-6) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-6);
}
.hero__text { flex: 999 1 24rem; min-width: 0; }
.hero__text h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); line-height: 1.1; color: var(--navy); margin-bottom: var(--sp-4); }
.hero__text .lead { margin-bottom: var(--sp-5); max-width: none; }
.hero__text .btn-row { margin-top: 0; }
.hero__art { flex: 1 1 16rem; display: flex; justify-content: center; }
.hero__art img { width: 100%; max-width: 26rem; height: auto; }
@media (max-width: 599px) { .hero__art img { max-width: 15rem; } }

.features {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter) var(--sp-6);
  display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.feature { background: var(--surface); border: var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.feature h2 { font-size: var(--fs-lg); color: var(--navy); margin-bottom: var(--sp-2); }
.feature p { margin: 0; color: var(--ink-muted); }
.feature p.feature__soon { margin-bottom: var(--sp-2); }

/* "Your data": one line under the cards, the shield beside it */
.data-note {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter) var(--sp-7);
  display: flex; align-items: flex-start; gap: var(--sp-3);
}
.data-note .icon { color: var(--navy); margin-top: 0.1em; }
.data-note p { margin: 0; max-width: none; color: var(--ink-muted); }

/* The public list of schools (D56) */
.directory { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-6) var(--gutter) 0; }
.directory h1 { color: var(--navy); margin-bottom: var(--sp-3); }
.directory .lead { max-width: none; }
.directory .data-note { padding-inline: 0; margin-top: var(--sp-6); }
.directory__regions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.directory__regions a { display: inline-flex; align-items: center; min-height: var(--tap); }
.directory__region { margin-top: var(--sp-6); }
.directory__region h2 { color: var(--navy); margin-bottom: var(--sp-3); }
.directory__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.directory__school { background: var(--surface); border: var(--border); border-radius: var(--r-md); padding: var(--sp-4); overflow-wrap: anywhere; }
.directory__school h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.directory__school p { margin: 0 0 var(--sp-1); color: var(--ink-muted); font-size: var(--fs-sm); }

.site-foot { border-top: var(--border); padding: var(--sp-4) 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.site-foot__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-5); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); }
.site-foot a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-2); }

/* Login and two-step pages: a small piece of the artwork above the form */
.auth__art { display: block; width: 5.5rem; height: auto; margin: 0 auto var(--sp-4); }

/* Error pages (404, 403, 400, expired form, 500): the artwork, a large number, and each line in
   Polish with the English straight under it, because the language setting may be what broke.
   No navigation, no school, no database. */
.err { flex: 1; padding: var(--sp-6) var(--gutter) var(--sp-7); }
.err__card { max-width: 52rem; margin: 0 auto; display: grid; gap: var(--sp-4) var(--sp-6); }
.err h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); margin-bottom: var(--sp-3); }
.err p { max-width: var(--measure); }
.err__art { display: flex; justify-content: center; }
.err__art img { width: 7rem; height: auto; }
.err__num { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 4rem; line-height: 1; color: var(--navy); margin: 0 0 var(--sp-3); letter-spacing: 0.02em; }
.err__pair > span { display: block; }
.err__alt { color: var(--ink-muted); font-weight: var(--fw-regular); margin-top: 0.2em; }
h1.err__pair .err__alt { font-family: var(--font-body); font-size: var(--fs-lg); line-height: 1.35; }
p.err__pair { margin-bottom: var(--sp-4); }
.err__ref {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  background: var(--surface-sunk); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.err__ref code { font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: 0.08em; color: var(--ink); }
.err__sep::before { content: "· "; }
@media (min-width: 600px) {
  .err__card { grid-template-columns: 12rem minmax(0, 1fr); align-items: start; background: var(--surface); border: var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-1); }
  .err__art img { width: 100%; }
  .err__num { font-size: 5.5rem; }
}
/* Buttons carrying both languages: Polish, then English underneath */
.btn__labels { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.btn__alt { font-size: var(--fs-sm); font-weight: var(--fw-regular); }

/* Utilities (keep this list short) */
.stack > * + * { margin-top: var(--sp-4); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.flex-gap { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .topbar, .sidenav, .tabbar, .skip-link, .page-head__actions, .btn, .reg-foot { display: none !important; }
  body { background: #fff; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; }
  .panel, .table-wrap, .list { border-color: #999; }
  a { color: inherit; text-decoration: none; }
}
.tabbar--demo { position: static; box-shadow: none; border: var(--border); border-radius: var(--r-md); }
.qr rect { shape-rendering: crispEdges; }

/* Secondary links that stand alone get a full touch target */
.section__head a, .stat a, .panel > details > summary, details.panel > summary {
  display: inline-flex; align-items: center; min-height: var(--tap);
}
details.panel > summary { cursor: pointer; }
@media (max-width: 599px) {
  .toolbar .field--filter { flex: 1 1 calc(50% - var(--sp-3)); min-width: 0; }
  .toolbar > .btn { flex: 1 1 100%; }
}
.input--code { max-width: 11ch; }
@media (min-width: 600px) { .person .kv { grid-template-columns: max-content minmax(0, 1fr); } }

/* Public contact form (D64) */
.contact { max-width: 40rem; margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-8); }
.contact h1 { color: var(--navy); margin-bottom: var(--sp-3); }
.contact .lead { max-width: none; }
/* The bots' trap field: off-screen, out of the tab order and hidden from screen readers. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }