/**
 * The plugin styles.
 *
 * A users plugin lands on any site, with any theme, and what it draws —
 * forms, panels, lists, buttons — has to read the same everywhere. That is
 * why there are real components here and not four loose rules.
 *
 * The only way for them ALSO not to clash is for the site to be able to
 * change them without rewriting them. Hence the system:
 *
 *   1. Everything visual comes from `--diluxone-users-*` custom properties,
 *      declared exactly once, below.
 *   2. The components never write a literal colour or radius: they use those
 *      properties.
 *   3. A site with a design of its own copies neither this sheet nor turns it
 *      off: it redefines the properties, pointing them at its own tokens, and
 *      everything falls into place.
 *
 * Measurements inherit from the theme where it makes sense — typeface and
 * font size — so the block does not look pasted in from somewhere else.
 */

:root {
	--diluxone-users-font: inherit;
	--diluxone-users-radius: 12px;
	--diluxone-users-radius-sm: 8px;
	--diluxone-users-control-h: 46px;
	--diluxone-users-border-w: 1px;
	--diluxone-users-gap: 16px;

	--diluxone-users-surface: #ffffff;
	--diluxone-users-surface-alt: #f5f6f8;
	--diluxone-users-border: #e2e5ec;
	--diluxone-users-text: #16181d;
	--diluxone-users-muted: #626a7a;

/* The accent is split in two because they are two different jobs: a link
	   colour has to read ON TOP OF the background, and a button colour has to
	   read UNDERNEATH its own text. In dark mode a site usually lightens the
	   first and leaves the second alone; with a single token, the button ended
	   up pale lavender with white letters. */
	--diluxone-users-accent: #2b59d6;
	--diluxone-users-accent-bg: var(--diluxone-users-accent);
	--diluxone-users-accent-ink: #ffffff;
	/* The accent with the volume down: the ground behind a washed badge, the
	   circle around the envelope, the row of the session you are on. It is
	   derived and not a fourth colour to keep in step — a site that changes
	   the accent gets this one changed with it. */
	--diluxone-users-accent-soft: color-mix(in srgb, var(--diluxone-users-accent) 12%, transparent);
	--diluxone-users-ok: #0f7b4f;
	--diluxone-users-danger: #b3261e;
}

/* ── The measurements a site changes ─────────────────────────────────────
 *
 * Colours were tokens from the first day; measurements were not, and every
 * site that wanted its own spacing had to write a selector for it. That is
 * what broke the account menu: ConoSurTech wrote
 *
 *     .diluxone-users-account--cover .diluxone-users-account__nav { gap: 36px }
 *
 * meaning "the tab bar under the cover", because at the time a cover implied
 * a row of tabs. When the menu learnt to go down the side, the rule was still
 * true to the letter and no longer true to the intention: 36px of gap and
 * 20px of padding, stacked, is a hundred pixels between items.
 *
 * A value applies in every state. A selector makes a claim about which states
 * exist, and that claim expires the next time the plugin grows one. So:
 * everything a site is likely to want is a property it can set, and it can be
 * set anywhere above the area — on `:root`, on the page, on the block.
 *
 * None of them are declared here on purpose. Each one is read where it is
 * used with the default for that place — `var(--diluxone-users-nav-gap, 4px)`
 * beside the tabs and `var(--diluxone-users-nav-gap, 2px)` down the side — so
 * the plugin's own defaults can differ per shape while a site that sets the
 * property once wins in all of them. Declaring them here would shadow that.
 *
 *   --diluxone-users-body-end    Under the content, on a cover.        64px
 *   --diluxone-users-read        The reading column, when the content is
 *                                held to one.                          980px
 *
 * The width and the gutter of the area's rows are NOT here. They are asked
 * from Design → Account area, and the rule that applies them is printed only
 * when they have an answer — see diluxone_users_account_css(). A rule here
 * with a neutral default would beat a site that had already lined those rows
 * up with its own grid, because this sheet loads after the site's and
 * `padding-inline: 0` is a value like any other.
 *   --diluxone-users-bleed       How far the cover breaks out of the theme's
 *                                column. Set it to 0 on a site that is
 *                                already full width.       calc(50% - 50vw)
 *   --diluxone-users-cover-pad   The air inside the cover band.         40px
 *   --diluxone-users-header-gap  Between the picture and the name.  18 / 24px
 *   --diluxone-users-avatar      The picture.                       64 / 96px
 *   --diluxone-users-bar-bg      Behind the menu's strip.        transparent
 *   --diluxone-users-bar-rule    Its rule, whole: `1px solid #ddd`.    none
 *   --diluxone-users-bar-gap     Under the strip.                       28px
 *   --diluxone-users-nav-gap     Between menu items.            2 / 4 / 20px
 *   --diluxone-users-tab-pad     Inside one.                    by the shape
 *   --diluxone-users-side-w      The side menu's column.     180px … 220px
 */

/* There is no dark-mode block here, and that is on purpose.
 *
 * There was one, following `prefers-color-scheme`, and it was a mistake: dark
 * mode belongs to the SITE, not to the plugin. A light site viewed from a
 * system in dark mode ended up with a light page and the plugin panels in
 * black, with unreadable text on top. And since that block had more
 * specificity than the properties above, it could not even be overridden by
 * repointing them.
 *
 * A site with a dark mode already knows when it is in the dark — through its
 * own class, its own switch or its own media query — and its tokens change
 * there. With the properties pointed at those tokens, this changes with it
 * and never on its own.
 */

.diluxone-users,
.diluxone-users-account {
	font-family: var(--diluxone-users-font);
	color: var(--diluxone-users-text);
}

.diluxone-users *,
.diluxone-users-login-page,
.diluxone-users-login-page *,
.diluxone-users-account * { box-sizing: border-box; }

/* ── Superficies ────────────────────────────────────────────────────── */

.diluxone-users-panel {
	padding: 22px 24px;
	margin: 0 0 var(--diluxone-users-gap);
	background: var(--diluxone-users-surface);
	border: 1px solid var(--diluxone-users-border);
	border-radius: var(--diluxone-users-radius);
}
.diluxone-users-panel > :first-child { margin-top: 0; }
.diluxone-users-panel > :last-child { margin-bottom: 0; }

/* One single size for a box heading, whether it comes from a hand-written h3
   or from the <summary> of one that opens and closes. Having them differ is
   what made two boxes side by side look like two different pages. */
.diluxone-users-panel h3,
.diluxone-users-panel__title {
	margin: 0;
	font-size: 1.32em;
	font-weight: 700;
	line-height: 1.25;
}
.diluxone-users-panel h3 { margin-bottom: 10px; }

/* ── Boxes that open and close ──────────────────────────────────────── */

details.diluxone-users-panel { padding: 0; }
.diluxone-users-panel__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px 20px 26px;
	cursor: pointer;
	list-style: none;
}
/* The little triangle browsers add on their own: it is removed in both
   dialects, because each one uses its own and both have to be turned off. */
.diluxone-users-panel__head::-webkit-details-marker { display: none; }
.diluxone-users-panel__head::marker { content: ''; }

.diluxone-users-panel__title { flex: 1 1 auto; min-width: 0; }

/* The open-and-close control is a button: round, the size of a finger and on
   the right. A nine-pixel arrow can be neither seen nor tapped. */
.diluxone-users-panel__arrow {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--diluxone-users-surface-alt);
	transition: transform .18s ease, background-color .18s ease;
}
/* The tip: two borders turned 45°, the only thing that comes out crisp on
   any screen and at any zoom. */
.diluxone-users-panel__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 11px;
	border-right: 2.5px solid var(--diluxone-users-text);
	border-bottom: 2.5px solid var(--diluxone-users-text);
	transform: translate(-50%, -70%) rotate(45deg);
}
details.diluxone-users-panel[open] > .diluxone-users-panel__head .diluxone-users-panel__arrow { transform: rotate(180deg); }
.diluxone-users-panel__head:hover .diluxone-users-panel__arrow { background-color: color-mix( in srgb, var(--diluxone-users-accent) 16%, var(--diluxone-users-surface-alt) ); }
.diluxone-users-panel__head:focus-visible { outline: 2px solid var(--diluxone-users-accent); outline-offset: -3px; border-radius: var(--diluxone-users-radius); }

/* A panel's body is a column, so a site putting a form of its own inside one
   sets the air between its rows with a value instead of a selector on this
   class. `normal` is the flow's own spacing, which is what it did before. */
.diluxone-users-panel__body {
	display: flex;
	flex-direction: column;
	gap: var(--diluxone-users-panel-gap, normal);
	padding: 4px 26px 24px;
}
.diluxone-users-panel__body > :first-child { margin-top: 0; }
.diluxone-users-panel__body > :last-child { margin-bottom: 0; }

/* Each box's save button. They are inside the same form, so any of them
   submits the whole page: there is no need to pick one. */
.diluxone-users-panel__save { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--diluxone-users-border); }

/* A panel containing a list with a frame of its own: the inner one is
   surplus, and two frames touching look like a mistake. */
.diluxone-users-panel__body .diluxone-users-linked,
.diluxone-users-panel__body .diluxone-users-sessions__list,
.diluxone-users-panel--list .diluxone-users-linked,
.diluxone-users-panel--list .diluxone-users-sessions__list {
	border: 0;
	border-radius: 0;
	margin-bottom: 0;
	background: transparent;
}
.diluxone-users-panel__body .diluxone-users-linked__item:first-child,
.diluxone-users-panel__body .diluxone-users-session:first-child,
.diluxone-users-panel--list .diluxone-users-linked__item:first-child,
.diluxone-users-panel--list .diluxone-users-session:first-child { border-top: 1px solid var(--diluxone-users-border); }
.diluxone-users-panel__body .diluxone-users-linked__item,
.diluxone-users-panel__body .diluxone-users-session,
.diluxone-users-panel--list .diluxone-users-linked__item,
.diluxone-users-panel--list .diluxone-users-session { padding-inline: 0; }
.diluxone-users-panel--list .diluxone-users-sessions__all { margin-top: 16px; }

.diluxone-users-note,
.diluxone-users-note-block { margin: 8px 0 0; font-size: 0.9em; color: var(--diluxone-users-muted); }

.diluxone-users-data { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; }
.diluxone-users-data dt { color: var(--diluxone-users-muted); }
.diluxone-users-data dd { margin: 0; }

/* ── Avisos ─────────────────────────────────────────────────────────── */

/* Two shapes, and the difference between them is four values rather than a
   second block of rules: the bar down the left is a border width, the soft
   box is that width at zero and a tint behind it. `--notice-tint` is what
   each kind of notice sets — the ok one green, the error one red — so the
   soft shape is that colour washed and never a fifth colour to keep in step. */
.diluxone-users-notice {
	--diluxone-users-notice-tint: color-mix(in srgb, var(--diluxone-users-notice-key, var(--diluxone-users-border)) 12%, transparent);
	margin: 0 0 var(--diluxone-users-gap);
	padding: var(--diluxone-users-notice-pad, 12px 16px);
	border-left: var(--diluxone-users-notice-edge, 3px) solid var(--diluxone-users-notice-key, var(--diluxone-users-border));
	border-radius: var(--diluxone-users-notice-radius, var(--diluxone-users-radius-sm));
	background: var(--diluxone-users-notice-bg, var(--diluxone-users-surface-alt));
	font-size: 0.95em;
}
.diluxone-users-notice--ok { --diluxone-users-notice-key: var(--diluxone-users-ok); }
.diluxone-users-notice--error { --diluxone-users-notice-key: var(--diluxone-users-danger); }
.diluxone-users-notice--info { --diluxone-users-notice-key: var(--diluxone-users-accent); }

/* ── Formularios ────────────────────────────────────────────────────── */

.diluxone-users-form { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* The reading width is for the controls. Help texts and notes run the width
   of the panel like any other paragraph: capped to the controls they broke
   into short lines next to a full-width introduction. */
.diluxone-users-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.diluxone-users-form select,
.diluxone-users-form textarea { max-width: 34rem; }
.diluxone-users-form label { font-weight: 600; }
/* A button inside a column form stretches to the full width and looks like a
   banner. It takes the room it says, and starts on the left. */
.diluxone-users-form > .diluxone-users-button,
.diluxone-users-form > button { align-self: flex-start; margin-top: 6px; }

.diluxone-users-form input[type="text"],
.diluxone-users-form input[type="email"],
.diluxone-users-form input[type="tel"],
.diluxone-users-form input[type="url"],
.diluxone-users-form input[type="number"],
.diluxone-users-form input[type="date"],
.diluxone-users-form select,
.diluxone-users-form textarea,
.diluxone-users-field input[type="text"],
.diluxone-users-field input[type="email"],
.diluxone-users-field input[type="tel"],
.diluxone-users-field input[type="url"],
.diluxone-users-field input[type="number"],
.diluxone-users-field input[type="date"],
.diluxone-users-field select,
.diluxone-users-field textarea {
	width: 100%;
	min-height: var(--diluxone-users-control-h);
	padding: 0 14px;
	border: var(--diluxone-users-border-w) solid var(--diluxone-users-border);
	border-radius: var(--diluxone-users-radius-sm);
	background: var(--diluxone-users-surface);
	color: var(--diluxone-users-text);
	font: inherit;
}
.diluxone-users-form textarea,
.diluxone-users-field textarea { padding: 12px 14px; min-height: 8em; }

.diluxone-users-form input:focus,
.diluxone-users-form select:focus,
.diluxone-users-form textarea:focus,
.diluxone-users-field input:focus,
.diluxone-users-field select:focus,
.diluxone-users-field textarea:focus {
	outline: 2px solid var(--diluxone-users-accent);
	outline-offset: 1px;
	border-color: var(--diluxone-users-accent);
}

.diluxone-users-form input:disabled,
.diluxone-users-field input:disabled { background: var(--diluxone-users-surface-alt); color: var(--diluxone-users-muted); }

.diluxone-users-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.diluxone-users-field__help { margin: 0; font-size: 0.85em; color: var(--diluxone-users-muted); }
.diluxone-users-field__required { color: var(--diluxone-users-danger); }

/* The phone is two controls that are one: the dialling code and the number. */
.diluxone-users-phone { display: grid; grid-template-columns: var(--diluxone-users-dial-w, minmax(0, 9rem)) minmax(0, 1fr); gap: 8px; }

.diluxone-users-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; }
.diluxone-users-check input { margin-top: 4px; }
.diluxone-users-check small { display: block; color: var(--diluxone-users-muted); }

/* ── Botones ────────────────────────────────────────────────────────── */

.diluxone-users-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--diluxone-users-control-h);
	padding: 0 22px;
	border: var(--diluxone-users-border-w) solid var(--diluxone-users-btn-edge, transparent);
	border-radius: var(--diluxone-users-radius-sm);
	background: var(--diluxone-users-btn-bg, var(--diluxone-users-accent-bg));
	color: var(--diluxone-users-btn-ink, var(--diluxone-users-accent-ink));
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease;
}
.diluxone-users-button:hover { filter: brightness(0.93); color: var(--diluxone-users-btn-ink, var(--diluxone-users-accent-ink)); }

.diluxone-users-button--soft {
	background: transparent;
	border-color: var(--diluxone-users-border);
	color: var(--diluxone-users-text);
}
.diluxone-users-button--soft:hover { background: var(--diluxone-users-surface-alt); color: var(--diluxone-users-text); filter: none; }

/* Used by the passkey button and by the way out of "check your email", and
   until now it was a class on the markup with no rule behind it. */
.diluxone-users-button--wide { display: flex; width: 100%; }

.diluxone-users-button--danger { background: var(--diluxone-users-danger); color: #fff; }
.diluxone-users-button--danger:hover { color: #fff; }

.diluxone-users-chip {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--diluxone-users-surface-alt);
	color: var(--diluxone-users-muted);
	font-size: 0.85em;
	font-weight: 600;
}

/* ── Tablas ─────────────────────────────────────────────────────────── */

.diluxone-users-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--diluxone-users-gap); }
.diluxone-users-table th,
.diluxone-users-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--diluxone-users-border); }
.diluxone-users-table th { font-size: 0.85em; text-transform: uppercase; letter-spacing: .05em; color: var(--diluxone-users-muted); }

/* ── Row lists (sessions, linked networks) ──────────────────────────── */

.diluxone-users-linked,
.diluxone-users-sessions__list {
	list-style: none;
	margin: 0 0 var(--diluxone-users-gap);
	padding: 0;
	border: 1px solid var(--diluxone-users-border);
	border-radius: var(--diluxone-users-radius);
	overflow: hidden;
	background: var(--diluxone-users-surface);
}

.diluxone-users-linked__item,
.diluxone-users-session {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	margin: 0;
	border-top: 1px solid var(--diluxone-users-border);
}
.diluxone-users-linked__item:first-child,
.diluxone-users-session:first-child { border-top: 0; }

.diluxone-users-linked__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: var(--diluxone-users-surface-alt);
	color: var(--diluxone-users-brand, var(--diluxone-users-text));
}
.diluxone-users-linked__item.is-linked .diluxone-users-linked__logo { background: var(--diluxone-users-brand, var(--diluxone-users-accent-bg)); color: #fff; }
.diluxone-users-linked__item.has-color .diluxone-users-linked__logo { background: #fff; box-shadow: inset 0 0 0 1px var(--diluxone-users-border); }

.diluxone-users-linked__who,
.diluxone-users-session__what { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.diluxone-users-linked__who span,
.diluxone-users-session__what span { font-size: 0.9em; color: var(--diluxone-users-muted); }

.diluxone-users-linked__item form,
.diluxone-users-session__action { margin: 0; flex: 0 0 auto; }
.diluxone-users-linked__item .diluxone-users-button,
.diluxone-users-session__action .diluxone-users-button { min-height: 38px; padding: 0 16px; font-size: 0.9em; }

.diluxone-users-session--current { background: var(--diluxone-users-accent-soft); }
.diluxone-users-sessions__all { margin: 0; }

/* These lists fit the width of a page as readily as that of a column down
   the side, so what rules is not the screen size but the container's: with
   the menu at the side the screen is wide and the box measures 320px, and a
   media query knows nothing about it. */
.diluxone-users-linked,
.diluxone-users-sessions__list { container-type: inline-size; }

@container (max-width: 420px) {
	.diluxone-users-linked__item,
	.diluxone-users-session { flex-wrap: wrap; }
	.diluxone-users-linked__who,
	.diluxone-users-session__what { flex: 1 1 100%; order: 2; }
	.diluxone-users-linked__item form,
	.diluxone-users-session__action { order: 3; }
}

/* And the fallback for a browser that does not know about containers yet. */
@media (max-width: 560px) {
	.diluxone-users-linked__item,
	.diluxone-users-session { flex-wrap: wrap; }
	.diluxone-users-linked__who,
	.diluxone-users-session__what { flex: 1 1 100%; order: 2; }
}

/* ── Las passkeys ───────────────────────────────────────────────────── */

/* Each key is a box that opens, the same as the screen panels: closed you
   read the name, open you change it or remove the key. A text field always
   open on every row looks like a half-filled form. */
.diluxone-users-keys {
	list-style: none;
	margin: 0 0 var(--diluxone-users-gap);
	padding: 0;
	border: 1px solid var(--diluxone-users-border);
	border-radius: var(--diluxone-users-radius);
	overflow: hidden;
	background: var(--diluxone-users-surface);
}
.diluxone-users-keys > li + li { border-top: 1px solid var(--diluxone-users-border); }

.diluxone-users-key__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
}
.diluxone-users-key__row::-webkit-details-marker { display: none; }
.diluxone-users-key__row::marker { content: ''; }
.diluxone-users-key__row:focus-visible { outline: 2px solid var(--diluxone-users-accent); outline-offset: -3px; }

.diluxone-users-key__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: var(--diluxone-users-accent-bg);
	color: var(--diluxone-users-accent-ink);
}
.diluxone-users-key__who { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.diluxone-users-key__who > span { font-size: 0.9em; color: var(--diluxone-users-muted); }

/* The same tip as the panels, in miniature: it is the same gesture. */
.diluxone-users-key__arrow {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--diluxone-users-surface-alt);
	transition: transform .18s ease, background-color .18s ease;
}
.diluxone-users-key__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--diluxone-users-text);
	border-bottom: 2px solid var(--diluxone-users-text);
	transform: translate(-50%, -70%) rotate(45deg);
}
details.diluxone-users-key[open] > .diluxone-users-key__row .diluxone-users-key__arrow { transform: rotate(180deg); }
.diluxone-users-key__row:hover .diluxone-users-key__arrow { background-color: color-mix( in srgb, var(--diluxone-users-accent) 16%, var(--diluxone-users-surface-alt) ); }

.diluxone-users-key__edit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 4px 16px 18px 68px;
}
.diluxone-users-key__edit label { font-weight: 600; font-size: 0.9em; }
.diluxone-users-key__edit input[type="text"] { width: 100%; max-width: 22rem; }
.diluxone-users-key__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.diluxone-users-key__actions .diluxone-users-button { min-height: 38px; padding: 0 16px; font-size: 0.9em; }

.diluxone-users-key-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0; }
.diluxone-users-key-add .diluxone-users-key__field { display: flex; flex-direction: column; gap: 6px; flex: 0 1 22rem; min-width: 0; }
.diluxone-users-key-add label { font-weight: 600; }

@media (max-width: 640px) {
	.diluxone-users-key__edit { padding-left: 16px; }
}

/* ── The shape of the sign-in page ──────────────────────────────────
   Three of the four take over the page. They break out of the theme's column
   with the same full-bleed margin the account cover uses — a sign-in screen
   that stops halfway across the window reads as broken rather than as a
   choice. 'plain' has no rules at all: the form stays where the theme put it,
   which is the whole point of that answer. */
/* Breaking out of the theme's column.
   The frame is a grandchild on purpose (see diluxone_users_login_frame_open):
   a block theme constrains its direct children with !important on both the
   margin and the max-width, so nothing declared on a child can get out. One
   level down, the ordinary full-bleed margin works — the same way the account
   cover does it. */
.diluxone-users-login-frame--card,
.diluxone-users-login-frame--split,
.diluxone-users-login-frame--backdrop {
	/* The same property the account cover breaks out with, and the same
	   reason it is one number: a site that is already full width sets
	   `--diluxone-users-bleed: 0px` once and every full-bleed piece the
	   plugin has stops breaking out together. Two of them to keep in step
	   would be one to forget. */
	margin-inline: var(--diluxone-users-bleed, calc(50% - 50vw));
	padding: 48px max(20px, calc(-1 * var(--diluxone-users-bleed, calc(50% - 50vw))));
}
.diluxone-users-login-frame__box {
	background: var(--diluxone-users-surface);
	border: 1px solid var(--diluxone-users-border);
	border-radius: var(--diluxone-users-radius);
	padding: 36px;
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
}

/* The heading inside a frame that took over the page is the plugin's, and in
   'plain' it is the theme's — which is the difference between the two
   answers. A designed screen with the theme's h2 on it reads as a form that
   landed in a blog post; a form the theme placed itself should look like the
   rest of the site's headings and does. */
.diluxone-users-login-frame__box .diluxone-users-login__title {
	font-family: var(--diluxone-users-display-font, inherit);
	font-size: var(--diluxone-users-login-title, clamp(26px, 2.4vw, 34px));
	font-weight: var(--diluxone-users-login-title-weight, 800);
	line-height: 1.1;
}

/* Centred: a card on the page's own ground. */
.diluxone-users-login-frame--card { padding-block: 32px; }

/* Inside a column this narrow, two social buttons side by side wrap their
   labels onto three lines each. One per row. */
.diluxone-users-login-frame__box .diluxone-users-socials--cols-2 { grid-template-columns: minmax(0, 1fr); }

/* Split: the picture takes half the window and the form the other half. The
   picture is a background and not an <img> because it is decoration — it is
   hidden from screen readers and carries no alt text to invent.

   How tall the two of them are is ONE decision and not two. The row is at
   least a screen — a split that is a stripe across the middle of the window is
   not a split — and after that it is as tall as whichever column is taller,
   which is the form. `svh` and not `vh`: on a phone `vh` is the window with
   the browser's own bars pretended away, and the screen this describes is the
   one with them. */
.diluxone-users-login-frame.diluxone-users-login-frame--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	padding: 0;
	align-items: stretch;
	min-height: var(--diluxone-users-login-min, min(720px, 100svh));
}
/* The panel is never taller than the window, and stays put while the form
   goes past it.

   A form with twelve networks, a passkey, an address and a password on it is
   genuinely longer than a laptop screen, and stretching the panel to match was
   putting the one sentence this page came to say — the heading — at the middle
   of a column twice the height of the window, which is to say below the fold.
   Nothing is deformed to fix that: the panel keeps its cell and its colour,
   it is simply as tall as a screen and it holds while the other column
   scrolls. That is the same answer the dashboard's rail gives, and the same
   one property to move it: a site whose header is fixed over the top of the
   page says where the panel comes to rest, once. */
.diluxone-users-login-frame--split .diluxone-users-login-frame__picture {
	position: sticky;
	top: var(--diluxone-users-login-stick, 0px);
	align-self: start;
	height: 100%;
	max-height: 100svh;
	overflow: hidden;
	background-image: var(--diluxone-users-login-image);
	background-size: cover;
	background-position: center;
	background-color: var(--diluxone-users-login-panel-bg, var(--diluxone-users-accent));
}
/* A drawing over the panel's colour: rings, a pattern, a corner of a logo.
   It travels as one value — image, position, size, repeat — the way the
   menu's rule does, because half a background declared in four properties is
   four properties to keep in step. Unset it draws nothing. */
.diluxone-users-login-frame--split .diluxone-users-login-frame__picture::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--diluxone-users-login-panel-art, none);
	opacity: var(--diluxone-users-login-panel-art-opacity, 1);
}
.diluxone-users-login-frame--split .diluxone-users-login-frame__box {
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* `safe` is the difference between a form that is centred and a form whose
	   first field is above the top of the screen: when the content is taller
	   than the box, centring overflows in BOTH directions and the half that
	   goes up cannot be scrolled to. Declared twice on purpose — a browser
	   that does not know the keyword keeps the line before it. */
	justify-content: safe center;
	padding: var(--diluxone-users-login-box-pad, clamp(24px, 5vh, 48px));
	max-width: var(--diluxone-users-login-box-w, 520px);
}

/* ── What the panel says ──────────────────────────────────────────────
   Three rows, so the mark holds the top and the closing line holds the
   bottom however much is written between them. The rows that are empty are
   still there and empty: laying out three things and drawing two is how a
   panel ends up with its heading against the ceiling.

   The three rows share the panel's height rather than running past the bottom
   of it, and the air between them and around them is measured against the
   window: a laptop 768 pixels tall was spending 112 of them on padding that
   was chosen for a desk monitor. It is still one value per site — the same
   two properties that were here, with a floor, a preference and a ceiling
   instead of a single number. */
.diluxone-users-login-frame__words {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--diluxone-users-login-panel-gap, clamp(20px, 4vh, 32px));
	padding: var(--diluxone-users-login-panel-pad, clamp(28px, 6vh, 56px));
	color: var(--diluxone-users-login-panel-ink, #fff);
	/* A panel with more written on it than fits a short window reads itself
	   rather than losing its last line. It only ever appears when there is
	   genuinely too much. */
	overflow-y: auto;
}
/* A photograph is not a background until something separates it from the
   words on top. Only when there is both: a panel that is just a colour needs
   nothing laid over it, and laying something anyway darkens the colour the
   site chose. */
.diluxone-users-login-frame__picture--over::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--diluxone-users-login-panel-over, rgba(0, 0, 0, .45));
}
.diluxone-users-login-frame__mark img { display: block; max-height: var(--diluxone-users-login-panel-mark, 42px); width: auto; }
.diluxone-users-login-frame__mark { margin: 0; }
.diluxone-users-login-frame__say { max-width: var(--diluxone-users-login-panel-w, 480px); }
/* The one heading the plugin does give a size to, and the reason it differs
   from the account area's is that this one is not in the theme's page: it is
   the plugin's own panel, edge to edge, and a theme's h2 dropped onto it
   comes out as body copy in a block of colour. It is still a value and not a
   selector, so a site that has a scale of its own says so once. */
.diluxone-users-login-frame__title {
	margin: 0 0 20px;
	font-family: var(--diluxone-users-display-font, inherit);
	font-size: var(--diluxone-users-login-panel-title, clamp(30px, 3.4vw, 50px));
	font-weight: var(--diluxone-users-login-panel-title-weight, 800);
	line-height: 1.06;
	color: inherit;
}
/* Each line of the heading is a line. Somebody who writes two lines means two
   lines, not one sentence that breaks where the column ends. */
.diluxone-users-login-frame__title span { display: block; }
.diluxone-users-login-frame__text { margin: 0; font-size: 1.1em; line-height: 1.6; opacity: .86; }
.diluxone-users-login-frame__points {
	list-style: none;
	margin: var(--diluxone-users-login-points-top, clamp(16px, 3vh, 36px)) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.diluxone-users-login-frame__points li { display: flex; align-items: center; gap: 12px; }
/* The mark before each point is drawn as a mask and not as a picture, so it
   takes the panel's ink instead of arriving painted: white on a dark panel,
   dark on a light one, and neither of them a second colour to set. */
.diluxone-users-login-frame__points li::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--diluxone-users-login-point-mark, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")) center / contain no-repeat;
	mask: var(--diluxone-users-login-point-mark, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")) center / contain no-repeat;
}
.diluxone-users-login-frame__foot { margin: 0; font-size: 0.95em; opacity: .62; }
/* Which side the picture is on: the box moves, the picture keeps its cell. */
.diluxone-users-login-frame--split.diluxone-users-login-frame--right .diluxone-users-login-frame__picture { order: 2; }

/* Backdrop: the picture behind everything, the box on top of it. */
.diluxone-users-login-frame--backdrop {
	background-image: var(--diluxone-users-login-image);
	background-size: cover;
	background-position: center;
	background-color: var(--diluxone-users-accent);
	padding-block: 64px;
}
/* A photograph is not a background until something separates it from the text
   on top. Without this the box floats on a picture and neither is readable. */
.diluxone-users-login-frame--backdrop::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}
.diluxone-users-login-frame--backdrop { position: relative; }
.diluxone-users-login-frame--backdrop .diluxone-users-login-frame__box {
	position: relative;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

/* The site's mark above the form. */
.diluxone-users-login__logo { margin: 0 0 20px; text-align: center; }
.diluxone-users-login__logo img { max-height: 56px; width: auto; }

@media (max-width: 782px) {
	/* The picture is the first thing that goes: on a phone, half a screen of
	   photograph is half a screen not spent signing in. */
	/* The doubled class is not decoration: the rule that lays the two columns
	   out carries it, and one class in here loses to two out there however
	   far down the sheet it sits. A phone got a half-width form. */
	.diluxone-users-login-frame.diluxone-users-login-frame--split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	/* Stacked, the panel is the first thing on the page and not a column
	   beside anything, so it goes back to being as tall as what is written on
	   it. Left sticky it would hold the top of a phone screen while the form
	   slid underneath it. */
	.diluxone-users-login-frame--split .diluxone-users-login-frame__picture {
		display: none;
		position: static;
		height: auto;
		max-height: none;
	}
	/* Unless something is written on it. A sentence the site wrote is not
	   decoration, and taking it away on a phone takes away what the page came
	   to say — it stacks above the form instead, with less air in it. */
	.diluxone-users-login-frame--split .diluxone-users-login-frame__picture--words { display: block; }
	.diluxone-users-login-frame__words { padding: var(--diluxone-users-login-panel-pad-sm, 36px 20px); gap: 24px; overflow: visible; }
	.diluxone-users-login-frame--split .diluxone-users-login-frame__box { padding: 32px 20px; max-width: none; }
	.diluxone-users-login-frame__box { padding: 28px 20px; }
	.diluxone-users-login-frame { padding-block: 24px; }
}

/* The site's own sentences: the line under a heading, and the terms line at
   the foot of the sign-in form — small, quiet, and still readable. */
.diluxone-users-login__intro { margin: 0 0 18px; color: var(--diluxone-users-muted); }

/* The sign-in block itself. A reading column is the right measure for a form
   in a page and the wrong one for the one thing a screen exists to do, so in
   here the form takes the room the frame gives it and the two doors — the
   passkey and the link — go the whole way across. How wide "the whole way"
   is, is the frame's business, and a site that wants a narrower column than
   the frame says so once. */
.diluxone-users-login { width: 100%; max-width: var(--diluxone-users-login-w, none); margin-inline: auto; }
.diluxone-users-login .diluxone-users-form { max-width: none; }
.diluxone-users-login .diluxone-users-form > .diluxone-users-button,
.diluxone-users-login .diluxone-users-form > button { align-self: stretch; }

/* The two drawings on this screen. They take the surrounding colour, so the
   envelope over "check your email" is the accent and the one beside a note is
   as quiet as the note. */
.diluxone-users-icon { flex: 0 0 auto; }
.diluxone-users-login__icon { margin: 0 0 10px; color: var(--diluxone-users-accent); line-height: 0; }
/* The envelope in a circle of washed colour. It is the one picture on that
   screen, and on its own at 40px it reads as an afterthought rather than as
   the thing that just happened. */
.diluxone-users-login__icon--circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--diluxone-users-sent-icon, 88px);
	height: var(--diluxone-users-sent-icon, 88px);
	margin-bottom: 24px;
	border-radius: 50%;
	background: var(--diluxone-users-accent-soft);
}
/* The explaining note beside a drawing. It is a line by default and a box
   when a site says so: the padding and the ground are one property each, and
   with neither set nothing is painted and nothing takes any room. */
.diluxone-users-note--icon {
	display: flex;
	align-items: flex-start;
	gap: var(--diluxone-users-note-gap, 8px);
	padding: var(--diluxone-users-note-pad, 0);
	background: var(--diluxone-users-note-bg, transparent);
	border-radius: var(--diluxone-users-radius-sm);
}
/* The drawing beside it follows the note, unless the site would rather it
   were the thing the eye lands on. */
.diluxone-users-note--icon .diluxone-users-icon { margin-top: 1px; color: var(--diluxone-users-note-mark, currentColor); }

/* The way back out of "check your email". */
.diluxone-users-login__again { margin: 18px 0 14px; }
/* Centred, because it belongs to the form above it and not to the left edge:
   ranged left under a column of full-width buttons it reads as one more
   thing to do rather than as the small print. */
.diluxone-users-login__legal {
	margin: 20px 0 0;
	text-align: center;
	font-size: 0.85em;
	line-height: 1.6;
	color: var(--diluxone-users-muted);
}
.diluxone-users-account__intro { margin: 0 0 18px; color: var(--diluxone-users-muted); }

/* ── The account area ───────────────────────────────────────────────── */

/* The header is the same markup in both shapes; what changes is whether it
   sits in the page or on a band of its own. */
.diluxone-users-account__header {
	padding: 0 0 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--diluxone-users-border);
}
.diluxone-users-account__header-inner {
	display: flex;
	align-items: center;
	gap: var(--diluxone-users-header-gap, 18px);
}
.diluxone-users-account__who { min-width: 0; flex: 1 1 auto; }
/* The button goes to the far end of the header and stays on its line. */
.diluxone-users-account__action { flex: 0 0 auto; }
.diluxone-users-button--line {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
}
.diluxone-users-button--line:hover { background: transparent; color: currentColor; filter: none; opacity: .85; }
.diluxone-users-account__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--diluxone-users-avatar, 64px);
	height: var(--diluxone-users-avatar, 64px);
	flex: 0 0 var(--diluxone-users-avatar, 64px);
	border-radius: 50%;
	background: var(--diluxone-users-accent-bg);
	color: var(--diluxone-users-accent-ink);
	font-size: 1.3em;
	font-weight: 700;
	overflow: hidden;
}
.diluxone-users-account__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* The name is an h1 and the section's heading is an h2, and the plugin does
   not tell the theme how big its own headings are. That was the single thing
   that made this block look pasted in: a theme with a display face at 42px
   drew everything else on the page in it and this in 1.5em of the body face,
   so the site had to write a rule to get its own typography back. Left alone,
   the heading is the theme's and the page reads as one page.
   Margins are another matter — those are the layout of this header, and the
   layout is the plugin's. */
.diluxone-users-account__name { margin: 0; }
.diluxone-users-account__since { margin: 2px 0 0; color: var(--diluxone-users-muted); }

/* ── The menu ────────────────────────────────────────────────────────────
   Two questions, asked separately and answered separately: where it goes —
   across the top or down the side — and what it looks like. They used to be
   one: the cover template quietly turned the pills into underlined tabs, and
   down the side that underline came out as a line across the whole menu
   under every item, with sixteen pixels of air above and below each one.
   Nobody could have predicted either from the control they pressed.

   So: direction is `--row` or `--column`, look is `--pills`, `--underline` or
   `--plain`, and every pair of the six is written out. */
.diluxone-users-account__nav { display: flex; margin-bottom: 24px; }
.diluxone-users-account__nav--row { flex-wrap: wrap; gap: var(--diluxone-users-nav-gap, 4px); }
.diluxone-users-account__nav--column {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--diluxone-users-nav-gap, 2px);
	margin: 0;
}

.diluxone-users-account__tab {
	color: var(--diluxone-users-muted);
	text-decoration: none;
	font-weight: 600;
	padding: var(--diluxone-users-tab-pad, 10px 16px);
	border-radius: var(--diluxone-users-radius-sm);
}
.diluxone-users-account__tab:hover { color: var(--diluxone-users-text); }
/* Down the side the whole row is the target, and the words line up on the
   left: a menu item centred in its own column is a button that happens to be
   stacked, not a menu. */
.diluxone-users-account__nav--column .diluxone-users-account__tab { text-align: left; }

/* Where it sits along the strip. `start` is the sheet's own and says nothing,
   so a menu that was never asked about does not move. Across the top it is
   where the row begins; down the side it is where each line of text begins,
   which is the same question asked of a column. */
.diluxone-users-account__nav--center.diluxone-users-account__nav--row { justify-content: center; }
.diluxone-users-account__nav--end.diluxone-users-account__nav--row { justify-content: flex-end; }
.diluxone-users-account__nav--center.diluxone-users-account__nav--column .diluxone-users-account__tab { text-align: center; }
.diluxone-users-account__nav--end.diluxone-users-account__nav--column .diluxone-users-account__tab { text-align: right; }

/* Filled: the open one is a block of colour. */
.diluxone-users-account__nav--pills .diluxone-users-account__tab:hover { background: var(--diluxone-users-surface-alt); }
.diluxone-users-account__nav--pills .diluxone-users-account__tab.is-current {
	background: var(--diluxone-users-accent-bg);
	color: var(--diluxone-users-accent-ink);
}

/* Underlined, across: a strip with the open one underlined. The line under
   the whole menu is on the menu and not on the bar around it, so it is there
   whether or not the area drew a bar. */
.diluxone-users-account__nav--underline.diluxone-users-account__nav--row {
	gap: var(--diluxone-users-nav-gap, 20px);
	border-bottom: 1px solid var(--diluxone-users-border);
}
.diluxone-users-account__nav--underline.diluxone-users-account__nav--row .diluxone-users-account__tab {
	padding: var(--diluxone-users-tab-pad, 14px 2px);
	border-radius: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.diluxone-users-account__nav--underline.diluxone-users-account__nav--row .diluxone-users-account__tab.is-current {
	color: var(--diluxone-users-accent);
	border-bottom-color: var(--diluxone-users-accent);
}

/* Underlined, down the side: the same idea rotated a quarter turn. A rule
   down the left of the column, and the open item's piece of it in colour. */
.diluxone-users-account__nav--underline.diluxone-users-account__nav--column { gap: var(--diluxone-users-nav-gap, 0px); }
.diluxone-users-account__nav--underline.diluxone-users-account__nav--column .diluxone-users-account__tab {
	padding: var(--diluxone-users-tab-pad, 10px 14px);
	border-radius: 0;
	border-left: 3px solid var(--diluxone-users-border);
}
.diluxone-users-account__nav--underline.diluxone-users-account__nav--column .diluxone-users-account__tab.is-current {
	color: var(--diluxone-users-accent);
	border-left-color: var(--diluxone-users-accent);
	background: var(--diluxone-users-surface-alt);
}

/* Plain: the words, and the open one in colour. */
.diluxone-users-account__nav--plain .diluxone-users-account__tab { padding: var(--diluxone-users-tab-pad, 8px 2px); border-radius: 0; }
.diluxone-users-account__nav--plain.diluxone-users-account__nav--row { gap: var(--diluxone-users-nav-gap, 18px); }
.diluxone-users-account__nav--plain .diluxone-users-account__tab.is-current { color: var(--diluxone-users-accent); }

.diluxone-users-account__title { margin: 0 0 6px; }

/* ── The cover ──────────────────────────────────────────────────────
   The header becomes a coloured band the full width of whatever the theme
   gives the shortcode, and the tabs get a strip of their own under it. The
   band breaks out of a theme's content column with a negative margin the
   width of the viewport: a profile header that stops halfway across the page
   is the one thing that reads as broken rather than as a choice. Inside the
   band the content lines back up with the rest of the page. */
.diluxone-users-account--cover .diluxone-users-account__header {
	--diluxone-users-cover-ink: #fff;
	background: var(--diluxone-users-cover, var(--diluxone-users-accent));
	color: var(--diluxone-users-cover-ink);
	border-bottom: 0;
	margin-bottom: 0;
	padding-block: var(--diluxone-users-cover-pad, 40px);
	/* The breakout and the padding that undoes it are one number, so a site
	   already running full width sets `--diluxone-users-bleed: 0px` and both
	   stop together. Two properties to keep in step would be one to forget. */
	margin-inline: var(--diluxone-users-bleed, calc(50% - 50vw));
	/* The gutter the band keeps once the breakout is off. It falls back to
	   the gutter the rows were given, because it is the same gutter: the
	   band's edge and the row inside it line up or the header is the one
	   thing on the page that does not. */
	padding-inline: max(var(--diluxone-users-pad, var(--diluxone-users-row-pad, 20px)), calc(-1 * var(--diluxone-users-bleed, calc(50% - 50vw))));
}
/* The band already carries the gutter, so the row inside it does not add a
   second one: they are the same gutter seen from two elements. */
.diluxone-users-account--cover .diluxone-users-account__header-inner {
	gap: var(--diluxone-users-header-gap, 24px);
	padding-inline: 0;
}
.diluxone-users-account--cover .diluxone-users-account__avatar {
	width: var(--diluxone-users-avatar, 96px);
	height: var(--diluxone-users-avatar, 96px);
	flex-basis: var(--diluxone-users-avatar, 96px);
	background: var(--diluxone-users-surface);
	/* The initials, when that is what the picture is. The base rule writes
	   them in the ink that reads on the accent — and here the disc is the
	   surface, so that ink is white on white and the initials are gone. */
	color: var(--diluxone-users-accent);
	border: var(--diluxone-users-avatar-ring, 3px solid rgba(255, 255, 255, .35));
}
/* A picture instead of the colour, and a picture with the colour laid over
   it. The second is not decoration: white letters on somebody's holiday photo
   are unreadable, and a band you cannot read your own name on is worse than
   no band. The overlay is the cover colour at three quarters, so it is still
   the site's colour and not a grey wash. */
.diluxone-users-account--cover-image .diluxone-users-account__header,
.diluxone-users-account--cover-dim .diluxone-users-account__header {
	background-image: var(--diluxone-users-cover-image);
	background-size: cover;
	background-position: var(--diluxone-users-cover-at, center);
	background-repeat: no-repeat;
}
.diluxone-users-account--cover-dim .diluxone-users-account__header {
	background-image:
		linear-gradient(
			var(--diluxone-users-cover-over, color-mix(in srgb, var(--diluxone-users-cover, var(--diluxone-users-accent)) 78%, transparent)),
			var(--diluxone-users-cover-over, color-mix(in srgb, var(--diluxone-users-cover, var(--diluxone-users-accent)) 78%, transparent))
		),
		var(--diluxone-users-cover-image);
}

/* The heading takes its colour from the theme, and on a coloured band that
   comes out as near-black on blue. It follows the band. */
.diluxone-users-account--cover .diluxone-users-account__name { color: inherit; }
.diluxone-users-account--cover .diluxone-users-account__since { color: inherit; opacity: .85; }

/* The bar under the cover is a strip across the area. What the menu inside it
   looks like is not decided here: that is its own setting, and the cover
   deciding it was how pressing "with a cover" silently changed the shape of
   every button in the menu. */
/* The rule is the whole value and not a colour, because a transparent border
   is still a pixel: unset, there is no border and the bar takes no height it
   did not take before. A site asks for one with
   `--diluxone-users-bar-rule: 1px solid #e2e5ec`. */
/* The strip the menu sits in, and its own air.
   It had none: the only space around the menu was whatever padding the chosen
   tab shape happened to bring, which is why the three shapes each looked
   wrong in a different way — the filled one pressed against the band above,
   the plain one straddled the seam between the band and the page, and the
   underlined one only looked right by accident. The strip is one thing and
   it has one height, whatever is drawn inside it. */
.diluxone-users-account__bar {
	/* flow-root, so the menu's own margins stay inside the strip instead of
	   collapsing through it and pushing the strip around. */
	display: flow-root;
	margin-bottom: var(--diluxone-users-bar-gap, 28px);
	background: var(--diluxone-users-bar-bg, transparent);
	border-bottom: var(--diluxone-users-bar-rule, 0 none);
}
/* Top and bottom only, on purpose. The strip's menu is centred by an
   `auto` margin — the plugin's own in "contained", a site's in its grid — and
   a four-sided shorthand with 0 at the sides beat that `auto` and shoved the
   menu against the window's edge. Left and right are printed from PHP only
   when somebody typed them, as padding, so they never fight the centring. */
.diluxone-users-account__bar .diluxone-users-account__nav {
	margin-block: var(--diluxone-users-nav-top, 10px) var(--diluxone-users-nav-bottom, 10px);
}
/* With no header the area opens with the strip, against whatever the site has
   above it — its own header, usually. The opening air belongs to the area and
   not to the strip: on the strip it would push the menu off centre. */
.diluxone-users-account--bare { padding-top: var(--diluxone-users-bare-top, 24px); }

/* With a cover the area runs edge to edge and stops being a block inside the
   page: it is the page. So it has to end somewhere. Without this the last
   card sits flush against the footer, which is the difference between a
   screen that is finished and one that stops. */
.diluxone-users-account--cover .diluxone-users-account__body { padding-bottom: var(--diluxone-users-body-end, 64px); }

@media (max-width: 640px) {
	.diluxone-users-account--cover .diluxone-users-account__header { padding-block: var(--diluxone-users-cover-pad, 28px); }
	.diluxone-users-account--cover .diluxone-users-account__header-inner { flex-wrap: wrap; gap: var(--diluxone-users-header-gap, 16px); }
	/* Two answers and the site picks one. With eight sections a sideways
	   scroller hides half of them and you have to drag to find out they are
	   there; wrapped, they are all visible and the bar is three lines tall.
	   Which of those is worse depends on how many sections there are, which
	   is why it is not decided here. */
	.diluxone-users-account--nav-scroll .diluxone-users-account__nav--row {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	.diluxone-users-account--nav-wrap .diluxone-users-account__nav--row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--diluxone-users-nav-min, 140px), 1fr));
		gap: 0;
		overflow: visible;
	}
	.diluxone-users-account--nav-wrap .diluxone-users-account__tab { text-align: center; }
}

/* How wide the content runs. "Contained" holds it to a reading column and
   centres it; "full" leaves it at whatever width the theme gave it.

   There is deliberately no rule here for the width and the gutter of the
   three rows in general. There was one for a day, reading `--page` and
   `--pad` with neutral defaults, and it broke a site — because declaring
   `padding-inline: 0` is not the same as declaring nothing. The plugin's
   sheet loads after the site's, so a neutral value still wins, and a site
   that had been lining these rows up with its own grid lost the alignment
   without touching anything. Those two numbers are asked from the admin now,
   and the rule for them is printed only when they have been answered: a site
   that did not ask gets no rule at all, which is the only value that cannot
   overrule somebody. */
.diluxone-users-account--contained .diluxone-users-account__body {
	max-width: var(--diluxone-users-read, 980px);
	margin-left: auto;
	margin-right: auto;
}
.diluxone-users-account--contained .diluxone-users-account__header-inner,
.diluxone-users-account--contained .diluxone-users-account__nav--row {
	max-width: var(--diluxone-users-read, 980px);
	margin-left: auto;
	margin-right: auto;
}


/* Menu at the side: the navigation becomes a column and the content sits beside it. */
.diluxone-users-account--side .diluxone-users-account__body {
	display: grid;
	grid-template-columns: var(--diluxone-users-side-w, minmax(180px, 220px)) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
/* On a phone there is no room for two columns, so the menu goes back across
   the top — and with it the direction it is drawn in. */
@media (max-width: 782px) {
	.diluxone-users-account--side .diluxone-users-account__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.diluxone-users-account--side .diluxone-users-account__nav--column {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--diluxone-users-nav-gap, 4px);
		margin-bottom: 4px;
	}
	.diluxone-users-account--side .diluxone-users-account__nav--underline.diluxone-users-account__nav--column .diluxone-users-account__tab {
		border-left: 0;
		border-bottom: 3px solid transparent;
	}
	.diluxone-users-account--side .diluxone-users-account__nav--underline.diluxone-users-account__nav--column .diluxone-users-account__tab.is-current {
		border-bottom-color: var(--diluxone-users-accent);
	}
}

/* ── The front-page summary ─────────────────────────────────────────── */

.diluxone-users-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--diluxone-users-gap);
	margin: 22px 0 0;
}
.diluxone-users-card-summary {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 20px;
	background: var(--diluxone-users-surface);
	border: 1px solid var(--diluxone-users-border);
	border-radius: var(--diluxone-users-radius);
	text-decoration: none;
	color: inherit;
}
.diluxone-users-card-summary:hover { border-color: var(--diluxone-users-accent); }
.diluxone-users-card-summary__label { font-size: 0.8em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--diluxone-users-muted); }
.diluxone-users-card-summary__value { font-size: 1.9em; font-weight: 800; line-height: 1.15; margin-top: 4px; }
/* A card whose value is a sentence and not a figure: "the next broadcast" at
   the size of a number takes three lines and pushes the cards beside it out
   of shape. Still the loudest thing in the card, just not shouting. */
.diluxone-users-card-summary__value.is-text { font-size: 1.15em; font-weight: 700; line-height: 1.3; }
.diluxone-users-card-summary__note { font-size: 0.92em; color: var(--diluxone-users-muted); }
.diluxone-users-card-summary__cta { margin-top: 10px; font-weight: 700; color: var(--diluxone-users-accent); }
/* The arrow belongs to the look and not to the sentence: written into each
   card it would be one more thing to translate, and one card would end up
   without it. */
.diluxone-users-card-summary__cta::after { content: " \2192"; }

/* ── Acceso ─────────────────────────────────────────────────────────── */

.diluxone-users-login__title, .diluxone-users-fields__title { margin: 0 0 6px; }
/* The address somebody just typed, read back to them. It is the one word on
   that screen they have to check, so it is the one word in colour. */
.diluxone-users-login__email { margin: 8px 0 18px; font-size: 1.15em; font-weight: 700; color: var(--diluxone-users-accent); }
.diluxone-users-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 24px 0;
	color: var(--diluxone-users-muted);
	font-size: 0.9em;
}
.diluxone-users-divider::before, .diluxone-users-divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--diluxone-users-border);
}

/* ── The ways in ─────────────────────────────────────────────────────────
 *
 * The four doors of the sign-in screen, in whichever arrangement the site
 * chose. Stacked they are what they always were — blocks with an "or" between
 * them — and this adds nothing to that case: everything below only starts
 * mattering once they become tabs.
 *
 * The strip ships hidden and the script shows it, which is the whole of the
 * no-JavaScript story. It is the reset at the top of this sheet that keeps it
 * off screen until then, and that is not a detail: without it a browser with
 * the script blocked shows a row of tabs that do nothing.
 */

.diluxone-users-ways { min-width: 0; }
.diluxone-users-way { min-width: 0; }

.diluxone-users-ways__strip {
	display: flex;
	gap: var(--diluxone-users-ways-gap, 8px);
	margin: 0 0 20px;
}

/* Equal thirds, and the label beside the icon rather than under it: the whole
   point of this arrangement is the height it gives back, and two lines per tab
   is a third of it spent on the furniture. */
.diluxone-users-ways__tab {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	padding: 10px 10px;
	border: var(--diluxone-users-border-w) solid var(--diluxone-users-border);
	border-radius: var(--diluxone-users-radius-sm);
	background: var(--diluxone-users-surface);
	color: var(--diluxone-users-muted);
	font: inherit;
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
/* A long word in a narrow column — "Contraseña" beside an icon in a third of
   a phone — shortens rather than pushing the strip past the form. */
.diluxone-users-ways__tab span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.diluxone-users-ways__tab:hover { color: var(--diluxone-users-text); }
.diluxone-users-ways__tab[aria-selected="true"] {
	border-color: var(--diluxone-users-accent);
	background: var(--diluxone-users-accent-soft);
	color: var(--diluxone-users-accent);
}
/* Only the tab that is open is in the tab order, so this outline is the only
   thing saying where the keyboard is inside the strip. */
.diluxone-users-ways__tab:focus-visible {
	outline: 2px solid var(--diluxone-users-accent);
	outline-offset: 2px;
}
/* The panel a tab opens is focusable — some of them hold only links — and a
   region does not need an outline drawn round the whole of it to say so. */
.diluxone-users-way:focus { outline: none; }

@media (max-width: 480px) {
	/* On a phone the icon is what survives: three labels beside three icons in
	   340px is three ellipses. The icon keeps its meaning, the open tab is the
	   one in colour, and the panel underneath says the rest. */
	.diluxone-users-ways__tab span {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.diluxone-users-ways__tab { padding: 12px 10px; }
}

/* ── The profile picture ────────────────────────────────────────────── */

.diluxone-users-avatar__form { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.diluxone-users-avatar__current { flex: 0 0 auto; line-height: 0; }
.diluxone-users-avatar__current img { border-radius: 50%; }
.diluxone-users-avatar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The file input is ugly in every browser and different in each one: it is
   hidden inside the label, which is already a system button. */
.diluxone-users-avatar__actions input[type="file"] {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.diluxone-users-avatar__actions label { cursor: pointer; }
.diluxone-users-avatar .diluxone-users-note { flex: 1 1 100%; }

/* ── The public name ────────────────────────────────────────────────── */

.diluxone-users-handle .diluxone-users-form { max-width: 28rem; }

/* WordPress's own form, so it does not clash with the rest. */
.diluxone-users .login-username,
.diluxone-users .login-password { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.diluxone-users .login-username label,
.diluxone-users .login-password label { font-weight: 600; }
.diluxone-users .login-username input,
.diluxone-users .login-password input {
	width: 100%;
	min-height: var(--diluxone-users-control-h);
	padding: 0 14px;
	border: var(--diluxone-users-border-w) solid var(--diluxone-users-border);
	border-radius: var(--diluxone-users-radius-sm);
	background: var(--diluxone-users-surface);
	color: var(--diluxone-users-text);
	font: inherit;
}
.diluxone-users .login-remember { margin-bottom: 14px; color: var(--diluxone-users-muted); }
.diluxone-users .login-submit input {
	min-height: var(--diluxone-users-control-h);
	padding: 0 22px;
	border: 0;
	border-radius: var(--diluxone-users-radius-sm);
	background: var(--diluxone-users-accent-bg);
	color: var(--diluxone-users-accent-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ── Segundo factor ─────────────────────────────────────────────────── */

.diluxone-users-totp { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.diluxone-users-totp__qr {
	flex: 0 0 auto;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--diluxone-users-border);
	border-radius: var(--diluxone-users-radius-sm);
	line-height: 0;
}
.diluxone-users-totp__manual { flex: 1 1 260px; min-width: 0; }
.diluxone-users-totp__key {
	display: inline-block;
	padding: 8px 12px;
	background: var(--diluxone-users-surface-alt);
	border-radius: var(--diluxone-users-radius-sm);
	font-size: 1.05em;
	letter-spacing: .08em;
	word-break: break-all;
}

/* Backup codes are shown only once: they are seen as what they are,
   something to copy or print, not as running text. */
.diluxone-users-backup__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.diluxone-users-backup__list code {
	display: block;
	padding: 10px 12px;
	background: var(--diluxone-users-surface-alt);
	border-radius: var(--diluxone-users-radius-sm);
	text-align: center;
	letter-spacing: .06em;
}

.diluxone-users-login--2fa { max-width: 34rem; }
.diluxone-users-login--2fa #diluxone-users-2fa-code { font-size: 1.4em; letter-spacing: .3em; text-align: center; }

/* ── Privacidad ─────────────────────────────────────────────────────── */

/* The block that deletes the account is set apart from the one that
   downloads: they are two very different things and cannot look alike. */
.diluxone-users-panel--danger { border-color: color-mix( in srgb, var(--diluxone-users-danger) 35%, var(--diluxone-users-border) ); }
.diluxone-users-panel--danger h3 { color: var(--diluxone-users-danger); }

.diluxone-users-list-plain { margin: 10px 0 14px; padding-left: 20px; }
.diluxone-users-list-plain li { margin-bottom: 6px; }

.diluxone-users-requests { margin-top: 16px; }
.diluxone-users-requests__action { text-align: right; white-space: nowrap; }
.diluxone-users-requests .diluxone-users-button { min-height: 36px; padding: 0 16px; font-size: .92em; }

.diluxone-users-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--diluxone-users-surface-alt);
	color: var(--diluxone-users-muted);
	font-size: .88em;
	font-weight: 600;
}
.diluxone-users-pill--ok { background: color-mix( in srgb, var(--diluxone-users-ok) 14%, transparent ); color: var(--diluxone-users-ok); }
.diluxone-users-pill--pending { background: color-mix( in srgb, var(--diluxone-users-accent) 12%, transparent ); color: var(--diluxone-users-accent); }
.diluxone-users-pill--off { background: color-mix( in srgb, var(--diluxone-users-danger) 12%, transparent ); color: var(--diluxone-users-danger); }

.diluxone-users-handle-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* The air between the pieces comes from `gap`. The paragraph margins any
   theme brings would add to it and leave gaps two lines tall. */
.diluxone-users-handle-field > p { margin-block: 0; }
.diluxone-users-handle-field > input { max-width: 26rem; }
/* What it is and what it is not goes before the field: after it has been
   typed it is no use at all. */
.diluxone-users-handle__what { margin: 0; font-size: 0.9em; line-height: 1.55; color: var(--diluxone-users-muted); }
.diluxone-users-handle__preview,
.diluxone-users-handle__state { margin: 0; font-size: 0.9em; }
.diluxone-users-handle__preview { color: var(--diluxone-users-muted); }
.diluxone-users-handle__preview a { word-break: break-all; }
.diluxone-users-handle__state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.diluxone-users-handle__notice { font-weight: 600; }
.diluxone-users-handle__notice.is-free { color: var(--diluxone-users-ok); }
.diluxone-users-handle__notice.is-taken { color: var(--diluxone-users-danger); }
.diluxone-users-handle__notice.is-waiting { color: var(--diluxone-users-muted); font-weight: 400; }

/* ── The last word ───────────────────────────────────────────────────────
   Hidden means hidden. The browser's own rule for [hidden] carries the weight
   of a bare tag, so any component here that gives itself a display — the tab
   strip, the divider between two ways in — beat it and stayed on screen doing
   nothing. Each of them answered it separately.

   One rule instead, and last, for the same reason as its twin in the admin
   sheet: a rule that takes something off the screen has to be able to outrank
   the component that put it there, and coming last is how that is won without
   an `!important`.

   Nothing goes below this line. */
.diluxone-users [hidden] { display: none; }