gc-alexandria/src/app.css

@import "tailwindcss";
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
/* then your own imports and layers */
@import "./styles/base.css";
@import "./styles/scrollbar.css";
@import "./styles/publications.css";
@import "./styles/visualize.css";
@import "./styles/asciidoc.css";
@import "theme-tokens.css";
@import "./styles/a/cards.css";
@import "./styles/a/forms.css";
@import "./styles/a/primitives.css";

@layer theme, base, components, utilities;

@plugin "flowbite/plugin";
@plugin "flowbite-typography";

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

@theme {
  /* single color */
  --color-highlight: #f9f6f1;

  --color-border: var(--color-highlight);
  --color-text-muted: var(--color-text-muted);

  /* success */
  --color-success-50: #e3f2e7;
  --color-success-100: #c7e6cf;
  --color-success-200: #a2d4ae;
  --color-success-300: #7dbf8e;
  --color-success-400: #5ea571;
  --color-success-500: #4e8e5f;
  --color-success-600: #3e744c;
  --color-success-700: #305b3b;
  --color-success-800: #22412a;
  --color-success-900: #15281b;

  /* info */
  --color-info-50: #e7eff6;
  --color-info-100: #c5d9ea;
  --color-info-200: #9fbfdb;
  --color-info-300: #7aa5cc;
  --color-info-400: #5e90be;
  --color-info-500: #4779a5;
  --color-info-600: #365d80;
  --color-info-700: #27445d;
  --color-info-800: #192b3a;
  --color-info-900: #0d161f;

  /* warning */
  --color-warning-50: #fef4e6;
  --color-warning-100: #fde4bf;
  --color-warning-200: #fcd18e;
  --color-warning-300: #fbbc5c;
  --color-warning-400: #f9aa33;
  --color-warning-500: #f7971b;
  --color-warning-600: #c97a14;
  --color-warning-700: #9a5c0e;
  --color-warning-800: #6c3e08;
  --color-warning-900: #3e2404;

  /* danger */
  --color-danger-50: #fbeaea;
  --color-danger-100: #f5cccc;
  --color-danger-200: #eba5a5;
  --color-danger-300: #e17e7e;
  --color-danger-400: #d96060;
  --color-danger-500: #c94848;
  --color-danger-600: #a53939;
  --color-danger-700: #7c2b2b;
  --color-danger-800: #521c1c;
  --color-danger-900: #2b0e0e;
}

/* Map Tailwind utilities → theme tokens (PRIMARY ONLY) */
@theme inline {
  --color-primary-0: var(--brand-primary-0);
  --color-primary-50: var(--brand-primary-50);
  --color-primary-100: var(--brand-primary-100);
  --color-primary-200: var(--brand-primary-200);
  --color-primary-300: var(--brand-primary-300);
  --color-primary-400: var(--brand-primary-400);
  --color-primary-500: var(--brand-primary-500);
  --color-primary-600: var(--brand-primary-600);
  --color-primary-700: var(--brand-primary-700);
  --color-primary-800: var(--brand-primary-800);
  --color-primary-900: var(--brand-primary-900);
  --color-primary-950: var(--brand-primary-950);
  --color-primary-1000: var(--brand-primary-1000);
}

@source "../node_modules/flowbite-svelte/dist";
@source "../node_modules/flowbite-svelte-icons/dist";

/* @utility and @layer rules… */

/* .content-visibility-auto */
@utility content-visibility-auto {
  content-visibility: auto;
}

/* .contain-size */
@utility contain-size {
  contain: size;
}

/* numbers -> px  (e.g. contain-intrinsic-w-[320] => width: 320px) */
@utility contain-intrinsic-w-* {
  --tw-ciw: --value(number);
  width: calc(var(--tw-ciw) * 1px);
}

@utility contain-intrinsic-h-* {
  --tw-cih: --value(number);
  height: calc(var(--tw-cih) * 1px);
}

/* percentages (e.g. contain-intrinsic-wp-[65%] => width: 65%) */
@utility contain-intrinsic-wp-* {
  width: --value(percentage);
}
@utility contain-intrinsic-hp-* {
  height: --value(percentage);
}

/* list-upper-alpha, list-lower-alpha (keep your old class names)
   Note: in v4 you can also write list-[upper-alpha] / list-[lower-alpha] inline. */
@utility list-upper-alpha {
  list-style-type: upper-alpha;
}
@utility list-lower-alpha {
  list-style-type: lower-alpha;
}

/* flexGrow 1/2/3 — unlock grow-2, grow-3 (and any number via brackets) */
@utility grow-* {
  flex-grow: --value(integer);
}

/* Hue rotate: use arbitrary values directly, e.g. hue-rotate-[20deg] (no config needed). */

/* --- Let Tailwind scan Flowbite Svelte (node_modules are ignored by default) --- */
@source "../node_modules/flowbite-svelte/dist";
@source "../node_modules/flowbite-svelte-icons/dist";

/* Custom styles */
@layer base {
  /* disable chrome cancel button */
  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }

  /* === HEADINGS === */
  /* Base heading styles - gray-900 (light) / gray-100 (dark) for high contrast */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  h1.h-leather,
  h2.h-leather,
  h3.h-leather,
  h4.h-leather,
  h5.h-leather,
  h6.h-leather {
    @apply text-gray-900 dark:text-gray-100;
  }

  /* Heading sizes and weights */
  h1,
  h1.h-leather {
    @apply text-4xl font-bold;
  }

  h2,
  h2.h-leather {
    @apply text-3xl font-bold;
  }

  h3,
  h3.h-leather {
    @apply text-2xl font-bold;
  }

  h4,
  h4.h-leather {
    @apply text-xl font-bold;
  }

  h5,
  h5.h-leather {
    @apply text-lg font-semibold;
  }

  h6,
  h6.h-leather {
    @apply text-base font-semibold;
  }

  /* Heading links - primary-600 (light, more golden) / primary-300 (dark) for hover */
  h1 a,
  h2 a,
  h3 a,
  h4 a,
  h5 a,
  h6 a,
  h1.h-leather a,
  h2.h-leather a,
  h3.h-leather a,
  h4.h-leather a,
  h5.h-leather a,
  h6.h-leather a {
    @apply text-gray-900 dark:text-gray-100 hover:text-primary-600
      dark:hover:text-primary-300;
  }

  /* === LEATHER COMPONENTS === */
  .leather,
  .publication-leather {
    @apply text-gray-900 dark:text-gray-100;
  }

  /* Override Flowbite button hover in light mode - make it subtle like nav bar */
  /* Target all buttons in light mode */
  button:hover {
    background-color: var(--color-primary-100) !important;
  }

  /* Override outline buttons specifically */
  button[class*="outline"]:hover {
    background-color: var(--color-primary-100) !important;
    border-color: var(--color-primary-200) !important;
    color: var(--color-primary-800) !important;
  }

  /* Override btn-leather buttons */
  button.btn-leather:hover {
    background-color: var(--color-primary-100) !important;
  }

  /* Dark mode overrides */
  .dark button:hover {
    background-color: var(--color-primary-800) !important;
  }

  .dark button[class*="outline"]:hover {
    background-color: var(--color-primary-800) !important;
    border-color: var(--color-primary-600) !important;
    color: var(--color-primary-100) !important;
  }

  .dark button.btn-leather:hover {
    background-color: var(--color-primary-800) !important;
  }

  .btn-leather.text-xs {
    @apply px-2 py-1;
  }

  .btn-leather.text-xs svg {
    @apply h-3 w-3;
  }

  .btn-leather.text-sm {
    @apply px-3 py-2;
  }

  .btn-leather.text-sm svg {
    @apply h-4 w-4;
  }

  div[role="tooltip"] button.btn-leather {
    @apply hover:text-primary-700 dark:hover:text-primary-300
      hover:border-primary-700 dark:hover:border-primary-300 hover:bg-gray-200
      dark:hover:bg-gray-700;
  }

  .image-border {
    @apply border border-primary-700;
  }

  main {
    @apply max-w-full flex;
  }

  main.publication {
    @apply mt-[70px];
  }

  /* To scroll columns independently */
  main.publication.blog {
    @apply w-full sm:w-auto min-h-full;
  }

  main.main-leather,
  article.article-leather {
    @apply text-gray-900 dark:text-gray-100;
  }

  div.note-leather,
  p.note-leather,
  section.note-leather {
    @apply text-gray-900 dark:text-gray-100 p-2 rounded;
  }

  .edit div.note-leather:hover:not(:has(.note-leather:hover)),
  .edit p.note-leather:hover:not(:has(.note-leather:hover)),
  section.edit.note-leather:hover:not(:has(.note-leather:hover)) {
    @apply hover:bg-primary-100 dark:hover:bg-primary-800;
  }

  div.modal-leather > div {
    @apply bg-primary-50 dark:bg-primary-950 border-b-[1px] border-primary-100
      dark:border-primary-600;
  }

  div.modal-leather > div > h1,
  div.modal-leather > div > h2,
  div.modal-leather > div > h3,
  div.modal-leather > div > h4,
  div.modal-leather > div > h5,
  div.modal-leather > div > h6 {
    @apply text-gray-900 dark:text-gray-100;
  }

  div.modal-leather > div > h1 a,
  div.modal-leather > div > h2 a,
  div.modal-leather > div > h3 a,
  div.modal-leather > div > h4 a,
  div.modal-leather > div > h5 a,
  div.modal-leather > div > h6 a {
    @apply hover:text-primary-700 dark:hover:text-primary-300;
  }

  /* Navbar */
  nav.Navbar.navbar-main {
    @apply z-30;
  }

  nav.navbar-leather {
    @apply bg-primary-0 dark:bg-primary-1000 z-10;
  }

  nav.navbar-leather svg {
    @apply fill-gray-900 hover:fill-primary-700 dark:fill-gray-100
      dark:hover:fill-primary-300;
  }

  /* NavBrand hover - all text highlights together */
  #navi a:hover h1,
  #navi a:hover p {
    @apply !text-primary-600 dark:!text-primary-300;
    transition: color 0.2s ease-in-out;
  }

  /* Navbar menu items hover effect - ALL items get same background hover */
  #navi ul li.navbar-menu-item,
  #navi ul li:has(.navbar-menu-item),
  #navi li.navbar-menu-item {
    @apply rounded px-2 py-1 transition-colors;
  }

  #navi ul li.navbar-menu-item:hover,
  #navi ul li:has(.navbar-menu-item):hover,
  #navi li.navbar-menu-item:hover,
  #navi ul li.navbar-menu-item:has(button:hover),
  #navi ul li.navbar-menu-item:has(div:hover),
  #navi ul li.navbar-menu-item:has(span:hover),
  #navi ul li.navbar-menu-item:has(a:hover),
  #navi ul li.navbar-menu-item:has(img:hover),
  #navi ul li.navbar-menu-item:has(svg:hover),
  #navi ul li.navbar-menu-item:has([class*="Avatar"]:hover) {
    @apply !bg-primary-100;
  }

  .dark #navi ul li.navbar-menu-item:hover,
  .dark #navi ul li:has(.navbar-menu-item):hover,
  .dark #navi li.navbar-menu-item:hover,
  .dark #navi ul li.navbar-menu-item:has(button:hover),
  .dark #navi ul li.navbar-menu-item:has(div:hover),
  .dark #navi ul li.navbar-menu-item:has(span:hover),
  .dark #navi ul li.navbar-menu-item:has(a:hover),
  .dark #navi ul li.navbar-menu-item:has(img:hover),
  .dark #navi ul li.navbar-menu-item:has(svg:hover),
  .dark #navi ul li.navbar-menu-item:has([class*="Avatar"]:hover) {
    @apply !bg-primary-800;
  }

  /* Explore text color - matches chevron in dark mode */
  #navi ul li.navbar-menu-item:first-of-type {
    @apply text-primary-800 dark:text-white cursor-pointer;
  }

  /* Remove ALL backgrounds from ALL child elements - use universal selector with max specificity */
  #navi ul li.navbar-menu-item *,
  #navi ul li.navbar-menu-item *:hover,
  #navi ul li.navbar-menu-item *:focus,
  #navi ul li.navbar-menu-item *:active,
  #navi ul li.navbar-menu-item:hover *,
  #navi ul li.navbar-menu-item:hover *:hover,
  #navi ul li.navbar-menu-item:hover *:focus,
  #navi ul li.navbar-menu-item:hover *:active {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  nav.navbar-leather h1,
  nav.navbar-leather h2,
  nav.navbar-leather h3,
  nav.navbar-leather h4,
  nav.navbar-leather h5,
  nav.navbar-leather h6 {
    @apply text-gray-900 dark:text-gray-100;
  }

  nav.navbar-leather h1 a,
  nav.navbar-leather h2 a,
  nav.navbar-leather h3 a,
  nav.navbar-leather h4 a,
  nav.navbar-leather h5 a,
  nav.navbar-leather h6 a {
    @apply hover:text-primary-700 dark:hover:text-primary-300;
  }

  div.textarea-leather {
    @apply bg-primary-50 dark:bg-primary-1000;
  }

  div.textarea-leather > div:nth-child(1),
  div.toolbar-leather {
    @apply border-none;
  }

  div.textarea-leather > div:nth-child(2) {
    @apply bg-primary-50 dark:bg-primary-1000;
  }

  div.textarea-leather,
  div.textarea-leather textarea {
    @apply text-gray-900 dark:text-gray-100;
  }

  div.tooltip-leather {
    @apply text-gray-900 dark:text-gray-100;
  }

  div[role="tooltip"] button.btn-leather .tooltip-leather {
    @apply bg-primary-100 dark:bg-primary-800;
  }

  /* Network visualization */
  .network-link-leather {
    @apply stroke-primary-200 fill-primary-200;
  }

  .network-node-leather {
    @apply stroke-primary-600;
  }

  .network-node-content {
    @apply fill-primary-100;
  }

  /* Person link colors */
  .person-link-signed {
    @apply stroke-green-500;
  }

  .person-link-referenced {
    @apply stroke-blue-400;
  }

  /* Person anchor node */
  .person-anchor-node {
    @apply fill-green-400 stroke-green-600;
  }
}

/* Utilities can be applied via the @apply directive. */
@layer utilities {
  /* Removed redundant .h-leather and .h1-leather through .h6-leather - use base layer definitions instead */

  /* Line clamp utilities for text truncation */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .decoration-none {
    text-decoration: none !important;
  }

  /* Lists */
  .ol-leather li a,
  .ul-leather li a {
    @apply text-gray-900 dark:text-gray-100 hover:text-primary-700
      dark:hover:text-primary-300;
  }

  /* Links - consistent hover colors - improved contrast */
  .link {
    @apply underline cursor-pointer hover:text-primary-700
      dark:hover:text-primary-300;
  }

  .npub-badge {
    @apply inline-flex space-x-1 items-center text-primary-700
      dark:text-primary-300 hover:underline me-2 px-2 py-0.5 rounded-sm border
      border-primary-700 dark:border-primary-300;

    svg {
      @apply fill-primary-700 dark:fill-primary-300;
    }
  }

  [data-tech="off"] .tech-detail {
    @apply !hidden;
  }
}

/* Force remove backgrounds from DarkMode button - outside layer for max priority */
#navi ul li.navbar-menu-item:nth-child(2) *,
#navi ul li.navbar-menu-item:nth-child(2) *:hover,
#navi ul li.navbar-menu-item:nth-child(2) *:focus,
#navi ul li.navbar-menu-item:nth-child(2) *:active,
#navi ul li.navbar-menu-item:nth-child(2):hover *,
#navi ul li.navbar-menu-item:nth-child(2):hover *:hover {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

@layer components {
  nav a {
    text-decoration-line: none !important;
  }

  canvas.qr-code {
    @apply block mx-auto my-4;
  }

  /* Fix white wrapper behind buttons on publication content in light mode */
  main.publication div.flex.gap-2,
  main.publication div.flex.justify-between {
    @apply bg-transparent;
  }

  /* Override Flowbite light button white background in light mode to be more subtle */
  main.publication :global(button.bg-gray-100),
  main.publication :global(button.bg-gray-50) {
    @apply !bg-primary-100 !border-primary-200 !text-primary-800;
  }

  main.publication :global(button.bg-gray-100:hover),
  main.publication :global(button.bg-gray-50:hover) {
    @apply !bg-primary-200 !border-primary-300;
  }

  /* Legend */
  .leather-legend {
    @apply relative m-4 sm:m-0 sm:absolute sm:top-1 sm:left-1 flex-shrink-0 p-2
      rounded;
    @apply shadow-none text-primary-1000 border border-s-4 bg-highlight
      border-primary-200 has-[:hover]:border-primary-700;
    @apply dark:bg-primary-1000 dark:border-primary-800
      dark:has-[:hover]:bg-primary-950 dark:has-[:hover]:border-primary-500;
    max-width: 450px;
    min-width: 300px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Tooltip */
  .tooltip-leather {
    @apply fixed p-4 rounded shadow-lg bg-primary-50 dark:bg-primary-1000
      text-gray-900 dark:text-gray-100 border border-gray-200
      dark:border-gray-700 transition-colors duration-200;
    max-width: 400px;
    z-index: 1000;
  }

  .leather-legend button {
    @apply text-gray-900 dark:text-gray-100;
  }

  .publication-leather {
    @apply flex flex-col space-y-4;
    scroll-margin-top: 150px;
    scroll-behavior: smooth;
  }

  /* Publication headings inherit from base layer - removed duplicate definitions */

  .olist {
    @apply flex flex-col space-y-4;

    ol {
      @apply list-decimal px-6 flex flex-col space-y-2;

      li {
        .paragraph {
          @apply py-2;
        }
      }
    }
  }

  .ulist {
    @apply flex flex-col space-y-4;

    ul {
      @apply list-disc px-6 flex flex-col space-y-2;

      li {
        .paragraph {
          @apply py-2;
        }
      }
    }
  }

  /* All links - consistent hover behavior - improved contrast */
  a {
    @apply underline cursor-pointer hover:text-primary-700
      dark:hover:text-primary-300;
  }

  .imageblock {
    @apply flex flex-col items-center;

    .title {
      @apply text-sm text-center;
    }
  }

  .stemblock {
    @apply bg-gray-200 dark:bg-gray-800 p-4 rounded-lg;
  }

  .literalblock {
    pre {
      @apply text-wrap;
    }
  }

  table {
    @apply w-full overflow-x-auto;

    caption {
      @apply text-sm;
    }

    thead,
    tbody {
      th,
      td {
        @apply border border-gray-200 dark:border-gray-700;
      }
    }
  }

  /* Footnotes - improved contrast */
  .footnote-ref {
    text-decoration: none;
    color: var(--color-primary-700);
  }

  .dark .footnote-ref {
    color: var(--color-primary-300);
  }

  .footnotes {
    margin-top: 2rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }

  .footnotes hr {
    margin: 1rem 0;
    border-top: 1px solid var(--color-border);
  }

  .footnotes ol {
    padding-left: 1rem;
  }

  .line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .footnotes li {
    margin-bottom: 0.5rem;
  }

  .footnote-backref {
    text-decoration: none;
    margin-left: 0.5rem;
    color: var(--color-primary-700);
  }

  .dark .footnote-backref {
    color: var(--color-primary-300);
  }

  .note-leather .footnote-ref,
  .note-leather .footnote-backref {
    color: var(--color-primary-700);
  }

  .dark .note-leather .footnote-ref,
  .dark .note-leather .footnote-backref {
    color: var(--color-primary-300);
  }

  /* Scrollable content */
  .description-textarea,
  .prose-content {
    overflow-y: scroll !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent !important;
  }

  /* Section scroll behavior */
  section[id] {
    scroll-margin-top: 150px;
  }

  /* Ensure section headers maintain their padding */
  section[id] h1,
  section[id] h2,
  section[id] h3,
  section[id] h4,
  section[id] h5,
  section[id] h6 {
    @apply pt-4;
  }

  .description-textarea {
    min-height: 100% !important;
  }

  .description-textarea::-webkit-scrollbar,
  .prose-content::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
  }

  .description-textarea::-webkit-scrollbar-track,
  .prose-content::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .description-textarea::-webkit-scrollbar-thumb,
  .prose-content::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5) !important;
    border-radius: 4px !important;
  }

  .description-textarea::-webkit-scrollbar-thumb:hover,
  .prose-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.7) !important;
  }

  /* Tab content */
  .tab-content {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* Input styles */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea {
    @apply bg-primary-50 dark:bg-primary-1000 text-gray-900 dark:text-gray-100
      border-s-4 border-primary-200 rounded shadow-none;
    @apply focus:border-primary-600 dark:focus:border-primary-400;
  }

  /* Table of Contents highlighting - improved contrast */
  .toc-highlight {
    @apply bg-primary-300 dark:bg-primary-700 border-s-4 border-primary-700
      rounded dark:border-primary-300 font-medium text-gray-900
      dark:text-gray-100;
    transition: all 0.2s ease-in-out;
  }

  .toc-highlight:hover {
    @apply bg-primary-300 dark:bg-primary-600;
  }

  /* Override prose first-line bold styling */
  .prose p:first-line,
  .prose-sm p:first-line,
  .prose-invert p:first-line {
    font-weight: normal !important;
  }

  /* Prevent first-line indentation in prose content */
  .prose p,
  .prose-sm p,
  .prose-invert p {
    text-indent: 0 !important;
  }

  /* Ensure embedded event content doesn't have unwanted indentation */
  .embedded-event .prose p,
  .embedded-event .prose-sm p,
  .embedded-event .prose-invert p {
    text-indent: 0 !important;
    margin: 0 !important;
  }

  /* Prevent indentation for paragraphs with no-indent class */
  .no-indent {
    text-indent: 0 !important;
  }
}

.icon-wiki {
  font-size: 20px;
  line-height: 20px;
  vertical-align: text-bottom;
  font-weight: 500;
}