/* 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 */
}

/* 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 - Official scroll gradient styles */

.scroll-gradient {
  position: absolute;
  left: 0;
  right: 0;
  height: 48px; /* Taller for more gradual, visible fade */
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.3s ease-in-out;

  /* Horizontal mask - subtle fade only at absolute edges (12px fade on each side) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 0.75rem, black calc(100% - 0.75rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 0.75rem, black calc(100% - 0.75rem), transparent 100%);
}

.scroll-gradient--top {
  top: 0;
}

.scroll-gradient--bottom {
  bottom: 0;
}
.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;
}

/* Header - Fixed */
.viewer-header {
  flex-shrink: 0;
  padding: 8px 12px;
  background: transparent;
  border-bottom: none;
  z-index: 10;
}

.header-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

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

.btn-back,
.btn-report {
  padding: 4px 8px;
  border: none;
  background: transparent;
  border-radius: 3px;
  font-size: 12px;
  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: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.domain-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 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: 6px;
}

.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: 6px 6px 0 0;
}

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

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

.domain-name {
  font-size: 15px;
  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: 3px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.domain-nodes {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.node-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  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: 10px;
  color: var(--semantic-muted);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

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

.node-name {
  font-size: 13px;
  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: 3px;
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
}

/* Node Content */
.node-content {
  padding: 8px 12px 12px;
}

.node-description {
  margin: 0 0 12px;
  padding: 8px 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: 11px;
  line-height: 1.4;
  border-radius: 3px;
}

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

/* Ultra-Compact Question Display - Horizontal Layout */
.question-compact {
  padding: 8px 12px;
  background: var(--color-bg);
  transition: all 0.15s;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.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: 8px;
  flex: 1;
  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: 3px;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
}

.q-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
  flex: 1;
}

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

.question-answer {
  flex-shrink: 0;
  max-width: 60%;
  display: flex;
  align-items: flex-start;
}

/* Options Display Container */
.options-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Selected Options as Tiny Badges */
.selected-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.unselected-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

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

.option-badge.selected {
  background: var(--semantic-success);
  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: 3px;
  font-size: 11px;
  font-weight: 500;
}

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

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

.error-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.btn-primary,
.btn-secondary {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  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: 8px;
  }

  .viewer-content {
    padding: 8px;
  }

  .viewer-title {
    font-size: 16px;
  }

  .node-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

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

  .question-compact {
    flex-direction: column;
    gap: 6px;
  }

  .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 */
  .node-content {
    display: block !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 rgba(255, 255, 255, 0.3);
  border-top-color: #1976d2;
  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: #d32f2f;
}

/* No data state */
.executive-summary-no-data {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 24px;
  max-width: 100%;
}

.metric-tile {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible;
  max-width: 100%;
}

.metric-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.08);
}

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

.metric-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 8px;
  overflow: visible;
}

.metric-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* Donut Chart */
.donut-center-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.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: 4px;
  padding: 8px 12px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 10000;
  white-space: nowrap;
  font-weight: 500;
}

/* Summary Section */
.summary-section {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: rgba(255, 255, 255, 0.9);
}

.summary-content {
  color: rgba(255, 255, 255, 0.85);
}

.summary-content p {
  margin-bottom: 16px;
  line-height: 1.7;
  font-size: 1rem;
}

.summary-content .evidence-ref-link {
  cursor: pointer;
  color: #90caf9;
}

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

/* Recommendations Section */
.recommendations-section {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
}

.recommendations-list {
  padding-left: 16px;
  margin: 0;
  list-style-type: decimal;
}

.recommendation-item {
  margin-bottom: 12px;
}

.recommendation-item::marker {
  font-weight: 600;
  color: #90caf9;
}

.recommendation-content {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.recommendation-text {
  line-height: 1.6;
  font-size: 0.95rem;
  cursor: pointer;
  flex: 1;
  color: rgba(255, 255, 255, 0.85);
}

.recommendation-text:hover {
  color: #90caf9;
  text-decoration: underline;
}

.no-data-message {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}
/* 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;
}

/* 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;
  /* Constrain height so the page keeps all tables visible */
  max-height: clamp(220px, 33vh, 400px);
  overflow: hidden;
  /* ensure inner scroll area defines the clipping context */
}

/* Optional: different heights per section */
.table-card--accounts { max-height: 28vh; }
.table-card--surveys  { max-height: 35vh; }
.table-card--reports  { max-height: 35vh; }

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

/* Compact variant for mobile */
@media (max-width: 720px) {
  .table th, .table td { padding: 8px 10px; }
  .table-card { max-height: 60vh; }
}/* 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 2025-12-09T22:26:45Z | theme_version=22 */

: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-risk-low: #2C5F2D;
  --palette-risk-medium-low: #6B8E23;
  --palette-risk-medium: #F47B20;
  --palette-risk-high: #C1292E;
  --palette-risk-critical: #8B0000;
  --palette-pastel-cyan-light: #8dd3c7;
  --palette-pastel-yellow-light: #f4e04d;
  --palette-pastel-purple-light: #bebada;
  --palette-pastel-red-light: #fb8072;
  --palette-pastel-blue-light: #80b1d3;
  --palette-pastel-orange-light: #fdb462;
  --palette-pastel-green-light: #b3de69;
  --palette-pastel-pink-light: #fccde5;
  --palette-pastel-mint-light: #ccebc5;
  --palette-pastel-lavender-light: #bc80bd;
  --palette-pastel-jade-light: #6ba292;
  --palette-pastel-periwinkle-light: #7d87c8;
  --palette-pastel-mauve-light: #d4a5a5;
  --palette-pastel-tan-light: #c9a56e;
  --semantic-background: #ffffff;
  --semantic-foreground: #2c3e50;
  --semantic-muted: #718096;
  --semantic-gridline: #e2e8f0;
  --semantic-accent-a: #2C5F2D;
  --semantic-accent-b: #44546A;
  --semantic-success: #2C5F2D;
  --semantic-warning: #F47B20;
  --semantic-danger: #C1292E;
  --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;
  --chart-width: 1200px;
  --chart-height: 720px;
  --chart-dpi: 144;
  --chart-padding: 16px;
  --grid-visible: true;
  --grid-style: "--";
  --grid-width: 1.0;
  --chart-color-cycle: #2C5F2D, #44546A, #6B8E23, #F47B20, #C1292E, #556B2F, #8B4513, #2F4F4F;
  --color-1: #2C5F2D;
  --color-2: #44546A;
  --color-3: #6B8E23;
  --color-4: #F47B20;
  --color-5: #C1292E;
  --color-6: #556B2F;
  --color-7: #8B4513;
  --color-8: #2F4F4F;
  --color-9: #2C5F2D;
  --color-10: #44546A;
  --color-11: #6B8E23;
  --color-12: #F47B20;
  --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: #7AB8D3;
  --heat-scale-hot: #D9603B;
  --heat-scale-steps: 24;
  --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                 */

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

/* Compact: 75% of base spacing */

html[data-spacing="compact"] {
  --space-unit: 3px;
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 9px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 18px;
  --space-7: 21px;
  --space-8: 24px;
  --space-9: 27px;
  --space-10: 30px;
  --space-11: 33px;
  --space-12: 36px;
}

/* Spacious: 125% of base spacing */

html[data-spacing="spacious"] {
  --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;
}

/* screen-dark.css — generated 2025-12-09T22:26:45Z | theme_version=22 */

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

html[data-theme="dark"] {
  --palette-neutral-50: #1a202c;
  --palette-neutral-100: #2d3748;
  --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-risk-low: #68d391;
  --palette-risk-medium-low: #9ae6b4;
  --palette-risk-medium: #f6ad55;
  --palette-risk-high: #fc8181;
  --palette-risk-critical: #feb2b2;
  --palette-pastel-cyan-light: #76c7c0;
  --palette-pastel-yellow-light: #ead547;
  --palette-pastel-purple-light: #b8aed5;
  --palette-pastel-red-light: #f77066;
  --palette-pastel-blue-light: #7aa3c9;
  --palette-pastel-orange-light: #f5a855;
  --palette-pastel-green-light: #a5d95e;
  --palette-pastel-pink-light: #f5bdd9;
  --palette-pastel-mint-light: #c0e5bb;
  --palette-pastel-lavender-light: #b376b3;
  --palette-pastel-jade-light: #5f9888;
  --palette-pastel-periwinkle-light: #7580be;
  --palette-pastel-mauve-light: #c89999;
  --palette-pastel-tan-light: #bf9b64;
  --semantic-background: #1a202c;
  --semantic-foreground: #f7fafc;
  --semantic-muted: #cbd5e0;
  --semantic-gridline: #4a5568;
  --semantic-accent-a: #82C99A;
  --semantic-accent-b: #94a3b8;
  --semantic-success: #68d391;
  --semantic-warning: #f6ad55;
  --semantic-danger: #fc8181;
  --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);
  --chart-color-cycle: #68d391, #94a3b8, #9ae6b4, #f6ad55, #fc8181, #a5d95e, #f5a855, #7aa3c9;
  --color-1: #68d391;
  --color-2: #94a3b8;
  --color-3: #9ae6b4;
  --color-4: #f6ad55;
  --color-5: #fc8181;
  --color-6: #a5d95e;
  --color-7: #f5a855;
  --color-8: #7aa3c9;
  --heat-scale-cold: #6BA8C1;
  --heat-scale-hot: #C45532;
  --heat-scale-steps: 24;
  --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 2025-12-09T22:26:45Z | theme_version=22 */

@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 */

/* buttons.css */

/*@import './DynamicSurveyButton.css';*/

/*@import './UnifiedButton.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: 2rem;
}

/* Login Button */

.login-button {
  flex: 1;
  margin-right: var(--space-md);
  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: 100px;
  max-width: 80%;
  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: 1.5rem; /* 24px */
}

/* Larger icon on desktop */

@media (min-width: 1024px) {
  .description-button svg {
    font-size: 2rem; /* 32px */
  }
}

.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-sm);
  gap: var(--space-sm);
  background-color: var(--color-bg-alt);
  width: 100%;
  margin: 0;
  z-index: 90;
}

/*.navigation-buttons-wrapper {*/

/*  position: absolute;*/

/*  bottom: 0;*/

/*  left: 0;*/

/*  right: 0;*/

/*  !* include margin in height *!*/

/*  height: calc(var(--navigation-bar-height) + var(--space-sm));*/

/*  display: flex;*/

/*  justify-content: space-evenly;*/

/*  align-items: center;*/

/*  padding: var(--space-sm);*/

/*  gap: var(--space-sm);*/

/*  background-color: var(--color-bg-alt);*/

/*  z-index: 90;*/

/*  transform: translateZ(0);*/

/*}*/

.navigation-button {
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border);
  width: var(--navigation-button-width);
  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;
}

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

/* 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);
}

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

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

.node__name {
  width: 100%;
  margin: 0.5rem 0 0.25rem;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

/* pull the toggle into the flex‐row */

.node__name-wrapper .description-panel__toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

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

.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 */

.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 !important; /* Override align-items: center to prevent button compression */
}

/* 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 !important;
  align-items: center !important;
  padding: var(--space-xs) var(--space-sm) !important;
  background-color: color-mix(in srgb, var(--semantic-accent-a) 20%, var(--color-bg-panel)) !important;
  border: 1px solid var(--semantic-accent-a) !important;
  border-radius: var(--radius-base) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin-right: 0 !important;
}

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

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

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

/* 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) !important;
}

/* 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) !important;
  font-weight: 500 !important;
}

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

/* Dashboard Component */

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

.dashboard__title {
  font-size: var(--font-size-xl);
  margin: 0;
  flex: 0 0 auto;
  /*display: flex;*/
  width: 100%;
  /*margin-bottom: var(--space-md);*/
}

.dashboard__title-wrapper {
  /*display: flex;*/
  /*align-items: center;*/
  /*gap: var(--space-sm);*/

  /* make it stick inside the scrollport */
  position: sticky;
  top: 0;
  z-index: 100;

  /* ensure content doesn’t bleed through while scrolling */
  background: var(--color-bg-alt);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

/* mask a few pixels below the header to cover any bleed */

.dashboard__title-wrapper::after {
  content: "";
  position: absolute;
  top: -1px;     /* fixes content showing through gap above title. */
  left: 0;
  right: 0;
  bottom: -4px;
  height: 6px;                       /* tweak to taste */
  background: var(--color-bg-alt);
  pointer-events: none;
}

/* pull the toggle into the flex‐row */

.dashboard__title-wrapper .description-panel__toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.dashboard__info {
  width: 100%;
  margin-bottom: var(--space-md);
}

.dashboard__content {
  flex: 1;
  min-height: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.dashboard__sections {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.8rem;
  margin-top: 1rem;
  margin-bottom: var(--space-sm);
}

/* Section Button Container */

.dashboard__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /*background-color: var(--button-bg);*/
  border-radius: var(--button-border-radius);
  width: 100%;
  max-width: 550px;
  text-align: center;
  margin: 0;
  flex-shrink: 0;
}

/* Make sure there's room for the drop shadow at the end of the list */

.dashboard__section:last-child {
  margin-bottom: 10px;
}

/* Section Text */

.dashboard__section-name {
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 8px; /* Space between text and progress bar */
  white-space: normal; /* Allow wrapping for long names */
  word-wrap: break-word; /* Ensure wrapping for overly long words */
}

/* Progress Bar for Section Buttons */

.dashboard__section-progress {
  width: 90%; /* Slight margin around progress bar */
  margin-top: var(--space-sm);
}

.dashboard__title-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  flex-wrap: wrap;          /* ← allow children to wrap to next line */
}

/*!* drop the body into normal flow, full-width below the title row *!*/

/*.dashboard__title-wrapper .description-panel__body {*/

/*  position: static;         !* ← remove absolute positioning *!*/

/*  order: 1;                 !* ← ensure it comes after the toggle *!*/

/*  width: 100%;*/

/*  margin-top: var(--space-xs);*/

/*  !* optional styling *!*/

/*  padding: var(--space-sm);*/

/*  background: var(--color-bg-alt);*/

/*  box-shadow: var(--shadow-md);*/

/*}*/

.dashboard__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.description-button {
  background: none;
  border: none;
  padding: var(--space-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
}

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

.description-button svg {
  font-size: 1.2rem;
  /* override default MUI size if needed */
  vertical-align: middle;
}

/* Scroll fade gradients */

.scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.scroll-fade--top {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--color-bg-alt) 0%,
    transparent 100%
  );
  opacity: var(--gradient-top-opacity, 0);
}

.scroll-fade--bottom {
  bottom: var(--gradient-bottom-offset, 0);
  background: linear-gradient(
    to top,
    var(--color-bg-alt) 0%,
    transparent 100%
  );
  opacity: var(--gradient-bottom-opacity, 0);
}

/* 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;
}

/* 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 { }*/

.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: #2e7d32; /* green for survey progress */
}

.dynamic-survey-button__progress-bar--report {
  --progress-bar-fill-color: #1976d2; /* blue for report generation */
}

.dynamic-survey-button__progress-bar--failed {
  --progress-bar-fill-color: #d32f2f; /* 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 #d32f2f;
  background-color: #ffebee;
}

.dynamic-survey-button__progress-bar--failed .progress-bar-fill {
  background-color: #d32f2f;
  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: 16px;
  /*margin-top: 12px;*/
  padding: 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: 6px;
}

.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;
  color: var(--color-text);
}

/* Assessment statuses - Green */

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

/* Report statuses - Blue */

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

/* 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: 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(--color-primary),
    var(--color-primary) 10px,
    var(--progress-bar-bg) 10px,
    var(--progress-bar-bg) 20px
  );
  background-size: 28.28px 28.28px; /* Match pattern size for seamless tiling */
  animation: barber-pole 1s linear infinite;
}

.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: 8px 16px;
  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;
}

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

.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 */
}

/* 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-x: hidden; /* Prevent browser scrollbars */
  overflow-y: auto;
  display: flex; /* Center layout */
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

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

/* App Container: Fullscreen or Framed */

.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full height of the viewport */
  width: 100%; /* Full width of the viewport */
  min-height: 0;
  justify-content: center;
  align-items: center;
  overflow: auto;
  background-color: var(--color-bg);
}

/* App Frame */

.app-frame {
  position: relative;
  width: 600px;
  height: 800px;
  max-height: 100vh; /* Constrain to viewport height when necessary */
  padding: var(--space-md);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent frame itself from showing scrollbars */
  min-height: 0;
}

.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 */
  overflow: hidden; /* IMPORTANT: No scroll here - child components handle their own scrolling */
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Beta Ribbon */

.beta-ribbon {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  z-index: 1000;
  pointer-events: none;
}

.beta-ribbon::before {
  content: 'BETA';
  position: absolute;
  top: 18px;
  left: -18px;
  width: 100px;
  text-align: center;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, #e53935 0%, #8e24aa 100%);
  color: white;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 0;
  box-shadow: var(--dark-shadow);
}

/* Fullscreen and Small Screens */

@media (max-width: 768px), (max-height: 600px) {
  .app-frame {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%; /* Fullscreen width */
    max-height: 100vh; /* Ensure it respects viewport height */
    padding: 0; /* Remove padding for fullscreen */
    border-radius: 0; /* Disable rounded corners */
    box-shadow: none; /* Remove shadow */
  }

  .app-frame__content {
    padding: 0; /* Match fullscreen padding */
  }
}

/* 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 {
  /* Spacing aliases (map to design token spacing scale) */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-xxl: var(--space-12);

  /* Typography aliases (map to design token font sizes) */
  --font-size-base: var(--font-size-md);

  /* Layout dimensions */
  --radius-base: 4px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --z-sticky: 100;
  --question-header-height: 4rem;
  --navigation-bar-height: 4rem;
  --navigation-button-width: 120px;
  --node-header-height: 100px;
  --padding: 16px;
  --border-radius: 20px;

  /* Button styling */
  --button-border-radius: 20px;
  --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));
}

/* Dark mode shadow adjustments */

html[data-theme="dark"] {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
}

/* components/Modal.css */

.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  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 2px 10px rgba(0,0,0,0.2);
}

/* Invite Accept Modal */

.dynamic-survey-button__accept-message {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary, #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-secondary, #f5f5f5);
  color: var(--color-text-primary, #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.3);
}

.modal-finalize__title {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-primary, #1a1a1a);
}

.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-secondary, #f5f5f5);
  color: var(--color-text-primary, #1a1a1a);
  border: 1px solid var(--color-border, #e0e0e0);
}

.modal-finalize__button--secondary:hover {
  background: var(--color-secondary-hover, #eeeeee);
}

/* Tertiary button - Cancel */

.modal-finalize__button--tertiary {
  background: transparent;
  color: var(--color-text-secondary, #666666);
  border: 1px solid var(--color-border, #e0e0e0);
}

.modal-finalize__button--tertiary:hover {
  background: var(--color-hover-bg, #fafafa);
  border-color: var(--color-border-hover, #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 {
  /*margin: var(--space-sm);*/
  width: 100%;                /* ensure the track spans the card */
  min-height: 2rem;           /* 32px - increased for mobile-first design */
  background-color: var(--progress-bar-bg, #e9edf3);
  border-radius: var(--radius-base, 4px);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--semantic-gridline, #d0d7de); /* was: outline */
  display: flex;
  align-items: center;        /* Vertically center content */
}

.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 {
  /* Override width to show full bar when at 0% */
  width: 100% !important;
  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: 0.875rem;        /* 14px - larger for mobile-first */
  font-weight: 700;           /* Bolder for better visibility */
  line-height: 1.2;
  padding: 0 8px;             /* More horizontal padding */
  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 */
}

.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 */
}

/* 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;
  text-overflow: ellipsis;

  /* for multiline clamping */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  margin: 0;
  padding: 0;

  /* text settings */
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
}

/* 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;
}

/* 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) + 5rem);
}

.unified-button > .description-panel__toggle {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  cursor: pointer;
  /*z-index: 20;*/
  z-index: 1;
}

/* 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);
}

/* 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--survey {
  text-align: center !important;
  padding-top: 48px;
}

.unified-button--survey .unified-button__content {
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 12px;
}

.unified-button--survey .unified-button__title {
  width: 100%;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
}

.unified-button--survey .unified-button__label {
  font-weight: 700;
  font-size: var(--font-size-xl);
  text-align: center !important;
}

/* report‐style button: subtle primary-colored background for completed reports */

.unified-button--report {
  background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-panel));
  text-align: left !important;
  padding-top: 48px;
}

.unified-button--report .unified-button__content {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin-bottom: 12px;
}

.unified-button--report .unified-button__title {
  width: 100%;
  text-align: left !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
}

.unified-button--report .unified-button__label {
  font-weight: 700;
  font-size: var(--font-size-xl);
  text-align: left !important;
}

/* 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);
}

/* utilities.css */

.text-center {
  text-align: center;
}

.margin-bottom {
  margin-bottom: var(--space-md);
}

/* 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);
}

@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 */
}