/* ═══ Shared top bar ═══
   One header for every Loomi tool: tts.html, pilot.html, qa.html, review.html
   and the app shell (app.html) link this file and carry no top-bar rules of
   their own, so switching tools never changes the chrome (#379). The pages
   name the same colours under different tokens (--border-subtle, --pc-border,
   --line), so this file declares its own on .topbar and depends on nothing
   outside it. */

.topbar {
  --tb-border: rgba(255,255,255,.08);
  --tb-border-2: rgba(255,255,255,.15);
  --tb-font: 'Fredoka', 'SF Pro Rounded', system-ui, -apple-system, sans-serif;
  --tb-grad: linear-gradient(135deg, #667EEA 0%, #8B5CF6 100%);
  --tb-motion: 300ms cubic-bezier(.4, 0, .2, 1);
  --tb-row: 36px;

  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 20px;
  padding: 18px 28px;
  background: linear-gradient(180deg, rgba(49,46,129,.22), transparent);
  border-bottom: 1px solid var(--tb-border);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand a { display: flex; }
/* The wordmark, the divider and the tool pill share one height (--tb-row), so
   the three read as a single row rather than three boxes of different sizes
   (#460). --tb-row is the pill's natural height: a 14px glyph inside 7px link
   padding, 3px pill padding and a 1px border. */
.brand img { height: var(--tb-row); width: auto; display: block; }
.brand .sep { width: 1px; height: var(--tb-row); background: var(--tb-border-2); }

/* The persistent tool switcher. Every tool is always visible and the current
   one is marked; there is deliberately no interstitial chooser. */
.toolswitch {
  display: inline-flex; gap: 4px; padding: 3px; border-radius: 9999px;
  box-sizing: border-box; height: var(--tb-row);
  background: rgba(255,255,255,.04); border: 1px solid var(--tb-border);
}
.toolswitch a {
  font: 500 13px/1 var(--tb-font); letter-spacing: .2px; text-decoration: none;
  color: rgba(255,255,255,.30); padding: 7px 14px; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: color var(--tb-motion), background var(--tb-motion);
}
/* Each glyph is the tool's tile icon from index.html, drawn in currentColor so
   hover and the active pill tint it with the label. */
.toolswitch svg { width: 14px; height: 14px; flex: none; }
.toolswitch a:hover { color: #fff; }
.toolswitch a[aria-current="page"] { background: var(--tb-grad); color: #fff; }
.toolswitch a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(167,139,250,.55); }

/* Right-hand slot: each tool fills it with its own chips and the account control. */
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Inside the app shell (#452) the shell draws the brand, the switcher and the
   account control once, above every frame. A framed tool (html.framed, set by
   js/framed.js) keeps only its own chips, in a slimmer strip. */
html.framed .topbar { padding-top: 10px; padding-bottom: 10px; }
html.framed .topbar .brand,
html.framed .topbar .profile-wrap { display: none; }

/* Four glyphs plus labels need about 1060px beside the workbench's status
   chips, so below that the glyph stands alone. The links carry an aria-label,
   so the tool name is still announced. */
@media (max-width: 1080px) {
  .toolswitch a { padding: 7px 12px; }
  .toolswitch a span { display: none; }
}

@media (max-width: 760px) {
  .topbar { padding: 12px 14px; gap: 12px; }
  .brand .sep { display: none; }
}