/*
 * Canonical component and view layer for Stormhuset Statistik.
 * Reusable decisions live in tokens.css; this file composes those decisions
 * without changing Razor flows or business behaviour.
 */
html {
  font-size: 16px;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  background-image: var(--gradient-page);
  background-repeat: no-repeat;
  background-size: 100% 420px;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
}
h1,
h2,
h3,
h4,
.navbar-brand,
.app-page-title,
.app-section-title,
.workflow-title {
  font-family: var(--font-family-heading);
  letter-spacing: var(--letter-spacing-heading);
}

a {
  color: var(--color-accent-text);
}

.container {
  width: min(100% - (2 * var(--space-page-inline)), var(--layout-content-max));
  max-width: var(--layout-content-max);
  padding-right: 0;
  padding-left: 0;
}

.app-main-container {
  min-height: calc(100vh - 9rem);
}

.app-page {
  padding-top: var(--space-page-block);
  padding-bottom: var(--space-page-block);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-bg-header) 96%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.app-navbar {
  min-height: 4.4rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.app-navbar .container {
  min-height: 4.4rem;
}

.app-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-xs);
  margin-right: 2rem;
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.75rem;
  white-space: nowrap;
}

.app-brand span {
  white-space: nowrap;
  word-break: normal;
}

.app-brand:hover,
.app-brand:focus {
  color: var(--color-text-primary);
}

.app-brand-logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.app-navbar .navbar-nav {
  gap: var(--space-2xs);
}

.app-navbar .nav-link {
  padding: 0.5rem 0.75rem;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-label);
  transition: color 150ms ease, background-color 150ms ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-bg-interactive);
}

.app-navbar .nav-link.active {
  color: var(--color-accent-text);
  background: var(--color-bg-interactive);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent) 12%, transparent);
  font-weight: var(--font-weight-regular);
}

.app-navbar-actions {
  gap: 0.35rem;
}

.app-navbar-collapse-inner {
  display: contents;
}

.app-navigation-backdrop {
  display: none;
}

.user-row-actions-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.4rem 0.65rem 0.4rem 0.8rem;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  font: inherit;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.user-row-actions-toggle[aria-expanded="true"] .user-actions-chevron {
  transform: rotate(180deg);
}

.users-table-name {
  font-weight: var(--font-weight-semibold);
}

.user-row-actions-toggle svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.user-row-actions-toggle:hover,
.user-row-actions-toggle:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-bg-interactive);
}

.theme-toggle-button,
.app-user-menu-toggle {
  min-height: 2.15rem;
  color: var(--color-text-secondary);
  border-color: transparent;
  border-radius: 0.5rem;
}

.theme-toggle-button {
  width: 2.15rem;
}

.theme-toggle-button:hover,
.theme-toggle-button:focus-visible,
.app-user-menu-toggle:hover,
.app-user-menu-toggle:focus-visible,
.app-user-menu-toggle[aria-expanded="true"] {
  color: var(--color-text-primary);
  background: var(--color-bg-interactive);
  border-color: transparent;
}

.app-user-menu-toggle {
  font-family: var(--font-family-body);
  font-size: 0.86rem;
  font-weight: var(--font-weight-medium);
}

.app-user-menu-toggle::after {
  display: none;
}

.app-user-chevron {
  display: inline-block;
  flex: 0 0 auto;
}

.app-user-avatar {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--color-on-accent);
  background: var(--color-accent);
  font-size: 0.72rem;
}

.navbar-toggler {
  border-color: var(--color-border-subtle);
}

.dropdown-menu,
.factor-row-actions-menu,
.app-menu {
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow-elevated);
}

.dropdown-item,
.factor-row-action-item {
  color: var(--color-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus,
.factor-row-action-item:hover,
.factor-row-action-item:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-bg-interactive);
}

.app-menu {
  min-width: 9.5rem;
  padding: 0.28rem;
  border-radius: 0.65rem;
  font-family: var(--font-family-body);
  font-size: 0.86rem;
}

.app-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2rem;
  padding: 0.38rem 0.62rem;
  border-radius: 0.42rem;
  font-size: inherit;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
}

.app-menu .dropdown-item.active,
.app-menu .dropdown-item:active {
  color: var(--color-text-primary);
  background: var(--color-bg-surface-strong);
}

.app-menu .dropdown-item:is(:hover, :focus, :active) {
  color: var(--color-accent-text);
  background: var(--color-bg-interactive);
}

.app-menu .dropdown-item-danger:is(:hover, :focus, :active) > span {
  color: var(--color-danger);
}

.app-menu-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.app-menu form {
  margin: 0;
}

.app-menu .dropdown-divider {
  margin: 0.24rem 0.36rem;
  border-top-color: var(--color-border-subtle);
}

.app-footer {
  padding: 0.5rem 0 2.5rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.app-footer .container {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.app-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

@media (max-width: 767.98px) {
  .app-footer .container {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
}

.app-page-header {
  align-items: flex-end;
  margin-bottom: var(--space-lg);
}

.app-page-header > :first-child {
  min-width: 0;
}

.app-page-title {
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.app-page-lead {
  max-width: var(--layout-copy-max);
  margin-top: var(--space-xs);
  color: var(--color-text-secondary);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
}

.app-page-actions {
  gap: var(--space-xs);
}

.privacy-content {
  max-width: var(--layout-reading-max);
}

.privacy-content,
.guide-accordion-content {
  color: var(--color-text-secondary);
  font-size: var(--font-size-reading);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-reading);
}

.privacy-content p {
  margin: 0;
}

.privacy-content p + p {
  margin-top: 0.85rem;
}

.app-home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 19rem;
  padding: clamp(2rem, 4vw, 3.2rem);
  overflow: hidden;
  color: var(--color-on-brand);
  background: var(--gradient-brand);
  border: 0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-subtle);
}

.app-home-hero::after {
  position: absolute;
  right: -4rem;
  bottom: -7rem;
  width: 20rem;
  height: 20rem;
  border: 1px solid color-mix(in oklab, var(--color-on-brand) 14%, transparent);
  border-radius: var(--radius-pill);
  content: "";
}

.app-home-hero > * {
  position: relative;
  z-index: 1;
}

.app-home-hero .app-page-title,
.app-home-hero .app-page-lead {
  color: inherit;
}

.app-home-hero .app-page-title {
  font-size: var(--font-size-heading-lg);
}

.app-home-hero .app-page-lead {
  max-width: 38rem;
  opacity: 0.88;
}

.app-home-hero .btn-outline-secondary {
  color: var(--color-on-brand);
  background: transparent;
  border-color: var(--color-border-subtle);
}

.app-home-hero .btn-outline-secondary:hover {
  background: color-mix(in oklab, var(--color-on-brand) 10%, transparent);
  border-color: var(--color-border-subtle);
}
.app-surface,
.card,
.table-shell,
.modal-content {
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-subtle);
}

/* Shared interaction rhythm for controls and clickable component surfaces. */
.btn,
.dropdown-item,
.factor-row-action-item,
.app-tab,
.workflow-card,
.guide-accordion-trigger {
  transition:
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-fast);
}

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

.app-section-spacious {
  margin-bottom: var(--space-section-spacious);
}

.app-section-header {
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.app-section-action {
  flex: 0 0 auto;
}

/* Shared structural primitives used by filters, panels and metric summaries. */
.app-filter-bar {
  padding: var(--space-md);
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-subtle);
}

.app-filter-bar > * {
  min-width: 0;
}

.app-metric-group {
  min-width: 0;
}

.app-metric {
  min-width: 0;
}

.app-section-title {
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.75rem;
}

.app-section-meta,
.text-muted,
.text-body-secondary,
.form-text {
  color: var(--color-text-secondary) !important;
}

.app-section-meta {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
}

.btn {
  --bs-btn-focus-shadow-rgb: var(--color-accent-rgb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--control-height);
  padding: 0.375rem var(--control-padding-inline);
  border-radius: var(--radius-control);
  font-family: var(--font-family-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-label);
  vertical-align: middle;
  box-shadow: none;
}

.btn-sm {
  min-height: var(--control-height-sm);
  padding: 0.34rem 0.65rem;
  font-size: 0.78rem;
}

.btn-primary {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-hover-border-color: var(--color-accent-hover);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-accent-hover);
  --bs-btn-active-border-color: var(--color-accent-hover);
  --bs-btn-disabled-color: var(--color-on-accent);
  --bs-btn-disabled-bg: var(--color-accent);
  --bs-btn-disabled-border-color: var(--color-accent);
}

.btn-primary,
.btn-primary:focus {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-subtle);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:first-child:active {
  color: var(--color-on-accent);
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-subtle);
}

.btn-outline-primary {
  --bs-btn-border-color: var(--color-border-subtle);
  --bs-btn-color: var(--color-accent-text);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-accent);
  --bs-btn-hover-border-color: var(--color-accent);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-accent);
  --bs-btn-active-border-color: var(--color-accent);
  --bs-btn-disabled-color: var(--color-text-muted);
  --bs-btn-disabled-border-color: var(--color-border-subtle);
  color: var(--color-accent-text);
  background: transparent;
  border-color: var(--color-border-subtle);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-outline-secondary {
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-hover-color: var(--color-text-primary);
  --bs-btn-hover-bg: var(--color-bg-surface-strong);
  --bs-btn-hover-border-color: var(--color-border-strong);
  --bs-btn-active-color: var(--color-text-primary);
  --bs-btn-active-bg: var(--color-bg-surface-strong);
  --bs-btn-active-border-color: var(--color-border-strong);
  --bs-btn-disabled-color: var(--color-text-muted);
  --bs-btn-disabled-border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
  background: transparent;
  border-color: var(--color-border-subtle);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
  color: var(--color-text-primary);
  background: var(--color-bg-surface-strong);
  border-color: var(--color-border-subtle);
}

.btn-danger {
  --bs-btn-color: var(--color-on-danger);
  --bs-btn-bg: var(--color-danger-fill);
  --bs-btn-border-color: var(--color-danger-fill);
  --bs-btn-hover-color: var(--color-on-danger);
  --bs-btn-hover-bg: var(--color-danger-fill);
  --bs-btn-hover-border-color: var(--color-danger-fill);
  --bs-btn-active-color: var(--color-on-danger);
  --bs-btn-active-bg: var(--color-danger-fill);
  --bs-btn-active-border-color: var(--color-danger-fill);
  --bs-btn-disabled-color: var(--color-on-danger);
  --bs-btn-disabled-bg: var(--color-danger-fill);
  --bs-btn-disabled-border-color: var(--color-danger-fill);
}

.btn-danger,
.btn-danger:hover,
.btn-danger:active,
.btn-outline-danger:hover {
  color: var(--color-on-danger);
  background: var(--color-danger-fill);
  border-color: var(--color-danger-fill);
}

.btn-outline-danger {
  --bs-btn-color: var(--color-danger);
  --bs-btn-hover-color: var(--color-on-danger);
  --bs-btn-hover-bg: var(--color-danger-fill);
  --bs-btn-hover-border-color: var(--color-danger-fill);
  --bs-btn-active-color: var(--color-on-danger);
  --bs-btn-active-bg: var(--color-danger-fill);
  --bs-btn-active-border-color: var(--color-danger-fill);
  --bs-btn-disabled-color: var(--color-text-muted);
  --bs-btn-disabled-border-color: var(--color-border-subtle);
  color: var(--color-danger);
  background: transparent;
  border-color: var(--color-border-subtle);
}

.app-icon {
  display: block;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-action-label {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--overline-size);
  font-weight: var(--overline-weight);
  line-height: var(--overline-line-height);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase;
}

.app-action-section {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.app-action-section[hidden],
.app-navigation-action[hidden] { display: none; }

.app-action-section-compact { margin-top: var(--space-xs); }

.app-action-section-separated {
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.app-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.app-navigation-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-sm);
  min-height: var(--control-height-lg);
  padding-block: var(--space-sm);
  text-align: left;
}

.app-navigation-action > .app-icon:first-child { color: var(--color-accent-text); }

.app-text-danger-action {
  --bs-btn-color: var(--color-danger);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-danger);
  --bs-btn-hover-bg: var(--color-danger-surface);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-danger);
  --bs-btn-active-bg: var(--color-danger-surface);
  --bs-btn-active-border-color: transparent;
  color: var(--color-danger);
  background: transparent;
  border-color: transparent;
  justify-self: center;
  gap: var(--space-xs);
}

.app-text-danger-action:is(:hover, :active) {
  color: var(--color-danger);
  background: var(--color-danger-surface);
  border-color: transparent;
}

.form-label {
  margin-bottom: 0.42rem;
  color: var(--color-text-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-label);
}

.form-control,
.form-select {
  min-height: var(--control-height);
  color: var(--color-text-primary);
  background-color: var(--color-bg-input);
  border-color: var(--color-border-default);
  border-radius: var(--radius-control);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
}

.form-select {
  /* Bootstrap declares local images on more specific theme/state selectors. */
  --bs-form-select-bg-img: var(--select-indicator) !important;
}

/* Bootstrap validation icons otherwise keep their original red/green swatches. */
.form-control.is-valid,
.was-validated .form-control:valid {
  background-image: var(--valid-indicator);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  background-image: var(--invalid-indicator);
}

.form-select.is-valid,
.was-validated .form-select:valid { --bs-form-select-bg-icon: var(--valid-indicator) !important; }
.form-select.is-invalid,
.was-validated .form-select:invalid { --bs-form-select-bg-icon: var(--invalid-indicator) !important; }

.form-control.input-validation-error,
.form-select.input-validation-error {
  border-color: var(--color-danger);
}

:is(.form-control, .form-select, .form-check-input).is-valid:focus,
.was-validated :is(.form-control, .form-select, .form-check-input):valid:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--color-success) 18%, transparent);
}

:is(.form-control, .form-select, .form-check-input).is-invalid:focus,
.was-validated :is(.form-control, .form-select, .form-check-input):invalid:focus,
:is(.form-control, .form-select).input-validation-error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--color-danger) 18%, transparent);
}

/* Native file controls share one height and text baseline with their browse button. */
.app-file-field { --file-button-width: 7rem; }

.form-control[type="file"] {
  height: var(--control-height);
  padding: 0;
  overflow: hidden;
  line-height: calc(var(--control-height) - 2 * var(--border-width));
}

.form-control[type="file"]::file-selector-button {
  box-sizing: border-box;
  height: 100%;
  margin: 0 var(--space-sm) 0 0;
  padding: 0 var(--control-padding-inline);
  color: inherit;
  background-color: var(--color-bg-surface-subtle);
  border: 0;
  border-inline-end: var(--border-width) solid var(--color-border-subtle);
  border-radius: 0;
  font: inherit;
  vertical-align: top;
}

.app-file-field .form-control[type="file"]::file-selector-button {
  width: var(--file-button-width);
}

.app-file-field .form-text {
  display: block;
  margin-top: var(--space-xs);
  padding-inline-start: calc(var(--file-button-width) + var(--space-sm) + var(--border-width));
  color: color-mix(in srgb, var(--color-text-muted) 90%, var(--color-bg-surface)) !important;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body);
}

.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
  color: var(--color-text-muted);
  background-color: var(--color-bg-surface-subtle);
  border-color: var(--color-border-subtle);
  opacity: 0.72;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  color: var(--color-text-primary);
  background-color: var(--color-bg-input);
  border-color: var(--ring);
  box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--color-accent) 18%, transparent);
}

.form-check-input {
  background-color: var(--color-bg-input);
  border-color: var(--color-border-default);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.form-check-input:is(.is-valid, .is-invalid):checked,
.was-validated .form-check-input:is(:valid, :invalid):checked {
  background-color: var(--color-accent);
}

.form-check-input[type="checkbox"]:checked {
  --bs-form-check-bg-image: var(--checkbox-mark);
}

.form-check-input[type="radio"]:checked { --bs-form-check-bg-image: var(--radio-mark); }
.form-check-input[type="checkbox"]:indeterminate { --bs-form-check-bg-image: var(--indeterminate-mark); }

.navbar-toggler-icon {
  background-image: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Shared close icon uses currentColor in toasts and every modal. */
.btn-close {
  position: relative;
  color: var(--color-text-secondary);
  background: transparent;
  opacity: 1;
  filter: none;
}

.btn-close::before,
.btn-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1.5px;
  background: currentColor;
  content: "";
}

.btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close:hover { color: var(--color-text-primary); opacity: 1; }
.btn-close:focus { box-shadow: none; }

.btn:disabled,
.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
  cursor: not-allowed;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (pointer: coarse) {
.btn,
.theme-toggle-button,
.app-user-menu-toggle,
.user-row-actions-toggle {
    min-height: var(--touch-target-min);
  }
}

.alert,
.empty-state {
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border-subtle);
  color: var(--color-text-primary);
  border-radius: var(--radius-menu);
  font-family: var(--font-family-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-label);
}

.alert-info {
  color: var(--color-text-primary);
  background: var(--color-info-surface);
  border-color: var(--color-border-subtle);
}

.alert-success {
  color: var(--color-success);
  background: var(--color-success-surface);
  border-color: var(--color-border-subtle);
}

.text-primary { color: var(--color-accent-text) !important; }
.text-info { color: var(--color-info) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning-text) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-bg-info {
  color: var(--color-info) !important;
  background: var(--color-info-surface) !important;
}
.text-bg-warning {
  color: var(--color-warning-text) !important;
  background: var(--color-warning-surface) !important;
}
.text-bg-danger {
  color: var(--color-danger) !important;
  background: var(--color-danger-surface) !important;
}

.alert-warning {
  color: var(--color-text-primary);
  background: var(--color-warning-surface);
  border-color: var(--color-border-subtle);
}

.alert-danger {
  color: var(--color-danger);
  background: var(--color-danger-surface);
  border-color: var(--color-border-subtle);
}

.app-inline-notice,
.empty-state {
  display: grid;
  grid-template-columns: var(--notice-icon-slot) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
}

.app-inline-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
  width: var(--notice-icon-slot);
  height: var(--notice-icon-slot);
  color: var(--color-info);
}

.app-inline-notice-icon svg {
  width: var(--notice-icon-size);
  height: var(--notice-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.alert-warning .app-inline-notice-icon { color: var(--color-warning-text); }
.alert-success .app-inline-notice-icon { color: var(--color-success); }
.alert-danger .app-inline-notice-icon { color: var(--color-danger); }
/* Each text row occupies column 2; the icon shares the heading's grid row. */
.app-notice-copy { display: contents; }
.app-notice-copy.validation-summary-valid { display: none; }
.app-notice-copy > * { grid-column: 2; min-width: 0; margin: 0; }
.app-notice-heading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); line-height: var(--notice-icon-slot); }
.app-notice-heading strong { font-weight: var(--font-weight-semibold); }
.app-inline-notice:has(.app-notice-heading) > .app-inline-notice-icon { align-self: start; }
.app-inline-notice:has(.app-notice-heading .app-badge) > .app-inline-notice-icon { margin-block-start: max(0px, calc((var(--badge-height) - var(--notice-icon-slot)) / 2)); }
.app-notice-heading ~ p { color: var(--color-text-secondary); }
.app-notice-meta { color: var(--color-text-secondary); font-size: var(--font-size-caption); }
.app-notice-copy > ul { padding-left: var(--space-md); }
.app-inline-notice .validation-summary-errors ul { margin: 0; padding-left: var(--space-md); }

.empty-state {
  margin-bottom: 0;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface-subtle);
}

.empty-state::before {
  content: "—";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--notice-icon-slot);
  height: var(--notice-icon-slot);
  color: var(--color-accent-text);
  background: var(--color-accent-subtle);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-semibold);
}

.empty-state[hidden] { display: none !important; }

.v2-scenario-notice {
  grid-template-columns: var(--notice-icon-slot) minmax(0, 1fr) auto;
}

.v2-scenario-notice-action {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .v2-scenario-notice {
    grid-template-columns: var(--notice-icon-slot) minmax(0, 1fr);
  }

  .v2-scenario-notice-action {
    grid-column: 2;
    justify-self: start;
  }
}

.home-week-shortcut {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: 1rem 1.25rem;
  background: color-mix(in oklab, var(--color-accent) 5%, var(--color-bg-surface));
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.85rem;
  box-shadow: var(--shadow-subtle);
}

.home-week-shortcut-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: 50%;
}

.home-week-shortcut-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.home-week-shortcut-copy {
  min-width: 0;
}

.home-week-shortcut-eyebrow {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--color-accent-text);
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  line-height: 1rem;
  text-transform: uppercase;
}

.home-week-shortcut h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35rem;
}

.home-week-shortcut p {
  margin: 0.2rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.84rem;
  line-height: 1.3rem;
}

.home-week-shortcut .btn {
  white-space: nowrap;
}

.workflow-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.workflow-card {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  grid-template-rows: min-content min-content;
  gap: 0.25rem 1rem;
  align-content: center;
  min-height: 6.4rem;
  padding: var(--space-lg);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.85rem;
  box-shadow: var(--shadow-subtle);
}

.workflow-card:hover,
.workflow-card:focus-visible {
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-subtle);
  transform: translateY(-1px);
}

.workflow-icon {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--color-accent-text);
  background: color-mix(in oklab, var(--color-accent) 9%, var(--color-bg-surface));
  border-radius: 0.65rem;
}

.workflow-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workflow-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
}

.workflow-text {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.84rem;
  line-height: 1.45;
}

.workflow-arrow {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--color-text-secondary);
  transition: transform 150ms ease;
}

.workflow-arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workflow-card:hover .workflow-arrow {
  transform: translateX(0.2rem);
}

.home-hero-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-lg);
}

.app-home-hero .app-page-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
}

.home-hero-audience {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 1.25rem 1.35rem;
  color: var(--color-on-brand);
  background: color-mix(in oklab, var(--color-on-brand) 8%, transparent);
  border-radius: var(--radius-panel);
}

.home-audience-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.home-audience-header > div {
  min-width: 0;
}

.home-audience-header h2 {
  margin: 0;
  color: inherit;
  font-size: 1.12rem;
  font-weight: var(--font-weight-semibold);
}

.home-audience-header p {
  margin: 0.15rem 0 0;
  color: inherit;
  font-size: 0.82rem;
  opacity: 0.72;
}

.home-audience-icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--color-on-brand) 10%, transparent);
  border-radius: 50%;
}

.home-audience-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.home-hero-audience .audience-group-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--space-md);
}

.home-hero-audience .audience-group-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  color: inherit;
  background: transparent;
  border-bottom: 1px solid color-mix(in oklab, var(--color-on-brand) 20%, transparent);
  border-radius: 0;
}

.home-hero-audience .audience-group-row strong {
  color: inherit;
}

.home-hero-audience .audience-group-row > span:last-child {
  font-size: 0.76rem;
  opacity: 0.72;
}

.kpi-grid {
  gap: var(--space-md);
}

.kpi-card {
  min-height: 7.4rem;
  padding: 1.25rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.8rem;
  box-shadow: var(--shadow-subtle);
}

.kpi-card:first-child {
  color: var(--color-on-brand);
  background: var(--gradient-brand);
  border-color: transparent;
}

.kpi-card:first-child .kpi-label,
.kpi-card:first-child .kpi-note {
  color: inherit;
  opacity: 0.78;
}

.kpi-label {
  color: var(--color-text-secondary);
  font-size: var(--overline-size);
  font-weight: var(--overline-weight);
  letter-spacing: var(--letter-spacing-overline);
  line-height: var(--overline-line-height);
  text-transform: uppercase;
}

.kpi-value {
  margin-top: 0.3rem;
  color: inherit;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-metric-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.kpi-note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.report-filter-toolbar > div:not(.report-filter-actions) {
  min-width: 0;
}

@media (max-width: 767.98px) {
  body.app-login-page .app-header {
    display: none;
  }
}

.app-user-avatar:is(img) { object-fit: cover; }
.account-profile-grid { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(20rem, 1.2fr); gap: var(--space-lg); align-items: start; }
.account-profile-grid > :last-child { grid-column: auto; }
.account-settings-card { min-width: 0; padding: var(--space-lg); }
.account-settings-card .app-section-title { margin-bottom: var(--space-sm); }
.account-settings-card .app-section-meta { margin-bottom: var(--space-lg); }
.account-settings-form { display: grid; gap: var(--space-sm); min-width: 0; }
.account-profile-identity { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.account-profile-identity .app-section-meta { margin: 0; }
.account-profile-image { display: flex; align-items: center; justify-content: center; flex: 0 0 5rem; width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.account-profile-placeholder { color: var(--color-on-accent); background: var(--color-accent); font-size: 2rem; font-weight: var(--font-weight-semibold); }
.account-public-identity { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); text-align: center; }
.account-public-identity .account-profile-image { width: 7rem; height: 7rem; flex-basis: 7rem; }
.account-public-identity .app-section-title,
.account-public-identity .app-section-meta { margin: 0; }
.account-profile-image-button { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.account-profile-image-button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
.account-profile-image-button:hover .account-profile-image { filter: brightness(.85); }
.account-profile-image-hint { position: absolute; right: -.35rem; bottom: .2rem; padding: .18rem .45rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); font-size: .68rem; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.account-profile-details { display: grid; margin: var(--space-md) 0 0; }
.account-profile-details > div { display: grid; grid-template-columns: minmax(8rem, .42fr) minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border-subtle); }
.account-profile-details dt { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.account-profile-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: var(--space-md); }
.people-card { display: flex; align-items: center; gap: var(--space-md); min-width: 0; padding: var(--space-lg); color: var(--color-text-primary); text-decoration: none; }
.people-card:hover { color: var(--color-text-primary); border-color: var(--color-border-subtle); }
.people-card:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.people-card-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.people-card-initials { background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--font-weight-semibold); }
.people-card-body { display: grid; min-width: 0; gap: .15rem; }
.people-card-body strong,
.people-card-body small,
.people-card-body > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-card-body small,
.people-card-body > span { color: var(--color-text-secondary); }
.people-card-arrow { margin-left: auto; color: var(--color-accent-text); font-size: 1.35rem; }
.app-menu-role-group { border-radius: var(--radius-control); }
.app-menu-role-group:has([aria-expanded="true"]) { background: var(--color-bg-expandable); }
.app-menu-chevron { margin-left: auto; transition: transform var(--motion-fast); }
.app-menu [aria-expanded="true"] .app-menu-chevron { transform: rotate(90deg); }
.app-menu-role-group [aria-expanded="true"] > .app-menu-icon:first-child { color: var(--color-accent-text); }
.app-menu-role-options { padding: var(--space-2xs); }
.app-menu .app-menu-role-choice { padding-inline-start: calc(0.62rem + var(--space-xs)); }
.app-menu-role-indicator { color: var(--color-text-secondary); }
.app-menu-role-dot { fill: currentColor; stroke: none; }
.app-menu .app-menu-role-choice[aria-current="true"] { color: var(--color-accent-text); background: var(--color-bg-interactive); opacity: 1; }
.app-menu-role-choice[aria-current="true"] .app-menu-role-indicator { color: inherit; }

@media (max-width: 767.98px) {
  .account-profile-grid { grid-template-columns: 1fr; }
  .account-profile-details > div { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* Keep content clear of device cutouts when viewport-fit=cover exposes them. */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }

  .app-header {
    padding-top: env(safe-area-inset-top);
  }

  body.app-guest {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-footer {
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }
}

.table-shell {
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-subtle);
}

.table-shell .table,
.table {
  --bs-table-bg: var(--color-bg-surface);
  --bs-table-color: var(--color-text-primary);
  --bs-table-border-color: var(--color-border-subtle);
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: var(--color-text-primary);
  --bs-table-hover-bg: var(--color-bg-table-row-hover);
  --bs-table-hover-color: var(--color-text-primary);
  margin-bottom: 0;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
}

.table-shell thead th,
.table thead th {
  padding: 0.72rem 0.8rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-table-header);
  border-bottom-color: var(--color-border-subtle);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-label);
  letter-spacing: 0.015em;
  text-transform: none;
}

.table-shell tbody td,
.table tbody td {
  padding: 0.72rem 0.8rem;
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-subtle);
  transition: background-color var(--motion-fast);
}

/* Shared surfaces for data rows and expandable summaries. */
.app-data-row,
.app-disclosure-row {
  background-color: var(--color-bg-surface);
  transition: background-color var(--motion-fast);
}

.app-data-row { cursor: default; }
.app-disclosure-row { cursor: pointer; }

.app-disclosure-group:is(.is-expanded, [open]) > .app-disclosure-row {
  background-color: var(--color-bg-disclosure-row);
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--color-accent) 72%, transparent);
}

.table > tbody > tr.app-disclosure-row > * {
  --bs-table-bg-state: transparent;
  --bs-table-bg-type: transparent;
  background-color: transparent !important;
  box-shadow: none !important;
}

.app-disclosure-body,
.table > tbody > tr.app-disclosure-body > * {
  background-color: var(--color-bg-expandable) !important;
}

.table > tbody > tr.app-disclosure-body > * {
  --bs-table-bg-state: transparent;
  --bs-table-bg-type: transparent;
  box-shadow: none !important;
}

/* One feedback color for every data row, including open disclosures.
   Detail containers are excluded so hovering a nested row does not tint its panel.
   Keyboard feedback follows visible focus; touch cannot leave a hover tint behind. */
@media screen {
  .table > tbody > tr:not(.app-disclosure-body):is(:focus-visible, :has(:focus-visible)),
  .table > tbody > tr:not(.app-disclosure-body):is(:focus-visible, :has(:focus-visible)) > *,
  :is(.app-data-row, .app-disclosure-row):is(:focus-visible, :has(:focus-visible)) {
    background-color: var(--color-bg-table-row-hover) !important;
  }

  .table > tbody > tr:not(.app-disclosure-body):is(:focus-visible, :has(:focus-visible)) > * {
    box-shadow: none !important;
  }

  .table > tbody > tr:focus-visible,
  .app-disclosure-row:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
  }
}

@media screen and (hover: hover) {
  .table > tbody > tr:not(.app-disclosure-body):hover,
  .table > tbody > tr:not(.app-disclosure-body):hover > *,
  :is(.app-data-row, .app-disclosure-row):hover {
    background-color: var(--color-bg-table-row-hover) !important;
  }

  .table > tbody > tr:not(.app-disclosure-body):hover > * {
    box-shadow: none !important;
  }
}

.preset-scenario-table-shell {
  overflow-x: auto;
  overflow-y: hidden;
}

.preset-scenario-table {
  min-width: 42rem;
  table-layout: fixed;
}

.preset-scenario-table thead th {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-table-header);
  font-size: var(--overline-size);
  font-weight: var(--overline-weight);
  letter-spacing: var(--letter-spacing-overline);
  line-height: var(--overline-line-height);
  text-transform: uppercase;
}

.preset-scenario-table th:nth-child(1) {
  width: 42%;
}

.preset-scenario-table th:nth-child(2) {
  width: 32%;
}

.preset-scenario-table th:nth-child(3) {
  width: 18%;
}

.preset-scenario-table th:nth-child(4) {
  width: 3.5rem;
  padding-right: 0.8rem;
  padding-left: 0;
  text-align: right;
}

.preset-scenario-table thead th span {
  font-weight: var(--font-weight-regular);
}

.preset-scenario-row > td {
  height: 4.8rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
}

.preset-scenario-name strong {
  font-weight: var(--font-weight-semibold);
}

.preset-scenario-identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.preset-scenario-identity strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.preset-scenario-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  color: var(--color-accent-text);
  background: color-mix(in oklab, var(--color-accent) 14%, var(--color-bg-surface));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
}

.preset-scenario-marker svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.preset-scenario-marker-archived {
  color: var(--color-text-secondary);
  background: var(--color-bg-surface-subtle);
  border-color: var(--color-border-subtle);
}

.preset-factor-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scenario-default-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-sm);
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface-subtle);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.scenario-default-choice .form-check-input {
  float: none;
  margin: 0.15rem 0 0;
}

.scenario-default-copy {
  display: grid;
  gap: var(--space-2xs);
}

.scenario-default-title {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-label);
}

.scenario-default-copy > :last-child {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body);
}

.preset-scenario-action-cell {
  white-space: nowrap;
}

.preset-scenario-edit {
  min-width: 5.35rem;
}

.preset-scenario-row > .preset-scenario-toggle-cell {
  padding-right: 0.8rem;
  padding-left: 0;
  text-align: right;
}

.preset-scenario-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  transition: background-color var(--motion-fast);
}

.preset-scenario-toggle:hover,
.preset-scenario-toggle:focus-visible {
  background: var(--color-bg-surface-strong);
}

.preset-scenario-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.preset-scenario-chevron {
  width: 0.62rem;
  height: 0.62rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.08rem, -0.08rem);
  transition: transform var(--motion-fast);
}

.preset-scenario-group.is-expanded .preset-scenario-chevron {
  transform: rotate(225deg) translate(-0.08rem, -0.08rem);
}

.preset-scenario-details[hidden] {
  display: none;
}

.preset-scenario-details > td {
  padding: 0 !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
}

.preset-scenario-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  padding: 1.5rem 2rem;
}

.preset-scenario-overview {
  display: grid;
  align-content: start;
  gap: 1.35rem;
  min-width: 0;
}

.preset-scenario-detail-section h3 {
  margin: 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-label);
}

.preset-current-factors {
  margin-top: 0.55rem;
  padding: 0.75rem 0.8rem;
  background: color-mix(in oklab, var(--color-bg-surface) 62%, transparent);
  border-radius: var(--radius-control);
}

.preset-scenario-history {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  min-width: 0;
  padding-left: 2rem;
  border-left: 1px solid var(--color-border-subtle);
}

.preset-scenario-history h3 {
  margin: 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-label);
}

.preset-scenario-history-title,
.preset-current-version-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.preset-scenario-history-title {
  margin-bottom: 0.65rem;
}

.preset-scenario-history-title > span {
  color: var(--color-text-secondary);
  font-size: 0.74rem;
  white-space: nowrap;
}

.preset-current-version {
  padding: 0.7rem 0.8rem;
  background: color-mix(in oklab, var(--color-bg-surface) 62%, transparent);
  border-radius: var(--radius-control);
}

.preset-current-version-heading {
  justify-content: flex-start;
}

.preset-current-version-heading > strong {
  font-size: 0.9rem;
}

.preset-current-version p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
}

.preset-current-version-heading + p {
  margin-top: 0.35rem;
}

.preset-current-version p strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.preset-scenario-description {
  margin-top: 0.45rem !important;
}

.preset-scenario-detail-actions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: var(--space-xs);
}

.preset-version-history {
  margin-top: 0.55rem;
}

.preset-version-history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: 0.6rem 0.15rem;
  color: var(--color-accent-text);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  list-style: none;
  cursor: pointer;
}

.preset-version-history-toggle::-webkit-details-marker {
  display: none;
}

.preset-version-history-toggle:hover {
  color: var(--color-accent-text-hover);
}

.preset-version-history-chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.08rem, -0.08rem);
  transition: transform var(--motion-fast);
}

.preset-version-history[open] .preset-version-history-chevron {
  transform: rotate(225deg) translate(-0.08rem, -0.08rem);
}

.preset-version-history-list {
  max-height: 22rem;
  margin: 0.1rem 0 0 0.35rem;
  padding: 0 0 0 1rem;
  overflow-y: auto;
  color: var(--color-text-primary);
  background: transparent;
  border-left: 2px solid var(--color-border-subtle);
}

.preset-version-history-entry {
  position: relative;
  padding: 0.75rem 0 0.8rem;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.78rem;
}

.preset-version-history-entry::before {
  position: absolute;
  top: 1rem;
  left: -1.34rem;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--color-bg-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-pill);
  content: "";
}

.preset-version-history-entry:last-child {
  border-bottom: 0;
}

.preset-version-history-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.preset-version-history-heading > strong {
  font-size: 0.88rem;
}

.preset-version-history-heading > span,
.preset-version-history-metadata {
  color: var(--color-text-secondary);
}

.preset-version-history-metadata {
  margin-top: 0.25rem;
}

.preset-version-history-description {
  margin: 0.35rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.76rem;
}

.preset-version-history-description strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.preset-version-factors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.65rem;
}

.preset-version-factors small,
.preset-version-factors strong {
  display: block;
}

.preset-version-factors small {
  font-size: 0.68rem;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.preset-version-factors strong {
  margin-top: 0.12rem;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.app-badge,
.badge {
  --badge-bg: var(--color-bg-badge);
  --badge-text: var(--color-badge-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--badge-padding-block) var(--badge-padding-inline);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--badge-line-height);
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  color: var(--badge-text);
  background: var(--badge-bg);
  border: var(--border-width) solid var(--color-badge-border);
}

.app-badge-accent {
  --badge-bg: var(--color-bg-badge-accent);
  --badge-text: var(--color-badge-accent-text);
}

.app-badge-emphasis {
  --badge-bg: var(--color-bg-badge-emphasis);
  --badge-text: var(--color-badge-emphasis-text);
}

.app-badge-muted { --badge-bg: transparent; }

.app-badge-warning {
  --badge-bg: var(--color-warning-surface);
  --badge-text: var(--color-warning-text);
}

/* Bootstrap color utilities must also follow the shared badge palette. */
.badge[class*="text-bg-"] {
  color: var(--badge-text) !important;
  background: var(--badge-bg) !important;
}

.text-bg-success {
  color: var(--color-success) !important;
  background: var(--color-success-surface) !important;
}

.text-bg-secondary {
  color: var(--color-text-secondary) !important;
  background: var(--color-bg-surface-strong) !important;
}

.text-bg-primary {
  color: var(--color-on-accent) !important;
  background: var(--color-accent) !important;
}
.app-tabs {
  display: inline-flex;
  width: auto;
  background: var(--color-bg-segmented);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
}

#factorFormModal .modal-body {
  padding: 0 1.4rem;
}

#factorFormModal .modal-footer {
  padding: 1rem 1.4rem;
}

.factor-rule-validation:not(.validation-summary-valid) {
  padding: 0.75rem 1rem;
  background: color-mix(in oklab, var(--color-danger) 7%, var(--color-bg-surface));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  font-size: 0.84rem;
}

.app-guest-container,
.app-guest-container .app-page {
  min-height: 100vh;
  padding: 0;
}

.login-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(22rem, 1.1fr) minmax(26rem, 1fr);
}

.login-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 4rem);
  color: var(--color-on-brand);
  background: var(--gradient-brand);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-family-heading);
  font-size: 1.15rem;
  font-weight: var(--font-weight-semibold);
}

.login-brand img {
  width: 2.65rem;
  height: 2.65rem;
  object-fit: contain;
}

.login-brand-copy h1 {
  max-width: 31rem;
  margin: 0;
  font-size: clamp(2.5rem, 4vw, 4.2rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.06;
}

.login-brand-copy p {
  max-width: 32rem;
  margin: 1.3rem 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
  opacity: 0.86;
}

.login-brand-meta {
  margin: 0;
  font-size: var(--font-size-caption);
  opacity: 0.7;
}

.login-form-panel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.login-theme-action {
  display: flex;
  justify-content: flex-end;
}

.login-form-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 24rem);
  margin: 0 auto;
}

.login-form-wrap h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
}

.login-form-lead {
  margin: 0.35rem 0 1.75rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
}

.import-upload-card,
.import-info-card {
  padding: var(--space-lg);
}

.import-upload-card {
  align-self: start;
}

.import-dropzone {
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  border: 1px dashed var(--color-border-subtle);
  border-radius: 0.8rem;
}

.import-file-icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-text-secondary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.import-file-name {
  max-width: 100%;
  margin: 0.85rem 0 0;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
}

.import-file-help {
  margin: 0.25rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.import-file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: 1.25rem;
}

.import-validation {
  margin-top: var(--space-md);
  padding: 0.8rem 0.9rem;
  color: var(--color-danger) !important;
  background: color-mix(in oklab, var(--color-danger) 9%, var(--color-bg-surface));
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.65rem;
  font-size: 0.84rem;
}

.import-validation.validation-summary-valid {
  display: none;
}

.import-validation ul {
  margin: 0;
  padding-left: 1.1rem;
}

.import-info-card {
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.62;
}

.import-info-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}

.import-info-title svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-accent-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.import-info-card p {
  margin: 0 0 0.9rem;
}

.import-info-card strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.import-door-list {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.import-result {
  margin-top: var(--space-xl);
}

.import-result-status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
  font-size: 0.88rem;
}

.import-result-status strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.import-result-status svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-success);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.import-result-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.import-result-kpis .app-metric {
  padding: var(--space-lg);
}

.import-result-kpis .app-metric:nth-child(2) .kpi-value {
  color: color-mix(in oklab, var(--color-success) 76%, var(--color-text-primary));
}

@media (max-width: 991.98px) {
  .import-result-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .import-result-kpis {
    grid-template-columns: 1fr;
  }

  .import-result-kpis .app-metric {
    padding: var(--space-md);
  }
}

.import-error-samples {
  line-height: 1.55;
}

/* Realtime composes the shared notices, overview, tables and pagination. */
.realtime-range-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--space-md);
}
.realtime-range-filter .form-control { width: 100%; min-width: 0; }
.realtime-range-actions { display: flex; gap: var(--space-xs); }
.realtime-updated { font-variant-numeric: tabular-nums; }
.realtime-overview .v2-overview-value { max-width: 100%; overflow-wrap: anywhere; }
.realtime-comparison-trigger { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline dotted; text-underline-offset: .15em; cursor: help; }
.realtime-comparison-trigger:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 2px; }
.realtime-comparison-tooltip { --bs-tooltip-max-width: 21rem; --bs-tooltip-opacity: 1; }
.realtime-comparison-tooltip .tooltip-inner { text-align: left; font-size: 0.82rem; }
.realtime-comparison-tooltip .tooltip-arrow { display: none; }
.realtime-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-lg);
}
.realtime-content-grid > section { min-width: 0; margin-bottom: var(--space-section); }
@media (max-width: 1199.98px) {
  .realtime-content-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 991.98px) {
  .realtime-range-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .realtime-range-actions { grid-column: 1 / -1; }
  .realtime-overview .v2-overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .realtime-range-filter { grid-template-columns: minmax(0, 1fr); }
  .realtime-range-actions .btn { flex: 1; }
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.guide-accordion {
  overflow: hidden;
  padding: 0 1.5rem;
}

.guide-accordion-item + .guide-accordion-item {
  border-top: 1px solid var(--color-border-subtle);
}

.guide-accordion-heading {
  margin: 0;
}

.guide-accordion-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1.35rem 0;
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  text-align: left;
  background: transparent;
  border: 0;
  transition: color 160ms ease;
}

.guide-accordion-trigger:hover,
.guide-accordion-trigger:focus-visible {
  color: var(--color-accent-text);
}

.guide-accordion-trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 0.25rem;
  border-radius: 0.25rem;
}

.guide-accordion-chevron {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(225deg);
  transition: transform 180ms ease;
}

.guide-accordion-trigger.collapsed .guide-accordion-chevron {
  transform: rotate(45deg);
}

.guide-accordion-content {
  max-width: 58rem;
  padding: 0 0 1.55rem;
}

.guide-accordion-content p {
  margin: 0 0 0.85rem;
}

.guide-accordion-content strong {
  color: var(--color-text-primary);
}

.guide-accordion-content .btn {
  margin-top: 0.15rem;
}

.app-history-disclosure {
  --history-border-color: var(--color-border-subtle);
}

.app-history-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 0;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  -webkit-appearance: none;
}

.app-history-summary::-webkit-details-marker {
  display: none;
}

.app-history-summary::marker {
  content: "";
  font-size: 0;
}

.app-history-summary > div {
  min-width: 0;
}

.app-history-summary .app-section-title,
.app-history-summary .app-section-meta {
  margin: 0;
}

.app-history-summary .app-section-meta {
  margin-top: 0.25rem;
}

.app-history-summary:focus-visible {
  outline: 0;
}

.app-history-summary:focus-visible .app-history-chevron {
  color: var(--color-accent-text);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 0.3rem;
  border-radius: 0.1rem;
}

.app-history-chevron {
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.25rem;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: color var(--motion-fast), transform var(--motion-fast);
}

.app-history-summary:hover .app-history-chevron {
  color: var(--color-accent-text);
}

.app-history-disclosure[open] > .app-history-summary {
  margin-bottom: var(--space-md);
}

.app-history-disclosure[open] .app-history-chevron {
  transform: rotate(225deg);
}

.app-history-content {
  background: transparent;
  transition: opacity var(--motion-fast);
}


.app-history-disclosure[aria-busy="true"] .app-history-content {
  opacity: 0.55;
  pointer-events: none;
}

.history-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-md);
  padding: 0;
  background: transparent;
  border: 0;
}

.history-filter-bar label {
  min-width: 0;
  margin: 0;
}

.history-filter-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 2rem 0.5rem 0.9rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  transition:
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast);
}

.history-filter-pill::after {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.history-filter-pill:hover,
.history-filter-pill:focus-within,
.history-filter-pill.is-active {
  color: var(--color-accent-text);
  background: color-mix(in oklab, var(--color-accent) 8%, var(--color-bg-surface));
  border-color: var(--color-border-subtle);
}

.history-filter-pill:focus-within {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.history-filter-pill-label {
  display: inline-block;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-filter-pill .form-select {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

/* Native date filters share the pill's surface, type, focus and sizing. */
.history-filter-pill-date { padding-inline: 0.9rem; }
.history-filter-pill-date::after { display: none; }
.history-filter-pill-date .form-control {
  width: 8.5rem;
  min-height: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
}
.history-filter-pill-date .form-control:focus { box-shadow: none; }

.history-filter-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  transition:
    width var(--motion-fast),
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast);
}

.history-filter-search-pill-label {
  display: inline-block;
  padding-right: 1.35rem;
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
}

.history-filter-search .form-control {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  padding: 0;
  cursor: text;
  opacity: 0;
}

.history-filter-search-icon {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  color: var(--color-text-secondary);
  pointer-events: none;
  transform: translateY(-50%);
}

.history-filter-search:focus-within,
.history-filter-search.has-value {
  flex: 0 1 24rem;
  width: min(24rem, 100%);
  padding: 0;
  border-radius: var(--radius-menu);
}

.history-filter-search:focus-within .history-filter-search-pill-label,
.history-filter-search.has-value .history-filter-search-pill-label {
  display: none;
}

.history-filter-search:focus-within .form-control,
.history-filter-search.has-value .form-control {
  position: relative;
  inset: auto;
  min-height: 2.5rem;
  padding: 0.5rem 2.5rem 0.5rem 0.85rem;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  opacity: 1;
}

.history-filter-search:focus-within .form-control:focus,
.history-filter-search.has-value .form-control:focus {
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.history-filter-search-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.history-filter-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: auto;
  min-height: 2.5rem;
  padding: 0.5rem 0.85rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  border-color: var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  white-space: nowrap;
}

.history-filter-reset:not(:disabled):hover,
.history-filter-reset:not(:disabled):focus-visible {
  color: var(--color-accent-text);
  background: color-mix(in oklab, var(--color-accent) 8%, var(--color-bg-surface));
  border-color: var(--color-border-subtle);
}

.history-filter-reset-icon {
  display: inline-flex;
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
}

.history-filter-reset:disabled {
  display: none;
}

.history-filter-reset-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.history-filter-empty {
  margin: 0;
}

.factor-history-shell.is-filter-empty .factor-history-header {
  display: none;
}

.factor-history-shell.is-filter-empty {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.app-history-content .table-shell,
.app-history-content .factor-history-shell {
  border-color: var(--history-border-color);
}

.app-history-content .table thead th,
.app-history-content .table tbody td {
  border-color: var(--history-border-color);
}

@media (max-width: 479.98px) {
  .history-filter-pill-label {
    max-width: 8rem;
  }

  .history-filter-search:focus-within,
  .history-filter-search.has-value {
    flex-basis: 100%;
    width: 100%;
  }
}

.guide-aside {
  display: grid;
  gap: var(--space-lg);
}

.guide-info-card {
  padding: var(--space-lg);
}

.guide-info-title {
  margin: 0 0 1.35rem;
  font-size: 1.35rem;
  font-weight: var(--font-weight-semibold);
}

.audience-group-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audience-group-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: 0.88rem;
}

.audience-group-row:last-child {
  border-bottom: 0;
}

.audience-group-row strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.audience-group-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
}

.audience-group-dot-adults {
  background: var(--color-data-adults);
}

.audience-group-dot-young-adults {
  background: var(--color-data-young-adults);
}

.audience-group-dot-youth {
  background: var(--color-data-teens);
}

.audience-group-dot-children {
  background: var(--color-data-children);
}

.guide-door-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.guide-door-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.guide-door-list > div:first-child {
  padding-top: 0;
}

.guide-door-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.guide-door-list dt strong,
.guide-door-list dt span,
.guide-door-list dd span {
  display: block;
}

.guide-door-list dt strong {
  color: var(--color-text-primary);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2rem;
}

.guide-door-list dt span,
.guide-door-list dd span {
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  line-height: 1rem;
}

.guide-door-list dd {
  display: flex;
  align-items: center;
  margin: 0;
  flex-direction: column;
  text-align: center;
}

.guide-door-list code {
  display: inline-block;
  margin-bottom: 0.2rem;
  padding: 0.22rem 0.45rem;
  color: var(--color-accent-text);
  background: color-mix(in oklab, var(--color-accent) 9%, var(--color-bg-surface));
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.35rem;
  font-size: 0.74rem;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.guide-terms {
  display: grid;
  gap: 1.15rem;
  margin: 0;
}

.guide-terms dt {
  margin-bottom: 0.15rem;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.guide-terms dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: var(--line-height-body);
}

/* Factors */
.app-tabs {
  gap: 0;
  margin-bottom: var(--space-lg);
  padding: 0.25rem;
}

.app-tab {
  min-height: 2rem;
  padding: 0.375rem 1rem;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 0.48rem;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-label);
}

.app-tab:hover,
.app-tab:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-bg-interactive);
  border-color: transparent;
}

.app-tab.active,
.app-tab.active:hover,
.app-tab.active:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border-color: transparent;
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-subtle);
}

.general-factor-modal-trigger,
.general-factor-modal-trigger:focus {
  color: var(--color-accent-text);
  background: var(--color-bg-surface);
  border-color: var(--color-border-subtle);
}

.general-factor-modal-trigger:hover,
.general-factor-modal-trigger:active,
.general-factor-modal-trigger:first-child:active {
  color: var(--color-accent-text);
  background: var(--color-bg-surface-subtle);
  border-color: var(--color-border-subtle);
}

.general-factor-modal-trigger .app-badge {
  margin-right: -0.35rem;
}

.factors-active-table thead th {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-table-header);
  font-size: var(--overline-size);
  font-weight: var(--overline-weight);
  letter-spacing: var(--letter-spacing-overline);
  line-height: var(--overline-line-height);
  text-transform: uppercase;
}

.factors-active-table tbody td,
.factors-old-table tbody td {
  vertical-align: middle;
}

.factors-active-table tbody tr:has(.factor-table-comment-disclosure[open]) > td,
.factors-old-table tbody tr:has(.factor-table-comment-disclosure[open]) > td {
  vertical-align: top;
}

/* Keep each cell's closed-row baseline when a long comment grows the row downward. */
.factors-active-table tbody tr:has(.factor-table-comment-disclosure[open]) > td:not(:nth-last-child(-n + 2)),
.factors-old-table tbody tr:has(.factor-table-comment-disclosure[open]) > td:not(:nth-last-child(-n + 2)) {
  padding-top: calc(0.72rem + 0.375rem);
}

.factors-active-table tbody tr:has(.factor-table-comment-disclosure[open]) > td:nth-last-child(2),
.factors-old-table tbody tr:has(.factor-table-comment-disclosure[open]) > td:nth-last-child(2) {
  padding-top: calc(0.72rem + 0.16rem);
}

.factor-history-shell {
  --history-columns:
    minmax(10rem, 0.9fr)
    minmax(10rem, 1.05fr)
    minmax(13rem, 1.25fr)
    minmax(12rem, 1.15fr)
    minmax(6rem, 0.55fr)
    1rem;
  overflow: hidden;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow-subtle);
}

.factor-history-header,
.factor-timeline-row,
.factor-history-change {
  grid-template-columns: var(--history-columns);
  column-gap: var(--space-md);
}

.factor-history-shell.is-static {
  --history-columns:
    minmax(10rem, 0.9fr)
    minmax(10rem, 1.05fr)
    minmax(13rem, 1.25fr)
    minmax(12rem, 1.15fr)
    minmax(6rem, 0.55fr);
}

/* Static rows show the complete change since there is no detail panel to open. */
.factor-timeline-row:not(.app-disclosure-row) .factor-timeline-when {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

.factor-history-header {
  display: grid;
  align-items: center;
  padding: 0.7rem 1rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-table-header);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--overline-size);
  font-weight: var(--overline-weight);
  letter-spacing: var(--letter-spacing-overline);
  line-height: var(--overline-line-height);
  text-transform: uppercase;
}

.factor-timeline {
  display: block;
}

.factor-timeline-event {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.factor-timeline-event + .factor-timeline-event {
  border-top: 1px solid var(--color-border-subtle);
}

.factor-timeline-event[open] {
  border-color: var(--color-border-subtle);
}

.factor-timeline-row {
  display: grid;
  row-gap: 0;
  align-items: center;
  min-height: 4.8rem;
  padding: 0.85rem 1rem;
}

.factor-history-event {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.factor-timeline-date-time {
  gap: 0.05rem;
  color: var(--color-text-primary);
  font-size: 0.78rem;
  line-height: 1.2;
}

.factor-timeline-clock {
  color: var(--color-text-secondary);
  font-size: inherit;
  font-weight: var(--font-weight-regular);
}

.factor-timeline-identity {
  gap: 0.45rem;
  flex-wrap: wrap;
}

.factor-title {
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
}

.factor-history-details {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  line-height: 1.25;
}

.factor-history-details > span {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.factor-history-details strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.factor-history-mobile-time {
  display: none;
}

.factor-history-desktop-time {
  color: var(--color-text-secondary);
}

.factor-timeline-when {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  justify-self: stretch;
  padding-inline-end: 1rem;
  gap: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factor-timeline-range {
  color: var(--color-text-secondary);
  font-size: inherit;
  font-weight: var(--font-weight-regular);
}

.factor-history-user {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  white-space: nowrap;
}

.factor-history-user,
.factor-history-user-label {
  text-align: center;
}

.history-actor-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: .72rem;
  font-weight: var(--font-weight-semibold);
  vertical-align: middle;
}

.history-actor-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.factor-history-mobile-actor { display: none; }

.factor-timeline-expanded {
  grid-template-columns: minmax(0, 1.1fr) minmax(14rem, 0.9fr);
  padding: 1rem 1.25rem;
  font-size: 0.82rem;
  line-height: 1.35;
}

.factor-timeline-expanded > :only-child {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Per-day details continue the outer history columns without a nested table. */
.factor-history-changes {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0;
}

.factor-history-change {
  display: grid;
  align-items: baseline;
  padding: var(--space-sm) 1rem;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  line-height: 1.35;
}

.factor-history-change > time {
  grid-column: 2 / 4;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.factor-history-change > span {
  grid-column: 4 / 6;
  min-width: 0;
  overflow-wrap: anywhere;
}

.factor-timeline-expanded .factor-detail-heading {
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
}

.factor-timeline-expanded .factor-values-grid span {
  font-size: 0.78rem;
}

.factor-timeline-expanded .factor-values-grid strong {
  font-size: var(--font-size-body);
  line-height: 1.2;
}
.factor-timeline-expanded .factor-comment-panel p {
  font-size: 0.82rem;
}

@media (max-width: 1199.98px) {
  .preset-scenario-table-shell {
    max-width: 100%;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .preset-scenario-table {
    display: block;
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .preset-scenario-table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .preset-scenario-table > tbody {
    display: block;
    overflow: hidden;
    margin-bottom: 0.65rem;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.65rem;
    box-shadow: var(--shadow-subtle);
  }

  .preset-scenario-table > tbody:last-child {
    margin-bottom: 0;
  }

  .preset-scenario-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.65rem 0.75rem;
    min-height: 0;
    padding: 0.9rem;
  }

  .preset-scenario-table .preset-scenario-group .preset-scenario-row > td {
    height: auto;
    min-width: 0;
    padding: 0;
    background: transparent !important;
    border: 0;
  }

  .preset-scenario-row > td:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
  }

  .preset-scenario-row > td:nth-child(2) {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    gap: 0.35rem;
    color: var(--color-text-secondary);
  }

  .preset-scenario-row > td:nth-child(2)::before {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    content: attr(data-label) ":";
  }

  .preset-scenario-row > td:nth-child(3) {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    justify-self: end;
  }

  .preset-scenario-row > td:nth-child(4) {
    grid-row: 1;
    grid-column: 3;
    align-self: center;
    justify-self: end;
  }

  .preset-scenario-details {
    display: block;
  }

  .preset-scenario-details > td {
    display: block;
    width: 100%;
    border-top: 1px solid var(--color-border-subtle) !important;
    border-bottom: 0 !important;
  }

  .preset-scenario-details-grid {
    padding: 1.15rem;
  }

  .factor-history-shell {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .factor-history-header {
    display: none;
  }

  .factor-timeline {
    display: grid;
    gap: var(--space-xs);
  }

  .factor-timeline-event,
  .factor-timeline-event + .factor-timeline-event {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.65rem;
    box-shadow: var(--shadow-subtle);
  }

  .factor-timeline-event[open] {
    border-color: var(--color-border-subtle);
  }

  .factor-timeline-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) 1rem;
    grid-template-areas:
      "event factor chevron"
      "event details chevron"
      ". period period";
    column-gap: var(--space-sm);
    row-gap: 0.28rem;
    min-height: 0;
    padding: 0.85rem;
    align-items: start;
  }

  .factor-history-shell.is-static .factor-timeline-row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    grid-template-areas:
      "event factor"
      "event details"
      ". period";
  }

  .factor-history-event {
    grid-area: event;
    display: block;
  }

  .factor-history-event .factor-timeline-date-time {
    display: none;
  }

  .factor-timeline-marker {
    width: 2.15rem;
    height: 2.15rem;
  }

  .factor-timeline-identity {
    grid-area: factor;
    align-self: center;
  }

  .factor-title {
    font-size: var(--font-size-body);
    line-height: 1.25;
  }

  .factor-history-details {
    grid-area: details;
    display: block;
    font-size: 0.82rem;
  }

  .factor-history-details > span {
    flex-wrap: wrap;
    gap: 0.2rem 0.4rem;
  }

  .factor-history-mobile-time {
    display: inline;
  }

  .factor-history-desktop-time,
  .factor-history-user {
    display: none;
  }

  .factor-history-mobile-actor { display: inline-flex; margin-inline-start: .25rem; }

  .factor-timeline-when {
    grid-area: period;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem 0.45rem;
    justify-self: stretch;
    margin-top: 0.35rem;
    overflow: visible;
    padding-inline-end: 0;
    font-size: 0.82rem;
    text-overflow: clip;
    white-space: normal;
  }

  .factor-timeline-range::before {
    content: "·";
    color: var(--color-text-secondary);
  }

  .factor-timeline-range .factor-timeline-when-clock {
    display: none;
  }

  .factor-timeline-chevron {
    grid-area: chevron;
    align-self: center;
  }

  .factor-timeline-expanded {
    grid-template-columns: 1fr;
    padding: 0.85rem 0.85rem 1rem 3.85rem;
  }

  .factor-history-change {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-sm);
    padding-inline: 0.85rem;
    font-size: 0.82rem;
  }

  .factor-history-change > time,
  .factor-history-change > span {
    grid-column: 2;
  }

  .factor-values-panel {
    padding-right: 0;
    padding-bottom: 0.85rem;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .factor-values-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xs);
  }

  .app-header {
    background: var(--color-bg-header);
  }

  .app-navigation-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1020;
    background: var(--color-bg-navigation-backdrop);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
  }

  body:has(#app-primary-navigation.show) .app-navigation-backdrop,
  body:has(.navbar-toggler[aria-controls="app-primary-navigation"][aria-expanded="true"]) .app-navigation-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .app-navbar {
    position: static;
  }

  .app-navbar .container {
    position: static;
    flex-wrap: nowrap;
  }

  .app-navbar .navbar-collapse {
    position: absolute;
    z-index: 1031;
    top: 100%;
    right: 0;
    left: 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100dvh - 4rem);
    padding: 0;
    overflow-y: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    overscroll-behavior: contain;
  }

  .app-navbar-collapse-inner {
    display: block;
    padding: 0.8rem 1rem 0;
    background: var(--color-bg-header);
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    border-radius: 0;
    box-shadow: var(--shadow-elevated);
  }

  .app-navbar .navbar-collapse.collapsing {
    overflow: hidden;
    will-change: height;
    transition: height 200ms cubic-bezier(0.2, 0, 0, 1);
  }

  .app-navbar .navbar-collapse.show {
    overflow: visible;
  }

  .app-navbar .navbar-collapse .app-navbar-actions {
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin: 0.75rem 0 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border-subtle);
  }

  .app-navbar-actions > .dropdown {
    display: flex;
    align-items: center;
  }

  .app-navbar-actions .theme-toggle-button,
  .app-navbar-actions .app-user-menu-toggle {
    min-height: var(--touch-target-min);
  }

  .app-navbar-actions .theme-toggle-button {
    width: var(--touch-target-min);
  }
}

@media (max-width: 991.98px) {
  .app-home-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-xl);
  }

  .preset-scenario-details-grid {
    grid-template-columns: 1fr;
  }

  .preset-scenario-history {
    padding-top: 1.25rem;
    padding-left: 0;
    border-top: 1px solid var(--color-border-subtle);
    border-left: 0;
  }

  .app-page-header {
    align-items: flex-start;
  }

  .app-navbar .container {
    align-content: flex-start;
  }

  .app-navbar .app-brand {
    min-height: 4rem;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .app-navbar .navbar-toggler {
    align-self: center;
  }

  .app-navbar .navbar-collapse {
    flex-basis: 100%;
  }

  .import-layout {
    grid-template-columns: 1fr;
  }

  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-navbar .navbar-nav {
    gap: 0.15rem;
  }

  .app-navbar .nav-link {
    padding: 0.7rem;
  }

  .app-navbar .navbar-collapse .app-navbar-actions {
    justify-content: flex-end;
    width: 100%;
  }

}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .app-navigation-backdrop,
  .app-navbar .navbar-collapse.collapsing {
    transition: none;
  }
}

@media (max-width: 767.98px) {
  .preset-scenario-history {
    grid-template-columns: 1fr;
  }

  .preset-scenario-detail-actions {
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .preset-version-history-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .container {
    width: min(100% - 1.25rem, 80rem);
  }

  .app-page {
    padding-top: 1.25rem;
  }

  .app-page-header {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: var(--space-lg);
  }

  .app-page-actions {
    width: 100%;
  }

  .app-page-actions .btn {
    flex: 1;
  }

  .app-home-hero {
    min-height: 0;
    padding: 1.6rem;
  }

  .app-home-hero .app-page-title {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  .home-hero-audience {
    padding: var(--space-md);
  }

  .home-week-shortcut {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    padding: var(--space-md);
  }

  .home-week-shortcut-icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  .home-week-shortcut .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .guide-accordion {
    padding: 0 1rem;
  }

  .guide-accordion-trigger {
    padding: 1.1rem 0;
    font-size: 0.98rem;
  }

  .guide-aside {
    grid-template-columns: 1fr;
  }

  .import-upload-card,
  .import-info-card {
    padding: var(--space-md);
  }

  .import-dropzone {
    min-height: 15rem;
    padding: 1.5rem 1rem;
  }
.preset-quick-card:not(.preset-quick-card-compact) .preset-quick-save {
    width: 100%;
  }

  #factorFormModal .modal-body {
    padding: 0 1rem;
  }

  #factorFormModal .modal-footer {
    padding: 0.9rem 1rem 1rem;
  }

  .login-shell {
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .login-brand-panel {
    display: none;
  }

  .login-form-panel {
    height: 100%;
    min-height: 0;
    padding: 1.25rem;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  body.app-login-page {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.app-login-page .app-guest-container,
  body.app-login-page .app-guest-container .app-page {
    height: 100%;
    min-height: 0;
  }
}

.app-error-state {
  display: flex;
  width: min(100%, 36rem);
  margin: clamp(2rem, 8vh, 5rem) auto;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  align-items: center;
  flex-direction: column;
  gap: 1.15rem;
  text-align: center;
}

.app-error-state-icon {
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-text);
  background: color-mix(in oklab, var(--color-accent) 12%, var(--color-bg-surface));
  border-radius: 50%;
}

.app-error-state-icon svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.app-error-state h1 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: clamp(1.85rem, 5vw, 2.4rem);
  font-weight: var(--font-weight-semibold);
}

.app-error-state p {
  max-width: 28rem;
  margin: 0.35rem 0 0;
  color: var(--color-text-secondary);
}

.app-error-state .btn {
  min-width: 9rem;
}

@media (max-width: 575.98px) {
  .app-error-state {
    margin: 1.5rem auto;
    padding: 1.75rem 1.25rem;
  }

  .app-responsive-table-shell {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-responsive-table,
  .app-responsive-table tbody {
    display: block;
    width: 100%;
  }

  .app-responsive-table thead {
    display: none;
  }

  .app-responsive-table tbody {
    display: grid;
    gap: 0.65rem;
  }

  .app-responsive-table tbody > tr {
    display: grid;
    overflow: hidden;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-menu);
    box-shadow: var(--shadow-subtle);
  }

  .app-responsive-table tbody > tr > td {
    display: grid;
    grid-template-columns: minmax(6.25rem, 0.75fr) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: center;
    padding: 0.65rem 0.75rem;
    text-align: left !important;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .app-responsive-table tbody > tr > td:last-child {
    border-bottom: 0;
  }

  .app-responsive-table tbody > tr > td::before {
    color: var(--color-text-secondary);
    content: attr(data-label);
    font-size: var(--overline-size);
    font-weight: var(--overline-weight);
    letter-spacing: var(--letter-spacing-overline);
    line-height: var(--overline-line-height);
    text-transform: uppercase;
  }

  .app-responsive-table tbody > tr > td[data-label="Åtgärder"] > * {
    justify-self: end;
  }

  .app-responsive-table .factor-row-actions-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .app-responsive-table tbody > tr > .app-responsive-table-empty {
    display: block;
    padding: var(--space-md);
    border-bottom: 0;
  }

  .app-responsive-table tbody > tr > .app-responsive-table-empty::before {
    content: none;
  }

  /* Users are easier to scan as compact identity cards than as stacked table fields. */
  .users-table tbody > tr {
    grid-template-areas: "name role status actions";
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 0.4rem;
    align-items: center;
    padding: 0.65rem 0.7rem;
  }

  .users-table tbody > tr > td {
    display: inline-flex;
    grid-template-columns: none;
    gap: 0.35rem;
    align-items: center;
    width: auto !important;
    min-width: 0;
    padding: 0;
    background: transparent !important;
    border: 0;
  }

  .users-table-name {
    grid-area: name;
    overflow: hidden;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .users-table-role {
    grid-area: role;
  }

  .users-table-status {
    grid-area: status;
    justify-self: start;
  }

  .users-table-created {
    display: none !important;
  }

  .users-table-actions {
    grid-area: actions;
    align-self: center;
    justify-self: end;
  }

  .users-table tbody > tr > td::before {
    content: none !important;
  }

  .users-table-role .app-badge,
  .users-table-status .app-badge {
    width: auto;
    max-width: max-content;
    white-space: nowrap;
  }

  .users-table .user-row-actions-toggle {
    min-height: 2rem;
    padding: 0.4rem 0.65rem 0.4rem 0.8rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 767.98px) {
  :is(
    .app-page-actions,
    .app-filter-bar .app-toolbar-actions,
    .import-file-actions,
    .day-planner-custom-range-action,
    .day-planner-save-actions,
    .day-planner-batch-actions,
    .preset-scenario-detail-actions,
    .passage-gap-modal-actions
  ) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
:is(
    .app-page-actions,
    .app-filter-bar .app-toolbar-actions,
    .import-file-actions,
    .day-planner-custom-range-action,
    .day-planner-save-actions,
    .day-planner-batch-actions,
    .preset-scenario-detail-actions,
    .passage-gap-modal-actions
  ) > .btn,
.preset-scenario-detail-actions > form,
.preset-scenario-detail-actions > form > .btn {
    width: 100%;
    max-width: none;
  }

}

@media print {
  .app-header,
  .app-footer,
  .app-page-actions,
  .no-print {
    display: none !important;
  }

  body {
    color: var(--color-print-text);
    background: var(--color-print-bg);
  }

  .app-page {
    padding: 0;
  }
}

/* Report, calendar and profiles use the shared tokens. */
.v2-period-presets,
.v2-period-form,
.v2-calendar-heading,
.v2-profile-heading,
.v2-print-actions {
  display: flex;
  align-items: end;
  gap: var(--space-sm);
}

.v2-period-presets { margin-bottom: var(--space-md); flex-wrap: wrap; }
.v2-period-form { flex-wrap: wrap; padding: var(--space-md); }
.v2-period-form > div { flex: 1 1 11rem; }
.v2-period-form .btn { flex: 0 0 auto; }
.v2-distribution-bar { display: flex; width: 100%; height: var(--space-md); overflow: hidden; border-radius: var(--radius-pill); background: var(--color-bg-surface-subtle); }
.v2-distribution-segment { display: block; height: 100%; }
.v2-distribution-segment.v2-adults { background: var(--color-data-adults); }
.v2-distribution-segment.v2-young-adults { background: var(--color-data-young-adults); }
.v2-distribution-segment.v2-teens { background: var(--color-data-teens); }
.v2-distribution-segment.v2-children { background: var(--color-data-children); }
.v2-distribution-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.v2-distribution-list > div { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-xs); align-items: center; }
.v2-distribution-list strong { grid-column: 2; font-size: var(--font-size-heading-sm); }
.v2-distribution-list small { grid-column: 2; color: var(--color-text-secondary); }
.v2-distribution-key { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; }
.v2-distribution-key.v2-adults { background: var(--color-data-adults); }
.v2-distribution-key.v2-young-adults { background: var(--color-data-young-adults); }
.v2-distribution-key.v2-teens { background: var(--color-data-teens); }
.v2-distribution-key.v2-children { background: var(--color-data-children); }
.calendar-backfill-action { display: inline-flex; align-items: center; gap: var(--space-xs); }
.calendar-backfill-action .app-inline-notice-icon { color: var(--color-warning-text); }
.v2-calendar-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr); gap: var(--space-xl); }
.v2-calendar-heading { justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); }
.v2-calendar-heading .btn { min-width: var(--control-height); }
.v2-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-xs); }
.v2-calendar-weekday { text-align: center; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.v2-calendar-day { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; min-height: 5rem; padding: var(--space-xs); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-control); background: var(--color-bg-surface); color: var(--color-text-primary); font: inherit; text-align: center; cursor: pointer; }
.v2-calendar-day:hover { background: var(--color-bg-surface-subtle); }
.v2-calendar-day:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.v2-calendar-day.is-selected { border-color: var(--color-border-subtle); background: var(--color-bg-selected); }
.v2-calendar-day-number { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 auto; }
.v2-calendar-day.is-today .v2-calendar-day-number {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-control);
  font-weight: var(--font-weight-bold);
}
.v2-calendar-day small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-caption); }
.v2-calendar-dot { display: block; width: .45rem; height: .45rem; margin: var(--space-2xs) 0; border-radius: 50%; background: var(--color-data-visits); }
.v2-calendar-form { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.v2-profiles-list { display: grid; gap: var(--space-xl); }
.v2-profile-summary { padding: 0 0 var(--space-lg); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.v2-profile-heading { align-items: start; justify-content: space-between; }
.v2-profile-factors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-md) 0; }
.v2-profile-factors > div { display: flex; flex-direction: column; gap: var(--space-2xs); }
.v2-profile-factors strong { font-size: var(--font-size-heading-sm); }
.v2-print-page { background: var(--color-bg-page); color: var(--color-text-primary); }
.v2-print-page main { max-width: var(--layout-content-max); margin: auto; }
.v2-print-actions { padding: var(--space-md) 0; }
.v2-print-header { border-bottom: var(--border-width) solid var(--color-border-default); padding: var(--space-xl) 0; }
.v2-print-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.v2-print-metrics div { border-bottom: var(--border-width) solid var(--color-border-subtle); padding-bottom: var(--space-sm); }
.v2-print-metrics dt { color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
.v2-print-metrics dd { font-size: var(--font-size-heading-sm); font-weight: var(--font-weight-semibold); }

@media (max-width: 991.98px) {
  .v2-calendar-layout { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .v2-period-presets > a { flex: 1 1 auto; text-align: center; }
  .v2-period-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-period-form .btn { grid-column: 1 / -1; }
  .v2-distribution-list,
  .v2-profile-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-calendar-day { min-height: 3.5rem; }
  .v2-calendar-day small { display: none; }
  .v2-print-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .v2-period-form { grid-template-columns: 1fr; }
  .v2-calendar-grid { gap: var(--space-2xs); }
  .v2-calendar-day { min-height: var(--touch-target-min); padding: var(--space-2xs); }
}

@media print {
  .v2-screen-only,
  .v2-print-actions { display: none !important; }
  .v2-print-page { color: var(--color-print-text); background: var(--color-print-bg); }
  .v2-print-page .app-section { break-inside: avoid; }
}

/* Report: grouped presentation with the shared theme. */
.v2-period-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md); }
.v2-period-presets { align-items: stretch; margin: 0; }
.v2-period-presets .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height-lg); }
.v2-period-presets .btn-outline-secondary,
.v2-calendar-heading .btn-outline-secondary {
  color: var(--color-text-primary);
  background: var(--color-bg-surface-strong);
  box-shadow: none;
}
.v2-period-presets .btn-outline-secondary:hover,
.v2-period-presets .btn-outline-secondary:focus-visible,
.v2-calendar-heading .btn-outline-secondary:hover,
.v2-calendar-heading .btn-outline-secondary:focus-visible {
  color: var(--color-accent-text);
  background: var(--color-bg-interactive);
}
/* Period presets and month navigation share the tables' subtle outline. */
:is(.v2-period-presets, .v2-calendar-heading) .btn,
:is(.v2-period-presets, .v2-calendar-heading) .btn:is(:hover, :focus, :active) {
  border: var(--border-width) solid var(--color-border-subtle);
}
.v2-week-picker { position: relative; flex: 1 1 19rem; max-width: 28rem; min-width: 0; }
.v2-week-picker > summary {
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: var(--control-height-lg); padding: var(--space-xs) var(--space-md);
  border: var(--border-width) solid var(--color-border-default); border-radius: var(--radius-control);
  background: var(--color-bg-surface); color: var(--color-text-primary); cursor: pointer;
  list-style: none; box-shadow: var(--shadow-subtle);
}
.v2-week-picker > summary::-webkit-details-marker { display: none; }
.v2-week-picker > summary:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.v2-week-picker-icon { color: var(--color-accent-text); font-size: var(--font-size-heading-sm); }
.v2-week-picker-chevron { margin-left: auto; }
.v2-week-picker > summary[aria-current="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.v2-week-picker > summary[aria-current="true"]:is(:hover, :active) {
  background: var(--color-accent-hover);
}
.v2-week-picker > summary[aria-current="true"] .v2-week-picker-icon { color: inherit; }
.v2-week-picker .v2-period-form {
  position: absolute; z-index: 10; top: calc(100% + var(--space-xs)); left: 0;
  width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end; gap: var(--space-md); margin: 0; padding: var(--space-md);
  background: var(--color-bg-elevated); border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-elevated);
}
.v2-week-picker .v2-period-form > div { min-width: 0; }
.v2-week-picker .v2-period-form .btn { grid-column: 1 / -1; }
.v2-overview { display: grid; gap: var(--space-lg); padding: var(--space-xl); }
.v2-overview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xl); min-width: 0; }
.v2-overview-period,
.v2-overview-context { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); min-width: 0; }
.v2-overview-range { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.v2-overview-dates { font-family: var(--font-family-heading); font-size: var(--font-size-heading-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); }
.v2-overview-days { color: var(--color-text-secondary); font-size: var(--font-size-label); white-space: nowrap; }
.v2-overview-context p { color: var(--color-text-secondary); font-size: var(--font-size-label); }
.v2-overview-context { flex: 0 1 20rem; }
.v2-overview-context a, .v2-overview-context a:hover { text-decoration: none; }
.v2-overview-context strong { font-weight: var(--font-weight-medium); }
.v2-overview-context p { margin: 0; }
.v2-overline { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-overline); text-transform: uppercase; }
.v2-overview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); min-width: 0; }
.v2-overview-stat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); min-width: 0; }
.v2-overview-value { font-family: var(--font-family-heading); font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: var(--font-weight-medium); font-variant-numeric: lining-nums tabular-nums; line-height: var(--line-height-tight); }
.v2-overview-label { color: var(--color-text-secondary); font-size: var(--font-size-label); }
.v2-chart-data summary { color: var(--color-accent-text); cursor: pointer; text-decoration: none; }
.v2-chart-data summary:hover { color: var(--color-accent-text-hover); text-decoration: none; }
.v2-chart-data summary:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.v2-stat-block { min-width: 0; padding: var(--space-lg); }
.v2-block-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-lg); }
.v2-block-heading .app-section-title { font-family: var(--font-family-heading); font-size: var(--font-size-heading-sm); }
.v2-block-heading .app-section-meta { margin: var(--space-2xs) 0 0; }
.v2-chart-switch { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.v2-chart-switch .btn { min-width: 4.5rem; }
.v2-chart { display: flex; gap: var(--space-sm); min-width: 0; }
.v2-chart-yaxis { flex: 0 0 2rem; display: flex; flex-direction: column; justify-content: space-between; height: 12rem; text-align: right; color: var(--color-text-secondary); font-size: var(--font-size-caption); }
.v2-chart-scroll { flex: 1; min-width: 0; overflow-x: auto; padding-bottom: var(--space-xs); }
.v2-chart-plot { position: relative; height: 12rem; min-width: max(100%, var(--chart-min-width)); }
.v2-chart-guides { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.v2-chart-guides span { width: 100%; border-top: var(--border-width) solid var(--color-border-subtle); }
.v2-chart-columns,
.v2-chart-axis { display: grid; grid-template-columns: repeat(var(--bar-count), minmax(0, 1fr)); min-width: max(100%, var(--chart-min-width)); }
.v2-chart-columns { position: relative; height: 100%; align-items: end; }
.v2-chart-column { display: flex; align-items: flex-end; justify-content: center; height: 100%; padding-inline: 1px; }
.v2-chart-column:hover { background: var(--color-accent-subtle); }
.v2-chart-bar { display: flex; flex-direction: column-reverse; width: min(100%, 1.75rem); overflow: hidden; background: var(--color-data-visits); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.v2-chart-segment { display: block; width: 100%; flex: 0 0 auto; }
.v2-chart-segment-adults { background: var(--color-data-adults); }
.v2-chart-segment-young-adults { background: var(--color-data-young-adults); }
.v2-chart-segment-teens { background: var(--color-data-teens); }
.v2-chart-segment-children { background: var(--color-data-children); }
.v2-chart-segment-unknown { background: var(--color-bg-surface-strong); }
.v2-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-sm) 0 0; padding: 0; list-style: none; color: var(--color-text-secondary); font-size: var(--font-size-caption); }
.v2-chart-legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.v2-chart-axis { padding-top: var(--space-xs); }
.v2-chart-axis span { color: var(--color-text-secondary); font-size: var(--font-size-caption); white-space: nowrap; text-align: center; }
.v2-chart-axis-year { display: block; font-size: .8em; line-height: 1.3; color: var(--color-text-muted); }
.v2-chart-data { margin-top: var(--space-sm); }
.v2-chart-data .table-shell { margin-top: var(--space-sm); }
.v2-exact-table { min-width: 68rem; margin-bottom: 0; }
.v2-exact-table .report-week-col-week { width: 12%; }
.v2-exact-table .report-week-col-chart { width: 45%; }
.v2-exact-note { margin: var(--space-sm) 0 0; }
.v2-insights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.v2-insights-grid > * { min-width: 0; }
.v2-insights-grid .v2-distribution-bar { height: var(--space-lg); }
.v2-distribution-table { margin-top: var(--space-lg); }
.v2-distribution-table .v2-distribution-key { margin-right: var(--space-xs); }
.v2-recent-table .table { margin-bottom: 0; }
.v2-recent-table th,
.v2-recent-table td { padding: var(--space-sm); }
.v2-recent-table td:first-child,
.v2-recent-table td:nth-child(2) { white-space: nowrap; }
.v2-calculation-form { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-sm); }
.v2-calculation-form > div { width: min(100%, 19rem); }
.v2-calculation-settings > .app-section-meta { margin: var(--space-sm) 0 0; }
.v2-calculation-history { margin-top: var(--space-lg); }
.v2-calculation-history > summary { width: fit-content; color: var(--color-accent-text); cursor: pointer; font-weight: var(--font-weight-medium); }
.v2-calculation-history .table-shell,
.v2-calculation-history .empty-state { margin-top: var(--space-sm); }

@media (max-width: 991.98px) {
  .v2-overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-insights-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .v2-overview { gap: var(--space-lg); padding: var(--space-lg); }
  .v2-overview-header { flex-direction: column; gap: var(--space-md); }
  .v2-overview-context { flex-basis: auto; }
  .v2-block-heading { flex-direction: column; }
  .v2-week-picker { max-width: none; }
  .v2-week-picker .v2-period-form { position: static; width: 100%; margin-top: var(--space-xs); box-shadow: var(--shadow-subtle); }
}

@media (max-width: 575.98px) {
  .v2-period-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .v2-period-presets .btn { padding-inline: var(--space-xs); }
  .v2-week-picker .v2-period-form { grid-template-columns: 1fr; }
  .v2-overview-summary { gap: var(--space-md); }
  .v2-overview-value { font-size: var(--font-size-metric); }
  .v2-chart-switch { width: 100%; }
  .v2-chart-switch .btn { flex: 1; }
}

@media (max-width: 420px) {
  .v2-overview-summary { grid-template-columns: 1fr; }
}

/* Shared table and empty-state presentation across every route. */
.app-data-table-shell { overflow-x: auto; }
.app-data-table { min-width: 30rem; }
.app-data-table > tbody > tr > th {
  padding: 0.72rem 0.8rem;
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border-color: var(--color-border-subtle);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--motion-fast);
}
.app-data-table .app-numeric-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-table-detail { display: block; margin-top: var(--space-2xs); color: var(--color-text-secondary); font-size: var(--font-size-caption); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); }
.app-share-cell { display: grid; }
.app-share-cell .app-share-track { min-width: 0; margin: 0; }
.app-share-trigger { display: flex; align-items: center; width: 100%; min-width: 0; min-height: var(--touch-target-min); padding: 0; border: 0; background: none; cursor: pointer; }
.app-share-trigger:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-control); }
.app-share-track {
  display: block;
  width: 100%;
  min-width: 4rem;
  height: 0.45rem;
  margin-top: var(--space-2xs);
  overflow: hidden;
  background: var(--color-bg-surface-strong);
  border-radius: var(--radius-pill);
}
.app-share-track > span { display: block; height: 100%; background: var(--color-data-visits); border-radius: inherit; }
.users-directory-table { min-width: 55rem; }
@media (min-width: 768px) {
  .users-directory-table :is(th, td):nth-child(3) { min-width: 16rem; width: 30%; overflow-wrap: anywhere; }
}
.app-contact-missing { color: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-bg-surface)); }
.users-directory-identity { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-text-primary); text-decoration: none; }
.users-directory-identity:hover { color: var(--color-accent-text); }
.users-directory-identity > span:last-child { display: grid; gap: var(--space-2xs); min-width: 0; }
.users-directory-identity small { color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
.users-directory-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.users-directory-initials { color: var(--color-on-accent); background: var(--color-accent); font-size: var(--font-size-caption); }
.realtime-data-table { min-width: 25rem; }
.realtime-data-table :is(td:first-child, td:nth-child(2)) { white-space: nowrap; }
.app-entrance-table { min-width: 22rem; margin-bottom: 0; }
.app-entrance-table .app-share-cell { min-width: 3rem; }
@media (max-width: 575.98px) {
  .realtime-content-grid .realtime-data-table { min-width: 0; width: 100%; }
  .realtime-content-grid .table-shell .app-data-table > :not(caption) > * > * { padding: var(--space-xs); }
  .realtime-content-grid :is(th[scope="row"], .app-table-detail) { overflow-wrap: anywhere; }
  .table-shell .app-entrance-table { min-width: 0; width: 100%; }
  .table-shell .app-entrance-table > :not(caption) > * > * { padding: var(--space-xs); }
  .app-entrance-table :is(th[scope="row"], .app-table-detail) { overflow-wrap: anywhere; }
  .app-entrance-table .app-share-cell { min-width: 2rem; }
}
.v2-distribution-table .app-data-table { min-width: 0; }
.import-door-table { margin-bottom: var(--space-md); }
.scenario-factor-table { min-width: 0; }
.scenario-factor-table td:last-child { font-weight: var(--font-weight-semibold); }
.scenario-factor-table-shell { max-width: 100%; }
.guide-terms-table .app-data-table { min-width: 0; }
.guide-door-table .app-data-table { min-width: 23rem; }
.guide-door-table th small { display: block; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
.account-profile-table { margin-top: var(--space-md); }
.account-profile-table .app-data-table,
.v2-print-summary-table { min-width: 0; }
.account-profile-table td { overflow-wrap: anywhere; }
.history-data-table { min-width: 66rem; }
.scenario-version-table { min-width: 52rem; }
.scenario-version-table td:nth-child(4) { max-width: 16rem; overflow-wrap: anywhere; }
.history-data-table [data-history-row][hidden] { display: none; }
.history-data-table td,
.history-data-table th { vertical-align: top; }
.history-data-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.history-data-table td:nth-child(4) { max-width: 18rem; overflow-wrap: anywhere; }
.history-row-details > summary { color: var(--color-accent-text); cursor: pointer; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.history-row-details > summary:hover { color: var(--color-accent-text-hover); }
.history-row-details > summary:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.history-row-details .scenario-factor-table-shell { width: 18rem; margin-top: var(--space-sm); }
.history-row-details .scenario-factor-table th,
.history-row-details .scenario-factor-table td { padding: var(--space-xs); font-size: var(--font-size-caption); }
.factor-history-shell.is-filter-empty .history-data-table { display: none; }

/* Data inside an existing panel is laid out as rows on that panel's surface.
   Keep the table markup for headings and screen readers, but avoid a second card. */
:is(.app-surface, .card, .modal-content, .day-planner, .preset-quick-card, .app-history-content, .preset-scenario-details) .table-shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(.app-surface, .card, .modal-content, .day-planner, .preset-quick-card, .app-history-content, .preset-scenario-details) .table-shell .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--color-bg-table-row-hover);
}

:is(.app-surface, .card, .modal-content, .day-planner, .preset-quick-card, .app-history-content, .preset-scenario-details) .table-shell :is(thead, tbody) :is(th, td) {
  background: transparent;
  border-color: var(--color-border-subtle);
  box-shadow: none;
}

/* A quiet heading tint for tables embedded in a panel, in either theme. */
:is(.app-surface, .card, .modal-content, .day-planner, .preset-quick-card, .app-history-content, .preset-scenario-details) .table-shell:not(.preset-scenario-table-shell) .table > thead:not(.visually-hidden) > tr > * {
  background-color: var(--color-bg-table-header-inset);
}

:is(.app-surface, .card, .modal-content, .day-planner, .preset-quick-card, .app-history-content, .preset-scenario-details) .table-shell tbody tr:last-child > * {
  border-bottom: 0;
}

/* The archive is a standalone table, even though its outer section is collapsible. */
@media (min-width: 1200px) {
  .table-shell.preset-scenario-table-shell.scenario-disclosure-surface {
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-subtle);
  }
}
.scenario-disclosure-surface .preset-scenario-table {
  --bs-table-bg: var(--color-bg-surface);
}
.scenario-disclosure-surface .preset-scenario-table thead th {
  background: var(--color-bg-table-header);
}
.scenario-disclosure-surface .preset-current-version {
  background: transparent;
}
.preset-configuration-title { display: grid; gap: var(--space-2xs); }
.preset-configuration-title > span { color: var(--color-text-secondary); font-size: var(--font-size-caption); }
.preset-current-factors { background: transparent; padding: var(--space-sm) 0; }
.history-row-details .preset-version-factors { min-width: 18rem; }

/* A profile is one surface with identity and contact information. */
.account-profile-card { grid-template-columns: minmax(13rem, .6fr) minmax(0, 1.6fr); gap: var(--space-xl); padding: var(--space-xl); align-items: stretch; }
.account-profile-card .account-settings-card { padding: 0; }
.account-profile-card .account-public-identity { padding-right: var(--space-lg); }
.account-profile-card .account-profile-image { width: 9rem; height: 9rem; flex-basis: 9rem; }
.account-profile-contact-header { display: grid; gap: var(--space-xs); }
.account-profile-contact-header .app-section-title, .account-profile-contact-header .app-section-meta { margin-bottom: 0; }
.account-profile-contact .account-settings-form { margin-top: var(--space-lg); }
.account-profile-card .account-profile-table th { width: 35%; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.account-profile-card .account-profile-table td, .account-profile-card .account-profile-table th { padding: var(--space-md) 0; }
[data-profile-row] { cursor: pointer; }

.statistics-audience-legend { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); container-type: inline-size; break-inside: avoid; break-after: avoid; }
.statistics-audience-legend .audience-group-list { display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; width: 100%; gap: var(--space-sm) var(--space-lg); margin: 0; padding: 0; }
.statistics-audience-legend .audience-group-row { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 0; padding: 0; font-size: var(--font-size-caption); }
.statistics-audience-legend .audience-group-dot { flex-shrink: 0; }
.statistics-audience-legend .audience-group-row strong { font-weight: var(--font-weight-medium); }
.statistics-audience-legend .audience-group-row > span:last-child { color: var(--color-text-secondary); }
@container (max-width: 48rem) {
  .statistics-audience-legend .audience-group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
  .statistics-audience-legend .audience-group-row { flex-wrap: wrap; }
  .statistics-audience-legend .audience-group-row strong,
  .statistics-audience-legend .audience-group-row > span:last-child { white-space: nowrap; }
}
.v2-overview-period .app-section-title { font-family: var(--font-family-heading); }
.v2-overview-period .app-section-meta { margin-top: var(--space-2xs); }
.v2-chart-bar, .v2-chart-stack, .v2-chart-stack rect { border: 0; box-shadow: none; filter: none; stroke: none; }
.v2-chart-stack { display: block; width: 100%; height: 100%; flex: 0 0 auto; }
.v2-chart-stack .v2-chart-segment-adults { fill: var(--color-data-adults); }
.v2-chart-stack .v2-chart-segment-young-adults { fill: var(--color-data-young-adults); }
.v2-chart-stack .v2-chart-segment-teens { fill: var(--color-data-teens); }
.v2-chart-stack .v2-chart-segment-children { fill: var(--color-data-children); }
.v2-chart-stack .v2-chart-segment-unknown { fill: var(--color-bg-surface-strong); }
.statistics-chart-tooltip,
.realtime-comparison-tooltip .tooltip-inner,
.entrance-share-tooltip .tooltip-inner { padding: var(--space-sm); max-width: calc(100vw - 1rem); background: var(--popover); color: var(--popover-foreground); white-space: normal; line-height: var(--line-height-body); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); box-shadow: var(--shadow-elevated); }
.statistics-chart-tooltip { width: 21rem; }
.realtime-comparison-tooltip .tooltip-inner { width: max-content; }
.entrance-share-tooltip { --bs-tooltip-opacity: 1; }
.entrance-share-tooltip .tooltip-inner { width: max-content; font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); }
.entrance-share-tooltip .tooltip-arrow { display: none; }
.statistics-tooltip-title { display: block; font-size: var(--font-size-label); font-weight: var(--font-weight-medium); }
.statistics-tooltip-date { display: block; color: var(--color-text-secondary); font-size: var(--font-size-caption); }
.statistics-tooltip-metrics { display: flex; flex-wrap: wrap; gap: var(--space-md); padding-block: var(--space-xs); font-size: var(--font-size-label); }
.statistics-tooltip-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); }
.statistics-tooltip-groups > div { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: var(--font-size-caption); }
.statistics-tooltip-groups strong { font-weight: var(--font-weight-medium); }
.recent-pagination, .app-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.recent-pagination > div, .app-pagination > div { display: flex; gap: var(--space-xs); }
.v2-recent-block[aria-busy="true"] { opacity: .7; }
.privacy-card { padding: var(--space-lg); }
.guide-accordion-item + .guide-accordion-item { border-top: 0; }
.guide-layout .table-shell .table > :not(caption) > * > *, .guide-layout .audience-group-row { border: 0; box-shadow: none; }
.guide-terms-table .table th, .guide-terms-table .table td { vertical-align: top; }

@media (max-width: 767.98px) {
  .account-profile-card { grid-template-columns: 1fr; padding: var(--space-lg); gap: var(--space-lg); }
  .account-profile-card .account-public-identity { padding-right: 0; }
}

.user-row-actions-menu { width: 13rem; max-width: calc(100vw - var(--space-md)); max-height: calc(100dvh - var(--space-md)); overflow-y: auto; text-align: left; }
.guide-accordion-trigger { list-style: none; }
.guide-accordion-trigger::-webkit-details-marker { display: none; }
.guide-accordion-item[open] > .guide-accordion-trigger .guide-accordion-chevron { transform: rotate(225deg); }
.v2-chart-bar:has(.v2-chart-stack) { background: transparent; }

.guide-aside, .guide-info-card { min-width: 0; }
.guide-layout .table-shell { max-width: 100%; }
.guide-door-table .app-data-table { min-width: 0; table-layout: fixed; }
.guide-door-table th:first-child { width: 55%; }
.guide-terms-table .app-data-table { table-layout: fixed; }
.guide-terms-table th:first-child { width: 34%; }
.guide-terms-table td, .guide-terms-table th { overflow-wrap: anywhere; }

.guide-accordion-item:not([open]) > .guide-accordion-trigger .guide-accordion-chevron { transform: rotate(45deg); }