@import "tailwindcss";
@import "@shikijs/twoslash/style-rich.css";
@plugin "@tailwindcss/typography";
@plugin "areia";

@source "./dist/**/*.{mjs,js}";
@source "./src/components/**/*.{tsx}";
@source "./src/pages/**/*.{tsx,mdx}";

@layer base {
  * {
    --areia-code-block-bg: var(--areia-surface-muted);
    --shiki-dark-bg: var(--areia-code-block-bg) !important;
    --twoslash-popup-bg: var(--areia-surface-elevated);
    --twoslash-popup-color: var(--areia-text-default);
    --twoslash-border-color: var(--areia-border);
    --twoslash-docs-color: var(--areia-text-subtle);
    --twoslash-popup-shadow: var(--areia-shadow-lg);
  }

  html,
  body {
    @apply m-0 bg-areia-background;
  }

  #app,
  .imprensa-root,
  .imprensa-root-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
  }

  .imprensa-root {
    flex: 1 1 auto;
  }

  .imprensa-root-main {
    flex: 1 1 0;
    margin: 0;
  }

  html:not([data-theme-ready]) body {
    @apply invisible;
  }

  [data-ilha-slot],
  [data-router-view] {
    display: contents;
  }

  #imprensa-global-search-host[hidden] {
    display: none;
  }
}

@layer components {
  /*
   * Docs routes: one viewport (100dvh). Avoid 100vh min-height on body + 100dvh shell
   * (mobile URL bar ≈ 50px page scroll under the sidebar).
   */
  html.imprensa-docs-layout {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  html.imprensa-docs-layout body {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0 !important;
    overflow: hidden;
  }

  html.imprensa-docs-layout #app {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  html.imprensa-docs-layout .imprensa-root {
    flex: 1 1 0;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  html.imprensa-docs-layout .imprensa-root-main {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  .imprensa-docs-shell [data-slot="resizable"] {
    height: 100%;
    min-height: 0;
  }

  /* Areia sets overflow:hidden on panels — scroll happens on inner wrappers only. */
  .imprensa-docs-shell .imprensa-docs-sidebar-panel[data-slot="resizable-panel"],
  .imprensa-docs-shell .imprensa-docs-main-panel[data-slot="resizable-panel"] {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .imprensa-docs-sidebar-panel {
    @apply bg-areia-surface-elevated;
  }

  .imprensa-docs-sidebar-panel > * {
    height: 100%;
    min-height: 0;
  }

  .imprensa-docs-main-scroll {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .imprensa-tree-indent-0 {
    @apply ml-0;
  }
  .imprensa-tree-indent-1 {
    @apply ml-2;
  }
  .imprensa-tree-indent-2 {
    @apply ml-4;
  }
  .imprensa-tree-indent-3 {
    @apply ml-6;
  }
  .imprensa-tree-indent-4 {
    @apply ml-8;
  }
  .imprensa-tree-indent-5 {
    @apply ml-10;
  }
  .imprensa-tree-indent-6 {
    @apply ml-12;
  }

  .prose :where(h1, h2, h3, h4, h5, h6) {
    @apply font-semibold scroll-mt-20;
  }

  .prose
    :is(h1, h2, h3, h4, h5, h6)
    :where(a.heading-anchor):not(:where(.not-prose, .not-prose *)) {
    color: var(--areia-text-strong) !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
  }

  .prose
    :is(h1, h2, h3, h4, h5, h6)
    :where(a.heading-anchor:hover):not(:where(.not-prose, .not-prose *)) {
    color: var(--areia-text-strong) !important;
    text-decoration: underline !important;
    text-decoration-line: underline !important;
    text-underline-offset: 0.25rem;
  }

  .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {
    @apply rounded bg-areia-surface-muted px-1 py-0.5;
  }

  .prose :where(pre):not(:where(.not-prose, .not-prose *)) {
    @apply my-5 h-auto max-w-full overflow-x-auto rounded-md border border-areia-border p-4 leading-snug;
    background: var(--areia-code-block-bg) !important;
  }

  .prose :where(pre:not(.shiki) code):not(:where(.not-prose, .not-prose *)) {
    @apply block min-w-max whitespace-pre bg-transparent leading-snug;
  }

  .prose :where(pre.shiki code, pre code span):not(:where(.not-prose, .not-prose *)) {
    @apply bg-transparent leading-snug;
  }

  .prose :where(pre.shiki):not(:where(.not-prose, .not-prose *)),
  .prose :where(pre.shiki):not(:where(.not-prose, .not-prose *)) code {
    background-color: var(--areia-code-block-bg) !important;
  }
}

@layer utilities {
  .shiki {
    @apply !overflow-x-auto !overflow-y-hidden !leading-snug;
  }

  .shiki code {
    @apply block min-w-max overflow-visible border-0 bg-transparent p-0 leading-snug;
  }

  .shiki.twoslash,
  .shiki.twoslash code {
    overflow: visible !important;
  }

  .shiki .line {
    @apply inline-block min-w-full leading-snug;
  }

  .shiki .highlighted,
  .shiki .diff {
    @apply -mx-4 px-4;
  }

  .twoslash-popup-code,
  .twoslash-popup-code span {
    @apply !bg-transparent;
  }

  .twoslash-popup-code .shiki,
  .twoslash-popup-code pre.shiki,
  .twoslash-popup-code div.shiki {
    @apply m-0!;
  }

  html.dark .shiki,
  html.dark .shiki span {
    color: var(--shiki-dark) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }

  html.dark .shiki,
  html.dark .prose :where(pre.shiki):not(:where(.not-prose, .not-prose *)) {
    background-color: var(--areia-code-block-bg) !important;
  }

  /* night-owl-light blue (#4876d6) on #fbfbfb fails ~4.19:1 — darken for WCAG AA */
  html:not(.dark) .shiki.shiki-themes span[style*="4876D6"],
  html:not(.dark) .shiki.shiki-themes span[style*="4876d6"] {
    color: #3558a8 !important;
  }
}