/* Financials tab strip, the Graphs / Dashboards look (user, 2026-11-04) — DRAFT, only with ?drafts=1 (financials/index.html adds
   html.fin-tbx and this file; without it nothing here applies). Same look as aiq-tabbar.css (.tbx): 36px strip with a faint blue
   tint, the open tab raised, flush with the page below, flaring into the bottom line with small feet, muted inactive tabs with thin
   dividers, 14px / 1.35 text. Only the look of the tabs changes: the markup, hash marking and swap behaviour are the existing
   .at-ft-bar (section row) and #stmts-toolbar (statements row), so the open tab is still marked before paint.
   The feet are CSS gradients on ::before / ::after (not the SVG .fl), so a secTabs() redraw needs no extra markup.
   Desktop only (html.aiq-desk). The Charts tab wears it too (user, 2026-11-04): All charts · Builder are the two tabs; its controls row under it has no tabs. ── */
html.fin-tbx.aiq-desk { --tbx-tint: var(--ws-tint, #455DDC); --tbx-line: color-mix(in srgb, var(--tbx-tint) 16%, var(--a-ring, #E6E7EA)); --tbx-bed: var(--sh-bed, var(--a-page, #fff)); }

/* the strip */
/* the strip is the first thing under the name bar: the section tab row (.at-ft-bar), shown on the statements too, moves above the company row */
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { display: flex !important; flex-direction: column; margin-top: -16px !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-bar:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { order: -1; position: relative; display: flex !important; align-items: flex-end !important; flex-wrap: nowrap !important; box-sizing: border-box; height: 36px !important; min-height: 36px !important;
  margin: 0 -14px 0 !important; padding: 0 8px 0 0 !important; border-bottom: 0 !important;
  background: linear-gradient(var(--tbx-line), var(--tbx-line)) 0 calc(36px - var(--hair, 1px)) / 100% var(--hair, 1px) no-repeat,
    linear-gradient(to top, rgba(40, 50, 110, .13), transparent) 0 32px / 100% 4px no-repeat,
    linear-gradient(color-mix(in srgb, var(--tbx-tint) 8%, var(--sh-bed, var(--a-card, #fff))), color-mix(in srgb, var(--tbx-tint) 8%, var(--sh-bed, var(--a-card, #fff)))) 0 0 / 100% 36px no-repeat !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-bar:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after { display: none !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-bar > .at-ft-tools:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { order: 0 !important; margin: 0 0 0 8px !important; align-self: center !important; }
html.fin-tbx.aiq-desk.is-popout:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-bar:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { margin-right: -12px !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-co:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { margin-top: 10px !important; }
/* the statements keep only their settings row (Period, View settings, Excel) in the panel: the tab copy there goes, the strip above stands for it */
html.fin-tbx.aiq-desk:has(.at-ft-tabs > .on:is([data-k="income_statement"], [data-k="balance_sheet"], [data-k="cash_flow"])):has(#tab-financials.active #stmts-toolbar:not(.at-tb-empty)) #stmts-toolbar > :is(.fsr-tabs, .fsr-more):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { display: none !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > .on:is([data-k="income_statement"], [data-k="balance_sheet"], [data-k="cash_flow"])):has(#tab-financials.active #stmts-toolbar:not(.at-tb-empty)) #stmts-toolbar:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after { border-top: 0 !important; }
/* the page controls row that sits over the tab row on the other pages: same 36px, so it stays centred on the strip */
html.fin-tbx.aiq-desk:has(.at-ft-tabs > .on:is([data-k="x-cap"], [data-k="acquisitions"], [data-k="properties"], [data-k="patents"], [data-k="subsidiaries"], [data-k="board"], [data-k="pay"])) #tab-financials.active #stmts-toolbar:not(.at-tb-empty):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
html.fin-tbx.aiq-desk:has(.at-ft-tabs > .on[data-k="comparables"]) #tab-comparables.active #comp-root > .cmp-row3:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
html.fin-tbx.aiq-desk:has(.at-ft-tabs > .on[data-k="modeling"]) #tab-modeling.active .mw-bar:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { height: 36px !important; }
/* the row of tabs: bottom-aligned, scrolls sideways in its own box (never a sliced edge), above the strip's line */
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-tabs:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { align-items: flex-end !important; align-self: flex-end !important; gap: 0 !important; height: 36px !important; position: relative; z-index: 1; flex: 1 1 0% !important; min-width: 0 !important; margin: 0 !important; }
/* inactive tab */
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { all: unset; box-sizing: border-box !important; display: inline-block !important; flex: none !important; height: 35px !important; margin: 0 0 1px !important; padding: 0 16px !important;
  max-width: 190px; overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; position: relative !important; cursor: pointer;
  font: 400 14px/35px Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; color: color-mix(in srgb, var(--a-ink, #101112) 62%, transparent) !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):hover { color: var(--a-ink, #101112) !important; background: none !important; }
/* thin divider after an inactive tab (not before the open one) */
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after { content: '' !important; position: absolute !important; left: auto !important; right: 0 !important; top: 11px !important; bottom: 11px !important; width: var(--hair, 1px) !important; height: auto !important; border-radius: 0 !important; background: color-mix(in srgb, var(--tbx-tint) 22%, transparent) !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t:has(+ .on):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after { display: none !important; }
/* the open tab: raised, the page colour, a hairline box without its bottom edge, flush with the page below */
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t.on:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { overflow: visible !important; color: var(--a-ink, #101112) !important; font-weight: 500 !important; background: var(--tbx-bed) !important; height: 35.5px !important; margin: 0 5px 0 5px !important; padding: 0 14px 0 16px !important;
  border: var(--hair, 1px) solid var(--tbx-line) !important; border-bottom: 0 !important; border-radius: 4px 4px 0 0 !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t.on:first-child:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { margin-left: 0 !important; }
/* the feet: the corners flare into the bottom line (quarter-circle fill in the page colour with a hairline arc); the first tab has no left foot */
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t.on:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after { content: '' !important; position: absolute !important; display: block !important; top: auto !important; bottom: 0 !important; left: 100% !important; right: auto !important; width: 5px !important; height: 5px !important; border-radius: 0 !important; pointer-events: none;
  background: radial-gradient(circle at 100% 0, transparent 0 4px, var(--tbx-line) 4px 5px, var(--tbx-bed) 5px) !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t.on:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::before { content: '' !important; position: absolute; display: block; top: auto; bottom: 0; right: 100%; left: auto; width: 5px; height: 5px; pointer-events: none;
  background: radial-gradient(circle at 0 0, transparent 0 4px, var(--tbx-line) 4px 5px, var(--tbx-bed) 5px); }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t.on:first-child:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::before { display: none !important; }
/* the ‹ › arrows sit on the strip */
html.fin-tbx.aiq-desk .fsr-more:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { align-self: center !important; margin: 0 !important; }

/* the page name bar wears the sidebar's colour with black names, its bottom line the sidebar logo row's (--ws-sbbg / --ws-topline, read from the
   sidebar by the script in index.html), as Graphs and Dashboards */
html.fin-tbx.aiq-desk .at-pagebar:not(#_):not(#_):not(#_) { background: var(--ws-sbbg, transparent) !important; border-bottom-color: var(--ws-topline, var(--sh-line)) !important; }
html.fin-tbx.aiq-desk .at-pagebar:not(#_):not(#_):not(#_) :is(.at-pb-name, .at-pb-crumb, .at-pb-up, .l):not(#_) { color: var(--a-ink, #101112) !important; }

/* the page's controls row under the company row (moved there by the script in index.html), right-aligned like the statements' settings row */
html.fin-tbx.aiq-desk .at-ft > .at-ft-tools:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { order: 2; align-self: flex-end; display: flex; align-items: center; justify-content: flex-end; gap: 6px; height: 36px; margin: 0 !important; }
html.fin-tbx.aiq-desk .at-ft > .at-ft-tools:empty:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { display: none; }
/* the row exists only where the page has controls for it (KPIs, the ratio pages): its children outlast a tab change, hidden, so :empty can't tell */
html.fin-tbx.aiq-desk:not(:has(#tab-kpi.active, #tab-statistics.active)) .at-ft > .at-ft-tools:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { display: none; }
/* Spacing pass (2026-11-07): every tab label on the strip's middle line (18px down 36px), as the house .tbx bar. The open
   tab's label sat 1px below the closed ones. Dividers are a full 1px: at 0.5px they landed on fractional x and only some drew. */
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { line-height: 34px !important; padding-top: 1px !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t.on:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { padding-top: 0 !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t:not(.on):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after { width: 1px !important; }
html.fin-tbx.aiq-desk:has(.at-ft-tabs > :nth-child(2)) .at-ft .at-ft-t:not(.on):last-child:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after { display: none !important; }