
.tssd-auth {
	max-width: 420px;
	margin: 1em auto;
	padding: 18px 20px;
	border: 1px solid var(--sd-gold);
	border-radius: var(--sd-radius);
	background-color: var(--sd-surface-2);
	font-family: var(--sd-font);
}
.tssd-auth__form {
	margin: 0;
}
.tssd-auth__field {
	margin: 0 0 12px;
}
.tssd-auth__field label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}
.tssd-auth__field input[type="text"],
.tssd-auth__field input[type="email"],
.tssd-auth__field input[type="password"],
.tssd-auth__field input[type="date"],
.tssd-auth__field select {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--sd-field-line);
	border-radius: var(--sd-radius-sm);
	background: var(--sd-field-bg);
}
.tssd-auth__field .description {
	display: block;
	margin-top: 4px;
	font-size: var(--sd-fs-sm);
	font-weight: 400;
	color: var(--sd-muted);
}

.tssd-auth--register {
	max-width: none;
}
.tssd-auth--register .tssd-auth__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(240px, 1fr));
	gap: 0 28px;
	align-items: start;
}
/* Grouping/notice/action rows span the full width, not a single column. */
.tssd-auth--register .tssd-auth__optional,
.tssd-auth--register .tssd-auth__actions,
.tssd-auth--register .tssd-auth__links,
.tssd-auth--register .tssd-auth__notice,
.tssd-auth--register .tssd-auth__field--check {
	grid-column: 1 / -1;
}

.tssd-auth--register .tssd-auth__field--full {
	grid-column: 1 / -1;
}
.tssd-auth--register .tssd-auth__optional {
	display: grid;
	grid-template-columns: repeat(2, minmax(240px, 1fr));
	gap: 0 28px;
}
.tssd-auth--register .tssd-auth__optional legend {
	grid-column: 1 / -1;
}
@media (max-width: 640px) {
	.tssd-auth--register .tssd-auth__form,
	.tssd-auth--register .tssd-auth__optional {
		grid-template-columns: 1fr;
	}
}

.tssd-auth__optional {
	margin: 4px 0 14px;
	padding: 10px 14px 2px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
}
.tssd-auth__optional legend {
	padding: 0 6px;
	font-size: var(--sd-fs-sm);
	font-weight: 700;
	color: var(--sd-gold-dark);
}

.tssd-auth__field--invalid input,
.tssd-auth__field--invalid select,
.tssd-field--invalid input,
.tssd-field--invalid select {
	border-color: var(--sd-warn);
	background: var(--sd-warn-bg);
}
.tssd-field-error {
	display: block;
	margin-top: 4px;
	color: var(--sd-warn);
	font-size: var(--sd-fs-sm);
	font-weight: 400;
}
.tssd-auth__field--check label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
}
.tssd-auth__field--check input {
	margin-top: 3px;
}
.tssd-auth__actions {
	margin: 16px 0 0;
}
.tssd-auth__submit {

	width: 100%;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--sd-gold-line);
	border-radius: var(--sd-radius);
	background-color: var(--sd-gold);
	color: var(--sd-gold-ink);
	font-weight: var(--sd-btn-weight);
	line-height: 1.2;
	cursor: pointer;
}
.tssd-auth__submit:hover,
.tssd-auth__submit:focus {
	background-color: var(--sd-gold-dark);
	color: var(--sd-gold-ink);
}
.tssd-auth__links {
	margin: 14px 0 0;
	font-size: 0.92em;
}
.tssd-auth__notice {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: var(--sd-radius);
	border-left: 4px solid var(--sd-muted);
	background: var(--sd-surface-2);
}
.tssd-auth__notice--ok {
	border-left-color: var(--sd-ok);
	background: var(--sd-ok-bg);
}
.tssd-auth__notice--err {
	border-left-color: var(--sd-warn);
	background: var(--sd-warn-bg);
}
.tssd-auth__notice--info {
	border-left-color: #1a6ea7;
	background: #e8f1f8;
}
.tssd-auth__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tssd-verify-banner {
	background: var(--sd-warn-bg);
	border-bottom: 2px solid var(--sd-warn);
	font-family: var(--sd-font);
	font-size: 0.95em;
}
.tssd-verify-banner--ok {
	background: var(--sd-ok-bg);
	border-bottom-color: var(--sd-ok);
}
.tssd-verify-banner__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}
.tssd-verify-banner__text {
	flex: 1 1 320px;
	color: #5a1a1a;
}
.tssd-verify-banner--ok .tssd-verify-banner__text {
	color: #14532d;
}
.tssd-verify-banner__msg {
	font-weight: 700;
}
.tssd-verify-banner__msg--ok { color: #14532d; }
.tssd-verify-banner__msg--err { color: var(--sd-warn); }
.tssd-verify-banner__form {
	margin: 0;
}
.tssd-verify-banner__btn {

	padding: 8px 14px;
	border: 1px solid var(--sd-warn);
	border-radius: var(--sd-radius);
	background: var(--sd-white);
	color: var(--sd-warn);
	font-weight: var(--sd-btn-weight);
	line-height: 1.2;
	cursor: pointer;
}
.tssd-verify-banner__btn:hover,
.tssd-verify-banner__btn:focus {
	background: var(--sd-warn);
	/* sd324-allow: white-button-ink — SD324 §3.8, the ONE button allowed white ink:
	   on the filled --sd-warn (#b32d2e) dark ink reaches only ≈3.4:1, white ≈6.3:1. */
	color: #fff;
}

html[data-theme="dark"] .tssd-auth__field input[type="text"],
html[data-theme="dark"] .tssd-auth__field input[type="email"],
html[data-theme="dark"] .tssd-auth__field input[type="password"],
html[data-theme="dark"] .tssd-auth__field input[type="date"],
html[data-theme="dark"] .tssd-auth__field select { color: var(--sd-text); }
html[data-theme="dark"] .tssd-auth__optional { border-color: #6a5c33; }
html[data-theme="dark"] .tssd-field-error,
html[data-theme="dark"] .tssd-verify-banner__msg--err { color: #f0a9a9; }
html[data-theme="dark"] .tssd-auth__notice--info { background: #16202b; border-left-color: #4a86d8; }
html[data-theme="dark"] .tssd-verify-banner__text { color: #f0a9a9; }
html[data-theme="dark"] .tssd-verify-banner--ok .tssd-verify-banner__text,
html[data-theme="dark"] .tssd-verify-banner__msg--ok { color: #9ad9ab; }
/* sd324-allow: white-button-ink — same danger exception in dark (SD324 §3.8). */
html[data-theme="dark"] .tssd-verify-banner__btn:hover,
html[data-theme="dark"] .tssd-verify-banner__btn:focus { color: #fff; }

.tssd-auth--register .tssd-auth__pwrules {
	margin: 0 0 1.1em;
	padding: 12px 14px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-surface-2);
	font-size: var(--sd-fs-base);
}
.tssd-auth__pwrules-title {
	margin: 0 0 .5em;
	font-weight: 700;
}
.tssd-auth__pwrules-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tssd-auth__pwrule {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 .35em;
	line-height: 1.4;
}
/* Der Haken ist ein Zustand, kein Schmuck: Form UND Farbe aendern sich, damit er
   auch ohne Farbunterscheidung zu erkennen ist. */
.tssd-auth__pwrule-tick {
	position: relative;
	flex: 0 0 auto;
	width: 1.35em;
	height: 1.35em;
	border: 2px solid var(--sd-field-line);
	border-radius: var(--sd-radius-pill);
	background: var(--sd-field-bg);
}

.tssd-auth__pwrule[data-ok="1"] .tssd-auth__pwrule-tick {
	border-color: var(--sd-ok);
	background: var(--sd-ok-bg);
}
.tssd-auth__pwrule[data-ok="1"] .tssd-auth__pwrule-tick::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 47%;
	width: .34em;
	height: .62em;
	transform: translate(-50%, -55%) rotate(45deg);
	border: solid var(--sd-ok-ink);
	border-width: 0 .16em .16em 0;
}
.tssd-auth__pwrule[data-ok="1"] .tssd-auth__pwrule-text {
	color: var(--sd-ok-ink);
	font-weight: 700;
}
.tssd-auth__pwrules-note {
	margin: .6em 0 0;
	font-size: var(--sd-fs-sm);
	color: var(--sd-muted);
}
