/* Shared tool UI layer.
   Loaded after components.css and before each page-specific stylesheet. */

:root {
  --tool-gap-xs: clamp(0.5rem, 1.6vw, 0.75rem);
  --tool-gap-sm: clamp(0.75rem, 2vw, 1rem);
  --tool-gap-md: clamp(1rem, 2.5vw, 1.4rem);
  --tool-gap-lg: clamp(1.5rem, 4vw, 2.2rem);
  --tool-panel-max: min(100%, 48rem);
  --tool-modal-gap: clamp(0.875rem, 2.5vh, 1.5rem);
  --tool-modal-top-gap: calc(var(--header-height, 4.0625rem) + var(--tool-modal-gap));
  --tool-focus-border: rgba(74, 108, 140, 0.28);
  --tool-soft-border: rgba(74, 108, 140, 0.16);
  --tool-soft-bg: rgba(228, 236, 243, 0.46);
  --tool-softer-bg: rgba(243, 247, 250, 0.78);
  --tool-fixed-nav-height: 4.75rem;
  --tool-toast-bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
}

@media (prefers-color-scheme: dark) {
  :root {
    --tool-focus-border: rgba(125, 162, 200, 0.4);
    --tool-soft-border: rgba(255, 255, 255, 0.14);
    --tool-soft-bg: rgba(30, 40, 48, 0.6);
    --tool-softer-bg: rgba(27, 35, 42, 0.78);
  }
}

:where(.tool-container, .page-container, .content-container, .main-container) {
  width: min(100% - 2rem, var(--width-tool-container, 48rem));
  margin-inline: auto;
}

:where(.page-header, .tool-header, .intro-section) {
  text-align: center;
}

:where(.emoji, .inline-emoji, .icon) {
  line-height: 1;
  flex-shrink: 0;
}

:where(.section-card, .info-box, .safety-box, .risk-guide-box, .privacy-box, .notice-box, .explanation-box) {
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
  background: var(--tool-softer-bg);
  box-shadow: var(--ui-shadow-rest, var(--shadow-soft));
}

:where(.button-group, .action-buttons, .tool-actions, .section-actions, .result-actions, .cta-group) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tool-gap-sm);
}

:where(.btn, .atm-button, .btn-primary, .btn-secondary) {
  gap: 0.45em;
  min-height: 2.75rem;
}

:where(.btn-text, .btn--text, .btn-learn-more, .learn-more-btn, .atm-button--text) {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold, 600);
}

:where(.result-jump-panel) {
  margin: var(--tool-gap-lg) 0;
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
  background: var(--color-surface);
  box-shadow: var(--ui-shadow-rest, var(--shadow-soft));
  overflow: hidden;
}

:where(
  .result-jump-panel > summary,
  .result-jump-panel summary,
  .result-jump-panel__summary,
  .result-jump-summary,
  .result-detail-summary
) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tool-gap-sm);
  min-height: 3.25rem;
  padding: var(--space-md, 1.125rem) var(--space-lg, 1.5rem);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold, 700);
  cursor: pointer;
  list-style: none;
}

.result-jump-panel summary::-webkit-details-marker {
  display: none;
}

:where(
  .result-jump-panel > summary,
  .result-jump-panel summary,
  .result-jump-panel__summary,
  .result-jump-summary,
  .result-detail-summary
)::after {
  content: "⌄";
  color: var(--color-primary);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

:where(
  .result-jump-panel[open] > summary,
  .result-jump-panel[open] summary,
  .result-jump-panel[open] .result-jump-panel__summary,
  .result-jump-panel[open] .result-jump-summary,
  .result-jump-panel[open] .result-detail-summary
)::after {
  transform: rotate(180deg);
}

:where(.result-shortcuts) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--tool-gap-sm);
  padding: var(--space-md, 1.125rem);
  border-top: 1px solid var(--color-border-light);
}

:where(.result-shortcuts button, .result-shortcuts a, .result-shortcuts .btn, .result-shortcuts .atm-button) {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-control-radius, var(--border-radius-sm));
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold, 600);
  text-align: center;
  text-decoration: none;
}

@media (any-hover: hover) {
  :where(.result-shortcuts button, .result-shortcuts a, .result-shortcuts .btn, .result-shortcuts .atm-button):hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    box-shadow: var(--ui-shadow-hover, var(--shadow-medium));
    transform: translateY(-0.08rem);
  }
}

:where(.next-tools-section, .result-next-tools, .success-next-tools) {
  margin-top: var(--tool-gap-lg);
  padding: var(--space-lg, 1.5rem);
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
  background: var(--tool-softer-bg);
}

:where(
  .next-tools-section h2,
  .next-tools-section h3,
  .next-tools-section h4,
  .result-next-tools__title,
  .result-next-tools h2,
  .result-next-tools h3,
  .success-next-tools h3,
  .success-next-tools h4
) {
  margin: 0 0 var(--space-md, 1.125rem);
  color: var(--color-primary-dark);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.35;
  text-align: center;
}

:where(.next-tools-section > p, .result-next-tools > p, .success-next-tools > p) {
  max-width: 42rem;
  margin: 0 auto var(--space-md, 1.125rem);
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.65;
  text-align: center;
}

:where(.next-tools-list, .next-tool-grid, .next-tools-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--tool-gap-sm);
}

:where(.next-tool-card) {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 5.25rem;
  padding: var(--space-md, 1.125rem);
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
  background: var(--color-surface);
  color: var(--color-primary-dark);
  text-decoration: none;
  box-shadow: var(--ui-shadow-rest, var(--shadow-soft));
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

:where(.next-tool-card strong, .next-tool-card__title) {
  color: var(--color-primary-dark);
  font-size: 0.98rem;
  line-height: 1.35;
}

:where(.next-tool-card span, .next-tool-card small, .next-tool-card__desc) {
  color: var(--color-text-light);
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (any-hover: hover) {
  :where(.next-tool-card):hover {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--ui-shadow-hover, var(--shadow-medium));
    transform: translateY(-0.1rem);
  }
}

:where(.modal-overlay, .org-modal-overlay) {
  box-sizing: border-box;
  z-index: var(--z-modal, 1300);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body:where(.with-sticky-header, .with-gnb) :where(.modal-overlay, .org-modal-overlay) {
  align-items: flex-start;
  padding-top: max(var(--tool-modal-gap), var(--tool-modal-top-gap));
  padding-bottom: var(--tool-modal-gap);
}

:where(.modal-overlay.is-active, .modal-overlay.active, .modal-overlay.show, .org-modal-overlay.is-active, .org-modal-overlay.active, .org-modal-overlay.show) {
  justify-content: center;
}

:where(.modal-container, .mol-modal-container) {
  width: min(92vw, 44rem);
  max-height: calc(100dvh - (var(--tool-modal-gap) * 2));
  background: var(--color-surface);
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
  box-shadow: var(--shadow-strong);
}

body:where(.with-sticky-header, .with-gnb) :where(.modal-container, .mol-modal-container) {
  max-height: calc(100dvh - var(--tool-modal-top-gap) - var(--tool-modal-gap));
}

:where(.modal-header, .mol-modal-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tool-gap-sm);
  border-bottom: 1px solid var(--color-border-light);
}

:where(.modal-header__title, .modal-title, .mol-modal-header__title) {
  color: var(--color-primary-dark);
  line-height: 1.35;
}

:where(.modal-close, .modal-close-button, .atm-modal-close-button, .modal-close-btn, .close-modal) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--border-radius-circle);
  color: var(--color-text-light);
}

:where(.modal-body, .modal-content, .mol-modal-content) {
  line-height: 1.75;
}

:where(.modal-section, .report-section, .result-section, .solution-section, .recommendation-section) + :where(.modal-section, .report-section, .result-section, .solution-section, .recommendation-section) {
  margin-top: var(--tool-gap-lg);
}

:where(.tool-result, .result-container, .result-screen, .results-screen) {
  scroll-margin-top: calc(var(--header-height, 4.0625rem) + 1rem);
}

:where(.result-card, .summary-card, .analysis-card, .advice-card, .recommendation-card) {
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
}

@media (max-width: 48rem) {
  :root {
    --tool-modal-gap: 0.875rem;
  }

  :where(.tool-container, .page-container, .content-container, .main-container) {
    width: min(100% - 1.25rem, var(--width-tool-container, 48rem));
  }

  :where(.result-shortcuts, .next-tools-list, .next-tool-grid, .next-tools-grid) {
    grid-template-columns: 1fr;
  }

  :where(.button-group, .action-buttons, .tool-actions, .section-actions, .result-actions, .cta-group) {
    align-items: stretch;
  }

  :where(.button-group, .action-buttons, .tool-actions, .section-actions, .result-actions, .cta-group) > :where(button, a, .btn, .atm-button) {
    width: 100%;
  }

  :where(.next-tools-section, .result-next-tools, .success-next-tools) {
    padding: var(--space-md, 1.125rem);
  }

  :where(.modal-container, .mol-modal-container) {
    width: min(100%, calc(100vw - 1.25rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.next-tool-card, .result-shortcuts button, .result-shortcuts a) {
    transition: none;
  }
}

/* Phase 1: stronger normalization for standard questionnaire tools. */
.tool-standard-ui :is(.result-jump-panel) {
  margin: var(--tool-gap-lg) 0;
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
  background: var(--color-surface);
  box-shadow: var(--ui-shadow-rest, var(--shadow-soft));
  overflow: hidden;
}

.tool-standard-ui :is(
  .result-jump-panel > summary,
  .result-jump-panel summary,
  .result-jump-panel__summary,
  .result-jump-summary,
  .result-detail-summary
) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tool-gap-sm);
  min-height: 3.25rem;
  padding: var(--space-md, 1.125rem) var(--space-lg, 1.5rem);
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.35;
  cursor: pointer;
}

.tool-standard-ui :is(
  .result-jump-panel > summary,
  .result-jump-panel summary,
  .result-jump-panel__summary,
  .result-jump-summary,
  .result-detail-summary
)::after {
  content: "⌄";
  color: var(--color-primary);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.tool-standard-ui :is(
  .result-jump-panel[open] > summary,
  .result-jump-panel[open] summary,
  .result-jump-panel[open] .result-jump-panel__summary,
  .result-jump-panel[open] .result-jump-summary,
  .result-jump-panel[open] .result-detail-summary
)::after {
  transform: rotate(180deg);
}

.tool-standard-ui :is(.result-shortcuts) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--tool-gap-sm);
  padding: var(--space-md, 1.125rem);
}

.tool-standard-ui :is(.result-shortcuts button, .result-shortcuts a, .result-shortcuts .btn, .result-shortcuts .atm-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-control-radius, var(--border-radius-sm));
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: 0.94rem;
  font-weight: var(--font-weight-semibold, 600);
  text-align: center;
  text-decoration: none;
}

@media (any-hover: hover) {
  .tool-standard-ui :is(.result-shortcuts button, .result-shortcuts a, .result-shortcuts .btn, .result-shortcuts .atm-button):hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    box-shadow: var(--ui-shadow-hover, var(--shadow-medium));
    transform: translateY(-0.08rem);
  }
}

.tool-standard-ui :is(.next-tools-section, .result-next-tools, .success-next-tools) {
  margin-top: var(--tool-gap-lg);
  padding: var(--space-lg, 1.5rem);
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
  background: var(--tool-softer-bg);
}

.tool-standard-ui :is(.next-tools-section > p, .result-next-tools > p, .success-next-tools > p) {
  max-width: 42rem;
  margin: 0 auto var(--space-md, 1.125rem);
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.65;
  text-align: center;
}

.tool-standard-ui :is(.next-tools-list, .next-tool-grid, .next-tools-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--tool-gap-sm);
}

.tool-standard-ui :is(.next-tool-card) {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 5.25rem;
  padding: var(--space-md, 1.125rem);
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
  background: var(--color-surface);
  color: var(--color-primary-dark);
  text-decoration: none;
  box-shadow: var(--ui-shadow-rest, var(--shadow-soft));
}

.tool-standard-ui :is(.next-tool-card strong, .next-tool-card__title) {
  color: var(--color-primary-dark);
  font-size: 0.98rem;
  line-height: 1.35;
}

.tool-standard-ui :is(.next-tool-card span, .next-tool-card small, .next-tool-card__desc) {
  color: var(--color-text-light);
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (any-hover: hover) {
  .tool-standard-ui :is(.next-tool-card):hover {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--ui-shadow-hover, var(--shadow-medium));
    transform: translateY(-0.1rem);
  }
}

.tool-standard-ui :is(.modal-overlay, .org-modal-overlay) {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(var(--tool-modal-gap), var(--tool-modal-top-gap));
  padding-right: var(--tool-modal-gap);
  padding-bottom: var(--tool-modal-gap);
  padding-left: var(--tool-modal-gap);
  background: rgba(58, 85, 110, 0.68);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity var(--transition-medium), visibility var(--transition-medium);
}

.tool-standard-ui :is(
  .modal-overlay.is-active,
  .modal-overlay.active,
  .modal-overlay.show,
  .modal-overlay[aria-hidden="false"],
  .org-modal-overlay.is-active,
  .org-modal-overlay.active,
  .org-modal-overlay.show,
  .org-modal-overlay[aria-hidden="false"]
) {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.tool-standard-ui :is(.modal-container, .mol-modal-container) {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(92vw, 44rem);
  max-height: calc(100dvh - var(--tool-modal-top-gap) - var(--tool-modal-gap));
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
  box-shadow: var(--shadow-strong);
  opacity: 0;
  transform: scale(0.96) translateY(-0.75rem);
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.tool-standard-ui :is(
  .modal-overlay.is-active .modal-container,
  .modal-overlay.active .modal-container,
  .modal-overlay.show .modal-container,
  .modal-overlay[aria-hidden="false"] .modal-container,
  .org-modal-overlay.is-active .mol-modal-container,
  .org-modal-overlay.active .mol-modal-container,
  .org-modal-overlay.show .mol-modal-container,
  .org-modal-overlay[aria-hidden="false"] .mol-modal-container
) {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.tool-standard-ui :is(.modal-header, .mol-modal-header) {
  flex: 0 0 auto;
  padding: var(--space-md, 1.125rem) var(--space-lg, 1.5rem);
  border-bottom: 1px solid var(--color-border-light);
}

.tool-standard-ui :is(.modal-header__title, .modal-title, .mol-modal-header__title) {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 0.5rem);
  margin: 0;
  color: var(--color-primary-dark);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.35;
}

.tool-standard-ui :is(.modal-close, .modal-close-button, .atm-modal-close-button) {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border: 0;
  border-radius: var(--border-radius-circle);
  background: transparent;
  color: var(--color-text-light);
  font-size: 1.45rem;
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.tool-standard-ui :is(.modal-body, .modal-content, .mol-modal-content) {
  flex: 1 1 auto;
  padding: var(--space-lg, 1.5rem);
  overflow-y: auto;
  line-height: 1.75;
  color: var(--color-text-light);
}

@media (any-hover: hover) {
  .tool-standard-ui :is(.modal-close, .modal-close-button, .atm-modal-close-button):hover {
    background: var(--color-border-light);
    color: var(--color-primary-dark);
    transform: rotate(90deg);
  }
}

.tool-standard-ui :is(.modal-close, .modal-close-button, .atm-modal-close-button):focus-visible {
  background: var(--color-border-light);
  color: var(--color-primary-dark);
}

/* Phase 3: shared card, question, and choice controls for standard tools. */
.tool-standard-ui :where(
  .card,
  .section-card,
  .info-box,
  .question-card,
  .question-panel,
  .question-wrapper,
  #question-card
) {
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
}

.tool-standard-ui :where(.card-header, .card-header__title, .question-header) {
  gap: var(--tool-gap-sm);
  word-break: keep-all;
}

.tool-standard-ui :where(.card-header__title, .card-title, .question-title, .question-title-text) {
  color: var(--color-primary-dark);
  line-height: 1.45;
  letter-spacing: 0;
}

.tool-standard-ui :where(.card-body, .question-body, .question-content) {
  line-height: 1.75;
}

.tool-standard-ui :where(fieldset.question-container) {
  margin: 0;
  padding: 0;
  border: 0;
  word-break: keep-all;
}

.tool-standard-ui :where(.question-container.active, .question-container.is-active) {
  display: block;
}

.tool-standard-ui :where(.question-header) {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-md, 1.125rem);
}

.tool-standard-ui :where(.question-number) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--border-radius-circle);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-bold, 700);
  box-shadow: var(--shadow-soft);
}

.tool-standard-ui :where(.question-title, .question-title-text, .question-text, .question-prompt) {
  flex: 1 1 auto;
  color: var(--color-text);
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.6;
  word-break: keep-all;
}

.tool-standard-ui :where(.options-grid, .answer-options, .choice-options, .question-options, .option-grid, .choices-grid) {
  display: grid;
  gap: var(--tool-gap-sm);
  margin-top: var(--space-lg, 1.5rem);
}

.tool-standard-ui :where(.options-grid, .answer-options, .choice-options, .question-options) {
  grid-template-columns: 1fr;
}

.tool-standard-ui :where(.rating-options, .scale-options) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.25rem), 1fr));
  gap: var(--tool-gap-sm);
  margin: var(--space-lg, 1.5rem) 0;
}

.tool-standard-ui :where(
  .rating-label,
  .rating-option-card,
  .option-button,
  .choice-button,
  .answer-option,
  .choice-option,
  .question-option,
  .option-card,
  .answer-btn,
  .choice-btn,
  .storage-choice-option
) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-sm, 0.75rem) var(--space-md, 1.125rem);
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-control-radius, var(--border-radius-sm));
  background: var(--color-surface);
  color: var(--color-text);
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  word-break: keep-all;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.tool-standard-ui :where(.rating-label, .rating-option-card) {
  flex-direction: column;
  min-height: 5.75rem;
}

.tool-standard-ui :where(.rating-label .emoji, .rating-option-card .rating-emoji) {
  display: block;
  margin-bottom: var(--space-xs, 0.5rem);
  font-size: 1.7rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.tool-standard-ui :where(.rating-label .rating-text, .rating-option-card .rating-text) {
  color: var(--color-text-light);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.35;
}

.tool-standard-ui :where(
  input[type="radio"]:checked + .rating-label,
  .rating-option-card.selected,
  .rating-option-card.is-selected,
  .option-button.selected,
  .option-button.is-selected,
  .choice-button.selected,
  .choice-button.is-selected,
  .answer-option.selected,
  .answer-option.is-selected,
  .choice-option.selected,
  .choice-option.is-selected,
  .question-option.selected,
  .question-option.is-selected,
  .option-card.selected,
  .option-card.is-selected,
  .answer-btn.selected,
  .answer-btn.is-selected,
  .choice-btn.selected,
  .choice-btn.is-selected,
  [aria-pressed="true"].option-button,
  [aria-pressed="true"].choice-button,
  [aria-checked="true"].answer-option
) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  box-shadow: 0 0 0 0.1875rem var(--color-primary-lighter), var(--shadow-soft);
  transform: translateY(-0.08rem);
}

.tool-standard-ui :where(
  input[type="radio"]:checked + .rating-label .emoji,
  .rating-option-card.selected .rating-emoji,
  .rating-option-card.is-selected .rating-emoji
) {
  transform: scale(1.08);
}

.tool-standard-ui :where(
  input[type="radio"]:checked + .rating-label .rating-text,
  .rating-option-card.selected .rating-text,
  .rating-option-card.is-selected .rating-text
) {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold, 700);
}

@media (any-hover: hover) {
  .tool-standard-ui :where(
    .rating-label,
    .rating-option-card,
    .option-button,
    .choice-button,
    .answer-option,
    .choice-option,
    .question-option,
    .option-card,
    .answer-btn,
    .choice-btn,
    .storage-choice-option
  ):hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    box-shadow: var(--ui-shadow-hover, var(--shadow-medium));
    transform: translateY(-0.08rem);
  }
}

@media (max-width: 48rem) {
  .tool-standard-ui :where(.card-body, .question-body, .question-content) {
    line-height: 1.7;
  }

  .tool-standard-ui :where(.question-header) {
    gap: var(--space-sm, 0.75rem);
  }

  .tool-standard-ui :where(.rating-options, .scale-options) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.75rem), 1fr));
    gap: var(--space-sm, 0.75rem);
  }

  .tool-standard-ui :where(.rating-label, .rating-option-card) {
    min-height: 5rem;
    padding: var(--space-sm, 0.75rem);
  }
}

/* Phase 4: shared progress, navigation, and action controls. */
.tool-standard-ui :is(.tool-progress),
.tool-partial-ui :is(.tool-progress) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--tool-gap-xs);
  margin: var(--space-sm, 0.75rem) 0 var(--space-lg, 1.5rem);
}

.tool-standard-ui :where(.card-body, .card__body, .atm-card__body, .result-navigation-body) > :is(.tool-progress):first-child,
.tool-partial-ui :where(.card-body, .card__body, .atm-card__body, .result-navigation-body) > :is(.tool-progress):first-child {
  margin-top: clamp(0.75rem, 1.6vw, 1rem);
}

.tool-standard-ui :where(.result-navigation-card, .result-jump-panel) :is(.tool-progress):first-child,
.tool-partial-ui :where(.result-navigation-card, .result-jump-panel) :is(.tool-progress):first-child {
  margin-top: clamp(0.75rem, 1.6vw, 1rem);
}

.tool-standard-ui :is(.tool-progress__item, .tool-progress__step),
.tool-partial-ui :is(.tool-progress__item, .tool-progress__step) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2.45rem;
  padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
  border: 1px solid var(--tool-soft-border);
  border-radius: var(--ui-control-radius, var(--border-radius-sm));
  background: var(--tool-softer-bg);
  color: var(--color-text-light);
  font-size: var(--font-size-xs, 0.8125rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
}

.tool-standard-ui :is(.tool-progress__item.is-complete, .tool-progress__step.is-complete, .tool-progress__step.is-done),
.tool-partial-ui :is(.tool-progress__item.is-complete, .tool-progress__step.is-complete, .tool-progress__step.is-done) {
  border-color: var(--color-primary-light);
  background: var(--color-primary-lighter);
  color: var(--color-primary-dark);
}

.tool-standard-ui :is(.tool-progress__item.is-current, .tool-progress__item.is-active, .tool-progress__step.is-current, .tool-progress__step.is-active),
.tool-partial-ui :is(.tool-progress__item.is-current, .tool-progress__item.is-active, .tool-progress__step.is-current, .tool-progress__step.is-active) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: var(--shadow-soft);
}

.tool-standard-ui :where(
  .progress-container,
  .progress-bar-track,
  .mol-progress-bar,
  .progress-bg,
  .comp-progress-bar
) {
  width: 100%;
  min-height: 0.5rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-border-light);
  overflow: hidden;
}

.tool-standard-ui :where(
  .progress-bar,
  .progress-bar-fill,
  .mol-progress-bar__fill,
  .mol-progress-bar__inner,
  .progress-fill,
  .comp-progress-bar__inner
) {
  border-radius: inherit;
  background: var(--color-primary);
  transition: width var(--transition-medium);
}

.tool-standard-ui :where(.progress-text, .progress-bar-text, .mol-progress-bar__text, .progress-text-container, .mol-progress-bar__text-container) {
  color: var(--color-text-light);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.45;
}

.tool-standard-ui :where(
  .nav-buttons,
  .nav-buttons-container,
  .mol-navigation-buttons,
  .navigation-controls,
  .question-nav-buttons
) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tool-gap-sm);
  margin-top: var(--space-xl, 2rem);
}

.tool-standard-ui :where(
  .nav-buttons,
  .nav-buttons-container,
  .mol-navigation-buttons,
  .navigation-controls,
  .question-nav-buttons
) > :where(.btn, .atm-button, button, a) {
  min-width: min(100%, 8.75rem);
}

.tool-standard-ui :where(
  .action-buttons-container,
  .action-buttons-group,
  .result-actions-container,
  .mol-result-action-buttons,
  .button-row
) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tool-gap-sm);
  margin-top: var(--space-lg, 1.5rem);
}

.tool-standard-ui :where(.btn:disabled, .atm-button:disabled, button:disabled) {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
  transform: none;
}

@media (max-width: 48rem) {
  .tool-standard-ui :is(.tool-progress),
  .tool-partial-ui :is(.tool-progress) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .tool-standard-ui :is(.tool-progress__item, .tool-progress__step),
  .tool-partial-ui :is(.tool-progress__item, .tool-progress__step) {
    min-height: 2.3rem;
    padding: 0.45rem 0.5rem;
    font-size: 0.76rem;
  }

  .tool-standard-ui :where(
    .nav-buttons,
    .nav-buttons-container,
    .mol-navigation-buttons,
    .navigation-controls,
    .question-nav-buttons,
    .action-buttons-container,
    .action-buttons-group,
    .result-actions-container,
    .mol-result-action-buttons,
    .button-row
  ) {
    align-items: stretch;
  }

  .tool-standard-ui :where(
    .nav-buttons,
    .nav-buttons-container,
    .mol-navigation-buttons,
    .navigation-controls,
    .question-nav-buttons,
    .action-buttons-container,
    .action-buttons-group,
    .result-actions-container,
    .mol-result-action-buttons,
    .button-row
  ) > :where(.btn, .atm-button, button, a) {
    flex: 1 1 0;
    min-width: min(100%, 8rem);
  }
}

@media (max-width: 22rem) {
  .tool-standard-ui :is(.tool-progress),
  .tool-partial-ui :is(.tool-progress) {
    grid-template-columns: 1fr;
  }

  .tool-standard-ui :where(
    .nav-buttons,
    .nav-buttons-container,
    .mol-navigation-buttons,
    .navigation-controls,
    .question-nav-buttons
  ) > :where(.btn, .atm-button, button, a) {
    flex-basis: 100%;
  }
}

/* Phase 5: shared transient UI for tool pages. */
.tool-standard-ui :is(.toast-notification, .comp-notification, .atm-toast-notification),
.tool-partial-ui :is(.toast-notification, .comp-notification, .atm-toast-notification) {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: -6.25rem;
  z-index: var(--z-toast, 1400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 0.75rem);
  width: max-content;
  max-width: min(calc(100vw - 2rem), 32rem);
  min-height: 2.75rem;
  padding: var(--space-sm, 0.75rem) var(--space-lg, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--border-radius-pill, 999px);
  background: var(--color-primary-dark);
  color: var(--color-text-on-primary);
  box-shadow: var(--shadow-strong);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: center;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transform: translateX(-50%);
  transition:
    opacity var(--transition-medium),
    visibility var(--transition-medium),
    bottom var(--transition-medium),
    transform var(--transition-medium);
}

.tool-standard-ui :is(
  .toast-notification.show,
  .toast-notification.is-active,
  .toast-notification.is-visible,
  .toast-notification.active,
  .comp-notification.show,
  .comp-notification.is-active,
  .comp-notification.is-visible,
  .comp-notification.active,
  .atm-toast-notification.show,
  .atm-toast-notification.is-active,
  .atm-toast-notification.is-visible,
  .atm-toast-notification.active
),
.tool-partial-ui :is(
  .toast-notification.show,
  .toast-notification.is-active,
  .toast-notification.is-visible,
  .toast-notification.active,
  .comp-notification.show,
  .comp-notification.is-active,
  .comp-notification.is-visible,
  .comp-notification.active,
  .atm-toast-notification.show,
  .atm-toast-notification.is-active,
  .atm-toast-notification.is-visible,
  .atm-toast-notification.active
) {
  bottom: var(--tool-toast-bottom);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tool-standard-ui :is(.toast-notification.is-error, .toast-notification.error, .comp-notification.is-error, .atm-toast-notification.is-error),
.tool-partial-ui :is(.toast-notification.is-error, .toast-notification.error, .comp-notification.is-error, .atm-toast-notification.is-error) {
  background: var(--color-primary-dark);
}

.tool-standard-ui :is(.toast-notification.is-success, .toast-notification.success, .comp-notification.is-success, .atm-toast-notification.is-success),
.tool-partial-ui :is(.toast-notification.is-success, .toast-notification.success, .comp-notification.is-success, .atm-toast-notification.is-success) {
  background: var(--color-success);
}

.tool-standard-ui :is(.toast-notification.is-info, .toast-notification.info, .comp-notification.is-info, .atm-toast-notification.is-info),
.tool-partial-ui :is(.toast-notification.is-info, .toast-notification.info, .comp-notification.is-info, .atm-toast-notification.is-info) {
  background: var(--color-primary-dark);
}

.tool-standard-ui :is(.toast-notification .emoji, .toast-notification .icon, .comp-notification .emoji, .comp-notification .icon, .atm-toast-notification .emoji, .atm-toast-notification .icon),
.tool-partial-ui :is(.toast-notification .emoji, .toast-notification .icon, .comp-notification .emoji, .comp-notification .icon, .atm-toast-notification .emoji, .atm-toast-notification .icon) {
  flex: 0 0 auto;
  font-size: 1.2em;
  line-height: 1;
  margin: 0;
}

.tool-standard-ui :is(.progress-bar-track, .mol-progress-bar, .progress-bg, .comp-progress-bar, .area-progress-container) {
  min-height: 0.5rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-border-light);
  overflow: hidden;
}

.tool-standard-ui :is(.progress-bar, .progress-bar-fill, .mol-progress-bar__fill, .mol-progress-bar__inner, .progress-fill, .comp-progress-bar__inner, .area-progress-bar) {
  min-height: inherit;
  border-radius: inherit;
}

@media (max-width: 48rem) {
  body:is(.fixed-nav-active, .mobile-nav-active, .bottom-nav-active) {
    padding-bottom: calc(var(--tool-fixed-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .tool-standard-ui :is(
    .mol-navigation-buttons.is-fixed,
    #navigation-buttons-container.mol-navigation-buttons,
    #navigation-buttons-fixed.mol-navigation-buttons,
    #nav-buttons-fixed.nav-buttons
  ),
  body.mobile-nav-active .tool-standard-ui #question-nav-buttons {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky, 1000);
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-sm, 0.75rem);
    width: 100%;
    margin: 0;
    padding: var(--space-sm, 0.75rem) max(var(--space-md, 1.125rem), env(safe-area-inset-left, 0px)) calc(var(--space-sm, 0.75rem) + env(safe-area-inset-bottom, 0px)) max(var(--space-md, 1.125rem), env(safe-area-inset-right, 0px));
    border-top: 1px solid var(--color-border-light);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -0.25rem 1rem rgba(var(--shadow-color-rgb, 42, 64, 82), 0.08);
  }

  .tool-standard-ui :is(
    .mol-navigation-buttons.is-fixed,
    #navigation-buttons-container.mol-navigation-buttons,
    #navigation-buttons-fixed.mol-navigation-buttons,
    #nav-buttons-fixed.nav-buttons
  ) > :where(.btn, .atm-button, button),
  body.mobile-nav-active .tool-standard-ui #question-nav-buttons > :where(.btn, .atm-button, button) {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    pointer-events: auto;
  }

  .tool-standard-ui :is(.toast-notification, .comp-notification, .atm-toast-notification),
  .tool-partial-ui :is(.toast-notification, .comp-notification, .atm-toast-notification) {
    width: min(calc(100vw - 2rem), 28rem);
    padding-inline: var(--space-md, 1.125rem);
  }

  .tool-standard-ui :is(
    .toast-notification.show,
    .toast-notification.is-active,
    .toast-notification.is-visible,
    .toast-notification.active,
    .comp-notification.show,
    .comp-notification.is-active,
    .comp-notification.is-visible,
    .comp-notification.active,
    .atm-toast-notification.show,
    .atm-toast-notification.is-active,
    .atm-toast-notification.is-visible,
    .atm-toast-notification.active
  ),
  .tool-partial-ui :is(
    .toast-notification.show,
    .toast-notification.is-active,
    .toast-notification.is-visible,
    .toast-notification.active,
    .comp-notification.show,
    .comp-notification.is-active,
    .comp-notification.is-visible,
    .comp-notification.active,
    .atm-toast-notification.show,
    .atm-toast-notification.is-active,
    .atm-toast-notification.is-visible,
    .atm-toast-notification.active
  ) {
    bottom: calc(var(--tool-fixed-nav-height) + var(--space-sm, 0.75rem) + env(safe-area-inset-bottom, 0px));
  }
}

/* Phase 2-3: keep expressive tools intact, but align shared exits and popups. */
.tool-partial-ui :is(.result-jump-panel) {
  margin: var(--tool-gap-lg) 0;
}

.tool-partial-ui :is(.result-shortcuts) {
  gap: var(--tool-gap-sm);
}

.tool-partial-ui :is(.next-tools-section, .result-next-tools, .success-next-tools) {
  margin-top: var(--tool-gap-lg);
}

.tool-partial-ui :is(.next-tools-list, .next-tool-grid, .next-tools-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--tool-gap-sm);
}

.tool-partial-ui :is(.next-tool-card) {
  border-radius: var(--ui-panel-radius, var(--border-radius-lg));
}

.tool-partial-ui :is(.modal-overlay, .org-modal-overlay) {
  align-items: flex-start;
  padding-top: max(var(--tool-modal-gap), var(--tool-modal-top-gap));
  padding-bottom: var(--tool-modal-gap);
  overflow-y: auto;
}

.tool-partial-ui :is(.modal-container, .mol-modal-container) {
  max-height: calc(100dvh - var(--tool-modal-top-gap) - var(--tool-modal-gap));
}

@media (max-width: 48rem) {
  .tool-standard-ui :is(.result-shortcuts, .next-tools-list, .next-tool-grid, .next-tools-grid),
  .tool-partial-ui :is(.result-shortcuts, .next-tools-list, .next-tool-grid, .next-tools-grid) {
    grid-template-columns: 1fr;
  }

  .tool-standard-ui :is(.next-tools-section, .result-next-tools, .success-next-tools) {
    padding: var(--space-md, 1.125rem);
  }

  .tool-standard-ui :is(.modal-header, .mol-modal-header),
  .tool-standard-ui :is(.modal-body, .modal-content, .mol-modal-content) {
    padding: var(--space-md, 1.125rem);
  }
}