/* Agoramores — "april" theme overrides. Loaded after main.css.
   Every selector here is scoped to body[data-theme-id="april"]. */

/* April — a real creek on a bright late-summer afternoon. Sunlit leaf cover up top,
   far bank, then moving water carrying the page. Red anchor rides the clay bank and
   the one maple already turning. Every token is a real colour: no black placeholders,
   so headings render their gradient instead of reading as flat black. Moved here from
   August; values are byte-identical to the Obsidian --april-* set. */
body[data-theme-id="april"] {
  --tt-bg: #dee8dd;
  /* Link-hover paired to THIS block's ground, not the mode name (standing
     rule 2026-08-14). #dde8de is light: #FF465A only measures 2.66:1 here,
     so this block takes the same-hue dark variant, #BD0014 — 5.25:1. */
  --link-hover: #BC0900;
  --tt-bg-alt: #bfd4bd;
  --tt-cyan: #192019;
  --tt-cyan-soft: #394539;
  --tt-yellow: #a8791b;
  --tt-orange: #c1562b;
  --tt-chartreuse: #5d7a1f;
  --tt-green: #366a35;
  --tt-pink: #b53c3c;
  --tt-purple: #6d3f35;
  --tt-blue: #586442;
  --tt-teal: #556a4a;
  --tt-gray: #4e5a4e;
  --tt-gold: #8a6d1f;
  --tt-red: #b3261e;
  --tt-breadcrumb-text: #8f2018;
  --tt-breadcrumb-glow: rgba(179, 38, 30, 0.22);
  /* Hover/focus halo for the zodiac glyphs. This month's breadcrumb glow is
     too faint to trace a character, so the chips get their own value; the
     rule that uses it lives once in main.css. Never a border. */
  --zodiac-glow: rgba(143, 32, 24, 0.55);
  /* The tarot card's engraving, cut the right way round for a light card. The
     :root default in main.css lays the lit lip of the stroke in BLACK below the
     glyph, which is how an engraving reads on a dark card and how it has to be
     on July's ground — but this month's card is pale, and a black lip under a
     numeral on pale card is a drop shadow, not a cut. White below, and the
     numeral and the trail separators read as pressed into the stock. */
  --tt-engrave: 0 1px 0 rgba(242, 230, 210, 0.75);
  --tt-heading-rainbow: linear-gradient(
    90deg,
    var(--tt-red),
    var(--tt-orange),
    var(--tt-gold),
    var(--tt-green),
    var(--tt-blue),
    var(--tt-red)
  );
  --tt-heading-rainbow-vertical: linear-gradient(
    180deg,
    var(--tt-red),
    var(--tt-orange),
    var(--tt-gold),
    var(--tt-green),
    var(--tt-blue),
    var(--tt-red)
  );
  --tt-heading-text-rainbow: linear-gradient(
    90deg,
    var(--tt-red),
    var(--tt-orange),
    var(--tt-gold),
    var(--tt-chartreuse),
    var(--tt-green),
    var(--tt-blue),
    var(--tt-purple),
    var(--tt-pink),
    var(--tt-red),
    var(--tt-orange),
    var(--tt-gold),
    var(--tt-chartreuse),
    var(--tt-green),
    var(--tt-blue),
    var(--tt-purple),
    var(--tt-pink),
    var(--tt-red)
  );
  --bg: #dee8dd;
  --surface: transparent;
  --text: var(--tt-cyan);
  --text-soft: var(--tt-cyan-soft);
  --muted: var(--tt-gray);
  --border: var(--tt-red);
  --border-dim: rgba(179, 38, 30, 0.26);
  --border-teal: rgba(85, 106, 74, 0.5);
  background: #dee8dd;
  color: var(--tt-cyan);
  color-scheme: light;
}

body[data-theme-id="april"] .breadcrumb-nav {
  background: rgba(242, 230, 210, 0.46);
  box-shadow: none;
}

/* Daylight scene: no CRT scanline. (The neon strip used to be switched off
   here too; main.css retired it site-wide on 2026-08-18 and the mark at the
   head of the window is the frame's now.) */
body[data-theme-id="april"]::before,
body[data-theme-id="april"] .breadcrumb-nav::before {
  display: none;
  animation: none;
}

/* Leaf cover → far bank → waterline → open water, all light enough to carry dark ink. */
body[data-theme-id="april"] .night-sky {
  background:
    radial-gradient(ellipse at 12% 1%, rgba(214, 233, 168, 0.9), transparent 24%),
    radial-gradient(ellipse at 47% -3%, rgba(190, 219, 150, 0.72), transparent 21%),
    radial-gradient(ellipse at 86% 0%, rgba(205, 228, 162, 0.82), transparent 23%),
    radial-gradient(ellipse at 74% 27%, rgba(179, 38, 30, 0.22), transparent 11%),
    radial-gradient(ellipse at 22% 29%, rgba(93, 122, 31, 0.24), transparent 13%),
    linear-gradient(
      180deg,
      #c6dcae 0%,
      #d3e4bb 9%,
      #c9dcb6 18%,
      #bcd2b2 26%,
      #9db39b 31.4%,
      #8c9a89 32.6%,
      #acb9a8 36%,
      #becabb 43%,
      #ccd8cb 56%,
      #d7e2d7 74%,
      #dfe8df 100%
    );
  background-repeat: no-repeat;
}

/* Dappled sun coming through the leaves — static, so the water owns the motion. */
body[data-theme-id="april"] .night-sky::before {
  inset: 0;
  opacity: 0.7;
  background-image:
    radial-gradient(circle at 14% 5%, rgba(234, 234, 205, 0.72) 0 2.6%, transparent 8%),
    radial-gradient(circle at 32% 2%, rgba(233, 233, 211, 0.58) 0 1.9%, transparent 6.4%),
    radial-gradient(circle at 57% 7%, rgba(231, 236, 201, 0.52) 0 2.3%, transparent 7.2%),
    radial-gradient(circle at 79% 3%, rgba(234, 234, 209, 0.62) 0 2.8%, transparent 8.6%);
  background-repeat: no-repeat;
  background-size: auto;
  background-blend-mode: normal;
  animation: none;
}

/* Two ripple depths on the water. Each layer scrolls exactly one tile WIDTH, so the
   current never seams; the tile HEIGHTS are deliberately co-prime-ish and different per
   glint so rows never line up into horizontal banding. Far water slow, near water quicker. */
body[data-theme-id="april"] .night-sky__stars--far {
  inset: 33% -3rem -3rem;
  opacity: 0.46;
  background-image:
    radial-gradient(ellipse 7rem 0.085rem at 28% 24%, rgba(242, 230, 210, 0.72) 0 44%, transparent 100%),
    radial-gradient(ellipse 4.6rem 0.07rem at 71% 58%, rgba(242, 230, 210, 0.56) 0 44%, transparent 100%),
    radial-gradient(ellipse 9.4rem 0.075rem at 13% 81%, rgba(220, 237, 219, 0.64) 0 44%, transparent 100%),
    radial-gradient(ellipse 5.8rem 0.06rem at 52% 37%, rgba(242, 230, 210, 0.5) 0 44%, transparent 100%);
  background-size: 24rem 9.5rem, 24rem 13.5rem, 24rem 17.5rem, 24rem 21.5rem;
  background-position: 0 0, 6rem 2rem, 13rem 5rem, 3rem 8rem;
  background-repeat: repeat;
  background-blend-mode: normal;
  animation: aprilCreekFar 26s linear infinite;
}

body[data-theme-id="april"] .night-sky__stars--near {
  inset: 45% -3rem -3rem;
  opacity: 0.58;
  background-image:
    radial-gradient(ellipse 3.4rem 0.11rem at 21% 31%, rgba(242, 230, 210, 0.88) 0 42%, transparent 100%),
    radial-gradient(ellipse 5.2rem 0.095rem at 64% 67%, rgba(242, 230, 210, 0.7) 0 42%, transparent 100%),
    radial-gradient(ellipse 2.2rem 0.13rem at 88% 19%, rgba(236, 233, 207, 0.78) 0 42%, transparent 100%),
    radial-gradient(ellipse 4.1rem 0.1rem at 41% 84%, rgba(242, 230, 210, 0.62) 0 42%, transparent 100%);
  background-size: 16rem 7.5rem, 16rem 10.5rem, 16rem 14.5rem, 16rem 19.5rem;
  background-position: 0 0, 4rem 3rem, 9rem 6rem, 2rem 11rem;
  background-repeat: repeat;
  background-blend-mode: normal;
  animation: aprilCreekNear 11s linear infinite;
}

body[data-theme-id="april"] .heading-section::before,
body[data-theme-id="april"] .page-toc::before {
  display: none;
}

/* Near bank: wet gravel and a few rounded stones. Kept light so footer text still reads. */
body[data-theme-id="april"] .night-sky__aurora {
  display: block;
  z-index: 2;
  left: -2%;
  right: -2%;
  bottom: -1px;
  inset-block-start: auto;
  height: clamp(3.2rem, 8vh, 5.8rem);
  clip-path: none;
  background:
    radial-gradient(ellipse 4.4rem 1.4rem at 11% 64%, #9d9280 0 58%, transparent 60%),
    radial-gradient(ellipse 3.1rem 1rem at 33% 76%, #ab9f8b 0 58%, transparent 60%),
    radial-gradient(ellipse 5.4rem 1.6rem at 61% 68%, #948974 0 58%, transparent 60%),
    radial-gradient(ellipse 3.7rem 1.1rem at 85% 78%, #a89c88 0 58%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(170, 158, 134, 0.5) 32%, #b3a68e 68%, #9b8f78 100%);
  background-repeat: no-repeat;
  box-shadow: none;
}

body[data-theme-id="april"] .brand a {
  color: var(--tt-red);
  text-shadow: 0 1px 0 rgba(242, 230, 210, 0.55);
}

body[data-theme-id="april"] input,
body[data-theme-id="april"] textarea,
body[data-theme-id="april"] select,
body[data-theme-id="april"] code,
body[data-theme-id="april"] pre {
  background: rgba(242, 230, 210, 0.58);
  color: var(--tt-cyan);
}

body[data-theme-id="april"] th {
  background: var(--tt-red);
  color: #f5e5d3;
}

/* Fireworks are Independence Day furniture: July theme only. The JS also refuses to
   spawn them off-July, so this is belt-and-braces for any burst already on screen. */
body[data-theme-id="april"] .night-sky__fireworks {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Month blocks set their ambient motion on higher-specificity selectors, so they
     need their own entry here. Motion stops; the first frame stays complete. */
  body[data-theme-id="april"] .night-sky::before,
  body[data-theme-id="april"] .night-sky__stars,
  body[data-theme-id="april"] .night-sky__aurora {
    animation: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-data: reduce) {
  /* Month themes set ambient motion on higher-specificity selectors; stop those too. */
  body[data-theme-id="april"] .night-sky::before,
  body[data-theme-id="april"] .night-sky__stars,
  body[data-theme-id="april"] .night-sky__aurora {
    animation: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   APRIL BY NIGHT — the same creek, after dark.

   Base plus counterpart. The unmoded block above is April's canonical
   lighting and is untouched: a body with no data-mode is the creek on a bright
   afternoon, which is what the server sends and what a reader with JS off
   keeps for good. Every selector here carries both attributes, landing at
   (0,2,1)/(0,2,2) over the base's (0,1,1)/(0,1,2), so it wins on specificity
   rather than on order — which matters, because every theme sheet is loaded on
   every page.

   Same place, same hour of the year, twelve hours later. The leaf cover is a
   black canopy with a little sky through it, the far bank is a mass rather
   than a colour, and the water goes on doing what water does.

   THE WATER IS THE POINT, and it inverts. By day the creek is DARKER than the
   banks around it, because it is a hole full of shade under a lit canopy. At
   night it is the LIGHTEST thing in the frame, because it is a mirror and the
   only bright thing left to mirror is the sky. So the linear gradient that
   descends into shadow by day now climbs out of the trees into open water, and
   the one lit line at the far edge of the current is the moon caught on the
   waterline where the far bank meets it.

   --stars--far and --stars--near are the two ripple depths, not stars, so
   nothing here hides them — the "stars are the night" rule cannot apply to a
   month whose star layers carry water. They keep their tiles, their travel and
   their two loops; the glints only cool and come down, because moonlight on a
   ripple is a fraction of what noon puts on the same ripple, and a bright
   white sparkle field on a dark ground is the one thing this must not look
   like: it would read as exactly the star layer it is not.

   DELIBERATELY LEFT ALONE: the scanline, the header neon strip and the
   breadcrumb sweep. The base block switches all three off with the note
   "daylight scene: no CRT scanline, no neon strip", and April is a creek in
   both modes rather than a terminal that happens to be outdoors. Turning them
   back on after dark would also mean starting a continuous ambient animation
   the month does not currently run, which a counterpart block is not allowed
   to do — it re-lights motion or removes it, never adds.

   Nothing below declares `animation` or `transform`, so the sheet's existing
   prefers-reduced-motion and prefers-reduced-data blocks still reach and stop
   both current loops in night mode exactly as they do by day. No new selector
   needs adding to them. Fireworks and the city skyline stay July's alone.
   --------------------------------------------------------------------------- */
body[data-theme-id="april"][data-mode="night"] {
  /* Wet green-black: the creek bed, not a neutral dark. The month keeps its
     hue in the ground the way it keeps it in everything else. */
  --tt-bg: #101410;
  --tt-bg-alt: #1a211a;
  /* #0d1512 is dark: #FF465A clears 5.54:1 here, so night keeps the standard
     rose rather than the light-ground #BD0014 (2.80:1, would fail). */
  --link-hover: #FF4947;
  /* Ink and ground trade places. The body text is the pale green-white a
     moonlit page takes, 14:1 on the ground. */
  --tt-cyan: #dfe9dd;
  --tt-cyan-soft: #b3c4b2;
  /* Every accent is its daylight hue lifted rather than replaced — the clay,
     the turning maple, the moss, the water, the one purple in the shade — so
     the heading gradient runs the same spectrum it runs by day, and each stop
     clears 5:1 on #0d1512. Value spread is wide on purpose: eight stops from
     one band is a smudge in either direction. */
  --tt-yellow: #e8b64a;
  --tt-orange: #ef7a4a;
  --tt-chartreuse: #a3c352;
  --tt-green: #75b773;
  --tt-pink: #ed7a78;
  --tt-purple: #b78175;
  --tt-blue: #9dab81;
  --tt-teal: #8ea981;
  --tt-gray: #94a393;
  --tt-gold: #d8bd63;
  /* Red stays the anchor and stays saturated — it still leads every gradient,
     frames the card and heads the table. It is the clay bank and the maple
     already turning, now lit by a low moon instead of by the afternoon. */
  --tt-red: #f04236;
  --tt-breadcrumb-text: #ff6a52;
  /* By day this is a stain at 0.22, because a glow cannot read on a bright
     ground. On the dark creek it can be an actual glow again. */
  --tt-breadcrumb-glow: rgba(240, 66, 54, 0.5);
  /* And the chips' halo crosses with it: a dark red halo would vanish here, so
     it becomes a warm light one, checked against #0d1512. Still cast on the
     glyph itself — never a border, never a ring, never a box shadow. */
  --zodiac-glow: rgba(255, 138, 116, 0.7);
  /* The card is dark again, so the engraving cuts the other way: the lit lip
     of a stroke sits in black below the glyph. This restates the :root default
     rather than inheriting it, because the base block above now sets the light
     value and would otherwise carry into night. */
  --tt-engrave: 0 1px 0 rgba(0, 0, 0, 0.55);
  /* The three heading gradients are declared in the base block entirely out of
     var(--tt-*), so they re-resolve from the tokens above at no cost and are
     deliberately not restated. --text / --text-soft / --muted / --border are
     var-based for the same reason. */
  --bg: #101410;
  --border-dim: rgba(240, 66, 54, 0.3);
  --border-teal: rgba(142, 169, 129, 0.5);
  background: #101410;
  color: var(--tt-cyan);
  color-scheme: dark;
}

body[data-theme-id="april"][data-mode="night"] .breadcrumb-nav {
  background: rgba(16, 20, 16, 0.66);
}

/* THE SCENE, inverted. Same eleven stops, same waterline at 31.4-32.6% where
   the far bank meets the current, same two accent radials for the maple and
   the gap in the trees. What changes is the direction the value runs: by day
   the canopy is the brightest band and the water descends into shade, and at
   night the canopy is the darkest thing on the page and the water climbs
   toward the bottom of the frame, because it is reflecting the only light
   left. The waterline stop is the one bright line in the picture — the moon
   caught along the far edge of the water — and it is brighter than anything
   above it for the same reason a river shows up in a night photograph. */
body[data-theme-id="april"][data-mode="night"] .night-sky {
  background:
    radial-gradient(ellipse at 12% 1%, rgba(32, 48, 32, 0.9), transparent 24%),
    radial-gradient(ellipse at 47% -3%, rgba(39, 56, 39, 0.72), transparent 21%),
    radial-gradient(ellipse at 86% 0%, rgba(30, 46, 30, 0.82), transparent 23%),
    radial-gradient(ellipse at 74% 27%, rgba(240, 66, 54, 0.16), transparent 11%),
    radial-gradient(ellipse at 22% 29%, rgba(142, 169, 129, 0.14), transparent 13%),
    linear-gradient(
      180deg,
      #0b0e0a 0%,
      #0d110d 9%,
      #0b0e0a 18%,
      #0c110c 26%,
      #0e130e 31.4%,
      #222921 32.6%,
      #191f17 36%,
      #1d241b 43%,
      #21281f 56%,
      #252c22 74%,
      #283026 100%
    );
  background-repeat: no-repeat;
}

/* Dappled sun becomes moonlight through the same gaps in the same leaves —
   same four discs, same positions, a fraction of the strength and cooled off
   toward the blue a night sky actually is. Still static, so the water still
   owns all the motion. */
body[data-theme-id="april"][data-mode="night"] .night-sky::before {
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 14% 5%, rgba(210, 225, 210, 0.16) 0 2.6%, transparent 8%),
    radial-gradient(circle at 32% 2%, rgba(203, 219, 203, 0.12) 0 1.9%, transparent 6.4%),
    radial-gradient(circle at 57% 7%, rgba(213, 229, 213, 0.1) 0 2.3%, transparent 7.2%),
    radial-gradient(circle at 79% 3%, rgba(210, 225, 210, 0.14) 0 2.8%, transparent 8.6%);
}

/* FAR WATER. Tiles, positions, travel and timing all inherit from the base —
   only the glints are re-lit, so the current still slides exactly one tile
   width and still cannot seam. The alphas come down and the layer opacity with
   them, and this is the number that matters in the whole night block: at
   daylight strength these glints on a near-black creek are a twinkling white
   field, which is precisely the star layer this month's water is not. Dim,
   cool and long is what makes them a ripple. */
body[data-theme-id="april"][data-mode="night"] .night-sky__stars--far {
  opacity: 0.34;
  background-image:
    radial-gradient(ellipse 7rem 0.085rem at 28% 24%, rgba(220, 230, 219, 0.6) 0 44%, transparent 100%),
    radial-gradient(ellipse 4.6rem 0.07rem at 71% 58%, rgba(208, 220, 206, 0.46) 0 44%, transparent 100%),
    radial-gradient(ellipse 9.4rem 0.075rem at 13% 81%, rgba(195, 211, 192, 0.52) 0 44%, transparent 100%),
    radial-gradient(ellipse 5.8rem 0.06rem at 52% 37%, rgba(214, 224, 213, 0.4) 0 44%, transparent 100%);
}

/* NEAR WATER, a step brighter than the far layer exactly as it is by day —
   nearer water catches more of whatever is overhead. The base keeps one warm
   glint among the four; it stays warm here and becomes the only warm light on
   the creek, which reads as a fire on the bank rather than as an odd pixel. */
body[data-theme-id="april"][data-mode="night"] .night-sky__stars--near {
  opacity: 0.44;
  background-image:
    radial-gradient(ellipse 3.4rem 0.11rem at 21% 31%, rgba(220, 237, 220, 0.72) 0 42%, transparent 100%),
    radial-gradient(ellipse 5.2rem 0.095rem at 64% 67%, rgba(222, 230, 220, 0.56) 0 42%, transparent 100%),
    radial-gradient(ellipse 2.2rem 0.13rem at 88% 19%, rgba(255, 214, 160, 0.5) 0 42%, transparent 100%),
    radial-gradient(ellipse 4.1rem 0.1rem at 41% 84%, rgba(215, 226, 213, 0.48) 0 42%, transparent 100%);
}

/* THE NEAR BANK. Same four stones in the same places on the same wet gravel,
   now unlit: dark masses with only their wet upper faces catching anything.
   Kept dark deliberately, because the footer scrolls across this plane at the
   foot of the fixed viewport and the night ink is pale — the inverse of the
   base block's reason for keeping it light. */
body[data-theme-id="april"][data-mode="night"] .night-sky__aurora {
  background:
    radial-gradient(ellipse 4.4rem 1.4rem at 11% 64%, #2f3128 0 58%, transparent 60%),
    radial-gradient(ellipse 3.1rem 1rem at 33% 76%, #383a2f 0 58%, transparent 60%),
    radial-gradient(ellipse 5.4rem 1.6rem at 61% 68%, #2a2c24 0 58%, transparent 60%),
    radial-gradient(ellipse 3.7rem 1.1rem at 85% 78%, #35372c 0 58%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(38, 40, 32, 0.55) 32%, #24261e 68%, #1a1c16 100%);
  background-repeat: no-repeat;
}

/* The wordmark keeps the month's red. By day it is lifted off the bright
   ground by a one-pixel white engraving; after dark there is nothing to be
   lifted from, so the same red gets a soft warm bloom instead. Two static
   shadows, no animation. */
body[data-theme-id="april"][data-mode="night"] .brand a {
  color: var(--tt-red);
  text-shadow:
    0 0 10px rgba(240, 66, 54, 0.45),
    0 0 26px rgba(240, 66, 54, 0.2);
}

body[data-theme-id="april"][data-mode="night"] input,
body[data-theme-id="april"][data-mode="night"] textarea,
body[data-theme-id="april"][data-mode="night"] select,
body[data-theme-id="april"][data-mode="night"] code,
body[data-theme-id="april"][data-mode="night"] pre {
  background: rgba(19, 25, 19, 0.62);
  color: var(--tt-cyan);
}

/* The header bar keeps the red; only the ink on it crosses back, because the
   night red is a bright red and no longer carries pale type. */
body[data-theme-id="april"][data-mode="night"] th {
  background: var(--tt-red);
  color: #150f0b;
}

/* April creek current: each layer slides exactly one background tile, so the water
   loops without a seam. Transform only — no repaint, no layout. Shared by both
   modes: the night counterpart re-lights these layers and never restates their
   motion. */
@keyframes aprilCreekFar {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-24rem, 0, 0); }
}

@keyframes aprilCreekNear {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-16rem, 0, 0); }
}