/* ============================================================
   Banner über dem Inhalt
   ------------------------------------------------------------
   Das Banner ist ein .md-notice. Die Stufe steht allein im
   Strich links und in der Farbe der Beschriftung, nie im Kasten.
   ============================================================ */
.md-notice.postreminder-banner--nudge { border-left-color: var(--md-ink); }
.md-notice.postreminder-banner--nudge .md-notice__kind { color: var(--md-ink); }
.md-notice.postreminder-banner--warn { border-left-color: var(--md-accent-soft); }
.md-notice.postreminder-banner--warn .md-notice__kind { color: var(--md-accent-soft); }
.md-notice.postreminder-banner--report { border-left-color: var(--md-accent); }
.md-notice.postreminder-banner--report .md-notice__kind { color: var(--md-accent); }

/* Die Stufe steht als Wort hinter dem Text; heller heisst dringender. */
.postreminder-banner__stage--warn { color: var(--md-ink-dim); }
.postreminder-banner__stage--report { color: var(--md-ink); }

/* ============================================================
   Hinweise in der Benachrichtigungsliste
   ------------------------------------------------------------
   Der Text steht im Link der Zeile; hier färbt nur die Stufe.
   ============================================================ */
.postreminder-alert { color: inherit; }
.postreminder-alert--warn { color: var(--md-ink); }

/* ============================================================
   Übersichten — Team-Report und eigene Liste
   ============================================================ */
.postreminder-report__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1.4rem;
	margin: 1rem 0 0;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.postreminder-report__total { font-variant-numeric: tabular-nums; }
.postreminder-report__all-link {
	color: var(--md-ink-dim);
	transition: color var(--md-dur) var(--md-ease);
}
.postreminder-report__all-link::after { content: " \2192"; color: var(--md-accent-soft); }
.postreminder-report__all-link:hover { color: var(--md-ink); }

/* Die Tabelle darf auf schmalen Schirmen schieben, die Seite nicht. */
.postreminder-report__wrap { overflow-x: auto; }

.postreminder-report__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: auto;
}

.postreminder-report__th {
	padding: 0 1rem .7rem 0;
	border-bottom: 1px solid var(--md-rule-soft);
	background: none;
	font-size: var(--md-t-kicker);
	font-weight: 400;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	color: var(--md-ink-faint);
}
.postreminder-report__th a {
	color: inherit;
	transition: color var(--md-dur) var(--md-ease);
}
.postreminder-report__th a:hover { color: var(--md-ink); }
.postreminder-report__th:last-child { padding-right: 0; }

.postreminder-report__row td {
	padding: .9rem 1rem .9rem 0;
	border-bottom: 1px solid var(--md-rule-hair);
	background: none;
	font-size: var(--md-t-micro);
	line-height: 1.7;
	vertical-align: top;
	color: var(--md-ink-dim);
}
.postreminder-report__row td:last-child { padding-right: 0; }
.postreminder-report__row:last-child td { border-bottom: 0; }

.postreminder-report__row--empty td {
	padding: 2rem 0;
	border-bottom: 0;
	text-align: center;
	color: var(--md-ink-faint);
}

/* Der Szenentitel führt die Zeile, bleibt aber in ihrer Schrift und Größe;
   er hebt sich nur über die Helligkeit ab. */
.postreminder-report__scene a {
	font-size: var(--md-t-micro);
	color: var(--md-ink-bright);
	transition: color var(--md-dur) var(--md-ease);
}
.postreminder-report__scene a:hover { color: var(--md-accent-soft); }

.postreminder-report__forum,
.postreminder-report__participants { color: var(--md-ink-faint); }

.postreminder-report__due { white-space: nowrap; }
.postreminder-report__days {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--md-ink);
}
.postreminder-report__stage {
	white-space: nowrap;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

/* Kritisch und abwesend sind Zustände — sie tragen Helligkeit,
   nur die Tageszahl darf den Akzent nehmen. */
.postreminder-report__row--critical td { color: var(--md-ink); }
.postreminder-report__row--critical .postreminder-report__days { color: var(--md-accent); }
.postreminder-report__row--away td { color: var(--md-ink-faint); }

.postreminder-report__away-note {
	display: block;
	margin-top: .15rem;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

/* Der Plot steht als Zeile mit Unterzeile da, nicht als Farbfleck. */
.postreminder-report__plot-badge { display: block; min-width: 9rem; }
.postreminder-report__plot-badge a {
	color: var(--md-ink-dim);
	transition: color var(--md-dur) var(--md-ease);
}
.postreminder-report__plot-badge a:hover { color: var(--md-ink); }
.postreminder-report__plot-type,
.postreminder-report__plot-more {
	display: block;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.postreminder-report__plot-placeholder { font-style: italic; color: var(--md-ink-faint); }

.postreminder-report__pagination { margin-top: 1.6rem; }
.postreminder-report__pagination:empty { display: none; }

/* ============================================================
   Schmale Schirme — die Tabelle wird zur Liste
   ============================================================ */
@media (max-width: 760px) {
	.postreminder-report__table thead { display: none; }
	.postreminder-report__table,
	.postreminder-report__table tbody,
	.postreminder-report__row,
	.postreminder-report__row td { display: block; width: 100%; }
	.postreminder-report__row {
		padding: 1rem 0;
		border-bottom: 1px solid var(--md-rule-hair);
	}
	.postreminder-report__row td { padding: .15rem 0; border-bottom: 0; }
	.postreminder-report__row--empty td { padding: 1.5rem 0; }
}