/* ============================================================================
   PixoQuest — public (non-landing) pages
   ----------------------------------------------------------------------------
   Covers the routes whose runtime renderer is public/public-pages.js
   (/courses, /courses/<slug>, /leaderboard, /community, /about, /login,
   /privacy, /terms), the generated /community/<slug> article pages, and the
   standalone /404 (which inlines its own copy of the same rules).

   Every rule is scoped to `html[data-landing-public]` (set by the shell on
   those routes only), so the file is inert on the marketing landing even
   though index.html links it document-wide.

   Shell tokens (index.html :root) are used for type and colour — never
   literals — so a token change lands here too.
   ========================================================================== */

html[data-landing-public] {
  --pq-s: var(--fs-small, 0.9375rem);
  --pq-b: var(--fs-body, 1.0625rem);
  --pq-h: var(--fs-heading, 1.75rem);
  --pq-accent: var(--p, #3b82f6);
  --pq-accent-solid: var(--p-solid, #2563eb);
  --pq-ink: var(--t, #f8fafc);
  --pq-muted: var(--m, #94a3b8);
  --pq-gap: 96px;
}

/* ── Type: running text is body size, everything read is ≥13px ─────────── */

html[data-landing-public] .public-section p,
html[data-landing-public] .public-section li,
html[data-landing-public] .public-section dd,
html[data-landing-public] .public-course-content p,
html[data-landing-public] .static-leaderboard-content p,
html[data-landing-public] .static-community-content p,
html[data-landing-public] .static-legal-content p,
html[data-landing-public] .static-login-content p,
html[data-landing-public] .static-leaderboard-content li,
html[data-landing-public] .static-community-content li,
html[data-landing-public] .static-legal-content li,
html[data-landing-public] .static-login-content li,
html[data-landing-public] .public-post-content,
html[data-landing-public] .public-comment-body,
html[data-landing-public] .public-empty p,
html[data-landing-public] .public-loading {
  font-size: var(--pq-b);
  line-height: 1.6;
}

html[data-landing-public] .public-section p,
html[data-landing-public] .static-leaderboard-content p,
html[data-landing-public] .static-community-content p,
html[data-landing-public] .static-legal-content p,
html[data-landing-public] .static-login-content p {
  max-width: 66ch;
}

html[data-landing-public] .public-course-card h2,
html[data-landing-public] .public-post-title {
  font-size: var(--pq-b);
  font-weight: 900;
  line-height: 1.3;
}

html[data-landing-public] .static-leaderboard-content h2,
html[data-landing-public] .static-community-content h2,
html[data-landing-public] .static-legal-content h2,
html[data-landing-public] .static-login-content h2,
html[data-landing-public] .public-course-content h2 {
  font-size: var(--pq-h);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}

/* A new section opens with real space, not a rule: the gap between sections
   beats any gap inside one. */
html[data-landing-public] .static-leaderboard-content h2,
html[data-landing-public] .static-community-content h2,
html[data-landing-public] .static-legal-content h2,
html[data-landing-public] .static-login-content h2,
html[data-landing-public] .static-about-content h2 {
  margin-top: 96px;
}

html[data-landing-public] .static-leaderboard-content h2:first-child,
html[data-landing-public] .static-community-content h2:first-child,
html[data-landing-public] .static-legal-content h2:first-child,
html[data-landing-public] .static-login-content h2:first-child,
html[data-landing-public] .static-about-content h2:first-child {
  margin-top: 0;
}

html[data-landing-public] .static-leaderboard-content h3,
html[data-landing-public] .static-community-content h3,
html[data-landing-public] .static-legal-content h3,
html[data-landing-public] .static-login-content h3,
html[data-landing-public] .public-chapter-info h3 {
  font-size: var(--pq-b);
  font-weight: 900;
  margin-top: 28px;
}

/* ── No tiny tracked caps: sentence case at a readable size ────────────── */

html[data-landing-public] .public-lb-stat span,
html[data-landing-public] .public-zone-divider,
html[data-landing-public] .public-course-badge,
html[data-landing-public] .public-post-time,
html[data-landing-public] .public-post-stat,
html[data-landing-public] .public-comments-toggle,
html[data-landing-public] .public-comment-meta,
html[data-landing-public] .public-comments-empty,
html[data-landing-public] .public-chapter-meta,
html[data-landing-public] .public-course-stats span,
html[data-landing-public] .public-post-readmore,
html[data-landing-public] .blog-category-badge,
html[data-landing-public] .blog-card-cat,
html[data-landing-public] .blog-card-meta,
html[data-landing-public] .blog-page-meta,
html[data-landing-public] .blog-tag-pill {
  font-size: var(--pq-s);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}

html[data-landing-public] .public-lb-stat span,
html[data-landing-public] .public-zone-divider {
  font-weight: 800;
  color: var(--pq-muted);
}

/* ── Surfaces: tone steps, no glow, no gradient, no decorative outline ─── */

html[data-landing-public] .public-lb-stat,
html[data-landing-public] .public-post-card,
html[data-landing-public] .public-avatar,
html[data-landing-public] .public-rank-row.top-1,
html[data-landing-public] .public-rank-row.top-2,
html[data-landing-public] .public-rank-row.top-3,
html[data-landing-public] .pq-course-badge,
html[data-landing-public] .public-course-card,
html[data-landing-public] .public-chapter-card,
html[data-landing-public] .public-faq-item {
  box-shadow: none;
}

html[data-landing-public] .public-zone-line {
  display: none;
}

html[data-landing-public] .public-medal.gold {
  background: #ca8a04;
}

html[data-landing-public] .public-medal.silver {
  background: #64748b;
}

html[data-landing-public] .public-medal.bronze {
  background: #b45309;
}

html[data-landing-public] .public-course-badge,
html[data-landing-public] .blog-tag-pill,
html[data-landing-public] .blog-card-cat,
html[data-landing-public] .blog-category-badge {
  border: 0;
  background: var(--bg3, #1e293b);
  color: var(--pq-muted);
  border-radius: 8px;
  padding: 5px 12px;
}

html[data-landing-public] .public-course-badge-difficulty,
html[data-landing-public] .public-course-badge-free,
html[data-landing-public] .blog-category-badge,
html[data-landing-public] .blog-card-cat {
  color: var(--pq-ink);
}

/* Filled controls carry white text, so they use the solid accent. */
html[data-landing-public] .btn-3d,
html[data-landing-public] .btn-3d-green,
html[data-landing-public] .btn-3d-blue,
html[data-landing-public] .btn-3d-gray,
html[data-landing-public] .btn-3d-outline,
html[data-landing-public] .public-medal {
  box-shadow: none;
}

html[data-landing-public] .btn-3d-green,
html[data-landing-public] .btn-3d-blue {
  background-color: var(--pq-accent-solid);
  border-bottom-color: var(--pq-accent-solid);
}

html[data-landing-public] .public-medal {
  color: #fff;
}

/* ── Layout rhythm: the gap between sections beats the gap inside one ──── */

html[data-landing-public] .public-section {
  padding: 0 0 var(--pq-gap);
}

html[data-landing-public] .public-page-inner {
  padding: 40px 40px 0;
}

html[data-landing-public] .public-page-inner > * + * {
  margin-top: 28px;
}

/* The hero's mascot slot is filled from the landing's mascot layer, which the
   generated shells prune away — an empty slot is just dead space. */
html[data-landing-public] .public-hero-mascot-slot:empty {
  display: none;
}

html[data-landing-public] .static-leaderboard-content,
html[data-landing-public] .static-community-content,
html[data-landing-public] .static-legal-content,
html[data-landing-public] .static-login-content {
  max-width: 68ch;
}

/* ── Controls: 44px targets, real focus states, flat feedback ──────────── */

html[data-landing-public] .public-tab,
html[data-landing-public] .public-comments-toggle,
html[data-landing-public] .public-post-stat,
html[data-landing-public] .public-course-back,
html[data-landing-public] .blog-topic-pill,
html[data-landing-public] .blog-back,
html[data-landing-public] .blog-card-link {
  min-height: 44px;
}

/* A league's colour is data, so it rides on the active tab's border, never on
   its label: bronze at 2.9:1 on the panel is unreadable text. */
html[data-landing-public] .public-tab:hover,
html[data-landing-public] .public-tab.active {
  color: var(--pq-ink);
}

html[data-landing-public] .public-tab.active {
  border-color: var(--pq-accent);
}

/* --m2 on the footer ground is 3.8:1; the legal line is read, so it takes the
   muted ink. */
html[data-landing-public] .footer-bottom,
html[data-landing-public] .footer-col p {
  color: var(--pq-muted);
}

html[data-landing-public] .public-tab,
html[data-landing-public] .public-course-back,
html[data-landing-public] .blog-back {
  align-items: center;
}

html[data-landing-public] .public-tab {
  padding: 10px 18px;
}

html[data-landing-public] .public-comments-toggle,
html[data-landing-public] .public-post-stat {
  padding: 10px 14px;
}

html[data-landing-public] .public-course-back,
html[data-landing-public] .blog-back {
  display: inline-flex;
  gap: 6px;
  padding: 10px 0;
}

html[data-landing-public] .public-rank-row,
html[data-landing-public] .public-post-card,
html[data-landing-public] .public-course-card,
html[data-landing-public] .public-lb-stat {
  transition:
    border-color 0.2s var(--ease-out, ease-out),
    background-color 0.2s var(--ease-out, ease-out);
}

html[data-landing-public] .public-rank-row:hover,
html[data-landing-public] .public-post-card:hover,
html[data-landing-public] .public-course-card:hover {
  box-shadow: none;
  transform: none;
}

html[data-landing-public] a:focus-visible,
html[data-landing-public] button:focus-visible,
html[data-landing-public] [tabindex]:focus-visible {
  outline: 2px solid var(--pq-accent);
  outline-offset: 2px;
}

html[data-landing-public] a,
html[data-landing-public] button {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 560px) {
  html[data-landing-public] .public-page-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── Motion: an entrance per part, dropped when motion is off ──────────── */

html[data-landing-public] .pq-enter {
  opacity: 0;
  transform: translateY(18px);
}

html[data-landing-public] .pq-enter.pq-in {
  animation: pq-rise 0.55s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) forwards;
}

@keyframes pq-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-landing-public] .pq-enter,
  html[data-landing-public] .pq-enter.pq-in {
    opacity: 1;
    transform: none;
    animation: none;
  }

  html[data-landing-public] * {
    transition-duration: 0.01ms !important;
  }
}