/*
 * The shared footer. Layout and weight only: every colour is inherited, so the
 * strip takes on whatever page it sits in rather than fighting that page's
 * palette. The one exception is the focus ring, which has to be visible.
 */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-top: 12px;
}

.site-footer-back,
.site-footer-contact,
.powered-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.site-footer-back::before {
  content: '\2190';
}

.site-footer-back:hover,
.site-footer-contact:hover,
.powered-by:hover {
  text-decoration: underline;
}

.site-footer-back:focus-visible,
.site-footer-contact:focus-visible,
.powered-by:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--sk-radius-focus);
}

/* Text only a screen reader needs: the name of an icon-only control. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * The shared nav bar.
 *
 * The bar runs the full width of the window and carries a surface and a rule,
 * which is the whole of what separates it from the page: a wireframe edge
 * rather than a band of colour. `.site-nav-inner` holds its contents to the one
 * width and gutter in tokens.css, so the mark sits in exactly the same place on
 * the index and in every app, whatever width the page below is laid out on.
 *
 * Everything inside inherits its colour, as the footer does. The dropdown
 * panels are the one exception -- they float over content, so they need a
 * surface of their own and a border to sit on.
 */
.site-nav {
  background: var(--sk-surface);
  border-bottom: 1px solid var(--sk-border);
}

.site-nav-inner {
  /* Set here rather than assumed: the index page has a `*` reset and the apps
     do not, and the bar has to measure the same on both. */
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-width: var(--sk-page-max);
  margin: 0 auto;
  padding: 10px var(--sk-page-pad);
}

.site-nav-home {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}

.site-nav-word {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-nav-home:hover .site-nav-word {
  text-decoration: underline;
}

/* Two icon buttons, side by side and close together, so they read as one set
   of controls rather than two separate words. */
.site-nav-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav-menu {
  position: relative;
}

.site-nav-menu > summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 5px;
  border-radius: var(--sk-radius-sm);
  color: var(--sk-muted);
}

/* Safari draws its own triangle through `::-webkit-details-marker`. */
.site-nav-menu > summary::-webkit-details-marker {
  display: none;
}

.site-nav-menu > summary:hover,
.site-nav-menu[open] > summary {
  color: var(--sk-text);
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.site-nav-list {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 13rem;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
}

.site-nav-list a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--sk-radius-focus);
  color: inherit;
  text-decoration: none;
}

.site-nav-list a:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.site-nav-list a[aria-current='page'] {
  font-weight: 600;
}

.site-nav-home:focus-visible,
.site-nav-menu > summary:focus-visible,
.site-nav-list a:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
  border-radius: var(--sk-radius-focus);
}

/*
 * The light/dark menu.
 *
 * Which icon the trigger shows is decided here rather than in script, from
 * `data-theme` on <html>: all three are in the markup and two are hidden. No
 * attribute means `system`, which is why the half-filled circle is the one that
 * shows by default. The trigger is therefore right on the first paint, before
 * anything runs.
 */
.theme-menu > summary .theme-current {
  display: none;
  align-items: center;
}

.theme-menu > summary .theme-current-system {
  display: inline-flex;
}

:root[data-theme='light'] .theme-menu > summary .theme-current-system,
:root[data-theme='dark'] .theme-menu > summary .theme-current-system {
  display: none;
}

:root[data-theme='light'] .theme-menu > summary .theme-current-light,
:root[data-theme='dark'] .theme-menu > summary .theme-current-dark {
  display: inline-flex;
}

.theme-list {
  min-width: 9rem;
}

.theme-option {
  position: relative;
  display: block;
}

.theme-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.theme-option span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--sk-radius-focus);
  color: inherit;
  white-space: nowrap;
}

.theme-option:hover span {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.theme-option input:checked + span {
  font-weight: 600;
}

.theme-option input:focus-visible + span {
  outline: 2px solid var(--sk-accent);
  outline-offset: -2px;
}