/* ── PixelDev · the top navigation bar ──────────────────────────────────────
   A separate stylesheet rather than additions to style.css: pixelforge/ is
   merged down from the upstream PixelForge repo, and style.css is one of the
   files that conflicts every time. A new file never does — the same reasoning
   as share.css. Loaded AFTER style.css so these rules win without !important.

   This is the top bar only. Each workspace's own controls — the second row —
   are left exactly as they ship; the design calls that row out as a separate
   thing whose contents change per workspace, and it is not this file's business.

   Every colour here is an existing variable. The design was drawn against this
   app's palette, so there is nothing new to define and nothing to keep in sync:
   --panel is the bar, --panel2 a button, --line every divider, --accent the one
   thing you can press. */

/* ── the bar ──────────────────────────────────────────────────────────────
   Three columns rather than a flex row with margin-left:auto. The tab group is
   CENTRED in the viewport, not merely pushed along by whatever sits to its
   left — with `1fr auto 1fr` the two side bands can grow and shrink completely
   independently and the tabs do not move, which is the whole point of the
   layout. A flex row cannot do that without measuring. */
#topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  /* overflow MUST stay visible: every menu in this bar hangs below it, and CSS
     will not let one axis scroll while the other stays visible — setting either
     computes the other to `auto`. An earlier `overflow-x: auto` here silently
     clipped every dropdown, the Games menu included. */
  overflow: visible;
}

#topbar, #topbar button, #topbar input, #topbar span { white-space: nowrap; }

/* …but not inside the menus that hang off it. `white-space` inherits, and the
   dropdowns are descendants of the bar, so the rule above silently reached into
   them and clipped every line of prose they contain — the account menu's
   paragraph and the Games menu's "Tip: Export JSON…" both shipped cut off at
   260px with no ellipsis to admit it. Nowrap is a rule about the BAR, whose
   height must not move; a menu is free to be as tall as its sentences need.
   Only `.cloud-menu-empty` is exempted, because it is the only prose in there:
   `.cloud-menu-item` keeps nowrap on purpose, so that a game title too long for
   the menu ellipsises instead of growing the row. */
#games-menu .cloud-menu-empty,
.tb-menu .cloud-menu-empty { white-space: normal; }

/* ── left band: who you are and what you are working on ─────────────────── */

#tb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#logo {
  font-size: 15px;
  letter-spacing: .3px;
  flex: none;
}
#logo:hover b { color: var(--accent); }
#logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The project-name input is kept in the document — main.js and the cloud sync
   both read and write it, and reimplementing that is exactly what this bar
   avoids — but it is never seen. `hidden` alone is not enough: that is a UA rule
   and style.css targets `#proj-name` directly, which wins. */
#proj-name[hidden] { display: none; }

.tb-divider {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 6px;
}

/* A quiet button: no border until you point at it. Used for the project menu,
   which carries the game's name and should read as a label you can press rather
   than as a control competing with the tabs. */
.tb-quiet {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  background: transparent;
  color: var(--txt);
  border: 1px solid transparent;
  border-radius: 6px;
  font: 600 13px "Avenir Next", system-ui, sans-serif;
  cursor: pointer;
  min-width: 0;
}
.tb-quiet:hover { background: var(--panel2); border-color: var(--line); }
.tb-quiet .tb-caret { color: var(--dim); font-weight: 400; }
/* The game's name is the one thing in this bar allowed to shrink — everything
   else is a fixed label, and a long title should lose characters rather than
   push the tabs off centre. */
#btn-games .tb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}

/* An ordinary bar button. */
.tb-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: var(--panel2);
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 13px "Avenir Next", system-ui, sans-serif;
  cursor: pointer;
}
.tb-btn:hover { border-color: var(--accent); color: #fff; }

/* ── centre band: the workspaces, and the one action ─────────────────────── */

#tb-centre {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
}

/* The tab group keeps style.css's segmented look; only the sizing is restated
   so the pills match the 28px controls either side of them. */
#tabs {
  display: flex;
  gap: 2px;
  background: #111321;
  padding: 3px;
  border-radius: 8px;
  flex: none;
  overflow: visible;
}
#topbar .tabbtn {
  border: none;
  background: transparent;
  color: var(--dim);
  border-radius: 6px;
  padding: 4px 14px;
  font: 13px "Avenir Next", system-ui, sans-serif;
  cursor: pointer;
}
#topbar .tabbtn:hover { color: var(--txt); }
#topbar .tabbtn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Play is in the group but is not a tab.
   Everything else in this bar is navigation or status; this is the only control
   that makes something happen. It sits inside the segmented box with the
   workspaces — where the hand already is, and where it stops reading as a stray
   tab that missed the group — and says what it is by colour instead.

   `#topbar #btn-play`, not `#btn-play`. `#topbar .tabbtn` is (1,1,0) and was
   quietly beating the bare id, so every property the tab rules also set —
   background, colour, weight — never applied, and Play rendered as a plain dim
   tab. Only `height` got through, because that is the one thing they do not set.

   accent2 rather than accent, because `.tabbtn.active` is accent: two purple
   pills in one group would read as two current tabs. The text is the dark of
   the bar rather than white — #41a6f6 is light enough that white sits around
   2.4:1 on it, and these are children's eyes on a projector at the back of a
   classroom. */
#topbar #btn-play {
  flex: none;
  height: auto;
  padding: 4px 14px;
  background: var(--accent2);
  color: #0b1020;
  border: none;
  border-radius: 6px;
  font: 600 13px "Avenir Next", system-ui, sans-serif;
  cursor: pointer;
}
#topbar #btn-play:hover { filter: brightness(1.08); }
/* Being ON the Play tab is a state the fill can no longer show, since the fill
   never changes. The ring is what is left to say it. */
#topbar #btn-play.active { box-shadow: inset 0 0 0 2px #fff9; }

/* ── right band: status only ─────────────────────────────────────────────── */

/* `#topbar-right` is upstream's id, kept because share-ui.js inserts into it by
   name. It is the right-hand band now. */
#topbar-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Sequenced here rather than by moving DOM nodes.
   share-ui.js inserts the presence strip and Share button at `firstChild`
   whenever it happens to initialise, and topbar-ui.js appends the account
   control whenever IT does; competing for insertion position would make the
   order depend on script timing. `order` does not care who ran first, and it
   reads as the design's own left-to-right list: what is saved → who is here →
   bring someone → you. */
#topbar-right > #status-chip    { order: 1; }
#topbar-right > #presence-strip { order: 2; }
#topbar-right > #btn-share      { order: 3; }
#topbar-right > #account-wrap   { order: 4; }
/* The pair status-ui.js replaced. Kept because it falls back to them if it
   cannot build the chip, and in that case they should still land in front. */
#topbar-right > #save-dot       { order: 1; }
#topbar-right > #cloud-pill     { order: 1; }

/* Anything still in this band that the bar does not lay out explicitly — the
   hidden originals, and whatever upstream adds next — sorts after the pills and
   before the account control, rather than silently landing first. */
#topbar-right > * { order: 3; }
#topbar-right > [hidden] { display: none; }

/* The status chip is built and styled by status-ui.js / status.css, which
   already merged the old pair of pills into one and already uses the design's
   green. Nothing to restate here — it only needs to not be squeezed. */
#topbar-right #status-chip { flex: none; }

#btn-share {
  flex: none;
  height: 28px;
  padding: 0 12px;
  background: var(--panel2);
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 600 13px "Avenir Next", system-ui, sans-serif;
  cursor: pointer;
}
#btn-share:hover { border-color: var(--accent); color: #fff; }

/* Presence faces overlap, so a full room reads as a stack rather than a row
   that pushes everything else along. */
#presence-strip .presence-face {
  width: 24px;
  height: 24px;
  border: 2px solid var(--panel);
  margin-left: -6px;
}
#presence-strip .presence-face:first-child { margin-left: 0; }
#presence-strip .presence-face.is-you { border-color: #a7f070; }

/* ── dropdowns ────────────────────────────────────────────────────────────
   One implementation for all of them, which is also the fix for two menus
   being open at once: they share a registry, so opening one closes the rest.
   Positioned like the panel styling in style.css they reuse — three menus
   hanging off one toolbar should not each invent their own look. */
.tb-wrap { position: relative; display: inline-flex; }

.tb-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 240px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 40px #000a;
  max-height: 70vh;
  overflow: auto;
  white-space: normal;
}
.tb-menu.tb-right { left: auto; right: 0; }

/* The project menu is style.css's `#games-menu`, and style.css anchors it
   `right: 0` — correct for as long as that button lived at the right-hand end
   of the bar, and wrong the moment the redesign moved it into the left band.
   A menu pinned by its right edge to a button 124px from the left, at a fixed
   260px wide, hangs off the left edge of the window; it did, by 27px, at every
   window size, because the overhang is a property of the button's position and
   not of the viewport.

   Re-anchored here rather than in style.css: that file comes down from upstream
   and every edit to it is a merge conflict that recurs forever. `left: 0` is
   also what every other menu in this bar uses, so the project menu now falls out
   of its button the same way File does. */
#games-menu { left: 0; right: auto; }
.tb-menu[hidden] { display: none; }

/* A labelled group inside a menu. The design splits every menu into "what this
   is" and "what you can do with it", and the label is what makes the second
   group's changing contents legible rather than surprising. */
.tb-group {
  padding: 8px 10px 4px;
  font: 600 10px "Avenir Next", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dim);
}
.tb-menu .cloud-menu-item { display: flex; align-items: center; gap: 8px; }
.tb-tag {
  margin-left: auto;
  font: 400 10px "Avenir Next", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 1px 7px;
}
.tb-tag.live { color: #4caf50; border-color: #4caf5055; }

/* ── the account control ─────────────────────────────────────────────────── */

#btn-account.tb-avatar {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 "Avenir Next", system-ui, sans-serif;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
}
#btn-account.tb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#btn-account.tb-avatar:hover { filter: brightness(1.12); }
#btn-account.tb-signin { font-weight: 600; }
#account-menu .tb-at { color: var(--dim); font-weight: 400; }

/* ── narrow windows ───────────────────────────────────────────────────────
   Nothing in this bar wraps — that was the original bug, a bar whose height
   moved because a dozen labels were each deciding whether they fit. So instead
   of wrapping, things have to be given up, in a deliberate order: the game's
   name loses characters, then the wordmark's text, then the tab padding and the
   status chip's label. The tabs themselves are the last thing to degrade,
   because they are the only way to reach the rest of the app.

   The numbers are chosen with headroom rather than by eye. Measured against a
   real project: the bar needs 1008px before the centre column starts being
   squeezed, and 848px once both blocks below have applied. The first fires at
   1180px — 332px before anything would have been squeezed — so the degradation
   always happens early, and no state exists where a control is half its size.
   Below ~850px the editor's own panels have run out of room first. */
@media (max-width: 1180px) {
  #btn-games .tb-name { max-width: 12ch; }
  #logo b { display: none; }
}
@media (max-width: 980px) {
  #topbar .tabbtn { padding: 4px 10px; }
  /* The chip collapses to its icon rather than disappearing — whether your work
     is saved is the one status worth keeping at any width. status.css owns what
     that looks like; this only asks for it. */
  #topbar-right #status-chip .sc-label { display: none; }
}