/*
  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: 24px;
  --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;
}

/* --- docs/standards/design/components.css, copied verbatim --- */

/*
  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, 56-80px. Brand left, tabs in words after it, then the
  right-hand group together with no gaps: Help door, 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.
*/
.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, 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;
}


/*
  MemberSpark public site styles.
  Everything above this block is the design system, copied verbatim from
  docs/standards/design in this repo: tokens.css, then components.css. Refreshing
  the system is copying those two files again; the styles below use only
  --ms-* tokens and system classes, so they take the new skin without a
  rebuild. Page basics (background, text, links, headings, focus) come
  from .ms-page in the components layer; each page puts class="ms-page"
  on its <body>.
*/

/* The colour bar's stripes are the design system's brand stripes:
   --ms-brand-stripe-1..7 in the token layer above. */

* { box-sizing: border-box; }

/* Both of the site's fonts are self-hosted, and every page preloads both
   files, so a cold load and every click after it paint the text once, in
   the site fonts (site-standards Part 9, Recommendation 3; MemberSpark
   #55). The files are the Latin subsets of Bricolage Grotesque and
   Figtree, each under the SIL Open Font License 1.1 — the licences stand
   beside them in /fonts. Each filename carries a content hash (the first
   eight hex characters of the file's SHA-256): when a font's bytes
   change, its filename changes with them, every reference below and in
   the pages' preloads moves with it, and the address earns the one-year
   immutable life worker.js serves (Part 8, Recommendations 2 and 3). */
@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;
}

/* Body and link basics come from .ms-page in the components layer. */

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

/* Header: the design system's .ms-header stands on every page (markup in
   the pages). The brand stands left with the Pilot tag beside the name; the
   right-side group carries Help, the theme toggle, Account and
   Settings in that order, on a phone as on a desktop (Part 2). */

/* Home head: mission and tagline */
.hero { padding: var(--ms-space-6) 0 var(--ms-space-5); }
.hero .tagline {
  font-weight: var(--ms-type-weight-medium);
  color: var(--ms-color-text-muted);
  margin: 0 0 var(--ms-space-3);
}
.hero .mission {
  font-size: var(--ms-type-size-lg);
  font-weight: var(--ms-type-weight-regular);
  margin: 0;
  max-width: 34em;
}

/* One account */
.one-account {
  margin-top: 0;
  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-6);
  margin: 0 0 var(--ms-space-7);
}
.one-account h2 {
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h2);
  line-height: var(--ms-type-line-height-tight);
  margin: 0 0 var(--ms-space-3);
}
.one-account p { max-width: var(--ms-size-reading); margin: 0 0 var(--ms-space-4); }
/* The Sparks diagram is its own piece, still to be drawn: MemberSpark
   at the centre, a lightning bolt (a Spark) to each service that signs in
   (groundwork.md, section g). It carries no box of its own until then. */
.sparks-home { margin: var(--ms-space-4) 0; }
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ms-space-5);
  margin-top: var(--ms-space-5);
}
.benefits h3 {
  margin: 0 0 var(--ms-space-2);
}
.benefits p { margin: 0; color: var(--ms-color-text-muted); }

/* Apps */
.apps-group { margin: 0 0 var(--ms-space-7); }
.apps-group > h2 {
  font-family: var(--ms-type-font-display);
  margin: 0 0 var(--ms-space-4);
}
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--ms-space-4);
}
.tile {
  display: block;
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-line);
  border-radius: var(--ms-radius-md);
  box-shadow: var(--ms-shadow-card);
  padding: var(--ms-space-4) var(--ms-space-5);
  min-height: var(--ms-size-tap);
  color: var(--ms-color-text);
  text-decoration: none;
}
.tile:hover { border-color: var(--ms-color-line-strong); }
.tile .chip {
  display: block;
  width: var(--ms-size-tile);
  height: 6px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-color-tile-gold);
  margin-bottom: var(--ms-space-3);
}
.tile.c-blue .chip { background: var(--ms-color-tile-blue); }
.tile.c-violet .chip { background: var(--ms-color-tile-violet); }
.tile.c-green .chip { background: var(--ms-color-tile-green); }
.tile.c-coral .chip { background: var(--ms-color-tile-coral); }
.tile h3 { margin: 0 0 var(--ms-space-1); }
.tile p { margin: 0; color: var(--ms-color-text-muted); font-size: var(--ms-type-size-base); }

.pointer { color: var(--ms-color-text-muted); margin: 0 0 var(--ms-space-6); }

/* About */
.about h1 {
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h1);
  line-height: var(--ms-type-line-height-tight);
  margin: var(--ms-space-5) 0 var(--ms-space-2);
}
.about p { max-width: var(--ms-size-reading); }
.about h2 {
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h2);
  margin: var(--ms-space-7) 0 var(--ms-space-3);
}
.about h3 {
  margin: var(--ms-space-5) 0 var(--ms-space-2);
}
.about .prop { margin: 0 0 var(--ms-space-3); max-width: var(--ms-size-reading); }
.about .prop a { font-weight: var(--ms-type-weight-medium); }
.flag { height: 1.05em; width: auto; vertical-align: -0.15em; }
.draft-note {
  background: var(--ms-color-surface-muted);
  border-radius: var(--ms-radius-md);
  padding: var(--ms-space-3) var(--ms-space-4);
}

.breadcrumbs {
  font-size: .9rem;
  margin: 0 0 .6rem;
  color: var(--ms-color-text-muted);
}
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  padding: 0 .2rem;
}
.last-updated {
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-sm);
  margin: 0 0 var(--ms-space-3);
}

/* Footer */
.site-footer {
  margin-top: var(--ms-space-7);
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-sm);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--ms-space-5); margin-bottom: var(--ms-space-4); }
.footer-links a { color: var(--ms-color-text); text-decoration: none; font-weight: var(--ms-type-weight-medium); }
.footer-links a:hover { text-decoration: underline; }
.site-footer p { margin: var(--ms-space-2) 0; }
.colour-bar {
  display: flex;
  height: 6px;
  border-radius: var(--ms-radius-pill);
  overflow: hidden;
  margin: var(--ms-space-5) 0 var(--ms-space-4);
}
.colour-bar span { flex: 1; }
.colour-bar .b1 { background: var(--ms-brand-stripe-1); }
.colour-bar .b2 { background: var(--ms-brand-stripe-2); }
.colour-bar .b3 { background: var(--ms-brand-stripe-3); }
.colour-bar .b4 { background: var(--ms-brand-stripe-4); }
.colour-bar .b5 { background: var(--ms-brand-stripe-5); }
.colour-bar .b6 { background: var(--ms-brand-stripe-6); }
.colour-bar .b7 { background: var(--ms-brand-stripe-7); }
.closing .product-line { font-weight: var(--ms-type-weight-bold); color: var(--ms-color-text); }

/* --- Furniture pass (MemberSpark #45; audit #50 tap floor) -----------------
   The header sticks. On a phone the system's second tab row wraps past the
   component's 80px row cap with this site's five tabs, so the cap lifts
   there. The Pilot warning tag stands beside the dark toggle, in the
   system's warning (badge-due) colours, as a 44px target like the buttons
   beside it. Footer links meet the 44px tap floor. */

.ms-header { position: sticky; top: 0; z-index: 20; }

/* The current page's header icon takes the tab highlight. */
.ms-icon-btn[aria-current="page"] { background: var(--ms-color-surface-muted); }

/* The theme button's face is settled before first paint (#68). The head
   script puts the stored mode on <html> as data-theme-mode; the face
   shown is the mode the button switches to, the same end state site.js
   paints when it loads, so the face never flips on navigation. Without
   the attribute (no JavaScript) the shipped markup stands as shipped. */
:root[data-theme-mode="light"] #theme-toggle svg[data-face="dark"],
:root[data-theme-mode="dark"] #theme-toggle svg[data-face="default"],
:root[data-theme-mode="default"] #theme-toggle svg[data-face="light"] {
  display: block;
}
:root[data-theme-mode="light"] #theme-toggle svg[data-face="light"],
:root[data-theme-mode="light"] #theme-toggle svg[data-face="default"],
:root[data-theme-mode="dark"] #theme-toggle svg[data-face="light"],
:root[data-theme-mode="dark"] #theme-toggle svg[data-face="dark"],
:root[data-theme-mode="default"] #theme-toggle svg[data-face="dark"],
:root[data-theme-mode="default"] #theme-toggle svg[data-face="default"] {
  display: none;
}

@media (max-width: 40rem) {
  .ms-header__row--tabs { max-height: none; justify-content: flex-end; }
  /* On a phone Row 1 keeps Help and the dark toggle (Part 2); Account
     and Settings stand on the second row, as .ms-header__shortcut--row2. */
  .ms-header__shortcut--row2 { display: none; }
}

.pilot-tag {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 3px 9px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-color-badge-due-bg);
  color: var(--ms-color-badge-due-fg);
  font-size: 0.68rem;
  font-weight: var(--ms-type-weight-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.pilot-tag:hover { text-decoration: underline; }

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
}
.site-footer p a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
}

/* Feedback form: the fields, button and error text are the system's
   .ms-field/.ms-input/.ms-btn/.ms-error; only the trap and the status
   line are the site's own. */
.feedback-form { max-width: var(--ms-size-reading); }
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status { min-height: 1.4em; font-weight: var(--ms-type-weight-medium); }
.form-status.err { color: var(--ms-color-danger); }

/* Settings: the theme choice is three real buttons; the pressed one
   carries the primary colours. */
.theme-choices { display: flex; flex-wrap: wrap; gap: var(--ms-space-3); }
.theme-choices [aria-pressed="true"] {
  background: var(--ms-color-primary);
  color: var(--ms-color-on-primary);
  border-color: transparent;
}

/* Standards pass 2026-11-10 (#82), completed by the review batch
   (#93-#111): the header row stands at exactly 56px; the spark stands
   in its 36px tile; the first section begins within 12px of the
   header's bottom edge; Help boxes are word-only. */
.ms-header__row { min-height: 56px; max-height: 56px; height: 56px; }
.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; }
/* The seven-stripe bar stands above the header row and in the footer. */
.ms-header__row--tabs { display: none; }
@media (max-width: 40rem) {
  .ms-header__row--tabs { display: flex; align-items: center; min-height: 56px; max-height: 56px; height: 56px; max-width: var(--ms-size-page); margin: 0 auto; padding: 0 var(--ms-space-gutter); }
  .ms-header__row--tabs .ms-header__group { margin-left: auto; }
}
.ms-page h3 { font-size: var(--ms-type-size-h3); }
.tile h3 { font-size: var(--ms-type-size-h3); }
.about h3 { font-size: var(--ms-type-size-h3); }
.page { padding-top: var(--ms-space-3); }
.hero { padding-top: 0; }
.help-boxes { display: flex; flex-wrap: wrap; gap: var(--ms-space-3); margin: var(--ms-space-4) 0 var(--ms-space-5); }
.help-box { display: inline-flex; align-items: center; min-height: var(--ms-size-tap); padding: 0 var(--ms-space-5); border: 1px solid var(--ms-color-line); border-radius: var(--ms-radius-md); background: var(--ms-color-surface); color: var(--ms-color-text); font-weight: var(--ms-type-weight-bold); text-decoration: none; }
.help-box:hover { text-decoration: underline; }