/* Authentication screens (login, password reset, two-step verification,
   session timeout, logout) - DiGi-ERP sign-in design: a red brand stage on the
   left (logo, tagline, orbiting modules, industries strip) and a light panel
   with a floating card that overlaps the stage edge. On the login form a
   "last used on this browser" panel sits to the right of the card.
   Light is the default (data-theme on <html>, set before first paint by
   auth_layout.inc; same 'jd-theme' key as the rest of the app).
   Fonts: Source Sans 3 + IBM Plex Mono (Google Fonts link in auth_layout.inc). */

:root {
	--paper: #F3F1F0; --card: #FFFFFF; --ink: #1E1B3F; --muted: #6A605C; --line: #E0DBD8; --field: #F8F7F6;
	--red: #EC2227; --red-deep: #C41E24; --red-soft: #FDE8E8; --navy: #1E1B3F; --navy-2: #2E2A5C;
	--ok: #2f7a52;
	--stage: #841518; --stage-2: #EC2227; --stage-ink: #FFFFFF; --stage-muted: #F6C9C8;
	--stage-line: rgba(255,255,255,.18); --stage-chip: rgba(255,255,255,.10); --arc: #6A605C;
	--shadow: 0 2px 0 rgba(30,27,63,.04), 0 24px 48px -20px rgba(30,27,63,.35), 0 70px 110px -50px rgba(132,21,24,.45);
	--f-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
	--f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
	color-scheme: light;
}
:root[data-theme="dark"] {
	--paper: #121019; --card: #1B1828; --ink: #F1EFF7; --muted: #A9A2B5; --line: #2C2840; --field: #151321;
	--red: #F2464B; --red-deep: #EC2227; --red-soft: #3A1A20; --navy: #3A3478; --navy-2: #4A4394;
	--ok: #7fc9a0;
	--stage: #3E0A0C; --stage-2: #A3191E;
	--shadow: 0 2px 0 rgba(0,0,0,.3), 0 24px 48px -20px rgba(0,0,0,.7), 0 70px 110px -50px rgba(0,0,0,.8);
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.auth {
	margin: 0; min-height: 100%;
	background: var(--paper); color: var(--ink);
	font-family: var(--f-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
.auth button, .auth input, .auth select { font: inherit; color: inherit; }
.auth a { color: var(--red); font-weight: 700; text-underline-offset: 3px; }
.auth a:hover { color: var(--red-deep); }
.auth :focus { outline: none; }
.auth :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.auth ::selection { background: color-mix(in srgb, var(--red) 25%, transparent); }
.auth svg.ico { width: 1em; height: 1em; flex: none; display: block; }
.auth-link {
	border: 0; background: none; padding: 0; cursor: pointer;
	color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

.auth-shell { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(430px, 1fr); min-height: 100vh; min-height: 100dvh; }

/* ---------- brand stage ---------- */
.auth-stage {
	position: relative; overflow: hidden; min-width: 0; color: var(--stage-ink);
	background: radial-gradient(90% 70% at 85% 10%, var(--stage-2) 0%, transparent 62%),
		linear-gradient(160deg, var(--stage-2) -10%, var(--stage) 55%);
	display: flex; flex-direction: column; gap: 20px;
	padding: 28px 130px 22px max(40px, env(safe-area-inset-left, 0px));
}
.auth-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.auth-arcs path { fill: none; stroke-linecap: round; stroke-dasharray: 2400; stroke-dashoffset: 2400; }
.auth-arcs .a1 { stroke: var(--arc); stroke-width: 46; opacity: .85; animation: auth-draw 2.2s cubic-bezier(.3,.7,.2,1) .2s forwards; }
.auth-arcs .a2 { stroke: #FFFFFF; stroke-width: 22; opacity: .12; animation: auth-draw 2.4s cubic-bezier(.3,.7,.2,1) .4s forwards; }
.auth-arcs .a3 { stroke: var(--red); stroke-width: 30; opacity: .9; animation: auth-draw 2.6s cubic-bezier(.3,.7,.2,1) .5s forwards; }
@keyframes auth-draw { to { stroke-dashoffset: 0; } }
.auth-dots {
	position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(120deg, #000 10%, transparent 60%); mask-image: linear-gradient(120deg, #000 10%, transparent 60%);
}
.auth-stage > :not(.auth-arcs):not(.auth-dots) { position: relative; z-index: 1; }

.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .chip { background: #FFFFFF; border-radius: 10px; padding: 5px 8px; display: flex; align-items: center; box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); }
.auth-brand .chip img { height: 24px; width: auto; display: block; }
.auth-brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.auth-brand-txt b { font-weight: 900; font-size: 17px; letter-spacing: -.01em; }
.auth-brand-txt span { font-family: var(--f-mono); font-size: 10.5px; color: var(--stage-muted); letter-spacing: .06em; }

.auth-stage-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.auth-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.auth-copy p { margin: 0; max-width: 40ch; color: var(--stage-muted); font-size: clamp(13.5px, 1.1vw, 16px); }

.auth-detail {
	background: rgba(30,10,12,.32); border: 1px solid var(--stage-line); border-radius: 14px;
	padding: 12px 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.auth-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-detail h4 { margin: 0; font-weight: 800; font-size: clamp(14.5px, 1.2vw, 18px); letter-spacing: -.01em; }
.auth-detail .count { font-family: var(--f-mono); font-size: 11px; color: var(--stage-muted); white-space: nowrap; }
.auth-detail .for { font-family: var(--f-mono); font-size: 10.5px; color: #FFD3D2; letter-spacing: .04em; margin-top: 2px; }
.auth-detail ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.auth-detail li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.35; }
.auth-detail li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 2px; background: #FFFFFF; transform: rotate(45deg); }
.auth-fade { animation: auth-swap .55s cubic-bezier(.2,.7,.2,1) both; }
.auth-detail li:nth-child(2) { animation-delay: .07s; }
.auth-detail li:nth-child(3) { animation-delay: .14s; }
@keyframes auth-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.auth-detail .bar { height: 3px; background: var(--stage-line); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.auth-detail .bar i { display: block; height: 100%; width: 0; background: #FFFFFF; }
.auth-detail .bar i.run { animation: auth-fill var(--dur, 4s) linear forwards; }
@keyframes auth-fill { to { width: 100%; } }

/* module orbit (nodes are added by auth.js) */
.auth-orbit { width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; position: relative; }
.auth-orbit .track { position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed var(--stage-line); }
.auth-orbit .track.inner { inset: 29%; border-style: solid; border-color: rgba(255,255,255,.22); }
.auth-orbit .ring { position: absolute; inset: 0; animation: auth-spin 80s linear infinite; }
.auth-orbit .node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.auth-orbit .node > button {
	position: absolute; transform: translate(-50%, -50%); width: var(--n, 58px); height: var(--n, 58px); border-radius: 50%;
	border: 1px solid var(--stage-line); background: var(--stage-chip); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: #FFFFFF; display: grid; place-items: center; cursor: pointer; padding: 0;
	animation: auth-spin 80s linear infinite reverse;
	transition: background .35s, color .35s, border-color .35s, box-shadow .35s, scale .35s;
}
.auth-orbit .node > button svg { width: 44%; height: 44%; }
.auth-orbit .node > button.on {
	background: #FFFFFF; color: var(--red-deep); border-color: #FFFFFF; scale: 1.14;
	box-shadow: 0 0 0 7px rgba(255,255,255,.18), 0 0 36px rgba(255,255,255,.45);
}
.auth-orbit .node > button:hover { border-color: #FFFFFF; }
.auth-orbit .hub {
	position: absolute; inset: 34%; border-radius: 50%; background: #FFFFFF;
	display: grid; place-items: center; box-shadow: 0 24px 60px -12px rgba(0,0,0,.55);
}
.auth-orbit .hub img { width: 64%; height: auto; }
.auth-orbit .hub::before, .auth-orbit .hub::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.55); animation: auth-pulse 3s ease-out infinite;
}
.auth-orbit .hub::after { animation-delay: 1.5s; }
@keyframes auth-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.85); opacity: 0; } }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-orbit .beam {
	position: absolute; left: 50%; top: 50%; height: 2px; transform-origin: 0 50%; pointer-events: none;
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9));
}

/* industries marquee */
.auth-industries {
	border-top: 1px solid var(--stage-line); padding-top: 10px; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.auth-industries .track-x { display: flex; gap: 10px; width: max-content; animation: auth-marq 38s linear infinite; min-height: 28px; }
.auth-industries .track-x span {
	font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
	border: 1px solid var(--stage-line); background: rgba(255,255,255,.06);
}
.auth-industries .track-x span b { color: #FFD3D2; font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; margin-right: 6px; }
@keyframes auth-marq { to { transform: translateX(-50%); } }

/* ---------- sign-in side ---------- */
.auth-side {
	position: relative; min-width: 0; display: flex; flex-direction: column; gap: 20px;
	padding: 22px max(32px, env(safe-area-inset-right, 0px)) 18px 32px;
}
.auth-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.auth-secure { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.auth-secure.insecure { color: var(--red); }
.auth-theme {
	width: 34px; height: 34px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
	border: 1px solid var(--line); background: var(--card); border-radius: 50%; color: var(--ink); font-size: 15px;
	transition: transform .3s;
}
.auth-theme:hover { transform: rotate(-20deg); }
.auth-theme .i-sun { display: block; }
.auth-theme .i-moon { display: none; }
:root[data-theme="light"] .auth-theme .i-sun { display: none; }
:root[data-theme="light"] .auth-theme .i-moon { display: block; }

.auth-mid { flex: 1; display: flex; align-items: center; gap: 24px; }

/* the floating card = the page's <main> */
.auth-main {
	position: relative; z-index: 3; flex: none; width: min(100%, 410px); margin-left: -150px;
	background: var(--card); border: 1px solid var(--line); border-radius: 22px;
	padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow);
	display: flex; flex-direction: column; gap: 24px;
	animation: auth-enter 1s cubic-bezier(.2,.7,.2,1) both;
}
/* enters once, then stays still (the mock-up bobbed forever; a moving form is hard to click) */
@keyframes auth-enter { from { opacity: 0; transform: translate(40px, 0) rotate(1.5deg); } to { opacity: 1; transform: none; } }
.auth-main::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
	background: linear-gradient(140deg, var(--red), transparent 35%, transparent 70%, var(--muted));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.auth-main::after {
	content: ""; position: absolute; left: 14%; right: 14%; bottom: -38px; height: 24px; border-radius: 50%; z-index: -1;
	background: rgba(30,27,63,.22); filter: blur(16px);
}
.auth-form.shake { animation: auth-shake .4s; }
@keyframes auth-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.auth-main > #_page_body, .auth-main form { margin: 0; }

.auth-form, .auth-panel-col { width: 100%; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.auth-back { font-size: 14px; display: flex; align-items: center; gap: 6px; text-decoration: none; align-self: flex-start; }
.auth-head { display: flex; flex-direction: column; margin-bottom: 8px; }
.auth-kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.auth-title {
	margin: 8px 0 10px; font-weight: 900; font-size: clamp(32px, 3vw, 44px); line-height: 1; letter-spacing: -.03em;
	text-wrap: balance;
}
.auth-title em { font-style: italic; color: var(--red); }
.auth-sub { color: var(--muted); text-wrap: pretty; font-size: 14px; line-height: 1.45; }
.auth-note { font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- fields ---------- */
.auth .field { position: relative; }
.auth .field > label {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red);
}
.auth .field > label a { font-size: 13px; letter-spacing: 0; text-transform: none; }
.auth .input {
	width: 100%; min-height: 44px; padding: 10px 14px; font-size: 15px; color: var(--ink); caret-color: var(--red);
	background: var(--field); border: 1.5px solid var(--line); border-radius: 12px; appearance: none;
	transition: border-color .2s, box-shadow .2s;
}
.auth select.input { cursor: pointer; }
.auth .input:focus, .auth .input:focus-visible {
	border-color: var(--navy-2); outline: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--navy-2) 14%, transparent);
}
.auth .input:disabled { opacity: .5; cursor: not-allowed; }
.auth .input.is-error { border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 14%, transparent); }

/* floating label (login form): label inside the box, moves up on focus / value */
.auth .field.float > label {
	position: absolute; z-index: 1; left: 15px; top: 15px; margin: 0; pointer-events: none;
	font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted);
	transition: all .18s ease;
}
.auth .field.float .input { min-height: 56px; padding: 22px 16px 8px; }
.auth .field.float:has(.input:focus) > label,
.auth .field.float:has(.input:not(:placeholder-shown)) > label {
	top: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red);
}
/* browser-filled (saved password): Chrome keeps :placeholder-shown until the first click, so the
   label would sit on the dots. Separate rules - an unknown pseudo-class drops a whole selector list. */
.auth .field.float:has(.input:-webkit-autofill) > label {
	top: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red);
}
.auth .field.float:has(.input:autofill) > label {
	top: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red);
}
/* keep the field colour instead of the browser's blue autofill fill */
.auth .input:-webkit-autofill {
	-webkit-text-fill-color: var(--ink); caret-color: var(--red);
	box-shadow: inset 0 0 0 100px var(--field); transition: background-color 9999s;
}
.auth .input:-webkit-autofill:focus {
	box-shadow: inset 0 0 0 100px var(--field), 0 0 0 4px color-mix(in srgb, var(--navy-2) 14%, transparent);
}
.auth .field.float .auth-combo-input::placeholder { color: transparent; }
.auth .field.float .auth-combo-input:focus::placeholder { color: var(--muted); }

/* password show/hide */
.auth-pw { position: relative; }
.auth-pw .input { padding-right: 46px; }
.auth-pw-toggle {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px;
	display: grid; place-items: center; padding: 0; cursor: pointer; border: 0; border-radius: 10px;
	background: transparent; color: var(--muted); font-size: 18px;
}
.auth-pw-toggle:hover, .auth-pw-toggle[aria-pressed="true"] { color: var(--red); }
.auth-pw-toggle:disabled { opacity: .45; cursor: not-allowed; }
.auth-pw .input::-ms-reveal { display: none; }

/* searchable company picker (auth.js enhances select[data-searchable]) */
.auth-combo { position: relative; }
.auth-combo-native { display: none; }
.auth-combo .auth-combo-input { padding-right: 44px; text-overflow: ellipsis; }
.auth-combo-input::placeholder { color: var(--muted); }
.auth-combo-caret {
	position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 36px; height: 36px;
	display: grid; place-items: center; cursor: pointer; color: var(--muted); font-size: 16px;
}
.auth-combo.is-open .auth-combo-caret { color: var(--red); transform: translateY(-50%) rotate(180deg); }
.auth-combo-list {
	position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
	max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
	background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.auth-combo-list li {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 9px 12px; border-radius: 10px; font-size: 15px; cursor: pointer;
}
.auth-combo-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-combo-list li .ico { color: var(--red); }
.auth-combo-list li.is-active { background: var(--red-soft); }
.auth-combo-list li[aria-selected="true"] { color: var(--red); font-weight: 700; }
.auth-combo-list li.auth-combo-empty { cursor: default; color: var(--muted); font-size: 14px; }

.auth-opts { display: flex; justify-content: flex-end; font-size: 13.5px; }

/* ---------- buttons (roles from themes/default/brand.css; sign-in geometry here) ---------- */
.auth .btn { min-height: 42px; padding: 0 16px; font-size: 15px; font-weight: 700; border-radius: 12px; }
.auth .btn.btn-primary {
	position: relative; overflow: hidden; isolation: isolate;
	color: #FFFFFF; background: var(--navy); border-color: transparent;
	box-shadow: 0 14px 28px -14px rgba(30,27,63,.7);
}
.auth .btn.btn-primary::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, var(--red), var(--stage));
	transform: translateX(-101%); transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.auth .btn.btn-primary:not(:disabled):hover, .auth .btn.btn-primary:focus-visible { color: #FFFFFF; background: var(--navy); }
.auth .btn.btn-primary:not(:disabled):hover::before, .auth .btn.btn-primary:focus-visible::before { transform: none; }
.auth .btn.btn-primary:not(:disabled):active { transform: scale(.985); }
.auth .btn.btn-primary:disabled { color: var(--muted); background: var(--line); box-shadow: none; }
.auth .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* the login button: label left, arrow in a circle right */
.auth .btn.auth-go {
	min-height: 50px; justify-content: space-between; padding: 0 9px 0 18px; font-size: 15.5px; font-weight: 800;
}
.auth .btn.auth-go:not(:disabled):hover { box-shadow: 0 20px 32px -14px rgba(236,34,39,.55); }
.auth-go .arrow {
	width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.16);
	display: grid; place-items: center; font-size: 16px; transition: transform .3s;
}
.auth-go:not(:disabled):hover .arrow { transform: translateX(4px) rotate(-45deg); }

.auth-tries { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.auth-tries > span:last-child { white-space: nowrap; }
.auth-tries .pips { display: flex; gap: 5px; }
.auth-tries .pips i { width: 12px; height: 5px; border-radius: 3px; background: var(--red); }
.auth-tries .pips i.used { background: var(--line); }

/* ---------- "last used on this browser" (login form, right of the card) ---------- */
.auth-last { flex: 1; min-width: 0; max-width: 320px; display: flex; flex-direction: column; gap: 10px; animation: auth-swap .6s .3s both; }
.auth-last[hidden] { display: none; }
.auth-last-kicker { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.auth-last-co { display: flex; align-items: center; gap: 12px; }
.auth-last-co .badge {
	display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px;
	background: var(--red-soft); color: var(--red); font-weight: 900; font-size: 14px;
}
.auth-last-co b { font-weight: 800; font-size: 16px; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.auth-last dl { margin: 0; border-top: 1px solid var(--line); }
.auth-last dl > div { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.auth-last dt { font-size: 13px; color: var(--muted); white-space: nowrap; }
.auth-last dd { margin: 0; min-width: 0; font-family: var(--f-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.auth-last p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- alerts / panels (reset, verification, timeout) ---------- */
.auth-alert {
	border-left: 3px solid var(--red); border-radius: 10px; padding: 10px 14px;
	background: var(--field); display: flex; flex-direction: column; gap: 2px;
}
.auth-alert.danger { border-left-color: var(--red); background: var(--red-soft); }
.auth-alert.success { border-left-color: var(--ok); }
.auth-alert-title { font-size: 15px; font-weight: 700; }
.auth-alert-body { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

.auth-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--field); display: flex; flex-direction: column; overflow: hidden; }
.auth-panel-head { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-panel-label, .auth-kv dt {
	font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted); white-space: nowrap;
}
.auth-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--red-soft); color: var(--red); }
.auth-kv { display: grid; grid-template-columns: auto 1fr; margin: 0; font-size: 14px; }
.auth-kv dt, .auth-kv dd { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.auth-kv dd { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.auth-kv dt:nth-last-of-type(1), .auth-kv dd:last-of-type { border-bottom: 0; }
.auth-kv.flush { border-top: 1px solid var(--line); }
.auth-kv.flush dt, .auth-kv.flush dd { padding: 8px 0; }
.auth-kv.flush dt:nth-last-of-type(1), .auth-kv.flush dd:last-of-type { border-bottom: 1px solid var(--line); }

/* session-timeout: the card is already the floating .auth-main */
.auth-card { display: flex; flex-direction: column; gap: 16px; }
.auth-card-head { display: flex; align-items: center; gap: 8px; }
.auth-card-head .ico { font-size: 20px; color: var(--red); }
.auth-card-title { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.auth-card-head .auth-logo { height: 22px; margin-left: auto; }
.auth-card-body { display: flex; flex-direction: column; gap: 14px; }

.auth details summary { cursor: pointer; color: var(--muted); }

/* ---------- footer ---------- */
.auth-foot {
	display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
	font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.auth-foot a { color: inherit; font-weight: 400; text-decoration: none; }
.auth-foot a:hover { color: var(--red); }

/* ---------- responsive: always one screen, no scrolling ----------
   The shell is exactly the viewport height; type, the orbit, the card and its
   fields scale with the height (vh), and parts drop out on short screens.
   Under 560px tall nothing can fit, so the page is allowed to scroll. */
@media (min-height: 560px) {
	.auth-shell { height: 100vh; height: 100dvh; min-height: 0; }
	.auth-stage, .auth-side { min-height: 0; }
}
.auth-stage { padding-top: clamp(12px, 3vh, 28px); padding-bottom: clamp(10px, 2.2vh, 22px); gap: clamp(8px, 1.6vh, 16px); }
.auth-stage-grid { min-height: 0; }
.auth-copy { gap: clamp(8px, 1.6vh, 14px); }
.auth-orbit { width: min(100%, 400px, 50vh); }
.auth-side { padding-top: clamp(10px, 2.4vh, 22px); padding-bottom: clamp(8px, 2vh, 18px); gap: clamp(6px, 1.6vh, 16px); }
.auth-main { padding: clamp(16px, 3.4vh, 32px) clamp(18px, 2.4vw, 32px); gap: clamp(10px, 2vh, 18px); }
.auth-form { gap: clamp(7px, 1.3vh, 12px); }
.auth-head { margin-bottom: clamp(0px, .6vh, 6px); }
.auth-title { font-size: clamp(22px, min(2.4vw, 4.4vh), 34px); margin: clamp(3px, .6vh, 6px) 0 clamp(4px, .8vh, 8px); }
.auth .field.float .input { min-height: 0; padding: clamp(16px, 2.2vh, 19px) 14px clamp(4px, .7vh, 6px); }
.auth .field.float > label { top: 50%; transform: translateY(-50%); }
.auth .field.float:has(.input:focus) > label,
.auth .field.float:has(.input:not(:placeholder-shown)) > label { top: clamp(3px, .6vh, 6px); transform: none; }
.auth .field.float:has(.input:-webkit-autofill) > label { top: clamp(3px, .6vh, 6px); transform: none; }
.auth .field.float:has(.input:autofill) > label { top: clamp(3px, .6vh, 6px); transform: none; }
.auth .btn.auth-go { min-height: clamp(40px, 5.4vh, 50px); }
@media (max-height: 620px) {
	.auth-copy p, .auth-detail .for { display: none; }
	.auth-sub { font-size: 13px; }
}
@media (max-height: 520px) {
	.auth-detail ul { display: none; }
}

/* "last used": company name next to the badge */
.auth-last-co > div { min-width: 0; display: flex; flex-direction: column; }

@media (max-width: 1500px) {
	.auth-foot .hide-sm { display: none; }
}
@media (max-width: 1280px) {
	.auth-foot a[target] { display: none; }
	.auth-stage-grid { gap: 16px; }
	.auth-orbit { width: min(100%, 340px, 46vh); }
	.auth-stage { padding-right: 110px; padding-left: max(28px, env(safe-area-inset-left, 0px)); }
	.auth-main { margin-left: -110px; }
	/* still beside the card, narrower */
	.auth-mid { gap: 18px; }
	.auth-last { max-width: 200px; gap: 8px; }
	.auth-last-co { gap: 10px; }
	.auth-last-co .badge { width: 32px; height: 32px; font-size: 12px; border-radius: 9px; }
	.auth-last-co b { font-size: 14px; }
	.auth-last dl > div { padding: 6px 0; }
	.auth-last dt { font-size: 12px; }
	.auth-last dd, .auth-last p { font-size: 12px; }
}
@media (max-width: 1220px) {
	/* no room beside the card: under it - company + "Forget" link, then the three facts side by side */
	.auth-mid { flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(10px, 2vh, 18px); }
	.auth-last {
		flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
		max-width: none; width: min(100%, 410px); align-self: flex-end; padding: 0 6px;
	}
	.auth-last-kicker { display: none; }
	.auth-last-co { min-width: 0; gap: 10px; }
	.auth-last-co .badge { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
	.auth-last-co b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.auth-last p { grid-column: 2; grid-row: 1; font-size: 0; } /* only the "Forget" link stays */
	.auth-last p .auth-link { font-size: 12.5px; }
	.auth-last dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 6px; }
	.auth-last dl > div { padding: 0; border: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; min-width: 0; }
	.auth-last dt { font-size: 11.5px; }
	.auth-last dd { font-size: 11.5px; text-align: left; max-width: 100%; }
}
@media (max-width: 1000px) {
	.auth-shell { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
	/* the sign-in form comes first: the stage is a header - brand (+ theme button) left, module orbit right */
	.auth-stage {
		flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px;
		padding: 16px max(16px, env(safe-area-inset-right, 0px)) clamp(56px, 7.5vh, 76px) max(16px, env(safe-area-inset-left, 0px));
	}
	.auth-brand { flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
	.auth-brand-txt span { font-size: 10.5px; }
	.auth-stage-grid { flex: none; display: block; }
	.auth-copy, .auth-industries { display: none; }
	.auth-orbit { width: min(44vw, 24vh, 230px); margin: 0; }
	.auth-side { position: static; }
	.auth-top { position: absolute; z-index: 4; top: 112px; left: max(16px, env(safe-area-inset-left, 0px)); justify-content: flex-start; }
	.auth-secure { color: var(--stage-muted); }
	.auth-theme { width: 36px; height: 36px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #FFFFFF; }
	.auth-side { padding: 0 max(16px, env(safe-area-inset-right, 0px)) clamp(10px, 2vh, 20px) max(16px, env(safe-area-inset-left, 0px)); gap: clamp(8px, 1.6vh, 16px); }
	.auth-mid { justify-content: flex-start; align-items: center; }
	.auth-main { margin: calc(-1 * clamp(52px, 7.5vh, 70px)) auto 0; width: min(100%, 520px); }
	.auth-last { margin: 0 auto; width: min(100%, 520px); padding: 0 4px; }
	.auth-foot { justify-content: center; }
}
@media (max-width: 440px) {
	.auth-brand-txt span { display: none; }
	.auth-top { top: 96px; }
}
@media (max-width: 560px) {
	.auth-main { border-radius: 22px; }
	.auth-secure { display: none; }
}
@media (max-width: 1000px) and (max-height: 760px) {
	.auth-sub { display: none; }
}
@media (max-width: 1000px) and (max-height: 900px) {
	.auth-tries { display: none; }
}
@media (min-width: 1001px) and (max-height: 740px) {
	.auth-tries { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.auth *, .auth *::before, .auth *::after { animation: none !important; transition: none !important; }
	.auth-arcs path { stroke-dashoffset: 0 !important; }
}
/* password reset: the "after submit" table repeats the intro text, so it only shows on tall screens */
@media (max-height: 1000px) {
	.auth-main .auth-panel-col { display: none; }
}
@media (max-width: 1000px) and (max-height: 700px) {
	.auth-orbit { width: min(44vw, 20vh); }
}