/* Custom UI polish - Clean tech platform with three-color palette */
:root{
  /* Primary color - Green */
  --primary:#7bed9f;             /* Primary green */

  /* Secondary color - Pink/Magenta */
  --secondary:#BF567D;          /* Secondary pink */

  /* Logo and title color - Blue */
  --logo-color:#5352ed;         /* Logo and question titles */

  /* Text - Very dark grey (almost black) */
  --text:#1a1a1a;               /* Almost black for all text */

  /* Derived colors */
  --bg:#ffffff;                 /* Pure white */
  --bg-alt:#fafbfc;            /* Subtle off-white */
  --bg-subtle:#f6f8fa;         /* Very subtle background */
  --border:#d0d7de;            /* Subtle border */
  --border-subtle:#e1e4e8;     /* Even more subtle borders */

  /* UI selection/highlight */
  --selected-bg: rgba(123, 237, 159, 0.3);

  /* Readable background (cards, code blocks, etc.) */
  --readable: #fffafb;
}

/* Questions index info card: all messages in DOM; JS shows one at random (avoids Turbo cache flash) */
.info-card-message {
  display: none;
}
.info-card-message.visible {
  display: block;
}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  /* Prevent long words/URLs from overflowing containers */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
/* Logo should not have underline */
a.logo:hover, a#logo:hover {
  text-decoration: none !important;
}
/* Elements with background hover effects should not have underline */
a.tag:hover, a.badge:hover, a.btn:hover,
.tag:hover, .badge:hover, .btn:hover {
  text-decoration: none !important;
}
/* Links with background colors should not underline on hover */
a.bg-gray-200:hover,
a.bg-gray-300:hover,
a.bg-red-600:hover,
a.bg-red-700:hover,
a.bg-blue-600:hover,
a.bg-blue-700:hover {
  text-decoration: none !important;
}

/* Layout polish - GitHub-inspired, clean, professional */
header{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding: 0.75rem 0;
  border-top: 4px solid var(--primary);
}
main{
  min-height:60vh;
}

section > div {
  margin-bottom: 0.6rem;
}

/* Cards, buttons, badges - GitHub-inspired, clean, professional */

.card{
  background-color: white;
  border-top:1px solid var(--border);
  border-radius:0px;
  box-shadow: 0 1px 0 rgba(27,31,35,.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.recent-submissions-list .card{
  border-top: none;
}

.card.notification-card {
  border-top: 1px solid red;
}

/* Submission: one grouped block for Discuss, Reply, emoji reactions, and replies thread */
.submission-interaction {
  background: var(--bg-alt) !important;
  border-radius: 6px;
  padding: 0.4rem;
}

/* Emoji reaction buttons: no border, circle-from-center hover (0.25s), full logo color */
.emoji-reaction-btn {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 28px;
  cursor: pointer;
  isolation: isolate; /* stacking context so ::after stays behind inner */
}
.emoji-reaction-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  margin-left: -100%;
  margin-top: -100%;
  background: var(--logo-color);
  border-radius: 50%;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.25s ease-out;
  pointer-events: none;
  z-index: -1;
}
.emoji-reaction-btn:hover::after {
  transform: scale(1);
}
.emoji-reaction-btn-inner {
  position: relative;
  z-index: 0;
}

/* 28px border radius for reaction pills and emoji picker buttons */
.rounded-28 {
  border-radius: 28px;
}

/* Reaction count pills: above interaction div, logo-color bg, white count, x2/x3 when > 1 */
.submission-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.4rem;
  background: var(--logo-color);
  border-radius: 28px;
  color: white;
  font-size: 0.9rem;
}
.submission-reaction-pill-count {
  color: white;
}

/* Question titles in lists use logo color */
h2 a.text-blue-700, h3 a.text-blue-700, a.text-blue-700[style*="3742fa"] {
  color: var(--logo-color) !important;
}
h2 a.text-blue-700:hover, h3 a.text-blue-700:hover, a.text-blue-700[style*="3742fa"]:hover {
  color: var(--logo-color) !important;
  text-decoration: underline;
}

/* Submission chat: question link styling */
.ggai-question-link{
  color: var(--logo-color) !important;
  font-size: 1.2rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  border-radius:6px;
  font-weight:500;
  text-decoration:none !important;
  font-size: 0.875rem;
  border: 1px solid;
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover {
  text-decoration: none !important;
}
.btn-primary{
  background:var(--primary);
  color:var(--text);
  border-color: var(--primary);
}
.btn-primary:hover{
  background:#6ae08f;
  color: var(--text);
  border-color: #6ae08f;
}
.btn-secondary{
  background:#f6f8fa;
  color:var(--text);
  border-color: var(--border);
}
.btn-secondary:hover{
  background:#f3f4f6;
  border-color: var(--border);
}
.badge{
  display:inline-block;
  font-size:.75rem;
  line-height:1.25;
  padding: .14rem 0.5rem .125rem 0.5rem;
  border-radius:12px;
  background:var(--bg-subtle);
  color:var(--text-muted);
  border:1px solid var(--border);
  font-weight: 500;
  text-decoration: none !important;
}
.badge:hover {
  text-decoration: none !important;
}

/* Verdict badges */
.badge.badge-verdict-correct {
  background: var(--selected-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--primary) !important;
}

.badge.badge-verdict-partial {
  background: #fbf4de !important;
  color: var(--text) !important;
  border: 1px solid #eccc68 !important;
}

.badge.badge-verdict-incorrect {
  background: #ffdee3 !important;
  color: var(--text) !important;
  border: 1px solid #ff6b81 !important;
}

/* Following badge (communities index): same look as Correct verdict */
.badge.badge-following {
  background: var(--selected-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--primary) !important;
}

.tag{
  background:var(--bg-subtle);
  color:var(--text);
  border-radius:12px;
  padding: .25rem .5rem .13rem .5rem;
  font-size:.8125rem;
  border: 1px solid var(--border);
  font-weight: 400;
  transition: all 0.15s;
  text-decoration: none !important;
}
.tag:hover{
  background: var(--primary);
  color: var(--text);
  border-color: var(--primary);
  text-decoration: none !important;
}
.tag.selected, .bg-blue-200 {
  background: var(--selected-bg) !important;
  border-color: var(--primary) !important;
}

/* Submission count: same style as tags but not interactive */
.tag-submission-count {
  cursor: default;
  pointer-events: none;
  border-color: var(--primary) !important;
  background: transparent !important;
}

/* Tag buttons (for popular tags) */
button.tag-popular {
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  cursor: pointer;
  font-family: inherit;
  /* font-size: inherit; */
}
button.tag-popular:hover {
  background: var(--primary);
  color: var(--text);
  border-color: var(--primary);
}
button.tag-popular.selected,
button.tag-answered.selected,
button.tag-unanswered.selected,
button.tag-match.selected,
button.difficulty-button.selected {
  background: var(--selected-bg) !important;
  border-color: var(--primary) !important;
}
button.tag-answered,
button.tag-unanswered,
button.tag-match,
button.difficulty-button {
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  cursor: pointer;
  font-family: inherit;
}
button.tag-clear {
  border: 1px solid #ff6b81;
  background: #ffdee3;
  cursor: pointer;
  font-family: inherit;
}
.tag-small {
  font-size: 0.75rem !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 6px !important;
  gap: 0.2rem;
}

/* Selected tags in questions index sidebar: same size as .tag-small but 12px radius */
.tag-selected-sidebar {
  font-size: 0.75rem !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 12px !important;
  gap: 0.2rem;
}

button.tag-answered:hover,
button.tag-unanswered:hover,
button.tag-match:hover,
button.difficulty-button:hover {
  background: var(--primary);
  color: var(--text);
  border-color: var(--primary);
}
button.tag-clear:hover {
  background: #ff6b81;
  color: #fff;
  border-color: #ff6b81;
}

/* Visit source button: leave icon (height matches font size) */
.visit-source-leave-icon {
  height: 1em;
  width: auto;
  vertical-align: -0.15em;
}

/* Shuffle emojis button: icon only, compact padding (override .btn-sm) */
.btn-sm.shuffle-emojis-btn {
  padding: 0.175rem 0.35rem;
  font-size: 1.15rem;
}
.shuffle-emojis-icon {
  height: 1em;
  width: auto;
  vertical-align: -0.15em;
  display: block;
}

.submission-reaction-pill-emoji {
  margin-left: -1px !important;
}

.alert{
  border-radius:6px;
  padding:.75rem 1rem;
  border: 1px solid;
}
.alert-notice{
  background:#f0fdf4;
  border-color: var(--primary);
  color:var(--text);
}
.alert-alert{
  background:#fff5f5;
  border-color: var(--secondary);
  color:var(--text);
}

/* Typography polish - Clean, readable, professional */
* {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Logo uses Space Grotesk */
.logo, #logo {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: var(--logo-color) !important;
  text-decoration: none !important;
  font-size: 1.2rem;
  margin-left: -3px;
}

.logo:hover, #logo:hover {
  color: var(--primary) !important;
  text-decoration: none !important;
}


.prose p{
  margin:0.5rem 0;
  line-height: 1.6;
  font-size: 1rem;
}

/* Nested comments: keep bubbles compact */
.comment-bubble .prose p{
  margin:0 !important;
}

/* ggAI responses: markdown + smaller headings */
.ggai-response{
  font-size: 1rem;
  line-height: 1.5;
}
.ggai-response p{
  margin: 0.25rem 0;
}
.ggai-response h1{ font-size: 1.4rem; margin: 0.5rem 0 0.25rem; font-weight: 700; }
.ggai-response h2{ font-size: 1.2rem; margin: 0.5rem 0 0.25rem; font-weight: 700; }
.ggai-response h3{ font-size: 1.1rem;  margin: 0.4rem 0 0.2rem;  font-weight: 700; }
.ggai-response h4{ font-size: 1rem; margin: 0.35rem 0 0.2rem; font-weight: 700; }
.ggai-response pre{
  overflow-x: auto;
  padding: 0.5rem 0.75rem;
  background-color: #f3f4f6;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
}
.ggai-response pre code{
  background: none;
  padding: 0;
  border-radius: 0;
}
.ggai-response code{
  font-size: 0.9em;
  font-family: ui-monospace, monospace;
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}
.ggai-response ul{
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}
.ggai-response ol{
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}
.ggai-response li{
  margin: 0.25rem 0;
}
.ggai-response table{
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin: 0.5rem 0;
  font-size: 0.95em;
  table-layout: fixed;
}
.ggai-response th,
.ggai-response td{
  border: 1px solid #e5e7eb;
  padding: 0.375rem 0.75rem;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-all;
}
.ggai-response th{
  font-weight: 600;
  background-color: #f9fafb;
}

.ggai-divider{
  height: 1px;
  width: 20px;
  background: var(--logo-color);
  margin-top: 6px;
}

/* Submission chat: fixed composer UX */
.submission-chat:not(.fixed-composer) .submission-chat-composer-wrap{
  margin-top: 1rem;
}
.submission-chat.fixed-composer .submission-chat-composer-wrap{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}
.submission-chat.fixed-composer .submission-chat-composer-container{
  padding-left: 1rem;
  padding-right: 1rem;
}
.submission-chat:not(.fixed-composer) .submission-chat-composer-container{
  padding-left: 0;
  padding-right: 0;
}
.submission-chat-composer-inner{
  display: block;
}
.submission-chat.fixed-composer .submission-chat-composer-inner{
  background: white;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.composer-transition-in{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.composer-transition-in.composer-transition-in-active{
  opacity: 1;
  transform: translateY(0);
}
.question-highlight {
  background-color: #d9d9fb;
  padding: 0.1rem 0.8rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.submission-answer {
  background-color: #d9d9fb;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.submission-textarea {
  border: 4px solid var(--primary) !important;
  border-radius: 6px;
  padding: 0.625rem 0.875rem;
  resize: none;
  overflow-y: hidden;
  min-height: 3rem;
  line-height: 1.5;
}
.submission-textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--primary) !important;
}

/* Comments textarea matches answer styling, but slightly shorter */
.comment-textarea{
  border: 4px solid var(--primary) !important;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  resize: none;
  line-height: 1.5;
  min-height: 2.5rem;
}
.comment-textarea:focus{
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--primary) !important;
}

@media (max-width: 768px) {
  .submission-textarea {
    max-height: calc(1.5em * 3 + 1.25rem + 8px); /* 3 lines + padding + border */
  }
}

@media (min-width: 769px) {
  .submission-textarea {
    max-height: calc(1.5em * 10 + 1.25rem + 8px); /* 10 lines + padding + border */
  }
}

/* Source note textarea - matches submission/comment styling */
.source-note-textarea {
  border: 4px solid var(--primary) !important;
  border-radius: 6px;
  padding: 0.625rem 0.875rem;
  resize: none;
  overflow-y: hidden;
  min-height: 3rem;
  line-height: 1.5;
}
.source-note-textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--primary) !important;
}

/* Source text display styling */
.source-text-container {
  background-color: var(--readable) !important;
  border-top: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
}

.source-text-content {
  font-size: 1.05rem;
  /* font-family: 'Noto Serif', serif; */
  font-weight: normal;
  line-height: 1.8;
}

/* Source section on question show page */
.source-container-question {
  background-color: var(--readable) !important;
  border-top: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
}

/* Hint and prompt sections - align with source section layout */
.hint-prompt-container {
  border-top: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
}

/* Source URL wrapping - ensure long URLs wrap instead of overflowing */
/* More aggressive breaking for URLs specifically */
.source-url-link {
  word-break: break-all;
}

.source-content-question {
  font-size: 0.925rem;
  /* font-family: 'Noto Serif', serif; */
  font-weight: normal;
  line-height: 1.8;
}

/* Button matching source background */
.btn-source-background {
  background-color: var(--readable);
  border-color: var(--border);
  color: var(--text);
}

.btn-source-background:hover {
  background-color: #f5f0e0;
  border-color: var(--border);
  color: var(--text);
}

/* Source form inputs - Title and URL are single line like comment-textarea */
.source-title-input,
.source-url-input {
  border: 4px solid var(--primary) !important;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  resize: none;
  line-height: 1.5;
  min-height: 2.5rem;
  overflow-y: hidden;
}
.source-title-input:focus,
.source-url-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--primary) !important;
}

/* Source content textarea - one line more than submission-textarea */
.source-content-textarea {
  border: 4px solid var(--primary) !important;
  border-radius: 6px;
  padding: 0.625rem 0.875rem;
  resize: none;
  overflow-y: hidden;
  min-height: 4rem;
  line-height: 1.5;
}
.source-content-textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--primary) !important;
}

@media (max-width: 768px) {
  .source-content-textarea {
    max-height: calc(1.5em * 5 + 1.25rem + 8px); /* 5 lines + padding + border */
  }
}

@media (min-width: 769px) {
  .source-content-textarea {
    max-height: calc(1.5em * 15 + 1.25rem + 8px); /* 15 lines + padding + border */
  }
}
.question-text {
  font-size: 1.4rem !important;
}
.question-text p {
  font-size: 1.4rem !important;
}
.h1, h1{
  font-size:2rem;
  font-weight:600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 0.375rem;
}
.h2, h2{
  font-size:1.5rem;
  font-weight:600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 0.375rem;
}
.h3, h3{
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 0.375rem;
}
.small{
  font-size:.875rem;
  color:var(--text);
  font-weight: 400;
}

/* Form elements - Clean, usable, accessible */
input[type="text"], input[type="email"], input[type="password"], select, textarea{
  width:100%;
  padding:.625rem .875rem;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  color:var(--text);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  transition: all 0.2s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--muted-terracotta);
  box-shadow: 0 0 0 3px rgba(188, 76, 69, 0.1);
}
label{
  font-size:.875rem;
  color:var(--text);
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

/* Spacing helpers - Tighter, GitHub-like density */
.mt-24{ margin-top:6rem; }
.mt-12{ margin-top:3rem; }
.mt-6{ margin-top:1rem; }
.mb-6{ margin-bottom:1rem; }
.mb-4{ margin-bottom:0.75rem; }
.mb-3{ margin-bottom:0.5rem; }
.mb-2{ margin-bottom:0.375rem; }
.mb-1{ margin-bottom:0.25rem; }
.mb-0{ margin-bottom: 0 !important; }
.p-6{ padding:1rem; }
.p-4{ padding:0.75rem; }
.p-3{ padding:0.5rem; }
.pb-2{ padding-bottom:0.375rem; }
.pb-3{ padding-bottom:0.5rem; }
.pb-9 { padding-bottom:1.5rem; }
.py-4{ padding-top:0.75rem; padding-bottom:0.75rem; }
.py-3{ padding-top:0.5rem; padding-bottom:0.5rem; }
.px-5{ padding-left:1rem; padding-right:1rem; }
.gap-1{ gap:0.25rem; }
.gap-2{ gap:0.375rem; }
.gap-3{ gap:0.5rem; }
.gap-4{ gap:0.75rem; }
.space-y-3 > * + *{ margin-top:0.5rem; }
.h-2{height: 2rem;}

/* Color & background helpers - Three-color palette */
.bg-white{ background:#fff!important; }
.bg-gray-50{ background:var(--bg-alt)!important; }
.bg-gray-100{ background:var(--bg-subtle)!important; }
.text-gray-900{ color:var(--text)!important; }
.text-gray-800{ color:var(--text)!important; }
.text-gray-700{ color:var(--text)!important; }
.text-gray-600{ color:var(--text)!important; }
.text-gray-500{ color:var(--text)!important; }
.text-blue-700{ color:var(--primary)!important; }
.text-green-700{ color:var(--primary)!important; }
.text-red-700{ color:var(--secondary)!important; }

/* Border & radius - Clean, modern */
.border{ border:1px solid var(--border)!important; }
.border-b{ border-bottom:1px solid var(--border)!important; }
.submission-item.border-b:last-child{ border-bottom:none!important; }
.submission-item:last-child{ margin-bottom:0!important; padding-bottom:0!important; }
.submission-item:not(:first-child){ margin-top:1.75rem; }
.rounded{ border-radius:6px!important; }
.rounded-full{ border-radius:9999px!important; }
.rounded-lg{ border-radius:8px!important; }

/* Display & layout helpers */
.container{ max-width:80rem; margin-left:auto; margin-right:auto; }
.flex{ display:flex!important; }
.inline-flex{ display:inline-flex!important; }
.items-center{ align-items:center!important; }
.justify-between{ justify-content:space-between!important; }
.justify-center{ justify-content: center; }
.hidden{ display:none!important; }
.block{ display:block!important; }

/* Positioning helpers (critical for header) */
.fixed{ position:fixed!important; }
.absolute{ position:absolute!important; }
.top-0{ top:0!important; }
.inset-x-0{ left:0!important; right:0!important; }
.z-50{ z-index:50!important; }

/* Header notification dot and communities dot: keep visible and above link (avoids clipping / stacking) */
header [data-controller="notification-dot"],
header .header-communities-link-wrap {
  overflow: visible;
}

/* Username (notification) dot in nav */
#header-notification-dot > span {
  position: relative !important;
  display: inline-block !important;
  top: -16px;
  right: -1px;
  width: 6px;
  height: 6px;
  background-color: #ef4444;
  border-radius: 9999px;
  z-index: 1;
  vertical-align: middle;
}

/* Communities link dot in nav */
#header-communities-dot > span {
  position: relative !important;
  display: inline-block !important;
  top: -15px;
  right: -1px;
  width: 6px;
  height: 6px;
  background-color: #ef4444;
  border-radius: 9999px;
  z-index: 1;
  vertical-align: middle;
}

/* Communities h2 / list dot (index and questions list) */
.header-nav-dot > span {
  position: relative !important;
  display: inline-block !important;
  top: -25px;
  right: 4px;
  width: 6px;
  height: 6px;
  background-color: #ef4444;
  border-radius: 9999px;
  z-index: 1;
  vertical-align: middle;
}

#header-notification-dot,
#header-communities-dot,
.header-nav-dot {
  display: inline-block;
  position: relative;
  width: 6px;
  height: 6px;
  vertical-align: middle;
}

/* Size & typography helpers - Readable sizes */
.text-xs{ font-size:.8125rem; line-height: 1.5; }
.text-sm{ font-size:.875rem; line-height: 1.5; }
.text-base{ font-size:1rem; line-height: 1.6; }
.text-lg{ font-size:1.125rem; line-height: 1.6; }
.text-xl{ font-size:1.25rem; line-height: 1.5; }
.text-2xl{ font-size:1.5rem; line-height: 1.4; }
.text-3xl{ font-size:1.875rem; line-height: 1.3; }
.text-4xl{ font-size:2.25rem; line-height: 1.2; }
.font-semibold{ font-weight:600; }
.font-bold{ font-weight:700; }

/* Hover helpers - Using primary color */
.hover\:text-gray-900:hover{ color:var(--text)!important; }
.hover\:bg-blue-700:hover{ background:var(--primary)!important; }
.hover\:bg-gray-300:hover{ background:var(--bg-subtle)!important; }
.hover\:text-blue-900:hover{ color:var(--primary)!important; }
.hover\:underline:hover{ text-decoration: underline !important; text-decoration-thickness: 1px; }

/* Community links - consistent styling with hover underline */
a.community-link {
  color: var(--logo-color);
}
a.community-link:hover {
  text-decoration: underline !important;
}
a.community-link .community-color-ball + * {
  text-decoration: none;
}
a.community-link:hover .community-color-ball + * {
  text-decoration: underline !important;
}

/* Utility to ensure tag badges look consistent */
.tag, .badge{
  border:1px solid var(--border);
  background:var(--bg-subtle);
  color:var(--text);
  border-radius:12px;
  font-weight: 400;
  text-decoration: none !important;
}
.tag:hover, .badge:hover {
  text-decoration: none !important;
}

/* Tables used in lists if any */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:.5rem .75rem; border-bottom:1px solid var(--border); text-align:left; }

.discussion { margin-top: 0rem;}

/* Brand-specific enhancements - Using primary color */
a.text-blue-700 {
  color: var(--primary) !important;
  font-weight: 500;
  transition: color 0.2s;
}
a.text-blue-700:hover {
  color: var(--primary) !important;
}

/* Links - Using primary color */
a:not(.btn):not(.tag):not(.badge):not(.logo):not(#logo):not(.bg-gray-200):not(.bg-gray-300):not(.bg-red-600):not(.bg-red-700):not(.bg-blue-600):not(.bg-blue-700) {
  color: var(--primary);
  font-weight: 500;
  transition: color 0.2s;
  text-decoration: none;
}
a:not(.btn):not(.tag):not(.badge):not(.logo):not(#logo):not(.bg-gray-200):not(.bg-gray-300):not(.bg-red-600):not(.bg-red-700):not(.bg-blue-600):not(.bg-blue-700):hover {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Emoji sign-in links (submission partial): no underline on hover */
.emoji-reaction-signin-link,
.emoji-reaction-signin-link:hover {
  text-decoration: none !important;
}

/* Header styling - Clean, professional */
header {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
header a {
  font-weight: 500;
  color: var(--text);
}
header a:hover {
  color: var(--primary);
}
header .font-bold {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--logo-color);
  font-family: 'Space Grotesk', sans-serif;
  transition: color 0.2s;
}
header .font-bold:hover {
  color: var(--primary);
}

/* Button sizing */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* Branded button helpers */
.branded-span{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--logo-color);
}
.branded-span.branded-span-lg{
  font-size: 1.6rem;
}
.btn-sm.branded-btn{
  font-size: 0.8125rem; /* keep small button text size consistent */
  gap: 0.25rem;
}

/* Details/summary styling for consistent button appearance */
details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary.btn {
  user-select: none;
}

/* Tighter spacing for forms and lists */
.space-y-2 > * + * {
  margin-top: 0.375rem;
}
.space-y-3 > * + * {
  margin-top: 0.5rem;
}

/* Card content spacing - Tighter */
.card h2, .card h3 {
  margin-bottom: 0.375rem;
}
.card > div {
  margin-bottom: 0.5rem;
}
.community-sources-card > div,
.community-posts-card > div {
  margin-bottom: 0.25rem;
}
.community-sources-card > div:last-child,
.community-posts-card > div:last-child {
  margin-bottom: 0;
}
.card .border-t {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

/* Input focus states - Using primary color */
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(123, 237, 159, 0.2) !important;
}

/* Additional color helpers */
.text-success, .text-green {
  color: var(--primary) !important;
}
.text-secondary {
  color: var(--secondary) !important;
}

/* GitHub-inspired subtle enhancements */
code, pre {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* Avoid "code inside code" styling for fenced blocks */
pre code{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

/* Subtle background variations for sections */
.bg-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Subtle divider styling */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

/* More refined spacing for lists */
ul, ol {
  padding-left: 1.5rem;
}

/* Selection color using primary */
::selection {
  background: var(--selected-bg);
  color: var(--text);
}

/* New questions: flash green then fade to white */
@keyframes newQuestionFlash {
  0% { background-color: var(--selected-bg); }
  100% { background-color: var(--bg); }
}
.new-question-flash {
  background-color: var(--selected-bg);
  animation: newQuestionFlash 1s ease-out forwards;
}

/* Pagination styles - match tag-small button styling */
.pagination-page.tag-small,
.pagination-link.tag-small {
  font-size: 0.75rem !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 6px !important;
}

.pagination-page.pagination-current.selected {
  background: var(--selected-bg) !important;
  border-color: var(--primary) !important;
}

/* Username links styling */
.username-link {
  color: #ff6b81 !important;
}
.username-link:hover {
  text-decoration: underline;
}

/* Source content preview on sources index: same font as source show page (.source-text-content) */
.source-content-preview {
  background-color: var(--readable);
  /* font-family: 'Noto Serif', serif; */
  padding: 1rem;
  font-size: 1.05rem;
}

/* Multiple choice options styling */
.multiple-choice-option {
  border: 1px solid var(--border) !important;
  background-color: var(--bg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

/* Remove space-y-3 margin for multiple choice options container */
.multiple-choice-options-container.space-y-3 > :not(:last-child),
:where(.multiple-choice-options-container.space-y-3 > :not(:last-child)) {
  margin-block-end: 0 !important;
}

.multiple-choice-option:hover {
  border-color: var(--primary) !important;
  background-color: var(--bg-alt);
}

.multiple-choice-option.border-primary {
  border-color: var(--primary) !important;
  background-color: var(--selected-bg);
}

.multiple-choice-option .option-radio {
  border-color: var(--border);
  transition: border-color 0.2s ease;
}

.multiple-choice-option.border-primary .option-radio {
  border-color: var(--primary);
}

.multiple-choice-option .option-radio-inner {
  background-color: var(--primary);
}

.multiple-choice-option-text {
  color: var(--text);
  text-align: left;
}

.multiple-choice-option-text p {
  margin: 0;
  text-align: left;
}

.multiple-choice-option-text p:not(:last-child) {
  margin-bottom: 0.5rem;
}

/* Style lists in multiple choice options as fallback (though we prefer plain text) */
.multiple-choice-option-text ul,
.multiple-choice-option-text ol {
  margin: 0;
  padding-left: 1.25rem;
  text-align: left;
}

.multiple-choice-option-text ul {
  list-style-type: disc;
}

.multiple-choice-option-text ol {
  list-style-type: decimal;
}

.multiple-choice-option-text li {
  margin: 0.25rem 0;
  text-align: left;
}
.source-text-toggle-buttons {
  display: flex;
}

.source-text-toggle-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.source-text-toggle-btn:hover {
  border-color: var(--primary);
  background-color: var(--bg-alt);
}

.source-text-toggle-btn.active {
  border-color: var(--primary);
  background-color: var(--selected-bg);
}

.source-text-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Source text layout transitions */
.source-main-section,
.source-text-aside {
  transition: all 0.3s ease;
}

/* Neuron loader container - base styles */
.neuron-loader-container {
  display: inline-flex;
  align-items: center;
  height: 37px;
  vertical-align: middle;
  background-color: transparent;
  border-radius: 8px 8px 50px 50px;
  width: 28px;
  justify-content: center;
  overflow: hidden;
  transition: background-color 2s;
}

/* Hover version - fades to dark on hover */
.neuron-loader-container.neuron-loader-hover:hover {
  background-color: #2f2f2f;
}

/* Trigger background fade when logo is hovered (using class added by JS) */
.neuron-loader-container.neuron-loader-hover.logo-hovered {
  background-color: #2f2f2f;
}

/* Automatic fade version - fades to dark automatically on render */
.neuron-loader-container.neuron-loader-automatic-fade {
  animation: neuronLoaderFadeIn 2s forwards;
}

/* Once animation completes, keep background solid (prevents restart on re-render) */
.neuron-loader-container.neuron-loader-automatic-fade[data-fade-complete="true"] {
  animation: none;
  background-color: #2f2f2f;
}

@keyframes neuronLoaderFadeIn {
  from {
    background-color: transparent;
  }
  to {
    background-color: #2f2f2f;
  }
}

/* Submission loader wrapper - positioned outside polling div */
.submission-loader-wrapper {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.submission-loader-wrapper.fade-out {
  opacity: 0;
}

.neuron-loader {
  display: block;
  flex-shrink: 0;
}