/* Top navigation for tools.stylitics.com pages (stylitics.tools.topnav).
   Every rule is namespaced under the topnav- prefix so a page can drop this
   stylesheet in next to its own without collisions. */

.topnav {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 20px;
  box-sizing: content-box;
  min-height: 28px;
  background: var(--sl-color-neutral-0);
  border-bottom: 1px solid var(--sl-color-neutral-200);
  font-size: 12.5px;

  button {
    font-family: 'Jost', sans-serif;
  }
}
.topnav-logo { height: 0.56rem; display: block; }
.topnav-sep { color: var(--sl-color-neutral-400); }
.topnav-title {
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em;
  color: var(--sl-color-neutral-800); text-decoration: none;
  /* Kept on one line: wrapping would grow the bar past the height the flyout
     head matches, and the logo would shift again when the menu opened. */
  white-space: nowrap;
}
.topnav-child {
  text-transform: uppercase; font-weight: 500; letter-spacing: 0.06em;
  color: var(--sl-color-neutral-500); text-decoration: none; white-space: nowrap;
}
.topnav-spacer { flex: 1; }
.topnav-account-pill {
  background: var(--sl-color-neutral-700); color: var(--sl-color-neutral-0); white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  padding: 5px 14px; border-radius: 999px;
}
.topnav-change-account {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--sl-color-neutral-800);
}
.topnav-change-icon { font-size: 15px; }
.topnav-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--sl-color-neutral-200); color: var(--sl-color-neutral-600);
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  border: none; padding: 0; cursor: pointer;
}
.topnav-hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px;
  /* Cancel the padding on both sides so the icon, not its hit area, is what
     lines up: with the bar's inset on the left, and with the bar's gap to the
     logo on the right. */
  margin-left: -4px; margin-right: -2px;
  background: none; border: none; cursor: pointer;
  color: var(--sl-color-neutral-500); line-height: 0;
}
.topnav-hamburger:hover { color: var(--sl-color-neutral-900); }
.topnav-flyout {
  position: fixed; inset: 0; z-index: 1200;
  visibility: hidden; pointer-events: none;
}
.topnav-flyout.open { visibility: visible; pointer-events: auto; }
.topnav-flyout-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--sl-color-neutral-0) 70%, transparent);
  opacity: 0; transition: opacity 0.2s ease;
}
.topnav-flyout.open .topnav-flyout-backdrop { opacity: 1; }
.topnav-flyout-panel {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--sl-color-neutral-0);
  border-bottom: 1px solid var(--sl-color-neutral-300);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
  /* Left inset matches the bar so the head overlays it when open. */
  padding: 8px 20px 40px;
  max-height: 0; overflow: hidden;
  transition: max-height 0.2s ease;
}
.topnav-flyout.open .topnav-flyout-panel { max-height: 80vh; overflow-y: auto; }
/* Overlay the head exactly on the real bar so opening the flyout does not
   shift the logo: match the gap, and match the bar's content height (the
   28px avatar is its tallest item) so the hamburger centers identically. */
.topnav-flyout-head { display: flex; align-items: center; gap: 14px; min-height: 28px; }
.topnav-flyout-cols {
  display: flex; flex-wrap: wrap; gap: 3.5rem;
  margin-top: 28px;
}
.topnav-flyout-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--sl-color-neutral-500); margin-bottom: 14px; min-width: 78px;
}
.topnav-flyout-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.topnav-flyout-links a {
  font-size: 14px; color: var(--sl-color-neutral-900); text-decoration: none;
}
.topnav-flyout-links a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.topnav-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0; transition: opacity 0.15s ease;
}
.topnav-modal.open { visibility: visible; opacity: 1; }
.topnav-modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--sl-color-neutral-900) 12%, transparent);
}
.topnav-modal-card {
  position: relative; z-index: 1;
  width: min(760px, 88vw); min-height: 240px;
  background: var(--sl-color-neutral-0); border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  padding: 28px 36px 40px;
}
.topnav-modal-x {
  position: absolute; top: 18px; right: 20px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--sl-color-neutral-900);
}
.topnav-modal-title {
  margin: 4px 0 28px; text-align: center;
  font-size: 24px; font-weight: 800; color: var(--sl-color-neutral-800);
}
.topnav-modal-search {
  display: block; width: 100%; margin: 0 auto;
  /* Stated, not left to the host page: content-box would add this padding and
     border to the full width and push the field past the card's right edge.
     Quality Tracker hid that because Bulma sets border-box globally, but a page
     carrying only Shoelace has no such reset. */
  box-sizing: border-box;
  padding: 12px 14px; font-size: 15px; color: var(--sl-color-neutral-900);
  /* Stated rather than left to the UA, which fills it from the OS theme and so
     can leave the field out of step with the card behind it. */
  background: var(--sl-color-neutral-0);
  border: 1px solid var(--sl-input-border-color); border-radius: 8px; outline: none;
}
.topnav-modal-search:focus {
  border-color: var(--sl-input-border-color-focus);
  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
}
.topnav-modal-hint {
  margin: 18px 0 0; text-align: center;
  font-size: 14px; color: var(--sl-color-neutral-700);
}
.topnav-modal-bulb { margin-right: 6px; }

/* Account switcher results. One row per match, mirroring the platform
   typeahead: muted until it is the active row, with the return glyph marking
   the row Enter would pick. The list scrolls inside the dialog so a one-letter
   query cannot push the card past the viewport. */
.topnav-account-results { margin-top: 10px; max-height: 50vh; overflow-y: auto; }
.topnav-account-options { display: flex; flex-direction: column; }
.topnav-account-option {
  display: flex; align-items: center; justify-content: space-between;
  /* Border-box for the same reason as the search field above: the row is full
     width and pads itself. */
  box-sizing: border-box;
  width: 100%; padding: 5px; border: none; background: none;
  font-size: 15px; color: var(--sl-color-neutral-500); text-align: left; cursor: pointer;
}
/* Hover marks a row as well, but not while the arrows are driving: a pointer left
   resting on one row would light it up next to the marked one, and only the
   marked one is what Enter picks. The nav's script sets and clears the keyboard
   class as control passes between the arrows and the pointer. */
.topnav-account-results:not(.topnav-account-keyboard) .topnav-account-option:hover,
.topnav-account-option:focus,
.topnav-account-option-active {
  background: var(--sl-color-neutral-100); color: var(--sl-color-neutral-1000); outline: none;
}
.topnav-account-enter { opacity: 0; font-size: 15px; }
.topnav-account-results:not(.topnav-account-keyboard) .topnav-account-option:hover .topnav-account-enter,
.topnav-account-option:focus .topnav-account-enter,
.topnav-account-option-active .topnav-account-enter { opacity: 1; }

.topnav-user { position: relative; display: inline-flex; }
.topnav-user-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 320px; padding: 16px 18px;
  overflow-wrap: anywhere;
  background: var(--sl-color-neutral-0); border: 1px solid var(--sl-color-neutral-200); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.16);
  z-index: 1250;
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.topnav-user-menu.open { visibility: visible; opacity: 1; transform: translateY(0); }
.topnav-user-id { display: flex; align-items: center; gap: 12px; }
.topnav-user-email { font-size: 13.5px; color: var(--sl-color-neutral-900); }
.topnav-user-name { margin-top: 12px; font-size: 15px; color: var(--sl-color-neutral-900); }
.topnav-user-divider { margin: 14px 0; border: none; border-top: 1px solid var(--sl-color-neutral-200); }
.topnav-user-logout {
  padding: 0; border: none; background: none; cursor: pointer;
  font-size: 13.5px; color: var(--sl-color-neutral-900); text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Where the session points. The account pill already names the account; these
   carry the ids, which are what someone pastes into a query. */
.topnav-user-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin: 0; font-size: 13px;
}
.topnav-user-facts dt { color: var(--sl-color-neutral-500); }
.topnav-user-facts dd { margin: 0; color: var(--sl-color-neutral-900); user-select: all; }

/* Flags run long and are a debugging need, so they stay collapsed by default and
   scroll rather than pushing the menu past the viewport. */
.topnav-user-flags summary {
  cursor: pointer; font-size: 13px; color: var(--sl-color-neutral-700); list-style-position: inside;
}
.topnav-user-flag-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 10px; max-height: 200px; overflow-y: auto;
}
.topnav-user-flag {
  padding: 2px 7px; border-radius: 3px;
  background: var(--sl-color-indigo-50); color: var(--sl-color-indigo-800); font-size: 11.5px;
}

/* Tools reads the production database whatever environment the editor came from,
   so say so when that is not what they would assume. */
.topnav-env-warning {
  padding: 3px 9px; border-radius: 3px; margin-right: 4px;
  background: var(--sl-color-warning-100); color: var(--sl-color-warning-800);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; cursor: help;
}

/* Row of top-level links for the bar's middle slot, for a tool whose pages sit
   side by side rather than in a trail. Sized off the bar's own font so it reads
   as part of the bar and not as page content. */
.topnav-links {
  /* Set off from whatever names the page, so the section title and this tool's
     own pages read as two things rather than one run of words. */
  display: flex; align-self: stretch; margin-left: 22px;
  /* Cancel the bar's vertical padding so each link's hit area, and so its hover,
     fills the bar's full height. A horizontal nav needs that to read as
     clickable; a colour change alone is too quiet to notice. */
  margin-top: -8px; margin-bottom: -8px;
}
.topnav-link {
  display: flex; align-items: center; padding: 0 12px;
  font-size: 13.5px; color: var(--sl-color-neutral-600); text-decoration: none; white-space: nowrap;
}
.topnav-link:hover { background: var(--sl-color-neutral-100); color: var(--sl-color-neutral-900); }
.topnav-link-current { color: var(--sl-color-neutral-900); font-weight: 600; }
.topnav-link-current:hover { background: var(--sl-color-neutral-200); }