@import url("../../tokens/tokens.css");
@import url("../../tokens/utilities.css");

/*
 * Info-affordance component baseline.
 * This file owns term/judgment triggers, disclosure panels, and their preview.
 * It intentionally does not own explanation copy or terminology policy.
 */

body.info-preview,
body.info-preview *,
body.info-preview *::before,
body.info-preview *::after,
.info-stack,
.info-stack *,
.info-stack *::before,
.info-stack *::after,
.info-modal-layer,
.info-modal-layer *,
.info-modal-layer *::before,
.info-modal-layer *::after {
  box-sizing: border-box;
}

body.info-preview {
  min-block-size: 100%;
  margin: var(--space-0);
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

body.info-preview .preview-page {
  min-block-size: 100dvh;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr);
  place-items: center;
  gap: var(--space-4);
}

body.info-preview .preview-stage {
  min-inline-size: var(--space-0);
  inline-size: min(100%, calc(var(--shell-width) * 2 + var(--space-4)));
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
  border: calc(var(--space-1) / 4) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
}

body.info-preview .preview-kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--shell-width)), 1fr));
  gap: var(--space-3);
}

body.info-preview .preview-kind {
  min-inline-size: var(--space-0);
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

body.info-preview .preview-kind-title {
  margin: var(--space-0);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
}

body.info-preview .preview-heading,
body.info-preview .preview-state-title {
  margin: var(--space-0);
  color: var(--color-text);
}

body.info-preview .preview-heading {
  font-size: var(--text-xl);
}

body.info-preview .preview-state {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  border: calc(var(--space-1) / 4) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

body.info-preview .preview-state-title {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

body.info-preview .preview-controls {
  min-inline-size: var(--space-0);
  inline-size: min(100%, var(--shell-width));
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

body.info-preview .preview-controls a {
  min-block-size: var(--header-height);
  padding-inline: var(--space-3);
  display: inline-flex;
  align-items: center;
  border: calc(var(--space-1) / 4) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

body.info-preview .preview-modal-composition {
  position: relative;
  inline-size: min(100%, var(--shell-width));
  block-size: var(--shell-height);
  overflow: hidden;
  border: calc(var(--space-1) / 4) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

body.info-preview .preview-modal-background {
  block-size: 100%;
  padding: var(--space-4);
  display: grid;
  align-content: start;
  gap: var(--space-4);
  overflow-y: auto;
}

body.info-preview .preview-modal-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

body.info-preview .preview-modal-copy,
body.info-preview .preview-modal-note {
  margin: var(--space-0);
}

body.info-preview .preview-modal-note {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

body.info-preview .preview-modal-fallback {
  min-block-size: var(--header-height);
  padding-inline: var(--space-3);
  border: calc(var(--space-1) / 4) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  background: var(--color-surface-raised);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

body.info-preview .preview-modal-fallback:focus-visible {
  outline: var(--space-1) solid var(--color-focus);
  outline-offset: calc(var(--space-1) / 2);
}

.info-stack {
  display: grid;
  gap: var(--space-2);
}

.info-trigger-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.info-button {
  min-inline-size: var(--header-height);
  min-block-size: var(--header-height);
  padding-inline: var(--space-3);
  border: calc(var(--space-1) / 4) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.info-button[aria-expanded="true"] {
  color: var(--color-accent);
  background: var(--color-accent-weak);
}

.info-button:focus-visible {
  outline: var(--space-1) solid var(--color-focus);
  outline-offset: calc(var(--space-1) / 2);
}

.info-panel {
  margin: var(--space-0);
  padding: var(--space-3);
  border-inline-start: var(--space-1) solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  background: var(--color-accent-weak);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.info-stack:has(
  > .info-trigger-row > .info-button[data-info-fit-trigger]
) > .info-panel {
  --info-fit-min-visible-block-size: calc(var(--text-sm) * var(--leading-normal) + var(--space-3) * 2);

  min-inline-size: var(--space-0);
  max-inline-size: 100%;
  max-block-size: 100%;
  align-self: start;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.info-stack:has(
  > .info-trigger-row > .info-button[data-info-fit-trigger]
) > .info-panel[tabindex="0"][role="region"] {
  overscroll-behavior-y: contain;
}

.info-stack:has(
  > .info-trigger-row > .info-button[data-info-fit-trigger]
) > .info-panel > * {
  min-inline-size: var(--space-0);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.info-panel--judgment {
  display: grid;
  gap: var(--space-2);
}

.info-panel__line {
  display: block;
}

.info-panel:focus-visible {
  outline: var(--space-1) solid var(--color-focus);
  outline-offset: calc(var(--space-1) * -1);
}

.info-panel[hidden] {
  display: none;
}

.info-modal-layer {
  position: absolute;
  z-index: var(--z-sheet);
  inset: var(--space-0);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.info-modal-layer[hidden] {
  display: none;
}

.info-modal-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.info-modal-scrim {
  position: absolute;
  inset: var(--space-0);
  background: var(--color-scrim);
}

.info-modal {
  position: relative;
  z-index: calc(var(--z-sheet) + 1);
  max-block-size: calc(100% - var(--space-8));
  display: grid;
  grid-template-rows: auto minmax(var(--space-0), 1fr) auto;
  overflow: hidden;
  border: calc(var(--space-1) / 4) solid var(--color-border);
  color: var(--color-text);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
}

.info-modal--sheet {
  align-self: end;
  inline-size: 100%;
  min-block-size: calc(var(--space-12) * 8);
  max-block-size: calc(100% - var(--space-12));
  border-radius: var(--radius-lg) var(--radius-lg) var(--space-0) var(--space-0);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-standard);
}

.info-modal-layer.is-open .info-modal--sheet {
  transform: translateY(var(--space-0));
}

.info-modal--dialog {
  inline-size: calc(100% - var(--space-8));
  max-inline-size: calc(var(--space-12) * 7);
  border-radius: var(--radius-lg);
}

.info-modal__header {
  min-inline-size: var(--space-0);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.info-modal__title {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.info-modal__close {
  flex: none;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  padding: var(--space-0);
  display: grid;
  place-items: center;
  border: var(--space-0);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  font: inherit;
  font-size: var(--text-xl);
  cursor: pointer;
}

.info-modal__body {
  min-inline-size: var(--space-0);
  min-block-size: var(--space-0);
  padding: var(--space-0) var(--space-4) var(--space-4);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.info-modal__body > * {
  min-inline-size: var(--space-0);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.info-modal__action {
  min-block-size: var(--header-height);
  margin: var(--space-0) var(--space-4) var(--space-4);
  border: var(--space-0);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  background: var(--color-accent-weak);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.info-modal__close:focus-visible,
.info-modal__action:focus-visible,
.info-modal__body:focus-visible {
  outline: var(--space-1) solid var(--color-focus);
  outline-offset: calc(var(--space-1) * -1);
}

.info-modal--sheet .info-modal__action,
.info-modal--dialog .info-modal__close {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .info-button,
  .info-modal-layer,
  .info-modal--sheet {
    transition: none;
  }
}