/* Leology theme · design system 1.2.0 · the account screens (inc/ds.php: leology_ds_account(), surface 'account').
   Class selectors only, in layer `ds` (wins over style.css, which is in `legacy`).

   A derived surface (FRONTEND_IMPLEMENTATION_PLAN.md phase 6, 20/10/2026): sign-in (template-parts/auth-panel.php),
   the profile (template-parts/profile-panel.php) and onboarding (page-onboarding.php). Each opens on the shared
   Ultramarine band (.leo-dsband, ds-shell.css) and the forms read on white:
   - fields: label in Hanken 700, the design's input (5.5): white, 52 px, a 2 px line-strong frame, square corners,
     Hanken 17 px; focus is an Ultramarine frame + the 3 px Sun ring (ring.input-focus);
   - the career-stage choice: three chips (2.4): white, Ultramarine, a 1.5 px line-strong frame; hover Sun / ink;
     selected Ultramarine / white;
   - notices: the functional colours (§2.7, proposed) always with an icon and text, never colour alone;
   - one Sun primary per view ("Lưu thay đổi", "Tiếp tục"), the line button for "Bỏ qua".
   Nothing moves.
   The form controls (fields, chips, notices, the onboarding actions) also dress the onboarding dialog
   (.leo-onbm, ds-onboarding.css), which opens over any redesigned page (20/10/2026). */

@layer ds {

	/* ---- Sign-in (the account page signed out; onboarding signed out) ------------------------------------- */
	.leo-ds--account .leo-dsauth__panel { width: 100%; max-width: 560px; }
	.leo-ds--account .leo-dsauth .leo-auth-cta__title { margin: 0; font-size: clamp(52px, 8vw, 104px); line-height: .94; }
	.leo-ds--account:lang(vi) .leo-dsauth .leo-auth-cta__title { line-height: 1.04; }
	.leo-ds--account .leo-dsauth .leo-auth-cta__sub { max-width: 30rem; margin: 18px auto 32px; font: 500 19px/1.55 var(--ax-text); color: var(--b-on); }
	.leo-ds--account .leo-dsauth .leo-google { width: 100%; max-width: 420px; min-height: 60px; margin-inline: auto; font-size: 20px; }
	.leo-ds--account .leo-dsauth .leo-auth-cta__terms { max-width: 26rem; margin: 18px auto 0; }

	/* ---- The form column: on white, under the band ------------------------------------------------------- */
	.leo-ds--account .leo-dsform { width: min(100% - 40px, 720px); padding-block: clamp(40px, 6vw, 72px) clamp(64px, 8vw, 104px); }

	/* ---- Profile: the identity on the band, the settings on white -------------------------------------- */
	.leo-ds--account .leo-dsband--profile .leo-dsband__inner { padding-block: clamp(48px, 6vw, 80px); }
	.leo-ds--account .leo-prof__avatar {
		display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin: 0 0 22px;
		border-radius: 0; background: var(--b-sun); color: var(--b-ink); box-shadow: none;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 34px; letter-spacing: .02em;
	}
	.leo-ds--account .leo-prof__avatar--img { object-fit: cover; padding: 0; border: 2px solid #fff; background: #fff; }
	.leo-ds--account .leo-dsband--profile .leo-dsband__title { max-width: 22ch; font-size: clamp(36px, 5.2vw, 72px); }
	.leo-ds--account .leo-dsband--profile .leo-dsband__lede { margin-top: 12px; font-size: 17px; overflow-wrap: anywhere; }

	.leo-ds--account .leo-prof { max-width: none; }
	.leo-ds--account .leo-prof__card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.leo-ds--account .leo-prof__cardhead h2 {
		margin: 0; color: var(--b-field); text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.02;
	}
	/* The section head's Sun bar, as an article's h2 (6.5). */
	.leo-ds--account .leo-prof__cardhead h2::before { content: ""; display: block; width: 44px; height: 6px; margin-bottom: 16px; background: var(--b-sun); }
	.leo-ds--account .leo-prof__cardhead { margin-bottom: 32px; }
	.leo-ds--account .leo-prof__grid { gap: 0 20px; }
	.leo-ds--account .leo-prof__actions { padding-top: 28px; border-top: 2px solid var(--b-line); }

	/* Sign-out: a text link (2.3), Ultramarine caps with a 2 px underline. */
	.leo-ds--account .leo-prof__signout { margin: 36px 0 0; text-align: left; }
	.leo-ds--account .leo-prof__signout a {
		display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border-radius: 0; background: none; color: var(--b-field);
		text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 17px; letter-spacing: .03em;
	}
	.leo-ds--account .leo-prof__signout a:hover, .leo-ds--account .leo-prof__signout a:focus-visible { background: none; color: var(--b-ink); }
	.leo-ds--account .leo-prof__signout .leo-icon { width: 18px; height: 18px; }

	/* ---- Fields ------------------------------------------------------------------------------------- */
	:is(.leo-ds--account, .leo-onbm) .leo-field { margin: 0 0 26px; }
	:is(.leo-ds--account, .leo-onbm) .leo-fieldset { min-width: 0; margin: 0 0 26px; padding: 0; border: 0; }
	:is(.leo-ds--account, .leo-onbm) .leo-field__label { display: block; margin: 0 0 8px; padding: 0; font: 700 15px/1.4 var(--ax-text); color: var(--b-ink); }
	:is(.leo-ds--account, .leo-onbm) .leo-field__optional { margin-left: 8px; font: 500 13px/1.4 var(--ax-text); color: var(--b-ink-3); }
	:is(.leo-ds--account, .leo-onbm) .leo-field__hint { display: block; margin-top: 8px; font: 400 14px/1.5 var(--ax-text); color: var(--b-ink-3); }
	:is(.leo-ds--account, .leo-onbm) .leo-input, :is(.leo-ds--account, .leo-onbm) .leo-select {
		box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px;
		border: 2px solid var(--ds-color-line-strong); border-radius: 0; background-color: #fff; box-shadow: none;
		color: var(--b-ink); font: 400 17px/1.4 var(--ax-text);
		transition: border-color 160ms var(--mo-ease), box-shadow 160ms var(--mo-ease);
	}
	:is(.leo-ds--account, .leo-onbm) .leo-select {
		appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231726C4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
	}
	:is(.leo-ds--account, .leo-onbm) .leo-input::placeholder { color: var(--b-ink-3); opacity: 1; }
	:is(.leo-ds--account, .leo-onbm) .leo-input:hover, :is(.leo-ds--account, .leo-onbm) .leo-select:hover { border-color: var(--b-field); }
	:is(.leo-ds--account, .leo-onbm) .leo-input:focus, :is(.leo-ds--account, .leo-onbm) .leo-select:focus { outline: none; border-color: var(--b-field); box-shadow: var(--ds-ring-input-focus); }
	:is(.leo-ds--account, .leo-onbm) .leo-field.is-invalid :is(.leo-input, .leo-select) { border-color: var(--ds-color-danger); background-color: #fff; }
	:is(.leo-ds--account, .leo-onbm) .leo-field.is-invalid .leo-select:focus { box-shadow: var(--ds-ring-input-focus); }
	:is(.leo-ds--account, .leo-onbm) .leo-field__error { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font: 600 14px/1.5 var(--ax-text); color: var(--ds-color-danger); }
	:is(.leo-ds--account, .leo-onbm) .leo-field__error .leo-icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }

	/* The email: identity, read-only. Press Grey, a quiet frame, and the provider (or "identity") as a small tag. */
	:is(.leo-ds--account, .leo-onbm) .leo-readonly {
		display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px 0 16px;
		border: 2px solid var(--b-line); border-radius: 0; background: var(--b-grey);
	}
	:is(.leo-ds--account, .leo-onbm) .leo-readonly .leo-icon { width: 18px; height: 18px; flex: none; color: var(--b-ink-3); }
	:is(.leo-ds--account, .leo-onbm) .leo-readonly .leo-input--plain { min-height: 48px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--b-ink-2); }
	:is(.leo-ds--account, .leo-onbm) .leo-readonly .leo-input--plain:focus { box-shadow: none; }
	:is(.leo-ds--account, .leo-onbm) .leo-readonly__flag, :is(.leo-ds--account, .leo-onbm) .leo-pill {
		flex: none; margin-left: auto; padding: 3px 8px; border: 0; border-radius: 0; background: var(--b-field); color: #fff; box-shadow: none;
		text-transform: uppercase; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: .04em;
	}

	/* Career stage: three chips (2.4). The radio fills its chip, so the whole chip is the target. */
	:is(.leo-ds--account, .leo-onbm) .leo-segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	:is(.leo-ds--account, .leo-onbm) .leo-segmented__opt { position: relative; display: block; }
	:is(.leo-ds--account, .leo-onbm) .leo-segmented__opt span,
	:is(.leo-ds--account, .leo-onbm) .leo-segmented--cards .leo-segmented__opt span {
		display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 8px; text-align: center;
		border: 1.5px solid var(--ds-color-line-strong); border-radius: 0; background: #fff; color: var(--b-field); box-shadow: none;
		font: 700 17px/1.2 var(--ax-text);
		transition: background-color 160ms var(--mo-ease), color 160ms var(--mo-ease), border-color 160ms var(--mo-ease);
	}
	:is(.leo-ds--account, .leo-onbm) .leo-segmented__opt:hover span { background: var(--b-sun); border-color: var(--b-sun); color: var(--b-ink); }
	:is(.leo-ds--account, .leo-onbm) .leo-segmented__opt input:checked + span { background: var(--b-field); border-color: var(--b-field); color: #fff; box-shadow: none; }
	:is(.leo-ds--account, .leo-onbm) .leo-segmented__opt input:focus-visible + span { outline: 2px solid var(--b-ink); outline-offset: 3px; }

	/* ---- Notices (saved; a refused value) ------------------------------------------------------------- */
	:is(.leo-ds--account, .leo-onbm) .leo-note {
		display: flex; align-items: flex-start; gap: 12px; margin: 0 0 32px; padding: 14px 16px;
		border: 0; border-left: 4px solid var(--b-field); border-radius: 0; background: var(--b-grey); box-shadow: none;
		color: var(--b-ink); font: 500 15px/1.5 var(--ax-text);
	}
	:is(.leo-ds--account, .leo-onbm) .leo-note .leo-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--b-field); }
	:is(.leo-ds--account, .leo-onbm) .leo-note--ok { border-left-color: var(--ds-color-success); }
	:is(.leo-ds--account, .leo-onbm) .leo-note--ok .leo-icon { color: var(--ds-color-success); }
	:is(.leo-ds--account, .leo-onbm) .leo-note--warn { border-left-color: var(--ds-color-danger); }
	:is(.leo-ds--account, .leo-onbm) .leo-note--warn .leo-icon { color: var(--ds-color-danger); }

	/* ---- Onboarding --------------------------------------------------------------------------------- */
	:is(.leo-ds--account, .leo-onbm) .leo-onb { position: static; display: block; min-height: 0; overflow: visible; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } /* style.css's full-page .leo-onb (min-height: 100vh, a gradient) does not apply here */
	:is(.leo-ds--account, .leo-onbm) .leo-onb__panel { padding: 0; }
	:is(.leo-ds--account, .leo-onbm) .leo-onb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; padding: 28px 0 0; border-top: 2px solid var(--b-line); }
	@media (max-width: 599.98px) {
		:is(.leo-ds--account, .leo-onbm) .leo-onb__actions, :is(.leo-ds--account, .leo-onbm) .leo-prof__actions { flex-direction: column; align-items: stretch; }
		:is(.leo-ds--account, .leo-onbm) .leo-onb__actions .leo-btn, :is(.leo-ds--account, .leo-onbm) .leo-prof__actions .leo-btn { justify-content: center; }
	}
}