/* ==========================================================================
   WMSNova Secure Intake — public gate, secure questionnaire, staff portal
   Brand: alisanacpa.com (webspi-business-first)

   Printed AFTER bootstrap.min.css and the theme's style.css because the
   plugin declares them as wp_enqueue_style dependencies. Everything below
   therefore wins on source order at equal specificity; !important is used
   only to answer an !important the theme already declared (each one is
   commented).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Palette taken from the theme stylesheet — no new hues invented. Values
   noted with a contrast ratio have been checked against WCAG AA (4.5:1).
   -------------------------------------------------------------------------- */
:root {
	--wms-ink:          #1D252C;  /* body text, masthead / footer navy   15.5:1 on white */
	--wms-blue:         #003449;  /* primary action + section banners    13.2:1 on white */
	--wms-blue-dark:    #0c213e;  /* primary action hover                16.1:1 on white */
	--wms-crimson:      #C41D4A;  /* hover / emphasis / focus ring        5.8:1 on white */
	--wms-orange:       #ff8c62;  /* accent rules only — 2.3:1, never text */
	--wms-tint:         #d5eef1;  /* pale blue: on-dark text, light fills */

	--wms-muted:        #48555F;  /* help + secondary text                7.7:1 on white */
	--wms-error:        #9E1B32;  /* darkened crimson for error text      7.9:1 on white */
	--wms-ok:           #14663A;  /* success text                         7.0:1 on white */
	--wms-warn:         #6F4E00;  /* "opened" badge text                  7.6:1 on white */

	--wms-surface:      #ffffff;
	--wms-surface-alt:  #F4F7F8;  /* neutral panel / ack / table head */
	--wms-surface-ok:   #F1F7F2;
	--wms-surface-err:  #FBF4F5;
	--wms-surface-warn: #FFF8E6;
	--wms-surface-info: #EAF3F5;

	--wms-rule:         #D9E0E2;  /* standard hairline (theme) */
	--wms-rule-soft:    #e8e8e8;  /* lighter hairline (theme) */
	--wms-rule-strong:  #AFBCC2;  /* input border — 2.4:1 vs white, meets non-text AA */

	--wms-gutter:       20px;
	--wms-focus:        3px;
}

/* --------------------------------------------------------------------------
   2. Page chrome corrections

   header#masthead is position:fixed, but the theme only compensates for it
   on the Subpage template. All three intake pages use the default template,
   so the page <h1> and the form sit underneath the header. The plugin adds a
   .wmsnova-intake-page body class (see wmsnova-secure-intake.php) so these
   corrections cannot leak to the other default-template pages.

   Offsets are the measured masthead height plus a few pixels; the strip they
   create shows body background, which is already #1D252C on this template,
   so it reads as part of the header. Ladder matches where the header's logo
   padding actually changes (450 / 768 / 992 / 1200), not guessed values.
   -------------------------------------------------------------------------- */
body.wmsnova-intake-page #content                       { margin-top: 88px; }   /* header 86px */
@media (min-width:  450px) { body.wmsnova-intake-page #content { margin-top: 106px; } } /* header 102px */
@media (min-width:  768px) { body.wmsnova-intake-page #content { margin-top: 108px; } } /* header 103px */
@media (min-width:  992px) { body.wmsnova-intake-page #content { margin-top: 118px; } } /* header 113px */
@media (min-width: 1200px) { body.wmsnova-intake-page #content { margin-top: 136px; } } /* header 133px */

/* The theme colours .page-template-default h1 white and leaves
   #page-title-section transparent, so on a white #primary the page title is
   invisible. Give the title its own navy band: it continues the fixed header,
   keeps the white heading legible, and frames the form as a document. */
body.wmsnova-intake-page #page-title-section {
	background: var(--wms-ink);
	border-bottom: 3px solid var(--wms-orange);
	/* Answers the theme's .container-fluid { padding: 0 !important }, which
	   #page-title-section carries. */
	padding-top: 6px !important;
	padding-bottom: 30px !important;
	text-align: center;
}
body.wmsnova-intake-page .webspi-page-title,
body.wmsnova-intake-page .webspi-custom-page-title {
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.15;
	letter-spacing: .5px;
	margin: 0;
}
@media (max-width: 767.98px) {
	body.wmsnova-intake-page .webspi-page-title,
	body.wmsnova-intake-page .webspi-custom-page-title { font-size: 1.9rem; }
	body.wmsnova-intake-page #page-title-section { padding-bottom: 22px !important; }
}

/* --------------------------------------------------------------------------
   3. Wrapper + base typography
   -------------------------------------------------------------------------- */
.wmsnova-wrap {
	box-sizing: border-box;
	max-width: 860px;
	margin: 0 auto;
	padding: 44px var(--wms-gutter) calc(72px + env(safe-area-inset-bottom, 0px));
	font-family: 'Avenir Next LT Pro', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wms-ink);
}
.wmsnova-wrap.wmsnova-portal { max-width: 1180px; }

/* Prose rhythm is scoped to the blocks that actually contain prose. A blanket
   `.wmsnova-wrap p` would be (0,1,1) and out-specify the single-class margin
   rules on .wmsnova-help, .wmsnova-error and .wmsnova-greeting further down. */
.wmsnova-intro p,        .wmsnova-intro ul,        .wmsnova-intro ol,
.wmsnova-notice-block p, .wmsnova-notice-block ul, .wmsnova-notice-block ol,
.wmsnova-ack-text p,     .wmsnova-ack-text ul,     .wmsnova-ack-text ol,
.wmsnova-success p,      .wmsnova-success ul,      .wmsnova-success ol,
.wmsnova-invalid p,      .wmsnova-invalid ul,      .wmsnova-invalid ol,
.wmsnova-portal-login p,
.wmsnova-wrap > p:not([class]) { margin: 0 0 1em; }

.wmsnova-intro ul,        .wmsnova-intro ol,
.wmsnova-notice-block ul, .wmsnova-notice-block ol,
.wmsnova-ack-text ul,     .wmsnova-ack-text ol,
.wmsnova-success ul,      .wmsnova-success ol,
.wmsnova-invalid ul,      .wmsnova-invalid ol { padding-left: 1.35em; list-style: disc; }

/* Prose links only. The :not() is load-bearing: a bare `.wmsnova-wrap a`
   is (0,1,1) and would out-specify the single-class .wmsnova-btn rules,
   painting link-shaped buttons blue-on-blue. */
.wmsnova-wrap a:not([class*="wmsnova-btn"]),
.wmsnova-wrap a:not([class*="wmsnova-btn"]):visited {
	color: var(--wms-blue);
	text-decoration: underline;
}
.wmsnova-wrap a:not([class*="wmsnova-btn"]):hover,
.wmsnova-wrap a:not([class*="wmsnova-btn"]):focus { color: var(--wms-crimson); }

/* The theme sizes default-template headings for marketing pages (h2 3rem +
   7rem top margin, h3 2.813rem) and re-asserts some of them with
   !important below 641px. Re-scope them for the plugin's own headings. */
.wmsnova-wrap h2,
.wmsnova-wrap h3,
.wmsnova-wrap h4 {
	font-family: 'Avenir Next LT Pro', sans-serif;
	letter-spacing: normal;
	color: var(--wms-ink);
}
.wmsnova-wrap.wmsnova-portal h2 {
	font-size: 1.9rem;
	margin: 0 0 22px;
}
.wmsnova-wrap h3 {
	font-size: 1.4rem;
	line-height: 1.3;
	margin: 0 0 12px;
}
.wmsnova-wrap h4 {
	font-size: 1.05rem;
	margin: 0 0 14px;
}
@media (max-width: 640.98px) {
	/* Answers .page-template-default h2/h3/h4 { font-size: … !important } */
	.wmsnova-wrap.wmsnova-portal h2 { font-size: 1.55rem !important; }
	.wmsnova-wrap h3 { font-size: 1.25rem !important; }
	.wmsnova-wrap h4 { font-size: 1rem !important; }
}

/* --------------------------------------------------------------------------
   4. Message panels
   One system for success / invalid / inline notice / portal sign-in / the
   bare-paragraph fallbacks ("temporarily unavailable", "no form configured").
   -------------------------------------------------------------------------- */
.wmsnova-success,
.wmsnova-invalid,
.wmsnova-portal-login,
.wmsnova-notice-block,
.wmsnova-wrap > p:not([class]) {
	box-sizing: border-box;
	background: var(--wms-surface-alt);
	border: 1px solid var(--wms-rule);
	border-left: 5px solid var(--wms-blue);
	border-radius: 0;
	padding: 26px 30px;
	margin: 0 0 26px;
}
.wmsnova-success { background: var(--wms-surface-ok);  border-left-color: var(--wms-ok); }
.wmsnova-invalid { background: var(--wms-surface-err); border-left-color: var(--wms-crimson); }

.wmsnova-success h3 { color: var(--wms-ok); }
.wmsnova-invalid h3 { color: var(--wms-error); }
.wmsnova-portal-login h3 { color: var(--wms-blue); }
.wmsnova-portal-login p:last-of-type { margin-bottom: 0; }
.wmsnova-portal-login .wmsnova-btn { margin-top: 6px; }

/* Schema "html" blocks sit between fields inside the questionnaire, so they
   are quieter than a page-level panel. (Was a gold left border.) */
.wmsnova-notice-block {
	font-size: .95rem;
	line-height: 1.55;
	padding: 16px 20px;
	margin: 0 0 24px;
}
.wmsnova-notice-block strong { color: var(--wms-blue); }

/* --------------------------------------------------------------------------
   5. Intro + invitation greeting
   -------------------------------------------------------------------------- */
.wmsnova-intro {
	max-width: 700px;
	margin: 0 auto 34px;
	color: var(--wms-ink);
}
.wmsnova-intro > :last-child { margin-bottom: 0; }
.wmsnova-success > :last-child,
.wmsnova-invalid > :last-child,
.wmsnova-notice-block > :last-child,
.wmsnova-portal-login > :last-child { margin-bottom: 0; }

.wmsnova-greeting {
	max-width: 700px;
	margin: 0 auto 26px;
	padding: 2px 0 2px 16px;
	border-left: 4px solid var(--wms-orange);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wms-blue);
}

/* --------------------------------------------------------------------------
   6. Form surfaces
   -------------------------------------------------------------------------- */
.wmsnova-form {
	box-sizing: border-box;
	background: var(--wms-surface);
	border: 1px solid var(--wms-rule);
	border-top: 4px solid var(--wms-blue);
	border-radius: 0;
	padding: 34px;
	box-shadow: 0 14px 34px -26px rgba(29, 37, 44, .55);
}
@media (max-width: 575.98px) {
	.wmsnova-form { padding: 24px 18px; }
}

/* The gate asks for three fields — keep it a narrow, centred card. */
.wmsnova-gate {
	max-width: 540px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   7. Section headings

   Two ranks. The seeded schema uses keys step1…step4 for the four "Step N
   of 4" milestones and descriptive keys for the nine sub-sections, so the
   milestone banner is selected on the key prefix. If those keys are ever
   renamed the banner simply falls back to the sub-section treatment below —
   nothing breaks.
   -------------------------------------------------------------------------- */
.wmsnova-section {
	margin: 48px 0 22px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wms-rule);
}
.wmsnova-section h3 {
	margin: 0;
	font-size: 1.3rem;
	color: var(--wms-blue);
}
.wmsnova-section .wmsnova-help {
	margin: 8px 0 0;
}
.wmsnova-main > .wmsnova-section:first-of-type { margin-top: 0; }

.wmsnova-section[data-key^="step"] {
	background: var(--wms-blue);
	border: 0;
	border-left: 6px solid var(--wms-orange);
	padding: 20px 24px;
	margin: 60px 0 28px;
}
.wmsnova-section[data-key^="step"] h3 {
	color: #fff;
	font-size: 1.45rem;
	letter-spacing: .3px;
}
.wmsnova-section[data-key^="step"] .wmsnova-help { color: var(--wms-tint); }
@media (max-width: 640.98px) {
	/* Answers .page-template-default h3 { font-size: 1.75rem !important } */
	.wmsnova-section h3 { font-size: 1.15rem !important; }
	.wmsnova-section[data-key^="step"] h3 { font-size: 1.25rem !important; }
	.wmsnova-section[data-key^="step"] { padding: 16px 18px; margin: 44px 0 24px; }
}

/* --------------------------------------------------------------------------
   8. Fields: labels, help, errors
   -------------------------------------------------------------------------- */
.wmsnova-field { margin: 0 0 24px; }
.wmsnova-field:last-child { margin-bottom: 0; }

/* :not(.wmsnova-choice) keeps radio/checkbox/acknowledgment labels at normal
   weight without needing !important. */
.wmsnova-field > label:not(.wmsnova-choice) {
	display: block;
	margin: 0 0 7px;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--wms-ink);
}
.wmsnova-choices legend {
	display: block;
	float: none;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0 0 6px;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--wms-ink);
}

/* The asterisk is a shape cue, not only a colour cue. */
.wmsnova-req {
	color: var(--wms-error);
	font-weight: 700;
	font-size: 1.1em;
}

.wmsnova-help {
	margin: 5px 0 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--wms-muted);
}
.wmsnova-field > label + .wmsnova-help,
.wmsnova-choices legend + .wmsnova-help { margin: 0 0 8px; }

/* Error text carries a filled "!" badge and a rule, so it is legible without
   relying on the red alone. */
.wmsnova-error {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 0;
	padding: 7px 10px;
	background: var(--wms-surface-err);
	border-left: 3px solid var(--wms-error);
	font-size: .9rem;
	font-weight: 700;
	color: var(--wms-error);
}
.wmsnova-error::before {
	content: "!";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--wms-error);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   9. Controls
   16px minimum font-size everywhere so iOS Safari does not zoom on focus.
   -------------------------------------------------------------------------- */
.wmsnova-field input[type="text"],
.wmsnova-field input[type="email"],
.wmsnova-field input[type="tel"],
.wmsnova-field input[type="date"],
.wmsnova-field input[type="number"],
.wmsnova-field select,
.wmsnova-field textarea,
.wmsnova-portal-toolbar input,
.wmsnova-portal-toolbar select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: var(--wms-surface);
	border: 1px solid var(--wms-rule-strong);
	border-radius: 0;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wms-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wmsnova-field textarea {
	min-height: 118px;
	line-height: 1.55;
	resize: vertical;
}
.wmsnova-field select,
.wmsnova-portal-toolbar select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	/* Chevron drawn with gradients so no image or font is loaded. */
	background-image:
		linear-gradient(45deg,  transparent 50%, var(--wms-blue) 50%),
		linear-gradient(135deg, var(--wms-blue) 50%, transparent 50%);
	background-position: right 20px center, right 14px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
/* iOS renders date inputs inconsistently without an explicit reset + height. */
.wmsnova-field input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-height: 48px;
}
.wmsnova-field input::placeholder,
.wmsnova-field textarea::placeholder { color: var(--wms-muted); opacity: 1; }

.wmsnova-field input:hover,
.wmsnova-field select:hover,
.wmsnova-field textarea:hover { border-color: var(--wms-blue); }

.wmsnova-field input:focus,
.wmsnova-field select:focus,
.wmsnova-field textarea:focus {
	border-color: var(--wms-ink);
	box-shadow: inset 0 0 0 1px var(--wms-ink);
}

/* Progressive enhancement: tint the control of a field that failed
   validation. Dropped whole in browsers without :has(), which only loses the
   tint — the inline .wmsnova-error message is the primary signal. */
.wmsnova-field:has(> .wmsnova-error) input,
.wmsnova-field:has(> .wmsnova-error) select,
.wmsnova-field:has(> .wmsnova-error) textarea {
	border-color: var(--wms-error);
	background: var(--wms-surface-err);
}

/* --------------------------------------------------------------------------
   10. Radio / checkbox rows
   Flex + wrap gives a ≥44px touch target and lets a trailing "please
   specify" input drop to its own line on narrow screens. Labels are
   wp_kses_post output and wrap their own <input>, so nothing is restructured.
   -------------------------------------------------------------------------- */
.wmsnova-choices {
	border: 0;
	padding: 0;
	margin: 0 0 24px;
	min-width: 0;
}
.wmsnova-choice {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px 10px;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px 10px 10px;
	border-bottom: 1px solid var(--wms-rule-soft);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}
.wmsnova-choice:first-of-type { border-top: 1px solid var(--wms-rule-soft); }
.wmsnova-choice:hover { background: var(--wms-surface-alt); }
.wmsnova-choice input[type="radio"],
.wmsnova-choice input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	accent-color: var(--wms-blue);
	cursor: pointer;
}
.wmsnova-choice input.wmsnova-specify {
	flex: 1 1 100%;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	min-height: 44px;
	margin: 4px 0 0;
	padding: 9px 12px;
	background: var(--wms-surface);
	border: 1px solid var(--wms-rule-strong);
	border-radius: 0;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wms-ink);
}
@media (min-width: 576px) {
	/* Wide enough to sit inline beside the option text. */
	.wmsnova-choice input.wmsnova-specify { flex: 0 1 300px; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   11. Acknowledgment + typed signature
   -------------------------------------------------------------------------- */
.wmsnova-ack { margin-bottom: 28px; }
.wmsnova-ack-text {
	background: var(--wms-surface-alt);
	border: 1px solid var(--wms-rule);
	border-left: 4px solid var(--wms-blue);
	border-radius: 0;
	padding: 20px 22px;
	margin: 0 0 12px;
	font-size: .95rem;
	line-height: 1.6;
}
.wmsnova-ack-text > :last-child { margin-bottom: 0; }
.wmsnova-ack .wmsnova-choice {
	border: 1px solid var(--wms-rule);
	border-top: 1px solid var(--wms-rule);
	background: var(--wms-surface);
	font-weight: 700;
}

.wmsnova-signature { margin-bottom: 30px; }
/* .wmsnova-field input[type="text"] above has the same specificity, so this
   wins purely on source order — no !important needed. */
.wmsnova-field input.wmsnova-sig-input {
	/* Segoe Script / Bradley Hand exist on almost no device; walk a stack
	   that covers Windows, macOS/iOS and Android before the generic. */
	font-family: "Segoe Script", "Bradley Hand", "Bradley Hand ITC",
	             "Brush Script MT", "Lucida Handwriting", "Apple Chancery",
	             "Snell Roundhand", "Comic Sans MS", cursive, sans-serif;
	font-size: 1.5rem;
	line-height: 1.3;
	min-height: 62px;
	padding: 10px 14px;
	background: #FCFCFA;
	border-bottom: 2px solid var(--wms-ink);
}

/* --------------------------------------------------------------------------
   12. Repeatable groups — nested sub-cards
   No display property is set on .wmsnova-repeat-instance: forms.js toggles
   its inline display and reads it back, so the cascade must stay out of it.
   -------------------------------------------------------------------------- */
.wmsnova-repeat {
	background: #FAFCFC;
	border: 1px solid var(--wms-rule);
	border-left: 4px solid var(--wms-tint);
	border-radius: 0;
	padding: 24px 24px 20px;
	margin: 0 0 30px;
}
.wmsnova-repeat-instance { padding: 0; }
.wmsnova-repeat-instance + .wmsnova-repeat-instance {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px dashed var(--wms-rule-strong);
}
.wmsnova-repeat-instance h4 {
	margin: 0 0 18px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wms-rule);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wms-blue);
}
.wmsnova-repeat .wmsnova-notice-block { background: var(--wms-surface); }
@media (max-width: 575.98px) {
	.wmsnova-repeat { padding: 18px 16px 16px; }
}

/* --------------------------------------------------------------------------
   13. Buttons — theme convention: square, uppercase, 700, letter-spacing .5px
   -------------------------------------------------------------------------- */
.wmsnova-btn,
.wmsnova-btn-sm,
.wmsnova-add-repeat,
.wmsnova-page {
	font-family: 'Avenir Next LT Pro', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.wmsnova-btn {
	display: inline-block;
	padding: 15px 32px;
	border: 2px solid var(--wms-blue);
	background: var(--wms-blue);
	color: #fff;
	font-size: 1rem;
	line-height: 1.2;
}
/* a:visited (0,1,1) in the theme would otherwise recolour link-buttons. */
.wmsnova-btn,
.wmsnova-btn:visited { color: #fff; }
.wmsnova-btn:hover,
.wmsnova-btn:focus {
	background: var(--wms-blue-dark);
	border-color: var(--wms-blue-dark);
	color: #fff;
}
.wmsnova-btn[disabled],
.wmsnova-btn:disabled { opacity: .55; cursor: default; }

.wmsnova-btn-submit {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 18px 32px;
	font-size: 1.05rem;
}

/* Deliberately quieter than the submit button. */
.wmsnova-add-repeat {
	display: inline-block;
	margin-top: 4px;
	padding: 11px 22px;
	background: transparent;
	border: 2px solid var(--wms-blue);
	color: var(--wms-blue);
	font-size: .85rem;
}
.wmsnova-add-repeat:hover,
.wmsnova-add-repeat:focus { background: var(--wms-blue); color: #fff; }

.wmsnova-btn-sm {
	display: inline-block;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--wms-blue);
	color: var(--wms-blue);
	font-size: .78rem;
	line-height: 1.3;
}
.wmsnova-btn-sm:visited { color: var(--wms-blue); }
.wmsnova-btn-sm:hover,
.wmsnova-btn-sm:focus { background: var(--wms-blue); color: #fff; }
.wmsnova-btn-danger { border-color: var(--wms-error); color: var(--wms-error); }
.wmsnova-btn-danger:visited { color: var(--wms-error); }
.wmsnova-btn-danger:hover,
.wmsnova-btn-danger:focus { background: var(--wms-error); border-color: var(--wms-error); color: #fff; }

.wmsnova-secure-note {
	margin-top: 14px;
	text-align: center;
	color: var(--wms-muted);
}

/* Cloudflare Turnstile widget (no styling of its own). */
.cf-turnstile { margin: 0 0 24px; min-height: 65px; }

/* --------------------------------------------------------------------------
   14. Honeypot — unchanged on purpose.
   Must stay off-screen, unfocusable and indistinguishable to a bot from the
   original rule. Never referenced by :focus-within or display:none.
   -------------------------------------------------------------------------- */
.wmsnova-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   15. Two-column field layout (wide viewports, questionnaire only)

   The grid container is .wmsnova-main; children become grid items without
   any display property being set on them, so forms.js can keep toggling
   inline display:none / '' on [data-showif] elements. Everything spans the
   full width by default and only short single controls opt into one column.
   :has() is a progressive enhancement — where it is unsupported the whole
   opt-in rule drops and every field stays full width, which is still correct.
   Repeat groups stay single-column: forms.js reads and writes
   .wmsnova-repeat-instance's inline display, so the cascade stays off it.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.wmsnova-form.wmsnova-main {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 30px;
		row-gap: 0;
		align-items: start;
	}
	.wmsnova-form.wmsnova-main > * { grid-column: 1 / -1; min-width: 0; }
	.wmsnova-form.wmsnova-main > .wmsnova-field:not(.wmsnova-signature):not(.wmsnova-ack):has(
		> input[type="text"], > input[type="email"], > input[type="tel"],
		> input[type="date"], > input[type="number"], > select
	) {
		grid-column: span 1;
	}
}

/* --------------------------------------------------------------------------
   16. Staff invitation portal
   -------------------------------------------------------------------------- */

/* Portal masthead: page heading on the left, account and Log out on the
   right. The heading keeps its own margin rules from section 3, so the flex
   container only zeroes the bottom margin it would otherwise double up. */
.wmsnova-portal-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 26px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--wms-rule);
}
.wmsnova-portal-head h2 { margin-bottom: 0; }

.wmsnova-portal-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: .88rem;
	color: var(--wms-muted);
}
.wmsnova-portal-who { line-height: 1.4; }
.wmsnova-portal-who strong { color: var(--wms-ink); }
.wmsnova-portal-idle-note { flex-basis: 100%; font-size: .82rem; }
@media (min-width: 768px) {
	.wmsnova-portal-account { text-align: right; justify-content: flex-end; }
	.wmsnova-portal-idle-note { flex-basis: auto; }
}
@media (max-width: 767.98px) {
	.wmsnova-portal-head { align-items: flex-start; }
	.wmsnova-portal-account { flex-basis: 100%; }
}

/* Idle warning, created by assets/js/idle.js only for staff accounts. Fixed to
   the bottom so it cannot be missed while scrolled inside the invite table,
   and above the theme's fixed masthead in the stacking order. */
.wmsnova-idle-bar {
	position: fixed;
	z-index: 9999;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 18px;
	box-sizing: border-box;
	padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	background: var(--wms-surface-warn);
	border-top: 3px solid var(--wms-orange);
	box-shadow: 0 -10px 30px -18px rgba(29, 37, 44, .6);
	font-family: 'Avenir Next LT Pro', sans-serif;
	font-size: .95rem;
	color: var(--wms-ink);
}
.wmsnova-idle-bar[hidden] { display: none; }
.wmsnova-idle-bar .wmsnova-idle-text { margin: 0; }
.wmsnova-idle-bar .wmsnova-idle-text strong { color: var(--wms-warn); }

.wmsnova-portal-create,
.wmsnova-portal-list {
	box-sizing: border-box;
	background: var(--wms-surface);
	border: 1px solid var(--wms-rule);
	border-top: 4px solid var(--wms-blue);
	border-radius: 0;
	padding: 28px 30px;
	margin-bottom: 28px;
	box-shadow: 0 14px 34px -26px rgba(29, 37, 44, .55);
}
.wmsnova-portal-create > h3,
.wmsnova-portal-toolbar h3 { color: var(--wms-blue); }
.wmsnova-portal-create > .wmsnova-help { margin: 0 0 20px; }

.wmsnova-portal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
}
.wmsnova-span2 { grid-column: span 2; }
@media (max-width: 640px) {
	.wmsnova-portal-grid { grid-template-columns: 1fr; }
	.wmsnova-span2 { grid-column: span 1; }
}
.wmsnova-portal-grid .wmsnova-field > label { font-size: .9rem; }

.wmsnova-portal-msg {
	display: inline-block;
	margin-left: 14px;
	font-weight: 700;
	font-size: .95rem;
}
.wmsnova-portal-msg.ok  { color: var(--wms-ok); }
.wmsnova-portal-msg.err { color: var(--wms-error); }

.wmsnova-portal-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--wms-rule);
}
.wmsnova-portal-toolbar h3 { margin: 0 auto 0 0; }
.wmsnova-portal-toolbar select,
.wmsnova-portal-toolbar input { width: auto; min-height: 44px; }
/* Keeps room for the chevron drawn in the shared select rule. */
.wmsnova-portal-toolbar select { padding: 9px 40px 9px 12px; }
.wmsnova-portal-toolbar input { padding: 9px 12px; min-width: 230px; }
@media (max-width: 575.98px) {
	.wmsnova-portal-toolbar h3 { flex: 1 1 100%; margin: 0; }
	.wmsnova-portal-toolbar select,
	.wmsnova-portal-toolbar input,
	.wmsnova-portal-toolbar .wmsnova-btn-sm { flex: 1 1 100%; min-width: 0; }
}

/* Table. Between the stacked breakpoint and the width at which all eight
   columns fit, the wrapper scrolls horizontally with a visible right-edge
   fade so the overflow is discoverable. */
#wmsnova-invite-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
@media (min-width: 641px) and (max-width: 1023.98px) {
	#wmsnova-invite-table {
		background:
			linear-gradient(to right, rgba(255,255,255,0) 55%, rgba(29,37,44,.13) 100%)
				right center / 30px 100% no-repeat,
			var(--wms-surface);
	}
}
#wmsnova-invite-table > p {
	margin: 0;
	padding: 20px 0;
	color: var(--wms-muted);
}
.wmsnova-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}
.wmsnova-table th,
.wmsnova-table td {
	text-align: left;
	padding: 12px 12px;
	border-bottom: 1px solid var(--wms-rule-soft);
	vertical-align: top;
}
.wmsnova-table th {
	background: var(--wms-surface-alt);
	border-bottom: 2px solid var(--wms-rule);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wms-blue);
	white-space: nowrap;
}
.wmsnova-table tbody tr:hover { background: #FBFDFD; }
/* Sent / Expires / By, per the fixed column order built in portal.js. Keeping
   the short values on one line leaves the Client and Form columns readable.
   Only while the table is still a table — below 641px it becomes cards. */
@media (min-width: 641px) {
	.wmsnova-table td:nth-child(5),
	.wmsnova-table td:nth-child(6),
	.wmsnova-table td:nth-child(7) { white-space: nowrap; }
}
.wmsnova-note { display: inline-block; margin-top: 3px; color: var(--wms-muted); font-size: .82rem; }
.wmsnova-actions { white-space: nowrap; }
.wmsnova-actions .wmsnova-btn-sm { margin: 0 4px 4px 0; }

/* Below 640px the table becomes stacked cards. Each cell is labelled from
   the data-label attribute added in portal.js. */
@media (max-width: 640px) {
	#wmsnova-invite-table { overflow-x: visible; background: none; }
	.wmsnova-table,
	.wmsnova-table tbody,
	.wmsnova-table tr,
	.wmsnova-table td { display: block; width: 100%; }
	.wmsnova-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.wmsnova-table tr {
		margin-bottom: 16px;
		padding: 4px 0;
		background: var(--wms-surface);
		border: 1px solid var(--wms-rule);
		border-left: 4px solid var(--wms-blue);
	}
	.wmsnova-table td {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 12px;
		padding: 9px 14px;
		border: 0;
		border-bottom: 1px solid #F0F3F4;
		word-break: break-word;
	}
	.wmsnova-table td:last-child { border-bottom: 0; }
	.wmsnova-table td::before {
		content: attr(data-label);
		flex: 0 0 88px;
		font-size: .72rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--wms-muted);
	}
	.wmsnova-table td.wmsnova-actions { white-space: normal; }
	/* A revoked or expired-past-resend invitation has no actions; don't leave a
	   labelled empty row on the card. */
	.wmsnova-table td.wmsnova-actions:empty { display: none; }
	.wmsnova-table tbody tr:hover { background: var(--wms-surface); }
}

.wmsnova-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 0;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.5;
}
.wmsnova-badge-sent      { background: var(--wms-surface-info); color: var(--wms-blue);  box-shadow: inset 0 0 0 1px rgba(0,52,73,.25); }
.wmsnova-badge-opened    { background: var(--wms-surface-warn); color: var(--wms-warn);  box-shadow: inset 0 0 0 1px rgba(111,78,0,.25); }
.wmsnova-badge-completed { background: var(--wms-surface-ok);   color: var(--wms-ok);    box-shadow: inset 0 0 0 1px rgba(20,102,58,.25); }
.wmsnova-badge-expired   { background: #F1F2F4;                 color: var(--wms-muted); box-shadow: inset 0 0 0 1px rgba(72,85,95,.25); }
.wmsnova-badge-revoked   { background: var(--wms-surface-err);   color: var(--wms-error); box-shadow: inset 0 0 0 1px rgba(158,27,50,.25); }

#wmsnova-invite-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 20px;
}
#wmsnova-invite-pager:empty { margin-top: 0; }
.wmsnova-page {
	min-width: 40px;
	min-height: 40px;
	padding: 8px 12px;
	background: var(--wms-surface);
	border: 1px solid var(--wms-rule-strong);
	color: var(--wms-blue);
	font-size: .85rem;
	text-align: center;
}
.wmsnova-page:hover { background: var(--wms-surface-alt); border-color: var(--wms-blue); }
.wmsnova-page.current {
	background: var(--wms-blue);
	border-color: var(--wms-blue);
	color: #fff;
	cursor: default;
}

/* --------------------------------------------------------------------------
   17. Focus states
   Always an outline, never removed. Crimson reads on white (5.8:1) and on
   the navy step banners; the offset keeps it clear of the control's border.
   -------------------------------------------------------------------------- */
.wmsnova-wrap a:focus-visible,
.wmsnova-wrap button:focus-visible,
.wmsnova-wrap input:focus-visible,
.wmsnova-wrap select:focus-visible,
.wmsnova-wrap textarea:focus-visible,
.wmsnova-wrap label:focus-visible,
.wmsnova-wrap [tabindex]:focus-visible {
	outline: var(--wms-focus) solid var(--wms-crimson);
	outline-offset: 2px;
}
/* Fallback for browsers without :focus-visible support. */
.wmsnova-wrap a:focus,
.wmsnova-wrap button:focus,
.wmsnova-wrap input:focus,
.wmsnova-wrap select:focus,
.wmsnova-wrap textarea:focus {
	outline: var(--wms-focus) solid var(--wms-crimson);
	outline-offset: 2px;
}
.wmsnova-choice:focus-within { background: var(--wms-surface-alt); }

/* --------------------------------------------------------------------------
   18. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wmsnova-wrap *,
	.wmsnova-wrap *::before,
	.wmsnova-wrap *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   19. Narrow-viewport tail
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	:root { --wms-gutter: 14px; }
	.wmsnova-form { padding: 20px 14px; }
	.wmsnova-success,
	.wmsnova-invalid,
	.wmsnova-portal-login,
	.wmsnova-wrap > p:not([class]) { padding: 20px 18px; }
	.wmsnova-portal-create,
	.wmsnova-portal-list { padding: 20px 16px; }
	.wmsnova-btn { padding: 14px 20px; font-size: .95rem; }
}