/* ──────────────────────────────────────────────────────────────────────────
   Naksha: the look of Penpot's sign-in page.

   Every selector hooks a data-attribute that naksha.js sets, never one of
   Penpot's compiled class names -- those change between releases, and three
   attempts at styling them directly each missed. The script owns WHAT is on the
   page (mark, wordmark, Microsoft icon, wording); this file owns HOW IT LOOKS.
   Nothing here draws the logo: an earlier version did, and the page ended up
   showing two of them.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --nk-ink: #f2f5f7;
  --nk-dim: #343c46;
  --nk-node: #3fa3b8;
  --nk-bg: #080b10;
}

/* ── the page ──────────────────────────────────────────────────────────── */
body[data-naksha-page] {
  background-color: var(--nk-bg) !important;
  /* a blueprint grid, because naksha means blueprint */
  background-image:
    linear-gradient(to right, rgb(242 245 247 / .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(242 245 247 / .035) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}

/* ── left: our mark in place of Penpot's illustration ──────────────────── */
[data-naksha-art] {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
[data-naksha-art]::before,
[data-naksha-art]::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  pointer-events: none;
}
[data-naksha-art]::before {
  width: 26rem; height: 26rem;
  left: -6rem; top: -8rem;
  background: rgb(63 163 184 / .10);
}
[data-naksha-art]::after {
  width: 28rem; height: 28rem;
  right: -6rem; bottom: -8rem;
  background: rgb(242 245 247 / .05);
}
[data-naksha-mark] {
  position: relative;
  animation: nk-rise 620ms cubic-bezier(.22, 1, .36, 1) both;
}
[data-naksha-mark] svg {
  filter: drop-shadow(0 24px 60px rgb(63 163 184 / .22));
}

/* ── right: the credential column ──────────────────────────────────────── */
/* Flat on purpose: no card, no shadow, no border. The column is just type and
   one button on the page itself. */
[data-naksha-panel] {
  position: relative;
  animation: nk-rise 520ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 60ms;
}

/* the heading */
[data-naksha-panel] [class*="title"] {
  font-size: 2rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--nk-ink) !important;
}
/* the line under it */
[data-naksha-panel] [class*="tagline"],
[data-naksha-panel] [class*="subtitle"] {
  font-size: .9rem !important;
  line-height: 1.6 !important;
  color: rgb(242 245 247 / .55) !important;
  margin-block: .5rem 1.75rem !important;
}

/* the sign-in button: flat, full width, a hairline instead of a box */
[data-naksha-panel] a[data-naksha-done],
[data-naksha-panel] button[data-naksha-done] {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  background: rgb(242 245 247 / .04) !important;
  box-shadow: inset 0 0 0 1px rgb(242 245 247 / .12) !important;
  color: var(--nk-ink) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  transition: background .18s ease, box-shadow .18s ease !important;
}
[data-naksha-panel] a[data-naksha-done]:hover,
[data-naksha-panel] button[data-naksha-done]:hover {
  background: rgb(63 163 184 / .12) !important;
  box-shadow: inset 0 0 0 1px rgb(63 163 184 / .45) !important;
}
[data-naksha-panel] a[data-naksha-done]:focus-visible,
[data-naksha-panel] button[data-naksha-done]:focus-visible {
  outline: 2px solid var(--nk-node);
  outline-offset: 2px;
}

/* Penpot draws a rule above the register row we hide; without the row it is a
   line to nothing. */
[data-naksha-panel] [class*="separator"] {
  display: none !important;
}

/* ── Penpot's own wording, hidden until the script rewrites it ─────────── */
[class*="auth"] [class*="tagline"] {
  visibility: hidden;
}
[class*="auth"] [class*="tagline"][data-naksha-done] {
  visibility: visible;
}

@keyframes nk-rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-naksha-mark], [data-naksha-panel] { animation: none !important; }
}