/* KardonScience — base design system
   Quiet textbook: warm paper, ink, one accent, hairline rules. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* paper + ink */
  --paper:      #FBFAF8;
  --paper-2:    #F5F3EE;   /* recessed panels */
  --ink:        #18181C;
  --ink-soft:   #56565D;
  --ink-faint:  #8C8C92;
  --line-strong:#BEBAB1;   /* mid grey: secondary/"ghost" markers, stronger hairlines */
  --line:       #E6E3DC;
  --line-soft:  #F0EDE7;

  /* accent (overridable by Tweaks) */
  --accent:      #2F6F7E;
  --accent-ink:  #265b67;  /* darker for text on paper */
  --accent-wash: color-mix(in srgb, var(--accent) 10%, var(--paper));
  --accent-line: color-mix(in srgb, var(--accent) 26%, var(--paper));

  /* energy "fluid" — one common colour for energy water in the flow view (assets/energy-viz.js),
     since energy is fungible; the energy-type colours live in energy-viz.js itself. A neutral
     grey on purpose, so it doesn't read as (and compete with) the indigo potential-energy hue */
  --energy-fluid: #86878E;

  /* type */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* rhythm */
  --measure: 38rem;       /* prose column */
  --pad-x: clamp(1.5rem, 6vw, 6rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-line); }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}

p { line-height: 1.62; }

/* small caps label used for kickers / eyebrows */
.kicker {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.3rem;   /* a hair of breathing room above the title (kept tight on purpose) */
}

.prose {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.55vw, 1.34rem);
  line-height: 1.66;
  color: var(--ink);
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose + .prose { margin-top: 1.1em; }

/* ---- back caret (shared chrome) ---- */
.back {
  position: fixed;
  top: clamp(1.1rem, 2.4vw, 1.9rem);
  left: clamp(1.1rem, 2.4vw, 1.9rem);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.4rem;
  padding: 0 0.9rem 0 0.7rem;
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: blur(6px);
  transition: color .25s var(--ease), background .25s var(--ease), gap .25s var(--ease);
}
.back svg { width: 15px; height: 15px; }
.back .back-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .3s var(--ease), opacity .25s var(--ease);
}
.back:hover { color: var(--ink); }
.back:hover .back-label { max-width: 8rem; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* shared per-sim controls (assets/sim-controls.js): reset + pause/speed, right-aligned above a sim.
   Lives here (not lesson.css) so it's styled on any page that loads sim-controls.js, deck or not. */
.sim-bar { display: flex; justify-content: flex-end; align-items: center; gap: 0.55rem; margin: 0 0 0.55rem; }

/* sim-controls.js wraps the heading just above a sim and the .sim-bar in this row, so the
   heading (left) and the controls (right, hugging the canvas) share one line instead of
   stacking. On narrow screens the bar wraps to its own line below the heading. */
.sim-headrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1.5rem; margin-bottom: 0.55rem; }
/* the heading block, whatever its class (.canvas-head in deck lessons, .head in the
   single-screen pendulum); margin reset wins over a page's own header margin. */
.sim-headrow > :first-child { flex: 1 1 16rem; min-width: 0; margin: 0 !important; }
.sim-headrow > .sim-bar { flex: 0 0 auto; margin: 0; }
.sim-reset {
  appearance: none; width: 1.95rem; height: 1.95rem; border-radius: 999px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.sim-reset svg { width: 15px; height: 15px; }
.sim-reset:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.sim-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--paper); }
.sim-seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink-soft);
  padding: 0.34rem 0.7rem; font-variant-numeric: tabular-nums;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.sim-seg button + button { border-left: 1px solid var(--line-strong); }
.sim-seg button:hover { color: var(--ink); }
.sim-seg button.active { background: var(--accent); color: #fff; }

/* collapse handle for a secondary panel stacked inside a sim canvas (assets/sim-controls.js) */
.viz-toggle {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  width: 2.1rem; height: 1.55rem; border-radius: 7px;
  border: 1px solid var(--line-strong); color: var(--ink-soft); cursor: pointer;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.viz-toggle:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.viz-toggle svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.viz-toggle.open svg { transform: rotate(180deg); }

/* click-to-reveal "spoiler": add class="reveal" to any inline element to hide its text behind a bar
   until clicked. The click is wired by assets/deck.js (delegated, so it works in any topic). */
.reveal {
  background: var(--paper-2); color: transparent; border-radius: 4px; padding: 0 0.2em;
  border-style: solid; border-width: 1px; border-color: var(--ink-soft);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.reveal:hover { background: var(--ink-soft); }
.reveal.revealed {
  background: var(--paper);
  color: inherit;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  border-width: 0 0 1px 0;
}

/* .reveal::before { */
  /* content: "? ? ?"; /* Use a character, emoji, or Unicode escape sequence like "\2605" */
  /* position: relative; */
  /* text-align: center; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
  /* font-size: 5rem; */
  /* color: rgba(0, 0, 0, 1); */
  /* z-index: 0; */
/* } */