/* Signal Atlas — canonical light-only web tokens and production primitives. */
:root {
  color-scheme: light;

  --sa-canvas: #FAFCFF;
  --sa-surface: #FFFFFF;
  --sa-ink: #0B1830;
  --sa-ink-subtle: #42516A;
  --sa-muted: #526176;
  --sa-cobalt: #1746E0;
  --sa-cobalt-strong: #1039BF;
  --sa-cobalt-soft: #EDF2FF;
  --sa-cyan: #006675;
  --sa-cyan-soft: #E2F8FB;
  --sa-violet: #6A55D9;
  --sa-violet-soft: #F0EDFF;
  --sa-mist: #E7ECF4;
  --sa-mist-soft: #F3F6FA;
  --sa-warning: #B86609;
  --sa-warning-soft: #FFF4E4;
  --sa-danger: #A62E3C;
  --sa-danger-soft: #FFF0F2;
  --sa-radius-sm: 10px;
  --sa-radius-md: 14px;
  --sa-radius-lg: 18px;
  --sa-control-height: 42px;
  --sa-content-width: 1280px;
  --sa-overlay-shadow: 0 20px 55px rgba(11, 24, 48, 0.16);

  /* Compatibility aliases for the current static pages. */
  --bg: var(--sa-canvas);
  --bg-soft: var(--sa-mist-soft);
  --surface: var(--sa-surface);
  --card: var(--sa-surface);
  --ink: var(--sa-ink);
  --ink-1: var(--sa-ink);
  --ink-2: var(--sa-ink-subtle);
  --ink-3: var(--sa-muted);
  --text: var(--sa-ink);
  --muted: var(--sa-muted);
  --muted-2: #8390A3;
  --line: var(--sa-mist);
  --line-light: var(--sa-mist-soft);
  --accent: var(--sa-cobalt);
  --accent-dk: var(--sa-cobalt-strong);
  --accent-lt: #C9D5FF;
  --accent-faint: var(--sa-cobalt-soft);
  --focus: var(--sa-cobalt);
  --ok: var(--sa-cyan);
  --danger: var(--sa-danger);
  --danger-lt: var(--sa-danger-soft);
  --blue: var(--sa-cobalt);
  --cyan: var(--sa-cyan);
  --shadow: var(--sa-overlay-shadow);
  --sh1: none;
  --sh2: none;
  --sh3: none;
  --sh4: var(--sa-overlay-shadow);
  --r: var(--sa-radius-md);
  --r-sm: var(--sa-radius-sm);
}

html {
  background: var(--sa-canvas);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  background: var(--sa-canvas);
  color: var(--sa-ink);
  font-family: Inter, Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body::before,
body::after {
  display: none !important;
}

a {
  color: var(--sa-cobalt);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--sa-cobalt-strong);
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid rgba(23, 70, 224, 0.28);
  outline-offset: 3px;
}

.skip-link:focus {
  background: var(--sa-ink);
  color: #fff;
}

/* Authenticated application shell. */
.topbar {
  min-height: 68px;
  height: 68px;
  padding: 0 max(24px, calc((100vw - var(--sa-content-width)) / 2));
  gap: 16px;
  background: rgba(250, 252, 255, 0.97);
  border-bottom: 1px solid var(--sa-mist);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.brand {
  gap: 10px;
  margin-right: 12px;
  color: var(--sa-ink);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.045em;
}

.brand-mark,
.brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.primary-nav {
  gap: 4px;
}

.nav-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--sa-radius-sm);
  color: var(--sa-ink-subtle);
  font-weight: 600;
}

.nav-link:hover {
  background: var(--sa-mist-soft);
  color: var(--sa-ink);
}

.nav-link.active {
  border-color: #D7E0FF;
  background: var(--sa-cobalt-soft);
  color: var(--sa-cobalt);
}

.topbar-connect {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: var(--sa-radius-sm);
  background: var(--sa-cobalt);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.topbar-connect:hover {
  background: var(--sa-cobalt-strong);
  color: #fff;
}

.topbar-connect-mark {
  font-size: 18px;
  line-height: 1;
}

.topbar-user {
  min-height: 42px;
  border: 1px solid var(--sa-mist);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-surface);
}

.topbar-user:hover {
  background: var(--sa-mist-soft);
}

.topbar-avatar {
  width: 30px;
  height: 30px;
  border: 1px solid #C9D5FF;
  background: var(--sa-cobalt-soft);
  color: var(--sa-cobalt);
}

.settings-panel {
  border: 1px solid var(--sa-mist);
  border-radius: var(--sa-radius-md);
  background: var(--sa-surface);
  box-shadow: var(--sa-overlay-shadow);
}

.settings-header {
  color: var(--sa-muted);
}

.settings-link,
.settings-logout {
  min-height: 40px;
  color: var(--sa-ink-subtle);
}

.settings-link:hover,
.settings-logout:hover {
  background: var(--sa-mist-soft);
  color: var(--sa-ink);
}

.settings-logout {
  color: var(--sa-danger);
}

.hamburger {
  width: 42px;
  height: 42px;
  border: 1px solid var(--sa-mist);
  background: var(--sa-surface);
}

.hamburger:hover {
  background: var(--sa-mist-soft);
}

/* Page layout and hierarchy. */
.container {
  position: relative;
  z-index: 1;
  width: min(var(--sa-content-width), calc(100% - 48px));
  max-width: var(--sa-content-width);
  margin: 0 auto;
  padding: 42px 0 72px;
}

.page,
.stack {
  gap: 18px;
}

h1,
h2,
h3,
.app-title {
  color: var(--sa-ink);
  letter-spacing: -0.025em;
}

h1,
.collections-page-title,
.app-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.muted,
.app-subtitle,
.app-feedback {
  color: var(--sa-muted);
}

.card,
.mini-card,
.app-card,
.list-item,
.kx-org-card,
.collections-card,
.contact-card {
  border: 1px solid var(--sa-mist);
  border-radius: var(--sa-radius-md);
  background: var(--sa-surface);
  box-shadow: none;
}

.card,
.app-card {
  padding: clamp(20px, 3vw, 32px);
}

.mini-card,
.list-item {
  padding: 18px;
}

.badge,
.status-dot,
.connections-token-pill {
  border-color: var(--sa-mist);
  background: var(--sa-mist-soft);
  color: var(--sa-ink-subtle);
}

.status-dot.ok,
.badge.ok,
.badge-success {
  border-color: #A8E2E9;
  background: var(--sa-cyan-soft);
  color: var(--sa-cyan);
}

.alert-success {
  border-color: #A8E2E9;
  background: var(--sa-cyan-soft);
  color: #075D68;
}

#tab-bar .tab {
  color: var(--sa-ink-subtle);
}

/* Controls use 40px minimum on web and clear semantic states. */
:where(input, textarea, select, .field-input, .kx-input, .fast-select-trigger) {
  border-color: #CCD5E2;
  border-radius: var(--sa-radius-sm);
  background: var(--sa-surface);
  color: var(--sa-ink);
}

:where(input, select, .field-input, .kx-input, .fast-select-trigger) {
  min-height: var(--sa-control-height);
}

:where(input, textarea, select, .field-input, .kx-input, .fast-select-trigger):focus {
  border-color: var(--sa-cobalt);
  box-shadow: 0 0 0 3px rgba(23, 70, 224, 0.12);
  outline: none;
}

:where(button, .btn-primary, .btn-secondary, .kx-head-btn, .button) {
  min-height: var(--sa-control-height);
  border-radius: var(--sa-radius-sm);
  font-weight: 700;
}

:where(.btn-primary, .kx-head-btn-primary, .button-primary, .account-submit) {
  border: 1px solid var(--sa-cobalt);
  background: var(--sa-cobalt);
  color: #fff;
  box-shadow: none;
}

:where(.btn-primary, .kx-head-btn-primary, .button-primary, .account-submit):hover {
  border-color: var(--sa-cobalt-strong);
  background: var(--sa-cobalt-strong);
  color: #fff;
  box-shadow: none;
  transform: none;
}

:where(.btn-secondary, .button-secondary, .kx-head-btn:not(.kx-head-btn-primary)) {
  border: 1px solid #CCD5E2;
  background: var(--sa-surface);
  color: var(--sa-ink-subtle);
}

:where(.btn-secondary, .button-secondary, .kx-head-btn:not(.kx-head-btn-primary)):hover {
  border-color: #AAB6C7;
  background: var(--sa-mist-soft);
  color: var(--sa-ink);
  transform: none;
}

/* Keep legacy selector specificity from reintroducing gradients or dark fills. */
.btn-primary,
.kx-head-btn-primary,
.button-primary,
.account-submit {
  border-color: var(--sa-cobalt);
  background: var(--sa-cobalt);
  background-image: none;
  color: #fff;
  box-shadow: none;
}

.btn-primary:hover,
.kx-head-btn-primary:hover,
.button-primary:hover,
.account-submit:hover {
  border-color: var(--sa-cobalt-strong);
  background: var(--sa-cobalt-strong);
  background-image: none;
  color: #fff;
  box-shadow: none;
}

.btn-secondary,
.button-secondary,
.kx-head-btn:not(.kx-head-btn-primary) {
  border-color: #CCD5E2;
  background: var(--sa-surface);
  background-image: none;
  color: var(--sa-ink-subtle);
  box-shadow: none;
}

.btn-secondary:hover,
.button-secondary:hover,
.kx-head-btn:not(.kx-head-btn-primary):hover {
  border-color: #AAB6C7;
  background: var(--sa-mist-soft);
  background-image: none;
  color: var(--sa-ink);
  box-shadow: none;
}

.auth-hero,
.hero-share-card,
.profile-identity-panel-modern,
.topbar-avatar,
.contact-avatar,
.kx-org-card-avatar {
  background-image: none !important;
}

.contact-avatar,
.kx-org-card-avatar {
  background-color: var(--sa-cobalt);
}

.kx-org-card-avatar-fallback {
  background-color: var(--sa-cobalt) !important;
}

:where(button, input, textarea, select):disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

/* Public landing and auth surface. */
body > .topbar:not(:empty) {
  position: sticky;
}

body > main:not(.container):not(.app-main) {
  min-height: calc(100vh - 68px);
  padding: 56px 24px 104px;
}

.hero {
  width: min(1040px, 100%);
  padding: 32px 24px;
  gap: 20px;
}

.hero-mark {
  width: min(190px, 42vw);
  filter: none;
}

.hero h1 {
  font-size: clamp(3.4rem, 9vw, 6.2rem);
  color: var(--sa-ink);
}

.tagline {
  max-width: 760px;
  color: var(--sa-ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 650;
}

.tagline span {
  color: var(--sa-cobalt);
}

.summary {
  color: var(--sa-muted);
}

.account-button,
.account-menu,
.account-form input {
  border-color: var(--sa-mist);
  background: var(--sa-surface);
  color: var(--sa-ink);
}

.account-button {
  border-radius: var(--sa-radius-sm);
}

.account-menu {
  border-radius: var(--sa-radius-md);
  box-shadow: var(--sa-overlay-shadow);
}

.account-actions a {
  color: var(--sa-cobalt);
}

.account-feedback[data-state="error"],
.app-feedback.error {
  color: var(--sa-danger);
}

footer {
  color: var(--sa-muted);
}

.legal-page > main {
  width: min(760px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 40px 0 72px;
}

.legal-brand {
  width: fit-content;
  margin-bottom: 48px;
}

.legal-page h1 {
  margin-bottom: 20px;
}

.legal-page h2 {
  margin-top: 36px;
  font-size: 1.2rem;
}

.legal-page p,
.legal-page ul {
  margin-bottom: 16px;
}

.legal-page .legal {
  color: var(--sa-muted);
  font-size: 0.92rem;
}

/* Confirmation and other small application cards. */
main.app-main {
  padding: 56px 24px;
}

.app-wrap {
  width: min(720px, 100%);
}

.app-card {
  background: var(--sa-surface);
}

.app-form input,
.app-form textarea,
.app-form select {
  background: var(--sa-surface);
  color: var(--sa-ink);
}

@media (max-width: 1040px) {
  .topbar {
    padding: 0 20px;
  }

  .primary-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    display: none;
    padding: 10px;
    border: 1px solid var(--sa-mist);
    border-radius: var(--sa-radius-md);
    background: var(--sa-surface);
    box-shadow: var(--sa-overlay-shadow);
  }

  .primary-nav.open {
    display: grid;
  }

  .nav-link {
    width: 100%;
  }

  .hamburger {
    display: inline-flex;
    order: 2;
  }

  .topbar-spacer {
    order: 1;
  }

  .topbar-connect,
  .topbar-user-wrap {
    order: 3;
  }
}

@media (max-width: 640px) {
  .topbar {
    min-height: 64px;
    height: 64px;
    padding: 0 14px;
    gap: 8px;
  }

  .brand {
    margin-right: 0;
  }

  .brand-name,
  .topbar-username,
  .topbar-connect-label {
    display: none;
  }

  .topbar-connect {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .topbar-user {
    padding: 5px;
  }

  .container {
    width: min(100% - 28px, var(--sa-content-width));
    padding: 28px 0 56px;
  }

  .card,
  .app-card {
    padding: 20px;
  }

  h1,
  .collections-page-title,
  .app-title {
    font-size: 2rem;
  }

  body > main:not(.container):not(.app-main) {
    padding: 32px 16px 92px;
  }

  .hero {
    padding: 24px 8px;
  }
}

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