/* Site styles on top of Athene (athene/tokens.css + athene/components/bundle.css).
   Only layout that Athene's components don't cover lives here; every value is an Athene token. */

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
}

.ath-link { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ath-link:hover { text-decoration-color: var(--ink); }

/* Skip link */
.skip { position: absolute; left: -9999px; top: var(--space-2); }
.skip:focus { left: var(--space-2); z-index: 20; background: var(--surface-1); padding: var(--space-2) var(--space-3); }

/* Waiting-list form (sits in the hero, reuses .ath-auth) */
.wl-form textarea.ath-input { min-height: 88px; font-family: var(--font-ui); font-size: 15px; line-height: 24px; }
.wl-form .wl-optional { color: var(--ink-muted); font-weight: 400; }
.wl-form details summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.wl-form details[open] summary { margin-bottom: var(--space-3); }
.wl-form details > .ath-field + .ath-field { margin-top: var(--space-3); }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-errors { margin: 0; }
.wl-papers { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.wl-papers li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.wl-papers form { margin: 0; }
.wl-code { font-family: var(--font-mono); font-size: 24px; line-height: 32px; letter-spacing: 0.2em; text-align: center; }

/* Content pages (How it works, Trust): prose column and a side column */
.site-head { display: grid; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: var(--border-1) solid var(--line); margin-bottom: var(--space-6); }
.site-head h1 { margin: 0; }
.site-lede { margin: 0; max-width: var(--measure-prose); font-family: var(--font-reading); font-size: 18px; line-height: 28px; }
.site-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) 0; border-top: var(--border-1) solid var(--line); }
.site-sec:first-of-type { border-top: 0; padding-top: 0; }
.site-sec h2 { margin: 0 0 var(--space-3); font-family: var(--font-title); font-weight: 800; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
.site-sec .ath-prose p { margin: 0 0 var(--space-3); }
.site-sec figure { margin: 0; display: grid; gap: var(--space-3); align-content: start; }
.site-sec figcaption { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.site-card { padding: var(--space-4); background: var(--surface-1); border: var(--border-1) solid var(--line); border-radius: var(--radius-lg); }
.site-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.site-versions li { display: flex; gap: var(--space-3); align-items: baseline; }
.site-gloss { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
.site-gloss dt { font-weight: 600; }
.site-gloss dd { margin: 0; }
.site-cta { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6) 0 0; }

/* Trust page */
.site-doc .ath-prose { max-width: var(--measure-prose); }
.site-doc section { padding: var(--space-5) 0 var(--space-2); border-top: var(--border-1) solid var(--line); scroll-margin-top: 72px; }
.site-doc section:first-of-type { border-top: 0; padding-top: 0; }
.site-doc h2 { margin: 0 0 var(--space-3); font-family: var(--font-title); font-weight: 800; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
.site-doc p, .site-doc li { margin: 0 0 var(--space-3); }
.site-doc ul { padding-left: var(--space-5); }
.site-updated { margin: 0; font-size: 14px; color: var(--ink-muted); }

/* Single-message pages (check your inbox, confirmed, left, errors) */
.site-message { max-width: 560px; margin: 0 auto; display: grid; gap: var(--space-4); padding-top: var(--space-6); }
.site-message h1 { margin: 0; }
.site-message p { margin: 0; }

/* Demo page */
.demo-graphs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.demo-panel { overflow: hidden; }
.demo-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.demo-panel__meta { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.demo-graph { height: 460px; border-radius: 0; }
.demo-note { margin: 0; padding: var(--space-2) var(--space-4); font-size: 13px; line-height: 20px; color: var(--ink-muted); border-top: var(--border-1) solid var(--line); }
.demo-inspect { display: grid; gap: var(--space-2); padding: var(--space-4); border-top: var(--border-1) solid var(--line); }
.demo-inspect__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.demo-lower { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
.demo-holds { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.demo-holds li { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: var(--border-1) solid var(--line); }
.demo-holds p { margin: 0; }
.demo-hold__head { display: flex; align-items: center; gap: var(--space-2); }
.demo-hold__conf { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); }
.demo-hold__text { font-size: 14px; line-height: 20px; }
.demo-empty { color: var(--ink-muted); border-bottom: 0 !important; }
.demo-actions { flex-wrap: wrap; gap: var(--space-2); }
.demo-result { position: relative; height: 34px; border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.demo-result::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 14px; width: 2px; background: var(--line-strong); }
.demo-result__fill { position: absolute; top: 0; height: 20px; }
.demo-result__fill.is-good { background: var(--positive); }
.demo-result__fill.is-bad { background: var(--negative); }
.demo-result__labels { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 0 var(--space-2); font-size: 11px; line-height: 14px; color: var(--ink-muted); }

/* How it works explainers */
.xp-card { display: grid; gap: var(--space-3); }
.xp-graph { height: 220px; background: var(--surface-0); border-radius: var(--radius-md); }
.xp-graph--tall { height: 280px; }
.xp-result { margin: 0; }
.xp-words { margin: 0; min-height: 48px; font-size: 14px; line-height: 20px; }
.xp .ath-segmented label { font-size: 13px; }

@media (max-width: 999px) {
  .demo-graphs, .demo-lower { grid-template-columns: minmax(0, 1fr); }
  .demo-graph { height: 380px; }
}
@media (max-width: 899px) {
  .site-sec { grid-template-columns: minmax(0, 1fr); }
  .site-gloss { grid-template-columns: minmax(0, 1fr); }
  .site-gloss dd { margin-bottom: var(--space-2); }
}
@media (max-width: 559px) {
  .ath-topbar__nav { display: none; }
}

/* Page menu: only where Athene hides the top-bar nav (960px and below). There the theme switch
   moves into the menu too, and on phones the join button shortens to "Join", so the bar fits. */
.site-navmenu { display: none; }
.site-navmenu .ath-menu a[aria-current="page"] { font-weight: 600; background: var(--surface-2); }
.site-join { white-space: nowrap; }
.site-join__short { display: none; }
@media (max-width: 960px) {
  .site-navmenu { display: block; }
  .site-theme-top { display: none; }
}
@media (max-width: 440px) {
  .site-join__full { display: none; }
  .site-join__short { display: inline; }
}