/* v3 tabs (reference §9, plan §11 #91, #93, #95; pill track: owner decision
   284, 2026-10-08; Ledger 2 decision 308). Page tabs (links in a <nav>) and
   section tabs (APG tabs over one form) look the same: a soft --neutral-tint
   track, muted labels, the open tab a raised pill (--raised, --shadow-raised)
   with --text. Tabs that don't fit go into a "More ▾" pill (tabs.js fit()).
   Macros: core/components/_lg_tabs.html; js/v3/tabs.js. */

/* Ledger 2 (decision 308): the track holds the tab list and the "More ▾" pill;
   tabs that don't fit are moved into More by tabs.js (lg-tabs__over), never
   clipped and never scrolled away without a cue. */
.lg-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  inline-size: fit-content;
  max-inline-size: 100%;
  min-inline-size: 0;
  padding: var(--space-1);
  border-radius: var(--radius-card);
  background: var(--neutral-tint);
}
.lg-tabs__list {
  display: flex;
  gap: var(--space-1);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.lg-tabs__item { display: flex; flex: none; }
.lg-tabs__over { display: none !important; }
.lg-tabs__moretab { flex: none; }
.lg-tabs__moretab[hidden] { display: none; }
.lg-tabs__moretab svg { flex: none; }
.lg-tabs__menu .lg-menu__item[aria-current="page"],
.lg-tabs__menu .lg-menu__item[aria-current="true"],
.lg-tabs__menu .lg-menu__item[aria-selected="true"] { font-weight: 600; color: var(--text); }

/* position: relative keeps the screen-reader-only count text (absolutely
   positioned) inside the scrolling row; without it a far tab's text widened
   the whole phone page. */
.lg-tabs__tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  margin: 0;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .lg-tabs__tab:hover { color: var(--text); }
}
.lg-tabs__tab[aria-selected="true"],
.lg-tabs__tab[aria-current="page"] {
  border-color: var(--raised-border);
  background: var(--raised);
  box-shadow: var(--shadow-raised);
  color: var(--text);
  font-weight: 600;
}
/* The row clips anything outside it, so the ring sits inside the tab. */
.lg-tabs__tab:focus-visible { outline-offset: -2px; }

/* Problem count: amber, a number in a small rounded box (not colour alone:
   screen readers hear ", 2 problems"). */
.lg-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--warning-tint);
  color: var(--warning);
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Page tab counts are amounts, not status (308): plain muted figures. Section
   tab counts stay amber: they count problems and say so in words. */
.lg-tabs--page .lg-tabs__count {
  min-inline-size: 0;
  padding: 0;
  background: none;
  color: var(--text-muted);
  font-weight: 500;
}

/* Panels: a heading, then the cards. The open panel only; closed ones are
   hidden="until-found" (base.css lets the browser hide those). */
.lg-tabpanel { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-6); }
/* A closed panel still has a box (the browser only skips its contents, so
   find-in-page can reach them); out of the flow it adds no padding and no
   gap to the form around it. */
.lg-tabpanel[hidden="until-found"] { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; }
.lg-tabpanel:focus-visible { outline-offset: 4px; }
.lg-tabpanel__title {
  margin: 0;
  font-size: var(--size-section);
  line-height: var(--leading-section);
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (max-width: 39.99em) {
  .lg-tabs__tab { min-height: var(--touch-target); padding-inline: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .lg-tabs__tab { transition: none; }
}