/* ============================================================
   Learnex - AI Learning Portal (public demo viewer)
   Matches the landing page: Deep Teal · Bricolage / Hanken,
   hairline-divided, no bento. Pairs with aiDemo.html.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #f1f3f2;
  --surface: #ffffff;
  --ink: #17221f;
  --muted: #5d6b66;
  --accent: #0f6e6a;
  --accent-dark: #0b5350;
  --accent-soft: #e7efed;
  --accent-ink: #ffffff;
  --line: #d4dbd8;
  --ink-deep: #101815;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  --container: 1240px;
  --pad: clamp(18px, 5vw, 56px);
  --transition: 0.2s ease;
  /* Measured topbar height, kept in sync by JS (ResizeObserver on .db-topbar).
     Every sticky offset below derives from it, so the tab bar / rail can never
     slide underneath the topbar when its height changes (wraps, breakpoints). */
  --topbar-h: 74px;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(16, 24, 21, 0.08);
  box-sizing: border-box;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}
.cookie-banner.visible {
  transform: translateY(0);
  visibility: visible;
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.cookie-banner-text {
  margin: 0;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}
.cookie-banner-text a {
  color: var(--accent);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }
  .cookie-banner-actions {
    justify-content: stretch;
  }
  .cookie-banner-actions .btn {
    flex: 1;
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: visibility 0.01s;
  }
}

/* ============================================================
   TOP BAR
   ============================================================ */
.db-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(241, 243, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.db-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.db-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.db-brand img {
  width: 140px;
  height: auto;
}

.db-brand .wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
  white-space: nowrap;
  min-width: 0;
}

/* The CTA must never wrap or shrink — the brand side gives way instead. */
.db-topbar .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.db-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 8px;
}

/* ============================================================
   INTRO / SELL STRIP
   ============================================================ */
.db-intro {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.db-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.db-eyebrow strong {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.db-intro h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  letter-spacing: -0.025em;
  max-width: 18ch;
}

.db-intro p.lead {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--muted);
  max-width: 56ch;
}

.db-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
}

.db-point {
  padding: 1.4rem 1.5rem 0 0;
}

.db-point + .db-point {
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
}

.db-point h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.db-point h3 i {
  color: var(--accent);
}

.db-point p {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ============================================================
   VIEWER - rail + content
   ============================================================ */
.db-viewer {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

.db-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
  display: grid;
  gap: 1.75rem;
}

.rail-section h2 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

.subject-list,
.lesson-list {
  display: grid;
  gap: 0.4rem;
}

/* Rail items (subjects + lessons) */
.rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition);
}

.rail-item:hover {
  background: var(--accent-soft);
}

.rail-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

.rail-item .meta {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}

.rail-item.active .meta {
  color: var(--accent);
}

.lesson-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: capitalize;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.lesson-tag.easy {
  background: #2f8f4f;
  color: #ffffff;
}

.lesson-tag.medium {
  background: #e1b24a;
  color: #17221f;
}

.lesson-tag.hard {
  background: #c95b4d;
  color: #ffffff;
}

.lesson-list:empty::after {
  content: "Pick a subject to see its lessons.";
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Content panel ---------- */
.db-content {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  /* NB: do NOT set overflow:hidden/clip here — it confines the sticky tab bar
     to this box (instead of pinning it to the viewport), which lets the bar
     drift down over the first heading. Corners are kept tidy by rounding the
     tab bar's top edge to match below. */
}

.db-tabs {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
}

.db-tab {
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.db-tab:hover {
  color: var(--ink);
}

.db-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.db-answers-btn {
  margin-left: auto;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-dark);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.db-answers-btn:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.db-answers-btn.on {
  background: var(--accent);
  color: var(--accent-ink);
}

.content-panel {
  display: none;
  padding: clamp(1.75rem, 3.5vw, 3rem);
}

.content-panel.active {
  display: block;
}

/* States (loading / empty / error) */
.db-state {
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  color: var(--muted);
}

.db-state .icon {
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.db-state h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.db-state p {
  max-width: 44ch;
  margin: 0 auto;
  font-size: 0.95rem;
}

.db-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: db-spin 0.8s linear infinite;
}

@keyframes db-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   RENDERED AI CONTENT (summary / quiz HTML)
   ============================================================ */
.report-content {
  color: var(--ink);
  font-style: normal;
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.report-content > *:first-child {
  margin-top: 0;
}

.report-content h1,
.report-content h2,
.report-content h3,
.report-content h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 1.6rem 0 0.7rem;
  /* Clear the sticky top bar + tab bar so a heading scrolled to the top of the
     panel isn't hidden behind them (~57px tab bar + breathing room). */
  scroll-margin-top: calc(var(--topbar-h) + 80px);
}

.report-content h1 {
  font-size: 1.6rem;
}
.report-content h2 {
  font-size: 1.35rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.report-content h3 {
  font-size: 1.15rem;
}
.report-content h4 {
  font-size: 1.02rem;
}

.report-content p {
  margin: 0.7rem 0;
}

.report-content ul,
.report-content ol {
  margin: 0.7rem 0 0.7rem 1.3rem;
}

.report-content li {
  margin: 0.35rem 0;
}

.report-content strong,
.report-content b {
  color: var(--ink);
  font-weight: 700;
}

.report-content a {
  color: var(--accent-dark);
  text-decoration: underline;
}

.report-content code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--accent-soft);
  padding: 0.1em 0.4em;
  border-radius: 5px;
}

.report-content pre {
  background: var(--ink-deep);
  color: #e7efed;
  padding: 1rem;
  border-radius: 10px;
  overflow-x: auto;
  margin: 1rem 0;
}

.report-content pre code {
  background: none;
  padding: 0;
}

.report-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--muted);
}

.report-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

.report-content th,
.report-content td {
  border: 1px solid var(--line);
  padding: 0.55rem 0.7rem;
  text-align: left;
}

.report-content th {
  background: var(--accent-soft);
  font-weight: 600;
}

.report-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0.75rem 0;
}

/* MCQ options (Part A): stored as a markerless <div class="mcq-options"> block of
   "a) …<br> b) …" lines (no <ul>, so no bullets on any stylesheet). */
.report-content .mcq-options {
  margin: 0.4rem 0 0.4rem 0.15rem;
  line-height: 1.9;
}

/* Question tables (rebuilt as real <table>s): wrap so wide ones scroll
   horizontally on small screens instead of overflowing the page. */
.report-content .q-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}
.report-content .q-table {
  width: auto;
  min-width: 100%;
  margin: 0;
}
.report-content .q-table th {
  white-space: nowrap;
}

mjx-container {
  overflow-x: auto !important;
  overflow-y: hidden;
  max-width: 100%;
  padding: 4px 0;
}

/* Quiz answers - hidden until toggled */
.ai-answer-block {
  display: none;
  margin: 0.75rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

#demo-quiz.answers-visible .ai-answer-block {
  display: block;
  animation: db-fade 0.3s ease;
}

@keyframes db-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.db-cta {
  background: var(--ink-deep);
  color: #fff;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.db-cta h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 0.6rem;
}

.db-cta p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 48ch;
  margin: 0 auto 1.5rem;
}

.db-cta .btn-primary {
  background: var(--accent);
}

.db-cta .btn-primary:hover {
  background: var(--accent-dark);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .db-points {
    grid-template-columns: 1fr;
    border-top: 0;
  }
  .db-point {
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
  }
  .db-point + .db-point {
    padding-left: 0;
    border-left: 0;
  }

  /* Stack viewer; rail becomes horizontal chip scrollers */
  .db-viewer {
    grid-template-columns: 1fr;
  }

  .db-rail {
    position: static;
    gap: 1.25rem;
    min-width: 0;
  }

  .rail-section {
    min-width: 0;
  }

  /* min-width:0 lets overflow-x actually clip+scroll instead of widening
     the page (grid/flex items default to min-width:auto = content width). */
  .subject-list,
  .lesson-list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 0.5rem;
    overflow-x: auto;
    min-width: 0;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .rail-item {
    white-space: nowrap;
  }

}

/* Topbar gives way in stages so nothing ever overlaps or clips:
   ≤700px the wordmark text goes (Demo tag stays), ≤520px the CTA
   collapses to its icon and the logo shrinks. */
@media (max-width: 700px) {
  .db-brand .wordmark span.full {
    display: none;
  }
}

@media (max-width: 520px) {
  .db-brand img {
    width: 118px;
  }
  .db-topbar .btn .label {
    display: none;
  }
  .db-topbar .btn {
    padding: 0.6rem 0.8rem;
  }
}

/* Quiz: give the part / MCQ section headers (rendered as h1/h2) more vertical
   breathing room, with an editorial hairline separating each part from the
   content above it. The first header sits flush so it doesn't float. */
#demo-quiz h1,
#demo-quiz h2 {
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
#demo-quiz > :first-child,
#demo-quiz h1:first-child,
#demo-quiz h2:first-child {
  margin-top: 0.4rem;
  padding-top: 0;
  border-top: none;
}