/* Synapse Build 2.4 Current Site Adapter
   buildId: synapse-build2-4-surface-css-readmission-v1
   Purpose: bind the re-admitted design system to the current lightweight
   public/app/auth DOM without restoring old platform, cover, veil, state-light,
   display-fabric, substrate, diagnostics, or RuntimeDomainLoader authority. */

:root {
  --synapse-2-surface-adapter: 'build2.4-current-dom-adapter';
  --syn-surface: var(--white, #fffdf8);
  --syn-surface-soft: var(--paper, #f8f4ea);
  --syn-identity: var(--teal, #0b506c);
  --syn-identity-deep: #0a3548;
  --syn-action-line: rgba(11,80,108,.24);
  --color-title: var(--ink, #102b35);
  --color-text: var(--ink, #102b35);
  --color-muted: var(--muted, #47616b);
  --color-text-inverse: #fffdf8;
  --control-border: var(--line, rgba(16,43,53,.16));
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-identity: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-semibold: 650;
  --font-weight-bold: 760;
  --font-weight-heavy: 850;
  --line-tight: 1.04;
  --line-readable: 1.48;
  --surface-radius-card: clamp(1.05rem, .9rem + .45vw, 1.55rem);
  --surface-radius-panel: clamp(1.2rem, 1rem + .55vw, 1.9rem);
  --surface-gap: clamp(.78rem, .62rem + .7vw, 1.25rem);
  --surface-panel-pad: clamp(1rem, .78rem + 1.1vw, 1.75rem);
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-ui);
}

body :where(h1, h2, h3, .brand__copy strong) {
  font-family: var(--font-heading);
  color: var(--color-title);
}

.site-header {
  background: color-mix(in srgb, var(--paper, #f8f4ea) 92%, white 8%) !important;
  box-shadow: 0 .5rem 1.25rem rgba(16,43,53,.055) !important;
}

.brand {
  gap: var(--identity-brand-gap, .58rem) !important;
}

.brand__sigil {
  border-radius: .72rem;
}

.brand__copy strong {
  font-weight: var(--font-weight-heavy) !important;
  letter-spacing: -.018em !important;
}

.brand__copy span {
  letter-spacing: .01em !important;
}

.site-nav__link,
.menu-button,
.button {
  font-family: var(--font-ui) !important;
}

.site-nav__link {
  border: 1px solid transparent !important;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  border-color: color-mix(in srgb, var(--teal, #0b506c) 10%, transparent) !important;
}

.button,
a.button,
button.button {
  min-height: var(--shell-control-height, 2.36rem) !important;
  padding-inline: clamp(.78rem, .68rem + .35vw, 1.05rem) !important;
  border-radius: var(--radius-pill, 999px) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: -.012em !important;
  white-space: nowrap;
}

.button--solid {
  background: linear-gradient(180deg, var(--teal, #0b506c), var(--syn-identity-deep, #0a3548)) !important;
  border-color: color-mix(in srgb, var(--teal, #0b506c) 28%, transparent) !important;
}

.button--soft {
  background: linear-gradient(180deg, rgba(255,253,248,.96), rgba(184,135,66,.15)) !important;
  border-color: rgba(184,135,66,.28) !important;
}

.button--ghost {
  background: linear-gradient(180deg, rgba(255,253,248,.96), rgba(238,248,239,.78)) !important;
  border-color: rgba(11,80,108,.14) !important;
}

.page-shell {
  --page-shell-rail: min(1120px, calc(100% - 1.35rem));
}

.hero,
.info-grid,
.surface-diagram-band,
.closing-panel {
  gap: var(--surface-gap) !important;
}

.hero__content,
.access-card,
.info-card,
.closing-panel,
.app-install-card,
.login-panel {
  border-radius: var(--surface-radius-panel) !important;
  border-color: color-mix(in srgb, var(--line, rgba(16,43,53,.16)) 88%, transparent) !important;
  box-shadow: 0 1.15rem 2.8rem rgba(16,43,53,.105) !important;
}

.hero__content {
  padding: clamp(1.25rem, 1rem + 1.6vw, 2.45rem) !important;
}

.access-card,
.info-card,
.closing-panel,
.app-install-card,
.login-panel {
  padding: var(--surface-panel-pad) !important;
}

.hero h1,
.app-install-chamber h1,
.login-panel h1 {
  font-family: var(--font-heading) !important;
  font-weight: var(--font-weight-heavy) !important;
  line-height: var(--line-tight) !important;
  letter-spacing: -.052em !important;
  text-wrap: balance;
}

.hero h1 {
  font-size: clamp(2.05rem, 5.7vw, 4.25rem) !important;
  max-width: 13.6ch !important;
}

.app-install-chamber h1,
.login-panel h1 {
  max-width: 13.5ch !important;
}

.hero__lede,
.access-card p,
.info-card p,
.closing-panel p,
.app-install-status,
.login-help,
.access-chamber-copy {
  line-height: var(--line-readable) !important;
}

.hero__chips li,
.panel-chip-list li,
.target-switch a {
  border-radius: var(--radius-pill, 999px) !important;
}

.page-media-card,
.diagram-panel,
.diagram-panel__plate {
  border-radius: var(--surface-radius-card) !important;
}

.site-nav[data-open="true"] {
  background: rgba(255,253,248,.995) !important;
  border-color: rgba(16,43,53,.18) !important;
  box-shadow: 0 1.2rem 2.8rem rgba(16,43,53,.18) !important;
}

.header-actions {
  min-width: 0;
}

.header-actions .button {
  min-width: 0;
}

.app-primary-actions,
.app-install-actions,
.hero__actions,
.closing-panel__actions {
  min-width: 0;
}

@media (max-width: 860px) {
  .site-header {
    row-gap: .48rem !important;
  }
  .site-nav[data-open="true"] {
    backdrop-filter: blur(20px) saturate(115%) !important;
  }
  .header-actions {
    grid-template-columns: 1fr 1fr !important;
  }
  .header-actions [data-cta="get-app"] {
    display: none !important;
  }
  .header-actions .button {
    min-height: 2.22rem !important;
    font-size: .82rem !important;
    padding-inline: .5rem !important;
  }
  .page-shell {
    padding-top: .64rem !important;
  }
  .hero h1 {
    font-size: clamp(1.92rem, 8.2vw, 2.85rem) !important;
    max-width: 14ch !important;
    letter-spacing: -.046em !important;
  }
  .hero__content,
  .access-card,
  .info-card,
  .closing-panel,
  .app-install-card,
  .login-panel {
    border-radius: clamp(1rem, 4vw, 1.35rem) !important;
  }
}

@media (max-width: 520px) {
  .brand__sigil {
    width: 1.85rem !important;
    height: 1.85rem !important;
  }
  .brand__copy strong {
    font-size: .9rem !important;
  }
  .menu-button {
    min-height: 2.22rem !important;
    padding-inline: .72rem !important;
  }
  .hero__actions,
  .app-primary-actions,
  .app-install-actions,
  .closing-panel__actions,
  .login-actions {
    gap: .48rem !important;
  }
  .hero__actions .button,
  .app-primary-actions .button,
  .app-install-actions .button,
  .closing-panel__actions .button,
  .login-actions .button {
    min-height: 2.38rem !important;
  }
}

@media (max-width: 420px) {
  .header-actions {
    display: none !important;
  }
  .site-header {
    row-gap: 0 !important;
  }
  .hero h1 {
    font-size: clamp(1.86rem, 9.2vw, 2.55rem) !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  .header-actions [data-cta="get-app"] {
    display: none !important;
  }
  .header-actions {
    min-width: 12rem !important;
  }
  .header-actions .button {
    min-height: 2rem !important;
    font-size: .76rem !important;
    padding-inline: .5rem !important;
  }
  .hero h1 {
    font-size: clamp(1.4rem, 3.8vw, 2.1rem) !important;
    max-width: 18ch !important;
  }
}

@media (min-width: 980px) {
  body[data-public-chamber-shell="soft-active"] .hero h1 {
    font-size: clamp(2.3rem, 3.2vw, 3.28rem) !important;
    max-width: 14.2ch !important;
  }
  body[data-public-chamber-shell="soft-active"] .header-actions .button {
    min-height: 2.08rem !important;
    padding-inline: .64rem !important;
  }
}
