/* =============================================================
   ROUNDTABLE DESIGN SYSTEM
   Load alongside tailwind.css on roundtable pages only.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Body override for roundtable pages */
body.rt-page {
  background: #F5F1EA !important;
  color: #1A1814;
  font-family: 'Inter Tight', system-ui, sans-serif;
}

/* Typography */
.font-display {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Borders */
.hairline { box-shadow: inset 0 0 0 1px #D9D2C2; }
.ring-ink  { box-shadow: inset 0 0 0 1.5px #1A1814; }

/* Buttons */
.btn-ink {
  background: #1A1814;
  color: #F5F1EA;
  transition: filter .15s;
}
.btn-ink:hover { filter: brightness(0.88); }

/* Placeholder stripe */
.ph-stripe {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #E8E0CE, #D6CCB3);
}

/* Card hover shadow */
.card-hover { transition: box-shadow .2s ease; }
.card-hover:hover { box-shadow: 0 18px 40px -20px rgba(0,0,0,0.18); }

/* Live ticker */
.ticker-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@keyframes rt-scrollx {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-track {
  animation: rt-scrollx 60s linear infinite;
  white-space: nowrap;
  display: flex;
  gap: 2.5rem;
}

/* Pulse dot */
@keyframes rt-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.9); }
}
.pulse-dot { animation: rt-pulse 1.6s ease-in-out infinite; }

/* Divide rule colour */
.divide-rule > * + * { border-color: #D9D2C2; }

/* ── Opacity fallbacks (light mode) ──────────────────────────── */
.bg-paper\/80  { background-color: rgba(245,241,234,0.80); }
.bg-paper\/60  { background-color: rgba(245,241,234,0.60); }
.bg-paper2\/60 { background-color: rgba(237,231,219,0.60); }
.bg-paper2\/50 { background-color: rgba(237,231,219,0.50); }
.bg-paper2\/40 { background-color: rgba(237,231,219,0.40); }

/* ── Always-cream text (for sections that are always-dark regardless of mode) ─ */
.text-cream     { color: #F5F1EA; }
.text-cream-80  { color: rgba(245,241,234,0.80); }
.text-cream-70  { color: rgba(245,241,234,0.70); }
.text-cream-65  { color: rgba(245,241,234,0.65); }
.text-cream-40  { color: rgba(245,241,234,0.40); }

/* ── Tab bar hover: only inactive tabs get the hover bg (active tab keeps bg-ink) ─ */
.rt-tab-btn:not(.bg-ink):hover { background-color: var(--color-paper2); }

/* ── Dark mode ────────────────────────────────────────────────── */
html.dark {
  --color-paper:    #1A1814;
  --color-paper2:   #252119;
  --color-ink:      #F5F1EA;
  --color-ink2:     #C8C1B2;
  --color-muted:    #9C9488;
  --color-rule:     #3B3630;
  --color-ink3:     #6B655C;
  /* legacy tokens used by forum/about pages */
  --clr-bg:         #1A1814;
  --clr-surface:    #252119;
  --clr-border:     #3B3630;
  --clr-text:       #F5F1EA;
  --clr-text-muted: #9C9488;
  --clr-text-light: #6B655C;
}
html.dark body         { background: #1A1814 !important; color: #F5F1EA; }
html.dark body.rt-page { background: #1A1814 !important; }
html.dark .btn-ink     { background: #F5F1EA; color: #1A1814; }
html.dark .btn-ink:hover { filter: brightness(0.90); }
html.dark .hairline    { box-shadow: inset 0 0 0 1px #3B3630; }
html.dark .ring-ink    { box-shadow: inset 0 0 0 1.5px #F5F1EA; }
html.dark .ph-stripe   {
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 12px),
    linear-gradient(180deg,#252119,#1A1814);
}
html.dark .card-hover:hover { box-shadow: 0 18px 40px -20px rgba(0,0,0,.45); }

/* dark overrides for opacity classes */
html.dark .bg-paper\/80  { background-color: rgba(26,24,20,0.80); }
html.dark .bg-paper\/60  { background-color: rgba(26,24,20,0.60); }
html.dark .bg-paper2\/60 { background-color: rgba(37,33,25,0.60); }
html.dark .bg-paper2\/50 { background-color: rgba(37,33,25,0.50); }
html.dark .bg-paper2\/40 { background-color: rgba(37,33,25,0.40); }

/* ── Theme toggle — dual pill ───────────────────────────────────
   Light pill is active (bg-ink) in light mode.
   Dark  pill is active (bg-ink) in dark  mode.
   CSS handles this without any JS icon-swap needed.           */
#rt-pill-light { background: var(--color-ink); color: var(--color-paper); }
#rt-pill-dark  { color: var(--color-muted); }
html.dark #rt-pill-light { background: transparent; color: var(--color-muted); }
html.dark #rt-pill-dark  { background: var(--color-ink); color: var(--color-paper); }

/* Tailwind utility missing from compiled tailwind.css */
@media (min-width: 48rem) {
  .md\:hidden { display: none !important; }
}

/* ── Hamburger icon — three lines that morph into an X ─────── */
.hamburger { position: relative; width: 18px; height: 14px; display: inline-block; }
.hamburger > span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  border-radius: 2px; transition: transform .28s ease, top .28s ease, opacity .2s ease;
}
.hamburger > span:nth-child(1) { top: 0; }
.hamburger > span:nth-child(2) { top: 6px; }
.hamburger > span:nth-child(3) { top: 12px; }
.hamburger.is-open > span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.hamburger.is-open > span:nth-child(2) { opacity: 0; }
.hamburger.is-open > span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ── MOBILE OPTIMIZATION ─────────────────────────────────────── */
/* Fluid display sizes — stop large headlines from blowing out the viewport */
.h-fluid-hero    { font-size: clamp(44px, 11vw, 88px); line-height: 0.94; }
.h-fluid-detail  { font-size: clamp(40px, 10vw, 72px); line-height: 0.96; }
.h-fluid-section { font-size: clamp(32px, 7vw, 48px);  line-height: 1.0; }
.h-fluid-card    { font-size: clamp(20px, 5.2vw, 28px); line-height: 1.15; }

@media (max-width: 767px) {
  /* Tighter horizontal padding on phones */
  .px-mobile { padding-left: 1rem !important; padding-right: 1rem !important; }
  .gap-mobile { gap: 1rem !important; }

  /* Topic cards: stack image below text instead of 3+2 columns */
  .topic-card { grid-template-columns: 1fr !important; }
  .topic-card .topic-card-text { grid-column: span 1 / span 1 !important; padding: 1.25rem !important; }
  .topic-card .topic-card-img  { grid-column: span 1 / span 1 !important; min-height: 180px !important; }

  /* Hero metadata strip: 2x2 instead of 4x1 to avoid cramping */
  .meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .meta-strip > div:nth-child(2n) { border-right: 0 !important; }
  .meta-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--clr-border); }

  /* Topic-detail prev/next: hide titles, keep arrows + chips */
  .nav-prev-next .nav-title { display: none; }

  /* Schedule table: collapse to text-only */
  .sched-row { grid-template-columns: 60px 1fr auto !important; }
  .sched-row .sched-date { display: none; }

  /* Tweak panel definition list: stack */
  .dl-2col { grid-template-columns: 1fr !important; }
  .dl-2col dt { margin-bottom: 0.15rem; }

  /* Section heading rows: stack title from controls */
  .section-bar { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }

  /* Tab pill row: allow horizontal scroll instead of wrapping awkwardly */
  .tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tab-scroll::-webkit-scrollbar { display: none; }

  /* Footer: stack columns more aggressively */
  .footer-grid > * { grid-column: span 12 / span 12 !important; }
}

/* =============================================================
   ACCESSIBILITY
   ============================================================= */

/* -------- SR-ONLY (visually hidden, available to AT) -------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------- FOCUS-VISIBLE -------- */
:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus {
  outline: none;
}
:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid #C56A3D;
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------- SKIP-TO-CONTENT LINK -------- */
.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #1A1814;
  color: #F5F1EA;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}
html.dark .skip-link {
  background: #F5F1EA;
  color: #1A1814;
}

/* -------- 44x44 TAP TARGETS ON TOUCH DEVICES -------- */
@media (pointer: coarse) {
  button:not(.btn-small):not(.chip),
  a[role="button"]:not(.btn-small),
  input[type="button"]:not(.btn-small),
  input[type="submit"]:not(.btn-small) {
    min-height: 44px;
  }
}

/* -------- REDUCED MOTION -------- */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none !important; }
  .pulse-dot { animation: none !important; }
  .hamburger > span { transition: none !important; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* -------- WINDOWS HIGH-CONTRAST MODE -------- */
@media (forced-colors: active) {
  .hairline { box-shadow: none; border: 1px solid CanvasText; }
  .ring-ink { box-shadow: none; border: 1.5px solid CanvasText; }
  .btn-ink { border: 1px solid CanvasText; }
  :where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }
  .skip-link { border: 1px solid CanvasText; }
  /* Keep decorative dots/pills visible against the system canvas */
  .pulse-dot,
  [aria-hidden="true"][class*="rounded-full"] { forced-color-adjust: none; }
}

/* -------- PRINT -------- */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  header,
  footer,
  aside,
  .skip-link,
  [aria-hidden="true"],
  button[aria-label*="theme"],
  button[aria-label*="Switch theme"],
  .ticker-mask,
  .hamburger,
  #hamburger,
  #mobile-nav,
  [aria-label="Notifications"],
  [aria-label="Search"],
  [aria-label*="menu"],
  .grecaptcha-badge {
    display: none !important;
  }
  main { max-width: none !important; padding: 0 !important; }
  a { color: #000 !important; text-decoration: underline !important; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
  h1, h2, h3 { page-break-after: avoid; }
  article, section, li { page-break-inside: avoid; }
  .font-display { color: #000 !important; }
  [class*="line-clamp"] {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }
}