:root {
  --font-sans: Inter, "Source Sans 3", Noto Sans, sans-serif;
  --color-page: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f5edee;
  --color-text: #0b152d;
  --color-title: #252c59;
  --color-kpi-value: #1f1a4f;
  --color-text-muted: #6f7285;
  --color-accent: #f9b604;
  --color-accent-strong: #f9b604;
  --field-icon-color: #ffffff;
  --badge-color: #000000;
  --badge-bg: #f9b604;
  --badge-border: #f9b604;
  --color-border: rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 24px 60px -30px rgba(15, 23, 42, 0.25);
  --shadow-card: 0 20px 46px -30px rgba(15, 23, 42, 0.22);
  --chart-implemented: #21ab61;
  --chart-in-progress: #e0861a;
  --chart-partial: #84c98d;
  --chart-not-started: #d64c4d;
  --chart-no-data: #f9b604;
  --glance-donut-track: rgba(125, 61, 65, 0.16);
  --glance-legend-heading: #1f1a4f;
  --charts-block-height: clamp(160px, 16vw, 220px);
  --chart-visual-height: var(--charts-block-height);
  --charts-block-padding: clamp(16px, 2vw, 22px);
  --insights-chart-title-size: clamp(1.25rem, 2.2vw, 1.5rem);
  --insights-chart-subtitle-size: clamp(0.95rem, 1.8vw, 1.08rem);
  --section-header-gap: clamp(6px, 1.2vw, 14px);
  --section-padding-inline: clamp(16px, 4vw, 24px);
  --content-width: min(var(--content-max-width), calc(100% - var(--section-padding-inline) * 2));
  --content-max-width: 1240px;
  --clustered-bars-padding-inline: clamp(10px, 3vw, 16px);
  --dashboard-loading-image: none;
  --banner-nav-offset: 0px;
}

@media (max-width: 768px) {
  :root {
    --content-width: 100%;
  }
}

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

body {
  margin: 0;
  padding-top: var(--banner-nav-offset, 0px);
  min-height: 100vh;
  font-family: var(--font-sans);
  background: var(--color-page);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-align: left;
  overflow-x: hidden;
}

.dashboard-banner p,
.proposal-modal p {
  text-align: justify;
  text-justify: inter-word;
}

body.is-banner-nav-hidden .banner-navigation {
  transform: translateY(calc(-100% - 12px));
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

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

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

.dashboard-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  background-image: var(--dashboard-loading-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text);
  transition: opacity 260ms ease, visibility 260ms ease;
}

.dashboard-loading--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dashboard-loading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 32px;
}

.dashboard-loading__title {
  margin: 0;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.dashboard-loading__subtitle {
  margin: 0;
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 500;
  color: var(--color-text-muted);
}

.dashboard-loading__spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid rgba(125, 61, 65, 0.14);
  border-top-color: var(--color-accent);
  animation: dashboard-spinner 1s linear infinite;
}

.dashboard-loading__caption {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-muted);
}

@keyframes dashboard-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.dashboard-banner {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 0 clamp(16px, 3vw, 34px);
  color: var(--color-text);
  background: var(--color-page);
  overflow: hidden;
  --content-width: min(var(--content-max-width), calc(100% - var(--section-padding-inline) * 2));
}

@media (max-width: 768px) {
  .dashboard-banner {
    --content-width: calc(100% - 32px);
  }
}

.dashboard-banner::before {
  content: none;
}

.dashboard-banner > * {
  position: relative;
  z-index: 1;
}

.dashboard-banner.is-content-hidden .banner-body {
  opacity: 0;
  transform: translateY(32px);
  pointer-events: none;
}

.dashboard-banner--content-visible .banner-body {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .banner-body,
  .banner-action,
  .banner-nav__item {
    transition: none !important;
    transform: none !important;
  }
}

.banner-navigation {
  position: fixed;
  top: 0;
  z-index: 20;
  width: 100%;
  margin: 0;
  padding: 0 var(--section-padding-inline);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.35);
  transition: box-shadow 200ms ease, transform 220ms ease, opacity 220ms ease;
  backdrop-filter: blur(12px);

  /* Enhanced responsive design */
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Enhanced responsive design for consistent padding across all screen sizes */
@media (max-width: 768px) {
  .banner-navigation {
    padding: 0 clamp(12px, 4vw, 20px);
  }

  .banner-navigation__inner {
    padding: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .banner-action {
    border: 2px solid var(--color-accent-strong);
  }

/* Left-align mobile Κατηγορίες button */
  .banner-action#fieldsToggleMobile {
    background: #ffffff;
    color: var(--color-text);
    border-color: #e2e8f0;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.85rem;
    padding: 6px 10px;
    box-shadow: 0 4px 16px -12px rgba(125, 61, 65, 0.35);
    min-width: 0;
    width: auto;
    margin-right: 36px;
    align-self: center;
  }

  .banner-action#downloadData,
  .banner-action#shareDashboard {
    background: var(--color-accent-strong);
    color: #000;
    border-color: rgba(0, 0, 0, 0.25);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
    box-shadow: 0 6px 28px -18px rgba(0, 0, 0, 0.35);
  }

  .banner-action#fieldsToggleMobile:hover {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(125, 61, 65, 0.35);
  }

  .banner-action#downloadData:hover,
  .banner-action#shareDashboard:hover,
  .banner-action#downloadData:focus-visible,
  .banner-action#shareDashboard:focus-visible {
    background: color-mix(in srgb, var(--color-accent-strong) 85%, #ffffff 15%);
    color: #000;
    border-color: rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 8px 26px -16px rgba(0, 0, 0, 0.35);
  }

  .banner-action#fieldsToggleMobile.is-active {
    background: var(--color-accent-strong);
    color: #ffffff;
    border-color: var(--color-accent-strong);
  }

/* Ensure Κατηγορίες returns to neutral when panel is closed */
  body:not(.is-fields-panel-open) .banner-action#fieldsToggleMobile {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #0f172a;
  }

  .banner-action#downloadData.is-active,
  .banner-action#shareDashboard.is-active {
    background: var(--color-accent-strong);
    color: #ffffff;
    border-color: var(--color-accent-strong);
  }

  .banner-action#downloadData img,
  .banner-action#shareDashboard img {
    filter: none;
  }
}

.banner-navigation__inner {
  width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 18px);
}

.banner-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}

.banner-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 5.2vw, 48px);
  height: clamp(38px, 5.2vw, 48px);
  border: none;
  border-radius: 12px;
  background: rgba(125, 61, 65, 0.12);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.burger-menu {
  display: none;
}

.banner-menu svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.banner-menu:hover,
.banner-menu:focus-visible {
  background: rgba(125, 61, 65, 0.2);
  box-shadow: 0 6px 16px -8px rgba(125, 61, 65, 0.35);
}

.banner-menu:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.banner-menu:active {
  transform: translateY(0);
  box-shadow: none;
}

.banner-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.4vw, 14px);
}


.banner-nav__item {
  background: none;
  border: 1px solid transparent;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 10px 12px 12px;
  border-radius: 10px;
  position: relative;
  transition: color 160ms ease, border-color 160ms ease;
}

.banner-nav__item:hover,
.banner-nav__item:focus-visible {
  color: var(--color-accent-strong);
  border-color: rgba(15, 23, 42, 0.12);
  outline: none;
}

.banner-nav__item::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-accent-strong);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.banner-nav__item:not(.banner-nav__item--fields):hover::after,
.banner-nav__item:not(.banner-nav__item--fields):focus-visible::after {
  opacity: 0.4;
  transform: translateY(0);
}

.banner-nav__item.is-active,
.banner-nav__item[aria-current="page"] {
  color: var(--color-accent-strong);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.banner-nav__item:not(.banner-nav__item--fields).is-active::after,
.banner-nav__item:not(.banner-nav__item--fields)[aria-current="page"]::after {
  opacity: 1;
  transform: translateY(0);
  background: var(--color-accent-strong);
}

.banner-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 4vw, 42px);
  height: clamp(36px, 4vw, 42px);
  padding: 8px;
  border-radius: 12px;
  color: var(--color-text);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.35);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.banner-home svg,
.banner-home img {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.banner-home:hover,
.banner-home:focus-visible {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: #ffffff;
  outline: none;
}

.is-nav-condensed .banner-nav {
  display: none;
}

.is-nav-condensed .burger-menu {
  display: inline-flex;
}

.is-nav-condensed .nav-toggle:checked ~ .banner-nav {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.35);
  z-index: 10;
}

.is-nav-condensed .nav-toggle:checked ~ .banner-nav .banner-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.is-nav-condensed .nav-toggle:checked ~ .banner-nav .banner-nav__item {
  justify-content: flex-start;
  padding: 10px 14px;
  border-radius: 0;
  border: 2px solid var(--color-accent-strong);
  font-size: 0.9rem;
}

.banner-nav__item--fields {
  color: var(--color-text);
  background: #ffffff;
  border-color: var(--color-accent-strong);
}

.banner-nav__item--fields.is-active,
.banner-nav__item--fields[aria-expanded="true"] {
  color: #ffffff;
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  box-shadow: none;
}

.is-fields-panel-open .banner-fields .app-nav__item-icon {
  color: #0f172a;
}

.banner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.banner-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.35);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.banner-action-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.banner-action-icon:hover,
.banner-action-icon:focus-visible {
  background: rgba(125, 61, 65, 0.14);
  border-color: rgba(125, 61, 65, 0.3);
  color: var(--color-accent-strong);
  transform: translateY(-1px);
  outline: none;
}

.banner-action-icon:active {
  transform: translateY(0);
  box-shadow: none;
}

.banner-action-icon--ghost {
  background: rgba(125, 61, 65, 0.08);
}

 .banner-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0);
  background: var(--color-accent-strong);
  color: #000;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
  box-shadow: none;
}

.banner-action svg,
.banner-action img {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.banner-action:hover,
.banner-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, 0.2);
  background-color: #ffd95c;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.15);
  outline: none;
}

.banner-action:active {
  transform: translateY(0);
  box-shadow: none;
}

.banner-action.is-active,
.banner-action.is-active:hover,
.banner-action.is-active:focus-visible {
  background: #ffd95c;
  border-color: rgba(0, 0, 0, 0.25);
  color: #000;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.2);
}

.banner-fields {
  width: 100%;
  margin: 0;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
}

.banner-fields[hidden] {
  display: none !important;
}

.banner-fields__inner {
  width: var(--content-width);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 24px) 0 clamp(24px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
}

.banner-fields__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.banner-fields__title {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.banner-fields__description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.banner-fields__nav {
  width: 100%;
}

.banner-fields .app-nav__group-title {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}

.banner-fields .app-nav__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(6px, 1.8vw, 12px);
}

.banner-fields .app-nav__list > li {
  width: clamp(160px, 100%, 200px);
  height: 60px;
}

.banner-fields .app-nav__item {
  width: clamp(160px, 100%, 200px);
  height: 60px;
}

/* Ensure banner fields items stack properly on smaller screens */
@media (max-width: 768px) {
  .banner-fields .app-nav__list {
    flex-direction: column;
    gap: clamp(8px, 2vw, 12px);
  }
  
  .banner-fields .app-nav__list > li {
    width: 100%;
    max-width: 100%;
  }
  
  .banner-fields .app-nav__item {
    width: 100%;
    max-width: 100%;
  }
}

.banner-fields .app-nav__item {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  padding: 10px 14px;
  gap: 10px;
}

.banner-fields .app-nav__label {
  font-size: 14px;
}

.banner-fields .app-nav__item-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--color-accent);
  font-size: 14px;
}

.banner-fields .app-nav__item:hover,
.banner-fields .app-nav__item:focus-visible {
  background: rgba(125, 61, 65, 0.12);
  box-shadow: inset 0 0 0 1px rgba(125, 61, 65, 0.22);
}

.app-nav__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-nav__group-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(11, 21, 45, 0.55);
}

.app-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 6px;
}

.app-nav__list--static {
  gap: 8px;
}

.app-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 200ms ease;
}

.app-nav__item--home {
  background: rgba(125, 61, 65, 0.1);
  box-shadow: inset 0 0 0 1px rgba(125, 61, 65, 0.16);
}

.app-nav__item:hover,
.app-nav__item:focus-visible {
  background: rgba(125, 61, 65, 0.12);
  box-shadow: inset 0 0 0 1px rgba(125, 61, 65, 0.22);
}

.app-nav__item:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.app-nav__item:active {
  transform: translateY(0);
}

.app-nav__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  background: none;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 18px;
  position: relative;
}

.app-nav__item-icon img {
  display: none;
}

.app-nav__item-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.app-nav__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-nav__label {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.app-nav__hint {
  font-size: 13px;
  color: rgba(11, 21, 45, 0.6);
}

.app-nav__empty {
  margin: 0;
  padding: 24px 16px;
  font-size: 15px;
  color: var(--color-text-muted);
}

.banner-body {
  width: var(--content-width);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 44px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 44px);
  transition: opacity 320ms ease, transform 320ms ease;
  
  /* Enhanced responsive design */
  box-sizing: border-box;
  max-width: 100%;
}

/* Ensure banner body doesn't overflow on smaller screens */
@media (max-width: 768px) {
  .banner-body {
    width: 100%;
    padding: clamp(20px, 5vw, 32px) clamp(12px, 4vw, 16px) 0;
    margin: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }
}

body[data-dashboard-view="field"] .banner-body {
  align-items: center;
}

.banner-header {
  display: flex;
  justify-content: center;
}

body[data-dashboard-view="field"] .banner-header {
  justify-content: center;
  width: 100%;
}

.banner-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3vw, 24px);
  max-width: 680px;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

body[data-dashboard-view="field"] .banner-copy {
  max-width: none;
  width: 100%;
  text-align: center;
  align-items: center;
  margin: 0 auto;
}

.banner-title {
  margin: 0;
  padding-left: 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-title);
  white-space: nowrap;
  overflow-wrap: normal;
}

@media (min-width: 900px) {
  body[data-dashboard-view="field"] .banner-title {
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .banner-title {
    font-size: clamp(1.35rem, 3.8vw, 2rem);
    white-space: normal;
  }
}

.banner-title[data-has-icon="true"] {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 4vw, 24px);
  text-align: left;
  padding-left: 0;
}

body[data-dashboard-view="field"] .banner-title[data-has-icon="true"] {
  justify-content: center;
  text-align: center;
  display: flex;
}

.banner-title__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(84px, 12vw, 104px);
  height: clamp(84px, 12vw, 104px);
  border-radius: 18px;
  color: var(--color-accent);
  background: none;
  font-size: clamp(4.5rem, 10vw, 6.5rem);
  flex-shrink: 0;
}

.banner-title__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.banner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.banner-date-badge {
  background: rgba(255, 255, 255, 0.92);
  color: rgba(17, 24, 39, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.1);
  letter-spacing: 0.1em;
  text-transform: none;
  box-shadow: 0 10px 26px -22px rgba(15, 23, 42, 0.45);
  padding-inline: 12px;
}

.page-heading {
  width: min(var(--content-width), 100%);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

body[data-dashboard-view="field"] .banner-tags {
  justify-content: center;
}

.banner-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease,
    box-shadow 160ms ease;
  box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.4);
}

.banner-cta:hover,
.banner-cta:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(125, 61, 65, 0.35);
  color: var(--color-accent);
  text-decoration: none;
  outline: none;
}

.banner-cta:active {
  transform: translateY(0);
}

.banner-cta--primary {
  background: var(--color-accent);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 14px 36px -24px rgba(125, 61, 65, 0.6);
}

.banner-cta--primary:hover,
.banner-cta--primary:focus-visible {
  color: #ffffff;
  background: var(--color-accent-strong);
}

.banner-cta--ghost {
  background: rgba(125, 61, 65, 0.12);
  border-color: rgba(125, 61, 65, 0.2);
  color: #3c1c05;
  box-shadow: none;
}

.banner-cta--ghost:hover,
.banner-cta--ghost:focus-visible {
  background: rgba(125, 61, 65, 0.18);
  border-color: rgba(125, 61, 65, 0.28);
  color: #3c1c05;
}

.banner-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-accent-strong);
  color: #000000;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.banner-tag--field {
  background: var(--color-accent-strong);
  color: #000000;
  letter-spacing: 0.08em;
}

.banner-lede {
  margin: 0;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.75;
  color: rgba(11, 21, 45, 0.78);
  max-width: 58ch;
}

.app-main {
  width: min(var(--content-width), 100%);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: clamp(6px, 2vw, 12px) 0 clamp(48px, 7vw, 82px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.5vw, 16px);
}

@media (max-width: 768px) {
  .app-main {
    padding: clamp(12px, 4vw, 20px) 0 clamp(44px, 9vw, 64px);
  }
}


.section {
  --section-inline-padding: clamp(24px, 4vw, 40px);
  --section-background: var(--color-surface);
  position: relative;
  z-index: 0;
  background: var(--section-background);
  border-radius: clamp(18px, 3vw, 26px);
  border: none;
  margin: 0 auto;
  padding: var(--section-inline-padding);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vw, 22px);
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 768px) {
  .section {
    width: 100%;
    max-width: var(--content-width);
    padding: clamp(16px, 4vw, 20px) var(--section-padding-inline);
    margin-inline: auto;
    border-radius: 16px;
  }
}

.section--about {
  padding-block-end: clamp(8px, 2vw, 12px);
}

.section--indicator {
  padding-block-start: clamp(8px, 2vw, 12px);
}

.section__inner {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.section--full-bleed {
  /* Full-bleed is now default for all sections */
}

/* .section--full-bleed .section__inner is now handled by .section__inner */

.section--table-commitments {
  --section-background: transparent;
  color: var(--color-text);
  padding: clamp(26px, 5vw, 44px) 0;
  margin-top: -clamp(20px, 4vw, 40px);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

@media (max-width: 768px) {
  .section--table-commitments {
    padding: clamp(22px, 7vw, 28px) 0;
  }
}

.section--table-commitments .section__inner {
  width: var(--content-width);
  max-width: var(--content-width);
  margin: 0 auto;
  padding-inline: 0;
}

.section--table-commitments .section__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--color-title);
}

.section--table-commitments .section-label span {
  color: var(--color-text-muted);
  opacity: 0.75;
}

.section--table-commitments .section__subtitle-line {
  color: var(--color-text-muted);
}

.section--table-commitments .section-layout {
  gap: clamp(16px, 2.5vw, 30px);
}

body.has-scroll-animations [data-animate] {
  --animate-duration: 620ms;
  --animate-delay: 0ms;
  --animate-translate: translate3d(0, 64px, 0);
  opacity: 0;
  transform: var(--animate-translate);
  transition:
    opacity var(--animate-duration) ease var(--animate-delay),
    transform calc(var(--animate-duration) + 140ms) cubic-bezier(0.16, 1, 0.3, 1)
      var(--animate-delay);
  will-change: opacity, transform;
}

body.has-scroll-animations [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

body.has-scroll-animations [data-animate][data-animate="fade-in"] {
  --animate-translate: translate3d(0, 28px, 0);
}

body.has-scroll-animations [data-animate][data-animate="fade-left"] {
  --animate-translate: translate3d(48px, 0, 0);
}

body.has-scroll-animations [data-animate][data-animate="fade-right"] {
  --animate-translate: translate3d(-48px, 0, 0);
}

body.has-scroll-animations [data-animate][data-animate="fade-up"] {
  --animate-translate: translate3d(0, 72px, 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.dashboard-shell > .section:nth-of-type(odd) {
  --section-background: var(--color-surface);
}

.dashboard-shell > .section:nth-of-type(even) {
  --section-background: var(--color-surface-muted);
}


.section--muted {
  position: relative;
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: clamp(18px, 3vw, 26px);
  padding: clamp(10px, 2vw, 20px) 0 clamp(10px, 2vw, 20px) var(--section-padding-inline);
  overflow: visible;
}

.section--about {
  gap: clamp(24px, 5vw, 40px);
  width: min(var(--content-width), 100%);
  margin: 0 auto;
  padding: clamp(22px, 5vw, 36px) 0;
}

.section--spotlight {
  gap: clamp(20px, 4vw, 32px);
}


.section--insights {
  --section-background: transparent;
  min-height: auto;
  padding: clamp(10px, 2vw, 20px) var(--section-padding-inline);
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  color: #ffffff;
  box-sizing: border-box;
}

/* Ensure full-width sections maintain consistent padding */
@media (max-width: 768px) {
  .section--insights {
    padding-left: clamp(12px, 4vw, 16px);
    padding-right: 0;
  }
}

.section--indicator {
  position: relative;
  background: #ffffff;
  color: var(--color-text);
  overflow: visible; /* Allow content to expand */
}

.section--indicator::before,
.section--indicator::after {
  content: none;
}

.section--indicator.section--insights {
  width: min(var(--content-width), 100vw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  color: #0b142a;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .section--indicator.section--insights {
    width: min(var(--content-width), calc(100vw - 32px));
    padding: 20px 16px;
    max-width: 100vw;
  }
}

.section--indicator.section--insights::before,
.section--indicator.section--insights::after {
  content: none;
}

.insights-band {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.2vw, 28px);
  width: 100%;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 48px) clamp(16px, 3vw, 24px) clamp(32px, 6vw, 48px) 0;
  box-sizing: border-box;
  position: relative;
}

.section--indicator .insights-band {
  gap: clamp(20px, 4vw, 32px);
  padding-right: clamp(18px, 4vw, 30px);
  padding-left: clamp(34px, 7vw, 54px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.indicator-overview {
  display: flex;
  flex-direction: row;
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Mobile responsive layout for indicator overview */
@media (max-width: 768px) {
  .indicator-overview {
    flex-direction: column;
    gap: clamp(16px, 4vw, 24px);
  }
  
  .section--indicator .chart-card--glance {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  
  .section--indicator .indicator-copy {
    flex: none;
    max-width: 100%;
    width: 100%;
    margin-right: 0;
  }
}

.section--indicator .chart-card--glance {
  align-self: stretch;
  flex: 1.2 1 55%;
  max-width: none;
  --chart-visual-height: clamp(180px, 22vw, 240px);
}

.section--indicator .chart-card--glance .glance-visual__inner {
  --glance-donut-size: clamp(380px, 70vw, 960px);
  margin-right: clamp(6px, 1.2vw, 12px);
  margin-left: clamp(12px, 2vw, 24px);
  min-height: clamp(460px, 70vw, 960px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Mobile specific fixes for indicator charts */
@media (max-width: 768px) {
  .section--indicator .chart-card--glance .glance-visual__inner {
    --glance-donut-size: clamp(300px, 90vw, 640px);
    min-height: clamp(360px, 90vw, 720px);
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

.section--indicator .indicator-copy {
  flex: 1 1 45%;
  min-height: clamp(220px, 30vw, 320px);
  margin-right: clamp(6px, 1.2vw, 12px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.indicator-charts {
  margin-top: clamp(12px, 2.4vw, 22px);
}

.indicator-charts .charts-section {
  padding: 0;
}

.section--indicator .indicator-charts .chart-card {
  padding: 5px;
}

.section--indicator .charts-logo {
  display: none !important;
}


.section--indicator .chart-card {
  background: #ffffff;
  border: 1px solid rgba(125, 61, 65, 0.22);
  border-radius: 16px;
  color: var(--color-text);
  box-shadow: 0 16px 34px -24px rgba(15, 23, 42, 0.28);
  backdrop-filter: none;
}

.section--indicator .glance-visual__inner {
  padding-top: clamp(8px, 1.5vw, 12px);
  padding-bottom: clamp(4px, 0.8vw, 8px);
  min-height: clamp(80px, 10vw, 120px);
  position: relative;
}

.indicator-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vw, 20px);
  align-self: stretch;
  padding: clamp(18px, 2.6vw, 26px);
  background: #f2f4f7;
  border: none;
  border-radius: 16px;
  box-shadow: none;
  color: var(--color-text);
  backdrop-filter: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Ensure indicator-copy maintains consistent padding on smaller screens */
@media (max-width: 768px) {
  .indicator-copy {
    padding: clamp(14px, 4vw, 20px);
    margin-left: 0;
    margin-right: 0;
  }
}

.indicator-copy > * {
  width: min(100%, 1180px);
  margin-left: auto;
  margin-right: auto;
}

.indicator-copy__title {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.section--indicator .indicator-copy__title {
  color: #0b142a;
}

.indicator-copy__lead {
  margin: 0;
  color: #475569;
  line-height: 1.7;
  font-size: clamp(1rem, 1.9vw, 1.08rem);
}

.section--indicator .indicator-copy__lead {
  color: #354159;
}

.indicator-copy__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 18px);
}

.indicator-copy__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(10px, 1.6vw, 14px);
  align-items: flex-start;
  padding: 0;
  border: none;
}

.indicator-copy__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.indicator-copy__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: none;
  color: #111827;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.indicator-copy__body {
  display: grid;
  gap: 2px;
}

.indicator-copy__heading {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
  font-size: clamp(1.06rem, 1.85vw, 1.16rem);
  letter-spacing: -0.01em;
}

.section--indicator .indicator-copy__heading {
  color: #0b142a;
}

.indicator-copy__body p {
  margin: 0;
  color: #1f2937;
  line-height: 1.7;
  font-size: clamp(1rem, 1.8vw, 1.07rem);
}

.section--indicator .indicator-copy__body p {
  color: #354159;
}

.indicator-article {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 18px);
}

.indicator-article__header {
  display: grid;
  gap: 8px;
  margin-bottom: clamp(16px, 3vw, 34px);
}

.section--indicator .section__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--color-title);
}

.indicator-article__subtitle {
  margin: 0;
  max-width: 960px;
  color: #4b5563;
  line-height: 1.6;
  font-size: clamp(1.04rem, 1.6vw, 1.12rem);
}

.indicator-article__intro {
  display: none;
}

.story-block {
  background: #ffffff;
  border-radius: 18px;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 40px);
  overflow: visible;
  min-height: 0;
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 768px) {
  .story-block {
    padding: 0;
    border-radius: 0;
  }
}

.story-block--secondary {
  gap: 0px;
  margin-top: clamp(16px, 3vw, 34px);
}

.story-block,
.story-block__subtitle,
.story-block__annotation,
.story-block p,
.indicator-spotlight__lead,
.indicator-spotlight__body p {
  font-family: var(--font-sans);
}

.story-block__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.story-block__titles {
  flex: 1 1 520px;
  display: grid;
  gap: 0;
}

.story-block--secondary .story-block__titles {
  width: calc(100% + var(--section-inline-padding) * 2);
  max-width: min(var(--content-max-width), calc(100vw - var(--section-padding-inline) * 2));
  margin-inline: calc(-1 * var(--section-inline-padding));
  box-sizing: border-box;
}

.story-block--primary .story-block__titles {
  width: calc(100% + var(--section-inline-padding) * 2);
  max-width: min(var(--content-max-width), calc(100vw - var(--section-padding-inline) * 2));
  margin-inline: calc(-1 * var(--section-inline-padding));
  box-sizing: border-box;
}

.story-block__eyebrow {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0b5ab4;
  font-weight: 700;
}

.story-block__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  letter-spacing: -0.015em;
  color: #0f172a;
}

.story-block__subtitle {
  margin: clamp(6px, 1vw, 10px) 0 0;
  color: #4a5568;
  line-height: 1.6;
  font-size: clamp(1rem, 1.6vw, 1.08rem);
}

.story-block__subtitle--fullwidth {
  width: 100%;
  max-width: none;
  margin-top: clamp(8px, 1.2vw, 16px);
}

.story-block--secondary .story-block__subtitle--fullwidth,
.story-block--primary .story-block__subtitle--fullwidth {
  width: min(var(--content-width), 100%);
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

#sectorSummaryText {
  margin: clamp(6px, 1vw, 10px) 0 0;
  color: #4a5568;
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  line-height: 1.6;
  font-weight: 400;
}

.chart-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 6px 8px;
  background: #f2f5f9;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.chart-toolbar__action {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
  transition: all 180ms ease;
}

.chart-toolbar__action:hover,
.chart-toolbar__action:focus-visible {
  outline: none;
  border-color: rgba(11, 90, 180, 0.18);
  background: rgba(125, 61, 65, 0.08);
  color: #0b5ab4;
}

.chart-toolbar__action svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.story-block__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0px;
  align-items: start;
  position: relative;
  min-height: 0; /* Allow content to expand */
}

.story-block__body--stacked {
  grid-template-columns: 1fr;
}

.story-block__body--bars {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 10px);
  align-items: stretch;
  width: 100%;
}

.story-block__figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.story-block__body--bars .story-block__figure {
  width: calc(100% + var(--section-inline-padding) * 2);
  max-width: min(var(--content-max-width), calc(100vw - var(--section-padding-inline) * 2));
  margin-inline: calc(-1 * var(--section-inline-padding));
  box-sizing: border-box;
}


.story-block__legend {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0;
  flex-wrap: wrap;
  gap: 6px 10px;
  position: absolute;
  inset: clamp(-100px, -10vw, -40px) 0 auto;
  width: 100%;
  z-index: 2;
}

.story-block__legend--inline {
  position: static;
  justify-content: space-between;
  padding-top: 2px;
  flex-wrap: nowrap;
}

.story-block--primary .story-block__legend--inline,
.story-block--secondary .story-block__legend--inline {
  width: 100%;
  max-width: min(var(--content-max-width), calc(100vw - var(--section-padding-inline) * 2));
  margin-inline: auto;
  padding-inline: var(--section-inline-padding);
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
}

.story-block__legend--over {
  position: absolute;
  inset: clamp(4px, 0.8vw, 10px) 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.story-block__legend--over .glance-legend {
  justify-content: center;
}

.story-block__legend--over .glance-legend-panel,
.story-block__legend--over .glance-legend,
.story-block__legend--over .glance-legend__item {
  pointer-events: auto;
}

.story-block__legend--bars {
  position: static;
  inset: auto;
  padding-top: 0;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .story-block__legend {
    position: static;
    justify-content: flex-end;
    padding-top: 4px;
    gap: 8px;
  }

  .story-block__legend .glance-legend,
  .insights-section__legend,
  .chart-legend {
    display: none !important;
  }

  .story-block__legend .glance-legend-panel {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }

  /* Ensure legend info icon remains visible and aligned to the right on mobile */
  .legend-info-icon {
    display: inline-flex !important;
    margin-left: auto;
    align-self: flex-end;
  }

  /* Ensure the legend container allows the info button to align right */
  .glance-legend-panel {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .story-block__header,
  .story-block--secondary .story-block__header,
  .story-block--primary .story-block__header {
    width: min(var(--content-width), 100%);
    margin-inline: auto;
    padding-inline: var(--section-padding-inline);
    box-sizing: border-box;
  }
}

.story-block--primary {
  gap: clamp(4px, 0.8vw, 8px);
}

.story-block--primary .story-block__legend {
  padding-top: 2px;
}

.story-block--bars .story-block__header {
  gap: 10px;
}

.story-block--bars .story-block__legend {
  padding-top: 2px;
}

.glance-legend-panel--stacked {
  background: transparent;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: none;
  justify-content: space-between;
  width: auto;
}

.story-block__annotation {
  margin: 0;
  color: #334155;
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  line-height: 1.7;
}

.story-block__body--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  justify-items: center;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.story-block__body--inline .story-block__figure,
.story-block__body--inline .indicator-spotlight {
  width: var(--content-width);
  max-width: var(--content-width);
  margin-inline: auto;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .story-block__body--inline {
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-items: stretch;
}

  .story-block--primary {
    display: flex;
    flex-direction: column;
  }

  .story-block__body {
    display: flex;
    flex-direction: column;
  }

  .story-block__figure {
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .story-block__body--inline .indicator-spotlight {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}

.indicator-spotlight {
  display: grid;
  gap: clamp(8px, 1.2vw, 14px);
  padding: clamp(8px, 1vw, 12px) clamp(14px, 2vw, 18px);
  background: #ffffff;
  border-radius: 14px;
  border: none;
  box-sizing: border-box;
  justify-items: stretch;
  align-items: start;
  margin: 0;
  text-align: justify;
}

.indicator-spotlight--inline {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-shadow: none;
  padding-left: 0;
  flex: 1;
}

.indicator-spotlight__header {
  display: grid;
  gap: 12px;
}

.indicator-spotlight__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.18rem, 1.9vw, 1.4rem);
  color: var(--color-title);
}

.indicator-spotlight__lead {
  margin: clamp(18px, 2vw, 26px) 0 0;
  color: #1f2937;
  line-height: 1.6;
  font-size: clamp(17px, 1.5vw, 18px);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.story-block--primary .indicator-spotlight__lead {
  width: min(var(--content-width), 100%);
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding-inline: 0;
  box-sizing: border-box;
}

.indicator-spotlight__list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.indicator-spotlight__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: clamp(12px, 2vw, 18px) clamp(16px, 4vw, 22px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: none;
  align-items: center;
  position: relative;
}

.indicator-spotlight__item::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 12px;
  width: 4px;
  border-radius: 999px;
  background: var(--color-accent);
}

.indicator-spotlight__item:nth-child(1)::before {
  background: #e0861a;
}

.indicator-spotlight__item:nth-child(2)::before {
  background: linear-gradient(180deg, #21ab61 0%, #0c8645 100%);
}

.indicator-spotlight__item:nth-child(3)::before {
  background: #d64c4d;
}

.indicator-spotlight__item:hover {
  background: rgba(255, 255, 255, 1);
}

.indicator-spotlight__heading {
  margin: 0;
  font-weight: 800;
  color: var(--color-title);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.indicator-spotlight__body p {
  margin: 2px 0 0;
  color: #1f2937;
  line-height: 1.6;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .indicator-spotlight__item {
    padding-left: clamp(28px, 7vw, 36px);
  }

  .indicator-spotlight__list {
    align-items: center;
  }

  .indicator-spotlight__item {
    width: min(100%, 520px);
    margin-inline: auto;
    background: #ffffff;
  }

  .story-block__body--bars {
    align-items: center;
  }

  .story-block__body--bars .story-block__figure {
    width: min(var(--content-width), 100%);
    max-width: 640px;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .story-block__body--bars .chart-card--spotlight {
    width: 100%;
    margin: 0 auto;
    padding: clamp(18px, 4vw, 26px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 20px 45px -35px rgba(15, 23, 42, 0.75);
  }
}

.section--indicator .chart-card {
  background: #ffffff;
  border: none;
  border-radius: 18px;
  box-shadow: none;
}

.section--indicator .glance-visual__inner {
  background: #ffffff;
  border-radius: 16px;
  border: none;
  box-shadow: none;
}

.section--indicator .story-block__legend .glance-legend-panel {
  margin: 0;
  max-width: 100%;
}

.section--indicator .story-block__legend .glance-legend {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.section--indicator .story-block__legend .glance-legend__item {
  color: #0f172a;
  font-weight: 600;
}

.section--indicator .story-block__legend .glance-legend__value {
  color: #0b142a;
}

@media (max-width: 1100px) {
  .story-block__body,
  .story-block__body--bars {
    grid-template-columns: 1fr;
  }

  .story-block__legend {
    padding-top: 0;
  }

  .chart-toolbar {
    margin-left: 0;
  }
}


.insights-section__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: clamp(8px, 2vw, 14px);
  text-align: left;
  margin: 0;
  padding-bottom: clamp(6px, 2vw, 14px);
}

.insights-section__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 20px);
  width: 100%;
}

.insights-section__bar .section__title {
  margin: 0;
  align-self: center;
}

.insights-section__actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.6vw, 12px);
  margin-left: auto;
}

.insights-section__action {
  flex: 0 0 auto;
}

.insights-section__header > .section__title {
  margin: 0;
  align-self: flex-start;
  margin-left: clamp(88px, 9vw, 152px);
}

#chartsSectionTitle {
  margin-left: clamp(88px, 9vw, 152px);
}


.insights-section__legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3.5vw, 40px);
  width: 100%;
  margin-bottom: clamp(0px, 0vw, 0px);
  padding: clamp(12px, 1.8vw, 18px) clamp(4px, 1.2vw, 10px) clamp(20px, 3vw, 28px) 0;
  border-radius: 0;
  border: none;
  background: none;
  overflow: visible;
}

.section:fullscreen .insights-section__legend {
  margin-bottom: 4px;
  gap: 4px;
  padding: 8px 0 0;
}

.section:fullscreen .insights-layout {
  padding: 20px;
}

.section:fullscreen .charts-grid {
  gap: 16px;
}

.section:fullscreen .charts-grid__item {
  min-height: 300px;
}

.insights-legend__title {
  margin: 0;
  font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f1f5f9;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.insights-section__legend .glance-legend-panel {
  width: 100%;
  justify-content: center;
}


.charts-section {
  padding: clamp(28px, 5.5vw, 40px) clamp(18px, 4vw, 28px) clamp(20px, 4.8vw, 32px) clamp(28px, 6vw, 42px);
}

.charts-layout {
  display: grid;
  width: 100%;
  grid-template-rows: auto 1fr;
  gap: 0;
  align-items: start;
}

.section--insights .charts-layout {
  display: grid;
}

.charts-grid {
  display: grid;
  gap: clamp(10px, 1.5vw, 18px);
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin-top: 0;
  margin-bottom: 0;
}

.chart-card {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 0vw, 0px);
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  min-height: 100%;
  margin-top: clamp(0px, 0vw, 0px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  padding: clamp(16px, 2.4vw, 22px) clamp(16px, 2.4vw, 22px) clamp(16px, 2.4vw, 22px) clamp(16px, 2.4vw, 22px);
  color: #0f172a;
}

.chart-card > * {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}


.chart-card--glance {
  border-left: none;
  justify-self: start;
  max-width: 100%;
  flex: 0 0 30%;
  align-items: flex-start;
}

.chart-card--glance .glance-visual__inner {
  height: 100%;
  --glance-donut-size: clamp(100px, 14vw, 160px);
  min-height: 140px;
  padding: clamp(14px, 2.2vw, 20px);
}

.charts-grid__item--glance .glance-visual__inner {
  min-height: var(--charts-block-height);
  padding: var(--charts-block-padding);
}

.chart-card--spotlight {
  border-left: none;
  align-items: stretch;
  width: 100%;
  padding: clamp(16px, 2.4vw, 22px) 0 clamp(16px, 2.4vw, 22px) 0;
  aspect-ratio: auto;
  overflow: visible;
}

.chart-card--spotlight .insights-content {
  min-height: 210px;
  height: auto;
  padding: 0 0 clamp(10px, 1.8vw, 16px) 0;
  border-radius: 0;
  width: 100%;
}

.chart-legend {
  width: 100%;
  padding: 0 clamp(20px, 3vw, 32px) clamp(6px, 1.4vw, 12px);
  box-sizing: border-box;
}

.chart-legend .glance-legend-panel {
  justify-content: flex-start;
}

.chart-legend--spotlight {
  margin-top: clamp(10px, 1.6vw, 18px);
}

.chart-legend--spotlight .glance-legend-panel {
  justify-content: center;
}

.charts-grid__item--spotlight .insights-content {
  min-height: var(--charts-block-height);
  padding: var(--charts-block-padding);
}

.chart-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  justify-content: flex-start;
}

.chart-toolbar__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #0b142a;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-toolbar__action:hover,
.chart-toolbar__action:focus-visible {
  background: rgba(125, 61, 65, 0.08);
  border-color: rgba(125, 61, 65, 0.22);
  transform: translateY(-1px);
  outline: none;
}

.chart-toolbar__action svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.progress-placeholder {
  /* Placeholder for progress bars */
  background: rgba(0, 0, 0, 0.1);
  height: 20px;
  border-radius: 10px;
}

@media (min-width: 1280px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1100px) {
  .section--insights .charts-grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 4vw, 60px);
  }

  .charts-grid > * {
    height: 100%;
  }

  .section--insights .charts-grid__item--glance .glance-visual__inner,
  .section--insights .chart-card--glance .glance-visual__inner {
    --glance-donut-size: clamp(260px, 38vw, 520px);
    min-height: 300px;
  }
}
.insights-layout {
  width: 100%;
  margin: 0;
  position: relative;
  margin-bottom: 0;
}

.insights-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.insights-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 20px);
  text-align: left;
}

.insights-card-header {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(8px, 1.6vw, 14px);
  padding-bottom: clamp(4px, 1.2vw, 8px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
  min-height: 48px;
}

.insights-card-header--compact {
  padding-bottom: clamp(2px, 0.8vw, 4px);
  min-height: auto;
}

.insights-card-header__summary {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.8vw, 14px);
}

.insights-card-header__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insights-card-header--compact .insights-card-header__text {
  gap: 2px;
}

.insights-card-header__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

.insights-card-header__subtitle {
  margin: 0;
  font-size: var(--insights-chart-subtitle-size);
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.6;
}

.section--insights .insights-card-header__subtitle.section__subtitle {
  font-size: var(--insights-chart-subtitle-size);
  line-height: 1.6;
}

.section--insights
  .insights-card-header__subtitle.section__subtitle
  .section__subtitle-line {
  font-size: inherit;
}


.section--insights {
  color: #ffffff;
}

.section--insights .section__title {
  color: inherit;
}

.section--insights .section-label {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.section--indicator .section-label {
  color: var(--color-text-muted);
  opacity: 0.75;
}

.section--insights .section-label span {
  color: inherit;
}

.section--insights .section__subtitle,
.section--insights .section__subtitle-line,
.section--insights .section__body,
.section--insights .section__body p,
.section--insights .bars-narrative {
  color: rgba(255, 255, 255, 0.8);
}

.section--indicator .section__title {
  color: var(--color-title);
}

.section--indicator .section-label,
.section--indicator .section__subtitle,
.section--indicator .section__subtitle-line,
.section--indicator .section__body,
.section--indicator .section__body p,
.section--indicator .bars-narrative {
  color: rgba(11, 21, 45, 0.75);
}

.section--insights .section__subtitle,
.section--insights .section__subtitle-line {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.75;
}

.section--insights .spotlight-details p {
  color: inherit;
}

.section--insights .spotlight-intro,
.section--insights .spotlight-details {
  color: rgba(255, 255, 255, 0.74);
}

.section--insights .spotlight-intro p,
.section--insights .spotlight-details p {
  color: inherit;
}

.section--insights .donut-center,
.section--insights .donut-center__label {
  color: inherit;
}

.insights-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex: 1;
  overflow: visible; /* Allow content to expand beyond container */
}

.insights-body--dense {
  gap: 0;
  margin-top: 0;
}

.insights-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.4vw, 20px);
  width: 100%;
}

.spotlight-intro,
.spotlight-details {
  width: 100%;
  margin: 0;
}

.spotlight-details {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
  margin: 0;
}

.spotlight-details p {
  margin: 0;
}

.spotlight-drilldown {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.spotlight-drilldown__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.spotlight-drilldown__back:hover,
.spotlight-drilldown__back:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.spotlight-drilldown__back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spotlight-drilldown__back-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.spotlight-drilldown__label {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 193, 243, 0.3);
  color: #021024;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.insights-panel--bars {
  align-items: stretch;
  text-align: left;
  width: 100%;
  margin: 0;
  position: relative;
  padding-top: 0;
}

.insights-panel--bars .clustered-bars {
  width: 100%;
  max-width: none;
}


.clustered-bars__frame {
  width: 100%;
  min-height: var(--chart-visual-height);
  background: transparent;
  border-radius: 16px;
  padding: 0;
  border: none;
  box-shadow: none;
  --clustered-bar-height: 40px;
  display: none;
}

.clustered-bars__chart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.clustered-bars__layout {
  display: flex;
  gap: clamp(48px, 6vw, 60px);
  width: 100%;
  height: 100%;
  padding: clamp(4px, 0.8vw, 8px) 0 clamp(4px, 0.8vw, 8px) 0;
  box-sizing: border-box;
  align-items: stretch;
}

.clustered-bars__labels {
  display: grid;
  gap: 0;
  padding: 0 clamp(4px, 0.8vw, 8px) 0 clamp(12px, 1.2vw, 16px);
  align-items: center;
  min-width: clamp(120px, 15vw, 160px);
  max-width: clamp(160px, 20vw, 200px);
  flex-shrink: 0;
  overflow: hidden;
}

.clustered-bars__label-row {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 4px;
  color: #f8fafc;
  cursor: pointer;
  position: relative;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.clustered-bars__label-row:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.clustered-bars__label-row.no-hover-effect:hover {
  background: none;
}

.clustered-bars__label-row:focus-visible {
  box-shadow: 0 0 0 2px rgba(91, 72, 240, 0.4);
}

.clustered-bars__label-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #000000;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.clustered-bars__label-arrow svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.clustered-bars__label-row.is-expanded .clustered-bars__label-arrow {
  transform: rotate(90deg);
}

.clustered-bars__label-row--category {
  margin-left: 0;
  padding-left: 90px;
  opacity: 1;
  background: transparent;
  border-left: none;
  animation: fadeInCategory 0.3s ease-out;
  display: flex;
  align-items: center;
}

.clustered-bars__label-row--category::before {
  content: none;
}

.clustered-bars__label-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #0b142a;
  flex-shrink: 0;
}

.clustered-bars__label-bullet svg {
  width: 8px;
  height: 8px;
  fill: currentColor;
}

.clustered-bars__label-row--category .clustered-bars__label-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}

.clustered-bars__label-row--category .clustered-bars__label-note {
  font-size: 12px;
}

@keyframes fadeInCategory {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

.clustered-bars__label-row[data-active="false"] {
  opacity: 0.4;
}

.clustered-bars__label-meta {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  height: 100%;
}

.clustered-bars__label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background-color: transparent;
  color: var(--field-icon-color);
  overflow: hidden;
}

.clustered-bars__label-text-row {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  flex-wrap: wrap;
  row-gap: 2px;
}

.section--indicator .clustered-bars__label-icon {
  color: #0b152d;
  background-color: transparent;
}


.clustered-bars__label-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.clustered-bars__label-icon::before {
  content: "";
  inline-size: 20px;
  block-size: 20px;
  background-color: currentColor;
  mask: var(--icon-image) center / contain no-repeat;
  -webkit-mask: var(--icon-image) center / contain no-repeat;
}

.clustered-bars__label-text {
  font-weight: 700;
  color: #1d4ed8;
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section--indicator .clustered-bars__label-text {
  color: #0b142a;
}

.clustered-bars__label-text:not(:is(a)) {
  text-decoration: none;
}

.clustered-bars__label-text:is(a) {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.clustered-bars__label-text:is(a):hover,
.clustered-bars__label-text:is(a):focus-visible {
  text-decoration: underline;
}


.clustered-bars__label-note {
  display: none;
}

.clustered-bars__canvas {
  position: relative;
  width: 100%;
  min-height: var(--chart-visual-height);
  background: transparent;
  border: none;
  border-radius: 12px;
  padding-right: 0;
  margin-left: 20px;
  box-shadow: none;
  flex: 1;
  min-width: 0;
}

.section--indicator .indicator-charts .clustered-bars__frame,
.section--indicator .indicator-charts .clustered-bars__chart,
.section--indicator .insights-panel--bars .clustered-bars__frame,
.section--indicator .insights-panel--bars .clustered-bars__chart {
  padding: 0;
}

.clustered-bars__labels .clustered-bars__label-row:last-child {
  border-bottom: none;
}

.clustered-bars__canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

.clustered-bars__rows {
  display: grid;
  gap: var(--clustered-bar-gap, 16px);
  padding: var(--clustered-bar-padding, 14px) 0;
}

.clustered-bars {
  --bars-animate-duration: 1100ms;
}

.clustered-bars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  height: var(--clustered-bar-height, 32px);
}

.clustered-bars__segments {
  display: flex;
  gap: 0;
  min-height: var(--clustered-bar-height, 32px);
  border-radius: 999px;
  padding: 0 var(--clustered-bars-padding-inline);
  background: transparent;
  box-shadow: none;
}

.clustered-bars__segment {
  flex: 0 0 var(--segment-width, auto);
  height: var(--clustered-bar-height, 32px);
  border: none;
  border-radius: 0;
  background: var(--segment-color, #d0d8e0);
  color: #0b1021;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(12, 18, 28, 0.08), 0 4px 14px rgba(0, 0, 0, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  transform-origin: left center;
  will-change: transform, opacity;
}

.clustered-bars__segment--small {
  height: calc(var(--clustered-bar-height, 32px) * 0.8); /* Smaller height for category bars */
  font-size: 10px; /* Smaller font size for smaller bars */
}

.clustered-bars--animate-ready .clustered-bars__segment[data-animate="true"] {
  opacity: 0;
  transform: scaleX(0);
}

.clustered-bars--animating .clustered-bars__segment[data-animate="true"] {
  animation: bars-fill var(--bars-animate-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--bar-animate-delay, 0ms);
}

.clustered-bars--animated .clustered-bars__segment[data-animate="true"] {
  opacity: 1;
  transform: scaleX(1);
}

@keyframes bars-fill {
  0% {
    opacity: 0.45;
    transform: scaleX(0.06);
  }
  55% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clustered-bars--animate-ready .clustered-bars__segment[data-animate="true"],
  .clustered-bars--animating .clustered-bars__segment[data-animate="true"] {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

.section--indicator .clustered-bars__segment {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.clustered-bars__segment:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.clustered-bars__segment:first-child {
  border-top-left-radius: calc(var(--clustered-bar-height, 32px) / 2);
  border-bottom-left-radius: calc(var(--clustered-bar-height, 32px) / 2);
}

.clustered-bars__segment:last-child {
  border-top-right-radius: calc(var(--clustered-bar-height, 32px) / 2);
  border-bottom-right-radius: calc(var(--clustered-bar-height, 32px) / 2);
}

.clustered-bars__total {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #cbd5e1;
}

@media (max-width: 960px) {
  .clustered-bars__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .clustered-bars__segments {
    width: 100%;
  }

  .clustered-bars__total {
    justify-self: end;
  }
}

@media (max-width: 1100px) {
  .clustered-bars__labels {
    flex: 0 1 180px;
    padding: clamp(6px, 1vw, 10px) 0;
  }
}

@media (max-width: 768px) {
  .story-block__body--bars .clustered-bars__labels {
    min-width: 200px !important;
    max-width: 250px !important;
    padding: 0 8px !important;
    align-items: center !important;
  }

  .story-block__body--bars .clustered-bars__label-row {
    justify-content: flex-start !important;
    padding: 0 4px !important;
    gap: 8px !important;
    height: 100% !important;
    align-items: center !important;
  }

  .story-block__body--bars .clustered-bars__label-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .story-block__body--bars .clustered-bars__label-text {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .story-block__body--bars .clustered-bars__label-note {
    display: none !important;
  }

  .story-block__body--bars .clustered-bars__layout {
    gap: 2px !important;
  }

  .story-block__body--bars .clustered-bars__canvas {
    margin-left: 0 !important;
  }
}

@media (min-width: 769px) {
  .clustered-bars__layout {
    gap: clamp(40px, 4vw, 50px);
  }

  .clustered-bars__labels {
    min-width: clamp(120px, 15vw, 160px);
  }

  .legend-toggle-names {
    display: none !important;
  }
}

#spotlightCard:fullscreen,
#spotlightCard:-webkit-full-screen {
  background: #fff;
  color: var(--color-text);
  overflow: auto;
}

.insights-panel--bars .bars-narrative {
  margin-top: clamp(16px, 3vw, 28px);
  text-align: left;
  width: 100%;
}

@media (max-width: 1100px) {
  .banner-navigation__inner {
    flex-wrap: wrap;
    justify-content: center;
  }

  .banner-nav {
    width: 100%;
  }

  .banner-nav__list {
    justify-content: center;
    flex-wrap: wrap;
  }

  .banner-actions {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .banner-header {
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .banner-navigation__inner {
    width: 100%;
    margin: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .banner-home {
    margin-right: auto;
  }

  .is-nav-condensed .banner-navigation__inner {
    flex-wrap: wrap;
  }

/* Index: hide nav & home, keep inline Κατηγορίες button visible */
  body:not([data-dashboard-view="field"]) .banner-nav {
    display: none !important;
  }

  body:not([data-dashboard-view="field"]) .burger-menu {
    display: none !important;
  }

  body:not([data-dashboard-view="field"]) .banner-home {
    display: none;
  }

  body:not([data-dashboard-view="field"]) #fieldsToggleInline {
    display: inline-flex;
    margin-right: auto;
  }

  body:not([data-dashboard-view="field"]) .banner-actions {
    flex: 0 0 auto;
    margin-left: auto;
    width: auto;
    gap: 8px;
  }

  body:not([data-dashboard-view="field"]) .banner-navigation__inner {
    justify-content: flex-start;
    align-items: center;
  }
}

@media (max-width: 680px) {
  .dashboard-banner {
    --content-width: calc(100% - 32px);
  }

  .banner-navigation {
    justify-items: stretch;
    text-align: left;
    padding: 0 16px;
  }

  .banner-navigation__inner {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }

  .banner-home {
    display: none;
    flex: 0 0 auto;
    padding: 6px 14px;
    order: 1;
  }

  body[data-dashboard-view="field"] .banner-navigation__inner {
    justify-content: flex-start;
  }

  body[data-dashboard-view="field"] .banner-home {
    display: inline-flex;
    order: 0;
  }

/* Hide inline Κατηγορίες on mobile to avoid duplication with mobile toggle */
  #fieldsToggleInline {
    display: none !important;
  }

  .banner-actions {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
    order: 2;
    padding: 0;
    width: auto;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
  }

  .banner-action--fields {
    display: flex;
    flex: 0 0 auto;
    margin-right: auto;
    order: 0;
  }

  .banner-action:last-child {
    display: none;
  }

  .banner-action {
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .banner-action--fields {
    background: #ffffff;
    color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
    box-shadow: 0 6px 22px -18px rgba(125, 61, 65, 0.35);
    order: 0;
  }

  .banner-action--fields:hover {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(125, 61, 65, 0.35);
  }

  .banner-action--fields.is-active {
    background: var(--color-accent-strong);
    color: #ffffff;
    border-color: var(--color-accent-strong);
  }

  .banner-tags {
    gap: 6px;
  }

  .banner-tag {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .section__title {
    font-size: clamp(17px, 3.4vw, 20px);
  }

  /* Differentiate mobile sizing between sections */
  #aboutTitle.section__title,
  #tableTitle.section__title {
    font-size: clamp(18px, 3.9vw, 22px);
  }

  .about-header {
    padding: 0;
    gap: 6px;
    align-items: flex-start;
  }

  .about-header .section__title {
    padding-left: 0;
    margin-left: 0;
  }

  .about-header .section-label {
    margin-left: 0;
    padding-left: 0;
  }

  .about-content {
    gap: clamp(18px, 4vw, 24px);
  }

  .insights-section__header > .section__title,
  #chartsSectionTitle {
    margin-left: 0;
  }

  .section--indicator .section__title,
  .section--insights .section__title,
  .section--table-commitments .section__title {
    font-size: clamp(18px, 3.6vw, 21px);
  }


  .story-block {
    padding-block: clamp(10px, 3vw, 14px);
  }

  .chart-card {
    padding-inline: 0;
  }

  /* Show field names in main dashboard barchart on mobile/tablet */
  .section--insights .clustered-bars__label-text,
  .section--insights .clustered-bars__label-note {
    display: block !important;
  }

  /* Align icons with bars and reduce spacing in main dashboard barchart */
  .section--insights .clustered-bars__layout {
    gap: clamp(8px, 1.5vw, 12px);
  }

  .section--insights .clustered-bars__labels {
    min-width: clamp(40px, 12vw, 60px);
    max-width: clamp(50px, 16vw, 80px);
    padding-left: clamp(4px, 1.5vw, 8px);
    padding-right: clamp(4px, 1.5vw, 8px);
  }

  .section--insights .clustered-bars__label-icon {
    width: clamp(20px, 4vw, 28px);
    height: clamp(20px, 4vw, 28px);
    margin-right: clamp(4px, 1.5vw, 8px);
  }


/* === Redesigned clustered bars layout === */
.clustered-bars__list {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vw, 20px);
  width: 100%;
}

.clustered-bars__item {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.section--insights .clustered-bars__item {
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.clustered-bars__item:hover,
.clustered-bars__item:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 14px 50px rgba(15, 23, 42, 0.12);
}

.clustered-bars__item[data-active="false"] {
  opacity: 0.35;
}

.clustered-bars__item--clickable {
  cursor: pointer;
}

.clustered-bars__label-icon {
  width: clamp(28px, 4vw, 36px);
  height: clamp(28px, 4vw, 36px);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #0b152d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: clamp(2px, 0.6vw, 6px);
}

.clustered-bars__label-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  mask-image: var(--icon-image, none);
  mask-size: contain;
  mask-repeat: no-repeat;
}

.clustered-bars__label-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 4vw, 36px);
  height: clamp(28px, 4vw, 36px);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #0b152d;
  font-weight: 700;
  margin-right: clamp(6px, 1vw, 10px);
}

.clustered-bars__col--label {
  display: flex;
  flex-direction: column;
}

.clustered-bars__label-button,
.clustered-bars__label-static {
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  color: inherit;
}

.clustered-bars__label-button {
  cursor: pointer;
}

.clustered-bars__label-static {
  cursor: pointer;
}

.clustered-bars__label-button:focus-visible {
  outline: 2px solid var(--color-accent, #2f52ff);
  outline-offset: 4px;
  border-radius: 8px;
}
.clustered-bars__label-static:focus-visible {
  outline: 2px solid var(--color-accent, #2f52ff);
  outline-offset: 4px;
  border-radius: 8px;
}

.clustered-bars__label {
  display: inline-flex;
  align-items: baseline;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: #0b152d;
  line-height: 1.2;
}

.section--insights .clustered-bars__label {
  color: #0b142a;
}

.clustered-bars__count {
  display: inline-flex;
  align-items: baseline;
  margin-left: clamp(2px, 0.6vw, 8px);
  font-size: clamp(0.82rem, 1.4vw, 0.95rem);
  font-weight: 500;
  color: rgba(11, 21, 45, 0.65);
}

.clustered-bars__col--bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 14px);
  padding-top: clamp(6px, 1.4vw, 12px);
}

.clustered-bars__segments {
  display: flex;
  width: 100%;
  min-height: clamp(28px, 3vw, 36px);
  border-radius: 999px;
  padding: 0 var(--clustered-bars-padding-inline);
  overflow: hidden;
  background: transparent;
}

.clustered-bars__segment {
  border: none;
  background: var(--segment-color, #0b152d);
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  flex: 0 0 var(--segment-width, auto);
  width: var(--segment-width, auto);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.clustered-bars__segment:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: -4px;
}

.clustered-bars__segment--empty {
  background: transparent;
  color: rgba(11, 21, 45, 0.45);
  cursor: default;
}

.clustered-bars__empty {
  margin: 0;
  padding: 24px;
  text-align: center;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.04);
  color: rgba(11, 21, 45, 0.7);
}

.clustered-bars__drilldown {
  margin-top: clamp(12px, 2vw, 16px);
  padding: clamp(12px, 2vw, 16px);
  background: rgba(15, 23, 42, 0.04);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 14px);
  width: 100%;
}

.clustered-bars__drilldown-title {
  margin: 0;
  font-weight: 700;
  color: #0b152d;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}

.clustered-bars__drilldown-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clustered-bars__drilldown-label-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #0b152d;
  font-weight: 700;
  position: relative;
  padding-left: 14px;
}

.clustered-bars__drilldown-label {
  font-size: clamp(0.94rem, 1.5vw, 1.05rem);
}

.clustered-bars__drilldown-label-row::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #0b152d;
  font-weight: 900;
  line-height: 1;
}

.clustered-bars__drilldown-count {
  font-size: clamp(0.82rem, 1.3vw, 0.92rem);
  color: rgba(11, 21, 45, 0.65);
}

.clustered-bars__drilldown-segments {
  display: flex;
  width: 100%;
  min-height: clamp(18px, 2.4vw, 24px);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.07);
  padding: 0 clamp(6px, 1vw, 10px);
}

.clustered-bars__drilldown-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--segment-color, #cbd5e1);
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(0.78rem, 1.2vw, 0.9rem);
  border: none;
  flex: 0 0 auto;
  width: var(--segment-width, auto);
}

@media (max-width: 768px) {
  .clustered-bars__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .clustered-bars__col--label {
    width: 100%;
  }

  .clustered-bars__segments {
    min-height: 28px;
  }
}

  .section--insights .clustered-bars__canvas {
    margin-left: clamp(8px, 2vw, 12px);
  }
}

@media (max-width: 480px) {
  .banner-navigation {
    min-height: 52px;
    padding: clamp(6px, 1.5vw, 10px);
  }

  .banner-navigation__inner {
    gap: clamp(6px, 1.2vw, 10px);
  }

  .banner-nav__item {
    padding: 6px 8px 8px;
    font-size: 0.85rem;
  }

  .banner-action {
    padding: 5px 12px;
    font-size: clamp(13px, 0.9vw, 14px);
  }

  .banner-action-icon {
    width: 40px;
    height: 40px;
  }

  .banner-home {
    width: clamp(36px, 4vw, 42px);
    height: clamp(36px, 4vw, 42px);
  }
}

@media (max-width: 480px) {
  .banner-title {
    font-size: clamp(1.8rem, 7vw, 2.2rem);
  }

  .section__title {
    font-size: clamp(15px, 3vw, 17px);
  }

  .section__subtitle {
    font-size: clamp(13px, 0.9vw, 14px);
  }

  .section__body {
    font-size: clamp(15px, 1.1vw, 16px);
  }

  .proposal-modal__dialog {
    padding: 16px 20px;
    border-radius: 14px;
  }

  .proposal-modal__title {
    font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  }

  .proposal-modal__summary {
    padding: 14px;
    font-size: 13px;
  }

  .app-main {
    --section-padding-inline: clamp(12px, 4vw, 20px);
    padding: clamp(20px, 6vw, 32px) clamp(12px, 4vw, 20px);
  }

  .section {
    padding: clamp(8px, 1.5vw, 16px) clamp(12px, 4vw, 20px);
  }

  .section--full-bleed .section__inner {
    padding-inline: clamp(16px, 4vw, 44px);
  }
}



.section--table {
  gap: 32px;
}

.section--table .section__header {
  gap: clamp(4px, 0.9vw, 10px);
}

.section--table.section--table-inverse {
  --section-background: #091737;
  background: #091737;
  color: rgba(255, 255, 255, 0.92);
}

.section--table.section--table-inverse .section-label,
.section--table.section--table-inverse .section-label span {
  color: var(--color-text-muted);
}

.section--table.section--table-inverse .section__title {
  color: var(--color-title);
}

.section--table.section--table-inverse .section__subtitle,
.section--table.section--table-inverse .section__subtitle-line {
  color: var(--color-text-muted);
}

.table-layout {
  align-items: start;
  background: transparent;
  box-shadow: none;
}

.table-header {
  display: grid;
  gap: clamp(12px, 3vw, 20px);
  grid-column: 1 / -1;
}

.table-header .section__subtitle--fullwidth {
  align-self: stretch;
  max-width: none;
  width: 100%;
}

.table-content {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  gap: clamp(24px, 4vw, 36px);
  background: transparent;
  box-shadow: none;
}

@media (min-width: 960px) {
  .table-layout {
    row-gap: clamp(18px, 3vw, 32px);
  }

  .table-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .table-header__content {
    grid-column: 1;
  }

  .table-layout .table-content {
    grid-column: 1 / -1;
  }
}

.section__header {
  display: flex;
  flex-direction: column;
  gap: var(--section-header-gap);
}

.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.section__title {
  margin: 0;
  font-size: clamp(20px, 3.5vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-title);
}

.section__subtitle {
  margin: 0;
  color: rgba(85, 85, 85, 0.85);
  font-size: clamp(15px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1.45;
}

.section__subtitle-line {
  display: block;
}

.section__subtitle--fullwidth {
  max-width: none;
  width: 100%;
}

.section__subtitle--justify {
  text-align: justify;
}

.section__body {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 68ch;
}

.section__body--fullwidth {
  max-width: none;
  width: 100%;
}

.section__body p {
  margin: 0;
}

.section__body p + p {
  margin-top: 1.1em;
}

.section-layout,
.about-layout {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

@media (min-width: 960px) {
  .section-layout,
  .about-layout {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  }
}

.section--insights .section-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
  align-items: stretch;
}

@media (min-width: 960px) {
  .section--insights .section-layout {
    display: flex;
  }
}

.section-label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.75;
}

@media (min-width: 960px) {
  .section-label {
    padding-top: 10px;
  }
}

.about-layout {
  grid-template-columns: minmax(0, 1fr);
  width: min(var(--content-width), 100%);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  align-items: center;
}

@media (min-width: 960px) {
  .about-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }
}


.about-meta {
  display: grid;
  gap: clamp(20px, 4vw, 32px);
  align-content: start;
  justify-items: start;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.about-meta__section {
  display: grid;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.about-meta__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11, 21, 45, 0.55);
}

.about-meta__profile {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.about-meta__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
}

.about-meta__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-meta__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.about-meta__role {
  font-size: clamp(13px, 0.8vw, 14px);
  font-weight: 400;
  color: rgba(119, 119, 119, 0.65);
}

.about-meta__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
}

.about-meta__stat svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.about-content {
  display: grid;
  gap: clamp(24px, 4vw, 36px);
}

.section--about .about-content {
  grid-column: 1 / -1;
  width: 100%;
}

.bars-narrative {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
  width: 100%;
}

.story-block__body--bars .bars-narrative--fullwidth {
  margin-top: clamp(14px, 2vw, 22px);
  text-align: left;
  width: calc(100% + var(--section-inline-padding) * 2);
  max-width: min(var(--content-max-width), calc(100vw - var(--section-padding-inline) * 2));
  padding-inline: var(--section-inline-padding);
  margin-inline: calc(-1 * var(--section-inline-padding));
  box-sizing: border-box;
}

.bars-narrative__content {
  width: 100%;
  max-width: min(960px, 100%);
  padding: clamp(14px, 4vw, 20px);
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid black;
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  word-break: break-word;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .bars-narrative__content {
    padding: clamp(12px, 4vw, 18px);
    max-width: 100%;
  }
}

.bars-narrative__title {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 700;
  color: #0b152d;
}

.bars-narrative__content p {
  margin: 0;
}

.about-header {
  border-radius: 8px 8px 0 8px;
  padding: 16px var(--section-padding-inline);
}

.about-header .section__title {
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 5vw, 2.8rem);
  text-transform: none;
  color: var(--color-text);
}

.about-body {
  display: grid;
  gap: clamp(16px, 3vw, 24px);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-text);
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
  text-align: left;
  margin: 0;
  padding: clamp(16px, 3vw, 22px);
  border-radius: 16px;
  background: #fafafa;
  border: 1px solid #000000;
}

.about-body p {
  margin: 0;
  padding: 0;
  color: black;
}

.about-body p + p {
  margin-top: 1em;
}

@media (max-width: 768px) {
  .about-body {
    padding: clamp(14px, 4vw, 18px);
    gap: clamp(12px, 3vw, 16px);
  }
}

.about-divider {
  margin: clamp(24px, 5vw, 40px) 0;
  border: none;
  height: 1px;
  width: 100%;
  background: rgba(15, 23, 42, 0.08);
}

@media (max-width: 959.98px) {
  .about-meta {
    justify-content: flex-start;
    padding-left: clamp(16px, 4vw, 28px);
  }

  .about-meta__stat {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 14px;
    align-items: center;
    justify-items: start;
    height: 52px;
    padding-left: 0;
  }

  .about-meta__stat svg {
    justify-self: center;
    align-self: center;
  }

  .about-meta__card {
    width: 100%;
    max-width: 320px;
  }
}


.section--glance {
  --section-background: #fff;
  --glance-animation-duration: 780ms;
  --glance-animation-ease: cubic-bezier(0.16, 1, 0.3, 1);
  padding: clamp(10px, 2vw, 20px) 0 clamp(10px, 2vw, 20px) var(--section-padding-inline);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.section--glance::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--section-background);
  pointer-events: none;
}

.section--glance .section__inner {
  width: min(1220px, calc(100% - clamp(16px, 4vw, 44px)));
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}


.glance-layout {
  align-items: center;
}

.glance-section__header {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vw, 14px);
  align-items: flex-start;
  text-align: left;
  max-width: 100%;
  margin: 0;
}

.glance-section__header .section__title {
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.glance-overview {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4.8vw, 48px);
  align-items: stretch;
}

.glance-overview__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3.5vw, 26px);
  justify-content: flex-start;
}

.glance-overview__content::before {
  content: none;
}

.glance-visual__inner {
  --glance-donut-size: clamp(320px, 38vw, 520px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(0px, 0.4vw, 6px);
  width: 100%;
  max-width: min(1120px, 100%);
  min-height: clamp(180px, 22vw, 260px);
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  margin: 0;
  overflow: hidden;
}

.glance-donut-title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
}

.clustered-bars-title {
  margin: 0 0 clamp(6px, 1vw, 10px);
  width: 100%;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
}

.clustered-bars-title__sector {
  display: block;
  margin-top: clamp(2px, 0.5vw, 6px);
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  font-weight: 700;
  color: inherit;
}

.glance-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start;
  gap: clamp(10px, 2.8vw, 20px);
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border-bottom: none;
  min-height: 40px;
  width: 100%;
}

.glance-card-header--compact {
  padding-bottom: 0;
  min-height: auto;
}

.glance-card-header__summary {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 1.6vw, 12px);
  flex: 1;
  justify-content: flex-start;
}

.glance-card-header__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.glance-card-header--compact .glance-card-header__text {
  gap: 2px;
}

.glance-card-header__title {
  margin: 0;
  font-size: var(--insights-chart-title-size);
  font-weight: 700;
  color: #0b142a;
}

.section--indicator .glance-card-header__title {
  font-size: clamp(0.95rem, 1.6vw, 1.18rem);
}

.section--indicator .glance-card-header__title,
.section--indicator .insights-card-header__title {
  color: #0b142a;
}

.glance-card-header__subtitle {
  margin: 0;
  font-size: var(--insights-chart-subtitle-size);
  line-height: 1.6;
  color: rgba(11, 21, 45, 0.66);
}

.section--indicator .glance-card-header__subtitle,
.section--indicator .insights-card-header__subtitle {
  color: rgba(11, 21, 45, 0.66);
}

.glance-card-header__actions,
.insights-card-header__actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.6vw, 12px);
  margin-left: auto;
  align-self: flex-start;
  justify-self: end;
}

.glance-card-header__action,
.insights-card-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.section--indicator .insights-section__actions {
  gap: clamp(4px, 1vw, 8px);
}

.section--indicator .insights-card-header__action {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.section--indicator .glance-card-header__action,
.section--indicator .insights-card-header__action {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #0b142a;
}

.section--indicator .glance-card-header__action:hover,
.section--indicator .glance-card-header__action:focus-visible,
.section--indicator .insights-card-header__action:hover,
.section--indicator .insights-card-header__action:focus-visible {
  background: rgba(125, 61, 65, 0.08);
  border-color: rgba(125, 61, 65, 0.28);
  transform: translateY(-1px);
}

.section--indicator .glance-card-header__action.glance-card-header__action--active,
.section--indicator .glance-card-header__action[aria-pressed="true"],
.section--indicator .insights-card-header__action.glance-card-header__action--active,
.section--indicator .insights-card-header__action[aria-pressed="true"] {
  background: rgba(125, 61, 65, 0.12);
  border-color: rgba(125, 61, 65, 0.3);
  color: #0b142a;
  box-shadow: 0 8px 18px rgba(8, 20, 40, 0.14);
}

.glance-card-header__action:hover,
.glance-card-header__action:focus-visible,
.insights-card-header__action:hover,
.insights-card-header__action:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.glance-card-header__action.glance-card-header__action--active,
.glance-card-header__action[aria-pressed="true"],
.insights-card-header__action.glance-card-header__action--active,
.insights-card-header__action[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 20, 40, 0.2);
}

.glance-card-header__action svg,
.insights-card-header__action svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.section--indicator .insights-card-header__action svg {
  width: 16px;
  height: 16px;
}

.glance-card-header__action:focus-visible,
.insights-card-header__action:focus-visible {
  outline: 2px solid rgba(91, 72, 240, 0.4);
  outline-offset: 2px;
}

.glance-visual__message {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(11, 21, 45, 0.72);
}

.skeleton-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}

.skeleton--donut {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.skeleton--text {
  height: 24px;
  width: 150px;
}

.skeleton--text-small {
  height: 16px;
  width: 100px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 768px) {
  .skeleton {
    animation: none;
    background-position: 0 0;
  }
}

.chart-fade-in {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transform-origin: center;
  animation: chart-reveal 0.8s var(--glance-animation-ease, cubic-bezier(0.16, 1, 0.3, 1))
    forwards;
}

@keyframes chart-reveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(6px) scale(1.01);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .chart-fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.chart-fade-in.chart-fade-in--donut {
  animation-duration: 0.2s; /* Reduced from 0.9s to prevent resize loops */
  transform-origin: center;
}

.chart-fade-in.chart-fade-in--bars {
  animation-duration: 0.2s; /* Reduced from 0.9s to prevent resize loops */
  transform-origin: left center;
}

.skeleton--donut {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.skeleton--bar {
  width: 100%;
  height: 240px;
  border-radius: 8px;
}

.skeleton--text {
  height: 24px;
  width: 150px;
}

.skeleton--text-small {
  height: 16px;
  width: 100px;
}

.glance-visual__display {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vw, 14px);
  width: 100%;
  flex: 1;
  min-height: var(--chart-visual-height);
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding-top: clamp(10px, 2vw, 18px);
}

.glance-donut-wrapper {
  position: relative;
  width: min(var(--glance-donut-size, 480px), 100%);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.glance-donut {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glance-donut canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.section--indicator .glance-donut {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  .chart-card--glance {
    margin-inline: auto;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .chart-card--glance .glance-visual__inner {
    --glance-donut-size: clamp(360px, 120vw, 900px);
    min-height: clamp(420px, 115vw, 980px);
    padding: 0;
    justify-content: center;
    aspect-ratio: 1;
  }

  .glance-donut-wrapper {
    width: min(100%, var(--glance-donut-size, 100vw));
    margin-inline: auto;
  }

  .glance-visual__display {
    align-items: center;
  }
}

/* Fix for infinite hover resizing issue */
.glance-donut,
.glance-donut-wrapper {
  transition: none !important;
  transform: none !important;
}

.glance-donut:hover,
.glance-donut-wrapper:hover {
  transform: none !important;
  transition: none !important;
}

.chart-fade-in {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.chart-fade-in.chart-fade-in--donut {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Additional fixes for chart containers and canvas elements */
#glanceChartContainer,
#glanceChart,
.glance-card__visual,
.glance-donut,
.glance-donut-wrapper {
  transition: none !important;
  transform: none !important;
}

#glanceChartContainer:hover,
#glanceChart:hover,
.glance-card__visual:hover,
.glance-donut:hover,
.glance-donut-wrapper:hover {
  transform: none !important;
  transition: none !important;
}

/* Prevent Chart.js hover effects */
canvas#glanceChart {
  pointer-events: none;
}

/* Fix for potential container resize issues */
.glance-card__header,
.glance-card__body,
.glance-visual__display {
  contain: layout style;
}

.glance-pie {
  display: block;
  width: 100%;
  height: auto;
}

.glance-pie__segment path,
.glance-legend__item {
  cursor: pointer;
  transition: none;
}

.glance-legend__item:focus-visible {
  outline: 2px solid var(--color-accent, #1d4ed8);
  outline-offset: 4px;
  border-radius: 12px;
}

.glance-pie__label {
  fill: #ffffff;
  font-weight: 700;
  font-size: clamp(0.6rem, 1.2vw, 0.8rem);
  letter-spacing: 0.01em;
  paint-order: stroke;
  stroke: rgba(15, 23, 42, 0.28);
  stroke-width: 0.6px;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
}

.section--indicator .glance-pie__label {
  fill: #0b152d;
  stroke: rgba(255, 255, 255, 0.4);
}

.glance-donut__center {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 6px);
  width: auto;
  min-width: clamp(160px, 26vw, 240px);
  max-width: clamp(240px, 36vw, 360px);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border: none;
  text-align: center;
}

.glance-donut__value {
  font-size: clamp(1.5rem, 3.1vw, 2.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: #1d4ed8;
  text-shadow: none;
}

.glance-donut__label {
  font-size: clamp(0.82rem, 1.3vw, 1rem);
  line-height: 1.3;
  color: #1d4ed8;
  max-width: clamp(150px, 25vw, 200px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  white-space: normal;
}

.section--indicator .glance-donut__value {
  color: #0b142a;
  text-shadow: none;
}

.section--indicator .glance-donut__label {
  color: #0b4da2;
}

.glance-legend-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: var(--glance-legend-width, 100%);
  margin: 0 auto;
  position: relative;
}

.glance-legend-panel--inline {
  margin-top: clamp(10px, 1vw, 15px);
}

.glance-legend {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 12px);
  row-gap: clamp(6px, 1vw, 10px);
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: visible;
  list-style: none;
}

.glance-legend__item {
  --legend-base: var(--legend-color, #f9b604);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border-radius: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--legend-base);
  white-space: normal;
  max-width: clamp(120px, 18vw, 180px);
  cursor: default;
  background: none;
  border: none;
  text-align: center;
}

.glance-legend__item[data-active="false"] {
  opacity: 0.4;
}

.glance-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--legend-base);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.glance-legend__label {
  font-weight: 600;
  color: inherit;
  line-height: 1.3;
  text-align: center;
}

.glance-legend__value {
  font-weight: 500;
  color: #0b142a;
  font-size: 12px;
}

@media (max-width: 899px) {
  .glance-visual__inner {
    align-items: center;
  }

  .glance-card-header {
    grid-template-columns: 1fr;
    align-items: stretch;
    row-gap: clamp(10px, 2vw, 14px);
  }

  .glance-card-header__actions,
  .insights-card-header__actions {
    margin-left: 0;
    justify-content: flex-start;
    justify-self: start;
  }

  .glance-visual__display {
    justify-items: center;
  }

  .insights-section__legend {
    align-self: stretch;
    width: 100%;
    align-items: center;
  }

  .insights-section__legend .glance-legend-panel {
    justify-content: center;
  }

  .glance-legend {
    justify-content: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    flex-wrap: wrap;
  }

  .glance-legend__item {
    min-width: min(220px, 48%);
  }
}

@media (max-width: 480px) {
  .glance-visual__inner {
    --glance-donut-size: clamp(280px, 98vw, 520px);
    min-height: clamp(220px, 76vw, 420px);
    padding: 0;
    overflow: hidden;
  }

  .glance-donut-wrapper {
    width: 100%;
    max-width: none;
    margin-inline: auto;
  }

  .glance-donut__center {
    min-width: clamp(100px, 18vw, 150px);
    max-width: clamp(150px, 28vw, 200px);
  }

  .glance-donut__value {
    font-size: clamp(1rem, 2.2vw, 1.5rem);
  }

  .glance-donut__label {
    font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  }

  .glance-legend__item {
    font-size: 11px;
    padding: 2px 1px;
    gap: 5px;
    max-width: clamp(100px, 16vw, 150px);
  }

  .glance-legend__swatch {
    width: 7px;
    height: 7px;
  }

  .glance-legend__label {
    font-size: 11px;
  }
}

.glance-overview__content {
  align-items: flex-start;
  padding: 0;
  text-align: left;
  gap: clamp(14px, 2.8vw, 22px);
}

.glance-overview__intro {
  margin: 0;
  margin-bottom: clamp(12px, 2.4vw, 20px);
  font-size: clamp(0.92rem, 1.9vw, 1.05rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 100%;
}

.glance-section__header .glance-overview__intro {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.glance-highlights {
  display: grid;
  gap: clamp(14px, 2.4vw, 20px);
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  max-width: none;
}

.glance-highlight {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 32px);
  align-items: center;
}

.glance-highlight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: none;
  color: rgba(125, 61, 65, 0.95);
  flex: 0 0 44px;
  margin-left: 18px;
}

.glance-highlight__icon--small {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.glance-highlight__icons {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.glance-highlight__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.glance-highlight__icon[data-icon-type="image"]::before {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background-color: currentColor;
  mask: var(--icon-image) center / contain no-repeat;
  -webkit-mask: var(--icon-image) center / contain no-repeat;
}

.glance-highlight__body {
  display: grid;
  gap: 6px;
}

.glance-highlight__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.glance-highlight__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

@media (min-width: 960px) {

  .glance-layout {
    grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
    align-items: start;
  }

  .glance-section__header {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    width: 100%;
  }

  .glance-overview {
    grid-column: 1;
  }

  .glance-overview__content {
    max-width: none;
    width: 100%;
  }

  .glance-highlights {
    max-width: none;
  }
}

@media (max-width: 1023.98px) {
  .section--glance {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .indicator-overview {
    flex-direction: column;
  }

  .section--glance .section__inner {
    padding: 0 clamp(18px, 7vw, 48px);
  }

  .glance-overview__content {
    transform: none !important;
    opacity: 1 !important;
  }

  .glance-visual__inner {
    width: 100%;
    min-height: clamp(220px, 64vw, 320px);
    padding: 0;
    justify-content: center;
  }

  .glance-highlights {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section--glance[data-animate] .glance-overview__content {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.section__meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.about-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 28vw, 240px), 1fr));
  gap: clamp(20px, 4vw, 30px);
  justify-items: center;
  text-align: center;
  margin: 0 auto 0;
  padding: clamp(12px, 3vw, 18px) clamp(14px, 3.5vw, 22px) clamp(18px, 3.3vw, 26px);
  max-width: min(var(--content-width), 1200px);
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .about-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-kpi {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  padding: clamp(16px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  align-items: center;
  width: 100%;
  min-height: 160px;
  box-shadow: 0 18px 36px -32px rgba(15, 23, 42, 0.6);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.about-kpi:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 45px -28px rgba(15, 23, 42, 0.5);
}

.about-kpi p {
  text-align: center;
}

.about-kpi__value {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-kpi-value);
  white-space: nowrap;
}

.about-kpi__value--implemented {
  color: var(--chart-implemented);
}

.about-kpi__value--in-progress {
  color: var(--chart-in-progress);
}

.about-kpi__label {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.65);
  font-weight: 600;
  margin-top: 4px;
}

.about-kpi__detail {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(17, 24, 39, 0.65);
  font-weight: 500;
}

.about-kpi__value span {
  display: block;
  line-height: 1.1;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

@media (max-width: 720px) {
  .section-layout,
  .about-layout {
    grid-template-columns: 1fr;
  }

  .section-label {
    justify-content: flex-start;
    letter-spacing: 0.28em;
    font-size: 0.7rem;
  }

  .about-header .section__title {
    letter-spacing: 0.04em;
  }

  .clustered-bars__label-icon {
    display: inline-flex;
  }

  /* Additional content optimizations */
  .about-body {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
  }

  .about-kpi__value {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
  }

  .about-meta__name {
    font-size: 0.95rem;
  }

  .about-meta__role {
    font-size: clamp(12px, 0.7vw, 13px);
  }

  .about-meta__stat {
    font-size: 0.9rem;
  }

  /* Section content optimization */
  .section__eyebrow {
    font-size: 0.7rem;
  }

  .spotlight-intro,
  .spotlight-details {
    font-size: clamp(0.95rem, 2.2vw, 1.2rem);
  }
}

.spotlight-intro,
.dashboard-hero__summary,
.spotlight-details {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.8;
  color: rgba(17, 24, 39, 0.78);
  max-width: none;
}

.spotlight-intro p,
.dashboard-hero__summary p,
.spotlight-details p {
  margin: 0;
}

.spotlight-intro p + p,
.dashboard-hero__summary p + p,
.spotlight-details p + p {
  margin-top: clamp(12px, 2vw, 18px);
}

.hero-donut {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hero-donut svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: rgba(15, 23, 42, 0.92);
  letter-spacing: 0.01em;
  pointer-events: none;
}

.donut-center__value {
  font-size: clamp(2.2rem, 6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
}

.donut-center__label {
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: 600;
  color: rgba(30, 41, 59, 0.78);
  letter-spacing: 0.02em;
}

.dashboard-hero__summary {
  display: grid;
  gap: clamp(16px, 3vw, 24px);
  color: rgba(15, 23, 42, 0.85);
}

.dashboard-hero__summary-intro {
  margin: 0;
  font-weight: 500;
  color: var(--color-text);
}

.dashboard-hero__summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-hero__summary-item {
  position: relative;
  padding-left: 28px;
  color: var(--color-text);
}

.dashboard-hero__summary-item::before {
  content: "–";
  position: absolute;
  top: 0.5em;
  left: 4px;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: var(--summary-bullet-color, rgba(30, 41, 59, 0.65));
}

.dashboard-hero__summary-em {
  font-weight: 600;
}

.dashboard-hero__summary-count,
.dashboard-hero__summary-percent {
  font-weight: 700;
  color: rgba(15, 23, 42, 0.95);
}

.dashboard-hero__summary-percent {
  letter-spacing: 0.02em;
}

.donut-callout__percent {
  font-size: clamp(0.78rem, 1.5vw, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: var(--donut-callout-color, currentColor);
  color: var(--donut-callout-color, currentColor);
  paint-order: stroke fill;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.3s ease;
}

.dashboard-hero__summary-item--implemented {
  --summary-bullet-color: var(--chart-implemented);
}

.dashboard-hero__summary-item--partial {
  --summary-bullet-color: var(--chart-partial);
}

.dashboard-hero__summary-item--in-progress {
  --summary-bullet-color: var(--chart-in-progress);
}

.dashboard-hero__summary-item--not-started {
  --summary-bullet-color: var(--chart-not-started);
}

.dashboard-hero__summary-item--no-data {
  --summary-bullet-color: var(--chart-no-data);
}

/* New field-row layout for modern progress bars */
.field-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(8px, 1.5vw, 14px) clamp(12px, 2vw, 18px);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
  animation: field-row-enter 0.6s ease-out both;
  animation-delay: var(--animation-delay, 0ms);
  margin-bottom: clamp(4px, 0.8vw, 8px);
}

.field-row:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.field-row[data-active="false"] {
  opacity: 0.45;
}

@keyframes field-row-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-title {
  flex: 1;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  min-width: 0;
}

.field-total {
  font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  flex-shrink: 0;
}

.field-progress-bar {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 clamp(120px, 20vw, 200px);
  height: clamp(24px, 3vw, 32px);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
}

.field-progress-segment {
  flex: 1;
  height: 100%;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
  background: linear-gradient(135deg, var(--segment-color, #666) 0%, color-mix(in srgb, var(--segment-color, #666) 80%, black) 100%);
  animation: segment-grow 0.8s ease-out both;
  animation-delay: calc(var(--animation-delay, 0ms) + 200ms);
}

.field-progress-segment:nth-child(1) { --segment-color: var(--chart-not-started); }
.field-progress-segment:nth-child(2) { --segment-color: var(--chart-no-data); }
.field-progress-segment:nth-child(3) { --segment-color: var(--chart-in-progress); }
.field-progress-segment:nth-child(4) { --segment-color: var(--chart-partial); }
.field-progress-segment:nth-child(5) { --segment-color: var(--chart-implemented); }

.field-progress-segment:hover {
  filter: brightness(1.2) saturate(1.1);
  transform: scaleY(1.05);
  z-index: 1;
}

.field-progress-segment:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  filter: brightness(1.2) saturate(1.1);
  transform: scaleY(1.05);
  z-index: 1;
}

.field-progress-segment[data-active="false"] {
  opacity: 0.4;
}

@keyframes segment-grow {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.field-progress-segment::before {
  content: attr(data-count);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.65rem, 1.2vw, 0.8rem);
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.field-progress-segment:hover::before,
.field-progress-segment:focus-visible::before {
  opacity: 1;
}

@media (max-width: 720px) {
  .field-row {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(8px, 1.5vw, 12px);
    padding: clamp(10px, 2vw, 16px);
  }

  .field-title {
    text-align: center;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
  }

  .field-total {
    text-align: center;
    font-size: clamp(0.85rem, 1.6vw, 1rem);
  }

  .field-progress-bar {
    align-self: center;
    flex: 0 0 clamp(140px, 30vw, 180px);
  }
}

/* Chart container transitions for smooth expansion/contraction */
.clustered-bars__frame {
  transition: height 0.4s ease, min-height 0.4s ease;
}

.clustered-bars__chart {
  transition: height 0.4s ease, min-height 0.4s ease;
}

.clustered-bars__layout {
  transition: height 0.4s ease, min-height 0.4s ease;
}

.clustered-bars__canvas {
  transition: height 0.4s ease, min-height 0.4s ease;
}

/* Legacy clustered-bars styles (kept for compatibility but not used) */
.clustered-bars {
  display: flex;
  flex-direction: column;
  gap: clamp(1px, 0.5vw, 6px);
}

/* Legacy cluster styles - kept for reference but no longer used */
/*
.cluster-row {
  display: grid;
  gap: clamp(2px, 0.5vw, 4px);
  padding: clamp(1px, 0.4vw, 2px) 0;
  border-radius: 0;
  background: transparent;
  border: none;
  transition: transform 160ms ease;
}

.cluster-row[data-active="false"] {
  opacity: 0.45;
}

@media (min-width: 720px) {
  .cluster-row {
    grid-template-columns: clamp(280px, 30vw, 380px) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
}
*/

.cluster-label {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(12px, 2vw, 18px);
}

.cluster-label-main {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  font-weight: 600;
  font-size: 1rem;
}

.cluster-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: none;
  color: #ffffff;
  font-size: 0.75rem;
  position: relative;
}

.cluster-label-icon img {
  display: none;
}

.app-nav__item-icon[data-icon-type="image"]::before,
.cluster-label-icon[data-icon-type="image"]::before,
.banner-title__icon[data-icon-type="image"]::before {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background-color: currentColor;
  mask: var(--icon-image) center / contain no-repeat;
  -webkit-mask: var(--icon-image) center / contain no-repeat;
}

.proposal-card__field-icon[data-icon-type="image"]::before,
.proposal-modal__status-icon[data-icon-type="image"]::before {
  content: "";
  display: block;
  inline-size: 1em;
  block-size: 1em;
  background-color: currentColor;
  mask: var(--icon-image) center / contain no-repeat;
  -webkit-mask: var(--icon-image) center / contain no-repeat;
}

.proposal-card__badge-icon[data-icon-type="image"]::before {
  content: "";
  display: block;
  inline-size: 60%;
  block-size: 60%;
  background-color: currentColor;
  mask: var(--icon-image) center / contain no-repeat;
  -webkit-mask: var(--icon-image) center / contain no-repeat;
}

.cluster-label-text {
  display: inline-flex;
  align-items: center;
}

.cluster-label-link {
  color: inherit;
  text-decoration: none;
}

.cluster-label-link:hover,
.cluster-label-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Remove grey background from field name containers */
.clustered-bars__label-button,
.clustered-bars__label-static {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Make field name bold */
.clustered-bars__label {
  font-weight: 700;
}

.cluster-total {
  font-size: 0.9rem;
  color: #ffffff;
}

.cluster-label-meta {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.cluster-label--drillable {
  cursor: pointer;
}

.cluster-label--drillable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(91, 72, 240, 0.35);
  border-radius: 12px;
}

.cluster-label-drill {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cluster-label-drill:hover,
.cluster-label-drill:focus-visible {
  outline: none;
  background: rgba(91, 72, 240, 0.12);
  border-color: rgba(91, 72, 240, 0.28);
  color: var(--color-accent);
}

.cluster-label-drill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease;
}

.cluster-label-drill__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.cluster-row[data-expanded="true"] .cluster-label-drill__icon {
  transform: rotate(90deg);
}

.cluster-track {
  display: flex;
  border-radius: 999px;
  overflow: visible;
  background: none;
  position: relative;
  align-items: center;
  padding-bottom: 0;
  margin-bottom: clamp(4px, 1vw, 8px);
  margin-right: clamp(4px, 0.8vw, 6px);
}

.cluster-segment {
  border: none;
  min-height: clamp(28px, 4vw, 36px);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: filter 150ms ease, opacity 0.3s ease;
}

.cluster-segment--compact {
  font-size: clamp(0.68rem, 1.1vw, 0.82rem);
}

.cluster-segment:first-child {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.cluster-segment:last-child {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.cluster-segment:hover,
.cluster-segment:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

.cluster-segment[data-active="false"] {
  opacity: 0.3;
}

.cluster-subrows {
  display: grid;
  gap: clamp(2px, 0.8vw, 6px);
  padding-left: clamp(16px, 4vw, 32px);
  margin-bottom: clamp(4px, 1vw, 8px);
}

@media (min-width: 720px) {
  .cluster-subrows {
    padding-left: 52px;
  }
}

.cluster-row--sub {
  padding: clamp(2px, 0.8vw, 5px) 0;
}

@media (min-width: 720px) {
.cluster-row--sub {
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  margin-left: 4px;
}
}

/* Make each clustered bar item look like its own card */
.clustered-bars__item {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  padding: clamp(16px, 3vw, 22px);
  margin-bottom: clamp(12px, 2vw, 16px);
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  gap: clamp(16px, 3vw, 24px);
}

.clustered-bars__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.clustered-bars__item:last-child {
  margin-bottom: 0;
}

.cluster-label--sub {
  align-items: flex-start;
}

.cluster-label-main--sub {
  font-size: 0.95rem;
  font-weight: 500;
}

.cluster-label-meta--sub {
  font-size: 0.85rem;
}

.cluster-total--sub {
  font-size: 0.82rem;
  color: #ffffff;
}

.cluster-track--sub {
  min-height: 30px;
  padding-bottom: 0;
  margin-bottom: clamp(6px, 1.8vw, 12px);
  margin-right: clamp(4px, 0.8vw, 6px);
}

.cluster-segment__percent {
  position: absolute;
  pointer-events: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 2;
  text-shadow: none;
}

.cluster-segment__percent--inside {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  color: #ffffff;
}

.cluster-segment--compact .cluster-segment__percent--inside {
  font-size: clamp(0.55rem, 0.95vw, 0.72rem);
}

.cluster-segment__percent--outside {
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 0);
  font-size: clamp(0.6rem, 1vw, 0.78rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  background: none;
  border-radius: 0;
  padding: 0;
  border: none;
  text-shadow: 0 0 10px rgba(4, 11, 26, 0.5);
  white-space: nowrap;
}

.cluster-segment__percent--outside::before {
  content: none;
}

.table-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(10px, 2vw, 16px) 0;
  margin: 0;
  width: 100%;
  max-width: none;
  flex-wrap: nowrap;
  border: none;
  border-radius: 0;
  background: var(--color-page);
  box-shadow: none;
  box-sizing: border-box;
}

#proposalsControls {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--color-page);
  padding-top: 0;
  margin-top: 0;
}

.table-filters__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(125, 61, 65, 0.25);
  background: #ffffff;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.table-filters__toggle img {
  width: 20px;
  height: 20px;
}

.table-filters__toggle:hover,
.table-filters__toggle:focus-visible {
  outline: none;
  border-color: rgba(125, 61, 65, 0.5);
  box-shadow: 0 8px 20px -12px rgba(125, 61, 65, 0.35);
}

.table-filters__toggle:active {
  transform: translateY(1px);
}

.table-filters__close {
  display: none;
  align-self: flex-end;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(125, 61, 65, 0.16);
  background: #ffffff;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

.table-filters__backdrop {
  display: none;
}

.table-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(12px, 2vw, 24px);
  overflow-x: auto;
  padding-bottom: 6px;
  margin: 0;
  scrollbar-width: thin;
}

.table-filters::-webkit-scrollbar {
  height: 6px;
}

.table-filters::-webkit-scrollbar-thumb {
  background: rgba(125, 61, 65, 0.3);
  border-radius: 999px;
}

.table-filters::-webkit-scrollbar-track {
  background: transparent;
}

.table-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 160px;
  min-width: 140px;
}

.table-filter__label {
  font-size: clamp(13px, 0.8vw, 14px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.table-filter__control {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
  padding: 12px 16px;
  background: #fff;
  color: var(--color-text);
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23818BA0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

.table-filter__control[multiple] {
  min-height: 44px;
  max-height: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23818BA0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
  overflow-y: hidden;
}

.table-filter__control[multiple]:focus {
  overflow-y: auto;
}

.table-filter__control[multiple] option {
  padding: 6px 8px;
}

.table-pagination {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .table-controls {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .table-filters__toggle {
    display: inline-flex;
    position: relative;
    z-index: 92;
  }

  .table-filters {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
    margin-top: 8px;
    z-index: 91;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.4);
    padding: 16px;
    overflow-y: auto;
  }

  .table-filters .table-filter {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  .table-filters__title {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: left;
    letter-spacing: -0.01em;
  }

  .table-filters--open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .table-filters__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(15, 23, 42, 0.15);
    color: var(--color-text, #0f172a);
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    z-index: 1;
  }

  .table-filter__control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .table-filters__close:hover,
  .table-filters__close:focus-visible {
    background: rgba(9, 23, 55, 0.16);
    transform: scale(1.05);
    outline: none;
  }

  .table-filters__close:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--proposal-modal-accent-rgb), 0.35);
  }

  .table-filters__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.35);
    backdrop-filter: blur(4px);
    z-index: 89;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
  }

  .table-filters__backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .table-pagination {
    width: auto;
  }
}

.table-filter__control:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(125, 61, 65, 0.18);
}

.table-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-block: 8px;
  flex: 1 1 auto;
}

.table-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  padding-block: 8px;
  flex: 0 0 auto;
}

.table-pagination__status {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.table-wrapper {
  position: relative;
  margin-inline: 0;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.table-surface {
  position: relative;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  overflow: hidden;
}

.proposal-gallery {
  position: relative;
  border-radius: 0;
  padding: clamp(12px, 2vw, 20px) 0;
  width: 100%;
  box-shadow: none !important;
  background: transparent !important;
}

.proposal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 3vw, 24px);
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.proposal-grid > * {
  height: 100%;
}

.proposal-gallery__sentinel {
  margin-top: clamp(20px, 4vw, 32px);
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(125, 61, 65, 0.08), rgba(12, 46, 96, 0.04));
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.proposal-gallery__sentinel::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(125, 61, 65, 0.45);
  border-right-color: transparent;
  animation: proposal-spinner 900ms linear infinite;
}

.proposal-gallery__sentinel[data-state="complete"]::before {
  display: none;
}

.proposal-gallery__sentinel[data-state="complete"] {
  background: rgba(125, 61, 65, 0.06);
  color: rgba(15, 23, 42, 0.5);
}

.proposal-gallery__sentinel[hidden] {
  display: none;
}

@keyframes proposal-spinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.proposal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 200ms ease, transform 200ms ease;
  cursor: pointer;
}

.proposal-card:hover,
.proposal-card:focus-within {
  border-color: rgba(125, 61, 65, 0.32);
  box-shadow: var(--shadow-card);
}

.proposal-card:focus-visible {
  outline: 3px solid rgba(125, 61, 65, 0.55);
  outline-offset: 4px;
  box-shadow: var(--shadow-card);
}

.proposal-card__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 3vw, 22px) clamp(18px, 4vw, 28px);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--proposal-card-status-color, var(--chart-no-data)) 88%, white 12%),
      color-mix(in srgb, var(--proposal-card-status-color, var(--chart-no-data)) 72%, black 28%)
    );
  color: #ffffff;
}

.proposal-card__badge::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -22px;
  block-size: 44px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--proposal-card-status-color, var(--chart-no-data)) 88%, white 12%),
      color-mix(in srgb, var(--proposal-card-status-color, var(--chart-no-data)) 72%, black 28%)
    );
  clip-path: ellipse(75% 70% at 50% 0%);
  z-index: 0;
}

.proposal-card__badge-label {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
}

.proposal-card__badge-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(36px, 6vw, 44px);
  block-size: clamp(36px, 6vw, 44px);
  border-radius: 999px;
  background: #ffffff;
  color: var(--proposal-card-status-color, var(--chart-no-data));
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 600;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.proposal-card__content {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(18px, 3vw, 26px) clamp(20px, 4vw, 32px) clamp(22px, 4vw, 32px);
}

.proposal-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.proposal-card__field {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.75);
}

.proposal-card__field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  color: var(--color-accent);
  background: none;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: none;
}

body[data-dashboard-view="field"] .proposal-card__field-icon {
  inline-size: 18px;
  block-size: 18px;
  color: var(--color-accent);
  background: none;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: none;
}

.proposal-card__field-icon img {
  display: none;
}

.proposal-card__field-label {
  line-height: 1.25;
}

.proposal-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.proposal-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.proposal-card__title a:hover,
.proposal-card__title a:focus-visible {
  color: var(--color-accent);
  outline: none;
}

.proposal-card__summary {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 72ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


body.proposal-modal-open {
  overflow: hidden;
}

.proposal-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 6vw, 48px);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.proposal-modal:not([hidden]) {
  display: flex;
}

.proposal-modal--active {
  opacity: 1;
  pointer-events: auto;
}

.proposal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 23, 55, 0.45);
  backdrop-filter: blur(10px);
}

.proposal-modal__dialog {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - clamp(48px, 12vh, 128px));
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  color: var(--color-text, #0f172a);
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
  outline: none;
  --proposal-modal-accent: #0f3d8a;
  --proposal-modal-accent-rgb: 15, 61, 138;
}

.proposal-modal--active .proposal-modal__dialog {
  transform: translateY(0);
  opacity: 1;
}

.proposal-modal__body {
  display: grid;
  gap: 32px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(9, 23, 55, 0.18) transparent;
  scrollbar-gutter: stable;
  position: relative;
  padding-right: 16px;
}

.proposal-modal__body::-webkit-scrollbar {
  width: 10px;
}

.proposal-modal__body::-webkit-scrollbar-thumb {
  background: rgba(9, 23, 55, 0.18);
  border-radius: 999px;
}

.proposal-modal__close {
  position: absolute;
  top: clamp(12px, 2.4vw, 22px);
  right: clamp(12px, 2.4vw, 22px);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: rgba(9, 23, 55, 0.08);
  color: var(--color-text, #0f172a);
  font-size: 1.65rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.proposal-modal__close:hover,
.proposal-modal__close:focus-visible {
  background: rgba(9, 23, 55, 0.16);
  transform: scale(1.04);
  outline: none;
}

.proposal-modal__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--proposal-modal-accent-rgb), 0.35);
}

.proposal-modal__header {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.proposal-modal__headline {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vw, 24px);
}

.proposal-modal__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.proposal-modal__header-main {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 16px);
  min-width: 0;
}

.proposal-modal__title-block,
.proposal-modal__status-block {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 8px);
}

.proposal-modal__status-block {
  align-items: flex-start;
  justify-self: start;
}

.proposal-modal__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

.proposal-modal__pretitle {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 0;
}

.proposal-modal__status {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border-radius: 999px;
  background: none;
  border: 0;
  align-self: flex-start;
  justify-content: flex-start;
  min-width: 0;
  box-shadow: none;
  margin-top: 0;
}

.proposal-modal__status-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--proposal-modal-accent-rgb), 0.24);
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  color: var(--proposal-modal-accent);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 22px rgba(var(--proposal-modal-accent-rgb), 0.18);
}

.proposal-modal__status-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proposal-modal__status-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text, #0f172a);
  letter-spacing: -0.01em;
}

.proposal-modal__status-subtitle {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}


.proposal-modal__title {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-title);
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.proposal-modal__title-text {
  font-size: clamp(0.98rem, 1.7vw, 1.2rem);
  font-weight: 700;
  color: inherit;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.proposal-modal__section,
.proposal-modal__info {
  display: grid;
  gap: clamp(18px, 3.6vw, 26px);
}

#proposalModalCommitmentSection {
  display: grid;
  gap: clamp(18px, 3.6vw, 26px);
  align-items: flex-start;
}

#proposalModalSummary {
  margin: 0;
}

#proposalModalCommitmentSection .proposal-modal__status-block {
  margin-left: 0;
  align-items: flex-start;
  justify-self: start;
}

.proposal-modal__section-title {
  margin: 0;
  font-size: clamp(1.04rem, 2.4vw, 1.32rem);
  font-weight: 700;
  color: var(--color-text, #0f172a);
  letter-spacing: -0.01em;
}

.proposal-modal__info-title {
  margin: 0;
  font-size: 0.74rem;
  font-weight: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.52);
}

.proposal-modal__info-grid {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  width: 100%;
}

.proposal-modal__info-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: flex-start;
  gap: clamp(16px, 2.8vw, 22px);
  padding: clamp(18px, 3vw, 24px);
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.9);
  box-shadow: 0 14px 32px -24px rgba(15, 23, 42, 0.35);
  min-width: 0;
}


.proposal-modal__summary {
  margin: 0;
  padding: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.68;
  color: rgba(15, 23, 42, 0.8);
  background: rgba(15, 23, 42, 0.04);
  border-radius: 20px;
}


.proposal-modal__meta {
  display: grid;
  gap: 20px;
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 240px;
  min-width: 0;
}

.proposal-modal__meta-item {
  display: grid;
  gap: 6px;
}

.proposal-modal__meta dt {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  margin: 0;
}

.proposal-modal__meta dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-text, #0f172a);
  line-height: 1.58;
  overflow-wrap: anywhere;
}

@media (min-width: 56.25em) {
  .proposal-modal__info-grid {
    display: flex;
    align-items: stretch;
    gap: clamp(24px, 3vw, 32px);
  }

  .proposal-modal__info-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .proposal-modal__meta {
    min-width: 0;
  }

  .proposal-modal__status-block {
    width: auto;
    justify-self: end;
    align-items: flex-end;
  }

  .proposal-modal__status {
    align-self: flex-end;
    justify-content: flex-end;
  }

  .proposal-modal__status-copy {
    align-items: flex-end;
    text-align: right;
  }
}

.proposal-modal__details {
  display: block;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.proposal-modal__article {
  display: grid;
  gap: clamp(18px, 3vw, 26px);
}

.proposal-modal__article-section {
  display: grid;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.proposal-modal__article-section:last-child {
  border-bottom: none;
}

.proposal-modal__article-heading {
  margin: 0;
  font-size: clamp(1.04rem, 2.4vw, 1.32rem);
  font-weight: 700;
  color: var(--color-text, #0f172a);
  letter-spacing: -0.01em;
}

.proposal-modal__article-heading--eyebrow {
  font-size: 0.74rem;
  font-weight: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.52);
}

.proposal-modal__article-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(15, 23, 42, 0.82);
}

.proposal-modal__article-text + .proposal-modal__article-text {
  margin-top: 6px;
}

.proposal-modal__article-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.proposal-modal__article-source {
  position: relative;
  display: grid;
  gap: 8px;
  padding-left: 1.2rem;
  border-radius: 0;
  background: none;
  border: 0;
}

.proposal-modal__article-source::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.4rem;
  font-size: 1.2rem;
  line-height: 1;
  color: rgba(15, 23, 42, 0.5);
}

.proposal-modal__article-source-label {
  font-size: clamp(0.82rem, 1.8vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #0f172a;
  line-height: 1.5;
}

.proposal-modal__article-source-link {
  font-size: 0.84rem;
  font-weight: 400;
  color: #3b82f6;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  word-break: break-word;
}

.proposal-modal__article-source-link:hover,
.proposal-modal__article-source-link:focus-visible {
  text-decoration: underline;
  color: #2563eb;
}

.proposal-modal__article-source-text {
  font-size: 0.82rem;
  color: #0f172a;
  line-height: 1.55;
  word-break: break-word;
}


@media (max-width: 860px) {
  .proposal-modal__dialog {
    width: min(720px, 100%);
  }
}

@media (max-width: 640px) {
  .proposal-modal {
    padding: 12px;
  }

  .proposal-modal__dialog {
    max-height: calc(100vh - 20px);
    padding: 20px 24px;
    border-radius: 18px;
  }

  .proposal-modal__body {
    gap: 20px;
  }

  .proposal-modal__title {
    font-size: 1.1rem;
  }

  .proposal-modal__summary {
    padding: 16px;
    font-size: 0.95rem;
  }

  .proposal-modal__meta {
    gap: 14px;
  }

  .proposal-modal__article-section {
    gap: 8px;
    padding-bottom: 14px;
  }

  .proposal-modal__status {
    width: 100%;
    justify-content: flex-start;
  }

  .proposal-modal__article-text {
    font-size: 0.9rem;
  }

  .proposal-modal__meta dt {
    font-size: 0.68rem;
  }

  .proposal-modal__meta dd {
    font-size: 0.95rem;
  }
}

.data-table {
  width: 100%;
  min-width: 600px; /* Ensure minimum width for readability */
  border-collapse: separate;
  table-layout: fixed;
  box-sizing: border-box;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

@media (max-width: 768px) {
  .data-table {
    font-size: 14px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    min-width: 0;
  }
  
  .data-table th,
  .data-table td {
    padding: 12px 16px;
    word-wrap: break-word;
    max-width: 150px;
  }
  
  /* Force sections to fit mobile screens */
  .section {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 16px 12px;
  }
  
  
  .app-main {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
}

.data-table thead {
  background: #f8fafc;
}

.data-table th,
.data-table td {
  padding: 16px 24px;
  text-align: left;
  word-break: break-word;
  white-space: normal;
  vertical-align: top;
}

.data-table th:first-child,
.data-table td:first-child {
  width: 40%;
  min-width: 200px;
}

.data-table thead th {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.72);
  background: rgba(15, 23, 42, 0.06);
  border: none;
}

.data-table thead th:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.data-table thead th:last-child {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.data-table tbody tr {
  position: relative;
  isolation: isolate;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.data-table tbody tr::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.94) 100%);
  box-shadow: 0 32px 64px -40px rgba(15, 23, 42, 0.6);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  z-index: -1;
}

.data-table tbody tr:hover::before,
.data-table tbody tr:focus-within::before {
  transform: translateY(-4px);
  box-shadow: 0 38px 72px -36px rgba(15, 23, 42, 0.62);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(241, 245, 249, 0.98) 100%);
}

.data-table td {
  position: relative;
  z-index: 1;
  font-size: 0.98rem;
  color: var(--color-text);
  border: none;
  background: transparent;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: clamp(14px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--badge-color, var(--color-accent));
  background: var(--badge-bg, rgba(125, 61, 65, 0.12));
  border: 1px solid var(--badge-border, rgba(125, 61, 65, 0.22));
}

.data-table__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.data-table__title a {
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--color-text);
  transition: color 160ms ease;
}

.data-table__title a:hover,
.data-table__title a:focus-visible {
  color: var(--color-accent);
  outline: none;
}

.data-table__summary {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.table-empty {
  margin: 0;
  margin-top: clamp(18px, 3vw, 28px);
  padding: clamp(20px, 3vw, 32px);
  text-align: center;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--color-text);
  border-radius: 18px;
  border: 1px dashed rgba(125, 61, 65, 0.3);
  background: rgba(125, 61, 65, 0.06);
}

.empty-state {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.back-to-top {
  position: fixed;
  right: clamp(16px, 4vw, 44px);
  bottom: clamp(16px, 4vw, 44px);
  width: clamp(44px, 6vw, 56px);
  height: clamp(44px, 6vw, 56px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(37, 150, 190, 0.32);
  background: #ffffff;
  color: #2596be;
  box-shadow: 0 18px 40px -24px rgba(37, 150, 190, 0.65);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  z-index: 120;
}

.back-to-top svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:is(:hover, :focus-visible) {
  box-shadow: 0 18px 44px -18px rgba(37, 150, 190, 0.7);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(37, 150, 190, 0.35);
  outline-offset: 2px;
}

.floating-actions {
  position: fixed;
  top: clamp(88px, 8vw, 128px);
  right: clamp(16px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 120;
}

.floating-actions .banner-action {
  background: #0b5ab4;
  border-color: #0b5ab4;
  color: #ffffff;
  box-shadow: 0 16px 36px -24px rgba(10, 30, 90, 0.55);
  width: clamp(44px, 6vw, 56px);
  height: clamp(44px, 6vw, 56px);
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 999px;
  aspect-ratio: 1 / 1;
}

@media (max-width: 640px) {
  .floating-actions {
    gap: 8px;
    top: clamp(64px, 11vw, 96px);
    right: 12px;
  }

  .floating-actions .banner-action {
    width: clamp(36px, 9vw, 42px);
    height: clamp(36px, 9vw, 42px);
  }

  .floating-actions .banner-action img,
  .floating-actions .banner-action svg {
    width: 20px;
    height: 20px;
  }
}

.floating-actions .banner-action:hover,
.floating-actions .banner-action:focus-visible {
  background: #0a4b9b;
  border-color: #0a4b9b;
  box-shadow: 0 18px 38px -20px rgba(10, 30, 90, 0.6);
}

.floating-actions .banner-action svg,
.floating-actions .banner-action img {
  filter: brightness(0) invert(1) !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.banner-action.is-active svg,
.banner-action.is-active img {
  fill: #ffffff;
}

.floating-actions .banner-action svg *,
.floating-actions .banner-action img {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

@media (max-width: 1024px) {
  .floating-actions .banner-action#downloadData,
  .floating-actions .banner-action#shareDashboard,
  .floating-actions .banner-action#fullscreenToggle {
    background: #0b5ab4;
    border-color: #0b5ab4;
    color: #ffffff;
    box-shadow: 0 12px 28px -14px rgba(10, 30, 90, 0.45);
  }

  .floating-actions .banner-action#downloadData:hover,
  .floating-actions .banner-action#shareDashboard:hover,
  .floating-actions .banner-action#fullscreenToggle:hover,
  .floating-actions .banner-action#downloadData:focus-visible,
  .floating-actions .banner-action#shareDashboard:focus-visible,
  .floating-actions .banner-action#fullscreenToggle:focus-visible {
    background: #0a4b9b;
    border-color: #0a4b9b;
    box-shadow: 0 12px 28px -12px rgba(10, 30, 90, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
    transform: none;
  }

  .back-to-top.is-visible {
    transform: none;
  }
}

.tooltip {
  position: fixed;
  pointer-events: none;
  padding: 14px 18px;
  border-radius: 14px;
  background: #ffffff;
  color: #0b152d;
  font-size: 0.95rem;
  line-height: 1.55;
  z-index: 9999;
  opacity: 0;
  border: 1px solid #0b152d;
  box-shadow: 0 16px 38px -18px rgba(15, 23, 42, 0.35);
  transition: opacity 120ms ease, transform 140ms ease;
  transform: translate3d(0, 10px, 0);
}

.tooltip[data-visible="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.tooltip-line {
  display: block;
}

.tooltip-block {
  display: grid;
  gap: 4px;
}

.tooltip-block strong {
  color: #0b152d;
  font-weight: 700;
}

.tooltip-block .tooltip-line {
  margin: 0;
}

.tooltip-line + .tooltip-line {
  margin-top: 4px;
}

.tooltip-title {
  font-weight: 700;
  color: #0b152d;
}

.tooltip-detail {
  color: #111827;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .charts-grid {
    gap: clamp(0.875rem, 3.2vw, 1.375rem);
  }

  .section--insights .charts-grid {
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }

  .chart-card {
    padding: clamp(0.75rem, 3.5vw, 1.125rem)
      clamp(1rem, 2.8vw, 1.375rem);
  }
}

@media (max-width: 768px) {
   .section--insights .charts-grid {
     gap: clamp(32px, 6vw, 44px);
   }

   .chart-card {
     padding: clamp(8px, 3vw, 16px) clamp(12px, 2vw, 18px);
   }
 }

@media (max-width: 720px) {
  .app-main {
    --section-padding-inline: clamp(16px, 5vw, 24px);
    padding: clamp(32px, 8vw, 56px) var(--section-padding-inline);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .charts-grid {
    grid-template-columns: 1fr;
    gap: clamp(18px, 5vw, 28px);
    justify-items: center;
    width: 100%;
    max-width: 100%;
  }

  .chart-card {
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(16px, 2.4vw, 22px);
    margin-inline: auto;
    aspect-ratio: auto;
    overflow: visible;
  }

  .story-block--bars .chart-card {
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(16px, 2.4vw, 22px);
    margin-inline: 0;
    aspect-ratio: auto;
    overflow: visible;
  }

  /* Allow bar chart card to grow with its content on mobile/tablet */
  /* Removed as now applied to all screens */

  .chart-card--spotlight .insights-content {
    height: auto;
  }

  .chart-card--glance {
    flex-basis: 100%;
    padding-inline: clamp(16px, 2.4vw, 22px);
  }

  .section--full-bleed .section__inner {
    padding-inline: clamp(16px, 4vw, 44px);
  }

  .section {
    border-radius: 24px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: clamp(18px, 5vw, 24px) var(--section-padding-inline);
  }

  .table-wrapper {
    border-radius: 18px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Additional optimizations for very small screens */
@media (max-width: 360px) {
  .banner-title {
    font-size: clamp(1.5rem, 6vw, 1.8rem);
    white-space: normal;
  }

  .section__title {
    font-size: clamp(14px, 2.7vw, 16px);
  }

  .section__subtitle {
    font-size: clamp(12px, 0.8vw, 13px);
  }

  .section__body {
    font-size: clamp(14px, 1vw, 15px);
  }

  .app-main {
    padding: clamp(12px, 4vw, 20px) clamp(8px, 3vw, 16px);
  }

  .section {
    padding: clamp(8px, 2vw, 14px) clamp(10px, 3vw, 16px);
  }

  .section--full-bleed .section__inner {
    padding-inline: clamp(16px, 4vw, 44px);
  }

  .banner-navigation {
    min-height: 48px;
  }

  .banner-nav__item {
    padding: 5px 6px 7px;
    font-size: 0.8rem;
  }

  .banner-action {
    padding: 4px 10px;
    font-size: clamp(12px, 0.8vw, 13px);
  }

  .banner-tag {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  .proposal-card__title {
    font-size: 14px;
  }

  .proposal-card__summary {
    font-size: 0.65rem;
  }

  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }

  .glance-donut__value {
    font-size: clamp(0.9rem, 2vw, 1.3rem);
  }

  .glance-donut__label {
    font-size: clamp(0.6rem, 0.8vw, 0.75rem);
  }

  .glance-legend__item {
    font-size: 10px;
    max-width: clamp(90px, 14vw, 120px);
  }
}

/* Existing 480px styles updated */
@media (max-width: 480px) {
  .proposal-grid {
    grid-template-columns: 1fr;
    gap: clamp(12px, 2.5vw, 20px);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .proposal-card {
    border-radius: 14px;
    width: 100%;
    max-width: 100%;
  }

  .proposal-card__badge {
    padding: clamp(10px, 1.8vw, 16px) clamp(12px, 2.5vw, 18px);
  }

  .proposal-card__content {
    padding: clamp(12px, 1.8vw, 18px) clamp(14px, 2.5vw, 20px) clamp(14px, 2.5vw, 18px);
  }

  .proposal-card__title {
    font-size: 15px;
  }

  .proposal-card__summary {
    font-size: 0.7rem;
  }

  .proposal-card__field {
    font-size: 0.8rem;
  }

  .data-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
  }

  .data-table th,
  .data-table td {
    padding: 8px 10px;
    font-size: 0.85rem;
    max-width: 120px;
    word-wrap: break-word;
  }

  .data-table thead th {
    font-size: 0.7rem;
  }

  .data-table td {
    font-size: 0.85rem;
  }

  .status-badge {
    font-size: clamp(12px, 0.8vw, 13px);
    padding: 4px 10px;
    white-space: nowrap;
  }

  .table-filter__label {
    font-size: clamp(12px, 0.7vw, 13px);
  }

  .table-filter__control {
    padding: 10px 12px;
  }

  .table-pagination {
    font-size: 0.85rem;
  }

  /* Cluster bars optimization for small screens */
  .clustered-bars__label-text {
    font-size: 13px;
  }

  .clustered-bars__segment {
    font-size: 11px;
  }

  .clustered-bars__segment--small {
    font-size: 9px;
  }

  /* Field row optimization */
  .field-title {
    font-size: clamp(0.85rem, 1.6vw, 1rem);
  }

  .field-total {
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  }

  /* Spotlight optimization */
  .indicator-spotlight__heading {
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  }

  .indicator-spotlight__body p {
    font-size: clamp(0.9rem, 1.3vw, 0.95rem);
  }

  /* Story block optimization */
  .story-block__title {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
  }

  .story-block__subtitle {
    font-size: clamp(0.95rem, 1.5vw, 1rem);
  }

  /* Force all sections to fit mobile screens */
  .section {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 12px 8px;
    overflow: hidden;
  }

  .banner-body {
    width: 100%;
    max-width: 100vw;
    padding: 20px 8px 0;
    overflow-x: hidden;
  }

}


.proposal-modal__article-heading--eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.52);
}

.proposal-modal__scroll-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 10;
}

.proposal-modal__scroll-indicator svg {
  width: 24px;
  height: 24px;
  fill: rgba(15, 23, 42, 0.4);
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.1));
}

.proposal-modal__dialog--scrollable .proposal-modal__scroll-indicator {
  opacity: 1;
}

.scroll-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
  pointer-events: none;
  opacity: 0 !important;
  transition: none;
}

.proposal-modal__dialog--scrollable .scroll-fade-bottom {
  opacity: 0 !important;
}


.scroll-hint {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  color: var(--color-accent-strong);
  cursor: pointer;
  user-select: none;
  animation: bounce 2s infinite;
  z-index: 100;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.proposal-modal__scroll-hint {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 32px;
  color: rgba(15, 23, 42, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
  animation: modal-bounce 2s infinite;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

@keyframes modal-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

.proposal-modal__dialog--scrollable .proposal-modal__scroll-hint {
  opacity: 1;
.chartjs-tooltip,
.chartjs-tooltip * {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  color: #0b152d !important;
}

.chartjs-tooltip {
  box-shadow: 0 14px 32px -18px rgba(15, 23, 42, 0.25) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-size: 0.92rem !important;
  line-height: 1.48 !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  transition: opacity 120ms ease, transform 140ms ease !important;
  transform: translate3d(0, 10px, 0) !important;
}

.chartjs-tooltip[data-visible="true"] {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}
}

/* Legend Info Icon and Popup */
.legend-info-icon {
  display: inline-flex;
}

.legend-button-group {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.legend-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #94a3b8;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  padding: 0;
}

.legend-info-icon:hover,
.legend-info-icon:focus-visible {
  color: #475569;
  transform: scale(1.1);
  outline: none;
}

.legend-info-icon:active {
  transform: scale(0.95);
}

.legend-info-icon svg,
.legend-info-icon img {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.legend-toggle-names {
  color: #0f3d8a;
}

.legend-toggle-names[aria-pressed="true"] {
  color: #0a2f6d;
}

#legendInfoPopup {
  --proposal-modal-accent: #0f3d8a;
  --proposal-modal-accent-rgb: 15, 61, 138;
}

#legendInfoList .proposal-modal__article-section {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

#legendInfoList .proposal-modal__article-section:last-child {
  border-bottom: none;
}

.share-modal__input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.share-modal__input,
.share-modal__textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  background: #f9f9f9;
  color: #333;
}

.share-modal__textarea {
  resize: vertical;
  min-height: 80px;
}

.share-modal__copy-btn {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.share-modal__copy-btn:hover {
  background: #0056b3;
}

.share-modal__copy-btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

#legendInfoList .legend-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

#legendInfoList .legend-item-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

#legendInfoList .legend-item-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

#legendInfoList .legend-item-description {
  margin: 0;
  padding-left: 32px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Legend Info Icon and Popup */
.legend-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #ffffff;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  flex-shrink: 0;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: 4px;
  padding: 0;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.legend-info-icon:hover,
.legend-info-icon:focus-visible {
  background: color-mix(in srgb, var(--badge-bg) 85%, #ffffff 15%);
  border-color: color-mix(in srgb, var(--badge-border) 85%, #000 15%);
  transform: scale(1.05);
  outline: none;
}

.legend-info-icon:active {
  transform: scale(0.95);
}

.legend-info-icon svg,
.legend-info-icon img {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.legend-info-popup {
  position: absolute;
  z-index: 1000;
  max-width: 320px;
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--color-text);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  margin-top: 8px;
}

.legend-info-popup.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.legend-info-popup__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-info-popup__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.legend-info-popup__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-info-popup__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.legend-info-popup__item:last-child {
  border-bottom: none;
}

.legend-info-popup__item-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}

.legend-info-popup__item-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text);
}

.legend-info-popup__item-label {
  font-weight: 600;
  color: var(--color-text);
}

.legend-info-popup__item-description {
  margin: 0;
  color: var(--color-text-muted);
}

.toggle-labels {
  color: #0f3d8a;
}

.toggle-labels[aria-pressed="true"] {
  color: #0a2f6d;
}