/* Colours — row and item styles only

   The palette for the generic row / item vocabulary further down the file, kept
   here so re-theming a listing is one block rather than a hunt through the
   declarations. Nothing else in this file has been converted: the values still
   written literally below are the ones that were already there, and moving them
   would change what a client override has to target.

   Declared on #account-management, not :root, so the names stay inside the
   account area like every other rule in this file. They inherit to everything
   within it, so a listing anywhere in the account area picks them up.

   To re-theme, redeclare this block in css/custom-account-management.css — it
   loads after this file, so an equal-specificity block wins with no !important.

   Two names share #313131 (a title and the accent pill). That is deliberate:
   they are separate roles that happen to agree today, and re-theming one should
   not drag the other with it. */

	#account-management
	{
		--account-text-title:				#313131;	/* .row > .title */
		--account-text-body:				#333333;	/* .row > .summary */
		--account-text-muted:				#777777;	/* .row > .date, .row > .additional */

		--account-tag-text:					#666666;
		--account-tag-background:			#FFFFFF;
		--account-tag-border:				#CCCCCC;
		--account-tag-accent-text:			#FFFFFF;
		--account-tag-accent-background:	#313131;

		--account-button-cancel-text:		#666666;	/* .button.cancel */
		--account-button-cancel-hover:		#313131;
	}

/* General Styles */

	#account-management																{ margin: 0 auto; width: 100%; color: #333333; }
	#account-management h2															{ margin: 1em 0; color: #313131; }
	#account-management p															{ margin: 0.5em 0; padding: 0; color: #333333; }
	#account-management p.error														{ padding:1rem; }

	#account-management .button, #account-management button							{ min-width: auto; }
	#account-management .button span, #account-management button span				{ margin: 0; padding: 0; cursor: pointer; }
	#account-management .button.danger 												{ background-color: #dc3545; border-color: #dc3545; color: #ffffff; }
	#account-management .button.danger:hover 										{ color: #fff; background-color: #c82333; border-color: #bd2130; }

	#account-management label														{ padding: 0; width: 30%; line-height: 1.5em; display: block; }
	#account-management input,
	#account-management textarea,
	#account-management select														{ padding: 0.6875em 1em; line-height: 1.5em; border: 1px solid #E9E9E9; border-radius: 2px; }
	#account-management input[type=submit]											{ width: auto; min-width: auto; }
	#account-management input[type=checkbox]										{ width: auto; min-width: auto; vertical-align:middle; }

	#account-management .field-block label											{ width: 100%; }
	#account-management .extra-field-block label									{ width: 30%; }

	#account-management .field-block												{ width: 100%; font-size: 0.875em; }
	#account-management .field-block.extra-field-block								{ display: flex; flex-wrap: wrap; }
	#account-management .field-block.width-auto										{ width: auto; }
	#account-management .field-block.col-2											{ padding: 0 0.5em; width: 50%; display: inline-block; }
	#account-management .field-block button											{ margin: 2em 0% 0% 0%; }
	#account-management .field-label												{ padding: 5px 0%; font-size: 1em; display: inline-block; vertical-align: middle; }
	#account-management .field-value												{ padding: 5px 0%; width: 65%; display: inline-block; vertical-align: middle; }
	#account-management .field-value input,
	#account-management .field-value select											{ padding: 6px 12px; width: 100%; max-width: 580px; height: 34px; }
	#account-management .field-list													{ width: 70%; float: right; margin: 0; list-style: none; }

	#account-management .account-table .field-block									{ text-align: left; }
	#account-management .account-table .field-label									{ vertical-align: top; }

	#account-management .col-2 .field-label											{ width: 100%; }
	#account-management .col-2 .field-value											{ width: 100%; }

	#account-management .field														{ padding: 0.5em; width: 50%; vertical-align: top; display: inline-block; }
	#account-management .field-name													{ padding: 0.25em 0; width: 30%; vertical-align: top; display: inline-block; }
	#account-management .field input,
	#account-management .field select,
	#account-management .field textarea												{ width: 70%; vertical-align: top; display: inline-block; }
	#account-management .my-account p.no-records									{ margin: 1em 0 0 1.5em; }

	#account-management div.alert													{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-width: 1px; border-style: solid; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0% 0% .5em; padding: .5em 1em; }
	#account-management div.alert:before											{ font-family: 'Font Awesome 5 Pro'; font-size: 1.5em; padding-right: .75em; }
	#account-management div.alert.alert-danger										{ background-color: #F8D7DA; border-color: #F5C6CB; color: #721C24; }
	#account-management div.alert.alert-danger:before								{ content: '\f321'; font-weight: 700; }
	#account-management div.alert.alert-warning										{ background-color: #FFF3CD; border-color: #FFEEBA; color: #856404; }
	#account-management div.alert.alert-warning:before								{ content: '\f06a'; font-weight: 700; }
	#account-management div.alert.alert-success										{ color: #155724; background-color: #D4EDDA; border-color: #C3E6CB; }
	#account-management div.alert.alert-success:before								{ content: '\f058'; font-weight: 700; }
	#account-management div.alert a													{ font-family: inherit !important; color: inherit !important; }

	div.confirm-container															{ display: flex; justify-content: space-between; }

	#account-management .export														{ float: right; }

	#account-management .panel-header												{ margin-bottom: 1em; width: 100%; }

	/* The directory pages run full width: the account wrapper carries the URL
		segment as its class (see include.php), so `.directories` is the listing
		and the profile pages. Same override the dashboard takes above. */
	#account-management.directories														{ max-width: none; padding: 0; }
	/* Releasing the wrapper is not enough on its own — the template nests it in
	div.offset, whose 2000px cap two lines up is what the bands would stop at.
	:has() is the only way to reach it: the class that says which page this is
	sits on the wrapper inside. Every band then measures itself with the
	.directory-offset below. */
	section.main.standard.account div.content div.offset:has(#account-management.directories)	{ max-width: none; }

	/* Every band on those pages is a full-bleed strip with a .directory-offset
	inside it (see directories.php), the same shape as the site's own
	`section > div.offset`: the panel carries the fill edge to edge and the offset
	holds the content on one centre line down the page. So the panels give up
	their 50px sides — the measure belongs to the offset now — and keep the
	vertical padding they already had. */
	#account-management .directory-offset											{ margin: 0 auto; max-width: 1410px; padding: 0 16px; }
	#account-management.directories .account-panel									{ padding-left: 0; padding-right: 0; }

/* Custom Select Box */

	.custom-select-box																{ user-select: none; outline: none; position: relative; }
	.select-box-selected															{ padding: 12px 40px 12px 14px; background-color: #FFFFFF; border: 1px solid #E2EDED; border-color: #EAF1F1 #E4EDED #DBE7E7 #E4EDED; border-radius: 4px; cursor: pointer; position: relative; display: none; }

	.selected-value																	{ width: 100%; display: block; }

	.custom-select-box .select-box-chevrons											{ padding: 9px 14px; top: 0; right: 0; bottom: 0; position: absolute; }
	.custom-select-box .select-box-chevrons i										{ height: 50%; font-size: 0.75em; color: #282828; text-align: right; opacity: 0.4; display: block; }
	.select-list-open .select-box-chevrons i										{ opacity: 1; }

	.custom-select-box ul															{ list-style-type: none; }
	.custom-select-box li															{ padding: 12px 14px; }

/* Button Styles */

	#account-management .button														{ margin: 0; padding: 0.35em 1em; width: auto; font-size: 1em; text-decoration: none; text-align: center; border: none; display: inline-block; border-radius: 0px; transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease 0s; -moz-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; }
	#account-management .button.small												{ padding: 0.25em 0.75em; text-transform: none; }
	#account-management .button + .button											{ margin-left: 1em; }

	/* The way out of a form. It carries no fill because it is not an action on the
	   record — nothing is written, nothing is destroyed — so it should not compete
	   with the save beside it. Its own class rather than `.secondary`, which is a
	   filled grey button used for real actions elsewhere (`.back-to-list`,
	   `#find-address`) and would drag them along with it.

	   Padding is inherited from `.button` so it occupies the same box as the save
	   it sits next to; only the paint is missing. */
	#account-management .button.cancel,
	#account-management button.cancel												{ color: var(--account-button-cancel-text); background-color: transparent; border: none; }
	#account-management .button.cancel:hover,
	#account-management button.cancel:hover											{ color: var(--account-button-cancel-hover); background-color: transparent; text-decoration: underline; }

	#account-management .section-buttons											{ margin: 1em 0; padding: 0% 5px; width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
	#account-management .section-buttons .button									{ flex: 0 0 auto; margin-left: 0; }

/* Generic Section Styles */

	#account-management .account-panel												{ margin: 0 auto; padding: 30px 50px 50px 50px; background-color: #FFFFFF; }
	#account-management .account-panel.small,
	#account-management .section-menu + .account-panel								{ padding: 2.5625em 2.75em 3em 2.75em; width: 54.9%; background-color: #F1F1F1; }
	#account-management .account-panel.small										{ max-width: 800px; }
	#account-management .section-menu + .account-panel								{ margin: 0% 13.5% 0% 0%; vertical-align: top; display: inline-block; text-align: left; }

	#account-management .section-menu + .account-panel .field-block label			{ display: flex; flex-wrap: wrap; }

	#account-management .section-menu												{ width: 31.6%; vertical-align: top; display: inline-block; }

	#account-management .section-menu ul											{ margin: 0%; padding: 2.75em 1em 3.5em 1.4375em; list-style-type: none; }
	#account-management .section-menu li											{ margin: 0.625em 0% 0% 0%; font-size: 1em; font-weight: 700; opacity: 0.4; cursor: pointer; }
	#account-management .section-menu li:first-child								{ margin-top: 0; }
	#account-management .section-menu li.active										{ opacity: 1; }

	#account-management .panel-section												{ display: none; }
	#account-management .panel-section.active										{ display: block; }
	#account-management .panel-section h2											{ margin: 0 0 0.5em; font-size: 1.125em; line-height: 1.5em; font-weight: 400; text-transform: uppercase; }
	#account-management .panel-section p											{ margin: 0.5em 0; font-size: 0.75em; }
	#account-management .panel-section button										{ margin: 1.25em 0 0; width: auto; font-size: 0.875em; }

	#account-management .account-top-buttons										{ float: right; }

/* Search */

	#account-management .account-search												{ margin-bottom: 1em; background-color: #F1F1F1; }
	#account-management .account-search .search-filter								{ padding: 1em; background-color: #EEEEEE; justify-content: space-between; align-items: center; display: flex; cursor: pointer; }
	#account-management .account-search .search-filter .icon						{ font-weight: 900; }
	#account-management .account-search form										{ padding: 1em; }
	#account-management .account-search .search-left,
	#account-management .account-search .search-right								{ width: 50%; display: inline-block; vertical-align: top; }
	#account-management .account-search .search-right								{ text-align: right; vertical-align: bottom; }

/* Generic Layout Styles */

	#account-management .account-flex,
	#account-management .account-listing											{ margin: 1.5em 0 0; width: 100%; -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

	#account-management .account-flex.no-shadow,
	#account-management .account-listing.no-shadow									{ -webkit-box-shadow: none; box-shadow: none; }

	#account-management .panel-section .account-table,
	#account-management .panel-section .account-flex,
	#account-management .panel-section .account-listing								{ -webkit-box-shadow: none; box-shadow: none; }

/* Generic Table Styles */

	#account-management .account-table												{ width: 100%; display: table; border-collapse: separate; border-spacing: 0.25em; }
	#account-management .account-table.table-fixed									{ table-layout: fixed; }

	#account-management .account-table-heading,
	#account-management .account-table-row											{ display: table-row; }
	#account-management .account-table-row-group									{ display: table-row-group; }
	#account-management .account-table-heading										{ font-weight: 700; text-align: center; }
	#account-management .account-table-heading .account-table-cell					{ color: #FFFFFF; background-color: #9F9F9F; }

	#account-management .account-table-row-group .account-table-row					{ background-color: inherit; }

	#account-management .account-table-row-group:hover .account-table-cell,
	#account-management .account-table-row:hover .account-table-cell				{ background-color: #EAEAEA; }

	#account-management .account-table-cell											{ padding: 1em; font-size: 0.875em; background-color: #F3F3F3; text-align: center; vertical-align: top; display: table-cell; }
	#account-management .table-fixed .account-table-cell							{ word-wrap: break-word; }

/* Generic Flex Styles */

	#account-management .account-flex												{ display: flex; flex-wrap: wrap; }

	#account-management .account-flex-heading,
	#account-management .account-flex-row,
	#account-management .account-flex-row-group										{ flex: 1 100%; }
	#account-management .account-flex-row											{ border-top: 3px solid #F0EFEF; }
	#account-management .account-flex-heading,
	#account-management .account-flex-row											{ display: flex; flex-wrap: wrap; justify-content: space-between; }
	#account-management .account-flex-row:first-child,
	#account-management .account-flex-row-group .account-flex-row					{ border-top: none; }
	#account-management .account-flex-row-group:nth-child(even),
	#account-management .account-flex-row:nth-child(even)							{ background-color: #F7F7F7; }
	#account-management .account-flex-cell											{ padding: 1em; text-align: center; vertical-align: top; flex:1 auto; }
	#account-management .account-flex-cell.fixed									{ flex: 0 1 auto; width: 25%; }
	#account-management .account-flex-cell.small									{ width: 10% }
	#account-management .account-flex-cell.large									{ width: 40% }
	#account-management .account-flex-row-group .account-flex-row					{ background-color: inherit; }

/* Generic Listing Styles

   The standard listing is three pieces and nothing else:

	<div class="listing-header">        title on the left, the one create
	    <h2>…</h2>                      action on the right
	    <button class="button primary">…</button>
	</div>
	<div class="account-listing">
	    <div class="account-listing-panel">
	        <div class="listing-panel-details">…</div>
	        <div class="listing-panel-buttons">   Edit / Delete as words, not
	            <button …>Edit</button>           icons — a glyph in a title
	            <button …>Delete</button>         attribute is not a label
	        </div>
	    </div>
	</div>

   The row is a wrapping flex line rather than a fixed two-column split, so the
   actions drop underneath the details as soon as the details can no longer hold
   their 12em basis. That is driven by the width of whatever the listing sits in,
   not by the viewport, so a listing in a narrow column behaves like one on a
   phone and there is no media query to keep in step with the markup.

   That basis is the whole tuning knob, and it is the FLOOR for the details, not
   a target: a flex line breaks on the items' basis, before any shrinking is
   considered, so the row wraps as soon as basis + gap + buttons exceeds the
   panel. `.section-menu + .account-panel` is 54.9% wide, which leaves a row
   about 27em across on a full-size screen — so anything much above 12em wraps on
   the desktop layout, where the details should simply be narrower instead.
   The details reflow happily; they are the item that should give. */

	#account-management .listing-header												{ margin: 0 0 1em 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75em; }
	#account-management .listing-header h2											{ margin: 0; }
	/* Sized off the panel title, not off the account-wide `.button`. The title is
	   1.125em/1.5 (`.panel-section h2`), so a full-size 1em
	   button beside it is taller than the heading it labels. At 0.75em with the
	   same 1.5 line-height the two line boxes match, and the padding is stated
	   here rather than inherited so it stays in proportion to the smaller text.
	   Same height as the row actions, a little wider, which is the whole
	   difference between the create action and the per-row ones. */
	#account-management .listing-header .button										{ margin: 0; padding: 0.5em 1.25em; font-size: 0.875em; line-height: 1.5em; }

	#account-management .account-listing											{ background-color: #F7F7F7; }
	#account-management .account-listing-panel										{ padding: 1em; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75em 1em; }
	#account-management .account-listing-panel:first-child							{ border-top: none; }
	#account-management .account-listing-panel:nth-child(even)						{ background-color: #FFF; }
	#account-management .account-listing-panel:hover								{ background-color: #EEEEEE; }
	#account-management .account-listing-panel h3									{ font-size: 1.25em; }
	#account-management .account-listing-panel .listing-panel-details				{ flex: 1 1 12em; min-width: 0; }
	#account-management .account-listing-panel .listing-panel-buttons				{ flex: 0 0 auto; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5em; }

	#account-management .account-listing-panel.no-results .listing-panel-details	{ font-size: 0.9em; }

	/* Equal specificity to `.button + .button { margin-left: 1em }` above, so it
	   wins on source order only — keep it below that rule. */
	#account-management .listing-panel-buttons .button								{ margin: 0; padding: 0.5em 1em; font-size: 0.75em; line-height: 1.5em; }

	/* — the expander —
	   The optional third child of a panel, for detail that belongs to the record
	   but does not belong on the row: certificates, an order's lines, a note. It
	   is a <details>, so the open/closed state is the browser's and there is no
	   handler to bind, nothing to re-bind after an AJAX redraw, and it still
	   works if the script fails:

		<details class="listing-panel-extra">
		    <summary>Certificates<span class="icon">&#xf078;</span></summary>
		    <div class="listing-panel-extra-content">…rows…</div>
		</details>

	   flex-basis 100% is what puts it on its own line: the panel is already a
	   wrapping flex row, so an item that asks for the full width cannot share a
	   line with the details and the buttons, and lands underneath both. */
	#account-management .listing-panel-extra										{ flex: 1 1 100%; margin-top: 0.25em; }
	#account-management .listing-panel-extra > summary								{ width: 100%; justify-content: space-between; font-size: 0.8125em; font-weight: 600; color: var(--account-text-title); list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5em; }

	/* The default disclosure triangle, removed in both spellings — the marker is
	   the chevron in the markup, which can then be rotated. */
	#account-management .listing-panel-extra > summary::-webkit-details-marker		{ display: none; }
	#account-management .listing-panel-extra > summary .icon						{ font-size: 0.75em; transition: transform 300ms ease-in-out; }
	#account-management .listing-panel-extra[open] > summary .icon					{ transform: rotate(180deg); }

	#account-management .listing-panel-extra-content								{ margin-top: 0.5em; padding: 0.5em 0.75em; border: 1px solid var(--account-tag-border); border-radius: 4px; }

	#account-management .account-listing.small-list .account-listing-panel			{ padding: 1em; }
	#account-management .account-listing.small-list .button 						{ padding: 7px 10px; }
	#account-management .account-listing.small-list .button span					{ font-size: 0.8125em; }

/* Generic Row and Item Styles

   A row is one line of a record; the things inside it are its items. Rows stack,
   items sit side by side and wrap to the next line when they run out of room:

	<div class="row"><span class="title">Title</span></div>
	<div class="row"><span class="title">Title</span><span class="date">4th July</span></div>

   Add `spread` — <div class="row spread"> — to push the last item to the far end
   of the line, so the title sits left and the date right. Items align on their
   text baseline, so a 1.25em title and a 0.875em date read as one line rather
   than two things of different heights.

   The item vocabulary is five words, and it is deliberately short — the moment
   there are two plausible classes for the same piece of text, callers pick
   differently and the listings drift apart again:

	title       what the record is called. One per record.
	summary     the descriptive line. Content-width, so anything after it on the
	            row follows the words — put `spread` on the row to split them.
	date        a date or time. Never breaks across lines.
	tags        a group of pills; each child is a `tag`:
	            <span class="tags"><span class="tag">Live</span>…</span>
	additional  the supporting detail — smaller and quieter than summary. The
	            slot for whatever a given listing needs that the four above do
	            not describe.

   An item with no class of its own is still an item; it just takes the row's
   layout and no type treatment. That is the escape hatch for a run of inline
   text (the address lines below), which wants to reflow as prose rather than
   become one flex item per span.

   Nothing here is tied to .account-listing — the same three lines describe a
   record anywhere in the account area. The item classes are only styled as
   DIRECT children of .row, so the `.title` inside a qualification card (line 359)
   and any other loose `.title` / `.date` are untouched.

   `.row` is deliberately the name asked for, and it is a common one. It is
   scoped to #account-management so it cannot leak, but if a grid framework's
   `.row` is ever loaded into the account area, rename this pair rather than
   fighting the cascade. */

	#account-management .row														{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.75em; }
	#account-management .row + .row													{ margin-top: 0.25em; }
	#account-management .row.spread													{ justify-content: space-between; }

	/* Each item carries its own margin: 0 rather than relying on `.row > *`,
	   which would lose to `#account-management.details h3` (line 334) on
	   specificity and let a heading keep its 0.5em bottom margin inside a row. */
	#account-management .row > .title												{ margin: 0; font-size: 1.25em; line-height: 1.4em; font-weight: 600; color: var(--account-text-title); }

	/* The two that carry prose. They are content-width — flex-grow 0 — so a date
	   or a tag put after one sits immediately after the words rather than being
	   pushed to the far edge of the row. Use `spread` on the row when the far
	   edge IS what you want. They still shrink (flex-shrink 1), and min-width: 0
	   lets a long unbroken string wrap inside the item rather than forcing the
	   row wider than the panel. */
	#account-management .row > .summary												{ flex: 0 1 auto; min-width: 0; margin: 0; font-size: 0.875em; line-height: 1.5em; color: var(--account-text-body); }
	#account-management .row > .additional											{ flex: 0 1 auto; min-width: 0; margin: 0; font-size: 0.8125em; line-height: 1.5em; color: var(--account-text-muted); }

	/* nowrap because "4th July 2026" reading as "4th July" / "2026" on two lines
	   is worse than the row being a few pixels wider. */
	#account-management .row > .date												{ flex: 0 0 auto; margin: 0; font-size: 0.875em; color: var(--account-text-muted); white-space: nowrap; }

	/* Any item can take a leading glyph — put the <svg> first inside it. Sized in
	   em so it tracks the item it sits in (a title's icon is bigger than a
	   date's), and left inline rather than made a flex child so the text beside
	   it still wraps as text. css/default.css:619 gives it fill: currentColor,
	   so it also takes the item's colour with no work here. */
	#account-management .row > * > svg												{ width: 1.15em; height: 1.15em; margin-right: 0.375em; vertical-align: -0.2em; }

	/* A group, not an item — it holds the pills and wraps them itself, so a
	   record with eight tags grows downwards rather than stretching its row. */
	#account-management .row > .tags												{ margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375em; }
	#account-management .row > .tags .tag											{ padding: 0.25em 0.75em; font-size: 0.75em; line-height: 1.5em; font-weight: 600; color: var(--account-tag-text); white-space: nowrap; background-color: var(--account-tag-background); border: 1px solid var(--account-tag-border); border-radius: 999px; }
	#account-management .row > .tags .tag.accent									{ color: var(--account-tag-accent-text); background-color: var(--account-tag-accent-background); border-color: var(--account-tag-accent-background); }

	/* An item printed from an empty field is still an item: it has no width, but
	   the row's gap still sits beside it, so a blank `title` reads as a space in
	   front of the date. This takes it out of the layout altogether, which means
	   a listing can print its rows unconditionally and the ones with nothing in
	   them simply are not there.

	   :empty is literal — a single space or newline between the tags is a text
	   node and the element stops matching. So print the value tight against its
	   tags, `<span class="title"><?php echo $x; ?></span>`, with nothing in
	   between. It is worth knowing the rule is a safety net rather than a
	   licence: it cannot help a row whose items are all empty, which still takes
	   its 0.25em top margin, so gate that case in PHP.

	   Last in the block on purpose: `.tags` sets display:flex at the same
	   specificity, so this only wins on source order. */
	#account-management .row > *:empty												{ display: none; }

/* Password Reset Styles */

	#account-management.reset-password .account-panel								{ margin: 1.5em auto; max-width: 575px; }
	#account-management.reset-password .account-panel p								{ margin: 0 0 0.5em; }

/* Account Login Styles */

	#account-management.login p														{ margin: 1em 0 0; }
	#account-management.login input													{ width: 100%; }

	#account-management .account-login												{ margin-top: 1em; }
	#account-management.login .field-block,
	#account-management.registration .field-block									{ text-align: left; }

	#account-management.login .account-panel										{ max-width: 500px; text-align: center; }
	#account-management.login .account-panel span.verify							{ font-size: 0.875rem; font-weight: 600; }
	#account-management.login .account-panel span.pending							{ display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; }

	#account-management .button.account-login										{ margin-top: 0.5rem; }

	#account-management .response-message 											{ display: inline-block; padding-left: 0.25rem; }

/* Account 2 Factor Styles */

	#account-management.two-factor .account-panel									{ max-width: 800px; }

/* Account Register Styles */

	#account-management.registration .account-panel									{ max-width: 700px; text-align: center; }
	#account-management.registration .account-panel .g-recaptcha					{ display: flex; justify-content: center; }

	#account-management.registration input[type=checkbox]							{ margin: 0.375em; width: auto; min-width: 0; float: left; }
	#account-management.registration .icheckbox_square								{ margin-top: 0.25em; float: left; }
	#account-management.registration .icheckbox_square input						{ width: auto; min-width: 0; }
	#account-management.registration .checkbox-label								{ font-size: 0.875em; text-align: left; overflow: hidden; display: block; }

	#account-management.registration :-ms-input-placeholder							{ color: transparent; opacity: 1; }
	#account-management.registration ::-webkit-input-placeholder					{ color: transparent; opacity: 0; }
	#account-management.registration :-moz-placeholder								{ color: transparent; opacity: 0; }
	#account-management.registration ::-moz-placeholder								{ color: transparent; opacity: 0; }
	#account-management.registration ::placeholder									{ color: transparent; opacity: 0; }

	#account-management .helpmessage_returning_user,
	#account-management .helpmessage_new_user										{ cursor: pointer; }
	#account-management .account-promo												{ margin: 0.625em 0px; padding: 0px 20px 10px 20px; width: 39%; float: right; }
	#account-management .alternative												{ padding: 4em 0 2em; font-size: 0.875em; text-align: center; display: block; }
	#account-management .button.register											{ margin-top: 0.5rem; }

/* Account Generate Password Styles */

	#account-management.generate-password .account-panel							{ margin: 1.5em auto; max-width: 575px; }

	#account-management.generate-password form										{ margin: 0 auto; max-width: 400px; }
	#account-management.generate-password .field-block								{ margin-bottom: 1em; }

/* Account Dashboard Styles */

	#account-management.dashboard													{ max-width: 902px; }

	#account-management .dashboard-info												{ padding-bottom: 1.1875em; }
	#account-management .info-left,
	#account-management .info-right													{ width: 50%; display: inline-block; }

	#account-management .info-left p												{ font-size: 1.125em; font-weight: 600; }
	#account-management .info-left .info-reference									{ font-size: 0.75em; font-weight: 400; }

	#account-management .info-right													{ text-align: right; }
	#account-management .info-right p												{ font-size: 0.875em; }
	#account-management .info-right .icon											{ margin-top: -2px; margin-right: 0.5em; font-size: 1.6875em; font-weight: 900; }

	#account-management #account-dashboard-buttons									{ margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }

	#account-management #account-dashboard-buttons .list-container					{ display: flex; justify-content: center; flex-wrap: wrap; }

	#account-management .section-panel												{ margin: 0% 0% 3.9% 8.375%; padding: 0.5em 0.5em; width: 27.75%; min-height: 150px; text-decoration: none; color: #FFFFFF; background-color: #666666; text-align: center; vertical-align: middle; transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease 0s; -moz-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; display: inline-block; }
	#account-management .section-panel:nth-of-type(3n+1)							{ margin-left: 0; }

	#account-management .section-panel .section-image								{ margin: 0.5em 0; padding-top: 50px; }
	#account-management .section-panel .section-image .icon							{ padding: 0%; max-width: 100%; font-size: 2.75em; }

	#account-management .section-panel .section-label								{ width: 100%; font-size: 1em; line-height: 1.5em; font-weight: 700; vertical-align: middle; display: inline-block; }
	#account-management .section-panel .section-description							{ margin-bottom:0.375em; }

	#account-management .section-description span									{ font-size: 0.8125em; display: block; }

	#account-management .section-subscription										{ padding: 0.25em; background-color: #000000; }

	#account-management .section-panel:hover										{ background-color: #777777; }

/* My Details Styles */

	#account-management.details														{ max-width: 1006px; }
	#account-management.details .address-listing									{ font-size: 0.875em; }

	/* The address lines now sit inside a `.summary`, which is already 0.875em —
	   the rule above would compound with it and land the text at ~0.77em. The
	   spans stay (they carry the per-line classes anything overriding this
	   listing targets); they just stop setting a size of their own in there. */
	#account-management.details .row > .summary .address-listing					{ font-size: 1em; }
	#account-management.details .back-to-list										{ margin: 0 0 1em 0.5em; padding: 0.5em 1.25em; float: right; font-size: 0.875em; }
	#account-management.details h3													{ color: #000000; font-size: 1.25em; margin: 0 0 0.5em;  }
	#account-management.details hr													{ background-color: #FFF; margin: 1em 0;  }
	#account-management.details hr.medium											{ margin: 1em 0 5em; }
	#account-management.details hr.large											{ margin: 1em 0 10em; }
	#account-management.details button.danger										{ padding: 0.35rem 1rem; border-radius: 10px; background-color: #CC1B1B; line-height: 1.35; font-size: 1rem;  }


/* Qualifications & Training */

	/* :not(.button) so the panel's own bespoke buttons keep this treatment while
	   anything opting into the account-wide `.button` class — the listing header
	   and the row actions — is left to the standard listing rules. Two IDs beat
	   them on specificity otherwise, and the qualifications listing would be the
	   one place in the account area where Edit and Delete looked different. */
	#account-management #details-qualifications-and-training button:not(.button)		{ padding: 0.5rem; margin: 0; line-height: 1; font-size: 0.875rem; display: flex; align-items: center; gap: 4px; }
	#account-management #details-qualifications-and-training button.certificate-button	{ width: auto; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 4px; text-transform: capitalize; font-size: 0.875rem; }

	#details-qualifications-and-training p.subheading									{ margin: 0; color: #777; font-size: 0.875rem; }

	/* The qualification card that used to live here — .qualification-item and its
	   .list-header / .list-content / .list-footer scaffolding, the two icon
	   button sets (one desktop, one mobile), the .training-method chips and the
	   collapsible certificate panel — is gone. The listing is .account-listing
	   with rows now, and every one of those pieces has an equivalent in the
	   generic blocks above: chips are `tags`, the certificate links are the
	   `additional` line, and the row wraps its own actions, so the duplicated
	   desktop/mobile control sets are not needed. `.qualification-item` survives
	   in the markup as a JS hook only and is deliberately unstyled. */

	#account-management.details #details-qualifications-and-training .new-qualification { padding: 1rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
	#account-management.details #details-qualifications-and-training .new-qualification .heading { font-size: 1.125rem; }
	#account-management.details #details-qualifications-and-training .new-qualification .uploaded-files { margin-left: 0; }

	#account-management.details #details-qualifications-and-training .field-label 		{ display: block; width: 100%; }
	#account-management.details #details-qualifications-and-training input,
	#account-management.details #details-qualifications-and-training textarea,
	#account-management.details #details-qualifications-and-training select 			{ display: block; width: 100%; }
	#account-management.details #details-qualifications-and-training .field-date 		{ display: block; width: 100%; }
	#account-management.details #details-qualifications-and-training .field-block .field-options { gap: 8px; width: 100%; }
	#account-management.details #details-qualifications-and-training .field-block .field-options button { text-transform: none; background-color: #cecdcd; color: #333333; }
	#account-management.details #details-qualifications-and-training .field-block .field-options button.active { background-color: #555; color: #f1f1f1; }
	#account-management.details #details-qualifications-and-training button.dropzone-upload { text-transform: none; }
	
	#details-qualifications-and-training .button-container 							{ display: flex; justify-content: center; margin-top: 1.5rem; gap: 8px; }
	#details-qualifications-and-training .button-container .certificate-back 		{ background-color: #eee; color: #000; }


/* My Saved Baskets and Quotes Styles */

	#account-management table.saved-table											{ width: 100%; border: 1px solid; border-color: inherit; }
	#account-management table.saved-table th										{ border: 1px solid; border-color: inherit; }
	#account-management table.saved-table td										{ text-align: center; border: 1px solid; border-color: inherit; }
	#account-management table.saved-table button									{ margin: 0; padding: 0; width: auto; font-size: 1em; color: inherit; background-color: transparent; display: inline-block; border-radius: 0; }

	#account-management .details-section.saved-basket table							{ margin: 0.5em 0 1em; width: 100%; border: 1px solid; border-color: inherit; }
	#account-management .details-section.saved-basket table th						{ border: 1px solid; border-color: inherit; }
	#account-management .details-section.saved-basket table td						{ text-align: center; border: 1px solid; border-color: inherit; }
	#account-management .details-section.saved-basket td:nth-of-type(1)				{ width: 55%; text-align: left; }
	#account-management .details-section.saved-basket td:nth-of-type(n+2)			{ width: 15%; }

	#account-management div.saved-table .account-flex-heading						{ background-color: #d9d9d9; }

/* My Orders Styles */

	#account-management table td.totals_label										{ text-align: right; }
	#account-management table td.totals_value										{ text-align: right; }

	#account-management .ordertable h4												{ margin: 0.25em 0 0.25em 0; font-size: 1.375em; }
	#account-management .ordertable p												{ margin: 0.25em 0 0.25em 0; }
	#account-management #invoice th,
	#account-management #invoice td													{ padding: 0.75em 0.375em; border: 1px solid; border-color: inherit; }
	#account-management #invoice td .backorder										{ font-size: 0.875em; color: #D13A3A; }

/* My Subscriptions Styles */

	#account-management .subscription .account-table-cell							{ padding: 0.5em; vertical-align: middle; }
	#account-management .subscription table tr td span.small						{ font-size:0.75em; }
	#account-management .subscription table tr td span.attention					{ color: #f00; }
	#account-management .subscription table tr td span.complete						{ color: #155724; }
	#account-management .subscription table select[name="subscription_renewal"]		{ font-size: 1em; padding: 2px 10px; }

	#account-management .subscription .disclaimer									{ padding-bottom: 2em; }
	#account-management .subscription .signature span.signature-date				{ display: block; font-style: italic; margin-left: 7.5%; }
	#account-management .subscription .signature span.signature-date span			{ font-weight: 600; }

/* Subscription button to toggle state  */
	 
	 #account-management .button_on_off												{ margin: 0% 0% 0% 16px; vertical-align: middle; border: 1px solid #E0E0E0; border-radius: 4px; overflow: hidden; display: inline-block; }
	 #account-management .button_on_off span										{ padding: 6px 12px; font-size: 0.813em; font-weight: 600; text-transform: uppercase; color: #FFFFFF; display: inline-block; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
	 #account-management .button_on_off span.on										{ color: #CCCCCC; background-color: #FFFFFF; cursor: pointer; }
	 #account-management .button_on_off span.off									{ color: #FFFFFF; background-color: #CC1B1B; cursor: pointer; }
	 #account-management .button_on_off.active span.on								{ color: #FFFFFF; background-color: #0F8C1A; cursor: pointer; }
	 #account-management .button_on_off.active span.off								{ color: #CCCCCC; background-color: #FFFFFF; cursor: pointer; }
 
	 #account-management .button_on_off.disabled span.on							{ display: none; }
	 #account-management .button_on_off.disabled span.off							{ display: inline-block; cursor: default; }
	 #account-management .button_on_off.disabled.active span.on						{ display: inline-block; cursor: default; }
	 #account-management .button_on_off.disabled.active span.off					{ display: none; }

/* CPD Record */

	/* Will need to look at in the future */

	#account-management .attendance-section td span.icon							{ margin: 0% 0.25em; font-size: 1.125em; }

	#account-management .attendance-section table,
	#account-management .attendance_record table									{ width: 100%; }
	#account-management .attendance_record table									{ margin: 0% 0% 2em 0%; }

	#account-management .attendance-section th,
	#account-management .attendance_record th										{ padding: 5px; color: #000000; background-color: #EFEFEF; border: 1px solid #DFDFDF; text-align: center; vertical-align: middle; }

	#account-management .attendance-section td,
	#account-management .attendance_record td										{ padding: 10px 5px; background-color: transparent; border: 1px solid #DFDFDF; text-align: center; vertical-align: middle; }

	#account-management .attendance_fields											{ padding-left: 0; list-style-type: none; }
	#account-management .attendance_fields li										{ padding: 0.5em; width: 50%; vertical-align: top; display: inline-block; }
	#account-management .attendance_fields li label									{ width: 100%; }

/* My Vacancies Styles */

	#account-management.job-board h2,
	#account-management.job-board .job-details-buttons								{ margin: 0; width: 50%; vertical-align: top; display: inline-block; }

	#account-management.job-board .job-details-buttons								{ text-align: right; }

	#account-management.job-board .job-details-buttons .button						{ margin-left: 0.5em; }
	#account-management.job-board .job-details-buttons .button:first-of-type		{ margin-left: 0; }

	#account-management.job-board .button.placement-button							{ background-color: #313131; color: #FFFFFF; }
	#account-management.job-board .button.placement-button:hover					{ background-color: #484848; color: #FFFFFF; }

/* Create a Job Styles */

	#account-management .jobs-section												{ padding: 2em 1.5em; background-color: #F1F1F1; }
	#account-management .jobs-section h2											{ margin: 0% 0% 0.75em 0%; width: 48%; display: inline-block; }
	#account-management .jobs-section .price-per-job								{ margin: 0%; width: 50%; font-size: 1.5em; line-height: 1.25em; font-weight: 400; text-align: right; display: inline-block; }

	#account-management.job-board .section-buttons									{ margin: 3em 0 1.5em; }
	#account-management.job-board .section-buttons .button							{ margin: 0.5em; padding: 0.429em 1.571em; font-size: 1em; color: #FFFFFF; }
	#account-management.job-board .section-buttons .button:first-of-type			{ background-color: #313131; }
	#account-management.job-board .section-buttons .button:first-of-type:hover		{ background-color: #484848; }

/* Exam Styles */

	/* Two styles are incredibly inefficient, will need to remove the *s due to how css works */
	#account-management .exam-list-heading											{ display: flex; justify-content: center; }
	#account-management .exam-list-heading > *										{ background-color: #f7f7f4; font-weight: 600; padding: 1rem; }
	#account-management .exam-item													{ display: flex; justify-content: center; }
	#account-management .exam-item.no-results										{ padding: 1rem; }
	#account-management .exam-item > *												{ padding: 1rem; }
	#account-management .exam-form													{ width: 30%; }
	#account-management .exam-course												{ width: 30%; }
	#account-management .exam-course-info											{ width: 25%; }
	#account-management .exam-options												{ width: 15%; }
	#account-management .exam-options a.button										{ font-size: 1rem; }

/* User Management Styles */

	#account-management .user-management .new-login									{ cursor: pointer; }
	#account-management .user-management .login-buttons								{ display: inline-block; }
	#account-management .user-management .login-buttons .icon						{ margin: 0em 0em 0em 1em; cursor: pointer; }

/* Exam section */

	#account-management div.exam_headings											{ margin: 0% 0% 0.75rem 0%; font-size: 1.25rem; font-weight: 700; }
	#account-management div.exam_headings > .value .note							{ font-size: 1.313rem; }

/* Staff Report */

	#account-management .staff-report .account-flex-cell							{ width: calc(100% / 6); }
	#account-management .staff-report .staff-report-label							{ width: 10%; }
	#account-management .staff-report .staff-report-exams							{ width: 90%; font-size: 0.8125em; flex-grow: 4; }
	#account-management .staff-report .account-table-cell							{ padding: 0.6em; }
	#account-management .staff-report .staff-report-type							{ font-size: 0.8125em; font-weight: 700; }

	#account-management .exam-listing												{ display: block; padding-bottom:1rem; text-align:left; font-size: 0.9rem; }
	#account-management .staff-report-exam-complete									{ color: #25AC4A; font-weight:bold; }
	#account-management .staff-report-exam-soon										{ color: #FF8000; font-weight:bold; }
	#account-management .staff-report-exam-now										{ color: #DC1F27; font-weight:bold; }

	#account-management .account-table-row-group .row-extra-details					{ background-color: #ededed; }

	#account-management .staff-report.staff p										{ margin-top: 1.5em; }

/* Directory Files */

	#account-management div.directory-files p.empty_directory						{ font-weight:600; margin-top:1.5em; }

	#account-management div.directory-files ul										{ margin: 2rem 0%; padding: 0%; list-style: none; }
	#account-management div.directory-files ul li									{ margin: 0% 0% 2% 2%; padding: 0%; width: 15%; display: inline-block; vertical-align: top; background-color: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 4px; overflow: hidden; transition: background-color 0.3s ease; }
	#account-management div.directory-files ul li a									{ padding: 66% 12px 6% 12px; font-size: 1rem; line-height: 1.25rem; font-weight: 600; text-align: center; display: block; position: relative; overflow: hidden; }
	#account-management div.directory-files ul li a:before							{ content: ''; padding-top: 60%; width: 100%; top: 0px; right: 0px; left: 0px; display: block; position: absolute; background-color: #FFFFFF; background-size: auto 60%; background-position: center; background-repeat: no-repeat; border-bottom: 1px solid #E0E0E0; }
	#account-management div.directory-files ul li.directory-folder a:before			{ background-image: url('../../../images/icons/noun_folder_132981.svg'); }
	#account-management div.directory-files ul li.directory-file a:before			{ background-image: url('../../../images/icons/noun_file_2627306.svg'); }

	#account-management div.directory-files ul li:hover								{ background-color: #E0E0E0; }

	#account-management div.directory-files ul li:nth-of-type(6n+1)					{ margin-left: 0; }

	#account-management div.directory-files ul li.doc a:before						{ background-image: url('../../../images/icons/noun_doc_425616.svg'); }
	#account-management div.directory-files ul li.ppt a:before						{ background-image: url('../../../images/icons/noun_ppt_424651.svg'); }
	#account-management div.directory-files ul li.pdf a:before						{ background-image: url('../../../images/icons/noun_pdf_425614.svg'); }
	#account-management div.directory-files ul li.xls a:before						{ background-image: url('../../../images/icons/noun_xls_424623.svg'); }
	#account-management div.directory-files ul li.jpg a:before						{ background-image: url('../../../images/icons/noun_jpg_424632.svg'); }
	#account-management div.directory-files ul li.png a:before						{ background-image: url('../../../images/icons/noun_png_424630.svg'); }

/* My Saved Forms */

	#account-management .my-account ul.display_saved_form li								{ margin: 0%; padding: 0%; }
	#account-management .my-account ul.display_saved_form li:before							{ display: none; }
	#account-management .my-account ul.display_saved_form > li.heading						{ margin-bottom: 0.5em; text-align: left; color: #FFFFFF; background-color: #9F9F9F; }
	#account-management .my-account ul.display_saved_form > li.heading span.heading-label	{ padding: 1em 1.375em; font-size: 1em; line-height: 1.5em; font-weight: 700; display: block; cursor: pointer; }
	#account-management .my-account ul.display_saved_form > li.heading i.far				{ font-size: 1.25em; line-height: 1.25em; float: right; }
	#account-management .my-account ul.display_saved_form > li.heading ul					{ margin: 0%; background-color: #F3F3F3; border-top: 2px solid #FFFFFF; }
	#account-management .my-account ul.display_saved_form > li.heading ul > li				{ width: 100%; font-size: 0.875em; line-height: 1.5em; text-align: left; display: table; color: #444444; background-color: #F3F3F3; border-bottom: 2px solid #FFFFFF; }
	#account-management .my-account ul.display_saved_form > li.heading ul > li > div		{ padding: 1em 1.375em; display: table-cell; vertical-align: top; }
	#account-management .my-account ul.display_saved_form > li.heading div.question			{ width: 320px; max-width: 320px; font-weight: 700; }

/* My Saved Forms */

	#account-management.saved-quotes .my-account > h2								{ margin: 0% 0% 1.5em 0%; font-size: 1.5rem; line-height: 1.5em; font-weight: 700; }
	#account-management.saved-quotes .field											{ margin: 0% 0% 1rem 0%; }
	#account-management.saved-quotes .field .field-name,
	#account-management.saved-quotes .field input									{ vertical-align: middle; }
	#account-management.saved-quotes .details-section								{ margin: 0% 0% 3em 0%; }
	#account-management.saved-quotes .details-section > h2							{ margin: 0% 0% 1em 0%; font-size: 1.25rem; line-height: 1.5em; font-weight: 700; }

	#account-management table td .item_description span.discount_label				{ color: #EC0000; }
	#account-management table td.price .discounted_price							{ display: block; text-decoration: line-through; color: #EC0000; }
	
	#account-management .details-section.saved-basket table th						{ border: 0px; border-left: 1px solid #FFFFFF; }
	#account-management .details-section.saved-basket table th:first-of-type		{ border-left: 0px; }

/* inspections_due */

	#account-management .inspection-container										{ margin-top: 1em; padding: 1em 1.5em; background-color: #777777; color: #FFFFFF; border-radius: 3px; display: flex; justify-content: space-between; align-items: center; position: relative; }
	#account-management [data-entry_id]												{ cursor: pointer; }

	#account-management .inspection-status											{ text-align: right; }
	#account-management .inspection-status .activity-label							{ margin-top: 0.5em; font-size: 0.875em; display: block; }
	#account-management .inspection-status .activity-label .icon					{ color: #FF220C; }
	#account-management .inspection-status .activity-label .locked_inspection		{ margin-top: 0.25em; display: block; }

/* Inspections */

	#account-management .location,
	#account-management .inspection														{ display: block; text-decoration: none; color: #000000; }
	#account-management .location-details,
	#account-management .inspection-details												{ padding: 1.5rem; border: 1px solid #E0E0E0; border-top: 0px none; display: flex; justify-content: space-between; }

	#account-management .location-details > div,
	#account-management .inspection-details	> div										{ text-align: center; width: 33.3%; }
	#account-management .location-details > div.text-left,
	#account-management .inspection-details	> div.text-left								{ text-align: left; }

	#account-management .inspection-icon												{ font-size: 1.4rem; }
	#account-management a.inspection-icon												{ font-size: 1.4rem; cursor: pointer; display: inline-block; }
	#account-management a.inspection-icon:not(:first-of-type)							{ margin-left: 2rem; }

	#account-management .inspections .green												{ color: #008522; }
	#account-management .inspections .yellow											{ color: #FFBF00; }
	#account-management .inspections .red												{ color: #FF220C; }
	#account-management .status-icon .in-progress										{ color: #BC1CB1; }

	#account-management .inspection-details .button										{ background-color: #e1e1e1; color: #8e8d8d; margin: 1px 0 0 0; }	

	#account-management .form-group														{ margin-top: 1rem; }

	#account-management .location-inspection-heading									{ display: flex; justify-content: space-between; align-items: center; }

	#inspections .inspections-header													{ margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; }
	#inspections .inspections-header .icons												{ display: flex; align-items: center; }
	#inspections .inspections-header .icons > a											{ margin-right: 1rem; color: #313131; text-decoration: none; }
	#inspections .inspections-header .icons .search-inspection > span					{ color: #5B70AB; }
	#inspections .inspections-header .icons > a > span									{ font-size: 1.5rem; }
	#inspections .inspections-header .icons > a:last-of-type							{ margin-right: 0.5rem; }

	#inspections .inspections-list-container											{ margin-top: 1.5rem; }
	#inspections .inspections-list														{ margin: 0; padding: 0; }
	#inspections .inspections-list > li:first-of-type									{ margin-top: 1rem; }

	#inspections .inspections-list-heading												{ display: flex; align-items: center; padding: 1rem; justify-content: space-between; background-color: #999; }
	#inspections .inspections-list-heading > div										{ text-align: center; flex-basis: 15%; }
	#inspections .inspections-list-heading .list-label									{ flex-basis: 30%; text-align: left; }
	#inspections .inspections-list-heading .list-action									{ flex-basis: 10%; }

	#inspections .inspections-list-heading .heading > div								{ width: 100%; }
	#inspections .inspections-list-heading .heading > :first-child						{ padding-bottom: 0.25em; }
	#inspections .inspections-list-heading .heading > .sub-heading						{ padding: 0% 0.5rem 0% 0%; width: 50%; font-size: 0.75rem; display: inline-block; text-align: right; text-transform: none; }
	#inspections .inspections-list-heading .heading > .sub-heading:last-of-type			{ padding: 0% 0% 0% 0.5rem; text-align: left; }

	#inspections .inspections-list-item													{ list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1rem; }
	#inspections .inspections-list-item > div											{ text-align: center; flex-basis: 15%; }
	#inspections .inspections-list-item .list-label										{ flex-basis: 30%; text-align: left; }
	#inspections .inspections-list-item .list-action									{ flex-basis: 10%; }
	#inspections .inspections-list-item .list-action > a								{ font-size: 1.125rem; }

	#inspections .inspections-list-item .inspection_icon.hazard .icon					{ font-weight:bold; margin-left:1rem; font-size:1.3rem; }
	#inspections .inspections-list-item .inspection_icon.hazard.green .icon				{ color: #268F3D; }
	#inspections .inspections-list-item .inspection_icon.hazard.amber .icon				{ color: #E6AF2E; }
	#inspections .inspections-list-item .inspection_icon.hazard.red .icon				{ color: #CE0000; }

/* #inspections .inspections-list-container.inspection_results							{ max-width: 600px; } */
	#inspections .inspection_results .inspections-list-heading .heading					{ flex-basis: 30%; }
	#inspections .inspection_results .inspections-list-heading .list-action				{ min-width: 26%; }

	#inspections-search-popup															{ border-radius: 3px; background-color: #F2F2F2; padding: 0; margin: 0; }
	#inspections-search-popup .search-header											{ text-align: center; padding: 1rem 2rem; border-bottom: solid 3px #CECECE; }

	#inspections-search-results .search-header											{ display: flex; align-items: flex-end; justify-content: space-between; }
	#inspections-search-results .search-header .icons > a								{ font-size: 1.5rem; margin-right: 1rem; }
	#inspections-search-results .search-header .icons > a:last-of-type					{ margin-right: 0.5rem; }
	#inspections-search-results .search-results-container								{ margin-top: 1.5rem; max-width: 500px; }
	#inspections-search-results .search-results-container .search-results-header		{ display: flex; align-items: flex-end; padding: 1rem; justify-content: space-between; background-color: #999; }
	#inspections-search-results .search-results-container .search-results				{ margin: 0; padding: 0; }
	#inspections-search-results .search-results-container .search-results > li			{ list-style: none; padding: 1rem; display: flex; justify-content: space-between; }

	#inspections .search-inspection,
	#inspections-search-results .search-inspection										{ background-color: transparent; font-size: 1.5rem; padding: 0; padding-left: 0.5rem; line-height: 0; }
	#inspections .search-inspection > span,
	#inspections-search-results .search-inspection > span								{ color:#CECECE; }

	.popup-panel.inspection-search														{ padding: 0; background-color: #F2F2F2; border-radius: 8px; max-width: 800px; }
	.popup-panel.inspection-search .inspection-search-header h3							{ text-align: center; font-size: 1.125rem; text-transform: uppercase; margin: 0; border-bottom: 2px solid #CECECE; padding: 1.5rem; color: #313131; }
	.popup-panel.inspection-search .inspection-search-body								{ padding: 10px 1.5rem 5rem; }

	.popup-panel.inspection-search .form-group											{ padding-top: 2.25rem; display: flex; justify-content: space-between; align-items: center; }
	.popup-panel.inspection-search .form-group label									{ width: 43%; padding-left: 2.125rem; }
	.popup-panel.inspection-search .form-group label.date-range							{ width: 40%; }
	.popup-panel.inspection-search .form-group select,
	.popup-panel.inspection-search .form-group input									{ width: 100%; padding: 1.125rem; border-radius: 6px; border: none; margin-right: 1.75rem; }
	.popup-panel.inspection-search .form-group button									{ background-color: #5B70AB; font-weight: 600; padding: 1rem 2rem; min-width: 155px; border-radius: 8px; margin: 0 }
	.popup-panel.inspection-search .form-group.buttons									{ padding-left: 29%; }
	.popup-panel.inspection-search .form-group div.date-range							{ display: flex; width: 100%; }
	.popup-panel.inspection-search .form-group div.date-range input						{ max-width: 146px; }

/* Inspection Forms */

	#account-management .inspections-forms .form_entry_detail .field-block				{ font-size: 1em; }
	#account-management .inspections-forms .form_entry_detail .field-label				{ padding: 0; width: 10%; }
	#account-management .inspections-forms .form_entry_detail .field-value				{ padding: 0; }
	#account-management .inspections-forms .form_entry_detail .field-block p			{ margin: 0; }

/* Participants */

	#account-management #account-participants .participant-list							{ padding: 1rem; background-color: #eee; width: 50%; }
	#account-management #account-participants .participant-heading						{ display: flex; justify-content: space-between; padding: 1rem; background-color: #444444; color: #fff; }
	#account-management #account-participants .participant-row							{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 1rem; background-color: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
	#account-management #account-participants .participant-row:nth-child(odd)			{ background-color: #f1f1f2; }
	#account-management #account-participants .participant-buttons						{ margin-top: 1rem; padding: 1rem; display: flex; }
	#account-management #account-participants .participant-buttons .button				{ margin: 0; }
	#account-management #account-participants a.edit									{ background-color: #116BC9; color: #FFF; margin-bottom: 0.5em; }
	#account-management #account-participants h1										{ color: #444; margin: 0.25rem 0; }
	#account-management .account_page_header											{ display: flex; justify-content: space-between; align-items: center; }
	#account-management .account_page_header .button									{ margin: 0; max-width: 140px; }

	#account-management #account-participants .form-panel								{ padding: 1rem; background-color: #eee; margin-top: 1rem; width: 50%; }
	#account-management #account-participants .form-panel .field-block					{ display: flex; justify-content: center; max-width: 600px; margin: auto; }
	#account-management #account-participants .form-panel .field-block label			{ width: 20%; min-width: 40%; }

	#account-management #account-participants .participant-form .participant-buttons button	{ margin: 0 1rem !important; }
	#account-management #account-participants .participant-form button.delete			{ background-color: #DC2626; width: 40px; }
	#account-management #account-participants .participant-form ul						{ margin: 0; padding: 0; list-style: none; }
	#account-management #account-participants .participant-form .field-block input		{ width: 70%; max-width: 400px; min-width: 40%; }
	#account-management #account-participants .participant-label						{ font-size: 1.25rem; }

	#account-management .account-panel.participants										{ background-color: #F1F1F1; padding: 1.5em; margin-right: 0; width: 100%; }
	#account-management .account-panel.participants	.account-listing					{ box-shadow: none; }
	#account-management .account-panel.participants	.listing-panel-buttons				{ display: flex; width: 100px; height: 45px; }
	#account-management .account-panel.participants	.listing-panel-buttons .button:first-of-type { margin-right: 0.5rem; display: flex; align-items: center; justify-content: center; }

	.delete-participant h3																{ text-align: center; }
	.delete-participant .delete-actions													{ display: flex; justify-content: center; }
	.delete-participant .delete-actions button:first-of-type							{ margin-right: 1rem; }

/* My Events */

	#account-management.my-events .account-panel										{ padding: 1rem; }
	#account-management.my-events .my-events-section 									{ margin-top: 1.5rem; }
	#account-management.my-events .my-events-section h3									{ margin-bottom: 0.5rem; }

/* Details Communication Section of Details */

	#account-management #details-communication .field-label								{ width: 50%; min-width: 150px; }



	/* Stay logged in Checkbox Styles */
	#account-management .field-block.stay_logged_in										{ text-align: center; }
	#account-management .field-block.stay_logged_in label								{ display: flex; align-items: center; justify-content: center; border: 1px solid #e8e8e8; border-radius: 6px; width: calc(100% - 2rem); max-width: 280px; margin: 0 auto; }
	#account-management .field-block.stay_logged_in label span							{ min-width: 120px; width: auto; }
	#account-management .field-block.stay_logged_in label input							{ width: 30px; }

	/* Element Sizing Styles */

	.desktop-to-small-mobile-element													{ display: block !important; }
	.small-mobile-element																{ display: none !important; }

	/* Delete Account Styles */

	.popup-panel.delete-my-account 														{ text-align: center; }
	.popup-panel.delete-my-account button.danger 										{ background-color: #dc3545; border-color: #dc3545; color: #ffffff; }
	.popup-panel.delete-my-account button.danger:hover 									{ color: #fff; background-color: #c82333; border-color: #bd2130; }

	/* Subscription Panel Popup - member jacket/tie etc */
	
	.popup-panel.subscription-product 														{  } 
	.popup-panel.subscription-product ul 													{ padding: 0; margin: 0; }
	.popup-panel.subscription-product ul li													{ list-style: none; padding: 0; margin-top: 2em; } 
	.popup-panel.subscription-product ul li:first-of-type									{ margin-top:0; } 
	.popup-panel.subscription-product .productlisting_details 								{ display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; } 
	.popup-panel.subscription-product .productlisting_details .productlisting_image			{ width: 25%; margin-right: 1rem; } 
	.popup-panel.subscription-product .productlisting_details .productlisting_description	{ width: 50%; } 
	.popup-panel.subscription-product .productlisting_details .subscription_buttons_container { width: 25%; text-align: right; } 
	.popup-panel.subscription-product .productlisting_description 							{ display: flex; flex-direction: column; align-items: flex-start; } 
	.popup-panel.subscription-product .productlisting_description p 						{ margin: 0.25rem 0; } 
	.popup-panel.subscription-product .productlisting_description .productlisting_price p 	{ font-size: 0.875rem; } 
	.popup-panel.subscription-product .subscription_buttons_container button 				{ transition: none; }
	.popup-panel.subscription-product .subscription_buttons_container button > img			{ height: 24px; width: 24px; }
	.popup-panel.subscription-product .subscription_buttons_container button.remove 		{ background-color: #EF4444; } 
	.popup-panel.subscription-product .subscription_buttons_container button.loading 		{ padding: 0.375rem; } 


	/* 1000px Resolution Specific Baheviour */

	@media only screen and (min-width: 0px) and (max-width: 1100px)
	{
		/* Account Dashboard Styles */

			#account-management .section-panel										{ margin: 0% 0% 2.25em 3.5%; width: 31%; max-width: none; }
			#account-management .section-panel:nth-of-type(4n+1)					{ margin-left: 3.5%; }
			#account-management .section-panel:nth-of-type(3n+1)					{ margin-left: 0; }
	}

	/* 800px Resolution Specific Baheviour */

	@media only screen and (min-width: 0px) and (max-width: 800px)
	{
			#account-management .field-label										{ width: 100%; }
			#account-management .field-value										{ width: 100%; }

			#account-management .account-panel										{ padding: 0; }

		/* Custom Select Box */

			.select-box-selected													{ display: block; }

			.custom-select-box ul													{ margin: 0; padding: 0; right: 0; left: 0; background-color: #FFFFFF; border: 1px solid #E2EDED; border-color: #EAF1F1 #E4EDED #DBE7E7 #E4EDED; border-radius: 4px; position: absolute; z-index: 100; display: none; }
			.select-list-open ul													{ display: block; }

		/* Generic Table Styles */

			#account-management .account-table-cell									{ padding: 0.5em; font-size: 0.875em; }

			#account-management .account-panel.small,
			#account-management .section-menu + .account-panel						{ padding: 1.5em; margin-right: 0; }
			#account-management .section-menu										{ margin-bottom: 1em; width: 100%; }

			#account-management .section-menu ul									{ padding: 0; }
			#account-management .section-menu li									{ margin: 0; padding: 0.5em 1em; opacity: 1; }

			#account-management .info-left,
			#account-management .info-right											{ width: 100%; }

		/* General Mobile Styles */

			#account-management h1													{ margin-top: 5%; font-size: 1.5em; }

			#account-management span.icon											{ display: inline; }
			#account-management label												{ width: 100%; }
			#account-management input,
			#account-management textarea,
			#account-management select												{ width: 90%; }
			#account-management input[type="checkbox"],
			#account-management input[type="radio"]									{ width: auto; }

			#account-management .field												{ width: 100%; }

		/* Button Styles */

			#account-management .button a											{ margin: 0px 0px 0px 0px; max-width: 100%; }
			#account-management .button.logout-account,
			#account-management .button.back-to-account								{ margin: 0% 0% 0% 0%; text-align: center; float: none; }

		/* Search */

			#account-management .account-search .search-left,
			#account-management .account-search .search-right						{ width: 100%; display: block; }
			#account-management .account-search .search-right						{ text-align: left; }
			#account-management .account-search .search-right button				{ margin-top: 0.5em; }

		/* Generic Table Styles */

			#account-management .account-table.table-collapse,
			#account-management .table-collapse tbody,
			#account-management .table-collapse .account-table-row,
			#account-management .table-collapse .account-table-row-group,
			#account-management .table-collapse .account-table-cell					{ display: block; }
			#account-management .table-collapse .account-table-cell.empty			{ display: none; }

			/* Collapsing the table means no need to show the headings */
			#account-management .table-collapse .account-table-heading				{ display: none; }

		/* Generic Flex Styles */

			#account-management .account-flex,
			#account-management .account-flex-heading,
			#account-management .account-flex-row,
			#account-management .account-flex-row-group,
			#account-management .account-flex-cell									{ display: block; }
			#account-management .account-flex-cell.empty							{ display: none; }
			#account-management .staff-report .account-flex-cell					{ width: 100%; }

			#account-management .account-flex-cell.fixed							{ width: 100%; }
			#account-management .account-flex-cell.small							{ width: 100% }
			#account-management .account-flex-cell.large							{ width: 100% }

		/* Account Register Styles */

			#account-management #account-register									{ padding: 6% 10% 10% 10%; }
			#account-management #account-register .label							{ display: none; }
			#account-management #account-register :-ms-input-placeholder			{ color: inherit; opacity: 1; }
			#account-management #account-register ::-webkit-input-placeholder		{ color: inherit; opacity: 0.54; }
			#account-management #account-register :-moz-placeholder					{ color: inherit; opacity: 0.54; }
			#account-management #account-register ::-moz-placeholder				{ color: inherit; opacity: 0.54; }
			#account-management #account-register ::placeholder						{ color: inherit; opacity: 0.54; }

			#account-management .account-promo										{ width: 100%; float: none; }

		/* Account Dashboard Styles */

			#account-management .section-header										{ padding: 0.5em; }
			#account-management .section-header .section-image						{ max-width: 50px; width: 15%; }
			
			#account-management .section-panel										{ margin: 0% 0% 1.5em 4%; width: 48%; }
			#account-management .section-panel:nth-of-type(3n+1)					{ margin-left: 4%; }
			#account-management .section-panel:nth-of-type(2n+1)					{ margin-left: 0%; }

		/* Account Register Styles */

			#account-management #account-register h1								{ text-align: center; }

		/* Password Reset Styles */
			
			#account-management.reset-password .account-panel h1					{ text-align: center; }

		/* My Details Styles */

			#account-management .details-section									{ padding: 1.5em 1em; }

		/* My Orders Styles */

			#account-management #invoice th,
			#account-management #invoice td											{ display: block; }
			#account-management #invoice td											{ border-width: 0 1px 1px; }
			#account-management #invoice tr.headings								{ display: none; }
			#account-management #invoice tr.headings + tr td						{ border-width: 1px; }
			#account-management #invoice .product_label								{ background-color: #EEEEEE; }

			#account-management #invoice tr.items td								{ font-size: 0.8125em; }
			#account-management #invoice tr.items td.description					{ font-size: 1em; }
			#account-management #invoice tr.items td.quantity						{ text-align: right; }
			#account-management #invoice tr.items .mobile-element					{ margin-right: 1em; font-weight: 700; }
			#account-management #invoice tr.items .mobile-element:after				{ content: ':'; display: inline-block; }

			#account-management #invoice tr.subtotal,
			#account-management #invoice tr.delivery,
			#account-management #invoice tr.vat,
			#account-management #invoice tr.ordertotal,
			#account-management #invoice tr.paidtodate								{ background-color: #EEEEEE; }

			#account-management #invoice .totals_label								{ display: none; }
			#account-management #invoice .totals_value:before						{ margin-right: 1em; font-weight: 700; display: inline-block; }
			#account-management #invoice .totals_value .description					{ font-size: 0.8125em; }

			#account-management #invoice tr.subtotal .totals_value:before			{ content: 'Sub Total: '; }
			#account-management #invoice tr.delivery .totals_value:before			{ content: 'Delivery: '; }
			#account-management #invoice tr.vat .totals_value:before				{ content: 'VAT: '; }
			#account-management #invoice tr.ordertotal .totals_value:before			{ content: 'Total: '; }
			#account-management #invoice tr.paidtodate .totals_value:before			{ content: 'Paid to Date: '; }

		/* My Subscriptions Required Fields Styles */

			#account-management .subscription .missing-details tr:first-of-type		{ display: block; }

		/* CPD Record */

			#account-management .attendance_fields li								{ width: 100%; }

			#account-management .attendance_table thead 						{ display:none; }
			#account-management .attendance_table tr 							{ display: flex; flex-direction: column; margin-bottom: 1.5rem; }
			#account-management .attendance_table td 							{ width: 100%; border-left: 2px solid #8f8f8f; border-right: 2px solid #8f8f8f; }
			#account-management .attendance_table td span.mobile-element		{ margin-bottom: 0.25rem; font-weight: 600; }
			
			#account-management .attendance_table td:first-of-type				{ border-top: 2px solid #8f8f8f; }
			#account-management .attendance_table td:last-of-type				{ border-bottom: 2px solid #8f8f8f; }




		/* My Vacancies Styles */

			#account-management.job-board h2,
			#account-management.job-board .job-details-buttons						{ width: 100%; }

			#account-management.job-board h2										{ margin-bottom: 0.75em; }
			#account-management.job-board .job-details-buttons						{ text-align: center; }

		/* Create a Job Styles */

			#account-management .jobs-section										{ padding: 1.5em 1em; }
			#account-management .jobs-section h2									{ width: 100%; }
			#account-management .jobs-section .price-per-job						{ margin: 0% 0% 1.5em 0%; width: 100%; font-size: 1.25em; text-align: left; }
			#account-management .jobs-section .field-label							{ padding: 20px 0% 0%; width: 100%; }
			#account-management .jobs-section .field-value							{ width: 100%; }

			#account-management .jobs-section .section-buttons						{ margin: 3em 0% 1.5em 0%; padding: 5px 5px; width: 100%; }

		/* Directory Files */

			#account-management div.directory-files ul li							{ margin-left: 2%; width: 23.5%; }
			#account-management div.directory-files ul li:nth-of-type(4n+1)			{ margin-left: 0; }

			#account-management .exam-list-container								{ background-color: #FFFFFF; }
			#account-management .exam-list-heading									{ display: none !important; }
			#account-management .exam-item											{ margin: 0% 0% 1rem 0%; padding-bottom: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; background-color: #F2F2F2; }
			#account-management .exam-item.no-results								{ padding: 1rem; }
			#account-management .exam-form											{ padding: 1.5rem 1rem; width: 100%; font-weight: 700; }
			#account-management .exam-course										{ display: none !important; }
			#account-management .exam-course-info									{ width: 100%; }
			#account-management .exam-options										{ padding: 0%; width: auto; }
			#account-management .exam-options a.button								{ margin: 0% 1rem; }

		/* Saved Forms */

			#account-management #saved-forms .button.primary.small					{ margin: 0; }
			#account-management #saved-forms .account-table-row						{ margin-bottom: 1rem; }
			#account-management #saved-forms .account-table-row .account-table-cell:first-of-type	{ padding-top: 1rem; font-size: 1rem; font-weight: 600; }
			#account-management #saved-forms .account-table-row .account-table-cell:last-of-type	{ padding-bottom: 1rem; }
			
			/* Staff Report Tablet Styles */

			#account-management .staff-report .account-table 												{ display: flex; flex-direction: column; }
			#account-management .staff-report .account-table .account-table-row 							{ display: flex; flex-direction: column; margin-bottom: 1rem; }
			#account-management .staff-report .account-table .account-table-row .account-table-cell-heading { color: #000; background-color:#F3F3F3; padding: 0.25rem; font-weight: bold; }

			#account-management .staff-report .staff-report-label											{ width: 100%; }

			#account-management .section-menu + .account-panel						{ width: 100%; margin: 0; }
			#account-management .section-menu + .account-panel .field-label			{ width: 100%; }

	}

	/* 600px Resolution Specific Baheviour */

	@media only screen and (min-width: 0px) and (max-width: 600px)
	{
			#account-management .field-label										{ width: 100%; }
			#account-management .field-value										{ width: 100%; }

		/* Custom Select Box */

			.select-box-selected													{ display: block; }

			.custom-select-box ul													{ margin: 0; padding: 0; right: 0; left: 0; background-color: #FFFFFF; border: 1px solid #E2EDED; border-color: #EAF1F1 #E4EDED #DBE7E7 #E4EDED; border-radius: 4px; position: absolute; z-index: 100; display: none; }
			.select-list-open ul													{ display: block; }

		/* Generic Table Styles */

			#account-management .account-table-cell									{ padding: 0.5em; font-size: 0.875em; }

			#account-management .account-panel.small,
			#account-management .section-menu + .account-panel						{ padding: 1.5em; margin-right: 0; width: 100%; }
			#account-management .section-menu										{ margin-bottom: 1em; width: 100%; }

			#account-management .section-menu ul									{ padding: 0; }
			#account-management .section-menu li									{ margin: 0; padding: 0.5em 1em; opacity: 1; }

			#account-management .info-left,
			#account-management .info-right											{ width: 100%; }


		/* My Vacancies Mobile Styles */

			#account-management .jobs-details-header h2								{ width: 100%; }
			#account-management .jobs-details-header .job-details-buttons			{ width: 100%; text-align: left; float: none; }
			#account-management .jobs-details-header a.button						{ margin: 0%; display: inline-block; float: none; }
			#account-management .jobs-details-header a.button.placement-button		{ margin: 0% 0% 0% 1em; }

		/* Directory Files */

			#account-management div.directory-files ul li							{ margin: 0% 0% 4% 4%; width: 48%; }
			#account-management div.directory-files ul li:nth-of-type(2n+1)			{ margin-left: 0; }

		
		/* My Saved Forms */
			#account-management .my-account ul.display_saved_form > li.heading ul > li > div	{ width: 100%; display: block; }
			#account-management .my-account ul.display_saved_form > li.heading div.question		{ padding: 1em 1.375em 0.75em 1.375em; width: 100%; max-width: 100%; font-weight: 700; }
			#account-management .my-account ul.display_saved_form > li.heading div.answer		{ padding: 0px 1.375em 1em 1.375em; }

		/* Inspection Mobile Styles */

			#account-management .location-details,
			#account-management .inspection-details									{ flex-direction: column; align-items: center; margin-bottom: 0.5rem; }
			#account-management .location-details > div,
			#account-management .inspection-details > div							{ padding: 0.5rem; width: 100%; }
			#account-management .location-details > div.text-left,
			#account-management .inspection-details > div.text-left					{ text-align: center; }

			#account-management .location-details .location-name					{ font-weight: 600; }
			#account-management .inspection-details .inspection-name				{ font-weight: 600; }
	}

	/* 500px Resolution Specific Baheviour */

	@media only screen and (min-width: 0px) and (max-width: 500px)
	{
		/* Account Dashboard Mobile Styles */

			#account-management .section-panel										{ margin: 0% 0% 1.5em 0%; width: 100%; }
			#account-management .section-panel:nth-of-type(3n+1)					{ margin-left: 0%; }

			.desktop-to-small-mobile-element										{ display: none !important; }
			.small-mobile-element													{ display: block !important; }

			#account-management .account_page_header .button						{ max-width: 65px; font-size: 0.9rem; }
			#account-management.details .back-to-list								{ max-width: 65px; font-size: 0.9rem; }

			#account-management .section-buttons									{ flex-direction: column; align-items: center; }

	}


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — MANAGER (account area)

   The manager is built out of the account area's OWN patterns so it reads like
   My Details (modules/Account Management/includes/details.php): an
   .account-panel card, a .panel-section per screen, h2 / h3 headings,
   .field-block.label-inline rows carrying a .field-label + .red-star +
   .field-note, .account-listing rows on the list screen, and
   .button primary|secondary|danger for every action.

   What is left in this block is only what the account area has no equivalent
   for — the hub tiles, the collapsible rep / blog / event cards, the category
   chips, the image widgets and the gallery — plus the handful of overrides that
   make the shared classes behave in a panel with no .section-menu beside it.
   Those bespoke pieces keep a `dm-` prefix so they cannot collide with anything
   else in the account area.

   Everything is scoped to `#account-management.directory-manager` (the account
   wrapper carries the URL segment as its class — see include.php), so none of
   it can leak. To re-theme, redeclare these rules in
   css/custom-account-management.css: it loads after this file (priority-3
   `custom-*` bucket, see functions.php), so an equal-specificity block wins
   with no !important needed.

   See modules/Account Management/includes/directory-manager.php and
   docs/directories/manager.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* Same measure as My Details. */
	#account-management.directory-manager											{ max-width: 1006px; }

/* The grey card. On My Details the colour comes from the
   `.section-menu + .account-panel` pairing; the manager has no section menu
   (it has the hub), so it asks for the same treatment directly. */
	#account-management.directory-manager .account-panel							{ padding: 2.5625em 2.75em 3em 2.75em; background-color: #F1F1F1; }

/* Every glyph in the manager is line art — an outlined <svg> that relies on its
   own fill="none" attribute. css/default.css:619 sets `svg { fill: currentColor }`,
   and a stylesheet declaration beats a presentation attribute, so without this
   they all paint solid. Colour still comes from `color` via stroke="currentColor". */
	#account-management.directory-manager svg										{ fill: none; }

	#account-management.directory-manager .panel-header								{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1em; }
	/* margin-left keeps the status / View Live cluster on the right — it is the
	   row's only child, so space-between has nothing to push it away from. */
	#account-management.directory-manager .panel-header-buttons						{ display: flex; align-items: center; gap: 0.75em; margin-left: auto; }
	#account-management.directory-manager .panel-header .button						{ margin: 0; }
	#account-management.directory-manager .account_page_header .button				{ margin: 0; max-width: none; }

/* Panel titles. `.panel-section h2` (line 126) drops these to 400 account-wide;
   the manager wants them bold. Same specificity as that rule, so it wins on
   source order — keep it below line 126. */
	#account-management.directory-manager h2										{ font-weight: 700; }

/* The details panel is the long one, so it is broken into groups — Basics,
   Details, Categories, Media — separated by rules rather than boxed, the same
   way My Details separates its account controls. */
	#account-management.directory-manager h3										{ margin: 0 0 0.25em; font-size: 1.125em; line-height: 1.5em; font-weight: 700; color: #000000; }
	#account-management.directory-manager hr										{ height: 2px; margin: 2em 0; background-color: #FFFFFF; border: 0 none; }

/* Same one-row label + field My Details gets from its section menu. */
	#account-management.directory-manager .field-block								{ margin-bottom: 1.25em; }
	#account-management.directory-manager .field-block label						{ display: flex; flex-wrap: wrap; }
	#account-management.directory-manager .field-block:not(.label-inline) > .field-label	{ width: 100%; }
	#account-management.directory-manager .field-block textarea						{ min-height: 5em; }

/* .field-block button is margin-top:2em account-wide, where it is the save
   button under a block of fields. The buttons inside the manager's field blocks
   are "Choose image" / "Add images", which belong beside their field. */
	#account-management.directory-manager .field-block button						{ margin: 0; }

/* Both carry a font-size of their own because `.panel-section p` drops every
   paragraph in the panel to 0.75em — right for the intro lines, too small for
   a hint sitting under a field. The 30% indent puts a label-inline hint under
   its input rather than under its label. */
	#account-management.directory-manager .field-note								{ margin: 0.5em 0 0; font-size: 0.875em; line-height: 1.5em; color: #777777; }
	#account-management.directory-manager .label-inline .field-note					{ margin-left: 30%; }
	#account-management.directory-manager .error-text								{ margin: 0.5em 0 0; font-size: 0.875em; font-weight: 600; color: #CC1B1B; }
	#account-management.directory-manager .requiredfield_notice						{ margin-bottom: 1.5em; }

/* Qualified with the element to outweigh `.my-account p.no-records`, which
   indents the account area's empty states by 1.5em — right in a list of
   records, wrong for a line sitting inside a field block. */
	#account-management.directory-manager p.no-records								{ margin: 0.5em 0 1em; font-size: 0.875em; color: #777777; }

/* Two fields on one row — the account's own .col-2, with the gutter moved out
   to the middle so the pair still lines up with the full-width fields above. */
	#account-management.directory-manager .field-block.col-2						{ padding: 0; width: 49%; }
	#account-management.directory-manager .field-block.col-2 + .field-block.col-2	{ margin-left: 2%; }

/* The live counter beside "Max 160 characters." */
	#account-management.directory-manager .dm-count									{ font-weight: 600; }
	#account-management.directory-manager .dm-count.is-full							{ color: #CC1B1B; }
	
/* Rich-text description. The editor is as wide as the panel, so its label sits
   above it rather than beside it — and it is deliberately not inside a <label>
   (see the note in directory-manager.php).

   Blocked out of .field-block's flex row: CKEditor hides the textarea and puts
   its own container beside it, and that container carries no width of its own,
   so as a flex item it shrinks to the width of its toolbar. The field is a
   single stacked column anyway — label, editor, hint — so plain block flow is
   what it wants, and the container then fills the panel like any other block.
   width:100% on the container as well, in case a future config.width or an
   inline-toolbar build changes what it is laid out as. */
	#account-management.directory-manager .dm-richtext-field						{ display: block; }
	#account-management.directory-manager .dm-richtext-field textarea				{ width: 100%; }
	#account-management.directory-manager .dm-richtext-field .cke_chrome			{ width: 100%; }
	#account-management.directory-manager .cke_chrome								{ border-color: #DDDDDD !important; }


/* — the hub: the manager's four panels, 2x2 —
   The landing screen of a saved directory. Each tile is a plain <a> to
   ?section=<key>, so the whole tile is one target and the browser gets a real
   link (middle-click, back button, bookmark) rather than a scripted one. The
   grid is fixed at two columns because "2x2" is the design, not a consequence
   of the tile width; it drops to one column on narrow screens. */
	#account-management.directory-manager .dm-hub									{ margin-top: 1.5em; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }

/* Column layout with the foot pushed down (margin-top:auto on .dm-hub__foot),
   so the chips line up across a row whose hints wrap to different heights. */
	#account-management.directory-manager .dm-hub__tile								{ padding: 1.25em; min-height: 175px; color: #333333; background-color: #FFFFFF; border: 1px solid #E0E0E0; text-decoration: none; display: flex; flex-direction: column; gap: 0.5em; transition: background-color 0.3s ease; }
	#account-management.directory-manager .dm-hub__tile:hover						{ background-color: #FAFAFA; border-color: #C0C0C0; }
	#account-management.directory-manager .dm-hub__icon								{ color: #313131; display: inline-flex; }
	#account-management.directory-manager .dm-hub__title							{ font-size: 1.125em; line-height: 1.5em; font-weight: 400; text-transform: uppercase; color: #313131; }
	#account-management.directory-manager .dm-hub__hint								{ font-size: 0.875em; line-height: 1.5em; color: #777777; }
	#account-management.directory-manager .dm-hub__foot								{ margin-top: auto; padding-top: 0.75em; display: flex; align-items: center; justify-content: space-between; gap: 0.75em; }

/* Nudges right on hover — the one bit of motion on the screen, and it points at
   what the click does. */
	#account-management.directory-manager .dm-hub__go								{ color: #313131; display: inline-flex; transition: transform 0.15s ease; }
	#account-management.directory-manager .dm-hub__tile:hover .dm-hub__go			{ transform: translateX(4px); }

/* — status pills —
   The "on" state is a solid fill and the "off" state an outline, so
   published/draft and located/unlocated read as a pair at a glance. They sit on
   white rows AND on the grey card heads, which is why neither is a tint. */
	#account-management.directory-manager .dm-tag									{ padding: 0.25em 0.875em; font-size: 0.75em; line-height: 1.5em; font-weight: 600; white-space: nowrap; border-radius: 999px; vertical-align: middle; display: inline-block; }
	#account-management.directory-manager .dm-tag-accent							{ color: #FFFFFF; background-color: #313131; }
	#account-management.directory-manager .dm-tag-neutral							{ color: #666666; background-color: #FFFFFF; border: 1px solid #CCCCCC; }

/* — the list screen —
   Rows are separate white cards on the grey panel, the same treatment as the
   hub tiles and the rep / blog / event cards, rather than the account area's
   striped block. That block is built for a WHITE panel: it tints the container
   #F7F7F7 and every even row #F1F1F1, which is exactly the grey this card is
   painted (see .account-panel above) — so the even rows vanish, the odd ones
   are two ticks off it, and .no-shadow has already taken away the lift that
   would otherwise separate the block from the card. Its 3px #F0EFEF row
   separators disappear on that grey for the same reason.

   All four rules below are equal-specificity to the generic ones they replace
   (lines 195-199) and win on source order — keep them below that block. */
	#account-management.directory-manager .account-listing							{ background-color: transparent; }
	#account-management.directory-manager .account-listing-panel					{ margin-bottom: 1em; padding: 1.25em; align-items: center; background-color: #FFFFFF; border: 1px solid #E0E0E0; transition: background-color 0.3s ease, border-color 0.3s ease; }
	#account-management.directory-manager .account-listing-panel:nth-child(even)		{ background-color: #FFFFFF; }
	#account-management.directory-manager .account-listing-panel:hover				{ background-color: #FAFAFA; border-color: #C0C0C0; }
	#account-management.directory-manager .account-listing-panel:last-child			{ margin-bottom: 0; }
	#account-management.directory-manager .account-listing-panel h3					{ margin: 0 0 0.25em; font-size: 1.125em; font-weight: 700; text-transform: none; }
	#account-management.directory-manager .account-listing-panel h3 .dm-tag			{ margin-left: 0.75em; }
	#account-management.directory-manager .account-listing-panel p					{ margin: 0; font-size: 0.875em; color: #777777; }
	#account-management.directory-manager .listing-panel-buttons					{ white-space: nowrap; display: flex; align-items: center; gap: 0.625em; }
	#account-management.directory-manager .listing-panel-buttons .button			{ margin: 0; }

/* — rep locations, latest blogs and events — each card saves itself.
   The three sections are the same component: a collapsible card with an image
   column and a field column. Shared rules carry all three class names; only the
   parts that genuinely differ are split out. */
	#account-management.directory-manager .dm-cards									{ margin-top: 1em; }
	#account-management.directory-manager .dm-rep,
	#account-management.directory-manager .dm-news,
	#account-management.directory-manager .dm-event									{ margin-bottom: 1em; background-color: #FFFFFF; border: 1px solid #E0E0E0; }

/* The head is a <button> — it is the accordion toggle — so the account area's
   button styling has to be undone before it can look like a card header. */
	#account-management.directory-manager .dm-rep__head,
	#account-management.directory-manager .dm-news__head,
	#account-management.directory-manager .dm-event__head							{ margin: 0; padding: 0.75em 1em; width: 100%; font: inherit; text-align: left; text-transform: none; color: #333333; background-color: #EEEEEE; border: 0 none; border-bottom: 1px solid #E0E0E0; border-radius: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75em; cursor: pointer; }
	#account-management.directory-manager .dm-rep__head:hover,
	#account-management.directory-manager .dm-news__head:hover,
	#account-management.directory-manager .dm-event__head:hover						{ background-color: #E7E7E7; }
	#account-management.directory-manager .dm-rep__title,
	#account-management.directory-manager .dm-news__title,
	#account-management.directory-manager .dm-event__title							{ flex: 1 1 auto; min-width: 0; font-size: 0.875em; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
	#account-management.directory-manager .dm-rep__where,
	#account-management.directory-manager .dm-event__when							{ flex: 0 1 auto; min-width: 0; font-size: 0.75em; color: #777777; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* pointer-events off so a click always lands on the button, never on the svg
   path — delegated handlers have to walk up from whatever was hit. */
	#account-management.directory-manager .dm-chevron								{ flex: none; color: #777777; pointer-events: none; display: inline-flex; transition: transform 0.15s ease; }
	#account-management.directory-manager .dm-rep.is-collapsed .dm-chevron,
	#account-management.directory-manager .dm-news.is-collapsed .dm-chevron,
	#account-management.directory-manager .dm-event.is-collapsed .dm-chevron		{ transform: rotate(-90deg); }
	#account-management.directory-manager .dm-rep.is-collapsed .dm-rep__head,
	#account-management.directory-manager .dm-news.is-collapsed .dm-news__head,
	#account-management.directory-manager .dm-event.is-collapsed .dm-event__head	{ border-bottom: 0 none; }
	#account-management.directory-manager .dm-rep.is-collapsed .dm-rep__body,
	#account-management.directory-manager .dm-news.is-collapsed .dm-news__body,
	#account-management.directory-manager .dm-event.is-collapsed .dm-event__body	{ display: none; }

	#account-management.directory-manager .dm-rep__body,
	#account-management.directory-manager .dm-news__body,
	#account-management.directory-manager .dm-event__body							{ padding: 1.25em; align-items: start; display: grid; grid-template-columns: 150px 1fr; gap: 1.5em; }

/* A card column is narrower than the panel, so its fields fill it rather than
   taking the account area's 95% / 65% form widths. */
	#account-management.directory-manager .dm-cards .field-block input,
	#account-management.directory-manager .dm-cards .field-block textarea,
	#account-management.directory-manager .dm-cards .field-block select				{ width: 100%; }

/* A flex column, so the preview and the Choose button both fill the 150px
   image track — align-items must stay `stretch`, or the frame collapses to the
   width of its "No photo yet" placeholder. */
	#account-management.directory-manager .dm-rep__photo,
	#account-management.directory-manager .dm-news__photo,
	#account-management.directory-manager .dm-event__photo							{ margin: 0; position: relative; display: flex; flex-direction: column; gap: 0.625em; }

/* The photo column is a flex column with its own gap, so its Choose button does
   not want the margin-top `.panel-section button` gives every other button. */
	#account-management.directory-manager .dm-rep__photo button,
	#account-management.directory-manager .dm-news__photo button,
	#account-management.directory-manager .dm-event__photo button					{ margin: 0; }
	#account-management.directory-manager .dm-rep__photo .directory-image__preview	{ width: 100%; aspect-ratio: 1; }

/* The blog and event images are the card's landscape header on the detail page,
   so their previews match that shape rather than the rep's square portrait. */
	#account-management.directory-manager .dm-news__photo .directory-image__preview,
	#account-management.directory-manager .dm-event__photo .directory-image__preview	{ width: 100%; aspect-ratio: 16 / 10; }

	#account-management.directory-manager .dm-rep__lookup							{ position: relative; }
	#account-management.directory-manager .dm-rep__results							{ position: absolute; z-index: 20; top: 100%; right: 0; left: 0; max-height: 240px; overflow-y: auto; background-color: #FFFFFF; border: 1px solid #DDDDDD; border-top: 0 none; }
	#account-management.directory-manager .dm-rep__result							{ padding: 0.5em 0.75em; font-size: 0.875em; border-bottom: 1px solid #EEEEEE; cursor: pointer; }
	#account-management.directory-manager .dm-rep__result:last-child				{ border-bottom: 0 none; }
	#account-management.directory-manager .dm-rep__result:hover						{ background-color: #F1F1F1; }
	#account-management.directory-manager .dm-rep__result.is-empty					{ color: #999999; cursor: default; }
	#account-management.directory-manager .dm-rep__result.is-empty:hover			{ background-color: #FFFFFF; }

	/* — the pin: one Mapbox map per rep card —
   In place of the pair of coordinate boxes this field used to be. The
   coordinates are still there, as hidden inputs, and they are still what saves;
   this is only how they get their value. `display: block` because .field-block
   is a flex row and every part of this field is a full-width band.

   The canvas needs a REAL height here: Mapbox measures its container at
   construction and never re-measures on its own, so a height that only arrives
   later leaves a map that never appears (the manager's JS re-measures on every
   card open, which covers the panel being resized while a card was shut). */
	#account-management.directory-manager .dm-rep__place							{ display: block; }
	#account-management.directory-manager .dm-rep__place > .field-label				{ width: 100%; }
/* --directory-rep-pin is read by the JS, exactly as the detail page's
   .directory-reps__map reads it (line ~1745) — Mapbox bakes the colour into the
   marker SVG, so it cannot be restyled afterwards. Same value here so the pin
   the member drops looks like the pin the public sees; re-brand both together in
   css/custom-account-management.css. */
	#account-management.directory-manager .dm-rep__map								{ --directory-rep-pin: #8a1a5b; position: relative; }
	#account-management.directory-manager .dm-rep__canvas							{ width: 100%; height: 260px; background-color: #F1F1F1; border: 1px solid #DDDDDD; }

/* The prompt for the click, on a card whose rep has no pin yet. pointer-events
   off so the very click it is asking for still lands on the map underneath. */
	#account-management.directory-manager .dm-rep__hint								{ position: absolute; top: 10px; left: 10px; margin: 0; padding: 0.4em 0.7em; max-width: calc(100% - 20px); font-size: 0.75em; line-height: 1.4em; color: #333333; background-color: rgba(255, 255, 255, 0.92); border: 1px solid #DDDDDD; pointer-events: none; }
	#account-management.directory-manager .dm-rep__map:not(.is-empty) .dm-rep__hint	{ display: none; }

/* No Mapbox (the CDN is the only way this page gets it): the dead canvas goes
   and the location search above becomes the whole interface — it geocodes
   server-side, so it can still set the pin on its own. */
	#account-management.directory-manager .dm-rep__nomap							{ display: none; margin: 0; padding: 0.75em 1em; font-size: 0.875em; line-height: 1.5em; color: #777777; background-color: #FFFFFF; border: 1px solid #DDDDDD; }
	#account-management.directory-manager .dm-rep__map.no-map .dm-rep__canvas,
	#account-management.directory-manager .dm-rep__map.no-map .dm-rep__hint			{ display: none; }
	#account-management.directory-manager .dm-rep__map.no-map .dm-rep__nomap			{ display: block; }

/* The readout of what is currently pinned, and the way to take it back off. */
	#account-management.directory-manager .dm-rep__pinbar							{ margin-top: 0.625em; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75em; }
	#account-management.directory-manager .dm-rep__coords							{ font-size: 0.875em; color: #777777; }
	#account-management.directory-manager .dm-rep__pinbar .button					{ margin: 0; }

/* Date and time sit side by side in one field. The time is the narrower of the
   two and may be left empty — an event without a time is an all-day event. */
	#account-management.directory-manager .dm-event__datetime						{ width: 100%; display: flex; gap: 0.5em; }
	#account-management.directory-manager .dm-event__datetime input[type="date"]	{ flex: 1 1 auto; min-width: 0; }
	#account-management.directory-manager .dm-event__datetime input[type="time"]	{ flex: 0 0 7em; }

/* An event whose last day has gone. The detail page stopped listing it, but it
   is still editable and still in the list, so the card steps back rather than
   being hidden: a quieter head, and a filled "Past" pill that reads differently
   from the outlined Draft one next to it. */
	#account-management.directory-manager .dm-event.is-past > .dm-event__head		{ background-color: #F6F6F6; }
	#account-management.directory-manager .dm-event.is-past > .dm-event__head .dm-event__title,
	#account-management.directory-manager .dm-event.is-past > .dm-event__head .dm-event__when	{ color: #999999; }
	#account-management.directory-manager .dm-event__flag--past						{ color: #555555; background-color: #E1E1E1; border-color: transparent; }

	#account-management.directory-manager .dm-card__actions							{ margin-top: 1.5em; display: flex; align-items: center; gap: 0.625em; }
	#account-management.directory-manager .dm-card__actions .button					{ margin: 0; }

/* — category chips —
   A checkbox list, but the whole tile is the target. The native box is taken off
   screen (not display:none — it still has to be focusable and serialize) and
   redrawn as .dm-chip__box. :has() styles the checked state directly; the
   .is-active class is the JS fallback for browsers without it. */
	#account-management.directory-manager .dm-cats									{ margin-top: 1em; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5em; }
	#account-management.directory-manager .dm-chip									{ margin: 0; padding: 0.625em 0.75em; width: 100%; font-size: 0.875em; line-height: 1.5em; background-color: #FFFFFF; border: 1px solid #DDDDDD; display: flex; align-items: center; gap: 0.625em; cursor: pointer; user-select: none; }
	#account-management.directory-manager .dm-chip input							{ position: absolute; margin: 0; width: 0; height: 0; min-width: 0; opacity: 0; pointer-events: none; }
	#account-management.directory-manager .dm-chip__box								{ flex: none; width: 17px; height: 17px; background-color: #FFFFFF; border: 1px solid #CCCCCC; display: inline-flex; align-items: center; justify-content: center; }
	#account-management.directory-manager .dm-chip__box svg							{ display: none; }
	#account-management.directory-manager .dm-chip.is-active,
	#account-management.directory-manager .dm-chip:has(input:checked)				{ border-color: #313131; }
	#account-management.directory-manager .dm-chip.is-active .dm-chip__box,
	#account-management.directory-manager .dm-chip:has(input:checked) .dm-chip__box	{ background-color: #313131; border-color: #313131; }
	#account-management.directory-manager .dm-chip.is-active .dm-chip__box svg,
	#account-management.directory-manager .dm-chip:has(input:checked) .dm-chip__box svg	{ display: block; }

/* — logo / banner / card photo widgets —
   One hidden input holding the stored path, a preview painted as a background
   image, and a Choose / Remove pair. Shared with the card photos above. */
	#account-management.directory-manager .dm-image--logo							{ align-items: start; display: grid; grid-template-columns: 180px 1fr; gap: 1.5em; }
	#account-management.directory-manager .dm-image--banner							{ display: grid; grid-template-columns: 1fr; gap: 0.75em; }
	#account-management.directory-manager .dm-image--logo > .field-label,
	#account-management.directory-manager .dm-image--banner > .field-label			{ grid-column: 1 / -1; }
	#account-management.directory-manager .dm-image__frame							{ position: relative; }
	#account-management.directory-manager .dm-image__side							{ display: flex; flex-direction: column; align-items: flex-start; }
	#account-management.directory-manager .directory-image__preview					{ background-color: #FFFFFF; background-position: center; background-size: cover; background-repeat: no-repeat; border: 1px dashed #CCCCCC; display: flex; align-items: center; justify-content: center; overflow: hidden; }
	#account-management.directory-manager .directory-image__preview.is-empty		{ font-size: 0.75em; color: #999999; text-align: center; }
	#account-management.directory-manager .dm-image--logo .directory-image__preview	{ width: 100%; aspect-ratio: 1; }
	#account-management.directory-manager .dm-image--banner .directory-image__preview	{ width: 100%; height: 170px; }
	#account-management.directory-manager .directory-image__clear					{ position: absolute; top: 8px; right: 8px; margin: 0; padding: 0; width: 24px; height: 24px; min-width: 0; font-size: 0.875em; line-height: 1; color: #FFFFFF; background-color: #313131; border: 0 none; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* — gallery (the detail page's carousel) — */
	#account-management.directory-manager .directory-gallery						{ margin-bottom: 0.75em; display: flex; flex-wrap: wrap; gap: 0.75em; }
	#account-management.directory-manager .directory-gallery__item					{ position: relative; width: 130px; }
	#account-management.directory-manager .directory-gallery__item img				{ width: 130px; height: 98px; object-fit: cover; border: 1px solid #DDDDDD; display: block; cursor: move; }
	#account-management.directory-manager .directory-gallery__remove				{ position: absolute; top: 6px; right: 6px; margin: 0; padding: 0; width: 24px; height: 24px; min-width: 0; line-height: 1; color: #FFFFFF; background-color: #313131; border: 0 none; border-radius: 0; cursor: pointer; }
	#account-management.directory-manager .dm-gallery-locked						{ padding: 0.75em 1em; font-size: 0.875em; background-color: #FFFFFF; border: 1px solid #DDDDDD; display: flex; align-items: center; gap: 0.75em; }
	#account-management.directory-manager .dm-gallery-locked__icon					{ flex: none; width: 30px; height: 30px; color: #777777; background-color: #EEEEEE; display: inline-flex; align-items: center; justify-content: center; }

/* Account-wide, .section-buttons centres its buttons.
   My Details puts a single Save Changes button at the left instead, so
   the manager's save row does the same. */
	#account-management.directory-manager .section-buttons							{ margin: 0; padding: 0; justify-content: flex-start; }

/* The one irreversible action on the screen: below the save buttons, on its own
   so it never reads as just another option. */
	#account-management.directory-manager .directory-manager__danger				{ margin-top: 1.5em; }
	#account-management.directory-manager .directory-manager__danger .button		{ margin: 0; }

	@media only screen and (min-width: 0px) and (max-width: 800px)
	{
			#account-management.directory-manager .account-panel					{ padding: 1.5em; }

		/* The 2x2 hub stacks — two tiles side by side at this width leaves the
		   titles wrapping onto three lines each. */
			#account-management.directory-manager .dm-hub							{ grid-template-columns: 1fr; }
			#account-management.directory-manager .dm-hub__tile						{ min-height: 0; }

		/* The logo frame stops being a 180px column and would otherwise stretch
		   to the full panel width — and it is square, so that is also its height. */
			#account-management.directory-manager .dm-image--logo					{ grid-template-columns: 1fr; }
			#account-management.directory-manager .dm-image--logo .dm-image__frame	{ max-width: 180px; }

			#account-management.directory-manager .field-block.col-2				{ width: 100%; }
			#account-management.directory-manager .field-block.col-2 + .field-block.col-2	{ margin-left: 0; }

		/* The account area drops .field-label to 100% at this width, so a hint
		   no longer has an input to line up under. */
			#account-management.directory-manager .label-inline .field-note			{ margin-left: 0; }

			#account-management.directory-manager .dm-rep__body,
			#account-management.directory-manager .dm-news__body,
			#account-management.directory-manager .dm-event__body					{ grid-template-columns: 1fr; }
			#account-management.directory-manager .dm-rep__photo					{ max-width: 150px; }
			#account-management.directory-manager .dm-news__photo,
			#account-management.directory-manager .dm-event__photo					{ max-width: 240px; }
			#account-management.directory-manager .dm-rep__where,
			#account-management.directory-manager .dm-event__when					{ display: none; }

			/* A shorter map on a phone: the card is one column here, so 260px of it
		   is most of the screen. */
			#account-management.directory-manager .dm-rep__canvas					{ height: 200px; }

			#account-management.directory-manager .account-listing-panel			{ flex-wrap: wrap; }
			#account-management.directory-manager .listing-panel-buttons			{ margin-top: 0.75em; }
	}


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — DIALOGS (delete / save popups)

   One shell, .dm-dialog, applied by passing it as PopupPanel's 4th argument
   alongside a variant — the same hook .popup-panel.delete-my-account and
   .inspection-search use above:

       "dm-dialog dm-dialog--delete"        confirm before deleting
       "dm-dialog dm-dialog--save"          save / publish confirmation
       "dm-dialog dm-dialog--save is-error" the same, save failed

   PopupPanel appends to <body>, OUTSIDE #account-management, so the manager's
   own block cannot reach these — the account palette (#313131 primary, #dc3545
   danger) is repeated literally here.
   Every rule below carries more classes than its counterpart in default.css,
   so it wins on specificity rather than on stylesheet order.
   ══════════════════════════════════════════════════════════════════════════ */

.popup-panel.dm-dialog { max-width: 460px; padding: 40px 36px 32px; text-align: center; border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); }

/* Coloured disc behind the icon: the tone of the dialog lands before the text
   is read. Each variant only has to restate the two colours. */
.popup-panel.dm-dialog .dm-dialog__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 20px; font-size: 24px; color: #313131; background: #EEEEEE; border-radius: 50%; }
.popup-panel.dm-dialog--delete .dm-dialog__icon,
.popup-panel.dm-dialog.is-error .dm-dialog__icon { color: #dc3545; background: #fdecee; }

.popup-panel.dm-dialog .dm-dialog__title { margin: 0 0 10px; font-size: 20px; font-weight: 700; line-height: 1.25; color: #313131; }
.popup-panel.dm-dialog .dm-dialog__body { margin: 0; font-size: 14px; line-height: 1.55; color: #666666; }
.popup-panel.dm-dialog .dm-dialog__body strong { color: #313131; font-weight: 700; }

/* Buttons side by side. The base sheet sizes confirm buttons with percentage
   widths plus an :nth-of-type margin, so both are zeroed and replaced by
   flex + gap — the nth-of-type reset needs its own rule to outweigh it. */
.popup-panel.dm-dialog .popup-buttons { display: flex; gap: 12px; margin-top: 28px; }
.popup-panel.dm-dialog .popup-buttons button { flex: 1; width: auto; margin: 0; padding: 13px 16px; font-size: 14px; font-weight: 700; border-radius: 6px; }
.popup-panel.dm-dialog .popup-buttons button:nth-of-type(2n) { margin-left: 0; }
.popup-panel.dm-dialog .popup-buttons button.ok { color: #fff; background: #313131; }
.popup-panel.dm-dialog .popup-buttons button.ok:hover { background: #484848; }
.popup-panel.dm-dialog .popup-buttons button.cancel { color: #313131; background: #fff; border: 1px solid #CCCCCC; }
.popup-panel.dm-dialog .popup-buttons button.cancel:hover { background: #F1F1F1; }

/* The destructive confirm and the failure dismiss both carry the red. */
.popup-panel.dm-dialog.dm-dialog--delete .popup-buttons button.ok,
.popup-panel.dm-dialog.is-error .popup-buttons button.ok { background: #dc3545; }
.popup-panel.dm-dialog.dm-dialog--delete .popup-buttons button.ok:hover,
.popup-panel.dm-dialog.is-error .popup-buttons button.ok:hover { background: #c82333; }

/* A confirmation has one button; centre it rather than letting it stretch. */
.popup-panel.dm-dialog--save .popup-buttons { justify-content: center; }
.popup-panel.dm-dialog--save .popup-buttons button { flex: 0 1 180px; }

/* The default cross sits low enough to clash with the icon disc at this padding. */
.popup-panel.dm-dialog span.close { top: 14px; right: 16px; font-size: 1.125em; }

@media (max-width: 480px) {
	.popup-panel.dm-dialog { padding: 32px 22px 26px; }
	.popup-panel.dm-dialog .popup-buttons { flex-direction: column; }
	.popup-panel.dm-dialog--save .popup-buttons button { flex: 1 1 auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — LISTING page (members-only browse grid)
   Rendered by modules/Account Management/includes/directories.php (list branch).
   ══════════════════════════════════════════════════════════════════════ */

/* The brand colour the directory feature carries — the filter bar's magnifier
   and result count, and the Load More pill. Declared once on the root so a
   site whose brand is not this magenta has a single line to change. */
#account-management { --directory-accent: #a01e5f; }

/* Filter bar, per the corp directory design: one row — filter controls grouped
   left, "Sort by" out towards the right, the result count hard right. Both the
   sort group and the count take margin-left:auto so the free space splits
   between them rather than pooling in one gap.

   The brand accent comes from --directory-accent below. */
#account-management .directory-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 25px; }
#account-management .directory-bar .directory-filter,
#account-management .directory-bar .directory-sort { display: flex; align-items: center; gap: 10px; }

/* #account-management label is width:30%/display:block — right for the stacked
   account forms, wrong for a flex row, so the bar's own labels are reset. */
#account-management .directory-bar label { width: auto; margin: 0; display: inline-block; font-weight: 600; white-space: nowrap; color: #313131; }

#account-management .directory-bar input[type="text"],
#account-management .directory-bar select { height: 42px; padding: 0 14px; font-size: 0.9375em; line-height: normal; color: #333333; background: #ffffff; border: 1px solid #c9c9c9; border-radius: 4px; }
#account-management .directory-bar input[type="text"] { min-width: 290px; }
#account-management .directory-bar input[type="text"]::placeholder { color: #8f8f8f; }
#account-management .directory-bar select { min-width: 200px; cursor: pointer; }

/* Icon only, no button chrome — in the design the magnifier IS the control,
   which is why this one dropped the shared .button class. */
#account-management .directory-bar .directory-search-button { padding: 0 4px; min-width: 0; font-size: 1.375em; line-height: 1; color: var(--directory-accent); background: none; border: 0 none; cursor: pointer; }
#account-management .directory-bar .directory-search-button:hover { opacity: 0.75; }

#account-management .directory-bar .directory-sort { margin-left: auto; }
#account-management .directory-bar .directory-count { margin-left: auto; font-weight: 600; white-space: nowrap; color: var(--directory-accent); }

@media (max-width: 800px) {
	#account-management .directory-bar .directory-filter { flex-wrap: wrap; }
	#account-management .directory-bar input[type="text"] { min-width: 0; flex: 1 1 200px; }
	#account-management .directory-bar select { min-width: 0; flex: 1 1 160px; }
	#account-management .directory-bar .directory-sort,
	#account-management .directory-bar .directory-count { margin-left: 0; }
}

#account-management .directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
@media (max-width: 900px) { #account-management .directory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { #account-management .directory-grid { grid-template-columns: 1fr; } }

#account-management .directory-card { position: relative; display: flex; flex-direction: column; border: 1px solid #e2e2e2; border-radius: 6px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.2s ease; }
#account-management .directory-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }

/* The card is no longer one big <a> — the contact icons are links themselves,
   and anchors do not nest. Instead an empty anchor is stretched over the whole
   card, so clicking anywhere still opens the profile. z-index keeps it above
   .directory-card__body (which is positioned, so it would otherwise paint over
   it and swallow the clicks) and below .directory-card__contact. */
#account-management .directory-card__link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }

#account-management .directory-card__banner { position: relative; width: 100%; height: 120px !important; padding-top: 0; overflow: hidden; background: #f4f4f4; }
#account-management .directory-card__banner-image,
#account-management .directory-card__banner-image picture,
#account-management .directory-card__banner-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; }
#account-management .directory-card__banner-image img { transition: transform 0.4s ease; }
#account-management .directory-card:hover .directory-card__banner-image img { transform: scale(1.06); }

/* Column flex + flex:1 so the body fills the card, which lets "Read More" take
   margin-top:auto and pin itself (and the icon row under it) to the bottom.
   Without it a short blurb would leave the footer floating mid-card, out of
   line with its neighbours in the same grid row. */
#account-management .directory-card__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 20px; }

/* margin-inline auto centres the logo over the banner. The explicit width stops
   the column's default align-items:stretch applying, so the auto margins are
   what place it. */
#account-management .directory-card__logo { width: 90px; height: 90px; margin: -65px auto 12px; background: #fff; border-radius: 6px; padding: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; }
#account-management .directory-card__logo picture,
#account-management .directory-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Missing / deleted logo file -> neutral placeholder tile with the initial.
   Shared look; each container keeps its own size (card 90px, detail ~140px). */
#account-management .directory-logo-placeholder { display: flex; align-items: center; justify-content: center; }
#account-management .directory-logo-placeholder span { font-weight: 700; line-height: 1; color: #9a9a9a; }
#account-management .directory-card__logo.directory-logo-placeholder { background: #f0efef; }
#account-management .directory-card__logo.directory-logo-placeholder span { font-size: 34px; }
#account-management .directory-detail__logo.directory-logo-placeholder { width: 140px; aspect-ratio: 1 / 1; background: #f0efef; border-radius: 6px; }
#account-management .directory-detail__logo.directory-logo-placeholder span { font-size: 56px; }
#account-management .directory-card__name { margin: 0 0 8px; font-size: 1.15em; }
#account-management .directory-card__summary { margin: 0; color: #555; }

/* Reads as a link but is a <span> (see renderDirectoryCard) — so the link
   colour and underline are applied here rather than inherited. margin-top:auto
   pushes it, and the icon row beneath it, to the foot of the card.
   align-self:flex-start keeps the hover underline to the width of the words
   instead of the whole column. */
#account-management .directory-card__more { align-self: flex-start; margin-top: auto; padding-top: 15px; font-weight: 600; color: #3a3838; }
#account-management .directory-card:hover .directory-card__more { text-decoration: underline; }

/* Website / email icons, as on the classifieds listing they replace. Sits at
   the foot of the body, above the card's overlay link so these links win the
   click. The row is only rendered when the member supplied a contact, hence no
   min-height reservation — cards with none simply end at the summary.

   The icons INVERT rather than fill: an outlined circle with the glyph in
   --directory-contact-icon at rest, then on hover the disc goes solid in that
   same colour and the glyph takes --directory-contact-hover. Set white on
   transparent, so they read as a white outline at rest and a solid white circle
   with a brand-coloured glyph on hover — the classifieds treatment.

   All three are variables, the same re-theming convention as the detail page's
   CTA buttons: override them in custom-account-management.css (which loads
   after this file) to suit whatever the card sits on at go-live. */
#account-management .directory-card__contact {
	position: relative; z-index: 2; display: flex; gap: 10px; margin-top: 15px;
	--directory-contact-icon: #ffffff;                     /* glyph at rest, disc on hover */
	--directory-contact-border: rgba(255,255,255,0.55);    /* outline at rest */
	--directory-contact-hover: var(--directory-accent);    /* glyph on hover, against that disc */
}

/* Colour is spelled out per state and qualified with the anchor, for the same
   reason .directory-detail__back is (see below) — the template's own anchor
   rules otherwise reclaim it. */
#account-management a.directory-card__contact-link,
#account-management a.directory-card__contact-link:link,
#account-management a.directory-card__contact-link:visited { color: var(--directory-contact-icon); }
#account-management .directory-card__contact-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 1em; line-height: 1; background: transparent; border: 1px solid var(--directory-contact-border); border-radius: 50%; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
#account-management a.directory-card__contact-link:hover,
#account-management a.directory-card__contact-link:focus,
#account-management a.directory-card__contact-link:active { color: var(--directory-contact-hover); background: var(--directory-contact-icon); border-color: var(--directory-contact-icon); }

/* Load More — outlined pill in the brand accent, per the design. min-width is
   fixed so the button does not resize when the spinner appears beside the
   label mid-request. */
#account-management .directory-loadmore { text-align: center; margin-top: 30px; }
#account-management .directory-loadmore .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 190px; padding: 12px 30px; font-size: 0.9375em; font-weight: 600; color: var(--directory-accent); background: #ffffff; border: 1px solid var(--directory-accent); border-radius: 999px; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; }
#account-management .directory-loadmore .button:hover { color: #ffffff; background: var(--directory-accent); }

/* Mid-request the button is inert, so it should not answer to hover either. */
#account-management .directory-loadmore .button:disabled { cursor: default; opacity: 0.7; }
#account-management .directory-loadmore .button:disabled:hover { color: var(--directory-accent); background: #ffffff; }

#account-management .directory-loadmore__spinner { display: none; font-size: 0.9em; }
#account-management .directory-loadmore .button.is-loading .directory-loadmore__spinner { display: inline-block; }


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — DETAIL page (one directory's profile)
   Rendered by modules/Account Management/includes/directories.php (detail branch).
   ══════════════════════════════════════════════════════════════════════ */

#account-management .directory-detail__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
#account-management .directory-detail__title { margin: 0; font-size: 1.9em; font-weight: 700; }
#account-management .directory-detail__header { display: grid; grid-template-columns: 3fr 2fr; gap: 30px; align-items: start; }
@media (max-width: 800px) { #account-management .directory-detail__header { grid-template-columns: 1fr; } }

/* Logo + CTA buttons sit on one row, buttons to the right (matches the design).
   Both align to the top of the row so the buttons hold a fixed 32px offset (set
   on .directory-detail__cta) rather than drifting with the logo's height. */
#account-management .directory-detail__topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: nowrap; margin-bottom: 22px; }
/* Logo yields space (it scales) so the buttons stay on the row beside it rather
   than wrapping underneath when the column is narrow. */
#account-management .directory-detail__logo { max-width: 220px; min-width: 0; flex-shrink: 1; }
#account-management .directory-detail__logo picture,
#account-management .directory-detail__logo img { max-width: 100%; height: auto; }
#account-management .directory-detail__cta {
	display: flex; gap: 10px; flex-wrap: nowrap; flex-shrink: 0; margin-top: 32px;
	/* CTA colours are driven by these variables so they can be re-themed on go-live:
	   set the real brand magenta/teal in custom-account-management.css (which loads
	   after this file, so an equal-specificity override wins). Defaults are two greys. */
	--directory-cta-contact: #595959;   /* Contact button */
	--directory-cta-website: #8a8a8a;   /* View website button */
}
/* Button rows on this page space themselves with flex `gap`, so the account-wide
   `.button + .button` margin (line 101) would stack a second gap on top of it. */
#account-management .directory-detail .button + .button { margin-left: 0; }

#account-management .directory-detail__cta .button { display: inline-flex; align-items: center; gap: 8px; }
#account-management .directory-detail__cta-icon { width: 15px; height: 15px; flex: none; }
#account-management .directory-detail__cta .button.primary { background: var(--directory-cta-contact); border-color: var(--directory-cta-contact); color: #fff; }
#account-management .directory-detail__cta .button.primary:hover { background: color-mix(in srgb, var(--directory-cta-contact) 88%, #000); border-color: color-mix(in srgb, var(--directory-cta-contact) 88%, #000); color: #fff; }
#account-management .directory-detail__cta .button:not(.primary) { background: var(--directory-cta-website); border-color: var(--directory-cta-website); color: #fff; }
#account-management .directory-detail__cta .button:not(.primary):hover { background: color-mix(in srgb, var(--directory-cta-website) 88%, #000); border-color: color-mix(in srgb, var(--directory-cta-website) 88%, #000); color: #fff; }
#account-management .directory-detail__name { margin: 0 0 12px; }
#account-management .directory-detail__description { color: #444; line-height: 1.6; }

#account-management .directory-carousel { position: relative; overflow: hidden; border-radius: 8px; background: #f4f4f4; }
#account-management .directory-carousel__track { display: flex; transition: transform 0.35s ease; }
#account-management .directory-carousel__slide { flex: 0 0 100%; }
#account-management .directory-carousel__image { position: relative; width: 100%; padding-top: 100%; }
#account-management .directory-carousel__image picture,
#account-management .directory-carousel__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#account-management .directory-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: rgba(255, 255, 255, 0.85); width: 40px; height: 40px; padding: 8px; border-radius: 50%; cursor: pointer; font-size: 1.4em; line-height: 1; }
#account-management .directory-carousel__prev { left: 12px; }
#account-management .directory-carousel__next { right: 12px; }
#account-management .directory-carousel--empty { display: flex; align-items: center; justify-content: center; min-height: 260px; color: #999; }


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — REP FINDER (postcode + radius, above the map)
   Rendered with the map and never without it. See docs/directories/rep-locations.md.

   Not part of the FILLED BANDS group below even though it is filled: those three
   are content bands on a 45px rhythm, and this is a control strip — the design
   has it as a thin coloured rule between the content above and the map, so it
   carries its own (much tighter) padding and its own fill.
   ══════════════════════════════════════════════════════════════════════════ */

#account-management .directory-finder {
	/* Override in css/custom-account-management.css to re-brand. Matches the
	   pin colour rather than --directory-accent: this strip reads as part of
	   the map band under it, not as part of the listing chrome. */
	--directory-finder-background: #8a1a5b;

	background-color: var(--directory-finder-background);
	padding-top: 18px; padding-bottom: 18px;
	color: #ffffff;
}

#account-management .directory-finder__form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 0; }

/* Both text lines are <p>, and the sitewide `#account-management p` sets a dark
   colour — an inherited white off the band never reaches them, so each says it. */
#account-management .directory-finder__lead { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; }
#account-management .directory-finder__lead i { font-size: 1.15em; }

/* Labels sit beside their field, so they give up the sitewide 30% (100% at the
   mobile breakpoint, which would otherwise take the whole row and squeeze the
   input to nothing) and take their text width instead. */
#account-management .directory-finder__field { display: flex; align-items: center; gap: 8px; }
#account-management .directory-finder__field label { flex: none; width: auto; margin: 0; font-size: 0.875em; white-space: nowrap; }
#account-management .directory-finder__field input,
#account-management .directory-finder__field select { height: 38px; margin: 0; padding: 0 12px; font-size: 0.9375em; color: #313131; background: #ffffff; border: 0 none; border-radius: 4px; }
#account-management .directory-finder__field input { width: 160px; }
#account-management .directory-finder__field input::placeholder { color: #a5a5a5; }

/* Outline against the fill, inverting to solid on hover — the same gesture as
   the listing's Load More, which is white-on-accent the other way round. */
#account-management .directory-finder__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 38px; padding: 0 26px; font-size: 0.9375em; font-weight: 600; color: var(--directory-finder-background); background: #ffffff; border: 1px solid #ffffff; border-radius: 999px; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; }
#account-management .directory-finder__submit:hover { color: #ffffff; background: transparent; }
#account-management .directory-finder__submit:disabled { opacity: 0.7; cursor: default; }
#account-management .directory-finder__submit:disabled:hover { color: var(--directory-finder-background); background: #ffffff; }

/* Spinner only while the request is out (matches .directory-loadmore). */
#account-management .directory-finder__spinner { display: none; }
#account-management .directory-finder__submit.is-loading .directory-finder__spinner { display: inline-block; }

#account-management .directory-finder__reset { padding: 0; font-size: 0.875em; color: #ffffff; background: none; border: 0 none; text-decoration: underline; cursor: pointer; }

/* Result line — the search's own answer, so it sits under the form rather than
   over the map. Empty until a search has been run, and empty carries no box:
   :empty keeps the strip its unsearched height instead of reserving a gap. */
#account-management .directory-finder__result { margin: 12px 0 0; font-size: 0.9375em; text-align: center; color: #ffffff; }
#account-management .directory-finder__result:empty { display: none; }
#account-management .directory-finder__result.is-empty { opacity: 0.85; }

@media (max-width: 800px) {
	#account-management .directory-finder__form { flex-direction: column; align-items: stretch; }
	#account-management .directory-finder__lead { justify-content: center; }
	#account-management .directory-finder__field { justify-content: space-between; }
	#account-management .directory-finder__field input,
	#account-management .directory-finder__field select { flex: 1; min-width: 0; }
	#account-management .directory-finder__field input { width: auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — REP LOCATIONS (detail page Mapbox band)
   Rendered only when at least one rep has coordinates. See
   docs/directories/rep-locations.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* Shared band heading — uppercase, centred, a rule running out either side.
   Used by Rep Locations and Latest Blogs; keep new bands on this selector. */
#account-management .directory-reps__title,
#account-management .directory-news__title,
#account-management .directory-events__title { display: flex; align-items: center; gap: 20px; margin: 0 0 25px; font-size: 1.15em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
#account-management .directory-reps__title::before,
#account-management .directory-reps__title::after,
#account-management .directory-news__title::before,
#account-management .directory-news__title::after,
#account-management .directory-events__title::before,
#account-management .directory-events__title::after { content: ""; flex: 1; height: 1px; background: #d8d8d8; }
#account-management .directory-reps__map {
	/* Read by the map JS — Mapbox bakes the colour into the marker SVG, so it
	   cannot be restyled in CSS after the fact. Override in
	   css/custom-account-management.css to re-brand the pins. */
	--directory-rep-pin: #8a1a5b;

	width: 100%; height: 420px; border-radius: 8px; overflow: hidden; background: #eee;
}
@media (max-width: 600px) { #account-management .directory-reps__map { height: 320px; } }

/* Popup — the rep's card, per the design: photo left, details right. */
#account-management .directory-rep-popup { display: flex; align-items: center; gap: 12px; min-width: 210px; }
#account-management .directory-rep-popup__avatar { width: 56px; height: 56px; flex: none; border-radius: 4px; overflow: hidden; background: #f0efef; }
#account-management .directory-rep-popup__avatar picture,
#account-management .directory-rep-popup__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#account-management .directory-rep-popup__details { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#account-management .directory-rep-popup__name { font-weight: 700; line-height: 1.3; }
#account-management .directory-rep-popup__tel { color: inherit; text-decoration: none; font-size: 0.9em; }
#account-management .directory-rep-popup__tel:hover { text-decoration: underline; }
#account-management .directory-rep-popup__place { font-size: 0.8em; color: #777; }
/* Only on a search result — the full set carries no distance. */
#account-management .directory-rep-popup__distance { font-size: 0.8em; font-weight: 600; color: var(--directory-accent); }
#account-management .directory-rep-popup__email { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.85em; text-decoration: none; }
#account-management .directory-rep-popup__email:hover { text-decoration: underline; }

/* Initial-tile fallback when a rep has no photo (mirrors the logo placeholder). */
#account-management .directory-rep-placeholder { display: flex; align-items: center; justify-content: center; }
#account-management .directory-rep-placeholder span { font-weight: 700; line-height: 1; font-size: 22px; color: #9a9a9a; }

/* Mapbox's own popup chrome — tighten the default padding around our card. */
#account-management .directory-reps .mapboxgl-popup-content { padding: 10px 12px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — FILLED BANDS (detail page)
   Latest Blogs, Video and Upcoming Events are strips run edge to edge; Rep
   Locations and the profile header stay on white. Written once here because all
   three want the same vertical rhythm and the same fill hook — each band's own
   section below then carries only what is particular to it. The grey set here is
   the default the blogs and events bands keep; the video band overrides it to a
   dark fill in its own section, which is why the variable is declared on each
   band rather than once on a shared parent.
   ══════════════════════════════════════════════════════════════════════════ */

#account-management .directory-news,
#account-management .directory-video,
#account-management .directory-events {
	/* Override in css/custom-account-management.css to re-brand — one band on
	   its own if only one changes, since the variable is declared on each of
	   them. The video band already does exactly that (see VIDEO below), where
	   the dark fill also needs its two text variables swapped. */
	--directory-band-background: #F1F1F1;

	background-color: var(--directory-band-background);

	/* Their own vertical padding rather than .account-panel's. That rule is 30px
	   top / 50px bottom, which reads as the band sitting low once it is filled,
	   and at <=800px it becomes `padding: 0` — invisible on a white panel, but on
	   a coloured one it would put the heading against the edge. The sides belong
	   to .directory-offset (see the top of this file). */
	padding-top: 45px; padding-bottom: 45px;
}

@media (max-width: 800px) {
	#account-management .directory-news,
	#account-management .directory-video,
	#account-management .directory-events { padding-top: 35px; padding-bottom: 35px; }
}

/* Every band is optional, so the grey ones cannot assume something sits between
   them. Blogs and events are adjacent whenever the member has both but no video
   (or a video link we could not build a player from), and two identical greys
   touching stop being two bands: they read as one 700px slab with a stray
   heading in the middle of it. So the second of the pair drops back to the
   panel white — the alternation is what makes a band a band, not the grey.

   Only this one pair can collide today: reps and the profile header are white,
   and the video band between them is dark. Take that band light (see VIDEO
   below) and it needs the same treatment on both sides — .directory-news +
   .directory-video and .directory-video + .directory-events.

   Adjacent sibling rather than :has() so the CSS matches what the rest of this
   stylesheet assumes of a browser, and it holds either way round: with a video
   present the selector simply does not match, and events keeps its grey. */
#account-management .directory-news + .directory-events { --directory-band-background: #FFFFFF; }


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — CARD RAIL (detail page)
   The chevron either side of the Latest Blogs and Upcoming Events rows
   (corp-membership-draft.jpg). See docs/directories/card-rail.md.

   The rail is scrolling only — it does NOT lay the cards out. Each band's own
   track rule below still owns the card widths and the gap between them, so a
   band's shape is changed in one place and the rail follows it.

   Native overflow scrolling with scroll-snap rather than a carousel library:
   the row is a real scroller, so touch swipe, trackpad and wheel all work with
   no JS at all, and the arrows are a convenience on top rather than the only
   way through. (slick.min.js is in the tree, but it replaces the row with its
   own float-based track — which means re-doing both grids in its terms, and it
   has no `gap`.)
   ══════════════════════════════════════════════════════════════════════════ */

#account-management .directory-rail { display: flex; align-items: center; gap: 14px; }

#account-management .directory-rail__track {
	flex: 1; min-width: 0;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;

	/* Room for the blog cards' hover shadow, which the scroll container would
	   otherwise clip, pulled straight back off so the band's rhythm is unchanged. */
	padding: 8px 0; margin: -8px 0;

	/* The arrows are the control the design gives this row; a scrollbar sat
	   under the cards is chrome it does not have. Hiding it costs nothing —
	   the track still scrolls by touch, wheel and keyboard. */
	scrollbar-width: none; -ms-overflow-style: none;
}
#account-management .directory-rail__track::-webkit-scrollbar { display: none; }

/* Every card is a snap point, so a swipe always settles on a card edge rather
   than halfway across one. On the track's own children, so it applies to both
   bands without either naming its card class here. */
#account-management .directory-rail__track > * { scroll-snap-align: start; }

/* Bare chevrons in the margin either side, per the design — no circle, no fill.
   Each band points --directory-rail-arrow at its own accent (see below). */
#account-management .directory-rail__nav { flex: none; width: 26px; padding: 0; border: 0 none; background: none; color: var(--directory-rail-arrow, #8a1a5b); font-size: 1.7em; line-height: 1; cursor: pointer; transition: opacity 0.2s ease; }
#account-management .directory-rail__nav:hover { opacity: 0.65; }

/* At either end of the run the arrow stays put and greys out rather than
   disappearing, which would shift the whole row sideways as it went. */
#account-management .directory-rail__nav.is-disabled { opacity: 0.25; cursor: default; }

/* Nothing to scroll (or no JS): no controls. `visibility`, NOT `display` —
   removing the arrows widens the track, which can be exactly what stops it
   overflowing, which brings the arrows back. That oscillates; reserving the
   space means the cards are the same width either way. */
#account-management .directory-rail:not(.is-scrollable) .directory-rail__nav { visibility: hidden; }

@media (max-width: 560px) {
	#account-management .directory-rail { gap: 8px; }
	#account-management .directory-rail__nav { width: 16px; font-size: 1.3em; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — LATEST BLOGS (detail page card band)
   Rendered only when the directory has posts. See docs/directories/latest-blogs.md.
   ══════════════════════════════════════════════════════════════════════════ */

#account-management .directory-news {
	/* The heading colour on each card. Override in
	   css/custom-account-management.css to re-brand. */
	--directory-news-heading: #8a1a5b;
}

/* The band's chevrons take the card heading colour, so re-branding one
   re-brands both. */
#account-management .directory-news .directory-rail { --directory-rail-arrow: var(--directory-news-heading); }

/* Four cards across, dropping to two then one — a flex row rather than a grid
   because it is also the rail's scroll track (see CARD RAIL above), and a grid
   would size its columns to the visible width instead of running the cards off
   the end of it. The card count per row is unchanged; each width is the column
   it replaces, with the gaps taken out first.

   `min-width: 0` because a flex item defaults to `min-width: auto`, which means
   it refuses to shrink below its content — one long word in a title is then
   enough to push a card past its basis and overflow a row that should fit
   exactly, which shows the rail's arrows on a row with nothing to scroll to. */
#account-management .directory-news__grid { display: flex; gap: 20px; }
#account-management .directory-news__grid > .directory-news__card { flex: 0 0 calc((100% - 60px) / 4); min-width: 0; }
@media (max-width: 1000px) { #account-management .directory-news__grid > .directory-news__card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 560px)  { #account-management .directory-news__grid > .directory-news__card { flex-basis: 100%; } }

/* The whole card is the link when the member gave one; a linkless post renders
   the same classes on a <div>, so these rules have to work on both. */
#account-management .directory-news__card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e2e2; border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.2s ease; }
#account-management a.directory-news__card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
#account-management .directory-news__image { position: relative; width: 100%; padding-top: 62%; background: #f4f4f4; overflow: hidden; }
#account-management .directory-news__image picture,
#account-management .directory-news__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
/* no image, or the file has gone — a neutral tile, never a broken image */
#account-management .directory-news__image--empty { background: #f0efef; }
#account-management .directory-news__body { padding: 16px 18px 20px; }
#account-management .directory-news__heading { margin: 0 0 8px; font-size: 1em; line-height: 1.35; font-weight: 700; color: var(--directory-news-heading); }
/* Hover affordances only on a card that actually goes somewhere. */
#account-management a.directory-news__card:hover .directory-news__heading { text-decoration: underline; }

/* Three lines then ellipsis: the paragraph is free text, and cards in a row
   have to keep the same rhythm however much a member wrote. */
#account-management .directory-news__summary { margin: 0; font-size: 0.9em; line-height: 1.5; color: #555; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — UPCOMING EVENTS (detail page band)
   Rendered only when the directory has events still to come. See
   docs/directories/events.md.
   ══════════════════════════════════════════════════════════════════════════ */

#account-management .directory-events {
	/* Heading and "Book online" button. Override in
	   css/custom-account-management.css to re-brand. */
	--directory-event-accent: #8a1a5b;
}

/* The band's chevrons take the heading / button colour, so re-branding one
   re-brands all three. */
#account-management .directory-events .directory-rail { --directory-rail-arrow: var(--directory-event-accent); }

/* Two across and centred, as in the design — event cards are wider than the
   blog cards, so the row is capped rather than filling the panel. The cap is on
   the RAIL, not the track: it has to cover the chevrons either side as well, or
   the cards are pushed off centre by an arrow's width. 900px of cards plus
   2 × (26px arrow + 14px gap) — keep it in step with .directory-rail__nav. */
#account-management .directory-events .directory-rail { max-width: 980px; margin: 0 auto; }

/* A flex row rather than a grid, and `min-width: 0` on the cards, both for the
   reasons given on the blogs track above. */
#account-management .directory-events__grid { display: flex; gap: 40px; }
#account-management .directory-events__grid > .directory-events__card { flex: 0 0 calc((100% - 40px) / 2); min-width: 0; }
@media (max-width: 700px) {
	#account-management .directory-events__grid { gap: 30px; }
	#account-management .directory-events__grid > .directory-events__card { flex-basis: 100%; }
}

/* No border or panel: in the design the image sits flat on the page with the
   text flush beneath it. Unlike a blog card, the tile is not a link — the
   "Book online" button is the only action, and it leaves the site. */
#account-management .directory-events__card { display: flex; flex-direction: column; }
#account-management .directory-events__image { position: relative; width: 100%; padding-top: 56.25%; background: #f4f4f4; overflow: hidden; }
#account-management .directory-events__image picture,
#account-management .directory-events__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#account-management .directory-events__image--empty { background: #f0efef; }
#account-management .directory-events__body { padding: 16px 0 0; }
#account-management .directory-events__heading { margin: 0 0 8px; font-size: 1.05em; line-height: 1.35; font-weight: 700; color: var(--directory-event-accent); }
#account-management .directory-events__dates { margin: 0 0 2px; font-size: 0.95em; color: #333; }
#account-management .directory-events__summary { margin: 0; font-size: 0.95em; line-height: 1.5; color: #555; }
#account-management .directory-events__book { display: inline-block; margin-top: 16px; padding: 9px 18px; background: var(--directory-event-accent); border: 1px solid var(--directory-event-accent); color: #fff; font-size: 0.9em; text-decoration: none; }
#account-management .directory-events__book:hover { background: color-mix(in srgb, var(--directory-event-accent) 88%, #000); border-color: color-mix(in srgb, var(--directory-event-accent) 88%, #000); color: #fff; }


/* ══════════════════════════════════════════════════════════════════════════
   Corporate Membership Directory — VIDEO (detail page band)
   One embedded YouTube / Vimeo player with its own title and paragraph.
   Rendered only when the directory has a link we can build a player from.
   See docs/directories/video.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* Filled like the two bands it sits between (see FILLED BANDS above), so it
   does not join the shared .directory-*__title rule the other bands use — the
   rules that run out either side of those headings have nothing to run across
   here, and nothing to centre against now the text is ranged left.

   The draft (corp-membership-draft.jpg) picks this one band out in the brand
   magenta; it is built dark instead, which sets the video apart from the light
   blogs and events bands either side without a second brand colour fighting the
   player for attention — and a dark surround is what a video sits best against.
   Fill and text are all variables. */
#account-management .directory-video {
	/* This band alone overrides the shared light fill — the variable is declared
	   on each band precisely so one can be re-coloured on its own. All three go
	   together: the fill and the two text colours that have to stay legible on
	   it. Override in css/custom-account-management.css to re-brand (the draft's
	   treatment is #8a1a5b / #ffffff / #ffffff). */
	--directory-band-background: #313131;
	--directory-video-heading: #FFFFFF;
	--directory-video-text: #D9D9D9;
}

/* The inner carries .directory-offset as well, which is what measures and
   centres it — so the title, the paragraph and the player's left edge all start
   on the same line as every other band's content. Ranged left explicitly rather
   than by default, because the bands either side centre their headings. */
#account-management .directory-video__inner { text-align: left; }
#account-management .directory-video__title { margin: 0 0 10px; font-size: 1.15em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--directory-video-heading); }
#account-management .directory-video__summary { margin: 0 0 25px; font-size: 0.95em; line-height: 1.6; color: var(--directory-video-text); }

/* 16:9 box the iframe fills. An iframe has no intrinsic size, so without a
   sized box it collapses to the browser's default 300x150. */
#account-management .directory-video__frame { position: relative; width: 100%; padding-top: 56.25%; background: #000; overflow: hidden; }
#account-management .directory-video__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }