/* ============================================================================
   CODE QUEST — global.css
   Document-level typography, the type hierarchy, focus behaviour and the
   small text primitives every page shares.
   ========================================================================== */

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
}

body {
  background-color: var(--bg-abyss);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The base ground: a deep radial well plus a faint logic grid. Real background
   artwork sits on top of this (see .cq-bg in layout.css), so this only shows
   where a page has no scene asset. */
/* The ground under every page: a fine lattice over a vertical gradient.
 *
 * The ambient COLOUR washes deliberately do not live here. They are all in the
 * .cq-fx aurora layer (css/fx.css), which sits behind the content and drifts.
 * An earlier version also painted three large radial glows on the body with
 * `background-attachment: fixed`; because that pins them to the VIEWPORT, the
 * top glow reappeared over the middle of the page at every scroll position and
 * showed through the translucent panels as a pale dome. One ambient layer,
 * behind everything, is both cleaner to look at and cheaper to paint.
 */
body.cq-grid-ground {
  background-image:
    linear-gradient(rgba(63, 201, 247, var(--fx-grid-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 201, 247, var(--fx-grid-opacity)) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-abyss) 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  background-attachment: fixed;
}

/* ============================================================================
   TYPE HIERARCHY
   Five levels, each visually distinct by size AND weight AND colour, so the
   structure of a page is readable before a single word is.
   ========================================================================== */

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
}

h2 {
  font-size: var(--fs-2xl);
}

h3 {
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-normal);
}

h4 {
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-normal);
}

h5 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
}

/* Thai body copy gets the generous leading it needs to stay legible. */
p {
  line-height: var(--lh-thai);
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

small {
  font-size: var(--fs-xs);
}

code,
kbd,
samp,
.cq-code {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-variant-ligatures: none;
}

/* ============================================================================
   FOCUS
   One ring for the whole project: a dark spacer then a bright cyan halo, so it
   reads on glass, on artwork and on solid panels alike.
   ========================================================================== */

:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
  position: relative;
  z-index: var(--z-raised);
}

/* ============================================================================
   TEXT PRIMITIVES
   ========================================================================== */

/* The small all-caps label above a heading. Used on every page, so the
   hierarchy always starts the same way. */
.cq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--cyan-300);
  margin: 0;
}

/* A short cyan rule before the eyebrow text, for a touch of structure. */
.cq-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-400));
  flex: 0 0 auto;
}

.cq-eyebrow--plain::before {
  display: none;
}

/* An eyebrow sits directly on top of a heading, and a Thai heading paints its
   tone marks ABOVE its own line box — so with the two flush against each
   other the mark on "แผนที่" landed on "เลือกบทเรียน". Declared once here
   rather than as a margin on each page that happens to use the pattern. */
.cq-eyebrow + h1,
.cq-eyebrow + h2,
.cq-eyebrow + h3,
.cq-eyebrow + h4,
.cq-eyebrow + h5 {
  margin-top: var(--sp-2);
}

.cq-eyebrow--gold {
  color: var(--gold-300);
}

.cq-eyebrow--gold::before {
  background: linear-gradient(90deg, transparent, var(--gold-400));
}

/* Display title with an energy bloom behind the glyphs. */
.cq-title-glow {
  color: var(--text-primary);
}

.cq-title-gold {
  color: var(--gold-200);
}

/* A gradient-filled display title — used for the biggest moments only. */
.cq-title-plate {
  background: linear-gradient(
    180deg,
    var(--cyan-100) 0%,
    #ffffff 34%,
    var(--cyan-200) 62%,
    var(--cyan-400) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cq-title-plate--gold {
  background: linear-gradient(
    180deg,
    var(--gold-100) 0%,
    #fffaf0 32%,
    var(--gold-200) 60%,
    var(--gold-400) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.cq-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.cq-body {
  font-size: var(--fs-base);
  line-height: var(--lh-thai);
  color: var(--text-secondary);
  max-width: var(--content-reading);
}

/* Colour + tone helpers */
.cq-muted { color: var(--text-muted); }
.cq-tertiary { color: var(--text-tertiary); }
.cq-secondary { color: var(--text-secondary); }
.cq-cyan { color: var(--text-cyan); }
.cq-gold { color: var(--text-gold); }
.cq-success { color: var(--success); }
.cq-danger { color: var(--danger); }
.cq-warning { color: var(--warning); }

.cq-center { text-align: center; }
.cq-right { text-align: end; }
.cq-nowrap { white-space: nowrap; }
.cq-mono { font-family: var(--font-mono); }
.cq-balance { text-wrap: balance; }

.cq-num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
}

/* A hairline divider that fades at both ends. */
.cq-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glass-edge) 18%,
    var(--glass-edge-hi) 50%,
    var(--glass-edge) 82%,
    transparent
  );
  margin-block: var(--sp-4);
}

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

.cq-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cq-skip-link {
  position: absolute;
  top: -200%;
  left: var(--sp-4);
  z-index: var(--z-loader);
  padding: var(--sp-3) var(--sp-5);
  background: var(--cyan-300);
  color: var(--text-on-light);
  border-radius: var(--r-sm);
  font-weight: var(--fw-bold);
  box-shadow: var(--elev-3);
}

.cq-skip-link:focus {
  top: var(--sp-3);
}

/* ============================================================================
   SCROLLBAR
   ========================================================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--cyan-700) transparent;
}

*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  background: rgba(3, 6, 15, 0.55);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan-600), var(--cyan-800));
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--cyan-500), var(--cyan-700));
  background-clip: content-box;
}

/* ============================================================================
   TEXT SELECTION
   ========================================================================== */

::selection {
  background: rgba(63, 201, 247, 0.32);
  color: var(--cyan-100);
}

/* ============================================================================
   file:// GUARD PANEL — rendered by the inline guard in every HTML file
   ========================================================================== */

.cq-protocol-warning {
  max-width: 660px;
  margin: 10vh auto;
  padding: var(--sp-6);
  background: var(--glass-fill-strong);
  border: var(--border-hair) solid var(--glass-edge-hi);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-4), var(--glass-lip);
  backdrop-filter: blur(var(--glass-blur));
}

.cq-protocol-warning h1 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-4);
  color: var(--gold-200);
}

.cq-protocol-warning h2 {
  color: var(--cyan-200);
}

.cq-protocol-warning pre {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-abyss);
  border: var(--border-hair) solid var(--glass-edge);
  border-radius: var(--r-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--cyan-200);
}

.cq-protocol-warning ol {
  padding-left: 1.4em;
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.cq-protocol-warning p {
  color: var(--text-secondary);
}