@reference "tailwindcss";
@reference "@nuxt/ui";

@theme {
  /* Define the animation utility and its keyframes */
  --animate-blink: blink 1s steps(11) infinite;

  @keyframes blink {
    0% {
      opacity: 0;
    }
    0.1% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    50.1% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
}

/* ── Base Editor ─────────────────────────────────────────────────── */

.ProseMirror {
  @apply outline-none min-h-7 whitespace-pre-wrap break-words text-(--ui-text-main) leading-7 px-1;
}

.ProseMirror p {
  @apply m-0 text-pretty mb-4;
}

/* ── Decorators (Markdown syntax) ────────────────────────────────── */

/* All marker classes — both inline decorators and block markers —
 * share the same layout and transition properties for smooth hide/reveal. */
.md-decorator,
.md-heading-marker,
.md-task-marker,
.md-marker {
  white-space: nowrap;
  vertical-align: baseline;
  transition:
    opacity 250ms ease-in-out,
    letter-spacing 300ms ease-in-out,
    margin 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.md-decorator {
  /* Inline decorators (delimiters like **, *, `, ~~, [[, ((, ^^) */
  font-family: var(--ui-font-mono, ui-monospace, "SF Mono", monospace);
  @apply text-(--ui-text-muted) text-[0.85em] select-none;
  opacity: 0.4;
  letter-spacing: normal;
}

/* Compressed / Squeezed state when blurred in live-preview mode */
.md-decorator-hidden {
  opacity: 0;
  letter-spacing: -0.5em;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0px;
  margin-right: 0px;
  pointer-events: none;
}

/* ── Marks ───────────────────────────────────────────────────────── */

.md-strong {
  @apply font-semibold text-(--ui-text-highlight);
}
.md-em {
  @apply italic;
}
.md-code {
  @apply font-mono font-medium bg-muted text-highlighted px-1.5 py-0.5 rounded-md text-sm border border-muted;
}
.md-strike {
  @apply line-through text-(--ui-text-muted);
}
.md-highlight {
  @apply bg-yellow-400/20 dark:bg-yellow-400/30 px-1 py-0.5 rounded-sm;
}
.md-link {
  @apply text-(--ui-primary) border-b border-transparent hover:border-(--ui-primary) font-medium rounded-xs cursor-pointer transition-colors;
}

/* ── Chips (Page Refs, Block Refs, Tags) ─────────────────────────── */

/* Shared base to prevent line-height jumps when editing */
.md-page-ref,
.md-block-ref,
.md-tag {
  @apply inline px-1.5 py-px rounded-md border text-[0.9em] font-medium cursor-pointer transition-colors duration-200 align-baseline;
}

.md-page-ref {
  @apply bg-(--ui-primary)/10 text-(--ui-primary) border-(--ui-primary)/20 hover:bg-(--ui-primary)/20;
}
.md-page-ref-alias {
  @apply text-(--ui-text-muted) text-[0.85em];
}

.md-block-ref {
  @apply bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20 hover:bg-purple-500/20;
}

.md-tag {
  @apply bg-(--ui-success)/10 text-(--ui-success) border-(--ui-success)/20 hover:bg-(--ui-success)/20;
}

.md-ref-unresolved {
  @apply border-dashed border-(--ui-text-muted)/40;
}

/* ── Properties ──────────────────────────────────────────────────── */

.md-property-key {
  @apply font-semibold text-(--ui-primary);
}

/* Property lines — no spacing between them, but margin after the last one */
.ProseMirror .md-property {
  @apply m-0;
}

.ProseMirror .md-property:last-child {
  @apply mb-4;
}
.md-property-delimiter {
  @apply text-(--ui-border) mx-1 select-none;
}
.md-property-value {
  @apply text-(--ui-text-muted);
}

/* ── Headings ────────────────────────────────────────────────────── */

.md-heading-content {
  @apply text-(--ui-text-highlight) font-bold transition-colors duration-200;
}
.md-heading-content[data-heading-level="1"] {
  @apply text-4xl mb-8;
}
.md-heading-content[data-heading-level="2"] {
  @apply text-2xl mt-12 mb-6;
}
.md-heading-content[data-heading-level="3"] {
  @apply text-xl mt-8 mb-3;
}
.md-heading-content[data-heading-level="4"],
.md-heading-content[data-heading-level="5"],
.md-heading-content[data-heading-level="6"] {
  @apply text-lg mt-6 mb-2;
}

/* Keep the hash marks smaller and perfectly centered with the heading text */
.md-heading-marker {
  @apply text-(--ui-text-muted) opacity-40 font-mono text-[0.7em] mr-2 align-middle select-none;
}

/* ── Horizontal rules ──────────────────────────────────────────────── */

.md-hr {
  @apply flex items-center justify-center my-6 before:flex-1 before:border-t before:border-(--ui-border-accented) before:border-dashed after:flex-1 after:border-t after:border-(--ui-border-accented) after:border-dashed;
}

.md-hr-marker {
  @apply px-3 font-mono text-xs font-medium tracking-[0.4em] select-none text-(--ui-text-muted);
}

/* ── Tasks ───────────────────────────────────────────────────────── */

.md-task-marker {
  @apply font-semibold uppercase text-[0.75em] tracking-wider mr-2 px-1.5 py-px rounded-sm select-none;
  color: color-mix(in srgb, currentColor 60%, transparent);
}

/* Task lines — no spacing between them, but margin after the last one */
.ProseMirror .md-task {
  margin: 0;
}

.ProseMirror .md-task:last-child {
  margin-bottom: calc(var(--spacing) * 4);
}

/* Task markers are always visible — status is critical info, not just syntax */
.md-task-marker.md-decorator-hidden {
  opacity: 1;
  letter-spacing: 0.05em;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  margin-left: 0;
  margin-right: 0.5rem;
  pointer-events: none;
}

.md-task-content {
  @apply text-(--ui-text-main);
}

[data-task-state="TODO"] {
  @apply text-red-500/70;
}
[data-task-state="DOING"] {
  @apply text-yellow-500/80;
}
[data-task-state="DONE"] {
  @apply text-green-500/70;
}
[data-task-state="LATER"] {
  @apply text-gray-400;
}
[data-task-state="NOW"] {
  @apply text-blue-500/80;
}
[data-task-state="WAITING"] {
  @apply text-orange-500/80;
}
[data-task-state="CANCELLED"] {
  @apply text-gray-500/40 line-through;
}

/* ── Blockquote && Callouts ──────────────────────────────────────── */
.md-blockquote {
  @apply border-s-4 border-(--ui-border-accented) ps-4 italic my-5;
}

.md-callout {
  @apply border-s-4 ps-4 my-5;
}

.md-blockquote .md-marker,
.md-callout .md-marker {
  @apply text-(--ui-text-muted) opacity-40 font-mono text-[0.8em] px-1.5 py-px rounded-sm select-none;
}

[data-callout-type="NOTE"] {
  @apply border-blue-500/50 text-blue-600 dark:text-blue-400;
}
[data-callout-type="WARNING"] {
  @apply border-yellow-500/50 text-yellow-600 dark:text-yellow-400;
}
[data-callout-type="TIP"] {
  @apply border-green-500/50 text-green-600 dark:text-green-400;
}
[data-callout-type="DANGER"] {
  @apply border-red-500/50 text-red-600 dark:text-red-400;
}
[data-callout-type="INFO"] {
  @apply border-(--ui-primary)/50 text-(--ui-primary);
}

/* ── Code Blocks (CM6 Node View) ──────────────────────────────────── */

.cm-code-block {
  @apply my-5 rounded-md overflow-hidden border border-muted bg-muted;
  font-size: 0.875em;
}

.cm-code-block .cm-editor {
  outline: none;
}

.cm-code-block .cm-editor.cm-focused {
  outline: none;
}

.cm-code-block .cm-scroller {
  @apply font-mono;
  line-height: 1.5;
}

.cm-code-block .cm-gutters {
  @apply bg-(--ui-bg-elevated) border-r border-(--ui-border) text-(--ui-text-muted);
}

.cm-code-block .cm-activeLineGutter {
  @apply bg-(--ui-bg-elevated)/80;
}

.cm-code-block .cm-activeLine {
  background: transparent;
}

.cm-code-block .cm-content {
  @apply px-4 py-3 whitespace-pre-wrap;
  caret-color: currentColor;
}

.cm-code-block .cm-fence-marker {
  @apply text-(--ui-text-muted);
}

.cm-code-block-header {
  @apply flex items-center justify-between px-3 py-1.5 border-b border-(--ui-border) bg-(--ui-bg-elevated)/50;
}

.cm-code-block-lang-select {
  @apply appearance-none bg-transparent border-none text-(--ui-text-muted) text-xs font-mono cursor-pointer outline-none;
}

.cm-code-block-lang-select option {
  @apply bg-(--ui-bg-elevated) text-(--ui-text);
}

.cm-code-block-lang-select:hover {
  @apply text-(--ui-text);
}

.cm-code-block-delete-btn {
  @apply appearance-none bg-transparent border-none text-(--ui-text-muted) cursor-pointer text-sm leading-none p-0.5 rounded opacity-0 transition-opacity;
  font-family: inherit;
}

.cm-code-block:hover .cm-code-block-delete-btn {
  @apply opacity-100;
}

.cm-code-block-delete-btn:hover {
  @apply text-(--ui-error) bg-(--ui-bg-elevated);
}

/* ── Syntax Highlighting (Kanagawa-inspired) ──────────────────────── */

/* Define CSS variables for light/dark mode colors */
:root {
  --code-keyword: #8481a4;
  --code-string: #6f894e;
  --code-string2: #6f894e;
  --code-comment: #a6a69c;
  --code-number: #e46876;
  --code-atom: #c34043;
  --code-bool: #c34043;
  --code-null: #c34043;
  --code-type: #7fb4ca;
  --code-typeName: #7fb4ca;
  --code-className: #7fb4ca;
  --code-function: #7e9cd8;
  --code-definition: #7e9cd8;
  --code-variableName: #545464;
  --code-propertyName: #545464;
  --code-attributeName: #7e9cd8;
  --code-operator: #545464;
  --code-punctuation: #545464;
  --code-tag: #7e9cd8;
  --code-meta: #8481a4;
}

.dark {
  --code-keyword: #e6c384;
  --code-string: #98bb6c;
  --code-string2: #98bb6c;
  --code-comment: #727169;
  --code-number: #dca561;
  --code-atom: #e46876;
  --code-bool: #e46876;
  --code-null: #e46876;
  --code-type: #7e9cd8;
  --code-typeName: #7e9cd8;
  --code-className: #7e9cd8;
  --code-function: #7fb4ca;
  --code-definition: #7fb4ca;
  --code-variableName: #dcd7ba;
  --code-propertyName: #dcd7ba;
  --code-attributeName: #7fb4ca;
  --code-operator: #dcd7ba;
  --code-punctuation: #dcd7ba;
  --code-tag: #7fb4ca;
  --code-meta: #e6c384;
}

/* Apply colors to CM6 token classes */
.cm-code-block .tok-keyword {
  color: var(--code-keyword);
}
.cm-code-block .tok-string {
  color: var(--code-string);
}
.cm-code-block .tok-string2 {
  color: var(--code-string2);
}
.cm-code-block .tok-comment {
  color: var(--code-comment);
}
.cm-code-block .tok-number {
  color: var(--code-number);
}
.cm-code-block .tok-integer {
  color: var(--code-number);
}
.cm-code-block .tok-atom {
  color: var(--code-atom);
}
.cm-code-block .tok-bool {
  color: var(--code-bool);
}
.cm-code-block .tok-null {
  color: var(--code-null);
}
.cm-code-block .tok-type {
  color: var(--code-type);
}
.cm-code-block .tok-typeName {
  color: var(--code-typeName);
}
.cm-code-block .tok-className {
  color: var(--code-className);
}
.cm-code-block .tok-function {
  color: var(--code-function);
}
.cm-code-block .tok-definition {
  color: var(--code-definition);
}
.cm-code-block .tok-variableName {
  color: var(--code-variableName);
}
.cm-code-block .tok-propertyName {
  color: var(--code-propertyName);
}
.cm-code-block .tok-attributeName {
  color: var(--code-attributeName);
}
.cm-code-block .tok-operator {
  color: var(--code-operator);
}
.cm-code-block .tok-punctuation {
  color: var(--code-punctuation);
}
.cm-code-block .tok-tag {
  color: var(--code-tag);
}
.cm-code-block .tok-meta {
  color: var(--code-meta);
}

/* ── Tables ────────────────────────────────────────────────── */

.md-table {
  @apply my-2;
}

.md-table-hidden {
  display: none;
}

.md-table-rendered {
  @apply block w-full overflow-x-auto rounded-md;
}

.md-table-rendered table {
  @apply w-full border-separate border-spacing-0 text-sm rounded-md;
  table-layout: fixed;
}

.md-table-rendered th,
.md-table-rendered td {
  @apply py-3 px-4 text-left border-e border-b border-t border-(--ui-border);
}

.md-table-rendered th:first-child,
.md-table-rendered td:first-child {
  @apply border-s border-(--ui-border);
}

.md-table-rendered thead {
  @apply bg-(--ui-bg-elevated);
}

.md-table-rendered th {
  @apply font-semibold text-sm;
}

.md-table-rendered td {
  @apply align-top;
}

/* Inline content within table cells */
.md-table-rendered td code {
  @apply text-xs/5;
}

.md-table-rendered td p {
  @apply my-0 leading-6;
}

.md-table-rendered td ul,
.md-table-rendered td ol {
  @apply my-0 ps-4.5;
}

.md-table-rendered td li {
  @apply leading-6 my-0.5;
}

/* Rounded corners on corner cells (matches Nuxt UI prose style) */
.md-table-rendered thead tr:first-child th:first-child {
  @apply rounded-tl-md;
}

.md-table-rendered thead tr:first-child th:last-child {
  @apply rounded-tr-md;
}

.md-table-rendered tbody tr:last-child td:first-child {
  @apply rounded-bl-md;
}

.md-table-rendered tbody tr:last-child td:last-child {
  @apply rounded-br-md;
}

/* ── Inline Math ────────────────────────────────────────────────── */

.md-math-inline {
  @apply bg-(--ui-bg-elevated) rounded px-0.5 text-(--ui-text);
}

.md-math-error {
  @apply font-mono text-xs text-(--ui-error) bg-(--ui-error)/10 px-1.5 py-0.5 rounded;
  text-decoration: wavy underline;
  text-underline-offset: 2px;
}

.md-math-hidden {
  display: none;
}

.md-math-rendered {
  @apply inline-flex items-center px-1;
  cursor: pointer;
}

.md-math-rendered .katex {
  @apply text-sm;
}

/* Hide KaTeX MathML fallback (renders alongside katex-html if KaTeX CSS isn't loaded) */
.md-math-rendered .katex .katex-mathml {
  display: none;
}

/* ── Image ──────────────────────────────────────────────── */

.md-image-hidden {
  display: none;
}

.md-image-wrapper {
  @apply block my-2;
  cursor: pointer;
}

.md-image-rendered {
  @apply max-w-full h-auto rounded;
  max-height: 60vh;
  display: block;
}

@media (forced-colors: active) {
  .md-image-rendered {
    border: 1px solid ButtonText;
  }
}

/* ── Math Block ───────────────────────────────────────────── */

.math-block {
  @apply my-2 rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated);
}

.math-block-source {
  @apply px-4 py-3 font-mono text-sm;
  white-space: pre-wrap;
  line-height: 1.5;
  display: none;
}

.math-block-preview {
  @apply px-4 py-3;
  display: block;
}

.ProseMirror-focused .math-block-source {
  display: block;
}
.ProseMirror-focused .math-block-preview {
  display: none;
}

/* ── Gap Cursor ──────────────────────────────────────────────────── */
/* Appears before/after node views (code blocks, math) so the user can
   click into boundaries and arrow past them. */

.ProseMirror .ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: relative;
}

.ProseMirror .ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 20px;
  border-top: 1px solid var(--ui-text);
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

/* ── Accessibility ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .insertion-zone,
  .md-page-ref,
  .md-block-ref,
  .md-tag,
  .ProseMirror-gapcursor {
    transition: none;
    animation: none;
  }
}

@media (forced-colors: active) {
  .md-page-ref,
  .md-block-ref,
  .md-tag {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .md-ref-unresolved {
    border-style: dashed;
  }

  .md-code,
  .md-math-error {
    border: 1px solid ButtonText;
  }
}

/* ── Query widget (::query{...} results) ────────────────────────────── */

.md-query-block {
  @apply border-l-2 border-(--ui-border) pl-3 my-2;
}

.md-query-hidden {
  display: none;
}

.md-query-widget {
  display: inline-block;
  vertical-align: top;
  line-height: 0;
  min-width: 100%;
  font-size: 0.875rem;
}

.md-query-widget ~ .ProseMirror-trailingBreak,
.md-query-widget ~ .ProseMirror-separator {
  display: none;
}

.md-query-loading {
  @apply space-y-1.5 py-1;
}

.md-query-loading-item {
  @apply animate-pulse rounded-md bg-elevated h-7 w-full;
}

.md-query-list {
  @apply space-y-1 py-1;
}

.md-query-item {
  @apply block px-3 py-1.5 rounded-md text-sm text-muted
         hover:text-default hover:bg-elevated/50
         transition-colors duration-100 cursor-pointer no-underline;
}

.md-query-empty {
  @apply flex flex-col items-center justify-center gap-4 rounded-lg p-4
         ring ring-default bg-elevated/50 min-w-0 text-center;
}

.md-query-empty-icon {
  @apply size-10 text-xl;
}

.md-query-empty-title {
  @apply text-sm font-medium text-highlighted;
}

.md-query-empty-description {
  @apply text-xs text-muted;
}
