/*
 * Signed-in app shell (loaded by _Layout only, after site.css).
 * Page header band + filing stepper + lifted content cards + shared app
 * components. Tokens come from landing.css.
 */

/* ===================== Page header band ===================== */
.app-head {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(900px 380px at 88% -40%, rgba(42, 97, 132, 0.55), transparent 65%),
		radial-gradient(600px 300px at -5% 120%, rgba(228, 85, 63, 0.16), transparent 60%),
		var(--navy-900);
	color: rgba(255, 255, 255, 0.78);
	padding: 2.25rem 0 5.5rem;
}

/* Speed lines from the logo, fading in from the left like motion streaks */
.app-head::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 30px;
	width: 420px;
	height: 130px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='130' viewBox='0 0 420 130'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23e4553f' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23e4553f' stop-opacity='.45'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.22'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='60' y='14' width='340' height='7' rx='3.5' fill='url(%23c)'/%3E%3Crect x='170' y='45' width='160' height='5' rx='2.5' fill='url(%23w)'/%3E%3Crect x='20' y='74' width='350' height='7' rx='3.5' fill='url(%23w)'/%3E%3Crect x='230' y='105' width='80' height='5' rx='2.5' fill='url(%23c)'/%3E%3C/svg%3E") no-repeat;
	pointer-events: none;
}

@media (max-width: 900px) {
	.app-head::after { display: none; }
}

.app-head-inner {
	position: relative;
	z-index: 1;
	max-width: 1448px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	flex-wrap: wrap;
}

.app-head-text {
	min-width: 0;
	max-width: 820px;
}

.app-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #f59a88;
}

.app-eyebrow::before {
	content: "";
	width: 20px;
	height: 3px;
	border-radius: 2px;
	background: var(--coral-500);
}

body.app .app-title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: #fff !important;
	text-wrap: balance;
}

.app-subtitle {
	margin: 0.6rem 0 0;
	max-width: 70ch;
	font-size: 1.02rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}

.app-head-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* Buttons placed in the dark band */
body.app .app-head .btn-secondary,
body.app .app-head [class*="btn-outline-"],
body.app .app-head .bg-gradient-dark:not(.action-button) {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: #fff !important;
}

body.app .app-head .btn-secondary:hover,
body.app .app-head [class*="btn-outline-"]:hover,
body.app .app-head .bg-gradient-dark:not(.action-button):hover {
	background: rgba(255, 255, 255, 0.14) !important;
	border-color: #fff !important;
}

/* ===================== Filing stepper ===================== */
.app-head-steps {
	padding-bottom: 5.25rem;
}

.app-head-steps .app-head-inner + .app-head-inner {
	margin-top: 1.5rem;
}

.app-stepper ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.app-stepper li {
	position: relative;
	display: flex;
	align-items: center;
}

.app-stepper li + li::before {
	content: "";
	width: 18px;
	height: 1px;
	margin-right: 0.5rem;
	background: rgba(255, 255, 255, 0.25);
}

.app-stepper a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.85rem 0.35rem 0.4rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.app-stepper a:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff !important;
}

.app-step-num {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

.app-stepper li.current a {
	background: #fff;
	border-color: #fff;
	color: var(--navy-900) !important;
}

.app-stepper li.current .app-step-num {
	background: var(--coral-600);
	color: #fff;
}

/* Path so far: the connectors leading up to the current step turn coral,
   and the current step gets a soft halo. */
.app-stepper li + li::before {
	transition: background-color 0.2s ease;
}

.app-stepper li.before + li::before {
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(228, 85, 63, 0.55), var(--coral-500));
}

.app-stepper li.before a {
	border-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.9) !important;
}

.app-stepper li.before .app-step-num {
	background: rgba(228, 85, 63, 0.28);
}

.app-stepper li.current a {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.45);
}

/* Hovering a step swaps its number for the step's icon. */
.app-step-num {
	position: relative;
	overflow: hidden;
}

.app-step-digit,
.app-step-icon {
	grid-area: 1 / 1;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-step-num .app-step-icon {
	font-size: 15px;
	opacity: 0;
	transform: translateY(8px);
}

.app-stepper a:hover .app-step-digit,
.app-stepper a:focus-visible .app-step-digit {
	opacity: 0;
	transform: translateY(-8px);
}

.app-stepper a:hover .app-step-icon,
.app-stepper a:focus-visible .app-step-icon {
	opacity: 1;
	transform: none;
}

/* Phones: keep the steps on one swipeable row instead of wrapping. */
@media (max-width: 767.98px) {
	.app-stepper {
		margin: 0 -24px;
		padding: 0 24px 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.app-stepper::-webkit-scrollbar { display: none; }

	.app-stepper ol { flex-wrap: nowrap; }

	.app-stepper a { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	.app-step-digit,
	.app-step-icon { transition: none; }
}

/* ===================== Content overlapping the band ===================== */
body.app .app-main {
	position: relative;
	z-index: 2;
	margin-top: -4rem;
	padding-top: 0;
	background: transparent;
}

/* The z-index above makes .app-main its own stacking context, which would trap
   any Bootstrap modal inside it underneath the backdrop Bootstrap appends to
   <body> (the modal shows but can't be clicked). While a modal is open, drop
   it so modals stack above their backdrop. */
body.app.modal-open .app-main {
	z-index: auto;
}

body.app .app-main .landing-content-wrapper {
	max-width: 1448px;
	padding: 0 24px 3rem;
}

/* The first card on a page starts right at the band edge. */
body.app .app-main .landing-content-wrapper > .row:first-child > [class*="col"] > .card:first-child,
body.app .app-main .landing-content-wrapper > .card:first-child {
	margin-top: 0 !important;
}

/* ===================== Cards ===================== */
body.app .app-main .card {
	border: 1px solid rgba(15, 42, 60, 0.06);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(15, 42, 60, 0.05), 0 12px 32px -18px rgba(15, 42, 60, 0.28);
}

/* Cards nested in a page card are flatter. */
body.app .app-main .card .card {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: none;
}

body.app .app-main .card-body {
	padding: 1.5rem;
}

@media (min-width: 992px) {
	body.app .app-main > .landing-content-wrapper > .row > [class*="col"] > .card > .card-body {
		padding: 1.75rem 2rem 2rem;
	}
}

/* Card header with an icon badge (used by .app-card-title). */
.app-card-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--navy-900);
}

.app-card-title .material-icons,
.app-card-title .material-icons-round {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--navy-50);
	color: var(--navy-700) !important;
	font-size: 20px;
}

/* ===================== Empty states ===================== */
.app-empty {
	max-width: 620px;
	margin: 1.5rem auto;
	padding: 2rem 1rem 1.5rem;
	text-align: center;
	color: var(--muted);
}

.app-empty-icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	background: var(--navy-50);
	color: var(--navy-700);
	box-shadow: 0 0 0 10px rgba(31, 77, 105, 0.05);
}

.app-empty-icon .material-icons-round,
.app-empty-icon .material-icons {
	font-size: 30px;
}

body.app .app-empty h2,
body.app .app-empty h3 {
	margin: 0 0 0.5rem;
	font-family: var(--font-serif);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--navy-900);
}

.app-empty p {
	margin: 0 0 0.5rem;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--muted);
}

.app-empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

/* ===================== Toolbars ===================== */
/* The action row at the top of list pages. */
body.app .app-main .card-body > .d-flex.flex-wrap:first-child {
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem !important;
	border-bottom: 1px solid var(--line);
}

/* ===================== Small screens ===================== */
@media (max-width: 767px) {
	.app-head {
		padding: 1.75rem 0 4.5rem;
	}

	.app-head::after {
		display: none;
	}

	.app-head-inner,
	body.app .app-main .landing-content-wrapper {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.app .app-main {
		margin-top: -3rem;
	}

	.app-stepper li + li::before {
		display: none;
	}

	.app-step-label {
		font-size: 0.8rem;
	}

	body.app .app-main .card-body {
		padding: 1.1rem;
	}
}

/* ===================== Section-card pages ===================== */
/* When a page card only wraps other cards (Profile, Checkout, filer and
   recipient editors...), drop the outer frame so the section cards
   themselves sit on the page as lifted cards. */
body.app .app-main > .landing-content-wrapper > .row > [class*="col"] > .card:has(> .card-body > form > .card, > .card-body > .row > [class*="col"] > .card) {
	background: transparent;
	border: none;
	box-shadow: none;
}

body.app .app-main > .landing-content-wrapper > .row > [class*="col"] > .card:has(> .card-body > form > .card, > .card-body > .row > [class*="col"] > .card) > .card-body {
	padding: 0 !important;
}

body.app .app-main > .landing-content-wrapper > .row > [class*="col"] > .card:has(> .card-body > form > .card, > .card-body > .row > [class*="col"] > .card) .card {
	border: 1px solid rgba(15, 42, 60, 0.06);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(15, 42, 60, 0.05), 0 12px 32px -18px rgba(15, 42, 60, 0.28);
	margin-bottom: 1.25rem;
}

body.app .app-main > .landing-content-wrapper > .row > [class*="col"] > .card:has(> .card-body > form > .card, > .card-body > .row > [class*="col"] > .card) .card .card {
	box-shadow: none;
	border: 1px solid var(--line);
}

/* Dropdown caret: Material's uses an icon-font glyph that isn't loaded. */
body.app .dropdown-toggle::after {
	content: "" !important;
	display: inline-block;
	margin-left: 0.4rem;
	vertical-align: 0.15em;
	border-top: 0.32em solid;
	border-right: 0.32em solid transparent;
	border-left: 0.32em solid transparent;
	border-bottom: 0;
	font-family: inherit !important;
}

/* Import mapping: headings inside the dark column-headers panel stay white. */
.column-headers-container .column-headers-title,
.column-headers-container .column-headers-title i {
	color: #fff !important;
}

/* Pages wrapped in Bootstrap's container-fluid (Credits) align with the rest. */
body.app .app-main .landing-content-wrapper > .container-fluid {
	padding: 0 !important;
}

/* Dark highlight cards keep a faint edge where they overlap the navy band. */
body.app .app-main .card.bg-gradient-primary,
body.app .app-main .card.bg-gradient-dark {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 36px -18px rgba(11, 30, 43, 0.6) !important;
}

/* One-line "how this page works" hint above a list. */
.app-hint {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--muted);
}

.app-hint .material-icons-round {
	flex-shrink: 0;
	font-size: 18px;
	color: var(--amber-600);
	margin-top: 1px;
}

/* ===================== Settings-style form pages =====================
   Used by the profile, filer and recipient add/edit and payment screens:
   each .app-section is a card with a title/description on the left and a
   12-column field grid on the right; actions sit in a sticky bar. */
.app-form-page {
	display: grid;
	gap: 1.25rem;
	margin: 1.5rem 0 2rem;
}

.app-section {
	display: grid;
	grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
	gap: 2.25rem;
	padding: 1.75rem 2rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -16px rgba(15, 42, 60, 0.18);
}

.app-section-head h2 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.4rem;
	font-family: var(--font-sans);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--navy-900);
}

.app-section-head h2 .material-icons-round {
	font-size: 20px;
	color: var(--coral-600);
}

.app-section-head p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--muted);
}

.app-section-head .btn {
	margin-top: 1rem;
}

.app-fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 1rem;
	row-gap: 0.35rem;
	align-content: start;
}

.app-fields > * {
	grid-column: span 12;
	min-width: 0;
}

.app-fields > .f-3 { grid-column: span 3; }
.app-fields > .f-4 { grid-column: span 4; }
.app-fields > .f-5 { grid-column: span 5; }
.app-fields > .f-6 { grid-column: span 6; }
.app-fields > .f-7 { grid-column: span 7; }
.app-fields > .f-8 { grid-column: span 8; }

.app-fields .form-group {
	margin-bottom: 0;
}

.app-fields .border-lable-flt {
	width: 100%;
}

.app-fields .border-lable-flt .form-select {
	margin-bottom: 1rem !important;
}

.app-field-note {
	margin: -0.25rem 0 0.75rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--muted);
}

.app-switch-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
}

/* Page + action column: sections on the left, Save/Back in their own column on
   the right that stays in view while scrolling but never covers a field. */
.app-form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: 1.25rem;
	align-items: start;
	margin: 1.5rem 0 2rem;
}

.app-form-main {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

.app-form-main > form {
	display: grid;
	gap: 1.25rem;
	margin: 0;
}

.app-form-aside {
	position: sticky;
	top: calc(var(--header-h) + 1rem);
}

.app-form-actions {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.25rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -16px rgba(15, 42, 60, 0.18);
}

.app-form-actions .btn {
	width: 100%;
	margin: 0;
	justify-content: center;
}

.app-form-actions .app-form-actions-note {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--muted);
}

.app-form-actions-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--navy-900);
}

@media (max-width: 991.98px) {
	.app-form-layout {
		grid-template-columns: 1fr;
	}

	.app-form-aside {
		position: static;
	}
}

/* ===================== Validation messages (signed-in pages) ===================== */
body.app .validation-summary-valid {
	display: none;
}

body.app .validation-summary-errors {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1rem 1.25rem;
	background: var(--white);
	border: 1px solid #f3c2b9;
	border-left: 4px solid var(--coral-600);
	border-radius: 14px;
	box-shadow: 0 10px 28px -16px rgba(15, 42, 60, 0.25);
	color: var(--ink);
	font-size: 0.9rem;
}

body.app .validation-summary-errors::before {
	content: "error_outline";
	font-family: "Material Icons Round";
	font-size: 22px;
	line-height: 1;
	color: var(--coral-600);
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
}

body.app .validation-summary-errors ul {
	margin: 0;
	padding-left: 1.1rem;
}

body.app .validation-summary-errors ul::before {
	content: "Please fix the following:";
	display: block;
	margin: 0 0 0.35rem -1.1rem;
	font-weight: 700;
	color: var(--navy-900);
}

body.app .validation-summary-errors li {
	margin: 0.15rem 0;
	color: var(--coral-700);
}

body.app .field-validation-error {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--coral-700) !important;
}

body.app .field-validation-error::before {
	content: "error";
	font-family: "Material Icons Round";
	font-size: 15px;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
}

body.app .form-group:has(.field-validation-error) .form-control,
body.app .form-group:has(.field-validation-error) .form-select,
body.app .input-validation-error,
body.app .input-validation-error:focus {
	border-color: var(--coral-600) !important;
	box-shadow: 0 0 0 3px rgba(228, 85, 63, 0.12) !important;
}

/* Inline success/error notice inside a section */
.app-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.7rem 1rem;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 500;
}

.app-notice .material-icons-round {
	font-size: 20px;
}

.app-notice-success {
	background: var(--green-100);
	color: var(--green-700);
}

.app-notice-error {
	background: var(--coral-100);
	color: var(--coral-700);
}

@media (max-width: 991.98px) {
	.app-section {
		grid-template-columns: 1fr;
		gap: 1.1rem;
		padding: 1.35rem 1.25rem;
	}

	.app-fields > [class*="f-"] {
		grid-column: span 12;
	}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.app-fields > .f-3,
	.app-fields > .f-4,
	.app-fields > .f-5,
	.app-fields > .f-6 {
		grid-column: span 6;
	}
}

/* ===================== Payment card ===================== */
.pay-card {
	position: relative;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 1.586;
	padding: 1.35rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #fff;
	border-radius: 18px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(228, 85, 63, 0.35) 0%, rgba(228, 85, 63, 0) 55%),
		linear-gradient(135deg, var(--navy-950) 0%, var(--navy-700) 100%);
	box-shadow: 0 18px 40px -18px rgba(8, 24, 38, 0.65);
}

.pay-card::after {
	content: "";
	position: absolute;
	inset: auto -30% -55% auto;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.pay-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pay-card-chip {
	width: 42px;
	height: 32px;
	border-radius: 7px;
	background: linear-gradient(135deg, #f3d28b 0%, #c79a3e 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.pay-card-brand {
	height: 30px;
	width: auto;
	padding: 4px 8px;
	background: #fff;
	border-radius: 6px;
}

.pay-card-number {
	font-family: var(--font-mono), "Courier New", monospace;
	font-size: 1.3rem;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.pay-card-meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.pay-card-meta small {
	display: block;
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.7;
}

.pay-card-meta strong {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 220px;
}

.pay-secure-note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.85rem;
	font-size: 0.8rem;
	color: var(--muted);
}

.pay-secure-note .material-icons-round {
	font-size: 16px;
	color: var(--green-600);
}

/* Import review log: rows that need action stand out */
.import-log {
	max-height: 520px;
	overflow: auto;
	padding: 0.75rem 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	font-family: var(--font-mono), "Courier New", monospace;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--ink);
}

.import-log-line {
	padding: 0.1rem 1rem;
	border-left: 3px solid transparent;
	white-space: pre-wrap;
	word-break: break-word;
}

.import-log-line.is-rejected {
	background: var(--coral-100);
	border-left-color: var(--coral-600);
	color: var(--coral-700);
}

.import-log-line.is-error {
	background: #fdf1dc;
	border-left-color: var(--amber-600);
	color: #8a5a00;
}

.import-log-line.is-warning {
	background: var(--amber-100);
	border-left-color: #e6c46a;
}

/* A hint shown as its own card (e.g. where it would otherwise sit on the header band) */
.app-hint.app-hint-card {
	padding: 1rem 1.25rem;
	/* Same amber tint as every other tip, kept opaque so it reads cleanly over the header band */
	background: linear-gradient(90deg, #fdf7e9, #fffdf8);
	border: 1px solid #f1e4c4;
	border-radius: 14px;
	box-shadow: 0 10px 28px -16px rgba(15, 42, 60, 0.25);
}

/* ===================== Empty states: a framed slot waiting to be filled ===================== */
.app-empty {
	max-width: 680px;
	padding: 2.5rem 1.5rem 2rem;
	border: 1.5px dashed var(--line-strong);
	border-radius: 20px;
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(42, 97, 132, 0.07), transparent 70%),
		var(--white);
	animation: app-empty-in 0.4s ease both;
}

.app-empty-icon {
	position: relative;
	width: 72px;
	height: 72px;
	background: linear-gradient(145deg, var(--white), var(--navy-50));
	box-shadow:
		0 0 0 10px rgba(31, 77, 105, 0.05),
		0 0 0 20px rgba(31, 77, 105, 0.03),
		0 10px 24px -10px rgba(15, 42, 60, 0.35);
	animation: app-empty-float 4s ease-in-out infinite;
}

.app-empty-icon .material-icons-round,
.app-empty-icon .material-icons {
	font-size: 32px;
}

body.app .app-empty h2,
body.app .app-empty h3 {
	margin-top: 1.4rem;
}

@keyframes app-empty-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes app-empty-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
	.app-empty,
	.app-empty-icon { animation: none; }
}

/* ===================== On/off switches: switch and label side by side in a pill ===================== */
body.app .app-switch-row {
	gap: 0.6rem;
}

body.app .app-switch-row .form-check.form-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 0;
	margin: 0;
	padding: 0.45rem 0.95rem 0.45rem 0.55rem !important;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

body.app .app-switch-row .form-check.form-switch:hover {
	border-color: var(--navy-600);
}

body.app .app-switch-row .form-check.form-switch:has(.form-check-input:checked) {
	border-color: var(--navy-600);
	background: var(--navy-50);
}

body.app .app-switch-row .form-check.form-switch:has(.form-check-input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(42, 97, 132, 0.2);
}

body.app .app-switch-row .form-check-input {
	float: none;
	flex-shrink: 0;
	margin: 0 !important;
	cursor: pointer;
}

body.app .app-switch-row .form-check-label {
	width: auto !important;
	margin: 0 !important;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink) !important;
	cursor: pointer;
}

/* ===================== The section you're working in lights up ===================== */
.app-section {
	position: relative;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-section::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 18px;
	bottom: 18px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--navy-600);
	opacity: 0;
	transform: scaleY(0.4);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-section:focus-within {
	border-color: var(--navy-100);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 36px -18px rgba(15, 42, 60, 0.35);
}

.app-section:focus-within::before {
	opacity: 1;
	transform: none;
}

.app-section-head h2 .material-icons-round {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.app-section:focus-within .app-section-head h2 .material-icons-round {
	background: var(--navy-700);
	color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
	.app-section,
	.app-section::before,
	.app-section-head h2 .material-icons-round { transition: none; }
}

/* ===================== Tips: a soft callout instead of loose text ===================== */
.app-hint {
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1rem 0.75rem 0.85rem;
	border: 1px solid #f1e4c4;
	border-radius: 14px;
	background: linear-gradient(90deg, #fdf7e9, #fffdf8);
	color: var(--ink-soft);
}

.app-hint .material-icons-round {
	display: grid;
	place-items: center;
	align-self: flex-start;
	width: 30px;
	height: 30px;
	margin-top: 0;
	border-radius: 50%;
	background: var(--amber-100);
	color: var(--amber-600);
	font-size: 18px;
}

.app-hint strong {
	color: var(--ink);
}

/* ===================== Phones: list toolbars become an even two-column grid ===================== */
@media (max-width: 575.98px) {
	body.app .app-main .card-body > .d-flex.flex-wrap:first-child {
		gap: 0.5rem !important;
	}

	body.app .app-main .card-body > .d-flex.flex-wrap:first-child > .btn,
	body.app .app-main .card-body > .d-flex.flex-wrap:first-child > div > .btn {
		flex: 1 1 calc(50% - 0.5rem);
		justify-content: center;
		min-height: 2.75rem;
		margin: 0 !important;
		white-space: nowrap;
	}

	body.app .app-main .card-body > .d-flex.flex-wrap:first-child > div {
		flex: 1 1 100%;
		margin-left: 0 !important;
	}
}

/* ===================== Narrow screens: Save / Back pinned to the bottom while editing ===================== */
@media (max-width: 991.98px) {
	.app-form-aside {
		position: sticky;
		bottom: 0;
		z-index: 20;
		padding-bottom: 0.75rem;
	}

	.app-form-actions {
		flex-direction: row;
		align-items: center;
		gap: 0.6rem;
		padding: 0.7rem;
		border-radius: 16px;
		box-shadow: 0 -2px 6px rgba(15, 42, 60, 0.05), 0 14px 36px -10px rgba(15, 42, 60, 0.45);
	}

	.app-form-actions .app-form-actions-title,
	.app-form-actions > p:not(.app-form-actions-title) {
		display: none;
	}

	.app-form-actions .btn {
		flex: 1 1 0;
		width: auto;
		min-height: 2.9rem;
		white-space: nowrap;
	}

	/* Keep the primary Save first and widest. */
	.app-form-actions > [type="submit"] {
		flex-grow: 1.4;
	}
}

@media (max-width: 575.98px) {
	/* A picker in the list toolbar (e.g. Filer on Recipients) fills its row. */
	body.app .app-main .card-body > .d-flex.flex-wrap:first-child > div > .form-select {
		flex: 1 1 auto;
		width: auto !important;
		min-height: 2.75rem;
	}

	/* Bigger checkboxes so rows are easy to tick with a thumb. */
	body.app .app-table .app-table-check input[type="checkbox"],
	body.app .modern-table input.PDFSelect,
	body.app .modern-table #selectAllPDF {
		width: 1.35rem;
		height: 1.35rem;
	}
}

/* ===================== Phones: a slimmer page header so content starts higher ===================== */
@media (max-width: 575.98px) {
	.app-head {
		padding: 1.15rem 0 3.75rem;
	}

	.app-head-steps {
		padding-bottom: 4rem;
	}

	.app-head .app-eyebrow {
		margin-bottom: 0.35rem;
	}

	body.app .app-head .app-title {
		font-size: 1.6rem;
		line-height: 1.15;
	}

	.app-head .app-subtitle {
		margin-top: 0.35rem;
		font-size: 0.92rem;
		line-height: 1.45;
	}

	.app-head-steps .app-head-inner + .app-head-inner {
		margin-top: 0.9rem;
	}

	.app-stepper a {
		padding-top: 0.28rem;
		padding-bottom: 0.28rem;
	}
}

@media (max-width: 991.98px) {
	/* Grid columns may shrink to the screen; without this a wide child (e.g. the 2FA QR row) pushes the page sideways. */
	.app-form-main,
	.app-form-aside {
		min-width: 0;
	}

	/* The floating bar holds just the buttons; its notes are hidden whatever tag they use. */
	.app-form-actions .app-form-actions-note {
		display: none;
	}

	/* Long button labels (e.g. Enable Two-Factor Authentication) wrap instead of being cut off. */
	.app-form-actions .btn {
		white-space: normal;
		line-height: 1.2;
	}
}

/* ===================== Phones: long tips show three lines until tapped ===================== */
@media (max-width: 575.98px) {
	.app-hint > .material-icons-round + span {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.app-hint.is-clamped {
		position: relative;
		cursor: pointer;
		padding-bottom: 1.5rem;
	}

	.app-hint.is-clamped::after {
		content: "expand_more";
		position: absolute;
		left: 50%;
		bottom: 0.15rem;
		transform: translateX(-50%);
		font-family: "Material Icons Round";
		font-size: 20px;
		color: var(--amber-600);
		-webkit-font-feature-settings: "liga";
		font-feature-settings: "liga";
		transition: transform 0.2s ease;
	}

	.app-hint.is-open > .material-icons-round + span {
		-webkit-line-clamp: unset;
		overflow: visible;
	}

	.app-hint.is-open::after {
		transform: translateX(-50%) rotate(180deg);
	}
}

/* ===================== Long edit pages: section list under the Save panel ===================== */
.app-section {
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

.app-form-toc {
	margin-top: 1rem;
	padding: 0 0.25rem;
}

.app-form-toc ol {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A thin rail that the current item's marker sits on */
.app-form-toc ol::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 1.05rem;
	width: 2px;
	border-radius: 2px;
	background: var(--line);
}

.app-form-toc a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.6rem 0.4rem 0.35rem;
	border-radius: 10px;
	color: var(--muted);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.app-form-toc a .material-icons-round {
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: 1.45rem;
	height: 1.45rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.85rem;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-form-toc a:hover {
	background: rgba(22, 58, 80, 0.05);
	color: var(--navy-800);
}

.app-form-toc a.is-current {
	color: var(--navy-900);
}

.app-form-toc a.is-current .material-icons-round {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(42, 97, 132, 0.12);
}

/* A section with an error gets a coral dot */
.app-form-toc a.has-error::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-left: auto;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--coral-500);
	box-shadow: 0 0 0 3px rgba(228, 85, 63, 0.15);
}

.app-form-toc a.has-error .material-icons-round {
	border-color: var(--coral-500);
}

/* Narrow screens have no side column, so the list isn't shown */
@media (max-width: 991.98px) {
	.app-form-toc { display: none; }
}

/* Short windows: keep the Save panel in view and drop the list rather than push it off-screen */
@media (max-height: 640px) {
	.app-form-toc { display: none; }
}

/* ===================== Account: two-factor status ===================== */
body.app .security-status {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	--tone: var(--amber-600);
	--tone-bg: var(--amber-100);
}

body.app .security-status.is-on {
	--tone: var(--green-600);
	--tone-bg: var(--green-100);
}

body.app .security-status-icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--tone-bg);
	color: var(--tone);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone-bg) 45%, transparent);
}

body.app .security-status-icon .material-icons-round {
	font-size: 22px;
}

body.app .security-status .security-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	background: var(--tone-bg) !important;
	color: var(--tone) !important;
	vertical-align: 0.1em;
}

body.app .security-status .security-badge .material-icons-round {
	font-size: 0.85rem;
}

/* ===================== Instant settings: a "saved" chip beside the switch that fades away ===================== */
body.app .app-saved-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.7rem 0.3rem 0.45rem;
	border-radius: 999px;
	background: var(--green-100);
	color: var(--green-700);
	font-size: 0.8rem;
	font-weight: 700;
	animation: saved-chip 4.5s ease forwards;
}

body.app .app-saved-chip .material-icons-round {
	font-size: 1rem;
}

@keyframes saved-chip {
	0% { opacity: 0; transform: translateX(-6px) scale(0.92); }
	8% { opacity: 1; transform: none; }
	85% { opacity: 1; }
	100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	body.app .app-saved-chip { animation: none; }
}

/* The free W-9 count as a small navy badge */
body.app .w9-free-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--navy-800);
	color: #fff;
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	vertical-align: 0.05em;
}

/* ===================== Tables: recipient initials avatar (neutral tones, so no colour reads as a status) ===================== */
body.app .recipient-cell {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
}

body.app .recipient-avatar {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: 50%;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.app .recipient-avatar.tone-0 { background: var(--navy-100); color: var(--navy-800); }
body.app .recipient-avatar.tone-1 { background: #e4e9f4; color: #3b4f7d; }
body.app .recipient-avatar.tone-2 { background: #dff0ee; color: #1f6461; }
body.app .recipient-avatar.tone-3 { background: var(--paper-deep); color: var(--ink-soft); }

body.app tr:hover .recipient-avatar {
	transform: scale(1.06);
	box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--line-strong);
}

/* Form year in a lighter weight so the form type leads */
body.app .form-year {
	font-weight: 500;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

body.app .recipient-cell:hover {
	text-decoration: none !important;
}

body.app .recipient-cell:hover > span:not(.recipient-avatar) {
	text-decoration: underline;
}

/* Filers are businesses: a rounded-square monogram, like the department tiles, sets them apart from people */
body.app .recipient-cell.is-filer .recipient-avatar {
	border-radius: 0.6rem;
}

/* ===================== Recipients: Filer picker as one pill with a business icon ===================== */
body.app .filer-picker {
	position: relative;
	display: inline-flex;
	align-items: center;
}

body.app .filer-picker-icon {
	position: absolute;
	left: 0.4rem;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 0.45rem;
	background: var(--navy-800);
	color: #fff;
	font-size: 0.95rem;
	pointer-events: none;
}

body.app .filer-picker .form-select {
	width: auto;
	min-width: 220px;
	max-width: 340px;
	height: 2.4rem;
	padding: 0 2.25rem 0 2.5rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background-color: var(--white);
	color: var(--navy-900);
	font-size: 0.875rem;
	font-weight: 600;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

body.app .filer-picker .form-select:hover {
	border-color: var(--navy-600);
	background-color: var(--navy-50);
}

body.app .filer-picker .form-select:focus {
	border-color: var(--navy-600);
	box-shadow: 0 0 0 3px rgba(42, 97, 132, 0.2);
}

@media (max-width: 575.98px) {
	body.app .filer-picker {
		flex: 1 1 auto;
	}

	body.app .filer-picker .form-select {
		width: 100%;
		max-width: none;
		height: 2.75rem;
	}
}

/* ===================== Recipients: selection bar ===================== */
/* Idle it reads as a quiet dashed tray; once recipients are ticked it lights up (site.css .is-active) */
body.app .bulk-bar {
	gap: 0.6rem 0.9rem;
	border-style: dashed;
	border-color: var(--line-strong);
	background: var(--paper);
}

body.app .bulk-bar.is-active {
	border-style: solid;
	border-color: var(--navy-600);
	background: var(--white);
}

body.app .bulk-bar-icon {
	order: 0;
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border-radius: 0.65rem;
	background: var(--white);
	border: 1px solid var(--line);
	color: var(--muted);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.app .bulk-bar-icon .material-icons-round {
	font-size: 1.2rem;
}

body.app .bulk-bar.is-active .bulk-bar-icon {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
}

body.app .bulk-bar-count { order: 1; }

body.app .bulk-bar-hint {
	order: 2;
	flex: 1 1 260px;
}

body.app .bulk-bar .tin-action-btn {
	order: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.app .bulk-bar #w9RequestBtn { order: 4; }

body.app .bulk-bar .tin-action-btn .material-icons-round {
	font-size: 1.05rem;
}

/* Waiting for a selection: outlined and quiet rather than a greyed-out slab */
body.app .bulk-bar .tin-action-btn:disabled {
	opacity: 1;
	background: transparent !important;
	border: 1px solid var(--line-strong) !important;
	color: var(--muted) !important;
	box-shadow: none !important;
	cursor: not-allowed;
}

@media (max-width: 575.98px) {
	body.app .bulk-bar .tin-action-btn {
		flex: 1 1 0;
		justify-content: center;
	}
}

/* ===================== Recipients: Validate TIN / Request W-9 confirm dialogs ===================== */
#tinWarnModal .modal-content,
#w9WarnModal .modal-content {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 24px 60px -20px rgba(15, 42, 60, 0.45);
	overflow: hidden;
}

#tinWarnModal .modal-content::before,
#w9WarnModal .modal-content::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--navy-600);
}

#tinWarnModal .modal-header,
#w9WarnModal .modal-header {
	border-bottom: 0;
	padding-bottom: 0.25rem;
}

#tinWarnModal .modal-title,
#w9WarnModal .modal-title {
	color: var(--navy-900);
	font-weight: 700;
}

#tinWarnModal .modal-footer,
#w9WarnModal .modal-footer {
	border-top: 0;
	padding-top: 0;
}

/* Warnings inside the dialogs as light callouts */
#tinWarnModal .alert,
#w9WarnModal .alert {
	border: 1px solid var(--line);
	border-left: 4px solid var(--amber-600);
	border-radius: var(--radius, 0.5rem);
	background: #fff8e6;
	color: var(--ink) !important;
	font-size: 0.875rem;
}

#tinWarnModal .alert-danger,
#w9WarnModal .alert-danger {
	border-left-color: var(--coral-600);
	background: var(--coral-100);
}

#tinModalDupList,
#w9ModalDupList {
	font-size: 0.85rem;
	color: var(--ink-soft);
}

/* Cost card */
.cost-sum {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
	overflow: hidden;
}

.cost-sum-main {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
	background: var(--white);
	border-bottom: 1px solid var(--line);
}

.cost-sum-icon {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	flex-shrink: 0;
	border-radius: 0.75rem;
	background: var(--navy-800);
	color: #fff;
}

.cost-sum-icon .material-icons-round {
	font-size: 1.3rem;
}

.cost-sum-total {
	color: var(--navy-900);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.cost-sum-total small {
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 600;
}

.cost-sum-calc {
	margin-top: 0.15rem;
	color: var(--muted);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.cost-sum-balance {
	padding: 0.7rem 1rem 0.8rem;
}

.cost-sum-meter {
	height: 6px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}

.cost-sum-meter span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--navy-600);
	transform-origin: left;
	animation: cost-meter-in 0.6s cubic-bezier(0.3, 0.9, 0.3, 1) both;
}

.cost-sum.is-short .cost-sum-meter span {
	background: var(--coral-600);
}

.cost-sum-bal-row {
	display: flex;
	justify-content: space-between;
	margin-top: 0.45rem;
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 600;
}

.cost-sum-bal-row strong {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.cost-sum.is-short .cost-sum-bal-row strong {
	color: var(--coral-700);
}

@keyframes cost-meter-in {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cost-sum-meter span { animation: none; }
}

/* ===================== Recipients: TIN check / W-9 send progress card ===================== */
.op-progress {
	margin-bottom: 1rem;
}

.op-card {
	--tone: var(--navy-700);
	--tone-bg: var(--navy-50);
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--tone);
	border-radius: var(--radius-lg, 0.75rem);
	background: var(--white);
	box-shadow: 0 8px 22px -16px rgba(15, 42, 60, 0.4);
	color: var(--ink);
	font-size: 0.9rem;
	animation: department-message-in 0.25s ease;
	transition: border-color 0.2s ease;
}

.op-card.tone-ok { --tone: var(--green-600); --tone-bg: var(--green-100); }
.op-card.tone-warn { --tone: var(--amber-600); --tone-bg: var(--amber-100); }
.op-card.tone-error { --tone: var(--coral-600); --tone-bg: var(--coral-100); }

.op-icon {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tone-bg);
	color: var(--tone);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.op-icon .material-icons-round {
	font-size: 1.2rem;
}

/* While working, a ring spins around the icon */
.op-card.tone-busy .op-icon::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top-color: var(--navy-600);
	border-right-color: var(--coral-500);
	animation: op-spin 0.9s linear infinite;
}

.op-body {
	flex: 1;
	min-width: 0;
	padding-top: 0.45rem;
}

.op-text {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.op-text ul {
	font-weight: 500;
	color: var(--ink-soft);
}

.op-bar {
	height: 6px;
	margin-top: 0.55rem;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}

.op-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--navy-600), var(--tone));
	transition: width 0.35s ease;
}

.op-card.tone-busy .op-bar span {
	background: linear-gradient(90deg, var(--navy-600), var(--navy-700));
}

@keyframes op-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.op-card { animation: none; }
	.op-card.tone-busy .op-icon::after { animation-duration: 2.5s; }
}

/* ===================== Imports list: file name with a spreadsheet icon ===================== */
body.app .file-name-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	max-width: 100%;
}

body.app .file-name-chip .material-icons-round {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	border-radius: 0.45rem;
	background: #e3f1e8;
	color: #1d6f42;
	font-size: 1rem;
}

body.app .file-name-chip.is-csv .material-icons-round {
	background: var(--navy-50);
	color: var(--navy-700);
}

body.app .import-form-type {
	color: var(--navy-900);
	font-weight: 700;
}

/* ===================== Orders list: order number, schedule chip, amount ===================== */
body.app .order-id-cell {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.65rem;
}

body.app .order-id-icon {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: 0.55rem;
	background: var(--navy-50);
	border: 1px solid var(--navy-100);
	color: var(--navy-700);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.app .order-id-icon .material-icons-round {
	font-size: 1.05rem;
}

body.app tr:hover .order-id-icon {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
}

body.app .order-id {
	color: var(--navy-900);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

body.app .order-sched-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.55rem 0.15rem 0.4rem;
	border-radius: 999px;
	background: #fff8e6;
	border: 1px solid var(--amber-100);
	color: #8a5a12;
	font-size: 0.72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.app .order-sched-chip .material-icons-round {
	font-size: 0.9rem;
	color: var(--amber-600);
}

body.app .order-sched-chip.is-past {
	background: var(--paper);
	border-color: var(--line);
	color: var(--muted);
}

body.app .order-sched-chip.is-past .material-icons-round {
	color: var(--muted);
}

body.app .order-amount {
	color: var(--ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ===================== Checkout: Order Summary as a receipt ===================== */
body.app .quote-lines {
	display: grid;
	gap: 0.55rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 2px dashed var(--line-strong);
}

body.app .quote-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	color: var(--muted);
	font-size: 0.9rem;
}

body.app .quote-line strong {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

body.app .quote-line-note {
	margin: -0.35rem 0 0.1rem;
	color: var(--muted);
	font-size: 0.72rem;
	line-height: 1.45;
}

body.app .quote-line.is-credit {
	margin: 0 -0.5rem;
	padding: 0.4rem 0.5rem;
	border-radius: 0.55rem;
	background: var(--green-100);
	color: var(--green-700);
	font-weight: 600;
}

body.app .quote-line.is-credit span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

body.app .quote-line.is-credit .material-icons-round {
	font-size: 1rem;
}

body.app .quote-line.is-credit strong {
	color: var(--green-700);
}

body.app .quote-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1.25rem;
	padding: 0.9rem 1rem;
	border-radius: 0.85rem;
	background: var(--navy-50);
	border: 1px solid var(--navy-100);
}

body.app .quote-total-label {
	color: var(--navy-800);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.app .quote-total-amount {
	color: var(--navy-900);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* ===================== Checkout: card security code ===================== */
body.app .cvv-input {
	position: relative;
}

body.app .cvv-input-icon {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--navy-600);
	font-size: 1.15rem;
	pointer-events: none;
	transition: color 0.2s ease;
}

body.app .cvv-input .form-control {
	height: 3.1rem;
	padding: 0 1rem 0 2.75rem;
	border: 1.5px solid var(--line-strong);
	border-radius: 0.75rem;
	background: var(--white);
	color: var(--navy-900);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.5em;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

body.app .cvv-input .form-control::placeholder {
	color: var(--line-strong);
	letter-spacing: 0.35em;
}

body.app .cvv-input .form-control:focus {
	border-color: var(--navy-600);
	box-shadow: 0 0 0 3px rgba(42, 97, 132, 0.18);
}

body.app .cvv-field.is-valid .form-control {
	border-color: var(--green-600);
	background: #f3faf6;
}

body.app .cvv-field.is-valid .cvv-input-icon {
	color: var(--green-600);
	animation: cvv-ok 0.3s ease;
}

body.app .cvv-field.is-invalid .form-control {
	border-color: var(--coral-600);
}

body.app .cvv-field.is-invalid .cvv-input-icon {
	color: var(--coral-600);
}

@keyframes cvv-ok {
	0% { transform: translateY(-50%) scale(0.6); }
	70% { transform: translateY(-50%) scale(1.15); }
	100% { transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	body.app .cvv-field.is-valid .cvv-input-icon { animation: none; }
}

/* ===================== Checkout: Complete Order confirmation ===================== */
#modal-notification .confirm-receipt {
	display: grid;
	gap: 0.5rem;
	margin: 1rem 0 0.75rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--line);
	border-radius: 0.85rem;
	background: var(--paper);
	text-align: left;
}

#modal-notification .confirm-receipt-due {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 0.25rem;
	padding-top: 0.6rem;
	border-top: 2px dashed var(--line-strong);
	color: var(--navy-800);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#modal-notification .confirm-receipt-due strong {
	color: var(--navy-900);
	font-size: 1.5rem;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

#modal-notification .confirm-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 0.85rem;
	background: var(--white);
	text-align: left;
	font-size: 0.875rem;
}

#modal-notification .confirm-card-icon {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	background: var(--navy-800);
	color: #fff;
}

#modal-notification .confirm-card-icon .material-icons-round {
	font-size: 1.1rem;
}

#modal-notification .confirm-card-name {
	color: var(--ink);
	font-weight: 700;
}

#modal-notification .confirm-card-num,
#modal-notification .confirm-card-exp {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

#modal-notification .confirm-card-exp {
	margin-left: auto;
}

#modal-notification .confirm-schedule {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin-top: 0.75rem;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--amber-100);
	border-left: 4px solid var(--amber-600);
	border-radius: 0.65rem;
	background: #fff8e6;
	color: var(--ink);
	font-size: 0.875rem;
	text-align: left;
}

#modal-notification .confirm-schedule .material-icons-round {
	color: var(--amber-600);
	font-size: 1.15rem;
}

/* Certification and terms: small print under the details */
#modal-notification .confirm-card ~ .form-text,
#modal-notification .confirm-schedule ~ .form-text {
	font-size: 0.75rem;
	line-height: 1.5;
	text-align: left;
}

/* Credits: no packages on sale, as a small dashed placeholder */
body.app .credit-pkg-empty {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem 0.55rem 0.7rem;
	border: 1px dashed var(--line-strong);
	border-radius: 999px;
	background: var(--paper);
	color: var(--muted);
	font-size: 0.875rem;
}

body.app .credit-pkg-empty .material-icons-round {
	color: var(--navy-600);
	font-size: 1.1rem;
}

/* ===================== Credits: empty "Recent credit activity" ===================== */
body.app .credit-empty {
	position: relative;
	display: grid;
	gap: 0.5rem;
	margin: 0.5rem 1.5rem 0.9rem;
	padding: 0.9rem 1rem 1.6rem;
	border: 1px dashed var(--line-strong);
	border-radius: 0.85rem;
	background: var(--paper);
}

body.app .credit-ghost {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	opacity: 0.55;
}

body.app .credit-ghost:nth-child(2) { opacity: 0.38; }
body.app .credit-ghost:nth-child(3) { opacity: 0.22; }

body.app .credit-ghost-mark {
	display: inline-grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	flex-shrink: 0;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1;
}

body.app .credit-ghost-mark.is-in { background: var(--green-100); color: var(--green-700); }
body.app .credit-ghost-mark.is-out { background: var(--navy-100); color: var(--navy-800); }

body.app .credit-ghost-line,
body.app .credit-ghost-amt {
	height: 0.5rem;
	border-radius: 999px;
	background: var(--line-strong);
}

body.app .credit-ghost-line { flex: 1; max-width: 60%; }
body.app .credit-ghost-amt { width: 2.75rem; margin-left: auto; }

body.app .credit-empty-icon {
	position: absolute;
	left: 50%;
	bottom: -1.1rem;
	transform: translateX(-50%);
	display: inline-grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: 0 4px 12px -6px rgba(15, 42, 60, 0.35);
	color: var(--navy-700);
}

body.app .credit-empty-icon .material-icons-round {
	font-size: 1.15rem;
}

body.app .credit-empty + p {
	margin-top: 1.1rem;
}

/* ===================== Import upload: the chosen form as a fixed chip ===================== */
body.app .form-pick-chip {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 2.9rem;
	padding: 0.35rem 1rem 0.35rem 0.4rem;
	border: 1px solid var(--navy-100);
	border-radius: 0.85rem;
	background: var(--navy-50);
	color: var(--navy-900);
	font-size: 0.95rem;
}

body.app .form-pick-chip strong {
	font-weight: 800;
}

body.app .form-pick-chip-icon {
	display: inline-grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	flex-shrink: 0;
	border-radius: 0.6rem;
	background: var(--navy-800);
	color: #fff;
}

body.app .form-pick-chip-icon .material-icons-round {
	font-size: 1.15rem;
}

/* ===================== Import upload: filer as choice cards ===================== */
body.app .filer-pick {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}

body.app .filer-pick-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	padding: 0.7rem 2.4rem 0.7rem 0.75rem;
	border: 1px solid var(--line-strong);
	border-radius: 0.85rem;
	background: var(--white);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body.app .filer-pick-card:hover {
	border-color: var(--navy-600);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -10px rgba(15, 42, 60, 0.4);
}

body.app .filer-pick-card:has(input:checked) {
	border-color: var(--navy-700);
	background: var(--navy-50);
	box-shadow: 0 0 0 1px var(--navy-700);
}

body.app .filer-pick-card:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(42, 97, 132, 0.3);
}

body.app .filer-pick-card .recipient-cell {
	gap: 0;
}

body.app .filer-pick-file {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: 0.6rem;
	background: #e3f1e8;
	color: #1d6f42;
}

body.app .filer-pick-file .material-icons-round {
	font-size: 1.1rem;
}

body.app .filer-pick-card.is-from-file {
	border-style: dashed;
}

body.app .filer-pick-card.is-from-file:has(input:checked) {
	border-style: solid;
}

body.app .filer-pick-text {
	display: grid;
	min-width: 0;
	line-height: 1.25;
}

body.app .filer-pick-text strong {
	color: var(--navy-900);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

body.app .filer-pick-text small {
	color: var(--muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

body.app .filer-pick-check {
	position: absolute;
	right: 0.7rem;
	top: 50%;
	transform: translateY(-50%) scale(0.5);
	color: var(--navy-700);
	font-size: 1.25rem;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.2s ease;
}

body.app .filer-pick-card:has(input:checked) .filer-pick-check {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

/* ===================== Import mapping: progress ring in the Column Headers title ===================== */
body.app .column-headers-title {
	display: flex;
	align-items: center;
}

body.app .map-progress {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-left: auto;
	flex-shrink: 0;
}

body.app .map-progress svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

body.app .map-progress circle {
	fill: none;
	stroke-width: 3.5;
}

body.app .map-progress-track {
	stroke: rgba(255, 255, 255, 0.18);
}

body.app .map-progress-bar {
	stroke: var(--coral-500);
	stroke-linecap: round;
	stroke-dasharray: 97.4;
	stroke-dashoffset: 97.4;
	transition: stroke-dashoffset 0.5s cubic-bezier(0.3, 0.9, 0.3, 1), stroke 0.3s ease;
}

body.app .map-progress.is-done .map-progress-bar {
	stroke: #5fd3a0;
}

body.app .map-progress-count {
	position: relative;
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* ===================== Error pages (not found / something went wrong) ===================== */
.error-page { max-width: 620px; margin: 0 auto; text-align: center; padding: 1.5rem 0; }
/* A search-off icon in a slowly turning dashed ring, with a small coral 404 badge */
.error-art { position: relative; width: 132px; height: 132px; margin: 0 auto 1.25rem; display: grid; place-items: center; }
.error-art-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--navy-100); animation: error-orbit 24s linear infinite; }
.error-art-icon { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-50); color: var(--navy-700); box-shadow: 0 0 0 10px rgba(42, 97, 132, 0.05); }
.error-art-icon .material-icons-round { font-size: 46px; }
.error-page .error-code { position: absolute; right: -6px; top: 10px; margin: 0; padding: .2rem .6rem; border-radius: 999px; background: var(--coral-500); color: #fff; font-size: .85rem; font-weight: 800; letter-spacing: .04em; line-height: 1.3; box-shadow: 0 6px 14px -6px rgba(200, 67, 45, .6); }
@keyframes error-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .error-art-ring { animation: none; } }
.error-page h2 { font-family: var(--font-serif); font-size: 2rem; color: var(--navy-900); margin-bottom: .75rem; }
.error-page p { color: var(--muted); }
/* Places to go as icon cards */
.error-links { list-style: none; padding: 0; margin: 1.75rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.error-links a { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .95rem .75rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--navy-900); font-weight: 700; font-size: .9rem; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.error-links a .material-icons-round { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: .75rem; background: var(--navy-50); color: var(--navy-700); font-size: 1.3rem; transition: background-color .15s ease, color .15s ease; }
.error-links a:hover, .error-links a:focus-visible { transform: translateY(-2px); border-color: var(--navy-600); box-shadow: 0 10px 22px -14px rgba(15, 42, 60, .5); }
.error-links li { display: flex; }
.error-links li > a { flex: 1; }
@media (max-width: 575.98px) { .error-links { grid-template-columns: repeat(2, 1fr); } }
.error-links a:hover .material-icons-round, .error-links a:focus-visible .material-icons-round { background: var(--navy-800); color: #fff; }
.error-help { font-size: .95rem; }
/* Something went wrong: the picture is coral-tinted rather than navy */
.error-art.is-fault .error-art-ring { border-color: var(--coral-100); }
.error-art.is-fault .error-art-icon { background: var(--coral-100); color: var(--coral-600); box-shadow: 0 0 0 10px rgba(200, 67, 45, 0.06); }

/* ===================== Filter (query wizard) conditions as rounded rows ===================== */
body.app table:has(> tbody[id$="QueryWizardRows"]) {
	--bs-table-bg: transparent;
	--bs-table-accent-bg: transparent;
	border-collapse: separate;
	border-spacing: 0 0.45rem;
	background: transparent;
}

body.app table:has(> tbody[id$="QueryWizardRows"]) thead th {
	padding: 0 0.5rem 0.1rem;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 0.68rem;
}

body.app tbody[id$="QueryWizardRows"] td {
	padding: 0.45rem 0.4rem;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--white);
}

body.app tbody[id$="QueryWizardRows"] td:first-child {
	border-left: 3px solid var(--navy-600);
	border-radius: 0.75rem 0 0 0.75rem;
	padding-left: 0.6rem;
}

body.app tbody[id$="QueryWizardRows"] td:last-child {
	border-right: 1px solid var(--line);
	border-radius: 0 0.75rem 0.75rem 0;
}

body.app tbody[id$="QueryWizardRows"] tr {
	animation: department-message-in 0.2s ease;
}

/* Group number as a small round badge-like box */
body.app tbody[id$="QueryWizardRows"] .qw-group {
	width: 3rem;
	padding: 0.25rem 0 !important;
	text-align: center;
	font-weight: 800;
	color: var(--navy-800);
	background: var(--navy-50);
	border-color: var(--navy-100);
	border-radius: 999px;
}

body.app tbody[id$="QueryWizardRows"] .qw-logical {
	width: 5.5rem;
	font-weight: 700;
	color: var(--navy-800);
}

/* Remove: a quiet icon that turns coral on hover */
body.app tbody[id$="QueryWizardRows"] .qw-remove {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid transparent !important;
	border-radius: 50%;
	background: transparent !important;
	color: var(--muted) !important;
}

body.app tbody[id$="QueryWizardRows"] .qw-remove:hover,
body.app tbody[id$="QueryWizardRows"] .qw-remove:focus-visible {
	background: var(--coral-100) !important;
	color: var(--coral-700) !important;
}

body.app tbody[id$="QueryWizardRows"] .qw-remove .material-icons {
	font-size: 1.1rem !important;
}

body.app .table-responsive:has(> table > tbody[id$="QueryWizardRows"]),
body.app table:has(> tbody[id$="QueryWizardRows"]) thead th {
	background: transparent !important;
	box-shadow: none !important;
}

/* ===================== Filter panel: title with an icon tile, Form picker as a pill ===================== */
body.app #queryWizardCollapse > .card > h6 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--navy-900);
	font-weight: 800;
}

body.app #queryWizardCollapse > .card > h6::before {
	content: "filter_alt";
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.6rem;
	background: var(--navy-800);
	color: #fff;
	font-family: "Material Icons Round";
	font-feature-settings: "liga";
	font-size: 1.1rem;
	font-weight: normal;
}

body.app #queryWizardCollapse select[name="queryWizardFormId"] {
	height: 2.5rem;
	padding-left: 2.5rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background-color: var(--white);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231f4d69' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: 0.9rem center, right 0.9rem center;
	background-size: 1.1rem 1.1rem, 12px 10px;
	color: var(--navy-900);
	font-size: 0.875rem;
	font-weight: 600;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.app #queryWizardCollapse select[name="queryWizardFormId"]:hover {
	border-color: var(--navy-600);
}

body.app #queryWizardCollapse select[name="queryWizardFormId"]:focus {
	border-color: var(--navy-600);
	box-shadow: 0 0 0 3px rgba(42, 97, 132, 0.2);
}

/* ===================== Filter panel actions ===================== */
/* Add Condition reads as the next empty row; Run Query is the main action on the right, Clear sits quietly beside it */
body.app #queryWizardCollapse form .d-flex:has(> [id$="QueryRow"]) {
	flex-wrap: wrap;
	align-items: center;
}

body.app #queryWizardCollapse [id^="add"][id$="QueryRow"] {
	order: 0;
	flex: 1 0 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.6rem 1rem;
	border: 1.5px dashed rgba(42, 97, 132, 0.45) !important;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.55) !important;
	color: var(--navy-700) !important;
	font-weight: 700;
	box-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.app #queryWizardCollapse [id^="add"][id$="QueryRow"]:hover,
body.app #queryWizardCollapse [id^="add"][id$="QueryRow"]:focus-visible {
	border-color: var(--navy-600) !important;
	background: var(--white) !important;
}

body.app #queryWizardCollapse form .d-flex:has(> [id$="QueryRow"]) > a.btn {
	order: 1;
	margin-left: auto;
	border-color: transparent !important;
	background: transparent !important;
	color: var(--muted) !important;
	box-shadow: none !important;
}

body.app #queryWizardCollapse form .d-flex:has(> [id$="QueryRow"]) > a.btn:hover {
	color: var(--coral-700) !important;
	background: var(--coral-100) !important;
}

body.app #queryWizardCollapse form .d-flex:has(> [id$="QueryRow"]) > button[type="submit"] {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.55rem 1.2rem;
}

/* ===================== Forms list: 1094-C/B Transmittal Forms section ===================== */
body.app .t1094 {
	margin-bottom: 1.5rem;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--white);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.app .t1094.is-open {
	box-shadow: inset 3px 0 0 var(--navy-700), 0 10px 26px -18px rgba(15, 42, 60, 0.35);
}

/* Still needs finishing: amber edge and a soft amber glow */
body.app .t1094.is-attention {
	border-color: #f1d9a6;
	box-shadow: inset 3px 0 0 var(--amber-600), 0 0 0 4px rgba(183, 121, 31, 0.08);
}

body.app .t1094-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.9rem 1.1rem;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

body.app .t1094-head:hover {
	background: var(--navy-50);
}

body.app .t1094-icon {
	display: inline-grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	flex-shrink: 0;
	border-radius: 0.65rem;
	background: var(--navy-800);
	color: #fff;
}

body.app .t1094-icon .material-icons-round {
	font-size: 1.2rem;
}

body.app .t1094-title {
	color: var(--navy-900);
	font-size: 1rem;
	font-weight: 800;
}

body.app .t1094-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.2rem 0.65rem 0.2rem 0.4rem;
	border-radius: 999px;
	background: #fff8e6;
	border: 1px solid #f1d9a6;
	color: #8a5a12;
	font-size: 0.75rem;
	font-weight: 800;
	animation: t1094-flag 2.2s ease-in-out infinite;
}

body.app .t1094-flag .material-icons-round {
	font-size: 0.95rem;
	color: var(--amber-600);
}

body.app .t1094-chevron {
	margin-left: auto;
	color: var(--muted);
	transition: transform 0.25s ease;
}

body.app .t1094.is-open .t1094-chevron {
	transform: rotate(180deg);
}

body.app .t1094-body {
	padding: 0 1.1rem 1.1rem;
}

body.app .t1094 .app-table tbody tr.t1094-row-todo {
	box-shadow: inset 3px 0 0 var(--amber-600);
	background: #fffdf6;
}

body.app .t1094-edit {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border-radius: 999px !important;
}

body.app .t1094-edit .material-icons-round {
	font-size: 1rem;
}

@keyframes t1094-flag {
	0%, 100% { box-shadow: 0 0 0 0 rgba(183, 121, 31, 0.35); }
	50% { box-shadow: 0 0 0 5px rgba(183, 121, 31, 0); }
}

@media (prefers-reduced-motion: reduce) {
	body.app .t1094-flag { animation: none; }
}

/* ===================== Status tips: icon and colour follow what the tip is about ===================== */
body.app .app-hint.tone-navy {
	border-color: var(--navy-100);
	background: linear-gradient(90deg, var(--navy-50), #fbfdfe);
}

body.app .app-hint.tone-navy .material-icons-round {
	background: var(--navy-800);
	color: #fff;
}

body.app .app-hint.tone-green {
	border-color: #cfe9dd;
	background: linear-gradient(90deg, #eef8f3, #fbfefc);
}

body.app .app-hint.tone-green .material-icons-round {
	background: var(--green-600);
	color: #fff;
}

body.app .app-hint.tone-amber .material-icons-round {
	background: var(--amber-600);
	color: #fff;
}

/* ===================== Form notices (e.g. IRS rejection reasons) as a coral callout ===================== */
body.app .alert.form-notices {
	position: relative;
	padding: 0.9rem 1.15rem 0.9rem 3.4rem;
	border: 1px solid #f3c2b9;
	border-left: 4px solid var(--coral-600);
	border-radius: 14px;
	background: #fffaf9 !important;
	background-image: none !important;
	color: var(--ink) !important;
	box-shadow: 0 10px 26px -18px rgba(15, 42, 60, 0.35);
}

body.app .alert.form-notices::before {
	content: "report";
	position: absolute;
	left: 1rem;
	top: 0.85rem;
	color: var(--coral-600);
	font-family: "Material Icons Round";
	font-feature-settings: "liga";
	font-size: 22px;
	line-height: 1;
}

body.app .alert.form-notices ul {
	margin: 0;
	padding-left: 1.1rem;
}

body.app .alert.form-notices li + li {
	margin-top: 0.25rem;
}

/* ===================== Messages after an action (saved, deleted, couldn't save) ===================== */
body.app .alert.app-flash {
	--tone: var(--green-600);
	--tone-bg: #f1faf5;
	--tone-line: #cfe9dd;
	position: relative;
	padding: 0.85rem 3rem 0.85rem 3.3rem;
	border: 1px solid var(--tone-line);
	border-left: 4px solid var(--tone);
	border-radius: 14px;
	background: var(--tone-bg) !important;
	background-image: none !important;
	color: var(--ink) !important;
	font-weight: 600;
	box-shadow: 0 10px 26px -20px rgba(15, 42, 60, 0.35);
	animation: department-message-in 0.3s ease;
}

body.app .alert.app-flash.is-error {
	--tone: var(--coral-600);
	--tone-bg: #fffaf9;
	--tone-line: #f3c2b9;
}

body.app .alert.app-flash::before {
	content: "check_circle";
	position: absolute;
	left: 1rem;
	top: 0.8rem;
	color: var(--tone);
	font-family: "Material Icons Round";
	font-feature-settings: "liga";
	font-size: 22px;
	font-weight: normal;
	line-height: 1;
}

body.app .alert.app-flash.is-error::before {
	content: "error";
}

body.app .alert.app-flash ul {
	margin: 0;
	padding-left: 1.1rem;
	font-weight: 500;
}

/* The theme's close button is a white glyph: draw a visible × instead */
body.app .alert.app-flash .btn-close {
	top: 50%;
	right: 0.6rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	transform: translateY(-50%);
	border-radius: 50%;
	background: none;
	opacity: 1;
	color: var(--muted);
	display: grid;
	place-items: center;
}

body.app .alert.app-flash .btn-close::before {
	content: "close";
	font-family: "Material Icons Round";
	font-feature-settings: "liga";
	font-size: 18px;
}

body.app .alert.app-flash .btn-close:hover {
	background: rgba(15, 42, 60, 0.06);
	color: var(--ink);
}

/* ===================== Order details: a schedule that has already passed, in muted grey ===================== */
body.app .hold-banner.is-past {
	border: 1px solid var(--line-strong) !important;
	border-radius: 12px;
	background: var(--paper) !important;
	color: var(--ink-soft);
}

body.app .hold-banner.is-past h6 {
	color: var(--ink-soft);
	font-weight: 700;
}

body.app .hold-banner.is-past .date-tile {
	filter: grayscale(1);
	opacity: 0.8;
}

body.app .hold-banner.is-past .hold-service {
	opacity: 0.75;
}

/* ===================== Order details: upcoming schedule banner ===================== */
body.app .hold-banner.is-upcoming {
	border: 1px solid var(--navy-100) !important;
	border-left: 4px solid var(--navy-700) !important;
	border-radius: 14px;
	background: linear-gradient(90deg, var(--navy-50), #fbfdfe 70%) !important;
	box-shadow: 0 10px 26px -20px rgba(15, 42, 60, 0.4);
	color: var(--navy-800);
}

body.app .hold-banner.is-upcoming h6 {
	color: var(--navy-900);
	font-weight: 800;
}

body.app .hold-note {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--ink-soft);
}

body.app .hold-note .material-icons-round {
	font-size: 1rem;
	color: var(--navy-600);
}

/* Binder holes in the calendar tile's top band so it reads as a desk calendar */
body.app .date-tile-month {
	position: relative;
}

body.app .date-tile-month::before,
body.app .date-tile-month::after {
	content: "";
	position: absolute;
	top: 3px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}

body.app .date-tile-month::before { left: 14px; }
body.app .date-tile-month::after { right: 14px; }

body.app .hold-banner .date-tile {
	animation: date-tile-in 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

@keyframes date-tile-in {
	from { transform: translateY(-6px) rotate(-4deg); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	body.app .hold-banner .date-tile { animation: none; }
}

/* ===================== 1094-C: which part of the form you're on ===================== */
body.app .part-track {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

body.app .part-track li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted);
	font-size: 0.85rem;
	font-weight: 700;
}

/* Connector line between parts; turns navy once the earlier part is done */
body.app .part-track li + li::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	margin: 0 0.6rem;
	border-radius: 2px;
	background: var(--line-strong);
}

body.app .part-track li.is-done + li::before,
body.app .part-track li.is-current::before {
	background: var(--navy-600);
}

body.app .part-track-dot {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1.5px solid var(--line-strong);
	background: var(--white);
	color: var(--muted);
	font-family: var(--font-serif);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.app .part-track-dot b {
	font-size: 0.8rem;
}

body.app .part-track-dot .material-icons-round {
	display: none;
	font-size: 1.05rem;
}

body.app .part-track li.is-current {
	color: var(--navy-900);
}

body.app .part-track li.is-current .part-track-dot {
	border-color: var(--navy-800);
	background: var(--navy-800);
	color: #fff;
	box-shadow: 0 0 0 5px rgba(42, 97, 132, 0.15);
}

body.app .part-track li.is-done {
	color: var(--navy-700);
}

body.app .part-track li.is-done .part-track-dot {
	border-color: var(--green-600);
	background: var(--green-100);
	color: var(--green-700);
}

body.app .part-track li.is-done .part-track-dot b { display: none; }
body.app .part-track li.is-done .part-track-dot .material-icons-round { display: block; }

@media (max-width: 575.98px) {
	body.app .part-track-label { display: none; }
	body.app .part-track li + li::before { width: 1.5rem; }
}

/* ===================== 1094-C: step buttons under each part as one tidy bar ===================== */
body.app [id^="Part"][id$="Display"] > .form-group.d-flex {
	align-items: center;
	gap: 0.6rem;
	max-width: 1030px;
	margin-top: 0.5rem;
	padding: 0.6rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 12px 30px -18px rgba(15, 42, 60, 0.4);
}

body.app [id^="Part"][id$="Display"] > .form-group.d-flex > .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 !important;
	border-radius: 0.6rem;
}

body.app [id^="Part"][id$="Display"] > .form-group.d-flex > .btn:last-child {
	margin-left: auto !important;
	padding-left: 1.4rem;
	padding-right: 1.4rem;
}

/* Previous Step: a quiet outlined button with a back arrow */
body.app [id^="Part"][id$="Display"] .btn[value="Previous Step"] {
	background: var(--white) !important;
	border: 1px solid var(--line-strong) !important;
	color: var(--navy-800) !important;
	box-shadow: none !important;
}

body.app [id^="Part"][id$="Display"] .btn[value="Previous Step"]:hover {
	border-color: var(--navy-600) !important;
	background: var(--navy-50) !important;
}

body.app [id^="Part"][id$="Display"] .btn[value="Previous Step"]::before {
	content: "arrow_back";
	font-family: "Material Icons Round";
	font-feature-settings: "liga";
	font-size: 1.05rem;
	font-weight: normal;
}

/* Get PDF beside it matches the other quiet buttons */
body.app [id^="Part"][id$="Display"] > .form-group.d-flex > .bg-gradient-dark {
	background: var(--white) !important;
	border: 1px solid var(--line-strong) !important;
	color: var(--navy-800) !important;
	box-shadow: none !important;
}

/* ===================== 1094-C Part IV: ALE members ===================== */
/* The add row as a soft tray */
body.app #Part4Display > .input-group {
	max-width: 1030px;
	gap: 0.5rem;
	padding: 0.75rem;
	border: 1px dashed rgba(42, 97, 132, 0.45);
	border-radius: 14px;
	background: var(--navy-50);
}

body.app #Part4Display > .input-group > .form-control {
	flex: 1 1 160px;
	border-radius: 0.6rem !important;
	margin: 0 !important;
	background: var(--white);
}

body.app #Part4Display > .input-group > .btn {
	flex: 0 0 auto;
	width: auto;
	border-radius: 0.6rem !important;
}

body.app #FormDisplayPart4 {
	display: grid;
	gap: 0.5rem;
	max-width: 1030px;
	margin-top: 0.75rem;
}

/* One added member */
body.app .ale-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.6rem 0.6rem 0.75rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--navy-700);
	border-radius: 12px;
	background: var(--white);
	animation: department-message-in 0.25s ease;
}

body.app .ale-mono {
	display: inline-grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	flex-shrink: 0;
	border-radius: 0.6rem;
	background: var(--navy-100);
	color: var(--navy-800);
	font-size: 0.75rem;
	font-weight: 800;
}

body.app .ale-name {
	flex: 1;
	min-width: 0;
	color: var(--navy-900);
	font-weight: 700;
	overflow-wrap: anywhere;
}

body.app .ale-tin {
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font-size: 0.8rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

body.app .ale-count {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-width: 4.5rem;
	color: var(--ink-soft);
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

body.app .ale-count .material-icons-round {
	font-size: 1.05rem;
	color: var(--navy-600);
}

body.app .ale-remove {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}

body.app .ale-remove:hover,
body.app .ale-remove:focus-visible {
	background: var(--coral-100);
	color: var(--coral-700);
}

body.app .ale-remove .material-icons-round {
	font-size: 1.15rem;
}

/* 1094 step bars: a compact floating bar like the form editor's, instead of a full-width strip */
body.app [id^="Part"][id$="Display"] > .form-group.d-flex,
body.app #Form1094 > .form-group.d-flex {
	position: sticky;
	bottom: 12px;
	z-index: 20;
	width: fit-content;
	max-width: 100%;
	backdrop-filter: blur(8px);
}

body.app [id^="Part"][id$="Display"] > .form-group.d-flex > .btn:last-child,
body.app #Form1094 > .form-group.d-flex > .btn:last-child {
	margin-left: 0 !important;
}

@media (min-width: 700px) {
	body.app .table-responsive:has(#Form1094) {
		overflow: visible;
	}
}

/* ===================== Lists: the form's icon in a small tile beside its name ===================== */
body.app .has-form-tile {
	position: relative;
	display: inline-block;
	min-height: 2rem;
	padding-left: 2.6rem;
	padding-top: 0.3rem;
	line-height: 1.35;
}

body.app .form-kind-tile {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.55rem;
	background: var(--navy-50);
	border: 1px solid var(--navy-100);
	color: var(--navy-700);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.app .form-kind-tile .material-icons-round {
	font-size: 1.05rem;
}

body.app tr:hover .form-kind-tile {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
}

/* ===================== Page header: optional icon tile before the title ===================== */
body.app .app-title-icon {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-right: 0.75rem;
	vertical-align: -0.35rem;
	border-radius: 0.8rem;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(6px);
	color: #fff;
	animation: app-title-icon-in 0.4s ease both;
}

body.app .app-title-icon .material-icons-round {
	font-size: 1.45rem;
}

@keyframes app-title-icon-in {
	from { transform: scale(0.8); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@media (max-width: 575.98px) {
	body.app .app-title-icon {
		width: 2rem;
		height: 2rem;
		margin-right: 0.5rem;
		vertical-align: -0.25rem;
		border-radius: 0.6rem;
	}

	body.app .app-title-icon .material-icons-round { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
	body.app .app-title-icon { animation: none; }
}

/* Header avatar (Filer / Recipient edit): the list's initials avatar, larger and frosted on the dark band */
body.app .app-title-avatar {
	display: inline-flex;
	margin-right: 0.75rem;
	vertical-align: -0.35rem;
	animation: app-title-icon-in 0.4s ease both;
}

body.app .app-title-avatar .recipient-avatar {
	width: 2.6rem;
	height: 2.6rem;
	background: rgba(255, 255, 255, 0.14) !important;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff !important;
	font-family: var(--font-sans, inherit);
	font-size: 0.95rem;
	letter-spacing: 0.03em;
}

body.app .app-title-avatar.is-filer .recipient-avatar {
	border-radius: 0.8rem;
}

@media (max-width: 575.98px) {
	body.app .app-title-avatar { margin-right: 0.5rem; vertical-align: -0.25rem; }
	body.app .app-title-avatar .recipient-avatar { width: 2rem; height: 2rem; font-size: 0.75rem; }
}

/* ===================== Phone / tablet menu: section icons beside the links (same as the page headers) ===================== */
.site-nav-icon {
	display: none;
}

@media (max-width: 1024px) {
	body.app .site-nav .site-nav-link {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 0.75rem;
	}

	body.app .site-nav .site-nav-icon {
		display: inline-grid;
		place-items: center;
		width: 2.1rem;
		height: 2.1rem;
		flex-shrink: 0;
		border-radius: 0.6rem;
		background: var(--navy-50);
		color: var(--navy-700);
		font-size: 1.15rem;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	body.app .site-nav .site-nav-link.is-active .site-nav-icon,
	body.app .site-nav .site-nav-link[aria-current="page"] .site-nav-icon,
	body.app .site-nav .site-nav-link:hover .site-nav-icon {
		background: var(--navy-800);
		color: #fff;
	}
}

@media (max-width: 1024px) {
	body.app .site-nav .nav-menu-toggle > .material-icons-round:first-child {
		display: inline-grid;
		place-items: center;
		width: 2.1rem;
		height: 2.1rem;
		border-radius: 0.6rem;
		background: var(--navy-50);
		color: var(--navy-700);
		font-size: 1.15rem;
	}
}

/* ===================== "Look here" pulse on the page's main action: a calm coral ripple, no resizing ===================== */
body.app .attention-pulse {
	animation: app-attention 1.2s ease-out 4 !important;
}

@keyframes app-attention {
	0% { box-shadow: 0 0 0 0 rgba(228, 85, 63, 0.5); }
	100% { box-shadow: 0 0 0 12px rgba(228, 85, 63, 0); }
}

@media (prefers-reduced-motion: reduce) {
	body.app .attention-pulse { animation: none !important; }
}

/* ===================== Order details: footer row of the forms card ===================== */
body.app .order-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

body.app .order-footer .order-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

body.app .order-footer .order-back .material-icons-round {
	font-size: 1.05rem;
}

@media (max-width: 575.98px) {
	body.app .order-footer { flex-direction: column-reverse; align-items: stretch; }
	body.app .order-footer .order-back { justify-content: center; }
}

/* ===================== Back links: the back arrow nudges left on hover (forward arrows nudge right) ===================== */
body.app a.btn.bg-gradient-dark:not(.action-button) > .material-icons:first-child,
body.app a.btn.bg-gradient-dark:not(.action-button) > .material-icons-round:first-child,
body.app .order-back > .material-icons-round:first-child {
	transition: transform 0.18s ease;
}

body.app a.btn.bg-gradient-dark:not(.action-button):hover > .material-icons:first-child,
body.app a.btn.bg-gradient-dark:not(.action-button):hover > .material-icons-round:first-child,
body.app a.btn.bg-gradient-dark:not(.action-button):focus-visible > .material-icons:first-child,
body.app .order-back:hover > .material-icons-round:first-child,
body.app .order-back:focus-visible > .material-icons-round:first-child {
	transform: translateX(-3px);
}

body.app [id^="Part"][id$="Display"] .btn[value="Previous Step"]::before {
	display: inline-block;
	transition: transform 0.18s ease;
}

body.app [id^="Part"][id$="Display"] .btn[value="Previous Step"]:hover::before {
	transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
	body.app a.btn > .material-icons:first-child,
	body.app a.btn > .material-icons-round:first-child { transition: none; }
}

/* ===================== Reports: filer heading with monogram and TIN pill ===================== */
body.app .report-filer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

body.app .report-filer .recipient-cell { gap: 0; }

body.app .report-filer-tin {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media print {
	body.app .report-filer .recipient-avatar { display: none; }
}

@media print {
	body.app .form-kind-tile { display: none; }
	body.app .has-form-tile { padding-left: 0; min-height: 0; }
}

/* ===================== Checkout breakdown: each form line leads with who it's for ===================== */
body.app .breakdown-person {
	flex-wrap: wrap;
	gap: 0.6rem;
	color: var(--navy-900);
	font-weight: 600;
}

body.app .breakdown-person:hover > span:not(.recipient-avatar):not(.report-filer-tin):not(.breakdown-correction) {
	text-decoration: underline;
}

body.app .breakdown-correction {
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: #fff8e6;
	border: 1px solid var(--amber-100);
	color: #8a5a12;
	font-size: 0.72rem;
	font-weight: 800;
}

/* ===================== TIN columns: even-width digits that line up, one calm style on every list ===================== */
body.app .tin-text {
	color: var(--ink-soft) !important;
	font-weight: 500 !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
	white-space: nowrap;
	text-decoration: none;
}

body.app .tin-text:hover {
	color: var(--navy-700) !important;
}

/* ===================== Filers / Recipients: one Address column, street over "City, ST Zip" ===================== */
body.app .address-cell {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.3;
}

body.app .address-cell .address-line {
	color: var(--ink);
	font-weight: 500;
}

body.app .address-cell .address-place {
	color: var(--muted);
	font-size: 0.8rem;
}

body.app .address-cell:hover .address-line {
	text-decoration: underline;
}

body.app .address-cell:hover {
	text-decoration: none !important;
}

/* ===================== Phones: Recipients and Filers rows become compact cards (no sideways scrolling) ===================== */
@media (max-width: 767.98px) { /* phones and small tablets: recipients and filers as cards */
	body.app table.cardlist-recipients,
	body.app table.cardlist-filers,
	body.app table.cardlist-recipients tbody,
	body.app table.cardlist-filers tbody {
		display: block;
		width: 100%;
	}

	body.app table.cardlist-recipients thead,
	body.app table.cardlist-filers thead {
		display: none;
	}

	body.app table.cardlist-recipients tbody tr,
	body.app table.cardlist-filers tbody tr {
		display: grid;
		align-items: center;
		gap: 0.35rem 0.6rem;
		padding: 0.75rem 0.85rem;
		border-bottom: 1px solid var(--line);
	}

	body.app table.cardlist-recipients tbody td,
	body.app table.cardlist-filers tbody td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		white-space: normal !important;
	}

	/* Recipients: check | name | delete / TIN · address / status badges */
	body.app table.cardlist-recipients tbody tr {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"check name act"
			".     tin  tin"
			".     addr addr"
			".     stat stat";
	}

	body.app table.cardlist-recipients tbody td:nth-child(1) { grid-area: check; }
	body.app table.cardlist-recipients tbody td:nth-child(2) { grid-area: name; }
	body.app table.cardlist-recipients tbody td:nth-child(3) { grid-area: tin; }
	body.app table.cardlist-recipients tbody td:nth-child(4) { grid-area: addr; }
	body.app table.cardlist-recipients tbody td:nth-child(5),
	body.app table.cardlist-recipients tbody td:nth-child(6) {
		grid-area: stat;
		display: inline-flex;
	}
	body.app table.cardlist-recipients tbody td:nth-child(6) { justify-self: end; }
	body.app table.cardlist-recipients tbody td:nth-child(5) { padding-left: 2.6rem !important; }
	body.app table.cardlist-recipients tbody td:nth-child(7) { grid-area: act; }

	/* Filers: name | delete / TIN / address */
	body.app table.cardlist-filers tbody tr {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"name act"
			"tin  tin"
			"addr addr";
	}

	body.app table.cardlist-filers tbody td:nth-child(1) { grid-area: name; }
	body.app table.cardlist-filers tbody td:nth-child(2) { grid-area: addr; padding-left: 2.6rem !important; }
	body.app table.cardlist-filers tbody td:nth-child(3) { grid-area: tin; padding-left: 2.6rem !important; }
	body.app table.cardlist-filers tbody td:nth-child(4) { grid-area: act; }

	body.app table.cardlist-recipients tbody td:nth-child(3),
	body.app table.cardlist-recipients tbody td:nth-child(4) {
		padding-left: 2.6rem !important;
		font-size: 0.85rem;
	}

	/* The sideways-scroll edge shadows aren't needed once rows fit */
	body.app .table-responsive:has(> table.cardlist-recipients),
	body.app .table-responsive:has(> table.cardlist-filers),
	body.app :has(> table.cardlist-recipients),
	body.app :has(> table.cardlist-filers) {
		overflow: visible !important;
		box-shadow: none !important;
		background-image: none !important;
	}
}

/* ===================== Phones: Forms list rows become compact cards ===================== */
@media (max-width: 767.98px) { /* phones and small tablets: forms as cards */
	body.app table.cardlist-forms,
	body.app table.cardlist-forms tbody {
		display: block;
		width: 100%;
	}

	body.app table.cardlist-forms thead { display: none; }

	/* form | status / recipient / TIN / actions */
	body.app table.cardlist-forms tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"form stat"
			"who  who"
			"tin  tin"
			"act  act";
		align-items: center;
		gap: 0.4rem 0.6rem;
		padding: 0.8rem 0.9rem;
		border-bottom: 1px solid var(--line);
	}

	body.app table.cardlist-forms tbody td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		white-space: normal !important;
	}

	body.app table.cardlist-forms tbody td:nth-child(1) { grid-area: form; }
	body.app table.cardlist-forms tbody td:nth-child(2) { grid-area: who; }
	body.app table.cardlist-forms tbody td:nth-child(3) { grid-area: tin; padding-left: 2.6rem !important; font-size: 0.85rem; }
	body.app table.cardlist-forms tbody td:nth-child(4) { grid-area: stat; justify-self: end; }
	body.app table.cardlist-forms tbody td:nth-child(5) {
		grid-area: act;
		padding-top: 0.35rem !important;
		margin-top: 0.15rem;
		border-top: 1px dashed var(--line) !important;
	}

	body.app :has(> table.cardlist-forms) {
		overflow: visible !important;
		box-shadow: none !important;
		background-image: none !important;
	}
}

/* ===================== Phones: an order's forms become compact cards ===================== */
@media (max-width: 575.98px) {
	body.app table.cardlist-orderforms,
	body.app table.cardlist-orderforms tbody,
	body.app table.cardlist-orderforms thead {
		display: block;
		width: 100%;
	}

	/* Keep only the PDF "select all" cell of the header, at the right */
	body.app table.cardlist-orderforms thead tr {
		display: flex;
		justify-content: flex-end;
	}

	body.app table.cardlist-orderforms thead th { display: none; }
	body.app table.cardlist-orderforms thead th:last-child { display: block; }

	/* form | PDF tick / recipient | email / TIN / e-file status / any other statuses */
	body.app table.cardlist-orderforms tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 0.4rem 0.6rem;
		padding: 0.8rem 0.9rem;
		border-bottom: 1px solid var(--line);
	}

	body.app table.cardlist-orderforms tbody td {
		display: block;
		grid-column: 1 / -1;
		padding: 0 !important;
		border: 0 !important;
		white-space: normal !important;
	}

	body.app table.cardlist-orderforms tbody td > .px-2 { padding: 0 !important; }

	body.app table.cardlist-orderforms tbody td:nth-child(1) { grid-column: 1; grid-row: 1; }
	body.app table.cardlist-orderforms tbody td:last-child { grid-column: 2; grid-row: 1; justify-self: end; }
	body.app table.cardlist-orderforms tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
	body.app table.cardlist-orderforms tbody td:nth-last-child(2) { grid-column: 2; grid-row: 2; justify-self: end; }
	body.app table.cardlist-orderforms tbody td:nth-child(3) { padding-left: 2.6rem !important; font-size: 0.85rem; }
	body.app table.cardlist-orderforms tbody td:nth-child(n+4):not(:nth-last-child(-n+2)) { padding-left: 2.6rem !important; }

	body.app :has(> table.cardlist-orderforms) {
		overflow: visible !important;
		box-shadow: none !important;
		background-image: none !important;
	}
}

/* ===================== Phones: Orders and Imports rows become compact cards ===================== */
@media (max-width: 899.98px) { /* phones and small tablets: orders and imports as cards (their tables need about 900px) */
	body.app table.cardlist-orders,
	body.app table.cardlist-orders tbody,
	body.app table.cardlist-imports,
	body.app table.cardlist-imports tbody {
		display: block;
		width: 100%;
	}

	body.app table.cardlist-orders thead,
	body.app table.cardlist-imports thead { display: none; }

	body.app table.cardlist-orders tbody tr,
	body.app table.cardlist-imports tbody tr {
		display: grid;
		align-items: center;
		gap: 0.45rem 0.6rem;
		padding: 0.8rem 0.9rem;
		border-bottom: 1px solid var(--line);
	}

	body.app table.cardlist-recipients tbody tr:last-child,
	body.app table.cardlist-filers tbody tr:last-child,
	body.app table.cardlist-forms tbody tr:last-child,
	body.app table.cardlist-orderforms tbody tr:last-child,
	body.app table.cardlist-pick tbody tr:last-child,
	body.app table.cardlist-orders tbody tr:last-child,
	body.app table.cardlist-imports tbody tr:last-child {
		border-bottom: 0;
	}

	body.app table.cardlist-orders tbody td,
	body.app table.cardlist-imports tbody td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		white-space: normal !important;
		text-align: left !important;
		width: auto !important;
	}

	/* Orders: #id + schedule | amount / status · date | actions */
	body.app table.cardlist-orders tbody tr {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"id     amount"
			"status act"
			"date   act";
	}

	body.app table.cardlist-orders tbody td:nth-child(1) { grid-area: id; }
	body.app table.cardlist-orders tbody td:nth-child(2) { grid-area: status; padding-left: 2.6rem !important; }
	body.app table.cardlist-orders tbody td:nth-child(3) { grid-area: date; padding-left: 2.6rem !important; color: var(--muted); font-size: 0.85rem; }
	body.app table.cardlist-orders tbody td:nth-child(4) { grid-area: amount; justify-self: end; }
	body.app table.cardlist-orders tbody td:nth-child(5) { grid-area: act; justify-self: end; }

	/* Imports: form | actions / label / file / status + track · forms · date */
	body.app table.cardlist-imports tbody tr {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"form   act"
			"label  label"
			"file   file"
			"status status"
			"count  count"
			"meta   meta";
	}

	body.app table.cardlist-imports tbody td:nth-child(1) { grid-area: form; }
	body.app table.cardlist-imports tbody td:nth-child(2) { grid-area: label; font-weight: 600; color: var(--ink); }
	body.app table.cardlist-imports tbody td:nth-child(3) { grid-area: file; }
	body.app table.cardlist-imports tbody td:nth-child(4) { grid-area: count; color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; }
	body.app table.cardlist-imports tbody td:nth-child(4)::before { content: "description"; font-family: "Material Icons Round"; font-feature-settings: "liga"; font-weight: normal; font-size: 1rem; vertical-align: -0.2em; margin-right: 0.3rem; color: var(--navy-600); }
	body.app table.cardlist-imports tbody td:nth-child(5) { grid-area: status; }
	body.app table.cardlist-imports tbody td:nth-child(6) { grid-area: meta; color: var(--muted); font-size: 0.85rem; }
	body.app table.cardlist-imports tbody td:nth-child(7) { grid-area: act; justify-self: end; }

	body.app table.cardlist-imports tbody td:nth-child(n+2):nth-child(-n+6) { padding-left: 2.6rem !important; }

	body.app :has(> table.cardlist-orders),
	body.app :has(> table.cardlist-imports) {
		overflow: visible !important;
		box-shadow: none !important;
		background-image: none !important;
	}
}

/* ===================== Phones: Choose a filer / Choose a recipient rows become tappable cards ===================== */
@media (max-width: 575.98px) {
	body.app table.cardlist-pick,
	body.app table.cardlist-pick tbody {
		display: block;
		width: 100%;
	}

	body.app table.cardlist-pick thead { display: none; }

	/* name | Select / TIN / address (the whole card is tappable, Select stays on the right) */
	body.app table.cardlist-pick tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"name sel"
			"tin  sel"
			"addr sel";
		align-items: center;
		gap: 0.3rem 0.75rem;
		padding: 0.8rem 0.9rem;
		border-bottom: 1px solid var(--line);
	}

	body.app table.cardlist-pick tbody td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		white-space: normal !important;
	}

	body.app table.cardlist-pick tbody td:nth-child(1) { grid-area: sel; align-self: center; }
	body.app table.cardlist-pick tbody td:nth-child(2) { grid-area: name; }
	body.app table.cardlist-pick tbody td:nth-child(3) { grid-area: tin; padding-left: 2.6rem !important; font-size: 0.85rem; }
	body.app table.cardlist-pick tbody td:nth-child(4) { grid-area: addr; padding-left: 2.6rem !important; }

	/* Filers list the address before the TIN */
	body.app table.cardlist-pick-filers tbody td:nth-child(3) { grid-area: addr; font-size: inherit; }
	body.app table.cardlist-pick-filers tbody td:nth-child(4) { grid-area: tin; font-size: 0.85rem; }

	body.app :has(> table.cardlist-pick) {
		overflow: visible !important;
		box-shadow: none !important;
		background-image: none !important;
	}
}

/* ===================== Phones: credit history rows become compact cards ===================== */
@media (max-width: 575.98px) {
	body.app table.credit-history-table,
	body.app table.credit-history-table tbody {
		display: block;
		width: 100%;
	}

	body.app table.credit-history-table thead { display: none; }

	/* description | amount / date · type | balance */
	body.app table.credit-history-table tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"desc amt"
			"meta bal"
			"type type";
		align-items: center;
		gap: 0.3rem 0.75rem;
		padding: 0.75rem 0.9rem;
		border-bottom: 1px solid var(--line);
	}

	body.app table.credit-history-table tbody td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		white-space: normal !important;
	}

	body.app table.credit-history-table tbody td:nth-child(1) { grid-area: meta; padding-left: 2.5rem !important; color: var(--muted); }
	body.app table.credit-history-table tbody td:nth-child(2) { grid-area: type; padding-left: 2.5rem !important; }
	body.app table.credit-history-table tbody td:nth-child(3) { grid-area: desc; display: flex !important; align-items: center; gap: 0.6rem; }
	body.app table.credit-history-table tbody td:nth-child(4) { grid-area: amt; font-weight: 700; }
	body.app table.credit-history-table tbody td:nth-child(5) { grid-area: bal; color: var(--muted); }
	body.app table.credit-history-table tbody td:nth-child(5)::before {
		content: "account_balance_wallet";
		font-family: "Material Icons Round";
		font-feature-settings: "liga";
		font-size: 0.95rem;
		vertical-align: -0.15em;
		margin-right: 0.25rem;
		color: var(--navy-600);
	}

	body.app :has(> table.credit-history-table) {
		overflow: visible !important;
	}
}

/* ===================== Checkout on phones: a slim bar with the total that takes you to the Order Summary ===================== */
.quote-jump { display: none; }

@media (max-width: 991.98px) {
	body.app .quote-jump {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 12px;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.55rem 0.55rem 0.55rem 1.1rem;
		border: 1px solid var(--line);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(8px);
		box-shadow: 0 14px 34px -14px rgba(15, 42, 60, 0.5);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	body.app .quote-jump.is-hidden {
		transform: translateY(140%);
		opacity: 0;
		pointer-events: none;
	}

	body.app .quote-jump-total {
		color: var(--navy-900);
		font-size: 1.35rem;
		font-weight: 800;
		font-variant-numeric: tabular-nums;
	}

	body.app .quote-jump .btn {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		width: auto !important;
		padding: 0.65rem 1rem;
	}
}

/* ===================== Long edit pages on phones / tablets: section chips under the header ===================== */
.app-form-chips { display: none; }

@media (max-width: 991.98px) {
	body.app .app-form-chips {
		position: sticky;
		top: var(--header-h);
		z-index: 15;
		display: flex;
		gap: 0.4rem;
		margin: -0.25rem -0.25rem 0;
		padding: 0.5rem 0.25rem;
		overflow-x: auto;
		scrollbar-width: none;
		background: none;
	}

	body.app .app-form-chips::-webkit-scrollbar { display: none; }

	body.app .app-form-chips a {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		flex-shrink: 0;
		padding: 0.35rem 0.75rem 0.35rem 0.4rem;
		border: 1px solid var(--line-strong);
		border-radius: 999px;
		background: var(--white);
		color: var(--ink-soft);
		font-size: 0.8rem;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	}

	body.app .app-form-chips a .material-icons-round {
		display: inline-grid;
		place-items: center;
		width: 1.45rem;
		height: 1.45rem;
		border-radius: 50%;
		background: var(--navy-50);
		color: var(--navy-700);
		font-size: 0.85rem;
	}

	body.app .app-form-chips a.is-current {
		border-color: var(--navy-800);
		background: var(--navy-800);
		color: #fff;
	}

	body.app .app-form-chips a.is-current .material-icons-round {
		background: rgba(255, 255, 255, 0.18);
		color: #fff;
	}

	body.app .app-form-chips a.has-error {
		border-color: var(--coral-500);
	}

	body.app .app-form-chips a.has-error::after {
		content: "";
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 50%;
		background: var(--coral-500);
	}

	/* Sections land below the header and the chip strip */
	body.app .app-section {
		scroll-margin-top: calc(var(--header-h) + 3.5rem);
	}
}

/* Phones: long page subtitles show one line until tapped */
@media (max-width: 575.98px) {
	body.app .app-head .app-subtitle.is-clamped:not(.is-open) {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
	}

	body.app .app-head .app-subtitle.is-clamped { cursor: pointer; }
}

@media (max-width: 991.98px) {
	/* The strip itself is see-through (it starts over the dark header); each chip carries its own lift */
	body.app .app-form-chips a {
		box-shadow: 0 4px 12px -6px rgba(15, 42, 60, 0.45);
	}
}

@media (max-width: 991.98px) {
	body.app .app-form-chips a.is-current {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 4px 12px -6px rgba(15, 42, 60, 0.45);
	}
}

/* ===================== Phones: Filter sits last in the toolbar, right above the panel it opens ===================== */
@media (max-width: 575.98px) {
	body.app .qw-toggle { order: 9; }
}

/* The open panel points up at the full-width Filter button */
@media (max-width: 575.98px) {
	body.app #queryWizardCollapse > .card { position: relative; overflow: visible; }

	body.app #queryWizardCollapse > .card::before {
		content: "";
		position: absolute;
		top: -7px;
		left: calc(50% - 6px);
		width: 12px;
		height: 12px;
		background: var(--navy-50);
		border-top: 1px solid var(--navy-100);
		border-left: 1px solid var(--navy-100);
		transform: rotate(45deg);
	}
}

/* ===================== Phones: each filter condition becomes a small card (group · and/or · remove / field / comparison + value) ===================== */
@media (max-width: 575.98px) {
	body.app table:has(> tbody[id$="QueryWizardRows"]),
	body.app tbody[id$="QueryWizardRows"] {
		display: block;
		width: 100%;
	}

	body.app table:has(> tbody[id$="QueryWizardRows"]) thead { display: none; }
	body.app tbody[id$="QueryWizardRows"] { border-top: 0 !important; }

	body.app tbody[id$="QueryWizardRows"] tr {
		display: grid;
		align-items: center;
		grid-template-columns: 3rem 5.5rem 1fr 2rem;
		grid-template-areas:
			"grp log .   del"
			"fld fld fld fld"
			"op  op  val val"
			"v2  v2  v2  v2";
		gap: 0.45rem;
		margin-bottom: 0.55rem;
		padding: 0.6rem 0.6rem 0.6rem 0.7rem;
		border: 1px solid var(--line);
		border-left: 3px solid var(--navy-600);
		border-radius: 0.75rem;
		background: var(--white);
	}

	body.app tbody[id$="QueryWizardRows"] td,
	body.app tbody[id$="QueryWizardRows"] td:first-child,
	body.app tbody[id$="QueryWizardRows"] td:last-child {
		display: block;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		min-width: 0;
	}

	body.app tbody[id$="QueryWizardRows"] td:nth-child(1) { grid-area: grp; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(2) { grid-area: log; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(3) { grid-area: fld; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(4) { grid-area: op; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(5) { grid-area: val; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(6) { grid-area: v2; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(7) { grid-area: del; justify-self: end; }

	body.app tbody[id$="QueryWizardRows"] select,
	body.app tbody[id$="QueryWizardRows"] input { width: 100% !important; }

	/* The second value only takes room for "between" comparisons */
	body.app tbody[id$="QueryWizardRows"] td:has(> .qw-value2[style*="hidden"]) { display: none; }
}

/* ===================== Tablets: each filter condition takes two lines so the field name has room ===================== */
@media (min-width: 576px) and (max-width: 991.98px) {
	body.app table:has(> tbody[id$="QueryWizardRows"]),
	body.app tbody[id$="QueryWizardRows"] {
		display: block;
		width: 100%;
	}

	body.app table:has(> tbody[id$="QueryWizardRows"]) thead { display: none; }
	body.app tbody[id$="QueryWizardRows"] { border-top: 0 !important; }

	/* group · and/or · field ········ · remove
	                   comparison · value · value 2 */
	body.app tbody[id$="QueryWizardRows"] tr {
		display: grid;
		align-items: center;
		grid-template-columns: 3rem 5.5rem minmax(8.5rem, 1fr) 1fr 1fr 2rem;
		grid-template-areas:
			"grp log fld fld fld del"
			".   .   op  val v2  .";
		gap: 0.45rem 0.55rem;
		margin-bottom: 0.55rem;
		padding: 0.6rem 0.6rem 0.6rem 0.7rem;
		border: 1px solid var(--line);
		border-left: 3px solid var(--navy-600);
		border-radius: 0.75rem;
		background: var(--white);
	}

	body.app tbody[id$="QueryWizardRows"] td,
	body.app tbody[id$="QueryWizardRows"] td:first-child,
	body.app tbody[id$="QueryWizardRows"] td:last-child {
		display: block;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		min-width: 0;
	}

	body.app tbody[id$="QueryWizardRows"] td:nth-child(1) { grid-area: grp; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(2) { grid-area: log; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(3) { grid-area: fld; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(4) { grid-area: op; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(5) { grid-area: val; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(6) { grid-area: v2; }
	body.app tbody[id$="QueryWizardRows"] td:nth-child(7) { grid-area: del; justify-self: end; }

	body.app tbody[id$="QueryWizardRows"] select,
	body.app tbody[id$="QueryWizardRows"] input { width: 100% !important; }

	/* One value: its box takes the second value's room too */
	body.app tbody[id$="QueryWizardRows"] tr:has(.qw-value2[style*="hidden"]) td:nth-child(5) { grid-column: 4 / 6; }
	body.app tbody[id$="QueryWizardRows"] td:has(> .qw-value2[style*="hidden"]) { display: none; }
}

/* ===================== Forms filter: choose a form first ===================== */
/* Add Condition fades until there's a form to pick fields from */
body.app #queryWizardCollapse [id^="add"][id$="QueryRow"]:disabled {
	opacity: 0.45;
	border-color: var(--line-strong) !important;
	background: transparent !important;
	color: var(--muted) !important;
	cursor: not-allowed;
	pointer-events: auto;
}

/* …and the empty form picker glows twice to show it's the first step */
body.app #queryWizardCollapse select[name="queryWizardFormId"]:has(option[value="0"]:checked) {
	border-color: var(--navy-600);
	animation: qw-form-call 1.4s ease-out 0.3s 2;
}

@keyframes qw-form-call {
	0%   { box-shadow: 0 0 0 0 rgba(42, 97, 132, 0.35); }
	100% { box-shadow: 0 0 0 9px rgba(42, 97, 132, 0); }
}

@media (prefers-reduced-motion: reduce) {
	body.app #queryWizardCollapse select[name="queryWizardFormId"]:has(option[value="0"]:checked) { animation: none; }
}

/* ===================== Filter matched nothing: an outlined icon (not "start here") and the way back ===================== */
body.app .app-empty.is-filtered .app-empty-icon {
	background: var(--white);
	border: 1.5px dashed #8aa6b9;
	color: var(--navy-600);
	box-shadow: none;
}

body.app .app-empty.is-filtered h2 { margin-bottom: 1.1rem; }

/* ===================== Filtered list: a chip above the rows with the match count and a clear (×) ===================== */
body.app .filter-active-chip {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.1rem;
	margin: 0 0 0.75rem;
	padding: 0.2rem;
	border: 1px solid var(--navy-100);
	border-radius: 999px;
	background: var(--navy-50);
	color: var(--navy-800);
	font-size: 0.85rem;
	animation: department-message-in 0.25s ease;
}

body.app .filter-active-open .material-icons-round {
	font-size: 1rem;
	color: var(--navy-600);
}

body.app .filter-active-chip strong { font-weight: 800; }

body.app .filter-active-clear {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	color: var(--navy-700);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.app .filter-active-clear .material-icons-round { font-size: 1rem; }

body.app .filter-active-clear:hover,
body.app .filter-active-clear:focus-visible {
	background: var(--navy-700);
	color: var(--white);
}

@media print { body.app .filter-active-chip { display: none; } }

/* The count opens the filter panel */
body.app .filter-active-open {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0.6rem 0.15rem 0.5rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.app .filter-active-open:hover,
body.app .filter-active-open:focus-visible,
body.app .filter-active-open[aria-expanded="true"] {
	background: var(--white);
}

/* ===================== Inactive filers/recipients (Show inactive on): faded row, grey dashed avatar, small pill ===================== */
body.app tr.is-inactive .recipient-cell > span:not(.recipient-avatar):not(.inactive-pill),
body.app tr.is-inactive .tin-text,
body.app tr.is-inactive .address-cell,
body.app tr.is-inactive .address-cell .address-line,
body.app tr.is-inactive .address-cell .address-place {
	color: var(--muted) !important;
}

body.app tr.is-inactive .recipient-avatar {
	background: var(--white) !important;
	border: 1.5px dashed #8aa6b9;
	color: #8aa6b9 !important;
	box-shadow: none;
}

body.app .inactive-pill {
	display: inline-flex;
	align-items: center;
	margin-left: 0.5rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--paper-deep);
	color: var(--ink-soft);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ===================== Edit page of an inactive filer/recipient: dashed header avatar + an Inactive pill (links to the Active switch) ===================== */
body.app .app-title.is-inactive .app-title-avatar .recipient-avatar {
	background: transparent !important;
	border: 1.5px dashed rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.65) !important;
}

body.app .app-title-inactive {
	display: inline-flex;
	align-items: center;
	margin-left: 0.75rem;
	padding: 0.2rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.9) !important;
	font-family: var(--font-sans, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	vertical-align: 0.35em;
	animation: app-title-icon-in 0.3s ease both;
	transition: background-color 0.15s ease;
}

body.app .app-title-inactive[hidden] { display: none; }

body.app .app-title-inactive:hover,
body.app .app-title-inactive:focus-visible {
	background: rgba(255, 255, 255, 0.22);
}

/* ===================== Recipients: the filer picker shows the chosen filer's monogram; a spinner ring while switching ===================== */
body.app .filer-picker-icon.is-mono {
	background: transparent;
	overflow: visible;
}

body.app .filer-picker-icon.is-mono .recipient-avatar {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 0.45rem;
	font-size: 0.6rem;
	transition: opacity 0.2s ease;
}

body.app .filer-picker.is-switching .filer-picker-icon.is-mono .recipient-avatar { opacity: 0.25; }

body.app .filer-picker.is-switching .filer-picker-icon.is-mono::after {
	content: "";
	position: absolute;
	inset: 0.2rem;
	border: 2px solid var(--navy-100);
	border-top-color: var(--navy-700);
	border-radius: 50%;
	animation: filer-picker-spin 0.7s linear infinite;
}

body.app .filer-picker.is-switching .form-select {
	border-color: var(--navy-600);
	background-color: var(--navy-50);
	pointer-events: none;
}

@keyframes filer-picker-spin { to { transform: rotate(360deg); } }

/* ===================== Forms list (several filers): which filer a form belongs to, as a tiny monogram + name ===================== */
body.app .uf-payer {
	display: flex !important;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.2rem;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 500;
}

body.app .uf-payer.recipient-cell.is-filer .recipient-avatar {
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 0.3rem;
	font-size: 0.5rem;
	letter-spacing: 0;
}

body.app tr:hover .uf-payer .recipient-avatar { transform: none; box-shadow: none; }

/* Order Details: the filer line sits outside the form link, so line it up under the form name */
body.app .uf-payer.is-under-tile { margin-left: 2.6rem; }

/* ===================== Order Details: email sent from this page → the envelope turns green with a check ===================== */
body.app .alert.app-flash[hidden] { display: none !important; }

body.app .email-form-btn.is-sent {
	border-color: #b9dfcb !important;
	background: var(--green-100) !important;
	color: var(--green-700) !important;
	animation: email-sent-pop 0.4s ease;
}

body.app .email-form-btn.is-sent:hover {
	border-color: var(--green-700) !important;
	background: var(--green-700) !important;
	color: var(--white) !important;
}

@keyframes email-sent-pop {
	0%   { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(46, 125, 84, 0.35); }
	60%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(46, 125, 84, 0); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) { body.app .email-form-btn.is-sent { animation: none; } }

/* ===================== Recipients selection bar: a request that couldn't be prepared → coral bar, short shake, message in the hint ===================== */
body.app .bulk-bar.is-error {
	border-style: solid;
	border-color: var(--coral-500) !important;
	background: #fff6f3 !important;
	animation: bulk-bar-shake 0.35s ease;
}

body.app .bulk-bar.is-error .bulk-bar-icon {
	background: var(--coral-600);
	border-color: var(--coral-600);
	color: #fff;
}

body.app .bulk-bar.is-error .bulk-bar-hint {
	display: block !important;
	color: var(--coral-700) !important;
	font-weight: 600;
}

@keyframes bulk-bar-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	50% { transform: translateX(4px); }
	75% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) { body.app .bulk-bar.is-error { animation: none; } }

/* ===================== Order Details email dialog: which form goes to whom, as a small "form → recipient" strip ===================== */
body.app .email-who {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--line);
	border-radius: 0.9rem;
	background: var(--paper);
}

body.app .email-who-form,
body.app .email-who-to {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--navy-900);
	font-weight: 700;
}

body.app .email-who-form .form-kind-tile { position: static; }

body.app .email-who-arrow {
	color: var(--coral-500);
	font-size: 1.2rem;
	animation: email-who-nudge 1.6s ease-in-out infinite;
}

@keyframes email-who-nudge {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) { body.app .email-who-arrow { animation: none; } }

/* ===================== Busy buttons (Send Email, Buy credits): a spinner ring inside the button, kept at full colour ===================== */
body.app .btn.is-busy,
body.app .btn.is-busy:disabled {
	opacity: 1 !important;
	pointer-events: none;
	cursor: progress;
}

body.app .btn.is-busy::before {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-right: 0.5em;
	vertical-align: -0.15em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: btn-busy-spin 0.7s linear infinite;
}

@keyframes btn-busy-spin { to { transform: rotate(360deg); } }

/* ===================== Saving dialog: the record's own monogram sits inside the spinning ring ===================== */
#modal-notification .modal-tone-icon.has-avatar #modal-icon { display: none; }

#modal-notification .modal-tone-icon.has-avatar .recipient-avatar {
	width: 52px;
	height: 52px;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
}

#modal-notification .modal-tone-icon.has-avatar.is-filer .recipient-avatar { border-radius: 50%; }

/* ===================== Delete confirmations from a list: the record being deleted, as a small card ===================== */
#modal-notification .modal-subject {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	max-width: 22rem;
	margin: 0.25rem auto 0.9rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 0.9rem;
	background: var(--paper);
	text-align: left;
	animation: department-message-in 0.25s ease;
}

#modal-notification .modal-subject-avatar {
	position: relative;
	flex-shrink: 0;
}

#modal-notification .modal-subject-avatar .recipient-avatar {
	width: 2.4rem;
	height: 2.4rem;
	font-size: 0.85rem;
}

#modal-notification .modal-subject.is-filer .recipient-avatar { border-radius: 0.6rem; }

/* A small coral delete badge on the avatar's corner */
#modal-notification .modal-subject-badge {
	position: absolute;
	right: -6px;
	bottom: -6px;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--paper);
	border-radius: 50%;
	background: var(--coral-600);
	color: #fff;
	font-size: 0.7rem;
}

#modal-notification .modal-subject-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

#modal-notification .modal-subject-text strong {
	color: var(--navy-900);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#modal-notification .modal-subject-text small {
	color: var(--muted);
	font-size: 0.8rem;
}

/* Imports: the form tile stands in for the avatar on the delete card */
#modal-notification .modal-subject-avatar .form-kind-tile {
	position: static;
	display: inline-grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 0.6rem;
}

/* ===================== Filer Edit: deleting a department shows it as a card (monogram with a coral minus badge, name, contact) ===================== */
#departmentDeleteModal .dept-del-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.9rem auto 0.8rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 0.9rem;
	background: var(--paper);
	text-align: left;
}

#departmentDeleteModal .modal-subject-avatar { position: relative; flex-shrink: 0; }

#departmentDeleteModal .modal-subject-badge {
	position: absolute;
	right: -6px;
	bottom: -6px;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--paper);
	border-radius: 50%;
	background: var(--coral-600);
	color: #fff;
	font-size: 0.7rem;
}

#departmentDeleteModal .modal-subject-text { display: flex; flex-direction: column; min-width: 0; }

#departmentDeleteModal .modal-subject-text strong {
	color: var(--navy-900);
	font-size: 0.9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#departmentDeleteModal .modal-subject-text small { color: var(--muted); font-size: 0.78rem; }

/* ===================== Forms list: the row you just added to / removed from the cart glows briefly ===================== */
body.app tr.just-changed > td {
	animation: row-just-changed 1.8s ease-out;
}

@keyframes row-just-changed {
	0%, 25% { background-color: var(--navy-50); }
	100% { background-color: transparent; }
}

@media (max-width: 575.98px) {
	body.app tr.just-changed { animation: row-just-changed 1.8s ease-out; }
	body.app tr.just-changed > td { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	body.app tr.just-changed, body.app tr.just-changed > td { animation-duration: 0.01s; }
}

/* ===================== Checkout summary: the services the subtotal covers, as small chips ===================== */
body.app .quote-services {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: -0.15rem 0 0.6rem;
}

body.app .quote-service {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.55rem 0.15rem 0.45rem;
	border: 1px solid var(--navy-100);
	border-radius: 999px;
	background: var(--navy-50);
	color: var(--navy-800);
	font-size: 0.72rem;
	font-weight: 700;
	animation: department-message-in 0.25s ease;
}

body.app .quote-service .material-icons-round {
	font-size: 0.9rem;
	color: var(--navy-600);
}

/* ===================== Checkout → Order Details: overlapping avatars of who each form group is for ===================== */
body.app .avatar-stack {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

body.app .avatar-stack .recipient-avatar,
body.app .avatar-stack-more {
	width: 1.75rem;
	height: 1.75rem;
	margin-left: -0.45rem;
	border: 2px solid var(--white);
	font-size: 0.6rem;
}

body.app .avatar-stack > :first-child { margin-left: 0; }

body.app .avatar-stack-more {
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	background: var(--navy-700);
	color: #fff;
	font-weight: 800;
}

@media (max-width: 575.98px) {
	body.app .avatar-stack { display: none; }
}

/* ===================== Recipients: "Not checked" is the quiet default (dashed outline), so checked results stand out ===================== */
body.app .badge.tin-badge.is-unchecked {
	border: 1px dashed var(--line-strong) !important;
	background: transparent !important;
	color: var(--muted) !important;
	font-weight: 600;
	box-shadow: none !important;
}

body.app .badge.tin-badge.is-unchecked .material-icons-round {
	color: #8aa6b9 !important;
}

/* ===================== Recipients: no W-9 requested yet — a quiet dashed envelope, matching "Not checked" beside it ===================== */
body.app .w9-none {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px dashed var(--line-strong);
	border-radius: 50%;
	color: #8aa6b9;
}

body.app .w9-none .material-icons-round { font-size: 0.85rem; }

/* ===================== Forms list: "Not in Cart" is the quiet default (dashed outline), so In Cart and flagged forms stand out ===================== */
body.app .badge.is-idle {
	border: 1px dashed var(--line-strong) !important;
	background: transparent !important;
	color: var(--muted) !important;
	font-weight: 600;
	box-shadow: none !important;
}

body.app .badge.is-idle i,
body.app .badge.is-idle a { color: inherit !important; }

/* ===================== Creating a form: the header stepper shows that flow (form, filer, recipient, details) ===================== */
.app-stepper .app-step-static {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.85rem 0.35rem 0.4rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.875rem;
	font-weight: 600;
}

.app-stepper li.current .app-step-static {
	background: #fff;
	border-color: #fff;
	color: var(--navy-900);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.45);
}

.app-stepper .app-step-done { font-size: 15px; }

/* A chosen name can be long: keep each finished step to one tidy line */
.app-stepper.is-flow .app-step-label {
	max-width: 15rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===================== Checkout: a click on the disabled Complete Order points to the missing CVV ===================== */
body.app .complete-order-wrap { position: relative; }
body.app .complete-order-wrap:has(#CompleteOrder:disabled) { cursor: pointer; }
body.app #CompleteOrder:disabled { pointer-events: none; }

body.app .cvv-field.needs-cvv .cvv-input .form-control {
	border-color: var(--navy-600) !important;
	box-shadow: 0 0 0 4px rgba(42, 97, 132, 0.2) !important;
}

body.app .cvv-field.needs-cvv .cvv-input {
	animation: bulk-bar-shake 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	body.app .cvv-field.needs-cvv .cvv-input { animation: none; }
}

/* Retry payment: same nudge for its CVV box */
body.app .complete-order-wrap:has(#CompleteOrderRetry:disabled) { cursor: pointer; }
body.app #CompleteOrderRetry:disabled { pointer-events: none; }

body.app .cvv-retry-field.needs-cvv .form-control {
	border-color: var(--navy-600) !important;
	box-shadow: 0 0 0 4px rgba(42, 97, 132, 0.2) !important;
	animation: bulk-bar-shake 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	body.app .cvv-retry-field.needs-cvv .form-control { animation: none; }
}

/* ===================== Filer Edit → State IDs: no state picked yet → the picker itself turns coral and shakes (message kept for screen readers only) ===================== */
body.app #FilerState_State-error {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body.app select#FilerState_State.error {
	border-color: var(--coral-500) !important;
	box-shadow: 0 0 0 4px rgba(200, 67, 45, 0.15) !important;
	animation: bulk-bar-shake 0.35s ease;
}

@media (prefers-reduced-motion: reduce) { body.app select#FilerState_State.error { animation: none; } }

/* IRS form pages: the small box-level pickers are only 16px tall; no vertical padding so their text isn't clipped */
body.app .form-sheet select.FormField {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1.1;
}

/* ===================== IRS form pages on small phones: round arrows on the sideways-scrolling form ===================== */
body.app .sheet-nudge-host { position: relative; }

body.app .sheet-nudge {
	position: absolute;
	z-index: 15;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: -1.25rem;
	padding: 0;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: var(--navy-700);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(15, 42, 60, 0.6);
	opacity: 0;
	pointer-events: none;
	transform: scale(0.8);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

body.app .sheet-nudge.is-next { right: 6px; }
body.app .sheet-nudge.is-prev { left: 6px; }

body.app .sheet-nudge.is-shown {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

body.app .sheet-nudge .material-icons-round { font-size: 1.5rem; }

@media (prefers-reduced-motion: reduce) { body.app .sheet-nudge { transition: none; } }

/* Phones: header buttons (e.g. Credit history's Back to Buy Credits) wrap to the bottom of the band; leave room so the card below doesn't crowd them */
@media (max-width: 575.98px) {
	body.app .app-head:has(.app-head-actions) { padding-bottom: 4.75rem; }
}

/* ===================== Recipients on phones: with recipients ticked, the selection bar stays in view under the header ===================== */
@media (max-width: 575.98px) {
	body.app .bulk-bar.is-active {
		position: sticky;
		top: calc(var(--header-h, 68px) + 8px);
		z-index: 30;
		box-shadow: 0 14px 30px -16px rgba(15, 42, 60, 0.55);
	}

	/* Compact while it follows you: the explanation line steps aside, the count and buttons stay */
	body.app .bulk-bar.is-active:not(.is-error) .bulk-bar-hint { display: none; }
}

/* ===================== Recipients on wide screens (1200px+): with recipients ticked, the selection bar stays in view too ===================== */
@media (min-width: 1200px) {
	/* The list fits without sideways scrolling here, so its wrapper can let the bar stick */
	body.app .table-responsive:has(> #tinActionBar.is-active) { overflow: visible !important; }

	body.app .bulk-bar.is-active {
		position: sticky;
		top: calc(var(--header-h, 68px) + 8px);
		z-index: 30;
		box-shadow: 0 14px 30px -16px rgba(15, 42, 60, 0.55);
	}
}

/* Recipients: on a ticked (tinted) row the initials avatar keeps a thin white ring so it doesn't wash into the tint */
body.app tr.is-selected .recipient-avatar {
	box-shadow: 0 0 0 2px var(--white);
}

/* Recipients: the row-opens chevron doesn't belong in the tick-box cell (and on phone cards it nudged the box out of line with the name) */
body.app tr[data-href] td.app-table-check::after { content: none !important; display: none !important; }

/* ===================== Forms list on tablets: wrap long names and trim cell padding so the table fits (no cut-off Actions column) ===================== */
@media (min-width: 768px) and (max-width: 991.98px) {
	body.app table.cardlist-forms th,
	body.app table.cardlist-forms td {
		white-space: normal;
		padding-left: 0.6rem !important;
		padding-right: 0.6rem !important;
	}

	body.app table.cardlist-forms td:last-child .btn { white-space: nowrap; }

	/* Form type and TIN stay on one line (no "1099-" / "NEC" break); only names wrap */
	body.app table.cardlist-forms td:nth-child(1),
	body.app table.cardlist-forms td:nth-child(3) { white-space: nowrap; }
}

/* ===================== Recipients and Filers on tablets (768-991px): a full-width table whose names and addresses wrap, so Actions isn't cut off ===================== */
@media (min-width: 768px) and (max-width: 991.98px) {
	body.app table.cardlist-recipients,
	body.app table.cardlist-filers {
		display: table;
		width: 100%;
	}

	body.app table.cardlist-recipients th,
	body.app table.cardlist-recipients td,
	body.app table.cardlist-filers th,
	body.app table.cardlist-filers td {
		white-space: normal;
		padding-left: 0.55rem !important;
		padding-right: 0.55rem !important;
	}

	/* TINs and the small status pills stay on one line */
	body.app table.cardlist-recipients .tin-text,
	body.app table.cardlist-filers .tin-text,
	body.app table.cardlist-recipients .tin-badge { white-space: nowrap; }
}

/* ===================== Orders and Imports on tablets (768-991px): a full-width table that wraps, so Upload Date and Actions aren't cut off ===================== */
@media (min-width: 900px) and (max-width: 991.98px) {
	body.app table.cardlist-orders,
	body.app table.cardlist-imports {
		display: table;
		width: 100%;
	}

	body.app table.cardlist-orders th,
	body.app table.cardlist-orders td,
	body.app table.cardlist-imports th,
	body.app table.cardlist-imports td {
		white-space: normal;
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}

	/* Dates, form types, badges and the Actions button stay on one line */
	body.app table.cardlist-imports td:nth-child(6),
	body.app table.cardlist-orders td:nth-child(3),
	body.app table.cardlist-orders .badge,
	body.app table.cardlist-imports .badge,
	body.app table.cardlist-orders .dropdown-toggle,
	body.app table.cardlist-imports .dropdown-toggle { white-space: nowrap; }
}

/* Checkout Order Details: an open group lists its people, so the header's avatar stack steps back */
.breakdown-item .avatar-stack { transition: opacity .18s ease; }
.breakdown-item .accordion-button:not(.collapsed) .avatar-stack { opacity: 0; }

/* Card previews: the brand logo appears once the number shows which card it is, with a soft pop */
.pay-card-brand.is-new { animation: payBrandIn .28s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes payBrandIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pay-card-brand.is-new { animation: none; } }

/* Floating labels sit in a notch cut by a 2px strip behind them; a focused field adds a 3px ring around its border,
   which showed through as a line struck across the label. A taller strip covers the ring and the border. */
body.app .border-lable-flt label::after,
body.app .border-lable-flt > span::after {
	top: calc(50% - 4px);
	height: 6px;
	background: var(--white, #fff);
}

/* A field with an error: its floating label turns coral with the border, so the field names what needs fixing */
body.app .form-group:has(.field-validation-error) .border-lable-flt > label,
body.app .border-lable-flt:has(.input-validation-error) > label {
	color: var(--coral-600, #c2412d);
	transition: color 0.15s ease;
}

/* Items in the error summary that jump to their field */
body.app .validation-summary-errors .summary-jump {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(194, 65, 45, 0.35);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.15s ease;
}

body.app .validation-summary-errors .summary-jump:hover,
body.app .validation-summary-errors .summary-jump:focus-visible {
	text-decoration-color: currentColor;
}

/* IRS form pages: unsaved changes put a small coral dot on the Save button */
body.app .btn.has-changes {
	position: relative;
	overflow: visible;
}

body.app .btn.has-changes::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--coral-500, #e4553f);
	box-shadow: 0 0 0 2px #fff;
	animation: unsavedDotIn 0.25s cubic-bezier(.2, .8, .3, 1.3);
}

@keyframes unsavedDotIn { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { body.app .btn.has-changes::after { animation: none; } }

/* IRS form pages: dollar amounts sit right-aligned with even-width digits, as on a printed form, so cents line up */
body.app .form-sheet input.money {
	text-align: right;
	font-variant-numeric: tabular-nums;
	padding-right: 6px !important;
}

/* Short laptop screens (e.g. 1366x768): a tighter page header so the page's own content starts higher */
@media (min-width: 576px) and (max-height: 820px) {
	.app-head {
		padding-top: 1.35rem;
	}

	.app-head .app-eyebrow {
		margin-bottom: 0.4rem;
	}

	.app-head .app-subtitle {
		margin-top: 0.35rem;
	}

	.app-head-steps .app-head-inner + .app-head-inner {
		margin-top: 1rem;
	}
}

/* Filer edit: Add Department is a dashed tile under the department cards, where the new one will appear */
body.app .dept-add-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.85rem 1rem;
	border: 1.5px dashed var(--line-strong);
	border-radius: 14px;
	background: transparent;
	color: var(--navy-700);
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

body.app .dept-add-tile .material-icons-round {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--navy-50);
	font-size: 1.1rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.app .dept-add-tile:hover,
body.app .dept-add-tile:focus-visible {
	border-color: var(--navy-600);
	background: var(--navy-50);
	color: var(--navy-900);
}

body.app .dept-add-tile:hover .material-icons-round,
body.app .dept-add-tile:focus-visible .material-icons-round {
	background: var(--navy-700);
	color: #fff;
}

/* Filer edit, State IDs: the saved state you've picked in the add row is highlighted (Save will update it) */
body.app .state-id-chip {
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

body.app .state-id-chip.is-picked {
	border-color: var(--navy-600);
	background: var(--navy-50);
	box-shadow: 0 0 0 3px rgba(42, 97, 132, 0.15);
}

body.app #SaveStateIdBtn {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

/* Filer edit, State IDs: the chip you just saved pops in and glows for a moment */
body.app .state-id-chip.just-saved {
	animation: stateChipSaved 2.2s ease-out;
}

@keyframes stateChipSaved {
	0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(23, 105, 76, 0.45); border-color: var(--green-600); background: var(--green-100); }
	15% { transform: scale(1.04); }
	30% { transform: none; box-shadow: 0 0 0 6px rgba(23, 105, 76, 0.18); border-color: var(--green-600); background: var(--green-100); }
	100% { box-shadow: 0 0 0 0 rgba(23, 105, 76, 0); }
}

@media (prefers-reduced-motion: reduce) {
	body.app .state-id-chip.just-saved { animation: none; border-color: var(--green-600); }
}

/* A busy button shows only its spinner, not its spinner next to its usual icon */
body.app .btn.is-busy > .material-icons-round,
body.app .btn.is-busy > .material-icons {
	display: none;
}

/* Wide screens: a long list's column headings stay pinned under the top bar while you scroll.
   (The tables fit at this width, so their box clips instead of scrolling, which lets the headings stick to the page.) */
@media (min-width: 1200px) {
	/* Every box a pinned-heading table sits in must clip, not scroll: a scrolling box (an order's forms sit in a
	   .table-responsive) becomes what the heading pins to, so it sat a top bar's height down, over the first row */
	body.app .table-responsive:has(> .app-table):not(:has(> #tinActionBar.is-active)),
	body.app .table-responsive:has(> .modern-table),
	body.app .modern-table-container,
	body.app .app-table {
		overflow: clip !important;
	}

	body.app .app-table > thead th,
	body.app .modern-table > thead th {
		position: sticky;
		top: var(--header-h, 68px);
		z-index: 4;
		background-color: #f7f5f0;
	}

	/* The Recipients action bar pins itself while recipients are ticked; the headings step aside then */
	body.app .table-responsive:has(> #tinActionBar.is-active) > .app-table > thead th {
		position: static;
	}
}

/* Pinned list headings: a soft shadow while rows scroll beneath them */
@media (min-width: 1200px) {
	body.app .app-table > thead th,
	body.app .modern-table > thead th {
		transition: box-shadow 0.2s ease;
	}

	body.app .is-head-stuck > thead th {
		box-shadow: 0 1px 0 var(--line), 0 10px 14px -10px rgba(15, 42, 60, 0.28);
	}
}

/* Imports on phones/tablets (card layout): an import with no label leaves no empty line in its card */
@media (max-width: 899.98px) {
	body.app .cardlist-imports td.import-label-empty,
	body.app .cardlist-imports td.import-count-pending { display: none !important; }
}

/* Imports on tablets: the form name can wrap under its year, so the whole table fits without scrolling sideways */
@media (min-width: 900px) and (max-width: 991.98px) {
	body.app table.cardlist-imports td:nth-child(1) .has-form-tile { white-space: normal; }
	body.app table.cardlist-imports td:nth-child(1) .import-form-type { display: block; }
}

/* Forms on tablets: the year sits above the form name, so the table fits without scrolling sideways */
@media (min-width: 768px) and (max-width: 991.98px) {
	body.app table.cardlist-forms td:nth-child(1) .form-year {
		display: block;
		line-height: 1.2;
		font-size: 0.85em;
	}

	body.app table.cardlist-forms td:nth-child(1) .has-form-tile {
		align-items: center;
	}
}

@media (min-width: 768px) and (max-width: 859.98px) {
	body.app table.cardlist-forms th,
	body.app table.cardlist-forms td {
		padding-left: 0.3rem !important;
		padding-right: 0.3rem !important;
	}
}

/* Filers list: a quiet pill to jump to that filer's recipients, next to Delete */
body.app .filer-actions {
	white-space: nowrap;
}

body.app .filer-recipients-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-right: 0.4rem;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--navy-700);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.app .filer-recipients-btn .material-icons-round {
	font-size: 1rem;
}

body.app .filer-recipients-btn:hover,
body.app .filer-recipients-btn:focus-visible {
	background: var(--navy-700);
	border-color: var(--navy-700);
	color: #fff;
}

/* Recipients reached from the Filers list: the filer picker glows once to show which filer's list this is */
body.app .filer-picker.just-picked select {
	animation: filerJustPicked 1.8s ease-out;
}

@keyframes filerJustPicked {
	0%, 30% { border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(42, 97, 132, 0.22); background-color: var(--navy-50); }
	100% { box-shadow: 0 0 0 0 rgba(42, 97, 132, 0); }
}

@media (prefers-reduced-motion: reduce) {
	body.app .filer-picker.just-picked select { animation: none; }
}