Shko te përmbajtja

Wikipedia:Artikuj të mirë/styles.css

Nga Wikipedia, enciklopedia e lirë
/* ================================================
   Wikipedia:Artikuj të mirë/styles.css
   ================================================

   TABLE OF CONTENTS
   ─────────────────
   1.  HERO BAND         — outer wrapper, header band, medallion, title
   2.  ARCHIVE BOX       — search & links widget in hero-right
   3.  STATS BAR         — article count, open nominations, reassessments
   4.  HERO BODY         — description text, criteria intro, transcluded grid
   5.  KRITERE PAGE      — standalone criteria page + transclusion overrides
   6.  BODY & MOSAIC     — article tile grid and category legend
   7.  DIVIDERS          — section separators
   8.  VOTE PANELS       — vote grid used on subpages
   9.  VOTE FOOTER       — archive footer on mbyllja pages
  10.  VOTING INTRO      — kandidatura & rivlerësime intro cards
  11.  ARCHIVE TABLE     — kandidatura/rivlerësime archive table
  12.  ARCHIVE PAGE      — main archive hub page
  13.  VOTIMET           — aggregator widget (transcluded on main page)
  14.  RESPONSIVE        — mobile breakpoints (720px, 480px)
   ================================================ */

/* ==================================================================
   1. HERO BAND
   ================================================================== */

/* Outer wrapper — green border, rounded top, clips overflow */
.ga-hero {
	border: 1px solid #2E8B57;
	border-radius: 4px 4px 0 0;
	overflow: hidden;
}

/* Header band — light green background with subtle crosshatch pattern */
.ga-hero-band {
	background-color: #e8f5ee;
	padding: 1.8rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 1px solid #2E8B57;
	flex-wrap: wrap;
}

/* Left side — medallion + title + subtitle */
.ga-hero-left {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1;
}

/* Text block — grows to fill space beside medallion */
.ga-hero-text {
	flex: 1;
}

/* Green-bordered circular star medallion */
.ga-hero-medallion {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid #2E8B57;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #f0faf4;
	padding: 10px;
	box-shadow: 0 2px 8px rgba(46, 139, 87, 0.2);
}

.ga-hero-medallion img {
	width: 100%;
	height: auto;
}

.ga-hero-title {
	font-size: 30px;
	font-weight: 400;
	color: #0d3320;
	font-family: Georgia, serif;
	line-height: 1.2;
}

.ga-hero-subtitle {
	font-size: 13px;
	color: #4a7a5a;
	font-family: Georgia, serif;
	font-style: italic;
	margin-top: 4px;
	margin-bottom: 8px;
}

/* The way to the two voting pages, under the title of the hero: the candidacies (filled) and the
   re-evaluations (outlined) */
.ga-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.ga-hero-actions a {
	text-decoration: none !important;
}

.ga-hero-btn {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid #2E8B57;
	border-radius: 2px;
	background: #fff;
	color: #1a5c38;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.15s ease;
}

.ga-hero-btn:hover {
	background: #e8f5ee;
}

.ga-hero-btn-primary {
	border: 1px solid #2E8B57;
	background: #2E8B57;
	color: #fff;
}

.ga-hero-btn-primary:hover {
	background: #1f6b42;
}

/* Right side — the archive box, aligned with the medallion */
.ga-hero-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	flex-shrink: 0;
}

/* The shortcut ({{Shortcut}}) as a quiet line, «Shteg WP:…», without its box: at the foot of the hero, on
 the right under the criteria, as at the foot of the headers of the other hubs (so the two sides of the
 hero band stay in balance), and on the right of the headers of the subpages */
.ga-hero-shortcut {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0.9rem 0 -0.4rem;
}

.ga-hero-shortcut .module-shortcutanchordiv,
.ga-voting-header .module-shortcutanchordiv,
.ga-kritere-header .module-shortcutanchordiv {
	position: absolute;
}

.ga-hero-shortcut .module-shortcutboxplain,
.ga-voting-header .module-shortcutboxplain,
.ga-kritere-header .module-shortcutboxplain {
	float: none;
	clear: none;
	display: flex;
	align-items: baseline;
	gap: 5px;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: sans-serif;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
}

.ga-hero-shortcut .module-shortcutlist,
.ga-voting-header .module-shortcutlist,
.ga-kritere-header .module-shortcutlist {
	display: inline;
	margin: 0;
	border: 0;
}

.ga-hero-shortcut .module-shortcutlist a,
.ga-voting-header .module-shortcutlist a,
.ga-kritere-header .module-shortcutlist a {
	color: #4a7a5a;
}

.ga-hero-shortcut .module-shortcutboxplain ul,
.ga-voting-header .module-shortcutboxplain ul,
.ga-kritere-header .module-shortcutboxplain ul,
.ga-hero-shortcut .module-shortcutboxplain li,
.ga-voting-header .module-shortcutboxplain li,
.ga-kritere-header .module-shortcutboxplain li {
	display: inline;
	margin: 0;
}

.ga-hero-shortcut .module-shortcutboxplain li a,
.ga-voting-header .module-shortcutboxplain li a,
.ga-kritere-header .module-shortcutboxplain li a {
	color: #1a5c38;
}

/* ==================================================================
   2. ARCHIVE BOX
   ================================================================== */

/* The archives, in the right of the hero, quietly and without a box, like the archives of the other
 hubs ({{Hub archives}}): a small title, the two archives and a compact search */
.ga-archive-box {
	min-width: 200px;
	text-align: center;
}

.ga-archive-box-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 3px;
	color: #4a7a5a;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ga-archive-box-title a {
	color: #4a7a5a !important;
	text-decoration: none !important;
}

.ga-archive-box-title a:hover {
	text-decoration: underline !important;
}

.ga-archive-box-title img {
	vertical-align: middle;
	opacity: 0.7;
}

/* The two archives (Kandidaturat · Rivlerësimet) */
.ga-archive-box-links {
	margin-bottom: 7px;
	font-family: sans-serif;
	font-size: 13px;
	white-space: nowrap;
}

.ga-archive-box-links a {
	color: #1a5c38 !important;
	text-decoration: none !important;
}

.ga-archive-box-links a:hover {
	text-decoration: underline !important;
}

/* The search: the field and a small button, joined */
.ga-archive-search form {
	display: flex;
	justify-content: center;
	align-items: stretch;
}

.ga-archive-search br {
	display: none;
}

.ga-archive-search .cdx-text-input {
	flex: 1 1 auto;
	min-width: 0;
}

.ga-archive-search input[type="text"],
.ga-archive-search .cdx-text-input__input {
	width: 100%;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 28px;
	padding: 2px 8px;
	border: 1px solid #2E8B5780;
	border-radius: 2px 0 0 2px;
	background: #fff;
	color: #2c1f00;
	font-size: 13px;
}

.ga-archive-search input[type="submit"] {
	min-height: 28px;
	margin-left: -1px;
	padding: 0 10px;
	border: 1px solid #2E8B5780;
	border-radius: 0 2px 2px 0;
	background: #fff;
	color: #1a5c38;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: normal;
	cursor: pointer;
}

.ga-archive-search input[type="submit"]:hover {
	background: #e8f5ee;
}

/* ==================================================================
   3. STATS BAR
   ================================================================== */

/* Green strip below the hero band — shows live article/nomination counts */
.ga-stats {
	display: flex;
	background: #c8e6d4;
	border-bottom: 1px solid #2E8B5740;
}

.ga-stat {
	flex: 1;
	padding: 0.75rem;
	border-right: 1px solid #2E8B5740;
	text-align: center;
}

.ga-stat:last-child {
	border-right: none;
}

/* Large number */
.ga-stat-n {
	font-size: 21px;
	font-weight: 400;
	color: #0d3320;
	font-family: Georgia, serif;
	line-height: 1.2;
}

/* The number links quietly: it keeps the look of the text and is underlined only on hover, like the archive box links */
.ga-stat-n a {
	color: inherit !important;
	text-decoration: none !important;
}

.ga-stat-n a:hover {
	text-decoration: underline !important;
}

/* Percentage line (e.g. "0.04% e të gjithë artikujve") */
.ga-stat-pct {
	font-size: 11px;
	color: #2E8B57;
	font-family: sans-serif;
	font-weight: 500;
	letter-spacing: 0.02em;
	margin: 2px 0 1px;
	display: block;
}

/* Label below the number */
.ga-stat-l {
	font-size: 10.5px;
	color: #4a7a5a;
	margin-top: 3px;
	line-height: 1.4;
	font-family: sans-serif;
	letter-spacing: 0.03em;
}

/* ==================================================================
   4. HERO BODY
   ================================================================== */

/* Pale green content area below the stats bar */
.ga-hero-body {
	background: #f0faf4;
	padding: 1.4rem 2rem 1.6rem;
}

/* Main description paragraphs. Running text (the description, the criteria, the rules of the voting
   pages, the notes of the archives) is in the font of the skin and at its size: Georgia at 13 to 14px
   was hard to read. The titles and the labels keep Georgia. */
.ga-desc {
	line-height: 1.65;
	color: #0d3320;
	margin-bottom: 1.2rem;
}

.ga-desc a {
	color: #1a5c38;
	text-decoration: none;
	border-bottom: 1px solid #2E8B5760;
}

.ga-desc a:hover {
	border-bottom-color: #2E8B57;
}

/* Intro sentence above the transcluded kritere grid */
.ga-crit-intro {
	line-height: 1.65;
	color: #0d3320;
	margin-bottom: 0.85rem;
	padding-top: 1rem;
	border-top: 1px solid #b8ddc8;
}

/* ==================================================================
   5. KRITERE PAGE
   ================================================================== */

/* Outer wrapper on the standalone /Kritere page */
.ga-kritere-standalone {
	border: 1px solid #2E8B57;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 0;
}

/* Green header band with title and shortcut */
.ga-kritere-header {
	background: #e8f5ee;
	border-bottom: 1px solid #2E8B57;
	padding: 1.4rem 2rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.ga-kritere-title {
	font-size: 22px;
	font-weight: 400;
	color: #0d3320;
	font-family: Georgia, serif;
	line-height: 1.2;
	margin-bottom: 8px;
}

/* Intro sentence between header and grid (standalone page only) */
.ga-kritere-intro {
	background: #f0faf4;
	padding: 0.9rem 2rem;
	color: #0d3320;
	line-height: 1.65;
	border-bottom: 1px solid #b8ddc8;
}

/* 2×2 criteria grid — green gaps as dividers via background color */
.ga-kritere-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background: #b8ddc8;
	gap: 1px;
}

.ga-kritere-item {
	padding: 1.2rem 1.6rem;
	background: #f0faf4;
}

.ga-kritere-label {
	font-size: 12px;
	font-style: italic;
	font-weight: 600;
	color: #2E8B57;
	font-family: Georgia, serif;
	margin-bottom: 6px;
}

.ga-kritere-desc {
	color: #0d3320;
	line-height: 1.6;
}

.ga-kritere-desc a {
	text-decoration: none;
}

.ga-kritere-desc a:hover {
	text-decoration: underline;
}

/* Overrides when transcluded into the main page hero body —
   strip outer border, adjust colors to match hero-body background */
.ga-hero-body .ga-kritere-standalone {
	border: none;
	border-radius: 0;
	background: transparent;
}

.ga-hero-body .ga-kritere-grid {
	border: 1px solid #b8ddc8;
	border-radius: 3px;
	margin-top: 0.85rem;
	background: #b8ddc8;
}

.ga-hero-body .ga-kritere-item {
	background: #e8f5ee;
}

.ga-hero-body .ga-kritere-label {
	font-size: 14px;
}

.ga-hero-body .ga-kritere-desc {
	line-height: 1.6;
}

/* ==================================================================
   6. BODY & MOSAIC
   ================================================================== */

/* Light green body section — contains the article tile grid */
.ga-body {
	background: #e8f5ee;
	border: 1px solid #2E8B57;
	border-top: none;
	border-radius: 0 0 4px 4px;
	padding: 1.3rem 1.6rem;
}

/* Category legend pills — shown below the mosaic */
.ga-leg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px 4px 9px;
	border-radius: 2px;
	font-size: 12px;
	font-family: sans-serif;
	font-weight: 500;
	border: 1px solid transparent;
}

/* Colored dot before each legend label */
.ga-leg::before {
	content: '';
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Category color palette */
.ga-leg-art  { color: #5a0a2e; background: #fce8f0; border-color: #c0507a; }
.ga-leg-art::before  { background: #a0205a; }
.ga-leg-geo  { color: #003840; background: #d8f2f0; border-color: #30a098; }
.ga-leg-geo::before  { background: #0a7870; }
.ga-leg-his  { color: #3a1f00; background: #f2e8d8; border-color: #a07840; }
.ga-leg-his::before  { background: #7a5020; }
.ga-leg-bio  { color: #280850; background: #ece8f8; border-color: #8060c0; }
.ga-leg-bio::before  { background: #5030a0; }
.ga-leg-spo  { color: #0a3a00; background: #d8f0d0; border-color: #40a030; }
.ga-leg-spo::before  { background: #207010; }
.ga-leg-sci  { color: #002848; background: #d8eef8; border-color: #3080b8; }
.ga-leg-sci::before  { background: #1060a0; }

/* Auto-fill grid of article tiles */
.ga-mosaic {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
	gap: 8px;
}

.ga-mosaic a {
	text-decoration: none !important;
	display: block;
}

/* Individual article tile — left border color indicates category */
.ga-tile {
	background: #fff;
	border: 1px solid #ddd;
	border-left: 4px solid #2E8B57;
	border-radius: 0 3px 3px 0;
	padding: 9px 12px;
	display: block;
}

/* Tile hover — triggered via parent  since tiles are wikilinks */
.ga-mosaic a:hover .ga-tile,
.ga-mosaic a:focus .ga-tile { background: #e8f5ee; }

/* Category-colored left borders */
.ga-tile-art { border-left-color: #a0205a; }
.ga-tile-geo { border-left-color: #0a7870; }
.ga-tile-his { border-left-color: #7a5020; }
.ga-tile-bio { border-left-color: #5030a0; }
.ga-tile-spo { border-left-color: #207010; }
.ga-tile-sci { border-left-color: #1060a0; }

/* Small uppercase category label inside tile */
.ga-tile-cat {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: sans-serif;
	margin-bottom: 4px;
	font-weight: 600;
}

.ga-tile-art .ga-tile-cat { color: #a0205a; }
.ga-tile-geo .ga-tile-cat { color: #0a7870; }
.ga-tile-his .ga-tile-cat { color: #7a5020; }
.ga-tile-bio .ga-tile-cat { color: #5030a0; }
.ga-tile-spo .ga-tile-cat { color: #207010; }
.ga-tile-sci .ga-tile-cat { color: #1060a0; }

/* Article name inside tile */
.ga-tile-name {
	font-size: 13.5px;
	color: #0d3320;
	font-family: Georgia, serif;
	line-height: 1.35;
}

/* Hover state for tile text */
.ga-mosaic a:hover .ga-tile-name { color: #1a5c38; }

/* The subjects above the mosaic are switches. With a mouse, hovering one lights its articles (a tint and a
   thin border in its colour); clicking or tapping it keeps them lit and fades the others. The switches are
   focusable (tabindex) and the choice is their focus: no link, so the address does not change and
   nothing goes into the browser's history. A picked switch steps aside (it stays focused, but out
   of sight) for its twin that follows it, filled and with «×»; the twin cannot take the focus,
   so a click on it, or anywhere else on the page, drops the choice and all the articles are shown
   again. «Të gjitha» is filled while nothing is picked; it comes after the subjects in the page,
   so that a picked subject can reach it with «~», and first on the screen (order). */
.ga-filter {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ga-filter > .ga-mosaic {
	flex-basis: 100%;
	margin-top: 0.5rem;
}

.ga-filter > .ga-leg {
	cursor: pointer;
}

.ga-filter > .ga-leg-all {
	order: -1;
}

.ga-filter > .ga-leg:focus {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	opacity: 0;
}

.ga-filter > .ga-leg-off {
	display: none;
}

.ga-filter > .ga-leg:focus + .ga-leg-off {
	display: inline-flex;
}

.ga-leg-off::after {
	content: "×";
	font-weight: 400;
}

.ga-leg-all { color: #fff; background: #1f6b42; border-color: #1f6b42; }
.ga-leg-all::before { background: #fff; }
.ga-leg:focus ~ .ga-leg-all { color: #0d3320; background: #fff; border-color: #2E8B57; }
.ga-leg:focus ~ .ga-leg-all::before { background: #2E8B57; }

.ga-mosaic .ga-tile {
	transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.ga-leg-art:focus ~ .ga-mosaic .ga-tile-art { background: #fce8f0; border-color: #c0507a #c0507a #c0507a #a0205a; }
.ga-leg-art.ga-leg-off { color: #fff; background: #a0205a; border-color: #a0205a; }
.ga-leg-art.ga-leg-off::before { background: #fff; }

.ga-leg-geo:focus ~ .ga-mosaic .ga-tile-geo { background: #d8f2f0; border-color: #30a098 #30a098 #30a098 #0a7870; }
.ga-leg-geo.ga-leg-off { color: #fff; background: #0a7870; border-color: #0a7870; }
.ga-leg-geo.ga-leg-off::before { background: #fff; }

.ga-leg-his:focus ~ .ga-mosaic .ga-tile-his { background: #f2e8d8; border-color: #a07840 #a07840 #a07840 #7a5020; }
.ga-leg-his.ga-leg-off { color: #fff; background: #7a5020; border-color: #7a5020; }
.ga-leg-his.ga-leg-off::before { background: #fff; }

.ga-leg-bio:focus ~ .ga-mosaic .ga-tile-bio { background: #ece8f8; border-color: #8060c0 #8060c0 #8060c0 #5030a0; }
.ga-leg-bio.ga-leg-off { color: #fff; background: #5030a0; border-color: #5030a0; }
.ga-leg-bio.ga-leg-off::before { background: #fff; }

.ga-leg-spo:focus ~ .ga-mosaic .ga-tile-spo { background: #d8f0d0; border-color: #40a030 #40a030 #40a030 #207010; }
.ga-leg-spo.ga-leg-off { color: #fff; background: #207010; border-color: #207010; }
.ga-leg-spo.ga-leg-off::before { background: #fff; }

.ga-leg-sci:focus ~ .ga-mosaic .ga-tile-sci { background: #d8eef8; border-color: #3080b8 #3080b8 #3080b8 #1060a0; }
.ga-leg-sci.ga-leg-off { color: #fff; background: #1060a0; border-color: #1060a0; }
.ga-leg-sci.ga-leg-off::before { background: #fff; }

.ga-leg-art:focus ~ .ga-mosaic .ga-tile:not(.ga-tile-art),
.ga-leg-geo:focus ~ .ga-mosaic .ga-tile:not(.ga-tile-geo),
.ga-leg-his:focus ~ .ga-mosaic .ga-tile:not(.ga-tile-his),
.ga-leg-bio:focus ~ .ga-mosaic .ga-tile:not(.ga-tile-bio),
.ga-leg-spo:focus ~ .ga-mosaic .ga-tile:not(.ga-tile-spo),
.ga-leg-sci:focus ~ .ga-mosaic .ga-tile:not(.ga-tile-sci) {
	opacity: 0.3;
}

/* Hovering a subject lights its articles only with a mouse. Touch screens have no hovering, and a
tap would leave the tint behind: there the subjects only work as switches. */
@media (hover: hover) {
	.ga-leg-art:hover ~ .ga-mosaic .ga-tile-art { background: #fce8f0; border-color: #c0507a #c0507a #c0507a #a0205a; }
	.ga-leg-geo:hover ~ .ga-mosaic .ga-tile-geo { background: #d8f2f0; border-color: #30a098 #30a098 #30a098 #0a7870; }
	.ga-leg-his:hover ~ .ga-mosaic .ga-tile-his { background: #f2e8d8; border-color: #a07840 #a07840 #a07840 #7a5020; }
	.ga-leg-bio:hover ~ .ga-mosaic .ga-tile-bio { background: #ece8f8; border-color: #8060c0 #8060c0 #8060c0 #5030a0; }
	.ga-leg-spo:hover ~ .ga-mosaic .ga-tile-spo { background: #d8f0d0; border-color: #40a030 #40a030 #40a030 #207010; }
	.ga-leg-sci:hover ~ .ga-mosaic .ga-tile-sci { background: #d8eef8; border-color: #3080b8 #3080b8 #3080b8 #1060a0; }
}

/* ==================================================================
   7. DIVIDERS
   ================================================================== */

/* Horizontal rule with centered label — used between mosaic sections */
.ga-divider {
	margin: 1.5rem 0 1.2rem;
	display: flex;
	align-items: center;
	gap: 12px;
}

.ga-divider-label {
	font-size: 11px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #4a7a5a;
	font-family: sans-serif;
	white-space: nowrap;
}

.ga-divider-line {
	flex: 1;
	height: 1px;
	background: #b8ddc8;
}

/* «[redakto]» after the label of a list («Kandidatura», «Rivlerësime»), which replaces
   its old level-2 heading */
.ga-divider-edit {
	margin-left: 0.5em;
	letter-spacing: normal;
	text-transform: none;
}

/* ==================================================================
   8. VOTE PANELS
   ================================================================== */

/* Two-column grid of vote panels — used on /Votimet subpages */
.ga-vote-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* Individual vote panel card */
.ga-vote-panel {
	background: #fff;
	border: 1px solid #b8ddc8;
	border-top: 2px solid #2E8B57;
	border-radius: 0 0 3px 3px;
	padding: 1rem 1.2rem;
	display: flex;
	flex-direction: column;
}

/* Panel title with green top border */
.ga-vote-title {
	font-size: 14px;
	font-weight: 500;
	color: #0d3320;
	font-family: Georgia, serif;
	font-style: italic;
	margin-bottom: 0.8rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid #b8ddc8;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Green pill showing vote count */
.ga-vote-count {
	font-size: 10px;
	background: #2E8B57;
	color: #fff;
	border-radius: 999px;
	padding: 1px 7px;
	font-weight: 400;
	font-style: normal;
	font-family: sans-serif;
}

.ga-vote-body {
	color: #0d3320;
	line-height: 1.65;
	flex: 1;
}

.ga-vote-body a {
	color: #1a5c38;
	text-decoration: none;
	border-bottom: 1px solid #2E8B5760;
}

.ga-vote-body a:hover { border-bottom-color: #2E8B57; }

.ga-vote-body code {
	font-family: monospace;
	font-size: 12px;
	background: #e8f5ee;
	padding: 1px 5px;
	border-radius: 2px;
	color: #0d3320;
}

/* Sub-heading inside a vote panel */
.ga-vote-sh {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #2E8B57;
	font-family: sans-serif;
	margin: 0.9rem 0 0.5rem;
	padding-top: 0.8rem;
	border-top: 1px solid #b8ddc8;
	display: block;
}

/* Warning notice inside a vote panel */
.ga-vote-warn {
	font-size: 12px;
	font-family: sans-serif;
	color: #1a5c38;
	background: #e8f5ee;
	border: 1px solid #b8ddc8;
	border-left: 3px solid #2E8B57;
	border-radius: 0 3px 3px 0;
	padding: 6px 10px;
	margin-top: 0.6rem;
	display: block;
}

/* Archive link at bottom of each vote panel */
.ga-vote-archive {
	margin-top: 1rem;
	padding-top: 0.8rem;
	border-top: 1px solid #b8ddc8;
	font-size: 11.5px;
	color: #4a7a5a;
	font-family: sans-serif;
}

.ga-vote-archive a {
	color: #1a5c38 !important;
	text-decoration: none !important;
}

.ga-vote-archive a:hover { text-decoration: underline !important; }

/* ==================================================================
   9. VOTE FOOTER
   ================================================================== */

/* Slim footer bar on /Mbyllja pages — text left, cabinet icon right */
.ga-vote-archive-footer {
	margin-top: 2rem;
	padding: 10px 16px;
	border-top: 1px solid #2E8B5760;
	font-size: 13px;
	color: #4a7a5a;
	font-family: sans-serif;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.ga-vote-archive-footer a {
	color: #1a5c38 !important;
	text-decoration: none !important;
}

.ga-vote-archive-footer a:hover {
	text-decoration: underline !important;
}

/* ==================================================================
   10. VOTING INTRO
   ================================================================== */

/* Full-width intro card on /Kandidatura and /Rivlerësime pages */
.ga-voting-intro {
	border: 1px solid #2E8B57;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 1rem;
}

/* Header — title left, live count below, shortcut right */
.ga-voting-header {
	background: #e8f5ee;
	border-bottom: 2px solid #2E8B57;
	padding: 1.4rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* Text block inside voting header — grows to fill space beside shortcut */
.ga-voting-header-text {
	flex: 1;
}

/* "← Kthehu te …" link above the title of the subpages (voting pages and archives) */
.ga-back {
	font-size: 13px;
	font-family: Georgia, serif;
	font-style: italic;
	margin-bottom: 6px;
}

.ga-back a {
	color: #1a5c38 !important;
	text-decoration: none !important;
}

.ga-back a:hover {
	text-decoration: underline !important;
}

.ga-voting-title {
	font-size: 22px;
	font-weight: 400;
	color: #0d3320;
	font-family: Georgia, serif;
	line-height: 1.2;
}

/* Live count label (e.g. "1 kandidaturë e hapur aktualisht") */
.ga-voting-live {
	font-size: 11px;
	color: #2E8B57;
	font-family: sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 5px;
	font-weight: 600;
}

/* Two-column body — rules left, proposal form right */
.ga-voting-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #f0faf4;
}

/* Left column: voting rules as bordered items */
.ga-voting-rules {
	padding: 1.4rem 1.8rem;
	border-right: 1px solid #b8ddc8;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ga-voting-rule {
	color: #0d3320;
	line-height: 1.65;
	padding-left: 12px;
}

.ga-voting-rule a,
.ga-voting-propose-body a {
	color: #1a5c38;
	text-decoration: none;
	border-bottom: 1px solid #2E8B5760;
}

.ga-voting-rule a:hover,
.ga-voting-propose-body a:hover {
	border-bottom-color: #2E8B57;
}

/* Right column: proposal form */
.ga-voting-propose {
	padding: 1.4rem 1.8rem;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ga-voting-propose-title {
	font-size: 12px;
	font-weight: 700;
	color: #2E8B57;
	font-family: sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-bottom: 8px;
	border-bottom: 1px solid #b8ddc8;
}

.ga-voting-propose-body {
	color: #0d3320;
	line-height: 1.65;
}

.ga-voting-propose-body code {
	font-family: monospace;
	font-size: 12px;
	background: #e8f5ee;
	padding: 1px 5px;
	border-radius: 2px;
	color: #0d3320;
}

.ga-voting-propose-form {
	margin-top: 4px;
}

.ga-voting-propose-form input[type="text"] {
	font-size: 13px;
	padding: 5px 10px;
	border: 1px solid #2E8B5780;
	border-radius: 2px;
	background: #fff;
	color: #0d3320;
}

.ga-voting-propose-form .mw-inputbox-createbox[size] {
	width: 100% !important;
	box-sizing: border-box !important;
}

.ga-voting-propose-form input[type="submit"] {
	font-size: 13px;
	padding: 5px 14px;
	background: #2E8B57;
	color: #fff;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	font-family: sans-serif;
	font-weight: 500;
	margin-left: 6px;
}

.ga-voting-propose-form input[type="submit"]:hover {
	background: #1a5c38;
}

/* ==================================================================
   11. ARCHIVE TABLE
   ================================================================== */

/* Styled table for kandidatura/rivlerësime archive listings */
.ga-archive-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	font-family: sans-serif;
	margin-top: 1.2rem;
	border: 1px solid #8cc4a8;
	border-radius: 3px;
	overflow: hidden;
}

.ga-archive-table th {
	background: #c8e6d4;
	color: #0d3320;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 8px 12px;
	border-bottom: 2px solid #2E8B57;
	border-right: 1px solid #8cc4a8;
	text-align: left;
	font-weight: 600;
}

/* Narrow numbered column */
.ga-archive-table th.ga-at-n {
	width: 40px;
	text-align: center;
}

.ga-archive-table th:last-child {
	border-right: none;
}

.ga-archive-table td {
	padding: 7px 12px;
	border-bottom: 1px solid #d8ede2;
	border-right: 1px solid #d8ede2;
	color: #0d3320;
	vertical-align: middle;
}

.ga-archive-table td:last-child {
	border-right: none;
}

/* Row number column */
.ga-archive-table td:first-child {
	text-align: center;
	color: #4a7a5a;
	font-size: 11px;
}

/* Alternating row backgrounds */
.ga-archive-table tr:nth-child(even) td { background: #f0faf4; }
.ga-archive-table tr:nth-child(odd) td  { background: #f8fcfa; }
.ga-archive-table tr:hover td           { background: #d8ede2; }

.ga-archive-table td a {
	color: #1a5c38 !important;
	text-decoration: none !important;
}

.ga-archive-table td a:hover {
	text-decoration: underline !important;
	color: #2E8B57 !important;
}

/* Text classes for approved/rejected outcome */
.ga-at-approved { color: #1a6a20; font-weight: 500; }
.ga-at-rejected  { color: #8a2020; font-weight: 500; }

/* The status of an article today («Statusi»), in plain words like the «po» and «jo» of the
 archives of Administrata: still good in the colour of the text, no longer in grey */
.ga-at-status {
	white-space: nowrap;
}

.ga-at-yes { color: var(--color-base, #202122); }
.ga-at-no { color: var(--color-subtle, #54595d); }

/* ==================================================================
   12. ARCHIVE PAGE
   ================================================================== */

/* Main archive hub page (/Arkivi) */
.ga-archive-page {
	border: 1px solid #2E8B57;
	border-radius: 4px;
	overflow: hidden;
}

.ga-archive-header {
	background: #e8f5ee;
	border-bottom: 2px solid #2E8B57;
	padding: 1.6rem 2rem;
	display: flex;
	align-items: center;
	gap: 20px;
}

.ga-archive-icon img {
	display: block;
}

/* Text block inside archive header — grows to fill space beside the icon */
.ga-archive-header-text {
	flex: 1;
}

.ga-archive-title {
	font-size: 22px;
	font-weight: 400;
	color: #0d3320;
	font-family: Georgia, serif;
	line-height: 1.2;
}

.ga-archive-sub {
	font-size: 11px;
	color: #4a7a5a;
	margin-top: 5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: sans-serif;
}

/* The legend under the table of an archive, drawn as the header of the page, as its footer: the
 same band, with its line on top, and the meaning of each column */
.ga-archive-foot {
	margin-top: 1rem;
}

.ga-archive-foot .ga-archive-header {
	align-items: flex-start;
	padding: 1.2rem 2rem;
	border-top: 2px solid #2E8B57;
	border-bottom: none;
}

.ga-archive-foot .ga-archive-title {
	margin-bottom: 8px;
	font-size: 18px;
}

.ga-archive-foot .archive-legend-items {
	color: #2a4a38;
	font-size: 13px;
	line-height: 1.6;
}

.ga-archive-foot b {
	color: #0d3320;
}

.ga-archive-foot a {
	color: #1a5c38;
}

/* Two-column link cards — Kandidaturat / Rivlerësimet */
.ga-archive-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background: #f0faf4;
	border-bottom: 1px solid #b8ddc8;
}

.ga-archive-link-card {
	padding: 1.4rem 1.8rem;
	border-right: 1px solid #b8ddc8;
}

.ga-archive-link-card:last-child {
	border-right: none;
}

.ga-archive-link-label {
	font-size: 13px;
	font-weight: 600;
	color: #2E8B57;
	font-family: sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.ga-archive-link-desc {
	color: #0d3320;
	line-height: 1.6;
	margin-bottom: 10px;
}

.ga-archive-link-card a {
	color: #1a5c38 !important;
	font-family: sans-serif;
	font-size: 13px;
	text-decoration: none !important;
	border-bottom: 1px solid #2E8B5760;
}

.ga-archive-link-card a:hover {
	border-bottom-color: #2E8B57;
}

/* Full-width search bar at bottom of archive page */
.ga-archive-search-section {
	background: #e8f5ee;
	padding: 1.4rem 2rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.ga-archive-search-label {
	font-size: 13px;
	font-weight: 500;
	color: #4a7a5a;
	font-family: sans-serif;
	white-space: nowrap;
}

.ga-archive-search-section form {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 1;
	min-width: 0;
}

.ga-archive-search-section input[type="text"] {
	font-size: 13px;
	padding: 5px 10px;
	border: 1px solid #2E8B5780;
	border-radius: 2px;
	background: #fff;
	color: #0d3320;
	flex: 1;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.ga-archive-search-section .mw-inputbox-input[size] {
	width: 100% !important;
	box-sizing: border-box !important;
}

.ga-archive-search-section input[type="submit"] {
	font-size: 13px;
	padding: 5px 16px;
	background: #2E8B57;
	color: #fff;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	font-family: sans-serif;
	font-weight: 500;
	white-space: nowrap;
}

.ga-archive-search-section input[type="submit"]:hover {
	background: #1a5c38;
}

/* ==================================================================
   13. VOTIMET AGGREGATOR
   ================================================================== */

/* Two-column widget transcluded at the bottom of the main page —
   pulls live voting content from /Kandidatura and /Rivlerësime */
.ga-votimet {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}

.ga-votimet-col {
	border: 1px solid #2E8B57;
	border-radius: 4px;
	overflow: hidden;
}

/* Column header — links to the full voting page */
.ga-votimet-header {
	background: #e8f5ee;
	border-bottom: 1px solid #2E8B57;
	padding: 0.8rem 1.2rem;
	font-size: 13px;
	font-family: sans-serif;
	font-weight: 600;
	color: #0d3320;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ga-votimet-header a {
	color: #0d3320 !important;
	text-decoration: none !important;
}

.ga-votimet-header a:hover {
	color: #2E8B57 !important;
}

/* Live count pill — hidden when zero via {{#if:}} */
.ga-votimet-count {
	display: inline-block;
	background: #2E8B57;
	color: #fff;
	font-size: 10px;
	font-family: sans-serif;
	font-weight: 500;
	border-radius: 999px;
	padding: 1px 7px;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Column content area — transcluded voting content renders here */
.ga-votimet-body {
	background: #f0faf4;
	padding: 0.8rem 1.2rem;
	min-height: 60px;
}

/* Shown when no nominations/reassessments are active */
.ga-votimet-empty {
	font-size: 13px;
	color: #4a7a5a;
	font-family: Georgia, serif;
	font-style: italic;
	padding: 0.4rem 0;
}

/* ==================================================================
   14. RESPONSIVE
   ================================================================== */

@media (max-width: 720px) {
	/* Hero band — stack vertically, tighter padding */
	.ga-hero-band {
		padding: 1rem 1rem 0;
		gap: 0;
		flex-direction: column;
		align-items: stretch;
	}

	/* Left: medallion + title side by side, unchanged */
	.ga-hero-left {
		padding-bottom: 1rem;
	}

	/* Right: the archive box, the full width */
	.ga-hero-right {
		display: block;
		width: 100%;
		border-top: 1px solid #b8ddc8;
		padding: 1rem 0;
	}

	/* Archive box fills the left column */
	.ga-archive-box {
		min-width: 0;
		text-align: left;
	}

	.ga-archive-box-title {
		justify-content: flex-start;
	}

	.ga-archive-box-links {
		white-space: normal;
	}

	/* Inputbox containment */
	.ga-archive-search { overflow: hidden; }
	.ga-archive-search .mw-inputbox-centered,
	.ga-archive-search table {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		table-layout: fixed !important;
		margin: 0 !important;
	}
	.ga-archive-search table td { padding: 0 !important; vertical-align: middle; }
	.ga-archive-search table td:last-child { width: 60px !important; padding-left: 6px !important; }
	.ga-archive-search input[type="text"] { width: 100% !important; box-sizing: border-box !important; padding: 6px 8px; }
	.ga-archive-search input[type="submit"] { width: 100% !important; padding: 6px 4px; }
	.ga-hero-body { padding: 1.1rem 1.2rem 1.3rem; }

	/* Body */
	.ga-body { padding: 1rem 1.1rem; }
	.ga-mosaic { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

	/* Subjects: smaller switches on mobile */
	.ga-leg { font-size: 11px; padding: 3px 9px 3px 7px; }

	/* Vote panels */
	.ga-vote-grid { grid-template-columns: 1fr; }

	/* Voting intro */
	.ga-voting-intro { overflow: visible; }
	.ga-voting-header { padding: 1rem 1.2rem; }
	.ga-voting-body { grid-template-columns: 1fr; }
	.ga-voting-rules { border-right: none; border-bottom: 1px solid #b8ddc8; }
	.ga-voting-propose { padding: 1rem 1.2rem; overflow: hidden; }
	.ga-voting-propose-form { display: block; overflow: hidden; }
	.ga-voting-propose-form input[type="text"] { width: 100% !important; box-sizing: border-box !important; padding: 8px 10px; font-size: 14px; }
	.ga-voting-propose-form input[type="submit"] { width: 100% !important; padding: 8px 4px; font-size: 13px; margin-left: 0; }
	.ga-voting-propose-form .mw-inputbox-centered,
	.ga-voting-propose-form table { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; table-layout: fixed !important; margin: 0 !important; }
	.ga-voting-propose-form table td { padding: 0 !important; vertical-align: middle; }
	.ga-voting-propose-form table td:last-child { width: 90px !important; padding-left: 8px !important; }

	/* Kritere grid */
	.ga-kritere-grid { grid-template-columns: 1fr 1fr; }

	/* Archive page */
	.ga-archive-links { grid-template-columns: 1fr; }
	.ga-archive-link-card { border-right: none; border-bottom: 1px solid #b8ddc8; padding: 1rem 1.2rem; }
	.ga-archive-header { padding: 1.2rem; }
	.ga-archive-search-section {
		padding: 1rem 1.2rem;
		display: block;
		overflow: hidden;
	}
	.ga-archive-search-label {
		display: block;
		margin-bottom: 8px;
	}
	.ga-archive-search-section form,
	.ga-archive-search-section .mw-inputbox-centered,
	.ga-archive-search-section table {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		table-layout: fixed !important;
		margin: 0 !important;
	}
	.ga-archive-search-section table td {
		padding: 0 !important;
		vertical-align: middle;
	}
	.ga-archive-search-section table td:last-child {
		width: 80px !important;
		padding-left: 8px !important;
	}
	.ga-archive-search-section input[type="text"] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding: 8px 10px;
		font-size: 14px;
	}
	.ga-archive-search-section input[type="submit"] {
		width: 100% !important;
		padding: 8px 4px;
		font-size: 13px;
	}

	/* Votimet */
	.ga-votimet { grid-template-columns: 1fr; }

	/* Archive table — enable horizontal scroll on mid-width */
	.ga-archive-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

}

@media (max-width: 480px) {
	/* Kritere grid collapses to single column */
	.ga-kritere-grid { grid-template-columns: 1fr; }
	.ga-kritere-item { border-right: none !important; border-bottom: 1px solid #b8ddc8 !important; }
	.ga-kritere-item:last-child { border-bottom: none !important; }

	/* Stats bar wraps to 2 columns */
	.ga-stat { flex: 1 1 50%; }

	/* Archive table — collapse to stacked cards */
	.ga-archive-table,
	.ga-archive-table thead,
	.ga-archive-table tbody,
	.ga-archive-table tr,
	.ga-archive-table th,
	.ga-archive-table td {
		display: block;
		white-space: normal;
		overflow-x: visible;
	}

	.ga-archive-table thead {
		display: none;
	}

	.ga-archive-table tr {
		border: 1px solid #8cc4a8;
		border-left: 4px solid #2E8B57;
		border-radius: 0 3px 3px 0;
		margin-bottom: 8px;
		background: #f8fcfa !important;
	}

	/* Remove alternating row backgrounds — card layout handles its own bg */
	.ga-archive-table tr:nth-child(even) td,
	.ga-archive-table tr:nth-child(odd) td,
	.ga-archive-table tr:hover td {
		background: transparent !important;
	}

	.ga-archive-table td {
		border-right: none;
		border-bottom: none;
		padding: 3px 10px;
		text-align: left !important;
	}

	/* Row number — small and muted, sits above the article name */
	.ga-archive-table td:first-child {
		font-size: 10px;
		color: #4a7a5a;
		padding-top: 8px;
		padding-bottom: 1px;
	}

	/* Article name — larger serif, prominent */
	.ga-archive-table td:nth-child(2) {
		font-size: 13px;
		font-family: Georgia, serif;
		font-weight: 500;
		padding-bottom: 5px;
		border-bottom: 1px solid #d8ede2;
	}

	/* Dates and metadata rows — labelled via ::before */
	.ga-archive-table td:nth-child(3)::before { content: "Hapja: "; }
	.ga-archive-table td:nth-child(4)::before { content: "Mbyllja: "; }
	.ga-archive-table td:nth-child(5)::before { content: "Përfundimi: "; }
	.ga-archive-table td:nth-child(6)::before { content: "Propozuesi: "; }

	.ga-archive-table td:nth-child(3)::before,
	.ga-archive-table td:nth-child(4)::before,
	.ga-archive-table td:nth-child(5)::before,
	.ga-archive-table td:nth-child(6)::before {
		color: #4a7a5a;
		font-size: 10px;
		font-family: sans-serif;
	}

	.ga-archive-table td:nth-child(3),
	.ga-archive-table td:nth-child(4),
	.ga-archive-table td:nth-child(5),
	.ga-archive-table td:nth-child(6) {
		font-size: 11px;
		color: #0d3320;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	/* Status column — last row, add bottom padding to close the card */
	.ga-archive-table td:last-child {
		padding-bottom: 8px;
	}
}

/* ================================================
   CANDIDACIES AND RE-EVALUATIONS
   ================================================ */
/* Every candidacy, with its votes and discussion, as a card. The candidacies come from their own
   pages, so the page view wraps each of them in 
; the sections inside (Votimi, Diskutimi…) stay plain. Nothing changes in the candidacies themselves. An open candidacy has the blue accent of the threads of Kuvendi, the Zyra e Ankesave and Pyetje e Përgjigje. (z-index: the card keeps the colour of a closing, drawn behind its text, inside it.) */ section[data-mw-section-id="-1"] { position: relative; z-index: 0; margin: 1.25rem 0; padding: 0 1rem 0.6rem; border: 1px solid var(--border-color-subtle, #c8ccd1); border-left: 4px solid var(--border-color-progressive, #36c); border-radius: 4px; background-color: var(--background-color-base, #fff); } section[data-mw-section-id="-1"] > .mw-heading2 { margin: 0 -1rem 0.75rem; padding: 0.6rem 1rem 0.4rem; border-bottom: 1px solid var(--border-color-subtle, #c8ccd1); border-top-right-radius: 3px; background-color: var(--background-color-neutral-subtle, #f8f9fa); } section[data-mw-section-id="-1"] > .mw-heading2 h2 { margin: 0; padding: 0; border-bottom: none; } section[data-mw-section-id="-1"] section[data-mw-section-id="-1"] { position: static; z-index: auto; margin: 0; padding: 0; border: none; border-radius: 0; background: none; } /* A closed candidacy ({{dmb|…}} under its title, {{Resolved}}/{{Refused}}, or the old pair {{dmb|1|…}} … {{dmb|2}}): the closing colours the card green, red or grey, its accent and, lightly, its background, as the old box did, but without a box inside the card. Both are drawn by the closing itself (::before, ::after), placed over the whole card. A vote closed before the conditions of its procedure were met is amber, whatever its decision. */ section[data-mw-section-id="-1"] .dmb-green::before, section[data-mw-section-id="-1"] .dmb-red::before, section[data-mw-section-id="-1"] .dmb-grey::before, section[data-mw-section-id="-1"] .dmb-amber::before { content: ''; position: absolute; top: -1px; bottom: -1px; left: -4px; width: 4px; border-radius: 4px 0 0 4px; background-color: var(--color-success, #14866d); } section[data-mw-section-id="-1"] .dmb-red::before { background-color: var(--color-error, #d73333); } section[data-mw-section-id="-1"] .dmb-grey::before { background-color: var(--border-color-base, #a2a9b1); } section[data-mw-section-id="-1"] .dmb-amber::before { background-color: var(--border-color-warning, #ab7f2a); } section[data-mw-section-id="-1"] .dmb-green::after, section[data-mw-section-id="-1"] .dmb-red::after, section[data-mw-section-id="-1"] .dmb-grey::after, section[data-mw-section-id="-1"] .dmb-amber::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: 0 3px 3px 0; background-color: var(--background-color-success-subtle, #f5fff5); } section[data-mw-section-id="-1"] .dmb-red::after { background-color: var(--background-color-error-subtle, #fff5f5); } section[data-mw-section-id="-1"] .dmb-grey::after { background-color: var(--background-color-neutral-subtle, #f8f9fa); } section[data-mw-section-id="-1"] .dmb-amber::after { background-color: var(--background-color-warning-subtle, #fdf2d5); } /* The old pair's box is dropped inside a card (no box inside the box); its message, and the banner of a vote closed with one call, become a plain line under the title, flush with the text (no box, no padding), like {{Resolved}} */ section[data-mw-section-id="-1"] .dmb-box { margin: 0; padding: 0; border: none; background: none; } section[data-mw-section-id="-1"] .dmb-box .dmb-msg, section[data-mw-section-id="-1"] .dmb-banner:not(.dmb-soft) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0.2em 0 0.6em; padding: 0; border: 0; border-radius: 0; background: none; font-style: normal; font-size: 1em; line-height: 1.6; } /* Replies: a little air above each indented reply, so that every comment stands apart */ section[data-mw-section-id="-1"] dl dd { margin-top: 0.4em; } /* The tally of the votes, at the top of the first section inside («Votimi»): under its title and above the votes. The votes are counted from the icons of {{PËR}}, {{KUNDËR}} and {{ASNJANËS}} on the lines of the list, also on the indented ones; a struck vote (…, a vote that was changed or withdrawn) does not count. The note that explains how to vote is a paragraph, so it does not count either. */ section[data-mw-section-id="-1"] > section[data-mw-section-id="-1"]:first-of-type, section[data-mw-section-id="-1"] > .dmb-box > section[data-mw-section-id="-1"]:first-of-type { display: flex; flex-direction: column; counter-reset: v-per v-kunder v-asnjanes; } section[data-mw-section-id="-1"] > section[data-mw-section-id="-1"]:first-of-type > .mw-heading, section[data-mw-section-id="-1"] > .dmb-box > section[data-mw-section-id="-1"]:first-of-type > .mw-heading { order: -2; } section[data-mw-section-id="-1"] > section[data-mw-section-id="-1"]:first-of-type li img[src*="Symbol_support_vote"], section[data-mw-section-id="-1"] > .dmb-box > section[data-mw-section-id="-1"]:first-of-type li img[src*="Symbol_support_vote"] { counter-increment: v-per; } section[data-mw-section-id="-1"] > section[data-mw-section-id="-1"]:first-of-type li img[src*="Symbol_oppose_vote"], section[data-mw-section-id="-1"] > .dmb-box > section[data-mw-section-id="-1"]:first-of-type li img[src*="Symbol_oppose_vote"] { counter-increment: v-kunder; } section[data-mw-section-id="-1"] > section[data-mw-section-id="-1"]:first-of-type li img[src*="Symbol_neutral_vote"], section[data-mw-section-id="-1"] > .dmb-box > section[data-mw-section-id="-1"]:first-of-type li img[src*="Symbol_neutral_vote"] { counter-increment: v-asnjanes; } section[data-mw-section-id="-1"] > section[data-mw-section-id="-1"]:first-of-type li s img[src], section[data-mw-section-id="-1"] > .dmb-box > section[data-mw-section-id="-1"]:first-of-type li s img[src], section[data-mw-section-id="-1"] > section[data-mw-section-id="-1"]:first-of-type li del img[src], section[data-mw-section-id="-1"] > .dmb-box > section[data-mw-section-id="-1"]:first-of-type li del img[src], section[data-mw-section-id="-1"] > section[data-mw-section-id="-1"]:first-of-type li strike img[src], section[data-mw-section-id="-1"] > .dmb-box > section[data-mw-section-id="-1"]:first-of-type li strike img[src] { counter-increment: none; } section[data-mw-section-id="-1"] > section[data-mw-section-id="-1"]:first-of-type::after, section[data-mw-section-id="-1"] > .dmb-box > section[data-mw-section-id="-1"]:first-of-type::after { content: "Votat: " counter(v-per) " PËR · " counter(v-kunder) " KUNDËR · " counter(v-asnjanes) " ASNJANËS"; order: -1; align-self: flex-start; margin: 0 0 0.4em; color: var(--color-subtle, #54595d); font-size: 0.95em; }