/* ================================================================
   ADOPTION LAYER — the tab bars that grew their own look
   Added 2026-08-24 (Isaac: "i want one system for all app",
   "it shouldnt be a jungle of designs").

   WHY THIS IS A SEPARATE FILE, AND WHY IT SHOUTS. std.tabs.css loads
   near the top of the page, so every stylesheet after it wins by
   arriving later, and one of them settles its tabs with thirty-one
   !important flags of its own. A layer meant to make everything agree
   has to outrank what it is correcting, so it loads last and says
   !important throughout. That is the cost of unifying without touching
   the markup, and it is the reason not to add a thirteenth tab bar:
   the next one would need this treatment too.

   std.tabs.css has said "New tabs MUST use std-tab classes" since it
   was written, and twelve tab bars were built anyway, each re-declaring
   its own radius, padding, weight and colours. They are not different
   on purpose: they are the same idea typed out twelve times, drifting
   a pixel or a shade apart each time.

   Rewriting the markup in thirteen files would mean touching click
   handlers on screens that currently work, several of them frozen, to
   change how something looks. So the classes those files already emit
   are pointed at the tokens here instead. One set of numbers decides
   how every tab in the app looks, and changing a token changes all of
   them, which is what the standard was for.

   THE RULE, which did not exist before and is the reason this kept
   happening:

     Pill, full size  — a screen's own tabs
     Pill, small      — a second row under those, inside one of them
     Segment          — a two-way switch on one control, not navigation

   One shape, and size says the rank. An earlier version of this file
   used underline for some rows and pills for others, which put two
   shapes on screen for the same idea and is the thing this was supposed
   to end. Where two rows sit together, only their size differs: same
   shape at two sizes reads as parent and child, two shapes at one size
   reads as two unrelated controls.

   New tab bars still use std-tab classes directly. This layer is for
   what already shipped, not a licence to add a thirteenth.
   ================================================================ */

/* ── Pill-shaped bars ── */
.self-editor-tab,
.self-measure-tab,
.self-pro-tab,
.tda-tab,
.pa-tab,
.pc-billing-tab,
.self-trainy-desk-lobby-tab,
.sir-drawer-tab,
.self-bug-tab {
  padding: var(--tab-py) var(--tab-px) !important;
  border-radius: var(--tab-radius) !important;
  font-size: var(--tab-font) !important;
  font-weight: var(--tab-font-weight) !important;
  font-family: inherit !important;
  line-height: 1 !important;
  transition: var(--tab-transition) !important;
}

/* The selected one. Each of these files spells "selected" differently,
   so every spelling is listed rather than renamed in thirteen places. */
.self-editor-tab.is-active,
.self-measure-tab.is-active,
.self-pro-tab.is-active,
.tda-tab.is-active,
.pa-tab.is-active,
.pc-billing-tab.is-active,
.self-trainy-desk-lobby-tab.is-active,
.sir-drawer-tab.is-active,
.self-bug-tab.is-active,
.self-editor-tab.active,
.self-measure-tab.active,
.self-pro-tab.active,
.tda-tab.active,
.pa-tab.active,
.pc-billing-tab.active,
.self-trainy-desk-lobby-tab.active,
.sir-drawer-tab.active,
.self-bug-tab.active {
  background: var(--tab-active-bg) !important;
  color: var(--tab-active-color) !important;
  border-color: var(--tab-active-bg) !important;
}

/* ── The rest of the app's tab bars, also pills ── */
/* Profile's three tabs and the Brief's Cards / Editor pair. These were
   briefly underlined, which is how the app ended up showing two shapes
   for one idea. Pills everywhere instead: it is what this app is made of
   and what most of these bars already were.
   (Isaac 2026-08-24: "i preffer pills".) */
.self-context-tab,
.self-profile-tab {
  padding: var(--tab-py) var(--tab-px) !important;
  border: 1px solid transparent !important;
  border-radius: var(--tab-radius) !important;
  background: var(--tab-idle-bg) !important;
  color: var(--tab-idle-color) !important;
  font-size: var(--tab-font) !important;
  font-weight: var(--tab-font-weight) !important;
  font-family: inherit !important;
  line-height: 1 !important;
  transition: var(--tab-transition) !important;
}
.self-context-tab:hover:not(.is-active),
.self-profile-tab:hover:not(.is-active) {
  background: var(--tab-hover-bg) !important;
  color: var(--tab-hover-color) !important;
}
.self-context-tab.is-active,
.self-profile-tab.is-active {
  background: var(--tab-active-bg) !important;
  color: var(--tab-active-color) !important;
  border-color: var(--tab-active-bg) !important;
}
/* Neither row carries a track or a rule of its own: the pills say it. */
.self-context-tabs-bar { background:none !important; border:0 !important; border-radius:0 !important; padding:0 !important; }
.self-profile-tabs { border-bottom: 0 !important; gap: 4px !important; }

/* ── Sub-rows ── */
/* A second row of tabs under a first one is the same control one rank
   down, so it is the same pill, smaller. Not a different shape: two
   shapes on one screen was the jungle this was meant to end, and two
   rows in the SAME size was the other failure, reading as one long
   control with nothing saying which governed which.
   Size carries the rank, which is the one thing size is good at.
   (Isaac 2026-08-24: "i preffer pills. big for main tabs and smaller
   for sub tabs".) */
.self-growth-subtabs .std-tab {
  font-size: var(--tab-sub-font) !important;
  padding: var(--tab-sub-py) var(--tab-sub-px) !important;
}
/* The row itself carries no track, so the pills sit directly on the page
   and the eye reads them as belonging to the row above. */
.self-growth-subtabs {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
}

/* ── Segment bars ── */
/* The two-way switches: how it feels / what I know on the circle, and
   the diagram / in words switch on the chain. Same control, so the same
   tokens as the segment variant rather than their own greys. */
.scw-toggle {
  background: var(--tab-seg-track-bg) !important;
  border-radius: var(--tab-seg-track-radius) !important;
  padding: var(--tab-seg-pad) !important;
}
.scw-tog {
  border-radius: calc(var(--tab-seg-track-radius) - var(--tab-seg-pad)) !important;
  font-size: var(--tab-font) !important;
  font-weight: var(--tab-font-weight) !important;
  color: var(--tab-seg-idle-color) !important;
  transition: var(--tab-transition) !important;
}
.scw-tog.is-on {
  background: var(--tab-seg-active-bg) !important;
  color: var(--tab-seg-active-color) !important;
  box-shadow: var(--tab-seg-active-shadow) !important;
}