/* =============================================================================
   NDS FOUNDATIONS - Next Design System
   =============================================================================
   Single-file import for all design tokens, utility classes, and global styles.
   
   Usage:
     <link rel="stylesheet" href="nds-foundations.css">
     or
     @import 'nds-foundations.css';

   FontAwesome 6 Pro icons must be loaded separately:
     <link rel="stylesheet" href="https://ui.renaissance.com/fonts/Font_Awesome_6_Pro/fontawesome.min.css">
     <link rel="stylesheet" href="https://ui.renaissance.com/fonts/Font_Awesome_6_Pro/light.min.css">
     <link rel="stylesheet" href="https://ui.renaissance.com/fonts/Font_Awesome_6_Pro/regular.min.css">
     <link rel="stylesheet" href="https://ui.renaissance.com/fonts/Font_Awesome_6_Pro/solid.min.css">
     <link rel="stylesheet" href="https://ui.renaissance.com/fonts/Font_Awesome_6_Pro/duotone.min.css">
   ============================================================================= */

/* Roboto Font - From UI-Resources CDN */
@import url('https://ui.renaissance.com/fonts/Roboto/style.css');


/* =============================================================================
   1. GLOBAL STYLES
   ============================================================================= */

:root {
  --nds-focus: 0px 0px 0px 2px rgba(43, 135, 255, 1);
  --nds-focus-color: rgba(43, 135, 255, 1);
}

* { box-sizing: border-box; }

body {
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*:focus-visible {
  outline: 2px solid var(--nds-focus-color);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

.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;
}

@media (prefers-contrast: high) {
  *:focus { outline: 3px solid var(--nds-focus-color); outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =============================================================================
   2. COLORS
   ============================================================================= */

:root {
  /* Primary Brand Colors */
  --color-primary-red: #fd4353;
  --color-website-red: #cf3a4e;
  --color-primary-black: #000000;
  --color-website-black: #202020;
  --color-primary-white: #ffffff;
  --color-beige: #f1efe3;
  --color-ar-orange: #f5692c;
  --color-assessment-orange: #f99e1f;
  --color-assessment-teal: #41c395;
  --color-assessment-yellow: #ffe61f;
  --color-freckle-pink: #f143aa;
  --color-lalilo-blue-green: #31c0c4;
  --color-myon-flocabulary-purple: #8385f6;
  --color-nearpod-blue: #00a8ff;
  --color-dark-grey: #54585e;
  --color-medium-grey: #808285;
  --color-light-grey: #dddee0;

  /* Red Scale */
  --color-red-10: #f5e9ea;
  --color-red-30: #fec7cb;
  --color-red-60: #fea1a9;
  --color-red-90: #cf3a4e;
  --color-red-100: #972831;
  --color-red-primary: var(--color-primary-red);
  --color-red-website: var(--color-website-red);

  /* Beige Scale */
  --color-beige-10: #f4f4f3;
  --color-beige-30: #fbfaf7;
  --color-beige-60: #f8f7f1;
  --color-beige-90: #c0bfb5;
  --color-beige-100: #908f88;
  --color-beige-primary: var(--color-beige);

  /* AR Orange Scale */
  --color-ar-orange-10: #f4ece8;
  --color-ar-orange-30: #fbd2c0;
  --color-ar-orange-60: #fab496;
  --color-ar-orange-90: #c45423;
  --color-ar-orange-100: #933f1a;
  --color-ar-orange-primary: var(--color-ar-orange);

  /* myON Purple Scale */
  --color-myon-purple-10: #ededf4;
  --color-myon-purple-30: #dadafc;
  --color-myon-purple-60: #c1c2fb;
  --color-myon-purple-90: #686ac4;
  --color-myon-purple-100: #4e4f93;
  --color-myon-purple-primary: var(--color-myon-flocabulary-purple);

  /* Freckle Pink Scale */
  --color-freckle-pink-10: #f4e9f0;
  --color-freckle-pink-30: #fbc7e5;
  --color-freckle-pink-60: #f8a1d5;
  --color-freckle-pink-90: #c03588;
  --color-freckle-pink-100: #902866;
  --color-freckle-pink-primary: var(--color-freckle-pink);

  /* Lalilo Blue-Green Scale */
  --color-lalilo-blue-green-10: #e8f1f1;
  --color-lalilo-blue-green-30: #c1ecec;
  --color-lalilo-blue-green-60: #98e0e2;
  --color-lalilo-blue-green-90: #27999c;
  --color-lalilo-blue-green-100: #1d7375;
  --color-lalilo-blue-green-primary: var(--color-lalilo-blue-green);

  /* Nearpod Blue Scale */
  --color-nearpod-blue-10: #e5eff5;
  --color-nearpod-blue-30: #b3e5ff;
  --color-nearpod-blue-60: #80d4ff;
  --color-nearpod-blue-90: #007cbd;
  --color-nearpod-blue-100: #006499;
  --color-nearpod-blue-primary: var(--color-nearpod-blue);

  /* Assessment Yellow Scale */
  --color-assessment-yellow-10: #f5f3e7;
  --color-assessment-yellow-30: #fff7bc;
  --color-assessment-yellow-60: #fff38f;
  --color-assessment-yellow-90: #ccb818;
  --color-assessment-yellow-100: #998a12;
  --color-assessment-yellow-primary: var(--color-assessment-yellow);

  /* Assessment Orange Scale */
  --color-assessment-orange-10: #f4efe7;
  --color-assessment-orange-30: #fee1bc;
  --color-assessment-orange-60: #fccf8f;
  --color-assessment-orange-90: #c77e18;
  --color-assessment-orange-100: #955e12;
  --color-assessment-orange-primary: var(--color-assessment-orange);

  /* Assessment Teal Scale */
  --color-assessment-teal-10: #e9f1ee;
  --color-assessment-teal-30: #c7eddf;
  --color-assessment-teal-60: #a0e1ca;
  --color-assessment-teal-90: #349c77;
  --color-assessment-teal-100: #277559;
  --color-assessment-teal-primary: var(--color-assessment-teal);

  /* Dark Grey Scale */
  --color-dark-grey-10: #eaebeb;
  --color-dark-grey-30: #cccdcf;
  --color-dark-grey-60: #aaacaf;
  --color-dark-grey-90: #43464b;
  --color-dark-grey-100: #323438;
  --color-dark-grey-primary: var(--color-dark-grey);

  /* Medium Grey Scale */
  --color-medium-grey-10: #ededed;
  --color-medium-grey-30: #d9dada;
  --color-medium-grey-60: #c0c1c2;
  --color-medium-grey-90: #66686a;
  --color-medium-grey-100: #4c4e4f;
  --color-medium-grey-primary: var(--color-medium-grey);

  /* Light Grey Scale */
  --color-light-grey-10: #f3f3f3;
  --color-light-grey-30: #f5f5f6;
  --color-light-grey-60: #eeeff0;
  --color-light-grey-90: #b0b1b3;
  --color-light-grey-100: #848586;
  --color-light-grey-primary: var(--color-light-grey);

  /* RTI (Response to Intervention) Scale */
  --color-rti-urgent-red: #ec0000;
  --color-rti-intervention-yellow: #ffcc00;
  --color-rti-on-watch-blue: #0a628d;
  --color-rti-benchmark-green: #00a929;
  --color-rti-above-benchmark-green: #006a16;
  --color-rti-off-grade-proficiency-green: #a2b5a6;

  /* Others - Semantic/Functional Colors */
  --color-interactive-blue: #146eb3;
  --color-focus-blue: #2b87ff;
  --color-highlight-blue: #d0e2f0;
  --color-new-gray: #f3f5f7;
  --color-next-gray: #fff4f4;

  /* Semantic Color Mappings */
  --color-text-primary: var(--color-website-black);
  --color-text-secondary: var(--color-medium-grey-primary);
  --color-text-disabled: var(--color-light-grey-90);
  --color-text-inverse: var(--color-primary-white);
  --color-text-link: var(--color-interactive-blue);

  /* Text Color Tokens (Figma Variables) */
  --colors-text-primary: var(--color-website-black);
  --colors-text-secondary: var(--color-dark-grey-90);
  --colors-text-tertiary: var(--color-dark-grey-primary);
  --colors-text-link: var(--color-interactive-blue);
  --colors-text-interactive: var(--color-interactive-blue);
  --colors-text-white: var(--color-primary-white);
  --colors-text-black: var(--color-primary-black);
  --colors-text-website-red: var(--color-website-red);
  --colors-text-info: var(--color-nearpod-blue-100);
  --colors-text-success: var(--color-assessment-teal-100);
  --colors-text-warning: var(--color-ar-orange-90);
  --colors-text-error: var(--color-red-90);
  --colors-text-disabled: var(--color-dark-grey-60);
  --colors-text-placeholder: var(--color-dark-grey-primary);
  --colors-text-inactive: var(--color-medium-grey-90);

  --color-background-primary: var(--color-primary-white);
  --color-background-secondary: var(--color-light-grey-10);
  --color-background-tertiary: var(--color-beige-10);
  --color-background-inverse: var(--color-dark-grey-primary);

  --color-border-primary: var(--color-light-grey-60);
  --color-border-secondary: var(--color-light-grey-90);
  --color-border-focus: var(--color-focus-blue);

  /* Fill Colors — Table */
  --color-fill-table-head: var(--color-primary-white);
  --color-fill-table-row-alt: #f9f9f9;
  --color-fill-table-pinned-row: #3b4550;
  --color-status-success: #2a9d8f;
}

/* Color Utility Classes - Background */
.nds-bg-primary-red { background-color: var(--color-primary-red); }
.nds-bg-website-red { background-color: var(--color-website-red); }
.nds-bg-primary-black { background-color: var(--color-primary-black); }
.nds-bg-website-black { background-color: var(--color-website-black); }
.nds-bg-primary-white { background-color: var(--color-primary-white); }
.nds-bg-beige { background-color: var(--color-beige); }
.nds-bg-ar-orange { background-color: var(--color-ar-orange); }
.nds-bg-assessment-orange { background-color: var(--color-assessment-orange); }
.nds-bg-assessment-teal { background-color: var(--color-assessment-teal); }
.nds-bg-assessment-yellow { background-color: var(--color-assessment-yellow); }
.nds-bg-freckle-pink { background-color: var(--color-freckle-pink); }
.nds-bg-lalilo-blue-green { background-color: var(--color-lalilo-blue-green); }
.nds-bg-myon-purple { background-color: var(--color-myon-flocabulary-purple); }
.nds-bg-nearpod-blue { background-color: var(--color-nearpod-blue); }
.nds-bg-dark-grey { background-color: var(--color-dark-grey); }
.nds-bg-medium-grey { background-color: var(--color-medium-grey); }
.nds-bg-light-grey { background-color: var(--color-light-grey); }
.nds-bg-red-10 { background-color: var(--color-red-10); }
.nds-bg-red-30 { background-color: var(--color-red-30); }
.nds-bg-red-60 { background-color: var(--color-red-60); }
.nds-bg-red-90 { background-color: var(--color-red-90); }
.nds-bg-red-100 { background-color: var(--color-red-100); }
.nds-bg-beige-10 { background-color: var(--color-beige-10); }
.nds-bg-beige-30 { background-color: var(--color-beige-30); }
.nds-bg-beige-60 { background-color: var(--color-beige-60); }
.nds-bg-beige-90 { background-color: var(--color-beige-90); }
.nds-bg-beige-100 { background-color: var(--color-beige-100); }
.nds-bg-ar-orange-10 { background-color: var(--color-ar-orange-10); }
.nds-bg-ar-orange-30 { background-color: var(--color-ar-orange-30); }
.nds-bg-ar-orange-60 { background-color: var(--color-ar-orange-60); }
.nds-bg-ar-orange-90 { background-color: var(--color-ar-orange-90); }
.nds-bg-ar-orange-100 { background-color: var(--color-ar-orange-100); }
.nds-bg-rti-urgent-red { background-color: var(--color-rti-urgent-red); }
.nds-bg-rti-intervention-yellow { background-color: var(--color-rti-intervention-yellow); }
.nds-bg-rti-on-watch-blue { background-color: var(--color-rti-on-watch-blue); }
.nds-bg-rti-benchmark-green { background-color: var(--color-rti-benchmark-green); }
.nds-bg-rti-above-benchmark-green { background-color: var(--color-rti-above-benchmark-green); }
.nds-bg-rti-off-grade-proficiency-green { background-color: var(--color-rti-off-grade-proficiency-green); }
.nds-bg-interactive-blue { background-color: var(--color-interactive-blue); }
.nds-bg-focus-blue { background-color: var(--color-focus-blue); }
.nds-bg-highlight-blue { background-color: var(--color-highlight-blue); }
.nds-bg-new-gray { background-color: var(--color-new-gray); }
.nds-bg-next-gray { background-color: var(--color-next-gray); }

/* Color Utility Classes - Text */
.nds-text-primary-red { color: var(--color-primary-red); }
.nds-text-website-red { color: var(--color-website-red); }
.nds-text-primary-black { color: var(--color-primary-black); }
.nds-text-website-black { color: var(--color-website-black); }
.nds-text-ar-orange { color: var(--color-ar-orange); }
.nds-text-assessment-teal { color: var(--color-assessment-teal); }
.nds-text-freckle-pink { color: var(--color-freckle-pink); }
.nds-text-lalilo-blue-green { color: var(--color-lalilo-blue-green); }
.nds-text-myon-purple { color: var(--color-myon-flocabulary-purple); }
.nds-text-nearpod-blue { color: var(--color-nearpod-blue); }
.nds-text-dark-grey { color: var(--color-dark-grey); }
.nds-text-medium-grey { color: var(--color-medium-grey); }
.nds-text-light-grey { color: var(--color-light-grey); }
.nds-text-interactive-blue { color: var(--color-interactive-blue); }
.nds-text-primary { color: var(--color-text-primary); }
.nds-text-secondary { color: var(--color-text-secondary); }
.nds-text-disabled { color: var(--color-text-disabled); }
.nds-text-inverse { color: var(--color-text-inverse); }
.nds-text-link { color: var(--color-text-link); }

/* Color Utility Classes - Border */
.nds-border-primary-red { border-color: var(--color-primary-red); }
.nds-border-website-red { border-color: var(--color-website-red); }
.nds-border-interactive-blue { border-color: var(--color-interactive-blue); }
.nds-border-focus-blue { border-color: var(--color-focus-blue); }
.nds-border-primary { border-color: var(--color-border-primary); }
.nds-border-secondary { border-color: var(--color-border-secondary); }
.nds-border-focus { border-color: var(--color-border-focus); }


/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */

:root {
  /* Font Families */
  --font-family-roboto: "Roboto", system-ui, -apple-system, sans-serif;
  --font-family-system: system-ui, -apple-system, sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Font Sizes — Desktop */
  --font-size-h1: 26px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 18px;
  --font-size-h5: 16px;
  --font-size-h6: 16px;
  --font-size-body-default: 16px;
  --font-size-body-medium: 14px;
  --font-size-body-small: 12px;
  --font-size-tabs-default: 16px;
  --font-size-tabs-counter: 14px;
  --font-size-table-heading: 14px;
  --font-size-table-body: 14px;
  --font-size-button-large: 18px;
  --font-size-button-default: 16px;
  --font-size-button-medium: 14px;
  --font-size-button-small: 12px;
  --font-size-link-default: 16px;
  --font-size-link-medium: 14px;
  --font-size-link-small: 12px;

  /* Font Sizes — Mobile */
  --font-size-mobile-h1: 24px;
  --font-size-mobile-h2: 20px;
  --font-size-mobile-h3: 18px;
  --font-size-mobile-h4: 16px;
  --font-size-mobile-h5: 14px;
  --font-size-mobile-h6: 14px;
  --font-size-body-mobile-default: 14px;
  --font-size-body-mobile-medium: 13px;
  --font-size-body-mobile-small: 12px;

  /* Line Heights — Desktop */
  --line-height-h1: 34px;
  --line-height-h2: 32px;
  --line-height-h3: 28px;
  --line-height-h4: 26px;
  --line-height-h5: 24px;
  --line-height-h6: 24px;
  --line-height-body-default: 24px;
  --line-height-body-medium: 20px;
  --line-height-body-small: 18px;
  --line-height-tabs-default: 24px;
  --line-height-tabs-counter: 20px;
  --line-height-table-heading: 20px;
  --line-height-table-body: 20px;
  --line-height-button-large: 26px;
  --line-height-button-default: 24px;
  --line-height-button-medium: 20px;
  --line-height-button-small: 18px;
  --line-height-link-default: 24px;
  --line-height-link-medium: 20px;
  --line-height-link-small: 18px;

  /* Line Heights — Mobile */
  --line-height-mobile-h1: 32px;
  --line-height-mobile-h2: 28px;
  --line-height-mobile-h3: 26px;
  --line-height-mobile-h4: 24px;
  --line-height-mobile-h5: 22px;
  --line-height-mobile-h6: 24px;
  --line-height-body-mobile-default: 20px;
  --line-height-body-mobile-medium: 18px;
  --line-height-body-mobile-small: 17px;

  /* Line Heights — Online Testing */
  --line-height-body-ot-default: 32px;
  --line-height-body-ot-medium: 28px;
  --line-height-body-ot-small: 24px;
}

/* Typography Classes — Desktop */
.nds-h1 { font-family: var(--font-family-roboto); font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); line-height: var(--line-height-h1); color: var(--color-text-primary); margin: 0; }
.nds-h2 { font-family: var(--font-family-roboto); font-size: var(--font-size-h2); font-weight: var(--font-weight-regular); line-height: var(--line-height-h2); color: var(--color-text-primary); margin: 0; }
.nds-h3 { font-family: var(--font-family-roboto); font-size: var(--font-size-h3); font-weight: var(--font-weight-medium); line-height: var(--line-height-h3); color: var(--color-text-primary); margin: 0; }
.nds-h4 { font-family: var(--font-family-roboto); font-size: var(--font-size-h4); font-weight: var(--font-weight-medium); line-height: var(--line-height-h4); color: var(--color-text-primary); margin: 0; }
.nds-h5 { font-family: var(--font-family-roboto); font-size: var(--font-size-h5); font-weight: var(--font-weight-bold); line-height: var(--line-height-h5); color: var(--color-text-primary); margin: 0; }
.nds-h6 { font-family: var(--font-family-roboto); font-size: var(--font-size-h6); font-weight: var(--font-weight-medium); line-height: var(--line-height-h6); color: var(--color-text-primary); margin: 0; }
.nds-body-default { font-family: var(--font-family-roboto); font-size: var(--font-size-body-default); font-weight: var(--font-weight-regular); line-height: var(--line-height-body-default); color: var(--color-text-primary); margin: 0; }
.nds-body-medium { font-family: var(--font-family-roboto); font-size: var(--font-size-body-medium); font-weight: var(--font-weight-regular); line-height: var(--line-height-body-medium); color: var(--color-text-primary); margin: 0; }
.nds-body-small { font-family: var(--font-family-roboto); font-size: var(--font-size-body-small); font-weight: var(--font-weight-regular); line-height: var(--line-height-body-small); color: var(--color-text-primary); margin: 0; }

/* Typography Classes — Tabs */
.nds-tabs-default { font-family: var(--font-family-roboto); font-size: var(--font-size-tabs-default); font-weight: var(--font-weight-medium); line-height: var(--line-height-tabs-default); color: var(--color-text-primary); margin: 0; }
.nds-tabs-counter { font-family: var(--font-family-roboto); font-size: var(--font-size-tabs-counter); font-weight: var(--font-weight-medium); line-height: var(--line-height-tabs-counter); color: var(--color-text-primary); margin: 0; }

/* Typography Classes — Table */
.nds-table-heading { font-family: var(--font-family-roboto); font-size: var(--font-size-table-heading); font-weight: var(--font-weight-bold); line-height: var(--line-height-table-heading); color: var(--color-text-primary); margin: 0; }
.nds-table-body    { font-family: var(--font-family-roboto); font-size: var(--font-size-table-body);    font-weight: var(--font-weight-regular); line-height: var(--line-height-table-body);    color: var(--color-text-primary); margin: 0; }

/* Typography Classes — Button */
.nds-button-large   { font-family: var(--font-family-roboto); font-size: var(--font-size-button-large);   font-weight: var(--font-weight-medium); line-height: var(--line-height-button-large);   color: var(--color-text-primary); margin: 0; }
.nds-button-default { font-family: var(--font-family-roboto); font-size: var(--font-size-button-default); font-weight: var(--font-weight-medium); line-height: var(--line-height-button-default); color: var(--color-text-primary); margin: 0; }
.nds-button-medium  { font-family: var(--font-family-roboto); font-size: var(--font-size-button-medium);  font-weight: var(--font-weight-medium); line-height: var(--line-height-button-medium);  color: var(--color-text-primary); margin: 0; }
.nds-button-small   { font-family: var(--font-family-roboto); font-size: var(--font-size-button-small);   font-weight: var(--font-weight-medium); line-height: var(--line-height-button-small);   color: var(--color-text-primary); margin: 0; }

/* Typography Classes — Link */
.nds-link-default { font-family: var(--font-family-roboto); font-size: var(--font-size-link-default); font-weight: var(--font-weight-regular); line-height: var(--line-height-link-default); color: var(--color-text-link); margin: 0; text-decoration: none; }
.nds-link-default:hover { text-decoration: underline; }
.nds-link-medium  { font-family: var(--font-family-roboto); font-size: var(--font-size-link-medium);  font-weight: var(--font-weight-regular); line-height: var(--line-height-link-medium);  color: var(--color-text-link); margin: 0; text-decoration: none; }
.nds-link-medium:hover  { text-decoration: underline; }
.nds-link-small   { font-family: var(--font-family-roboto); font-size: var(--font-size-link-small);   font-weight: var(--font-weight-regular); line-height: var(--line-height-link-small);   color: var(--color-text-link); margin: 0; text-decoration: none; }
.nds-link-small:hover   { text-decoration: underline; }

/* Typography Classes — Mobile Headings */
.nds-mobile-h1 { font-family: var(--font-family-roboto); font-size: var(--font-size-mobile-h1); font-weight: var(--font-weight-bold); line-height: var(--line-height-mobile-h1); color: var(--color-text-primary); margin: 0; }
.nds-mobile-h2 { font-family: var(--font-family-roboto); font-size: var(--font-size-mobile-h2); font-weight: var(--font-weight-regular); line-height: var(--line-height-mobile-h2); color: var(--color-text-primary); margin: 0; }
.nds-mobile-h3 { font-family: var(--font-family-roboto); font-size: var(--font-size-mobile-h3); font-weight: var(--font-weight-medium); line-height: var(--line-height-mobile-h3); color: var(--color-text-primary); margin: 0; }
.nds-mobile-h4 { font-family: var(--font-family-roboto); font-size: var(--font-size-mobile-h4); font-weight: var(--font-weight-medium); line-height: var(--line-height-mobile-h4); color: var(--color-text-primary); margin: 0; }
.nds-mobile-h5 { font-family: var(--font-family-roboto); font-size: var(--font-size-mobile-h5); font-weight: var(--font-weight-bold); line-height: var(--line-height-mobile-h5); color: var(--color-text-primary); margin: 0; }
.nds-mobile-h6 { font-family: var(--font-family-roboto); font-size: var(--font-size-mobile-h6); font-weight: var(--font-weight-medium); line-height: var(--line-height-mobile-h6); color: var(--color-text-primary); margin: 0; }

/* Typography Classes — Mobile Body */
.nds-body-mobile-default { font-family: var(--font-family-roboto); font-size: var(--font-size-body-mobile-default); font-weight: var(--font-weight-regular); line-height: var(--line-height-body-mobile-default); color: var(--color-text-primary); margin: 0; }
.nds-body-mobile-medium  { font-family: var(--font-family-roboto); font-size: var(--font-size-body-mobile-medium);  font-weight: var(--font-weight-regular); line-height: var(--line-height-body-mobile-medium);  color: var(--color-text-primary); margin: 0; }
.nds-body-mobile-small   { font-family: var(--font-family-roboto); font-size: var(--font-size-body-mobile-small);   font-weight: var(--font-weight-regular); line-height: var(--line-height-body-mobile-small);   color: var(--color-text-primary); margin: 0; }

/* Typography Classes — Online Testing Body */
.nds-body-ot-default { font-family: var(--font-family-roboto); font-size: var(--font-size-body-default); font-weight: var(--font-weight-regular); line-height: var(--line-height-body-ot-default); color: var(--color-text-primary); margin: 0; }
.nds-body-ot-medium  { font-family: var(--font-family-roboto); font-size: var(--font-size-body-medium);  font-weight: var(--font-weight-regular); line-height: var(--line-height-body-ot-medium);  color: var(--color-text-primary); margin: 0; }
.nds-body-ot-small   { font-family: var(--font-family-roboto); font-size: var(--font-size-body-small);   font-weight: var(--font-weight-regular); line-height: var(--line-height-body-ot-small);   color: var(--color-text-primary); margin: 0; }


/* =============================================================================
   4. SPACING
   ============================================================================= */

:root {
  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-60: 60px;
}

/* Margin Utilities */
.nds-m-0 { margin: var(--spacing-0); }  .nds-m-4 { margin: var(--spacing-4); }
.nds-m-8 { margin: var(--spacing-8); }  .nds-m-12 { margin: var(--spacing-12); }
.nds-m-16 { margin: var(--spacing-16); } .nds-m-20 { margin: var(--spacing-20); }
.nds-m-24 { margin: var(--spacing-24); } .nds-m-32 { margin: var(--spacing-32); }
.nds-m-40 { margin: var(--spacing-40); } .nds-m-48 { margin: var(--spacing-48); }

.nds-mt-0 { margin-top: var(--spacing-0); }   .nds-mt-4 { margin-top: var(--spacing-4); }
.nds-mt-8 { margin-top: var(--spacing-8); }   .nds-mt-12 { margin-top: var(--spacing-12); }
.nds-mt-16 { margin-top: var(--spacing-16); } .nds-mt-20 { margin-top: var(--spacing-20); }
.nds-mt-24 { margin-top: var(--spacing-24); } .nds-mt-32 { margin-top: var(--spacing-32); }

.nds-mb-0 { margin-bottom: var(--spacing-0); }   .nds-mb-4 { margin-bottom: var(--spacing-4); }
.nds-mb-8 { margin-bottom: var(--spacing-8); }   .nds-mb-12 { margin-bottom: var(--spacing-12); }
.nds-mb-16 { margin-bottom: var(--spacing-16); } .nds-mb-20 { margin-bottom: var(--spacing-20); }
.nds-mb-24 { margin-bottom: var(--spacing-24); } .nds-mb-32 { margin-bottom: var(--spacing-32); }

.nds-ml-0 { margin-left: var(--spacing-0); }   .nds-ml-4 { margin-left: var(--spacing-4); }
.nds-ml-8 { margin-left: var(--spacing-8); }   .nds-ml-12 { margin-left: var(--spacing-12); }
.nds-ml-16 { margin-left: var(--spacing-16); } .nds-ml-20 { margin-left: var(--spacing-20); }
.nds-ml-24 { margin-left: var(--spacing-24); } .nds-ml-32 { margin-left: var(--spacing-32); }

.nds-mr-0 { margin-right: var(--spacing-0); }   .nds-mr-4 { margin-right: var(--spacing-4); }
.nds-mr-8 { margin-right: var(--spacing-8); }   .nds-mr-12 { margin-right: var(--spacing-12); }
.nds-mr-16 { margin-right: var(--spacing-16); } .nds-mr-20 { margin-right: var(--spacing-20); }
.nds-mr-24 { margin-right: var(--spacing-24); } .nds-mr-32 { margin-right: var(--spacing-32); }

.nds-mx-0 { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }
.nds-mx-8 { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
.nds-mx-16 { margin-left: var(--spacing-16); margin-right: var(--spacing-16); }
.nds-mx-24 { margin-left: var(--spacing-24); margin-right: var(--spacing-24); }

.nds-my-0 { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }
.nds-my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.nds-my-16 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }
.nds-my-24 { margin-top: var(--spacing-24); margin-bottom: var(--spacing-24); }

/* Padding Utilities */
.nds-p-0 { padding: var(--spacing-0); }  .nds-p-4 { padding: var(--spacing-4); }
.nds-p-8 { padding: var(--spacing-8); }  .nds-p-12 { padding: var(--spacing-12); }
.nds-p-16 { padding: var(--spacing-16); } .nds-p-20 { padding: var(--spacing-20); }
.nds-p-24 { padding: var(--spacing-24); } .nds-p-32 { padding: var(--spacing-32); }
.nds-p-40 { padding: var(--spacing-40); } .nds-p-48 { padding: var(--spacing-48); }

.nds-pt-0 { padding-top: var(--spacing-0); }   .nds-pt-4 { padding-top: var(--spacing-4); }
.nds-pt-8 { padding-top: var(--spacing-8); }   .nds-pt-12 { padding-top: var(--spacing-12); }
.nds-pt-16 { padding-top: var(--spacing-16); } .nds-pt-20 { padding-top: var(--spacing-20); }
.nds-pt-24 { padding-top: var(--spacing-24); } .nds-pt-32 { padding-top: var(--spacing-32); }

.nds-pb-0 { padding-bottom: var(--spacing-0); }   .nds-pb-4 { padding-bottom: var(--spacing-4); }
.nds-pb-8 { padding-bottom: var(--spacing-8); }   .nds-pb-12 { padding-bottom: var(--spacing-12); }
.nds-pb-16 { padding-bottom: var(--spacing-16); } .nds-pb-20 { padding-bottom: var(--spacing-20); }
.nds-pb-24 { padding-bottom: var(--spacing-24); } .nds-pb-32 { padding-bottom: var(--spacing-32); }

.nds-pl-0 { padding-left: var(--spacing-0); }   .nds-pl-4 { padding-left: var(--spacing-4); }
.nds-pl-8 { padding-left: var(--spacing-8); }   .nds-pl-12 { padding-left: var(--spacing-12); }
.nds-pl-16 { padding-left: var(--spacing-16); } .nds-pl-20 { padding-left: var(--spacing-20); }
.nds-pl-24 { padding-left: var(--spacing-24); } .nds-pl-32 { padding-left: var(--spacing-32); }

.nds-pr-0 { padding-right: var(--spacing-0); }   .nds-pr-4 { padding-right: var(--spacing-4); }
.nds-pr-8 { padding-right: var(--spacing-8); }   .nds-pr-12 { padding-right: var(--spacing-12); }
.nds-pr-16 { padding-right: var(--spacing-16); } .nds-pr-20 { padding-right: var(--spacing-20); }
.nds-pr-24 { padding-right: var(--spacing-24); } .nds-pr-32 { padding-right: var(--spacing-32); }

.nds-px-0 { padding-left: var(--spacing-0); padding-right: var(--spacing-0); }
.nds-px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
.nds-px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
.nds-px-16 { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
.nds-px-20 { padding-left: var(--spacing-20); padding-right: var(--spacing-20); }
.nds-px-24 { padding-left: var(--spacing-24); padding-right: var(--spacing-24); }

.nds-py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }
.nds-py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
.nds-py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
.nds-py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
.nds-py-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
.nds-py-24 { padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); }


/* =============================================================================
   5. HEIGHT
   ============================================================================= */

:root {
  --height-0: 0px;   --height-4: 4px;   --height-8: 8px;   --height-12: 12px;
  --height-16: 16px;  --height-20: 20px;  --height-24: 24px;  --height-28: 28px;
  --height-32: 32px;  --height-36: 36px;  --height-40: 40px;  --height-44: 44px;
  --height-48: 48px;  --height-52: 52px;  --height-56: 56px;  --height-60: 60px;
}

.nds-h-0 { height: var(--height-0); }   .nds-h-4 { height: var(--height-4); }
.nds-h-8 { height: var(--height-8); }   .nds-h-12 { height: var(--height-12); }
.nds-h-16 { height: var(--height-16); } .nds-h-20 { height: var(--height-20); }
.nds-h-24 { height: var(--height-24); } .nds-h-28 { height: var(--height-28); }
.nds-h-32 { height: var(--height-32); } .nds-h-36 { height: var(--height-36); }
.nds-h-40 { height: var(--height-40); } .nds-h-44 { height: var(--height-44); }
.nds-h-48 { height: var(--height-48); } .nds-h-52 { height: var(--height-52); }
.nds-h-56 { height: var(--height-56); } .nds-h-60 { height: var(--height-60); }


/* =============================================================================
   6. WIDTH
   ============================================================================= */

:root {
  --width-0: 0px;   --width-4: 4px;   --width-8: 8px;   --width-12: 12px;
  --width-16: 16px;  --width-20: 20px;  --width-24: 24px;  --width-28: 28px;
  --width-32: 32px;  --width-36: 36px;  --width-40: 40px;  --width-44: 44px;
  --width-48: 48px;  --width-52: 52px;  --width-56: 56px;  --width-60: 60px;
  --width-full: 100%;
}

.nds-w-0 { width: var(--width-0); }   .nds-w-4 { width: var(--width-4); }
.nds-w-8 { width: var(--width-8); }   .nds-w-12 { width: var(--width-12); }
.nds-w-16 { width: var(--width-16); } .nds-w-20 { width: var(--width-20); }
.nds-w-24 { width: var(--width-24); } .nds-w-28 { width: var(--width-28); }
.nds-w-32 { width: var(--width-32); } .nds-w-36 { width: var(--width-36); }
.nds-w-40 { width: var(--width-40); } .nds-w-44 { width: var(--width-44); }
.nds-w-48 { width: var(--width-48); } .nds-w-52 { width: var(--width-52); }
.nds-w-56 { width: var(--width-56); } .nds-w-60 { width: var(--width-60); }
.nds-w-full { width: var(--width-full); }
.nds-w-1\/2 { width: 50%; }  .nds-w-1\/3 { width: 33.333333%; }
.nds-w-2\/3 { width: 66.666667%; } .nds-w-1\/4 { width: 25%; }
.nds-w-3\/4 { width: 75%; }


/* =============================================================================
   7. RADIUS
   ============================================================================= */

:root {
  --radius-0: 0px;   --radius-2: 2px;   --radius-4: 4px;   --radius-6: 6px;
  --radius-8: 8px;   --radius-10: 10px;  --radius-12: 12px;  --radius-14: 14px;
  --radius-16: 16px;  --radius-18: 18px;  --radius-20: 20px;  --radius-22: 22px;
  --radius-24: 24px;  --radius-circle: 50%;
}

.nds-radius-0 { border-radius: var(--radius-0); }
.nds-radius-2 { border-radius: var(--radius-2); }
.nds-radius-4 { border-radius: var(--radius-4); }
.nds-radius-6 { border-radius: var(--radius-6); }
.nds-radius-8 { border-radius: var(--radius-8); }
.nds-radius-10 { border-radius: var(--radius-10); }
.nds-radius-12 { border-radius: var(--radius-12); }
.nds-radius-14 { border-radius: var(--radius-14); }
.nds-radius-16 { border-radius: var(--radius-16); }
.nds-radius-18 { border-radius: var(--radius-18); }
.nds-radius-20 { border-radius: var(--radius-20); }
.nds-radius-22 { border-radius: var(--radius-22); }
.nds-radius-24 { border-radius: var(--radius-24); }
.nds-radius-circle { border-radius: var(--radius-circle); }


/* =============================================================================
   8. STROKE
   ============================================================================= */

:root {
  --stroke-0: 0px; --stroke-1: 1px; --stroke-2: 2px; --stroke-3: 3px; --stroke-4: 4px;

  --color-stroke-default: #54585e;
  --color-stroke-light: #dddee0;
  --color-stroke-primary: #146eb3;
  --color-stroke-secondary: #8e9297;
  --color-stroke-success: #4caf50;
  --color-stroke-warning: #ff9800;
  --color-stroke-error: #f44336;

  --colors-stroke-inputs-default: var(--color-medium-grey-90);
  --colors-stroke-inputs-hover: var(--color-interactive-blue);
  --colors-stroke-inputs-active: var(--color-interactive-blue);
  --colors-stroke-inputs-populated: var(--color-medium-grey-100);
  --colors-stroke-inputs-error: var(--color-red-90);
  --colors-stroke-inputs-inactive: var(--color-medium-grey-60);
}

.nds-border-0 { border-width: var(--stroke-0); }
.nds-border-1 { border-width: var(--stroke-1); }
.nds-border-2 { border-width: var(--stroke-2); }
.nds-border-3 { border-width: var(--stroke-3); }
.nds-border-4 { border-width: var(--stroke-4); }


/* =============================================================================
   9. ELEVATION
   ============================================================================= */

:root {
  --nds-elevation-header: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  --nds-elevation-card: 0 0 2px 0 rgba(0, 0, 0, 0.20);
  --nds-elevation-card-hover: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --nds-elevation-popover: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 12px 0 rgba(0, 0, 0, 0.15);
  --nds-elevation-tooltip: 0 0 6px 0 rgba(0, 0, 0, 0.5);
  --nds-elevation-modal: 0 0 8px 0 rgba(0, 0, 0, 0.25);
  --nds-elevation-modal-body-overflow: 0 0 4px 0 rgba(0, 0, 0, 0.20) inset;
  --nds-elevation-dropdown: 0 1px 5px 0 rgba(0, 0, 0, 0.30);
  --nds-elevation-sidebar: 0 0 6px 0 rgba(0, 0, 0, 0.25);
  --nds-elevation-hover: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
  --nds-elevation-active: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.nds-elevation-header { box-shadow: var(--nds-elevation-header); }
.nds-elevation-card { box-shadow: var(--nds-elevation-card); }
.nds-elevation-card-hover { box-shadow: var(--nds-elevation-card-hover); }
.nds-elevation-popover { box-shadow: var(--nds-elevation-popover); }
.nds-elevation-tooltip { box-shadow: var(--nds-elevation-tooltip); }
.nds-elevation-modal { box-shadow: var(--nds-elevation-modal); }
.nds-elevation-dropdown { box-shadow: var(--nds-elevation-dropdown); }
.nds-elevation-sidebar { box-shadow: var(--nds-elevation-sidebar); }

.nds-elevation-interactive {
  box-shadow: var(--nds-elevation-card);
  transition: box-shadow 0.2s ease-in-out;
}
.nds-elevation-interactive:hover { box-shadow: var(--nds-elevation-card-hover); }
.nds-elevation-interactive:active { box-shadow: var(--nds-elevation-active); }


/* =============================================================================
   10. ICONS
   ============================================================================= */

:root {
  --nds-icon-xx-mini: 8px;
  --nds-icon-x-mini: 10px;
  --nds-icon-x-small: 11px;
  --nds-icon-small: 12px;
  --nds-icon-medium: 14px;
  --nds-icon-default: 16px;
  --nds-icon-large: 20px;
  --nds-icon-x-large: 24px;
  --nds-icon-xx-large: 32px;
  --nds-icon-xxx-large: 40px;

  --nds-icon-weight-light: 'fa-light';
  --nds-icon-weight-regular: 'fa-regular';
  --nds-icon-weight-solid: 'fa-solid';
  --nds-icon-weight-duotone: 'fa-duotone';

  --nds-icon-color-primary: #202020;
  --nds-icon-color-secondary: #6c757d;
  --nds-icon-color-success: #28a745;
  --nds-icon-color-warning: #ffc107;
  --nds-icon-color-danger: #dc3545;
  --nds-icon-color-info: #17a2b8;
  --nds-icon-color-light: #f8f9fa;
  --nds-icon-color-dark: #343a40;
  --nds-icon-color-muted: #6c757d;
  --nds-icon-color-white: #ffffff;
  --nds-icon-color-black: #000000;
  --nds-icon-color-hover: #0f5a95;
  --nds-icon-color-active: #0d4f82;
  --nds-icon-color-disabled: #adb5bd;
}

.nds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  text-rendering: auto;
  line-height: 0;
  text-align: center;
  color: #202020;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nds-icon--xx-mini { font-size: var(--nds-icon-xx-mini); }
.nds-icon--x-mini { font-size: var(--nds-icon-x-mini); }
.nds-icon--x-small { font-size: var(--nds-icon-x-small); }
.nds-icon--small { font-size: var(--nds-icon-small); }
.nds-icon--medium { font-size: var(--nds-icon-medium); }
.nds-icon--default { font-size: var(--nds-icon-default); }
.nds-icon--large { font-size: var(--nds-icon-large); }
.nds-icon--x-large { font-size: var(--nds-icon-x-large); }
.nds-icon--xx-large { font-size: var(--nds-icon-xx-large); }
.nds-icon--xxx-large { font-size: var(--nds-icon-xxx-large); }

.nds-icon--primary { color: var(--nds-icon-color-primary); }
.nds-icon--secondary { color: var(--nds-icon-color-secondary); }
.nds-icon--success { color: var(--nds-icon-color-success); }
.nds-icon--warning { color: var(--nds-icon-color-warning); }
.nds-icon--danger { color: var(--nds-icon-color-danger); }
.nds-icon--info { color: var(--nds-icon-color-info); }
.nds-icon--dark { color: var(--nds-icon-color-dark); }
.nds-icon--muted { color: var(--nds-icon-color-muted); }
.nds-icon--white { color: var(--nds-icon-color-white); }
.nds-icon--black { color: var(--nds-icon-color-black); }
.nds-icon--disabled { color: var(--nds-icon-color-disabled); cursor: not-allowed; opacity: 0.6; }
.nds-icon--clickable { cursor: pointer; }
.nds-icon--clickable:hover { color: var(--nds-icon-color-hover); transition: color 0.2s ease-in-out; }
.nds-icon--clickable:active { color: var(--nds-icon-color-active); }

@keyframes nds-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.nds-icon--spin { animation: nds-icon-spin 2s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .nds-icon--spin { animation: none !important; }
}


/* =============================================================================
   11. GRID
   ============================================================================= */

:root {
  --grid-columns-mobile: 4;   --grid-columns-tablet: 8;  --grid-columns-desktop: 12;
  --grid-gutter-mobile: 16px;  --grid-gutter-tablet: 24px; --grid-gutter-desktop: 24px;
  --grid-margin-mobile: 16px;  --grid-margin-tablet: 32px; --grid-margin-desktop: 40px;
  --grid-container-sm: 640px;  --grid-container-md: 768px;
  --grid-container-lg: 1024px; --grid-container-xl: 1280px;
  --grid-container-2xl: 1440px;
  --grid-col-1: 8.333333%; --grid-col-2: 16.666667%; --grid-col-3: 25%;
  --grid-col-4: 33.333333%; --grid-col-5: 41.666667%; --grid-col-6: 50%;
  --grid-col-7: 58.333333%; --grid-col-8: 66.666667%; --grid-col-9: 75%;
  --grid-col-10: 83.333333%; --grid-col-11: 91.666667%; --grid-col-12: 100%;
}

.nds-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--grid-margin-mobile); padding-right: var(--grid-margin-mobile); }
.nds-container-sm { max-width: var(--grid-container-sm); }
.nds-container-md { max-width: var(--grid-container-md); }
.nds-container-lg { max-width: var(--grid-container-lg); }
.nds-container-xl { max-width: var(--grid-container-xl); }
.nds-container-2xl { max-width: var(--grid-container-2xl); }

.nds-grid { display: grid; grid-template-columns: repeat(var(--grid-columns-mobile), 1fr); gap: var(--grid-gutter-mobile); width: 100%; }

.nds-col-span-1 { grid-column: span 1; }  .nds-col-span-2 { grid-column: span 2; }
.nds-col-span-3 { grid-column: span 3; }  .nds-col-span-4 { grid-column: span 4; }
.nds-col-span-5 { grid-column: span 5; }  .nds-col-span-6 { grid-column: span 6; }
.nds-col-span-7 { grid-column: span 7; }  .nds-col-span-8 { grid-column: span 8; }
.nds-col-span-9 { grid-column: span 9; }  .nds-col-span-10 { grid-column: span 10; }
.nds-col-span-11 { grid-column: span 11; } .nds-col-span-12 { grid-column: span 12; }
.nds-col-span-full { grid-column: 1 / -1; }

.nds-gap-0 { gap: 0; }
.nds-gap-xs { gap: var(--spacing-4); }  .nds-gap-sm { gap: var(--spacing-8); }
.nds-gap-md { gap: var(--spacing-16); } .nds-gap-lg { gap: var(--spacing-24); }
.nds-gap-xl { gap: var(--spacing-32); }

.nds-justify-items-start { justify-items: start; }
.nds-justify-items-center { justify-items: center; }
.nds-justify-items-end { justify-items: end; }
.nds-align-items-start { align-items: start; }
.nds-align-items-center { align-items: center; }
.nds-align-items-end { align-items: end; }
.nds-justify-content-between { justify-content: space-between; }
.nds-justify-content-center { justify-content: center; }

@media (min-width: 768px) {
  .nds-container { padding-left: var(--grid-margin-tablet); padding-right: var(--grid-margin-tablet); }
  .nds-grid { grid-template-columns: repeat(var(--grid-columns-tablet), 1fr); gap: var(--grid-gutter-tablet); }
}

@media (min-width: 1024px) {
  .nds-container { padding-left: var(--grid-margin-desktop); padding-right: var(--grid-margin-desktop); }
  .nds-grid { grid-template-columns: repeat(var(--grid-columns-desktop), 1fr); gap: var(--grid-gutter-desktop); }
}


/* =============================================================================
   12. MOTION
   ============================================================================= */

:root {
  --nds-motion-quick: 120ms;
  --nds-motion-standard: 220ms;
  --nds-motion-slow: 320ms;

  --nds-easing-standard:    cubic-bezier(0.2, 0, 0, 1);      /* MD3 standard */
  --nds-easing-accelerate:  cubic-bezier(0.3, 0, 1, 1);      /* MD3 exits */
  --nds-easing-emphasized:  cubic-bezier(0.05, 0.7, 0.1, 1);  /* entrances */
  --nds-easing-confirm:     cubic-bezier(0.2, 0.8, 0.2, 1.05); /* 5% overshoot */
}