@import 'tailwindcss';

@source './templates/**/*.html';

@plugin "daisyui" {
  logs: false;
  themes: false;
  include: [ "properties",
    "scrollbar",
    "rootscrolllock",
    "rootcolor",
    "svg",
    "button",
    "menu",
    "navbar",
    "drawer",
    "modal",
    "chat",
    "card",
    "loading",
    "validator",
    "fileinput",
    "alert",
    "swap"
    ];
}

@plugin "@tailwindcss/typography";

@view-transition {
  navigation: auto;
}

@layer base {
  :root {
    --nb-shadow: 4px 4px 0 0 #000;
    --nb-shadow-hover: 6px 6px 0 0 #000;
  }

  [data-theme="light"] {
    color-scheme: light;
    --color-base-100: oklch(98.42% 0.012 96.42);
    --color-base-200: oklch(94.52% 0.0122 96.43);
    --color-base-300: oklch(90.96% 0.0125 91.53);
    --color-base-content: oklch(17.76% 0 89.88);
    --color-primary: oklch(20.77% 0.0398 265.75);
    --color-primary-content: oklch(100% 0 89.88);
    --color-secondary: oklch(54.61% 0.2152 262.88);
    --color-secondary-content: oklch(100% 0 89.88);
    --color-accent: oklch(72% 0.19 80);
    --color-accent-content: oklch(21% 0.035 80);
    --color-neutral: oklch(17.76% 0 89.88);
    --color-neutral-content: oklch(96.99% 0.0013 106.42);
    --color-info: oklch(60.89% 0.1109 221.72);
    --color-info-content: oklch(96.99% 0.0013 106.42);
    --color-success: oklch(62.71% 0.1699 149.21);
    --color-success-content: oklch(96.99% 0.0013 106.42);
    --color-warning: oklch(79.52% 0.1617 86.05);
    --color-warning-content: oklch(17.76% 0 89.88);
    --color-error: oklch(57.71% 0.2152 27.33);
    --color-error-content: oklch(96.99% 0.0013 106.42);
    --radius-selector: 0rem;
    --radius-field: 0rem;
    --radius-box: 0rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 2px;
  }

  [data-theme="dark"] {
    color-scheme: dark;

    /* --- Canvas: Dark Warm Grey (Matches Light Mode's hue 90) --- */
    --color-base-100: oklch(18% 0.01 90);
    --color-base-200: oklch(15% 0.01 90);
    --color-base-300: oklch(12% 0.01 90);
    --color-base-content: oklch(96% 0.01 90);

    /* --- Primary: Vibrant Indigo (Light Mode Hue 265, boosted for dark) --- */
    --color-primary: oklch(65% 0.22 265);
    --color-primary-content: oklch(98% 0.01 265);

    /* --- Secondary: Deep Indigo (Similar to Light Mode Primary) --- */
    --color-secondary: oklch(45% 0.18 265);
    --color-secondary-content: oklch(98% 0.01 265);

    /* --- Accent: Vibrant Amber (Light Mode Hue 80) --- */
    --color-accent: oklch(75% 0.19 80);
    --color-accent-content: oklch(18% 0.04 80);

    /* --- Neutral: Warm Graphite --- */
    --color-neutral: oklch(25% 0.02 90);
    --color-neutral-content: oklch(96% 0.01 90);

    /* --- Semantic Colors (Matching Light Mode Hues) --- */
    --color-info: oklch(70% 0.15 220);    /* Blue */
    --color-success: oklch(72% 0.18 150); /* Green */
    --color-warning: oklch(80% 0.18 85);  /* Orange/Amber */
    --color-error: oklch(68% 0.20 25);    /* Red */
    
    --color-info-content: oklch(15% 0.05 220);
    --color-success-content: oklch(15% 0.05 150);
    --color-warning-content: oklch(15% 0.05 85);
    --color-error-content: oklch(98% 0.01 25);

    /* --- Neobrutalist Structure --- */
    --radius-selector: 0rem;
    --radius-field: 0rem;
    --radius-box: 0rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 2px;
  }

  [data-theme="obsidian-prism"] {
    color-scheme: dark;

    /* --- Canvas & Surfaces --- */
    --color-base-100: oklch(12% 0.015 260);
    --color-base-200: oklch(9% 0.018 262);
    --color-base-300: oklch(6% 0.02 265);
    --color-base-content: oklch(95% 0.008 260);

    /* --- Primary: Electric Violet Signal --- */
    --color-primary: oklch(62% 0.28 290);
    --color-primary-content: oklch(98% 0.01 290);

    /* --- Secondary: Cyan Edge --- */
    --color-secondary: oklch(68% 0.18 220);
    --color-secondary-content: oklch(98% 0.01 220);

    /* --- Accent: Ember (warm counterpoint) --- */
    --color-accent: oklch(78% 0.19 55);
    --color-accent-content: oklch(18% 0.04 55);

    /* --- Neutral: Cold Steel --- */
    --color-neutral: oklch(24% 0.02 260);
    --color-neutral-content: oklch(92% 0.01 260);

    /* --- Semantic Colors --- */
    --color-info: oklch(72% 0.14 230);
    --color-info-content: oklch(25% 0.06 230);
    --color-success: oklch(74% 0.16 155);
    --color-success-content: oklch(25% 0.06 155);
    --color-warning: oklch(82% 0.18 75);
    --color-warning-content: oklch(25% 0.08 75);
    --color-error: oklch(68% 0.22 15);
    --color-error-content: oklch(98% 0.02 15);

    /* --- Radii (NB Law: Zero) --- */
    --radius-selector: 0rem;
    --radius-field: 0rem;
    --radius-box: 0rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 2px;

    /* --- Prismatic Shadow System --- */
    --nb-shadow-hue: 290;
    --nb-shadow: 4px 4px 0 0 oklch(8% 0.06 var(--nb-shadow-hue));
    --nb-shadow-hover: 6px 6px 0 0 oklch(6% 0.08 calc(var(--nb-shadow-hue) + 15));
  }

  [data-theme="warm-paper"] {
    color-scheme: light;

    /* --- Canvas & Surfaces: Warm cream paper (lighter, less yellow) --- */
    --color-base-100: oklch(98.5% 0.01 90);
    --color-base-200: oklch(95% 0.015 90);
    --color-base-300: oklch(92% 0.02 90);
    --color-base-content: oklch(18% 0.015 75);

    /* --- Primary: Warm Amber/Gold (the landing page CTA color) --- */
    --color-primary: oklch(72% 0.16 75);
    --color-primary-content: oklch(18% 0.02 75);

    /* --- Secondary: Warm Terracotta --- */
    --color-secondary: oklch(55% 0.14 45);
    --color-secondary-content: oklch(98% 0.01 85);

    /* --- Accent: Deep Charcoal (for contrast buttons like "View on GitHub") --- */
    --color-accent: oklch(22% 0.01 80);
    --color-accent-content: oklch(98% 0.02 85);

    /* --- Neutral: Warm Charcoal --- */
    --color-neutral: oklch(20% 0.015 75);
    --color-neutral-content: oklch(96% 0.015 85);

    /* --- Semantic Colors (warmer variants) --- */
    --color-info: oklch(58% 0.12 230);
    --color-info-content: oklch(98% 0.01 230);
    --color-success: oklch(62% 0.15 155);
    --color-success-content: oklch(98% 0.01 155);
    --color-warning: oklch(78% 0.16 70);
    --color-warning-content: oklch(20% 0.04 70);
    --color-error: oklch(58% 0.20 25);
    --color-error-content: oklch(98% 0.02 25);

    /* --- Radii (NB Law: Zero) --- */
    --radius-selector: 0rem;
    --radius-field: 0rem;
    --radius-box: 0rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 2px;

    /* --- Classic Black Shadow --- */
    --nb-shadow: 4px 4px 0 0 #000;
    --nb-shadow-hover: 6px 6px 0 0 #000;
  }

  body {
    background-color: var(--color-base-100);
    color: var(--color-base-content);
    font-family: 'Satoshi', sans-serif;
    -webkit-font-smoothing: antialiased;
    @apply selection:bg-yellow-300/40 selection:text-neutral;
  }

  html {
    scrollbar-gutter: stable;
  }

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  .container {
    padding-inline: 10px;
  }

  @media (min-width: 640px) {
    .container {
      padding-inline: 2rem;
    }
  }

  @media (min-width: 1024px) {
    .container {
      padding-inline: 4rem;
    }
  }

  @media (min-width: 1280px) {
    .container {
      padding-inline: 5rem;
    }
  }

  @media (min-width: 1536px) {
    .container {
      padding-inline: 6rem;
    }
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  form.htmx-request {
    opacity: 0.5;
  }
}

/* Neobrutalist helpers influenced by Tufte principles */
@layer components {

  /* Offset, hard-edge shadow; minimal ink with strong contrast */
  .nb-shadow {
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms;
  }

  .nb-shadow-hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--nb-shadow-hover);
  }

  .nb-card {
    @apply bg-base-100 border-2 border-neutral p-4;
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms;
  }

  .nb-card:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--nb-shadow-hover);
  }

  .nb-panel {
    @apply border-2 border-neutral;
    background-color: var(--nb-panel-bg, var(--color-base-200));
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms;
  }

  .nb-panel:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--nb-shadow-hover);
  }

  .nb-panel-canvas {
    --nb-panel-bg: var(--color-base-100);
  }

  .nb-canvas {
    background-color: var(--color-base-100);
  }

  .nb-btn {
    @apply btn rounded-none border-2 border-neutral text-base-content;
    --btn-color: var(--color-base-100);
    --btn-fg: var(--color-base-content);
    --btn-noise: none;
    background-image: none;
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms;
  }

  .nb-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--nb-shadow-hover);
  }

  .nb-link {
    @apply underline underline-offset-2 decoration-neutral hover:decoration-4;
  }

  .nb-stat {
    @apply bg-base-100 border-2 border-neutral p-5 flex flex-col gap-1;
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms;
  }

  /* Hairline rules and quiet gridlines for Tufte feel */
  .u-hairline {
    @apply border-t border-neutral/20;
  }

  .prose-tufte {
    @apply prose prose-neutral;
    max-width: min(90ch, 100%);
    line-height: 1.7;
  }

  .prose-tufte-compact {
    @apply prose prose-neutral;
    max-width: min(90ch, 100%);
    font-size: 0.875rem;
    line-height: 1.6;
  }

  [data-theme="dark"] .prose-tufte,
  [data-theme="dark"] .prose-tufte-compact {
    color: var(--color-base-content);
    --tw-prose-body: var(--color-base-content);
    --tw-prose-headings: var(--color-base-content);
    --tw-prose-lead: rgba(255, 255, 255, 0.78);
    --tw-prose-links: var(--color-accent);
    --tw-prose-bold: var(--color-base-content);
    --tw-prose-counters: rgba(255, 255, 255, 0.7);
    --tw-prose-bullets: rgba(255, 255, 255, 0.35);
    --tw-prose-hr: rgba(255, 255, 255, 0.2);
    --tw-prose-quotes: var(--color-base-content);
    --tw-prose-quote-borders: rgba(255, 255, 255, 0.25);
    --tw-prose-captions: rgba(255, 255, 255, 0.65);
    --tw-prose-code: var(--color-base-content);
    --tw-prose-pre-code: inherit;
    --tw-prose-pre-bg: rgba(255, 255, 255, 0.07);
    --tw-prose-th-borders: rgba(255, 255, 255, 0.25);
    --tw-prose-td-borders: rgba(255, 255, 255, 0.2);
  }

  [data-theme="dark"] .prose-tufte a,
  [data-theme="dark"] .prose-tufte-compact a {
    color: var(--color-accent);
  }

  /* Encourage a consistent card look app-wide */
  .card {
    @apply border-2 border-neutral rounded-none;
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms;
  }

  .card:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--nb-shadow-hover);
  }

  /* Input styling with good dark/light contrast */
  .nb-input {
    @apply rounded-none border-2 border-neutral bg-base-100 text-base-content placeholder:text-base-content/60 px-3 py-[0.5rem];
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms, border-color 150ms;
  }

  .nb-input:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--nb-shadow-hover);
  }

  .nb-input:focus {
    outline: none;
    box-shadow: var(--nb-shadow-hover);
  }

  /* Select styling parallels inputs */
  .nb-select {
    @apply rounded-none border-2 border-neutral bg-base-100 text-base-content px-3 py-[0.5rem];
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms, border-color 150ms;
  }

  .nb-select:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--nb-shadow-hover);
  }

  .nb-select:focus {
    outline: none;
    box-shadow: var(--nb-shadow-hover);
  }

  /* Compact variants */
  .nb-input-sm {
    @apply text-sm px-2 py-[0.25rem];
  }

  .nb-select-sm {
    @apply text-sm px-2 py-[0.25rem];
  }

  .nb-cta {
    --btn-color: var(--color-accent);
    --btn-fg: var(--color-accent-content);
    --btn-noise: none;
    background-image: none;
    background-color: var(--color-accent);
    color: var(--color-accent-content);
  }

  .nb-cta:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-content);
    filter: saturate(1.1) brightness(1.05);
  }

  /* Badges */
  .nb-badge {
    @apply inline-flex items-center uppercase tracking-wide text-[10px] px-2 py-0.5 bg-base-100 border-2 border-neutral rounded-none;
    box-shadow: 3px 3px 0 0 #000;
  }

  .nb-masonry {
    column-count: 1;
    column-gap: 1rem;
  }

  .nb-masonry>* {
    break-inside: avoid;
    display: block;
  }

  @media (min-width: 768px) {
    .nb-masonry {
      column-count: 2;
    }
  }

  @media (min-width: 1536px) {
    .nb-masonry {
      column-count: 3;
    }
  }

  /* Chat bubbles neobrutalist */
  .chat .chat-bubble {
    @apply rounded-none border-2 border-neutral bg-base-100 text-neutral;
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms;
  }

  /* Remove DaisyUI tail so our rectangle keeps clean borders/shadows */
  .chat .chat-bubble::before,
  .chat .chat-bubble::after {
    display: none !important;
    content: none !important;
  }

  .chat.chat-start .chat-bubble {
    @apply bg-secondary text-secondary-content;
  }

  .chat.chat-end .chat-bubble {
    @apply bg-base-100 text-neutral;
  }

  /* Tables */
  .nb-table {
    @apply w-full;
    border-collapse: separate;
    border-spacing: 0;
  }

  .nb-table thead th {
    @apply uppercase tracking-wide text-xs border-b-2 border-neutral;
  }

  .nb-table th,
  .nb-table td {
    @apply p-3;
  }

  .nb-table tbody tr+tr td {
    @apply border-t border-neutral/30;
  }

  .nb-table tbody tr:hover {
    @apply bg-base-200/40;
  }

  .nb-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 0 #000;
  }

  .kg-overlay {
    @apply absolute top-4 left-4 right-4 z-10 flex flex-col items-stretch gap-2;
    max-width: min(420px, calc(100% - 2rem));
  }

  .kg-control-row {
    @apply flex flex-wrap items-center gap-2;
  }

  .kg-control-row-primary {
    @apply justify-start;
  }

  .kg-control-row-secondary {
    @apply justify-center;
  }

  .kg-search-input {
    @apply pl-2;
    height: 2rem;
    width: 100%;
    max-width: 320px;
    min-width: 0;
  }

  .kg-control-row-primary .kg-search-input {
    flex: 1 1 auto;
  }

  .kg-search-btn {
    flex: 0 0 auto;
  }

  .kg-toggle {
    @apply transition-colors;
  }

  .kg-toggle-active {
    --btn-color: var(--color-accent);
    --btn-fg: var(--color-accent-content);
    --btn-noise: none;
    background-image: none;
    background-color: var(--color-accent);
    color: var(--color-accent-content);
  }

  .kg-toggle-active:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-content);
    filter: saturate(1.1) brightness(1.05);
  }

  @media (min-width: 768px) {
    .kg-overlay {
      right: auto;
      max-width: none;
      width: auto;
    }
  }

  .kg-legend {
    @apply absolute bottom-2 left-2 z-10 flex flex-wrap gap-4;
  }

  .kg-legend-card {
    @apply p-2;
  }

  .kg-legend-heading {
    @apply mb-1 text-xs opacity-70;
  }

  .kg-legend-row {
    @apply flex items-center gap-2 text-xs;
  }

  /* Checkboxes */
  .nb-checkbox {
    @apply appearance-none inline-block align-middle rounded-none border-2 border-neutral bg-base-100;
    width: 1rem;
    height: 1rem;
    box-shadow: var(--nb-shadow);
    transition: transform 150ms, box-shadow 150ms, border-color 150ms, background-color 150ms;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
    cursor: pointer;
  }

  .nb-checkbox:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 0 #000;
  }

  .nb-checkbox:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  .nb-checkbox:active {
    transform: translate(0, 0);
    box-shadow: 3px 3px 0 0 #000;
  }

  /* Tick mark in light mode (black) */
  .nb-checkbox:checked {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  }

  /* Tick mark in dark mode (white) */
  [data-theme="dark"] .nb-checkbox:checked {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  }

  /* Compact size */
  .nb-checkbox-sm {
    width: 0.875rem;
    height: 0.875rem;
  }

  /* Placeholder style for smaller, quieter helper text */
  .nb-input::placeholder {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    opacity: 0.75;
  }

  .markdown-content {
    line-height: 1.5;
    word-wrap: break-word;
  }

  .markdown-content p {
    margin-bottom: 0.75em;
  }

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

  .markdown-content ul,
  .markdown-content ol {
    margin-top: 0.5em;
    margin-bottom: 0.75em;
    padding-left: 2em;
  }

  .markdown-content li {
    margin-bottom: 0.25em;
  }

  .markdown-content pre {
    background-color: var(--color-base-200);
    color: var(--color-base-content);
    padding: 0.75em 1em;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow-x: auto;
  }

  .markdown-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    display: block;
    line-height: inherit;
  }

  .markdown-content :not(pre)>code {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--color-base-content);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
  }

  .markdown-content table {
    border-collapse: collapse;
    margin: 0.75em 0;
    width: 100%;
  }

  .markdown-content th,
  .markdown-content td {
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 6px 12px;
    text-align: left;
  }

  [data-theme="dark"] .markdown-content th,
  [data-theme="dark"] .markdown-content td {
    border-color: rgba(255, 255, 255, 0.25);
  }

  .markdown-content blockquote {
    border-left: 4px solid rgba(0, 0, 0, 0.15);
    padding-left: 10px;
    margin: 0.5em 0 0.5em 0.5em;
    color: rgba(0, 0, 0, 0.6);
  }

  [data-theme="dark"] .markdown-content blockquote {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
  }

  .markdown-content hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin: 0.75em 0;
  }

  [data-theme="dark"] .markdown-content hr {
    border-top-color: rgba(255, 255, 255, 0.2);
  }

  [data-theme="dark"] .markdown-content pre {
    background-color: var(--color-base-200);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--color-base-content);
  }

  [data-theme="dark"] .markdown-content :not(pre)>code {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--color-base-content);
  }

  .brand-mark {
    letter-spacing: 0.02em;
  }

  .reference-tooltip {
    @apply bg-base-100 text-base-content border-2 border-neutral p-3 text-sm w-72 max-w-xs;
    position: fixed;
    z-index: 9999;
    box-shadow: var(--nb-shadow);
  }

  /* .nb-label: Uppercase, bold, tracking-wide, text-xs for section headers */
  .nb-label {
    @apply uppercase font-bold tracking-wide text-xs;
  }

  /* .nb-data: JetBrains Mono, tabular-nums for timestamps, IDs, badges */
  .nb-data {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-variant-numeric: tabular-nums;
  }

  /* The Stamp: Button :active state pushes into page */
  .nb-btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 0 #000 !important;
  }

  /* Staggered Card Dealing Animation */
  @keyframes deal-in {
    0% {
      opacity: 0;
      transform: translateY(12px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Staggered deal-in animation - STRICTLY SCOPED to main content area */
  main .nb-card,
  main .nb-panel {
    animation: deal-in 300ms var(--ease-mechanical, cubic-bezier(0.25, 1, 0.5, 1)) backwards;
  }

  /* Exclude elements that shouldn't animate even inside main */
  main nav.nb-panel,
  main .no-animation {
    animation: none;
  }

  /* Apply staggered delays only to direct children of grids/lists or top-level containers */
  main .nb-masonry>.nb-card:nth-child(1),
  main .grid>.nb-panel:nth-child(1) {
    animation-delay: 0ms;
  }

  main .nb-masonry>.nb-card:nth-child(2),
  main .grid>.nb-panel:nth-child(2) {
    animation-delay: 50ms;
  }

  main .nb-masonry>.nb-card:nth-child(3),
  main .grid>.nb-panel:nth-child(3) {
    animation-delay: 100ms;
  }

  main .nb-masonry>.nb-card:nth-child(4),
  main .grid>.nb-panel:nth-child(4) {
    animation-delay: 150ms;
  }

  main .nb-masonry>.nb-card:nth-child(5),
  main .grid>.nb-panel:nth-child(5) {
    animation-delay: 200ms;
  }

  main .nb-masonry>.nb-card:nth-child(6),
  main .grid>.nb-panel:nth-child(6) {
    animation-delay: 250ms;
  }

  main .nb-masonry>.nb-card:nth-child(7),
  main .grid>.nb-panel:nth-child(7) {
    animation-delay: 300ms;
  }

  main .nb-masonry>.nb-card:nth-child(8),
  main .grid>.nb-panel:nth-child(8) {
    animation-delay: 350ms;
  }

  main .nb-masonry>.nb-card:nth-child(n+9),
  main .grid>.nb-panel:nth-child(n+9) {
    animation-delay: 400ms;
  }

  /* HTMX Swap Fade-Up Animation */
  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(8px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-up {
    animation: fade-up 200ms var(--ease-mechanical, cubic-bezier(0.25, 1, 0.5, 1)) forwards;
  }

  /* Kinetic Input: Chat Armed State */
  #chat-input:not(:placeholder-shown)~button {
    filter: saturate(1.3) brightness(1.1);
  }

  #chat-input:not(:placeholder-shown) {
    border-color: var(--color-accent);
  }

  /* Evidence Frame for images (Tufte treatment) */
  .nb-evidence-frame {
    @apply border-2 border-neutral m-2 bg-base-200;
  }

  .nb-evidence-frame img {
    display: block;
    width: 100%;
    height: auto;
  }

  .nb-evidence-frame figcaption {
    @apply text-xs px-2 py-1 border-t-2 border-neutral;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
}

/* Theme-aware placeholder contrast tweaks */
@layer base {

  /* Light theme keeps default neutral tone via utilities */
  [data-theme="dark"] .nb-input::placeholder,
  [data-theme="dark"] .input::placeholder,
  [data-theme="dark"] .textarea::placeholder,
  [data-theme="dark"] textarea::placeholder,
  [data-theme="dark"] input::placeholder {
    color: rgba(255, 255, 255, 0.78) !important;
    opacity: 0.85;
  }

  /* === DESIGN POLISHING: Receding Reality === */
  /* Modal opens → background scales and blurs */
  body:has(dialog[open]) #main-content-wrapper,
  body.modal-open #main-content-wrapper {
    transform: scale(0.98);
    filter: blur(2px);
    transition: transform 250ms var(--ease-mechanical, cubic-bezier(0.25, 1, 0.5, 1)),
      filter 250ms var(--ease-mechanical, cubic-bezier(0.25, 1, 0.5, 1));
  }

  #main-content-wrapper {
    transform: scale(1);
    filter: blur(0);
    transition: transform 250ms var(--ease-mechanical, cubic-bezier(0.25, 1, 0.5, 1)),
      filter 250ms var(--ease-mechanical, cubic-bezier(0.25, 1, 0.5, 1));
  }

  /* === DESIGN POLISHING: Scroll-Linked Navbar Shadow === */
  nav {
    --scroll-depth: 0;
    box-shadow: 4px calc(4px + var(--scroll-depth) * 4px) 0 0 #000;
    transition: box-shadow 150ms ease;
  }

}

/* satoshi.css */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
    url('fonts/Satoshi-Variable.woff') format('woff'),
    url('fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2'),
    url('fonts/Satoshi-VariableItalic.woff') format('woff'),
    url('fonts/Satoshi-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'),
    url('fonts/JetBrainsMono-Variable.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Minimal override: prevent DaisyUI .menu hover bg on our nb buttons */
@layer utilities {

  /* Let plain nb-btns remain transparent on hover within menus */
  .menu li>.nb-btn:hover {
    background-color: transparent;
  }

  /* Keep CTA background on hover within menus */
  .menu li>.nb-cta:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-content);
  }

  .toast-alert {
    @apply mt-2 flex flex-col text-left gap-1;
    box-shadow: var(--nb-shadow);
  }

  .toast-alert-title {
    @apply text-lg font-bold;
  }
}

/* Prismatic shadow hue shift on hover */
[data-theme="obsidian-prism"] .nb-panel:hover,
[data-theme="obsidian-prism"] .nb-card:hover,
[data-theme="obsidian-prism"] .nb-btn:hover {
  --nb-shadow-hue: 305;
}

/* Focus state: breathing shadow pulse */
@keyframes shadow-breathe {

  0%,
  100% {
    box-shadow: 6px 6px 0 0 oklch(8% 0.08 305);
  }

  50% {
    box-shadow: 7px 7px 0 0 oklch(10% 0.10 310);
  }
}

[data-theme="obsidian-prism"] .nb-btn:focus-visible,
[data-theme="obsidian-prism"] .nb-input:focus-visible,
[data-theme="obsidian-prism"] .nb-select:focus-visible {
  animation: shadow-breathe 1.5s ease-in-out infinite;
  outline: 2px solid oklch(62% 0.28 290);
  outline-offset: 2px;
}

/* Selection color: Prismatic violet */
[data-theme="obsidian-prism"] ::selection {
  background: oklch(62% 0.28 290 / 0.35);
  color: oklch(98% 0.01 290);
}

/* Prose adjustments for Obsidian Prism */
[data-theme="obsidian-prism"] .prose-tufte,
[data-theme="obsidian-prism"] .prose-tufte-compact {
  color: var(--color-base-content);
  --tw-prose-body: oklch(92% 0.008 260);
  --tw-prose-headings: oklch(98% 0.01 260);
  --tw-prose-lead: oklch(88% 0.01 260);
  --tw-prose-links: oklch(78% 0.19 55);
  --tw-prose-bold: oklch(98% 0.01 260);
  --tw-prose-counters: oklch(70% 0.01 260);
  --tw-prose-bullets: oklch(50% 0.01 260);
  --tw-prose-hr: oklch(24% 0.02 260);
  --tw-prose-quotes: oklch(88% 0.01 260);
  --tw-prose-quote-borders: oklch(40% 0.04 290);
  --tw-prose-captions: oklch(70% 0.01 260);
  --tw-prose-code: oklch(95% 0.008 260);
  --tw-prose-pre-code: inherit;
  --tw-prose-pre-bg: oklch(8% 0.02 262);
  --tw-prose-th-borders: oklch(30% 0.02 260);
  --tw-prose-td-borders: oklch(24% 0.02 260);
}

[data-theme="obsidian-prism"] .prose-tufte a,
[data-theme="obsidian-prism"] .prose-tufte-compact a {
  color: oklch(78% 0.19 55);
}

/* Code blocks: deeper well */
[data-theme="obsidian-prism"] .markdown-content pre {
  background-color: oklch(7% 0.018 262);
  border-color: oklch(20% 0.03 290);
}

[data-theme="obsidian-prism"] .markdown-content :not(pre)>code {
  background-color: oklch(18% 0.025 265);
}

/* Tables in Obsidian Prism */
[data-theme="obsidian-prism"] .markdown-content th,
[data-theme="obsidian-prism"] .markdown-content td {
  border-color: oklch(24% 0.02 260);
}

/* Blockquotes */
[data-theme="obsidian-prism"] .markdown-content blockquote {
  border-color: oklch(40% 0.04 290);
  color: oklch(85% 0.01 260);
}

/* HR */
[data-theme="obsidian-prism"] .markdown-content hr {
  border-top-color: oklch(24% 0.02 260);
}

/* Checkbox in Obsidian Prism (white tick) */
[data-theme="obsidian-prism"] .nb-checkbox:checked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* Placeholder text */
[data-theme="obsidian-prism"] .nb-input::placeholder,
[data-theme="obsidian-prism"] .input::placeholder,
[data-theme="obsidian-prism"] .textarea::placeholder,
[data-theme="obsidian-prism"] textarea::placeholder,
[data-theme="obsidian-prism"] input::placeholder {
  color: oklch(70% 0.01 260) !important;
  opacity: 0.85;
}

/* Nav shadow uses prismatic color */
[data-theme="obsidian-prism"] nav {
  box-shadow: 4px calc(4px + var(--scroll-depth, 0) * 4px) 0 0 oklch(8% 0.06 290);
}