/* ===================================================================
   Top bar, corpus switcher, mobile menu, footer
   ================================================================== */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-9);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-sm);
}

/* The breadcrumb trail's own bar, directly below the primary one and sharing
   its gutter, so together they read as one header rather than the trail
   belonging to the (much narrower) reading column it used to sit atop.
   Sticky at the primary bar's own height, so it stacks directly beneath the
   bar rather than under it or gapped below it; opaque rather than the bar's
   blur-over-translucent treatment, since unlike the bar it is never the only
   thing between the reader's eye and scrolling text. `--chrome-h` (tokens.css)
   is what a wide-screen sidebar or outline clears to sit below both. */
.crumb-bar {
  position: sticky;
  top: 3.05rem;
  z-index: 39;
  padding: var(--space-4) var(--space-9);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.crumbs {
  display: flex;
  align-items: baseline;
  /* Wraps by default, so a trail nobody has measured yet (no JS) still shows
     every crumb rather than clipping past the edge. `crumbs_controller.js` switches to a
     single tight row -- `.crumbs-tight` -- once it has measured the trail and
     folded whatever does not fit behind the "…" trigger. */
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--faint);
}
.crumbs.crumbs-tight { flex-wrap: nowrap; overflow: hidden; }
.crumbs a { text-decoration: none; color: inherit; }
.crumbs a:hover { color: var(--accent); }
.crumbs .crumb { display: inline-flex; align-items: baseline; min-width: 0; flex: none; }
/* Hidden by crumbs_controller.js once the trail is wider than the page, and folded into the
   "…" trigger's menu instead. Without JS these just render, so the trail
   degrades to the plain, uncollapsed list. */
.crumbs .crumb.crumb-hidden { display: none; }
.crumbs .sep { margin: 0 .45rem; color: var(--rule); flex: none; }

/* Headings run long -- Title 38 has one at 200 characters -- so any one crumb
   clips to a line rather than stretching the trail; the tooltip carries the
   whole label. The current page gets more room, since it is the one crumb
   that can never fold into the overflow menu. */
.crumbs .crumb a {
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.crumbs .crumb-current a { max-width: min(48ch, 100%); }

/* That trailing crumb is now always the page you are on. It stays an anchor —
   pointing at itself — so the trail is one uniform run, but it reads as a
   position rather than somewhere to go: a shade darker than the trail above
   it, and unmoved by hovering. */
.crumbs a[aria-current="page"],
.crumbs a[aria-current="page"]:hover { color: var(--muted); }

.crumbs-overflow {
  font-family: var(--sans);
  color: var(--faint);
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
  font-size: .95rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  flex: none;
}
.crumbs-overflow:hover,
.crumbs-overflow:focus,
.crumbs-overflow[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}

.bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 0;
  min-width: 0;
}

.bar-left .home {
  font-weight: 650;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.bar-left .home:hover { color: var(--accent); }

.corpus-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.corpus-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  user-select: none;
  transition: background .12s ease;
}

.corpus-trigger::-webkit-details-marker { display: none; }
.corpus-trigger:hover,
.corpus-menu[open] .corpus-trigger {
  background: var(--panel);
}

/* `.tag` gives the shape; the abbreviation's own weight and border are its. */
.corpus-tag {
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: .02em;
  padding: var(--space-1) var(--space-3);
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--muted);
  transition: color .12s ease, border-color .12s ease;
}

.corpus-trigger:hover .corpus-tag,
.corpus-menu[open] .corpus-tag {
  color: var(--accent);
  border-color: var(--accent);
}

.corpus-caret {
  color: var(--muted);
  transition: transform .15s ease, color .15s ease;
  flex-shrink: 0;
}

.corpus-trigger:hover .corpus-caret,
.corpus-menu[open] .corpus-caret {
  color: var(--accent);
}

.corpus-menu[open] .corpus-caret {
  transform: rotate(180deg);
}

/* `.panel-float` gives the surface; position and size are the dropdown's own. */
.corpus-dropdown {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  z-index: 50;
  min-width: 17.5rem;
  max-width: calc(100vw - 2rem);
  padding: var(--space-3);
  font-family: var(--sans);
}

.corpus-dropdown-header {
  font-size: var(--text-3xs);
  padding: var(--space-3) var(--space-4) var(--space-2);
}

.corpus-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}

.corpus-dropdown-item:hover:not(.disabled) {
  background: var(--accent-soft);
}

.corpus-dropdown-item.active {
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}

.corpus-dropdown-item.active .corpus-item-title {
  color: var(--accent);
  font-weight: 650;
}

.corpus-dropdown-item.disabled {
  opacity: .6;
  cursor: not-allowed;
}

.corpus-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink);
}

.corpus-item-abbr {
  font-size: var(--text-3xs);
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: var(--space-1) var(--space-3);
}

.corpus-item-desc {
  font-size: var(--text-2xs);
  color: var(--muted);
  font-weight: 400;
  line-height: 1.35;
}

.badge-soon {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: var(--space-1) var(--space-3);
  background: var(--accent-soft);
  color: var(--accent);
}

.bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  flex: 1 1 0;
  min-width: 0;
}

.bar .notes-link {
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
}
.bar .notes-link:hover { color: var(--accent); }

.desktop-only { display: inline-flex; }
.mobile-only { display: none !important; }

.mobile-menu {
  display: none;
  position: relative;
  align-items: center;
}

.mobile-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  margin: calc(-1 * var(--space-3));
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  transition: background .12s ease, color .12s ease;
}

.mobile-menu-trigger::-webkit-details-marker { display: none; }
.mobile-menu-trigger:hover,
.mobile-menu[open] .mobile-menu-trigger {
  background: var(--panel);
  color: var(--accent);
}

.hamburger-icon {
  display: block;
}

.mobile-menu-dropdown {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  z-index: 50;
  min-width: 10.5rem;
  padding: var(--space-3);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  transition: background .12s ease;
}

.mobile-menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.mobile-menu-divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--space-3) var(--space-2);
}

.mobile-note-count:not(:empty) {
  min-width: 1.35em;
  padding: 0 .35em;
  background: var(--accent-soft);
  color: var(--accent);
  text-align: center;
  font-weight: 650;
  font-size: var(--text-2xs);
}

.site-footer {
  display: flex;
  gap: var(--space-8);
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-10) var(--space-8) 3rem;
  font-family: var(--sans);
  font-size: var(--text-2xs);
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
#ac-note-count:not(:empty) {
  min-width: 1.35em;
  padding: 0 .35em;
  background: var(--accent-soft);
  color: var(--accent);
  text-align: center;
  font-weight: 650;
}

/* Shown only when the site is opened as a local file, where fetch() -- and so
   previews and search -- cannot work.  See file_warning_controller.js. */
.offline-warning {
  padding: var(--space-6) var(--space-9);
  background: var(--note-bg);
  border-bottom: 1px solid var(--note);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-xs);
}
.offline-warning code {
  background: color-mix(in srgb, var(--note) 16%, transparent);
  padding: .1em .35em;
  border-radius: var(--radius-sm);
  font-size: .95em;
}

@media (max-width: 48rem) {
  .bar { padding: var(--space-4) var(--space-6); gap: var(--space-4); }
  .crumb-bar { padding: var(--space-3) var(--space-6); }
  .bar-left { flex: 0 0 auto; gap: var(--space-3); }
  .bar-left .home { font-size: .8rem; }
  .bar-right { flex: 0 0 auto; gap: var(--space-3); }
  .desktop-only { display: none !important; }
  .mobile-only { display: inline-flex !important; }
  .mobile-menu { display: inline-flex; }
  .search { flex: 1 1 auto; max-width: none; }
}