/* The navigation layer and the page frame (task 34): a two-row bar (the brand and the signed-in
   person, then the section strip), the banners under it, the main column and the footer.

   The bar is the desk's only material: translucent and blurred where it sticks (from 1024px), opaque
   everywhere else and whenever the reader asks for less transparency. Its rows have fixed heights, so
   its height is the --header-h token at every width; the anchor scroll padding and the decide panel's
   sticky offset both use that token and cannot drift from it (they were 100px and 88px under a header
   measured at 124 to 164px). Rows are placed explicitly, not by template areas: a signed-out page has
   no section strip, and an implicit row only exists when something is placed in it. */

:root {
  --gutter-left: max(var(--gutter), env(safe-area-inset-left));
  --gutter-right: max(var(--gutter), env(safe-area-inset-right));
}
@media (max-width: 639px) {
  :root {
    --gutter: var(--space-4);
  }
}
body {
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
}
.wrap {
  max-width: 1240px;
  margin-inline: auto;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--separator);
  border-radius: var(--radius-s);
  background: var(--surface);
  font: var(--type-subheadline);
  font-weight: 600;
}
.skip-link:focus {
  top: var(--space-2);
}

/* The bar */
.site-header {
  position: static;
  z-index: 20;
  margin-left: calc(-1 * var(--gutter-left));
  margin-right: calc(-1 * var(--gutter-right));
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
  background: var(--bg);
  border-bottom: 1px solid var(--separator);
  view-transition-name: site-header;
}
.nav-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: var(--header-row-1);
  grid-auto-rows: var(--header-row-2);
  align-items: center;
  column-gap: var(--space-4);
}
.brand {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit);
  color: var(--ink);
  font: var(--type-headline);
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) {
  .brand:hover {
    color: var(--ink);
  }
}
.brand-mark {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.15em;
  width: 1.625rem;
  height: 1.375rem;
  padding-bottom: 0.25em;
  border-radius: 0.375rem;
  background: var(--marker-ink); /* dark in both schemes: on --ink the dark-mode tile turned white and the bars vanished */
}
.brand-mark i {
  display: block;
  width: 0.25rem;
  border-radius: 1px;
  background: var(--marker);
}
.brand-mark i:nth-child(1) {
  height: 0.375rem;
}
.brand-mark i:nth-child(2) {
  height: 0.625rem;
}
.brand-mark i:nth-child(3) {
  height: 0.9375rem;
}

/* The section strip: one line that scrolls sideways rather than wrapping into a third row. When it does
   (a phone, a tablet, or a desktop at a large text size), a fade at its right edge says so, since the
   scrollbar is hidden; the list ends with room as wide as the fade, so scrolled to the end, the last
   section, often the current one, sits clear of it. */
.nav {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, var(--mask-opaque) calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, var(--mask-opaque) calc(100% - 28px), transparent 100%);
}
.nav::-webkit-scrollbar {
  display: none;
}
.nav ul {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0 var(--space-8) 0 0;
  list-style: none;
}
.nav li {
  flex: none;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit);
  min-height: var(--hit);
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  color: var(--ink-2);
  font: var(--type-subheadline);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  outline-offset: -3px; /* the strip scrolls, so a ring outside the capsule would be clipped */
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
/* The current section: an opaque capsule, so its contrast never depends on what scrolls under the glass. */
.nav-link[aria-current="page"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-card);
}
@media (hover: hover) {
  .nav-link:not([aria-current]):hover {
    color: var(--ink);
    background: var(--fill-2);
  }
}
/* Signed out: the sign-in or recovery link sits on the first row; there is no second one. */
.nav-wrap > .nav-link {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
}

/* The signed-in person */
.who {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--ink-2);
}
.who-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font: var(--type-subheadline);
  font-weight: 600;
}
.who-name > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink-2);
  font: var(--type-footnote);
  font-weight: 700;
}
.inline-form {
  display: inline;
  margin: 0;
}
/* Sign out is plain tinted text on the glass. --accent over an accent fill scrolling beneath the 85% bar
   measures 4.1:1 (research report), under AA, and Safari has no Reduce Transparency query to fall back on;
   the deeper tint keeps it at 5:1 or more over any content (test_tracker_design_tokens.py checks it). */
.who .btn-quiet {
  --btn-ink: var(--accent-2);
}

/* Phones: brand, then the strip, then the person; nothing sticks. */
@media (max-width: 639px) {
  .who {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}
@media (min-width: 1024px) {
  html {
    scroll-padding-top: calc(var(--header-h) + var(--space-2));
  }
  .site-header {
    position: sticky;
    top: 0;
    background: var(--material-bar);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
  }
}
@media (min-width: 1024px) and (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* Forced colours drop the capsule's fill, so the current section is marked with the system selection colours. */
@media (forced-colors: active) {
  .nav-link[aria-current="page"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* Banners and the flash: content, not chrome, so no shadow. Each icon has its words beside it. */
.banners {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.banner,
.flash {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  font: var(--type-subheadline);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.banner > span,
.flash > span {
  min-width: 0;
}
.banner-stale {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.flash {
  background: var(--good-bg);
  color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
}
.flash a {
  color: inherit; /* the accent link on the green tint was 4.3:1 in dark mode */
}
.banner-icon,
.flash-check {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0; /* the glyph is the mask icon in desk-icons.css; the text beside it says the same */
}

/* The main column and the footer */
.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-12);
}
.main:focus {
  outline: none;
}
.footer {
  padding-block: var(--space-6) var(--space-10);
  border-top: 1px solid var(--separator);
}