/* ============================================
   <xm-tabs> / <xm-tab> / <xm-tab-panel> — tab strip.

   Surface / ink (AD-13): a transparent strip tracing its host surface. On the
   desk family the inactive tab ink is var(--md-sys-color-on-surface-variant)
   and the active tab is var(--md-sys-color-on-surface). The active indicator
   is the single coral accent var(--md-sys-color-primary). Hairline 1px
   baseline rule. Indicator slide is short3 standard easing — no bounce.

   xm-tab / xm-tab-panel are LIGHT-DOM hosts projected through this element's
   slots, so they are styled with ::slotted(...). The active/disabled state
   classes are added to the xm-tab HOST by xm-tabs.

   BEM root block `tabs`; elements `__list` `__tab` `__label` `__indicator`
   `__panels` `__panel`; modifiers `__tab--active` `__tab--disabled`,
   size `--xs|sm|md|lg`.
   ============================================ */

.tabs {
  display: block;
}

/* ---------- Inset — the strip fills a container that owns the edge ----------
   In an <xm-app-bar> `nav` region the bar draws the hairline, so the strip
   drops its own rule and pins the coral indicator to the container's bottom
   edge instead of asserting one of its own (ADR 0027). The host's own
   display/height live in the render-time <style> — the sheet here is inside
   @layer components, which an unlayered :host rule would always outrank. */
:host([inset]) .tabs {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}
:host([inset]) .tabs__list {
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}
:host([inset]) .tabs__list {
  border-bottom: 0;
}
:host([inset]) ::slotted(xm-tab) {
  margin-bottom: 0;
  border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0 0;
}
:host([inset]) .tabs__panels {
  display: none;
}

/* ---------- Tablist (the strip) ---------- */
.tabs__list {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--s-1);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* ---------- Tabs (slotted xm-tab hosts) ---------- */
::slotted(xm-tab) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  margin-bottom: -1px;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0 0;
  transition:
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
::slotted(xm-tab:hover) {
  color: var(--md-sys-color-on-surface);
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
}
::slotted(xm-tab:focus) {
  outline: none;
}
::slotted(xm-tab:focus-visible) {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}
::slotted(.tabs__tab--active) {
  color: var(--md-sys-color-on-surface);
}
::slotted(.tabs__tab--disabled) {
  cursor: not-allowed;
  color: var(--xm-color-on-surface-disabled);
}
::slotted(.tabs__tab--disabled:hover) {
  background: transparent;
  color: var(--xm-color-on-surface-disabled);
}

/* ---------- Sizes — one shared tab height per size ---------- */
.tabs--xs ::slotted(xm-tab) { padding: var(--s-1) var(--s-2); font-size: var(--md-sys-typescale-label-small-size); }
.tabs--sm ::slotted(xm-tab) { padding: var(--s-1) var(--s-3); font-size: var(--md-sys-typescale-body-small-size); }
.tabs--md ::slotted(xm-tab) { padding: var(--s-2) var(--s-3); font-size: var(--md-sys-typescale-body-medium-size); }
.tabs--lg ::slotted(xm-tab) { padding: var(--s-3) var(--s-4); font-size: var(--md-sys-typescale-title-small-size); }

/* ---------- Coral active indicator (sliding underline) ---------- */
.tabs__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  opacity: 0;
  transform: translateX(0);
  transition:
    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    width var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  pointer-events: none;
}

/* ---------- Panels ---------- */
.tabs__panels {
  padding-top: var(--s-4);
}
::slotted(xm-tab-panel) {
  display: block;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}
::slotted(xm-tab-panel[hidden]) {
  display: none;
}