/**
 * Modcado — Roundcube login skin
 *
 * A child skin of Elastic. Everything Elastic ships is inherited; this file
 * loads its compiled stylesheet first and then restyles the login screen only,
 * so the mail client itself is untouched and keeps working exactly as before.
 *
 * Elastic's own dark theme is gated on `html.dark-mode`, a class the user
 * toggles inside the mail client. That toggle is left enabled — this skin has
 * no business removing a feature from the client — so the rules below are
 * written to hold either way: they carry an extra class over Elastic's dark
 * selectors and, where the two tie, they are loaded after the @import above.
 *
 * Nothing here is fetched from a third party: the two typefaces are the same
 * woff2 files the website serves, copied into ../fonts.
 */

@import url("../../elastic/styles/styles.min.css");

/* ---- typefaces ---------------------------------------------------------- */

@font-face {
	font-family: 'Chakra Petch';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/chakra-petch-400-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Chakra Petch';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/chakra-petch-500-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Chakra Petch';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/chakra-petch-600-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Chakra Petch';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/chakra-petch-700-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-700-latin.woff2') format('woff2');
}

/* ---- tokens ------------------------------------------------------------
   The subset of the site's design system this screen actually uses. Names
   and values are copied verbatim from the theme so the two stay legible as
   one system.                                                              */

:root {
	--mc-bg:          #0A0D12;
	--mc-bg-deep:     #06090D;
	--mc-panel:       #12171F;
	--mc-field:       #171D27;
	--mc-line:        rgb(255 255 255 / .08);
	--mc-line-2:      rgb(255 255 255 / .12);

	--mc-t-0:         #FFFFFF;
	--mc-t-1:         #E8EDF3;
	--mc-t-2:         #A5A5AB;
	--mc-t-3:         #8B96A3;
	--mc-t-5:         #777980;
	--mc-ink:         #070707;

	--mc-accent:      #04D3F7;
	--mc-accent-2:    #22D3EE;
	--mc-accent-hi:   #3FE0FF;
	--mc-accent-glow: #0BDBFF;
	--mc-danger:      #F87171;

	--mc-font: "Chakra Petch", Arial, Helvetica, "Liberation Sans", system-ui, sans-serif;
}

/* ---- the page ----------------------------------------------------------
   Elastic centres the login card itself; all this has to do is replace the
   ground it sits on. The two radial washes are the site's ambient glow —
   one cool bloom top-left, one tighter accent under the card.              */

/* the second selector is not redundant: Elastic's `html.dark-mode body` beats
   a bare `body.task-login`, and would repaint this ground grey for anyone who
   has the client's dark mode switched on. */
body.task-login,
html.dark-mode body.task-login {
	background: var(--mc-bg);
	background-image:
		radial-gradient(60vw 48vh at 18% -8%,  rgb(11 219 255 / .10), transparent 70%),
		radial-gradient(48vw 40vh at 82% 108%, rgb(15 118 110 / .14), transparent 70%);
	background-repeat: no-repeat;
	color: var(--mc-t-2);
	font-family: var(--mc-font);
}

body.task-login #layout-content,
body.task-login #layout > .content {
	background: transparent;
}

/* the wordmark, given room to breathe rather than Elastic's tight stack */
body.task-login #logo {
	max-width: 232px;
	width: 60%;
	height: auto;
	margin-bottom: 2.25rem;
}

/* ---- the card ---------------------------------------------------------- */

body.task-login #login-form {
	background: var(--mc-panel);
	border: 1px solid var(--mc-line);
	border-radius: 0;                      /* --mc-radius: the site is square */
	/* No drop shadow. A wide blur radius has to be rasterised rather than
	   composited, which paints visibly slowly; the card is separated from the
	   ground by its own value and hairline instead. */
	box-shadow: 0 1px 0 0 rgb(255 255 255 / .04) inset;
	padding: 2.5rem 2.25rem 2rem;
	max-width: 27rem;
	width: 100%;
}

/* a hairline of accent along the top edge, the site's card signature */
body.task-login #login-form {
	position: relative;
}

body.task-login #login-form::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgb(34 211 238 / .55) 22%,
		rgb(34 211 238 / .55) 78%,
		transparent
	);
}

/* ---- labels and fields -------------------------------------------------- */

body.task-login #login-form td.title {
	padding-bottom: .4rem;
}

body.task-login #login-form td.title label {
	color: var(--mc-t-3);
	font-family: var(--mc-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* td.input carries the .input-group class itself, so padding on it would sit
   inside the focus ring and leave it hanging below the field. Elastic makes
   each row a flex box, so the gap goes on the row instead.                  */
body.task-login #login-form td.input {
	padding-bottom: 0;
}

body.task-login #login-form tr {
	margin-bottom: 1.15rem;
}

body.task-login #login-form input.form-control {
	background: var(--mc-field);
	border: 1px solid var(--mc-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--mc-t-0);
	font-family: var(--mc-font);
	font-size: 15px;
	height: auto;
	padding: .8rem .9rem;
	width: 100%;
	transition: border-color .15s;
}

body.task-login #login-form input.form-control::placeholder {
	color: var(--mc-t-5);
}

body.task-login #login-form input.form-control:hover {
	border-color: var(--mc-line-2);
}

/* The focused field is marked by its border turning accent — no glow ring, so
   nothing has to be blurred and nothing boxes in the icon beside it. */
body.task-login #login-form input.form-control:focus {
	border-color: var(--mc-accent-2);
	outline: none;
}

/* Chrome paints its own pale-yellow ground on a remembered field. The inset
   shadow is the only way to cover it, and the absurd transition delay stops
   it flashing through on first paint. Same fix the website carries.        */
body.task-login input:-webkit-autofill,
body.task-login input:-webkit-autofill:hover,
body.task-login input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 100vmax var(--mc-field) inset !important;
	-webkit-text-fill-color: var(--mc-t-0) !important;
	caret-color: var(--mc-t-0);
	transition: background-color 8000s ease-in-out 0s;
}

/* ---- the icon prefix ---------------------------------------------------
   Elastic's script rewrites each field into a Bootstrap input-group: it
   collapses the <label> to zero width, moves its text into the placeholder,
   and injects an icon tile in front. The tile ships light grey (#F1F3F4),
   which is the one thing that reads as broken on a dark card — so style the
   transform rather than try to undo it. The collapsed labels are left alone;
   they are still there for screen readers.                                  */

body.task-login #login-form .input-group-text {
	background: var(--mc-bg-deep);
	border: 1px solid var(--mc-line);
	border-radius: 0;
	border-right: 0;
	color: var(--mc-accent-2);
	justify-content: center;
	min-width: 2.9rem;
}

/* The tile keeps its hairline when the field is focused — no accent border
   boxing the icon in. The focused field is marked by its own border alone. */
body.task-login #login-form .input-group:focus-within .input-group-text {
	color: var(--mc-accent-hi);
}

/* .input-group is a wrapping flex row, so a field at width:100% takes the
   whole line and drops below its own icon. Bootstrap's own sizing keeps the
   two on one row; width:1% is its idiom for "flex decides, not content".   */
body.task-login #login-form .input-group input.form-control {
	flex: 1 1 auto;
	min-width: 0;
	width: 1%;
}


/* ---- submit ------------------------------------------------------------- */

body.task-login #login-form button.mainaction,
body.task-login #login-form button#rcmloginsubmit {
	background: var(--mc-accent);
	border: 0;
	border-radius: 0;
	color: var(--mc-ink);
	font-family: var(--mc-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	margin-top: .35rem;
	padding: .9rem 1.25rem;
	text-transform: uppercase;
	width: 100%;
	transition: background-color .15s;
}

/* hover is a flat colour lift — the cyan glow this had was a 24px blur, the
   same slow-painting kind of shadow as the card's. */
body.task-login #login-form button.mainaction:hover {
	background: var(--mc-accent-hi);
}

body.task-login #login-form button.mainaction:focus-visible {
	outline: 2px solid var(--mc-accent-2);
	outline-offset: 3px;
}

/* ---- footer and messages ------------------------------------------------ */

body.task-login #login-footer {
	color: var(--mc-t-5);
	font-size: 12px;
	letter-spacing: .04em;
	margin-top: 1.6rem;
}

body.task-login #login-footer a {
	color: var(--mc-t-3);
}

body.task-login #messagestack div.message {
	border-radius: 0;
	font-family: var(--mc-font);
}

body.task-login #messagestack div.error {
	background: rgb(248 113 113 / .14);
	border: 1px solid rgb(248 113 113 / .38);
	color: var(--mc-danger);
}

/* ---- narrow screens ----------------------------------------------------- */

@media screen and (max-width: 480px) {
	body.task-login #login-form {
		padding: 1.75rem 1.25rem 1.5rem;
	}

	body.task-login #logo {
		max-width: 190px;
		margin-bottom: 1.75rem;
	}
}