/*
  58-group-strips.css — v45.8.1 each group's strip, the sticky shell header,
  and its condensed state (design/shell Ship, Calendar, Condensed; the strips
  of ship/Main, calendar/Main, holdings/Main, table/Main and DM).

  --cb-h and --shell-h are measured by 112. Sticky blocks below the header
  start at --shell-h: the Codex search and rail (48, 49) and Maps' header (54).
*/

.group-strip {
  position: sticky; top: var(--cb-h, 56px); z-index: 149;
  padding: 10px 14px 0; background: #2a1e15; border-bottom: 1px solid #3a2a1d; color: #f1e4c4;
}
.group-strip[hidden] { display: none; }
.gs-kicker { font-size: 13px; font-weight: 600; color: #bfae8c; }
.gs-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-bottom: 10px; }
.gs-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; color: #f1e4c4; letter-spacing: 0; text-shadow: none; font-family: inherit; }
.gs-aside { font-size: 13px; color: #bfae8c; }
.gs-flag { font-weight: 600; color: #e8c069; }
.gs-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid #c18a2a; font-size: 12px; font-weight: 700; color: #e8c069; }
.gs-tabs {
  display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.gs-tabs::-webkit-scrollbar { display: none; }
.gs-tab {
  flex: 0 0 auto; min-height: 40px; padding: 0 0 9px; border: 0; border-bottom: 3px solid transparent; background: none;
  color: #bfae8c; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.gs-tab.is-on { color: #f1e4c4; font-weight: 700; border-bottom-color: #c18a2a; }
.gs-tab:focus-visible { outline: 2px solid #e8c069; outline-offset: 2px; }
.gs-tabs + * { margin-top: 0; }
.group-strip:not(:has(.gs-tabs)) .gs-head { padding-bottom: 12px; }

/* Ship's own pane chips (28) restated the strip's tabs. */
body[data-strip="ship"] #screen-overview .ship-pane-chips { display: none; }
/* Headings that only repeat the strip's tab (the buttons beside them stay). */
body[data-strip="calendar"] #screen-calendar > .screen-title:first-child h2,
body[data-strip="calendar"] #screen-crafting .section-title:first-of-type h2 { display: none; }
/* Table's screen still said Admin under a strip that says Table. */
body[data-strip="table"] #screen-admin > .screen-title:first-child { display: none; }

/* The sticky blocks under the header. 43 pins the Codex's sticky wrapper at
   top 0; it now starts under the shell, and its search and rail inside it. */
#screen-codex .codex-sticky-tools { top: var(--shell-h, 0px); }
#screen-codex .codex-global-search { top: var(--shell-h, 0px); }
#screen-codex #codexCategoryRail { top: calc(var(--shell-h, 0px) + 58px); }
@media (min-width: 720px) { #screen-codex #codexCategoryRail { top: calc(var(--shell-h, 0px) + 54px); } }
#screen-codex.codex-condensed #codexCategoryRail { top: calc(var(--shell-h, 0px) + 44px); }
#screen-maps .mpc-maps-sticky { top: var(--shell-h, 0px); }

/* Condensed (the Condensed board): a 48px bar, the strip's title row folds. */
body.shell-condensed .topbar.campaign-bar { min-height: 48px; }
body.shell-condensed .campaign-bar .cb-name { min-height: 40px; font-size: 17px; }
body.shell-condensed .campaign-bar .cb-day { min-height: 32px; }
body.shell-condensed .campaign-bar .cb-day-icon { display: none; }
body.shell-condensed .campaign-bar .cb-anchor,
body.shell-condensed .campaign-bar .cb-sync { width: 36px; height: 36px; }
body.shell-condensed .group-strip:has(.gs-tabs) .gs-head,
body.shell-condensed .group-strip:has(.gs-tabs) .gs-kicker { display: none; }
body.shell-condensed .group-strip:not(:has(.gs-tabs)) { padding-top: 6px; }
body.shell-condensed .group-strip:not(:has(.gs-tabs)) .gs-head { padding-bottom: 6px; }
body.shell-condensed .group-strip:not(:has(.gs-tabs)) .gs-title { font-size: 17px; }
body.shell-condensed .group-strip .gs-tab { min-height: 36px; padding-bottom: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .campaign-bar .cb-name, .gs-title { transition: font-size .15s ease; }
}
/* v46.1: six Ship tabs fit a phone (the board's 16px gap; tighter below 420px)
   rather than the last one being cut at the edge (tools/spacing-check.py). */
.gs-tabs { gap: clamp(10px, 3.2vw, 16px); }
@media (max-width: 379px) { .gs-tab { font-size: 14px; } }
/* v46.7 (the spacing pass): a campaign-bar sheet (145) rises from the bar over
   the page; the strip (149) covered its top on Ship, Calendar, Holdings and
   Table. While one is open the strip goes under the backdrop (140). */
body.cb-sheet-open .group-strip { z-index: 139; }