/**
 * Styling for the Policy Manager user pages
 *
 * @author Kevin Ashbridge <kevin@gwythan.com>
 * @copyright 2010-2013 by Kevin Ashbridge. 2014-2017 by Gwythan Ltd. All rights reserved.
 * @package PolicyManager Framework
 * @since 1.0
 * @version 4.0
 */

img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */

.ie6 img {
	width: 100%;
}

/* @group Class styles */

.embargoedItem {
	background-color: var(--pv-warning, #fbbc04) !important;
}

.offlineItem {
	background-color: #ffc0cb !important;
}

.inlineForm {
	display: inline-block;
	width: auto;
}

/* @end */

/* @group Positioning elements */

#divPageWrapper {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1132px;
}

body > header, body > main, body > footer {
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	width: 96%;
}

/* @end */

/* @group HTML selectors */

a {
	text-decoration: underline;
}

/*
 * V4 floated every <article>/<aside> left at 100% width for its own layout.
 * This rule is global (policy-page.css loads on every surface, including the
 * admin and management consoles) and a floated block never contributes to
 * its parent's auto height, so any container that wraps only a floated
 * article/aside collapses to zero height around it — invisibly, since the
 * DOM and accessibility tree are unaffected; only computed geometry shows
 * it. See issue #323. The V5 sheets lay out with flex and grid, which both
 * ignore float on their children, so this no longer needs to float:
 * body > main > article/aside below already reasserts float:none for every
 * direct-main-child surface, .siteLicence (site-dashboard.css) does the same
 * for the site licence card, and the admin/management console panels
 * (.actionArea, .actionAreaTop — policy-admin.css / policy-management.css)
 * were relying on inheriting float:left from here with no override at all.
 */
article, aside {
	background-color: #fff;
	width: 100%;
}

article {
	margin-top: 1%;
}

body {
	font-family: Verdana,sans-serif;
	font-size: 105%;
	color: #444;
	background-color: #fff;
}

button {
	color: #333;
}

fieldset {
	
}

body > footer {
	color: #636463;
	background-color: #fff;
	margin-top: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	font-size: .8em;
	text-align: center;
}

form {
	
}

h1, h2, h3, h4, h5, h6 {
	color: #333;
	display: inline-block;
	margin: .5em 0;
	width: auto;
}

h1 {
	font-size: 1.75em;
	margin-top: 0;
}

h2 {
	font-size: 1.45em;
	margin-top: 0;
}

h2, h3, h4 {
	
}

h5, h6 {
	margin: .5em 0;
}

fieldset {
	
}

body > header {
	position: relative;
	background-color: #fff;
	padding-top: 2%;
}

input[type='text'], input[type='email'] {
	max-width: 96%;
}

Label {
	text-transform: ;
}

legend {
	padding: .5em 1em;
}

body > main {
	background-color: #fff;
	margin-top: 2%;
	padding: 2%;
	width: 96%;
}

nav {
	
}

nav > ul {
	margin: 0;
	padding: 0;
}

nav a {
	font-size: 1.1em;
	font-weight: 400;
	color: #636463;
	text-decoration: none;
}

ol {
	margin-bottom: 1em;
}

p {
	margin-bottom: 1em;
}

pre {
	font-size: 0.9em;
}

table {
	border: 1px solid #ccc;
	border-collapse: collapse;
}

td {
	padding: .2em .5em;
}

/*
 * ⛔⛔ #2158. THE FILL THAT USED TO BE HERE IS GONE, AND IT IS NOT COMING BACK
 * TO THIS SELECTOR.
 *
 * `th { background-color: #ccc !important }` was a V4-era element rule, and
 * this sheet is served on EVERY page (page-template.html:26) — the staff
 * viewer, the admin console and the management console alike. So one
 * declaration written for a policy document's own tables painted a mid-grey
 * slab onto every table header in the estate: column headings, detail-record
 * row labels and section bands together. The owner named it three separate
 * times ("overbearing and completely out of keeping with the design language
 * of the rest of the site"), and each time it was fought where it SHOWED
 * rather than where it lived — a counter-`!important` on the staff TOC
 * (`:2278`), another on the historical-compliance listing
 * (`policy-admin.css:8642`), and the console's own `--pv-surface` rule simply
 * losing to the `!important`.
 *
 * ⭐ The fill is a decision about ONE surface — prose a school wrote — so it
 * now names that surface (`#divEditableContent th`, below). What stays here is
 * only typography, which mirrors, inherits and does not shout.
 *
 * ⛔ Do not reinstate a fill on a bare `th`.
 * tests/unit/architecture/NoUnscopedTableHeaderFillTest.php refuses one.
 */
th {
	padding: .2em .5em;
	color: #000;
	font-weight: 700;
}

thead {
	border: 1px solid #ccc !important;
}

ul {
	margin-bottom: 1em;
	list-style: none;
}

/* @end */

/* @group General Selectors */

#asideInformation {
	padding: 0;
}

/* Site-wide banners: calm provenance-tagged strips. The tag names the
   source (school for --local, platform for --management); colour never
   carries the meaning alone. Management stacks above local; the crimson
   --security variant is reserved for genuine incidents. */
.siteWideBanner,
#divSiteWideBanner,
#divManagementSiteWideBanner {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	margin: 0 0 14px;
	padding: 10px 18px;
	color: var(--pv-info-ink);
	background: var(--pv-info-tint);
	border: 1px solid #C6E2F2;
	border-radius: var(--pv-radius-control);
	font-size: 0.93rem;
	font-weight: 500;
	line-height: 1.45;
	text-align: start;
	overflow-wrap: anywhere;
}

.siteWideBannerTag {
	flex: none;
	align-self: baseline;
	padding: 2px 9px;
	border-radius: var(--pv-radius-pill);
	background: rgba(255, 255, 255, 0.7);
	color: var(--pv-info-ink);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.siteWideBannerContent {
	min-width: 0;
}

.siteWideBannerContent > :first-child {
	margin-top: 0;
}

.siteWideBannerContent > :last-child {
	margin-bottom: 0;
}

.siteWideBanner a,
#divSiteWideBanner a,
#divManagementSiteWideBanner a {
	color: inherit;
	font-weight: 650;
	text-decoration-thickness: 2px;
}

.siteWideBanner--management,
#divManagementSiteWideBanner {
	color: #D7E4EF;
	background: #16283A;
	border-color: #0F1D2B;
}

.siteWideBanner--management .siteWideBannerTag {
	background: #2B4258;
	color: #8FC1E4;
}

.siteWideBanner--management a,
#divManagementSiteWideBanner a {
	color: #ffffff;
}

.siteWideBanner--security,
#divSecurityRestrictionBanner {
	color: var(--pv-danger);
	background: var(--pv-danger-tint);
	border-color: #F0C9D4;
	font-weight: 600;
}

.siteWideBanner--security .siteWideBannerTag {
	color: var(--pv-danger);
}

/*
 * #2057 condition banners: a bold lead, a regular body and one action, as
 * drawn in the deck "The estate when it cannot run", tab 1. They keep the
 * security colours but not its all-bold weight, which suits a one-sentence
 * message and would flatten the lead into the body here.
 */
.siteWideBanner--condition {
	font-weight: 500;
}

.siteWideBanner--condition .siteWideBannerLead {
	font-weight: 650;
}

/* #2058: the amber condition banner (deck tab 2, `.pv-banner.amber`). */
.siteWideBanner--amber {
	color: var(--pv-warn-ink);
	background: var(--pv-warn-tint);
	border-color: #EAD9B4;
}

.siteWideBanner--amber .siteWideBannerTag {
	color: var(--pv-warn-ink);
}

/* #2301: the informational condition card (weekend, holiday) reuses the feedback info palette. */
.siteWideBanner--info {
	color: var(--pv-feedback-info-color);
	background: var(--pv-feedback-info-bg);
	border-color: var(--pv-feedback-info-border);
}

.siteWideBanner--info .siteWideBannerTag {
	color: var(--pv-feedback-info-color);
}

/* Flash messages: quiet status strips in the feedback palette. */
p.flashMessage {
	margin: 0 0 14px;
	padding: 10px 16px;
	border: 1px solid var(--pv-feedback-info-border);
	border-radius: var(--pv-radius-control);
	color: var(--pv-feedback-info-color);
	background: var(--pv-feedback-info-bg);
	font-size: 0.93rem;
	font-weight: 550;
	line-height: 1.45;
}

p.flashMessage.successMessage {
	color: var(--pv-feedback-success-color);
	background: var(--pv-feedback-success-bg);
	border-color: var(--pv-feedback-success-border);
}

p.flashMessage.errorMessage {
	color: var(--pv-feedback-error-color);
	background: var(--pv-feedback-error-bg);
	border-color: var(--pv-feedback-error-border);
}

form#cmsAddMenuItemPanel {
	background-color: #eee;
	padding: 2%;
}

#divAdminSession,
#divPageLive,
#divPageNotLive {
	padding: 6px 12px;
	text-align: center;
	font-family: Arial,sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
}

#divAdminSession {
	color: #fff;
	background-color: var(--pv-admin-strip);
	padding: 12px 12px;
}

#tableAccessKeys td {
	padding: .2em .5em;
}

#divNoScript {
	color: #FF0;
	background-color: var(--pv-red);
	font-size: 1.2em;
	text-align: center;
}

#divPageLive {
	color: #FFF;
	background-color: #4285f4;
}

#divPageLive a:link, #divPageLive a:visited {
	color: #FFF;
	text-decoration: underline;
}

#divPageNotLive {
	color: #FFF;
	background-color: var(--pv-red);
}

#divPageNotLive a:link, #divPageNotLive a:visited {
	color: #FFF;
	text-decoration: underline;
}

#macssEUCookieMsgBox {
	display: block;
	font-family: sans-serif;
	background-color: #ffcf64;
	padding: 20px;
	border: 1px solid #333;
	text-align: center;
}

#macssEUCookieAcceptanceSymbol {
	color: #2cef50;
	font-weight: bold;
	margin-right: 3px;
	cursor: pointer;
}

#formPolicyOptions, #formPolicyUpload {
	background-color: #ddd;
	padding: 1%;
	margin-bottom: 2%;
	width: 98%;
}

#formPolicyOptions > div, #formPolicyUpload > div {
	margin: 0.5em 0;
}

#completionForm {
	margin-top: 2%;
}

#completionCheck {
	margin-right: 0.2em;
}


.inputCaptionText {
	border: 1px solid #999;
	padding: 1px;
	font-size: .9em;
	width: 115px;
}

/* ⛔ `display: none` does not hide something from sight, it removes it from the
   page altogether -- the accessibility tree included. The class exists to carry
   text that ONLY a screen reader should get, so that definition guaranteed the
   opposite of its purpose. The admin sheet carried the identical bug and the
   management sheet never did; this brings the third sheet into line.

   ⚠️ Today no staff template uses this class, and the pages that do use it also
   load policy-admin.css, which is appended after this sheet and already wins.
   So this changes nothing on screen right now. It is fixed anyway, because the
   next person to add a hidden label or a skip link to a staff page would
   otherwise inherit a class that silently deletes it. */
.displaytextonly {
	position: absolute;
	inset-inline-start: -9999px;
	inset-block-start: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.displaytextonly:focus-within {
	inset-inline-start: 12px;
	inset-block-start: 12px;
	z-index: 50;
	width: auto;
	height: auto;
	padding: 8px 12px;
	background: var(--pv-surface);
	border-radius: var(--pv-radius-control);
	box-shadow: var(--pv-shadow-lift);
}

.nowrap {
	white-space: nowrap;
}

.redText {
	color: var(--pv-feedback-error-color);
}

.yellowText {
	color: #FF0;
}

.orangeText {
	color: #F9B700;
	background-color: transparent;
}

/* @end */

/* @group FontAwesome icon selectors */

a.iconLink, .icon {
	color: #333;
}

a.iconLink {
	text-decoration: none;
}

.icon {
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* @end */

/* @group Header selectors */

#divAdminPageControls {
	display: none;
}

.manualpage h1, #divPolicyDocumentTitle {
	font-size: 2em;
	font-weight: 700;
}

.manualpage h1 {
	font-size: 1.5em;
}

/* @end */

/* @group Header Nav */

header nav>ul {
	background-color: #eee;
}

header nav>ul>li {
	vertical-align: top;
}

header nav>ul>li ul {
	display: none;
}

header nav>ul li:hover>ul {
	display: block;
}

header nav input#inputResponsiveCSSNavControl {
	display: none;
}

header nav label.labelResponsiveCSSNavToggle {
	border: 10px solid #000;
	cursor: pointer;
	display: block;
	position: absolute;
	right: 2px;
	top: 2px;
	font-family: sans-serif;
	color: #fff;
	background: none;
	background-color: #000;
	font-size: 10px;
	line-height: 28px;
	text-align: center;
	width: 28px;
	height: 28px;
}

header nav label.labelResponsiveCSSNavToggle::before {
	content: "MENU";
}

header nav input#inputResponsiveCSSNavControl ~ ul {
	display: none;
}

header nav input#inputResponsiveCSSNavControl:checked ~ ul {
	display: block;
}

header nav div.divResponsiveCSSNav>ul>li {
	display: block;
}

header nav li.hasSubmenu>a::after {
	cursor: pointer;
}

header nav ul.isSubmenu {
	color: inherit;
	margin-left: 4%;
}

header nav ul li.manualpage {
	margin: 2% 0;
	border-bottom: 1px dotted #777;
}

header nav a.activeMenuItem {
	font-weight: 700;
}

header nav a {
	color: #333;
}

header nav a:hover {
	text-decoration: underline;
}

header nav ul li.manualsection a {
	color: #0090c4;
}

header nav ul li.embargoedItem a {
	color: #c03;
}


/* @end */

/* @group main aside */

#asidePageNotes {
	background-color: #FFC;
	border: 1px outset #CCC;
	font-size: .85em;
}

#asidePageNotes h2 {
	color: #000;
	background-color: #FF9;
	text-align: left;
	width: 100%;
	font-size: 1em;
}

/* @end */

/* @group main nav */

main nav#navPolicyMenu>ul {
}

/* @end */

/* @group Footer */

ul#ulFooterMenu li {
	text-align: center;
	padding: .2em 0;
}

#divFooterCopyright, #divManufacturer {
	text-align: center;
}

#divManufacturer a, #divManufacturer a:link, #divManufacturer a:visited {
	color: #636463;
}

/* @end */

/* @group Login form */

form#formUserLoginForm div {
	margin: 0 1% 1%;
}

form#formUserLoginForm label, form#formUserLoginForm span.label {
	display: block;
	width: 100%;
}

/* @end */

/* @group Policies listing */

/* The policy register's V5 row-card treatment lives with the other V5
   rules near the end of this sheet. */

/* @end */

/* @group Policy root page */

main.policyIndexRoot {
	background-color: #f5f6f8;
	display: flex;
	flex-direction: column;
	gap: 1.4em;
	align-items: stretch;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu,
main.policyIndexRoot article#articlePolicyIndex {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
	float: none;
	margin: 0;
	overflow: hidden;
	width: 100%;
}

/*
 * ⛔ #1869. THE GROUND IS THE TOKEN, NOT A HEX. This rule carried a literal
 * `#2795c9` — a fourth blue, agreeing with neither the rail head's
 * `var(--pv-blue)` below nor `policy-admin.css`'s `--pv-admin-blue`, and
 * forbidden outright by `documentation/V5-UI-Design-Brief.md` §3: "Tokens live
 * in policy-tokens.css and are the only place colours … are defined. Consume
 * --pv-*; never hard-code a hex in a component sheet." White on #2795c9 also
 * measures 3.37:1 (WCAG 2.1 relative luminance), below the 4.5:1 AA floor for
 * the 700-weight text this rule sets; the action token measures 5.34:1.
 */
main.policyIndexRoot .policyPanelHeader {
	background-color: var(--pv-action);
	color: #fff;
	display: block;
	font-weight: 700;
	padding: .75em 1em;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu ul {
	margin: 0;
	padding: .75em 1em 1em;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu ul.isSubmenu {
	padding: 0;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li {
	border-bottom: 1px dotted #ddd;
	min-height: 1.6em;
	padding: .55em 0;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li:last-child {
	border-bottom: none;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection {
	background-color: #f5f6f8;
	border-bottom: 1px solid #eee;
	font-weight: 700;
	margin-top: .35em;
	padding: .75em .8em;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection:first-child {
	margin-top: 0;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection > a {
	color: #0090c4;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection > ul {
	background-color: #fff;
	font-weight: 400;
	margin: .55em -.8em -.75em;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection > ul > li {
	padding-inline-start: .8em;
	padding-inline-end: .8em;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu a {
	color: #333;
	display: block;
	font-size: 1em;
	text-decoration: none;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu a:hover {
	text-decoration: underline;
}

main.policyIndexRoot article#articlePolicyIndex #textbox2 {
	min-height: 18em;
	padding: 1.5em;
}

main.policyIndexRoot article#articlePolicyIndex p {
	line-height: 1.55;
}

/* @end */

/* @group YouTube video embed */

.videoContainer {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.videoContainer iframe, .videoContainer object, .videoContainer embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* @end */

/* @group PDF Viewer */

embed#pdfViewer {
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	background-color: #eee;
	overflow: scroll;
	width: 100%;
	margin-bottom: 1em;
	height: 1024px;
}

a#aMobilePDFLauncher {
	display: block;
	width: 80%;
	text-align: center;
	margin: 2% auto;
	padding: 2%;
	border: 2px outset #777;
	border-radius: 10px;
	text-decoration: none;
	color: #fff;
	background-color: #333;
}

/* @end */

/* @group Rapid Docs formatting */

.RapidocsNumbered2 {
	margin-left: 2%;
}

.RapidocsNumbered3 {
	margin-left: 4%;
}

.RapidocsNumbered4 {
	margin-left: 6%;
}

/* @end */

/* @group Agreement Page */

#divAgreementTextBox {
	border: 1px solid #333;
	width: 98%;
	padding: 1%;
	overflow: scroll;
	height: 45vh;
}

#formAgreement div {
	margin: 1% 0;
}

#formAgreement {
	margin-top: 1%;
}

button#agreementButtonAgree, button#agreementButtonDisagree {
	margin: 0 1%;
}

#formAgreement input[type="radio"] {
	margin: 0 5px 0 0;
}

#formAgreement label.radio {
	margin-right: 1%;
}

/* @end */

#divPageNotes p {
	margin-bottom: .2em;
}

/***********************************************************************/
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
/***********************************************************************/

@media only screen and (min-width: 480px) {
	body {
		font-size: 100%;
	}
}

/*****************************************************************************************************/
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
/*****************************************************************************************************/

@media only screen and (min-width: 768px) {
	article {
		
	}
	
	h1 {
		font-size: 2em;
	}
	
	h2 {
		font-size: 2em;
	}
	
	#divAdminPageControls {
		display: block;
		width: 100%;
	}
	
	#divHeaderContent {
		float: left;
		width: 100%;
	}
	
	/* @group Responsive CSS Nav */
	
	header nav label.labelResponsiveCSSNavToggle {
		display: none;
	}
	
	input#inputResponsiveCSSNavControl ~ ul {
		display: block !important;
	}
	
	header nav {
		background-color: #eee;
		float: left;
		width: 100%;
		margin-top: 2%;
	}
	
	header nav>ul {
		position: static;
		top: 0;
		background-color: transparent;
	}
	
	header nav ul {
		display: block;
		text-align: right;
	}
	
	header nav div.divResponsiveCSSNav>ul>li {
		display: inline-block;
		margin-right: 5%;
		width: auto;
	}
	
	header nav li a.activeMenuItem {
		font-weight: 700;
	}
	
	header nav ul li ul, header nav ul li ul.active {
		display: none;
	}
	
	header nav ul li {
		display: inline-block;
		background: none;
		font-size: .8em;
		padding-top: 1.3em;
		padding-bottom: 1.3em;
		margin-right: 3%;
	}
	
	/* @end */
	
	/* @group main nav */
	
	main nav#navPolicyMenu {
		display: block;
		float: left;
		max-width: 400px;
		width: 24%;
		color: #333;
		background-color: #fff;
	}
	
	main nav#navPolicyMenu>ul {
		display: block;
	}
	
	main nav#navPolicyMenu ul {
		width: 100%;
		margin: 2% 0;
	}
	
	main nav#navPolicyMenu ul li {
		min-height: 1.5em;
		padding: 0.2em 0.4em;
	}
	
	main nav#navPolicyMenu ul li.sortablePlaceholder {
		display: block;
		height: 1.5em;
		line-height: 1.2em;
		background-color: #ff0;
		width: 100%;
	}
	
	main nav#navPolicyMenu ul li.manualpage {
		border-bottom: 1px dotted #777;
	}
	
	main nav#navPolicyMenu a.activeMenuItem {
		font-weight: 700;
	}
	
	main nav#navPolicyMenu a {
		color: #333;
	}
	
	main nav#navPolicyMenu a:hover {
		text-decoration: underline;
	}
	
	main nav#navPolicyMenu ul li.manualsection a {
		color: #0090c4;
	}
	
	main nav#navPolicyMenu ul li.embargoedItem a {
		color: #c03;
	}
	
	/* @end */
	
	/* @group main aside */
	
	#asideInformation {
		float: left;
		width: 44%;
	}
	
	#asidePageNotes {
		float: right;
		width: 44%;
	}
	
	/* @end */
	
	/* @group main section */
	
	.manualsection main section, .manualpage main section, .manualroot main section {
		float: right;
		max-width: 836px;
		width: 75%;
	}

	main.policyIndexRoot {
		align-items: flex-start;
		flex-direction: row;
		justify-content: center;
	}

	main.policyIndexRoot nav#navPolicyMenu {
		flex: 0 0 18em;
		max-width: 18em;
	}

	main.policyIndexRoot article#articlePolicyIndex {
		flex: 1 1 34em;
		max-width: 58em;
	}
	
	/* @end */
	
	/* @group Footer */

	/* #1945: the legacy `!important` rule that shrank the whole footer to 80%
	   (beating `body > footer { font-size: 13px }` below) is removed here — the
	   flex footer sets its own size directly and an explicit
	   `body > footer nav a` rule now pins the links, so nothing needs it. */

	body > footer nav {
		float: left;
		width: 60%;
		margin-left: 5%;
	}
	
	body > footer nav ul {
		text-align: right;
		width: 100%;
	}
	
	body > footer nav li {
		display: inline-block;
		margin-right: 5%;
		width: auto;
	}
	
	body > footer nav ul li {
		padding: 0;
		margin-right: 3%;
	}
	
	body > footer #divFooterCopyright {
		float: right;
		padding-right: 10px;
		margin-right: 5%;
		text-align: right;
		width: 25%;
	}
	
	body > footer #divManufacturer {
		float: left;
		margin: 10px 0;
		line-height: 1.2em;
		text-align: center;
		width: 100%;
	}
	
	/* @end */
	
	/* @group Policies listing */
	
	.listingReadStatus {
		white-space: nowrap;
	}
	
	/* @end */
	
	.manualtoc article {
		margin-top: 2%;
	}
}

@media only screen and (min-width: 950px) {
	#asideInformation {
		float: left;
		width: 44%;
	}
	
	#asidePageNotes {
		float: right;
		width: 44%;
	}
	
	#asideInformation {
		float: left;
		width: 44%;
	}
}

@media only screen and (min-width: 1025px) {
	header nav ul li {
		margin-right: 3.5%;
	}
}

/* @end */

/* ==========================================================================
   V5 public shell: V4-familiar recreation
   --------------------------------------------------------------------------
   The V4 reference on origin/master uses wrapper IDs that the V5 XHTML shell no
   longer emits. These rules recreate the same visual language against V5's
   current semantic elements instead of importing the V4 sheet.
   ========================================================================== */

/* Design tokens (colour, type, radius, elevation, motion) live in
   policy-tokens.css, loaded before this sheet from page-template.html.
   This sheet consumes them; it must not redeclare them. */

html {
	background-color: var(--pv-page-bg);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--pv-text);
	background-color: var(--pv-page-bg);
	font-family: var(--pv-font-ui);
	font-size: 15px;
	line-height: 1.5;
}

/* Focus is always visible, everywhere, in the brand azure. */
body :focus-visible {
	outline: var(--pv-focus-ring);
	outline-offset: var(--pv-focus-offset);
	border-radius: 4px;
}

body > header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	float: none;
	width: 100%;
	padding: 16px max(24px, calc((100vw - var(--pv-content-max)) / 2 + 24px)) 0;
	background-color: #ffffff;
	border-bottom: 1px solid var(--pv-border);
}

body > header > a {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	text-decoration: none;
}

/* V5 header identity: initials crest + organisation name; no logo images. */
body > header > a#aSiteIdentity {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--pv-ink);
	font-size: 1.04em;
	font-weight: 650;
	letter-spacing: -0.01em;
	text-decoration: none;
}

body > header #spanSiteCrest {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: linear-gradient(135deg, #25455E, #3A6B8C);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
}

body > header #spanSiteCrest:empty {
	display: none;
}

body > .siteWideBanner,
body > #divSiteWideBanner,
body > #divManagementSiteWideBanner {
	width: auto;
	margin-top: 18px;
	margin-inline-end: max(16px, calc((100vw - var(--pv-content-max)) / 2 + 16px));
	margin-inline-start: max(16px, calc((100vw - var(--pv-content-max)) / 2 + 16px));
}

body > header > nav {
	flex: 0 0 auto;
	width: 100vw;
	margin-top: 14px;
	margin-inline-end: calc(50% - 50vw);
	margin-inline-start: calc(50% - 50vw);
	background-color: #ffffff;
	border-top: 1px solid var(--pv-border);
}

/* The menu row: links centred in the band, the account chip at its end. */
body > header > nav .siteNavBar {
	display: flex;
	align-items: stretch;
	gap: 16px;
	max-width: var(--pv-content-max);
	margin: 0 auto;
	padding-inline: 24px;
}

body > header > nav ul {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The account chip replaces the old "My Account" menu item: the signed-in
   person's initials and name, linking to their account. */
body > header > nav a.siteUserChip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 9px;
	min-height: 52px;
	border-block-end: 2.5px solid transparent;
	color: var(--pv-ink-2);
	font-weight: 550;
	font-size: 0.96em;
	text-decoration: none;
	transition: color var(--pv-dur) var(--pv-ease);
}

body > header > nav a.siteUserChip:hover,
body > header > nav a.siteUserChip:focus {
	color: var(--pv-ink);
	text-decoration: none;
}

body > header > nav a.siteUserChip .siteUserInitials {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--pv-action-tint);
	color: var(--pv-action);
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0;
	transition: background-color var(--pv-dur) var(--pv-ease), color var(--pv-dur) var(--pv-ease);
}

body > header > nav a.siteUserChip:hover .siteUserInitials,
body > header > nav a.siteUserChip:focus .siteUserInitials {
	background-color: var(--pv-action);
	color: #ffffff;
}

body > header > nav a.siteUserChip.activeMenuItem,
body > header > nav a.siteUserChip[aria-current="page"] {
	color: var(--pv-action);
	border-block-end-color: var(--pv-azure);
	font-weight: 650;
}

body > header > nav a.siteUserChip[aria-current="page"] .siteUserInitials {
	background-color: var(--pv-action);
	color: #ffffff;
}

/* #1923. The ≤560px collapse control: hidden above that width, where the
   list and the account chip show unconditionally regardless of :checked. */
body > header > nav .siteNavToggleCheckbox,
body > header > nav .siteNavToggleButton {
	display: none;
}

body > header > nav li {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 1em;
}

body > header > nav a {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 16px;
	color: var(--pv-ink-2);
	border-bottom: 2.5px solid transparent;
	font-weight: 550;
	font-size: 0.96em;
	text-decoration: none;
	transition: color var(--pv-dur) var(--pv-ease), border-color var(--pv-dur) var(--pv-ease);
}

body > header > nav a:hover,
body > header > nav a:focus {
	color: var(--pv-ink);
	text-decoration: none;
}

body > header > nav a.activeMenuItem,
body > header > nav a[aria-current="page"] {
	color: var(--pv-action);
	border-bottom-color: var(--pv-azure);
	font-weight: 650;
}

body > main {
	display: grid;
	grid-template-columns: var(--pv-policy-nav-width) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	float: none;
	width: 100%;
	max-width: var(--pv-content-max);
	margin: 0 auto;
	padding: 20px 24px 54px;
	background-color: var(--pv-page-bg);
}

body > main:not(:has(> nav#navPolicyMenu)) {
	display: block;
}

body > main > nav#navPolicyMenu {
	grid-column: 1;
	grid-row: 1 / span 8;
	width: var(--pv-policy-nav-width);
	max-width: none;
	margin: 0;
	padding: 16px;
	overflow: hidden;
	color: var(--pv-text);
	background-color: var(--pv-panel-bg);
	border: 1px solid var(--pv-border);
	border-radius: 8px;
	box-shadow: var(--pv-shadow);
}

body > main > nav#navPolicyMenu ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

body > main > nav#navPolicyMenu ul.isSubmenu {
	margin: 6px 0 0;
	padding: 0;
}

body > main > nav#navPolicyMenu li {
	min-height: 0;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #e8eaed;
}

body > main > nav#navPolicyMenu li:last-child {
	border-bottom: none;
}

body > main > nav#navPolicyMenu li.manualsection {
	padding-top: 8px;
	border-bottom: none;
}

body > main > nav#navPolicyMenu a {
	display: flex;
	align-items: flex-start;
	gap: 0;
	padding: 10px 14px;
	color: var(--pv-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.42;
	text-decoration: none;
}

body > main > nav#navPolicyMenu a:hover,
body > main > nav#navPolicyMenu a:focus {
	color: var(--pv-blue);
	background-color: #f8f9fa;
	text-decoration: none;
}

body > main > nav#navPolicyMenu li.manualsection > a {
	color: var(--pv-blue);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 500;
	background-color: #f8f9fa;
}

body > main > nav#navPolicyMenu li.embargoedItem > a {
	color: #8f1d3f;
	background-color: #f7d2d8;
}

body > main > nav#navPolicyMenu li.embargoedItem > a:hover,
body > main > nav#navPolicyMenu li.embargoedItem > a:focus {
	color: #8f1d3f;
	background-color: #f1c4cd;
}


#tableManualTOCListing tr.embargoedItem > th,
#tableManualTOCListing tr.embargoedItem > td {
	background-color: #f7d2d8;
}

#tableManualTOCListing tr.embargoedItem a {
	color: #8f1d3f;
}


.policyCompliancePendingIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-inline-start: 6px;
	color: #6f4a00;
	background-color: #fff3c4;
	border: 1px solid #d9a80f;
	border-radius: 50%;
	font-size: 0.82rem;
	line-height: 1;
	vertical-align: middle;
}

.policyCompliancePendingIcon i {
	color: inherit;
	font-size: 0.86em;
	line-height: 1;
}

body > main > nav#navPolicyMenu .policyPanelHeader {
	display: block;
	margin: -16px -16px 12px;
	padding: 13px 16px;
	color: #ffffff;
	background-color: var(--pv-blue);
	font-weight: 700;
}

body > main > h1,
body > main > aside,
body > main > article {
	grid-column: 2;
	min-width: 0;
}

body > main > h1 {
	margin: 0;
	color: var(--pv-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

body > main > aside,
body > main > article,
:is(main.policyIndexRoot, main.policyDocumentRoot) > nav#navPolicyMenu,
main.policyIndexRoot > article#articlePolicyIndex {
	color: var(--pv-text);
	background-color: var(--pv-panel-bg);
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius);
	box-shadow: var(--pv-shadow);
}

body > main > aside,
body > main > article {
	width: 100%;
	margin: 0;
	padding: 28px;
	float: none;
	font-size: 1em;
}

body > main > article {
	min-height: 260px;
}

/*
	#1945: the register's rows sit on the page ground in the deck, not inside
	a second card below the intro aside (which stays a card — the owner
	ruled to keep it). One ID selector beats the shared `body > main > article`
	card rule above regardless of source order, so this is the one place that
	decides the listing article's look; the table and its rows keep their own
	styling untouched.
*/
main > article#articleTocListing {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	min-height: 0;
}

/*
	Kevin, 3 Nov 2026 (/toc): "There needs to be more top padding applied between text box 1
	and text box 2." The bulletin card ended flush against the register's heading below it
	on wide screens; the mobile rule already gave it this gap. 18px is the gap every other
	panel on this page leaves (the status band, the narrow-screen card), so no new value.
*/
body > main > aside:has(+ article#articleTocListing) {
	margin-bottom: 18px;
}

body > main > aside h2,
body > main > article h2 {
	display: block;
	width: auto;
	margin: 0 0 14px;
	color: var(--pv-blue);
	font-size: 1.5em;
	font-weight: 400;
}

body > main > aside:has(> .editor),
body > main > article:has(> .editor) {
	padding: 0;
	overflow: hidden;
}

body > main > aside:has(> .editor) > h2 {
	margin: 24px 28px 0;
}

body > main > aside:has(> .editor) > .editor,
body > main > article:has(> .editor) > .editor {
	min-height: 72px;
	padding: 20px 28px;
	outline: none;
}

body > main > article:has(> .editor) > table,
body > main > article:has(> .editor) > #tableManualTOCListing {
	width: calc(100% - 56px);
	margin: 0 28px 28px;
}

body > main > aside > [data-content-container],
body > main > article > [data-content-container],
main.policyIndexRoot article#articlePolicyIndex [data-content-container],
article#articlePolicyDocument > #divEditableContent {
	line-height: 1.45;
}

/*
 * ⭐⭐ #2158. THE ONE SURFACE THE V4 GREY BELONGED TO, NOW NAMING ITSELF.
 *
 * `[data-content-container]` is every place a school's OWN HTML is injected
 * verbatim (`policy/main.xsl:539-545`, `:599-603`, and the aside and index
 * containers). A `<th>` in there was written by a school, years ago, inside a
 * policy whose rendering V4 fixed — so it keeps the fill it has always had.
 * That is the whole of the staff-side dependency on the retired global rule:
 * the TOC's section bands and the account snapshot set their own fills or
 * their own transparency, and no other staff `<th>` sits outside a `<thead>`.
 *
 * ⚠️ This population cannot be counted from the repository — it lives in
 * migrated policy bodies, not in a template — which is precisely why it is
 * preserved rather than tidied away. No `!important`: nothing competes here.
 */
[data-content-container] th {
	background-color: #ccc;
}

[data-content-container] thead th {
	background-color: transparent;
}

body > main > aside > [data-content-container] > :first-child,
body > main > article > [data-content-container] > :first-child,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] > :first-child,
article#articlePolicyDocument > #divEditableContent > :first-child {
	margin-top: 0;
}

body > main > aside > [data-content-container] > :last-child,
body > main > article > [data-content-container] > :last-child,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] > :last-child,
article#articlePolicyDocument > #divEditableContent > :last-child {
	margin-bottom: 0;
}

body > main > aside > [data-content-container] h1,
body > main > aside > [data-content-container] h2,
body > main > aside > [data-content-container] h3,
body > main > aside > [data-content-container] h4,
body > main > aside > [data-content-container] h5,
body > main > aside > [data-content-container] h6,
body > main > article > [data-content-container] h1,
body > main > article > [data-content-container] h2,
body > main > article > [data-content-container] h3,
body > main > article > [data-content-container] h4,
body > main > article > [data-content-container] h5,
body > main > article > [data-content-container] h6,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h1,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h2,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h3,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h4,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h5,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h6,
article#articlePolicyDocument > #divEditableContent h1,
article#articlePolicyDocument > #divEditableContent h2,
article#articlePolicyDocument > #divEditableContent h3,
article#articlePolicyDocument > #divEditableContent h4,
article#articlePolicyDocument > #divEditableContent h5,
article#articlePolicyDocument > #divEditableContent h6 {
	display: block;
	width: auto;
	margin: 0 0 0.45em;
	color: var(--pv-blue);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.01em;
}

body > main > aside > [data-content-container] h1,
body > main > article > [data-content-container] h1,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h1,
article#articlePolicyDocument > #divEditableContent h1 {
	font-size: 2.25em;
}

body > main > aside > [data-content-container] h2,
body > main > article > [data-content-container] h2,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h2,
article#articlePolicyDocument > #divEditableContent h2 {
	font-size: 1.8em;
}

body > main > aside > [data-content-container] h3,
body > main > article > [data-content-container] h3,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h3,
article#articlePolicyDocument > #divEditableContent h3 {
	font-size: 1.45em;
}

body > main > aside > [data-content-container] h4,
body > main > article > [data-content-container] h4,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h4,
article#articlePolicyDocument > #divEditableContent h4 {
	font-size: 1.2em;
}

body > main > aside > [data-content-container] h5,
body > main > article > [data-content-container] h5,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h5,
article#articlePolicyDocument > #divEditableContent h5 {
	font-size: 1.05em;
}

body > main > aside > [data-content-container] h6,
body > main > article > [data-content-container] h6,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] h6,
article#articlePolicyDocument > #divEditableContent h6 {
	font-size: 1em;
}

body > main > aside > [data-content-container] p,
body > main > aside > [data-content-container] ul,
body > main > aside > [data-content-container] ol,
body > main > article > [data-content-container] p,
body > main > article > [data-content-container] ul,
body > main > article > [data-content-container] ol,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] p,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] ul,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] ol,
article#articlePolicyDocument > #divEditableContent p,
article#articlePolicyDocument > #divEditableContent ul,
article#articlePolicyDocument > #divEditableContent ol {
	margin: 0 0 0.85em;
	line-height: 1.45;
}

body > main > aside > [data-content-container] ul,
body > main > aside > [data-content-container] ol,
body > main > article > [data-content-container] ul,
body > main > article > [data-content-container] ol,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] ul,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] ol,
article#articlePolicyDocument > #divEditableContent ul,
article#articlePolicyDocument > #divEditableContent ol {
	padding-inline-start: 1.35em;
}

/*
 * The markers themselves (5.0.16; Kevin, 7 Nov 2026, from production 5.0.15 on /newUser: a bulleted list showed only
 * indented lines). The rules above indent authored lists but never gave them a marker, and the bare `ul` reset at the
 * top of this sheet takes the browser's away. Every authored text box is a `[data-content-container]`; the site banner
 * is `.siteWideBanner`. tests/e2e/inline-edit-text-bar-5016.spec.ts measures the rendered markers on each page.
 */
.siteWideBanner ul,
.siteWideBanner ol {
	margin-block: 0 0.85em;
	padding-inline-start: 1.35em;
}

[data-content-container] ul,
.siteWideBanner ul {
	list-style: disc;
}

[data-content-container] ul ul,
.siteWideBanner ul ul {
	list-style: circle;
}

[data-content-container] ul ul ul,
.siteWideBanner ul ul ul {
	list-style: square;
}

[data-content-container] ol,
.siteWideBanner ol {
	list-style: decimal;
}

[data-content-container] ol ol,
.siteWideBanner ol ol {
	list-style: lower-alpha;
}

[data-content-container] ol ol ol,
.siteWideBanner ol ol ol {
	list-style: lower-roman;
}

body > main > aside > [data-content-container] li,
body > main > article > [data-content-container] li,
main.policyIndexRoot article#articlePolicyIndex [data-content-container] li,
article#articlePolicyDocument > #divEditableContent li {
	margin: 0.2em 0;
}

main.policyIndexRoot {
	display: grid;
	grid-template-columns: var(--pv-policy-nav-width) minmax(0, 1fr);
	align-items: start;
	gap: 24px;
	background-color: var(--pv-page-bg);
}

:is(main.policyIndexRoot, main.policyDocumentRoot) > nav#navPolicyMenu,
main.policyIndexRoot > article#articlePolicyIndex {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: none;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) > nav#navPolicyMenu {
	grid-column: 1;
}

main.policyIndexRoot > article#articlePolicyIndex {
	grid-column: 2;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) > nav#navPolicyMenu .policyPanelHeader {
	margin: 0;
	padding: 13px 16px;
	color: #ffffff;
	background-color: var(--pv-blue);
	font-weight: 700;
}

main.policyIndexRoot article#articlePolicyIndex #textbox2 {
	min-height: 420px;
	padding: 20px 30px;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu > ul {
	margin: 0;
	padding: 18px 20px;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu ul.isSubmenu {
	margin: 0;
	padding: 0;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li {
	border-bottom: 1px solid #e8eaed;
	padding: 0;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection {
	margin: 6px 0 0;
	padding: 0;
	background-color: #f8f9fa;
	border-bottom: 0;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection:first-child {
	margin-top: 0;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu a {
	padding: 10px 14px;
	font-size: 1em;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection > a {
	padding: 14px;
	color: var(--pv-blue);
	background-color: #f8f9fa;
	font-weight: 700;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection > ul.isSubmenu {
	background-color: #ffffff;
}

:is(main.policyIndexRoot, main.policyDocumentRoot) nav#navPolicyMenu li.manualsection > ul.isSubmenu > li > a {
	padding-inline-end: 14px;
	padding-inline-start: 14px;
}

article#articlePolicyDocument {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
	gap: 18px 24px;
}

body > main#mainLegalPage > article#articleLegalPage {
	display: block;
	min-height: 0;
}

body > main#mainLegalPage > article#articleLegalPage > header {
	margin: 0 0 22px;
	padding: 0;
	background: transparent;
}

body > main#mainLegalPage > article#articleLegalPage > header h1 {
	display: block;
	margin: 0;
	color: var(--pv-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.1em;
	font-weight: 700;
	line-height: 1.15;
}

body > main#mainLegalPage > article#articleLegalPage .legalPageContent {
	line-height: 1.5;
}

body > main#mainLegalPage > article#articleLegalPage .legalPageMetadata {
	display: block;
	margin: 26px 0 0;
	padding: 16px 0 0;
	color: var(--pv-muted);
	background: transparent;
	border-top: 1px solid var(--pv-border);
	font-size: 0.92em;
	text-align: start;
}

body > main#mainLegalPage > article#articleLegalPage .legalPageMetadata time {
	font-weight: 600;
}

article#articlePolicyDocument > .navBackToTOC,
article#articlePolicyDocument > header,
article#articlePolicyDocument > .policyReadMessage,
article#articlePolicyDocument > #divEditableContent {
	grid-column: 1;
}

article#articlePolicyDocument > #asideInformation {
	grid-column: 2;
	grid-row: 1 / span 3;
	width: 100%;
	margin: 0;
	padding: 18px;
	float: none;
	background-color: #ffffff;
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius);
	box-shadow: none;
}

article#articlePolicyDocument header {
	padding: 0;
	background: transparent;
	border: 0;
}

article#articlePolicyDocument h1 {
	margin: 0 0 12px;
	color: var(--pv-text);
	font-size: 2em;
	font-weight: 700;
}

.navBackToTOC a {
	color: var(--pv-blue);
	font-weight: 700;
	text-decoration: none;
}

.navBackToTOC a:hover {
	text-decoration: underline;
}

#asideInformation h2 {
	margin: 0 0 10px;
	padding: 0 0 8px;
	color: var(--pv-blue);
	border-bottom: 1px solid #e8eaed;
	font-size: 1em;
	font-weight: 700;
}

#divPolicyDate {
	margin-bottom: 14px;
	padding: 10px 12px;
	color: var(--pv-muted);
	background-color: var(--pv-row);
	border-inline-start: 4px solid var(--pv-blue);
	border-radius: 4px;
	font-size: 0.92em;
}

article#articlePolicyDocument .policyReadMessage {
	margin: 0 0 16px;
	padding: 12px 14px;
	color: var(--pv-feedback-success-color);
	background-color: var(--pv-feedback-success-bg);
	border: 1px solid var(--pv-feedback-success-border);
	border-radius: var(--pv-radius);
	font-weight: 700;
}

form#formPolicyReadConfirmation {
	margin: 0;
	padding: 0 28px 28px;
	border: 0;
}

form#formPolicyReadConfirmation fieldset {
	margin: 0;
	padding: 16px 18px 18px;
	color: #137333;
	background-color: #e8f5e8;
	border: 1px solid #34a853;
	border-inline-start: 4px solid #34a853;
	border-radius: var(--pv-radius);
}

form#formPolicyReadConfirmation legend {
	padding: 0 8px;
	color: #137333;
	font-weight: 700;
}

.policyReadFallbackControl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
}

.policyReadConfirmationCheckbox {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-weight: 700;
}

.policyReadConfirmationCheckbox input {
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
}

.policyReadConfirmationCheckbox--inactive {
	color: var(--pv-muted);
	cursor: default;
}

.policyReadConfirmationCheckbox--inactive input {
	cursor: not-allowed;
}

.policyReadConfirmationLabel {
	display: inline-block;
}

.policyReadTimestamp {
	color: var(--pv-muted);
	font-size: 0.94rem;
}

.policyReadConfirmation--enhanced .policyReadFallbackControl {
	display: none;
}

.policyReadConfirmationLiveControl {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* #1947: the design keeps only the compact band (.policyConsentStage--done)
   once compliance is recorded, but the role="status" announcement this
   element carries must still reach assistive technology. Visually hidden
   with the same clip-to-1px technique already used elsewhere in this sheet
   (see table#tableManualTOCListing thead tr) rather than display:none or
   visibility:hidden, either of which would also silence the announcement.
   ⚠️ Selector is `p.policyReadFlashMessage`, not `.policyReadFlashMessage`:
   the shared `p.flashMessage` rule (this element also carries that class)
   has the same specificity as a bare class selector and sets its own
   padding/border/margin, which reopened the clipped box to ~34px wide when
   tried as a bare class. */
p.policyReadFlashMessage {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--pv-feedback-success-color);
	background: var(--pv-feedback-success-bg);
	border: 0;
	clip-path: inset(50%);
	font-weight: 700;
	white-space: nowrap;
}

.policyReadErrorMessage {
	margin: 0;
}

form#formPolicyReadConfirmation button {
	margin: 0;
	padding: 8px 14px;
	color: #ffffff;
	background-color: var(--pv-green);
	border: 1px solid #0b681f;
	border-radius: 4px;
	font-weight: 700;
	text-align: center;
}

form#formPolicyReadConfirmation button:hover,
form#formPolicyReadConfirmation button:focus {
	background-color: #0b681f;
}

form#formPolicyReadConfirmation button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* The policy register: rows become separated cards, 'section page'
   entries become group headings, and read state reads as a pill. The
   column headers remain for assistive technology but leave the visual. */
table#tableManualTOCListing {
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 8px;
	background-color: transparent;
	box-shadow: none;
}

table#tableManualTOCListing thead tr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

table#tableManualTOCListing th,
table#tableManualTOCListing td {
	height: auto;
	padding: 13px 16px;
	border: 0;
	border-top: 1px solid var(--pv-line);
	border-bottom: 1px solid var(--pv-line);
	background-color: var(--pv-surface);
	text-align: start;
	vertical-align: middle;
	transition: border-color var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}

table#tableManualTOCListing tbody td:first-child {
	border-inline-start: 1px solid var(--pv-line);
	border-start-start-radius: var(--pv-radius-card);
	border-end-start-radius: var(--pv-radius-card);
	font-weight: 600;
}

table#tableManualTOCListing tbody td:last-child {
	border-inline-end: 1px solid var(--pv-line);
	border-start-end-radius: var(--pv-radius-card);
	border-end-end-radius: var(--pv-radius-card);
	color: var(--pv-ink-3);
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

table#tableManualTOCListing tbody tr:hover td {
	border-color: var(--pv-line-strong);
	box-shadow: 0 3px 10px rgba(23, 43, 58, 0.07);
}

table#tableManualTOCListing tbody th.manualsection {
	padding: 16px 4px 0;
	border: 0;
	background-color: transparent !important;
	color: var(--pv-ink-3);
	font-size: 0.79em;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

table#tableManualTOCListing tbody tr.offlineItem td {
	background-color: var(--pv-danger-tint) !important;
}


table#tableManualTOCListing td a,
table#tableManualTOCListing td a:link,
table#tableManualTOCListing td a:visited {
	color: var(--pv-ink);
	font-weight: 600;
	text-decoration: none;
}

table#tableManualTOCListing td a:hover,
table#tableManualTOCListing td a:focus {
	color: var(--pv-action);
	text-decoration: underline;
}

/* This cell holds a phrase ("Compulsory", "Reference document"), not a value,
   and it shares a row with the policy title. A long translation should take a
   second line here rather than hold the column open and squeeze the title, so
   it wraps. The card layout below re-applies nowrap on purpose, where the
   pill alone carries the status. */
.listingReadStatus {
	color: var(--pv-ink-3);
	font-size: 0.9em;
}

.listingReadStatus strong {
	color: var(--pv-ink-2);
	font-weight: 600;
}

/* #2661 THE POLICY STATUS MARKER (PolicyStatusMarker.xsl), on the register and in
   both policy menus. Kevin approved the drawing on 5 Nov 2026
   (documentation/design/compulsory-marker/). SHAPE separates the states -- clock,
   triangle, tick, pause bars, info circle -- and colour only repeats it.
   tests/e2e/policy-status-marker-2661.spec.ts compares the rendered glyphs. */
.policyStatusMarker {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 1.5px solid currentColor;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
	white-space: nowrap;
	vertical-align: middle;
}

.policyStatusMarkerGlyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 2px 5px;
	color: #ffffff;
}

.policyStatusMarkerGlyph svg {
	display: block;
	width: 12px;
	height: 12px;
}

.policyStatusMarkerText {
	padding: 2px 8px;
	font-variant-numeric: tabular-nums;
	unicode-bidi: isolate;
}

/* Still to read: a clock, blue (Kevin, 5 Nov 2026: the ladder colours with the new
   shapes). Within its timeframe a policy wears no warning colour (#2000). */
.policyStatusMarker--due {
	border-color: var(--pv-info-ink);
}

.policyStatusMarker--due .policyStatusMarkerGlyph {
	background-color: var(--pv-info-ink);
}

.policyStatusMarker--due .policyStatusMarkerText {
	background-color: var(--pv-info-tint);
	color: var(--pv-info-ink);
}

/* Overdue: a triangle, solid. ⛔ #2000, the owner's 2026-09-10 USER colour ruling,
   kept by Kevin on 5 Nov 2026: amber while reminders go out, crimson at the final
   report. */
.policyStatusMarker--overdue {
	border-color: var(--pv-warn-ink);
}

.policyStatusMarker--overdue .policyStatusMarkerGlyph,
.policyStatusMarker--overdue .policyStatusMarkerText {
	background-color: var(--pv-warn-ink);
	color: #ffffff;
}

.policyStatusMarker--finalReport {
	border-color: var(--pv-danger);
}

.policyStatusMarker--finalReport .policyStatusMarkerGlyph,
.policyStatusMarker--finalReport .policyStatusMarkerText {
	background-color: var(--pv-danger);
}

/* Confirmed: a tick, and the only place a tick is drawn. */
.policyStatusMarker--done {
	border-color: var(--pv-ok);
}

.policyStatusMarker--done .policyStatusMarkerGlyph {
	background-color: var(--pv-ok);
}

.policyStatusMarker--done .policyStatusMarkerText {
	background-color: var(--pv-ok-tint);
	color: #175E37;
}

/* Paused: pause bars, neutral. A pause never produces a status colour (#387). */
.policyStatusMarker--paused {
	border-color: var(--pv-ink-3);
}

.policyStatusMarker--paused .policyStatusMarkerGlyph {
	background-color: var(--pv-ink-3);
}

.policyStatusMarker--paused .policyStatusMarkerText {
	background-color: var(--pv-paper);
	color: var(--pv-ink-2);
}

/* The Edit menu's "Compulsory: x days": the clock outlined, unfilled, so a policy's
   setting is never read as a person's deadline (Kevin, 5 Nov 2026). */
.policyStatusMarker--setting {
	border-color: var(--pv-ink-3);
}

.policyStatusMarker--setting .policyStatusMarkerGlyph {
	border-inline-end: 1.5px solid var(--pv-ink-3);
	background-color: var(--pv-surface);
	color: var(--pv-ink-2);
}

.policyStatusMarker--setting .policyStatusMarkerText {
	background-color: var(--pv-surface);
	color: var(--pv-ink-2);
}

/* Reference: worth a look, never chased. Quiet, no box -- colour here would imply
   an obligation that does not exist. */
.policyStatusMarker--reference {
	border-color: transparent;
	color: var(--pv-ink-3);
	font-weight: 500;
}

.policyStatusMarker--reference .policyStatusMarkerGlyph {
	min-width: 0;
	padding-inline: 0 5px;
	color: var(--pv-ink-3);
}

.policyStatusMarker--reference .policyStatusMarkerText {
	padding-inline: 0;
}

/* In a policy menu: smaller, on its own line above the title (Kevin, 5 Nov 2026: "put
   the badges above the title ... to allow the policy name to fill the horizontal
   space of the menu item and wrap as appropriate"). Every policy row, Reference
   included, has the same rhythm: marker, then the full-width name; the mailing
   envelope stays at the row's end, centred. */
body > main > nav#navPolicyMenu li.manualpage > a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "marker icon" "title icon";
	column-gap: 8px;
	row-gap: 3px;
	align-items: center;
}

body > main > nav#navPolicyMenu li.manualpage > a > .policyStatusMarker {
	grid-area: marker;
	justify-self: start;
}

body > main > nav#navPolicyMenu li.manualpage > a > .policyMenuText {
	grid-area: title;
	min-width: 0;
	overflow-wrap: break-word;
}

body > main > nav#navPolicyMenu li.manualpage > a > .policyCompliancePendingIcon {
	grid-area: icon;
	margin-inline-start: 0;
}

nav#navPolicyMenu .policyStatusMarker {
	font-size: 11.5px;
}

nav#navPolicyMenu .policyStatusMarkerGlyph {
	min-width: 18px;
	padding: 2px 4px;
}

nav#navPolicyMenu .policyStatusMarkerGlyph svg {
	width: 11px;
	height: 11px;
}

nav#navPolicyMenu .policyStatusMarkerText {
	padding: 2px 6px;
}

nav#navPolicyMenu .policyStatusMarker--reference .policyStatusMarkerText {
	padding-inline: 0;
}

/* Status band above the register */
.tocStatusBand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 18px;
	padding: 18px 22px;
	background-color: var(--pv-surface);
	border: 1px solid var(--pv-line);
	border-radius: var(--pv-radius-card);
	box-shadow: var(--pv-shadow-card);
}

.tocStatusBand .tocStatusHeadline {
	margin: 0;
	font-size: 1.05em;
}

/* The not-found page's one link takes the action blue (#2566); staff pages give a bare link no colour. */
#mainNotFound a {
	color: var(--pv-action);
}

#mainNotFound a:hover,
#mainNotFound a:focus {
	color: var(--pv-action-hover);
}

.tocStatusBand .tocStatusDue {
	/* #2000. A count of outstanding policies, not a ladder state: no amber. */
	color: var(--pv-ink);
	font-weight: 650;
}

/* The sentence that answers "by when?". It follows the count in the same
   paragraph and inherits its size; it is deliberately not emphasised, because
   the count is the alarm and this is the detail behind it. */
.tocStatusBand .tocStatusNext {
	color: var(--pv-ink-2);
	font-weight: 400;
	unicode-bidi: isolate;
}

.tocStatusBand .tocStatusDone {
	color: var(--pv-ok);
	font-weight: 650;
}

.tocStatusBand .tocStatusMeter {
	min-width: 220px;
}

.tocStatusBand .tocStatusMeterLabel {
	margin: 0 0 6px;
	color: var(--pv-ink-3);
	font-size: 0.85em;
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.tocStatusBand .tocStatusTrack {
	height: 8px;
	border-radius: var(--pv-radius-pill);
	background-color: var(--pv-paper);
	border: 1px solid var(--pv-line);
	overflow: hidden;
}

/* The fill is a block, so it already grows from the meter's inline-start edge.
   The gradient inside it does not: an angle is physical. Signing it keeps the
   pale end at the start of the run and the deep end at the growing tip in both
   directions. */
.tocStatusBand .tocStatusFill {
	height: 100%;
	border-radius: var(--pv-radius-pill);
	background: linear-gradient(calc(90deg * var(--pv-dir)), var(--pv-azure), var(--pv-action));
}

a.iconLink,
.icon {
	color: inherit;
	font-family: inherit;
}

main#mainPolicyDocument.policyDocumentRoot {
	grid-template-columns: var(--pv-policy-nav-width) minmax(0, 1fr);
}

main#mainPolicyDocument > nav#navPolicyMenu li.currentPolicy > a,
main#mainPolicyDocument > nav#navPolicyMenu a[aria-current="page"] {
	color: var(--pv-blue);
	background-color: #eef7fb;
	font-weight: 700;
}


main#mainPolicyDocument > nav#navPolicyMenu li.currentPolicy.embargoedItem > a,
main#mainPolicyDocument > nav#navPolicyMenu li.embargoedItem > a[aria-current="page"] {
	color: #8f1d3f;
	background-color: #f1c4cd;
}

article#articlePolicyDocument.policyDocumentArticle {
	display: block;
	grid-column: 2;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}


article#articlePolicyDocument.policyDocumentArticle > .policyReadMessage,
article#articlePolicyDocument.policyDocumentArticle > #divEditableContent {
	padding-inline-end: 28px;
	padding-inline-start: 28px;
}

/* ⛔⛔ #2148 — WHY THIS IS A SHORTHAND AND MUST STAY ONE.
   `article#articlePolicyDocument header` (:2036) is a V4-era rule that zeroes
   all four sides at a specificity `.policyDocHead` cannot beat, so the V5
   restyle has been re-establishing the head's padding one property at a time.
   It re-established the top and the two inline sides and never the bottom —
   which is why the lozenge row sat flush against the document with a measured
   0px between them, and why the editing outline drawn 6px above the document
   crossed the lozenges instead of clearing them.
   Declaring all four sides here, once, is the fix: a side can no longer be
   forgotten and silently inherit the legacy zero. ⛔ Do not split this back
   into longhands. */
article#articlePolicyDocument.policyDocumentArticle > header {
	padding: 24px 28px;
}

article#articlePolicyDocument.policyDocumentArticle > #divEditableContent {
	padding-bottom: 28px;
}

/* The reading pane is a viewer: PDFs sit as a page on a slate surround,
   video on a dark stage. */
article#articlePolicyDocument.policyDocumentArticle .policyDocumentAsset {
	width: 100%;
	margin: 0;
	padding: 22px 0 26px;
	background-color: #46535E;
}

article#articlePolicyDocument.policyDocumentArticle .policyDocumentAsset--video {
	padding: 0;
	background-color: #141C23;
}

article#articlePolicyDocument.policyDocumentArticle .policyDocumentAsset--unavailable {
	padding: 18px;
	color: var(--pv-feedback-error-color);
	background-color: var(--pv-feedback-error-bg);
	border-inline-start: 4px solid var(--pv-feedback-error-border);
}

article#articlePolicyDocument.policyDocumentArticle .policyDocumentAsset--unavailable p {
	margin: 0;
}

article#articlePolicyDocument.policyDocumentArticle embed#pdfViewer {
	display: block;
	width: min(920px, 94%);
	min-height: 780px;
	margin: 0 auto;
	border: 0;
	border-radius: 2px;
	background-color: #eeeeee;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

article#articlePolicyDocument.policyDocumentArticle a#aMobilePDFLauncher {
	max-width: 320px;
	margin: 0 auto;
	border-radius: 6px;
}

button,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pv-action-gap);
	min-height: var(--pv-action-min-height);
	padding: var(--pv-action-padding);
	color: var(--pv-action-primary-color);
	background-color: var(--pv-action-primary-bg);
	border: 1px solid var(--pv-action-primary-border);
	border-radius: var(--pv-action-radius);
	font: inherit;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
	color: var(--pv-action-primary-color);
	background-color: var(--pv-action-primary-hover-bg);
	border-color: var(--pv-action-primary-hover-border);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
	max-width: 100%;
	padding: 8px 10px;
	color: var(--pv-text);
	background-color: #ffffff;
	border: 1px solid #bfc6cc;
	border-radius: 4px;
	font: inherit;
}

/*
 * ⛔ Owner, 31 Oct 2026 (Brickhill findings, item 2): every single-choice select
 * draws the product's chevron, inset by the same 12px as the text, and keeps
 * its text clear of it. Rules that restyle a select's box must set
 * `background-color` (never the `background` shorthand, which erases the
 * chevron) and leave `padding-inline-end` to this rule.
 */
select:not([multiple]):not([size]),
select[size="1"]:not([multiple]) {
	padding-inline-end: var(--pv-select-chevron-space);
	appearance: none;
	-webkit-appearance: none;
	background-image: var(--pv-select-chevron);
	background-repeat: no-repeat;
	background-position: right var(--pv-select-chevron-inset) center;
	background-size: 12px 8px;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--pv-blue);
	outline: 2px solid rgba(36, 149, 201, 0.22);
	outline-offset: 1px;
}

/* Sign in: a split front door. The brand panel is a decorative grid
   column drawn entirely in CSS (the product's one gradient); every word
   stays in the form column, so localisation is untouched. */
body > main#mainLogin.manuallogin {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	width: 100%;
	max-width: none;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background-color: var(--pv-surface);
}

.loginPanel .loginMfaNote {
	display: flex;
	gap: 9px;
	margin: 22px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--pv-line);
	color: var(--pv-ink-3);
	font-size: 0.85em;
	line-height: 1.5;
}

.loginPanel .loginMfaNote::before {
	content: "";
	flex: none;
	width: 14px;
	height: 15px;
	margin-top: 2px;
	background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2371828E" stroke-width="2"%3E%3Crect x="4" y="10" width="16" height="10" rx="2"/%3E%3Cpath d="M8 10V7a4 4 0 0 1 8 0v3"/%3E%3C/svg%3E') no-repeat center / contain;
}

.loginPanel .loginSchoolLogo {
	display: block;
	width: auto;
	max-width: 220px;
	height: auto;
	max-height: 52px;
	margin: 0 0 10px;
	object-fit: contain;
	object-position: left center;
}

/* #2613: the organisation name, between the logo and the "Sign in to PolicyViewer" heading. */
.loginPanel .loginOrganisationName {
	margin: 0 0 14px;
	color: var(--pv-ink-2);
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

body > main#mainLogin.manuallogin > aside#asideLoginBrand.loginBrand {
	grid-column: 1;
	grid-row: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	padding: 44px 48px;
	color: #ffffff;
	background:
		url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="none"%3E%3Cpath d="M4 15.5 L11 23 L24 7" stroke="%23C24E6B" stroke-width="4.4" stroke-linecap="round" stroke-linejoin="round" opacity="0.35"/%3E%3Cpath d="M8 15.5 L14 22 L27 5" stroke="%235FB2E4" stroke-width="4.4" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/%3E%3C/svg%3E') no-repeat right -90px bottom -70px / 440px 440px,
		linear-gradient(160deg, #16283A 0%, #1D3A54 60%, #1F4667 100%);
}

body > main#mainLogin.manuallogin > article#articleLoginPanel.loginPanel {
	grid-column: 2;
	grid-row: 1;
}

/* #2613: the logo, drawn inline on a white plate (the crimson is 1.55 to 2.36:1 on the navy). */
.loginBrand .loginBrandWordmark {
	align-self: flex-start;
	margin: 0;
	padding: 14px 18px;
	background: #ffffff;
	border-radius: 10px;
}

.loginBrand .loginBrandWordmark .policyViewerLogo {
	display: block;
}

.loginBrand .loginBrandTagline {
	margin: auto 0 0;
	max-width: 17ch;
	font-size: clamp(24px, 2.2vw, 30px);
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.28;
	text-wrap: balance;
}

.loginBrand .loginBrandTaglineDetail {
	margin: 0 0 auto;
	max-width: 42ch;
	color: #A8C4DA;
	font-size: 14.5px;
	line-height: 1.55;
}

.loginBrand .loginBrandVersion {
	margin: 0;
	color: #7E9DB5;
	font-family: var(--pv-font-mono);
	font-size: 12px;
}

/* The build this release is actually running (#911). Dimmer than the release
   tag above it: the tag is what a person means by "which version", the build is
   what an engineer needs when the two disagree. */
.loginBrand .loginBrandBuild {
	margin: 0;
	margin-block-start: 2px;
	color: #5B7A91;
	font-family: var(--pv-font-mono);
	font-size: 11px;
}

/*
	#1944: a plain column, not a bordered card. The deck's .lg-card carries no
	border, radius or shadow of its own — it is centred content inside the
	already-distinct right half of the grid, which supplies its own
	background. So the panel keeps its width/centring but drops the card
	treatment; the old focus-within border/shadow swap goes with it, since
	there is no longer an edge for focus to change. ⚠️ Explicit `none`/`0`
	below, not just omission: the shared `body > main > aside, body > main >
	article` rule (a lower-specificity but still-matching selector, since
	this article IS a `body > main > article`) is what drew the border in
	the first place, and only setting these properties here overrides it —
	dropping them from this rule would have let that one show through.
*/
body > main#mainLogin.manuallogin > article#articleLoginPanel.loginPanel {
	width: min(100%, 420px);
	min-height: 0;
	margin: 48px auto;
	padding: 30px 32px 34px;
	color: var(--pv-text);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body > main#mainLogin.manuallogin h1 {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	color: var(--pv-ink);
	font-size: 1.45em;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.25;
	overflow-wrap: break-word;
	text-align: start;
	text-wrap: balance;
}

body > main#mainLogin.manuallogin .loginMessage,
body > main#mainLogin.manuallogin .loginError {
	margin: 0 0 18px;
	padding: 10px 12px;
	border-radius: 4px;
	font-size: 0.95em;
}

body > main#mainLogin.manuallogin .loginMessage {
	color: var(--pv-feedback-info-color);
	background-color: var(--pv-feedback-info-bg);
	border: 1px solid var(--pv-feedback-info-border);
}

body > main#mainLogin.manuallogin .loginError {
	color: var(--pv-feedback-error-color);
	background-color: var(--pv-feedback-error-bg);
	border: 1px solid var(--pv-feedback-error-border);
}

body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet),
body > main#mainLogin.manuallogin .microsoftCredentialsPanel,
body > main#mainLogin.manuallogin .msgraphLoginPanel {
	width: 100%;
	margin: 0;
}

body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) fieldset {
	width: 100%;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;
}

body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) legend {
	margin: 0 0 18px;
	padding: 0;
	max-width: 100%;
	color: var(--pv-ink-2);
	background-color: transparent;
	font-size: 0.95em;
	font-weight: 500;
	line-height: 1.4;
	white-space: normal;
	text-align: start;
}

body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) div,
body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) .form-group {
	margin: 0 0 18px;
}

body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) label,
body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) span.label {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	color: var(--pv-ink-2);
	font-size: 0.9em;
	font-weight: 600;
}

body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) input[type="text"],
body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) input[type="password"] {
	display: block;
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 8px 12px;
	background-color: #FDFEFE;
	border: 1px solid var(--pv-line-strong);
	border-radius: var(--pv-radius-control);
	box-shadow: none;
	transition: border-color var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}

body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) input[type="text"]:focus,
body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) input[type="password"]:focus {
	border-color: var(--pv-azure);
	box-shadow: 0 0 0 3px rgba(32, 144, 208, 0.16);
	outline: none;
}

/* #1944. The password-toggle field: input padding makes room for the
   button, which sits inside the field's own end edge, as the design draws
   it (UI direction v24). Logical properties, matching the RTL panel below. */
body > main#mainLogin.manuallogin .pwField {
	position: relative;
}

body > main#mainLogin.manuallogin .pwField input[type="text"],
body > main#mainLogin.manuallogin .pwField input[type="password"] {
	padding-inline-end: 54px;
}

/* Overrides the generic full-width `button` rule above: this is a small
   in-field label, never a primary action. */
body > main#mainLogin.manuallogin .pwToggle {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 12px;
	transform: translateY(-50%);
	display: inline;
	width: auto;
	min-height: 0;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;
	color: var(--pv-blue);
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1;
}

body > main#mainLogin.manuallogin .pwToggle:hover,
body > main#mainLogin.manuallogin .pwToggle:focus {
	color: var(--pv-blue);
	background-color: transparent;
	border-color: transparent;
	text-decoration: underline;
}

body > main#mainLogin.manuallogin .pwToggle[hidden] {
	display: none;
}

body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formMfaLogin, #formPasswordResetRequest, #formPasswordResetSet) .formActions {
	margin: 24px 0 0;
}

/* #2310. The sign-in method chooser is the console's pill group (.pvSegmented, above).
   The login form's own `div` and `label` rules (margin, display:block, width:100%) are
   written for stacked fields and would stretch each pill to the full column and pile
   them up, so the group's own geometry is restored here at the same specificity. */
body > main#mainLogin.manuallogin form#formMfaLogin .pvSegmented {
	margin: 0 0 18px;
}

body > main#mainLogin.manuallogin form#formMfaLogin .pvSegmented label.pvSegmentedOption {
	display: inline-flex;
	width: auto;
	margin: 0;
}

body > main#mainLogin.manuallogin form:is(#formPasswordResetRequest, #formPasswordResetSet) .formActions {
	margin-top: 32px;
}

main#mainLogin.manuallogin form#formMfaLogin fieldset.mfaFieldset .formActions {
	margin-top: 32px;
	display: flex !important;
	flex-direction: column;
	gap: 12px;
}

/* The optional MFA setup choices are separate actions, not one button group. */
main#mainLogin.manuallogin form#formMfaLogin fieldset.mfaFieldset .formActions > button + button {
	margin-top: 0;
}

body > main#mainLogin.manuallogin button,
body > main#mainLogin.manuallogin input[type="submit"],
body > main#mainLogin.manuallogin button[name="msgraph"],
body > main#mainLogin.manuallogin .microsoftLoginButton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: var(--pv-action-gap);
	min-height: 46px;
	padding: 10px 14px;
	color: var(--pv-action-primary-color);
	background-color: var(--pv-action-primary-bg);
	border-color: var(--pv-action-primary-border);
	border-radius: var(--pv-action-radius);
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-align: center;
}

body > main#mainLogin.manuallogin form#formMfaLogin fieldset.mfaFieldset button {
	min-height: 50px;
	padding: 12px 16px;
	line-height: 1.2;
}

body > main#mainLogin.manuallogin button:hover,
body > main#mainLogin.manuallogin button:focus,
body > main#mainLogin.manuallogin input[type="submit"]:hover,
body > main#mainLogin.manuallogin input[type="submit"]:focus,
body > main#mainLogin.manuallogin .microsoftLoginButton:hover,
body > main#mainLogin.manuallogin .microsoftLoginButton:focus {
	color: var(--pv-action-primary-color);
	background-color: var(--pv-action-primary-hover-bg);
	border-color: var(--pv-action-primary-hover-border);
}

body > main#mainLogin.manuallogin button[name="msgraph"] {
	gap: 8px;
	margin-bottom: 16px;
	background-color: #0078d4;
	border-color: #106ebe;
}

body > main#mainLogin.manuallogin button[name="msgraph"]:hover,
body > main#mainLogin.manuallogin button[name="msgraph"]:focus {
	background-color: #106ebe;
}

body > main#mainLogin.manuallogin button[name="msgraph"] img {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   #1624 / #1367 — the sign-in page says which sign-in this site actually has.

   Two states share this block because they are the same shape: a short line of
   prose above the panel's single action. The provider handoff has an action
   (#1624); an unreachable directory deliberately has none (#1367), because
   there is nothing a person can usefully press.

   Logical properties only — the RTL capture mirrors this panel.
   ========================================================================== */

body > main#mainLogin.manuallogin .providerHandoffPrompt,
body > main#mainLogin.manuallogin .signInUnavailableDetail {
	margin-block: 0 18px;
	margin-inline: 0;
	color: var(--pv-ink-2);
	font-size: 0.95em;
	line-height: 1.45;
	text-align: start;
	text-wrap: pretty;
}

/* The provider mark identifies whose sign-in this is; the label does the
   naming, so the mark is decorative and hidden from assistive technology. */
body > main#mainLogin.manuallogin .microsoftLoginButton .providerMark {
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
}

/* #2290: Sign in with Google, drawn to Google's branding rules (light theme: white fill,
   #747775 stroke, #1F1F1F text, Roboto Medium 14/20). Signed off by Kevin, 5 Nov 2026. */
body > main#mainLogin.manuallogin .googleLoginButton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	inline-size: 100%;
	min-block-size: 46px;
	padding: 10px 14px;
	color: #1f1f1f;
	background-color: #fff;
	border: 1px solid #747775;
	border-radius: var(--pv-action-radius);
	font: 500 14px/20px Roboto, Arial, sans-serif;
	text-decoration: none;
}

body > main#mainLogin.manuallogin .googleLoginButton:hover,
body > main#mainLogin.manuallogin .googleLoginButton:focus {
	background-color: #f2f2f2;
}

body > main#mainLogin.manuallogin .googleLoginButton .providerMark {
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
}

body > main#mainLogin.manuallogin .passwordResetLink {
	display: inline-block;
	margin-top: 4px;
	color: var(--pv-blue);
	font-size: 0.95em;
	line-height: 1.3;
}

/* ==========================================================================
   V5 My Account — one calm place for you.

   The page answers, in the order a person would ask: who we think you are,
   where you stand, what to do next, and the conversations you have open. The
   identity band carries the directory photo (or its initials crest) beside a
   pair of concentric rings; below it a two-column grid holds the to-do list
   and the formal snapshot on the left, and personal details, sign-in security
   and support on the right.

   The rings are one SVG and no library. Each value circle carries the whole
   circumference as its dash pattern, so the drawn arc is whatever the offset
   has not eaten; the offset is a presentation attribute written by the XSL,
   which means the correct arc is on screen before any CSS runs. The sweep is a
   from-only keyframe: it animates out of an empty ring and lands on the value
   the attribute already holds, so no per-user number ever needs an inline
   style (the site runs style-src 'self').
   ========================================================================== */

body > main.accountRoot {
	display: block;
	max-width: var(--pv-content-max);
}

body > main#mainMfaSetup.accountRoot fieldset.mfaFieldset > button {
	width: 100%;
	min-height: 50px;
	margin-top: 24px;
	padding: 12px 16px;
	line-height: 1.2;
}

body > main.accountRoot > article#articleAccountSummary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--pv-ink);
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* --- identity band ------------------------------------------------------- */

#sectionAccountIdentity.accountBand {
	display: flex;
	align-items: stretch;
	gap: 30px;
	padding: 20px 24px;
	background-color: var(--pv-surface);
	border: 1px solid var(--pv-line);
	border-radius: 12px;
	box-shadow: var(--pv-shadow-card);
}

.accountIdentity {
	display: flex;
	flex: 1;
	gap: 18px;
	align-items: flex-start;
	min-width: 0;
}

.accountAvatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.accountAvatar--photo img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
}

/* The crest every directory but Apple OD gets: initials on the brand gradient. */
.accountAvatar--initials {
	color: #ffffff;
	background: linear-gradient(135deg, #25455e, #3a6b8c);
	font-size: 1.5rem;
	font-weight: 650;
	letter-spacing: 0.02em;
}

.accountIdentityText {
	min-width: 0;
}

#articleAccountSummary .accountIdentityText h1 {
	display: block;
	margin: 0 0 1px;
	color: var(--pv-ink);
	font-size: 1.35rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.accountIdentityRole {
	margin: 0 0 12px;
	color: var(--pv-ink-2);
	font-size: 0.9rem;
}

.accountAudiences {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
}

.accountAudiencesLabel {
	color: var(--pv-ink-3);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.accountAudience {
	padding-block: 3.5px;
	padding-inline: 12px;
	color: var(--pv-action-hover);
	background-color: var(--pv-action-tint);
	border-radius: var(--pv-radius-pill);
	font-size: 0.79rem;
	font-weight: 600;
}

/*
 * The standing chip (#387) — the same fact as the "Your standing" block, at
 * chip size, beside the audiences. Muted and word-first by design: a state,
 * not a demerit.
 */
.accountStandingChip {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding-block: 3.5px;
	padding-inline: 12px;
	color: var(--pv-ink-2);
	background-color: var(--pv-paper);
	border: 1px solid var(--pv-line);
	border-radius: var(--pv-radius-pill);
	font-size: 0.79rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.accountStandingChipDot {
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background-color: var(--pv-ink-3);
}

/*
 * What fills the rings' slot for a person outside the compliance chain. It
 * keeps the band's shape so the page does not read as broken, and states a
 * fact where an instrument would have implied a measurement.
 */
.accountStanding {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 7px;
	justify-content: center;
	max-inline-size: 340px;
	padding-inline-start: 26px;
	border-inline-start: 1px solid var(--pv-line);
}

.accountStandingLabel {
	margin: 0;
	color: var(--pv-ink-3);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.accountStandingSay {
	margin: 0;
	font-size: 0.97rem;
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

/*
 * A derived reason is unquoted: nobody wrote it, so nothing is put in anyone's
 * mouth. A reason somebody DID write would be quoted and attributed — the same
 * rule that separates the two kinds throughout the exclusion record.
 */
.accountStandingWhy {
	margin: 0;
	color: var(--pv-ink-2);
	font-size: 0.79rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.accountStandingWhy--derived {
	font-style: italic;
}

.accountStandingAction {
	margin: 0;
	font-size: 0.79rem;
	font-weight: 600;
}

/* --- concentric compliance rings ----------------------------------------- */

.accountRings {
	display: flex;
	gap: 22px;
	align-items: center;
	flex: none;
}

.accountRingSet {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
}

/* Rotated so both arcs start at twelve o'clock rather than three. */
.accountRingSvg {
	display: block;
	transform: rotate(-90deg);
}

.accountRingTrack,
.accountRingValue {
	fill: none;
}

.accountRingTrack {
	stroke: #e9eef2;
}

.accountRingValue {
	stroke-linecap: round;
	animation: pvAccountRingSweep 900ms var(--pv-ease) 150ms both;
}

/*
   Outer ring — compulsory compliance. Action blue while anything is
   outstanding, crimson only once something is genuinely overdue, green at
   done. Inner ring — reference exploration, always the quiet desaturated
   azure, because reference reading is encouraged and never chased.
*/
.accountRingValue--compulsory {
	--pv-ring-empty: 351.86;
	stroke: var(--pv-action);
}

.accountRingValue--complete {
	stroke: var(--pv-ok);
}

.accountRingValue--reference {
	--pv-ring-empty: 245.04;
	stroke: #8fbcde;
}

/*
   A from-only keyframe: the arc sweeps out of the empty ring and settles on
   the offset the presentation attribute already carries, so the finished
   state needs no CSS of its own.
*/
@keyframes pvAccountRingSweep {
	from {
		stroke-dashoffset: var(--pv-ring-empty);
	}
}

@media (prefers-reduced-motion: reduce) {
	.accountRingValue {
		animation: none;
	}
}

/* Nothing sits inside the rings until both are complete. */
.accountRingCentre {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.accountRingCheck {
	fill: none;
}

.accountRingCheck--confirmed {
	stroke: var(--pv-ok);
}

.accountRingCheck--explored {
	stroke: var(--pv-azure);
}

/* The numbers live here, never inside the rings. */
.accountRingLegend {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 0.85rem;
}

.accountRingLegendRow {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 0;
}

.accountRingLegendRow b {
	font-weight: 650;
}

.accountRingLegendRow small {
	display: block;
	color: var(--pv-ink-3);
	font-size: 0.75rem;
}

.accountRingSwatch {
	flex: none;
	width: 11px;
	height: 11px;
	margin-top: 5px;
	border-radius: 50%;
}

.accountRingSwatch--compulsory {
	background-color: var(--pv-action);
}

.accountRingSwatch--complete {
	background-color: var(--pv-ok);
}

.accountRingSwatch--reference {
	background-color: #8fbcde;
}

/*
 * Nobody is asking this person to read anything, so no compulsory ring is drawn
 * and its legend row carries words instead of a figure (issue #396). The swatch
 * is a hollow outline: present enough to keep the two rows aligned, and plainly
 * not one of the states that grades somebody.
 */
.accountRingSwatch--none {
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--pv-muted, #8a8f98);
}

.accountRingLegendRow--none b {
	color: var(--pv-ink-3);
	font-weight: 550;
}

.accountRingOutstanding {
	margin: 0;
	/* #2003. The ring is a count, and a count is not a ladder state: no amber. */
	color: var(--pv-ink-2);
	font-size: 0.79rem;
	font-weight: 600;
}

/*
 * A paused person keeps their rings; this line states the hold and what
 * happens next. Quiet ink, not amber — a pause is not a shortfall.
 */
.accountRingPaused {
	margin: 0;
	color: var(--pv-ink-2);
	font-size: 0.79rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* --- card grid ----------------------------------------------------------- */

.accountGrid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 16px;
	align-items: start;
}

.accountColumn {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

#articleAccountSummary .accountPanel {
	min-width: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--pv-surface);
	border: 1px solid var(--pv-line);
	border-radius: 12px;
	box-shadow: var(--pv-shadow-card);
}

.accountPanelHead {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 13px 18px;
	border-bottom: 1px solid var(--pv-line);
}

#articleAccountSummary .accountPanelHead h2 {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--pv-ink);
	border: 0;
	font-size: 0.95rem;
	font-weight: 650;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.accountPanelCount {
	padding: 2px 9px;
	/* #2003. How many policies are outstanding is a count, not a ladder state. */
	color: var(--pv-ink-2);
	background-color: var(--pv-paper);
	border-radius: var(--pv-radius-pill);
	font-size: 0.75rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.accountPanelAction,
.accountPanelAction:link,
.accountPanelAction:visited {
	margin-inline-start: auto;
	color: var(--pv-action);
	font-size: 0.79rem;
	font-weight: 600;
	text-decoration: none;
}

.accountPanelAction:hover,
.accountPanelAction:focus {
	text-decoration: underline;
}

.accountPanelBody {
	padding: 14px 18px;
}

.accountPanelBody--rows {
	padding: 6px 10px;
}

.accountPanelFoot {
	margin: 13px 0 0;
	padding-top: 11px;
	color: var(--pv-ink-3);
	border-top: 1px solid var(--pv-line);
	font-size: 0.76rem;
	line-height: 1.45;
}

.accountPanelActions {
	margin: 12px 0 0;
}

.accountEmpty {
	margin: 0;
	padding: 10px;
	color: var(--pv-ink-3);
	font-size: 0.85rem;
}

/* --- rows: the register's anatomy, at card scale ------------------------- */

.accountRowGroup {
	margin: 0;
	padding: 10px 10px 2px;
	color: var(--pv-ink-3);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.accountRow,
.accountRow:link,
.accountRow:visited {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 11px 10px;
	color: inherit;
	border-radius: var(--pv-radius-control);
	text-decoration: none;
	transition: background-color var(--pv-dur) var(--pv-ease);
}

.accountRow:hover,
.accountRow:focus {
	background-color: var(--pv-paper);
}

.accountRowText {
	flex: 1;
	min-width: 0;
}

.accountRowTitle {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.accountRowMeta {
	display: block;
	margin-top: 1px;
	color: var(--pv-ink-3);
	font-size: 0.76rem;
}

.accountTicketNumber {
	font-family: var(--pv-font-mono);
	font-size: 0.72rem;
}

.accountRowChevron {
	flex: none;
	color: var(--pv-line-strong);
	transform: scaleX(var(--pv-dir));
	transition: transform var(--pv-dur) var(--pv-ease), color var(--pv-dur) var(--pv-ease);
}

.accountRow:hover .accountRowChevron,
.accountRow:focus .accountRowChevron {
	color: var(--pv-azure);
	transform: scaleX(var(--pv-dir)) translateX(2px);
}

.accountRowChevron svg {
	display: block;
}

/* --- pills --------------------------------------------------------------- */

.accountPill {
	display: inline-flex;
	flex: none;
	gap: 7px;
	align-items: center;
	padding-block: 4px;
	padding-inline: 11px;
	border-radius: var(--pv-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	/*
	 * ⚠️ NOT `white-space: nowrap`. The traffic-light words are sentences now —
	 * "Not asked to confirm policies", "Final report sent 11 Aug" — and a
	 * verbose language makes them longer again. `anywhere` is the only value
	 * that lowers min-content size, so the pill shrinks instead of pushing the
	 * table sideways; a 6px overflow is all it takes to fail the German capture.
	 */
	overflow-wrap: anywhere;
}

/*
 * The dot repeats the state the word already carries. It is reinforcement for
 * readers who scan by colour, never the carrier of meaning (WCAG 2.2 AA,
 * #1758), so it is hidden from assistive technology at the markup.
 */
.accountPillDot {
	flex: none;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background-color: currentcolor;
}

/*
 * Which reminder went out, and when — or, on a crimson row, what confirming
 * now still does. A quiet line under the pill, never inside it: a label must
 * not smuggle the only copy of a date.
 */
.accountPillNote {
	display: block;
	margin-block-start: 2px;
	color: var(--pv-ink-3);
	font-size: 0.69rem;
	font-weight: 400;
	overflow-wrap: anywhere;
}

/* #2003. Amber is the warning and line-manager rungs only: a person climbing
   the ladder. A policy merely outstanding within its timeframe takes the
   --toRead pill below, and wears no warning colour. */
.accountPill--due {
	color: var(--pv-warn-ink);
	background-color: var(--pv-warn-tint);
}

/* Outstanding, within its timeframe: the same informational blue as the
   register's To read status. Owner's ruling, 31 Oct 2026:
   blue everywhere for outstanding reads; Reference stays grey. */
.accountPill--toRead {
	color: var(--pv-info-ink);
	background-color: var(--pv-info-tint);
	border: 1px solid transparent;
}

.accountPill--ok {
	color: var(--pv-ok);
	background-color: var(--pv-ok-tint);
}

.accountPill--warn {
	color: var(--pv-warn-ink);
	background-color: var(--pv-warn-tint);
}

.accountPill--paused {
	color: var(--pv-ink-2);
	background-color: var(--pv-paper);
	border: 1px solid var(--pv-line);
}

.accountPill--reference {
	color: var(--pv-ink-3);
	background-color: var(--pv-paper);
	border: 1px solid var(--pv-line);
}

/*
 * Outside the compliance chain (#387). Grey and muted: a state, not a demerit.
 * ⛔ Never crimson, and never a warning glyph — this person is not late, and
 * nothing is being asked of them.
 */
.accountPill--notAsked {
	color: var(--pv-ink-2);
	background-color: var(--pv-paper);
	border: 1px solid var(--pv-line);
}

/*
 * The final-report rung, and the ONLY crimson this page draws. Crimson is
 * earned: it says the platform has finished informing and the matter is with
 * the organisation. It is never used for a policy merely outstanding.
 */
.accountPill--reported {
	color: var(--pv-danger);
	background-color: var(--pv-danger-tint);
}

/* --- personal details ---------------------------------------------------- */

.accountDetailList {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 7px 18px;
	margin: 0;
	font-size: 0.85rem;
}

.accountDetailList dt {
	margin: 0;
	padding: 0;
	color: var(--pv-ink-3);
	border: 0;
	font-weight: 400;
}

.accountDetailList dd {
	margin: 0;
	padding: 0;
	min-width: 0;
	border: 0;
	font-weight: 550;
	overflow-wrap: anywhere;
}

.accountDetailValue--mono {
	font-family: var(--pv-font-mono);
	font-size: 0.79rem;
	font-weight: 500;
}

/* --- sign-in and security ------------------------------------------------ */

.accountMfaLine {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-size: 0.85rem;
}

.accountMfaSince {
	color: var(--pv-ink-3);
	font-family: var(--pv-font-mono);
	font-size: 0.75rem;
}

.accountMfaNote {
	margin: 9px 0 0;
	color: var(--pv-ink-3);
	font-size: 0.76rem;
	line-height: 1.45;
}

.accountButton,
.accountButton:link,
.accountButton:visited {
	display: inline-block;
	padding: 7px 14px;
	border-radius: var(--pv-radius-control);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--pv-dur) var(--pv-ease), border-color var(--pv-dur) var(--pv-ease),
		color var(--pv-dur) var(--pv-ease);
}

.accountButton--quiet,
.accountButton--quiet:link,
.accountButton--quiet:visited {
	color: var(--pv-action-hover);
	background-color: var(--pv-surface);
	border: 1px solid var(--pv-line-strong);
}

.accountButton--quiet:hover,
.accountButton--quiet:focus {
	color: var(--pv-action);
	border-color: var(--pv-azure);
}

.accountButton--primary,
.accountButton--primary:link,
.accountButton--primary:visited {
	padding: 8px 16px;
	color: #ffffff;
	background-color: var(--pv-action);
	border: 1px solid var(--pv-action);
}

.accountButton--primary:hover,
.accountButton--primary:focus {
	background-color: var(--pv-action-hover);
	border-color: var(--pv-action-hover);
}

/* --- policy snapshot ----------------------------------------------------- */

.accountSnapshotGenerated {
	margin: 0;
	padding: 11px 18px 0;
	color: var(--pv-ink-3);
	font-family: var(--pv-font-mono);
	font-size: 0.72rem;
}

#tableAccountPolicySnapshot {
	width: 100%;
	min-width: 0;
	border: 0;
	border-collapse: collapse;
	background-color: transparent;
	font-size: 0.82rem;
}

#tableAccountPolicySnapshot th,
#tableAccountPolicySnapshot td {
	padding: 8.5px 10px;
	border: 0;
	border-bottom: 1px solid #eef2f5;
	text-align: start;
	vertical-align: middle;
}

#tableAccountPolicySnapshot thead th {
	padding: 7px 10px;
	color: var(--pv-ink-3);
	background-color: transparent;
	border-bottom: 1px solid var(--pv-line);
	font-size: 0.7rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#tableAccountPolicySnapshot tbody tr:last-child td {
	border-bottom: 0;
}

#tableAccountPolicySnapshot tbody tr:hover {
	background-color: var(--pv-row-hover);
}

.accountTableTimestamp {
	color: var(--pv-ink-2);
	font-family: var(--pv-font-mono);
	font-size: 0.75rem;
	white-space: nowrap;
}

#tableAccountPolicySnapshot td a,
#tableAccountPolicySnapshot td a:link,
#tableAccountPolicySnapshot td a:visited {
	color: var(--pv-ink);
	text-decoration: none;
}

#tableAccountPolicySnapshot td a:hover,
#tableAccountPolicySnapshot td a:focus {
	color: var(--pv-action);
	text-decoration: underline;
}

/* --- narrow viewports ---------------------------------------------------- */

@media only screen and (max-width: 1024px) {
	.accountGrid {
		grid-template-columns: minmax(0, 1fr);
	}

	#sectionAccountIdentity.accountBand {
		flex-direction: column;
		gap: 20px;
	}

	.accountRings {
		align-self: flex-start;
	}
}

@media only screen and (max-width: 560px) {
	#sectionAccountIdentity.accountBand {
		padding: 16px;
	}

	.accountRings {
		flex-direction: column;
		gap: 14px;
		align-items: flex-start;
	}

	.accountDetailList {
		display: block;
	}

	.accountDetailList dt {
		padding-top: 8px;
	}

	.accountDetailList dd {
		padding-bottom: 2px;
	}

	.accountRow {
		gap: 12px;
	}

	/* The snapshot's timestamp column is the first thing to go when space runs out. */
	#tableAccountPolicySnapshot thead th:last-child,
	#tableAccountPolicySnapshot tbody td:last-child {
		display: none;
	}
}

body > footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	float: none;
	width: 100%;
	margin: 0;
	padding: 20px max(16px, calc((100vw - var(--pv-content-max)) / 2 + 16px));
	color: var(--pv-muted);
	/* #1945: the design (UI direction v19) sits the footer band on the app's
	   grey, not white -- the mock's `.pv-foot` carries no background of its
	   own and shows `.app`'s `--paper: #F4F6F8` through, which is this token
	   byte-for-byte. */
	background-color: var(--pv-paper);
	border-top: 1px solid var(--pv-border);
	font-size: 13px;
	text-align: center;
}

body > footer nav {
	float: none;
	width: 100%;
	margin: 0 0 16px;
}

body > footer nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 24px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

body > footer nav li {
	margin: 0;
	padding: 0;
}

body > footer nav a {
	/* #1945: explicit, so the links land on 13px/400 by rule rather than
	   inheriting through the generic `nav a { font-size: 1.1em }` (now that
	   the legacy 80%-!important footer rule is gone, that em would otherwise
	   land at 14.3px). */
	font-size: 13px;
	font-weight: 400;
	color: var(--pv-muted);
	text-decoration: none;
}

body > footer nav a:hover,
body > footer nav a:focus {
	color: var(--pv-blue);
	text-decoration: underline;
}

/* Trust identity slot: height-capped and contain-fitted so landscape,
   portrait and square trust marks all sit correctly. */
body > footer #divParentLogo {
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin-bottom: 8px;
	text-align: center;
}

body > footer #divParentLogo img {
	display: inline-block;
	width: auto;
	max-width: 138px;
	height: auto;
	max-height: 36px;
	object-fit: contain;
	vertical-align: middle;
}

body > footer #divFooterCopyright {
	float: none;
	width: 100%;
	margin: 0 0 8px;
	padding-inline-end: 0;
	text-align: center;
}

body > footer #divManufacturer {
	float: none;
	width: auto;
	margin: 0;
	color: #7a8288;
	text-align: center;
}

/*
	#1943: one bar, not two. Below 900px the header keeps its stacked rows
	(that collapse is #1923's); at desktop width the nav sits inline with the
	brand and the account chip instead of breaking out to a full-bleed row of
	its own underneath. Removing the nav's own inset (siteNavBar's max-width
	and padding-inline) also removes the double-padding that made the brand
	read as indented against it: both now share header's own inset alone.
*/
@media only screen and (min-width: 901px) {
	body > header {
		flex-wrap: nowrap;
		padding-block: 0;
	}

	body > header > nav {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		margin-top: 0;
		margin-inline: 0;
		background-color: transparent;
		border-top: 0;
	}

	body > header > nav .siteNavBar {
		max-width: none;
		margin: 0;
		padding-inline: 0;
	}
}

@media only screen and (max-width: 900px) {
	body > header {
		padding: 18px 16px 0;
	}

	body > header > nav {
		margin-inline-end: -16px;
		margin-inline-start: -16px;
	}

	body > header > nav .siteNavBar {
		gap: 8px;
		padding-inline: 10px;
	}

	body > header > nav ul {
		justify-content: flex-start;
		overflow-x: auto;
		padding: 0;
	}

	/* Small screens keep the initials but drop the name to save the row. */
	body > header > nav a.siteUserChip {
		min-height: 50px;
	}

	body > header > nav a.siteUserChip .siteUserName {
		display: none;
	}

	body > header > nav a {
		min-height: 50px;
		padding: 0 12px;
		white-space: nowrap;
	}

	body > main,
	main.policyIndexRoot {
		display: block;
		padding: 18px 16px 36px;
	}

	body > main > nav#navPolicyMenu,
	main.policyIndexRoot > nav#navPolicyMenu,
	body > main > h1,
	body > main > aside,
	body > main > article,
	main.policyIndexRoot > article#articlePolicyIndex {
		margin-bottom: 18px;
	}

	body > main > h1 {
		font-size: 2em;
	}

	article#articlePolicyDocument {
		display: block;
	}

	article#articlePolicyDocument > #asideInformation {
		margin-bottom: 18px;
	}

	table#tableManualTOCListing th,
	table#tableManualTOCListing td {
		padding: 11px 10px;
	}

	/* ⭐ #1945 register[6]. `display: block` here (predating the flex/`order`
	   footer below) beat `display: flex` from the base rule at every width
	   this query covers, so `order` was inert below 900px and the footer fell
	   back to plain DOM order -- trust block, then copyright, then the
	   organisation line, then links -- silently, since nothing here asserted
	   the mobile order was actually the intended one. Dropped; the base rule
	   already centres the stack in the deck's order at every width, and this
	   query still narrows the footer's side padding for a phone. */
	body > footer {
		padding: 20px 16px;
	}

	body > main#mainLogin.manuallogin {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	body > main#mainLogin.manuallogin > aside#asideLoginBrand.loginBrand {
		display: none;
	}

	body > main#mainLogin.manuallogin > article#articleLoginPanel.loginPanel {
		grid-column: 1;
	}

	body > main#mainLogin.manuallogin > article#articleLoginPanel.loginPanel {
		margin: 28px auto 40px;
	}
}

@media only screen and (max-width: 560px) {
	body > header {
		align-items: flex-start;
		gap: 12px;
	}

	/* #1923. Collapsed (unchecked), nav holds only the clipped checkbox and
	   the visible ☰ label -- shed the full-bleed band's own inline-size and
	   block-start margin so the toggle shares the brand's row instead of
	   forcing a row of its own beneath it, matching the deck's 375px header.
	   Checked, nav is the full-bleed band again to hold the opened menu,
	   unchanged from before this rule existed. */
	body > header > nav {
		inline-size: auto;
		margin-block-start: 0;
		margin-inline-end: 0;
		margin-inline-start: 0;
		/* #1923 residual: the band's own 1px top border (body > header > nav,
		   line 1388) still draws at this auto inline-size, showing as a short
		   segment above the ☰. The deck has no such line collapsed, so shed
		   it here; the open (:checked) band below keeps the border it always
		   had. */
		border-block-start: 0;
	}

	body > header > nav:has(.siteNavToggleCheckbox:checked) {
		inline-size: 100vw;
		margin-block-start: 14px;
		margin-inline-end: -16px;
		margin-inline-start: -16px;
	}

	/* #1923. Below this width the link set no longer fits on one row and
	   wrapped into three, stranding the account chip mid-nav. The list and
	   the chip now collapse behind a ☰ toggle instead of wrapping. */
	body > header > nav .siteNavBar {
		flex-wrap: wrap;
		align-items: center;
		gap: 0;
	}

	/* The checkbox is the control CSS keys off; it stays in the tab order
	   but is clipped rather than shown, so its own paired label is the only
	   visible button. */
	body > header > nav .siteNavToggleCheckbox {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body > header > nav .siteNavToggleButton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-inline-start: auto;
		border-radius: var(--pv-radius-control);
		color: var(--pv-ink);
		cursor: pointer;
	}

	body > header > nav .siteNavToggleCheckbox:focus + .siteNavToggleButton {
		outline: 2px solid var(--pv-action);
		outline-offset: 2px;
	}

	body > header > nav ul,
	body > header > nav a.siteUserChip {
		display: none;
	}

	body > header > nav .siteNavToggleCheckbox:checked ~ ul {
		display: flex;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		overflow-x: visible;
		margin-block-start: 8px;
	}

	body > header > nav .siteNavToggleCheckbox:checked ~ a.siteUserChip {
		display: inline-flex;
		flex-basis: 100%;
		margin-block-start: 4px;
	}

	/* The name that ≤900px hides to save row space can come back once the
	   chip has its own full-width row again. */
	body > header > nav a.siteUserChip .siteUserName {
		display: inline;
	}

	body > header > nav ul li {
		width: 100%;
	}

	.siteWideBanner,
	#divSiteWideBanner,
	#divManagementSiteWideBanner {
		flex-wrap: wrap;
		gap: 6px 10px;
		padding: 9px 14px;
		font-size: 0.9rem;
	}

	body > main > aside,
	body > main > article {
		padding: 18px;
	}

	body > main#mainLogin.manuallogin {
		min-height: auto;
		padding: 48px 16px 72px;
	}

	body > main#mainLogin.manuallogin > article#articleLoginPanel.loginPanel {
		width: 100%;
		max-width: calc(100vw - 32px);
		padding: 24px 18px 28px;
	}

	body > main#mainLogin.manuallogin h1 {
		font-size: 1.65em;
	}

	body > main#mainLogin.manuallogin form:is(#formUserLoginForm, #formPasswordResetRequest, #formPasswordResetSet) fieldset {
		padding: 20px 14px 18px;
	}

	body > main > article:has(> .editor) > table,
	body > main > article:has(> .editor) > #tableManualTOCListing {
		width: calc(100% - 32px);
		margin: 0 16px 18px;
	}

	table#tableManualTOCListing {
		font-size: 0.92rem;
	}
}

/* ==========================================================================
   V5 consent card — the signature moment. The checkbox draws its tick, the
   button carries the action blue, and once recorded (data-completed="1")
   the form presents as the permanent timestamp panel: the submit control
   disappears and the card turns confirmation-green. Ordered after every
   earlier consent rule so it owns the treatment.
   ========================================================================== */

form#formPolicyReadConfirmation {
	margin: 0;
	padding: 22px 28px 24px;
	background: linear-gradient(180deg, #FBFCFD, #F6F9FB);
	border-top: 1px solid var(--pv-line);
}

form#formPolicyReadConfirmation[data-completed="1"] {
	background: linear-gradient(180deg, #F4FBF7, #EDF7F1);
}

fieldset#fieldsetPolicyReadConfirmation {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
	#1946 / #1947: the deck gives the consent card no heading at all and lets
	the checkbox sentence (and, once recorded, the confirmation line) speak
	for the block. The legend stays in the DOM — the rendered string this
	proves against (UIString::COMPLETION_RECORD()) is unchanged — only its
	display is dropped. ⚠️ NOT the usual clip-to-1px visually-hidden
	technique: a <legend> follows fieldset's own special box layout rather
	than normal flow, and measured in Chromium `position: absolute` on a
	legend does not actually constrain its rendered width — the element
	stayed at its full text width (~156px) instead of clipping to 1px.
	display: none sidesteps that layout algorithm entirely.
*/
fieldset#fieldsetPolicyReadConfirmation legend {
	display: none;
}

.policyReadConfirmationCheckbox {
	gap: 0.7rem;
	font-weight: 500;
	font-size: 0.97rem;
}

.policyReadConfirmationCheckbox input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 26px;
	height: 26px;
	border: 2px solid var(--pv-line-strong);
	border-radius: 7px;
	background-color: #ffffff;
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="4.5 12.5 10 18 19.5 6.5"/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0 0;
	cursor: pointer;
	transition: background-color var(--pv-dur) var(--pv-ease), border-color var(--pv-dur) var(--pv-ease), background-size 200ms var(--pv-ease);
}

.policyReadConfirmationCheckbox input:hover:not(:disabled) {
	border-color: var(--pv-azure);
}

.policyReadConfirmationCheckbox input:checked {
	background-color: var(--pv-action);
	border-color: var(--pv-action);
	background-size: 15px 15px;
}

.policyReadConfirmationCheckbox input:disabled {
	cursor: default;
}

.policyReadConfirmationCheckbox input:checked:disabled {
	background-color: var(--pv-ok);
	border-color: var(--pv-ok);
}

form#formPolicyReadConfirmation[data-completed="1"] .policyReadConfirmationCheckbox {
	color: #175E37;
	font-weight: 600;
}

.policyReadTimestamp {
	color: var(--pv-ink-3);
	font-family: var(--pv-font-mono);
	font-size: 0.8rem;
}

form#formPolicyReadConfirmation button {
	margin: 0;
	padding: 11px 20px;
	color: #ffffff;
	background-color: var(--pv-action);
	border: 1px solid var(--pv-action);
	border-radius: var(--pv-radius-control);
	font-weight: 600;
	transition: background-color var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}

form#formPolicyReadConfirmation button:hover:not(:disabled) {
	background-color: var(--pv-action-hover);
	border-color: var(--pv-action-hover);
	box-shadow: 0 3px 10px rgba(24, 111, 175, 0.3);
}

form#formPolicyReadConfirmation[data-completed="1"] .policyReadFallbackSubmit {
	display: none;
}

/* The live-control label reads in ink until the record exists; green is
   reserved for the confirmed state. */
.policyReadConfirmationLiveControl .policyReadConfirmationLabel,
#policyReadConfirmationApp .policyReadConfirmationLabel {
	color: var(--pv-ink);
	font-weight: 500;
}

form#formPolicyReadConfirmation[data-completed="1"] .policyReadConfirmationLabel {
	color: #175E37;
	font-weight: 600;
}

/* ==========================================================================
   V5 slice 2 — the Read & confirm page. The reading pane is a viewer framed
   by PolicyViewer chrome that carries the compliance state: contents rail on
   the left, the document card on the right (crumb, serif title, meta chips,
   asset viewer, consent card), provenance strip beneath. Ordered last so it
   owns the treatment.
   ========================================================================== */

/* --- layout: rail | card, provenance strip under the card ----------------
   5.0.16 (Kevin, 7 Nov 2026): the menu sits where the landing page's does, from the top of the left column beside
   the banners (the base `body > main > nav#navPolicyMenu` placement); banners and the card share the right column. -- */

main.policyDocumentRoot > article#articlePolicyDocument {
	grid-row: auto;
	grid-column: 2;
	order: 2;
	padding: 0;
	overflow: hidden;
	border-radius: 12px;
}

/* --- the menu: the landing page's own (5.0.16) ----------------------------------
   Kevin, 7 Nov 2026: the menu looks the same on every page. The box, the blue header band and the Edit policies
   button come from the landing page's rules, which name both page roots; this page adds only the current policy's
   highlight. tests/e2e/policy-menu-same-on-every-page-5016.spec.ts compares the rendered menus. */


main.policyDocumentRoot > nav#navPolicyMenu li.currentPolicy > a {
	color: var(--pv-action);
	background-color: var(--pv-action-tint);
	border-inline-start-color: var(--pv-azure);
	font-weight: 600;
}

/* The status marker comes BEFORE the title (#2661), in the markup as well as in the
   picture, so the reading order and the visual order agree, which is the only
   arrangement a screen reader also gets right. */
main.policyDocumentRoot > nav#navPolicyMenu a .policyMenuText {
	flex: 1;
	min-width: 0;
}

/* --- document head: crumb, serif title, meta chips ------------------------ */

.policyDocHead {
	padding: 24px 36px 18px;
	border-bottom: 1px solid var(--pv-line);
}

/* Edit-Controls-Design §2.1: the toggle sits in the head of the region it
   edits, at the inline-end, on the crumb's line — the position is what tells a
   reader what the control scopes to.

   ⭐ A GRID RATHER THAN A WRAPPER. Putting the crumb and the toggle in a flex
   row would mean inserting a <div> that means nothing between the head and its
   children, and would break every selector that reads the crumb as the head's
   own child. The head places them instead: crumb and toggle share row 1, the
   title and the lozenges span both columns beneath. */
.policyDocHead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

.policyDocHead > h1,
.policyDocHead > .policyDocMeta {
	grid-column: 1 / -1;
}


.policyDocCrumb {
	margin: 0 0 8px;
	color: var(--pv-ink-3);
	font-size: 0.82rem;
}

.policyDocCrumb a {
	color: var(--pv-action);
	font-weight: 550;
	text-decoration: none;
}

.policyDocCrumb a:hover,
.policyDocCrumb a:focus {
	text-decoration: underline;
}

article#articlePolicyDocument .policyDocHead h1 {
	margin: 0 0 12px;
	color: var(--pv-ink);
	font-family: var(--pv-font-doc);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

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

.policyDocChip {
	display: inline-block;
	padding: 3px 11px;
	color: var(--pv-ink-2);
	background-color: var(--pv-paper);
	border: 1px solid var(--pv-line);
	border-radius: var(--pv-radius-pill);
	font-size: 0.8rem;
	font-weight: 550;
}

.policyDocChip--version {
	font-family: var(--pv-font-mono);
	font-size: 0.74rem;
}

/* #2413: the policy page's Embargoed badge wears the menu item's crimson (owner ruling, 29 Oct 2026). */
.policyDocChip--embargoed {
	color: #8f1d3f;
	background-color: #f7d2d8;
	border-color: transparent;
	font-weight: 600;
}

/* --- admin notices and inline editor sit inside the card frame ------------ */

article#articlePolicyDocument > .policyReadMessage {
	margin: 16px 36px 0;
}


/* --- document body: serif reading measure for text pages ------------------ */

article#articlePolicyDocument.policyDocumentArticle > #divEditableContent {
	padding: 24px 36px 28px;
	font-family: var(--pv-font-doc);
	font-size: 1.05rem;
	line-height: 1.65;
	color: #26313C;
	max-width: 74ch;
}

article#articlePolicyDocument.policyDocumentArticle > #divEditableContent h2 {
	margin: 24px 0 10px;
	color: var(--pv-action);
	font-family: var(--pv-font-ui);
	font-size: 0.8rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

article#articlePolicyDocument.policyDocumentArticle > #divEditableContent:has(> .policyDocumentAsset) {
	padding: 0;
	font-family: var(--pv-font-ui);
	font-size: 1em;
	max-width: none;
}

/* --- viewer chrome: the asset bar names the file and offers the way out --- */

article#articlePolicyDocument.policyDocumentArticle .policyDocumentAsset {
	padding: 0 0 26px;
}

article#articlePolicyDocument.policyDocumentArticle .policyDocumentAsset--video {
	padding: 0;
}

article#articlePolicyDocument.policyDocumentArticle .policyDocumentAsset--unavailable {
	padding: 18px;
}

.policyAssetBar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	padding: 8px 18px;
	color: #C8D3DC;
	background-color: #38444E;
	font-family: var(--pv-font-ui);
	font-size: 0.85rem;
}

.policyAssetBar--video {
	margin-bottom: 0;
	background-color: #0D141A;
}

.policyAssetName {
	min-width: 0;
	overflow-wrap: anywhere;
	color: #E4EBF0;
	font-weight: 550;
}

article#articlePolicyDocument.policyDocumentArticle a#aMobilePDFLauncher {
	display: inline-block;
	width: auto;
	max-width: none;
	margin-block: 0;
	margin-inline: auto 0;
	padding: 3px 10px;
	color: #C8D3DC;
	background: none;
	border: 1px solid #526069;
	border-radius: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--pv-dur) var(--pv-ease), background-color var(--pv-dur) var(--pv-ease);
}

article#articlePolicyDocument.policyDocumentArticle a#aMobilePDFLauncher:hover,
article#articlePolicyDocument.policyDocumentArticle a#aMobilePDFLauncher:focus {
	color: #ffffff;
	background-color: #46535E;
}

/* --- consent card: two stages that never coexist -------------------------- */

/* #2955: the plain line that stands where the form would be for a person who is not asked to confirm. */
article#articlePolicyDocument p.policyReadNotAsked {
	margin: 0;
	padding: 20px 36px 22px;
	color: var(--pv-ink-2);
	font-size: 0.92em;
}

form#formPolicyReadConfirmation.policyConsentCard {
	padding: 20px 36px 22px;
}

/* The V4-familiar green fieldset box retires: the card itself carries the
   state, so the fieldset is a silent grouping element. */
form#formPolicyReadConfirmation.policyConsentCard fieldset#fieldsetPolicyReadConfirmation {
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
}

.policyConsentStage--done {
	display: none;
}

form#formPolicyReadConfirmation[data-completed="1"] .policyConsentStage--form {
	display: none;
}

form#formPolicyReadConfirmation[data-completed="1"] .policyConsentStage--done {
	display: block;
	animation: pvConsentRise 320ms var(--pv-ease) both;
}

@keyframes pvConsentRise {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	form#formPolicyReadConfirmation[data-completed="1"] .policyConsentStage--done {
		animation: none;
	}
}

.policyConsentCheck {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.policyConsentCheck input {
	position: absolute;
	width: 26px;
	height: 26px;
	margin: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.policyConsentBox {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	background-color: #ffffff;
	border: 2px solid var(--pv-line-strong);
	border-radius: 7px;
	transition: background-color 200ms var(--pv-ease), border-color 200ms var(--pv-ease);
}

.policyConsentBox svg {
	display: block;
}

.policyConsentBox svg polyline {
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
	transition: stroke-dashoffset 320ms var(--pv-ease) 40ms;
}

.policyConsentCheck input:hover:not(:disabled) + .policyConsentBox {
	border-color: var(--pv-azure);
}

.policyConsentCheck input:focus-visible + .policyConsentBox {
	outline: var(--pv-focus-ring);
	outline-offset: var(--pv-focus-offset);
}

.policyConsentCheck input:checked + .policyConsentBox {
	background-color: var(--pv-action);
	border-color: var(--pv-action);
}

.policyConsentCheck input:checked:disabled + .policyConsentBox {
	background-color: var(--pv-ok);
	border-color: var(--pv-ok);
}

.policyConsentCheck input:checked + .policyConsentBox svg polyline {
	stroke-dashoffset: 0;
}

.policyConsentText {
	padding-top: 2px;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.45;
}

.policyConsentDetail {
	display: block;
	margin-top: 2px;
	color: var(--pv-ink-3);
	font-size: 0.8rem;
	font-weight: 400;
}

/* ⭐⭐⭐ What is about to be written about this person, beside the control that
   writes it. Mono, because it is an audit stamp and reads as one; muted,
   because it is a statement of fact rather than a call to act. It sits on its
   own line under the button on narrow screens rather than squeezing it. */
.policyConsentStamp {
	color: var(--pv-ink-3);
	font-family: var(--pv-font-mono);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	unicode-bidi: isolate;
}

.policyConsentActions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-top: 16px;
}

.policyConsentWhy {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 12px 0 0;
	color: var(--pv-ink-3);
	font-size: 0.8rem;
}

.policyConsentWhy svg {
	flex: none;
}

form#formPolicyReadConfirmation .policyConsentSubmit[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}

.policyConsentOkLine {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--pv-ok);
	font-size: 0.95rem;
	font-weight: 600;
}

.policyConsentOkIcon {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	color: #ffffff;
	background-color: var(--pv-ok);
	border-radius: 50%;
}

.policyConsentOkIcon svg {
	display: block;
}

.policyConsentOkLine .policyReadTimestamp {
	margin-inline-start: auto;
}

.policyConsentOkSub {
	margin-block: 8px 0;
	margin-inline: 36px 0;
	color: var(--pv-ink-3);
	font-size: 0.8rem;
}

/* --- small screens: the card stacks, the viewer shortens ------------------ */

@media only screen and (max-width: 900px) {
	/* Document first, provenance next, the contents rail last. */
	main.policyDocumentRoot {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	main.policyDocumentRoot > .siteWideBanner {
		order: 0;
	}

	main.policyDocumentRoot > article#articlePolicyDocument {
		order: 1;
		margin-bottom: 0;
	}

	main.policyDocumentRoot > nav#navPolicyMenu {
		order: 3;
		margin-bottom: 0;
		padding-inline-end: 0;
	}

	main.policyDocumentRoot > article#articlePolicyDocument {
		border-radius: 10px;
	}

	/* #2148, design §5: the toggle keeps its words at every width, so a narrow
	   head stacks instead of squeezing the crumb against it. */
	.policyDocHead {
		grid-template-columns: minmax(0, 1fr);
	}


	/* #2148: authored as `.policyDocHead`, which loses to the legacy
	   `article#articlePolicyDocument header` rule exactly as the desktop values
	   did, so these have never rendered. Stated at the winning specificity. */
	article#articlePolicyDocument.policyDocumentArticle > header {
		padding: 18px 20px;
	}

	article#articlePolicyDocument.policyDocumentArticle > #divEditableContent {
		padding: 18px 20px 22px;
	}

	article#articlePolicyDocument.policyDocumentArticle > #divEditableContent:has(> .policyDocumentAsset) {
		padding: 0;
	}

	article#articlePolicyDocument.policyDocumentArticle embed#pdfViewer {
		min-height: 68vh;
	}

	form#formPolicyReadConfirmation.policyConsentCard {
		padding: 16px 20px 18px;
	}

	.policyConsentOkLine {
		flex-wrap: wrap;
	}

	.policyConsentOkLine .policyReadTimestamp {
		flex-basis: 100%;
		margin-inline-start: 36px;
	}
}

/* ==========================================================================
   V5 slice 3 — the register becomes a to-do list. The status band greets by
   name, a search-and-filter toolbar sits above the listing, and every row
   carries its state at a glance: state disc, title with a meta line, status
   pill, chevron. Group headings from section pages gain policy counts.
   ========================================================================== */

.tocStatusBand .tocStatusIntro {
	flex: 1;
	min-width: 240px;
}

.tocStatusBand .tocStatusIntro h1 {
	margin: 0 0 3px;
	color: var(--pv-ink);
	font-size: 1.35rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.tocStatusBand .tocStatusHeadline {
	font-size: 0.95em;
}

/* --- search + filter toolbar (revealed by policy-page.js) ----------------- */

.tocTools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}

.tocSearch {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	max-width: 340px;
	padding: 8px 12px;
	color: var(--pv-ink-3);
	background-color: var(--pv-surface);
	border: 1px solid var(--pv-line-strong);
	border-radius: var(--pv-radius-control);
	transition: border-color var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}

.tocSearch:hover,
.tocSearch:focus-within {
	border-color: var(--pv-azure);
}

.tocSearch svg {
	flex: none;
}

.tocSearch input {
	flex: 1;
	min-width: 0;
	padding: 0;
	color: var(--pv-ink);
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.92rem;
}

.tocSearch input:focus {
	outline: none;
}

.tocFilterChips {
	display: flex;
	gap: 6px;
}

button.tocChip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 0;
	padding: 6px 14px;
	color: var(--pv-ink-2);
	background-color: var(--pv-surface);
	border: 1px solid var(--pv-line-strong);
	border-radius: var(--pv-radius-pill);
	font-size: 0.86rem;
	font-weight: 550;
	cursor: pointer;
	transition: color var(--pv-dur) var(--pv-ease), border-color var(--pv-dur) var(--pv-ease), background-color var(--pv-dur) var(--pv-ease);
}

button.tocChip:hover {
	color: var(--pv-action);
	background-color: var(--pv-surface);
	border-color: var(--pv-azure);
}

button.tocChip.tocChip--selected {
	color: #ffffff;
	background-color: var(--pv-ink);
	border-color: var(--pv-ink);
}

button.tocChip .tocChipCount {
	padding: 1px 8px;
	background-color: rgba(255, 255, 255, 0.16);
	border-radius: var(--pv-radius-pill);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

button.tocChip:not(.tocChip--selected) .tocChipCount {
	/* #2000. A count, not a ladder state: no amber. */
	color: var(--pv-ink-2);
	background-color: var(--pv-paper);
}

/* --- row anatomy: state disc, title + meta, pill, chevron ----------------- */

table#tableManualTOCListing td.tocRowTitle {
	border-inline-end: 0;
}

.tocRowText {
	display: inline-block;
	max-width: calc(100% - 48px);
	vertical-align: middle;
}

.tocRowText a {
	display: block;
	overflow-wrap: anywhere;
}

.tocRowMeta {
	display: block;
	margin-top: 1px;
	color: var(--pv-ink-3);
	font-size: 0.82rem;
	font-weight: 400;
}

/* #1945 mobile[3]: the reference pill and meta line each carry a full and a
   short form; both render server-side, and this alone decides which shows.
   Default (desktop and up) is the full form. */
table#tableManualTOCListing .tocTextShort {
	display: none;
}

/* #1945 mobile[5]: the status band's compact status line is the same
   full/short pair, same default. */
.tocStatusBand .tocTextShort {
	display: none;
}

/* The tail keeps the last-updated date for assistive tech and shows the
   chevron; the meta line carries the human-facing date. */
table#tableManualTOCListing td.tocRowTail .tocRowUpdated {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

table#tableManualTOCListing td.tocRowTail {
	text-align: end;
}

/* The chevron points the way the row is read, so it flips with the direction.
   The hover nudge is written after the flip and therefore inherits it: under
   RTL, scaleX(-1) turns the +2px into a 2px move towards the left, which is
   still "onwards". One transform list does both jobs. */
.tocRowChevron {
	display: inline-flex;
	color: var(--pv-line-strong);
	vertical-align: middle;
	transform: scaleX(var(--pv-dir));
	transition: color var(--pv-dur) var(--pv-ease), transform var(--pv-dur) var(--pv-ease);
}

table#tableManualTOCListing tbody tr:hover .tocRowChevron {
	color: var(--pv-azure);
	transform: scaleX(var(--pv-dir)) translateX(2px);
}

/* --- #2301 item 1: the whole row is ONE navigation target ------------------
   The title's own <a> is stretched over the row by a positioned ::after, so a
   click on the chevron or on any empty part of the row lands on the policy,
   while keyboard and screen-reader users still meet exactly one link per row.
   The chevron stays decorative (aria-hidden). Anything else in the row that
   must stay independently operable or hoverable (the pending-mailing marker)
   is lifted above the stretched link. */
table#tableManualTOCListing tbody tr[data-toc-row="policy"] {
	position: relative;
	cursor: pointer;
}

table#tableManualTOCListing tbody tr[data-toc-row="policy"] .tocRowText a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

table#tableManualTOCListing tbody tr[data-toc-row="policy"] .policyCompliancePendingIcon {
	position: relative;
	z-index: 2;
}

/* The focus ring belongs to the row the link stands for, not to the title's
   text box (an outline does not enclose an absolutely positioned ::after). */
table#tableManualTOCListing tbody tr[data-toc-row="policy"] .tocRowText a:focus-visible {
	outline: none;
}

table#tableManualTOCListing tbody tr[data-toc-row="policy"]:has(.tocRowText a:focus-visible) {
	outline: 2px solid var(--pv-azure);
	outline-offset: -2px;
}

/* --- group headings gain their policy counts ------------------------------ */

table#tableManualTOCListing tbody th.manualsection .tocGroupTitle {
	letter-spacing: inherit;
}

table#tableManualTOCListing tbody th.manualsection .tocGroupCount {
	margin-inline-start: 10px;
	color: var(--pv-ink-3);
	font-size: 0.95em;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* --- small screens: full-width rows, docked consent ----------------------- */

@media only screen and (max-width: 900px) {
	.tocStatusBand .tocStatusIntro h1 {
		font-size: 1.2rem;
	}

	.tocSearch {
		max-width: none;
	}

	/* Full-width card rows: disc, title + meta, pill, chevron on one line. */
	table#tableManualTOCListing,
	table#tableManualTOCListing tbody {
		display: block;
	}

	table#tableManualTOCListing tbody tr[data-toc-row="policy"] {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 8px;
		padding: 10px 12px;
		background-color: var(--pv-surface);
		border: 1px solid var(--pv-line);
		border-radius: var(--pv-radius-card);
	}

	table#tableManualTOCListing tbody tr[data-toc-row="policy"] > td {
		display: block;
		padding: 0;
		background: none;
		border: 0;
	}

	table#tableManualTOCListing tbody tr[data-toc-row="policy"] > td.tocRowTitle {
		flex: 1;
		min-width: 0;
		font-weight: 600;
	}

	.tocRowText {
		max-width: calc(100% - 40px);
	}

	/* The pill alone carries the status on small screens. */
	table#tableManualTOCListing tbody tr[data-toc-row="policy"] .listingReadStatus {
		white-space: nowrap;
	}

	/* ⭐ #1945 mobile[4]. The deck's mobile row (`.m-row`, pane `p-mob`) is
	   three columns -- state disc, title, pill -- with no chevron at all; the
	   row itself is the tap target, so the chevron is a desktop affordance,
	   not information. Hiding it gives the title's `flex:1; min-width:0`
	   column back the width it was ceding to a fixed-width arrow that the
	   deck never draws. The tail `<td>` itself stays in the DOM -- it also
	   carries `.tocRowUpdated`, a screen-reader-only exact timestamp, and
	   removing the cell would remove that from the accessibility tree too. */
	table#tableManualTOCListing tbody tr[data-toc-row="policy"] .tocRowChevron {
		display: none;
	}

	/* The chevron's own width is reclaimed by hiding it, but the row's flex
	   `gap: 10px` still reserves a full gap ahead of the now-empty tail cell
	   (`.tocRowUpdated` is itself taken out of flow, `position: absolute`, so
	   the tail contributes nothing but that reserved gap) -- a flex item's
	   margin counts against its own outer size in the flexible-length
	   resolution, so pulling the tail back by exactly one gap-width hands the
	   rest of the promised space to the title's `flex:1` column instead of
	   leaving it stranded as dead space nobody draws into. */
	table#tableManualTOCListing tbody tr[data-toc-row="policy"] .tocRowTail {
		margin-inline-start: -10px;
	}

	table#tableManualTOCListing tbody tr[data-toc-row="policy"] .listingReadStatus strong {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* #1945 mobile[3]: the reference row keeps its pill, abbreviated, rather
	   than losing its status entirely — the full form and its "Reference —
	   no confirmation needed" meta line are simply too wide for a 375px card. */
	table#tableManualTOCListing .tocTextFull {
		display: none;
	}

	table#tableManualTOCListing .tocTextShort {
		display: inline;
	}

	/* #1945 mobile[5]: the status band's own full/short pair, same convention. */
	.tocStatusBand .tocTextFull {
		display: none;
	}

	.tocStatusBand .tocTextShort {
		display: inline;
	}

	/* #1945 mobile[5]: the meter's 220px desktop minimum left it a half-width,
	   off-centre block once it wrapped below the headline on a narrow band;
	   it now spans the row it wraps onto and the label stays end-aligned
	   above the track it describes. */
	.tocStatusBand .tocStatusMeter {
		min-inline-size: 0;
		inline-size: 100%;
		text-align: end;
	}

	table#tableManualTOCListing tbody tr[data-toc-row="section"] {
		display: block;
	}

	table#tableManualTOCListing tbody tr[data-toc-row="section"] > th {
		display: block;
		padding: 14px 4px 6px;
		background: none;
		border: 0;
	}

	table#tableManualTOCListing tbody tr[hidden] {
		display: none;
	}

	/* The confirm action stays reachable: the consent card docks to the
	   bottom of the viewport until the record exists. */
	main.policyDocumentRoot > article#articlePolicyDocument {
		overflow: visible;
	}

	main.policyDocumentRoot .policyDocHead {
		border-radius: 10px 10px 0 0;
	}

	form#formPolicyReadConfirmation.policyConsentCard {
		position: sticky;
		bottom: 0;
		z-index: 5;
		background: #FBFCFD;
		border-radius: 0 0 10px 10px;
		box-shadow: 0 -6px 18px rgba(23, 43, 58, 0.12);
	}

	form#formPolicyReadConfirmation.policyConsentCard[data-completed="1"] {
		position: static;
		background: linear-gradient(180deg, #F4FBF7, #EDF7F1);
		box-shadow: none;
	}
}

/* #1945: the deck's p-mob status band (fa30b105) omits the "X of Y read"
   label entirely at phone width, keeping just the track -- the count is
   already stated in the headline above it. It returns at wider widths. */
@media only screen and (max-width: 560px) {
	.tocStatusBand .tocStatusMeterLabel {
		display: none;
	}

	/* #1945: the deck's p-mob document header (fa30b105) omits the version
	   chip at phone width -- the "must read by"/"reference" chip and the
	   title carry the reading, and the version date returns at wider
	   widths where the header has room for it. `.policyDocChip--version`
	   appears nowhere else in the markup (main.xsl), so this is scoped to
	   the mobile document header only. */
	.policyDocChip--version {
		display: none;
	}
}

/* ==========================================================================
   Technical runs stay left-to-right
   --------------------------------------------------------------------------
   A ticket reference, a timestamp, a version string, an email address or a
   URL is not prose. Its characters have no strong direction of their own, so
   inside an RTL sentence the bidi algorithm reorders them and a reference
   reads back wrong — punctuation migrates to the far end, and a date can come
   out with its parts transposed.

   direction: ltr sets the run's own order; unicode-bidi: isolate keeps it from
   disturbing the sentence around it (and the sentence from disturbing it).
   Both are needed: direction alone still lets the run participate in the
   surrounding reordering.

   Layout is untouched — these rules say nothing about which side the element
   sits on, only which way its own characters run.

   Only elements whose whole content is the technical value belong here. An
   element that also carries its own label — "Date completed: <date>",
   "Generated: <date>" — must not be forced to ltr, because that would drag
   the translated label left-to-right with it. Those wrap the value in a bdi
   in the template instead, which isolates the date and leaves the sentence
   in the reading direction.
   ========================================================================== */

.accountTicketNumber,
.accountDetailValue--mono,
.accountTableTimestamp,
.loginBrand .loginBrandVersion,
.loginBrand .loginBrandBuild {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Detail values are isolated but keep their own direction: an email address
   or a phone number must not interleave with the row around it, while a
   display name or a job title still has to read in the user's language. */
.accountDetailValue {
	unicode-bidi: isolate;
}

/* ==========================================================================
   The footer, to the deck's anatomy
   --------------------------------------------------------------------------
   One row: the parent-organisation mark at the reading start, the provenance
   line naming the organisation and what powers it, then the legal links.
   ⭐ The link set is NOT the deck's. The deck draws three; the product carries
   five, and "Terms of use" and "Contact us" are legal routes — removing them
   from every page's footer would be a legal change dressed as a styling one,
   so the deck is followed on shape and not on which links exist.
   ========================================================================== */

/* ⭐ #1945: the deck (fa30b105, v35) draws the footer as a centred STACK at
   every width, not a row that only stacks below 900px -- powered-by line,
   links, copyright, then the "Part of {trust}" block with its mark, each
   centred in turn. The trust block renders only when the registry names a
   trust; an empty slot is hidden and the stack simply has one fewer row.
   ⭐ #1945 (coordinator follow-on to a438637a6): SiteHTMLShellComposer now builds the footer in this
   same order (manufacturer, nav, copyright, trust), so DOM/reading order and
   visual order agree -- no `order` property here reorders these elements.
   #2905 (owner, 10 Nov 2026) moved the trust block to sit directly under the
   powered-by line: the order is now manufacturer, trust, links, copyright. */
body > footer {
	flex-direction: column;
	align-items: center;
	row-gap: 10px;
	text-align: center;
}

body > footer #divParentLogo {
	justify-content: center;
	gap: 11px;
	min-height: 0;
	margin: 0;
	text-align: start;
}

body > footer #divParentLogo:empty {
	display: none;
}

/* The crest is capped both ways, so any aspect ratio sits in the slot. */
body > footer #divParentLogo img {
	max-width: 130px;
	max-height: 32px;
}

body > footer #pFooterTrustAffiliation {
	margin: 0;
	color: var(--pv-ink-3);
	font-size: 11px;
	line-height: 1.2;
	text-align: start;
}

body > footer #pFooterTrustAffiliation strong {
	display: block;
	color: var(--pv-ink-2);
	font-size: 12.5px;
	font-weight: 600;
}

body > footer #divManufacturer {
	/* #1945: explicit, replacing the legacy `.9em` rule removed from the
	   `@media (min-width: 768px)` "@group Footer" block above -- that `.9em`
	   was relative to the footer's own font-size (13px, itself only 12px
	   before this lane's other #1945 commit), so it put this line at 11.7px
	   on desktop while phones, where the legacy rule never applied, got 13px.
	   The muted colour below still carries the de-emphasis. */
	font-size: 13px;
	color: var(--pv-ink-3);
	text-align: center;
	margin: 0;
	width: auto;
}

body > footer > nav {
	width: auto;
	margin: 0;
}

body > footer > nav ul {
	justify-content: center;
	gap: 0 18px;
}

/* ⚠️ The legacy float footer's `body > footer nav ul li { margin-right: 3% }`
   (the @group Footer media block) out-specifies the flex footer's
   `body > footer nav li` reset. A percentage margin inside a shrink-to-fit
   row widened the nav, opened a gap after the organisation line and wrapped
   the last legal link. Same specificity, later in the file, so this wins. */
body > footer > nav ul li {
	margin: 0;
}

body > footer #divFooterCopyright {
	width: auto;
	margin: 0;
	text-align: center;
}

/* ==========================================================================
   Contextual-help launcher
   --------------------------------------------------------------------------
   ⭐ A <details>, so the disclosure works with no JavaScript and the browser
   owns the keyboard behaviour and the expanded state. The 44px minimum is the
   touch target the design brief asks for where a finger is expected.
   ========================================================================== */

.pvContextualHelp {
	position: fixed;
	inset-block-end: 18px;
	inset-inline-end: 22px;
	z-index: 40;
	max-inline-size: min(340px, calc(100vw - 44px));
	font-size: 0.85rem;
}

.pvContextualHelp .pvHelpLauncher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding-block: 9px;
	padding-inline: 16px;
	border: 1px solid var(--pv-line-strong);
	border-radius: var(--pv-radius-pill);
	background-color: var(--pv-surface);
	box-shadow: 0 4px 16px rgba(23, 43, 58, 0.16);
	color: var(--pv-ink-2);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: color var(--pv-dur) var(--pv-ease), border-color var(--pv-dur) var(--pv-ease);
}

/* Safari still paints a disclosure triangle without this, and the marker is
   not what this control means. */
.pvContextualHelp .pvHelpLauncher::-webkit-details-marker {
	display: none;
}

.pvContextualHelp .pvHelpLauncher:hover,
.pvContextualHelp .pvHelpLauncher:focus-visible {
	border-color: var(--pv-azure);
	color: var(--pv-action);
}

.pvContextualHelp .pvHelpMark {
	display: grid;
	place-items: center;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background-color: var(--pv-action);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
}

.pvContextualHelp .pvHelpPanel {
	margin-block-end: 10px;
	padding-block: 14px 16px;
	padding-inline: 18px;
	border: 1px solid var(--pv-line);
	border-radius: var(--pv-radius-card);
	background-color: var(--pv-surface);
	box-shadow: var(--pv-shadow-card), 0 8px 28px rgba(23, 43, 58, 0.14);
	color: var(--pv-ink-2);
	line-height: 1.5;
}

/* The panel opens upwards from a control pinned to the bottom of the viewport,
   so it is ordered before its own summary. */
.pvContextualHelp[open] {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
}

.pvContextualHelp .pvHelpPanel h2 {
	margin: 0 0 8px;
	color: var(--pv-ink);
	font-size: 0.95rem;
}

.pvContextualHelp .pvHelpBody {
	margin: 0 0 10px;
}

.pvContextualHelp .pvHelpSupport {
	margin: 0;
}

.pvContextualHelp .pvHelpSupport a {
	color: var(--pv-action);
	font-weight: 600;
}

@media only screen and (max-width: 900px) {
	.pvContextualHelp {
		inset-block-end: 12px;
		inset-inline-end: 12px;
	}
}

/* #1923. Measured: at 375px the full text pill's own width reaches into the
   content column (there is no side margin left to float in, unlike desktop),
   so it can sit on top of a genuine last line of text. Shrinking the closed
   control to the circular mark alone removes the footprint that was doing
   the overlapping; the label stays in the DOM for the accessible name.
   The circle is 44 by 44, the touch-target minimum the help plan sets (it was 40). */
@media only screen and (max-width: 560px) {
	.pvContextualHelp .pvHelpLauncher {
		gap: 0;
		padding: 0;
		width: 44px;
		height: 44px;
		min-block-size: 44px;
		justify-content: center;
	}

	.pvContextualHelp .pvHelpLabel {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* #2301 item 8. THE attachment field, for every tier that takes a file: drawn as
   the Support deck draws it (3725d581, "Attach screenshots or files"), a dashed
   drop field with the browser's chooser inside it. A file input already accepts a
   dropped file, so no script is needed. The chooser button is the quiet control
   the rest of the console uses instead of the platform default. Lives here, not in
   the support sheet, because the policy editor's PDF upload is the same field. */
input[type="file"].attachmentDropField {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0.6rem;
	background: var(--pv-paper, #F4F6F8);
	border: 1px dashed var(--pv-line-strong, #C9D3DB);
	border-radius: var(--pv-radius-control, 7px);
	color: var(--pv-ink-2, #51626E);
	font: inherit;
	font-size: 0.85rem;
}

input[type="file"].attachmentDropField::file-selector-button {
	margin-inline-end: 0.75rem;
	padding: 0.3rem 0.8rem;
	background: #FFFFFF;
	border: 1px solid var(--pv-line-strong, #C9D3DB);
	border-radius: var(--pv-radius-control, 7px);
	color: var(--pv-ink, #1F2D3A);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

input[type="file"].attachmentDropField::file-selector-button:hover {
	background: var(--pv-azure-t, #E5F2FA);
}

/*
 * THE ONE SEGMENTED CONTROL (Kevin, 11 Nov 2026, #2971): choose one of a few short options. A joined, bordered strip (the
 * Calendar | List shape), the selected option FILLED in the primary blue with white text, at the style-guide button height
 * (--pv-control-height, #2966). Real radio inputs underneath, so the arrow keys and the label come with the browser.
 *
 *   <div class="pvSegmented" role="radiogroup" aria-label="...">
 *     <label class="pvSegmentedOption"><input type="radio" name="n" value="v"><span>Text</span></label> ...
 *
 * Every "choose one" of that kind is drawn with these two classes and nothing else (SegmentedControlRatchetTest);
 * xsltlib/Segmented.xsl writes the markup for a stylesheet, and the Vue lists write it the same.
 */
.pvSegmented {
	display: inline-flex;
	flex-wrap: nowrap;
	/* The 1px gap shows this background as the line between options, in both directions when a phone wraps the strip. */
	gap: 1px;
	max-width: 100%;
	overflow: hidden;
	border: 1px solid var(--pv-line-strong, #C9D3DB);
	border-radius: var(--pv-radius-control, 8px);
	background: var(--pv-line-strong, #C9D3DB);
}

.pvSegmented .pvSegmentedOption {
	position: relative;
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--pv-control-height, 40px) - 2px);
	margin: 0;
	padding-block: 0;
	padding-inline: 1rem;
	color: var(--pv-ink, #1F2D3A);
	background: var(--pv-surface, #ffffff);
	font: inherit;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--pv-dur) var(--pv-ease), color var(--pv-dur) var(--pv-ease);
}

/* The radio stays in the accessibility tree and stays focusable; only its box is taken out of the layout. */
.pvSegmented input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pvSegmented .pvSegmentedOption:has(input:checked) {
	color: #ffffff;
	background: var(--pv-action, #186FAF);
}

.pvSegmented a.pvSegmentedOption {
	text-decoration: none;
}

/* A strip of LINKS (a period, a view that is its own address) is navigation, not a form: the current one is marked
   aria-current instead of checked, and is filled the same way. */
.pvSegmented .pvSegmentedOption[aria-current] {
	color: #ffffff;
	background: var(--pv-action, #186FAF);
}

.pvSegmented a.pvSegmentedOption:focus-visible {
	outline: 2px solid var(--pv-azure);
	outline-offset: -2px;
}

.pvSegmented .pvSegmentedOption:has(input:disabled) {
	cursor: default;
	opacity: 0.6;
}

.pvSegmented .pvSegmentedOption:has(input:focus-visible) {
	outline: 2px solid var(--pv-azure);
	outline-offset: -2px;
}

/* A count beside a label ("Open 3") is quieter than the label and shares its colour on the selected option. */
.pvSegmented .pvSegmentedOption b {
	margin-inline-start: 0.3rem;
	font-weight: 500;
	opacity: 0.85;
}

/* A phone has room for two or three short options on one row; more wrap into a second strip rather than being squeezed. */
@media (max-width: 480px) {
	.pvSegmented {
		flex-wrap: wrap;
	}

	.pvSegmented .pvSegmentedOption {
		flex: 1 1 auto;
	}
}

/*
 * #2348, #2791: the "Report this to support" button under an unexpected failure, drawn by
 * SiteFlashMessageRenderer. Spacing only: the signed-off mock takes the page's own button.
 */
form.failureReport {
	margin-block: 0 14px;
	margin-inline: 0;
}

/* The page reserves room under the fixed launcher so the last line, and the
   last column of a wide table, can always scroll clear of it (#1923, #1992). */
body:has(.pvContextualHelp) {
	padding-block-end: calc(44px + 32px);
}

/*
	#2946 (Kevin, 11 Nov 2026): one button label with a short form. At phone width
	"Send support request" wrapped onto three lines; below the phone breakpoint the
	button reads its short form instead. The full label is clipped, not removed, so
	it stays the button's accessible name; the short form carries aria-hidden.
*/
.buttonLabelShort {
	display: none;
}

@media only screen and (max-width: 560px) {
	.buttonLabelFull {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.buttonLabelShort {
		display: inline;
	}
}