/**
 * Myco panel — skins for SHARED template partials that render on several
 * routes (so no page sheet can own them): the subscription card
 * (templates/partials/subscription-card.php → /subscriptions, /project,
 * /backups). Tokens only. Page sheets may add layout context around these
 * blocks but must not restyle them.
 */

/* ---- Subscription card (.myco-sub*) ---- */

.myco-sub {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.myco-sub--compact {
	background: transparent;
	border: 0;
	padding: 14px 0 0;
}

.myco-sub__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.myco-sub__name {
	font-family: var( --myco-font-display );
	font-weight: var( --myco-display-weight );
	font-size: 20px;
}

.myco-sub__project {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 14px;
}

.myco-sub__domain {
	font-size: 12px;
	color: var( --myco-muted );
}

.myco-sub__price {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var( --myco-text-2 );
	margin: 0;
}

.myco-sub__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var( --myco-text-2 );
}

.myco-sub__note.is-error {
	color: var( --myco-danger );
}

.myco-sub__card {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	color: var( --myco-text-2 );
}

.myco-sub__card .myco-icon {
	color: var( --myco-muted );
}

.myco-sub__card.is-error,
.myco-sub__card.is-error .myco-icon {
	color: var( --myco-danger );
}

.myco-sub__meters .myco-sub__note {
	font-variant-numeric: tabular-nums;
}

/* Idle / ending / trial / pending / SCA / recovery banners inside the card. */
.myco-sub .myco-banner {
	align-items: center;
}

.myco-sub__sca,
.myco-sub__recover {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

/* Change-card: select + submit on one baseline. */
.myco-sub__change {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.myco-sub__change .myco-field {
	flex: 1 1 220px;
	max-width: 320px;
}

.myco-sub__change select {
	height: var( --myco-h-sm );
	font-size: 13px;
}

.myco-sub__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
	padding-top: 4px;
}