/* Shared chrome for the viewers: models (index.html), maps (map.html), poses
   (poses.html) and kits (kits.html). Each page keeps its own layout; this file
   owns only the bar across the top, so switching feature never looks like
   landing on a different site. Colours and type come from tokens.css, which
   every page links first.

   Every page reserves --nav-h as its first grid row, so the bar takes space
   rather than floating over the canvas. That matters for the two pages whose
   renderer sizes itself from a container: give it a row and the existing
   clientHeight maths stays correct with no offset fudge.

   The bar is 46px. When a second mod has assets for the tab, mods.js adds the
   olive mod strip under it and flips `shell-has-mods` on <html>, which grows
   --nav-h to 76px before any renderer has measured its container. */
:root {
  --nav-bar-h: 46px;
  --nav-strip-h: 30px;
  --nav-h: var(--nav-bar-h);
}
:root.shell-has-mods {
  --nav-h: calc(var(--nav-bar-h) + var(--nav-strip-h));
}

.shell-nav {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  height: var(--nav-h);
  min-width: 0;
  background: var(--mm-bg);
  font-family: var(--mm-font-mono);
  position: relative;
  z-index: 50;
}

.shell-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
  height: var(--nav-bar-h);
  min-width: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--mm-rule);
}

.shell-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: var(--mm-ink-muted);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The same sigil as the bfstats.io header, so the mesh site reads as part of it. */
.shell-brand-sigil {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.shell-brand b { color: var(--mm-accent-soft); font-weight: 500; }

.shell-tabs {
  display: flex;
  flex: none;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  overflow: hidden;
}
.shell-tabs a {
  display: block;
  padding: 7px 16px;
  color: var(--mm-ink-muted);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  border-left: 1px solid var(--mm-rule-strong);
  transition: color .15s ease, background-color .15s ease;
}
.shell-tabs a:first-child { border-left: 0; }
.shell-tabs a:hover { color: var(--mm-ink); background: var(--mm-bg-soft); }
.shell-tabs a:focus-visible { outline: 1px solid var(--mm-ink); outline-offset: -1px; }
.shell-tabs a[aria-current="page"],
.shell-tabs a[aria-current="page"]:hover {
  color: var(--mm-highlight-ink);
  background: var(--mm-highlight);
  font-weight: 600;
}
/* The map page is play.bfstats.io's. On mesh.bfstats.io the pages' <head>
   sets `shell-no-maps` and the bar is Models, Poses and Kits; everywhere else
   (localhost, the play host) Maps stays. */
:root.shell-no-maps .shell-tab-maps { display: none; }

/* What the current page is for, so the tab label can stay one word. */
.shell-sub {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--mm-ink-muted);
  font-size: 10.5px;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-spacer { flex: 1; }

/* The armoury search. A button on Models, which owns the armoury; a link to
   it from Maps and Poses. */
.shell-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 240px;
  padding: 6px 10px 6px 12px;
  background: transparent;
  border: 1px solid var(--mm-rule);
  border-radius: 999px;
  color: var(--mm-ink-muted);
  font: 11px var(--mm-font-mono);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.shell-search svg { width: 12px; height: 12px; flex: none; }
.shell-search span { flex: 1; }
.shell-search:hover,
.shell-search:focus-visible { border-color: var(--mm-ink); color: var(--mm-ink-soft); outline: none; }
.shell-search kbd {
  padding: 1px 5px;
  border: 1px solid var(--mm-rule);
  border-radius: 4px;
  color: var(--mm-ink-muted);
  font: 10px var(--mm-font-mono);
  letter-spacing: .05em;
}

/* A page's own action in the bar (map.html's Open recording), squared off
   like the tabs beside it. */
.shell-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  color: var(--mm-ink-soft);
  font: 10.5px var(--mm-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.shell-action svg { width: 13px; height: 13px; flex: none; }
.shell-action:hover,
.shell-action:focus-visible { border-color: var(--mm-ink-muted); color: var(--mm-ink); background: var(--mm-bg-soft); outline: none; }

/* Which game the three tabs are showing: the house olive anchor strip,
   injected by mods.js only when there is more than one mod with assets for
   the current tab — a viewer serving vanilla alone gets the bar and nothing
   else. */
.shell-mods {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  height: var(--nav-strip-h);
  padding: 0 16px;
  background: var(--mm-highlight);
  color: var(--mm-highlight-ink);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.shell-mods-pick { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Maps and Poses style bare labels and selects for their own panels; the
   strip must not inherit a block label or a full-width select from them. */
.shell-mods label {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
}
.shell-mods-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 5px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.shell-mods-select-wrap:hover {
  background-color: rgba(0, 0, 0, .1);
}
.shell-mods-select-wrap:focus-within {
  outline: 1px solid var(--mm-highlight-ink);
  outline-offset: 0;
}
.shell-mod-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 2px;
  flex: none;
  pointer-events: none;
}
.shell-mods select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 2px 18px 2px 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center / 9px 9px;
  border: 0;
  border-radius: 2px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
}
.shell-mods select:focus-visible { outline: none; }
.shell-mods select option { background: var(--mm-bg); color: var(--mm-ink); text-transform: none; }
.shell-mods-counts {
  color: rgba(0, 0, 0, .62);
  letter-spacing: .1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell-mods-counts b { color: var(--mm-highlight-ink); font-weight: 600; }

/* A bar with an action runs out of room for the page's sub-line sooner: gone
   rather than cut to a stub. */
@media (max-width: 1180px) {
  .shell-bar:has(.shell-action) .shell-sub { display: none; }
}
@media (max-width: 880px) {
  .shell-sub { display: none; }
  .shell-search { min-width: 0; }
  .shell-search span { display: none; }
  .shell-action { padding: 7px 9px; }
  .shell-action span { display: none; }
}
@media (max-width: 560px) {
  .shell-mods-counts { display: none; }
}
@media (max-width: 480px) {
  .shell-bar { gap: 8px; padding: 0 8px; }
  .shell-brand b { display: none; }
  .shell-tabs a { padding: 6px 8px; font-size: 10px; }
  .shell-mods { padding: 0 8px; font-size: 10px; }
}
@media (max-width: 360px) {
  .shell-tabs a { padding: 5px 6px; font-size: 9px; }
}