/* ─────────────────────────────────────────────────────────────────────────────
   tabsbar.css -- the top buttons of Events, Missions and Category Buffers: B1 SUMMONS buttons on a P3 BAR, from
   tabsbar_trial.html (owner, 16 Oct 2026, "b1 p3 and toggle on the right side of z-battle, also change missions and
   category buffers to this too").
   .top-bar  wraps the page's top controls (tabs, ACTIVE ONLY, chapters, Search). Its band is a ::before the full width
             of the screen, like the Cards strip, and the bar sits right under the menu: each page gives --top-gap, the
             space its container leaves above the controls, and the bar pulls up by that much.
   B1        the tabs (.ev-tab, .tabs .tab, .cb-tbtn) like the Summons buttons: white text on a dark plate with a
             site-colour edge all round; the picked one washed in the site colour. Fonts untouched.
   Link it AFTER the page's own styles: the pages' tab rules (Category Buffers' with !important) must lose.
   ───────────────────────────────────────────────────────────────────────────── */
html{overflow-x:clip;}
.top-bar{position:relative;isolation:isolate;padding:16px 0 18px;margin:calc(-1 * var(--top-gap,0px)) 0 22px;}
.top-bar::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  pointer-events:none;border-bottom:2px solid var(--acc,#E8323C);
  background:radial-gradient(ellipse at 50% 160%,rgba(var(--acc-rgb,232,50,60),.34),transparent 62%),
  linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/22px 22px,#0d1016;}
.top-bar > :last-child{margin-bottom:0 !important;}
.top-bar .tabs{margin-top:0 !important;}

/* B1 SUMMONS */
.ev-tab,.tabs .tab,.cb-tbtn{color:#fff !important;text-shadow:none !important;
  background:linear-gradient(rgba(var(--acc-rgb,232,50,60),.08),rgba(var(--acc-rgb,232,50,60),.08)),#151922 !important;
  border:1px solid rgba(var(--acc-rgb,232,50,60),.45) !important;
  box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06) !important;}
.ev-tab:hover,.tabs .tab:hover,.cb-tbtn:hover{border:1px solid var(--acc,#E8323C) !important;box-shadow:0 0 14px rgba(var(--acc-rgb,232,50,60),.35) !important;}
.ev-tab.active,.tabs .tab.on,.cb-tbtn.on{color:#fff !important;background:rgba(var(--acc-rgb,232,50,60),.22) !important;
  border:1px solid var(--acc,#E8323C) !important;text-shadow:none !important;}

/* EVENTS: ACTIVE ONLY sits at the end of the tab row, right of Z-BATTLE. #evTabs is drawn by the page's script, so the
   row is a wrapper around it and the toggle; display:contents makes the tabs and the toggle one row that wraps together. */
.ev-tabrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;}
.ev-tabrow #evTabs{display:contents;}
.ev-tabrow .activebar{margin:0 0 0 10px !important;}
.top-bar #chapterBar:not(:empty){margin:14px 0 0 !important;}
.top-bar .ev-search{margin:14px auto 0 !important;}
.top-bar .cb-searchbar{margin-top:14px !important;}
.top-bar .cb-targets{margin-bottom:0 !important;}

/* THE OTHER PAGES' TOPS IN THE BAND (owner, 17 Oct 2026): item pages (title, Search, chips, count), Timeline, Links,
   Ultimate Clash, Frontier, News. The thin rule under an item page's title is the band's own line now. */
.top-bar .page-title,.top-bar > h1{margin-top:0 !important;margin-bottom:0 !important;}
.top-bar hr.rule{display:none;}
.top-bar .search{margin:14px auto 0 !important;}
.top-bar .chips{margin:14px 0 0 !important;}
.top-bar .count{margin:10px 0 0 !important;}
.top-bar .bar{margin:14px 0 0 !important;}
.top-bar .vswitch{margin:14px auto 0 !important;}

/* A PAGE TITLE ON THE BAND for pages that had none (Events, Missions, Category Buffers; owner 17 Oct 2026, "there is
   no header"): the item pages' title look -- Black Han Sans italic in the site colour */
.top-title{margin:0 0 14px;text-align:center;font-family:'Black Han Sans',sans-serif;font-style:italic;font-weight:400;
  font-size:1.35rem;letter-spacing:2px;text-transform:uppercase;color:var(--acc,#E8323C);}
.top-bar .lpage-title{margin:0 !important;}
.top-bar .ltabs{margin:14px auto 0 !important;}
.top-bar .lede{margin:10px auto 0 !important;}
.top-bar .topline,.top-bar .tabs,.top-bar .chips{margin-top:14px !important;margin-bottom:0 !important;}
.top-bar .cur-wrap{margin:0 auto !important;}
.top-bar #pager{margin:14px 0 0 !important;}

/* ACTIVE ONLY = A2 LIVE DOT of activeonly_trial.html (owner, 17 Oct 2026), Events and Summons (#activeToggle only --
   other .pswitch toggles, like Community Tier List's THIS MONTH / ALL TIME, keep theirs). One angled button with a dot:
   grey when off; on, the dot lights and pulses and the edge lights, GREEN like the LIVE NOW tags -- or the site colour
   with Settings > Lists & grids > ACTIVE ONLY light (dokkanAoColour -> html.ao-site, set by nav.js). */
:root{--ao:#3ddc84;--ao-rgb:61,220,132;}
html.ao-site{--ao:var(--acc,#E8323C);--ao-rgb:var(--acc-rgb,232,50,60);}
#activeToggle.pswitch{position:relative;isolation:isolate;padding:8px 18px !important;gap:9px !important;}
#activeToggle.pswitch::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:4px;
  background:linear-gradient(rgba(var(--acc-rgb,232,50,60),.08),rgba(var(--acc-rgb,232,50,60),.08)),#151922;
  border:1px solid rgba(var(--acc-rgb,232,50,60),.45);
  box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);transition:background .15s,border-color .15s,box-shadow .15s;}
#activeToggle.pswitch:hover::before{border-color:var(--acc,#E8323C);box-shadow:0 0 14px rgba(var(--acc-rgb,232,50,60),.35);}
#activeToggle .popt{color:#fff !important;}
#activeToggle .pknob{width:9px !important;height:9px !important;border-radius:50% !important;transform:none !important;border:0 !important;
  background:#5a606e !important;box-shadow:none !important;}
#activeToggle .pknob::after{display:none !important;}
#activeToggle.on .pknob{background:var(--ao) !important;box-shadow:0 0 0 3px rgba(var(--ao-rgb),.22),0 0 10px var(--ao) !important;animation:aoPulse 1.6s ease-in-out infinite;}
#activeToggle.on::before{border-color:var(--ao);background:rgba(var(--ao-rgb),.12);box-shadow:0 0 12px rgba(var(--ao-rgb),.35);}
@keyframes aoPulse{0%,100%{box-shadow:0 0 0 3px rgba(var(--ao-rgb),.22),0 0 8px var(--ao);}50%{box-shadow:0 0 0 6px rgba(var(--ao-rgb),.08),0 0 16px var(--ao);}}
@media (prefers-reduced-motion:reduce){ #activeToggle.on .pknob{animation:none;} }

/* THE TITLES ON THE BANDS NEED ROOM UNDER THEM (owner, 17 Oct 2026, "too close"): `.top-bar > h1` above zeroes every
   band title's bottom margin, which took the new Events / Missions / Category Buffers titles right down onto their buttons */
.top-bar > .top-title{margin-bottom:18px !important;}

/* ABOUT / CONTACT / PRIVACY POLICY / TERMS OF USE tabs in B1 too (owner, 17 Oct 2026, "the button we use now"):
   white text on a dark plate with a site-colour edge all round; the page you are on washed in the site colour */
.ltab{color:#fff !important;text-shadow:none !important;
  background:linear-gradient(rgba(var(--acc-rgb,232,50,60),.08),rgba(var(--acc-rgb,232,50,60),.08)),#151922 !important;
  border:1px solid rgba(var(--acc-rgb,232,50,60),.45) !important;
  box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06) !important;}
.ltab:hover{border:1px solid var(--acc,#E8323C) !important;box-shadow:0 0 14px rgba(var(--acc-rgb,232,50,60),.35) !important;}
.ltab.on{background:rgba(var(--acc-rgb,232,50,60),.22) !important;border:1px solid var(--acc,#E8323C) !important;}

/* INNER PAGES GET THE BAND TOO (owner, 17 Oct 2026, "same with all clickable stuff, like Dokkan Frontier which has one"):
   a category's list on Category Buffers, an event / Z-Battle / boss, an Ultimate Clash stage / enemy, one link, one
   news article, one awakening medal. Frontier's look: the section's name in the middle, the back button on the left.
   The bars that follow you while you scroll are untouched and sit under it. */
.sub-band{display:flex;align-items:center;justify-content:center;min-height:62px;margin-bottom:18px !important;padding:14px 0 !important;}
.sub-band > .top-title{margin:0 !important;}
/* centred without transform -- the house buttons pin their own transform */
.sub-band > .house-back{position:absolute !important;left:0;top:0;bottom:0;height:fit-content;margin:auto 0 !important;z-index:2;}
@media(max-width:700px){
  .sub-band{flex-direction:column;gap:10px;}
  .sub-band > .house-back{position:relative !important;left:auto;top:auto;bottom:auto;margin:0 !important;order:-1;align-self:flex-start;}
}
/* Ultimate Clash's following bar says "Ultimate Clash" only once it follows (the band says it above) */
.sticky-bar:not(.is-stuck) > .uc-title{display:none;}
@media(max-width:560px){ .news-bar,.wrap > #view > .sub-band{--top-gap:14px !important;} }

/* written as the page writes it, not in capitals (owner, 17 Oct 2026: "Ultimate Clash" everywhere) */
.top-title.tt-plain{text-transform:none;}

/* EVERY PAGE TITLE IS WRITTEN LIKE "Ultimate Clash", not in capitals (owner, 17 Oct 2026: "write all headers this way").
   The titles' text is Title Case now; these undo the CSS that forced capitals on top of it. */
.top-title,.news-head h1,.tb-head h1,.dia-title-text,.dia-title-text span{text-transform:none !important;}