/* The public shell: sticky header with one sliding highlight behind the links, the
   full-screen menu sheet on phones, the footer with its dot field and the page column. */

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.wrap {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.main {
  display: grid;
  align-content: start;
  gap: var(--s-16);
  padding-bottom: var(--s-16);
}

.main:focus {
  outline: none;
}

/* Header. A sentinel 40px down the page tells the script when to shrink the bar. */
.bar-sentinel {
  position: absolute;
  top: var(--s-10);
  width: 1px;
  height: 1px;
}

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  transition: background-color var(--d-enter) var(--ease-state), box-shadow var(--d-enter) var(--ease-state);
}

.bar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: 72px;
  margin: 0 auto;
  padding: 0 var(--edge);
  transition: min-height var(--d-enter) var(--ease-enter);
}

.bar.is-stuck {
  background-color: var(--bg);
  box-shadow: inset 0 calc(-1 * var(--s-px)) 0 var(--line);
}

.bar.is-stuck .bar__inner {
  min-height: 56px;
}

.bar__home {
  margin-right: auto;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r-control);
}

.bar__home:hover {
  color: var(--accent-ink);
}

.bar__mark {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1;
  font-variation-settings: "wght" 500, "ELSH" 0, "ELXP" 0, "slnt" 0;
  transition: font-variation-settings var(--d-enter) var(--ease-enter);
}

.bar__home:hover .bar__mark {
  font-variation-settings: "wght" 700, "ELSH" 60, "ELXP" 20, "slnt" -8;
}

.bar__tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Nav: one highlight slides between links (docs/research/cloudflare-nav.md), 300ms, no delay. */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.nav__glide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--glide-w, 0) * 1px);
  border-radius: var(--r-control);
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--glide-x, 0));
  transition:
    transform var(--d-slide) var(--ease-slide),
    width var(--d-slide) var(--ease-slide),
    opacity var(--d-slide) var(--ease-slide);
}

.nav.is-gliding .nav__glide {
  opacity: 1;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r-control);
  color: var(--text-2);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--d-hover) var(--ease-state);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--text);
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: calc(-1 * var(--s-half));
  height: var(--s-half);
  background: var(--accent);
}

.bar__menu {
  display: none;
}

/* Menu sheet: phones only. Full screen, items enter one after another. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--s-4) var(--gutter) var(--s-10);
  background: var(--bg);
  animation: fade-in var(--d-enter) var(--ease-enter);
}

.sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}

.sheet__nav {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-top: var(--s-8);
}

.sheet__link {
  display: block;
  padding: var(--s-2) 0;
  border-radius: var(--r-control);
  color: var(--text);
  font-size: var(--fs-32);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.05;
  text-decoration: none;
  animation: enter var(--d-enter) var(--ease-enter) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

.sheet__link:hover,
.sheet__link[aria-current="page"] {
  color: var(--accent-ink);
}

html.has-sheet {
  overflow: hidden;
}

@media (max-width: 767px) {
  .nav {
    display: none;
  }

  .bar__menu {
    display: inline-flex;
  }

  .bar__tools [data-theme-label] {
    display: none;
  }
}

/* Footer */
.foot {
  margin-top: var(--s-12);
  background: var(--bg-deep);
  box-shadow: inset 0 var(--s-px) 0 var(--line);
}

/* Compact since the owner review: one brand line and one row of links, brand left and links
   right where they fit. */
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  width: 100%;
  margin: 0 auto;
  padding: var(--s-6) var(--edge) var(--s-8);
}

.foot__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
}

.foot__name {
  font-size: var(--fs-17);
  font-weight: 700;
  letter-spacing: -.025em;
}

.foot__line {
  color: var(--text-2);
  font-size: var(--fs-14);
}

.foot__license {
  font-size: var(--fs-13);
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: var(--s-2) var(--s-5);
}

/* Help, Status and Support are already in the top bar (and its phone menu); the footer keeps
   them only on pages without that bar, such as admin. */
body:has([data-bar]) .foot__dup {
  display: none;
}

.foot__nav a {
  border-radius: var(--r-tag);
  color: var(--text-2);
  font-size: var(--fs-14);
  text-decoration: none;
  transition: color var(--d-hover) var(--ease-slide);
}

.foot__nav a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}

/* Reading progress on long text pages: a 2px accent line under the header. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 21;
  width: 100%;
  height: var(--s-half);
  background: var(--accent);
  transform: scaleX(var(--read, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sheet,
  .sheet__link {
    animation-name: fade-in;
    animation-delay: 0ms;
  }

  .bar__inner {
    transition: none;
  }
}

@media print {
  .bar,
  .sheet,
  .foot,
  .skip,
  .progress {
    display: none !important;
  }
}