/* Use semantic anchors for navigation and native buttons for actions.
 * A disabled appearance does not disable a link: do not use href on a
 * disabled action. Field/status classes provide visuals, not validation.
 */
.site-v2 .site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-2);
  min-block-size: var(--site-control-height);
  min-inline-size: var(--site-control-height);
  max-inline-size: 100%;
  padding: var(--site-space-3) var(--site-space-6);
  border: 1px solid var(--site-action);
  border-radius: var(--site-radius-control);
  background: var(--site-action);
  color: var(--site-on-action);
  font: inherit;
  font-weight: var(--site-weight-semibold);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.site-v2 .site-button:not(:disabled):hover,
.site-v2 .site-button:not(:disabled):active { background: var(--site-action-hover); border-color: var(--site-action-hover); }
.site-v2 .site-button--secondary { background: var(--site-surface); color: var(--site-action); }
.site-v2 .site-button--secondary:not(:disabled):hover,
.site-v2 .site-button--secondary:not(:disabled):active { background: var(--site-surface-subtle); }
.site-v2 .site-button:disabled { background: var(--site-surface-subtle); color: var(--site-text-muted); border-color: var(--site-border-control); cursor: not-allowed; }
.site-v2 .site-link { color: var(--site-action); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
.site-v2 .site-link:hover { color: var(--site-action-hover); text-decoration-thickness: 0.13em; }
.site-v2 .site-section-heading { display: grid; gap: var(--site-space-3); max-inline-size: var(--site-reading); }
.site-v2 .site-eyebrow { margin: 0; color: var(--site-lime-ink); font-size: var(--site-text-label); line-height: var(--site-leading-label); font-weight: var(--site-weight-semibold); }
.site-v2 .site-surface { min-inline-size: 0; padding: var(--site-component-padding); border: 1px solid var(--site-border); border-radius: var(--site-radius-surface); background: var(--site-surface); }
.site-v2 .site-surface--raised { box-shadow: var(--site-shadow-surface); }
.site-v2 .site-label { display: block; font-size: var(--site-text-label); line-height: var(--site-leading-label); font-weight: var(--site-weight-semibold); }
.site-v2 .site-field {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: var(--site-control-height);
  padding: var(--site-space-3) var(--site-space-4);
  border: 1px solid var(--site-border-control);
  border-radius: var(--site-radius-control);
  background: var(--site-surface);
  color: var(--site-text);
  font: inherit;
}
.site-v2 .site-field::placeholder { color: var(--site-text-muted); opacity: 1; }
.site-v2 textarea.site-field { resize: vertical; }
.site-v2 .site-field[aria-invalid="true"] { border-color: var(--site-error); border-width: 2px; }
.site-v2 .site-field:disabled { background: var(--site-surface-subtle); color: var(--site-text-muted); }
.site-v2 .site-help,
.site-v2 .site-error { margin: 0; font-size: var(--site-text-small); line-height: var(--site-leading-small); }
.site-v2 .site-help { color: var(--site-text-secondary); }
.site-v2 .site-error { color: var(--site-error); }
.site-v2 .site-status { padding: var(--site-space-4); border: 1px solid currentColor; border-inline-start-width: 4px; border-radius: var(--site-radius-small); }
.site-v2 .site-status--success { color: var(--site-success); background: var(--site-success-surface); }
.site-v2 .site-status--warning { color: var(--site-warning); background: var(--site-warning-surface); }
.site-v2 .site-status--error { color: var(--site-error); background: var(--site-error-surface); }

/* Phase 3: opt-in public navigation. Unenhanced links stay visible.
 * 80rem is a provisional expansion threshold; flex wrapping preserves content fit.
 * Native modal dialogs use the top layer, independently of the z-index scale.
 */
.site-v2 .site-header { background: var(--site-surface); border-block-end: 1px solid var(--site-border); }
.site-v2 .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--site-space-4); max-inline-size: var(--site-container-wide); margin-inline: auto; padding: var(--site-space-4) var(--site-gutter); }
.site-v2 .site-header__brand { display: inline-flex; align-items: center; min-block-size: var(--site-control-height); inline-size: clamp(8rem, 30vw, 12.5rem); max-inline-size: 100%; flex-shrink: 1; }
.site-v2 .site-header__brand img { display: block; inline-size: 100%; block-size: auto; }
.site-v2 .site-nav__menu { margin-inline-start: auto; }
.site-v2 .site-nav__slot { flex: 1 1 100%; min-inline-size: 0; }
.site-v2 .site-nav { display: flex; flex-direction: column; gap: var(--site-space-4); min-inline-size: 0; }
.site-v2 .site-nav__list,
.site-v2 .site-nav__submenu { list-style: none; padding: 0; margin: 0; min-inline-size: 0; }
.site-v2 .site-nav__list { display: flex; flex-direction: column; gap: var(--site-space-1); }
.site-v2 .site-nav__item { position: relative; min-inline-size: 0; }
.site-v2 .site-nav__link,
.site-v2 .site-nav__toggle,
.site-v2 .site-nav__label { display: flex; align-items: center; justify-content: space-between; gap: var(--site-space-2); min-block-size: var(--site-control-height); padding: var(--site-space-2) var(--site-space-3); border: 0; border-radius: var(--site-radius-small); background: transparent; color: var(--site-text); font: inherit; font-weight: var(--site-weight-medium); text-decoration: none; text-align: start; overflow-wrap: anywhere; }
.site-v2 .site-nav__toggle { inline-size: 100%; cursor: pointer; }
.site-v2 .site-nav__link:hover,
.site-v2 .site-nav__toggle:hover,
.site-v2 .site-nav__toggle[aria-expanded="true"] { background: var(--site-surface-subtle); color: var(--site-action); }
.site-v2 .site-nav [aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.3em; }
.site-v2 .site-nav__toggle.is-current-group { color: var(--site-action); box-shadow: inset 0 -2px var(--site-action); }
.site-v2 .site-nav__submenu { padding-inline-start: var(--site-space-4); border-inline-start: 2px solid var(--site-border); }
.site-v2 .site-nav__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--site-space-2); }
.site-v2 .site-header [hidden],
.site-v2 .site-header[data-navigation-ready] .site-nav__label { display: none; }
.site-v2 .site-header[data-navigation-mode="compact"] .site-nav__slot { display: none; }
.site-v2.site-nav-is-open { overflow-y: clip; }
.site-v2 .site-nav__drawer:not([open]) { display: none; }
.site-v2 .site-nav__drawer { position: fixed; inset: 0 0 0 auto; box-sizing: border-box; inline-size: min(26rem, 100%); max-inline-size: 100%; block-size: 100vh; block-size: 100dvh; max-block-size: 100vh; max-block-size: 100dvh; margin: 0; padding: var(--site-space-4); padding-block-start: max(var(--site-space-4), env(safe-area-inset-top)); padding-block-end: max(var(--site-space-4), env(safe-area-inset-bottom)); padding-inline-end: max(var(--site-space-4), env(safe-area-inset-right)); border: 0; border-inline-start: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text); font: inherit; overflow-y: auto; overscroll-behavior-y: contain; }
.site-v2 .site-nav__drawer::backdrop { background: rgb(24 45 41 / 45%); }
.site-v2 .site-nav__drawer-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--site-space-3); padding-block-end: var(--site-space-4); }
.site-v2 .site-nav__drawer-heading h2 { margin: 0; font-size: var(--site-text-h4); line-height: var(--site-leading-h4); }
.site-v2 .site-nav__drawer .site-nav__actions { flex-direction: column; align-items: stretch; padding-block-start: var(--site-space-4); border-block-start: 1px solid var(--site-border); }
.site-v2 .site-nav__drawer-content { min-inline-size: 0; }
@media (min-width: 80rem) {
  .site-v2 .site-header[data-navigation-mode="expanded"] { position: sticky; inset-block-start: 0; z-index: var(--site-z-sticky); }
  .site-v2 .site-header[data-navigation-mode="expanded"] .site-nav__slot { flex: 1 1 52rem; }
  .site-v2 .site-header[data-navigation-mode="expanded"] .site-nav { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
  .site-v2 .site-header[data-navigation-mode="expanded"] .site-nav__list { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .site-v2 .site-header[data-navigation-mode="expanded"] .site-nav__submenu { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: var(--site-z-dropdown); inline-size: 17rem; max-inline-size: calc(100vw - 2 * var(--site-gutter)); padding: var(--site-space-2); border: 1px solid var(--site-border); border-radius: var(--site-radius-control); background: var(--site-surface); box-shadow: var(--site-shadow-surface); }
}
/* No transition or animation: reduced-motion users receive the same immediate states. */
