/* The shell of the five sections (2.7.0): a section's tab strip and its panel
   (js/tabstrip.js), the menu's foot (Settings, Help, About), and the top bar's
   slot for the global modes (js/modes.js). Loaded after nav.css. One file per
   section beside this one (overview.css, traffic.css, sales.css, ai.css,
   site.css), each its builder's. Tokens come from app.css. */

/* ------------------------------------------------ a section's tab strip */
.stabs { margin: 0; }
.stabs-list { display: flex; gap: 2px; margin: 0 0 12px; border-bottom: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.stabs-list::-webkit-scrollbar { display: none; }
.stab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px 7px; margin-bottom: -1px;
  font-size: 14px; line-height: 1.3; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
.stab:hover { color: var(--ink); background: var(--sunk); }
.stab[aria-selected="true"] { color: var(--ink); font-weight: 640; border-bottom-color: var(--ink); }
.stab[aria-selected="true"]:hover { background: none; }
.stab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.stab .tab-n { margin: 0; }
.stabs-panel { outline: none; }
/* the page's own title stays for screen readers and print; the bar and the strip name it on screen */
.stabs-panel > .head > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stabs-panel > .head.shown > h1 { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.stabs-panel > .head { margin-top: 2px; }
/* the strip stays put when the tab changes; only the panel rises in */
.panel.enter > .stabs { animation: none; }
.panel.enter > .stabs > .stabs-panel { animation: rise .32s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .panel.enter > .stabs > .stabs-panel { animation: none; } }
@media (max-width: 767px) {
  .stabs-list { margin: 0 -16px 12px; padding: 0 16px; }
  .stab { padding: 9px 11px 8px; }
}
@media print {
  .stabs-list { display: none; }
  .stabs-panel > .head > h1 { position: static; width: auto; height: auto; clip: auto; }
}

/* Leads & sales > Pipeline (shell step): which file it counts from */

/* -------------------------------------- the top bar's slot for the modes */
.bar-modes { display: contents; }
.bar-modes:empty { display: none; }

/* -------------------------- the phone's bottom bar: five sections and Menu */
@media (max-width: 767px) {
  .tabbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tb-i > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ------------------------------------- the menu's foot: Settings, Help, About */
.foot-btn.foot-link { width: 100%; }
.app:not([data-rail="icons"]) .rail-foot .foot-btn.foot-link { flex: 1 0 100%; }
.foot-btn.foot-link[aria-current] { color: var(--ink); font-weight: 640; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.app[data-rail="icons"] .foot-btn.foot-link { flex: none; }