@config "../../../tailwind.config.cjs";
@import "tailwindcss";
@plugin "daisyui";
@plugin "@tailwindcss/typography";
@import "prismjs/themes/prism-tomorrow.css";

/* ═══════════════  Core Affordance & Meta Utilities  ═══════════════ */
@layer components {
  .spec-note-soft     { @apply italic text-gray-500 border-b border-dotted border-gray-300 cursor-help; }
  .spec-note-subtle   { @apply text-gray-400 border-b border-dashed border-gray-300 cursor-help; }
  .spec-note-liminal  { @apply underline decoration-dotted decoration-gray-400 text-slate-500 italic cursor-help; }
  .spec-note-archival { @apply uppercase tracking-wide text-xs text-gray-600 border-b border-gray-400 cursor-help; }
  .spec-note-ghost    { @apply italic underline decoration-dotted decoration-gray-400 text-gray-400 cursor-help; }
  .silence-node       { @apply h-screen bg-white; }
  .push-up            { @apply -mt-20; }
  .push-left          { @apply -ml-16; }
  .rotate-90          { @apply transform rotate-90 origin-top-left block; }
  .mirror-x           { @apply transform -scale-x-100 block; }
}

/* ═══════════════  Typographic & Color Signifiers  ═══════════════ */
@layer components {
  .slate    { @apply text-slate-500; }
  .gray     { @apply text-gray-500; }
  .zinc     { @apply text-zinc-500; }
  .neutral  { @apply text-neutral-500; }
  .stone    { @apply text-stone-500; }
  .red      { @apply text-red-500; }
  .orange   { @apply text-orange-500; }
  .amber    { @apply text-amber-500; }
  .yellow   { @apply text-yellow-500; }
  .lime     { @apply text-lime-500; }
  .green    { @apply text-green-500; }
  .emerald  { @apply text-emerald-500; }
  .teal     { @apply text-teal-500; }
  .cyan     { @apply text-cyan-500; }
  .sky      { @apply text-sky-500; }
  .blue     { @apply text-blue-500; }
  .indigo   { @apply text-indigo-500; }
  .violet   { @apply text-violet-500; }
  .purple   { @apply text-purple-500; }
  .fuchsia  { @apply text-fuchsia-500; }
  .pink     { @apply text-pink-500; }
  .rose     { @apply text-rose-500; }
  .blackout { @apply text-black bg-black; }
}

/* ═══════════════  Behavior, Animation, & Embeds  ═══════════════ */
@layer components {
  .flicker     { @apply animate-pulse; }
  .audio-embed { @apply my-4 block; }
  .qr-code     { @apply my-4 block w-32 h-32; }
}

/* ═══════════════  Enhanced Footnote Popover & Annotation System  ═══════════════ */
@layer components {
  /* Core annotation reference container */
  .annotation-ref {
    @apply relative inline-block;
  }
  
  /* Inline footnote anchor styling - matches JavaScript output */
  .annotation-anchor {
    @apply px-1 text-blue-700 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-300 
           underline decoration-dotted hover:text-blue-900 transition-colors duration-150;
  }
  
  /* Enhanced popover with improved positioning and animation */
  .annotation-popup {
    @apply absolute left-1/2 transform -translate-x-1/2 top-7 z-50 max-w-sm
           bg-white/95 backdrop-blur-sm border border-gray-200 shadow-xl rounded-xl p-4
           text-sm text-gray-900 leading-relaxed
           opacity-0 pointer-events-none transition-all duration-200 ease-in-out
           translate-y-1;
  }
  
  /* Popover content styling */
  .annotation-popup p {
    @apply mb-3 last:mb-0;
  }
  
  .annotation-popup blockquote {
    @apply pl-4 border-l-4 border-gray-300 italic text-gray-600 mb-3 bg-gray-50/50 py-2 rounded;
  }
  
  .annotation-popup a {
    @apply text-blue-600 underline hover:text-blue-800 transition-colors;
  }
  
  .annotation-popup code {
    @apply bg-gray-100 rounded px-1 py-0.5 text-xs font-mono text-gray-800;
  }
  
  /* Source paragraph styling in popover */
  .annotation-popup .footnote-source {
    @apply text-xs text-gray-500 mt-2 pt-2 border-t border-gray-200 font-medium;
  }
  
  /* Popover activation states with enhanced animation */
  .annotation-ref:hover .annotation-popup,
  .annotation-ref:focus-within .annotation-popup {
    @apply opacity-100 pointer-events-auto translate-y-0;
  }
  
  /* Mobile-responsive popover positioning */
  @media (max-width: 640px) {
    .annotation-popup {
      @apply fixed inset-x-4 bottom-4 mx-auto transform-none max-w-[90vw];
    }
  }
}

/* ═══════════════  Enhanced Footnote Targeting & Scrolling  ═══════════════ */
@layer components {
  /* Calculate actual header height dynamically */
  :root {
    --header-height: 5rem; /* Conservative estimate: py-4 (2rem) + text-3xl + nav */
  }
  
  /* Enhanced scroll margin for all footnote-related elements */
  [id^="fn"], [id^="fnref"],
  .footnote-item, .annotation-anchor, .footnote-local,
  .footnote-enhanced, .footnote-ref {
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
  
  /* Smooth scroll behavior for footnote navigation */
  html {
    scroll-behavior: smooth;
  }
  
  /* Enhanced target highlighting for footnote navigation */
  [id^="fn"]:target,
  [id^="fnref"]:target {
    border-radius: 0.375rem;
    box-shadow: 0 0 0 2px rgb(147 197 253 / 0.5);
    animation: footnote-highlight 3s ease-in-out;
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
  
  @keyframes footnote-highlight {
    0% { background-color: rgb(219 234 254 / 0.8); }
    50% { background-color: rgb(219 234 254 / 0.4); }
    100% { background-color: transparent; }
  }
  
  /* Ensure footnote containers have proper positioning context */
  .footnote-local {
    position: relative;
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
  
  /* Enhanced backref positioning for better targeting */
  .footnote-backref {
    @apply ml-2 text-gray-400 text-xs no-underline hover:text-gray-700 
           transition-colors inline-flex items-center;
    /* Ensure backref links maintain proper targeting */
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
  
  /* Responsive header height adjustments */
  @media (max-width: 640px) {
    :root {
      --header-height: 4rem; /* Smaller header on mobile */
    }
  }
  
  @media (min-width: 1280px) {
    :root {
      --header-height: 5.5rem; /* Account for larger text on XL screens */
    }
  }
  
  /* Enhanced footnote section targeting */
  .footnotes-hybrid {
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
  
  /* Ensure proper targeting for standard footnote lists */
  .footnotes-list li {
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
  
  /* Focus management for keyboard navigation */
  [id^="fn"]:focus,
  [id^="fnref"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgb(96 165 250 / 0.75);
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
  
  /* Accessibility: Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    
    [id^="fn"]:target,
    [id^="fnref"]:target {
      animation: none;
      @apply bg-blue-100 transition-none;
    }
  }
}

/* ——— Unified Footnote Aside + Local + Explanation ——— */
@layer components {
  /* Container that wraps definition + explanation */
  .footnote-aside {
    @apply my-8 text-sm leading-relaxed bg-gray-50 border-l-4 border-gray-300
           rounded-lg p-4;
  }

  /* Inner “local” wrapper for the citation */
  .footnote-aside .footnote-local {
    @apply flex justify-between items-start mb-3;
  }

  /* The actual citation content */
  .footnote-aside .footnote-content > p {
    @apply m-0 font-medium text-gray-900;
  }

  /* Back-reference link */
  .footnote-aside .footnote-backref {
    @apply ml-2 text-gray-500 text-xs no-underline hover:text-gray-700
           transition-colors;
  }

  /* Explanatory blockquote */
  .footnote-aside .footnote-explanation {
    @apply mb-0 pl-4 border-l-2 border-dashed border-gray-300 text-gray-700;
  }

  /* Footer inside the explanation */
  .footnote-aside .footnote-explanation footer {
    @apply mt-2 pt-2 border-t border-gray-200 text-xs text-gray-500;
  }
}


/* ═══════════════  Standard Footnote Enhancement (for hybrid compatibility)  ═══════════════ */
@layer components {
  /* Enhanced standard footnote section */
  .footnotes-hybrid {
    @apply mt-8 pt-6 border-t border-gray-200;
  }
  
  /* Enhanced footnote items from JavaScript renderer */
  .footnote-enhanced {
    @apply mb-3 text-sm leading-relaxed;
  }
  
  /* Standard footnote list styling */
  .footnotes-list {
    @apply space-y-2;
  }
  
  /* Standard footnote item enhancements */
  .footnote-item {
    @apply relative pl-2 hover:bg-gray-50 rounded transition-colors;
  }
  
  /* Standard footnote reference link styling */
  .footnote-ref a {
    @apply text-blue-600 hover:text-blue-800 transition-colors;
  }
}

/* ═══════════════  Accessibility Enhancements  ═══════════════ */
@layer components {
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .annotation-anchor {
      @apply border border-current;
    }
    
    .annotation-popup {
      @apply bg-white border-2 border-gray-900;
    }
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .annotation-popup {
      @apply transition-none;
    }
    
    html {
      scroll-behavior: auto;
    }
    
    [id^="fn"]:target,
    [id^="fnref"]:target {
      animation: none;
    }
  }
  
  /* Focus management for keyboard navigation */
  .annotation-anchor:focus {
    @apply ring-offset-2;
  }
}

/* ═══════════════  Link Visual Affordances (ALWAYS LAST)  ═══════════════ */
@layer components {
  .interlink::before {
    content: "↗ ";
    margin-right: 0.15rem;
    color: currentColor;
    font-size: 0.9em;
  }
  
  .external-link {
    @apply text-blue-600 underline hover:text-blue-800 transition-colors;
  }
}