.view-pane[hidden], .view-pages[hidden], [data-page-row][hidden] { display: none !important; }
.view-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.view-tabs button { font: 600 13px var(--font); flex: none; white-space: nowrap; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); background: transparent; cursor: pointer; }
.view-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.view-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 12px; color: var(--muted); }
.view-pages button { flex-shrink: 0; }
.view-pages button:disabled { opacity: .45; cursor: default; }
.view-tabs button:focus-visible, .view-pages button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 600px) {
  .view-tabs { gap: 4px; margin-bottom: 8px; }
  .view-tabs button { flex: none; padding: 10px; min-height: 44px; }
  .view-pages .btn { min-height: 44px; }
}
/* tabs({ segmented: true }): a choice inside a view that already sits under
   a tab row, drawn as a segmented control so the page keeps one tab level. */
.view-seg { display: inline-grid; width: max-content; max-width: 100%; margin: 0 0 10px; }
.view-seg button { min-height: var(--size-control-sm, 32px); padding: 0 14px; }
@media (max-width: 600px) { .view-seg button { min-height: 44px; } }
/* A tab with an icon: the icon leads the label and takes accent when active. */
.view-tabs button:has(> svg.mi) { display: inline-flex; align-items: center; gap: 6px; }
.view-tabs button > svg.mi { flex: none; }
.view-tabs button[aria-selected="true"] > svg.mi { color: var(--accent); }