/* My account (boards account-login-v1 / -mobile signed out, account-v1 / -mobile signed in). Fields, the order
   summary and the bank rows come from checkout.css; the page head from main.css. */

.acc-wrap { padding-bottom: 48px; }
.acc-text { font-size: 13px; line-height: 1.6; color: var(--quiet); }
.acc-note { font-size: 12px; line-height: 1.5; color: var(--quiet); }
.acc-link { font-size: 13px; font-weight: 500; line-height: 19px; color: var(--sage-deep); text-decoration: none; }
.acc-link:hover { text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 3px; }
.acc-wrap .form-row [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--error); } /* also where WooCommerce's address script strips the row class */
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; } /* WooCommerce's strength meter holds back a weak password */

/* ---------- Signed out: two panels (login on --ground-alt, register outlined), 20 between their parts ---------- */
.acc-auth { display: grid; gap: 40px; }
.acc-panel { display: grid; gap: 20px; align-content: start; padding: 24px 20px; box-shadow: inset 0 0 0 1px var(--line); }
.acc-panel--login { background: var(--ground-alt); }
.acc-panel-title { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; font-size: 22px; line-height: 26px; }
.acc-form { display: grid; gap: 20px; }
.acc-form .form-row { display: grid; gap: 8px; margin: 0; }
.acc-form wc-order-attribution-inputs { display: contents; } /* hidden inputs only: no grid gap for it */
.acc-check, .acc-submit, .acc-lost { margin: 0; }
.acc-submit { display: grid; justify-items: start; }
.acc-form .woocommerce-privacy-policy-text:empty { display: none; }
.acc-check label.checkbox { line-height: 18px; }
.acc-check .input-checkbox { margin: 0; box-shadow: inset 0 0 0 1.5px var(--sage); } /* the board's 1.5 box */
.acc-submit .btn { width: 100%; }
.acc-lost { font-size: 13px; line-height: 19px; }
.acc-lost a { font-weight: 500; color: var(--sage-deep); text-decoration: none; }
.acc-lost a:hover { text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 3px; }
/* Notices above the panels (wrong password, account created, reset done). */
.acc-wrap > .woocommerce-notices-wrapper .woocommerce-error,
.acc-wrap > .woocommerce-notices-wrapper .woocommerce-message,
.acc-wrap > .woocommerce-notices-wrapper .woocommerce-info { margin-bottom: 40px; }
.woocommerce-error li + li { margin-top: 4px; }

/* WooCommerce's password strength meter (register, new password, account details): text only. */
.woocommerce-password-strength { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--error); }
.woocommerce-password-strength.good, .woocommerce-password-strength.strong { color: var(--sage-deep); }
.woocommerce-password-hint { font-size: 12px; line-height: 1.5; color: var(--quiet); }

.acc-actions { margin: 0; }

/* ---------- Signed in: nav, then the endpoint ---------- */
.acc-grid { display: grid; gap: 28px; }
.acc-nav ul { box-shadow: inset 0 1px 0 var(--line); }
.acc-nav a {
	display: flex; align-items: center; gap: 12px; padding: 14px; box-shadow: inset 0 -1px 0 var(--line);
	font-size: 13px; font-weight: 300; line-height: 18px; color: var(--quiet); text-decoration: none;
}
.acc-nav a:hover { color: var(--ink); }
.acc-nav .is-active a { background: var(--ground-alt); color: var(--ink); font-weight: 500; }
.acc-nav-mark { margin-left: auto; font-weight: 300; line-height: 19px; color: var(--sage-deep); }

.acc-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; min-width: 0; }
.acc-main > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.acc-main > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { margin: 0; } /* the column's gap spaces them (incl. WooCommerce's email-confirm prompt) */
.acc-main > :is(.acc-h2, .acc-h2-row) { order: -1; } /* WooCommerce prints notices first; the heading reads first */
.acc-h2 { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; font-size: 26px; line-height: 1.15; }
.acc-h2-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.acc-empty { display: grid; gap: 20px; justify-items: start; }
.acc-empty p { margin: 0; }
.acc-pages { display: flex; gap: 32px; }

/* Orders: on mobile each row is a card - number and status, date and sheets, total and View order. */
.acc-orders { width: 100%; border-collapse: collapse; box-shadow: inset 0 1px 0 var(--line); }
.acc-orders thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.acc-orders tbody, .acc-orders th, .acc-orders td { display: block; padding: 0; text-align: left; font-weight: 300; }
.acc-order {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 18px 0; box-shadow: inset 0 -1px 0 var(--line);
}
.ao-order { grid-area: 1 / 1; }
.acc-orders .ao-status { grid-area: 1 / 2; display: flex; justify-content: flex-end; }
.ao-date { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0.02em; grid-area: 2 / 1 / 3 / 3; line-height: 20px; color: var(--quiet); }
.ao-total { grid-area: 3 / 1; }
.acc-orders .ao-action { grid-area: 3 / 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; }
.ao-num { display: block; font-size: 16px; font-weight: 500; line-height: 21px; color: var(--ink); }
.ao-items { display: none; }
.ao-total { font-family: var(--font-mono); font-weight: 300; letter-spacing: -0.02em; font-size: 20px; line-height: 24px; }
.acc-chip {
	display: inline-flex; padding: 5px 10px; box-shadow: inset 0 0 0 1.5px var(--sage); white-space: nowrap;
	font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: 0.06px; color: var(--sage-deep);
}
.acc-chip--wait { box-shadow: inset 0 0 0 1px var(--quiet); color: var(--quiet); } /* a state, not a control: no green */

/* View order: groups further apart, like order received; its summary spans the column. */
.acc-main:has(> .acc-overview) { gap: 36px; }
.acc-overview dd .acc-chip { vertical-align: top; }
.acc-main .or-summary { grid-column: auto; grid-row: auto; position: static; width: auto; margin: 0; } /* checkout.css puts it in column 9 of order received's grid */
.acc-addresses { display: grid; gap: 36px; }
.acc-address { display: grid; gap: 16px; align-content: start; }
.acc-address address { font-size: 16px; line-height: 1.5; }
.acc-address address.acc-text { font-size: 13px; line-height: 1.6; font-style: normal; } /* no address yet */
.acc-address h3.label, .or-bank h3.label, .acc-updates h3.label { margin: 0; }
.acc-updates { display: grid; gap: 16px; }
.acc-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.acc-note-date { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 16px; text-transform: uppercase; color: var(--sage-deep); }
.order-again { margin: 0; }
.order-again .button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 10px 32px;
	box-shadow: inset 0 0 0 1.5px var(--sage); font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--sage-deep); text-decoration: none;
}
.order-again .button:hover { background: var(--sage); color: var(--ground); }

/* Addresses and account details: the checkout's field grid. */
.acc-edit { display: grid; gap: 36px; }
.acc-edit .co-fields .acc-note { margin-top: -2px; }
.acc-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.acc-fieldset > legend { display: flex; width: 100%; padding: 0; margin-bottom: 16px; }
.acc-fieldset > .acc-text { margin-bottom: 20px; }
.woocommerce-address-fields { display: grid; gap: 36px; }
/* Lone half-width fields take the row in js/fields.js, as at checkout. */
.acc-edit .acc-submit { margin: 0; }

/* ---------- From 768 ---------- */
@media (min-width: 768px) {
	.acc-wrap { padding-bottom: 72px; }
	.acc-note { font-size: 11px; }

	.acc-auth { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.acc-panel { padding: 32px; }
	.acc-panel-title { font-size: 26px; line-height: 31px; }

	/* Tablet: the nav is a row of tabs over the endpoint. */
	.acc-grid { gap: 40px; }
	.acc-nav ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
	.acc-nav a { justify-content: center; padding: 16px 8px; box-shadow: none; text-align: center; }
	.acc-nav-mark { display: none; }

	.acc-main { gap: 24px; }
	.acc-h2 { font-size: 34px; }

	.acc-orders { box-shadow: none; table-layout: fixed; }
	.acc-orders thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
	.acc-orders tbody { display: table-row-group; }
	.acc-order { display: table-row; }
	.acc-orders th, .acc-orders td { display: table-cell; vertical-align: middle; padding: 20px 24px 20px 0; box-shadow: inset 0 -1px 0 var(--line); }
	.acc-orders thead th {
		font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em;
		padding: 0 24px 12px 0; vertical-align: bottom; line-height: 16px; text-transform: uppercase; color: var(--sage-deep);
	}
	/* Columns 140 / 200 / 160 / rest / 120 of the board's 986, each + its 24 gap, as shares so they hold at 698. */
	.acc-orders th:nth-child(1) { width: 16.6%; }
	.acc-orders th:nth-child(2) { width: 22.7%; }
	.acc-orders th:nth-child(3) { width: 18.7%; }
	.acc-orders th:nth-child(5) { width: 12.2%; }
	.acc-orders th:last-child, .acc-orders td:last-child { padding-right: 0; }
	.ao-items { display: block; margin-top: 4px; font-size: 11px; line-height: 15px; color: var(--quiet); }
	.ao-items-m { display: none; }
	.ao-date { color: var(--ink); line-height: 19px; }
	.acc-orders .ao-status { display: table-cell; }
	.acc-orders .ao-action { display: table-cell; text-align: right; }
	.ao-action .acc-link + .acc-link { margin-left: 16px; }
	.acc-chip { padding: 6px 12px; }

	.acc-main:has(> .acc-overview) { gap: 48px; }
	.acc-addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.acc-edit { gap: 48px; }
	.acc-edit .co-fields .acc-half { grid-column: auto; }
	.acc-edit .acc-submit .btn { width: auto; }
	.woocommerce-address-fields { gap: 48px; }
}

/* ---------- Desktop from 1024: the nav a 3-column rail, the endpoint in the other 9 ---------- */
@media (min-width: 1024px) {
	.acc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
	.acc-nav { grid-column: 1 / 4; grid-row: 1; }
	.acc-main { grid-column: 4 / -1; grid-row: 1; }
	.acc-grid::before { display: block; grid-column: 4; grid-row: 1; } /* the rule: nav | panel (main.css) */
	.acc-nav ul { display: block; box-shadow: inset 0 1px 0 var(--line); }
	.acc-nav a { justify-content: flex-start; padding: 16px; box-shadow: inset 0 -1px 0 var(--line); text-align: left; }
	.acc-nav-mark { display: inline; }
}