/* In-house CMS: help knowledge-base styles (admin help).
   Design language shared with the public Gig Heaven help pages, in the GH
   accent orange (#c06014 = .btn-pink). Ported from the LMM copy of the same
   sheet (lmm r14079). Loaded on top of the site bootstrap bundle via
   /bs/<rev>/help.css - only the /admin_files/help templates link it. */

/* ---- 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: #c06014;
	outline: 1px solid #c06014;
	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;
}

.popular-article-link-container:hover {
	background-color: rgba(255, 255, 255, 0.15) !important;
	border-radius: 12px;
}

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

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

/* The admin_help section renders in the admin.dwt chrome on a white page,
   so its popular row brings its own dark band (public help lays the row on
   the page's dark section). Wrapper emitted by showHelpHome (Cms.pm). */
.admin-help-popular-band {
	background: #c06014;
	border-radius: 12px;
	padding: 8px 25px 20px;
	margin-bottom: 10px;
}

/* the admin chrome styles bare h2 small; keep the band title level with the
   category titles (.help-home-cat-title) below it */
.admin-help-popular-band h2 {
	font-size: 24px;
}

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

.help-home-cat-title {
	font-size: 24px;
	margin: 10px 0 14px;
	color: #000;
}

.help-home-cat-title i {
	color: #c06014;
	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: #c06014;
	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: #c06014;
	outline: 1px solid #c06014;
}

.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: #c06014;
}

.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: #4a4540;
	border-left: 4px solid #c06014;
	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: #4a4540;
	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
   orange on the button's orange fill, an invisible button (Adam, 4 Sep 2026,
   on the contract guide's Go to My Account). */
.help-article-content a:not(.btn) {
	color: #c06014;
}

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

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

.help-article-content code {
	background: #faf6f2;
	border: 1px solid #e6dfd8;
	border-radius: 4px;
	color: #92490f;
	font-size: 14px;
	padding: 1px 6px;
}

/* ---- 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: #c06014;
	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: #c06014;
}

/* ---- 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 #e6dfd8;
	border-left: 4px solid #8b8289;
	border-radius: 14px;
	padding: 16px 20px;
	margin: 24px 0;
	background: #faf6f2;
}

.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: #fdf6ef;
	border-color: #f0dcc2;
	border-left-color: #c06014;
}

.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: #92490f;
}

.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: #fdf7f1;
	border-color: #ecdcc9;
	border-left-color: #92490f;
}

.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: #92490f;
}

/* ---- 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 #e6dfd8;
	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: #c06014;
	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 #e6dfd8;
	border-radius: 6px;
	color: #4a4540;
	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 #e6dfd8;
	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 #f5f2ef;
	padding: 13px 16px;
	text-align: left;
	vertical-align: top;
	font-size: 16px;
	line-height: 1.6;
}

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

/* 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: #fbf8f4;
	color: #191919;
	font-weight: 700;
	border-right: 1px solid #f5f2ef;
}

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

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

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

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

.help-sidebar-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 10px;
}

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

.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: #c06014;
}

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

.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: #c06014;
}

.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: #f7f0e8;
	color: #c06014;
	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;
}


/* ---- per-article guide styles --------------------------------------------

   These belong here rather than in a <style> block inside the article body,
   because the CMS post editor is a WYSIWYG: opening an article in it and
   saving parses the HTML into the editor's own document model and writes it
   back, which silently DROPS any <style> the body carried. That is not
   hypothetical - it happened to "Your notifications" (post 1000004) between
   25 and 31 Aug 2026, and the page rendered unstyled for nine days without
   anything looking broken enough to notice.

   Every rule below is scoped to its own article wrapper (.yn-guide,
   .dn-guide), so nothing here can reach any other page. Add a new prefix per
   article; do not reuse one.
   -------------------------------------------------------------------------- */

/* "Your notifications: choosing what reaches your phone" (admin help) */

.yn-guide {
	--yn: #c06014;
	--pink: #c06014;
	--ink: #2a2724;
}

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

.yn-guide h2 {
	font-size: 23px;
	color: var(--ink);
	margin: 38px 0 4px;
	padding-top: 22px;
	border-top: 2px solid #f1eeeb;
}

.yn-guide h2:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.yn-guide h2 .yn-num {
	display: inline-block;
	min-width: 29px;
	height: 29px;
	line-height: 29px;
	text-align: center;
	background: var(--yn);
	color: #fff;
	border-radius: 50%;
	font-size: 15px;
	margin-right: 9px;
	vertical-align: 2px;
}

.yn-guide .yn-sub {
	color: #8a8079;
	margin: 0 0 14px;
	font-size: 15px;
}

.yn-guide .yn-h3 {
	font-size: 18px;
	color: var(--ink);
	margin: 30px 0 6px;
}

.yn-guide .yn-note {
	background: #fff8e6;
	border: 1px solid #f2e0b0;
	border-radius: 8px;
	padding: 13px 16px;
	margin: 18px 0;
	font-size: 15px;
	line-height: 1.6;
}

.yn-guide .yn-note b {
	color: #8a6100;
}

.yn-guide .yn-key {
	background: #fdf7f1;
	border: 1px solid #ecdcc9;
	border-left: 4px solid var(--yn);
	border-radius: 8px;
	padding: 16px 18px;
	margin: 20px 0;
}

.yn-guide .yn-key h3 {
	margin: 0 0 8px;
	font-size: 17px;
	color: #92490f;
}

.yn-guide table {
	font-size: 15px;
	width: 100%;
}

.yn-guide table th {
	background: #f7f4f1;
	font-size: 14px;
}

.yn-guide table td {
	vertical-align: top;
	line-height: 1.55;
}

.yn-guide .yn-cat {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid #f1eeeb;
}

.yn-guide .yn-cat:first-of-type {
	border-top: 0;
}

.yn-guide .yn-cat i {
	color: var(--yn);
	font-size: 20px;
	line-height: 1.3;
	flex: 0 0 auto;
	width: 24px;
	text-align: center;
}

.yn-guide .yn-cat b {
	display: block;
	color: var(--ink);
}

.yn-guide .yn-cat span {
	color: #6b625b;
	font-size: 15px;
	line-height: 1.55;
}

.yn-guide .yn-cheat {
	background: var(--ink);
	color: #f7f0e8;
	border-radius: 10px;
	padding: 20px 24px;
	margin: 30px 0 10px;
}

.yn-guide .yn-cheat h2 {
	color: #fff;
	border-top: 0;
	padding-top: 0;
	margin: 0 0 12px;
	font-size: 20px;
}

.yn-guide .yn-cheat ul {
	margin: 0;
	padding-left: 20px;
}

.yn-guide .yn-cheat li {
	margin-bottom: 7px;
	line-height: 1.55;
}

.yn-guide .yn-cheat b {
	color: #e0a86a;
}

/* "Deleting and restoring accounts" (admin help) */

.dn-guide {
	--dn: #c06014;
	--pink: #c06014;
	--ink: #2a2724;
	--red: #a94442;
}

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

.dn-guide h2 {
	font-size: 23px;
	color: var(--ink);
	margin: 38px 0 4px;
	padding-top: 22px;
	border-top: 2px solid #f1eeeb;
}

.dn-guide h2:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.dn-guide h2 .dn-num {
	display: inline-block;
	min-width: 29px;
	height: 29px;
	line-height: 29px;
	text-align: center;
	background: var(--dn);
	color: #fff;
	border-radius: 50%;
	font-size: 15px;
	margin-right: 9px;
	vertical-align: 2px;
}

.dn-guide .dn-sub {
	color: #8a8079;
	margin: 0 0 14px;
	font-size: 15px;
}

.dn-guide .dn-h3 {
	font-size: 18px;
	color: var(--ink);
	margin: 30px 0 6px;
}

.dn-guide .dn-note {
	background: #fff8e6;
	border: 1px solid #f2e0b0;
	border-radius: 8px;
	padding: 13px 16px;
	margin: 18px 0;
	font-size: 15px;
	line-height: 1.6;
}

.dn-guide .dn-note b {
	color: #8a6100;
}

.dn-guide .dn-stop {
	background: #fdf0ef;
	border: 1px solid #e9c4bf;
	border-left: 4px solid var(--red);
	border-radius: 8px;
	padding: 14px 17px;
	margin: 20px 0;
	font-size: 15px;
	line-height: 1.6;
}

.dn-guide .dn-stop b {
	color: #8c2f26;
}

.dn-guide .dn-key {
	background: #fdf7f1;
	border: 1px solid #ecdcc9;
	border-left: 4px solid var(--dn);
	border-radius: 8px;
	padding: 16px 18px;
	margin: 20px 0;
}

.dn-guide .dn-key h3 {
	margin: 0 0 8px;
	font-size: 17px;
	color: #92490f;
}

.dn-guide table {
	font-size: 15px;
	width: 100%;
}

.dn-guide table th {
	background: #f7f4f1;
	font-size: 14px;
}

.dn-guide .dn-btn {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 3px;
	font-size: 13px;
	color: #fff;
	white-space: nowrap;
}

.dn-guide .dn-btn-del {
	background: #d9534f;
}

.dn-guide .dn-btn-res {
	background: #5cb85c;
}

.dn-guide .dn-cheat {
	background: #fdf7f1;
	border: 1px solid #ecdcc9;
	border-radius: 8px;
	padding: 18px 22px;
	margin: 34px 0 0;
}

.dn-guide .dn-cheat h2 {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
	font-size: 20px;
}

.dn-guide .dn-cheat ul {
	margin: 0;
	padding-left: 20px;
}

.dn-guide .dn-cheat li {
	margin-bottom: 7px;
}

/* "Cancelling and restoring a booking" (admin help) - accordion sections.
   Same pattern as .ma-acc below: bootstrap collapse panels, one open at a time,
   number + title + one-line summary in the header. Kept per-article per the note
   at the top of this section rather than shared, so a change to one guide cannot
   silently restyle the other. If a third article wants it, promote all three to a
   shared .help-acc then and rename in one pass. */

.dn-guide .dn-btn-gh {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	/* CANCEL BOOKING / RESTORE render GREEN on Gig Heaven since the 3 Sep 2026
	   admin redesign (.admin-shell-v2 .btn-success = #2e7d32; the old black
	   site-wide override is gone) - the inline chips match the real buttons. */
	background: #2e7d32;
	white-space: nowrap;
}

.dn-guide .dn-side {
	border: 1px solid #ecdcc9;
	border-radius: 8px;
	padding: 14px 17px;
	margin: 16px 0;
}

.dn-guide .dn-side h3 {
	margin: 0 0 6px;
	font-size: 17px;
	color: #92490f;
}

.dn-guide .dn-side p:last-child { margin-bottom: 0; }

.dn-guide .dn-scroll { overflow-x: auto; }

.dn-guide .dn-acc { margin: 0 0 26px; }

.dn-guide .dn-acc .panel {
	border: 1px solid #e8ddd2;
	border-radius: 10px;
	box-shadow: none;
	margin: 0 0 10px;
	background: #fff;
}

.dn-guide .dn-acc .panel + .panel { margin-top: 10px; }

.dn-guide .dn-acc .panel-heading {
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 10px;
}

/* The section headings are h2s, and .dn-guide h2 above gives every h2 a 2px top
   rule, 38px of margin and 23px type. Inside a panel header that is chrome, not a
   heading, so every one of those has to be unwound here or the accordion grows a
   rule between each panel and its own title. */
.dn-guide .dn-acc .panel-title {
	font-size: inherit;
	margin: 0;
	border: 0;
	border-top: 0;
	padding: 0;
	padding-top: 0;
	color: inherit;
}

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

.dn-guide .dn-acc .panel-title > a:hover,
.dn-guide .dn-acc .panel-title > a:focus {
	background: #fbf6f1;
	text-decoration: none;
	color: var(--ink);
}

.dn-guide .dn-acc .panel-title > a:focus-visible {
	outline: 2px solid var(--dn);
	outline-offset: -2px;
}

.dn-guide .dn-acc .panel-title > a:not(.collapsed) {
	background: #faf2e9;
	border-radius: 10px 10px 0 0;
}

/* The numbered disc is the same one .dn-guide h2 .dn-num draws, re-set for a flex
   header: no vertical-align (there is no baseline to sit on in a flex row) and a
   flex-basis so a two-digit number cannot squash it. */
.dn-guide .dn-acc .dn-num {
	flex: 0 0 auto;
	vertical-align: baseline;
	margin: 1px 9px 0 0;
}

.dn-guide .dn-acc .dn-acc-txt {
	flex: 1 1 auto;
	min-width: 0;
}

.dn-guide .dn-acc .dn-acc-t {
	display: block;
	font-size: 19px;
	line-height: 1.32;
	font-weight: 700;
}

.dn-guide .dn-acc .dn-acc-s {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: #8a8079;
	font-weight: 400;
	margin-top: 2px;
}

.dn-guide .dn-acc .panel-title > a:after {
	content: "\e114";
	font-family: "Glyphicons Halflings";
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -8px;
	font-size: 12px;
	color: #b3a595;
}

.dn-guide .dn-acc .panel-title > a:not(.collapsed):after { content: "\e113"; }

.dn-guide .dn-acc .panel-body {
	border-top: 1px solid #f1e8dd;
	padding: 2px 18px 18px;
}

.dn-guide .dn-acc .panel-body > p:first-child,
.dn-guide .dn-acc .panel-body > .dn-h3:first-child { margin-top: 14px; }

@media (max-width: 600px) {
	.dn-guide .dn-acc .panel-title > a { padding: 11px 34px 11px 12px; }
	.dn-guide .dn-acc .dn-acc-t { font-size: 17px; }
	.dn-guide .dn-acc .dn-acc-s { font-size: 13px; }
	.dn-guide .dn-acc .panel-body { padding: 2px 13px 15px; }
}

/* "How the automated marketing system works" (admin help) */

.ma-guide {
	--ma: #c06014;
	--ink: #2a2724;
	--green: #3c763d;
	--red: #a94442;
}

.ma-guide .ma-lead {
	font-size: 18px;
	line-height: 1.6;
	color: #4a4540;
	border-left: 4px solid var(--ma);
	padding-left: 16px;
	margin: 0 0 26px;
}

.ma-guide .ma-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.ma-guide .ma-tiles li {
	flex: 1 1 200px;
	background: #fbf6f1;
	border: 1px solid #ecdcc9;
	border-radius: 10px;
	padding: 16px 14px;
}

.ma-guide .ma-tiles b {
	display: block;
	color: var(--ink);
	font-size: 15px;
	margin: 6px 0 3px;
}

.ma-guide .ma-tiles span {
	display: block;
	font-size: 13.5px;
	line-height: 1.5;
	color: #8a8079;
}

.ma-guide .ma-tiles i {
	font-size: 22px;
	color: var(--ma);
}

@media (max-width: 600px) {
	.ma-guide .ma-tiles li { flex: 1 1 100%; }
}

/* status chips */

.ma-guide .ma-chip {
	display: inline-block;
	border-radius: 4px;
	padding: 1px 7px;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	background: var(--green);
	white-space: nowrap;
	vertical-align: 1px;
}

.ma-guide .ma-chip.person { background: var(--ma); }
.ma-guide .ma-chip.planned { background: #7c8994; }
.ma-guide .ma-chip.warn { background: #e0a10f; }
.ma-guide .ma-chip.stop { background: var(--red); }

/* accordion (bootstrap collapse panels) */

.ma-guide .ma-acc { margin: 0 0 26px; }

.ma-guide .ma-acc .panel {
	border: 1px solid #e8ddd2;
	border-radius: 10px;
	box-shadow: none;
	margin: 0 0 10px;
	background: #fff;
}

.ma-guide .ma-acc .panel + .panel { margin-top: 10px; }

.ma-guide .ma-acc .panel-heading {
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 10px;
}

.ma-guide .ma-acc .panel-title {
	font-size: inherit;
	margin: 0;
	border: 0;
	padding: 0;
	color: inherit;
}

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

.ma-guide .ma-acc .panel-title > a:hover,
.ma-guide .ma-acc .panel-title > a:focus {
	background: #fbf6f1;
	text-decoration: none;
	color: var(--ink);
}

.ma-guide .ma-acc .panel-title > a:not(.collapsed) {
	background: #faf2e9;
	border-radius: 10px 10px 0 0;
}

.ma-guide .ma-num {
	display: inline-block;
	flex: 0 0 auto;
	min-width: 29px;
	height: 29px;
	line-height: 29px;
	text-align: center;
	background: var(--ma);
	color: #fff;
	border-radius: 50%;
	font-size: 15px;
	margin: 1px 9px 0 0;
}

.ma-guide .ma-acc .ma-acc-txt {
	flex: 1 1 auto;
	min-width: 0;
}

.ma-guide .ma-acc .ma-acc-t {
	display: block;
	font-size: 19px;
	line-height: 1.32;
	font-weight: 700;
}

.ma-guide .ma-acc .ma-acc-s {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: #8a8079;
	font-weight: 400;
	margin-top: 2px;
}

.ma-guide .ma-acc .panel-title > a:after {
	content: "\e114";
	font-family: "Glyphicons Halflings";
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -8px;
	font-size: 12px;
	color: #b3a595;
}

.ma-guide .ma-acc .panel-title > a:not(.collapsed):after { content: "\e113"; }

.ma-guide .ma-acc .panel-body {
	border-top: 1px solid #f1e8dd;
	padding: 2px 18px 18px;
}

.ma-guide .ma-acc .panel-body > h3:first-child,
.ma-guide .ma-acc .panel-body > p:first-child { margin-top: 14px; }

@media (max-width: 600px) {
	.ma-guide .ma-acc .panel-title > a { padding: 11px 34px 11px 12px; }
	.ma-guide .ma-acc .ma-acc-t { font-size: 17px; }
	.ma-guide .ma-acc .ma-acc-s { font-size: 13px; }
	.ma-guide .ma-acc .panel-body { padding: 2px 13px 15px; }
}

/* content pieces inside panels */

.ma-guide .ma-h3 {
	font-size: 17px;
	color: var(--ink);
	margin: 22px 0 6px;
}

.ma-guide .ma-note {
	background: #fff8e6;
	border: 1px solid #f2e0b0;
	border-radius: 8px;
	padding: 13px 16px;
	margin: 16px 0;
	font-size: 15px;
	line-height: 1.6;
}

.ma-guide .ma-note b { color: #8a6100; }

.ma-guide .ma-key {
	background: #fbf6f1;
	border: 1px solid #ecdcc9;
	border-left: 4px solid var(--ma);
	border-radius: 8px;
	padding: 14px 17px;
	margin: 16px 0;
	font-size: 15px;
	line-height: 1.6;
}

.ma-guide .ma-key b { color: #92490f; }

.ma-guide table { font-size: 15px; }

.ma-guide table th {
	background: #f8f4ef;
	font-size: 14px;
}

.ma-guide .ma-scroll { overflow-x: auto; }

.ma-guide .ma-cheat {
	background: var(--ink);
	color: #efe9e3;
	border-radius: 10px;
	padding: 20px 24px;
	margin: 26px 0 10px;
}

.ma-guide .ma-cheat h2 {
	color: #fff;
	border-top: 0;
	padding-top: 0;
	margin: 0 0 12px;
	font-size: 20px;
}

.ma-guide .ma-cheat ul {
	margin: 0;
	padding-left: 20px;
}

.ma-guide .ma-cheat li {
	margin-bottom: 7px;
	line-height: 1.55;
}

.ma-guide .ma-cheat b { color: #f0a868; }

.ma-guide .ma-cheat a { color: #f0a868; }


/* "Why search results can look out of date" (admin help) - the 2026-09 search speed work.
   Own prefix rather than the shared .help-acc the .dn-acc note above suggests:
   promoting the existing accordions would mean renaming classes in article bodies, which
   go live the instant they are published, while this stylesheet only reaches live on the
   next deploy - so the promotion would guarantee a window with the older guides unstyled.
   Do it as its own pass, with the CSS already out there. */

.sc-guide{--sc:#C06014;--ink:#22303a}
.sc-guide .sc-lead{font-size:18px;line-height:1.6;color:#3d4b55;border-left:4px solid var(--sc);padding-left:16px;margin:0 0 28px}
.sc-guide .sc-num{display:inline-block;min-width:29px;height:29px;line-height:29px;text-align:center;background:var(--sc);color:#fff;border-radius:50%;font-size:15px;margin-right:9px;vertical-align:2px}
.sc-guide .sc-h3{font-size:18px;color:var(--ink);margin:26px 0 6px}
.sc-guide .sc-h3 b{font-weight:700}
.sc-guide .sc-note{background:#fff8e6;border:1px solid #f2e0b0;border-radius:8px;padding:13px 16px;margin:18px 0;font-size:15px;line-height:1.6}
.sc-guide .sc-note b{color:#8a6100}
.sc-guide .sc-key{background:#f4f7fb;border:1px solid #dce5ef;border-left:4px solid var(--sc);border-radius:8px;padding:16px 18px;margin:20px 0}
.sc-guide .sc-key h3{margin:0 0 8px;font-size:17px;color:#8a4a12}
.sc-guide .sc-table-wrap{overflow-x:auto;margin:18px 0}
.sc-guide .sc-table-wrap table{font-size:15px;margin-bottom:0}
.sc-guide .sc-table-wrap th{background:#f4f6f8;font-size:14px}
.sc-guide .sc-table-wrap td{vertical-align:top;line-height:1.55}
.sc-guide .sc-cheat{background:var(--ink);color:#e8eef2;border-radius:10px;padding:20px 24px;margin:30px 0 10px}
.sc-guide .sc-cheat h2{color:#fff;border-top:0;padding-top:0;margin:0 0 12px;font-size:20px}
.sc-guide .sc-cheat ul{margin:0;padding-left:20px}
.sc-guide .sc-cheat li{margin-bottom:7px;line-height:1.55}
.sc-guide .sc-cheat b{color:#f0a868}

.sc-guide .sc-acc{margin:0 0 26px}
.sc-guide .sc-acc .panel{border:1px solid #e2e8ec;border-radius:10px;box-shadow:none;margin:0 0 10px;background:#fff}
.sc-guide .sc-acc .panel+.panel{margin-top:10px}
.sc-guide .sc-acc .panel-heading{padding:0;background:#fff;border:0;border-radius:10px;position:relative}
.sc-guide .sc-acc .panel-title{font-size:inherit;margin:0;border:0;padding:0;color:inherit}
.sc-guide .sc-acc .panel-title>a{display:flex;align-items:flex-start;gap:2px;padding:13px 76px 13px 15px;position:relative;text-decoration:none;color:var(--ink);border-radius:10px}
.sc-guide .sc-acc .panel-title>a:hover,.sc-guide .sc-acc .panel-title>a:focus{background:#fdf7f2;text-decoration:none;color:var(--ink)}
.sc-guide .sc-acc .panel-title>a:not(.collapsed){background:#fbf1e9;border-radius:10px 10px 0 0}
.sc-guide .sc-acc .panel-title>a .sc-num{flex:0 0 auto;margin-top:1px}
.sc-guide .sc-acc .sc-acc-txt{flex:1 1 auto;min-width:0}
.sc-guide .sc-acc .sc-acc-t{display:block;font-size:19px;line-height:1.32;font-weight:700}
.sc-guide .sc-acc .sc-acc-s{display:block;font-size:14px;line-height:1.45;color:#7b8892;font-weight:400;margin-top:2px}
.sc-guide .sc-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}
.sc-guide .sc-acc .panel-title>a:not(.collapsed):after{content:"\e113"}
.sc-guide .sc-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}
.sc-guide .sc-acc-copy:hover,.sc-guide .sc-acc-copy:focus{background:#f7e6d8;color:var(--sc);outline:none}
.sc-guide .sc-acc-copy.copied{background:var(--sc);color:#fff}
.sc-guide .sc-acc-copy:after{content:"";position:absolute;top:-8px;right:-6px;bottom:-8px;left:-6px}
@media (pointer:coarse){.sc-guide .sc-acc-copy{width:34px;height:34px;line-height:32px;margin-top:-17px}}
.sc-guide .sc-acc .panel-body{border-top:1px solid #e6eef0;padding:2px 18px 18px}
.sc-guide .sc-acc .panel-body>p:first-child,.sc-guide .sc-acc .panel-body>ol:first-child{margin-top:14px}
@media (max-width:600px){
.sc-guide .sc-acc .panel-title>a{padding:11px 70px 11px 12px}
.sc-guide .sc-acc-copy{right:34px}
.sc-guide .sc-acc .sc-acc-t{font-size:17px}
.sc-guide .sc-acc .sc-acc-s{font-size:13px}
.sc-guide .sc-acc .panel-body{padding:2px 13px 15px}
}

/* --------------------------------------------------------------------------
   Evening mode: the help search box, and the title as a way home.
   Ported from LMM 7 Sep 2026 - Adam spotted the same fault on GH admin help.

   admin-header.css re-skins every .form-control to var(--av2-surface) with
   !important under :root[data-av2-evening="1"]. The rounded pill that WRAPS the
   help search is not a .form-control, so it stayed pure #fff while the input
   inside it turned surface - a white pill with a visibly greyer rectangle in it,
   on a tinted ground. Match the wrapper to its input so the box reads as one
   control again. The suggestions panel hangs off the same box.
   -------------------------------------------------------------------------- */

: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. It has to keep
   looking like the title, not like a link, so it inherits its colour. */
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}