/* Extra styles layered on top of Tailwind CDN.
   Keep this file small: most design lives in the HTML via Tailwind classes. */

/* Prose overrides so .prose reads well on the warm paper background. */
.prose {
  color: #333333;
}
.prose p,
.prose li {
  color: #333333;
}
.prose a {
  color: #28594B;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover {
  color: #333333;
}
.prose strong {
  color: #333333;
}
.prose h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The inline prose answer uses its own serif family; keep line height generous. */
#answer .prose p {
  line-height: 1.75;
}

/* Inline meeting-date citations styled as subtle footnote-ish links. */
.prose a.citation {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85em;
  font-weight: 500;
  color: #28594B;
  text-decoration: none;
  border-bottom: 1px dotted #28594B;
  white-space: nowrap;
  padding: 0 1px;
}
.prose a.citation:hover {
  color: #333333;
  border-bottom-color: #333333;
  border-bottom-style: solid;
}
.prose a.citation::after {
  content: "\2197"; /* small north-east arrow */
  font-size: 0.85em;
  margin-left: 2px;
  opacity: 0.7;
}

/* Fallback: same visual shape as a citation, but not clickable, for meetings whose PDF URL we don't have. */
.prose .citation-none {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85em;
  color: #5a5752;
  white-space: nowrap;
}

/* Make sure focus rings stay visible for keyboard users. */
:focus-visible {
  outline: 2px solid #28594B;
  outline-offset: 2px;
}

/* Ensure the <details> marker doesn't collide with our summary text color. */
summary::-webkit-details-marker {
  color: #5a5752;
}

/* Slight page-load polish. */
html {
  scroll-behavior: smooth;
}

/* LLM-style layout: body fills the real viewport so the input bar stays pinned
   to the bottom. `100dvh` adjusts when the iOS virtual keyboard appears; the
   `100vh` fallback kicks in for older browsers (without keyboard-aware resize). */
html, body {
  height: 100vh;
  height: 100dvh;
}

/* Ask-a-question textarea caps vertical growth; beyond this the textarea scrolls internally. */
#q {
  max-height: 12rem;
}

/* Merch sidebar: desktop xl+ only. Cards start invisible and fade in once
   an answer has rendered. The .is-visible class is toggled from app.js. */
#merch-panel-cards .merch-card {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms ease, transform 600ms ease;
}
#merch-panel.is-visible #merch-panel-cards .merch-card {
  opacity: 1;
  transform: translateY(0);
}
#merch-panel.is-visible #merch-panel-cards .merch-card:nth-child(2) { transition-delay: 120ms; }
#merch-panel.is-visible #merch-panel-cards .merch-card:nth-child(3) { transition-delay: 220ms; }

#merch-panel > p:first-child,
#merch-panel > a:last-child {
  opacity: 0;
  transition: opacity 600ms ease;
}
#merch-panel.is-visible > p:first-child { opacity: 1; }
#merch-panel.is-visible > a:last-child { opacity: 0.9; transition-delay: 340ms; }

.merch-card .merch-image {
  background-color: #ffffff;
  border: 1px solid #d9d3c4;
  overflow: hidden;
}
.merch-card .merch-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* First-visit welcome modal. Fades in once the dismissal check completes.
   IMPORTANT: the modal root carries Tailwind's `flex` utility so its contents
   center correctly, but that means the HTML `hidden` attribute alone cannot
   hide it (`.flex` wins on specificity). Use visibility + pointer-events,
   gated by `.is-visible`, so the modal never captures clicks unless it's
   actually shown. Without this, the invisible modal sits on top of the page
   at opacity 0 and eats every tap. */
#welcome-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
#welcome-modal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 300ms ease, visibility 0s linear 0s;
}
#welcome-card {
  transform: translateY(8px);
  transition: transform 350ms ease;
}
#welcome-modal.is-visible #welcome-card {
  transform: translateY(0);
}

/* Mobile merch popup slides up from below. The `hidden` attribute plus
   pointer-events: none together make sure taps pass through to the page
   during the fade/slide transitions. */
#merch-mobile {
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
  transition: transform 500ms ease, opacity 500ms ease;
}
#merch-mobile.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #merch-panel-cards .merch-card,
  #merch-panel > p:first-child,
  #merch-panel > a:last-child,
  #merch-mobile {
    transition: none;
  }
}