/* ==========================================================================
   Mtaawasaba Social Login — Front-end Styles
   Design language shared with Simple File Library: soft neutral surfaces,
   rounded card radii (14px cards, 8px controls), 42px control height,
   subtle hover states, and an accent colour taken from the active theme.

   Theming (same approach as Simple File Library):
   - Typography is inherited from the theme (no hardcoded font stack) so the
     login and account screens read as part of the page. Text sizes are in
     rem so they follow the theme's root size and the visitor's browser
     zoom / "larger text" setting. Icon boxes stay in px because they pair
     1:1 with a fixed-size glyph.
   - The accent prefers the theme's own "primary" palette colour
     (--wp--preset--color--primary, exposed by block themes and many classic
     themes that register editor colours) and only falls back to the
     plugin's teal when a theme doesn't define one. Text drawn ON the accent
     prefers the theme's "base" colour and falls back to white.
   - The rest of the palette is CSS custom properties on .msl-root. Light is
     the default; the dark palette is applied only when the THEME signals
     dark mode (body/html class or data-attribute). This deliberately does
     NOT follow prefers-color-scheme: that reflects the visitor's device, not
     the site's actual mode, and would darken the plugin on a light site
     whenever the visitor's OS is set to dark. If your theme uses a different
     dark-mode hook, add its selector to the single grouped rule below.
   - Any token can be overridden from theme CSS, e.g.
       .msl-root { --msl-accent: #6d28d9; --msl-bg-card: #fff; }
   ========================================================================== */

.msl-root {
	--msl-accent: var(--wp--preset--color--primary, #0a6e6e);
	--msl-on-accent: var(--wp--preset--color--base, #ffffff);
	--msl-text: #1d2327;
	--msl-muted: #667085;
	--msl-border: #e5e7eb;
	--msl-bg-card: #ffffff;
	--msl-bg-page: #f7f9fa;
	--msl-bg-hover: #eef6f6;

	--msl-success-bg: #effaf2;
	--msl-success-border: #b7dfc1;
	--msl-success-text: #216e39;
	--msl-danger-bg: #fef3f2;
	--msl-danger-border: #fecdca;
	--msl-danger-text: #b42318;
	--msl-warning-bg: #fffaeb;
	--msl-warning-border: #fedf89;
	--msl-warning-text: #b54708;
	--msl-info-bg: #eff8ff;
	--msl-info-border: #b2ddff;
	--msl-info-text: #175cd3;

	/* Native controls (checkbox, autofill, scrollbars) follow the palette. */
	color-scheme: light;

	/* Inherit the theme's body font/size/weight/line-height. */
	font-family: inherit;
	color: var(--msl-text);
}
.msl-root *,
.msl-root *::before,
.msl-root *::after {
	box-sizing: border-box;
}

/* Dark palette — explicit theme/plugin dark-mode hooks only. Covers the
   common conventions across WordPress themes, builders and dark-mode
   plugins (same list as Simple File Library). The variable list lives here
   once. */
body.dark-mode .msl-root,
body.darkmode .msl-root,
body.dark .msl-root,
body.is-dark-theme .msl-root,
html.dark-mode .msl-root,
html.dark .msl-root,
html[data-theme="dark"] .msl-root,
html[data-bs-theme="dark"] .msl-root,
body[data-theme="dark"] .msl-root,
[data-color-scheme="dark"] .msl-root,
.wp-dark-mode-active .msl-root {
	--msl-accent: var(--wp--preset--color--primary, #2bb8b3);
	/* The fallback dark accent is bright, so its label text is dark. */
	--msl-on-accent: var(--wp--preset--color--base, #0b1f1f);
	--msl-text: #e7e9ea;
	--msl-muted: #9aa4ad;
	--msl-border: #34393e;
	--msl-bg-card: #1c2126;
	--msl-bg-page: #22272c;
	--msl-bg-hover: #26343a;

	--msl-success-bg: #16321f;
	--msl-success-border: #2d5a3a;
	--msl-success-text: #7fd99a;
	--msl-danger-bg: #3a1b18;
	--msl-danger-border: #6b2b25;
	--msl-danger-text: #f97066;
	--msl-warning-bg: #3a2a10;
	--msl-warning-border: #6b4e1a;
	--msl-warning-text: #fdb022;
	--msl-info-bg: #14263d;
	--msl-info-border: #1f4a7a;
	--msl-info-text: #84caff;

	color-scheme: dark;
}

/* ==========================================================================
   Login / register / reset — card
   ========================================================================== */

.msl-wrap {
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
}

.msl-card {
	width: 100%;
	max-width: 420px;
	padding: 28px;
	background: var(--msl-bg-card);
	color: var(--msl-text);
	border: 1px solid var(--msl-border);
	border-radius: 14px;
}

.msl-brand {
	text-align: center;
	margin: 0 0 20px;
}
.msl-brand .custom-logo-link { display: inline-block; }
.msl-brand .custom-logo,
.msl-brand .msl-custom-logo {
	display: block;
	max-width: 100%;
	max-height: 96px;
	width: auto;
	height: auto;
	margin: 0 auto;
}

.msl-root .msl-heading {
	margin: 0 0 22px;
	text-align: center;
	font-size: 1.75rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--msl-text);
}

/* Notices */
.msl-root .msl-notice {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--msl-border);
	border-radius: 10px;
	font-size: 0.84375rem;
	font-weight: 600;
	line-height: 1.5;
}
.msl-notice-error   { color: var(--msl-danger-text);  background: var(--msl-danger-bg);  border-color: var(--msl-danger-border); }
.msl-notice-success { color: var(--msl-success-text); background: var(--msl-success-bg); border-color: var(--msl-success-border); }
.msl-notice-warning { color: var(--msl-warning-text); background: var(--msl-warning-bg); border-color: var(--msl-warning-border); }
.msl-notice-info    { color: var(--msl-info-text);    background: var(--msl-info-bg);    border-color: var(--msl-info-border); }

/* ==========================================================================
   Social buttons — outline controls; brand icons carry the colour
   ========================================================================== */

.msl-social-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.msl-root .msl-social-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 42px;
	padding: 0 20px;
	background: var(--msl-bg-page);
	color: var(--msl-text);
	border: 1.5px solid var(--msl-border);
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.msl-root .msl-social-button:hover,
.msl-root .msl-social-button:focus-visible {
	background: var(--msl-bg-hover);
	border-color: var(--msl-accent);
	color: var(--msl-text);
	text-decoration: none;
}

.msl-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Inline, dependency-free icons. Multi-colour marks (Google, Microsoft) keep
   their brand colours on both palettes; single-colour marks are masks
   filled with currentColor so they follow the theme's text colour. */
.msl-icon-google {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3c-1.6 4.6-6 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.1 8 3l6-6C34 5.5 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.2-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.6 15.6 18.9 12 24 12c3.1 0 5.8 1.1 8 3l6-6C34 5.5 29.3 4 24 4 16.3 4 9.6 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-1.9 13.5-5.1l-6.2-5.2C29.3 35.4 26.8 36 24 36c-5.2 0-9.6-3.4-11.2-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.1-4 5.6l6.2 5.2C40.9 35.9 44 30.4 44 24c0-1.2-.1-2.4-.4-3.5z'/%3E%3C/svg%3E");
}

.msl-icon-facebook {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.msl-icon-instagram {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 2 .2 2.5.4.6.3 1 .6 1.5 1 .4.5.7.9 1 1.5.2.5.4 1.3.4 2.5.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 2-.4 2.5-.3.6-.6 1-1 1.5-.5.4-.9.7-1.5 1-.5.2-1.3.4-2.5.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-2-.2-2.5-.4-.6-.3-1-.6-1.5-1-.4-.5-.7-.9-1-1.5-.2-.5-.4-1.3-.4-2.5C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.2-2 .4-2.5.3-.6.6-1 1-1.5.5-.4.9-.7 1.5-1 .5-.2 1.3-.4 2.5-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7.1-1 .1-1.6.2-2 .3-.5.2-.8.4-1.2.8-.4.4-.6.7-.8 1.2-.1.4-.3 1-.3 2C3 9.5 3 9.9 3 13s0 3.5.1 4.7c.1 1 .2 1.6.3 2 .2.5.4.8.8 1.2.4.4.7.6 1.2.8.4.1 1 .3 2 .3 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c1-.1 1.6-.2 2-.3.5-.2.8-.4 1.2-.8.4-.4.6-.7.8-1.2.1-.4.3-1 .3-2 .1-1.2.1-1.6.1-4.7s0-3.5-.1-4.7c-.1-1-.2-1.6-.3-2-.2-.5-.4-.8-.8-1.2-.4-.4-.7-.6-1.2-.8-.4-.1-1-.3-2-.3-1.2-.1-1.6-.1-4.7-.1zm0 3.9a5.1 5.1 0 1 1 0 10.2 5.1 5.1 0 0 1 0-10.2zm0 1.8a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6zm5.3-2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 2 .2 2.5.4.6.3 1 .6 1.5 1 .4.5.7.9 1 1.5.2.5.4 1.3.4 2.5.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 2-.4 2.5-.3.6-.6 1-1 1.5-.5.4-.9.7-1.5 1-.5.2-1.3.4-2.5.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-2-.2-2.5-.4-.6-.3-1-.6-1.5-1-.4-.5-.7-.9-1-1.5-.2-.5-.4-1.3-.4-2.5C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.2-2 .4-2.5.3-.6.6-1 1-1.5.5-.4.9-.7 1.5-1 .5-.2 1.3-.4 2.5-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7.1-1 .1-1.6.2-2 .3-.5.2-.8.4-1.2.8-.4.4-.6.7-.8 1.2-.1.4-.3 1-.3 2C3 9.5 3 9.9 3 13s0 3.5.1 4.7c.1 1 .2 1.6.3 2 .2.5.4.8.8 1.2.4.4.7.6 1.2.8.4.1 1 .3 2 .3 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c1-.1 1.6-.2 2-.3.5-.2.8-.4 1.2-.8.4-.4.6-.7.8-1.2.1-.4.3-1 .3-2 .1-1.2.1-1.6.1-4.7s0-3.5-.1-4.7c-.1-1-.2-1.6-.3-2-.2-.5-.4-.8-.8-1.2-.4-.4-.7-.6-1.2-.8-.4-.1-1-.3-2-.3-1.2-.1-1.6-.1-4.7-.1zm0 3.9a5.1 5.1 0 1 1 0 10.2 5.1 5.1 0 0 1 0-10.2zm0 1.8a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6zm5.3-2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.msl-icon-github {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.49c-2.23.48-2.7-1.07-2.7-1.07-.36-.93-.89-1.18-.89-1.18-.72-.5.06-.49.06-.49.8.06 1.22.82 1.22.82.71 1.21 1.87.86 2.33.66.07-.52.28-.86.5-1.06-1.78-.2-3.65-.89-3.65-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.01.08-2.11 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.03 2.2-.82 2.2-.82.44 1.1.16 1.91.08 2.11.51.56.82 1.28.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.2c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.49c-2.23.48-2.7-1.07-2.7-1.07-.36-.93-.89-1.18-.89-1.18-.72-.5.06-.49.06-.49.8.06 1.22.82 1.22.82.71 1.21 1.87.86 2.33.66.07-.52.28-.86.5-1.06-1.78-.2-3.65-.89-3.65-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.01.08-2.11 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.03 2.2-.82 2.2-.82.44 1.1.16 1.91.08 2.11.51.56.82 1.28.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.2c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.msl-icon-microsoft {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Crect width='10' height='10' fill='%23F35325'/%3E%3Crect x='13' width='10' height='10' fill='%2381BC06'/%3E%3Crect y='13' width='10' height='10' fill='%2305A6F0'/%3E%3Crect x='13' y='13' width='10' height='10' fill='%23FFBA08'/%3E%3C/svg%3E");
}

.msl-icon-linkedin {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.4 20.4h-3.5v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.7H9.4V9h3.4v1.6h.1c.5-.9 1.6-1.9 3.4-1.9 3.6 0 4.3 2.4 4.3 5.5v6.2zM5.3 7.4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM7 20.4H3.6V9H7v11.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.4 20.4h-3.5v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.7H9.4V9h3.4v1.6h.1c.5-.9 1.6-1.9 3.4-1.9 3.6 0 4.3 2.4 4.3 5.5v6.2zM5.3 7.4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM7 20.4H3.6V9H7v11.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.msl-icon-apple {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 1c.1 1.1-.3 2.2-1 3-.7.8-1.9 1.5-3 1.4-.1-1.1.4-2.2 1-3C14.1 1.6 15.3 1 16.4 1zM20.9 17.2c-.5 1.1-.8 1.6-1.5 2.6-1 1.4-2.3 3.1-4 3.1-1.5 0-1.9-1-3.9-1s-2.5 1-4 1.1c-1.6.1-2.8-1.5-3.8-2.9-2.1-3-3.7-8.4-1.5-12 1-1.8 2.9-2.9 4.9-3 1.5 0 2.9 1 3.9 1 .9 0 2.6-1.2 4.4-1 .8 0 3 .3 4.4 2.4-.1.1-2.6 1.5-2.6 4.6 0 3.6 3.2 4.9 3.7 5.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 1c.1 1.1-.3 2.2-1 3-.7.8-1.9 1.5-3 1.4-.1-1.1.4-2.2 1-3C14.1 1.6 15.3 1 16.4 1zM20.9 17.2c-.5 1.1-.8 1.6-1.5 2.6-1 1.4-2.3 3.1-4 3.1-1.5 0-1.9-1-3.9-1s-2.5 1-4 1.1c-1.6.1-2.8-1.5-3.8-2.9-2.1-3-3.7-8.4-1.5-12 1-1.8 2.9-2.9 4.9-3 1.5 0 2.9 1 3.9 1 .9 0 2.6-1.2 4.4-1 .8 0 3 .3 4.4 2.4-.1.1-2.6 1.5-2.6 4.6 0 3.6 3.2 4.9 3.7 5.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Divider */
.msl-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 20px 0;
	color: var(--msl-muted);
	font-size: 0.8125rem;
}
.msl-divider::before,
.msl-divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--msl-border);
}
.msl-divider span { padding: 0 12px; }

/* ==========================================================================
   Forms
   ========================================================================== */

.msl-form {
	display: flex;
	flex-direction: column;
}

/* One structural block per label/control pair so theme rules for adjacent
   labels / paragraphs / input types can't offset the fields. */
.msl-field {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 14px;
}

.msl-root .msl-label {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	color: var(--msl-text);
	font-size: 0.875rem;
	font-weight: 600;
}

.msl-root .msl-input {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 12px;
	background: var(--msl-bg-page);
	color: var(--msl-text);
	border: 1px solid var(--msl-border);
	border-radius: 8px;
	box-shadow: none;
	font: inherit;
	font-size: 0.875rem;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.msl-root .msl-input::placeholder { color: var(--msl-muted); opacity: 1; }
.msl-root .msl-input:focus,
.msl-root .msl-input:focus-visible {
	outline: none;
	border-color: var(--msl-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--msl-accent) 18%, transparent);
}

.msl-row-between {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 4px 0 14px;
	font-size: 0.875rem;
}

.msl-root .msl-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--msl-text);
	font-weight: 400;
}
.msl-root .msl-checkbox input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--msl-accent);
}

/* Buttons: filled accent (SFL primary), outline variant for secondary actions */
.msl-root .msl-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 20px;
	background: var(--msl-accent);
	color: var(--msl-on-accent);
	border: 1.5px solid var(--msl-accent);
	border-radius: 8px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.msl-root .msl-button:hover,
.msl-root .msl-button:focus-visible {
	background: var(--msl-accent);
	color: var(--msl-on-accent);
	opacity: .85;
	text-decoration: none;
}
.msl-root .msl-button-primary {
	width: 100%;
	margin-top: 6px;
}
.msl-root .msl-button-outline {
	background: transparent;
	color: var(--msl-accent);
	opacity: 1;
}
.msl-root .msl-button-outline:hover,
.msl-root .msl-button-outline:focus-visible {
	background: var(--msl-accent);
	color: var(--msl-on-accent);
	opacity: 1;
}

/* Links */
.msl-root .msl-link,
.msl-root .msl-switch a {
	color: var(--msl-accent);
	text-decoration: none;
}
.msl-root .msl-link:hover,
.msl-root .msl-switch a:hover {
	color: var(--msl-accent);
	text-decoration: underline;
}

.msl-switch {
	margin: 20px 0 0;
	text-align: center;
	color: var(--msl-muted);
	font-size: 0.875rem;
}

.msl-logged-in { text-align: center; }
.msl-logged-in p { margin: 0 0 4px; }
.msl-root .msl-logged-in .msl-button {
	display: flex;
	width: 100%;
	margin: 16px 0 12px;
}

/* Keyboard focus — same ring as Simple File Library */
.msl-root a:focus-visible,
.msl-root button:focus-visible,
.msl-root input[type="submit"]:focus-visible,
.msl-root input[type="checkbox"]:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--msl-accent) 35%, transparent);
	outline-offset: 2px;
}

/* ==========================================================================
   Icons used on the account screen (inline SVG, stroke = currentColor)
   ========================================================================== */

.msl-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	line-height: 0;
	flex-shrink: 0;
}
.msl-glyph svg { width: 100%; height: 100%; }

/* ==========================================================================
   Account screen — /account/
   Same building blocks as the Simple File Library detail + dashboard views:
   a 14px "detail card" hero, page-link style tab buttons, 12px dashboard
   panels, bordered info tiles (8px, page-tinted) and stat tiles (10px).
   ========================================================================== */

.msl-root [hidden] { display: none !important; }

.msl-account-page {
	width: min(1280px, calc(100% - 32px));
	margin: 0 auto;
	padding: 28px 0 44px;
}

/* Hero = SFL .sfl-detail-card */
.msl-account-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px;
	background: var(--msl-bg-card);
	border: 1px solid var(--msl-border);
	border-radius: 14px;
}
.msl-account-identity {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}
.msl-account-avatar-wrap {
	width: 88px;
	height: 88px;
	flex: 0 0 88px;
}
.msl-account-avatar-wrap .msl-profile-avatar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--msl-border);
	background: var(--msl-bg-page);
}
.msl-account-identity-copy { min-width: 0; }
/* Name and role badge share one line, e.g. "Joel Nyandigira [Administrator]" */
.msl-account-name-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 10px;
}
.msl-root .msl-account-identity-copy h1 {
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--msl-text);
}
/* Role = SFL .sfl-tag pill */
.msl-root .msl-account-role {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 11px;
	background: var(--msl-bg-page);
	color: var(--msl-muted);
	border: 1px solid var(--msl-border);
	border-radius: 999px;
	font-size: 0.71875rem;
	font-weight: 600;
	line-height: 1.4;
}
.msl-account-contact-line {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	color: var(--msl-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}
.msl-root .msl-account-contact-line a { color: inherit; text-decoration: none; }
.msl-root .msl-account-contact-line a:hover { color: var(--msl-accent); text-decoration: underline; }
.msl-account-icon { color: var(--msl-accent); font-size: 1rem; }
.msl-account-edit { flex: 0 0 auto; }

/* Tabs = SFL pagination buttons, on a bordered bar like the filter row */
.msl-account-grid { display: block; margin: 0; }
.msl-account-main { min-width: 0; }
.msl-account-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 20px 0 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--msl-border);
}
.msl-root .msl-account-tabs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 16px;
	background: var(--msl-bg-card);
	color: var(--msl-text);
	border: 1px solid var(--msl-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.msl-root .msl-account-tabs a:hover {
	border-color: var(--msl-accent);
	color: var(--msl-accent);
}
.msl-root .msl-account-tabs a.is-active {
	background: transparent;
	border-color: var(--msl-accent);
	color: var(--msl-accent);
	font-weight: 700;
}

.msl-account-panel { padding: 0; }

/* Sections = SFL .sfl-dashboard-panel */
.msl-account-section {
	padding: 20px;
	background: var(--msl-bg-card);
	border: 1px solid var(--msl-border);
	border-radius: 12px;
}
.msl-tab-panel > .msl-account-section + .msl-account-section,
.msl-tab-panel > .msl-account-about-grid + .msl-account-section { margin-top: 18px; }
.msl-root .msl-account-section h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--msl-text);
}
.msl-section-icon { color: var(--msl-accent); font-size: 1.125rem; }

.msl-account-about-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.msl-account-about-grid .msl-account-half { min-width: 0; }

/* Field rows = SFL .sfl-detail-grid tiles (label above value) */
.msl-account-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.msl-account-fields > div {
	min-width: 0;
	padding: 11px 12px;
	background: var(--msl-bg-page);
	border: 1px solid var(--msl-border);
	border-radius: 8px;
}
.msl-account-fields span {
	display: block;
	margin-bottom: 4px;
	color: var(--msl-muted);
	font-size: 0.6875rem;
}
.msl-account-fields strong {
	display: block;
	min-width: 0;
	color: var(--msl-text);
	font-size: 0.8125rem;
	font-weight: 600;
	word-break: break-word;
}
.msl-root .msl-account-fields strong a { color: var(--msl-accent); text-decoration: none; }
.msl-root .msl-account-fields strong a:hover { text-decoration: underline; }

.msl-account-bio p {
	max-width: 720px;
	margin: 0;
	color: var(--msl-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* Social profile pills = SFL .sfl-tag, with an accent hover */
.msl-social-profile-links { display: flex; flex-wrap: wrap; gap: 8px; }
.msl-root .msl-social-profile-links a {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	background: var(--msl-bg-page);
	color: var(--msl-muted);
	border: 1px solid var(--msl-border);
	border-radius: 999px;
	font-size: 0.71875rem;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.msl-root .msl-social-profile-links a:hover {
	border-color: var(--msl-accent);
	color: var(--msl-accent);
	text-decoration: none;
}

/* Statistics = SFL .sfl-stats tiles (number on top, label beneath) */
.msl-account-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.msl-account-stat-grid > div {
	display: flex;
	flex-direction: column-reverse;
	padding: 14px 15px;
	background: var(--msl-bg-page);
	border: 1px solid var(--msl-border);
	border-radius: 10px;
}
.msl-account-stat-grid strong {
	display: block;
	color: var(--msl-text);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}
.msl-account-stat-grid span {
	display: block;
	margin-top: 4px;
	color: var(--msl-muted);
	font-size: 0.75rem;
}

/* Security actions = SFL .sfl-manage-list rows */
.msl-security-actions { display: grid; }
.msl-root .msl-security-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--msl-border);
	color: var(--msl-text);
	text-decoration: none;
	transition: color .15s ease;
}
.msl-security-action:last-child { border-bottom: 0; padding-bottom: 0; }
.msl-security-action strong { font-size: 0.875rem; font-weight: 600; }
.msl-security-action .msl-glyph { color: var(--msl-muted); font-size: 1.125rem; transition: color .15s ease, transform .15s ease; }
.msl-root .msl-security-action:hover,
.msl-root .msl-security-action:hover .msl-glyph { color: var(--msl-accent); }
.msl-root .msl-security-action:hover .msl-glyph { transform: translateX(2px); }

/* ==========================================================================
   Profile editor — /account/edit/
   Same panels + controls as the rest of the screen; heading block mirrors
   .sfl-library-heading, back link mirrors .sfl-back.
   ========================================================================== */

.msl-root .msl-back {
	display: inline-block;
	margin: 0 0 14px;
	color: var(--msl-accent);
	font-size: 0.8125rem;
	text-decoration: none;
}
.msl-root .msl-back:hover { color: var(--msl-accent); text-decoration: underline; }

.msl-page-heading { margin: 0 0 22px; }
.msl-root .msl-page-heading h1 {
	margin: 0 0 5px;
	font-size: 1.75rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--msl-text);
}
.msl-root .msl-page-heading p {
	margin: 0;
	color: var(--msl-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.msl-edit-form { gap: 18px; }
.msl-two-col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}
.msl-edit-form .msl-field { margin-bottom: 14px; }
.msl-edit-form .msl-account-section .msl-field:last-child { margin-bottom: 0; }
.msl-two-col .msl-field:nth-last-child(-n+2):nth-child(odd),
.msl-two-col .msl-field:last-child { margin-bottom: 0; }

.msl-root textarea.msl-input {
	height: auto;
	min-height: 120px;
	padding: 10px 12px;
	line-height: 1.6;
	resize: vertical;
}
.msl-root select.msl-input {
	-webkit-appearance: menulist;
	appearance: auto;
	padding-right: 8px;
	cursor: pointer;
}
.msl-root .msl-input[readonly] {
	color: var(--msl-muted);
	cursor: not-allowed;
}
.msl-root .msl-hint {
	display: block;
	margin-top: 6px;
	color: var(--msl-muted);
	font-size: 0.75rem;
	font-weight: 400;
}

.msl-edit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.msl-root .msl-edit-actions .msl-button { min-width: 140px; }

/* Hero actions: Edit Profile + (Admins/Editors) Admin Dashboard */
.msl-account-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	flex: 0 0 auto;
}

/* Photo + Gravatar import panels */
.msl-section-note {
	margin: -6px 0 16px;
	color: var(--msl-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}
.msl-check-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-bottom: 14px;
}
.msl-root .msl-replace-option {
	margin: 0 0 16px;
	color: var(--msl-muted);
	font-size: 0.8125rem;
}
.msl-gravatar-form { margin: 0 0 18px; }
.msl-gravatar-form .msl-edit-actions { margin: 0; }

.msl-photo-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.msl-photo-preview {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
}
.msl-photo-preview img,
.msl-photo-preview .msl-photo-img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--msl-border);
	background: var(--msl-bg-page);
}
.msl-photo-controls { flex: 1 1 auto; min-width: 0; }
.msl-root .msl-input.msl-file {
	height: auto;
	padding: 8px 10px;
	cursor: pointer;
}
.msl-root .msl-input.msl-file::file-selector-button {
	margin-right: 12px;
	padding: 6px 14px;
	background: var(--msl-bg-card);
	color: var(--msl-text);
	border: 1px solid var(--msl-border);
	border-radius: 8px;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.msl-account-about-grid { grid-template-columns: 1fr; }
	.msl-account-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.msl-two-col { grid-template-columns: 1fr; }
	.msl-two-col .msl-field:nth-last-child(-n+2):nth-child(odd) { margin-bottom: 14px; }
}

@media (max-width: 700px) {
	.msl-account-hero { align-items: flex-start; flex-direction: column; padding: 18px; }
	.msl-photo-row { flex-direction: column; }
	.msl-root .msl-account-identity-copy h1 { font-size: 1.5rem; }
	.msl-account-actions { width: 100%; justify-content: stretch; }
	.msl-root .msl-account-actions .msl-button { flex: 1 1 140px; }
	.msl-account-tabs { flex-wrap: nowrap; overflow-x: auto; }
	.msl-account-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.msl-account-stat-grid > div { padding: 13px; }
	.msl-account-stat-grid strong { font-size: 1.375rem; }
}

@media (max-width: 520px) {
	.msl-account-page { width: min(100% - 20px, 1280px); padding: 20px 0 32px; }
	.msl-card { padding: 24px 18px; }
	.msl-account-identity { align-items: flex-start; gap: 14px; }
	.msl-account-avatar-wrap { width: 64px; height: 64px; flex-basis: 64px; }
	.msl-account-section { padding: 16px; }
	.msl-account-fields { grid-template-columns: 1fr; }
	.msl-root .msl-edit-actions .msl-button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.msl-root *, .msl-root *::before, .msl-root *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* Two-step sign-in (1.2.4) */
.msl-root .msl-step-email[hidden],
.msl-root .msl-step-password[hidden] {
	display: none;
}

.msl-root .msl-field-error {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--msl-danger-text);
}

.msl-root .msl-field-error a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

.msl-root .msl-identity {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 12px;
	box-sizing: border-box;
	background: var(--msl-bg-page);
	color: var(--msl-text);
	border: 1px solid var(--msl-border);
	border-radius: 8px;
	font-size: 0.875rem;
}

.msl-root .msl-identity-value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msl-root .msl-identity .msl-change-email {
	flex: 0 0 auto;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--msl-accent);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

/* Intro copy above the sign-in form (privacy-policy notice). Sized and
   coloured like the rest of the card copy (.msl-switch) rather than as a
   one-off, so it reads as part of the same design, not a different screen. */
.msl-root .msl-intro {
	margin: 0 0 32px;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--msl-muted);
}
.msl-root .msl-intro a {
	color: var(--msl-accent);
	text-decoration: underline;
}