/* ================================================================
   xFact Massachusetts Design System (MDS) Stylesheet
   ================================================================

   Styled after the official Massachusetts Design System (Mass.gov)
   https://www.mass.gov/info-details/components

   This file consolidates all MDS-inspired component styles into
   a single stylesheet for use in xFact applications.

   Table of Contents:
   ------------------------------------------------------------------
   0.  Fonts - Self-hosted Noto Sans (latin + latin-ext)
   1.  Base - Colors, Typography, Spacing, Utilities
   2.  Badge
   3.  Breadcrumbs
   4.  Button
   5.  Button Group
   6.  Callout Link
   7.  Card Interactive
   8.  Card Shell
   9.  Card Static
   10. Checkbox
   11. Chip
   12. Container Button Group
   13. Date Input
   14. Decorative Link
   15. Details Toggle
   16. File Upload
   17. Footer
   18. Form Intro
   19. Icon Button
   20. Inline Link
   21. Inline Message
   22. Input Group
   23. Lists
   24. Loader
   25. Modal
   26. Modal Shell
   27. Pagination
   28. Password Input
   29. Phone Input
   30. Popover
   31. Popup Menu
   32. Radio Button
   33. Scrollbar
   34. Site Header
   35. Sitewide Alert
   36. State Banner
   37. Step Indicator
   38. Switch
   39. Tab
   40. Text Area
   41. Text Input
   42. Tooltip
   43. Utility Navigation Banner
   
   CUSTOM COMPONENTS (not part of the official MDS):
   44. Data Table (xFact Custom Component)
   45. Navigation Bar (xFact Custom Component)
   46. Page Layouts (xFact Custom Component)
   47. Side Navigation (xFact Custom Component)
   48. Site Header Sub-name (xFact Custom Component)
   ================================================================ */


/* ================================================================
   Section 0: Fonts - Self-hosted Noto Sans (latin + latin-ext)
   ================================================================
   Variable-font woff2 files served locally - no external network
   request on page load. font-display: block prevents the flash-of-
   unstyled-text that font-display: swap causes during navigation.
   ================================================================ */

/* latin-ext - accented characters, extended Latin alphabet */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: block;
  src: url('../fonts/noto-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin - standard ASCII + common punctuation and symbols */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: block;
  src: url('../fonts/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ================================================================
   Section 1: Base - Colors, Typography, Spacing, Utilities
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Base CSS
   Colors, Typography, Spacing, and Utility Variables
   ============================================================ */

/* --- Google Fonts Import --- */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap'); */

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
  /* --- Brand Colors: Bay Blue (Primary) --- */
  --color-bay-blue:            #14558F;
  --color-bay-blue-light:      #D0DDE9;
  --color-bay-blue-hover:      #4377A5;
  --color-bay-blue-active:     #104472;
  --color-bay-blue-darker:     #0A2B48;
  --color-bay-blue-disabled:   #F0F0F0;

  /* --- Semantic Theme Aliases (Primary = Bay Blue) ---
     Change --color-primary here to switch the app theme.
     All components reference --color-primary-*, never the
     raw token directly. --- */
  --color-primary:          var(--color-bay-blue);
  --color-primary-light:    var(--color-bay-blue-light);
  --color-primary-hover:    var(--color-bay-blue-hover);
  --color-primary-active:   var(--color-bay-blue-active);
  --color-primary-darker:   var(--color-bay-blue-darker);
  --color-primary-disabled: var(--color-bay-blue-disabled);

  /* --- Primary scale additions (intermediate shades for components) --- */
  --color-primary-border: #B8CCDB;
  --color-primary-tint:   #A1BBD2;
  --color-primary-deep:   #0E3D5F;

  /* --- Brand Colors: Berkshires Green (Accent) --- */
  --color-berkshires-green:          #388557;
  --color-berkshires-green-mid:      #2D6A46;
  --color-berkshires-green-hover:    #32784E;
  --color-berkshires-green-active:   #275D3D;
  --color-berkshires-green-darker:   #1C432C;
  --color-berkshires-green-disabled: #F0F0F0;

  /* --- Semantic Theme Aliases (Accent = Berkshires Green) ---
     Change --color-accent here to switch the accent color. --- */
  --color-accent:          var(--color-berkshires-green);
  --color-accent-mid:      var(--color-berkshires-green-mid);
  --color-accent-hover:    var(--color-berkshires-green-hover);
  --color-accent-active:   var(--color-berkshires-green-active);
  --color-accent-darker:   var(--color-berkshires-green-darker);
  --color-accent-disabled: var(--color-berkshires-green-disabled);

  /* --- Full MDS Primitive Scales (100–1300) ---
     The aliases above (--color-bay-blue, --color-bay-blue-light, etc.) only expose a
     handful of curated shades. These add every canonical step (see the real MDS
     primitives.css) so a new component always has a token to reach for instead of a
     raw hex value. --- */
  --color-bay-blue-100:  #E8EEF4;
  --color-bay-blue-200:  #D0DDE9;
  --color-bay-blue-300:  #B9CCDD;
  --color-bay-blue-400:  #A1BBD2;
  --color-bay-blue-500:  #8AAAC7;
  --color-bay-blue-600:  #7299BC;
  --color-bay-blue-700:  #5B88B1;
  --color-bay-blue-800:  #4377A5;
  --color-bay-blue-900:  #2C669A;
  --color-bay-blue-1000: #14558F;
  --color-bay-blue-1100: #104472;
  --color-bay-blue-1200: #0E3C64;
  --color-bay-blue-1300: #0A2B48;

  --color-berkshires-green-100:  #EBF3EE;
  --color-berkshires-green-200:  #D7E7DD;
  --color-berkshires-green-300:  #C3DACD;
  --color-berkshires-green-400:  #AFCEBC;
  --color-berkshires-green-500:  #9AC1A9;
  --color-berkshires-green-600:  #80B294;
  --color-berkshires-green-700:  #67A27F;
  --color-berkshires-green-800:  #388557;
  --color-berkshires-green-900:  #32784E;
  --color-berkshires-green-1000: #2D6A46;
  --color-berkshires-green-1100: #275D3D;
  --color-berkshires-green-1200: #225034;
  --color-berkshires-green-1300: #1C432C;

  --color-duckling-yellow-100:  #FEF9E8;
  --color-duckling-yellow-200:  #FDF3D1;
  --color-duckling-yellow-300:  #FCEEBB;
  --color-duckling-yellow-400:  #FBE8A4;
  --color-duckling-yellow-500:  #FBE28D;
  --color-duckling-yellow-600:  #FADC76;
  --color-duckling-yellow-700:  #F8D149;
  --color-duckling-yellow-800:  #F6C51B;
  --color-duckling-yellow-900:  #DDB118;
  --color-duckling-yellow-1000: #C59E16;
  --color-duckling-yellow-1100: #AC8A13;
  --color-duckling-yellow-1200: #947610;
  --color-duckling-yellow-1300: #7B630E;

  --color-independence-cranberry-100:  #F0E7E8;
  --color-independence-cranberry-200:  #E1CED2;
  --color-independence-cranberry-300:  #D2B6BB;
  --color-independence-cranberry-400:  #C39DA5;
  --color-independence-cranberry-500:  #B4858E;
  --color-independence-cranberry-600:  #955461;
  --color-independence-cranberry-700:  #863B4A;
  --color-independence-cranberry-800:  #772334;
  --color-independence-cranberry-900:  #680A1D;
  --color-independence-cranberry-1000: #5E091A;
  --color-independence-cranberry-1100: #530817;
  --color-independence-cranberry-1200: #490714;
  --color-independence-cranberry-1300: #34050F;

  /* --- Full MDS Utility Scales (status colors, canonical steps only -
     MDS doesn't define every 100-step for these, just the ones below) --- */
  --color-danger-red-100:  #FEF1F1;
  --color-danger-red-300:  #F99F9F;
  --color-danger-red-600:  #CD0D0D;
  --color-danger-red-900:  #900909;
  --color-danger-red-1300: #480505;

  --color-warning-yellow-100:  #FFF9EB;
  --color-warning-yellow-300:  #FCDF9C;
  --color-warning-yellow-600:  #F6B622;
  --color-warning-yellow-900:  #BF8808;
  --color-warning-yellow-1300: #7B5705;

  --color-success-green-100:  #EAFBEF;
  --color-success-green-300:  #81E4A2;
  --color-success-green-600:  #24A850;
  --color-success-green-900:  #187236;
  --color-success-green-1300: #0B3218;

  --color-focus-blue-300: #B2DBFF;
  --color-focus-blue-600: #0088FF;

  /* --- Full MDS Neutral Gray Scale (100–1300, canonical steps) ---
     Distinct from --color-gray-50..800 below, which is iCORI's own ramp and only
     coincidentally lines up with a couple of these steps. --- */
  --color-mds-gray-100:  #F7F7F7;
  --color-mds-gray-200:  #F0F0F0;
  --color-mds-gray-300:  #E6E6E6;
  --color-mds-gray-400:  #DCDCDC;
  --color-mds-gray-500:  #CCCCCC;
  --color-mds-gray-600:  #BABABA;
  --color-mds-gray-700:  #A8A8A8;
  --color-mds-gray-750:  #949494;
  --color-mds-gray-800:  #878787;
  --color-mds-gray-900:  #707070;
  --color-mds-gray-1000: #535353;
  --color-mds-gray-1100: #3D3D3D;
  --color-mds-gray-1200: #2A2A2A;
  --color-mds-gray-1250: #212121;
  --color-mds-gray-1300: #141414;

  /* --- Brand Colors: Highlights & Accents --- */
  --color-duckling-yellow:       #F6C51B;
  --color-independence-cranberry:#680A1D;
  --color-granite-gray:          #535353;

  /* --- Utility / Status Colors --- */
  --color-success:   #24A850;
  --color-warning:   #F6B622;
  --color-danger:    #CD0D0D;

  /* --- Status Color State Variants --- */
  --color-danger-hover:   #B30B0B;
  --color-danger-active:  #9A0A0A;
  --color-danger-light:   #FDE8E8;
  --color-danger-border:  #F5B3B3;

  --color-warning-hover:  #E5A920;
  --color-warning-light:  #FEF9E8;
  --color-warning-border: #FADC76;
  --color-warning-text:   #856404;

  --color-success-bg:     #EBF5EF;
  --color-success-light:  #E9F7ED;
  --color-success-hover:  #D9EEE1;
  --color-success-border: #B8E5C4;
  --color-success-text:   #1A7340;

  --color-info-bg:        #EBF2F8;
  --color-info-bg-hover:  #D6E4F0;
  --color-info-border:    #C5D9EA;

  /* --- Feedback component tokens (badges, report panels) --- */
  --color-feedback-success:       var(--color-success-text);
  --color-feedback-success-light: var(--color-success-light);
  --color-feedback-caution-light: var(--color-warning-light);
  --color-feedback-caution-dark:  #7D5A00;

  /* --- Focus Colors --- */
  --color-focus-light: #0088FF;
  --color-focus-dark:  #B2DBFF;

  /* --- Neutral / Gray Scale --- */
  --color-white:      #FFFFFF;
  --color-gray-50:    #F8F9FA;
  --color-gray-100:   #F0F0F0;
  --color-gray-200:   #E0E0E0;
  --color-gray-300:   #CCCCCC;
  --color-gray-400:   #AAAAAA;
  --color-gray-500:   #535353;
  --color-gray-600:   #444444;
  --color-gray-700:   #333333;
  --color-gray-800:   #212529;
  --color-black:      #000000;

  /* --- MDS brand tokens (named after their Figma variables) ---
     These have no equivalent in the gray scale above, so they are defined
     rather than approximated. base/black is the Commonwealth brand black,
     distinct from --color-black (#000) used for body text elsewhere.
     background/section/brand-neutral/lowest is the shared page-chrome
     surface backing the site header and the footer. */
  --mds-base-black: #141414;
  --mds-background-section-brand-neutral-lowest: #F7F7F7;

  /* --- Text Colors --- */
  --color-text-primary:     #212529;
  --color-text-secondary:   #535353;
  --color-text-disabled:    #AAAAAA;
  --color-text-inverse:     #FFFFFF;
  --color-text-link:        #14558F;
  --color-text-link-hover:  #0A2B48;
  --color-text-danger:      #CD0D0D;
  --color-text-success:     #388557;
  --color-text-warning:     #856404;

  /* --- Background Colors --- */
  --color-bg-primary:   #FFFFFF;
  --color-bg-secondary: #F8F9FA;
  --color-bg-subtle:    #F7F7F7;
  --color-bg-tertiary:  #F0F0F0;
  --color-bg-dark:      #0A2B48;
  --color-bg-accent:    #14558F;

  /* --- Border Colors --- */
  --color-border:         #CCCCCC;
  --color-border-subtle:  #DCDCDC;
  --color-border-dark:    #535353;
  --color-border-focus:   #0088FF;
  --color-border-danger:  #CD0D0D;
  --color-border-success: #24A850;

  /* --- Typography --- */
  --font-family:        'Noto Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  /* --- Type Scale (4px unit system, rem-based) --- */
  --type-size-xs:    0.75rem;   /* 12px */
  --type-size-sm:    0.875rem;  /* 14px */
  --type-size-base:  1rem;      /* 16px */
  --type-size-md:    1.125rem;  /* 18px */
  --type-size-lg:    1.25rem;   /* 20px */
  --type-size-lg-plus: 1.375rem; /* 22px */
  --type-size-xl:    1.5rem;    /* 24px */
  --type-size-2xl:   1.75rem;   /* 28px */
  --type-size-3xl:   2rem;      /* 32px */
  --type-size-4xl:   2.5rem;    /* 40px */
  --type-size-5xl:   3rem;      /* 48px */
  --type-size-6xl:   4rem;      /* 64px */

  /* --- Heading Scale (2xs–2xl) ---
     Canonical MDS heading steps (see the real semantic-tokens.css: --mds-text-heading-*).
     Distinct from --type-size-* above - MDS gives headings their own sizes/line-heights,
     and several of them (22px, 26px, 36px, 44px) have no equivalent in the body scale. --- */
  --heading-size-2xs: 1.125rem;  /* 18px */
  --heading-size-xs:  1.375rem;  /* 22px */
  --heading-size-sm:  1.5rem;    /* 24px */
  --heading-size-md:  1.625rem;  /* 26px */
  --heading-size-lg:  2.25rem;   /* 36px */
  --heading-size-xl:  2.5rem;    /* 40px */
  --heading-size-2xl: 2.75rem;   /* 44px */

  /* --- Line Heights --- */
  --line-height-tight:   1.2;
  --line-height-snug:    1.4;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.8;

  /* --- Spacing (4px unit system) --- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-9:   2.25rem;  /* 36px */
  --space-10:  2.5rem;   /* 40px */
  --space-11:  2.75rem;   /* 44px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */

  /* --- Border Radius (aligned to MDS's real xs/sm/md scale; see semantic-tokens.css) --- */
  --radius-xs:   0.125rem;  /* 2px */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   1rem;      /* 16px */
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.15);
  /* MDS "Modal shadow" - dialogs and other full overlays. */
  --shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.14);
  /* MDS "Hover shadow, small" - the elevation MDS specifies for nav
     dropdown panels. Tighter and a shade darker than the modal shadow, so
     the panel edge stays legible over saturated page content instead of
     dissolving across a 24px blur. */
  --shadow-hover-sm: 0 4px 12px rgba(0, 0, 0, 0.16);

  /* --- Transitions --- */
  --transition-fast:   150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow:   350ms ease-in-out;

  /* --- Breakpoints (for reference - use in media queries) --- */
  /* Mobile: < 480px */
  /* Tablet: 480px - 768px */
  /* Desktop: 768px - 1024px */
  /* Wide: > 1024px */

  /* --- Z-index --- */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-modal-bg: 1040;
  --z-modal:    1050;
  --z-popover:  1060;
  --z-tooltip:  1070;
}

/* ============================================================
   Reset / Base Styles
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

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

body {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--type-size-5xl);  /* 48px */
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--type-size-4xl);  /* 40px */
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--type-size-3xl);  /* 32px */
}

h4 {
  font-size: var(--type-size-2xl);  /* 28px */
}

h5 {
  font-size: var(--type-size-xl);   /* 24px */
}

h6 {
  font-size: var(--type-size-lg);   /* 20px */
}

/* Responsive heading sizes */
@media (max-width: 768px) {
  h1 { font-size: var(--type-size-3xl); }
  h2 { font-size: var(--type-size-2xl); }
  h3 { font-size: var(--type-size-xl); }
  h4 { font-size: var(--type-size-lg); }
  h5 { font-size: var(--type-size-md); }
  h6 { font-size: var(--type-size-base); }
}

/* --- Heading Scale Utilities (2xs–2xl) ---
   Use these when a heading's visual size needs to be independent of its
   semantic level (e.g. an <h2> that should read at "Heading SM"), matching
   the 7 canonical MDS heading steps exactly - see Figma node-id 744-8706
   through 744-8720. */
.mds-heading-2xs,
.mds-heading-xs,
.mds-heading-sm,
.mds-heading-md,
.mds-heading-lg,
.mds-heading-xl,
.mds-heading-2xl {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}
.mds-heading-2xs { font-size: var(--heading-size-2xs); line-height: 1.4; }
.mds-heading-xs  { font-size: var(--heading-size-xs);  line-height: 1.3; }
.mds-heading-sm  { font-size: var(--heading-size-sm);  line-height: 1.3; }
.mds-heading-md  { font-size: var(--heading-size-md);  line-height: 1.2; }
.mds-heading-lg  { font-size: var(--heading-size-lg);  line-height: 1.2; }
.mds-heading-xl  { font-size: var(--heading-size-xl);  line-height: 1.2; }
.mds-heading-2xl { font-size: var(--heading-size-2xl); line-height: 1.1; }

/* Scoped to exclude component-internal paragraphs (BEM elements, e.g.
   .mds-inline-message__description, .icori-alert__heading) - those manage
   their own spacing; this is for actual body-content prose only. */
p:not([class*="__"]) {
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

@media (min-width: 1440px) {
  .xf-prose p:not([class*="__"]) {
    max-width: 90%;
  }
}

strong, b {
  font-weight: var(--font-weight-semibold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--type-size-sm);
}

/* ============================================================
   Links
   ============================================================ */
a {
  color: var(--color-text-link);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-text-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

a:active {
  color: var(--color-primary-active);
}

/* ============================================================
   Lists
   ============================================================ */
ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

/* ============================================================
   Focus Utility
   ============================================================ */
.mds-focus-visible:focus-visible,
*:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* Dark backgrounds */
.mds-dark *:focus-visible {
  outline-color: var(--color-focus-dark);
}

/* ============================================================
   Screen Reader Only
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Container
   ============================================================ */
.mds-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .mds-container {
    padding: 0 var(--space-8);
  }
}

/* ============================================================
   Utility Classes
   ============================================================ */
.mds-text-center { text-align: center; }
.mds-text-right  { text-align: right; }
.mds-text-left   { text-align: left; }

.mds-mt-0  { margin-top: 0; }
.mds-mt-4  { margin-top: var(--space-4); }
.mds-mt-8  { margin-top: var(--space-8); }
.mds-mb-0  { margin-bottom: 0; }
.mds-mb-4  { margin-bottom: var(--space-4); }
.mds-mb-8  { margin-bottom: var(--space-6); }
.mds-mb-9  { margin-bottom: var(--space-9); }

.mds-p-4   { padding: var(--space-4); }
.mds-p-8   { padding: var(--space-8); }

.mds-flex  { display: flex; }
.mds-flex-wrap { flex-wrap: wrap; }
.mds-gap-2 { gap: var(--space-2); }
.mds-gap-4 { gap: var(--space-4); }
.mds-gap-8 { gap: var(--space-8); }
.mds-items-center { align-items: center; }
.mds-justify-between { justify-content: space-between; }
.mds-justify-center { justify-content: center; }

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ================================================================
   Section 2: Badge
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Badge Component
   A small, non-interactive visual indicator used to display
   brief information or a status.
   ============================================================ */

/* --- Badge Base ---
   Matches the same MDS Badge spec the Result badges use (icori.css
   .icori-result-badge, Figma node 740-8660 / 740-8662): 14px semibold,
   1px letter-spacing, uniform 8px padding, 4px radius (--radius-md -
   MDS's "radius-sm" is a different step than iCORI's own --radius-sm),
   line-height 1. Width intentionally still sizes to content (inline-block)
   - matching width across variants is a separate, not-yet-scoped change. */
.mds-badge {
  display: inline-block;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  /* Non-interactive - no cursor, no hover, no focus */
  user-select: text;
  pointer-events: none;
}

/* Every variant below now sets a real border-color and a tinted background
   (not white) - previously only --primary had a visible border, so
   --success/--caution/--danger rendered as unbordered text on white. */

/* --- Variant: Default (gray border, dark text) --- */
.mds-badge--default {
  color: var(--color-text-primary);
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-500);
}

/* --- Variant: Primary (blue border, blue text) --- */
.mds-badge--primary {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* --- Variant: Success (green border, green text) --- */
.mds-badge--success {
  color: var(--color-text-success);
  background-color: var(--color-success-light);
  border-color: var(--color-accent);
}

/* --- Variant: Caution (dark text, amber/yellow border + background tint) --- */
.mds-badge--caution {
  color: var(--color-text-primary);
  background-color: var(--color-warning-light);
  border-color: var(--color-warning);
}

/* --- Variant: Danger (red border, red text) --- */
.mds-badge--danger {
  color: var(--color-danger);
  background-color: var(--color-danger-light);
  border-color: var(--color-danger);
}


/* ================================================================
   Section 3: Breadcrumbs
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Breadcrumb Component
   A navigation trail showing the user's current location
   within the site hierarchy.
   ============================================================ */

/* --- Breadcrumb Nav Container --- */
.mds-breadcrumb {
  display: flex;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  line-height: var(--line-height-normal);
  padding: var(--space-3) 0;
}

/* Hide scrollbar visually but keep functionality */
.mds-breadcrumb::-webkit-scrollbar {
  height: 4px;
}

.mds-breadcrumb::-webkit-scrollbar-track {
  background: transparent;
}

.mds-breadcrumb::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

/* --- Breadcrumb List --- */
.mds-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* --- Breadcrumb Item --- */
.mds-breadcrumb__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-bottom: 0;
}

/* Chevron separator via CSS (not > character, for screen reader friendliness) */
.mds-breadcrumb__item + .mds-breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-gray-500);
  border-top: 1.5px solid var(--color-gray-500);
  transform: rotate(45deg);
  margin: 0 var(--space-2);
  flex-shrink: 0;
}

/* --- Breadcrumb Link --- */
.mds-breadcrumb__link {
  color: var(--color-text-link);
  text-decoration: underline;
  transition: color var(--transition-fast);
  padding: var(--space-1);
  border-radius: var(--radius-xs);
}

.mds-breadcrumb__link:hover {
  color: var(--color-text-link-hover);
}

.mds-breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-breadcrumb__link:active {
  color: var(--color-primary-active);
}

/* --- Current Page (not linked) --- */
.mds-breadcrumb__current {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

/* --- Home Icon --- */
.mds-breadcrumb__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-link);
  text-decoration: none;
  padding: var(--space-1);
  border-radius: var(--radius-xs);
  transition: color var(--transition-fast);
}

.mds-breadcrumb__home:hover {
  color: var(--color-text-link-hover);
}

.mds-breadcrumb__home:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-breadcrumb__home svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* --- Overflow / Ellipsis Button --- */
.mds-breadcrumb__overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-link);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-xs);
  line-height: 1;
  min-width: 24px;
  min-height: 24px;
  transition: color var(--transition-fast);
}

.mds-breadcrumb__overflow:hover {
  color: var(--color-text-link-hover);
}

.mds-breadcrumb__overflow:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* Hidden items (collapsed state) */
.mds-breadcrumb__item--hidden {
  display: none;
}

/* When expanded, show all items and hide overflow button */
.mds-breadcrumb--expanded .mds-breadcrumb__item--hidden {
  display: flex;
}

.mds-breadcrumb--expanded .mds-breadcrumb__item--overflow {
  display: none;
}

/* --- Responsive Behavior --- */

/* XL (1280px+): show up to 4 page names */
/* Default - no changes needed */

/* LG (1024px): show up to 3 page names */
@media (max-width: 1279px) {
  .mds-breadcrumb {
    padding: var(--space-2) 0;
  }
}

/* MD (768px): show up to 3 page names, less padding */
@media (max-width: 1023px) {
  .mds-breadcrumb {
    padding: var(--space-2) 0;
  }
}

/* SM (480px): show up to 2 page names */
@media (max-width: 767px) {
  .mds-breadcrumb {
    padding: var(--space-1) 0;
    font-size: var(--type-size-xs);
  }
}


/* ================================================================
   Section 4: Button
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Button Component
   Requires: mds-base.css
   ============================================================ */

/* --- Base Button Reset & Shared Styles --- */
.mds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* --- Sizes --- */
.mds-btn--lg {
  font-size: var(--type-size-md);  /* 18px */
  padding: var(--space-4) var(--space-5);  /* 12px 20px */
  min-height: 54px;
}

.mds-btn--md {
  font-size: var(--type-size-base);  /* 16px */
  padding: var(--space-3) var(--space-4);  /* 8px 16px */
  min-height: 44px;
}

.mds-btn--sm {
  font-size: var(--type-size-sm);  /* 14px */
  padding: var(--space-2) var(--space-4);  /* 4px 12px */
  min-height: 37px;
}

/* --- Focus (shared across all variants) --- */
.mds-btn:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Disabled (shared across all variants) --- */
.mds-btn:disabled,
.mds-btn--disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   FILL STYLE
   ============================================================ */

/* --- Fill Primary --- */
.mds-btn--fill-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.mds-btn--fill-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.mds-btn--fill-primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.mds-btn--fill-primary:disabled,
.mds-btn--fill-primary.mds-btn--disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  color: var(--color-text-disabled);
}

/* --- Fill Accent --- */
.mds-btn--fill-accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.mds-btn--fill-accent:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-inverse);
}

.mds-btn--fill-accent:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
}

.mds-btn--fill-accent:disabled,
.mds-btn--fill-accent.mds-btn--disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  color: var(--color-text-disabled);
}

/* --- Fill Light (for dark backgrounds) --- */
.mds-btn--fill-light {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}

.mds-btn--fill-light:hover {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-200);
}

.mds-btn--fill-light:active {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-300);
}

.mds-btn--fill-light:disabled,
.mds-btn--fill-light.mds-btn--disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  color: var(--color-text-disabled);
}

/* --- Fill Destructive --- */
.mds-btn--fill-destructive {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}

.mds-btn--fill-destructive:hover {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

.mds-btn--fill-destructive:active {
  background-color: var(--color-danger-active);
  border-color: var(--color-danger-active);
}

.mds-btn--fill-destructive:disabled,
.mds-btn--fill-destructive.mds-btn--disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  color: var(--color-text-disabled);
}

/* ============================================================
   OUTLINE STYLE
   ============================================================ */

/* --- Outline Primary --- */
.mds-btn--outline-primary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.mds-btn--outline-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.mds-btn--outline-primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--color-text-inverse);
}

.mds-btn--outline-primary:disabled,
.mds-btn--outline-primary.mds-btn--disabled {
  background-color: transparent;
  border-color: var(--color-gray-300);
  color: var(--color-text-disabled);
}

/* --- Outline Accent --- */
.mds-btn--outline-accent {
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.mds-btn--outline-accent:hover {
  background-color: var(--color-berkshires-green-200);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.mds-btn--outline-accent:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
  color: var(--color-text-inverse);
}

.mds-btn--outline-accent:disabled,
.mds-btn--outline-accent.mds-btn--disabled {
  background-color: transparent;
  border-color: var(--color-gray-300);
  color: var(--color-text-disabled);
}

/* --- Outline Light (for dark backgrounds) --- */
.mds-btn--outline-light {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.mds-btn--outline-light:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}

.mds-btn--outline-light:active {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-200);
  color: var(--color-primary);
}

.mds-btn--outline-light:disabled,
.mds-btn--outline-light.mds-btn--disabled {
  background-color: transparent;
  border-color: var(--color-gray-400);
  color: var(--color-gray-400);
}

/* --- Outline Destructive --- */
.mds-btn--outline-destructive {
  background-color: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.mds-btn--outline-destructive:hover {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}

.mds-btn--outline-destructive:active {
  background-color: var(--color-danger-active);
  border-color: var(--color-danger-active);
  color: var(--color-text-inverse);
}

.mds-btn--outline-destructive:disabled,
.mds-btn--outline-destructive.mds-btn--disabled {
  background-color: transparent;
  border-color: var(--color-gray-300);
  color: var(--color-text-disabled);
}

/* --- Outline Gray --- */
.mds-btn--outline-gray {
  background-color: transparent;
  border-color: var(--color-mds-gray-700);
  color: var(--color-mds-gray-1000);
}

.mds-btn--outline-gray:hover {
  background-color: var(--color-mds-gray-1000);
  border-color: var(--color-mds-gray-1000);
  color: var(--color-text-inverse);
}

.mds-btn--outline-gray:active {
  background-color: var(--color-mds-gray-1200);
  border-color: var(--color-mds-gray-1200);
  color: var(--color-text-inverse);
}

.mds-btn--outline-gray:disabled,
.mds-btn--outline-gray.mds-btn--disabled {
  background-color: transparent;
  border-color: var(--color-gray-300);
  color: var(--color-text-disabled);
}

.mds-btn--outline-gray img {
  filter: brightness(0) !important;  /* dark to match gray-1000 text at rest */
}
.mds-btn--outline-gray:hover img,
.mds-btn--outline-gray:active img {
  filter: brightness(0) invert(1) !important;  /* invert to white when background fills */
}
.mds-btn--outline-gray:disabled img,
.mds-btn--outline-gray.mds-btn--disabled img {
  filter: brightness(0) opacity(0.35) !important;  /* muted to match disabled text */
}

/* ============================================================
   GHOST STYLE
   ============================================================ */

/* --- Ghost Primary --- */
.mds-btn--ghost-primary {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-primary);
}

.mds-btn--ghost-primary:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.mds-btn--ghost-primary:active {
  background-color: var(--color-primary-active);
  color: var(--color-text-inverse);
}

.mds-btn--ghost-primary:disabled,
.mds-btn--ghost-primary.mds-btn--disabled {
  color: var(--color-text-disabled);
  text-decoration: none;
}

/* --- Ghost Accent --- */
.mds-btn--ghost-accent {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-accent);
}

.mds-btn--ghost-accent:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.mds-btn--ghost-accent:active {
  background-color: var(--color-accent-active);
  color: var(--color-text-inverse);
}

.mds-btn--ghost-accent:disabled,
.mds-btn--ghost-accent.mds-btn--disabled {
  color: var(--color-text-disabled);
  text-decoration: none;
}

/* --- Ghost Light (for dark backgrounds) --- */
.mds-btn--ghost-light {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-white);
}

.mds-btn--ghost-light:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.mds-btn--ghost-light:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.mds-btn--ghost-light:disabled,
.mds-btn--ghost-light.mds-btn--disabled {
  color: var(--color-gray-400);
  text-decoration: none;
}

/* --- Ghost Destructive --- */
.mds-btn--ghost-destructive {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-danger);
}

.mds-btn--ghost-destructive:hover {
  color: var(--color-danger-hover);
  text-decoration: underline;
}

.mds-btn--ghost-destructive:active {
  background-color: var(--color-danger);
  color: var(--color-text-inverse);
}

.mds-btn--ghost-destructive:disabled,
.mds-btn--ghost-destructive.mds-btn--disabled {
  color: var(--color-text-disabled);
  text-decoration: none;
}

/* ============================================================
   ICONS
   ============================================================ */

/* Icon within a button (inline SVG or icon element) */
.mds-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.mds-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.mds-btn img {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* Disabled fill buttons drop to a light gray background (see the
   fill-*:disabled/.mds-btn--disabled rules below), but the icon still
   defaults to white above and disappears against it. Fall back to the icon's
   natural dark fill, muted to match the disabled text color. */
.mds-btn:disabled img,
.mds-btn--disabled img {
  filter: none;
  opacity: 0.4;
}

.mds-btn img.mds-btn__icon--lg {
  width: 1.2em;
  height: 1.2em;
}

/* ============================================================
   CONTENT VARIATIONS
   ============================================================ */

/* Allow text to wrap when forced */
.mds-btn--wrap {
  white-space: normal;
  text-align: left;
}

/* Fill available width */
.mds-btn--full-width {
  width: 100%;
  justify-content: space-between;
}

/* Loading state */
.mds-btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.mds-btn--loading::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: mds-btn-spin 0.6s linear infinite;
}

/* Restore color for the spinner only */
.mds-btn--fill-primary.mds-btn--loading::after,
.mds-btn--fill-accent.mds-btn--loading::after,
.mds-btn--fill-destructive.mds-btn--loading::after {
  border-color: var(--color-white);
  border-right-color: transparent;
}

.mds-btn--outline-primary.mds-btn--loading::after,
.mds-btn--ghost-primary.mds-btn--loading::after {
  border-color: var(--color-primary);
  border-right-color: transparent;
}

.mds-btn--outline-accent.mds-btn--loading::after,
.mds-btn--ghost-accent.mds-btn--loading::after {
  border-color: var(--color-accent);
  border-right-color: transparent;
}

@keyframes mds-btn-spin {
  to { transform: rotate(360deg); }
}


/* ================================================================
   Section 5: Button Group
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Button Group Component
   Requires: mds-base.css, button.css
   ============================================================ */

/* --- Button Group Container --- */
.mds-btn-group {
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-4);  /* 16px gap between buttons */
  flex-wrap: nowrap;
}

/* Buttons inside a group fill equally */
.mds-btn-group > .mds-btn {
  flex: 1 1 0%;
  min-width: 0;
}

/* --- Alignment Variants --- */
/* Primary button on the right (default), secondary on the left */
.mds-btn-group--right {
  justify-content: flex-end;
}

/* Primary button on the left, secondary on the right */
.mds-btn-group--left {
  justify-content: flex-start;
}

/* Center the group */
.mds-btn-group--center {
  justify-content: center;
}

/* --- Full-Width Group --- */
.mds-btn-group--full-width {
  display: flex;
  width: 100%;
}

.mds-btn-group--full-width > .mds-btn {
  flex: 1 1 0%;
}

/* --- Content Alignment Within Group Buttons --- */
/* Buttons with no icons have centered labels */
.mds-btn-group > .mds-btn {
  text-align: center;
  justify-content: center;
}

/* Buttons with icons have left-aligned labels, icon pushed to the right */
.mds-btn-group > .mds-btn--has-icon {
  justify-content: space-between;
  text-align: left;
}

/* --- Link-style button - no background/border, only bottom border underline --- */
.mds-link-button {
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding: 0;
  color: inherit;
  font-family: var(--font-family);
  font-size: inherit;
  font-weight: var(--font-weight-regular);
  line-height: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.mds-link-button:hover {
  opacity: 0.8;
}

.mds-link-button:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE BEHAVIOR
   ============================================================ */

/* Stack vertically on small screens */
@media (max-width: 479px) {
  .mds-btn-group {
    flex-direction: column;
    width: 100%;
  }

  .mds-btn-group > .mds-btn {
    width: 100%;
  }
}

/* On medium screens, buttons may wrap */
@media (min-width: 480px) and (max-width: 767px) {
  .mds-btn-group {
    flex-wrap: wrap;
  }
}


/* ================================================================
   Section 6: Callout Link
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Callout Link Component
   A navigational component used to graphically display a URL
   with a friendly label. Appears as a card-like clickable area
   with optional eyebrow text and a trailing arrow icon.
   ============================================================ */

/* --- Callout Container (n rows x 2 columns grid) --- */
.mds-callout-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 767px) {
  .mds-callout-container {
    grid-template-columns: 1fr;
  }
}

/* --- Callout Link Group --- */
.mds-callout-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6); /* 24px gutters between groups */
  list-style: none;
  padding: 0;
  margin: 0;
}

.mds-callout-links > li {
  flex: 1 1 0;
  min-width: 224px; /* Minimum width per spec */
  margin-bottom: 0;
}

/* --- Callout Link Base --- */
.mds-callout-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-width: 224px;
  min-height: 72px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-family);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

/* --- Callout Link Content (text area) --- */
.mds-callout-link__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

/* --- Eyebrow (optional category label) --- */
.mds-callout-link__eyebrow {
  display: block;
  font-size: var(--type-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  line-height: var(--line-height-tight);
}

/* --- Link Text (required) --- */
.mds-callout-link__text {
  display: block;
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  max-width: 50ch;
}

/* --- Arrow Icon --- */
.mds-callout-link__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mds-callout-link__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Primary Variant (default)
   Default: Bay Blue Light bg (#D0DDE9) with dark blue text
   Hover: Bay Blue var(--color-primary-tint)
   Active/Pressed: Bay Blue #14558F with white text
   Focus: blue outline
   ============================================================ */
.mds-callout-link--primary {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}

.mds-callout-link--primary .mds-callout-link__eyebrow {
  color: var(--color-primary-darker);
}

.mds-callout-link--primary:not(:has(.mds-callout-link__text)) .mds-callout-link__eyebrow {
  color: var(--color-primary);
}

.mds-callout-link--primary .mds-callout-link__text {
  color: var(--color-primary);
}

.mds-callout-link--primary .mds-callout-link__icon {
  color: var(--color-primary);
}

/* Primary: Hover */
.mds-callout-link--primary:hover {
  background-color: var(--color-primary-tint);
  border-color: var(--color-primary-tint);
  color: var(--color-primary-darker);
}

.mds-callout-link--primary:hover .mds-callout-link__eyebrow,
.mds-callout-link--primary:hover .mds-callout-link__text,
.mds-callout-link--primary:hover .mds-callout-link__icon {
  color: var(--color-primary-darker);
}

/* Primary: Active / Pressed */
.mds-callout-link--primary:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.mds-callout-link--primary:active .mds-callout-link__eyebrow,
.mds-callout-link--primary:active .mds-callout-link__text,
.mds-callout-link--primary:active .mds-callout-link__icon {
  color: var(--color-white);
}

/* Primary: Focus */
.mds-callout-link--primary:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ============================================================
   Neutral Variant
   Default: white bg with gray border, dark text
   Hover: light gray bg
   Active/Pressed: medium gray bg
   Focus: blue outline
   ============================================================ */
.mds-callout-link--neutral {
  background-color: var(--color-white);
  border-color: var(--color-gray-300);
  color: var(--color-text-primary);
}

.mds-callout-link--neutral .mds-callout-link__eyebrow {
  color: var(--color-text-primary);
}

.mds-callout-link--neutral .mds-callout-link__text {
  color: var(--color-text-primary);
}

.mds-callout-link--neutral .mds-callout-link__icon {
  color: var(--color-text-secondary);
}

/* Neutral: Hover */
.mds-callout-link--neutral:hover {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-300);
}

/* Neutral: Active / Pressed */
.mds-callout-link--neutral:active {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-300);
}

/* Neutral: Focus */
.mds-callout-link--neutral:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ============================================================
   Responsive Behavior
   Stack vertically on small screens
   ============================================================ */
@media (max-width: 480px) {
  .mds-callout-links {
    flex-direction: column;
  }

  .mds-callout-links > li {
    min-width: 100%;
  }

  .mds-callout-link {
    min-width: 100%;
  }

  .mds-callout-link__text {
    font-size: var(--type-size-sm);
  }
}


/* ================================================================
   Section 7: Card Interactive
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Card Interactive
   A single-action content container that displays related text
   and imagery. The entire card is clickable and navigates to
   one destination.
   Min width: 278px | Max width: 588px
   ============================================================ */

/* --- Card Interactive Base --- */
.mds-card-interactive {
  display: flex;
  flex-direction: column;
  min-width: 278px;
  max-width: 588px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal);
  position: relative;
}

/* --- Color Variants --- */

/* Primary variant (dark background on content area) */
.mds-card-interactive--primary {
  background-color: var(--color-primary-darker);
  color: var(--color-text-inverse);
}

.mds-card-interactive--primary .mds-card-interactive__eyebrow {
  color: var(--color-gray-300);
}

.mds-card-interactive--primary .mds-card-interactive__heading {
  color: var(--color-text-inverse);
}

.mds-card-interactive--primary .mds-card-interactive__description {
  color: var(--color-gray-200);
}

.mds-card-interactive--primary .mds-card-interactive__icon {
  color: var(--color-text-inverse);
}

/* Neutral variant (light/white background - default) */
.mds-card-interactive--neutral,
.mds-card-interactive {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.mds-card-interactive--neutral .mds-card-interactive__heading,
.mds-card-interactive:not([class*="--primary"]) .mds-card-interactive__heading {
  color: var(--color-primary);
}

/* --- Media Area --- */
.mds-card-interactive__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex-shrink: 0;
}

.mds-card-interactive__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Content Area --- */
.mds-card-interactive__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

/* --- Eyebrow --- */
.mds-card-interactive__eyebrow {
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
  color: var(--color-text-secondary);
}

/* --- Heading --- */
.mds-card-interactive__heading {
  font-size: var(--type-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}

/* --- Description --- */
.mds-card-interactive__description {
  font-size: var(--type-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  flex: 1;
}

.mds-card-interactive--primary .mds-card-interactive__description {
  color: var(--color-gray-200);
}

/* --- Arrow Icon --- */
.mds-card-interactive__icon {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: auto;
  font-size: var(--type-size-lg);
  color: var(--color-primary);
  line-height: 1;
}

.mds-card-interactive--primary .mds-card-interactive__icon {
  color: var(--color-text-inverse);
}

/* --- States --- */

/* Hover */
.mds-card-interactive:hover {
  box-shadow: var(--shadow-lg);
}

.mds-card-interactive--primary:hover {
  background-color: var(--color-primary-deep);
}

.mds-card-interactive--neutral:hover,
.mds-card-interactive:not([class*="--primary"]):hover {
  box-shadow: var(--shadow-lg);
}

/* Pressed / Active */
.mds-card-interactive:active {
  box-shadow: var(--shadow-sm);
  transform: scale(0.99);
}

.mds-card-interactive--primary:active {
  background-color: var(--color-primary-active);
}

/* Focus */
.mds-card-interactive:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  box-shadow: var(--shadow-md);
}

/* --- Card Grid Layouts --- */
.mds-card-interactive-grid {
  display: grid;
  gap: var(--space-6);
  width: 100%;
}

/* 4 column */
.mds-card-interactive-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 3 column */
.mds-card-interactive-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 2 column */
.mds-card-interactive-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Equal height cards in grid */
.mds-card-interactive-grid .mds-card-interactive {
  max-width: none;
  height: 100%;
}

/* --- Responsive Behavior --- */
/* Cards in a row should all have the same height.
   The arrow is always fixed to the bottom right corner. */

@media (max-width: 1024px) {
  .mds-card-interactive-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .mds-card-interactive-grid--4,
  .mds-card-interactive-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .mds-card-interactive-grid--4,
  .mds-card-interactive-grid--3,
  .mds-card-interactive-grid--2 {
    grid-template-columns: 1fr;
  }

  .mds-card-interactive {
    min-width: 0;
    max-width: none;
  }
}


/* ================================================================
   Section 8: Card Shell
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Card Shell
   A foundational container element that provides a consistent
   visual structure for grouping related elements. It serves as
   the building block for advanced system users to create more
   specific card variants. The shell itself is NOT clickable or
   focusable - only nested interactive components are.
   Min width: 280px | Max width: 588px
   ============================================================ */

/* --- Card Shell Base --- */
.mds-card-shell {
  display: flex;
  flex-direction: column;
  min-width: 280px;
  max-width: 588px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary);
  position: relative;
}

/* --- Media Placeholder --- */
.mds-card-shell__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-bg-dark);
}

.mds-card-shell__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Content Placeholder --- */
.mds-card-shell__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

/* The content area is designed to be swapped with a local component.
   Provide minimal default styling so content looks presentable out of the box. */
.mds-card-shell__content > *:last-child {
  margin-bottom: 0;
}

/* --- Placeholder Indicator (design-time only) --- */
.mds-card-shell__placeholder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--type-size-sm);
  background-color: var(--color-gray-50);
}

.mds-card-shell__placeholder-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

/* --- Card Grid Layouts --- */
.mds-card-shell-grid {
  display: grid;
  gap: var(--space-6);
  width: 100%;
}

/* 4 column */
.mds-card-shell-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 3 column */
.mds-card-shell-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 2 column */
.mds-card-shell-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Equal height cards in grid */
.mds-card-shell-grid .mds-card-shell {
  max-width: none;
  height: 100%;
}

/* --- Responsive Behavior --- */
/* Cards in a row should all have the same height.
   The card with the longest content determines the row height. */

@media (max-width: 1024px) {
  .mds-card-shell-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .mds-card-shell-grid--4,
  .mds-card-shell-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .mds-card-shell-grid--4,
  .mds-card-shell-grid--3,
  .mds-card-shell-grid--2 {
    grid-template-columns: 1fr;
  }

  .mds-card-shell {
    min-width: 0;
    max-width: none;
  }
}


/* ================================================================
   Section 9: Card Static
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Card Static
   A flexible content container that displays related information
   in a structured, scannable format with up to three call-to-action
   links. The card itself is NOT clickable - only nested links are.
   Min width: 278px | Max width: 588px
   ============================================================ */

/* --- Card Static Base --- */
.mds-card-static {
  display: flex;
  flex-direction: column;
  min-width: 278px;
  max-width: 588px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary);
  position: relative;
}

/* --- Media Area --- */
.mds-card-static__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex-shrink: 0;
}

.mds-card-static__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Content Area --- */
.mds-card-static__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

/* --- Eyebrow --- */
.mds-card-static__eyebrow {
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
  color: var(--color-text-secondary);
}

/* --- Heading --- */
.mds-card-static__heading {
  font-size: var(--type-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}

/* --- Description --- */
.mds-card-static__description {
  font-size: var(--type-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-0);
  flex: 1;
}

/* --- Links Section --- */
.mds-card-static__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-gray-200);
}

/* --- Decorative Link --- */
.mds-card-static__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mds-card-static__link:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

.mds-card-static__link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.mds-card-static__link:active {
  color: var(--color-primary-active);
}

.mds-card-static__link-arrow {
  font-size: var(--type-size-base);
  line-height: 1;
  transition: transform var(--transition-fast);
}

.mds-card-static__link:hover .mds-card-static__link-arrow {
  transform: translateX(2px);
}

/* --- Without Image Variant --- */
.mds-card-static--no-media .mds-card-static__content {
  padding-top: var(--space-6);
}

/* --- Card Grid Layouts --- */
.mds-card-static-grid {
  display: grid;
  gap: var(--space-6);
  width: 100%;
}

/* 4 column */
.mds-card-static-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 3 column */
.mds-card-static-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 2 column */
.mds-card-static-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Equal height cards in grid */
.mds-card-static-grid .mds-card-static {
  max-width: none;
  height: 100%;
}

/* --- Responsive Behavior --- */
@media (max-width: 1024px) {
  .mds-card-static-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .mds-card-static-grid--4,
  .mds-card-static-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .mds-card-static-grid--4,
  .mds-card-static-grid--3,
  .mds-card-static-grid--2 {
    grid-template-columns: 1fr;
  }

  .mds-card-static {
    min-width: 0;
    max-width: none;
  }
}


/* ================================================================
   Section 10: Checkbox
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Checkbox Component
   An interactive UI element that allows users to select or
   deselect an option, represented by an empty square that
   displays a checkmark when activated.
   ============================================================ */

/* --- Checkbox Group (fieldset wrapper) --- */
.mds-checkbox-group {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
}

/* --- Group Label (legend) --- */
.mds-checkbox-group__legend {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  padding: 0;
  max-width: 30ch;
}

/* --- Required Indicator --- */
.mds-checkbox-group__required {
  color: var(--color-danger);
  margin-left: var(--space-1);
  font-weight: var(--font-weight-bold);
}

/* --- Help Text (below group label) --- */
.mds-checkbox-group__help-text {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  max-width: 80ch;
}

/* --- Individual Checkbox Item --- */
.mds-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  position: relative;
}

/* --- Hide Native Input --- */
.mds-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Custom Checkbox Box --- */
.mds-checkbox__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-xs);
  background-color: var(--color-white);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  margin-top: 2px;
}

/* --- Checkmark Icon (SVG via pseudo-element) --- */
.mds-checkbox__box::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* --- Indeterminate Dash --- */
.mds-checkbox__box::before {
  content: "";
  display: none;
  width: 10px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 1px;
}

/* --- Label Text Container --- */
.mds-checkbox__label-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* --- Label --- */
.mds-checkbox__label {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  cursor: pointer;
}

/* --- Description Text --- */
.mds-checkbox__description {
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  max-width: 80ch;
}

/* ============================================================
   States
   ============================================================ */

/* --- Unchecked (Default) --- */
/* Base styles above handle the default unchecked state */

/* --- Checked --- */
.mds-checkbox__input:checked + .mds-checkbox__box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.mds-checkbox__input:checked + .mds-checkbox__box::after {
  opacity: 1;
  /* Checkmark via CSS - white check on blue background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M10.28 2.22a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 1 1 1.06-1.06L4.25 7.19l4.97-4.97a.75.75 0 0 1 1.06 0z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- Indeterminate --- */
.mds-checkbox__input:indeterminate + .mds-checkbox__box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.mds-checkbox__input:indeterminate + .mds-checkbox__box::after {
  display: none;
}

.mds-checkbox__input:indeterminate + .mds-checkbox__box::before {
  display: block;
}

/* --- Hover --- */
.mds-checkbox:hover .mds-checkbox__box {
  border-color: var(--color-primary-hover);
}

.mds-checkbox:hover .mds-checkbox__input:checked + .mds-checkbox__box {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.mds-checkbox:hover .mds-checkbox__input:indeterminate + .mds-checkbox__box {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* --- Focus --- */
.mds-checkbox__input:focus-visible + .mds-checkbox__box {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-color: var(--color-focus-light);
}

.mds-checkbox__input:focus-visible:checked + .mds-checkbox__box {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-checkbox__input:focus-visible:indeterminate + .mds-checkbox__box {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Error --- */
.mds-checkbox--error .mds-checkbox__box {
  border-color: var(--color-danger);
}

.mds-checkbox--error .mds-checkbox__input:checked + .mds-checkbox__box {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.mds-checkbox--error .mds-checkbox__input:indeterminate + .mds-checkbox__box {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

/* --- Error Message --- */
.mds-checkbox-group__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-danger);
  margin-top: var(--space-2);
}

/* --- Disabled --- */
.mds-checkbox--disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.mds-checkbox--disabled .mds-checkbox__box {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.mds-checkbox--disabled .mds-checkbox__input:checked + .mds-checkbox__box {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-300);
}

.mds-checkbox--disabled .mds-checkbox__input:indeterminate + .mds-checkbox__box {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-300);
}

.mds-checkbox--disabled .mds-checkbox__label {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.mds-checkbox--disabled .mds-checkbox__description {
  color: var(--color-text-disabled);
}

/* ============================================================
   Horizontal Layout Modifier
   ============================================================ */
.mds-checkbox-group--horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.mds-checkbox-group--horizontal .mds-checkbox-group__legend {
  flex-basis: 100%;
}

.mds-checkbox-group--horizontal .mds-checkbox-group__help-text {
  flex-basis: 100%;
  margin-top: calc(-1 * var(--space-4));
}

/* ============================================================
   Responsive Behavior
   ============================================================ */
@media (max-width: 480px) {
  .mds-checkbox-group--horizontal {
    flex-direction: column;
    gap: 0;
  }

  .mds-checkbox {
    max-width: 100%;
  }
}


/* ================================================================
   Section 11: Chip
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Chip Component
   A compact, interactive UI element representing a discrete
   piece of information (filter, tag, selection) with a
   close/remove action.
   ============================================================ */

/* --- Chip Container (groups of chips) --- */
.mds-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* --- Chip Base --- */
.mds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  max-width: 100%;
}

/* Long labels can wrap */
.mds-chip--wrap {
  white-space: normal;
}

/* --- Chip Label --- */
.mds-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Close Icon --- */
.mds-chip__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-xs);
  transition: color var(--transition-fast);
  line-height: 1;
  font-size: var(--type-size-base);
}

.mds-chip__close svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Fallback for text "x" close */
.mds-chip__close::after {
  content: none;
}

/* --- States --- */

/* Hover: background darkens subtly */
.mds-chip:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

.mds-chip:hover .mds-chip__close {
  color: var(--color-text-primary);
}

/* Pressed/Active: filled dark background, white text */
.mds-chip:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.mds-chip:active .mds-chip__close {
  color: var(--color-text-inverse);
}

/* Focus: blue outline */
.mds-chip:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Disabled State --- */
.mds-chip--disabled,
.mds-chip[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Responsive: chips wrap in container --- */
@media (max-width: 480px) {
  .mds-chip-group {
    gap: var(--space-1);
  }

  .mds-chip {
    font-size: var(--type-size-xs);
    padding: var(--space-1) var(--space-2);
  }
}


/* ================================================================
   Section 12: Container Button Group
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Contained Button Group Component
   A group of 2-5 buttons containing related actions or functionality.
   Horizontal layout: max-width 900px
   Vertical layout: max-width 448px
   Variants: Primary, Neutral
   Gap: -2px (overlapping borders)
   ============================================================ */

/* --- Horizontal Button Group --- */
.mds-button-group {
  display: inline-flex;
  align-items: stretch;
  font-family: var(--font-family);
}

/* Shared button base within group */
.mds-button-group__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  border: 2px solid;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: center;
  margin-left: -2px;
}

.mds-button-group__btn:first-child {
  margin-left: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.mds-button-group__btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.mds-button-group__btn:only-child {
  border-radius: var(--radius-md);
}

/* ============================================================
   Color: Primary
   First button filled, rest outlined
   ============================================================ */

/* Active / Selected Primary Button */
.mds-button-group__btn--primary-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.mds-button-group__btn--primary-active:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.mds-button-group__btn--primary-active:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

/* Inactive Primary Button (outlined) */
.mds-button-group__btn--primary-inactive {
  background-color: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.mds-button-group__btn--primary-inactive:hover {
  background-color: var(--color-info-bg);
}

.mds-button-group__btn--primary-inactive:active {
  background-color: var(--color-info-bg-hover);
}

/* ============================================================
   Color: Neutral
   First button dark gray filled, rest outlined
   ============================================================ */

/* Active / Selected Neutral Button */
.mds-button-group__btn--neutral-active {
  background-color: var(--color-gray-600);
  border-color: var(--color-gray-600);
  color: var(--color-white);
}

.mds-button-group__btn--neutral-active:hover {
  background-color: var(--color-gray-500);
  border-color: var(--color-gray-500);
}

.mds-button-group__btn--neutral-active:active {
  background-color: var(--color-gray-700);
  border-color: var(--color-gray-700);
}

/* Inactive Neutral Button (outlined) */
.mds-button-group__btn--neutral-inactive {
  background-color: var(--color-white);
  border-color: var(--color-gray-300);
  color: var(--color-text-primary);
}

.mds-button-group__btn--neutral-inactive:hover {
  background-color: var(--color-gray-50);
}

.mds-button-group__btn--neutral-inactive:active {
  background-color: var(--color-gray-100);
}

/* ============================================================
   Focus State (all variants)
   ============================================================ */
.mds-button-group__btn:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  z-index: 1;
}

/* ============================================================
   Vertical Layout
   ============================================================ */
.mds-button-group--vertical {
  flex-direction: column;
  max-width: 448px;
  width: 100%;
}

.mds-button-group--vertical .mds-button-group__btn {
  margin-left: 0;
  margin-top: -2px;
  border-radius: 0;
}

.mds-button-group--vertical .mds-button-group__btn:first-child {
  margin-top: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.mds-button-group--vertical .mds-button-group__btn:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ============================================================
   Icon-only Button Group
   ============================================================ */
.mds-button-group__btn--icon-only {
  padding: var(--space-2);
  min-width: 40px;
  min-height: 40px;
}

.mds-button-group__btn--icon-only svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   Responsive Behavior
   Horizontal max: 900px, Vertical max: 448px
   ============================================================ */
.mds-button-group--horizontal {
  max-width: 900px;
}

@media (max-width: 480px) {
  .mds-button-group--horizontal {
    max-width: 100%;
  }

  .mds-button-group__btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--type-size-xs);
  }
}


/* ================================================================
   Section 13: Date Input
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Date Input Component
   Collects a calendar date in a standardized format using
   three separate fields: Month (combobox), Date, and Year.
   ============================================================ */

/* --- Date Input Group Wrapper --- */
.mds-date-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  max-width: 600px;
  width: 100%;
}

/* --- Date Fields Container (Month, Date, Year) --- */
.mds-date-fields {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

/* --- Individual Date Field Wrapper --- */
.mds-date-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mds-date-field--month {
  flex: 0 0 auto;
  min-width: 120px;
}

.mds-date-field--day {
  flex: 0 0 auto;
  min-width: 64px;
  max-width: 80px;
}

.mds-date-field--year {
  flex: 0 0 auto;
  min-width: 72px;
  max-width: 96px;
}

/* --- Sub-label (Month, Date, Year) --- */
.mds-date-field__label {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

/* --- Month Select (Combobox) --- */
.mds-date-select {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: calc(var(--space-4) + 20px);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              outline var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23535353' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px;
}

.mds-date-select:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-dark);
}

.mds-date-select:focus,
.mds-date-select:focus-visible {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
  box-shadow: none;
}

.mds-date-select:disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* --- General Select --- */
.mds-select {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  padding-right: calc(var(--space-3) + 20px);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              outline var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23535353' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px;
}

.mds-select:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-dark);
}

.mds-select:focus,
.mds-select:focus-visible {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
  box-shadow: none;
}

.mds-select:disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* --- Error (matches every other form component's --error modifier:
   .mds-text-input--error, .mds-checkbox--error, .mds-radio--error, etc.) --- */
.mds-select--error {
  border-color: var(--color-border-danger);
}
.mds-select--error:focus,
.mds-select--error:focus-visible {
  border-color: var(--color-border-danger);
  outline-color: var(--color-border-danger);
}

/* ==========================================================================
   Multi-Select with Checkboxes (.mds-multi-select)
   Scrollable listbox-style container that renders a list of mds-checkbox rows.
   Supports shift-click range selection via companion JavaScript.
   Usage: <div class="mds-multi-select"> ... <label class="mds-checkbox"> ...
   ========================================================================== */

.mds-multi-select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) 0;
  max-height: 12rem;
  overflow-y: auto;
  user-select: none;
}

.mds-multi-select .mds-checkbox:hover {
  background-color: var(--color-bg-tertiary);
}

/* --- End Multi-Select with Checkboxes --- */

/* --- Day and Year Number Inputs --- */
.mds-date-number-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              outline var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* Remove spinner buttons for number inputs */
.mds-date-number-input::-webkit-outer-spin-button,
.mds-date-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Placeholder --- */
.mds-date-number-input::placeholder {
  color: var(--color-text-disabled);
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

/* --- Hover State --- */
.mds-date-number-input:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-dark);
}

/* --- Focus / Active State --- */
.mds-date-number-input:focus,
.mds-date-number-input:focus-visible {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
  box-shadow: none;
}

/* --- Disabled State --- */
.mds-date-number-input:disabled,
.mds-date-number-input[disabled] {
  background-color: var(--color-gray-100);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* --- Error State --- */
.mds-date-select--error,
.mds-date-number-input--error {
  border-color: var(--color-border-danger);
}

.mds-date-select--error:focus,
.mds-date-select--error:focus-visible,
.mds-date-number-input--error:focus,
.mds-date-number-input--error:focus-visible {
  border-color: var(--color-border-danger);
  outline-color: var(--color-border-danger);
}

/* --- Success / Valid State --- */
.mds-date-select--success,
.mds-date-number-input--success {
  border-color: var(--color-border-success);
}

/* --- Responsive: Stack on very narrow viewports (<375px) --- */
@media (max-width: 375px) {
  .mds-date-fields {
    flex-wrap: wrap;
  }

  .mds-date-field--month {
    flex: 1 1 100%;
  }

  .mds-date-field--day,
  .mds-date-field--year {
    flex: 1 1 calc(50% - var(--space-3) / 2);
  }
}

@media (max-width: 480px) {
  .mds-date-group {
    max-width: 100%;
  }
}


/* ================================================================
   Section 14: Decorative Link
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Decorative Link Component
   An interactive element that allows users to navigate between
   pages or sections. Standalone link with a trailing icon
   (arrow for internal, external-link icon for external,
   document icon for downloads). Also includes a
   "link styled as a button" variant.
   ============================================================ */

/* --- Decorative Link Base --- */
.mds-decorative-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-link);
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    text-decoration var(--transition-fast);
  line-height: var(--line-height-snug);
}

/* Underline only on text, not on icon */
.mds-decorative-link__text {
  text-decoration: none;
}

/* --- Icon --- */
.mds-decorative-link__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.mds-decorative-link__icon svg {
  fill: currentColor;
  stroke: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Size Variants
   ============================================================ */

/* Small */
.mds-decorative-link--sm {
  font-size: var(--type-size-sm); /* 14px */
}

.mds-decorative-link--sm .mds-decorative-link__icon svg {
  width: 12px;
  height: 12px;
}

/* Medium (default) */
.mds-decorative-link--md {
  font-size: var(--type-size-base); /* 16px */
}

.mds-decorative-link--md .mds-decorative-link__icon svg {
  width: 14px;
  height: 14px;
}

/* Large */
.mds-decorative-link--lg {
  font-size: var(--type-size-md); /* 18px */
}

.mds-decorative-link--lg .mds-decorative-link__icon svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   Color Variants: Primary (on light backgrounds)
   ============================================================ */
.mds-decorative-link--primary {
  color: var(--color-text-link);
}

/* Primary: Hover - underline appears, color darkens */
.mds-decorative-link--primary:hover .mds-decorative-link__text {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Primary: Focus */
.mds-decorative-link--primary:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Primary: Active */
.mds-decorative-link--primary:active {
  color: var(--color-primary-active);
}

/* ============================================================
   Color Variants: Light (on dark backgrounds)
   ============================================================ */
.mds-decorative-link--light {
  color: var(--color-white);
}

.mds-decorative-link--light:hover {
  color: var(--color-gray-200);
}

.mds-decorative-link--light:hover .mds-decorative-link__text {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.mds-decorative-link--light:focus-visible {
  outline: 2px solid var(--color-focus-dark);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.mds-decorative-link--light:active {
  color: var(--color-gray-300);
}

/* ============================================================
   Link Styled as a Button
   Looks like a button but navigates (is an <a> element).
   ============================================================ */
.mds-decorative-link--button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.mds-decorative-link--button .mds-decorative-link__icon {
  color: var(--color-white);
}

.mds-decorative-link--button .mds-decorative-link__icon svg {
  stroke: var(--color-white);
}

/* Button: Hover */
.mds-decorative-link--button:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-white);
}

.mds-decorative-link--button:hover .mds-decorative-link__text {
  text-decoration: none;
}

/* Button: Active */
.mds-decorative-link--button:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--color-white);
}

/* Button: Focus */
.mds-decorative-link--button:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ============================================================
   Responsive Behavior
   Decorative links wrap naturally with their container.
   ============================================================ */
@media (max-width: 480px) {
  .mds-decorative-link--button {
    padding: var(--space-2) var(--space-4);
    font-size: var(--type-size-sm);
  }
}


/* ================================================================
   Section 15: Details Toggle
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Details Toggle Component
   Expandable/collapsible content using native <details>/<summary>
   elements. Allows users to reveal or hide additional information.
   ============================================================ */

/* --- Details Container --- */
.mds-details-toggle {
  font-family: var(--font-family);
  margin-bottom: var(--space-4);
}

/* --- Summary (Toggle Button) --- */
.mds-details-toggle summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-link);
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  transition: color var(--transition-fast);
}

/* Remove default marker */
.mds-details-toggle summary::-webkit-details-marker {
  display: none;
}

.mds-details-toggle summary::marker {
  content: '';
}

/* --- Chevron Arrow --- */
.mds-details-toggle summary::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

/* Chevron rotates when open */
.mds-details-toggle[open] summary::after {
  transform: rotate(180deg);
}

/* --- Hover State --- */
.mds-details-toggle summary:hover {
  color: var(--color-text-link-hover);
}

/* --- Focus State --- */
.mds-details-toggle summary:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Content Area --- */
.mds-details-toggle__content {
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

.mds-details-toggle__content p {
  margin-bottom: var(--space-3);
}

.mds-details-toggle__content p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Responsive Behavior
   At smaller widths, text wraps naturally.
   ============================================================ */
@media (max-width: 480px) {
  .mds-details-toggle__content {
    padding: var(--space-2) 0;
  }
}


/* ================================================================
   Section 16: File Upload
   ================================================================ */

/* ============================================================
   Massachusetts Design System - File Upload Component
   Drag-and-drop and click-to-browse file upload area.
   Max width: 379px, Min width: 232px
   States: default, drag-enter, focus, error
   ============================================================ */

/* --- File Upload Wrapper --- */
.mds-file-upload {
  font-family: var(--font-family);
  max-width: 379px;
  min-width: 232px;
  width: 100%;
}

/* --- Label --- */
.mds-file-upload__label {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

/* --- Required Indicator --- */
.mds-file-upload__required {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
  margin-left: var(--space-1);
}

/* --- Help Text --- */
.mds-file-upload__help-text {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* --- Drop Zone --- */
.mds-file-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  background-color: var(--color-success-bg);
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
  text-align: center;
}

/* --- Drop Zone Icon --- */
.mds-file-upload__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.mds-file-upload__icon svg {
  width: 24px;
  height: 24px;
}

/* --- Drop Zone Text --- */
.mds-file-upload__text {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-accent);
}

/* --- Choose File Button --- */
.mds-file-upload__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-white);
  background-color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.mds-file-upload__button:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.mds-file-upload__button:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
}

.mds-file-upload__button:focus {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-file-upload__button:focus:not(:focus-visible) {
  outline: none;
}

/* --- Supported File Types Text --- */
.mds-file-upload__supported {
  font-family: var(--font-family);
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* --- Hidden File Input --- */
.mds-file-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   State: Drag Enter
   ============================================================ */
.mds-file-upload__dropzone--drag-enter {
  border-style: dotted;
  border-width: 3px;
  background-color: var(--color-success-hover);
}

/* ============================================================
   State: Focus
   ============================================================ */
.mds-file-upload__dropzone:focus-within {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-file-upload__dropzone--focus .mds-file-upload__button {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* ============================================================
   State: Error
   ============================================================ */
.mds-file-upload--error .mds-file-upload__dropzone {
  border-color: var(--color-danger);
  border-style: dashed;
}

.mds-file-upload__error-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-danger);
  margin-top: var(--space-2);
}

.mds-file-upload__error-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* ============================================================
   Uploaded File List
   ============================================================ */
.mds-file-upload__file-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0 0;
}

.mds-file-upload__file-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-gray-200);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  margin-bottom: 0;
}

.mds-file-upload__file-item:last-child {
  border-bottom: none;
}

.mds-file-upload__file-name {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* --- Delete Button (Trash Icon) --- */
.mds-file-upload__delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-accent);
  border-radius: var(--radius-xs);
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
  flex-shrink: 0;
}

.mds-file-upload__delete-btn:hover {
  color: var(--color-accent-active);
  background-color: var(--color-gray-50);
}

.mds-file-upload__delete-btn:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-file-upload__delete-btn svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   Responsive Behavior
   ============================================================ */
@media (max-width: 480px) {
  .mds-file-upload {
    max-width: 100%;
    min-width: 200px;
  }
}


/* ================================================================
   Section 17: Footer
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Footer Component
   A persistent section at the bottom of the page providing
   supporting navigation, legal/policy links, and site identity.
   Supports light (default) and dark (inverse) variants.
   ============================================================ */

/* --- Footer container --- */
.mds-footer {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  line-height: var(--line-height-normal);
  background-color: var(--mds-background-section-brand-neutral-lowest);
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-gray-200);
}

/* --- Inverse (dark) variant --- */
.mds-footer--inverse {
  background-color: var(--color-bg-dark);/usage
  color: var(--color-text-inverse);
  border-top-color: transparent;
}

/* --- Footer inner wrapper --- */
.mds-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

@media (min-width: 768px) {
  .mds-footer__inner {
    padding: var(--space-6) var(--space-8);
  }
}

/* --- Main content grid --- */
.mds-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Full variant with navigation columns */
@media (min-width: 768px) {
  .mds-footer__main--full {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .mds-footer__main--full {
    grid-template-columns: 250px 1fr 1fr 1fr;
    gap: var(--space-6);
  }
}

/* --- Brand / identity column --- */
.mds-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Seal / logo - flex container supports multiple seals side-by-side */
.mds-footer__seal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.mds-footer__seal img,
.mds-footer__seal svg {
  width: 58px;
  height: 58px;
  display: block;
  flex-shrink: 0;
}

/* Site name in footer */
.mds-footer__site-name {
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  line-height: var(--line-height-tight);
}

.mds-footer--inverse .mds-footer__site-name {
  color: var(--color-text-inverse);
}

/* Social media icons */
.mds-footer__social {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mds-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.mds-footer__social-link:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

.mds-footer__social-link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-footer--inverse .mds-footer__social-link:focus-visible {
  outline-color: var(--color-focus-dark);
}

.mds-footer__social-icon {
  width: 18px;
  height: 18px;
}

/* Site description */
.mds-footer__description {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 40ch;
}

.mds-footer--inverse .mds-footer__description {
  color: rgba(255, 255, 255, 0.7);
}

/* --- Navigation columns --- */
.mds-footer__nav-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mds-footer__nav-heading {
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
}

.mds-footer--inverse .mds-footer__nav-heading {
  color: rgba(255, 255, 255, 0.7);
}

.mds-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mds-footer__nav-list li {
  margin-bottom: var(--space-2);
}

.mds-footer__nav-link {
  font-size: var(--type-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--transition-fast);
}

.mds-footer__nav-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.mds-footer__nav-link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-footer--inverse .mds-footer__nav-link {
  color: var(--color-text-inverse);
}

.mds-footer--inverse .mds-footer__nav-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.mds-footer--inverse .mds-footer__nav-link:focus-visible {
  outline-color: var(--color-focus-dark);
}

/* External link icon */
.mds-footer__external-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Non-interactive items */
.mds-footer__nav-text {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.mds-footer--inverse .mds-footer__nav-text {
  color: rgba(255, 255, 255, 0.7);
}

/* --- Divider --- */
.mds-footer__divider {
  border: none;
  border-top: 1px solid var(--color-gray-200);
  margin: var(--space-6) 0;
}

.mds-footer--inverse .mds-footer__divider {
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* --- Legal / policy links row --- */
.mds-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.mds-footer--inverse .mds-footer__legal {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.mds-footer__legal-link {
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #000000;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Pipe separator between adjacent legal links */
.mds-footer__legal-link + .mds-footer__legal-link::before {
  content: '|';
  margin-right: var(--space-4);
  color: var(--color-gray-400);
  font-weight: var(--font-weight-regular);
  text-decoration: none;
  display: inline-block;
}

.mds-footer__legal-link:hover {
  text-decoration: underline;
  color: #000000;
}

.mds-footer__legal-link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-footer--inverse .mds-footer__legal-link {
  color: var(--color-text-inverse);
}

.mds-footer--inverse .mds-footer__legal-link:focus-visible {
  outline-color: var(--color-focus-dark);
}

/* --- Funding details --- */
.mds-footer__funding {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.mds-footer--inverse .mds-footer__funding {
  color: rgba(255, 255, 255, 0.6);
}

/* --- Copyright --- */
.mds-footer__copyright {
  font-size: var(--type-size-sm);
  margin-bottom: var(--space-1);
}

.mds-footer__copyright strong {
  font-weight: var(--font-weight-semibold);
}

.mds-footer__trademark {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.mds-footer--inverse .mds-footer__trademark {
  color: rgba(255, 255, 255, 0.6);
}

/* --- Responsive: Tablet --- */
@media (max-width: 1023px) and (min-width: 768px) {
  .mds-footer__main--full {
    grid-template-columns: 1fr 1fr;
  }

  .mds-footer__brand {
    grid-column: 1 / -1;
  }
}

/* --- Responsive: Mobile --- */
@media (max-width: 767px) {
  .mds-footer__inner {
    padding: var(--space-6) var(--space-4);
  }

  .mds-footer__main--full {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .mds-footer__legal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}


/* ================================================================
   Section 18: Form Intro
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Form Intro Component
   Pre-formatted introduction section for forms with customizable
   title, icon, rich text description, and required field indicator.
   Max width: 579px
   ============================================================ */

/* --- Form Intro Container --- */
.mds-form-intro {
  font-family: var(--font-family);
  max-width: 579px;
  width: 100%;
  margin-bottom: var(--space-8);
}

/* --- Title Row (Icon + Title) --- */
.mds-form-intro__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* --- Title Icon --- */
.mds-form-intro__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.mds-form-intro__icon svg {
  width: 24px;
  height: 24px;
}

/* --- Form Title --- */
.mds-form-intro__title {
  font-family: var(--font-family);
  font-size: var(--type-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin: 0;
}

/* --- Description --- */
.mds-form-intro__description {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  max-width: 75ch;
}

.mds-form-intro__description a {
  color: var(--color-text-link);
  text-decoration: underline;
}

.mds-form-intro__description a:hover {
  color: var(--color-text-link-hover);
}

/* --- Required Field Indicator --- */
.mds-form-intro__required-indicator {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  margin: 0;
}

.mds-form-intro__required-indicator .mds-form-intro__asterisk {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
  font-size: var(--type-size-lg);
  vertical-align: text-top;
  margin-right: var(--space-1);
}

/* ============================================================
   Responsive Behavior
   ============================================================ */
@media (max-width: 480px) {
  .mds-form-intro {
    max-width: 100%;
  }

  .mds-form-intro__title {
    font-size: var(--type-size-lg);
  }
}


/* ================================================================
   Section 19: Icon Button
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Icon Button Component
   Requires: mds-base.css
   ============================================================ */

/* --- Base Icon Button --- */
.mds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;  /* icon is 24x24, padding 10px each side = 44x44 total */
  font-family: var(--font-family);
  font-size: 0;  /* hide any text (for sr-only labels) */
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background-color: transparent;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* --- Icon Element --- */
.mds-icon-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.mds-icon-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* --- Focus (shared) --- */
.mds-icon-btn:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Disabled (shared) --- */
.mds-icon-btn:disabled,
.mds-icon-btn--disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Small size (compact, e.g. inside data tables) --- */
.mds-icon-btn--sm {
  width: 28px;
  height: 28px;
  padding: 6px;  /* 16x16 icon + 6px each side = 28x28 total */
}

/* ============================================================
   FILL STYLE
   ============================================================ */

/* --- Fill Primary (Default) --- */
.mds-icon-btn--fill-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.mds-icon-btn--fill-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.mds-icon-btn--fill-primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.mds-icon-btn--fill-primary:disabled,
.mds-icon-btn--fill-primary.mds-icon-btn--disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  color: var(--color-text-disabled);
}

/* --- Fill Accent --- */
.mds-icon-btn--fill-accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.mds-icon-btn--fill-accent:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.mds-icon-btn--fill-accent:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
}

.mds-icon-btn--fill-accent:disabled,
.mds-icon-btn--fill-accent.mds-icon-btn--disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  color: var(--color-text-disabled);
}

/* --- Fill Light (for dark backgrounds) --- */
.mds-icon-btn--fill-light {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}

.mds-icon-btn--fill-light:hover {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-200);
}

.mds-icon-btn--fill-light:active {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-300);
}

.mds-icon-btn--fill-light:disabled,
.mds-icon-btn--fill-light.mds-icon-btn--disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  color: var(--color-text-disabled);
}

/* ============================================================
   OUTLINE STYLE
   ============================================================ */

/* --- Outline Primary --- */
.mds-icon-btn--outline-primary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.mds-icon-btn--outline-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.mds-icon-btn--outline-primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--color-text-inverse);
}

.mds-icon-btn--outline-primary:disabled,
.mds-icon-btn--outline-primary.mds-icon-btn--disabled {
  background-color: transparent;
  border-color: var(--color-gray-300);
  color: var(--color-text-disabled);
}

/* --- Outline Accent --- */
.mds-icon-btn--outline-accent {
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.mds-icon-btn--outline-accent:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.mds-icon-btn--outline-accent:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
  color: var(--color-text-inverse);
}

.mds-icon-btn--outline-accent:disabled,
.mds-icon-btn--outline-accent.mds-icon-btn--disabled {
  background-color: transparent;
  border-color: var(--color-gray-300);
  color: var(--color-text-disabled);
}

/* --- Outline Light (for dark backgrounds) --- */
.mds-icon-btn--outline-light {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.mds-icon-btn--outline-light:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}

.mds-icon-btn--outline-light:active {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-200);
  color: var(--color-primary);
}

.mds-icon-btn--outline-light:disabled,
.mds-icon-btn--outline-light.mds-icon-btn--disabled {
  background-color: transparent;
  border-color: var(--color-gray-400);
  color: var(--color-gray-400);
}

/* ============================================================
   GHOST STYLE
   ============================================================ */

/* --- Ghost Primary --- */
.mds-icon-btn--ghost-primary {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-primary);
}

.mds-icon-btn--ghost-primary:hover {
  color: var(--color-primary-hover);
  background-color: rgba(20, 85, 143, 0.08);
}

.mds-icon-btn--ghost-primary:active {
  background-color: var(--color-primary-active);
  color: var(--color-text-inverse);
}

.mds-icon-btn--ghost-primary:disabled,
.mds-icon-btn--ghost-primary.mds-icon-btn--disabled {
  color: var(--color-text-disabled);
  background-color: transparent;
}

/* --- Ghost Accent --- */
.mds-icon-btn--ghost-accent {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-accent);
}

.mds-icon-btn--ghost-accent:hover {
  color: var(--color-accent-hover);
  background-color: rgba(56, 133, 87, 0.08);
}

.mds-icon-btn--ghost-accent:active {
  background-color: var(--color-accent-active);
  color: var(--color-text-inverse);
}

.mds-icon-btn--ghost-accent:disabled,
.mds-icon-btn--ghost-accent.mds-icon-btn--disabled {
  color: var(--color-text-disabled);
  background-color: transparent;
}

/* --- Ghost Light (for dark backgrounds) --- */
.mds-icon-btn--ghost-light {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-white);
}

.mds-icon-btn--ghost-light:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.mds-icon-btn--ghost-light:active {
  background-color: rgba(255, 255, 255, 0.25);
}

.mds-icon-btn--ghost-light:disabled,
.mds-icon-btn--ghost-light.mds-icon-btn--disabled {
  color: var(--color-gray-400);
  background-color: transparent;
}

/* ============================================================
   LOADING STATE
   ============================================================ */
.mds-icon-btn--loading {
  position: relative;
  pointer-events: none;
}

.mds-icon-btn--loading .mds-icon-btn__icon {
  visibility: hidden;
}

.mds-icon-btn--loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: mds-icon-btn-spin 0.6s linear infinite;
}

@keyframes mds-icon-btn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   TOOLTIP (accessible label on hover)
   ============================================================ */
.mds-icon-btn[aria-label] {
  position: relative;
}

.mds-icon-btn[aria-label]::before {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  color: var(--color-text-inverse);
  background-color: var(--color-gray-700);
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: var(--z-tooltip);
}

.mds-icon-btn[aria-label]:hover::before,
.mds-icon-btn[aria-label]:focus-visible::before {
  opacity: 1;
}


/* ================================================================
   Section 20: Inline Link
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Inline Link Component
   Interactive, inline text that allows users to navigate between
   pages or sections of a website or application when clicked.
   Designed to live within body text (paragraphs, lists, etc.).
   ============================================================ */

/* --- Inline Link Base --- */
.mds-inline-link {
  font-family: var(--font-family);
  /* Type size/style inherited from parent */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    text-decoration-thickness var(--transition-fast);
}

/* Icon for external/document links */
.mds-inline-link__icon {
  display: inline-flex;
  align-items: baseline;
  margin-left: 0.2em;
  vertical-align: baseline;
  text-decoration: none;
}

.mds-inline-link__icon svg {
  width: 0.8em;
  height: 0.8em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: baseline;
  position: relative;
  top: 0.05em;
}

/* ============================================================
   Color Variant: Primary (on light backgrounds)
   ============================================================ */
.mds-inline-link--primary {
  color: var(--color-text-link);
}

/* Primary: Hover - underline thickens, color darkens */
.mds-inline-link--primary:hover {
  color: var(--color-text-link-hover);
  text-decoration-thickness: 2px;
}

/* Primary: Focus - visible focus ring */
.mds-inline-link--primary:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Primary: Active */
.mds-inline-link--primary:active {
  color: var(--color-primary-active);
}

/* Primary: Visited */
.mds-inline-link--primary:visited {
  color: #6B3FA0; /* Purple for visited links */
}

/* ============================================================
   Color Variant: Light (on dark backgrounds)
   ============================================================ */
.mds-inline-link--light {
  color: var(--color-white);
  text-decoration-color: var(--color-white);
}

.mds-inline-link--light:hover {
  color: var(--color-gray-200);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-gray-200);
}

.mds-inline-link--light:focus-visible {
  outline: 2px solid var(--color-focus-dark);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.mds-inline-link--light:active {
  color: var(--color-gray-300);
}

.mds-inline-link--light:visited {
  color: #C4A4E6; /* Lighter purple for dark bg visited */
}

/* ============================================================
   Disabled State
   Not typically needed for links, but provided for edge cases.
   ============================================================ */
.mds-inline-link--disabled,
.mds-inline-link[aria-disabled="true"] {
  color: var(--color-text-disabled);
  text-decoration-color: var(--color-text-disabled);
  pointer-events: none;
  cursor: default;
}

/* ============================================================
   Type: External Link
   Shows external-link icon after text. Underline extends
   across text and icon.
   ============================================================ */
.mds-inline-link--external {
  /* Icon is part of underline span */
}

/* ============================================================
   Type: Document Link
   Shows document icon after text. Includes file info
   (e.g., format/size) in the link text.
   ============================================================ */
.mds-inline-link--document {
  /* Icon is part of underline span */
}

/* ============================================================
   Responsive Behavior
   Inline links wrap naturally with their surrounding text.
   ============================================================ */


/* ================================================================
   Section 20b: Action Link
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Action Link Component
   A stronger, non-underlined link used for calls to action
   (e.g. "View online help"), with a trailing directional icon.
   Type style: Labels/Label LG - medium weight, 18px, line-height 1.2.
   ============================================================ */
.mds-action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);        /* 4px */
  padding: var(--space-1) 0;  /* 4px */
  font-family: var(--font-family);
  font-size: var(--type-size-md); /* 18px */
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--color-text-link);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.mds-action-link:hover {
  text-decoration: underline;
}
.mds-action-link__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.mds-action-link__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ============================================================
   Color Variant: Primary (on light backgrounds)
   ============================================================ */
.mds-action-link--primary {
  color: var(--color-text-link);
}

.mds-action-link--primary:hover {
  color: var(--color-text-link-hover);
}

.mds-action-link--primary:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.mds-action-link--primary:active {
  color: var(--color-primary-active);
}

/* ============================================================
   Color Variant: Accent
   ============================================================ */
.mds-action-link--accent {
  color: var(--color-accent);
}

.mds-action-link--accent:hover {
  color: var(--color-accent-hover);
}

.mds-action-link--accent:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.mds-action-link--accent:active {
  color: var(--color-accent-active);
}

/* ============================================================
   Color Variant: Light (on dark backgrounds)
   ============================================================ */
.mds-action-link--light {
  color: var(--color-white);
}

.mds-action-link--light:hover {
  color: var(--color-gray-200);
}

.mds-action-link--light:focus-visible {
  outline: 2px solid var(--color-focus-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.mds-action-link--light:active {
  color: var(--color-gray-300);
}

/* ============================================================
   Disabled State
   ============================================================ */
.mds-action-link--disabled,
.mds-action-link[aria-disabled="true"] {
  color: var(--color-text-disabled);
  pointer-events: none;
  cursor: default;
}

/* ================================================================
   Section 21: Inline Message
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Inline Message Component
   Persistent, non-dismissible messages that inform users about
   critical information, status updates, or required actions.
   Max width: 996px
   Variants: info, success, warning, error
   ============================================================ */

/* --- Inline Message Container --- */
.mds-inline-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background-color: var(--color-gray-50);
  width: 100%;
  font-family: var(--font-family);
  margin-top: 0;
  margin-bottom: var(--space-6);
}

/* --- Icon ---
   Icon-holder is padded (not sized) around a fixed 24px glyph, so it grows/shrinks
   with the padding alone and stays pinned to the top of the row (align-items:
   flex-start above) - keeping it inline with the heading rather than centering
   across a possibly multi-line message. */
.mds-inline-message__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mds-inline-message__icon svg,
.mds-inline-message__icon img {
  width: 20px;
  height: 20px;
}

/* --- Content Area --- */
.mds-inline-message__content {
  flex: 1;
  min-width: 0;
}

/* --- Content Area, inline variant ---
   Lays the heading and a trailing element (e.g. a link) out on one
   wrapping row instead of stacking them. */
.mds-inline-message__content--inline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.mds-inline-message__content--inline .mds-inline-message__heading {
  margin: 0;
}

/* --- Heading --- */
.mds-inline-message__heading {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

/* --- Description --- */
.mds-inline-message__description {
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  max-width: 150ch;
  margin: 0 0 var(--space-3);
}

.mds-inline-message__description:last-child {
  margin-bottom: 0;
}

.mds-inline-message__description li {
  margin-bottom: 0;
}

.mds-inline-message__description a {
  color: var(--color-text-link);
  text-decoration: underline;
}

.mds-inline-message__description a:hover {
  color: var(--color-text-link-hover);
}

/* A second description paragraph in the same message needs a gap from the
   first - generic component behavior, not tied to any one page. */
.mds-inline-message__description + .mds-inline-message__description {
  margin-top: 0.5rem;
}

/* Larger gap variant, for a description that follows something other than
   its own heading (e.g. a preceding unrelated block within the same
   message) - used across registration, cart, and review-flow pages. */
.mds-inline-message__description--top-gap {
  margin-top: 0.75rem;
}

/* --- Publish Date --- */
.mds-inline-message__date {
  font-family: var(--font-family);
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================================
   Variant: Info (Default)
   ============================================================ */
.mds-inline-message--info .mds-inline-message__icon {
  color: var(--color-primary);
  margin-top:0.08rem;
}

/* Info with tinted background */
.mds-inline-message--info.mds-inline-message--tinted {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
}

/* ============================================================
   Variant: Success
   ============================================================ */
.mds-inline-message--success .mds-inline-message__icon {
  color: var(--color-success);
}

.mds-inline-message--success.mds-inline-message--tinted {
  background-color: var(--color-success-light);
  border-color: var(--color-success-border);
}

/* ============================================================
   Variant: Warning
   Matches the Info/Success/Error pattern above: the bare variant class
   tints only the icon; the filled yellow background/border require the
   --tinted modifier too. (Previously --warning alone filled unconditionally,
   the only one of the four that didn't require --tinted - every existing
   --warning usage in the app was audited and given --tinted explicitly
   where the yellow fill was actually intended, so this is a behavior-
   preserving fix everywhere except the one page it was reported wrong on.) */
.mds-inline-message--warning .mds-inline-message__icon {
  color: var(--color-warning-text);
}

.mds-inline-message--warning.mds-inline-message--tinted {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning-border);
}

/* ============================================================
   Variant: Error
   ============================================================ */
.mds-inline-message--error .mds-inline-message__icon {
  color: var(--color-danger);
}

.mds-inline-message--error.mds-inline-message--tinted {
  background-color: var(--color-danger-light);
  border-color: var(--color-danger-border);
}

/* ============================================================
   Responsive Behavior
   Min width: 280px, text wraps, layout unchanged
   ============================================================ */
@media (max-width: 480px) {
  .mds-inline-message {
    padding: var(--space-3) var(--space-4);
  }
}


/* ================================================================
   Section 22: Input Group
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Input Group Component
   Combines a text input field with optional buttons or labels
   on either side for search bars, prompt inputs, select menus.
   Min width: 186px
   ============================================================ */

/* --- Input Group Wrapper (form-group level) --- */
.mds-input-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  min-width: 186px;
  max-width: 600px;
  width: 100%;
}

/* --- Label --- */
.mds-input-group-wrapper__label {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

/* --- Required Indicator --- */
.mds-input-group-wrapper__required {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
  margin-left: var(--space-1);
}

/* --- Help Text --- */
.mds-input-group-wrapper__help-text {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

/* --- Input Group Container --- */
.mds-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-white);
  min-width: 186px;
  transition: border-color var(--transition-fast);
}

/* --- Left Button / Label --- */
.mds-input-group__left-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

.mds-input-group__left-btn:hover {
  background-color: var(--color-gray-50);
}

.mds-input-group__left-btn:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
}

/* Primary variant for left button */
.mds-input-group__left-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-right-color: var(--color-primary-active);
}

.mds-input-group__left-btn--primary:hover {
  background-color: var(--color-primary-hover);
}

/* --- Input Field --- */
.mds-input-group__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: none;
  outline: none;
}

.mds-input-group__input::placeholder {
  color: var(--color-text-disabled);
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

/* Focus within entire group */
.mds-input-group:focus-within {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
}

/* --- Right Button / Label --- */
.mds-input-group__right-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: none;
  border-left: 1px solid var(--color-border);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

.mds-input-group__right-btn:hover {
  background-color: var(--color-gray-50);
}

.mds-input-group__right-btn:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
}

/* Primary variant for right button */
.mds-input-group__right-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-left-color: var(--color-primary-active);
}

.mds-input-group__right-btn--primary:hover {
  background-color: var(--color-primary-hover);
}

/* --- Button Icons (chevron, search, plus, minus) --- */
.mds-input-group__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mds-input-group__btn-icon svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   State: Disabled
   ============================================================ */
.mds-input-group--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.mds-input-group--disabled .mds-input-group__input {
  background-color: var(--color-gray-100);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ============================================================
   State: Error
   ============================================================ */
.mds-input-group--error {
  border-color: var(--color-border-danger);
}

.mds-input-group--error:focus-within {
  border-color: var(--color-border-danger);
  outline-color: var(--color-border-danger);
}

.mds-input-group-wrapper__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-danger);
  margin-top: var(--space-1);
}

.mds-input-group-wrapper__error-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* ============================================================
   Responsive Behavior
   ============================================================ */
@media (max-width: 480px) {
  .mds-input-group-wrapper {
    max-width: 100%;
    min-width: 0;
  }

  .mds-input-group {
    min-width: 0;
  }
}


/* ================================================================
   Section 23: Lists
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Lists Component
   Styled unordered, ordered, and description lists.
   Bullet icon: square, green (#388557)
   Number color: green (#388557)
   Width: fill container
   ============================================================ */

/* --- Unordered List --- */
.mds-list-unordered {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-family);
}

.mds-list-unordered > li {
  position: relative;
  padding-left: calc(var(--space-5) + 8px);
  margin-bottom: var(--space-3);
  font-size: var(--type-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

.mds-list-unordered > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 1px;
  flex-shrink: 0;
}

/* --- Ordered List --- */
.mds-list-ordered {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-family);
  counter-reset: mds-list-counter;
}

.mds-list-ordered > li {
  position: relative;
  padding-left: calc(var(--space-6) + 4px);
  margin-bottom: var(--space-3);
  font-size: var(--type-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  counter-increment: mds-list-counter;
}

.mds-list-ordered > li::before {
  content: counter(mds-list-counter) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--font-weight-regular);
  color: var(--color-accent);
  min-width: var(--space-6);
  text-align: right;
  padding-right: var(--space-2);
}

/* --- Description List --- */
.mds-list-description {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-family);
}

.mds-list-description dt {
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.mds-list-description dd {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-5);
}

/* Description list items use unordered sub-list styling */
.mds-list-description dd ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mds-list-description dd ul li {
  position: relative;
  padding-left: calc(var(--space-5) + 8px);
  margin-bottom: var(--space-2);
  font-size: var(--type-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

.mds-list-description dd ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 1px;
}

/* --- Optional: List with heading/title --- */
.mds-list-title {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

/* ============================================================
   Nested Lists
   ============================================================ */
.mds-list-unordered .mds-list-unordered,
.mds-list-ordered .mds-list-ordered {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* ============================================================
   Responsive Behavior
   ============================================================ */
@media (max-width: 480px) {
  .mds-list-unordered > li,
  .mds-list-ordered > li {
    font-size: var(--type-size-sm);
  }
}


/* ================================================================
   Section 24: Loader
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Loader Component
   Rotating animation that indicates content is loading or processing.
   ============================================================ */

/* --- Loader Container --- */
.mds-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* --- Spinner Track + Arc (SVG-based) --- */
.mds-loader__spinner {
  display: inline-block;
  border-radius: var(--radius-full);
  animation: mds-loader-spin 1s linear infinite;
}

/* Circle-border approach for pure CSS spinners */
.mds-loader__spinner--css {
  border-style: solid;
  border-color: var(--color-gray-300);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: mds-loader-spin 1s linear infinite;
}

/* --- Size Variants --- */

/* SM: 24px */
.mds-loader--sm .mds-loader__spinner,
.mds-loader--sm .mds-loader__spinner--css {
  width: 1.5rem;
  height: 1.5rem;
}
.mds-loader--sm .mds-loader__spinner--css {
  border-width: 2px;
}

/* MD: 48px (default) */
.mds-loader--md .mds-loader__spinner,
.mds-loader--md .mds-loader__spinner--css,
.mds-loader .mds-loader__spinner,
.mds-loader .mds-loader__spinner--css {
  width: 3rem;
  height: 3rem;
}
.mds-loader--md .mds-loader__spinner--css,
.mds-loader .mds-loader__spinner--css {
  border-width: 3px;
}

/* LG: 72px */
.mds-loader--lg .mds-loader__spinner,
.mds-loader--lg .mds-loader__spinner--css {
  width: 4.5rem;
  height: 4.5rem;
}
.mds-loader--lg .mds-loader__spinner--css {
  border-width: 4px;
}

/* XL: 96px */
.mds-loader--xl .mds-loader__spinner,
.mds-loader--xl .mds-loader__spinner--css {
  width: 6rem;
  height: 6rem;
}
.mds-loader--xl .mds-loader__spinner--css {
  border-width: 5px;
}

/* --- Color Variants --- */

/* Default (light background): gray track, bay-blue arc */
.mds-loader--default .mds-loader__spinner--css,
.mds-loader .mds-loader__spinner--css {
  border-color: var(--color-gray-300);
  border-top-color: var(--color-primary);
}

/* Light variant (dark background): dark track, lighter arc */
.mds-loader--light .mds-loader__spinner--css {
  border-color: var(--color-primary-darker);
  border-top-color: var(--color-primary-hover);
}

/* --- SVG Spinner Styles --- */
.mds-loader__track {
  fill: none;
  stroke: var(--color-gray-300);
}
.mds-loader__arc {
  fill: none;
  stroke: var(--color-primary);
  stroke-linecap: round;
}

.mds-loader--light .mds-loader__track {
  stroke: var(--color-primary-darker);
}
.mds-loader--light .mds-loader__arc {
  stroke: var(--color-primary-hover);
}

/* --- Loading Label --- */
.mds-loader__label {
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.mds-loader--light .mds-loader__label {
  color: var(--color-text-inverse);
}

/* SM size hides label by default */
.mds-loader--sm .mds-loader__label {
  display: none;
}

/* --- Inline Loader (for buttons) --- */
.mds-loader--inline {
  flex-direction: row;
  gap: var(--space-2);
}

.mds-loader--inline .mds-loader__spinner,
.mds-loader--inline .mds-loader__spinner--css {
  width: 1.25rem;
  height: 1.25rem;
}

.mds-loader--inline .mds-loader__spinner--css {
  border-width: 2px;
  border-color: var(--color-white);
  border-top-color: transparent;
}

.mds-loader--inline .mds-loader__label {
  font-size: var(--type-size-base);
  color: var(--color-text-inverse);
}

/* --- Button with Loader --- */
.mds-btn--loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  background-color: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: not-allowed;
  opacity: 0.9;
}

.mds-btn--loading .mds-loader__spinner--css {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
}

/* --- Full-page Overlay Loader --- */
.mds-loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: var(--z-modal);
}

.mds-loader-overlay .mds-loader {
  padding: var(--space-8);
}

/* --- Spin Keyframes --- */
@keyframes mds-loader-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Reduced Motion: show static fallback --- */
@media (prefers-reduced-motion: reduce) {
  .mds-loader__spinner,
  .mds-loader__spinner--css {
    animation: none;
  }

  /* Show a static partial border instead of spinning */
  .mds-loader__spinner--css {
    border-top-color: var(--color-primary);
    opacity: 0.7;
  }
}


/* ================================================================
   Section 25: Modal
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Modal Component
   Requires: mds-base.css
   ============================================================ */

/* --- Overlay / Backdrop --- */
.mds-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: var(--z-modal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.mds-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Modal Window --- */
.mds-modal {
  position: relative;
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  max-width: 650px;
  min-width: 280px;
  width: 100%;
  padding: var(--space-8);
  text-align: center;
  transform: translateY(20px) scale(0.97);
  transition: transform var(--transition-normal);
  overflow-y: auto;
  max-height: calc(100vh - var(--space-8));
}

.mds-modal-overlay.is-open .mds-modal {
  transform: translateY(0) scale(1);
}

/* --- Close Button --- */
.mds-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--type-size-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}

.mds-modal__close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-text-primary);
}

.mds-modal__close:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Icon --- */
.mds-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-4);
  font-size: var(--type-size-xl);
  border-width: 3px;
  border-style: solid;
}

.mds-modal__icon--info {
  background-color: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.mds-modal__icon--success {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.mds-modal__icon--warning {
  background-color: var(--color-duckling-yellow);
  border-color: var(--color-duckling-yellow);
  color: var(--color-black);
}

.mds-modal__icon--alert {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

/* --- Title --- */
.mds-modal__title {
  font-family: var(--font-family);
  font-size: var(--type-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

/* --- Description / Body --- */
.mds-modal__body {
  font-size: var(--type-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-6);
  max-width: none;
}

/* --- Button Group --- */
.mds-modal__actions {
  gap: var(--space-3);
  justify-content: center;
}

.mds-modal__actions .mds-modal__btn {
  flex: 1;
  min-height: 44px;
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  padding: var(--space-3) var(--space-5);
}

/* Primary (fill) button */
.mds-modal__btn--primary {
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: var(--color-text-inverse);
}

.mds-modal__btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.mds-modal__btn--primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.mds-modal__btn--primary:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* Secondary (outline) button */
.mds-modal__btn--secondary {
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.mds-modal__btn--secondary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.mds-modal__btn--secondary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--color-text-inverse);
}

.mds-modal__btn--secondary:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* ============================================================
   Responsive: Mobile - stacked full-width buttons
   ============================================================ */
@media (max-width: 480px) {
  .mds-modal {
    padding: var(--space-6);
    min-width: 0;
    max-width: 100%;
    border-radius: var(--radius-md);
  }

  .mds-modal__actions {
    display: flex;
    flex-direction: column;
  }

  .mds-modal__actions .mds-modal__btn {
    width: 100%;
  }
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mds-modal-overlay {
    transition: none;
  }
  .mds-modal {
    transition: none;
  }
}

/* ============================================================
   Body scroll lock when modal is open
   ============================================================ */
body.mds-modal-open {
  overflow: hidden;
}


/* ================================================================
   Section 26: Modal Shell
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Modal Shell Component
   An empty modal container for custom content.
   Requires: mds-base.css
   ============================================================ */

/* --- Overlay / Backdrop --- */
.mds-modal-shell-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: var(--z-modal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.mds-modal-shell-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Modal Shell Window --- */
.mds-modal-shell {
  position: relative;
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  max-width: 650px;
  min-width: 280px;
  width: 100%;
  padding: var(--space-8);
  transform: translateY(20px) scale(0.97);
  transition: transform var(--transition-normal);
  overflow-y: auto;
  max-height: calc(100vh - var(--space-8));
}

.mds-modal-shell-overlay.is-open .mds-modal-shell {
  transform: translateY(0) scale(1);
}

/* --- Close Button --- */
.mds-modal-shell__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--type-size-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}

.mds-modal-shell__close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-text-primary);
}

.mds-modal-shell__close:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Content Placeholder Area --- */
.mds-modal-shell__content {
  /* Container for any custom content swapped in */
  width: 100%;
}

/* ============================================================
   Responsive: Mobile - tighter padding
   ============================================================ */
@media (max-width: 480px) {
  .mds-modal-shell {
    padding: var(--space-4);
    min-width: 0;
    max-width: 100%;
  }
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mds-modal-shell-overlay {
    transition: none;
  }
  .mds-modal-shell {
    transition: none;
  }
}

/* ============================================================
   Body scroll lock when modal shell is open
   ============================================================ */
body.mds-modal-shell-open {
  overflow: hidden;
}


/* ================================================================
   Section 27: Pagination
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Pagination Component
   Navigational component for breaking up large content lists.
   Max 7 page markers shown at a time, with collapsed indicators.
   ============================================================ */

/* --- Pagination Container --- */
.mds-pagination {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-family);
}

.mds-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Page Number Buttons --- */
.mds-pagination__item {
  display: inline-flex;
}

.mds-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  line-height: 1;
}

/* Hover state */
.mds-pagination__link:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* Active / Pressed state (current page) */
.mds-pagination__link[aria-current="page"],
.mds-pagination__link--active {
  background-color: var(--color-primary-darker);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-darker);
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

/* Focus state */
.mds-pagination__link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Page Number + Prev/Next/First/Last Buttons --- */
.mds-pagination__page,
.mds-pagination__pager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 35px;
  height: 35px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary, #14558f);
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}

/* Prev/Next get horizontal padding */
.mds-pagination__pager {
  padding: 0 12px;
}

/* First/Last icon-only buttons - hidden */
.mds-pagination__pager--icon {
  display: none;
}

/* Small gap between all buttons */
.mds-pagination__page,
.mds-pagination__pager:not(.mds-pagination__pager--icon) {
  margin: 0 1px;
}

.mds-pagination__page:hover,
.mds-pagination__pager:hover {
  background-color: var(--color-primary-light, #D0DDE9);
  color: var(--color-primary, #14558f);
}

/* Active page */
.mds-pagination__page--active,
.mds-pagination__page[aria-current="page"] {
  background-color: var(--color-primary, #14558f);
  color: #fff;
  font-weight: 500;
  cursor: default;
}

.mds-pagination__page--active:hover,
.mds-pagination__page[aria-current="page"]:hover {
  background-color: var(--color-primary, #14558f);
  color: #fff;
}

/* Disabled state */
.mds-pagination__pager[disabled],
.mds-pagination__pager--disabled {
  cursor: default;
  pointer-events: none;
  color: var(--color-text-disabled);
}

.mds-pagination__pager[disabled]:hover,
.mds-pagination__pager--disabled:hover {
  background: none;
}

.mds-pagination__page:focus-visible,
.mds-pagination__pager:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Chevron Arrows --- */
.mds-pagination__chevron {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: currentColor;
}

.mds-pagination__chevron--left {
  transform: rotate(135deg);
}

.mds-pagination__chevron--right {
  transform: rotate(-45deg);
}

/* --- Collapsed Page Indicator (ellipsis) --- */
.mds-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  color: var(--color-text-disabled);
  font-size: var(--type-size-sm);
  letter-spacing: 0.1em;
  cursor: default;
  user-select: none;
}

/* --- Mobile Responsive: dropdown select --- */
.mds-pagination--mobile {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.mds-pagination--mobile .mds-pagination__select-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.mds-pagination--mobile .mds-pagination__select {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.mds-pagination--mobile .mds-pagination__select select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 3.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23535353' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.mds-pagination--mobile .mds-pagination__select select:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-pagination--mobile .mds-pagination__total {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* --- Responsive Behavior --- */
/* Desktop: show numbered pagination, hide mobile select */
@media (min-width: 481px) {
  .mds-pagination--desktop {
    display: flex;
  }
  .mds-pagination--mobile {
    display: none;
  }
}

/* Mobile: show select, hide numbered pagination */
@media (max-width: 480px) {
  .mds-pagination--desktop {
    display: none;
  }
  .mds-pagination--mobile {
    display: flex;
  }
}


/* ================================================================
   Section 28: Password Input
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Password Input Component
   An input designed to capture passwords with hide/show
   characters functionality.
   Min width: 186px
   ============================================================ */

/* --- Password Input Group Wrapper --- */
.mds-password-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  min-width: 186px;
  max-width: 600px;
  width: 100%;
}

/* --- Input + Toggle Container --- */
.mds-password-input-wrapper {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
}

/* --- Password Input Field --- */
.mds-password-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: calc(var(--space-4) + 44px); /* room for toggle button */
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              outline var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

/* --- Placeholder --- */
.mds-password-input::placeholder {
  color: var(--color-text-disabled);
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

/* --- Hover State --- */
.mds-password-input:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-dark);
}

/* --- Focus / Active State --- */
.mds-password-input:focus,
.mds-password-input:focus-visible {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
  box-shadow: none;
}

/* --- Disabled State --- */
.mds-password-input:disabled,
.mds-password-input[disabled] {
  background-color: var(--color-gray-100);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* --- Error State --- */
.mds-password-input--error {
  border-color: var(--color-border-danger);
}

.mds-password-input--error:focus,
.mds-password-input--error:focus-visible {
  border-color: var(--color-border-danger);
  outline-color: var(--color-border-danger);
}

/* --- Show/Hide Toggle Button --- */
.mds-password-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  color: var(--color-primary);
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
}

.mds-password-toggle:hover {
  color: var(--color-primary-hover);
  background-color: var(--color-gray-50);
}

.mds-password-toggle:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.mds-password-toggle svg,
.mds-password-toggle .mds-password-toggle__icon {
  width: 20px;
  height: 20px;
}

/* --- Password Requirements Checklist --- */
.mds-password-requirements {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mds-password-requirements__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* --- Requirement Met (pass) --- */
.mds-password-requirements__item--met {
  color: var(--color-text-success);
}

.mds-password-requirements__item--met::before {
  content: "\2713"; /* checkmark */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  font-size: var(--type-size-sm);
  color: var(--color-text-success);
}

/* --- Requirement Not Met (fail) --- */
.mds-password-requirements__item--unmet {
  color: var(--color-text-secondary);
}

.mds-password-requirements__item--unmet::before {
  content: "\2717"; /* x mark */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
}

/* --- Responsive: Full width on mobile --- */
@media (max-width: 480px) {
  .mds-password-group {
    max-width: 100%;
  }
}


/* ================================================================
   Section 29: Phone Input
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Phone Input Component
   An input designed to capture telephone numbers with built-in
   formatting and country code selection.
   Min width: 190px
   ============================================================ */

/* --- Phone Input Group Wrapper --- */
.mds-phone-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  min-width: 190px;
  max-width: 600px;
  width: 100%;
}

/* --- Input + Country Code Container --- */
.mds-phone-input-wrapper {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
}

/* --- Country Code Dropdown Button --- */
.mds-phone-country-select {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-width: 64px;
  min-height: 44px;
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.mds-phone-country-select:hover:not(:disabled) {
  background-color: var(--color-gray-50);
  border-color: var(--color-border-dark);
}

.mds-phone-country-select:focus,
.mds-phone-country-select:focus-visible {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
  z-index: 1;
}

.mds-phone-country-select:disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.7;
}

/* --- Flag Icon --- */
.mds-phone-country-select__flag {
  width: 24px;
  height: 16px;
  object-fit: cover;
  flex-shrink: 0;
}

/* --- Dropdown Chevron --- */
.mds-phone-country-select__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.mds-phone-country-select[aria-expanded="true"] .mds-phone-country-select__chevron {
  transform: rotate(180deg);
}

/* --- Phone Number Input Field --- */
.mds-phone-input {
  display: block;
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              outline var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

/* --- Placeholder --- */
.mds-phone-input::placeholder {
  color: var(--color-text-disabled);
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

/* --- Hover State --- */
.mds-phone-input:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-dark);
}

/* --- Focus / Active State --- */
.mds-phone-input:focus,
.mds-phone-input:focus-visible {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
  box-shadow: none;
  z-index: 1;
}

/* --- Disabled State --- */
.mds-phone-input:disabled,
.mds-phone-input[disabled] {
  background-color: var(--color-gray-100);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

.mds-phone-input:disabled::placeholder {
  color: var(--color-text-disabled);
}

/* --- Error State --- */
.mds-phone-input--error {
  border-color: var(--color-border-danger);
}

.mds-phone-input--error:focus,
.mds-phone-input--error:focus-visible {
  border-color: var(--color-border-danger);
  outline-color: var(--color-border-danger);
}

/* --- Country Dropdown Menu --- */
.mds-phone-country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  display: none;
  min-width: 240px;
  max-height: 300px;
  overflow-y: auto;
  margin-top: var(--space-1);
  padding: var(--space-2) 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.mds-phone-country-dropdown--open {
  display: block;
}

/* --- Country Dropdown Item --- */
.mds-phone-country-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  margin-bottom: 0;
}

.mds-phone-country-dropdown__item:hover {
  background-color: var(--color-gray-50);
}

.mds-phone-country-dropdown__item:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
}

.mds-phone-country-dropdown__item-flag {
  width: 24px;
  height: 16px;
  object-fit: cover;
  flex-shrink: 0;
}

.mds-phone-country-dropdown__item-code {
  color: var(--color-text-secondary);
  margin-left: auto;
}

/* --- Dropdown positioning context --- */
.mds-phone-input-wrapper {
  position: relative;
}

/* --- Responsive: Full width on mobile --- */
@media (max-width: 480px) {
  .mds-phone-group {
    max-width: 100%;
  }
}


/* ================================================================
   Section 30: Popover
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Popover Component
   Requires: mds-base.css
   ============================================================ */

/* --- Trigger Link --- */
.mds-popover-trigger {
  color: var(--color-text-link);
  text-decoration: none;
  border-bottom: 2px dashed var(--color-text-link);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font: inherit;
  padding: 0;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.mds-popover-trigger:hover {
  color: var(--color-text-link-hover);
  border-bottom-color: var(--color-text-link-hover);
}

.mds-popover-trigger:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Inverse variant (for dark backgrounds) */
.mds-popover-trigger--inverse {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

.mds-popover-trigger--inverse:hover {
  color: var(--color-gray-200);
  border-bottom-color: var(--color-gray-200);
}

.mds-popover-trigger--inverse:focus-visible {
  outline-color: var(--color-focus-dark);
}

/* --- Popover Wrapper (positioning context) --- */
.mds-popover-wrapper {
  position: relative;
  display: inline;
}

/* --- Popover Container --- */
.mds-popover {
  position: absolute;
  z-index: var(--z-popover);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  min-width: 200px;
  width: max-content;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}

.mds-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- Positioning --- */
/* Default: below the trigger, centered */
.mds-popover--bottom {
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}

.mds-popover--bottom.is-open {
  transform: translateX(-50%) translateY(0);
}

.mds-popover--top {
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
}

.mds-popover--top.is-open {
  transform: translateX(-50%) translateY(0);
}

.mds-popover--left {
  right: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
}

.mds-popover--left.is-open {
  transform: translateY(-50%) translateX(0);
}

.mds-popover--right {
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%) translateX(8px);
}

.mds-popover--right.is-open {
  transform: translateY(-50%) translateX(0);
}

/* --- Caret / Arrow --- */
.mds-popover__caret {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-gray-200);
  transform: rotate(45deg);
}

/* Caret for bottom-positioned popover (arrow points up) */
.mds-popover--bottom .mds-popover__caret {
  top: -7px;
  left: 50%;
  margin-left: -6px;
  border-bottom: none;
  border-right: none;
}

/* Caret for top-positioned popover (arrow points down) */
.mds-popover--top .mds-popover__caret {
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  border-top: none;
  border-left: none;
}

/* Caret for left-positioned popover (arrow points right) */
.mds-popover--left .mds-popover__caret {
  right: -7px;
  top: 50%;
  margin-top: -6px;
  border-left: none;
  border-bottom: none;
}

/* Caret for right-positioned popover (arrow points left) */
.mds-popover--right .mds-popover__caret {
  left: -7px;
  top: 50%;
  margin-top: -6px;
  border-right: none;
  border-top: none;
}

/* --- Header --- */
.mds-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

/* --- Heading --- */
.mds-popover__heading {
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

/* --- Close Button --- */
.mds-popover__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--type-size-base);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
  line-height: 1;
}

.mds-popover__close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-text-primary);
}

.mds-popover__close:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Body --- */
.mds-popover__body {
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  margin: 0;
}

/* ============================================================
   Responsive: container narrower than 480px fills width
   ============================================================ */
@media (max-width: 480px) {
  .mds-popover {
    max-width: calc(100vw - var(--space-8));
    min-width: 0;
    left: 0;
    right: 0;
    transform: translateY(8px);
  }

  .mds-popover.is-open {
    transform: translateY(0);
  }

  .mds-popover--bottom,
  .mds-popover--top {
    left: 0;
    right: 0;
    transform: translateY(8px);
  }

  .mds-popover--bottom.is-open,
  .mds-popover--top.is-open {
    transform: translateY(0);
  }
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mds-popover {
    transition: none;
  }
}


/* ================================================================
   Section 31: Popup Menu
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Popup Menu Component
   Requires: mds-base.css
   ============================================================ */

/* --- Popup Menu Wrapper (positioning context) --- */
.mds-popup-menu-wrapper {
  position: relative;
  display: inline-block;
}

/* --- Trigger Button --- */
.mds-popup-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.mds-popup-menu-trigger:hover {
  background-color: var(--color-gray-100);
}

.mds-popup-menu-trigger:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Popup Menu Container --- */
.mds-popup-menu {
  position: absolute;
  z-index: var(--z-modal);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  max-width: 600px;
  width: max-content;
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  list-style: none;
  margin: 0;
}

.mds-popup-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- Positioning --- */
/* Default: below trigger, left-aligned */
.mds-popup-menu--bottom-start {
  top: calc(100% + var(--space-1));
  left: 0;
}

.mds-popup-menu--bottom-end {
  top: calc(100% + var(--space-1));
  right: 0;
}

.mds-popup-menu--top-start {
  bottom: calc(100% + var(--space-1));
  left: 0;
}

.mds-popup-menu--top-end {
  bottom: calc(100% + var(--space-1));
  right: 0;
}

/* --- Menu Item --- */
.mds-popup-menu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  line-height: var(--line-height-snug);
}

.mds-popup-menu__item:hover {
  background-color: var(--color-gray-100);
}

/* Active state: blue background */
.mds-popup-menu__item:active,
.mds-popup-menu__item.is-active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Focus state: outline */
.mds-popup-menu__item:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
  background-color: var(--color-white);
}

/* Disabled state */
.mds-popup-menu__item[disabled],
.mds-popup-menu__item.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Left Icon --- */
.mds-popup-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  color: inherit;
}

.mds-popup-menu__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* --- Right Icon / Submenu Arrow --- */
.mds-popup-menu__arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-size-sm);
}

/* --- Separator --- */
.mds-popup-menu__separator {
  height: 1px;
  background-color: var(--color-gray-200);
  margin: var(--space-2) 0;
  border: none;
}

/* ============================================================
   Responsive: Minimum width enforced
   ============================================================ */
@media (max-width: 480px) {
  .mds-popup-menu {
    min-width: 160px;
    max-width: calc(100vw - var(--space-8));
  }
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mds-popup-menu {
    transition: none;
  }
}


/* ================================================================
   Section 32: Radio Button
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Radio Button Component
   A UI element that allows users to select exactly one option
   from a predefined set of mutually exclusive choices.
   ============================================================ */

/* --- Radio Button Group (fieldset wrapper) --- */
.mds-radio-group {
  border: none;
  padding: 0;
  margin: 0;
}

/* --- Group Label (legend) --- */
.mds-radio-group__legend {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  padding: 0;
  max-width: 30ch;
}

/* --- Required Indicator --- */
.mds-radio-group__required {
  color: var(--color-danger);
  margin-left: var(--space-1);
  font-weight: var(--font-weight-bold);
}

/* --- Help Text (below group label) --- */
.mds-radio-group__help-text {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  max-width: 80ch;
}

/* --- Individual Radio Button Item --- */
.mds-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  position: relative;

}

/* --- Hide Native Input --- */
.mds-radio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Custom Radio Circle --- */
.mds-radio__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  margin-top: 2px;
}

/* --- Inner Dot (shown when selected) --- */
.mds-radio__circle::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  margin: auto;
  border-radius: var(--radius-full);
  background-color: transparent;
  transition: background-color var(--transition-fast);
}

/* --- Label Text Container --- */
.mds-radio__label-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* --- Label --- */
.mds-radio__label {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  cursor: pointer;
}

/* --- Description Text --- */
.mds-radio__description {
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  max-width: 80ch;
}

/* ============================================================
   States
   ============================================================ */

/* --- Unselected (Default) --- */
/* Base styles above handle the default unselected state */

/* --- Selected --- */
.mds-radio__input:checked + .mds-radio__circle {
  border-color: var(--color-primary);
}

.mds-radio__input:checked + .mds-radio__circle::after {
  background-color: var(--color-primary);
}

/* --- Hover --- */
.mds-radio:hover .mds-radio__circle {
  border-color: var(--color-primary-hover);
}

.mds-radio:hover .mds-radio__input:checked + .mds-radio__circle {
  border-color: var(--color-primary-hover);
}

.mds-radio:hover .mds-radio__input:checked + .mds-radio__circle::after {
  background-color: var(--color-primary-hover);
}

/* --- Focus --- */
.mds-radio__input:focus-visible + .mds-radio__circle {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-color: var(--color-focus-light);
}

.mds-radio__input:focus-visible:checked + .mds-radio__circle {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

/* --- Error --- */
.mds-radio--error .mds-radio__circle {
  border-color: var(--color-danger);
}

.mds-radio--error .mds-radio__input:checked + .mds-radio__circle {
  border-color: var(--color-danger);
}

.mds-radio--error .mds-radio__input:checked + .mds-radio__circle::after {
  background-color: var(--color-danger);
}

/* --- Error Message --- */
.mds-radio-group__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-danger);
  margin-top: var(--space-2);
}

/* --- Disabled --- */
.mds-radio--disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.mds-radio--disabled .mds-radio__circle {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.mds-radio--disabled .mds-radio__input:checked + .mds-radio__circle {
  border-color: var(--color-gray-300);
}

.mds-radio--disabled .mds-radio__input:checked + .mds-radio__circle::after {
  background-color: var(--color-gray-400);
}

.mds-radio--disabled .mds-radio__label {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.mds-radio--disabled .mds-radio__description {
  color: var(--color-text-disabled);
}

/* ============================================================
   Horizontal Layout Modifier
   ============================================================ */
.mds-radio-group--horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.mds-radio-group--horizontal .mds-radio-group__legend {
  flex-basis: 100%;
}

.mds-radio-group--horizontal .mds-radio-group__help-text {
  flex-basis: 100%;
  margin-top: calc(-1 * var(--space-4));
}

/* ============================================================
   Responsive Behavior
   ============================================================ */
@media (max-width: 480px) {
  .mds-radio-group--horizontal {
    flex-direction: column;
    gap: 0;
  }

  .mds-radio {
    max-width: 100%;
  }
}


/* ================================================================
   Section 33: Scrollbar
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Scrollbar Component
   Custom scrollbar styling for scrollable containers.
   Track: 16px, Thumb: 8px. Persists visibly (no auto-hide).
   States: Default, Hover, Pressed.
   ============================================================ */

/* --- Scrollable Container --- */
.mds-scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* Keyboard-focusable container */
.mds-scrollable[tabindex] {
  outline: none;
}

.mds-scrollable[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* --- WebKit Scrollbar Styling (Chrome, Safari, Edge) --- */

/* Track: 16px wide, adopts background color */
.mds-scrollable::-webkit-scrollbar {
  width: 16px;
}

.mds-scrollable::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Thumb: 8px wide (centered in 16px track via border trick) */
.mds-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-500);
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-full);
  min-height: 40px;
}

/* Hover state: slightly lighter */
.mds-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-primary-hover);
  border: 4px solid transparent;
  background-clip: content-box;
}

/* Pressed / Active state: darker */
.mds-scrollable::-webkit-scrollbar-thumb:active {
  background-color: var(--color-primary);
  border: 4px solid transparent;
  background-clip: content-box;
}

/* --- Firefox Scrollbar Styling --- */
.mds-scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-500) transparent;
}

/* --- Horizontal Scrollbar --- */
.mds-scrollable--horizontal {
  overflow-y: hidden;
  overflow-x: auto;
}

.mds-scrollable--horizontal::-webkit-scrollbar {
  height: 16px;
  width: auto;
}

.mds-scrollable--horizontal::-webkit-scrollbar-track {
  background-color: transparent;
}

.mds-scrollable--horizontal::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-500);
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-full);
  min-width: 40px;
}

.mds-scrollable--horizontal::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-primary-hover);
  border: 4px solid transparent;
  background-clip: content-box;
}

.mds-scrollable--horizontal::-webkit-scrollbar-thumb:active {
  background-color: var(--color-primary);
  border: 4px solid transparent;
  background-clip: content-box;
}

/* --- Both Axes --- */
.mds-scrollable--both {
  overflow: auto;
}

/* --- Dark Background Variant --- */
.mds-scrollable--dark::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-400);
  border: 4px solid transparent;
  background-clip: content-box;
}

.mds-scrollable--dark::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-300);
  border: 4px solid transparent;
  background-clip: content-box;
}

.mds-scrollable--dark::-webkit-scrollbar-thumb:active {
  background-color: var(--color-white);
  border: 4px solid transparent;
  background-clip: content-box;
}

.mds-scrollable--dark {
  scrollbar-color: var(--color-gray-400) transparent;
}

/* --- Always-visible Scrollbar (prevent fade-out in Safari/macOS) --- */
.mds-scrollable {
  -webkit-overflow-scrolling: touch;
}

/* Force scrollbar visibility on WebKit */
@supports (-webkit-appearance: none) {
  .mds-scrollable::-webkit-scrollbar {
    -webkit-appearance: none;
  }
}


/* ================================================================
   Section 34: Site Header
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Site Header Component
   The primary header bar for every Mass.gov site containing
   the state seal, site name, optional search, and optional
   utility navigation items.
   ============================================================ */

/* --- Header container --- */
.mds-site-header {
  width: 100%;
  background-color: var(--mds-background-section-brand-neutral-lowest);
  border-bottom: 1px solid var(--color-gray-200);
  font-family: var(--font-family);
}

/* Hide site-header bottom border when a nav bar follows it within the
   same parent (avoids a double-line appearance - the nav draws its own
   top border). */
*:has(> .xf-nav) > .mds-site-header,
*:has(> .mds-nav) > .mds-site-header {
  border-bottom: none !important;
}

.mds-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-4);
  min-height: 64px;
}

@media (min-width: 768px) {
  .mds-site-header__inner {
    padding: var(--space-4) var(--space-8);
    flex-wrap: nowrap;
  }
}

/* --- Brand / Logo area --- */
.mds-site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.mds-site-header__brand:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

.mds-site-header__brand:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --- State seal --- */
.mds-site-header__seal {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mds-site-header__seal img,
.mds-site-header__seal svg {
  width: 56px;
  height: 56px;
  display: block;
}

/* --- Site name + subname text group --- */
.mds-site-header__name-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* --- Site name --- */
.mds-site-header__name {
  font-size: var(--type-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}

/* --- Right-side actions container --- */
.mds-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* --- Search form --- */
.mds-site-header__search {
  display: flex;
  align-items: center;
}

.mds-site-header__search-input {
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  outline: none;
  min-width: 160px;
  height: 36px;
  transition: border-color var(--transition-fast);
}

.mds-site-header__search-input:focus {
  border-color: var(--color-focus-light);
  box-shadow: 0 0 0 1px var(--color-focus-light);
}

.mds-site-header__search-input::placeholder {
  color: var(--color-text-disabled);
}

.mds-site-header__search-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  height: 36px;
  transition: background-color var(--transition-fast);
}

.mds-site-header__search-btn:hover {
  background-color: var(--color-gray-100);
}

.mds-site-header__search-btn:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-site-header__search-icon {
  width: 16px;
  height: 16px;
}

/* --- Utility items in header --- */
.mds-site-header__utility {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mds-site-header__utility-item {
  margin: 0;
}

.mds-site-header__utility-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-xs);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
  line-height: 1;
}

.mds-site-header__utility-link:hover {
  color: var(--color-primary-hover);
  background-color: var(--color-gray-100);
}

.mds-site-header__utility-link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

.mds-site-header__utility-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Responsive behavior --- */
@media (max-width: 767px) {
  .mds-site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .mds-site-header__actions {
    width: 100%;
  }

  .mds-site-header__search {
    width: 100%;
  }

  .mds-site-header__search-input {
    flex: 1;
    min-width: 0;
  }

  .mds-site-header__utility {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@media (max-width: 479px) {
  .mds-site-header__inner {
    padding: var(--space-3);
  }

  .mds-site-header__name {
    font-size: var(--type-size-md);
  }

  .mds-site-header__search-input {
    min-width: 0;
  }
}


/* ================================================================
   Section 35: Sitewide Alert
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Sitewide Alert Component
   Displays critical or high-priority messages at the top of
   every page. Supports single alert and multiple alerts
   (collapsible) patterns.
   ============================================================ */

/* --- Alert region container --- */
.mds-sitewide-alert {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  line-height: var(--line-height-normal);
}

/* --- Single Alert --- */
.mds-sitewide-alert__single {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-warning);
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .mds-sitewide-alert__single {
    padding: var(--space-3) var(--space-8);
  }
}

.mds-sitewide-alert__single-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex-wrap: wrap;
}

/* --- Warning icon --- */
.mds-sitewide-alert__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- Alert heading (h2 for single, "Important notice") --- */
.mds-sitewide-alert__heading {
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-bold);
  margin: 0;
  white-space: nowrap;
}

/* --- Alert title (bold inline title) --- */
.mds-sitewide-alert__title {
  font-weight: var(--font-weight-bold);
}

/* --- Alert body text --- */
.mds-sitewide-alert__text {
  font-size: var(--type-size-sm);
  margin: 0;
}

.mds-sitewide-alert__text a {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.mds-sitewide-alert__text a:hover {
  color: var(--color-text-primary);
}

/* --- Multiple Alerts: collapsible header --- */
.mds-sitewide-alert__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-warning);
  color: var(--color-text-primary);
  cursor: pointer;
  border: none;
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  text-align: left;
  transition: background-color var(--transition-fast);
}

@media (min-width: 768px) {
  .mds-sitewide-alert__header {
    padding: var(--space-3) var(--space-8);
  }
}

.mds-sitewide-alert__header:hover {
  background-color: var(--color-warning-hover);
}

.mds-sitewide-alert__header:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
}

.mds-sitewide-alert__header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* --- Chevron for expand/collapse --- */
.mds-sitewide-alert__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
  margin-left: auto;
}

.mds-sitewide-alert__header[aria-expanded="true"] .mds-sitewide-alert__chevron {
  transform: rotate(180deg);
}

/* --- Multiple Alerts: content list --- */
.mds-sitewide-alert__content {
  display: none;
  background-color: var(--color-warning-light);
  padding: 0;
}

.mds-sitewide-alert__content[aria-hidden="false"],
.mds-sitewide-alert__content.is-open {
  display: block;
}

.mds-sitewide-alert__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.mds-sitewide-alert__list-item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin: 0;
}

.mds-sitewide-alert__list-item:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .mds-sitewide-alert__list-item {
    padding: var(--space-3) var(--space-8);
  }
}

/* --- Alert item title (h3) --- */
.mds-sitewide-alert__item-title {
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-1) 0;
  display: inline;
}

/* --- Alert item description --- */
.mds-sitewide-alert__item-text {
  font-size: var(--type-size-sm);
  margin: 0;
  display: inline;
}

.mds-sitewide-alert__item-text a {
  color: var(--color-text-primary);
  text-decoration: underline;
}

/* --- Responsive: mobile --- */
@media (max-width: 479px) {
  .mds-sitewide-alert__single {
    padding: var(--space-3);
  }

  .mds-sitewide-alert__header {
    padding: var(--space-3);
  }

  .mds-sitewide-alert__list-item {
    padding: var(--space-3);
  }

  .mds-sitewide-alert__item-title {
    display: block;
    margin-bottom: var(--space-1);
  }

  .mds-sitewide-alert__item-text {
    display: block;
  }
}


/* ================================================================
   Section 36: State Banner
   ================================================================ */

/* ============================================================
   Massachusetts Design System - State Banner Component
   A consistent banner across all Mass.gov sites that identifies
   the page as an official Commonwealth of Massachusetts website.
   Appears at the very top of every page.
   ============================================================ */

/* --- State Banner Container --- */
.mds-state-banner {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  line-height: var(--line-height-relaxed);
  background-color: var(--color-gray-50);
  color: var(--color-text-primary);
}

/* --- Inverse (dark) variant --- */
.mds-state-banner--inverse {
  background-color: var(--mds-base-black);
  color: var(--color-text-inverse);
}

/* --- Inner wrapper ("brand banner" row) ---
   Figma: gap 8px seal-to-heading, 4px vertical padding,
   48px horizontal margin at the 2XL > LG breakpoint. */
.mds-state-banner__inner {
  display: flex;
  /* flex-start, not Figma's center: the row wraps to two lines below about
     715px, and centring a 24px seal against a two-line block parks it in the
     middle. Top-align always, and let the seal's margin-top do the optical
     centring on the first line. */
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-1) var(--space-4);
}

@media (min-width: 768px) {
  .mds-state-banner__inner {
    padding: var(--space-1) var(--space-8);
  }
}

/* --- State seal icon --- */
.mds-state-banner__seal {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  /* Optically centres the 24px seal on the first line of text. The line box
     is 28.8px (16px x 1.8), so the true centre is 2.4px; 4px reads level
     against the text's cap height and keeps the row on the 4px scale. */
  margin-top: var(--space-1);
}

.mds-state-banner__seal svg,
.mds-state-banner__seal img {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Content text ---
   Figma: 16px gap between the heading and the "Here's how you know" link. */
.mds-state-banner__content {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-4);
}

.mds-state-banner__text {
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

/* --- Dropdown toggle button --- */
.mds-state-banner__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mds-state-banner__toggle:hover {
  background-color: rgba(20, 85, 143, 0.06);
}

.mds-state-banner__toggle:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* Inverse toggle */
.mds-state-banner--inverse .mds-state-banner__toggle {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

.mds-state-banner--inverse .mds-state-banner__toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.mds-state-banner--inverse .mds-state-banner__toggle:focus-visible {
  outline-color: var(--color-focus-dark);
}

/* --- Chevron icon --- */
.mds-state-banner__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.mds-state-banner__toggle[aria-expanded="true"] .mds-state-banner__chevron {
  transform: rotate(180deg);
}

/* --- Dropdown content --- */
/* Figma: horizontal margin only - the columns carry the vertical padding
   (8px top / 16px bottom), so the dropdown itself adds none. */
.mds-state-banner__dropdown {
  display: none;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
}

.mds-state-banner__dropdown[aria-hidden="false"],
.mds-state-banner__dropdown.is-open {
  display: block;
}

@media (min-width: 768px) {
  .mds-state-banner__dropdown {
    padding: var(--space-2) var(--space-8) 0 var(--space-8);
  }
}

/* --- Dropdown columns ---
   Figma: 24px gutter between the two columns. */
.mds-state-banner__columns {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .mds-state-banner__columns {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-6);
  }
}

/* --- Each info block ---
   Figma "Column 1/2": flex:1 0 0, 16px icon gap, 8px top / 16px bottom padding. */
.mds-state-banner__info {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-2);
  padding-bottom: var(--space-4);
}

/* Figma "Content": 8px between heading and body, nudged 4px down
   so the heading's cap height lines up with the icon. */
.mds-state-banner__info-content {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.mds-state-banner__info-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.mds-state-banner__info-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mds-state-banner--inverse .mds-state-banner__info-icon {
  color: var(--color-text-inverse);
}

/* Figma "Labels/Label": 16px, weight 500, line-height 1.2. */
.mds-state-banner__info-heading {
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  margin-bottom: 0;
}

/* Figma "Body/Body": 16px, weight 400, line-height 1.8. */
.mds-state-banner__info-text {
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* Figma uses full-strength base/white for body copy, not a dimmed tint. */
.mds-state-banner--inverse .mds-state-banner__info-text {
  color: var(--color-text-inverse);
}

/* --- Responsive: mobile stacking --- */
@media (max-width: 699px) {
  .mds-state-banner__inner {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Inline flow instead of a flex column: the link runs on after the
     heading and wraps with it, rather than always being pushed onto its
     own line. Keeps the text filling each line before it breaks.

     line-height must be set HERE, on the block container, not just on the
     inline __text span. Every line box also contains a strut sized from the
     container's own line-height, and the box takes the taller of the two - so
     a 1.2 span inside a 1.8 container still yields 28.8px lines. */
  .mds-state-banner__content {
    display: block;
    line-height: var(--line-height-snug);
  }

  /* Gap before the link. On the text (not the link) so that when the link
     does wrap to a new line it starts flush, with no leading indent. */
  .mds-state-banner__text {
    margin-right: var(--space-2);
    line-height: inherit;
  }

  /* Figma's small breakpoint tightens the dropdown: a 24px icon box giving a
     ~20.5px glyph (vs 30px / ~25.6px at desktop). Type size stays 16px - only
     the leading and the icon box shrink. Snug (1.4) gives a 22.4px line pitch
     against the design's measured 20px, trading 2px for a scale-standard token
     rather than a one-off 1.25. */
  .mds-state-banner__info-icon {
    width: 24px;
    height: 24px;
  }

  .mds-state-banner__info-text {
    line-height: var(--line-height-snug);
  }
}


/* ================================================================
   Section 37: Step Indicator
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Step Indicator Component
   Visually communicates a user's progress through a sequence of steps.
   Three statuses: Complete, Active, Inactive.
   Max steps: 8. Min step width: 120px. Total width: fill.
   ============================================================ */

/* --- Step Indicator Container --- */
.mds-step-indicator {
  display: flex;
  width: 100%;
  font-family: var(--font-family);
}

/* --- Individual Step --- */
.mds-step-indicator__step {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 120px;
  gap: var(--space-2);
}

.mds-step-indicator__step:not(:last-child) {
  padding-right: var(--space-2);
}

/* --- Progress Bar --- */
.mds-step-indicator__bar {
  height: 6px;
  border-radius: 0;
  width: 100%;
}

/* Complete state: solid primary */
.mds-step-indicator__step--complete {
  opacity: 0.55;
}

.mds-step-indicator__step--complete .mds-step-indicator__bar {
  background-color: var(--color-primary);
}

/* Active state: solid dark (bay-blue-darker / near-black) */
.mds-step-indicator__step--active .mds-step-indicator__bar {
  background-color: var(--color-primary-darker);
}

/* Inactive state: light gray */
.mds-step-indicator__step--inactive .mds-step-indicator__bar {
  background-color: var(--color-gray-300);
}

/* --- Step Label --- */
.mds-step-indicator__label {
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
  max-width: 25ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active label is bold and darker */
.mds-step-indicator__step--active .mds-step-indicator__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Complete label is regular weight */
.mds-step-indicator__step--complete .mds-step-indicator__label {
  color: var(--color-text-secondary);
}

/* Inactive label is regular and lighter */
.mds-step-indicator__step--inactive .mds-step-indicator__label {
  color: var(--color-text-disabled);
}

/* --- Tablet Layout (481px to 768px) --- */
/* Show only current step info and a single progress bar */
.mds-step-indicator--tablet {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.mds-step-indicator--tablet .mds-step-indicator__bar-track {
  display: flex;
  width: 100%;
  height: 6px;
  gap: 2px;
}

.mds-step-indicator--tablet .mds-step-indicator__bar-segment {
  flex: 1;
  height: 6px;
  background-color: var(--color-gray-300);
}

.mds-step-indicator--tablet .mds-step-indicator__bar-segment--complete {
  background-color: var(--color-accent);
}

.mds-step-indicator--tablet .mds-step-indicator__bar-segment--active {
  background-color: var(--color-primary-darker);
}

.mds-step-indicator--tablet .mds-step-indicator__info {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--type-size-sm);
}

.mds-step-indicator--tablet .mds-step-indicator__current {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.mds-step-indicator--tablet .mds-step-indicator__next {
  color: var(--color-text-secondary);
}

/* --- Mobile Layout (480px and below) --- */
/* Same as tablet but stacked vertically */
.mds-step-indicator--mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.mds-step-indicator--mobile .mds-step-indicator__bar-track {
  display: flex;
  width: 100%;
  height: 6px;
  gap: 2px;
  max-width: 200px;
}

.mds-step-indicator--mobile .mds-step-indicator__bar-segment {
  flex: 1;
  height: 6px;
  background-color: var(--color-gray-300);
}

.mds-step-indicator--mobile .mds-step-indicator__bar-segment--complete {
  background-color: var(--color-accent);
}

.mds-step-indicator--mobile .mds-step-indicator__bar-segment--active {
  background-color: var(--color-primary-darker);
}

.mds-step-indicator--mobile .mds-step-indicator__current {
  font-weight: var(--font-weight-bold);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
}

.mds-step-indicator--mobile .mds-step-indicator__next {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
}

/* --- Responsive Breakpoints --- */
/* Desktop (768px and up): show full step indicator */
@media (min-width: 769px) {
  .mds-step-indicator--desktop {
    display: flex;
  }
  .mds-step-indicator--tablet,
  .mds-step-indicator--mobile {
    display: none;
  }
}

/* Tablet (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .mds-step-indicator--desktop {
    display: none;
  }
  .mds-step-indicator--tablet {
    display: flex;
  }
  .mds-step-indicator--mobile {
    display: none;
  }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
  .mds-step-indicator--desktop {
    display: none;
  }
  .mds-step-indicator--tablet {
    display: none;
  }
  .mds-step-indicator--mobile {
    display: flex;
  }
}


/* ================================================================
   Section 38: Switch
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Switch (Toggle) Component
   A two-state control that allows users to switch between
   on/off states. Changes apply immediately.
   ============================================================ */

/* --- Switch Wrapper --- */
.mds-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  position: relative;
  padding: var(--space-2) 0;
  min-height: 44px;
}

/* --- Hide Native Input --- */
.mds-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Switch Label (positioned before the track) --- */
.mds-switch__label {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  cursor: pointer;
  max-width: 30ch;
  order: -1;
}

/* --- Track (the pill-shaped background) --- */
.mds-switch__track {
  display: flex;
  align-items: center;
  width: 44px;
  height: 24px;
  min-width: 44px;
  background-color: var(--color-gray-400);
  border-radius: var(--radius-full);
  position: relative;
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* --- Thumb (the circular knob) --- */
.mds-switch__track::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: absolute;
  left: 3px;
  transition: transform var(--transition-fast);
}

/* ============================================================
   States
   ============================================================ */

/* --- Off (Default) --- */
/* Base styles above handle the off state:
   - Gray track (#AAAAAA)
   - White thumb on the left */

/* --- On (Checked) --- */
.mds-switch__input:checked + .mds-switch__track {
  background-color: var(--color-accent);
}

.mds-switch__input:checked + .mds-switch__track::after {
  transform: translateX(20px);
}

/* --- Hover --- */
.mds-switch:hover .mds-switch__track {
  background-color: var(--color-gray-500);
}

.mds-switch:hover .mds-switch__input:checked + .mds-switch__track {
  background-color: var(--color-accent-hover);
}

/* --- Focus --- */
.mds-switch__input:focus-visible + .mds-switch__track {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- Disabled --- */
.mds-switch--disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.mds-switch--disabled .mds-switch__track {
  background-color: var(--color-gray-200);
  opacity: 0.6;
}

.mds-switch--disabled .mds-switch__input:checked + .mds-switch__track {
  background-color: var(--color-gray-300);
  opacity: 0.6;
}

.mds-switch--disabled .mds-switch__label {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ============================================================
   Label Position: Right (label after the switch)
   ============================================================ */
.mds-switch--label-right .mds-switch__label {
  order: 1;
}

/* ============================================================
   Switch Group
   ============================================================ */
.mds-switch-group {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
}

.mds-switch-group__legend {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  padding: 0;
  max-width: 30ch;
}

.mds-switch-group__help-text {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  max-width: 80ch;
}

/* ============================================================
   Responsive Behavior
   ============================================================ */
@media (max-width: 480px) {
  .mds-switch {
    width: 100%;
    justify-content: space-between;
  }
}


/* ================================================================
   Section 39: Tab
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Tab Component
   Provides navigation between related content panels within
   the same view. Max 8 tabs, max 20 characters per label.
   Switches to accordion layout on mobile.
   ============================================================ */

/* --- Tab container --- */
.mds-tabs {
  font-family: var(--font-family);
  width: 100%;
}

/* --- Tab list (desktop horizontal) --- */
.mds-tabs__list {
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--color-gray-200);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.mds-tabs__list::-webkit-scrollbar {
  height: 4px;
}

.mds-tabs__list::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: 2px;
}

/* --- Individual tab button --- */
.mds-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  white-space: nowrap;
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
  margin: 0;
  line-height: var(--line-height-tight);
}

.mds-tabs__tab:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.mds-tabs__tab:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
}

/* Active / selected tab */
.mds-tabs__tab[aria-selected="true"],
.mds-tabs__tab--active {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  border-bottom-color: var(--color-primary-darker);
}

/* Disabled tab */
.mds-tabs__tab:disabled,
.mds-tabs__tab--disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  border-bottom-color: transparent;
}

/* --- Tab panel --- */
.mds-tabs__panel {
  padding: var(--space-6) 0;
  display: none;
}

.mds-tabs__panel[aria-hidden="false"],
.mds-tabs__panel.is-active {
  display: block;
}

/* Only show the active panel */
.mds-tabs__panel:focus {
  outline: none;
}

.mds-tabs__panel:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* ============================================================
   Accordion Layout (Mobile)
   Tabs stack vertically with expand/collapse behavior.
   Only one tab/panel open at a time.
   ============================================================ */

/* Desktop: hide accordion triggers, show tab list */
.mds-tabs__accordion-trigger {
  display: none;
}

/* Mobile: switch to accordion */
@media (max-width: 767px) {
  /* Hide the horizontal tab list */
  .mds-tabs__list {
    display: none;
  }

  /* Show accordion triggers */
  .mds-tabs__accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-family);
    font-size: var(--type-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    background-color: var(--color-gray-50);
    border: none;
    border-bottom: 1px solid var(--color-gray-200);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-fast);
  }

  .mds-tabs__accordion-trigger:hover {
    background-color: var(--color-gray-100);
  }

  .mds-tabs__accordion-trigger:focus-visible {
    outline: 2px solid var(--color-focus-light);
    outline-offset: -2px;
  }

  /* Active accordion trigger */
  .mds-tabs__accordion-trigger[aria-expanded="true"] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-bottom-color: var(--color-primary-darker);
    border-bottom-width: 3px;
  }

  /* Chevron */
  .mds-tabs__accordion-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
  }

  .mds-tabs__accordion-trigger[aria-expanded="true"] .mds-tabs__accordion-chevron {
    transform: rotate(180deg);
  }

  /* Panel in accordion mode */
  .mds-tabs__panel {
    padding: var(--space-4);
  }

  .mds-tabs__panel[aria-hidden="true"] {
    display: none;
  }

  .mds-tabs__panel[aria-hidden="false"],
  .mds-tabs__panel.is-active {
    display: block;
  }
}


/* ================================================================
   Section 40: Text Area
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Text Area Input Component
   A common form element that allows users to enter and edit
   paragraph-length text data in a digital application.
   Min width: 200px, Min height: 96px
   ============================================================ */

/* --- Text Area Field (Default State) --- */
.mds-text-area {
  display: block;
  width: 100%;
  min-width: 200px;
  min-height: 96px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              outline var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

/* --- Placeholder --- */
.mds-text-area::placeholder {
  color: var(--color-text-disabled);
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

/* --- Hover State --- */
.mds-text-area:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-dark);
}

/* --- Focus State --- */
.mds-text-area:focus,
.mds-text-area:focus-visible {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
  box-shadow: none;
}

/* --- Filled State --- */
.mds-text-area--filled {
  border-color: var(--color-border-dark);
}

/* --- Disabled State --- */
.mds-text-area:disabled,
.mds-text-area[disabled] {
  background-color: var(--color-gray-100);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  resize: none;
  opacity: 1;
}

.mds-text-area:disabled::placeholder {
  color: var(--color-text-disabled);
}

/* --- Error State --- */
.mds-text-area--error {
  border-color: var(--color-border-danger);
}

.mds-text-area--error:focus,
.mds-text-area--error:focus-visible {
  border-color: var(--color-border-danger);
  outline-color: var(--color-border-danger);
}

/* --- Success / Valid State --- */
.mds-text-area--success {
  border-color: var(--color-border-success);
}

.mds-text-area--success:focus,
.mds-text-area--success:focus-visible {
  border-color: var(--color-border-success);
  outline-color: var(--color-border-success);
}

/* --- Character Count --- */
.mds-text-area-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mds-text-area-wrapper .mds-text-area {
  padding-bottom: var(--space-6);
}

.mds-text-area__char-count {
  display: block;
  text-align: right;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Character count at limit - error color */
.mds-text-area__char-count--error {
  color: var(--color-text-danger);
}

/* --- Responsive: Full width on mobile --- */
@media (max-width: 480px) {
  .mds-text-area {
    min-width: 100%;
  }
}


/* ================================================================
   Section 41: Text Input
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Text Input Component
   A common form element that allows users to enter and edit
   text data in a digital application.
   Min width: 144px, Max width: 600px
   ============================================================ */

/* --- Form Group Wrapper --- */
.mds-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  min-width: 144px;
  width: 100%;
}

/* --- Label --- */
.mds-form-group__label {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

/* --- Required Indicator --- */
.mds-form-group__required {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
  margin-left: var(--space-1);
}

/* --- Help Text --- */
.mds-form-group__help-text {
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  max-width: 80ch;
}

/* --- Text Input Field (Default State) --- */
.mds-text-input {
  display: block;
  width: 100%;
  min-width: 144px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              outline var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

/* --- Small variant --- */
.mds-text-input-sm {
  font-size: var(--type-size-sm);
  padding: var(--space-1);
}

.mds-select-sm {
  font-size: var(--type-size-sm);
  padding: var(--space-1);
}

/* --- Placeholder --- */
.mds-text-input::placeholder {
  color: var(--color-text-disabled);
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

/* --- Hover State --- */
.mds-text-input:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-dark);
}

/* --- Focus / Active State --- */
.mds-text-input:focus,
.mds-text-input:focus-visible {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
  box-shadow: none;
}

/* --- Filled State (use via JS - add class when input has value) --- */
.mds-text-input--filled {
  border-color: var(--color-border-dark);
}

/* --- Disabled State --- */
.mds-text-input:disabled,
.mds-text-input[disabled] {
  background-color: var(--color-gray-100);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

.mds-text-input:disabled::placeholder {
  color: var(--color-text-disabled);
}

/* --- Error State --- */
.mds-text-input--error {
  border-color: var(--color-border-danger);
}

.mds-text-input--error:focus,
.mds-text-input--error:focus-visible {
  border-color: var(--color-border-danger);
  outline-color: var(--color-border-danger);
}

/* --- Error Message --- */
.mds-form-group__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-danger);
}
/* An author `display` declaration otherwise beats the [hidden] attribute's
   user-agent default, so a hidden error message would render anyway. */
.mds-form-group__error[hidden] { display: none; }

.mds-form-group__error-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* --- Success / Valid State --- */
.mds-text-input--success {
  border-color: var(--color-border-success);
}

.mds-text-input--success:focus,
.mds-text-input--success:focus-visible {
  border-color: var(--color-border-success);
  outline-color: var(--color-border-success);
}

/* --- Responsive: Full width on mobile --- */
@media (max-width: 480px) {
  .mds-form-group {
    max-width: 100%;
  }

  .mds-text-input {
    max-width: 100%;
  }
}


/* ================================================================
   Section 42: Tooltip
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Tooltip Component
   Requires: mds-base.css
   ============================================================ */

/* --- Tooltip Wrapper (positioning context) --- */
.mds-tooltip-wrapper {
  position: relative;
  display: inline-block;
}

/* --- Tooltip Element --- */
.mds-tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  background-color: var(--color-gray-700);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  max-width: none;
  width: max-content;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

/* Width hugs text, but wraps if wider than viewport */
@media (max-width: 480px) {
  .mds-tooltip {
    white-space: normal;
    max-width: calc(100vw - var(--space-8));
  }
}

/* Visible state */
.mds-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

/* --- Caret / Arrow --- */
.mds-tooltip__caret {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--color-gray-700);
  transform: rotate(45deg);
}

/* ============================================================
   Positions
   ============================================================ */

/* Bottom (default - tooltip appears below element) */
.mds-tooltip--bottom {
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
}

.mds-tooltip--bottom .mds-tooltip__caret {
  top: -4px;
  left: 50%;
  margin-left: -4px;
}

/* Top */
.mds-tooltip--top {
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
}

.mds-tooltip--top .mds-tooltip__caret {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
}

/* Left */
.mds-tooltip--left {
  right: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
}

.mds-tooltip--left .mds-tooltip__caret {
  right: -4px;
  top: 50%;
  margin-top: -4px;
}

/* Right */
.mds-tooltip--right {
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
}

.mds-tooltip--right .mds-tooltip__caret {
  left: -4px;
  top: 50%;
  margin-top: -4px;
}

/* ============================================================
   Hover / Focus trigger behavior
   ============================================================ */

/* Show tooltip on hover after 300ms delay */
.mds-tooltip-wrapper:hover .mds-tooltip,
.mds-tooltip-wrapper:focus-within .mds-tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 300ms;
}

/* Hide immediately when leaving */
.mds-tooltip-wrapper:not(:hover):not(:focus-within) .mds-tooltip {
  transition-delay: 0ms;
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mds-tooltip {
    transition: none;
  }
}


/* ================================================================
   Section 43: Utility Navigation Banner
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Utility Navigation Banner
   A persistent strip at the top of every page providing
   quick access to utility links (language, login, etc.)
   and a hamburger menu toggle.
   ============================================================ */

/* --- Banner container --- */
.mds-utility-nav {
  width: 100%;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  position: relative;
  z-index: var(--z-sticky);
}

.mds-utility-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  min-height: 44px;
}

@media (min-width: 768px) {
  .mds-utility-nav__inner {
    padding: 0 var(--space-8);
  }
}

/* --- Menu (hamburger) button --- */
.mds-utility-nav__menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--color-text-inverse);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  line-height: 1;
}

.mds-utility-nav__menu-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.mds-utility-nav__menu-btn:focus-visible {
  outline: 2px solid var(--color-focus-dark);
  outline-offset: 2px;
}

/* Hamburger icon */
.mds-utility-nav__hamburger-icon {
  width: 18px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mds-utility-nav__hamburger-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-inverse);
  border-radius: 1px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Close state for hamburger */
.mds-utility-nav__menu-btn[aria-expanded="true"] .mds-utility-nav__hamburger-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mds-utility-nav__menu-btn[aria-expanded="true"] .mds-utility-nav__hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.mds-utility-nav__menu-btn[aria-expanded="true"] .mds-utility-nav__hamburger-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Menu label / Close label toggle */
.mds-utility-nav__menu-label-close {
  display: none;
}

.mds-utility-nav__menu-btn[aria-expanded="true"] .mds-utility-nav__menu-label-open {
  display: none;
}

.mds-utility-nav__menu-btn[aria-expanded="true"] .mds-utility-nav__menu-label-close {
  display: inline;
}

/* --- Utility items container --- */
.mds-utility-nav__items {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Individual utility item --- */
.mds-utility-nav__item {
  margin: 0;
}

.mds-utility-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-inverse);
  text-decoration: none;
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
  white-space: nowrap;
}

.mds-utility-nav__link:hover {
  color: var(--color-text-inverse);
  background-color: rgba(255, 255, 255, 0.1);
}

.mds-utility-nav__link:focus-visible {
  outline: 2px solid var(--color-focus-dark);
  outline-offset: 2px;
  color: var(--color-text-inverse);
}

/* --- Utility nav icon --- */
.mds-utility-nav__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* --- Dropdown chevron for items like "Language" --- */
.mds-utility-nav__chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}

.mds-utility-nav__link[aria-expanded="true"] .mds-utility-nav__chevron {
  transform: rotate(180deg);
}

/* --- Without Menu button variant --- */
.mds-utility-nav--no-menu .mds-utility-nav__inner {
  justify-content: flex-end;
}

/* --- Responsive behavior --- */
@media (max-width: 767px) {
  .mds-utility-nav__inner {
    flex-wrap: wrap;
  }

  .mds-utility-nav__items {
    gap: var(--space-2);
  }
}

@media (max-width: 479px) {
  .mds-utility-nav__inner {
    padding: 0 var(--space-3);
  }

  .mds-utility-nav__items {
    gap: var(--space-1);
  }

  .mds-utility-nav__link {
    font-size: var(--type-size-xs);
    padding: var(--space-2) 0;
  }
}


/* ================================================================
   CUSTOM COMPONENTS - NOT part of the official Mass Design System
   ================================================================ */

/* ================================================================
   Section 44: Data Table (xFact Custom Component)
   ================================================================ */

/* ============================================================
   Custom Component - Data Table
   ============================================================
   A structured data table for displaying tabular report data.
   NOT part of the official Massachusetts Design System - this
   is a custom component built on MDS design tokens.

   Features:
     - Scroll wrapper with card-style border framing
     - Sortable column headers with CSS-only sort indicators
     - Row hover, zebra striping (opt-in), row selection
     - Actions column (right-aligned last column)
     - Row number column (optional)
     - Empty state placeholder
     - Table toolbar (search, filters, row count)
     - Pagination footer (positions mds-pagination component)
     - Density variants: compact / default / comfortable
     - Responsive: horizontal scroll, mobile card layout
     - Accessible: focus-visible, ARIA-aware, reduced motion
     - Print-friendly

   Dependencies:
     - mds-base.css (design tokens)
     - pagination.css (optional - for pagination footer)
   ============================================================ */


/* =============================================================
   1. TABLE WRAPPER
   Scroll container that frames the table as a bordered card.
   Provides horizontal overflow on narrow viewports.
   ============================================================= */

.custom-datatable-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-primary);
}

/* When table has a toolbar above, remove top border-radius
   so the toolbar and table share a seamless card edge. */
.custom-datatable-toolbar + .custom-datatable-wrapper {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}


/* =============================================================
   2. TABLE BASE
   The <table> element - full width, collapsed cell gaps.
   ============================================================= */

.custom-datatable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

/* Caption - visually hidden by default, available to screen readers.
   Add .custom-datatable__caption--visible to display it. */
.custom-datatable caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-datatable__caption--visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: var(--space-3) var(--space-4) !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  text-align: left;
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}


/* =============================================================
   3. HEADER ROW
   Gray-50 background, 2px bottom border, bold non-wrapping cells.
   ============================================================= */

.custom-datatable thead tr {
  background-color: var(--color-gray-50);
  border-bottom: 2px solid var(--color-border);
}

.custom-datatable thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-bold);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: none;
}

/* Scope attribute styling for multi-level headers */
.custom-datatable thead th[scope="colgroup"] {
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}


/* =============================================================
   4. SORTABLE HEADERS
   Clickable column headers with CSS triangle sort indicators.
   Three states: neutral (both arrows dim), ascending, descending.
   ============================================================= */

.custom-datatable__sort-header {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  font-weight: var(--font-weight-bold);
  line-height: inherit;
}

.custom-datatable__sort-header:hover {
  color: var(--color-primary);
}

.custom-datatable__sort-header:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Sort icon container - two stacked CSS triangles (up + down). */
.custom-datatable__sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

.custom-datatable__sort-header:hover .custom-datatable__sort-icon {
  opacity: 0.7;
}

.custom-datatable__sort-icon span {
  display: block;
  width: 0;
  height: 0;
}

/* Up arrow triangle */
.custom-datatable__sort-icon span:first-child {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
}

/* Down arrow triangle */
.custom-datatable__sort-icon span:last-child {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* Active sort - full opacity on the active direction. */
.custom-datatable__sort-icon--asc {
  opacity: 1;
}
.custom-datatable__sort-icon--asc span:last-child {
  opacity: 0.3;
}

.custom-datatable__sort-icon--desc {
  opacity: 1;
}
.custom-datatable__sort-icon--desc span:first-child {
  opacity: 0.3;
}

/* ARIA-based sort styling alternative (works with aria-sort) */
.custom-datatable thead th[aria-sort="ascending"] .custom-datatable__sort-icon {
  opacity: 1;
}
.custom-datatable thead th[aria-sort="ascending"] .custom-datatable__sort-icon span:last-child {
  opacity: 0.3;
}

.custom-datatable thead th[aria-sort="descending"] .custom-datatable__sort-icon {
  opacity: 1;
}
.custom-datatable thead th[aria-sort="descending"] .custom-datatable__sort-icon span:first-child {
  opacity: 0.3;
}


/* =============================================================
   5. BODY ROWS
   Bottom-only borders, hover highlight, optional zebra striping.
   ============================================================= */

.custom-datatable tbody tr {
  border-bottom: 1px solid var(--color-gray-200);
  transition: background-color var(--transition-fast);
}

/* Last row - no bottom border (wrapper provides the outer frame). */
.custom-datatable tbody tr:last-child {
  border-bottom: none;
}

/* Row hover - subtle Bay Blue tint. */
.custom-datatable tbody tr:hover {
  background-color: rgba(20, 85, 143, 0.04);
}

/* Body cells. */
.custom-datatable tbody td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
  color: var(--color-text-primary);
  font-size: var(--type-size-sm);
  line-height: var(--line-height-snug);
  border: none;
}

/* Zebra striping - opt-in via modifier class on the wrapper. */
.custom-datatable--striped tbody tr:nth-child(even) {
  background-color: var(--color-gray-50);
}

.custom-datatable--striped tbody tr:nth-child(even):hover {
  background-color: rgba(20, 85, 143, 0.04);
}

/* Row selection - highlighted row when selected. */
.custom-datatable tbody tr[aria-selected="true"],
.custom-datatable tbody tr.is-selected {
  background-color: rgba(20, 85, 143, 0.08);
}

.custom-datatable tbody tr[aria-selected="true"]:hover,
.custom-datatable tbody tr.is-selected:hover {
  background-color: rgba(20, 85, 143, 0.12);
}

/* Clickable rows - pointer cursor when the row is interactive. */
.custom-datatable--clickable-rows tbody tr {
  cursor: pointer;
}

.custom-datatable--clickable-rows tbody tr:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
}


/* =============================================================
   6. ACTIONS COLUMN
   Right-aligned last column for action buttons/links.
   ============================================================= */


/* Explicit actions cell - flex layout for multiple buttons. */
.custom-datatable__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  white-space: nowrap;
}

/* When the last column is NOT an actions column, reset alignment.
   Apply this class to the <table> to override the default behavior. */
.custom-datatable--no-actions thead th:last-child,
.custom-datatable--no-actions tbody td:last-child {
  text-align: left;
}


/* =============================================================
   7. ROW NUMBER COLUMN
   Optional narrow column for displaying row indices.
   ============================================================= */

.custom-datatable__col-row-num {
  width: 3rem;
}

.custom-datatable__row-num {
  color: var(--color-text-secondary);
  font-size: var(--type-size-xs);
  text-align: right;
  padding-right: var(--space-2);
  width: 3rem;
}


/* =============================================================
   8. CELL VARIANTS
   Special cell formatting for common data types.
   ============================================================= */

/* Numeric cells - right-aligned, tabular figures. */
.custom-datatable__cell--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Date/time cells - non-wrapping for consistent formatting. */
.custom-datatable__cell--datetime {
  white-space: nowrap;
}

/* Truncated cells - ellipsis overflow with a max-width. */
.custom-datatable__cell--truncate {
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status cells - inline badge-like formatting. */
.custom-datatable__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
}

.custom-datatable__status--success {
  background-color: rgba(36, 168, 80, 0.1);
  color: var(--color-text-success);
}

.custom-datatable__status--warning {
  background-color: rgba(246, 182, 34, 0.12);
  color: var(--color-text-warning);
}

.custom-datatable__status--danger {
  background-color: rgba(205, 13, 13, 0.08);
  color: var(--color-text-danger);
}

.custom-datatable__status--neutral {
  background-color: var(--color-gray-100);
  color: var(--color-text-secondary);
}


/* =============================================================
   9. EMPTY STATE
   Centered message displayed when the table has no data rows.
   ============================================================= */

.custom-datatable__empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-secondary);
}

.custom-datatable__empty-icon {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--space-3);
  color: var(--color-gray-300);
}

.custom-datatable__empty-title {
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.custom-datatable__empty-message {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}


/* =============================================================
   10. TABLE TOOLBAR
   Top bar above the table for search, filter controls,
   row count display, and bulk actions.
   ============================================================= */

.custom-datatable-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  flex-wrap: wrap;
}

/* Left section - search input, filter buttons. */
.custom-datatable-toolbar__start {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

/* Right section - row count, view toggles, export buttons. */
.custom-datatable-toolbar__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Inline search within toolbar. */
.custom-datatable-toolbar__search {
  position: relative;
  max-width: 20rem;
  flex: 1;
}

.custom-datatable-toolbar__search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  padding-left: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: border-color var(--transition-fast);
}

.custom-datatable-toolbar__search-input::placeholder {
  color: var(--color-text-disabled);
}

.custom-datatable-toolbar__search-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px rgba(0, 136, 255, 0.2);
}

.custom-datatable-toolbar__search-input:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* Search icon positioned inside the input. */
.custom-datatable-toolbar__search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--color-text-disabled);
  pointer-events: none;
}

/* Row count label. */
.custom-datatable-toolbar__count {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.custom-datatable-toolbar__count strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}


/* =============================================================
   11. PAGINATION FOOTER
   Positions the mds-pagination component below the data table.
   Uses the existing pagination.css classes internally.
   ============================================================= */

.custom-datatable-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background-color: var(--color-bg-primary);
  flex-wrap: wrap;
}

/* When no toolbar above, but footer below - seamless card bottom. */
.custom-datatable-wrapper + .custom-datatable-footer {
  border-top: none;
}

/* Footer left - rows-per-page selector. */
.custom-datatable-footer__start {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
}

.custom-datatable-footer__per-page-select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 3.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23535353' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.custom-datatable-footer__per-page-select:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* Custom per-page size dropdown */
.xf-page-size-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.xf-page-size-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 3.5rem;
  justify-content: space-between;
}

.xf-page-size-select__trigger::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}

.xf-page-size-select__trigger:hover {
  border-color: var(--color-primary, #14558f);
}

.xf-page-size-select__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 200;
  min-width: 100%;
  white-space: nowrap;
}

.xf-page-size-select__list[hidden] { display: none; }

.xf-page-size-select__option {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
}

.xf-page-size-select__option:hover {
  background-color: var(--color-primary-light, #D0DDE9);
}

.xf-page-size-select__option.is-selected {
  background-color: var(--color-gray-100);
}

/* Footer center/end - pagination component placement.
   The mds-pagination component sits here. */
.custom-datatable-footer__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Last visible paginated row - suppress bottom border on desktop so it doesn't
   double up with the table wrapper's own bottom edge. Overridden on mobile so
   card-mode rows keep their closing border. */
.xf-pg-last-row {
  border-bottom: none !important;
}

/* Result range text (e.g., "Showing 1–25 of 128"). */
.custom-datatable-footer__range {
  flex: 1;
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-align: right;
}


/* Note: the numbered pager itself is the canonical .mds-pagination
   component from Section 27 below (__list/__item/__link/__pager/
   __chevron/__ellipsis) - it drops into .custom-datatable-footer__end
   as-is, no separate footer-specific pagination classes needed. */


/* =============================================================
   12. DENSITY VARIANTS
   Compact: tighter padding for data-dense views.
   Comfortable: more breathing room for scanning.
   Default is the base styling above (no modifier needed).
   ============================================================= */

/* --- Compact --- */
.custom-datatable--compact thead th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-size-xs);
}

.custom-datatable--compact tbody td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-size-xs);
}

/* --- Comfortable --- */
.custom-datatable--comfortable thead th {
  padding: var(--space-4) var(--space-4);
}

.custom-datatable--comfortable tbody td {
  padding: var(--space-4) var(--space-4);
  font-size: var(--type-size-base);
  line-height: var(--line-height-normal);
}


/* =============================================================
   13. BORDERED VARIANT
   Full cell borders instead of row-only bottom borders.
   ============================================================= */

.custom-datatable--bordered thead th {
  border: 1px solid var(--color-gray-200);
}

.custom-datatable--bordered tbody td {
  border: 1px solid var(--color-gray-200);
}


/* =============================================================
   14. STICKY HEADER
   Keeps the thead fixed at the top while the body scrolls.
   Requires a max-height on the wrapper.
   ============================================================= */

.custom-datatable-wrapper--sticky {
  max-height: 32rem;
  overflow-y: auto;
}

.custom-datatable-wrapper--sticky .custom-datatable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--color-gray-50);
  box-shadow: inset 0 -2px 0 var(--color-border);
}

/* Remove the border-bottom when sticky (replaced by box-shadow). */
.custom-datatable-wrapper--sticky .custom-datatable thead tr {
  border-bottom: none;
}


/* =============================================================
   15. COLUMN ALIGNMENT UTILITIES
   Apply to <th> or <td> to override default left alignment.
   ============================================================= */

.custom-datatable__col--center {
  text-align: center;
}

.custom-datatable__col--right {
  text-align: right;
}

.custom-datatable__col--nowrap {
  white-space: nowrap;
}


/* =============================================================
   16. LOADING STATE
   Overlay shown while table data is being fetched/refreshed.
   ============================================================= */

.custom-datatable-wrapper--loading {
  position: relative;
  pointer-events: none;
}

.custom-datatable-wrapper--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.65);
  z-index: 3;
}

.custom-datatable__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.custom-datatable__loader-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: custom-datatable-spin 0.7s linear infinite;
}

@keyframes custom-datatable-spin {
  to { transform: rotate(360deg); }
}

.custom-datatable__loader-text {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
}


/* =============================================================
   17. RESPONSIVE - Tablet (≤ 1024px)
   ============================================================= */

@media (max-width: 1024px) {
  .custom-datatable-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .custom-datatable-toolbar__search {
    max-width: none;
  }

  .custom-datatable-footer {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
}


/* =============================================================
   18. RESPONSIVE - Mobile (≤ 767px)
   ============================================================= */

@media (max-width: 767px) {
  /* Table extends edge-to-edge - negative margin removes page gutter. */
  .custom-datatable-wrapper {
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    width: calc(100% + var(--space-4) * 2);
  }

  /* Tighter cell padding. */
  .custom-datatable thead th,
  .custom-datatable tbody td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--type-size-xs);
  }

  /* Toolbar + footer match edge-to-edge. */
  .custom-datatable-toolbar,
  .custom-datatable-footer {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    width: calc(100% + var(--space-4) * 2);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}


/* =============================================================
   19. RESPONSIVE - Mobile Card Layout (opt-in)
   On small screens, each row becomes a stacked card.
   Apply .custom-datatable--card-mobile to enable.
   Requires data-label attributes on each <td>.
   ============================================================= */

@media (max-width: 480px) {
  .custom-datatable--card-mobile thead {
    display: none;
  }

  .custom-datatable--card-mobile tbody tr {
    display: block;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-primary);
  }

  .custom-datatable--card-mobile tbody tr:last-child {
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 0;
  }

  .custom-datatable--card-mobile tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-1) 0;
    border: none;
    font-size: var(--type-size-sm);
    text-align: right;
  }

  /* Label derived from data-label attribute. */
  .custom-datatable--card-mobile tbody td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-align: left;
    margin-right: var(--space-4);
    flex-shrink: 0;
    font-size: var(--type-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Actions cell in card mode - full-width row. */
  .custom-datatable--card-mobile tbody td:last-child {
    justify-content: flex-end;
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-gray-100);
  }
}


/* =============================================================
   20. PRINT
   ============================================================= */

@media print {
  /* Remove hover backgrounds. */
  .custom-datatable tbody tr:hover {
    background: none;
  }

  /* Ensure borders print. */
  .custom-datatable,
  .custom-datatable thead th,
  .custom-datatable tbody td {
    border-color: var(--color-border) !important;
  }

  /* Hide toolbar and footer (pagination) in print. */
  .custom-datatable-toolbar,
  .custom-datatable-footer {
    display: none;
  }

  /* Remove scroll constraints. */
  .custom-datatable-wrapper {
    overflow: visible;
    border: 1px solid var(--color-border);
  }

  .custom-datatable-wrapper--sticky {
    max-height: none;
    overflow: visible;
  }

  .custom-datatable-wrapper--sticky .custom-datatable thead th {
    position: static;
    box-shadow: none;
  }

  /* Remove loading overlay. */
  .custom-datatable-wrapper--loading::after {
    display: none;
  }
}


/* =============================================================
   21. REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .custom-datatable tbody tr {
    transition: none;
  }

  .custom-datatable__loader-spinner {
    animation: none;
    border-top-color: var(--color-primary);
    opacity: 0.7;
  }
}


/* ================================================================
   Section 45: Navigation Bar (xFact Custom Component)
   ================================================================ */

/* ============================================================
   Custom Component - Navigation Bar
   ============================================================
   A horizontal tab-style navigation bar for primary site navigation.
   NOT part of the official Massachusetts Design System - this
   is a custom component built on MDS design tokens.

   Styled to visually match the mds-site-header component
   (same background, similar border treatment).

   Features:
     - Horizontal link list with active-state underline indicator
     - Active link: Bay Blue text with underline
     - Responsive: collapses to hamburger menu on mobile
     - Accessible: aria-expanded, aria-controls, focus-visible
     - Sentence case capitalization per MDS guidelines

   Dependencies:
     - mds-base.css (design tokens)
   ============================================================ */


/* =============================================================
   1. NAV CONTAINER
   Matches mds-site-header background (--color-gray-50) by default.
   ============================================================= */

.xf-nav {
  width: 100%;
  background-color: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
  font-family: var(--font-family);
}

.xf-nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .xf-nav__inner {
    padding: 0 var(--space-8);
  }
}


/* =============================================================
   2. HAMBURGER TOGGLE
   Hidden on desktop, visible on mobile (<=767px).
   ============================================================= */

.xf-nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-3) 0;
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  align-items: center;
  gap: var(--space-2);
}

/* Square icon cell - see .mds-nav__hamburger-icon; the sub-bars use the
   same bars/X pair so both toggles read the same on mobile. */
.xf-nav__hamburger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.xf-nav__hamburger-bars {
  width: 1.25rem;
  height: 0.875rem;
}

.xf-nav__hamburger-close {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
}

.xf-nav__hamburger[aria-expanded="true"] .xf-nav__hamburger-bars {
  display: none;
}

.xf-nav__hamburger[aria-expanded="true"] .xf-nav__hamburger-close {
  display: block;
}

.xf-nav__hamburger:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}


/* =============================================================
   3. NAVIGATION LIST & ITEMS
   Horizontal flex row of link items.
   ============================================================= */

.xf-nav__list {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
}

.xf-nav__item {
  display: flex;
  align-items: stretch;
}


/* =============================================================
   4. NAVIGATION LINKS
   Sentence case text. Active state indicated by Bay Blue color
   and underline. All links use the same font weight.
   ============================================================= */

.xf-nav__link {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-4);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  border-bottom: 3px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  line-height: 1;
  border-right: 1px solid var(--color-gray-200);
}

.xf-nav__item:last-child .xf-nav__link {
  border-right: none;
}

.xf-nav__link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary-hover);
}

.xf-nav__link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}

/* Active state - Bay Blue text with solid bottom border underline.
   Same font weight as inactive links per design doc. */
.xf-nav__link--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}


/* =============================================================
   5. RESPONSIVE - MOBILE (<=767px)
   Hamburger visible, list collapses to vertical stack.
   Active indicator switches from bottom border to left border.
   ============================================================= */

@media (max-width: 767px) {
  .xf-nav__inner {
    padding: 0 var(--space-4);
    flex-wrap: wrap;
  }

  .xf-nav__hamburger {
    display: none;
  }

  /* Always visible vertical stack */
  .xf-nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    background-color: var(--color-white);
    padding: var(--space-2) 0;
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    width: calc(100% + (2 * var(--space-4)));
  }

  .xf-nav__item {
    width: 100%;
  }

  .xf-nav__link {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
    border-bottom: none;
    border-left: 4px solid transparent;
    border-right: none;
    font-size: var(--type-size-base);
  }

  .xf-nav__link:hover {
    background-color: var(--color-gray-50);
    border-left-color: var(--color-primary-hover);
    border-bottom: none;
    color: var(--color-primary);
  }

  .xf-nav__link--active {
    border-left-color: var(--color-primary);
    border-bottom: none;
    background-color: var(--color-bg-secondary);
    color: var(--color-primary);
  }
}


/* =============================================================
   6. TABLET PADDING (<=1024px)
   ============================================================= */

@media (max-width: 1024px) and (min-width: 768px) {
  .xf-nav__inner {
    padding: 0 var(--space-5);
  }
}


/* =============================================================
   7. REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .xf-nav__link {
    transition: none;
  }
}


/* ================================================================
   Section 46: Page Layouts (xFact Custom Component)
   ================================================================ */

/* ============================================================
   Custom Component - Page Layouts
   ============================================================
   Interchangeable page layout containers. Swap the class on the
   outer wrapper to switch between layouts.

   Variants:
     .xf-layout--single    → 1 row, 1 column (full width content)
     .xf-layout--sidebar   → 1 row, 2 columns (left sidebar + main)

   Usage:
     <div class="xf-layout xf-layout--single"> ... </div>
     <div class="xf-layout xf-layout--sidebar"> ... </div>

   Dependencies:
     - MDS design tokens (--space-*, --color-*, etc.)
   ============================================================ */


/* --- Layout base --- */

.xf-layout {
  display: flex;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  gap: 0;
  min-height: 50vh;
}


/* --- Single column layout --- */

.xf-layout--single {
  flex-direction: column;
}

.xf-layout--single .xf-layout__main {
  width: 100%;
}


/* --- Sidebar layout (left ~260px + main content) --- */

.xf-layout--sidebar {
  flex-direction: row;
}

.xf-layout__sidebar {
  flex: 0 0 260px;
  padding-right: var(--space-6);
  border-right: 1px solid var(--color-gray-200);
}

.xf-layout--sidebar .xf-layout__main {
  flex: 1;
  min-width: 0;
  padding-left: var(--space-8);
}


/* --- Layout responsive --- */

@media (max-width: 767px) {
  .xf-layout {
    padding: var(--space-6) var(--space-4);
  }

  .xf-layout--sidebar {
    flex-direction: column;
  }

  .xf-layout__sidebar {
    flex: none;
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .xf-layout--sidebar .xf-layout__main {
    padding-left: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .xf-layout {
    padding: var(--space-6) var(--space-5);
  }

  .xf-layout__sidebar {
    flex: 0 0 220px;
  }
}


/* ================================================================
   Section 47: Side Navigation (xFact Custom Component)
   ================================================================ */

/* ============================================================
   Custom Component - Side Navigation
   ============================================================
   A vertical side navigation menu with expandable/collapsible
   sections. Designed for use inside .xf-layout__sidebar.

   Structure:
     .xf-sidenav                    → nav container
       .xf-sidenav__heading         → section heading (e.g. "APPLICATION")
       .xf-sidenav__list            → top-level menu list
         .xf-sidenav__item          → menu item
           .xf-sidenav__link        → clickable link (leaf item)
           .xf-sidenav__toggle      → expandable parent (button)
             .xf-sidenav__chevron   → arrow indicator
           .xf-sidenav__sublist     → nested submenu list
             .xf-sidenav__subitem   → submenu item
               .xf-sidenav__sublink → submenu link

   States:
     .xf-sidenav__item--open        → expanded section
     .xf-sidenav__link--active      → currently active page
     .xf-sidenav__sublink--active   → currently active subpage

   Dependencies:
     - MDS design tokens (--space-*, --color-*, --font-*, etc.)
   ============================================================ */


/* --- Nav container --- */

.xf-sidenav {
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  line-height: var(--line-height-normal);
}


/* --- Section heading --- */

.xf-sidenav__heading {
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) 0;
  margin: 0 0 var(--space-1);
}


/* --- Top-level list --- */

.xf-sidenav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.xf-sidenav__item {
  border-bottom: 1px solid var(--color-gray-200);
}

.xf-sidenav__item:last-child {
  border-bottom: none;
}


/* --- Top-level links (leaf items) --- */

.xf-sidenav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: var(--font-weight-regular);
  border-left: 3px solid transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.xf-sidenav__link:hover {
  color: var(--color-text-link-hover);
  background-color: var(--color-gray-50);
}

.xf-sidenav__link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}

/* Active state - Bay Blue left border + semibold text */
.xf-sidenav__link--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  border-left-color: var(--color-primary);
  background-color: var(--color-gray-50);
}


/* --- Expandable toggle (parent items with children) --- */

.xf-sidenav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-link);
  text-align: left;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.xf-sidenav__toggle:hover {
  color: var(--color-text-link-hover);
  background-color: var(--color-gray-50);
}

.xf-sidenav__toggle:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}

/* Chevron arrow - rotates based on aria-expanded state */
.xf-sidenav__chevron {
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.xf-sidenav__chevron path {
  stroke: currentColor;
  fill: none;
}

.xf-sidenav__toggle[aria-expanded="false"] .xf-sidenav__chevron {
  transform: rotate(0deg);
}

.xf-sidenav__toggle[aria-expanded="true"] .xf-sidenav__chevron {
  transform: rotate(180deg);
}


/* --- Submenu list --- */

.xf-sidenav__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.xf-sidenav__item--open > .xf-sidenav__sublist {
  display: block;
}


/* --- Submenu links --- */

.xf-sidenav__sublink {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: var(--font-weight-regular);
  border-left: 3px solid transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.xf-sidenav__sublink:hover {
  color: var(--color-text-link-hover);
  background-color: var(--color-gray-50);
}

.xf-sidenav__sublink:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}

/* Active submenu link - Bay Blue left border + semibold */
.xf-sidenav__sublink--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  border-left-color: var(--color-primary);
  background-color: var(--color-gray-50);
}


/* --- Side navigation responsive --- */

@media (max-width: 767px) {
  .xf-sidenav__link,
  .xf-sidenav__toggle {
    padding: var(--space-3) var(--space-3);
  }

  .xf-sidenav__sublink {
    padding-left: var(--space-6);
  }
}


/* --- Side navigation reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .xf-sidenav__chevron {
    transition: none;
  }

  .xf-sidenav__link,
  .xf-sidenav__toggle,
  .xf-sidenav__sublink {
    transition: none;
  }
}

/* ================================================================
   Section 48: Site Header Sub-name (xFact Custom Component)
   ================================================================ */
.mds-site-header__subname {
  display: block;
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: var(--line-height-tight);
}



/* ================================================================
   Accordion MDS date component overrides
   Reduces the MDS three-field date component to roughly half size
   when rendered inside a report accordion panel body.
   ================================================================ */
.xf-report-panel__body .mds-form-group__label {
  font-size: var(--type-size-xs);
}

.xf-report-panel__body .mds-date-field__label {
  font-size: var(--type-size-xs);
}

.xf-report-panel__body .mds-date-select,
.xf-report-panel__body .mds-date-number-input {
  font-size: var(--type-size-xs);
  padding: var(--space-1) var(--space-2);
}

.xf-report-panel__body .mds-date-select {
  padding-right: calc(var(--space-2) + 16px);
  background-size: 10px;
}

.xf-report-panel__body .mds-date-field--month {
  min-width: 90px;
}

.xf-report-panel__body .mds-date-field--day {
  min-width: 44px;
  max-width: 56px;
}

.xf-report-panel__body .mds-date-field--year {
  min-width: 56px;
  max-width: 68px;
}

.xf-report-panel__body .mds-date-group {
  margin-bottom: 0;
}

.xf-report-panel__body .mds-text-input {
  font-size: var(--type-size-xs);
  padding: var(--space-1) var(--space-2);
  max-width: none;
}

.xf-report-panel__body .mds-select {
  font-size: var(--type-size-xs);
  padding: var(--space-1) var(--space-2);
  padding-right: calc(var(--space-2) + 16px);
  background-size: 10px;
  max-width: none;
}


/* ================================================================
   Section 49: Navigation Bar (MDS Core Component)
   ================================================================ */

/* ============================================================
   Massachusetts Design System - Navigation Bar
   ============================================================
   The primary site navigation. Supersedes the custom .xf-nav bar
   (Section 45) for the main menu; .xf-nav remains in use for the
   in-page sub-menu tab bars (consent history, account management).

   Structure:
     .mds-nav
       .mds-nav__inner
         .mds-nav__hamburger              (mobile only)
         .mds-nav__list
           .mds-nav__item
             .mds-nav__link               plain link, or
             .mds-nav__link--toggle       submenu trigger (<button>)
               .mds-nav__label
               .mds-nav__caret            32px cell / 24px caret
             .mds-nav__submenu
               .mds-nav__submenu-item
                 .mds-nav__submenu-link

   Menu item states:
     default           white row
     :hover            Overcast-tinted row
     [aria-expanded]   tinted row + 4px Bay Blue underline
     --current         4px Bay Blue underline
     :active           solid Bay Blue row, inverse text
     :focus-visible    2px focus-blue outline

   Submenu item states:
     default / :hover (Bay Blue lightest) / --current (solid Bay
     Blue, inverse text) / :focus-visible (2px focus-blue outline)

   Desktop (>=768px): 64px horizontal bar, pinned to the top of the
   viewport and casting a shadow once stuck, same as mobile; submenus
   float below the trigger as a shadowed panel with bottom-rounded
   corners.
   Mobile (<=767px): the bar pins to the top of the viewport and casts
   a shadow once stuck; the hamburger slides a full-screen panel of
   56px rows in from the left, submenus expanding inline within it.

   Sentence case labels per MDS guidelines.

   Dependencies:
     - Section 1 (design tokens)
   ============================================================ */


/* =============================================================
   1. NAV CONTAINER
   White bar bounded by a hairline rule top and bottom. Establishes
   the stacking context that lifts open submenus above page content.
   Sticky at every width - pins to the top of the viewport as the
   state banner, utility nav, and site header scroll away above it.
   Raised one step above --z-sticky so it paints over them as they
   pass beneath, rather than relying on document order. .mds-nav--stuck
   (toggled by the nav controller in base.html) adds a shadow once it's
   actually pinned - CSS alone can't tell a stuck sticky from a resting
   one, so that state is JS-driven, but runs at every width already.
   Mobile (<=767px, Section 7) layers on the hamburger's full-screen
   panel behavior on top of this same sticky bar. */
.mds-nav {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 1);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  font-family: var(--font-family);
}

.mds-nav--stuck {
  box-shadow: var(--shadow-md);
}

/* Aligns nav items with the site-header brand above them. */
.mds-nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
}

@media (min-width: 876px) {
  .mds-nav__inner {
    padding: 0 var(--space-8);
  }
}


/* =============================================================
   2. HAMBURGER TOGGLE
   Hidden on desktop, visible on mobile (<=767px).
   ============================================================= */

.mds-nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-3) 0;
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-md);  /* 18px, up from base/16px - reads too
                                       light next to the 40px cart button */
  font-weight: var(--font-weight-medium);
  align-items: center;
  gap: var(--space-2);
}

/* Square icon cell: the bars are 22x16 and the X is 22x22, so they are
   centred in a fixed box to stop the "Menu" label shifting on toggle. */
.mds-nav__hamburger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
}

.mds-nav__hamburger-bars {
  width: 1.375rem;
  height: 1rem;
}

.mds-nav__hamburger-close {
  display: none;
  width: 1.375rem;
  height: 1.375rem;
}

/* Open panel - the bars become an X. aria-expanded drives the swap, so
   the controller never touches the icon markup. */
.mds-nav__hamburger[aria-expanded="true"] .mds-nav__hamburger-bars {
  display: none;
}

.mds-nav__hamburger[aria-expanded="true"] .mds-nav__hamburger-close {
  display: block;
}

.mds-nav__hamburger:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}


/* =============================================================
   3. LIST & ITEMS
   ============================================================= */

.mds-nav__list {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Positioning context for the floating submenu panel. */
.mds-nav__item {
  position: relative;
  display: flex;
  align-items: stretch;
}


/* =============================================================
   4. MENU ITEMS (top level)
   64px row, Label LG type (18px / medium). The 1px side borders and
   the 4px bottom border are always present but transparent, so
   colouring them on hover / for the current page shifts no layout.
   ============================================================= */

.mds-nav__link {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--space-3);
  margin: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom-width: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

/* Rest state used to carry border-radius: var(--radius-md), invisible
   here since background/border are both transparent at rest - but
   border-radius isn't in the transition list above while
   background-color is, so on mouseleave/mouseup the radius snapped
   back to var(--radius-md) instantly while the background color was
   still fading out over the transition duration, flashing a rounded
   corner on the item you just clicked before it fully faded to
   transparent. Dropping the rest-state radius (already 0 in every
   interactive state below) removes that snap-back without changing
   anything else about this item. */

.mds-nav__label {
  padding: var(--space-1);
}

/* Current page - 4px Bay Blue underline, square corners. */
.mds-nav__link--current {
  border-bottom-color: var(--color-primary);
  border-radius: 0;
}

/* Open submenu - tinted row plus the same underline. */
.mds-nav__link--toggle[aria-expanded="true"] {
  background-color: var(--color-bg-subtle);
  border-bottom-color: var(--color-primary);
  border-radius: 0;
}

/* Hover - neutral tint inside a full Bay Blue border box. Declared
   after the indicator rules so a hovered current item keeps the box. */
.mds-nav__link:hover {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-primary);
  border-radius: 0;
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Pressed - solid Bay Blue row with inverse label and caret. */
.mds-nav__link:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: 0;
  color: var(--color-text-inverse);
}

.mds-nav__link:active .mds-nav__caret {
  color: var(--color-text-inverse);
}

/* Keyboard focus only - a mouse click must not leave a ring behind. */
.mds-nav__link:focus {
  outline: none;
}

.mds-nav__link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
}


/* =============================================================
   5. CARET
   32px cell around a 24px Berkshires Green caret, rotated 180° when
   its submenu is open - no scripted icon swap.
   ============================================================= */

.mds-nav__caret {
  display: flex;
  align-items: center;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  color: var(--color-accent-mid);
}

.mds-nav__caret svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform var(--transition-normal);
}

.mds-nav__link--toggle[aria-expanded="true"] .mds-nav__caret svg {
  transform: rotate(180deg);
}


/* =============================================================
   6. SUBMENU PANEL (desktop)
   Floats beneath the trigger row; only the bottom corners are rounded
   so the panel reads as an extension of the open menu item.

   The panel clears the bar by 1px rather than sitting flush: `top: 100%`
   resolves against the 64px item, whose bottom edge is exactly where
   .mds-nav draws its bottom hairline, so a flush panel buried that rule
   and broke the divider under every open menu. One pixel is all it takes
   to let the line run unbroken across the bar; any more and the panel
   stops reading as attached to its trigger.
   ============================================================= */

.mds-nav__submenu {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  z-index: var(--z-dropdown);
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  min-width: 296px;
  margin: 0;
  padding: var(--space-2);
  background-color: var(--color-white);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  box-shadow: var(--shadow-hover-sm);
}

.mds-nav__submenu.is-open {
  display: flex;
}

.mds-nav__submenu-item {
  display: flex;
}

/* Caption LG type (16px / regular). */
.mds-nav__submenu-link {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.mds-nav__submenu-link:hover {
  background-color: var(--color-primary-light);
  color: var(--color-text-primary);
  text-decoration: none;
}

.mds-nav__submenu-link:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: -2px;
}

/* Current page, and the pressed state on the way to it - solid Bay Blue row
   with an inverse label. Two distinct meanings that MDS gives the same fill:
   :active is the momentary press, --current is where you actually are.

   --current:hover is listed explicitly because plain :hover would otherwise
   out-specify the bare --current class (0,2,0 beats 0,1,0) and drop the row
   back to the pale hover tint - so pointing at the page you are already on
   would make it look unselected. Select is not hover. */
.mds-nav__submenu-link--current,
.mds-nav__submenu-link--current:hover,
.mds-nav__submenu-link:active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}


/* =============================================================
   6b. MOBILE SCRIM
   Greys out the page the panel slides over. Fully covered once the
   panel has arrived, so it reads during the slide rather than at
   rest. Desktop never shows it.
   ============================================================= */

.mds-nav__scrim {
  display: none;
}


/* =============================================================
   7. RESPONSIVE - MOBILE (<=875px)
   The hamburger slides a full-screen panel in from the left. It
   overlays the content area below the bar rather than pushing it
   down, and dims what is behind it. Rows are 56px; submenus drop
   out of the floating layer and expand inline within the panel.
   ============================================================= */

@media (max-width: 875px) {
  /* Sticky positioning and the .mds-nav--stuck shadow now live in the base
     .mds-nav rule (Section 1) - they apply at every width, not just here. */

  /* Cart button drops below the toggle when the two cannot share a row.
     Vertical padding is extra breathing room around the row now that
     the cart button is a fixed 40px tall - not making the button itself
     any taller, just giving the bar around it a bit more air. */
  .mds-nav__inner {
    flex-wrap: wrap;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }

  .mds-nav__hamburger {
    display: flex;
    min-height: 44px;   /* WCAG 2.5.5 minimum touch target */
  }

  /* Panel and scrim are pinned to the viewport, so their top edge has to
     be measured: the bar sits low on the page at scroll 0 and rises as
     the sticky chrome pins. The nav controller in base.html writes
     --mds-nav-panel-top; the 0px fallback only applies without script,
     where the panel stays closed anyway. */
  .mds-nav__scrim {
    display: block;
    position: fixed;
    top: var(--mds-nav-panel-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-dropdown);
    background-color: rgba(20, 20, 20, 0.5);
    opacity: 0;
    visibility: hidden;
  }

  .mds-nav__scrim--visible {
    opacity: 1;
    visibility: visible;
  }

  /* Panel: covers the whole content area under the bar, one z-layer above
     the scrim. visibility rather than display keeps it out of the tab
     order while closed without killing the slide transition - visibility
     interpolates as a step, so it flips only once the slide-out ends. */
  .mds-nav__list {
    position: fixed;
    top: var(--mds-nav-panel-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-dropdown) + 1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    margin: 0;
    /* A long menu scrolls inside the panel; overscroll-behavior keeps that
       gesture from chaining out to the page behind. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-subtle);
    transform: translateX(-100%);
    visibility: hidden;
  }

  .mds-nav__list--open {
    transform: translateX(0);
    visibility: visible;
  }

  /* The slide is animated ONLY while .mds-nav--animating is on, which the
     controller in base.html adds for the duration of a toggle and takes
     straight off again.

     With the transition attached permanently, any style change reaching
     these boxes got interpolated - including the one the browser makes
     when the window crosses 875px and this whole block starts applying.
     A closed panel went from no transform (desktop) to translateX(-100%),
     so narrowing the window played the closing slide: the menu appeared
     to slam shut on its own, having never been open. Gating on a class
     the user's own click sets is what separates "the panel moved" from
     "the breakpoint changed", and it needs no resize bookkeeping - a
     resize simply never has the class on. */
  .mds-nav--animating .mds-nav__list {
    transition:
      transform var(--transition-normal),
      visibility var(--transition-normal);
  }

  .mds-nav--animating .mds-nav__scrim {
    transition:
      opacity var(--transition-normal),
      visibility var(--transition-normal);
  }

  /* The page behind must not scroll under the overlay. Same mechanism as
     body.mds-modal-shell-open: overflow on <body> propagates to the
     viewport. It clamps nothing - a page scrolled under the pinned chrome
     keeps its offset while the panel is open. */
  body.mds-nav-open {
    overflow: hidden;
  }

  .mds-nav__item {
    display: block;
    width: 100%;
  }

  /* Rows: 56px, label wraps, caret pinned right. */
  .mds-nav__link {
    width: 100%;
    height: auto;
    min-height: 56px;
    gap: var(--space-4);
    padding: var(--space-3);
    white-space: normal;
  }

  .mds-nav__label {
    flex: 1 0 0;
    min-width: 0;
  }

  /* No border box in the collapsed menu - a full-width row reads as a
     list item, not a button. Rules are drawn as inset shadows instead,
     so swapping the 1px separator for the 4px underline cannot change
     the row height: rows stay a uniform 56px in every state. */
  .mds-nav__link,
  .mds-nav__link:hover,
  .mds-nav__link:active {
    border: none;
    border-radius: 0;
  }

  .mds-nav__link {
    box-shadow: inset 0 -1px 0 var(--color-border-subtle);
  }

  /* Current page and open rows replace the separator with the
     4px Bay Blue underline. */
  .mds-nav__link--current,
  .mds-nav__link--toggle[aria-expanded="true"] {
    box-shadow: inset 0 -4px 0 var(--color-primary);
  }

  /* One indicator at a time: while a submenu is open it owns the
     underline and the current-page row falls back to the plain
     separator, so the collapsed menu never shows two blue rules. */
  .mds-nav__list:has(.mds-nav__link--toggle[aria-expanded="true"])
  .mds-nav__link--current:not([aria-expanded="true"]) {
    box-shadow: inset 0 -1px 0 var(--color-border-subtle);
  }

  /* Submenu: inline, full width, no floating chrome. */
  .mds-nav__submenu {
    position: static;
    min-width: 0;
    width: 100%;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    box-shadow: none;
  }
}


/* =============================================================
   8. REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .mds-nav__link,
  .mds-nav__submenu-link {
    transition: none;
  }

  /* The mobile panel appears in place instead of sliding. transform is
     still what positions it, so only the timing is dropped.

     Has to carry .mds-nav--animating: that is where the transition is now
     declared, and a two-class selector outranks a one-class one whatever
     the file order - a bare .mds-nav__list here would lose and reduced
     motion would silently stop working. */
  .mds-nav--animating .mds-nav__list,
  .mds-nav--animating .mds-nav__scrim {
    transition: none;
  }
}


/* ================================================================
   Section 50: Accordion (xFact Custom Component)
   ================================================================ */

/* ============================================================
   Custom Component - Accordion
   ============================================================
   A collapsible <details>/<summary> panel used for the "Filters
   & sort" controls on the home page and results list.
   NOT part of the official Massachusetts Design System - MDS still
   lists its Accordion component as [pending]; this is styled to
   match MIRCS's own approximation (mircs2/assets/mds/accordion-
   chip.css) using iCORI's design tokens, including class names
   (mds-accordion, mds-filters, mds-tablefilters, mds-panel-foot)
   so the two codebases read the same for this component. Visually
   this specifically matches the LO Review Queue page's own scoped
   variant of that component (MIRCS's ".mds-results--lo .mds-filters"
   override in mircs2/assets/mds/table.css): a square-cornered panel
   with only a top + bottom hairline (no side borders, no border-
   radius); a leading brand-blue lead icon before the title; a count
   chip ("N filtered results" + a clear ✕) that stands in for a
   manual Clear button and only appears while a filter is active;
   and just the MDS +/− glyph on the right (no "Show"/"Hide" text -
   the native <summary> already exposes expanded/collapsed state to
   assistive tech). Open by default.

   Structure:
     <details class="mds-accordion mds-filters" open>
       <summary class="mds-accordion__header">
         <span><i class="mds-accordion__lead"></i> <span class="mds-filters__label">…</span></span>
         <span class="mds-accordion__header-end">
           <span class="mds-filters__count"><span class="mds-filters__count-text">…</span>
             <button class="mds-filters__count-clear"><i class="mds-filters__count-clear-icon"></i></button></span>
           <span class="mds-accordion__toggle"></span>
         </span>
       </summary>
       <div class="mds-accordion__body">
         <div class="mds-tablefilters">
           <div class="mds-tablefilters__field"><label>…</label><input>/<select></div>
         </div>
         <div class="mds-panel-foot">…manual Apply/Clear, where a page keeps one…</div>
       </div>
     </details>

   Dependencies:
     - mds-base.css (design tokens)
   ============================================================ */

.mds-accordion {
  margin: var(--space-6) 0 var(--space-8) 0;
  border: 0;
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
  border-radius: 0;
  background-color: var(--color-bg-primary);
  overflow: visible;
}
.mds-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  box-sizing: border-box;
  min-height: 3.125rem;
  padding: 0 var(--space-4);
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-size-md);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  /* Closed (default) state. */
  background-color: var(--color-gray-100);
}
.mds-accordion__header::-webkit-details-marker { display: none; }
.mds-accordion__header > span { display: inline-flex; align-items: center; gap: var(--space-3); }
/* Three distinct-but-close shades, graduated off gray-100 (#F0F0F0) toward
   gray-200 (#E0E0E0, the accordion's own border color - used as the dark
   end of the range so nothing here is a one-off invented hex): closed stays
   gray-100; hover is a very subtle -4 nudge (#ECECEC), barely perceptible;
   open is a step further, very slightly darker still (#E8E8E8, the exact
   midpoint to gray-200) so the bar visibly reads as "open" even without
   hovering. Source order matters here: the [open] rule comes after :hover
   at equal specificity, so an open header stays at its own shade rather
   than lightening back toward the hover tint while the pointer is over it. */
.mds-accordion__header:hover { background-color: #ECECEC; }
.mds-accordion__header:focus-visible { outline: 2px solid var(--color-focus-light); outline-offset: -2px; }
.mds-accordion[open] > .mds-accordion__header { background-color: #E8E8E8; }
/* Extra grouping span for the count chip + toggle (MIRCS relies on margin:auto
   between siblings for this; a small wrapper is simpler to keep bulletproof
   whether or not the count chip is present). */
.mds-accordion__header-end { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Leading funnel icon (Phosphor "Funnel"), tinted the same near-black as the
   header text (var(--color-text-primary)) rather than brand-blue, so it
   reads as part of the "Filter and Sort" label instead of a separate accent. */
.mds-accordion__lead {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: var(--color-text-primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm106.18,74.58A8,8,0,0,0,144,136v58.66L112,216V136a8,8,0,0,0-2.16-5.47L40,56H216Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm106.18,74.58A8,8,0,0,0,144,136v58.66L112,216V136a8,8,0,0,0-2.16-5.47L40,56H216Z'/></svg>") center / contain no-repeat;
}
/* Count chip - "N filtered results" + a ✕ that clears every filter. Only
   rendered (server-side, via filterActive) while a filter is applied; this
   is the automatic-filtering equivalent of a manual "Clear" button. */
.mds-filters__count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.125rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  color: var(--color-text-primary);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}
.mds-filters__count-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text-disabled);
}
.mds-filters__count-clear:hover { color: var(--color-text-primary); }
.mds-filters__count-clear:focus-visible { outline: 2px solid var(--color-focus-light); outline-offset: 2px; border-radius: 2px; }
.mds-filters__count-clear-icon {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/></svg>") center / contain no-repeat;
}
/* Toggle - just the MDS +/− glyph, rendered on the toggle's own ::after
   (no separate icon element, no "Show"/"Hide" text: matches the canonical
   .mds-accordion__toggle exactly - the native <summary> already announces
   expanded/collapsed to assistive tech). */
.mds-accordion__toggle {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
}
.mds-accordion__toggle::after {
  content: "";
  display: inline-block;
  width: 1.1875rem;
  height: 1.1875rem;
  background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z'/></svg>") center / contain no-repeat;
}
.mds-accordion[open] .mds-accordion__toggle::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z'/></svg>");
}
@media (min-width: 1024px) {
  .mds-accordion__toggle::after { width: 1.375rem; height: 1.375rem; }
}
/* mds-accordion__icon - the legacy chevron element MIRCS keeps in markup but
   hides (the +/− glyph above replaces it). iCORI never had a chevron icon
   font here, so the rule exists only in case a page still includes the
   element for structural parity. */
.mds-accordion__icon { display: none !important; }
/* Fields grid: 6 across on desktop (matches the canonical .mds-tablefilters
   grid - this panel has exactly 6 fields), reflowing the same way. */
.mds-accordion__body {
  padding: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
}
.mds-tablefilters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}
/* Drops to 3-across (6 fields -> 2 rows) well before the canonical 1023px
   breakpoint: at 6-across, a 1024-1439px column is too narrow for the
   date-range field's "MMDDYYYY-MMDDYYYY" input + joined calendar button,
   which was getting clipped. */
@media (max-width: 1439px) { .mds-tablefilters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .mds-tablefilters { grid-template-columns: minmax(0, 1fr); } }
.mds-tablefilters__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--type-size-sm);
  /* A grid item's default min-width is its content's intrinsic width, which
     can push the item past its column and clip a field's contents (e.g. the
     date-range field's text) instead of letting it truncate as intended. */
  min-width: 0;
}
.mds-tablefilters__field > label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.mds-tablefilters__field input:not(.p-datepicker-input),
.mds-tablefilters__field select {
  width: 100%;
  min-height: 2.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}
.mds-tablefilters__field input:not(.p-datepicker-input):focus,
.mds-tablefilters__field select:focus {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 1px;
}
/* Magnifying-glass on free-text search fields - same Phosphor glyph + muted
   gray as the canonical .mds-tablefilters__field > .p-inputtext. */
.mds-tablefilters__field input[type="text"]:not(.p-datepicker-input) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23707070'><path d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
  padding-right: 2.125rem;
}
/* Caret on selects - appearance:none + a custom chevron so it renders the
   same across browsers, matching the canonical .p-select-dropdown look. */
.mds-tablefilters__field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23707070' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem 0.5rem;
  padding-right: 2.125rem;
}
/* Panel footer - MIRCS's manual "Clear all / View results" action row
   (.mds-panel-foot / .mds-panel-clear / .mds-panel-done). Still used by the
   results-list page, which keeps a manual Apply/Clear; the home page has no
   footer since its filtering is automatic. */
.mds-panel-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-3);
}


/* ================================================================
   Section 51: Select (Custom Combobox) (xFact Custom Component)
   ================================================================ */

/* ============================================================
   Custom Component - Select (Custom Combobox)
   ============================================================
   A custom combobox that replaces a plain native <select> with an
   MDS-styled trigger + floating option list, matching MIRCS's own
   Select ("p-select") component (mircs2/assets/mds/form.css,
   table.css, select.js) class-for-class so the two codebases read
   the same for this component. NOT part of the official
   Massachusetts Design System - MDS still lists a published Select
   as [pending], same as MIRCS's own stand-in.

   The real <select> stays in the DOM (untouched server-rendered
   <option>s drive value/label/selected) but is hidden; this widget
   is built on top of it at runtime by the enhanceMdsSelect() helper
   duplicated in each page's inline script (core/homepage.html,
   results/results-list.html). Picking an option - or clearing -
   writes back to the real <select> and dispatches a native "change"
   event on it, so the page's existing auto-submit / Apply-filters
   wiring (which already listens for "change" on every <select>)
   needs no changes at all.

   Structure:
     <div class="p-select" data-for="fieldId">
       <span class="p-select-label p-placeholder" role="combobox"
             aria-haspopup="listbox" aria-expanded="false" tabindex="0">Select</span>
       <span class="mds-select-clear" role="button" aria-label="Clear selection" hidden></span>
       <div class="p-select-dropdown"><svg>…</svg></div>
       <div class="p-select-overlay" hidden>
         <ul class="p-select-list" role="listbox">
           <li class="p-select-option" role="option">…</li>
         </ul>
       </div>
     </div>

   Dependencies:
     - mds-base.css (design tokens)
   ============================================================ */

.p-select {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  cursor: pointer;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  color: var(--color-text-primary);
}
.p-select.p-focus,
.p-select.p-inputwrapper-focus {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 1px;
}
.p-select-label {
  flex: 1 1 auto;
  width: 1%;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  min-height: 2.8125rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text-primary);
}
.p-select-label.p-placeholder { color: var(--color-text-secondary); }
.p-select-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  color: var(--color-text-secondary);
}
.p-select-dropdown svg { width: 0.875rem; height: 0.875rem; }
/* Clear (✕) - sits just left of the caret; only shown once a real value is picked. */
.mds-select-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  cursor: pointer;
  color: var(--color-text-disabled);
}
.mds-select-clear[hidden] { display: none; }
.mds-select-clear:hover { color: var(--color-text-primary); }
.mds-select-clear:focus-visible { outline: 2px solid var(--color-focus-light); outline-offset: 2px; border-radius: 2px; }
.mds-select-clear svg { width: 0.875rem; height: 0.875rem; }

/* --- Clear button for a plain text input (the .mds-select-clear equivalent
   for text fields, e.g. a filter field) --- */
.mds-input-clear-wrap { position: relative; width: 100%; }
.mds-input-clear-wrap.is-filled input[type="text"] { background-image: none; }
.mds-input-clear {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text-disabled);
}
.mds-input-clear[hidden] { display: none; }
.mds-input-clear:hover { color: var(--color-text-primary); }
.mds-input-clear:focus-visible { outline: 2px solid var(--color-focus-light); outline-offset: 2px; border-radius: 2px; }
.mds-input-clear svg { width: 100%; height: 100%; }

/* Floating option panel */
.p-select-overlay {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 100%;
  width: max-content;
  max-width: 21.25rem;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.p-select-overlay[hidden] { display: none; }
.p-select-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  max-height: 13.75rem;
  overflow-y: auto;
}
.p-select-option {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--type-size-base);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.p-select-option:hover { background-color: var(--color-primary-light); }
.p-select-option-selected { background-color: var(--color-gray-200); color: var(--color-text-primary); }
.p-select-empty-message { padding: var(--space-2) var(--space-3); color: var(--color-text-secondary); }

/* Inside a filter panel (.mds-tablefilters) - tightened to match the other
   fields' 14px / 42px sizing (same treatment MIRCS gives .p-select there). */
.mds-tablefilters .p-select {
  min-height: 2.625rem !important;
  align-items: center;
  padding-right: 0.25rem;
}
.mds-tablefilters .p-select-label {
  font-size: var(--type-size-sm) !important;
  min-height: 2.625rem;
}
.mds-tablefilters .p-select-dropdown { width: 1.625rem; }
.mds-tablefilters .mds-select-clear { width: 1.375rem; margin-right: 0; }
.mds-tablefilters .p-select-overlay { width: 100%; max-width: 100%; }


/* ================================================================
   Section 52: Date Field (Input + Calendar Button) (xFact Custom Component)
   ================================================================ */

/* ============================================================
   Custom Component - Date Field (Input + Calendar Button)
   ============================================================
   A typeable text input joined with a calendar-icon button under one
   shared focus ring, matching MIRCS's own canonical pattern for this
   ("p-datepicker" / "p-datepicker-input" / "p-datepicker-dropdown" -
   mircs2/assets/mds/form.css, Section 5c: "Date field - input + calendar
   button joined as one control with a single focus ring"). NOT part of
   the official Massachusetts Design System - same [pending] status as
   MIRCS's own stand-in.

   Accessibility is the reason this exists as an input, not a button that
   only opens a calendar: typing a date is the primary, fully keyboard-
   and screen-reader-usable path (see the home page's "Date range" field,
   which types as MMDDYYYY-MMDDYYYY); the calendar button is a visible,
   independently focusable secondary shortcut, not a requirement.

   Structure:
     <div class="p-datepicker">
       <input class="p-datepicker-input" placeholder="MMDDYYYY-MMDDYYYY">
       <button class="p-datepicker-dropdown" aria-label="Choose dates from a calendar">
         <svg>…</svg>
       </button>
     </div>

   Dependencies:
     - mds-base.css (design tokens)
   ============================================================ */

.p-datepicker {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
}
.p-datepicker-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 2.625rem;
  padding: 0.625rem 0 0.625rem 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-right: none;
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--color-bg-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}
.p-datepicker-input::placeholder { color: var(--color-text-disabled); }
.p-datepicker-input:focus,
.p-datepicker-input:focus-visible { outline: none; box-shadow: none; }
.p-datepicker-dropdown {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  padding: 0;
  cursor: pointer;
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: background-color var(--transition-fast);
}
.p-datepicker-dropdown:hover { background-color: var(--color-gray-100); }
.p-datepicker-dropdown svg { width: 1.125rem; height: 1.125rem; }
.p-datepicker-dropdown:focus,
.p-datepicker-dropdown:focus-visible { outline: none; }
/* One shared ring around the whole joined control, not one per part -
   matches the canonical MDS date field exactly. */
.p-datepicker:focus-within {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 1px;
  border-radius: var(--radius-md);
}

/* --- Error state --- */
.p-datepicker--error .p-datepicker-input,
.p-datepicker--error .p-datepicker-dropdown {
  border-color: var(--color-border-danger);
}
.p-datepicker--error:focus-within {
  outline-color: var(--color-focus-light);   /* focus ring stays the normal color; the border communicates the error */
}

/* --- Calendar Popover ---
   The documented calendar-button shortcut this component describes above -
   a dual-month split range picker. Appended to <body> by the field's own
   controller script so a parent's layout/overflow can't clip it. */
.date-range-popover {
  position: absolute;
  z-index: var(--z-popover);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
}
.date-range-popover[hidden] { display: none; }
.date-range-popover__nav { display: flex; justify-content: space-between; margin-bottom: var(--space-2); }
.date-range-popover__nav button {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  font-size: var(--type-size-lg);
  line-height: 1;
}
.date-range-popover__nav button:hover { background-color: var(--color-gray-100); }
.date-range-cals { display: flex; gap: var(--space-5); }
.date-range-cal { width: 224px; }
.date-range-cal__head {
  text-align: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-size-sm);
  margin-bottom: var(--space-2);
}
.date-range-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-range-cal__dow {
  text-align: center;
  font-size: var(--type-size-xs);
  color: var(--color-text-secondary);
  padding: 2px 0;
}
.date-range-cal__day {
  height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
}
.date-range-cal__day:hover { background-color: var(--color-gray-100); }
.date-range-cal__day.is-inrange { background-color: var(--color-primary-light); border-radius: 0; }
.date-range-cal__day.is-selected { background-color: var(--color-primary); color: var(--color-text-inverse); }
.date-range-popover__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-200);
}
.date-range-popover__foot button {
  height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-xs);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.date-range-clear { border: 1px solid var(--color-gray-300); background: transparent; color: var(--color-primary); }
.date-range-clear:hover { background-color: var(--color-gray-100); }
.date-range-apply { border: none; background-color: var(--color-primary); color: var(--color-text-inverse); }
.date-range-apply:hover { background-color: var(--color-primary-hover); }
@media (max-width: 620px) {
  .date-range-cals { flex-direction: column; gap: var(--space-3); }
}