/*
 * trasix_ds 1.8.0: site stylesheet (Cassiopeia loads it as template.user)
 * Built by build.py from @trasix/design-system 1.0.0 (tokens) and src/css/*.css.
 * Edit the sources and rebuild; changes made here are lost on the next build.
 */

/* Design-system tokens */
:root {
  /* Color: brand constants */
  --tx-white: #FFFFFF;
  --tx-ink: #0C0B12;
  --tx-lavender: #DADFF2;

  /* Color: brand red (500 is the brand color) */
  --tx-red-50: #FFF0F0;
  --tx-red-100: #FFD6D6;
  --tx-red-200: #FBB8C6;
  --tx-red-300: #F68FA4;
  --tx-red-400: #F24E6A;
  --tx-red-500: #ED1642;
  --tx-red-600: #C4102F;
  --tx-red-700: #960B22;
  --tx-red-800: #6E0819;
  --tx-red-900: #45050F;
  --tx-red-950: #2A030A;

  /* Color: neutrals (trasix.com scale) */
  --tx-neutral-50: #F8FAFF;
  --tx-neutral-100: #F2F5FF;
  --tx-neutral-200: #DDE0EC;
  --tx-neutral-300: #C8CEDF;
  --tx-neutral-400: #A8AECA;
  --tx-neutral-500: #8890A8;
  --tx-neutral-600: #6B7090;
  --tx-neutral-700: #565B7A;
  --tx-neutral-800: #3D4260;
  --tx-neutral-900: #2D3142;
  --tx-neutral-950: #1E2133;

  /* Color: neutrals re-stepped to Tailwind contrast (for adapters and legacy class names) */
  --tx-gray-50: #F8FAFF;
  --tx-gray-100: #F2F5FF;
  --tx-gray-200: #DDE0EC;
  --tx-gray-300: #C8CEDF;
  --tx-gray-400: #8890A8;
  --tx-gray-500: #6B7090;
  --tx-gray-600: #565B7A;
  --tx-gray-700: #3D4260;
  --tx-gray-800: #2D3142;
  --tx-gray-900: #1E2133;
  --tx-gray-950: #0C0B12;

  /* Color: success (green, never red) */
  --tx-success-50: #F0FDF4;
  --tx-success-100: #DCFCE7;
  --tx-success-200: #BBF7D0;
  --tx-success-300: #86EFAC;
  --tx-success-400: #4ADE80;
  --tx-success-500: #22C55E;
  --tx-success-600: #16A34A;
  --tx-success-700: #15803D;
  --tx-success-800: #166534;
  --tx-success-900: #14532D;

  /* Color: warning (amber, never red) */
  --tx-warning-50: #FFFBEB;
  --tx-warning-100: #FEF3C7;
  --tx-warning-200: #FDE68A;
  --tx-warning-300: #FCD34D;
  --tx-warning-400: #FBBF24;
  --tx-warning-500: #F59E0B;
  --tx-warning-600: #D97706;
  --tx-warning-700: #B45309;
  --tx-warning-800: #92400E;
  --tx-warning-900: #78350F;

  /* Color: danger (errors, destructive actions) */
  --tx-danger-50: #FEF2F2;
  --tx-danger-100: #FEE2E2;
  --tx-danger-200: #FECACA;
  --tx-danger-300: #FCA5A5;
  --tx-danger-400: #F87171;
  --tx-danger-500: #EF4444;
  --tx-danger-600: #DC2626;
  --tx-danger-700: #B91C1C;
  --tx-danger-800: #991B1B;
  --tx-danger-900: #7F1D1D;

  /* Color: info */
  --tx-info-50: #EFF5FC;
  --tx-info-100: #DCE8F7;
  --tx-info-600: #1B5FAD;
  --tx-info-700: #164C8A;

  /* Color: Tracy AI only */
  --tx-tracy-100: #EDEAF8;
  --tx-tracy-200: #D0C8F0;
  --tx-tracy-300: #A89AE0;
  --tx-tracy-500: #6C5DD3;
  --tx-tracy-700: #4D41A8;
  --tx-tracy-900: #2E2567;

  /* Semantic: foreground */
  --tx-fg-heading: var(--tx-neutral-950);
  --tx-fg-primary: var(--tx-neutral-900);
  --tx-fg-secondary: var(--tx-neutral-700);
  --tx-fg-tertiary: var(--tx-neutral-600);
  --tx-fg-hint: var(--tx-neutral-500);
  --tx-fg-disabled: var(--tx-neutral-400);
  --tx-fg-inverse: var(--tx-white);
  --tx-fg-accent: var(--tx-red-600);
  --tx-fg-link: var(--tx-red-600);
  --tx-fg-link-hover: var(--tx-red-700);

  /* Semantic: backgrounds */
  --tx-bg-canvas: var(--tx-neutral-100);
  --tx-bg-surface: var(--tx-neutral-50);
  --tx-bg-elevated: var(--tx-white);
  --tx-bg-inverse: var(--tx-neutral-950);
  --tx-bg-hover: rgba(136, 144, 168, 0.12);
  --tx-bg-active: rgba(30, 33, 51, 0.12);
  --tx-bg-overlay: rgba(30, 33, 51, 0.55);

  /* Semantic: borders */
  --tx-border-default: var(--tx-neutral-200);
  --tx-border-form: var(--tx-neutral-300);
  --tx-border-strong: var(--tx-neutral-400);
  --tx-border-accent: var(--tx-red-500);

  /* Semantic: accent, actions, focus */
  --tx-accent: var(--tx-red-500);
  --tx-action-primary: var(--tx-red-600);
  --tx-action-primary-hover: var(--tx-red-700);
  --tx-action-primary-active: var(--tx-red-800);
  --tx-action-primary-fg: var(--tx-white);
  --tx-action-outline: var(--tx-red-500);
  --tx-action-secondary: var(--tx-neutral-950);
  --tx-action-secondary-hover: var(--tx-neutral-800);
  --tx-action-destructive: var(--tx-danger-600);
  --tx-action-destructive-hover: var(--tx-danger-700);
  --tx-focus-border: var(--tx-neutral-500);
  --tx-focus-ring: var(--tx-red-100);

  /* Semantic: status */
  --tx-status-success: var(--tx-success-700);
  --tx-status-success-bg: var(--tx-success-50);
  --tx-status-success-border: var(--tx-success-200);
  --tx-status-warning: var(--tx-warning-700);
  --tx-status-warning-bg: var(--tx-warning-50);
  --tx-status-warning-border: var(--tx-warning-200);
  --tx-status-danger: var(--tx-danger-700);
  --tx-status-danger-bg: var(--tx-danger-50);
  --tx-status-danger-border: var(--tx-danger-200);
  --tx-status-info: var(--tx-info-600);
  --tx-status-info-bg: var(--tx-info-50);
  --tx-status-info-border: var(--tx-info-100);

  /* Glass (static hero surfaces only) */
  --tx-glass-bg: rgba(255, 255, 255, 0.55);
  --tx-glass-bg-strong: rgba(255, 255, 255, 0.80);
  --tx-glass-bg-subtle: rgba(255, 255, 255, 0.30);
  --tx-glass-border: rgba(255, 255, 255, 0.60);
  --tx-glass-border-soft: rgba(200, 206, 223, 0.40);
  --tx-glass-blur-sm: 6px;
  --tx-glass-blur: 12px;
  --tx-glass-blur-lg: 20px;

  /* Gradients */
  --tx-gradient-brand: linear-gradient(210deg, #DADFF2 0%, #F2F5FF 20%, #F2F5FF 50%, #FFFFFF 82%, #F2F5FF 100%);
  --tx-gradient-tracy: linear-gradient(100deg, #6E2BE8 0%, #A640AB 50%, #ED1642 100%);
  --tx-gradient-tracy-orb: radial-gradient(circle at 32% 26%, #A472E8 0%, #8A33D6 34%, #C21A86 70%, #B3125A 100%);

  /* Typography: families */
  --tx-font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tx-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tx-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Typography: weights */
  --tx-font-weight-light: 300;
  --tx-font-weight-regular: 400;
  --tx-font-weight-medium: 500;
  --tx-font-weight-semibold: 600;
  --tx-font-weight-bold: 700;

  /* Typography: sizes (trasix.com scale; dense apps may override) */
  --tx-text-xs: 11px;
  --tx-text-sm: 12px;
  --tx-text-base: 14px;
  --tx-text-md: 16px;
  --tx-text-lg: 18px;
  --tx-text-xl: 22px;
  --tx-text-2xl: 28px;
  --tx-text-3xl: 36px;
  --tx-text-4xl: 48px;
  --tx-text-5xl: 64px;

  /* Typography: line heights */
  --tx-leading-none: 1;
  --tx-leading-tight: 1.15;
  --tx-leading-snug: 1.3;
  --tx-leading-normal: 1.5;
  --tx-leading-relaxed: 1.65;

  /* Typography: letter spacing */
  --tx-tracking-display: -0.025em;
  --tx-tracking-tight: -0.02em;
  --tx-tracking-normal: 0em;
  --tx-tracking-wide: 0.04em;
  --tx-tracking-label: 0.14em;

  /* Radius */
  --tx-radius-sm: 3px;
  --tx-radius-md: 6px;
  --tx-radius-lg: 10px;
  --tx-radius-xl: 16px;
  --tx-radius-full: 9999px;

  /* Shadow */
  --tx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --tx-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.04);
  --tx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  --tx-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.07);
  --tx-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08);
  --tx-shadow-card: 0 4px 24px rgba(108, 93, 211, 0.08), 0 1px 4px rgba(45, 49, 66, 0.06);
  --tx-shadow-raised: 0 8px 40px rgba(108, 93, 211, 0.12), 0 2px 8px rgba(45, 49, 66, 0.08);

  /* Space */
  --tx-space-1: 4px;
  --tx-space-2: 8px;
  --tx-space-3: 12px;
  --tx-space-4: 16px;
  --tx-space-5: 20px;
  --tx-space-6: 24px;
  --tx-space-8: 32px;
  --tx-space-10: 40px;
  --tx-space-12: 48px;
  --tx-space-16: 64px;
  --tx-space-20: 80px;
  --tx-space-24: 96px;

  /* Motion */
  --tx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tx-duration-fast: 150ms;
  --tx-duration-base: 200ms;
  --tx-duration-slow: 420ms;

  /* Chart: categorical palette (fixed order, never cycled) */
  --tx-chart-1: #2A78D6;
  --tx-chart-2: #008300;
  --tx-chart-3: #E87BA4;
  --tx-chart-4: #EDA100;
  --tx-chart-5: #1BAF7A;
  --tx-chart-6: #EB6834;
  --tx-chart-7: #4A3AA7;
  --tx-chart-8: #ED1642;
  --tx-chart-other: #8890A8;
}

/* Fonts: Poppins and JetBrains Mono, self-hosted (SIL Open Font License) */
/* poppins-latin-ext-300-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../fonts/poppins-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-300-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../fonts/poppins-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-latin-ext-400-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/poppins-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-400-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-latin-ext-500-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/poppins-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-500-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-latin-ext-600-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-600-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-latin-ext-700-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-700-normal (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-latin-ext-400-italic (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/poppins-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-400-italic (@fontsource/poppins 5.3.0) */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/poppins-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* jetbrains-mono-latin-ext-400-normal (@fontsource/jetbrains-mono 5.2.8) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* jetbrains-mono-latin-400-normal (@fontsource/jetbrains-mono 5.2.8) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* jetbrains-mono-latin-ext-500-normal (@fontsource/jetbrains-mono 5.2.8) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* jetbrains-mono-latin-500-normal (@fontsource/jetbrains-mono 5.2.8) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   Site chrome: Cassiopeia's markup in the Trasix Design System.
   Every color, size and shadow comes from a --tx-* token above.
   Rules that restyle a module's own CSS (it loads after this file) start
   with .site so they win without !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cassiopeia and Bootstrap variables -> tokens
   -------------------------------------------------------------------------- */
:root {
	/* Width of the content grid: 4 x 19.875rem columns + 3 gaps of 2rem.
	   Header and footer use it to line up with the page. */
	--tx-site-max: 85.5rem;
	--tx-site-pad: max(1rem, calc((100% - var(--tx-site-max)) / 2));
	--tx-header-h: 64px;

	--cassiopeia-color-primary: var(--tx-red-600);
	--cassiopeia-color-link: var(--tx-fg-link);
	--cassiopeia-color-hover: var(--tx-fg-link-hover);
	--cassiopeia-font-family-body: var(--tx-font-sans);
	--cassiopeia-font-family-headings: var(--tx-font-display);
	--cassiopeia-font-weight-normal: 400;
	--cassiopeia-font-weight-headings: 500;
	--cassiopeia-scroll-margin-top: calc(var(--tx-header-h) + 1rem);

	--body-font-family: var(--tx-font-sans);
	--body-font-size: 0.9375rem;
	--body-line-height: var(--tx-leading-normal);
	--body-color: var(--tx-fg-primary);
	--body-color-rgb: 45, 49, 66;
	/* Bootstrap paints cards, lists, tables, menus and dialogs with --body-bg, so it
	   stays white; the canvas color goes on body.site below. */
	--body-bg: var(--tx-bg-elevated);
	--body-bg-rgb: 255, 255, 255;
	--heading-color: var(--tx-fg-heading);
	--emphasis-color: var(--tx-fg-heading);
	--secondary-color: var(--tx-fg-tertiary);
	--link-color: #C4102F;
	--link-color-rgb: 196, 16, 47;
	--link-hover-color: #960B22;
	--link-hover-color-rgb: 150, 11, 34;
	--border-color: var(--tx-border-default);
	--border-radius: var(--tx-radius-md);
	--border-radius-lg: var(--tx-radius-lg);
	--font-monospace: var(--tx-font-mono);
	--code-color: var(--tx-fg-heading);
	--highlight-bg: var(--tx-warning-100);
	--focus-ring-color: var(--tx-focus-ring);

	/* Cassiopeia's own inline :root block */
	--template-bg-light: var(--tx-bg-surface);
	--template-text-dark: var(--tx-fg-secondary);
	--template-special-color: var(--tx-fg-heading);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body.site {
	background-color: var(--tx-bg-canvas);
	color: var(--tx-fg-primary);
	font-family: var(--tx-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.site h1, .site h2, .site h3, .site h4, .site h5, .site h6 {
	font-family: var(--tx-font-display);
	color: var(--tx-fg-heading);
}

.site a {
	color: var(--tx-fg-link);
	text-underline-offset: 3px;
}
.site a:hover {
	color: var(--tx-fg-link-hover);
}

.site a:focus-visible,
.site button:focus-visible,
.site summary:focus-visible,
.site [tabindex]:focus-visible {
	outline: 2px solid var(--tx-accent);
	outline-offset: 2px;
	box-shadow: none;
}

::selection {
	background: var(--tx-red-100);
	color: var(--tx-fg-heading);
}

/* Room between the rows of the page grid, and the gutter beside the sidebar. */
.site-grid {
	column-gap: 2rem;
	padding-bottom: var(--tx-space-16);
}
@supports (display: grid) {
	body.wrapper-static .site-grid {
		grid-column-gap: 2rem;
	}
}
.container-header + .site-grid > .grid-child:first-child {
	margin-top: var(--tx-space-8);
}

/* --------------------------------------------------------------------------
   3. Header: white bar, logo left, menu right, one red mark on the current item
   -------------------------------------------------------------------------- */
.container-header {
	display: flex !important; /* Cassiopeia stacks brand and menu; one row instead */
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--tx-space-6);
	min-height: var(--tx-header-h);
	padding: 0 var(--tx-site-pad) !important;
	background: var(--tx-bg-elevated);
	background-image: none;
	border-bottom: 1px solid var(--tx-border-default);
	box-shadow: none;
	color: var(--tx-fg-primary);
	z-index: 1030;
}
.container-header .grid-child {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	flex: 0 1 auto;
}
.container-header .navbar-brand {
	margin: 0;
	padding: 14px 0;
	font-size: 1rem;
	color: var(--tx-fg-heading);
}
.container-header .navbar-brand a {
	color: var(--tx-fg-heading);
}
.container-header .brand-logo {
	display: block;
}
.container-header .brand-logo img {
	display: block;
	height: 34px;
	width: auto;
}
.container-header .site-description {
	color: var(--tx-fg-tertiary);
	font-size: var(--tx-text-sm);
}
.container-header .container-nav {
	margin-inline-start: auto;
	padding: 0;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
}
.site .container-header .container-nav .container-search,
.site .container-header .container-nav nav {
	margin: 0; /* Cassiopeia adds 1em on small screens */
}
/* The main menu sits in a "System-table" module chrome. */
.container-header table.moduletable,
.container-header table.moduletable td {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.container-header .mod-menu {
	color: var(--tx-fg-secondary);
	gap: 2px;
}
.site .container-header .metismenu.mod-menu .metismenu-item {
	padding: 0;
	font-size: var(--tx-text-base);
	line-height: 1.4;
}
.site .container-header .metismenu.mod-menu .metismenu-item > a,
.site .container-header .metismenu.mod-menu .metismenu-item > button {
	position: relative;
	display: block;
	padding: 22px 14px;
	color: var(--tx-fg-secondary);
	font-weight: var(--tx-font-weight-medium);
	text-decoration: none;
	transition: color var(--tx-duration-fast) var(--tx-ease-out);
}
.site .container-header .metismenu.mod-menu .metismenu-item > a:hover {
	color: var(--tx-fg-heading);
}
.site .container-header .metismenu.mod-menu > li.active > a,
.site .container-header .metismenu.mod-menu > li.current > a {
	color: var(--tx-fg-heading);
}
.site .container-header .metismenu > li > a::after,
.site .container-header .metismenu > li > button::before {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 2px;
	margin: 0;
	opacity: 1;
	background: transparent;
	transition: background-color var(--tx-duration-fast) var(--tx-ease-out);
}
.site .container-header .metismenu > li > a:hover::after {
	left: 14px;
	right: 14px;
	opacity: 1;
	background: var(--tx-border-form);
}
.site .container-header .metismenu > li.active > a::after,
.site .container-header .metismenu > li.current > a::after {
	background: var(--tx-accent);
}

/* Dropdowns */
.site .container-header .metismenu.mod-menu .mm-collapse {
	background: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-lg);
	box-shadow: var(--tx-shadow-md);
	padding: var(--tx-space-1);
}
.site .container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a {
	padding: 8px 12px;
	border-radius: var(--tx-radius-md);
}
.site .container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a:hover {
	background: var(--tx-bg-hover);
}
.site .container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a::after {
	display: none;
}

.container-header .navbar-toggler {
	color: var(--tx-fg-primary);
	border: 1px solid var(--tx-border-form);
	border-radius: var(--tx-radius-md);
}

/* Small screens: Cassiopeia stacks the menu items; keep them on one row beside the logo. */
@media (max-width: 991.98px) {
	.site .container-header .metismenu.mod-menu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.site .container-header .metismenu.mod-menu .metismenu-item > a {
		padding: 21px 10px;
	}
	.site .container-header .metismenu > li > a::after {
		left: 10px;
		right: 10px;
	}
}
/* Phones: the logo and the account button on the first row, the menu on a row of its own. */
@media (max-width: 575.98px) {
	.container-header {
		gap: 0 var(--tx-space-2);
	}
	.container-header .brand-logo img {
		height: 28px;
	}
	.container-header .navbar-brand {
		padding: 12px 0;
	}
	.container-header .container-nav {
		order: 2;
		flex-basis: 100%;
		margin-inline-start: 0;
		justify-content: flex-start;
	}
	.site .container-header .metismenu.mod-menu {
		flex-wrap: nowrap;
		margin-inline-start: -10px; /* first label lines up with the logo */
		overflow-x: auto;
		scrollbar-width: none;
	}
	.site .container-header .metismenu.mod-menu .metismenu-item > a {
		padding: 6px 10px 14px;
		white-space: nowrap;
	}
	.container-header > .tx-account {
		order: 1;
		margin-inline-start: auto;
	}
	.tx-account__chevron {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   4. Banner: the brand hero (gradient, light headline, red period).
      Restyles the existing "CustomHeader" module (a table with a photo).
      Full height on landing pages; a slim band above an article.
   -------------------------------------------------------------------------- */
.container-banner {
	position: relative;
	background:
		radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--tx-red-500) 9%, transparent), transparent 42%),
		var(--tx-gradient-brand);
	border-bottom: 1px solid var(--tx-border-default);
}
.container-banner .mod-custom > table {
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	background: none !important; /* the module's inline photo */
	border: 0;
}
.container-banner .mod-custom > table td {
	padding: var(--tx-space-16) var(--tx-space-4) var(--tx-space-12);
	border: 0;
}
.container-banner .mod-custom h1 {
	margin: 0;
	font-family: var(--tx-font-display) !important;
	font-size: clamp(2rem, 1.25rem + 2.6vw, 3.25rem) !important;
	font-weight: var(--tx-font-weight-light) !important;
	line-height: var(--tx-leading-tight);
	letter-spacing: var(--tx-tracking-display);
	color: var(--tx-fg-heading);
}
.container-banner .mod-custom h1::after {
	content: ".";
	color: var(--tx-accent);
}
.container-banner .mod-custom h2:empty,
.container-banner .mod-custom > table + p {
	display: none;
}
.container-banner .mod-custom h2 {
	margin: var(--tx-space-6) auto 0;
	max-width: 36rem;
}

/* An article page: keep the band, drop the height. */
body:has(.com-content-article__body > *) .container-banner .mod-custom > table td {
	padding: var(--tx-space-6) var(--tx-space-4);
}
body:has(.com-content-article__body > *) .container-banner .mod-custom h1 {
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem) !important;
}

/* --------------------------------------------------------------------------
   5. Cards: Cassiopeia wraps modules in .card
   -------------------------------------------------------------------------- */
.site .card {
	--card-bg: var(--tx-bg-elevated);
	--card-border-color: var(--tx-border-default);
	--card-border-radius: var(--tx-radius-lg);
	--card-inner-border-radius: calc(var(--tx-radius-lg) - 1px);
	--card-cap-bg: var(--tx-bg-surface);
	--card-color: var(--tx-fg-primary);
	--card-title-color: var(--tx-fg-heading);
	box-shadow: var(--tx-shadow-card);
}
.site-grid .grid-child > .card {
	margin-bottom: var(--tx-space-6);
}
.site .card-header {
	border-bottom-color: var(--tx-border-default);
}
.site .card > .card-header h3,
.site .card-title {
	font-size: var(--tx-text-md);
	font-weight: var(--tx-font-weight-semibold);
}

/* --------------------------------------------------------------------------
   6. Sidebar: the category accordion (mod_categoryaccordion).
      Its inline <style> sets Arial and grey buttons; these rules are more
      specific. Sticky beside the article on wide screens.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.container-sidebar-left {
		position: sticky;
		top: calc(var(--tx-header-h) + var(--tx-space-6));
		align-self: start;
	}
	.site .container-sidebar-left .accordion {
		max-height: calc(100vh - var(--tx-header-h) - 7rem);
	}
}
.container-sidebar-left > .card > .card-body {
	padding: var(--tx-space-3);
}
.site .container-sidebar-left .accordion {
	--accordion-bg: transparent;
	--accordion-color: var(--tx-fg-primary);
	--accordion-border-color: transparent;
	--accordion-border-width: 0;
	--accordion-border-radius: var(--tx-radius-md);
	--accordion-inner-border-radius: var(--tx-radius-md);
	--accordion-btn-padding-x: 0.75rem;
	--accordion-btn-padding-y: 0.5rem;
	--accordion-btn-color: var(--tx-fg-primary);
	--accordion-btn-bg: transparent;
	--accordion-btn-icon-width: 0.75rem;
	--accordion-btn-focus-box-shadow: none;
	--accordion-active-color: var(--tx-fg-heading);
	--accordion-active-bg: transparent;
	--accordion-body-padding-x: 0;
	--accordion-body-padding-y: 0.25rem;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--tx-border-form) transparent;
}
.site .container-sidebar-left .accordion .accordion-item {
	border: 0;
	background: transparent;
}
.site .container-sidebar-left .accordion .accordion-button {
	background-color: transparent;
	color: var(--tx-fg-primary);
	font-family: var(--tx-font-sans);
	font-size: var(--tx-text-base);
	font-weight: var(--tx-font-weight-medium);
	line-height: 1.35;
	border-radius: var(--tx-radius-md);
	box-shadow: none;
	transition: background-color var(--tx-duration-fast) var(--tx-ease-out);
}
.site .container-sidebar-left .accordion .accordion-button:hover {
	background-color: var(--tx-bg-hover);
}
.site .container-sidebar-left .accordion .accordion-button:not(.collapsed),
.site .container-sidebar-left .accordion .accordion-button.active {
	color: var(--tx-fg-heading);
	font-weight: var(--tx-font-weight-semibold);
	background-color: transparent;
	box-shadow: none;
}
.site .container-sidebar-left .accordion .accordion-body {
	background-color: transparent;
	color: var(--tx-fg-secondary);
	font-family: var(--tx-font-sans);
	margin: 0 0 var(--tx-space-1) 1.125rem;
	padding-left: var(--tx-space-2);
	border-left: 1px solid var(--tx-border-default);
}
.site .container-sidebar-left .accordion ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site .container-sidebar-left .accordion li {
	margin: 0;
}
.site .container-sidebar-left .accordion .article-link {
	display: block;
	margin: 1px 0;
	padding: 5px 10px;
	border-radius: var(--tx-radius-md);
	color: var(--tx-fg-secondary);
	font-size: 0.8125rem;
	line-height: 1.45;
	text-decoration: none;
	transition: background-color var(--tx-duration-fast) var(--tx-ease-out), color var(--tx-duration-fast) var(--tx-ease-out);
}
.site .container-sidebar-left .accordion .article-link:hover {
	color: var(--tx-fg-heading);
	background-color: var(--tx-bg-hover);
	text-decoration: none;
}
.site .container-sidebar-left .accordion .article-link.active-article {
	color: var(--tx-fg-heading) !important; /* the module's own rule is !important */
	font-weight: var(--tx-font-weight-semibold);
	background-color: var(--tx-bg-surface);
	box-shadow: inset 2px 0 0 var(--tx-accent);
	border-radius: 0 var(--tx-radius-md) var(--tx-radius-md) 0;
}

/* --------------------------------------------------------------------------
   7. Breadcrumbs
   -------------------------------------------------------------------------- */
.site .mod-breadcrumbs__wrapper {
	margin-bottom: var(--tx-space-4);
}
.site .mod-breadcrumbs.breadcrumb {
	--breadcrumb-divider-color: var(--tx-fg-hint);
	--breadcrumb-item-active-color: var(--tx-fg-secondary);
	--breadcrumb-item-padding-x: 0.5rem;
	padding: 0 !important; /* Bootstrap's px-3 py-2 utilities */
	margin: 0;
	background: none;
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-tertiary);
}
.site .mod-breadcrumbs a {
	color: var(--tx-fg-tertiary);
	text-decoration: none;
}
.site .mod-breadcrumbs a:hover {
	color: var(--tx-fg-link);
	text-decoration: underline;
}
.site .mod-breadcrumbs__here {
	color: var(--tx-fg-hint);
}
.site .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
	content: "/";
}

/* --------------------------------------------------------------------------
   8. Above the content: Top articles (mod_toparticlesbycategory) and the
      "Help Topics" tiles (custom module), both on landing pages.
   -------------------------------------------------------------------------- */
.site .main-top.card {
	background: transparent;
	border: 0;
	box-shadow: none;
}
.site .main-top.card > .card-body {
	padding: 0;
}
.site #top-articles-module {
	max-width: none;
	margin: 0 !important; /* Bootstrap's my-4 utility */
	padding: 0;
}
.site #top-articles-module h3:empty {
	display: none;
}
.site #top-articles-module .card {
	--dark-rgb: 221, 224, 236; /* border-dark -> the default border */
	overflow: hidden;
	background: var(--tx-bg-elevated);
	border-radius: var(--tx-radius-lg);
	box-shadow: var(--tx-shadow-card);
	transition: box-shadow var(--tx-duration-base) var(--tx-ease-out), transform var(--tx-duration-base) var(--tx-ease-out);
}
.site #top-articles-module .card:hover {
	box-shadow: var(--tx-shadow-raised);
	transform: translateY(-1px);
}
.site #top-articles-module .card > * {
	--dark-rgb: 30, 33, 51; /* text-dark stays the heading color */
}
.site #top-articles-module .card-header {
	--light-rgb: 248, 250, 255; /* bg-light -> the surface color */
	padding: var(--tx-space-4) var(--tx-space-5);
	border-bottom: 1px solid var(--tx-border-default);
}
.site #top-articles-module .card-header h5 {
	font-family: var(--tx-font-sans);
	font-size: var(--tx-text-md);
	font-weight: var(--tx-font-weight-semibold);
	color: var(--tx-fg-heading);
}
.site #top-articles-module .card-body {
	padding: var(--tx-space-1) var(--tx-space-5) var(--tx-space-3);
}
.site .list-group {
	--list-group-bg: transparent;
	--list-group-color: var(--tx-fg-primary);
	--list-group-border-color: var(--tx-border-default);
	--list-group-border-radius: var(--tx-radius-lg);
	--list-group-item-padding-y: 0.625rem;
}
.site .list-group-flush > .list-group-item {
	padding-left: 0;
	padding-right: 0;
}
.site .list-group-item a {
	color: var(--tx-fg-primary);
	text-decoration: none;
}
.site .list-group-item a:hover {
	color: var(--tx-fg-link);
	text-decoration: underline;
}
/* The list a category click loads into the same module */
.site #top-articles-module ul.list-group:not(.list-group-flush) {
	--list-group-item-padding-x: var(--tx-space-5);
	background: var(--tx-bg-elevated);
	box-shadow: var(--tx-shadow-card);
}
.site #top-articles-module > .container {
	max-width: none;
	margin: 0 !important;
	padding: 0;
}

/* Help Topics: the module is a table of icon links; lay the cells out as tiles. */
.site .main-top .mod-custom > h2 {
	font-weight: var(--tx-font-weight-light);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	letter-spacing: var(--tx-tracking-display);
	margin: var(--tx-space-4) 0 var(--tx-space-2);
}
.site .main-top .mod-custom > h2::after {
	content: ".";
	color: var(--tx-accent);
}
.site .main-top .mod-custom .intro {
	color: var(--tx-fg-tertiary);
}
.site .main-top .mod-custom > table {
	display: block;
	width: 100% !important;
	max-width: 56rem !important;
	height: auto !important;
	margin: var(--tx-space-4) auto 0 !important;
	border: 0;
}
.site .main-top .mod-custom > table > tbody {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: var(--tx-space-4);
}
.site .main-top .mod-custom > table tr {
	display: contents;
}
.site .main-top .mod-custom > table td {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--tx-space-2);
	height: auto !important;
	padding: var(--tx-space-6) var(--tx-space-4) !important;
	background: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-default) !important;
	border-radius: var(--tx-radius-lg);
	box-shadow: var(--tx-shadow-card);
	transition: border-color var(--tx-duration-base) var(--tx-ease-out), box-shadow var(--tx-duration-base) var(--tx-ease-out), transform var(--tx-duration-base) var(--tx-ease-out);
}
.site .main-top .mod-custom > table td:not(:has(a)) {
	display: none;
}
.site .main-top .mod-custom > table td:hover {
	border-color: var(--tx-red-300) !important;
	box-shadow: var(--tx-shadow-raised);
	transform: translateY(-1px);
}
.site .main-top .mod-custom > table td p {
	margin: 0;
}
.site .main-top .mod-custom > table td a {
	color: var(--tx-fg-heading);
	font-weight: var(--tx-font-weight-medium);
	text-decoration: none;
}
.site .main-top .mod-custom > table td:hover a {
	color: var(--tx-fg-link);
}

/* --------------------------------------------------------------------------
   9. The content: one white card on the canvas
   -------------------------------------------------------------------------- */
.site main > .com-content-article:has(.page-header, .com-content-article__body > *),
.site main > .com-content-category,
.site main > .com-content-category-blog,
.site main > .com-content-featured,
.site main > .com-finder,
.site main > .com-tags,
.site main > .error {
	background: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-xl);
	box-shadow: var(--tx-shadow-card);
	padding: clamp(1.25rem, 0.5rem + 3vw, 3rem);
}
.site .item-page .page-header {
	margin: 0 0 var(--tx-space-6);
	padding: 0;
	border: 0;
}
.site .item-page .page-header h1,
.site .item-page .page-header h2,
.site .com-content-category .page-header h1,
.site .com-content-category-blog .page-header h1 {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
	font-weight: var(--tx-font-weight-light);
	line-height: var(--tx-leading-tight);
	letter-spacing: var(--tx-tracking-display);
	color: var(--tx-fg-heading);
}
.site .article-info,
.site .article-info.text-muted {
	margin: 0 0 var(--tx-space-6);
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-tertiary) !important;
}
.site .item-page .tags,
.site .item-page .pagenavigation {
	margin-top: var(--tx-space-10);
	padding-top: var(--tx-space-6);
	border-top: 1px solid var(--tx-border-default);
}

/* Category pages (Release Notes, Tutorials): Joomla's category list, as a quiet list of
   titles with their dates instead of a striped, boxed table. */
.site .content-category > h1,
.site .content-category > h2 {
	margin: 0 0 var(--tx-space-6);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
	font-weight: var(--tx-font-weight-light);
	line-height: var(--tx-leading-tight);
	letter-spacing: var(--tx-tracking-display);
	color: var(--tx-fg-heading);
}
.site .content-category > h1 + h2 {
	display: none; /* page heading and category title say the same thing */
}
.site .content-category .category-desc {
	margin-bottom: var(--tx-space-6);
	color: var(--tx-fg-secondary);
}
.site .com-content-category__articles::after {
	content: "";
	display: table;
	clear: both;
}
.site .com-content-category__pagination.btn-group .form-select {
	width: auto;
	min-height: 34px;
	padding-block: 4px;
	font-size: var(--tx-text-sm);
}
.site .com-content__filter {
	gap: var(--tx-space-2);
	margin-bottom: var(--tx-space-4);
}
.site .com-content-category__table {
	--table-bg: transparent;
	--table-accent-bg: transparent;
	--table-striped-bg: transparent;
	--table-hover-bg: var(--tx-bg-hover);
	--table-border-color: var(--tx-border-default);
	--table-color: var(--tx-fg-primary);
	clear: both;
	margin: var(--tx-space-4) 0 0;
	border: 0;
}
.site .com-content-category__table > :not(caption) > * {
	border-width: 0; /* Bootstrap rules between the head and the body */
}
.site .com-content-category__table > :not(caption) > * > * {
	padding: 0.75rem 0.5rem;
	border-style: solid;
	border-width: 0 0 1px;
	border-color: var(--tx-border-default); /* cells otherwise take their text colour */
	vertical-align: middle;
}
.site .com-content-category__table > thead > tr > th {
	padding-block: 0.5rem;
	border-bottom-color: var(--tx-border-form);
	font-size: 10.5px;
	font-weight: var(--tx-font-weight-semibold);
	letter-spacing: var(--tx-tracking-label);
	text-transform: uppercase;
	color: var(--tx-fg-tertiary);
}
.site .com-content-category__table > thead a {
	color: inherit;
	text-decoration: none;
}
.site .com-content-category__table .list-title {
	font-weight: var(--tx-font-weight-regular);
}
.site .com-content-category__table .list-title a,
.site .category .list-title a {
	color: var(--tx-fg-heading);
	font-weight: var(--tx-font-weight-medium);
	text-decoration: none;
}
.site .com-content-category__table .list-title a:hover,
.site .category .list-title a:hover {
	color: var(--tx-fg-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.site .com-content-category__table :is(.list-date, #categorylist_header_date) {
	width: 9.5rem;
	text-align: right;
	white-space: nowrap;
}
.site .com-content-category__table .list-date {
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-tertiary);
	font-variant-numeric: tabular-nums;
}
.site .com-content-category__navigation {
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: center;
	justify-content: space-between;
	gap: var(--tx-space-2);
	margin-top: var(--tx-space-4);
}
.site .com-content-category__counter {
	order: 2;
	margin: 0;
	padding: 0 !important; /* Bootstrap's pt-3 pe-2 utilities */
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-tertiary);
}
.site .com-content-category__navigation .pagination {
	margin: 0;
}

/* Subcategories below the list */
.site .cat-children {
	margin-top: var(--tx-space-10);
}
.site .cat-children > h3 {
	margin: 0 0 var(--tx-space-2);
	font-family: var(--tx-font-sans);
	font-size: 10.5px;
	font-weight: var(--tx-font-weight-semibold);
	letter-spacing: var(--tx-tracking-label);
	text-transform: uppercase;
	color: var(--tx-fg-tertiary);
}
.site .com-content-category__children > .item-title {
	display: flex;
	align-items: center;
	gap: var(--tx-space-2);
	margin: 0;
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--tx-border-default);
	font-family: var(--tx-font-sans);
	font-size: var(--tx-text-md);
	font-weight: var(--tx-font-weight-medium);
}
.site .com-content-category__children > .item-title a {
	color: var(--tx-fg-heading);
	text-decoration: none;
}
.site .com-content-category__children > .item-title a:hover {
	color: var(--tx-fg-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.site .com-content-category__children .badge {
	--badge-color: var(--tx-fg-secondary);
	padding: 2px 8px;
	border-radius: var(--tx-radius-full);
	background: var(--tx-bg-canvas) !important; /* Bootstrap's bg-info utility */
	font-size: var(--tx-text-xs);
	font-weight: var(--tx-font-weight-semibold);
}
.site .com-content-category__children .category-desc {
	margin: 4px 0 0;
	padding: 0 0.5rem;
	font-size: var(--tx-text-sm);
}

/* --------------------------------------------------------------------------
   10. Buttons (outlined red pill is the primary action), forms, alerts
   -------------------------------------------------------------------------- */
.site .btn {
	--btn-font-family: var(--tx-font-sans);
	--btn-font-weight: var(--tx-font-weight-medium);
	--btn-border-radius: var(--tx-radius-full);
	--btn-padding-x: 1.125rem;
	--btn-padding-y: 0.5rem;
	--btn-font-size: var(--tx-text-base);
	--btn-focus-box-shadow: 0 0 0 3px var(--tx-focus-ring);
	border-width: 1.5px;
	transition: background-color var(--tx-duration-fast) var(--tx-ease-out), border-color var(--tx-duration-fast) var(--tx-ease-out), color var(--tx-duration-fast) var(--tx-ease-out);
}
.site .btn-primary {
	--btn-color: var(--tx-fg-accent);
	--btn-bg: var(--tx-bg-elevated);
	--btn-border-color: var(--tx-action-outline);
	--btn-hover-color: var(--tx-action-primary-hover);
	--btn-hover-bg: var(--tx-red-50);
	--btn-hover-border-color: var(--tx-action-outline);
	--btn-active-color: var(--tx-action-primary-hover);
	--btn-active-bg: var(--tx-red-100);
	--btn-active-border-color: var(--tx-action-primary);
	--btn-disabled-color: var(--tx-fg-disabled);
	--btn-disabled-bg: var(--tx-bg-elevated);
	--btn-disabled-border-color: var(--tx-border-default);
	/* Cassiopeia paints .btn-primary straight from its primary color, not through the variables. */
	background-color: var(--btn-bg);
	border-color: var(--btn-border-color);
}
.site .btn-primary:hover,
.site .btn-primary:focus {
	background-color: var(--btn-hover-bg);
	border-color: var(--btn-hover-border-color);
	color: var(--btn-hover-color);
}
.site .btn-primary:active {
	background-color: var(--btn-active-bg);
	border-color: var(--btn-active-border-color);
	color: var(--btn-active-color);
}
.site .btn-secondary,
.site .btn-outline-secondary,
.site .btn-light {
	--btn-color: var(--tx-fg-primary);
	--btn-bg: var(--tx-bg-elevated);
	--btn-border-color: var(--tx-border-form);
	--btn-hover-color: var(--tx-fg-heading);
	--btn-hover-bg: var(--tx-bg-surface);
	--btn-hover-border-color: var(--tx-border-strong);
	--btn-active-color: var(--tx-fg-heading);
	--btn-active-bg: var(--tx-bg-canvas);
	--btn-active-border-color: var(--tx-border-strong);
}
.site .btn-danger {
	--btn-color: var(--tx-white);
	--btn-bg: var(--tx-action-destructive);
	--btn-border-color: var(--tx-action-destructive);
	--btn-hover-bg: var(--tx-action-destructive-hover);
	--btn-hover-border-color: var(--tx-action-destructive-hover);
}

.site .form-control,
.site .form-select {
	font-family: var(--tx-font-sans);
	font-size: var(--tx-text-base);
	color: var(--tx-fg-primary);
	background-color: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-form);
	border-radius: var(--tx-radius-md);
}
.site .form-control::placeholder {
	color: var(--tx-fg-hint);
}
.site .form-control:focus,
.site .form-select:focus {
	border-color: var(--tx-focus-border);
	box-shadow: 0 0 0 3px var(--tx-focus-ring);
	outline: 0;
}

.site .alert,
.site joomla-alert {
	border-radius: var(--tx-radius-md);
	font-family: var(--tx-font-sans);
}

/* --------------------------------------------------------------------------
   11. Sign-in (mod_trasix_login): a white card, inputs and pill buttons
   -------------------------------------------------------------------------- */
.site .mod-trasix-login,
.site .mod-trasix-loggedin {
	width: calc(100% - 2rem); /* the banner is a flex column, which would shrink it */
	max-width: 420px;
	margin: 0 auto var(--tx-space-8);
	padding: var(--tx-space-8);
	background: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-xl);
	box-shadow: var(--tx-shadow-raised);
	font-family: var(--tx-font-sans);
	color: var(--tx-fg-primary);
}
.site .container-top-a > .card {
	background: transparent;
	border: 0;
	box-shadow: none;
}
.site .container-top-a > .card > .card-body {
	padding: 0;
}
.site .trasix-login-title {
	margin: 0 0 var(--tx-space-6);
	text-align: center;
	font-family: var(--tx-font-display);
	font-size: var(--tx-text-xl);
	font-weight: var(--tx-font-weight-light);
	letter-spacing: var(--tx-tracking-tight);
	color: var(--tx-fg-heading);
}
.site .trasix-label {
	margin-bottom: var(--tx-space-1);
	font-size: var(--tx-text-sm);
	font-weight: var(--tx-font-weight-medium);
	color: var(--tx-fg-secondary);
}
.site .trasix-input {
	padding: 10px 14px;
	border: 1px solid var(--tx-border-form);
	border-radius: var(--tx-radius-md);
	font-family: var(--tx-font-sans);
	font-size: var(--tx-text-base);
	color: var(--tx-fg-primary);
}
.site .trasix-input:focus {
	border-color: var(--tx-focus-border);
	box-shadow: 0 0 0 3px var(--tx-focus-ring);
}
.site .trasix-button-group {
	display: flex;
	justify-content: center;
	gap: var(--tx-space-2);
}
.site .trasix-btn {
	margin: 0;
	padding: 9px 22px;
	border: 1.5px solid transparent;
	border-radius: var(--tx-radius-full);
	font-family: var(--tx-font-sans);
	font-size: var(--tx-text-base);
	font-weight: var(--tx-font-weight-medium);
	transition: background-color var(--tx-duration-fast) var(--tx-ease-out), border-color var(--tx-duration-fast) var(--tx-ease-out), color var(--tx-duration-fast) var(--tx-ease-out);
}
.site .trasix-btn-primary,
.site .trasix-btn-success {
	background-color: var(--tx-bg-elevated);
	border-color: var(--tx-action-outline);
	color: var(--tx-fg-accent);
}
.site .trasix-btn-primary:hover,
.site .trasix-btn-success:hover {
	background-color: var(--tx-red-50);
	color: var(--tx-action-primary-hover);
}
.site .trasix-btn-secondary {
	background-color: var(--tx-bg-elevated);
	border-color: var(--tx-border-form);
	color: var(--tx-fg-primary);
}
.site .trasix-btn-secondary:hover {
	background-color: var(--tx-bg-surface);
	border-color: var(--tx-border-strong);
}
.site .trasix-user-info {
	background: var(--tx-bg-surface);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-md);
	color: var(--tx-fg-secondary);
}
.site .trasix-sso-info,
.site .trasix-loading {
	color: var(--tx-fg-tertiary);
}
.site .trasix-alert {
	border-radius: var(--tx-radius-md);
	font-weight: var(--tx-font-weight-medium);
}
.site .trasix-alert-success {
	background-color: var(--tx-status-success-bg);
	border-color: var(--tx-status-success-border);
	color: var(--tx-status-success);
}
.site .trasix-alert-error {
	background-color: var(--tx-status-danger-bg);
	border-color: var(--tx-status-danger-border);
	color: var(--tx-status-danger);
}
.site .trasix-welcome-message {
	color: var(--tx-fg-primary);
	font-size: var(--tx-text-md);
}

/* Signed in: user.js swaps the card for the header account menu below. */
html.tx-account-pending :is(.mod-trasix-loggedin, .mod-trasix-login.logged-in),
.site .tx-account-moved {
	display: none !important;
}

.tx-account {
	position: relative;
	display: flex;
	align-items: center;
	margin-inline-start: var(--tx-space-3);
}
.tx-account__toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border: 0;
	border-radius: var(--tx-radius-full);
	background: none;
	color: var(--tx-fg-hint);
	cursor: pointer;
}
.tx-account__avatar {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--tx-border-form);
	border-radius: var(--tx-radius-full);
	background: var(--tx-bg-canvas);
	color: var(--tx-fg-secondary);
	font-family: var(--tx-font-sans);
	font-size: 12px;
	font-weight: var(--tx-font-weight-semibold);
	letter-spacing: 0.02em;
	line-height: 1;
	transition: border-color var(--tx-duration-fast) var(--tx-ease-out), color var(--tx-duration-fast) var(--tx-ease-out);
}
.tx-account__toggle:hover,
.tx-account__toggle[aria-expanded="true"] {
	color: var(--tx-fg-secondary);
}
.tx-account__toggle:hover .tx-account__avatar,
.tx-account__toggle[aria-expanded="true"] .tx-account__avatar {
	border-color: var(--tx-border-strong);
	color: var(--tx-fg-heading);
}
.tx-account__chevron {
	transition: transform var(--tx-duration-fast) var(--tx-ease-out);
}
.tx-account__toggle[aria-expanded="true"] .tx-account__chevron {
	transform: rotate(180deg);
}
.tx-account__menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 1040;
	width: 264px;
	padding: var(--tx-space-2);
	background: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-lg);
	box-shadow: var(--tx-shadow-lg);
	text-align: left;
}
.tx-account__menu[hidden] {
	display: none;
}
.tx-account__who {
	margin-bottom: var(--tx-space-1);
	padding: 6px 10px 10px;
	border-bottom: 1px solid var(--tx-border-default);
}
.tx-account__eyebrow {
	margin: 0 0 2px;
	font-size: 10.5px;
	font-weight: var(--tx-font-weight-semibold);
	letter-spacing: var(--tx-tracking-label);
	text-transform: uppercase;
	color: var(--tx-fg-tertiary);
}
.tx-account__name {
	margin: 0;
	overflow: hidden;
	font-size: var(--tx-text-base);
	font-weight: var(--tx-font-weight-medium);
	color: var(--tx-fg-heading);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tx-account__actions form,
.tx-account__actions .trasix-button-group,
.tx-account__actions .trasix-logout-section {
	display: block;
	margin: 0;
	padding: 0;
}
/* The module's own logout button, restyled as a menu row. */
.site .tx-account__actions :is(button, input[type="submit"], a) {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--tx-radius-md);
	background: transparent;
	box-shadow: none;
	color: var(--tx-fg-primary);
	font-family: var(--tx-font-sans);
	font-size: var(--tx-text-base);
	font-weight: var(--tx-font-weight-medium);
	line-height: 1.4;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.site .tx-account__actions :is(button, input[type="submit"], a):hover {
	background: var(--tx-bg-hover);
	color: var(--tx-fg-heading);
}
.site .tx-account__actions :is(button, input[type="submit"], a):focus-visible {
	outline: 2px solid var(--tx-accent);
	outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   12. Footer (user.js adds one when no module sits in the footer position)
   -------------------------------------------------------------------------- */
.container-footer {
	width: 100%;
	background: var(--tx-bg-inverse);
	background-image: none;
	color: var(--tx-neutral-400);
	font-size: var(--tx-text-sm);
}
.container-footer .grid-child,
.container-footer .tx-footer {
	max-width: none;
	margin: 0;
	padding: var(--tx-space-8) var(--tx-site-pad);
}
.container-footer .tx-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tx-space-2) var(--tx-space-6);
}
.container-footer a {
	color: var(--tx-neutral-300);
}
.container-footer a:hover {
	color: var(--tx-white);
}
.tx-footer-brand {
	color: var(--tx-white);
	font-weight: var(--tx-font-weight-medium);
}
.tx-footer-brand::after {
	content: ".";
	color: var(--tx-accent);
}

/* Back to top */
.site .back-to-top-link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--tx-bg-elevated);
	color: var(--tx-fg-secondary);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-full);
	box-shadow: var(--tx-shadow-md);
}
.site .back-to-top-link:hover {
	color: var(--tx-fg-accent);
	border-color: var(--tx-red-300);
}

/* --------------------------------------------------------------------------
   13. Screenshot viewer (user.js): full screen on the ink backdrop, actual
       size on demand. A static overlay, so no glass blur.
   -------------------------------------------------------------------------- */
.com-content-article__body img.tx-zoomable {
	cursor: zoom-in;
	transition: border-color var(--tx-duration-fast) var(--tx-ease-out), box-shadow var(--tx-duration-fast) var(--tx-ease-out);
}
.com-content-article__body img.tx-zoomable:hover {
	border-color: var(--tx-border-strong);
	box-shadow: var(--tx-shadow-md);
}
.com-content-article__body img.tx-zoomable:focus-visible {
	outline: 2px solid var(--tx-accent);
	outline-offset: 3px;
}

html.tx-lightbox-open {
	overflow: hidden;
}
.tx-lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(12, 11, 18, 0.92); /* ink */
	color: var(--tx-white);
	font-family: var(--tx-font-sans);
	overflow: hidden;
}
.tx-lightbox::backdrop {
	background: transparent;
}
.tx-lightbox[open] {
	display: flex;
	flex-direction: column;
}
.tx-lightbox__stage {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 64px 80px 8px;
	overscroll-behavior: contain;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
/* margin:auto centres a small image and lets a large one scroll from its top-left corner. */
.tx-lightbox__img {
	display: block;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: var(--tx-white);
	border-radius: var(--tx-radius-md);
	box-shadow: var(--tx-shadow-xl);
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}
.tx-lightbox.is-actual .tx-lightbox__img {
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}
.tx-lightbox.is-actual .tx-lightbox__stage {
	cursor: grab;
}
.tx-lightbox.is-actual .tx-lightbox__stage:active {
	cursor: grabbing;
}
.tx-lightbox.no-zoom .tx-lightbox__img {
	cursor: default;
}
.tx-lightbox.no-zoom [data-act="zoom"] {
	display: none;
}

.tx-lightbox__bar {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--tx-space-4);
	padding: var(--tx-space-3) 80px var(--tx-space-5);
	font-size: var(--tx-text-sm);
	line-height: var(--tx-leading-normal);
	color: var(--tx-neutral-300);
}
.tx-lightbox__caption {
	max-width: 52rem;
	margin: 0;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tx-lightbox__count {
	flex: none;
	color: var(--tx-neutral-400);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--tx-tracking-wide);
}

.tx-lightbox__tools {
	position: absolute;
	top: var(--tx-space-3);
	right: var(--tx-space-3);
	display: flex;
	gap: var(--tx-space-2);
}
.tx-lightbox__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--tx-radius-full);
	background: rgba(12, 11, 18, 0.6); /* readable over white screenshots too */
	color: var(--tx-white);
	cursor: pointer;
	transition: background-color var(--tx-duration-fast) var(--tx-ease-out), border-color var(--tx-duration-fast) var(--tx-ease-out);
}
.tx-lightbox__btn:hover {
	background: rgba(12, 11, 18, 0.85);
	border-color: rgba(255, 255, 255, 0.45);
}
.tx-lightbox__btn:focus-visible {
	outline: 2px solid var(--tx-red-400);
	outline-offset: 2px;
}
.tx-lightbox__prev,
.tx-lightbox__next {
	position: absolute;
	top: 50%;
	margin-top: -22px;
}
.tx-lightbox__prev {
	left: var(--tx-space-4);
}
.tx-lightbox__next {
	right: var(--tx-space-4);
}
.tx-lightbox.is-single .tx-lightbox__prev,
.tx-lightbox.is-single .tx-lightbox__next {
	display: none;
}

@media (max-width: 767.98px) {
	.tx-lightbox__stage {
		padding: 64px 12px 8px;
	}
	.tx-lightbox__bar {
		padding: var(--tx-space-3) var(--tx-space-4) 72px;
	}
	/* Arrows move under the picture, beside the caption. */
	.tx-lightbox__prev,
	.tx-lightbox__next {
		top: auto;
		bottom: var(--tx-space-3);
		margin-top: 0;
	}
}

/* Icon codes ([icon:name], user.js): the app's icon, drawn like a small button next to the
   name of the button it shows. More specific than the article's screenshot rules. */
.site img.tx-icon,
.site .com-content-article__body p > img.tx-icon:only-child {
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	max-width: none;
	margin: 0 0.15em;
	padding: 0.25em;
	vertical-align: -0.45em;
	background: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-form);
	border-radius: var(--tx-radius-md);
	box-shadow: none;
	cursor: default;
}

/* --------------------------------------------------------------------------
   14. Search (Smart Search): the box under the banner headline, its
       suggestions (Awesomplete), and the results page.
   -------------------------------------------------------------------------- */
/* Banner order: headline, then search, then the rest (sign-in), whatever the module ordering. */
.container-banner {
	display: flex;
	flex-direction: column;
}
.container-banner > * {
	order: 3;
}
.container-banner > .mod-custom {
	order: 1;
}
.container-banner > :has(> .mod-finder),
.container-banner > .mod-finder {
	order: 2;
	width: min(36rem, 100% - 2rem);
	margin: 0 auto;
	padding-bottom: var(--tx-space-12);
}
.container-banner:has(.mod-finder) .mod-custom > table td {
	padding-bottom: var(--tx-space-6);
}
body:has(.com-content-article__body > *) .container-banner > :has(> .mod-finder),
body:has(.com-content-article__body > *) .container-banner > .mod-finder {
	padding-bottom: var(--tx-space-6);
}
body:has(.com-content-article__body > *) .container-banner:has(.mod-finder) .mod-custom > table td {
	padding-bottom: var(--tx-space-4);
}

.site .mod-finder .form-control {
	min-height: 44px;
	padding-inline: 2.875rem 1.125rem;
	border-radius: var(--tx-radius-full);
	background: var(--tx-bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7090' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1.125rem center / 18px;
	box-shadow: var(--tx-shadow-sm);
}
.container-banner .mod-finder .form-control {
	min-height: 52px;
	font-size: var(--tx-text-md);
}
body:has(.com-content-article__body > *) .container-banner .mod-finder .form-control {
	min-height: 44px;
	font-size: var(--tx-text-base);
}

/* Suggestions while typing */
.site .awesomplete {
	display: block;
	width: 100%;
}
.site .awesomplete > ul {
	z-index: 20;
	margin-top: 6px;
	padding: var(--tx-space-1);
	background: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-lg);
	box-shadow: var(--tx-shadow-lg);
	text-align: left;
}
.site .awesomplete > ul::before {
	display: none;
}
.site .awesomplete > ul > li {
	padding: 8px 12px;
	border-radius: var(--tx-radius-md);
	color: var(--tx-fg-primary);
	font-size: var(--tx-text-base);
}
.site .awesomplete > ul > li:hover,
.site .awesomplete > ul > li[aria-selected="true"] {
	background: var(--tx-bg-hover);
	color: var(--tx-fg-heading);
}
.site .awesomplete > ul > li mark,
.site .awesomplete > ul > li[aria-selected="true"] mark {
	padding: 0;
	background: none;
	color: inherit;
	font-weight: var(--tx-font-weight-semibold);
}

/* Article titles while typing (user.js). They replace Joomla's index-word suggestions. */
.site form.mod-finder {
	position: relative;
}
.site .tx-instant-on .awesomplete > ul {
	display: none !important;
}
.tx-instant {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	padding: var(--tx-space-1);
	background: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-lg);
	box-shadow: var(--tx-shadow-lg);
	text-align: left;
}
.tx-instant[hidden] {
	display: none;
}
.tx-instant__label {
	margin: 6px 10px 4px;
	font-size: 10.5px;
	font-weight: var(--tx-font-weight-semibold);
	letter-spacing: var(--tx-tracking-label);
	text-transform: uppercase;
	color: var(--tx-fg-tertiary);
}
.tx-instant__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.site .tx-instant__item {
	display: block;
	overflow: hidden;
	padding: 8px 10px;
	border-radius: var(--tx-radius-md);
	color: var(--tx-fg-primary);
	font-size: var(--tx-text-base);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tx-instant__item strong {
	font-weight: var(--tx-font-weight-semibold);
	color: var(--tx-fg-heading);
}
.site .tx-instant__item:hover,
.site .tx-instant__item:focus-visible {
	background: var(--tx-bg-hover);
	color: var(--tx-fg-heading);
	outline: none;
	box-shadow: inset 2px 0 0 var(--tx-accent);
}
.site .tx-instant__all {
	display: block;
	margin-top: var(--tx-space-1);
	padding: 9px 10px 6px;
	border-top: 1px solid var(--tx-border-default);
	color: var(--tx-fg-link);
	font-size: var(--tx-text-sm);
	font-weight: var(--tx-font-weight-medium);
	text-decoration: none;
}
.site .tx-instant__all:hover,
.site .tx-instant__all:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tx-instant__empty {
	margin: 8px 10px 6px;
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-tertiary);
}

/* Results page */
.site .com-finder__search .form-inline {
	display: block;
}
.site .com-finder__search label[for="q"] {
	display: block;
	margin: 0 0 6px;
	font-size: var(--tx-text-sm);
	font-weight: var(--tx-font-weight-medium);
	color: var(--tx-fg-secondary);
}
.site .com-finder__search .input-group {
	flex-wrap: wrap;
	gap: var(--tx-space-2);
}
/* Bootstrap's input-group squares off the joined corners with very specific selectors. */
.site .com-finder__search .input-group > .form-control {
	flex: 1 1 16rem;
	min-height: 44px;
	margin: 0 !important;
	padding-inline: 1.125rem;
	border-radius: var(--tx-radius-full) !important;
}
.site .com-finder__search .input-group > .btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	border-radius: var(--tx-radius-full) !important;
}
.site .com-finder__advanced {
	margin-bottom: var(--tx-space-6);
}
.site .com-finder__tips {
	background: var(--tx-bg-surface);
	border: 1px solid var(--tx-border-default);
	box-shadow: none;
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-secondary);
}
.site .com-finder__tips p:last-child {
	margin-bottom: 0;
}
.site .com-finder__filter .filter-branch {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: var(--tx-space-3) var(--tx-space-4);
}
.site .com-finder__filter .control-label label {
	margin-bottom: 4px;
	font-size: var(--tx-text-sm);
	font-weight: var(--tx-font-weight-medium);
	color: var(--tx-fg-secondary);
}
.site .com-finder__explained {
	margin: var(--tx-space-6) 0 var(--tx-space-1);
	padding-top: var(--tx-space-4);
	border-top: 1px solid var(--tx-border-default);
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-tertiary);
}
.site .com-finder__explained p {
	margin: 0;
}
.site .com-finder__explained .term {
	color: var(--tx-fg-heading);
	font-weight: var(--tx-font-weight-semibold);
}
.site .com-finder__results-list {
	margin: 0 0 var(--tx-space-6);
	padding: 0;
	list-style: none;
}
.site .com-finder__results-list .result__item {
	padding: var(--tx-space-4) 0;
	border-bottom: 1px solid var(--tx-border-default);
}
.site .result__title {
	margin: 0 0 4px;
}
.site .result__title-link {
	display: block;
	text-decoration: none;
}
.site .result__title-text {
	font-size: 1.0625rem;
	font-weight: var(--tx-font-weight-semibold);
	color: var(--tx-fg-heading);
}
.site .result__title-link:hover .result__title-text {
	color: var(--tx-fg-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.site .result__title-url {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	font-size: var(--tx-text-xs);
	font-style: normal;
	color: var(--tx-fg-hint);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.site .result__description {
	margin: 0;
	font-size: var(--tx-text-base);
	line-height: var(--tx-leading-relaxed);
	color: var(--tx-fg-secondary);
}
.site .result__date {
	margin-right: 6px;
	font-size: var(--tx-text-sm);
	font-weight: var(--tx-font-weight-medium);
	color: var(--tx-fg-tertiary);
}
.site .result__taxonomy {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-tertiary);
}
.site .com-finder__results mark {
	padding: 0 2px;
	border-radius: 2px;
	background: var(--tx-warning-100);
	color: inherit;
}
.site .com-finder__counter {
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-tertiary);
}

/* Pagination (search results, category lists) */
.site .pagination {
	--pagination-color: var(--tx-fg-secondary);
	--pagination-bg: var(--tx-bg-elevated);
	--pagination-border-color: var(--tx-border-default);
	--pagination-hover-color: var(--tx-fg-heading);
	--pagination-hover-bg: var(--tx-bg-surface);
	--pagination-hover-border-color: var(--tx-border-form);
	--pagination-focus-color: var(--tx-fg-heading);
	--pagination-focus-bg: var(--tx-bg-surface);
	--pagination-focus-box-shadow: 0 0 0 3px var(--tx-focus-ring);
	--pagination-active-color: var(--tx-red-700);
	--pagination-active-bg: var(--tx-red-50);
	--pagination-active-border-color: var(--tx-red-200);
	--pagination-disabled-color: var(--tx-fg-disabled);
	--pagination-disabled-bg: var(--tx-bg-elevated);
	--pagination-disabled-border-color: var(--tx-border-default);
	gap: 4px;
	font-size: var(--tx-text-sm);
}
.site .pagination .page-link {
	min-width: 36px;
	border-radius: var(--tx-radius-md) !important; /* Bootstrap squares the inner ones */
	text-align: center;
}
.site .pagination .page-item:not(:first-child) .page-link {
	margin-left: 0;
}

/* --------------------------------------------------------------------------
   15. Front-end editing (editors only). Joomla puts an edit button first
       inside each module; Cassiopeia pins it to the top-right corner, over
       the sidebar's first arrow. Show it only while the module is hovered
       (or the button has keyboard focus), small, on the card's outer corner.
   -------------------------------------------------------------------------- */
.site .btn.jmodedit {
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--tx-border-form);
	border-radius: var(--tx-radius-full);
	background: var(--tx-bg-elevated);
	box-shadow: var(--tx-shadow-sm);
	color: var(--tx-fg-secondary);
	font-size: 12px;
	line-height: 1;
	opacity: 0;
	transition: opacity var(--tx-duration-fast) var(--tx-ease-out), color var(--tx-duration-fast) var(--tx-ease-out), border-color var(--tx-duration-fast) var(--tx-ease-out);
}
.site .card > .btn.jmodedit {
	top: -12px;
	right: -12px;
}
.site :hover > .btn.jmodedit,
.site .btn.jmodedit:focus-visible {
	opacity: 1;
}
.site .btn.jmodedit:hover {
	color: var(--tx-fg-accent);
	border-color: var(--tx-red-300);
}
.site .btn.jmodedit + [role="tooltip"] {
	top: 8px;
	right: 44px;
	margin: 0;
	padding: 6px 10px;
	max-width: 18rem;
	background: var(--tx-bg-inverse);
	border: 0;
	border-radius: var(--tx-radius-md);
	box-shadow: var(--tx-shadow-md);
	color: var(--tx-white);
	font-family: var(--tx-font-sans);
	font-size: var(--tx-text-sm);
	line-height: var(--tx-leading-snug);
}
.site .card > .btn.jmodedit + [role="tooltip"] {
	top: -12px;
	right: 24px;
}

/* --------------------------------------------------------------------------
   16. Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.site *,
	.site *::before,
	.site *::after {
		transition: none !important;
		animation: none !important;
	}
	.site #top-articles-module .card:hover,
	.site .main-top .mod-custom > table td:hover {
		transform: none;
	}
}

@media print {
	.container-header,
	.container-banner,
	.container-sidebar-left,
	.container-sidebar-right,
	.container-footer,
	.mod-breadcrumbs__wrapper,
	.back-to-top-link,
	.tx-lightbox,
	.jmodedit {
		display: none !important;
	}
	body.site {
		background: #FFFFFF;
	}
	.site main > .com-content-article {
		border: 0;
		box-shadow: none;
		padding: 0;
	}
}

/* ==========================================================================
   Help-article typography. build.py writes this twice: scoped to
   .com-content-article__body in user.css, and to the editor's body in
   editor.css, so the writer edits in the look readers get.
   ========================================================================== */
.com-content-article__body {
	font-size: 0.9375rem;
	line-height: var(--tx-leading-relaxed);
	color: var(--tx-fg-primary);
	overflow-wrap: break-word;
}
.com-content-article__body > :first-child {
	margin-top: 0;
}
.com-content-article__body p {
	margin: 0 0 1rem;
}

.com-content-article__body h2,
.com-content-article__body h3,
.com-content-article__body h4,
.com-content-article__body h5,
.com-content-article__body h6 {
	font-family: var(--tx-font-display);
	color: var(--tx-fg-heading);
	scroll-margin-top: calc(var(--tx-header-h, 64px) + 1rem);
}
.com-content-article__body h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: 1.5rem;
	font-weight: var(--tx-font-weight-medium);
	line-height: var(--tx-leading-snug);
	letter-spacing: var(--tx-tracking-tight);
}
.com-content-article__body h3 {
	margin: 2.25rem 0 0.625rem;
	font-size: 1.25rem;
	font-weight: var(--tx-font-weight-semibold);
	line-height: 1.35;
	letter-spacing: -0.01em;
}
.com-content-article__body h4 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: var(--tx-font-weight-semibold);
	line-height: 1.4;
}
.com-content-article__body h5,
.com-content-article__body h6 {
	margin: 1.5rem 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: var(--tx-font-weight-semibold);
}

.com-content-article__body a {
	color: var(--tx-fg-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.com-content-article__body a:hover {
	color: var(--tx-fg-link-hover);
	text-decoration-color: currentColor;
}

.com-content-article__body strong,
.com-content-article__body b {
	font-weight: var(--tx-font-weight-semibold);
	color: var(--tx-fg-heading);
}

/* Lists: steps are numbered lists, so the numbers carry weight. */
.com-content-article__body ul,
.com-content-article__body ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}
.com-content-article__body li {
	margin: 0.4rem 0;
	padding-left: 0.25rem;
}
.com-content-article__body li::marker {
	color: var(--tx-fg-tertiary);
}
.com-content-article__body ol > li::marker {
	font-weight: var(--tx-font-weight-semibold);
	color: var(--tx-fg-secondary);
}
.com-content-article__body li > ul,
.com-content-article__body li > ol {
	margin: 0.4rem 0 0;
}
.com-content-article__body li > p {
	margin: 0 0 0.4rem;
}

/* Screenshots */
.com-content-article__body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.25rem auto;
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-lg);
	box-shadow: var(--tx-shadow-sm);
	background: var(--tx-bg-elevated);
}
.com-content-article__body p > img:only-child {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* Tables: rounded frame, light header row, lines between cells. Tables the
   editor marked as borderless (old layout tables) are left alone. */
.com-content-article__body table:not([border="0"]):not([style*="border-width: 0"]) {
	width: 100%;
	margin: 1.25rem 0 1.75rem;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-lg);
	background: var(--tx-bg-elevated);
	font-size: 0.875rem;
	line-height: var(--tx-leading-normal);
}
.com-content-article__body table:not([border="0"]):not([style*="border-width: 0"]) :is(th, td) {
	padding: 0.625rem 0.875rem;
	border: 0;
	border-bottom: 1px solid var(--tx-border-default);
	border-left: 1px solid var(--tx-border-default);
	text-align: left;
	vertical-align: top;
}
.com-content-article__body table:not([border="0"]):not([style*="border-width: 0"]) tr > :first-child {
	border-left: 0;
}
.com-content-article__body table:not([border="0"]):not([style*="border-width: 0"]) > :last-child > tr:last-child > * {
	border-bottom: 0;
}
.com-content-article__body table:not([border="0"]):not([style*="border-width: 0"]) th {
	background: var(--tx-bg-surface);
	color: var(--tx-fg-heading);
	font-weight: var(--tx-font-weight-semibold);
}
.com-content-article__body table > :first-child > tr:first-child > :first-child {
	border-top-left-radius: calc(var(--tx-radius-lg) - 1px);
}
.com-content-article__body table > :first-child > tr:first-child > :last-child {
	border-top-right-radius: calc(var(--tx-radius-lg) - 1px);
}
.com-content-article__body table > :last-child > tr:last-child > :first-child {
	border-bottom-left-radius: calc(var(--tx-radius-lg) - 1px);
}
.com-content-article__body table > :last-child > tr:last-child > :last-child {
	border-bottom-right-radius: calc(var(--tx-radius-lg) - 1px);
}
.com-content-article__body td > p:last-child,
.com-content-article__body th > p:last-child {
	margin-bottom: 0;
}
@media (max-width: 767.98px) {
	.com-content-article__body table {
		display: block;
		overflow-x: auto;
	}
}

/* On-screen names in code style, and keyboard keys */
.com-content-article__body code {
	padding: 0.1em 0.35em;
	font-family: var(--tx-font-mono);
	font-size: 0.85em;
	color: var(--tx-fg-heading);
	background: var(--tx-bg-canvas);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-sm);
}
.com-content-article__body kbd {
	display: inline-block;
	padding: 0.05em 0.45em;
	font-family: var(--tx-font-mono);
	font-size: 0.8em;
	font-weight: var(--tx-font-weight-medium);
	line-height: 1.5;
	color: var(--tx-fg-heading);
	background: var(--tx-bg-elevated);
	border: 1px solid var(--tx-border-form);
	border-bottom-width: 2px;
	border-radius: var(--tx-radius-sm);
	box-shadow: none;
}
.com-content-article__body pre {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	font-family: var(--tx-font-mono);
	font-size: 0.8125rem;
	background: var(--tx-bg-surface);
	border: 1px solid var(--tx-border-default);
	border-radius: var(--tx-radius-lg);
	overflow-x: auto;
}
.com-content-article__body pre code {
	padding: 0;
	background: none;
	border: 0;
}

.com-content-article__body blockquote {
	margin: 1.25rem 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 3px solid var(--tx-border-form);
	color: var(--tx-fg-secondary);
}
.com-content-article__body hr {
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid var(--tx-border-default);
	opacity: 1;
}
.com-content-article__body mark {
	padding: 0 0.15em;
	background: var(--tx-warning-100);
	color: inherit;
}

/* The house style ends every article with "Checked for release: <Month YYYY>".
   user.js tags that paragraph; it reads as a footnote. */
.com-content-article__body .tx-release-line {
	margin: 2.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--tx-border-default);
	font-size: var(--tx-text-sm);
	color: var(--tx-fg-tertiary);
}