/* KabobMenu.css */

/* Kabob Menu */
.kabob-container {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-sm));
  right: var(--space-sm);
  z-index: 1100; /* AppBar level - below modals (1300) but above other content */
  visibility: visible !important; /* Force visibility during resize */
  will-change: transform; /* Optimize for position changes */
  pointer-events: auto;
}

/* Tablet and Above - Adjust for app-frame padding */
@media (min-width: 768px) {
  .kabob-container {
    top: var(--space-md);
    right: var(--space-md);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Kabob Menu Items */
.kabob-menu-item {
  transition: color 0.2s ease;
}

.kabob-menu-item svg {
  transition: color 0.2s ease;
}

.kabob-menu-item:hover svg {
  color: var(--semantic-accent-a);
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}/* ScrollGradients.css - Scroll indicator lines */

.scroll-gradient {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.3s ease-in-out;
}

.scroll-gradient--top {
  top: 0;
  height: 7px;
  background: linear-gradient(to bottom, var(--color-bg-alt) 0%, var(--color-bg-alt) 4px, var(--color-border) 4px, var(--color-border) 7px);
}

.scroll-gradient--bottom {
  bottom: 0;
  height: 7px;
  background: linear-gradient(to top, var(--color-bg-alt) 0%, var(--color-bg-alt) 4px, var(--color-border) 4px, var(--color-border) 7px);
}
.rc-slider {
  position: relative;
  width: 100%;
  height: 14px;
  padding: 5px 0;
  border-radius: 6px;
  touch-action: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #e9e9e9;
  border-radius: 6px;
}
.rc-slider-track,
.rc-slider-tracks {
  position: absolute;
  height: 4px;
  background-color: #abe2fb;
  border-radius: 6px;
}
.rc-slider-track-draggable {
  z-index: 1;
  box-sizing: content-box;
  background-clip: content-box;
  border-top: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid rgba(0, 0, 0, 0);
  transform: translateY(-5px);
}
.rc-slider-handle {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background-color: #fff;
  border: solid 2px #96dbfa;
  border-radius: 50%;
  cursor: pointer;
  cursor: -webkit-grab;
  cursor: grab;
  opacity: 0.8;
  user-select: none;
  touch-action: pan-x;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
  border-color: #57c5f7;
  box-shadow: 0 0 0 5px #96dbfa;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging-delete {
  opacity: 0;
}
.rc-slider-handle:focus {
  outline: none;
  box-shadow: none;
}
.rc-slider-handle:focus-visible {
  border-color: #2db7f5;
  box-shadow: 0 0 0 3px #96dbfa;
}
.rc-slider-handle-click-focused:focus {
  border-color: #96dbfa;
  box-shadow: unset;
}
.rc-slider-handle:hover {
  border-color: #57c5f7;
}
.rc-slider-handle:active {
  border-color: #57c5f7;
  box-shadow: 0 0 5px #57c5f7;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.rc-slider-mark {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  font-size: 12px;
}
.rc-slider-mark-text {
  position: absolute;
  display: inline-block;
  color: #999;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.rc-slider-mark-text-active {
  color: #666;
}
.rc-slider-step {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
}
.rc-slider-dot {
  position: absolute;
  bottom: -2px;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  background-color: #fff;
  border: 2px solid #e9e9e9;
  border-radius: 50%;
  cursor: pointer;
}
.rc-slider-dot-active {
  border-color: #96dbfa;
}
.rc-slider-dot-reverse {
  margin-right: -4px;
}
.rc-slider-disabled {
  background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
  background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
  background-color: #fff;
  border-color: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
  cursor: not-allowed !important;
}
.rc-slider-vertical {
  width: 14px;
  height: 100%;
  padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
  width: 4px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-track {
  bottom: 0;
  left: 5px;
  width: 4px;
}
.rc-slider-vertical .rc-slider-track-draggable {
  border-top: 0;
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  transform: translateX(-5px);
}
.rc-slider-vertical .rc-slider-handle {
  position: absolute;
  z-index: 1;
  margin-top: 0;
  margin-left: -5px;
  touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
  top: 0;
  left: 18px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-step {
  width: 4px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-dot {
  margin-left: -2px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  display: block !important;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
  display: block !important;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
  animation-name: rcSliderTooltipZoomDownIn;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
  animation-name: rcSliderTooltipZoomDownOut;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  transform: scale(0, 0);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
  0% {
    transform: scale(0, 0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 50% 100%;
  }
}
@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform: scale(1, 1);
    transform-origin: 50% 100%;
  }
  100% {
    transform: scale(0, 0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
}
.rc-slider-tooltip {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: visible;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
  display: none;
}
.rc-slider-tooltip-placement-top {
  padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
  min-width: 24px;
  height: 24px;
  padding: 6px 2px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #6c6c6c;
  border-radius: 6px;
  box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  bottom: 4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-top-color: #6c6c6c;
}
/* frontend/src/styles/report.css */
/* NOTE: No @import here. Global CSS is loaded in main.css/main.jsx. */
.report-container {
  padding: var(--space-4, 16px);
}
/* ========== Header layout ========== */
.report-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title actions"
    "toc   actions";
  gap: var(--space-3, 12px) var(--space-4, 16px);
  align-items: center;
  margin-bottom: var(--space-4, 16px);
}
.report-header__title {
  grid-area: title;
  min-width: 0; /* allow truncation */
}
.report-header__actions {
  grid-area: actions;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  justify-self: end;
  flex-wrap: wrap; /* gracefully wrap before the breakpoint */
}
.report-title {
  margin: 0;
  font-size: clamp(var(--font-size-lg, 20px), 2.5vw, var(--font-size-2xl, 30px));
  line-height: var(--line-height-tight, 1.2);
  color: var(--color-text, var(--semantic-foreground));
}
.report-meta {
  margin-top: var(--space-1, 4px);
  font-size: var(--font-size-sm, 14px);
  color: var(--semantic-muted);
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}
/* Table of contents under the title */
.report-toc {
  grid-area: toc;
  margin-top: var(--space-2, 8px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px) var(--space-3, 12px);
}
.report-toc__link {
  text-decoration: none;
  color: var(--semantic-accent-a);
}
.report-toc__link:hover,
.report-toc__link:focus {
  text-decoration: underline;
  outline: none;
}
/* ========== Toasts (soft palette) ========== */
.report-toast {
  margin-bottom: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: 6px;
  font-size: 0.95rem;
  border: 1px solid var(--color-border, var(--semantic-gridline));
  box-shadow: var(--shadow-sm);
}
.report-toast--info {
  background: color-mix(in srgb, var(--semantic-accent-a) 18%, white);
  color: color-mix(in srgb, var(--semantic-accent-a) 65%, black);
}
.report-toast--error {
  background: color-mix(in srgb, var(--semantic-danger) 12%, white);
  color: color-mix(in srgb, var(--semantic-danger) 80%, black);
}
/* ========== Loading / error blocks ========== */
.report-loading { padding: var(--space-4, 16px); }
.report-error {
  color: var(--semantic-danger);
  padding: var(--space-3, 12px);
  border-radius: 6px;
  background: color-mix(in srgb, var(--semantic-danger) 10%, white);
  border: 1px solid color-mix(in srgb, var(--semantic-danger) 40%, var(--semantic-gridline));
}
/* Optional: wrapper if you render the export button standalone */
.report-export-btn { display: inline-flex; align-items: center; }
/* ========== Responsive behavior ========== */
@media (max-width: 640px) {
  .report-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "actions"
      "toc";
    align-items: start;
  }
  .report-header__actions {
    justify-self: start;
    width: 100%;
    gap: var(--space-2, 8px);
  }
  /* If you want full-width actions on narrow phones, uncomment:
  .report-header__actions > * { width: 100%; }
  */
}
/* ========== Print: hide interactive controls and TOC links ========== */
@media print {
  .report-header__actions,
  .report-toast,
  .report-toc { display: none !important; }
}
/* A11y utility */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; clip-path: inset(50%);
  border: 0; padding: 0; margin: -1px;
}
/* Placeholder */
.report-tab-placeholder { opacity: 0.7; }/* Ultra-Compact Static Survey Viewer Styles */

.static-survey-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  /* Ensure it fills AppFrame properly */
  flex: 1;
  min-height: 0;
  /* Smooth entry animation */
  animation: fadeSlideIn 0.3s ease-out;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header - Fixed */
.viewer-header {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border-bottom: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.header-actions {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.viewer-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
}

.viewer-controls {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 6px 12px;
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.15s;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.expand-collapse-btn {
  padding: 6px 12px;
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: var(--color-bg-panel);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.expand-collapse-btn:hover {
  background: var(--color-hover);
  border-color: var(--palette-neutral-400, #9ca3af);
}

.domain-count {
  font-size: var(--font-size-sm);
  color: var(--semantic-muted);
  white-space: nowrap;
}

.btn-back,
.btn-report {
  padding: 4px 8px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--color-primary);
  text-decoration: none;
}

.btn-back:hover,
.btn-report:hover {
  background: var(--color-hover);
  text-decoration: underline;
}

/* Content - Scrollable (managed by ScrollGradients) */
.viewer-content {
  /* Overflow and positioning handled by inline styles in component */
}

.viewer-content-inner {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Domain Group - Top-level collapsible container */
.domain-group {
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-md);
  overflow: visible;
  background: var(--color-bg);
}

.domain-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 16px;
  background: color-mix(in srgb, var(--color-bg-panel) 50%, var(--color-bg));
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  touch-action: manipulation;
  border-radius: var(--radius-md);
}

.domain-header:hover {
  background: var(--color-hover);
}

.domain-header.expanded {
  background: color-mix(in srgb, var(--color-bg-panel) 50%, var(--color-bg));
  border-bottom: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-md) 6px 0 0;
}

.domain-toggle {
  font-size: var(--font-size-sm);
  color: var(--semantic-muted);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.domain-info {
  flex: 1;
  min-width: 0;
}

.domain-name {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-question-count {
  padding: 3px 8px;
  background: var(--semantic-muted);
  color: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.domain-nodes {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Node Section - Collapsible (nested under domain) */
.node-section {
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-sm);
  overflow: visible;
  background: var(--color-bg);
  touch-action: auto;
}

.node-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-bg-panel) 30%, var(--color-bg));
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  touch-action: manipulation;
}

.node-header:hover {
  background: var(--color-hover);
}

.node-header.expanded {
  background: color-mix(in srgb, var(--color-bg-panel) 30%, var(--color-bg));
  border-bottom: 1px solid var(--semantic-gridline);
}

.node-toggle {
  font-size: var(--font-size-xs);
  color: var(--semantic-muted);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.node-info {
  flex: 1;
  min-width: 0;
}

.node-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-count {
  padding: 2px 6px;
  background: var(--semantic-muted);
  color: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  flex-shrink: 0;
}

/* Node Content */
.node-content {
  padding: var(--space-2) var(--space-3) 12px;
}

.node-description {
  margin: 0 0 12px;
  padding: var(--space-2) 10px;
  background: color-mix(in srgb, var(--color-bg-panel) 40%, var(--color-bg));
  border-left: 3px solid var(--semantic-gridline);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  border-radius: var(--radius-sm);
}

/* Questions List - Table-like compact layout */
.questions-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--semantic-gridline);
  border-radius: var(--radius-sm);
  overflow: visible;
}

/* Ultra-Compact Question Display - Horizontal Layout */
.question-compact {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  transition: all 0.15s;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: start;
}

.question-compact:hover {
  background: var(--color-hover);
}

.question-compact.clickable:hover {
  background: var(--color-hover);
}

.question-compact.highlighted {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
  padding-left: 7px;
}

.question-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.q-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 4px;
  background: var(--color-bg);
  color: var(--semantic-muted);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
}

.q-text {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  line-height: var(--line-height-normal);
  flex: 1 1 auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.expand-indicator {
  font-size: var(--font-size-xs);
  color: var(--semantic-muted);
  margin-left: 4px;
  flex-shrink: 0;
}

.question-answer {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  max-width: 250px;
}

/* Options Display Container */
.options-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Selected Options as Tiny Badges */
.selected-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: flex-end;
  max-width: 250px;
}

.unselected-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: flex-end;
}

.option-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  transition: all 0.15s;
}

.option-badge.selected {
  background: var(--semantic-accent-a);
  color: white;
  font-weight: 600;
}

.option-badge.unselected {
  background: color-mix(in srgb, var(--semantic-muted) 30%, var(--color-bg));
  color: var(--color-text);
  border: 1px solid var(--semantic-gridline);
}

.option-badge.highlighted {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Direct Answer (for non-select questions) */
.direct-answer {
  display: inline-block;
  padding: 2px 6px;
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  white-space: nowrap;
}

.no-selection {
  color: var(--semantic-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
}

.no-results {
  padding: var(--space-4);
  text-align: center;
  color: var(--semantic-muted);
  font-size: var(--font-size-sm);
}

/* Error State */
.static-survey-error {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px;
  text-align: center;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: 20px;
}

.btn-primary,
.btn-secondary {
  padding: var(--space-2) 16px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

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

.btn-secondary {
  background: var(--color-bg-panel);
  border-color: var(--semantic-gridline);
  color: var(--color-text);
}

.btn-secondary:hover {
  background: var(--color-hover);
  border-color: var(--palette-neutral-400, #9ca3af);
}

/* Responsive */
@media (max-width: 768px) {
  .viewer-header {
    padding: var(--space-2);
  }

  .viewer-content {
    padding: var(--space-2);
  }

  .viewer-title {
    font-size: var(--font-size-md);
  }

  .viewer-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    min-width: 100%;
  }

  .expand-collapse-btn {
    width: 100%;
  }

  .node-info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  /* Domain header - more compact on mobile */
  .domain-header {
    gap: var(--space-2);
    padding: var(--space-2) 12px;
  }

  /* Allow domain name to wrap on mobile */
  .domain-name {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    overflow: visible;
    text-overflow: clip;
  }

  /* Make domain info section take available space and constrain overflow */
  .domain-info {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  /* Ensure question count doesn't wrap and stays on right */
  .domain-question-count {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .node-name {
    white-space: normal;
  }

  .question-compact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .question-answer {
    max-width: 100%;
    padding-left: 0;
  }

  .header-actions {
    flex-wrap: wrap;
  }
}

/* Print Support */
@media print {
  .header-actions,
  .btn-back,
  .btn-report {
    display: none;
  }

  .node-header {
    page-break-after: avoid;
  }

  .node-section {
    page-break-inside: avoid;
  }

  .question-compact {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Expand all nodes for printing - !important needed to override inline styles */
  .node-content {
    display: block !important;
  }
}
/* src/components/common/ExpandableText.css */

.expandable-text {
  margin-bottom: 0;
}

.expandable-text-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.expandable-text-header.clickable {
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
}

.expandable-text-header.clickable:focus {
  outline: none;
}

.expandable-text-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
  color: var(--semantic-accent-a);
  flex: 1;
}

.expandable-text-wrapper {
  position: relative;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.expandable-text-wrapper.collapsed {
  position: relative;
}

.expandable-text-wrapper.expanded {
  max-height: none !important;
}

.expandable-text-wrapper.clickable {
  user-select: none;
}

/* Only show pointer cursor when collapsed (expand on click) */
.expandable-text-wrapper.clickable.collapsed {
  cursor: pointer;
}

.expandable-text-wrapper.clickable.collapsed:hover {
  opacity: 0.95;
}

/* When expanded, show default cursor (double-click to collapse) */
.expandable-text-wrapper.clickable.expanded {
  cursor: default;
}

.expandable-text-wrapper.clickable:focus {
  outline: none;
}

.expandable-text-content {
  line-height: var(--line-height-normal);
  color: var(--semantic-foreground);
  margin-top: 0;
  padding-top: 0;
}

.expandable-text-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.expandable-text-content p {
  margin: 0 0 var(--space-2) 0;
  padding: 0;
}

.expandable-text-content p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.expandable-text-content p:last-child {
  margin-bottom: 0;
}

.expandable-text-content ul {
  margin: 0 0 var(--space-md) 0;
  padding-left: var(--space-lg);
  list-style-type: disc;
  list-style-position: outside;
}

.expandable-text-content ul li {
  margin-bottom: var(--space-2);
  line-height: var(--line-height-normal);
}

.expandable-text-content ul:last-child {
  margin-bottom: 0;
}

/* Evidence ref links should always be clickable */
.expandable-text-content .evidence-ref-link {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: auto;
}

/* Fade out effect at bottom when collapsed */
.expandable-text-overflow-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #394150);
  pointer-events: none;
}

/* Toggle button - positioned in header upper-right */
.expandable-text-toggle {
  font-size: var(--font-size-xl);
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: var(--semantic-accent-a);
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.expandable-text-toggle:hover {
  opacity: 0.7;
}

.expandable-text-toggle:active {
  transform: scale(0.95);
}

.expandable-text-toggle:focus {
  outline: 2px solid var(--focus-color, #1976d2);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Dark mode is handled by CSS variables - no media query needed */

/* Responsive adjustments */
@media (max-width: 768px) {
  .expandable-text-title {
    font-size: var(--font-size-lg);
  }

  .expandable-text-toggle {
    font-size: var(--font-size-lg);
  }
}

/* Print styles - always show expanded */
@media print {
  .expandable-text-wrapper {
    max-height: none !important;
    overflow: visible !important;
  }

  .expandable-text-overflow-line,
  .expandable-text-toggle {
    display: none !important;
  }
}
/* ExecutiveSummary.css */

.executive-summary {
  width: 100%;
}

/* Loading state */
.executive-summary-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--semantic-gridline);
  border-top-color: var(--semantic-accent-a);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Error state */
.executive-summary-error {
  padding: 24px;
  text-align: center;
  color: var(--semantic-danger);
}

/* No data state */
.executive-summary-no-data {
  padding: 24px;
  text-align: center;
  color: var(--semantic-muted);
}

/* Metrics Grid - Responsive */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Always 3 columns for the 3 donut charts */
  gap: var(--space-md);
  /*margin-bottom: var(--space-lg);*/
  max-width: 100%;
  width: 100%;
}

/* Mobile: Reduce gap to prevent overflow */
@media (max-width: 480px) {
  .metrics-grid {
    gap: var(--space-1);
  }
}

/* Tablet and up: Increase gap */
@media (min-width: 768px) {
  .metrics-grid {
    gap: var(--space-lg);
  }
}

/* Large Desktop: Even more gap */
@media (min-width: 1600px) {
  .metrics-grid {
    gap: var(--space-xl);
  }
}

.metric-tile {
  background-color: #3A414F !important;
  border-radius: var(--radius-md);
  border: 1px solid var(--semantic-gridline) !important;
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
  padding: var(--space-3);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: auto; /* Let content determine height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-1);
  overflow: visible;
  max-width: 100%;
  position: relative; /* For absolute positioning of help toggle and subtitle */
}

.metric-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background-color: #3A414F;
}

/* Disable hover effects while loading */
.metric-tile--loading {
  pointer-events: none; /* Disable all interactions */
  opacity: 0.6; /* Visual indicator that it's loading */
}

.metric-tile--loading:hover {
  transform: none !important;
  box-shadow: none !important;
  background-color: var(--color-bg-tile) !important;
}

.metric-tile * {
  cursor: pointer !important;
}

.metric-tile--loading * {
  cursor: default !important; /* Override cursor during loading */
}

.metric-chart {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow: visible;
  padding-top: var(--space-2);
  min-height: auto; /* Let content determine height */
  padding-bottom: 42px; /* Reduced from 50px for tighter spacing */
}

.metric-label {
  position: absolute;
  bottom: var(--space-2); /* Reduced from space-3 for tighter spacing */
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--semantic-foreground);
  white-space: nowrap;
}

/* Donut category label (subtitle that appears on hover) */
.donut-category-label {
  position: absolute;
  bottom: var(--space-7); /* Reduced from space-8 for tighter spacing */
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-xs);
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  pointer-events: none; /* Don't interfere with clicks */
}

/* Summary Section */
.summary-section {
  background-color: #394150 !important;
  border-radius: var(--radius-md);
  border: 1px solid var(--semantic-gridline);
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
  padding: var(--space-3);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
  color: var(--semantic-foreground);
}

.summary-content {
  color: var(--semantic-foreground);
}

.summary-content p {
  margin-bottom: var(--space-md);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-md);
}

.summary-content .evidence-ref-link {
  cursor: pointer;
  color: var(--semantic-accent-a);
  font-weight: 500;
}

.summary-content .evidence-ref-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* Recommendations Section */
.recommendations-section {
  background-color: var(--color-bg-panel);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.recommendations-list {
  padding-left: var(--space-md);
  margin: 0;
  list-style-type: decimal;
}

.recommendation-item {
  margin-bottom: var(--space-3);
}

.recommendation-item::marker {
  font-weight: 600;
  color: var(--semantic-accent-a);
}

.recommendation-content {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  flex-wrap: wrap;
}

.recommendation-text {
  line-height: var(--line-height-normal);
  font-size: var(--font-size-sm);
  cursor: pointer;
  flex: 1;
  color: var(--semantic-foreground);
}

.recommendation-text:hover {
  color: var(--semantic-accent-a);
  text-decoration: underline;
}

.no-data-message {
  font-size: 0.875rem;
  color: var(--semantic-muted);
  font-style: italic;
  margin: 0;
}

/* Domain Summary Cards */
.domain-summary-card {
  background-color: #394150 !important;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--semantic-gridline);
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
}

.domain-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background-color: #3A414F;
  border-color: var(--semantic-accent-a);
}

.domain-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
}

.domain-summary-maturity {
  padding: var(--space-1) var(--space-2);
  background-color: var(--semantic-surface-elevated);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.domain-key-findings {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--semantic-muted);
}

.domain-key-findings li {
  margin-bottom: var(--space-1);
}

/* Mobile Responsive adjustments */
@media (max-width: 768px) {
  /* Tighter spacing for domain sections */
  .summary-section {
    padding: var(--space-2);
  }

  .section-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--space-1);
  }

  .summary-content p {
    margin-bottom: var(--space-2);
  }

  .metric-tile {
    padding: var(--space-1);
    min-height: 160px;
    overflow: visible;
    max-width: 100%;
  }

  .metric-chart {
    padding-top: var(--space-2);
    padding-bottom: 36px; /* Further reduced for mobile */
    overflow: visible;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Scale down donuts on mobile to fit better */
  .metric-chart svg {
    width: 100px !important;
    height: 100px !important;
    max-width: 100%;
  }

  .donut-center-content {
    width: 100px;
    height: 100px;
  }

  .donut-center-value {
    font-size: 20px;
  }

  .donut-center-percentage {
    font-size: 11px;
  }

  .metric-label {
    font-size: 11px;
    margin-top: 0;
    bottom: var(--space-1);
  }

  .donut-category-label {
    font-size: 10px;
    bottom: var(--space-6); /* Adjust for smaller overall height */
  }

  /* Reposition help toggle on mobile to avoid overlap */
  .metric-tile-help-toggle {
    font-size: 1.2rem;
    top: var(--space-1);
    right: var(--space-1);
    padding: 2px;
  }

  .section-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
  }

  .summary-content p {
    margin-bottom: var(--space-3);
    line-height: 1.6;
    font-size: var(--font-size-sm);
  }

  .summary-section,
  .recommendations-section {
    padding: var(--space-3);
  }

  .domain-summary-header {
    flex-direction: column;
    gap: var(--space-2);
  }

  .domain-summary-maturity {
    align-self: flex-start;
  }
}

/* Help toggle icon - positioned in upper-right of tile */
.metric-tile-help-toggle {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--semantic-accent-a);
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}

.metric-tile-help-toggle:hover {
  color: var(--semantic-accent-a-hover, var(--semantic-accent-a));
  transform: scale(1.1);
}

.metric-tile-help-toggle:focus {
  outline: none;
}
/* src/components/report/ReportViewer.css */

.report-viewer {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Prevent draggable/detached content on touch devices */
.report-viewer * {
  overscroll-behavior: contain;
}

/* Allow vertical scrolling only in main content areas */
.report-viewer [role="tabpanel"] {
  touch-action: pan-y;
  overflow-x: hidden;
  max-width: 100%;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Highlight flash animation for risk navigation */
@keyframes highlight-flash {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: var(--semantic-accent-a, #2C5F2D);
    opacity: 0.2;
  }
}

.highlight-flash {
  animation: highlight-flash 2s ease-in-out;
}

/* Responsive Design */
@media (max-width: 768px) {
  .report-viewer {
    font-size: 0.9rem;
  }
}

/* Print Styles */
@media print {
  /* Hide tabs and search when printing */
  .MuiTabs-root,
  .MuiTextField-root {
    display: none !important;
  }

  .report-viewer {
    max-width: none;
  }

  /* Show all tab content when printing */
  [role="tabpanel"] {
    display: block !important;
  }

  /* Page break controls */
  .MuiAccordion-root,
  .MuiPaper-root {
    page-break-inside: avoid;
  }

  table {
    page-break-inside: avoid;
  }

  figure {
    page-break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
}
/* src/components/ReportPage.css */

.report-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  flex: 1;
}

.report-page__header {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.report-page__content {
  flex: 1;
  min-height: 0;
}

.report-page__back-button {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.report-page__back-button:hover {
  background: var(--button-hover-bg);
  color: var(--color-text);
}

.report-page__back-button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .report-page__header {
    padding: 0.5rem 0.75rem;
  }

  .report-page__back-button {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
  }
}
/* admin-tables.css */

/* Make the admin page itself scrollable, but hide the scrollbars */
.admin-root {
  padding-inline: 12px;
  padding-block: 12px;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS momentum */
  overscroll-behavior: contain;
  scrollbar-width: none;             /* Firefox: hide */
}
.admin-root::-webkit-scrollbar {     /* WebKit: hide */
  width: 0;
  height: 0;
}

.admin-root h2 {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
}

.admin-page {
  display: grid;
  gap: 16px;
  padding-block: 0;
}

/* Card wrapper for a table */
.table-card {
  background: var(--sem-background);
  border: 1px solid var(--sem-gridline);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  min-height: 180px;
  overflow: hidden;
  /* ensure inner scroll area defines the clipping context */
}

/* Optional: different heights per section - desktop only */
@media (min-width: 769px) {
  .table-card--accounts { max-height: 40vh; }
  .table-card--surveys  { max-height: 55vh; }
}

.table-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sem-gridline);
}

.table-card__header h5 {
  margin: 0;
  font-size: 1.1rem;
}
.table-card__header .actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-card__header .actions > * { white-space: nowrap; }

/*.table-card__scroll {*/
/*  !* The magic: only this area scrolls *!*/
/*  overflow: auto;*/
/*  flex: 1;*/
/*  !* allow flex child to actually shrink in a flex column parent *!*/
/*  min-height: 0;*/
/*  !* keep scrollbar space reserved to avoid layout shift *!*/
/*  scrollbar-gutter: stable;*/
/*}*/

/* Keep the table body scrollable, but also hide its scrollbars */
.table-card__scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* Firefox */
  scrollbar-gutter: stable;          /* reserve space to avoid layout shift */
}
.table-card__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Base table styles */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table th,
.table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--sem-gridline);
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0.875rem;
}

.table th {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-text-secondary);
  background: var(--color-bg-panel);
}

.table tbody td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 0; /* allow ellipsis in grid cells */
}

/* Sticky header */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-panel);
}

/* Optional: make first/last cells look nicer */
.table thead th:first-child { border-top-left-radius: 8px; }
.table thead th:last-child  { border-top-right-radius: 8px; }
.table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.table tbody tr:last-child td:last-child  { border-bottom-right-radius: 8px; }

/* ========================================
   RESPONSIVE TABLE UTILITIES
   ======================================== */

/* Responsive table wrapper - enables horizontal scroll on mobile */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* Mobile-optimized table behavior */
@media (max-width: 768px) {
  /* Allow horizontal scrolling for tables */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent table from forcing viewport width - except assessments table which should be flexible */
  .table:not(.table-assessments) {
    min-width: max-content;
  }

  /* Allow assessments table to shrink on mobile */
  .table-assessments {
    min-width: 100%;
    width: 100%;
  }

  /* Make text in cells wrap on mobile if needed */
  .table td.wrap-mobile,
  .table th.wrap-mobile {
    white-space: normal;
    word-wrap: break-word;
    min-width: 80px;
    max-width: 150px;
  }

  /* Allow specific columns to shrink more aggressively */
  .table .col-shrink-mobile {
    width: 1%;
    white-space: nowrap;
  }

  /* Hide less important columns on mobile */
  .table .hide-mobile,
  .table th.hide-mobile,
  .table td.hide-mobile {
    display: none !important;
  }

  /* Make assessments table responsive */
  .table-assessments {
    table-layout: auto !important;
    width: 100% !important;
  }

  /* Icon column - compact */
  .table-assessments .col-icon {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 4px !important;
  }

  /* Name column - allow wrapping, flexible width */
  .table-assessments .col-name {
    white-space: normal !important;
    word-break: break-word !important;
    min-width: 80px !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Status column - compact */
  .table-assessments .col-status {
    min-width: 60px !important;
    max-width: 80px !important;
    width: auto !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Last Updated column - compact, allow wrapping */
  .table-assessments .col-updated {
    min-width: 60px !important;
    max-width: 90px !important;
    width: auto !important;
    white-space: normal !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 0.75rem !important;
  }
}

/* Compact variant for mobile */
@media (max-width: 720px) {
  .table th, .table td {
    padding: 6px 8px;
    font-size: 0.8125rem;
  }

  /* Remove max-height on mobile - let tables expand naturally */
  .table-card {
    max-height: none;
  }

  /* Tighter spacing in card headers */
  .table-card__header {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .table-card__header h5 {
    font-size: 1rem;
  }
}/* Delegation Manager Specific Styles */

.delegation-manager {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* Domain Header Row - matches node header layout */
.domain-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-panel);
  border-bottom: 2px solid var(--color-primary);
  font-weight: 600;
  position: relative;
}

.domain-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
}

/* Domain Delegations Row - separate row below domain header */
.domain-delegations-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-panel);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Workload Summary */
.workload-summary {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-panel);
  border-radius: var(--radius-md);
  border: 1px solid var(--semantic-gridline);
}

.workload-item {
  min-width: 180px;
  padding: var(--space-2);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--semantic-gridline);
}

/* Node Section - Clean Card Layout */
.delegation-node {
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.delegation-node:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Domain-level node styling */
.domain-level-node {
  border: 2px solid var(--color-primary);
  background: var(--color-bg);
}

.domain-level-node .node-header-row {
  background: var(--color-bg-panel);
  font-weight: 600;
}

/* Child nodes container */
.child-nodes-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  padding-right: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Node Header Row - single row with all controls */
.node-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
}

.expand-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}

.expand-button:hover {
  color: var(--color-primary);
}

.node-name {
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
}

.child-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: var(--color-bg-panel);
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Node Delegations Row - separate row below header for delegations */
.node-delegations-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  padding-top: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.delegations-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.inherited-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

.unassigned-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Legacy styles removed - new clean card layout in use */

.question-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: var(--color-bg-panel);
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  min-width: 32px;
}

.delegation-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Assign Button */
.btn-assign {
  padding: 4px 12px;
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--color-primary);
  color: white;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-assign:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-assign:active {
  transform: translateY(0);
}

/* Delegation Badge */
.delegation-badge-container {
  position: relative;
  display: inline-block;
}

.delegation-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 8px;
  background: var(--color-bg-panel);
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  flex-shrink: 0;
  min-width: 0;
  white-space: nowrap;
}

/* Hover effects removed for mobile compatibility */

.btn-delete-delegation,
.btn-replace-delegation {
  padding: 0;
  width: 16px;
  height: 16px;
  border: none;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.btn-delete-delegation {
  background: var(--semantic-error);
}

.btn-replace-delegation {
  background: var(--color-primary);
  font-size: 12px;
}

/* Hover effect removed for mobile compatibility */

/* Sub-delegation styling */
.delegation-badge.subdelegation {
  margin-left: var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-panel);
}

/* Assignment Panel */
.assignment-panel {
  padding: var(--space-3);
  background: var(--color-bg-panel);
  border-top: 1px solid var(--semantic-gridline);
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-picker,
.email-input,
.name-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.15s;
}

.user-picker:focus,
.email-input:focus,
.name-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.user-picker:disabled,
.email-input:disabled,
.name-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.notes-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  resize: vertical;
  transition: border-color 0.15s;
}

.notes-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.notes-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button Styles */
.btn-primary,
.btn-secondary {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--color-bg-panel);
  border-color: var(--semantic-gridline);
  color: var(--color-text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-hover);
  border-color: var(--palette-neutral-400, #9ca3af);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Delegation List (for domain-level) */
.delegation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Responsive */
@media (max-width: 768px) {
  /* Domain header - stack vertically on mobile */
  .domain-header-container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .domain-toggle-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .domain-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .domain-question-count {
    font-size: var(--font-size-sm);
  }

  /* Node sections - ensure proper stacking */
  .node-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .delegations-list {
    width: 100%;
    justify-content: flex-start;
  }

  .delegation-controls {
    justify-content: flex-start;
    width: 100%;
  }

  /* Make badges smaller and wrap */
  .delegation-badge {
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    padding: 3px 6px;
  }

  /* Assignment panel - full width */
  .assignment-panel {
    padding: var(--space-2);
  }

  /* Button groups - stack on very small screens */
  .btn-assign {
    font-size: var(--font-size-xs);
    padding: 4px 8px;
  }

  .workload-summary {
    padding: var(--space-2);
  }

  .workload-item {
    min-width: 100%;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .domain-toggle-btn {
    font-size: var(--font-size-sm);
  }

  .node-name {
    font-size: var(--font-size-sm);
  }

  /* Hide less critical info on very small screens */
  .domain-question-count {
    display: none;
  }

  /* Compact delegation badges */
  .delegation-badge {
    font-size: 0.65rem;
  }

  .delegation-controls {
    gap: var(--space-1);
  }
}
/* Cookie consent banner styles */

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg, #ffffff);
  border-top: 1px solid var(--color-border, #e2e8f0);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: 1rem;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.cookie-consent-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-consent-text {
  flex: 1;
  min-width: 300px;
}

.cookie-consent-text p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text, #2c3e50);
}

.cookie-consent-text p:first-child {
  margin-bottom: 0.5rem;
}

.cookie-consent-text strong {
  font-size: 1rem;
  font-weight: 600;
}

.cookie-consent-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-consent-button {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cookie-consent-accept {
  background-color: var(--color-primary, #3b82f6);
  color: white;
}

.cookie-consent-accept:hover {
  background-color: var(--color-primary-dark, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cookie-consent-decline {
  background-color: transparent;
  color: var(--color-text, #2c3e50);
  border: 1px solid var(--color-border, #e2e8f0);
}

.cookie-consent-decline:hover {
  background-color: var(--color-bg-alt, #f3f4f6);
  border-color: var(--color-border-dark, #cbd5e1);
}

.cookie-consent-button:focus {
  outline: 2px solid var(--color-primary, #3b82f6);
  outline-offset: 2px;
}

/* Dark theme support */
html[data-theme="dark"] .cookie-consent-banner {
  background-color: var(--color-bg, #1a202c);
  border-top-color: var(--color-border, #4a5568);
}

html[data-theme="dark"] .cookie-consent-text p {
  color: var(--color-text, #f7fafc);
}

html[data-theme="dark"] .cookie-consent-decline {
  color: var(--color-text, #f7fafc);
  border-color: var(--color-border, #4a5568);
}

html[data-theme="dark"] .cookie-consent-decline:hover {
  background-color: var(--color-bg-alt, #2d3748);
  border-color: var(--color-border-dark, #718096);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .cookie-consent-content {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-consent-actions {
    justify-content: stretch;
  }

  .cookie-consent-button {
    flex: 1;
  }
}
/* main.css */

/* Generated token CSS */

/* screen.css — generated 2026-01-23T20:42:22Z | theme_version=38 */

:root {
  --palette-primary-50: #eef2ff;
  --palette-primary-100: #e0e7ff;
  --palette-primary-200: #c7d2fe;
  --palette-primary-300: #a5b4fc;
  --palette-primary-400: #818cf8;
  --palette-primary-500: #6366f1;
  --palette-primary-600: #4f46e5;
  --palette-primary-700: #4338ca;
  --palette-primary-800: #3730a3;
  --palette-primary-900: #312e81;
  --palette-neutral-50: #f9fafb;
  --palette-neutral-100: #f3f4f6;
  --palette-neutral-200: #e5e7eb;
  --palette-neutral-300: #d1d5db;
  --palette-neutral-400: #9ca3af;
  --palette-neutral-500: #6b7280;
  --palette-neutral-600: #4b5563;
  --palette-neutral-700: #374151;
  --palette-neutral-800: #1f2937;
  --palette-neutral-900: #111827;
  --palette-professional-slate: #2c3e50;
  --palette-professional-slate-blue: #44546A;
  --palette-professional-slate-gray: #718096;
  --palette-professional-border-gray: #cbd5e0;
  --palette-professional-grid-light: #e2e8f0;
  --palette-professional-grid-medium: #94a3b8;
  --palette-pastel-cyan-light: #8cd3c8;
  --palette-pastel-yellow-light: #dac846;
  --palette-pastel-purple-light: #bdb9d9;
  --palette-pastel-red-light: #f08a7e;
  --palette-pastel-blue-light: #87b8d9;
  --palette-pastel-orange-light: #f0a766;
  --palette-pastel-green-light: #afd065;
  --palette-pastel-pink-light: #f3c4dd;
  --palette-pastel-mint-light: #b8e0b5;
  --palette-pastel-lavender-light: #c98fc9;
  --palette-pastel-jade-light: #75a89d;
  --palette-pastel-periwinkle-light: #8c96d4;
  --palette-pastel-mauve-light: #d7a4a4;
  --palette-pastel-tan-light: #c8a36b;
  --palette-data-types-description: Colors for visual coding of report data types (tables, callouts);
  --palette-data-types-risks: {'border': '#8b5cf6', 'background': '#f3e8ff'};
  --palette-data-types-recommendations: {'border': '#f97316', 'background': '#fff7ed'};
  --palette-data-types-gaps: {'border': '#ef4444', 'background': '#fef2f2'};
  --palette-data-types-findings: {'border': '#3b82f6', 'background': '#eff6ff'};
  --palette-data-types-insights: {'border': '#14b8a6', 'background': '#f0fdfa'};
  --palette-data-types-scenarios: {'border': '#f59e0b', 'background': '#fffbeb'};
  --semantic-background: #eff0f1;
  --semantic-surface-elevated: #f8f9fa;
  --semantic-surface-sunken: #e8eaec;
  --semantic-foreground: #2c3e50;
  --semantic-muted: #5a6c7d;
  --semantic-gridline: #dfe1e3;
  --semantic-border-subtle: #e6e8ea;
  --semantic-accent-a: #3d8a7c;
  --semantic-accent-b: #44546A;
  --semantic-success: #5a8fc5;
  --semantic-warning: #d4a342;
  --semantic-danger: #c24d2e;
  --font-sans: Calibri, "Gill Sans", Inter, system-ui, "-apple-system", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "DejaVu Sans";
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, Monaco, "Liberation Mono", "Courier New", "DejaVu Sans Mono";
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --space-unit: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;
  --breakpoint-3xl: 1920px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
  --chart-width: 1200px;
  --chart-height: 720px;
  --chart-dpi: 144;
  --chart-padding: 16px;
  --grid-visible: true;
  --grid-style: "--";
  --grid-width: 1.0;
  --chart-color-cycle: #8cd3c8, #f0a766, #bdb9d9, #afd065, #c98fc9, #c8a36b, #8c96d4, #b8e0b5, #d7a4a4, #75a89d, #f3c4dd, #dac846, #87b8d9, #f08a7e;
  --color-1: #8cd3c8;
  --color-2: #f0a766;
  --color-3: #bdb9d9;
  --color-4: #afd065;
  --color-5: #c98fc9;
  --color-6: #c8a36b;
  --color-7: #8c96d4;
  --color-8: #b8e0b5;
  --color-9: #d7a4a4;
  --color-10: #75a89d;
  --color-11: #f3c4dd;
  --color-12: #dac846;
  --color-13: #87b8d9;
  --color-14: #f08a7e;
  --elevation-shadow-light: #feffff;
  --elevation-shadow-dark: rgba(22, 27, 29, 0.18);
  --elevation-shadow-inset-light: #ffffff;
  --elevation-shadow-inset-dark: #cbced1;
  --elevation-shadow-outset: -6px -6px 12px var(--elevation-shadow-light), 6px 6px 12px var(--elevation-shadow-dark);
  --elevation-shadow-inset: inset -4px -4px 8px var(--elevation-shadow-inset_light), inset 4px 4px 8px var(--elevation-shadow-inset_dark);
  --shadow-outset: var(--elevation-shadow-outset);
  --shadow-inset: var(--elevation-shadow-inset);
  --heat-scale-cold: #93b2da;
  --heat-scale-middle: #e8b84d;
  --heat-scale-hot: #D9603B;
  --heat-scale-steps: 24;
  --heat-scale-control-points: '[{"position": 0.0, "color": "#93b2da"}, {"position": 0.3, "color": "#5dbebd"}, {"position": 0.5, "color": "#e8b84d"}, {"position": 0.7, "color": "#e8853f"}, {"position": 1.0, "color": "#D9603B"}]';
  --heat-scale-discrete-low: #93b2da;
  --heat-scale-discrete-medium: #e8b84d;
  --heat-scale-discrete-high: #e8853f;
  --heat-scale-discrete-critical: #D9603B;
  --sem-background: var(--semantic-background);
  --sem-foreground: var(--semantic-foreground);
  --sem-muted: var(--semantic-muted);
  --sem-gridline: var(--semantic-gridline);
  --color-primary: var(--semantic-accent-a, var(--palette-pastel-deep-teal_light));
  --color-primary-hover: color-mix(in srgb, var(--semantic-accent-a, #82C99A) 85%, black);
  --color-bg: var(--semantic-background);
  --color-bg-alt: var(--palette-neutral-50);
  --color-bg-panel: var(--palette-neutral-200);
  --color-text: var(--semantic-foreground);
  --color-text-secondary: var(--semantic-muted);
  --color-border: var(--semantic-gridline);
  --color-error: var(--semantic-danger);
  --color-success: var(--semantic-success);
  --color-warning: var(--semantic-warning);
}

html[data-tokens-base], html[data-tokens-base] body {
  background: var(--semantic-background, #ffffff);
  color: var(--semantic-foreground, #0b1220);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--font-size-md, 16px);
  line-height: var(--line-height-normal, 1.5);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-tokens-base] h1 { font-size: var(--font-size-2xl, 30px); line-height: var(--line-height-tight, 1.2); }

html[data-tokens-base] h2 { font-size: var(--font-size-xl, 24px);  line-height: var(--line-height-tight, 1.2); }

html[data-tokens-base] h3 { font-size: var(--font-size-lg, 20px);  line-height: var(--line-height-tight, 1.2); }

html[data-tokens-base] .muted { color: var(--semantic-muted, #6b7280); }

html[data-tokens-base] code, html[data-tokens-base] pre, html[data-tokens-base] kbd, html[data-tokens-base] samp {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

html[data-tokens-base] table { border-collapse: collapse; width: 100%; }

html[data-tokens-base] th, html[data-tokens-base] td { padding: var(--space-2, 8px); border-bottom: 1px solid var(--palette-neutral-200, #e5e7eb); text-align: left; }

html[data-tokens-base] th { font-weight: 600; color: var(--palette-neutral-800, #1f2937); }

html[data-tokens-base] .figure { margin: var(--space-4, 16px) 0; }

html[data-tokens-base] .figure__title { font-weight: 600; margin-bottom: var(--space-2, 8px); }

html[data-tokens-base] .figure > svg, html[data-tokens-base] .figure__img { display: block; width: 100%; height: auto; color: var(--semantic-accent-a, #82C99A); }

/* ======================================== */

/*   Spacing Density Modes                 */

/* ======================================== */

/* Efficient: 50% of base spacing */

/* Dense layout optimized for data entry and power users. Maximizes screen real estate. */

html[data-spacing="efficient"] {
  --space-unit: 2px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
  --space-11: 22px;
  --space-12: 24px;
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
}

/* Relaxed: 120% of base spacing */

/* Spacious layout optimized for presentations, reviews, and accessibility. Default mode. */

html[data-spacing="relaxed"] {
  --space-unit: 5px;
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 25px;
  --space-6: 30px;
  --space-7: 35px;
  --space-8: 40px;
  --space-9: 45px;
  --space-10: 50px;
  --space-11: 55px;
  --space-12: 60px;
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 40px;
}

/* screen-dark.css — generated 2026-01-23T20:42:22Z | theme_version=38 */

/* Dark theme overrides — Applied when html[data-theme="dark"] */

html[data-theme="dark"] {
  --palette-neutral-50: #3A414F;
  --palette-neutral-100: #3A414F;
  --palette-neutral-200: #4a5568;
  --palette-neutral-300: #718096;
  --palette-neutral-400: #a0aec0;
  --palette-neutral-500: #cbd5e0;
  --palette-neutral-600: #e2e8f0;
  --palette-neutral-700: #edf2f7;
  --palette-neutral-800: #f7fafc;
  --palette-neutral-900: #ffffff;
  --palette-professional-slate: #cbd5e0;
  --palette-professional-slate-blue: #94a3b8;
  --palette-professional-slate-gray: #cbd5e0;
  --palette-professional-border-gray: #4a5568;
  --palette-professional-grid-light: #2d3748;
  --palette-professional-grid-medium: #4a5568;
  --palette-pastel-cyan-light: #7ac9c0;
  --palette-pastel-yellow-light: #cdb83e;
  --palette-pastel-purple-light: #b3a9cf;
  --palette-pastel-red-light: #e67d72;
  --palette-pastel-blue-light: #7ca9cf;
  --palette-pastel-orange-light: #e29a5d;
  --palette-pastel-green-light: #a0c75c;
  --palette-pastel-pink-light: #e8b3d0;
  --palette-pastel-mint-light: #a8d1ab;
  --palette-pastel-lavender-light: #bc81bc;
  --palette-pastel-jade-light: #6a9b92;
  --palette-pastel-periwinkle-light: #8088c5;
  --palette-pastel-mauve-light: #c99696;
  --palette-pastel-tan-light: #c09662;
  --semantic-background: #2e3747;
  --semantic-surface-elevated: #2d3748;
  --semantic-surface-sunken: #252d38;
  --semantic-foreground: #f7fafc;
  --semantic-muted: #cbd5e0;
  --semantic-gridline: #4a5568;
  --semantic-border-subtle: #2d3748;
  --semantic-accent-a: #75a89d;
  --semantic-accent-b: #94a3b8;
  --semantic-success: #82a3c8;
  --semantic-warning: #d4a642;
  --semantic-danger: #C45532;
  --elevation-shadow-light: rgba(255, 255, 255, 0.05);
  --elevation-shadow-dark: rgba(0, 0, 0, 0.5);
  --elevation-shadow-inset-light: rgba(255, 255, 255, 0.03);
  --elevation-shadow-inset-dark: rgba(0, 0, 0, 0.4);
  --elevation-shadow-outset: -6px -6px 12px var(--elevation-shadow-light), 6px 6px 12px var(--elevation-shadow-dark);
  --elevation-shadow-inset: inset -4px -4px 8px var(--elevation-shadow-inset-light), inset 4px 4px 8px var(--elevation-shadow-inset-dark);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  --chart-color-cycle: #7ac9c0, #e29a5d, #b3a9cf, #a0c75c, #bc81bc, #c09662, #8088c5, #a8d1ab, #c99696, #6a9b92, #e8b3d0, #cdb83e, #7ca9cf, #e67d72;
  --color-1: #7ac9c0;
  --color-2: #e29a5d;
  --color-3: #b3a9cf;
  --color-4: #a0c75c;
  --color-5: #bc81bc;
  --color-6: #c09662;
  --color-7: #8088c5;
  --color-8: #a8d1ab;
  --color-9: #c99696;
  --color-10: #6a9b92;
  --color-11: #e8b3d0;
  --color-12: #cdb83e;
  --color-13: #7ca9cf;
  --color-14: #e67d72;
  --heat-scale-cold: #82a3c8;
  --heat-scale-middle: #d4a642;
  --heat-scale-hot: #C45532;
  --heat-scale-steps: 24;
  --heat-scale-control-points: '[{"position": 0.0, "color": "#82a3c8"}, {"position": 0.3, "color": "#52aba9"}, {"position": 0.5, "color": "#d4a642"}, {"position": 0.7, "color": "#d47838"}, {"position": 1.0, "color": "#C45532"}]';
  --heat-scale-discrete-low: #82a3c8;
  --heat-scale-discrete-medium: #d4a642;
  --heat-scale-discrete-high: #d47838;
  --heat-scale-discrete-critical: #C45532;
  --color-primary: var(--semantic-accent-a);
  --color-primary-hover: color-mix(in srgb, var(--semantic-accent-a) 75%, white);
  --color-bg: var(--semantic-background);
  --color-bg-alt: var(--palette-neutral-100);
  --color-bg-panel: var(--palette-neutral-200);
  --color-text: var(--semantic-foreground);
  --color-text-secondary: var(--semantic-muted);
  --color-border: var(--semantic-gridline);
  --color-error: var(--semantic-danger);
  --color-success: var(--semantic-success);
  --color-warning: var(--semantic-warning);
}

html[data-theme="dark"] body {
  background: var(--semantic-background);
  color: var(--semantic-foreground);
}

/* print.css — generated 2026-01-23T20:42:22Z | theme_version=38 */

@media print {
  @page { size: Letter; margin: 16mm 14mm 18mm 14mm; }
  html, body {
    background: #ffffff !important;
    color: var(--semantic-foreground, #0b1220) !important;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: var(--font-size-sm, 14px);
    line-height: var(--line-height-relaxed, 1.7);
  }
  a { color: inherit; text-decoration: none; }
  .no-print { display: none !important; }
  .page-break-before { break-before: page; }
  .page-break-after  { break-after: page; }
  .avoid-break { break-inside: avoid; page-break-inside: avoid; }
  svg, img, figure, .figure { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  table { page-break-inside: auto; }
  code, pre, kbd, samp { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
  p, li, table, figure { orphans: 2; widows: 2; }
  .figure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-4, 16px); }
  .figure-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--palette-neutral-200, #e5e7eb); padding: var(--space-2, 8px); break-inside: avoid; page-break-inside: avoid; }
  .figure-card img { width: 100%; height: auto; display: block; }
  .figure-card-caption { margin-top: .4rem; font-size: .9rem; }
  .footnotes { font-size: .9rem; }
  .footnotes li { margin-bottom: .4rem; }
  .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; }
}

/* Import Layout and Components */

/* responsive.css - Responsive Layout Foundation */

/* Best-in-class responsive design system for scaling from mobile to desktop */

/* NOTE: Breakpoints (--breakpoint-*) are defined in screen.css (generated from design_tokens.json) */

/* ========================================
   RESPONSIVE LAYOUT VARIABLES
   ======================================== */

:root {
  /* Container max-widths at each breakpoint */
  --container-max-width: 100vw;
  --container-padding: var(--space-sm);

  /* Frame dimensions (fluid by default) */
  --frame-width: 100%;
  --frame-max-width: 100vw; /* Start at full viewport width */
  --frame-padding: var(--space-sm);

  /* Content region widths */
  --content-max-width: 100%;
  --sidebar-width: 0; /* Hidden by default on mobile */
  --aside-width: 0;   /* Hidden by default on mobile */

  /* Layout grid columns */
  --grid-columns: 1;
  --grid-gap: var(--space-md);

  /* Typography scaling */
  --text-scale: 1;

  /* Component density */
  --component-density: comfortable; /* comfortable | compact | spacious */
}

/* ========================================
   MOBILE FIRST (< 640px)
   Default state - single column, compact
   ======================================== */

/* Already defined in :root above */

/* ========================================
   SMALL MOBILE (640px+)
   Slightly more breathing room
   ======================================== */

@media (min-width: 640px) {
  :root {
    --container-padding: var(--space-md);
    --frame-padding: var(--space-md);
    --frame-max-width: 100vw; /* Ensure full viewport width */
    --grid-gap: var(--space-lg);
  }
}

/* ========================================
   TABLET (768px+)
   Introduce 2-column layouts, sidebars
   ======================================== */

@media (min-width: 768px) {
  :root {
    --container-max-width: 100%;
    --frame-max-width: calc(100vw - 32px); /* Full width minus margins (16px * 2) */
    --frame-width: 100%;
    --container-padding: var(--space-md);
    --frame-padding: var(--space-md);
    --grid-columns: 2;
    --grid-gap: var(--space-lg);
    --text-scale: 1.05;

    /* Optional sidebar for navigation */
    --sidebar-width: 240px;
  }
}

/* ========================================
   DESKTOP (1024px+)
   Multi-column layouts, increased density
   ======================================== */

@media (min-width: 1024px) {
  :root {
    --container-max-width: 100%; /* Stay full-width */
    --frame-max-width: 960px; /* But frame has comfortable max */
    --container-padding: var(--space-lg);
    --frame-padding: var(--space-lg);
    --grid-columns: 3;
    --grid-gap: var(--space-xl);
    --text-scale: 1.1;
  }
}

/* ========================================
   LARGE DESKTOP (1280px+)
   Full multi-panel layouts
   ======================================== */

@media (min-width: 1280px) {
  :root {
    --container-max-width: 100%;
    --frame-max-width: 1200px;
    --container-padding: var(--space-xl);
    --frame-padding: var(--space-xl);
    --grid-columns: 3;
    --aside-width: 320px; /* Enable right sidebar/metadata panel */
  }
}

/* ========================================
   EXTRA LARGE (1440px+)
   Maximum information density
   ======================================== */

@media (min-width: 1440px) {
  :root {
    --container-max-width: 100%;
    --frame-max-width: 1360px;
    --grid-columns: 4;
    --text-scale: 1.15;
  }
}

/* ========================================
   ULTRA WIDE (1920px+)
   Wide-screen optimized layouts
   ======================================== */

@media (min-width: 1920px) {
  :root {
    --container-max-width: 100%;
    --frame-max-width: 1600px;
    --grid-columns: 4;
    --aside-width: 360px;
  }
}

/* ========================================
   RESPONSIVE LAYOUT UTILITIES
   ======================================== */

/* Responsive container */

.container-responsive {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Responsive grid system */

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

/* Full-width on mobile, auto-fit on desktop */

.grid-auto-fit {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Full-width on mobile, auto-fill on desktop */

.grid-auto-fill {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* ========================================
   RESPONSIVE VISIBILITY UTILITIES
   ======================================== */

/* Hide on mobile */

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* Hide on tablet */

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

/* Hide on desktop */

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* Show only on mobile */

.show-mobile { display: none; }

@media (max-width: 768px) {
  .show-mobile { display: block; }
  .show-mobile-flex { display: flex; }
  .show-mobile-grid { display: grid; }
}

/* Show only on tablet */

.show-tablet { display: none; }

@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet { display: block; }
  .show-tablet-flex { display: flex; }
  .show-tablet-grid { display: grid; }
}

/* Show only on desktop */

.show-desktop { display: none; }

@media (min-width: 1024px) {
  .show-desktop { display: block; }
  .show-desktop-flex { display: flex; }
  .show-desktop-grid { display: grid; }
}

/* ========================================
   RESPONSIVE SPACING UTILITIES
   ======================================== */

/* Responsive padding */

.padding-responsive {
  padding: var(--space-sm);
}

@media (min-width: 768px) {
  .padding-responsive { padding: var(--space-md); }
}

@media (min-width: 1024px) {
  .padding-responsive { padding: var(--space-lg); }
}

/* Responsive margin */

.margin-responsive {
  margin: var(--space-sm);
}

@media (min-width: 768px) {
  .margin-responsive { margin: var(--space-md); }
}

@media (min-width: 1024px) {
  .margin-responsive { margin: var(--space-lg); }
}

/* Responsive gap for flex/grid */

.gap-responsive {
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .gap-responsive { gap: var(--space-md); }
}

@media (min-width: 1024px) {
  .gap-responsive { gap: var(--space-lg); }
}

/* ========================================
   CONTAINER QUERIES (Modern Browsers)
   ======================================== */

/* Enable container queries on main content regions */

.container-aware {
  container-type: inline-size;
  container-name: content;
}

/* Container query breakpoints */

@container content (min-width: 600px) {
  .cq-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

@container content (min-width: 1024px) {
  .cq-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

/* ========================================
   TOUCH VS MOUSE OPTIMIZATION
   ======================================== */

/* Larger touch targets on touch devices */

@media (hover: none) and (pointer: coarse) {
  button, a, .interactive {
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-2) var(--space-3);
  }

  /* Larger tap areas for interactive elements */
  .tap-target {
    padding: var(--space-3);
  }
}

/* Hover effects only on hover-capable devices */

@media (hover: hover) and (pointer: fine) {
  .hoverable:hover {
    background-color: var(--button-hover-bg);
    transition: background-color 0.2s ease;
  }

  /* Enhanced interactive feedback on desktop */
  .interactive-hover:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
  }
}

/* ========================================
   LAYOUT TRANSITION SMOOTHING
   ======================================== */

/* Smooth transitions between breakpoints (respect motion preferences) */

@media (prefers-reduced-motion: no-preference) {
  .layout-transition {
    transition:
      padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ========================================
   RESPONSIVE TYPOGRAPHY SCALING
   ======================================== */

/* Fluid typography using clamp() */

.text-responsive-xs { font-size: clamp(11px, 0.7rem + 0.2vw, 12px); }

.text-responsive-sm { font-size: clamp(13px, 0.8rem + 0.2vw, 14px); }

.text-responsive-md { font-size: clamp(14px, 0.9rem + 0.3vw, 16px); }

.text-responsive-lg { font-size: clamp(16px, 1rem + 0.4vw, 20px); }

.text-responsive-xl { font-size: clamp(18px, 1.1rem + 0.6vw, 24px); }

.text-responsive-2xl { font-size: clamp(20px, 1.3rem + 1vw, 36px); }

/* Responsive line height */

.leading-responsive-tight { line-height: clamp(1.1, 1.15, 1.2); }

.leading-responsive-normal { line-height: clamp(1.4, 1.5, 1.6); }

.leading-responsive-relaxed { line-height: clamp(1.6, 1.7, 1.8); }

/* ========================================
   ASPECT RATIO UTILITIES
   ======================================== */

.aspect-square { aspect-ratio: 1 / 1; }

.aspect-video { aspect-ratio: 16 / 9; }

.aspect-4-3 { aspect-ratio: 4 / 3; }

.aspect-3-2 { aspect-ratio: 3 / 2; }

/* Responsive aspect ratios */

.aspect-responsive {
  aspect-ratio: 1 / 1; /* Square on mobile */
}

@media (min-width: 768px) {
  .aspect-responsive { aspect-ratio: 4 / 3; }
}

@media (min-width: 1280px) {
  .aspect-responsive { aspect-ratio: 16 / 9; }
}

/* report-responsive.css - Responsive layout for Report components */

/* Optimized for data-heavy report viewing from mobile to wide desktop */

/* ========================================
   REPORT LAYOUT VARIABLES
   ======================================== */

:root {
  /* Report-specific spacing */
  --report-padding: var(--space-sm);
  --report-section-gap: var(--space-md);
  --report-card-gap: var(--space-md);

  /* Report content width */
  --report-content-width: 100%;
  --report-sidebar-width: 0; /* Hidden on mobile */
  --report-aside-width: 0;   /* Hidden on mobile */

  /* Table/chart sizing */
  --report-table-font-size: var(--font-size-sm);
  --report-chart-height: 240px;
}

/* ========================================
   REPORT VIEWER LAYOUT
   Mobile First (< 768px): Single column
   ======================================== */

.report-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  container-type: inline-size;
  container-name: report;
}

/* Report header - sticky on all screens */

.report-viewer__header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--semantic-surface-elevated);
  border-bottom: 1px solid var(--semantic-border-subtle);
  flex-shrink: 0;
}

/* Report content scrollable area */

.report-viewer__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--report-padding);
  min-height: 0;
}

/* ========================================
   TABLET (768px+)
   Two-column option for side-by-side content
   ======================================== */

@media (min-width: 768px) {
  :root {
    --report-padding: var(--space-md);
    --report-section-gap: var(--space-lg);
    --report-card-gap: var(--space-lg);
    --report-chart-height: 320px;
    --report-sidebar-width: 220px;
  }

  /* Enable two-column layouts for certain sections */
  .report-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--report-card-gap);
  }
}

/* ========================================
   DESKTOP (1024px+)
   Three-column layouts, optimal data density
   ======================================== */

@media (min-width: 1024px) {
  :root {
    --report-padding: var(--space-lg);
    --report-section-gap: var(--space-xl);
    --report-chart-height: 400px;
  }

  /* Three-column grid for cards */
  .report-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--report-card-gap);
  }

  /* Side-by-side layout with optional sidebar */
  .report-layout-with-sidebar {
    display: grid;
    grid-template-columns: var(--report-sidebar-width) 1fr;
    gap: var(--space-lg);
    height: 100%;
  }
}

/* ========================================
   LARGE DESKTOP (1280px+)
   Three-panel layout with metadata aside
   ======================================== */

@media (min-width: 1280px) {
  :root {
    --report-aside-width: 280px;
    --report-chart-height: 480px;
  }

  /* Three-panel layout: TOC | Content | Metadata */
  .report-layout-three-panel {
    display: grid;
    grid-template-columns: var(--report-sidebar-width) 1fr var(--report-aside-width);
    grid-template-areas: "sidebar content aside";
    gap: var(--space-xl);
    height: 100%;
  }

  .report-layout-three-panel__sidebar {
    grid-area: sidebar;
    overflow-y: auto;
  }

  .report-layout-three-panel__content {
    grid-area: content;
    overflow-y: auto;
  }

  .report-layout-three-panel__aside {
    grid-area: aside;
    overflow-y: auto;
  }
}

/* ========================================
   EXTRA LARGE (1440px+)
   Maximum information density
   ======================================== */

@media (min-width: 1440px) {
  :root {
    --report-padding: var(--space-xl);
    --report-aside-width: 320px;
    --report-chart-height: 520px;
  }

  /* Four-column grid for dense data displays */
  .report-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--report-card-gap);
  }
}

/* ========================================
   EXECUTIVE SUMMARY RESPONSIVE LAYOUT
   ======================================== */

/* Mobile: Stack everything vertically */

.executive-summary {
  display: flex;
  flex-direction: column;
  gap: var(--report-section-gap);
}

.executive-summary__tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Tablet: 2-column tile grid */

@media (min-width: 768px) {
  .executive-summary__tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3-column tile grid */

@media (min-width: 1024px) {
  .executive-summary__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large Desktop: 4-column tile grid */

@media (min-width: 1440px) {
  .executive-summary__tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   RISK REGISTER RESPONSIVE LAYOUT
   ======================================== */

.risk-register {
  display: flex;
  flex-direction: column;
  gap: var(--report-section-gap);
}

/* Mobile: Full-width table with horizontal scroll */

.risk-register__table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tablet+: Show more columns */

@media (min-width: 768px) {
  .risk-register__table {
    font-size: var(--font-size-sm);
  }

  /* Show previously hidden columns */
  .risk-register__table .priority-2 {
    display: table-cell;
  }
}

/* Desktop+: Show all columns, larger text */

@media (min-width: 1024px) {
  .risk-register__table {
    font-size: var(--font-size-md);
  }

  .risk-register__table .priority-3 {
    display: table-cell;
  }
}

/* ========================================
   DOMAIN ANALYSIS RESPONSIVE LAYOUT
   ======================================== */

.domain-analysis {
  display: flex;
  flex-direction: column;
  gap: var(--report-section-gap);
}

/* Mobile: Single column domain cards */

.domain-analysis__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--report-card-gap);
}

/* Tablet: 2-column domain grid */

@media (min-width: 768px) {
  .domain-analysis__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3-column domain grid */

@media (min-width: 1280px) {
  .domain-analysis__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

/* Base chart container */

.chart-responsive {
  width: 100%;
  height: var(--report-chart-height);
  min-height: 200px;
  max-height: 600px;
  overflow: hidden;
  container-type: inline-size;
  container-name: chart;
}

/* Adjust chart aspect ratio by viewport */

.chart-responsive--square {
  aspect-ratio: 1 / 1;
  height: auto;
}

.chart-responsive--wide {
  aspect-ratio: 16 / 9;
  height: auto;
}

@media (min-width: 768px) {
  .chart-responsive--wide {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1280px) {
  .chart-responsive--wide {
    aspect-ratio: 16 / 9;
  }
}

/* Scale chart text based on container width */

@container chart (max-width: 400px) {
  .chart-responsive text,
  .chart-responsive .chart-label {
    font-size: 10px;
  }
}

@container chart (min-width: 600px) {
  .chart-responsive text,
  .chart-responsive .chart-label {
    font-size: 12px;
  }
}

@container chart (min-width: 1024px) {
  .chart-responsive text,
  .chart-responsive .chart-label {
    font-size: 14px;
  }
}

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

/* Base responsive table */

.table-responsive-report {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-md);
}

/* Mobile: Compact table styling */

.table-responsive-report table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--report-table-font-size);
}

.table-responsive-report th,
.table-responsive-report td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--semantic-gridline);
}

/* Progressive column disclosure */

.table-responsive-report .col-priority-low {
  display: none; /* Hide on mobile */
}

@media (min-width: 768px) {
  .table-responsive-report .col-priority-low {
    display: table-cell;
  }

  .table-responsive-report th,
  .table-responsive-report td {
    padding: var(--space-2) var(--space-4);
  }
}

@media (min-width: 1024px) {
  .table-responsive-report {
    font-size: var(--font-size-md);
  }

  .table-responsive-report th,
  .table-responsive-report td {
    padding: var(--space-3) var(--space-4);
  }
}

/* ========================================
   MODAL/DIALOG RESPONSIVE BEHAVIOR
   ======================================== */

/* Mobile: Full-screen modals for better usability */

@media (max-width: 768px) {
  .report-modal .MuiDialog-paper {
    margin: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .report-modal .MuiDialogContent-root {
    padding: var(--space-md);
  }
}

/* Tablet: Comfortable modal size */

@media (min-width: 768px) {
  .report-modal .MuiDialog-paper {
    max-width: 680px;
    border-radius: 8px;
  }
}

/* Desktop: Larger modals for complex content */

@media (min-width: 1024px) {
  .report-modal .MuiDialog-paper {
    max-width: 900px;
  }
}

@media (min-width: 1280px) {
  .report-modal .MuiDialog-paper {
    max-width: 1100px;
  }
}

/* ========================================
   CARD/PAPER RESPONSIVE SPACING
   ======================================== */

.report-card {
  padding: var(--space-md);
  border-radius: 4px;
  background-color: var(--semantic-surface-elevated);
  border: 1px solid var(--semantic-border-subtle);
}

@media (min-width: 768px) {
  .report-card {
    padding: var(--space-lg);
    border-radius: 6px;
  }
}

@media (min-width: 1024px) {
  .report-card {
    padding: var(--space-xl);
    border-radius: 8px;
  }
}

/* ========================================
   PRINT OPTIMIZATIONS
   ======================================== */

@media print {
  .report-viewer {
    display: block;
    height: auto;
  }

  .report-viewer__header {
    position: static;
  }

  .report-viewer__content {
    overflow: visible;
    padding: 0;
  }

  /* Expand all grids to single column for print */
  .report-grid-2col,
  .report-grid-3col,
  .report-grid-4col {
    display: block;
  }

  .report-grid-2col > *,
  .report-grid-3col > *,
  .report-grid-4col > * {
    margin-bottom: var(--space-lg);
    page-break-inside: avoid;
  }

  /* Ensure charts/figures print at reasonable size */
  .chart-responsive {
    max-height: 400px;
    page-break-inside: avoid;
  }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Ensure sufficient tap targets on touch devices */

@media (hover: none) and (pointer: coarse) {
  .report-viewer button,
  .report-viewer a,
  .report-viewer .interactive {
    min-height: 44px;
    min-width: 44px;
  }

  /* Larger table row tap areas */
  .table-responsive-report tbody tr {
    cursor: pointer;
  }

  .table-responsive-report tbody td {
    padding: var(--space-3) var(--space-4);
  }
}

/* Focus indicators for keyboard navigation */

.report-viewer *:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ========================================
   CONTAINER QUERY ADAPTATIONS
   ======================================== */

/* Adapt report sections based on container width */

@container report (min-width: 600px) {
  .report-adaptive-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

@container report (min-width: 1024px) {
  .report-adaptive-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

@container report (min-width: 1280px) {
  .report-adaptive-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
  }
}

/* buttons.css */

.button {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-lg);
  background-color: var(--color-primary);
  color: var(--semantic-background);
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.button:disabled {
  background-color: var(--color-border);
  cursor: not-allowed;
}

.reset-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: calc(-1.5 * var(--space-md)) 0 var(--space-xs) 0;
}

.reset-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  background-color: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-button:hover {
  color: var(--semantic-accent-a);
  transform: scale(1.1);
}

.reset-button svg {
  font-size: var(--font-size-2xl);
}

/* Login Button */

.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  min-width: 300px;
  max-width: 400px;
  box-sizing: border-box;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.login-button:hover:not(:disabled) {
  background-color: var(--color-bg);
}

/* Description Toggle Button */

.description-toggle {
  background: transparent;
  border: none;
  padding: var(--space-xs);
  margin-left: var(--space-sm);
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-text);
}

/* Base size for the description/info icon */

.description-button svg {
  font-size: var(--font-size-xl);
}

/* Larger icon on desktop */

@media (min-width: 1024px) {
  .description-button svg {
    font-size: var(--font-size-2xl);
  }
}

.description-button svg {
  vertical-align: text-bottom;
}

.description-content {
  position: sticky;
  bottom: 0;
  z-index: 55;
  background-color: var(--color-bg-panel);

  padding: var(--space-lg);
  border-radius: var(--radius-base);
  max-width: 90%;
  max-height: 80%;
}

/* Navigation Buttons */

.navigation-buttons {
  flex: 0 0 var(--navigation-bar-height);
  background-color: var(--color-bg-panel);
}

/* Place nav buttons inline below the scrollable area */

.navigation-buttons-wrapper {
  position: static;
  grid-row: 4;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); /* iOS safe area + spacing */
  gap: var(--space-xs);
  background-color: var(--color-bg-alt);
  width: 100%;
  margin: 0;
  z-index: 90;
}

/* Desktop: more generous padding */

@media (min-width: 768px) {
  .navigation-buttons-wrapper {
    padding: var(--space-sm);
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
    gap: var(--space-sm);
  }
}

.navigation-button {
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border);
  width: var(--navigation-button-width);
  min-height: 44px; /* Minimum touch target size (WCAG/Apple HIG) */
  border-radius: var(--radius-base);
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: 700;
  cursor: pointer;
  background-color: var(--color-bg);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  z-index: 92;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigation-button:hover:not(.disabled) {
  background-color: var(--color-bg-alt);
  border-color: var(--color-primary);
}

.navigation-button.selected {
  background-color: var(--color-primary);
  color: var(--semantic-background);
  border-color: var(--color-primary-hover);
}

.navigation-button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Mobile: Compact navigation buttons */

@media (max-width: 767px) {
  .navigation-buttons-wrapper {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .navigation-button {
    padding: var(--space-xs) var(--space-sm);
    min-height: 40px; /* Slightly smaller on mobile */
    font-size: var(--font-size-lg);
  }
}

/* charts.css */

/* ============================================
   Donut Chart Components
   ============================================ */

/* Donut Chart Center Content Container */

.donut-center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

/* Main count value in center */

.donut-center-value {
  font-size: var(--font-size-2xl);
  font-weight: bold;
  color: var(--color-text, rgba(255, 255, 255, 0.9));
  line-height: 1;
  pointer-events: none;
  transition: font-size 0.2s ease;
}

/* Percentage text shown on click - smaller and in parentheses */

.donut-center-percentage {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-text, rgba(255, 255, 255, 0.9));
  margin-top: var(--space-1);
  line-height: 1;
  pointer-events: none;
}

/* Category label (subtitle) shown above the main title (e.g., "Medium Severity") */

.donut-category-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
  margin-top: var(--space-2);
  margin-bottom: calc(-1 * var(--space-1));
  line-height: var(--line-height-tight);
  text-align: center;
  white-space: nowrap;
  order: 1;
}

/* Legacy tooltip styles (kept for compatibility but no longer used) */

.donut-tooltip {
  position: fixed;
  display: none;
  background-color: rgba(30, 30, 30, 0.95);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: 10000;
  white-space: nowrap;
  font-weight: 500;
}

/* components.css */

/* Node & NodeForm components */

.node__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-md) var(--space-md) var(--space-xs) var(--space-md);
}

.node__header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-border);
}

/* Subtle highlight effect when entering a new node */

@media (prefers-reduced-motion: no-preference) {
  .node__header {
    animation: nodeHeaderHighlight 0.6s ease-out;
  }

  @keyframes nodeHeaderHighlight {
    0% {
      border-bottom-color: var(--color-primary);
      box-shadow: 0 2px 8px -2px var(--color-primary);
    }
    100% {
      border-bottom-color: var(--color-border);
      box-shadow: none;
    }
  }
}

.node-header__section-progress {
  height: 8px;
  margin: 0 0 8px;
}

/* Even more compact on mobile */

@media (max-width: 768px) {
  .node-header__section-progress {
    height: 6px;
    margin: 0 0 6px;
  }
}

.node-footer {
  height: var(--navigation-bar-height);
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}

/* ======================================== */

/*   Mobile Improvements (<768px)           */

/* ======================================== */

@media (max-width: 768px) {
  .node__content {
    padding: var(--space-sm);
  }

  .node__header {
    padding: var(--space-sm);
  }

  .node-header__section-progress {
    height: 8px;
    margin: 0 0 8px;
  }

  /* Ensure tables scroll horizontally on mobile */
  .MuiPaper-root {
    max-width: 100vw;
  }

  .MuiTable-root {
    min-width: 100%;
  }

  .MuiTableCell-root {
    font-size: 0.85rem;
    padding: 8px;
  }
}

.node__name-wrapper {
  display: block;
  width: 100%;
}

.node__name-text {
  margin: 0.5rem 0 0.25rem;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  display: inline-block;
  max-width: calc(100% - 3rem); /* Leave room for kabob menu */
}

/* More compact header on mobile */

@media (max-width: 768px) {
  .node__name-text {
    margin: 0.25rem 0 0.125rem;
    font-size: var(--font-size-xl);
    line-height: 1.2;
  }
}

/* Position toggle inline with node name */

.node__name-text .description-panel__toggle {
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--space-xs);
  cursor: pointer;
}

/* Description body appears below the node name and spans full width */

.node__name-wrapper .description-panel__body {
  display: block;
  margin-top: var(--space-sm);
  width: 100%;
  max-width: 100%;
}

.node__path {
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--semantic-muted);
  opacity: 0.8;
  line-height: 1.4;
}

/* More compact path on mobile */

@media (max-width: 768px) {
  .node__path {
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-xs);
    line-height: 1.3;
  }
}

.node-form {
  height: 100%; /* Fill parent container, not viewport */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.node-form .question-area {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* prevent this container from scrolling - only children scroll */
}

/* question-container needs to be flex to allow child to grow with flex: 1 */

.question-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* make sure .checkboxgroup and .radiogroup wrappers don't themselves constrain height */

.node-form .checkboxgroup,
.node-form .radiogroup {
  /* let the parent (.question-options) be the scrollport */
  max-height: none;
  min-height: min-content;
  height: auto;
}

/* Reports */

.report-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* slider layout and labels */

.numeric-slider {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.slider-label {
  margin-right: var(--space-md);
  white-space: nowrap;
}

.slider-value {
  margin-left: var(--space-sm);
  min-width: 2ch;
  text-align: center;
  font-weight: bold;
}

/* rc-slider styling via class names */

.custom-slider .rc-slider-rail {
  background-color: var(--semantic-gridline);
}

.custom-slider .rc-slider-track {
  background-color: var(--color-primary);
}

.custom-slider .rc-slider-handle {
  border-color: var(--color-primary);
  background-color: var(--semantic-background);
}

.message-box {
  background: var(--description-bg);
  padding: 20px 30px;
  border-radius: var(--border-radius);
  text-align: center;
  cursor: default;
}

.error-message {
  padding: var(--space-md);
  background-color: var(--color-error);
  border: 1px solid var(--color-error);
  color: color-mix(in srgb, var(--semantic-danger) 80%, black);
  border-radius: 4px;
  text-align: center;
  margin: var(--space-md) auto;
  max-width: 600px;
}

.places-autocomplete__wrapper {
  align-self: start;     /* in a grid container */
  position: relative;
  width: 100%;
  overflow: visible;   /* allow dropdown to escape bounds */
  zIndex: 700;          /* above most other layers */
}

.places-autocomplete__input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 2px solid var(--semantic-gridline);
  border-radius: var(--radius-base, 4px);
  position: relative;
  z-index: 20;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.places-autocomplete__input:hover {
  border-color: var(--palette-neutral-400, #9ca3af);
}

.places-autocomplete__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
              0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.places-autocomplete__input::placeholder {
  color: var(--semantic-muted);
}

.places-autocomplete__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border: 1px solid var(--semantic-gridline);
  border-radius: var(--radius-base, 4px);
  z-index: 3000;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.places-autocomplete__suggestions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.places-autocomplete__suggestions li {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--color-text);
}

.places-autocomplete__suggestions li:hover {
  background: var(--color-hover);
}

.places-autocomplete__attribution {
  padding: 2px 8px 6px;
  background: var(--color-bg);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* make the contenteditable shim "invisible" to pointer events */

.places-autocomplete__wrapper [contenteditable] {
 pointer-events: none;
}

/* make sure the wrapper can escape any clipping ancestor */

/* Note: !important needed here to override parent overflow:hidden constraints */

.places-autocomplete__wrapper {
  overflow: visible !important;
  z-index: 4000 !important;
}

.places-autocomplete__attribution a {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--semantic-muted);
  text-decoration: none;
  padding: 0 4px;
}

.places-autocomplete__attribution img {
  height: var(--space-md);
  margin-right: var(--space-xs);
}

.unified-tree-list {
  /* reset browser default indent/bullets */
  padding-left: var(--space-xs);
  padding-right: var(--space-md);
  margin: 0;
  list-style-type: 'none';
  padding-bottom: 0;
}

.unified-tree-picker {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  padding-bottom: 0;
}

/* Keep selected-items fixed above the scrolling options */

.unified-tree-picker > .selected-items,
.unified-tree-picker > button {
  flex: 0 0 auto;
}

/* make only the options list scroll */

.unified-tree-picker .question-options,
.unified-tree-picker .scroll-indicator-content.question-options {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
  padding-bottom: var(--navigation-bar-height);
  padding-left: calc(var(--space-md) + 8px); /* Extra 8px to offset left border + shadow on buttons */
  padding-right: var(--space-md);
  scroll-padding-bottom: var(--navigation-bar-height);
  align-items: stretch;
}

/* Styled selected items chips */

.unified-tree-picker .selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.unified-tree-picker .selected-items > span {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background-color: color-mix(in srgb, var(--semantic-accent-a) 20%, var(--color-bg-panel));
  border: 1px solid var(--semantic-accent-a);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-right: 0;
}

.unified-tree-picker .selected-items > span > button {
  margin-left: var(--space-xs);
  padding: 0;
  background: transparent;
  border: none;
  color: var(--semantic-muted);
  cursor: pointer;
  font-size: var(--font-size-base);
  line-height: 1;
  transition: color 0.2s ease;
}

.unified-tree-picker .selected-items > span > button:hover {
  color: var(--color-text);
}

.unified-tree-picker .question-header {
  position: relative;
  top: auto;
  z-index: 1;
}

/* Branch node styling - uses primary accent color */

.tree-branch-node {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Left-align non-leaf nodes */
  width: 100%;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background-color: color-mix(in srgb, var(--semantic-accent-a) 12%, var(--color-bg-panel));
  box-shadow: var(--shadow-outset);
  border-radius: var(--radius-base);
  border-left: 3px solid var(--semantic-accent-a);
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease-in-out;
}

.tree-branch-node:hover {
  background-color: color-mix(in srgb, var(--semantic-accent-a) 20%, var(--color-bg-panel));
  border-left-color: color-mix(in srgb, var(--semantic-accent-a) 150%, white);
}

.tree-branch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  margin-right: var(--space-sm);
  font-size: 0.9em;
  color: var(--semantic-text-secondary);
  flex-shrink: 0;
}

.tree-branch-label {
  flex: 1;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--semantic-text-secondary);
}

/* Enhance contrast for neumorphic effect - use consistent button styling */

.unified-tree-picker .unified-button,
.unified-tree-picker .tree-branch-node {
  background-color: var(--color-bg-panel);
  color: var(--color-text);
  box-shadow: var(--shadow-outset);
}

/* Add extra right padding for all tree picker buttons (they all have description toggles) */

.unified-tree-picker .unified-button {
  padding-right: calc(var(--space-md) + 5rem);
}

/* Make leaf button text proportional to parent branch text */

.unified-tree-picker .unified-button__title,
.unified-tree-picker .unified-button__label {
  font-size: var(--font-size-base);
  font-weight: 500;
}

.unified-tree-picker .unified-button.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  background-color: color-mix(in srgb, var(--semantic-accent-a) 30%, #5a6c7d);
  border: 2px solid var(--semantic-accent-a);
  outline: 2px solid color-mix(in srgb, var(--semantic-accent-a) 40%, transparent);
  outline-offset: -4px;
}

/* ======================================== */

/*   Responsive Tree Picker Adjustments    */

/* ======================================== */

/* Mobile: Compact tree picker styling */

@media (max-width: 767px) {
  .tree-branch-node {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
  }

  .tree-branch-label {
    font-size: var(--font-size-sm);
  }

  .unified-tree-picker .unified-button {
    padding-right: calc(var(--space-md) + 2.5rem); /* Less right padding on mobile */
  }

  .unified-tree-picker .unified-button__title,
  .unified-tree-picker .unified-button__label {
    font-size: var(--font-size-sm);
  }
}

/* Tablet: Medium tree picker styling */

@media (min-width: 768px) and (max-width: 1023px) {
  .tree-branch-node {
    padding: var(--space-md);
  }

  .tree-branch-label {
    font-size: var(--font-size-base);
  }
}

/* Desktop: Larger tree picker styling */

@media (min-width: 1024px) {
  .tree-branch-node {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .tree-branch-label {
    font-size: var(--font-size-lg);
  }

  .unified-tree-picker .unified-button__title,
  .unified-tree-picker .unified-button__label {
    font-size: var(--font-size-md);
  }
}

/* Dashboard Component */

.dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg) var(--space-lg) 0;
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
}

/* ============================================ */

/* Hero Card - Clean and Minimal                */

/* ============================================ */

.dashboard__hero {
  flex-shrink: 0;
  margin-bottom: var(--space-3);
}

.dashboard__hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dashboard__hero-title {
  margin: 0;
  font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-2xl));
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.dashboard__hero-description {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--semantic-muted);
  line-height: 1.5;
}

.dashboard__hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: 0;
}

.dashboard__hero-progress {
  flex: 1 1 300px;
  min-width: 250px;
}

.dashboard__hero-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-1);
}

.dashboard__hero-sublabel {
  font-size: var(--font-size-xs);
  color: var(--semantic-muted);
  display: block;
  margin-top: var(--space-1);
}

.dashboard__hero-counters {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dashboard__counter {
  text-align: center;
  min-width: 70px;
}

.dashboard__counter-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  display: block;
  color: var(--color-text);
}

.dashboard__counter-label {
  font-size: var(--font-size-sm);
  color: var(--semantic-muted);
  display: block;
  margin-top: var(--space-1);
}

.dashboard__content {
  flex: 1;
  min-height: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden; /* Ensure content doesn't overflow and scroll-indicator fills space */
}

/*.dashboard__content > .dashboard__title-wrapper {*/

/*  margin-bottom: var(--space-2);*/

/*}*/

.dashboard__content > .scroll-indicator-wrapper {
  margin-top: 0;
  flex: 1; /* Grow to fill all available space down to footer */
  min-height: 0; /* Allow flex shrinking */
}

.dashboard__content .scroll-indicator-content {
  padding-top: 0;
}

.dashboard__sections {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: single column */
  gap: var(--space-lg);
  /*padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);*/
  padding: var(--space-lg);
  margin: 0;
  width: 100%;
  align-items: start; /* Prevent cards from stretching to match tallest card */
}

/* Tablet: 2-column grid */

@media (min-width: 768px) {
  .dashboard__sections {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3-column grid */

@media (min-width: 1280px) {
  .dashboard__sections {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

/* Large Desktop: 4-column grid for dense dashboards */

@media (min-width: 1600px) {
  .dashboard__sections {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================ */

/* Section Cards - Clean and Minimal           */

/* ============================================ */

.dashboard__section-card {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-3);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.dashboard__section-card:hover {
  box-shadow: var(--shadow-sm);
}

.dashboard__section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.dashboard__section-icon {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  opacity: 0.7;
}

.dashboard__section-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dashboard__section-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.dashboard__section-name {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

/* Description panel in section cards */

.dashboard__section-card .description-panel__toggle {
  position: relative;
  padding: 0;
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  /* Center vertically with the first line of text */
  top: 0.15em;
}

.dashboard__section-card .description-panel__body {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.dashboard__section-status {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--semantic-muted);
  order: 1;
}

.dashboard__section-description {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  color: var(--semantic-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dashboard__section-progress {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dashboard__section-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.dashboard__section-progress-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
}

.dashboard__section-progress-count {
  font-size: var(--font-size-sm);
  color: var(--semantic-muted);
}

/* Make sure there's room for shadow */

.dashboard__section-card:last-child {
  margin-bottom: var(--space-md);
}

/* Scroll indicators */

.scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s ease;
  background: var(--color-border);
}

.dashboard .scroll-fade--top {
  top: 0;
  opacity: var(--gradient-top-opacity, 0);
  pointer-events: none;
}

.scroll-fade--bottom {
  bottom: var(--gradient-bottom-offset, 0);
  opacity: var(--gradient-bottom-opacity, 0);
}

/* ======================================== */

/*   Mobile Responsive Adjustments           */

/* ======================================== */

@media (max-width: 768px) {
  .dashboard {
    padding: var(--space-md) var(--space-md) 0; /* Keep bottom padding 0 */
  }

  .dashboard__hero {
    padding: var(--space-md) !important;
  }

  .dashboard__sections {
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .dashboard__section-card {
    min-height: 180px;
  }
}

/* Extra small mobile devices */

@media (max-width: 480px) {
  .dashboard {
    padding: var(--space-sm) var(--space-sm) 0; /* Keep bottom padding 0 */
  }

  .dashboard__hero {
    padding: var(--space-sm) !important;
  }

  .dashboard__sections {
    padding: var(--space-sm);
    gap: var(--space-md);
  }
}

/* Loading and Empty States */

.dashboard--loading,
.dashboard--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

/* Dashboard Title Wrapper - Flex layout for title and controls */

.dashboard__title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
  padding-right: var(--space-lg); /* Match right padding of survey buttons */
}

.dashboard__title {
  margin: 0;
  flex-shrink: 0;
}

/* Home Header Controls - Align with Welcome text and right edge of buttons */

.home-header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Mobile - Adjust padding and remove bottom margin */

@media (max-width: 768px) {
  .dashboard__title-wrapper {
    padding-right: var(--space-md);
    margin-bottom: 0;
  }
}

/* Extra small mobile */

@media (max-width: 480px) {
  .dashboard__title-wrapper {
    padding-right: var(--space-sm);
  }
}

/* DescriptionPanel.css */

/* wrapper for anything that needs an “info/close” toggle pinned top-right */

.description-panel__wrapper {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* the little toggle icon */

.description-panel__toggle {
  position: relative;
  font-size: 1.5rem;
  padding-left: var(--space-sm);
  cursor: pointer;
  color: var(--semantic-accent-a);
  transition: color 0.2s ease;
}

/* if the toggle sits in a container that needs extra room on the right: */

.description-panel__wrapper > *:first-child {
  padding-right: 1.5em; /* make room so text doesn’t underlap the icon */
}

/* description body */

.description-panel__body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background-color: color-mix(in srgb, var(--semantic-accent-a) 8%, var(--color-bg-panel));
  color: var(--color-text);
  border-radius: var(--radius-base);
  border: 1px solid color-mix(in srgb, var(--semantic-accent-a) 30%, transparent);
  box-shadow: var(--shadow-inset);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

/* DynamicSurveyButton.css */

/* Dynamic Survey Buttons */

/*.dynamic-survey-button__accepted_invite { }*/

/*.dynamic-survey-button__unaccepted_invite { }*/

/* Status Icon - top left of button */

.survey-status-icon {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.survey-status-icon svg {
  width: 28px;
  height: 28px;
}

/* Icon colors based on state */

.survey-status-icon--assessment {
  color: var(--semantic-accent-a);
}

.survey-status-icon--report {
  color: var(--semantic-success);
}

/* Match description panel toggle and body color to icon color */

.unified-button--survey .description-panel__toggle,
.unified-button--report .description-panel__toggle {
  color: var(--semantic-accent-a);
}

.unified-button--survey .description-panel__body,
.unified-button--report .description-panel__body {
  background-color: color-mix(in srgb, var(--semantic-accent-a) 8%, var(--color-bg-panel));
  border: 1px solid color-mix(in srgb, var(--semantic-accent-a) 30%, transparent);
}

.unified-button--ghost .description-panel__toggle {
  color: var(--semantic-success);
}

.unified-button--ghost .description-panel__body {
  background-color: color-mix(in srgb, var(--semantic-success) 8%, var(--color-bg-panel));
  border: 1px solid color-mix(in srgb, var(--semantic-success) 30%, transparent);
}

.dynamic-survey-button__title-wrapper {
  display: inline-flex;
  align-items: center;
}

.dynamic-survey-button__title {
  font-size: var(--font-size-base);
  font-weight: 700;
}

.dynamic-survey-button__invite-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-sm);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  gap: var(--space-xs);
}

.dynamic-survey-button__accept-button {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-primary);
  color: var(--semantic-background);
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
}

.dynamic-survey-button__accept-button:hover {
  background-color: var(--color-primary-hover);
}

.dynamic-survey-button__active {

}

.dynamic-survey-button__complete {

}

.modal-overlay {
  position: fixed;            /* cover the whole screen */
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);/* dark translucent backdrop */
  display: flex;              /* center the modal box */
  align-items: center;
  justify-content: center;
  z-index: 9999;              /* float above everything */
}

.modal-content.dynamic-survey-button__prompt {
  background: var(--semantic-background);           /* white dialog */
  padding: 24px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Progress bar styling */

.dynamic-survey-button__progress-bar--survey {
  --progress-bar-fill-color: var(--semantic-accent-a); /* green for survey progress */
}

.dynamic-survey-button__progress-bar--report {
  --progress-bar-fill-color: var(--semantic-success); /* blue for report generation */
}

.dynamic-survey-button__progress-bar--failed {
  --progress-bar-fill-color: var(--semantic-danger); /* red for failed reports */
}

/* Make failed progress bar more prominent with border and static stripes */

.dynamic-survey-button__progress-bar--failed .progress-bar-container {
  border: 2px solid var(--semantic-danger);
  background-color: color-mix(in srgb, var(--semantic-danger) 10%, var(--color-bg-panel));
}

.dynamic-survey-button__progress-bar--failed .progress-bar-fill {
  background-color: var(--semantic-danger);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,0.2) 10px,
    rgba(255,255,255,0.2) 20px
  );
  /* No animation - static stripes indicate error/stopped state */
}

/* Survey Metadata Panel */

.survey-metadata {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /*margin-top: 12px;*/
  padding: 12px 16px;
  /*background: var(--color-background-subtle, #f8f9fa);*/
  /*border: 1px solid var(--color-border, #e0e0e0);*/
  /*border-radius: 8px;*/
  font-size: 14px;
  line-height: 1.5;
}

.survey-metadata__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.survey-metadata__section--status {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.survey-metadata__section--report-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.survey-metadata__info-item {
  display: flex;
  gap: 6px;
  font-size: 13px;
}

.survey-metadata__info-item strong {
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 12px;
}

.survey-metadata__info-item span {
  color: var(--color-text);
  font-weight: 400;
}

.survey-metadata__section strong {
  color: var(--color-text, var(--color-text-primary, #1a1a1a));
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.survey-metadata__section p {
  margin: 0;
  color: var(--color-text-secondary, #666666);
}

.survey-metadata__section span {
  color: var(--color-text-secondary, #666666);
}

.survey-metadata__status {
  display: inline-block;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
  font-size: 14px;
  background: transparent;
}

/* Assessment statuses - Match assessment icon color */

.survey-metadata__status--assessment {
  color: var(--semantic-accent-a) !important;
}

/* Report statuses - Match report icon color */

.survey-metadata__status--report {
  color: var(--semantic-success) !important;
}

/* Legacy status classes for backwards compatibility */

.survey-metadata__status--active {
  color: var(--color-text);
}

.survey-metadata__status--complete {
  color: var(--color-text);
}

.survey-metadata__status--completed {
  color: var(--color-text);
}

.survey-metadata__status--processing {
  color: var(--color-text);
}

.survey-metadata__status--final,
.survey-metadata__status--finalized {
  color: var(--color-text);
}

.survey-metadata__status--failed {
  color: var(--semantic-danger);
  font-weight: 600;
}

.survey-metadata__status--running,
.survey-metadata__status--pending {
  color: var(--color-text);
}

.survey-metadata__progress-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text-secondary, #666666);
}

.survey-metadata__eta {
  font-style: italic;
  color: var(--color-text-tertiary, #999999);
}

/* Workplan progress visualization */

.workplan-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.workplan-progress__stage {
  display: flex;
  align-items: center;
}

.workplan-progress__dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.workplan-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.workplan-progress__dot--succeeded {
  background-color: #2e7d32; /* green */
}

.workplan-progress__dot--running {
  background-color: #1976d2; /* blue */
  animation: pulse 1.5s ease-in-out infinite;
}

.workplan-progress__dot--queued {
  background-color: #f57c00; /* orange/yellow */
}

.workplan-progress__dot--pending {
  background-color: #bdbdbd; /* grey */
}

.workplan-progress__dot--failed {
  background-color: #d32f2f; /* red */
}

.workplan-progress__summary {
  font-size: 12px;
  color: var(--color-text-tertiary, #999999);
  font-style: italic;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* Animated barber pole for report initialization (0% progress waiting state) */

@keyframes barber-pole {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 28.28px 0; /* sqrt(20^2 + 20^2) = 28.28px for seamless 45deg diagonal */
  }
}

.dynamic-survey-button__progress-bar--initializing .progress-bar-container {
  /* Diagonal striped barber pole animation - primary color stripes alternating with progress bar background */
  background: repeating-linear-gradient(
    45deg,
    var(--semantic-success),
    var(--semantic-success) 10px,
    color-mix(in srgb, var(--semantic-success) 30%, var(--progress-bar-bg)) 10px,
    color-mix(in srgb, var(--semantic-success) 30%, var(--progress-bar-bg)) 20px
  );
  background-size: 28.28px 28.28px; /* Match pattern size for seamless tiling */
  animation: barber-pole 1s linear infinite;
  border: 1px solid var(--semantic-success);
}

.dynamic-survey-button__progress-bar--initializing .progress-bar-fill {
  /* Hide the normal fill since we're animating the container background */
  opacity: 0;
}

/* Action button for Manage Invites */

.survey-metadata__action-button {
  padding: 6px 12px;
  background-color: var(--button-bg);
  color: var(--color-text);
  border: 1px solid var(--semantic-gridline);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.2s ease;
  margin-bottom: -6px;
}

.survey-metadata__action-button:hover {
  background-color: var(--button-hover-bg);
}

.survey-metadata__action-button:active {
  background-color: var(--button-active-bg);
}

/* Blue background when report is processing or complete */

.survey-metadata__action-button--processing {
  background-color: var(--button-bg);
  color: var(--color-text);
}

.survey-metadata__action-button--processing:hover {
  background-color: var(--button-hover-bg);
}

.survey-metadata__action-button--processing:active {
  background-color: var(--button-active-bg);
}

/* Responsive adjustments */

@media (max-width: 600px) {
  .survey-metadata {
    padding: 12px;
    gap: 12px;
    font-size: 13px;
  }

  .survey-metadata__section strong {
    font-size: 12px;
  }

  .workplan-progress__dot {
    width: 6px;
    height: 6px;
  }

  /* Smaller icon on mobile */
  .survey-status-icon svg {
    width: 24px;
    height: 24px;
  }

  /* Single column layout for report info on mobile */
  .survey-metadata__section--report-info {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .survey-metadata__info-item {
    font-size: 12px;
  }

  .survey-metadata__info-item strong {
    font-size: 11px;
  }
}

.guestlist-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--semantic-gridline);
    color: var(--semantic-foreground);
    text-align: center;
    padding: 20px;
}

.guestlist-container h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.guestlist-container p {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.guestlist-container p:last-child {
    margin-bottom: 0;
}

/* KabobMenu.css */

/* Kabob Menu */

.kabob-container {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-sm));
  right: var(--space-sm);
  z-index: 1100; /* AppBar level - below modals (1300) but above other content */
  visibility: visible !important; /* Force visibility during resize */
  will-change: transform; /* Optimize for position changes */
  pointer-events: auto;
}

/* Tablet and Above - Adjust for app-frame padding */

@media (min-width: 768px) {
  .kabob-container {
    top: var(--space-md);
    right: var(--space-md);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Kabob Menu Items */

.kabob-menu-item {
  transition: color 0.2s ease;
}

.kabob-menu-item svg {
  transition: color 0.2s ease;
}

.kabob-menu-item:hover svg {
  color: var(--semantic-accent-a);
}

/* Overlay */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* layout.css */

/* Root HTML & Body */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible; /* Allow kabob menu to be visible at all screen sizes */
  box-sizing: border-box;
}

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

/* App Container: Fullscreen or Framed */

.app-layout {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* Dynamic viewport height - respects browser chrome */
  width: 100%; /* Full width of the viewport */
  min-height: 0;
  justify-content: center;
  align-items: stretch; /* Allow children to expand to full width */
  overflow: visible; /* Allow absolutely positioned children of app-frame (like kabob menu) to be visible */
  background-color: var(--color-bg);
}

/* App Frame - Fluid Responsive Container */

.app-frame {
  position: relative;
  width: 100%; /* Full width by default */
  max-width: 100vw; /* Cap at viewport width */
  min-width: 320px; /* Prevent collapse below mobile minimum */
  height: 100dvh; /* Full viewport height */
  max-height: 100dvh; /* Constrain to dynamic viewport height */
  padding: 8px; /* Small padding for mobile */
  padding-bottom: 0; /* No bottom padding - footer handles this */
  background-color: var(--color-bg-alt);
  border-radius: 0; /* No radius on mobile by default */
  box-shadow: none; /* No shadow on mobile */
  display: flex;
  flex-direction: column;
  overflow: visible; /* Allow absolutely positioned children (kabob menu, beta ribbon) to overflow */
  min-height: 0;
  will-change: auto; /* Prevent layout thrashing during resize */
}

.app-frame__arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
}

.app-frame__arrow--top {
  top: 8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--color-text);
}

.app-frame__arrow--bottom {
  bottom: 8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--color-text);
}

.app-frame__content {
  flex: 1; /* Expand to fill remaining space, footer takes its natural height */
  overflow: hidden; /* IMPORTANT: No scroll here - child components handle their own scrolling */
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Ensure child routes (Dashboard, etc.) fill available height */

.app-frame__content > * {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Footer inside app-frame */

.app-frame > .app-footer {
  flex-shrink: 0; /* Footer never shrinks */
  margin-top: 0; /* Remove top margin inside frame */
  border-top: none;
}

/* Beta Ribbon - Centered horizontal badge for all screen sizes */

.beta-ribbon {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  z-index: 1000;
  pointer-events: none;
}

.beta-ribbon::before {
  content: 'BETA';
  position: static;
  display: inline-block;
  transform: none;
  background: linear-gradient(135deg, #e53935 0%, #8e24aa 100%);
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Shrink BETA label on very small screens */

@media (max-width: 480px) {
  .beta-ribbon::before {
    font-size: 8px;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    border-radius: 0 0 4px 4px;
  }
}

/* Mobile - Fullscreen */

@media (max-width: 768px) {
  .app-frame {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: var(--space-sm);
    padding-top: var(--space-sm); /* Consistent padding for centered BETA badge */
    padding-bottom: 0; /* Footer handles bottom spacing */
    border-radius: 0;
    box-shadow: none;
  }

  .app-frame__content {
    padding: 0; /* Content components handle their own padding */
  }
}

/* Tablet and Above - Framed with breathing room */

@media (min-width: 768px) {
  .app-frame {
    /* Reset mobile position fixed */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;

    /* Add slight margin on larger screens for visual comfort */
    margin: var(--space-md) auto;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    min-width: 320px;
    height: calc(100dvh - 32px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
}

/* Desktop - Larger frame */

@media (min-width: 1024px) {
  .app-frame {
    max-width: 960px;
    border-radius: var(--radius-lg);
  }
}

/* Large Desktop - Even wider */

@media (min-width: 1280px) {
  .app-frame {
    max-width: 1200px;
  }
}

/* Extra Large - Maximum comfortable width */

@media (min-width: 1440px) {
  .app-frame {
    max-width: 1360px;
  }
}

/* Ultra Wide - Cap at comfortable reading width */

@media (min-width: 1920px) {
  .app-frame {
    max-width: 1600px;
  }
}

/* Landing component */

.landing-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* NOTE: All scroll gradient functionality uses ScrollGradients component */

/* See: src/components/report/ScrollGradients.jsx */

/* ======================================== */

/*   App-Specific CSS Constants            */

/* ======================================== */

/* These constants are application-specific and not part of the design token system */

:root {
  /* Typography aliases (map to design token font sizes) */
  --font-size-base: var(--font-size-md);

  /* Layout dimensions - app-specific sizes */
  --radius-base: var(--radius-sm);
  --z-sticky: 100;
  --question-header-height: 4rem;
  --navigation-bar-height: 4rem;
  --navigation-button-width: 120px; /* Base size, will scale responsively */
  --node-header-height: 100px;

  /* Button styling */
  --button-border-radius: var(--radius-xl);
  --button-bg: var(--color-bg);
  --button-hover-bg: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg));
  --button-disabled-bg: var(--palette-neutral-100);
  --button-pressed-bg: var(--color-primary);
  --button-checked-bg: var(--color-primary);
  --button-active-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));

  /* Form controls */
  --focus-ring-color: var(--color-primary);
  --selected-color: var(--color-primary);
  --radio-border-color: var(--palette-neutral-300);
  --radio-active-bg: var(--color-primary);
  --radio-focus-ring: var(--color-primary);

  /* Description panel */
  --description-bg: var(--color-bg);
  --description-text-color: var(--color-text);

  /* Progress bar */
  --progress-bar-bg: var(--palette-neutral-300);
  --progress-bar-border-color: var(--palette-neutral-400);
  --progress-bar-error-color: var(--semantic-danger);
  --progress-bar-no-value-color: var(--semantic-danger);
  --progress-bar-out-of-range-color: var(--semantic-warning);
  --progress-bar-fill-color: var(--semantic-success);
  --progress-bar-bounce-color: var(--semantic-success);

  /* Selector button */
  --selector-button-bg: var(--color-bg);
  --selector-button-active-bg: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg));
  --selector-button-disabled-bg: var(--palette-neutral-100);
  --selector-button-focus-ring: color-mix(in srgb, var(--color-primary) 50%, transparent);

  /* Misc */
  --text-color: var(--color-text);
  --light-shadow: var(--elevation-shadow-light, rgba(255, 255, 255, 1));
  --dark-shadow: var(--elevation-shadow-dark, rgba(0, 0, 0, 0.3));
  --inset-light-shadow: var(--elevation-shadow-inset_light, rgba(255, 255, 255, 0.8));
  --inset-dark-shadow: var(--elevation-shadow-inset_dark, rgba(0, 0, 0, 0.25));
  --shadow-outset: var(--elevation-shadow-outset, -6px -6px 16px var(--light-shadow), 6px 6px 16px var(--dark-shadow));
  --shadow-inset: var(--elevation-shadow-inset, inset -4px -4px 10px var(--light-shadow), inset 4px 4px 10px var(--dark-shadow));
}

/* ======================================== */

/*   Mobile-First Responsive Typography     */

/* ======================================== */

/* Fluid typography for better mobile experience */

@media (max-width: 767px) {
  :root {
    /* Scale down font sizes on mobile */
    --font-size-xs: clamp(11px, 2.5vw, 12px);
    --font-size-sm: clamp(13px, 3vw, 14px);
    --font-size-md: clamp(14px, 3.5vw, 16px);
    --font-size-lg: clamp(16px, 4vw, 20px);
    --font-size-xl: clamp(18px, 5vw, 24px);
    --font-size-2xl: clamp(20px, 6vw, 30px);

    /* Slightly reduce navigation button width on mobile */
    --navigation-button-width: clamp(70px, 20vw, 100px);

    /* Increase navigation bar height to prevent button clipping */
    --navigation-bar-height: 3.5rem;
  }
}

/* Desktop: Scale up navigation buttons */

@media (min-width: 1024px) {
  :root {
    --navigation-button-width: 150px;
  }
}

/* Large Desktop: Even larger buttons */

@media (min-width: 1280px) {
  :root {
    --navigation-button-width: 180px;
  }
}

/* Extra Large: Maximum button size */

@media (min-width: 1440px) {
  :root {
    --navigation-button-width: 200px;
  }
}

/* ======================================== */

/*   Mobile Shrink-on-Scroll Header         */

/* ======================================== */

@media (max-width: 768px) {
  /* Dashboard header shrink on scroll */
  .dashboard__title-wrapper {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dashboard__title-wrapper.shrunk {
    padding: var(--space-xs) var(--space-sm);
  }

  .dashboard__title-wrapper.shrunk .dashboard__title {
    font-size: var(--font-size-lg);
  }
}

/* components/Modal.css */

.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  background: var(--semantic-background);
  padding: 24px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  border: 1px solid var(--color-border);
}

/* Invite Accept Modal */

.dynamic-survey-button__accept-message {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, var(--semantic-foreground, #1a1a1a));
  white-space: pre-wrap;
}

.dynamic-survey-button__accept-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.dynamic-survey-button__accept-actions button {
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dynamic-survey-button__accept-actions button:first-child {
  background: var(--color-primary, #1976d2);
  color: white;
}

.dynamic-survey-button__accept-actions button:first-child:hover {
  background: var(--color-primary-hover, #1565c0);
}

.dynamic-survey-button__accept-actions button:last-child {
  background: var(--color-bg-alt, #f5f5f5);
  color: var(--color-text, #1a1a1a);
  border: 1px solid var(--color-border, #e0e0e0);
}

.dynamic-survey-button__accept-actions button:last-child:hover {
  background: var(--color-secondary-hover, #eeeeee);
}

/* Finalize Modal - larger and more prominent */

.modal-content--finalize {
  max-width: 540px;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  border: 2px solid var(--color-border);
}

.modal-finalize__title {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text, var(--semantic-foreground, #1a1a1a));
}

.modal-finalize__warning {
  margin: 0 0 24px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary, var(--semantic-muted, #666666));
  padding: 12px 16px;
  background: var(--color-bg-alt, #f5f5f5);
  border-left: 3px solid var(--color-warning, #ff9800);
  border-radius: 4px;
}

.modal-finalize__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-finalize__button {
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.modal-finalize__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.modal-finalize__button:active {
  transform: translateY(0);
}

/* Primary button - Finalize */

.modal-finalize__button--primary {
  background: var(--color-primary, #1976d2);
  color: white;
}

.modal-finalize__button--primary:hover {
  background: var(--color-primary-hover, #1565c0);
}

/* Secondary button - Continue */

.modal-finalize__button--secondary {
  background: var(--color-bg-alt, #f5f5f5);
  color: var(--color-text, #1a1a1a);
  border: 1px solid var(--color-border, #e0e0e0);
}

.modal-finalize__button--secondary:hover {
  background: var(--color-bg-panel, #eeeeee);
}

/* Tertiary button - Cancel */

.modal-finalize__button--tertiary {
  background: transparent;
  color: var(--color-text-secondary, var(--semantic-muted, #666666));
  border: 1px solid var(--color-border, #e0e0e0);
}

.modal-finalize__button--tertiary:hover {
  background: var(--color-bg-alt, #fafafa);
  border-color: var(--color-border, #d0d0d0);
}

/* Responsive adjustments */

@media (max-width: 600px) {
  .modal-content--finalize {
    max-width: 90%;
    padding: 24px;
  }

  .modal-finalize__title {
    font-size: 18px;
  }

  .modal-finalize__button {
    padding: 12px 20px;
    font-size: 15px;
  }
}

/* ProgressBar.css */

.progress-bar-container {
  width: 100%;                /* ensure the track spans the card */
  min-height: var(--space-6); /* 24px - more compact for mobile */
  background-color: var(--progress-bar-bg, #e9edf3);
  border-radius: var(--radius-base);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--semantic-gridline, #d0d7de);
  display: flex;
  align-items: center;        /* Vertically center content */
}

/* Desktop: slightly taller progress bars */

@media (min-width: 768px) {
  .progress-bar-container {
    min-height: var(--space-8); /* 32px on larger screens */
  }
}

.progress-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  /* Use theme primary accent color */
  background-color: var(--progress-bar-fill-color, var(--semantic-accent-a));
}

/* Animated shimmer gradient for report processing */

.progress-bar-fill.progress-bar-fill--animated {
  /* Keep absolute positioning - don't override */
  overflow: hidden;
}

.progress-bar-fill.progress-bar-fill--animated::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progress-bar-shimmer 2s ease-in-out infinite;
}

/* Special animation when at 0% - show bouncing shimmer band */

.progress-bar-container--at-zero .progress-bar-fill--animated {
  /* Need to override dynamic width for 0% state */
  width: 100%;
  background: var(--progress-bar-bg, #e9edf3);
  position: relative;
  overflow: hidden;
}

/* Create a visible shimmer band that bounces back and forth */

.progress-bar-container--at-zero .progress-bar-fill--animated::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--semantic-accent-a) 40%, transparent) 50%,
    transparent 100%
  );
  animation: progress-bar-shimmer-bounce 1.5s ease-in-out infinite;
}

@keyframes progress-bar-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes progress-bar-pulse-opacity {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes progress-bar-shimmer-bounce {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(233%);
  }
  100% {
    transform: translateX(0);
  }
}

.progress-bar-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
  color: #1a1a1a;             /* Dark text for better contrast on light/colored backgrounds */
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-height-tight);
  padding: 0 var(--space-2);
  text-shadow:
    0 0 3px rgba(255,255,255,0.8),
    0 0 6px rgba(255,255,255,0.6); /* White glow for readability on any background color */
  z-index: 10;
}

.progress-bar-error {
  background-color: var(--progress-bar-error-color, #d32f2f);
}

.progress-bar-no-value {
  background-color: var(--progress-bar-no-value-color, #d32f2f);
}

.progress-bar-out-of-range {
  background-color: var(--progress-bar-out-of-range-color, #ed6c02);
}

.progress-bar-bounce {
  width: 15%;
  height: 100%;
  background-color: var(--progress-bar-bounce-color, var(--semantic-accent-a));
  position: absolute;
  animation: bounce 1.5s infinite linear;
}

@keyframes bounce {
  0%   { left: 0; }
  50%  { left: 85%; }
  100% { left: 0; }
}

/* questions.css */

/* Question Area */

.question-area {
  display: flex;
  flex-direction: column;
  flex: 1 1 0; /* take all available space */
  min-height: 0; /* allow children to shrink */
  overflow: hidden; /* clip children, so they can scroll */
  position: relative; /* for absolute positioning of transitioning elements */
}

.question-container {
  display: grid;
  grid-template-columns: 1fr;
  /*grid-template-rows: auto auto 1fr auto;*/
  grid-template-rows: auto 1fr;
  flex: 1 1 0;
  min-height: 0;         /* critical for its child to scroll */
  height: 100%;          /* fill parent */
  overflow: hidden;      /* prevent this container from scrolling */
}

/* Question transition wrapper */

.question-transition-wrapper {
  display: contents; /* Pass-through container that doesn't affect layout */
}

/* Question transition animations */

@media (prefers-reduced-motion: no-preference) {
  .question-transition-wrapper {
    display: block;
    height: 100%;
  }

  /* Smooth fade for questions within same node */
  .question-transition-wrapper.transitioning-in[data-direction="forward"] .question-container {
    animation: questionSlideInFromRight 0.25s ease-out;
  }

  .question-transition-wrapper.transitioning-in[data-direction="backward"] .question-container {
    animation: questionSlideInFromLeft 0.25s ease-out;
  }

  /* Default fade-in when no direction specified */
  .question-transition-wrapper.transitioning-in[data-direction="null"] .question-container,
  .question-transition-wrapper.transitioning-in:not([data-direction]) .question-container {
    animation: questionFadeIn 0.2s ease-out;
  }

  @keyframes questionSlideInFromRight {
    from {
      opacity: 0;
      transform: translateX(24px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes questionSlideInFromLeft {
    from {
      opacity: 0;
      transform: translateX(-24px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes questionFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Node-level transition styles */

.node-form {
  animation: nodeFadeIn 0.3s ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes nodeFadeIn {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* for WebKit browsers (Chrome, Safari, Edge…) */

.question-area::-webkit-scrollbar,
.question-options::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Question Header - stays at top, doesn't scroll */

.question-header {
  position: relative;
  z-index: 50;
  border-bottom: 2px solid var(--color-border);
  padding: var(--space-md);
  background-color: var(--color-bg-alt);
  grid-row: 1;
}

/* Question text - stays in header, doesn't scroll */

.question-text {
  line-height: 1.4;
  margin: 0;
  padding: 0;

  /* text settings */
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
}

/* Position description toggle inline with question text */

.question-text .description-panel__toggle {
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--space-xs);
  cursor: pointer;
}

/* Description body appears below the question text */

.question-text .description-panel__body {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--font-size-base);
  font-weight: 400;
}

/* Scroll indicator wrapper in question context - takes the 1fr grid row */

.question-container .scroll-indicator-wrapper {
  grid-row: 3; /* explicitly place in the 1fr row */
  min-height: 0;
  overflow: hidden;
}

/* the answers flow under the question-text and scroll */

.question-options {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  align-items: center;
  padding: var(--space-md);
  /*padding-bottom: var(--navigation-bar-height); !* Space for navigation buttons *!*/

  /* for Firefox */
  scrollbar-width: none;

  /* for IE10+ */
  -ms-overflow-style: none;
}

/* Selected Option */

.question-selected-option {
  display: inline-block;
  margin: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

/* Question Footer */

/*.question-footer {*/

/*  height: var(--navigation-bar-height);*/

/*  position: sticky;*/

/*  bottom: 0;*/

/*  left: 0;*/

/*  right: 0;*/

/*}*/

.numeric-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-md);
}

.value-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.value-button {
  width: 2rem;
  height: 2rem;
  background-color: var(--button-bg);
  border: none;
  border-radius: var(--border-radius);
  color: var(--text-color);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.slider-value {
  margin: 0 0.5rem;
  font-size: var(--font-size-lg);
  font-weight: bold;
}

/* Option Label */

.option-label {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--semantic-accent-a) 15%, white);
}

.option-label input {
  margin-right: 0.5rem;
}

/* Reset Button Container */

.reset-button-container {
  margin: 0;
  padding: 0;
}

/* Sticky Navigation Bar */

.navigation-bar {
  position: sticky;
  bottom: 0;
  height: var(--navigation-bar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  /*box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);*/
  z-index: 90;
}

/* Navigation Buttons */

.navigation-button {
  width: var(--navigation-button-width);
  height: calc(var(--navigation-bar-height) - var(--space-md));
  background-color: var(--color-bg-panel);
  border: 1px solid color-mix(in srgb, var(--semantic-accent-a) 40%, transparent);
  border-radius: var(--radius-base);
  color: var(--color-text);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-outset);
  opacity: 1;
  transition: all 0.2s ease;
}

.navigation-button:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--semantic-accent-a) 15%, var(--color-bg-panel));
  border-color: var(--semantic-accent-a);
  box-shadow: var(--shadow-outset),
              0 0 12px color-mix(in srgb, var(--semantic-accent-a) 30%, transparent);
}

.navigation-button:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--semantic-accent-a) 25%, var(--color-bg-panel));
  box-shadow: var(--shadow-inset);
}

.navigation-button:disabled {
  background-color: var(--color-bg-alt);
  color: var(--semantic-muted);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  border: 1px solid var(--color-border);
  opacity: 0.5;
  cursor: not-allowed;
}

/* ======================================== */

/*   Mobile Improvements (<768px)           */

/* ======================================== */

@media (max-width: 768px) {
  /* Reduce question header padding and font size */
  .question-header {
    padding: var(--space-sm);
    border-bottom-width: 1px;
  }

  .question-text {
    font-size: var(--font-size-lg);
    line-height: 1.3;
    -webkit-line-clamp: 4; /* Allow one more line on mobile */
  }

  /* Reduce options area padding */
  .question-options {
    padding: var(--space-sm);
  }

  /* Reduce navigation bar spacing */
  .navigation-bar {
    height: var(--navigation-bar-height);
    padding: var(--space-xs) var(--space-sm);
  }

  .navigation-button {
    height: calc(var(--navigation-bar-height) - var(--space-sm));
    font-size: 24px;
  }

  /* Tree picker mobile optimizations */
  .unified-tree-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  /* Hide full selected items list by default on mobile */
  .selected-items {
    display: none;
    flex-wrap: wrap;
  }

  /* Show badge on mobile */
  .selected-items-badge-mobile {
    display: block;
    margin-bottom: var(--space-xs);
  }

  /* Show selected items when expanded on mobile */
  .selected-items.mobile-expanded {
    display: flex;
    position: relative;
    z-index: 10;
    background: var(--color-bg-alt);
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: var(--space-sm);
  }

  /* Tree branch styling improvements for mobile */
  .tree-branch-node {
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-xs);
  }

  .tree-branch-label {
    font-size: var(--font-size-md);
  }
}

/* Desktop: hide badge, always show selected items */

@media (min-width: 768px) {
  .selected-items-badge-mobile {
    display: none;
  }

  .selected-items {
    display: flex;
    flex-wrap: wrap;
  }
}

/* UnifiedButton.css */

/* Container for option + description toggle */

/*.response-option-wrapper {*/

/*  display: flex;*/

/*  flex-direction: row;*/

/*  align-items: center;*/

/*  padding-bottom: var(--space-xl);*/

/*}*/

/* Unified Button */

.unified-button {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  /*height: 100%*/
  /*width: 97%;*/
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
  font-size: var(--font-size-base);
  border-radius: var(--radius-base);
  background-color: var(--color-bg-panel);
  border: 2px solid transparent; /* Prevent layout shift when active border appears */
  box-shadow: var(--shadow-outset);
  cursor: pointer;
  transition: box-shadow 0.3s ease-in-out;
  position: relative;
  margin-bottom: var(--space-md);
  /*padding-top: calc(var(--space-md) + var(--space-sm)); !* room for icon *!*/
}

/* ① pin the description panel toggle in the corner */

/* Add padding to button content when description toggle is present */

.unified-button:has(> .description-panel__toggle),
.unified-button:has(> .description-panel__wrapper) {
  padding-right: calc(var(--space-md) + 3rem);
}

/* More padding on desktop to ensure label doesn't overlap */

@media (min-width: 768px) {
  .unified-button:has(> .description-panel__toggle),
  .unified-button:has(> .description-panel__wrapper) {
    padding-right: calc(var(--space-md) + 5rem);
  }
}

.unified-button > .description-panel__toggle {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  cursor: pointer;
  /*z-index: 20;*/
  z-index: 1;
}

/* In compact mode, align KabobMenu vertically with button label */

html[data-spacing="efficient"] .unified-button > .description-panel__toggle {
  top: 50%;
  transform: translateY(-50%);
}

/* target the panel wrapper that lives as a direct child */

.unified-button > .description-panel__wrapper {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 21;
  width: auto;
}

.unified-button.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  background-color: color-mix(in srgb, var(--semantic-accent-a) 30%, #5a6c7d);
  border: 2px solid var(--semantic-accent-a);
  /* Subtle inner glow for premium feel */
  outline: 2px solid color-mix(in srgb, var(--semantic-accent-a) 40%, transparent);
  outline-offset: -4px;
}

/* Active button label should be full brightness */

.unified-button.active .unified-button__label {
  color: var(--color-text);
}

.unified-button.disabled {
  background-color: var(--color-border);
  color: var(--semantic-muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* Content Alignment */

.unified-button__content {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

/* Label */

.unified-button__label {
  flex-grow: 1;
  text-align: center;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--semantic-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Max 3 lines before ellipsis */
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

/* Smaller labels on mobile */

@media (max-width: 767px) {
  .unified-button__label {
    font-size: var(--font-size-sm);
    font-weight: 400;
  }
}

/* Description */

.unified-button__description {
  width: 100%;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-base);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
  font-size: var(--font-size-base);
  color: var(--color-text);
  text-align: left;
}

.unified-button .description-panel__toggle {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  /*z-index: 23;              !* above the button background *!*/
  z-index: 1;
}

/* Progress Bar inside button */

.unified-button__progress {
  width: 100%;
  padding: 0;
}

/* shrink vertical padding when there’s no progress bar */

.unified-button__no-progress {
  /* instead of var(--space-md) top/bottom, use smaller */
  padding: var(--space-sm) var(--space-md);
}

/* section-style UnifiedButton overrides */

/* survey‐style button: medium‐weight, base size */

.unified-button.unified-button--survey {
  text-align: center;
  padding-top: 48px;
}

.unified-button.unified-button--survey .unified-button__content {
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-3);
}

.unified-button.unified-button--survey .unified-button__title {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Max 2 lines for survey titles */
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  padding-left: 44px; /* Space for icon */
  padding-right: 44px; /* Space for collapse/expand icon */
}

.unified-button.unified-button--survey .unified-button__label {
  font-weight: 700;
  font-size: var(--font-size-xl);
  text-align: center;
}

/* report‐style button: subtle primary-colored background for completed reports */

.unified-button.unified-button--report {
  background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-panel));
  text-align: left;
  padding-top: 48px;
}

.unified-button.unified-button--report .unified-button__content {
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.unified-button.unified-button--report .unified-button__title {
  width: 100%;
  text-align: left;
  font-weight: 700;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Max 2 lines for report titles */
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  padding-left: 44px; /* Space for icon */
  padding-right: 44px; /* Space for collapse/expand icon */
}

.unified-button.unified-button--report .unified-button__label {
  font-weight: 700;
  font-size: var(--font-size-xl);
  text-align: left;
}

/* section‐style button: medium‐weight, base size */

.unified-button--section {
  background-color: var(--button-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  /* keep only enough padding for the label (and optional toggle/progress) */
  padding: var(--space-sm);
  position: relative;
}

/* if there’s a progress bar, give it a little breathing room */

.unified-button--section .progress-bar-container {
  margin-top: var(--space-sm);
}

.unified-button--section .unified-button__label {
  font-weight: 600;
  font-size: var(--font-size-lg);
}

/* question‐style button: */

.unified-button--question .unified-button__label {
  font-weight: 500;
  font-size: var(--font-size-base);
}

/* ghost‐style button: subtle styling for completed items */

.unified-button--ghost {
  background-color: var(--color-bg-panel);
  transition: background-color 0.2s ease;
}

.unified-button--ghost .unified-button__title {
  font-weight: 600;
}

/* ======================================== */

/*   Responsive Adjustments                */

/* ======================================== */

/* Mobile: Compact button styling */

@media (max-width: 767px) {
  .unified-button {
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
  }

  .unified-button__label {
    font-size: var(--font-size-sm);
    -webkit-line-clamp: 3; /* Limit lines for more compact display */
  }

  /* Adjust description toggle position for mobile */
  .unified-button:has(> .description-panel__toggle),
  .unified-button:has(> .description-panel__wrapper) {
    padding-right: calc(var(--space-sm) + 2.5rem); /* Less padding on mobile */
  }

  /* Survey buttons on mobile - restore normal padding */
  .unified-button.unified-button--survey {
    padding: var(--space-lg) var(--space-md);
    margin-bottom: var(--space-sm);
  }

  .unified-button.unified-button--survey .unified-button__title {
    font-size: var(--font-size-xl);
    padding-left: 36px; /* Adjusted for smaller icon on mobile */
    padding-right: 36px; /* Space for collapse/expand icon on mobile */
  }

  .unified-button.unified-button--survey .unified-button__label {
    font-size: var(--font-size-lg);
  }

  /* Report buttons on mobile - restore normal padding */
  .unified-button.unified-button--report {
    padding: var(--space-lg) var(--space-md);
    margin-bottom: var(--space-sm);
  }

  .unified-button.unified-button--report .unified-button__title {
    font-size: var(--font-size-xl);
    padding-left: 36px; /* Adjusted for smaller icon on mobile */
    padding-right: 36px; /* Space for collapse/expand icon on mobile */
  }

  .unified-button.unified-button--report .unified-button__label {
    font-size: var(--font-size-lg);
  }

  /* Ghost buttons on mobile - restore normal padding */
  .unified-button.unified-button--ghost {
    padding: var(--space-lg) var(--space-md);
    margin-bottom: var(--space-sm);
  }

  /* Section buttons on mobile */
  .unified-button--section .unified-button__label {
    font-size: var(--font-size-md);
  }

  /* Question buttons on mobile - more compact */
  .unified-button--question {
    padding: var(--space-xs) var(--space-sm);
  }

  .unified-button--question .unified-button__label {
    font-size: var(--font-size-sm);
    font-weight: 400;
  }
}

/* Tablet: Medium button styling */

@media (min-width: 768px) and (max-width: 1023px) {
  .unified-button {
    padding: var(--space-md);
  }

  .unified-button__label {
    font-size: var(--font-size-base);
  }
}

/* Desktop: Larger buttons with more spacing */

@media (min-width: 1024px) {
  .unified-button {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .unified-button__label {
    font-size: var(--font-size-lg);
  }

  .unified-button.unified-button--survey .unified-button__title {
    font-size: var(--font-size-2xl);
  }

  .unified-button.unified-button--report .unified-button__title {
    font-size: var(--font-size-2xl);
  }
}

/* utilities.css - Mobile-First Responsive Utilities */

/* ========================================
   INLINE EVIDENCE CITATIONS
   ======================================== */

/* Inline evidence reference links (e.g., [1], [2]) */

sup a.evidence-ref {
  text-decoration: none;
  color: var(--semantic-accent-a);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 2px;
}

sup a.evidence-ref:hover {
  text-decoration: underline;
  opacity: 0.8;
}

sup a.evidence-ref:focus {
  outline: 2px solid var(--semantic-accent-a);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ========================================
   TEXT OVERFLOW & WRAPPING UTILITIES
   ======================================== */

/* Truncate with ellipsis - single line */

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Allow text to wrap at word boundaries */

.text-wrap {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Break long words/URLs without spaces */

.text-break {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Break at any character (use sparingly) */

.text-break-all {
  word-break: break-all;
}

/* Clamp text to N lines with ellipsis */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================
   CONTAINER & WIDTH UTILITIES
   ======================================== */

/* Ensure element stays within viewport */

.max-w-full {
  max-width: 100%;
}

.w-full {
  width: 100%;
}

/* Prevent content from overflowing container */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-auto {
  overflow-x: auto;
  overflow-y: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ========================================
   MOBILE-SPECIFIC UTILITIES
   ======================================== */

/* Hide on mobile (< 768px) */

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Show only on mobile */

.show-mobile {
  display: none;
}

@media (max-width: 768px) {
  .show-mobile {
    display: block;
  }
}

/* ========================================
   RESPONSIVE SPACING UTILITIES
   ======================================== */

/* Reduce padding on small screens */

.padding-responsive {
  padding: var(--space-4);
}

@media (max-width: 768px) {
  .padding-responsive {
    padding: var(--space-2);
  }
}

/* ========================================
   TEXT ALIGNMENT
   ======================================== */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* ========================================
   MARGIN UTILITIES
   ======================================== */

.margin-bottom {
  margin-bottom: var(--space-md);
}

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

/* ========================================
   MOBILE-RESPONSIVE OVERRIDES FOR MUI
   ======================================== */

/* NOTE: MUI component styling is now handled in ThemeContext.jsx */

/* See: src/contexts/ThemeContext.jsx for MuiPaper, MuiTypography, MuiTableCell, etc. */

/* ========================================
   CONTENT CARD UTILITIES (Reports, Risks, Findings)
   ======================================== */

/* Base card wrapper with overflow protection */

.content-card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Card text content that should wrap */

.content-card__text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}

/* Card text that should truncate with ellipsis */

.content-card__text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Card text that should clamp to multiple lines */

.content-card__text--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* For risk/finding metadata that can be tighter */

.content-card__meta {
  font-size: var(--font-size-sm);
  color: var(--semantic-muted);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .content-card {
    padding: var(--space-2);
  }

  .content-card__meta {
    font-size: var(--font-size-xs);
  }
}

/* Global Resets */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  /* Firefox */
  scrollbar-width: none !important;
  /* Internet Explorer 10+ */
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  /* Chrome, Safari, and Opera */
  display: none !important;
}

body {
  /* Brand font first; broad CJK/emoji fallbacks require system packages: fonts-noto-cjk, fonts-noto-color-emoji */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
               'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK SC', 'Noto Sans CJK KR', 'Noto Sans CJK TC',
               'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base, 1.5);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Smooth page transitions for route changes */

@media (prefers-reduced-motion: no-preference) {
  /* Use CSS View Transitions API for smooth route changes */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 200ms;
    animation-timing-function: ease-out;
  }

  ::view-transition-old(root) {
    animation-name: slideOutLeft;
  }

  ::view-transition-new(root) {
    animation-name: slideInRight;
  }

  @keyframes slideOutLeft {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-20px);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

@font-face{
  font-family:"IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono/IBMPlexMono-Var.woff2") format("woff2"); /* or IBMPlexMonoVar-Roman.woff2 */
  font-weight:100 700; font-style:normal; font-display:swap;
}

code, pre {
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; /* nice for numbers in code/tables */
}

/* =============================================================================
   FOOTER STYLES
   ============================================================================= */

.app-footer {
  padding: var(--space-xs, 0.5rem) var(--space-sm, 0.5rem);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted, #6b7280);
  border-top: none;
  background-color: var(--color-bg-alt, transparent);
  margin-top: auto;
}

.app-footer .footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.app-footer .copyright-text {
  white-space: nowrap;
}

.app-footer .footer-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

.app-footer .footer-separator {
  margin: 0 0.25rem;
}

.app-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.app-footer a:hover {
  color: var(--color-primary, #3b82f6);
  text-decoration: underline;
}

.app-footer a:focus {
  outline: 2px solid var(--color-primary, #3b82f6);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mobile: reduce padding - keep on single line */

@media (max-width: 768px) {
  .app-footer {
    padding: 0.1rem 0.25rem;
    line-height: 1.2;
    font-size: 0.65rem;
  }

  .app-footer .footer-content {
    gap: 0.15rem;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }

  .app-footer .footer-separator {
    margin: 0 0.15rem;
  }
}

@media (max-width: 480px) {
  .app-footer {
    font-size: 0.6rem;
    padding: 0.08rem 0.2rem;
    line-height: 1.2;
  }

  .app-footer .footer-content {
    gap: 0.1rem;
    align-items: center;
    justify-content: center;
  }

  .app-footer .footer-separator {
    margin: 0 0.1rem;
  }

  .app-footer .footer-links {
    gap: 0.1rem;
    display: inline-flex;
    align-items: center;
  }
}

/* Legal pages styling */

.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-lg, 2rem) var(--space-md, 1rem);
  line-height: 1.6;
  /* ScrollIndicator handles scrolling, so legal-page just contains content */
}

.legal-page h1 {
  font-size: 2rem;
  margin-bottom: var(--space-sm, 0.5rem);
  color: var(--color-text, #1f2937);
}

.legal-page h2 {
  font-size: 1.5rem;
  margin-top: var(--space-md, 1rem);
  margin-bottom: var(--space-sm, 0.75rem);
  color: var(--color-text, #1f2937);
}

.legal-page h3 {
  font-size: 1.25rem;
  margin-top: var(--space-sm, 0.75rem);
  margin-bottom: var(--space-xs, 0.5rem);
  color: var(--color-text-secondary, #374151);
}

.legal-page p {
  margin-bottom: var(--space-sm, 0.75rem);
}

.legal-page ul {
  margin-left: var(--space-lg, 1.5rem);
  margin-bottom: var(--space-sm, 0.75rem);
}

.legal-page li {
  margin-bottom: var(--space-xs, 0.5rem);
}

.legal-page .last-updated {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.875rem;
  font-style: italic;
  margin-bottom: var(--space-md, 1rem);
}

.legal-page section {
  margin-bottom: var(--space-md, 1rem);
}