/* HTM UI baseline CSS.                                                    */
/* Only rules that can't be expressed as @tailwindcss/browser utility classes  */
/* live here. Components style themselves with canonical Tailwind classes;     */
/* link this once alongside theme.css.                                         */

/* iconify-icon is inline by default — force inline-flex so it participates in  */
/* flex gap and aligns properly inside buttons and other flex containers.       */
iconify-icon {
  display: inline-flex !important;
  flex-shrink: 0;
}

/* Checkmark for [data-slot="checkbox"] — inlined SVG. Kept here (instead of a   */
/* Tailwind arbitrary value) because @tailwindcss/browser doesn't reliably parse */
/* data: URLs containing SVG markup.                                             */
input[data-slot="checkbox"]:checked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M13.854 3.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 9.793l6.646-6.647a.5.5 0 0 1 .708 0z'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
}

/* Scrollbar helpers for internal scroll areas (sidebar, gallery panes). */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--muted-foreground) 32%, transparent) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: color-mix(in oklab, var(--muted-foreground) 32%, transparent);
}
.scrollbar-thin:hover::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklab, var(--muted-foreground) 48%, transparent);
}
.scrollbar-hidden {
  scrollbar-width: none;
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* GitHub Light / Dark syntax palette for documentation code blocks. */
.code-theme-github {
  --syntax-foreground: #1f2328;
  --syntax-comment: #6e7781;
  --syntax-keyword: #cf222e;
  --syntax-string: #0a3069;
  --syntax-tag: #116329;
  --syntax-number: #0550ae;
  --syntax-function: #8250df;
  --syntax-attribute: #0550ae;
  --syntax-operator: #cf222e;
  --syntax-punctuation: #6e7781;
  background: var(--sidebar);
  color: var(--syntax-foreground);
}
.dark .code-theme-github {
  --syntax-foreground: #e6edf3;
  --syntax-comment: #8b949e;
  --syntax-keyword: #ff7b72;
  --syntax-string: #a5d6ff;
  --syntax-tag: #7ee787;
  --syntax-number: #79c0ff;
  --syntax-function: #d2a8ff;
  --syntax-attribute: #79c0ff;
  --syntax-operator: #ff7b72;
  --syntax-punctuation: #8b949e;
  background: #0d1117;
  border-color: #30363d;
}
.syntax-comment {
  color: var(--syntax-comment);
  font-style: italic;
}
.syntax-keyword {
  color: var(--syntax-keyword);
  font-weight: 600;
}
.syntax-string {
  color: var(--syntax-string);
}
.syntax-tag {
  color: var(--syntax-tag);
}
.syntax-number {
  color: var(--syntax-number);
}
.syntax-function {
  color: var(--syntax-function);
  font-weight: 600;
}
.syntax-component {
  color: inherit;
  font-weight: inherit;
}
.syntax-attribute {
  color: var(--syntax-attribute);
}
.syntax-identifier {
  color: var(--syntax-foreground);
}
.syntax-operator,
.syntax-interpolation {
  color: var(--syntax-operator);
}
.syntax-punctuation,
.syntax-template-punctuation {
  color: var(--syntax-punctuation);
}