/* ---------- page load progress bar ---------- */
.page-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 999;
  background: linear-gradient(90deg, var(--accent), var(--accent-tint));
  box-shadow: 0 0 8px var(--accent-60);
  /* Purely decorative. finish() fades it out but leaves width:100%, so without
     this it stays a full-width invisible click target over everything below —
     including modals, whose root sits at a lower z-index. */
  pointer-events: none;
}

/* ---------- theme cross-fade ----------
   .app-sidebar, .menu-panel and .ac-drawer already have their own transition
   for layout (width/transform) — the color transition for those three is
   merged directly into their existing declarations in shell.css/components.css
   instead of listed here, so this rule doesn't silently replace (rather than
   add to) their transition property. */
body, .win, .app-topbar, .ac-resultpanel, .ac-catrail, .modal-card {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ---------- card hover polish ---------- */
.card { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.15s ease; }
.card:hover { box-shadow: var(--shadow-card), 0 0 0 1px var(--accent-16); }

/* ---------- small interactive-element polish ---------- */
.side-link, .ac-toolbtn, .topbar-iconbtn, .topbar-user, .win-bar-btn, .cmdk-item,
.menu-item, .ac-searchbtn, .ac-insp-btn, .win-btn, .badge, .ac-pagebtn {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.ac-searchbtn:active, .ac-insp-btn:active, .win-btn:active, .topbar-iconbtn:active, .ac-toolbtn:active {
  transform: scale(0.96);
}

/* ---------- skeleton shimmer ---------- */
.skeleton-row, .skeleton-block {
  position: relative; overflow: hidden; background: var(--bg-hover);
  border-radius: 8px; margin-bottom: 8px;
}
.skeleton-row::after, .skeleton-block::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 10%, transparent), transparent);
  animation: skeleton-shimmer 1.2s infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-row::after, .skeleton-block::after { animation: none; }
}

/* ---------- command palette ---------- */
.cmdk-root { position: fixed; inset: 0; z-index: 600; }
.cmdk-backdrop { position: absolute; inset: 0; background: oklch(0% 0 0 / 0.5); opacity: 0; transition: opacity 0.15s ease; }
.cmdk-panel {
  position: relative; width: min(560px, calc(100vw - 40px)); margin: 12vh auto 0;
  background: var(--panel-bg-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-menu); overflow: hidden;
  opacity: 0; transform: translateY(-8px) scale(0.98); transition: opacity 0.15s ease, transform 0.15s ease;
}
.cmdk-root.open .cmdk-backdrop { opacity: 1; }
.cmdk-root.open .cmdk-panel { opacity: 1; transform: translateY(0) scale(1); }
.cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); color: var(--text-5); }
.cmdk-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 14px; font-family: inherit; }
.cmdk-input::placeholder { color: var(--text-6); }
.cmdk-input-row kbd { background: var(--bg-hover); border: 1px solid var(--line-input); border-radius: 4px; padding: 2px 6px; font-size: 10px; color: var(--text-5); }
.cmdk-results { max-height: 380px; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; background: none; border: none; text-align: left; color: var(--text-2); font-size: 12.5px; }
.cmdk-item.active, .cmdk-item:hover { background: var(--accent-14); }
.cmdk-item-icon { width: 18px; text-align: center; color: var(--accent); flex-shrink: 0; }
.cmdk-item-label { flex: 1; }
.cmdk-item-sub { color: var(--text-6); font-size: 10.5px; flex-shrink: 0; }
.cmdk-empty { padding: 24px; text-align: center; color: var(--text-5); font-size: 12px; }

/* ---------- onboarding tour ---------- */
.tour-overlay { position: fixed; inset: 0; z-index: 700; }
.tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px oklch(0% 0 0 / 0.62), 0 0 0 2px var(--accent);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tour-card {
  position: fixed; width: 300px; background: var(--panel-bg-2); border: 1px solid var(--accent-50);
  border-radius: 12px; box-shadow: var(--shadow-menu); padding: 16px; z-index: 701;
  transition: left 0.25s ease, top 0.25s ease;
}
.tour-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tour-text { font-size: 12px; color: var(--text-4); line-height: 1.5; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.tour-progress { font-size: 10.5px; color: var(--text-6); font-family: 'JetBrains Mono', monospace; }
.tour-actions { display: flex; gap: 6px; }

/* ---------- mobile: drawers ---------- */
@media (max-width: 560px) {
  .ac-drawer { width: calc(100vw - 20px); }
}

/* ---------- impersonation banner ----------
   Loaded on every shell page so an admin can always see they are not themselves. */
.imp-banner {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 10px 18px;
  background: repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--red) 88%, black) 0 14px,
      color-mix(in srgb, var(--red) 74%, black) 14px 28px);
  color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.imp-banner-text { display: flex; align-items: center; gap: 9px; }
.imp-banner-text strong { text-decoration: underline; }
.imp-banner-btn {
  background: #fff;
  color: color-mix(in srgb, var(--red) 80%, black);
  border-radius: 7px;
  padding: 7px 15px;
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.imp-banner-btn:hover { filter: brightness(0.94); color: color-mix(in srgb, var(--red) 80%, black); }

/* ---------- demo mode ---------- */
.ld-blur {
  filter: blur(4.5px);
  user-select: all;
  padding-inline: 1px;
}

.ld-blur-full { filter: blur(5px); user-select: all; }

.demo-obfuscate.demo-reveal-hover .ld-cell:hover .ld-blur,
.demo-obfuscate.demo-reveal-hover .ld-cell:hover .ld-blur-full {
  filter: none;
}

#demo-mode-btn.is-on {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.ac-searchinput.ld-blur { filter: blur(4px); }
.ac-searchinput.ld-blur:focus { filter: none; }