/*
 * TopLife Group: the owner's screen.
 *
 * ITS OWN IDENTITY, DELIBERATELY
 * ------------------------------
 * The lodge is teal, the hostel is indigo-slate, and this is neither: a deep
 * green-black with a brass accent. A manager who has three systems open needs
 * to know which one they are typing into from the corner of their eye, before
 * reading a single word.
 *
 * It also loads on its own. The group page previously loaded no stylesheet at
 * all -- neither pms.css nor hostel.css is enqueued on its screen -- so its
 * cards were unstyled divs. Nothing errored; it simply rendered as plain text.
 *
 * NO CLASS HERE IS SHARED WITH EITHER BUSINESS. A rule copied from pms.css into
 * this file would be two copies of one rule waiting to disagree, which is the
 * fault stylesheet-scope-check.py exists to catch.
 */

/*
 * THE GROUP HAD NO SCALES AT ALL.
 *
 * This block was a flat list of eighteen colours. Every size, space, corner and
 * shadow on the group's screens was a number typed at the point of use — 10px
 * here, 16px there, 22px for a heading — so there was nothing to be consistent
 * WITH, and no way to change the group's density without reading eight hundred
 * lines looking for numbers.
 *
 * It now inherits the platform's scales from toplife.css like the other two,
 * and what remains here is the group's identity: a deep green-black with a
 * brass accent, which is neither the lodge's teal nor the hostel's indigo,
 * because a manager with three systems open needs to know which one they are
 * typing into before reading a word.
 *
 * The literal pixel values further down this file have not been rewritten. They
 * are correct today and rewriting eight hundred lines to reach the same
 * appearance is a large change with a lot of surface and nothing a person could
 * see. What has changed is that anything added from here on has a scale to use.
 */
.lsgroup {
	/* -- Identity ---------------------------------------------------------- */
	--lsgroup-brand: #123b2c;
	--lsgroup-brand-soft: #e7efe9;
	--lsgroup-accent: #8a6a1f;

	/*
	 * The two businesses, as seen from above. These are the only place in the
	 * platform where one system names another's colour, and they earn it: on a
	 * comparison screen the reader has to be able to tell which bar is the lodge
	 * without reading the label under it.
	 */
	--lsgroup-lodge: #1d6f63;
	--lsgroup-hostel: #4a4f8a;

	/*
	 * Published as --tl-primary-* so the shared rules in toplife.css — the focus
	 * ring above all — come out in the group's green rather than the lodge's
	 * teal.
	 */
	--tl-primary-50:  var(--lsgroup-brand-soft);
	--tl-primary-500: var(--lsgroup-brand);
	--tl-primary-700: var(--lsgroup-brand);

	/*
	 * -- Aliases onto the platform ------------------------------------------
	 *
	 * The group's ink and rules were a green-tinted near-black and a green-grey
	 * line, a shade off the platform's neutrals. Two decisions where there
	 * should have been one, and the difference was never visible on screen.
	 */
	--lsgroup-ink:          var(--tl-neutral-800);
	--lsgroup-ink-soft:     var(--tl-neutral-500);
	--lsgroup-line:         var(--tl-border);
	--lsgroup-surface:      var(--tl-surface);
	--lsgroup-surface-sunk: var(--tl-surface-2);

	--lsgroup-good:         var(--tl-success-500);
	--lsgroup-good-soft:    var(--tl-success-50);
	--lsgroup-warning:      var(--tl-warning-500);
	--lsgroup-warning-soft: var(--tl-warning-50);
	--lsgroup-urgent:       var(--tl-danger-500);
	--lsgroup-urgent-soft:  var(--tl-danger-50);
	--lsgroup-info:         var(--tl-info-500);
	--lsgroup-info-soft:    var(--tl-info-50);

	color: var(--lsgroup-ink);
	max-width: var(--tl-measure);
}

.lsgroup h2,
.lsgroup h3 {
	color: var(--lsgroup-ink);
}

/* ------------------------------------------------------------- the masthead */

.lsgroup-masthead {
	background: var(--lsgroup-brand);
	border-radius: 10px;
	color: #f4f8f5;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	justify-content: space-between;
	margin: 16px 0 20px;
	padding: 20px 22px;
}

.lsgroup-masthead__identity {
	min-width: 240px;
}

/*
 * This became an <h1> when the group screen turned out not to have one at all.
 * The masthead lives inside `.wrap`, and wp-admin styles `.wrap h1` with its
 * own size, weight, line-height and 9px of top padding — a rule of higher
 * specificity than a single class — so promoting the element without saying so
 * here would have pushed the whole masthead down and repainted the brand in
 * core's type. Everything core sets is therefore restated, and the heading
 * looks exactly as the paragraph did.
 */
.lsgroup-masthead__name,
.wrap .lsgroup-masthead__name {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	margin: 0;
	padding: 0;
	color: inherit;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--tl-space-2, 8px);
}

/*
 * Which of the three group screens this is, inside the heading rather than
 * beside it, so a listener gets "TopLife Group, Report archive" in one stop
 * instead of a brand name that is identical on all three.
 */
.lsgroup-masthead__view {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #c3d6cb;
}

.lsgroup-masthead__tag {
	color: #c3d6cb;
	font-size: 13px;
	margin: 2px 0 0;
}

.lsgroup-masthead__greeting {
	color: #e8f1ea;
	font-size: 15px;
	margin: 10px 0 0;
}

.lsgroup-masthead__meta {
	min-width: 220px;
	text-align: right;
}

.lsgroup-masthead__when {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	justify-content: flex-end;
	margin: 0 0 4px;
}

.lsgroup-masthead__date {
	color: #dbe8df;
	font-size: 13px;
}

.lsgroup-masthead__clock {
	font-size: 20px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.lsgroup-masthead__zone,
.lsgroup-masthead__zonenote,
.lsgroup-masthead__user {
	color: #b9cec2;
	display: block;
	font-size: 12px;
	margin: 0;
}

.lsgroup-masthead__zonenote {
	margin-top: 6px;
	max-width: 34em;
}

.lsgroup-masthead__alerts {
	margin: 8px 0 0;
}

.lsgroup-masthead__alerts a {
	color: #f0dfae;
	font-size: 13px;
	text-decoration: underline;
}

.lsgroup-masthead__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * The business switcher. Drawn by the portal so the three systems cannot
 * disagree about which businesses exist or where signing out goes, and wearing
 * this screen's class names so this screen's stylesheet is the one that styles
 * it.
 */
.lsgroup-switch {
	display: block;
}

.lsgroup-switch__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lsgroup-switch__item {
	margin: 0;
}

.lsgroup-switch__link {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	color: #f0f6f2;
	display: inline-block;
	font-size: 13px;
	padding: 5px 13px;
	text-decoration: none;
}

.lsgroup-switch__link:hover,
.lsgroup-switch__link:focus {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.lsgroup-switch__link.is-current {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--lsgroup-brand);
	font-weight: 600;
}

.lsgroup-switch__link--out {
	background: transparent;
	border-color: rgba(240, 223, 174, 0.55);
	color: #f0dfae;
}

/* ---------------------------------------------------------------- the tabs */

.lsgroup-tabs {
	margin-bottom: 14px;
}

.lsgroup-tabs__list {
	border-bottom: 1px solid var(--lsgroup-line);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lsgroup-tabs__item {
	margin: 0;
}

.lsgroup-tab {
	border-bottom: 3px solid transparent;
	color: var(--lsgroup-ink-soft);
	display: inline-block;
	font-size: 14px;
	padding: 8px 14px;
	text-decoration: none;
}

.lsgroup-tab:hover,
.lsgroup-tab:focus {
	color: var(--lsgroup-brand);
}

.lsgroup-tab.is-current {
	border-bottom-color: var(--lsgroup-accent);
	color: var(--lsgroup-ink);
	font-weight: 600;
}

/* ------------------------------------------------------------- the reports */

/*
 * What every report produced from this screen will say about itself, shown
 * before anything is downloaded. The commonest mistake with an export is
 * discovering afterwards that it covered a different period, a different
 * business or a different timezone than the reader assumed.
 */
.lsgroup-integrity {
	background: var(--lsgroup-surface-sunk);
	border-radius: 6px;
	display: grid;
	gap: 2px 14px;
	grid-template-columns: max-content 1fr;
	margin: 0 0 16px;
	padding: 12px 14px;
}

.lsgroup-integrity__term {
	color: var(--lsgroup-ink-soft);
	font-size: 12px;
	margin: 0;
}

.lsgroup-integrity__value {
	font-size: 13px;
	margin: 0;
}

.lsgroup-reportlist {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.lsgroup-reportlist__item {
	background: var(--lsgroup-surface-sunk);
	border-left: 3px solid var(--lsgroup-brand);
	border-radius: 4px;
	padding: 12px 14px;
}

.lsgroup-reportlist__item.is-locked {
	border-left-color: var(--lsgroup-line);
}

.lsgroup-reportlist__what {
	color: var(--lsgroup-ink-soft);
	font-size: 13px;
	margin: 0 0 10px;
}

.lsgroup-reportlist__locked {
	color: var(--lsgroup-info);
	font-size: 13px;
	margin: 0;
}

.lsgroup-reportlist__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.lsgroup-reportlist__form {
	display: inline-block;
	margin: 0;
}

/* ------------------------------------------------------------- the periods */

.lsgroup-periods {
	background: var(--lsgroup-surface);
	border: 1px solid var(--lsgroup-line);
	border-radius: 8px;
	margin-bottom: 18px;
	padding: 12px 14px;
}

.lsgroup-periods__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.lsgroup-periods__list--source {
	border-top: 1px solid var(--lsgroup-line);
	margin-top: 10px;
	padding-top: 10px;
}

.lsgroup-periods__item {
	margin: 0;
}

.lsgroup-period {
	background: var(--lsgroup-surface-sunk);
	border: 1px solid var(--lsgroup-line);
	border-radius: 999px;
	color: var(--lsgroup-ink-soft);
	display: inline-block;
	font-size: 13px;
	padding: 5px 13px;
	text-decoration: none;
}

.lsgroup-period:hover,
.lsgroup-period:focus {
	background: var(--lsgroup-brand-soft);
	color: var(--lsgroup-brand);
}

.lsgroup-period.is-current {
	background: var(--lsgroup-brand);
	border-color: var(--lsgroup-brand);
	color: #ffffff;
	font-weight: 600;
}

.lsgroup-custom {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lsgroup-custom__label {
	color: var(--lsgroup-ink-soft);
	font-size: 13px;
}

.lsgroup-custom__field {
	max-width: 190px;
}

.lsgroup-periods__caption {
	color: var(--lsgroup-ink-soft);
	font-size: 13px;
	margin: 10px 0 0;
}

/*
 * AUTO-FIT FLOORS ARE CLAMPED TO THE CONTAINER.
 *
 * `repeat(auto-fit, minmax(300px, 1fr))` cannot make a column narrower than
 * 300px, so in a 305px-wide admin column the item is 300px plus its own 28px of
 * padding and the page scrolls sideways by 24. Measured on the live site at
 * 320px: the reports list did exactly that, while the dashboard beside it did
 * not, because the dashboard happened to have a narrow-width override and the
 * reports list did not.
 *
 * `min(100%, 300px)` caps the floor at whatever room there actually is, so the
 * same rule holds at every width and no media query has to be remembered.
 */

/* ---------------------------------------------------------- the businesses */

.lsgroup-businesses {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	margin-bottom: 18px;
}

.lsgroup-business {
	background: var(--lsgroup-surface);
	border: 1px solid var(--lsgroup-line);
	border-left: 4px solid var(--lsgroup-line);
	border-radius: 8px;
	padding: 16px 18px;
}

.lsgroup-business--lodge {
	border-left-color: var(--lsgroup-lodge);
}

.lsgroup-business--hostel {
	border-left-color: var(--lsgroup-hostel);
}

.lsgroup-business--group {
	border-left-color: var(--lsgroup-accent);
	margin-bottom: 18px;
}

.lsgroup-business__name {
	font-size: 17px;
	margin: 0 0 2px;
}

.lsgroup-business__sells,
.lsgroup-business__rate {
	color: var(--lsgroup-ink-soft);
	font-size: 13px;
	margin: 0 0 10px;
}

.lsgroup-business__blocked {
	background: var(--lsgroup-info-soft);
	border-radius: 6px;
	color: var(--lsgroup-info);
	font-size: 13px;
	margin: 8px 0 0;
	padding: 10px 12px;
}

.lsgroup-business__link {
	margin: 12px 0 0;
}

/* -------------------------------------------------------------- the cards */

.lsgroup-cards {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.lsgroup-card {
	background: var(--lsgroup-surface-sunk);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
}

.lsgroup-card__label {
	color: var(--lsgroup-ink-soft);
	font-size: 12px;
	line-height: 1.3;
}

.lsgroup-card__value {
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.lsgroup-card__change {
	align-items: baseline;
	display: flex;
	font-size: 12px;
	gap: 4px;
}

.lsgroup-card__change--good {
	color: var(--lsgroup-good);
}

.lsgroup-card__change--urgent {
	color: var(--lsgroup-urgent);
}

.lsgroup-card__change--info {
	color: var(--lsgroup-ink-soft);
}

.lsgroup-card__arrow {
	font-size: 13px;
}

.lsgroup-card__words {
	line-height: 1.3;
}

/* ------------------------------------------------------------ health bands */

.lsgroup-badge {
	align-items: baseline;
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 4px 8px;
	margin: 0 0 12px;
	padding: 8px 12px;
}

.lsgroup-badge--good {
	background: var(--lsgroup-good-soft);
	color: var(--lsgroup-good);
}

.lsgroup-badge--warning {
	background: var(--lsgroup-warning-soft);
	color: var(--lsgroup-warning);
}

.lsgroup-badge--urgent {
	background: var(--lsgroup-urgent-soft);
	color: var(--lsgroup-urgent);
}

.lsgroup-badge--info {
	background: var(--lsgroup-info-soft);
	color: var(--lsgroup-info);
}

.lsgroup-badge__arrow {
	font-size: 15px;
}

.lsgroup-badge__word {
	font-weight: 700;
}

.lsgroup-badge__trend,
.lsgroup-badge__why {
	font-weight: 400;
}

.lsgroup-badge__reasons {
	color: var(--lsgroup-ink-soft);
	font-size: 12px;
	list-style: disc;
	margin: -6px 0 12px 18px;
	padding: 0;
}

.lsgroup-badge__reason {
	margin: 0 0 2px;
}

/* ------------------------------------------------------------- the panels */

.lsgroup-panel {
	background: var(--lsgroup-surface);
	border: 1px solid var(--lsgroup-line);
	border-radius: 8px;
	margin-bottom: 18px;
	padding: 16px 18px;
}

.lsgroup-h2 {
	font-size: 16px;
	margin: 0 0 12px;
}

.lsgroup-h3 {
	font-size: 14px;
	margin: 16px 0 6px;
}

.lsgroup-note,
.lsgroup-empty__detail {
	color: var(--lsgroup-ink-soft);
	font-size: 13px;
	margin: 10px 0 0;
	max-width: 62em;
}

.lsgroup-empty {
	background: var(--lsgroup-surface-sunk);
	border-left: 3px solid var(--lsgroup-info);
	border-radius: 4px;
	color: var(--lsgroup-ink-soft);
	font-size: 13px;
	margin: 0;
	padding: 12px 14px;
}

/* --------------------------------------------------------------- the chart */

.lsgroup-chart {
	margin: 0;
}

.lsgroup-chart__plot {
	overflow-x: auto;
}

.lsgroup-chart__svg {
	display: block;
	height: 220px;
	min-width: 320px;
	width: 100%;
}

.lsgroup-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.lsgroup-chart__key {
	font-size: 13px;
	padding-left: 18px;
	position: relative;
}

.lsgroup-chart__key::before {
	border-radius: 2px;
	content: "";
	height: 10px;
	left: 0;
	position: absolute;
	top: 4px;
	width: 10px;
}

.lsgroup-chart__key--lodge::before {
	background: #2f6f8f;
}

.lsgroup-chart__key--hostel::before {
	background: #c8863a;
}

.lsgroup-chart__summary {
	color: var(--lsgroup-ink-soft);
	font-size: 13px;
	margin: 10px 0 0;
	max-width: 62em;
}

.lsgroup-chart__data {
	margin-top: 10px;
}

.lsgroup-chart__data summary {
	color: var(--lsgroup-brand);
	cursor: pointer;
	font-size: 13px;
}

/* -------------------------------------------------------------- the tables */

.lsgroup-scroll {
	margin-top: 10px;
	overflow-x: auto;
}

.lsgroup-table {
	border-collapse: collapse;
	font-size: 13px;
	min-width: 460px;
	width: 100%;
}

.lsgroup-table th,
.lsgroup-table td {
	border-bottom: 1px solid var(--lsgroup-line);
	padding: 7px 10px;
	text-align: left;
	vertical-align: top;
}

.lsgroup-checksum {
	background: var(--lsgroup-surface-sunk);
	border-radius: 3px;
	font-size: 12px;
	padding: 1px 5px;
}

.lsgroup-table thead th {
	background: var(--lsgroup-surface-sunk);
	font-weight: 600;
}

/* ------------------------------------------------------------- the verdict */

.lsgroup-verdict {
	border-left: 4px solid var(--lsgroup-accent);
}

.lsgroup-verdict__leader {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 8px;
}

.lsgroup-reasons {
	list-style: disc;
	margin: 0 0 6px 18px;
	padding: 0;
}

.lsgroup-reasons__item {
	font-size: 13px;
	margin: 0 0 3px;
}

.lsgroup-recommendation {
	background: var(--lsgroup-brand-soft);
	border-radius: 6px;
	margin-top: 14px;
	padding: 12px 14px;
}

.lsgroup-recommendation__text {
	margin: 0;
}

.lsgroup-recommendation__from {
	color: var(--lsgroup-ink-soft);
	font-size: 12px;
	margin: 6px 0 0;
}

/* ------------------------------------------------------------- the insights */

.lsgroup-insights,
.lsgroup-alerts {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lsgroup-insight {
	background: var(--lsgroup-surface-sunk);
	border-left: 3px solid var(--lsgroup-line);
	border-radius: 4px;
	padding: 10px 14px;
}

.lsgroup-insight--good {
	border-left-color: var(--lsgroup-good);
}

.lsgroup-insight--notice {
	border-left-color: var(--lsgroup-info);
}

.lsgroup-insight--warning {
	border-left-color: var(--lsgroup-warning);
}

.lsgroup-insight__observation {
	font-weight: 600;
	margin: 0 0 4px;
}

.lsgroup-insight__impact,
.lsgroup-insight__action {
	color: var(--lsgroup-ink-soft);
	font-size: 13px;
	margin: 0 0 2px;
}

.lsgroup-insight__key {
	color: var(--lsgroup-ink);
	font-weight: 600;
}

/* ------------------------------------------- fact, analysis, recommendation
 *
 * WHY THE LABEL IS A WORD AND NOT A COLOUR.
 *
 * These three say different kinds of thing. "Outstanding balances rose by TSh
 * 400,000" can be checked against the ledger; "cash collection is falling
 * behind trading" is a reading of it that this system cannot verify; and the
 * suggestion after them is neither — the reader is the one qualified to judge
 * it. They used to be told apart by their order and their type size, which is
 * not telling them apart, and a management screen that states an inference in
 * the voice it uses for arithmetic will be quoted as arithmetic.
 *
 * So each carries its own word. The tint and the icon are the redundancy, not
 * the signal: with no colour at all the label still reads.
 */
.lsgroup-claim {
	display: grid;
	grid-template-columns: 16px auto minmax(0, 1fr);
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.55;
}

.lsgroup-claim__mark {
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 15px;
	position: relative;
	top: 2px;
}

.lsgroup-claim__kind {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	white-space: nowrap;
	padding: 2px 6px;
	border-radius: 3px;
}

.lsgroup-claim__text { color: var(--lsgroup-ink); }

/* A measurement. Checkable against the records. */
.lsgroup-claim--fact .lsgroup-claim__kind,
.lsgroup-claim--fact .lsgroup-claim__mark {
	color: #1c4b34;
}

.lsgroup-claim--fact .lsgroup-claim__kind { background: #e3efe8; }

/* A reading of one. Plausible, and not a measurement. */
.lsgroup-claim--analysis .lsgroup-claim__kind,
.lsgroup-claim--analysis .lsgroup-claim__mark {
	color: #4a3c12;
}

.lsgroup-claim--analysis .lsgroup-claim__kind { background: #f4eeda; }

/* A suggestion. The reader decides. */
.lsgroup-claim--recommendation .lsgroup-claim__kind,
.lsgroup-claim--recommendation .lsgroup-claim__mark {
	color: #1f3b57;
}

.lsgroup-claim--recommendation .lsgroup-claim__kind { background: #e2ecf5; }

/* A refusal, which is a real answer and a different kind of one. */
.lsgroup-claim--insufficient .lsgroup-claim__kind,
.lsgroup-claim--insufficient .lsgroup-claim__mark {
	color: #4b5563;
}

.lsgroup-claim--insufficient .lsgroup-claim__kind { background: #eceff2; }

@media screen and (max-width: 600px) {
	/* The label moves above the sentence rather than squeezing it to a column. */
	.lsgroup-claim {
		grid-template-columns: 16px minmax(0, 1fr);
	}

	.lsgroup-claim__kind { grid-column: 2; }
	.lsgroup-claim__text { grid-column: 2; }
}

@media (forced-colors: active) {
	.lsgroup-claim__kind {
		border: 1px solid CanvasText;
		background: Canvas;
	}
}

/* --------------------------------------------------------------- the alerts */

.lsgroup-alert {
	align-items: baseline;
	background: var(--lsgroup-surface-sunk);
	border-left: 3px solid var(--lsgroup-line);
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 10px 14px;
}

.lsgroup-alert--good {
	border-left-color: var(--lsgroup-good);
}

.lsgroup-alert--notice {
	border-left-color: var(--lsgroup-info);
}

.lsgroup-alert--warning {
	border-left-color: var(--lsgroup-warning);
}

.lsgroup-alert--urgent {
	border-left-color: var(--lsgroup-urgent);
}

/*
 * The label is a WORD, not a colour. The border above is the same information
 * said twice, which is the point: a colour-blind reader, a black-and-white
 * printout and a screen reader all get the severity from the text.
 */
.lsgroup-alert__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.lsgroup-alert__message {
	flex: 1 1 20em;
	font-size: 13px;
}

.lsgroup-alert__link {
	font-size: 12px;
}

/* --------------------------------------------------------------- narrower */

@media screen and (max-width: 782px) {

	.lsgroup-masthead {
		flex-direction: column;
		gap: 14px;
	}

	.lsgroup-masthead__meta {
		text-align: left;
	}

	.lsgroup-masthead__when {
		justify-content: flex-start;
	}

	.lsgroup-businesses {
		grid-template-columns: 1fr;
	}

	.lsgroup-cards {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
	}
}

@media screen and (max-width: 480px) {

	.lsgroup-cards {
		grid-template-columns: 1fr 1fr;
	}

	.lsgroup-masthead__name,
	.wrap .lsgroup-masthead__name {
		font-size: 19px;
	}
}

/* ------------------------------------------------- the business health score */

/*
 * The bar is the smallest part of this. What makes a composite score honest is
 * the table underneath it, so the bar is deliberately quiet — a thin track, no
 * gradient, no animation — and the disclosure that opens the arithmetic sits
 * directly under it rather than behind an icon somewhere else.
 */
.lsgroup-health {
	margin: var(--tl-space-3) 0 0;
}

.lsgroup-health__head {
	align-items: baseline;
	display: flex;
	gap: var(--tl-space-3);
	justify-content: space-between;
}

.lsgroup-health__label {
	color: var(--lsgroup-ink-soft);
	font-size: var(--tl-size-xs);
	font-weight: var(--tl-weight-semi);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.lsgroup-health__score {
	font-size: var(--tl-size-sm);
	font-weight: var(--tl-weight-semi);
}

.lsgroup-health__track {
	background: var(--lsgroup-surface-sunk);
	border-radius: var(--tl-radius-full);
	height: 8px;
	margin-top: var(--tl-space-2);
	overflow: hidden;
}

.lsgroup-health__fill {
	display: block;
	height: 100%;
	background: var(--lsgroup-good);
}

/*
 * The band tints the fill. It is never the only signal: the score and the band
 * name are both written out in the head above, and the track carries an
 * aria-label saying both, so nothing here depends on telling green from amber.
 */
.lsgroup-health--warning .lsgroup-health__fill { background: var(--lsgroup-warning); }
.lsgroup-health--urgent  .lsgroup-health__fill { background: var(--lsgroup-urgent); }
.lsgroup-health--info    .lsgroup-health__fill { background: var(--lsgroup-info); }

.lsgroup-health__working {
	margin-top: var(--tl-space-3);
}

.lsgroup-health__working > summary {
	color: var(--lsgroup-ink-soft);
	cursor: pointer;
	font-size: var(--tl-size-xs);
}

.lsgroup-health__table {
	border-collapse: collapse;
	font-size: var(--tl-size-xs);
	margin-top: var(--tl-space-2);
	min-width: 460px;
	width: 100%;
}

.lsgroup-health__table th,
.lsgroup-health__table td {
	border-bottom: 1px solid var(--lsgroup-line);
	padding: var(--tl-space-2);
	text-align: left;
	vertical-align: top;
}

.lsgroup-health__table thead th {
	color: var(--lsgroup-ink-soft);
	font-weight: var(--tl-weight-semi);
	white-space: nowrap;
}

.lsgroup-health__method {
	color: var(--lsgroup-ink-soft);
	font-size: var(--tl-size-xs);
	line-height: var(--tl-lh-snug);
	margin: var(--tl-space-2) 0 0;
	max-width: 68ch;
}