/**
 * [ts_my_data] self-service access and erasure page.
 *
 * Deliberately plain. This is a page someone lands on when they are already
 * uneasy about what a site knows, so it should read like a statement of fact
 * rather than marketing. Brand tokens with literal fallbacks, as elsewhere.
 */

.ts-mydata {
	color: var(--fg-2, #374151);
}

.ts-mydata__intro,
.ts-mydata__empty {
	margin: 0 0 20px;
}

.ts-mydata__empty {
	padding: 24px;
	border-radius: var(--fp-r-card, 12px);
	background: var(--ts-plum-50, #F6F3F6);
}

.ts-mydata__done {
	margin: 0 0 20px;
	padding: 16px 20px;
	border-radius: var(--fp-r-card, 12px);
	border-left: 3px solid var(--ts-success, #10B981);
	background: rgba(16, 185, 129, .08);
	font-weight: 600;
}

.ts-mydata__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}

.ts-mydata__table th,
.ts-mydata__table td {
	text-align: left;
	padding: 12px 16px 12px 0;
	border-bottom: 1px solid var(--border-1, #E5E7EB);
	vertical-align: top;
}

.ts-mydata__table th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fg-3, #6B7280);
}

.ts-mydata__h {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--fg-1, #111827);
}

.ts-mydata__list {
	margin: 0 0 24px;
	padding-left: 20px;
}

.ts-mydata__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	padding-top: 20px;
	border-top: 1px solid var(--border-1, #E5E7EB);
}

.ts-mydata__erase {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ts-mydata__confirm {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
	max-width: 380px;
}

.ts-mydata__btn {
	appearance: none;
	cursor: pointer;
	font-family: var(--fp-font-body, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 20px;
	border-radius: var(--fp-r-md, 10px);
	border: 1px solid var(--ts-plum-600, #2A1E30);
	background: var(--ts-plum-600, #2A1E30);
	color: #fff;
	transition: all var(--fp-d-base, 180ms) var(--fp-ease-out, ease);
}

.ts-mydata__btn:hover,
.ts-mydata__btn:focus-visible {
	background: var(--ts-plum-700, #180F1D);
	border-color: var(--ts-plum-700, #180F1D);
	color: #fff;
	transform: translateY(-1px);
}

/* Destructive, so it does not borrow the brand's "yes please" colour. */
.ts-mydata__btn--danger {
	background: transparent;
	color: var(--ts-coral-600, #B23422);
	border-color: var(--ts-coral-600, #B23422);
	align-self: flex-start;
}

.ts-mydata__btn--danger:hover,
.ts-mydata__btn--danger:focus-visible {
	background: var(--ts-coral-600, #B23422);
	color: #fff;
}

.ts-mydata__btn:focus-visible {
	outline: 2px solid var(--ts-plum-600, #2A1E30);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.ts-mydata__actions { flex-direction: column; gap: 20px; }
	.ts-mydata__table { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ts-mydata__btn { transition: none; }
}