/* ============================================================
   AMMO · Tabs and sub-tabs
   ------------------------------------------------------------
   One stylesheet for two levels of navigation, replacing the five
   dialects the products grew separately:
     level 1  .ammo-tabs, .tabs, .preferences-groups
     level 2  .ammo-subtabs, .settings-sections, .smtp-setup-tabs,
              .preferences-sections

   Load it AFTER app.css. It also replaces
   wanda/static/css/account-menu.css lines 58-66.

   The two levels must not look alike:
     level 1  underline tabs, ink indicator, 34px pointer
     level 2  segmented track, surface pill, 1px accent ring

   Every value comes from an AMMO token. The --ammo-tab-* variables
   below read the host's own tokens first (var(--ink, …)), so a host
   that loads app.css gets both appearances for free. Override the
   variables only when running standalone.

   ADOPTION: every older class name still works, so existing markup
   needs no change. Rename to .ammo-tabs / .ammo-subtabs when the
   template is next touched.
   ============================================================ */

/* Declared on :root for a whole page, and again on .ammo-tabs-scope for a
   subtree. It has to be both: a custom property whose value contains var() is
   substituted on the element that declares it, so a :root-only declaration
   would resolve against the page theme and ignore a themed panel. Add
   .ammo-tabs-scope to any element that redefines the host tokens locally. */
:root,
.ammo-tabs-scope {
  /* Surfaces and text — host token first, literal fallback second. */
  --ammo-tab-ink: var(--ink, #f0f2f7);
  --ammo-tab-muted: var(--muted, #a5b1c5);
  --ammo-tab-line: var(--line, #2b3444);
  --ammo-tab-hover: var(--hover, #162031);
  --ammo-tab-focus: var(--focus, #82bfff);

  /* Level 1 indicator. Ink, not the accent: the accent stays free for
     the level-2 pill, and one accent per screen is the rule. */
  --ammo-tab-indicator: var(--ink, #f0f2f7);

  /* Level 2 segmented track */
  --ammo-tab-track: var(--control-bg, #131b27);
  --ammo-tab-track-line: var(--control-border, #526078);
  --ammo-tab-pill: var(--surface, #172234);
  /* The active ring is the one accent on the screen — a hairline, never a
     wash. It is what makes the selected section unmistakable in the light
     appearance, where a one-step surface pill on white reads too softly. */
  --ammo-tab-ring: var(--primary-fill, #3097ef);

  /* Geometry — pointer values. Coarse pointers get 44px at the end. */
  --ammo-tab-gap: 16px;
  --ammo-tab-pad: 8px;
  --ammo-tab-height: 34px;
  --ammo-tab-height-sub: 28px;
  --ammo-tab-touch: 44px;

  --ammo-tab-radius: var(--control-radius, 8px);
  --ammo-tab-radius-compact: var(--compact-control-radius, 4px);
  --ammo-tab-font: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* Paired light appearance for hosts without their own theme switch.
   A host that toggles app.css's [data-theme=light] needs none of this —
   its --ink / --line / --surface already change underneath. */
.ammo-widgets-light {
  --ammo-tab-ink: #202936;
  --ammo-tab-muted: #596579;
  --ammo-tab-line: #dce2eb;
  --ammo-tab-hover: #f2f6fc;
  --ammo-tab-focus: #167bc9;
  --ammo-tab-indicator: #202936;
  --ammo-tab-track: #ffffff;
  --ammo-tab-track-line: #bac6d7;
  --ammo-tab-pill: #f2f5fa;
  --ammo-tab-ring: #2689df;
}

/* ------------------------------------------------------------
   Level 1 — groups. Underline tabs.
   ------------------------------------------------------------ */

:is(.ammo-tabs-group, .preferences-navigation) { margin-bottom: 32px; }

:is(.ammo-tabs, .tabs, .preferences-groups) {
  display: flex;
  align-items: center;
  gap: var(--ammo-tab-gap);
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid var(--ammo-tab-line);
  overflow-x: auto;   /* app.css's .tabs does this; the product's did not */
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
:is(.ammo-tabs, .tabs, .preferences-groups)::-webkit-scrollbar { display: none; }

:is(.ammo-tabs, .tabs, .preferences-groups) > a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--ammo-tab-height);
  padding: 0 var(--ammo-tab-pad);
  margin: 0 0 -1px;           /* the 2px indicator covers the hairline exactly */
  border-bottom: 2px solid transparent;
  border-radius: var(--ammo-tab-radius) var(--ammo-tab-radius) 0 0;
  background: transparent;
  color: var(--ammo-tab-muted);
  font-family: var(--ammo-tab-font);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background-color .15s, border-color .15s;
}

:is(.ammo-tabs, .tabs, .preferences-groups) > a:hover {
  background: var(--ammo-tab-hover);
  color: var(--ammo-tab-ink);
}

:is(.ammo-tabs, .tabs, .preferences-groups) > a[aria-current] {
  color: var(--ammo-tab-ink);
  font-weight: 600;
  border-bottom-color: var(--ammo-tab-indicator);
}
:is(.ammo-tabs, .tabs, .preferences-groups) > a[aria-current]:hover { color: var(--ammo-tab-ink); }

:is(.ammo-tabs, .tabs, .preferences-groups) > a:focus-visible {
  outline: 2px solid var(--ammo-tab-focus);
  outline-offset: -2px;       /* stays inside the scrolling row */
  border-radius: var(--ammo-tab-radius);
}

/* ------------------------------------------------------------
   Level 2 — sections. Segmented track.
   A different idiom on purpose: a chosen control inside one area,
   not a second row of navigation.
   ------------------------------------------------------------ */

:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  max-width: 100%;
  border: 1px solid var(--ammo-tab-track-line);
  border-radius: var(--ammo-tab-radius);
  background: var(--ammo-tab-track);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections)::-webkit-scrollbar { display: none; }

:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > a,
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--ammo-tab-height-sub);
  padding: 0 10px;
  margin: 0;
  border: 1px solid transparent;   /* reserved so the active ring never shifts layout */
  border-radius: var(--ammo-tab-radius-compact);
  background: transparent;
  color: var(--ammo-tab-muted);
  font-family: var(--ammo-tab-font);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}

/* The role=tab button variant has to outrank the host's global button rule —
   app.css paints every bare button with --primary-fill at a specificity no
   class selector can reach. The product's own templates use <a>, so this only
   matters for a host that renders the segmented control as buttons. */
.ammo-subtabs > button[role=tab],
.preferences-sections > button[role=tab] {
  background: transparent !important;
  color: var(--ammo-tab-muted) !important;
  border-color: transparent !important;
}

:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > a:hover,
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > button:hover {
  background: var(--ammo-tab-hover);
  color: var(--ammo-tab-ink);
}
.ammo-subtabs > button[role=tab]:hover,
.preferences-sections > button[role=tab]:hover {
  background: var(--ammo-tab-hover) !important;
  color: var(--ammo-tab-ink) !important;
}

/* Active = surface pill + accent ring + weight 600. Hover carries the wash
   alone, so the ring and the weight separate the two — the fills sit one step
   apart and would otherwise read alike. */
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > a[aria-current],
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > a[aria-selected=true],
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > button[aria-selected=true] {
  background: var(--ammo-tab-pill);
  border-color: var(--ammo-tab-ring);
  color: var(--ammo-tab-ink);
  font-weight: 600;
}
.ammo-subtabs > button[aria-selected=true],
.preferences-sections > button[aria-selected=true] {
  background: var(--ammo-tab-pill) !important;
  color: var(--ammo-tab-ink) !important;
  border-color: var(--ammo-tab-ring) !important;
}
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > a[aria-current]:hover,
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > a[aria-selected=true]:hover,
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > button[aria-selected=true]:hover {
  background: var(--ammo-tab-pill);
  color: var(--ammo-tab-ink);
}

:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > a:focus-visible,
:is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > button:focus-visible {
  outline: 2px solid var(--ammo-tab-focus);
  outline-offset: -2px;       /* inside the segmented track */
}

/* Panels switched by widgets/tabs.js */
[data-ammo-tab-panel][hidden] { display: none; }

/* ------------------------------------------------------------
   Touch: the compact pointer metrics are the point, but touch
   actions stay at 44px.
   ------------------------------------------------------------ */

@media (pointer: coarse) {
  :is(.ammo-tabs, .tabs, .preferences-groups) > a { min-height: var(--ammo-tab-touch); }
  :is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > a,
  :is(.ammo-subtabs, .settings-sections, .smtp-setup-tabs, .preferences-sections) > button { min-height: var(--ammo-tab-touch); }
}