/*
 * The frame around the content: logo, header, search, theme switch,
 * navigation, footer and buttons.
 *
 * Drawn the way the app draws its chrome: the canvas colour throughout,
 * edges as 0.5px hairlines in chrome-border, glyphs in chrome-icon, and the
 * active item marked by the sidebar's wash rather than by colour alone.
 */

/*
 * The wordmark, as in the splash (Splash.css, .splash-logo): two exports,
 * swapped on data-theme. Not one image recoloured: the word is black in one
 * and white in the other, and the cube faces differ too.
 */
.bs-logo {
  display: block;
  aspect-ratio: 571 / 262;
  background: url('../logo/beacon.light.png') no-repeat center / contain;
}

:root[data-theme='dark'] .bs-logo {
  background-image: url('../logo/beacon.dark.png');
}

/* Header: the splash's title bar, with the site's sections in it. -------- */

.md-header.bs-header {
  color: var(--chrome-text);
  background: var(--canvas);
  border-bottom: 0.5px solid var(--chrome-border);
  box-shadow: none;
}

.bs-header__inner {
  gap: 8px;
  align-items: center;
}

/*
 * The app's menu-bar mark (MenuBar.css, .menu-bar-logo): text-primary, and
 * 0.75 of the bar's height, which is the Figma frame's ratio. The bar is 48px
 * in both, so the glyph is 36px here too.
 */
.bs-header__home {
  display: flex;
  flex: none;
  margin: 0 16px 0 8px;
  color: var(--text-primary);
}

.bs-logo-beta {
  display: block;
  width: auto;
  height: 36px;
}

/* Clipped, not wrapped, when the open search field takes their room. */
.bs-header__sections {
  display: flex;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.bs-header__section {
  display: block;
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 14px;
  color: var(--chrome-text);
  border-radius: 4px;
}

.bs-header__section:hover,
.bs-header__section:focus-visible {
  color: var(--text-primary);
}

.bs-header__section--active {
  color: var(--text-primary);
  background: var(--sidebar-active-bg);
}

.bs-header__controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.bs-header .md-header__button.md-icon {
  color: var(--chrome-icon);
}

/* Below Material's drawer breakpoint the sections move into the drawer. */
@media screen and (max-width: 76.2344em) {
  .bs-header__sections {
    display: none;
  }

  .bs-header__home {
    margin-left: 0;
  }
}

/* Search: the app's menu bar search field. -------------------------------- */

@media screen and (min-width: 60em) {
  .md-search__form {
    background: var(--chrome-search-bg);
    border: 0.5px solid var(--chrome-search-stroke);
    border-radius: 4px;
  }

  .md-search__form:hover {
    background: var(--chrome-search-bg);
  }

  [data-md-toggle='search']:checked ~ .md-header .md-search__form {
    background: var(--canvas);
    border-radius: 4px 4px 0 0;
  }

  .md-search__output {
    border: 0.5px solid var(--chrome-border);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
  }
}

/* The grey suggestion is drawn under the typed text, so both need the
   same size or the two sets of letters drift apart. */
.md-search__input,
.md-search__suggest {
  font-size: 14px;
}

.md-search__input {
  color: var(--text-primary);
}

.md-search__input::placeholder,
.md-search__icon {
  color: var(--chrome-text);
}

.md-search__scrollwrap,
.md-search-result {
  background: var(--canvas);
}

.md-search-result__meta {
  color: var(--text-muted);
  background: var(--surface);
}

.md-search-result mark {
  color: var(--accent);
}

/* Theme switch: the app's SegmentedControl, with icons for labels. ------- */

.bs-theme-switch {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.bs-theme-switch[hidden] {
  display: none;
}

.bs-theme-switch__option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  color: var(--chrome-icon);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.bs-theme-switch__option svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.bs-theme-switch__option:hover {
  color: var(--text-primary);
}

.bs-theme-switch__option[aria-checked='true'] {
  color: var(--accent);
  background: var(--sidebar-active-bg);
}

.bs-theme-switch__option:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -2px;
}

/* Navigation sidebar and table of contents. ------------------------------- */

.md-nav__link {
  color: var(--text-secondary);
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--text-primary);
}

.md-nav__title {
  font-weight: 500;
  color: var(--text-muted);
}

/* The current page: the app's active sidebar wash. */
.md-sidebar--primary .md-nav__link--active {
  color: var(--text-primary);
  font-weight: 500;
}

/* The wash only in the sidebar. The mobile drawer's rows are full width
   already and mark the current page by colour. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__item .md-nav__link--active {
    margin-inline: -8px;
    padding: 2px 8px;
    background: var(--sidebar-active-bg);
    border-radius: 4px;
  }

  /* A section with a page of its own is drawn as two halves, its link and
     its expand toggle, and both are marked active. One wash goes on the
     row instead, or the translucent washes overlap into a darker band. */
  .md-sidebar--primary .md-nav__container:has(> .md-nav__link--active) {
    margin-inline: -8px;
    padding: 2px 8px;
    background: var(--sidebar-active-bg);
    border-radius: 4px;
  }

  .md-sidebar--primary .md-nav__container > .md-nav__link--active {
    margin: 0;
    padding: 0;
    background: none;
  }
}

.md-sidebar--secondary .md-nav__link--active {
  color: var(--accent);
}

/*
 * The mobile drawer's title bar: the wordmark on the canvas, not a blue band.
 * Material also prints the site name under the logo; the wordmark already
 * says "Beacon", so the text is set to zero size and the bar closes up
 * around the logo. The logo keeps its own label for screen readers.
 */
.md-nav--primary .md-nav__title[for='__drawer'] {
  height: auto;
  padding: 12px 16px;
  font-size: 0;
  line-height: 0;
  background: var(--canvas);
  border-bottom: 0.5px solid var(--chrome-border);
}

.md-nav--primary .md-nav__title[for='__drawer'] .md-logo {
  position: static;
  margin: 0;
  padding: 0;
}

.md-nav--primary .md-nav__title[for='__drawer'] .bs-logo {
  height: 32px;
}

.md-sidebar--primary .md-sidebar__scrollwrap {
  background: var(--canvas);
}

/* Footer: small and muted, like the splash's version line. --------------- */

.md-footer.bs-footer {
  color: var(--text-muted);
  background: var(--canvas);
  border-top: 0.5px solid var(--chrome-border);
}

.bs-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  padding: 16px 0.8rem 20px;
  font-size: 13px;
}

.bs-footer__copyright {
  margin: 0;
}

.bs-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs-footer__links a {
  color: var(--text-secondary);
}

.bs-footer__links a:hover,
.bs-footer__links a:focus-visible {
  color: var(--text-primary);
}

.bs-footer__build {
  flex-basis: 100%;
  margin: 0;
  font-size: 11px;
  font-style: italic;
}

/*
 * Buttons: the app's Button at a size for reading rather than for a dense
 * toolbar. Accent is an outline with a transparent fill, one weight up, as in
 * the app: the affirmative button is not just a recolour.
 */
.md-typeset .bs-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.md-typeset .bs-button:hover {
  color: var(--text-primary);
  border-color: var(--chrome-border);
}

.md-typeset .bs-button--accent {
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}

.md-typeset .bs-button--accent:hover {
  color: var(--accent);
  background: var(--info-bg);
  border-color: var(--accent);
}

.md-typeset .bs-button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}