:root {
  --bg: #f7f6f3;
  --bg-raised: #fefdfb;
  --ink: #2e2c28;
  --ink-soft: #6f6c66;
  --ink-faint: #9d988f;
  --accent: #e0662f;
  --accent-deep: #c65423;
  --accent-wash: #fbe7da;
  --sage: #8a9b8a;
  --border: #e2dfd8;
  --shadow: 0 1px 2px rgba(60, 55, 45, 0.04), 0 8px 24px -10px rgba(60, 55, 45, 0.1);
  --display: "Space Grotesk", "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- ambient background ---------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}

.blob-a {
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, #eedcce 0%, rgba(238, 220, 206, 0) 70%);
  top: -220px;
  right: -160px;
  animation: drift-a 26s ease-in-out infinite alternate;
}

.blob-b {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, #e3e8dc 0%, rgba(227, 232, 220, 0) 70%);
  bottom: -240px;
  left: -180px;
  animation: drift-b 32s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-70px, 50px) scale(1.08); }
}

@keyframes drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, -40px) scale(1.06); }
}

.web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- header ---------- */

.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 40px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.mark { width: 26px; height: 26px; }
.mark-core { fill: var(--ink); }
.mark-dot { fill: var(--ink); }

.top-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.top-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 450;
  transition: color 0.2s ease;
}

.top-links a:hover { color: var(--ink); }

/* signed-in/signed-out slot in the nav (filled by auth.js) */
.auth-nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.auth-email {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
}
.auth-signout {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 450;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.auth-signout:hover { color: var(--accent-deep); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 24px 160px;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.hero.leaving {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

.hero[hidden] { display: none; }

.headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 6vw, 66px);
  line-height: 1.02;
  margin: 0 0 18px;
  letter-spacing: -0.025em;
  /* Space Grotesk tops out at 700; stroking the text with its own
     color pushes the apparent weight past the font's ceiling */
  -webkit-text-stroke: 1.4px currentColor;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.headline-em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.headline-period { color: var(--accent); }

.subline {
  max-width: 600px;
  margin: 0 0 34px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
  animation: rise 0.9s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- the ask box ---------- */

.ask {
  display: flex;
  align-items: center;
  width: min(480px, 100%);
  background: #efede8;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 6px 6px 6px 20px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  animation: rise 0.9s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ask:focus-within {
  background: #fff;
  border-color: #c6c0b4;
  box-shadow: 0 2px 10px -4px rgba(60, 55, 45, 0.08);
}

.ask-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 450;
  color: var(--ink);
  padding: 12px 12px 12px 0;
}

.ask-input::placeholder {
  color: var(--ink-faint);
  font-weight: 400;
}

.ask-go {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ask-go:hover { background: var(--accent-deep); transform: translateX(1px); }
.ask-go:active { transform: scale(0.96); }

/* ---------- chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  animation: rise 0.9s 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* the row keeps its height while the topics are being written, so nothing
   below it jumps when they arrive */
.chips { min-height: 35px; }

.chips-label {
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-right: 2px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.chips.filled .chips-label { opacity: 1; }

.chip {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 450;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  /* they arrive in two waves — the fallback set, then the generated one */
  animation: chip-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both;
}

@keyframes chip-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.chip:hover {
  color: var(--accent-deep);
  border-color: #ddb9a4;
  background: var(--accent-wash);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- clarifying question (ambiguous topics) ---------- */

/* while clarifying, the question is the whole screen — the marketing
   headline and input step out of the way */
body.clarifying .ask,
body.clarifying .chips,
body.clarifying .subline,
body.clarifying .headline { display: none; }

.clarify {
  width: min(560px, 100%);
  animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.clarify[hidden] { display: none; }

.clarify-dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-bottom: 14px;
}
.clarify-loading-label {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-faint);
}

.clarify-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.clarify-q {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 3.2vw, 27px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 20px;
  color: var(--ink);
}

.clarify-options {
  display: grid;
  gap: 10px;
  text-align: left;
}
.clarify-option {
  font-family: var(--sans);
  /* sits just barely above the page rather than as a hard white card */
  background: rgba(255, 253, 250, 0.5);
  border: 1px solid rgba(226, 223, 216, 0.75);
  border-radius: 16px;
  padding: 16px 22px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s ease, background 0.25s ease,
              box-shadow 0.25s ease, transform 0.25s ease;
  /* each option drifts up as it arrives; `backwards` fill leaves the
     resting state (and the hover lift) untouched once it lands */
  animation: option-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes option-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.clarify-option:hover {
  border-color: #e2cbba;
  background: rgba(255, 253, 250, 0.95);
  box-shadow: 0 10px 26px -16px rgba(60, 55, 45, 0.4);
  transform: translateY(-2px);
}
.clarify-option-label {
  display: block;
  font-family: var(--display);
  font-weight: 550;
  font-size: 15.5px;
  color: #413b34;
  margin-bottom: 4px;
  transition: color 0.25s ease;
}
.clarify-option:hover .clarify-option-label { color: var(--accent-deep); }
.clarify-option-hint {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-faint);
}

.clarify-skip {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-faint);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.clarify-skip:hover { color: var(--accent-deep); }

/* ---------- generated path ---------- */

.path {
  position: relative;
  z-index: 1;
  width: min(680px, calc(100% - 48px));
  margin: 24px auto 80px;
  animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.path-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 450;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.path-back:hover { color: var(--accent-deep); }

.path-eyebrow {
  margin: 26px 0 6px;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.path-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 44px);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.path-status {
  font-size: 15px;
  color: var(--ink-faint);
  margin: 0 0 36px;
  min-height: 22px;
  transition: opacity 0.4s ease, color 0.5s ease;
}

/* the path is openable: the line it has been reporting progress on changes
   colour, so readiness is something you see rather than something you read */
.path-status.ready {
  color: var(--accent);
  font-weight: 500;
}
.path-status.done { color: var(--sage); font-weight: 500; }

.modules {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.modules::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 10px;
  bottom: 10px;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--border), #ddc9b8);
  transition: opacity 0.7s ease;
}

.modules.forming::before { opacity: 0; }

.module {
  position: relative;
  display: flex;
  gap: 22px;
  padding: 0 0 26px 0;
}

/* while the path is generating, each node drifts like the background web —
   wandering a little apart from its neighbors, but only to a point */
.modules.forming .module {
  animation: float-xy var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes float-xy {
  from { transform: translate(calc(var(--wx, 8px) * -1), -5px); }
  to   { transform: translate(var(--wx, 8px), 5px); }
}

.module-node {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 550;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.55s cubic-bezier(0.3, 1.15, 0.4, 1),
              background 0.45s ease, border-color 0.45s ease,
              color 0.45s ease;
}

/* forming state: small gray dots scattered around the center,
   styled like the background constellation brought into focus */
.modules.forming .module-node,
.modules.forming .capstone .module-node {
  transform: translateX(var(--dx, 0)) scale(0.5);
  background: #bfb5a3;
  border-color: transparent;
  color: transparent;
  animation: dot-in 1.1s ease var(--pop, 0s) both;
}

@keyframes dot-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* suppress the transform transition while dots are first placed,
   so they materialize in the center instead of sliding from the left */
.modules.placing .module-node { transition: none; }

/* a node warms to a faint orange when its module finishes generating */
.modules.forming .module-node.lit,
.modules.forming .capstone .module-node.lit {
  background: #eb9e6d;
  border-color: transparent;
}

/* live edges connecting the floating nodes */
.modules .edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.45s ease;
}

.modules .edges.fade { opacity: 0; }

.module.capstone .module-node {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.module-card {
  flex: 1;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(75, 60, 45, 0.04);
  text-align: left;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease, box-shadow 0.2s ease;
}

.modules.forming .module-card { visibility: hidden; }

.module.in .module-card {
  opacity: 1;
  transform: translateX(0);
}

.module-card:hover {
  border-color: #dcc4b2;
  box-shadow: 0 8px 28px -10px rgba(75, 60, 45, 0.16);
}

.module.capstone .module-card {
  border-color: #e4bfa8;
  background: linear-gradient(180deg, #fffdf9 0%, #fbf1e9 100%);
}

.module-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 5px;
}

.module-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- module sheets (prerequisite drill-down) ---------- */

.module.in .module-card { cursor: pointer; }

.module.done .module-node {
  border-color: #a9bda9;
  color: #6f8a6f;
}

.branch-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b2c0ac;
  z-index: 1;
  animation: dot-in 0.5s ease both;
}

.stack { position: fixed; inset: 0; z-index: 40; }
.stack[hidden] { display: none; }

.stack-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 44, 40, 0.28);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.stack.open .stack-backdrop { opacity: 1; }

.sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 92vw);
  display: flex;
  background: var(--bg-raised);
  border-left: 1px solid var(--border);
  box-shadow: -28px 0 60px -32px rgba(60, 55, 45, 0.4);
  transition: transform 0.5s cubic-bezier(0.32, 0.9, 0.35, 1);
}

.sheet-spine {
  flex-shrink: 0;
  width: 52px;
  border-right: 1px solid var(--border);
  background: #f3f0e9;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  cursor: pointer;
}

.sheet-spine span {
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.sheet-body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 44px 48px 56px;
  text-align: left;
}

.sheet-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.sheet-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.sheet-copy p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

/* prerequisite terms: highlighted, clickable */
.term {
  display: inline;
  font: inherit;
  padding: 0 1px;
  background: transparent;
  border: none;
  border-bottom: 1.5px dotted #d99f76;
  color: var(--accent-deep);
  cursor: pointer;
  transition: background 0.2s ease, color 0.3s ease, border-color 0.3s ease;
}

.term:hover { background: var(--accent-wash); }

.term.known {
  color: #64805f;
  border-bottom-color: #aabfa4;
}

.term.known::after {
  content: " ✓";
  font-size: 0.75em;
}

.sheet-done {
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 550;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sheet-done:hover { background: var(--accent-deep); }

/* peek popover: the two-sentence tier before a full detour */
.peek {
  position: absolute;
  z-index: 5;
  width: min(320px, 80%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 16px 44px -14px rgba(60, 55, 45, 0.35);
  animation: rise 0.25s ease both;
}

.peek p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.peek-more {
  margin-top: 10px;
  padding: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--accent-deep);
  background: transparent;
  border: none;
  cursor: pointer;
}

.peek-more:hover { text-decoration: underline; }

/* ---------- knowledge graph view ---------- */

.graph { position: fixed; inset: 0; z-index: 1; }
.graph[hidden] { display: none; }

/* in graph view, hide the marketing chrome so nothing bleeds through */
body.in-graph .top,
body.in-graph .foot { display: none; }

.graph-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.graph-stage.grabbing { cursor: grabbing; }

/* the first node pulses as a "start here" affordance until opened */
.gnode.seed .gnode-dot {
  animation: seed-pulse 1.8s ease-in-out infinite;
}

@keyframes seed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 102, 47, 0.1); }
  50%      { box-shadow: 0 0 0 11px rgba(224, 102, 47, 0.2); }
}

.graph-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.graph-edges {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

/* floating header over the stage */
.graph-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 26px 40px 46px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 32%, rgba(247, 246, 243, 0));
}

/* only the back button is interactive; the text blocks are full-width
   and would otherwise eat clicks on nodes sitting beneath the header */
.graph-top .path-back { pointer-events: auto; }

.graph-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  font-size: 13px;
  color: var(--ink-faint);
  background: rgba(247, 246, 243, 0.8);
  padding: 8px 16px;
  border-radius: 999px;
  transition: opacity 0.4s ease;
}

.graph-hint.gone { opacity: 0; }

/* a node: the dot is the anchor; card + label hang off it */
.gnode {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
  --pop: 0;
}

.gnode-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #c3b9a7;
  border: 2px solid var(--bg);
  box-shadow: 0 2px 8px -2px rgba(60, 55, 45, 0.25);
  cursor: pointer;
  transform: scale(var(--pop));
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.4, 1),
              background 0.4s ease, box-shadow 0.4s ease;
}

.gnode-dot:hover { background: var(--accent); }

/* one ring leaving the dot the moment its module finishes writing. Sits on a
   pseudo-element so it never fights the box-shadow the seed and active
   states use, and only animates while the class is on — no idle cost */
.gnode-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
/* Two animations, because a keyframe's timing function applies to every
   property in that segment. Sharing one curve made the ring fade on the same
   front-loaded easing that grows it, leaving it near-invisible while still
   expanding — a flash. Growth eases out; the fade stays linear. */
.gnode.just-ready .gnode-dot::after {
  animation:
    ring-grow 1.1s cubic-bezier(0.16, 0.62, 0.36, 1) both,
    ring-fade 1.1s linear both;
}
@keyframes ring-grow {
  from { transform: scale(0.55); }
  to   { transform: scale(3.2); }
}
@keyframes ring-fade {
  0%   { opacity: 0; }
  10%  { opacity: 0.85; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gnode.just-ready .gnode-dot::after { animation: none; }
}

/* One class each, all the same weight, so the order below IS the precedence:
   untouched, written, opened, the one to start on, open now, done.

   Colour tracks your progress, not the generator: grey until you have been
   there, accent while it is in your hands, sage once it is understood. The
   ring a node fires when its module lands is what reports generation, so
   written-but-unvisited only deepens slightly and stays grey. */
.gnode.trunk .gnode-dot { background: #b3a892; }
.gnode.ready .gnode-dot { background: #a9a294; }
.gnode.visited .gnode-dot { background: var(--accent); }
.gnode.seed .gnode-dot { background: var(--accent); }
.gnode.active .gnode-dot { background: var(--accent); box-shadow: 0 0 0 6px rgba(224, 102, 47, 0.12); }
.gnode.known .gnode-dot { background: #9bb596; }

.gnode-label {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  opacity: var(--pop);
  transition: opacity 0.4s ease;
}

.gnode.branch-left .gnode-label {
  left: auto;
  right: calc(100% + 12px);
}

/* titles land one at a time as the outline is mapped onto the trunk */
.gnode-label.arriving { animation: label-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes label-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-6px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.gnode.known .gnode-label { color: var(--ink-soft); }
.gnode.known .gnode-label::after { content: " ✓"; color: #6f8f68; font-size: 0.8em; }
.gnode.active .gnode-label { opacity: 0; } /* card shows the title instead */

/* expanded card, shown when the node is active */
.gnode-card {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: 340px;
  transform: translateX(-50%) translateY(6px);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow: 0 20px 50px -18px rgba(60, 55, 45, 0.35);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gnode.active .gnode-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.gnode.active { z-index: 20; }

.gnode-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.gnode-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.gnode-body p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.gnode-got {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 550;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gnode-got:hover { background: var(--accent-deep); }

/* prerequisite terms inside a card */
.term {
  display: inline;
  font: inherit;
  padding: 0 1px;
  background: transparent;
  border: none;
  border-bottom: 1.5px dotted #d99f76;
  color: var(--accent-deep);
  cursor: pointer;
  transition: background 0.2s ease, color 0.3s ease, border-color 0.3s ease;
}

.term:hover { background: var(--accent-wash); }
.term.known { color: #64805f; border-bottom-color: #aabfa4; }
.term.known::after { content: " ✓"; font-size: 0.75em; }

/* small peek popover for leaf / capped terms */
.peek {
  position: absolute;
  z-index: 30;
  width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  box-shadow: 0 16px 44px -14px rgba(60, 55, 45, 0.35);
  animation: rise 0.22s ease both;
}

.peek p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

.peek-more {
  margin-top: 9px;
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 550;
  color: var(--accent-deep);
  background: transparent;
  border: none;
  cursor: pointer;
}

.peek-more:hover { text-decoration: underline; }

/* ---------- module reader (near-full-screen, paginated) ---------- */

.reader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader[hidden] { display: none; }

.reader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 44, 40, 0.34);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.reader.open .reader-backdrop { opacity: 1; }

.reader-panel {
  position: relative;
  z-index: 1;
  /* narrow enough that a line of body text lands near 66 characters, which
     is where prose stops feeling like a wall */
  width: min(680px, 92vw);
  /* sizes to its content instead of a fixed height, so short pages don't
     leave a pool of blank space; long ones scroll inside the max */
  height: auto;
  min-height: 400px;
  max-height: 88vh;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 40px 90px -30px rgba(60, 55, 45, 0.5);
  display: flex;
  flex-direction: column;
  padding: 22px 52px 20px;
  opacity: 0;
  transform: translateY(12px) scale(0.99);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.reader.open .reader-panel { opacity: 1; transform: none; }

.reader-close {
  align-self: flex-start;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 0;
  margin-bottom: 12px;
}
.reader-close:hover { color: var(--accent-deep); }

/* title and visual cue share one row: the icon costs no vertical space, and
   its slot is a fixed size that is held from the moment the reader opens, so
   the text never shifts when the icon arrives a second or two later */
.reader-head {
  display: grid;
  grid-template-columns: 1fr 76px;
  align-items: center;
  gap: 22px;
  padding-bottom: 17px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.reader-headtext { min-width: 0; }

.reader-eyebrow {
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.reader-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: break-word;
}

/* the module's visual cue — a mnemonic, so it stays quiet */
.reader-figure {
  margin: 0;
  padding: 0;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--accent-wash);
}
/* an empty slot holds its space without looking like a broken image */
.reader-figure:empty { background: none; }
.reader-figure:not(:empty) { animation: icon-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes icon-in { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }

/* sized here rather than on svg.icon so the idle motion animation survives */
.reader-figure svg.icon { width: 46px; height: 46px; }

/* retrieved icons: solid shapes in ink, motion applied by us */
svg.icon {
  width: 92px;
  height: 92px;
  max-width: none;
  color: var(--ink);
  overflow: visible;
}
.icon-float { animation: icon-float 5s ease-in-out infinite; }
.icon-pulse { animation: icon-pulse 4.5s ease-in-out infinite; }
.icon-spin  { animation: icon-spin 18s linear infinite; transform-origin: 50% 50%; }
.icon-rest  { animation: icon-rest 6.5s ease-in-out infinite; transform-origin: 50% 55%; }
@keyframes icon-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes icon-pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.045); opacity: 1; } }
@keyframes icon-spin  { to { transform: rotate(360deg); } }
/* the resting state: slow enough to stay calm, big enough to actually see */
@keyframes icon-rest  { 0%, 100% { transform: scale(0.965); } 50% { transform: scale(1.035); } }

@media (prefers-reduced-motion: reduce) {
  .icon-float, .icon-pulse, .icon-spin, .icon-rest { animation: none; }
}

.reader-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px; }
.reader-page { position: relative; min-width: 0; }
/* media inside a page can never be wider than the content box */
.reader-page img, .reader-page svg, .reader-page embed { max-width: 100%; }
/* three tiers on a page: heading names it, key states it, body supports it */
.reader-heading {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18.5px;
  letter-spacing: -0.01em;
  margin: 0 0 13px;
  color: var(--ink);
  overflow-wrap: break-word;
}
.reader-page .reader-key {
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 17px;
  padding-left: 15px;
  border-left: 2px solid var(--accent);
  overflow-wrap: break-word;
}
.reader-page p {
  font-size: 16.5px;
  line-height: 1.74;
  color: var(--ink-soft);
  margin: 0 0 17px;
  overflow-wrap: break-word;
}
.reader-page p:last-child { margin-bottom: 0; }

.reader-embed {
  width: 100%;
  height: 250px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbf7f1;
  margin: 4px 0;
}

/* the empty first column is what keeps the dots centred on the panel rather
   than centred on the space the skip button leaves behind */
.reader-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 15px;
  margin-top: 20px;
  border-top: 1px solid var(--border);
}

.reader-skip {
  justify-self: end;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s ease;
}
.reader-skip:hover { color: var(--accent-deep); }
.reader-skip[hidden] { display: none; }
.reader-skip:focus { outline: none; }
.reader-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* page arrows live in the panel's side gutters, vertically centered */
.reader-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 46px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s ease, background 0.2s ease;
}
.reader-arrow-prev { left: 10px; }
.reader-arrow-next { right: 10px; }
.reader-arrow:hover:not(:disabled) { color: var(--accent-deep); background: var(--accent-wash); }
.reader-arrow:disabled { opacity: 0.25; cursor: default; }
/* clicking an arrow shouldn't leave a focus box sitting on the page */
.reader-arrow:focus { outline: none; }
.reader-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.reader-dots { display: flex; gap: 8px; }
.rdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.rdot.on { background: var(--accent); transform: scale(1.25); }
/* a page carrying an interactive demo advertises itself */
.rdot.has-demo { background: #d7b6a0; box-shadow: 0 0 0 3px rgba(224, 102, 47, 0.14); }
.rdot.has-demo.on { background: var(--accent); }

.reader-action {
  margin-top: 14px;
  align-self: center;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 550;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 11px;
  padding: 13px 26px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.reader-action:hover { background: var(--accent-deep); }
.reader-action[hidden] { display: none; }

/* ---------- finishing the whole path ---------- */
/* lives outside the reader so it can play over the finished graph, with
   every node sitting green behind it */
.path-done {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  pointer-events: none;
  background: rgba(253, 251, 247, 0.72);
  animation: done-veil 0.5s ease both;
}
.path-done[hidden] { display: none; }
.path-done.out { animation: done-veil-out 0.5s ease both; }

.done-badge {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: 0 24px 55px -20px rgba(60, 55, 45, 0.45);
  animation: done-pop 0.5s cubic-bezier(0.22, 1.35, 0.4, 1) 0.1s both;
}
/* the topic's own icon, held still — the badge is doing the moving */
.done-badge svg.icon { width: 58px; height: 58px; animation: none; }

.done-ring {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.done-ring circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 383.3;
  stroke-dashoffset: 383.3;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: done-ring 0.75s cubic-bezier(0.3, 0.85, 0.3, 1) 0.32s forwards;
}

.done-check {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px var(--bg-raised);
  animation: done-pop 0.4s cubic-bezier(0.22, 1.5, 0.4, 1) 0.92s both;
}
.done-check svg { width: 20px; height: 20px; }

.done-text { text-align: center; animation: done-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; }
.done-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 6px;
}
.done-sub { font-size: 15px; color: var(--ink-soft); margin: 0; }

.done-mark { display: grid; place-items: center; color: var(--accent); }
.done-mark svg { width: 54px; height: 54px; }

@media (prefers-reduced-motion: reduce) {
  .path-done, .done-badge, .done-check, .done-text { animation: none; opacity: 1; transform: none; }
  .done-ring circle { animation: none; stroke-dashoffset: 0; }
}

@keyframes done-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes done-veil-out { to { opacity: 0; } }
@keyframes done-pop {
  from { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.07); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes done-ring { to { stroke-dashoffset: 0; } }
@keyframes done-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* generating state (content being produced) */
.reader-gen {
  display: flex;
  gap: 9px;
  justify-content: center;
  padding: 70px 0 16px;
}
.gen-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  animation: gen-bounce 1s infinite ease-in-out;
}
.gen-dot:nth-child(2) { animation-delay: 0.15s; }
.gen-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes gen-bounce {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-5px); }
}
.reader-genlabel {
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
  margin: 0;
}
.peek-gen { color: var(--ink-faint); font-style: italic; }

/* a node whose content is still generating */
.gnode.generating .gnode-dot { animation: gen-ring 1.5s infinite ease-in-out; }
@keyframes gen-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 102, 47, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(224, 102, 47, 0.09); }
}

@media (max-width: 560px) {
  /* min-height:0 so a short page fits its content instead of looking tall;
     wider horizontal padding clears the side arrows so text can't collide */
  .reader-panel { width: 94vw; max-height: 90vh; min-height: 0; padding: 20px 46px 20px; border-radius: 18px; }
  .reader-title { font-size: 25px; }
  .reader-page p { font-size: 16.5px; }
  .reader-arrow { width: 28px; height: 40px; }
  .reader-arrow-prev { left: 6px; }
  .reader-arrow-next { right: 6px; }
}

/* ---------- footer ---------- */

.foot {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 22px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---------- small screens & motion ---------- */

@media (max-width: 560px) {
  .top { padding: 20px 22px; }
  .top-links { gap: 18px; }
  .ask { border-radius: 15px; padding-left: 18px; }
  .ask-input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .blob-a, .blob-b { animation: none; }
  .headline, .subline, .ask, .chips, .path { animation-duration: 0.01s; animation-delay: 0s; }
  .module { transition-duration: 0.01s; }
}

/* ---------- signed-in account menu (built by auth.js) ---------- */

.acct { position: relative; display: inline-flex; }

.acct-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.acct-btn:hover { border-color: #ddb9a4; }
.acct-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.acct-avatar {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-deep);
  display: grid; place-items: center;
  font-weight: 600; font-size: 12.5px; line-height: 1;
}
.acct-caret { color: var(--ink-faint); transition: transform 0.22s ease; }
.acct.open .acct-caret { transform: rotate(180deg); }

.acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px -22px rgba(60, 55, 45, 0.4);
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  animation: acct-pop 0.16s ease both;
}
/* [hidden] must beat the display:flex above (author rule vs UA [hidden]) */
.acct-menu[hidden] { display: none !important; }
@keyframes acct-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.acct-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 450;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-radius: 9px;
  padding: 9px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.acct-item:hover { background: var(--accent-wash); color: var(--accent-deep); }
.acct-item:focus-visible { outline: none; background: var(--accent-wash); color: var(--accent-deep); }
.acct-item-btn { color: var(--ink); }
.acct-sep { height: 1px; background: var(--border); margin: 6px 4px; }

@media (max-width: 520px) {
  .acct-btn { padding: 5px 8px; }
}

/* ---------- signed-out free-generation gate modal ---------- */
/* Sits on top of the visitor's existing result; matches the app's card + button
   language so it reads as part of the page, not a browser dialog. */
.gate-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(46, 44, 40, 0.42);
  backdrop-filter: blur(3px);
  animation: gate-fade 0.2s ease both;
}
.gate-overlay[hidden] { display: none !important; }
@keyframes gate-fade { from { opacity: 0; } to { opacity: 1; } }

.gate-card {
  position: relative;
  width: min(380px, 100%);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 34px 32px 30px;
  box-shadow: 0 30px 70px -34px rgba(60, 55, 45, 0.55);
  text-align: center;
  animation: gate-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gate-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.gate-close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  color: var(--ink-faint);
  background: transparent; border: none; border-radius: 8px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.gate-close:hover { background: var(--accent-wash); color: var(--accent-deep); }
.gate-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gate-title {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 4px 0 8px;
}
.gate-text {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 24px;
}

.gate-actions { display: flex; flex-direction: column; gap: 10px; }
.gate-btn {
  display: block; width: 100%;
  font-family: var(--sans); font-size: 15px; font-weight: 550;
  border-radius: 12px; padding: 13px 14px;
  text-decoration: none; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.gate-btn:active { transform: scale(0.99); }
.gate-btn-primary { color: #fff; background: var(--accent); border: 1px solid var(--accent); }
.gate-btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.gate-btn-secondary {
  color: var(--ink); background: transparent; border: 1px solid var(--border);
}
.gate-btn-secondary:hover { border-color: #ddb9a4; background: var(--accent-wash); }
.gate-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .gate-overlay, .gate-card { animation: none; }
}

/* ---------- Library search / sort / count ---------- */

.lib-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 22px;
}
/* the [hidden] attribute must win over the display rules above (author styles
   otherwise override the UA [hidden]) — used for the empty-library state */
.lib-controls[hidden],
.lib-tools[hidden] { display: none !important; }

.lib-search {
  flex: 1 1 220px;
  min-width: 170px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 13px;
  color: var(--ink-faint);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lib-search:focus-within {
  border-color: #c6c0b4;
  box-shadow: 0 2px 10px -4px rgba(60, 55, 45, 0.08);
}
.lib-search input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  padding: 11px 0;
}
.lib-search input::placeholder { color: var(--ink-faint); }

.lib-sort { display: inline-flex; align-items: center; gap: 8px; }
.lib-sort-label { font-size: 12.5px; color: var(--ink-faint); }
.lib-sort select {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.lib-sort select:hover { border-color: #ddb9a4; }
.lib-sort select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lib-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.lib-noresults {
  text-align: center;
  padding: 56px 20px;
  color: var(--ink-soft);
}
.lib-noresults p { margin: 0 0 6px; }
.lib-noresults-hint { font-size: 13.5px; color: var(--ink-faint); }

@media (max-width: 520px) {
  .lib-count { margin-left: 0; }
}