@charset "UTF-8";
/* D102 Design System — Typography */
/* ============================================================
   FONT
   Inter variable font — loaded from local assets first,
   falling back to Google Fonts if unavailable.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* D102 Design System — Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Remove default margin */
body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

/* D102 Design System — Colour */
/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* --- Core brand colours ---
     TODO: Confirm final values with brand team if needed */
  --d102-black: #000000;
  --d102-yellow: #FDE70A;
  --d102-white: #FFFFFF;
  /* --- RGB values (for use with rgba/opacity) --- */
  --d102-black-rgb: 0, 0, 0;
  --d102-yellow-rgb: 253, 231, 10;
  --d102-white-rgb: 255, 255, 255;
  /* --- Accent colour RGB values --- */
  --d102-blue-rgb: 32, 59, 142;
  --d102-green-rgb: 100, 220, 76;
  --d102-purple-rgb: 146, 145, 199;
  --d102-pink-rgb: 230, 0, 121;
  --d102-grey-rgb: 136, 137, 141;
  /* --- Black / greyscale tints ---
     Calculated as: tint = black × opacity + white × (1 − opacity) */
  --d102-hex-black-100: hsl(0, 0%, 0%);
  --d102-hex-black-95: hsl(0, 0%, 5%);
  --d102-hex-black-90: hsl(0, 0%, 10%);
  --d102-hex-black-85: hsl(0, 0%, 15%);
  --d102-hex-black-80: hsl(0, 0%, 20%);
  --d102-hex-black-70: hsl(0, 0%, 30%);
  --d102-hex-black-60: hsl(0, 0%, 40%);
  --d102-hex-black-50: hsl(0, 0%, 50%);
  --d102-hex-black-40: hsl(0, 0%, 60%);
  --d102-hex-black-30: hsl(0, 0%, 70%);
  --d102-hex-black-20: hsl(0, 0%, 80%);
  --d102-hex-black-10: hsl(0, 0%, 90%);
  --d102-hex-black-05: hsl(0, 0%, 95%);
  /* --- Yellow tints --- */
  --d102-hex-yellow-100: #FDE70A;
  --d102-hex-yellow-80: #FDEC3B;
  --d102-hex-yellow-60: #FEF16C;
  --d102-hex-yellow-40: #FEF59D;
  --d102-hex-yellow-20: #FFFACD;
  /* --- Accent: Blue --- */
  --d102-hex-blue-100: #203b8e;
  --d102-hex-blue-80: #4D62A5;
  --d102-hex-blue-60: #7989BB;
  --d102-hex-blue-40: #A6B1D2;
  --d102-hex-blue-20: #D2D8E8;
  /* --- Accent: Green --- */
  --d102-hex-green-100: #64dc4c;
  --d102-hex-green-80: #83E370;
  --d102-hex-green-60: #A2EA94;
  --d102-hex-green-40: #C1F1B7;
  --d102-hex-green-20: #E0F8DB;
  /* --- Accent: Pink --- */
  --d102-hex-pink-100: #e60079;
  --d102-hex-pink-80: #EB3394;
  --d102-hex-pink-60: #F066AF;
  --d102-hex-pink-40: #F599C9;
  --d102-hex-pink-20: #FACCE4;
  /* --- Accent: Grey --- */
  --d102-hex-grey-100: #88898D;
  --d102-hex-grey-80: #ADAEB0;
  --d102-hex-grey-60: #C2C2C4;
  --d102-hex-grey-40: #D5D6D7;
  --d102-hex-grey-20: #E9E9EA;
  /* --- Accent: Amber (warning / caution states) --- */
  --d102-hex-amber-100: #b45309;
  --d102-hex-amber-80: #c27520;
  --d102-hex-amber-60: #d19650;
  --d102-hex-amber-40: #e0b880;
  --d102-hex-amber-20: #f0dbbf;
  --d102-amber-darktext: #3d1a00;
  /* --- Semantic status tokens --- */
  --d102-status-success: #16a34a;
  --d102-status-success-bg: #d1fae5;
  --d102-status-success-text: #065f46;
  --d102-status-warning: var(--d102-hex-amber-100);
  --d102-status-warning-bg: #fef3c7;
  --d102-status-warning-text: #92400e;
  --d102-status-error: #dc2626;
  --d102-status-error-bg: #fee2e2;
  --d102-status-error-text: #991b1b;
  /* --- Accessible dark text colours for tinted backgrounds ---
     Use when placing text on a light tinted version of each colour */
  --d102-yellow-darktext: #000000;
  --d102-blue-darktext: #0D1F4D;
  --d102-green-darktext: #1C5C0A;
  --d102-pink-darktext: #6B0037;
  --d102-grey-darktext: #3D4142;
  --d102-amber-darktext: #3D1A00;
  /* --- Focus state ---
  NOTE: Phasing out d102-focus, d102-focus-text and d102-focus-shadow
  Use the colour tags for yellow, blue and black instead */
  --d102-focus: var(--d102-link);
  --d102-focus-text: #000000;
  --d102-focus-shadow: #000000;
  --d102-focus-yellow: var(--d102-hex-yellow-100);
  --d102-focus-blue: var(--d102-link);
  --d102-focus-black: var(--d102-hex-black-95);
  /* --- Light Mode (default) --- */
  /* --- Semantic / contextual tokens (light mode) --- */
  --d102-bg: #FFFFFF;
  --d102-text: var(--d102-hex-black-100);
  --d102-text-muted: var(--d102-hex-black-60);
  --d102-border: var(--d102-hex-black-20);
  --d102-surface: var(--d102-hex-black-05);
  --d102-surface-2: var(--d102-hex-black-10);
  /* --- Link colours (GOV.UK palette — update here to retheme links) --- */
  --d102-link: #1d70b8;
  --d102-link-visited: #4c2c92;
  --d102-link-hover: #003078;
  --d102-link-active: var(--d102-hex-black-100);
}

/* Dark mode */
body[data-theme=dark] {
  --d102-bg: var(--d102-hex-black-90);
  --d102-text: #FFFFFF;
  --d102-text-muted: var(--d102-hex-black-20);
  --d102-border: var(--d102-hex-black-70);
  --d102-surface: var(--d102-hex-black-85);
  --d102-surface-2: var(--d102-hex-black-80);
  /* Lighter link colours for dark backgrounds */
  --d102-link: #2ebdfe;
  --d102-link-visited: #c78fce;
  --d102-link-hover: #a8d1f0;
  --d102-link-active: #FFFFFF;
  /* Accent colours adjusted for dark backgrounds
     Blue is dark navy and would disappear — lighten to 80% tint.
     Pink and green are vibrant enough to hold, but text switches to white/black. */
  --d102-hex-blue-100-dm: #4D62A5;
  --d102-hex-pink-100-dm: #e60079;
  --d102-hex-green-100-dm: #64dc4c;
}

/* ============================================================
   TEXT COLOUR UTILITY CLASSES
   ============================================================ */
.d102-colour-text-black {
  color: var(--d102-hex-black-100);
}

.d102-colour-text-yellow {
  color: var(--d102-hex-yellow-100);
}

.d102-colour-text-white {
  color: var(--d102-white);
}

.d102-colour-text-blue {
  color: var(--d102-hex-blue-100);
}

.d102-colour-text-green {
  color: var(--d102-hex-green-100);
}

.d102-colour-text-pink {
  color: var(--d102-hex-pink-100);
}

.d102-colour-text-muted {
  color: var(--d102-text-muted);
}

/* ============================================================
   BACKGROUND COLOUR UTILITY CLASSES
   Each includes a default text colour pairing for accessibility
   ============================================================ */
/* Core brand */
.d102-colour-bg-black {
  background-color: var(--d102-hex-black-100);
  color: var(--d102-white);
}

.d102-colour-bg-black a {
  color: var(--d102-white);
}

.d102-colour-bg-yellow {
  background-color: var(--d102-hex-yellow-100);
  color: var(--d102-yellow-darktext);
}

.d102-colour-bg-white {
  background-color: var(--d102-white);
  color: var(--d102-hex-black-100);
}

/* Greyscale tints */
.d102-colour-bg-black-20 {
  background-color: var(--d102-hex-black-20);
  color: var(--d102-hex-black-100);
}

.d102-colour-bg-black-40 {
  background-color: var(--d102-hex-black-40);
  color: var(--d102-hex-black-100);
}

/* Yellow tints */
.d102-colour-bg-yellow-20 {
  background-color: var(--d102-hex-yellow-20);
  color: var(--d102-yellow-darktext);
}

.d102-colour-bg-yellow-40 {
  background-color: var(--d102-hex-yellow-40);
  color: var(--d102-yellow-darktext);
}

/* Accent colours */
.d102-colour-bg-blue {
  background-color: var(--d102-hex-blue-100);
  color: #FFFFFF;
}

.d102-colour-bg-blue-20 {
  background-color: var(--d102-hex-blue-20);
  color: var(--d102-blue-darktext);
}

.d102-colour-bg-green {
  background-color: var(--d102-hex-green-100);
  color: var(--d102-green-darktext);
}

.d102-colour-bg-green-20 {
  background-color: var(--d102-hex-green-20);
  color: var(--d102-green-darktext);
}

.d102-colour-bg-purple {
  background-color: var(--d102-hex-purple-100);
  color: #FFFFFF;
}

.d102-colour-bg-purple-20 {
  background-color: var(--d102-hex-purple-20);
  color: var(--d102-purple-darktext);
}

.d102-colour-bg-pink {
  background-color: var(--d102-hex-pink-100);
  color: var(--d102-pink-darktext);
}

.d102-colour-bg-pink-20 {
  background-color: var(--d102-hex-pink-20);
  color: var(--d102-pink-darktext);
}

.d102-colour-bg-grey {
  background-color: var(--d102-hex-grey-100);
  color: #FFFFFF;
}

.d102-colour-bg-grey-20 {
  background-color: var(--d102-hex-grey-20);
  color: var(--d102-hex-black-100);
}

/* Amber */
.d102-colour-text-amber {
  color: var(--d102-hex-amber-100);
}

.d102-colour-bg-amber {
  background-color: var(--d102-hex-amber-100);
  color: #FFFFFF;
}

.d102-colour-bg-amber-20 {
  background-color: var(--d102-hex-amber-20);
  color: var(--d102-amber-darktext);
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Fallback: Google Fonts (online only) */
:root {
  --d102-font: 'Inter', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --d102-fw-light: 300;
  --d102-fw-regular: 400;
  --d102-fw-semibold: 600;
  --d102-fw-bold: 700;
  --d102-lh-body: 1.55;
  --d102-lh-heading: 1.15;
  --d102-lh-tight: 1.05;
  --d102-fs-body: 1rem; /* 16px */
  --d102-fs-body-s: 0.875rem; /* 14px */
  --d102-fs-body-l: 1.25rem; /* 20px */
}

/* ============================================================
   BASE BODY
   ============================================================ */
body {
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-light);
  font-size: var(--d102-fs-body);
  line-height: var(--d102-lh-body);
  color: var(--d102-text, #000000);
  background-color: var(--d102-bg, #FFFFFF);
}

/* ============================================================
   HEADINGS
   Applies to both semantic elements and utility classes.
   Semantic h1–h6 are styled directly for WordPress compatibility.
   ============================================================ */
/* Major Third scale (1.250) */
h1, .d102-heading-xl {
  font-size: 3.815rem;
} /* ~61px */
h2, .d102-heading-l {
  font-size: 3.052rem;
} /* ~49px */
h3, .d102-heading-m {
  font-size: 2.441rem;
} /* ~39px */
h4, .d102-heading-s {
  font-size: 1.953rem;
} /* ~31px */
h5, .d102-heading-xs {
  font-size: 1.563rem;
} /* ~25px */
h6, .d102-heading-xxs {
  font-size: 1.25rem;
} /* 20px */
h1, h2, h3, h4, h5, h6,
.d102-heading-xl,
.d102-heading-l,
.d102-heading-m,
.d102-heading-s,
.d102-heading-xs,
.d102-heading-xxs {
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-bold);
  line-height: var(--d102-lh-heading);
  color: var(--d102-text, #000000);
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* Responsive heading scale */
@media (max-width: 960px) {
  h1, .d102-heading-xl {
    font-size: 2.441rem;
  }
  h2, .d102-heading-l {
    font-size: 2rem;
  }
  h3, .d102-heading-m {
    font-size: 1.66rem;
  }
  h4, .d102-heading-s {
    font-size: 1.5rem;
  }
}
@media (max-width: 480px) {
  h1, .d102-heading-xl {
    font-size: 2rem;
  }
  h2, .d102-heading-l {
    font-size: 1.75rem;
  }
  h3, .d102-heading-m {
    font-size: 1.66rem;
  }
  h4, .d102-heading-s {
    font-size: 1.5rem;
  }
}
/* ============================================================
   BODY TEXT
   ============================================================ */
p,
.d102-body {
  font-weight: var(--d102-fw-light);
  font-size: var(--d102-fs-body);
  line-height: var(--d102-lh-body);
  margin-top: 0;
  margin-bottom: var(--d102-sp-4);
}

p:last-child,
.d102-body:last-child {
  margin-bottom: 0;
}

.d102-body-lead {
  font-size: var(--d102-fs-body-l);
  font-weight: var(--d102-fw-light);
  line-height: 1.45;
  margin-top: 0;
  margin-bottom: var(--d102-sp-4);
}

.d102-body-s {
  font-size: var(--d102-fs-body-s);
  line-height: var(--d102-lh-body);
  margin-bottom: var(--d102-sp-3);
}

.d102-body-muted {
  color: var(--d102-text-muted);
}

strong {
  font-weight: var(--d102-fw-bold);
}

/* ============================================================
   PROSE RHYTHM
   Use on editorial/content wrappers where headings sit among paragraphs,
   lists, and other long-form content. Keeps components free to define their
   own internal spacing.
   ============================================================ */
.d102-prose > :where(h2, h3, h4, h5, h6) {
  margin-top: var(--d102-sp-8);
  margin-bottom: var(--d102-sp-3);
}

.d102-prose > :where(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

.d102-prose > :where(h2, h3, h4, h5, h6) + :where(p, ul, ol) {
  margin-top: 0;
}

/* ============================================================
   LISTS
   Applies to both bare elements and utility classes
   ============================================================ */
ul, ol,
.d102-list {
  font-size: 1rem;
  font-weight: var(--d102-fw-light);
  line-height: var(--d102-lh-body);
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.35rem;
}

li:last-child {
  margin-bottom: 0;
}

ul li {
  list-style-type: disc;
}

ol li {
  list-style-type: decimal;
}

.d102-list--none {
  list-style: none;
  padding-left: 0;
}

.d102-list--none li {
  list-style: none;
}

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: var(--d102-link);
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625rem);
  text-underline-offset: 0.15em;
  transition: color 100ms, background-color 100ms, box-shadow 100ms;
}

a:hover {
  text-decoration-thickness: 3px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  -webkit-text-decoration-skip: none;
  color: var(--d102-link-hover, #003078);
}

a:focus-visible {
  outline: 3px solid transparent;
  color: var(--d102-focus-black);
  background-color: white;
  box-shadow: 0 0 0px 2px white, 0 0 0px 4px var(--d102-focus-black), 0 0 0px 8px var(--d102-focus-blue);
  border-radius: 1px;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

body[data-theme=dark] a:focus-visible {
  color: white;
  background-color: black;
  box-shadow: 0 0 0px 2px black, 0 0 0px 4px black, 0 0 0px 8px var(--d102-focus-blue);
}

/* External links: use d102-link--icon-external from components/_link-icon.scss */
a.d102-link--white,
a.d102-link--white:hover,
a.d102-link--white:visited {
  color: var(--d102-link-white, #FFFFFF);
}

a.d102-link--white:focus-visible {
  color: var(--d102-focus-text, #000000);
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.d102-skip-link {
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: var(--d102-yellow);
  color: #000000;
  font-weight: var(--d102-fw-bold);
  font-family: var(--d102-font);
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 3px solid #000000;
}

.d102-skip-link:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background-color: white;
  color: #000000;
}

.d102-skip-link:focus,
.d102-skip-link:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 0;
  box-shadow: none;
  background-color: var(--d102-yellow);
}

/* ============================================================
   TYPE UTILITY CLASSES
   ============================================================ */
.d102-text-bold {
  font-weight: var(--d102-fw-bold);
}

.d102-text-semibold {
  font-weight: var(--d102-fw-semibold);
}

.d102-text-light {
  font-weight: var(--d102-fw-light);
}

.d102-text-upper {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.d102-text-center {
  text-align: center;
}

.d102-text-right {
  text-align: right;
}

.d102-text-left {
  text-align: left;
}

.d102-text-nowrap {
  white-space: nowrap;
}

/* ============================================================
   GOVUK FONT OVERRIDE
   Removes GDS Transport and applies D102 font to all GOV.UK
   frontend components when used alongside this design system
   ============================================================ */
.govuk-link, .govuk-list, .govuk-heading-xl, .govuk-heading-l,
.govuk-heading-m, .govuk-heading-s, .govuk-caption-xl,
.govuk-caption-l, .govuk-caption-m, .govuk-body-lead,
.govuk-body-l, .govuk-body, .govuk-body-m, .govuk-body-s,
.govuk-body-xs, .govuk-button-group .govuk-link,
.govuk-accordion__section-button,
.govuk-frontend-supported .govuk-accordion__show-all,
.govuk-back-link, .govuk-breadcrumbs, .govuk-breadcrumbs__link,
.govuk-button, .govuk-error-message, .govuk-hint, .govuk-label,
.govuk-textarea, .govuk-fieldset__legend, .govuk-checkboxes__divider,
.govuk-input, .govuk-input__prefix, .govuk-input__suffix,
.govuk-details, .govuk-error-summary, .govuk-error-summary__list a,
.govuk-file-upload, .govuk-footer, .govuk-footer__link,
.govuk-header, .govuk-header__menu-button, .govuk-inset-text,
.govuk-notification-banner, .govuk-notification-banner__link,
.govuk-pagination__item, .govuk-pagination__next, .govuk-pagination__prev,
.govuk-panel, .govuk-tag, .govuk-phase-banner__content,
.govuk-radios__divider, .govuk-select, .govuk-skip-link,
.govuk-summary-list, .govuk-summary-card__title, .govuk-table,
.govuk-tabs, .govuk-tabs__tab, .govuk-task-list, .govuk-warning-text {
  font-family: var(--d102-font) !important;
}

/* D102 Design System — Layout */
/* ============================================================
   SPACING SCALE
   All units based on 1rem = 16px
   ============================================================ */
:root {
  --d102-sp-1: 0.25rem; /*  4px */
  --d102-sp-2: 0.5rem; /*  8px */
  --d102-sp-3: 0.75rem; /* 12px */
  --d102-sp-4: 1rem; /* 16px */
  --d102-sp-5: 1.25rem; /* 20px */
  --d102-sp-6: 1.5rem; /* 24px */
  --d102-sp-7: 2rem; /* 32px */
  --d102-sp-8: 2.5rem; /* 40px */
  --d102-sp-9: 3rem; /* 48px */
  --d102-sp-10: 4rem; /* 64px */
  --d102-sp-11: 5rem; /* 80px */
  --d102-sp-12: 6rem; /* 96px */
  --d102-container-max: 80rem; /* 1280px */
  --d102-container-narrow: 45rem; /* 720px */
  --d102-container-wide: 90rem; /* 1440px */
  --d102-container-padding: 1.5rem;
  /* Breakpoints (reference only — use media queries below) */
  --d102-bp-mobile: 480px;
  --d102-bp-tablet: 960px;
  --d102-bp-desktop: 1280px;
}

@media (max-width: 960px) {
  :root {
    --d102-container-padding: 1.25rem;
  }
}
@media (max-width: 480px) {
  :root {
    --d102-container-padding: 1rem;
  }
}
/* ============================================================
   CONTAINER
   ============================================================ */
.d102-container {
  max-width: var(--d102-container-max);
  margin-inline: auto;
  padding-inline: var(--d102-container-padding);
  width: 100%;
}

.d102-container--narrow {
  max-width: var(--d102-container-narrow);
}

.d102-container--wide {
  max-width: var(--d102-container-wide);
}

/* ============================================================
   GRID LAYOUTS
   ============================================================ */
.d102-grid {
  display: grid;
  gap: var(--d102-sp-6);
}

/* 50 : 50 */
.d102-grid--50-50 {
  grid-template-columns: 1fr 1fr;
}

/* 66 : 33 */
.d102-grid--66-33 {
  grid-template-columns: 2fr 1fr;
}

/* 33 : 66 */
.d102-grid--33-66 {
  grid-template-columns: 1fr 2fr;
}

/* 25 : 75 */
.d102-grid--25-75 {
  grid-template-columns: 1fr 3fr;
}

/* 75 : 25 */
.d102-grid--75-25 {
  grid-template-columns: 3fr 1fr;
}

/* 33 : 33 : 33 */
.d102-grid--thirds {
  grid-template-columns: repeat(3, 1fr);
}

/* 25 : 25 : 25 : 25 */
.d102-grid--quarters {
  grid-template-columns: repeat(4, 1fr);
}

/* Tablet — 2-col layouts go single column; 3 and 4 col go 2 col */
@media (max-width: 960px) {
  .d102-grid--50-50,
  .d102-grid--66-33,
  .d102-grid--33-66,
  .d102-grid--25-75,
  .d102-grid--75-25 {
    grid-template-columns: 1fr;
  }
  .d102-grid--thirds,
  .d102-grid--quarters {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile — all grids single column */
@media (max-width: 480px) {
  .d102-grid--thirds,
  .d102-grid--quarters {
    grid-template-columns: 1fr;
  }
}
/* Gap size modifiers */
.d102-grid--gap-s {
  gap: var(--d102-sp-3);
}

.d102-grid--gap-l {
  gap: var(--d102-sp-9);
}

/* ============================================================
   FLEX UTILITIES
   ============================================================ */
.d102-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d102-sp-4);
}

.d102-flex--column {
  flex-direction: column;
}

/* Items spread across row with centred vertical alignment */
.d102-flex--space-between {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d102-sp-4);
  justify-content: space-between;
  align-items: center;
}

.d102-flex--center {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d102-sp-4);
  justify-content: center;
  align-items: center;
}

.d102-flex--align-start {
  align-items: flex-start;
}

.d102-flex--align-end {
  align-items: flex-end;
}

.d102-flex--align-center {
  align-items: center;
}

.d102-flex--gap-s {
  gap: var(--d102-sp-2);
}

.d102-flex--gap-m {
  gap: var(--d102-sp-4);
}

.d102-flex--gap-l {
  gap: var(--d102-sp-7);
}

/* ============================================================
   SECTION WRAPPERS
   ============================================================ */
.d102-section {
  padding-block: var(--d102-sp-10);
}

.d102-section--s {
  padding-block: var(--d102-sp-7);
}

.d102-section--l {
  padding-block: var(--d102-sp-12);
}

/* ============================================================
   SPACING UTILITIES — MARGIN
   ============================================================ */
.d102-mt-0 {
  margin-top: 0;
}

.d102-mt-2 {
  margin-top: var(--d102-sp-2);
}

.d102-mt-4 {
  margin-top: var(--d102-sp-4);
}

.d102-mt-6 {
  margin-top: var(--d102-sp-6);
}

.d102-mt-8 {
  margin-top: var(--d102-sp-8);
}

.d102-mt-10 {
  margin-top: var(--d102-sp-10);
}

.d102-mb-0 {
  margin-bottom: 0;
}

.d102-mb-2 {
  margin-bottom: var(--d102-sp-2);
}

.d102-mb-4 {
  margin-bottom: var(--d102-sp-4);
}

.d102-mb-6 {
  margin-bottom: var(--d102-sp-6);
}

.d102-mb-8 {
  margin-bottom: var(--d102-sp-8);
}

.d102-mb-10 {
  margin-bottom: var(--d102-sp-10);
}

/* ============================================================
   SPACING UTILITIES — PADDING
   ============================================================ */
.d102-p-2 {
  padding: var(--d102-sp-2);
}

.d102-p-4 {
  padding: var(--d102-sp-4);
}

.d102-p-6 {
  padding: var(--d102-sp-6);
}

.d102-p-8 {
  padding: var(--d102-sp-8);
}

.d102-py-4 {
  padding-block: var(--d102-sp-4);
}

.d102-py-6 {
  padding-block: var(--d102-sp-6);
}

.d102-py-8 {
  padding-block: var(--d102-sp-8);
}

.d102-py-10 {
  padding-block: var(--d102-sp-10);
}

.d102-px-4 {
  padding-inline: var(--d102-sp-4);
}

.d102-px-6 {
  padding-inline: var(--d102-sp-6);
}

.d102-px-8 {
  padding-inline: var(--d102-sp-8);
}

/* ============================================================
   DIVIDER
   ============================================================ */
.d102-divider {
  border: none;
  border-top: 1px solid var(--d102-border, #CCCCCC);
  margin-block: var(--d102-sp-7);
}

.d102-divider--bold {
  border-top-width: 3px;
  border-top-color: var(--d102-hex-black-100, #000000);
}

.d102-divider--yellow {
  border-top-width: 4px;
  border-top-color: var(--d102-hex-yellow-100, #FDE70A);
}

/* ============================================================
   PARTIAL DIVIDER
   based on the small, elongated D-shape, usually displayed in yellow
   ============================================================ */
.d102-partial-divider {
  display: block;
  background-color: var(--d102-hex-black-100);
  width: 6rem;
  height: 0.5rem;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  margin-block: var(--d102-sp-6);
}

body[data-theme=dark] .d102-partial-divider {
  background-color: var(--d102-hex-yellow-100);
}

.d102-partial-divider--small {
  width: 4rem;
  height: 0.4rem;
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
  margin-block: var(--d102-sp-4);
}

.d102-partial-divider--large {
  width: 10rem;
  height: 0.8rem;
  border-top-right-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  margin-block: var(--d102-sp-8);
}

.d102-partial-divider--yellow {
  background-color: var(--d102-hex-yellow-100);
}

.d102-partial-divider--grey {
  background-color: var(--d102-surface-2);
}

.d102-partial-divider--black {
  background-color: var(--d102-hex-black-100);
}

/* ============================================================
   DISPLAY / VISIBILITY UTILITIES
   ============================================================ */
.d102-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  color: white;
  background-color: black;
}

.d102-hidden {
  display: none !important;
}

@media (max-width: 480px) {
  .d102-hide-mobile {
    display: none !important;
  }
}
@media (max-width: 960px) {
  .d102-hide-tablet {
    display: none !important;
  }
}
@media (min-width: 961px) {
  .d102-hide-desktop {
    display: none !important;
  }
}
@media (min-width: 481px) {
  .d102-show-mobile-only {
    display: none !important;
  }
}
/* ============================================================
   D SHAPE GRAPHIC DEVICE
   Sharp corners left, 50% radius right — the D102 brand shape
   ============================================================ */
.d102-d-shape {
  border-radius: 0 50% 50% 0;
  overflow: hidden;
}

/* D102 Design System — Tables */
/* ============================================================
   TABLE STRUCTURE

   Styles apply automatically to:
     .d102-table             — explicit design system class
     .wp-block-table table   — WordPress Gutenberg block editor
     .entry-content table    — WordPress classic editor

   No class is needed in WordPress post content.
   ============================================================ */
:is(.d102-table, .wp-block-table table, .entry-content table) {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
}

/* ── Header ─────────────────────────────────────────────────── */
:is(.d102-table, .wp-block-table table, .entry-content table) thead tr {
  border-bottom: 2px solid var(--d102-border);
}

:is(.d102-table, .wp-block-table table, .entry-content table) th {
  background-color: var(--d102-surface);
  text-align: left;
  font-weight: 600;
  padding-block: var(--d102-sp-2);
  padding-inline: var(--d102-sp-4);
}

/* ── Body rows ───────────────────────────────────────────────── */
:is(.d102-table, .wp-block-table table, .entry-content table) tbody tr {
  border-bottom: 1px solid var(--d102-border);
}

:is(.d102-table, .wp-block-table table, .entry-content table) td {
  text-align: left;
  padding-block: var(--d102-sp-2);
  padding-inline: var(--d102-sp-4);
}

/* ── Footer rows ─────────────────────────────────────────────── */
:is(.d102-table, .wp-block-table table, .entry-content table) tfoot tr {
  border-top: 2px solid var(--d102-border);
  border-bottom: none;
}

:is(.d102-table, .wp-block-table table, .entry-content table) tfoot :is(td, th) {
  font-weight: 600;
}

/* ── Edge padding — remove from first/last cells ─────────────── */
:is(.d102-table, .wp-block-table table, .entry-content table) :is(th, td):first-child {
  padding-left: 0;
}

:is(.d102-table, .wp-block-table table, .entry-content table) :is(th, td):last-child {
  padding-right: 0;
}

/* ── Caption ─────────────────────────────────────────────────── */
:is(.d102-table, .wp-block-table table, .entry-content table) caption {
  caption-side: top;
  text-align: left;
  font-size: 0.875rem;
  color: var(--d102-text-muted);
  margin-bottom: 0.5rem;
}

/* ============================================================
   CELL MODIFIER CLASSES
   Apply to <th> or <td> for one-off adjustments.

   .d102-cell--bold     Bold text
   .d102-cell--muted    Secondary/muted text colour
   .d102-cell--right    Right-align text
   .d102-cell--center   Centre-align text
   .d102-cell--numeric  Right-aligned with tabular figures
   .d102-cell--nowrap   Prevent line wrapping
   .d102-cell--shrink   Shrinks column to fit content width
   ============================================================ */
.d102-cell--bold {
  font-weight: 700;
}

.d102-cell--muted {
  color: var(--d102-text-muted);
}

.d102-cell--right {
  text-align: right !important;
}

.d102-cell--center {
  text-align: center !important;
}

.d102-cell--numeric {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.d102-cell--nowrap {
  white-space: nowrap;
}

.d102-cell--shrink {
  width: 1%;
  white-space: nowrap;
}

/* D102 Design System — Buttons */
/* ============================================================
   BUTTON STRUCTURE
   Supports two patterns:
   1. <button class="d102-button ...">Label</button>
   2. <div class="d102-button ..."><a href="#">Label</a></div>

   Colour defaults to yellow if no --colour modifier is added.
   ============================================================ */
.d102-button {
  display: block;
  /* Internal size tokens — scoped so they don't leak */
  --_btn-unit-m: 1.875rem; /* 30px — line height slot */
  --_btn-unit-l: calc(var(--_btn-unit-m) * 1.25); /* 37.5px */
  --_btn-unit-s: calc(var(--_btn-unit-m) / 1.1875); /* ~25px */
  --_btn-font-m: 1.1875rem; /* 19px */
  --_btn-font-l: calc(var(--_btn-font-m) * 1.25);
  --_btn-font-s: calc(var(--_btn-font-m) / 1.1875);
  --_btn-pad-tb-m: calc(var(--_btn-unit-m) / 3.75); /* top */
  --_btn-pad-tb-b-m: calc(var(--_btn-unit-m) / 3.75); /* bottom (slightly less for optical) */
  --_btn-pad-lr-m: calc(var(--_btn-unit-m) / 2); /* left/right */
  --_btn-pad-lr-s: calc(var(--_btn-unit-s) / 2);
  --_btn-pad-lr-l: calc(var(--_btn-unit-l) / 2);
  --_btn-radius: 3px; /* tiny amount */
}

/* Shared styles applied to both button element and inner link */
button.d102-button,
.d102-button > a {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--_btn-font-m);
  line-height: var(--_btn-unit-m);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--_btn-radius);
  gap: calc(var(--_btn-unit-m) / 3.75);
  padding: var(--_btn-pad-tb-m) var(--_btn-pad-lr-m) var(--_btn-pad-tb-b-m) var(--_btn-pad-lr-m);
  transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
  /* Default colour: yellow */
  background-color: var(--d102-hex-yellow-100, #FDE70A);
  border-color: var(--d102-hex-yellow-100, #FDE70A);
  color: #000000;
}

/* Focus state — consistent across all button colours */
button.d102-button:focus-visible,
.d102-button > a:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: 0 0 0px 3px var(--d102-focus-black), 0 0 0px 6px var(--d102-focus-blue);
}

/* Default hover (yellow) */
button.d102-button:hover,
.d102-button > a:hover {
  background-color: var(--d102-hex-yellow-80, #FDEC3B);
  border-color: var(--d102-hex-yellow-80, #FDEC3B);
}

/* ============================================================
   SIZE MODIFIERS
   ============================================================ */
/* Small */
button.d102-button--small,
.d102-button--small > a {
  font-size: var(--_btn-font-s);
  line-height: var(--_btn-unit-s);
  gap: calc(var(--_btn-unit-s) / 3.75);
  padding: calc(var(--_btn-unit-s) / 3.75) var(--_btn-pad-lr-s) calc(var(--_btn-unit-s) / 3.75) var(--_btn-pad-lr-s);
}

/* Large */
button.d102-button--large,
.d102-button--large > a {
  font-size: var(--_btn-font-l);
  line-height: var(--_btn-unit-l);
  gap: calc(var(--_btn-unit-l) / 3.75);
  padding: calc(var(--_btn-unit-l) / 3.75) var(--_btn-pad-lr-l) calc(var(--_btn-unit-l) / 3.75) var(--_btn-pad-lr-l);
}

/* Full width */
button.d102-button--full,
.d102-button--full > a {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Rounded — lozenge/pill shape */
button.d102-button--rounded,
.d102-button--rounded > a {
  --_btn-radius: 100vmax;
  --_btn-pad-lr-s: calc(var(--_btn-unit-s) / 1.33);
  --_btn-pad-lr-m: calc(var(--_btn-unit-m) / 1.33);
  --_btn-pad-lr-l: calc(var(--_btn-unit-l) / 1.33);
}

/* Mobile: step down sizes automatically */
@media (max-width: 480px) {
  button.d102-button,
  .d102-button > a {
    font-size: var(--_btn-font-s);
    line-height: var(--_btn-unit-s);
    gap: calc(var(--_btn-unit-s) / 3.75);
    padding: calc(var(--_btn-unit-s) / 3.75) var(--_btn-pad-lr-s) calc(var(--_btn-unit-s) / 5) var(--_btn-pad-lr-s);
  }
  button.d102-button--large,
  .d102-button--large > a {
    font-size: var(--_btn-font-m);
    line-height: var(--_btn-unit-m);
    gap: calc(var(--_btn-unit-m) / 3.75);
    padding: calc(var(--_btn-unit-m) / 3.75) var(--_btn-pad-lr-m) calc(var(--_btn-unit-m) / 5) var(--_btn-pad-lr-m);
  }
}
/* ============================================================
   PRIMARY COLOUR VARIANTS (solid fill)
   ============================================================ */
/* Yellow — explicit class (same as default, for clarity in generated code) */
button.d102-button--yellow,
.d102-button--yellow > a {
  background-color: var(--d102-hex-yellow-100);
  border-color: rgba(0, 0, 0, 0.05);
  color: #000000;
}

button.d102-button--yellow:hover,
.d102-button--yellow > a:hover {
  background-color: var(--d102-hex-yellow-60);
  border-color: rgba(0, 0, 0, 0.2);
}

/* Black */
button.d102-button--black,
.d102-button--black > a {
  background-color: var(--d102-hex-black-100);
  border-color: var(--d102-hex-black-100);
  color: #FFFFFF;
}

button.d102-button--black:hover,
.d102-button--black > a:hover {
  background-color: var(--d102-hex-black-80);
  border-color: var(--d102-hex-black-80);
}

body[data-theme=dark] button.d102-button--black,
body[data-theme=dark] .d102-button--black > a {
  background-color: var(--d102-hex-black-95);
  border-color: var(--d102-hex-black-80);
  color: #FFFFFF;
}
body[data-theme=dark] button.d102-button--black:hover,
body[data-theme=dark] .d102-button--black > a:hover {
  background-color: var(--d102-hex-black-100);
  border-color: var(--d102-hex-black-80);
}

/* Dark Grey */
button.d102-button--dark-grey,
.d102-button--dark-grey > a {
  background-color: var(--d102-hex-black-80);
  border-color: var(--d102-hex-black-100);
  color: #FFFFFF;
}

button.d102-button--dark-grey:hover,
.d102-button--dark-grey > a:hover {
  background-color: var(--d102-hex-black-70);
  border-color: var(--d102-hex-black-100);
}

body[data-theme=dark] button.d102-button--dark-grey,
body[data-theme=dark] .d102-button--dark-grey > a {
  background-color: var(--d102-hex-black-90);
  border-color: var(--d102-hex-black-80);
  color: #FFFFFF;
}
body[data-theme=dark] button.d102-button--dark-grey:hover,
body[data-theme=dark] .d102-button--dark-grey > a:hover {
  background-color: var(--d102-hex-black-95);
  border-color: var(--d102-hex-black-80);
}

/* Grey */
button.d102-button--grey,
.d102-button--grey > a {
  background-color: var(--d102-hex-black-60);
  border-color: var(--d102-hex-black-70);
  color: #FFFFFF;
}

button.d102-button--grey:hover,
.d102-button--grey > a:hover {
  background-color: var(--d102-hex-black-50);
  border-color: var(--d102-hex-black-70);
}

body[data-theme=dark] button.d102-button--grey,
body[data-theme=dark] .d102-button--grey > a {
  background-color: var(--d102-hex-black-60);
  border-color: var(--d102-hex-black-80);
  color: #FFFFFF;
}
body[data-theme=dark] button.d102-button--grey:hover,
body[data-theme=dark] .d102-button--grey > a:hover {
  background-color: var(--d102-hex-black-70);
  border-color: var(--d102-hex-black-80);
}

/* Green — new vibrant #64dc4c; dark green text fails contrast, use black */
button.d102-button--green,
.d102-button--green > a {
  background-color: var(--d102-hex-green-100);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000000;
}

button.d102-button--green:hover,
.d102-button--green > a:hover {
  background-color: var(--d102-hex-green-80);
  border-color: rgba(0, 0, 0, 0.15);
}

/* Pink — new saturated #e60079; dark text fails contrast, use white */
button.d102-button--pink,
.d102-button--pink > a {
  background-color: var(--d102-hex-pink-100);
  border-color: rgba(0, 0, 0, 0.1);
  color: #FFFFFF;
}

button.d102-button--pink:hover,
.d102-button--pink > a:hover {
  background-color: var(--d102-hex-pink-80);
  border-color: rgba(0, 0, 0, 0.15);
}

/* Blue — dark navy #203b8e; use white text */
button.d102-button--blue,
.d102-button--blue > a {
  background-color: var(--d102-hex-blue-100);
  border-color: rgba(0, 0, 0, 0.1);
  color: #FFFFFF;
}

button.d102-button--blue:hover,
.d102-button--blue > a:hover {
  background-color: var(--d102-hex-blue-80);
  border-color: rgba(0, 0, 0, 0.15);
}

/* ============================================================
   SECONDARY COLOUR VARIANTS (light tint + border)
   Secondary buttons use lighter font weight
   ============================================================ */
button.d102-button--yellow-secondary,
.d102-button--yellow-secondary > a,
button.d102-button--black-secondary,
.d102-button--black-secondary > a,
button.d102-button--blue-secondary,
.d102-button--blue-secondary > a,
button.d102-button--green-secondary,
.d102-button--green-secondary > a,
button.d102-button--purple-secondary,
.d102-button--purple-secondary > a,
button.d102-button--pink-secondary,
.d102-button--pink-secondary > a,
button.d102-button--grey-secondary,
.d102-button--grey-secondary > a {
  font-weight: 300;
}

/* Yellow secondary */
button.d102-button--yellow-secondary,
.d102-button--yellow-secondary > a {
  background-color: var(--d102-hex-yellow-20);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--d102-yellow-darktext);
}

button.d102-button--yellow-secondary:hover,
.d102-button--yellow-secondary > a:hover {
  background-color: var(--d102-hex-yellow-40);
  border-color: rgba(0, 0, 0, 0.2);
}

/* Black secondary */
button.d102-button--black-secondary,
.d102-button--black-secondary > a {
  background-color: var(--d102-hex-black-20);
  border-color: var(--d102-hex-black-40);
  color: var(--d102-hex-black-100);
}

button.d102-button--black-secondary:hover,
.d102-button--black-secondary > a:hover {
  background-color: var(--d102-hex-black-10);
  border-color: var(--d102-hex-black-80);
}

/* Grey secondary */
button.d102-button--grey-secondary,
.d102-button--grey-secondary > a {
  background-color: var(--d102-hex-black-05);
  border-color: var(--d102-hex-black-40);
  color: var(--d102-grey-darktext);
}

button.d102-button--grey-secondary:hover,
.d102-button--grey-secondary > a:hover {
  background-color: var(--d102-hex-black-10);
  border-color: var(--d102-hex-black-80);
}

/* Green secondary */
button.d102-button--green-secondary,
.d102-button--green-secondary > a {
  background-color: var(--d102-hex-green-20);
  border-color: var(--d102-hex-green-40);
  color: var(--d102-green-darktext);
}

button.d102-button--green-secondary:hover,
.d102-button--green-secondary > a:hover {
  background-color: var(--d102-hex-green-40);
  border-color: var(--d102-hex-green-80);
}

/* Pink secondary */
button.d102-button--pink-secondary,
.d102-button--pink-secondary > a {
  background-color: var(--d102-hex-pink-20);
  border-color: var(--d102-hex-pink-40);
  color: var(--d102-pink-darktext);
}

button.d102-button--pink-secondary:hover,
.d102-button--pink-secondary > a:hover {
  background-color: var(--d102-hex-pink-40);
  border-color: var(--d102-hex-pink-80);
}

/* Blue secondary */
button.d102-button--blue-secondary,
.d102-button--blue-secondary > a {
  background-color: var(--d102-hex-blue-20);
  border-color: var(--d102-hex-blue-40);
  color: var(--d102-blue-darktext);
}

button.d102-button--blue-secondary:hover,
.d102-button--blue-secondary > a:hover {
  background-color: var(--d102-hex-blue-40);
  border-color: var(--d102-hex-blue-80);
}

/* ============================================================
   DARK MODE — ACCENT COLOUR OVERRIDES
   Blue: full navy disappears on dark bg — use 80% tint with white text.
   Pink/Green: vibrant colours hold; swap text to white/black as needed.
   Secondary variants shift to semi-transparent tinted fills.
   ============================================================ */
body[data-theme=dark] {
  /* Blue primary — lighten to 80% tint */
}
body[data-theme=dark] button.d102-button--blue,
body[data-theme=dark] .d102-button--blue > a {
  background-color: var(--d102-hex-blue-100-dm);
  border-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
body[data-theme=dark] button.d102-button--blue:hover,
body[data-theme=dark] .d102-button--blue > a:hover {
  background-color: var(--d102-hex-blue-60);
  border-color: rgba(255, 255, 255, 0.15);
}
body[data-theme=dark] {
  /* Pink primary — keep vibrant, white text */
}
body[data-theme=dark] button.d102-button--pink,
body[data-theme=dark] .d102-button--pink > a {
  background-color: var(--d102-hex-pink-100-dm);
  border-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
body[data-theme=dark] button.d102-button--pink:hover,
body[data-theme=dark] .d102-button--pink > a:hover {
  background-color: var(--d102-hex-pink-80);
  border-color: rgba(255, 255, 255, 0.15);
}
body[data-theme=dark] {
  /* Green primary — keep vibrant, black text */
}
body[data-theme=dark] button.d102-button--green,
body[data-theme=dark] .d102-button--green > a {
  background-color: var(--d102-hex-green-100-dm);
  border-color: rgba(0, 0, 0, 0.15);
  color: #000000;
}
body[data-theme=dark] button.d102-button--green:hover,
body[data-theme=dark] .d102-button--green > a:hover {
  background-color: var(--d102-hex-green-80);
  border-color: rgba(0, 0, 0, 0.2);
}
body[data-theme=dark] {
  /* Blue secondary — semi-transparent tint */
}
body[data-theme=dark] button.d102-button--blue-secondary,
body[data-theme=dark] .d102-button--blue-secondary > a {
  background-color: rgba(var(--d102-blue-rgb), 0.2);
  border-color: rgba(var(--d102-blue-rgb), 0.5);
  color: var(--d102-hex-blue-40);
}
body[data-theme=dark] button.d102-button--blue-secondary:hover,
body[data-theme=dark] .d102-button--blue-secondary > a:hover {
  background-color: rgba(var(--d102-blue-rgb), 0.35);
  border-color: rgba(var(--d102-blue-rgb), 0.7);
}
body[data-theme=dark] {
  /* Pink secondary — semi-transparent tint */
}
body[data-theme=dark] button.d102-button--pink-secondary,
body[data-theme=dark] .d102-button--pink-secondary > a {
  background-color: rgba(var(--d102-pink-rgb), 0.15);
  border-color: rgba(var(--d102-pink-rgb), 0.45);
  color: var(--d102-hex-pink-60);
}
body[data-theme=dark] button.d102-button--pink-secondary:hover,
body[data-theme=dark] .d102-button--pink-secondary > a:hover {
  background-color: rgba(var(--d102-pink-rgb), 0.3);
  border-color: rgba(var(--d102-pink-rgb), 0.6);
}
body[data-theme=dark] {
  /* Green secondary — semi-transparent tint */
}
body[data-theme=dark] button.d102-button--green-secondary,
body[data-theme=dark] .d102-button--green-secondary > a {
  background-color: rgba(var(--d102-green-rgb), 0.12);
  border-color: rgba(var(--d102-green-rgb), 0.4);
  color: var(--d102-hex-green-60);
}
body[data-theme=dark] button.d102-button--green-secondary:hover,
body[data-theme=dark] .d102-button--green-secondary > a:hover {
  background-color: rgba(var(--d102-green-rgb), 0.25);
  border-color: rgba(var(--d102-green-rgb), 0.6);
}
body[data-theme=dark] {
  /* Yellow secondary — semi-transparent tint */
}
body[data-theme=dark] button.d102-button--yellow-secondary,
body[data-theme=dark] .d102-button--yellow-secondary > a {
  background-color: rgba(var(--d102-yellow-rgb), 0.15);
  border-color: rgba(var(--d102-yellow-rgb), 0.4);
  color: var(--d102-hex-yellow-100);
}
body[data-theme=dark] button.d102-button--yellow-secondary:hover,
body[data-theme=dark] .d102-button--yellow-secondary > a:hover {
  background-color: rgba(var(--d102-yellow-rgb), 0.28);
  border-color: rgba(var(--d102-yellow-rgb), 0.6);
}

/* ============================================================
   ICON SUPPORT
   Icons use CSS mask-image so they inherit the button text colour.
   Position: --icon-right adds icon after label, --icon-left before.
   Specific icon class sets the --_btn-icon variable.
   ============================================================ */
/* Icon pseudo-element shared styles */
button.d102-button[class*="--icon-"]::after,
.d102-button[class*="--icon-"] > a::after {
  content: "";
  display: block;
  width: calc(var(--_btn-unit-m) * 0.85);
  height: calc(var(--_btn-unit-m) * 0.85);
  background-color: currentColor;
  mask-image: var(--_btn-icon, none);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--_btn-icon, none);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
  transform: rotate(var(--_btn-icon-rotate, 0deg));
}

/* Small icon */
button.d102-button--small[class*="--icon-"]::after,
.d102-button--small[class*="--icon-"] > a::after {
  width: calc(var(--_btn-unit-s) * 0.85);
  height: calc(var(--_btn-unit-s) * 0.85);
}

/* Large icon */
button.d102-button--large[class*="--icon-"]::after,
.d102-button--large[class*="--icon-"] > a::after {
  width: calc(var(--_btn-unit-l) * 0.85);
  height: calc(var(--_btn-unit-l) * 0.85);
}

/* Icon before text (flip order) */
button.d102-button[class*="--icon-left"],
.d102-button[class*="--icon-left"] > a {
  flex-direction: row-reverse;
}

/* Icon definitions
 * ─────────────────────────────────────────────────────────────────────────────
 * Custom icons:     assets/icons/custom/custom-{name}.svg
 * Material Symbols: assets/icons/material-symbols-light/material-symbols-light-{name}.svg
 *
 * To add a new icon: drop the file in the relevant folder, add the name to
 * the appropriate list below, and recompile.
 *
 * Directional icons generate four classes ({name}-right, -down, -left, -up)
 * from a single SVG file via CSS rotation (0 / 90 / 180 / 270deg).
 * ─────────────────────────────────────────────────────────────────────────────
 */
/* Custom icons */
.d102-button--icon-close {
  --_btn-icon: url("assets/icons/custom/custom-close.svg");
}

.d102-button--icon-calendar-add {
  --_btn-icon: url("assets/icons/custom/custom-calendar-add.svg");
}

.d102-button--icon-document {
  --_btn-icon: url("assets/icons/custom/custom-document.svg");
}

.d102-button--icon-download {
  --_btn-icon: url("assets/icons/custom/custom-download.svg");
}

.d102-button--icon-edit {
  --_btn-icon: url("assets/icons/custom/custom-edit.svg");
}

.d102-button--icon-email {
  --_btn-icon: url("assets/icons/custom/custom-email.svg");
}

.d102-button--icon-external {
  --_btn-icon: url("assets/icons/custom/custom-external.svg");
}

.d102-button--icon-google {
  --_btn-icon: url("assets/icons/custom/custom-google.svg");
}

.d102-button--icon-instagram {
  --_btn-icon: url("assets/icons/custom/custom-instagram.svg");
}

.d102-button--icon-linkedin {
  --_btn-icon: url("assets/icons/custom/custom-linkedin.svg");
}

.d102-button--icon-ms-teams {
  --_btn-icon: url("assets/icons/custom/custom-ms-teams.svg");
}

.d102-button--icon-phone {
  --_btn-icon: url("assets/icons/custom/custom-phone.svg");
}

.d102-button--icon-print {
  --_btn-icon: url("assets/icons/custom/custom-print.svg");
}

.d102-button--icon-search {
  --_btn-icon: url("assets/icons/custom/custom-search.svg");
}

.d102-button--icon-x {
  --_btn-icon: url("assets/icons/custom/custom-x.svg");
}

.d102-button--icon-youtube {
  --_btn-icon: url("assets/icons/custom/custom-youtube.svg");
}

/* Material Symbols icons */
.d102-button--icon-add-circle-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-add-circle-outline.svg");
}

.d102-button--icon-add-to-drive-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-add-to-drive-outline.svg");
}

.d102-button--icon-calendar-today-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-calendar-today-outline.svg");
}

.d102-button--icon-cancel-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-cancel-outline.svg");
}

.d102-button--icon-check-box-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-check-box-outline.svg");
}

.d102-button--icon-check-circle-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-check-circle-outline.svg");
}

.d102-button--icon-closed-caption-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-closed-caption-outline.svg");
}

.d102-button--icon-cloud-download-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-cloud-download-outline.svg");
}

.d102-button--icon-deployed-code-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-deployed-code-outline.svg");
}

.d102-button--icon-deployed-code-update-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-deployed-code-update-outline.svg");
}

.d102-button--icon-download-2-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-download-2-outline.svg");
}

.d102-button--icon-download-for-offline-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-download-for-offline-outline.svg");
}

.d102-button--icon-drive-export-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-drive-export-outline.svg");
}

.d102-button--icon-edit-calendar-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-edit-calendar-outline.svg");
}

.d102-button--icon-edit-document-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-edit-document-outline.svg");
}

.d102-button--icon-edit-square-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-edit-square-outline.svg");
}

.d102-button--icon-export-notes-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-export-notes-outline.svg");
}

.d102-button--icon-favorite-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-favorite-outline.svg");
}

.d102-button--icon-feature-search-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-feature-search-outline.svg");
}

.d102-button--icon-file-export-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-file-export-outline.svg");
}

.d102-button--icon-mail-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-mail-outline.svg");
}

.d102-button--icon-mark-email-read-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-mark-email-read-outline.svg");
}

.d102-button--icon-pause-circle-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-pause-circle-outline.svg");
}

.d102-button--icon-pause-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-pause-outline.svg");
}

.d102-button--icon-person-edit-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-person-edit-outline.svg");
}

.d102-button--icon-person-search-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-person-search-outline.svg");
}

.d102-button--icon-phone-enabled-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-phone-enabled-outline.svg");
}

.d102-button--icon-play-arrow-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-play-arrow-outline.svg");
}

.d102-button--icon-play-circle-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-play-circle-outline.svg");
}

.d102-button--icon-save-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-save-outline.svg");
}

.d102-button--icon-search-check-2-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-search-check-2-outline.svg");
}

.d102-button--icon-send-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-send-outline.svg");
}

.d102-button--icon-stacked-email-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-stacked-email-outline.svg");
}

.d102-button--icon-star-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-star-outline.svg");
}

.d102-button--icon-sync-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-sync-outline.svg");
}

.d102-button--icon-upload-2-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-upload-2-outline.svg");
}

.d102-button--icon-upload-file-outline {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-upload-file-outline.svg");
}

/* Directional icons — one SVG, four rotation classes */
.d102-button--icon-arrow-circle-right-outline-right {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_btn-icon-rotate: 0deg;
}

.d102-button--icon-arrow-circle-right-outline-down {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_btn-icon-rotate: 90deg;
}

.d102-button--icon-arrow-circle-right-outline-left {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_btn-icon-rotate: 180deg;
}

.d102-button--icon-arrow-circle-right-outline-up {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_btn-icon-rotate: 270deg;
}

.d102-button--icon-arrow-forward-right {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_btn-icon-rotate: 0deg;
}

.d102-button--icon-arrow-forward-down {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_btn-icon-rotate: 90deg;
}

.d102-button--icon-arrow-forward-left {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_btn-icon-rotate: 180deg;
}

.d102-button--icon-arrow-forward-up {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_btn-icon-rotate: 270deg;
}

.d102-button--icon-arrow-right-alt-right {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_btn-icon-rotate: 0deg;
}

.d102-button--icon-arrow-right-alt-down {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_btn-icon-rotate: 90deg;
}

.d102-button--icon-arrow-right-alt-left {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_btn-icon-rotate: 180deg;
}

.d102-button--icon-arrow-right-alt-up {
  --_btn-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_btn-icon-rotate: 270deg;
}

/* chevron-right classes kept for backwards compatibility — they now render the custom arrow-head icon */
.d102-button--icon-chevron-right-right {
  --_btn-icon: url("assets/icons/custom/arrow_head.svg");
  --_btn-icon-rotate: 0deg;
}

.d102-button--icon-chevron-right-down {
  --_btn-icon: url("assets/icons/custom/arrow_head.svg");
  --_btn-icon-rotate: 90deg;
}

.d102-button--icon-chevron-right-left {
  --_btn-icon: url("assets/icons/custom/arrow_head.svg");
  --_btn-icon-rotate: 180deg;
}

.d102-button--icon-chevron-right-up {
  --_btn-icon: url("assets/icons/custom/arrow_head.svg");
  --_btn-icon-rotate: 270deg;
}

.d102-button--icon-copy {
  --_btn-icon: url("./assets/icons/custom/copy.svg");
}

/* New material icons (non-standard filenames) */
.d102-button--icon-group-add {
  --_btn-icon: url("assets/icons/material-symbols-light/MaterialSymbolsLightGroupAddOutlineRounded.svg");
}

/* D102 Design System — Icon Utility */
/* ============================================================
   BASE ICON
   Apply d102-icon--{name} to any element to render an icon.

   <div class="d102-icon--copy"></div>
   <span class="d102-icon--arrow-forward-right d102-icon--yellow d102-icon--l"></span>
   ============================================================ */
[class*=d102-icon--] {
  display: inline-block;
  width: 2em;
  height: 2em;
  background-color: var(--d102-text);
  mask-image: var(--_icon, none);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--_icon, none);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
  transform: rotate(var(--_icon-rotate, 0deg));
}

/* ============================================================
   COLOUR MODIFIERS
   ============================================================ */
.d102-icon--yellow {
  background-color: var(--d102-yellow);
}

.d102-icon--black {
  background-color: var(--d102-black);
}

.d102-icon--white {
  background-color: var(--d102-white);
}

/* ============================================================
   SIZE MODIFIERS
   ============================================================ */
.d102-icon--xs {
  width: 1em;
  height: 1em;
}

.d102-icon--s {
  width: 1.5em;
  height: 1.5em;
}

.d102-icon--l {
  width: 3em;
  height: 3em;
}

.d102-icon--xl {
  width: 4em;
  height: 4em;
}

/* ============================================================
   DISPLAY MODIFIERS
   ============================================================ */
.d102-icon--block {
  display: block;
}

.d102-icon--inline {
  display: inline-block;
}

/* ============================================================
   CUSTOM ICON DEFINITIONS
   Files: assets/icons/custom/
   ============================================================ */
/* Standalone custom icons (no custom- prefix in filename) */
.d102-icon--copy {
  --_icon: url("assets/icons/custom/copy.svg");
}

.d102-icon--arrow-full {
  --_icon: url("assets/icons/custom/arrow_full.svg");
}

.d102-icon--arrow-head {
  --_icon: url("assets/icons/custom/arrow_head.svg");
}

.d102-icon--dark-mode {
  --_icon: url("assets/icons/custom/dark_mode.svg");
}

.d102-icon--light-mode {
  --_icon: url("assets/icons/custom/light_mode.svg");
}

/* Prefixed custom icons */
.d102-icon--accessibility {
  --_icon: url("assets/icons/custom/custom-accessibility.svg");
}

.d102-icon--calendar-add {
  --_icon: url("assets/icons/custom/custom-calendar-add.svg");
}

.d102-icon--close {
  --_icon: url("assets/icons/custom/custom-close.svg");
}

.d102-icon--document {
  --_icon: url("assets/icons/custom/custom-document.svg");
}

.d102-icon--download {
  --_icon: url("assets/icons/custom/custom-download.svg");
}

.d102-icon--edit {
  --_icon: url("assets/icons/custom/custom-edit.svg");
}

.d102-icon--email {
  --_icon: url("assets/icons/custom/custom-email.svg");
}

.d102-icon--external {
  --_icon: url("assets/icons/custom/custom-external.svg");
}

.d102-icon--google {
  --_icon: url("assets/icons/custom/custom-google.svg");
}

.d102-icon--instagram {
  --_icon: url("assets/icons/custom/custom-instagram.svg");
}

.d102-icon--linkedin {
  --_icon: url("assets/icons/custom/custom-linkedin.svg");
}

.d102-icon--ms-teams {
  --_icon: url("assets/icons/custom/custom-ms-teams.svg");
}

.d102-icon--phone {
  --_icon: url("assets/icons/custom/custom-phone.svg");
}

.d102-icon--search {
  --_icon: url("assets/icons/custom/custom-search.svg");
}

.d102-icon--x {
  --_icon: url("assets/icons/custom/custom-x.svg");
}

.d102-icon--youtube {
  --_icon: url("assets/icons/custom/custom-youtube.svg");
}

/* ============================================================
   MATERIAL SYMBOLS ICON DEFINITIONS
   Files: assets/icons/material-symbols-light/
   ============================================================ */
.d102-icon--add-circle-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-add-circle-outline.svg");
}

.d102-icon--add-to-drive-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-add-to-drive-outline.svg");
}

.d102-icon--calendar-today-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-calendar-today-outline.svg");
}

.d102-icon--cancel-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-cancel-outline.svg");
}

.d102-icon--check-box-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-check-box-outline.svg");
}

.d102-icon--check-circle-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-check-circle-outline.svg");
}

.d102-icon--closed-caption-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-closed-caption-outline.svg");
}

.d102-icon--cloud-download-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-cloud-download-outline.svg");
}

.d102-icon--deployed-code-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-deployed-code-outline.svg");
}

.d102-icon--deployed-code-update-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-deployed-code-update-outline.svg");
}

.d102-icon--download-2-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-download-2-outline.svg");
}

.d102-icon--download-for-offline-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-download-for-offline-outline.svg");
}

.d102-icon--drive-export-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-drive-export-outline.svg");
}

.d102-icon--edit-calendar-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-edit-calendar-outline.svg");
}

.d102-icon--edit-document-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-edit-document-outline.svg");
}

.d102-icon--edit-square-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-edit-square-outline.svg");
}

.d102-icon--export-notes-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-export-notes-outline.svg");
}

.d102-icon--favorite-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-favorite-outline.svg");
}

.d102-icon--feature-search-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-feature-search-outline.svg");
}

.d102-icon--file-export-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-file-export-outline.svg");
}

.d102-icon--mail-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-mail-outline.svg");
}

.d102-icon--mark-email-read-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-mark-email-read-outline.svg");
}

.d102-icon--pause-circle-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-pause-circle-outline.svg");
}

.d102-icon--pause-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-pause-outline.svg");
}

.d102-icon--person-edit-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-person-edit-outline.svg");
}

.d102-icon--person-search-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-person-search-outline.svg");
}

.d102-icon--phone-enabled-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-phone-enabled-outline.svg");
}

.d102-icon--play-arrow-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-play-arrow-outline.svg");
}

.d102-icon--play-circle-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-play-circle-outline.svg");
}

.d102-icon--save-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-save-outline.svg");
}

.d102-icon--search-check-2-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-search-check-2-outline.svg");
}

.d102-icon--send-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-send-outline.svg");
}

.d102-icon--stacked-email-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-stacked-email-outline.svg");
}

.d102-icon--star-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-star-outline.svg");
}

.d102-icon--sync-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-sync-outline.svg");
}

.d102-icon--upload-2-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-upload-2-outline.svg");
}

.d102-icon--upload-file-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-upload-file-outline.svg");
}

/* New material icons (non-standard filenames) */
.d102-icon--print {
  --_icon: url("assets/icons/material-symbols-light/MaterialSymbolsLightPrintOutlineRounded.svg");
}

.d102-icon--settings {
  --_icon: url("assets/icons/material-symbols-light/MaterialSymbolsLightSettingsOutlineRounded.svg");
}

.d102-icon--group-add {
  --_icon: url("assets/icons/material-symbols-light/MaterialSymbolsLightGroupAddOutlineRounded.svg");
}

/* ============================================================
   DIRECTIONAL VARIANTS
   One SVG, four rotation classes: -right -down -left -up
   ============================================================ */
/* Material symbols directional icons */
.d102-icon--arrow-circle-right-outline {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
}

.d102-icon--arrow-circle-right-outline-right {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_icon-rotate: 0deg;
}

.d102-icon--arrow-circle-right-outline-down {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_icon-rotate: 90deg;
}

.d102-icon--arrow-circle-right-outline-left {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_icon-rotate: 180deg;
}

.d102-icon--arrow-circle-right-outline-up {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_icon-rotate: 270deg;
}

.d102-icon--arrow-forward {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
}

.d102-icon--arrow-forward-right {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_icon-rotate: 0deg;
}

.d102-icon--arrow-forward-down {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_icon-rotate: 90deg;
}

.d102-icon--arrow-forward-left {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_icon-rotate: 180deg;
}

.d102-icon--arrow-forward-up {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_icon-rotate: 270deg;
}

.d102-icon--arrow-right-alt {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
}

.d102-icon--arrow-right-alt-right {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_icon-rotate: 0deg;
}

.d102-icon--arrow-right-alt-down {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_icon-rotate: 90deg;
}

.d102-icon--arrow-right-alt-left {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_icon-rotate: 180deg;
}

.d102-icon--arrow-right-alt-up {
  --_icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_icon-rotate: 270deg;
}

/* Custom directional icons */
/* chevron-right classes kept for backwards compatibility — they now render the custom arrow-head icon */
.d102-icon--chevron-right {
  --_icon: url("assets/icons/custom/arrow_head.svg");
}

.d102-icon--arrow-full-right {
  --_icon: url("assets/icons/custom/arrow_full.svg");
  --_icon-rotate: 0deg;
}

.d102-icon--arrow-head-right {
  --_icon: url("assets/icons/custom/arrow_head.svg");
  --_icon-rotate: 0deg;
}

.d102-icon--chevron-right-right {
  --_icon: url("assets/icons/custom/arrow_head.svg");
  --_icon-rotate: 0deg;
}

.d102-icon--arrow-full-down {
  --_icon: url("assets/icons/custom/arrow_full.svg");
  --_icon-rotate: 90deg;
}

.d102-icon--arrow-head-down {
  --_icon: url("assets/icons/custom/arrow_head.svg");
  --_icon-rotate: 90deg;
}

.d102-icon--chevron-right-down {
  --_icon: url("assets/icons/custom/arrow_head.svg");
  --_icon-rotate: 90deg;
}

.d102-icon--arrow-full-left {
  --_icon: url("assets/icons/custom/arrow_full.svg");
  --_icon-rotate: 180deg;
}

.d102-icon--arrow-head-left {
  --_icon: url("assets/icons/custom/arrow_head.svg");
  --_icon-rotate: 180deg;
}

.d102-icon--chevron-right-left {
  --_icon: url("assets/icons/custom/arrow_head.svg");
  --_icon-rotate: 180deg;
}

.d102-icon--arrow-full-up {
  --_icon: url("assets/icons/custom/arrow_full.svg");
  --_icon-rotate: 270deg;
}

.d102-icon--arrow-head-up {
  --_icon: url("assets/icons/custom/arrow_head.svg");
  --_icon-rotate: 270deg;
}

.d102-icon--chevron-right-up {
  --_icon: url("assets/icons/custom/arrow_head.svg");
  --_icon-rotate: 270deg;
}

/* D102 Design System — Links with Icons */
/* ============================================================
   LINK WITH ICON
   Apply d102-link--icon-{name} directly to the <a> element.
   Icon renders after label by default.
   Add d102-link--icon-left to place icon before label.

   <a class="d102-link--icon-external" href="#">Visit site</a>
   <a class="d102-link--icon-arrow-forward-right d102-link--icon-left" href="#">Back</a>
   ============================================================ */
a[class*=d102-link--icon-] {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

/* Icon pseudo-element */
a[class*=d102-link--icon-]::after {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: var(--_link-icon, none);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--_link-icon, none);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transform: rotate(var(--_link-icon-rotate, 0deg));
}

/* Icon before label */
a.d102-link--icon-left {
  flex-direction: row-reverse;
}

/* ============================================================
   ICON DEFINITIONS
   Custom icons:     assets/icons/custom/custom-{name}.svg
   Material Symbols: assets/icons/material-symbols-light/material-symbols-light-{name}.svg
   ============================================================ */
/* Custom icons */
a.d102-link--icon-close {
  --_link-icon: url("assets/icons/custom/custom-close.svg");
}

a.d102-link--icon-calendar-add {
  --_link-icon: url("assets/icons/custom/custom-calendar-add.svg");
}

a.d102-link--icon-document {
  --_link-icon: url("assets/icons/custom/custom-document.svg");
}

a.d102-link--icon-download {
  --_link-icon: url("assets/icons/custom/custom-download.svg");
}

a.d102-link--icon-edit {
  --_link-icon: url("assets/icons/custom/custom-edit.svg");
}

a.d102-link--icon-email {
  --_link-icon: url("assets/icons/custom/custom-email.svg");
}

a.d102-link--icon-external {
  --_link-icon: url("assets/icons/custom/custom-external.svg");
}

a.d102-link--icon-google {
  --_link-icon: url("assets/icons/custom/custom-google.svg");
}

a.d102-link--icon-instagram {
  --_link-icon: url("assets/icons/custom/custom-instagram.svg");
}

a.d102-link--icon-linkedin {
  --_link-icon: url("assets/icons/custom/custom-linkedin.svg");
}

a.d102-link--icon-ms-teams {
  --_link-icon: url("assets/icons/custom/custom-ms-teams.svg");
}

a.d102-link--icon-phone {
  --_link-icon: url("assets/icons/custom/custom-phone.svg");
}

a.d102-link--icon-print {
  --_link-icon: url("assets/icons/custom/custom-print.svg");
}

a.d102-link--icon-search {
  --_link-icon: url("assets/icons/custom/custom-search.svg");
}

a.d102-link--icon-x {
  --_link-icon: url("assets/icons/custom/custom-x.svg");
}

a.d102-link--icon-youtube {
  --_link-icon: url("assets/icons/custom/custom-youtube.svg");
}

/* Material Symbols icons */
a.d102-link--icon-add-circle-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-add-circle-outline.svg");
}

a.d102-link--icon-add-to-drive-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-add-to-drive-outline.svg");
}

a.d102-link--icon-calendar-today-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-calendar-today-outline.svg");
}

a.d102-link--icon-cancel-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-cancel-outline.svg");
}

a.d102-link--icon-check-box-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-check-box-outline.svg");
}

a.d102-link--icon-check-circle-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-check-circle-outline.svg");
}

a.d102-link--icon-closed-caption-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-closed-caption-outline.svg");
}

a.d102-link--icon-cloud-download-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-cloud-download-outline.svg");
}

a.d102-link--icon-deployed-code-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-deployed-code-outline.svg");
}

a.d102-link--icon-deployed-code-update-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-deployed-code-update-outline.svg");
}

a.d102-link--icon-download-2-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-download-2-outline.svg");
}

a.d102-link--icon-download-for-offline-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-download-for-offline-outline.svg");
}

a.d102-link--icon-drive-export-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-drive-export-outline.svg");
}

a.d102-link--icon-edit-calendar-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-edit-calendar-outline.svg");
}

a.d102-link--icon-edit-document-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-edit-document-outline.svg");
}

a.d102-link--icon-edit-square-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-edit-square-outline.svg");
}

a.d102-link--icon-export-notes-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-export-notes-outline.svg");
}

a.d102-link--icon-favorite-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-favorite-outline.svg");
}

a.d102-link--icon-feature-search-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-feature-search-outline.svg");
}

a.d102-link--icon-file-export-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-file-export-outline.svg");
}

a.d102-link--icon-mail-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-mail-outline.svg");
}

a.d102-link--icon-mark-email-read-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-mark-email-read-outline.svg");
}

a.d102-link--icon-pause-circle-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-pause-circle-outline.svg");
}

a.d102-link--icon-pause-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-pause-outline.svg");
}

a.d102-link--icon-person-edit-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-person-edit-outline.svg");
}

a.d102-link--icon-person-search-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-person-search-outline.svg");
}

a.d102-link--icon-phone-enabled-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-phone-enabled-outline.svg");
}

a.d102-link--icon-play-arrow-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-play-arrow-outline.svg");
}

a.d102-link--icon-play-circle-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-play-circle-outline.svg");
}

a.d102-link--icon-save-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-save-outline.svg");
}

a.d102-link--icon-search-check-2-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-search-check-2-outline.svg");
}

a.d102-link--icon-send-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-send-outline.svg");
}

a.d102-link--icon-stacked-email-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-stacked-email-outline.svg");
}

a.d102-link--icon-star-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-star-outline.svg");
}

a.d102-link--icon-sync-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-sync-outline.svg");
}

a.d102-link--icon-upload-2-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-upload-2-outline.svg");
}

a.d102-link--icon-upload-file-outline {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-upload-file-outline.svg");
}

/* Directional icons — one SVG, four rotation classes */
a.d102-link--icon-arrow-circle-right-outline-right {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_link-icon-rotate: 0deg;
}

a.d102-link--icon-arrow-circle-right-outline-down {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_link-icon-rotate: 90deg;
}

a.d102-link--icon-arrow-circle-right-outline-left {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_link-icon-rotate: 180deg;
}

a.d102-link--icon-arrow-circle-right-outline-up {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-circle-right-outline.svg");
  --_link-icon-rotate: 270deg;
}

a.d102-link--icon-arrow-forward-right {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_link-icon-rotate: 0deg;
}

a.d102-link--icon-arrow-forward-down {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_link-icon-rotate: 90deg;
}

a.d102-link--icon-arrow-forward-left {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_link-icon-rotate: 180deg;
}

a.d102-link--icon-arrow-forward-up {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-forward.svg");
  --_link-icon-rotate: 270deg;
}

a.d102-link--icon-arrow-right-alt-right {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_link-icon-rotate: 0deg;
}

a.d102-link--icon-arrow-right-alt-down {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_link-icon-rotate: 90deg;
}

a.d102-link--icon-arrow-right-alt-left {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_link-icon-rotate: 180deg;
}

a.d102-link--icon-arrow-right-alt-up {
  --_link-icon: url("assets/icons/material-symbols-light/material-symbols-light-arrow-right-alt.svg");
  --_link-icon-rotate: 270deg;
}

/* chevron-right classes kept for backwards compatibility — they now render the custom arrow-head icon */
a.d102-link--icon-chevron-right-right {
  --_link-icon: url("assets/icons/custom/arrow_head.svg");
  --_link-icon-rotate: 0deg;
}

a.d102-link--icon-chevron-right-down {
  --_link-icon: url("assets/icons/custom/arrow_head.svg");
  --_link-icon-rotate: 90deg;
}

a.d102-link--icon-chevron-right-left {
  --_link-icon: url("assets/icons/custom/arrow_head.svg");
  --_link-icon-rotate: 180deg;
}

a.d102-link--icon-chevron-right-up {
  --_link-icon: url("assets/icons/custom/arrow_head.svg");
  --_link-icon-rotate: 270deg;
}

/* D102 Design System — Copy Field */
/* ============================================================
   COPY FIELD STRUCTURE
   A read-only text display with an inline copy-to-clipboard button.

   Usage:
   <div class="d102-copy-field" data-copy-text="Text to copy">
     <span class="d102-copy-field__display">Text to display</span>
     <button type="button" class="d102-copy-field__button" aria-label="Copy text">
       <span class="d102-copy-field__icon" aria-hidden="true"></span>
     </button>
   </div>
   ============================================================ */
.d102-copy-field {
  display: flex;
  align-items: center;
  background-color: var(--d102-bg);
  border: 1px solid var(--d102-border);
  border-radius: 0.1875rem;
  padding: 1rem;
  gap: 0.5rem;
  /* Internal size tokens — scoped so they don't leak */
  --_copy-field-font-size: 0.875rem; /* 14px */
  --_copy-field-icon-size: 1rem; /* 16px */
}

/* The visible text/content span */
.d102-copy-field__display {
  flex: 1;
  font-size: var(--_copy-field-font-size);
  font-weight: 300;
  color: var(--d102-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* The copy button inside the field */
.d102-copy-field__button {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d102-text-muted);
  border-radius: 0.125rem;
  transition: background-color 100ms, color 100ms;
  min-width: 1.5rem;
  min-height: 1.5rem;
}

.d102-copy-field__button:hover {
  background-color: var(--d102-hex-black-20);
  color: var(--d102-text);
}

/* Focus state — consistent with D102 design system */
.d102-copy-field__button:focus-visible {
  outline: 3px solid transparent;
  background-color: var(--d102-focus, #FDE70A);
  border-color: var(--d102-focus-shadow, #000000);
  box-shadow: 0 0 0 3px var(--d102-focus-shadow, #000000);
  color: var(--d102-focus-text, #000000);
}

/* Copied state styling - shows text instead of icon */
.d102-copy-field__button--copied {
  background-color: var(--d102-hex-black-100);
  color: var(--d102-white);
}

/* Hide icon when in copied state */
.d102-copy-field__button--copied .d102-copy-field__icon {
  display: none;
}

/* ============================================================
   COPY ICON
   Using CSS mask for icon that inherits button text color
   ============================================================ */
.d102-copy-field__icon {
  display: inline-block;
  width: var(--_copy-field-icon-size);
  height: var(--_copy-field-icon-size);
  background-color: currentColor;
  mask-image: url("./assets/icons/custom/copy.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("./assets/icons/custom/copy.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ============================================================
   SIZE MODIFIERS
   ============================================================ */
/* Small */
.d102-copy-field--small {
  padding: 0.75rem;
  gap: 0.375rem;
  --_copy-field-font-size: 0.8125rem; /* 13px */
  --_copy-field-icon-size: 0.875rem; /* 14px */
}

/* Large */
.d102-copy-field--large {
  padding: 1.25rem;
  gap: 0.625rem;
  --_copy-field-font-size: 1rem; /* 16px */
  --_copy-field-icon-size: 1.125rem; /* 18px */
}

/* ============================================================
   RESPONSIVE BEHAVIOR
   On mobile, reduce font size slightly for better fit
   ============================================================ */
@media (max-width: 480px) {
  .d102-copy-field {
    --_copy-field-font-size: 0.8125rem; /* 13px */
    --_copy-field-icon-size: 0.875rem; /* 14px */
  }
  .d102-copy-field--large {
    --_copy-field-font-size: 0.875rem; /* 14px */
    --_copy-field-icon-size: 1rem; /* 16px */
  }
}
/* ============================================================
   DARK / LIGHT MODE TOGGLE
   ============================================================ */
#d102-dark-light-mode-toggle {
  /* Reset browser button defaults */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 0.1875rem;
  /* Square touch target — minimum 44×44px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  /* Icon colour inherits body text colour (dark in light mode, light in dark mode) */
  color: inherit;
  transition: color 100ms;
  /* Hide visible text — screen readers use aria-label instead */
  font-size: 0;
  /* Light mode default: show dark icon (action = switch to dark) */
  --_toggle-icon: url("assets/icons/light-dark-modes/dark-outline.svg");
}
#d102-dark-light-mode-toggle::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: var(--_toggle-icon);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--_toggle-icon);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
}
#d102-dark-light-mode-toggle {
  /* Fill icon on hover */
}
#d102-dark-light-mode-toggle:hover {
  --_toggle-icon: url("assets/icons/light-dark-modes/dark-fill.svg");
}
#d102-dark-light-mode-toggle {
  /* Focus — matches _button.scss */
}
#d102-dark-light-mode-toggle:focus-visible {
  outline: 3px solid var(--d102-focus);
  outline-offset: 3px;
  border-color: var(--d102-focus-shadow, #000000);
  box-shadow: 0 0 0 3px var(--d102-focus-shadow, #000000);
}

/* Dark mode: show light icon (action = switch to light) */
body[data-theme=dark] #d102-dark-light-mode-toggle {
  --_toggle-icon: url("assets/icons/light-dark-modes/light-outline.svg");
}
body[data-theme=dark] #d102-dark-light-mode-toggle:hover {
  --_toggle-icon: url("assets/icons/light-dark-modes/light-fill.svg");
}

/*
HTML structure:

    <div class="d102-dark-light-mode-switch">
        <div class="d102-dark-light-mode-switch__icon d102-dark-light-mode-switch__icon--sun"></div>
        <button id="d102-dark-light-mode-switch" type="button" role="switch" aria-checked="false"
                aria-label="Dark mode" class="d102-dark-light-mode-switch__toggle">
            <span class="d102-dark-light-mode-switch__thumb" aria-hidden="true"></span>
        </button>
         <div class="d102-dark-light-mode-switch__icon d102-dark-light-mode-switch__icon--moon"></div>
        <span class="d102-dark-light-mode-switch__label" aria-hidden="true">Light mode on</span>
    </div>


*/
/* ============================================================
   DARK / LIGHT MODE SWITCH (slider / toggle-switch variant)
   ============================================================ */
.d102-dark-light-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.d102-dark-light-mode-switch__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.4;
  transition: opacity 150ms;
  background-color: var(--d102-text);
  mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}

/* Sun active by default (light mode) */
.d102-dark-light-mode-switch__icon--sun {
  --icon: url('assets/icons/light-dark-modes/light-outline.svg');
  opacity: 1;
}

.d102-dark-light-mode-switch__icon--moon {
  --icon: url('assets/icons/light-dark-modes/dark-outline.svg');
}

.d102-dark-light-mode-switch__toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  padding: 0;
  cursor: pointer;
  /* Track: 48 × 24 px pill */
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: var(--d102-surface-2);
  transition: background-color 200ms;
  border: 1px solid var(--d102-border);
  box-sizing: content-box;
}
.d102-dark-light-mode-switch__toggle:focus-visible {
  outline: 3px solid var(--d102-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--d102-focus-shadow, #000000);
}

/* Sliding thumb: 20 × 20 px, 2 px inset from each edge */
.d102-dark-light-mode-switch__thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--d102-text-muted);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.d102-dark-light-mode-switch__label {
  font-size: 1rem;
  color: inherit;
  white-space: nowrap;
}

/* --- Dark mode: thumb slides right, moon icon activates --- */
/* translateX: track(48px) – thumb(20px) – right-gap(2px) – start(2px) = 24px = 1.5rem */
body[data-theme=dark] .d102-dark-light-mode-switch__icon--sun {
  opacity: 0.4;
}
body[data-theme=dark] .d102-dark-light-mode-switch__icon--moon {
  opacity: 1;
}
body[data-theme=dark] .d102-dark-light-mode-switch__toggle {
  background-color: var(--d102-hex-yellow-100);
}
body[data-theme=dark] .d102-dark-light-mode-switch__thumb {
  transform: translateX(1.5rem);
  background-color: var(--d102-hex-black-100);
}

/*
HTML structure:

    <div class="d102-reduced-motion-switch">
        <svg class="d102-reduced-motion-switch__icon d102-reduced-motion-switch__icon--play" aria-hidden="true">...</svg>
        <button id="d102-reduced-motion-switch" type="button" role="switch" aria-checked="false"
                aria-label="Reduce motion" class="d102-reduced-motion-switch__toggle">
            <span class="d102-reduced-motion-switch__thumb" aria-hidden="true"></span>
        </button>
        <svg class="d102-reduced-motion-switch__icon d102-reduced-motion-switch__icon--pause" aria-hidden="true">...</svg>
        <span class="d102-reduced-motion-switch__label" aria-hidden="true">Animations on</span>
    </div>

*/
/* ============================================================
   REDUCED MOTION SWITCH (slider / toggle-switch variant)
   ============================================================ */
.d102-reduced-motion-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.d102-reduced-motion-switch__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 150ms;
  background-color: var(--d102-text);
  mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}

/* Play active by default (full motion) */
.d102-reduced-motion-switch__icon--play {
  --icon: url('assets/icons/reduced-motion/play-outline.svg');
  opacity: 1;
}

.d102-reduced-motion-switch__icon--pause {
  --icon: url('assets/icons/reduced-motion/pause-outline.svg');
}

.d102-reduced-motion-switch__toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  padding: 0;
  cursor: pointer;
  /* Track: 48 × 24 px pill */
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: var(--d102-surface-2);
  transition: background-color 200ms;
  border: 1px solid var(--d102-border);
  box-sizing: content-box;
}
.d102-reduced-motion-switch__toggle:focus-visible {
  outline: 3px solid var(--d102-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--d102-focus-shadow, #000000);
}

/* Sliding thumb: 20 × 20 px, 2 px inset from each edge */
.d102-reduced-motion-switch__thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--d102-text-muted);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.d102-reduced-motion-switch__label {
  font-size: 1rem;
  color: inherit;
  white-space: nowrap;
}

/* --- Reduced motion: thumb slides right, pause icon activates --- */
/* translateX: track(48px) – thumb(20px) – right-gap(2px) – start(2px) = 24px = 1.5rem */
body[data-motion=reduced] .d102-reduced-motion-switch__icon--play {
  opacity: 0.4;
}
body[data-motion=reduced] .d102-reduced-motion-switch__icon--pause {
  opacity: 1;
}
body[data-motion=reduced] .d102-reduced-motion-switch__toggle {
  background-color: var(--d102-hex-yellow-100);
}
body[data-motion=reduced] .d102-reduced-motion-switch__thumb {
  transform: translateX(1.5rem);
  background-color: var(--d102-hex-black-100);
}

/* ============================================================
   GLOBAL MOTION DISABLE
   Applied when data-motion="reduced" is set on <body>.
   Uses 0.001ms rather than 0 to avoid suppressing
   transitionend/animationend events in some browsers.
   ============================================================ */
body[data-motion=reduced] *,
body[data-motion=reduced] *::before,
body[data-motion=reduced] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0ms !important;
}

/* D102 Design System — Tags */
/* ============================================================
   TAG STRUCTURE
   <span class="d102-tag d102-tag--yellow">Label</span>

   Colour defaults to yellow if no colour modifier is applied.
   ============================================================ */
.d102-tag {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.25em 0.45em 0.15em;
  line-height: 1.2;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: var(--d102-fw-bold, 700);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  /* Default colour: yellow */
  background-color: var(--d102-hex-yellow-20);
  border-color: var(--d102-hex-yellow-40);
  color: var(--d102-yellow-darktext);
}

/* ============================================================
   SIZE MODIFIERS
   ============================================================ */
.d102-tag--small {
  font-size: 0.75rem;
}

.d102-tag--large {
  font-size: 1rem;
}

.d102-tag--xl {
  font-size: 1.125rem;
}

/* ============================================================
   COLOUR VARIANTS
   ============================================================ */
/* Yellow (explicit, same as default) */
.d102-tag--yellow {
  background-color: var(--d102-hex-yellow-20);
  border-color: var(--d102-hex-yellow-40);
  color: var(--d102-yellow-darktext);
}

/* Grey */
.d102-tag--grey {
  background-color: var(--d102-hex-grey-20);
  border-color: var(--d102-hex-grey-40);
  color: var(--d102-grey-darktext);
}

/* Green */
.d102-tag--green {
  background-color: var(--d102-hex-green-20);
  border-color: var(--d102-hex-green-40);
  color: var(--d102-green-darktext);
}

/* Pink */
.d102-tag--pink {
  background-color: var(--d102-hex-pink-20);
  border-color: var(--d102-hex-pink-40);
  color: var(--d102-pink-darktext);
}

/* Blue */
.d102-tag--blue {
  background-color: var(--d102-hex-blue-20);
  border-color: var(--d102-hex-blue-40);
  color: var(--d102-blue-darktext);
}

/* ============================================================
   DARK MODE
   ============================================================ */
body[data-theme=dark] .d102-tag,
body[data-theme=dark] .d102-tag--yellow {
  background-color: rgba(var(--d102-yellow-rgb), 0.15);
  border-color: rgba(var(--d102-yellow-rgb), 0.4);
  color: var(--d102-hex-yellow-100);
}
body[data-theme=dark] .d102-tag--grey {
  background-color: rgba(var(--d102-grey-rgb), 0.2);
  border-color: rgba(var(--d102-grey-rgb), 0.45);
  color: var(--d102-hex-black-30);
}
body[data-theme=dark] .d102-tag--green {
  background-color: rgba(var(--d102-green-rgb), 0.15);
  border-color: rgba(var(--d102-green-rgb), 0.4);
  color: var(--d102-hex-green-100);
}
body[data-theme=dark] .d102-tag--pink {
  background-color: rgba(var(--d102-pink-rgb), 0.15);
  border-color: rgba(var(--d102-pink-rgb), 0.4);
  color: var(--d102-hex-pink-80);
}
body[data-theme=dark] .d102-tag--blue {
  background-color: rgba(var(--d102-blue-rgb), 0.18);
  border-color: rgba(var(--d102-blue-rgb), 0.45);
  color: var(--d102-hex-blue-40);
}

/* D102 Design System — Details (expandable) */
/* ============================================================
   DETAILS / SUMMARY
   Wraps native <details>/<summary> elements with link-style
   presentation and the system focus state.

   HTML structure:

   <details class="d102-details">
     <summary class="d102-details__summary" aria-controls="content-id">Label</summary>
     <div class="d102-details__content" id="content-id">
       ...
     </div>
   </details>
   ============================================================ */
.d102-details {
  margin-top: 1rem;
}

.d102-details__summary {
  font-size: 1rem;
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-regular);
  line-height: var(--d102-lh-body);
  width: -moz-fit-content;
  width: fit-content;
  color: var(--d102-link);
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625rem);
  text-underline-offset: 0.15em;
  cursor: pointer;
  transition: color 100ms, background-color 100ms, box-shadow 100ms;
}

.d102-details__summary:hover {
  color: var(--d102-link-hover, #003078);
  text-decoration-thickness: 3px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  -webkit-text-decoration-skip: none;
}

.d102-details__summary:focus-visible {
  outline: 3px solid transparent;
  color: var(--d102-focus-black, #000000);
  background-color: white;
  box-shadow: 0 0 0px 2px white, 0 0 0px 4px var(--d102-focus-black), 0 0 0px 8px var(--d102-focus-blue);
  border-radius: 1px;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.d102-details__content {
  margin-top: 0.75rem;
  font-size: 1rem;
}

/* D102 Design System — Text Inputs & Textareas */
/* ============================================================
   FORM GROUP STRUCTURE

   Wraps a label, optional hint, optional error message, and input.
   Use aria-describedby to link hint/error IDs to the input.

   Basic:
   <div class="d102-form-group">
     <label class="d102-label" for="field-id">Label</label>
     <input class="d102-input" type="text" id="field-id">
   </div>

   With hint:
   <div class="d102-form-group">
     <label class="d102-label" for="field-id">Label</label>
     <div class="d102-hint" id="field-id-hint">Hint text</div>
     <input class="d102-input" type="text" id="field-id" aria-describedby="field-id-hint">
   </div>

   With error:
   <div class="d102-form-group d102-form-group--error">
     <label class="d102-label" for="field-id">Label</label>
     <p class="d102-error-message" id="field-id-error">
       <span class="d102-visually-hidden">Error:</span> Error message
     </p>
     <input class="d102-input d102-input--error" type="text" id="field-id"
       aria-describedby="field-id-error" aria-invalid="true">
   </div>
   ============================================================ */
.d102-form-group {
  margin-bottom: 1.5rem;
}

.d102-form-group--error {
  padding-left: 1rem;
  border-left: 4px solid #d4351c;
}

/* ============================================================
   LABEL
   ============================================================ */
.d102-label {
  display: block;
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-semibold);
  font-size: 1rem;
  line-height: var(--d102-lh-body);
  color: var(--d102-text);
  margin-bottom: 0.375rem;
}

.d102-label-large {
  font-size: 1.5rem;
}

/* ============================================================
   HINT TEXT
   ============================================================ */
.d102-hint {
  display: block;
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-light);
  font-size: 1rem;
  line-height: var(--d102-lh-body);
  color: var(--d102-text-muted);
  margin-bottom: 0.375rem;
}

/* ============================================================
   ERROR MESSAGE
   ============================================================ */
.d102-error-message {
  display: block;
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-semibold);
  font-size: 1rem;
  line-height: var(--d102-lh-body);
  color: #d4351c;
  margin-top: 0;
  margin-bottom: 0.375rem;
}

body[data-theme=dark] .d102-error-message {
  color: #ff8080;
}

/* ============================================================
   TEXT INPUT BASE
   ============================================================ */
.d102-input {
  /* Internal tokens — scoped so they don't leak */
  --_input-padding-v: 0.5rem;
  --_input-padding-h: 0.75rem;
  --_input-border-color: var(--d102-hex-black-80);
  --_input-radius: 0.1875rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-regular);
  font-size: 1rem;
  line-height: var(--d102-lh-body);
  color: var(--d102-text);
  background-color: var(--d102-bg);
  border: 2px solid var(--_input-border-color);
  border-radius: var(--_input-radius);
  padding: var(--_input-padding-v) var(--_input-padding-h);
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  transition: border-color 100ms, box-shadow 100ms;
}

body[data-theme=dark] .d102-input,
body[data-theme=dark] .d102-textarea {
  background-color: var(--d102-surface-2);
}

body[data-theme=dark] .d102-input:focus-visible,
body[data-theme=dark] .d102-textarea:focus-visible {
  border-color: inherit;
}

.d102-input::-moz-placeholder {
  color: var(--d102-text-muted);
  font-weight: var(--d102-fw-light);
  opacity: 1;
}

.d102-input::placeholder {
  color: var(--d102-text-muted);
  font-weight: var(--d102-fw-light);
  opacity: 1;
}

.d102-input:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 0;
  border-color: var(--d102-focus-black);
  box-shadow: 0 0 0 3px var(--d102-focus-black), 0 0 0 6px var(--d102-focus-blue);
}

/* ============================================================
   ERROR STATE
   ============================================================ */
.d102-input--error,
.d102-form-group--error .d102-input {
  border-color: #d4351c;
}

/* ============================================================
   WIDTH MODIFIERS — percentage-based
   ============================================================ */
.d102-input--width-three-quarters {
  width: 75%;
  max-width: 100%;
}

.d102-input--width-two-thirds {
  width: 66.667%;
  max-width: 100%;
}

.d102-input--width-half {
  width: 50%;
  max-width: 100%;
}

.d102-input--width-one-third {
  width: 33.333%;
  max-width: 100%;
}

.d102-input--width-one-quarter {
  width: 25%;
  max-width: 100%;
}

/* ============================================================
   WIDTH MODIFIERS — character count
   Sized by ch units + horizontal padding + 4px for borders (2px × 2).
   max-width: 100% prevents overflow on small screens.
   ============================================================ */
.d102-input--width-2 {
  width: calc(2ch + 2 * var(--_input-padding-h) + 4px);
  max-width: 100%;
}

.d102-input--width-4 {
  width: calc(4ch + 2 * var(--_input-padding-h) + 4px);
  max-width: 100%;
}

.d102-input--width-10 {
  width: calc(10ch + 2 * var(--_input-padding-h) + 4px);
  max-width: 100%;
}

.d102-input--width-20 {
  width: calc(20ch + 2 * var(--_input-padding-h) + 4px);
  max-width: 100%;
}

.d102-input--width-30 {
  width: calc(30ch + 2 * var(--_input-padding-h) + 4px);
  max-width: 100%;
}

/* ============================================================
   TEXTAREA
   Height is driven by --_textarea-rows so row-count modifiers
   only need to set that one token.
   ============================================================ */
.d102-textarea {
  /* Internal tokens */
  --_input-padding-v: 0.5rem;
  --_input-padding-h: 0.75rem;
  --_input-border-color: var(--d102-hex-black-80);
  --_input-radius: 0.1875rem;
  --_textarea-rows: 4;
  --_textarea-line-height: 1.55rem; /* matches --d102-lh-body at 1rem base */
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-regular);
  font-size: 1rem;
  line-height: var(--d102-lh-body);
  color: var(--d102-text);
  background-color: var(--d102-bg);
  border: 2px solid var(--_input-border-color);
  border-radius: var(--_input-radius);
  padding: var(--_input-padding-v) var(--_input-padding-h);
  height: calc(var(--_textarea-rows) * var(--_textarea-line-height) + 2 * var(--_input-padding-v) + 4px);
  resize: vertical;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  transition: border-color 100ms, box-shadow 100ms;
}

.d102-textarea::-moz-placeholder {
  color: var(--d102-text-muted);
  font-weight: var(--d102-fw-light);
  opacity: 1;
}

.d102-textarea::placeholder {
  color: var(--d102-text-muted);
  font-weight: var(--d102-fw-light);
  opacity: 1;
}

.d102-textarea:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 0;
  border-color: var(--d102-focus-black);
  box-shadow: 0 0 0 3px var(--d102-focus-black), 0 0 0 6px var(--d102-focus-blue);
}

.d102-textarea--error,
.d102-form-group--error .d102-textarea {
  border-color: #d4351c;
}

/* ============================================================
   TEXTAREA ROW MODIFIERS
   ============================================================ */
.d102-textarea--rows-2 {
  --_textarea-rows: 2;
}

.d102-textarea--rows-3 {
  --_textarea-rows: 3;
}

.d102-textarea--rows-5 {
  --_textarea-rows: 5;
}

.d102-textarea--rows-8 {
  --_textarea-rows: 8;
}

.d102-textarea--rows-10 {
  --_textarea-rows: 10;
}

/* ============================================================
   DARK MODE
   ============================================================ */
body[data-theme=dark] .d102-input,
body[data-theme=dark] .d102-textarea {
  --_input-border-color: var(--d102-hex-black-30);
}
body[data-theme=dark] .d102-input--error,
body[data-theme=dark] .d102-form-group--error .d102-input,
body[data-theme=dark] .d102-textarea--error,
body[data-theme=dark] .d102-form-group--error .d102-textarea {
  border-color: #ff8080;
}
body[data-theme=dark] .d102-form-group--error {
  border-left-color: #ff8080;
}

/* ============================================================
   RESPONSIVE
   Percentage-width variants collapse to full width on small screens
   so forms remain usable on mobile.
   ============================================================ */
@media (max-width: 480px) {
  .d102-input--width-three-quarters,
  .d102-input--width-two-thirds,
  .d102-input--width-half,
  .d102-input--width-one-third,
  .d102-input--width-one-quarter {
    width: 100%;
  }
}
/* D102 Design System — Checkboxes */
/* ============================================================
   FIELDSET
   Resets native <fieldset> styling. Used for checkbox and radio
   groups where a legend serves as the group question/label.

   <fieldset class="d102-fieldset" aria-describedby="hint-id">
     <legend class="d102-fieldset__legend">
       <span class="d102-label">Question</span>
     </legend>
     ...
   </fieldset>
   ============================================================ */
.d102-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.d102-fieldset__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 0.375rem;
}

/* ============================================================
   CHECKBOX GROUP

   Vertical list (default):
   <div class="d102-checkbox-group">...</div>

   Horizontal inline:
   <div class="d102-checkbox-group d102-checkbox-group--inline">...</div>
   ============================================================ */
.d102-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.d102-checkbox-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* ============================================================
   CHECKBOX ITEM

   <div class="d102-checkbox">
     <input class="d102-checkbox__input" type="checkbox"
       id="opt-1" name="opts" value="opt-1">
     <label class="d102-checkbox__label" for="opt-1">Label</label>
   </div>

   Size variants: d102-checkbox--small, d102-checkbox--large
   ============================================================ */
.d102-checkbox {
  --_cb-size: 1.5rem;
  --_cb-gap: 0.75rem;
  --_cb-font-size: 1rem;
  --_cb-margin-top: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--_cb-gap);
}

.d102-checkbox__input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: var(--_cb-size);
  height: var(--_cb-size);
  margin-top: var(--_cb-margin-top);
  background-color: var(--d102-bg);
  border: 2px solid var(--d102-hex-black-80);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 100ms, border-color 100ms, box-shadow 100ms;
}

.d102-checkbox__input:checked {
  background-color: var(--d102-hex-black-100);
  border-color: var(--d102-hex-black-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%23FDE70A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M1 4l3.5 3.5L11 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65%;
}

.d102-checkbox__input:focus-visible {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 3px var(--d102-focus-black), 0 0 0 6px var(--d102-focus-blue);
}

.d102-checkbox__label {
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-regular);
  font-size: var(--_cb-font-size);
  line-height: var(--d102-lh-body);
  color: var(--d102-text);
  cursor: pointer;
}

/* ============================================================
   SIZE MODIFIERS
   ============================================================ */
.d102-checkbox--small {
  --_cb-size: 1.125rem;
  --_cb-gap: 0.5rem;
  --_cb-font-size: 0.9375rem;
  --_cb-margin-top: 0.15rem;
}

.d102-checkbox--large {
  --_cb-size: 2rem;
  --_cb-gap: 1rem;
  --_cb-font-size: 1.125rem;
  --_cb-margin-top: 0;
}

/* ============================================================
   ERROR STATE
   ============================================================ */
.d102-checkbox__input--error,
.d102-form-group--error .d102-checkbox__input {
  border-color: #d4351c;
}

/* ============================================================
   DARK MODE
   ============================================================ */
body[data-theme=dark] .d102-checkbox__input {
  background-color: var(--d102-surface-2);
  border-color: var(--d102-hex-black-30);
}

body[data-theme=dark] .d102-checkbox__input:checked {
  background-color: var(--d102-hex-yellow-100);
  border-color: var(--d102-hex-yellow-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M1 4l3.5 3.5L11 1'/%3E%3C/svg%3E");
}

body[data-theme=dark] .d102-checkbox__input:focus-visible {
  border-color: inherit;
}

body[data-theme=dark] .d102-checkbox__input--error,
body[data-theme=dark] .d102-form-group--error .d102-checkbox__input {
  border-color: #ff8080;
}

/* D102 Design System — Radio Buttons */
/* ============================================================
   Requires .d102-fieldset / .d102-fieldset__legend — defined in
   _checkbox.scss and compiled into the same stylesheet.

   RADIO GROUP

   Vertical list (default):
   <div class="d102-radio-group">...</div>

   Horizontal inline:
   <div class="d102-radio-group d102-radio-group--inline">...</div>
   ============================================================ */
.d102-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.d102-radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* ============================================================
   RADIO ITEM

   <div class="d102-radio">
     <input class="d102-radio__input" type="radio"
       id="opt-1" name="opts" value="opt-1">
     <label class="d102-radio__label" for="opt-1">Label</label>
   </div>

   Size variants: d102-radio--small, d102-radio--large
   ============================================================ */
.d102-radio {
  --_rb-size: 1.5rem;
  --_rb-gap: 0.75rem;
  --_rb-font-size: 1rem;
  --_rb-margin-top: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--_rb-gap);
}

.d102-radio__input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: var(--_rb-size);
  height: var(--_rb-size);
  margin-top: var(--_rb-margin-top);
  background-color: var(--d102-bg);
  border: 2px solid var(--d102-hex-black-80);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 100ms, border-color 100ms, box-shadow 100ms;
}

.d102-radio__input:checked {
  border-color: var(--d102-hex-black-100);
  border-width: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.5' fill='%23000'/%3E%3C/svg%3E");
  background-color: var(--d102-hex-yellow-100);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.d102-radio__input:focus-visible {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 3px var(--d102-focus-black), 0 0 0 6px var(--d102-focus-blue);
}

.d102-radio__label {
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-regular);
  font-size: var(--_rb-font-size);
  line-height: var(--d102-lh-body);
  color: var(--d102-text);
  cursor: pointer;
}

/* ============================================================
   SIZE MODIFIERS
   ============================================================ */
.d102-radio--small {
  --_rb-size: 1.125rem;
  --_rb-gap: 0.5rem;
  --_rb-font-size: 1rem;
  --_rb-margin-top: 0.15rem;
}

.d102-radio--large {
  --_rb-size: 2rem;
  --_rb-gap: 1rem;
  --_rb-font-size: 1.125rem;
  --_rb-margin-top: 0;
}

/* ============================================================
   ERROR STATE
   ============================================================ */
.d102-radio__input--error,
.d102-form-group--error .d102-radio__input {
  border-color: #d4351c;
}

/* ============================================================
   DARK MODE
   ============================================================ */
body[data-theme=dark] .d102-radio__input {
  background-color: var(--d102-surface-2);
  border-color: var(--d102-hex-black-30);
}

body[data-theme=dark] .d102-radio__input:checked {
  border-color: var(--d102-yellow);
  background-color: var(--d102-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.5' fill='%23000'/%3E%3C/svg%3E");
}

body[data-theme=dark] .d102-radio__input:focus-visible {
  border-color: inherit;
}

body[data-theme=dark] .d102-radio__input--error,
body[data-theme=dark] .d102-form-group--error .d102-radio__input {
  border-color: #ff8080;
}

/* D102 Design System — Select Dropdown */
/* ============================================================
   SELECT STRUCTURE

   Default width is determined by the longest option (browser default).

   <div class="d102-form-group">
     <label class="d102-label" for="select-id">Label</label>
     <select class="d102-select" id="select-id" name="select-id">
       <option value="">Select an option</option>
       <option value="1">Option 1</option>
     </select>
   </div>

   Full width:
   <select class="d102-select d102-select--full" ...>

   Character-width variants:
   <select class="d102-select d102-select--width-10" ...>
   ============================================================ */
.d102-select {
  /* Internal tokens */
  --_select-padding-v: 0.5rem;
  --_select-padding-l: 0.75rem;
  --_select-padding-r: 2.5rem; /* includes space for the dropdown arrow */
  --_select-radius: 0.1875rem;
  display: block;
  max-width: 100%;
  font-family: var(--d102-font);
  font-weight: var(--d102-fw-regular);
  font-size: 1rem;
  line-height: var(--d102-lh-body);
  color: var(--d102-text);
  background-color: var(--d102-bg);
  border: 2px solid var(--d102-hex-black-80);
  border-radius: var(--_select-radius);
  padding: var(--_select-padding-v) var(--_select-padding-r) var(--_select-padding-v) var(--_select-padding-l);
  /* Custom dropdown arrow — arrow_head.svg path rotated to point down */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M6,1l11.3,9.5c.9.8.9,2.3,0,3.1l-11.3,9.5' transform='rotate(90 12 12)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--_select-padding-l) center;
  background-size: 1rem;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 100ms, box-shadow 100ms;
}

.d102-select:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 0;
  border-color: var(--d102-focus-black);
  box-shadow: 0 0 0 3px var(--d102-focus-black), 0 0 0 6px var(--d102-focus-blue);
}

/* ============================================================
   ERROR STATE
   ============================================================ */
.d102-select--error,
.d102-form-group--error .d102-select {
  border-color: #d4351c;
}

/* ============================================================
   WIDTH MODIFIERS — full width
   ============================================================ */
.d102-select--full {
  width: 100%;
}

/* ============================================================
   WIDTH MODIFIERS — character count
   Sized by ch units + left padding + right padding (arrow area) + borders.
   ============================================================ */
.d102-select--width-4 {
  width: calc(4ch + var(--_select-padding-l) + var(--_select-padding-r) + 4px);
  max-width: 100%;
}

.d102-select--width-10 {
  width: calc(10ch + var(--_select-padding-l) + var(--_select-padding-r) + 4px);
  max-width: 100%;
}

.d102-select--width-20 {
  width: calc(20ch + var(--_select-padding-l) + var(--_select-padding-r) + 4px);
  max-width: 100%;
}

.d102-select--width-30 {
  width: calc(30ch + var(--_select-padding-l) + var(--_select-padding-r) + 4px);
  max-width: 100%;
}

/* ============================================================
   DARK MODE
   ============================================================ */
body[data-theme=dark] .d102-select {
  background-color: var(--d102-surface-2);
  border-color: var(--d102-hex-black-30);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M6,1l11.3,9.5c.9.8.9,2.3,0,3.1l-11.3,9.5' transform='rotate(90 12 12)'/%3E%3C/svg%3E");
}

body[data-theme=dark] .d102-select:focus-visible {
  border-color: inherit;
}

body[data-theme=dark] .d102-select--error,
body[data-theme=dark] .d102-form-group--error .d102-select {
  border-color: #ff8080;
}

/* ============================================================
   PAGINATION
   Supports three HTML structures:
     1. WordPress: nav.pagination > div.nav-links > a|span.page-numbers
     2. FacetWP:  div.facetwp-type-pager > div.facetwp-pager > a.facetwp-page
     3. Custom:   nav.d102-pagination > a|span.d102-pagination__item


<nav class="pagination" aria-label="Project pagination">
<a class="prev page-numbers" href="http://d102.local/work/">« Previous</a>
<a class="page-numbers" href="http://d102.local/work/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://d102.local/work/page/3/">3</a>
<a class="next page-numbers" href="http://d102.local/work/page/3/">Next »</a>            </nav>


   ============================================================ */
.pagination,
.facetwp-type-pager,
.d102-pagination {
  margin-top: 2rem;
}

.pagination .nav-links,
.facetwp-type-pager > .facetwp-pager,
.d102-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.pagination .nav-links > *,
.facetwp-type-pager > .facetwp-pager > *,
.d102-pagination > .d102-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.375rem 0.625rem;
  background-color: var(--d102-hex-yellow-40);
  color: var(--d102-hex-black-100);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 2px;
}

.pagination .nav-links a,
.facetwp-type-pager > .facetwp-pager a,
.d102-pagination > a.d102-pagination__item {
  background-color: var(--d102-hex-yellow-40);
}

.pagination .nav-links > .current,
.facetwp-type-pager > .facetwp-pager > .facetwp-page.active,
.d102-pagination > .d102-pagination__current {
  font-weight: 700;
  pointer-events: none;
  cursor: default;
  outline: 2px solid var(--d102-text);
  outline-offset: -2px;
  background-color: var(--d102-hex-yellow-100);
}

.pagination .nav-links a:hover,
.facetwp-type-pager > .facetwp-pager a:hover,
.d102-pagination > a.d102-pagination__item:hover {
  background-color: var(--d102-hex-yellow-80, #FDEC3B);
  text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
  text-decoration-skip-ink: none;
  -webkit-text-decoration-skip-ink: none;
}

.pagination .nav-links a:focus-visible,
.facetwp-type-pager > .facetwp-pager a:focus-visible,
.d102-pagination > a.d102-pagination__item:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: 0 0 0px 3px var(--d102-focus-black, #0d0d0d), 0 0 0px 6px var(--d102-focus-blue, #1d70b8);
}/*# sourceMappingURL=style.css.map */