/* Custom titlebar — the split deck (design: Titlebar Final.dc.html, sized up
   to a Discord-height bar).
   33px SYSTEM STRIP (32px visible + 1px hairline — measured 1:1 against
   Discord's titlebar in Screenshot_63; window chrome: logo tag · status
   read-out · caption buttons, the whole strip minus buttons is the Tauri
   drag region) over a
   40px CONTEXTUAL TOOLBAR the page owns. Loaded by every page, including
   new.html which has none of the design-system token sheets — so every
   token reference here carries its literal fallback. */

.tb-strip {
  position: relative; display: flex; align-items: stretch; height: 33px;
  flex: none; background: #1b1d29;
  border-bottom: 1px solid var(--border, #292c3c);
  /* Text/edges must never let a mousedown fall on a child element: the Tauri
     drag handler only fires when the TARGET carries data-tauri-drag-region.
     Children are pointer-events:none below; buttons opt back in. */
  user-select: none; -webkit-user-select: none;
}
.tb-strip .tb-tag {
  display: flex; align-items: center; gap: 7px; padding-left: 12px;
  pointer-events: none;
}
/* The DR box — the app's original mark (pre-dated the design's logomark and
   came back by request). */
.tb-strip .tb-logo {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--accent, #8080ea); color: var(--accent, #8080ea);
  font-weight: 800; font-size: 9px; letter-spacing: .02em;
}
.tb-strip .tb-tag .tb-name {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-muted, #8b8fa6);
}
.tb-strip .tb-flex { flex: 1; pointer-events: none; }

/* Status read-out: [ ● rec mm:ss ] while recording (clickable → stop/discard
   menu), else [ status: … ] recoloured per LCU state (informational). */
.tb-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  background: transparent; border: none; cursor: default;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-muted, #8b8fa6);
}
.tb-status[hidden] { display: none; }
/* Informational (non-recording) status must not swallow drag mousedowns —
   only the recording state is an actual control. */
.tb-status:not(.tb-rec) { pointer-events: none; }
.tb-status .dot { width: 7px; height: 7px; border-radius: 50% !important; background: currentColor; }
.tb-status.tb-rec { color: var(--red, #ff5d5d); cursor: pointer; }
.tb-status.tb-lcu-connected,
.tb-status.tb-lcu-ingame { color: var(--green, #4dd17a); }
.tb-status.tb-lcu-lobby { color: var(--cyan, #00d4d4); }
.tb-status.tb-lcu-champselect { color: var(--gold, #f0c244); }
.tb-status.tb-lcu-offline { color: var(--text-muted, #8b8fa6); }

/* Caption buttons — 46 wide, full strip height, flush to its right edge. */
.tb-cap {
  width: 46px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 0;
  color: var(--text-muted, #8b8fa6); cursor: pointer; padding: 0;
}
.tb-cap:hover { background-color: var(--surface-hover, #252839); color: var(--text, #e7e9f2); }
.tb-cap.tb-close:hover { background-color: var(--red, #ff5d5d); color: #ffffff; }
.tb-cap svg { display: block; }
/* Browser / legacy dev server: the OS window chrome still exists, so the
   caption buttons are dead weight — hide them (titlebar.js adds the class). */
.no-tauri .tb-cap { display: none; }

/* ── Contextual toolbar shell (contents are page-owned) ─────────────── */
.tb-toolbar { display: flex; align-items: center; height: 40px; flex: none; }
.tb-flexspace { flex: 1; }
.tb-div { width: 1px; height: 20px; background: var(--border, #292c3c); flex: none; }

/* The 34×30 toolbar icon button (coach / import / settings). */
.tb-toolbar .icon-btn {
  width: 34px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-raised, #1b1d29); border: 1px solid var(--border, #292c3c);
  border-radius: 0; color: var(--text-muted, #8b8fa6);
  cursor: pointer; padding: 0; font-size: 15px; line-height: 1; text-decoration: none;
}
.tb-toolbar .icon-btn:hover {
  background-color: var(--surface-raised, #1b1d29);
  border-color: var(--accent-border, rgba(96, 96, 226, 0.45)); color: var(--text, #e7e9f2);
}
.tb-toolbar .icon-btn[hidden] { display: none !important; }