/* Main-page widgets for MiniStation (splash / pageframe / pagebutton / pagelist). */

/* Default = light theme (white page background). */
:root,
html[data-theme="light"] {
  --palette-saturation: 50%;
  --palette-lightness: 50%;

  --color-primary: #3d6ea8;
  --color-primary-light: #4f82c0;
  --color-second: color-mix(in srgb, var(--panel) 97%, transparent);
  --color-second-fill: var(--panel);
  --color-border: rgba(23, 34, 47, 0.14);
  --color-text: #17222f;
  --color-text-darker: #17222f;
  --color-text-semi-translucent: rgba(23, 34, 47, 0.72);
  --color-bg-hover: rgba(23, 34, 47, 0.06);
  --color-white: #ffffff;
  --color-blue: #2280c3;
  --color-orange: #f59e0b;
  --color-red: #c43c3c;

  --border-classic: 1px solid var(--color-border);
  --border-radius-large: 12px;
  --border-radius-medium: 8px;
  --border-radius-small: 6px;
  --blur-default: blur(8px);
  --transition-time: 0.15s;
  --linear-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --template-shadow--small: 0 2px 0;

  /* pagebutton label strip (hsl(from …) helpers) */
  --adjust-s: 55%;
  --adjust-bg-l: 32%;
  --adjust-bd-l: 42%;
  --color-on-strong: var(--color-text-darker);

  --civilian-opaque: hsl(140, 70%, 35%);
  --civilian-primary: hsla(141, 70%, 35%, 0.75);
  --civilian-secondary: hsla(142, 70%, 35%, 0.5);
  --civilian-light: hsla(143, 70%, 35%, 0.25);
  --civilian-transparent: hsla(144, 70%, 35%, 0.1);

  --medical-opaque: hsl(195, 75%, 40%);
  --medical-primary: hsla(194, 75%, 40%, 0.75);
  --medical-secondary: hsla(193, 75%, 40%, 0.5);
  --medical-light: hsla(192, 75%, 40%, 0.25);
  --medical-transparent: hsla(191, 75%, 40%, 0.1);

  --science-opaque: hsl(280, 55%, 42%);
  --science-primary: hsla(279, 55%, 42%, 0.75);
  --science-secondary: hsla(278, 55%, 42%, 0.5);
  --science-light: hsla(277, 55%, 42%, 0.25);
  --science-transparent: hsla(276, 55%, 42%, 0.1);

  /* ColorPaletteStyles expects --engineer-* (not engineering-*) */
  --engineer-opaque: hsl(35, 80%, 42%);
  --engineer-primary: hsla(34, 80%, 42%, 0.75);
  --engineer-secondary: hsla(33, 80%, 42%, 0.5);
  --engineer-light: hsla(32, 80%, 42%, 0.25);
  --engineer-transparent: hsla(31, 80%, 42%, 0.1);

  --security-opaque: hsl(0, 65%, 42%);
  --security-primary: hsla(0, 65%, 42%, 0.75);
  --security-secondary: hsla(0, 65%, 42%, 0.5);
  --security-light: hsla(0, 65%, 42%, 0.25);
  --security-transparent: hsla(0, 65%, 42%, 0.1);

  --supply-opaque: hsl(25, 70%, 40%);
  --supply-primary: hsla(24, 70%, 40%, 0.75);
  --supply-secondary: hsla(23, 70%, 40%, 0.5);
  --supply-light: hsla(22, 70%, 40%, 0.25);
  --supply-transparent: hsla(21, 70%, 40%, 0.1);

  --command-opaque: hsl(210, 55%, 40%);
  --command-primary: hsla(209, 55%, 40%, 0.75);
  --command-secondary: hsla(208, 55%, 40%, 0.5);
  --command-light: hsla(207, 55%, 40%, 0.25);
  --command-transparent: hsla(206, 55%, 40%, 0.1);

  --legal-opaque: hsl(45, 55%, 38%);
  --legal-primary: hsla(44, 55%, 38%, 0.75);
  --legal-secondary: hsla(43, 55%, 38%, 0.5);
  --legal-light: hsla(42, 55%, 38%, 0.25);
  --legal-transparent: hsla(41, 55%, 38%, 0.1);

  --centcom-opaque: hsl(0, 0%, 28%);
  --centcom-primary: hsla(0, 0%, 28%, 0.75);
  --centcom-secondary: hsla(0, 0%, 28%, 0.5);
  --centcom-light: hsla(0, 0%, 28%, 0.25);
  --centcom-transparent: hsla(0, 0%, 28%, 0.1);

  --synthetic-opaque: hsl(190, 25%, 45%);
  --synthetic-primary: hsla(190, 25%, 45%, 0.75);
  --synthetic-secondary: hsla(190, 25%, 45%, 0.5);
  --synthetic-light: hsla(190, 25%, 45%, 0.25);
  --synthetic-transparent: hsla(190, 25%, 45%, 0.1);

  --special-opaque: hsl(300, 40%, 40%);
  --special-primary: hsla(300, 40%, 40%, 0.75);
  --special-secondary: hsla(300, 40%, 40%, 0.5);
  --special-light: hsla(300, 40%, 40%, 0.25);
  --special-transparent: hsla(300, 40%, 40%, 0.1);

  --antag-opaque: hsl(345, 60%, 38%);
  --antag-primary: hsla(344, 60%, 38%, 0.75);
  --antag-secondary: hsla(343, 60%, 38%, 0.5);
  --antag-light: hsla(342, 60%, 38%, 0.25);
  --antag-transparent: hsla(341, 60%, 38%, 0.1);

  --blue-opaque: hsl(210, 60%, 42%);
  --blue-primary: hsla(209, 60%, 42%, 0.75);
  --blue-secondary: hsla(208, 60%, 42%, 0.5);
  --blue-light: hsla(207, 60%, 42%, 0.25);
  --blue-transparent: hsla(206, 60%, 42%, 0.1);

  --yellow-opaque: hsl(45, 80%, 42%);
  --yellow-primary: hsla(44, 80%, 42%, 0.75);
  --yellow-secondary: hsla(43, 80%, 42%, 0.5);
  --yellow-light: hsla(42, 80%, 42%, 0.25);
  --yellow-transparent: hsla(41, 80%, 42%, 0.1);

  --cyan-opaque: hsl(185, 70%, 38%);
  --cyan-primary: hsla(185, 70%, 38%, 0.75);
  --cyan-secondary: hsla(185, 70%, 38%, 0.5);
  --cyan-light: hsla(185, 70%, 38%, 0.25);
  --cyan-transparent: hsla(185, 70%, 38%, 0.1);

  --green-opaque: hsl(140, 55%, 38%);
  --green-primary: hsla(140, 55%, 38%, 0.75);
  --green-secondary: hsla(140, 55%, 38%, 0.5);
  --green-light: hsla(140, 55%, 38%, 0.25);
  --green-transparent: hsla(140, 55%, 38%, 0.1);

  --red-opaque: hsl(0, 70%, 42%);
  --red-primary: hsla(0, 70%, 42%, 0.75);
  --red-secondary: hsla(0, 70%, 42%, 0.5);
  --red-light: hsla(0, 70%, 42%, 0.25);
  --red-transparent: hsla(0, 70%, 42%, 0.1);

  --pink-opaque: hsl(320, 55%, 45%);
  --pink-primary: hsla(320, 55%, 45%, 0.75);
  --pink-secondary: hsla(320, 55%, 45%, 0.5);
  --pink-light: hsla(320, 55%, 45%, 0.25);
  --pink-transparent: hsla(320, 55%, 45%, 0.1);

  --brown-opaque: hsl(25, 45%, 38%);
  --brown-primary: hsla(25, 45%, 38%, 0.75);
  --brown-secondary: hsla(25, 45%, 38%, 0.5);
  --brown-light: hsla(25, 45%, 38%, 0.25);
  --brown-transparent: hsla(25, 45%, 38%, 0.1);

  --lavaland-opaque: hsl(15, 70%, 40%);
  --lavaland-primary: hsla(15, 70%, 40%, 0.75);
  --lavaland-secondary: hsla(15, 70%, 40%, 0.5);
  --lavaland-light: hsla(15, 70%, 40%, 0.25);
  --lavaland-transparent: hsla(15, 70%, 40%, 0.1);

  --cult-opaque: hsl(0, 55%, 28%);
  --cult-primary: hsla(0, 55%, 28%, 0.75);
  --cult-secondary: hsla(0, 55%, 28%, 0.5);
  --cult-light: hsla(0, 55%, 28%, 0.25);
  --cult-transparent: hsla(0, 55%, 28%, 0.1);

  --ratvar-opaque: hsl(40, 70%, 42%);
  --ratvar-primary: hsla(40, 70%, 42%, 0.75);
  --ratvar-secondary: hsla(40, 70%, 42%, 0.5);
  --ratvar-light: hsla(40, 70%, 42%, 0.25);
  --ratvar-transparent: hsla(40, 70%, 42%, 0.1);

  --wizard-opaque: hsl(270, 45%, 42%);
  --wizard-primary: hsla(270, 45%, 42%, 0.75);
  --wizard-secondary: hsla(270, 45%, 42%, 0.5);
  --wizard-light: hsla(270, 45%, 42%, 0.25);
  --wizard-transparent: hsla(270, 45%, 42%, 0.1);

  --indigo-opaque: hsl(255, 50%, 42%);
  --indigo-primary: hsla(255, 50%, 42%, 0.75);
  --indigo-secondary: hsla(255, 50%, 42%, 0.5);
  --indigo-light: hsla(255, 50%, 42%, 0.25);
  --indigo-transparent: hsla(255, 50%, 42%, 0.1);

  --black-opaque: hsl(0, 0%, 12%);
  --black-primary: hsla(0, 0%, 12%, 0.75);
  --black-secondary: hsla(0, 0%, 12%, 0.5);
  --black-light: hsla(0, 0%, 12%, 0.25);
  --black-transparent: hsla(0, 0%, 12%, 0.1);

  --gray-opaque: hsl(210, 10%, 45%);
  --gray-primary: hsla(210, 10%, 45%, 0.75);
  --gray-secondary: hsla(210, 10%, 45%, 0.5);
  --gray-light: hsla(210, 10%, 45%, 0.25);
  --gray-transparent: hsla(210, 10%, 45%, 0.1);

  --primary-hue: 210;
  --primary-lightness: 40%;
  --primary-saturacy: 37.5%;

  --tmp-100: var(--civilian-opaque);
  --tmp-75: var(--civilian-primary);
  --tmp-50: var(--civilian-secondary);
  --tmp-25: var(--civilian-light);
  --tmp-10: var(--civilian-transparent);
}

/* Department tints are too loud on the dark background, especially the
   blue ones in the "Новенький на станции?" block — soften them there */
html[data-theme="dark"] .pagelist {
  background-color: color-mix(in srgb, var(--tmp-100) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--tmp-100) 26%, var(--panel));
}
html[data-theme="dark"] .pagelist:hover {
  background-color: color-mix(in srgb, var(--tmp-100) 22%, var(--panel));
  border-color: color-mix(in srgb, var(--tmp-100) 38%, var(--panel));
}
html[data-theme="dark"] .pageframe-header {
  background-color: color-mix(in srgb, var(--tmp-100) 16%, var(--panel));
}
html[data-theme="dark"] .pagebutton-text {
  background-color: color-mix(in srgb, var(--color-tmp-100, var(--tmp-100)) 24%, var(--panel));
}

html[data-theme="dark"] {
  --color-second: color-mix(in srgb, var(--panel) 92%, transparent);
  --color-second-fill: color-mix(in srgb, var(--panel) 96%, transparent);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: #e8eef6;
  --color-text-darker: #c5d0de;
  --color-text-semi-translucent: rgba(232, 238, 246, 0.78);
  --color-bg-hover: rgba(255, 255, 255, 0.08);
  --color-orange: #f2930d;
  --color-red: #ff8484;
}

/* --- MainPage layout (from Common.css) --- */

/**
 * MARK: MainPage/Content
 */
.wiki-mainpage {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.wiki-mainpage-column {
	display: flex;
	flex-direction: column;
	flex: 1 1 20rem;
	gap: 0.75em;
}

/* --- Splash --- */

/**
 * MARK: MainPage/Splash
 */
.paradise-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  background-color: var(--color-second);
  border: var(--border-classic);
  border-radius: var(--border-radius-large);
  backdrop-filter: var(--blur-default);
}

.paradise-logo a img {
  width: 100%;
  height: auto;
}

.paradise-welcome {
  display: inline-flex;
  text-align: center;
  font-weight: bold;
  padding: 0 1em;
  margin: -1.5em 0.5em 0.5em 0.5em;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--border-radius-large);
}

.paradise-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.paradise-info-string {
  overflow: hidden;
  display: flex;
  max-width: 90%;
  margin-bottom: 0.25em;
  background-color: var(--color-second);
  border: var(--border-classic);
  border-top: 0;
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
  box-shadow: inset 0px 5px 5px -5px rgba(0, 0, 0, 0.2);
  backdrop-filter: var(--blur-default);
}

.paradise-info-string span:not([class]) {
  padding: 0.5em 0.75em;
  border-right: var(--border-classic);
  border-left: var(--border-classic);

  @media (max-width: 719px) {
    display: none;
  }
}

.paradise-info-string .paradise-info-link {
  min-width: 3em;

  @media (max-width: 719px) {
    min-width: 10em;
    height: 2.5em;
  }
}

.paradise-info-string .paradise-info-link:first-of-type {
  @media (max-width: 719px) {
    border-right: var(--border-classic);
  }
}

.paradise-info-string .paradise-info-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-semi-translucent) !important;
  transition: color var(--transition-time), background-color var(--transition-time);
}

.paradise-info-string .paradise-info-link a:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text) !important;
}

.paradise-info-string .paradise-info-link a:after {
  content: "";
  font: unset;

  @media (min-width: 720px) {
    display: none;
  }
}

.paradise-info-string .paradise-info-link:first-of-type a:after {
  @media (max-width: 719px) {
    content: "Discord";
    margin-left: 1em;
  }
}

.paradise-info-string .paradise-info-link:last-of-type a:before {
  @media (max-width: 719px) {
    content: "GitHub";
    margin-right: 1em;
  }
}

.paradise-info-string .paradise-info-link a i {
  font-size: 1.25em;
}

/* --- Pageframe --- */

.pageframe {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: var(--tmp-10);
	box-shadow: var(--shadow-hard);
	border-radius: var(--border-radius-medium);
}

.pageframe hr {
	margin: 0.5rem 0;
	background-color: var(--tmp-25);
}

.pageframe-header {
	display: flex;
	align-items: center;
	min-height: 1.75rem;
	gap: 0.5rem;
	padding: 2px 0.5rem 0;
	background-color: color-mix(in srgb, var(--tmp-100) 18%, var(--panel));
	color: var(--color-on-strong);
	border-bottom: 2px solid color-mix(in srgb, var(--tmp-100) 32%, var(--panel));
}

.pageframe-header-icon {
    line-height: 1em;
}

.pageframe-header-text {
	flex: 1;
	font-weight: bold;
	text-align: center;
	line-height: 1.1rem;
	padding: 0.25em 0;
}

.pageframe-content {
    padding: 0.5rem;
    border: 1px solid var(--tmp-25);
    border-top: unset;
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    background-color: var(--color-second);
    color: var(--color-text);
}

/* Content inside frames follows theme ink (never stuck white-on-white) */
.pageframe-content {
  color: var(--color-text) !important;
}
.pageframe-content > div[style],
.pageframe-content .pagelist,
.pageframe-content .pagelist-text a,
.pageframe-content hr + div {
  color: var(--color-text);
}
.pageframe-content .pagelist-text a {
  color: var(--color-text) !important;
}
.pageframe-content a:not(.pagebutton a):not(.pagebutton-text a) {
  color: var(--color-primary);
}
.pageframe-content a:not(.pagebutton a):not(.pagebutton-text a):hover {
  color: var(--color-primary-light);
}

/* Colored chrome keeps light labels */
.pageframe-header,
.pageframe-header *,
.pagebutton-text,
.pagebutton-text * {
  color: var(--color-on-strong) !important;
}

/* --- PageButton --- */

.pagebutton {
    --pagebutton-transition: calc(var(--transition-time) * 2);
    --color-tmp-100: var(--tmp-100);
    --color-tmp-75: var(--tmp-75);
    --color-tmp-50: var(--tmp-50);
    --color-tmp-25: var(--tmp-25);
    --color-tmp-10: var(--tmp-10);

	user-select: none;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	overflow: hidden;
	border: 2px solid var(--color-tmp-50, var(--tmp-50));
	box-shadow: 0 2px 0 rgba(23, 34, 47, 0.08);
	border-radius: var(--border-radius-small);
	transition-property: box-shadow, border-color, transform;
	transition-duration: var(--pagebutton-transition);
	transition-timing-function: var(--linear-bounce);
	z-index: 1;
}

.pagebutton:hover {
    --pagebutton-transition: var(--transition-time);
    --color-tmp-100: var(--hover-100, var(--tmp-100));
    --color-tmp-75: var(--hover-75, var(--tmp-75));
    --color-tmp-50: var(--hover-50, var(--tmp-50));
    --color-tmp-25: var(--hover-25, var(--tmp-25));
    --color-tmp-10: var(--hover-10, var(--tmp-10));

	box-shadow: var(--shadow-lift);
	transform: translateY(-0.25rem);
	transition-timing-function: ease;
	z-index: 2;
}

.pagebutton:active {
	box-shadow: none;
	transform: translateY(0.1rem);
	transition-duration: 0s;
}

.pagebutton-image {
	flex: 1;
	display: inline-flex;
	justify-content: center;
	background-color: var(--color-tmp-10);
	transition-property: background-color;
	transition-duration: var(--pagebutton-transition);
}

.pagebutton-image a {
	transition-property: filter;
	transition-duration: var(--transition-time);
}

.pagebutton:active .pagebutton-image a {
	filter: drop-shadow(0 0 6px var(--color-tmp-75));
	transition-duration: 0s;
}

.pagebutton-image a,
.pagebutton-image span {
	display: inline-flex;
	justify-content: center;
	width: 100%;
}

.pagebutton-image img {
	padding: 0.5em;
	max-width: 96px;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
	image-rendering: pixelated;
}

.pagebutton-text {
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(1.25rem + 1px);
	font-weight: bold;
	white-space: nowrap;
	/* pale dept tint, dark label — the saturated dark bar was too harsh */
	background-color: color-mix(in srgb, var(--color-tmp-100, var(--tmp-100)) 28%, var(--panel));
	color: var(--color-on-strong) !important;
	border-top: 1px solid color-mix(in srgb, var(--color-tmp-100, var(--tmp-100)) 38%, var(--panel));
	transition-property: background-color, border;
	transition-duration: var(--pagebutton-transition);
}

.pagebutton-text a {
	color: var(--color-on-strong) !important;
}

.pagebutton-text a:before {
	content: '';
	position: absolute;
	inset: 0;
}

/* --- PageList (soft rows, not loud chips) --- */
.pagelist {
	position: relative;
	user-select: none;
	display: flex;
	flex: 1 1 17.5rem;
	align-items: center;
	min-height: 2.35em;
	background-color: var(--tmp-25);
	border: 2px solid var(--tmp-50);
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 0 rgba(23, 34, 47, 0.07);
	padding: 0.2rem 0.5rem;
	transition-property: background-color, border-color, transform, box-shadow;
	transition-duration: var(--transition-time);
}

.pagelist:hover {
	background-color: var(--tmp-50);
	border-color: var(--tmp-75);
	transform: translateY(-1px);
	box-shadow: 0 3px 0 rgba(23, 34, 47, 0.10);
}


.pagelist:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* Шаблон оборачивает строки в это, но стилей у класса не было:
   ряды слипались в один блок. */
/* Rows placed directly in a block container have no flex/grid gap to
   separate them, so they fused into one block. */
.pageframe-content > .pagelist {
	margin-bottom: 0.45rem;
}

.pageframe-content > .pagelist:last-child {
	margin-bottom: 0;
}

.pagelist-stack {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pagelist-stack > .pagelist {
	flex: 0 0 auto;
}

.pagelist-image {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 1.75em;
	color: var(--color-text-semi-translucent);
}

/* rows that carry a sprite reserve one fixed column, otherwise the labels
   start at a different x on every row */
.pagelist-image:has(img) {
	min-width: 3.1em;
}


.pagelist-image a,
.pagelist-text a{
	transition-property: filter;
	transition-duration: var(--transition-time);
}

.pagelist:active .pagelist-image a,
.pagelist:active .pagelist-text a{
	filter: drop-shadow(0 0 3px var(--tmp-75));
	transition-duration: 0s;
}


.pagelist-text {
	display: contents;
}

.pagelist-text a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 600;
	width: 100%;
	height: 100%;
	line-height: 1.1rem;
	padding: 0 0.5rem;
	color: var(--color-text) !important;
}

.pagelist-text a:before {
	content: '';
	position: absolute;
	inset: 0;
	background: transparent;
}

.pagelist:hover .pagelist-text a:before {
	transform: translateY(0.2rem);
}

.pagelist-image img {
	max-width: 48px;
	max-height: 48px;
	width: auto;
	height: auto;
	object-fit: contain;
	image-rendering: pixelated;
}

/* Mobile: stack columns, wrap tiles */
@media (max-width: 719px) {
	.wiki-mainpage {
		flex-direction: column;
		gap: 0.5em;
	}

	.wiki-mainpage-column {
		flex: 1 1 100%;
		min-width: 0;
		width: 100%;
	}

	.pagebutton {
		flex: 1 1 calc(50% - 0.5rem) !important;
		min-width: 5.25rem;
		max-width: calc(50% - 0.25rem);
	}

	.pagebutton-image img {
		max-width: 72px;
		max-height: 72px;
		padding: 0.35em;
	}

	.pagebutton-text {
		font-size: 0.7rem !important;
		white-space: normal;
		height: auto;
		min-height: calc(1.25rem + 1px);
		padding: 0.15rem 0.2rem;
		line-height: 1.1;
	}

	.pagelist {
		flex: 1 1 100%;
		min-width: 0;
	}

	.ms-hero .social-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}
}

/* === Rule / notice templates (fallback without TemplateStyles pages) === */
.rule-template {
  cursor: default;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.75rem;
  border-radius: var(--border-radius-medium);
  box-shadow: 0 0 0.5rem -0.1rem rgba(0, 0, 0, 0.12), inset 0 0 0.25rem 0 transparent;
  transition-property: box-shadow;
  transition-duration: var(--transition-time);
}
.rule-template:hover {
  box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.14), inset 0 0 0.25rem 0.05rem rgba(0, 0, 0, 0.04);
}
.rule-template:last-child { margin-bottom: 0; }
.rule-template .rule-template {
  font-size: 0.9em;
  margin: 0.5rem 0.5rem 0;
  box-shadow: none;
}
.rule-title h3,
.rule-title h4 {
  margin: 0;
  padding: 0;
  line-height: 1.4;
  border: none;
}
.rule-title h3 { font-size: 1.2em; }
.rule-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  padding: 0.33rem 0.75rem 0.15rem;
  width: 5em;
}
.rule-hidden { display: none; }
.rule-name { padding: 0.33rem 0.75rem 0.15rem; }
.rule-content {
  text-align: left;
  line-height: 1.35;
  padding: 0.45rem 0.65rem;
  color: var(--color-text) !important;
}
.rule-content ul { margin-top: 0.4em; padding-left: 1.1em; }
.rule-content li { padding-block: 0.15em; margin: 0.08em 0; }

/* Moderated-page note banner */
.tgui-blur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: var(--blur-default, blur(8px));
  border-radius: inherit;
  opacity: 0.35;
}

html[data-theme="light"] .rule-content,
html[data-theme="light"] .rule-template {
  color: var(--color-text);
}
html[data-theme="dark"] .rule-content,
html[data-theme="dark"] .rule-template {
  color: var(--color-text);
}

/* --- TemplateStyles leftovers ---
   When a template is used more than once on a page, MediaWiki emits its
   stylesheet as a deduplicated <link> wrapped in a <pre>. Inside the widget
   grids (.portalsection-content is a grid) that <pre> becomes an empty cell,
   so the tiles get pushed aside. It carries no content of its own, and a
   stylesheet inside a display:none subtree still applies. */
.portalsection-content > pre,
.pageframe-content > pre,
.wiki-mainpage > pre,
.portalsection pre:has(> link),
.pageframe-content pre:has(> link),
.wiki-mainpage pre:has(> link) {
	display: none !important;
}