/* Interaction layer for the whole app (loaded last, after premium.css and modern.css). Three rules:
   1. The tab you are on is unmistakable: Athena gold ink + a gold underline (strips) or a gold-tinted pill (segments).
   2. Changing a tab or a filter shows a short rise-and-fade of the new content; cards lift slightly on hover.
   3. Filters stay at the top while you scroll (sticky bars), so any view can be changed from anywhere on the page.
   Motion is 150–400 ms and switched off for people who prefer reduced motion. Colours are premium.css tokens only. */

:root { --ath-ease: cubic-bezier(.2, .7, .2, 1); }

/* ---- 1. active tabs ---- */
.tabs button, .tabs a, .sx-tabs button, .nw-tabs button { position: relative; transition: color .2s var(--ath-ease), background .2s var(--ath-ease); }
.tabs .on, .sx-tabs button.on, .nw-tabs button.on { color: var(--accent-ink) !important; }
.tabs .on::after, .sx-tabs button.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--accent); animation: ath-ink .35s var(--ath-ease) both; }
.sx-tabs button.on { border-bottom-color: transparent !important; }
.seg button.on, .seg a.on, .st-seg button.on, .sx-seg button.on, .nw-tabs button.on {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface)) !important; color: var(--accent-ink) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent) !important; }
.seg button, .seg a, .st-seg button, .sx-seg button { transition: background .18s var(--ath-ease), color .18s var(--ath-ease), box-shadow .18s var(--ath-ease), transform .12s; }
.seg button:active, .st-seg button:active, .sx-seg button:active, .btn:active { transform: scale(.97); }
.nav-child.active { color: var(--accent-ink) !important; }
.nav-child { transition: color .15s, background .15s, padding-left .2s var(--ath-ease); }
.nav-child:hover { padding-left: calc(var(--nav-pad, 12px) + 2px); }
@keyframes ath-ink { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }

/* ---- 2. content that just appeared (a new tab, a new filter) rises in ---- */
@keyframes ath-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#sx-tab > *, .page-body > .st > *, .st-grid > *, .pl-cards > *, .ev > #ev-body > *, .fn-wrap > *, .nw-body > *, .cc-nets > *, .tp-kpis > * {
  animation: ath-in .38s var(--ath-ease) both; }
.st-grid > *:nth-child(2), .pl-cards > *:nth-child(2), .tp-kpis > *:nth-child(2) { animation-delay: 40ms; }
.st-grid > *:nth-child(3), .pl-cards > *:nth-child(3), .tp-kpis > *:nth-child(3) { animation-delay: 80ms; }
.st-grid > *:nth-child(4), .pl-cards > *:nth-child(4), .tp-kpis > *:nth-child(4) { animation-delay: 120ms; }
.st-grid > *:nth-child(n+5), .pl-cards > *:nth-child(n+5) { animation-delay: 160ms; }
.card, .st-card, .fn-card, .sx-card, .ev-sec, .ev-bcard { transition: box-shadow .22s var(--ath-ease), transform .22s var(--ath-ease), border-color .22s var(--ath-ease); }
.st-card:hover, .ev-bcard:hover, .sx-card:hover { box-shadow: 0 1px 1px rgba(0, 0, 0, .02), 0 18px 40px -26px rgba(21, 23, 28, .38); }
.cc-leader, .cc-net { transition: background .18s var(--ath-ease), transform .18s var(--ath-ease), box-shadow .18s var(--ath-ease); }
.cc-net:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn { transition: background .15s, color .15s, box-shadow .15s, transform .1s; }

/* ---- 3. filters at the top, always reachable ---- */
.sx-bar, .sx-team-head, .st-filters, .ev-comment-workspace > .ev-filters, .fn-filters {
  position: sticky; top: 0; z-index: 6; backdrop-filter: blur(14px) saturate(1.1);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 86%, transparent); }
.sx-team-head { padding-top: 6px; }
.st-filters { border-radius: 14px; padding: 8px 10px; margin: 0 -4px; box-shadow: 0 10px 28px -24px rgba(21, 23, 28, .45); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* Account cards: a signed-in account the site blocks for automated reading, or one that needs signing in. */
.badge-warn { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-ink); }

/* ---- Full-screen navigation dock (app.js syncFullscreenDock): the sidebar's menu as a floating glass rail ---- */
.fs-dock { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1100; width: 52px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; border-radius: 18px; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: 0 18px 50px -20px rgba(15, 17, 22, .45); transition: width .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s; }
.fs-dock:hover, .fs-dock:focus-within, .fs-dock.pinned { width: 268px; box-shadow: 0 24px 60px -18px rgba(15, 17, 22, .55); }
.fs-dock-head { display: flex; align-items: center; gap: 10px; padding: 4px 9px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.fs-dock-head small { display: block; font-size: 10.5px; color: var(--text-2); font-weight: 400; }
.fs-dock-nav { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; flex: 1; min-height: 0; padding: 2px 0; }
.fs-dock .sb-gt { font-size: 10.5px; color: var(--text-2); padding: 8px 10px 3px; white-space: nowrap; }
.fs-dock .sb-item { white-space: nowrap; width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.fs-dock .sb-item.active::before { left: -6px; }
.fs-dock .sb-lbl, .fs-dock .sb-gt, .fs-dock .sb-count, .fs-dock .sb-sub { opacity: 0; transition: opacity .15s; pointer-events: none; }
.fs-dock:hover .sb-lbl, .fs-dock:hover .sb-gt, .fs-dock:hover .sb-count, .fs-dock:hover .sb-sub,
.fs-dock:focus-within .sb-lbl, .fs-dock:focus-within .sb-gt, .fs-dock:focus-within .sb-count, .fs-dock:focus-within .sb-sub,
.fs-dock.pinned .sb-lbl, .fs-dock.pinned .sb-gt, .fs-dock.pinned .sb-count, .fs-dock.pinned .sb-sub { opacity: 1; pointer-events: auto; transition-delay: .06s; }
.fs-dock:not(:hover):not(:focus-within):not(.pinned) .sb-gt { height: 6px; padding: 0; overflow: hidden; }
.fs-dock:not(:hover):not(:focus-within):not(.pinned) .sb-sub { display: none; }
.fs-dock .sb-sub { display: block; margin: 2px 0 6px 26px; padding-left: 10px; border-left: 1px solid var(--line); }
.fs-dock .sb-sub[hidden] { display: none !important; }
.fs-dock .sb-sub a, .fs-dock .sb-sub .nav-i { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; text-decoration: none; }
.fs-dock .sb-sub a:hover { background: var(--nav-hover, var(--surface-2)); color: var(--text); }
.fs-dock .sb-sub a.active { color: var(--text); font-weight: 600; }
.fs-dock .sb-sub .nav-section { font-size: 10.5px; color: var(--text-2); padding: 6px 8px 2px; }
.fs-dock-exit { margin-top: 2px; border-top: 1px solid var(--line-2) !important; border-radius: 0 0 10px 10px; padding-top: 6px; }
body.dashboard-fullscreen-view #main { padding-left: 76px; }
@media (max-width: 640px) { .fs-dock { left: 6px; } body.dashboard-fullscreen-view #main { padding-left: 64px; } }
@media (prefers-reduced-motion: reduce) { .fs-dock, .fs-dock * { transition: none !important; } }
.fs-dock .subnav.sb-sub { position: static; transform: none; width: auto; height: auto; max-height: none; inset: auto; background: none; box-shadow: none; overflow: visible; flex: none;
  border: 0; border-left: 1px solid var(--line); border-radius: 0; margin: 2px 0 6px 26px; padding: 0 0 0 10px; color: var(--text-2); }
.fs-dock .subnav.sb-sub .subnav-h { display: none; }

/* One period switch for every dashboard (lib.js periodBar) */
.period-slot { display: flex; }
.period-bar { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.period-bar button { border: 0; background: none; padding: 5px 10px; border-radius: 7px; font: 600 12px/1 var(--font); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.period-bar button:hover { color: var(--text); background: var(--surface); }
.period-bar button.on { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); }
.period-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 700px) { .period-bar { overflow-x: auto; max-width: 100%; } }
/* A header carrying the period switch wraps instead of squeezing the title into a thin column. */
.page-h:has(.period-slot) { flex-wrap: wrap; row-gap: 8px; }
.page-h:has(.period-slot) > .grow { flex: 1 1 320px; min-width: min(320px, 100%) !important; }
.page-h:has(.period-slot) .actions, .page-h:has(.period-slot) .ev-head-r { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }