/*
 * Meridian design system
 *
 * @copyright  (C) 2026 Watchman Productions
 * @license    GNU General Public License version 2 or later
 *
 * ONE VOCABULARY FOR FORTY-NINE EXTENSIONS.
 *
 * Before this file the suite carried eleven competing token prefixes - --chr,
 * --ap, --tl, --mc, --ecal, --hol, --cd, --astro, --kind, --dt, --embed - and
 * 385 hardcoded colour literals. A site owner who wanted one accent colour had
 * to find and override it in each extension separately, and a template that
 * restyled the calendar left the clocks looking like a different product.
 *
 * Everything below is a --mrd- token. Extension stylesheets keep their own
 * prefixed variables, but those now RESOLVE to these, so:
 *
 *   - overriding --mrd-accent once restyles the whole suite
 *   - a template can theme Meridian without touching any extension
 *   - dark mode, high contrast and print are handled here, once
 *
 * WHY TOKENS AND NOT A FRAMEWORK. Joomla templates already ship Bootstrap,
 * and a second framework would fight it. Custom properties cost nothing,
 * cascade naturally, and let a template override a single value rather than
 * defeat a stylesheet.
 */

:root {
	/* ---- Colour -------------------------------------------------------- */

	/*
	 * Stated as raw channels so a rule can vary alpha without a second
	 * variable: rgb(var(--mrd-accent-rgb) / 12%) gives a tint of whatever the
	 * site owner set, rather than a hardcoded pale blue that stops matching
	 * the moment they change the accent.
	 */
	--mrd-accent-rgb: 47 109 184;
	--mrd-accent: rgb(var(--mrd-accent-rgb));
	--mrd-accent-soft: rgb(var(--mrd-accent-rgb) / 12%);
	--mrd-accent-line: rgb(var(--mrd-accent-rgb) / 38%);

	--mrd-ink-rgb: 26 32 44;
	--mrd-ink: rgb(var(--mrd-ink-rgb));
	--mrd-ink-soft: rgb(var(--mrd-ink-rgb) / 68%);
	--mrd-ink-faint: rgb(var(--mrd-ink-rgb) / 45%);

	--mrd-surface: #ffffff;
	--mrd-surface-sunk: #f6f7f9;
	--mrd-surface-raised: #ffffff;

	--mrd-line: rgb(var(--mrd-ink-rgb) / 14%);
	--mrd-line-strong: rgb(var(--mrd-ink-rgb) / 28%);

	/* Meaning, not appearance. A "past event" is grey because it is past, and
	   a template that redefines these keeps the meaning intact. */
	--mrd-positive: #1b7f4b;
	--mrd-caution: #9a6206;
	--mrd-negative: #b3261e;
	--mrd-muted: rgb(var(--mrd-ink-rgb) / 40%);

	/* ---- Type ---------------------------------------------------------- */

	/*
	 * inherit, deliberately. Meridian must look like the site it is installed
	 * in, not like Meridian. Only the numeric and monospace faces are stated,
	 * because a clock face and a coordinate table need tabular figures that a
	 * body font may not provide.
	 */
	--mrd-font: inherit;
	--mrd-font-numeric: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

	--mrd-text-xs: 0.78rem;
	--mrd-text-sm: 0.88rem;
	--mrd-text-md: 1rem;
	--mrd-text-lg: 1.18rem;
	--mrd-text-xl: 1.45rem;

	--mrd-leading-tight: 1.25;
	--mrd-leading: 1.55;

	/* ---- Space --------------------------------------------------------- */

	/* A 4px base. Every gap in the suite is a multiple, so vertical rhythm
	   holds when two Meridian modules sit in the same column. */
	--mrd-space-1: 0.25rem;
	--mrd-space-2: 0.5rem;
	--mrd-space-3: 0.75rem;
	--mrd-space-4: 1rem;
	--mrd-space-5: 1.5rem;
	--mrd-space-6: 2rem;

	/* ---- Shape --------------------------------------------------------- */

	--mrd-radius-sm: 3px;
	--mrd-radius: 6px;
	--mrd-radius-lg: 12px;
	--mrd-radius-pill: 999px;

	--mrd-shadow-sm: 0 1px 2px rgb(var(--mrd-ink-rgb) / 8%);
	--mrd-shadow: 0 2px 8px rgb(var(--mrd-ink-rgb) / 10%);
	--mrd-shadow-lg: 0 8px 24px rgb(var(--mrd-ink-rgb) / 14%);

	/* ---- Motion -------------------------------------------------------- */

	--mrd-transition: 140ms ease;
}

/*
 * Dark mode, from the SITE's signal rather than the operating system alone.
 *
 * Joomla templates commonly set data-bs-theme="dark" or a .dark class. Honouring
 * those first means Meridian follows the template's own switch; the media query
 * is the fallback for templates that have none.
 */
[data-bs-theme="dark"],
.dark {
	--mrd-ink-rgb: 232 236 241;
	--mrd-surface: #16191d;
	--mrd-surface-sunk: #101317;
	--mrd-surface-raised: #1d2126;
	--mrd-accent-rgb: 122 170 232;
	--mrd-positive: #4ec27f;
	--mrd-caution: #d9a338;
	--mrd-negative: #ef6b62;
	--mrd-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
	--mrd-shadow: 0 2px 8px rgb(0 0 0 / 45%);
	--mrd-shadow-lg: 0 8px 24px rgb(0 0 0 / 55%);
}

@media (prefers-color-scheme: dark) {
	/*
	 * Only when the template has NOT declared a scheme. Without :not() this
	 * would force dark onto a site whose template is explicitly light, which
	 * is the common complaint about extensions that implement dark mode.
	 */
	:root:not([data-bs-theme="light"]):not(.light) {
		--mrd-ink-rgb: 232 236 241;
		--mrd-surface: #16191d;
		--mrd-surface-sunk: #101317;
		--mrd-surface-raised: #1d2126;
		--mrd-accent-rgb: 122 170 232;
		--mrd-positive: #4ec27f;
		--mrd-caution: #d9a338;
		--mrd-negative: #ef6b62;
	}
}

/* Respect a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--mrd-transition: 0ms;
	}
}

/* A reader who has asked for more contrast gets solid lines, not tints. */
@media (prefers-contrast: more) {
	:root {
		--mrd-line: rgb(var(--mrd-ink-rgb) / 45%);
		--mrd-line-strong: rgb(var(--mrd-ink-rgb) / 75%);
		--mrd-ink-soft: rgb(var(--mrd-ink-rgb) / 88%);
		--mrd-ink-faint: rgb(var(--mrd-ink-rgb) / 70%);
	}
}

/* ---- Shared primitives ------------------------------------------------- */

/*
 * Deliberately few. These are the things every Meridian extension needs and
 * would otherwise each reinvent - not a component library. Anything used by
 * one extension stays in that extension's stylesheet.
 */

.mrd-card {
	background: var(--mrd-surface-raised);
	border: 1px solid var(--mrd-line);
	border-radius: var(--mrd-radius);
	box-shadow: var(--mrd-shadow-sm);
	padding: var(--mrd-space-4);
}

.mrd-stack > * + * {
	margin-top: var(--mrd-space-3);
}

.mrd-meta {
	color: var(--mrd-ink-faint);
	font-size: var(--mrd-text-sm);
}

/* Figures that line up in a column: times, counts, coordinates. */
.mrd-numeric {
	font-family: var(--mrd-font-numeric);
	font-variant-numeric: tabular-nums;
}

.mrd-badge {
	display: inline-block;
	padding: var(--mrd-space-1) var(--mrd-space-2);
	border-radius: var(--mrd-radius-pill);
	background: var(--mrd-accent-soft);
	color: var(--mrd-accent);
	font-size: var(--mrd-text-xs);
	line-height: 1.4;
}

/*
 * Visually hidden but read aloud. Every extension needs this and several had
 * their own copy; the clip-path line matters because the older clip: rect()
 * alone is ignored by some screen readers.
 */
.mrd-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * A focus ring Meridian controls, because template focus styles vary from
 * excellent to absent and a keyboard user should never lose their place
 * inside one of these interfaces.
 */
.mrd-focusable:focus-visible,
.mrd-card a:focus-visible,
.mrd-badge:focus-visible {
	outline: 2px solid var(--mrd-accent);
	outline-offset: 2px;
	border-radius: var(--mrd-radius-sm);
}

/* ---- Print ------------------------------------------------------------- */

/*
 * Calendars, event lists and sky tables get printed. Without this they print
 * their dark surfaces and drop their borders, which wastes ink and loses the
 * grid that made the table readable.
 */
@media print {
	:root {
		--mrd-surface: #fff;
		--mrd-surface-sunk: #fff;
		--mrd-surface-raised: #fff;
		--mrd-ink-rgb: 0 0 0;
		--mrd-line: #999;
		--mrd-line-strong: #333;
		--mrd-shadow-sm: none;
		--mrd-shadow: none;
		--mrd-shadow-lg: none;
	}

	.mrd-card {
		break-inside: avoid;
		box-shadow: none;
	}
}

/* ---- Compatibility bridge ---------------------------------------------- */

/*
 * The suite grew eleven token prefixes before this file existed, and five
 * DIFFERENT accent colours: #2b6ef5 in Articles Plus, the timeline, the
 * countdown and the embed plugin; #b3892f in Chronos; #b06bff in the
 * minicalendar; #445 in the event calendar; #8a5cc4 for holidays.
 *
 * Redefining them here means every extension inherits the site's accent
 * without a single extension stylesheet being rewritten. An extension that
 * genuinely needs its own colour - the clock hands, the sky gradient - keeps
 * its own token below and is not bridged.
 *
 * This block is the reason the change is safe: no selector moved, no rule was
 * deleted, and any extension can still override a token locally.
 */
:root {
	/* One accent, everywhere. */
	--ap-accent: var(--mrd-accent);
	--tl-accent: var(--mrd-accent);
	--cd-accent: var(--mrd-accent);
	--embed-accent: var(--mrd-accent);
	--kind-colour: var(--mrd-accent);
	--chr-accent: var(--mrd-accent);
	--mc-accent: var(--mrd-accent);
	--ecal-accent: var(--mrd-accent);

	/* One rule colour, so borders match across modules in a column. */
	--ap-rule: var(--mrd-line);
	--chr-rule: var(--mrd-line);
	--astro-rule: var(--mrd-line);
	--ecal-line: var(--mrd-line);
	--tl-line: var(--mrd-line);

	/* One surface and one ink. */
	--ap-surface: var(--mrd-surface-sunk);
	--ap-surface-hover: var(--mrd-accent-soft);
	--tl-surface: var(--mrd-surface-sunk);
	--chr-ink: var(--mrd-ink);
	--chr-ink-soft: var(--mrd-ink-soft);
	--ecal-pop: var(--mrd-ink);

	/* One spacing scale and one type scale. */
	--ap-space-1: var(--mrd-space-1);
	--ap-space-2: var(--mrd-space-2);
	--ap-space-3: var(--mrd-space-3);
	--ap-space-4: var(--mrd-space-4);
	--ap-space-5: var(--mrd-space-5);
	--ap-space-6: var(--mrd-space-6);
	--ap-text-xs: var(--mrd-text-xs);
	--ap-text-sm: var(--mrd-text-sm);
	--ap-text-lg: var(--mrd-text-lg);
	--ap-text-xl: var(--mrd-text-xl);
	--ap-radius: var(--mrd-radius);
	--ap-radius-sm: var(--mrd-radius-sm);

	/* One focus ring, so tabbing through a page does not change appearance. */
	--ap-focus: 0 0 0 3px var(--mrd-accent-line);

	/* One shadow. */
	--chr-shadow: var(--mrd-shadow);
}

/*
 * NOT bridged, on purpose:
 *
 *   --chr-gold, --chr-hand, --chr-second, --chr-face-bg, --chr-face-edge
 *       A Big Ben face is brass and a dive watch has an orange second hand.
 *       These are the subject, not the theme.
 *
 *   --chr-sky-day, --chr-sky-night, --chr-moon
 *       Sky colours are data, not decoration.
 *
 *   --hol-colour, --mc-today
 *       Holiday and today markers must stay distinguishable FROM the accent,
 *       so tying them to it would make today invisible on an accent-coloured
 *       calendar.
 */

/* ===========================================================================
   THE HOST TEMPLATE DOES NOT GET TO COLOUR OUR TEXT.

   Greg, 2026-09-24: "all components on crosshome need black and other text over
   yellow build it in yellpw text shoukdbt show up in our compinents".

   crosshome.com paints every link and every heading in the body gold:

       #sp-main-body a, #sp-bottom a, #sp-footer a { color: #ffd012; }
       #sp-main-body h1, h2, h3, h4 ...            { color: #ffd012; }

   That is right for the site's own pages, whose background is near-black. It is
   wrong inside a Meridian component, every one of which paints its own light
   reading surface - gold on cream measures about 1.6:1, which is unreadable and
   fails WCAG several times over. Headings vanished the same way.

   ⚠ WHY HERE AND NOT IN TEN STYLESHEETS. Every Meridian extension already loads
   this file, and every one was going to need the same rule. Ten copies is ten
   places for the eleventh extension to be forgotten - which is exactly how the
   suite ended up with 385 hardcoded colours before this file existed.

   ⚠ WHY !important. The host rules are ID selectors (1-0-0) WITHOUT !important.
   An author !important beats them, and nothing weaker does. This is the one
   documented use of !important in the suite.

   ⚠ THEMING IS NOT LOST. The colour still comes from the tokens, so a template
   that wants to restyle Meridian sets --mrd-ink and --mrd-accent - the
   supported route - rather than reaching past the component with an ID.

   ⚠ SCOPED BY OUR OWN CLASS PREFIXES, never by `.com-<option>`: Joomla writes
   that on <body>, so it would style the entire site.
   =========================================================================== */

[class^="ch-"] h1,
[class^="mb-"] h1,
[class^="or-"] h1,
[class^="oracle-"] h1,
[class^="geo-"] h1,
[class^="ss-"] h1,
[class^="ap-"] h1,
[class^="wx-"] h1,
[class^="mpod-"] h1,
[class^="mc-"] h1,
[class^="mui-"] h1,
[class^="ch-"] h2,
[class^="mb-"] h2,
[class^="or-"] h2,
[class^="oracle-"] h2,
[class^="geo-"] h2,
[class^="ss-"] h2,
[class^="ap-"] h2,
[class^="wx-"] h2,
[class^="mpod-"] h2,
[class^="mc-"] h2,
[class^="mui-"] h2,
[class^="ch-"] h3,
[class^="mb-"] h3,
[class^="or-"] h3,
[class^="oracle-"] h3,
[class^="geo-"] h3,
[class^="ss-"] h3,
[class^="ap-"] h3,
[class^="wx-"] h3,
[class^="mpod-"] h3,
[class^="mc-"] h3,
[class^="mui-"] h3,
[class^="ch-"] h4,
[class^="mb-"] h4,
[class^="or-"] h4,
[class^="oracle-"] h4,
[class^="geo-"] h4,
[class^="ss-"] h4,
[class^="ap-"] h4,
[class^="wx-"] h4,
[class^="mpod-"] h4,
[class^="mc-"] h4,
[class^="mui-"] h4,
[class^="ch-"] h5,
[class^="mb-"] h5,
[class^="or-"] h5,
[class^="oracle-"] h5,
[class^="geo-"] h5,
[class^="ss-"] h5,
[class^="ap-"] h5,
[class^="wx-"] h5,
[class^="mpod-"] h5,
[class^="mc-"] h5,
[class^="mui-"] h5,
[class^="ch-"] h6,
[class^="mb-"] h6,
[class^="or-"] h6,
[class^="oracle-"] h6,
[class^="geo-"] h6,
[class^="ss-"] h6,
[class^="ap-"] h6,
[class^="wx-"] h6,
[class^="mpod-"] h6,
[class^="mc-"] h6,
[class^="mui-"] h6,
[class*=" ch-"] h1,
[class*=" mb-"] h1,
[class*=" or-"] h1,
[class*=" oracle-"] h1,
[class*=" geo-"] h1,
[class*=" ss-"] h1,
[class*=" ap-"] h1,
[class*=" wx-"] h1,
[class*=" mpod-"] h1,
[class*=" mc-"] h1,
[class*=" mui-"] h1,
[class*=" ch-"] h2,
[class*=" mb-"] h2,
[class*=" or-"] h2,
[class*=" oracle-"] h2,
[class*=" geo-"] h2,
[class*=" ss-"] h2,
[class*=" ap-"] h2,
[class*=" wx-"] h2,
[class*=" mpod-"] h2,
[class*=" mc-"] h2,
[class*=" mui-"] h2,
[class*=" ch-"] h3,
[class*=" mb-"] h3,
[class*=" or-"] h3,
[class*=" oracle-"] h3,
[class*=" geo-"] h3,
[class*=" ss-"] h3,
[class*=" ap-"] h3,
[class*=" wx-"] h3,
[class*=" mpod-"] h3,
[class*=" mc-"] h3,
[class*=" mui-"] h3,
[class*=" ch-"] h4,
[class*=" mb-"] h4,
[class*=" or-"] h4,
[class*=" oracle-"] h4,
[class*=" geo-"] h4,
[class*=" ss-"] h4,
[class*=" ap-"] h4,
[class*=" wx-"] h4,
[class*=" mpod-"] h4,
[class*=" mc-"] h4,
[class*=" mui-"] h4,
[class*=" ch-"] h5,
[class*=" mb-"] h5,
[class*=" or-"] h5,
[class*=" oracle-"] h5,
[class*=" geo-"] h5,
[class*=" ss-"] h5,
[class*=" ap-"] h5,
[class*=" wx-"] h5,
[class*=" mpod-"] h5,
[class*=" mc-"] h5,
[class*=" mui-"] h5,
[class*=" ch-"] h6,
[class*=" mb-"] h6,
[class*=" or-"] h6,
[class*=" oracle-"] h6,
[class*=" geo-"] h6,
[class*=" ss-"] h6,
[class*=" ap-"] h6,
[class*=" wx-"] h6,
[class*=" mpod-"] h6,
[class*=" mc-"] h6,
[class*=" mui-"] h6 {
	color: var(--mrd-ink) !important;
}

[class^="ch-"] a,
[class*=" ch-"] a,
[class^="mb-"] a,
[class*=" mb-"] a,
[class^="or-"] a,
[class*=" or-"] a,
[class^="oracle-"] a,
[class*=" oracle-"] a,
[class^="geo-"] a,
[class*=" geo-"] a,
[class^="ss-"] a,
[class*=" ss-"] a,
[class^="ap-"] a,
[class*=" ap-"] a,
[class^="wx-"] a,
[class*=" wx-"] a,
[class^="mpod-"] a,
[class*=" mpod-"] a,
[class^="mc-"] a,
[class*=" mc-"] a,
[class^="mui-"] a,
[class*=" mui-"] a {
	color: var(--mrd-accent) !important;
}

[class^="ch-"] a:hover,
[class*=" ch-"] a:hover,
[class^="mb-"] a:hover,
[class*=" mb-"] a:hover,
[class^="or-"] a:hover,
[class*=" or-"] a:hover,
[class^="oracle-"] a:hover,
[class*=" oracle-"] a:hover,
[class^="geo-"] a:hover,
[class*=" geo-"] a:hover,
[class^="ss-"] a:hover,
[class*=" ss-"] a:hover,
[class^="ap-"] a:hover,
[class*=" ap-"] a:hover,
[class^="wx-"] a:hover,
[class*=" wx-"] a:hover,
[class^="mpod-"] a:hover,
[class*=" mpod-"] a:hover,
[class^="mc-"] a:hover,
[class*=" mc-"] a:hover,
[class^="mui-"] a:hover,
[class*=" mui-"] a:hover,
[class^="ch-"] a:focus,
[class*=" ch-"] a:focus,
[class^="mb-"] a:focus,
[class*=" mb-"] a:focus,
[class^="or-"] a:focus,
[class*=" or-"] a:focus,
[class^="oracle-"] a:focus,
[class*=" oracle-"] a:focus,
[class^="geo-"] a:focus,
[class*=" geo-"] a:focus,
[class^="ss-"] a:focus,
[class*=" ss-"] a:focus,
[class^="ap-"] a:focus,
[class*=" ap-"] a:focus,
[class^="wx-"] a:focus,
[class*=" wx-"] a:focus,
[class^="mpod-"] a:focus,
[class*=" mpod-"] a:focus,
[class^="mc-"] a:focus,
[class*=" mc-"] a:focus,
[class^="mui-"] a:focus,
[class*=" mui-"] a:focus {
	color: var(--mrd-accent) !important;
}