/*
  MemberSpark design system: tokens.
  Mirrors tokens.json: the two files carry the same values, and
  tests/design-system-check.ps1 holds them together. Change tokens.json first.

  Light is the default. A visitor whose system asks for dark gets dark,
  unless the page sets data-theme="light" on <html>. data-theme="dark"
  forces dark.
*/

:root {
  color-scheme: light dark;
  --ms-type-font-display: 'Bricolage Grotesque', Figtree, 'Segoe UI', system-ui, sans-serif;
  --ms-type-font-body: Figtree, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ms-type-size-sm: 0.875rem;
  --ms-type-size-base: 1rem;
  --ms-type-size-lg: 1.125rem;
  --ms-type-size-h3: 1.25rem;
  --ms-type-size-h2: 1.75rem;
  --ms-type-size-h1: 2.5rem;
  --ms-type-size-display: 3.25rem;
  --ms-type-line-height: 1.375;
  --ms-type-line-height-tight: 1.15;
  --ms-type-weight-regular: 400;
  --ms-type-weight-medium: 600;
  --ms-type-weight-bold: 700;
  --ms-type-weight-heavy: 800;
  --ms-space-1: 0.25rem;
  --ms-space-2: 0.5rem;
  --ms-space-3: 0.75rem;
  --ms-space-4: 1rem;
  --ms-space-5: 1.5rem;
  --ms-space-6: 2rem;
  --ms-space-7: 3rem;
  --ms-space-8: 4rem;
  --ms-space-gutter: clamp(1.1rem, 4vw, 3rem);
  --ms-radius-sm: 10px;
  --ms-radius-md: 12px;
  --ms-radius-lg: 16px;
  --ms-radius-xl: 18px;
  --ms-radius-pill: 999px;
  --ms-size-tap: 44px;
  --ms-size-header-row-min: 56px;
  --ms-size-header-row-max: 80px;
  --ms-size-icon: 20px;
  --ms-size-tile: 36px;
  --ms-size-reading: 46rem;
  --ms-size-page: 1180px;
  --ms-brand-name: "MemberSpark";
  --ms-brand-motto: "Crafted by makers, for makers.";
  --ms-brand-stripe-1: #a4bc45;
  --ms-brand-stripe-2: #00eeb9;
  --ms-brand-stripe-3: #07b9a7;
  --ms-brand-stripe-4: #372f8f;
  --ms-brand-stripe-5: #eb208c;
  --ms-brand-stripe-6: #f9552c;
  --ms-brand-stripe-7: #fa8c2e;

  --ms-color-page: #faf8f3;
  --ms-color-surface: #ffffff;
  --ms-color-surface-muted: #f1eee6;
  --ms-color-line: #e4dfd3;
  --ms-color-line-strong: #858072;
  --ms-color-text: #142a5c;
  --ms-color-text-muted: #4b5878;
  --ms-color-link: #2050c8;
  --ms-color-link-hover: #0f2463;
  --ms-color-focus: #1d3a8a;
  --ms-color-accent: #f5a623;
  --ms-color-on-accent: #15172a;
  --ms-color-primary: #1d3a8a;
  --ms-color-on-primary: #ffffff;
  --ms-color-danger: #b3261e;
  --ms-color-badge-paid-bg: #e3f4ea;
  --ms-color-badge-paid-fg: #17603c;
  --ms-color-badge-due-bg: #fff3dc;
  --ms-color-badge-due-fg: #7a4a00;
  --ms-color-badge-lapsed-bg: #fbe7e4;
  --ms-color-badge-lapsed-fg: #8f2a20;
  --ms-color-tile-gold: #f5a623;
  --ms-color-tile-blue: #7fb3ff;
  --ms-color-tile-violet: #c7a6ff;
  --ms-color-tile-green: #8fe0b4;
  --ms-color-tile-coral: #ff7a59;
  --ms-color-on-tile: #15172a;
  --ms-shadow-card: 0 1px 2px rgba(20, 42, 92, 0.06), 0 8px 24px rgba(20, 42, 92, 0.06);
  --ms-shadow-raised: 0 2px 4px rgba(20, 42, 92, 0.08), 0 12px 32px rgba(20, 42, 92, 0.12);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ms-color-page: #faf8f3;
  --ms-color-surface: #ffffff;
  --ms-color-surface-muted: #f1eee6;
  --ms-color-line: #e4dfd3;
  --ms-color-line-strong: #858072;
  --ms-color-text: #142a5c;
  --ms-color-text-muted: #4b5878;
  --ms-color-link: #2050c8;
  --ms-color-link-hover: #0f2463;
  --ms-color-focus: #1d3a8a;
  --ms-color-accent: #f5a623;
  --ms-color-on-accent: #15172a;
  --ms-color-primary: #1d3a8a;
  --ms-color-on-primary: #ffffff;
  --ms-color-danger: #b3261e;
  --ms-color-badge-paid-bg: #e3f4ea;
  --ms-color-badge-paid-fg: #17603c;
  --ms-color-badge-due-bg: #fff3dc;
  --ms-color-badge-due-fg: #7a4a00;
  --ms-color-badge-lapsed-bg: #fbe7e4;
  --ms-color-badge-lapsed-fg: #8f2a20;
  --ms-color-tile-gold: #f5a623;
  --ms-color-tile-blue: #7fb3ff;
  --ms-color-tile-violet: #c7a6ff;
  --ms-color-tile-green: #8fe0b4;
  --ms-color-tile-coral: #ff7a59;
  --ms-color-on-tile: #15172a;
  --ms-shadow-card: 0 1px 2px rgba(20, 42, 92, 0.06), 0 8px 24px rgba(20, 42, 92, 0.06);
  --ms-shadow-raised: 0 2px 4px rgba(20, 42, 92, 0.08), 0 12px 32px rgba(20, 42, 92, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ms-color-page: #10121f;
    --ms-color-surface: #1f2238;
    --ms-color-surface-muted: #262a45;
    --ms-color-line: #33375a;
    --ms-color-line-strong: #737793;
    --ms-color-text: #f3f4f8;
    --ms-color-text-muted: #9ea4c4;
    --ms-color-link: #9ec2ff;
    --ms-color-link-hover: #c7dbff;
    --ms-color-focus: #ffd27a;
    --ms-color-accent: #f5a623;
    --ms-color-on-accent: #15172a;
    --ms-color-primary: #f5a623;
    --ms-color-on-primary: #15172a;
    --ms-color-danger: #ff8a80;
    --ms-color-badge-paid-bg: #173d2a;
    --ms-color-badge-paid-fg: #8fe0b4;
    --ms-color-badge-due-bg: #45320a;
    --ms-color-badge-due-fg: #ffd27a;
    --ms-color-badge-lapsed-bg: #4d1f1a;
    --ms-color-badge-lapsed-fg: #ffb4a8;
    --ms-color-tile-gold: #f5a623;
    --ms-color-tile-blue: #7fb3ff;
    --ms-color-tile-violet: #c7a6ff;
    --ms-color-tile-green: #8fe0b4;
    --ms-color-tile-coral: #ff7a59;
    --ms-color-on-tile: #15172a;
    --ms-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --ms-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ms-color-page: #10121f;
  --ms-color-surface: #1f2238;
  --ms-color-surface-muted: #262a45;
  --ms-color-line: #33375a;
  --ms-color-line-strong: #737793;
  --ms-color-text: #f3f4f8;
  --ms-color-text-muted: #9ea4c4;
  --ms-color-link: #9ec2ff;
  --ms-color-link-hover: #c7dbff;
  --ms-color-focus: #ffd27a;
  --ms-color-accent: #f5a623;
  --ms-color-on-accent: #15172a;
  --ms-color-primary: #f5a623;
  --ms-color-on-primary: #15172a;
  --ms-color-danger: #ff8a80;
  --ms-color-badge-paid-bg: #173d2a;
  --ms-color-badge-paid-fg: #8fe0b4;
  --ms-color-badge-due-bg: #45320a;
  --ms-color-badge-due-fg: #ffd27a;
  --ms-color-badge-lapsed-bg: #4d1f1a;
  --ms-color-badge-lapsed-fg: #ffb4a8;
  --ms-color-tile-gold: #f5a623;
  --ms-color-tile-blue: #7fb3ff;
  --ms-color-tile-violet: #c7a6ff;
  --ms-color-tile-green: #8fe0b4;
  --ms-color-tile-coral: #ff7a59;
  --ms-color-on-tile: #15172a;
  --ms-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --ms-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
}

/*
  Product accents. A product sets data-product="name" on <html> (or on one element, to show
  several products on a page) and takes --ms-color-accent and --ms-color-on-accent: the main button, the logo tile and
  the chips. These blocks come after the theme blocks and are more specific, so
  the dark ones beat the theme's own dark accent. An accent is a fill, never
  the colour of text on the page.
*/
:root [data-product="memberspark"],
:root[data-product="memberspark"] {
  --ms-color-accent: #f5a623;
  --ms-color-on-accent: #15172a;
}

:root [data-product="galleryspark"],
:root[data-product="galleryspark"] {
  --ms-color-accent: #6b4fc8;
  --ms-color-on-accent: #ffffff;
}

:root [data-product="fundingspark"],
:root[data-product="fundingspark"] {
  --ms-color-accent: #6b4fc8;
  --ms-color-on-accent: #ffffff;
}

:root [data-product="tasksparkle"],
:root[data-product="tasksparkle"] {
  --ms-color-accent: #2b5fc7;
  --ms-color-on-accent: #ffffff;
}

:root [data-product="societyspark"],
:root[data-product="societyspark"] {
  --ms-color-accent: #2a7a3f;
  --ms-color-on-accent: #ffffff;
}

:root [data-product="grabaspot"],
:root[data-product="grabaspot"] {
  --ms-color-accent: #0f6e64;
  --ms-color-on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-product="memberspark"],
  :root:not([data-theme="light"])[data-product="memberspark"] {
    --ms-color-accent: #f5a623;
    --ms-color-on-accent: #15172a;
  }

  :root:not([data-theme="light"]) [data-product="galleryspark"],
  :root:not([data-theme="light"])[data-product="galleryspark"] {
    --ms-color-accent: #7b5fd8;
    --ms-color-on-accent: #ffffff;
  }

  :root:not([data-theme="light"]) [data-product="fundingspark"],
  :root:not([data-theme="light"])[data-product="fundingspark"] {
    --ms-color-accent: #7b5fd8;
    --ms-color-on-accent: #ffffff;
  }

  :root:not([data-theme="light"]) [data-product="tasksparkle"],
  :root:not([data-theme="light"])[data-product="tasksparkle"] {
    --ms-color-accent: #3a6fd8;
    --ms-color-on-accent: #ffffff;
  }

  :root:not([data-theme="light"]) [data-product="societyspark"],
  :root:not([data-theme="light"])[data-product="societyspark"] {
    --ms-color-accent: #2e7d32;
    --ms-color-on-accent: #ffffff;
  }

  :root:not([data-theme="light"]) [data-product="grabaspot"],
  :root:not([data-theme="light"])[data-product="grabaspot"] {
    --ms-color-accent: #168075;
    --ms-color-on-accent: #ffffff;
  }
}

:root[data-theme="dark"] [data-product="memberspark"],
:root[data-theme="dark"][data-product="memberspark"] {
  --ms-color-accent: #f5a623;
  --ms-color-on-accent: #15172a;
}

:root[data-theme="dark"] [data-product="galleryspark"],
:root[data-theme="dark"][data-product="galleryspark"] {
  --ms-color-accent: #7b5fd8;
  --ms-color-on-accent: #ffffff;
}

:root[data-theme="dark"] [data-product="fundingspark"],
:root[data-theme="dark"][data-product="fundingspark"] {
  --ms-color-accent: #7b5fd8;
  --ms-color-on-accent: #ffffff;
}

:root[data-theme="dark"] [data-product="tasksparkle"],
:root[data-theme="dark"][data-product="tasksparkle"] {
  --ms-color-accent: #3a6fd8;
  --ms-color-on-accent: #ffffff;
}

:root[data-theme="dark"] [data-product="societyspark"],
:root[data-theme="dark"][data-product="societyspark"] {
  --ms-color-accent: #2e7d32;
  --ms-color-on-accent: #ffffff;
}

:root[data-theme="dark"] [data-product="grabaspot"],
:root[data-theme="dark"][data-product="grabaspot"] {
  --ms-color-accent: #168075;
  --ms-color-on-accent: #ffffff;
}

/*
  MemberSpark design system: components.
  Load tokens.css first. Every colour, size and font here comes from a --ms-
  token, so the light and dark themes need nothing of their own.
  tests/design-system-check.ps1 holds the 44px floor and the token-only rule.
*/

/* --- Page basics ----------------------------------------------------------- */
/* The text rhythm is stated once, here (site-standards, Room to tap and read, Rec 2).
   :where() keeps these base rules below any component rule. */

.ms-page {
  margin: 0;
  background: var(--ms-color-page);
  color: var(--ms-color-text);
  font-family: var(--ms-type-font-body);
  font-size: var(--ms-type-size-base);
  line-height: var(--ms-type-line-height);
}

:where(.ms-page) p {
  margin: 1em 0;
}

.ms-page h1,
.ms-page h2,
.ms-page h3 {
  font-family: var(--ms-type-font-display);
  line-height: var(--ms-type-line-height-tight);
  font-weight: var(--ms-type-weight-heavy);
}

.ms-page h1 { font-size: var(--ms-type-size-h1); margin: 0.2rem 0 1rem; }
.ms-page h2 { font-size: var(--ms-type-size-h2); margin: 1.8rem 0 0.7rem; }
.ms-page h3 { font-size: var(--ms-type-size-h3); margin: 0.7rem 0 0.2rem; }

:where(.ms-page) a {
  color: var(--ms-color-link);
}

:where(.ms-page) a:hover {
  color: var(--ms-color-link-hover);
}

.ms-wrap {
  max-width: var(--ms-size-page);
  margin: 0 auto;
  padding: 0 var(--ms-space-gutter);
}

.ms-reading {
  max-width: var(--ms-size-reading);
}

.ms-page :focus-visible {
  outline: 3px solid var(--ms-color-focus);
  outline-offset: 2px;
}

/* The four-point spark mark. It takes its colour from the accent. */
.ms-spark {
  width: 1.5em;
  height: 1.5em;
  color: var(--ms-color-accent);
  flex: none;
}

/* --- Header -------------------------------------------------------------- */
/*
  Desktop: one row, standing at the token's 56px (80px cap). Brand left,
  tabs in words after it, then the right-hand group together with no gaps:
  Help, Feedback, dark toggle, account, settings. Phone: row 1 is the same
  minus the tabs; row 2 carries every tab.
  (site-standards, Header standard, The rows, defined.)
*/

.ms-header {
  background: var(--ms-color-surface);
  border-bottom: 1px solid var(--ms-color-line);
}

.ms-header__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--ms-size-header-row-min);
  max-height: var(--ms-size-header-row-max);
  max-width: var(--ms-size-page);
  margin: 0 auto;
  padding: 0 var(--ms-space-gutter);
}

.ms-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-size-tap);
  color: var(--ms-color-text);
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-lg);
  font-weight: var(--ms-type-weight-heavy);
  text-decoration: none;
  min-width: 0;
}

/* On a narrow phone the name gives way, never the 44px buttons beside it. */
.ms-header__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-header__tabs {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.ms-header__group {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  flex: none;
}

/* Row 2 stands only on a phone, and carries the whole tab set. */
.ms-header__row--tabs {
  display: none;
}

@media (max-width: 40rem) {
  .ms-header__row .ms-header__tabs {
    display: none;
  }

  .ms-header__row--tabs {
    display: flex;
    overflow: hidden;
  }

  .ms-header__row--tabs .ms-header__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
}

.ms-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  padding: 0 var(--ms-space-4);
  border-radius: var(--ms-radius-pill);
  color: var(--ms-color-text-muted);
  font-weight: var(--ms-type-weight-medium);
  text-decoration: none;
}

.ms-tab:hover,
.ms-tab[aria-current="page"] {
  background: var(--ms-color-surface-muted);
  color: var(--ms-color-text);
}

/* An icon-only control: the Help door, the dark toggle, settings. A 20px
   Lucide drawing in a 44px circle. It carries a spoken name (aria-label). */
.ms-icon-btn {
  display: inline-grid;
  place-items: center;
  min-width: var(--ms-size-tap);
  min-height: var(--ms-size-tap);
  padding: 0;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: transparent;
  color: var(--ms-color-text);
  cursor: pointer;
}

.ms-icon-btn:hover {
  background: var(--ms-color-surface-muted);
}

.ms-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* SVG ignores the hidden attribute unless a rule says so. A button holding
   several faces (the theme button) shows only the one not hidden. */
.ms-icon-btn svg[hidden] {
  display: none;
}


/* --- Buttons --------------------------------------------------------------- */
/* One filled primary per view. A danger button names what it destroys. */

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-size-tap);
  padding: 0.65rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--ms-radius-pill);
  font: inherit;
  font-weight: var(--ms-type-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.ms-btn:disabled,
.ms-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The main button is the product's accent (data-product), not the page's primary. */
.ms-btn--primary {
  background: var(--ms-color-accent);
  color: var(--ms-color-on-accent);
}

.ms-btn--primary:hover {
  box-shadow: var(--ms-shadow-raised);
}

.ms-btn--secondary {
  background: var(--ms-color-surface);
  border-color: var(--ms-color-line-strong);
  color: var(--ms-color-text);
}

.ms-btn--secondary:hover {
  border-color: var(--ms-color-text);
}

.ms-btn--quiet {
  background: transparent;
  color: var(--ms-color-text);
}

.ms-btn--quiet:hover {
  background: var(--ms-color-surface-muted);
}

.ms-btn--danger {
  background: var(--ms-color-surface);
  border-color: var(--ms-color-danger);
  color: var(--ms-color-danger);
}

.ms-btn--danger:hover {
  background: var(--ms-color-danger);
  color: var(--ms-color-surface);
}

/* --- Cards ----------------------------------------------------------------- */

.ms-card {
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-line);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-card);
  padding: var(--ms-space-5);
}

.ms-card--muted {
  background: var(--ms-color-surface-muted);
  box-shadow: none;
}

/* --- Fields ---------------------------------------------------------------- */
/* A field's error stands beside that field, in plain words. */

.ms-field {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}

.ms-label {
  font-weight: var(--ms-type-weight-medium);
}

.ms-input {
  min-height: var(--ms-size-tap);
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  font: inherit;
}

textarea.ms-input {
  padding: var(--ms-space-3);
}

.ms-input[aria-invalid="true"] {
  border-color: var(--ms-color-danger);
}

.ms-hint {
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-sm);
}

.ms-error {
  color: var(--ms-color-danger);
  font-size: var(--ms-type-size-sm);
  font-weight: var(--ms-type-weight-medium);
}

/* --- Badges ---------------------------------------------------------------- */

.ms-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: var(--ms-radius-pill);
  font-size: var(--ms-type-size-sm);
  font-weight: var(--ms-type-weight-bold);
  white-space: nowrap;
}

.ms-badge--paid {
  background: var(--ms-color-badge-paid-bg);
  color: var(--ms-color-badge-paid-fg);
}

.ms-badge--due {
  background: var(--ms-color-badge-due-bg);
  color: var(--ms-color-badge-due-fg);
}

.ms-badge--lapsed {
  background: var(--ms-color-badge-lapsed-bg);
  color: var(--ms-color-badge-lapsed-fg);
}

/* --- Tables ---------------------------------------------------------------- */

.ms-table {
  width: 100%;
  border-collapse: collapse;
}

.ms-table th {
  padding: var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-line);
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-sm);
  font-weight: var(--ms-type-weight-medium);
  text-align: left;
}

.ms-table td {
  padding: var(--ms-space-3) var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-line);
}

.ms-table tr:last-child td {
  border-bottom: 0;
}

/* A list of people shows 10 at a time; Show all renders the whole list
   (site-standards, Room to tap and read, Rec 5). */
.ms-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ms-size-tap);
  border: 0;
  border-top: 1px solid var(--ms-color-line);
  background: transparent;
  color: var(--ms-color-link);
  font: inherit;
  font-weight: var(--ms-type-weight-bold);
  cursor: pointer;
}

.ms-show-all:hover {
  background: var(--ms-color-surface-muted);
}

/* --- Product tiles ----------------------------------------------------------- */

.ms-tile {
  display: inline-grid;
  place-items: center;
  width: var(--ms-size-tile);
  height: var(--ms-size-tile);
  flex: none;
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-accent);
  color: var(--ms-color-on-accent);
  font-weight: var(--ms-type-weight-heavy);
}

/* A coloured tile that is not the product's own: take it from the splash tiles. */
.ms-tile--gold,
.ms-tile--blue,
.ms-tile--violet,
.ms-tile--green,
.ms-tile--coral { color: var(--ms-color-on-tile); }
.ms-tile--gold { background: var(--ms-color-tile-gold); }

.ms-tile--blue { background: var(--ms-color-tile-blue); }
.ms-tile--violet { background: var(--ms-color-tile-violet); }
.ms-tile--green { background: var(--ms-color-tile-green); }
.ms-tile--coral { background: var(--ms-color-tile-coral); }

/*
  The product logo: the spark in the on-accent colour on a tile of the
  product's accent, so every Spark product shares one mark and one shape.
  Everywhere else the spark stands — the brand line, an empty state — it
  takes the accent as its own colour, through .ms-spark.
*/
.ms-logo {
  display: inline-grid;
  place-items: center;
  width: var(--ms-size-tile);
  height: var(--ms-size-tile);
  flex: none;
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-accent);
  color: var(--ms-color-on-accent);
}

.ms-logo svg {
  width: 22px;
  height: 22px;
}

/* A chip: a short count or state, in the product's accent. */
.ms-chip {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-color-accent);
  color: var(--ms-color-on-accent);
  font-size: var(--ms-type-size-sm);
  font-weight: var(--ms-type-weight-bold);
}

/* --- Footer closing block ---------------------------------------------------- */
/*
  The site's link line stands above the closing block. The block itself:
  the seven-stripe bar, then three lines:
  <Product> (c) <year> / By MemberSpark [flag], a BC non-profit / the motto.
  The motto comes from --ms-brand-motto, so it is changed in one place.
  The flag is an SVG at text height, never an emoji.
  (site-standards, Site footer standard.)
*/

.ms-footer {
  padding: var(--ms-space-6) 0 var(--ms-space-7);
  color: var(--ms-color-text-muted);
}

.ms-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--ms-space-2);
  margin: 0 0 var(--ms-space-4);
  padding: 0;
  list-style: none;
}

.ms-footer__links li + li::before {
  content: "\00b7";
  margin-right: var(--ms-space-2);
}

.ms-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  color: var(--ms-color-text-muted);
}

.ms-footer__bar {
  height: 6px;
  margin-bottom: var(--ms-space-4);
  border-radius: var(--ms-radius-pill);
  background: linear-gradient(90deg,
    var(--ms-brand-stripe-1) 0 14.29%,
    var(--ms-brand-stripe-2) 14.29% 28.57%,
    var(--ms-brand-stripe-3) 28.57% 42.86%,
    var(--ms-brand-stripe-4) 42.86% 57.14%,
    var(--ms-brand-stripe-5) 57.14% 71.43%,
    var(--ms-brand-stripe-6) 71.43% 85.71%,
    var(--ms-brand-stripe-7) 85.71% 100%);
}

.ms-footer__closing {
  display: grid;
  gap: 0;
  margin: 0;
}

.ms-footer__closing p {
  margin: 0;
}

.ms-footer__closing a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  color: var(--ms-color-link);
}

.ms-footer__product {
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-bold);
}

.ms-footer__flag {
  width: auto;
  height: 1em;
  margin-left: 0.25em;
  vertical-align: -0.125em;
}

.ms-footer__motto::before {
  content: var(--ms-brand-motto);
}

/* A centred site centres the block; a left-aligned site leaves it left. */
.ms-footer--center {
  text-align: center;
}

.ms-footer--center .ms-footer__links {
  justify-content: center;
}

/* FundingSpark theme. build_site.py puts it in every page.

   Light and dark: the page follows the visitor's system setting ("Auto") unless they pick Light
   or Dark with the switch in the header (site/directives/theme-switch.html), which puts
   data-theme="light" or data-theme="dark" on <html>. The dark colours are written twice below
   (once for Auto, once for a forced Dark) because plain CSS cannot share them.

   Spark family look (#102): site/design-system/ (pinned copy of MemberSpark's design/system) supplies the
   --ms-* tokens; build_site.py puts its tokens.css and components.css in front of this file in the one
   stylesheet. The neutral colours, the links, the focus ring, the shadows and the fonts below are mapped
   onto those tokens (so Light, Dark and Auto come from the system), and the product accent (data-product=
   "fundingspark" on <html>: deep purple, white spark) fills the main buttons, selected states and the logo.
   The kind, type and status badge colours are FundingSpark's own (docs/DECISIONS.md colour plan).

   Every rule here sets its values explicitly. The two font families (below, fs-v6y.6) are served
   from our own /fonts/, not fetched from Google. */

/* Bricolage Grotesque (headings) and Figtree (text), the design system's two fonts, self-hosted (OFL, site/fonts/OFL-*.txt).
   Latin subsets (they cover French accents), the same files MemberSpark ships. Each is one variable font, so one weight
   range per file. Each filename carries a content hash (the first eight hex characters of the file's SHA-256): when a
   file's bytes change its name changes, here and in the preloads in site/directives/head.html, and the name earns the
   one-year immutable cache in _headers.
   font-display: swap, with both files preloaded on every page (Site Standards Part 9, Rec 3: "font-display: swap with
   no preload guarantees the flicker it causes"). This replaces the 2026-09-27 "optional" choice (fs-s6s.1), which kept
   the fallback font for a whole visit whenever the file missed its 100ms window. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 800; font-display: swap;
             src: url(/fonts/bricolage-grotesque-latin.a79fdb52.woff2) format('woff2');
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
             src: url(/fonts/figtree-latin.4ba7d3d0.woff2) format('woff2');
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Neutrals, links, focus and shadows come from the design system's tokens (they follow the theme). */
  --paper: var(--ms-color-page);
  --paper-2: var(--ms-color-surface-muted);
  --card: var(--ms-color-surface);
  --ink: var(--ms-color-text);
  --ink-2: color-mix(in srgb, var(--ms-color-text) 45%, var(--ms-color-text-muted));
  --ink-3: var(--ms-color-text-muted);
  --rule: var(--ms-color-line);
  --rule-2: var(--ms-color-line-strong);
  --link: var(--ms-color-link);
  --focus: var(--ms-color-focus);
  --shadow: var(--ms-shadow-card);
  --shadow-lift: var(--ms-shadow-raised);
  /* The product accent (a fill, never text): main buttons, selected states, the logo tile. */
  --accent: var(--ms-color-accent);
  --on-accent: var(--ms-color-on-accent);
  /* Brand ink for text and thin lines (nav, numbers, outlines): the system's primary in light, its link blue in dark. */
  --teal: var(--ms-color-primary);
  --teal-2: var(--ms-color-link-hover);
  --teal-soft: color-mix(in srgb, var(--ms-color-accent) 12%, var(--ms-color-surface));
  /* Legacy "gold" names, kept for the many rules that use them: amber text on amber (the system's due badge pair),
     and the accent for filled buttons and counts. */
  --gold: var(--ms-color-badge-due-fg);
  --gold-ink: var(--ms-color-badge-due-fg);
  --gold-soft: var(--ms-color-badge-due-bg);
  --on-gold: var(--ms-color-on-accent);
  --gold-fill: var(--ms-color-accent);
  /* The home hero is dark blue in both themes. */
  --hero-1: var(--ms-color-primary);
  --hero-2: color-mix(in srgb, var(--ms-color-primary) 55%, var(--ms-color-text));
  --hero-ink: var(--ms-color-on-primary);
  --hero-ink-2: color-mix(in srgb, var(--ms-color-on-primary) 85%, var(--ms-color-primary));
  --urgent: #a8261c;
  --urgent-soft: #fbe9e6;
  --soon: #7a4d00;
  --soon-soft: #fdf0d9;
  --closed: #5c6468;
  --closed-soft: #eeebe5;
  /* fs-73s9.24 (decided 2026-09-29, "Love the color plan") laid out twelve theme tokens, one every 30
     degrees of the colour wheel - warm half for funding kinds (--k-*), cool half for resource types
     (--t-*). fs-5sa3.1 (decided 2026-09-29, "That's the one! Yes please") replaced the six --k-*
     funding-kind tokens with his own exact pick, which does not sit on the strict 30-degree wheel
     (two of the six are only ~2 degrees apart in hue; they read as different colours because one is
     far less saturated, not because of hue spacing). fs-5sa3.2 (decided 2026-09-29) re-assigned the
     same six hex pairs to match the home page's tile order (largest first): "Oh darn I thought the
     color order would be the large to small tiles color order" ... "Let's swap brown and yellow.
     Calls are more exciting as is yellow." Grants pink, Scholarships red, Residencies orange, Prizes
     gold, Calls yellow, Fellowships brown. --k-prize/--k-residency's orange text is one shade darker
     than the hex the owner actually saw (#b54708 -> #ad4408): that pair was 4.47:1 on its approved
     background, just under the 4.5:1 AA floor for the badges' bold small text; #ad4408 clears it
     (4.79:1) and is not a perceptibly different orange. The six --t-* resource-type tokens are
     untouched, still exactly the fs-73s9.24 wheel: Galleries teal (150), Services cyan (180),
     Communities sky blue (210), Theatres blue (240), Cinemas violet (270), Festivals magenta (300) -
     when Events replaces Services, Events takes the cyan slot. Every kind hue stays >=25 degrees from
     every type hue (tests/test_colour_plan.py) - fs-73s9.24's Scholarship/Call greens had overlapped
     Galleries' green/teal by as little as 30 degrees, all reading as the same green family; the owner's
     approved kind colours are warm (roughly 330-50 degrees) and the closest is ~33 degrees from a type
     hue. [text on soft background] */
  --k-grant: #b0306a;      --k-grant-bg: #fbe0ee;
  --k-scholarship: #b42318; --k-scholarship-bg: #fde2df;
  --k-residency: #ad4408;  --k-residency-bg: #fde5cf;
  --k-prize: #8a5a00;      --k-prize-bg: #fbe7bd;
  --k-fellowship: #7a4a2a; --k-fellowship-bg: #efe1d4;
  --k-call: #806500;       --k-call-bg: #fcefb4;
  --t-gallery: #1c7549;    --t-gallery-bg: #c5f1db;
  --t-service: #1b7172;    --t-service-bg: #c1f0f1;
  --t-community: #2869aa;  --t-community-bg: #dbe9f6;
  --t-theatre: #4545d3;    --t-theatre-bg: #e6e6f9;
  --t-cinema: #883fd2;     --t-cinema-bg: #eee3f9;
  --t-festival: #ac28ac;   --t-festival-bg: #f8dff8;
  /* fs-ikz7.16 (decided 2026-10-03 23:15 PT, P0): the six NEW Vault Types (fs-ikz7.13,
     docs/Taxonomy.md) each reuse the exact hex pair of one --t-* slot above, hue for hue - a new
     name for an already-approved, already-AA colour, not a new one to design or re-approve. The
     --t-* tokens above are untouched and keep colouring the Sub-type row exactly as before; these
     colour the Type row, the home tiles and every card/item badge instead. */
  --vtype-galleries: #1c7549;     --vtype-galleries-bg: #c5f1db;
  --vtype-shops: #1b7172;         --vtype-shops-bg: #c1f0f1;
  --vtype-organizations: #2869aa; --vtype-organizations-bg: #dbe9f6;
  --vtype-venues: #4545d3;        --vtype-venues-bg: #e6e6f9;
  --vtype-skills: #883fd2;        --vtype-skills-bg: #eee3f9;
  --vtype-support: #ac28ac;       --vtype-support-bg: #f8dff8;
  /* Status colours some other UI pieces happened to reuse from the kind wheel above before it had a
     fixed hue plan (fs-73s9.24 regression, BigBoy 2026-09-29): the "how sure we are" check badge and
     the call-for-art money line's "pays"/"free" colour need their own green/teal, independent of
     whatever the kind wheel assigns to Residencies/Grants. */
  --status-good: #2e6337;    --status-good-bg: #e4f1e5;
  --status-partial: #1b5a6e; --status-partial-bg: #e1eef2;
  /* fs-5rlv.3 (D53): "needs human review" gets its own dedicated hue too, on the same fs-73s9.24
     precedent as the other two status colours just above - never a kind/type/vtype wheel colour. */
  --status-review: #7a4ea8; --status-review-bg: #f1e6fb;
  --radius: 12px;
  --radius-s: 8px;
  /* The system's font stacks: Bricolage Grotesque for headings, Figtree for text, then system fonts. Both are
     self-hosted (the @font-face rules at the top of this file), so visitors get them without installing anything. */
  --font-body: var(--ms-type-font-body);
  --font-head: var(--ms-type-font-display);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark: the system's dark tokens do the neutrals; brand ink is its link blue, the hero its dark surfaces. */
    --teal: var(--ms-color-link);
    --teal-2: var(--ms-color-link-hover);
    --hero-1: var(--ms-color-surface-muted);
    --hero-2: var(--ms-color-page);
    --hero-ink: var(--ms-color-text);
    --hero-ink-2: color-mix(in srgb, var(--ms-color-text) 78%, var(--ms-color-surface-muted));
    --urgent: #ff9f93;
    --urgent-soft: #3d1c19;
    --soon: #f3c56a;
    --soon-soft: #33280f;
    --closed: #9eadae;
    --closed-soft: #1f2c31;
    --k-grant: #ce85a6;      --k-grant-bg: #4c2436;
    --k-scholarship: #db817b; --k-scholarship-bg: #53211e;
    --k-residency: #e29264;  --k-residency-bg: #573019;
    --k-prize: #e3a93d;      --k-prize-bg: #574119;
    --k-fellowship: #c59c82; --k-fellowship-bg: #493527;
    --k-call: #e0b824;       --k-call-bg: #574a19;
    --t-gallery: #4dcb8c;    --t-gallery-bg: #1a432f;
    --t-service: #4dcbcb;    --t-service-bg: #194242;
    --t-community: #7cabd9;  --t-community-bg: #223d59;
    --t-theatre: #a3a3e4;    --t-theatre-bg: #323283;
    --t-cinema: #bd98e1;     --t-cinema-bg: #4d2b70;
    --t-festival: #dd8bdd;   --t-festival-bg: #5f245f;
    --vtype-galleries: #4dcb8c;     --vtype-galleries-bg: #1a432f;
    --vtype-shops: #4dcbcb;         --vtype-shops-bg: #194242;
    --vtype-organizations: #7cabd9; --vtype-organizations-bg: #223d59;
    --vtype-venues: #a3a3e4;        --vtype-venues-bg: #323283;
    --vtype-skills: #bd98e1;        --vtype-skills-bg: #4d2b70;
    --vtype-support: #dd8bdd;       --vtype-support-bg: #5f245f;
    --status-good: #9fd6a7;    --status-good-bg: #1b3520;
    --status-partial: #93d0e2; --status-partial-bg: #173640;
    --status-review: #cda6ea; --status-review-bg: #3a2a4a;
  }
}
:root[data-theme="dark"] {
  /* Dark: the system's dark tokens do the neutrals; brand ink is its link blue, the hero its dark surfaces. */
  --teal: var(--ms-color-link);
  --teal-2: var(--ms-color-link-hover);
  --hero-1: var(--ms-color-surface-muted);
  --hero-2: var(--ms-color-page);
  --hero-ink: var(--ms-color-text);
  --hero-ink-2: color-mix(in srgb, var(--ms-color-text) 78%, var(--ms-color-surface-muted));
  --urgent: #ff9f93;
  --urgent-soft: #3d1c19;
  --soon: #f3c56a;
  --soon-soft: #33280f;
  --closed: #9eadae;
  --closed-soft: #1f2c31;
  --k-grant: #ce85a6;      --k-grant-bg: #4c2436;
  --k-scholarship: #db817b; --k-scholarship-bg: #53211e;
  --k-residency: #e29264;  --k-residency-bg: #573019;
  --k-prize: #e3a93d;      --k-prize-bg: #574119;
  --k-fellowship: #c59c82; --k-fellowship-bg: #493527;
  --k-call: #e0b824;       --k-call-bg: #574a19;
  --t-gallery: #4dcb8c;    --t-gallery-bg: #1a432f;
  --t-service: #4dcbcb;    --t-service-bg: #194242;
  --t-community: #7cabd9;  --t-community-bg: #223d59;
  --t-theatre: #a3a3e4;    --t-theatre-bg: #323283;
  --t-cinema: #bd98e1;     --t-cinema-bg: #4d2b70;
  --t-festival: #dd8bdd;   --t-festival-bg: #5f245f;
  --vtype-galleries: #4dcb8c;     --vtype-galleries-bg: #1a432f;
  --vtype-shops: #4dcbcb;         --vtype-shops-bg: #194242;
  --vtype-organizations: #7cabd9; --vtype-organizations-bg: #223d59;
  --vtype-venues: #a3a3e4;        --vtype-venues-bg: #323283;
  --vtype-skills: #bd98e1;        --vtype-skills-bg: #4d2b70;
  --vtype-support: #dd8bdd;       --vtype-support-bg: #5f245f;
  --status-good: #9fd6a7;    --status-good-bg: #1b3520;
  --status-partial: #93d0e2; --status-partial-bg: #173640;
  --status-review: #cda6ea; --status-review-bg: #3a2a4a;
}

/* ---------- Page ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter (fs-s6s.1): a page that needs a vertical scrollbar is otherwise a hair narrower
   than one that does not, so the centred body's margins shift by half the scrollbar's width every
   time a nav tab lands on a page of a different height. Reserving the gutter on every page removes
   that difference regardless of which pages happen to need the scrollbar. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.375;   /* #103, Standards Part 10 Rec 2: body line height 1.375, a 1em gap between paragraphs */
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
  overflow-wrap: break-word;
}
/* A theme change paints at once (2026-11-10: "the dark toggle takes 5 seconds"). The footer script puts
   fs-theme-switching on <html> for the frame in which data-theme changes, so no element runs a colour
   transition while its whole page is restyled. */
.fs-theme-switching, .fs-theme-switching *, .fs-theme-switching *::before, .fs-theme-switching *::after { transition: none !important; }
main { padding-bottom: 8px; }
/* Pages of reading text keep their column to 46rem (Part 10 Rec 2). */
body.reading main { max-width: var(--ms-size-reading); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: var(--ms-type-line-height-tight); font-weight: var(--ms-type-weight-heavy); letter-spacing: -0.01em; }
h1 { font-size: var(--ms-type-size-h1); margin: .5em 0 .4em; font-variation-settings: "opsz" 96; }
h2 { font-size: var(--ms-type-size-h2); margin: 1.8em 0 .5em; }
h3 { font-size: var(--ms-type-size-h3); margin: 1.2em 0 .3em; }
p, ul, ol { margin: 0 0 1em; }
strong, b { color: inherit; font-weight: 700; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; }
table { width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
main > p, main > ul, main > ol { max-width: none; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--gold-soft); color: var(--ink); }
[hidden] { display: none !important; }
.fs-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header and footer (#103: Site and Email Standards Parts 2 and 3) ---------- */
/* The header is the system's .ms-header (site/design-system/components.css). It sticks to the top, because it carries
   wayfinding (Part 2). Each row stands at exactly 56px: it carries no vertical padding and its tallest contents are the
   44px buttons. On a phone a second row of the same 56px carries the full tab set (112px in all), never an overflow
   menu. The gap below the header is at most --ms-space-3 (12px): the first thing in <main> has no top margin. */
body > header { position: sticky; top: 0; z-index: 30; margin-bottom: 8px; }
/* The header carries no seven-stripe bar (owner, 2026-11-10: the bar is for splashes; the footer's own bar, Part 3, stays). */
/* The line under the header is a shadow, not a border, so the header stands at exactly 56px (112px with two rows). */
body > header.ms-header { background: var(--paper); border-bottom: 0; box-shadow: 0 1px 0 var(--rule); }
body > header .ms-header__row {
  height: var(--ms-size-header-row-min); min-height: var(--ms-size-header-row-min); max-height: var(--ms-size-header-row-min);
  padding: 0; max-width: none; margin: 0; gap: 8px;
}
/* The first thing in <main> has no top margin, so the first section begins within the 12px the standard allows (the header's
   8px). It carries its own padding, so the heading or breadcrumbs have air under the header line, as on MemberSpark's pages
   (heading about 36px under the header's bottom edge). Home's hero sets its own spacing. */
body > main > :first-child { margin-top: 0; padding-top: var(--ms-space-5); }
body > main > .fs-hero:first-child { padding-top: clamp(22px, 4vw, 40px); }   /* the hero keeps its own inner top padding */
body > header .ms-header__brand { gap: 0; }
body > header .ms-header__brand .ms-logo { margin-right: 8px; }
body > header .ms-header__name { margin: 0; font-size: var(--ms-type-size-h3); letter-spacing: -0.02em; line-height: 1.2; font-variation-settings: "opsz" 48; }
body > header .ms-tab { font-size: 1rem; font-weight: 600; color: var(--ink-2); }
body > header .ms-tab:hover { background: var(--paper-2); color: var(--ink); }
body > header .ms-tab[aria-current="page"] { color: var(--teal); background: var(--teal-soft); }
body > header .ms-header__row > .ms-header__tabs { margin-left: 8px; }
/* #105 (Part 2): the Pilot tag stands beside the product name, on a desktop and on a phone alike. It is a small tag, not a
   control, and it never hides: the name gives way to it with an ellipsis, never the reverse. */
.fs-pilot {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
  background: var(--gold-soft); color: var(--gold-ink); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  padding: 2px 8px; border-radius: 999px; font-family: var(--font-body); flex: none;
}
/* #107 (Part 2): the Account icon stands at the right end of the group on a desktop (Help, dark toggle, Account) and at the
   right end of row 2 on a phone (the tabs, then Account). One copy shows at a time. */
body > header .fs-account--phone { display: none; }
/* The dark toggle shows the face of the mode a click brings (Default, then Light, then Dark): monitor, sun, moon. The
   stored theme is already on <html> before first paint, so the right face paints with no script. */
.fs-theme-btn svg { display: none; }
:root:not([data-theme]) .fs-theme-btn [data-face="light"],
:root[data-theme="light"] .fs-theme-btn [data-face="dark"],
:root[data-theme="dark"] .fs-theme-btn [data-face="default"] { display: block; }
@media (max-width: 40rem) {
  body > header .ms-header__row--tabs { height: var(--ms-size-header-row-min); }
  body > header .ms-header__row--tabs .ms-header__tabs { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 0; margin-left: 0; justify-content: space-between; }
  /* Row 2 holds every tab (never split, never an overflow menu) and, at its right end, the Account icon (#107). The labels never wrap. */
  body > header .ms-header__row--tabs { gap: 0; }
  body > header .ms-header__row--tabs .ms-tab { white-space: nowrap; padding: 0 .55rem; font-size: .9rem; }
  body > header .ms-header__row--tabs .ms-tab:first-child { padding-left: 0; }
  body > header .ms-header__row--tabs .ms-tab:last-child { padding-right: 0; }
  body > header .ms-header__name { font-size: var(--ms-type-size-lg); }
  body > header .fs-account--desktop { display: none; }
  body > header .fs-account--phone { display: inline-grid; flex: none; }
}

/* Footer: the site's three links, then the closing block (bar, product and year, By MemberSpark with the flag, the motto).
   The site is left-aligned, so the block is too. Footer text stands at the 16px floor. */
body > footer { color: var(--ink-3); font-size: 1rem; margin-top: 3.5em; text-align: left; }
body > footer #footer-directive.ms-footer { padding: 14px 0 28px; }
body > footer .ms-footer__links a { color: var(--ink-2); }
body > footer .ms-footer__closing a { color: var(--link); }
body > footer .ms-footer__flag { height: 1.05em; width: auto; margin-left: 0.25em; vertical-align: -0.15em; }
.fs-flag { height: 1.05em; width: auto; margin-left: 0.25em; vertical-align: -0.15em; }

/* ---------- Shared pieces ---------- */
.fs-tag {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--gold-soft); color: var(--gold-ink); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  padding: 2px 8px; border-radius: 999px; vertical-align: middle; font-family: var(--font-body);
}
.fs-small { font-size: .88rem; color: var(--ink-3); }
.fs-lede { font-size: 1.15rem; color: var(--ink-2); max-width: none; }

.fs-btn, #fs-app .fs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--rule-2);
  background: var(--card); color: var(--ink); min-height: 44px;
  transition: background-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.fs-btn:hover { background: var(--teal-soft); border-color: var(--ink); text-decoration: none; }
.fs-btn:active { transform: translateY(1px); }
.fs-btn svg { width: 18px; height: 18px; flex: none; }
.fs-btn-primary, #fs-app .fs-btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.fs-btn-primary:hover, #fs-app .fs-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--ms-shadow-raised); }
.fs-btn-gold { background: var(--gold-fill); color: var(--on-gold); border-color: var(--gold-fill); }
.fs-btn-gold:hover { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); box-shadow: var(--ms-shadow-raised); }
.fs-btn-ghost { background: transparent; color: var(--hero-ink); border-color: color-mix(in srgb, var(--hero-ink) 55%, transparent); }
.fs-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: var(--hero-ink); }
.fs-btn-quiet, #fs-app .fs-btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); padding-left: 10px; padding-right: 10px; }
.fs-btn-quiet:hover, #fs-app .fs-btn-quiet:hover { background: var(--paper-2); color: var(--ink); }
.fs-btn-small, #fs-app .fs-btn-small { font-size: .9rem; padding: 7px 13px; }

/* Kind badge */
.fs-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 10px 3px 8px; border-radius: 999px; line-height: 1.4;
  color: var(--k-grant); background: var(--k-grant-bg); font-family: var(--font-body);
}
.fs-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.k-fellowship { color: var(--k-fellowship); background: var(--k-fellowship-bg); }
.k-prize { color: var(--k-prize); background: var(--k-prize-bg); }
.k-residency { color: var(--k-residency); background: var(--k-residency-bg); }
.k-scholarship-bursary { color: var(--k-scholarship); background: var(--k-scholarship-bg); }
.k-call-for-art { color: var(--k-call); background: var(--k-call-bg); }
/* fs-p8cq.8: "Show your art" tile row badges - pastel Type colours, distinct from the k-* set above. */
.t-gallery { color: var(--t-gallery); background: var(--t-gallery-bg); }
.t-service { color: var(--t-service); background: var(--t-service-bg); }
.t-community { color: var(--t-community); background: var(--t-community-bg); }
.t-theatre { color: var(--t-theatre); background: var(--t-theatre-bg); }
.t-cinema { color: var(--t-cinema); background: var(--t-cinema-bg); }
.t-festival { color: var(--t-festival); background: var(--t-festival-bg); }
/* fs-ikz7.16: the six Vault Type badges (home tiles, card/item pages, #fs-vault-types chips) -
   distinct from the .t-* Sub-type set above, same six --vtype-* tokens throughout. */
.vtype-galleries { color: var(--vtype-galleries); background: var(--vtype-galleries-bg); }
.vtype-shops { color: var(--vtype-shops); background: var(--vtype-shops-bg); }
.vtype-organizations { color: var(--vtype-organizations); background: var(--vtype-organizations-bg); }
.vtype-venues { color: var(--vtype-venues); background: var(--vtype-venues-bg); }
.vtype-skills { color: var(--vtype-skills); background: var(--vtype-skills-bg); }
.vtype-support { color: var(--vtype-support); background: var(--vtype-support-bg); }
/* A Vault Type with no wheel colour of its own (venue, shop, skills, event - fs-73s9.24's twelve
   tokens never grew past the six on each half) gets a plain, neutral fs-badge instead of falling
   through to the pill's own default pink (.fs-badge above, Grants' colour). */
.fs-badge.is-neutral { color: var(--ink-2); background: var(--paper-2); }
/* fs-5rlv.3 (D53): tile badge for a flagged listing - its own --status-review* hue (fs-73s9.24: never
   reuse a kind/type/vtype wheel colour for a status meaning), same pill shape as the kind badge. */
.fs-badge.is-needs-review { color: var(--status-review); background: var(--status-review-bg); }
.fs-badge.is-needs-review::before { content: none; }
/* fs-18wp: neutral, like "Not yet checked" - the fund is real, its call is not posted yet */
.fs-badge.is-not-posted { color: var(--ink-2); background: transparent; border: 1px dashed var(--rule-2); }
.fs-badge.is-not-posted::before { content: none; }

/* Deadline pill: urgency */
.fs-due {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; line-height: 1.3;
  padding: 4px 10px; border-radius: 999px; background: var(--teal-soft); color: var(--teal);
}
.fs-due svg { width: 15px; height: 15px; flex: none; }
.fs-due.is-urgent { background: var(--urgent-soft); color: var(--urgent); }
.fs-due.is-soon { background: var(--soon-soft); color: var(--soon); }
.fs-due.is-open { background: var(--paper-2); color: var(--ink-2); }
.fs-due.is-closed { background: var(--closed-soft); color: var(--closed); }

/* Save button (browse cards and opportunity pages share it) */
.fs-save, #fs-app .fs-save {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--rule-2);
  background: var(--card); color: var(--ink-2); transition: background-color .15s, color .15s, border-color .15s;
}
.fs-save svg { width: 17px; height: 17px; flex: none; }
.fs-save:hover { border-color: var(--gold); color: var(--ink); }
.fs-save[aria-pressed="true"], #fs-app .fs-save[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.fs-save[aria-pressed="true"] svg { fill: currentColor; }
.fs-save.fs-btn { font-size: 1rem; padding: 11px 18px; }

/* How sure we are: a compact badge on cards and at the top of each opportunity page */
.fs-check {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  line-height: 1.3; padding: 2px 9px 2px 6px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  color: var(--status-good); background: var(--status-good-bg); border: 1px solid transparent;
}
.fs-check svg { width: 15px; height: 15px; flex: none; }
a.fs-check:hover { text-decoration: underline; text-underline-offset: 2px; }
.fs-check.is-partly { color: var(--status-partial); background: var(--status-partial-bg); }
.fs-check.is-in-review { color: var(--ink-2); background: var(--paper-2); border-color: var(--rule-2); }
.fs-check.is-not-checked { color: var(--ink-2); background: transparent; border-color: var(--rule-2); border-style: dashed; }
/* The site's one "not confirmed" label (pipeline/publish/fact_label.py) beside a fact we have not confirmed.
   Neutral, like "Not yet checked": it says "go and check", never that the listing is bad (decided 2026-10-16). */
.fs-unconfirmed {
  display: inline-block; vertical-align: middle; font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .02em; line-height: 1.4; padding: 1px 8px; border-radius: 999px; white-space: normal; max-width: 100%;
  color: var(--ink-2); background: var(--paper-2); border: 1px dashed var(--rule-2);
  font-variation-settings: normal; text-decoration: none;
}

/* ---------- Home ---------- */
.fs-hero {
  position: relative; overflow: hidden; margin: 18px 0 8px; padding: clamp(22px, 4vw, 40px) clamp(20px, 5vw, 48px);
  border-radius: 20px; color: var(--hero-ink);
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 55%, transparent) 0, transparent 34%),
    radial-gradient(circle at 8% 110%, color-mix(in srgb, var(--ms-color-tile-blue) 24%, transparent) 0, transparent 40%),
    linear-gradient(135deg, var(--hero-1), var(--hero-2));
}
.fs-hero::after {
  content: ""; position: absolute; right: clamp(-40px, -2vw, 0px); bottom: 14px; width: 170px; height: 170px; opacity: .9; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' d='M50 6c2.2 20.4 12.6 30.8 33 33v4c-20.4 2.2-30.8 12.6-33 33h-4c-2.2-20.4-12.6-30.8-33-33v-4c20.4-2.2 30.8-12.6 33-33z' opacity='.95'/%3E%3Cpath fill='%23ffffff' opacity='.7' d='M80 64c.8 7.4 4.6 11.2 12 12v2c-7.4.8-11.2 4.6-12 12h-2c-.8-7.4-4.6-11.2-12-12v-2c7.4-.8 11.2-4.6 12-12z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* On a phone the heading can run over the spark: keep it faint there so the white text stays readable. */
@media (max-width: 640px) { .fs-hero::after { opacity: .2; } }
.fs-hero > * { position: relative; z-index: 1; max-width: 36em; }
.fs-hero h1 { color: var(--hero-ink); margin: .2em 0 .35em; font-size: var(--ms-type-size-h1); }
@media (min-width: 48rem) { .fs-hero h1 { font-size: var(--ms-type-size-display); } }
.fs-hero p { color: var(--hero-ink-2); font-size: 1.12rem; max-width: none; text-wrap: pretty; }
.fs-hero .fs-eyebrow { color: var(--hero-ink); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; margin: 0; }
.fs-hero :focus-visible { outline-color: var(--hero-ink); }
.fs-hero .fs-btn-gold, .fs-hero .fs-btn-primary { border-color: var(--hero-ink); }
.fs-hero .fs-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.fs-hero .fs-reassure { font-size: .9rem; margin: 12px 0 0; color: var(--hero-ink-2); }

.fs-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 2.2em 0 .6em; }
.fs-section-head h2 { margin: 0; }
/* fs-1d07.11: six tiles now share this row (was five) - minmax narrowed from 170 to 140px so all
   six fit on one row at the 980px content width (desktop), still wrapping sensibly narrower. */
/* fs-p8cq.8: the "Show your art" tile row (.fs-type-links) is the same tile component as Browse by
   type (.fs-kind-links) - one shared set of layout rules, kept as a separate class from
   .fs-kind-links so HomeKindTilesLayout's ".fs-kind-links a" selector still finds exactly the six
   funding-kind tiles, not these six as well. */
.fs-kind-links, .fs-type-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.fs-kind-links a, .fs-type-links a {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius); text-decoration: none;
  background: var(--card); border: 1px solid var(--rule); color: var(--ink); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* The system's heading/body fonts run wider than the old ones: keep the longest badge names (Scholarships, Organizations) inside a tile. */
.fs-kind-links .fs-badge, .fs-type-links .fs-badge { align-self: flex-start; max-width: 100%; font-size: .68rem; letter-spacing: .03em; }
.fs-kind-links a:hover, .fs-type-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--rule-2); }
.fs-kind-links .fs-badge, .fs-type-links .fs-badge { align-self: flex-start; }
.fs-kind-links strong, .fs-type-links strong { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; }
.fs-kind-links strong.fs-count, .fs-type-links strong.fs-count { font-size: 2.2rem; line-height: 1.1; color: var(--teal); }
.fs-kind-links span.fs-small, .fs-type-links span.fs-small { margin: 0; }

.fs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 0 0 .5em; }
.fs-tiles > div {
  position: relative; background: var(--card); border: 1px dashed var(--rule-2); border-radius: var(--radius); padding: 14px 16px 12px;
}
.fs-tiles strong { display: block; font-family: var(--font-head); font-size: 2.2rem; line-height: 1.1; color: var(--teal); font-weight: 600; }
.fs-tiles span { color: var(--ink-2); font-size: .92rem; }

.fs-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; counter-reset: step; max-width: none !important; }
.fs-steps li { counter-increment: step; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 16px 14px; }
.fs-steps li::before {
  content: counter(step); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-ink); font-weight: 800; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
.fs-steps strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.fs-steps span { color: var(--ink-2); font-size: .95rem; }

.fs-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5em 0 0; }

/* Stories (placeholders only) */
.fs-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 1em 0; }
.fs-story {
  margin: 0; background: var(--card); border: 1px dashed var(--rule-2); border-radius: var(--radius); padding: 18px 18px 14px;
  color: var(--ink-2); max-width: none !important;
}
.fs-story blockquote { margin: 8px 0 10px; padding: 0; border: 0; font-family: var(--font-head); font-style: italic; font-size: 1.12rem; color: var(--ink); line-height: 1.45; }
.fs-story figcaption { font-size: .9rem; color: var(--ink-3); }

/* Resources and terms */
.fs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; margin: 1em 0; }
.fs-cards > section { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 4px 18px 8px; }
.fs-cards > section h2 { font-size: var(--ms-type-size-h3); margin: .9em 0 .4em; }
.fs-cards ul { padding-left: 1.1em; }

/* ---------- Opportunity page ---------- */
/* Breadcrumbs (Parts 6, 7, 10): the first element of the page, starting at its left margin, every link 44px tall by
   padding-free min-height, a long page name shortened with an ellipsis. */
.fs-crumbs { margin: 0; font-size: 1rem; }
.fs-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; min-width: 0; }
.fs-crumbs li { display: flex; align-items: center; min-width: 0; }
.fs-crumbs li + li::before { content: "\203A"; margin: 0 .55em; color: var(--ink-3); }
.fs-crumbs li[aria-current="page"] { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: var(--ms-size-tap); }
.fs-crumbs a { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: var(--ms-size-tap); padding: 0 0; }
.fs-crumbs a:hover { text-decoration: underline; }
.fs-opp-head { margin: 18px 0 6px; }
.fs-opp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fs-opp-head h1 { margin: .35em 0 .2em; }
.fs-opp-funder { color: var(--ink-2); font-size: 1.08rem; margin: 0; }
.fs-deadline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0 16px; padding: 14px 18px;
  border-radius: var(--radius); background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent);
  color: var(--ink);
}
.fs-deadline .fs-deadline-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--teal); flex: none; }
.fs-deadline .fs-deadline-icon svg { width: 22px; height: 22px; }
.fs-deadline-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.fs-deadline-label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fs-deadline-date { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; line-height: 1.25; }
.fs-deadline-note { font-size: .92rem; color: var(--ink-2); }
.fs-deadline.is-urgent { background: var(--urgent-soft); border-color: color-mix(in srgb, var(--urgent) 35%, transparent); }
.fs-deadline.is-urgent .fs-deadline-icon { color: var(--urgent); }
.fs-deadline.is-soon { background: var(--soon-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.fs-deadline.is-soon .fs-deadline-icon { color: var(--soon); }
.fs-deadline.is-closed { background: var(--closed-soft); border-color: var(--rule-2); border-style: dashed; }
.fs-deadline.is-closed .fs-deadline-icon { color: var(--closed); }
.fs-deadline.is-closed .fs-deadline-date { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-2); }
.fs-deadline .fs-due { margin-left: auto; }

.fs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin: 18px 0 22px; padding: 0; }
.fs-facts > div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 16px; min-width: 0; }
.fs-facts dt { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 2px; }
.fs-facts dd { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.4; }
.fs-facts .fs-fact-big dd { font-family: var(--font-head); font-size: 1.3rem; }
.fs-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 8px; }
.fs-actions .fs-small { margin: 0; flex-basis: 100%; }
.fs-detail { margin: 26px 0 0; max-width: none; }
.fs-detail h2 { font-size: var(--ms-type-size-h3); margin: 0 0 .4em; padding-top: 18px; border-top: 1px solid var(--rule); }
.fs-source {
  margin: 30px 0 0; padding: 14px 16px; border-radius: var(--radius-s); background: var(--paper-2);
  font-size: .92rem; color: var(--ink-2); overflow-wrap: anywhere; max-width: none !important; scroll-margin-top: 16px;
}
.fs-source p { margin: 0 0 4px; }
.fs-source .fs-check-line { display: flex; align-items: flex-start; gap: 8px; font-size: 1rem; color: var(--ink); margin-bottom: 6px; }
.fs-check-line svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--status-good); }
.fs-check-line.is-partly svg { color: var(--status-partial); }
.fs-check-line.is-in-review svg { color: var(--ink-2); }
.fs-check-line.is-not-checked svg { color: var(--ink-3); }
.fs-source .fs-check-more { padding-left: 28px; }
.fs-source .fs-check-src { margin-top: 8px; }
.fs-source .fs-report-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-2); }

/* "Report a problem" panel */
.fs-report-wrap { display: contents; }
.fs-report {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 0; margin: auto;
  border: 1px solid var(--rule-2); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-lift);
}
.fs-report::backdrop { background: rgba(8, 18, 22, .55); }
.fs-report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 2px 20px; }
.fs-report-head h2 { margin: 0; font-size: var(--ms-type-size-h3); }
.fs-report .fs-report-x {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.fs-report .fs-report-x:hover { background: var(--paper-2); color: var(--ink); }
.fs-report-form, .fs-report-done { padding: 4px 20px 20px; }
.fs-report-about { margin: 0 0 12px; color: var(--ink-2); }
.fs-report-boxes { border: 0; padding: 0; margin: 0 0 14px; min-inline-size: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.fs-report-boxes legend { font-weight: 700; padding: 0; margin: 0 0 8px; }
.fs-report-box {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; cursor: pointer; font-weight: 600; line-height: 1.3;
  border: 1.5px solid var(--rule-2); border-radius: var(--radius-s); background: var(--card); color: var(--ink);
}
.fs-report-box:hover { border-color: var(--teal); }
.fs-report-box:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.fs-report-box input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.fs-report-field { display: block; font-weight: 700; margin: 0 0 4px; }
.fs-optional { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border-radius: 999px; padding: 0 8px; margin-left: 4px; vertical-align: middle; }
.fs-report textarea, .fs-report input[type="text"],
.fs-form textarea, .fs-form input[type="text"] {
  display: block; width: 100%; max-width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--rule-2); border-radius: var(--radius-s); padding: 9px 12px; min-height: 44px; margin: 0 0 12px;
}
.fs-report textarea, .fs-form textarea { resize: vertical; min-height: 96px; }
.fs-report textarea:hover, .fs-form textarea:hover, .fs-form input:hover { border-color: var(--teal); }
.fs-form-wrap { max-width: 640px; margin: 8px 0 24px; }
.fs-form-wrap .fs-report-form { padding: 0; }
.fs-form .fs-visually-hidden input { min-height: 0; }
.fs-res-report { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); }
.fs-res-report .fs-form-wrap { margin: 14px 0 0; }
.fs-report-note { margin: -6px 0 12px; }
.fs-report-error { margin: 0 0 10px; color: var(--urgent); font-weight: 700; }
.fs-report-error:empty { display: none; }
.fs-report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rule); }
.fs-report-off { margin: 0; flex: 1 1 240px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--gold-soft); color: var(--ink); font-weight: 600; }
.fs-report-thanks { font-size: 1rem; font-weight: 400; color: var(--ink); margin: 8px 0 6px; }
.fs-fb-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--rule); margin: 0 0 16px; }
.fs-fb-tabs [role="tab"] { border: 0; background: transparent; color: var(--ink-2); padding: 10px 14px 12px; margin-bottom: -2px; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; font: inherit; font-weight: 700; min-height: 44px; cursor: pointer; }
.fs-fb-tabs [role="tab"]:hover { color: var(--ink); background: var(--paper-2); }
.fs-fb-tabs [role="tab"][aria-selected="true"] { color: var(--teal); border-bottom-color: var(--accent); }
.fs-fb-panel > .fs-report-field:not(:first-child) { margin-top: 14px; }
.fs-report-done .fs-btn { margin-top: 8px; }

/* ---------- Browse page ---------- */
/* fs-p65t (decided 2026-09-27 ~20:00 PT): "I really want all of the filters to be tighter
   vertically so the opportunities appear higher on the page." Put the title+subtitle beside the
   Find/Saved/My profile tabs on desktop, one line - reverted by fs-nnna (the owner, ~22:50 PT: "looks
   funny to the right ... let's go back to putting it on its own line below the heading"): the
   subtitle stacks under the h1 again, at every width. */
.fs-browse-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin: 10px 0 4px; }
.fs-browse-head { margin: 0 0 4px; }
.fs-browse-head h1 { margin: 0; }
.fs-browse-head p { margin: 4px 0 0; color: var(--ink-2); }
.fs-browse-top .fs-tabs { margin: 0; }
#fs-app { margin-top: 6px; }
#fs-app button { font: inherit; cursor: pointer; }
#fs-app select, #fs-app input[type="search"], #fs-app input[type="text"] {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--rule-2); border-radius: var(--radius-s); padding: 9px 12px; min-height: 44px; max-width: 100%;
}
#fs-app select { padding-right: 34px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23808a8e' d='M5.5 7.5 10 12l4.5-4.5 1 1L10 14 4.5 8.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
#fs-app select.is-set { border-color: var(--teal); background-color: var(--teal-soft); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--teal); }
#fs-app input:hover, #fs-app select:hover { border-color: var(--teal); }

/* Tabs */
.fs-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--rule); margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.fs-tabs::-webkit-scrollbar { display: none; }
#fs-app .fs-tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border: 0; background: transparent; color: var(--ink-2);
  padding: 10px 14px 12px; margin-bottom: -2px; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0;
  font-weight: 700; font-size: 1rem; min-height: 44px;
}
#fs-app .fs-tab svg { width: 18px; height: 18px; flex: none; }
#fs-app .fs-tab:hover { color: var(--ink); background: var(--paper-2); }
#fs-app .fs-tab[aria-selected="true"] { color: var(--teal); border-bottom-color: var(--accent); }
#fs-app .fs-tab:focus-visible { outline-offset: -3px; }
.fs-count-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  font-size: .78rem; font-weight: 800; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule-2);
}
.fs-count-badge.has { background: var(--gold-fill); color: var(--on-gold); border-color: var(--gold); }
.fs-count-badge.is-bump { animation: fs-bump .35s ease; }
@keyframes fs-bump { 40% { transform: scale(1.3); } }
[role="tabpanel"][hidden] { display: none; }

/* Search and filters */
.fs-search { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.fs-search > svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
#fs-app .fs-search input[type="search"] { flex: 1 1 auto; min-width: 0; padding-left: 44px; font-size: 1.05rem; min-height: 50px; border-radius: 999px; }
#fs-app .fs-search input.is-set { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
/* fs-23rl: the "Filters" button at the right end of the search bar - its count badge and chevron
   share the existing pill chip/badge styling (#fs-app .fs-btn, .fs-count-badge), reused rather
   than invented, per fs-dcbq. */
.fs-filters-toggle { flex: none; white-space: nowrap; }
#fs-app .fs-filters-toggle { line-height: 1.6; }
.fs-filters-toggle .fs-chevron { width: 14px; height: 14px; transition: transform .15s ease; }
.fs-filters-toggle[aria-expanded="true"] .fs-chevron { transform: rotate(180deg); }
.fs-count-badge[hidden] { display: none; }
.fs-filter-panel[hidden] { display: none; }
.fs-filter-label { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
/* fs-gba.6, fs-mwsb, fs-p65t: every filter row (Type, Offer, Art forms, Community) puts its heading
   beside its own row of chips or toggles when there's room, in a shared fixed-width column so every
   row's chips line up at the same left edge - "Art forms" is left free to wrap onto a second line,
   vertically centred, rather than widen the column. Below the breakpoint (with everything else on
   the page) they stack, heading above the row, same as before. */
.fs-filter-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; column-gap: 14px; margin: 0 0 6px; }
.fs-filter-row .fs-filter-label, .fs-filter-row .fs-chips, .fs-filter-row .fs-toggles { margin: 0; }
/* fs-t7vj (decided 2026-09-28 ~20:20 PT): "differentiate the different categories of filters ...
   add a bit of vertical space between them" - a faint hairline under each filter row inside the
   #fs-filter-panel (Type/Offer/Art forms/Community/Other on Browse; Kind/Province/Other on
   Galleries, fs-73s9.6), skipping the last so it doesn't double up against the row below. */
#fs-filter-panel .fs-filter-row { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--rule-2); }
#fs-filter-panel .fs-filter-row:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
#fs-app .fs-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--rule-2); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 4px 12px; font-size: .95rem; font-weight: 600; line-height: 1.2;
  transition: background-color .12s, border-color .12s, color .12s;
}
#fs-app .fs-chip:hover { border-color: var(--teal); }
#fs-app .fs-chip .fs-n { font-size: .8rem; font-weight: 700; color: var(--ink-3); background: var(--paper-2); border-radius: 999px; padding: 0 7px; min-width: 22px; text-align: center; }
#fs-app .fs-chip .fs-tick { display: none; width: 16px; height: 16px; }
#fs-app .fs-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#fs-app .fs-chip[aria-pressed="true"] .fs-tick { display: inline-block; }
#fs-app .fs-chip[aria-pressed="true"] .fs-n { background: color-mix(in srgb, var(--on-accent) 20%, transparent); color: var(--on-accent); }
#fs-app .fs-chip.is-empty:not([aria-pressed="true"]) { color: var(--ink-3); border-style: dashed; }
/* fs-p65t: Art forms' "+N more" / "Show fewer" toggle chip - dashed, like an empty-count chip,
   so it visually reads as "more options exist" rather than a filter you could turn on. */
#fs-app .fs-chip-more { border-style: dashed; color: var(--ink-2); }
/* fs-t7vj (decided 2026-09-28 ~20:20 PT): "use a different, alternating colour shade on the
   bubbles" for Type - tinted with the SAME --k-* tokens as the kind badge on a result card
   (.fs-badge/.k-grant etc, above), reused rather than invented; every other filter row stays
   neutral. Selecting a chip still switches to the usual teal "on" state - the tint is only for
   telling the options apart while choosing. */
#fs-kinds .fs-chip.k-grant:not([aria-pressed="true"]) { color: var(--k-grant); background: var(--k-grant-bg); border-color: transparent; }
#fs-kinds .fs-chip.k-fellowship:not([aria-pressed="true"]) { color: var(--k-fellowship); background: var(--k-fellowship-bg); border-color: transparent; }
#fs-kinds .fs-chip.k-prize:not([aria-pressed="true"]) { color: var(--k-prize); background: var(--k-prize-bg); border-color: transparent; }
#fs-kinds .fs-chip.k-residency:not([aria-pressed="true"]) { color: var(--k-residency); background: var(--k-residency-bg); border-color: transparent; }
#fs-kinds .fs-chip.k-scholarship-bursary:not([aria-pressed="true"]) { color: var(--k-scholarship); background: var(--k-scholarship-bg); border-color: transparent; }
#fs-kinds .fs-chip.k-call-for-art:not([aria-pressed="true"]) { color: var(--k-call); background: var(--k-call-bg); border-color: transparent; }
/* fs-ikz7.28 (decided 2026-10-05, P0): "colored filters below type ... only the type filters use
   color." Sub-type (#fs-types) sits below Type (#fs-vault-types) on /vault and used to carry its
   own t-* tint (fs-73s9.24, when Sub-type was still the page's only type-shaped row) - removed;
   Sub-type now renders as a plain, neutral chip like Kind/Art form/Offer/Other. The --t-* tokens
   themselves stay defined above for the card-badge/home-tile rules that still use them. */
#fs-vault-types .fs-chip.vtype-galleries:not([aria-pressed="true"]) { color: var(--vtype-galleries); background: var(--vtype-galleries-bg); border-color: transparent; }
#fs-vault-types .fs-chip.vtype-shops:not([aria-pressed="true"]) { color: var(--vtype-shops); background: var(--vtype-shops-bg); border-color: transparent; }
#fs-vault-types .fs-chip.vtype-organizations:not([aria-pressed="true"]) { color: var(--vtype-organizations); background: var(--vtype-organizations-bg); border-color: transparent; }
#fs-vault-types .fs-chip.vtype-venues:not([aria-pressed="true"]) { color: var(--vtype-venues); background: var(--vtype-venues-bg); border-color: transparent; }
#fs-vault-types .fs-chip.vtype-skills:not([aria-pressed="true"]) { color: var(--vtype-skills); background: var(--vtype-skills-bg); border-color: transparent; }
#fs-vault-types .fs-chip.vtype-support:not([aria-pressed="true"]) { color: var(--vtype-support); background: var(--vtype-support-bg); border-color: transparent; }
.fs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
label.fs-select-inline { display: inline-flex; }
.fs-filters select { width: auto; min-width: 150px; }
.fs-toggles { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; }
.fs-toggle { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; min-height: 44px; cursor: pointer; text-transform: none !important; letter-spacing: normal !important; font-size: .98rem !important; font-weight: 600 !important; color: var(--ink-2) !important; }
.fs-toggle input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.fs-toggle .fs-n { font-size: .8rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border-radius: 999px; padding: 0 7px; min-width: 22px; text-align: center; }
.fs-more { margin: 0 0 12px; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--card); }
.fs-more summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.fs-more summary::-webkit-details-marker { display: none; }
.fs-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); font-weight: 800; }
.fs-more[open] summary::before { content: "\2212"; }
.fs-more .fs-chips { padding: 0 14px 4px; }
.fs-more .fs-toggles { padding: 0 14px 10px; }
.fs-toggle.is-empty { color: var(--ink-3) !important; }

/* Active filters row */
.fs-active {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin: 4px 0 12px;
  background: var(--teal-soft); border-radius: var(--radius-s); border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent);
}
.fs-active[hidden] { display: none; }
.fs-active-label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-right: 2px; }
#fs-app .fs-active-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--accent); color: var(--on-accent);
  border-radius: 999px; padding: 5px 8px 5px 12px; font-size: .9rem; font-weight: 700; line-height: 1.2;
}
#fs-app .fs-active-chip .fs-x { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--on-accent) 22%, transparent); font-size: 14px; line-height: 1; }
#fs-app .fs-active-chip:hover .fs-x { background: color-mix(in srgb, var(--on-accent) 40%, transparent); }
#fs-app .fs-clear-all { border: 0; background: transparent; color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; padding: 6px 6px; margin-left: auto; }

/* Results */
.fs-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 6px 0 12px; }
.fs-results-bar p { margin: 0; font-weight: 600; color: var(--ink-2); }
.fs-results-bar p strong { color: var(--ink); }
/* fs-p65t: "Sort by moves into the results bar beside the count." */
.fs-results-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fs-sort-inline select { width: auto; min-width: 170px; }
.fs-save-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; padding: 12px; margin: 0 0 12px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-s); }
.fs-save-search[hidden] { display: none; }
#fs-app .fs-save-search input { flex: 1 1 200px; }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.fs-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 14px 16px 14px; box-shadow: var(--shadow); min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fs-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--rule-2); }
.fs-card:has(h3 a:focus-visible), .fs-card:has(h3 button:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fs-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fs-card h3 { margin: 4px 0 0; font-size: var(--ms-type-size-lg); line-height: 1.28; }
.fs-card h3 a { color: var(--ink); text-decoration: none; }
/* fs-p8cq.4: a Galleries card's title is a <button> that opens #fs-gal-drawer, not a link - same
   full-card click target as an <a>, via all: unset (matches .fs-res-open above). Color and
   text-decoration are set in this same rule, after all: unset, so they are not reset by it. */
.fs-card h3 button { all: unset; cursor: pointer; color: var(--ink); text-decoration: none; }
.fs-card h3 a::after, .fs-card h3 button::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.fs-card h3 a:focus-visible, .fs-card h3 button:focus-visible { outline: none; }
.fs-card:hover h3 a, .fs-card:hover h3 button { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; }
.fs-card .fs-save, .fs-card .fs-check, .fs-card .fs-card-link { position: relative; z-index: 2; }
.fs-funder { margin: 0; color: var(--ink-2); font-size: .95rem; font-weight: 600; }
.fs-community-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }
.fs-community-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; line-height: 1.3;
  padding: 3px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2);
}
.fs-community-tag svg { width: 11px; height: 11px; flex: none; }
.fs-community-tag.is-dedicated { background: var(--gold-soft); color: var(--gold-ink); }
.fs-summary { margin: 2px 0 4px; color: var(--ink-2); font-size: .95rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* fs-1d07.10: the money block on a call-for-art card - both directions, then the funder's own
   quote (mock docs/design/mocks/calls-for-art-card.html). */
.fs-money { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-s);
            background: var(--paper-2); display: flex; flex-direction: column; gap: 6px; }
.fs-money-line { display: flex; align-items: flex-start; gap: 8px; font-size: .95rem;
                 font-weight: 700; line-height: 1.35; }
.fs-money-line svg { width: 18px; height: 18px; flex: none; margin-top: 1px; stroke-width: 2.4; }
.fs-money-line.is-pays { color: var(--status-good); }
.fs-money-line.is-free { color: var(--status-good); }
.fs-money-line.is-charged { color: var(--soon); }
.fs-money-line.is-unknown { color: var(--ink-2); font-weight: 600; }
.fs-money-quote { margin: 0; font-size: .86rem; font-weight: 400; font-style: italic;
                  color: var(--ink-2); line-height: 1.45; }
.fs-money-quote cite { font-style: normal; font-weight: 600; }
.fs-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); font-size: .9rem; color: var(--ink-2); }
.fs-meta-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.fs-meta-item svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.fs-amt { font-weight: 700; color: var(--ink); }
.fs-card.is-closed { background: color-mix(in srgb, var(--card) 60%, var(--paper)); box-shadow: none; }
.fs-card.is-closed h3 a, .fs-card.is-closed .fs-amt { color: var(--ink-2); }

/* Empty states */
.fs-empty { text-align: center; padding: 34px 18px; border: 1.5px dashed var(--rule-2); border-radius: var(--radius); background: var(--card); grid-column: 1 / -1; }
/* fs-p8cq.7: the "Show more" fallback/trigger for incrementally-rendered results. */
.fs-load-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: 10px 0 4px; }
.fs-empty svg { width: 56px; height: 56px; color: var(--gold); margin-bottom: 6px; }
.fs-empty h3 { margin: 0 0 6px; font-size: var(--ms-type-size-h3); }
.fs-empty p { margin: 0 auto 14px; max-width: 42ch; color: var(--ink-2); }

/* Saved panel */
.fs-panel-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-s); background: var(--paper-2); color: var(--ink-2); font-size: .92rem; margin: 0 0 18px; }
.fs-panel-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--teal); }
.fs-panel-note.is-warn { background: var(--urgent-soft); color: var(--ink); }
.fs-panel-note.is-warn svg { color: var(--urgent); }
/* fs-5rlv.3 (D53): "Needs human review" note, same shape as the panel note above, its own
   dedicated status colour (--status-review*, never a kind/type/vtype hue - fs-73s9.24). */
.fs-panel-note.is-needs-review { background: var(--status-review-bg); color: var(--ink); }
.fs-panel-note.is-needs-review > span:first-child { font-size: 1.1rem; line-height: 1; }
.fs-btn-link { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fs-btn-link:hover { text-decoration-thickness: 2px; }
.fs-sub { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; font-size: var(--ms-type-size-h3); }
.fs-sub:first-of-type { margin-top: 4px; }
.fs-search-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: none; }
.fs-search-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; }
.fs-search-list .fs-search-info { flex: 1 1 220px; min-width: 0; }
.fs-search-list strong { display: block; font-size: 1.05rem; }
.fs-search-list .fs-small { margin: 0; }
.fs-search-list .fs-search-actions { display: flex; gap: 6px; }

/* Toast */
.fs-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 50;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--paper); padding: 10px 12px 10px 16px; border-radius: 12px; box-shadow: var(--shadow-lift);
  font-weight: 600; font-size: .95rem; transition: opacity .2s ease, transform .2s ease;
}
.fs-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#fs-app .fs-toast button { border: 0; background: transparent; color: var(--paper); font-weight: 800; padding: 6px 8px; border-radius: 6px; text-decoration: underline; }
.fs-toast:empty { display: none; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; padding: 0 16px; }
  /* fs-gba.6: not enough room for the Type/Offer heading beside its chips on a phone - split the
     heading onto its own line above them, same as it always was before that row existed. */
  .fs-filter-row { display: block; }
  .fs-filter-row .fs-filter-label { display: block; margin: 0 0 6px; }
  /* fs-p65t: the desktop-only tightening (title+subtitle+tabs on one row, ~32px chips) stays
     mobile's own, roomier layout - a phone has no spare width for any of it, and chips are the
     only way to reach these filters here (no mouse), so they keep the full 44px tap target. */
  .fs-browse-top { display: block; margin: 10px 0 4px; }
  .fs-browse-top .fs-tabs { margin: 10px 0 18px; }
  /* fs-73s9.29 (decided 2026-09-30): "the resources line ... is not styled like the funding line
     above it" - .fs-section-head's flex space-between put a short count line beside its heading
     (room to spare) but wrapped a long one underneath, so the two rows on Home landed differently.
     Phones force every count line onto its own line, left-aligned under the heading, regardless
     of length; desktop keeps the space-between row from the base rule above. */
  .fs-section-head { display: block; }
  .fs-section-head .fs-small { display: block; margin-top: 2px; }
  .fs-chips { gap: 8px; margin: 0 0 14px; }
  #fs-app .fs-chip { min-height: 44px; padding: 6px 13px; }
  .fs-hero { border-radius: 16px; }
  .fs-hero::after { width: 110px; height: 110px; top: 10px; right: -18px; opacity: .55; }
  .fs-hero .fs-cta .fs-btn { flex: 1 1 100%; }
  #fs-app .fs-tab { padding: 10px 10px 12px; font-size: .95rem; }
  #fs-app .fs-tab svg { display: none; }
  .fs-deadline .fs-due { margin-left: 0; }
  .fs-actions .fs-btn { flex: 1 1 100%; }
  .fs-report-head { padding-left: 16px; }
  .fs-report-form, .fs-report-done { padding: 4px 16px 16px; }
  .fs-report-actions .fs-btn { flex: 1 1 100%; }
  .fs-results-bar .fs-btn { flex: none; }
}

/* fs-p8cq.2 (decided 2026-09-28): "shrink dropdown widths with shorter phrases ... one dropdown
   per row on mobile is wasteful of space." At phone width the select dropdowns pair up two to a
   row instead of each claiming its own - a firm two-column grid keeps that pairing predictable
   regardless of which selects/buttons happen to be visible; anything that is not itself a
   dropdown (a button) spans the full row instead, so a lone odd select is the one left sitting by
   itself, on the left, rather than stretched to fill the row. */
@media (max-width: 480px) {
  .fs-results-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fs-results-actions > :not(.fs-select-inline) { grid-column: 1 / -1; }
  .fs-results-actions .fs-select-inline select { width: 100%; min-width: 0; }

  .fs-res-bar-right { flex-wrap: wrap; width: 100%; }
  #fs-res-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  #fs-res-filters select { width: 100%; min-width: 0; }
}

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

/* ---------- School award groups (pipeline/publish/groups.py) ---------- */
.fs-aw-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin: 1.2rem 0 .4rem; }
.fs-aw-filters label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.fs-aw-filters input, .fs-aw-filters select {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--card); border: 1px solid var(--rule-2);
  border-radius: 8px; padding: 8px 10px; }
.fs-aw-list { list-style: none; padding: 0; margin: .6rem 0 1.5rem; display: grid; gap: 10px; }
.fs-aw-list > li { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; }
.fs-aw-list > li[hidden] { display: none; }
.fs-aw-list h3 { margin: 0 0 4px; font-size: var(--ms-type-size-lg); }
.fs-aw-list p { margin: 0 0 8px; color: var(--ink-2); font-size: .92rem; }
.fs-aw-list dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: .85rem; }
.fs-aw-list dl div { display: flex; gap: 6px; }
.fs-aw-list dt { color: var(--ink-3); }
.fs-aw-list dd { margin: 0; color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .fs-aw-filters { grid-template-columns: 1fr; } }

/* ---------- What is offered (D18) ---------- */
.fs-offered { display: grid; gap: 4px; }
.fs-offered h3 { margin: .8rem 0 .2rem; font-size: var(--ms-type-size-base); color: var(--ink-2); }
.fs-offered ul { margin: 0; padding-left: 1.2rem; }
.fs-offered li { margin: 2px 0; }
.fs-more > p.fs-small { margin: 0 16px 8px; }

/* ---------- About page: problems as cards across the page width ---------- */
/* fs-s6s.10 (decided 2026-09-27): "this page is a marketing page ... much flashier and way
   easier to consume in a single glance" - a bolder, larger heading in the site's own teal, and a
   top accent bar in the same colour, so a tile reads before its one-line body does. */
.fs-about > ul { list-style: none; padding: 0; margin: 12px 0 8px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); max-width: none; }
.fs-about > ul > li { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  border-radius: 10px; padding: 14px 16px; color: var(--ink-2); line-height: 1.5; }
.fs-about > ul > li strong { display: block; color: var(--teal); font-size: 1.15rem; font-weight: 800;
  letter-spacing: -0.01em; margin-bottom: 4px; }
.fs-about > p { max-width: none; }
.fs-about h2 { margin-top: 1.8rem; }
.fs-about > ul:nth-of-type(2) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* Resources page (the services list). Colours come from the variables above, so it follows Light and Dark.
   Search plus three dropdown filters (the only ones that split the data usefully), reusing the
   Browse page's .fs-filters row (docs/design/resources-page.md, fs-v6y.18). */
.fs-res { margin-top: 8px; }
.fs-res-filters { margin: 0 0 12px; }
.fs-res-bar-right { display: flex; align-items: center; gap: 12px; }
.fs-res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.fs-res-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fs-res-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--rule-2); }
.fs-res-card:has(.fs-res-open:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fs-res-card h3 { margin: 0; font-size: var(--ms-type-size-lg); line-height: 1.28; }
.fs-res-card p { margin: 0; max-width: none; }
.fs-res-open { all: unset; cursor: pointer; color: var(--ink); font-weight: 700; }
.fs-res-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.fs-res-card:hover .fs-res-open { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fs-res-what { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
.fs-res-card .fs-res-meta { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--ink-2); display: flex; flex-wrap: wrap; }
.fs-res-meta span + span::before { content: "\00b7"; margin: 0 7px; color: var(--ink-3); }
.fs-res-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.fs-res-tag { display: inline-block; font-size: .8rem; padding: 2px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule); }
.fs-res-tag-type { background: var(--teal-soft); color: var(--teal); border-color: transparent; font-weight: 700; }
.fs-res-none { padding: 30px 0; text-align: center; color: var(--ink-3); }
.fs-res-none p { margin: 0 0 12px; }
.fs-res-locked { overflow: hidden; }
.fs-res-scrim { position: fixed; inset: 0; background: rgba(10, 15, 20, .5); z-index: 60; }
.fs-res-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(560px, 100%); background: var(--card); color: var(--ink); overflow: auto; overscroll-behavior: contain; padding: 22px 22px 60px; box-shadow: -10px 0 40px rgba(0, 0, 0, .25); }
.fs-res-drawer[hidden], .fs-res-scrim[hidden] { display: none; }
.fs-res-drawer h2 { margin: 0 34px 6px 0; font-size: var(--ms-type-size-h2); line-height: 1.15; }
.fs-res-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 1px solid var(--rule-2); border-radius: var(--radius-s); background: var(--card); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.fs-res-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
@media (max-width: 520px) { .fs-res-two { grid-template-columns: 1fr; } .fs-res-drawer { padding: 18px 16px 60px; } }
.fs-res-box { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px 12px 8px; }
.fs-res-box h3 { font-size: var(--ms-type-size-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 4px; }
.fs-res-box ul { margin: 0; padding-left: 1.1em; }
.fs-res-facts { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 6px 14px; margin: 14px 0; font-size: .95rem; }
.fs-res-facts dt { color: var(--ink-3); }
.fs-res-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .fs-res-facts { grid-template-columns: 1fr; } }

/* Placeholders while the Browse page's listings load (fs-05j.4) */
.fs-skel { display: grid; gap: 12px; align-content: start; min-height: 190px; }
.fs-skel-line { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--paper-2) 25%, var(--rule) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: fs-shimmer 1.6s ease-in-out infinite; }
.fs-skel-line.s1 { width: 30%; }
.fs-skel-line.s2 { width: 80%; height: 20px; }
.fs-skel-line.s3 { width: 95%; }
.fs-skel-line.s4 { width: 55%; }
@keyframes fs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .fs-skel-line { animation: none; } }

/* Data page (tools/data_quality.py): completion bars and the by-kind table. Moved here from a
   page-only inline <style> (fs-v6y.10): every page now shares this one stylesheet. */
.fs-dq { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 14px; }
.fs-dq-label { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink); font-weight: 600; }
.fs-dq-num { color: var(--ink-2); font-weight: 400; }
.fs-dq-num strong { color: var(--ink); }
.fs-dq-change { color: var(--ink-3); font-size: .9em; }
.fs-dq-track { height: 12px; background: var(--paper-2); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.fs-dq-bar { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 2px; }
.fs-dq-rule { margin: 4px 0 0; color: var(--ink-3); font-size: .85rem; }
.fs-dq-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 1rem 0 2rem; }
.fs-dq-tiles div { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 14px; }
.fs-dq-tiles strong { display: block; font-size: 2rem; color: var(--ink); line-height: 1.1; }
.fs-dq-tiles span { color: var(--ink-2); font-size: .9rem; }
.fs-dq-table { overflow-x: auto; }
.fs-dq-table table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.fs-dq-table th, .fs-dq-table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: right; }
.fs-dq-table th[scope="row"], .fs-dq-table thead th:first-child { text-align: left; }
.fs-dq-table small { color: var(--ink-3); font-weight: 400; }

/* D43 (fs-cmo9): the line at the top of a closed listing's page */
.fs-closed-notice { margin: 0 0 var(--space-3, 1rem); padding: .6rem .9rem; border: 1px dashed var(--rule-2); border-radius: 8px; background: var(--closed-soft); color: var(--ink-2); }

/* fs-ralq: career stage label, stated near the top of a card */
.fs-route-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }
.fs-route-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--paper-2, var(--card)); color: var(--ink-2); border: 1px dashed var(--rule-2); }
.fs-route-quote { display: block; font-size: .85rem; color: var(--ink-2); font-style: italic; }
.fs-stage-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }
.fs-stage-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--paper-2, var(--card)); color: var(--ink-2); border: 1px solid var(--rule-2); }

/* ---------- Help and Learn (#103, Standards Part 7) ---------- */
.fs-help-search { margin: 0 0 16px; }
.fs-help-search .ms-input { width: 100%; font-size: 1rem; }
.fs-help-boxes { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fs-help-boxes li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 40.01rem) { .fs-help-boxes { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
.fs-help-box {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: var(--ms-size-tap); padding: 18px 12px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--ink); font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; text-decoration: none;
}
.fs-help-box:hover { border-color: var(--accent); text-decoration: none; }
.fs-help-results { list-style: none; margin: 0 0 24px; padding: 0; }
.fs-help-results a, .fs-learn-list a { display: inline-flex; align-items: center; min-height: var(--ms-size-tap); }
.fs-learn-list { list-style: none; margin: 0 0 8px; padding: 0; }
.fs-faq h2 { margin-top: 0; }
.fs-faq details { border-bottom: 1px solid var(--rule); }
.fs-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--ms-size-tap);
  padding: 6px 0; cursor: pointer; font-weight: 700; list-style: none;
}
.fs-faq summary::-webkit-details-marker { display: none; }
.fs-faq summary svg { width: 20px; height: 20px; flex: none; transition: transform .15s ease; }
.fs-faq details[open] summary svg { transform: rotate(180deg); }
.fs-faq details > p { margin: 0 0 14px; }
.fs-prop { margin: 0 0 1em; }

/* ---------- The 44px floor (Site and Email Standards Part 10, #111) ----------
   "Every control stands at least 44px tall, with its label centred ... Smaller is a defect, not a style choice. The floor lives
   in the shared stylesheet, not page by page." A control whose look stays small gets its 44px by padding, or by an invisible
   overlay that grows the hit area - never by shrinking another control's space. This block comes last so it holds over every
   older rule above; nothing above sets a control's height under 44px (a test reads this stylesheet for that). */
.fs-btn-small, #fs-app .fs-btn-small, .fs-save, #fs-app .fs-save, #fs-app .fs-chip,
#fs-app .fs-active-chip, #fs-app .fs-clear-all, .fs-card-link {
  min-height: var(--ms-size-tap); box-sizing: border-box;
}
.fs-btn-small, .fs-save, .fs-chip, #fs-app .fs-active-chip, #fs-app .fs-clear-all { justify-content: center; }
.fs-card-link { display: inline-flex; align-items: center; }
/* The kind and checked badges stay small: they are tags, not controls. The Checked badge on a card is a link, so a transparent
   overlay grows its hit area to 44px while the pill keeps its look. */
a.fs-check { position: relative; }
a.fs-check::after { content: ""; position: absolute; inset: -11px -4px; }
/* A card's title link (or button) is the card's one big target (its ::after covers the card); its own box is 44px tall too,
   drawn with padding and an equal negative margin so the card's layout does not move. */
.fs-card h3 a, .fs-card h3 button { display: block; padding: 11px 0; margin: -11px 0; box-sizing: content-box; }
/* Form fields with no class of their own (the Events filters) stand 44px as well; :where() keeps this at zero specificity, so
   a field with its own rule, and the hidden spam-trap field, keep theirs. Checkboxes and radios stand inside a 44px label row. */
:where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"])) {
  min-height: var(--ms-size-tap); box-sizing: border-box;
}

/* ================================================================================================================
   EVENTS (2026-11-10, the owner: "make it beautiful", desktop and mobile). The Events list (/events/), an event's
   page, and the event rows on a Vault owner's page. Built only from the design system's tokens and components:
   .ms-field / .ms-label / .ms-input for the filters, --ms-space-* spacing, the card look of .fs-card. Every control
   stands 44px tall (Part 10 Rec 1); text is 1rem or more except the small date-tile tags (Rec 2).
   This section stands last in the file on purpose: it touches nothing above it, and nothing above it styles events.
   ================================================================================================================ */

/* The list page: intro, then one filter panel, then the groups. */
.fs-events-intro { color: var(--ink-2); font-size: 1rem; margin: 0 0 var(--ms-space-4); max-width: var(--ms-size-reading); }
.fs-events-bar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ms-space-3) var(--ms-space-4);
  align-items: end; padding: var(--ms-space-4); margin: 0 0 var(--ms-space-5);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.fs-events-bar .ms-field { margin: 0; min-width: 0; }
.fs-events-bar .ms-label { font-size: 1rem; font-weight: 700; color: var(--ink); }
.fs-events-bar select.ms-input {
  width: 100%; min-width: 0; max-width: 100%; min-height: var(--ms-size-tap); font-size: 1rem;
  padding: 0 38px 0 var(--ms-space-3); border-width: 1.5px; border-radius: var(--radius-s); cursor: pointer;
  appearance: none; -webkit-appearance: none; color: var(--ink); background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23808a8e' d='M5.5 7.5 10 12l4.5-4.5 1 1L10 14 4.5 8.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
}
.fs-events-bar select.ms-input:hover { border-color: var(--teal); }
.fs-events-count {
  grid-column: 1 / -1; margin: 0; padding-top: var(--ms-space-3); border-top: 1px solid var(--rule);
  font-size: 1rem; font-weight: 700; color: var(--ink-2);
}
.fs-events-group > h2 { margin: var(--ms-space-6) 0 var(--ms-space-3); }
.fs-events-group:first-child > h2 { margin-top: 0; }
.fs-events-list { list-style: none; margin: 0 0 var(--ms-space-4); padding: 0; display: grid; gap: var(--ms-space-3); }

/* An event row: the date first, then what, when and where. The name's link is stretched over the whole row. */
.fs-event {
  position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--ms-space-4);
  align-items: start; min-height: var(--ms-size-tap); padding: var(--ms-space-4);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.fs-event:hover { box-shadow: var(--shadow-lift); border-color: var(--rule-2); }
.fs-event:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fs-event-date {
  display: grid; justify-items: center; align-content: center; gap: 0; padding: .5rem .25rem;
  border-radius: var(--radius-s); background: var(--teal-soft); color: var(--teal); line-height: 1.1; text-align: center;
}
.fs-event-mon, .fs-event-yr { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fs-event-yr { letter-spacing: .04em; font-weight: 700; color: var(--ink-2); }
.fs-event-day { font-family: var(--font-head); font-size: 1.9rem; font-weight: var(--ms-type-weight-heavy); line-height: 1.1; color: var(--ink); }
.fs-event-body { min-width: 0; }
.fs-event-title { margin: 0 0 .15rem; font-size: 1.2rem; line-height: 1.25; }
.fs-event-title a { color: var(--ink); text-decoration: none; }
.fs-event-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.fs-event-title a:focus-visible { outline: none; }
.fs-event:hover .fs-event-title a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; }
.fs-event-when { margin: 0 0 .15rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.fs-event-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--ms-space-2); font-size: 1rem; color: var(--ink-2); }
.fs-event-meta > span + span::before { content: "\00B7"; margin-right: var(--ms-space-2); color: var(--ink-3); }
/* Past events stay listed, quieter. */
[data-past] > .fs-event { background: color-mix(in srgb, var(--card) 60%, var(--paper)); box-shadow: none; }
[data-past] > .fs-event .fs-event-date { background: var(--paper-2); color: var(--ink-2); }
[data-past] > .fs-event .fs-event-day, [data-past] > .fs-event .fs-event-title a { color: var(--ink-2); }
/* Nothing matches the filters. */
.fs-events-empty { text-align: center; padding: var(--ms-space-6) var(--ms-space-4); border: 1.5px dashed var(--rule-2); border-radius: var(--radius); background: var(--card); }
.fs-events-empty p { margin: 0 0 var(--ms-space-3); color: var(--ink-2); }

/* Event rows on a Vault owner's page: the same rows, the section's own spacing. */
.fs-events-owned .fs-events-list { margin-bottom: var(--ms-space-3); }
.fs-events-owned h3 { margin: var(--ms-space-5) 0 var(--ms-space-3); }
.fs-events-owned .fs-event-title { font-size: 1.1rem; }

/* An event's own page: the date leads, the organizer's words are quoted, the source reads at 1rem. */
.fs-event-facts { display: flex; flex-wrap: wrap; gap: var(--ms-space-3); margin: var(--ms-space-4) 0 var(--ms-space-4); }
.fs-event-facts > div { flex: 1 1 14rem; padding: var(--ms-space-3) var(--ms-space-4); }
.fs-event-facts dt { font-size: .8rem; margin: 0 0 .15rem; }
.fs-event-facts dd { font-size: 1.1rem; line-height: 1.3; }
.fs-event-facts > div:first-child { flex-basis: 100%; background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 25%, transparent); }
.fs-event-facts > div:first-child dd { font-family: var(--font-head); font-size: 1.5rem; }
.fs-event-quote {
  position: relative; margin: 0 0 var(--ms-space-4); padding: var(--ms-space-3) var(--ms-space-4) var(--ms-space-3) var(--ms-space-5);
  border-left: 4px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--card);
  font-size: 1.05rem; font-style: italic; color: var(--ink-2);
}
main:has(.fs-event-facts) .fs-source p, main:has(.fs-event-facts) .fs-source a { font-size: 1rem; }
main:has(.fs-event-facts) .fs-source .fs-btn-small { min-height: var(--ms-size-tap); font-size: 1rem; }
main:has(.fs-event-facts) .fs-opp-head { margin-top: var(--ms-space-3); }

/* Breadcrumbs: the section name keeps its width (a long page name gives way with its ellipsis, not "Events"). */
.fs-crumbs li:not([aria-current]) { flex: none; }

/* Phone: the filters two to a row, the date tile a little narrower, everything still 44px and 1rem. */
@media (max-width: 760px) {
  .fs-events-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--ms-space-3); }
  .fs-event { grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--ms-space-3); padding: var(--ms-space-3); }
  .fs-event-day { font-size: 1.6rem; }
  .fs-event-title { font-size: 1.15rem; }
  .fs-event-meta { flex-direction: column; }
  .fs-event-meta > span + span::before { content: none; }
}