/* /library-{v6..v15} - shared chartreuse hero + ink heatmap ribbon.
   Each variant imports this and adds its own track-section styles
   on top, so the brand moment (eyebrow → big title → lede →
   year-of-output heatmap) is identical across the lineup.

   Heatmap is now in an INK ribbon below the hero - chartreuse
   cells on ink ground (GitHub-style high contrast). The previous
   ink-on-chartreuse ramp lost cell legibility at high densities
   because the dark cells melted into the chartreuse. Splitting
   the hero (typography moment) from the heatmap ribbon (data
   moment) restores both. */

.lib-h-page { display: block; }

/* ============== Editorial hero (bone) ============== */
/* /library and /activity sit on the bone ground like
   /scan and /sign. Aligned to the site's standard rail tokens
   (--rail / --rail-x) so the title, heatmap, and working zone
   all share the same horizontal frame as the landing page. */
.lib-h {
  background: transparent;
  color: var(--ink);
  max-width: calc(var(--rail) + 2 * var(--rail-x));
  margin: 0 auto;
  padding:
    clamp(16px, 2.5vw, 32px)
    var(--rail-x)
    clamp(32px, 4vw, 56px);
}
.lib-h-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lib-h-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.7;
  margin: 0;
}
.lib-h-title {
  font-size: clamp(2.25rem, 7vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.96;
  margin: 0;
  max-width: 16ch;
}
.lib-h-sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.78;
  margin: 0;
  max-width: 60ch;
  font-family: var(--font);
  font-weight: 500;
}

/* ============== Ink heatmap ribbon (used by /activity) ============== */
.lib-h-ribbon {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(32px, 5vw, 56px) 0;
}
.lib-h-ribbon-inner {
  max-width: calc(var(--rail) + 2 * var(--rail-x));
  margin: 0 auto;
  padding: 0 var(--rail-x);
}
.lib-h-ribbon-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.lib-h-ribbon-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(240, 238, 233, 0.55);
  margin: 0;
}
.lib-h-ribbon-stat {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chartreuse);
  margin: 0;
}

/* Heatmap mount lives inside the ribbon - strip the white-card
   chrome heatmap.js applies and let the SVG sit on ink. */
.lib-h-heat .heatmap-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.lib-h-heat .heatmap-title {
  color: var(--bone);
  opacity: 0.7;
  margin-bottom: 14px;
  font-size: 0.72rem;
}
.lib-h-heat .heatmap-title b {
  color: var(--chartreuse);
  opacity: 1;
  font-weight: 600;
}

/* Chartreuse-cell ramp on ink ground. L0 (empty) is a barely-
   there bone wash so the grid reads as a grid; L4 is full
   chartreuse. The high-contrast direction inverts the GitHub
   default and reads cleanly at every density. */
.lib-h-heat .heatmap-cell[data-level="0"] { fill: rgba(240, 238, 233, 0.07); }
.lib-h-heat .heatmap-cell[data-level="1"] { fill: rgba(212, 224, 48, 0.32); }
.lib-h-heat .heatmap-cell[data-level="2"] { fill: rgba(212, 224, 48, 0.55); }
.lib-h-heat .heatmap-cell[data-level="3"] { fill: rgba(212, 224, 48, 0.78); }
.lib-h-heat .heatmap-cell[data-level="4"] { fill: var(--chartreuse); }
.lib-h-heat .heatmap-cell[data-future="1"] { fill: rgba(240, 238, 233, 0.03); }

/* Active-cell ring - bone outline reads on every cell density. */
.lib-h-heat .heatmap-cell[data-active="1"] {
  stroke: var(--bone);
  stroke-width: 1.5;
}
.lib-h-heat .heatmap-cell[data-clickable="1"]:hover {
  stroke: var(--bone);
  stroke-width: 1;
}

.lib-h-heat .heatmap-month,
.lib-h-heat .heatmap-dow {
  fill: var(--bone);
  opacity: 0.55;
}
.lib-h-heat .heatmap-legend {
  color: rgba(240, 238, 233, 0.55);
  font-size: 0.65rem;
}

/* ============== Bone calendar section (/library) ==============
   Adaptive dot-grid heatmap on the bone hero ground - no ink
   ribbon. Cells inherit the on-bone --heat-l0..l4 ramp from
   library.css's base rules (no scope override needed). */
.lib-h-cal {
  background: transparent;
  max-width: calc(var(--rail) + 2 * var(--rail-x));
  margin: 0 auto;
  padding: 0 var(--rail-x) clamp(16px, 2vw, 24px);
}
.lib-h-cal-inner {
  width: 100%;
}
.lib-h-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.lib-h-cal-eyebrow,
.lib-h-cal-stat {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.lib-h-cal-eyebrow { color: var(--fg-dim); }
.lib-h-cal-stat { color: var(--ink); }
.lib-h-cal-grid {
  width: 100%;
  /* Reserve the heatmap's natural height before the SVG mounts
     so the sticky controls + grid below don't jump down when
     the heatmap fetch returns. 12vw at desktop ≈ the dot grid's
     7-row + month-label height; clamp keeps it sane on mobile. */
  min-height: clamp(84px, 12vw, 160px);
}
.lib-h-cal-grid svg { display: block; width: 100%; height: auto; }

/* On-bone ramp tuned so single-track days are clearly legible.
   Buckets are 0 / 1 / 2 / 3-4 / 5+ - the top stop is reachable
   for a productive day rather than an unbounded extreme. */
.lib-h-cal-grid .heatmap-cell[data-level="0"] { fill: rgba(10, 10, 10, 0.07); }
.lib-h-cal-grid .heatmap-cell[data-level="1"] { fill: rgba(212, 224, 48, 0.70); }
.lib-h-cal-grid .heatmap-cell[data-level="2"] { fill: rgba(212, 224, 48, 0.88); }
.lib-h-cal-grid .heatmap-cell[data-level="3"] { fill: var(--chartreuse); }
.lib-h-cal-grid .heatmap-cell[data-level="4"] { fill: #8B9319; }
.lib-h-cal-grid .heatmap-cell[data-future="1"] { fill: rgba(10, 10, 10, 0.04); }

/* Mono uppercase axis labels matching the rest of the site. */
.lib-h-cal-grid .heatmap-month,
.lib-h-cal-grid .heatmap-dow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--ink);
  opacity: 0.55;
}

/* No stroke ever on the bone calendar - active state is signalled
   by contrast (everything-else dims to ink-5%) and hover by the
   shrink-to-70% transform. Both rules live in library.css. */

/* Placeholder shimmer in ink. */
.lib-h-heat .heatmap-card--placeholder .heatmap-grid {
  background:
    linear-gradient(
      90deg,
      rgba(240, 238, 233, 0.06),
      rgba(240, 238, 233, 0.14),
      rgba(240, 238, 233, 0.06)
    );
  background-size: 200% 100%;
}
.lib-h-heat .heatmap-card--placeholder .heatmap-title {
  color: rgba(240, 238, 233, 0.4);
}

/* Tooltip on the dark ribbon - bone bg, ink text reads on both
   the ribbon and pages we navigate to. */
body[class*="library-v"] #heatmap-tooltip-singleton {
  background: var(--bone);
  color: var(--ink);
}

/* ============== Mobile ============== */
@media (max-width: 720px) {
  .lib-h {
    padding: calc(48px + var(--nav-h)) clamp(20px, 5vw, 48px) 48px;
  }
  .lib-h-ribbon { padding: 32px clamp(20px, 5vw, 48px); }
  .lib-h-heat { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}