/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* Application-wide custom styles go here */
/*
 * Markdown Rendering Styles
 *
 * Custom styles for Markdown-rendered content in skill descriptions.
 * Applied via the 'prose' class on containers.
 *
 * Locations:
 * - Skill show page: app/views/skills/show.html.erb (description section)
 * - Skill form preview: app/views/skills/_form.html.erb (live preview)
 */

/* Headers */
.prose h1 {
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.25;
  color: #111827; /* gray-900 */
}

.prose h2 {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  color: #111827; /* gray-900 */
}

.prose h3 {
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  color: #1f2937; /* gray-800 */
}

.prose h4 {
  font-size: 1rem; /* 16px */
  font-weight: 600;
  margin-top: 0.875rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: #1f2937; /* gray-800 */
}

.prose h5 {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.375rem;
  line-height: 1.5;
  color: #374151; /* gray-700 */
}

.prose h6 {
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.375rem;
  line-height: 1.5;
  color: #374151; /* gray-700 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Paragraphs */
.prose p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.625;
}

/* First paragraph has no top margin */
.prose > p:first-child,
.prose > h1:first-child,
.prose > h2:first-child,
.prose > h3:first-child,
.prose > h4:first-child,
.prose > h5:first-child,
.prose > h6:first-child {
  margin-top: 0;
}

/* Text formatting */
.prose strong {
  font-weight: 600;
  color: #111827; /* gray-900 */
}

.prose em {
  font-style: italic;
}

.prose del {
  text-decoration: line-through;
  color: #6b7280; /* gray-500 */
}

/* Code */
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.875em;
  background-color: #f3f4f6; /* gray-100 */
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #1f2937; /* gray-800 */
}

.prose pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  background-color: #f9fafb; /* gray-50 */
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  line-height: 1.625;
}

.prose pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Lists */
.prose ul,
.prose ol {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  padding-left: 1.625rem;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  line-height: 1.625;
}

.prose ul ul,
.prose ul ol,
.prose ol ul,
.prose ol ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Nested list styling */
.prose ul > li > ul {
  list-style-type: circle;
}

.prose ul > li > ul > li > ul {
  list-style-type: square;
}

/* Links */
.prose a {
  color: #2563eb; /* blue-600 */
  text-decoration: underline;
  font-weight: 500;
}

.prose a:hover {
  color: #1d4ed8; /* blue-700 */
}

/* Line breaks */
.prose br {
  content: '';
  margin-top: 0;
  margin-bottom: 0;
}

/* Spacing between block elements */
.prose > * + * {
  margin-top: 0.75rem;
}

.prose > h1 + *,
.prose > h2 + *,
.prose > h3 + * {
  margin-top: 0.5rem;
}

/* Small prose variant (used in preview with line-clamp) */
.prose-sm h1 {
  font-size: 1.25rem; /* 20px */
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

.prose-sm h2 {
  font-size: 1.125rem; /* 18px */
  margin-top: 0.875rem;
  margin-bottom: 0.625rem;
}

.prose-sm h3 {
  font-size: 1rem; /* 16px */
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

.prose-sm h4,
.prose-sm h5,
.prose-sm h6 {
  font-size: 0.875rem; /* 14px */
  margin-top: 0.625rem;
  margin-bottom: 0.375rem;
}

.prose-sm p {
  font-size: 0.875rem; /* 14px */
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.prose-sm code {
  font-size: 0.8125em;
}

.prose-sm pre {
  font-size: 0.8125rem;
  padding: 0.625rem 0.875rem;
}

.prose-sm ul,
.prose-sm ol {
  padding-left: 1.375rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.prose-sm li {
  font-size: 0.875rem; /* 14px */
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

/* Max-width none (allow full width in containers) */
.prose.max-w-none {
  max-width: none;
}

/* Character limit warning color (used by character counter) */
.text-red-600 {
  color: #dc2626; /* red-600 */
}

/* Markdown preview-specific styles */
#markdown-preview-content.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Expanded state removes line clamp */
#markdown-preview-content.expanded {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

/* Preview container transitions */
#markdown-preview-content {
  transition: max-height 0.3s ease-in-out;
}
/* Toggle Switch Styles */

.toggle-switch {
  background-color: #d1d5db; /* gray-300 */
}

.toggle-switch--on {
  background-color: #4f46e5; /* indigo-600 */
}

.toggle-switch--off {
  background-color: #d1d5db; /* gray-300 */
}

.toggle-switch--on .toggle-switch-thumb {
  transform: translateX(1.25rem); /* translate-x-5 */
}

.toggle-switch--off .toggle-switch-thumb {
  transform: translateX(0);
}