/* The site header every page shares (siteHeader in src/member-nav.ts), the site footer's links, and the
   quick-fix member bar (renderMemberNav). Tokens only; loaded by the public pages, page(), the course and the
   forum, so it does not rely on components.css. Phone first: never a sideways scroll, targets at least 44px. */

/* ---- The logo (src/brand/logo.ts) ------------------------------------------ */

/* Drawn inline, so the tokens colour it: capsule, people and heads, the lit head, the wordmark. A band sets its own three. */
.logo {
  --logo-1: var(--color-mark);
  --logo-2: var(--color-mark-2);
  --logo-ink: var(--color-ink);
  display: block;
  width: auto;
  max-width: none;
  color: var(--logo-1);
}

.logo .logo-shell,
.logo .logo-head {
  fill: var(--logo-1);
}

.logo .logo-line {
  fill: none;
  stroke: var(--logo-1);
}

.logo .logo-lit {
  fill: var(--logo-2);
}

.logo .logo-word {
  fill: var(--logo-ink);
}

/* ---- Skip link (the one rule: every page loads this sheet) ------------------ */

/* Hidden until it takes focus, then the first thing on the page. */
.skip-link:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
  z-index: 100;
}

/* ---- Site header --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: var(--rule-width) solid var(--color-rule);
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

/* A visitor's slim line on the band above the bar, wide screens only. */
.site-utility {
  display: none;
  background: var(--color-band);
  color: var(--color-on-band-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}

.site-utility-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-gutter);
}

.site-utility a {
  color: var(--color-on-band);
  text-decoration: none;
}

.site-utility a:hover {
  color: var(--color-on-band);
  text-decoration: underline;
}

@media (min-width: 37.5rem) {
  .site-utility {
    display: block;
  }
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  width: 100%;
  min-height: 4rem;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-gutter);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-inline-end: auto;
  color: var(--color-ink);
  text-decoration: none;
}

/* The lockup at phone size; the symbol alone where even that would crowd the bar. */
.site-brand .logo-lockup {
  height: 2.125rem;
}

.site-brand .logo-symbol {
  display: none;
  height: 2.25rem;
}

@media (max-width: 22.49rem) {
  .site-brand .logo-lockup {
    display: none;
  }

  .site-brand .logo-symbol {
    display: block;
  }
}

/* A member's bar holds the account icon too: the symbol alone up to a roomy phone. */
@media (max-width: 23.99rem) {
  .site-header-inner:has(> .site-account-menu) .site-brand .logo-lockup {
    display: none;
  }

  .site-header-inner:has(> .site-account-menu) .site-brand .logo-symbol {
    display: block;
  }
}

@media (min-width: 60rem) {
  .site-header-inner {
    min-height: 5rem;
    gap: var(--space-2) var(--space-7);
  }

  /* The lockup is 102 units tall for a 6.3:1 width: at 3rem the symbol is as tall as B's 44px mark and the
     wordmark reads at its scale. */
  .site-brand .logo-lockup {
    height: 3rem;
  }
}

/* Phone: a square button that opens the list below the header. Its word stays for screen readers; the three
   lines are drawn by the ::before. */
.site-menu-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: 0;
  cursor: pointer;
  list-style: none;
}

.site-menu-button::-webkit-details-marker,
.site-submenu-button::-webkit-details-marker {
  display: none;
}

.site-menu-button::before {
  content: "";
  width: 1.25rem;
  height: 0.875rem;
  background:
    linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}

.site-menu-button:hover,
.site-menu[open] > .site-menu-button {
  color: var(--color-accent);
}

.site-menu[open] .site-nav {
  position: absolute;
  inset: 100% 0 auto;
  z-index: 51;
  border-bottom: var(--rule-width) solid var(--color-rule);
  background: var(--color-surface);
}

.site-nav-list {
  display: grid;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-gutter) var(--space-4);
  list-style: none;
}

.site-nav-list a,
.site-signout-button {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.site-nav-list a:hover,
.site-signout-button:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.site-nav-list a[aria-current="page"] {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* The Join button keeps the button look (components.css or course.css) and centres its label. */
.site-nav-list a.site-join {
  justify-content: center;
  margin-top: var(--space-2);
  color: var(--color-on-accent);
  text-decoration: none;
}

/* A section's submenu (the forum's pages under Forum): a <details> whose summary names the section. */
.site-submenu-button {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.site-submenu-button::after {
  content: "▾";
  content: "▾" / "";
}

.site-submenu-button:hover {
  color: var(--color-accent);
}

/* The page is in this section: marked like the current page (aria-current="true" on the summary). */
.site-submenu-button[aria-current="true"] {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.site-submenu-list {
  position: relative;
  z-index: 52;
  margin: 0;
  padding: 0 0 0 var(--space-5);
  list-style: none;
}

.site-signout {
  margin: 0;
}

/* Phone: inside the open Menu the section's pages always show, indented under its name. */
@supports selector(::details-content) {
  @media (max-width: 59.99rem) {
    .site-submenu::details-content {
      content-visibility: visible;
      display: contents;
    }

    .site-submenu-button {
      cursor: default;
      pointer-events: none;
    }

    .site-submenu-button::after {
      content: none;
    }
  }
}

.site-signout-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* Desktop: the list sits inline and the Menu button goes. Only where the browser can style the disclosure's
   content; elsewhere the Menu button stays, which still works. */
@supports selector(::details-content) {
  @media (min-width: 60rem) {
    .site-menu-button {
      display: none;
    }

    .site-menu::details-content {
      content-visibility: visible;
      display: contents;
    }

    .site-menu .site-nav,
    .site-menu[open] .site-nav {
      position: static;
      border: 0;
      background: none;
    }

    .site-nav-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-1) var(--space-2);
      padding: 0;
    }

    .site-nav-end {
      margin-inline-start: var(--space-4);
    }

    .site-nav-list a.site-join {
      margin-top: 0;
    }

    /* On the bar (Direction B): 600-weight links with a tint hover; the current section sits on the tint with the
       accent underneath, squared at the bottom like a tab. */
    .site-nav-list > li > a:not(.site-join),
    .site-submenu-button {
      padding: 0.55rem 0.85rem;
      border-radius: var(--radius-md);
      font-weight: var(--weight-semibold);
      text-decoration: none;
      box-shadow: inset 0 -2px 0 transparent;
    }

    .site-nav-list > li > a:not(.site-join):hover,
    .site-submenu-button:hover {
      background: var(--color-tint);
      color: var(--color-ink);
      text-decoration: none;
    }

    .site-nav-list > li > a[aria-current="page"],
    .site-submenu-button[aria-current="true"] {
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      background: var(--color-tint);
      color: var(--color-accent);
      text-decoration: none;
      box-shadow: inset 0 -2px 0 var(--color-accent);
    }

    /* A section's pages drop down below its name. */
    .site-submenu {
      position: relative;
    }

    .site-submenu-list {
      position: absolute;
      inset: 100% auto auto 0;
      min-width: 12rem;
      padding: var(--space-2) var(--space-4);
      border: var(--rule-width) solid var(--color-rule);
      border-radius: var(--radius-md);
      background: var(--color-surface);
    }
  }
}

/* The theme switch: three small buttons in one bordered group (System, Light, Dark), or one link where forms are
   off. Fits a 320px phone beside the brand: each button is at least 44px square. */
.site-theme {
  margin: 0;
}

.site-theme-group {
  display: inline-flex;
  /* The account dropdown is capped at the viewport width; wrap rather than overflow on the narrowest phones. */
  flex-wrap: wrap;
  max-width: 100%;
  border: var(--rule-width) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.site-theme-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  border: 0;
  border-inline-start: var(--rule-width) solid var(--color-rule);
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

.site-theme-button:first-child {
  border-inline-start: 0;
}

.site-theme-button:hover {
  color: var(--color-accent);
}

.site-theme-button[aria-pressed="true"] {
  background: var(--color-tint);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.site-theme-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  color: var(--color-ink);
}

/* The member's account menu: a user icon at the far right that opens Your settings, Theme and Sign out. It sits
   beside the Menu button, not inside it, so a phone keeps the icon in the bar. */
.site-account-menu {
  position: relative;
}

.site-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: var(--rule-width) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.site-account-button::-webkit-details-marker {
  display: none;
}

.site-account-button:hover,
.site-account-menu[open] .site-account-button {
  color: var(--color-accent);
}

.site-account-button[aria-current="true"] {
  background: var(--color-tint);
}

.site-account-icon {
  display: block;
}

.site-account-list {
  position: absolute;
  inset: 100% 0 auto auto;
  z-index: 53;
  display: grid;
  gap: var(--space-1);
  width: max-content;
  max-width: calc(100vw - 2 * var(--space-gutter));
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-4);
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  list-style: none;
}

.site-account-list a,
.site-account-list .site-signout-button {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-ink);
  text-decoration: none;
}

.site-account-list a:hover,
.site-account-list .site-signout-button:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.site-account-list a[aria-current="page"] {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.site-account-label {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* A member's bar never wraps: the brand gives way (its name may break over two lines) so the Menu button and the
   icon stay on one row down to 320px. */
.site-header-inner:has(> .site-account-menu) {
  flex-wrap: nowrap;
  column-gap: var(--space-2);
}

.site-header-inner:has(> .site-account-menu) .site-brand {
  min-width: 0;
  margin-inline-end: auto;
}

.site-header-inner:has(> .site-account-menu) .site-brand span {
  line-height: 1.2;
}

.site-header-inner:has(> .site-account-menu) .site-brand-mark {
  flex: none;
}

.site-header-inner:has(> .site-account-menu) .site-menu,
.site-account-menu {
  flex: none;
}

/* Wide screens: the icon is the last item on the bar, a little apart from the menu. */
@media (min-width: 60rem) {
  .site-account-menu {
    margin-inline-start: var(--space-3);
  }
}

/* Printouts (the course workbook) carry the page, not the menu. */
@media print {
  .site-header {
    display: none;
  }
}

/* ---- Closing a menu with a tap outside it ---------------------------------- */

/* No script: while a header menu is open, its summary spreads a transparent overlay over the whole page. A tap
   anywhere outside the dropdown lands on the overlay, which is part of the summary, so it toggles the <details>
   shut. The dropdowns stack above it (z-index 51 to 53), so their own links still work. Tapping another menu's
   button closes the open one first; a second tap opens it. The Menu button's ::before is its icon, so its
   overlay is the ::after. Not focusable, so the keyboard works as before. */
.site-menu[open] > .site-menu-button::after,
.site-submenu[open] > .site-submenu-button::before,
.site-account-menu[open] > .site-account-button::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari sends a tap's click only to something it judges clickable; a pointer cursor makes it so. Touch
   screens show no cursor, so this costs nothing there, and a mouse keeps the default arrow over the page. */
@media (hover: none) {
  .site-menu[open] > .site-menu-button::after,
  .site-submenu[open] > .site-submenu-button::before,
  .site-account-menu[open] > .site-account-button::before {
    cursor: pointer;
  }
}

/* ---- Site footer: structured, on the darker band ------------------------- */

.site-footer {
  margin-top: 0;
  background: var(--color-band-2);
  color: var(--color-on-band-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.site-footer a {
  color: var(--color-on-band);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-on-band);
  text-decoration: underline;
}

.site-footer :focus-visible {
  outline-color: var(--color-band-accent);
}

.site-footer-inner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--space-gutter);
}

.site-footer-inner {
  display: grid;
  gap: var(--space-7) var(--space-6);
  padding-block: var(--space-8) var(--space-7);
}

.site-footer-logo {
  display: inline-flex;
}

.site-footer-logo .logo {
  --logo-1: var(--color-band-accent);
  --logo-2: var(--color-on-band);
  --logo-ink: var(--color-on-band);
  height: 2.75rem;
}

.site-footer-logo .logo-symbol {
  display: none;
}

.site-footer-brand p {
  max-width: 30rem;
  margin-top: var(--space-5);
}

.site-footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-6);
}

.site-footer-col h2 {
  margin-bottom: var(--space-4);
  color: var(--color-band-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-stretch: 100%;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.site-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-col li + li {
  margin-top: var(--space-1);
}

.site-footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  overflow-wrap: anywhere;
}

/* The base line's rule spans the content column, not the gutters. */
.site-footer-base {
  width: min(100% - 2 * var(--space-gutter), var(--page-max) - 2 * var(--space-gutter));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4) var(--space-5);
  border-top: var(--rule-width) solid rgb(255 255 255 / 0.12);
  font-size: var(--text-xs);
}

.site-footer-theme {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The switch on the band (Direction B): one segmented control, the chosen segment in the highlight. */
.site-footer-theme-label {
  margin-inline-end: var(--space-1);
}

.site-footer .site-theme-group {
  border-color: rgb(255 255 255 / 0.2);
}

.site-footer .site-theme-button {
  border-color: rgb(255 255 255 / 0.2);
  color: var(--color-on-band-muted);
  font-weight: var(--weight-semibold);
}

.site-footer .site-theme-button:hover {
  color: var(--color-on-band);
}

.site-footer .site-theme-button[aria-pressed="true"] {
  background: var(--color-band-accent);
  color: var(--color-on-band-accent);
  text-decoration: none;
}

.site-footer .site-theme-link {
  color: var(--color-on-band);
  text-decoration: underline;
}

@media (min-width: 60rem) {
  .site-footer-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-7);
  }

  .site-footer-nav {
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
  }
}

@media print {
  .site-footer {
    display: none;
  }
}

/* ---- Member bar (renderMemberNav) ---------------------------------------- */

.member-nav {
  border-bottom: var(--rule-width) solid var(--color-rule);
  background: var(--color-tint);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.member-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-5);
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-gutter);
  list-style: none;
}

.member-nav a,
.member-nav-button {
  display: inline-flex;
  align-items: center;
  /* A comfortable touch target without making the bar tall. */
  min-height: 2.5rem;
  color: var(--color-ink);
  text-decoration: none;
}

.member-nav a:hover,
.member-nav-button:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.member-nav a[aria-current="page"] {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.member-nav-end {
  margin-inline-start: auto;
}

.member-nav-signout {
  margin: 0;
}

.member-nav-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* The /learn shell's cards. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-5);
  margin-block: var(--space-6);
}

/* Panels on the surface with a hairline frame, all alike (Direction B). */
.card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-ui);
}

.card h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}

.card-link {
  font-weight: var(--weight-semibold);
}

.card-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-list a,
.account-line a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* The live-cohort teaser (/program and the course home): a dark band panel so it reads first, with the lit tag as on the hero. */
.live-teaser {
  max-width: 44rem;
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-5);
  border-left: 4px solid var(--color-band-accent);
  border-radius: var(--radius-sm);
  background: var(--color-band);
  color: var(--color-on-band);
}

.live-teaser-tag {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-band-accent);
  color: var(--color-on-band-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.live-teaser-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.live-teaser-text {
  margin-top: var(--space-2);
  color: var(--color-on-band-muted);
  font-size: var(--text-lg);
  line-height: 1.4;
}