/* notes.css — the Notes index shelf, the in-body dither diagrams for notes
   02/03, and the per-note navigation. Extends page.css + lab-page.css; never
   touches gravity-notes.css (gravity.html keeps its own stylesheet). Each note
   page sets a --note-accent via a .note--* class on <main>. */

.note--taste { --note-accent: var(--page-insights); }
.note--imports { --note-accent: var(--page-imports); }
.note--lab { --note-accent: var(--page-lab); }
.note--library { --note-accent: var(--page-library); }
.note--yellow { --note-accent: var(--yellow); }
.note--teal { --note-accent: var(--mo-teal); }

/* section labels on notes whose accent has no page.css variant */
.section-label--note { color: var(--note-accent); }

/* ============================ index: the shelf ============================ */
.notes-hero { padding-top: var(--section-gap); }
.notes-lede {
  max-width: 620px;
  color: var(--dim);
}
.notes-lede b { color: var(--ink); font-weight: 600; }

.notes-shelf {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(26px, 3.4vw, 46px) clamp(20px, 3vw, 40px);
  max-width: 1000px;
  margin-top: 8px;
  list-style: none;
}
@media (min-width: 760px) {
  .notes-shelf { grid-template-columns: repeat(3, 1fr); }
}

.note-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: inherit;
}

/* the cover: a book-cover poster with a page-edge hint and a gentle hover lift */
.note-cover-wrap {
  position: relative;
  aspect-ratio: 2 / 3;
  transition: transform var(--dur-slow) var(--ease-out);
}
.note-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--void);
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
/* stacked page edges to the right/bottom — the shelf-of-books hint */
.note-cover-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  box-shadow:
    3px 3px 0 0 var(--hairline),
    6px 6px 0 0 #0c0c0d;
}
/* spine seam down the left edge */
.note-cover-wrap::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 7px;
  z-index: 2;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(0,0,0,0.35) 70%, transparent);
  pointer-events: none;
}
.note-card:hover .note-cover-wrap,
.note-card:focus-visible .note-cover-wrap {
  transform: translateY(-5px);
}
.note-card:hover .note-cover,
.note-card:focus-visible .note-cover {
  border-color: color-mix(in srgb, var(--note-accent, var(--ink)) 55%, var(--border));
}
.note-card:focus-visible { outline: none; }

.note-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--note-accent, var(--dim));
}
.note-heading {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
  margin-top: -3px;
}
.note-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.01em;
}
.note-hook {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dim);
}

/* per-card accent (index cards carry their note's hue) */
.note-card--01 { --note-accent: var(--page-insights); }
.note-card--02 { --note-accent: var(--page-imports); }
.note-card--03 { --note-accent: var(--page-lab); }
.note-card--04 { --note-accent: var(--page-library); }
.note-card--05 { --note-accent: var(--yellow); }
.note-card--06 { --note-accent: var(--mo-teal); }

/* ============================ in-body figures ============================= */
.nfig {
  margin: 10px 0 46px;
  padding: clamp(12px, 2.4vw, 24px);
  background: var(--void);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.nf-svg { display: block; width: 100%; height: auto; }
.nf-cap,
.nfig figcaption {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--dim);
  letter-spacing: 0.01em;
  margin-top: 12px;
  max-width: 62ch;
}

/* shared text bits */
.nf-head {
  font-family: var(--font-mono);
  font-size: 14px;
  fill: var(--dim);
  letter-spacing: 0.04em;
  stroke: var(--void);
  stroke-width: 8px;
  paint-order: stroke fill;
}
.nf-cap-in { font-family: var(--font-mono); font-size: 13px; fill: var(--dim); }

/* ---- rail (02) ---- */
.nf-rail { stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 3 7; }
.nf-node { fill: var(--void); stroke: var(--faint); stroke-width: 1.5; }
.nf-node--first {
  fill: color-mix(in srgb, var(--note-accent) 22%, var(--void));
  stroke: var(--note-accent);
  stroke-width: 2;
}
.nf-step { font-family: var(--font-mono); font-size: 12px; fill: var(--faint); letter-spacing: 0.08em; }
.nf-lab { font-family: var(--font-mono); font-size: 15px; fill: var(--ink); }
.nf-lab--first { fill: var(--note-accent); }
.nf-sub { font-family: var(--font-mono); font-size: 12px; fill: var(--dim); }
.nf-sample { fill: var(--note-accent); opacity: 0; }

/* ---- fidelity grid (02) ---- */
.nf-region-box { fill: none; stroke: var(--hairline); stroke-width: 1; }
.nf-region--low .nf-region-box { stroke: var(--danger); stroke-dasharray: 3 3; }
.nf-fx { fill: var(--faint); }
.nf-region--low .nf-fx { fill: color-mix(in srgb, var(--danger) 55%, var(--faint)); }
.nf-gauge-axis { stroke: var(--border); stroke-width: 1.5; }
.nf-gauge-pass { stroke: var(--green); stroke-width: 2; }
.nf-gauge-floor { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 2 3; }
.nf-gauge-mark { fill: var(--note-accent); }
.nf-gauge-lab { font-family: var(--font-mono); font-size: 12px; fill: var(--dim); }
.nf-gauge-lab--pass { fill: var(--green); }
.nf-gauge-lab--floor { fill: var(--danger); }

/* ---- arms (03) ---- */
.tf-brief { fill: var(--void); stroke: var(--faint); stroke-width: 1.5; }
.tf-brief-lab { font-family: var(--font-mono); font-size: 16px; fill: var(--ink); }
.tf-brief-sub { font-family: var(--font-mono); font-size: 12px; fill: var(--dim); }
.tf-rail { stroke: var(--border); stroke-width: 1.25; stroke-dasharray: 3 6; }
.tf-chip { fill: var(--void); stroke: var(--faint); stroke-width: 1; }
.tf-chip--img { stroke: var(--dim); }
.tf-chip--ref { stroke: var(--note-accent); }
.tf-chip-lab { font-family: var(--font-mono); font-size: 11px; fill: var(--dim); }
.tf-out { fill: var(--void); stroke: var(--faint); stroke-width: 1.5; }
.tf-out--mcp { stroke: var(--note-accent); stroke-width: 2; }
.tf-out-lab { font-family: var(--font-mono); font-size: 14px; fill: var(--ink); }
.tf-out-sub { font-family: var(--font-mono); font-size: 11px; fill: var(--dim); }
.tf-link { stroke: var(--hairline); stroke-width: 1; }
.tf-score {
  fill: color-mix(in srgb, var(--note-accent) 12%, var(--void));
  stroke: var(--note-accent);
  stroke-width: 1.5;
}
.tf-score-lab { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); }
.tf-score-sub { font-family: var(--font-mono); font-size: 11px; fill: var(--dim); }
.tf-delta-line { stroke: var(--note-accent); stroke-width: 1.25; stroke-dasharray: 4 4; opacity: 0.8; }
.tf-delta-lab { font-family: var(--font-mono); font-size: 12px; fill: var(--note-accent); }
.tf-delta-q { font-family: var(--font-mono); font-size: 12px; fill: var(--dim); }

/* ---- flatten (03) ---- */
.tf-layer--kept { fill: color-mix(in srgb, var(--note-accent) 16%, var(--void)); stroke: var(--note-accent); stroke-width: 1.5; }
.tf-layer--lost { fill: var(--void); stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 4; }
.tf-layer--carry { fill: color-mix(in srgb, var(--note-accent) 12%, var(--void)); stroke: var(--note-accent); stroke-width: 1; }
.tf-layer-lab { font-family: var(--font-mono); font-size: 14px; fill: var(--ink); }
.tf-layer-lab--lost { fill: var(--faint); }
.tf-layer-tag { font-family: var(--font-mono); font-size: 12px; fill: var(--note-accent); }
.tf-layer-tag--lost { fill: var(--faint); }
.tf-layer-val { font-family: var(--font-mono); font-size: 12.5px; fill: var(--dim); }
.tf-cap-carry { fill: var(--dim); }

/* ---- distill funnel (04) ---- */
.df-cloud { fill: var(--faint); }
.df-cloud--near { fill: var(--dim); }
.df-rail { stroke: var(--note-accent); stroke-width: 1.25; stroke-dasharray: 3 7; opacity: 0.6; }
.df-keep { fill: var(--note-accent); }
.df-cite { stroke: var(--note-accent); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.55; }
.df-cite-dot { fill: var(--note-accent); opacity: 0.8; }
.df-head-keep { fill: var(--note-accent); }

/* ---- verdict coordinates (05) ---- */
.vs-kill { fill: var(--faint); opacity: 0.6; }
.vs-keep { fill: var(--note-accent); }
.vs-dir { stroke: var(--note-accent); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.85; }
.vs-dir-head { stroke: var(--note-accent); stroke-width: 1.5; fill: none; opacity: 0.85; }
.vs-lab-keep,
.vs-lab-kill,
.vs-lab-dir {
  font-family: var(--font-mono);
  stroke: var(--void);
  stroke-width: 8px;
  paint-order: stroke fill;
}
.vs-lab-keep { font-size: 15px; fill: var(--note-accent); }
.vs-lab-kill { font-size: 14px; fill: var(--faint); }
.vs-lab-dir { font-size: 12.5px; fill: var(--dim); }

/* ============================ per-note nav =============================== */
.note-foot-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 14px;
  margin-top: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.note-foot-nav a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--dim);
  transition: color var(--dur-mid) var(--ease-out);
}
.note-foot-nav a:hover { color: var(--ink); }
.note-foot-nav .nfn-dir { font-size: 10.5px; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.note-foot-nav .nfn-next { text-align: right; }
.note-foot-nav .nfn-index { text-align: center; align-self: center; }
.note-foot-nav a:only-child { margin-left: auto; }

/* ============================ mobile: readable figures =================== */
@media (max-width: 680px) {
  .nfig { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .nf-svg { min-width: 600px; }
  .nfig figcaption, .nf-cap { min-width: 0; }
  .note-foot-nav { font-size: 11.5px; }
}

/* ============================ motion (gated on .labm) =================== */
.labm .nf-sample {
  animation: nf-ride 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes nf-ride {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(calc(var(--x1) - var(--x0))); opacity: 0; }
}
.labm .nf-rail, .labm .tf-rail {
  stroke-dashoffset: 0;
  animation: nf-flow 2.6s linear infinite;
}
@keyframes nf-flow { to { stroke-dashoffset: -40; } }

@media (prefers-reduced-motion: reduce) {
  .nf-sample { display: none; }
  .nf-rail, .tf-rail { animation: none !important; }
}