/* Shared visual polish for tool pages. Loaded after page-specific CSS. */

.tool-standard-ui,
.tool-partial-ui {
  --color-accent: #4F7A8A;
  --color-accent-dark: #345D73;
  --color-accent-light: #EEF6FA;
  --color-accent-lighter: #F5F9FC;
  --color-warning: #5F7F99;
  --color-warning-dark: #345D73;
  --color-warning-text: #345D73;
  --color-warning-light: #F3F7FA;
  --color-warning-bg: #F3F7FA;
  --color-warning-border: #C7D6E3;
  --color-danger: #526B8C;
  --color-danger-dark: #345D73;
  --color-danger-bg: #EEF4F8;
  --bnd-color-accent: #4F7A8A;
  --bnd-color-accent-dark: #345D73;
  --bnd-color-warning-text: #345D73;
  --color-sensitive-high: #526B8C;
  --color-sensitive-high-bg: #EEF4F8;
  --color-level2-bg: #F3F7FA;
  --interactive-hover-surface: rgba(74, 108, 140, 0.1);
  --interactive-hover-border: rgba(74, 108, 140, 0.34);
}

@media (prefers-color-scheme: dark) {
  .tool-standard-ui,
  .tool-partial-ui {
    --color-accent: #7BA3B5;
    --color-accent-dark: #A9C8D6;
    --color-accent-light: #1B2A31;
    --color-accent-lighter: #16232A;
    --color-warning: #8FADC2;
    --color-warning-dark: #A9C8D6;
    --color-warning-text: #C9DCE6;
    --color-warning-light: #1E2830;
    --color-warning-bg: #1E2830;
    --color-warning-border: rgba(255, 255, 255, 0.2);
    --color-danger: #8CA3C2;
    --color-danger-dark: #A9C8D6;
    --color-danger-bg: #1B232C;
    --bnd-color-accent: #7BA3B5;
    --bnd-color-accent-dark: #A9C8D6;
    --bnd-color-warning-text: #C9DCE6;
    --color-sensitive-high: #8CA3C2;
    --color-sensitive-high-bg: #1B232C;
    --color-level2-bg: #1E2830;
    --interactive-hover-surface: rgba(125, 162, 200, 0.14);
    --interactive-hover-border: rgba(125, 162, 200, 0.4);
  }
}

.tool-standard-ui :where(.visually-hidden),
.tool-partial-ui:not(.drama-director-page) :where(.visually-hidden) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tool-standard-ui :where(.btn, .atm-button),
.tool-partial-ui :where(.btn, .atm-button) {
  min-height: 2.9rem;
  padding: 0.62rem 1.05rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(74, 108, 140, 0.18);
  box-shadow: var(--button-shadow, var(--shadow-soft));
}

.tool-standard-ui :where(.btn-primary, .atm-button--primary),
.tool-partial-ui :where(.btn-primary, .atm-button--primary) {
  background: linear-gradient(180deg, #4F7191 0%, #3A5A76 100%);
  color: var(--color-text-on-primary);
  border-color: #426583;
}

.tool-standard-ui :where(.btn-secondary, .atm-button--secondary),
.tool-partial-ui :where(.btn-secondary, .atm-button--secondary) {
  background: linear-gradient(180deg, var(--surface-raised, #FFFFFF) 0%, var(--surface-soft-blue, #F4F8FC) 100%);
  color: var(--color-primary-dark);
  border-color: rgba(74, 108, 140, 0.26);
}

.tool-standard-ui :where(.btn:active:not(:disabled), .atm-button:active:not(:disabled)),
.tool-partial-ui :where(.btn:active:not(:disabled), .atm-button:active:not(:disabled)) {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}

@media (any-hover: hover) {
  .tool-standard-ui :where(.btn:hover:not(:disabled), .atm-button:hover:not(:disabled)),
  .tool-partial-ui :where(.btn:hover:not(:disabled), .atm-button:hover:not(:disabled)) {
    transform: translateY(-0.08rem);
    box-shadow: var(--button-shadow-hover, var(--shadow-medium));
  }

  .tool-standard-ui :where(.btn-primary:hover:not(:disabled), .atm-button--primary:hover:not(:disabled)),
  .tool-partial-ui :where(.btn-primary:hover:not(:disabled), .atm-button--primary:hover:not(:disabled)) {
    background: linear-gradient(180deg, #5F82A4 0%, #355B78 100%);
  }

  .tool-standard-ui :where(.btn-secondary:hover:not(:disabled), .atm-button--secondary:hover:not(:disabled)),
  .tool-partial-ui :where(.btn-secondary:hover:not(:disabled), .atm-button--secondary:hover:not(:disabled)) {
    background: linear-gradient(180deg, #FFFFFF 0%, #EAF2F8 100%);
    border-color: rgba(74, 108, 140, 0.38);
  }
}

.tool-standard-ui :where(
  .option-btn,
  .option-button,
  .choice-button,
  .answer-option,
  .choice-option,
  .question-option,
  .option-card,
  .answer-btn,
  .choice-btn,
  .domain-card,
  .relationship-card,
  .context-option,
  .context-option-list label,
  .safety-risk-option,
  .storage-choice-option,
  .storage-choice-item,
  .storage-choice-options label,
  .rating-option-card,
  .emotion-option-btn,
  .emotion-choice-btn,
  .insight-choice-btn,
  .anchor-choice-btn
):not(.correct):not(.incorrect):not(.answered):not(.disabled),
.tool-partial-ui :where(
  .option-btn,
  .option-button,
  .choice-button,
  .answer-option,
  .choice-option,
  .question-option,
  .option-card,
  .answer-btn,
  .choice-btn,
  .domain-card,
  .relationship-card,
  .context-option,
  .context-option-list label,
  .safety-risk-option,
  .storage-choice-option,
  .storage-choice-item,
  .storage-choice-options label,
  .rating-option-card,
  .emotion-option-btn,
  .emotion-choice-btn,
  .insight-choice-btn,
  .anchor-choice-btn
):not(.correct):not(.incorrect):not(.answered):not(.disabled) {
  background: linear-gradient(180deg, var(--surface-raised, #FFFFFF) 0%, var(--surface-soft-blue, #F4F8FC) 100%);
  border: 1px solid rgba(74, 108, 140, 0.18);
  border-radius: 0.9rem;
  box-shadow: var(--choice-shadow, var(--shadow-soft));
  cursor: pointer;
  transition: background-color var(--transition-medium), border-color var(--transition-medium), transform var(--transition-medium), box-shadow var(--transition-medium);
}

@media (any-hover: hover) {
  .tool-standard-ui :where(
    .option-btn,
    .option-button,
    .choice-button,
    .answer-option,
    .choice-option,
    .question-option,
    .option-card,
    .answer-btn,
    .choice-btn,
    .domain-card,
    .relationship-card,
    .context-option,
    .context-option-list label,
    .safety-risk-option,
    .storage-choice-option,
    .storage-choice-item,
    .storage-choice-options label,
    .rating-option-card,
    .emotion-option-btn,
    .emotion-choice-btn,
    .insight-choice-btn,
    .anchor-choice-btn
  ):not(.correct):not(.incorrect):not(.answered):not(.disabled):hover,
  .tool-partial-ui :where(
    .option-btn,
    .option-button,
    .choice-button,
    .answer-option,
    .choice-option,
    .question-option,
    .option-card,
    .answer-btn,
    .choice-btn,
    .domain-card,
    .relationship-card,
    .context-option,
    .context-option-list label,
    .safety-risk-option,
    .storage-choice-option,
    .storage-choice-item,
    .storage-choice-options label,
    .rating-option-card,
    .emotion-option-btn,
    .emotion-choice-btn,
    .insight-choice-btn,
    .anchor-choice-btn
  ):not(.correct):not(.incorrect):not(.answered):not(.disabled):hover {
    background: var(--interactive-hover-surface);
    border-color: var(--interactive-hover-border);
    box-shadow: var(--choice-shadow, var(--shadow-soft));
    transform: none;
  }
}

.tool-standard-ui :where(
  .option-btn.selected,
  .option-btn.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,
  .domain-card.selected,
  .domain-card.is-selected,
  .relationship-card.selected,
  .relationship-card.is-selected,
  .rating-option-card.selected,
  .rating-option-card.is-selected,
  .emotion-option-btn.selected,
  .emotion-choice-btn.selected,
  .insight-choice-btn.selected,
  .anchor-choice-btn.selected,
  .option-button[aria-pressed="true"],
  .choice-button[aria-pressed="true"],
  .answer-option[aria-checked="true"],
  .option-btn[aria-checked="true"]
):not(.correct):not(.incorrect),
.tool-partial-ui :where(
  .option-btn.selected,
  .option-btn.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,
  .domain-card.selected,
  .domain-card.is-selected,
  .relationship-card.selected,
  .relationship-card.is-selected,
  .rating-option-card.selected,
  .rating-option-card.is-selected,
  .emotion-option-btn.selected,
  .emotion-choice-btn.selected,
  .insight-choice-btn.selected,
  .anchor-choice-btn.selected,
  .option-button[aria-pressed="true"],
  .choice-button[aria-pressed="true"],
  .answer-option[aria-checked="true"],
  .option-btn[aria-checked="true"]
):not(.correct):not(.incorrect),
.tool-standard-ui :where(.context-option, .safety-risk-option, .storage-choice-option, .storage-choice-item, .storage-choice-options label, .context-option-list label):has(input:checked),
.tool-partial-ui :where(.context-option, .safety-risk-option, .storage-choice-option, .storage-choice-item, .storage-choice-options label, .context-option-list label):has(input:checked) {
  background: #EEF5FB;
  border-color: rgba(74, 108, 140, 0.42);
  box-shadow: var(--choice-selected-shadow, var(--shadow-soft));
  color: var(--color-primary-dark);
}

body.tool-standard-ui.gaslighting-detector-page #context-check-section .context-option-list label:has(input:checked) {
  background: linear-gradient(180deg, #4F7191 0%, #3A5A76 100%) !important;
  border-color: #426583 !important;
  box-shadow: var(--choice-selected-shadow, var(--shadow-medium)) !important;
  color: var(--color-text-on-primary) !important;
}

.tool-standard-ui :where(.result-shortcuts button, .result-shortcuts a),
.tool-partial-ui :where(.result-shortcuts button, .result-shortcuts a) {
  min-height: 2.75rem;
  border-radius: var(--border-radius-pill);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFD 100%);
  border-color: rgba(74, 108, 140, 0.2);
  box-shadow: none;
}

@media (any-hover: hover) {
  .tool-standard-ui :where(.result-shortcuts button:hover, .result-shortcuts a:hover),
  .tool-partial-ui :where(.result-shortcuts button:hover, .result-shortcuts a:hover) {
    background: #EAF2F8;
    border-color: rgba(74, 108, 140, 0.36);
    box-shadow: 0 0.25rem 0.75rem rgba(58, 91, 138, 0.12);
  }
}

.tool-standard-ui :where(.next-tool-card),
.tool-partial-ui :where(.next-tool-card) {
  background: linear-gradient(180deg, var(--surface-raised, #FFFFFF) 0%, var(--surface-warm, #FFFDF9) 100%);
  box-shadow: var(--choice-shadow, var(--shadow-soft));
}

.tool-partial-ui #sensory-forest-container .sensory-icon {
  background: rgba(248, 251, 253, 0.92) !important;
  border: 2px solid rgba(174, 198, 216, 0.9) !important;
  color: var(--color-primary-dark) !important;
  box-shadow: 0 0.45rem 1.15rem rgba(36, 54, 74, 0.18) !important;
  opacity: 0.96 !important;
}

.tool-partial-ui #sensory-forest-container .sensory-icon.needs-attention {
  background: rgba(248, 251, 253, 0.94) !important;
  border-color: rgba(132, 169, 196, 0.95) !important;
}

.tool-partial-ui #sensory-forest-container .sensory-icon.completed {
  background: rgba(232, 240, 247, 0.96) !important;
  border-color: rgba(74, 108, 140, 0.62) !important;
  color: var(--color-primary-dark) !important;
}

.tool-standard-ui :where([tabindex="-1"]:focus),
.tool-partial-ui :where([tabindex="-1"]:focus) {
  outline: none;
}

@media (any-hover: hover) {
  .tool-partial-ui #sensory-forest-container .sensory-icon:hover {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(74, 108, 140, 0.72) !important;
  }
}

.tool-standard-ui :where(
  .warning-box,
  .trigger-warning,
  .modal-warning-box,
  .safety-alert-card,
  .risk-check-note.is-alert,
  .preflight-guidance.is-alert,
  .core-boundary-alert,
  .insight-box.warning,
  .result-warning,
  .result-level-card--caution,
  .atm-card--warning,
  .mol-result-card--warning,
  .disclaimer-box.trigger-warning,
  .risk-guide-box,
  .safety-box,
  .notice-box[role="alert"],
  .info-box[role="alert"]
),
.tool-partial-ui :where(
  .warning-box,
  .trigger-warning,
  .modal-warning-box,
  .safety-alert-card,
  .risk-check-note.is-alert,
  .preflight-guidance.is-alert,
  .core-boundary-alert,
  .insight-box.warning,
  .result-warning,
  .result-level-card--caution,
  .atm-card--warning,
  .mol-result-card--warning,
  .disclaimer-box.trigger-warning,
  .risk-guide-box,
  .safety-box,
  .notice-box[role="alert"],
  .info-box[role="alert"]
) {
  background: linear-gradient(180deg, var(--color-warning-bg) 0%, var(--color-warning-light) 100%) !important;
  border-color: var(--color-warning-border) !important;
  color: var(--color-warning-text) !important;
}

.tool-standard-ui :where(
  .warning-box,
  .trigger-warning,
  .modal-warning-box,
  .safety-alert-card,
  .risk-check-note.is-alert,
  .preflight-guidance.is-alert,
  .core-boundary-alert,
  .insight-box.warning,
  .result-warning,
  .result-level-card--caution,
  .atm-card--warning,
  .mol-result-card--warning,
  .disclaimer-box.trigger-warning,
  .risk-guide-box,
  .safety-box,
  .notice-box[role="alert"],
  .info-box[role="alert"]
) :where(h1, h2, h3, h4, h5, p, strong, span, .inline-emoji, .icon),
.tool-partial-ui :where(
  .warning-box,
  .trigger-warning,
  .modal-warning-box,
  .safety-alert-card,
  .risk-check-note.is-alert,
  .preflight-guidance.is-alert,
  .core-boundary-alert,
  .insight-box.warning,
  .result-warning,
  .result-level-card--caution,
  .atm-card--warning,
  .mol-result-card--warning,
  .disclaimer-box.trigger-warning,
  .risk-guide-box,
  .safety-box,
  .notice-box[role="alert"],
  .info-box[role="alert"]
) :where(h1, h2, h3, h4, h5, p, strong, span, .inline-emoji, .icon) {
  color: var(--color-warning-text) !important;
}

.tool-standard-ui :where(.text-danger, .error-message, .risk-level, [style*="color: var(--color-danger"]),
.tool-partial-ui :where(.text-danger, .error-message, .risk-level, [style*="color: var(--color-danger"]) {
  color: var(--color-primary-dark) !important;
}

.tool-partial-ui #cinematic-modal .choice-container .choice-btn {
  min-height: 3.1rem;
  padding: 0.55rem 1.35rem;
  background: linear-gradient(145deg, rgba(74, 108, 140, 0.96), rgba(48, 78, 108, 0.96));
  border: 1px solid rgba(207, 226, 242, 0.48);
  border-radius: 0.9rem;
  color: #ffffff;
  box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.26);
}

@media (any-hover: hover) {
  .tool-partial-ui #cinematic-modal .choice-container .choice-btn:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(84, 122, 158, 0.98), rgba(58, 92, 124, 0.98));
    border-color: rgba(228, 239, 248, 0.66);
    box-shadow: 0 1rem 1.9rem rgba(0, 0, 0, 0.32);
    transform: translateY(-2px);
  }
}

@media (max-width: 48rem) {
  .tool-standard-ui :where(.btn, .atm-button),
  .tool-partial-ui :where(.btn, .atm-button) {
    border-radius: 0.78rem;
  }

  .tool-standard-ui :where(.result-shortcuts button, .result-shortcuts a),
  .tool-partial-ui :where(.result-shortcuts button, .result-shortcuts a) {
    min-height: 2.75rem;
  }

  .tool-standard-ui #result-card .card-body,
  .tool-partial-ui #result-card .card-body {
    padding: var(--space-md);
  }

  .tool-standard-ui #result-capture-area,
  .tool-partial-ui #result-capture-area {
    padding: 0;
  }

  .tool-standard-ui :where(.result-summary-card, .result-summary-panel),
  .tool-partial-ui :where(.result-summary-card, .result-summary-panel) {
    max-width: none;
    width: 100%;
    padding: var(--space-sm);
  }

  .tool-standard-ui :where(.result-first-action, .result-warm-note, .result-shortcuts, .result-level-card, .impact-result-card, .next-tools-section),
  .tool-partial-ui :where(.result-first-action, .result-warm-note, .result-shortcuts, .result-level-card, .impact-result-card, .next-tools-section) {
    width: 100%;
  }
}

/* Font hierarchy normalization
   Keeps tool content intact while making typography feel consistent across pages. */
.tool-standard-ui,
.tool-partial-ui {
  --tool-type-page-title: clamp(1.65rem, 1.05vw + 1.3rem, 2.12rem);
  --tool-type-page-description: clamp(0.96rem, 0.18vw + 0.92rem, 1.05rem);
  --tool-type-card-title: clamp(1.16rem, 0.56vw + 1rem, 1.42rem);
  --tool-type-section-title: clamp(1.05rem, 0.35vw + 0.96rem, 1.22rem);
  --tool-type-question: clamp(1.02rem, 0.24vw + 0.96rem, 1.14rem);
  --tool-type-body: 1rem;
  --tool-type-choice: clamp(0.95rem, 0.16vw + 0.91rem, 1.02rem);
  --tool-type-button: clamp(0.94rem, 0.14vw + 0.9rem, 1rem);
  --tool-type-note: 0.9rem;
  --tool-type-micro: 0.8125rem;
  --tool-type-result-number: clamp(3rem, 5.5vw, 4.8rem);
  --tool-leading-heading: 1.34;
  --tool-leading-body: 1.72;
  --tool-leading-control: 1.42;
  --tool-letter-spacing: 0;
}

.tool-partial-ui {
  --tool-type-page-title: clamp(1.55rem, 0.95vw + 1.25rem, 2rem);
  --tool-type-card-title: clamp(1.12rem, 0.48vw + 1rem, 1.34rem);
  --tool-type-question: clamp(1rem, 0.18vw + 0.96rem, 1.1rem);
}

.tool-standard-ui :where(.page-header__title, .page-header h1, .tool-header h1),
.tool-partial-ui :where(.page-header__title, .page-header h1, .tool-header h1) {
  font-size: var(--tool-type-page-title);
  line-height: var(--tool-leading-heading);
  letter-spacing: var(--tool-letter-spacing);
  font-weight: var(--font-weight-extrabold, 800);
  text-wrap: balance;
}

.tool-standard-ui :where(.page-header__description, .page-header p, .tool-header p),
.tool-partial-ui :where(.page-header__description, .page-header p, .tool-header p) {
  font-size: var(--tool-type-page-description);
  line-height: var(--tool-leading-body);
  letter-spacing: var(--tool-letter-spacing);
  text-wrap: pretty;
}

.tool-standard-ui :where(.card-title, .card-header__title, .section-title, .result-title, .modal-title, .modal-header__title, .mol-modal-header__title),
.tool-partial-ui :where(.card-title, .card-header__title, .section-title, .result-title, .modal-title, .modal-header__title, .mol-modal-header__title) {
  font-size: var(--tool-type-card-title);
  line-height: var(--tool-leading-heading);
  letter-spacing: var(--tool-letter-spacing);
  font-weight: var(--font-weight-bold, 700);
  text-wrap: balance;
}

.tool-standard-ui :where(.info-box__title, .mol-info-box__title, .result-level, .score-label, .tools-header, .panel-header, .feature-title, .domain-title, .strategy-title),
.tool-partial-ui :where(.info-box__title, .mol-info-box__title, .result-level, .score-label, .tools-header, .panel-header, .feature-title, .domain-title, .strategy-title) {
  font-size: var(--tool-type-section-title);
  line-height: var(--tool-leading-heading);
  letter-spacing: var(--tool-letter-spacing);
  font-weight: var(--font-weight-bold, 700);
  text-wrap: balance;
}

.tool-standard-ui :where(.intro-text, .intro-text p, .card-body, .card-body p, .info-box__content, .info-box p, .mol-info-box p, .result-description, .result-summary-panel, .result-summary-panel p, .interpretation-text, .feature-desc, .domain-desc),
.tool-partial-ui :where(.intro-text, .intro-text p, .card-body, .card-body p, .info-box__content, .info-box p, .mol-info-box p, .result-description, .result-summary-panel, .result-summary-panel p, .interpretation-text, .feature-desc, .domain-desc) {
  font-size: var(--tool-type-body);
  line-height: var(--tool-leading-body);
  letter-spacing: var(--tool-letter-spacing);
  text-wrap: pretty;
}

.tool-standard-ui :where(.question-title, .question-title-text, .question-text, .question-prompt, .scenario-text, .prompt-text, .item-question, .checklist-question),
.tool-partial-ui :where(.question-title, .question-title-text, .question-text, .question-prompt, .scenario-text, .prompt-text, .item-question, .checklist-question) {
  font-size: var(--tool-type-question);
  line-height: 1.58;
  letter-spacing: var(--tool-letter-spacing);
  font-weight: var(--font-weight-regular, 400);
  text-wrap: pretty;
}

.tool-standard-ui .question-emphasis-target,
.tool-partial-ui .question-emphasis-target {
  font-weight: var(--font-weight-regular, 400) !important;
}

.tool-standard-ui .question-emphasis-target .question-emphasis__key,
.tool-partial-ui .question-emphasis-target .question-emphasis__key {
  color: inherit;
  font-weight: var(--font-weight-semibold, 600) !important;
}

.tool-standard-ui :where(
  .btn,
  .atm-button,
  .button,
  .btn-primary,
  .btn-secondary,
  .btn-text,
  .btn--text,
  .learn-more-btn,
  .btn-learn-more,
  .btn-top
),
.tool-partial-ui :where(
  .btn,
  .atm-button,
  .button,
  .btn-primary,
  .btn-secondary,
  .btn-text,
  .btn--text,
  .learn-more-btn,
  .btn-learn-more,
  .btn-top
) {
  font-size: var(--tool-type-button);
  line-height: var(--tool-leading-control);
  letter-spacing: var(--tool-letter-spacing);
}

.tool-standard-ui :where(
  .option-btn,
  .option-button,
  .choice-button,
  .answer-option,
  .choice-option,
  .question-option,
  .option-card,
  .answer-btn,
  .choice-btn,
  .domain-card,
  .relationship-card,
  .context-option,
  .context-option-list label,
  .safety-risk-option,
  .storage-choice-option,
  .storage-choice-item,
  .storage-choice-options label,
  .rating-option-card,
  .emotion-option-btn,
  .emotion-choice-btn,
  .insight-choice-btn,
  .anchor-choice-btn
),
.tool-partial-ui :where(
  .option-btn,
  .option-button,
  .choice-button,
  .answer-option,
  .choice-option,
  .question-option,
  .option-card,
  .answer-btn,
  .choice-btn,
  .domain-card,
  .relationship-card,
  .context-option,
  .context-option-list label,
  .safety-risk-option,
  .storage-choice-option,
  .storage-choice-item,
  .storage-choice-options label,
  .rating-option-card,
  .emotion-option-btn,
  .emotion-choice-btn,
  .insight-choice-btn,
  .anchor-choice-btn
) {
  font-size: var(--tool-type-choice);
  line-height: var(--tool-leading-control);
  letter-spacing: var(--tool-letter-spacing);
  font-weight: var(--font-weight-medium, 500);
}

.tool-standard-ui :is(
  .result-percentage,
  .result-percent,
  .result-score,
  .score-value,
  #score-value,
  .score-number,
  .percentage-value,
  .total-score,
  .result-value,
  .main-score
) {
  font-size: var(--tool-type-result-number);
  line-height: 1.05;
  letter-spacing: var(--tool-letter-spacing);
  font-weight: var(--font-weight-extrabold, 800);
}

.tool-standard-ui :where(
  .disclaimer-text,
  .disclaimer-box__text,
  .date-text,
  .progress-text-container,
  .choice-note,
  .score-note,
  .caption-note,
  .tool-time-note,
  .meta-text,
  .helper-text,
  .small-note,
  .notice-small
),
.tool-partial-ui :where(
  .disclaimer-text,
  .disclaimer-box__text,
  .date-text,
  .progress-text-container,
  .choice-note,
  .score-note,
  .caption-note,
  .tool-time-note,
  .meta-text,
  .helper-text,
  .small-note,
  .notice-small
) {
  font-size: var(--tool-type-note);
  line-height: 1.62;
  letter-spacing: var(--tool-letter-spacing);
}

.tool-standard-ui :where(.progress-chip, .step-label, .badge, .tag, .pill, .rank-badge, .gauge-markers),
.tool-partial-ui :where(.progress-chip, .step-label, .badge, .tag, .pill, .rank-badge, .gauge-markers) {
  font-size: var(--tool-type-micro);
  line-height: 1.35;
  letter-spacing: var(--tool-letter-spacing);
}

.tool-standard-ui :where(.emoji, .inline-emoji, .icon, .btn-emoji),
.tool-partial-ui :where(.emoji, .inline-emoji, .icon, .btn-emoji) {
  line-height: 1;
  vertical-align: -0.08em;
}

@media (max-width: 48rem) {
  .tool-standard-ui,
  .tool-partial-ui {
    --tool-type-page-title: clamp(1.35rem, 4.6vw, 1.72rem);
    --tool-type-page-description: 0.95rem;
    --tool-type-card-title: clamp(1.08rem, 3.7vw, 1.28rem);
    --tool-type-section-title: clamp(1rem, 3.3vw, 1.14rem);
    --tool-type-question: clamp(1rem, 3.2vw, 1.08rem);
    --tool-type-body: 0.96rem;
    --tool-type-choice: 0.94rem;
    --tool-type-button: 0.94rem;
    --tool-type-note: 0.84rem;
    --tool-type-micro: 0.76rem;
    --tool-type-result-number: clamp(2.65rem, 12vw, 3.8rem);
    --tool-leading-body: 1.68;
  }
}

/* 2026-07-06: unified first-screen treatment for tools 1-0 through 5-6.
   Text and flow stay untouched; this only normalizes the visual shell. */
body.tool-standard-ui,
body.tool-partial-ui:not(.drama-director-page) {
  --tool-intro-surface: linear-gradient(180deg, #F7FAFC 0%, #EEF4F8 100%);
  --tool-intro-card: linear-gradient(180deg, #F8FBFD 0%, #F1F6FA 100%);
  --tool-intro-border: rgba(74, 108, 140, 0.18);
  --tool-intro-border-strong: rgba(74, 108, 140, 0.28);
  --tool-intro-shadow: 0 0.65rem 1.35rem rgba(60, 76, 92, 0.07);
  --tool-intro-shadow-hover: 0 0.85rem 1.65rem rgba(60, 76, 92, 0.1);
  --tool-intro-radius: var(--border-radius-base, 0.5rem);
  --tool-intro-icon-size: clamp(2rem, 2.4vw, 2.55rem);
  --tool-intro-icon-size-mobile: clamp(1.55rem, 6vw, 2rem);
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) {
  border-color: var(--tool-intro-border);
  border-radius: var(--tool-intro-radius);
  background: var(--color-surface);
  box-shadow: var(--tool-intro-shadow);
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) > :is(.card-header, .atm-card__header),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) > :is(.card-header, .atm-card__header) {
  border-bottom-color: rgba(74, 108, 140, 0.12);
  background: linear-gradient(180deg, rgba(248, 251, 253, 0.88), rgba(255, 255, 255, 0.92));
}
@media (prefers-color-scheme: dark) {
  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) > :is(.card-header, .atm-card__header),
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) > :is(.card-header, .atm-card__header) {
    border-bottom-color: rgba(125, 162, 200, 0.22);
    background: linear-gradient(180deg, #15191C 0%, #1B232C 100%);
  }
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-body, .atm-card__body),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-body, .atm-card__body) {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.15rem);
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-title, .card-header__title, .atm-card__title),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-title, .card-header__title, .atm-card__title) {
  color: var(--color-primary-dark);
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-title, .card-header__title, .atm-card__title) > :is(.emoji, .inline-emoji, .icon, span[aria-hidden="true"]):first-child,
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-title, .card-header__title, .atm-card__title) > :is(.emoji, .inline-emoji, .icon, span[aria-hidden="true"]):first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.42rem;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1;
  vertical-align: -0.12em;
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.intro-text, .intro-copy, .checkin-prompt),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.intro-text, .intro-copy, .checkin-prompt) {
  max-width: 46rem;
  margin-inline: auto;
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-grid, .tool-feature-grid, .intro-feature-grid),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-grid, .tool-feature-grid, .intro-feature-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.6vw, 0.9rem);
  align-items: stretch;
  margin-block: clamp(0.45rem, 1.4vw, 0.75rem);
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-item, .feature-card, .intro-feature-item),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-item, .feature-card, .intro-feature-item) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  justify-content: flex-start;
  column-gap: 0.72rem;
  row-gap: 0.2rem;
  min-height: auto;
  padding: clamp(0.78rem, 2vw, 1rem);
  border: 1px solid var(--tool-intro-border);
  border-radius: var(--tool-intro-radius);
  background: var(--tool-intro-card);
  box-shadow: 0 0.35rem 0.95rem rgba(60, 76, 92, 0.045);
  text-align: left;
  transition: none;
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-icon, .feature-emoji, .intro-feature-icon),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-icon, .feature-emoji, .intro-feature-icon) {
  display: inline-flex;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  width: calc(var(--tool-intro-icon-size) + 0.35rem);
  height: calc(var(--tool-intro-icon-size) + 0.35rem);
  min-height: 0;
  margin: 0;
  border-radius: var(--tool-intro-radius);
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-primary-dark);
  font-size: var(--tool-intro-icon-size);
  line-height: 1;
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-title, .intro-feature-title, .feature-item > h3, .feature-item > h4, .intro-feature-item > h3, .intro-feature-item > h4),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-title, .intro-feature-title, .feature-item > h3, .feature-item > h4, .intro-feature-item > h3, .intro-feature-item > h4) {
  grid-column: 2;
  margin: 0 0 0.12rem;
  color: var(--color-primary-dark);
  font-size: clamp(0.92rem, 0.26vw + 0.88rem, 1.04rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.34;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-desc, .intro-feature-desc, .feature-item > p, .intro-feature-item > p),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-desc, .intro-feature-desc, .feature-item > p, .intro-feature-item > p) {
  grid-column: 2;
  margin: 0;
  color: var(--color-text-light);
  font-size: clamp(0.8rem, 0.18vw + 0.78rem, 0.9rem);
  line-height: 1.48;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.tool-flow-guide, .intro-flow-guide, .emptiness-flow-guide),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.tool-flow-guide, .intro-flow-guide, .emptiness-flow-guide) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: 0.65rem;
  margin-block: clamp(0.5rem, 1.8vw, 1rem);
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.tool-flow-step, .intro-flow-step, .emptiness-flow-step),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.tool-flow-step, .intro-flow-step, .emptiness-flow-step) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.35rem;
  padding: 0.48rem 0.7rem;
  border: 1px solid rgba(74, 108, 140, 0.16);
  border-radius: var(--tool-intro-radius);
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-primary-dark);
  font-size: var(--tool-type-micro);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.35;
  text-align: center;
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.tool-flow-step span, .intro-flow-step span, .emptiness-flow-step span),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.tool-flow-step span, .intro-flow-step span, .emptiness-flow-step span) {
  flex: 0 0 auto;
}

body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.privacy-notice, .privacy-box--intro, .disclaimer-box, .storage-choice-panel, .evidence-note),
body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.privacy-notice, .privacy-box--intro, .disclaimer-box, .storage-choice-panel, .evidence-note) {
  border: 1px solid rgba(74, 108, 140, 0.14);
  border-radius: var(--tool-intro-radius);
  background: rgba(248, 251, 253, 0.86);
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.privacy-notice, .privacy-box--intro, .disclaimer-box, .storage-choice-panel, .evidence-note),
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.privacy-notice, .privacy-box--intro, .disclaimer-box, .storage-choice-panel, .evidence-note) {
    border-color: rgba(125, 162, 200, 0.22);
    background: linear-gradient(180deg, #15191C 0%, #1B232C 100%);
  }
}

body.tool-standard-ui :is(.modal-overlay > .modal-content, .modal > .modal-content, .modal-container, .mol-modal-container),
body.tool-partial-ui:not(.drama-director-page) :is(.modal-overlay > .modal-content, .modal > .modal-content, .modal-container, .mol-modal-container) {
  border: 1px solid var(--tool-intro-border);
  border-radius: var(--tool-intro-radius);
  background: var(--color-surface);
  box-shadow: 0 1rem 2.4rem rgba(36, 54, 74, 0.18);
}

body.tool-standard-ui :is(.modal-header, .mol-modal-header),
body.tool-partial-ui:not(.drama-director-page) :is(.modal-header, .mol-modal-header) {
  border-bottom-color: rgba(74, 108, 140, 0.14);
}

body.tool-standard-ui :is(.modal-close, .modal-close-button, .modal-close-btn, .close-modal, .atm-modal-close-button),
body.tool-partial-ui:not(.drama-director-page) :is(.modal-close, .modal-close-button, .modal-close-btn, .close-modal, .atm-modal-close-button) {
  border: 1px solid rgba(74, 108, 140, 0.16);
  background: #F8FBFD;
  color: var(--color-primary-dark);
  box-shadow: none;
}

@media (max-width: 48rem) {
  body.tool-standard-ui,
  body.tool-partial-ui:not(.drama-director-page) {
    --tool-intro-icon-size: var(--tool-intro-icon-size-mobile);
  }

  body.tool-standard-ui :is(
    #learn-more-btn,
    #learn-more-grey-rock-btn,
    #info-button,
    .learn-more-btn,
    .btn-learn-more,
    .learn-more-btn-container,
    button[aria-controls="info-modal-overlay"]
  ),
  body.tool-partial-ui:not(.drama-director-page) :is(
    #learn-more-btn,
    #learn-more-grey-rock-btn,
    #info-button,
    .learn-more-btn,
    .btn-learn-more,
    .learn-more-btn-container,
    button[aria-controls="info-modal-overlay"]
  ) {
    display: none !important;
  }

  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) > :is(.card-header, .atm-card__header),
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) > :is(.card-header, .atm-card__header) {
    display: block;
  }

  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-title, .card-header__title, .atm-card__title),
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-title, .card-header__title, .atm-card__title) {
    display: block;
    width: 100%;
    margin-inline: auto;
    font-size: clamp(0.92rem, 3.7vw, 1.08rem);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    word-break: keep-all;
  }

  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-title, .card-header__title, .atm-card__title) > :is(.emoji, .inline-emoji, .icon, span[aria-hidden="true"]):first-child,
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.card-title, .card-header__title, .atm-card__title) > :is(.emoji, .inline-emoji, .icon, span[aria-hidden="true"]):first-child {
    margin-right: 0.32rem;
    font-size: 1.1em;
  }

  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-grid, .tool-feature-grid, .intro-feature-grid),
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-grid, .tool-feature-grid, .intro-feature-grid) {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-item, .feature-card, .intro-feature-item),
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-item, .feature-card, .intro-feature-item) {
    min-height: auto;
    padding: 0.68rem 0.75rem;
  }

  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-desc, .intro-feature-desc, .feature-item > p, .intro-feature-item > p),
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-desc, .intro-feature-desc, .feature-item > p, .intro-feature-item > p) {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 22rem) {
  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-grid, .tool-feature-grid, .intro-feature-grid),
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-grid, .tool-feature-grid, .intro-feature-grid) {
    grid-template-columns: 1fr;
  }

  body.tool-standard-ui :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-item, .feature-card, .intro-feature-item),
  body.tool-partial-ui:not(.drama-director-page) :is(#intro-card, #intro-screen, #introSection, #intro-section, #section-intro, .intro-section.visible) :is(.feature-item, .feature-card, .intro-feature-item) {
    min-height: auto;
  }
}

body.tool-standard-ui :is(.result-standard-line, .result-summary-panel .result-standard-line) {
  border: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-block-start: 0 !important;
  border-inline-start: 0 !important;
  box-shadow: none !important;
}

/* Mid-test relation/type reselection controls add choice burden on mobile. */
body.tool-standard-ui :is(
  #back-to-archetype-btn,
  #back-to-domain-btn,
  #backToDomainBtn,
  #back-to-relationship-btn,
  #back-to-domain-from-aha-btn,
  #preflight-back-btn,
  #change-domain-btn
),
body.tool-partial-ui :is(
  #back-to-archetype-btn,
  #back-to-domain-btn,
  #backToDomainBtn,
  #back-to-relationship-btn,
  #back-to-domain-from-aha-btn,
  #preflight-back-btn,
  #change-domain-btn
) {
  display: none !important;
}

body.tool-standard-ui :is(
  .question-support-actions,
  .screen-support-actions,
  .simulation-support-actions
):has(> :is(
  #back-to-domain-btn,
  #backToDomainBtn,
  #back-to-relationship-btn,
  #preflight-back-btn
):only-child),
body.tool-partial-ui :is(
  .question-support-actions,
  .screen-support-actions,
  .simulation-support-actions
):has(> :is(
  #back-to-domain-btn,
  #backToDomainBtn,
  #back-to-relationship-btn,
  #preflight-back-btn
):only-child) {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep checked context choices readable across page-specific overrides. */
body.tool-standard-ui :is(
  .context-option,
  .context-option-list label,
  .storage-choice-option,
  .storage-choice-item,
  .storage-choice-options label,
  .safety-risk-option
):has(input:checked),
body.tool-partial-ui :is(
  .context-option,
  .context-option-list label,
  .storage-choice-option,
  .storage-choice-item,
  .storage-choice-options label,
  .safety-risk-option
):has(input:checked) {
  background: linear-gradient(180deg, #4F7191 0%, #3A5A76 100%) !important;
  border-color: rgba(66, 101, 131, 0.72) !important;
  color: var(--color-text-on-primary) !important;
  box-shadow: var(--choice-selected-shadow, var(--shadow-soft)) !important;
}

body.tool-standard-ui :is(
  .context-option,
  .context-option-list label,
  .storage-choice-option,
  .storage-choice-item,
  .storage-choice-options label,
  .safety-risk-option
):has(input:checked) :is(span, strong, em, small, p, div),
body.tool-partial-ui :is(
  .context-option,
  .context-option-list label,
  .storage-choice-option,
  .storage-choice-item,
  .storage-choice-options label,
  .safety-risk-option
):has(input:checked) :is(span, strong, em, small, p, div) {
  color: inherit !important;
}

/* 2026-07-12: full-flow design pass.
   Extends the shared visual language beyond intro screens to every step,
   result, modal, search, writing, and choice surface. */
body.tool-standard-ui,
body.tool-partial-ui:not(.drama-director-page) {
  --tool-full-radius: var(--border-radius-base, 0.5rem);
  --tool-full-border: rgba(74, 108, 140, 0.16);
  --tool-full-border-strong: rgba(74, 108, 140, 0.28);
  --tool-full-surface: #ffffff;
  --tool-full-soft-surface: #F8FBFD;
  --tool-full-shadow: 0 0.55rem 1.25rem rgba(44, 63, 82, 0.055);
  --tool-full-shadow-hover: 0 0.75rem 1.45rem rgba(44, 63, 82, 0.085);
}

body.tool-standard-ui :where(
  .card,
  .atm-card,
  .section-card,
  .info-box,
  .comp-info-box,
  .mol-info-box,
  .question-card,
  .question-panel,
  .context-check-section,
  .context-check-panel,
  .safety-check-panel,
  .pattern-check-panel,
  .action-check-panel,
  .choice-card,
  .result-card,
  .result-summary-card,
  .result-summary-panel,
  .result-level-card,
  .result-guard-card,
  .safety-result-card,
  .result-action-card,
  .recommendation-section,
  .org-recommendation-section,
  .next-tools-section,
  .bottom-search-panel,
  .accordion,
  .accordion-item,
  .writing-step,
  .judgment-section,
  .boundary-sentence-box,
  .cognitive-cost-box,
  .explanation-box,
  .insight-box,
  .storage-choice-card,
  .safety-alert-card
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .card,
  .atm-card,
  .section-card,
  .info-box,
  .comp-info-box,
  .mol-info-box,
  .question-card,
  .question-panel,
  .context-check-section,
  .context-check-panel,
  .safety-check-panel,
  .pattern-check-panel,
  .action-check-panel,
  .choice-card,
  .result-card,
  .result-summary-card,
  .result-summary-panel,
  .result-level-card,
  .result-guard-card,
  .safety-result-card,
  .result-action-card,
  .recommendation-section,
  .org-recommendation-section,
  .next-tools-section,
  .bottom-search-panel,
  .accordion,
  .accordion-item,
  .writing-step,
  .judgment-section,
  .boundary-sentence-box,
  .cognitive-cost-box,
  .explanation-box,
  .insight-box,
  .storage-choice-card,
  .safety-alert-card
) {
  min-width: 0;
  border-color: var(--tool-full-border);
  border-radius: var(--tool-full-radius);
  box-shadow: var(--tool-full-shadow);
}

body.tool-standard-ui :where(.card, .atm-card) :where(
  .card,
  .atm-card,
  .info-box,
  .comp-info-box,
  .mol-info-box,
  .result-card,
  .result-level-card,
  .result-guard-card,
  .next-tools-section,
  .recommendation-section
),
body.tool-partial-ui:not(.drama-director-page) :where(.card, .atm-card) :where(
  .card,
  .atm-card,
  .info-box,
  .comp-info-box,
  .mol-info-box,
  .result-card,
  .result-level-card,
  .result-guard-card,
  .next-tools-section,
  .recommendation-section
) {
  box-shadow: none;
}

body.tool-standard-ui :where(
  .card-header,
  .atm-card__header,
  .modal-header,
  .mol-modal-header,
  .result-header,
  .section__header,
  .accordion-header,
  .accordion-q-row
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .card-header,
  .atm-card__header,
  .modal-header,
  .mol-modal-header,
  .result-header,
  .section__header,
  .accordion-header,
  .accordion-q-row
) {
  min-width: 0;
  border-top: 0 !important;
  border-left: 0 !important;
}

body.tool-standard-ui :where(
  .card-body,
  .atm-card__body,
  .modal-body,
  .modal-content,
  .mol-modal-content,
  .question-body,
  .result-main-body,
  .result-card-body,
  .accordion-body,
  .accordion-a-body
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .card-body,
  .atm-card__body,
  .modal-body,
  .modal-content,
  .mol-modal-content,
  .question-body,
  .result-main-body,
  .result-card-body,
  .accordion-body,
  .accordion-a-body
) {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.tool-standard-ui :where(
  .domain-btn,
  .relationship-btn,
  .relationship-option,
  .choice-card,
  .choice-btn,
  .choice-button,
  .option-btn,
  .option-button,
  .answer-option,
  .choice-option,
  .question-option,
  .option-card,
  .context-option,
  .safety-risk-option,
  .storage-option,
  .storage-choice-card,
  .storage-choice-option,
  .action-option,
  .action-choice-item,
  .pattern-option,
  .body-signal-btn,
  .urge-btn,
  .emotion-option,
  .emotion-option-btn,
  .aha-choice,
  .insight-choice-btn,
  .response-choice,
  .response-choice-card
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .domain-btn,
  .relationship-btn,
  .relationship-option,
  .choice-card,
  .choice-btn,
  .choice-button,
  .option-btn,
  .option-button,
  .answer-option,
  .choice-option,
  .question-option,
  .option-card,
  .context-option,
  .safety-risk-option,
  .storage-option,
  .storage-choice-card,
  .storage-choice-option,
  .action-option,
  .action-choice-item,
  .pattern-option,
  .body-signal-btn,
  .urge-btn,
  .emotion-option,
  .emotion-option-btn,
  .aha-choice,
  .insight-choice-btn,
  .response-choice,
  .response-choice-card
) {
  min-width: 0;
  border-color: var(--tool-full-border);
  border-radius: var(--tool-full-radius);
  background: linear-gradient(180deg, var(--tool-full-surface), var(--tool-full-soft-surface));
  box-shadow: 0 0.35rem 0.95rem rgba(44, 63, 82, 0.04);
  color: var(--color-text);
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}

body.tool-standard-ui :where(
  .domain-btn.is-selected,
  .domain-btn.selected,
  .domain-btn[aria-pressed="true"],
  .relationship-btn.is-selected,
  .relationship-btn.selected,
  .relationship-btn[aria-pressed="true"],
  .relationship-option.is-selected,
  .relationship-option.selected,
  .choice-card.is-selected,
  .choice-card.selected,
  .choice-card:has(input:checked),
  .choice-btn.is-selected,
  .choice-btn.selected,
  .option-btn.is-selected,
  .option-btn.selected,
  .option-button.is-selected,
  .option-button.selected,
  .urge-btn.selected,
  .option-card.is-selected,
  .option-card.selected,
  .answer-option.is-selected,
  .answer-option.selected,
  .choice-option.is-selected,
  .choice-option.selected,
  .question-option.is-selected,
  .question-option.selected,
  .safety-option:has(input:checked),
  .context-option:has(input:checked),
  .safety-risk-option:has(input:checked),
  .storage-option:has(input:checked),
  .storage-choice-card:has(input:checked),
  .storage-choice-option:has(input:checked),
  .action-option:has(input:checked),
  .pattern-option.is-selected,
  .pattern-option.selected,
  .emotion-btn.selected,
  .emotion-option.is-selected,
  .emotion-option.selected,
  .emotion-option-btn.is-selected,
  .emotion-option-btn.selected,
  .aha-choice.selected,
  .aha-choice.is-selected,
  .insight-choice-btn.selected,
  .response-choice-card.is-priority
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .domain-btn.is-selected,
  .domain-btn.selected,
  .domain-btn[aria-pressed="true"],
  .relationship-btn.is-selected,
  .relationship-btn.selected,
  .relationship-btn[aria-pressed="true"],
  .relationship-option.is-selected,
  .relationship-option.selected,
  .choice-card.is-selected,
  .choice-card.selected,
  .choice-card:has(input:checked),
  .choice-btn.is-selected,
  .choice-btn.selected,
  .option-btn.is-selected,
  .option-btn.selected,
  .option-button.is-selected,
  .option-button.selected,
  .urge-btn.selected,
  .option-card.is-selected,
  .option-card.selected,
  .answer-option.is-selected,
  .answer-option.selected,
  .choice-option.is-selected,
  .choice-option.selected,
  .question-option.is-selected,
  .question-option.selected,
  .safety-option:has(input:checked),
  .context-option:has(input:checked),
  .safety-risk-option:has(input:checked),
  .storage-option:has(input:checked),
  .storage-choice-card:has(input:checked),
  .storage-choice-option:has(input:checked),
  .action-option:has(input:checked),
  .pattern-option.is-selected,
  .pattern-option.selected,
  .emotion-btn.selected,
  .emotion-option.is-selected,
  .emotion-option.selected,
  .emotion-option-btn.is-selected,
  .emotion-option-btn.selected,
  .aha-choice.selected,
  .aha-choice.is-selected,
  .insight-choice-btn.selected,
  .response-choice-card.is-priority
) {
  background: linear-gradient(180deg, #4F7191 0%, #3A5A76 100%) !important;
  border-color: rgba(66, 101, 131, 0.76) !important;
  color: var(--color-text-on-primary) !important;
  box-shadow: 0 0 0 0.16rem rgba(132, 169, 196, 0.32), var(--tool-full-shadow-hover) !important;
}

body.tool-standard-ui :where(
  .domain-btn.is-selected,
  .domain-btn.selected,
  .domain-btn[aria-pressed="true"],
  .relationship-btn.is-selected,
  .relationship-btn.selected,
  .relationship-btn[aria-pressed="true"],
  .choice-card.is-selected,
  .choice-card.selected,
  .choice-card:has(input:checked),
  .option-card.selected,
  .urge-btn.selected,
  .safety-option:has(input:checked),
  .context-option:has(input:checked),
  .safety-risk-option:has(input:checked),
  .storage-option:has(input:checked),
  .storage-choice-card:has(input:checked),
  .storage-choice-option:has(input:checked),
  .action-option:has(input:checked),
  .emotion-btn.selected,
  .aha-choice.selected,
  .response-choice-card.is-priority
) :where(h2, h3, h4, p, span, strong, small, em, div),
body.tool-partial-ui:not(.drama-director-page) :where(
  .domain-btn.is-selected,
  .domain-btn.selected,
  .domain-btn[aria-pressed="true"],
  .relationship-btn.is-selected,
  .relationship-btn.selected,
  .relationship-btn[aria-pressed="true"],
  .choice-card.is-selected,
  .choice-card.selected,
  .choice-card:has(input:checked),
  .option-card.selected,
  .urge-btn.selected,
  .safety-option:has(input:checked),
  .context-option:has(input:checked),
  .safety-risk-option:has(input:checked),
  .storage-option:has(input:checked),
  .storage-choice-card:has(input:checked),
  .storage-choice-option:has(input:checked),
  .action-option:has(input:checked),
  .emotion-btn.selected,
  .aha-choice.selected,
  .response-choice-card.is-priority
) :where(h2, h3, h4, p, span, strong, small, em, div) {
  color: inherit !important;
}

body.tool-standard-ui :where(input[type="checkbox"]),
body.tool-partial-ui:not(.drama-director-page) :where(input[type="checkbox"]) {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
  border-radius: 0.22rem !important;
}

body.tool-standard-ui :where(input[type="radio"]),
body.tool-partial-ui:not(.drama-director-page) :where(input[type="radio"]) {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}

body.tool-standard-ui :where(.evidence-note__title),
body.tool-partial-ui:not(.drama-director-page) :where(.evidence-note__title) {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.52rem;
}

body.tool-standard-ui :where(.evidence-note a, .evidence-note__body a, .source-link, .reference-link),
body.tool-partial-ui:not(.drama-director-page) :where(.evidence-note a, .evidence-note__body a, .source-link, .reference-link) {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  background: rgba(88, 122, 155, 0.08);
  border: 1px solid rgba(88, 122, 155, 0.16);
  line-height: 1.45;
}

body.tool-standard-ui :where(.checkbox-label),
body.tool-partial-ui:not(.drama-director-page) :where(.checkbox-label) {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-block: 0.52rem;
}

body.tool-standard-ui :where(.urge-btn.selected, .emotion-btn.selected),
body.tool-partial-ui:not(.drama-director-page) :where(.urge-btn.selected, .emotion-btn.selected) {
  position: relative;
  border-color: rgba(66, 101, 131, 0.86) !important;
  background: linear-gradient(180deg, #4F7191 0%, #3A5A76 100%) !important;
  color: var(--color-text-on-primary) !important;
  box-shadow: 0 0 0 0.16rem rgba(132, 169, 196, 0.32), var(--tool-full-shadow-hover) !important;
}

body.tool-standard-ui :where(.urge-btn.selected, .emotion-btn.selected)::after,
body.tool-partial-ui:not(.drama-director-page) :where(.urge-btn.selected, .emotion-btn.selected)::after {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

body.tool-standard-ui :where(.text-input-field, textarea, input[type="text"], input[type="search"]),
body.tool-partial-ui:not(.drama-director-page) :where(.text-input-field, textarea, input[type="text"], input[type="search"]) {
  max-width: 100%;
  border-color: var(--tool-full-border);
  border-radius: var(--tool-full-radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--tool-type-body);
  line-height: 1.62;
  letter-spacing: 0;
  box-shadow: inset 0 0.08rem 0.18rem rgba(44, 63, 82, 0.035);
}

body.tool-standard-ui :where(.text-input-field, textarea, input[type="text"], input[type="search"]):focus,
body.tool-partial-ui:not(.drama-director-page) :where(.text-input-field, textarea, input[type="text"], input[type="search"]):focus {
  border-color: rgba(74, 108, 140, 0.72);
  box-shadow: 0 0 0 0.16rem rgba(132, 169, 196, 0.24);
  outline: none;
}

body.tool-standard-ui :where(
  .result-shortcuts,
  .card-footer,
  .modal-footer,
  .mol-modal-footer,
  .action-footer,
  .history-control,
  .result-action-row,
  .section-top-actions,
  .bottom-search-panel,
  .recovery-strategies,
  .recommendation-section,
  .org-recommendation-section
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .result-shortcuts,
  .card-footer,
  .modal-footer,
  .mol-modal-footer,
  .action-footer,
  .history-control,
  .result-action-row,
  .section-top-actions,
  .bottom-search-panel,
  .recovery-strategies,
  .recommendation-section,
  .org-recommendation-section
) {
  border-top: 0 !important;
  border-left: 0 !important;
}

body.tool-standard-ui :where(.btn, .atm-button, button, a.btn, a.atm-button),
body.tool-partial-ui:not(.drama-director-page) :where(.btn, .atm-button, button, a.btn, a.atm-button) {
  min-width: 0;
  max-width: 100%;
  border-radius: clamp(0.45rem, 1.2vw, 0.58rem);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: keep-all;
}

body.tool-standard-ui :where(.modal-overlay, .org-modal-overlay),
body.tool-partial-ui:not(.drama-director-page) :where(.modal-overlay, .org-modal-overlay) {
  align-items: flex-start;
  padding: max(1rem, calc(var(--header-height, 4rem) + 0.75rem)) 1rem 1rem;
}

body.tool-standard-ui :where(.modal-container, .mol-modal-container, .modal-content),
body.tool-partial-ui:not(.drama-director-page) :where(.modal-container, .mol-modal-container, .modal-content) {
  width: min(100%, 45rem);
  max-height: calc(100dvh - var(--header-height, 4rem) - 2rem);
  border-radius: var(--tool-full-radius);
  overflow: auto;
}

body.tool-standard-ui :where(.modal-close, .modal-close-button, .modal-close-btn, .close-modal, .atm-modal-close-button),
body.tool-partial-ui:not(.drama-director-page) :where(.modal-close, .modal-close-button, .modal-close-btn, .close-modal, .atm-modal-close-button) {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  border-radius: 50%;
}

body.tool-standard-ui :where(.accordion-header, .accordion-q, .accordion-toggle, .accordion-trigger),
body.tool-partial-ui:not(.drama-director-page) :where(.accordion-header, .accordion-q, .accordion-toggle, .accordion-trigger) {
  min-height: 3rem;
  border-radius: var(--tool-full-radius);
  color: var(--color-primary-dark) !important;
  text-align: left;
}

body.tool-standard-ui :where(
  .logo,
  .nav-link,
  .footer a,
  .btn--text,
  .btn-text,
  .btn-learn-more,
  .learn-more-btn,
  .atm-button--text,
  .accordion-button,
  .accordion-q,
  .accordion-toggle,
  .accordion-trigger,
  .bookmark-btn,
  .biz-info-toggle
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .logo,
  .nav-link,
  .footer a,
  .btn--text,
  .btn-text,
  .btn-learn-more,
  .learn-more-btn,
  .atm-button--text,
  .accordion-button,
  .accordion-q,
  .accordion-toggle,
  .accordion-trigger,
  .bookmark-btn,
  .biz-info-toggle
) {
  color: var(--color-primary-dark) !important;
}

body.tool-standard-ui :where(.feature-icon, .feature-emoji, .intro-feature-icon, .faq-q-emoji),
body.tool-partial-ui:not(.drama-director-page) :where(.feature-icon, .feature-emoji, .intro-feature-icon, .faq-q-emoji) {
  min-inline-size: 2.65rem;
  overflow: visible;
  line-height: 1;
}

@media (max-width: 48rem) {
  body.tool-standard-ui,
  body.tool-partial-ui:not(.drama-director-page) {
    --tool-full-shadow: 0 0.4rem 0.9rem rgba(44, 63, 82, 0.045);
  }

  body.tool-standard-ui :where(
    .card,
    .atm-card,
    .section-card,
    .info-box,
    .comp-info-box,
    .mol-info-box,
    .result-card,
    .result-summary-card,
    .result-summary-panel,
    .result-level-card,
    .result-guard-card,
    .next-tools-section,
    .bottom-search-panel
  ),
  body.tool-partial-ui:not(.drama-director-page) :where(
    .card,
    .atm-card,
    .section-card,
    .info-box,
    .comp-info-box,
    .mol-info-box,
    .result-card,
    .result-summary-card,
    .result-summary-panel,
    .result-level-card,
    .result-guard-card,
    .next-tools-section,
    .bottom-search-panel
  ) {
    border-radius: var(--tool-full-radius);
  }

  body.tool-standard-ui :where(
    .domain-selection-grid,
    .relationship-selection-grid,
    .choice-card-grid,
    .context-option-grid,
    .safety-risk-grid,
    .storage-options,
    .aha-choices-container,
    .action-option-grid,
    .result-summary-grid,
    .next-tool-grid,
    .next-tools-grid
  ),
  body.tool-partial-ui:not(.drama-director-page) :where(
    .domain-selection-grid,
    .relationship-selection-grid,
    .choice-card-grid,
    .context-option-grid,
    .safety-risk-grid,
    .storage-options,
    .aha-choices-container,
    .action-option-grid,
    .result-summary-grid,
    .next-tool-grid,
    .next-tools-grid
  ) {
    grid-template-columns: 1fr !important;
    gap: 0.72rem;
  }

  body.tool-standard-ui :where(
    .domain-btn,
    .relationship-btn,
    .choice-card,
    .option-card,
    .context-option,
    .safety-risk-option,
    .storage-choice-card,
    .action-option,
    .aha-choice,
    .response-choice-card
  ),
  body.tool-partial-ui:not(.drama-director-page) :where(
    .domain-btn,
    .relationship-btn,
    .choice-card,
    .option-card,
    .context-option,
    .safety-risk-option,
    .storage-choice-card,
    .action-option,
    .aha-choice,
    .response-choice-card
  ) {
    min-height: auto;
    padding: 0.78rem 0.85rem;
  }

  body.tool-standard-ui :where(.modal-overlay, .org-modal-overlay),
  body.tool-partial-ui:not(.drama-director-page) :where(.modal-overlay, .org-modal-overlay) {
    padding-inline: 0.75rem;
  }

  body.tool-standard-ui :where(.card-header, .atm-card__header, .result-header, .section__header),
  body.tool-partial-ui:not(.drama-director-page) :where(.card-header, .atm-card__header, .result-header, .section__header) {
    flex-wrap: wrap;
    min-width: 0;
  }

  body.tool-standard-ui :where(.card-header > *, .atm-card__header > *, .result-header > *, .section__header > *, .card-header-content),
  body.tool-partial-ui:not(.drama-director-page) :where(.card-header > *, .atm-card__header > *, .result-header > *, .section__header > *, .card-header-content) {
    min-width: 0;
    max-width: 100%;
  }

body.tool-standard-ui :where(.card-title, .card-header__title, .atm-card__title, .section-title, .result-title, .modal-title, .intro-title, .step-card__title, #intro-title, #intro-card-title, #storage-choice-title),
  body.tool-partial-ui:not(.drama-director-page) :where(.card-title, .card-header__title, .atm-card__title, .section-title, .result-title, .modal-title, .intro-title, .step-card__title, #intro-title, #intro-card-title, #storage-choice-title) {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: keep-all;
    line-height: 1.34;
  }
}

/* 2026-07-12: P2/P3 selection affordance pass.
   Keep selection controls readable and tappable without changing tool copy. */
body.tool-standard-ui :where(
  .choice-card,
  .relationship-option,
  .duration-option,
  .pattern-option,
  .option-item,
  .context-option,
  .safety-risk-option,
  .storage-choice-item,
  .storage-choice-option
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .choice-card,
  .relationship-option,
  .duration-option,
  .pattern-option,
  .option-item,
  .context-option,
  .safety-risk-option,
  .storage-choice-item,
  .storage-choice-option
) {
  cursor: pointer;
}

body.tool-standard-ui :where(
  .choice-card > label,
  .relationship-option > label,
  .duration-option > label,
  .pattern-option > label,
  .option-item > label,
  .context-option > label,
  .storage-choice-item,
  .storage-choice-option,
  .safety-risk-option,
  .question-item
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .choice-card > label,
  .relationship-option > label,
  .duration-option > label,
  .pattern-option > label,
  .option-item > label,
  .context-option > label,
  .storage-choice-item,
  .storage-choice-option,
  .safety-risk-option,
  .question-item
) {
  min-height: 2.9rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: manipulation;
}

body.tool-standard-ui :where(.quick-start-panel),
body.tool-partial-ui:not(.drama-director-page) :where(.quick-start-panel) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs, 0.5rem);
  margin: var(--space-md, 1rem) 0 var(--space-lg, 1.5rem);
  padding: var(--space-md, 1rem);
  border: 1px solid var(--color-border-light, #d9e2ec);
  border-radius: var(--border-radius-base, 0.75rem);
  background: linear-gradient(180deg, #f8fbfd 0%, #eef5fa 100%);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

body.tool-standard-ui :where(.quick-start-panel .btn, .quick-start-panel .atm-button),
body.tool-partial-ui:not(.drama-director-page) :where(.quick-start-panel .btn, .quick-start-panel .atm-button) {
  min-width: min(100%, 15rem);
}

body.tool-standard-ui :where(.quick-start-note),
body.tool-partial-ui:not(.drama-director-page) :where(.quick-start-note) {
  max-width: 40rem;
  margin: 0;
  color: var(--color-text-muted, var(--color-text-light));
  font-size: var(--font-size-sm);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.tool-standard-ui :where(.section-top-actions),
body.tool-partial-ui:not(.drama-director-page) :where(.section-top-actions) {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md, 1rem);
}

body.tool-standard-ui :where(.section-top-actions .return-intro-btn),
body.tool-partial-ui:not(.drama-director-page) :where(.section-top-actions .return-intro-btn) {
  width: auto !important;
  min-height: 2.35rem;
  padding: 0.42rem 0.85rem;
  border-color: var(--color-border, #d8e1ea);
  background: var(--color-surface, #fff);
  box-shadow: none;
  color: var(--color-primary-dark, #34556f);
  font-size: var(--font-size-sm);
}

body.tool-standard-ui :where(.question-item .checkbox-label, .question-item .checkbox-text, .question-item .checkbox-emoji),
body.tool-partial-ui:not(.drama-director-page) :where(.question-item .checkbox-label, .question-item .checkbox-text, .question-item .checkbox-emoji) {
  pointer-events: none;
}

body.tool-standard-ui :where(
  input[type="checkbox"],
  .checkbox-container input[type="checkbox"],
  .terms-agreement-box input[type="checkbox"],
  .checklist-item input[type="checkbox"]
),
body.tool-partial-ui:not(.drama-director-page) :where(
  input[type="checkbox"],
  .checkbox-container input[type="checkbox"],
  .terms-agreement-box input[type="checkbox"],
  .checklist-item input[type="checkbox"]
) {
  border-radius: 0.22rem !important;
}

body.tool-standard-ui :where(
  input[type="radio"],
  .choice-option-wrapper input[type="radio"],
  .option-item input[type="radio"]
),
body.tool-partial-ui:not(.drama-director-page) :where(
  input[type="radio"],
  .choice-option-wrapper input[type="radio"],
  .option-item input[type="radio"]
) {
  border-radius: 999px !important;
}

body.tool-standard-ui :where(
  .checkbox-visual-container,
  .audio-consent-container label::before
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .checkbox-visual-container,
  .audio-consent-container label::before
) {
  border-radius: 0.22rem !important;
}

body.tool-standard-ui :where(
  .choice-card.is-selected,
  .choice-card:has(input:checked),
  .relationship-option.is-selected,
  .relationship-option:has(input:checked),
  .duration-option.is-selected,
  .duration-option:has(input:checked),
  .pattern-option.is-selected,
  .pattern-option:has(input:checked),
  .option-item.is-selected,
  .option-item:has(input:checked),
  .context-option.is-selected,
  .context-option:has(input:checked),
  .safety-risk-option.is-selected,
  .safety-risk-option:has(input:checked),
  .question-item.is-selected,
  .storage-choice-item.is-selected,
  .storage-choice-item:has(input:checked),
  .storage-choice-option.is-selected,
  .storage-choice-option:has(input:checked),
  .question-item.is-checked,
  .modifier-question-item:has(input:checked)
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .choice-card.is-selected,
  .choice-card:has(input:checked),
  .relationship-option.is-selected,
  .relationship-option:has(input:checked),
  .duration-option.is-selected,
  .duration-option:has(input:checked),
  .pattern-option.is-selected,
  .pattern-option:has(input:checked),
  .option-item.is-selected,
  .option-item:has(input:checked),
  .context-option.is-selected,
  .context-option:has(input:checked),
  .safety-risk-option.is-selected,
  .safety-risk-option:has(input:checked),
  .question-item.is-selected,
  .storage-choice-item.is-selected,
  .storage-choice-item:has(input:checked),
  .storage-choice-option.is-selected,
  .storage-choice-option:has(input:checked),
  .question-item.is-checked,
  .modifier-question-item:has(input:checked)
) {
  background: linear-gradient(180deg, #4F7191 0%, #3A5A76 100%) !important;
  border-color: rgba(66, 101, 131, 0.86) !important;
  color: var(--color-text-on-primary) !important;
  box-shadow: 0 0 0 0.16rem rgba(132, 169, 196, 0.34), var(--tool-full-shadow-hover, var(--shadow-soft)) !important;
}

body.tool-standard-ui :where(
  .choice-card.is-selected,
  .choice-card:has(input:checked),
  .relationship-option.is-selected,
  .relationship-option:has(input:checked),
  .duration-option.is-selected,
  .duration-option:has(input:checked),
  .pattern-option.is-selected,
  .pattern-option:has(input:checked),
  .option-item.is-selected,
  .option-item:has(input:checked),
  .context-option.is-selected,
  .context-option:has(input:checked),
  .safety-risk-option.is-selected,
  .safety-risk-option:has(input:checked),
  .question-item.is-selected,
  .storage-choice-item.is-selected,
  .storage-choice-item:has(input:checked),
  .storage-choice-option.is-selected,
  .storage-choice-option:has(input:checked),
  .question-item.is-checked,
  .modifier-question-item:has(input:checked)
) :where(label, span, strong, small, em, p, div),
body.tool-partial-ui:not(.drama-director-page) :where(
  .choice-card.is-selected,
  .choice-card:has(input:checked),
  .relationship-option.is-selected,
  .relationship-option:has(input:checked),
  .duration-option.is-selected,
  .duration-option:has(input:checked),
  .pattern-option.is-selected,
  .pattern-option:has(input:checked),
  .option-item.is-selected,
  .option-item:has(input:checked),
  .context-option.is-selected,
  .context-option:has(input:checked),
  .safety-risk-option.is-selected,
  .safety-risk-option:has(input:checked),
  .question-item.is-selected,
  .storage-choice-item.is-selected,
  .storage-choice-item:has(input:checked),
  .storage-choice-option.is-selected,
  .storage-choice-option:has(input:checked),
  .question-item.is-checked,
  .modifier-question-item:has(input:checked)
) :where(label, span, strong, small, em, p, div) {
  color: inherit !important;
}

body.tool-standard-ui :where(.checkbox-container input[type="checkbox"]:checked)::before,
body.tool-partial-ui:not(.drama-director-page) :where(.checkbox-container input[type="checkbox"]:checked)::before,
body.tool-standard-ui :where(.question-item.is-checked .checkbox-visual-container)::after,
body.tool-partial-ui:not(.drama-director-page) :where(.question-item.is-checked .checkbox-visual-container)::after,
body.tool-standard-ui :where(.audio-consent-container input[type="checkbox"]:checked + label)::after,
body.tool-partial-ui:not(.drama-director-page) :where(.audio-consent-container input[type="checkbox"]:checked + label)::after {
  content: "\2713" !important;
}

@media (max-width: 48rem) {
  body.tool-standard-ui :where(
    .choice-card > label,
    .relationship-option > label,
    .duration-option > label,
    .pattern-option > label,
    .option-item > label,
    .context-option > label,
    .storage-choice-item,
    .storage-choice-option,
    .safety-risk-option,
    .question-item
  ),
  body.tool-partial-ui:not(.drama-director-page) :where(
    .choice-card > label,
    .relationship-option > label,
    .duration-option > label,
    .pattern-option > label,
    .option-item > label,
    .context-option > label,
    .storage-choice-item,
    .storage-choice-option,
    .safety-risk-option,
    .question-item
  ) {
    min-height: 3.25rem;
  }
}

/* 2026-07-12: shared tool polish for reference links and standalone CTAs. */
body.tool-standard-ui :where(.evidence-note a, .evidence-note__body a, .evidence-note__text a, .source-link, .reference-link),
body.tool-partial-ui:not(.drama-director-page) :where(.evidence-note a, .evidence-note__body a, .evidence-note__text a, .source-link, .reference-link) {
  min-height: 0;
  display: inline;
  align-items: initial;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary-dark);
  box-shadow: none;
  font-weight: var(--font-weight-semibold, 600);
  line-height: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

body.tool-standard-ui :where(.evidence-note a:hover, .evidence-note__body a:hover, .evidence-note__text a:hover, .source-link:hover, .reference-link:hover),
body.tool-standard-ui :where(.evidence-note a:focus-visible, .evidence-note__body a:focus-visible, .evidence-note__text a:focus-visible, .source-link:focus-visible, .reference-link:focus-visible),
body.tool-partial-ui:not(.drama-director-page) :where(.evidence-note a:hover, .evidence-note__body a:hover, .evidence-note__text a:hover, .source-link:hover, .reference-link:hover),
body.tool-partial-ui:not(.drama-director-page) :where(.evidence-note a:focus-visible, .evidence-note__body a:focus-visible, .evidence-note__text a:focus-visible, .source-link:focus-visible, .reference-link:focus-visible) {
  background: transparent;
  color: var(--color-primary-dark);
  text-decoration-thickness: 0.12em;
}

body.tool-standard-ui :where(
  .intro-action-row,
  .intro-actions,
  .start-actions,
  .card-actions,
  .screen-actions,
  .tool-actions,
  .section-actions,
  .action-buttons,
  .button-group,
  .cta-group,
  .result-actions,
  .result-action-row,
  .result-primary-action,
  .section-top-actions
),
body.tool-partial-ui:not(.drama-director-page) :where(
  .intro-action-row,
  .intro-actions,
  .start-actions,
  .card-actions,
  .screen-actions,
  .tool-actions,
  .section-actions,
  .action-buttons,
  .button-group,
  .cta-group,
  .result-actions,
  .result-action-row,
  .result-primary-action,
  .section-top-actions
) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--tool-gap-sm, 0.75rem);
  text-align: center;
}

body.tool-standard-ui :where(.card-body > .btn, .card-body > a.btn, .card-body > button.btn),
body.tool-partial-ui:not(.drama-director-page) :where(.card-body > .btn, .card-body > a.btn, .card-body > button.btn) {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* 2026-07-13: make sentence-leading emoji as legible as the 6-1 / 6-2 tools. */
body.tool-standard-ui,
body.tool-partial-ui:not(.drama-director-page) {
  --tool-prefix-emoji-size: clamp(1.38rem, 2.2vw, 1.72rem);
  --tool-page-prefix-emoji-size: clamp(1.5rem, calc(0.5rem + 2vw), 2rem);
}

body.tool-standard-ui :where(h1, h2, h3, h4, h5, h6, p) > :is(
  span.emoji,
  span.inline-emoji,
  span.icon,
  span.emoji-icon,
  span.emoji-title,
  span.title-emoji,
  span.domain-icon,
  span.icon-primary,
  span.recommendation-title-icon,
  span.step5-dday-icon,
  span.modal-highlight-icon,
  span[aria-hidden="true"],
  span[role="img"]
):first-child,
body.tool-partial-ui:not(.drama-director-page) :where(h1, h2, h3, h4, h5, h6, p) > :is(
  span.emoji,
  span.inline-emoji,
  span.icon,
  span.emoji-icon,
  span.emoji-title,
  span.title-emoji,
  span.domain-icon,
  span.icon-primary,
  span.recommendation-title-icon,
  span.step5-dday-icon,
  span.modal-highlight-icon,
  span[aria-hidden="true"],
  span[role="img"]
):first-child {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
  font-size: max(var(--tool-prefix-emoji-size), 22px) !important;
  line-height: 1;
  vertical-align: -0.1em;
}

body.tool-standard-ui .page-header h1 > :is(
  span.emoji,
  span.inline-emoji,
  span.icon,
  span.emoji-icon,
  span.emoji-title,
  span.title-emoji,
  span[aria-hidden="true"],
  span[role="img"]
):first-child,
body.tool-partial-ui:not(.drama-director-page) .page-header h1 > :is(
  span.emoji,
  span.inline-emoji,
  span.icon,
  span.emoji-icon,
  span.emoji-title,
  span.title-emoji,
  span[aria-hidden="true"],
  span[role="img"]
):first-child {
  font-size: max(var(--tool-page-prefix-emoji-size), 24px) !important;
}

body.tool-standard-ui :where(.accordion-q-text, .accordion-trigger) > .faq-q-emoji:first-child,
body.tool-partial-ui:not(.drama-director-page) :where(.accordion-q-text, .accordion-trigger) > .faq-q-emoji:first-child {
  inline-size: 2rem;
  min-inline-size: 2rem;
  font-size: max(var(--tool-prefix-emoji-size), 22px) !important;
}

body.tool-standard-ui .page-header h1:not(:has(> span:first-child))::first-letter,
body.tool-partial-ui:not(.drama-director-page) .page-header h1:not(:has(> span:first-child))::first-letter {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
  font-size: max(var(--tool-page-prefix-emoji-size), 24px);
}

/* Keep desktop navigation selection calm and make recovery tools discoverable. */
@media (min-width: 48.0625rem) {
  body .site-chrome-header #emotionMegaMenu .emotion-item[aria-checked="true"],
  body .site-chrome-header #toolsMenu .tab-link[aria-selected="true"] {
    border-left: 0 !important;
    border-inline-start: 0 !important;
    box-shadow: none !important;
  }

  body .site-chrome-header #toolsMenu .tool-card-item a:focus-visible {
    background-color: rgba(74, 108, 140, 0.1) !important;
  }
}

@media (min-width: 48.0625rem) and (any-hover: hover) {
  body .site-chrome-header #toolsMenu .tool-card-item a:hover {
    background-color: rgba(74, 108, 140, 0.1) !important;
  }
}

/* 2026-07-14: interaction semantics.
   Only genuine controls receive the translucent blue cue; reading surfaces stay still. */
body:is(.tool-standard-ui, .tool-partial-ui) :where(
  .card,
  .atm-card,
  .feature-item:not(.aha-choice),
  .feature-card,
  .intro-feature-item,
  .modal-item,
  .result-level-card,
  .action-item-card,
  .coaching-item,
  .intro-analogy-box,
  .mol-pattern-card,
  .mol-info-box,
  .mol-tip-box,
  .strategy-card,
  .result-card,
  .tip-box,
  .podium-step,
  .focus-card,
  .result-card-inner,
  .org-result-details__item,
  .npc-bubble,
  .log-item,
  .history-summary,
  .intro-box,
  .summary-card,
  .trap-item,
  .commandments-box,
  .commandment-item,
  .info-box,
  .disclaimer,
  .example-block,
  .memory-fragment,
  .grid-item,
  .mol-result-card,
  .result-card-item,
  .area-result-item,
  .dialect-example-item,
  .dashboard-card,
  .drama-step,
  .wisdom-item,
  .perception-item,
  .os-analogy-box,
  .final-verdict-box,
  .philosophical-aside,
  .writing-guide,
  .cognitive-cost-box,
  .search-filter-controls,
  .accordion,
  .storage-choice-card,
  .response-choice-card
) {
  /* Keep entrance, open, and result-reveal animation timing intact. */
}

body:is(.tool-standard-ui, .tool-partial-ui) :where(
  .feature-item:not(.aha-choice),
  .feature-card,
  .intro-feature-item,
  .modal-item
):not(:is(button, a, label, summary, [role="button"], [role="radio"], [role="checkbox"], [tabindex])):not(:has(a, button, input, select, textarea, summary, [role="button"], [role="radio"], [role="checkbox"], [tabindex])) {
  background: var(--color-surface, #ffffff) !important;
  border-color: rgba(74, 108, 140, 0.18) !important;
  box-shadow: none !important;
  cursor: default !important;
  transition: none !important;
}

body:is(.tool-standard-ui, .tool-partial-ui) :where(.strong-text, .highlight)::after {
  transition: none !important;
}

body:is(.tool-standard-ui, .tool-partial-ui) :where(
  .result-level-card,
  .action-item-card,
  .grid-item,
  .perception-item
) {
  border-color: rgba(74, 108, 140, 0.18) !important;
}

@media (any-hover: hover) and (pointer: fine) {
  body:is(.tool-standard-ui, .tool-partial-ui) :where(
    .card,
    .atm-card,
    .feature-item:not(.aha-choice),
    .feature-card,
    .intro-feature-item,
    .modal-item,
    .result-level-card,
    .action-item-card,
    .coaching-item,
    .intro-analogy-box,
    .mol-pattern-card,
    .mol-info-box,
    .mol-tip-box,
    .strategy-card,
    .result-card,
    .tip-box,
    .podium-step,
    .focus-card,
    .result-card-inner,
    .org-result-details__item,
    .npc-bubble,
    .log-item,
    .history-summary,
    .intro-box,
    .summary-card,
    .trap-item,
    .commandments-box,
    .commandment-item,
    .info-box,
    .disclaimer,
    .example-block,
    .memory-fragment,
    .grid-item,
    .mol-result-card,
    .result-card-item,
    .area-result-item,
    .dialect-example-item,
    .dashboard-card,
    .drama-step,
    .wisdom-item,
    .perception-item,
    .os-analogy-box,
    .final-verdict-box,
    .philosophical-aside,
    .writing-guide,
    .cognitive-cost-box,
    .search-filter-controls,
    .accordion,
    .storage-choice-card,
    .response-choice-card
  ):hover {
    transform: none !important;
    filter: none !important;
  }

  body:is(.tool-standard-ui, .tool-partial-ui) :where(.strong-text, .highlight):hover::after {
    height: 0.5rem !important;
    background-color: var(--color-primary-light) !important;
    opacity: 0.7 !important;
  }

  body:is(.tool-standard-ui, .tool-partial-ui) :where(.data-table tr, table.data-table tr):hover,
  body:is(.tool-standard-ui, .tool-partial-ui) :where(.data-table tr, table.data-table tr):hover > :is(th, td) {
    background-color: transparent !important;
  }

  body:is(.tool-standard-ui, .tool-partial-ui) table tbody tr:hover,
  body:is(.tool-standard-ui, .tool-partial-ui) table tbody tr:hover > :is(th, td) {
    background-color: transparent !important;
  }

  body:is(.tool-standard-ui, .tool-partial-ui) :where(
    .option-btn,
    .option-button,
    .choice-button,
    .answer-option,
    .choice-option,
    .question-option,
    .option-card,
    .answer-btn,
    .choice-btn,
    .domain-btn,
    .relationship-btn,
    .question-item,
    .context-option,
    .safety-risk-option,
    .storage-option,
    .storage-choice-option,
    .storage-choice-item,
    .rating-option-card,
    .emotion-option,
    .emotion-option-btn,
    .emotion-choice-btn,
    .aha-choice,
    .insight-choice-btn,
    .anchor-choice-btn,
    .action-option,
    .pattern-option,
    .response-choice,
    .action-choice-item,
    .pattern-check-item,
    .checklist-item,
    .timeline-item,
    .tool-nav-btn,
    .body-signal-btn,
    .response-btn,
    .urge-btn,
    .urge-option,
    .sensory-icon,
    .manifesto-content li.interactive,
    .dialogue-message.clickable,
    .dialogue-card-front,
    .template-btn,
    .waveform-tag,
    .filter-btn,
    .bookmark-btn,
    .related-link,
    .pagination-btn,
    .bottom-search-submit,
    .accordion-q,
    .accordion-toggle,
    .next-tool-card,
    .file-label,
    .result-shortcuts button,
    .result-shortcuts a
  ):not(label):not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.selected):not(.is-selected):not(.is-checked):not(.active):not(.answered):not(.correct):not(.incorrect):not([aria-checked="true"]):not([aria-pressed="true"]):not(:has(input:checked)):not(:has(input:disabled)):hover {
    background: var(--interactive-hover-surface) !important;
    border-color: var(--interactive-hover-border) !important;
    box-shadow: var(--choice-shadow, var(--shadow-soft)) !important;
    filter: none !important;
    transform: none !important;
  }

  body:is(.tool-standard-ui, .tool-partial-ui) :where(
    input[type="radio"]:not(:checked):not(:disabled) + label,
    input[type="checkbox"]:not(:checked):not(:disabled) + label,
    label:has(input[type="radio"]:not(:checked):not(:disabled)),
    label:has(input[type="checkbox"]:not(:checked):not(:disabled))
  ):hover {
    background: var(--interactive-hover-surface) !important;
    border-color: var(--interactive-hover-border) !important;
    box-shadow: var(--choice-shadow, var(--shadow-soft)) !important;
    filter: none !important;
    transform: none !important;
  }
}

body:is(.tool-standard-ui, .tool-partial-ui) :where(
  .option-btn,
  .option-button,
  .choice-button,
  .answer-option,
  .choice-option,
  .question-option,
  .option-card,
  .answer-btn,
  .choice-btn,
  .domain-btn,
  .relationship-btn,
  .question-item,
  .context-option,
  .safety-risk-option,
  .storage-option,
  .storage-choice-option,
  .storage-choice-item,
  .rating-option-card,
  .emotion-option,
  .emotion-option-btn,
  .emotion-choice-btn,
  .aha-choice,
  .insight-choice-btn,
  .anchor-choice-btn,
  .action-option,
  .pattern-option,
  .response-choice,
  .action-choice-item,
  .pattern-check-item,
  .checklist-item,
  .timeline-item,
  .tool-nav-btn,
  .body-signal-btn,
  .response-btn,
  .urge-btn,
  .urge-option,
  .sensory-icon,
  .manifesto-content li.interactive,
  .dialogue-message.clickable,
  .dialogue-card-front,
  .template-btn,
  .waveform-tag,
  .filter-btn,
  .bookmark-btn,
  .related-link,
  .pagination-btn,
  .bottom-search-submit,
  .accordion-q,
  .accordion-toggle,
  .next-tool-card,
  .file-label,
  .result-shortcuts button,
  .result-shortcuts a
):not(label):not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.selected):not(.is-selected):not(.is-checked):not(.active):not(.answered):not(.correct):not(.incorrect):not([aria-checked="true"]):not([aria-pressed="true"]):not(:has(input:checked)):not(:has(input:disabled)):focus-visible,
body:is(.tool-standard-ui, .tool-partial-ui) :where(
  input[type="radio"]:not(:checked):not(:disabled):focus-visible + label,
  input[type="checkbox"]:not(:checked):not(:disabled):focus-visible + label,
  label:has(input[type="radio"]:not(:checked):not(:disabled):focus-visible),
  label:has(input[type="checkbox"]:not(:checked):not(:disabled):focus-visible)
) {
  background: var(--interactive-hover-surface) !important;
  border-color: var(--interactive-hover-border) !important;
  box-shadow: var(--choice-shadow, var(--shadow-soft)) !important;
  filter: none !important;
  outline: 2px solid var(--focus-ring-color, #5f8fb3) !important;
  outline-offset: 3px !important;
  transform: none !important;
}

body:is(.tool-standard-ui, .tool-partial-ui) :where(
  input[type="radio"]:focus-visible + label,
  input[type="checkbox"]:focus-visible + label,
  label:has(input[type="radio"]:focus-visible),
  label:has(input[type="checkbox"]:focus-visible)
) {
  outline: 2px solid var(--focus-ring-color, #5f8fb3) !important;
  outline-offset: 3px !important;
}