@import "tailwindcss";
@source inline("bg-sky-100 text-sky-900 dark:bg-sky-500/20 dark:text-sky-300 dark:border dark:border-sky-500/40");
@source inline("bg-amber-200 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200 dark:border dark:border-amber-500/40");
@source inline("bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200");
@source inline("bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200");

@custom-variant dark (&:is(.dark *));

@theme {
  --default-transition-duration: 75ms;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  /* Warm zinc overrides -- see Section 4 Neutral Palette */
  --color-zinc-50: #fafaf9;
  --color-zinc-100: #f5f4f4;
  --color-zinc-200: #e5e4e5;
  --color-zinc-300: #d6d4d7;
  --color-zinc-400: #a3a1a8;
  --color-zinc-500: #747178;
  --color-zinc-600: #555259;
  --color-zinc-700: #423f42;
  --color-zinc-800: #2a2729;
  --color-zinc-900: #1b181a;
  --color-zinc-950: #0c090b;

  --color-accent-50: #eef2ff;
  --color-accent-100: #e0e7ff;
  --color-accent-200: #c7d2fe;
  --color-accent-300: #a5b4fc;
  --color-accent-400: #818cf8;
  --color-accent-500: #6366f1;
  --color-accent-600: #4f46e5;
  --color-accent-700: #4338ca;
  --color-accent-800: #3730a3;
  --color-accent-900: #312e81;

  /* Lifted warm canvas background -- see Section 4 Surface Hierarchy */
  --color-canvas: #221f21;

  --animate-fade-in: fade-in 0.4s ease-out both;
  --animate-slide-up: slide-up 0.35s ease-out both;
  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
  --animate-pulse-soft: pulse-soft 1.6s ease-in-out infinite;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-fade {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  from {
    background-position: -200% 0;
  }

  to {
    background-position: 200% 0;
  }
}

@keyframes pulse-soft {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }

  html,
  body {
    min-height: 100vh;
  }

  body {
    @apply bg-canvas font-sans text-zinc-100 antialiased;
    font-weight: 450;
    overflow-x: clip;
  }

  html:not(.dark) body {
    @apply text-zinc-900;
    background-color: var(--color-zinc-100);
    background-image: none;
  }

  html {
    color-scheme: dark;
  }

  html:not(.dark) {
    color-scheme: light;
  }

  *:focus-visible {
    @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
  }

  ::selection {
    @apply bg-accent-500/[0.28] text-accent-50;
  }

  *,
  ::before,
  ::after {
    border-color: var(--color-zinc-200, currentcolor);
  }

  h1 {
    @apply mb-6 text-3xl font-bold;
  }

  h2 {
    @apply mt-6 mb-4 text-2xl font-semibold;
  }

  h3 {
    @apply mt-4 mb-3 text-lg font-semibold;
  }

  p {
    @apply mb-4;
  }

  a {
    @apply text-accent-600 transition-colors hover:text-accent-500 dark:text-accent-400 dark:hover:text-accent-300;
  }

  button:not(:disabled),
  select,
  summary,
  [role="button"] {
    cursor: pointer;
  }
}

@layer components {
  /* Thin 6px scrollbar — applied globally to all scrollable elements.
     scrollbar-width/scrollbar-color are Firefox-only fallback;
     ::-webkit-scrollbar rules handle Chrome/Safari/Edge. */
  @supports not selector(::-webkit-scrollbar) {
    * {
      scrollbar-width: thin;
      scrollbar-color: theme(--color-zinc-700) transparent;
    }
  }

  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background-color: theme(--color-zinc-700);
    border-radius: 3px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: theme(--color-zinc-600);
  }

  table {
    @apply w-full border-collapse bg-white dark:bg-zinc-900/50;
  }

  table th {
    @apply bg-zinc-50 px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500 dark:bg-zinc-800/50 dark:text-zinc-400;
  }

  table td {
    @apply px-4 py-3 text-sm;
  }

  table tbody tr {
    @apply border-t border-zinc-200 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/30;
  }

  pre {
    @apply overflow-x-auto rounded-xl bg-zinc-50 p-4 dark:bg-zinc-900;
  }

  code {
    @apply rounded-sm bg-zinc-100 px-1 py-0.5 text-sm font-mono dark:bg-zinc-800;
  }

  pre code {
    @apply bg-transparent p-0;
  }

  .blob-container {
    background: var(--color-zinc-50);
    border-color: var(--color-zinc-300);
  }

  html.dark .blob-container {
    background: color-mix(in srgb, var(--color-zinc-900) 50%, transparent);
    border-color: color-mix(in srgb, var(--color-zinc-800) 60%, transparent);
  }

  .ref-menu > summary {
    list-style: none;
  }

  .ref-menu > summary::-webkit-details-marker,
  .ref-menu > summary::marker {
    display: none;
    content: "";
  }

  .ref-menu[open] > summary {
    @apply ring-2 ring-accent-500/30;
  }

  .markdown-content {
    @apply max-w-4xl text-[0.95rem] leading-7 text-zinc-700 dark:text-zinc-200;
  }

  .markdown-content > *:first-child {
    margin-top: 0;
  }

  .markdown-content > *:last-child {
    margin-bottom: 0;
  }

  .markdown-content h1,
  .markdown-content h2,
  .markdown-content h3,
  .markdown-content h4 {
    @apply mt-6 mb-3 font-semibold text-zinc-900 dark:text-zinc-50;
  }

  .markdown-content p,
  .markdown-content ul,
  .markdown-content ol,
  .markdown-content blockquote,
  .markdown-content pre {
    @apply mb-4;
  }

  .markdown-content ul,
  .markdown-content ol {
    @apply ml-6;
  }

  .markdown-content ul {
    list-style: disc;
  }

  .markdown-content ol {
    list-style: decimal;
  }

  .markdown-content blockquote {
    @apply border-l-4 border-zinc-300 pl-4 italic text-zinc-600 dark:border-zinc-700 dark:text-zinc-300;
  }

  .markdown-content img {
    @apply inline-block max-w-full;
  }

  .markdown-content pre {
    @apply overflow-x-auto rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900;
  }

  .markdown-content pre code,
  #blob-code {
    @apply font-mono text-sm;
  }

  .markdown-content pre code {
    display: block;
    padding: 0;
    border-radius: 0;
    white-space: pre;
    background: transparent !important;
  }

  pre code.hljs,
  .blob-container code.hljs,
  .markdown-content pre code.hljs,
  #blob-code.hljs {
    background: transparent !important;
  }

  .markdown-content pre code.hljs {
    overflow-x: visible;
  }

  #blob-pre {
    @apply bg-transparent p-0;
  }

  pre.has-line-numbers {
    padding: 0 !important;
  }

  .code-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
  }

  .code-table.hljs {
    display: table;
    margin: 0;
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
  }

  .code-table tr,
  .code-table td {
    border: none;
    background: transparent;
  }

  .code-table .line-num {
    width: 1%;
    min-width: 3.5rem;
    padding: 0 1rem 0 0.5rem;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
    user-select: none;
    border-right: 1px solid color-mix(in srgb, var(--color-zinc-200) 80%, transparent);
  }

  html.dark .code-table .line-num {
    border-right-color: color-mix(in srgb, var(--color-zinc-700) 90%, transparent);
  }

  .code-table .line-num a {
    display: block;
    color: var(--color-zinc-400);
    text-decoration: none;
  }

  html.dark .code-table .line-num a {
    color: var(--color-zinc-500);
  }

  .code-table .line-num a:hover {
    color: var(--color-accent-500);
  }

  .code-table .line-code {
    white-space: pre;
    padding: 0 0.75rem;
    line-height: 1.375rem;
  }

  .code-line:hover {
    background: color-mix(in srgb, var(--color-accent-500) 4%, transparent);
  }

  html.dark .code-line:hover {
    background: color-mix(in srgb, var(--color-accent-500) 8%, transparent);
  }

  .code-line {
    scroll-margin-top: 6rem;
  }

  .code-line:target,
  .code-line.line-highlight {
    background: color-mix(in srgb, var(--color-accent-500) 8%, transparent);
  }

  html.dark .code-line:target,
  html.dark .code-line.line-highlight {
    background: color-mix(in srgb, var(--color-accent-500) 15%, transparent);
  }

  svg.inline {
    vertical-align: -0.125em;
  }

  [data-theme-toggle] svg {
    vertical-align: middle;
  }

  html.dark [data-theme-toggle] .icon-light {
    display: none;
  }

  html.dark [data-theme-toggle] .icon-dark {
    display: inline-block;
  }

  html:not(.dark) [data-theme-toggle] .icon-light {
    display: inline-block;
  }

  html:not(.dark) [data-theme-toggle] .icon-dark {
    display: none;
  }
}

@layer components {
  @media (max-width: 640px) {
    #commits-table th:nth-child(3),
    #commits-table td:nth-child(3) {
      display: none;
    }

    #commits-table {
      table-layout: fixed;
    }

    #commits-table th,
    #commits-table td {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #commits-table th:nth-child(1),
    #commits-table td:nth-child(1) {
      width: 5.5rem;
      white-space: nowrap;
    }

    #commits-table th:nth-child(2),
    #commits-table td:nth-child(2) {
      white-space: normal;
      word-break: break-word;
    }

    #commits-table th:nth-child(4),
    #commits-table td:nth-child(4) {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
    }

    /* Wrap long code lines on mobile instead of horizontal scroll */
    .code-table .line-code {
      white-space: pre-wrap;
      word-break: break-all;
    }

    .diff-code {
      white-space: pre-wrap;
      word-break: break-all;
    }

    .markdown-content pre code {
      white-space: pre-wrap;
      word-break: break-all;
    }

    /* Responsive markdown tables on mobile */
    .markdown-content table {
      table-layout: fixed;
    }

    .markdown-content table td,
    .markdown-content table th {
      word-break: break-word;
      overflow-wrap: break-word;
      padding: 0.5rem 0.5rem;
    }
  }
}

/* ── Diff Viewer ──────────────────────────────────────────────── */

@layer components {
  .diff-viewer {
    @apply rounded-2xl border border-zinc-200 bg-white dark:border-zinc-800/60 dark:bg-zinc-900/50;
    overflow: hidden;
  }

  /* Summary bar */
  .diff-summary {
    @apply flex flex-wrap items-center justify-between gap-3 border-b border-zinc-200 px-5 py-3.5 dark:border-zinc-800;
  }

  .diff-summary-stats {
    @apply flex flex-wrap items-center gap-3 text-sm;
  }

  .diff-stat-add {
    @apply font-medium text-green-700 dark:text-green-400;
  }

  .diff-stat-mod {
    @apply font-medium text-amber-700 dark:text-amber-400;
  }

  .diff-stat-del {
    @apply font-medium text-red-700 dark:text-red-400;
  }

  .diff-compare-label {
    @apply rounded-full bg-zinc-100 px-3 py-1 text-xs font-medium text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300;
  }

  /* File list */
  .diff-file-list {
    /* no table – just stacked cards */
  }

  .diff-file-entry {
    @apply border-b border-zinc-100 last:border-b-0 dark:border-zinc-800/60;
  }

  .diff-file-row {
    @apply flex items-center justify-between gap-3 px-5 py-3 transition-colors;
  }

  .diff-file-row:hover {
    @apply bg-zinc-50/60 dark:bg-zinc-800/20;
  }

  .diff-file-info {
    @apply flex items-center gap-3 overflow-hidden;
    min-width: 0;
  }

  .diff-file-path {
    @apply truncate font-mono text-sm;
  }

  .diff-file-path a {
    @apply no-underline hover:underline;
  }

  /* Badges */
  .diff-badge {
    @apply inline-flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md text-xs font-bold;
  }

  .diff-badge-add {
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300;
  }

  .diff-badge-mod {
    @apply bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300;
  }

  .diff-badge-del {
    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300;
  }

  /* Toggle button */
  .diff-toggle-btn {
    @apply inline-flex flex-shrink-0 items-center gap-1.5 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-700;
  }

  .diff-toggle-btn.active {
    @apply border-accent-200 bg-accent-50 text-accent-700 dark:border-accent-800 dark:bg-accent-900/30 dark:text-accent-300;
  }

  .diff-toggle-icon {
    @apply text-[0.7rem] leading-none;
  }

  /* Expanded content area */
  .diff-expand-area {
    @apply border-t border-zinc-100 dark:border-zinc-800/60;
  }

  /* Patch container */
  .diff-patch-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 32rem;
  }

  .diff-patch-pre {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .diff-patch-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
  }

  .diff-patch-table.hljs {
    display: table;
    margin: 0;
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
  }

  .diff-patch-table tr,
  .diff-patch-table td {
    border: none !important;
    background: transparent;
    padding: 0;
  }

  .diff-patch-table tr:hover {
    background: transparent;
  }

  /* Gutter (prefix column: +/-/space) */
  .diff-gutter {
    width: 1%;
    min-width: 1.25rem;
    padding: 0 0.25rem 0 0.75rem !important;
    text-align: center;
    vertical-align: top;
    white-space: pre;
    user-select: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.375rem;
    color: var(--color-zinc-400);
  }

  html.dark .diff-gutter {
    color: var(--color-zinc-500);
  }

  /* Code cell */
  .diff-code {
    white-space: pre;
    padding: 0 0.75rem 0 0.25rem !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.375rem;
  }

  /* Line-level diff coloring - light */
  .diff-line-add {
    background: rgb(187 247 208 / 0.35) !important;
  }

  .diff-line-add .diff-gutter {
    color: #16a34a;
  }

  .diff-line-del {
    background: rgb(254 202 202 / 0.4) !important;
  }

  .diff-line-del .diff-gutter {
    color: #dc2626;
  }

  .diff-line-hunk {
    background: color-mix(in srgb, var(--color-accent-100) 40%, transparent) !important;
  }

  .diff-line-hunk .diff-code {
    color: var(--color-accent-500);
    font-style: italic;
  }

  .diff-line-hunk .diff-gutter {
    color: var(--color-accent-500);
  }

  /* Line-level diff coloring - dark */
  html.dark .diff-line-add {
    background: rgb(22 101 52 / 0.25) !important;
  }

  html.dark .diff-line-add .diff-gutter {
    color: #4ade80;
  }

  html.dark .diff-line-del {
    background: rgb(153 27 27 / 0.25) !important;
  }

  html.dark .diff-line-del .diff-gutter {
    color: #f87171;
  }

  html.dark .diff-line-hunk {
    background: color-mix(in srgb, var(--color-accent-800) 20%, transparent) !important;
  }

  html.dark .diff-line-hunk .diff-code {
    color: var(--color-accent-300);
  }

  html.dark .diff-line-hunk .diff-gutter {
    color: var(--color-accent-300);
  }

  /* Loading state */
  .diff-loading {
    @apply flex items-center gap-2 px-5 py-4 text-sm text-zinc-500 dark:text-zinc-400;
  }

  .diff-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: diff-spin 0.6s linear infinite;
  }

  @keyframes diff-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Skip message */
  .diff-skip-msg {
    @apply px-5 py-4 text-sm italic text-zinc-500 dark:text-zinc-400;
  }

  /* Empty state */
  .diff-empty {
    @apply px-5 py-6 text-center text-sm text-zinc-500 dark:text-zinc-400;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}