/* =============================================================
   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); }

/* ── 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; }
}