/*!
 * Notch Kit 1.0 — tarjetas con muescas cóncavas (inverted radius)
 *
 * CSS puro, sin dependencias. La muesca es un RECORTE real de la silueta
 * (clip-path: shape()), no un parche del color de fondo: el contorno y la
 * sombra siguen la curva y funciona sobre cualquier fondo sólido.
 *
 * Navegadores: Chrome/Edge 135+, Safari 18.4+, Firefox 148+.
 * En navegadores anteriores degrada a tarjeta rectangular con un parche
 * del color --nk-page detrás del botón (sigue siendo usable).
 *
 * Estructura mínima de una tarjeta:
 *
 *   <div class="nk-card nk-notch-br">
 *     <span class="nk-shape" aria-hidden="true"></span>   <!-- silueta -->
 *     ...contenido...
 *     <div class="nk-slot"><a class="nk-btn">Acción</a></div>  <!-- hueco -->
 *   </div>
 *
 * Variantes: nk-notch-{tl|tr|bl|br|top|bottom|left|right}
 */

/* ──────────────────────────────────────────────────────────────────────
   1. TOKENS
   Los tokens independientes viven en :root y se pueden sobrescribir en
   cualquier ancestro. Los tokens DERIVADOS (--nk-i, --nk-w, --nk-h,
   --nk-btn-r) se calculan en la propia tarjeta: sobrescríbelos ahí.
   ────────────────────────────────────────────────────────────────────── */
:root {
  /* Color */
  --nk-surface: #ffffff;
  --nk-surface-2: #f1f5f9;
  --nk-page: #f8fafc;               /* solo lo usa el fallback sin shape() */
  --nk-text: #0f172a;
  --nk-muted: #64748b;
  --nk-edge: rgb(15 23 42 / 0.20);  /* contorno de ~1px que sigue la silueta */
  --nk-shadow: rgb(15 23 42 / 0.12);
  --nk-ink: #0f172a;                /* botón por defecto */
  --nk-ink-fg: #ffffff;
  --nk-accent: #4f46e5;
  --nk-accent-fg: #ffffff;

  /* Geometría */
  --nk-r: 24px;      /* radio de las esquinas de la tarjeta               */
  --nk-m: 14px;      /* radio de la "boca" (esquina convexa de entrada)   */
  --nk-gap: 8px;     /* aire entre el botón y el borde de la muesca       */
  --nk-pos: 50%;     /* centro de la muesca sobre el borde (top/bottom/left/right) */
  --nk-pad: 24px;    /* padding interno de la tarjeta                     */

  /* Botón alojado en la muesca: la muesca se dimensiona sola a partir de él */
  --nk-btn-w: 120px;
  --nk-btn-h: 44px;
  --nk-fab: 52px;    /* diámetro del botón circular en .nk-cradle         */
}

:root[data-theme="dark"],
:root[data-bs-theme="dark"],
:root[data-nk-theme="dark"],
.dark,
[data-bs-theme="dark"],
[data-nk-theme="dark"] {
  --nk-surface: #1e293b;
  --nk-surface-2: #0f172a;
  --nk-page: #0b0f19;
  --nk-text: #f1f5f9;
  --nk-muted: #94a3b8;
  --nk-edge: rgb(148 163 184 / 0.28);
  --nk-shadow: rgb(0 0 0 / 0.38);
  --nk-ink: #f8fafc;
  --nk-ink-fg: #0f172a;
  --nk-accent: #818cf8;
  --nk-accent-fg: #0b0f19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-bs-theme="light"]):not([data-nk-theme="light"]) {
    --nk-surface: #1e293b;
    --nk-surface-2: #0f172a;
    --nk-page: #0b0f19;
    --nk-text: #f1f5f9;
    --nk-muted: #94a3b8;
    --nk-edge: rgb(148 163 184 / 0.28);
    --nk-shadow: rgb(0 0 0 / 0.38);
    --nk-ink: #f8fafc;
    --nk-ink-fg: #0f172a;
    --nk-accent: #818cf8;
    --nk-accent-fg: #0b0f19;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   2. TARJETA, SILUETA Y HUECO
   ────────────────────────────────────────────────────────────────────── */
.nk-card {
  /* derivados: se calculan aquí para reaccionar a --nk-btn-* de la tarjeta */
  --nk-btn-r: calc(var(--nk-btn-h) / 2);
  --nk-i: calc(var(--nk-btn-r) + var(--nk-gap));   /* radio interior concéntrico con el botón */

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  padding:
    var(--nk-pt, var(--nk-pad))
    var(--nk-pr, var(--nk-pad))
    var(--nk-pb, var(--nk-pad))
    var(--nk-pl, var(--nk-pad));
  color: var(--nk-text);
}

/* Capa de silueta: el filtro (contorno + sombra) va en el contenedor y el
   recorte en el ::before, así la sombra sigue la forma ya recortada y no
   afecta al texto de la tarjeta. */
.nk-shape {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  filter:
    drop-shadow(0 0 0.5px var(--nk-edge))
    drop-shadow(0 0 0.5px var(--nk-edge))
    drop-shadow(0 1px 2px var(--nk-shadow))
    drop-shadow(0 10px 22px var(--nk-shadow));
}

.nk-shape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nk-surface);
  border-radius: var(--nk-r);   /* también es el fallback si no hay shape() */
}

.nk-slot {
  position: absolute;
  z-index: 1;
  display: flex;
  box-sizing: border-box;
  width: var(--nk-w);
  height: var(--nk-h);
}

.nk-slot > .nk-btn {
  flex: none;
  width: var(--nk-btn-w);
  height: var(--nk-btn-h);
}

/* ──────────────────────────────────────────────────────────────────────
   3. VARIANTES DE POSICIÓN (dimensiones del hueco + ubicación del slot)
   --nk-w / --nk-h = tamaño del hueco = botón + aire en los lados abiertos
   ────────────────────────────────────────────────────────────────────── */
.nk-notch-br, .nk-notch-bl, .nk-notch-tr, .nk-notch-tl {
  --nk-w: calc(var(--nk-btn-w) + var(--nk-gap));
  --nk-h: calc(var(--nk-btn-h) + var(--nk-gap));
}
.nk-notch-top, .nk-notch-bottom {
  --nk-w: calc(var(--nk-btn-w) + var(--nk-gap) * 2);
  --nk-h: calc(var(--nk-btn-h) + var(--nk-gap));
}
.nk-notch-left, .nk-notch-right {
  --nk-w: calc(var(--nk-btn-w) + var(--nk-gap));
  --nk-h: calc(var(--nk-btn-h) + var(--nk-gap) * 2);
}

.nk-notch-br > .nk-slot { right: 0; bottom: 0; padding: var(--nk-gap) 0 0 var(--nk-gap); align-items: flex-end;   justify-content: flex-end; }
.nk-notch-bl > .nk-slot { left: 0;  bottom: 0; padding: var(--nk-gap) var(--nk-gap) 0 0; align-items: flex-end;   justify-content: flex-start; }
.nk-notch-tr > .nk-slot { right: 0; top: 0;    padding: 0 0 var(--nk-gap) var(--nk-gap); align-items: flex-start; justify-content: flex-end; }
.nk-notch-tl > .nk-slot { left: 0;  top: 0;    padding: 0 var(--nk-gap) var(--nk-gap) 0; align-items: flex-start; justify-content: flex-start; }

.nk-notch-top    > .nk-slot { top: 0;    left: calc(var(--nk-pos) - var(--nk-w) / 2); padding: 0 var(--nk-gap) var(--nk-gap);   align-items: flex-end;   justify-content: center; }
.nk-notch-bottom > .nk-slot { bottom: 0; left: calc(var(--nk-pos) - var(--nk-w) / 2); padding: var(--nk-gap) var(--nk-gap) 0;   align-items: flex-start; justify-content: center; }
.nk-notch-right  > .nk-slot { right: 0;  top: calc(var(--nk-pos) - var(--nk-h) / 2);  padding: var(--nk-gap) 0 var(--nk-gap) var(--nk-gap); align-items: center; justify-content: flex-end; }
.nk-notch-left   > .nk-slot { left: 0;   top: calc(var(--nk-pos) - var(--nk-h) / 2);  padding: var(--nk-gap) var(--nk-gap) var(--nk-gap) 0; align-items: center; justify-content: flex-start; }

/* Cradle: muesca semicircular (cuna) para un botón circular que queda
   centrado sobre la línea del borde. Solo con nk-notch-top / -bottom. */
.nk-cradle {
  --nk-btn-w: var(--nk-fab);
  --nk-btn-h: var(--nk-fab);
  --nk-i: calc(var(--nk-w) / 2);
  --nk-h: calc(var(--nk-i) + var(--nk-m));
}
/* La cuna entra en la tarjeta: el contenido se aparta solo */
.nk-notch-top.nk-cradle    { --nk-pt: max(var(--nk-pad), calc(var(--nk-h) + var(--nk-gap))); }
.nk-notch-bottom.nk-cradle { --nk-pb: max(var(--nk-pad), calc(var(--nk-h) + var(--nk-gap))); }

/* Reservar espacio del contenido frente al hueco (solo esquinas) */
.nk-notch-br.nk-reserve-y, .nk-notch-bl.nk-reserve-y { --nk-pb: calc(var(--nk-h) + var(--nk-gap)); }
.nk-notch-tr.nk-reserve-y, .nk-notch-tl.nk-reserve-y { --nk-pt: calc(var(--nk-h) + var(--nk-gap)); }
.nk-notch-br.nk-reserve-x, .nk-notch-tr.nk-reserve-x { --nk-pr: calc(var(--nk-w) + var(--nk-gap)); }
.nk-notch-bl.nk-reserve-x, .nk-notch-tl.nk-reserve-x { --nk-pl: calc(var(--nk-w) + var(--nk-gap)); }
/* En left/right el contenido siempre se aparta del hueco */
.nk-notch-right { --nk-pr: calc(var(--nk-w) + var(--nk-gap) + var(--nk-pad) / 2); }
.nk-notch-left  { --nk-pl: calc(var(--nk-w) + var(--nk-gap) + var(--nk-pad) / 2); }

/* ──────────────────────────────────────────────────────────────────────
   4. SILUETAS (generadas: una ruta por variante, ver README)
   ────────────────────────────────────────────────────────────────────── */
@supports (clip-path: shape(from 0 0, line to 1px 0, close)) {
  .nk-notch-tl > .nk-shape::before {
    clip-path: shape(
      from calc(100% - var(--nk-r)) 100%,
      line to var(--nk-r) 100%,
      arc to 0 calc(100% - var(--nk-r)) of var(--nk-r) cw,
      line to 0 calc(var(--nk-h) + var(--nk-m)),
      arc to var(--nk-m) var(--nk-h) of var(--nk-m) cw,
      line to calc(var(--nk-w) - var(--nk-i)) var(--nk-h),
      arc to var(--nk-w) calc(var(--nk-h) - var(--nk-i)) of var(--nk-i) ccw,
      line to var(--nk-w) var(--nk-m),
      arc to calc(var(--nk-w) + var(--nk-m)) 0 of var(--nk-m) cw,
      line to calc(100% - var(--nk-r)) 0,
      arc to 100% var(--nk-r) of var(--nk-r) cw,
      line to 100% calc(100% - var(--nk-r)),
      arc to calc(100% - var(--nk-r)) 100% of var(--nk-r) cw,
      close
    );
  }

  .nk-notch-tr > .nk-shape::before {
    clip-path: shape(
      from var(--nk-r) 100%,
      line to calc(100% - var(--nk-r)) 100%,
      arc to 100% calc(100% - var(--nk-r)) of var(--nk-r) ccw,
      line to 100% calc(var(--nk-h) + var(--nk-m)),
      arc to calc(100% - var(--nk-m)) var(--nk-h) of var(--nk-m) ccw,
      line to calc(100% - var(--nk-w) + var(--nk-i)) var(--nk-h),
      arc to calc(100% - var(--nk-w)) calc(var(--nk-h) - var(--nk-i)) of var(--nk-i) cw,
      line to calc(100% - var(--nk-w)) var(--nk-m),
      arc to calc(100% - var(--nk-w) - var(--nk-m)) 0 of var(--nk-m) ccw,
      line to var(--nk-r) 0,
      arc to 0 var(--nk-r) of var(--nk-r) ccw,
      line to 0 calc(100% - var(--nk-r)),
      arc to var(--nk-r) 100% of var(--nk-r) ccw,
      close
    );
  }

  .nk-notch-bl > .nk-shape::before {
    clip-path: shape(
      from calc(100% - var(--nk-r)) 0,
      line to var(--nk-r) 0,
      arc to 0 var(--nk-r) of var(--nk-r) ccw,
      line to 0 calc(100% - var(--nk-h) - var(--nk-m)),
      arc to var(--nk-m) calc(100% - var(--nk-h)) of var(--nk-m) ccw,
      line to calc(var(--nk-w) - var(--nk-i)) calc(100% - var(--nk-h)),
      arc to var(--nk-w) calc(100% - var(--nk-h) + var(--nk-i)) of var(--nk-i) cw,
      line to var(--nk-w) calc(100% - var(--nk-m)),
      arc to calc(var(--nk-w) + var(--nk-m)) 100% of var(--nk-m) ccw,
      line to calc(100% - var(--nk-r)) 100%,
      arc to 100% calc(100% - var(--nk-r)) of var(--nk-r) ccw,
      line to 100% var(--nk-r),
      arc to calc(100% - var(--nk-r)) 0 of var(--nk-r) ccw,
      close
    );
  }

  .nk-notch-br > .nk-shape::before {
    clip-path: shape(
      from var(--nk-r) 0,
      line to calc(100% - var(--nk-r)) 0,
      arc to 100% var(--nk-r) of var(--nk-r) cw,
      line to 100% calc(100% - var(--nk-h) - var(--nk-m)),
      arc to calc(100% - var(--nk-m)) calc(100% - var(--nk-h)) of var(--nk-m) cw,
      line to calc(100% - var(--nk-w) + var(--nk-i)) calc(100% - var(--nk-h)),
      arc to calc(100% - var(--nk-w)) calc(100% - var(--nk-h) + var(--nk-i)) of var(--nk-i) ccw,
      line to calc(100% - var(--nk-w)) calc(100% - var(--nk-m)),
      arc to calc(100% - var(--nk-w) - var(--nk-m)) 100% of var(--nk-m) cw,
      line to var(--nk-r) 100%,
      arc to 0 calc(100% - var(--nk-r)) of var(--nk-r) cw,
      line to 0 var(--nk-r),
      arc to var(--nk-r) 0 of var(--nk-r) cw,
      close
    );
  }

  .nk-notch-top > .nk-shape::before {
    clip-path: shape(
      from var(--nk-r) 0,
      line to calc(var(--nk-pos) - var(--nk-w) / 2 - var(--nk-m)) 0,
      arc to calc(var(--nk-pos) - var(--nk-w) / 2) var(--nk-m) of var(--nk-m) cw,
      line to calc(var(--nk-pos) - var(--nk-w) / 2) calc(var(--nk-h) - var(--nk-i)),
      arc to calc(var(--nk-pos) - var(--nk-w) / 2 + var(--nk-i)) var(--nk-h) of var(--nk-i) ccw,
      line to calc(var(--nk-pos) + var(--nk-w) / 2 - var(--nk-i)) var(--nk-h),
      arc to calc(var(--nk-pos) + var(--nk-w) / 2) calc(var(--nk-h) - var(--nk-i)) of var(--nk-i) ccw,
      line to calc(var(--nk-pos) + var(--nk-w) / 2) var(--nk-m),
      arc to calc(var(--nk-pos) + var(--nk-w) / 2 + var(--nk-m)) 0 of var(--nk-m) cw,
      line to calc(100% - var(--nk-r)) 0,
      arc to 100% var(--nk-r) of var(--nk-r) cw,
      line to 100% calc(100% - var(--nk-r)),
      arc to calc(100% - var(--nk-r)) 100% of var(--nk-r) cw,
      line to var(--nk-r) 100%,
      arc to 0 calc(100% - var(--nk-r)) of var(--nk-r) cw,
      line to 0 var(--nk-r),
      arc to var(--nk-r) 0 of var(--nk-r) cw,
      close
    );
  }

  .nk-notch-bottom > .nk-shape::before {
    clip-path: shape(
      from var(--nk-r) 100%,
      line to calc(var(--nk-pos) - var(--nk-w) / 2 - var(--nk-m)) 100%,
      arc to calc(var(--nk-pos) - var(--nk-w) / 2) calc(100% - var(--nk-m)) of var(--nk-m) ccw,
      line to calc(var(--nk-pos) - var(--nk-w) / 2) calc(100% - var(--nk-h) + var(--nk-i)),
      arc to calc(var(--nk-pos) - var(--nk-w) / 2 + var(--nk-i)) calc(100% - var(--nk-h)) of var(--nk-i) cw,
      line to calc(var(--nk-pos) + var(--nk-w) / 2 - var(--nk-i)) calc(100% - var(--nk-h)),
      arc to calc(var(--nk-pos) + var(--nk-w) / 2) calc(100% - var(--nk-h) + var(--nk-i)) of var(--nk-i) cw,
      line to calc(var(--nk-pos) + var(--nk-w) / 2) calc(100% - var(--nk-m)),
      arc to calc(var(--nk-pos) + var(--nk-w) / 2 + var(--nk-m)) 100% of var(--nk-m) ccw,
      line to calc(100% - var(--nk-r)) 100%,
      arc to 100% calc(100% - var(--nk-r)) of var(--nk-r) ccw,
      line to 100% var(--nk-r),
      arc to calc(100% - var(--nk-r)) 0 of var(--nk-r) ccw,
      line to var(--nk-r) 0,
      arc to 0 var(--nk-r) of var(--nk-r) ccw,
      line to 0 calc(100% - var(--nk-r)),
      arc to var(--nk-r) 100% of var(--nk-r) ccw,
      close
    );
  }

  .nk-notch-left > .nk-shape::before {
    clip-path: shape(
      from calc(100% - var(--nk-r)) 0,
      line to var(--nk-r) 0,
      arc to 0 var(--nk-r) of var(--nk-r) ccw,
      line to 0 calc(var(--nk-pos) - var(--nk-h) / 2 - var(--nk-m)),
      arc to var(--nk-m) calc(var(--nk-pos) - var(--nk-h) / 2) of var(--nk-m) ccw,
      line to calc(var(--nk-w) - var(--nk-i)) calc(var(--nk-pos) - var(--nk-h) / 2),
      arc to var(--nk-w) calc(var(--nk-pos) - var(--nk-h) / 2 + var(--nk-i)) of var(--nk-i) cw,
      line to var(--nk-w) calc(var(--nk-pos) + var(--nk-h) / 2 - var(--nk-i)),
      arc to calc(var(--nk-w) - var(--nk-i)) calc(var(--nk-pos) + var(--nk-h) / 2) of var(--nk-i) cw,
      line to var(--nk-m) calc(var(--nk-pos) + var(--nk-h) / 2),
      arc to 0 calc(var(--nk-pos) + var(--nk-h) / 2 + var(--nk-m)) of var(--nk-m) ccw,
      line to 0 calc(100% - var(--nk-r)),
      arc to var(--nk-r) 100% of var(--nk-r) ccw,
      line to calc(100% - var(--nk-r)) 100%,
      arc to 100% calc(100% - var(--nk-r)) of var(--nk-r) ccw,
      line to 100% var(--nk-r),
      arc to calc(100% - var(--nk-r)) 0 of var(--nk-r) ccw,
      close
    );
  }

  .nk-notch-right > .nk-shape::before {
    clip-path: shape(
      from var(--nk-r) 0,
      line to calc(100% - var(--nk-r)) 0,
      arc to 100% var(--nk-r) of var(--nk-r) cw,
      line to 100% calc(var(--nk-pos) - var(--nk-h) / 2 - var(--nk-m)),
      arc to calc(100% - var(--nk-m)) calc(var(--nk-pos) - var(--nk-h) / 2) of var(--nk-m) cw,
      line to calc(100% - var(--nk-w) + var(--nk-i)) calc(var(--nk-pos) - var(--nk-h) / 2),
      arc to calc(100% - var(--nk-w)) calc(var(--nk-pos) - var(--nk-h) / 2 + var(--nk-i)) of var(--nk-i) ccw,
      line to calc(100% - var(--nk-w)) calc(var(--nk-pos) + var(--nk-h) / 2 - var(--nk-i)),
      arc to calc(100% - var(--nk-w) + var(--nk-i)) calc(var(--nk-pos) + var(--nk-h) / 2) of var(--nk-i) ccw,
      line to calc(100% - var(--nk-m)) calc(var(--nk-pos) + var(--nk-h) / 2),
      arc to 100% calc(var(--nk-pos) + var(--nk-h) / 2 + var(--nk-m)) of var(--nk-m) cw,
      line to 100% calc(100% - var(--nk-r)),
      arc to calc(100% - var(--nk-r)) 100% of var(--nk-r) cw,
      line to var(--nk-r) 100%,
      arc to 0 calc(100% - var(--nk-r)) of var(--nk-r) cw,
      line to 0 var(--nk-r),
      arc to var(--nk-r) 0 of var(--nk-r) cw,
      close
    );
  }
}

/* Fallback sin shape(): tarjeta rectangular + parche detrás del botón */
@supports not (clip-path: shape(from 0 0, line to 1px 0, close)) {
  .nk-slot {
    background: var(--nk-page);
    border-radius: var(--nk-i);
  }
}

/* ──────────────────────────────────────────────────────────────────────
   5. BOTONES
   ────────────────────────────────────────────────────────────────────── */
.nk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  height: 2.5rem;               /* botón suelto; dentro de .nk-slot manda --nk-btn-h */
  padding: 0 1rem;
  border: 0;
  border-radius: var(--nk-btn-r, 999px);
  background: var(--nk-ink);
  color: var(--nk-ink-fg);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.nk-btn:hover  { transform: scale(1.04); }
.nk-btn:active { transform: scale(0.96); }
.nk-btn:focus-visible {
  outline: 2px solid var(--nk-accent);
  outline-offset: 2px;
}
.nk-btn svg { flex: none; width: 1.15em; height: 1.15em; }
.nk-btn--icon   { padding: 0; }
.nk-btn--accent { background: var(--nk-accent); color: var(--nk-accent-fg); }
.nk-btn--soft   { background: var(--nk-surface-2); color: var(--nk-text); }

/* ──────────────────────────────────────────────────────────────────────
   6. COMPONENTES COMPUESTOS
   ────────────────────────────────────────────────────────────────────── */

/* Stack "puzzle": dos tarjetas pegadas cuyas cunas forman un círculo donde
   encaja el pin. Pin = último hijo; se centra solo sobre la costura. */
.nk-stack {
  position: relative;
  display: grid;
  row-gap: 0;
}
.nk-stack > .nk-card:nth-child(1) { grid-row: 1; grid-column: 1; }
.nk-stack > .nk-card:nth-child(2) { grid-row: 2; grid-column: 1; }
.nk-stack > .nk-pin {
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  justify-self: center;
  z-index: 3;
  width: var(--nk-fab);
  height: var(--nk-fab);
  padding: 0;
  transform: translateY(-50%);
}
.nk-stack > .nk-pin:hover  { transform: translateY(-50%) scale(1.06); }
.nk-stack > .nk-pin:active { transform: translateY(-50%) scale(0.94); }

/* Dock: píldora con botón central alojado en una cuna superior */
.nk-dock {
  --nk-r: 28px;
  --nk-m: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 60px;
  padding: 0 14px;
}
.nk-dock__spacer { flex: 0 0 var(--nk-w); }
.nk-dock__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  color: var(--nk-text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.nk-dock__item:hover { background: var(--nk-surface-2); }
.nk-dock__item:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 2px; }
.nk-dock__item svg { width: 1.1em; height: 1.1em; color: var(--nk-muted); }

@media (prefers-reduced-motion: reduce) {
  .nk-btn, .nk-dock__item { transition: none; }
  .nk-btn:hover, .nk-btn:active { transform: none; }
  .nk-stack > .nk-pin:hover, .nk-stack > .nk-pin:active { transform: translateY(-50%); }
}