/* 
 * RLS Lab - Custom Styles
 * Using Tailwind CSS via CDN (see baseof.html)
 * This file contains custom overrides and prose styles
 */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom selection color */
::selection {
  background-color: rgb(99 102 241 / 0.3);
}

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

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

/* Prose customizations for content */
.prose {
  --tw-prose-body: #3f3f46;
  --tw-prose-headings: #18181b;
  --tw-prose-links: #4f46e5;
  --tw-prose-code: #18181b;
  --tw-prose-pre-bg: #18181b;
}

.dark .prose {
  --tw-prose-body: #a1a1aa;
  --tw-prose-headings: #fafafa;
  --tw-prose-links: #818cf8;
  --tw-prose-code: #fafafa;
  --tw-prose-pre-bg: #18181b;
}

/* Code blocks */
.prose pre {
  background-color: #282a36;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 0;
}

.prose pre code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  background: none;
  padding: 0;
  border-radius: 0;
}

.code-block {
  margin: 1.5rem 0;
}

.code-block .code-content {
  background-color: #282a36;
}

.code-block .code-content pre {
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  background-color: #282a36 !important;
  border-radius: 0 !important;
  overflow-x: auto;
}

.code-block .code-content code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  background: none !important;
  padding: 0 !important;
}

/* Chroma syntax highlighting overrides */
.chroma {
  background-color: #282a36 !important;
}

.prose code {
  font-size: 0.875em;
  font-weight: 500;
}

/* Task list checkboxes */
.prose input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid #a1a1aa;
  border-radius: 0.25rem;
  background: transparent;
  margin-right: 0.5rem;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}

.dark .prose input[type="checkbox"] {
  border-color: #71717a;
}

.prose input[type="checkbox"]:checked {
  border-color: #ef4444;
}

.prose input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #ef4444;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.prose ul:has(input[type="checkbox"]) {
  list-style: none;
  padding-left: 0;
}

.prose ul:has(input[type="checkbox"]) li {
  padding-left: 0;
}

.prose :not(pre) > code {
  background-color: rgb(244 244 245);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

.dark .prose :not(pre) > code {
  background-color: rgb(39 39 42);
}

/* Focus styles */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgb(99 102 241);
  outline-offset: 2px;
}

/* Transitions */
* {
  transition-property: color, background-color, border-color, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Disable transitions on page load */
.no-transitions * {
  transition: none !important;
}