/*
 * TLB suite bar — styles for tlb-suite-bar.js. Uses the Warm Instrument tokens
 * (tlb-theme.css, or Tac Map's own styles.css). Every rule is scoped under
 * .tlb-sb and resets what Bootstrap / app-wide element styles would add.
 * Each token has a Warm Instrument fallback so the bar renders correctly in an
 * app that defines only some of them.
 */
:root { --tlb-bar-h: 46px; }

.tlb-sb {
  position: sticky;
  top: 0;
  z-index: 2000; /* above Leaflet panes and controls (≤ 1000) */
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-sizing: border-box;
  height: var(--tlb-bar-h);
  padding: 0 1rem 0 .85rem;
  background: var(--sidebar-bg, #0E0D0B);
  border-bottom: 1px solid var(--line, #2E2A24);
  font-family: var(--font-display, "Barlow Semi Condensed", "Barlow", system-ui, sans-serif);
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.tlb-sb *, .tlb-sb *::before, .tlb-sb *::after { box-sizing: border-box; }
.tlb-sb a, .tlb-sb a:hover { text-decoration: none; }
.tlb-sb svg { flex: none; display: block; }

/* Brand: TLB eagle badge + name. The badge is embedded (96px WebP; source
   image: hub/suite/tlb-logo.webp) so the bar needs no extra file and works
   under Tac Map's CSP (img-src 'self' data:). */
.tlb-sb-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: none;
  padding-right: 1.25rem;
  border-right: 1px solid var(--line, #2E2A24);
  height: 2rem;
  color: var(--amber, #F2A03D);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tlb-sb-brand:hover { color: var(--amber-bright, #FFB559); }
.tlb-sb-logo {
  display: block;
  flex: none;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 50%;
  background: url("data:image/webp;base64,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") center / contain no-repeat;
  transition: transform 140ms ease;
}
.tlb-sb-brand:hover .tlb-sb-logo { transform: scale(1.06); }

/* Service links */
.tlb-sb-nav { display: flex; align-items: stretch; align-self: stretch; gap: .15rem; flex: 1; min-width: 0; }
.tlb-sb-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .8rem;
  color: var(--muted, #ACA596);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 120ms ease, background-color 120ms ease;
}
.tlb-sb-link:hover { color: var(--text, #EDEAE4); background: var(--surface-hover, #221F1B); }
.tlb-sb-link[aria-current="page"] { color: var(--amber, #F2A03D); }
.tlb-sb-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: -1px;
  height: 2px;
  background: var(--amber, #F2A03D);
  box-shadow: 0 0 10px var(--accent-glow, #F2A03D26);
}
.tlb-sb-link--site { display: none; }

/* Right-hand tools */
.tlb-sb-tools { display: flex; align-items: center; gap: .35rem; flex: none; margin-left: auto; }
.tlb-sb-site {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-right: .4rem;
  color: var(--subtle, #8B847A);
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: .68rem;
  letter-spacing: .04em;
}
.tlb-sb-site:hover { color: var(--amber, #F2A03D); }

.tlb-sb .tlb-sb-icon {
  all: unset;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--muted, #ACA596);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.tlb-sb .tlb-sb-icon:hover { color: var(--text, #EDEAE4); background: var(--surface-hover, #221F1B); border-color: var(--line, #2E2A24); }
.tlb-sb .tlb-sb-menu { display: none; }

.tlb-sb a:focus-visible, .tlb-sb .tlb-sb-icon:focus-visible { outline: 2px solid var(--amber, #F2A03D); outline-offset: -2px; }

/* Account: sign-in button, or avatar + name with a small menu */
.tlb-sb .tlb-sb-signin {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 2rem;
  padding: 0 .75rem;
  color: #fff;
  background: #5865F2;
  border-radius: var(--radius-md, 8px);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tlb-sb .tlb-sb-signin:hover { color: #fff; background: #4752C4; }
/* Signed in, but the account still needs its Steam link */
.tlb-sb .tlb-sb-setup { color: #1A1612; background: var(--amber, #F2A03D); }
.tlb-sb .tlb-sb-setup:hover { color: #1A1612; background: var(--amber-bright, #FFB559); }
.tlb-sb-account { position: relative; }
.tlb-sb .tlb-sb-user {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2rem;
  padding: 0 .55rem 0 .25rem;
  color: var(--text, #EDEAE4);
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  font-size: .78rem;
  font-weight: 500;
}
.tlb-sb .tlb-sb-user:hover, .tlb-sb .tlb-sb-user[aria-expanded="true"] { background: var(--surface-hover, #221F1B); border-color: var(--line, #2E2A24); }
.tlb-sb .tlb-sb-user:focus-visible { outline: 2px solid var(--amber, #F2A03D); outline-offset: 1px; }
.tlb-sb-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line-strong, #403A32);
  background: var(--surface-raised, #1D1B18);
  color: var(--amber, #F2A03D);
  font: 700 .7rem var(--mono, "IBM Plex Mono", ui-monospace, monospace);
}
.tlb-sb-user-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlb-sb-account-menu {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  min-width: 13rem;
  padding: .35rem;
  background: var(--sidebar-bg, #0E0D0B);
  border: 1px solid var(--line, #2E2A24);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-overlay, 0 18px 44px #000000B3);
}
.tlb-sb-account-menu[hidden] { display: none; }
.tlb-sb-account-head { padding: .55rem .65rem .6rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line, #2E2A24); }
.tlb-sb-account-head strong { display: block; color: var(--text, #EDEAE4); font-family: var(--font-body, system-ui, sans-serif); font-size: .85rem; }
.tlb-sb-account-head small { color: var(--subtle, #8B847A); font-family: var(--mono, ui-monospace, monospace); font-size: .66rem; }
.tlb-sb-account-menu a {
  display: block;
  padding: .55rem .65rem;
  color: var(--text-body, #CFC9BE);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .82rem;
}
.tlb-sb-account-menu a:hover { color: var(--text, #EDEAE4); background: var(--surface-hover, #221F1B); }

/* Phones: links move into a drop-down panel */
@media (max-width: 1040px) {
  .tlb-sb { gap: .75rem; padding: 0 .5rem 0 1rem; }
  .tlb-sb-brand { border-right: 0; padding-right: 0; }
  .tlb-sb-site { display: none; }
  .tlb-sb-user-name, .tlb-sb .tlb-sb-signin span { display: none; }
  .tlb-sb .tlb-sb-signin { padding: 0 .55rem; }
  .tlb-sb .tlb-sb-setup span { display: inline; }
  .tlb-sb .tlb-sb-menu { display: inline-grid; }
  .tlb-sb-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: .4rem 0;
    background: var(--sidebar-bg, #0E0D0B);
    border-bottom: 1px solid var(--line, #2E2A24);
    box-shadow: var(--shadow-overlay, 0 18px 44px #000000B3);
  }
  .tlb-sb--open .tlb-sb-nav { display: flex; }
  .tlb-sb-link { padding: .9rem 1.25rem; font-size: .85rem; }
  .tlb-sb-link[aria-current="page"] { background: var(--accent-soft, #F2A03D14); }
  .tlb-sb-link[aria-current="page"]::after { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .tlb-sb-link--site { display: flex; margin-top: .3rem; padding-top: 1rem; border-top: 1px solid var(--line, #2E2A24); font-family: var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: .75rem; letter-spacing: .04em; text-transform: none; }
}

@media print { .tlb-sb { display: none; } }