/* =====================================================================
   px_ui / tabs_html — the shared accessible tab strip (6C-49).

   An asset because the server strips the text out of a template's
   <style> element, so these rules would never reach the page. It is
   head-linked from anvil.yaml native_deps.head_html, which is also what
   styles the designer canvas.

   SCOPING. Every selector below except the root rule is prefixed
   :where(.px-tabs), which adds ZERO specificity, so no rule can change
   which one wins. The root rule stays the bare .px-tabs: a selector
   whose subject IS the root can never also take the root as an
   ancestor.

   NO SECOND PRIVATE CLASS, and that is a decision rather than an
   omission. The second-class remedy exists for a rule that could win
   only by document order, and a head link loses that tie. There is no
   such rule here: .px-tabs* is spelled in no host repo, in no host
   theme asset, and in none of this dependency's runtime-injected
   sheets (px_theme/_px_theme_css.py, px_theme/_px_shared_js.py,
   mar_editor/_pxmar_core_js.py). The only selectors these rules can tie
   with come from the browser's default sheet, which any class outranks
   whatever the order.

   Tab ids come from the host, with ARIA, keyboard support, history, and
   a loud failure for an id it does not recognise. It does NOT touch the
   responsive master/detail class on a tab change: that behaviour belongs
   to ``px_ui/master_detail_html``, and the class name itself is absent
   from this package. This component raises ``x-tab-change`` and the
   host decides what a tab means.

   COLOUR POLICY (3C-07 / 3T-07 / OD-02 / 3C-03b, hard):
     * ZERO colour literals live in this file — every colour is a
       --px-* token from the unified set.
     * NO var() fallbacks: an unresolved token must fail visibly rather
       than silently paint a stand-in. A host that declined an accent
       (ensure_theme_injected(accent=None)) therefore paints no selected
       underline, which is the ruled behaviour, not a bug to patch.
   ===================================================================== */

.px-tabs {
  font-family: var(--px-font);
  color: var(--px-text-primary);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

:where(.px-tabs) .px-tabs-strip {
  display: flex;
  align-items: stretch;
  gap: var(--px-space-xs);
  border-bottom: 1px solid var(--px-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.px-tabs) .px-tabs-tab {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-top-left-radius: var(--px-radius-sm);
  border-top-right-radius: var(--px-radius-sm);
  padding: var(--px-space-sm) var(--px-space-md);
  font: inherit;
  font-weight: 600;
  color: var(--px-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--px-transition-fast),
    background var(--px-transition-fast),
    border-color var(--px-transition-fast);
}

:where(.px-tabs) .px-tabs-tab:hover {
  color: var(--px-text-primary);
  background: var(--px-bg-elevated);
}

:where(.px-tabs) .px-tabs-tab:focus-visible {
  outline: 2px solid var(--px-border-strong);
  outline-offset: 2px;
}

/* The selected state is announced by aria-selected and PAINTED off it —
   one source of truth, so a mismatch between what a screen reader says
   and what the eye sees is not expressible. */
:where(.px-tabs) .px-tabs-tab[aria-selected="true"] {
  color: var(--px-text-primary);
  border-bottom-color: var(--px-accent);
}

/* The label span keeps the button itself as the event target, so a
   click always reports the button's own data-px-tab-id. */
:where(.px-tabs) .px-tabs-tab-label {
  pointer-events: none;
}

:where(.px-tabs) .px-tabs-panel {
  min-width: 0;
  padding-top: var(--px-space-md);
}

:where(.px-tabs) .px-tabs-panel:focus-visible {
  outline: 2px solid var(--px-border-strong);
  outline-offset: 2px;
}