/*
 * Control primitives (design-system.json `primitiveSources`): Button,
 * IconButton, NavLink, Disclosure, MenuButton, LocaleControl and ThemeControl.
 * Values resolve to tokens; the documented exception is the contract's own
 * 2.75rem (44px) minimum interactive target, marked inline.
 */

/* ---------- Button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem; /* contract minimumTargetPx: 44 */
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.btn-lg { min-height: 3rem; padding: var(--space-3) var(--space-6); }

/* VD-R4-02 press language (T4-02-03): the shared primary carries the ink
   frame and the hard offset press shadow; hover and active press toward the
   shadow. The fill is the DS-002/RP-023 action token — the small-button
   shade of brand coral with the registered white on-accent ink (4.53:1);
   large hero/signal areas keep --color-accent. */
.btn-primary {
  background: var(--color-action-accent);
  border-color: var(--color-text);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-press);
}

[data-theme="dark"] .btn-primary {
  color: var(--color-accent-ink);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translate(0.125rem, 0.125rem);
  box-shadow: 0.1875rem 0.1875rem 0 var(--color-text);
}

.btn-primary:active {
  transform: translate(0.3125rem, 0.3125rem);
  box-shadow: 0 0 0 var(--color-text);
}

/* DS-012 secondary: the solid navy secondary block with the same press. */
.btn-secondary {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-surface);
  box-shadow: var(--shadow-press);
}

.btn-secondary:hover {
  transform: translate(0.125rem, 0.125rem);
  box-shadow: 0.1875rem 0.1875rem 0 var(--color-text);
}

.btn-secondary:active {
  transform: translate(0.3125rem, 0.3125rem);
  box-shadow: 0 0 0 var(--color-text);
}

/* M11-B2 solid variant (UI-017 apply CTA): the action fill carries the white
   on-accent ink and darkens toward the hover shade — no frame, no shadow. */
.btn-solid {
  background: var(--color-action-accent);
  border-color: var(--color-action-accent);
  color: var(--color-accent-ink);
}

.btn-solid:hover { background: var(--color-accent-hover); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-tertiary {
  background: transparent;
  border-color: transparent;
  /* Registered accent-text pair (5.85:1 on --color-bg and 5.46:1 on
     --color-bg-subtle, WCAG AA); dark resolves the bright dark accent-text
     token via the remap. */
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.btn-tertiary:hover { color: var(--color-text); }

/* tactile push: the quiet link still answers the press physically */
.btn-tertiary:active { transform: translateY(0.0625rem); }

[data-theme="dark"] .btn-tertiary { color: var(--color-accent-text); }
[data-theme="dark"] .btn-tertiary:hover { color: var(--color-text); }

.btn-danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger); /* frozen pairing: danger text on bg, never color-only */
}

/* ---------- IconButton ---------- */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;  /* contract minimumTargetPx: 44 */
  min-height: 2.75rem; /* contract minimumTargetPx: 44 */
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.btn-icon-quiet:hover { background: var(--color-bg-subtle); }

/* ---------- Divider ---------- */

.divider {
  border: 0;
  border-block-start: 1px solid var(--color-border);
  margin-block: 0;
}

.divider-strong { border-block-start-color: var(--color-border-strong); }

/* ---------- SignalRule ---------- */

.signal-rule {
  border: 0;
  height: 2px;
  width: 100%;
  background: var(--color-border);
}

.signal-rule-accent {
  background: var(--color-accent);
}


/* ---------- NavLink ---------- */

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem; /* contract minimumTargetPx: 44 */
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

/* VD-R4-02: brand coral is never light-theme text (it falls below AA on
   every light backdrop). Hover uses the registered accent-text pair
   (--color-accent-text, 5.85:1 on --color-bg) with no underline; dark
   resolves the bright dark accent-text token via the token remap. */
.nav-link:hover { color: var(--color-accent-text); }

.nav-link[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
  border-radius: 0;
}

/* ---------- Disclosure (details/summary) ---------- */

.disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem; /* contract minimumTargetPx: 44 */
  padding: var(--space-1) var(--space-2);
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
  color: var(--color-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.disclosure > summary::-webkit-details-marker { display: none; }

/* VD-R4-02: brand coral is never light-theme text; hover uses the registered
   accent-text pair (see .nav-link:hover). */
.disclosure > summary:hover { color: var(--color-accent-text); }

.disclosure-icon {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.disclosure[open] > summary .disclosure-icon { transform: rotate(90deg); }

/* ---------- MenuButton (mobile navigation disclosure) ---------- */

.menu-button > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 2.75rem;  /* contract minimumTargetPx: 44 */
  min-height: 2.75rem; /* contract minimumTargetPx: 44 */
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  white-space: nowrap; /* the menu label never wraps inside its 44px target */
  list-style: none;
  cursor: pointer;
}

.menu-button > summary::-webkit-details-marker { display: none; }

.menu-button > summary:hover { border-color: var(--color-text); }

/* ---------- MenuControl (locale/theme dropdowns, VD-R4-02) ---------- */

/*
 * Native details/summary dropdown for the public LocaleControl and
 * ThemeControl. The summary is a button-like 44px control (the ThemeControl
 * one presents icon-only per the design-qa.md owner refinement); the chevron
 * is a pure CSS ::after border trick (no JS); the panel is an
 * absolutely-positioned surface with the hard offset press shadow; options
 * are 44px rows whose aria-checked state shows a ✓ suffix in the registered
 * accent-text pair. The client script closes menus on Escape and after a
 * theme selection.
 */

.menu-control { position: relative; }

.menu-control > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem; /* contract minimumTargetPx: 44 */
  padding: var(--space-1) var(--space-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  white-space: nowrap; /* the current-value label never wraps at 320 */
  list-style: none;
  cursor: pointer;
}

.menu-control > summary::-webkit-details-marker { display: none; }

.menu-control > summary::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-0.125rem);
}

.menu-control[open] > summary::after {
  transform: translateY(0.125rem) rotate(180deg);
}

.menu-control > summary:hover { border-color: var(--color-text); }

.menu-control-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-2));
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-press);
}

.menu-control-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.75rem; /* contract minimumTargetPx: 44 */
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  text-decoration: none;
  text-align: start;
  cursor: pointer;
}

.menu-control-option:hover { background: var(--color-accent-soft); }

.menu-control-option[aria-checked="true"]::after {
  content: "✓";
  color: var(--color-accent-text);
  font-weight: var(--weight-bold);
}

/* ---------- ThemeControl icon summary (design-qa.md owner refinement) ---------- */

/*
 * Owner refinement 2026-09-17: the ThemeControl is one icon-only button that
 * toggles light/dark on click (no dropdown). It keeps the vendored Phosphor
 * Moon/Sun pair — Moon in light, Sun in dark — swapped by the resolved root
 * [data-theme]; the accessible name and aria-pressed report the resolved
 * mode and are kept in sync by the client script.
 */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem; /* contract minimumTargetPx: 44 */
  min-height: 2.75rem;
  padding-inline: var(--space-1);
  /* Owner 2026-09-23: the frame matches the locale toggle's btn-secondary
     chrome (2px ink border, radius-sm) so the two header controls read as
     one family. */
  border: 2px solid var(--color-text);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.theme-toggle:focus-visible {
  outline: 0.1875rem solid var(--color-focus);
  outline-offset: 0;
}

.menu-control-icon {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  flex: none;
}

[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun { display: none; }

/* ---------- LocaleControl / ThemeControl (segmented, shared with Admin) ---------- */

/*
 * The segmented form stays registered for the Admin surface (the Admin shell
 * loads this shared sheet and keeps its segmented locale/theme controls);
 * public surfaces use the .menu-control dropdown above.
 */

.locale-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.locale-control-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem; /* contract minimumTargetPx: 44 */
  min-width: 2.75rem;  /* contract minimumTargetPx: 44 */
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  text-decoration: none;
  white-space: nowrap; /* locale labels never wrap inside the bounded control */
}

.locale-control-link:hover { color: var(--color-text); background: var(--color-bg-subtle); }

.locale-control-link[aria-current="true"] {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  background: var(--color-accent-soft);
}

/* ---------- ThemeControl ---------- */

.theme-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.theme-control-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 2.75rem; /* contract minimumTargetPx: 44 */
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  white-space: nowrap; /* mode labels never wrap to vertical text at 320 */
  cursor: pointer;
}

.theme-control-mode:hover { color: var(--color-text); background: var(--color-bg-subtle); }

.theme-control-mode[aria-pressed="true"] {
  color: var(--color-text);
  background: var(--color-accent-soft);
  border-color: var(--color-border-strong);
}