.tssd-share { margin: 0 0 1.4em; }

/* ── A2: the card (main component on /sudoku-weiterempfehlen/) ───────────────── */

.tssd-share__head {
	display: flex; align-items: center; gap: .5em;
	margin: 0 0 .6em; padding: .35em 0;
	border-top: 1px solid var(--sd-gold);
	border-bottom: 1px solid var(--sd-gold);
	font-family: var(--sd-font-brand);
	font-size: var(--sd-fs-lg);
	font-weight: 700;
}
.tssd-share__head-icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; color: var(--sd-gold-dark); }
.tssd-share__intro { margin: 0 0 1em; }

/* ── Buttons (both layouts) ──────────────────────────────────────────────────── */
.tssd-share__actions { display: flex; flex-wrap: wrap; gap: .5em; }
.tssd-share__ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
/* .sd-btn already carries the focus ring, radius and hover — nothing to redefine. */
.tssd-share__btn { text-decoration: none; }

/* Exactly ONE face of the primary slot is in the flow — either the share sheet exists on
   this device or it does not, and „Link kopieren" takes its place (see capability_probe()
   in class-tssd-share.php). The rule is needed because .sd-btn sets `display: inline-flex`,
   which would otherwise out-specify the UA rule for [hidden]. */
.tssd-share__btn[hidden] { display: none; }

@media (max-width: 639px) {
	.tssd-share--card .tssd-share__actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ── A1: the compact bar (sits under the 540 px game board) ──────────────────── */
.tssd-share--bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: .4em .6em;
	max-width: 540px;            /* = .tssd-game max-width, so it lines up with the grid */
	margin: 1em auto 1.4em;
	padding: .6em .7em;
	background: var(--sd-surface-2);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
}
.tssd-share--bar .tssd-share__label { font-size: var(--sd-fs-sm); font-weight: 700; color: var(--sd-muted); }
.tssd-share--bar .tssd-share__actions { gap: .35em; }

.tssd-share--bar .tssd-share__btn:not(.sd-btn--primary) span {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.tssd-share--bar .tssd-share__btn:not(.sd-btn--primary) { padding-inline: .55em; }
.tssd-share--bar .tssd-share__ico { width: 1.3em; height: 1.3em; }

/* ── QR ──────────────────────────────────────────────────────────────────────── */
.tssd-share__qr {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1em;
	margin-top: 1.2em; padding-top: 1em;
	border-top: 1px solid var(--sd-line);
}
.tssd-share__qr-code {
	flex: 0 0 auto; padding: 6px;
	background: var(--sd-white);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius-sm);
	line-height: 0;
}
.tssd-share__qr-svg { display: block; width: 132px; height: 132px; }
.tssd-share__qr-side { flex: 1 1 220px; }
.tssd-share__qr-text { margin: 0 0 .6em; font-size: var(--sd-fs-sm); color: var(--sd-muted); }

.tssd-share__status { margin: .6em 0 0; min-height: 1.2em; font-size: var(--sd-fs-sm); color: var(--sd-muted); }
.tssd-share__status:empty { margin: 0; min-height: 0; }

/* ── Link-Bausteine (B1/B2/B3 + B4) ─────────────────────────────────────────── */
.tssd-share-badges__grid {
	display: grid; gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 0 0 1.4em;
}
.tssd-share-badges__card {
	background: var(--sd-surface);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	box-shadow: var(--sd-shadow-sm);
	padding: .9em 1em;
}
.tssd-share-badges__cap { font-size: var(--sd-fs-sm); margin: 0 0 .6em; }
.tssd-share-badges__prev {
	display: flex; align-items: center; justify-content: center;
	min-height: 92px; padding: .7em;
	/* The badges are made for a light host page, so the preview keeps a light plate
	   in dark mode too — that is what a visitor's own site will look like. */
	background: var(--sd-white);
	border: 1px dashed var(--sd-line);
	border-radius: var(--sd-radius-sm);
}
/* sd324-allow: literal-color — SD324 §3.9: the badges are baked for a light host
   page, so their preview keeps a light plate in dark mode as well. */
html[data-theme="dark"] .tssd-share-badges__prev { background: #fafafa; }
.tssd-share-badges__prev img { max-width: 100%; height: auto; }

.tssd-share-badges__sub { margin: 1.4em 0 .6em; font-size: var(--sd-fs-lg); }
.tssd-share-badges__copy { display: flex; gap: .5em; align-items: center; margin-top: .7em; }
.tssd-share-badges__copy input {
	flex: 1 1 auto; min-width: 0;
	padding: .5em .6em;
	font-family: var(--sd-font-mono);
	font-size: var(--sd-fs-xs);
	background: var(--sd-field-bg);
	color: var(--sd-text);
	border: 1px solid var(--sd-field-line);
	border-radius: var(--sd-radius-sm);
}