@import './fonts.css';

/* ==========================================================================
   MATERIAL DESIGN 3 — FOUNDATION
   --------------------------------------------------------------------------
   Design tokens, reset, base elements, typescale utilities, state layers,
   ripple, and layout primitives.

   • Pure CSS. No preprocessor syntax. No build step.
   • Zero network dependencies — works identically over file:// and http://.
     The only @import is the local './fonts.css' (self-hosted Roboto +
     Roboto Mono variable fonts).
   • color-mix() is used only for progressive enhancement; every essential
     mechanism (state layers, ripple, elevation) works with plain
     rgb()/opacity compositing in browsers without it.

   TABLE OF CONTENTS
     1. Token layer — reference typefaces
     2. Token layer — colour (light)
     3. Token layer — colour (dark)
     4. Token layer — shape scale
     5. Token layer — elevation
     6. Token layer — state layers
     7. Token layer — motion
     8. Token layer — typescale
     9. Token layer — spacing & breakpoints
    10. Reset
    11. Base elements
    12. Typescale utility classes
    13. State-layer primitive
    14. Ripple primitive
    15. Layout — container
    16. Layout — grid
    17. Spacing utilities
    18. Surface / elevation / shape utilities
   ========================================================================== */


/* ==========================================================================
   1. TOKEN LAYER — REFERENCE TYPEFACES
   ========================================================================== */

:root {
  /* The two self-hosted families declared in fonts.css, plus system
     fallbacks that render before/without the webfont. */
  --md-ref-typeface-brand: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, 'Helvetica Neue', sans-serif;
  --md-ref-typeface-plain: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, 'Helvetica Neue', sans-serif;
  --md-ref-typeface-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Variable-font axis bounds actually available in the woff2 files. */
  --md-ref-typeface-weight-min: 100;
  --md-ref-typeface-weight-max: 900;
}


/* ==========================================================================
   2. TOKEN LAYER — COLOUR (LIGHT / DEFAULT)
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Primary --------------------------------------------------------- */
  --md-sys-color-primary: #0b57d0;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d3e3fd;
  --md-sys-color-on-primary-container: #041e49;

  /* --- Secondary ------------------------------------------------------- */
  --md-sys-color-secondary: #00639b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #c2e7ff;
  --md-sys-color-on-secondary-container: #001d35;

  /* --- Tertiary -------------------------------------------------------- */
  --md-sys-color-tertiary: #146c2e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #c4eed0;
  --md-sys-color-on-tertiary-container: #072711;

  /* --- Error ----------------------------------------------------------- */
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;

  /* --- Surface --------------------------------------------------------- */
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #1f1f1f;
  --md-sys-color-surface-variant: #e1e3e1;
  --md-sys-color-on-surface-variant: #444746;

  /* --- Surface containers (tonal elevation) ---------------------------- */
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f8fafd;
  --md-sys-color-surface-container: #f0f4f9;
  --md-sys-color-surface-container-high: #e9eef6;
  --md-sys-color-surface-container-highest: #dde3ea;
  --md-sys-color-surface-dim: #d3dbe5;
  --md-sys-color-surface-bright: #ffffff;

  /* --- Outline --------------------------------------------------------- */
  --md-sys-color-outline: #747775;
  --md-sys-color-outline-variant: #c4c7c5;

  /* --- Inverse --------------------------------------------------------- */
  --md-sys-color-inverse-surface: #303030;
  --md-sys-color-inverse-on-surface: #f2f2f2;
  --md-sys-color-inverse-primary: #a8c7fa;

  /* --- Utility --------------------------------------------------------- */
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: var(--md-sys-color-primary);

  /* Background is an M3 legacy alias kept for compatibility. */
  --md-sys-color-background: var(--md-sys-color-surface);
  --md-sys-color-on-background: var(--md-sys-color-on-surface);

  /* Scrim as an rgb triplet so opacity can be composed without color-mix. */
  --md-sys-color-scrim-rgb: 0, 0, 0;
  --md-sys-color-shadow-rgb: 0, 0, 0;
}


/* ==========================================================================
   3. TOKEN LAYER — COLOUR (DARK)
   Applied by setting data-theme="dark" on the <html> element.
   ========================================================================== */

html[data-theme='dark'] {
  color-scheme: dark;

  /* --- Primary --------------------------------------------------------- */
  --md-sys-color-primary: #a8c7fa;
  --md-sys-color-on-primary: #062e6f;
  --md-sys-color-primary-container: #0842a0;
  --md-sys-color-on-primary-container: #d3e3fd;

  /* --- Secondary ------------------------------------------------------- */
  --md-sys-color-secondary: #7fcfff;
  --md-sys-color-on-secondary: #003355;
  --md-sys-color-secondary-container: #004a77;
  --md-sys-color-on-secondary-container: #c2e7ff;

  /* --- Tertiary -------------------------------------------------------- */
  --md-sys-color-tertiary: #6dd58c;
  --md-sys-color-on-tertiary: #0a3818;
  --md-sys-color-tertiary-container: #0f5223;
  --md-sys-color-on-tertiary-container: #c4eed0;

  /* --- Error ----------------------------------------------------------- */
  --md-sys-color-error: #f2b8b5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-on-error-container: #f9dedc;

  /* --- Surface --------------------------------------------------------- */
  --md-sys-color-surface: #131314;
  --md-sys-color-on-surface: #e3e3e3;
  --md-sys-color-surface-variant: #444746;
  --md-sys-color-on-surface-variant: #c4c7c5;

  /* --- Surface containers (tonal elevation) ---------------------------- */
  --md-sys-color-surface-container-lowest: #0e0e0e;
  --md-sys-color-surface-container-low: #1b1b1b;
  --md-sys-color-surface-container: #1e1f20;
  --md-sys-color-surface-container-high: #282a2c;
  --md-sys-color-surface-container-highest: #333537;
  --md-sys-color-surface-dim: #131314;
  --md-sys-color-surface-bright: #37393b;

  /* --- Outline --------------------------------------------------------- */
  --md-sys-color-outline: #8e918f;
  --md-sys-color-outline-variant: #444746;

  /* --- Inverse --------------------------------------------------------- */
  --md-sys-color-inverse-surface: #e3e3e3;
  --md-sys-color-inverse-on-surface: #303030;
  --md-sys-color-inverse-primary: #0b57d0;

  /* --- Utility --------------------------------------------------------- */
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: var(--md-sys-color-primary);
  --md-sys-color-background: var(--md-sys-color-surface);
  --md-sys-color-on-background: var(--md-sys-color-on-surface);
}


/* ==========================================================================
   4. TOKEN LAYER — SHAPE SCALE
   ========================================================================== */

:root {
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Top-only variants used by sheets, menus and top-anchored surfaces. */
  --md-sys-shape-corner-extra-small-top: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
  --md-sys-shape-corner-large-top: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0 0;
  --md-sys-shape-corner-extra-large-top: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
}


/* ==========================================================================
   5. TOKEN LAYER — ELEVATION
   The canonical M3 two-layer shadow: a tight key shadow plus a diffuse
   ambient shadow. Dark theme uses higher alpha because shadows must read
   against near-black surfaces.
   ========================================================================== */

:root {
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1:
    0 1px 2px 0 rgba(0, 0, 0, .30),
    0 1px 3px 1px rgba(0, 0, 0, .15);
  --md-sys-elevation-level2:
    0 1px 2px 0 rgba(0, 0, 0, .30),
    0 2px 6px 2px rgba(0, 0, 0, .15);
  --md-sys-elevation-level3:
    0 1px 3px 0 rgba(0, 0, 0, .30),
    0 4px 8px 3px rgba(0, 0, 0, .15);
  --md-sys-elevation-level4:
    0 2px 3px 0 rgba(0, 0, 0, .30),
    0 6px 10px 4px rgba(0, 0, 0, .15);
  --md-sys-elevation-level5:
    0 4px 4px 0 rgba(0, 0, 0, .30),
    0 8px 12px 6px rgba(0, 0, 0, .15);

  /* Ordinal z-index companions so elevated surfaces stack predictably. */
  --md-sys-elevation-z0: 0;
  --md-sys-elevation-z1: 1;
  --md-sys-elevation-z2: 2;
  --md-sys-elevation-z3: 3;
  --md-sys-elevation-z4: 4;
  --md-sys-elevation-z5: 5;
}

html[data-theme='dark'] {
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1:
    0 1px 2px 0 rgba(0, 0, 0, .55),
    0 1px 3px 1px rgba(0, 0, 0, .35);
  --md-sys-elevation-level2:
    0 1px 2px 0 rgba(0, 0, 0, .55),
    0 2px 6px 2px rgba(0, 0, 0, .35);
  --md-sys-elevation-level3:
    0 1px 3px 0 rgba(0, 0, 0, .60),
    0 4px 8px 3px rgba(0, 0, 0, .40);
  --md-sys-elevation-level4:
    0 2px 3px 0 rgba(0, 0, 0, .60),
    0 6px 10px 4px rgba(0, 0, 0, .40);
  --md-sys-elevation-level5:
    0 4px 4px 0 rgba(0, 0, 0, .65),
    0 8px 12px 6px rgba(0, 0, 0, .45);
}


/* ==========================================================================
   6. TOKEN LAYER — STATE LAYERS
   ========================================================================== */

:root {
  --md-sys-state-hover-opacity: .08;
  --md-sys-state-focus-opacity: .10;
  --md-sys-state-pressed-opacity: .10;
  --md-sys-state-dragged-opacity: .16;

  /* Content emphasis opacities used for disabled/inactive treatments. */
  --md-sys-state-disabled-content-opacity: .38;
  --md-sys-state-disabled-container-opacity: .12;
}


/* ==========================================================================
   7. TOKEN LAYER — MOTION
   ========================================================================== */

:root {
  /* --- Easing ---------------------------------------------------------- */
  --md-sys-motion-easing-linear: linear;
  --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15);
  --md-sys-motion-easing-legacy: cubic-bezier(.4, 0, .2, 1);
  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(.4, 0, 1, 1);
  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, .2, 1);

  /* --- Duration -------------------------------------------------------- */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;
}


/* ==========================================================================
   8. TOKEN LAYER — TYPESCALE
   Fifteen steps, each emitted as -font / -size / -line-height / -weight /
   -tracking so components can compose them individually.
   ========================================================================== */

:root {
  /* --- Display --------------------------------------------------------- */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-tracking: -0.25px;

  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-tracking: 0px;

  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-tracking: 0px;

  /* --- Headline -------------------------------------------------------- */
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-tracking: 0px;

  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-tracking: 0px;

  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-tracking: 0px;

  /* --- Title ----------------------------------------------------------- */
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-tracking: 0px;

  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-tracking: 0.15px;

  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-tracking: 0.1px;

  /* --- Body ------------------------------------------------------------ */
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-tracking: 0.5px;

  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-tracking: 0.25px;

  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-tracking: 0.4px;

  /* --- Label ----------------------------------------------------------- */
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;

  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-tracking: 0.5px;

  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-tracking: 0.5px;

  /* --- Code (non-spec, but needed by any real product) ----------------- */
  --md-sys-typescale-code-font: var(--md-ref-typeface-mono);
  --md-sys-typescale-code-size: 14px;
  --md-sys-typescale-code-line-height: 20px;
  --md-sys-typescale-code-weight: 400;
  --md-sys-typescale-code-tracking: 0px;
}


/* ==========================================================================
   9. TOKEN LAYER — SPACING & BREAKPOINTS
   Spacing follows the M3 4dp baseline grid.
   ========================================================================== */

:root {
  --md-sys-spacing-unit: 4px;
  --md-sys-spacing-0: 0px;
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-7: 28px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-9: 36px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-11: 44px;
  --md-sys-spacing-12: 48px;
  --md-sys-spacing-14: 56px;
  --md-sys-spacing-16: 64px;
  --md-sys-spacing-20: 80px;
  --md-sys-spacing-24: 96px;

  /* Window size classes. Declared as tokens for JS; media queries below
     must still use literal values because var() is invalid in @media. */
  --md-sys-breakpoint-compact: 0px;
  --md-sys-breakpoint-medium: 600px;
  --md-sys-breakpoint-expanded: 840px;
  --md-sys-breakpoint-large: 1200px;
  --md-sys-breakpoint-extra-large: 1600px;

  /* Container gutters per window size class. */
  --md-sys-container-gutter: 16px;
  --md-sys-container-max-width: 1440px;

  /* Minimum interactive target — M3 accessibility requirement. */
  --md-sys-min-touch-target: 48px;
}

@media (min-width: 600px) {
  :root { --md-sys-container-gutter: 24px; }
}

@media (min-width: 840px) {
  :root { --md-sys-container-gutter: 48px; }
}


/* ==========================================================================
   10. RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
pre, hr {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Media defaults: block-level, never overflow their container. */
img, picture, video, canvas, svg, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img, video, canvas {
  height: auto;
}

svg {
  fill: currentColor;
}

/* Forms inherit typography instead of using UA defaults. */
input, button, textarea, select, optgroup {
  font: inherit;
  font-size: 100%;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  appearance: button;
  background: none;
  border: 0;
  cursor: pointer;
}

button:disabled,
[type='button']:disabled,
[type='reset']:disabled,
[type='submit']:disabled {
  cursor: default;
}

textarea {
  resize: vertical;
  overflow: auto;
}

/* Long words must never blow out a layout. */
p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption, blockquote {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  height: 0;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* Anchor scrolling clears any sticky header consumers may set. */
:where(:root) {
  scroll-behavior: smooth;
  scroll-padding-top: var(--md-scroll-padding, 0px);
}

/* Reduced-motion kill switch. Values are near-zero rather than zero so
   transitionend / animationend listeners still fire. */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   11. BASE ELEMENTS
   ========================================================================== */

body {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);

  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;

  transition:
    background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* --- Headings map onto the display / headline / title scale ------------- */

h1 {
  font-family: var(--md-sys-typescale-display-small-font);
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  font-weight: var(--md-sys-typescale-display-small-weight);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
}

h2 {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

h3 {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}

h4 {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}

h5 {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
}

h6 {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--md-sys-color-on-surface);
  text-wrap: balance;
}

/* --- Links: Google behaviour — no rule at rest, underline on hover ------ */

a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  border-radius: var(--md-sys-shape-corner-extra-small);
  transition:
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    text-decoration-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: var(--md-sys-color-primary);
  opacity: .8;
}

a:visited {
  color: var(--md-sys-color-primary);
}

/* Links inside running prose stay underlined for scannability. */
.md-prose a,
p > a {
  text-decoration: underline;
  text-decoration-color: var(--md-sys-color-outline-variant);
}

.md-prose a:hover,
p > a:hover {
  text-decoration-color: currentColor;
}

/* --- Inline text -------------------------------------------------------- */

strong, b {
  font-weight: 500;
}

small {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

code, kbd, samp, pre {
  font-family: var(--md-sys-typescale-code-font);
  font-size: var(--md-sys-typescale-code-size);
  line-height: var(--md-sys-typescale-code-line-height);
  letter-spacing: var(--md-sys-typescale-code-tracking);
}

code {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: .125em .375em;
}

pre {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

blockquote {
  border-inline-start: 4px solid var(--md-sys-color-outline-variant);
  padding-inline-start: var(--md-sys-spacing-4);
  color: var(--md-sys-color-on-surface-variant);
}

mark {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 0 .15em;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* --- Selection ---------------------------------------------------------- */

::selection {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  text-shadow: none;
}

/* --- Focus -------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Explicit helper for components that manage focus programmatically. */
.md-focus-ring:focus-visible,
.md-focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* --- Placeholders & form colour ---------------------------------------- */

::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 1;
}

::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

:disabled {
  color: var(--md-sys-color-on-surface);
  opacity: var(--md-sys-state-disabled-content-opacity);
}

/* --- Scrollbars (opt-in, token-driven) ---------------------------------- */

.md-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

.md-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.md-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.md-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
}


/* ==========================================================================
   12. TYPESCALE UTILITY CLASSES
   One class per step; each applies font / size / line-height / weight /
   letter-spacing from the tokens.
   ========================================================================== */

.md-display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

.md-display-medium {
  font-family: var(--md-sys-typescale-display-medium-font);
  font-size: var(--md-sys-typescale-display-medium-size);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  font-weight: var(--md-sys-typescale-display-medium-weight);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
}

.md-display-small {
  font-family: var(--md-sys-typescale-display-small-font);
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  font-weight: var(--md-sys-typescale-display-small-weight);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
}

.md-headline-large {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

.md-headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}

.md-headline-small {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}

.md-title-large {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
}

.md-title-medium {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

.md-title-small {
  font-family: var(--md-sys-typescale-title-small-font);
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: var(--md-sys-typescale-title-small-weight);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
}

.md-body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.md-body-medium {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.md-body-small {
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-weight: var(--md-sys-typescale-body-small-weight);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

.md-label-large {
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}

.md-label-medium {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.md-label-small {
  font-family: var(--md-sys-typescale-label-small-font);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
}

.md-code {
  font-family: var(--md-sys-typescale-code-font);
  font-size: var(--md-sys-typescale-code-size);
  line-height: var(--md-sys-typescale-code-line-height);
  font-weight: var(--md-sys-typescale-code-weight);
  letter-spacing: var(--md-sys-typescale-code-tracking);
}


/* ==========================================================================
   13. STATE-LAYER PRIMITIVE
   Add .md-state-layer to any interactive element. It paints a currentColor
   overlay in ::after at the M3 state opacities. currentColor means the layer
   automatically matches the element's own "on-" colour, so it works on any
   container without extra tokens.

   Override --md-state-layer-color to tint the layer independently of text
   (e.g. a primary-tinted hover on a neutral surface).
   ========================================================================== */

.md-state-layer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* z-index:-1 + isolation on the host paints the layer above the element's own
   background but beneath its content, so children keep whatever `position`
   they were authored with. */
.md-state-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-color: var(--md-state-layer-color, currentColor);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

/* Opt-in: paint the layer OVER the content (image overlays, media tiles). */
.md-state-layer--over::after {
  z-index: 1;
}

/* Hover only on devices that can actually hover. */
@media (hover: hover) and (pointer: fine) {
  .md-state-layer:hover::after {
    opacity: var(--md-sys-state-hover-opacity);
  }
}

.md-state-layer:focus-visible::after {
  opacity: var(--md-sys-state-focus-opacity);
}

.md-state-layer:active::after,
.md-state-layer[aria-pressed='true']::after,
.md-state-layer[data-pressed='true']::after {
  opacity: var(--md-sys-state-pressed-opacity);
  transition-duration: var(--md-sys-motion-duration-short1);
}

.md-state-layer[data-dragged='true']::after {
  opacity: var(--md-sys-state-dragged-opacity);
}

.md-state-layer[aria-selected='true']::after,
.md-state-layer[data-selected='true']::after {
  opacity: var(--md-sys-state-hover-opacity);
}

/* Selected + hover composes to a slightly stronger layer. */
@media (hover: hover) and (pointer: fine) {
  .md-state-layer[aria-selected='true']:hover::after,
  .md-state-layer[data-selected='true']:hover::after {
    opacity: calc(var(--md-sys-state-hover-opacity) + var(--md-sys-state-hover-opacity));
  }
}

.md-state-layer:disabled::after,
.md-state-layer[aria-disabled='true']::after,
.md-state-layer[data-disabled='true']::after {
  opacity: 0 !important;
}

.md-state-layer:disabled,
.md-state-layer[aria-disabled='true'],
.md-state-layer[data-disabled='true'] {
  cursor: default;
  pointer-events: none;
}

/* Explicit tint variants — plain rgb(), no color-mix() dependency. */
.md-state-layer--primary { --md-state-layer-color: var(--md-sys-color-primary); }
.md-state-layer--on-surface { --md-state-layer-color: var(--md-sys-color-on-surface); }
.md-state-layer--on-primary { --md-state-layer-color: var(--md-sys-color-on-primary); }
.md-state-layer--error { --md-state-layer-color: var(--md-sys-color-error); }
.md-state-layer--inverse { --md-state-layer-color: var(--md-sys-color-inverse-on-surface); }


/* ==========================================================================
   14. RIPPLE PRIMITIVE
   Self-contained, driven entirely by three custom properties that JS sets on
   the element before triggering:

     el.style.setProperty('--ripple-x', x + 'px');   // press point, relative
     el.style.setProperty('--ripple-y', y + 'px');   // to the element box
     el.style.setProperty('--ripple-size', d + 'px');// 2 * max corner radius
     el.setAttribute('data-ripple', 'on');           // start
     // on animationend: el.removeAttribute('data-ripple')

   Two implementations ship here and both use the same variables:
     (a) pseudo-element ripple  — .md-ripple[data-ripple="on"]::before
     (b) element ripple         — a JS-appended <span class="md-ripple__wave">
         (needed when overlapping ripples must coexist)
   ========================================================================== */

.md-ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;

  /* Safe defaults so the ripple still renders if JS never runs. */
  --ripple-x: 50%;
  --ripple-y: 50%;
  --ripple-size: 200%;
  --ripple-color: currentColor;
  --ripple-opacity: var(--md-sys-state-pressed-opacity);
  --ripple-duration: var(--md-sys-motion-duration-long2);
}

/* (a) Pseudo-element implementation ------------------------------------- */

.md-ripple::before {
  content: '';
  position: absolute;
  top: var(--ripple-y);
  left: var(--ripple-x);
  width: var(--ripple-size);
  height: var(--ripple-size);
  margin: 0;
  border-radius: 50%;
  background-color: var(--ripple-color);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform, opacity;
}

.md-ripple[data-ripple='on']::before {
  animation: md-ripple-wave var(--ripple-duration) var(--md-sys-motion-easing-standard-decelerate) forwards;
}

/* (b) Element implementation — for multiple concurrent ripples ----------- */

.md-ripple__wave {
  position: absolute;
  top: var(--ripple-y);
  left: var(--ripple-x);
  width: var(--ripple-size);
  height: var(--ripple-size);
  border-radius: 50%;
  background-color: var(--ripple-color, currentColor);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform, opacity;
  animation: md-ripple-wave var(--ripple-duration, 500ms) var(--md-sys-motion-easing-standard-decelerate) forwards;
}

@keyframes md-ripple-wave {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: var(--ripple-opacity, .10);
  }
  40% {
    opacity: var(--ripple-opacity, .10);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Unbounded ripple, used by icon buttons where the wave escapes the box. */
.md-ripple--unbounded {
  overflow: visible;
}

.md-ripple--unbounded::before,
.md-ripple--unbounded .md-ripple__wave {
  /* Clip to a circle instead of the element box. */
  clip-path: circle(50%);
}

/* Tint variants. */
.md-ripple--primary { --ripple-color: var(--md-sys-color-primary); }
.md-ripple--on-primary { --ripple-color: var(--md-sys-color-on-primary); }
.md-ripple--on-surface { --ripple-color: var(--md-sys-color-on-surface); }
.md-ripple--error { --ripple-color: var(--md-sys-color-error); }

@media (prefers-reduced-motion: reduce) {
  .md-ripple[data-ripple='on']::before,
  .md-ripple__wave {
    animation: none;
    opacity: 0;
  }
}


/* ==========================================================================
   15. LAYOUT — PAGE CONTAINER
   1440px cap with M3 window-size-class gutters: 16px compact, 24px medium
   (>=600px), 48px expanded (>=840px).
   ========================================================================== */

.md-container {
  width: 100%;
  max-width: var(--md-sys-container-max-width);
  margin-inline: auto;
  padding-inline: var(--md-sys-container-gutter);
}

/* Explicit media queries as well as the token, so the container is correct
   even if a consumer overrides --md-sys-container-gutter locally. */
@media (min-width: 600px) {
  .md-container { padding-inline: 24px; }
}

@media (min-width: 840px) {
  .md-container { padding-inline: 48px; }
}

/* Narrower reading measure variants. */
.md-container--narrow { max-width: 720px; }
.md-container--medium { max-width: 1040px; }
.md-container--wide { max-width: 1440px; }
.md-container--full { max-width: none; }
.md-container--flush { padding-inline: 0; }

/* Vertical rhythm helper for page sections. */
.md-section {
  padding-block: var(--md-sys-spacing-12);
}

@media (min-width: 840px) {
  .md-section { padding-block: var(--md-sys-spacing-20); }
}


/* ==========================================================================
   16. LAYOUT — GRID
   M3 responsive grid: 4 columns compact, 8 columns medium, 12 columns
   expanded. Gutters follow the same breakpoints.
   ========================================================================== */

.md-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 600px) {
  .md-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 840px) {
  .md-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Row-gap-only override for dense lists. */
.md-grid--dense { gap: var(--md-sys-spacing-2); }
.md-grid--comfortable { gap: var(--md-sys-spacing-6); }

/* Flex row/stack helpers used constantly alongside the grid. */
.md-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--md-sys-spacing-2);
}

.md-row--wrap { flex-wrap: wrap; }
.md-row--between { justify-content: space-between; }
.md-row--center { justify-content: center; }
.md-row--end { justify-content: flex-end; }
.md-row--start { align-items: flex-start; }
.md-row--baseline { align-items: baseline; }
.md-row--stretch { align-items: stretch; }

.md-stack {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-4);
}

.md-spacer { flex: 1 1 auto; min-width: 0; }

/* --- Column spans -------------------------------------------------------
   .md-col-N is PROPORTIONAL and expressed in twelfths, so it reflows on its
   own: .md-col-12 is full width at every size, .md-col-6 is always a half,
   .md-col-3 always a quarter. Widths are scaled down to the 8- and 4-column
   grids at the medium and compact breakpoints.

     compact  (<600px, 4 cols)  span = ceil(N/3),  capped at 4
     medium   (>=600px, 8 cols) span = round(2N/3), capped at 8
     expanded (>=840px, 12 cols) span = N

   .md-col-md-N and .md-col-lg-N pin an exact span at the medium/expanded
   breakpoints and are declared last, so they always beat the proportional
   defaults at equal specificity.
   ---------------------------------------------------------------------- */

/* Proportional defaults — compact (4-column grid). */
.md-col-1 { grid-column: span 1 / span 1; }
.md-col-2 { grid-column: span 1 / span 1; }
.md-col-3 { grid-column: span 1 / span 1; }
.md-col-4 { grid-column: span 2 / span 2; }
.md-col-5 { grid-column: span 2 / span 2; }
.md-col-6 { grid-column: span 2 / span 2; }
.md-col-7 { grid-column: span 3 / span 3; }
.md-col-8 { grid-column: span 3 / span 3; }
.md-col-9 { grid-column: span 3 / span 3; }
.md-col-10 { grid-column: span 4 / span 4; }
.md-col-11 { grid-column: span 4 / span 4; }
.md-col-12 { grid-column: span 4 / span 4; }

.md-col-full { grid-column: 1 / -1; }

/* Proportional defaults — medium (8-column grid). */
@media (min-width: 600px) {
  .md-col-1 { grid-column: span 1 / span 1; }
  .md-col-2 { grid-column: span 1 / span 1; }
  .md-col-3 { grid-column: span 2 / span 2; }
  .md-col-4 { grid-column: span 3 / span 3; }
  .md-col-5 { grid-column: span 3 / span 3; }
  .md-col-6 { grid-column: span 4 / span 4; }
  .md-col-7 { grid-column: span 5 / span 5; }
  .md-col-8 { grid-column: span 5 / span 5; }
  .md-col-9 { grid-column: span 6 / span 6; }
  .md-col-10 { grid-column: span 7 / span 7; }
  .md-col-11 { grid-column: span 7 / span 7; }
  .md-col-12 { grid-column: span 8 / span 8; }
}

/* Proportional defaults — expanded (12-column grid). */
@media (min-width: 840px) {
  .md-col-1 { grid-column: span 1 / span 1; }
  .md-col-2 { grid-column: span 2 / span 2; }
  .md-col-3 { grid-column: span 3 / span 3; }
  .md-col-4 { grid-column: span 4 / span 4; }
  .md-col-5 { grid-column: span 5 / span 5; }
  .md-col-6 { grid-column: span 6 / span 6; }
  .md-col-7 { grid-column: span 7 / span 7; }
  .md-col-8 { grid-column: span 8 / span 8; }
  .md-col-9 { grid-column: span 9 / span 9; }
  .md-col-10 { grid-column: span 10 / span 10; }
  .md-col-11 { grid-column: span 11 / span 11; }
  .md-col-12 { grid-column: span 12 / span 12; }
}

/* Explicit per-breakpoint spans (declared after the defaults so they win). */
@media (min-width: 600px) {
  .md-col-md-1 { grid-column: span 1 / span 1; }
  .md-col-md-2 { grid-column: span 2 / span 2; }
  .md-col-md-3 { grid-column: span 3 / span 3; }
  .md-col-md-4 { grid-column: span 4 / span 4; }
  .md-col-md-5 { grid-column: span 5 / span 5; }
  .md-col-md-6 { grid-column: span 6 / span 6; }
  .md-col-md-7 { grid-column: span 7 / span 7; }
  .md-col-md-8 { grid-column: span 8 / span 8; }
  .md-col-md-9 { grid-column: span 8 / span 8; }
  .md-col-md-10 { grid-column: span 8 / span 8; }
  .md-col-md-11 { grid-column: span 8 / span 8; }
  .md-col-md-12 { grid-column: span 8 / span 8; }
  .md-col-md-full { grid-column: 1 / -1; }
}

@media (min-width: 840px) {
  .md-col-lg-1 { grid-column: span 1 / span 1; }
  .md-col-lg-2 { grid-column: span 2 / span 2; }
  .md-col-lg-3 { grid-column: span 3 / span 3; }
  .md-col-lg-4 { grid-column: span 4 / span 4; }
  .md-col-lg-5 { grid-column: span 5 / span 5; }
  .md-col-lg-6 { grid-column: span 6 / span 6; }
  .md-col-lg-7 { grid-column: span 7 / span 7; }
  .md-col-lg-8 { grid-column: span 8 / span 8; }
  .md-col-lg-9 { grid-column: span 9 / span 9; }
  .md-col-lg-10 { grid-column: span 10 / span 10; }
  .md-col-lg-11 { grid-column: span 11 / span 11; }
  .md-col-lg-12 { grid-column: span 12 / span 12; }
  .md-col-lg-full { grid-column: 1 / -1; }
}

/* ==========================================================================
   17. SPACING UTILITIES
   4px baseline grid. The numeric suffix is the multiple of 4px, so
   .md-p-4 == 16px, .md-mb-6 == 24px. Directional classes use logical
   properties (inline/block) so RTL works without extra rules.
   ========================================================================== */

/* --- Margin ------------------------------------------------------------ */

.md-m-0 { margin: var(--md-sys-spacing-0); }
.md-m-1 { margin: var(--md-sys-spacing-1); }
.md-m-2 { margin: var(--md-sys-spacing-2); }
.md-m-3 { margin: var(--md-sys-spacing-3); }
.md-m-4 { margin: var(--md-sys-spacing-4); }
.md-m-5 { margin: var(--md-sys-spacing-5); }
.md-m-6 { margin: var(--md-sys-spacing-6); }
.md-m-7 { margin: var(--md-sys-spacing-7); }
.md-m-8 { margin: var(--md-sys-spacing-8); }
.md-m-9 { margin: var(--md-sys-spacing-9); }
.md-m-10 { margin: var(--md-sys-spacing-10); }
.md-m-11 { margin: var(--md-sys-spacing-11); }
.md-m-12 { margin: var(--md-sys-spacing-12); }
.md-m-14 { margin: var(--md-sys-spacing-14); }
.md-m-16 { margin: var(--md-sys-spacing-16); }
.md-m-20 { margin: var(--md-sys-spacing-20); }
.md-m-24 { margin: var(--md-sys-spacing-24); }

.md-mt-0 { margin-block-start: var(--md-sys-spacing-0); }
.md-mt-1 { margin-block-start: var(--md-sys-spacing-1); }
.md-mt-2 { margin-block-start: var(--md-sys-spacing-2); }
.md-mt-3 { margin-block-start: var(--md-sys-spacing-3); }
.md-mt-4 { margin-block-start: var(--md-sys-spacing-4); }
.md-mt-5 { margin-block-start: var(--md-sys-spacing-5); }
.md-mt-6 { margin-block-start: var(--md-sys-spacing-6); }
.md-mt-7 { margin-block-start: var(--md-sys-spacing-7); }
.md-mt-8 { margin-block-start: var(--md-sys-spacing-8); }
.md-mt-9 { margin-block-start: var(--md-sys-spacing-9); }
.md-mt-10 { margin-block-start: var(--md-sys-spacing-10); }
.md-mt-11 { margin-block-start: var(--md-sys-spacing-11); }
.md-mt-12 { margin-block-start: var(--md-sys-spacing-12); }
.md-mt-14 { margin-block-start: var(--md-sys-spacing-14); }
.md-mt-16 { margin-block-start: var(--md-sys-spacing-16); }
.md-mt-20 { margin-block-start: var(--md-sys-spacing-20); }
.md-mt-24 { margin-block-start: var(--md-sys-spacing-24); }

.md-mb-0 { margin-block-end: var(--md-sys-spacing-0); }
.md-mb-1 { margin-block-end: var(--md-sys-spacing-1); }
.md-mb-2 { margin-block-end: var(--md-sys-spacing-2); }
.md-mb-3 { margin-block-end: var(--md-sys-spacing-3); }
.md-mb-4 { margin-block-end: var(--md-sys-spacing-4); }
.md-mb-5 { margin-block-end: var(--md-sys-spacing-5); }
.md-mb-6 { margin-block-end: var(--md-sys-spacing-6); }
.md-mb-7 { margin-block-end: var(--md-sys-spacing-7); }
.md-mb-8 { margin-block-end: var(--md-sys-spacing-8); }
.md-mb-9 { margin-block-end: var(--md-sys-spacing-9); }
.md-mb-10 { margin-block-end: var(--md-sys-spacing-10); }
.md-mb-11 { margin-block-end: var(--md-sys-spacing-11); }
.md-mb-12 { margin-block-end: var(--md-sys-spacing-12); }
.md-mb-14 { margin-block-end: var(--md-sys-spacing-14); }
.md-mb-16 { margin-block-end: var(--md-sys-spacing-16); }
.md-mb-20 { margin-block-end: var(--md-sys-spacing-20); }
.md-mb-24 { margin-block-end: var(--md-sys-spacing-24); }

.md-ms-0 { margin-inline-start: var(--md-sys-spacing-0); }
.md-ms-1 { margin-inline-start: var(--md-sys-spacing-1); }
.md-ms-2 { margin-inline-start: var(--md-sys-spacing-2); }
.md-ms-3 { margin-inline-start: var(--md-sys-spacing-3); }
.md-ms-4 { margin-inline-start: var(--md-sys-spacing-4); }
.md-ms-5 { margin-inline-start: var(--md-sys-spacing-5); }
.md-ms-6 { margin-inline-start: var(--md-sys-spacing-6); }
.md-ms-7 { margin-inline-start: var(--md-sys-spacing-7); }
.md-ms-8 { margin-inline-start: var(--md-sys-spacing-8); }
.md-ms-9 { margin-inline-start: var(--md-sys-spacing-9); }
.md-ms-10 { margin-inline-start: var(--md-sys-spacing-10); }
.md-ms-11 { margin-inline-start: var(--md-sys-spacing-11); }
.md-ms-12 { margin-inline-start: var(--md-sys-spacing-12); }
.md-ms-14 { margin-inline-start: var(--md-sys-spacing-14); }
.md-ms-16 { margin-inline-start: var(--md-sys-spacing-16); }
.md-ms-20 { margin-inline-start: var(--md-sys-spacing-20); }
.md-ms-24 { margin-inline-start: var(--md-sys-spacing-24); }

.md-me-0 { margin-inline-end: var(--md-sys-spacing-0); }
.md-me-1 { margin-inline-end: var(--md-sys-spacing-1); }
.md-me-2 { margin-inline-end: var(--md-sys-spacing-2); }
.md-me-3 { margin-inline-end: var(--md-sys-spacing-3); }
.md-me-4 { margin-inline-end: var(--md-sys-spacing-4); }
.md-me-5 { margin-inline-end: var(--md-sys-spacing-5); }
.md-me-6 { margin-inline-end: var(--md-sys-spacing-6); }
.md-me-7 { margin-inline-end: var(--md-sys-spacing-7); }
.md-me-8 { margin-inline-end: var(--md-sys-spacing-8); }
.md-me-9 { margin-inline-end: var(--md-sys-spacing-9); }
.md-me-10 { margin-inline-end: var(--md-sys-spacing-10); }
.md-me-11 { margin-inline-end: var(--md-sys-spacing-11); }
.md-me-12 { margin-inline-end: var(--md-sys-spacing-12); }
.md-me-14 { margin-inline-end: var(--md-sys-spacing-14); }
.md-me-16 { margin-inline-end: var(--md-sys-spacing-16); }
.md-me-20 { margin-inline-end: var(--md-sys-spacing-20); }
.md-me-24 { margin-inline-end: var(--md-sys-spacing-24); }

.md-mx-0 { margin-inline: var(--md-sys-spacing-0); }
.md-mx-1 { margin-inline: var(--md-sys-spacing-1); }
.md-mx-2 { margin-inline: var(--md-sys-spacing-2); }
.md-mx-3 { margin-inline: var(--md-sys-spacing-3); }
.md-mx-4 { margin-inline: var(--md-sys-spacing-4); }
.md-mx-5 { margin-inline: var(--md-sys-spacing-5); }
.md-mx-6 { margin-inline: var(--md-sys-spacing-6); }
.md-mx-7 { margin-inline: var(--md-sys-spacing-7); }
.md-mx-8 { margin-inline: var(--md-sys-spacing-8); }
.md-mx-9 { margin-inline: var(--md-sys-spacing-9); }
.md-mx-10 { margin-inline: var(--md-sys-spacing-10); }
.md-mx-11 { margin-inline: var(--md-sys-spacing-11); }
.md-mx-12 { margin-inline: var(--md-sys-spacing-12); }
.md-mx-14 { margin-inline: var(--md-sys-spacing-14); }
.md-mx-16 { margin-inline: var(--md-sys-spacing-16); }
.md-mx-20 { margin-inline: var(--md-sys-spacing-20); }
.md-mx-24 { margin-inline: var(--md-sys-spacing-24); }

.md-my-0 { margin-block: var(--md-sys-spacing-0); }
.md-my-1 { margin-block: var(--md-sys-spacing-1); }
.md-my-2 { margin-block: var(--md-sys-spacing-2); }
.md-my-3 { margin-block: var(--md-sys-spacing-3); }
.md-my-4 { margin-block: var(--md-sys-spacing-4); }
.md-my-5 { margin-block: var(--md-sys-spacing-5); }
.md-my-6 { margin-block: var(--md-sys-spacing-6); }
.md-my-7 { margin-block: var(--md-sys-spacing-7); }
.md-my-8 { margin-block: var(--md-sys-spacing-8); }
.md-my-9 { margin-block: var(--md-sys-spacing-9); }
.md-my-10 { margin-block: var(--md-sys-spacing-10); }
.md-my-11 { margin-block: var(--md-sys-spacing-11); }
.md-my-12 { margin-block: var(--md-sys-spacing-12); }
.md-my-14 { margin-block: var(--md-sys-spacing-14); }
.md-my-16 { margin-block: var(--md-sys-spacing-16); }
.md-my-20 { margin-block: var(--md-sys-spacing-20); }
.md-my-24 { margin-block: var(--md-sys-spacing-24); }

.md-m-auto { margin: auto; }
.md-mx-auto { margin-inline: auto; }
.md-my-auto { margin-block: auto; }

/* --- Padding ----------------------------------------------------------- */

.md-p-0 { padding: var(--md-sys-spacing-0); }
.md-p-1 { padding: var(--md-sys-spacing-1); }
.md-p-2 { padding: var(--md-sys-spacing-2); }
.md-p-3 { padding: var(--md-sys-spacing-3); }
.md-p-4 { padding: var(--md-sys-spacing-4); }
.md-p-5 { padding: var(--md-sys-spacing-5); }
.md-p-6 { padding: var(--md-sys-spacing-6); }
.md-p-7 { padding: var(--md-sys-spacing-7); }
.md-p-8 { padding: var(--md-sys-spacing-8); }
.md-p-9 { padding: var(--md-sys-spacing-9); }
.md-p-10 { padding: var(--md-sys-spacing-10); }
.md-p-11 { padding: var(--md-sys-spacing-11); }
.md-p-12 { padding: var(--md-sys-spacing-12); }
.md-p-14 { padding: var(--md-sys-spacing-14); }
.md-p-16 { padding: var(--md-sys-spacing-16); }
.md-p-20 { padding: var(--md-sys-spacing-20); }
.md-p-24 { padding: var(--md-sys-spacing-24); }

.md-pt-0 { padding-block-start: var(--md-sys-spacing-0); }
.md-pt-1 { padding-block-start: var(--md-sys-spacing-1); }
.md-pt-2 { padding-block-start: var(--md-sys-spacing-2); }
.md-pt-3 { padding-block-start: var(--md-sys-spacing-3); }
.md-pt-4 { padding-block-start: var(--md-sys-spacing-4); }
.md-pt-5 { padding-block-start: var(--md-sys-spacing-5); }
.md-pt-6 { padding-block-start: var(--md-sys-spacing-6); }
.md-pt-7 { padding-block-start: var(--md-sys-spacing-7); }
.md-pt-8 { padding-block-start: var(--md-sys-spacing-8); }
.md-pt-9 { padding-block-start: var(--md-sys-spacing-9); }
.md-pt-10 { padding-block-start: var(--md-sys-spacing-10); }
.md-pt-11 { padding-block-start: var(--md-sys-spacing-11); }
.md-pt-12 { padding-block-start: var(--md-sys-spacing-12); }
.md-pt-14 { padding-block-start: var(--md-sys-spacing-14); }
.md-pt-16 { padding-block-start: var(--md-sys-spacing-16); }
.md-pt-20 { padding-block-start: var(--md-sys-spacing-20); }
.md-pt-24 { padding-block-start: var(--md-sys-spacing-24); }

.md-pb-0 { padding-block-end: var(--md-sys-spacing-0); }
.md-pb-1 { padding-block-end: var(--md-sys-spacing-1); }
.md-pb-2 { padding-block-end: var(--md-sys-spacing-2); }
.md-pb-3 { padding-block-end: var(--md-sys-spacing-3); }
.md-pb-4 { padding-block-end: var(--md-sys-spacing-4); }
.md-pb-5 { padding-block-end: var(--md-sys-spacing-5); }
.md-pb-6 { padding-block-end: var(--md-sys-spacing-6); }
.md-pb-7 { padding-block-end: var(--md-sys-spacing-7); }
.md-pb-8 { padding-block-end: var(--md-sys-spacing-8); }
.md-pb-9 { padding-block-end: var(--md-sys-spacing-9); }
.md-pb-10 { padding-block-end: var(--md-sys-spacing-10); }
.md-pb-11 { padding-block-end: var(--md-sys-spacing-11); }
.md-pb-12 { padding-block-end: var(--md-sys-spacing-12); }
.md-pb-14 { padding-block-end: var(--md-sys-spacing-14); }
.md-pb-16 { padding-block-end: var(--md-sys-spacing-16); }
.md-pb-20 { padding-block-end: var(--md-sys-spacing-20); }
.md-pb-24 { padding-block-end: var(--md-sys-spacing-24); }

.md-ps-0 { padding-inline-start: var(--md-sys-spacing-0); }
.md-ps-1 { padding-inline-start: var(--md-sys-spacing-1); }
.md-ps-2 { padding-inline-start: var(--md-sys-spacing-2); }
.md-ps-3 { padding-inline-start: var(--md-sys-spacing-3); }
.md-ps-4 { padding-inline-start: var(--md-sys-spacing-4); }
.md-ps-5 { padding-inline-start: var(--md-sys-spacing-5); }
.md-ps-6 { padding-inline-start: var(--md-sys-spacing-6); }
.md-ps-7 { padding-inline-start: var(--md-sys-spacing-7); }
.md-ps-8 { padding-inline-start: var(--md-sys-spacing-8); }
.md-ps-9 { padding-inline-start: var(--md-sys-spacing-9); }
.md-ps-10 { padding-inline-start: var(--md-sys-spacing-10); }
.md-ps-11 { padding-inline-start: var(--md-sys-spacing-11); }
.md-ps-12 { padding-inline-start: var(--md-sys-spacing-12); }
.md-ps-14 { padding-inline-start: var(--md-sys-spacing-14); }
.md-ps-16 { padding-inline-start: var(--md-sys-spacing-16); }
.md-ps-20 { padding-inline-start: var(--md-sys-spacing-20); }
.md-ps-24 { padding-inline-start: var(--md-sys-spacing-24); }

.md-pe-0 { padding-inline-end: var(--md-sys-spacing-0); }
.md-pe-1 { padding-inline-end: var(--md-sys-spacing-1); }
.md-pe-2 { padding-inline-end: var(--md-sys-spacing-2); }
.md-pe-3 { padding-inline-end: var(--md-sys-spacing-3); }
.md-pe-4 { padding-inline-end: var(--md-sys-spacing-4); }
.md-pe-5 { padding-inline-end: var(--md-sys-spacing-5); }
.md-pe-6 { padding-inline-end: var(--md-sys-spacing-6); }
.md-pe-7 { padding-inline-end: var(--md-sys-spacing-7); }
.md-pe-8 { padding-inline-end: var(--md-sys-spacing-8); }
.md-pe-9 { padding-inline-end: var(--md-sys-spacing-9); }
.md-pe-10 { padding-inline-end: var(--md-sys-spacing-10); }
.md-pe-11 { padding-inline-end: var(--md-sys-spacing-11); }
.md-pe-12 { padding-inline-end: var(--md-sys-spacing-12); }
.md-pe-14 { padding-inline-end: var(--md-sys-spacing-14); }
.md-pe-16 { padding-inline-end: var(--md-sys-spacing-16); }
.md-pe-20 { padding-inline-end: var(--md-sys-spacing-20); }
.md-pe-24 { padding-inline-end: var(--md-sys-spacing-24); }

.md-px-0 { padding-inline: var(--md-sys-spacing-0); }
.md-px-1 { padding-inline: var(--md-sys-spacing-1); }
.md-px-2 { padding-inline: var(--md-sys-spacing-2); }
.md-px-3 { padding-inline: var(--md-sys-spacing-3); }
.md-px-4 { padding-inline: var(--md-sys-spacing-4); }
.md-px-5 { padding-inline: var(--md-sys-spacing-5); }
.md-px-6 { padding-inline: var(--md-sys-spacing-6); }
.md-px-7 { padding-inline: var(--md-sys-spacing-7); }
.md-px-8 { padding-inline: var(--md-sys-spacing-8); }
.md-px-9 { padding-inline: var(--md-sys-spacing-9); }
.md-px-10 { padding-inline: var(--md-sys-spacing-10); }
.md-px-11 { padding-inline: var(--md-sys-spacing-11); }
.md-px-12 { padding-inline: var(--md-sys-spacing-12); }
.md-px-14 { padding-inline: var(--md-sys-spacing-14); }
.md-px-16 { padding-inline: var(--md-sys-spacing-16); }
.md-px-20 { padding-inline: var(--md-sys-spacing-20); }
.md-px-24 { padding-inline: var(--md-sys-spacing-24); }

.md-py-0 { padding-block: var(--md-sys-spacing-0); }
.md-py-1 { padding-block: var(--md-sys-spacing-1); }
.md-py-2 { padding-block: var(--md-sys-spacing-2); }
.md-py-3 { padding-block: var(--md-sys-spacing-3); }
.md-py-4 { padding-block: var(--md-sys-spacing-4); }
.md-py-5 { padding-block: var(--md-sys-spacing-5); }
.md-py-6 { padding-block: var(--md-sys-spacing-6); }
.md-py-7 { padding-block: var(--md-sys-spacing-7); }
.md-py-8 { padding-block: var(--md-sys-spacing-8); }
.md-py-9 { padding-block: var(--md-sys-spacing-9); }
.md-py-10 { padding-block: var(--md-sys-spacing-10); }
.md-py-11 { padding-block: var(--md-sys-spacing-11); }
.md-py-12 { padding-block: var(--md-sys-spacing-12); }
.md-py-14 { padding-block: var(--md-sys-spacing-14); }
.md-py-16 { padding-block: var(--md-sys-spacing-16); }
.md-py-20 { padding-block: var(--md-sys-spacing-20); }
.md-py-24 { padding-block: var(--md-sys-spacing-24); }

/* --- Gap --------------------------------------------------------------- */

.md-gap-0 { gap: var(--md-sys-spacing-0); }
.md-gap-1 { gap: var(--md-sys-spacing-1); }
.md-gap-2 { gap: var(--md-sys-spacing-2); }
.md-gap-3 { gap: var(--md-sys-spacing-3); }
.md-gap-4 { gap: var(--md-sys-spacing-4); }
.md-gap-5 { gap: var(--md-sys-spacing-5); }
.md-gap-6 { gap: var(--md-sys-spacing-6); }
.md-gap-7 { gap: var(--md-sys-spacing-7); }
.md-gap-8 { gap: var(--md-sys-spacing-8); }
.md-gap-9 { gap: var(--md-sys-spacing-9); }
.md-gap-10 { gap: var(--md-sys-spacing-10); }
.md-gap-11 { gap: var(--md-sys-spacing-11); }
.md-gap-12 { gap: var(--md-sys-spacing-12); }
.md-gap-14 { gap: var(--md-sys-spacing-14); }
.md-gap-16 { gap: var(--md-sys-spacing-16); }
.md-gap-20 { gap: var(--md-sys-spacing-20); }
.md-gap-24 { gap: var(--md-sys-spacing-24); }

.md-gap-x-0 { column-gap: var(--md-sys-spacing-0); }
.md-gap-x-1 { column-gap: var(--md-sys-spacing-1); }
.md-gap-x-2 { column-gap: var(--md-sys-spacing-2); }
.md-gap-x-3 { column-gap: var(--md-sys-spacing-3); }
.md-gap-x-4 { column-gap: var(--md-sys-spacing-4); }
.md-gap-x-5 { column-gap: var(--md-sys-spacing-5); }
.md-gap-x-6 { column-gap: var(--md-sys-spacing-6); }
.md-gap-x-7 { column-gap: var(--md-sys-spacing-7); }
.md-gap-x-8 { column-gap: var(--md-sys-spacing-8); }
.md-gap-x-9 { column-gap: var(--md-sys-spacing-9); }
.md-gap-x-10 { column-gap: var(--md-sys-spacing-10); }
.md-gap-x-11 { column-gap: var(--md-sys-spacing-11); }
.md-gap-x-12 { column-gap: var(--md-sys-spacing-12); }
.md-gap-x-14 { column-gap: var(--md-sys-spacing-14); }
.md-gap-x-16 { column-gap: var(--md-sys-spacing-16); }
.md-gap-x-20 { column-gap: var(--md-sys-spacing-20); }
.md-gap-x-24 { column-gap: var(--md-sys-spacing-24); }

.md-gap-y-0 { row-gap: var(--md-sys-spacing-0); }
.md-gap-y-1 { row-gap: var(--md-sys-spacing-1); }
.md-gap-y-2 { row-gap: var(--md-sys-spacing-2); }
.md-gap-y-3 { row-gap: var(--md-sys-spacing-3); }
.md-gap-y-4 { row-gap: var(--md-sys-spacing-4); }
.md-gap-y-5 { row-gap: var(--md-sys-spacing-5); }
.md-gap-y-6 { row-gap: var(--md-sys-spacing-6); }
.md-gap-y-7 { row-gap: var(--md-sys-spacing-7); }
.md-gap-y-8 { row-gap: var(--md-sys-spacing-8); }
.md-gap-y-9 { row-gap: var(--md-sys-spacing-9); }
.md-gap-y-10 { row-gap: var(--md-sys-spacing-10); }
.md-gap-y-11 { row-gap: var(--md-sys-spacing-11); }
.md-gap-y-12 { row-gap: var(--md-sys-spacing-12); }
.md-gap-y-14 { row-gap: var(--md-sys-spacing-14); }
.md-gap-y-16 { row-gap: var(--md-sys-spacing-16); }
.md-gap-y-20 { row-gap: var(--md-sys-spacing-20); }
.md-gap-y-24 { row-gap: var(--md-sys-spacing-24); }


/* ==========================================================================
   18. SURFACE / ELEVATION / SHAPE / A11Y UTILITIES
   Small, composable helpers that finish the foundation. Components built on
   top of this file should only ever need tokens plus these primitives.
   ========================================================================== */

/* --- Elevation ---------------------------------------------------------- */

.md-elevation-0 { box-shadow: var(--md-sys-elevation-level0); }
.md-elevation-1 { box-shadow: var(--md-sys-elevation-level1); }
.md-elevation-2 { box-shadow: var(--md-sys-elevation-level2); }
.md-elevation-3 { box-shadow: var(--md-sys-elevation-level3); }
.md-elevation-4 { box-shadow: var(--md-sys-elevation-level4); }
.md-elevation-5 { box-shadow: var(--md-sys-elevation-level5); }

.md-elevation-transition {
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

/* --- Surfaces ----------------------------------------------------------- */

.md-surface {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.md-surface-dim {
  background-color: var(--md-sys-color-surface-dim);
  color: var(--md-sys-color-on-surface);
}

.md-surface-bright {
  background-color: var(--md-sys-color-surface-bright);
  color: var(--md-sys-color-on-surface);
}

.md-surface-container-lowest {
  background-color: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}

.md-surface-container-low {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

.md-surface-container {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

.md-surface-container-high {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.md-surface-container-highest {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

.md-surface-variant {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.md-surface-inverse {
  background-color: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
}

/* --- Tonal elevation (progressive enhancement) --------------------------
   FALLBACK FIRST: the surface-container ramp already encodes M3 tonal
   elevation, so these classes are fully functional with no color-mix()
   support at all. Where color-mix() IS supported we refine them into a true
   surface-tint blend, which tracks a re-themed --md-sys-color-surface-tint.
   ---------------------------------------------------------------------- */

.md-surface-tint-1 { background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); }
.md-surface-tint-2 { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
.md-surface-tint-3 { background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.md-surface-tint-4 { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.md-surface-tint-5 { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }

@supports (background-color: color-mix(in srgb, red 5%, white)) {
  .md-surface-tint-1 { background-color: color-mix(in srgb, var(--md-sys-color-surface-tint) 5%, var(--md-sys-color-surface)); }
  .md-surface-tint-2 { background-color: color-mix(in srgb, var(--md-sys-color-surface-tint) 8%, var(--md-sys-color-surface)); }
  .md-surface-tint-3 { background-color: color-mix(in srgb, var(--md-sys-color-surface-tint) 11%, var(--md-sys-color-surface)); }
  .md-surface-tint-4 { background-color: color-mix(in srgb, var(--md-sys-color-surface-tint) 12%, var(--md-sys-color-surface)); }
  .md-surface-tint-5 { background-color: color-mix(in srgb, var(--md-sys-color-surface-tint) 14%, var(--md-sys-color-surface)); }
}

/* --- Container colour pairs -------------------------------------------- */

.md-primary { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.md-primary-container { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.md-secondary { background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); }
.md-secondary-container { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.md-tertiary { background-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
.md-tertiary-container { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.md-error { background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.md-error-container { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/* --- Text colour -------------------------------------------------------- */

.md-text-primary { color: var(--md-sys-color-primary); }
.md-text-secondary { color: var(--md-sys-color-secondary); }
.md-text-tertiary { color: var(--md-sys-color-tertiary); }
.md-text-error { color: var(--md-sys-color-error); }
.md-text-on-surface { color: var(--md-sys-color-on-surface); }
.md-text-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }

/* --- Outline ------------------------------------------------------------ */

.md-outlined { border: 1px solid var(--md-sys-color-outline); }
.md-outlined-variant { border: 1px solid var(--md-sys-color-outline-variant); }

.md-divider {
  border: 0;
  border-block-start: 1px solid var(--md-sys-color-outline-variant);
  margin: 0;
  block-size: 0;
}

.md-divider--inset { margin-inline-start: var(--md-sys-spacing-4); }

/* --- Shape -------------------------------------------------------------- */

.md-shape-none { border-radius: var(--md-sys-shape-corner-none); }
.md-shape-extra-small { border-radius: var(--md-sys-shape-corner-extra-small); }
.md-shape-small { border-radius: var(--md-sys-shape-corner-small); }
.md-shape-medium { border-radius: var(--md-sys-shape-corner-medium); }
.md-shape-large { border-radius: var(--md-sys-shape-corner-large); }
.md-shape-extra-large { border-radius: var(--md-sys-shape-corner-extra-large); }
.md-shape-full { border-radius: var(--md-sys-shape-corner-full); }

/* --- Scrim -------------------------------------------------------------- */

.md-scrim {
  position: fixed;
  inset: 0;
  background-color: rgba(var(--md-sys-color-scrim-rgb, 0, 0, 0), .32);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    visibility var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.md-scrim[data-open='true'],
.md-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Accessibility ------------------------------------------------------ */

/* Visually hidden but exposed to assistive tech. */
.md-visually-hidden,
.md-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link that reveals itself on keyboard focus. */
.md-skip-link {
  position: absolute;
  inset-inline-start: var(--md-sys-spacing-4);
  inset-block-start: var(--md-sys-spacing-4);
  z-index: 999;
  transform: translateY(-200%);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-full);
  text-decoration: none;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate);
}

.md-skip-link:focus-visible {
  transform: translateY(0);
}

/* Guarantee the M3 minimum interactive target without changing visual size. */
.md-touch-target {
  position: relative;
}

.md-touch-target::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: var(--md-sys-min-touch-target);
  min-height: var(--md-sys-min-touch-target);
  width: 100%;
  height: 100%;
}

/* --- Display / overflow helpers ---------------------------------------- */

.md-block { display: block; }
.md-inline-block { display: inline-block; }
.md-flex { display: flex; }
.md-inline-flex { display: inline-flex; }
.md-grid-display { display: grid; }
.md-hidden { display: none; }

.md-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-clamp-2,
.md-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.md-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.md-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Wide content (tables, code, diagrams) scrolls inside its own box so the
   page body never scrolls horizontally. */
.md-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* --- Responsive visibility (M3 window size classes) --------------------- */

.md-compact-only { display: none; }
.md-medium-up { display: none; }
.md-expanded-up { display: none; }

@media (max-width: 599.98px) {
  .md-compact-only { display: revert; }
  .md-hide-compact { display: none !important; }
}

@media (min-width: 600px) {
  .md-medium-up { display: revert; }
}

@media (min-width: 840px) {
  .md-expanded-up { display: revert; }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  :root {
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #000000;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .md-elevation-1,
  .md-elevation-2,
  .md-elevation-3,
  .md-elevation-4,
  .md-elevation-5 {
    box-shadow: none;
    border: 1px solid #cccccc;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 11px;
  }
}