/* Premium surface polish for atlas-portal.
   Loaded after weave.css so it can only add. Every value is a brand token or
   derived from one; nothing here introduces a new colour. */

/* ---- skeletons -------------------------------------------------------------
   A skeleton is shown while real data is on its way. It is deliberately a
   neutral block and never a fake number: a shimmering "0" reads as an answer,
   and the whole point is to say "not yet" rather than to say something wrong. */
@keyframes alex-shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }

.alex-skel {
  background: linear-gradient(90deg,
    var(--surface-2, #f1f0f7) 25%,
    var(--surface-1, #fbfaff) 50%,
    var(--surface-2, #f1f0f7) 75%);
  background-size: 800px 100%;
  animation: alex-shimmer 1.4s linear infinite;
  border-radius: 8px; display: block;
}
.alex-skel--line { height: 12px; margin: 8px 0 }
.alex-skel--title { height: 22px; width: 55%; margin: 0 0 12px }
.alex-skel--card { height: 96px; margin: 10px 0 }
@media (prefers-reduced-motion: reduce) { .alex-skel { animation: none } }

/* ---- empty states ----------------------------------------------------------
   An empty state names what is missing and offers the next move. It never
   apologises and never pretends the absence is a result. */
.alex-empty {
  text-align: center; padding: 34px 20px;
  border: 1.5px dashed var(--line, #e2e0ee); border-radius: 14px;
  color: var(--ink-2, #495965);
}
.alex-empty__t { font-family: Montserrat, sans-serif; font-weight: 700;
  font-size: 1.02rem; color: var(--ink-1, #241f3d); margin: 0 0 6px }
.alex-empty__s { font-size: .92rem; margin: 0 0 14px; line-height: 1.5 }

/* ---- command palette ------------------------------------------------------- */
.alex-cmdk__back {
  position: fixed; inset: 0; background: rgba(24,20,54,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; z-index: 9998; backdrop-filter: blur(2px);
}
.alex-cmdk {
  width: min(620px, 92vw); background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(30,20,80,.34); overflow: hidden;
}
.alex-cmdk__in {
  width: 100%; border: 0; padding: 17px 20px; font-size: 1.03rem;
  font-family: Lora, serif; outline: none; border-bottom: 1px solid var(--line, #e2e0ee);
}
.alex-cmdk__list { max-height: 52vh; overflow: auto; margin: 0; padding: 6px }
.alex-cmdk__row {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 10px 14px; border-radius: 10px; cursor: pointer; list-style: none;
}
.alex-cmdk__row[aria-selected="true"] { background: var(--surface-2, #f1f0f7) }
.alex-cmdk__lab { font-weight: 600; font-family: Montserrat, sans-serif; font-size: .95rem }
.alex-cmdk__sub { font-size: .8rem; color: var(--ink-2, #495965); white-space: nowrap }
.alex-cmdk__hint {
  padding: 9px 16px; font-size: .78rem; color: var(--ink-2, #495965);
  border-top: 1px solid var(--line, #e2e0ee); display: flex; gap: 14px;
}
.alex-cmdk kbd {
  font: inherit; font-size: .74rem; background: var(--surface-2, #f1f0f7);
  border: 1px solid var(--line, #e2e0ee); border-radius: 5px; padding: 1px 5px;
}

/* ---- entrance -------------------------------------------------------------- */
.alex-fade { animation: alex-fade-in .28s ease both }
@keyframes alex-fade-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .alex-fade { animation: none } }