/**
 * My Account → Licenses.
 *
 * Built entirely from theme tokens: this screen has to look right in both the
 * light and dark themes, and --color-brand is a different colour in each, so a
 * literal here would be wrong half the time. Type uses the dense scale the
 * design system reserves for account and checkout screens.
 */

.atsl-account {
	font-family: var(--font-sans);
	font-size: var(--text-dense-body);
	color: var(--color-text);
}

.atsl-empty {
	padding: 1.5rem;
	background: var(--color-surface-alt);
	border-radius: var(--radius-lg);
	color: var(--color-text-muted);
}

/* ── Notices ───────────────────────────────────────────────────────────── */

.atsl-notice {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	border-radius: var(--radius-md);
	border-left: 3px solid var(--color-brand);
	background: var(--color-surface-alt);
	font-size: var(--text-dense-small);
}

.atsl-notice p {
	margin: 0 0 0.5rem;
}

.atsl-notice p:last-child {
	margin-bottom: 0;
}

/* The WebRequest URL reuses .atsl-key__row / .atsl-key__input below, so it
   matches the licence key row and shares one copy handler. */

/* ── License card ──────────────────────────────────────────────────────── */

.atsl-card {
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.atsl-card__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-border);
}

.atsl-card__title {
	margin: 0;
	font-family: var(--font-title);
	font-size: var(--text-dense-section);
	color: var(--color-title);
}

.atsl-card__meta {
	margin: 0.25rem 0 0;
	font-size: var(--text-dense-small);
	color: var(--color-text-muted);
}

.atsl-status {
	padding: 0.25rem 0.7rem;
	border-radius: var(--radius-full);
	font-size: var(--text-dense-small);
	font-weight: 600;
	white-space: nowrap;
}

.atsl-status--ok {
	color: var(--color-success);
	border: 1px solid var(--color-success);
}

.atsl-status--bad {
	color: var(--color-danger);
	border: 1px solid var(--color-danger);
}

.atsl-tag {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: var(--radius-full);
	background: var(--color-surface-alt);
	font-size: var(--text-dense-small);
	color: var(--color-text-muted);
}

.atsl-tag--trial {
	color: var(--color-warning);
	background: transparent;
	border: 1px solid var(--color-warning);
}

/* ── Key ───────────────────────────────────────────────────────────────── */

.atsl-key {
	padding: 1rem 0;
}

.atsl-key__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--text-dense-small);
	color: var(--color-text-muted);
}

.atsl-key__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.atsl-key__input {
	flex: 1 1 18rem;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-title);
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: var(--text-dense-body);
	letter-spacing: 0.06em;
}

/* ── Slots ─────────────────────────────────────────────────────────────── */

.atsl-slots__title {
	margin: 0.5rem 0 0.25rem;
	font-size: var(--text-dense-section);
	color: var(--color-title);
}

.atsl-slots__hint {
	margin: 0 0 0.75rem;
	font-size: var(--text-dense-small);
	color: var(--color-text-muted);
}

.atsl-slot-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.atsl-slot {
	padding: 0.75rem 0;
	border-top: 1px solid var(--color-border);
}

.atsl-slot.is-locked .atsl-slot__input {
	opacity: 0.65;
	cursor: not-allowed;
}

.atsl-slot__main {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.atsl-slot__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	background: var(--color-surface);
	border: 1px solid var(--color-form-border, var(--color-border));
	border-radius: var(--radius-sm);
	color: var(--color-title);
	font-size: var(--text-dense-body);
}

.atsl-slot__input:focus {
	outline: none;
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px var(--color-brand-hover-shadow, transparent);
}

/* Chrome and Safari render number spinners that make the field look editable
   even when it is disabled by the cooldown. */
.atsl-slot__input::-webkit-outer-spin-button,
.atsl-slot__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.atsl-slot__input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.atsl-slot__detail {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.4rem 0 0;
	font-size: var(--text-dense-small);
	color: var(--color-text-muted);
}

.atsl-slot__lock,
.atsl-slot__msg {
	margin: 0.4rem 0 0;
	font-size: var(--text-dense-small);
}

.atsl-slot__lock {
	color: var(--color-warning);
}

.atsl-slot__msg:empty {
	display: none;
}

.atsl-slot__msg.is-error {
	color: var(--color-danger);
}

.atsl-slot__msg.is-success {
	color: var(--color-success);
}

.atsl-muted {
	color: var(--color-text-muted);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.atsl-btn {
	padding: 0.5rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--text-dense-small);
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-default);
}

.atsl-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.atsl-btn--primary {
	background: var(--color-brand);
	color: var(--color-surface-white);
}

.atsl-btn--primary:hover:not([disabled]) {
	box-shadow: var(--shadow-brand);
}

.atsl-btn--ghost {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text);
}

.atsl-btn--ghost:hover:not([disabled]) {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.atsl-btn--danger {
	background: transparent;
	border-color: var(--color-danger);
	color: var(--color-danger);
}

.atsl-btn--danger:hover:not([disabled]) {
	background: var(--color-danger);
	color: var(--color-surface-white);
}

@media (max-width: 576px) {
	.atsl-card {
		padding: 1rem;
	}

	.atsl-slot__main {
		flex-direction: column;
		align-items: stretch;
	}

	.atsl-btn {
		width: 100%;
	}
}