/* ------------------------------------------------------------------ */
/*  Site chrome — the header, the mobile sheet, the footer sea          */
/* ------------------------------------------------------------------ */

/* ---------- header ---------- */
/* The header floats on the sky: it paints the same ground as the top of the
   page, pinned to the viewport, so at rest there is no bar at all. No glass,
   no blur. A hairline marks it once content scrolls beneath. */
.site-nav {
  position: sticky;
  z-index: 30;
  top: 0;
  background: var(--ground, var(--bg));
  background-attachment: fixed;
  background-repeat: no-repeat;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.site-nav-inner {
  display: flex;
  width: var(--container);
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-inline: auto;
}

.paper-nav-inner { padding-block: var(--space-2); }

.site-wordmark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--mark-ink);
  border-radius: var(--radius-control);
}

.paper-wordmark {
  flex: 0 1 auto;
  max-width: 15rem;
  min-width: 8.75rem;
  overflow: hidden;
}

.paper-wordmark-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* The mark is the logo gradient; the wordmark is one ink (--mark-ink),
   drawn through a mask so both appearances re-ink it without a filter or a
   second file. */
.paper-wordmark-mark {
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-inline: -3px;
}

.paper-wordmark-logo,
.wordmark {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  width: 128px;
  max-width: 100%;
  height: 20px;
  background: var(--mark-ink);
  -webkit-mask: url("/brand/wordmark.svg") no-repeat left center / contain;
  mask: url("/brand/wordmark.svg") no-repeat left center / contain;
}
[dir="rtl"] .paper-wordmark-logo,
[dir="rtl"] .wordmark {
  -webkit-mask-position: right center;
  mask-position: right center;
}

@media (forced-colors: active) {
  .paper-wordmark-logo,
  .wordmark { background: CanvasText; }
}

/* The one primary action in the header. */
.paper-install-cta {
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding-inline: var(--space-4);
  background: var(--brand-fill);
  color: var(--on-brand);
  font-size: var(--text-ui);
  font-weight: 600;
  border-radius: var(--radius-control);
  transition: box-shadow var(--dur-state) var(--ease-out);
}
.paper-install-cta:hover {
  background: var(--brand-fill-hover);
  color: var(--on-brand);
  box-shadow: var(--glow-focus);
}

/* Actions sit 2px apart, as related rail controls in the GPUI client; the
   primary action takes a group gap before it. */
.site-nav-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
}
.site-nav-actions > * { flex-shrink: 0; }
.site-nav-actions > .paper-install-cta { margin-inline-start: 0.25rem; }

/* Quiet icon controls: a 40px target around a 20px glyph. Muted at rest,
   full ink on hover and while expanded; a pressed or current control takes
   the neutral selected fill. */
.nav-icon-button {
  position: relative;
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition-property: background-color, color, box-shadow;
  transition-duration: var(--dur-state);
  transition-timing-function: var(--ease-out);
}
.nav-icon-button:hover,
.nav-icon-button[aria-expanded="true"] {
  background: var(--hover);
  color: var(--text);
}
.nav-icon-button[aria-pressed="true"],
.nav-icon-button[aria-current="page"] {
  background: var(--selected);
  color: var(--text);
}
.nav-icon-button:active { opacity: 0.75; }
.nav-icon-button:focus-visible { box-shadow: var(--glow-focus); }

.nav-icon-button-sm { width: 2rem; height: 2rem; }
.nav-icon-button-sm .nav-icon { width: 1rem; height: 1rem; }
@media (pointer: coarse) {
  .nav-icon-button-sm { width: 2.75rem; height: 2.75rem; }
}

.nav-icon { display: block; width: 1.25rem; height: 1.25rem; }

/* The native <select> stays the control (keyboard, screen readers, the
   platform picker) but is transparent over the globe glyph, so the icon is
   the whole hit target. Its focus ring moves to the visible box. */
.nav-locale select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 1rem;
}
.nav-locale:has(select:focus-visible) {
  box-shadow: 0 0 0 var(--gpui-focus-width) var(--ring), var(--glow-focus);
}

/* ---------- primary nav links ---------- */
/* Hover is a neutral wash. The current page keeps a 2px accent bar under
   its label: the one place blue marks "here". */
.nav-link {
  position: relative;
  padding: 0.375rem 0.5rem;
  margin-inline: -0.5rem;
  color: var(--text);
  font-size: var(--text-ui);
  font-weight: 500;
  border-radius: var(--radius-control);
  transition: background-color var(--dur-state) var(--ease-out);
}
.nav-link:hover { background: var(--hover); }
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0.5rem;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  box-shadow: var(--glow);
  opacity: 0;
}
.nav-link[aria-current="page"]::after { opacity: 1; }

/* Compact viewports: the strip keeps the home control clickable. */
@media (max-width: 520px) {
  .site-nav-inner { gap: 0.5rem; }
  .site-nav-actions { min-width: 0; }
  .paper-wordmark { max-width: 9.75rem; }
}

/* ---------- the mobile sheet ---------- */
.mm-list > li + li { border-top: 1px solid var(--line); }

.mm-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding-inline: 0.5rem;
  color: var(--text);
  font-size: 1.0625rem;
  border-radius: var(--radius-control);
  transition: background-color var(--dur-state) var(--ease-out);
}
.mm-link:hover { background: var(--hover); }
.mm-link[aria-current="page"] { background: var(--selected); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
@media (forced-colors: active) {
  .mm-link[aria-current="page"] { outline-style: solid; outline-width: 2px; outline-color: Highlight; outline-offset: -2px; }
}
.mm-link-chevron { margin-inline-start: auto; color: var(--muted); }

.mm-action {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  margin-top: 0.75rem;
}
.mm-action.paper-install-cta { margin-top: 1.5rem; }

/* ---------- footer — the sea below the horizon ---------- */
/* Every page ends on one horizon: a straight line of light, and below it
   the sea, settling into deep water within a few rows, in both appearances. */
.site-footer {
  position: relative;
  color: var(--muted);
}
/* A page whose main already ends in the sea (home) runs straight on: no
   second horizon, and the water continues from its floor colour. */
main:has(.sea-continues:last-child) + .site-footer .site-footer-sea > .horizon { display: none; }
main:has(.sea-continues:last-child) + .site-footer .site-footer-sea { background: var(--ocean-floor); }
.site-footer-sea {
  position: relative;
  overflow: hidden;
  background: var(--sea), var(--ocean-floor);
}
.site-footer-sea > .horizon { position: absolute; inset: 0 0 auto; z-index: 1; }
.sea-texture {
  position: absolute;
  inset: 0 0 auto;
  height: min(22rem, 100%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='18'%3E%3Cg stroke='%2390b9ff' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M4 5h30M60 5h14M112 5h40M170 5h8' stroke-opacity='.12'/%3E%3Cpath d='M30 14h22M88 14h36M140 14h10M186 14h20' stroke-opacity='.08'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 210px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
@media (forced-colors: active) {
  .sea-texture { display: none; }
}

.site-footer-main,
.site-footer-meta {
  position: relative;
  width: var(--container);
  margin-inline: auto;
}

.site-footer-main {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
  gap: var(--space-7);
  padding-block: 5.5rem var(--space-7);
}

.site-footer-brand { display: grid; gap: var(--space-4); align-content: start; }
.site-footer-brand p {
  max-width: 26rem;
  color: var(--muted);
  font-size: var(--text-ui);
  line-height: 1.6;
}
.site-footer-brand .whale-pose { --pose-size: 3rem; }
.site-wordmark-footer { color: var(--text); justify-self: start; gap: var(--space-3); }

.site-footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-5);
}

.site-footer-group { display: grid; gap: var(--space-2); align-content: start; }

.site-footer-label {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 500;
}

.site-footer-list { display: grid; gap: 2px; }
.site-footer-list a {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 1.75rem;
  padding-inline: var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
  color: var(--text);
  font-size: var(--text-ui);
  border-radius: var(--radius-control);
  transition: background-color var(--dur-state) var(--ease-out);
}
.site-footer-list a:hover { background: var(--hover); }

.site-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-caption);
}
.site-footer-meta p { min-width: 0; max-width: 70ch; overflow-wrap: anywhere; }
.site-footer-meta a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}
.site-footer-meta a:hover { text-decoration-color: currentColor; }
.site-footer-meta-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

@media (max-width: 900px) {
  .site-footer-main { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media print {
  .site-footer { color: inherit; border-top: 1px solid currentColor; }
  .site-footer-sea { background: none; }
  .site-footer > .waterline,
  .site-footer-sea > .horizon { display: none; }
}

/* ---------- usage counting: the privacy page's control ---------- */
.usage-counting { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.usage-counting-status { color: var(--text); font-weight: 500; }
.usage-counting-elsewhere { color: var(--muted); font-size: var(--text-ui); }
.usage-counting-button {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: 2.5rem;
  padding-inline: var(--space-4);
  color: var(--text);
  background: var(--panel);
  font-size: var(--text-ui);
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-out);
}
.usage-counting-button:hover { background: var(--hover); }