/* Leology theme · design system 1.1.0 · the shell of every redesigned page (inc/ds.php):
   the bar, the phone drawer, the language switch, sign-in and the member's avatar, buttons, section heads, the
   footer, focus, the skip link, the sign-in wall and the Google sign-in block it shares with the article gate.
   Drawn after Arena-x-B-01-r1 (COMPONENT_LIBRARY.md 1.1–1.5, 2.1, 3.3, 5.9). Class selectors only, in layer `ds`. */

@layer ds {

	/* ---- Page ------------------------------------------------------------------------------------- */
	.leo-ds { background: var(--ax-paper); color: var(--b-ink); font-family: var(--ax-text); }
	.leo-ds .leo-main { background: var(--ax-paper); }
	.leo-ds .leo-wrap { width: min(100% - 40px, var(--ds-size-container)); max-width: none; margin-inline: auto; padding-inline: 0; }
	@media (min-width: 768px) { .leo-ds .leo-wrap { width: min(90%, var(--ds-size-container)); } }
	.leo-ds :focus-visible { outline: 2px solid var(--b-ink); outline-offset: 3px; }
	/* On the fields (bar, drawer, footer, deep and Ultramarine bands) the ring is Sun (design system §2.4). */
	.leo-ds .leo-nav :focus-visible, .leo-ds .leo-foot :focus-visible, .leo-ds .leo-wall__dialog :focus-visible { outline-color: var(--b-sun); }
	.leo-ds .leo-skip { left: 12px; top: -60px; padding: 10px 14px; background: var(--b-ink); color: #fff; border-radius: 0; font: 700 15px/1.2 var(--ax-text); }
	.leo-ds .leo-skip:focus { top: 12px; left: 12px; }
	.leo-ds .leo-icon { stroke-width: 2.2; }

	/* ---- Buttons (2.1): square, a 2 px border, Bricolage caps; one Sun primary per view ----------- */
	.leo-ds .leo-btn {
		min-height: 52px; gap: 12px; padding: 14px 24px; border: 2px solid transparent; border-radius: 0; box-shadow: none;
		font-family: var(--ax-display); font-stretch: 75%; font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase;
		-webkit-backdrop-filter: none; backdrop-filter: none;
		transition: background-color 160ms var(--mo-ease-fade), color 160ms var(--mo-ease-fade), border-color 160ms var(--mo-ease-fade), transform 160ms var(--mo-ease-fade);
	}
	.leo-ds .leo-btn--sm { min-height: 40px; gap: 8px; padding: 8px 16px; font-size: 16px; }
	.leo-ds .leo-btn--lg { min-height: 60px; padding: 16px 30px; font-size: 21px; }
	.leo-ds .leo-btn:active { transform: scale(.98); }
	.leo-ds .leo-btn--yellow { background: var(--b-sun); color: var(--b-ink); border-color: var(--b-sun); box-shadow: none; }
	.leo-ds .leo-btn--yellow:hover, .leo-ds .leo-btn--yellow:focus-visible { background: var(--b-ink); color: var(--b-sun); border-color: var(--b-ink); }
	.leo-ds .leo-btn--navy, .leo-ds .leo-btn--blue { background: var(--b-field); color: #fff; border-color: var(--b-field); box-shadow: none; }
	.leo-ds .leo-btn--navy:hover, .leo-ds .leo-btn--navy:focus-visible, .leo-ds .leo-btn--blue:hover, .leo-ds .leo-btn--blue:focus-visible { background: var(--b-ink); color: #fff; border-color: var(--b-ink); box-shadow: none; }
	.leo-ds .leo-btn--glass, .leo-ds .leo-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); box-shadow: none; }
	.leo-ds .leo-btn--glass:hover, .leo-ds .leo-btn--glass:focus-visible, .leo-ds .leo-btn--ghost:hover, .leo-ds .leo-btn--ghost:focus-visible { background: #fff; color: var(--b-field); border-color: #fff; }
	.leo-ds .leo-btn--soft { background: transparent; color: var(--b-field); border-color: var(--b-field); }
	.leo-ds .leo-btn--soft:hover, .leo-ds .leo-btn--soft:focus-visible { background: var(--b-field); color: #fff; border-color: var(--b-field); }
	.leo-ds .leo-btn--quiet { min-height: 40px; padding: 8px 4px; background: none; border-color: transparent; color: var(--b-field); text-decoration: underline; text-underline-offset: 5px; }
	.leo-ds .leo-btn--quiet:hover, .leo-ds .leo-btn--quiet:focus-visible { background: none; color: var(--b-ink); }

	/* Avatars are square, the field or Sun behind initials (6.9, 1.1). */
	.leo-ds .leo-avatar { border-radius: 0; background: var(--b-field); color: #fff; font: 700 12px/1 var(--ax-text); }

	/* ---- Section head (3.3): condensed capitals and a 3 px rule filling the row ------------------- */
	.leo-ds .leo-sechead { display: flex; align-items: center; gap: 22px; margin: 0 0 34px; }
	.leo-ds .leo-sechead__label { font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: clamp(34px, 3.7vw, 58px); line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--b-field); }
	.leo-ds:lang(vi) .leo-sechead__label, html:lang(vi) .leo-ds .leo-sechead__label { line-height: 1.08; }
	.leo-ds .leo-sechead__rule { flex: 1; height: 3px; background: var(--b-field); }

	/* ---- The bar (1.1) ------------------------------------------------------------------------------ */
	.leo-ds .leo-nav { background: var(--b-field); color: #fff; border-bottom: 3px solid var(--b-sun); box-shadow: none; }
	.leo-ds .leo-nav__inner { width: min(100% - 40px, var(--ds-size-container)); max-width: none; height: auto; min-height: 58px; gap: 12px; padding-inline: 0; }
	@media (min-width: 768px) { .leo-ds .leo-nav__inner { width: min(90%, var(--ds-size-container)); min-height: 64px; gap: 28px; } }
	.leo-ds .leo-nav__brand { margin-right: 0; }
	.leo-ds .leo-nav__brand img { height: 23px; }
	@media (min-width: 768px) { .leo-ds .leo-nav__brand img { height: 26px; } }
	.leo-ds .leo-nav__menu { gap: 4px; }
	.leo-ds .leo-nav__link {
		display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 0; background: none;
		font-family: var(--ax-display); font-stretch: 75%; font-size: 19px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .84);
	}
	.leo-ds .leo-nav__link:hover { color: #fff; background: none; }
	.leo-ds .leo-nav__link.is-active { color: var(--b-ink); background: var(--b-sun); }
	.leo-ds .leo-nav__link.is-active::after { display: none; }
	.leo-ds .leo-nav__actions { gap: 14px; }
	@media (max-width: 767.98px) { .leo-ds .leo-nav__actions { gap: 10px; } }
	/* Small phones (< 400 px) with every control in the bar (search button, avatar, "Vào Arena", menu): tighter. */
	@media (max-width: 399.98px) { .leo-ds .leo-nav__actions { gap: 6px; } .leo-ds .leo-nav__cta { padding-inline: 10px; } .leo-ds .leo-nav__inner { gap: 8px; } }
	/* Below 360 px a bar that also carries the search button has no room for "Vào Arena" (the menu still leads to Arena). */
	@media (max-width: 359.98px) { .leo-ds .leo-nav__actions:has(.leo-nav__find) .leo-nav__cta { display: none; } }
	/* Tablet (768–1023): links, search, language, sign-in and "Vào Arena" share one row; tighter gaps and links. */
	@media (min-width: 768px) and (max-width: 1023.98px) {
		.leo-ds .leo-nav__inner { gap: 14px; }
		.leo-ds .leo-nav__menu { gap: 2px; }
		.leo-ds .leo-nav__link { padding-inline: 8px; font-size: 17px; }
		.leo-ds .leo-nav__actions { gap: 10px; }
		.leo-ds .leo-nav__signin-link { font-size: 16px; }
	}

	/* The search stays where D-053 puts it (the design shows none): a square field on the Ultramarine bar,
	   after the proposed search component (5.5). */
	.leo-ds .leo-search--nav .leo-search__input, .leo-ds .leo-search--drawer .leo-search__input {
		border-radius: 0; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); color: #fff; font: 500 15px/1.3 var(--ax-text);
	}
	.leo-ds .leo-search--nav .leo-search__input::placeholder, .leo-ds .leo-search--drawer .leo-search__input::placeholder { color: rgba(255, 255, 255, .72); }
	.leo-ds .leo-search--nav .leo-search__input:focus, .leo-ds .leo-search--drawer .leo-search__input:focus { border-color: var(--b-sun); background: rgba(255, 255, 255, .12); box-shadow: none; }
	.leo-ds .leo-search--nav > .leo-icon, .leo-ds .leo-search--drawer > .leo-icon { color: rgba(255, 255, 255, .72); }
	/* The bar's field takes the room left over (768–1023: as little as ~55 px). Too narrow for its placeholder, it
	   shows the magnifier alone instead of a clipped "Sea…"; typing works as before. */
	.leo-ds .leo-nav__search { container-type: inline-size; }
	@container (max-width: 170px) { .leo-ds .leo-search--nav .leo-search__input::placeholder { color: transparent; } }
	.leo-ds .leo-search__submit { border-radius: 0; background: var(--b-sun); color: var(--b-ink); font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
	.leo-ds .leo-search__submit:hover { background: var(--b-ink); color: var(--b-sun); }

	/* Language switch: a 1 px frame; the current language in Sun. */
	.leo-ds .leo-lang { gap: 4px; padding: 4px 8px; border-radius: 0; border: 1px solid rgba(255, 255, 255, .45); font: 600 13px/1 var(--ax-text); }
	.leo-ds .leo-lang__opt { color: rgba(255, 255, 255, .7); font-weight: 600; padding: 2px 3px; }
	.leo-ds .leo-lang__opt:hover { color: #fff; }
	.leo-ds .leo-lang__opt.is-active { color: var(--b-sun); font-weight: 700; }
	.leo-ds .leo-lang__sep { color: rgba(255, 255, 255, .72); } /* 5.77:1 on the field */

	/* Sign-in: the quiet link beside "Vào Arena", or the Sun button when the bar has no other primary. */
	.leo-ds .leo-nav__signin-link { padding: 8px 4px; font-family: var(--ax-display); font-stretch: 75%; font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: #fff; text-decoration: none; }
	.leo-ds .leo-nav__signin-link:hover { color: var(--b-sun); }
	.leo-ds .leo-nav__cta { white-space: nowrap; }
	@media (max-width: 767.98px) { .leo-ds .leo-nav__signin-link { display: none; } }
	/* The member's avatar: a square of Sun with their initials (or their photo), to the profile. */
	.leo-ds .leo-nav__me { border-radius: 0; padding: 4px; }
	.leo-ds .leo-nav__me .leo-avatar { width: 34px; height: 34px; background: var(--b-sun); color: var(--b-ink); box-shadow: none; font-size: 13px; }

	/* Phone: the menu button, then the drawer on the deep field with a Sun top. */
	.leo-ds .leo-nav__burger, .leo-ds .leo-nav__find { width: 44px; height: 44px; border-radius: 0; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); transition: background-color 160ms var(--mo-ease-fade), color 160ms var(--mo-ease-fade); }
	.leo-ds .leo-nav__burger:hover, .leo-ds .leo-nav__find:hover { background: rgba(255, 255, 255, .08); color: #fff; }
	.leo-ds .leo-nav__burger[aria-expanded="true"] { background: var(--b-sun); color: var(--b-ink); box-shadow: none; }
	.leo-ds .leo-nav__drawer { background: var(--b-deep); border-top: 3px solid var(--b-sun); padding: 16px 20px 22px; }
	.leo-ds .leo-nav__menu--drawer .leo-nav__link { min-height: 48px; padding: 10px 12px; font-size: 24px; color: #fff; }
	.leo-ds .leo-nav__menu--drawer .leo-nav__link.is-active { background: var(--b-sun); color: var(--b-ink); }
	.leo-ds .leo-nav__drawer-foot { border-top-color: rgba(255, 255, 255, .16); }
	.leo-ds .leo-nav__drawer-link { font-family: var(--ax-display); font-stretch: 75%; font-size: 19px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
	.leo-ds .leo-nav__drawer-link:hover { color: var(--b-sun); }

	/* ---- Footer (1.5): the deep band with a 3 px Sun top ------------------------------------------ */
	.leo-ds .leo-foot { background: var(--b-deep); color: rgba(255, 255, 255, .72); border-top: 3px solid var(--b-sun); padding: 28px 0; }
	.leo-ds .leo-foot__inner { flex-wrap: wrap; gap: 20px 32px; }
	.leo-ds .leo-foot__brand { gap: 14px; }
	.leo-ds .leo-foot__mark { height: 24px; opacity: 1; }
	.leo-ds .leo-foot__team { font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 20px; line-height: 1; text-transform: uppercase; color: #fff; }
	.leo-ds .leo-foot__tagline { margin-top: 4px; font: 400 14px/1.4 var(--ax-text); color: rgba(255, 255, 255, .72); }
	.leo-ds .leo-foot__nav { gap: 8px 20px; }
	.leo-ds .leo-foot__menu { gap: 8px 20px; }
	.leo-ds .leo-foot__menu a, .leo-ds .leo-foot__link { font: 500 14px/1.4 var(--ax-text); color: #fff; text-decoration: none; }
	.leo-ds .leo-foot__menu a:hover, .leo-ds .leo-foot__link:hover { color: var(--b-sun); }
	.leo-ds .leo-foot__sep { display: none; } /* it dangled at the end of a wrapped row; the row's gap separates */
	.leo-ds .leo-foot__legal { font: 400 14px/1.4 var(--ax-text); color: rgba(255, 255, 255, .72); }

	/* ---- The sign-in wall (5.9) and the Google sign-in block (shared with the article gate, 6.14) ----- */
	.leo-ds .leo-wall__backdrop { background: rgba(11, 14, 46, .62); -webkit-backdrop-filter: none; backdrop-filter: none; }
	/* No white frame (19/10/2026): the field and its Sun top edge are the whole dialog; the badge is centred with the
	   heading, the button and the terms under it. */
	.leo-ds .leo-wall__dialog { border-radius: 0; border: 0; border-top: 6px solid var(--b-sun); background: var(--b-field); color: #fff; box-shadow: none; text-align: center; }
	.leo-ds .leo-wall__badge { border-radius: 0; border: 0; background: var(--b-sun); color: var(--b-ink); box-shadow: none; }
	.leo-ds .leo-wall__close { border-radius: 0; color: #fff; }
	.leo-ds .leo-wall__close:hover { background: rgba(255, 255, 255, .12); }
	.leo-ds .leo-auth-cta__title { font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.04; text-transform: uppercase; letter-spacing: 0; color: #fff; }
	.leo-ds:lang(vi) .leo-auth-cta__title, html:lang(vi) .leo-ds .leo-auth-cta__title { line-height: 1.1; }
	.leo-ds .leo-auth-cta__sub { font: 400 17px/1.6 var(--ax-text); color: var(--b-on); }
	.leo-ds .leo-auth-cta__terms, .leo-ds .leo-auth-cta__status { font: 400 13px/1.5 var(--ax-text); color: var(--b-on); }
	.leo-ds .leo-auth-cta__terms a { color: #fff; text-underline-offset: 3px; }
	.leo-ds .leo-google {
		min-height: 52px; border-radius: 0; border: 2px solid var(--b-sun); background: var(--b-sun); color: var(--b-ink); box-shadow: none;
		font-family: var(--ax-display); font-stretch: 75%; font-size: 18px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	}
	.leo-ds .leo-google:hover, .leo-ds .leo-google:focus-visible { background: var(--b-ink); color: var(--b-sun); border-color: var(--b-ink); }
	.leo-ds .leo-auth-cta__icon { border-radius: 0; background: var(--b-sun); color: var(--b-ink); box-shadow: none; }
	/* A sign-in failure (?auth_error=…): a white block with the danger bar and icon, never colour alone (§2.7). */
	.leo-ds .leo-auth-cta__error, .leo-ds .leo-auth-cta--dark .leo-auth-cta__error {
		margin: 0 auto 24px; max-width: 30rem; padding: 12px 16px; border: 0; border-left: 4px solid var(--ds-color-danger); border-radius: 0;
		background: #fff; color: var(--b-ink); text-align: left; font: 500 15px/1.5 var(--ax-text);
	}
	.leo-ds .leo-auth-cta__error .leo-icon { color: var(--ds-color-danger); }

	/* ---- Band (derived surfaces, 20/10/2026): the opening Ultramarine field of the sign-in, profile, onboarding,
	   ordinary (legal) pages and 404. Column rules (3.7), an optional Sun eyebrow, the heading in display capitals,
	   a lede, actions. `--center` centres it (account screens, 404); `--screen` makes it nearly a screen tall, as
	   Arena's Coming Soon page (78 % of a phone, min(88vh, 860px) from tablets up). ----------------------------- */
	.leo-ds .leo-dsband { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; background: var(--b-field); color: #fff; }
	.leo-ds .leo-dsband--screen { min-height: 78vh; min-height: 78svh; }
	@media (min-width: 768px) { .leo-ds .leo-dsband--screen { min-height: min(88vh, 860px); } }
	.leo-ds .leo-dsband__inner {
		position: relative; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
		padding-block: clamp(56px, 7vw, 96px);
	}
	.leo-ds .leo-dsband--center .leo-dsband__inner { align-items: center; text-align: center; }
	.leo-ds .leo-dsband__rules {
		position: absolute; inset: 0; z-index: -1; pointer-events: none;
		border-left: 1px solid var(--ds-color-rule-on-ultramarine);
		background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--ds-color-rule-on-ultramarine) calc(25% - 1px) 25%);
	}
	.leo-ds .leo-dsband :focus-visible { outline-color: var(--b-sun); }
	.leo-ds .leo-dsband__eyebrow {
		margin: 0 0 14px; color: var(--b-sun); text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: clamp(24px, 2.8vw, 36px); line-height: 1; letter-spacing: .08em;
	}
	.leo-ds .leo-dsband__title {
		max-width: 20ch; margin: 0; color: #fff; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: clamp(40px, 6.4vw, 88px); line-height: .96; letter-spacing: -.005em;
	}
	.leo-ds:lang(vi) .leo-dsband__title { line-height: 1.08; }
	.leo-ds .leo-dsband__lede { max-width: 36rem; margin: 20px 0 0; color: var(--b-on); text-wrap: balance; font: 500 19px/1.55 var(--ax-text); }
	/* A notice on the field (8.1): a square ink block, white text, a 3 px Sun bar. */
	.leo-ds .leo-dsband__note {
		display: inline-flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; padding: 10px 14px;
		border-left: 3px solid var(--b-sun); background: var(--b-ink); color: #fff; font: 500 14px/1.45 var(--ax-text);
	}
	.leo-ds .leo-dsband__note .leo-icon { width: 18px; height: 18px; flex: none; color: var(--b-sun); }
	.leo-ds .leo-dsband__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
	.leo-ds .leo-dsband--center .leo-dsband__actions { justify-content: center; }
	@media (max-width: 599.98px) {
		.leo-ds .leo-dsband__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
		.leo-ds .leo-dsband__actions .leo-btn { justify-content: center; }
	}
	/* On a field the primary turns white on hover (2.1). */
	.leo-ds .leo-dsband .leo-btn--yellow:hover, .leo-ds .leo-dsband .leo-btn--yellow:focus-visible,
	.leo-ds .leo-dsband .leo-google:hover, .leo-ds .leo-dsband .leo-google:focus-visible { background: #fff; color: var(--b-ink); border-color: #fff; }

	/* ---- The consent banner (proposed in B: a square ink notice, 8.1) ------------------------------- */
	.leo-ds .leo-consent__inner { border-radius: 0; background: var(--b-ink); box-shadow: none; border-top: 3px solid var(--b-sun); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.leo-ds .leo-consent__title { font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
}