/* One header for both surfaces.
 *
 * Single source, mounted into the docs container and the model container, so the two
 * cannot drift into two different top menus - which is exactly what happened when each
 * had its own. Tokens come from the Wilderness Figma library; see serve/static/theme.css
 * for the values and their token names.
 *
 * On the docs site the tabs are appended into Material's own header, so search and the
 * light/dark toggle keep working. On the model explorer the whole bar is built. Both end
 * up with the same height, the same type and the same pills.
 */
:root {
  --ww-chrome-bg:        #080707;   /* surfaces/surface-base, dark */
  --ww-chrome-bg-soft:   #141412;   /* the nav variant of the same token */
  --ww-chrome-fg:        #fffefc;   /* content/content-base, dark */
  --ww-chrome-muted:     #baa69e;   /* content/content-highlight */

  /* ---- typography, defined ONCE for both surfaces -------------------------
   * These stacks were previously written out three times - here, in theme.css and in
   * ww.css - with fallback lists that did not agree, so with Atyp Display and Athelas
   * absent the two surfaces fell back to different fonts.
   *
   * Sizes are in rem, and that is a correction. They were px because the two surfaces had
   * different root sizes, so a shared rem meant two different things. They now share
   * Material's three root sizes - 125%, 137.5% from 1600px, 150% from 2000px - and px
   * became the problem instead of the fix: Material's own components scale at those
   * thresholds and anything pinned here did not. Every value below is the px it used to
   * be, divided by the 20px root it was measured against, so nothing changes at ordinary
   * widths and everything grows together above 1600px. */
  --ww-font-display:     Athelas, "Iowan Old Style", Palatino, Georgia, serif;
  --ww-font-body:        "Atyp Display", -apple-system, BlinkMacSystemFont, Helvetica,
                         Arial, sans-serif;
  --ww-font-mono:        ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ww-type-body:        .8rem;     /* 16px - Material's own .md-typeset size */
  --ww-type-nav:         .7rem;     /* 14px */
  --ww-type-small:       .64rem;    /* 12.8px */
  --ww-type-navlabel:    .62rem;    /* 12.4px - the value Material's nav title already used */
  --ww-type-table:       .72rem;    /* 14.4px */
  --ww-type-code:        .68rem;    /* 13.6px = .85em of the reading size, as Material has it */
  --ww-type-input:       .8rem;     /* 16px */

  /* kept as aliases so the banner rules below read the same as before */
  --ww-chrome-display:   var(--ww-font-display);
  --ww-chrome-body:      var(--ww-font-body);
}

/* the tab pair, identical in both surfaces */
.ww-tabs { display: flex; gap: .3rem; align-items: center; margin-left: auto; }
/* Material puts its logo left of the title; match that, and keep the same order
   after the tabs: toggle, then search. */
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.1rem; width: auto; }
.ww-tabs a {
  font-family: var(--ww-chrome-body); font-size: .625rem; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 1px; text-decoration: none;
  color: var(--ww-chrome-fg); border: 1px solid rgba(255, 254, 252, .28);
  white-space: nowrap; transition: background .12s ease;
}
.ww-tabs a:hover { background: rgba(255, 254, 252, .12); }
.ww-tabs a[aria-current="page"] {
  background: var(--ww-chrome-muted); border-color: var(--ww-chrome-muted); color: #221f20;
}

/* The model explorer uses Material's own header markup now, so there is no second bar to
   style - only the three controls Material has no equivalent of. */

/* ---- the three controls Material has no equivalent of ---------------------- */
/* Scoped to .md-header, which both surfaces now render, so one rule set covers both. These
   were briefly lost when the old .ww-bar block was removed: the search box fell back to the
   page's input styling at full width, and the toggle rendered black on black. */
.md-header .ww-search { margin-left: .2rem; }
.md-header .ww-search input {
  font-family: var(--ww-chrome-body); font-size: var(--ww-type-input);
  color: var(--ww-chrome-fg); background-color: rgba(255, 254, 252, .14);
  border: 0; border-radius: 2px; height: 1.8rem; width: 11.6rem; min-width: 0;
  padding: 0 .5rem 0 1.6rem; box-sizing: border-box;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255,254,252,0.7)"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5S12 5 9.5 5"/></svg>');
  background-repeat: no-repeat; background-position: .4rem center; background-size: .85rem;
}
.md-header .ww-search input::placeholder { color: rgba(255, 254, 252, .62); }
.md-header .ww-search input:focus,
.md-header .ww-search input:focus-visible { outline: 2px solid var(--ww-chrome-muted); }
.md-header .ww-theme-toggle {
  background: none; border: 0; cursor: pointer; padding: .2rem; line-height: 0;
  color: var(--ww-chrome-fg); opacity: .85; display: flex; align-items: center;
}
.md-header .ww-theme-toggle svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.md-header .ww-theme-toggle:hover { opacity: 1; }

/* ---- docs site (Material): keep their search and palette toggle ------------- */
.md-header {
  background-color: var(--ww-chrome-bg) !important;
  color: var(--ww-chrome-fg) !important;
  box-shadow: none !important;
}
.md-header__title { font-family: var(--ww-chrome-display); font-weight: 400;
                    font-size: .95rem; line-height: 2.4rem; }
.md-header__title .md-header__topic:first-child { font-weight: 400; }
.md-header .ww-tabs { margin-left: auto; margin-right: 8px; }
.md-search__form { border-radius: 1px; background: rgba(255, 254, 252, .12); }
.md-search__input::placeholder { color: rgba(255, 254, 252, .6); }
.md-tabs { background-color: var(--ww-chrome-bg); }

/* ---- accessibility -------------------------------------------------------- */
/* A visible focus ring on every interactive thing. Datasette ships none, and a
   keyboard user could not see where they were. */
.ww-bar a:focus-visible, .ww-tabs a:focus-visible, .ww-theme-toggle:focus-visible,
.ww-bar .ww-search input:focus-visible {
  outline: 2px solid var(--ww-chrome-muted); outline-offset: 2px;
}
/* Skip link: first thing in the tab order, invisible until focused. */
.ww-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ww-chrome-muted); color: #221f20; padding: 8px 14px;
  font-family: var(--ww-chrome-body); font-size: .65rem; border-radius: 2px;
}
.ww-skip:focus { left: 8px; top: 8px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}