/* The sky look, as OpenMailbox and OpenCalendar have it (modelled on Hark's
   interface). The page is a sky that follows the visitor's hour, and the
   sections float on it as frosted glass: large radii, no hard rules between
   them, text in two tones (what matters dark, the rest grey), white pill
   buttons and one black one per view, big numbers set large.

   Linked last, after docs.css, on the public pages only (home, /docs,
   /developers, /blog); never on the sign-in, recovery, pause or OIDC pages.
   It only re-points tokens and restyles: delete the <link> and the site
   works as before.

   Light is the day sky (dawn, day or dusk by the hour); dark is the night
   sky, whatever the hour. /assets/sky.js sets data-sky on <html>; ?sky=
   fixes it for screenshots. With script off there is no data-sky and the
   page shows the day sky (or the night sky in dark mode).

   Speed: the sky is one fixed layer behind the page (body::before), not a
   fixed background on every section. Only the sticky header blurs what
   scrolls under it. The panels sit on a smooth gradient, where a blur
   would change nothing, so they are translucent fills without one. */

/* ── colours ───────────────────────────────────────────────────────────── */
html.oa-auto {
  --ink: #1d1d1f;
  --text-strong: var(--ink);
  --text-body: color-mix(in oklab, var(--ink) 88%, transparent);
  --text-muted: color-mix(in oklab, var(--ink) 70%, transparent);
  --text-faint: color-mix(in oklab, var(--ink) 66%, transparent);
  --text-link: var(--ink);
  --text-link-hover: var(--ink);
  --border-hairline: color-mix(in oklab, var(--ink) 8%, transparent);
  --border-strong: color-mix(in oklab, var(--ink) 14%, transparent);
  --surface-hover: color-mix(in oklab, var(--ink) 5%, transparent);
  --surface-active: rgb(255 255 255 / 0.9);
  --surface-card: rgb(255 255 255 / 0.62);
  --bg-page: #a6c2e8;
  --bg-subtle: color-mix(in oklab, var(--ink) 4%, transparent);
  --bg-sunken: color-mix(in oklab, var(--ink) 6%, transparent);
  --code-bg: color-mix(in oklab, var(--ink) 5%, transparent);
  /* Darker than docs.css's, for the sheet's slightly grey code ground. */
  --tok-keyword: color-mix(in oklab, var(--blue-600) 78%, #000);
  --tok-string: color-mix(in oklab, var(--red-600) 84%, #000);
  --glass: rgb(250 251 255 / 0.72);
  --glass-strong: rgb(255 255 255 / 0.78);
  --glass-edge: rgb(255 255 255 / 0.6);
  --glass-shadow: 0 1px 2px rgb(20 30 60 / 0.06), 0 18px 48px rgb(30 45 90 / 0.14);
  --tile: rgb(255 255 255 / 0.7);
  --tile-shadow: 0 1px 2px rgb(20 30 60 / 0.08), 0 4px 14px rgb(30 45 90 / 0.08);
  /* Long reading sits on a near-solid sheet. */
  --sheet: rgb(255 255 255 / 0.94);
  --pill: rgb(255 255 255 / 0.92);
  --pill-hover: #ffffff;
  --pill-edge: color-mix(in oklab, var(--ink) 8%, transparent);
  --solid: #141414;
  --solid-hover: #2a2a2c;
  --solid-ink: #ffffff;
  --focus-ring: 0 0 0 2px rgb(255 255 255 / 0.9), 0 0 0 4px #355cff;
  /* The day sky. */
  --sky-top: #5e8fd1;
  --sky-mid: #a6c2e8;
  --sky-low: #e9dcdf;
  --sky-glow: #f3b49f;
  --sky-haze: #c7b8e2;
}
html.oa-auto[data-sky="dawn"] {
  --sky-top: #7f9ad6;
  --sky-mid: #c4c6ea;
  --sky-low: #f6dccf;
  --sky-glow: #f7b48c;
  --sky-haze: #d9bde0;
}
html.oa-auto[data-sky="dusk"],
html.oa-auto[data-sky="night"] {
  --sky-top: #6276b8;
  --sky-mid: #a597c4;
  --sky-low: #e8b3a6;
  --sky-glow: #f2907a;
  --sky-haze: #b98fb8;
}
@media (prefers-color-scheme: dark) {
  html.oa-auto,
  html.oa-auto[data-sky] {
    --ink: #f5f5f7;
    --text-strong: var(--ink);
    --text-body: color-mix(in oklab, var(--ink) 90%, transparent);
    --text-muted: color-mix(in oklab, var(--ink) 72%, transparent);
    --text-faint: color-mix(in oklab, var(--ink) 66%, transparent);
    --border-hairline: color-mix(in oklab, var(--ink) 10%, transparent);
    --border-strong: color-mix(in oklab, var(--ink) 16%, transparent);
    --surface-hover: color-mix(in oklab, var(--ink) 6%, transparent);
    --surface-active: rgb(255 255 255 / 0.12);
    --surface-card: rgb(255 255 255 / 0.07);
    --bg-page: #161a2c;
    --bg-subtle: rgb(255 255 255 / 0.05);
    --bg-sunken: rgb(0 0 0 / 0.2);
    --code-bg: rgb(0 0 0 / 0.22);
    --tok-keyword: var(--info-fg);
    --tok-string: var(--danger-fg);
    --glass: rgb(18 22 40 / 0.62);
    --glass-strong: rgb(24 28 48 / 0.86);
    --glass-edge: rgb(255 255 255 / 0.08);
    --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 48px rgb(0 0 0 / 0.35);
    --tile: rgb(255 255 255 / 0.06);
    --tile-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
    --sheet: rgb(20 24 42 / 0.95);
    --pill: rgb(255 255 255 / 0.1);
    --pill-hover: rgb(255 255 255 / 0.16);
    --pill-edge: rgb(255 255 255 / 0.1);
    --solid: #f5f5f7;
    --solid-hover: #ffffff;
    --solid-ink: #141414;
    --focus-ring: 0 0 0 2px rgb(0 0 0 / 0.4), 0 0 0 4px #8ea2ff;
    /* The night sky. */
    --sky-top: #141a33;
    --sky-mid: #26315c;
    --sky-low: #4a3f66;
    --sky-glow: #7a4f6e;
    --sky-haze: #34407a;
  }
}

/* ── the sky: one fixed layer behind everything ────────────────────────── */
html,
body.site {
  background: var(--bg-page);
}
body.site {
  position: relative;
  isolation: isolate;
  color: var(--text-body);
  letter-spacing: -0.006em;
}
body.site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 88% 104%, var(--sky-glow) 0%, transparent 70%),
    radial-gradient(60% 50% at 6% 96%, var(--sky-haze) 0%, transparent 70%),
    radial-gradient(90% 60% at 12% -8%, var(--sky-top) 0%, transparent 72%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-low) 100%);
}

/* ── the header: the one surface that blurs ────────────────────────────── */
.site-header {
  top: 10px;
  margin: 10px auto 0;
  width: min(calc(100% - 20px), calc(var(--site-max) + 20px));
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: var(--glass-shadow);
}
.site-header .container {
  padding-inline: var(--space-5);
}
.site-nav a,
.header-actions > a:not(.btn) {
  color: var(--text-muted);
}

/* ── buttons: white pills, one black ───────────────────────────────────── */
.btn {
  border-radius: var(--radius-full);
  letter-spacing: -0.005em;
}
.btn-primary,
.btn-primary:active {
  background: var(--solid);
  color: var(--solid-ink);
}
.btn-primary:hover {
  background: var(--solid-hover);
  color: var(--solid-ink);
}
.btn-secondary,
.btn-secondary:active {
  border-color: var(--pill-edge);
  background: var(--pill);
  box-shadow: var(--tile-shadow);
  color: var(--text-strong);
}
.btn-secondary:hover {
  background: var(--pill-hover);
  color: var(--text-strong);
}
/* A store button whose listing is not public yet: shown, greyed, not a link. */
.btn-soon,
.btn-soon:hover {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--pill);
  color: var(--text-strong);
}
.btn:focus-visible {
  box-shadow: var(--focus-ring);
}
/* On the home page the hero carries the black button, so the header's is
   white: one black button per view. */
.site-home .site-header .btn-primary {
  border-color: var(--pill-edge);
  background: var(--pill);
  box-shadow: var(--tile-shadow);
  color: var(--text-strong);
}
.site-home .site-header .btn-primary:hover {
  background: var(--pill-hover);
}

/* ── home: the hero on the open sky ────────────────────────────────────── */
.hero {
  border-bottom: 0;
}
.hero-inner {
  padding-top: 88px;
}
.hero h1 {
  max-width: 900px;
  font-weight: var(--weight-regular);
  letter-spacing: -0.035em;
}
.hero .lead {
  max-width: 620px;
  color: var(--text-strong);
}
.hero-note {
  color: var(--text-strong);
}
.pill {
  border-color: var(--pill-edge);
  background: var(--pill);
  box-shadow: var(--tile-shadow);
  color: var(--text-strong);
}
.hero-visual,
.pillar-visual {
  border: 1px solid var(--glass-edge);
  border-radius: 30px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.shot {
  border-radius: 20px;
}

/* ── home: every section is a pane of glass ────────────────────────────── */
.section {
  padding-block: 10px;
  border-bottom: 0;
}
.section > .container {
  max-width: calc(var(--site-max) + 20px);
  padding: 72px var(--site-gutter);
  border: 1px solid var(--glass-edge);
  border-radius: 34px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
@media (max-width: 900px) {
  .section > .container {
    padding: 48px var(--space-6);
    border-radius: 28px;
  }
}
@media (max-width: 480px) {
  .section {
    padding-inline: 8px;
  }
  .section > .container {
    padding: 36px var(--space-5);
    border-radius: 24px;
  }
}
.section-head h2 {
  font-weight: var(--weight-regular);
  letter-spacing: -0.03em;
}
.eyebrow {
  color: var(--text-muted);
}
.card,
.facts > div {
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  background: var(--tile);
  box-shadow: var(--tile-shadow);
}
.facts {
  gap: var(--space-3);
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.facts > div {
  padding: var(--space-6);
}
.step-n {
  font: var(--weight-regular) 40px/1 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
/* A number the section is about, set as large as a balance. */
.big {
  display: block;
  font: var(--weight-regular) clamp(34px, 4.4vw, 48px) / 1.02 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.big small {
  font-size: 0.45em;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
.agent-facts,
.more-cards {
  margin-top: var(--space-4);
}
#agents .rule-line {
  margin-top: var(--space-6);
}
.section-foot {
  margin: var(--space-4) 0 var(--space-5);
  max-width: 720px;
  color: var(--text-muted);
}
.more-cards {
  margin-top: var(--space-16);
}
.more-cards .pillar-path {
  font: var(--type-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.rule-line {
  border-left: 0;
  border-radius: 18px;
  background: var(--tile);
  box-shadow: var(--tile-shadow);
}
.notice {
  border: 0;
  border-radius: 16px;
  background: var(--tile);
}
.notice-warn,
.notice-dev {
  background: var(--warning-bg);
}
.badge {
  border-color: var(--pill-edge);
  background: var(--pill);
}
/* FAQ: soft gaps, no rules. */
.faq-list {
  border-top: 0;
}
.faq-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--border-hairline);
}
.faq-item:last-child {
  border-bottom: 0;
}

/* ── docs, developers and blog: prose on a near-solid sheet ────────────── */
.docs,
.blog {
  max-width: calc(var(--site-max) + 20px);
  margin-top: 20px;
}
.docs-nav {
  padding: var(--space-3);
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.docs-nav .eyebrow {
  padding-inline: var(--space-3);
}
.docs-nav a {
  border-radius: 12px;
}
.docs-nav a[aria-current="page"] {
  background: var(--surface-active);
  box-shadow: var(--tile-shadow);
}
.docs-nav .docs-nav-other {
  border-top-color: var(--border-hairline);
}
.prose {
  padding: 48px 56px 56px;
  border: 1px solid var(--glass-edge);
  border-radius: 30px;
  background: var(--sheet);
  box-shadow: var(--glass-shadow);
}
.blog .prose {
  margin-inline: auto;
}
.prose h1 {
  font-weight: var(--weight-regular);
  letter-spacing: -0.03em;
}
.prose h2 {
  border-top: 0;
  padding-top: 0;
}
.prose .card,
.prose .index-cards .card {
  background: color-mix(in oklab, var(--ink) 3%, transparent);
  box-shadow: none;
}
.table-wrap,
pre,
.diagram,
.prose code.hash {
  border-color: var(--border-hairline);
  border-radius: 16px;
}
th {
  background: var(--bg-subtle);
}
.figure .shot {
  border-color: var(--border-hairline);
}
.blog-list li {
  border-top-color: var(--border-hairline);
}
@media (max-width: 900px) {
  .docs-nav {
    padding: var(--space-2);
    border-bottom: 1px solid var(--glass-edge);
  }
  .docs-nav a {
    border-color: transparent;
  }
  .prose {
    padding: 32px 28px 40px;
    border-radius: 26px;
  }
}
@media (max-width: 480px) {
  .docs,
  .blog {
    padding-inline: 8px;
  }
  .prose {
    padding: 24px 18px 32px;
    border-radius: 22px;
  }
}

/* ── footer: a last pane ───────────────────────────────────────────────── */
.site-footer {
  margin: 10px auto 10px;
  width: min(calc(100% - 20px), calc(var(--site-max) + 20px));
  padding-top: var(--space-12);
  border: 1px solid var(--glass-edge);
  border-radius: 34px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.site-footer .footer-base {
  border-top: 1px solid var(--border-hairline);
}
.footer-group a,
.footer-group span,
.footer-about p,
.site-footer .footer-base .container,
.site-footer .footer-base a {
  color: var(--text-muted);
}
@media (max-width: 480px) {
  .site-header,
  .site-footer {
    width: calc(100% - 16px);
  }
  .site-footer {
    border-radius: 24px;
  }
}