/* Import Roboto font (ensure it's linked in HTML as well) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  /* Material Design 3 Baseline Color Palette (Illustrative Light Theme) */
  /* Replace with your generated theme from Material Theme Builder */
  --md-sys-color-primary: #3949AB; /* Indigo 600 */
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #C5CAE9; /* Indigo 100 */
  --md-sys-color-on-primary-container: #001A78; /* Darker for contrast on light container */

  --md-sys-color-secondary: #FFC107; /* Amber 500 */
  --md-sys-color-on-secondary: #000000;
  --md-sys-color-secondary-container: #FFECB3; /* Amber 100 */
  --md-sys-color-on-secondary-container: #483500; /* Darker for contrast */

  --md-sys-color-tertiary: #4CAF50; /* Green 500 */
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #C8E6C9; /* Green 100 */
  --md-sys-color-on-tertiary-container: #083A0A;

  --md-sys-color-error: #D32F2F; /* Red 700 */
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFCDD2; /* Red 100 */
  --md-sys-color-on-error-container: #5F0000;

  --md-sys-color-background: #F8F9FA; /* Light Grey */
  --md-sys-color-on-background: #1C1B1F; /* Near Black */

  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-variant: #E0E0E0; /* Grey 300 */
  --md-sys-color-on-surface-variant: #424242; /* Grey 700 */
  --md-sys-color-outline: #757575; /* Grey 600 */
  --md-sys-color-outline-variant: #BDBDBD; /* Grey 400 */

  /* Additional surface container shades for depth */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F5F5F5; /* Grey 100 */
  --md-sys-color-surface-container: #EEEEEE; /* Grey 200 */
  --md-sys-color-surface-container-high: #E0E0E0; /* Grey 300 */
  --md-sys-color-surface-container-highest: #BDBDBD; /* Grey 400 */


  /* Custom semantic colors (using MD3 roles as base) */
  --md-sys-color-warning-container: var(--md-sys-color-secondary-container);
  --md-sys-color-on-warning-container: var(--md-sys-color-on-secondary-container);
  --md-sys-color-success-container: var(--md-sys-color-tertiary-container);
  --md-sys-color-on-success-container: var(--md-sys-color-on-tertiary-container);


  /* Elevation - MD3 uses surface tints more in dark theme, shadows primarily in light */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-level2: 0px 2px 6px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-level3: 0px 4px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
  /* Add more levels as needed */

  /* Shape - MD3 uses dp, which translates to px for web */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px; /* For pills/circular elements */

  /* MD3 Typography Scale (Illustrative - customize as needed) */
  --md-sys-typescale-font-family: 'Roboto', sans-serif;

  --md-sys-typescale-display-large-font-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-font-weight: 400;
  --md-sys-typescale-display-large-letter-spacing: -0.25px;

  --md-sys-typescale-headline-large-font-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-font-weight: 500;

  --md-sys-typescale-headline-medium-font-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-font-weight: 500;

  --md-sys-typescale-title-large-font-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-font-weight: 500;

  --md-sys-typescale-title-medium-font-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-font-weight: 500;
  --md-sys-typescale-title-medium-letter-spacing: 0.15px;

  --md-sys-typescale-title-small-font-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-font-weight: 500;
  --md-sys-typescale-title-small-letter-spacing: 0.1px;

  --md-sys-typescale-label-large-font-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-font-weight: 500;
  --md-sys-typescale-label-large-letter-spacing: 0.1px;

  --md-sys-typescale-label-medium-font-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-font-weight: 500;
  --md-sys-typescale-label-medium-letter-spacing: 0.5px;

  --md-sys-typescale-body-large-font-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-font-weight: 400;
  --md-sys-typescale-body-large-letter-spacing: 0.5px;

  --md-sys-typescale-body-medium-font-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-font-weight: 400;
  --md-sys-typescale-body-medium-letter-spacing: 0.25px;

  --md-sys-typescale-body-small-font-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-font-weight: 400;
  --md-sys-typescale-body-small-letter-spacing: 0.4px;

  /* Spacing */
  --spacing-unit: 8px;
}

/* Global Resets & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%; /* Allows user to zoom text */
  scroll-padding-top: 100px; /* Add padding when scrolling to anchors to account for sticky headers */
}

body {
  font-family: var(--md-sys-typescale-font-family);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Typography Application */
h1, .page-title {
  font-size: var(--md-sys-typescale-headline-large-font-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
  color: var(--md-sys-color-primary);
  margin-bottom: calc(var(--spacing-unit) * 1);
}

h2, .page-subtitle {
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

h3, .tab-content-title, .roadmap-subtitle {
  font-size: var(--md-sys-typescale-title-large-font-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  color: var(--md-sys-color-primary);
  margin-top: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

h4 {
  font-size: var(--md-sys-typescale-title-medium-font-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  color: var(--md-sys-color-on-surface);
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 1);
}

p, li {
  font-size: var(--md-sys-typescale-body-medium-font-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  margin-bottom: calc(var(--spacing-unit) * 1.5);
}

ul, ol {
  padding-left: calc(var(--spacing-unit) * 2.5); /* Indent lists */
  margin-bottom: calc(var(--spacing-unit) * 1.5);
}

strong {
  font-weight: var(--md-sys-typescale-title-small-font-weight); /* Or bold (700) */
}

.citation {
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-font-size);
}

/* Header */
.site-header {
  background-color: var(--md-sys-color-surface-container-high); /* Slightly elevated surface */
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level2);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

.global-nav-title {
  font-size: var(--md-sys-typescale-title-large-font-size);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  color: var(--md-sys-color-primary);
}


/* Header adjustments */
.global-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Glossary button */
.glossary-button {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 0.5);
  background: none;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
  padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1);
  border-radius: var(--md-sys-shape-corner-small);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  cursor: pointer;
  transition: all 0.2s ease;
}

.glossary-button:hover, .glossary-button:focus-visible {
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.glossary-button svg {
  flex-shrink: 0;
}

/* Glossary panel */
.glossary-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background-color: var(--md-sys-color-surface);
  border-left: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-sys-elevation-level3);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.glossary-panel.open {
  transform: translateX(0);
}

.glossary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--spacing-unit) * 2);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container-low);
}

.glossary-header h3 {
  margin: 0;
  font-size: var(--md-sys-typescale-title-medium-font-size);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  color: var(--md-sys-color-primary);
}

.glossary-close {
  background: none;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  padding: calc(var(--spacing-unit) * 0.5);
  border-radius: var(--md-sys-shape-corner-extra-small);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.glossary-close:hover, .glossary-close:focus-visible {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

.glossary-content {
  flex: 1;
  padding: calc(var(--spacing-unit) * 2);
  overflow-y: auto;
  color: var(--md-sys-color-on-surface);
}

/* Overlay for mobile */
.glossary-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

.glossary-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .glossary-panel {
    width: 100vw;
    max-width: 400px;
  }
  
  .glossary-button span {
    display: none; /* Hide text on small screens, keep icon */
  }
}

@media (max-width: 480px) {
  .glossary-panel {
    width: 100vw;
  }
}


/* Main Content Area */


.site-main {
  padding: calc(var(--spacing-unit) * 3);
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  flex-grow: 1;
  margin-top: calc(var(--spacing-unit) * 8);
}

.page-header {
  margin-bottom: calc(var(--spacing-unit) * 2);
  border-bottom: none;
  padding-bottom: calc(var(--spacing-unit) * 2);
}


/* Tabs */
.tab-container {
  margin-top: calc(var(--spacing-unit) * 3);
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level1);
  overflow: hidden;
  position: relative;
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding: 0;
  box-shadow: var(--md-sys-elevation-level1);
}

.tab-button {
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  background: none;
  border: none;
  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  position: relative; /* For the indicator */
  text-align: center;
  border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0 0;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-grow: 1; /* Allow tabs to take equal space if desired, or set specific widths */
  min-width: 120px; /* Ensure tabs don't get too squished before wrapping */
}

.tab-button::after { /* Indicator line */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: transparent;
  border-radius: 3px 3px 0 0;
  transition: background-color 0.3s ease;
}

.tab-button:hover, .tab-button:focus-visible {
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary-container); /* Subtle hover */
}

.tab-button[aria-selected="true"] {
  color: var(--md-sys-color-primary);
  font-weight: bold; /* Or a heavier M3 weight if defined */
}
.tab-button[aria-selected="true"]::after {
  background-color: var(--md-sys-color-primary);
}

.tab-button:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px; /* Adjust to be inside or outside */
}

.tab-content {
  display: none;
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
  background-color: var(--md-sys-color-surface);
  min-height: 400px; /* Ensure consistent minimum height to prevent jarring layout shifts */
}

.tab-content[aria-hidden="false"] {
  display: block;
}
.tab-content:focus-visible { /* Make tab panel focusable for programmatic focus */
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.tab-container .page-subtitle {
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 3);
  margin-bottom: 0;
  text-align: left;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}


/* Tables */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto; /* Enable horizontal scroll for the table */
  margin-bottom: calc(var(--spacing-unit) * 3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}

table {
  width: 100%;
  min-width: 800px; /* Force horizontal scroll below this width */
  border-collapse: collapse;
  font-size: var(--md-sys-typescale-body-medium-font-size);
}

table caption {
  font-size: var(--md-sys-typescale-title-small-font-size);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  color: var(--md-sys-color-on-surface-variant);
  padding: calc(var(--spacing-unit) * 1.5);
  text-align: left;
  caption-side: top; /* MD default for caption position */
  background-color: var(--md-sys-color-surface-container-low);
}

th, td {
  padding: calc(var(--spacing-unit) * 1.5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

th { /* Table Headers */
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant); /* Ensure contrast */
  border-bottom-width: 2px; /* Thicker border for header row */
  border-bottom-color: var(--md-sys-color-outline);
}

tbody tr:nth-child(even) {
  background-color: var(--md-sys-color-surface-container-lowest); /* Subtle striping */
}
tbody tr:hover {
  background-color: var(--md-sys-color-surface-container-low); /* Hover effect */
}

/* TOC Styling */

/* Table of Contents Styling */
.toc {
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.toc h4 {
  margin-top: 0;
  margin-bottom: calc(var(--spacing-unit) * 1.5);
  color: var(--md-sys-color-primary);
}

.toc ul {
  margin-bottom: 0;
  padding-left: calc(var(--spacing-unit) * 2.5);
}

.toc li {
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.toc a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  font-size: var(--md-sys-typescale-body-medium-font-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.toc a:hover, .toc a:focus {
  text-decoration: underline;
  color: var(--md-sys-color-on-surface);
}

/* Ensure smooth scrolling and proper offset for fixed header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* Adjust based on your header height */
}


/* End of TOC Styling */

.stakeholder {
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  color: var(--md-sys-color-on-surface);
}

.parameters {
  font-size: var(--md-sys-typescale-body-small-font-size);
  color: var(--md-sys-color-on-surface-variant);
}

.parameters ul {
  margin: 0;
  padding-left: calc(var(--spacing-unit) * 2);
}

.section-title { /* For rows like "Key Colorado SB24-205 Requirements" */
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  background-color: var(--md-sys-color-surface-container-high) !important; /* Ensure overrides even/odd striping */
  color: var(--md-sys-color-on-surface);
}
.section-border > td {
  border-top: 2px solid var(--md-sys-color-primary);
}

/* Specific row highlights - ensure accessible contrast with text */
.organization td { /* Slightly different background for AcmeSoft rows if needed */
  background-color: var(--md-sys-color-secondary-container); /* Example */
  color: var(--md-sys-color-on-secondary-container);
}
.friction-row td {
  background-color: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.risk-row td {
  background-color: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}
.mitigation-row td {
  background-color: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

/* Compliance Heatmap Specifics */
.heatmap-container {
  margin-top: calc(var(--spacing-unit) * 4);
  padding: calc(var(--spacing-unit) * 3);
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-level1);
}

.compliance-table th,
.compliance-table td {
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: var(--spacing-unit);
  vertical-align: middle; /* Better for single numbers */
  text-align: center; /* Center scores */
}

.compliance-table th:first-child, /* Stakeholder column */
.compliance-table td:first-child {
  text-align: left;
}

.legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 2);
  margin: calc(var(--spacing-unit) * 2.5) 0;
  padding: calc(var(--spacing-unit) * 1.5);
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-small);
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: var(--md-sys-typescale-body-small-font-size);
  color: var(--md-sys-color-on-surface-variant);
}

.legend-color {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-unit);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

/* Note Box & Info Sections */
.note-box {
  background-color: var(--md-sys-color-secondary-container);
  border-left: 4px solid var(--md-sys-color-secondary);
  padding: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2.5);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-secondary-container);
}
.note-box p, .note-box h4 {
    color: var(--md-sys-color-on-secondary-container);
}

.observations, .improvement-section {
  background-color: var(--md-sys-color-surface-container-low);
  padding: calc(var(--spacing-unit) * 2);
  margin-top: calc(var(--spacing-unit) * 2.5);
  border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.observations ul, .improvement-section ol {
  padding-left: calc(var(--spacing-unit) * 3);
}
.observations li, .improvement-section li {
  margin-bottom: var(--spacing-unit);
}

.outcomes-summary p {
  line-height: var(--md-sys-typescale-body-large-line-height);
  margin-bottom: calc(var(--spacing-unit) * 1.5);
}

/* Footer */
.site-footer {
  margin-top: calc(var(--spacing-unit) * 5);
  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  text-align: center;
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}
.site-footer p {
  font-size: var(--md-sys-typescale-body-small-font-size);
  margin: 0;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

/* tags in Roadmap tabs */
    .tag-pill {
      display: inline-block;
      padding: 0.2em 0.6em;
      margin: 0.1em 0.2em;
      font-size: 0.85em;
      font-weight: 500;
      color: var(--md-sys-color-on-primary-container, #001E2F);
      background-color: var(--md-sys-color-primary-container, #D1E4FF);
      border-radius: 1em;
      line-height: 1.2;
      vertical-align: baseline;
      white-space: nowrap;
    }
    td > strong {
      display: inline-block;
      margin-bottom: 0.2em;
    }

    .tag-review { background-color: lightcoral !important; color: white !important; }
    .tag-project-initiation-and-planning { background-color: lightblue !important; color: #001E2F !important;}
    .tag-implementation-and-execution { background-color: lightgreen !important; color: #001E2F !important;}
    .tag-monitoring { background-color: gold !important; color: #001E2F !important;}
    .tag-reporting { background-color: lightpink !important; color: #001E2F !important;}
    .tag-assessment-and-analysis { background-color: lightsalmon !important; color: #001E2F !important;}
    .tag-training-and-communication { background-color: lightseagreen !important; color: white !important;}
    .tag-policy-and-procedure-development { background-color: lightsteelblue !important; color: #001E2F !important;}

    .roadmap-activities ul {
      list-style-type: square;
      padding-left: 20px;
      margin-top: 0;
      margin-bottom: 0.5em;
    }
    .roadmap-activities li {
      margin-bottom: 0.3em;
    }

/* Responsive Adjustments */
@media (max-width: 992px) { /* Medium screens / Tablets */
  .site-main {
    width: 95%;
    padding: calc(var(--spacing-unit) * 2);
  }
  .tab-button {
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 1.5);
    font-size: var(--md-sys-typescale-label-medium-font-size);
  }
  .table-responsive-wrapper {
    /* Wrapper will handle scroll, table min-width forces it */
  }

  h1, .page-title {
    font-size: var(--md-sys-typescale-display-large-font-size); /* Adjust if too large for tablets */
  }
  h2, .page-subtitle {
    font-size: calc(var(--md-sys-typescale-headline-medium-font-size) * 0.9);
  }
}

@media (max-width: 768px) { /* Small screens / Large Phones */
  .tab-buttons {
    /* Tabs will wrap due to flex-wrap: wrap */
  }
  .tab-button {
    flex-basis: 50%; /* Example: 2 tabs per row, adjust as needed */
    min-width: 0; /* Override previous min-width if necessary for flex-basis to work well */
  }

  /* Further reduce table cell padding on small screens */
  table {
    min-width: 600px; /* Adjust min-width based on content */
  }
  th, td {
    padding: var(--spacing-unit);
    font-size: var(--md-sys-typescale-body-small-font-size);
  }
  table caption {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    padding: var(--spacing-unit);
  }

  .parameters ul {
    padding-left: calc(var(--spacing-unit) * 1.5);
  }
  .legend {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-unit);
  }
}

/* Add these new classes to your existing styles.css file */

/* Base site-main styles remain the same, but we'll add modifier classes */

/* Wide layout for table-heavy content */
.site-main.wide-layout {
  max-width: 1800px; /* Much wider for tables */
  width: 95%; /* Use more of the viewport */
  transition: max-width 0.3s ease, width 0.3s ease; /* Smooth transition */
}

/* Standard layout for text-heavy content (default) */
.site-main.standard-layout {
  max-width: 1200px; /* Current width for readability */
  width: 90%; /* Current width */
  transition: max-width 0.3s ease, width 0.3s ease; /* Smooth transition */
}

/* Responsive adjustments for wide layout */
@media (max-width: 1400px) {
  .site-main.wide-layout {
    width: 98%; /* Use even more space on smaller screens */
  }
}

@media (max-width: 992px) {
  .site-main.wide-layout {
    width: 95%; /* Match standard layout on tablets */
    max-width: 1200px; /* Revert to standard max-width on tablets */
  }
}

@media (max-width: 768px) {
  .site-main.wide-layout {
    width: 95%; /* Same as standard on mobile */
    max-width: none; /* Remove max-width constraint on mobile */
  }
}

/* Optional: Enhance table responsiveness in wide layout */
.wide-layout .table-responsive-wrapper {
  /* Tables can be even wider in wide layout */
  margin-left: calc(-1 * var(--spacing-unit));
  margin-right: calc(-1 * var(--spacing-unit));
}

.wide-layout .table-responsive-wrapper table {
  min-width: 1000px; /* Slightly wider minimum for tables in wide layout */
}

/* Optional: Adjust tab content padding in wide layout */
.wide-layout .tab-content {
  padding-left: calc(var(--spacing-unit) * 2);
  padding-right: calc(var(--spacing-unit) * 2);
}

@media (max-width: 480px) { /* Extra Small screens / Phones */
  .site-main {
    width: 100%;
    padding: var(--spacing-unit);
  }
  .page-header {
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding-bottom: var(--spacing-unit);
  }
  h1, .page-title {
    font-size: var(--md-sys-typescale-headline-medium-font-size);
  }
  h2, .page-subtitle {
    font-size: var(--md-sys-typescale-title-large-font-size);
  }
  h3, .tab-content-title, .roadmap-subtitle {
    font-size: var(--md-sys-typescale-title-medium-font-size);
  }

  .tab-button {
    flex-basis: 100%; /* Full width tabs on very small screens */
    border-bottom: 1px solid var(--md-sys-color-outline-variant); /* Add separator if they stack */
  }
  .tab-button:last-child {
    border-bottom: none;
  }
  .tab-content {
    padding: var(--spacing-unit) * 1.5;
  }

  table {
    min-width: 450px; /* Further adjust if needed */
  }
  th, td {
    padding: calc(var(--spacing-unit) * 0.75);
  }

  .site-footer {
    padding: calc(var(--spacing-unit) * 2) var(--spacing-unit);
  }
}