/* Header, theme choice and touch comfort, shared by every page (the archive and lessons pages load it too).
   Loaded after site.css and frame.css. Selectors name the tag as well (header.mast) so they win over both
   without !important, and leave the archive app's own bar (a plain .mast div) alone. */

/* ---------- header: one tidy line on wide screens, a Menu button on small ones ---------- */
.mast__panel { display: contents; }
.mast__menu {
  display: none; align-items: center; min-height: 44px; padding: 8px 16px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ink, var(--site-ink));
  background: transparent; border: 2px solid currentColor; cursor: pointer;
}
.site-frame .mast__menu { color: var(--site-ink); }
header.mast .mast__nav a { white-space: nowrap; }
@media (max-width: 1280px) {
  header.mast .mast__nav { gap: 20px; }
  header.mast .mast__search { width: 220px; }
}
@media (max-width: 1180px) {
  header.mast .mast__sub { display: none; }
}
@media (max-width: 960px) {
  header.mast, .site-frame header.mast { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px 16px; }
  header.mast .mast__menu { display: inline-flex; }
  header.mast .mast__panel { display: flex; flex-direction: column; align-items: stretch; flex: 0 0 100%; gap: 10px; padding-bottom: 8px; }
  .js header.mast .mast__panel { display: none; }
  .js header.mast.is-open .mast__panel { display: flex; }
  header.mast .mast__nav { flex-wrap: wrap; gap: 0 20px; }
  header.mast .mast__nav a { padding: 10px 0; }
  header.mast .mast__search { order: 0; width: 100%; height: 44px; }
}

/* ---------- colour choice in the footer ---------- */
.foot__theme { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--grey); }
.foot__theme button {
  font: inherit; font-size: 14px; font-weight: 600; min-height: 36px; padding: 6px 14px; cursor: pointer;
  color: var(--ink); background: transparent; border: 1px solid var(--rule);
}
.foot__theme button[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }

/* ---------- touch: small links get a bigger target without moving the text ---------- */
@media (pointer: coarse) {
  .cite a:not(.play), .src__t, .src__doc, .yt, .pk-at, .moment__what a, .term__idea a { padding-block: 8px; }
  .chip { padding-block: 7px; }
}

/* ---------- the course map is too wide for a phone: show the same facts as a list there ---------- */
.pk-builds { display: none; margin: 0; padding: 0; list-style: none; }
@media (max-width: 700px) {
  .pk-mapwrap { display: none; }
  .pk-builds { display: block; }
  .pk-builds li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: var(--t-s); }
  .pk-builds a { font-weight: 700; }
}

/* ---------- second row under the header: the pages of a group (Library, Reference) ---------- */
.subnav {
  display: flex; flex-wrap: wrap; gap: 0 28px; margin-bottom: 4px; padding-bottom: 2px;
  font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--rule, var(--border));
}
.subnav a {
  padding: 8px 0 6px; color: var(--ink, var(--site-ink)); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -3px;
}
.subnav a[aria-current="page"] { border-bottom-color: var(--ink, var(--site-ink)); }
.subnav a:hover { border-bottom-color: var(--rule, var(--border)); }
header.mast .mast__nav a[aria-current="true"] { border-bottom-color: var(--rule, var(--border)); }