/* ==========================================================================
   DeetCode BENCH chrome: navbar, mobile drawer, command palette, footer.

   The navbar keeps the element ids the page scripts drive (guestButtons,
   userMenu, userAvatar, userDropdown, deetcoinDisplay, deetcoinCount,
   infoBtn, infoBadge) but uses its own class names, so the older auth.css
   and deetcoin.css rules, some of them !important, cannot reach it.
   ========================================================================== */

/* ------------------------------------------------------------ navbar ---- */

.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  padding: 0;
  /* A raised surface, lighter than every page under it, edge to edge. */
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-hair);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color var(--dur-2) var(--ease-out);
}
/* Once content slides under it, the edge firms up to border-strong. The
   surface step does the work a drop shadow would do elsewhere. */
.navbar.is-scrolled {
  border-bottom-color: var(--border-strong);
}

/* Full width on every page, as on the tool pages: the logo sits at the
   window's left edge and the account controls at its right. */
.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--s-4);
}

/* Logo: the DeetCode wordmark, full stop in the accent. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  height: 32px;
  color: var(--text-primary);
  border-radius: 6px;
}
.brand__word {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.brand__dot {
  color: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--text-md);
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
  transition:
    color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}
.nav-links a:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.nav-links a[aria-current="page"],
.nav-links a.active {
  color: var(--text-primary);
  background: transparent;
}
/* Active marker sits on the navbar's bottom edge, under the label. */
.nav-links a[aria-current="page"]::after,
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc((var(--nav-h) - 32px) / -2);
  width: auto;
  height: 2px;
  transform: none;
  border-radius: 0;
  background: var(--accent);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  flex: none;
}

/* Search trigger: reads like a field, opens the command palette. */
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  width: 196px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--border-hair);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-tertiary);
  font: 400 var(--text-md) / 1 var(--font-sans);
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
.nav-search:hover {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.nav-search > i {
  font-size: 16px;
}
.nav-search > span {
  flex: 1;
  text-align: left;
}

/* Instrument readouts: streak, XP, DeetCoins. Tabular mono so the digits
   never jitter as they change. */
.readouts {
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--border-hair);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  overflow: visible;
}
.readout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  color: var(--text-primary);
  font: 500 var(--text-sm) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.readout + .readout {
  border-left: 1px solid var(--border-hair);
}
.readout > i {
  color: var(--text-tertiary);
  font-size: 15px;
}
.readout small {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
}
.readout[data-hot] > i {
  color: var(--warning);
}

.nav-icon {
  --btn-h: 32px;
  color: var(--text-secondary);
  font-size: 18px;
}
.nav-icon > i {
  font-size: 18px;
}

.nav-bell {
  position: relative;
}
.nav-bell__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-cyan);
  box-shadow: 0 0 0 2px var(--bg-base);
}
.nav-bell__dot[hidden] {
  display: none;
}

.nav-guest {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.nav-user {
  position: relative;
}
.nav-avatar {
  padding: 0;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}
.nav-avatar:hover,
.nav-avatar[aria-expanded="true"] {
  border-color: var(--text-tertiary);
}

.nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: var(--z-drawer);
  display: none;
}
.nav-menu.active {
  display: block;
  animation: bench-menu-in var(--dur-2) var(--ease-out);
}
.nav-menu .menu__head strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--text-md);
  font-weight: 600;
}
.nav-menu .menu__head span {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes bench-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.nav-toggle {
  display: none;
}

/* ------------------------------------------------ navbar breakpoints ---- */

@media (max-width: 1320px) {
  .nav-search {
    width: auto;
  }
  .nav-search > span {
    display: none;
  }
}
@media (max-width: 1180px) {
  .readout--xp {
    display: none;
  }
}
@media (max-width: 1080px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
}
@media (max-width: 640px) {
  .navbar__inner {
    gap: var(--s-3);
  }
  .navbar .readouts,
  .nav-search kbd {
    display: none !important;
  }
  .nav-search {
    width: 32px;
    padding: 0;
    justify-content: center;
    border-color: transparent;
    background: transparent;
  }
  .nav-guest .btn-ghost {
    display: none;
  }
}

/* ------------------------------------------------------- the drawer ---- */

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--backdrop);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-2) var(--ease-out),
    visibility 0s linear var(--dur-2);
}
.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease-out);
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  display: flex;
  flex-direction: column;
  width: min(320px, 86vw);
  background: var(--bg-raised);
  border-left: 1px solid var(--border-hair);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--dur-3) var(--ease-out),
    visibility 0s linear var(--dur-3);
}
.nav-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-3) var(--ease-out);
}
.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 var(--s-3) 0 var(--s-5);
  border-bottom: 1px solid var(--border-hair);
}
.nav-drawer__title {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}
.nav-drawer__links {
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  overflow-y: auto;
}
.nav-drawer__links a {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--s-3);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
}
.nav-drawer__links a:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.nav-drawer__links a[aria-current="page"] {
  background: var(--accent-subtle);
  color: var(--text-primary);
}
.nav-drawer__group {
  margin: var(--s-3) var(--s-3) 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-hair);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 500;
}
.nav-drawer__foot {
  display: flex;
  gap: var(--s-2);
  margin-top: auto;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border-hair);
}

/* Account panel at the top of the drawer. */
.nav-drawer__account {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-hair);
}
.nav-drawer__guest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.nav-drawer__user {
  display: grid;
  gap: var(--s-3);
}
.nav-drawer__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.nav-drawer__name {
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-drawer__readouts {
  display: flex;
  justify-content: space-between;
}
.nav-drawer__readouts .readout {
  flex: 1;
  justify-content: center;
}
.nav-drawer__user-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
}
.nav-drawer__user-links a,
.nav-drawer__user-links button {
  padding: var(--s-1) 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: 500 var(--text-md) / 1.4 var(--font-sans);
  cursor: pointer;
}
.nav-drawer__user-links a:hover,
.nav-drawer__user-links button:hover {
  color: var(--text-primary);
}
.nav-drawer__user-links .is-danger {
  margin-left: auto;
  color: var(--danger);
}

body.nav-locked {
  overflow: hidden;
}

/* --------------------------------------------------- command palette ---- */

.palette {
  width: min(600px, calc(100vw - 2 * var(--s-4)));
  margin: 12vh auto auto;
  overflow: hidden;
}
.palette__field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 52px;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--border-hair);
}
.palette__field > i {
  color: var(--text-tertiary);
  font-size: 18px;
}
.palette__field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: 400 var(--text-base) / 1 var(--font-sans);
}
.palette__field input:focus-visible {
  outline: none;
}
.palette__field input::placeholder {
  color: var(--text-tertiary);
}
.palette__list {
  max-height: min(420px, 56vh);
  margin: 0;
  padding: var(--s-1);
  overflow-y: auto;
  list-style: none;
}
.palette__group {
  padding: var(--s-3) var(--s-3) var(--s-1);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 500;
}
.palette__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 40px;
  padding: 6px var(--s-3);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--text-md);
  cursor: pointer;
}
.palette__item > i {
  color: var(--text-secondary);
  font-size: 16px;
}
.palette__item .palette__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette__item[aria-selected="true"] {
  background: var(--bg-hover-overlay);
}
.palette__empty {
  padding: var(--s-8) var(--s-4);
  color: var(--text-secondary);
  font-size: var(--text-md);
  text-align: center;
}
.palette__foot {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--border-hair);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.palette__foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ------------------------------------------------------------ footer ---- */

.site-footer {
  margin-top: var(--s-24);
  padding: var(--s-16) 0 0;
  background: var(--bg-sunken);
  border-top: 1px solid var(--border-hair);
  color: var(--text-secondary);
  /* style.css centres every bare <footer>; this one reads left to right. */
  text-align: left;
}
.site-footer .container {
  max-width: var(--container);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-10) var(--s-8);
  padding-bottom: var(--s-12);
}
.site-footer__brand .brand {
  margin-bottom: var(--s-4);
}
.site-footer__brand p {
  max-width: 34ch;
  margin: 0 0 var(--s-5);
  color: var(--text-secondary);
  font-size: var(--text-md);
}
.site-footer__social {
  display: flex;
  gap: var(--s-1);
  margin-left: -8px;
}
.site-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 20px;
}
.site-footer__social a:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.site-footer h2 {
  margin: 0 0 var(--s-4);
  color: var(--text-primary);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0;
}
.site-footer ul {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li a {
  color: var(--text-secondary);
  font-size: var(--text-md);
}
.site-footer li a:hover {
  color: var(--text-primary);
}

/* The credit line. text-secondary on bg-sunken is 7.99:1 dark, 6.84:1
   light. */
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-6) 0 var(--s-8);
  border-top: 1px solid var(--border-hair);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.site-footer__base .sep {
  color: var(--text-tertiary);
}
.credit {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition:
    color var(--dur-1) var(--ease-out),
    text-decoration-color var(--dur-1) var(--ease-out);
}
.credit:hover {
  color: var(--accent-text);
  text-decoration-color: currentColor;
}

@media (max-width: 860px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .site-footer {
    margin-top: var(--s-16);
    padding-top: var(--s-12);
  }
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A theme switch should be one repaint, not every transition firing. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

/* The page you are on, inside the account menu and the drawer's account
   links: the selected state (accent-subtle), as for a selected row. */
.nav-menu .menu-item[aria-current="page"] {
  background: var(--accent-subtle);
  color: var(--text-primary);
  font-weight: 500;
}
.nav-menu .menu-item[aria-current="page"] > i {
  color: var(--accent-text);
}
.nav-drawer__user-links a[aria-current="page"] {
  color: var(--accent-text);
  font-weight: 600;
}