/* Keyboard-shortcuts cheat sheet (Gmail-style "?" overlay), the "go to" leader
 * hint, and the small keycap hints rendered on sidebar items. Behaviour lives
 * in static/js/shortcuts.js. Loaded globally from base.html. */

/* ---------- Sidebar keycap hint ("g a", "g i", …) ---------- */
.sidebar__kbd {
  margin-left: auto;
  font: 600 10px/1 ui-monospace, "JetBrains Mono", monospace;
  letter-spacing: .06em;
  color: var(--text-faint, #9aa0aa);
  background: var(--bg-elev, #f4f5f7);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
  padding: 2px 5px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .14s ease;
}
.sidebar__link:hover .sidebar__kbd,
.sidebar__link:focus-visible .sidebar__kbd { opacity: 1; }
/* Hidden when the sidebar is collapsed to icons (mirrors labels/badges). */
.app-shell.is-collapsed .sidebar__kbd,
html.lex-sidebar-collapsed .sidebar__kbd { display: none; }

/* ---------- "go to" leader hint pill ---------- */
.lex-go-hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--statusbar-h, 30px) + 18px);
  transform: translateX(-50%);
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text, #1a1c2b) 88%, transparent);
  color: #fff;
  font-size: 12.5px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.lex-go-hint[hidden] { display: none; }
.lex-go-hint kbd {
  font: 600 11px/1 ui-monospace, "JetBrains Mono", monospace;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 5px;
  padding: 3px 6px;
}
.lex-go-hint__then { opacity: .8; }

/* ---------- Shortcuts overlay ---------- */
.lex-shortcuts {
  position: fixed;
  inset: 0;
  z-index: 2147483100;          /* above app chrome (incl. the launcher orb) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lex-shortcuts[hidden] { display: none; }

.lex-shortcuts__backdrop {
  position: absolute;
  inset: 0;
  /* Translucent, frosted — the page stays faintly visible behind it. */
  background: color-mix(in srgb, var(--bg, #0b0c14) 55%, transparent);
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  animation: lex-shortcuts-fade .14s ease;
}

.lex-shortcuts__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
  padding: 22px 24px 18px;
  animation: lex-shortcuts-pop .16s ease;
}

@keyframes lex-shortcuts-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lex-shortcuts-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lex-shortcuts__head {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.lex-shortcuts__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 auto 0 0;
  color: var(--text, #1a1c2b);
}
.lex-shortcuts__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-faint, #9aa0aa);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.lex-shortcuts__close:hover {
  background: var(--bg-elev, #f4f5f7);
  color: var(--text, #1a1c2b);
}

.lex-shortcuts__cols {
  columns: 2;
  column-gap: 32px;
}
@media (max-width: 560px) { .lex-shortcuts__cols { columns: 1; } }

.lex-shortcuts__group {
  break-inside: avoid;
  margin-bottom: 18px;
}
.lex-shortcuts__group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold, #b08a3e);
  margin: 0 0 8px;
}
.lex-shortcuts__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}
.lex-shortcuts__desc {
  font-size: 13px;
  color: var(--text, #1a1c2b);
  margin-right: auto;
}
.lex-shortcuts__keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.lex-shortcuts__keys kbd {
  font: 600 11px/1 ui-monospace, "JetBrains Mono", monospace;
  min-width: 20px;
  text-align: center;
  color: var(--text, #1a1c2b);
  background: var(--bg-elev, #f4f5f7);
  border: 1px solid var(--border, #e5e7eb);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 4px 6px;
}
.lex-shortcuts__plus { color: var(--text-faint, #9aa0aa); font-size: 11px; }
.lex-shortcuts__then {
  color: var(--text-faint, #9aa0aa);
  font-size: 10.5px;
  font-style: italic;
  padding: 0 2px;
}

.lex-shortcuts__foot {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
  font-size: 12px;
  color: var(--text-faint, #9aa0aa);
}
.lex-shortcuts__foot kbd {
  font: 700 12px/1 ui-monospace, "JetBrains Mono", monospace;
  color: var(--text, #1a1c2b);
  background: var(--bg-elev, #f4f5f7);
  border: 1px solid var(--border, #e5e7eb);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 7px;
  margin: 0 1px;
}

@media (prefers-reduced-motion: reduce) {
  .lex-shortcuts__backdrop,
  .lex-shortcuts__panel { animation: none; }
  .sidebar__kbd { transition: none; }
}