/*
 * TopLife Group: the owner's screen.
 *
 * ONE IDENTITY, SHARED
 * --------------------
 * This file used to open by arguing the opposite: the lodge is teal, the hostel
 * is indigo-slate, and this is neither, so a manager with three systems open
 * knows which one they are typing into from the corner of their eye. That rule
 * has been withdrawn. The three management applications are one platform and
 * all three wear the hostel's colour system; which business you are in is
 * written in words, in the document title and on the masthead.
 *
 * The identity block below therefore names steps of the HOSTEL's ramp. The two
 * exceptions are `--lsgroup-lodge` and `--lsgroup-hostel`, which are not
 * identity at all -- they are the data encoding on the comparison chart, and
 * the argument for keeping them apart is in the comment above them.
 *
 * 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 -- which, since the three
 * management systems were unified, is the platform's identity wearing the
 * group's token names.
 *
 * 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 ----------------------------------------------------------
	 *
	 * ONE MANAGEMENT PLATFORM. This was a deep green-black with a brass accent,
	 * chosen to be "neither the lodge's teal nor the hostel's indigo" so a
	 * manager could tell the three apart at a glance. That requirement has been
	 * withdrawn: all three management applications now wear the HOSTEL's colour
	 * system, and which business you are in is told by its name, not its hue.
	 *
	 * Both values come from the hostel's `--hs-primary-*` ramp in hostel.css,
	 * the reference implementation: 700 for the masthead band, which is dark
	 * enough to carry the near-white inks below, and 50 for the soft tint.
	 * The brass accent is retired in favour of the hostel's 500 — it was brand
	 * decoration (three border rules), not a semantic colour.
	 */
	--lsgroup-brand: #2b396e;
	--lsgroup-brand-soft: #eef1f9;
	--lsgroup-accent: #4257a5;

	/*
	 * The two businesses, as seen from above — AND THESE DELIBERATELY STAY TWO
	 * COLOURS.
	 *
	 * They were the lodge's teal and the hostel's indigo, so a bar on a
	 * comparison chart matched the application it stood for. The applications
	 * are now one colour, so that correspondence is gone and these are no
	 * longer identity: they are a data encoding, the only thing separating the
	 * lodge's bar from the hostel's on the same axis.
	 *
	 * Folding them into the platform indigo would draw both businesses in one
	 * colour on a chart whose entire purpose is comparing them — a legend
	 * pointing at two identical bars. Unifying the brand must not cost a
	 * distinction the reader actually needs, so these keep their separation and
	 * the chart keeps its legend.
	 */
	--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 platform colour.
	 *
	 * Mapped step for step onto the hostel's ramp rather than pointing 500 and
	 * 700 at the same brand value as before. That old shortcut meant the
	 * group's buttons sat at the masthead's depth while the hostel's sat four
	 * steps lighter, so two screens following "the same" token still did not
	 * match. Now a primary button is #4257a5 on all three.
	 */
	--tl-primary-50:  #eef1f9;
	--tl-primary-100: #d8def2;
	--tl-primary-500: #4257a5;
	--tl-primary-700: #2b396e;

	/*
	 * -- 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);

	/*
	 * TEXT ON THE BRAND MASTHEAD.
	 *
	 * Eight near-white greens were written directly into rules here, differing
	 * by a shade or two and serving three actual jobs: ordinary text on the
	 * dark band, a quieter second line, and the quietest supporting note. Named
	 * as three, they can be checked against the band they sit on; written as
	 * eight literals they could only be compared by eye, which is how they came
	 * to differ in the first place.
	 */
	/*
	 * Re-tinted from green-white to indigo-white when the band became indigo.
	 * A near-white carries a cast, and a green cast on an indigo band is the
	 * kind of wrongness nobody can name but everybody can see. Same three jobs,
	 * same relative lightness, the tint follows the band.
	 */
	--lsgroup-on-brand: #f5f6fb;
	--lsgroup-on-brand-soft: #dde2f2;
	--lsgroup-on-brand-mute: #b9c2e0;
	--lsgroup-on-brand-max: #ffffff;

	/*
	 * The link in the alert strip on the band. It was a warm straw, chosen to
	 * pair with the brass accent that no longer exists; it is now the hostel
	 * ramp's own 100, which is what a link on a deep indigo band should be.
	 */
	--lsgroup-on-brand-link: #d8def2;

	/*
	 * The four kinds of claim in a report, each an ink and the tint it sits on.
	 */
	--lsgroup-claim-fact: #1c4b34;
	--lsgroup-claim-fact-soft: #e3efe8;
	--lsgroup-claim-analysis: #4a3c12;
	--lsgroup-claim-analysis-soft: #f4eeda;
	--lsgroup-claim-recommendation: #1f3b57;
	--lsgroup-claim-recommendation-soft: #e2ecf5;
	--lsgroup-claim-insufficient: #4b5563;
	--lsgroup-claim-insufficient-soft: #eceff2;

	--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);
	/*
	 * Information TEXT printed on --lsgroup-info-soft, which is a harder test
	 * than the 500 above it can pass. Information is the one colour in this
	 * block the owner can change, so its 500 moves with their choice while the
	 * good, warning and urgent 500s beside it are fixed values in the platform
	 * stylesheet. The ink is darkened until it clears 4.5:1 against that exact
	 * tint. The fallback is the platform's own 700, so the group dashboard is
	 * unchanged when no theme is supplying an ink.
	 */
	--lsgroup-info-ink:     var(--tl-info-ink, var(--tl-info-700));

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

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

/* ==========================================================================
   THE CONTENT CONTAINER
   --------------------------------------------------------------------------
   WHY THE GROUP DASHBOARD SAT AGAINST THE LEFT EDGE.

   `.lsgroup` above already caps itself at `--tl-measure`, which is the right
   cap and the same one the lodge and the hostel use. What it could not do is
   keep its own margins: on the direct portal the shell renders as
   `<div class="wrap lsgroup">` inside `.lspms-manage__body`, and manage.css
   carries

       .lspms-manage .wrap { margin: 0; padding: 0; }

   written to strip the margins wp-admin's own `.wrap` brings. Two classes beats
   one, so it also stripped this container's side gutter AND the auto margins
   that centre it. A max-width with no auto margins does not centre — it pins
   left and puts the whole remainder on the right, which at 1521px measured as
   left 0, right 81.

   This is the same fault, in the same place, that section 2b of hostel.css
   documents for `.lshostel-app`. The hostel was repaired then; the group shell
   was written later and never got the same treatment, so it kept the bug.

   Restored here at the same specificity that removed it, in the group's own
   stylesheet, out of the PLATFORM's tokens rather than the hostel's — the
   `--hs-space-*` scale is scoped to `.lshostel-app` and resolves to nothing on
   this screen, and an unresolved custom property invalidates the whole
   `padding` shorthand, which would leave the gutter silently absent. That is
   precisely the failure the hostel's own comment warns about, so the tokens
   here were checked against the live element before being used.

   Top padding stays 0: the masthead brings its own top margin, exactly as the
   hostel's does. No `!important`, no arbitrary left padding, and wp-admin is
   untouched because the rule is scoped to `.lspms-manage`.
   ========================================================================== */

.lspms-manage .lsgroup {
	padding: 0 var(--tl-space-6) var(--tl-space-12);
	max-width: var(--tl-measure);
	margin-inline: auto;
}

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

.lsgroup-masthead {
	background: var(--lsgroup-brand);
	border-radius: 10px;
	color: var(--lsgroup-on-brand);
	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: var(--lsgroup-on-brand-soft);
}

.lsgroup-masthead__tag {
	color: var(--lsgroup-on-brand-soft);
	font-size: 13px;
	margin: 2px 0 0;
}

.lsgroup-masthead__greeting {
	color: var(--lsgroup-on-brand);
	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: var(--lsgroup-on-brand-soft);
	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: var(--lsgroup-on-brand-mute);
	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: var(--lsgroup-on-brand-link);
	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: var(--lsgroup-on-brand);
	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: var(--lsgroup-on-brand-max);
}

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

.lsgroup-switch__link--out {
	background: transparent;
	border-color: rgba(240, 223, 174, 0.55);
	color: var(--lsgroup-on-brand-link);
}

/* ---------------------------------------------------------------- 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: var(--lsgroup-on-brand-max);
	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-ink);
	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-ink);
}

.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;
}

/*
 * THE LEGEND NOW AGREES WITH THE REST OF THE DASHBOARD.
 *
 * These two swatches were `#2f6f8f` and `#c8863a` -- a blue and an amber
 * written straight into the rule -- while `--lsgroup-lodge` and
 * `--lsgroup-hostel` already existed and were used everywhere else the two
 * businesses are distinguished. So the key beneath a chart could disagree with
 * the chart above it, and with every other badge on the screen, and nothing
 * would flag it because both were valid colours.
 */
.lsgroup-chart__key--lodge::before {
	background: var(--lsgroup-lodge);
}

.lsgroup-chart__key--hostel::before {
	background: var(--lsgroup-hostel);
}

.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;
	/*
	 * `position: relative` is what makes the clipping work, and both the other
	 * two applications carry the same line for the same reason.
	 *
	 * An absolutely positioned descendant is clipped by an ancestor's overflow
	 * only when that ancestor is also its CONTAINING BLOCK. A static scroller
	 * is not one, and every table in this system contains WordPress's
	 * `.screen-reader-text`, which is absolutely positioned - so those spans
	 * escape the scroller and add their off-screen width to the page while
	 * every visible element measures inside the viewport.
	 *
	 * The lodge found this on its calendar; the hostel found it when the
	 * month-end screen put a labelled form in a table. The group had the same
	 * hole and had simply not put anything absolutely positioned in a table
	 * yet.
	 */
	position: relative;
	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: var(--lsgroup-claim-fact);
}

.lsgroup-claim--fact .lsgroup-claim__kind { background: var(--lsgroup-claim-fact-soft); }

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

.lsgroup-claim--analysis .lsgroup-claim__kind { background: var(--lsgroup-claim-analysis-soft); }

/* A suggestion. The reader decides. */
.lsgroup-claim--recommendation .lsgroup-claim__kind,
.lsgroup-claim--recommendation .lsgroup-claim__mark {
	color: var(--lsgroup-claim-recommendation);
}

.lsgroup-claim--recommendation .lsgroup-claim__kind { background: var(--lsgroup-claim-recommendation-soft); }

/* 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: var(--lsgroup-claim-insufficient);
}

.lsgroup-claim--insufficient .lsgroup-claim__kind { background: var(--lsgroup-claim-insufficient-soft); }

@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;
}

/* ------------------------------------------------ the mark on the masthead - */

/*
 * The business's logo, or the two letters it had before there were logos. Sized
 * to the line rather than to the photograph, and `contain` rather than `cover`,
 * because cropping a logo to fill a square is the one thing that stops it being
 * the logo.
 *
 * This lives HERE rather than in pms.css because this is the stylesheet the
 * screen loads. It was written in the other one first, and the class-coverage
 * check said so: a rule in a file the page never fetches is a rule that does
 * nothing at all.
 */
.lsgroup-masthead__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	margin-bottom: 8px;
	padding: 0 6px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.06);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.lsgroup-masthead__mark--logo {
	max-width: 160px;
	padding: 0;
	background: none;
}

.lsgroup-masthead__mark img {
	display: block;
	max-width: 100%;
	max-height: 32px;
	object-fit: contain;
}