/* Every selector below is scoped under header.site.
 *
 * They were not, and `.panel` collided: the nav's sign-in dropdown is
 * position:absolute, and the profile page's content card happens to use the
 * same class name, so the card was pulled out of flow and that page rendered
 * as an empty screen. The nav stylesheet is loaded by four pages it does not
 * own, so a bare class name here is a landmine for all of them.
 */

/* The site header: brand and account on the top row, section tabs beneath.
 *
 * Concept 2 of three, chosen after seeing all of them rendered side by side in
 * both themes. It is the only one of the three that gives each section a
 * full-width target and marks the current one unambiguously, and the only one
 * with no layout defect to fix first - concept 1 wrapped its four buttons into
 * a 2x2 block at desktop width.
 *
 * Colour tokens are NOT defined here. Every page already defines them, and a
 * second definition would fight whichever page hosts this.
 */

header.site :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
header.site { background: var(--surface); border-bottom: 1px solid var(--border); }
header.site .top {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto;
    padding: max(12px, env(safe-area-inset-top)) 12px 10px;
  }
header.site .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
    min-height: 44px;
  }
header.site .brand:hover { text-decoration: none; }
header.site .brand img {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: block;
    flex: 0 0 auto;
  }
header.site .brand .name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
header.site .brand strong {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }
header.site .brand em {
    font: 600 11px/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    font-style: normal;
  }
header.site .spacer { flex: 1 1 auto; }
header.site .tools { display: flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; }
header.site .theme {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    padding: 0;
  }
header.site .theme:hover { border-color: var(--primary); color: var(--primary); }
header.site .signin, header.site .who {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    cursor: pointer;
    font: 600 14px/1 "IBM Plex Sans", system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
header.site .signin {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--primary-contrast);
  }
header.site .signin:hover { filter: brightness(1.06); }
header.site .who {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    max-width: min(42ch, 48vw);
  }
header.site .who .mail {
    overflow: hidden;
    text-overflow: ellipsis;
    font: 500 13px/1 "IBM Plex Mono", ui-monospace, monospace;
  }
header.site nav.tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 12px;
    border-top: 1px solid var(--border);
  }
header.site nav.tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 6px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 3px solid transparent;
    text-align: center;
  }
header.site nav.tabs a:hover { color: var(--text); text-decoration: none; }
header.site nav.tabs a[aria-current="page"] {
    color: var(--text);
    font-weight: 700;
    border-bottom-color: var(--primary);
  }
header.site .panel, header.site .menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: min(320px, calc(100vw - 24px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
  }
header.site .panel[hidden], header.site .menu[hidden] { display: none; }
header.site .panel { display: flex; flex-direction: column; gap: 8px; text-align: left; }
header.site .why { margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.4; }
header.site .panel label {
    font: 600 11px/1 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
  }
header.site .panel input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/1.4 "IBM Plex Sans", system-ui, sans-serif;
  }
header.site .pw { position: relative; }
header.site .pw input { padding-right: 72px; }
header.site .pw-toggle {
    position: absolute;
    right: 4px;
    top: 4px;
    height: 36px;
    min-width: 60px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font: 600 13px/1 "IBM Plex Sans", system-ui, sans-serif;
  }
header.site .pw-toggle:hover { background: var(--primary-soft); }
header.site .submit {
    height: 44px;
    margin-top: 4px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: var(--primary-contrast);
    font: 600 15px/1 "IBM Plex Sans", system-ui, sans-serif;
    cursor: pointer;
  }
header.site .forgot {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    min-height: 44px;
    display: grid;
    place-items: center;
  }
header.site .forgot:hover { text-decoration: underline; }
header.site main.list { max-width: 1120px; margin: 0 auto; padding: 12px 12px 20px; }
@media (max-width: 720px) {
    .brand img { width: 48px; height: 48px; border-radius: 12px; }
header.site .brand strong { font-size: 18px; white-space: nowrap; }
header.site .brand em { display: none; }
header.site .who { max-width: 16ch; padding: 0 10px; }
header.site .who .mail { max-width: 11ch; }
header.site nav.tabs a { font-size: 13px; min-height: 44px; }
  }
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; filter: none !important; }
  }

/* ---- account control: the identity chip ----
 *
 * Concept 2 of three, chosen after seeing all of them rendered. The trigger is
 * an initials avatar plus a caret in a pill; the address appears only INSIDE
 * the open panel, under a who-you-are header. The header used to print the raw
 * email as a button, which wrapped badly on a phone, put the address on screen
 * for anyone looking over a shoulder, and gave no hint that a menu was behind
 * it.
 *
 * Scoped under header.site like everything else here, after `.panel` collided
 * with the profile page's content card and blanked that page.
 */

/* ---- account control ------------------------------------------------------
 *
 * Written by hand, not extracted. Lifting these from the concept dropped the
 * `.chip-btn` base rule, so the trigger fell back to the generic button styling
 * beside it: a hard box drawn around the avatar, and with no flex on the
 * button, the chevron wrapped onto a second line UNDER the circle. It rendered
 * as a square containing a circle with a stray arrow below it.
 *
 * The trigger is the avatar. No box around it at rest - a border there competes
 * with the theme button next to it and makes two controls of unequal weight
 * look like a broken pair. The chevron is small, muted, and beside the avatar;
 * hover and open states are carried by a soft ring rather than a hard outline.
 */
header.site .chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 6px 0 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  flex: 0 0 auto;
  transition: background 140ms ease;
}
header.site .chip-btn:hover { background: var(--primary-soft); }
header.site .chip-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
header.site .chip-btn[aria-expanded="true"] { background: var(--primary-soft); }

header.site .chip-btn .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--primary-contrast);
  font: 600 13px/1 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: .04em;
  user-select: none;
  flex: 0 0 auto;
  /* A ring rather than a border: it sits outside the circle, so the avatar
     keeps its size and the two header controls stay the same height. */
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 140ms ease;
}
header.site .chip-btn:hover .avatar,
header.site .chip-btn[aria-expanded="true"] .avatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}

header.site .caret {
  display: block;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform 160ms ease;
}
header.site .chip-btn[aria-expanded="true"] .caret { transform: rotate(180deg); color: var(--primary); }

/* ---- the menu ---- */
header.site .menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(300px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 12px rgba(15, 23, 30, .06), 0 18px 44px rgba(15, 23, 30, .14);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
header.site .menu[hidden] { display: none; }

header.site .menu-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 12px 13px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
header.site .menu-head .avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--primary-contrast);
  font: 600 14px/1 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: .04em;
  flex: 0 0 auto;
  user-select: none;
}
header.site .who-copy { min-width: 0; }
header.site .who-copy strong {
  display: block;
  font: 600 15px/1.25 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: -.01em;
}
header.site .who-copy .email {
  display: block;
  margin-top: 2px;
  font: 500 11px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--muted);
  overflow-wrap: anywhere;
}
header.site .who-copy .signed { display: none; }

header.site .menu a,
header.site .menu button.signout {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font: 500 15px/1 "IBM Plex Sans", system-ui, sans-serif;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
header.site .menu a:hover,
header.site .menu button.signout:hover { background: var(--primary-soft); text-decoration: none; }
header.site .menu a:focus-visible,
header.site .menu button.signout:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

header.site .menu-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
header.site .menu button.signout { color: var(--muted); font-weight: 600; }

/* A photo avatar. Same footprint as the initials so the header does not shift
   when one replaces the other, and object-fit so a non-square upload is
   cropped rather than squashed. */
header.site .avatar-img {
  object-fit: cover;
  background: var(--primary-soft);
  padding: 0;
}

/* ---- header search ----
 * Sits between the brand and the tools, the way GitHub's does. It shrinks
 * before anything else does, and drops to its own line on a phone rather than
 * squeezing the brand out. */
header.site .site-search {
  display: flex; align-items: center; gap: 8px;
  flex: 0 1 300px; min-width: 0; margin-left: 18px;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg);
}
header.site .site-search:focus-within { border-color: var(--primary); }
header.site .site-search-icon { color: var(--muted); font-size: 17px; line-height: 1; flex: 0 0 auto; }
header.site .site-search input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; background: transparent; color: var(--text);
  font: 400 14px/1 "IBM Plex Sans", system-ui, sans-serif;
}
header.site .site-search input:focus { outline: none; }
header.site .site-search input::-webkit-search-cancel-button { cursor: pointer; }

@media (max-width: 820px) {
  header.site .top { flex-wrap: wrap; }
  header.site .site-search { order: 3; flex: 1 1 100%; margin: 10px 0 2px; }
  header.site .spacer { order: 2; }
}

/* ---- footer ----
 * Four documents reachable from nowhere are four documents nobody reads.
 * Scoped like everything else in this file, which is loaded by pages it does
 * not own. */
footer.site-foot {
  margin-top: 64px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
footer.site-foot .foot-inner {
  max-width: 1120px; margin: 0 auto; padding: 40px 22px 26px;
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
footer.site-foot h2 {
  margin: 0 0 12px;
  font: 600 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
footer.site-foot ul { list-style: none; margin: 0; padding: 0; }
footer.site-foot li { margin: 0 0 9px; }
footer.site-foot a {
  color: var(--text); text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; min-height: 26px;
}
footer.site-foot a:hover { color: var(--primary); text-decoration: underline; }
footer.site-foot a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
footer.site-foot .foot-bar {
  max-width: 1120px; margin: 0 auto; padding: 18px 22px 30px;
  border-top: 1px solid var(--border);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline;
  font-size: 13px; color: var(--muted);
}
footer.site-foot .foot-bar span:first-child { font-weight: 600; color: var(--text); }
footer.site-foot .foot-note { flex: 1 1 320px; min-width: 0; }