@import "tailwindcss";

@layer components {
  /* Article content typography - inspired by DHH's clean style */
  .article-content {
    @apply text-gray-800 dark:text-gray-200;
  }

  .article-content p {
    margin-top: 3rem; /* 48px */
    margin-bottom: 3rem; /* 48px */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.9;
  }

  @media (min-width: 640px) {
    .article-content p {
      font-size: 1.25rem; /* sm:text-xl */
    }
  }

  /* First paragraph after a heading should have less top margin */
  .article-content h1 + p,
  .article-content h2 + p,
  .article-content h3 + p,
  .article-content h4 + p {
    margin-top: 1.5rem; /* 24px */
  }

  .article-content h1 {
    @apply text-3xl sm:text-4xl font-bold mt-12 mb-6 text-gray-900 dark:text-gray-100;
  }

  .article-content h2 {
    @apply text-2xl sm:text-3xl font-bold mt-10 mb-5 text-gray-900 dark:text-gray-100;
  }

  .article-content h3 {
    @apply text-xl sm:text-2xl font-bold mt-8 mb-4 text-gray-900 dark:text-gray-100;
  }

  .article-content h4 {
    @apply text-lg sm:text-xl font-bold mt-6 mb-3 text-gray-900 dark:text-gray-100;
  }

  .article-content ul,
  .article-content ol {
    @apply mb-7 pl-6 sm:pl-8;
  }

  .article-content li {
    @apply mb-3 text-lg sm:text-xl leading-relaxed;
    line-height: 1.7;
  }

  .article-content ul li {
    @apply list-disc;
  }

  .article-content ol li {
    @apply list-decimal;
  }

  .article-content a {
    @apply text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300;
  }

  .article-content strong {
    @apply font-semibold text-gray-900 dark:text-gray-100;
  }

  .article-content em {
    @apply italic;
  }

  /* Blockquotes in article content */
  .article-content blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 pl-6 my-8 text-lg sm:text-xl italic text-gray-700 dark:text-gray-300;
  }

  /* Code blocks in article content */
  .article-content pre {
    @apply bg-gray-50 dark:bg-gray-800 rounded-lg p-6 overflow-x-auto my-10 text-base font-mono;
  }

  .article-content pre code {
    @apply bg-transparent p-0 font-mono text-sm text-gray-800 dark:text-gray-200;
  }

  /* Handle syntax highlighted code blocks with nested divs */
  .article-content div.highlight {
    @apply my-12;
  }

  .article-content div.highlight pre {
    @apply bg-gray-50 dark:bg-gray-800 rounded-lg p-6 overflow-x-auto font-mono text-sm;
  }

  .article-content div.highlight code {
    @apply bg-transparent text-gray-800 dark:text-gray-200;
  }

  /* Syntax highlighting colors - using direct CSS instead of @apply */
  .article-content .highlight span.k,
  .article-content div.highlight span.k {
    color: rgb(147 51 234); /* purple-600 */
    font-weight: 600;
  }

  @media (prefers-color-scheme: dark) {
    .article-content .highlight span.k,
    .article-content div.highlight span.k {
      color: rgb(196 181 253); /* purple-400 */
    }
  }

  .article-content .highlight span.nf,
  .article-content div.highlight span.nf {
    color: rgb(37 99 235); /* blue-600 */
  }

  @media (prefers-color-scheme: dark) {
    .article-content .highlight span.nf,
    .article-content div.highlight span.nf {
      color: rgb(96 165 250); /* blue-400 */
    }
  }

  .article-content .highlight span.s2,
  .article-content div.highlight span.s2 {
    color: rgb(34 197 94); /* green-600 */
  }

  @media (prefers-color-scheme: dark) {
    .article-content .highlight span.s2,
    .article-content div.highlight span.s2 {
      color: rgb(134 239 172); /* green-400 */
    }
  }

  .article-content .highlight span.nb,
  .article-content div.highlight span.nb {
    color: rgb(249 115 22); /* orange-600 */
  }

  @media (prefers-color-scheme: dark) {
    .article-content .highlight span.nb,
    .article-content div.highlight span.nb {
      color: rgb(251 191 36); /* orange-400 */
    }
  }

  .article-content .highlight span.mi,
  .article-content div.highlight span.mi {
    color: rgb(8 145 178); /* cyan-600 */
  }

  @media (prefers-color-scheme: dark) {
    .article-content .highlight span.mi,
    .article-content div.highlight span.mi {
      color: rgb(103 232 249); /* cyan-400 */
    }
  }

  .article-content .highlight span.c1,
  .article-content div.highlight span.c1 {
    color: rgb(107 114 128); /* gray-500 */
    font-style: italic;
  }

  /* Also add styles for empty spans that might have no class */
  .article-content .highlight span:not([class]) {
    color: rgb(31 41 55); /* gray-800 */
  }

  @media (prefers-color-scheme: dark) {
    .article-content .highlight span:not([class]) {
      color: rgb(229 231 235); /* gray-200 */
    }
  }

  /* Also style code blocks that are just div > pre > code without highlight class */
  .article-content div:has(> pre > code) {
    @apply my-12;
  }

  .article-content div > pre > code {
    @apply block bg-gray-50 dark:bg-gray-800 rounded-lg p-6 overflow-x-auto font-mono text-sm;
  }

  /* Inline code in article content */
  .article-content code:not(pre code) {
    @apply bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-base font-mono text-gray-800 dark:text-gray-200;
  }

  /* Also handle inline code in paragraphs */
  .article-content p code {
    @apply bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm font-mono;
  }

  /* Images in article content */
  .article-content img {
    @apply rounded-lg my-8 max-w-full h-auto;
  }

  /* Keep the old prose styles for backwards compatibility */
  div.prose {
    font-size: 1.6rem;
  }

  /* Code blocks styling for prose */
  .prose pre {
    @apply bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto my-4 border border-gray-200 dark:border-gray-700;
  }

  .prose pre code {
    @apply bg-transparent p-0 text-sm font-mono text-gray-800 dark:text-gray-200;
  }

  /* Inline code styling */
  .prose code:not(pre code) {
    @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono text-pink-600 dark:text-pink-400;
  }

  /* Blockquote styling */
  .prose blockquote {
    @apply border-l-4 border-indigo-500 dark:border-indigo-400 pl-4 my-4 italic text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800/50 py-2 pr-4 rounded-r-lg;
  }

  /* Syntax highlighting for code blocks with classes */
  .prose .language-ruby .k,
  .prose .language-javascript .k,
  .prose .language-python .k {
    @apply text-purple-600 dark:text-purple-400 font-semibold;
  }

  .prose .language-ruby .nf,
  .prose .language-javascript .nf,
  .prose .language-python .nf {
    @apply text-blue-600 dark:text-blue-400;
  }

  .prose .language-ruby .s2,
  .prose .language-javascript .s2,
  .prose .language-python .s2 {
    @apply text-green-600 dark:text-green-400;
  }

  .prose .language-ruby .nb,
  .prose .language-javascript .nb,
  .prose .language-python .nb {
    @apply text-orange-600 dark:text-orange-400;
  }

  /* Preserve whitespace in pre elements */
  .prose pre {
    white-space: pre;
  }

  /* Style for code blocks with line numbers or structure */
  .prose pre code {
    display: block;
    line-height: 1.5;
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/* Article content typography styles */
.article-content {
  color: rgb(31 41 55); /* text-gray-800 */
  /* Prevent content from expanding beyond container on mobile */
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
}

@media (prefers-color-scheme: dark) {
  .article-content {
    color: rgb(229 231 235); /* text-gray-200 */
  }
}

.article-content p {
  margin-top: 2.4rem; /* ~38px - 80% of 48px */
  margin-bottom: 2.4rem; /* ~38px - 80% of 48px */
  font-size: 1.125rem; /* text-lg */
  line-height: 1.9;
}

@media (min-width: 640px) {
  .article-content p {
    font-size: 1.25rem; /* sm:text-xl */
  }
}

/* First paragraph after a heading should have less top margin */
.article-content h1 + p,
.article-content h2 + p,
.article-content h3 + p,
.article-content h4 + p {
  margin-top: 1.5rem; /* 24px */
}

.article-content h1 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: rgb(17 24 39); /* text-gray-900 */
}

@media (min-width: 640px) {
  .article-content h1 {
    font-size: 2.25rem; /* sm:text-4xl */
  }
}

@media (prefers-color-scheme: dark) {
  .article-content h1 {
    color: rgb(243 244 246); /* text-gray-100 */
  }
}

.article-content h2 {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  color: rgb(17 24 39);
}

@media (min-width: 640px) {
  .article-content h2 {
    font-size: 1.875rem; /* sm:text-3xl */
  }
}

@media (prefers-color-scheme: dark) {
  .article-content h2 {
    color: rgb(243 244 246);
  }
}

.article-content h3 {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: rgb(17 24 39);
}

@media (min-width: 640px) {
  .article-content h3 {
    font-size: 1.5rem; /* sm:text-2xl */
  }
}

@media (prefers-color-scheme: dark) {
  .article-content h3 {
    color: rgb(243 244 246);
  }
}

.article-content h4 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: rgb(17 24 39);
}

@media (min-width: 640px) {
  .article-content h4 {
    font-size: 1.25rem; /* sm:text-xl */
  }
}

@media (prefers-color-scheme: dark) {
  .article-content h4 {
    color: rgb(243 244 246);
  }
}

.article-content ul,
.article-content ol {
  margin-bottom: 1.75rem;
  padding-left: 1.5rem;
}

@media (min-width: 640px) {
  .article-content ul,
  .article-content ol {
    padding-left: 2rem;
  }
}

.article-content li {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.7;
}

@media (min-width: 640px) {
  .article-content li {
    font-size: 1.25rem;
  }
}

.article-content ul li {
  list-style-type: disc;
}

.article-content ol li {
  list-style-type: decimal;
}

.article-content a {
  color: rgb(37 99 235); /* text-blue-600 */
  text-decoration: underline;
}

.article-content a:hover {
  color: rgb(30 64 175); /* text-blue-800 */
}

@media (prefers-color-scheme: dark) {
  .article-content a {
    color: rgb(96 165 250); /* text-blue-400 */
  }

  .article-content a:hover {
    color: rgb(147 197 253); /* text-blue-300 */
  }
}

.article-content strong {
  font-weight: 600;
  color: rgb(17 24 39);
}

@media (prefers-color-scheme: dark) {
  .article-content strong {
    color: rgb(243 244 246);
  }
}

.article-content em {
  font-style: italic;
}

/* Blockquotes in article content */
.article-content blockquote {
  border-left-width: 4px;
  border-left-color: rgb(209 213 219); /* border-gray-300 */
  padding-left: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 1.125rem;
  font-style: italic;
  color: rgb(75 85 99); /* text-gray-700 */
}

@media (min-width: 640px) {
  .article-content blockquote {
    font-size: 1.25rem;
  }
}

@media (prefers-color-scheme: dark) {
  .article-content blockquote {
    border-left-color: rgb(75 85 99); /* border-gray-600 */
    color: rgb(209 213 219); /* text-gray-300 */
  }
}

/* Code blocks in article content */
.article-content pre {
  background-color: rgb(249 250 251); /* bg-gray-50 */
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  font-size: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Force wrapping for long lines */
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

@media (prefers-color-scheme: dark) {
  .article-content pre {
    background-color: rgb(31 41 55); /* bg-gray-800 */
  }
}

.article-content pre code {
  background-color: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 0.875rem;
  color: rgb(31 41 55);
  white-space: inherit;
  word-break: inherit;
  overflow-wrap: inherit;
}

@media (prefers-color-scheme: dark) {
  .article-content pre code {
    color: rgb(229 231 235);
  }
}

/* Handle syntax highlighted code blocks with nested divs */
.article-content div.highlight {
  margin-top: 3rem;
  margin-bottom: 3rem;
  max-width: 100%;
  overflow: hidden;
}

.article-content div.highlight pre {
  background-color: rgb(249 250 251);
  border-radius: 0.5rem;
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

@media (prefers-color-scheme: dark) {
  .article-content div.highlight pre {
    background-color: rgb(31 41 55);
  }
}

.article-content div.highlight code {
  background-color: transparent;
  color: rgb(31 41 55);
}

@media (prefers-color-scheme: dark) {
  .article-content div.highlight code {
    color: rgb(229 231 235);
  }
}

/* Also style code blocks that are just div > pre > code without highlight class */
.article-content div:has(> pre > code) {
  margin-top: 3rem;
  margin-bottom: 3rem;
  max-width: 100%;
  overflow: hidden;
}

.article-content div > pre > code {
  display: block;
  background-color: rgb(249 250 251);
  border-radius: 0.5rem;
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

@media (prefers-color-scheme: dark) {
  .article-content div > pre > code {
    background-color: rgb(31 41 55);
  }
}

/* Inline code in article content */
.article-content code:not(pre code) {
  background-color: rgb(243 244 246); /* bg-gray-100 */
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgb(31 41 55);
}

@media (prefers-color-scheme: dark) {
  .article-content code:not(pre code) {
    background-color: rgb(31 41 55); /* bg-gray-800 */
    color: rgb(229 231 235);
  }
}

/* Also handle inline code in paragraphs */
.article-content p code {
  background-color: rgb(243 244 246);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  .article-content p code {
    background-color: rgb(31 41 55);
  }
}

/* Images in article content */
.article-content img {
  border-radius: 0.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 100%;
  height: auto;
}

/* Tables in article content - prevent overflow on mobile */
.article-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
}

.article-content th,
.article-content td {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(209 213 219);
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  .article-content th,
  .article-content td {
    border-color: rgb(75 85 99);
  }
}

.article-content th {
  background-color: rgb(243 244 246);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .article-content th {
    background-color: rgb(55 65 81);
  }
}

/* Catch-all for any element that might cause horizontal overflow */
.article-content > * {
  max-width: 100%;
}
/* Command Palette - Refined Slate Design System */

/* ===== Light Mode ===== */
ninja-keys {
  --ninja-width: 600px;
  --ninja-backdrop-filter: blur(16px) saturate(180%);
  --ninja-overflow-background: rgba(15, 23, 42, 0.4);
  --ninja-text-color: rgb(30, 41, 59); /* slate-800 */
  --ninja-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ninja-font-size: 15px;

  /* Modal */
  --ninja-modal-background: rgba(255, 255, 255, 0.95);
  --ninja-modal-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.05),
    0 4px 6px -1px rgba(15, 23, 42, 0.08),
    0 20px 25px -5px rgba(15, 23, 42, 0.12),
    0 40px 60px -12px rgba(15, 23, 42, 0.15);

  /* Input */
  --ninja-input-background: rgb(248, 250, 252); /* slate-50 */
  --ninja-input-placeholder-color: rgb(148, 163, 184); /* slate-400 */
  --ninja-input-text-color: rgb(15, 23, 42); /* slate-900 */
  --ninja-input-border-color: rgb(226, 232, 240); /* slate-200 */

  /* Items */
  --ninja-item-background: transparent;
  --ninja-item-hover-background: rgb(248, 250, 252); /* slate-50 */
  --ninja-item-active-background: rgb(241, 245, 249); /* slate-100 */
  --ninja-item-text-color: rgb(51, 65, 85); /* slate-700 */
  --ninja-item-keyword-color: rgb(100, 116, 139); /* slate-500 */

  /* Selected */
  --ninja-selected-background: rgb(241, 245, 249); /* slate-100 */
  --ninja-selected-text-color: rgb(15, 23, 42); /* slate-900 */

  /* Groups */
  --ninja-group-text-color: rgb(148, 163, 184); /* slate-400 */
  --ninja-group-font-size: 11px;

  /* Footer */
  --ninja-footer-background: rgb(248, 250, 252); /* slate-50 */
  --ninja-footer-text-color: rgb(100, 116, 139); /* slate-500 */

  /* Scrollbar */
  --ninja-scrollbar-background: transparent;
  --ninja-scrollbar-thumb: rgb(203, 213, 225); /* slate-300 */

  /* Icons */
  --ninja-icon-color: rgb(148, 163, 184); /* slate-400 */
  --ninja-icon-size: 20px;

  /* Actions */
  --ninja-action-text-color: rgb(51, 65, 85); /* slate-700 */
  --ninja-action-font-weight: 500;

  /* Keyboard shortcuts */
  --ninja-kbd-background: rgb(255, 255, 255);
  --ninja-kbd-text-color: rgb(71, 85, 105); /* slate-600 */
}

/* ===== Dark Mode ===== */
.dark ninja-keys {
  --ninja-backdrop-filter: blur(20px) saturate(180%);
  --ninja-overflow-background: rgba(0, 0, 0, 0.6);
  --ninja-text-color: rgb(226, 232, 240); /* slate-200 */

  /* Modal */
  --ninja-modal-background: rgba(15, 23, 42, 0.9); /* slate-900 with transparency */
  --ninja-modal-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.1),
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 20px 25px -5px rgba(0, 0, 0, 0.4),
    0 40px 80px -20px rgba(0, 0, 0, 0.5);

  /* Input */
  --ninja-input-background: rgba(51, 65, 85, 0.5); /* slate-700 */
  --ninja-input-placeholder-color: rgb(148, 163, 184); /* slate-400 */
  --ninja-input-text-color: rgb(248, 250, 252); /* slate-50 */
  --ninja-input-border-color: rgba(71, 85, 105, 0.5); /* slate-600 */

  /* Items */
  --ninja-item-background: transparent;
  --ninja-item-hover-background: rgba(51, 65, 85, 0.5); /* slate-700 */
  --ninja-item-active-background: rgba(71, 85, 105, 0.5); /* slate-600 */
  --ninja-item-text-color: rgb(226, 232, 240); /* slate-200 */
  --ninja-item-keyword-color: rgb(148, 163, 184); /* slate-400 */

  /* Selected */
  --ninja-selected-background: rgba(51, 65, 85, 0.7); /* slate-700 */
  --ninja-selected-text-color: rgb(248, 250, 252); /* slate-50 */

  /* Groups */
  --ninja-group-text-color: rgb(148, 163, 184); /* slate-400 */

  /* Footer */
  --ninja-footer-background: rgba(30, 41, 59, 0.8); /* slate-800 */
  --ninja-footer-text-color: rgb(203, 213, 225); /* slate-300 */

  /* Scrollbar */
  --ninja-scrollbar-background: transparent;
  --ninja-scrollbar-thumb: rgb(71, 85, 105); /* slate-600 */

  /* Icons */
  --ninja-icon-color: rgb(203, 213, 225); /* slate-300 */

  /* Actions */
  --ninja-action-text-color: rgb(226, 232, 240); /* slate-200 */

  /* Keyboard shortcuts */
  --ninja-kbd-background: rgba(51, 65, 85, 0.8); /* slate-700 */
  --ninja-kbd-text-color: rgb(226, 232, 240); /* slate-200 */
}

/* ===== Modal Structure ===== */
ninja-keys::part(ninja-modal) {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.dark ninja-keys::part(ninja-modal) {
  border: 1px solid rgba(148, 163, 184, 0.15);
}

ninja-keys::part(ninja-modal-content) {
  background: var(--ninja-modal-background);
}

/* ===== Header / Breadcrumb ===== */
ninja-keys::part(ninja-header) {
  padding: 12px 16px 0;
}

ninja-keys::part(ninja-breadcrumb),
ninja-keys .breadcrumb,
ninja-keys::part(breadcrumb-home) {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgb(241, 245, 249); /* slate-100 */
  color: rgb(71, 85, 105); /* slate-600 */
  border: 1px solid rgb(226, 232, 240); /* slate-200 */
  transition: all 0.15s ease;
}

.dark ninja-keys::part(ninja-breadcrumb),
.dark ninja-keys .breadcrumb,
.dark ninja-keys::part(breadcrumb-home) {
  background: rgba(51, 65, 85, 0.6); /* slate-700 */
  color: rgb(203, 213, 225); /* slate-300 */
  border: 1px solid rgba(71, 85, 105, 0.5); /* slate-600 */
}

/* ===== Search Input ===== */
ninja-keys::part(ninja-input-wrapper) {
  padding: 12px 16px 8px;
}

ninja-keys::part(ninja-input) {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 10px;
  background: var(--ninja-input-background);
  color: var(--ninja-input-text-color);
  border: 1px solid var(--ninja-input-border-color);
  outline: none;
  transition: all 0.2s ease;
}

ninja-keys::part(ninja-input):focus {
  border-color: rgb(20, 184, 166); /* teal-500 */
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.dark ninja-keys::part(ninja-input):focus {
  border-color: rgb(45, 212, 191); /* teal-400 */
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

ninja-keys::part(ninja-input)::placeholder {
  color: var(--ninja-input-placeholder-color);
}

/* ===== Results List ===== */
ninja-keys::part(ninja-list-wrapper) {
  max-height: 360px;
  padding: 4px 8px;
}

ninja-keys::part(ninja-list) {
  padding: 0;
}

/* ===== Action Items ===== */
ninja-keys::part(ninja-action) {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin: 2px 0;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.4;
  border-radius: 8px;
  background: var(--ninja-item-background);
  color: var(--ninja-item-text-color);
  transition: all 0.15s ease;
  cursor: pointer;
}

ninja-keys::part(ninja-action):hover {
  background: var(--ninja-item-hover-background);
}

ninja-keys::part(ninja-action-selected) {
  background: var(--ninja-selected-background);
  color: var(--ninja-selected-text-color);
}

.dark ninja-keys::part(ninja-action-selected) {
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.2); /* teal-400 accent */
}

/* ===== Article Icons ===== */
ninja-keys .ninja-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
}

ninja-keys img.ninja-icon {
  background: rgb(241, 245, 249); /* slate-100 */
  padding: 2px;
}

.dark ninja-keys img.ninja-icon {
  background: rgba(51, 65, 85, 0.5); /* slate-700 */
}

ninja-keys svg.ninja-icon {
  color: rgb(148, 163, 184); /* slate-400 */
  padding: 2px;
}

.dark ninja-keys svg.ninja-icon {
  color: rgb(148, 163, 184); /* slate-400 */
}

/* ===== Footer ===== */
ninja-keys::part(ninja-footer) {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 450;
  background: var(--ninja-footer-background);
  color: var(--ninja-footer-text-color);
  border-top: 1px solid rgb(226, 232, 240); /* slate-200 */
}

.dark ninja-keys::part(ninja-footer) {
  border-top: 1px solid rgba(51, 65, 85, 0.6); /* slate-700 */
}

/* ===== Keyboard Shortcuts ===== */
ninja-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin: 0 3px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 5px;
  background: var(--ninja-kbd-background);
  color: var(--ninja-kbd-text-color);
  border: 1px solid rgb(203, 213, 225); /* slate-300 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.dark ninja-keys kbd {
  border: 1px solid rgba(71, 85, 105, 0.6); /* slate-600 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* Footer hint labels */
ninja-keys::part(ninja-footer) span {
  color: var(--ninja-footer-text-color);
  font-weight: 450;
}

/* ===== Scrollbar ===== */
ninja-keys::part(ninja-list-wrapper)::-webkit-scrollbar {
  width: 6px;
}

ninja-keys::part(ninja-list-wrapper)::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

ninja-keys::part(ninja-list-wrapper)::-webkit-scrollbar-thumb {
  background: var(--ninja-scrollbar-thumb);
  border-radius: 3px;
}

ninja-keys::part(ninja-list-wrapper)::-webkit-scrollbar-thumb:hover {
  background: rgb(148, 163, 184); /* slate-400 */
}

.dark ninja-keys::part(ninja-list-wrapper)::-webkit-scrollbar-thumb:hover {
  background: rgb(100, 116, 139); /* slate-500 */
}

/* ===== Empty State ===== */
ninja-keys::part(ninja-list-empty) {
  padding: 32px 16px;
  text-align: center;
  color: var(--ninja-group-text-color);
  font-size: 14px;
}

/* ===== Group Headers ===== */
ninja-keys::part(ninja-group-header) {
  padding: 8px 12px 4px;
  font-size: var(--ninja-group-font-size);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ninja-group-text-color);
}

/* ===== Animation ===== */
@keyframes commandPaletteIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

ninja-keys::part(ninja-modal) {
  animation: commandPaletteIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Highlight Colors */
.highlight-yellow {
  background-color: rgba(254, 240, 138, 0.7);
  border-bottom: 2px solid rgb(234, 179, 8);
  padding: 1px 0;
}

.highlight-green {
  background-color: rgba(187, 247, 208, 0.7);
  border-bottom: 2px solid rgb(34, 197, 94);
  padding: 1px 0;
}

.highlight-blue {
  background-color: rgba(191, 219, 254, 0.7);
  border-bottom: 2px solid rgb(59, 130, 246);
  padding: 1px 0;
}

.highlight-pink {
  background-color: rgba(251, 207, 232, 0.7);
  border-bottom: 2px solid rgb(236, 72, 153);
  padding: 1px 0;
}

.highlight-purple {
  background-color: rgba(221, 214, 254, 0.7);
  border-bottom: 2px solid rgb(139, 92, 246);
  padding: 1px 0;
}

/* Dark mode highlight colors */
@media (prefers-color-scheme: dark) {
  .highlight-yellow {
    background-color: rgba(202, 138, 4, 0.4);
    border-bottom-color: rgb(234, 179, 8);
  }

  .highlight-green {
    background-color: rgba(22, 163, 74, 0.4);
    border-bottom-color: rgb(34, 197, 94);
  }

  .highlight-blue {
    background-color: rgba(37, 99, 235, 0.4);
    border-bottom-color: rgb(59, 130, 246);
  }

  .highlight-pink {
    background-color: rgba(219, 39, 119, 0.4);
    border-bottom-color: rgb(236, 72, 153);
  }

  .highlight-purple {
    background-color: rgba(124, 58, 237, 0.4);
    border-bottom-color: rgb(139, 92, 246);
  }
}

/* Highlight menu positioning */
.highlight-menu {
  position: absolute;
  z-index: 50;
}

/* Color picker buttons */
.highlight-color-btn {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.highlight-color-btn:hover {
  transform: scale(1.15);
}

.highlight-color-btn.bg-yellow-400 { background-color: rgb(250, 204, 21); }
.highlight-color-btn.bg-green-400 { background-color: rgb(74, 222, 128); }
.highlight-color-btn.bg-blue-400 { background-color: rgb(96, 165, 250); }
.highlight-color-btn.bg-pink-400 { background-color: rgb(244, 114, 182); }
.highlight-color-btn.bg-purple-400 { background-color: rgb(192, 132, 252); }
/* Syntax highlighting colors for code blocks */
.article-content .highlight span.k,
.article-content div.highlight span.k {
  color: rgb(147 51 234); /* purple-600 */
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .article-content .highlight span.k,
  .article-content div.highlight span.k {
    color: rgb(196 181 253); /* purple-400 */
  }
}

.article-content .highlight span.nf,
.article-content div.highlight span.nf {
  color: rgb(37 99 235); /* blue-600 */
}

@media (prefers-color-scheme: dark) {
  .article-content .highlight span.nf,
  .article-content div.highlight span.nf {
    color: rgb(96 165 250); /* blue-400 */
  }
}

.article-content .highlight span.s2,
.article-content div.highlight span.s2 {
  color: rgb(34 197 94); /* green-600 */
}

@media (prefers-color-scheme: dark) {
  .article-content .highlight span.s2,
  .article-content div.highlight span.s2 {
    color: rgb(134 239 172); /* green-400 */
  }
}

.article-content .highlight span.nb,
.article-content div.highlight span.nb {
  color: rgb(249 115 22); /* orange-600 */
}

@media (prefers-color-scheme: dark) {
  .article-content .highlight span.nb,
  .article-content div.highlight span.nb {
    color: rgb(251 191 36); /* orange-400 */
  }
}

.article-content .highlight span.mi,
.article-content div.highlight span.mi {
  color: rgb(8 145 178); /* cyan-600 */
}

@media (prefers-color-scheme: dark) {
  .article-content .highlight span.mi,
  .article-content div.highlight span.mi {
    color: rgb(103 232 249); /* cyan-400 */
  }
}

.article-content .highlight span.c1,
.article-content div.highlight span.c1 {
  color: rgb(107 114 128); /* gray-500 */
  font-style: italic;
}

/* Also add styles for empty spans that might have no class */
.article-content .highlight span:not([class]) {
  color: rgb(31 41 55); /* gray-800 */
}

@media (prefers-color-scheme: dark) {
  .article-content .highlight span:not([class]) {
    color: rgb(229 231 235); /* gray-200 */
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */