/* ══════════════════════════════════════════════════════════ tokens ══
   The face, both modes' colours, the focus ring and .btn are in Screens'
   ground.css, loaded before this sheet; theme.js applies the reader's mode
   before first paint. Here: the scale, which is this host's own.

   --pos and --magenta are aliased to teal here and nowhere shared: on this
   host they only ever mean "grew". lines.css in Screens reads --pos. */
:root {
  --t-h2:    clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --t-h3:    clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --t-lead:  1.125rem;
  --t-body:  1rem;
  --t-small: .875rem;
  --t-micro: .8125rem;

  --bay-lg: clamp(4rem, 8vw, 7rem);
  --bay-md: clamp(2.75rem, 5vw, 4.5rem);
  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;
  --gap: 14px;
  /* Wide enough that a desktop is not a tablet with margins; long lines are capped in ch. */
  --maxw: 1360px;
  --gutter: clamp(16px, 4vw, 40px);

  --magenta: var(--grow);
  --pos: var(--grow);
  --t-meta: var(--t-micro);
  --m: 1;
}

/* ════════════════════════════════════════════════════════════ base ══ */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 3px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-weight: 650; letter-spacing: -.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
h3 { line-height: 1.2; }
p { margin: 0; }

[id] { scroll-margin-top: 1.5rem; }
/* A member's pages sit under the frame's sticky bar (frame.css), so a jump lands below it. */
.sheet [id] { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* One surface. It used to be glass over a WebGL field; with nothing behind it to blur, a card is
   a card — the class keeps its name so the product and pricing markup did not have to change. */
.glass { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }

/* ══════════════════════════════════════════════════════════ the list ══
   This month's list in its window (ListBoard) on /products, the plans'
   window on /pricing, and the cells the members' tables draw: rank, name,
   change, growth. The front page's list is climb.css's.                  */
.board { overflow: clip; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--lift); }
.board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 40px;
  padding: 24px 28px 20px;
}
.board-bar h2 { font-size: var(--t-h3); }
.board-bar p { font-size: var(--t-small); color: var(--ink-soft); max-width: 62ch; }
.board-empty { padding: 4px 28px 24px; color: var(--ink-soft); max-width: 70ch; }
.board-foot { padding: 16px 28px 18px; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-soft); }
.board-foot a { color: var(--ink); font-weight: 600; }

.rank { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pname { display: flex; flex-direction: column; min-width: 0; }
.pname b { font-size: 1.0625rem; font-weight: 650; }
.pname small { font-size: var(--t-micro); color: var(--ink-soft); }

.change { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.change b { color: var(--ink); font-weight: 650; }
.growth { text-align: end; white-space: nowrap; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.growth.grew { color: var(--grow); }

@media (max-width: 960px) {
  .board-bar, .board-foot, .board-empty { padding-inline: 20px; }
}

/* A whole-page crossfade when the switch is pressed, from theme.js. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; }

/* ══════════════════════════════════════════════════════════ header ══
   The front page's and /pricing's (SiteHeader). Static, not sticky: nothing
   on these pages is long enough to need the bar back, and a bar that
   follows you is one more thing moving. A member's pages have the
   frame's bar instead (MemberLayout, frame.css). The wordmark is
   ground.css's .brand.                                                    */
.topbar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 18px var(--gutter);
}

.topnav { display: flex; gap: 24px; margin-inline-start: auto; white-space: nowrap; }
.bar-end { display: flex; align-items: center; gap: 18px; }

/* Scoped to the header: the frame's account menu holds the same address and sign-out form, and
   draws them its own way (frame.css). */
.topnav a,
.bar-end a:not(.btn),
.bar-end .signout button {
  color: var(--ink-soft);
  font-size: .9375rem;
  text-decoration: none;
  transition: color 160ms ease-out;
}
.topnav a:hover,
.bar-end a:not(.btn):hover,
.bar-end .signout button:hover { color: var(--ink); }

/* The page you are on (NavLink's "active", with aria-current="page"), as the admin host marks it:
   ink and a rule under it. Never teal, which means "grew". */
.topnav a.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }

.bar-end .who { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: .875rem; }
.bar-end .signout { display: inline; }
.bar-end .signout button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: .9375rem; }

/* Signed in but not let in yet: where they stand, as a quiet pill rather than one more link. */
.bar-end a.waiting {
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  padding: .3rem .7rem;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  white-space: nowrap;
}
/* On /waiting itself (NavLink's "active"): an ink rim, as the nav marks the page you are on. */
.bar-end a.waiting.active { border-color: var(--ink); background: var(--tint); }

/* The language switch (LanguageSwitch). The header draws it as a link like the others; here it is
   the members' frame, whose frame.css is shared with the admin host and has no rule for it, and
   the account screens, which have no bar, so it sits where the bar's end would be. */
.top-end .lang-switch,
.auth > .lang-switch {
  color: var(--ink-soft);
  font-size: .875rem;
  text-decoration: none;
  transition: color 160ms ease-out;
}
.top-end .lang-switch:hover,
.auth > .lang-switch:hover { color: var(--ink); }
.top-end .lang-switch { display: inline-flex; align-items: center; min-height: var(--ctl-h); padding-inline: 6px; }
.auth > .lang-switch { position: absolute; top: 18px; inset-inline-end: var(--gutter); }

/* Signed in, four links and the address do not fit below this, and each link wrapped onto two
   or three lines. The address goes first; Account still leads to it. */
@media (max-width: 1140px) {
  .bar-end .who { display: none; }
}

/* A phone: the links take their own row under the bar, every one in sight. Behind a menu button
   they are found less often (NN/g), and four fit. Tall enough to tap; the active rule sits on the
   row's edge like a tab. */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; padding-bottom: 0; }
  .bar-end { margin-inline-start: auto; }
  .topnav {
    order: 3;
    flex-basis: 100%;
    margin-inline-start: 0;
    gap: clamp(16px, 5vw, 28px);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topnav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* On a phone the hero's own "Start free" is on the first screen, so the bar keeps Sign in. Signed
   in, the switch, Account and Sign out leave no room for the name (they ran off the edge): the
   parcel stays as the way home, and the name stays for a screen reader. */
@media (max-width: 420px) {
  /* Edge to edge, so a visitor's four links still fit a 360px phone. */
  .topnav { justify-content: space-between; gap: 8px; }
  .bar-end { gap: 14px; }
  .bar-end .btn { display: none; }
  .topbar:has(.signout) .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ═════════════════════════════════════════ the 404 and the error page ══ */
.plain { padding-block: clamp(6rem, 22vh, 12rem); max-width: 46rem; }
.plain h1 { font-size: var(--t-h2); margin-bottom: 1rem; }
.plain-lede { color: var(--ink-soft); margin-bottom: 1.25rem; font-size: var(--t-lead); }
.plain-act {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 20px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.plain-act:hover { background: var(--tint); }

/* Delays too: a 0 ms entrance that still waits its turn leaves the page blank for that long. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}