/*
 * PostMyDoc Business — plugin-wide base styles.
 *
 * Loaded on every plugin surface: dashboard (Session 2), branded login
 * (Session 3b Phase 2), order builder (Phase 5), business emails (Phase 4).
 *
 * Owns the canonical design tokens and the shared component system
 * (buttons, form inputs, badges, logo sizing). Page-specific stylesheets
 * add layout on top and MUST NOT redefine tokens or button colours.
 *
 * Button selectors use two classes (.pmd-btn.pmd-btn-primary) so they
 * beat theme-level anchor colour inheritance — e.g. .pmd-dashboard a
 * with color: inherit — without needing !important.
 */

:root {
	/* ---- Brand ------------------------------------------------------- */
	--pmd-navy:         #1c192d;
	--pmd-navy-80:      #2d2a44;
	--pmd-navy-60:      #494762;
	--pmd-cyan:         #a5f2ff;
	--pmd-cyan-dark:    #6fdcef;
	--pmd-white:        #ffffff;

	/* ---- Neutrals ---------------------------------------------------- */
	--pmd-bg-light:     #f8f9fc;
	--pmd-surface:      #f7f8fb;
	--pmd-surface-2:    #eef0f5;
	--pmd-border:       #e3e6ee;
	--pmd-border-strong:#cfd3de;

	/* ---- Text -------------------------------------------------------- */
	--pmd-text:         #1c192d;
	--pmd-text-primary: #1c192d;
	--pmd-text-muted:   #5b5e70;
	/* Soft metadata text. Held to WCAG AA (4.5:1) on white AND on the
	 * tinted near-white surfaces it lands on (surface #f7f8fb, surface-2
	 * #eef0f5, line-2 #eef1f6). #65687a clears 4.5:1 on all of them
	 * (5.5:1 on white, 4.8:1 on surface-2); the previous #6a6d7e dipped to
	 * 4.49:1 on surface-2. See IMPECCABLE-AUDIT.md P1. */
	--pmd-text-soft:    #65687a;

	/* ---- Status ------------------------------------------------------ */
	--pmd-success:      #0f7a46;
	--pmd-success-bg:   #e4f5ec;
	--pmd-warn:         #8a5c00; /* P2-16 settlement: 5.35:1 on warn-bg, 5.81:1 on white */
	--pmd-warning:      #8a5c00;
	--pmd-warn-bg:      #fff5da;
	--pmd-info:         #1e4a6b;
	--pmd-info-bg:      #e0eaf2;
	--pmd-danger:       #a82020;
	--pmd-error:        #a82020;
	--pmd-danger-bg:    #fde5e5;

	/* ---- Radius ------------------------------------------------------ */
	/* Canonical radius scale (mockups are source of truth — see DESIGN.md).
	 * Customer-facing text inputs render at 7px per the approved mockups;
	 * that 7px is applied per-surface (order builder, account) rather than
	 * by repointing --pmd-radius-md, so this token block stays neutral.
	 * The legacy --pmd-r* set below now aliases these (one source). */
	--pmd-radius-sm:    6px;
	--pmd-radius-md:    8px;
	--pmd-radius-lg:    10px;
	--pmd-radius-pill:  999px;
	--pmd-radius-stroke: 2px; /* decorative hairline strokes/glyphs ≤4px (G-11: stamp dashes, nav marker, underline caps, timeline line) — NOT for UI surfaces */

	/* ---- Spacing scale (4pt base) -----------------------------------
	 * Phase 1 foundation (0.23.21). ADDITIVE — no consumers yet, so this
	 * commit is visually neutral. Raw-px padding/margin/gap usages migrate
	 * onto these tokens per-surface (Phase 2), where off-scale one-offs
	 * (14 / 18 / 22 / 26px …) get snapped to the nearest step under the
	 * deploy + screenshot loop. Dominant in-use values (8/12/16/20/24)
	 * already sit on the scale. See IMPECCABLE-LAYOUT.md. */
	--pmd-space-3xs:    2px;
	--pmd-space-2xs:    4px;
	--pmd-space-xs:     8px;
	--pmd-space-sm:     12px;
	--pmd-space-sm-plus: 14px;  /* dominant field/rhythm gap (41 uses in order builder);
	                              retained from the original DESIGN.md 4/8/14/20/28 scale
	                              rather than snapped to 12/16. See IMPECCABLE-LAYOUT.md Phase 0. */
	--pmd-space-md:     16px;
	--pmd-space-lg:     20px;
	--pmd-space-xl:     24px;
	--pmd-space-2xl:    32px;
	--pmd-space-3xl:    48px;

	/* ---- Fonts (IBM Plex Sans body for the B2B portal; see dashboard/
	 *      application enqueues. Poppins still carries display.) -------- */
	--pmd-font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--pmd-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--pmd-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* postal/proof register (G-11) */
	/* Focus ring (G Unit 9 critique P1): raw cyan was 1.25:1 on white and
	   invisible on the cyan CTA. Blue-deep clears 3:1 on white AND on cyan.
	   Every :focus-visible outline in the portal points here. */
	--pmd-focus-ring:   #1382bf;
	/* Input boundary (G Unit 9 critique P2): border-strong (#cfd3de) is
	   1.5:1 on white, so field extents failed non-text contrast. */
	--pmd-border-input: #868c9c;

	/* ---- Shadows ----------------------------------------------------- */
	--pmd-shadow-card:  0 1px 2px rgba(28,25,45,.04), 0 4px 14px rgba(28,25,45,.06);
	--pmd-shadow-hover: 0 2px 4px rgba(28,25,45,.05), 0 10px 28px rgba(28,25,45,.09);

	/* ============================================================
	 * "Ink over paper" redesign tokens (B2B portal). ADDITIVE — the
	 * brand/neutral/status tokens above stay load-bearing for the
	 * signup form, legal pages, login and emails.
	 * ============================================================ */
	--pmd-navy-2:       #241f3a;   /* lighter ink — hover on navy buttons */
	--pmd-rail-ink:     #171426;   /* deepest rail gradient stop */
	--pmd-cyan-ink:     #0e7490;   /* cyan that reads as dark text */
	--pmd-rail-text:    #aeb1c6;   /* rail body text */
	--pmd-rail-dim:     #7a7d95;   /* rail muted */
	--pmd-desk:         #e3f1f5;   /* cyan-tinted "paper desk" page bg */
	--pmd-paper:        #ffffff;   /* card face */
	--pmd-ink:          #1c192d;   /* primary ink (alias of --pmd-text) */
	--pmd-line:         #e3e6ee;   /* hairline (alias of --pmd-border) */
	--pmd-line-2:       #eef1f6;   /* faintest divider / table header fill */
	--pmd-sig-active:   #6fdcef;   /* signal dot — in transit / dispatched */
	--pmd-sig-proc:     #caa53a;   /* signal dot — processing (amber) */
	--pmd-sig-done:     #0f7a46;   /* signal dot — delivered / posted (green) */
	--pmd-amber:        #8a5d00;   /* amber ink (text) */
	--pmd-green:        #0f7a46;   /* green ink (alias) */
	--pmd-r:            var(--pmd-radius-sm);  /* legacy alias → canonical */
	--pmd-r-md:         var(--pmd-radius-md);  /* legacy alias → canonical */
	--pmd-r-lg:         var(--pmd-radius-lg);  /* legacy alias → canonical */
	--pmd-rail-w:       248px;      /* left ink rail width */
	--pmd-sheet:        0 1px 2px rgba(23,20,38,.04), 0 8px 24px -10px rgba(23,20,38,.12); /* card on desk */
	--pmd-rail-shadow:  inset -1px 0 0 rgba(255,255,255,.04), 1px 0 30px -12px rgba(0,0,0,.55);

	/* ============================================================
	 * Extracted literals → tokens (IMPECCABLE-AUDIT.md P2 colorize).
	 * Recurring hard-coded values across the portal CSS promoted to
	 * single-source tokens so a future palette change lands in ONE place.
	 * Values are preserved EXACTLY — this is a theming fix, not a recolour.
	 * Email templates intentionally keep literals (mail clients strip CSS
	 * vars) and operator admin.css is out of the portal-frontend scope.
	 * ============================================================ */
	--pmd-ink-soft:      #4b4861;   /* soft ink body text — modals, CSV, processing copy */
	--pmd-border-hover:  #aab0c2;   /* choice-card / control hover border */
	--pmd-cyan-wash:     #ecfaff;   /* selected-choice + upload tint (the functional wash) */
	--pmd-danger-ink:    #9e1d16;   /* inline error text */
	--pmd-danger-wash:   #fff4f2;   /* error background tint (lighter than --pmd-danger-bg) */
	--pmd-danger-border: #fecdca;   /* error border (was an undefined var() fallback) */
	--pmd-danger-solid:  #a31515;   /* filled danger control (delete) + hard-error ink */
	/* RGB channel triples for alpha overlays — collapse the repeated rgba()
	 * literals to one source each. Use as rgba(var(--pmd-ink-rgb), .08). */
	--pmd-ink-rgb:       28, 25, 45;
	--pmd-white-rgb:     255, 255, 255;
	--pmd-cyan-rgb:      165, 242, 255;
	--pmd-rail-ink-rgb:  23, 20, 38;
}

/* Visually-hidden utility (C-01) — text for screen readers only. Standard
 * clip pattern; pairs with aria-hidden on the decorative twin. */
.pmd-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------
 * Logo sizing — the horizontal lockup at ~36px tall reads as a brand
 * mark without dominating the header. Single rule reused by dashboard,
 * login, and email templates.
 * ------------------------------------------------------------------ */
.pmd-logo-img {
	display: block;
	height: 36px;
	width: auto;
	max-width: 100%;
}

/* --------------------------------------------------------------------
 * Buttons
 *
 * Two-class selectors (.pmd-btn.pmd-btn-*) have specificity (0,2,0),
 * which beats .pmd-dashboard a { color: inherit } at (0,1,1) and any
 * similar theme rule — so "navy text on cyan" is guaranteed.
 * ------------------------------------------------------------------ */
.pmd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--pmd-radius-md);
	font-family: var(--pmd-font-body);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background .15s, color .15s, transform .12s, box-shadow .15s;
	white-space: nowrap;
}
.pmd-btn:focus-visible {
	outline: 2px solid var(--pmd-focus-ring);
	outline-offset: 2px;
}
.pmd-btn[disabled],
.pmd-btn.is-disabled {
	opacity: .5;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* Primary — cyan background, NAVY text. */
.pmd-btn.pmd-btn-primary,
a.pmd-btn.pmd-btn-primary,
button.pmd-btn.pmd-btn-primary {
	background: var(--pmd-cyan);
	color: var(--pmd-navy);
}
.pmd-btn.pmd-btn-primary:hover:not([disabled]):not(.is-disabled),
a.pmd-btn.pmd-btn-primary:hover:not([disabled]):not(.is-disabled),
button.pmd-btn.pmd-btn-primary:hover:not([disabled]):not(.is-disabled) {
	background: var(--pmd-cyan-dark);
	color: var(--pmd-navy);
	transform: translateY(-1px);
	box-shadow: var(--pmd-shadow-hover);
}

/* Secondary — navy background, white text. */
.pmd-btn.pmd-btn-secondary,
a.pmd-btn.pmd-btn-secondary,
button.pmd-btn.pmd-btn-secondary {
	background: var(--pmd-navy);
	color: var(--pmd-white);
}
.pmd-btn.pmd-btn-secondary:hover:not([disabled]):not(.is-disabled),
a.pmd-btn.pmd-btn-secondary:hover:not([disabled]):not(.is-disabled),
button.pmd-btn.pmd-btn-secondary:hover:not([disabled]):not(.is-disabled) {
	background: var(--pmd-navy-80);
	color: var(--pmd-white);
	transform: translateY(-1px);
	box-shadow: var(--pmd-shadow-hover);
}

/* Ghost — transparent background, navy text, subtle border. */
.pmd-btn.pmd-btn-ghost,
a.pmd-btn.pmd-btn-ghost,
button.pmd-btn.pmd-btn-ghost {
	background: transparent;
	color: var(--pmd-navy);
	border: 1px solid var(--pmd-border-strong);
}
.pmd-btn.pmd-btn-ghost:hover:not([disabled]):not(.is-disabled) {
	background: var(--pmd-surface);
	color: var(--pmd-navy);
}

/* Text-link button — no padding/border, used inline. */
.pmd-btn.pmd-btn-link,
a.pmd-btn.pmd-btn-link,
button.pmd-btn.pmd-btn-link {
	background: transparent;
	color: var(--pmd-navy);
	padding: 4px 0;
	border-radius: 0;
}
.pmd-btn.pmd-btn-link:hover {
	text-decoration: underline;
	text-decoration-color: var(--pmd-cyan-dark);
}

/* --------------------------------------------------------------------
 * Form inputs — baseline for login, order builder, account settings.
 *
 * AUD-01 (2026-07-13): the DOUBLED-CLASS selectors below are INTENTIONAL —
 * do NOT "clean up" `.pmd-input.pmd-input` to `.pmd-input`. The repeat is
 * a specificity raise, not a typo: GeneratePress styles
 * `input[type="text"], [type="email"], [type="password"], …` at (0,1,1)
 * (theme main.css: border 1px solid / border-radius 0 / padding 10px 15px;
 * plus the Customizer's dynamic inline CSS, which also sets
 * `background-color: var(--base-2)` — a pale green on live — and
 * `border-color: var(--base)`), and `input[type=…]:focus` at (0,2,1).
 * A single class (0,1,0) loses to both REGARDLESS of load order, which is
 * how the auth pages, the application form, the enrolment code field and
 * the addresses modals shipped square, dark-bordered, green-filled theme
 * inputs while the spec below sat defeated. Doubled class = (0,2,0) beats
 * the theme's rest rules; `.pmd-input.pmd-input:focus` = (0,3,0) beats the
 * theme's focus rule. The per-surface overrides (account / help /
 * order-builder / ab-search) still win over this base exactly as before —
 * by higher specificity, or by later file order at the same (0,2,0).
 * Simplifying these selectors reintroduces the theme bleed on every
 * surface that lacks its own override.
 * ------------------------------------------------------------------ */
.pmd-input.pmd-input,
.pmd-select.pmd-select,
.pmd-textarea.pmd-textarea {
	display: block;
	width: 100%;
	padding: 10px 14px;
	font-family: var(--pmd-font-body);
	font-size: 14.5px;
	color: var(--pmd-text);
	background: var(--pmd-white);
	border: 1px solid var(--pmd-border-strong);
	border-radius: var(--pmd-radius-md);
	box-sizing: border-box;
	line-height: 1.4;
	transition: border-color .15s, box-shadow .15s;
}
.pmd-input.pmd-input:focus,
.pmd-select.pmd-select:focus,
.pmd-textarea.pmd-textarea:focus {
	outline: 0;
	border-color: var(--pmd-cyan-dark);
	box-shadow: 0 0 0 3px rgba(165,242,255,.35);
	/* AUD-01 completion (0.25.29): GP's Customizer `input[type=…]:focus`
	 * (0,2,1) sets color + background-color + border-color. Declaring only
	 * border-color here left background/color to fall through to the REST
	 * rules, where GP's focus rule outranked the (0,2,0) base — so fields
	 * flashed green (var(--base-3)) exactly while being typed in (found by
	 * the AUD-01 post-deploy render matrix: autofocused fields measured
	 * green, blurred fields white). Declare all three so the focus state is
	 * fully owned. */
	background: var(--pmd-white);
	color: var(--pmd-text);
}
.pmd-input.pmd-input[aria-invalid="true"],
.pmd-select.pmd-select[aria-invalid="true"],
.pmd-textarea.pmd-textarea[aria-invalid="true"] {
	border-color: var(--pmd-danger);
	box-shadow: 0 0 0 3px rgba(168,32,32,.14);
}
/* AUD-20 hygiene rider: neutralise the browser's genuine autofill tint so a
 * saved credential doesn't paint a field yellow/blue on a trust surface.
 * NOTE: this is NOT the fix for the pale-green fields observed on the auth
 * pages — that green was GeneratePress's `background-color: var(--base-2)`
 * winning the cascade (closed by the raised spec above); this rider covers
 * only the separate, real browser-autofill case. */
.pmd-input.pmd-input:-webkit-autofill,
.pmd-input.pmd-input:-webkit-autofill:hover {
	-webkit-box-shadow: 0 0 0 1000px var(--pmd-white) inset;
	-webkit-text-fill-color: var(--pmd-text);
	caret-color: var(--pmd-text);
}
.pmd-input.pmd-input:-webkit-autofill:focus {
	/* keep the focus ring visible outside the opaque autofill fill */
	-webkit-box-shadow: 0 0 0 3px rgba(165,242,255,.35), 0 0 0 1000px var(--pmd-white) inset;
	-webkit-text-fill-color: var(--pmd-text);
	caret-color: var(--pmd-text);
}
/* Form controls do not inherit font-family, so any control that lacks a
 * .pmd-input / .pmd-select / .pmd-textarea class falls through to the
 * theme's own rule (Inter on live). Assert the portal family on every
 * control inside a portal wrapper; (0,1,1) beats the theme's grouped
 * element selectors regardless of stylesheet order. */
.pmd-dashboard input, .pmd-dashboard select, .pmd-dashboard textarea, .pmd-dashboard button,
.pmd-login input, .pmd-login select, .pmd-login textarea, .pmd-login button,
.pmd-application input, .pmd-application select, .pmd-application textarea, .pmd-application button {
	font-family: var(--pmd-font-body);
}
.pmd-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--pmd-text);
	margin-bottom: 6px;
}
.pmd-field      { display: block; margin-bottom: 14px; }
.pmd-field-hint { font-size: 12.5px; color: var(--pmd-text-muted); margin-top: 4px; }
.pmd-field-error{ font-size: 12.5px; color: var(--pmd-danger);     margin-top: 4px; }

/* --------------------------------------------------------------------
 * Badges — shared status pills (dashboard reuses these, order builder
 * and email templates will too). Dashboard's .pmd-status-* are kept for
 * WooCommerce status slugs; .pmd-badge-* covers semantic cases.
 * ------------------------------------------------------------------ */
.pmd-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	text-transform: capitalize;
	letter-spacing: .01em;
	line-height: 1.4;
}
.pmd-badge-success { background: var(--pmd-success-bg); color: var(--pmd-success); }
.pmd-badge-warn    { background: var(--pmd-warn-bg);    color: var(--pmd-warn); }
.pmd-badge-info    { background: var(--pmd-info-bg);    color: var(--pmd-info); }
.pmd-badge-danger  { background: var(--pmd-danger-bg);  color: var(--pmd-danger); }
.pmd-badge-neutral { background: var(--pmd-surface-2);  color: var(--pmd-text-muted); }

/* --------------------------------------------------------------------
 * Clickwrap consent — shared by the invitation-accept page and the
 * business application form. ONE required checkbox; the label accepts all
 * four legal documents together (links pulled from the registry). Rendered
 * by pmd_business_render_legal_consent().
 * ------------------------------------------------------------------ */
.pmd-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 18px;
	text-align: left;
}
.pmd-consent-check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--pmd-navy);
	cursor: pointer;
}
.pmd-consent-label {
	font-size: 13px;
	line-height: 1.55;
	color: var(--pmd-navy-60);
	cursor: pointer;
}
.pmd-consent-label a {
	color: var(--pmd-navy);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--pmd-cyan-dark);
	text-underline-offset: 2px;
}
.pmd-consent-label a:hover { text-decoration-color: var(--pmd-navy); }

/* --------------------------------------------------------------------
 * Touch targets — coarse pointers (IMPECCABLE-AUDIT.md P3).
 *
 * Compact icon/text controls keep their visual size on fine pointers
 * (mouse) but expand their HIT area to ~44px on touch, clearing the
 * platform minimum without changing desktop density. Scoped to
 * `pointer: coarse` so the mouse layout is untouched.
 * ------------------------------------------------------------------ */
@media (pointer: coarse) {
	/* Square icon buttons (28–32px visual) → 44px hit area; inline-flex
	   centring keeps the glyph optically centred at the larger size. */
	.pmd-ob-doc-remove,
	.pmd-ob-modal-close,
	.pmd-ob-recipient-remove,
	.pmd-btn-sm {
		min-width: 44px;
		min-height: 44px;
	}
	/* Inline reset/text link: grow the tap area vertically via padding,
	   cancelled by negative margin so surrounding text doesn't reflow. */
	.pmd-link {
		padding-block: 11px;
		margin-block: -11px;
	}
}

/* --------------------------------------------------------------------
 * Reduced motion — single plugin-wide guard (IMPECCABLE-AUDIT.md P2).
 *
 * One authoritative catch-all so coverage is never partial: the spinners
 * (pmd-spin, pmd-redirect-spin), the modal-enter keyframe, and every
 * choice-card / control transition collapse to an instant static end
 * state for users who request reduced motion. plugin-base.css is a hard
 * dependency of every plugin surface, so this guard always applies.
 *
 * It deliberately overrides only durations/iteration, not animation-name,
 * so the order-builder's tailored static end-states (the mail-pulse keeps a
 * faint static ring, the success seal stays drawn) — which set
 * `animation: none` at higher specificity — still win for those elements.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------
 * Shared branded confirm dialog (window.pmdConfirm) — portal-wide.
 * ONE component promoted from the order builder at Unit 10 so every
 * destructive action (clear draft, revoke invite, turn off 2FA, remove
 * passkey) gets a branded confirm instead of the native window.confirm().
 * Sits above the modal layer (order-builder modal = 9999).
 * ------------------------------------------------------------------ */
.pmd-confirm[hidden] { display: none; }
.pmd-confirm {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.pmd-confirm-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--pmd-ink-rgb, 28, 25, 45), .48);
	backdrop-filter: blur(1px);
}
.pmd-confirm-dialog {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: var(--pmd-white);
	border-radius: var(--pmd-radius-md);
	box-shadow: 0 18px 48px -12px rgba(var(--pmd-ink-rgb, 28, 25, 45), .40);
	animation: pmd-confirm-in .16s ease-out;
}
@media (prefers-reduced-motion: reduce) { .pmd-confirm-dialog { animation: none; } }
@keyframes pmd-confirm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pmd-confirm-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px 0;
}
.pmd-confirm-title {
	font-family: var(--pmd-font-display);
	font-weight: 600;
	font-size: 20px; /* U-10: the confirm class sits on the modal-title rung */
	line-height: 1.25;
	color: var(--pmd-navy);
	margin: 0;
}
.pmd-confirm-close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: -4px -6px 0 0;
	border: 0;
	border-radius: var(--pmd-radius-sm);
	background: transparent;
	color: var(--pmd-text-muted, #6b6880);
	cursor: pointer;
	transition: background .14s, color .14s;
}
.pmd-confirm-close:hover { background: var(--pmd-surface, #f4f5f9); color: var(--pmd-navy); }
.pmd-confirm-close:focus-visible { outline: 2px solid var(--pmd-focus-ring); outline-offset: 2px; }
.pmd-confirm-body {
	padding: 8px 24px 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(var(--pmd-ink-rgb, 28, 25, 45), .80);
}
.pmd-confirm .pmd-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.pmd-confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 20px 24px 24px;
}