/* ============================================================
   COSMIC — the site's night-sky theme, adopted 2026-09-15.
   Palette and atmosphere are derived from SeraphIRC's themes.
   Dark mode  -> "aura"  seeds: bg #15141d / deep #100f17 / text #e8e5ee
                              accent #82e2ff / glow #a277ff / warm #ffca85
   Light mode -> "light" seeds: bg #fafcff / deep #e9eff8 / text #17202f
                              accent #2563eb / glow #1d4ed8 / cool #0891b2
   Seeds lifted from https://www.seraphirc.chat/styles.css, derived
   surfaces/text tiers follow that site's own color-mix formula.
   Loaded after styles.css; same specificity, later wins.
   The previous look is preserved on the `old-look` branch.
   ============================================================ */
:root {
	color-scheme: light dark;

	/* --- surfaces -------------------------------------------
	   Light tiers are RECESSED (tinted down from the ground with
	   --sd-accent), not lifted to white. netbros' own light theme
	   recesses these too; seraphirc lifts them because its panels
	   are bordered cards. Lifting them here left a white slab
	   floating on a blue ground. Dark mode still lifts. */
	--background-colour: light-dark(#e9eff8, #100f17);
	--colour-fill: light-dark(#fafcff, #15141d);
	--pre-background-colour: light-dark(#d9e4f7, #1b1a24);
	--summary-background-colour: light-dark(#d9e4f7, #1b1a24);
	--description-background-colour: light-dark(#dde7f7, #15141d);
	--blockquote-background-colour: light-dark(#dde7f7, #15141d);
	--update-background-colour: light-dark(#dde7f7, #1b1a24);
	--notation-background-colour: light-dark(#d3e0f7, #2a2932);
	--back-colour: light-dark(#d3e0f7, #2a2932);
	--background-target: light-dark(#c6d6f6, #253541);
	--target-text-bg: light-dark(#c6d6f6, #253541);

	/* --- text tiers ----------------------------------------- */
	--default-text: light-dark(#17202f, #e8e5ee);
	--default-text-strong: light-dark(#17202f, #ffffff);
	--default-text-target: light-dark(#17202f, #e8e5ee);
	--back-text-colour: light-dark(#17202f, #e8e5ee);
	--pinned-colour: light-dark(#17202f, #e8e5ee);
	--blockquote-text-colour: light-dark(#646b76, #a09ea7);
	--notation-text-colour: light-dark(#646b76, #a09ea7);
	--kbd-colour: light-dark(#646b76, #a09ea7);
	--header-description-colour: light-dark(#969ba3, #727079);
	--footer-description-colour: light-dark(#969ba3, #727079);
	--figcaption-colour: light-dark(#969ba3, #727079);
	--external-colour: light-dark(#969ba3, #727079);
	--dimmed: light-dark(#969ba3, #727079);
	--blurb-text: light-dark(#969ba3, #727079);
	--updated-timestamp-colour: light-dark(#969ba3, #727079);
	--note-a: light-dark(#969ba3, #727079);
	--blockquote-mark-colour: light-dark(#babec5, #504f58);
	--star-off: light-dark(#babec5, #504f58);

	/* --- accent (link / interactive) ------------------------ */
	--blue: light-dark(#2563eb, #82e2ff);
	--bigger-text-colour: light-dark(#2563eb, #82e2ff);
	--circle-text-colour: light-dark(#0891b2, #82e2ff);
	--blockquote-link: light-dark(#2563eb, #82e2ff);
	--card-hover: light-dark(#1d4ed8, #a277ff);
	--h1-hover: light-dark(#1d4ed8, #a277ff);
	/* left at the original #0086b3, both modes: --note-hover also drives
	   the note-date hover, the openheart, the p.via arrow and figcaption
	   links, and those all matched each other site-wide before. */
	--note-hover: #0086b3;
	--blockquote-hover: light-dark(#1d4ed8, #a277ff);

	/* --- lines, borders, chrome ----------------------------- */
	--div-colour: light-dark(#b2c8f4, #304a58);
	--card-border: light-dark(#b2c8f4, #304a58);
	--search-input-border: light-dark(#b2c8f4, #304a58);
	--image-border: light-dark(#b2c8f4, #304a58);
	--hr-background-colour: light-dark(#cad9f6, #22313c);
	--box-shadow: light-dark(#cad9f6, #2a2932);
	--div-blue: light-dark(#2563eb, #375f6b);
	--kbd-border-bottom: light-dark(#1d4ed8, #375f6b);
	--h1-colour: light-dark(#d6d9de, #37353e);
	--shadow-colour: light-dark(rgba(23, 32, 47, 0.18), rgba(162, 119, 255, 0.16));

	/* --- signature / warm accents --------------------------- */
	--stars-colour: light-dark(#d69e10, #ffca85);
	/* bare rgb triplets — light-dark() takes colours, not components */
	--scroll-colour: 37, 99, 235;
	--scroll-colour-muted: 29, 78, 216;
}

@media (prefers-color-scheme: dark) {
	:root {
		--scroll-colour: 130, 226, 255;
		--scroll-colour-muted: 162, 119, 255;
	}
}

/* ============================================================
   ATMOSPHERE — ported from seraphirc.chat's "celestial" +
   "divine" passes: night-sky ground, two-layer starfield, and
   the sporadic shooting stars.

   Star seeds per theme (their --sd-swh / --sd-sw / --sd-sc):
     aura  -> #ffffff / #ffca85 / #82e2ff   pale on night
     light -> #3b4a63 / #2563eb / #0891b2   dark specks on paper,
              the inversion that site's light themes use
   Meteors stay gold on every dark theme there; only the light
   themes recolor, to --sd-glow. Kept faithful.

   One structural difference from seraphirc: it hangs the ground
   on `body`, which works because its `html` has no background so
   body's propagates to the canvas. Here `html` sets its own
   (styles.css:392), so propagation never happens and a gradient
   on `body` paints the 50em column instead of the page. The
   ground goes on `html`; `body` turns transparent.
   ============================================================ */
:root {
	/* atmosphere seeds, straight from the two themes' seed sets */
	--sd-bg: light-dark(#fafcff, #15141d);
	--sd-deep: light-dark(#e9eff8, #100f17);
	--sd-accent: light-dark(#2563eb, #82e2ff);
	--sd-glow: light-dark(#1d4ed8, #a277ff);
	--sd-sw: light-dark(#2563eb, #ffca85);   /* warm star */
	--sd-sc: light-dark(#0891b2, #82e2ff);   /* cool star */
	--sd-swh: light-dark(#3b4a63, #ffffff);  /* white star */

	--meteor: light-dark(#1d4ed8, #f3d372);
	--meteor-hot: light-dark(#1d4ed8, #ffe9b0);
	--meteor-head: light-dark(#1d4ed8, #ffffff);
	--meteor-halo: light-dark(#1d4ed8, #f9e39a);
}

/* night-sky ground. seraphirc gets this with `background-attachment:
   fixed`, which iOS Safari has never honoured — it falls back to
   `scroll`, so the gradient would size to the whole document instead
   of the viewport and the 62% stop would land hundreds of pixels down
   a long notes page. Solid base colour on html (which is also what
   shows under iOS overscroll), and the gradient rides the fixed
   ::before layer with the stars, which every browser positions the
   same way. */
html {
	background: var(--sd-deep);
}
/* the column must not paint over the sky */
body { background: transparent; }

/* starfield: dense far layer */
body::before {
	content: "";
	display: block;
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(1px 1px at 22% 18%, color-mix(in srgb, var(--sd-swh) 55%, transparent), transparent),
		radial-gradient(1.4px 1.4px at 68% 44%, color-mix(in srgb, var(--sd-sw) 58%, transparent), transparent),
		radial-gradient(1px 1px at 84% 12%, color-mix(in srgb, var(--sd-sc) 58%, transparent), transparent),
		radial-gradient(1.2px 1.2px at 40% 72%, color-mix(in srgb, var(--sd-swh) 40%, transparent), transparent),
		radial-gradient(1px 1px at 8% 56%, color-mix(in srgb, var(--sd-sc) 42%, transparent), transparent),
		radial-gradient(1.6px 1.6px at 55% 92%, color-mix(in srgb, var(--sd-sw) 38%, transparent), transparent),
		radial-gradient(1px 1px at 92% 78%, color-mix(in srgb, var(--sd-swh) 45%, transparent), transparent),
		radial-gradient(1px 1px at 33% 38%, color-mix(in srgb, var(--sd-sc) 34%, transparent), transparent),
		/* ground rides along as the bottom layers */
		radial-gradient(ellipse at 50% -8%, color-mix(in srgb, var(--sd-glow) 20%, transparent), transparent 52%),
		radial-gradient(ellipse at 85% 4%, color-mix(in srgb, var(--sd-accent) 12%, transparent), transparent 44%),
		linear-gradient(180deg, var(--sd-bg), var(--sd-deep) 62%, var(--sd-deep));
	background-size: 260px 260px, 340px 340px, 300px 300px, 280px 280px,
		220px 220px, 380px 380px, 320px 320px, 240px 240px,
		100% 100%, 100% 100%, 100% 100%;
}

/* starfield: sparse near layer, gently twinkling */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(2px 2px at 16% 28%, color-mix(in srgb, var(--sd-sw) 85%, transparent), transparent),
		radial-gradient(1.8px 1.8px at 78% 18%, color-mix(in srgb, var(--sd-swh) 78%, transparent), transparent),
		radial-gradient(2px 2px at 62% 66%, color-mix(in srgb, var(--sd-sc) 72%, transparent), transparent),
		radial-gradient(1.8px 1.8px at 34% 86%, color-mix(in srgb, var(--sd-sw) 62%, transparent), transparent),
		radial-gradient(2.2px 2.2px at 90% 52%, color-mix(in srgb, var(--sd-swh) 58%, transparent), transparent);
	background-size: 520px 520px, 460px 460px, 560px 560px, 480px 480px, 620px 620px;
	animation: twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes twinkle {
	from { opacity: 0.4; }
	to { opacity: 1; }
}

/* shooting stars: brief meteors; most of each cycle is dark */
.shooting-stars {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.shooting-stars span {
	position: absolute;
	top: var(--top);
	left: var(--left);
	width: 190px;
	height: 2.5px;
	border-radius: 999px;
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--meteor) 55%, transparent) 40%,
		var(--meteor-hot) 82%,
		var(--meteor-head));
	box-shadow:
		0 0 10px color-mix(in srgb, var(--meteor-halo) 55%, transparent),
		0 0 26px color-mix(in srgb, var(--meteor) 30%, transparent);
	rotate: var(--angle);
	opacity: 0;
	animation: shoot var(--dur) linear infinite;
	animation-delay: var(--delay);
}
/* hot head with a bloom */
.shooting-stars span::after {
	content: "";
	position: absolute;
	right: -2px;
	top: -1.75px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--meteor-head);
	box-shadow:
		0 0 8px 2px color-mix(in srgb, var(--meteor-halo) 90%, transparent),
		0 0 22px 6px color-mix(in srgb, var(--meteor-halo) 55%, transparent);
}
@keyframes shoot {
	0%, 91% { opacity: 0; transform: translateX(0); }
	93% { opacity: 1; }
	100% { opacity: 0; transform: translateX(58vw); }
}

@media (prefers-reduced-motion: reduce) {
	.shooting-stars { display: none; }
	body::after { animation: none; opacity: 0.8; }
}

/* ============================================================
   SUMMARY HAIRLINE + LIGHT-MODE SYNTAX COLOURS

   `pre` is defined by a 1px border (--box-shadow); `summary` had
   only a fill, so it read as a floating slab. Same hairline, both
   modes.

   The syntax colours needed config.toml's `noClasses = false`
   first: [markup.highlight] had no such key, so Hugo defaulted to
   inline styles and stamped the github-DARK palette onto every
   token in both modes. The .chroma light/dark rules already in
   styles.css:496-504 never fired. With classes on, they do — and
   the light halves are retuned below for the recessed ground
   (#d9e4f7), where github-light's greys and reds fell to ~3.6:1.
   Dark halves are left alone.
   ============================================================ */
summary {
	border: 1px solid var(--box-shadow);
}

/* light tokens: all >= 4.8:1 on #d9e4f7 (body text is 12.8:1) */
.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs {
	color: light-dark(#55627a, #8b949e);   /* comments  3.76 -> 4.80 */
}
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt {
	color: light-dark(#a3123a, #ff7b72);   /* keywords  3.57 -> 6.06 */
}
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx {
	color: light-dark(#115e59, #a5d6ff);   /* strings: teal, so they read as
	                                          strings and not as body text on
	                                          a blue ground  -> 5.92 */
}
.chroma .na, .chroma .nb, .chroma .nc, .chroma .nf, .chroma .ni, .chroma .nl, .chroma .nn, .chroma .nt, .chroma .nv {
	color: light-dark(#6b21a8, #d2a8ff);   /* names     5.08 -> 6.81 */
}
.chroma .m, .chroma .mi, .chroma .mf, .chroma .mo {
	color: light-dark(#1d4ed8, #79c0ff);   /* numbers: the theme's own --sd-glow
	                                          4.91 -> 5.23 */
}
.chroma .o, .chroma .ow {
	color: light-dark(#9a3412, #ffa657);   /* operators: burnt orange, so they
	                                          part from keywords  -> 5.70 */
}
.chroma .gh { color: light-dark(#1d4ed8, #79c0ff); }
.chroma .gi { color: light-dark(#14532d, #7ee787); background-color: light-dark(#cfe8d6, rgba(63, 185, 80, 0.15)); }
.chroma .gd { color: light-dark(#7f1d1d, #ff7b72); background-color: light-dark(#f2d4d7, rgba(248, 81, 73, 0.15)); }