/* In-house CMS: help knowledge-base styles (LMM help + admin help).
   Design language ported from the Gig Heaven help pages, adapted to the LMM
   brand pink (#c83d82 = @brand-tertiary in lmm_variables.less). Loaded on
   top of the site bootstrap bundle via /bs/<rev>/help.css. */

/* ---- hero search ---------------------------------------------------------- */

.help-search-box {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 40px;
	display: flex;
	align-items: center;
	padding: 10px 10px 10px 26px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.06);
}

.help-search-box:focus-within {
	border-color: #c83d82;
	outline: 1px solid #c83d82;
	box-shadow: none;
}

.help-search-icon {
	color: #999;
	font-size: 18px;
	margin-right: 10px;
}

.help-search-field {
	flex: 1 1 auto;
}

.help-search-field .form-control {
	border: none;
	box-shadow: none;
	font-size: 17px;
	height: 50px;
	padding-left: 0;
	background: #fff;
}

.help-search-field .form-control:focus {
	border: none;
	box-shadow: none;
	outline: none;
}

.help-search-button {
	border-radius: 30px !important;
	flex: 0 0 auto;
}

/* ---- popular articles row (help home, on the dark band) ------------------- */

.popular-article-link-container a {
	color: #fff;
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px 15px 10px 0 !important;
	font-size: 1.3em !important;
	text-decoration: none;
}

.popular-article-link-container {
	color: #fff;
	position: relative;
}

/* hover only where there is a pointer: a tap holds :hover on a phone, so a tapped row stayed lit */
@media (hover: hover) {
	.popular-article-link-container:hover {
		background-color: rgba(255, 255, 255, 0.15) !important;
		border-radius: 12px;
	}

	.popular-article-link-container:hover:after {
		opacity: 1;
		right: 10px;
	}
}

@media only screen and (min-width: 992px) {
	.popular-article-link-container:after {
		content: "\e080";
		position: absolute;
		opacity: 0;
		top: 10px;
		right: -15px;
		font-family: 'Glyphicons Halflings';
		font-size: 1.3em !important;
	}
}

/* ---- home page article index (every article, grouped by category) ---------- */

/* PUBLIC help only since 30 Sep 2026: the admin help home has its own markup and sheet on
   both sites (htdocs/css/admin-help.css - popular tiles, a card per category), so neither
   these rules nor the popular row's above reach an admin page. Its search box is still
   styled at the top of this sheet. */
.help-home-cat-title {
	font-size: 24px;
	margin: 10px 0 14px;
	color: #000;
}

.help-home-cat-title i {
	color: #c83d82;
	margin-right: 10px;
}

.help-article-index {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 20px;
}

.help-article-index a {
	color: #333;
	padding: 5px 0;
	text-decoration: none;
}

.help-article-index a:hover {
	color: #c83d82;
	text-decoration: underline;
}

/* ---- category page / search results: article list ------------------------- */

.help-page-title {
	margin-top: 0;
}

.help-category-description {
	color: #555;
	font-size: 16px;
}

.help-article-list-item {
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	margin-bottom: 12px;
	background: #fff;
}

.help-article-list-item:hover {
	border-color: #c83d82;
	outline: 1px solid #c83d82;
}

.help-article-list-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 18px;
	color: #000;
	text-decoration: none;
}

.help-article-list-text {
	flex: 1 1 auto;
}

/* the click-me affordance; flex centring + top:0 keeps the glyph level */
.help-article-list-arrow {
	flex: 0 0 auto;
	color: #bbb;
	font-size: 14px;
	top: 0;
}

.help-article-list-item:hover .help-article-list-arrow {
	color: #c83d82;
}

.help-article-list-title {
	display: block;
	font-size: 17px;
	font-weight: 700;
}

.help-article-list-summary {
	display: block;
	color: #666;
	font-size: 14px;
	margin-top: 4px;
	font-weight: 400;
}

.help-article-list-empty {
	color: #777;
	padding: 12px 0;
}

/* ---- article page ---------------------------------------------------------- */

.help-breadcrumb {
	margin-bottom: 8px;
}

.help-breadcrumb a {
	color: #777;
}

/* The site-wide .lmm-secondary / .lmm-main-light bands have min-heights for
   pages that fill them; the help pages leave them empty, so let them size to
   their content (kills the big white gap above the contact band). */
.page-section.lmm-secondary,
.page-section.lmm-main-light {
	min-height: auto;
}

/* contact band above the footer */
.help-contact-title {
	font-size: 30px;
}

/* ---- article body: the shared reading typography -------------------------

   EVERY help article on both sections (public /help and staff /admin_files/help)
   renders inside .help-article-content, so this block is the one place that
   decides what an article looks like. It exists because the site-wide headings
   are sized for listing pages, not for prose: lmm.less sets h2 to 18px, h3 to
   16px and h4 to 13px, so an article's own sub-headings came out the SAME SIZE
   as the paragraph under them (h3) or SMALLER than it (h4) - a "sub-title" that
   reads as smaller than its own content. Restated here at an actual scale, with
   the vertical rhythm that keeps a long article from reading as one grey slab.

   Anything a single article needs on top of this still goes in the per-article
   section at the foot of this file - NOT in a <style> block in the body, which
   the WYSIWYG editor eats (see that section's note). -------------------------- */

.help-article-content {
	font-size: 16px;
	line-height: 1.7;
	color: #191919;
}

.help-article-content > *:first-child {
	margin-top: 0;
}

.help-article-content p {
	margin: 0 0 18px;
}

/* the standing-back opening paragraph: bigger than the body, but nothing like
   bootstrap's 24px/300 .lead, which on this column reads as a second title */
.help-article-content p.lead,
.help-article-content .help-lead {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: #4a4449;
	border-left: 4px solid #c83d82;
	padding-left: 18px;
	margin: 0 0 30px;
}

/* h2 = a section of the article. The hairline above it does the work of the
   white space: it tells the eye where one answer ends and the next begins. */
.help-article-content h2 {
	font-size: 24px;
	line-height: 1.25;
	margin: 40px 0 14px;
	padding-top: 26px;
	border-top: 1px solid #ececec;
}

.help-article-content h2:first-child,
.help-article-content > *:first-child + h2 {
	margin-top: 6px;
}

.help-article-content h3 {
	font-size: 19px;
	line-height: 1.3;
	color: #191919;
	margin: 28px 0 10px;
}

.help-article-content h4 {
	font-size: 16px;
	line-height: 1.3;
	color: #4a4449;
	margin: 22px 0 8px;
}

/* :not(.btn) - a CTA button inside an article body (.btn-pink etc.) must keep
   its own label colour; without the exclusion this painted the label brand
   pink on the button's pink fill, an invisible button. Fixed on the Gig Heaven
   copy 4 Sep 2026 and never ported here; it bit the LMM help pages on
   22 Sep 2026 (Adam, on "Is there an app?"'s Go to my account). */
.help-article-content a:not(.btn) {
	color: #c83d82;
}

.help-article-content a:not(.btn):hover,
.help-article-content a:not(.btn):focus {
	color: #a02f68;
	text-decoration: underline;
}

.help-article-content hr {
	border-top: 1px solid #ececec;
	margin: 30px 0;
}

.help-article-content code {
	background: #f8f4f6;
	border: 1px solid #e5dee2;
	border-radius: 4px;
	color: #a02f68;
	font-size: 14px;
	padding: 1px 6px;
	/* a long code token (a path, a query) has no break points and pushes a phone
	   page sideways; break-all breaks it IN PLACE (overflow-wrap would move the
	   whole thing to a fresh line first - checklist 7c). Code is not prose, so
	   mid-token breaks are fine. Found at 320px, 3 Sep 2026. */
	word-break: break-all;
}

/* ---- lists ----------------------------------------------------------------
   An <ol> in a help article is nearly always a set of steps to follow, so it is
   drawn as steps: a pink numbered disc per item, hanging outside the text
   column. <ul> keeps a normal bullet, in the brand pink. */

.help-article-content ol {
	counter-reset: help-step;
	list-style: none;
	padding-left: 0;
	margin: 0 0 22px;
}

.help-article-content ol > li {
	counter-increment: help-step;
	position: relative;
	padding-left: 42px;
	margin-bottom: 12px;
}

.help-article-content ol > li::before {
	content: counter(help-step);
	position: absolute;
	left: 0;
	top: 2px;
	width: 27px;
	height: 27px;
	line-height: 27px;
	border-radius: 50%;
	background: #c83d82;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

/* a nested list inside a step is a sub-point, not a second set of steps */
.help-article-content ol ol,
.help-article-content ol ul {
	margin: 10px 0 0;
}

.help-article-content ul {
	padding-left: 22px;
	margin: 0 0 22px;
}

.help-article-content ul > li,
.help-article-content ol ul > li {
	margin-bottom: 9px;
}

.help-article-content ul > li::marker {
	color: #c83d82;
}

/* ---- callout boxes --------------------------------------------------------
   The four kinds of aside an article needs, so that a warning stops reading as
   just another paragraph. Use them as:

     <div class="help-warn"><b><i class="bi bi-exclamation-triangle-fill"></i>
     The heading</b><p>The body.</p></div>

   The FIRST <b> (or an .help-callout-title) is drawn as the box heading; the
   leading <i class="bi ..."> inside it is picked up as the icon. Variants:
   .help-warn (pink - do not do this), .help-stop (red - it will break),
   .help-ok (green - confirmation) and .help-note (blue - background).

   The divert-* names carried alongside them are the ones already published in
   the body of "Sending a customer's email to staff instead", written before
   these components existed. They are aliases, not a second design - a new
   article should use the help-* names. */

.help-article-content .help-warn,
.help-article-content .divert-warn,
.help-article-content .help-stop,
.help-article-content .help-ok,
.help-article-content .divert-ok,
.help-article-content .divert-note,
.help-article-content .help-note {
	border: 1px solid #e5dee2;
	border-left: 4px solid #8b8289;
	border-radius: 14px;
	padding: 16px 20px;
	margin: 24px 0;
	background: #f8f4f6;
}

.help-article-content .help-warn > b:first-child,
.help-article-content .divert-warn > b:first-child,
.help-article-content .help-stop > b:first-child,
.help-article-content .help-ok > b:first-child,
.help-article-content .divert-ok > b:first-child,
.help-article-content .help-note > b:first-child,
.help-article-content .divert-note > b:first-child,
.help-article-content .help-callout-title {
	display: block;
	font-size: 18px;
	line-height: 1.35;
	margin-bottom: 8px;
}

.help-article-content .help-warn > b:first-child .bi,
.help-article-content .divert-warn > b:first-child .bi,
.help-article-content .help-stop > b:first-child .bi,
.help-article-content .help-ok > b:first-child .bi,
.help-article-content .divert-ok > b:first-child .bi,
.help-article-content .help-note > b:first-child .bi,
.help-article-content .divert-note > b:first-child .bi,
.help-article-content .help-callout-title .bi {
	margin-right: 7px;
}

/* the body of a callout is tighter than the article's own rhythm, and its last
   paragraph never carries a trailing gap inside the box */
.help-article-content .help-warn p,
.help-article-content .divert-warn p,
.help-article-content .help-stop p,
.help-article-content .help-ok p,
.help-article-content .divert-ok p,
.help-article-content .divert-note p,
.help-article-content .help-note p {
	margin-bottom: 12px;
}

.help-article-content .help-warn > *:last-child,
.help-article-content .divert-warn > *:last-child,
.help-article-content .help-stop > *:last-child,
.help-article-content .help-ok > *:last-child,
.help-article-content .divert-ok > *:last-child,
.help-article-content .divert-note > *:last-child,
.help-article-content .help-note > *:last-child {
	margin-bottom: 0;
}

.help-article-content .divert-warn,
.help-article-content .help-warn {
	background: #fdf3f8;
	border-color: #f2d3e3;
	border-left-color: #c83d82;
}

.help-article-content .help-warn > b:first-child,
.help-article-content .divert-warn > b:first-child,
.help-article-content .divert-warn .help-callout-title,
.help-article-content .help-warn .help-callout-title {
	color: #a02f68;
}

.help-article-content .help-stop {
	background: #fdf0ef;
	border-color: #e9c4bf;
	border-left-color: #c9302c;
}

.help-article-content .help-stop > b:first-child,
.help-article-content .help-stop .help-callout-title {
	color: #8c2f26;
}

.help-article-content .divert-ok,
.help-article-content .help-ok {
	background: #f1f8f3;
	border-color: #cfe6d6;
	border-left-color: #2e8b57;
}

.help-article-content .help-ok > b:first-child,
.help-article-content .divert-ok > b:first-child,
.help-article-content .divert-ok .help-callout-title,
.help-article-content .help-ok .help-callout-title {
	color: #1f6b41;
}

.help-article-content .divert-note,
.help-article-content .help-note {
	background: #f4f7fb;
	border-color: #dce5ef;
	border-left-color: #3f6fa8;
}

.help-article-content .help-note > b:first-child,
.help-article-content .divert-note > b:first-child,
.help-article-content .divert-note .help-callout-title,
.help-article-content .help-note .help-callout-title {
	color: #2b4d75;
}

/* ---- plain white card -----------------------------------------------------
   For a group of short "this / that / the other" points that would otherwise be
   three unlabelled paragraphs. Same anatomy as an admin-home .ahv2-card: white,
   16px radius, pink-tinted hairline, its h3 carrying a pink icon.
   (.divert-box is the published alias - see the callout note above.) */

.help-article-content .divert-box,
.help-article-content .help-card {
	background: #fff;
	border: 1px solid #e5dee2;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(25, 25, 25, 0.04);
	padding: 16px 20px;
	margin: 0 0 14px;
}

.help-article-content .help-card h3,
.help-article-content .divert-box h3,
.help-article-content .divert-box h4,
.help-article-content .help-card h4 {
	font-size: 19px;
	color: #191919;
	margin: 0 0 7px;
}

.help-article-content .help-card h3 .bi,
.help-article-content .divert-box h3 .bi,
.help-article-content .divert-box h4 .bi,
.help-article-content .help-card h4 .bi {
	color: #c83d82;
	margin-right: 8px;
}

.help-article-content .divert-box > *:last-child,
.help-article-content .help-card > *:last-child {
	margin-bottom: 0;
}

/* the name of a field or a value, quoted mid-sentence */
.help-article-content .divert-field,
.help-article-content .help-field {
	background: #fff;
	border: 1px solid #e5dee2;
	border-radius: 6px;
	color: #4a4449;
	font-size: 14.5px;
	padding: 1px 7px;
	white-space: nowrap;
}

.help-article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.help-article-content video {
	max-width: 100%;
	height: auto;
}

/* migrated WordPress video blocks (screencasts): fill the content column and
   drop the browser default figure side-margins, restoring the wp-block-video
   styling that was lost in the CMS migration */
.help-article-content figure.wp-block-video {
	margin-left: 0;
	margin-right: 0;
}

.help-article-content figure.wp-block-video video {
	width: 100%;
}

/* ---- tables ---------------------------------------------------------------
   Drawn as a card rather than a grid of boxes: the outer hairline and the
   rounded corners are the container, and the rows are separated by a single
   soft rule. border-collapse would square the corners off again, so the
   separate/0 pair is what lets the radius survive.

   ⚠️ The cell selectors are written the long way (table > tbody > tr > td)
   ON PURPOSE. An article that puts bootstrap's .table class on the table gets
   `.table > tbody > tr > td` from the bundle - three classes/elements of
   specificity - which beats a plain `.help-article-content td` and puts back
   bootstrap's 8px padding and 1.428 line-height. That is exactly the squashed
   table this block exists to fix. */

.help-article-content table {
	width: 100%;
	margin: 22px 0;
	border: 1px solid #e5dee2;
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}

.help-article-content table > thead > tr > th,
.help-article-content table > tbody > tr > th,
.help-article-content table > tfoot > tr > th,
.help-article-content table > thead > tr > td,
.help-article-content table > tbody > tr > td,
.help-article-content table > tfoot > tr > td {
	border: none;
	border-top: none;
	border-bottom: 1px solid #f4f2f3;
	padding: 13px 16px;
	text-align: left;
	vertical-align: top;
	font-size: 16px;
	line-height: 1.6;
}

.help-article-content table > thead > tr > th {
	background: #faf6f8;
	color: #4a4449;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 1px solid #e5dee2;
}

/* a row-header table (the label sits in the first cell of each row) - the
   label column gets the tint instead of the top row */
.help-article-content table > tbody > tr > th {
	background: #faf6f8;
	color: #191919;
	font-weight: 700;
	border-right: 1px solid #f4f2f3;
}

.help-article-content table > tbody > tr:last-child > th,
.help-article-content table > tbody > tr:last-child > td {
	border-bottom: none;
}

/* screenshots convention shared with GH help articles */
.help-article-content figure.help-screenshot {
	margin: 24px 0;
	text-align: center;
}

.help-article-content figure.help-screenshot img {
	border: 1px solid #e5dee2;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	/* .img-responsive is display:block, which ignores the figure's text-align:center -
	   auto margins actually deliver the centring for narrower-than-column screenshots */
	margin-left: auto;
	margin-right: auto;
}

.help-article-content figure.help-screenshot figcaption {
	color: #8b8289;
	font-size: 13px;
	margin-top: 8px;
}

@media (max-width: 767px) {
	.help-article-content {
		font-size: 15.5px;
	}

	.help-article-content h2 {
		font-size: 21px;
		margin-top: 32px;
		padding-top: 22px;
	}

	.help-article-content h3 {
		font-size: 18px;
	}

	.help-article-content .help-warn,
	.help-article-content .help-stop,
	.help-article-content .help-ok,
	.help-article-content .help-note,
	.help-article-content .help-card {
		padding: 14px 16px;
	}

	/* a table's min-content width can exceed a phone (an article table measured
	   361px in a 320px view, 3 Sep 2026) - let it scroll inside its own rounded
	   card instead of pushing the whole page sideways. width:100% above cannot
	   shrink a table below its content's minimum, so this is the only CSS-only
	   fix that keeps the cells readable. */
	.help-article-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ---- sidebar ---------------------------------------------------------------- */

.help-sidebar {
	margin-top: 6px;
}

.help-sidebar-block {
	margin-bottom: 26px;
}

/* Element+class: .admin-shell-v2 h2,h3 (15px, admin-shell.css) - and on LMM .admin-v2 h2,h3 (18px/15px, admin-v2.css) -
   outranks a bare class, which shrank the article title and "Related" to 15px (Adam, 23 Sep 2026). */
.admin-shell-v2 h3.help-sidebar-title,
.admin-v2 h3.help-sidebar-title,
.help-sidebar-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 10px;
}

.help-sidebar-title .glyphicon {
	color: #000;
	font-size: 18px;
	top: 1px;
}

.admin-shell-v2 h2.help-article-title,
.admin-v2 h2.help-article-title,
.help-article-title {
	font-size: 30px;
	margin: 0 0 8px;
}

.help-crumbtrail {
	font-size: 13px;
	color: #777;
	margin: 0;
}

.help-crumbtrail a {
	color: #777;
	text-decoration: none;
}

.help-crumbtrail a:hover {
	color: #c83d82;
}

.help-crumb-hr {
	margin: 12px 0 20px;
}

.help-related-list {
	padding-left: 18px;
	margin: 0;
}

.help-related-list li {
	margin-bottom: 8px;
}

.help-contact-well b {
	font-size: 15px;
}

@media (max-width: 991px) {
	.help-sidebar {
		margin-top: 30px;
		border-top: 1px solid #e5e5e5;
		padding-top: 20px;
	}
}

/* ---- bottom contact / chat / links band ---------------------------------- */

.help-foot-col {
	margin-bottom: 20px;
}

.help-foot-title {
	font-size: 22px;
	font-weight: 700;
	margin: 8px 0 12px;
}

.help-foot-title .glyphicon {
	color: #000;
	font-size: 18px;
	top: 1px;
}

.help-foot-text {
	margin-bottom: 14px;
}

.help-foot-smallprint {
	color: #777;
	max-width: 420px;
}

.help-foot-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.help-foot-links li {
	padding: 5px 0;
	border-bottom: 1px solid #e5e5e5;
}

.help-foot-links li:last-child {
	border-bottom: none;
}

.help-foot-links a {
	font-weight: 700;
}

/* ---- search suggestions dropdown (help-search-suggest.js) ------------------ */
/* Floating panel anchored under the rounded search box; .help-suggest-flip-up
   opens it above instead when the box sits near the bottom of the viewport.
   The mobile full-screen overlay reuses the same row styles inline. */

.help-search-form {
	position: relative;
}

.help-suggest-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 6px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 1050;
}

.help-suggest-flip-up {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 6px;
	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}

.help-suggest-header {
	padding: 10px 18px 6px;
	color: #777;
	font-size: 13px;
}

.help-suggest-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 18px;
	color: #000;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-top: 1px solid #f0f0f0;
}

.help-suggest-item-title {
	flex: 1 1 auto;
}

/* the click-me affordance; flex centring + top:0 keeps the glyph level with
   the title text */
.help-suggest-item-arrow {
	flex: 0 0 auto;
	color: #bbb;
	font-size: 13px;
	top: 0;
}

.help-suggest-item:hover .help-suggest-item-arrow,
.help-suggest-item:focus .help-suggest-item-arrow,
.help-suggest-item-active .help-suggest-item-arrow {
	color: #c83d82;
}

.help-suggest-header + .help-suggest-item {
	border-top: none;
}

.help-suggest-item:first-child {
	border-top: none;
}

.help-suggest-item:hover,
.help-suggest-item:focus,
.help-suggest-item-active {
	background: #f6eef3;
	color: #c83d82;
	text-decoration: none;
}

/* full-screen mobile overlay: header row (back button + search box), results
   fill the rest inline */
.help-suggest-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	z-index: 2100;
	display: flex;
	flex-direction: column;
}

.help-suggest-overlay-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid #e5e5e5;
	flex: 0 0 auto;
}

.help-suggest-overlay-back {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: none;
	background: none;
	color: #333;
	font-size: 18px;
}

.help-suggest-overlay-box {
	flex: 1 1 auto;
	padding: 4px 10px 4px 16px;
}

.help-suggest-overlay-box .form-control {
	height: 40px;
	font-size: 16px;	/* under 16px iOS zooms the page on focus */
}

.help-suggest-overlay .help-suggest-dropdown {
	position: static;
	flex: 1 1 auto;
	margin: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	max-height: none;
}

html.help-suggest-overlay-open,
html.help-suggest-overlay-open body {
	overflow: hidden;
}

/* the "Link copied" toast help-article.js shows - generic, any article */

.help-copied-flash {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	background: #22303a;
	color: #fff;
	padding: 9px 16px;
	border-radius: 20px;
	font-size: 14px;
	z-index: 2000;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ===========================================================================
   HELP ARTICLE BOXES: the space below the last line must equal the space above
   the first one
   ---------------------------------------------------------------------------
   7 Sep 2026, Adam on the deals article: "you've yet again managed to create a
   box with unbalanced margins - the bottom margin should match the top margin,
   always", and immediately after, "same at the end of the accordion sections".

   Every one of these boxes - a note, a key point, a cheat sheet, an accordion
   body - puts its TOP space in padding and then lets its last child keep its
   own bottom margin ON TOP of the bottom padding. Measured on dev before this
   block: a .dl-key padded 16/16 read 16px above the first line and 26px below
   the last; every accordion body read 16 above and 36-42 below; every cheat
   sheet 20 and 27, because the last <li> keeps its 7px.

   It is fixed HERE, once, rather than in each article, for two reasons. Every
   article's styles are a copy of the one before (.wa- .eb- .cn- .yn- .sc-
   .at- .dp- .dl-), so there is no single per-article rule to correct; and most
   of those copies live in a <style> block inside the article's CMS content,
   where a fix would have to be made by hand in the database once per article
   and again in every article written after.

   That inline <style> is also why the accordion rule below is qualified down to
   .panel-group .panel .panel-body: an article's own copy is .xx-guide .xx-acc
   .panel-body, and being later in the document it wins any tie on specificity.

   Scanner: claude-data/help_article_box_scan.mjs - opens every accordion and
   flags any box padded on BOTH sides whose top and bottom gaps differ by more
   than 2.5px. Run it after touching an article's styles. It also reports the
   flex grids (.wa-where-item and friends), which are NOT defects: flex items
   stretch to the tallest in the row, so a short one has real space underneath.
   =========================================================================== */

/* A block never carries a trailing bottom margin when it is the last thing in
   its container - the container's own padding decides that space instead. */
.help-article-content p:last-child,
.help-article-content ul:last-child,
.help-article-content ol:last-child,
.help-article-content dl:last-child,
.help-article-content table:last-child,
.help-article-content pre:last-child,
.help-article-content blockquote:last-child,
.help-article-content h1:last-child,
.help-article-content h2:last-child,
.help-article-content h3:last-child,
.help-article-content h4:last-child,
.help-article-content .table-responsive:last-child{margin-bottom:0}

/* Cheat-sheet and step lists space their items with a margin on every <li>; the
   last one lands inside the box's bottom padding. Two classes deep so it beats
   an article's own `.xx-guide .xx-cheat li{margin-bottom:7px}`. */
.help-article-content ul>li:last-child,
.help-article-content ol>li:last-child{margin-bottom:0}

/* Accordion body: 16px top and bottom, whatever the article's own copy says.
   Its top space was 2px of padding plus a 14px margin on the first child, and
   its bottom 18px of padding plus whatever the last child brought. */
.help-article-content .panel-group .panel .panel-body{padding-top:16px;padding-bottom:16px}
.help-article-content .panel-group .panel .panel-body>:first-child{margin-top:0}
.help-article-content .panel-group .panel .panel-body>:last-child{margin-bottom:0}

/* Same family, found by the adjacency half of the scan: the paragraph after a
   table sat at 0.00px against the table's bottom rule in Your notifications and
   in Credit notes. `.help-article-content table{margin:22px 0}` was already here
   and was being beaten by `.admin-v2 .table{margin:0}` in admin-v2.css - the
   admin shell zeroes table margins because its tables sit in cards, and a help
   article is not a card. Restated one class heavier; admin-v2.css is linked
   before help.css, so this wins the tie. A table inside an .xx-table-wrap keeps
   its 0 - the wrap carries the margin. */
.help-article-content .table{margin:22px 0}

/* --------------------------------------------------------------------------
   Evening mode: the help search box (Adam, 7 Sep 2026 - "the dim mode messing
   up the input inside search help").

   admin-bookings-template.css re-skins every .form-control to var(--av2-surface)
   with !important under :root[data-av2-evening="1"], which is right. But the
   rounded white PILL that wraps the help search is not a .form-control, so it
   stayed #fff while the input inside it turned surface-grey - a white pill with
   a visibly greyer rectangle sitting in it, on a tinted ground.

   Match the wrapper to its input rather than forcing the input back to white:
   evening mode is meant to re-skin controls, and this makes the box read as one
   control again. The suggestions panel hangs off the same box, so it goes too.
   -------------------------------------------------------------------------- */

:root[data-av2-evening="1"] .help-search-box{background:var(--av2-surface);border-color:rgba(25,25,25,.16)}
:root[data-av2-evening="1"] .help-suggest-dropdown{background:var(--av2-surface);border-color:rgba(25,25,25,.16)}

/* The "Admin Help" page title on an article is a way back to the help home (Adam, 7 Sep 2026).
   It has to keep looking like the title, not like a link, so it inherits its colour and only
   shows its hand on hover. */
h1 a.help-home-link:not(.btn):not(.shell-pill),h1 a.help-home-link:not(.btn):not(.shell-pill):hover,h1 a.help-home-link:not(.btn):not(.shell-pill):focus{color:inherit;text-decoration:none}
h1 a.help-home-link:not(.btn):not(.shell-pill):hover,h1 a.help-home-link:not(.btn):not(.shell-pill):focus{opacity:.72}

/* ---- "Booking questions" articles (public help) ---------------------------
   Two articles, one per audience: booking-questions-clients (.bq-guide) and
   booking-questions-acts (.aq-guide). Same layout, so the rules are written
   once against both prefixes rather than duplicated.

   These two are ALSO the source of the "Common questions" block on the public
   booking page - that page fetches the article, keeps the panels whose
   data-stage matches where the booking has got to, and renders them under its
   own .booking-faq-* classes (see htdocs/js/booking-faqs.js). Nothing below is
   used there; a rule needed in both places belongs in both sheets.
   -------------------------------------------------------------------------- */

.bq-guide,.aq-guide{--bq:#c83d82;--bq-ink:#22303a}

.bq-guide .bq-lead,.aq-guide .aq-lead{font-size:18px;line-height:1.6;color:#3d4b55;border-left:4px solid var(--bq);padding-left:16px;margin:0 0 28px}

/* no rule under a section heading (Adam, 9 Sep 2026: "lines touching them") - the numbered
   chip already marks the break, and a short heading over a full-width line read as a table row */
.bq-guide .bq-sec,.aq-guide .aq-sec{font-family:'Merriweather Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;line-height:1.3;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7b8892;margin:38px 0 14px;padding:0;border-top:0}
.bq-guide .bq-sec:first-child,.aq-guide .aq-sec:first-child{margin-top:0}
.bq-guide .bq-sec-num,.aq-guide .aq-sec-num{display:inline-block;min-width:22px;height:22px;margin-right:8px;border-radius:11px;background:var(--bq);color:#fff;font-size:12px;line-height:22px;text-align:center;letter-spacing:0}

/* the accordion itself - one panel open at a time, all closed on load */
.bq-guide .bq-acc,.aq-guide .aq-acc{margin:0 0 26px}
.bq-guide .bq-acc .panel,.aq-guide .aq-acc .panel{border:1px solid #e2e8ec;border-radius:10px;box-shadow:none;margin:0 0 10px;background:#fff}
.bq-guide .bq-acc .panel+.panel,.aq-guide .aq-acc .panel+.panel{margin-top:10px}
.bq-guide .bq-acc .panel-heading,.aq-guide .aq-acc .panel-heading{padding:0;background:#fff;border:0;border-radius:10px;position:relative}
.bq-guide .bq-acc .panel-title,.aq-guide .aq-acc .panel-title{font-size:inherit;margin:0;border:0;padding:0;color:inherit}
/* the questions sit in <h3>s, and the site puts every h1-h6 in Roboto Condensed, so a
   question read in a different face from its own answer. Merriweather Sans is the body
   face here and is already self-hosted, so this loads nothing new (Adam, 10 Sep 2026). */
.bq-guide .bq-acc .panel-title>a,.aq-guide .aq-acc .panel-title>a{font-family:'Merriweather Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;display:block;padding:13px 70px 13px 15px;position:relative;text-decoration:none;color:var(--bq-ink);border-radius:10px;font-size:18px;line-height:1.35;font-weight:700}
.bq-guide .bq-acc .panel-title>a:hover,.bq-guide .bq-acc .panel-title>a:focus,.aq-guide .aq-acc .panel-title>a:hover,.aq-guide .aq-acc .panel-title>a:focus{background:#fdf3f8;text-decoration:none;color:var(--bq-ink)}
.bq-guide .bq-acc .panel-title>a:not(.collapsed),.aq-guide .aq-acc .panel-title>a:not(.collapsed){background:#fbeef4;border-radius:10px 10px 0 0}
.bq-guide .bq-acc .panel-title>a:after,.aq-guide .aq-acc .panel-title>a:after{content:"\e114";font-family:"Glyphicons Halflings";position:absolute;right:15px;top:50%;margin-top:-8px;font-size:12px;color:#93a2ac;font-weight:400}
.bq-guide .bq-acc .panel-title>a:not(.collapsed):after,.aq-guide .aq-acc .panel-title>a:not(.collapsed):after{content:"\e113"}
/* top > bottom on purpose - see the note in public-booking-messages.css: at 16px/1.6 the
   last line carries ~5px of half-leading and descender space under its ink, so equal
   padding reads as a bigger gap underneath. This was 14px over 18px, i.e. wrong twice. */
.bq-guide .bq-acc .panel-body,.aq-guide .aq-acc .panel-body{border-top:1px solid #f0e2ea;padding:16px 18px 0}
.bq-guide .bq-acc .panel-body p:last-child,.aq-guide .aq-acc .panel-body p:last-child{margin-bottom:0}
.bq-guide .bq-acc .panel-body ul,.aq-guide .aq-acc .panel-body ul{padding-left:20px}
.bq-guide .bq-acc .panel-body li,.aq-guide .aq-acc .panel-body li{margin-bottom:6px}

/* per-question link button - must sit BESIDE the .panel-title anchor, never inside it,
   or copying the link would also toggle the panel (help-article.js) */
.bq-guide .bq-acc-copy,.aq-guide .aq-acc-copy{position:absolute;right:38px;top:50%;margin-top:-15px;width:30px;height:30px;padding:0;border:0;background:transparent;color:#bcc7cf;border-radius:50%;line-height:28px;font-size:18px;text-align:center}
.bq-guide .bq-acc-copy:hover,.bq-guide .bq-acc-copy:focus,.aq-guide .aq-acc-copy:hover,.aq-guide .aq-acc-copy:focus{background:#fbeef4;color:var(--bq);outline:none}
.bq-guide .bq-acc-copy.copied,.aq-guide .aq-acc-copy.copied{background:var(--bq);color:#fff}
.bq-guide .bq-acc-copy:after,.aq-guide .aq-acc-copy:after{content:"";position:absolute;top:-8px;right:-6px;bottom:-8px;left:-6px}
@media (pointer:coarse) {.bq-guide .bq-acc-copy,.aq-guide .aq-acc-copy{width:34px;height:34px;line-height:32px;margin-top:-17px}}

.bq-guide .bq-foot,.aq-guide .aq-foot{margin:26px 0 0;padding-top:16px;border-top:1px solid #e6eef0;color:#7b8892}

@media (max-width:767px) {
	/* tighter sides on a phone - 18px of inset inside a box that is itself inset breaks lines
	   early for no reason. The bottom stays 0 like the desktop rule: this override used to say
	   16px and was quietly putting the gap back that was taken out up there. */
	.bq-guide .bq-acc .panel-title>a,.aq-guide .aq-acc .panel-title>a{padding:11px 56px 11px 10px;font-size:17px}
	.bq-guide .bq-acc-copy,.aq-guide .aq-acc-copy{right:32px}
	.bq-guide .bq-acc .panel-body,.aq-guide .aq-acc .panel-body{padding:12px 10px 0}
}

/* ---- THE SHARED GUIDE LOOK (.help-*) - 23 Sep 2026 -------------------------
   One block for every admin help guide, instead of a copy per article.

   WHY. Guides used to follow "add a new prefix per article; do not reuse one",
   which kept each article's CSS from reaching any other page, and it worked - but
   it also meant a new guide was a COPY of the last one, so each picked its own accent and
   whichever layout was current that week. LMM ended up with twelve prefixes,
   four of them still the older flat layout with a white summary box, and nothing
   could be changed for all of them at once (Adam, 22 Sep 2026: "why do we still
   have style inconsistency ... blue vs pink, dark box vs white box").

   This block is the .tv- look - the accordion, the blue accent, the dark summary
   box - under names no single article owns.

   ⚠️ HOW TO ROLL IT OUT, AND WHY THIS ORDER MATTERS. An article BODY goes live
   the moment it is published; this stylesheet only reaches live on the next
   deploy. So the CSS goes first and the bodies follow, one at a time, each onto
   rules that are already out there. Renaming a body before its CSS is live is
   exactly how "Your notifications" spent nine days unstyled in August.

   Every guide moved across on 23 Sep 2026 and the per-article blocks were deleted
   the same night; part 3 below holds the one-off pieces they used to carry. A new
   guide uses these names and adds NOTHING per article - if it needs a new kind of
   box, add it to part 3 for every guide.

   An article that genuinely needs a different accent sets it on its wrapper:
   <div class="help-guide" style="--accent:#c83d82">. Nothing else varies.
   -------------------------------------------------------------------------- */

.help-guide{--accent:#2f5f8a;--cheat-key:#a9d0f5;--cheat-link:#d6e9ff;--tint:#f4f8fb;--tint-strong:#eef4f9;--ink:#22303a;--key-bg:#f4f7fb;--key-line:#dce5ef;--key-title:#2b4d75;--muted:#66757f;--caution:#c83d82;--caution-bg:#fdf3f8;--code-bg:#f4f6f8;--caution-line:#f2d3e3}
.help-guide .help-lead{font-size:18px;line-height:1.6;color:#3d4b55;border-left:4px solid var(--accent);padding-left:16px;margin:0 0 28px}
.help-guide .help-num{display:inline-block;min-width:29px;height:29px;line-height:29px;text-align:center;background:var(--accent);color:#fff;border-radius:50%;font-size:15px;margin-right:9px;vertical-align:2px}
.help-guide .help-note{background:#fff8e6;border:1px solid #f2e0b0;border-radius:8px;padding:13px 16px;margin:18px 0;font-size:15px;line-height:1.6}
.help-guide .help-note b{color:#8a6100}
.help-guide .help-table-wrap{overflow-x:auto;margin:18px 0}
.help-guide .help-table-wrap table{font-size:15px;margin-bottom:0}
.help-guide .help-table-wrap th{background:#f4f6f8;font-size:14px}
.help-guide .help-table-wrap td{vertical-align:top;line-height:1.55}
.help-guide .help-cheat{background:var(--ink);color:#e8eef2;border-radius:10px;padding:20px 24px;margin:30px 0 10px}
.help-guide .help-cheat h2{color:#fff;border-top:0;padding-top:0;margin:0 0 12px;font-size:20px}
.help-guide .help-cheat ul{margin:0;padding-left:20px}
.help-guide .help-cheat li{margin-bottom:7px;line-height:1.55}
.help-guide .help-cheat b{color:var(--cheat-key)}
/* !important, reluctantly: a dozen admin stylesheets set a link colour for this page and one of
   them was winning on the dark panel, which left a link unreadable against it.
   --cheat-link is deliberately brighter than --cheat-key so a link still reads as a link. */
.help-guide .help-cheat a{color:var(--cheat-link)!important;text-decoration:underline}
.help-guide .help-cheat a:hover,.help-guide .help-cheat a:focus{color:#fff!important}
.help-guide .help-acc{margin:0 0 26px}
.help-guide .help-acc .panel{border:1px solid #e2e8ec;border-radius:10px;box-shadow:none;margin:0 0 10px;background:#fff}
.help-guide .help-acc .panel+.panel{margin-top:10px}
.help-guide .help-acc .panel-heading{padding:0;background:#fff;border:0;border-radius:10px;position:relative}
.help-guide .help-acc .panel-title{font-size:inherit;margin:0;border:0;padding:0;color:inherit}
.help-guide .help-acc .panel-title>a{display:flex;align-items:flex-start;gap:2px;padding:13px 42px 13px 15px;position:relative;text-decoration:none;color:var(--ink);border-radius:10px}
.help-guide .help-acc .panel-title>a:hover,.help-guide .help-acc .panel-title>a:focus{background:#f4f8fb;text-decoration:none;color:var(--ink)}
.help-guide .help-acc .panel-title>a:not(.collapsed){background:#eef4f9;border-radius:10px 10px 0 0}
.help-guide .help-acc .panel-title>a .help-num{flex:0 0 auto;margin-top:1px}
.help-guide .help-acc .help-acc-txt{flex:1 1 auto;min-width:0}
.help-guide .help-acc .help-acc-t{display:block;font-size:22px;line-height:1.32;font-weight:700}
.help-guide .help-acc .help-acc-s{display:block;font-size:15px;line-height:1.45;color:#7b8892;font-weight:400;margin-top:2px}
.help-guide .help-acc .panel-title>a:after{content:"\e114";font-family:"Glyphicons Halflings";position:absolute;right:15px;top:50%;margin-top:-8px;font-size:12px;color:#93a2ac}
.help-guide .help-acc .panel-title>a:not(.collapsed):after{content:"\e113"}
/* 16px above the first thing in a section, whatever it is (Adam, 27 Sep 2026: a heading, picture or box first sat 2px
   under the header, because only a p/ol/ul first child got the 14px margin that made up the gap) */
.help-guide .help-acc .panel-body{border-top:1px solid #e6eef0;padding:16px 18px}
.help-guide .help-acc .panel-body>:first-child{margin-top:0}
.help-guide .help-acc .panel-body>:last-child,.help-guide .help-acc .panel-body>ul:last-child>li:last-child,
.help-guide .help-acc .panel-body>ol:last-child>li:last-child{margin-bottom:0}	/* lists only: a box's own last line keeps its spacing */
.help-guide .help-acc .panel-body>p:last-child:not([class]){padding-bottom:0}	/* plain paragraphs carry 8px of padding under them, which made a section ending in text 8px deeper at the bottom than the top. :not([class]) - a p.help-key is a BOX and keeps its own padding */
/* a table that opens or closes a section: no rule line along its top edge (every row carries a top border, so the first
   drew a second line 16px under the header). 7px of cell padding above the first row puts a chip in it (LIVE, NEXT) level
   with where a paragraph's letters start, 24px under the header: at 0 the filled chip sat 7px higher and looked cramped */
.help-guide .help-acc .panel-body>.help-table-wrap:first-child table>tbody>tr:first-child>td{border-top:0;padding-top:7px}
.help-guide .help-acc .panel-body>.help-table-wrap:last-child table>tbody>tr:last-child>td{padding-bottom:0}
@media (max-width:600px) {
.help-guide .help-acc .panel-title>a{padding:11px 36px 11px 12px}
.help-guide .help-acc .help-acc-t{font-size:19px}
.help-guide .help-acc .help-acc-s{font-size:13px}
.help-guide .help-acc .panel-body{padding:16px 13px}
}

/* ---- THE SHARED GUIDE LOOK, PART 2 - the rest of the guides (23 Sep 2026) ---------------
   The copy-a-link button beside each section title. help-article.js already wires any
   button carrying data-anchor; what was missing was this styling, so on the first guides
   moved across (LMM deals, GH search caching) it rendered as a bare grey browser button on
   a line of its own under the title. */
.help-guide .help-acc .panel-heading:has(.help-acc-copy) .panel-title>a{padding-right:76px}
.help-guide .help-acc-copy{position:absolute;right:38px;top:50%;margin-top:-15px;width:30px;height:30px;padding:0;border:0;background:transparent;color:#a4b1ba;border-radius:50%;line-height:28px;font-size:18px;text-align:center}
.help-guide .help-acc-copy:hover,.help-guide .help-acc-copy:focus{background:var(--tint-strong);color:var(--accent);outline:none}
.help-guide .help-acc-copy.copied{background:var(--accent);color:#fff}
.help-guide .help-acc-copy:after{content:"";position:absolute;top:-8px;right:-6px;bottom:-8px;left:-6px}
@media (pointer:coarse) {.help-guide .help-acc-copy{width:34px;height:34px;line-height:32px;margin-top:-17px}}
@media (max-width:600px) {
.help-guide .help-acc .panel-heading:has(.help-acc-copy) .panel-title>a{padding-right:70px}
.help-guide .help-acc-copy{right:34px}
}
/* The section titles are headings that happen to be links, and they stay the dark --ink.
   !important, as with the summary box links above: on GH two admin rules outrank any plain
   selector here - admin-shell.css paints every link orange at (0,4,1), and admin-header.css
   gives any link inside a .panel-heading the darker "link on a colour" ink at (0,8,2) - so the
   titles read as orange links on GH. LMM has neither rule; the line is harmless there. */
.help-guide .help-acc .panel-title>a,
.help-guide .help-acc .panel-title>a:hover,
.help-guide .help-acc .panel-title>a:focus{color:var(--ink)!important}

/* ---- THE SHARED GUIDE LOOK, PART 3 - the one-off pieces (23 Sep 2026) ----------------
   Every guide used to carry its own copy of these, one block per article under its own
   prefix (.dn-key, .eb-key, .sc-key ... nine key boxes, all nearly the same). Those
   blocks are gone; this is the one copy. A guide body is now just <div class="help-guide">
   and these names. Colours that differ between the sites come from the variables on the
   .help-guide line at the top of the shared block - never write a site colour here.

   The names avoid the generic callouts further up (.help-warn, .help-stop, .help-ok,
   .help-note): those style their first <b> as a heading, and a guide's boxes are written
   with a bold lead-in instead. .help-note is the one overlap, and is the guide's own.

     .help-h2      a heading outside the accordion (rare - most live inside it)
     .help-sub     the grey line under one
     .help-h3      a sub-heading inside a section
     .help-key     the blue/warm "key point" box, <h3> title optional
     .help-aside   a plain bordered box beside the text
     .help-alert   red: this is the thing that goes wrong
     .help-caution the site colour: do not do this
     .help-chip    an inline status label; colour by a second class
                   (green red amber grey purple blue accent wa)
     .help-btn     an inline picture of an admin button (.del red, .go green)
     .help-tiles   the row of tiles under a lead paragraph
     .help-cat     an icon + title + line row
     .help-tokens  a two-column table of merge fields
     .help-open    the paragraph holding an "Open the X page" button
   -------------------------------------------------------------------------------------- */
.help-guide h2.help-h2{font-size:23px;line-height:1.3;color:var(--ink);margin:36px 0 4px}
.help-guide .help-sub{color:var(--muted);margin:0 0 16px}
.help-guide .help-h3{font-size:18px;color:var(--ink);margin:30px 0 6px}
.help-guide .help-h3 b{font-weight:700}
.help-guide .help-key{background:var(--key-bg);border:1px solid var(--key-line);border-left:4px solid var(--accent);border-radius:8px;padding:16px 18px;margin:20px 0}
.help-guide .help-key h3{margin:0 0 8px;font-size:17px;color:var(--key-title)}
.help-guide .help-aside{border:1px solid var(--key-line);border-radius:8px;padding:14px 17px;margin:16px 0}
.help-guide .help-aside h3{margin:0 0 6px;font-size:17px;color:var(--key-title)}
.help-guide .help-aside p:last-child{margin-bottom:0}
.help-guide .help-alert{background:#fdf0ef;border:1px solid #e9c4bf;border-left:4px solid #a94442;border-radius:8px;padding:14px 17px;margin:20px 0;font-size:15px;line-height:1.6}
.help-guide .help-alert b{color:#8c2f26}
.help-guide .help-alert h3{margin:0 0 8px;font-size:17px;color:#a2352f}
.help-guide .help-caution{background:var(--caution-bg);border:1px solid var(--caution-line);border-radius:10px;padding:18px 22px;margin:24px 0}
.help-guide .help-caution h3{margin:0 0 8px;font-size:17px;color:var(--caution)}
.help-guide .help-chip{display:inline-block;color:#fff;border-radius:4px;padding:1px 7px;font-size:12.5px;font-weight:700;white-space:nowrap;background:#7c8994}
.help-guide .help-chip.green{background:#2e8b57}
.help-guide .help-chip.red{background:#c9302c}
.help-guide .help-chip.amber{background:#e0a10f}
.help-guide .help-chip.grey{background:#7c8994}
.help-guide .help-chip.purple{background:#7952b3}
.help-guide .help-chip.blue{background:#3f6fa8}
.help-guide .help-chip.accent{background:var(--accent)}
.help-guide .help-chip.wa{background:#25a55a}
/* .go is green because CANCEL BOOKING / RESTORE really are green buttons on GH since the
   3 Sep 2026 admin redesign (.admin-shell-v2 .btn-success) - the picture matches the button. */
.help-guide .help-btn{display:inline-block;padding:1px 7px;border-radius:3px;font-size:13px;font-weight:600;color:#fff;white-space:nowrap;background:#7c8994}
.help-guide .help-btn.del{background:#d9534f}
.help-guide .help-btn.go{background:#2e7d32}
.help-guide .help-tiles{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 30px;padding:0;list-style:none}
.help-guide .help-tiles li{flex:1 1 170px;background:var(--key-bg);border:1px solid var(--key-line);border-radius:10px;padding:16px 14px}
/* the icon as a block one line high (Adam, 27 Sep 2026: more space above the icon than below the text). Inline, it sat in
   a 32px line box and began about 25px down, against about 21px under the last line of text */
.help-guide .help-tiles i{display:block;font-size:22px;line-height:1;color:var(--accent);margin-top:4px}
.help-guide .help-tiles b{display:block;color:var(--ink);font-size:15px;margin:14px 0 3px}
.help-guide .help-tiles span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted)}
.help-guide .help-cat{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--key-line)}
.help-guide .help-cat:first-of-type{border-top:0}
.help-guide .help-cat i{color:var(--accent);font-size:20px;line-height:1.3;flex:0 0 auto;width:24px;text-align:center}
.help-guide .help-cat b{display:block;color:var(--ink)}
.help-guide .help-cat span{color:var(--muted);font-size:15px;line-height:1.55}
.help-guide .help-tokens td{vertical-align:top;line-height:1.55}
.help-guide .help-tokens td:first-child{white-space:nowrap;width:1%;padding-right:18px}
.help-guide .help-open{margin:0 0 24px}
.help-guide .help-procedure{background:var(--key-bg);border:1px solid var(--key-line);border-radius:8px;padding:18px 22px;margin:18px 0}
.help-guide .help-procedure ol{margin-bottom:0;padding-left:18px}
.help-guide .help-procedure li{margin-bottom:16px}
.help-guide .help-procedure li:last-child{margin-bottom:0}
.help-guide .help-table-wrap table{width:100%}
.help-guide code{font-size:13.5px;background:var(--code-bg);color:var(--key-title);padding:1px 5px;border-radius:3px;white-space:normal;word-break:break-word}
@media (max-width:600px){.help-guide .help-tiles li{flex:1 1 100%}}
/* WhatsApp's own pictures - a phone, a form, a template list. Only that guide draws these,
   and they keep WhatsApp's green on purpose: it is WhatsApp's colour, not an accent. */
.help-guide .wa-where{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 20px}
.help-guide .wa-where-item{flex:1 1 250px;background:#f8fafb;border:1px solid #e2e8ec;border-left:4px solid #25a55a;border-radius:8px;padding:14px 16px}
.help-guide .wa-where-item b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:5px}
.help-guide .wa-where-item b i{color:#25a55a;margin-right:6px}
.help-guide .wa-where-item span{display:block;font-size:14.5px;line-height:1.55;color:#55636d}
.help-guide .wa-sj{background:var(--caution-bg);border:1px solid var(--caution-line);border-radius:10px;padding:20px 22px;margin:26px 0}
.help-guide .wa-sj h2{font-size:23px;color:var(--caution);margin:0 0 4px;padding:0;border:0}
.help-guide .wa-tpl{font-size:15px}
.help-guide .wa-tpl th{background:#f4f6f8;font-size:14px}
.help-guide .wa-tpl td{vertical-align:top;font-size:14px;line-height:1.55}
.help-guide .wa-tpl .n{display:block;font-weight:700;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.help-guide .wa-tpl .w{display:block;color:#3d4b55}
.help-guide .wa-tpl .btn-chip{display:inline-block;background:#eef4fb;border:1px solid #cfe0f2;color:#2b4d75;border-radius:4px;padding:1px 8px;font-size:12.5px;font-weight:700;margin-top:7px;margin-right:4px}
.help-guide .wa-tiny{display:inline-block;font-size:12.5px;color:#8a97a1;margin-top:6px}
.help-guide .tslot{font-weight:700;color:var(--caution);white-space:nowrap}
.help-guide .wa-phone{max-width:340px;margin:14px 0 5px;background:#e7ded3;border:1px solid #d6cbbd;border-radius:10px;padding:12px}
.help-guide .wa-phone .wa-in{background:#fff;border-radius:8px 8px 8px 2px;padding:11px 13px;font-size:14.5px;line-height:1.55;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.help-guide .wa-phone .wa-cta{margin:9px -13px -3px;border-top:1px solid #e9e9e9;padding:8px 0 2px;text-align:center;color:#128c7e;font-weight:700;font-size:14.5px}
.help-guide .wa-mockcap{font-size:12.5px;color:#8a8a8a;margin:0 0 20px;font-style:italic}
.help-guide .wa-flow{max-width:330px;margin:14px 0 5px;border:1px solid #dfe3e7;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.help-guide .wa-flow-bar{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #ededed;font-weight:700;font-size:14.5px}
.help-guide .wa-flow-bar b{font-weight:700;flex:1;text-align:center}
.help-guide .wa-flow-body{padding:13px}
.help-guide .wa-flow-intro{font-size:13.5px;color:#4a4a4a;line-height:1.5;margin:0 0 12px}
.help-guide .wa-flow-fld{border:1px solid #c9cdd1;border-radius:7px;padding:11px 12px;margin-bottom:11px;color:#8b9096;font-size:14px;display:flex;align-items:center}
.help-guide .wa-flow-fld span{flex:1}
.help-guide .wa-flow-fld.tall{height:64px;align-items:flex-start}
.help-guide .wa-flow-send{background:#f1f2f3;color:#a8adb2;border-radius:22px;text-align:center;padding:11px;font-size:14.5px;font-weight:600;margin-top:2px}
.help-guide .wa-flow-foot{text-align:center;font-size:11.5px;color:#8b9096;padding:8px 0 2px}
.help-guide .wa-flow-foot i{color:#128c7e;font-style:normal}

/* THE SCREENSHOT VIEWER (help-article.js, Adam 27 Sep 2026: "click on screenshots in the admin help to see them bigger in a
   modal (like a gallery popup)"). A dark full-screen box over the article: the count, "Open full size" and the cross along
   the top, the picture as big as fits, arrows at the sides, the caption under it. Staff articles only. Twin: the GH copy
   of this sheet carries the same block. */
.help-article-content figure.help-screenshot img { cursor: zoom-in; }
html.help-lb-open, html.help-lb-open body { overscroll-behavior: none; }
.help-lb { position: fixed; inset: 0; z-index: 1080; display: flex; flex-direction: column; background: rgba(18, 14, 11, .97); color: #fff;
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
	-webkit-tap-highlight-color: transparent; }
.help-lb[hidden] { display: none; }
.help-lb:focus { outline: none; }
.help-lb-top { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 8px 0 20px; font-size: 14px; }
.help-lb-count { flex: 1 1 auto; color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; }
.help-lb .help-lb-full, .help-lb .help-lb-full:hover, .help-lb .help-lb-full:focus { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.help-lb-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.help-lb-btn:hover { background: rgba(255, 255, 255, .22); }
.help-lb-btn[hidden] { display: none; }
.help-lb-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 76px; }
.help-lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; background: #fff;
	box-shadow: 0 6px 30px rgba(0, 0, 0, .45); }
.help-lb-prev, .help-lb-next { position: absolute; top: 50%; margin-top: -22px; width: 48px; height: 48px; }
.help-lb-prev { left: calc(14px + env(safe-area-inset-left, 0px)); }
.help-lb-next { right: calc(14px + env(safe-area-inset-right, 0px)); }
.help-lb-next svg { transform: scaleX(-1); }
.help-lb-cap { flex: 0 0 auto; max-height: 30vh; overflow-y: auto; padding: 12px 24px 20px; text-align: center; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.help-lb-cap[hidden] { display: none; }
.help-lb-cap b { color: #fff; }
@media (max-width: 767px) {
	.help-lb-top { padding-left: 16px; }
	.help-lb-stage { padding: 4px 12px; }
	/* on a phone the arrows sit low, clear of the picture's middle, and swiping does the same job */
	.help-lb-prev, .help-lb-next { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin-top: 0; width: 44px; height: 44px; }
	.help-lb-cap { padding: 10px 68px 18px; min-height: 72px; font-size: 14px; }
	/* A LONG BUTTON LABEL MAY WRAP ON A PHONE (27 Sep 2026): "Remove the Facebook link from N account(s)" in a table cell
	   could not break, pushed its table 29px wider than the screen and made the whole article scroll sideways */
	.help-guide .help-btn { white-space: normal; }
}