/* Override for metrics - ensure body uses flex layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Color scheme - Light mode */
:root {
  /* Semantic color mapping - abstraction layer */
  --color-okay: #10b981;        /* Positive, good, success */
  --color-okay-dark: #059669;
  --color-okay-darker: #065f46;
  
  --color-positive: #6366f1;     /* Desirable trend, favorable outcome */
  --color-positive-dark: #4f46e5;
  
  --color-info: #3b82f6;         /* Informational, neutral information */
  --color-info-dark: #1e40af;
  
  --color-normal: var(--muted);  /* Neutral, stable, no change */
  
  --color-warning: #f59e0b;      /* Caution, attention needed */
  --color-warning-dark: #92400e;
  
  --color-danger: #ef4444;       /* Bad, error, negative */
  --color-danger-dark: #991b1b;
  
  /* Card header colors */
  --card-info-color: var(--color-info-dark);
  --card-info-bg: color-mix(in oklab, var(--color-info) 12%, transparent);
  --card-info-border: color-mix(in oklab, var(--color-info) 20%, transparent);
  
  --card-warning-color: var(--color-warning-dark);
  --card-warning-bg: color-mix(in oklab, var(--color-warning) 12%, transparent);
  --card-warning-border: color-mix(in oklab, var(--color-warning) 20%, transparent);
  
  --card-danger-color: var(--color-danger-dark);
  --card-danger-bg: color-mix(in oklab, var(--color-danger) 12%, transparent);
  --card-danger-border: color-mix(in oklab, var(--color-danger) 20%, transparent);
  
  --card-tip-color: var(--color-okay-darker);
  --card-tip-bg: color-mix(in oklab, var(--color-okay) 12%, transparent);
  --card-tip-border: color-mix(in oklab, var(--color-okay) 20%, transparent);
  
  /* Trend badge colors */
  --trend-up-bg: color-mix(in oklab, var(--color-info) 15%, transparent);
  --trend-up-border: color-mix(in oklab, var(--color-info) 40%, transparent);
  --trend-up-icon: var(--color-info-dark);
  
  --trend-down-bg: color-mix(in oklab, var(--color-positive) 15%, transparent);
  --trend-down-border: color-mix(in oklab, var(--color-positive) 40%, transparent);
  --trend-down-icon: var(--color-positive-dark);
  
  --trend-constant-bg: color-mix(in oklab, var(--color-okay) 15%, transparent);
  --trend-constant-border: color-mix(in oklab, var(--color-okay) 40%, transparent);
  --trend-constant-icon: var(--color-okay-dark);
  
  /* Trend item colors */
  --trend-stable-color: var(--color-okay);
  --trend-stable-bg: color-mix(in oklab, var(--color-okay) 8%, transparent);
  
  --trend-rising-color: var(--color-info);
  --trend-rising-bg: color-mix(in oklab, var(--color-info) 8%, transparent);
  
  --trend-warning-color: var(--color-warning);
  --trend-warning-bg: color-mix(in oklab, var(--color-warning) 8%, transparent);
  
  --trend-positive-color: var(--color-positive);
  --trend-positive-bg: color-mix(in oklab, var(--color-positive) 8%, transparent);
  
  --trend-negative-color: var(--color-danger);
  --trend-negative-bg: color-mix(in oklab, var(--color-danger) 8%, transparent);
  
  /* Adoption badge colors */
  --adoption-essential-bg: color-mix(in oklab, var(--color-okay) 15%, transparent);
  --adoption-essential-color: var(--color-okay-dark);
  --adoption-essential-border: color-mix(in oklab, var(--color-okay) 40%, transparent);
  
  /* Info/Warning card colors */
  --info-card-bg: color-mix(in oklab, var(--color-info) 8%, transparent);
  --info-card-border: color-mix(in oklab, var(--color-info) 30%, transparent);
  
  --warning-card-bg: color-mix(in oklab, var(--color-warning) 8%, transparent);
  --warning-card-border: color-mix(in oklab, var(--color-warning) 30%, transparent);
  
  /* Callout colors */
  --danger-callout-bg: color-mix(in oklab, var(--color-danger) 8%, transparent);
  --danger-callout-border: color-mix(in oklab, var(--color-danger) 30%, transparent);
  
  --tip-callout-bg: color-mix(in oklab, var(--color-okay) 8%, transparent);
  --tip-callout-border: color-mix(in oklab, var(--color-okay) 30%, transparent);
  
  /* Shadow colors */
  --shadow-light: rgba(15, 23, 42, 0.06);
  --shadow-medium: rgba(0, 0, 0, 0.06);
  --shadow-medium-alt: rgba(0, 0, 0, 0.08);
  --shadow-strong: rgba(0, 0, 0, 0.1);
}

/* Color scheme - Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override card header text colors for better contrast */
    --card-info-color: #93c5fd;
    --card-warning-color: #fbbf24;
    --card-danger-color: #fca5a5;
    --card-tip-color: #6ee7b7;
  }
}
/* Metrics-specific styles */
.metric-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--accent-weak) 45%, transparent),
    transparent
  );
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.metric-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  border-radius: 12px 0 0 12px;
  transition: background .12s ease;
  z-index: 1;
}
.metric-item:hover {
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
  box-shadow: 0 2px 12px var(--shadow-light);
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--accent-weak) 60%, transparent),
    transparent
  );
}
.metric-item:hover::before {
  background: color-mix(in oklab, var(--accent) 40%, transparent);
}
.metric-item.active {
  border-color: var(--accent);
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--accent-weak) 75%, transparent),
    transparent
  );
}
.metric-item.active::before {
  background: var(--accent);
}
.level-section {
  margin-bottom: 1rem;
}
.level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .7rem;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.level-header:hover {
  background: color-mix(in oklab, var(--accent-weak) 30%, transparent);
}
.level-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.level-header-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  opacity: 0.9;
  /* Icons follow text color - use filter to match text color scheme */
  filter: brightness(0) saturate(100%);
}
@media (prefers-color-scheme: dark) {
  .level-header-icon {
    filter: brightness(0) saturate(100%) invert(1);
  }
}
.level-toggle {
  font-size: 0.75rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.level-header.collapsed .level-toggle {
  transform: rotate(-90deg);
}
.level-metrics {
  margin-top: 0.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.level-header:not(.collapsed) + .level-metrics {
  max-height: 5000px;
}
.metric-title {
  font-weight: 600;
  line-height: 1.2;
  font-size: 0.9375rem;
}
.metric-summary {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 0.25rem;
  line-height: 1.3;
}
/* Content area styling for metrics */
.content-body .viewer {
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  display: block;
  line-height: 1.75;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-left: auto;
  margin-right: auto;
  /* Ensure it doesn't overflow on smaller screens - account for padding */
  max-width: min(1200px, calc(100vw - var(--sidebar-w) - 4rem));
  padding-left: clamp(1rem, 1.5rem, 3vw);
  padding-right: clamp(1rem, 1.5rem, 3vw);
}

/* Medium screens: reduce constraints and padding */
@media (min-width: 961px) and (max-width: 1399px) {
  .content-body .viewer {
    max-width: min(1200px, calc(100vw - var(--sidebar-w) - 2rem));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* On wide screens, center the viewer on the entire page, not just the content area */
@media (min-width: 1400px) {
  .content-body .viewer {
    position: relative;
    /* Center on full viewport: left edge at 50vw - 600px (half of 1200px max-width) */
    /* Content area starts at: var(--sidebar-w) + 2rem from viewport left */
    /* So we need: left = (50vw - 600px) - (var(--sidebar-w) + 2rem) */
    left: calc(50vw - 600px - var(--sidebar-w) - 2rem);
    margin-left: 0;
    margin-right: auto;
    /* Ensure it doesn't overflow on the right */
    max-width: min(1200px, calc(100vw - 2 * clamp(1rem, 2.5rem, 5vw)));
  }
  
  /* Prevent viewer from overlapping sidebar - if calculation would shift it too far left, keep it at content start */
  @media (max-width: 1920px) {
    .content-body .viewer {
      left: max(
        calc(50vw - 600px - var(--sidebar-w) - 2rem),
        0 /* Don't shift left past content start */
      );
    }
  }
}
.content-body .viewer h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 1.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.content-body .viewer h2 {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  line-height: 1.3;
  margin: 2rem 0 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.content-body .viewer .section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0;
  box-shadow: 0 2px 8px var(--shadow-medium);
  margin: 0 0 2rem 0;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.content-body .viewer .section:hover {
  box-shadow: 0 4px 12px var(--shadow-strong);
  border-color: color-mix(in oklab, var(--accent) 20%, var(--border));
}
.content-body .viewer .card-header {
  padding: 1.75rem 2rem 1rem 2rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 50%, var(--panel));
}
.content-body .viewer .card-body {
  padding: 1.5rem 2rem 1.75rem 2rem;
}
.content-body .viewer .card-body p {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  color: var(--text);
}
.content-body .viewer .card-body ul,
.content-body .viewer .card-body ol {
  margin: 0 0 1.5rem 1.5rem;
  padding: 0;
  font-size: 1.0625rem;
}
.content-body .viewer .card-body li {
  margin: 0.5rem 0;
  line-height: 1.75;
}
.content-body .viewer .card-body li::marker {
  color: var(--muted);
}
.content-body .viewer .card-body strong {
  color: var(--text);
  font-weight: 600;
}

/* Executive summary header */
.executive-summary {
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, transparent), color-mix(in oklab, var(--accent-weak) 30%, transparent));
  border-left: 4px solid var(--accent);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px var(--shadow-medium);
}
.summary-content {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Metric header styling */
.metric-header {
  margin-bottom: 1.5rem;
}
.metric-title-with-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.metric-title-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  opacity: 0.9;
  /* Icons follow text color - use filter to match text color scheme */
  filter: brightness(0) saturate(100%);
}
@media (prefers-color-scheme: dark) {
  .metric-title-icon {
    filter: brightness(0) saturate(100%) invert(1);
  }
}
  .metric-title-with-badge .adoption-badge {
    margin-left: 0.5rem;
  }
  .level-badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    background: color-mix(in oklab, var(--muted) 15%, transparent);
    color: var(--muted);
    border: 1px solid color-mix(in oklab, var(--muted) 25%, transparent);
    margin-left: 0.5rem;
  }
.overview-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.overview-description {
  font-size: 1.125rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}
.overview-measurement {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.overview-unit-source {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.metric-description-inline {
  font-size: 1rem;
  color: var(--muted);
  font-style: italic;
}
.info-tooltip {
  cursor: help;
  font-size: 0.875rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.info-tooltip:hover {
  opacity: 1;
}
.metric-description {
  font-size: 1.125rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 1rem 0;
}
.adoption-badge {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--accent-weak);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.adoption-badge.essential {
  background: var(--adoption-essential-bg);
  color: var(--adoption-essential-color);
  border-color: var(--adoption-essential-border);
}

/* Info table - proper 4x2 table */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: color-mix(in oklab, var(--bg) 50%, var(--panel));
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  overflow: hidden;
  table-layout: fixed;
}
  .info-table.info-table-3col td {
    width: 33.333%;
  }
  .info-table td {
    padding: 1rem;
    border-right: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
    vertical-align: top;
    width: 25%;
  }
.info-table tr:last-child td {
  border-bottom: none;
}
.info-table td:last-child {
  border-right: none;
}
.info-table-label {
  display: block;
  margin-bottom: 0.5rem;
}
.info-table-value {
  display: block;
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
}

/* Legacy info-table-grid for backwards compatibility */
.info-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  background: color-mix(in oklab, var(--bg) 50%, var(--panel));
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}
.info-table-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
}
.info-table-item:last-child {
  border-bottom: none;
}

/* Legacy info grid (for backwards compatibility) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.info-label {
  font-weight: 500;
}
.info-value {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
}

/* Measurement info */
.measurement-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.measurement-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.measurement-value {
  font-size: 1rem;
  color: var(--text);
}
.formula-box {
  background: var(--accent-weak);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-top: 0.5rem;
}
.formula-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.formula {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  color: var(--accent);
  background: transparent;
  padding: 0;
  border: none;
  white-space: pre-wrap;
  word-break: break-all;
}
.trend-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.trend-label {
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid;
}
.trend-badge.trend-up {
  background: var(--trend-up-bg);
  border-color: var(--trend-up-border);
}
.trend-badge.trend-down {
  background: var(--trend-down-bg);
  border-color: var(--trend-down-border);
}
.trend-badge.trend-constant {
  background: var(--trend-constant-bg);
  border-color: var(--trend-constant-border);
}
.trend-icon {
  font-size: 1rem;
}
.trend-badge.trend-up .trend-icon {
  color: var(--trend-up-icon);
}
.trend-badge.trend-down .trend-icon {
  color: var(--trend-down-icon);
}
.trend-badge.trend-constant .trend-icon {
  color: var(--trend-constant-icon);
}
.trend-text {
  color: var(--text);
}

/* Insights content */
.insights-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}
  .trends-section h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.75rem 0;
  }
  .trend-text-simple {
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
  }
.trends-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.trend-item {
  display: flex;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  border-left: 4px solid;
  border-radius: 0.375rem;
  margin: 0;
  background: var(--accent-weak);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.trend-item.trend-stable {
  border-left-color: var(--trend-stable-color);
  background: var(--trend-stable-bg);
}
.trend-item.trend-rising {
  border-left-color: var(--trend-rising-color);
  background: var(--trend-rising-bg);
}
.trend-item.trend-dropping {
  border-left-color: var(--trend-warning-color);
  background: var(--trend-warning-bg);
}
.trend-item.trend-warning {
  border-left-color: var(--trend-warning-color);
  background: var(--trend-warning-bg);
}
.trend-item.trend-positive {
  border-left-color: var(--trend-positive-color);
  background: var(--trend-positive-bg);
}
.trend-item.trend-negative {
  border-left-color: var(--trend-negative-color);
  background: var(--trend-negative-bg);
}
.trend-item.trend-default {
  border-left-color: var(--accent);
  background: var(--accent-weak);
}
.trend-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.trend-content strong {
  display: block;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
}
.trend-explanation {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.trends-list li {
  padding: 0.75rem 1rem;
  background: var(--accent-weak);
  border-left: 3px solid var(--accent);
  border-radius: 0.375rem;
  margin: 0;
}
.trends-list li strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--accent);
}
.insights-challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.info-card, .warning-card {
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid;
}
.info-card {
  background: var(--info-card-bg);
  border-color: var(--info-card-border);
}
.warning-card {
  background: var(--warning-card-bg);
  border-color: var(--warning-card-border);
}
.info-card-header, .warning-card-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  border-bottom: 1px solid;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.info-card-header {
  background: var(--card-info-bg);
  border-color: var(--card-info-border);
  color: var(--card-info-color);
}
.warning-card-header {
  background: var(--card-warning-bg);
  border-color: var(--card-warning-border);
  color: var(--card-warning-color);
}
.info-card-body, .warning-card-body {
  padding: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.info-card-body {
  color: var(--text);
}
.warning-card-body {
  color: var(--text);
}
.insight-item {
  margin: 0;
}
.insight-item strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.insight-item p {
  margin: 0;
  color: var(--text);
}

/* Section content */
.section-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.field-group {
  margin: 0;
}
.field-group strong {
  display: block;
  margin-bottom: 0.5rem;
}
.field-group ul {
  margin-top: 0.5rem;
}

/* Metric details grid */
.metric-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.detail-label {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
.detail-value {
  font-size: 1rem;
  color: var(--text);
}

/* Related metrics */
.related-metrics-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.related-metrics-list li {
  margin: 0;
}
.related-metric-link {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: var(--accent-weak);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s ease;
}
.related-metric-link:hover {
  background: color-mix(in oklab, var(--accent-weak) 80%, var(--accent));
  border-color: var(--accent);
  color: color-mix(in oklab, var(--accent) 90%, black);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--shadow-strong);
}
.related-metric-text {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: color-mix(in oklab, var(--muted) 15%, transparent);
  color: var(--muted);
  border: 1px solid color-mix(in oklab, var(--muted) 25%, transparent);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Generic descriptive label - used for all field labels */
.descriptive-label {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Importance alignment grid - compact layout */
.importance-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  align-items: start;
}
.importance-item {
  display: contents;
}
.importance-label {
  padding-right: 0.5rem;
  white-space: nowrap;
}
.importance-value {
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Action & Communication - structured two-column layout */
.action-communication-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.action-item {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: color-mix(in oklab, var(--bg) 50%, var(--panel));
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.action-item:hover {
  box-shadow: 0 2px 8px var(--shadow-medium-alt);
  border-color: color-mix(in oklab, var(--accent) 20%, var(--border));
}
.action-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.action-content strong {
  display: block;
  margin-bottom: 0.25rem;
}
.action-content p {
  margin: 0;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Additional notes */
.additional-notes-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.notes-text {
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.dangers-callout, .tips-callout {
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid;
}
.dangers-callout {
  background: var(--danger-callout-bg);
  border-color: var(--danger-callout-border);
}
.tips-callout {
  background: var(--tip-callout-bg);
  border-color: var(--tip-callout-border);
}
.callout-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  border-bottom: 1px solid;
}
.dangers-callout .callout-header {
  background: var(--card-danger-bg);
  border-color: var(--card-danger-border);
  color: var(--card-danger-color);
}
.tips-callout .callout-header {
  background: var(--card-tip-bg);
  border-color: var(--card-tip-border);
  color: var(--card-tip-color);
}
.callout-list {
  margin: 0;
  padding: 1rem 1rem 1rem 2.5rem;
  list-style: none;
}
.callout-list li {
  margin: 0.5rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
  position: relative;
}
.callout-list li::before {
  content: '•';
  position: absolute;
  left: -1.25rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 960px) {
  /* Sidebar padding fix for mobile */
  .sidebar .list {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .level-metrics {
    padding-left: 0;
  }
  .metric-item {
    margin-left: 0;
    margin-right: 0;
  }
  .metric-item::before {
    width: 3px;
  }
  
  /* Content area adjustments */
  .content-body .viewer {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Headers */
  .content-body .viewer h1 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }
  .content-body .viewer h2 {
    font-size: 1.375rem;
    margin: 1.5rem 0 0.75rem;
  }
  
  /* Card padding */
  .content-body .viewer .card-header {
    padding: 1.25rem 1rem 0.75rem 1rem;
  }
  .content-body .viewer .card-body {
    padding: 1rem;
  }
  
  /* Metric title with badges */
  .metric-title-with-badge {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
  }
  .metric-title-with-badge .adoption-badge,
  .metric-title-with-badge .level-badge {
    margin-left: 0;
    flex-shrink: 0;
  }
  
  /* Overview content */
  .overview-content {
    gap: 1.5rem;
  }
  .overview-description {
    font-size: 1rem;
  }
  
  /* Tables - convert to card layout on mobile */
  .info-table {
    display: block;
    border: none;
    background: transparent;
  }
  .info-table tbody {
    display: block;
  }
  .info-table tr {
    display: block;
    background: color-mix(in oklab, var(--bg) 50%, var(--panel));
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0;
    overflow: hidden;
  }
  .info-table tr:last-child {
    margin-bottom: 0;
  }
  .info-table td {
    display: block;
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
    padding: 0.75rem 1rem;
    margin: 0;
  }
  .info-table td:last-child {
    border-bottom: none;
  }
  .info-table-label {
    margin-bottom: 0.25rem;
  }
  .info-table-value {
    font-size: 0.9375rem;
  }
  
  /* Formula box */
  .formula-box {
    padding: 0.875rem 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .formula {
    font-size: 0.875rem;
    word-break: break-word;
    white-space: pre-wrap;
  }
  
  /* Trend wrapper */
  .trend-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .trend-badge {
    width: 100%;
    justify-content: center;
  }
  
  /* Importance grid - stack on mobile */
  .importance-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .importance-label {
    padding-right: 0;
    white-space: normal;
    margin-bottom: 0.25rem;
  }
  .importance-value {
    font-size: 0.9375rem;
  }
  
  /* Action & Communication - stack cards */
  .action-communication-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .action-item {
    padding: 1rem;
  }
  
  /* Insights challenges grid - stack */
  .insights-challenges-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Trends list */
  .trend-item {
    padding: 0.75rem;
  }
  
  /* Related metrics - wrap better */
  .related-metrics-list ul {
    gap: 0.375rem;
  }
  .related-metric-link,
  .related-metric-text {
    font-size: 0.8125rem;
    padding: 0.3125rem 0.75rem;
  }
  
  /* Badges - touch friendly */
  .adoption-badge,
  .level-badge {
    font-size: 0.8125rem;
    padding: 0.3125rem 0.75rem;
  }
  .trend-badge {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.875rem;
  }
  
  /* Metric details grid - stack */
  .metric-details-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  /* Info grid - stack */
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  /* Info table grid - stack */
  .info-table-grid {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }
  
  /* Section spacing */
  .content-body .viewer .section {
    margin-bottom: 1.5rem;
  }
  
  /* Executive summary */
  .executive-summary {
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
  }
  .summary-content {
    font-size: 0.875rem;
  }
  
  /* Callouts */
  .dangers-callout,
  .tips-callout {
    margin-top: 1rem;
  }
  .callout-header {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
  }
  .callout-list {
    padding: 0.875rem 0.875rem 0.875rem 2rem;
  }
  .callout-list li {
    font-size: 0.875rem;
  }
  
  /* Overview measurement */
  .overview-measurement {
    gap: 0.75rem;
  }
  
  /* Card body text */
  .content-body .viewer .card-body p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .content-body .viewer .card-body ul,
  .content-body .viewer .card-body ol {
    font-size: 1rem;
    margin-left: 1.25rem;
  }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
  .content-body .viewer {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .content-body .viewer h1 {
    font-size: 1.5rem;
  }
  .content-body .viewer h2 {
    font-size: 1.25rem;
  }
  
  .content-body .viewer .card-header {
    padding: 1rem 0.75rem 0.625rem 0.75rem;
  }
  .content-body .viewer .card-body {
    padding: 0.875rem 0.75rem;
  }
  
  .formula-box {
    padding: 0.75rem;
  }
  .formula {
    font-size: 0.8125rem;
  }
  
  .info-table td {
    padding: 0.625rem 0.75rem;
  }
  
  .action-item {
    padding: 0.875rem;
  }
  
  .trend-item {
    padding: 0.625rem;
  }
}