/* Server pages (sign-in, loading page, account, billing, product news) in
   the website's look. Every value comes from tokens.css, linked before this
   file (the mirror of web/src/styles/tokens.css); the few literal colours
   are tints the tokens don't have, the same the site uses. The class names
   wrap, card, btn, alert, badge and muted are a contract with Phase 5
   (docs/design-system.md). Light mode only; no inline styles (the CSP has
   no 'unsafe-inline'). */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
h1, h2, h3 {
  font-weight: var(--weight-semibold); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight); text-wrap: balance;
}
h1 { font-size: var(--text-xl); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-md); }
p, dd { text-wrap: pretty; }
a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
::selection { background: var(--blue-100); }

/* Header: the site's frosted bar. The wordmark is the mark and the name
   in Inter Display SemiBold, as web/public/logo.svg draws it. */
.site-header {
  background: color-mix(in srgb, var(--sky-top) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); min-height: var(--header-h);
  margin: 0 auto; padding-inline: var(--gutter);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px;
  color: var(--ink); font-size: 1.375rem; font-weight: var(--weight-semibold); line-height: 1;
  letter-spacing: var(--tracking-display); font-variation-settings: 'opsz' 32;
  text-decoration: none; white-space: nowrap; border-radius: var(--r-xs);
}
a.wordmark:hover { color: var(--ink); }
.wordmark__mark { flex: none; width: 1.16em; height: 1.16em; }
.badge {
  display: inline-block; padding: 2px 10px; border: 1px solid var(--blue-200); border-radius: var(--r-pill);
  background: var(--blue-100); color: var(--blue-700);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5;
}
.badge--staging { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }

/* The frame. The content sits a little above the vertical centre (owner,
   2026-09-25): centred between header and footer, lifted by the larger
   bottom padding. Taller content (the account page) starts at the top. The
   inner box keeps the floating check card on the content's corner. */
.wrap {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: calc(480px + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--space-8) var(--gutter) calc(var(--space-3) + 8vh);
}
.wrap--wide { max-width: calc(960px + 2 * var(--gutter)); }
.wrap__inner { position: relative; }

/* Footer: over the cloud bank, like the old one; the links go to the
   website (a new tab on the sign-in pages). */
.site-footer { padding: 0 var(--gutter) var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.site-footer__links, .site-footer__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-half) var(--space-3);
  margin: 0; padding: 0; list-style: none; text-align: center;
}
.site-footer__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none;
}
.site-footer__links a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__meta { margin-top: var(--space-half); }

/* Sky: the landing hero's world behind every page (web/media/sky-*.png),
   as the site's Sky component draws it; the drifting clouds are softened
   so text over them keeps AA. Decorative only; transforms and opacity
   only; still under reduced motion. */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; user-select: none;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--surface) 55%, var(--sky-bottom) 100%);
}
.sky img { position: absolute; display: block; max-width: none; height: auto; }
.sky__bank {
  left: 50%; bottom: -2px; width: max(calc(100vw + 96px), 960px);
  transform: translateX(-50%); animation: sway 24s ease-in-out infinite alternate;
}
.sky__puff { left: 0; animation: drift linear infinite; }
.sky__puff--a { top: 12vh; width: 220px; opacity: 0.6; animation-duration: 120s; animation-delay: -40s; }
.sky__puff--b { top: 44vh; width: 160px; opacity: 0.5; animation-duration: 160s; animation-delay: -115s; }
@keyframes sway { to { transform: translate(calc(-50% + 16px), 3px); } }
@keyframes drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 40px)); } }
/* Two classes, so this beats .sky img's display: block. */
@media (max-width: 639px) { .sky .sky__puff--b { display: none; } }

/* The floating check card beside the main card, bobbing like the hero's. */
.float {
  position: absolute; top: -52px; right: 4px; z-index: 1; width: 56px; height: auto;
  pointer-events: none; animation: bob 6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sky img, .float { animation: none; }
  .sky__puff--a { transform: translateX(10vw); }
  .sky__puff--b { transform: translateX(70vw); }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Cards: the site's panel, frosted over the sky. Their children flow with
   16 px between them, 8 px under a heading. */
.card {
  padding: var(--space-3);
  background: var(--white);
  background: color-mix(in srgb, var(--white) 90%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.card + .card { margin-top: var(--space-2); }
.card > * + * { margin-top: var(--space-2); }
.card > h1 + p, .card > h2 + p { margin-top: var(--space-1); }
.card > .btn + p, .card > form + p { margin-top: var(--space-3); }
.card--feature {
  border-color: var(--blue-300);
  background: linear-gradient(180deg, var(--white), var(--blue-50));
  box-shadow: 0 0 0 1px var(--blue-300), var(--shadow-lg);
}
.card--danger { border-color: #FECACA; }
.lead { color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.section { margin-top: var(--space-2); }
.host { color: var(--ink); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }

/* Alerts */
.alert {
  margin-top: var(--space-2); padding: 12px 16px;
  border: 1px solid; border-radius: var(--r-sm); font-size: 0.9375rem;
}
.alert--error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.alert--ok { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.alert--warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }

/* Forms */
.card > .form { margin-top: var(--space-3); }
.field + .field { margin-top: var(--space-2); }
.field label { display: block; margin-bottom: var(--space-half); font-size: 0.9375rem; font-weight: var(--weight-semibold); }
.input {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; color: var(--ink); background: var(--white);
  border: 1px solid var(--field); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.input:focus { border-color: var(--blue-600); }
.input:focus-visible { outline: 3px solid var(--blue-100); outline-offset: 0; }
.check { display: flex; align-items: flex-start; font-size: 0.9375rem; }
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--blue-600); }
/* The label carries the gap as padding, so the space between box and
   text toggles the box too. */
.check label { flex: 1; padding: 2px 0 2px 12px; }
.field + .check { margin-top: var(--space-3); }
.check + .check { margin-top: var(--space-2); }
.actions { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.label-row { display: flex; align-items: center; gap: var(--space-half); margin-bottom: var(--space-half); }
.field .label-row label { margin-bottom: 0; }

/* Info toggletip (a popover; centred as a small dialog where anchor
   positioning is unsupported) */
.info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--muted); cursor: pointer;
  anchor-name: --info;
}
.info:hover { color: var(--blue-700); background: var(--blue-50); }
/* A 44 px hit area around the 28 px circle. */
.info::after { content: ""; position: absolute; inset: -8px; }
.tip {
  max-width: min(320px, calc(100vw - 32px)); padding: 12px 16px;
  font-size: var(--text-sm); line-height: 1.45; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow);
}
.tip a { white-space: nowrap; }
@supports (position-area: bottom) {
  .tip {
    position-anchor: --info; position-area: bottom span-right;
    position-try-fallbacks: flip-block, flip-inline;
    inset: auto; margin: 4px 0 0;
  }
}

/* Buttons: the site's, full width on phones and in cards. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  width: 100%; min-height: 44px; padding: 10px 20px;
  font: inherit; font-weight: var(--weight-semibold); line-height: 1.25; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--blue-600); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-700); color: var(--white); }
.btn--secondary { background: var(--white); color: var(--ink); border-color: var(--field); }
.btn--secondary:hover { background: var(--blue-50); color: var(--ink); border-color: var(--blue-600); }
.btn--danger { background: var(--white); color: var(--red); border-color: var(--red-line); }
.btn--danger:hover { background: #FEF2F2; color: var(--red); }
/* The sign-in forms' Continue looks disabled until the terms are ticked,
   but stays pressable: pressing it lets the browser point at the box and
   say why (consent.js words the message). */
.btn:disabled, .btn:disabled:hover,
form:has(#accept-terms:not(:checked)) #continue {
  background: #F1F5F9; color: #64748B; border-color: var(--line); box-shadow: none;
}
.btn:disabled { cursor: not-allowed; }

/* Plan step and billing: the website's pricing cards */
.intro { max-width: 600px; margin: 0 auto var(--space-4); text-align: center; }
.intro .lead { margin-top: var(--space-1); font-size: var(--text-md); }
.intro strong { overflow-wrap: anywhere; }
/* Server-echoed emails (signed in as, choose a plan for, Things account)
   break rather than push the page sideways on a narrow phone. */
.card p, .intro p { overflow-wrap: anywhere; }
.plans { display: grid; gap: var(--space-2); }
.plans > .card { margin-top: 0; }
.plan { display: flex; flex-direction: column; }
.plan h2 { font-size: var(--text-md); letter-spacing: 0; }
.plan__price {
  margin-top: var(--space-1); font-size: var(--text-2xl); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums;
}
.plan__note { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.plan__status { margin-top: var(--space-1); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.plan__detail { margin-top: var(--space-2); font-size: var(--text-sm); }
.plan__body { margin-bottom: var(--space-3); }
.plan__body:last-child { margin-bottom: 0; }
.plan .btn { margin-top: auto; }
.cancel { max-width: 320px; margin: var(--space-4) auto 0; }
.outro { margin-top: var(--space-4); text-align: center; }

/* Loading page */
.card > .progress { margin-top: var(--space-3); }
.progress {
  display: block; width: 100%; height: 10px; overflow: hidden;
  border: 0; border-radius: var(--r-pill); background: var(--blue-100); color: var(--blue-600);
  -webkit-appearance: none; appearance: none;
}
.progress::-webkit-progress-bar { background: var(--blue-100); }
.progress::-webkit-progress-value { background: var(--blue-600); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease); }
.progress::-moz-progress-bar { background: var(--blue-600); border-radius: var(--r-pill); }
.sync-line { font-weight: var(--weight-semibold); }

/* Account page */
.facts div { padding: 12px 0; border-top: 1px solid var(--line); }
.facts div:first-child { padding-top: 0; border-top: 0; }
.facts div:last-child { padding-bottom: 0; }
.facts dt { color: var(--muted); font-size: var(--text-sm); }
.facts dd { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.facts .detail { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.signout { margin-top: var(--space-3); }
/* Connect section: the connector URL with its copy button, one step per app. */
.connect summary { font-weight: var(--weight-semibold); cursor: pointer; }
.copy__row { display: flex; gap: var(--space-1); }
.copy__input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--text-sm); }
.copy__row .btn { flex: none; width: auto; }
.copy__status:not(:empty) { margin-top: var(--space-half); }
.steps { margin-bottom: 0; padding-left: 1.25em; }
.steps li + li { margin-top: var(--space-1); }
.steps code { font-family: var(--font-mono); font-size: 0.875em; }
/* Newsletter honeypot: off screen for people, still a field for bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 640px) {
  h1 { font-size: 1.75rem; }
  .card { padding: var(--space-4); }
  .float { top: -60px; right: -8px; width: 76px; }
  .actions { flex-direction: row-reverse; }
  .actions .btn { flex: 1; width: auto; }
}
@media (min-width: 760px) {
  .plans { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); }
}