/* Shared application shell and header. */

/* Out of sight until the keyboard reaches it, then over the header's start. */
.skip-link {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-neutral-300);
  min-height: var(--size-header-height);

  /* The rule under the header runs edge to edge, its content stops on the same
     column as the page. */
  padding-inline: var(--space-page-inline);
}

/* The header's padding already puts the logo above the page's column. */
.header-left {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

/* The brand is the only part that centres: the nav next to it runs full
   height so the active link's bar sits on the header's rule. */
.header-brand {
  align-self: center;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: var(--color-logo);
}

.header-logo {
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--color-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: calc(-0.02em * var(--tracking));
  text-decoration: none;
}

.header-nav {
  display: flex;
}

.header-nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--color-text);
  background: transparent;
  border-bottom: 3px solid transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.header-nav a:hover {
  color: var(--color-neutral-700);
}

.header-nav a.is-active {
  font-weight: 700;
}

/* The active link's bar, set by app.js: named, so a page change slides it
   from the old link to the new one. */
.nav-bar {
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 3px;
  background: var(--color-accent);
  view-transition-name: nav-bar;
}

.nav-soon {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  color: var(--color-neutral-600);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: default;
}

.nav-badge {
  color: var(--color-link);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: calc(0.1em * var(--tracking));
  text-transform: uppercase;
}

/* Ends on the page's column, like the logo starts on it. */
.header-user {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0;
}

.header-user-info {
  line-height: var(--line-height-user);
}

.header-user-name {
  color: var(--color-neutral-700);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: calc(0.12em * var(--tracking));
  text-transform: uppercase;
  line-height: 1;
}

.header-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-avatar);
  height: var(--size-avatar);
  overflow: hidden;
  color: var(--color-on-band);
  background: var(--color-band);
  font-size: 12px;
  font-weight: 800;
}

.header-user form {
  width: auto;
}

/* Both are buttons posting a form, drawn as the words they are: the language
   plain, leaving as a link. A finger gets 44px; the negative margin keeps the
   header at the avatar's height. */
.header-language {
  height: 44px;
  margin-block: calc((var(--size-avatar) - 44px) / 2);
  padding: 0 var(--space-1);
  color: var(--color-text);
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.header-signout {
  height: 44px;
  margin-block: calc((var(--size-avatar) - 44px) / 2);
  padding: 0;
  color: var(--color-link);
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.header-signout:hover {
  color: var(--color-accent-700);
}

/* Narrow desktop: keep full navigation while reducing header spacing. */
@media (min-width: 1001px) and (max-width: 1181px) {
  .header-left {
    gap: 20px;
  }

  .header-nav a,
  .nav-soon {
    gap: 8px;
    padding-inline: 8px;
  }

  .header-user {
    gap: 8px;
  }
}

@media (max-width: 1000px) {
  /* Shared application shell and header. */
  .header-mark {
    width: 14px;
    height: 14px;
    background: var(--color-logo);
    display: block;
  }

  .site-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-neutral-300);
    padding-inline: var(--space-page-inline);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-inline-start: 0;
  }

  .header-brand {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .header-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background: var(--color-logo);
  }

  .header-logo {
    display: flex;
    align-items: center;
    color: var(--color-text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: calc(-0.02em * var(--tracking));
    text-decoration: none;
  }

  .header-nav {
    display: flex;
  }

  .header-nav a {
    padding: 24px 14px 21px;
    color: var(--color-text);
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }

  .header-nav a:hover {
    color: var(--color-neutral-700);
  }

  .header-nav a.is-active {
    font-weight: 700;
  }

  .header-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--space-8);
  }

  .header-user-info {
    line-height: var(--line-height-user);
  }

  .header-user-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: calc(0.1em * var(--tracking));
    text-transform: uppercase;
  }

  .header-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--size-avatar);
    height: var(--size-avatar);
    overflow: hidden;
    color: var(--color-bg);
    background: var(--color-text);
    font-size: 12px;
    font-weight: 800;
  }

  /* Tablet and mobile */
  @media (max-width: 1000px) {
    .site-header {
      align-items: center;
      justify-content: flex-start;
      position: relative;
      min-height: 0;
      padding: 10px var(--space-page-inline);
      gap: var(--space-3);
    }

    .header-left {
      min-width: 0;
      flex: 1;
      align-items: center;
      gap: var(--space-3);
      padding-inline-start: 0;
    }

    .header-nav {
      display: none;
    }

    .header-user {
      gap: 8px;
      padding: 0;
      border-inline-start: 0;
      flex-shrink: 0;
    }

    .header-user-info {
      display: none;
    }

    .header-avatar {
      width: var(--size-avatar);
      height: var(--size-avatar);
    }
  }
}

[data-r="header-left"] {
  background: var(--color-bg);
}

/********************** PHONE **********************/

.tabbar {
  display: none;
}

@media (max-width: 1000px) {
  /* The bar is pinned to the screen, so the page ends above it. No height is
     taken from the screen: a phone that counts it too tall would scroll a page
     with nothing to scroll. */
  .app-shell:has(> .tabbar) {
    padding-bottom: calc(
      var(--size-tabbar-height) +
      env(safe-area-inset-bottom)
    );
  }

  /* A page under a list: its back link at the top is the way out. */
  .app-shell.is-form .site-header,
  .app-shell.is-family .site-header,
  .app-shell.is-form > .tabbar {
    display: none;
  }

  .app-shell.is-form:has(> .tabbar) {
    padding-bottom: 0;
  }

  /* The menu moves down to the bar. The header keeps the brand and, on its
     other side, the language and the sign-out: the canvas's phone header
     carries the language, and the sign-out has nowhere else to go. */
  .header-user .header-avatar {
    display: none;
  }

  .header-user {
    gap: var(--space-4);
    padding: 0;
  }

  .header-user .header-language,
  .header-user .header-signout {
    font-size: 14px;
  }

  .header-brand {
    display: flex;
  }

  .header-logo {
    line-height: var(--line-height-body);
  }

  .site-header {
    position: sticky;
  }

  /* Set by app.js on the way down, taken off on the way up. */
  .site-header.is-hidden {
    transform: translateY(-100%);
  }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 4;

    /* Held to the variable: the pay bar and the page's end stand on it. */
    height: calc(var(--size-tabbar-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-bg);
    border-top: 1.5px solid var(--color-text);
  }

  /* The tab on screen: dark, under the accent rule. */
  .tabbar-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin-top: -1.5px;
    padding: 10px 0 14px;
    color: var(--color-neutral-700);
    border-top: 3px solid transparent;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }

  .tabbar-tab.is-active {
    color: var(--color-text);
    font-weight: 700;
  }

  .tabbar .nav-bar {
    top: -3px;
    bottom: auto;
    view-transition-name: tab-bar;
  }
}

@media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .site-header {
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
  }
}