/* The workspace badge: which Mainframe you are in, beside the mark.

   Its own file because shell.css is capped at 700 lines (tests/test_oas6_static.py)
   and this is a coherent piece -- the same split-at-the-seam rule the rest of
   this directory follows. Everything here was measured on a real bar with the
   agents rail open; the comments say what each number is for.

   Owner: static/app-shell/workspace-name.js. */
/* The bar is a grid whose brand column asks for max-content, so anything put
   beside the mark widens that column and the destinations -- which scroll
   inside their own column -- lose the width. Measured at 1440/1280/1024 with
   the rail open: Apps fell off the bar. The brand yields instead. */
@media (min-width: 821px) {
 .topbar .title-row.app-brand { min-width: 0; }
}
.workspace-badge {
 /* Which Mainframe this is, beside the mark. It takes what the bar can
    spare and truncates rather than pushing the destinations off the edge --
    at 390px the name is the only thing here that can give. */
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 /* The destinations never give way for a name: this item is the one that
    shrinks, with a shrink factor high enough that the flex algorithm takes
    its width before it takes the navigation's (measured -- at 1440 with the
    rail open, an untamed badge pushed Apps off the bar). */
 flex: 0 999 auto;
 /* A ceiling, so the name never takes the width the destinations need. The
    floor lives on the NAME below, not here: this box also holds the Member
    tag, and a floor here was spent on the tag while the name shrank to a
    single letter (measured at 1440 with the rail open). */
 /* It shrinks, and it clips inside its own box: a badge that refused to
    shrink overflowed the brand column and painted over the destinations
    (measured at 1440 with the rail open). What it must never do is half-show
    the tag -- the container query below takes the tag away instead. */
 min-width: 0;
 max-width: none;
 overflow: hidden;
 padding-left: 0.55rem;
 margin-left: 0.15rem;
 border-left: 1px solid var(--ui-line);
 color: var(--ui-text);
 font-size: 0.85rem;
 font-weight: 650;
}
.workspace-badge[hidden] { display: none; }
.workspace-name {
 /* Readable or not there at all: a name cut to "T…" tells you nothing, and
    one that runs on takes the width the destinations need. */
 min-width: 6ch;
 max-width: min(16ch, 18vw);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.workspace-role {
 flex: none;
 padding: 0.1rem 0.4rem;
 border: 1px solid var(--ui-line);
 border-radius: 999px;
 background: var(--ui-raised);
 color: var(--ui-text-soft);
 font-size: 0.68rem;
 font-weight: 600;
 letter-spacing: 0.02em;
}
.workspace-role[hidden] { display: none; }
/* Only when the bar has no room for both does the name win and the tag go.
   The container query asks the BAR's width, not the window's, because the
   agents rail is what takes it. */
/* Below this the bar cannot hold a readable name AND the tag: 1440 with the
   agents rail open leaves the brand about 95px, and the name is the ask. The
   query asks the BAR's width, not the window's, because the rail is what
   takes it. */
@container topbar (max-width: 1000px) {
 .workspace-role { display: none; }
}
/* And below this there is no room for a readable name either -- a desktop
   bar this narrow is one with the agents rail open on a small screen. A
   sliver of a name says less than no name at all, so the badge goes whole.
   (The phone has its own layout and keeps the name beside the mark.) */
@media (min-width: 821px) {
 /* Desktop only: the phone's bar is narrower than this by nature and keeps
    the name beside the mark, which is what the operator asked for there. */
 @container topbar (max-width: 520px) {
  .workspace-badge { display: none; }
 }
}
@media (max-width: 820px) {
 /* The phone bar already carries the destination title; the name keeps its
    place beside the mark and gives width before anything else does. */
 .workspace-badge { max-width: 42vw; font-size: 0.8rem; }
 .workspace-role { display: none; }
}