/*
 * Tap a Taxi Membership — portal styles for shortcode output.
 *
 * Design system based on the 2026-04 HiFi mock. All component classes
 * are tat-* prefixed to avoid colliding with Elementor / theme styles,
 * and scoped under .tat-portal so brand tokens (--tat-red etc.) don't
 * leak onto :root. Every shortcode output wraps its content in
 * <div class="tat-portal tat-<page>">.
 *
 * Mobile-first. Single breakpoint at 768px upgrades layouts (multi-col
 * stat grid, side-by-side field rows, persistent table layout).
 *
 * Legacy classes (.tat-form, .tat-button, .tat-dashboard__row etc.)
 * are kept in the "Legacy" section at the bottom so views that haven't
 * yet been ported to the HiFi markup continue to render. They will be
 * removed as each view is ported.
 */

/* ─── Tokens ─────────────────────────────────────────────── */

.tat-portal {
	--tat-red: #E42312;
	--tat-red-10: #FEF2F2;
	--tat-red-20: #FECACA;
	--tat-dark: #0D141F;
	--tat-dark-80: #1E2A3A;
	--tat-blue: #00AEEF;
	--tat-blue-10: #EFF9FF;
	--tat-blue-20: #CCF0FD;
	--tat-white: #FFFFFF;
	--tat-grey-50: #F9FAFB;
	--tat-grey-100: #F3F4F6;
	--tat-grey-200: #E5E7EB;
	--tat-grey-300: #D1D5DB;
	--tat-grey-400: #9CA3AF;
	--tat-grey-500: #6B7280;
	--tat-grey-600: #4B5563;
	--tat-grey-700: #374151;
	--tat-grey-800: #1F2937;
	--tat-green: #10B981;
	--tat-green-10: #ECFDF5;
	--tat-green-20: #D1FAE5;
	--tat-amber: #F59E0B;
	--tat-amber-10: #FFFBEB;
	--tat-amber-20: #FEF3C7;

	--tat-radius: 10px;
	--tat-radius-sm: 6px;
	--tat-radius-lg: 14px;

	--tat-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
	--tat-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--tat-shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
	--tat-shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);

	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;        /* WCAG: 16px floor on body text. */
	line-height: 1.6;       /* WCAG 2.2: line-height ≥ 1.5 within paragraphs. */
	color: var(--tat-dark);
	box-sizing: border-box;
}
.tat-portal *,
.tat-portal *::before,
.tat-portal *::after {
	box-sizing: border-box;
}

/* ─── Auth pages (login / register / claim) ─────────────── */
/*
 * Auth shortcodes emit form content only — no white card, no drop
 * shadow, no max-width. Wrap the shortcode in an Elementor section
 * to control background, padding, and column width. Form fields
 * and buttons inherit styling from `.tat-portal` rules below.
 *
 * Landing chooser keeps its own max-width via the modifier class
 * since the side-by-side cards need a constrained track.
 */

.tat-auth-container--landing {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

/* ─── Landing chooser (two side-by-side cards) ──────────── */

.tat-landing__lede {
	text-align: center;
	margin-bottom: 36px;
}
.tat-landing__lede p {
	font-size: 16px;
	color: rgba(255,255,255,0.65);
	line-height: 1.6;
	max-width: 460px;
	margin: 0 auto;
}

.tat-landing-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 100%;
}
@media (min-width: 640px) {
	.tat-landing-split { grid-template-columns: 1fr 1fr; }
}

.tat-landing-card {
	background: var(--tat-white);
	color: var(--tat-dark);
	border-radius: var(--tat-radius-lg);
	padding: 32px;
	text-align: center;
	box-shadow: var(--tat-shadow-lg);
	transition: transform 0.15s, box-shadow 0.15s;
}
.tat-landing-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--tat-shadow-lg), 0 8px 24px rgba(0,0,0,0.1);
}
.tat-landing-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	font-size: 24px;
}
.tat-landing-card__icon--blue  { background: var(--tat-blue-10); }
.tat-landing-card__icon--green { background: var(--tat-green-10); }
.tat-landing-card h3 {
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--tat-dark);
}
.tat-landing-card p {
	font-size: 13px;
	color: var(--tat-grey-500);
	line-height: 1.5;
	margin: 0 0 20px;
}
.tat-landing-card__sub {
	margin-top: 12px;
	font-size: 12px;
}
.tat-landing-card__sub a {
	color: var(--tat-blue);
	text-decoration: none;
	font-weight: 600;
}
.tat-landing-card__sub a:hover { text-decoration: underline; }
.tat-landing-card__sub a.tat-landing-card__sub--muted {
	color: var(--tat-grey-400);
	font-weight: 500;
}

/*
 * Auth heading + description. h2 is plain so Elementor's heading
 * widget styles cascade (or its parent typography settings),
 * which is the point of stripping the card chrome — give Elementor
 * editors freedom over text styling. .tat-auth-card__desc is the
 * historical class on the lead paragraph; preserved as an opt-in
 * styling hook for sites that want the previous look without
 * editing every form view.
 */
.tat-auth-card__desc {
	font-size: 14px;
	color: var(--tat-grey-500);
	line-height: 1.5;
	margin: 0 0 24px;
}

.tat-auth-link-group {
	text-align: center;
	margin-top: 20px;
	font-size: 13px;
	color: var(--tat-grey-500);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tat-auth-link-group a {
	color: var(--tat-blue);
	text-decoration: none;
	font-weight: 600;
}
.tat-auth-link-group a:hover { text-decoration: underline; }

.tat-auth-footer {
	text-align: center;
	margin-top: 24px;
	font-size: 13px;
	color: rgba(255,255,255,0.4);
}
.tat-auth-footer a {
	color: var(--tat-blue);
	text-decoration: none;
	font-weight: 600;
}
.tat-auth-footer a:hover { text-decoration: underline; }

/* ─── Form fields ───────────────────────────────────────── */

.tat-portal .tat-field {
	margin-bottom: 20px;
}
.tat-portal .tat-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--tat-grey-800);  /* WCAG: 4.5:1+ on white background. */
	margin-bottom: 6px;
}
.tat-portal .tat-field__hint {
	font-size: 13px;
	color: var(--tat-grey-600);  /* WCAG: was grey-400, lifted for contrast. */
	margin-bottom: 6px;
	line-height: 1.45;
}
/* Inline validation error rendered by portal.js next to a failing field. */
.tat-portal .tat-field__error {
	font-size: 13px;
	color: #B91C1C;
	margin-top: 6px;
	line-height: 1.45;
	font-weight: 500;
}
.tat-portal .tat-required {
	color: #B91C1C;
	margin-left: 2px;
	font-weight: 600;
}
.tat-portal .tat-field--invalid input[type="text"],
.tat-portal .tat-field--invalid input[type="email"],
.tat-portal .tat-field--invalid input[type="password"],
.tat-portal .tat-field--invalid input[type="tel"],
.tat-portal .tat-field--invalid input[type="number"],
.tat-portal .tat-field--invalid select,
.tat-portal .tat-field--invalid textarea {
	border-color: #B91C1C !important;
	box-shadow: 0 0 0 1px #B91C1C;
}
/* The counties fieldset gets the same red treatment when the group fails. */
.tat-portal fieldset.tat-counties.tat-field--invalid {
	border: 1.5px solid #B91C1C;
	border-radius: var(--tat-radius-sm);
	padding: 12px;
}
/* Top-of-form summary notice rendered by portal.js. Pre-existing
   tat-notice styles handle the colour; the margin pushes it clear of
   the form's first field. */
.tat-portal .tat-form-summary {
	margin-bottom: 16px;
}
/* Double class to outweigh Elementor's form widget input styles. */
.tat-portal .tat-field.tat-field input[type="text"],
.tat-portal .tat-field.tat-field input[type="email"],
.tat-portal .tat-field.tat-field input[type="password"],
.tat-portal .tat-field.tat-field input[type="tel"],
.tat-portal .tat-field.tat-field input[type="number"],
.tat-portal .tat-field.tat-field input[type="date"],
.tat-portal .tat-field.tat-field select,
.tat-portal .tat-field.tat-field textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--tat-grey-300);
	border-radius: var(--tat-radius-sm);
	font-family: inherit;
	/* 16px floor: prevents iOS Safari auto-zoom on focus + WCAG body-size rec. */
	font-size: 16px;
	color: var(--tat-dark);
	background: var(--tat-white);
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	line-height: 1.4;
}
.tat-portal .tat-field input:focus,
.tat-portal .tat-field select:focus,
.tat-portal .tat-field textarea:focus {
	outline: none;
	border-color: var(--tat-blue);
	box-shadow: 0 0 0 3px rgba(0,174,239,0.12);
}
.tat-portal .tat-field input::placeholder,
.tat-portal .tat-field textarea::placeholder {
	color: var(--tat-grey-400);
}
.tat-portal .tat-field select {
	background-image: linear-gradient(45deg, transparent 50%, var(--tat-grey-500) 50%),
		linear-gradient(135deg, var(--tat-grey-500) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 36px;
}
.tat-portal .tat-field select[multiple] {
	background-image: none;
	padding-right: 14px;
	min-height: 160px;
}
.tat-portal .tat-field textarea {
	min-height: 88px;
	resize: vertical;
}

.tat-field-row {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.tat-field-row .tat-field {
	flex: 1;
}

.tat-portal .tat-field-readonly {
	padding: 11px 14px;
	background: var(--tat-grey-100);
	border-radius: var(--tat-radius-sm);
	font-size: 14px;
	color: var(--tat-dark);
	border: 1.5px solid var(--tat-grey-200);
	min-height: 19px;
	word-break: break-word;
}
.tat-portal .tat-field-readonly--mono {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
}

/* ─── Buttons ───────────────────────────────────────────── */
/*
 * Match a, button, input[type="submit"]. Specificity beats Elementor's
 * default link colour and form submit styling without !important.
 */
.tat-portal a.tat-btn,
.tat-portal button.tat-btn,
.tat-portal input.tat-btn[type="submit"],
.tat-portal .tat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 24px;
	border-radius: var(--tat-radius-sm);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	border: 1.5px solid transparent;
	background: transparent;
	color: var(--tat-dark);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
	letter-spacing: -0.01em;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
}
.tat-portal a.tat-btn:hover,
.tat-portal button.tat-btn:hover,
.tat-portal .tat-btn:hover { text-decoration: none; }
.tat-portal .tat-btn:focus-visible {
	outline: 2px solid var(--tat-blue);
	outline-offset: 2px;
}
.tat-portal .tat-btn:disabled,
.tat-portal .tat-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.tat-portal a.tat-btn--primary,
.tat-portal button.tat-btn--primary,
.tat-portal .tat-btn--primary {
	background: var(--tat-red);
	color: var(--tat-white);
	border-color: var(--tat-red);
}
.tat-portal a.tat-btn--primary:hover,
.tat-portal button.tat-btn--primary:hover,
.tat-portal .tat-btn--primary:hover {
	background: #c91f10;
	border-color: #c91f10;
	color: var(--tat-white);
}

.tat-portal a.tat-btn--dark,
.tat-portal button.tat-btn--dark,
.tat-portal .tat-btn--dark {
	background: var(--tat-dark);
	color: var(--tat-white);
	border-color: var(--tat-dark);
}
.tat-portal a.tat-btn--blue,
.tat-portal button.tat-btn--blue,
.tat-portal .tat-btn--blue {
	background: var(--tat-blue);
	color: #fff;
	border-color: var(--tat-blue);
}
.tat-portal a.tat-btn--outline,
.tat-portal button.tat-btn--outline,
.tat-portal .tat-btn--outline {
	background: transparent;
	color: var(--tat-dark);
	border-color: var(--tat-grey-200);
}
.tat-portal a.tat-btn--outline:hover,
.tat-portal button.tat-btn--outline:hover,
.tat-portal .tat-btn--outline:hover {
	border-color: var(--tat-grey-400);
	background: var(--tat-grey-50);
}
.tat-portal a.tat-btn--ghost,
.tat-portal button.tat-btn--ghost,
.tat-portal .tat-btn--ghost {
	background: transparent;
	color: var(--tat-blue);
	padding: 8px 0;
	border-color: transparent;
}
.tat-portal a.tat-btn--white,
.tat-portal button.tat-btn--white,
.tat-portal .tat-btn--white {
	background: var(--tat-white);
	color: var(--tat-red);
	border-color: var(--tat-white);
}

.tat-portal .tat-btn--sm { padding: 8px 16px; font-size: 13px; }
.tat-portal .tat-btn--block { width: 100%; }

/* ─── Banners (page-level notices) ──────────────────────── */

.tat-portal .tat-banner {
	padding: 14px 20px;
	border-radius: var(--tat-radius);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.tat-portal .tat-banner--red    { background: var(--tat-red); color: var(--tat-white); }
.tat-portal .tat-banner--amber  { background: var(--tat-amber-20); color: #92400E; border: 1px solid #FDE68A; }
.tat-portal .tat-banner--blue   { background: var(--tat-blue-10); color: #0369A1; border: 1px solid var(--tat-blue-20); }
.tat-portal .tat-banner--green  { background: var(--tat-green-10); color: #065F46; border: 1px solid var(--tat-green-20); }

/* ─── Inline form notices (errors / ok messages) ────────── */

.tat-portal .tat-notice {
	padding: 12px 14px;
	border-radius: var(--tat-radius-sm);
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
}
.tat-portal .tat-notice--error {
	background: var(--tat-red-10);
	color: #991B1B;
	border: 1px solid var(--tat-red-20);
}
.tat-portal .tat-notice--ok {
	background: var(--tat-green-10);
	color: #065F46;
	border: 1px solid var(--tat-green-20);
}

/* ─── Counties checkbox grid ───────────────────────────── */

.tat-portal .tat-counties {
	border: 0;
	margin: 0 0 18px;
	padding: 0;
}
.tat-portal .tat-counties legend {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--tat-dark);
	margin-bottom: 4px;
	padding: 0;
}
.tat-portal .tat-counties__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px 16px;
	margin-top: 8px;
}
@media (min-width: 540px) {
	.tat-portal .tat-counties__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.tat-portal .tat-counties__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--tat-dark);
	cursor: pointer;
	padding: 4px 0;
}
.tat-portal .tat-counties__item input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--tat-red);
}

/* ─── Section divider ───────────────────────────────────── */

.tat-portal .tat-section-divider {
	height: 1px;
	background: var(--tat-grey-200);
	margin: 24px 0;
	border: 0;
}

/* ─── Info box (callout under forms) ────────────────────── */

.tat-portal .tat-info-box {
	background: var(--tat-red-10);
	border: 1px solid var(--tat-red-20);
	border-radius: var(--tat-radius-sm);
	padding: 16px 18px;
	margin-bottom: 20px;
}
.tat-portal .tat-info-box h4 {
	font-size: 14px;
	font-weight: 700;
	color: var(--tat-dark);
	margin: 0 0 4px;
}
.tat-portal .tat-info-box p {
	font-size: 13px;
	color: var(--tat-grey-500);
	line-height: 1.5;
	margin: 0;
}

/* ─── Page title ────────────────────────────────────────── */

.tat-portal .tat-page-title {
	font-size: 28px;
	font-weight: 800;
	color: var(--tat-dark);
	letter-spacing: -0.03em;
	margin: 0 0 24px;
	line-height: 1.2;
}

/* ─── Stat cards (4-up grid on dashboard) ───────────────── */

.tat-stats-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 24px;
}
/* 0.15.0 — explicit-column modifiers used by the dashboard
 * summary cards (3-col row + 2-col row). The default auto-flow
 * fights with a fixed 5-card layout — these lock the columns
 * exactly. Mobile media query below collapses both to 2 cols
 * then 1.
 *
 * 0.15.1 — chained-class selectors (.tat-stats-grid.tat-stats-
 * grid--3col rather than just .tat-stats-grid--3col) so these
 * rules out-specificity-rank any future bare-class
 * .tat-stats-grid rule that might creep in. Defensive: in 0.15.0
 * a dead bare-class @media rule late in the file overrode these
 * modifiers and produced a 4-col layout regardless. */
@media (min-width: 640px) {
	.tat-stats-grid.tat-stats-grid--3col { grid-template-columns: repeat(3, 1fr); }
	.tat-stats-grid.tat-stats-grid--2col { grid-template-columns: repeat(2, 1fr); }
	.tat-stats-grid.tat-stats-grid--4col { grid-template-columns: repeat(2, 1fr); }
	.tat-stats-grid.tat-stats-grid--5col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.tat-stats-grid.tat-stats-grid--5col { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
	.tat-stats-grid.tat-stats-grid--4col { grid-template-columns: repeat(4, 1fr); }
	.tat-stats-grid.tat-stats-grid--5col { grid-template-columns: repeat(5, 1fr); }
}
.tat-stat-card {
	background: var(--tat-white);
	border-radius: var(--tat-radius);
	padding: 20px;
	box-shadow: var(--tat-shadow);
	border: 1px solid var(--tat-grey-200);
}
.tat-stat-card--warning  { border-color: var(--tat-amber); border-width: 2px; }
.tat-stat-card--danger   { border-color: var(--tat-red); border-width: 2px; }
.tat-stat-card__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--tat-grey-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 6px;
}
.tat-stat-card__value {
	font-size: 24px;
	font-weight: 800;
	color: var(--tat-dark);
	letter-spacing: -0.02em;
}
.tat-stat-card__value--md   { font-size: 18px; }
.tat-stat-card__value--mono {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 18px;
}
.tat-stat-card__sub {
	font-size: 12px;
	color: var(--tat-grey-400);
	margin-top: 2px;
}

/* ─── Status badges ─────────────────────────────────────── */

.tat-portal .tat-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.tat-portal .tat-badge::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	background: currentColor;
	opacity: 0.7;
}
.tat-portal .tat-badge--active    { background: var(--tat-green-10); color: #065F46; }
.tat-portal .tat-badge--pending   { background: var(--tat-blue-10);  color: #0369A1; }
.tat-portal .tat-badge--warning   { background: var(--tat-amber-10); color: #92400E; }
.tat-portal .tat-badge--suspended { background: var(--tat-red-10);   color: #991B1B; }

/* ─── Cards ─────────────────────────────────────────────── */

.tat-card {
	background: var(--tat-white);
	border-radius: var(--tat-radius);
	box-shadow: var(--tat-shadow);
	border: 1px solid var(--tat-grey-200);
	overflow: hidden;
	margin-bottom: 20px;
}
.tat-card__header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--tat-grey-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.tat-card__header h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--tat-dark);
	margin: 0;
}
.tat-card__body { padding: 20px; }

/* ─── Action button rows (inside card body) ─────────────── */

.tat-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ─── Quick-actions tile grid (dashboard card body) ─────── */

.tat-portal .tat-quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}
.tat-portal .tat-quick-action {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--tat-grey-200);
	border-radius: var(--tat-radius);
	background: var(--tat-white);
	color: var(--tat-dark);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.tat-portal .tat-quick-action:hover,
.tat-portal .tat-quick-action:focus-visible {
	border-color: var(--tat-blue);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 3px rgba(59, 130, 246, .12);
	text-decoration: none;
	outline: none;
}
.tat-portal .tat-quick-action:active {
	transform: translateY(1px);
}
.tat-portal .tat-quick-action--muted {
	background: var(--tat-grey-50);
}
.tat-portal .tat-quick-action__icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--tat-grey-50);
	font-size: 18px;
	line-height: 1;
}
.tat-portal .tat-quick-action__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.tat-portal .tat-quick-action__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--tat-dark);
	line-height: 1.3;
}
.tat-portal .tat-quick-action__hint {
	font-size: 12px;
	color: var(--tat-grey-500);
	line-height: 1.3;
}

/* ─── Locked content (gated for inactive accounts) ──────── */

.tat-portal .tat-locked-content {
	text-align: center;
	padding: 48px 24px;
	background: var(--tat-grey-50);
	border-radius: var(--tat-radius);
	border: 1px dashed var(--tat-grey-300);
}
.tat-portal .tat-locked-content__icon {
	font-size: 36px;
	margin-bottom: 12px;
	opacity: 0.4;
}
.tat-portal .tat-locked-content h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--tat-dark);
	margin: 0 0 6px;
}
.tat-portal .tat-locked-content p {
	font-size: 14px;
	color: var(--tat-grey-500);
	margin: 0 0 16px;
}

/* ─── Profile card body — stretch-to-fit form ─────────── */

.tat-portal .tat-card__body--profile {
	/* No max-width cap — inputs span the full card column so the
	 * form mirrors the card width set by the parent (was 560px-
	 * locked before, made the page feel cramped on wider screens).
	 */
	max-width: none;
}
.tat-portal .tat-card__body--profile .tat-field-readonly,
.tat-portal .tat-card__body--profile .tat-field input,
.tat-portal .tat-card__body--profile .tat-field select,
.tat-portal .tat-card__body--profile .tat-field textarea {
	width: 100%;
	max-width: 100%;
}

/* ─── Empty state ──────────────────────────────────────── */

.tat-portal .tat-empty-state {
	text-align: center;
	padding: 28px 16px;
}
.tat-portal .tat-empty-state__icon {
	font-size: 36px;
	line-height: 1;
	margin-bottom: 12px;
	opacity: 0.7;
}
.tat-portal .tat-empty-state__heading {
	font-size: 17px;
	font-weight: 700;
	color: var(--tat-dark);
	margin: 0 0 8px;
}
.tat-portal .tat-empty-state__text {
	color: var(--tat-grey-600);
	font-size: 15px;
	max-width: 480px;
	margin: 0 auto;
	line-height: 1.55;
}

/* ─── Pager (driver-facing, no JS) ─────────────────────── */

.tat-portal .tat-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px 20px;
	border-top: 1px solid var(--tat-grey-200);
	font-size: 14px;
}
.tat-portal .tat-pager__summary {
	color: var(--tat-grey-600);
}
.tat-portal .tat-pager__nav {
	display: flex;
	gap: 12px;
}
.tat-portal .tat-pager__link {
	color: var(--tat-blue);
	text-decoration: none;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: var(--tat-radius-sm);
}
.tat-portal .tat-pager__link:hover,
.tat-portal .tat-pager__link:focus {
	background: var(--tat-blue-10);
	text-decoration: underline;
}

/* ─── Card variants ─────────────────────────────────────── */

.tat-card--flush .tat-card__body { padding: 0; }
.tat-card--flush .tat-tbl { margin: 0; }

/* ─── Payments page summary (2-up grid) ─────────────────── */

.tat-payments-summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 24px;
}
.tat-payments-summary .tat-card { margin-bottom: 0; }

.tat-payment-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
	background: var(--tat-grey-50);
	border-radius: var(--tat-radius);
	border: 1px solid var(--tat-grey-200);
}
.tat-payment-card__info {
	display: flex;
	align-items: center;
	gap: 14px;
}
.tat-payment-card__icon {
	width: 48px;
	height: 32px;
	background: var(--tat-dark);
	color: var(--tat-white);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	flex-shrink: 0;
}
/* 0.13.1 — PM rail colour-coding. SEPA = EU flag blue (#003399);
 * Card stays on the dark default. Mirrored by .tat-pm--card / .tat-pm--sepa_debit
 * on the dashboard's compact PM line in the Next Payment card. */
.tat-payment-card__icon--sepa {
	background: #003399;
	color: #FFCC00;
}
.tat-pm--sepa_debit {
	color: #003399;
}
.tat-pm--card {
	color: #1f2937;
}
.tat-payment-card__number {
	font-size: 14px;
	font-weight: 600;
	color: var(--tat-dark);
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.05em;
}
.tat-payment-card__expiry {
	font-size: 12px;
	color: var(--tat-grey-400);
	margin-top: 2px;
}

.tat-next-payment {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: var(--tat-blue-10);
	border-radius: var(--tat-radius);
	border: 1px solid var(--tat-blue-20);
}
.tat-next-payment__amount {
	font-size: 32px;
	font-weight: 800;
	color: var(--tat-dark);
	letter-spacing: -0.02em;
}
.tat-next-payment__date {
	font-size: 14px;
	font-weight: 600;
	color: var(--tat-dark);
}
.tat-next-payment__label {
	font-size: 12px;
	color: var(--tat-grey-500);
	margin-top: 2px;
}

/* ─── Tables (HiFi: tat-tbl, responsive variant) ────────── */

.tat-portal .tat-tbl {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.tat-portal .tat-tbl th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	color: var(--tat-grey-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 14px 20px 10px;
	border: none;
	border-bottom: 1px solid var(--tat-grey-200);
	background: transparent;
}
.tat-portal .tat-tbl td {
	padding: 16px 20px;
	border: none;
	font-size: 14px;
	color: var(--tat-dark);
	vertical-align: middle;
	background: var(--tat-white);
}
/* Subtle separator between rows — softer than a 1px grey-100 line. */
.tat-portal .tat-tbl tbody tr + tr td {
	box-shadow: 0 -1px 0 0 var(--tat-grey-100);
}
.tat-portal .tat-tbl tr:hover td { background: var(--tat-grey-50); }
/* Defensive: theme / Elementor parent CSS sometimes adds nth-child
   striping on tables. Force a flat background everywhere. */
.tat-portal .tat-tbl tr:nth-child(even) td,
.tat-portal .tat-tbl tr:nth-child(odd) td { background-color: var(--tat-white); }
.tat-portal .tat-tbl tr:hover td { background-color: var(--tat-grey-50); }
.tat-portal .tat-tbl__mono {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: var(--tat-grey-500);
}
.tat-portal .tat-tbl__link {
	color: var(--tat-blue);
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
}
.tat-portal .tat-tbl__link:hover { text-decoration: underline; }
.tat-portal .tat-tbl__tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	color: var(--tat-amber);
	background: var(--tat-amber-10);
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-left: 6px;
	vertical-align: middle;
}
.tat-portal .tat-doc-category {
	font-size: 12px;
	font-weight: 600;
	color: var(--tat-grey-500);
	background: var(--tat-grey-100);
	padding: 3px 10px;
	border-radius: 999px;
	display: inline-block;
}
.tat-portal .tat-sr-only {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ─── Share certificate frame ───────────────────────────── */

.tat-portal .tat-cert-frame {
	width: 100%;
	max-width: none;
	position: relative;
	padding: 48px;
	text-align: center;
	background: var(--tat-white);
}
.tat-portal .tat-cert__logo { font-size: 20px; font-weight: 800; color: var(--tat-dark); margin-bottom: 28px; }
.tat-portal .tat-cert__logo-img {
	display: block;
	max-width: 200px;
	max-height: 80px;
	width: auto;
	height: auto;
	margin: 0 auto 28px;
}
.tat-portal .tat-cert__holder-label { font-size: 14px; color: var(--tat-grey-500); margin-bottom: 8px; }
.tat-portal .tat-cert__holder {
	font-size: 30px; font-weight: 800; color: var(--tat-dark);
	letter-spacing: -0.02em; margin-bottom: 24px;
}
.tat-portal .tat-cert__share-label { font-size: 13px; color: var(--tat-grey-500); margin-bottom: 6px; }
.tat-portal .tat-cert__share-num {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 32px; font-weight: 700; color: var(--tat-blue); margin-bottom: 24px;
}
.tat-portal .tat-cert__desc {
	font-size: 14px; color: var(--tat-grey-500); line-height: 1.6;
	max-width: 440px; margin: 0 auto 28px;
}
.tat-portal .tat-cert__details {
	font-size: 13px; color: var(--tat-grey-400); line-height: 1.8;
}
.tat-portal .tat-cert__details strong { color: var(--tat-grey-600); }
.tat-portal .tat-cert__actions {
	text-align: center;
	margin-top: 20px;
	display: flex;
	gap: 10px;
	justify-content: center;
}

/* ─── News / events feed ────────────────────────────────── */

.tat-content-feed {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tat-feed-card {
	background: var(--tat-white);
	border-radius: var(--tat-radius);
	box-shadow: var(--tat-shadow);
	border: 1px solid var(--tat-grey-200);
	padding: 24px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	transition: box-shadow 0.15s;
}
.tat-feed-card:hover { box-shadow: var(--tat-shadow-md); }
.tat-feed-date {
	flex: 0 0 auto;
	text-align: center;
	background: var(--tat-grey-50);
	border-radius: var(--tat-radius-sm);
	padding: 10px 16px;
	min-width: 64px;
	border: 1px solid var(--tat-grey-200);
}
.tat-feed-date__day { font-size: 24px; font-weight: 800; color: var(--tat-dark); line-height: 1; }
.tat-feed-date__month {
	font-size: 11px; font-weight: 600; color: var(--tat-grey-500);
	text-transform: uppercase; letter-spacing: 0.05em;
}
.tat-feed-body { flex: 1; min-width: 0; }
.tat-feed-body h4 {
	font-size: 16px; font-weight: 700; color: var(--tat-dark); margin: 0 0 6px;
}
.tat-feed-body h4 a {
	color: inherit;
	text-decoration: none;
}
.tat-feed-body h4 a:hover { color: var(--tat-red); }
.tat-feed-body p { font-size: 14px; color: var(--tat-grey-500); line-height: 1.55; margin: 0; }
.tat-feed-tag {
	display: inline-block;
	margin-top: 8px;
	padding: 3px 10px;
	background: var(--tat-blue-10);
	color: var(--tat-blue);
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	letter-spacing: 0.03em;
}

/* ─── Payment-complete success block ────────────────────── */

.tat-success {
	text-align: center;
	padding: 60px 20px;
	max-width: 520px;
	margin: 0 auto;
}
.tat-success__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--tat-green-10);
	border: 2px solid var(--tat-green-20);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	font-size: 32px;
	color: var(--tat-green);
}
.tat-success h2 {
	font-size: 26px;
	font-weight: 800;
	color: var(--tat-dark);
	margin: 0 0 10px;
}
.tat-success__desc {
	font-size: 15px;
	color: var(--tat-grey-500);
	line-height: 1.6;
	margin: 0 0 28px;
}
.tat-success__details {
	background: var(--tat-grey-50);
	border: 1px solid var(--tat-grey-200);
	border-radius: var(--tat-radius);
	padding: 24px;
	text-align: left;
	margin-bottom: 28px;
}
.tat-success__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
}
.tat-success__label { font-size: 13px; color: var(--tat-grey-500); }
.tat-success__value { font-size: 14px; font-weight: 700; color: var(--tat-dark); }
.tat-success__value--mono {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─── Print (share certificate) ─────────────────────────── */

@media print {
	.tat-portal .tat-no-print,
	.tat-portal .tat-banner,
	.tat-portal .tat-notice {
		display: none !important;
	}
	body { background: var(--tat-white) !important; }
	.tat-portal .tat-cert-frame {
		border: 3px solid #000;
		box-shadow: none;
	}
}

/* ─── Responsive ────────────────────────────────────────── */

/* 0.15.1 — old bare-class .tat-stats-grid responsive rules
 * (repeat(2,1fr) at 600px and repeat(4,1fr) at 900px) removed.
 * They targeted a legacy 4-card dashboard layout that no longer
 * exists. Worse, they came later in the cascade than the
 * .tat-stats-grid--3col / --2col modifier rules at line ~578,
 * had equal specificity, and so silently overrode the modifiers
 * at viewports >=600px — producing a 4-column layout regardless
 * of which modifier was applied. The current dashboard always
 * uses a modifier class. */
@media (min-width: 768px) {
	.tat-field-row {
		flex-direction: row;
		gap: 14px;
	}
	.tat-payments-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
	.tat-card__header { padding: 14px 16px; }
	.tat-card__body { padding: 16px; }
	.tat-portal .tat-page-title { font-size: 24px; }
	.tat-portal .tat-cert-frame { padding: 28px 20px; }
	.tat-portal .tat-cert__holder { font-size: 22px; }
	.tat-portal .tat-cert__share-num { font-size: 24px; }
	.tat-feed-card { flex-direction: row; padding: 16px; gap: 14px; }
	.tat-payment-card { flex-direction: column; align-items: stretch; gap: 14px; }
	.tat-payment-card__info { gap: 12px; }
	.tat-next-payment { flex-direction: column; align-items: flex-start; gap: 12px; }
	.tat-success { padding: 40px 16px; }
	/* Stack table cells with the data-label attribute as the inline label. */
	.tat-portal .tat-tbl--responsive,
	.tat-portal .tat-tbl--responsive tbody,
	.tat-portal .tat-tbl--responsive tr,
	.tat-portal .tat-tbl--responsive td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.tat-portal .tat-tbl--responsive thead { display: none; }
	/* Mobile: each row is a stacked card with one thin separator between
	   rows; backgrounds are uniformly white so any theme/Elementor
	   nth-child striping is neutralised. */
	.tat-portal .tat-tbl--responsive tr,
	.tat-portal .tat-tbl--responsive tr:nth-child(even),
	.tat-portal .tat-tbl--responsive tr:nth-child(odd) {
		background: var(--tat-white) !important;
		border: none;
		border-top: 1px solid var(--tat-grey-100);
		padding: 16px 16px;
		box-shadow: none;
	}
	.tat-portal .tat-tbl--responsive tr:first-of-type { border-top: none; }
	.tat-portal .tat-tbl--responsive td,
	.tat-portal .tat-tbl--responsive tr:nth-child(even) td,
	.tat-portal .tat-tbl--responsive tr:nth-child(odd) td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 4px 0;
		border: none;
		background: transparent !important;
		box-shadow: none;
	}
	.tat-portal .tat-tbl--responsive td::before {
		content: attr(data-label);
		font-size: 12px;
		font-weight: 600;
		color: var(--tat-grey-500);
	}
	.tat-portal .tat-tbl--responsive td:empty,
	.tat-portal .tat-tbl--responsive td[data-label=""] { display: none; }
}

/* ─── Reduced motion ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.tat-portal .tat-btn,
	.tat-portal .tat-field input,
	.tat-portal .tat-field select,
	.tat-portal .tat-field textarea {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════
 * LEGACY (pre-2026-04 redesign).
 *
 * Kept so views not yet ported to the new HiFi markup keep rendering.
 * Each block here will be deleted as its corresponding view is ported.
 * ═══════════════════════════════════════════════════════════ */

.tat-login,
.tat-register,
.tat-first-access,
.tat-dashboard,
.tat-profile,
.tat-payments,
.tat-arrears-banner,
.tat-gated-content,
.tat-share-certificate,
.tat-make-payment,
.tat-setup-cta {
	--tat-cyan: var(--tat-blue);
	--tat-black: var(--tat-dark);
	--tat-red-dark: #B91C1C;
}

/* Legacy form */
.tat-form { max-width: 480px; }
.tat-field--inline label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }

/* Legacy button (kept until all views call the new tat-btn). */
a.tat-button,
button.tat-button,
.tat-button {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 4px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	background: var(--tat-grey-100);
	color: var(--tat-dark);
}
.tat-button + .tat-button { margin-left: 8px; }
a.tat-button--primary,
button.tat-button--primary,
.tat-button--primary {
	background: var(--tat-red);
	color: #fff;
}
a.tat-button--secondary,
button.tat-button--secondary,
.tat-button--secondary {
	background: var(--tat-dark);
	color: #fff;
}
a.tat-button--danger,
button.tat-button--danger,
.tat-button--danger {
	background: var(--tat-red);
	color: #fff;
}

.tat-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--tat-grey-100);
	color: var(--tat-grey-700);
	line-height: 1.4;
	white-space: nowrap;
}
.tat-status--active,
.tat-status--succeeded { background: #DCFCE7; color: #166534; }
.tat-status--pending_activation { background: #DBEAFE; color: #1E40AF; }
.tat-status--pending_payment,
.tat-status--pending { background: #FEF3C7; color: #92400E; }
.tat-status--retry_1_failed,
.tat-status--retry_2_failed,
.tat-status--failed { background: #FED7AA; color: #9A3412; }
.tat-status--suspended,
.tat-status--cancelled,
.tat-status--refunded { background: #FEE2E2; color: #991B1B; }

.tat-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.tat-table th,
.tat-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tat-grey-300); }
.tat-table thead th { background: var(--tat-grey-100); font-weight: 700; border-bottom: 2px solid var(--tat-grey-300); }
.tat-table tbody tr:nth-child(even) { background: #FAFAFA; }
.tat-table tbody tr:hover { background: #F5F5F5; }
.tat-table a { color: var(--tat-blue); }

.tat-payments .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Legacy dashboard + various — unchanged from previous portal.css. */
.tat-dashboard__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tat-dashboard__header h2 { margin: 0; }
.tat-dashboard__grid { margin: 0 0 24px; }
.tat-dashboard__row { display: flex; padding: 10px 0; border-bottom: 1px solid var(--tat-grey-300); gap: 16px; }
.tat-dashboard__row:last-child { border-bottom: none; }
.tat-dashboard__row dt { flex: 0 0 180px; font-weight: 600; color: var(--tat-grey-700); }
.tat-dashboard__row dd { flex: 1 1 auto; margin: 0; word-break: break-word; }
.tat-dashboard__links { display: flex; flex-wrap: wrap; gap: 8px; }
.tat-dashboard__links .tat-button { margin-left: 0; }

.tat-setup-cta { background: #FEF3C7; border-left: 4px solid var(--tat-amber); padding: 16px 20px; border-radius: 4px; margin-bottom: 20px; }
.tat-setup-cta h3 { margin: 0 0 4px; font-size: 16px; }
.tat-setup-cta p { margin: 0 0 12px; color: var(--tat-grey-700); }

.tat-arrears-banner { background: var(--tat-red); color: #fff; padding: 14px 18px; border-radius: 4px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tat-arrears-banner__msg { margin: 0; font-weight: 600; color: #fff; }
.tat-arrears-banner .tat-button--danger { background: #fff; color: var(--tat-red); border-color: #fff; }
.tat-arrears-banner a.tat-button:hover { color: var(--tat-red); }

.tat-payments__card,
.tat-payments__history { margin-bottom: 24px; }
.tat-payments__card h3,
.tat-payments__history h3 { margin: 0 0 8px; }

.tat-content-list { list-style: none; padding: 0; margin: 0; }
.tat-content-list__item { padding: 16px 0; border-bottom: 1px solid var(--tat-grey-300); }
.tat-content-list__item:last-child { border-bottom: none; }
.tat-content-list__title { margin: 0 0 4px; font-size: 18px; }
.tat-content-list__title a { color: var(--tat-dark); }
.tat-content-list__title a:hover { color: var(--tat-red); }
.tat-content-list__meta { color: var(--tat-grey-500); font-size: 12px; margin: 0 0 8px; }

.tat-gated-content--locked { padding: 20px; background: var(--tat-grey-100); border: 1px dashed var(--tat-grey-300); border-radius: 4px; text-align: center; }
.tat-gated-content--locked p { margin: 0 0 12px; }

/*
 * Legacy .tat-share-certificate rules from before the 0.9.10 cert
 * strip. The 6px double border + 640px cap rendered as the visible
 * "double border" co-op feedback flagged. The current cert markup
 * uses .tat-cert-frame inside the .tat-portal wrapper so neither
 * the legacy class block nor its print override needs a border.
 */
.tat-share-certificate { background: #fff; text-align: center; }
.tat-share-certificate__header h2 { color: var(--tat-red); margin: 0 0 4px; }
.tat-share-certificate__subtitle { margin: 0 0 32px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tat-grey-500); }
.tat-share-certificate__statement { font-size: 18px; line-height: 1.6; }
.tat-share-certificate__actions { margin-top: 32px; }

/* Print (share certificate). */
@media print {
	.tat-no-print,
	.tat-arrears-banner,
	.tat-setup-cta,
	.tat-dashboard__links,
	.tat-notice { display: none !important; }
	body { background: #fff !important; }
	.tat-share-certificate { box-shadow: none; }
}