/* Soneium Ambassador Studio · collapsible rail
   Loaded after theme.css. Overrides only what the collapse and the hover
   treatment need; the rest of .side and .tabs#nav stays as it was. */

:root{ --rail-w:214px; --rail-w-min:62px; }

.side{ flex-basis:var(--rail-w); transition:flex-basis .18s cubic-bezier(.4,0,.2,1); }
body.rail-min .side{ flex-basis:var(--rail-w-min); }

/* ── tab rows ──────────────────────────────────────────────────── */
.tabs#nav button{ height:36px; padding:0 10px; overflow:visible; }
.tabs#nav button .ni{ display:flex; align-items:center; gap:11px; width:100%; }
.tabs#nav button svg{
  width:17px; height:17px; flex:none;
  fill:none; stroke:var(--t3,#5A666E); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .14s, filter .14s;
}
.tabs#nav button b{ font-weight:400; white-space:nowrap; }
.tabs#nav button.on svg{ stroke:var(--t1); }

/* hover · the icon lights, the row picks up a thin cyan rim and a soft bloom */
.tabs#nav button:hover{ background:rgba(255,255,255,.03); color:var(--t1); }
.tabs#nav button:hover svg{
  stroke:#63BBD2;
  filter:drop-shadow(0 0 5px rgba(79,179,206,.6));
}
.tabs#nav button:hover,
.rail-toggle:hover{
  box-shadow:inset 0 0 0 1px rgba(79,179,206,.26),
             0 0 14px -4px rgba(79,179,206,.5);
}
.tabs#nav button:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(79,179,206,.5);
  outline:none;
}

/* ── collapsed ─────────────────────────────────────────────────── */
body.rail-min .tabs#nav button{ padding:0; }
body.rail-min .tabs#nav button .ni{ justify-content:center; gap:0; }
body.rail-min .tabs#nav button b,
body.rail-min .side .brandline b,
body.rail-min .side-foot .who span:not(.av),
body.rail-min .side-foot .tagrole{
  opacity:0; width:0; overflow:hidden; pointer-events:none;
}
body.rail-min .side .brandline{ justify-content:center; padding-left:0; padding-right:0; }
body.rail-min .side-foot{ padding-left:0; padding-right:0; text-align:center; }
body.rail-min .side-foot .who{ justify-content:center; }
body.rail-min .side-foot .mascot{ margin:0 auto; }
body.rail-min .rail-toggle svg{ transform:rotate(180deg); }

.side .brandline b,
.tabs#nav button b{ transition:opacity .12s; }

/* ── hover label, collapsed only ───────────────────────────────── */
.rail-tip{
  position:fixed; z-index:60; pointer-events:none;
  background:#12171B; color:var(--t1);
  border:1px solid rgba(79,179,206,.3);
  font-size:12px; padding:4px 10px; border-radius:6px; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.6), 0 0 12px -4px rgba(79,179,206,.45);
  opacity:0; transform:translateX(-4px); transition:opacity .1s, transform .1s;
}
.rail-tip.show{ opacity:1; transform:translateX(0); }

/* ── collapse control ──────────────────────────────────────────────
   A TAB ON THE RAIL'S RIGHT EDGE since 27 Aug 2026, chosen over four
   other placements. It is shaped as part of the divider it moves, not a
   button parked beside the brand.

   It must be a direct child of .side, never of .brandline: the brand
   row is position:relative, so from inside it the tab anchors to the
   row and can never reach the rail edge. .side is position:sticky,
   which is a positioned ancestor, so absolute here resolves against the
   rail itself.

   Two earlier homes, both rejected: under the nav it read as a sixth
   tab that was slightly broken, and in the brand row it crowded the
   mark. The mark now has that row to itself in both states. */
.side .brandline{
  display:flex; align-items:center; gap:10px;   /* matches theme.css */
}
.side .brandline b{ flex:1 1 auto; min-width:0; }

.rail-toggle{
  position:absolute; right:-9px; top:50%; margin-top:-16px; z-index:6;
  display:flex; align-items:center; justify-content:center;
  width:18px; height:32px; flex:none; padding:0;
  border:0; border-radius:0 9px 9px 0; cursor:pointer;
  background:#0C0F12;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  color:var(--t3,#5A666E);
  transition:color .14s, background .14s, box-shadow .14s;
}
.rail-toggle:hover{ color:var(--t1); background:#12171B; }
.rail-toggle:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(79,179,206,.6); outline:none;
}
.rail-toggle svg{
  width:11px; height:11px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s cubic-bezier(.4,0,.2,1);
}

/* collapsed · the mark keeps the brand row to itself, and the tab stays
   on the edge exactly as it is when open. Nothing cross-fades, nothing
   stacks, and the Soneium mark never disappears. */
body.rail-min .side .brandline{ justify-content:center; }

/* narrow screens already switch the rail to a horizontal scroller in
   theme.css, so the collapse is meaningless there */
@media (max-width:820px){
  .rail-toggle{ display:none; }
  body.rail-min .side{ flex-basis:auto; }
  body.rail-min .tabs#nav button b{ opacity:1; width:auto; }
}

/* ── country flags ─────────────────────────────────────────────── */
.flag{
  display:inline-block; width:20px; height:14px; flex:none;
  border-radius:2.5px; margin-right:10px; vertical-align:-2px;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);   /* keeps white flags off a black row */
}
.flag-emoji{
  width:auto; height:auto; font-size:15px; line-height:1;
  border-radius:0; box-shadow:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.country-cell{ display:flex; align-items:center; min-width:0; }
.country-cell .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── top band ──────────────────────────────────────────────────────
   Why the two "Studio"s sat on different lines:

     rail   .side padding-top:var(--s5), .brandline padding-top:0
            row height 21px (14px text at line-height 1.5)
     page   .wrap padding-top:var(--pad-page-y), .hero .brand min-height:26px

   Two different top offsets and two different row heights, so the centres
   could never agree. Fixed by giving both rows the same start line and the
   same box height, and letting flex centre inside it. No magic numbers:
   --pad-page-y is the token theme.css already drops to 22px at 860px, so
   the pair stays level through the breakpoint. */
:root{ --topbar-h:26px; }

/* the rail's own top padding moves onto the brand row, so the row and the
   page content start on the same line */
.side{ padding-top:0; }
.side .brandline{
  box-sizing:content-box;
  min-height:var(--topbar-h);
  padding:var(--pad-page-y) var(--s5) 0;
  margin-bottom:var(--s5);          /* was padding-bottom, same gap to the nav */
}

.hero{ margin:0 0 var(--s5); padding:0; }
.hero .brand{
  min-height:var(--topbar-h);
  align-items:center;
  gap:0;                            /* the mark lives in the rail only */
}

/* page title · the page name, not the product name. Size and line-height
   left as theme.css has them: the flex centring above does the alignment,
   so forcing line-height:1 only risked clipping SST's descenders. */
.hero h1{ color:var(--t1); }

/* ── beta chip ─────────────────────────────────────────────────────
   Replaces .betabar, which spent 90px on every page to say one thing.
   Same amber tokens as the pill it came from, so this is not a new
   colour, just a much smaller one. The full note is the chip's title. */
.livestat{ gap:9px; }
.beta-chip{
  font-size:10px; font-weight:500; letter-spacing:.4px; text-transform:uppercase;
  color:var(--amber); background:rgba(197,164,105,.10);
  border:1px solid rgba(197,164,105,.20);
  padding:2px 9px; border-radius:var(--r-pill);
  white-space:nowrap; cursor:help;
}

/* ≤640px theme.css unsticks the rail and stacks it above the content, so
   there is no second column left to line up with */
@media (max-width:640px){
  .side{ padding-top:var(--s5); }
  .side .brandline{ padding-top:0; }
}

/* ── update pane states ────────────────────────────────────────────
   Signed out, expired session, missing endpoint. The pane used to render
   nothing in every one of these, which read as a broken build. */
.update-note{ max-width:560px; }
.update-note b{
  display:block; margin-bottom:var(--s2);
  font-size:13px; font-weight:500; color:var(--t1);
}
.update-note p{ margin:0; font-size:12.5px; color:var(--t2); line-height:1.55; }

/* ── team-only tab ─────────────────────────────────────────────────
   theme.css:114 hides it with

     .tabs button.team-only{display:none}          (0,2,1)

   but theme.css:92 sets

     .tabs#nav button{display:flex}                (1,1,1)

   An id outranks any number of classes, so the hide has never applied and
   every candidate has been able to see the Update tab since the rail was
   built. Matching the id in the selector is what fixes it. */
.tabs#nav button.team-only{ display:none; }
body.is-team .tabs#nav button.team-only{ display:flex; }

/* ── leader-only tab (v5, 26 Aug 2026) ────────────────────────────────
   Same two-layer pattern as .team-only above, and the same caveat: this
   is cosmetic. app-nav.js removes the button from the DOM entirely for
   anyone without the class, and review.js re-checks the caller's hash
   server side on every write. Team implicitly holds every leader power,
   so is-team shows it too. */
.tabs#nav button.leader-only{ display:none; }
body.is-leader .tabs#nav button.leader-only,
body.is-team   .tabs#nav button.leader-only{ display:flex; }