/* ============================================================
   Postup — the bits Tailwind doesn't express well.
   Everything else is utilities via the Tailwind CDN.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* Paint the canvas immediately so there's no flash before the
   Tailwind Play CDN finishes compiling. */
html { background: #07070c; color-scheme: dark; }
body {
  background-color: #07070c;
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(79,70,229,0.16), transparent 60%),
    radial-gradient(700px 400px at 95% 0%, rgba(79,70,229,0.07), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* form controls — dark by default, before utilities land */
input, textarea, select, button { font-family: inherit; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9ab0' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

/* toggle switch */
.switch { position: relative; width: 40px; height: 23px; flex: none; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track {
  position: absolute; inset: 0; cursor: pointer;
  background: #2a2a3a; border-radius: 999px; transition: background .18s;
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; background: #fff; border-radius: 50%;
  transition: transform .18s;
}
.switch input:checked + .track { background: #4F46E5; }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { outline: 2px solid #6d64ff; outline-offset: 2px; }

/* status pill dot */
.pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

/* clamp captions to two lines */
.clamp-2 {
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* entrance */
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .42s cubic-bezier(.2,.7,.3,1) both; }
.rise:nth-child(2) { animation-delay: .05s; }
.rise:nth-child(3) { animation-delay: .10s; }
.rise:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28); border-top-color: #fff;
  animation: spin .7s linear infinite; display: inline-block;
}