/* The sub-tabs of the top-level tab shown (web/view-groups.js; owner, 2026-10-03: "Put Feed and Hits under
   Calendar Tab, as a sub-tab", "Put Writers under Compose Tab, as a sub-tab", and the Calendar page's segments "as
   also sub-tab under Calendar ... so that long long page becomes manageable"). One row at the top of the content,
   the look of Network's (.np-tabs, ux-app.css): an icon and a short name on each sub-tab (the full name on hover and,
   in .vg-tab-label, for a screen reader), a line under the row with the sub-tab shown underlined. The row is as wide
   as the widest of its tab's pages (view-groups.js align) and never moves as he switches between them. On a phone it
   scrolls sideways inside itself, never the page, and only the sub-tab shown keeps its short name. Every colour a
   theme token, so both themes follow. */
.vg-subnav { display: block; margin: -8px auto 14px; contain: inline-size; }
/* Before web/view-groups.js draws the row, its room is kept (the page opens on the Calendar, which has one), so the
   calendar does not jump down when it comes. */
.vg-subnav:empty { height: 39px; }
.vg-subnav[hidden], .vg-tabs[hidden] { display: none; }
.vg-tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vg-tabs::-webkit-scrollbar { display: none; }
/* position: its screen-reader name (absolute) stays inside the row's sideways scroll, never the page's */
.vg-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 10px 10px 9px;
  border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink-soft);
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); }
.vg-tab:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line); }
.vg-tab[aria-selected="true"], .vg-tab[aria-selected="true"]:hover { color: var(--ink); border-bottom-color: var(--blue); }
.vg-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: 6px; }
.vg-tab-icon { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; }
.vg-tab-icon svg { display: block; width: 16px; height: 16px; }
.vg-tab > .vg-tab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A sub-tab's count (Network's sections under Engagement bring theirs), as Network's own tabs showed it. */
.vg-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 999px; background: var(--slate-tint); box-shadow: inset 0 0 0 1px var(--slate-line); color: var(--ink);
  font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.vg-tab[aria-selected="true"] .vg-tab-badge { background: var(--blue-fill); box-shadow: none; color: var(--ink-invert); }
.vg-tab-badge[hidden] { display: none; }
.vg-tab > .vg-tab-count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .vg-subnav { margin-top: -4px; }
  .vg-tab:not([aria-selected="true"]) .vg-tab-short { display: none; }
  .vg-tab { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 640px) {
  .vg-subnav:empty { height: 38px; }
  .vg-tab { padding: 10px 10px 9px; font-size: 13px; }
}
/* The extension's side panel shows one Network card: no tabs of any kind. */
html.np-embed .vg-subnav { display: none !important; }

/* Upcoming posts, under the grid until 2026-10-03, is a sub-tab of its own: its title is the panel's own heading. */
[data-view-panel="upcoming"] .cal-agenda { margin-top: 0; }

/* Writers and Hits sat outside .content until they became sub-tabs (2026-10-03), and Writers padded itself to make up
   for it (ux-app.css, 1000 px and wider). Inside it now, beside Compose, .content's gutter is its gutter. */
@media (min-width: 1000px) {
  .content > .view[data-view-panel="writers"] { padding-inline: 0; }
}