/* sc.css — the few things the live command-centre pages need that the Fable prototype's cb.css never drew (2026-10-19).
   Tokens only (renderer/rv-theme.css values, copied into cb.css): no raw pixels except hairlines. */
.cb-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cb-nav__link[aria-current="page"]{color:var(--rv-text-strong)}
/* a later-phase page: what it will be, said plainly, never a mock */
.sc-soon{max-width:68ch}
.sc-soon__list{margin:var(--rv-s-3) 0 0;padding-left:var(--rv-s-5);color:var(--rv-text-dim);font-size:var(--rv-fs-small);text-align:left}
.sc-soon__list li+li{margin-top:var(--rv-s-1)}
/* Shared fixes the page builders found (2026-10-19):
   1. cb.css's `.cb-main{padding:… 0 …}` comes after `.cb-wrap` and zeroes the side gutter, so on a phone the content touched
      both screen edges and on desktop the main column ran wider than the hero. Put the wrap's gutter back on main. */
.cb-wrap.cb-main{padding-left:var(--rv-s-4);padding-right:var(--rv-s-4)}
@media (min-width:760px){.cb-wrap.cb-main{padding-left:var(--rv-s-6);padding-right:var(--rv-s-6)}}
/* 2. a three-level breadcrumb plus a stamp overlapped at 390 wide */
.cb-docbar{flex-wrap:wrap;row-gap:var(--rv-s-1)}
/* 3. a sortable header (a button) kept its own case beside the plain uppercase headers */
th .cb-sort{font:inherit;letter-spacing:inherit;text-transform:inherit}
/* 4. a wide table inside the sidebar grid pushed the page sideways on a phone; let grid children shrink so the table scrolls in its panel */
.cb-grid--sidebar>*,.cb-grid--sidebar .cb-panel{min-width:0}
/* 5. the background video (owner, 2026-10-20; sc.js applyBackdrop, desktop only, the visitor's switch in the account menu):
      a silent video behind the black areas either side of the content column, dimmed (owner: "make the background video
      a little darker"; --sc-bd-dim is the one number to tune). While it is on, the page ground is transparent so it shows; the
      content column keeps the solid ground it always had. Off = the site exactly as before. */
:root{--sc-bd-dim:.5}
/* The red tinge (owner 2026-10-20: "its like a Yellow color … a Red tinge to match the Red theme"): the SOCOM 4 menu video is
   gold (the forked site's), so it goes to grey (grayscale), is dimmed, takes sepia's warm tone (hue ~38°), and is turned to the site red (#a4161a,
   hue ~358°) with hue-rotate(-47deg); saturate sets how strong the red is, the last brightness how dark (owner, the same
   day: "a little Darker" — .62 → .42). The dim comes BEFORE the tint: saturating the full-
   brightness picture clipped its highlights to yellow-green, the very colour this removes. Tried on the preview 2026-10-20. */
.sc-backdrop{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;background:var(--rv-bg);filter:grayscale(1) brightness(var(--sc-bd-dim)) sepia(1) hue-rotate(-47deg) saturate(4.5) brightness(.42) contrast(1.15)}
html.sc-bd-on body{background:transparent}
html.sc-bd-on .cb-main{background:var(--rv-bg)}
/* 6. the account menu (owner, 2026-10-20): the top-right badge opens Profile / Clan HQ / Sign out (or Sign in), then the
      Background video switch at the bottom */
.sc-acctmenu{position:relative}
.sc-acctmenu__btn{cursor:pointer;font:inherit}
button.cb-acct{color:var(--rv-text)}
.sc-acct__chev{width:var(--cb-icon);height:var(--cb-icon);color:var(--rv-text-dim);margin-left:calc(var(--rv-s-1) * -1)}
.cb-btn .sc-acct__chev{color:inherit;margin-left:0}
.sc-acctmenu__btn[aria-expanded="true"] .sc-acct__chev{transform:rotate(180deg)}
.sc-acctmenu__pop{position:absolute;right:0;top:calc(100% + var(--rv-s-2));z-index:300;display:flex;flex-direction:column;min-width:16rem;padding:var(--rv-s-1);background:var(--rv-surface-1);border:1px solid var(--rv-border-2);border-radius:var(--rv-r-md);box-shadow:0 2px 2px var(--cb-shadow)}
.sc-acctmenu__pop[hidden]{display:none}
.sc-acctmenu__item{display:flex;align-items:center;gap:var(--rv-s-2);width:100%;height:var(--cb-ctl-h);padding:0 var(--rv-s-3);border:0;border-radius:var(--rv-r-sm);background:none;color:var(--rv-text);font:inherit;font-size:var(--rv-fs-small);text-align:left;cursor:pointer;white-space:nowrap}
.sc-acctmenu__item:hover{background:var(--rv-surface-2);color:var(--rv-text-strong)}
.sc-acctmenu__item:focus-visible{outline:2px solid var(--rv-focus);outline-offset:-2px}
/* 7. the page layout (owner, 2026-10-20). The DEFAULT ("make this new layout the Default and they have to turn the switch
      on to change it to the old look"): the top banner (.cb-hero) and the section menu under it (#sc-tabs, Home / Clans /
      Clan HQ …: "it needs to fit the boxes width so it looks professional") are the same 1200px column as the page below
      (.cb-wrap). The banner's picture is position:absolute;inset:0 on .cb-hero, so it narrows with it. The default lives in
      CSS so no page jumps on load. In-page tab rows (.cb-tabs--inpage) are not touched. The splash has no .cb-hero and no
      account menu.
      REVERSED 2026-10-21 (owner: "the page width layout switch is backwards … when its turned on it should show the large
      banner", and every switch starts on): the DEFAULT is now the FULL-WIDTH banner and menu bar, still with no class, so
      nothing jumps on load. The "Full-width banner" switch turned OFF adds html.sc-layout-page (sc.js applyLayoutStyle):
      banner and menu bar the page's 1200px width. */
html.sc-layout-page .cb-hero,html.sc-layout-page #sc-tabs>.cb-tabs{max-width:var(--cb-wrap);margin-left:auto;margin-right:auto}
html.sc-layout-page #sc-tabs>.cb-tabs{border-left:1px solid var(--rv-border-1);border-right:1px solid var(--rv-border-1)}
/* 8. the hero wordmark (owner, 2026-10-20): every page-type hero title ("Clans", "Clan HQ", "Standings", …) replaced with
      the owner's logo — the SAME file in the SAME place in every page's .cb-hero, since it is literal shared markup
      (<h1 class="cb-hero__title"><img class="cb-hero__logo" …>) rather than any per-page thing. Pages whose title names the
      SPECIFIC item being viewed (a battle, a clan, a player) keep their own title — the logo would hide what page this is.
      On DIRECT ACTION the file is the key art itself (assets/hero-banner.png, dac.css sizes it). Width drives the size (it is ~5:1),
      capped by the hero's text column. */
.cb-hero__logo{display:block;width:min(100%,600px);height:auto}
/* 9. the banner box anchored (owner, 2026-10-20: "when i change the pages … the Logo and Box around it and Text below it
      change its size and Positioning on each page it needs to be made anchored so it stays the same size and look"). The
      box used to sit at the BOTTOM of the banner and be only as tall as its own text, so on 10 pages, measured at 1920 wide,
      the logo's top moved between 146 and 200px, the box was 133-235px tall and the banner 282 or 330. Now on desktop the box
      is pinned to the top of the banner and is always the height Home's box needs (logo + three lines of text + the two
      buttons = 235px), so the logo, the box and the text start in the same place and the banner is the same height on
      every page. The counts panel stays on the box's bottom line. Phones stack and keep their natural height. */
:root{--sc-hero-copy-h:235px}
/* 10. the side rails (owner, 2026-10-20: the RV-LIVE creator-page "Rail system … on the sides of our main page, depending on
       the page selected will depend on what Widgets show on the sides"). A page marks its widgets with data-sc-rail="l"|"r";
       on screens wide enough to have room beside the 1200px column, sc.js mountRails() moves them into a rail either side of
       <main> (the page's own panels, so their data and links keep working), and moves them back on narrower screens. The rails
       hang off <main>'s edges and stay in view while the page scrolls (sticky under the nav + section menu). Width: the room
       left either side of the column minus the gaps, 232-360px. Rail widgets: square, a red top edge, an uppercase header
       with a red icon and red corner brackets at the foot, the site's own banner brackets in small. */
/* --sc-rail-gap: the space between a widget and the page column (owner, 2026-10-21: "move the Widgets over a little bit more
   from the Center page they are a bit too close", 16px to 32px); the width gives way, so the outer margin stays ~16px */
/* Then ("still too close … the Widget Rails will Dynamically fit depending on the screen size"): --sc-side is the room either
   side of the page column. A widget takes 75% of it (232-360px) and sits in the middle of what is left, never closer to the
   column than 48px. Measured: 1920 wide = 270px widgets 48px out; 2560 = 360px widgets 160px out, centred in the side room.
   Under 1880px there is not room for that, so no rails. */
:root{--sc-side:calc((100vw - var(--cb-wrap)) / 2);--sc-rail-w:clamp(232px, calc(var(--sc-side) * .75), 360px);--sc-rail-gap:max(var(--rv-s-7), calc((var(--sc-side) - var(--sc-rail-w)) / 2))}
.sc-rail,.sc-hrail{display:none}
@media (min-width:1880px){
  .cb-main{position:relative}
  .sc-rail{display:block;position:absolute;top:0;bottom:0;width:var(--sc-rail-w)}
  .sc-rail--l{right:calc(100% + var(--sc-rail-gap))}
  .sc-rail--r{left:calc(100% + var(--sc-rail-gap))}
  .sc-rail__in{position:sticky;top:calc(var(--cb-nav-h) + var(--cb-tabs-h) + var(--rv-s-5));display:flex;flex-direction:column;gap:var(--rv-s-5);margin-top:var(--rv-s-6)}
  .cb-grid--sidebar.sc-railed{grid-template-columns:minmax(0,1fr)}
  .sc-rail .cb-panel,.sc-hrail .cb-panel{border:1px solid var(--rv-border-2);border-top:2px solid var(--rv-accent);border-radius:0;box-shadow:0 2px 2px var(--cb-shadow)}
  .sc-rail .cb-panel--flag{border-left:1px solid var(--rv-border-2)}
  .sc-rail .cb-panel::before,.sc-rail .cb-panel::after,.sc-hrail .cb-panel::before,.sc-hrail .cb-panel::after{content:"";position:absolute;bottom:-1px;width:var(--rv-s-4);height:var(--rv-s-4);border-bottom:2px solid var(--rv-accent-contrast);pointer-events:none}
  .sc-rail .cb-panel::before,.sc-hrail .cb-panel::before{left:-1px;border-left:2px solid var(--rv-accent-contrast)}
  .sc-rail .cb-panel::after,.sc-hrail .cb-panel::after{right:-1px;border-right:2px solid var(--rv-accent-contrast)}
  /* the banner's counts beside it (sc.js mountHeroRails): two tiles stacked, only as tall as they need, centred on the
     banner's height so they stand clear of the top bar (owner, 2026-10-20: the full-height version was "too big and too tall
     they touch the top bar"); the logo box then takes the banner's whole width */
  /* Positioned from the wrapper's centre line. With the Classic full-width banner the two count widgets are not here at
     all: sc.js puts them at the top of the page's own rails (owner, 2026-10-21: "moved down with the other widgets on the
     same rails when the banner is full width"; laying them over the banner's picture was tried and rejected). In Classic the
     wrapper is full width, or it held the banner narrow while the menu bar went full width. */
  .sc-herowrap{position:relative}
  html.sc-layout-page .sc-herowrap{max-width:var(--cb-wrap);margin-left:auto;margin-right:auto}
  html.sc-hero-railed .sc-hrail{display:block;position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:var(--sc-rail-w)}
  html:not(.sc-layout-page) .sc-hrail{display:none}
  .sc-hrail--l{right:calc(50% + var(--cb-wrap) / 2 + var(--sc-rail-gap))}
  .sc-hrail--r{left:calc(50% + var(--cb-wrap) / 2 + var(--sc-rail-gap))}
  .sc-hcount{padding:0}
  .sc-hstats{grid-template-columns:1fr;border:0;border-radius:0;background:transparent}
  .sc-hstats .cb-stats__tile{padding:var(--rv-s-3) var(--rv-s-5);border-right:0}
  .sc-hstats .cb-stats__tile+.cb-stats__tile{border-top:1px solid var(--rv-hairline)}
  /* three or more counts in one widget (Clan Battles' left one): two to a row, so it is no taller than the others */
  .sc-hstats--grid{grid-template-columns:1fr 1fr}
  .sc-hstats--grid .cb-stats__tile{padding:var(--rv-s-3) var(--rv-s-2);min-width:0}
  /* half a widget is ~120px at 1920 wide: the labels drop to the banner's own size and tracking, and wrap rather than spill */
  .sc-hstats--grid .cb-stats__label{font-size:var(--rv-fs-micro);letter-spacing:normal;white-space:normal}
  .sc-hstats--grid .cb-stats__tile:nth-child(2){border-top:0}
  .sc-hstats--grid .cb-stats__tile:nth-child(odd){border-right:1px solid var(--rv-hairline)}
  .sc-hstats .cb-stats__label{font-size:var(--rv-fs-small)}
  html.sc-hero-centred .cb-hero--band .cb-hero__body{grid-template-columns:minmax(0,1fr)}
  /* the full-width logo box, centred (owner, 2026-10-21: "should also be fixed and centered now it looks off being to the
     left"): the logo, the text and the buttons on the box's centre line. And in its middle, top to bottom (owner,
     2026-10-21: "they are at the top of the box they are in and they need to be centerd in the middle"). */
  html.sc-hero-centred .cb-hero--band .cb-hero__copy{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  html.sc-hero-centred .cb-hero--band .cb-hero__body{align-items:stretch}
  /* the text always takes three lines' room (the longest description), so the centred group is one height and the logo
     stays at one place on every page; a two-line description leaves its spare line under it */
  html.sc-hero-centred .cb-hero--band .cb-hero__sub{min-height:3lh}
  /* Home's buttons sit at the foot of the box, out of the centred group, or Home's logo would be 30px higher than the rest */
  html.sc-hero-centred .cb-hero--band .cb-hero__copy{position:relative}
  /* owner, 2026-10-21: "Open Your clan HQ button needs to go off to the left and have proper spacing from the bottom border
     … the Find Clan Button needs to be on the right side": the first button in the box's bottom-left corner, the last in its
     bottom-right, a step in from the border */
  html.sc-hero-centred .cb-hero--band .cb-hero__ctas{position:absolute;left:var(--rv-s-5);right:var(--rv-s-5);bottom:var(--rv-s-5);margin:0}
  html.sc-hero-centred .cb-hero--band .cb-hero__ctas{justify-content:space-between}
  html.sc-hero-centred .cb-hero--band .cb-hero__title{align-self:stretch}
  html.sc-hero-centred .cb-hero--band .cb-hero__logo{margin-left:auto;margin-right:auto}   /* the logo is a block inside the h1 */
  .sc-rail .cb-panel__title{font-size:var(--rv-fs-h3);text-transform:uppercase;letter-spacing:var(--cb-track-wide)}
  .sc-rail .cb-panel__title .cb-icon{color:var(--rv-accent-contrast)}
}
@media (min-width:960px){
  /* the strip across the top of the banner: on Home it holds the small "Play intro" button, elsewhere one line of text,
     which made Home's strip (and everything under it) 11px lower. It is always the button's height now. */
  .cb-hero--band .cb-docbar{min-height:calc(var(--cb-ctl-h-sm) + 2 * var(--rv-s-2) + 1px);align-items:center}   /* + its 1px bottom hairline */
  .cb-hero--band .cb-hero__body{align-items:start}
  .cb-hero--band .cb-hero__copy{min-height:var(--sc-hero-copy-h)}
  .cb-hero--band .cb-hero__body>.cb-stats{align-self:end}
}
/* 11. "WEBSITE STILL IN DEVELOPMENT" and the Update feed (owner, 2026-10-21), in the middle of every banner's top strip (sc.js
       mountDevNote). Centred on the strip itself, not between the breadcrumb and the stamp, so it is in the same place on every
       page; under 960px it takes its own line. The button is a text button: strong text, underlined, never the accent. */
.cb-hero .cb-docbar{position:relative}
.sc-devnote{display:flex;align-items:center;gap:var(--rv-s-3);flex-basis:100%;justify-content:center}
/* Colours by the owner's choice (2026-10-21: "make this text WEBSITE STILL IN DEVELOPMENT in the same Theme color Red and also
   tun this Update feed Green"): the notice in the theme's red text colour (--rv-accent-contrast, the red made for text, not
   the #a4161a fill), the button in the site's green (--rv-success, the "Taking members" chip's border). */
.sc-devnote__text{font-size:var(--rv-fs-micro);font-weight:700;letter-spacing:var(--cb-track-wide);color:var(--rv-accent-contrast);white-space:nowrap}
.sc-devnote__btn{font:inherit;font-size:var(--rv-fs-micro);font-weight:700;color:var(--rv-success);background:none;border:0;padding:var(--rv-s-1) 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sc-devnote__btn:hover{color:var(--rv-text-strong)}
.sc-devnote__btn:focus-visible{outline:2px solid var(--rv-focus);outline-offset:2px}
@media (min-width:960px){
  .sc-devnote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex-basis:auto}
}
/* the Update feed box: wider than a confirm box, its list scrolls, each update a <details> that opens to its overview */
.sc-upd__box{max-width:680px;max-height:calc(100vh - 2 * var(--rv-s-6));display:flex;flex-direction:column}
.sc-upd__head{display:flex;align-items:center;justify-content:space-between;gap:var(--rv-s-3)}
.sc-upd__list{margin-top:var(--rv-s-4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--rv-s-2);padding-right:var(--rv-s-1)}
.sc-upd__item{border:1px solid var(--rv-border-1);border-radius:var(--rv-r-md);background:var(--rv-surface-2)}
.sc-upd__item[open]{border-color:var(--rv-border-2)}
.sc-upd__sum{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:var(--rv-s-3);padding:var(--rv-s-3);cursor:pointer;list-style:none}
.sc-upd__sum::-webkit-details-marker{display:none}
.sc-upd__sum:focus-visible{outline:2px solid var(--rv-focus);outline-offset:2px}
.sc-upd__ver{font-family:var(--cb-font-display);font-weight:700;color:var(--rv-text-strong);white-space:nowrap}
.sc-upd__title{font-weight:600;color:var(--rv-text-strong)}
.sc-upd__when{font-size:var(--rv-fs-small);color:var(--rv-text-dim);white-space:nowrap}
.sc-upd__body{padding:0 var(--rv-s-3) var(--rv-s-3)}
.sc-upd__summary{margin:0;color:var(--rv-text);font-size:var(--rv-fs-small);max-width:68ch}
.sc-upd__changes{margin:var(--rv-s-2) 0 0;padding-left:var(--rv-s-5);display:flex;flex-direction:column;gap:var(--rv-s-1);font-size:var(--rv-fs-small);color:var(--rv-text-dim);max-width:68ch}
@media (max-width:560px){ .sc-upd__sum{grid-template-columns:auto 1fr} .sc-upd__when{grid-column:1 / -1} }
/* 12. the solid side panels (owner, 2026-10-21: "Two Solid Vertical Menu bars on both the left and right side where the rails
       were and then Each widget will fit perfectly and same spacing"). html.sc-rails-solid (sc.js applyRailsStyle) is now the
       site's ONLY look (2026-10-28: the "Solid side panels" switch that could turn it off is gone — Direct Action Design Doc
       A.14, owner: "bring them up so there is no gap … professaionl grade spcaing … make this the default … remove the
       other options with the switches"). The rails become solid bars from the top of the page to its foot; each widget fills
       the bar's width, one step (--sc-solid-pad) from its sides, from the bar's top and from the next widget — this is what
       closes the gap the owner saw: the banner's count widgets (sc.js mountHeroRails) join the SAME bar as the page's own
       widgets, one consistent --sc-solid-pad step apart, instead of sitting in a separate rail centred on the banner with
       open space below it. The bar grows by that step on each side so the widgets keep their place on the screen. Only on
       screens with rails (1880px+). */
@media (min-width:1880px){
  html.sc-rails-solid .sc-rail{--sc-solid-pad:var(--rv-s-4);box-sizing:border-box;width:calc(var(--sc-rail-w) + 2 * var(--sc-solid-pad));
    padding:0 var(--sc-solid-pad);background:var(--rv-surface-1);border-left:1px solid var(--rv-border-1);border-right:1px solid var(--rv-border-1)}
  /* owner, 2026-10-28, on a screenshot of the bar starting below the hero: "the rails have to be moved up they are sitting
     too low". --sc-rail-lift (sc.js mountRails, measured: the hero's height is not a fixed token, it carries different copy
     on different pages) pulls the bar's top up to the hero's own top, so it runs the full height of the page from beside
     the banner down, instead of leaving that space empty and starting only below the section menu. */
  html.sc-rails-solid .sc-rail{top:calc(-1 * var(--sc-rail-lift, 0px))}
  /* owner, 2026-10-28, on a screenshot of the lift fix above: "the rials go all the way to the top they dont look right
     there" — the bar's own top now sits beside the hero, but §10's .sc-rail__in is still `position:sticky;top:calc(nav +
     tabs + s5)`, a number set when the bar started below the tabs row. With the bar's top now level with the hero (above
     the tabs), that same sticky offset is MORE than the widget's natural position, so sticky pulls it down by the
     difference and leaves the exact blank gap this was meant to close, just moved inside the bar. In solid mode the
     widgets sit beside the hero too, so they only need to clear the fixed nav bar, not the nav AND the tabs row. */
  html.sc-rails-solid .sc-rail__in{top:calc(var(--cb-nav-h) + var(--rv-s-4))}
  /* against the screen's edges, like side menus (owner, 2026-10-21: "at the edge of the left and right of the screen so they
     look like Menus on the Left and right"); --sc-edge = <main>'s distance from the edge, set by sc.js mountRails */
  html.sc-rails-solid .sc-rail--l{right:auto;left:calc(-1 * var(--sc-edge, var(--sc-side)));border-left:0}
  html.sc-rails-solid .sc-rail--r{left:auto;right:calc(-1 * var(--sc-edge, var(--sc-side)));border-right:0}
  html.sc-rails-solid .sc-rail__in{margin-top:var(--sc-solid-pad);gap:var(--sc-solid-pad);padding-bottom:var(--sc-solid-pad)}
  html.sc-rails-solid .sc-rail .cb-panel{box-shadow:none}
  html.sc-rails-solid .sc-rail:not(:has(.cb-panel)){display:none}   /* a page with no widgets draws no empty bars */
}
/* 13. the section menu's tabs centred in their bar (owner, 2026-10-21: Home, Clans, Clan HQ, Clan Battles, Briefing Rooms,
       Players, Tournaments, Calendar "need to be centered on the menu bar"). Auto margins on the first and last tab, never
       justify-content:center: the bar scrolls sideways on a phone, and centring with justify-content puts the first tab out of
       scroll reach (the splash's series buttons did exactly that, 2026-10-20). Only the site's section menu, not in-page tabs. */
#sc-tabs .cb-tabs__inner>.cb-tab:first-child{margin-left:auto}
#sc-tabs .cb-tabs__inner>.cb-tab:last-child{margin-right:auto}