/* ============================================================
 App tab bar that picks its layout by room.
 tab-bar.js measures and sets one of:
   (none)      normal bar, every tab with its full name
   tb-a        one row, tabs as icon + initials stretched to fill (open app named)
   tb-b        Down | Home | Apps; Apps opens a second row of app tabs
 tb-compact goes with tb-a and tb-b so the phone-size tab styling also applies above 640px.
 ============================================================ */
.tb-apps, .tb-break { display: none; }
.nav-strip.tb-still, .nav-strip.tb-still * { transition: none !important; }

/* Compact tab styling as class rules (same as the max-width: 640px rules in the page and theme.css) */
html.tb-compact .nav-strip .nav-btn { padding: 0.6rem 0.75rem; gap: 0.35rem; min-height: 52px; }
html.tb-compact .nav-strip .nav-btn .nav-subtitle { display: none; }
html.tb-compact .nav-strip .nav-btn .nav-title { font-size: 0.75rem; }
html.tb-compact .nav-strip .nav-btn > span:first-child, html.tb-compact .nav-strip .nav-util { font-size: 1.2rem; }
html.tb-compact .nav-strip .nav-util { padding: 0.6rem 0.5rem; min-height: 52px; }
html.tb-compact .nav-strip { padding-left: 0.5rem; justify-content: flex-start; }
html.tb-compact .nav-strip .nav-btn-inactive .nav-home-text { display: none; }
html.tb-compact .nav-strip .nav-btn-inactive, html.tb-compact body .nav-strip .nav-btn-inactive { opacity: 0.85; gap: 0.2rem; }
html.tb-compact .nav-strip .nav-btn-inactive .nav-title { display: block; font-size: 0; line-height: 1; }
html.tb-compact .nav-strip .nav-btn-inactive .nav-title::after { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; }
html.tb-compact #rssBtn.nav-btn-inactive .nav-title::after, html.tb-compact #tabRss.nav-btn-inactive .nav-title::after { content: 'FD'; }
html.tb-compact #benchBtn.nav-btn-inactive .nav-title::after, html.tb-compact #tabBench.nav-btn-inactive .nav-title::after { content: 'BC'; }
html.tb-compact #influenceBtn.nav-btn-inactive .nav-title::after, html.tb-compact #tabInfluence.nav-btn-inactive .nav-title::after { content: 'IF'; }
html.tb-compact #pathlaidBtn.nav-btn-inactive .nav-title::after, html.tb-compact #tabPathlaid.nav-btn-inactive .nav-title::after { content: 'PL'; }
html.tb-compact #tabGeneral.nav-btn-inactive .text-left { display: none; }
html.tb-compact .nav-strip .nav-btn-inactive { padding-left: 0.55rem; padding-right: 0.55rem; }
html.tb-compact .nav-strip .nav-btn-active { padding-left: 0.55rem; padding-right: 0.6rem; }
html.tb-compact .nav-strip .nav-btn-active .nav-home-text { display: inline; }
html.tb-compact .nav-strip .theme-toggle .theme-label { display: none; }
html.tb-compact .nav-strip .theme-toggle { padding: 0.3rem 0.4rem; margin: 0 0.2rem; }

/* A: tabs grow to fill the bar; it only scrolls when even the smallest size does not fit */
html.tb-a .nav-strip .nav-btn { flex: 1 0 auto; justify-content: center; }
html.tb-a .nav-strip .nav-btn-inactive { padding-left: 0.3rem; padding-right: 0.3rem; }
/* A only when every tab gets a roomy target; below that the bar switches to B (tweak this to move the switch point) */
html.tb-a .nav-strip .nav-btn-inactive { min-width: 80px; }

/* B: ↓ | Home | Apps; Apps opens a second row where the app tabs share the width */
html.tb-b .nav-strip { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
html.tb-b .nav-strip > * { order: 0; }
html.tb-b .nav-strip .tb-apps { display: flex; order: 1; flex: 1 0 auto; justify-content: center; }
html.tb-b .nav-strip > #mainBtn, html.tb-b .nav-strip > a.nav-btn[href="/"] { flex: 1 0 auto; justify-content: center; }
html.tb-b .nav-strip .theme-toggle { order: 2; margin: 0 0.5rem; padding: 0.4rem 0.65rem; }
/* General behaves like the app tabs (name, then shortened, then initials) */
html.tb-b .nav-strip #tabGeneral.nav-btn-inactive .text-left { display: block; }
html.tb-b .nav-strip #tabGeneral.nav-btn-inactive .nav-title::after { content: 'GN'; }
html.tb-b .nav-strip .tb-break { display: block; order: 5; flex-basis: 100%; height: 0; }
html.tb-b .nav-strip .tb-app { order: 10; display: none; }
html.tb-b .nav-strip.tb-open .tb-app { display: flex; }
html.tb-b .nav-strip.tb-open .nav-divider.tb-trail { display: none; }
html.tb-b .nav-strip.tb-open { border-top: 0; }
html.tb-b .nav-strip.tb-open .tb-break { height: 1px; background: rgba(0,0,0,.12); }

/* Second row: inactive tabs share the space; the open app keeps its full label */
html.tb-b .nav-strip .nav-btn.tb-app.nav-btn-inactive { container-type: inline-size; }
html.tb-b .nav-strip .nav-btn.tb-app { justify-content: center; overflow: hidden; padding-left: 0.4rem !important; padding-right: 0.4rem !important; }
html.tb-b .nav-strip .nav-btn.tb-app .text-left { min-width: 0; }
html.tb-b .nav-strip .nav-btn.tb-app.nav-btn-active .nav-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tb-b .nav-strip .nav-btn.tb-app.nav-btn-inactive .text-left { min-width: 0; }
@container (min-width: 60px) {
  html.tb-b .nav-strip .nav-btn.tb-app.nav-btn-inactive .nav-title { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tb-b .nav-strip .nav-btn.tb-app.nav-btn-inactive .nav-title::after { content: none !important; }
}

/* Room for the slant of the last tab, so the bar does not scroll by a few pixels */
html.tb-a .nav-strip, html.tb-b .nav-strip { padding-right: 6px; }
.nav-strip .tb-apps .tb-label { font-size: 0.85rem; }
/* Home shows its name in B, where the button has room */
html.tb-b .nav-strip > #mainBtn .nav-home-text, html.tb-b .nav-strip > a.nav-btn[href="/"] .nav-home-text { display: inline !important; }

/* Width changes glide; measuring is instant */
html.tb-b .nav-strip .nav-btn.tb-app { transition: flex-basis .3s ease, background-color .2s, box-shadow .2s; }
html.tb-b .nav-strip.tb-measure .nav-btn.tb-app { flex: 0 0 auto !important; container-type: normal !important; transition: none !important; }
html.tb-b .nav-strip.tb-measure .nav-btn.tb-app .nav-title,
html.tb-b .nav-strip.tb-full .nav-btn.tb-app .nav-title { font-size: 0.75rem !important; white-space: nowrap; }
html.tb-b .nav-strip.tb-measure .nav-btn.tb-app .nav-title::after,
html.tb-b .nav-strip.tb-full .nav-btn.tb-app .nav-title::after { content: none !important; }
/* Rows keep the flex basis set by tab-bar.js */
html.tb-b .nav-strip .nav-btn.tb-app.nav-btn-inactive, html.tb-b .nav-strip .nav-btn.tb-app.nav-btn-active { min-width: 0; }

/* Apps button takes the open tab's own colour where the page sets one by id */
.tb-apps.nav-btn-active[data-app="rssBtn"], .tb-apps.nav-btn-active[data-app="tabRss"] { box-shadow: inset 0 -4px 0 0 #facc15; }
.tb-apps.nav-btn-active[data-app="tabGeneral"] { box-shadow: inset 0 -4px 0 0 #3b82f6; }

/* Apps button chevron turns when open */
.tb-apps .tb-chev { display: inline-block; transition: transform .2s; font-size: 0.8rem; }
.nav-strip.tb-open .tb-apps .tb-chev { transform: rotate(180deg); }