/**
 * M2 Unified Login — "Simpler" skin, the lock screen wearing HORIZON (8.0)
 *
 * A layer, not a stage. It loads only while stage_design = lock AND the
 * HORIZON box is ticked, and always AFTER m2ul-login-lock.css, whose rules it
 * re-tunes. Every selector is scoped to .m2ul-simpler[data-lock="horizon"], so
 * with the box unticked nothing here can match and the lock screen is 7.0.
 * The design is DESIGN-LOCK.md §13.
 *
 * Four moves over 7.0's markup (the form is byte for byte 7.0's):
 *   1. the clock is giant and stands IN the planet's limb — the sky script
 *      measures the limb's circle and masks the time to everything outside it
 *      (--hz-x / --hz-y / --hz-r), so the planet is drawn over the digits' feet;
 *   2. the login form becomes a grid: both fields and the key share one glass
 *      capsule (the form's ::before), the key seated beside the passphrase;
 *   3. the disclosure keeps only the usual way; the worlds live in a dock at
 *      the foot of the stage (.m2ul-hz-dock, the OS dock's own glass);
 *   4. the terms line moves to the bottom-right corner, out of the dock's way.
 */

/* =========================================================================
   The rhythm — a bigger clock, a dock-sized foot
   ========================================================================= */

.m2ul-simpler[data-lock="horizon"] {
	--lock-time: clamp(96px, min(31vh, 23vw), 300px);
	--lock-gap-clock: clamp(18px, 6vh, 64px);
	--lock-gap-col: clamp(10px, 2.4vh, 26px);
	--lock-clock-h: calc(var(--lock-time) * 0.86 + 34px);
	--lock-foot-h: 132px;
}

.m2ul-simpler[data-lock="horizon"]:not([data-view="login"]) {
	--lock-time: clamp(56px, 12vh, 112px);
	--lock-gap-clock: clamp(14px, 3.6vh, 34px);
	--lock-gap-col: clamp(12px, 3vh, 26px);
	--lock-foot-h: 64px;
}

/* The usual way is three rows now (the worlds are in the dock), so the clock
   steps back less than 7.0's, and the dock keeps its room. */
.m2ul-simpler[data-lock="horizon"][data-classic="on"] {
	--lock-time: clamp(60px, 16vh, 150px);
	--lock-gap-clock: clamp(12px, 3vh, 28px);
	--lock-gap-col: clamp(10px, 2.2vh, 20px);
	--lock-foot-h: 132px;
}

/* The usual way inline in the dock: opening it moves nothing in the column,
   so the clock keeps its full size (the lock sheet's compaction undone). */
.m2ul-simpler[data-lock="horizon"][data-lock-dock="inline"][data-classic="on"] {
	--lock-time: clamp(96px, min(31vh, 23vw), 300px);
	--lock-gap-clock: clamp(18px, 6vh, 64px);
	--lock-gap-col: clamp(10px, 2.4vh, 26px);
	--lock-foot-h: 132px;
}

/* =========================================================================
   The clock — date above, the time standing in the limb
   ========================================================================= */

.m2ul-simpler[data-lock="horizon"] .m2ul-lock-clock {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* The digits' dark halo lives here, not as a text-shadow on the time: the
	   mask clips its element to the border box, so a text-shadow there is cut
	   into a visible rectangle. A filter on the parent shadows the masked
	   glyphs as they are. */
	filter: drop-shadow(0 0 26px rgba(3, 3, 9, 0.55));
}

.m2ul-simpler[data-lock="horizon"] .m2ul-lock-date {
	order: -1;
	margin: 0 0 clamp(6px, 1.4vh, 14px);
	padding-left: 0.32em;
	font-family: var(--lock-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(226, 232, 246, 0.82);
}

.m2ul-simpler[data-lock="horizon"] .m2ul-lock-time {
	font-weight: 500;
	line-height: 0.86;
	letter-spacing: -0.045em;
	color: #EEF3FF;
	text-shadow: none;
}

.m2ul-simpler[data-lock="horizon"][data-side="game"] .m2ul-lock-time {
	color: #FFF6E6;
}

/* The planet in front of the numerals. Only while the live sky is painting
   the planet the mask was measured from: the washes (first paint, a dead
   context, forced colours) draw no such limb, so there the clock is whole. */
html.m2ul-aurora-live:not(.m2ul-aurora-dead) .m2ul-simpler[data-lock="horizon"] .m2ul-lock-time {
	-webkit-mask-image: radial-gradient(circle var(--hz-r, 0px) at var(--hz-x, 0px) var(--hz-y, -1px), transparent calc(var(--hz-r, 0px) - 0.75px), #000 calc(var(--hz-r, 0px) + 0.75px));
	mask-image: radial-gradient(circle var(--hz-r, 0px) at var(--hz-x, 0px) var(--hz-y, -1px), transparent calc(var(--hz-r, 0px) - 0.75px), #000 calc(var(--hz-r, 0px) + 0.75px));
}

/* The time sets: on the way out the clock sinks behind the limb instead of
   lifting away (translate only — the mask is told in the time's own box). */
.m2ul-simpler[data-lock="horizon"][data-phase="open"] .m2ul-lock-clock {
	opacity: 0;
	transform: translateY(calc(var(--lock-time) * 0.34));
	transition: opacity 0.55s ease 0.15s, transform 0.7s cubic-bezier(0.5, 0, 0.75, 0);
}

/* =========================================================================
   The column and the capsule
   ========================================================================= */

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-col,
.m2ul-simpler[data-lock="horizon"]:not([data-view="login"]) .m2ul-sim-col {
	width: min(420px, calc(100vw - 40px));
}

/* The login form is a grid: row 1 the address, row 2 the passphrase with the
   key beside it (passwordless: row 1 the address and the key). Structural
   selectors only — the placement must not hang on :has(). */
.m2ul-simpler[data-lock="horizon"][data-view="login"] .m2ul-sim-view--login {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0;
	align-items: center;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login > * {
	position: relative;
	grid-column: 1 / -1;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login > .m2ul-sim-field:first-of-type {
	grid-row: 1;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login > .m2ul-sim-field + .m2ul-sim-field {
	grid-row: 2;
	grid-column: 1;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login > .m2ul-sim-key {
	grid-row: 2;
	grid-column: 2;
}

.m2ul-simpler[data-lock="horizon"][data-mode="passwordless"] .m2ul-sim-view--login > .m2ul-sim-field:first-of-type {
	grid-column: 1;
}

.m2ul-simpler[data-lock="horizon"][data-mode="passwordless"] .m2ul-sim-view--login > .m2ul-sim-key {
	grid-row: 1;
}

/* The capsule is the form's own ::before, placed across the field rows — a
   grid item painted first. Its backdrop blur makes it a stacking context,
   which paints in the positioned layer, so every other item of the form is
   position: relative (above) to paint over it in source order. The OS
   dock's glass: deep gradient, faint rim, a cyan glint on the top edge. */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login::before {
	content: "";
	/* the glass rises with what it holds, never ahead of it */
	animation: m2ulLockRise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s backwards;
	grid-row: 1 / 3;
	grid-column: 1 / -1;
	align-self: stretch;
	border-radius: 20px;
	border: 1px solid var(--lock-rim);
	background: linear-gradient(180deg, rgba(13, 16, 32, 0.74), rgba(7, 9, 20, 0.62));
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	box-shadow: inset 0 1px 0 rgba(58, 208, 255, 0.13), 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 26px rgba(58, 208, 255, 0.1);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html.m2ul-sky-wait .m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login::before {
	animation-play-state: paused;
}

html.m2ul-sky-wait .m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login::after {
	opacity: 0;
}

.m2ul-simpler[data-lock="horizon"][data-mode="passwordless"] .m2ul-sim-view--login::before {
	grid-row: 1 / 2;
}

.m2ul-simpler[data-lock="horizon"][data-side="game"] .m2ul-sim-view--login::before {
	background: linear-gradient(180deg, rgba(30, 20, 10, 0.8), rgba(18, 12, 6, 0.7));
	box-shadow: inset 0 1px 0 rgba(232, 184, 64, 0.16), 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 26px rgba(232, 184, 64, 0.1);
}

/* The top-edge glint — and, once the key turns, the boot bar running in. */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login::after {
	content: "";
	grid-row: 1;
	grid-column: 1 / -1;
	align-self: start;
	height: 2px;
	margin: -1px 24px 0;
	border-radius: 99px;
	background: linear-gradient(90deg, transparent, var(--lock-ac), transparent);
	opacity: 0.7;
	pointer-events: none;
	clip-path: inset(0 0 0 0);
}

.m2ul-simpler[data-lock="horizon"][data-phase="align"] .m2ul-sim-view--login::after,
.m2ul-simpler[data-lock="horizon"][data-phase="retract"] .m2ul-sim-view--login::after,
.m2ul-simpler[data-lock="horizon"][data-phase="open"] .m2ul-sim-view--login::after {
	background: linear-gradient(90deg, #3AD0FF, #9A5CFF, #FF3DA6);
	box-shadow: 0 0 12px rgba(58, 208, 255, 0.6);
	opacity: 1;
	animation: m2ulHzBoot 1.05s cubic-bezier(0.3, 0.8, 0.4, 1) both;
}

@keyframes m2ulHzBoot {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* Focus and a jam tell on the capsule, not on bare inputs. (:has() is only
   colour here — without it the field's own label still turns.) */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login:has(.m2ul-sim-input:focus)::before {
	border-color: var(--lock-rim-strong);
	border-color: color-mix(in srgb, var(--lock-ac) 50%, transparent);
}

/* (.m2ul-sim-form only lifts it to the focus rule's weight: the script
   focuses the field it names, and the red must win) */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login.m2ul-sim-form:has(.is-err)::before {
	border-color: rgba(255, 122, 107, 0.75);
	box-shadow: 0 0 0 4px rgba(255, 122, 107, 0.12), 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* The fields inside it: label over a bare input, a hairline between them */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login > .m2ul-sim-field {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-height: 64px;
	padding: 9px 20px 8px;
}

.m2ul-simpler[data-lock="horizon"][data-mode="password"] .m2ul-sim-view--login > .m2ul-sim-field:first-of-type::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 0;
	height: 1px;
	background: rgba(168, 204, 255, 0.12);
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-label {
	font-size: 9.5px;
	letter-spacing: 0.18em;
	transition: color 0.2s ease;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-field:focus-within .m2ul-sim-label {
	color: var(--lock-ac);
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-field:has(.is-err) .m2ul-sim-label,
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-field:has(.is-err):focus-within .m2ul-sim-label {
	color: var(--lock-bad-ink);
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-forgot {
	font-size: 12.5px;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-input,
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-input:hover,
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-input:focus,
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-input.is-err,
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .is-err .m2ul-sim-input {
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}

/* Focus is told by the capsule's rim and the field's label, not a ring
   drawn inside the glass */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-input:focus-visible {
	outline: none;
}

/* Autofill paints an opaque inset (Safari's sheet forces it): the capsule's
   own deep tone, so the filled line reads as part of the glass. */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-input:-webkit-autofill,
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-input:-webkit-autofill:hover,
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--lock-glass-solid) inset;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-passwrap .m2ul-sim-input {
	padding-right: 62px;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login .m2ul-sim-showtoggle {
	top: 50%;
	right: -6px;
	height: 32px;
	transform: translateY(-50%);
}

/* The key, seated in the capsule beside the passphrase */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login > .m2ul-sim-key {
	width: auto;
	height: 44px;
	margin: 0 9px 0 6px;
	padding: 0 16px 0 14px;
	gap: 8px;
	font-size: 15px;
	box-shadow: 0 10px 26px -10px rgba(58, 208, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.m2ul-simpler[data-lock="horizon"][data-side="game"] .m2ul-sim-view--login > .m2ul-sim-key {
	box-shadow: 0 10px 26px -10px rgba(232, 184, 64, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Under the capsule: the error line, then the remember row and the usual way */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login > .m2ul-sim-err {
	margin-top: 12px;
	padding: 0 6px;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login > .m2ul-lock-land {
	margin-top: 12px;
	padding: 0 4px;
}

/* =========================================================================
   The worlds dock — the OS dock's glass, on the foot of the stage
   ========================================================================= */

.m2ul-hz-dock {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	pointer-events: none;
	transition: opacity 0.4s ease;
	animation: m2ulLockRise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) 0.36s backwards;
}

.m2ul-hz-dock-h {
	margin: 0;
	padding-left: 0.24em;
	font-family: var(--lock-mono);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(186, 198, 222, 0.78);
}

.m2ul-hz-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	white-space: nowrap;
	border-radius: 20px;
	border: 1px solid rgba(176, 212, 255, 0.09);
	background: linear-gradient(180deg, rgba(14, 18, 34, 0.88), rgba(7, 9, 19, 0.84));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: inset 0 1px 0 rgba(58, 208, 255, 0.13), 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 26px rgba(58, 208, 255, 0.11);
	pointer-events: auto;
}

.m2ul-hz-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(58, 208, 255, 0.53), transparent);
}

.m2ul-simpler[data-lock="horizon"][data-side="game"] .m2ul-hz-bar {
	border-color: rgba(232, 184, 64, 0.12);
	background: linear-gradient(180deg, rgba(30, 20, 10, 0.9), rgba(16, 10, 5, 0.86));
	box-shadow: inset 0 1px 0 rgba(232, 184, 64, 0.16), 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 26px rgba(232, 184, 64, 0.1);
}

.m2ul-simpler[data-lock="horizon"][data-side="game"] .m2ul-hz-bar::before {
	background: linear-gradient(90deg, transparent, rgba(232, 184, 64, 0.55), transparent);
}

.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-sim-tabs {
	display: flex;
	gap: 6px;
}

/* A door: the world's glyph, its name and tag, and a running-dot when armed.
   7.0's sheet rows (grid, the check mark) are re-laid as dock items. */
.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-sim-tab {
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	height: 52px;
	padding: 0 16px 0 10px;
	border: 1px solid transparent;
	border-radius: 13px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-sim-tab:hover {
	background: rgba(255, 255, 255, 0.05);
}

.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-sim-tab[aria-pressed="true"] {
	border-color: var(--lock-rim-strong);
	border-color: color-mix(in srgb, var(--lock-ac) 40%, transparent);
	background: rgba(255, 255, 255, 0.06);
	background: color-mix(in srgb, var(--lock-ac) 10%, transparent);
}

.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-sim-tab::after {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	margin-left: 2px;
	border-radius: 50%;
	background: var(--lock-ac);
	box-shadow: 0 0 7px var(--lock-ac);
	opacity: 0;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-sim-tab[aria-pressed="true"]::after {
	opacity: 1;
}

/* A classic pick decides the landing: the armed door gives up its mark, as
   the 7.0 sheet's check did (the world still arms the room). */
.m2ul-simpler[data-lock="horizon"]:has(.m2ul-sim-dest.is-on) .m2ul-hz-dock .m2ul-sim-tab[aria-pressed="true"],
.m2ul-simpler[data-lock="horizon"]:has(.m2ul-sim-dest input:checked) .m2ul-hz-dock .m2ul-sim-tab[aria-pressed="true"] {
	border-color: transparent;
	background: transparent;
}

.m2ul-simpler[data-lock="horizon"]:has(.m2ul-sim-dest.is-on) .m2ul-hz-dock .m2ul-sim-tab::after,
.m2ul-simpler[data-lock="horizon"]:has(.m2ul-sim-dest input:checked) .m2ul-hz-dock .m2ul-sim-tab::after {
	opacity: 0;
}

.m2ul-hz-door-ic {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	border: 1px solid rgba(58, 208, 255, 0.35);
	background: #071421;
	color: #7FE3FF;
}

.m2ul-sim-tab--game .m2ul-hz-door-ic {
	border-color: rgba(232, 184, 64, 0.35);
	background: #1A1206;
	color: #E8B840;
}

.m2ul-hz-door-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-lock-door-desc,
.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-lock-door-hold {
	font-size: 12px;
}

/* =========================================================================
   The usual way, inline — after the doors, in the same glass
   ========================================================================= */

/* The <details> stays a plain block. Open, the summary leaves the flow at
   its own spot (absolute, no offsets) and the radios step past it, so the row
   is one line and the glass measures it whole, even where the engine wraps
   the content in a block of its own (::details-content). */
.m2ul-hz-sep {
	flex: none;
	align-self: stretch;
	width: 1px;
	margin: 8px 3px;
	background: linear-gradient(180deg, transparent, rgba(168, 204, 255, 0.16) 30%, rgba(168, 204, 255, 0.16) 70%, transparent);
}

.m2ul-hz-bar .m2ul-sim-usual {
	display: flex;
	gap: 8px;
	height: 52px;
	margin: 0;
	padding: 0 12px 0 14px;
	border: 1px solid transparent;
	border-radius: 13px;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: rgba(214, 226, 246, 0.86);
	font-size: 14px;
	pointer-events: auto;
}

.m2ul-hz-bar .m2ul-sim-usual:hover {
	border-color: transparent;
	background: rgba(255, 255, 255, 0.05);
}

.m2ul-hz-bar .m2ul-sim-usual:focus-visible {
	outline: 2px solid var(--lock-ac);
	outline-offset: -2px;
}

.m2ul-hz-bar .m2ul-lock-land-chev {
	width: 14px;
	height: 14px;
}

/* Open, the summary is only the way back: a chevron pointing home. The label
   stays its accessible name. */
.m2ul-hz-bar .m2ul-sim-classic[open] .m2ul-sim-usual {
	position: absolute;
	justify-content: center;
	width: 44px;
	padding: 0;
	border-color: transparent;
	background: rgba(255, 255, 255, 0.05);
}

.m2ul-hz-bar .m2ul-sim-classic[open] .m2ul-hz-usual-label,
.m2ul-hz-bar .m2ul-sim-dest-hint {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.m2ul-hz-bar .m2ul-sim-classic[open] .m2ul-lock-land-chev {
	margin: 0;
}

.m2ul-hz-bar .m2ul-sim-dests {
	display: inline-flex;
	vertical-align: middle;
	gap: 6px;
	margin-left: 50px;
	animation: m2ulLockRise 0.25s ease backwards;
}

.m2ul-hz-bar .m2ul-sim-dest {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: 52px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 13px;
	pointer-events: auto;
}

.m2ul-hz-bar .m2ul-sim-dest-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.m2ul-hz-bar .m2ul-sim-dest-desc {
	font-size: 12px;
}

.m2ul-hz-bar .m2ul-sim-dest.is-on,
.m2ul-hz-bar .m2ul-sim-dest:has(input:checked) {
	border-color: var(--lock-rim-strong);
	border-color: color-mix(in srgb, var(--lock-ac) 40%, transparent);
	background: rgba(255, 255, 255, 0.06);
	background: color-mix(in srgb, var(--lock-ac) 10%, transparent);
}

/* The check takes room only on the pick */
.m2ul-hz-bar .m2ul-sim-dest::after {
	display: none;
}

.m2ul-hz-bar .m2ul-sim-dest.is-on::after,
.m2ul-hz-bar .m2ul-sim-dest:has(input:checked)::after {
	display: block;
}

/* The open row runs under the notification's corner: it yields, as the foot does */
.m2ul-simpler[data-lock="horizon"][data-lock-dock="inline"][data-classic="on"] .m2ul-sim-facts {
	opacity: 0;
	pointer-events: none;
}

/* Between the port and a wide desk the open row sheds its descriptors */
@media (max-width: 1199px) {
	.m2ul-hz-bar .m2ul-sim-dest-desc {
		display: none;
	}
}

/* The usual-way summary carries no landing name on this layer */
.m2ul-simpler[data-lock="horizon"] .m2ul-sim-usual {
	gap: 8px;
}

/* The dock belongs to the login view, and leaves with the column */
.m2ul-simpler[data-lock="horizon"]:not([data-view="login"]) .m2ul-hz-dock {
	display: none;
}

.m2ul-simpler[data-lock="horizon"][data-phase="open"] .m2ul-hz-dock {
	opacity: 0;
}

.m2ul-simpler[data-lock="horizon"][data-phase="open"] .m2ul-hz-bar {
	pointer-events: none;
}

/* =========================================================================
   The guild village — move 6: two worlds are two places
   ========================================================================= */

/* Between the program and the veil. The lock script stands the board's y=452
   (two thirds down the 145-unit band) on the limb and sets the opacity from
   the program's own side; with no live program there is no limb, so no
   village (the dusk wash stands alone, as in 7.0). */
.m2ul-hz-village {
	position: absolute;
	left: 0;
	top: var(--hz-limb, 62%);
	z-index: 1;
	display: none;
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 145;
	opacity: 0;
	transform: translateY(-66.9%);
	pointer-events: none;
}

html.m2ul-aurora-live:not(.m2ul-aurora-dead) .m2ul-simpler[data-lock="horizon"] .m2ul-hz-village {
	display: block;
}

/* The village lives on: the lanterns breathe, slowly and out of step with
   the windows */
.m2ul-hz-v-lanterns {
	animation: m2ulHzLantern 5.2s ease-in-out infinite alternate;
}

.m2ul-hz-v-pennant {
	transform-box: fill-box;
	transform-origin: 0 50%;
	animation: m2ulHzPennant 3.6s ease-in-out infinite alternate;
}

@keyframes m2ulHzLantern {
	from { opacity: 0.8; }
	to { opacity: 0.5; }
}

@keyframes m2ulHzPennant {
	from { transform: scaleX(1); }
	to { transform: scaleX(0.82) skewY(4deg); }
}

/* The port withholds M2 WORLD; a tablet keeps the village, the phone does not */
@media (max-width: 719px) {
	.m2ul-hz-village,
	html.m2ul-aurora-live:not(.m2ul-aurora-dead) .m2ul-simpler[data-lock="horizon"] .m2ul-hz-village {
		display: none;
	}
}

/* =========================================================================
   The foot and the notification, out of the dock's way
   ========================================================================= */

.m2ul-simpler[data-lock="horizon"] .m2ul-sim-foot {
	left: auto;
	right: 24px;
	bottom: 30px;
	width: min(260px, calc(50vw - 276px));
	padding: 0;
	text-align: right;
}

@media (max-width: 1239px) {
	.m2ul-simpler[data-lock="horizon"] .m2ul-sim-facts {
		display: none;
	}
}

/* =========================================================================
   The port
   ========================================================================= */

@media (max-width: 979px) {
	.m2ul-simpler[data-lock="horizon"] {
		--lock-time: clamp(64px, min(15svh, 27vw), 128px);
		--lock-gap-clock: clamp(14px, 5svh, 48px);
		--lock-gap-col: clamp(10px, 2.4svh, 22px);
		--lock-clock-h: calc(var(--lock-time) * 0.86 + 30px);
		--lock-foot-h: 148px;
	}

	.m2ul-simpler[data-lock="horizon"]:not([data-view="login"]) {
		--lock-time: clamp(44px, 8svh, 64px);
		--lock-gap-clock: clamp(10px, 2.6svh, 22px);
		--lock-gap-col: clamp(10px, 2.4svh, 20px);
		--lock-foot-h: 72px;
	}

	.m2ul-simpler[data-lock="horizon"][data-classic="on"] {
		--lock-time: clamp(44px, 9svh, 72px);
		--lock-gap-clock: clamp(8px, 2svh, 16px);
		--lock-gap-col: clamp(10px, 2.4svh, 20px);
		--lock-foot-h: 120px;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-lock-date {
		font-size: 11px;
		letter-spacing: 0.3em;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-sim-col,
	.m2ul-simpler[data-lock="horizon"]:not([data-view="login"]) .m2ul-sim-col {
		width: calc(100vw - 40px);
		max-width: 420px;
	}

	/* No backdrop blur in the port (7.0's rule): the capsule goes opaque-ish */
	.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login::before,
	.m2ul-hz-bar {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login::before {
		background: linear-gradient(180deg, rgba(13, 16, 32, 0.92), rgba(7, 9, 20, 0.86));
	}

	.m2ul-simpler[data-lock="horizon"][data-side="game"] .m2ul-sim-view--login::before {
		background: linear-gradient(180deg, rgba(30, 20, 10, 0.94), rgba(18, 12, 6, 0.9));
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login > .m2ul-sim-key {
		margin-left: 2px;
		padding: 0 13px 0 12px;
	}

	.m2ul-hz-dock {
		bottom: calc(46px + env(safe-area-inset-bottom));
	}

	.m2ul-hz-bar {
		width: min(calc(100vw - 40px), 420px);
		box-sizing: border-box;
		gap: 4px;
		padding: 7px;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-sim-tabs {
		flex: 1 1 0;
		min-width: 0;
		gap: 4px;
	}

	/* The port: the usual way is a 44px key at the row's end, and opens as a
	   sheet in the same glass, above the doors. */
	.m2ul-hz-bar .m2ul-sim-usual,
	.m2ul-hz-bar .m2ul-sim-classic[open] .m2ul-sim-usual {
		position: static;
		justify-content: center;
		width: 44px;
		height: 56px;
		padding: 0;
	}

	.m2ul-hz-bar .m2ul-hz-usual-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.m2ul-hz-bar .m2ul-lock-land-chev {
		margin: 0;
		transform: rotate(-90deg);
	}

	.m2ul-hz-bar .m2ul-sim-classic[open] .m2ul-lock-land-chev {
		transform: rotate(90deg);
	}

	.m2ul-hz-bar .m2ul-sim-dests {
		position: absolute;
		left: -1px;
		right: -1px;
		bottom: calc(100% + 8px);
		display: grid;
		gap: 2px;
		margin: 0;
		padding: 7px;
		border-radius: 20px;
		border: 1px solid rgba(176, 212, 255, 0.12);
		background: linear-gradient(180deg, rgba(14, 18, 34, 0.96), rgba(7, 9, 19, 0.94));
		box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
		white-space: normal;
	}

	.m2ul-simpler[data-side="game"] .m2ul-hz-bar .m2ul-sim-dests {
		background: linear-gradient(180deg, rgba(30, 20, 10, 0.96), rgba(16, 10, 5, 0.94));
	}

	.m2ul-hz-bar .m2ul-sim-dest {
		justify-content: space-between;
		height: 50px;
		padding: 0 12px;
	}

	.m2ul-hz-bar .m2ul-sim-dest-desc {
		display: block;
	}

	/* The sheet rises out of the dock, so the column lifts clear of it */
	.m2ul-simpler[data-lock="horizon"][data-lock-dock="inline"][data-classic="on"] {
		--lock-time: clamp(44px, 9svh, 72px);
		--lock-gap-clock: clamp(8px, 2svh, 16px);
		--lock-gap-col: clamp(10px, 2.4svh, 20px);
		--lock-foot-h: 340px;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-sim-tab {
		flex: 1 1 0;
		min-width: 0;
		gap: 9px;
		padding: 0 8px 0 7px;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-sim-tab::after {
		margin-left: auto;
	}

	.m2ul-hz-door-ic {
		width: 28px;
		height: 28px;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-lock-door-name {
		font-size: 13.5px;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-lock-door-desc,
	.m2ul-simpler[data-lock="horizon"] .m2ul-hz-dock .m2ul-lock-door-hold {
		font-size: 11.5px;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-sim-foot {
		left: 0;
		right: 0;
		bottom: calc(16px + env(safe-area-inset-bottom));
		width: auto;
		padding: 0 20px;
		text-align: center;
	}
}

/* THE ONE-VIEWPORT LAW, RELEASED (7.0's rule): the column fills the stage
   uncapped and the page scrolls — so the dock joins the flow after it rather
   than sitting on whatever reaches the foot. */
@media (max-height: 700px) {
	.m2ul-hz-dock {
		position: relative;
		bottom: auto;
		padding: 8px 0 24px;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-sim-foot,
	.m2ul-simpler[data-lock="horizon"]:not([data-view="login"]) .m2ul-sim-foot {
		position: static;
		width: auto;
		padding: 24px 0 12px;
		text-align: center;
	}
}

/* =========================================================================
   Access
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.m2ul-hz-v-lanterns,
	.m2ul-hz-v-pennant,
	.m2ul-hz-dock,
	.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login::after {
		animation: none !important;
	}
}

@media (forced-colors: active) {
	html.m2ul-aurora-live:not(.m2ul-aurora-dead) .m2ul-simpler[data-lock="horizon"] .m2ul-lock-time {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-sim-view--login::before,
	.m2ul-hz-bar {
		border: 1px solid CanvasText;
	}

	.m2ul-simpler[data-lock="horizon"] .m2ul-lock-clock {
		filter: none;
	}
}

@media print {
	.m2ul-hz-village,
	.m2ul-hz-dock {
		display: none;
	}
}