/* Shared Sophont web foundations. Source: sophont-style-guide-v1.
   Page styles retain ownership of diagrams, scientific scales, and layouts. */
:root,
body,
body.theme-light,
body.theme-brand {
  --bg: var(--sophont-paper);
  --bg-raised: var(--sophont-surface-raised);
  --bg-panel: var(--sophont-panel);
  --fg: var(--sophont-ink);
  --fg-soft: var(--sophont-copy);
  --fg-mute: var(--sophont-muted);
  --rule: var(--sophont-rule);
  --rule-strong: var(--sophont-rule-strong);
  --electric: var(--sophont-electric);
  --ice: var(--sophont-electric);
  --blue-500: var(--sophont-electric);
  --blue-400: var(--sophont-electric-hover);
  --mint: var(--sophont-positive);
  --amber: var(--sophont-warning);
  --magenta: var(--plot-cat-4);
  --logo-filter: none;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
}
html { font-size: 100%; scroll-padding-top: 5.5rem; }
body {
  color: var(--sophont-copy);
  background: var(--sophont-paper);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.65;
}
*, *::before, *::after { box-sizing: border-box; }
main, section, article, figure { min-width: 0; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--sophont-ink);
  font-weight: 500;
  overflow-wrap: break-word;
}
h1 { font-size: 2.75rem; line-height: 1.15; letter-spacing: -.025em; }
h2 { font-size: 2rem; line-height: 1.2; letter-spacing: -.02em; }
h3 { font-size: 1.25rem; line-height: 1.35; }
p { overflow-wrap: break-word; }
a { text-underline-offset: .18em; }
strong, b { font-weight: 600; }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: var(--text-label); }
table { font-variant-numeric: tabular-nums; }
button, input, select, textarea {
  font-family: var(--font-sans);
  font-size: var(--text-control);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea {
  max-width: 100%;
  min-height: 2.75rem;
}
input::placeholder, textarea::placeholder { color: var(--sophont-muted); opacity: 1; }
figcaption { font-family: var(--font-sans); font-size: var(--text-caption); line-height: 1.5; }
:focus-visible { outline: 3px solid var(--sophont-electric); outline-offset: 4px; }
::selection { color: #fff; background: var(--sophont-electric); }
.skip-link {
  font: 500 1rem/1.5 var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  z-index: 1000;
  top: .5rem;
  left: .75rem;
  transform: translateY(calc(-100% - 1rem));
}
.skip-link:focus { transform: none; }
.nav {
  min-height: 4rem;
  padding-block: .5rem;
  background: var(--sophont-paper);
  backdrop-filter: none;
}
.nav-brand { min-height: 2.75rem; display: inline-flex; align-items: center; }
.nav-brand img {
  width: 7rem !important;
  height: auto !important;
  max-width: 30vw;
  object-fit: contain;
  transform: translateY(-9%);
}
.nav-links { gap: 1.5rem; }
.nav-links a,
.nav-cta,
.nav-mobile-menu a {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.5;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--sophont-copy);
}
.nav-cta {
  white-space: normal;
  min-width: 0;
  overflow-wrap: anywhere;
}
.nav-cta .status-dot { display: none; }
.nav-menu-toggle { min-width: 2.75rem; min-height: 2.75rem; flex-shrink: 0; }
.nav-mobile-menu { background: var(--sophont-paper); }
.nav-mobile-menu a { display: flex; font-size: 1rem; min-height: 3rem; }
/* Action buttons share the guide's pill shape and hover halo. Navigation tabs,
   field controls and icon-only buttons keep their own component geometry. */
body :is(.btn, .button, .nav-cta, .nav-access, .community-journal-link,
  .title-buttons a, .closing-contact, .workflow-contact, .journey-play,
  .controls button, .vs-nav button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 var(--text-control)/1.4 var(--font-sans);
  min-height: 2.75rem;
  padding: .625rem 1.125rem;
  border: 1.5px solid transparent;
  letter-spacing: normal;
  text-transform: none;
  border-radius: var(--radius-pill);
  white-space: normal;
  text-decoration: none;
  box-shadow: 0 0 0 0 rgba(34, 51, 187, .4);
  /* Color feedback is immediate; the halo and lift settle quickly. */
  transition: box-shadow 120ms var(--ease-out), transform 120ms var(--ease-out);
}
body :is(.nav-menu-toggle, .member-social a, .project-card-arrow) {
  transition-duration: 120ms;
  transition-timing-function: var(--ease-out);
  transition-delay: 0s;
}
body :is(.btn-primary, .button.primary, .nav-access, .closing-contact,
  .workflow-contact, .vs-nav button[data-vs-next]) {
  color: #fff;
  background: var(--sophont-electric);
  border-color: var(--sophont-electric);
}
body :is(.btn-ghost, .nav-cta, .community-journal-link, .title-buttons a,
  .journey-play, .controls button, .vs-nav button:not([data-vs-next])) {
  color: var(--sophont-midnight);
  background: transparent;
  border-color: var(--sophont-rule-strong);
}
@media (hover: hover) {
  body :is(.btn, .button, .nav-cta, .nav-access, .community-journal-link,
    .title-buttons a, .closing-contact, .workflow-contact, .journey-play,
    .controls button, .vs-nav button):hover:not(:disabled) {
    box-shadow: 0 0 0 8px rgba(34, 51, 187, .2);
    transform: translateY(-1px);
  }
  body :is(.btn-primary, .button.primary, .nav-access, .closing-contact,
    .workflow-contact, .vs-nav button[data-vs-next]):hover:not(:disabled) {
    border-color: var(--sophont-electric-hover);
    background: var(--sophont-electric-hover);
  }
  body :is(.btn-ghost, .nav-cta, .community-journal-link, .title-buttons a,
    .journey-play, .controls button, .vs-nav button:not([data-vs-next])):hover:not(:disabled) {
    border-color: var(--sophont-electric);
    background: var(--sophont-electric);
    color: #fff;
  }
}
body :is(.btn, .button, .controls button, .vs-nav button):disabled {
  box-shadow: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body :is(.btn, .button, .nav-cta, .nav-access, .community-journal-link,
    .title-buttons a, .closing-contact, .workflow-contact, .journey-play,
    .controls button, .vs-nav button):hover:not(:disabled) { transform: none; }
}
.status-dot:not([role="status"]) { display: none; }
.footer { color: var(--sophont-copy); padding-block: 2rem; margin-top: 0; }
.footer-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
.footer-grid > * { min-width: 0; }
.footer-brand .logo { margin-bottom: 1rem; }
.footer-logo { width: 7rem; height: auto; display: block; }
.footer-col h2.footer-heading, .footer-col h5 {
  margin: 0 0 .75rem;
  font: 500 1rem/1.5 var(--font-sans);
  color: var(--sophont-ink);
  text-transform: none;
  letter-spacing: normal;
}
.footer-col a, .footer-brand p, .footer-bottom, .footer-bottom a, .footer-legal a, .footer-meta, .footer-meta a {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sophont-muted);
}
.footer-col a { display: flex; align-items: center; min-height: 2.75rem; padding-block: .35rem; }
.footer a { overflow-wrap: anywhere; }
.footer-legal { display: inline-flex; flex-wrap: wrap; gap: 1rem; }
.footer-col a:hover, .footer-bottom a:hover { color: var(--sophont-electric); }
.figure-scroll, .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
@media (max-width: 640px) {
  .nav { padding-inline: 0; gap: .5rem; }
  body a.nav-cta { padding: .4rem .6rem; }
  .footer { padding-block: 1.5rem; }
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 1.5rem; }
  .footer-meta, .footer-meta .coords { flex-wrap: wrap; gap: 1rem; }
}
@media (max-width: 360px) {
  .nav-brand img { width: 6rem !important; }
  body a.nav-cta { font-size: .875rem; padding-inline: .5rem; }
}
@media (prefers-contrast: more) {
  :root { --sophont-copy: #20222c; --sophont-muted: #444853; --sophont-rule: #9fa1ab; }
}
@media print {
  body { color: #20222c; background: #fff; }
  .nav, .skip-link { display: none !important; }
  h1, h2, h3 { break-after: avoid; }
  figure { break-inside: avoid; }
}