/**
 * Twine login screen
 *
 * Two-pane login design (brand pane + form pane).
 * Adapted from design/twine.html. Loaded only on the login page
 * (index.php emits the <link> + Google Fonts), so it is fully
 * self-contained and does not affect the rest of the app.
 *
 * @package RosarioSIS
 * @subpackage Twine
 */

#twine-login {
	/* core palette - warm paper + electric twine blue */
	--ink: #161413;
	--ink-soft: #5b5550;
	--ink-faint: #938b83;
	--paper: #f4f1ea;
	--paper-2: #ebe6db;
	--card: #fffdf8;
	--line: #e2dccf;
	--line-strong: #d2c9b6;
	--blue: #0a48ff;
	--blue-deep: #0530b0;
	--blue-wash: #e8ecff;
	--clay: #d8552a;
	--r-sm: 10px;

	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

/* Neutralise the shared theme rules on the login page. */
body.login {
	overflow: hidden;
	padding: 0 !important;
}

#twine-login *,
#twine-login *::before,
#twine-login *::after {
	box-sizing: border-box;
}

#twine-login .tw-serif {
	font-family: 'Fraunces', Georgia, serif;
	font-optical-sizing: auto;
}

#twine-login a {
	color: inherit;
	text-decoration: none;
}

#twine-login ::selection {
	background: var(--blue);
	color: #fff;
}

/* ============ brand pane ============ */
#twine-login .tw-brandpane {
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, #06246e 0%, #0a48ff 55%, #3d6bff 100%);
	color: #fff;
	padding: 56px 64px;
	display: flex;
	flex-direction: column;
}

#twine-login .tw-brandpane::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .5;
	background-image:
		repeating-linear-gradient(58deg, transparent 0 26px, rgba(255, 255, 255, .06) 26px 27px),
		repeating-linear-gradient(-58deg, transparent 0 26px, rgba(255, 255, 255, .05) 26px 27px);
	-webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 30%, transparent 80%);
	        mask-image: radial-gradient(120% 90% at 20% 0%, #000 30%, transparent 80%);
}

#twine-login .tw-glow {
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(120, 160, 255, .55), transparent 60%);
	filter: blur(20px);
	bottom: -180px;
	right: -120px;
}

#twine-login .tw-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	font-size: 21px;
	letter-spacing: -.02em;
	position: relative;
	z-index: 2;
}

#twine-login .tw-logo .tw-knot {
	width: 34px;
	height: 34px;
	flex: none;
}

#twine-login .tw-lead {
	margin-top: auto;
	position: relative;
	z-index: 2;
}

#twine-login .tw-brandpane h1 {
	font-weight: 500;
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1.05;
	letter-spacing: -.02em;
	max-width: 13ch;
	margin: 0;
}

#twine-login .tw-brandpane h1 em {
	font-size: inherit;
	line-height: inherit;
	font-style: italic;
	color: #cdd8ff;
}

#twine-login .tw-brandpane p.tw-sub {
	margin-top: 22px;
	font-size: 16px;
	color: #d4ddff;
	max-width: 42ch;
	line-height: 1.55;
}

#twine-login .tw-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 34px;
	position: relative;
	z-index: 2;
}

#twine-login .tw-pill {
	font-size: 12.5px;
	font-weight: 500;
	padding: 7px 13px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #eaefff;
}

/* ============ form pane ============ */
#twine-login .tw-formpane {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	overflow-y: auto;
}

#twine-login .tw-formcard {
	width: 100%;
	max-width: 380px;
}

#twine-login .tw-langs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

#twine-login .tw-langs img {
	height: 24px;
	border-radius: 3px;
	display: block;
	opacity: .8;
	transition: opacity .15s, transform .12s;
}

#twine-login .tw-langs a:hover img {
	opacity: 1;
	transform: translateY(-1px);
}

#twine-login .tw-eyebrow {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 600;
}

#twine-login .tw-formcard h2 {
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -.02em;
	margin: 10px 0 4px;
}

#twine-login .tw-muted {
	color: var(--ink-soft);
	font-size: 14.5px;
	margin-bottom: 26px;
}

/* error / note messages */
#twine-login .tw-msg {
	border-radius: var(--r-sm);
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.45;
	margin-bottom: 18px;
}

#twine-login .tw-msg.error {
	background: #fbe6dd;
	color: #a3371a;
	border: 1px solid #f1c3b2;
}

#twine-login .tw-msg.note {
	background: var(--blue-wash);
	color: var(--blue-deep);
	border: 1px solid #c9d3ff;
}

#twine-login .tw-field {
	margin-bottom: 16px;
}

#twine-login .tw-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 7px;
	color: var(--ink);
}

#twine-login .tw-field input {
	width: 100%;
	padding: 13px 15px;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--card);
	font-size: 15px;
	color: var(--ink);
	font-family: inherit;
	transition: border-color .15s, box-shadow .15s;
}

#twine-login .tw-field input:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 4px var(--blue-wash);
}

#twine-login .tw-formrow {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 4px 0 24px;
	font-size: 13.5px;
}

#twine-login .tw-formrow a {
	color: var(--blue);
	font-weight: 600;
}

#twine-login .tw-btn-primary {
	display: block;
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: var(--r-sm);
	background: var(--blue);
	color: #fff;
	font-family: inherit;
	font-weight: 600;
	font-size: 15.5px;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: transform .12s, background .15s, box-shadow .2s;
	box-shadow: 0 8px 20px -8px rgba(10, 72, 255, .6);
}

#twine-login .tw-btn-primary:hover {
	background: var(--blue-deep);
	transform: translateY(-1px);
}

#twine-login .tw-btn-primary:active {
	transform: translateY(0);
}

#twine-login .tw-create {
	margin-top: 18px;
	text-align: center;
	font-size: 13.5px;
}

#twine-login .tw-create a {
	color: var(--blue);
	font-weight: 600;
}

#twine-login .tw-foot {
	margin-top: 28px;
	font-size: 13px;
	color: var(--ink-faint);
	text-align: center;
}

#twine-login .tw-foot b {
	color: var(--ink-soft);
	font-weight: 600;
}

/* About / disclaimer */
#twine-login .tw-about {
	margin-top: 22px;
	font-size: 12px;
	color: var(--ink-faint);
	line-height: 1.5;
}

#twine-login .tw-about summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ink-soft);
	list-style: none;
	text-align: center;
}

#twine-login .tw-about summary::-webkit-details-marker {
	display: none;
}

#twine-login .tw-about[open] summary {
	margin-bottom: 10px;
}

#twine-login .tw-about p {
	margin-bottom: 8px;
}

#twine-login .tw-about a {
	color: var(--blue);
}

/* ============ responsive ============ */
@media (max-width: 860px) {
	#twine-login {
		grid-template-columns: 1fr;
	}

	#twine-login .tw-brandpane {
		display: none;
	}
}