/* Shared top-level tab bar (all rules scoped under .tabbar so they can never
   collide with a page's own .tab class — app.html uses .tab for its pane nav)
   Shared top-level tab bar — used on every public page.
   Single source of truth: edit here, all pages update.
   Self-contained (no page-level CSS variables). */
/* ---------- Top-level tab bar ----------
   The silhouette comes from artwork via border-image 9-slice: the curved caps stay
   fixed at their natural size, only the flat middle stretches to fit the label. */
.tabbar { position: relative; background: #0d1830; padding: 18px 0 0; }
/* account area — greeting + sign out, pinned to the right of the bar (tabs.js
   injects the markup and fills it from /me, so it's identical on every page) */
.tab-account { position: absolute; top: 0; right: 26px; bottom: 17px;   /* bottom = shelf height, centres in the tab band */
  display: flex; align-items: center; gap: 16px; z-index: 40; }
.tab-account[hidden] { display: none; }
.tab-account .who { color: #2dd4bf; font-weight: 700; font-size: .98rem; white-space: nowrap; }
.tab-account .signout { background: transparent; border: 0; color: #f5f2ea; font-weight: 700;
  font-size: .95rem; cursor: pointer; padding: 6px 4px; font-family: inherit; line-height: 1; }
.tab-account .signout:hover { color: #fff; text-decoration: underline; }
/* logged-out CTAs */
.tab-account .signin, .tab-account .join { font-family: inherit; font-weight: 700; font-size: .92rem;
  line-height: 1; cursor: pointer; border-radius: 9px; padding: 9px 15px; border: 0; }
.tab-account .signin { background: transparent; color: #f5f2ea; border: 1.5px solid rgba(245,242,234,.22); }
.tab-account .signin:hover { border-color: rgba(245,242,234,.5); }
.tab-account .join { background: #2dd4bf; color: #08261f; }
.tab-account .join:hover { filter: brightness(1.06); }
/* tab strip breaks out of the centred wrap so the first tab can bleed off the
   left edge of the screen (its left curve gets cut by the viewport edge) */
.tabbar-inner { display: flex; align-items: flex-end; max-width: none; margin: 0; padding: 0; }
.tabbar-inner .tab:first-child { margin-left: -39px; }
.tabbar .tab {
  position: relative;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 9px;
  /* size from the label only — a host page's own `.tab { flex:1 }` (app.html's
     pane nav) would otherwise stretch every tab to fill the bar */
  flex: 0 0 auto;
  height: 49px; padding: 0 9px 9px; margin-right: -47px;
  color: #0d1830; font-weight: 700; font-size: 1.04rem; line-height: 1; white-space: nowrap; text-decoration: none;
  /* pinned so host typography can never change tab widths */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none;
  background: transparent;
  border-style: solid; border-width: 0 46px 0 47px;   /* = caps at 49px tall */
  border-image-source: url('/static/tab-light.png');
  border-image-slice: 0 228 0 232 fill;
  border-image-repeat: stretch;
  transition: filter .18s ease;
}
.tabbar .tab img { height: 25px; width: auto; display: block; }
.tabbar .tab:hover { filter: brightness(1.03); }
/* left-to-right stacking: each tab sits behind the one to its left */
.tabbar-inner .tab:nth-child(1) { z-index: 6; }
.tabbar-inner .tab:nth-child(2) { z-index: 5; }
.tabbar-inner .tab:nth-child(3) { z-index: 4; }
.tabbar-inner .tab:nth-child(4) { z-index: 3; }
.tabbar-inner .tab:nth-child(5) { z-index: 2; }
.tabbar-inner .tab:nth-child(6) { z-index: 1; }
/* selected tab: its own artwork, taller, always in front */
.tabbar-inner .tab.active { z-index: 20; }
.tabbar .tab.active {
  color: #f5f2ea; height: 63px; padding: 11px 11px 0; font-size: 1.12rem; top: -6px;   /* bottom rests flush on the bar, 1px in */
  border-width: 0 58px;                               /* = 250px caps at 63px tall (source 910x274) */
  border-image-source: url('/static/tab-blue.png');
  border-image-slice: 0 250 fill;
}
.tabbar .tab.active img { height: 34px; }
.tabbar .tab.active:hover { filter: none; }
/* shelf sits ABOVE the tabs and overlaps their base, cutting one clean straight line;
   colour sampled from the blue artwork so the selected tab merges into it */
.tab-shelf { position: relative; z-index: 30; margin-top: -7px;
  height: 17px; background: #233753; }

/* Back row shown only in compact (mobile My Portal) mode */
.tb-back { display: none; align-items: center; gap: 7px; align-self: flex-start;
  padding: 10px 16px; border-radius: 10px; text-decoration: none;
  background: linear-gradient(100deg, #f3d27c, #d9a121 55%, #b9820f); color: #191002;
  font-weight: 800; font-size: .82rem; box-shadow: 0 3px 12px rgba(217,161,33,.35); }
.tabbar.compact { flex-direction: row; align-items: center; gap: 12px; }

/* ---------- Narrow screens: fixed grid, no measurement ----------
   MUST come last in the file (file order beats the desktop rules above at
   equal specificity).

   Deterministic model — pure CSS, no JS layout:
   - The strip becomes a GRID: always 2 tabs per row (3 on wide tablets).
     Tabs stretch to fill their cell; the artwork's flat middle stretches,
     exactly like wide desktop tabs. Rows are fixed and predictable.
   - Every tab paints a 12px base bar across its own full width (::after,
     spanning the border caps). Tabs tile each row edge-to-edge, so the bars
     join into one continuous line per row — every row is anchored to a bar.
   - Rows bottom-align (align-items:end), so active + inactive bottoms are
     always flush. The active box is taller ONLY because the blue artwork has
     ~50px transparent space at its top (49 * 274/224 ≈ 60px visible match). */
@media (max-width: 760px) {
  .tabbar { display: flex; flex-direction: column; padding-top: 8px; }
  /* My Portal on a phone: the wrapped tab bar costs 2-3 rows of screen, so swap it
     for a single Back row. Desktop keeps the full bar. */
  /* the portal has its own toolbar Back and its own sign-out, so the whole bar goes */
  .tabbar.compact { display: none; }
  .tab-account { position: static; order: -1; width: 100%; height: auto;
    right: auto; bottom: auto; justify-content: center; padding: 2px 0 9px; }

  .tabbar-inner { display: grid; grid-template-columns: repeat(2, 1fr);
    align-items: end; row-gap: 9px; margin: 0; padding: 0; }

  .tabbar .tab { margin: 0; }                              /* kill shingle overlap */
  .tabbar-inner .tab:first-child { margin-left: 0; }       /* kill left bleed */

  /* per-tab base bar: covers its own caps; row-mates butt together -> one line */
  .tabbar .tab::after { content: ""; position: absolute; bottom: 0;
    left: -47px; right: -47px;                             /* across the border caps */
    height: 12px; background: #233753; z-index: 30; pointer-events: none; }
  .tabbar .tab.active { top: 0; height: 70px; padding: 16px 9px 0;
    border-width: 0 64px; font-size: 1.08rem; }            /* 250/274*70 ≈ 64px caps */
  .tabbar .tab.active::after { left: -64px; right: -64px; }
  .tabbar .tab.active img { height: 32px; }
  .tab-shelf { display: none; }
}
/* wide tablets: 3 per row */
@media (min-width: 561px) and (max-width: 760px) {
  .tabbar-inner { grid-template-columns: repeat(3, 1fr); }
}