/* ==================================================================
   LUMIADE brand layer — my-account (Phase 5).
   Gate: is_account_page() in lumiade-brand.php — /my-account/ and all
   its endpoints (login view + logged-in dashboard). Scope every rule
   under the .woocommerce-account body class.
   Spec: docs/superpowers/specs/2026-07-12-clinical-rebrand-phase5-cart-account-design.md
   ================================================================== */

/* — Navigation: plain list, text-control idiom (matches shop filters).
   Links are .woocommerce-account .woocommerce-MyAccount-navigation a =
   (0,2,1), which beats base.css's
   .lumiade-storefront a { color: inherit } at (0,1,1) deterministically
   (2 classes > 1 class settles it before the element column matters). — */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--lumiade-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
	align-items: center;
	color: var(--lumiade-ink);
	display: inline-flex;
	font-family: var(--lumiade-font-sans);
	font-size: var(--lumiade-fs-base);
	min-height: 44px;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	text-decoration-color: var(--lumiade-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	font-weight: 600;
	text-decoration-color: var(--lumiade-ink);
}

/* — Tables (orders, downloads): hairline rows, eyebrow headers,
   tabular figures on numeric columns. — */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border: 0;
	border-collapse: collapse;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--lumiade-line);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number,
.woocommerce-account .woocommerce-orders-table__cell-order-total {
	font-variant-numeric: tabular-nums;
}

/* — Forms: always-visible ink labels ≥15px; 17px inputs (border/44px
   handled below + by components.css' sitewide form-field rule);
   focus = border swap to ink, no glow. — */
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce-form-login label {
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-sm);
}
.woocommerce-account .woocommerce-form-login .input-text,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Input {
	font-size: var(--lumiade-fs-base);
}

/* — §11a–h migrated from lumiade-homepage.css (Phase 5 T4). — */

/* 11a. Login inputs: 44px touch target + lumiade-line border to match the
   sitewide form treatment. Blocksy sets border via
   --theme-form-field-border-initial-color at (0,0,1);
   .woocommerce-account .woocommerce-form-login .input-text = (0,3,0) wins. */
.woocommerce-account .woocommerce-form-login .input-text {
	border-color: var(--lumiade-line);
	min-height: 44px;
}
.woocommerce-account .woocommerce-form-login .input-text:focus {
	border-color: var(--theme-form-field-border-focus-color, var(--lumiade-ink));
}

/* 11b. Submit button: 44px touch target, CTA-floor type (17px — the
   post-Phase-1 decision raised CTA labels to var(--lumiade-fs-base)).
   Blocksy .woocommerce button.button = (0,2,1); the .woocommerce-form-login
   ancestor reaches (0,3,0), which wins without !important. */
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit {
	font-size: var(--lumiade-fs-base);
	min-height: 44px;
}

/* 11c. Content buttons (View order, Save changes, Add payment method…):
   44px target. WC/Blocksy render these ~40px; inline-flex centres the
   label at the taller height. Fill/color: see components.css ink-CTA rule. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
}

/* 11d. Account form fields: 44px touch target + token border (matches 11a). */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Input {
	border-color: var(--lumiade-line);
	min-height: 44px;
}

/* 11e. "Edit" links on the Addresses page (~32px) → 44px touch target. */
.woocommerce-account .woocommerce-Address-title .edit {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

/* 11f. Show/hide-password control (was 14×14): 44×44 touch target. */
.woocommerce-account .woocommerce-MyAccount-content .show-password-input {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

/* 11g. Field hint text ("This will be how your name…"): 14px floor
   (non-label prose; var(--lumiade-fs-sm)=15px satisfies it). */
.woocommerce-account .woocommerce-MyAccount-content em,
.woocommerce-account .woocommerce-MyAccount-content .description {
	font-size: var(--lumiade-fs-sm);
}

/* 11h. Orders table — keep the order number visible on mobile.
   WC renders the order # as <th scope="row">, and its small-screen stylesheet
   (loaded via media="…max-width:768px") hides tbody <th>
   (.woocommerce table.shop_table_responsive tbody th{display:none}) — so the
   order number disappears while the <td> cells stack. Re-show that one <th> as
   a stacked, labelled row like the others. (0,3,3) beats WC's (0,2,3). */
@media (max-width: 768px) {
	.woocommerce-account .shop_table_responsive tbody tr th.woocommerce-orders-table__cell-order-number {
		display: block;
		text-align: right;
	}
	.woocommerce-account .shop_table_responsive tbody tr th.woocommerce-orders-table__cell-order-number::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 600;
	}
}