/* ============================================================
   LEARNA — core design system
   Visual language: the page dump. Fixed-width grids, address
   gutters, byte cells. The subject is storage; the UI is storage.
   ============================================================ */

/* ---------- tokens ---------- */
/* Light is the base. Dark is opt-in only, never automatic. */
:root {
  /* base — paper, not cream. cool enough to keep the teal honest. */
  --bg:         #FCFCFA;
  --surface:    #FFFFFF;
  --surface-2:  #F2F3F0;
  --rule:       #E2E4DF;
  --rule-hi:    #C6CAC3;

  /* text */
  --fg:         #16181A;
  --fg-dim:     #575D62;
  --fg-faint:   #868D93;

  /* signal — the read head. exactly one thing per view. */
  --signal:     #B4610A;
  --signal-dim: rgba(180, 97, 10, 0.10);

  /* semantic */
  --ok:         #2E7D32;
  --warn:       #A86400;
  --err:        #C1291C;

  /* module identity hues — darkened for contrast on paper */
  --m-mysql:    #016B7D;
  --m-sql:      #7D4A79;
  --m-postgres: #2C5F87;
  --m-theory:   #856A12;
  --m-nosql:    #34772A;
  --m-orm:      #A21F78;
  --m-scaling:  #B8471A;
  --m-node:     #45702F;
  --m-cba:      #1F5F4B;
  --m-cloud:    #B4530A;
  --m-craft:    #6D4AA8;

  /* active module hue — modules override this */
  --hue:        var(--signal);

  /* type */
  --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body:    "Source Serif 4", Georgia, serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* scale — 1.25 major third, rooted at 16 */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3rem;
  --t-4xl:  4.25rem;

  /* space */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* measure */
  --measure: 68ch;
  --gutter:  4.5rem;   /* address gutter width */
}

/* Light only. The dark palette was removed by decision;
   the theme button is a no-op and stays hidden. */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--signal); color: var(--bg); }

/* ---------- type primitives ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mono { font-family: var(--f-mono); font-feature-settings: "zero" 1; }

/* address label — the hexdump gutter marker */
.addr {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (max-width: 640px) { .wrap { padding-inline: 1rem; } }

.prose {
  max-width: var(--measure);
  font-size: var(--t-md);
  line-height: 1.75;
}
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s-7); }
.prose h3 { font-size: var(--t-lg); margin-top: var(--s-6); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose em { font-style: italic; color: var(--fg); }
.prose code {
  font-family: var(--f-mono);
  font-size: 0.86em;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
.prose a {
  color: var(--hue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--hue) 45%, transparent);
}
.prose a:hover { text-decoration-color: var(--hue); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--fg-faint); }

/* ---------- byte / block bar (progress as a disk map) ---------- */
.blocks {
  display: flex;
  gap: 2px;
  align-items: center;
}
.blocks i {
  display: block;
  width: 7px;
  height: 14px;
  background: var(--rule-hi);
  border-radius: 1px;
  transition: background 200ms ease;
}
.blocks i.on { background: var(--hue); }
.blocks i.cur {
  background: var(--signal);
  box-shadow: 0 0 0 1px var(--signal-dim);
}

/* ---------- panel: the raised surface, ruled not shadowed ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* ---------- code block ---------- */
.code {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  line-height: 1.65;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--hue);
  border-radius: 3px;
  padding: var(--s-4);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.code .c  { color: var(--fg-faint); font-style: italic; }  /* comment */
.code .k  { color: var(--hue); }                           /* keyword  */
.code .s  { color: var(--ok); }                            /* string   */
.code .n  { color: var(--warn); }                          /* number   */
.code .f  { color: var(--fg); font-weight: 600; }          /* function */

/* ---------- utility ---------- */
.rule { height: 1px; background: var(--rule); border: 0; }
.dim  { color: var(--fg-dim); }
.faint{ color: var(--fg-faint); }
.hue  { color: var(--hue); }
.nowrap { white-space: nowrap; }
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s-4); top: -4rem;
  background: var(--signal); color: var(--bg);
  padding: var(--s-2) var(--s-4); border-radius: 3px;
  font-family: var(--f-mono); font-size: var(--t-sm);
  z-index: 100; transition: top 150ms ease;
}
.skip:focus { top: var(--s-4); }

/* ---------- light only ---------- */
/* The theme control is retired. Kept in the DOM on older pages so nothing
   breaks, hidden everywhere so the palette cannot be changed. */
#theme { display: none !important; }