/*
 * Pulse Accounts: header chip, standalone sign-in page (/account/),
 * profile page (/account/profile/), comment dialogs.
 * Uses the pulse-news theme's tokens when present, with the same values
 * as fallbacks.
 */

.pa-header-btn,
.pa-standalone,
.pa-profile,
.pa-sheet {
	--pa-blue: var(--pulse-blue, #00BEEB);
	--pa-ink: var(--pulse-ink, #202223);
	--pa-meta: var(--pulse-grey-mid, #707C83);
	--pa-border: #dcdfe1;
	--pa-hairline: #ebedee;
	--pa-chip: #eeeeee;
	--pa-panel: var(--pulse-grey-light, #f6f6f6);
	--pa-red: #d0021b;
	--pa-green: #1a7f37;
	--pa-font: var(--font-sans, "Inter", sans-serif);
}

/* Header chip ----------------------------------------------------------------
   Left of "Get the app", same shape, size and type, in light grey so the
   blue app button stays the call to action. While the client works out
   who's signed in, a spinner sits in the chip's own space. */
.pa-header-btn {
	/* Never squeezed by the masthead: the logo and menu don't shrink, so
	   without this the chip took all the squeeze and cut "Sign in" off. */
	flex: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 160px;
	margin: 5px 10px 0 0;
	padding: 9px 10px;
	border-radius: 5px;
	background: var(--pa-chip);
	color: var(--pa-ink);
	font-family: var(--pa-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: -0.2px;
	white-space: nowrap;
	text-decoration: none;
}
.pa-header-btn:hover { background: #e2e2e2; }
.pa-header-btn__icon { flex: none; display: block; }
.pa-header-btn__label { overflow: hidden; text-overflow: ellipsis; }
/* Loading: icon + "Sign in" stay in the layout (invisible) to hold the
   chip's size; the spinner sits centred on top. */
.pa-header-btn__spinner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: pa-spin 0.7s linear infinite;
	opacity: 0.6;
}
.pa-header-btn[data-state="loading"] { pointer-events: none; }
.pa-header-btn[data-state="loading"] .pa-header-btn__icon,
.pa-header-btn[data-state="loading"] .pa-header-btn__label { visibility: hidden; }
.pa-header-btn[data-state="loading"] .pa-header-btn__spinner { display: block; }

@media (max-width: 1024px) {
	/* The app button is hidden here; the chip sits beside the burger. */
	.pa-header-btn { margin: 0 2px 0 0; max-width: 130px; padding: 8px 10px; font-size: 13px; line-height: 13px; }
}

/* Shared controls -------------------------------------------------------------- */
/* No grey/blue flash overlay on taps (iOS). */
.pa-button, .pa-link, .pa-place, .pa-clear, .pa-reveal, .pa-header-btn { -webkit-tap-highlight-color: transparent; }
.pa-form { display: flex; flex-direction: column; gap: 14px; }
.pa-row { display: flex; gap: 12px; }
.pa-row > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) {
	.pa-profile .pa-row { flex-direction: column; }
	/* The skeleton mirrors the form, so its rows stack at the same width. */
	.pa-profile .pa-skel-row { flex-direction: column; }
}
.pa-field { display: flex; flex-direction: column; gap: 6px; margin: 0; text-align: left; }
/* Help behind an "i" beside a field's label (fieldWithInfo()): hover on
   desktop, tap (or Enter) anywhere; screen readers get it with the input. Dark bubble in light mode,
   light bubble in dark mode (ink on the field colour, reversed). */
.pa-field__head { display: flex; align-items: center; gap: 4px; }
/* A display name changed in the last month (see NAME_CHANGE_DAYS). body
   outranks the app and web dark-mode field colours. */
body .pa-profile .pa-input[readonly] { background: var(--pa-disabled, #f6f6f6); color: var(--pa-meta); cursor: default; }
body .pa-profile .pa-input[readonly]:focus { border-color: var(--pa-border); box-shadow: none; }
.pa-field > .pa-help { margin: 0; }
.pa-info { position: relative; display: inline-flex; }
.pa-info__button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--pa-meta); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pa-info__button svg { display: block; width: 16px; height: 16px; }
.pa-info.is-open .pa-info__button { color: var(--pa-blue); }
.pa-info__button:focus-visible { outline: 2px solid var(--pa-blue); outline-offset: 0; }
.pa-tip { position: absolute; z-index: 5; top: calc(100% + 6px); left: -8px; width: max-content; max-width: min(260px, 70vw); padding: 8px 10px; border-radius: 6px; background: var(--pa-ink); color: var(--pa-field, #fff); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); font: 400 13px/1.45 var(--pa-font); letter-spacing: -0.0062em; opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; pointer-events: none; }
.pa-info.is-open .pa-tip { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
	.pa-info__button:hover { color: var(--pa-blue); }
	.pa-info:hover .pa-tip { opacity: 1; visibility: visible; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pa-tip { transition: none; }
}
.pa-field__label {
	font-family: var(--pa-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--pa-ink);
}
.pa-input {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--pa-border);
	border-radius: 10px;
	background: #fff;
	color: var(--pa-ink);
	font-family: var(--pa-font);
	font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */
	line-height: 1.2;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}
select.pa-input { appearance: auto; padding-right: 10px; }
.pa-input::placeholder { color: #9aa3a8; }
.pa-input:focus { outline: none; border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(0, 190, 235, 0.2); }
.pa-input-row { position: relative; display: block; }
.pa-input-row .pa-input { padding-right: 66px; }
.pa-reveal {
	position: absolute;
	top: 0;
	right: 0;
	height: 48px;
	padding: 0 14px;
	border: 0;
	background: none;
	color: var(--pa-meta);
	font-family: var(--pa-font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.pa-button {
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--pa-border);
	border-radius: 10px;
	background: #fff;
	color: var(--pa-ink);
	font-family: var(--pa-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.2px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
/* Hover: every button's fill moves one shade, the border stays put
   (outlined buttons go light grey, blue goes a deeper blue). */
@media (hover: hover) {
	.pa-button:not(.pa-button--primary, .pa-button--danger, .pa-button--apple):hover:not(:disabled),
	body.pulse-account-app .pa-button:not(.pa-button--primary, .pa-button--danger, .pa-button--apple):hover:not(:disabled),
	body.pulse-account-dark-mode .pa-profile .pa-button:not(.pa-button--primary, .pa-button--danger, .pa-button--apple):hover:not(:disabled) { background-color: var(--pa-hover, #f4f5f6); }
}
.pa-button--primary { background: var(--pa-blue); border-color: var(--pa-blue); color: #fff; }
.pa-button--primary:hover:not(:disabled) { background: #00a9d4; border-color: #00a9d4; }
.pa-button--danger { background: var(--pa-red); border-color: var(--pa-red); color: #fff; }
.pa-button--danger:hover:not(:disabled) { background: #a00015; border-color: #a00015; }
.pa-button--danger-outline { color: var(--pa-red); border-color: #f0b8bf; }
.pa-button--block { width: 100%; }
.pa-button:disabled { cursor: default; }
.pa-button:disabled:not(.is-loading) { opacity: 0.6; }

/* Loading: the spinner replaces the label inside the button. */
.pa-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: pa-spin 0.7s linear infinite;
	box-sizing: border-box;
}
.pa-button .pa-spinner { display: none; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px; }
.pa-button.is-loading .pa-btn__label { visibility: hidden; }
.pa-button.is-loading .pa-spinner { display: block; }
@keyframes pa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pa-spinner { animation-duration: 2s; } }

.pa-flow__loading { display: flex; justify-content: center; padding: 40px 0; color: var(--pa-blue); }
.pa-flow__loading .pa-spinner { width: 26px; height: 26px; border-width: 3px; }

/* Skeleton loading (profile page): grey blocks in the shape of the page,
   shimmering gently, so the app view feels native while it loads. */
/* Sizes match what loads: the 16px form spacing, 42px fields (44 on
   phones), capsule button, 52px rows. The web skeleton reuses the page's
   layout classes (templates/profile.php); the app's adds its three rows. */
.pa-skeleton { display: flex; flex-direction: column; gap: 16px; }
.pa-skel {
	display: block;
	height: 42px;
	border-radius: 4px;
	background: linear-gradient(90deg, #eef0f2 25%, #f6f7f8 37%, #eef0f2 63%);
	background-size: 400% 100%;
	animation: pa-shimmer 1.4s ease infinite;
}
.pa-skel--title { width: 140px; height: 26px; border-radius: 6px; }
.pa-skel--line { width: 240px; max-width: 70%; height: 12px; margin: 9px 0 3px; border-radius: 5px; }
.pa-skel--h2 { width: 110px; height: 22px; border-radius: 6px; }
.pa-skel--sub { width: 60%; height: 13px; margin: -10px 0 12px; border-radius: 5px; }
.pa-skel--label { width: 34%; height: 12px; margin: 3px 0 4px; border-radius: 5px; }
.pa-skel--button { width: 120px; height: 36px; border-radius: 18px; }
.pa-skel--row { width: 110px; height: 14px; border-radius: 5px; }
.pa-skel-field { display: flex; flex-direction: column; gap: 6px; }
.pa-skel-row { display: flex; gap: 16px; }
.pa-skel-row > * { flex: 1 1 0; min-width: 0; }
.pa-skel-layout .pa-profile__tab { cursor: default; }
/* A flex column keeps the email line's bottom margin inside the head on phones. */
.pa-skel-layout .pa-profile__head { display: flex; flex-direction: column; }
.pa-skel-layout .pa-skeleton { padding-top: 20px; }
.pa-skel-rows { margin-top: 12px; border-top: 1px solid var(--pa-hairline); }
.pa-skel-rowline { display: flex; align-items: center; height: 52px; border-bottom: 1px solid var(--pa-hairline); }
@media (max-width: 820px) {
	.pa-skel-layout .pa-profile__content { display: none; }
}
@media (max-width: 600px) {
	.pa-profile .pa-skel--input { height: 44px; }
	.pa-profile .pa-skel--button { height: 44px; border-radius: 22px; }
}
@keyframes pa-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) { .pa-skel { animation: none; } }

.pa-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pa-blue);
	font-family: var(--pa-font);
	font-size: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.pa-link:hover { text-decoration: underline; }

.pa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pa-error, .pa-notice, .pa-help, .pa-muted {
	margin: 0;
	font-family: var(--pa-font);
	font-size: 14px;
	line-height: 1.45;
}
.pa-notice, .pa-help, .pa-muted { color: var(--pa-meta); }
.pa-notice { padding: 10px 12px; border-radius: 10px; background: var(--pulse-blue-light, #eefaff); color: var(--pa-ink); }
.pa-help { margin-top: -6px; font-size: 13px; }
/* Errors: the delete panel's red box, with a cross in a red circle beside
   the text. `hidden` must still win over the flex display. */
.pa-error { display: flex; align-items: flex-start; gap: 8px; padding: 16px; border-radius: 4px; background: var(--pa-danger-bg, #fff5f6); color: var(--pa-ink); line-height: 1.5; text-align: left; }
.pa-error[hidden] { display: none; }
.pa-icon { display: inline-flex; flex: none; width: 18px; height: 18px; }
.pa-icon svg { width: 100%; height: 100%; }
.pa-error .pa-icon { margin-top: 1px; color: var(--pa-red); }
/* Saved: a tick in a circle and the word replace the button's label for a
   few seconds; the button keeps its colour even while disabled. */
.pa-button .pa-btn__label { display: inline-flex; align-items: center; gap: 8px; }
.pa-button.is-saved:disabled { opacity: 1; }
.pa-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.pa-standalone [hidden], .pa-profile [hidden], .pa-sheet [hidden] { display: none !important; }

/* Standalone sign-in page (/account/) -------------------------------------------
   Not the site chrome: a centred logo, the flow in the middle of the
   screen, and a footer stuck to the bottom. */
body.pulse-account-signin { margin: 0; background: #fff; }
.pa-standalone {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: var(--pa-font);
	color: var(--pa-ink);
}
.pa-standalone__header {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70px;
	padding: 0 16px;
	background: #fff;
	border-bottom: 3px solid var(--pa-blue);
}
.pa-standalone__logo { display: flex; align-items: center; }
.pa-standalone__logo img { display: block; width: 175px; height: auto; }
.pa-standalone__main {
	flex: 1 0 auto;
	display: flex;
	justify-content: center;
	padding: 56px 20px 40px;
}
.pa-flow { width: 100%; max-width: 400px; }
.pa-step { display: flex; flex-direction: column; gap: 18px; text-align: center; }
.pa-step .pa-form { text-align: left; }
.pa-step__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.6px;
	color: #1a1c1d;
}
.pa-step__body { margin: -8px 0 0; font-size: 16px; line-height: 1.5; color: var(--pa-meta); }
.pa-step__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto -4px;
	border-radius: 50%;
	background: var(--pulse-blue-light, #eefaff);
	color: var(--pa-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pa-step__icon svg { width: 28px; height: 28px; }
.pa-email-pill {
	display: inline-flex;
	align-self: center;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	margin: -4px 0 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--pa-panel);
	font-size: 14px;
}
.pa-email-pill__address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Forgot password? at the right of its field's label, in the label's size. */
.pa-field__head--split { justify-content: space-between; }
.pa-forgot { font-size: 13px; font-weight: 400; }
.pa-switch { margin: 0; font-size: 15px; color: var(--pa-meta); }
/* Continue with Google / Apple, then "or" over a hairline before the email form. */
.pa-social { display: flex; flex-direction: column; gap: 10px; }
.pa-social__logo { display: inline-flex; width: 18px; height: 18px; }
.pa-social__logo svg { width: 100%; height: 100%; }
.pa-button--apple { background: #000; border-color: #000; color: #fff; }
.pa-button--apple:hover:not(:disabled) { background: #333; border-color: #333; }
.pa-or { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; color: var(--pa-meta); }
.pa-or::before,
.pa-or::after { content: ""; flex: 1; border-top: 1px solid var(--pa-hairline); }
.pa-terms { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pa-meta); }
.pa-terms a { color: var(--pa-ink); text-decoration: underline; }

.pa-standalone__footer {
	position: sticky;
	bottom: 0;
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--pa-hairline);
	background: #fff;
}
.pa-standalone__footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; }
.pa-standalone__footer a { color: var(--pa-meta); font-size: 14px; font-weight: 500; text-decoration: none; }
.pa-standalone__footer a:hover { color: var(--pa-ink); text-decoration: underline; }

@media (max-width: 640px) {
	.pa-standalone__header { min-height: 63px; }
	.pa-standalone__logo img { width: 160px; }
	.pa-standalone__main { padding: 36px 20px 32px; }
	.pa-step__title { font-size: 24px; }
}
/* Sign-in fields and buttons in the v2 profile page's look: 44px fields
   with squarer corners, 44px capsule buttons. Text keeps its own sizes. */
.pa-standalone .pa-input { height: 44px; padding: 0 12px; border-radius: 4px; }
.pa-standalone .pa-input:focus { box-shadow: 0 0 0 2px rgba(0, 190, 235, 0.12); }
.pa-standalone :is(.pa-reveal, .pa-clear) { height: 44px; }
.pa-standalone .pa-button { min-height: 44px; border-radius: 22px; font-weight: 600; }
.pa-standalone .pa-link:not(.pa-forgot) { font-weight: 500; }
/* More room between the parts of each step. */
.pa-standalone .pa-standalone__main { padding-top: 64px; }
.pa-standalone .pa-step { gap: 21px; }
.pa-standalone .pa-form { gap: 16px; }
.pa-standalone .pa-field { gap: 7px; }
.pa-standalone .pa-social { gap: 11px; }
@media (max-width: 640px) {
	.pa-standalone .pa-standalone__main { padding-top: 42px; }
}
/* Notices ("You already have a Pulse account…") in the profile's delete
   panel shape: flat, 4px corners, left-aligned, in the light blue. */
.pa-standalone .pa-notice { padding: 16px; border-radius: 4px; font-size: 14px; line-height: 1.5; text-align: left; }
/* "you@example.com · Change": an outlined capsule, like the buttons. */
.pa-standalone .pa-email-pill { min-height: 40px; box-sizing: border-box; padding: 0 16px; border: 1px solid var(--pa-border); background: var(--pa-field, #fff); }
.pa-standalone .pa-step__title { font-size: 29px; font-weight: 600; letter-spacing: -0.4px; }
@media (max-width: 640px) {
	.pa-standalone .pa-step__title { font-size: 25.5px; }
}

/* Profile page (/account/profile/) -------------------------------------------- */
.pa-profile {
	max-width: 640px;
	margin: 0 auto;
	padding: 10px 0 60px;
	font-family: var(--pa-font);
	color: var(--pa-ink);
}
/* Web profiles fill the theme's content area; app profiles keep their cap. */
body.pulse-account-profile:not(.pulse-account-app) .pa-profile { max-width: none; }
/* Profile colours, on the website and in the app (the v2 theme's palette). */
body.pulse-account-profile .pa-profile {
	--pa-ink: #222222;
	--pa-meta: #8f8d84;
	--pa-border: #ececec;
	--pa-hairline: #ececec;
	--pa-red: #ed213e;
	--pa-field: #fff;
	--pa-subtle: #5a5a5a;
	--pa-disabled: #f6f6f6;
	--pa-note: var(--pulse-blue-light, #eefaff);
	--pa-danger-bg: #fff5f6;
	--pa-danger-line: #f6d3d7;
}
/* Dark mode, on themes that declare add_theme_support( 'pulse-dark-mode' )
   (the body class): the v2 theme's dark palette, when the reader picks Dark
   or picks System on a dark device. Dialogs (.pa-sheet) stay light. */
:root[data-theme="dark"] body.pulse-account-dark-mode .pa-profile {
	color-scheme: dark;
	--pa-ink: #f2f3f5;
	--pa-meta: #8f939b;
	--pa-border: #3a3f47;
	--pa-hairline: #2c3037;
	--pa-red: #ff5a6a;
	--pa-panel: #20242a;
	--pa-field: #20242a;
	--pa-subtle: #b4b8bf;
	--pa-disabled: #20242a;
	--pa-note: rgba(0, 190, 235, 0.12);
	--pa-danger-bg: #3a1d24;
	--pa-danger-line: #4a2227;
	--pa-hover: #2a2f36;
	--pa-skel-a: #1c2026;
	--pa-skel-b: #252a31;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body.pulse-account-dark-mode .pa-profile {
		color-scheme: dark;
		--pa-ink: #f2f3f5;
		--pa-meta: #8f939b;
		--pa-border: #3a3f47;
		--pa-hairline: #2c3037;
		--pa-red: #ff5a6a;
		--pa-panel: #20242a;
		--pa-field: #20242a;
		--pa-subtle: #b4b8bf;
		--pa-disabled: #20242a;
		--pa-note: rgba(0, 190, 235, 0.12);
		--pa-danger-bg: #3a1d24;
		--pa-danger-line: #4a2227;
		--pa-hover: #2a2f36;
		--pa-skel-a: #1c2026;
		--pa-skel-b: #252a31;
	}
}
body.pulse-account-dark-mode .pa-profile :is(.pa-input:not([readonly]), .pa-places, .pa-place:not(:hover, :focus), .pa-button:not(.pa-button--primary, .pa-button--danger, :disabled)) { background-color: var(--pa-field); }
body.pulse-account-dark-mode .pa-profile .pa-button--primary:hover:not(:disabled) { background: #33cbef; border-color: #33cbef; }
body.pulse-account-dark-mode .pa-profile :is(.pa-banner, .pa-notice:not(.pa-banner .pa-notice)) { background: var(--pa-note); color: var(--pa-ink); }
body.pulse-account-dark-mode .pa-profile .pa-danger-panel { background: var(--pa-danger-bg); }
body.pulse-account-dark-mode .pa-profile .pa-skel { background-image: linear-gradient(90deg, var(--pa-skel-a, #eef0f2) 25%, var(--pa-skel-b, #f6f7f8) 37%, var(--pa-skel-a, #eef0f2) 63%); }
/* Type and spacing follow the v2 theme's DESIGN.md (sizes fall back to its
   desktop values on themes without the --t-* variables): the page title,
   "More from Pulse" style card headings, hairlines and the share chip's
   capsule for buttons. Desktop: the greeting runs full width over a
   hairline, then the section list and the open section start level. */
.pa-profile__layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; align-items: start; }
@media (min-width: 821px) {
	.pa-profile__layout > .pa-profile__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; padding-bottom: 24px; border-bottom: 1px solid var(--pa-hairline); }
	.pa-profile__layout > .pa-profile__nav { grid-column: 1; grid-row: 2; padding-top: 12px; }
	.pa-profile__layout > .pa-profile__content { grid-column: 2; grid-row: 2; }
	.pa-profile__panel .pa-card:first-child { border-top: 0; }
}
/* The v2 theme's menu hover: an underline, colour unchanged, mouse only. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
	.pa-profile__tab:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
}
.pa-profile__nav { display: flex; flex-direction: column; }
.pa-profile__tab { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--pa-hairline); border-radius: 0; background: transparent; color: var(--pa-ink); font: 500 var(--t-row, 15.2px) var(--pa-font); line-height: 1.28; letter-spacing: -0.0118em; text-align: left; cursor: pointer; }
.pa-profile__tab[aria-selected="true"] { color: var(--pa-blue); font-weight: 600; }
.pa-profile__tab:focus-visible, .pa-profile__panel:focus-visible { outline: 2px solid var(--pa-blue); outline-offset: 3px; }
.pa-profile__content { min-width: 0; }
.pa-profile__panel .pa-card { margin: 0; padding: 20px 0 24px; border: 0; border-top: 1px solid var(--pa-hairline); border-radius: 0; background: transparent; box-shadow: none; }
.pa-profile__panel .pa-card__title { font-size: var(--t-heading, 19px); font-weight: 600; line-height: 1.21; letter-spacing: -0.02em; }
:is(.pa-profile__panel, .pa-app-profile) .pa-card__subtitle { margin: 6px 0 18px; color: var(--pa-subtle, #5a5a5a); font-size: 14px; line-height: 1.5; letter-spacing: -0.0092em; }
:is(.pa-profile__panel, .pa-app-profile) .pa-form { gap: 16px; }
:is(.pa-profile__panel, .pa-app-profile) .pa-row { gap: 16px; }
:is(.pa-profile__panel, .pa-app-profile) .pa-field { gap: 6px; }
:is(.pa-profile__panel, .pa-app-profile) .pa-field__label { font-size: 13.5px; font-weight: 600; line-height: 1.4; letter-spacing: -0.0092em; }
:is(.pa-profile__panel, .pa-app-profile) .pa-input { height: 42px; padding: 0 12px; border-radius: 4px; font-size: 15px; letter-spacing: -0.0092em; }
:is(.pa-profile__panel, .pa-app-profile) .pa-input:focus { box-shadow: 0 0 0 2px rgba(0, 190, 235, 0.12); }
:is(.pa-profile__panel, .pa-app-profile) .pa-input-row .pa-input { padding-right: 66px; }
:is(.pa-profile__panel, .pa-app-profile) .pa-combo .pa-input { padding-right: 44px; }
:is(.pa-profile__panel, .pa-app-profile) .pa-reveal, :is(.pa-profile__panel, .pa-app-profile) .pa-clear { height: 42px; }
:is(.pa-profile__panel, .pa-app-profile) .pa-help { margin: 0; color: var(--pa-subtle, #5a5a5a); font-size: 13px; line-height: 1.5; letter-spacing: -0.0062em; }
:is(.pa-profile__panel, .pa-app-profile) .pa-actions { gap: 10px; }
:is(.pa-profile__panel, .pa-app-profile) .pa-button { min-height: 36px; padding: 8px 18px; border-radius: 18px; font-size: 12.825px; font-weight: 600; line-height: 1.25; letter-spacing: -0.0056em; }
:is(.pa-profile__panel, .pa-app-profile) .pa-button:disabled:not(.is-loading) { opacity: 1; background: var(--pa-disabled, #f6f6f6); border-color: var(--pa-hairline); color: var(--pa-meta); }
:is(.pa-profile__panel, .pa-app-profile) .pa-danger-panel { border-radius: 4px; }
.pa-profile__panel .pa-card--danger { border-top-color: var(--pa-danger-line, #f6d3d7); }
/* Phones and tablets (the theme's 820px break): an accordion. Each section
   is a full-width row with a chevron and slides open under it
   (pulse-accounts.js moves the panels under their rows). A section with one
   card drops that card's title, which would repeat the row. */
@media (max-width: 820px) {
	.pa-profile__layout { display: block; }
	.pa-profile__head { margin-bottom: 19px; }
	.pa-profile__nav { border-top: 1px solid var(--pa-hairline); }
	.pa-profile__tab { min-height: 52px; padding: 14px 0; }
	.pa-profile__tab[aria-expanded="true"] { border-bottom-color: transparent; }
	.pa-profile__tab::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 0; border-right: 2px solid var(--pa-meta); border-bottom: 2px solid var(--pa-meta); transform: rotate(45deg); transition: transform 0.22s ease-out; }
	.pa-profile__tab[aria-expanded="true"]::after { margin: 4px 4px 0 0; transform: rotate(-135deg); }
	.pa-profile__panel { border-bottom: 1px solid var(--pa-hairline); }
	.pa-profile__panel .pa-card { padding: 19px 0 24px; }
	.pa-profile__panel .pa-card:first-child { padding-top: 0; border-top: 0; }
	.pa-profile__panel .pa-card:only-child .pa-card__title { display: none; }
	.pa-profile__panel .pa-card:only-child .pa-card__subtitle { margin-top: 0; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
	.pa-profile__tab::after { transition: none; }
}
@media (max-width: 600px) {
	:is(.pa-profile__panel, .pa-app-profile) .pa-input { font-size: 16px; height: 44px; }
	:is(.pa-profile__panel, .pa-app-profile) .pa-reveal, :is(.pa-profile__panel, .pa-app-profile) .pa-clear { height: 44px; }
	:is(.pa-profile__panel, .pa-app-profile) .pa-actions .pa-button { flex: 0 1 auto; min-height: 44px; border-radius: 22px; }
}
.pa-profile__head { margin-bottom: 24px; }
.pa-profile__title { margin: 0; color: var(--pa-ink); font-size: var(--t-title, 21.85px); font-weight: 600; line-height: 1.21; letter-spacing: -0.02em; }
.pa-profile__email { margin: 6px 0 0; color: var(--pa-meta); font-size: 13px; line-height: 1.4; letter-spacing: -0.0062em; overflow-wrap: anywhere; }
.pa-card {
	margin: 0 0 16px;
	padding: 24px;
	border: 1px solid var(--pa-hairline);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.pa-card__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; }
.pa-card__subtitle { margin: 4px 0 18px; font-size: 14px; line-height: 1.5; color: var(--pa-meta); }
.pa-card--danger { border-color: #f6d3d7; }
.pa-danger-panel { margin-top: 14px; padding: 16px; border-radius: 12px; background: #fff5f6; }
.pa-danger-panel p { margin: 0; font-size: 14px; line-height: 1.5; }
.pa-banner {
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--pulse-blue-light, #eefaff);
}
.pa-banner p { margin: 0; font-size: 14px; line-height: 1.5; }
.pa-banner p + p { margin-top: 6px; }
.pa-banner .pa-notice { margin-top: 8px; padding: 0; background: none; }
/* Profile banners in the delete panel's shape; the verify banner's buttons
   are the profile's capsules. */
.pa-profile .pa-banner { padding: 16px; border-radius: 4px; }
.pa-profile .pa-banner .pa-actions { margin-top: 12px; }
.pa-verify .pa-button { min-height: 32px; padding: 6px 14px; border-radius: 16px; font-size: 12.825px; font-weight: 600; line-height: 1.25; letter-spacing: -0.0056em; }

@media (max-width: 640px) {
	.pa-profile { padding-top: 0; }
	.pa-card { padding: 18px; border-radius: 14px; }
	.pa-card .pa-actions .pa-button { flex: 1 1 auto; }
}

/* Region (postcode + suburb) type-ahead dropdown */
.pa-combo { position: relative; }
.pa-combo .pa-input { padding-right: 44px; }
.pa-clear {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 48px;
	border: 0;
	background: none;
	color: var(--pa-meta);
	font-size: 20px;
	cursor: pointer;
}
/* Floats over the page like a native dropdown instead of pushing the
   form down; renderList() keeps it non-empty whenever it's open. */
.pa-places {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 288px;
	overflow: auto;
	border: 1px solid var(--pa-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
}
.pa-places li + li { border-top: 1px solid var(--pa-hairline); }
.pa-places__hint {
	padding: 12px 14px;
	font-family: var(--pa-font);
	font-size: 14px;
	line-height: 1.4;
	color: var(--pa-meta);
}
.pa-place {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	background: #fff;
	color: var(--pa-ink);
	font-family: var(--pa-font);
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}
.pa-place:hover, .pa-place:focus { background: var(--pa-panel); outline: none; }

/* Comment dialogs (article pages) --------------------------------------------- */
.pa-sheet {
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--pa-ink);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	overflow: auto;
}
.pa-sheet::backdrop { background: rgba(11, 13, 17, 0.55); }
.pa-sheet__panel { position: relative; padding: 28px 24px 24px; font-family: var(--pa-font); }
.pa-sheet__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var(--pa-panel);
	color: var(--pa-ink);
	font-size: 20px;
	line-height: 32px;
	cursor: pointer;
}
.pa-sheet__title { margin: 0 40px 6px 0; font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.25; }
.pa-sheet__body { margin: 0 0 18px; color: var(--pa-meta); font-size: 15px; line-height: 1.5; }
.pa-sheet .pa-actions { margin-top: 16px; }
.pa-code { margin-top: 14px; font-size: 12px; }

@media (max-width: 480px) {
	/* Phones: a bottom sheet. */
	.pa-sheet {
		width: 100vw;
		max-width: 100vw;
		margin: auto 0 0;
		border-radius: 16px 16px 0 0;
	}
	.pa-sheet__panel { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* App mode (?app=1) ---------------------------------------------------------------
   The profile web view sits under the app's own navigation bar; the
   sign-in sheet keeps the standalone look. Both follow the app's
   light / dark appearance (the web view passes it on as
   prefers-color-scheme). */
body.pulse-account-app { margin: 0; background: #fff; -webkit-text-size-adjust: 100%; }
/* No visible scrollbar in the app's profile web view (native feel). This
   covers browser-drawn scrollbars; the iOS web view's own flashing
   indicator is native and hidden from the app side
   (webView.scrollView.showsVerticalScrollIndicator = false). */
body.pulse-account-app { scrollbar-width: none; }
body.pulse-account-app::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pa-app-profile { padding: 16px 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
.pa-app-profile .pa-profile { padding: 0; }
.pa-app-profile .pa-profile__title { font-size: 26px; }

@media (prefers-color-scheme: dark) {
	body.pulse-account-app { background: #0b0d11; color-scheme: dark; }
	body.pulse-account-app .pa-standalone,
	body.pulse-account-app .pa-profile {
		--pa-ink: #f2f3f5;
		--pa-meta: #9aa3ab;
		--pa-border: #333841;
		--pa-hairline: #242830;
		--pa-panel: #1a1e25;
		--pa-red: #ff5a6a;
		--pa-green: #4cc76b;
		--pa-field: #0f1216;
		--pa-subtle: #b4b8bf;
		--pa-disabled: #1a1e25;
		--pa-note: rgba(0, 190, 235, 0.12);
		--pa-danger-bg: #3a1d24;
		--pa-danger-line: #4a2227;
		--pa-hover: #232830;
		color: var(--pa-ink);
	}
	body.pulse-account-app .pa-standalone__header,
	body.pulse-account-app .pa-standalone__footer { background: #0b0d11; }
	body.pulse-account-app .pa-standalone__logo img { filter: invert(1) hue-rotate(180deg); }
	body.pulse-account-app .pa-step__title,
	body.pulse-account-app .pa-profile__title { color: var(--pa-ink); }
	body.pulse-account-app .pa-card { background: #13161b; border-color: var(--pa-hairline); box-shadow: none; }
	body.pulse-account-app .pa-card--danger { border-color: #4a2227; }
	body.pulse-account-app .pa-danger-panel { background: #3a1d24; }
	body.pulse-account-app .pa-input,
	body.pulse-account-app .pa-place { background: #0f1216; color: var(--pa-ink); }
	body.pulse-account-app .pa-places { background: #0f1216; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
	body.pulse-account-app .pa-skel {
		background: linear-gradient(90deg, #171b21 25%, #1f242c 37%, #171b21 63%);
		background-size: 400% 100%;
	}
	body.pulse-account-app .pa-input::placeholder { color: #6b747c; }
	body.pulse-account-app .pa-button { background: #1a1e25; color: var(--pa-ink); }
	body.pulse-account-app .pa-button--primary { background: var(--pa-blue); color: #fff; }
	body.pulse-account-app .pa-button--primary:hover:not(:disabled) { background: #33cbef; border-color: #33cbef; }
	body.pulse-account-app .pa-button--danger { background: var(--pa-red); color: #fff; }
	body.pulse-account-app .pa-button--apple { background: #fff; border-color: #fff; color: #000; }
	body.pulse-account-app .pa-button--apple:hover:not(:disabled) { background: #e6e6e6; border-color: #e6e6e6; }
	body.pulse-account-app .pa-button--danger-outline { background: transparent; border-color: #5a2a31; color: var(--pa-red); }
	body.pulse-account-app .pa-banner,
	body.pulse-account-app .pa-notice,
	body.pulse-account-app .pa-step__icon { background: rgba(0, 190, 235, 0.12); color: var(--pa-ink); }
	body.pulse-account-app .pa-terms a { color: var(--pa-ink); }
}

/* Preview mode (live test) ------------------------------------------------------ */
.pa-header-slot { display: none; }

/* App mode layout: the "My details" fields sit straight on the page, no
   rounded card box. (Placed after the dark-mode block on purpose: same
   specificity as its .pa-card rules, so source order makes this win.) */
body.pulse-account-app .pa-card--details {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* App mode: Email address, Change password and Delete account start
   collapsed to their title row; tapping it opens the full card. */
body.pulse-account-app .pa-card--collapsible { padding: 0 18px; }
body.pulse-account-app .pa-card--collapsible[open] { padding-bottom: 18px; }
.pa-card--collapsible > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -18px;
	padding: 14px 18px;
	font-size: 16px;
	cursor: pointer;
	list-style: none;
}
.pa-card--collapsible > summary::-webkit-details-marker { display: none; }
.pa-card--collapsible > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin: 0 4px 4px 12px;
	border-right: 2px solid var(--pa-meta);
	border-bottom: 2px solid var(--pa-meta);
	transform: rotate(45deg);
}
.pa-card--collapsible[open] > summary::after { margin-bottom: 0; margin-top: 4px; transform: rotate(-135deg); }
.pa-card--collapsible > .pa-card__subtitle { margin-top: 0; }

/* App profile: the web profile's look. The details form sits on the page,
   then Email address, Change password and Delete account are flat rows
   between hairlines with a chevron, sliding open (slideDetails() in
   pulse-accounts.js). Scoped to the profile so the app's sign-in sheet keeps
   its cards; body.pulse-account-app beats the dark-mode card rules. */
body.pulse-account-app .pa-app-profile .pa-card--collapsible { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--pa-hairline); border-radius: 0; background: none; box-shadow: none; }
body.pulse-account-app .pa-app-profile .pa-card--collapsible[open] { padding-bottom: 24px; }
body.pulse-account-app .pa-app-profile .pa-card--details + .pa-card--collapsible { margin-top: 28px; border-top: 1px solid var(--pa-hairline); }
body.pulse-account-app .pa-app-profile .pa-card--collapsible > summary { box-sizing: border-box; min-height: 52px; margin: 0; padding: 14px 0; font-size: var(--t-row, 15.2px); font-weight: 500; line-height: 1.28; letter-spacing: -0.0118em; }
body.pulse-account-app .pa-app-profile .pa-card--collapsible > summary::after { transition: transform 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
	body.pulse-account-app .pa-app-profile .pa-card--collapsible > summary::after { transition: none; }
}

/* Touch screens: hover styles otherwise stick after a tap (the Save button
   flashed dark, then back to blue), so undo them where hover isn't real.
   Same selectors as the hover rules, so these win by source order. */
@media (hover: none) {
	.pa-button--primary:hover:not(:disabled),
	body.pulse-account-app .pa-button--primary:hover:not(:disabled),
	body.pulse-account-dark-mode .pa-profile .pa-button--primary:hover:not(:disabled) { background: var(--pa-blue); border-color: var(--pa-blue); }
	.pa-button--danger:hover:not(:disabled) { background: var(--pa-red); border-color: var(--pa-red); }
	.pa-button--apple:hover:not(:disabled) { background: #000; border-color: #000; }
	body.pulse-account-app .pa-button--apple:hover:not(:disabled) { background: #fff; border-color: #fff; }
}
#pulse-comments-preview-slot { margin: 0 0 28px; padding: 16px; border: 1px dashed #f0dc9c; border-radius: 12px; }
.pa-preview-note { margin: 0 0 12px; font-family: var(--font-sans, "Inter", sans-serif); font-size: 13px; color: #5c4400; }