/* 3-7 마음 블랙박스
   Shared Re:Alive shell with a memo-to-two-lenses interaction at its center. */

body.tool-partial-ui {
  --soul-canvas: #f7f8fa;
  --soul-surface: #ffffff;
  --soul-subtle: #f1f3f4;
  --soul-soft: #f3f6f6;
  --soul-text: #202124;
  --soul-body: #3c4043;
  --soul-muted: #5f6368;
  --soul-brand: var(--brand-primary, #176b74);
  --soul-brand-strong: var(--brand-primary-strong, #12565d);
  --soul-brand-solid: #176b74;
  --soul-brand-solid-strong: #12565d;
  --soul-selected: var(--brand-selected, #eef6f6);
  --soul-info: #f1f6f7;
  --soul-success: #f1f6f2;
  --soul-warning: #faf6ea;
  --soul-danger: #faf2f2;
  --soul-required: #8a3434;
  --soul-plum-note: #f7f3f6;
  --soul-camera: #eef6f6;
  --soul-mind: #f7f3f6;
  --soul-unknown: #f7f5ef;
  --soul-note-board: #f8f6ef;
  --soul-note-green: #eaf4e8;
  --soul-note-pink: #f8e8ed;
  --soul-note-yellow: #fff2c9;
  --soul-radius-control: 0.75rem;
  --soul-radius-card: 1rem;
  --soul-focus: 0 0 0 0.1875rem var(--soul-brand);
  background: var(--soul-canvas);
  color: var(--soul-body);
}

body.tool-partial-ui :is(#pageHeader, #sticky-progress, #mainContent) {
  --color-primary: var(--soul-brand);
  --color-primary-dark: var(--soul-brand-strong);
  --color-primary-light: var(--soul-selected);
  --color-primary-lighter: var(--soul-soft);
  --focus-ring-color: var(--soul-brand);
  --interactive-hover-surface: var(--soul-soft);
}

body.tool-partial-ui *,
body.tool-partial-ui *::before,
body.tool-partial-ui *::after {
  box-sizing: border-box;
}

body.tool-partial-ui :where([hidden]) {
  display: none !important;
}

body.tool-partial-ui :where([inert]) {
  pointer-events: none;
  user-select: none;
}

body.tool-partial-ui :where(h1, h2, h3, h4, p, li, label, legend, summary) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.tool-partial-ui #pageHeader {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(1.35rem, 3vw, 2rem) 1rem;
  border: 0;
  background: var(--soul-surface);
  box-shadow: none;
  text-align: center;
}

body.tool-partial-ui #pageHeader .container {
  width: min(100%, 54rem);
  min-height: 0;
  margin-inline: auto;
  padding: 0;
}

body.tool-partial-ui #pageHeader h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0;
  color: var(--soul-text);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
}

body.tool-partial-ui #pageHeader h1 :is(.emoji, [aria-hidden="true"]):first-child {
  flex: 0 0 auto;
  font-size: clamp(2.15rem, 4vw, 2.65rem);
  line-height: 1;
}

body.tool-partial-ui #pageHeader p {
  max-width: 44rem;
  margin: 0.65rem auto 0;
  color: var(--soul-muted);
  font-size: 1rem;
  line-height: 1.7;
}

body.tool-partial-ui #mainContent {
  width: min(100%, 54rem);
  min-width: 0;
  min-height: 0;
  margin-inline: auto;
  padding: clamp(1rem, 2.6vw, 2rem) 2rem max(2.5rem, env(safe-area-inset-bottom));
}

/* Three-step compact progress */
body.tool-partial-ui #sticky-progress {
  position: sticky;
  top: calc(var(--header-height, 4rem) + env(safe-area-inset-top, 0px));
  z-index: var(--z-sticky, 100);
  width: 100%;
  margin: 0;
  padding: 0.65rem max(1rem, env(safe-area-inset-left)) 0.7rem max(1rem, env(safe-area-inset-right));
  border: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}

body.tool-partial-ui #sticky-progress .compact-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 54rem);
  margin-inline: auto;
}

body.tool-partial-ui #progress-text {
  min-width: 3.25rem;
  color: var(--soul-text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

body.tool-partial-ui #sticky-progress .progress-track {
  display: block;
  width: 100%;
  height: 0.375rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e8ea;
}

body.tool-partial-ui #progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--soul-brand);
  transition: width 180ms ease;
}

body.tool-partial-ui #stickyStepsIndicatorWrapper {
  display: none !important;
}

/* Screen shells */
body.tool-partial-ui #mainContent :is(.tool-card, .section-card, .tool-screen) {
  min-width: 0;
  margin: 0;
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 0;
  border-radius: var(--soul-radius-card);
  background: var(--soul-surface);
  box-shadow: none;
}

body.tool-partial-ui #mainContent :is(.tool-card, .section-card, .tool-screen) + :is(.tool-card, .section-card, .tool-screen) {
  margin-top: 4rem;
}

body.tool-partial-ui #mainContent :is(.screen-heading, .section-heading, .tool-card__heading) {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  margin-bottom: 1.1rem;
}

body.tool-partial-ui #mainContent :is(.screen-heading, .section-heading, .tool-card__heading) > :is(.screen-emoji, .section-emoji, .intro-emoji, [aria-hidden="true"]):first-child {
  flex: 0 0 auto;
  font-size: clamp(2.15rem, 4vw, 2.65rem);
  line-height: 1;
}

body.tool-partial-ui #mainContent :is(.screen-heading, .section-heading, .tool-card__heading) h2 {
  margin: 0;
  color: var(--soul-text);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 750;
  line-height: 1.38;
}

body.tool-partial-ui #mainContent :is(#relation-title, #record-title, #result-title, #scene-facts, #privacy-confirm, #prompt-output, #rel-parent) {
  scroll-margin-top: calc(var(--header-height, 4rem) + 5rem);
  scroll-margin-bottom: 5rem;
}

body.tool-partial-ui #mainContent :is(.screen-heading, .section-heading, .tool-card__heading) p {
  margin: 0.35rem 0 0;
  color: var(--soul-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Temporary compatibility while the compact HTML lands. */
body.tool-partial-ui #mainContent > form > .card {
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: var(--soul-radius-card);
  background: var(--soul-surface);
  box-shadow: none;
}

body.tool-partial-ui #mainContent > form > .card > .card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2rem) 0;
  border: 0;
  background: transparent;
}

body.tool-partial-ui #mainContent > form > .card > .card-header > :is(.emoji, [aria-hidden="true"]):first-child {
  flex: 0 0 auto;
  font-size: clamp(2.15rem, 4vw, 2.65rem);
  line-height: 1;
}

body.tool-partial-ui #mainContent > form > .card > .card-header h2 {
  margin: 0;
  color: var(--soul-text);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.38;
}

body.tool-partial-ui #mainContent > form > .card > .card-body {
  padding: 1rem clamp(1.1rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2rem);
}

/* Compact but inviting intro */
body.tool-partial-ui #mainContent :is(.memory-board, .memory-collage) {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.7rem, 2vw, 1rem);
  margin: 0 0 1rem;
  padding: clamp(1rem, 3vw, 1.45rem);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 0.125rem 0.125rem, rgba(80, 94, 99, 0.1) 0.08rem, transparent 0.09rem) 0 0 / 1.25rem 1.25rem,
    var(--soul-note-board);
}

body.tool-partial-ui #mainContent .memory-fragment {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 5.4rem;
  place-items: center;
  margin: 0;
  padding: 1.15rem 0.8rem 0.8rem;
  border: 0;
  border-radius: 0.35rem;
  background: var(--soul-note-yellow);
  box-shadow: 0 0.35rem 0.9rem rgba(54, 63, 68, 0.13);
  color: var(--soul-body);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  transform: rotate(-1.2deg) !important;
  transform-origin: 50% 10%;
  transition: none;
}

body.tool-partial-ui #mainContent .memory-fragment::before {
  content: "";
  position: absolute;
  top: -0.24rem;
  left: 50%;
  width: 2.2rem;
  height: 0.62rem;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 0.08rem 0.2rem rgba(50, 57, 61, 0.08);
  transform: translateX(-50%) rotate(-2deg);
}

body.tool-partial-ui #mainContent .memory-fragment--one {
  background: var(--soul-note-green);
  transform: rotate(-1.8deg) !important;
}

body.tool-partial-ui #mainContent .memory-fragment--two {
  background: var(--soul-note-pink);
  transform: rotate(1.35deg) !important;
}

body.tool-partial-ui #mainContent .memory-fragment--three {
  background: var(--soul-note-yellow);
  transform: rotate(-0.75deg) !important;
}

body.tool-partial-ui #mainContent .memory-fragment--four {
  background: var(--soul-note-yellow);
  transform: rotate(1.6deg) !important;
}

body.tool-partial-ui #mainContent .memory-fragment--five {
  background: var(--soul-note-green);
  transform: rotate(-1.4deg) !important;
}

body.tool-partial-ui #mainContent .memory-fragment--six {
  background: var(--soul-note-pink);
  transform: rotate(0.9deg) !important;
}

body.tool-partial-ui #mainContent .memory-fragment:is(.fragment-negative, .memory-fragment--negative) {
  background: var(--soul-note-pink);
}

body.tool-partial-ui #mainContent .memory-fragment:is(.fragment-question, .memory-fragment--question) {
  background: var(--soul-note-pink);
}

body.tool-partial-ui #mainContent .memory-fragment:is(.fragment-positive, .memory-fragment--positive) {
  background: var(--soul-note-green);
}

body.tool-partial-ui #mainContent .memory-fragment--interactive {
  width: 100%;
  cursor: pointer;
}

body.tool-partial-ui #mainContent .memory-fragment--interactive > span,
body.tool-partial-ui #mainContent .memory-fragment--interactive > small {
  display: block;
}

body.tool-partial-ui #mainContent .memory-fragment--interactive > small {
  margin-top: 0.35rem;
  color: var(--soul-brand-strong);
  font-size: max(0.75rem, 12px);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

body.tool-partial-ui #mainContent .memory-fragment--interactive.is-open {
  box-shadow:
    inset 0 0 0 0.125rem var(--soul-brand),
    0 0.35rem 0.9rem rgba(54, 63, 68, 0.13);
}

body.tool-partial-ui #mainContent .split-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0.75rem;
  border: 0;
  border-radius: var(--soul-radius-card);
  background: var(--soul-subtle);
  animation: split-demo-reveal 180ms ease-out both;
}

body.tool-partial-ui #mainContent .split-demo__item {
  min-width: 0;
  padding: 0.8rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-surface);
}

body.tool-partial-ui #mainContent .split-demo__item--camera {
  background: var(--soul-camera);
}

body.tool-partial-ui #mainContent .split-demo__item--mind {
  background: var(--soul-mind);
}

body.tool-partial-ui #mainContent .split-demo__item--unknown {
  background: var(--soul-unknown);
}

body.tool-partial-ui #mainContent .split-demo__item strong {
  display: block;
  color: var(--soul-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

body.tool-partial-ui #mainContent .split-demo__item p {
  margin: 0.3rem 0 0;
  color: var(--soul-body);
  font-size: 0.87rem;
  line-height: 1.55;
}

@keyframes split-demo-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.tool-partial-ui #mainContent :is(.intro-lead, .intro-copy, .intro-summary, .intro-quote) {
  max-width: 46rem;
  margin: 0 auto 0.9rem;
  color: var(--soul-body);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
}

body.tool-partial-ui #mainContent :is(.intro-lead, .intro-copy, .intro-summary, .intro-quote) p {
  margin: 0.25rem 0;
}

body.tool-partial-ui #mainContent :is(.intro-note, .intro-privacy, .intro-helper, .soul-warm-note) {
  margin: 0.85rem 0;
  padding: 0.8rem 0.95rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-info);
  box-shadow: none;
  color: var(--soul-body);
  font-size: 0.92rem;
  line-height: 1.65;
  text-align: center;
}

body.tool-partial-ui #mainContent .scope-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.85rem 0;
  padding: 0.8rem 0.95rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-info);
  box-shadow: none;
  color: var(--soul-body);
}

body.tool-partial-ui #mainContent .scope-note > [aria-hidden="true"] {
  flex: 0 0 auto;
  font-size: 1.55rem;
  line-height: 1;
}

body.tool-partial-ui #mainContent .scope-note strong {
  display: block;
  color: var(--soul-text);
  line-height: 1.5;
}

body.tool-partial-ui #mainContent .scope-note p {
  margin: 0.2rem 0 0;
  color: var(--soul-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

body.tool-partial-ui #mainContent :is(.intro-feature-list, .intro-features, .intro-feature-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.9rem 0;
}

body.tool-partial-ui #mainContent :is(.intro-feature, .intro-feature-item) {
  min-width: 0;
  padding: 0.75rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle);
  box-shadow: none;
  text-align: center;
}

body.tool-partial-ui #mainContent :is(.intro-feature, .intro-feature-item) > :is(.emoji, .icon, [aria-hidden="true"]):first-child {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.85rem;
  line-height: 1;
}

body.tool-partial-ui #mainContent :is(.intro-feature, .intro-feature-item) strong {
  display: block;
  color: var(--soul-text);
  font-size: 0.93rem;
}

body.tool-partial-ui #mainContent :is(.intro-feature, .intro-feature-item) p {
  margin: 0.25rem 0 0;
  color: var(--soul-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

body.tool-partial-ui #mainContent .button-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

/* Form rhythm */
body.tool-partial-ui #mainContent :where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.tool-partial-ui #mainContent :is(.form-group, .record-field) {
  min-width: 0;
  margin: 0 0 1.25rem;
}

body.tool-partial-ui #mainContent :is(.form-label, .record-label, legend) {
  display: block;
  margin: 0 0 0.55rem;
  color: var(--soul-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
}

body.tool-partial-ui #mainContent :is(.field-helper, .field-hint, .record-helper, .section-description) {
  margin: 0.3rem 0 0.7rem;
  color: var(--soul-muted);
  font-size: max(0.875rem, 14px);
  line-height: 1.65;
}

body.tool-partial-ui #mainContent :is(.textarea-counter, .input-meta, .textarea-meta) {
  margin-top: 0.35rem;
  color: var(--soul-muted);
  font-size: max(0.8125rem, 13px);
  text-align: right;
}

body.tool-partial-ui #mainContent :is(.record-grid, .record-split-grid, .record-field-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
}

body.tool-partial-ui #mainContent .record-lens-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
  margin: 1rem 0 1.4rem;
}

body.tool-partial-ui #mainContent .record-lens {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 0;
  border-radius: var(--soul-radius-card);
  box-shadow: none;
}

body.tool-partial-ui #mainContent .record-lens--camera {
  background: var(--soul-camera);
}

body.tool-partial-ui #mainContent .record-lens--mind {
  background: var(--soul-mind);
}

body.tool-partial-ui #mainContent .record-lens textarea {
  background: var(--soul-surface);
}

body.tool-partial-ui #mainContent .required-label {
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--soul-required);
  font-size: max(0.8125rem, 13px);
  font-weight: 700;
  vertical-align: 0.08em;
}

body.tool-partial-ui #mainContent .record-choice-sections {
  display: grid;
  gap: 1.35rem;
  margin: 0 0 1.25rem;
}

body.tool-partial-ui #mainContent .record-choice-group {
  margin: 0;
}

body.tool-partial-ui #mainContent .memory-source-group {
  margin-bottom: 1.35rem;
  padding: 1rem;
  border-radius: var(--soul-radius-card);
  background: var(--soul-soft);
}

body.tool-partial-ui #mainContent .memory-source-grid .choice > label {
  background: var(--soul-surface);
}

body.tool-partial-ui #mainContent .memory-source-clear {
  display: flex;
  width: fit-content;
  margin: 0.75rem auto 0;
}

body.tool-partial-ui #mainContent #memory-source-legend:focus-visible {
  outline: 0.1875rem solid var(--soul-brand);
  outline-offset: 0.1875rem;
}

body.tool-partial-ui #mainContent .compact-choice-grid .choice > label {
  min-height: 3.5rem;
  padding-block: 0.65rem;
}

body.tool-partial-ui #mainContent .compact-choice-grid .choice .choice-icon {
  font-size: 1.55rem;
}

body.tool-partial-ui #mainContent .textarea-meta {
  display: flex;
  min-height: 1.5rem;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.75rem;
}

body.tool-partial-ui #mainContent .textarea-meta .field-error {
  flex: 1 1 auto;
  margin: 0;
  text-align: left;
}

body.tool-partial-ui #mainContent .optional-label {
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--soul-muted);
  font-size: max(0.8125rem, 13px);
  font-weight: 600;
  vertical-align: 0.08em;
}

body.tool-partial-ui #mainContent :is(.record-field--wide, .record-field-wide, .record-grid__wide) {
  grid-column: 1 / -1;
}

body.tool-partial-ui #mainContent :is(textarea, input[type="text"], input[type="search"], select) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle);
  box-shadow: none;
  color: var(--soul-body);
  font: inherit;
  font-size: 1rem;
  line-height: 1.7;
}

body.tool-partial-ui #mainContent textarea {
  min-height: 8rem;
  padding: 0.9rem 1rem;
  resize: vertical;
}

body.tool-partial-ui #mainContent :is(input[type="text"], input[type="search"], select) {
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
}

body.tool-partial-ui #mainContent :is(textarea, input[type="text"], input[type="search"], select)::placeholder {
  color: #73777b;
  opacity: 1;
}

body.tool-partial-ui #mainContent :is(textarea, input[type="text"], input[type="search"], select):focus-visible {
  outline: 0.1875rem solid var(--soul-brand);
  outline-offset: 0.125rem;
  background: var(--soul-surface);
  box-shadow: none;
}

body.tool-partial-ui #mainContent :is(.record-details, details) {
  margin: 1rem 0;
  padding: 0;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle);
  box-shadow: none;
}

body.tool-partial-ui #mainContent :is(.record-details, details) > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-radius: inherit;
  color: var(--soul-text);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

body.tool-partial-ui #mainContent :is(.record-details, details) > summary::-webkit-details-marker {
  display: none;
}

body.tool-partial-ui #mainContent :is(.record-details, details) > summary::after {
  margin-left: auto;
  color: var(--soul-brand);
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
}

body.tool-partial-ui #mainContent :is(.record-details, details)[open] > summary::after {
  content: "−";
}

body.tool-partial-ui #mainContent :is(.record-details, details) > :not(summary) {
  margin-inline: 0.9rem;
}

body.tool-partial-ui #mainContent :is(.record-details, details) > :last-child {
  margin-bottom: 0.9rem;
}

body.tool-partial-ui #mainContent .optional-details {
  background: var(--soul-subtle);
}

body.tool-partial-ui #mainContent .record-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 1rem 0;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-info);
  box-shadow: none;
}

body.tool-partial-ui #mainContent .record-note > [aria-hidden="true"] {
  flex: 0 0 auto;
  font-size: 1.65rem;
  line-height: 1;
}

body.tool-partial-ui #mainContent .record-note p {
  margin: 0;
  color: var(--soul-body);
  font-size: 0.92rem;
  line-height: 1.65;
}

body.tool-partial-ui #mainContent .safety-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 1rem;
  border: 0;
  border-radius: var(--soul-radius-card);
  background: var(--soul-warning);
  box-shadow: none;
  color: var(--soul-body);
}

body.tool-partial-ui #mainContent .safety-notice__icon {
  flex: 0 0 auto;
  font-size: 1.7rem;
  line-height: 1;
}

body.tool-partial-ui #mainContent .safety-notice > div {
  min-width: 0;
}

body.tool-partial-ui #mainContent .safety-notice h3 {
  margin: 0;
  color: var(--soul-text);
  font-size: 1.05rem;
  line-height: 1.5;
}

body.tool-partial-ui #mainContent .safety-notice p {
  margin: 0.35rem 0 0;
  color: var(--soul-body);
  font-size: max(0.9rem, 14px);
  line-height: 1.65;
}

body.tool-partial-ui #mainContent .safety-notice__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

body.tool-partial-ui #mainContent .safety-notice__links .btn {
  min-height: 44px;
  margin: 0;
}

body.tool-partial-ui #mainContent .safety-notice__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--soul-brand);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

body.tool-partial-ui #mainContent .safety-notice__link:focus-visible {
  outline: 0.1875rem solid var(--soul-brand);
  outline-offset: 0.1875rem;
}

/* Native choices: semantics stay native, browser circles do not. */
.relationship-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

body.tool-partial-ui #mainContent .relationship-grid .choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option, .choice, .option-item) {
  position: relative;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option, .choice, .option-item) > input:is([type="radio"], [type="checkbox"]),
body.tool-partial-ui #mainContent label:is(.relationship-choice, .choice) > input:is([type="radio"], [type="checkbox"]) {
  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;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}

body.tool-partial-ui #mainContent :is(.relationship-grid, .relationship-selector) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: 0;
}

body.tool-partial-ui #mainContent .relationship-grid .choice > label {
  min-height: 7rem;
  justify-content: center;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem 2.4rem;
  text-align: center;
}

body.tool-partial-ui #mainContent .relationship-grid .choice .choice-icon {
  flex: 0 0 auto;
  font-size: clamp(2rem, 4vw, 2.45rem);
  line-height: 1;
}

body.tool-partial-ui #mainContent .relationship-grid .choice input:checked + label {
  background: var(--soul-selected);
  box-shadow: inset 0 0 0 0.125rem rgba(23, 107, 116, 0.24);
  color: var(--soul-text);
  font-weight: 700;
}

body.tool-partial-ui #mainContent .relationship-grid .choice input:checked + label::after {
  color: var(--soul-brand);
}

body.tool-partial-ui #mainContent .relationship-grid .choice input:focus-visible + label {
  outline: 0.1875rem solid var(--soul-brand);
  outline-offset: 0.1875rem;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option) > label,
body.tool-partial-ui #mainContent label.relationship-choice {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 7rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem 2.4rem 0.9rem 0.9rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle);
  box-shadow: none;
  color: var(--soul-text);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms ease;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option) > label > :is(.choice-emoji, .icon, [aria-hidden="true"]):first-child,
body.tool-partial-ui #mainContent label.relationship-choice > :is(.choice-emoji, .icon, [aria-hidden="true"]):first-of-type {
  flex: 0 0 auto;
  font-size: clamp(2rem, 4vw, 2.45rem);
  line-height: 1;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option) > label::after,
body.tool-partial-ui #mainContent label.relationship-choice::after {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  color: transparent;
  content: "✓";
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option):has(input[type="radio"]:checked) > label,
body.tool-partial-ui #mainContent label.relationship-choice:has(input[type="radio"]:checked) {
  background: var(--soul-selected);
  box-shadow: inset 0 0 0 0.125rem rgba(23, 107, 116, 0.24);
  color: var(--soul-text);
  font-weight: 750;
}

/* Legacy relationship checkboxes keep an unmistakable square until the
   single-choice HTML contract replaces them. */
body.tool-partial-ui #mainContent .relationship-option:has(input[type="checkbox"]) > label::after {
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  border: 0.125rem solid #7a8084;
  border-radius: 0.25rem;
  background: var(--soul-surface);
  color: transparent;
  font-size: 0.82rem;
}

body.tool-partial-ui #mainContent .relationship-option:has(input[type="checkbox"]:checked) > label {
  background: var(--soul-selected);
  box-shadow: inset 0 0 0 0.125rem rgba(23, 107, 116, 0.24);
  font-weight: 750;
}

body.tool-partial-ui #mainContent .relationship-option:has(input[type="checkbox"]:checked) > label::after {
  border-color: var(--soul-brand-solid);
  background: var(--soul-brand-solid);
  color: #ffffff;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option):has(input[type="radio"]:checked) > label::after,
body.tool-partial-ui #mainContent label.relationship-choice:has(input[type="radio"]:checked)::after {
  color: var(--soul-brand);
}

body.tool-partial-ui #mainContent :is(.choice, .option-item) > label,
body.tool-partial-ui #mainContent label.choice {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 3.75rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 2.75rem 0.75rem 0.85rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle);
  box-shadow: none;
  color: var(--soul-body);
  font-size: 0.98rem;
  line-height: 1.55;
  cursor: pointer;
  transition: background-color 150ms ease;
}

body.tool-partial-ui #mainContent :is(.choice, .option-item) > label > :is(.choice-emoji, .icon, [aria-hidden="true"]):first-child,
body.tool-partial-ui #mainContent label.choice > :is(.choice-emoji, .icon, [aria-hidden="true"]):first-of-type {
  flex: 0 0 auto;
  font-size: clamp(1.9rem, 3vw, 2.25rem);
  line-height: 1;
}

body.tool-partial-ui #mainContent :is(.choice, .option-item):has(input:checked) > label,
body.tool-partial-ui #mainContent label.choice:has(input:checked) {
  background: var(--soul-selected);
  box-shadow: inset 0 0 0 0.125rem rgba(23, 107, 116, 0.24);
  color: var(--soul-text);
  font-weight: 700;
}

/* Radio: small unenclosed check. */
body.tool-partial-ui #mainContent :is(.choice, .option-item):has(input[type="radio"]) > label::after,
body.tool-partial-ui #mainContent label.choice:has(input[type="radio"])::after {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  color: transparent;
  content: "✓";
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

body.tool-partial-ui #mainContent :is(.choice, .option-item):has(input[type="radio"]:checked) > label::after,
body.tool-partial-ui #mainContent label.choice:has(input[type="radio"]:checked)::after {
  color: var(--soul-brand);
}

/* Checkbox: square shape communicates multiple selection. */
body.tool-partial-ui #mainContent :is(.choice, .option-item):has(input[type="checkbox"]) > label::after,
body.tool-partial-ui #mainContent label.choice:has(input[type="checkbox"])::after {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  display: grid;
  width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  border: 0.125rem solid #7a8084;
  border-radius: 0.25rem;
  background: var(--soul-surface);
  color: transparent;
  content: "✓";
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

body.tool-partial-ui #mainContent :is(.choice, .option-item):has(input[type="checkbox"]:checked) > label::after,
body.tool-partial-ui #mainContent label.choice:has(input[type="checkbox"]:checked)::after {
  border-color: var(--soul-brand-solid);
  background: var(--soul-brand-solid);
  color: #ffffff;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option, .choice, .option-item) > input:is([type="radio"], [type="checkbox"]):focus-visible + label,
body.tool-partial-ui #mainContent label:is(.relationship-choice, .choice):has(input:is([type="radio"], [type="checkbox"]):focus-visible) {
  outline: 0.1875rem solid var(--soul-brand) !important;
  outline-offset: 0.1875rem !important;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option, .choice, .option-item):has(input:disabled) > label,
body.tool-partial-ui #mainContent label:is(.relationship-choice, .choice):has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option, .choice, .option-item).is-error > label,
body.tool-partial-ui #mainContent [aria-invalid="true"] :is(.relationship-choice, .relationship-option, .choice, .option-item) > label {
  background: var(--soul-danger);
  box-shadow: inset 0 0 0 0.125rem rgba(145, 55, 55, 0.35);
}

body.tool-partial-ui #mainContent :is(.choice-grid, .pattern-grid, .pattern-selector) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: 0;
}

body.tool-partial-ui #mainContent :is(.pattern-title, .choice-title) {
  color: inherit;
  font-weight: 700;
}

body.tool-partial-ui #mainContent :is(.pattern-desc, .choice-description) {
  display: block;
  margin-top: 0.1rem;
  color: var(--soul-muted);
  font-size: max(0.875rem, 14px);
  font-weight: 500;
  line-height: 1.5;
}

body.tool-partial-ui #mainContent :is(.choice, .option-item):has(input:checked) :is(.pattern-desc, .choice-description) {
  color: var(--soul-body);
}

body.tool-partial-ui #mainContent .validation-dummy {
  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;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}

body.tool-partial-ui #mainContent :is(.field-error, .text-danger, .submission-error):not(:empty) {
  display: block;
  margin-top: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: 0.6rem;
  background: var(--soul-danger);
  color: #7a3030;
  font-size: max(0.875rem, 14px);
  font-weight: 650;
  line-height: 1.5;
}

/* Actions */
body.tool-partial-ui #mainContent :is(.btn, button, a.btn) {
  min-width: 0;
  min-height: 44px;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  box-shadow: none;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  transform: none;
}

body.tool-partial-ui #mainContent :is(.btn-primary, .primary-action) {
  background: var(--soul-brand-solid);
  color: #ffffff;
}

body.tool-partial-ui #mainContent :is(.btn-secondary, .secondary-action) {
  background: var(--soul-subtle);
  color: var(--soul-text);
}

body.tool-partial-ui #mainContent :is(.btn--text, .text-action, .disclosure-action) {
  background: transparent;
  color: var(--soul-muted);
  text-decoration: none;
}

body.tool-partial-ui #mainContent :is(.btn, button, a.btn):focus-visible,
body.tool-partial-ui #mainContent :is(details > summary, .next-tool-card):focus-visible {
  outline: 0.1875rem solid var(--soul-brand) !important;
  outline-offset: 0.1875rem !important;
  box-shadow: none !important;
}

body.tool-partial-ui #mainContent :is(.btn, button, a.btn):disabled,
body.tool-partial-ui #mainContent :is(.btn, button, a.btn)[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Results: no outer result frame. */
.result-standard {
  border: 0;
}

body.tool-partial-ui #result-screen,
body.tool-partial-ui #success-message {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--soul-body);
}

body.tool-partial-ui #result-screen :is(.result-summary, .result-note, .result-standard, .result-protective, .ai-prompt-details, .next-tools-section) {
  min-width: 0;
  margin: 0 0 1rem;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 0 !important;
  border-radius: var(--soul-radius-card);
  background: var(--soul-surface);
  box-shadow: none !important;
}

body.tool-partial-ui #result-screen .result-note {
  background: var(--soul-info);
}

body.tool-partial-ui #result-screen .result-standard {
  border: 0 !important;
  background: var(--soul-success);
  box-shadow: none !important;
}

body.tool-partial-ui #result-screen .result-protective {
  background: var(--soul-selected);
}

body.tool-partial-ui #result-screen :is(.result-summary, .result-note, .result-standard, .result-protective, .next-tools-section) > h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.8rem;
  color: var(--soul-text);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 750;
  line-height: 1.45;
}

body.tool-partial-ui #result-screen :is(.result-summary, .result-note, .result-standard, .result-protective, .next-tools-section) > h3 > [aria-hidden="true"] {
  flex: 0 0 auto;
  font-size: 1.7rem;
  line-height: 1;
}

body.tool-partial-ui #result-screen :is(.result-note, .result-standard, .result-protective) > p {
  margin: 0;
  color: var(--soul-body);
  line-height: 1.7;
}

body.tool-partial-ui #result-screen .blackbox-record__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.9rem;
}

body.tool-partial-ui #result-screen .blackbox-record__header h3 {
  margin: 0;
  color: var(--soul-text);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.45;
}

body.tool-partial-ui #result-screen .blackbox-record__meta {
  display: grid;
  gap: 0.2rem;
  text-align: right;
}

body.tool-partial-ui #result-screen :is(.blackbox-record__relationship, .blackbox-record__source) {
  margin: 0;
  color: var(--soul-muted);
  font-size: max(0.875rem, 14px);
  line-height: 1.5;
}

body.tool-partial-ui #result-screen :is(.blackbox-record__relationship, .blackbox-record__source) strong {
  color: var(--soul-text);
}

body.tool-partial-ui #result-screen .result-lens-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

body.tool-partial-ui #result-screen .result-lens {
  min-width: 0;
  padding: 0.9rem;
  border: 0;
  border-radius: var(--soul-radius-control);
}

body.tool-partial-ui #result-screen .result-lens--camera {
  background: var(--soul-camera);
}

body.tool-partial-ui #result-screen .result-lens--mind {
  background: var(--soul-mind);
}

body.tool-partial-ui #result-screen :is(.result-lens, .result-chip-row, .result-changed) h4 {
  margin: 0 0 0.45rem;
  color: var(--soul-text);
  font-size: 0.98rem;
  line-height: 1.5;
}

body.tool-partial-ui #result-screen .result-lens p,
body.tool-partial-ui #result-screen .result-changed p {
  margin: 0;
  color: var(--soul-body);
  line-height: 1.7;
  white-space: pre-wrap;
}

body.tool-partial-ui #result-screen .result-lens .result-lens__note {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  color: var(--soul-muted);
  font-size: max(0.875rem, 14px);
  line-height: 1.6;
  white-space: normal;
}

body.tool-partial-ui #result-screen :is(.result-chip-row, .result-changed) {
  margin-top: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle);
}

body.tool-partial-ui #result-screen .result-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.tool-partial-ui #result-screen .result-chip-list li {
  padding: 0.35rem 0.6rem;
  border-radius: 0.55rem;
  background: var(--soul-surface);
  color: var(--soul-body);
  font-size: max(0.875rem, 14px);
  line-height: 1.5;
}

body.tool-partial-ui #result-screen .result-summary dl {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

body.tool-partial-ui #result-screen .result-summary dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.32fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: start;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle);
  box-shadow: none;
}

body.tool-partial-ui #result-screen .result-summary :is(dt, dd) {
  min-width: 0;
  margin: 0;
  line-height: 1.65;
}

body.tool-partial-ui #result-screen .result-summary dt {
  color: var(--soul-text);
  font-weight: 700;
}

body.tool-partial-ui #result-screen .result-summary dd {
  color: var(--soul-body);
  white-space: pre-wrap;
}

body.tool-partial-ui #result-screen .ai-prompt-details {
  padding: 0;
  background: var(--soul-surface);
}

body.tool-partial-ui #result-screen .ai-prompt-details > summary {
  min-height: 44px;
  padding: 0.85rem 1rem;
  background: var(--soul-subtle);
}

body.tool-partial-ui #result-screen .ai-prompt-details[open] > summary {
  background: var(--soul-selected);
}

body.tool-partial-ui #result-screen .ai-prompt-body {
  padding: 1rem;
}

body.tool-partial-ui #result-screen .ai-prompt-body > :first-child {
  margin-top: 0;
}

body.tool-partial-ui #result-screen .privacy-confirm {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1rem 0;
  padding: 0.85rem 0.9rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle);
  box-shadow: none;
}

body.tool-partial-ui #result-screen .privacy-confirm input[type="checkbox"] {
  position: static;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  margin: 0.2rem 0 0;
  border-radius: 0.22rem;
  accent-color: var(--soul-brand);
}

body.tool-partial-ui #result-screen .privacy-confirm input[type="checkbox"]:focus-visible {
  outline: 0.1875rem solid var(--soul-brand);
  outline-offset: 0.1875rem;
}

body.tool-partial-ui #result-screen .privacy-confirm label {
  color: var(--soul-body);
  font-size: max(0.875rem, 14px);
  line-height: 1.65;
  cursor: pointer;
}

body.tool-partial-ui #result-screen .privacy-confirm:has(input:checked) {
  background: var(--soul-selected);
}

body.tool-partial-ui #result-screen .external-trace-note {
  margin: 0.85rem 0 0;
  padding: 0.85rem 0.9rem;
  border-radius: var(--soul-radius-control);
  background: var(--soul-warning);
  color: var(--soul-body);
  font-size: max(0.875rem, 14px);
  line-height: 1.65;
}

body.tool-partial-ui #result-screen .external-trace-note strong {
  color: var(--soul-text);
}

body.tool-partial-ui #result-screen .ai-output-checklist {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--soul-radius-control);
  background: var(--soul-info);
}

body.tool-partial-ui #result-screen .ai-output-checklist h4 {
  margin: 0;
  color: var(--soul-text);
  font-size: 1rem;
  line-height: 1.5;
}

body.tool-partial-ui #result-screen .ai-output-checklist ul {
  display: grid;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
  padding-left: 1.25rem;
  color: var(--soul-body);
  font-size: max(0.875rem, 14px);
  line-height: 1.6;
}

.next-tools-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

body.tool-partial-ui #result-screen .next-tools-section {
  background: var(--soul-surface);
}

body.tool-partial-ui #result-screen .result-actions {
  margin-top: 1.1rem;
}

body.tool-partial-ui #result-screen .result-hero,
body.tool-partial-ui #success-message .result-hero {
  margin: 0 0 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 0;
  border-radius: var(--soul-radius-card);
  background: var(--soul-surface);
  box-shadow: none;
  text-align: center;
}

body.tool-partial-ui #result-screen .result-hero :is(.result-emoji, .success-icon) {
  display: block;
  margin-bottom: 0.55rem;
  font-size: clamp(3rem, 7vw, 4.25rem);
  line-height: 1;
}

body.tool-partial-ui #result-screen :is(.result-title, h2),
body.tool-partial-ui #success-message :is(.result-title, .success-title) {
  margin: 0;
  color: var(--soul-text);
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.38;
}

body.tool-partial-ui #result-screen .result-hero p,
body.tool-partial-ui #success-message .result-hero p {
  max-width: 44rem;
  margin: 0.65rem auto 0;
  color: var(--soul-muted);
  line-height: 1.7;
}

body.tool-partial-ui #result-screen .result-panel,
body.tool-partial-ui #success-message .result-panel {
  margin: 0 0 1rem;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 0;
  border-radius: var(--soul-radius-card);
  background: var(--soul-surface);
  box-shadow: none;
}

body.tool-partial-ui #result-screen .result-panel > :first-child,
body.tool-partial-ui #success-message .result-panel > :first-child {
  margin-top: 0;
}

body.tool-partial-ui #result-screen .result-panel > :last-child,
body.tool-partial-ui #success-message .result-panel > :last-child {
  margin-bottom: 0;
}

body.tool-partial-ui #result-screen :is(.result-row, .result-optional-row),
body.tool-partial-ui #success-message :is(.result-row, .result-optional-row) {
  display: grid;
  grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: start;
  margin: 0.65rem 0;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle);
  box-shadow: none;
}

body.tool-partial-ui #result-screen :is(.result-row, .result-optional-row) > :first-child,
body.tool-partial-ui #success-message :is(.result-row, .result-optional-row) > :first-child {
  color: var(--soul-text);
  font-weight: 700;
}

body.tool-partial-ui #result-screen :is(.result-row, .result-optional-row) > :last-child,
body.tool-partial-ui #success-message :is(.result-row, .result-optional-row) > :last-child {
  min-width: 0;
  color: var(--soul-body);
}

body.tool-partial-ui #result-screen .today-standard,
body.tool-partial-ui #success-message .today-standard {
  margin: 1rem 0;
  padding: 1rem;
  border: 0 !important;
  border-radius: var(--soul-radius-control);
  background: var(--soul-success);
  box-shadow: none;
}

body.tool-partial-ui #result-screen .ai-prompt-panel,
body.tool-partial-ui #success-message .ai-prompt-panel {
  margin: 1rem 0;
  padding: 1rem;
  border: 0;
  border-radius: var(--soul-radius-card);
  background: var(--soul-info);
  box-shadow: none;
}

body.tool-partial-ui #result-screen .ai-prompt-panel textarea,
body.tool-partial-ui #success-message .ai-prompt-panel textarea {
  min-height: 12rem;
  background: var(--soul-surface);
}

body.tool-partial-ui :is(.next-tool-list, .next-tool-grid) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.7rem;
  width: 100%;
  min-width: 0;
  margin: 0;
}

body.tool-partial-ui :is(#result-screen, #success-message) .next-tool-card {
  display: block;
  min-width: 0;
  min-height: 4.4rem;
  padding: 0.9rem 1rem;
  border: 0 !important;
  border-radius: var(--soul-radius-control);
  background: var(--soul-subtle) !important;
  box-shadow: none !important;
  color: var(--soul-body) !important;
  text-decoration: none;
  transition: background-color 150ms ease;
}

body.tool-partial-ui :is(#result-screen, #success-message) .next-tool-card strong,
body.tool-partial-ui :is(#result-screen, #success-message) .next-tool-card span {
  display: block;
  color: inherit !important;
}

body.tool-partial-ui :is(#result-screen, #success-message) .next-tool-card strong {
  color: var(--soul-text) !important;
  font-size: 1rem;
}

body.tool-partial-ui :is(#result-screen, #success-message) .next-tool-card span {
  margin-top: 0.25rem;
  color: var(--soul-muted) !important;
  font-size: max(0.875rem, 14px);
  line-height: 1.55;
}

/* Shared, non-persistent feedback */
body.tool-partial-ui .toast {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--z-toast, 1100);
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: var(--soul-radius-control);
  background: var(--soul-text);
  box-shadow: none;
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Hover belongs only to interactive controls on capable desktop pointers. */
@media (hover: hover) and (pointer: fine) {
  body.tool-partial-ui #mainContent .memory-fragment--interactive:hover {
    background: var(--soul-selected);
  }

  body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option) > label:hover,
  body.tool-partial-ui #mainContent label.relationship-choice:hover,
  body.tool-partial-ui #mainContent :is(.choice, .option-item) > label:hover,
  body.tool-partial-ui #mainContent label.choice:hover,
  body.tool-partial-ui #mainContent :is(.record-details, details) > summary:hover {
    background: var(--soul-soft);
  }

  body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option, .choice, .option-item):has(input:checked) > label:hover,
  body.tool-partial-ui #mainContent label:is(.relationship-choice, .choice):has(input:checked):hover {
    background: var(--soul-selected);
  }

  body.tool-partial-ui #mainContent :is(.btn-primary, .primary-action):hover:not(:disabled) {
    background: var(--soul-brand-strong);
    color: #ffffff;
  }

  body.tool-partial-ui #mainContent :is(.btn-secondary, .secondary-action, .btn--text, .text-action, .disclosure-action):hover:not(:disabled) {
    background: var(--soul-soft);
    color: var(--soul-text);
  }

  body.tool-partial-ui :is(#result-screen, #success-message) .next-tool-card:hover {
    background: var(--soul-soft) !important;
    color: var(--soul-text) !important;
  }

}

/* Tablet and compact desktop */
@media (max-width: 64rem) {
  body.tool-partial-ui #mainContent {
    padding-inline: 1.5rem;
  }
}

@media (max-width: 48rem) {
  body.tool-partial-ui #pageHeader {
    padding-block: 1.2rem;
  }

  body.tool-partial-ui #mainContent {
    padding-top: 1rem;
  }

  body.tool-partial-ui #mainContent :is(.relationship-grid, .relationship-selector) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.tool-partial-ui #mainContent :is(.record-grid, .record-split-grid, .record-field-grid) {
    grid-template-columns: 1fr;
  }

  body.tool-partial-ui #mainContent .record-lens-grid,
  body.tool-partial-ui #result-screen .result-lens-pair {
    grid-template-columns: 1fr;
  }

  body.tool-partial-ui #mainContent :is(.record-field--wide, .record-field-wide, .record-grid__wide) {
    grid-column: auto;
  }

  body.tool-partial-ui #result-screen :is(.result-row, .result-optional-row),
  body.tool-partial-ui #success-message :is(.result-row, .result-optional-row) {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  body.tool-partial-ui #result-screen .result-summary dl > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* 360/390 mobile */
@media (max-width: 30rem) {
  body.tool-partial-ui #pageHeader {
    padding: 1rem;
  }

  body.tool-partial-ui #pageHeader h1 {
    font-size: clamp(1.65rem, 8vw, 2rem);
  }

  body.tool-partial-ui #pageHeader h1 :is(.emoji, [aria-hidden="true"]):first-child {
    font-size: 2.25rem;
  }

  body.tool-partial-ui #pageHeader p {
    margin-top: 0.45rem;
    font-size: 0.94rem;
    line-height: 1.6;
  }

  body.tool-partial-ui #mainContent {
    padding: 0.85rem 1rem max(2rem, env(safe-area-inset-bottom));
  }

  body.tool-partial-ui #sticky-progress {
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
  }

  body.tool-partial-ui #mainContent :is(.tool-card, .section-card, .tool-screen) {
    padding: 1rem;
  }

  body.tool-partial-ui #mainContent > form > .card > .card-header {
    padding: 1rem 1rem 0;
  }

  body.tool-partial-ui #mainContent > form > .card > .card-body {
    padding: 0.85rem 1rem 1rem;
  }

  body.tool-partial-ui #mainContent :is(.screen-heading, .section-heading, .tool-card__heading),
  body.tool-partial-ui #mainContent > form > .card > .card-header {
    gap: 0.65rem;
    margin-bottom: 0.85rem;
  }

  body.tool-partial-ui #mainContent :is(.screen-heading, .section-heading, .tool-card__heading) > :is(.screen-emoji, .section-emoji, .intro-emoji, [aria-hidden="true"]):first-child,
  body.tool-partial-ui #mainContent > form > .card > .card-header > :is(.emoji, [aria-hidden="true"]):first-child {
    font-size: 2.15rem;
  }

  body.tool-partial-ui #mainContent :is(.memory-board, .memory-collage) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.8rem;
  }

  body.tool-partial-ui #mainContent .memory-fragment {
    min-height: 4.6rem;
    padding: 1rem 0.55rem 0.65rem;
    border-radius: 0.3rem;
    font-size: 0.82rem;
    line-height: 1.4;
  }

  body.tool-partial-ui #mainContent .memory-fragment--interactive > small {
    font-size: max(0.7rem, 12px);
  }

  body.tool-partial-ui #mainContent .split-demo {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.6rem;
  }

  body.tool-partial-ui #mainContent .record-lens {
    padding: 0.8rem;
  }

  body.tool-partial-ui #result-screen .blackbox-record__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

  body.tool-partial-ui #result-screen .blackbox-record__meta {
    text-align: left;
  }

  body.tool-partial-ui #mainContent .memory-source-group,
  body.tool-partial-ui #mainContent .safety-notice,
  body.tool-partial-ui #result-screen .ai-output-checklist {
    padding: 0.85rem;
  }

  body.tool-partial-ui #mainContent :is(.intro-lead, .intro-copy, .intro-summary, .intro-quote) {
    margin-bottom: 0.7rem;
    font-size: 0.94rem;
    line-height: 1.62;
  }

  body.tool-partial-ui #mainContent :is(.intro-note, .intro-privacy, .intro-helper, .soul-warm-note) {
    margin-block: 0.7rem;
    padding: 0.7rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.55;
  }

  body.tool-partial-ui #mainContent :is(.intro-feature-list, .intro-features, .intro-feature-grid) {
    gap: 0.5rem;
    margin-block: 0.7rem;
  }

  body.tool-partial-ui #mainContent :is(.intro-feature, .intro-feature-item) {
    padding: 0.6rem 0.45rem;
  }

  body.tool-partial-ui #mainContent .scope-note {
    gap: 0.6rem;
    margin-block: 0.7rem;
    padding: 0.7rem 0.75rem;
  }

  body.tool-partial-ui #mainContent .scope-note p {
    font-size: 0.875rem;
    line-height: 1.55;
  }

  body.tool-partial-ui #mainContent :is(.intro-feature, .intro-feature-item) > :is(.emoji, .icon, [aria-hidden="true"]):first-child {
    font-size: 1.65rem;
  }

  body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option) > label,
  body.tool-partial-ui #mainContent label.relationship-choice,
  body.tool-partial-ui #mainContent .relationship-grid .choice > label {
    min-height: 6.25rem;
    padding: 0.75rem 2.1rem;
    font-size: 0.93rem;
  }

  body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option) > label > :is(.choice-emoji, .icon, [aria-hidden="true"]):first-child,
  body.tool-partial-ui #mainContent label.relationship-choice > :is(.choice-emoji, .icon, [aria-hidden="true"]):first-of-type,
  body.tool-partial-ui #mainContent .relationship-grid .choice .choice-icon {
    font-size: 2.05rem;
  }

  body.tool-partial-ui #mainContent :is(.choice-grid, .pattern-grid, .pattern-selector) {
    grid-template-columns: 1fr;
  }

  body.tool-partial-ui #mainContent .button-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-top: 0.85rem;
  }

  body.tool-partial-ui #mainContent .button-group :is(.btn, button, a.btn) {
    width: 100%;
  }

  body.tool-partial-ui #result-screen :is(.privacy-confirm, #privacy-confirm-error),
  body.tool-partial-ui #result-screen .ai-prompt-body > .button-group {
    margin-inline-end: 3.5rem;
  }

}

/* At 320px and at equivalent text-zoom widths, relationship cards stack. */
@media (max-width: 20rem) {
  body.tool-partial-ui #mainContent :is(.relationship-grid, .relationship-selector) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 18rem) {
  body.tool-partial-ui #mainContent :is(.memory-board, .memory-collage),
  body.tool-partial-ui #mainContent :is(.intro-feature-list, .intro-features, .intro-feature-grid) {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tool-partial-ui,
  body.tool-partial-ui *,
  body.tool-partial-ui *::before,
  body.tool-partial-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  body.tool-partial-ui #sticky-progress,
  body.tool-partial-ui #mainContent :is(.tool-card, .section-card, .tool-screen),
  body.tool-partial-ui #mainContent :is(.memory-fragment, .relationship-choice > label, .relationship-option > label, .choice > label, .option-item > label),
  body.tool-partial-ui #mainContent :is(.split-demo, .split-demo__item, .record-lens),
  body.tool-partial-ui #mainContent :is(.memory-source-group, .safety-notice),
  body.tool-partial-ui #mainContent :is(textarea, input[type="text"], input[type="search"], select),
  body.tool-partial-ui :is(#result-screen, #success-message) :is(.result-panel, .result-row, .result-optional-row, .result-summary, .result-note, .result-standard, .result-protective, .result-lens, .result-chip-row, .result-changed, .today-standard, .ai-prompt-panel, .ai-prompt-details, .ai-output-checklist, .external-trace-note, .next-tools-section, .next-tool-card) {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
    color: CanvasText !important;
    forced-color-adjust: auto;
  }

  body.tool-partial-ui #progress-bar,
  body.tool-partial-ui #mainContent :is(.choice, .option-item):has(input[type="checkbox"]:checked) > label::after,
  body.tool-partial-ui #mainContent label.choice:has(input[type="checkbox"]:checked)::after {
    border-color: Highlight !important;
    background: Highlight !important;
    color: HighlightText !important;
  }

  body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option):has(input[type="radio"]:checked) > label,
  body.tool-partial-ui #mainContent :is(.choice, .option-item):has(input:checked) > label {
    box-shadow: inset 0 0 0 2px Highlight !important;
  }

  body.tool-partial-ui #mainContent :is(.relationship-choice, .relationship-option):has(input[type="radio"]:checked) > label::after,
  body.tool-partial-ui #mainContent :is(.choice, .option-item):has(input[type="radio"]:checked) > label::after {
    color: Highlight !important;
  }

  body.tool-partial-ui #mainContent :is(.btn-primary, .primary-action) {
    border-color: Highlight !important;
    background: Highlight !important;
    color: HighlightText !important;
  }
}

@media (prefers-color-scheme: dark) {
  body.tool-partial-ui {
    --soul-canvas: #111416;
    --soul-surface: #181c1f;
    --soul-subtle: #23282c;
    --soul-soft: #273032;
    --soul-text: #f1f3f4;
    --soul-body: #d8dcde;
    --soul-muted: #aeb5b8;
    --soul-brand: var(--brand-primary-dark-mode, #74bcc1);
    --soul-brand-strong: #8acbd0;
    --soul-selected: #1d3436;
    --soul-info: #1c292c;
    --soul-success: #1d2b22;
    --soul-warning: #302b20;
    --soul-danger: #302426;
    --soul-required: #f1a4a4;
    --soul-plum-note: #2c252b;
    --soul-camera: #1c2c2f;
    --soul-mind: #2c252b;
    --soul-unknown: #2d2a22;
    --soul-note-board: #202529;
    --soul-note-green: #26362a;
    --soul-note-pink: #3a292e;
    --soul-note-yellow: #3b3525;
  }

  body.tool-partial-ui #sticky-progress {
    background: rgba(24, 28, 31, 0.96);
  }

  body.tool-partial-ui #sticky-progress .progress-track {
    background: #394045;
  }

  body.tool-partial-ui #mainContent :is(textarea, input[type="text"], input[type="search"], select)::placeholder {
    color: #aeb5b8;
  }

}