/* Shared top bar, used both server-rendered (id_render_bar) and client-rendered (bar.js on
   every tool). Class names must match between the two — this file is the one source of
   truth for how the bar looks; a tool's own custom_css loads after this and can override.
   Deliberately black on white everywhere: the bar is the one element that must look the
   same on every tool, so it does not pick up per-tool brand colours. */
/* Pinned to the top of the viewport, so the tool you're in and the way out of it stay
   reachable however far down the page you've scrolled. Sticky rather than fixed: it keeps
   its space in the flow, so no tool has to offset its own content to clear it.
   A tool's own full-screen overlay is expected to sit above this — anything modal needs a
   z-index higher than 1000. */
.jtools-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  color: #000;
  border-bottom: 1px solid #d4d4d4;
  font-family: sans-serif;
  font-size: 0.95em;
}
.jtools-bar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.55em 1em;
}
.jtools-bar-left {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  min-width: 0; /* lets the name below actually shrink/ellipsize instead of overflowing */
  flex-shrink: 1;
}
.jtools-bar-left img { height: 26px; display: block; flex-shrink: 0; }
.jtools-bar-left span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jtools-bar-right { display: flex; align-items: center; gap: 0.9em; flex-shrink: 0; }
.jtools-bar-right a { color: inherit; text-decoration: none; display: flex; align-items: center; }

/* The j-tools mark is the script-J logo image, served from id.j-tools.net so every embedding
   tool shows the same one without hosting the asset itself. */
.jtools-bar-logo img { height: 26px; width: auto; display: block; }

.jtools-icon-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
}

.jtools-account { position: relative; }
.jtools-account-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 140%;
  background: #fff;
  color: #000;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  min-width: 170px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 1000;
}
.jtools-account.open .jtools-account-menu { display: block; }
.jtools-account-menu a { display: block; padding: 0.7em 1em; white-space: nowrap; }
.jtools-account-menu a:hover { background: #f2f2f2; }

/* Divider between the account entries and the user's starred tools. Rendered only when there
   is at least one favourite, so the menu never ends on a stray line. */
.jtools-menu-sep { border-top: 1px solid #e2e2e2; margin: 0.25em 0; }
.jtools-account-menu a.jtools-fav { display: flex; align-items: center; gap: 0.55em; }
.jtools-account-menu a.jtools-fav img { height: 18px; width: 18px; object-fit: contain; }

/* Phones: tighten the spacing so the tool name keeps as much room as possible, and give
   the icons a real touch target without making the bar taller than it is on a desktop. */
@media (max-width: 480px) {
  .jtools-bar { font-size: 0.9em; }
  .jtools-bar-main { padding: 0.4em 0.7em; gap: 0.6em; }
  .jtools-bar-right { gap: 0.4em; }
  .jtools-bar-right > a, .jtools-icon-btn { min-height: 40px; padding: 0 0.25em; }
  .jtools-bar-left img { height: 22px; }
  .jtools-bar-logo img { height: 22px; }
}