/* Required for Select / Modal / Drawer CDK overlays (backdrop + positioning). */
@import '@angular/cdk/overlay-prebuilt.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body {
    height: 100%;
  }

  /*
   * Playground light canvas — portal page chrome (#f6f7f9). Demo cards stay white.
   */
  :root {
    --pg-canvas: #f6f7f9;
    --pg-chrome: #f0f2f5;
  }

  body {
    @apply m-0 text-ink font-sans antialiased;
    background-color: var(--pg-canvas);
  }

  .dark body {
    @apply bg-ink-950 text-white;
  }

  ::selection {
    @apply bg-export-subtle text-ink;
  }

  .dark ::selection {
    @apply bg-ink-blue text-white;
  }
}

@layer components {
  /* Soft reveal when route content mounts */
  .pg-page-enter {
    animation: pg-fade-up 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .pg-chrome {
    background-color: var(--pg-chrome);
  }

  .dark .pg-chrome {
    @apply bg-ink;
  }

  .pg-chrome-blur {
    background-color: color-mix(in srgb, var(--pg-chrome) 90%, transparent);
  }

  .dark .pg-chrome-blur {
    @apply bg-ink-950/90;
  }

  .pg-kicker {
    @apply text-caption font-medium uppercase tracking-[0.14em] text-neutral-600;
  }

  .dark .pg-kicker {
    @apply text-neutral-400;
  }

  .pg-demo {
    @apply relative overflow-visible rounded-xl border border-border bg-white p-5 text-ink sm:p-6;
  }

  .dark .pg-demo {
    @apply border-white/10 bg-ink text-white;
  }

  .pg-demo-muted {
    @apply rounded-xl border border-dashed border-neutral-300 p-5 text-ink sm:p-6;
    background-color: color-mix(in srgb, var(--pg-canvas) 70%, white);
  }

  .dark .pg-demo-muted {
    @apply border-white/15 bg-ink-950 text-white;
  }

  .pg-code {
    @apply rounded bg-border px-1.5 py-0.5 font-mono text-caption text-ink;
  }

  .dark .pg-code {
    @apply bg-white/10 text-white;
  }
}

@keyframes pg-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Playground Show-code panels — VS Code Dark+ inspired token colors */
.pg-code-block {
  color: #d4d4d4;
  tab-size: 2;
}

.pg-code-block .hljs {
  background: transparent;
  color: inherit;
}

.pg-code-block .hljs-comment,
.pg-code-block .hljs-quote {
  color: #6a9955;
  font-style: italic;
}

.pg-code-block .hljs-keyword,
.pg-code-block .hljs-selector-tag,
.pg-code-block .hljs-literal,
.pg-code-block .hljs-section,
.pg-code-block .hljs-link {
  color: #569cd6;
}

.pg-code-block .hljs-built_in,
.pg-code-block .hljs-type {
  color: #4ec9b0;
}

.pg-code-block .hljs-string,
.pg-code-block .hljs-doctag,
.pg-code-block .hljs-template-tag,
.pg-code-block .hljs-template-variable,
.pg-code-block .hljs-addition {
  color: #ce9178;
}

.pg-code-block .hljs-number,
.pg-code-block .hljs-regexp {
  color: #b5cea8;
}

.pg-code-block .hljs-title,
.pg-code-block .hljs-title.class_,
.pg-code-block .hljs-title.function_ {
  color: #dcdcaa;
}

.pg-code-block .hljs-attr,
.pg-code-block .hljs-variable,
.pg-code-block .hljs-params,
.pg-code-block .hljs-property {
  color: #9cdcfe;
}

.pg-code-block .hljs-tag,
.pg-code-block .hljs-name,
.pg-code-block .hljs-selector-id,
.pg-code-block .hljs-selector-class {
  color: #569cd6;
}

.pg-code-block .hljs-meta,
.pg-code-block .hljs-meta .hljs-keyword {
  color: #c586c0;
}

.pg-code-block .hljs-punctuation,
.pg-code-block .hljs-operator {
  color: #d4d4d4;
}

.pg-code-block .hljs-deletion {
  color: #f44747;
}

.pg-code-block .hljs-emphasis {
  font-style: italic;
}

.pg-code-block .hljs-strong {
  font-weight: 600;
}

/* Glossary term links (Show code panels + page copy) */
.pg-glossary-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pg-glossary-link:hover {
  text-decoration-style: solid;
}

.pg-code-block .pg-glossary-link {
  color: #4fc1ff;
}

.pg-code-block .pg-glossary-link:hover {
  color: #9cdcfe;
}

.pg-lecture-chip {
  @apply inline-flex items-center rounded-md border border-border bg-background-welcome px-2.5 py-1 font-mono text-caption text-ink no-underline transition hover:border-export hover:text-export dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:border-export-light dark:hover:text-export-light;
}

.pg-lecture-category-link {
  @apply block rounded-lg border border-border px-3 py-2.5 no-underline transition hover:-translate-y-0.5 hover:border-export hover:shadow-sm dark:border-white/10 dark:hover:border-export-light;
}

.pg-lecture-category-link--active,
.pg-lecture-category-link:focus-visible {
  @apply border-export ring-2 ring-export dark:border-export-light dark:ring-export-light;
}

.pg-lecture-example {
  tab-size: 2;
}

.pg-lecture-scroll-top {
  @apply fixed bottom-6 right-6 z-40 flex size-11 items-center justify-center rounded-full border border-border bg-white text-ink shadow-md hover:border-export hover:text-export dark:border-white/15 dark:bg-ink-surface dark:text-white dark:hover:border-export-light dark:hover:text-export-light;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem) scale(0.92);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.pg-lecture-scroll-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.pg-lecture-scroll-top--visible:hover {
  transform: translateY(-0.125rem) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .pg-lecture-scroll-top {
    transform: none;
    transition: opacity 0.15s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .pg-lecture-scroll-top--visible:hover {
    transform: none;
  }
}