/* ===========================================================================
   Crest — the document shell (/changelog, /privacy, /support)

   These are pages somebody reads. The landing page can be loud; here the job
   is a comfortable measure, a type scale that steps rather than jumps, and a
   way to get to the other pages without hunting for the footer.

   Everything is built from tokens.css so the palette cannot drift.
   =========================================================================== */

/* ---------------------------------------------------------------- nav ---- */
/* Full-bleed band, content aligned to the same container as the landing page.
   The reading column below is narrower and centred; that difference is the
   point, not an accident, and the hairline is what makes it read as a band
   rather than as a misalignment. */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--deep-blue) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
/* color-mix is recent. Anything that cannot parse it keeps the flat colour
   declared first, which is why that line is not a fallback comment. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .nav { background: rgba(10, 22, 40, 0.94); }
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 60px;
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  text-decoration: none;
  margin-right: auto;
}
.nav__mark:hover { color: var(--ink-0); }
.nav__mark .mark { width: 30px; height: auto; display: block; flex: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav__links a {
  font-size: 0.9375rem;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--ink-0); }
/* aria-current marks the page you are on. Styling it is the whole reason it
   is in the markup. */
.nav__links a[aria-current="page"] { color: var(--ink-0); }

.nav__cta {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--deep-blue) !important;
  background: var(--foam);
  border-radius: 999px;
  padding: 7px 15px;
  transition: background 0.15s ease;
}
.nav__cta:hover { background: var(--ink-0); }

@media (max-width: 620px) {
  /* The wordmark and the pill are the two things that can go: the arc is
     still a link home, and the footer carries the App Store link. Losing the
     nav entirely on a phone would be worse than losing either. */
  .nav__mark span { display: none; }
  .nav__inner { gap: var(--s-4); min-height: 54px; }
  .nav__links { gap: var(--s-4); }
  .nav__links a { font-size: 0.875rem; }
  .nav__cta { display: none; }
}

/* --------------------------------------------------------------- page ---- */
.doc {
  max-width: calc(68ch + var(--gutter) * 2);
  padding-block: var(--s-7) var(--s-9);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink-2);
}

.doc__eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin-bottom: var(--s-3);
}

/* Deliberately not the hero scale. A 90px title over 17px body is a jump, not
   a hierarchy, and it pushed the one line that says what the page is into a
   whisper underneath. */
.doc__title {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink-0);
  margin-bottom: var(--s-3);
}

.doc__standfirst {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin-bottom: var(--s-7);
}

.doc__lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink-1);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--teal);
  border-radius: 4px 14px 14px 4px;
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5);
  margin-bottom: var(--s-8);
}
.doc__lede strong { color: var(--ink-0); font-weight: 600; }

/* ------------------------------------------------------------ headings --- */
/* One step per level, roughly 1.35x. Enough to separate, not enough to shout. */
.doc h2 {
  font-size: clamp(1.375rem, 1.15rem + 0.75vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: var(--ink-0);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
/* The first heading follows the lede, which is already a divider. */
.doc > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.doc h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 650;
  color: var(--ink-1);
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
}

.doc h2 + p, .doc h3 + p, .doc h2 + ul, .doc h3 + ul { margin-top: 0; }
.doc p { margin-bottom: var(--s-4); }
.doc strong { color: var(--ink-1); font-weight: 600; }

/* ---------------------------------------------------------------- lists -- */
/* The old rule left list-style intact but stripped the padding, so markers
   were clipped and every item ran together as one grey block. These draw
   their own marker at a fixed offset, which also keeps wrapped lines aligned
   under the first word rather than under the bullet. */
.doc ul { list-style: none; padding: 0; margin-bottom: var(--s-5); }
.doc ul li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
}
.doc ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 9px;
  height: 1px;
  background: var(--ink-4);
}
.doc ol { padding-left: var(--s-5); margin-bottom: var(--s-5); }
.doc ol li { margin-bottom: var(--s-3); }
.doc ol li::marker { color: var(--ink-4); }

/* ----------------------------------------------------------------- misc -- */
.doc__note {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: var(--s-5);
  margin-block: var(--s-5) var(--s-6);
  font-size: 1rem;
  color: var(--ink-3);
}

.doc__contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--deep-blue);
  background: var(--foam);
  border-radius: 999px;
  padding: 11px 20px;
  margin-block: var(--s-2) var(--s-5);
  text-decoration: none;
  transition: background 0.15s ease;
}
.doc__contact:hover { background: var(--ink-0); color: var(--deep-blue); }

.doc__foot {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-6) var(--s-7);
  font-size: var(--t-sm);
  color: var(--ink-4);
}
.doc__foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-bottom: var(--s-4);
}

/* Visible only once tabbed to, which is the one time it is needed. */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter);
  top: var(--s-3);
  z-index: 30;
  background: var(--deep-blue);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: var(--s-2) var(--s-4);
  color: var(--ink-0);
}

/* ===========================================================================
   Changelog

   Single column. The first attempt put the version in a 190px sticky rail
   beside the entry, which reads well when entries are three lines long and
   leaves a twelve-hundred-pixel void down the left when they are not. Ours are
   not. So the version becomes a header row the entry hangs off, which needs no
   empty gutter to work and behaves identically on a phone.
   =========================================================================== */

.log__release { padding-block: var(--s-8) var(--s-6); }
.log__release:first-of-type { padding-top: 0; }

.log__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-5);
}

.log__version {
  font-family: var(--font-num);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink-0);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Pushed to the far end so the eye can run down one edge for dates. */
.log__date {
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.log__tag {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-3);
  transform: translateY(-2px);
}
.log__tag--next {
  color: var(--deep-blue);
  background: var(--foam);
  border-color: transparent;
}

/* `.doc .log__headline`, not `.log__headline`: this is an h2 inside .doc, and
   `.doc h2` is a class plus an element, which outranks a lone class. The first
   attempt at this reset lost on specificity and left a second hairline with
   four rems of dead space above every release headline. */
.doc .log__headline {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: var(--ink-0);
  margin-bottom: var(--s-5);
}

.log__group { margin-bottom: var(--s-5); }
.log__group:last-child { margin-bottom: 0; }

.log__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin-bottom: var(--s-3);
}
.log__label--fixed { color: var(--ink-4); }

/* Inherits the list treatment from .doc; only the marker colour differs, so
   that Fixed reads quieter than New without a second set of rules. */
.log__group ul { margin-bottom: 0; }