@port60/template-kit 0.20.3 → 0.21.0

package/src/vendor/validator/platform-base.css

@@ -1,12 +1,12 @@
-/* GENERATED by scripts/build-preview-base.mjs from src/styles/global.css — do not edit. */
+/* GENERATED by scripts/build-preview-base.mjs from src/styles/global.css, do not edit. */
 /* ---- PLATFORM BASE (the base/skin split, 2026-07-14) ----
    This stylesheet is the platform's base layer: reset, CSS-variable DECLARATIONS (the theming
-   contract — values here are the platform defaults a template overrides via :root:root), chrome
+   contract, values here are the platform defaults a template overrides via :root:root), chrome
    mechanics (header/nav/burger/footer/auth), and ALL functional-island styling (donation widget,
    donate page, events/tickets, services, articles, members area, consent, address lookup). A
-   template's LOOK does not live here — Classic's is src/templates/default/theme.ts, and every
+   template's LOOK does not live here, Classic's is src/templates/default/theme.ts, and every
    template ships a themeCss injected at body-end. Fonts load from the layout <head> (preconnect +
-   stylesheet link) instead of a CSS @import — an @import chains render-blocking requests. */
+   stylesheet link) instead of a CSS @import, an @import chains render-blocking requests. */
 
 :root {
   --bg: #fbf6ef;
@@ -23,16 +23,16 @@
   /* Impact map. --marker = the map pin colour (a deliberate brand accent by default; the live-map
      markers are a zoom-scaling MapLibre circle layer that takes this colour). --map-mode = the
      basemap colour mode read by the map island: `auto` derives the map's paper/ink from the theme
-     neutrals below, `light`/`dark`/`muted` force a base. Template-owned — set in theme.css or exposed
+     neutrals below, `light`/`dark`/`muted` force a base. Template-owned, set in theme.css or exposed
      as Appearance knobs; the tenant never edits map colour directly. */
   --marker: var(--accent);
   --map-mode: auto;
-  /* flat (default) or globe — MapLibre's own globe projection, a rotatable sphere. */
+  /* flat (default) or globe, MapLibre's own globe projection, a rotatable sphere. */
   --map-projection: flat;
   --line: rgba(31, 42, 51, 0.1);
   --line-strong: rgba(18, 135, 122, 0.28);
   --danger: #c0392b;
-  /* Donate/primary CTA hover — a clear GREEN "go" cue, shared by every template (a template may
+  /* Donate/primary CTA hover, a clear GREEN "go" cue, shared by every template (a template may
      override the token, but by default hovering a donate button turns green, not just lighter). */
   --cta-hover: #16a34a;
   --cta-hover-strong: #128a3f;
@@ -51,10 +51,37 @@ html {
   scroll-behavior: smooth;
 }
 
-/* Arabic-script text (Arabic, Persian, Urdu…) rendered by a proper webfont, sized to match Latin.
-   unicode-range scopes it to Arabic codepoints only — Latin keeps Inter/Fraunces, and the font is
-   downloaded only when an Arabic glyph appears. size-adjust enlarges it so mixed text reads evenly.
-   To use a different (or licensed, e.g. King Saud) font, swap src + keep everything else. */
+/* Arabic-script text (Arabic, Persian, Urdu…) rendered by the platform's own webfonts, sized to
+   match Latin. unicode-range scopes them to Arabic codepoints only, Latin keeps the template's
+   faces, and a file is downloaded only when an Arabic glyph appears.
+   The platform Arabic face is KFGQPC HAFS Uthmanic Script (King Fahd Glorious Quran Printing
+   Complex, self-hosted under public/fonts/, licence beside it, never modified). It ships one weight,
+   so IBM Plex Sans Arabic stays declared behind it for bold and for any glyph HAFS lacks.
+   Template font slots name both faces first too (engine/fonts.ts ARABIC_FACES), so a template's own
+   body font never drops them; a tenant who picks an Arabic family for a slot keeps their choice.
+   To swap the platform face: replace the file and src here, and the name in fonts.ts. */
+@font-face {
+  font-family: 'KFGQPC HAFS Uthmanic Script';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  size-adjust: 130%;
+  src: url('/fonts/kfgqpc-hafs-uthmanic-script/UthmanicHafs_V22.woff2') format('woff2');
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
+}
+/* A platform-hosted CATALOGUE family: not on the default Arabic stack, loaded only when a tenant
+   picks it for a font slot. A Quranic Nastaliq face (the Indo-Pak mushaf style): Arabic and Quran
+   text render, but Urdu prose letters come out as dotted circles in Chrome, so it is not an Urdu
+   body font. size-adjust 130%: 120% sat level with the Latin x-height, the owner reads Arabic more easily a step larger. */
+@font-face {
+  font-family: 'KFGQPC Nastaleeq';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  size-adjust: 130%;
+  src: url('/fonts/kfgqpc-nastaleeq/KFGQPCNastaleeq-Regular.woff2') format('woff2');
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
+}
 @font-face {
   font-family: 'IBM Plex Sans Arabic';
   font-style: normal;
@@ -77,7 +104,7 @@ html {
 body {
   margin: 0;
   min-width: 320px;
-  font-family: 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: 'KFGQPC HAFS Uthmanic Script', 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   color: var(--ink);
   background: var(--bg); /* decoration (Classic's radial washes) is the template theme's job */
 }
@@ -92,8 +119,8 @@ img {
   display: block;
 }
 
-/* Typography (heading scale/family, paragraph rhythm) is TEMPLATE territory — see
-   templates/default/theme.ts for Classic's. The base deliberately styles no bare h1–h4/p. */
+/* Typography (heading scale/family, paragraph rhythm) is TEMPLATE territory, see
+   templates/default/theme.ts for Classic's. The base deliberately styles no bare h1-h4/p. */
 
 input, button, textarea, select {
   font: inherit;
@@ -123,7 +150,7 @@ input:focus {
 
 /* THE CONTENT SEAM. `.container` (contained) and `.full` (edge-to-edge) are the layout intents every
    platform page renders through, and the contract a template fills to place content its way: a template
-   STYLES these — and overrides `--container` for width — to match its own sections. A template must
+   STYLES these, and overrides `--container` for width, to match its own sections. A template must
    NEVER build a parallel content container (a class sized off `--container`); platform pages stay on
    `.container`, so a second container makes them drift from the template's sections. The publish-time
    validator enforces this. A template that leaves the seam alone inherits these platform defaults. */
@@ -132,7 +159,7 @@ input:focus {
   margin: 0 auto;
 }
 
-/* Full-bleed intent — edge-to-edge regardless of the container it sits in (a hero image, a colour
+/* Full-bleed intent, edge-to-edge regardless of the container it sits in (a hero image, a colour
    band). Templates restyle it freely; the default breaks out to the viewport width. */
 .full {
   width: 100vw;
@@ -212,7 +239,7 @@ input:focus {
   display: flex;
   align-items: center;
   gap: 0.35rem;
-  flex-wrap: nowrap; /* never let items drop to a second line — compact (below) then burger */
+  flex-wrap: nowrap; /* never let items drop to a second line, compact (below) then burger */
 }
 
 .site-nav a {
@@ -233,7 +260,7 @@ input:focus {
   box-shadow: 0 10px 22px rgba(239, 96, 68, 0.26);
 }
 
-/* Donate, the Port60 ID sign-in, and the account pill share one exact size — they sit side by
+/* Donate, the Port60 ID sign-in, and the account pill share one exact size, they sit side by
    side, so any height/padding drift between them reads as misalignment. The sign-in/account pair
    is UNSCOPED: they are the member_menu ISLAND's chrome, which must look right inside ANY
    template's nav (artifact layouts don't use .site-nav). */
@@ -256,7 +283,7 @@ input:focus {
   box-shadow: 0 10px 22px rgba(22, 163, 74, 0.3);
 }
 
-/* Services dropdown — populated client-side from the published services. */
+/* Services dropdown, populated client-side from the published services. */
 .site-nav .nav-dropdown {
   position: relative;
   display: inline-flex;
@@ -297,9 +324,9 @@ input:focus {
   background: var(--bg-tint);
 }
 
-/* The port60 ID sign-in button — the PLATFORM identity brand, deliberately constant across every
+/* The port60 ID sign-in button, the PLATFORM identity brand, deliberately constant across every
    tenant site and template (the "Sign in with Google" pattern): port60 navy + cyan, independent
-   of the site palette. The hosted widget it opens offers both sign-in and register. Unscoped —
+   of the site palette. The hosted widget it opens offers both sign-in and register. Unscoped , 
    island chrome, identical in any template's nav. */
 .nav-p60-signin.nav-p60-signin {
   display: inline-flex;
@@ -355,9 +382,9 @@ input:focus {
   height: 1.25rem;
 }
 
-/* Members account pill (signed in) — a clear "this is your account" affordance, weighted between
+/* Members account pill (signed in), a clear "this is your account" affordance, weighted between
    plain nav links and the Donate CTA. The menu anchors right (it's the last nav item).
-   `.open` mirrors hover/focus for touch. Unscoped — island chrome, identical in any template's
+   `.open` mirrors hover/focus for touch. Unscoped, island chrome, identical in any template's
    nav: the wrapper carries its own positioning anchor and menu-link styling so the dropdown works
    without .site-nav around it. */
 .nav-account {
@@ -405,7 +432,7 @@ input:focus {
   display: flex;
 }
 /* Artifact-template mobile panels (the layout behaviour API: #site-nav gains .open): the account
-   menu flows INLINE like any expanded nav group — never a floating card half off the screen.
+   menu flows INLINE like any expanded nav group, never a floating card half off the screen.
    Keyed on the .open state the burger sets, so desktop hover/dropdowns are untouched. */
 #site-nav.open .nav-account {
   display: block;
@@ -463,7 +490,7 @@ input:focus {
   background: var(--bg-tint);
 }
 
-/* Optional tenant footer mark (branding.footerLogoUrl) — height-constrained like the header logo. */
+/* Optional tenant footer mark (branding.footerLogoUrl), height-constrained like the header logo. */
 .footer-logo { display: block; height: 46px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: 0.9rem; }
 
 .site-footer {
@@ -501,7 +528,7 @@ input:focus {
   color: rgba(93, 107, 120, 0.8);
 }
 
-/* Footer socials — tenant's social links, rendered by the template (ours: here). Variable-driven so
+/* Footer socials, tenant's social links, rendered by the template (ours: here). Variable-driven so
    each theme tints them. */
 .footer-socials {
   display: flex;
@@ -529,10 +556,10 @@ input:focus {
   height: 1.15rem;
 }
 
-/* ---------- shared bits (.eyebrow/.card/.section-heading are template-owned — Classic's live in
+/* ---------- shared bits (.eyebrow/.card/.section-heading are template-owned, Classic's live in
    templates/default/theme.ts; .button stays here because the islands depend on it) ---------- */
 
-/* A kicker may BE a link (the archive's section kicker doubles as the way back) — it keeps the
+/* A kicker may BE a link (the archive's section kicker doubles as the way back), it keeps the
    kicker type treatment whatever the template; hover reveals the affordance. */
 a.eyebrow {
   text-decoration: none;
@@ -587,15 +614,41 @@ a.eyebrow:hover {
   border-color: var(--line);
 }
 
-/* ---------- Forms (schema-driven form renderer — components/FormRenderer + DateField) ----------
+/* ---------- Forms (schema-driven form renderer, components/FormRenderer + DateField) ----------
    Themed entirely from the site tokens so a form looks native on any template. The one thing the base
    input{} rule gets wrong for us is the checkbox (it forces width:100%, stretching the box across the
-   row) — pinned below, which is what fixes the check-box alignment. */
+   row), pinned below, which is what fixes the check-box alignment. */
 
 .p60-form {
   max-width: 640px;
 }
 
+.campaign-form {
+  margin-block: 2rem;
+}
+
+/* An embedded form belongs to the campaign, not a second page inside it. */
+.p60-form--embedded {
+  padding: clamp(1rem, 3vw, 2rem);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm, 12px);
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.p60-form--embedded .p60-form-control {
+  background: var(--bg);
+  border-color: color-mix(in srgb, var(--ink) 35%, var(--surface));
+}
+
+.p60-form--embedded .p60-form-control:focus {
+  border-color: var(--primary);
+}
+
+.p60-form--embedded > :last-child {
+  margin-block-end: 0;
+}
+
 .p60-form-intro {
   color: var(--muted);
   margin: 0 0 1.5rem;
@@ -609,6 +662,18 @@ a.eyebrow:hover {
   margin-bottom: 1.15rem;
 }
 
+.p60-form-respondent {
+  min-inline-size: 0;
+  border: 0;
+  padding: 0 0 0.5rem;
+  margin: 0 0 1.5rem;
+  border-block-end: 1px solid var(--line);
+}
+
+.p60-form-respondent > legend {
+  margin-block-end: 1rem;
+}
+
 .p60-form-label {
   display: block;
   font-weight: 600;
@@ -676,7 +741,7 @@ textarea.p60-form-control {
   font-size: 0.9rem;
 }
 
-/* Checkbox rows — pin the box small and top-align it with the first line of the label text. */
+/* Checkbox rows, pin the box small and top-align it with the first line of the label text. */
 .p60-form-check {
   display: flex;
   align-items: flex-start;
@@ -690,11 +755,18 @@ textarea.p60-form-control {
   width: 1.05rem;
   height: 1.05rem;
   flex: 0 0 auto;
-  margin: 0.15rem 0 0;
-  accent-color: var(--primary);
+  margin: 0.25rem 0 0;
+  padding: 0;
+  accent-color: var(--accent, var(--primary));
   cursor: pointer;
 }
 
+.p60-form-check input:is([type='checkbox'], [type='radio']):focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 3px;
+  box-shadow: none;
+}
+
 .p60-form-check.has-error span {
   color: var(--danger);
 }
@@ -704,7 +776,7 @@ textarea.p60-form-control {
   font-style: italic;
 }
 
-/* MULTISELECT checkbox list / CHOICE radio list — vertical lists reusing the aligned check-row. */
+/* MULTISELECT checkbox list / CHOICE radio list, vertical lists reusing the aligned check-row. */
 .p60-form-checklist,
 .p60-form-radios {
   display: flex;
@@ -718,7 +790,7 @@ textarea.p60-form-control {
   margin-bottom: 0;
 }
 
-/* Searchable multi-select dropdown (MultiSelectDropdown) — the "pick many from a long list" widget. */
+/* Searchable multi-select dropdown (MultiSelectDropdown), the "pick many from a long list" widget. */
 .p60-ms {
   position: relative;
 }
@@ -840,7 +912,7 @@ textarea.p60-form-control {
   font-size: 0.9rem;
 }
 
-/* ---- Custom desktop date picker (DateField) — native <input type=date> is used on touch ---- */
+/* ---- Custom desktop date picker (DateField), native <input type=date> is used on touch ---- */
 .p60-date {
   position: relative;
 }
@@ -971,7 +1043,7 @@ textarea.p60-form-control {
   background: transparent;
 }
 
-/* (hero / impact / band — the home page's Classic presentation — live in templates/default/theme.ts) */
+/* (hero / impact / band, the home page's Classic presentation, live in templates/default/theme.ts) */
 
 /* ---------- donation widget ---------- */
 
@@ -985,7 +1057,7 @@ textarea.p60-form-control {
   gap: 1rem;
 }
 
-/* MOBILE BREAKOUT (owner, 2026-08-17): on phones the nesting stack squashes the card badly —
+/* MOBILE BREAKOUT (owner, 2026-08-17): on phones the nesting stack squashes the card badly , 
    measured on Sanctuary: 390px viewport → 346 container → 294 aside → 249px card → ~195px of
    actual controls. A donate form is a working control surface; it gets the full screen width
    (edge to edge, side borders/radius dropped, its own padding kept). The negative-margin trick
@@ -1202,7 +1274,7 @@ textarea.p60-form-control {
   color: var(--primary-strong);
 }
 
-/* Named suggested amounts — a vertical list with the amount + its label (e.g. "Feeds a family"). */
+/* Named suggested amounts, a vertical list with the amount + its label (e.g. "Feeds a family"). */
 .amount-list {
   display: grid;
   gap: 0.6rem;
@@ -1275,6 +1347,12 @@ textarea.p60-form-control {
   padding-left: 1.8rem;
 }
 
+.cover-costs-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+}
+
 .donor-fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -1427,7 +1505,7 @@ textarea.p60-form-control {
   margin-top: 0.4rem;
 }
 
-/* (about-page .prose/.value-grid — Classic's section presentation — live in templates/default/theme.ts) */
+/* (about-page .prose/.value-grid, Classic's section presentation, live in templates/default/theme.ts) */
 
 /* ---------- responsive ---------- */
 
@@ -1615,11 +1693,11 @@ textarea.p60-form-control {
 /* --- Articles (public) --- */
 /* The blog is long-form READING (unlike the full-width marketing Services pages): the article body
    sits in a ~70ch measure with article chrome (byline, reading time), and the theme owns all
-   typography — content only carries semantic structure (mark, pull quotes, captions, tables,
+   typography, content only carries semantic structure (mark, pull quotes, captions, tables,
    embeds), styled here. */
 .article-article {
   /* The page FRAME matches every other page's container (hero image, engagement bar span it);
-     the running text keeps its own readable measure via .article-body/.article-article-head —
+     the running text keeps its own readable measure via .article-body/.article-article-head , 
      so navigating article ↔ other pages no longer visibly narrows the page. */
   max-width: var(--container);
   margin: 0 auto;
@@ -1673,7 +1751,7 @@ textarea.p60-form-control {
 }
 
 .article-body {
-  /* Fills the container — same call as .service-body ("widened by preference"): the page reads as
+  /* Fills the container, same call as .service-body ("widened by preference"): the page reads as
      one full-width surface; line-height carries the readability. */
   margin: 0;
   color: var(--ink);
@@ -1728,7 +1806,7 @@ textarea.p60-form-control {
 .article-body img.size-full {
   max-width: 100%;
 }
-/* The semantic highlight — theme-tinted, never an author-picked colour. */
+/* The semantic highlight, theme-tinted, never an author-picked colour. */
 .article-body mark {
   background: color-mix(in srgb, var(--gold) 38%, transparent);
   color: inherit;
@@ -1741,7 +1819,7 @@ textarea.p60-form-control {
   padding: 0.25rem 1rem;
   color: var(--muted);
 }
-/* The pull quote — a stand-out breath in the reading flow. */
+/* The pull quote, a stand-out breath in the reading flow. */
 .article-body blockquote.pull {
   border-inline-start: none;
   border-top: 2px solid var(--line-strong);
@@ -1834,7 +1912,7 @@ textarea.p60-form-control {
   margin: 1.5rem 0 0;
 }
 
-/* Engagement bar under the article. Wraps — never scrolls sideways. */
+/* Engagement bar under the article. Wraps, never scrolls sideways. */
 .article-engage {
   margin: 1.5rem 0;
   display: flex;
@@ -1870,7 +1948,7 @@ textarea.p60-form-control {
   font-size: 0.95rem;
 }
 
-/* The share row — plain share-intent buttons (no network SDKs). Wraps with the bar. */
+/* The share row, plain share-intent buttons (no network SDKs). Wraps with the bar. */
 .article-share-group {
   display: flex;
   align-items: center;
@@ -1900,7 +1978,7 @@ textarea.p60-form-control {
   border-color: var(--accent);
   color: var(--accent-strong);
 }
-/* Brand tints on hover — recognisable without shouting at rest (and dark-theme safe: the
+/* Brand tints on hover, recognisable without shouting at rest (and dark-theme safe: the
    at-rest button is theme ink on theme surface). */
 .article-share-btn--facebook:hover { color: #1877f2; border-color: #1877f2; }
 .article-share-btn--x:hover { color: var(--ink); border-color: var(--ink); }
@@ -2014,7 +2092,7 @@ textarea.p60-form-control {
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 1.5rem;
 }
-/* MOBILE: the stacked grid becomes an edge-to-edge SWIPE ROW with a peek (owner, 2026-08-17) —
+/* MOBILE: the stacked grid becomes an edge-to-edge SWIPE ROW with a peek (owner, 2026-08-17) , 
    the scroller bleeds to the screen edges, each card keeps its padding, the first card aligns to
    the text gutter, and the cut-off next card IS the "swipe me" affordance (the reference maps'
    card idiom). Snap keeps cards settling cleanly; the scrollbar is hidden, the peek replaces it. */
@@ -2095,7 +2173,7 @@ textarea.p60-form-control {
 .article-card-counts {
   margin-inline-start: 0.6rem;
 }
-/* The featured (newest) card: a magazine lead — image beside copy on wide screens. */
+/* The featured (newest) card: a magazine lead, image beside copy on wide screens. */
 .article-card--featured {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
@@ -2132,7 +2210,7 @@ textarea.p60-form-control {
   color: var(--muted);
 }
 .article-more {
-  /* Spans the page frame like the hero + back-link (the reading column stays 70ch) — one frame
+  /* Spans the page frame like the hero + back-link (the reading column stays 70ch), one frame
      edge + one reading edge, nothing floating at a third width. Grid auto-fills the row. */
   max-width: var(--container);
   margin: 2.5rem auto 0;
@@ -2178,7 +2256,7 @@ textarea.p60-form-control {
 .event-card-image-placeholder {
   display: grid;
   place-items: center;
-  /* Same fallback-tint convention as course cards — see .course-card-tint. */
+  /* Same fallback-tint convention as course cards, see .course-card-tint. */
   background: var(--media-tint, hsl(210 34% 33%));
 }
 .event-card-image-placeholder span {
@@ -2212,7 +2290,7 @@ textarea.p60-form-control {
   align-self: start;
 }
 
-/* .event-detail carries NO max-width — page bodies fill var(--container) (the standing
+/* .event-detail carries NO max-width, page bodies fill var(--container) (the standing
    full-width rule; the 760px reading measure was removed 2026-07-24, as on courses). */
 .event-detail-image {
   width: 100%;
@@ -2427,7 +2505,7 @@ textarea.p60-form-control {
   align-items: center;
   gap: 0.5rem;
 }
-/* MOBILE: the rotator is MEDIA — it bleeds edge to edge like the hero and the map, with the
+/* MOBILE: the rotator is MEDIA, it bleeds edge to edge like the hero and the map, with the
    arrows overlaid on the image instead of eating width beside it. */
 @media (max-width: 640px) {
   .events-carousel {
@@ -2875,7 +2953,7 @@ textarea.p60-form-control {
 
 /* ---- Members area (shell + sections; see components/members/) ----
    Desktop: left rail + content. Small screens: the rail becomes a horizontal, scrollable pill
-   strip above the content — same registry, no separate mobile markup. */
+   strip above the content, same registry, no separate mobile markup. */
 .members-head {
   margin-bottom: 1.6rem;
 }
@@ -2911,7 +2989,7 @@ textarea.p60-form-control {
   color: var(--ink);
   text-align: left;
   cursor: pointer;
-  /* Labels WRAP inside the pill (never overflow it) — long names and translations both fit. */
+  /* Labels WRAP inside the pill (never overflow it), long names and translations both fit. */
   line-height: 1.25;
 }
 .members-rail-item .members-rail-icon { flex: 0 0 auto; }
@@ -3050,7 +3128,7 @@ textarea.p60-form-control {
   }
 }
 
-/* Just above the burger point the full-size nav is tight — compact spacing spreads it cleanly
+/* Just above the burger point the full-size nav is tight, compact spacing spreads it cleanly
    instead of letting anything drop. */
 @media (min-width: 961px) and (max-width: 1120px) {
   .site-nav {
@@ -3172,7 +3250,7 @@ textarea.p60-form-control {
 
 /* ---- Members rail on mobile: a LEFT SLIDE-IN DRAWER behind a round user-icon button ----
    The rail itself becomes the drawer (same items, same markup): fixed full-height panel translated
-   off-canvas, sliding in over a scrim. The trigger is a slim bar — round user-icon button + the
+   off-canvas, sliding in over a scrim. The trigger is a slim bar, round user-icon button + the
    current section name. Desktop hides all of this and shows the rail inline. */
 .members-mobile-bar {
   display: none;
@@ -3280,7 +3358,7 @@ textarea.p60-form-control {
 }
 
 /* ---- Articles front page: the newest article in full + a right sidebar (recent, topics,
-   view-all). Newspaper-style — the sidebar stacks below the article on small screens. ---- */
+   view-all). Newspaper-style, the sidebar stacks below the article on small screens. ---- */
 .article-front {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 300px;
@@ -3383,7 +3461,7 @@ textarea.p60-form-control {
   }
 }
 
-/* ---- Consent banner + preference centre (platform-level, always on — compliance is
+/* ---- Consent banner + preference centre (platform-level, always on, compliance is
    platform-owned). Fixed bottom layer; the preference centre grows out of the same layer. ---- */
 .consent-layer {
   position: fixed;
@@ -3539,7 +3617,7 @@ textarea.p60-form-control {
   color: inherit;
 }
 
-/* ---- Marketing opt-in checkbox (the explicit reg-22 consent — deliberately quiet, never
+/* ---- Marketing opt-in checkbox (the explicit reg-22 consent, deliberately quiet, never
    pre-ticked) + the members contact toggle. ---- */
 .marketing-optin {
   display: flex;
@@ -3608,11 +3686,11 @@ textarea.p60-form-control {
 }
 
 /* ---- Cross-document view transitions (MPA soft-feel) ----
-   Every nav click is a full document navigation (Astro MPA — no client router). This asks the
+   Every nav click is a full document navigation (Astro MPA, no client router). This asks the
    browser to HOLD the old frame and cross-fade to the new page once it's ready (Chrome 126+,
    Safari 18+; others keep the instant swap): no blank frame between pages, and unchanged chrome
-   (masthead/nav) cross-fades between identical pixels — i.e. visually persists. True soft-nav
-   with persistent island state would be Astro's ClientRouter — a later, bigger step. */
+   (masthead/nav) cross-fades between identical pixels, i.e. visually persists. True soft-nav
+   with persistent island state would be Astro's ClientRouter, a later, bigger step. */
 @view-transition {
   navigation: auto;
 }
@@ -3624,7 +3702,7 @@ textarea.p60-form-control {
   }
 }
 
-/* The article page's back-link needs air before the chips/title (detail page only — the front
+/* The article page's back-link needs air before the chips/title (detail page only, the front
    page's grid must keep its own alignment). */
 .services-back + .article-article {
   margin-top: 1.75rem;
@@ -3741,7 +3819,7 @@ textarea.p60-form-control {
    mixed grids keep one card anatomy. The tint arrives as a CSS VARIABLE, not an inline background,
    so a template whose palette collides with the green→indigo band can override this rule and
    restyle the fallback its own way (the templates-conform contract). */
-/* Admin-entered prose can contain unbroken tokens (URLs, pasted refs) — never let one push a
+/* Admin-entered prose can contain unbroken tokens (URLs, pasted refs), never let one push a
    container wide. Applies to every surface that renders tenant summaries/bodies. */
 .event-detail-desc,
 .event-about,
@@ -4023,7 +4101,7 @@ textarea.p60-form-control {
   color: var(--muted);
   white-space: pre-line;
 }
-/* The members-area PILL BUTTON (user, 2026-07-22) — the one action idiom across member surfaces
+/* The members-area PILL BUTTON (user, 2026-07-22), the one action idiom across member surfaces
    (directions, household invite/remove, …): bordered pill, hover fill, danger modifier. */
 .member-pill-btn {
   display: inline-flex;
@@ -4046,7 +4124,7 @@ textarea.p60-form-control {
 .member-pill-btn:disabled { opacity: 0.5; cursor: default; }
 .member-pill-btn-danger { color: #c4462e; }
 
-/* Get directions = a proper pill button (user, 2026-07-22) — the resource-chip idiom, so it
+/* Get directions = a proper pill button (user, 2026-07-22), the resource-chip idiom, so it
    reads as an action rather than text among the venue lines. */
 .member-course-directions {
   display: inline-flex;
@@ -4067,7 +4145,7 @@ textarea.p60-form-control {
   background: color-mix(in srgb, currentColor 8%, transparent);
   text-decoration: none;
 }
-/* The feedback-loop accordion (2026-07-21): latest note + attendance history — renders only when
+/* The feedback-loop accordion (2026-07-21): latest note + attendance history, renders only when
    a course runner actually recorded something. */
 .member-course-feedback {
   margin-top: 0.6rem;
@@ -4129,6 +4207,8 @@ textarea.p60-form-control {
 }
 .member-course-attendance li:last-child { border-bottom: none; }
 .member-course-attendance li.is-absent { opacity: 0.7; }
+/* Which class this mark was, for a learner who attends more than one. */
+.member-course-attendance-class { display: block; font-size: 0.8em; font-style: normal; opacity: 0.75; }
 
 /* C1.9 breaks (informational) + C1.8 course materials (presigned downloads). */
 .member-course-breaks {
@@ -4147,7 +4227,7 @@ textarea.p60-form-control {
   text-transform: uppercase;
   opacity: 0.7;
 }
-/* Download CHIPS (user, 2026-07-22): the whole pill is the button — unmistakably tappable. */
+/* Download CHIPS (user, 2026-07-22): the whole pill is the button, unmistakably tappable. */
 .member-resource-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.45rem; }
 .member-resource-chip {
   display: inline-flex;
@@ -4167,7 +4247,7 @@ textarea.p60-form-control {
 }
 .member-resource-chip-size { font-weight: 400; opacity: 0.65; font-size: 0.85rem; }
 
-/* "Billing & payment methods" (user, 2026-07-22): the billing half — one line per ongoing
+/* "Billing & payment methods" (user, 2026-07-22): the billing half, one line per ongoing
    commitment (a family subscription = ONE line: total + who it covers). */
 .members-subsection-title {
   font-size: 1.05rem;
@@ -4193,7 +4273,7 @@ textarea.p60-form-control {
 .member-billing-detail { font-size: 0.9rem; margin-top: 0.15rem; }
 .member-billing-pastdue { color: var(--accent, #d33); font-weight: 600; }
 
-/* The course TITLE BAR (user, 2026-07-22): a distinct full-width band at the top of the card —
+/* The course TITLE BAR (user, 2026-07-22): a distinct full-width band at the top of the card , 
    bleeds to the card edges via negative margins, slightly larger type. */
 .member-course-title-bar {
   margin: -1rem -1.1rem 0.35rem;
@@ -4206,7 +4286,7 @@ textarea.p60-form-control {
 }
 
 /* Grouped course card (2026-07-22): the course owns venue/breaks/materials once; each PERSON is
-   an ACCORDION row — a full-width, obviously-tappable bar (chevron + hover), default collapsed,
+   an ACCORDION row, a full-width, obviously-tappable bar (chevron + hover), default collapsed,
    one open at a time. */
 .member-course-people {
   margin-top: 0.85rem;
@@ -4310,7 +4390,7 @@ textarea.p60-form-control {
   flex-wrap: wrap;
 }
 
-/* Courses picker refinement (2026-07-19): tap-to-select cards — the native checkbox/radio is
+/* Courses picker refinement (2026-07-19): tap-to-select cards, the native checkbox/radio is
    visually hidden (kept in the DOM for keyboard + screen-reader semantics); selection reads as
    the highlighted card. The footer is an itemised order summary instead of a one-line count. */
 .course-variant-card,
@@ -4430,7 +4510,7 @@ textarea.p60-form-control {
   font-weight: 600;
 }
 
-/* ---- Prayer timetable page (worship WP5) — theme-neutral: borders/highlights derive from
+/* ---- Prayer timetable page (worship WP5), theme-neutral: borders/highlights derive from
    currentColor so every template's palette carries through. ---- */
 .pt-head {
   display: flex;
@@ -4505,7 +4585,7 @@ textarea.p60-form-control {
   opacity: 0.7;
 }
 
-/* Small screens: the month table becomes stacked day cards — no horizontal scrolling. */
+/* Small screens: the month table becomes stacked day cards, no horizontal scrolling. */
 .pt-cards {
   display: none;
   list-style: none;
@@ -4583,7 +4663,7 @@ textarea.p60-form-control {
   font-size: 0.92rem;
 }
 
-/* ── People / team cards — desktop grid, single column on phones ───────────────────────────── */
+/* ── People / team cards, desktop grid, single column on phones ───────────────────────────── */
 .people-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
@@ -4614,29 +4694,29 @@ textarea.p60-form-control {
   .people-grid { grid-template-columns: 1fr; }
 }
 
-/* ── Impact map island (WP4) — the OVERLAY borrows the theme: pins wear --marker (a brand accent by
+/* ── Impact map island (WP4), the OVERLAY borrows the theme: pins wear --marker (a brand accent by
    default), the card is a themed --surface. The BASEMAP colour is derived by the map island from the
-   theme + --map-mode (see lib/mapTheme.ts). Brand on the overlay, neutrals on the map — the recipe
+   theme + --map-mode (see lib/mapTheme.ts). Brand on the overlay, neutrals on the map, the recipe
    that stays legible on any theme. Templates restyle any of this via the tokens or these classes. */
 .impact-map { margin: 24px 0; }
 .impact-map-head h2 { margin: 0 0 6px; }
 .impact-map-intro { margin: 0 0 14px; opacity: 0.85; }
 .impact-map-stats { margin: 0 0 14px; color: var(--muted); font-weight: 600; letter-spacing: 0.01em; }
 /* The stable stage, shaped like THE WORLD BAND ITSELF: the island's planet view is all 360° of
-   longitude by 84°N–58°S (whole Greenland in, only the polar void and Antarctica trimmed), which in
-   Web Mercator is a 1.497:1 box — so a frame with that exact ratio holds the full planet edge to
+   longitude by 84°N-58°S (whole Greenland in, only the polar void and Antarctica trimmed), which in
+   Web Mercator is a 1.497:1 box, so a frame with that exact ratio holds the full planet edge to
    edge, full width AND full height, at any screen size. A ratio wider than the band (a max-height
    clamp once made it so on large screens) turns the fit height-constrained and the world renders
-   NARROWER than the frame — dead bars at the sides; a narrower ratio (min-height on phones) just
+   NARROWER than the frame, dead bars at the sides; a narrower ratio (min-height on phones) just
    adds benign vertical margin. Relative + clipped so MapLibre always has a real box and can never
    escape it. Keep this ratio in step with the island's planet bounds. */
 .impact-map-stage { position: relative; width: 100%; aspect-ratio: 1.497; min-height: 300px;
   border-radius: 14px; overflow: hidden; }
   /* width:100% is LOAD-BEARING: with height pinned by min-height and width left auto, CSS derives
-     width FROM the aspect-ratio (300 x 1.497 = 449px) — on phones the stage overflowed the page
+     width FROM the aspect-ratio (300 x 1.497 = 449px), on phones the stage overflowed the page
      sideways, shoving every other section into a lopsided "left with a right gutter" layout. Width
      pinned, the ratio yields height and min-height only ever makes the stage TALLER. */
-/* MOBILE BREAKOUT: a map is a canvas — every pixel is information, nothing needs a margin — so on
+/* MOBILE BREAKOUT: a map is a canvas, every pixel is information, nothing needs a margin, so on
    phones it bleeds edge to edge (media bleeds, prose gutters: the hero already sets the rhythm).
    Cooperative gestures keep page-scrolling safe over the full-width canvas. */
 @media (max-width: 640px) {
@@ -4662,7 +4742,7 @@ textarea.p60-form-control {
    card on every screen size, as it always has. */
 .impact-map-card--small-screens { display: none; }
 @media (max-width: 640px) {
-  /* Full width, flush under the full-bleed map — the two read as one attached sheet (the same
+  /* Full width, flush under the full-bleed map, the two read as one attached sheet (the same
      breakout as the donate card; the hairline top border is the seam between map and card). */
   .impact-map-card--small-screens {
     display: block;
@@ -4685,10 +4765,10 @@ textarea.p60-form-control {
    Sized with width/height (NOT inset) because MapLibre forces position:relative on this element,
    which would defeat absolute insets and collapse the box to zero height. */
 .impact-map-gl { width: 100%; height: 100%; }
-/* Live-map markers are a MapLibre circle layer (WebGL) — they scale with zoom and take their colour
-   from --marker (circle-color) — so there is no DOM marker element to style here. The pin canvas
+/* Live-map markers are a MapLibre circle layer (WebGL), they scale with zoom and take their colour
+   from --marker (circle-color), so there is no DOM marker element to style here. The pin canvas
    fallback above keeps its own .impact-map-pin dots for the no-tiles case. */
-/* The INLINE marker card (a MapLibre popup anchored at the clicked marker — where "See more"
+/* The INLINE marker card (a MapLibre popup anchored at the clicked marker, where "See more"
    lives): the shell takes the theme's surface; the tip is recoloured per anchor side to match. */
 .impact-map-popup .maplibregl-popup-content { background: var(--surface); color: var(--ink);
   border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);