/* Polaris Interactive — site styles. Authored against tokens.css semantic aliases only. */

/* ---- Scaffold ---- */
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { overflow-x: clip }
[id] { scroll-margin-top: 84px }
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-16) }
.sec { padding: var(--section-y) 0 }
.center { text-align: center }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface-card); color: var(--text-strong); padding: var(--space-5) var(--space-8); border-radius: 0 0 var(--radius-md) 0; box-shadow: var(--shadow-2) }
.skip-link:focus { left: 0 }
.no-scroll { overflow: hidden }

/* ---- Type helpers ---- */
.eyebrow { font-family: var(--font-text); font-size: var(--text-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-6) }
.lead { font-size: var(--text-lg); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); color: var(--text-muted); max-width: var(--container-prose); margin: var(--space-6) auto 0 }
.caption { font-size: var(--text-xs); letter-spacing: var(--ls-caption); color: var(--text-faint) }
.mono { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--ls-mono); color: var(--text-muted) }
h2 { font-size: var(--text-h2) }
h3 { font-size: var(--text-h4) }

/* ---- Buttons: full pills, key shadow on filled ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: var(--hit-min); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-pill); font-family: var(--font-text); font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard) }
.btn--primary { background: var(--action-primary); color: var(--text-inverse); box-shadow: var(--shadow-key) }
.btn--primary:hover { background: var(--action-primary-hover); color: var(--text-inverse) }
.btn--primary:active { background: var(--action-primary-press); transform: scale(var(--press-scale)) }
.btn--ghost { background: transparent; color: var(--text-strong); box-shadow: 0 0 0 1px var(--border-subtle) }
.btn--ghost:hover { background: rgba(20, 24, 28, 0.05); color: var(--text-strong) }
.btn--ghost:active { transform: scale(var(--press-scale)) }
.btn:disabled { background: var(--steel-200); color: var(--steel-500); box-shadow: none; cursor: default; transform: none }

/* ---- Card / tag ---- */
.card { background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-2) }
.tag { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-6); border-radius: var(--radius-pill); box-shadow: 0 0 0 1px var(--border-subtle); font-size: var(--text-xs); color: var(--text-muted); background: var(--surface-card) }

/* ---- Nav ---- */
.nav { position: sticky; top: 0; z-index: 50; height: 68px; background: color-mix(in srgb, var(--paper-100) 78%, transparent); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border-bottom: 1px solid var(--border-hairline) }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100% }
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-5); color: var(--text-strong) }
.nav__brand:hover { color: var(--text-strong) }
.nav__wordmark { font-family: var(--font-display); font-size: var(--text-h4) }
.nav__links { display: flex; gap: var(--space-16) }
.nav__links a { font-size: var(--text-sm); color: var(--text-body) }
.nav__links a:hover { color: var(--text-strong) }
.nav__links a[aria-current="page"] { color: var(--text-link) }
.nav__toggle { display: none; align-items: center; justify-content: center; width: var(--hit-min); height: var(--hit-min); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-strong); cursor: pointer }
.nav__toggle:hover { background: rgba(20, 24, 28, 0.05) }
/* The `hidden` attribute's UA styling is scoped to HTMLElement and does not apply to
   inline SVG (SVGElement), so it renders even when the attribute is present. Force it. */
.nav__toggle svg[hidden] { display: none }
@media (max-width: 767px) {
  .js .nav__toggle { display: inline-flex }
  .js .nav__links { display: none }
  /* No-JS fallback: without js.site.js, .nav__toggle stays hidden and .nav__links stays
     visible (inherited from the base rules above) so mobile still has working nav links.
     At 320px the wordmark + 3 inline links overflow the header without this — confirmed
     via browser test (fix-wave I5). Shrink spacing/size only in this ungated context so
     JS-enabled mobile (which uses the sheet, not this inline row) is unaffected. */
  html:not(.js) .nav__links { gap: var(--space-8); font-size: var(--text-xs) }
  /* backdrop-filter on .nav establishes a containing block for fixed descendants,
     which would collapse the sheet below to the header's own 68px box. Drop the
     filter while the sheet is open so .nav__links positions against the viewport. */
  .nav--open { -webkit-backdrop-filter: none; backdrop-filter: none }
  .nav--open .nav__links { display: flex; position: fixed; inset: 68px 0 0 0; z-index: 40; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-16); background: var(--paper-100) }
  .nav--open .nav__links a { font-size: var(--text-h3); color: var(--text-strong) }
  .nav--open .nav__links a[aria-current="page"] { color: var(--text-link) }
}

/* ---- Hero ---- */
.hero { padding: var(--section-y-lg) 0; text-align: center }
.hero h1 { font-size: clamp(40px, 8vw, var(--text-display-1)) }
.hero__sub { font-size: var(--text-lg); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); color: var(--text-muted); max-width: var(--container-prose); margin: var(--space-12) auto 0 }
.hero .btn { margin-top: var(--space-16) }
.uline { font-style: normal; position: relative; display: inline-block }

/* ---- Night band (manifesto) ---- */
.band { background: var(--sheen-night); padding: var(--section-y) 0 }
.beliefs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-12); margin: var(--space-20) 0 0; padding: 0; list-style: none; text-align: left }
.belief { background: var(--surface-card); border-radius: var(--radius-card); padding: var(--space-12); box-shadow: 0 0 0 1px var(--border-hairline) }
.belief h3 { color: var(--text-strong) }
.belief p { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-body) }
@media (max-width: 980px) { .beliefs { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { .beliefs { grid-template-columns: 1fr } }

/* ---- App deck / app grid ---- */
.deck, .app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-12); margin: var(--space-24) 0 0; padding: 0; list-style: none }
.app-card { position: relative; background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-2); padding: var(--space-8); text-align: left }
.app-card__media { aspect-ratio: 1; border-radius: var(--radius-md); background: var(--sheen-silver); display: grid; place-items: center }
.app-card__media img { width: 56px; height: 56px; opacity: 0.55 }
.app-card .tag { margin-top: var(--space-8) }
.app-card__note { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--text-muted) }
/* A card that links out to an app's own page (first: Seedlings). */
.app-card__link { display: block; color: inherit; text-decoration: none }
.app-card__link:hover .app-card__note { color: var(--text-strong) }
.app-card__media img.app-card__icon { width: 72px; height: 72px; opacity: 1; border-radius: 22%; box-shadow: var(--shadow-2) }
.deck-cta { margin-top: var(--space-24) }
@media (max-width: 980px) { .deck, .app-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { .deck, .app-grid { grid-template-columns: 1fr } }

/* ---- Stay connected (#connect on index + apps) ----
   Button gap matches the h2→lead gap (.lead's --space-6 top margin). */
#connect .btn { margin-top: var(--space-6) }

/* ---- Contact CTA (mailto-only by design; no forms on this site) ---- */
.contact-cta { padding-bottom: var(--section-y) }
.contact-cta .caption { margin-top: var(--space-8) }

/* ---- Footer ---- */
.footer { background: var(--sheen-night); padding: var(--space-32) 0 var(--space-16) }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-24); flex-wrap: wrap }
.footer__brand { display: inline-flex; align-items: center; gap: var(--space-5); color: var(--text-strong) }
.footer__brand:hover { color: var(--text-strong) }
.footer__wordmark { font-family: var(--font-display); font-size: var(--text-h4) }
.footer__cols { display: flex; gap: var(--space-32); flex-wrap: wrap }
.footer__col a { display: block; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-body) }
.footer__col a:hover { color: var(--text-strong) }
.footer__legal { margin-top: var(--space-24); padding-top: var(--space-12); border-top: 1px solid var(--border-hairline); text-align: center; font-size: var(--text-xs); color: var(--text-faint) }

/* ---- Inner pages ---- */
.page-header { padding: var(--space-32) 0 var(--space-20); text-align: center }
.page-header h1 { font-size: clamp(36px, 6vw, var(--text-display-2)) }
.prose { max-width: var(--container-prose); margin: 0 auto; padding-bottom: var(--section-y); text-align: left }
.prose h2 { font-size: var(--text-h3); margin: var(--space-20) 0 var(--space-6) }
.prose p { margin: 0 0 var(--space-8) }
.prose ul { margin: 0 0 var(--space-8); padding-left: var(--space-12) }
.prose li { margin-bottom: var(--space-3) }
.prose a { text-decoration: underline }

/* ---- FAQ (one card, hairline separators — never a stack of cards) ---- */
.faq { max-width: var(--container-narrow); margin: 0 auto var(--section-y); background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-2); text-align: left }
.faq details { padding: var(--space-10) var(--space-12); border-top: 1px solid var(--border-hairline) }
.faq details:first-child { border-top: 0 }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); cursor: pointer; list-style: none; font-family: var(--font-heading); color: var(--text-strong) }
.faq summary::-webkit-details-marker { display: none }
.faq .chev { flex: none; transition: transform var(--dur-base) var(--ease-standard) }
.faq details[open] .chev { transform: rotate(180deg) }
.faq details p { margin-top: var(--space-6); color: var(--text-body) }

/* ---- 404 ---- */
.error-page { padding: var(--section-y-lg) 0; text-align: center }
.error-page .btn { margin-top: var(--space-16) }

/* ---- Reveals (JS adds .js to <html>; content fully visible without JS) ---- */
.js [data-reveal] { opacity: 0; translate: 0 var(--reveal-y) }
.js [data-reveal].is-revealed { opacity: 1; translate: 0 0; transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out) }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; translate: none; transition: none }
}

/* ---- Motion: hero underline draw ---- */
.uline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 0.045em; background: currentColor; transform: scaleX(0); transform-origin: left center; animation: uline-draw var(--dur-reveal) var(--ease-standard) 700ms forwards }
@keyframes uline-draw { to { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) { .uline::after { animation: none; transform: scaleX(1) } }

/* ---- Motion: app deck fan-out ----
   Rest state: a held hand of cards (translated toward center, slight rotation).
   Scrolled into view: unfold to the grid row. Two implementations:
   1. CSS scroll-driven (Chrome/Edge/Safari 26+) — tracks scroll, no JS.
   2. IntersectionObserver fallback (Firefox) — one-shot transition. */
.deck .app-card:nth-child(1) { --i: 0; --fold-x: 108%;  --fold-y: 14px;  --fold-r: -6deg }
.deck .app-card:nth-child(2) { --i: 1; --fold-x: 36%;   --fold-y: -10px; --fold-r: -2deg }
.deck .app-card:nth-child(3) { --i: 2; --fold-x: -36%;  --fold-y: 14px;  --fold-r: 2deg }
.deck .app-card:nth-child(4) { --i: 3; --fold-x: -108%; --fold-y: -10px; --fold-r: 6deg }
.deck .app-card { z-index: calc(1 + var(--i, 0)) }

@keyframes deck-unfold {
  from { transform: translate(var(--fold-x), var(--fold-y)) rotate(var(--fold-r)) }
  to { transform: none }
}
@supports (animation-timeline: view()) {
  .deck .app-card { animation: deck-unfold both var(--ease-standard); animation-timeline: view() }
  .deck .app-card:nth-child(1) { animation-range: entry 20% entry 70% }
  .deck .app-card:nth-child(2) { animation-range: entry 26% entry 76% }
  .deck .app-card:nth-child(3) { animation-range: entry 32% entry 82% }
  .deck .app-card:nth-child(4) { animation-range: entry 38% entry 88% }
}
@supports not (animation-timeline: view()) {
  .js .deck .app-card { transform: translate(var(--fold-x), var(--fold-y)) rotate(var(--fold-r)); transition: transform var(--dur-reveal) var(--ease-standard); transition-delay: calc(var(--i, 0) * 60ms) }
  .js .deck--unfolded .app-card { transform: none }
}
/* Small screens stack vertically; reduced motion gets the final layout, no animation. */
@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  .deck .app-card { animation: none !important; transition: none !important; transform: none !important }
}

/* ---- Cross-page transitions (Chrome/Safari; ignored elsewhere) ---- */
@view-transition { navigation: auto }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none } }